HTML5, CSS3, and JavaScript

  • 4,853 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,853
On Slideshare
0
From Embeds
0
Number of Embeds
37

Actions

Shares
Downloads
0
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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