Hardboiled Web Design
•
3 j'aime•1,362 vues
"The crimes are tough too, so the heroes have attitude, don’t sugar-coat the truth and never play it cute." 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.
Recommandé
Contenu connexe
Similaire à Hardboiled Web Design
Similaire à Hardboiled Web Design (20)
Hardboiled Web Design
- 1. Lunchpresentatie 4 januari 2011 1 Vincent Smedinga Liones
- 2. 2
- 3. Wat zit er in HTML5 Wat zit er in CSS 3 Wat kunnen we nu al gebruiken Wat moeten we daarvoor doen 3 Ready, set
- 5. Javascript CSS HTML 5
- 7. Nay6
- 9. $( ‘.gallery a’ ).fancybox(); $( ‘.column’ ).equalHeights(); $( ‘#go’ ).click( function() { $( this ).ne- xt( ‘form.login’ ).slideDown( ‘slow’ ); } Javascript 8
- 10. HTML5 9
- 11. Geschiedenis 10 1999: HTML 4 ‘af’ XHTML 1.0 & 1.1 W3C ↔ WHATWG Webapps ↔ webdocs 2006: XHTML2 HTML5 FTW
- 12. XHTML2 ↔ HTML5 Steven Pemberton Ian Hickson 11
- 13. Support existing content Degradegracefully Pave the cowpaths Priority of consituencies“In case of conflict, considerusers over authors over implementers over specifiers over theoreticalpurity.” Define error handling Design principles 12
- 14. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Eenvoudiger 13
- 15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Eenvoudiger 14
- 16. <!doctype html>Yey :) Eenvoudiger 15
- 17. Semantischer <div id=“wrapper”> <div id=“navigation”>…</div> <div class=“news-index”> <div class=“news-item”> <h3>Title</h3> <p>Intro</p> <a href=“news.txt”>Link</a> </div> </div> </div> <body> <nav>…</nav> <section class=“news”> <article> <h1>Title</h1> <p>Intro</p> <a href=“news.html5”>Link</a> </article> </section> </body > 16
- 18. 17 Semantischer
- 19. Semantischerder Accessibility <header role=“banner”> <navrole=“navigation”> <div role=“main”> <footerrole=“contentinfo”> Microformats <div class=“vcard”> <address class=“fn”>Vincent Smedinga</address> <a class=“orgurl”>liones.nl</a> <span class=“title”>frontend web developer</span> </div> 18
- 20. Meer browser Oud <input type=“text”> <input type=“radio”> <input type=“checkbox”> <input type=“submit”> <input type=“reset”> <select> <textarea> Nieuw <input type=“search”> <input type=“email”> <input type=“url”> <input type=“tel”> <input type=“number”> <input type=“range”> <input type=“datetime”> <input type=“color”> … 19
- 21. Meer browser 20
- 22. Meer browser datalist placeholder autofocus autocomplete <input type=“text”> 21
- 23. Minder plugins <video> <audio> <canvas> Flash Shockwave Silverlight 22
- 24. Minder plugins <video> <audio> <canvas> Flash Shockwave Silverlight 23
- 25. API’s 24 Microdata Canvas Drag& drop Caching Offline storage Web SQL IndexedDB Geolocation Document editing Timedmedia playback Web workers Web sockets Cross-document messaging
- 26. CSS3 25
- 27. Ronde hoekjes :( <div class=“box”> <div class=“tl”> <div class=“tr”> <div class=“bl”> <div class=“br”> It’s getting … </div> </div> </div> </div> :) <div class=“box”> … round in here. </div> .box { border-radius: 10%; } 26
- 28. Ronde hoekjes 27 .zonder-hoekjes { border-radius: 50%; } .eigenwijze-hoekjes { border-radius: 5px 180px 0 77px; }
- 29. <strong>Liones<strong> strong { background: #054780; padding: 20% 10%; border-radius: 0 10% 10% 0; } strong:after { content: “·” } 28 Ronde hoekjes
- 30. #c00 -moz-linear-gradient( top, #c00 0%, #fff50%, #006 100% ) -webkit-gradient( linear, left top, left bottom, color-stop( 0%, #c00 ), color-stop( 50%, #fff), color-stop( 100%, #006 ) ) Gradients 29
- 31. 30
- 32. 31
- 33. 32
- 34. Shadow text-shadow: 1px 4px 8px #000; box-shadow: 0 0 10% #fc9; 33
- 35. α-transparency color: #808080; color: rgb( 128, 128, 128 ); color: rgba( 0, 0, 0, .5 ); 34
- 36. 35 Shadow & α-transparency
- 37. @font-face { 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' ); } header h1 { font: bold16px AkzidenzGrotesk, Arial, Helvetica, sans-serif; color: {Color.blue}; } 36 Fonts
- 38. @media screen and ( max-width : 320px ) {…} Smartphone @media screen and ( min-width : 1824px ) {…} Widescreen 37 Media queries
- 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 38 Media queries
- 40. .three-columns { column-count: 3; column-gap: 20px; column-rule: 1px dottedgrey;} 39 Columns
- 41. -webkit-transform:rotate( 33deg )scale( .704 )skew( 30deg ) translate( -46px ); 40 Transformation
- 42. .zoom-out { -webkit-transition: all 1s ease; -webkit-transform: rotate( 4deg )scale( 1 ) skew( 1deg ) translate( 10px ); } .zoom-out:hover { -webkit-transform: rotate( 0deg )scale( 0.67 ) skew( 1deg )translate( 0px ); } 41 Transition
- 43. .bounce{ -webkit-animation-name: cssAnimation; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 16; -webkit-animation-timing-function: ease;} @-webkit-keyframescssAnimation{from { -webkit-transform: rotate( 4deg )scale( 1 ) skew( 1deg ) translate( 10px ); }to { -webkit-transform: rotate( 4deg ) scale( 1 )skew( 1deg ) translate( 10px ); }} 42 Animation
- 44. Selectors 43 h1 + h2 dt ~ abbr ulli:first-child input[type=checkbox] article > p:nth-of-type( 3n – 1 ) header:target .block::after
- 45. Maareh… 44
- 47. Oude, eh, andere browsers 46 IE6 kan dit allemaal niet zo goed bijhouden Firefox 2, Safari 3 en Chrome 4 ook niet trouwens En wat dacht je van de Blackberry browser? Of die van de Nokia? Apple? HTC? Firefox Mobile? Opera Mini? Windows Phone? Of je iPad? Je Google TV?
- 48. IE6 47
- 49. IE7 & IE8 48
- 50. Firefox 49
- 51. Chrome 50
- 52. Opera 51
- 53. Safari 52
- 54. Maatwerk Rechte hoekjes Ronde hoekjes 53
- 55. Hoe pakken we dat aan 54 Modernizr Selectivizr jQuery eCCStender
- 56. Javascript 55
- 57. Hoe pakken we dat aan 56 Modernizr Selectivizr jQuery eCCStender
- 58. Progressiveenhancement Gracefuldegradation Hardboiled web design Hoe pakken we dat aan 57
- 59. 58
- 60. Hardboiled “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.” — My Gun is Quick, Mickey Spillane, 1950 59
- 61. Hardboiled 60
- 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. Hardboiled web design 61
- 63. Business 62
- 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?” – Andy Clarke 63
- 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. … 64
- 66. … 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.” – Andy Clarke 65
- 67. Bij ons op de PC 66 Kluwer Support Brunel NUV Liones SMS Lynkx 3.10 SiteCore 2 HTML5 Boilerplate Standaard frontend architectuur
- 68. We bouwen voor de beste browsers. Chrome, Opera, Firefox, Safari Internet Explorer 9 Internet Explorer 8 Internet Explorer 7 & 6 67 Kortom
- 69. Gewoon goed programmeren brengt ons al halverwege. Inhoud, vormgeving en interactie scheiden Object-georiënteerd denken Flexibiliteit top of mind Semantiek is sexy 68 Kortom
- 70. 69
- 71. Gewoon goed programmeren brengt ons al halverwege. Inhoud, vormgeving en interactie scheiden Object-georiënteerd denken Flexibiliteit top of mind Semantiek is sexy 70 Kortom
- 72. We besteden expliciet aandacht aan andere browsers. Nogmaals, dat wil niet zeggen dat… Ok. Dit kan (deels) in de tijd die we besparen dankzij de nieuwe technieken. Border-radius, weet je nog. Voor veel fallbacksbestaan al best practices, of werkt HTML5 ‘gewoon’. 71 Kortom
- 73. Onze klanten moeten even wennen. dowebsitesneedtolookexactlythesameineverybrowser.com dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com 72 Kortom
- 74. Grafisch ontwerp mag wel wat interactiever. Requirements -> FO ->IO ->GO ->HTML Designers horen te weten wat er (gemakkelijker) kan Experimenteren met HTML prototyping 73 Kortom
Notes de l'éditeur
- 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.