Html5 for designers
description
Transcript of Html5 for designers
![Page 1: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/1.jpg)
!o" #esi$%ers
zaterdag 29 december 12
![Page 2: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/2.jpg)
coding dojozaterdag 29 december 12
![Page 3: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/3.jpg)
• Strive for completion of character.• Don’t give up, be faithful.• Strive to be your best.• Respect the othe%..• Refrain from violent behavior.• Each pilot flights for 15 minutes
coding dojo
zaterdag 29 december 12
![Page 4: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/4.jpg)
Geschiedenis
zaterdag 29 december 12
![Page 5: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/5.jpg)
XHTML2.0“The future is xml based markup”
1998zaterdag 29 december 12
![Page 6: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/6.jpg)
<br /><img src=”..” />
zaterdag 29 december 12
![Page 7: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/7.jpg)
AppleMozillaOpera
WHATWG
Web Hypertext Application Technology Working Groupzaterdag 29 december 12
![Page 8: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/8.jpg)
2004
HTML5“Don’t break the web”
zaterdag 29 december 12
![Page 9: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/9.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
zaterdag 29 december 12
![Page 10: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/10.jpg)
<!DOCTYPE html>
zaterdag 29 december 12
![Page 11: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/11.jpg)
nieuwe html elementenhttp://html5doctor.com/element-index/
zaterdag 29 december 12
![Page 12: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/12.jpg)
Rank Value Frequency
1 footer 179.528
2 menu 146.673
3 style1 138.308
4 msonormal 123.374
5 text 122.911
6 content 113.951
7 title 91.957
8 style2 89.851
9 header 89.274
10 copyright 86.979
11 button 81.503
12 main 69.620
13 style3 69.349
http://devfiles.myopera.com/articles/572/classlist-url.htm
class namesRank Value Frequency
1 footer 1.085.482
2 table 482.760
3 img 471.807
4 input 372.905
5 a 319.619
6 form 266.886
7 td 230.312
8 ul 192.453
9 span 180.553
10 object 165.628
11 li 91.022
12 body 90.883
13 p 81.128
id names
http://devfiles.myopera.com/articles/572/elementsusingid-url.htm
zaterdag 29 december 12
![Page 13: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/13.jpg)
<section><header><footer><article><aside>
...zaterdag 29 december 12
![Page 14: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/14.jpg)
<div id= “header”>
<div id= “footer”>
<div id= “sidebar”> <div class= “post”>
<div class= “post”>
XHTML2.0
zaterdag 29 december 12
![Page 15: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/15.jpg)
<header/>
<footer/>
<aside/><article/>
<article/>
HTML5
zaterdag 29 december 12
![Page 16: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/16.jpg)
zaterdag 29 december 12
![Page 17: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/17.jpg)
zaterdag 29 december 12
![Page 18: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/18.jpg)
<section>Represents a generic document or application section. In this context, a section is a
thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, the various tabbed pages in a tabbed dialog box, or the
numbered sections of a thesis. A web site's home page could be split into sections for an introduction, news items, contact information.
zaterdag 29 december 12
![Page 19: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/19.jpg)
<header>Represents the "header" of a document or section of a document. The header element is
typically used to group a set of h1–h6 elements to mark up a page's title with its subtitle or tagline. header elements may, however, contain more than just the section's
headings and subheadings — e.g., version history information or publication date
http://html5doctor.com/the-header-element/zaterdag 29 december 12
![Page 20: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/20.jpg)
<input>
• colo!• date• datetime• datetime-local• email• month• numbe!• range• search• tel• time• url• w"k
zaterdag 29 december 12
![Page 21: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/21.jpg)
internet explorer?
zaterdag 29 december 12
![Page 22: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/22.jpg)
<h1> <p>
<strong><em><div>
zaterdag 29 december 12
![Page 23: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/23.jpg)
displayThe display property defines how a certain
HTML element should be displayed.
zaterdag 29 december 12
![Page 24: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/24.jpg)
<b><strong>
zaterdag 29 december 12
![Page 25: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/25.jpg)
<i><em>
zaterdag 29 december 12
![Page 26: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/26.jpg)
display• none;• inline;• block;• inline-block;• list-item;• compact;• table;• inline-table;• table-caption;• ...
zaterdag 29 december 12
![Page 27: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/27.jpg)
positioning• relative (container object)• absolute• static (iOS4+)
zaterdag 29 december 12
![Page 28: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/28.jpg)
<ul> =! <ol>
zaterdag 29 december 12
![Page 29: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/29.jpg)
basic )s selecto%<div class=”header”><div id=”header”> <a href=””><article>
.header { ... }#header { ... }a { ... }article { ... }
.item > .first-subitem
@media (min-width: 130px)
zaterdag 29 december 12
![Page 30: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/30.jpg)
reset.c*normalize.c*
zaterdag 29 december 12
![Page 31: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/31.jpg)
Boilerplate 3.0http://html5boilerplate.com/
zaterdag 29 december 12
![Page 32: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/32.jpg)
SCSS
zaterdag 29 december 12
![Page 33: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/33.jpg)
zaterdag 29 december 12
![Page 34: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/34.jpg)
zaterdag 29 december 12
![Page 35: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/35.jpg)
L+ Brimelow
zaterdag 29 december 12
![Page 36: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/36.jpg)
Paul Irish
zaterdag 29 december 12
![Page 37: Html5 for designers](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c7fe6e4a795907498b4627/html5/thumbnails/37.jpg)
http://dochub.io/http://html5please.us/
http://livedom.validator.nu/http://codex.wordpress.org/Function_Referencehttp://stackoverflow.com/questions/tagged/html
http://jqapi.com/http://jsfiddle.net/
zaterdag 29 december 12