Fronttechnieken met HTML5 en de Slice-template

1. Pruuuu uuuuuu vroem, uuuuut !!! vroem !!! HTML5 & SLICE-TEMPLATE Door Stijn en Tom

2. HTML5

3. WAT IS HTML5 NIET? • Web 3.0 • CSS3 • Flash

4. WAAROM? • Eenvoudiger • Gestructureerder • Hip!

5. WAT IS HTML5? • <!doctype html> • Vereenvoudiging van tags (script, link, ...) • Nieuwe tags (article, section, ...) • Nieuwe input types (number, e-mail, ...) • Nieuwe API’s (WebWorkers, WebSockets, History, ...)

6. WAT GAAN WE GEBRUIKEN? • <!doctype html> • Vereenvoudiging van tags (script, link, ...) • Nieuwe tags (article, section, ...) • Nieuwe input types (number, e-mail, ...) • Nieuwe API’s (WebWorkers, WebSockets, History, ...)

7. WELKE BROWSERS? • Chrome • Safari • Firefox 4 • Internet Explorer 9 • Opera

8. WAT MET DE REST? • Modernizr • HTML5shiv • ...

9. DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!doctype html>

10. EENVOUDIGERE TAGS <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="design/css/layout.css" rel="stylesheet" type="text/css" /> <script src=”javascript/libs/jquery-1.4.4.min.js” type=”text/javascript></script> <meta charset="utf-8"> <link rel="stylesheet" href="design/css/style.css" /> <script src=”javascript/libs/jquery-1.4.4.min.js”></script>

11. <!doctype html> NIEUWE TAGS <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> </head> <body> <header> <nav> <ul id="navigation"> <li class="active"><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section id="content"> <article> ... </article> <aside> ... </aside> </section> <footer> Copyright </footer> </body> </html>

19. <header>

20. <nav>

21. <section>

22. <aside>

23. <aside>

24. <footer>

25. ARTICLE VS. SECTION <article> <section> ... ... </article> </section> The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. If you could see the content as an item or entry in an RSS feed, wrap it in an article. Otherwise, use section.

26. NIEUWE TAGS • <figure> • <figcaption> • <time> • ...

27. INPUT TYPES • placeholder • autofocus

28. INPUT TYPES • search • email • url • number (spinbox) • range • date/datetime/week/month/time/... • novalidate

30. SLICING TEMPLATE Door den Tom

31. “A default slicing template to create a uniform style of slicing websites”

32. GITHUB.COM/INVENTIS

36. MAPPEN STRUCTUUR

37. <HTML>

39. <HEAD>

51. </HEAD>

52. <BODY>

57. </BODY>

58. </HTML>

59. GITHUB.COM/INVENTIS

64. TOM@INVENTIS.BE ....of op kantoor van 8u tot 16u30.

Fronttechnieken met HTML5 en de Slice-template

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Fronttechnieken met HTML5 en de Slice-template

Similar to Fronttechnieken met HTML5 en de Slice-template (20)

Recently uploaded

Recently uploaded (20)

Fronttechnieken met HTML5 en de Slice-template

Editor's Notes