HTML 5 new generation of WEB applications Gustavo Delgado R. firstname.lastname@example.org
HTML4 and CSS2, the old couple
The websites of today are built with languages largely conceived during the mid to late 1990’s, when the web was still in its infancy.
Work on HTML 4 started in early 1997CSS 2 was published in 1998.
The websites of the 90
Text, text and more text
Hey!, try to use CSS!
Lot of tables
The current websites
Lots of user-interactivity
‘Website’ = essential hub for our digital lifestyles
HTML 5 Thecurrentwaytomake a website
A lot of structured content with the same tag.
Itsallabout ‘divitis’ and ‘classitis’.
Semantic value of <div> and ‘class’ = 0
HTML 5 HTML5 totherescue
Specifically designed for web applications
Nice to search engines and screen readers
HTML 5 will update HTML 4.01, DOM Level 2
Hello ,<header>, <nav>, <article>, <section>, and other new tags.
HTML 5 Themostimportantchanges
hgroup represents the header of a section.
figure can be used to associate a caption together with some embedded content, such as a graphic or video:
video and audio for multimedia content.
time represents a date and/or time.
canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
datalist together with the a new list attribute for input can be used to make comboboxes:
datagrid, for manipulation of tables with dataproviders.
The input element's type attribute now has the following new values: url, datetime, email, date, month, number, range, color.
HTML 5 Structure
HTML 5 Support
CSS 3.0 RoundedCorners Forpersonswhoalwaysfightwiththislike me… border-radius (or variant depending on browser) is used to make rounded corners Example: border-radius: 3px The bigger the value or the radius, the more curvy and larger are the rounded corners Much simpler than using CSS 2 (no background images etc. needed)
CSS 3.0 Box- and text-shadow box-shadow creates a drop shadow effect (3 lengths and a colour) Code example:box-shadow: 10px 6px 5px #888; 10px is horizontal offset, 6px is vertical offset, 5px is ‘blur radius’ To put the shadow on the left and top, use negative values for the first two offsets Higher blur radius = more blurred text-shadow is similar but applied to text
Should I be using them? Keep an eye on browser version statistics (buggy browsers should be more short-lived than before) Experiment on intranet(s) and/or personal sites Overall, many features of CSS 3 probably ripe to implement as of now HTML 5 less compelling to implement today but that could change soon
References W3C http://dev.w3.org/html5/spec/Overview.html Video examplehttp://www.csslab.cl/ejemplos/html5/html5_3.html Databaseexamplehttp://webkit.org/demos/sticky-notes/ Canvasexamplehttps://bespin.mozillalabs.com/