HTML5<br />makes the web better<br />
Zac Gordon<br />professional webucator<br />
The Web Today<br /><ul><li>Interlinked and interactive digital content
Accessed across a range of devices
An open platform for programmers and designers</li></li></ul><li>What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />
What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />HTML: Hyper Text Markup Language<br /><ul><li>A markup language
Gives structure and meaning
Version 5</li></li></ul><li>What is HTML5?<br />HTML<br />JavaScript<br />CSS<br />CSS: Cascading Style Sheets<br /><ul><l...
Styles content for device
Version 3</li></li></ul><li>What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />JS: JavaScript (ECMA-262)<br /><ul><li>...
Controls behavior on a web page
Version 1.8</li></li></ul><li>What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />It’s also just HTML5<br />
HTML5: Semantics<br />
HTML5: Semantics<br />typical html4 page structure<br />
HTML5: Semantics<br />page structure with HTML5<br />
HTML5: Microdata<br />html  for an event<br />
HTML5: Microdata<br />html  for an event with microdata<br />
HTML5: Microdata<br />
HTML5: Offline & Storage<br />
HTML5: Offline & Storage<br />Gmail works offline using HTML5 and Google Gears<br />
HTML5: Device Access<br />
HTML5: Geolocation<br />
HTML5: Geolocation<br />
HTML5: Geolocation<br />
HTML5: Device Orientation<br />Snow fall changes based on moving laptop to left and right<br />
HTML5: Connectivity<br />
HTML5: Web Sockets<br />Web sockets send<br />data between the<br />server and client<br />fasterthan http requests<br />
HTML5: Multimedia<br />
HTML5: Multimedia<br />
HTML5: Multimedia<br />
HTML5: Multimedia<br />
New with HTML5<br />
HTML5: Canvas<br />
HTML5: Canvas<br />
HTML5: Canvas<br />
HTML5: Performance<br />
HTML5: XMLhttprequest 2<br />
HTML5: CSS3<br />
 New with CSS3<br /><ul><li>Rounded corners
Multiple backgrounds
RGBa & opacity
Web fonts
Text & box shadow
Gradients
Advanced selectors
Media Queries</li></li></ul><li>CSS3: Rounded Corners<br />
CSS3: Rounded Corners<br />This HTML embeds two <br />of the images in the page<br />as normal images<br />
CSS3: Rounded Corners<br />The other two images<br />are added in the CSS<br />
CSS3: Rounded Corners<br />This HTML is much simpler and has no images in it<br />
Upcoming SlideShare
Loading in...5
×

HTML5, CSS3, and JavaScript

5,216

Published on

Lecture slides and videos from my talk at the 2011 Montgomery College Student Web and Gaming Conference.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,216
On Slideshare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

HTML5, CSS3, and JavaScript

  1. 1. HTML5<br />makes the web better<br />
  2. 2. Zac Gordon<br />professional webucator<br />
  3. 3. The Web Today<br /><ul><li>Interlinked and interactive digital content
  4. 4. Accessed across a range of devices
  5. 5. An open platform for programmers and designers</li></li></ul><li>What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />
  6. 6. What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />HTML: Hyper Text Markup Language<br /><ul><li>A markup language
  7. 7. Gives structure and meaning
  8. 8. Version 5</li></li></ul><li>What is HTML5?<br />HTML<br />JavaScript<br />CSS<br />CSS: Cascading Style Sheets<br /><ul><li>A presentation language
  9. 9. Styles content for device
  10. 10. Version 3</li></li></ul><li>What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />JS: JavaScript (ECMA-262)<br /><ul><li>A programming language
  11. 11. Controls behavior on a web page
  12. 12. Version 1.8</li></li></ul><li>What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />It’s also just HTML5<br />
  13. 13. HTML5: Semantics<br />
  14. 14. HTML5: Semantics<br />typical html4 page structure<br />
  15. 15. HTML5: Semantics<br />page structure with HTML5<br />
  16. 16. HTML5: Microdata<br />html for an event<br />
  17. 17. HTML5: Microdata<br />html for an event with microdata<br />
  18. 18. HTML5: Microdata<br />
  19. 19. HTML5: Offline & Storage<br />
  20. 20. HTML5: Offline & Storage<br />Gmail works offline using HTML5 and Google Gears<br />
  21. 21. HTML5: Device Access<br />
  22. 22. HTML5: Geolocation<br />
  23. 23. HTML5: Geolocation<br />
  24. 24. HTML5: Geolocation<br />
  25. 25. HTML5: Device Orientation<br />Snow fall changes based on moving laptop to left and right<br />
  26. 26. HTML5: Connectivity<br />
  27. 27. HTML5: Web Sockets<br />Web sockets send<br />data between the<br />server and client<br />fasterthan http requests<br />
  28. 28. HTML5: Multimedia<br />
  29. 29. HTML5: Multimedia<br />
  30. 30. HTML5: Multimedia<br />
  31. 31. HTML5: Multimedia<br />
  32. 32. New with HTML5<br />
  33. 33. HTML5: Canvas<br />
  34. 34. HTML5: Canvas<br />
  35. 35. HTML5: Canvas<br />
  36. 36. HTML5: Performance<br />
  37. 37. HTML5: XMLhttprequest 2<br />
  38. 38. HTML5: CSS3<br />
  39. 39. New with CSS3<br /><ul><li>Rounded corners
  40. 40. Multiple backgrounds
  41. 41. RGBa & opacity
  42. 42. Web fonts
  43. 43. Text & box shadow
  44. 44. Gradients
  45. 45. Advanced selectors
  46. 46. Media Queries</li></li></ul><li>CSS3: Rounded Corners<br />
  47. 47. CSS3: Rounded Corners<br />This HTML embeds two <br />of the images in the page<br />as normal images<br />
  48. 48. CSS3: Rounded Corners<br />The other two images<br />are added in the CSS<br />
  49. 49. CSS3: Rounded Corners<br />This HTML is much simpler and has no images in it<br />
  50. 50. CSS3: Rounded Corners<br />Styling for rounded corners done in 1 line with CSS3!<br />
  51. 51. CSS3: Web Fonts<br />Before CSS3, custom fonts required making images for <br />each word or using Flash to embed fonts and replace HTML text<br />
  52. 52. CSS3: Web Fonts<br />
  53. 53. CSS3: Web Fonts<br />
  54. 54. CSS3: Media Queries<br />Apply different styles based on measurements of the device<br />
  55. 55. HTML5: Overview<br />
  56. 56. What is HTML5?<br />HTML<br />CSS<br />JavaScript<br />
  57. 57. JavaScript<br />HTML<br />CSS<br />JavaScript<br /><ul><li>Can’t do much HTML5 without it
  58. 58. One of most in demand languages
  59. 59. Teaching it next semester</li></li></ul><li>Learn More<br />Advanced Web Design (CA273)<br />HTML5, CSS3<br />JavaScript (CA276)<br />JavaScript<br />
  60. 60. Thank you!<br />Zac Gordon<br />http://dabrook.org<br />@dabrooktweets<br />

×