1 / 38

< Introduction to HTML5 />

< Introduction to HTML5 />. Bartosz Kowalski Software Developer CERN. Presentation outline. HTML : introduction and history HTML5 : History and philosophy New features Structure Forms Media Canvas Web Storage Communication Conclusion and Recommendations Questions. HTML is ?.

lisbet
Download Presentation

< Introduction to HTML5 />

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. <Introduction to HTML5/> Bartosz Kowalski Software Developer CERN

  2. Presentation outline • HTML : introduction and history • HTML5 : • History and philosophy • New features • Structure • Forms • Media • Canvas • Web Storage • Communication • Conclusion and Recommendations • Questions

  3. HTML is ? Hypertext Markup Language • Markup language for web pages • Prototyped by Tim Berners-Lee at CERN (in 1989) • HTML consists of elements called tags • Browser interprets HTML tags and generates a web page

  4. HTML : history 1991 official birthday (20 elements) 1995 v2.0 1996 CSS 1 1996 JavaScript 1997 3.2 and 4.0 (W3C Recommendation) 1999/2000 XHTML 2005 World is asynchronous (AJAX) 2009 5.0

  5. HTML5 : history W3C WHATWG 2 specifications = Web Hypertext Application Technology Working Group (WHATWG) and World Wide Web Consortium (W3C)

  6. HTML5 : philosophy Some common rules: Reduce the need for external plugins Error handling Device independent Markup to replace scripting Development visible to the public

  7. HTML5 : philosophy HTML5 = HTML + CSS + JS

  8. HTML5 : new features in a nutshell Semantic elements (article, footer, header or nav) Form controls (date, email or search) Better support for local offline storage Media : video and audio elements Canvas element for drawing UI (draggable or progress) SVG or WebGL

  9. HTML5 : new tagsin a nutshell http://shah3d.com

  10. http://shah3d.com

  11. HTML5 : support Source : http://html5readiness.com/

  12. HTML : browserengines Gecko WebKit Trident Presto

  13. HTML5 : where do we start ? Markup version: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <!DOCTYPE html> Metadata: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta charset=''utf-8''/>

  14. HTML : structure

  15. HTML5 : structure

  16. HTML5 : structure <header> <nav> <aside> <section> <footer> http://www.kayak.com/

  17. HTML5 : form <input type="text"> <input type="email"> <input type="URL"> <input type="date"> type={time, month, week} <input type="number"> <input type="range"> <input type="color">

  18. HTML5 : form Extra Input field attributes: required autocomplete min / max step pattern={regexp} multiple list <datalist/>

  19. HTML5 : media HTML4: HTML5:

  20. HTML5 : media Extra video field attributes: autoplay controls height / width loop preload poster playbackRate http://www.youtube.com/html5 JS events (play, pause, ended, playing, progress, …)

  21. HTML5 : media Codec nightmare : http://fmbip.com <source>

  22. HTML5 : canvas Canvas is: API for 2D drawing <canvas/> Context selector Lines, Shapes, Paths, ….. Pixels Save image (Data URL)

  23. HTML5 : canvas Canvas sample:

  24. HTML5 : canvas http://mugtug.com/sketchpad/

  25. New features : canvas 3D Canvas 3Dis: Canvas + WebGL -Extended JS -Based on OpenGL ES -Not fully or/and officially supported by browsers Sample:

  26. HTML5: SVG SVG (Scalable Vector Graphics) is: XML-based format for describing 2D vector graphics SVG in HTML5: Sample:

  27. HTML5: SVG SVG sample: XML-based format for describing 2D vector graphics

  28. Canvasor SVG ?

  29. HTML5 or Flash ?

  30. HTML : web storage Cookies: -Data sent back to the server on every request -4kb of data per cookie -Browsers are not required to retain more than 300 cookies in total

  31. HTML5 : web storage Local Storage ans Session Storage: Database Storage: -Structured data for large content -Client-side relational database (SQL) -Use of SQLite DB (light and fast) -Use it to store temp data (domain specific per session)

  32. HTML5 : webstorage LocalStoragesample : Session Storagesample :

  33. HTML5 : webstorage DatabaseStoragesample:

  34. HTML5 : communication Communication API = Web Messaging (HTML5), Web Workers and Web Sockets Web Messaging: = cross-site communication Web Workers: = parallelism = running multiple JavaScript scripts independently Web Sockets: = full-duplex communication channel which operates through a single TCP connection = PUSH technology = real time web applications

  35. HTML5 and browser support nightmare Use JS library => e.g. : • Small JS library that detects the availability of native implementations for HTML5 and CSS3 specifications • Tests for more than 40 features • It doesn’t add missing features Sample: http://www.modernizr.com/

  36. Conclusion • - HTML5 is around the corner ! • Full of new 2.0 features : • new structure • web storage • media and canvas • UI (e.g. draggable) • Web with HTML5 is more semantic • Stick to the recommendations (see the next slide)

  37. Recommendations Learn HTML5 now = Don’t wait for the final specification (available in 20XX)! • -Already a big community • Books and tutorials available • Learn (modern) JavaScript ! • Always check HTML5 browser support matrix • -Consider for mobile websites • -Help search engines to correctly index your page

  38. <Thankyou/>

More Related