1 / 42

A Brief History of Time HTML5 CSS3 Tips

A Brief History of Time HTML5 CSS3 Tips. A Brief History of Time. HTML. 1991 - HTML Tags 1993 - HTML 1.0 Spec 1995 - HTML 2.0 Spec 1993 - HTML 3 voorstel verworpen 1997 - HTML 3.2 1997 - HTML 4.0. HTML. 1999 - HTML 4.01 2000 - XHTML 1.0 2001 - XHTML 1.1 2004 - Web 2.0

phuong
Télécharger la présentation

A Brief History of Time HTML5 CSS3 Tips

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. A Brief History of Time • HTML5 • CSS3 • Tips

  2. A Brief History of Time

  3. HTML • 1991 - HTML Tags • 1993 - HTML 1.0 Spec • 1995 - HTML 2.0 Spec • 1993 - HTML 3 voorstel verworpen • 1997 - HTML 3.2 • 1997 - HTML 4.0

  4. HTML • 1999 - HTML 4.01 • 2000 - XHTML 1.0 • 2001 - XHTML 1.1 • 2004 - Web 2.0 • 2008 - HTML5 voorstel • 2009 - XHTML 2.0 verworpen

  5. HTML5 • 2011 - Working Draft • 2012 - Cadidate Recommendation • 2022 - Proposed Recommendation

  6. CSS • 1996 - CSS1 • 1998 - CSS2 - Candidate Recommendation • 2011 - CSS2 - Proposed Recommendation • 2011 - CSS3 - Candidate Recommendation Media Queries Namespaces Selectors Level 3 Color

  7. CSS • 1996 - CSS1 • 1998 - CSS2 - Candidate Recommendation • 2011 - CSS2 - Proposed Recommendation • 2011 - CSS3 - Candidate Recommendation Media Queries Namespaces Selectors Level 3 Color • 2011 - CSS4 - First Draft

  8. HTML5 is een standaard,CSS3 en JavaScript zijn andere standaarden • Om HTML5 tot z'n recht te laten komen moet je deze drie standaarden samen laten werken

  9. HTML5 = Eenvoud <form>     <input type="text" name="email" /> function isValidEmailAddress(emailAddress) { var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); return pattern.test(emailAddress); };

  10. HTML5 = Eenvoud <form>     <input type=email required>

  11. HTML5 = Eenvoud <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html>

  12. HTML5 = Eenvoud <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset=utf-8>

  13. HTML5 = Eenvoud <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Demo Pagina</title> </head> <body> <h1>Hello World!</h1> </body> </html>

  14. HTML5 = Eenvoud <!DOCTYPE html> <meta charset=utf-8> <title>Demo Pagina</title> <h1>Hello World!</h1>

  15. HTML5 = Eenvoud <input type="checkbox" checked="checked" /> <p>hello world!</p> <input type="checkbox" checked /> <input type=checkbox checked> <INPUT type="checkbox" checked> <iNpUt TyPe=ChEcKBoX cHecKeD> <P>hello world! <p>hello world!</P>

  16. <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <tt> <s> <strike> <u>

  17. <article> <aside> <audio> <canvas> <command> <datalist> <details> <dialog> <embed> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <ruby> <rt> <rp> <section> <source> <track> <time> <video>

  18. Microdata format <div> <h1>Avatar</h1> <span> Director: James Cameron (born August 16, 1954 </span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div>

  19. Microdata format <div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span> Director: <span itemprop="director">James Cameron</span> (born August 16, 1954) </span> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>

  20. Microdata format <div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>) </span> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>

  21. Demo time!

  22. Microdata format schema.org

  23. CSS3 border-radius shadow transform transition @font-face media queries selectors level 3 color gradients multiple backgrounds

  24. CSS3 multi-columns border-images

  25. CSS3 - Border-radius • border-radius: 50px; • border-top-left-radius: 50px 50px; • border-top-right-radius: 100px 50px;

  26. CSS3 - Shadows • box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); • text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);

  27. CSS3 - Color • HSL / HSLa / RGB / RGBa waardes • #FF0000 • rgb(100%, 0%, 0%) • rgb(255, 0, 0) • rgba(255, 0, 0, 1) • hsl(0, 100%, 50%) • hsla(0, 100%, 50%, 1)

  28. CSS3 - Media Queries div.wrapper { margin: 0 auto; width: 940px; padding: 0px 10px 0px 10px; } @media only screen and (max-width: 940px) { div.wrapper { width: 748px; } } @media handheld, only screen and (max-width: 750px) { div.wrapper { padding: 0; width: 480px; } } @media only screen and (max-width: 460px) { div.wrapper { width: 300px; } }

  29. Demo time!

  30. CSS3 - Transform div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ } 

  31. Demo time!

  32. CSS3 - Transition div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } div:hover { width:300px; }

  33. Demo time!

  34. CSS3 - Selectors L3 • :nth-child(10n-1) = 9,19,29, ...  • :nth-child(odd) = (2n+1) • :nth-child(even) = (2n+0) • :nth-of-type() • :nth-last-of-type() • :first-child • :last-child • :first-of-type • :last-of-type • :empty • :root • :target • :enabled • :disabled • :checked • :not() • :lang()

  35. Demo time!

  36. Meer info? http://hypr.nl/setup1

  37. Begin er zelf mee html5boilerplate.com

  38. Vragen?

More Related