Exploring HTML5 With
JavaServer Faces 2.0
Roger Kitain
Oracle Corporation
2
AGENDA
> HTML 5 Overview
– What is HTML 5?
– HTML 5 Features
> JSF 2.0 Component Model And HTML 5
– Component Model Overview
– Enhancing Components With HTML 5
> Demos
3
What Is HTML 5?
> Proposed next standard for HTML 4.0.1, XHTML 1.0 and DOM Level 2 HTML
> Features promote RIA
> Pioneered in 2004; First working spec draft: 2008
> CSS 3 : Working Draft – April 2010
HTML5
HTML
JS APIs
4
What Is HTML 5?
1991 1994 1996 1997 1998 2000 2005 2009
User Experience
Traditional Desktop
HTML
XHTML
CSS/JavaScript
Ajax
HTML2
HTML5
HTML4
5
What is HTML 5? When Will Specification Go Final?
At least that's the
rumor......
6
HTML 5 Features: HTML Elements
> Semantic elements for structure:
– <header>, <nav>, <article>, <section>, <aside>, <footer>
> Some advantages:
– Nested sections with header levels beyond 6 levels in HTML 4
– Cleaner source; easier to author (don't need to go “div crazy”)
HTML4
HTML5
7
HTML 5 Features : Html Elements/Attributes
> Other semantic elements:
– <figure>, <dialog>, <meter>, <progress>...
– <progress> can be used with JavaScript to generate “real-time” progress bar
> Form elements / attributes:
– <input name=”q” placeholder=”Search Here”>
– <input name=”q” autofocus>
– Attribute values for <input type=
email (Great for mobile devices – iphone!). number, range, date,
datetime, month, week, time, search, color
– For date / time Opera would render:
8
HTML 5 Features : Media Elements
> Audio
– Most audio played through flash plugin
– Not all browsers have same plugins
> <audio> element:
– Standard way to include audio: sound files or audio stream
– 3 supported formats: Ogg Vorbis, MP3, Wav (browsers may support subset)
> Usage example:
> Specify multiple audio file formats: browser will use first recognized format
> “controls” attribute: adds “play”, “pause”, and “volume” controls
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="aud