introducing HTML 5

936 views

Published on

Materi yang dibawakan oleh Erick Kurniawan dalam seminar The Next Generation Web Technologi @ UIN Yogyakarta 24 sept 2011

Penyelenggara : http://infinity.or.id/

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

  • Be the first to like this

No Downloads
Views
Total views
936
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
45
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

introducing HTML 5

  1. 1. Erick Kurniawan, M.Kom, MCTS, MCPD, MCTintroducingHTML 5
  2. 2. Who Am I ?» Erick Kurniawan » erick@actual-training.com » http://actual-training.com » Microsoft User Group Indonesia (MUGI) Jogja » Microsoft Certified Trainer (MCT) » Microsoft Most Valuable Professional (MVP)» Books Author » Migrasi VB6 ke VB.NET (.NET Indonesia) » ASP.NET 3.5 untuk Aplikasi Web Interaktif (Andi Publisher) » VB 2010 (Andi Publisher) » Membangun Aplikasi Mobile dengan Qt SDK (Andi Publisher)
  3. 3. HTML5 is the next generation of HTML
  4. 4. What is HTML 5?• HTML5 – the next major revision of the HTML – Currently under development • Far away from final version – Developed under the HTML 5 working group of the World Wide Web Consortium (W3C) in 2007 – First Public Working Draft of the specification • January 22, 2008 – Parts of HTML5 are being implemented in browsers before the whole specification is ready4
  5. 5. HTML – Past, Present, Future• 1991 – HTML first mentioned – Tim Berners-Lee – HTML tags• 1993 – HTML (first public version, published at IETF)• 1993 – HTML 2 draft• 1995 – HTML 2 – W3C• 1995 – HTML 3 draft• 1997 – HTML 3.2 – “Wilbur”• 1997 – HTML 4 – ”Cougar” – CSS• 1999 – HTML 4.01 (final)• 2000 – XHTML draft• 2001 – XHTML (final)• 2008 – HTML5 / XHTML5 draft• 2011 – feature complete HTML5• 2022 – HTML5 – final specification 5
  6. 6. HTML Forms RIA + Markup CSS 3 Media Queries + Selectors JavaScript = Geolocation APIs Storage Web Web Sockets Microd Fonts FileAPI ata Transforms Media Canvas Transitions Capture Video Animations IndexedDB Etc… Etc… Etc…
  7. 7. Technology Areas of HTML5
  8. 8. “I’m Just a Spec, Yes Only a Spec”
  9. 9. “The future of the web is HTML5.” “We’re betting big on HTML5.” “The world is moving to HTML5.”Do believe that HTML5 is changing everything.
  10. 10. HTML 5 Goals• Latest version is HTML5 – Aimed to have all of the power of native applications – Run on any platform (Windows, Linux, iPhone, Android, etc.)• New features should be based on HTML, CSS, DOM and JavaScript• Reduce the need for external plugins• Better error handling• More markup to replace scripting 10
  11. 11. Changed Old Tags• Doctype tag: <!DOCTYPE html>• HTML tag: <html lang="en" xml:lang="en">• Meta tag: <meta charset="utf-8">• Link tag: <link rel="stylesheet" href="style-original.css">
  12. 12. New Layout Structure• Better layout structure: new structural elements – <section> – <header> <header> – <nav> – <article> <section> – <aside> <header> – <footer> <nav> <aside> <article> <footer> <footer>
  13. 13. NEW LAYOUT DEMO
  14. 14. New Media Tags• Media Tags – <audio> • Attributes: autoplay, controls, loop, src – <video> • Attributes: autoplay, controls, loop, height, width, src
  15. 15. PLAYING AUDIO / VIDEO DEMO
  16. 16. Web Form Control• New attributes Attribute Description Autocomplete ON/OFF. In case of “on”, the browser stores the value, auto fill when the user visits the same form next time Autofocus Autofocus. Input field is focused on page load Required Required. Mandates input field value for the form submit action Dragabble True/false indicates if the element is dragabble or not
  17. 17. Web Form Control• New <input> type(s) Attribute DescriptionNumber/Range Restricts users to enter only numbers. Additional attributes min, max and step and value can convert the input to a slider control or a spin boxdate, month, week, Providers a date picker interface.time, date + time, anddate + time - timezoneEmail Input type for Email AddressesURL Input field for URL addressTelephone Input type for Telephone number
  18. 18. WEB FORM CONTROL DEMO
  19. 19. Canvas• Canvas – Dynamic, Scriptable rendering of 2D images – Uses JavaScript to draw – Resolution-dependent bitmap – Can draw text as well
  20. 20. CANVAS DEMO
  21. 21. Drag and Drop• Drag and Drop – <element> attribute draggable="true" – Events: dragstart, dragstop
  22. 22. DRAG AND DROP DEMO
  23. 23. Local Storage• Local Storage – Store data locally – Similar to cookies, but can store much larger amount of data – Same Origin Restrictions – localStorage.setItem(key, value) – localStorage.getItem(key)• SQL Storage – Easier access to SQL Storage
  24. 24. Questions?

×