Fronttechnieken met HTML5 en de Slice-template

1,406 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fronttechnieken met HTML5 en de Slice-template

  1. 1. Pruuuuuuuuuu vroem, uuuuut !!! vroem !!! HTML5 & SLICE-TEMPLATE Door Stijn en Tom
  2. 2. HTML5
  3. 3. WAT IS HTML5 NIET?• Web 3.0• CSS3• Flash
  4. 4. WAAROM?• Eenvoudiger• Gestructureerder• Hip!
  5. 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. 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. 7. WELKE BROWSERS?• Chrome• Safari• Firefox 4• Internet Explorer 9• Opera
  8. 8. WAT MET DE REST?• Modernizr• HTML5shiv• ...
  9. 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. 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. 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>
  12. 12. <!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>
  13. 13. <!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>
  14. 14. <!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>
  15. 15. <!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>
  16. 16. <!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>
  17. 17. <!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>
  18. 18. <header>
  19. 19. <nav>
  20. 20. <section>
  21. 21. <aside>
  22. 22. <aside>
  23. 23. <footer>
  24. 24. 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.
  25. 25. NIEUWE TAGS• <figure>• <figcaption>• <time>• ...
  26. 26. INPUT TYPES• placeholder• autofocus
  27. 27. INPUT TYPES• search• email• url• number (spinbox)• range• date/datetime/week/month/time/...• novalidate
  28. 28. SLICING TEMPLATE Door den Tom
  29. 29. “A default slicing template to create a uniform style of slicing websites”
  30. 30. GITHUB.COM/INVENTIS
  31. 31. MAPPEN STRUCTUUR
  32. 32. <HTML>
  33. 33. <HEAD>
  34. 34. </HEAD>
  35. 35. <BODY>
  36. 36. </BODY>
  37. 37. </HTML>
  38. 38. GITHUB.COM/INVENTIS
  39. 39. TOM@INVENTIS.BE ....of op kantoor van 8u tot 16u30.

×