130 likes | 262 Views
What is HTML5…?. What is HTML5…?. ”…removes the need for plugins” ”…can handle multimedia directly” ”…enables rich, interactive clients” ”…enables advanced visual designs” ”…enables offline web application” ”…rids the world of war and poverty!”. What is HTML5…?.
E N D
What is HTML5…? • ”…removes the need for plugins” • ”…can handle multimedia directly” • ”…enables rich, interactive clients” • ”…enables advanced visual designs” • ”…enables offline web application” • ”…rids the world of war and poverty!”
What is HTML5…? • ”…removes the need for plugins” yes • ”…can handle multimedia directly” yes • ”…enables rich, interactive clients” yes • ”…enables advanced visual designs” yes • ”…enables offline web application” yes • ”…rids the world of war and poverty!” well….
What is HTML5…? • HTML5 is not just ”one thing” • HTML5 is a collection of technologies • Revised and extended markup (HTML) • Revised and extended styling (CSS) • New APIs available through JavaScript
Why do we need HTML5? • Previous (existing) technologies are actually rooted in the 90’es… • HTML perceived as markup for ”documents”, not ”applications” • Need for multimedia, advanced user interaction, etc. handled by use of plugins
HTML5 foundation User experience Structure by HTML Presentation by CSS Functionality by JavaScript
HTML5 foundation • HTML is now only intended to define structure for a page, not presentation • New tags introduced include: • article, aside, details, summary, section, header, footer, nav,… • Also tags for media content, like video, audio,…
HTML5 foundation • Since HTML is now only intended for structure, certain tags are now considered depricated, like font, center, big,… • However, they are not as such removed; they are ”discouraged”
HTML5 foundation • CSS3 is – just as previous CSS versions – intended to define how to style a given HTML web page • Basic usage is the same – select elements, and define how to style them • Much more advanced styling is possible – can do things which previously required JavaScript or plugins (transitions, etc.)
HTML5 foundation • Also as before, we can add behavior and functionality through JavaScript • Many new APIs available: Geolocation, Drag-and-Drop, Web storage, Canvas, Web workers, Web sockets,… • Some are considered native to HTML5, some are not… Does it matter?
Can I use HTML5 now…? • The short answers is….it depends! • http://html5readiness.com/ • Since HTML5 is a collection of technologies, progress and browser support is uneven… • Most browsers are catching up, even IE(9+) • What about mobile devices…?
HTML5 vs Apps • ”We can forget about Apps, now that we have HTML5…” • The jury is still out • Correct in principle, when all browsers fully support all HTML5 technologies • Apps will be here for a while yet…
How we proceed • We will look at: • Technology basics • HTML(5) • CSS(3) • JavaScript essentials • The DOM • A couple of APIs • Canvas • Geolocation • Communication • Web Storage