Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5, CSS3, and JavaScript

6,465 views

Published on

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

Published in: Technology

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 />

×