• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hardboiled Web Design
 

Hardboiled Web Design

on

  • 2,825 views

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

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

Statistics

Views

Total Views
2,825
Views on SlideShare
2,816
Embed Views
9

Actions

Likes
3
Downloads
0
Comments
0

4 Embeds 9

http://localhost 3
http://www.linkedin.com 3
http://78.40.76.9 2
http://localhost:8080 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Hardboiled Web Design Presentation Transcript

  • Lunchpresentatie
    4 januari 2011
    1
    Vincent Smedinga
    Liones
  • 2
  • 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
  • Interactie
    Vormgeving
    Inhoud
    4
  • Javascript
    CSS
    HTML
    5
  • HTML
    <h1>Example</h1>
    <p>Helloworld!</p>
    <ul> <li>Yea</li> <li>Nay</li></ul>
    Example
    Helloworld!
    • Yea
    • Nay
    6
  • h1 { color: rgb( 0, 192, 255 ); }
    p { font: 12px / 1.337 boldCandara; }
    • ul li { list-item: square; }
    CSS
    div { position: absolute; top: 0; right: 0;
    z-index: 999 }
    7
  • $( ‘.gallery a’ ).fancybox();
    $( ‘.column’ ).equalHeights();
    $( ‘#go’ ).click( function() { $( this ).ne- xt( ‘form.login’ ).slideDown( ‘slow’ ); }
    Javascript
    8
  • HTML5
    9
  • Geschiedenis
    10
    1999: HTML 4 ‘af’
    XHTML 1.0 & 1.1
    W3C ↔ WHATWG
    Webapps ↔ webdocs
    2006: XHTML2
    HTML5 FTW
  • XHTML2 ↔ HTML5
    Steven Pemberton
    Ian Hickson
    11
  • 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
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Eenvoudiger
    13
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    Eenvoudiger
    14
  • <!doctype html>Yey :)
    Eenvoudiger
    15
  • 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
  • 17
    Semantischer
  • 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
  • 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
  • Meer browser
    20
  • Meer browser
    datalist
    placeholder
    autofocus
    autocomplete
    <input type=“text”>
    21
  • Minder plugins
    <video>
    <audio>
    <canvas>
    Flash
    Shockwave
    Silverlight
    22
  • Minder plugins
    <video>
    <audio>
    <canvas>
    Flash
    Shockwave
    Silverlight
    23
  • 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
  • CSS3
    25
  • 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
  • Ronde hoekjes
    27
    .zonder-hoekjes
    {
    border-radius: 50%;
    }
    .eigenwijze-hoekjes
    { border-radius:
    5px 180px 0 77px;
    }
  • <strong>Liones<strong>
    strong { background: #054780; padding: 20% 10%; border-radius: 0 10% 10% 0; }
    strong:after { content: “&#183;” }
    28
    Ronde hoekjes
  • #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
  • 30
  • 31
  • 32
  • Shadow
    text-shadow: 1px 4px 8px #000;
    box-shadow: 0 0 10% #fc9;
    33
  • α-transparency
    color: #808080;
    color: rgb( 128, 128, 128 );
    color: rgba( 0, 0, 0, .5 );
    34
  • 35
    Shadow & α-transparency
  • @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
  • @media screen and ( max-width : 320px ) {…} Smartphone
    @media screen and ( min-width : 1824px ) {…} Widescreen
    37
    Media queries
  • @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
  • .three-columns { column-count: 3; column-gap: 20px; column-rule: 1px dottedgrey;}
    39
    Columns
  • -webkit-transform:rotate( 33deg )scale( .704 )skew( 30deg ) translate( -46px );
    40
    Transformation
  • .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
  • .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
  • Selectors
    43
    h1 + h2
    dt ~ abbr
    ulli:first-child
    input[type=checkbox]
    article > p:nth-of-type( 3n – 1 )
    header:target
    .block::after
  • Maareh…
    44
  • 45
    Browser landschap
  • 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?
  • IE6
    47
  • IE7 & IE8
    48
  • Firefox
    49
  • Chrome
    50
  • Opera
    51
  • Safari
    52
  • Maatwerk
    Rechte hoekjes
    Ronde hoekjes
    53
  • Hoe pakken we dat aan
    54
    Modernizr
    Selectivizr
    jQuery
    eCCStender
  • Javascript
    55
  • Hoe pakken we dat aan
    56
    Modernizr
    Selectivizr
    jQuery
    eCCStender
  • Progressiveenhancement
    Gracefuldegradation
    Hardboiled web design
    Hoe pakken we dat aan
    57
  • 58
  • 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
  • Hardboiled
    60
  • 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
  • Business
    62
  • “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
  • “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

  • 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
  • Bij ons op de PC
    66
    Kluwer Support
    Brunel
    NUV
    Liones SMS
    Lynkx 3.10
    SiteCore 2
    HTML5 Boilerplate
    Standaard frontend architectuur
  • We bouwen voor de beste browsers.
    Chrome, Opera, Firefox, Safari
    Internet Explorer 9
    Internet Explorer 8
    Internet Explorer 7 & 6
    67
    Kortom
  • 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
  • 69
  • 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
  • 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
  • Onze klanten moeten even wennen.
    dowebsitesneedtolookexactlythesameineverybrowser.com
    dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
    72
    Kortom
  • 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
  • Vragen &Dıscussie
    74