Web Programming Intro             Ynon PerekTuesday, January 29, 13
Whoami                     Ynon Perek                     http://ynonperek.com                     http://apps.ynonperek.c...
Agenda                     The Web Architecture                     Hello HTML                     Hello CSS              ...
How It All Started                     While working at CERN                     in the 90s, Berners-Lee                  ...
The Web Architecture        Client Side                           Server Side                                 GET data    ...
Server Side                     Server side creates the                     data and returns it to                     the...
Client Side                     Client side takes the                     data and renders it on                     scree...
The Data                     Data is in a format                     called HTML (Hyper                     Text Markup La...
The Data                                           <html>                     A browser renders     <body>                ...
The Data                     Tag-based means you need to use                     the same opening and closing tag         ...
Available Tags                     Tags (or markup) define the role of their content                     Headers:         ...
Container (Block)             Demo             Inline vs. Block                                   One Two Three (inline)Tu...
Adding Links                     Use <a> tag to create a link                     <a> is an inline element                ...
Adding Images                     Use <img> tag to create an image                     <img> is an inline-block element: I...
Adding Text                     Use <p> tag to wrap text paragraphs                     <p> is a block-level element      ...
Clickable Images                     Wrap in <img> in an <a> tag to get an image that is                     also a link  ...
Lists                     HTML has two types of lists: ordered lists marked <ol>                     and unordered lists m...
Lab                     Create an HTML document for your resume                     Use correct headers                   ...
Pages With Style             Introducing CSSTuesday, January 29, 13
Cascading Style Sheets                     Apply styling rules to elements                     Choose an element with a se...
Let’s Start With The Basics                     Select all h1 elements                     Write text in red              ...
Let’s Start With The Basics                     More CSS styling properties:                          background-color, co...
Let’s Start With The Basics                     Use #id to find a specific HTML element                     h2#main {     ...
Let’s Start With The Basics                     Use .class to find a set of HTML elements                     h2.uppercase...
Block Level Properties                     Only block (or inline-block) elements have size                     width and h...
Lab                     Using the docs:                     https://                     developer.mozilla.org/           ...
Tools Of The Trade                     Development Tools                     DOM Libraries                     UI Librarie...
Development Tools                     WebStorm IDE                          LiveEdit                          Extract inli...
Development Tools                     Chrome Developer                     Tools                          Edit HTML and CS...
Development Tools                     BrowserStack maintain                     a VM for every browser                    ...
DOM Libraries                     jQuery                     YUI                     ExtJS CoreTuesday, January 29, 13
UI Libraries                     jQuery UI                     Kendo UI                     YUI                     ExtJST...
Demo: Kendo UI                     Create widgets from                     DOM elements                     http://       ...
Demo: YUI                     Widgets are created                     from DOM elements                     Library is loa...
Demo: jQuery UI                     A collection of jQuery                     UI Plugins                     Use DOM elem...
Demo: ExtJS                     A UI Comprehensive                     framework                     Build everything in  ...
Choosing Framework                     Use DOM library for maximum control                     Use UI library for flexibil...
Thank You                     Photos From:                          http://www.flickr.com/photos/                         ...
Upcoming SlideShare
Loading in...5
×

Web Programming Intro

2,049

Published on

An introductory slide deck for HTML, JavaScript, CSS and web programming

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,049
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
66
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Programming Intro

  1. 1. Web Programming Intro Ynon PerekTuesday, January 29, 13
  2. 2. Whoami Ynon Perek http://ynonperek.com http://apps.ynonperek.com/sapiens/00_web.pdf ynon@ynonperek.comTuesday, January 29, 13
  3. 3. Agenda The Web Architecture Hello HTML Hello CSS Hello JavaScriptTuesday, January 29, 13
  4. 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 W3CTuesday, January 29, 13
  5. 5. The Web Architecture Client Side Server Side GET data Here It IsTuesday, January 29, 13
  6. 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. 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, SafariTuesday, January 29, 13
  8. 8. The Data Data is in a format called HTML (Hyper Text Markup Language) Invented by Tim Berners-LeeTuesday, January 29, 13
  9. 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> languageTuesday, January 29, 13
  10. 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. 11. Available Tags Tags (or markup) define the role of their content Headers: h1, h2, h3, h4, h5, h6 Block Sections: div Inline Sections: spanTuesday, January 29, 13
  12. 12. Container (Block) Demo Inline vs. Block One Two Three (inline)Tuesday, January 29, 13
  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. 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. 15. Adding Text Use <p> tag to wrap text paragraphs <p> is a block-level element Adds a newlineTuesday, January 29, 13
  16. 16. Clickable Images Wrap in <img> in an <a> tag to get an image that is also a link Demo: images, links and text paragraphsTuesday, January 29, 13
  17. 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 elementsTuesday, January 29, 13
  18. 18. Lab Create an HTML document for your resume Use correct headers Add an imageTuesday, January 29, 13
  19. 19. Pages With Style Introducing CSSTuesday, January 29, 13
  20. 20. Cascading Style Sheets Apply styling rules to elements Choose an element with a selector Specify rules using propertiesTuesday, January 29, 13
  21. 21. Let’s Start With The Basics Select all h1 elements Write text in red h1 { color: red; }Tuesday, January 29, 13
  22. 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 outlineTuesday, January 29, 13
  23. 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. 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. 25. Block Level Properties Only block (or inline-block) elements have size width and height are only applicable to block elementsTuesday, January 29, 13
  26. 26. Lab Using the docs: https:// developer.mozilla.org/ en-US/docs/CSS Style this HTML: http://pastebin.com/ Wm2s8EnHTuesday, January 29, 13
  27. 27. Tools Of The Trade Development Tools DOM Libraries UI LibrariesTuesday, January 29, 13
  28. 28. Development Tools WebStorm IDE LiveEdit Extract inline CSS Customize TemplatesTuesday, January 29, 13
  29. 29. Development Tools Chrome Developer Tools Edit HTML and CSS on any page See Network Activity Set cache and user agent Consider CanaryTuesday, January 29, 13
  30. 30. Development Tools BrowserStack maintain a VM for every browser Test and see how your app/site worksTuesday, January 29, 13
  31. 31. DOM Libraries jQuery YUI ExtJS CoreTuesday, January 29, 13
  32. 32. UI Libraries jQuery UI Kendo UI YUI ExtJSTuesday, January 29, 13
  33. 33. Demo: Kendo UI Create widgets from DOM elements http:// demos.kendoui.com/ web/calendar/ index.htmlTuesday, January 29, 13
  34. 34. Demo: YUI Widgets are created from DOM elements Library is loaded async and on-demand http://yuilibrary.com/ yui/docs/calendar/ calendar-simple.htmlTuesday, January 29, 13
  35. 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/#inlineTuesday, January 29, 13
  36. 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.htmlTuesday, January 29, 13
  37. 37. Choosing Framework Use DOM library for maximum control Use UI library for flexibility AND comfort Use UI framework for maximum comfortTuesday, January 29, 13
  38. 38. Thank You Photos From: http://www.flickr.com/photos/ pedrosimoes7/5158386021/ http://123rf.comTuesday, January 29, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×