HTML5
advertisement
<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 ?
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
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
HTML5 : history
W3C
WHATWG
2 specifications = Web Hypertext Application Technology
Working Group (WHATWG) and World Wide Web
Consortium (W3C)
HTML5 : philosophy
Some common rules:
Reduce the need for external plugins
Error handling
Device independent
Markup to replace scripting
Development visible to the public
HTML5 : philosophy
HTML5 = HTML + CSS + JS
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
HTML5 : new tags in a nutshell
http://shah3d.com
http://shah3d.com
HTML5 : support
Source : http://html5readiness.com/
HTML : browser engines
Gecko
WebKit
Trident
Presto
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''/>
HTML : structure
POPULARITY
VALUE
FREQUENCY
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
footer
menu
style1
msonormal
text
content
title
style2
header
copyright
button
main
style3
small
nav
clear
search
style4
logo
body
179,528
146,673
138,308
123,374
122,911
113,951
91,957
89,851
89,274
86,979
81,503
69,62
69,349
68,995
68,634
68,571
59,802
56,032
48,831
48,052
HTML5 : structure
HTML5 : structure
<header>
<nav>
<section>
<aside>
<footer>
http://www.kayak.com/
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">
HTML5 : form
Extra Input field attributes:
required
autocomplete
min / max
step
pattern={regexp}
multiple
list
<datalist/>
HTML4:
HTML5:
HTML5 : media
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, …)
HTML5 : media
Codec nightmare :
http://fmbip.com
<source>
Canvas is:
HTML5 : canvas
API for 2D drawing
<canvas/>
Context selector
Lines,
Shapes,
Paths,
…..
Pixels
Save image (Data URL)
Canvas sample:
HTML5 : canvas
HTML5 : canvas
http://mugtug.com/sketchpad/
New features : canvas 3D
Canvas 3D is:
Canvas + WebGL
-Extended JS
-Based on OpenGL ES
-Not fully or/and officially supported by browsers
Sample:
HTML5: SVG
SVG (Scalable Vector Graphics) is:
XML-based format for describing 2D vector graphics
SVG in HTML5:
Sample:
SVG sample:
HTML5: SVG
XML-based format for describing 2D vector graphics
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 Interaction is object based on
from mouse coordinates
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:
Local
Persists after the
browser is closed
Domain specific
Session
Lifetime
Session
Scope
Per-page-per-window
Send back on request
Client-side key-value database
typically limited to 5/10MB
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)
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 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
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/
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
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
<Thank you/>
