• Save
HTML5, CSS3, and JavaScript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5, CSS3, and JavaScript

on

  • 5,465 views

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.

Statistics

Views

Total Views
5,465
Views on SlideShare
4,663
Embed Views
802

Actions

Likes
8
Downloads
0
Comments
0

40 Embeds 802

http://mobileappstechies.blogspot.com 221
http://mobileappstechies.blogspot.in 165
http://localhost:3000 77
http://www.skillschool.co.in 52
http://skillschool.co.in 50
http://mobileappstechies.blogspot.fr 42
http://mobileappstechies.blogspot.de 20
http://mobileappstechies.blogspot.nl 18
http://mobileappstechies.blogspot.co.uk 16
http://mobileappstechies.blogspot.ru 15
http://mobileappstechies.blogspot.gr 14
http://mobileappstechies.blogspot.be 13
http://mobileappstechies.blogspot.it 8
http://mobileappstechies.blogspot.com.br 8
http://mobileappstechies.blogspot.ca 7
http://mobileappstechies.blogspot.mx 7
http://mobileappstechies.blogspot.cz 6
http://mobileappstechies.blogspot.no 6
http://mobileappstechies.blogspot.com.es 6
http://mobileappstechies.blogspot.dk 5
http://mobileappstechies.blogspot.pt 5
http://mobileappstechies.blogspot.hk 5
http://mobileappstechies.blogspot.hu 4
http://mobileappstechies.blogspot.com.au 4
http://mobileappstechies.blogspot.sg 3
http://mobileappstechies.blogspot.com.tr 3
http://mobileappstechies.blogspot.jp 3
http://mobileappstechies.blogspot.tw 3
http://mobileappstechies.blogspot.co.at 2
http://mobileappstechies.blogspot.kr 2
http://mobileappstechies.blogspot.co.il 2
http://mobileappstechies.blogspot.ro 2
http://mobileappstechies.blogspot.com.ar 1
http://www.google.co.in 1
http://mobileappstechies.blogspot.ch 1
http://mobileappstechies.blogspot.fi 1
https://www.google.com 1
http://localhost:3001 1
http://staging.slideshare.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5, CSS3, and JavaScript Presentation 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
    • Rounded corners
    • 40. Multiple backgrounds
    • 41. RGBa & opacity
    • 42. Web fonts
    • 43. Text & box shadow
    • 44. Gradients
    • 45. Advanced selectors
    • 46. Media Queries
  • 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