SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
For designers
zaterdag 29 december 12
coding dojo
zaterdag 29 december 12
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 minutes
zaterdag 29 december 12
Geschiedenis

zaterdag 29 december 12
XHTML2.0
                          “The future is xml based markup”



      1998
zaterdag 29 december 12
<br />
                          <img src=”..” />


zaterdag 29 december 12
WHATWG
                                              Apple
                                              Mozilla
                                              Opera




                          Web Hypertext Application Technology Working Group
zaterdag 29 december 12
HTML5
                          “Don’t break the web”



     2004
zaterdag 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        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.htm


zaterdag 29 december 12
<section>
                          <header>
                           <footer>
                          <article>
                           <aside>
                              ...
zaterdag 29 december 12
XHTML2.0
                               <div id= “header”>

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

                               <div id= “footer”>


zaterdag 29 december 12
HTML5
                                   <header/>

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

                                    <footer/>


zaterdag 29 december 12
zaterdag 29 december 12
zaterdag 29 december 12
<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
<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
•   color
                                    •   date
                                    •   datetime
                                    •   datetime-local
                                    •   email
                                    •   month

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



zaterdag 29 december 12
internet explorer?



zaterdag 29 december 12
<h1>
                             <p>
                          <strong>
                            <em>
                            <div>

zaterdag 29 december 12
display
                  The display property defines how a certain
                      HTML element should be displayed.



zaterdag 29 december 12
<b>
                          <strong>


zaterdag 29 december 12
<i>
                          <em>


zaterdag 29 december 12
display
                   •      none;
                   •      inline;
                   •      block;
                   •      inline-block;
                   •      list-item;
                   •      compact;
                   •      table;
                   •      inline-table;
                   •      table-caption;
                   •      ...


zaterdag 29 december 12
positioning
                   •      relative (container object)
                   •      absolute
                   •      static (iOS4+)




zaterdag 29 december 12
<ul> =! <ol>


zaterdag 29 december 12
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
reset.css
                          normalize.css



zaterdag 29 december 12
Boilerplate 3.0
                           http://html5boilerplate.com/




zaterdag 29 december 12
SCSS



zaterdag 29 december 12
zaterdag 29 december 12
zaterdag 29 december 12
Lee Brimelow

zaterdag 29 december 12
Paul Irish

zaterdag 29 december 12
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

Weitere ähnliche Inhalte

Ähnlich wie Html5 for designers

CapitalCamp Features
CapitalCamp FeaturesCapitalCamp Features
CapitalCamp Features
Phase2
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
Christopher Schmitt
 
Performance & Responsive Web Design
Performance & Responsive Web DesignPerformance & Responsive Web Design
Performance & Responsive Web Design
Zach Leatherman
 

Ähnlich wie Html5 for designers (10)

Rewriting the Drupal Theme layer
Rewriting the Drupal Theme layerRewriting the Drupal Theme layer
Rewriting the Drupal Theme layer
 
Confluence Theming 101: How to Build a Theme - Atlassian Summit 2010 - Lightn...
Confluence Theming 101: How to Build a Theme - Atlassian Summit 2010 - Lightn...Confluence Theming 101: How to Build a Theme - Atlassian Summit 2010 - Lightn...
Confluence Theming 101: How to Build a Theme - Atlassian Summit 2010 - Lightn...
 
CapitalCamp Features
CapitalCamp FeaturesCapitalCamp Features
CapitalCamp Features
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 
Grails 2.0 Update
Grails 2.0 UpdateGrails 2.0 Update
Grails 2.0 Update
 
03 css
03 css03 css
03 css
 
Performance & Responsive Web Design
Performance & Responsive Web DesignPerformance & Responsive Web Design
Performance & Responsive Web Design
 
HTML5 - getting started
HTML5 - getting startedHTML5 - getting started
HTML5 - getting started
 
Drupal theming
Drupal themingDrupal theming
Drupal theming
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 

Html5 for designers

  • 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 minutes zaterdag 29 december 12
  • 5. XHTML2.0 “The future is xml based markup” 1998 zaterdag 29 december 12
  • 6. <br /> <img src=”..” /> zaterdag 29 december 12
  • 7. WHATWG Apple Mozilla Opera Web Hypertext Application Technology Working Group zaterdag 29 december 12
  • 8. HTML5 “Don’t break the web” 2004 zaterdag 29 december 12
  • 9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> zaterdag 29 december 12
  • 11. nieuwe html elementen http://html5doctor.com/element-index/ zaterdag 29 december 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.htm zaterdag 29 december 12
  • 13. <section> <header> <footer> <article> <aside> ... zaterdag 29 december 12
  • 14. XHTML2.0 <div id= “header”> <div class= “post”> <div id= “sidebar”> <div class= “post”> <div id= “footer”> zaterdag 29 december 12
  • 15. HTML5 <header/> <article/> <aside/> <article/> <footer/> zaterdag 29 december 12
  • 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 site's home page could be split into sections for an introduction, news items, contact information. zaterdag 29 december 12
  • 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 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
  • 20. color • date • datetime • datetime-local • email • month <input> • • number range • search • tel • time • url • week zaterdag 29 december 12
  • 22. <h1> <p> <strong> <em> <div> zaterdag 29 december 12
  • 23. display The display property defines how a certain HTML element should be displayed. zaterdag 29 december 12
  • 24. <b> <strong> zaterdag 29 december 12
  • 25. <i> <em> zaterdag 29 december 12
  • 26. display • none; • inline; • block; • inline-block; • list-item; • compact; • table; • inline-table; • table-caption; • ... zaterdag 29 december 12
  • 27. positioning • relative (container object) • absolute • static (iOS4+) zaterdag 29 december 12
  • 28. <ul> =! <ol> zaterdag 29 december 12
  • 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. reset.css normalize.css zaterdag 29 december 12
  • 31. Boilerplate 3.0 http://html5boilerplate.com/ zaterdag 29 december 12
  • 36. Paul Irish zaterdag 29 december 12
  • 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