< introduction to html5 />
DESCRIPTION
< 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 ?. - PowerPoint PPT PresentationTRANSCRIPT
<Introduction to HTML5/>
Bartosz KowalskiSoftware 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 : history1991 official birthday (20 elements)
1995 v2.0
1997 3.2 and 4.0 (W3C Recommendation)
1999/2000 XHTML
1996 CSS 1
1996 JavaScript
2009 5.0
2005 World is asynchronous (AJAX)
HTML5 : history
2 specifications = Web Hypertext Application Technology Working Group (WHATWG) and World Wide Web
Consortium (W3C)
W3C WHATWG
HTML5 : philosophySome 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, email or search)
UI (draggable or progress)
SVG or WebGL
http://shah3d.com
HTML : browser engines
Gecko
WebKit
Trident
Presto
HTML5 : where do we start ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset=''utf-8''/>
Metadata:
Markup version:
HTML : structure POPULARITY VALUE FREQUENCY
1 footer 179,5282 menu 146,6733 style1 138,3084 msonormal 123,3745 text 122,9116 content 113,9517 title 91,9578 style2 89,8519 header 89,274
10 copyright 86,97911 button 81,50312 main 69,6213 style3 69,34914 small 68,99515 nav 68,63416 clear 68,57117 search 59,80218 style4 56,03219 logo 48,83120 body 48,052
HTML5 : structure
HTML5 : structure
http://www.kayak.com/
<nav>
<header>
<section> <aside>
<footer>
HTML5 : form
<input type="email">
<input type="text">
<input type="URL">
<input type="date">type={time, month, week}
<input type="number">
<input type="range">
<input type="color">
HTML5 : formExtra Input field attributes:
required
autocomplete
min / max
step
pattern={regexp}
multiple
list
<datalist/>
HTML5 : media HTML4:
HTML5:
HTML5 : mediaExtra video field attributes:
autoplay
controls
height / width
loop
preload
poster
playbackRate http://www.youtube.com/html5
JS events (play, pause, ended, playing, progress, …)
HTML5 : canvas API for 2D drawing
Canvas is:
Context selector
<canvas/>
Lines,Shapes,Paths,
…..
Pixels
Save image (Data URL)
HTML5 : canvas Canvas sample:
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 ?Canvas SVG
Pixel-based Object 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)
Zooming Scaling
HTML5 or Flash ?HTML5 Flash
Not (yet) fully supported by all browsers
Support for wide variety of browsers (via plugin)
HTML, JavaScript ActionScript
Semantic, Indexed No semantic, not indexed
Access to source code Limited access to source code
Supported on Apple mobile devices
Not supported on Apple mobile devices
Basic interactivity Rich 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:
Local SessionPersists after the browser is closed Lifetime Session
Domain specific Scope Per-page-per-windowSend 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
http://www.modernizr.com/
-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)!
<Thank you/>