Your SlideShare is downloading. ×
Google Dev Fest HTML5 Presentation
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

Google Dev Fest HTML5 Presentation

2,622
views

Published on

The slide presentation about HTML5 that I created inspired by GoogleDevFest Singapore 2010.

The slide presentation about HTML5 that I created inspired by GoogleDevFest Singapore 2010.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,622
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
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 ~= HTML + CSS + JS APIs
    HTML5
    Web Development to the next level
  • 2. Rough Timeline of Web Technologies
  • 3. JS APIs
    • Client Side Storage (Web SQL Database, App Cache, Web Storage)
    • 4. Communication (Web Socket, Worker Workers)
    • 5. Desktop Experience (Notification, Drag and Drop API)
  • Client Side Storage
    Web Storage
    New methods for storing data on the client
    • localStorage – storages data with no limit
    • 6. sessionStorage – stores data for one session
  • Client Side Storage
    App Cache
    Web application that work offline.
  • 7. Communication
    Web Socket
    Bi-directional, full duplex communications channels, over a singel Transmission Control Protocol (TCP) socket, designed to be implemented in web browsers and web servers.
  • 8.
  • 9. Client Side Storage
    Web SQL Database
    Bring SQL to the client side.
  • 10. Communication
    Worker Workers
    Possibility to load a JS file dynamically and then have it process code in a background process, not affecting the user interface and it’s response level.
  • 11. Desktop Experience
    Notification
    Pop up notification desktop app-style.
  • 12. Desktop Experience
    Drag and Drop API
    Simply drag and drop object.
  • 13. Geolocation
    Detect where you are now.
  • 14. HTML
    • Semantics (New tags, Link relation, Microdata)
    • 15. Accessibility (ARIA – Accessibility Rich Internet Applications)
    • 16. Web Form 2.0 (Input fields)
    • 17. Multimedia (Audio Tag, Video Tag)
    • 18. 2D and 3D Drawing (Canvas, Web GL, SVG)
  • Semantics
    New tags
  • 19. New tags
  • 20. Semantics
    Link relations
    - A way to explain why you’re pointing to another page.
    - <a href=“somelink.html” rel=“nofollow” >some text</a>
  • 21. Link relations
  • 22. Semantics
    Microdata
  • 23. Microdata
  • 24. Accessibility
    ARIA (Accessible Rich Internet Application)
    - Defines a way to make web content and web applications more accessible to people with disabilities.
  • 25. Web Form 2.0
    New form field types
  • Multimedia
    Video tag and Audio tag
    • Playing video or audio without plugin.
  • 2D and 3D Drawing
    Canvas
    - Allows for dynamic, scriptable rendering of 2D shapes and bitmap images.
  • 32. 2D and 3D Drawing
    Canvas 3D (WebGL)
    - Allows for dynamic, scriptable rendering of 3D shapes and bitmap images.
  • 33. 2D and 3D Drawing
    SVG (Scalable Vector Graphic)
    - Specification of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic.
  • 34. CSS
    - Text wrapping
    - Columns
    - Text Stroke
    - Opacity
    - HSL
    - Rounded Corners
    - Gradients
    - Shadow
    - Transitions, Transforms and Animations
  • 37. New selector
  • 38. Typography
    New font support
  • 39. Visuals
  • And the rest…
  • Thank you
    May the force be with you…