Web Programming Intro
5 likes5,552 views
This document provides an introduction and overview of web programming. It discusses the history and architecture of the web, including how HTML, CSS, and JavaScript are used on the client-side and server-side. It covers the basic structure of HTML documents and how to add common elements like text, links, images and lists. It also introduces CSS for styling HTML elements with selectors, properties and positioning. Finally, it demonstrates some popular development tools and libraries like jQuery, Kendo UI, and ExtJS that can be used to build user interfaces.
Web Programming Intro
- 1. Web Programming Intro Ynon Perek Tuesday, January 29, 13
- 2. Whoami Ynon Perek http://ynonperek.com http://apps.ynonperek.com/sapiens/00_web.pdf [email protected] Tuesday, January 29, 13
- 3. Agenda The Web Architecture Hello HTML Hello CSS Hello JavaScript Tuesday, January 29, 13
- 4. How It All Started While working at CERN in the 90s, Berners-Lee develops WWW 1991 First web site 1994 Berners-Lee founded the W3C Tuesday, January 29, 13
- 5. The Web Architecture Client Side Server Side GET data Here It Is Tuesday, January 29, 13
- 6. Server Side Server side creates the data and returns it to the client All server-side languages return the same result: HTML There are many languages... Tuesday, January 29, 13
- 7. Client Side Client side takes the data and renders it on screen Provides a UX around the data Can send data back to the server Browsers: IE, Chrome, Firefox, Safari Tuesday, January 29, 13
- 8. The Data Data is in a format called HTML (Hyper Text Markup Language) Invented by Tim Berners-Lee Tuesday, January 29, 13
- 9. The Data <html> A browser renders <body> HTML document on <h1>Hello World</h1> <p>All your base are belong screen to us</p> </body> HTML is a tag-based </html> language Tuesday, January 29, 13
- 10. The Data Tag-based means you need to use the same opening and closing tag <div>How Do You Annoy A Web Developer ?</span> Tuesday, January 29, 13
- 11. Available Tags Tags (or markup) define the role of their content Headers: h1, h2, h3, h4, h5, h6 Block Sections: div Inline Sections: span Tuesday, January 29, 13
- 12. Container (Block) Demo Inline vs. Block One Two Three (inline) Tuesday, January 29, 13
- 13. Adding Links Use <a> tag to create a link <a> is an inline element Example: <a href=”http://google.com”>Go To Google</a> Tuesday, January 29, 13
- 14. Adding Images Use <img> tag to create an image <img> is an inline-block element: It flows it text, but has height and width like a block alt attribute tells google what’s in the photo Example: <img src=”http://fc02.deviantart.net/fs21/f/2007/306/ d/6/Chibi_turtle_by_blackcattlc.jpg” alt=”Cool Turtle”> Tuesday, January 29, 13
- 15. Adding Text Use <p> tag to wrap text paragraphs <p> is a block-level element Adds a newline Tuesday, January 29, 13
- 16. Clickable Images Wrap in <img> in an <a> tag to get an image that is also a link Demo: images, links and text paragraphs Tuesday, January 29, 13
- 17. Lists HTML has two types of lists: ordered lists marked <ol> and unordered lists marked <ul> Inside a list block, use <li> to denote items <ul>, <ol> and <li> are all block elements Tuesday, January 29, 13
- 18. Lab Create an HTML document for your resume Use correct headers Add an image Tuesday, January 29, 13
- 19. Pages With Style Introducing CSS Tuesday, January 29, 13
- 20. Cascading Style Sheets Apply styling rules to elements Choose an element with a selector Specify rules using properties Tuesday, January 29, 13
- 21. Let’s Start With The Basics Select all h1 elements Write text in red h1 { color: red; } Tuesday, January 29, 13
- 22. Let’s Start With The Basics More CSS styling properties: background-color, color font-weight, font-size, font-family, font-style, text- decoration text-align, line-height outline Tuesday, January 29, 13
- 23. Let’s Start With The Basics Use #id to find a specific HTML element h2#main { color: red; } And in HTML: <h2 id=‘main’>Red</h2> Tuesday, January 29, 13
- 24. Let’s Start With The Basics Use .class to find a set of HTML elements h2.uppercase { text-transform: uppercase; } And in HTML: <h2 class=‘uppercase’>Red</h2> Tuesday, January 29, 13
- 25. Block Level Properties Only block (or inline-block) elements have size width and height are only applicable to block elements Tuesday, January 29, 13
- 26. Lab Using the docs: https:// developer.mozilla.org/ en-US/docs/CSS Style this HTML: http://pastebin.com/ Wm2s8EnH Tuesday, January 29, 13
- 27. Tools Of The Trade Development Tools DOM Libraries UI Libraries Tuesday, January 29, 13
- 28. Development Tools WebStorm IDE LiveEdit Extract inline CSS Customize Templates Tuesday, January 29, 13
- 29. Development Tools Chrome Developer Tools Edit HTML and CSS on any page See Network Activity Set cache and user agent Consider Canary Tuesday, January 29, 13
- 30. Development Tools BrowserStack maintain a VM for every browser Test and see how your app/site works Tuesday, January 29, 13
- 31. DOM Libraries jQuery YUI ExtJS Core Tuesday, January 29, 13
- 32. UI Libraries jQuery UI Kendo UI YUI ExtJS Tuesday, January 29, 13
- 33. Demo: Kendo UI Create widgets from DOM elements http:// demos.kendoui.com/ web/calendar/ index.html Tuesday, January 29, 13
- 34. Demo: YUI Widgets are created from DOM elements Library is loaded async and on-demand http://yuilibrary.com/ yui/docs/calendar/ calendar-simple.html Tuesday, January 29, 13
- 35. Demo: jQuery UI A collection of jQuery UI Plugins Use DOM elements to create widgets Can integrate with other jQuery Plugins http://jqueryui.com/ datepicker/#inline Tuesday, January 29, 13
- 36. Demo: ExtJS A UI Comprehensive framework Build everything in JavaScript Ext way or the high way http://cdn.sencha.io/ ext-4.1.1a-gpl/ examples/calendar/ index.html Tuesday, January 29, 13
- 37. Choosing Framework Use DOM library for maximum control Use UI library for flexibility AND comfort Use UI framework for maximum comfort Tuesday, January 29, 13
- 38. Thank You Photos From: http://www.flickr.com/photos/ pedrosimoes7/5158386021/ http://123rf.com Tuesday, January 29, 13