HTML 5 overview: The new markup, CSS3 basics and JavaScript APIs. Layout tags, video and geolocation demos: http://bit.ly/iefpjF Date: June 28, 2011 Presenter: Vangos Pterneas (http://vangos.eu)

1. June on the Web
Vangos Pterneas | Microsoft Student Partner

3. HTML5 is about
User Experience

4. markup

5. LAYOUT
<meta charset=“utf-8” />
<header><aside><footer>

6. <div id=“header”>
<div id=“nav”>
<div
<div id=“article”>
id=“sidebar”>
<div id=“section”>
<div id=“footer”>

7. <header>
<nav>
<article> <aside>
<section>
<footer>

8. .css3-box
{
}
I am CSS 3 text!!!
CSS 3

9. .css3-box
{
box-shadow: 10px 15px 8px black;
I am CSS 3 text!!! }
CSS 3

10. .css3-box
{
box-shadow: 10px 15px 8px black;
I am CSS 3 text!!! border-radius: 18px;
}
CSS 3

11. .css3-box
{
box-shadow: 10px 15px 8px black;
I am CSS 3 text!!! border-radius: 18px;
text-shadow: 2px 5px 3px gray;
}
CSS 3

12. .css3-box
{
box-shadow: 10px 15px 8px black;
border-radius: 18px;
text-shadow: 2px 5px 3px gray;
transform: rotate(5deg);
}
CSS 3

13. Lines
Shapes
Gradients
Images
Text
CANVAS

14. AUDIO & VIDEO

15. GEOLOCATION

16. The
future

17. The
future
HTML5 native apps!

18. Links
CSS3.info
HTML5 Doctor
HTML5 Spec
HTML5 Demos
Dive into HTML5
Visual Studio HTML5 intellisense Visual Studio CSS3 intellisense

19. Vangos Pterneas
vangos.eu/
June on the Web