Your SlideShare is downloading. ×
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5, CSS3, and JavaScript

5,089

Published 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.

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

No Downloads
Views
Total Views
5,089
On Slideshare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
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

×