html5 the new applications
TRANSCRIPT
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 1997 CSS 2 was published in 1998.
• 20 years for learning.
The websites of the 90
• Simple layout• Text, text and
more text• Hey!, try to use
CSS!• Lot of tables• IE it’s the king
The current websites
• Complex layout• Eye-catching designs• Lots of user-
interactivity• ‘Website’ = essential
hub for our digital lifestyles
HTML 5The current way to make a website
• A lot of structured content with the same tag.• Its all about ‘divitis’ and ‘classitis’.• Semantic value of <div> and ‘class’
= 0
HTML 5
HTML5 to the rescue
• 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
The most important changes
• 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.• dialog represents conversations.
HTML 5 Structure
HTML5
Canvas
New JavaScript Functions
Video
Ogg/Theor
a
H.264/MP4
Geolocation
Google Maps
Database
Gmail
Workers
Background threads
HTML 5 Support
CSS 3.0
Rounded Corners For persons who always fight with this like
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 example http://www.csslab.cl/ejemplos/html5/html5_3.html
Database example http://webkit.org/demos/sticky-notes/
Canvas example https://bespin.mozillalabs.com/