a brief history of time html5 css3 tips a brief history of time
TRANSCRIPT
• 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
• 2008 - HTML5 voorstel
• 2009 - XHTML 2.0 verworpen
HTML5
• 2011 - Working Draft
• 2012 - Cadidate Recommendation
• 2022 - Proposed Recommendation
CSS• 1996 - CSS1
• 1998 - CSS2 - Candidate Recommendation
• 2011 - CSS2 - Proposed Recommendation
• 2011 - CSS3 - Candidate RecommendationMedia QueriesNamespacesSelectors Level 3Color
CSS• 1996 - CSS1
• 1998 - CSS2 - Candidate Recommendation
• 2011 - CSS2 - Proposed Recommendation
• 2011 - CSS3 - Candidate RecommendationMedia QueriesNamespacesSelectors Level 3Color
• 2011 - CSS4 - First Draft
• 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
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); };
HTML5 = Eenvoud
<form> <input type=email required>
HTML5 = Eenvoud
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
HTML5 = Eenvoud
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset=utf-8>
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>
HTML5 = Eenvoud
<!DOCTYPE html><meta charset=utf-8><title>Demo Pagina</title><h1>Hello World!</h1>
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>
<acronym>
<applet><basefont
><big>
<center><dir>
<font>
<frame><frameset
><noframes
><tt><s>
<strike><u>
<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>
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>
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>
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>
Demo time!
Microdata format
schema.org
border-radiusshadowtransformtransition@font-facemedia queriesselectors level 3colorgradientsmultiple backgrounds
CSS3
multi-columnsborder-images
CSS3
CSS3 - Border-radius
• border-radius: 50px;
• border-top-left-radius: 50px 50px;
• border-top-right-radius: 100px 50px;
CSS3 - Shadows
• box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
• text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
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)
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; } }
Demo time!
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 */}
Demo time!
CSS3 - Transitiondiv { 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;}
Demo time!
• :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
CSS3 - Selectors L3• :root
• :target
• :enabled
• :disabled
• :checked
• :not()
• :lang()
Demo time!
Begin er zelf mee
html5boilerplate.com
Vragen?