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 ? -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 Hypertext Markup Language

HTML : history 1991 official birthday (20 elements) 1995 v and 4.0 (W3C Recommendation) 1999/2000 XHTML 1996 CSS JavaScript World is asynchronous (AJAX)

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

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

HTML5 : philosophy HTML5 = HTML + CSS + JS

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

HTML5 : new tags in a nutshell

HTML5 : support Source :

HTML : browser engines Gecko WebKit Trident Presto

HTML5 : where do we start ? Metadata: Markup version:

HTML : structure POPULARITYVALUEFREQUENCY 1footer179,528 2menu146,673 3style1138,308 4msonormal123,374 5text122,911 6content113,951 7title91,957 8style289,851 9header89,274 10copyright86,979 11button81,503 12main69,62 13style369,349 14small68,995 15nav68,634 16clear68,571 17search59,802 18style456,032 19logo48,831 20body48,052

HTML5 : structure

HTML5 : form type={time, month, week}

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

HTML5 : media HTML4: HTML5:

HTML5 : media Extra video field attributes: autoplay controls height / width loop preload poster playbackRate JS events (play, pause, ended, playing, progress, …)

HTML5 : media Codec nightmare :

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

HTML5 : canvas Canvas sample:

HTML5 : canvas

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

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

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

Canvas or SVG ? CanvasSVG Pixel-basedObject model-based (XML) Single HTML container Multiple elements (part of the DOM) Created and modified via API Created with markup and modified by API or CSS Interaction manually programmed from mouse coordinates Interaction is object based on the tree of elements (DOM) ZoomingScaling

HTML5 or Flash ? HTML5Flash Not (yet) fully supported by all browsers Support for wide variety of browsers (via plugin) HTML, JavaScriptActionScript Semantic, IndexedNo semantic, not indexed Access to source codeLimited access to source code Supported on Apple mobile devices Not supported on Apple mobile devices Basic interactivityRich interactivity

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

HTML5 : web storage Local Storage ans Session 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) Database Storage: LocalSession Persists after the browser is closed LifetimeSession Domain specificScopePer-page-per-window Send back on request Client-side key-value database typically limited to 5/10MB

HTML5 : web storage Local Storage sample : Session Storage sample :

HTML5 : web storage Database Storage sample:

HTML5 : communication Communication API = Web Messaging (HTML5), Web Workers and Web Sockets 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 Web Messaging: = cross-site communication

HTML5 and browser support nightmare -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: Use JS library => e.g. :

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)

Recommendations -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 Learn HTML5 now = Don’t wait for the final specification (available in 20XX)!