Lunchpresentatie<br />4 januari 2011<br />1<br />Vincent Smedinga<br />Liones<br />
2<br />
Wat zit er in HTML5<br />Wat zit er in CSS 3<br />Wat kunnen we nu al gebruiken<br />Wat moeten we daarvoor doen<br />3<br...
Interactie<br />Vormgeving<br />Inhoud<br />4<br />
Javascript<br />CSS<br />HTML<br />5<br />
HTML<br /><h1>Example</h1><br /><p>Helloworld!</p><br /><ul>	<li>Yea</li>	<li>Nay</li></ul><br />Example<br />Helloworld!<...
Nay</li></ul>6<br />
h1 { color: rgb( 0, 192, 255 ); }<br />p { font: 12px / 1.337 boldCandara; }<br /><ul><li>ul li { list-item: square; }</li...
$( ‘.gallery a’ ).fancybox();<br />$( ‘.column’ ).equalHeights();<br />$( ‘#go’ ).click( function() { $( this ).ne- xt( ‘f...
HTML5<br />9<br />
Geschiedenis<br />10<br />1999: HTML 4 ‘af’<br />XHTML 1.0 & 1.1<br />W3C ↔ WHATWG<br />Webapps ↔ webdocs<br />2006: XHTML...
XHTML2 ↔ HTML5<br />Steven Pemberton<br />Ian Hickson<br />11<br />
Support existing content<br />Degradegracefully<br />Pave the cowpaths<br />Priority of consituencies“In case of conflict,...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />Eenvoudiger<br />13<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br />Een...
<!doctype html>Yey :)<br />Eenvoudiger<br />15<br />
Semantischer<br /><div id=“wrapper”><br />     <div id=“navigation”>…</div><br />     <div class=“news-index”><br />      ...
17<br />Semantischer<br />
Semantischerder<br />Accessibility<br /><header role=“banner”><br /><navrole=“navigation”><br /><div role=“main”><br /><fo...
Meer browser<br />Oud<br /><input type=“text”><br /><input type=“radio”><br /><input type=“checkbox”><br /><input type=“su...
Meer browser<br />20<br />
Meer browser<br />datalist<br />placeholder<br />autofocus<br />autocomplete<br /><input type=“text”><br />21<br />
Minder plugins<br /><video><br /><audio><br /><canvas><br />Flash<br />Shockwave<br />Silverlight<br />22<br />
Minder plugins<br /><video><br /><audio><br /><canvas><br />Flash<br />Shockwave<br />Silverlight<br />23<br />
API’s<br />24<br />Microdata<br />Canvas<br />Drag& drop<br />Caching<br />Offline storage<br />Web SQL<br />IndexedDB<br ...
CSS3<br />25<br />
Ronde hoekjes<br />:(<br /><div class=“box”><br />   <div class=“tl”><br />     <div class=“tr”><br />        <div class=“...
Ronde hoekjes<br />27<br />.zonder-hoekjes<br />{<br />     border-radius: 50%;<br />}<br />.eigenwijze-hoekjes<br />{    ...
<strong>Liones<strong><br />strong { background: #054780; padding: 20% 10%; border-radius: 0 10% 10% 0; }<br />strong:afte...
#c00<br />-moz-linear-gradient( top, #c00 0%, #fff50%, #006 100% )<br />-webkit-gradient( linear, left top, left bottom, c...
30<br />
31<br />
32<br />
Shadow<br />text-shadow: 1px 4px 8px #000;<br />box-shadow: 0 0 10% #fc9;<br />33<br />
α-transparency<br />color: #808080;<br />color: rgb( 128, 128, 128 );<br />color: rgba( 0, 0, 0, .5 );<br />34<br />
35<br />Shadow & α-transparency<br />
@font-face<br />{<br />     font-family: 'AkzidenzGrotesk';src: url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webf...
@media screen and ( max-width : 320px )  {…} Smartphone<br />@media screen and ( min-width : 1824px ) {…} Widescreen<br />...
@media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) and ( min-device-pixel-ratio : 1.5 )...
.three-columns {	column-count: 3;	column-gap: 20px;	column-rule: 1px dottedgrey;}<br />39<br />Columns<br />
-webkit-transform:rotate( 33deg )scale( .704 )skew( 30deg )	translate( -46px );<br />40<br />Transformation<br />
.zoom-out {	-webkit-transition: all 1s ease;	-webkit-transform: rotate( 4deg )scale( 1 ) skew( 1deg ) translate( 10px ); }...
.bounce{	-webkit-animation-name: cssAnimation;	-webkit-animation-duration: 1s;	-webkit-animation-iteration-count: 16;	-web...
Selectors<br />43<br />h1 + h2<br />dt ~ abbr<br />ulli:first-child<br />input[type=checkbox]<br />article > p:nth-of-type...
Maareh…<br />44<br />
45<br />Browser landschap<br />
Oude, eh, andere browsers<br />46<br />IE6 kan dit allemaal niet zo goed bijhouden<br />Firefox 2, Safari 3 en Chrome 4 oo...
IE6<br />47<br />
IE7 & IE8<br />48<br />
Firefox<br />49<br />
Chrome<br />50<br />
Opera<br />51<br />
Safari<br />52<br />
Maatwerk<br />Rechte hoekjes<br />Ronde hoekjes<br />53<br />
Hoe pakken we dat aan<br />54<br />Modernizr<br />Selectivizr<br />jQuery<br />eCCStender<br />
Javascript<br />55<br />
Hoe pakken we dat aan<br />56<br />Modernizr<br />Selectivizr<br />jQuery<br />eCCStender<br />
Progressiveenhancement<br />Gracefuldegradation<br />Hardboiled web design<br />Hoe pakken we dat aan<br />57<br />
58<br />
Hardboiled<br />“I looked at Berin and laughed. He turned his head and stared right into the muzzle of his own gun. The ki...
Hardboiled<br />60<br />
The term ‘hardboiled’ means tough, like an overcooked egg. The crimes are tough too, so the heroes have attitude, don’t su...
Business<br />62<br />
“Designs are done in Photoshop andsigned off by a client, whowillobviouslyexpect the website to look the same as the comp,...
“If the project includes HTML markup and CSS templates, we will develop these using HTML5 and CSS2.1 and CSS3 for styling....
…<br />Users of older or less capable browsers or devices will experience a design that is appropriate to the capabilities...
Bij ons op de PC<br />66<br />Kluwer Support<br />Brunel<br />NUV<br />Liones SMS<br />Lynkx 3.10<br />SiteCore 2<br />HTM...
We bouwen voor de beste browsers.<br />Chrome, Opera, Firefox, Safari<br />Internet Explorer 9<br />Internet Explorer 8<br...
Gewoon goed programmeren brengt ons al halverwege.<br />Inhoud, vormgeving en interactie scheiden<br />Object-georiënteerd...
69<br />
Gewoon goed programmeren brengt ons al halverwege.<br />Inhoud, vormgeving en interactie scheiden<br />Object-georiënteerd...
We besteden expliciet aandacht aan andere browsers.<br />Nogmaals, dat wil niet zeggen dat… Ok.<br />Dit kan (deels) in de...
Onze klanten moeten even wennen.<br />dowebsitesneedtolookexactlythesameineverybrowser.com<br />dowebsitesneedtobeexperien...
Grafisch ontwerp mag wel wat interactiever.<br />Requirements -> FO ->IO ->GO ->HTML<br />Designers horen te weten wat er ...
Upcoming SlideShare
Loading in …5
×

Hardboiled Web Design

2,917 views

Published on

&quot;The crimes are tough too, so the heroes have attitude, don’t sugar-coat the truth and never play it cute.&quot;

General presentation to my colleagues at #Liones on what\'s new in HTML5 and CSS3, how we can use it today, and what we must mind to do so.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,917
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Toch zijn er ook document-achtige veranderingen. Vroeger, wéken geleden, moesten we ons nog behelpen met betekenisloze divs. Een element dat een generieke groepering aangeeft. Nu niet meer.
  • Hardboiled Web Design

    1. 1. Lunchpresentatie<br />4 januari 2011<br />1<br />Vincent Smedinga<br />Liones<br />
    2. 2. 2<br />
    3. 3. Wat zit er in HTML5<br />Wat zit er in CSS 3<br />Wat kunnen we nu al gebruiken<br />Wat moeten we daarvoor doen<br />3<br />Ready, set<br />
    4. 4. Interactie<br />Vormgeving<br />Inhoud<br />4<br />
    5. 5. Javascript<br />CSS<br />HTML<br />5<br />
    6. 6. HTML<br /><h1>Example</h1><br /><p>Helloworld!</p><br /><ul> <li>Yea</li> <li>Nay</li></ul><br />Example<br />Helloworld!<br /><ul><li>Yea
    7. 7. Nay</li></ul>6<br />
    8. 8. h1 { color: rgb( 0, 192, 255 ); }<br />p { font: 12px / 1.337 boldCandara; }<br /><ul><li>ul li { list-item: square; }</li></ul>CSS<br />div { position: absolute; top: 0; right: 0;<br />z-index: 999 }<br />7<br />
    9. 9. $( ‘.gallery a’ ).fancybox();<br />$( ‘.column’ ).equalHeights();<br />$( ‘#go’ ).click( function() { $( this ).ne- xt( ‘form.login’ ).slideDown( ‘slow’ ); }<br />Javascript<br />8<br />
    10. 10. HTML5<br />9<br />
    11. 11. Geschiedenis<br />10<br />1999: HTML 4 ‘af’<br />XHTML 1.0 & 1.1<br />W3C ↔ WHATWG<br />Webapps ↔ webdocs<br />2006: XHTML2<br />HTML5 FTW<br />
    12. 12. XHTML2 ↔ HTML5<br />Steven Pemberton<br />Ian Hickson<br />11<br />
    13. 13. Support existing content<br />Degradegracefully<br />Pave the cowpaths<br />Priority of consituencies“In case of conflict, considerusers over authors over implementers over specifiers over theoreticalpurity.”<br />Define error handling<br />Design principles<br />12<br />
    14. 14. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />Eenvoudiger<br />13<br />
    15. 15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br />Eenvoudiger<br />14<br />
    16. 16. <!doctype html>Yey :)<br />Eenvoudiger<br />15<br />
    17. 17. Semantischer<br /><div id=“wrapper”><br /> <div id=“navigation”>…</div><br /> <div class=“news-index”><br /> <div class=“news-item”><br /> <h3>Title</h3><br /> <p>Intro</p><br /> <a href=“news.txt”>Link</a><br /> </div><br /> </div><br /></div><br /><body><br /><nav>…</nav><br /> <section class=“news”><br /><article><br /> <h1>Title</h1><br /><p>Intro</p><br /><a href=“news.html5”>Link</a><br /> </article><br /></section><br /></body ><br />16<br />
    18. 18. 17<br />Semantischer<br />
    19. 19. Semantischerder<br />Accessibility<br /><header role=“banner”><br /><navrole=“navigation”><br /><div role=“main”><br /><footerrole=“contentinfo”><br />Microformats<br /><div class=“vcard”><br /> <address class=“fn”>Vincent Smedinga</address><br /> <a class=“orgurl”>liones.nl</a><br /> <span class=“title”>frontend web developer</span><br /></div><br />18<br />
    20. 20. Meer browser<br />Oud<br /><input type=“text”><br /><input type=“radio”><br /><input type=“checkbox”><br /><input type=“submit”><br /><input type=“reset”><br /><select><br /><textarea><br />Nieuw<br /><input type=“search”><br /><input type=“email”><br /><input type=“url”><br /><input type=“tel”><br /><input type=“number”><br /><input type=“range”><br /><input type=“datetime”><br /><input type=“color”><br />…<br />19<br />
    21. 21. Meer browser<br />20<br />
    22. 22. Meer browser<br />datalist<br />placeholder<br />autofocus<br />autocomplete<br /><input type=“text”><br />21<br />
    23. 23. Minder plugins<br /><video><br /><audio><br /><canvas><br />Flash<br />Shockwave<br />Silverlight<br />22<br />
    24. 24. Minder plugins<br /><video><br /><audio><br /><canvas><br />Flash<br />Shockwave<br />Silverlight<br />23<br />
    25. 25. API’s<br />24<br />Microdata<br />Canvas<br />Drag& drop<br />Caching<br />Offline storage<br />Web SQL<br />IndexedDB<br />Geolocation<br />Document editing<br />Timedmedia playback<br />Web workers<br />Web sockets<br />Cross-document messaging<br />
    26. 26. CSS3<br />25<br />
    27. 27. Ronde hoekjes<br />:(<br /><div class=“box”><br /> <div class=“tl”><br /> <div class=“tr”><br /> <div class=“bl”><br /> <div class=“br”><br />It’s getting …<br /> </div><br /> </div><br /> </div><br /></div><br />:)<br /><div class=“box”><br /> … round in here.<br /></div><br />.box<br />{<br /> border-radius: 10%;<br />}<br />26<br />
    28. 28. Ronde hoekjes<br />27<br />.zonder-hoekjes<br />{<br /> border-radius: 50%;<br />}<br />.eigenwijze-hoekjes<br />{ border-radius:<br /> 5px 180px 0 77px;<br />}<br />
    29. 29. <strong>Liones<strong><br />strong { background: #054780; padding: 20% 10%; border-radius: 0 10% 10% 0; }<br />strong:after { content: “·” }<br />28<br />Ronde hoekjes<br />
    30. 30. #c00<br />-moz-linear-gradient( top, #c00 0%, #fff50%, #006 100% )<br />-webkit-gradient( linear, left top, left bottom, color-stop( 0%, #c00 ), color-stop( 50%, #fff), color-stop( 100%, #006 ) )<br />Gradients<br />29<br />
    31. 31. 30<br />
    32. 32. 31<br />
    33. 33. 32<br />
    34. 34. Shadow<br />text-shadow: 1px 4px 8px #000;<br />box-shadow: 0 0 10% #fc9;<br />33<br />
    35. 35. α-transparency<br />color: #808080;<br />color: rgb( 128, 128, 128 );<br />color: rgba( 0, 0, 0, .5 );<br />34<br />
    36. 36. 35<br />Shadow & α-transparency<br />
    37. 37. @font-face<br />{<br /> font-family: 'AkzidenzGrotesk';src: url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webfont.eot' );src: local( '?' ), url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webfont.woff' ) format( 'woff' ),url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webfont.ttf' ) format( 'truetype' ),url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webfont.svg#webfontkBrJyxey' ) format( 'svg' );<br />}<br />header h1<br />{<br /> font: bold16px AkzidenzGrotesk, Arial, Helvetica, sans-serif;<br />color: {Color.blue};<br />}<br />36<br />Fonts<br />
    38. 38. @media screen and ( max-width : 320px ) {…} Smartphone<br />@media screen and ( min-width : 1824px ) {…} Widescreen<br />37<br />Media queries<br />
    39. 39. @media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) and ( min-device-pixel-ratio : 1.5 ) and ( orientation : portrait ) {…} iPad<br />38<br />Media queries<br />
    40. 40. .three-columns { column-count: 3; column-gap: 20px; column-rule: 1px dottedgrey;}<br />39<br />Columns<br />
    41. 41. -webkit-transform:rotate( 33deg )scale( .704 )skew( 30deg ) translate( -46px );<br />40<br />Transformation<br />
    42. 42. .zoom-out { -webkit-transition: all 1s ease; -webkit-transform: rotate( 4deg )scale( 1 ) skew( 1deg ) translate( 10px ); }<br />.zoom-out:hover { -webkit-transform: rotate( 0deg )scale( 0.67 ) skew( 1deg )translate( 0px ); }<br />41<br />Transition<br />
    43. 43. .bounce{ -webkit-animation-name: cssAnimation; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 16; -webkit-animation-timing-function: ease;}<br />@-webkit-keyframescssAnimation{from { -webkit-transform: rotate( 4deg )scale( 1 ) skew( 1deg ) translate( 10px ); }to { -webkit-transform: rotate( 4deg ) scale( 1 )skew( 1deg ) translate( 10px ); }}<br />42<br />Animation<br />
    44. 44. Selectors<br />43<br />h1 + h2<br />dt ~ abbr<br />ulli:first-child<br />input[type=checkbox]<br />article > p:nth-of-type( 3n – 1 )<br />header:target<br />.block::after<br />
    45. 45. Maareh…<br />44<br />
    46. 46. 45<br />Browser landschap<br />
    47. 47. Oude, eh, andere browsers<br />46<br />IE6 kan dit allemaal niet zo goed bijhouden<br />Firefox 2, Safari 3 en Chrome 4 ook niet trouwens<br />En wat dacht je van de Blackberry browser?<br />Of die van de Nokia? Apple? HTC?<br />Firefox Mobile? Opera Mini? Windows Phone?<br />Of je iPad? Je Google TV?<br />
    48. 48. IE6<br />47<br />
    49. 49. IE7 & IE8<br />48<br />
    50. 50. Firefox<br />49<br />
    51. 51. Chrome<br />50<br />
    52. 52. Opera<br />51<br />
    53. 53. Safari<br />52<br />
    54. 54. Maatwerk<br />Rechte hoekjes<br />Ronde hoekjes<br />53<br />
    55. 55. Hoe pakken we dat aan<br />54<br />Modernizr<br />Selectivizr<br />jQuery<br />eCCStender<br />
    56. 56. Javascript<br />55<br />
    57. 57. Hoe pakken we dat aan<br />56<br />Modernizr<br />Selectivizr<br />jQuery<br />eCCStender<br />
    58. 58. Progressiveenhancement<br />Gracefuldegradation<br />Hardboiled web design<br />Hoe pakken we dat aan<br />57<br />
    59. 59. 58<br />
    60. 60. Hardboiled<br />“I looked at Berin and laughed. He turned his head and stared right into the muzzle of his own gun. The killer’s face was a vile mask of hatred. Berin had his mouth open, screaming with all the furies of the gods dethroned, but my laugh was even louder. He was still screaming when I pulled the trigger.”<br />— My Gun is Quick, Mickey Spillane, 1950<br />59<br />
    61. 61. Hardboiled<br />60<br />
    62. 62. The term ‘hardboiled’ means tough, like an overcooked egg. The crimes are tough too, so the heroes have attitude, don’t sugar-coat the truth and never play it cute.<br />Hardboiled web design<br />61<br />
    63. 63. Business<br />62<br />
    64. 64. “Designs are done in Photoshop andsigned off by a client, whowillobviouslyexpect the website to look the same as the comp,otherwisewhat the hell was the point of givingittothem in the first place?”<br />– Andy Clarke<br />63<br />
    65. 65. “If the project includes HTML markup and CSS templates, we will develop these using HTML5 and CSS2.1 and CSS3 for styling. The landscape of web browsers and devices changes regularly and our approach is to look forward, not back. With that in mind we will test all our markup and CSS in current versions of all major desktop browsers to ensure that we make the most from them.<br />…<br />64<br />
    66. 66. …<br />Users of older or less capable browsers or devices will experience a design that is appropriate to the capabilities of their software. For people using Microsoft Internet Explorer 6, this means a universal, typographically focused design but no layout. We will also test that these templates perform well on Apple’s iPad.”<br />– Andy Clarke<br />65<br />
    67. 67. Bij ons op de PC<br />66<br />Kluwer Support<br />Brunel<br />NUV<br />Liones SMS<br />Lynkx 3.10<br />SiteCore 2<br />HTML5 Boilerplate<br />Standaard frontend architectuur<br />
    68. 68. We bouwen voor de beste browsers.<br />Chrome, Opera, Firefox, Safari<br />Internet Explorer 9<br />Internet Explorer 8<br />Internet Explorer 7 & 6<br />67<br />Kortom<br />
    69. 69. Gewoon goed programmeren brengt ons al halverwege.<br />Inhoud, vormgeving en interactie scheiden<br />Object-georiënteerd denken<br />Flexibiliteit top of mind<br />Semantiek is sexy<br />68<br />Kortom<br />
    70. 70. 69<br />
    71. 71. Gewoon goed programmeren brengt ons al halverwege.<br />Inhoud, vormgeving en interactie scheiden<br />Object-georiënteerd denken<br />Flexibiliteit top of mind<br />Semantiek is sexy<br />70<br />Kortom<br />
    72. 72. We besteden expliciet aandacht aan andere browsers.<br />Nogmaals, dat wil niet zeggen dat… Ok.<br />Dit kan (deels) in de tijd die we besparen dankzij de nieuwe technieken. Border-radius, weet je nog.<br />Voor veel fallbacksbestaan al best practices, of werkt HTML5 ‘gewoon’.<br />71<br />Kortom<br />
    73. 73. Onze klanten moeten even wennen.<br />dowebsitesneedtolookexactlythesameineverybrowser.com<br />dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com<br />72<br />Kortom<br />
    74. 74. Grafisch ontwerp mag wel wat interactiever.<br />Requirements -> FO ->IO ->GO ->HTML<br />Designers horen te weten wat er (gemakkelijker) kan<br />Experimenteren met HTML prototyping<br />73<br />Kortom<br />
    75. 75. Vragen &Dıscussie<br />74<br />

    ×