Html5 for designers

For designers
zaterdag 29 december 12

coding dojo

coding dojo
• Strive for completion of character.
• Don’t give up, be faithful.
• Strive to be your beﬆ.
• Respect the others..
• Refrain from violent behavior.
• Each pilot flights for 15 minutes

Geschiedenis


XHTML2.0
“The future is xml based markup”

1998

WHATWG
Apple
Mozilla
Opera

Web Hypertext Application Technology Working Group

HTML5
“Don’t break the web”

2004

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<!DOCTYPE html>


nieuwe html elementen
http://html5doctor.com/element-index/


class names id names
Rank Value Frequency Rank Value Frequency
1 footer 179.528 1 footer 1.085.482
2 menu 146.673 2 table 482.760
3 style1 138.308 3 img 471.807
4 msonormal 123.374 4 input 372.905
5 text 122.911 5 a 319.619
6 content 113.951 6 form 266.886
7 title 91.957 7 td 230.312
8 style2 89.851 8 ul 192.453
9 header 89.274 9 span 180.553
10 copyright 86.979 10 object 165.628
11 button 81.503 11 li 91.022
12 main 69.620 12 body 90.883
13 style3 69.349 13 p 81.128

http://devﬁles.myopera.com/articles/572/elementsusingid-url.htm
http://devﬁles.myopera.com/articles/572/classlist-url.htm


<section>
<header>
<footer>
<article>
<aside>
...

XHTML2.0
<div id= “header”>

<div class= “post”>
<div id=
“sidebar”>
<div class= “post”>

<div id= “footer”>


HTML5
<header/>

<article/>
<aside/>
<article/>

<footer/>


<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.


<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/

• color
• date
• datetime
• datetime-local
• email
• month

<input> •
•
number
range
• search
• tel
• time
• url
• week


internet explorer?


display
The display property defines how a certain
HTML element should be displayed.


display
• none;
• inline;
• block;
• inline-block;
• list-item;
• compact;
• table;
• inline-table;
• table-caption;
• ...


positioning
• relative (container object)
• absolute
• static (iOS4+)


basic ccs selectors
<div class=”header”> .header { ... }
<div id=”header”> #header { ... }
<a href=””> a { ... }
<article> article { ... }

.item > .ﬁrst-subitem

@media (min-width: 130px)


reset.css
normalize.css


Boilerplate 3.0
http://html5boilerplate.com/


SCSS


Lee Brimelow


Paul Irish


http://dochub.io/
http://html5please.us/
http://livedom.validator.nu/
http://codex.wordpress.org/Function_Reference
http://stackoverﬂow.com/questions/tagged/html
http://jqapi.com/
http://jsﬁddle.net/


Html5 for designers

Recomendados

Recomendados

Más contenido relacionado

Similar a Html5 for designers

Similar a Html5 for designers (10)

Html5 for designers