0
For designerszaterdag 29 december 12
coding dojozaterdag 29 december 12
coding dojo                    • Strive for completion of character.                    • Don’t give up, be faithful.     ...
Geschiedeniszaterdag 29 december 12
XHTML2.0                          “The future is xml based markup”      1998zaterdag 29 december 12
<br />                          <img src=”..” />zaterdag 29 december 12
WHATWG                                              Apple                                              Mozilla            ...
HTML5                          “Don’t break the web”     2004zaterdag 29 december 12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"           "http://www.w3.org/TR/html4/strict.dtd">zaterdag 29 december 12
<!DOCTYPE html>zaterdag 29 december 12
nieuwe html elementen                           http://html5doctor.com/element-index/zaterdag 29 december 12
class names                         id names                           Rank        Value       Frequency   Rank      Value...
<section>                          <header>                           <footer>                          <article>         ...
XHTML2.0                               <div id= “header”>                               <div class= “post”>               ...
HTML5                                   <header/>                                    <article/>                      <asid...
zaterdag 29 december 12
zaterdag 29 december 12
<section>                  Represents a generic document or application section. In this context, a section is a          ...
<header>                  Represents the "header" of a document or section of a document. The header element is           ...
•   color                                    •   date                                    •   datetime                     ...
internet explorer?zaterdag 29 december 12
<h1>                             <p>                          <strong>                            <em>                    ...
display                  The display property defines how a certain                      HTML element should be displayed....
<b>                          <strong>zaterdag 29 december 12
<i>                          <em>zaterdag 29 december 12
display                   •      none;                   •      inline;                   •      block;                   ...
positioning                   •      relative (container object)                   •      absolute                   •    ...
<ul> =! <ol>zaterdag 29 december 12
basic ccs selectors          <div class=”header”>         .header { ... }          <div id=”header”>            #header { ...
reset.css                          normalize.csszaterdag 29 december 12
Boilerplate 3.0                           http://html5boilerplate.com/zaterdag 29 december 12
SCSSzaterdag 29 december 12
zaterdag 29 december 12
zaterdag 29 december 12
Lee Brimelowzaterdag 29 december 12
Paul Irishzaterdag 29 december 12
http://dochub.io/                                  http://html5please.us/                               http://livedom.val...
Upcoming SlideShare
Loading in...5
×

Html5 for designers

408

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
408
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 for designers"

  1. 1. For designerszaterdag 29 december 12
  2. 2. coding dojozaterdag 29 december 12
  3. 3. coding dojo • Strive for completion of character. • Don’t give up, be faithful. • Strive to be your best. • Respect the others.. • Refrain from violent behavior. • Each pilot flights for 15 minuteszaterdag 29 december 12
  4. 4. Geschiedeniszaterdag 29 december 12
  5. 5. XHTML2.0 “The future is xml based markup” 1998zaterdag 29 december 12
  6. 6. <br /> <img src=”..” />zaterdag 29 december 12
  7. 7. WHATWG Apple Mozilla Opera Web Hypertext Application Technology Working Groupzaterdag 29 december 12
  8. 8. HTML5 “Don’t break the web” 2004zaterdag 29 december 12
  9. 9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">zaterdag 29 december 12
  10. 10. <!DOCTYPE html>zaterdag 29 december 12
  11. 11. nieuwe html elementen http://html5doctor.com/element-index/zaterdag 29 december 12
  12. 12. 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://devfiles.myopera.com/articles/572/elementsusingid-url.htm http://devfiles.myopera.com/articles/572/classlist-url.htmzaterdag 29 december 12
  13. 13. <section> <header> <footer> <article> <aside> ...zaterdag 29 december 12
  14. 14. XHTML2.0 <div id= “header”> <div class= “post”> <div id= “sidebar”> <div class= “post”> <div id= “footer”>zaterdag 29 december 12
  15. 15. HTML5 <header/> <article/> <aside/> <article/> <footer/>zaterdag 29 december 12
  16. 16. zaterdag 29 december 12
  17. 17. zaterdag 29 december 12
  18. 18. <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 sites home page could be split into sections for an introduction, news items, contact information.zaterdag 29 december 12
  19. 19. <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 pages title with its subtitle or tagline. header elements may, however, contain more than just the sections headings and subheadings — e.g., version history information or publication date http://html5doctor.com/the-header-element/zaterdag 29 december 12
  20. 20. • color • date • datetime • datetime-local • email • month <input> • • number range • search • tel • time • url • weekzaterdag 29 december 12
  21. 21. internet explorer?zaterdag 29 december 12
  22. 22. <h1> <p> <strong> <em> <div>zaterdag 29 december 12
  23. 23. display The display property defines how a certain HTML element should be displayed.zaterdag 29 december 12
  24. 24. <b> <strong>zaterdag 29 december 12
  25. 25. <i> <em>zaterdag 29 december 12
  26. 26. display • none; • inline; • block; • inline-block; • list-item; • compact; • table; • inline-table; • table-caption; • ...zaterdag 29 december 12
  27. 27. positioning • relative (container object) • absolute • static (iOS4+)zaterdag 29 december 12
  28. 28. <ul> =! <ol>zaterdag 29 december 12
  29. 29. basic ccs selectors <div class=”header”> .header { ... } <div id=”header”> #header { ... } <a href=””> a { ... } <article> article { ... } .item > .first-subitem @media (min-width: 130px)zaterdag 29 december 12
  30. 30. reset.css normalize.csszaterdag 29 december 12
  31. 31. Boilerplate 3.0 http://html5boilerplate.com/zaterdag 29 december 12
  32. 32. SCSSzaterdag 29 december 12
  33. 33. zaterdag 29 december 12
  34. 34. zaterdag 29 december 12
  35. 35. Lee Brimelowzaterdag 29 december 12
  36. 36. Paul Irishzaterdag 29 december 12
  37. 37. http://dochub.io/ http://html5please.us/ http://livedom.validator.nu/ http://codex.wordpress.org/Function_Reference http://stackoverflow.com/questions/tagged/html http://jqapi.com/ http://jsfiddle.net/zaterdag 29 december 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×