Web Programming Intro
•
5 gostaram•5,532 visualizações
An introductory slide deck for HTML, JavaScript, CSS and web programming
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Web Programming Intro
Semelhante a Web Programming Intro (12)
Mais de Ynon Perek
Mais de Ynon Perek (20)
Último
Último (20)
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 ynon@ynonperek.com 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