Download presentation
Presentation is loading. Please wait.
2
A Brief History of Time HTML5 CSS3 Tips
3
A Brief History of Time
4
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
5
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
6
HTML5 2011 - Working Draft 2012 - Cadidate Recommendation 2022 - Proposed Recommendation
7
CSS 1996 - CSS1 1998 - CSS2 - Candidate Recommendation 2011 - CSS2 - Proposed Recommendation 2011 - CSS3 - Candidate Recommendation Media Queries Namespaces Selectors Level 3 Color
8
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
10
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
12
HTML5 = Eenvoud 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 function isValid Address( Address) { 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)+) \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( Address); };](http://images.slideplayer.com./8/2138831/slides/slide_12.jpg "HTML5 = Eenvoud function isValid Address( Address) { 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)+) \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( Address); };")
13
HTML5 = Eenvoud
14
HTML5 = Eenvoud <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
15
HTML5 = Eenvoud
16
HTML5 = Eenvoud <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Demo Pagina Hello World!
17
HTML5 = Eenvoud Demo Pagina Hello World!
18
HTML5 = Eenvoud hello world! hello world!
21
Microdata format Avatar Director: James Cameron (born August 16, 1954 Science fiction Trailer
22
Microdata format Avatar Director: James Cameron (born August 16, 1954) Science fiction Trailer
23
Microdata format Avatar Director: James Cameron (born August 16, 1954 ) Science fiction Trailer
24
Demo time!
25
Microdata format schema.org
27
border-radius shadow transform transition @font-face media queries selectors level 3 color gradients multiple backgrounds CSS3
28
multi-columns border-images CSS3
29
CSS3 - Border-radius border-radius: 50px; border-top-left-radius: 50px 50px; border-top-right-radius: 100px 50px;
30
CSS3 - Shadows box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
31
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)
32
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; } }
33
Demo time!
34
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 */ }
35
Demo time!
36
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; }
37
Demo time!
38
: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()
39
Demo time!
40
Meer info? http://hypr.nl/setup1
41
Begin er zelf mee html5boilerplate.com
42
Vragen?
Similar presentations
