This browser is not optimized for this presentation.
Please use a webkit-browser (Chrome or Safari) instead.

Please wait...

The magic that is
HTML5

Who am I?

  • Flemming Lauritzen
  • Front-end developer
  • Team UX
  • Employed since nov. 2010
................................................................................ .................................,..,+:,7?7?=I.................................. ................................,I=7I7I?I??II+II................................ .............................~?I?I??+~?===~?++++I?=............................. ........................~?III?===?~~::=~=?=+?===~~~~?I~......................... .......................:?II+=~=~~?,,,~~=?++=~=~~~~:~=+?=........................ ......................IIII+:,~=+:~:+::+.:::~:~:,:,~~+???::...................... ....................:+I???+=~~~~~~:+~,~=::,:::=~:~~=~~==I+...................... ....................?II+============~~:~=~~:~====++=,,:=II+..................... ....................II+~~=IIIIII??++++++++++????II??~,::+I~..................... ...................+?+==+II7IIIII???????????IIIIIIII?,,:=?:..................... ...................I?==+I7777IIII?????????I?IIIIIIIII?~:~=:..................... .................:?++==I77777IIIIIIII??IIIIIIIIIIIIIII?~:=?..................... .................I?+=++I7777I7IIIIII???????IIIIIIIIIIII=~:+..................... ................~??=++?I7777IIIIII?????????????IIIIIIII+===..................... .................??????I777IIIIII?????????????IIIIIIIII+=++..................... .................I??+??I777IIIIIIIIII???????IIIIIIIIIII+==?..................... .................~I?+??I777IIII??IIIIIIIIIIIIIIIII????I?:=?..................... ..................+??III777II????+=++??I??????+++?IIII?I::+..................... ..................~I?I?7777III??????????????????IIIIIIII~:+..................... ...................II?II777777II?=+++=~II?II??~:.=+:+III?==..................... ...................II?II777III~=,,=?:==I??III==~:=?IIIIII+=..................... ...................+II?I7777II7I?++++=+???III??+?IIIII7III=?+................... ...................=III7777777II??++~?I??????II?IIIIIIIIII+??................... ..................IIIII777IIIIII?++=+????????III?II?IIIIII???................... .................??IIII777IIII??+++=?II?????IIII??IIIIIIIII?.................... .................I?IIII7777IIII??++==II???IIIII??IIIIIIIIII,.................... .................=?II?+7777IIIII??+==I?+????+?I?IIIIIIIIIII..................... ..................,I?+I77777IIIII????+++???IIIIIIIIIIIIIIII..................... ...................:I++77777IIIII???????????IIIII?IIIIIIIII..................... ....................III77777IIIII???II??II?I?IIII??IIIIIII=..................... .....................III7777IIIII???II?????+++?II???IIII?....................... .....................?II777IIIIIII??+=+=+?+I+=~~=~=?IIII=....................... .......................77777IIIIII??II????????IIII??IIII........................ .......................I7777IIIII??IIII??????IIIIIIIIII+........................ .......................=77777IIIII?II?I??????IIIIIIIII?......................... .......................?77777IIIIIIII???????IIIIIIIII??......................... .......................I77777IIIIIIIIII???I?IIIIIII??I?......................... ......................=7777777IIIIIIIII???I??III?I??III......................... .....................I77II777777IIIII??????????+???III=7........................ ....................I7777?777777IIIII?++=++=====???III~7,....................... ...................I777777+7777IIIIII???++===+???IIII?:I77.,.................... ................~?777777777+~?I77IIIIIII?????????IIII:~?77:..,:,................ ..............~~~77I77777777?=+?IIIIIIIIIII??????IIII,=?777.....,~,............. .............=:::77I7777777777++=??IIIIIII???????III=,+?I77=.........~,......... ..........~~:,,,,+77I7777777777I+++++???????????III?,:??I77 ?...........:~...... ........~=::,,,,,.+7I77777777777?++++++????????IIII+,~??7777 ..............~=... ......=~:,,,,,,,,..,77777777777777????++??????IIII+~,+?I :.~+?.................. ...,~::,,,,,,,......,??777777777777I?????????IIII?=~:+I7 =.,+?.................. .~~::,,,,,,...........,?777777777 7III??????IIII?+=~?II7 ~..=?.................. ~:,,,,,,,,..............+I7777777+=+?77IIIIIII??+==??I77~..,=:.................. :,,,,,,.................,= 77777?===I?I7IIIII???=~???I77...:~................... ,,,,,.....................= 777?+?I?+?I777III?++~??+I77=........................ ,,.........................?777II+?777I77777?+=~+III7I7......................... ............................+7777I??777777777=~~777777I......................... .............................~777777II7777777+I7777777.......................... ..............................~I77777III77777?77777I7=..........................

Today's topics

  • HTML5
    going behind the buzzword
  • CSS3
    styling awesomeness
  • Animations
    transitions between states
  • Bridging the gap
    from design to implementation

An overview of the web's architecture

  • Structure (HTML)
  • Content (HTML)
  • Presentation (CSS)
  • Behaviour (JS)
  • Business logic (JS)
HTML
CSS
JS
HTML5 logo

Going behind the buzzword...

A true story...

HTML5

what is it really?

  • W3C’s latest revision of the HTML spec
  • A language describing contents and semantics of web pages
  • A framework for embedding technologies
  • Lots of new technologies
  • the specification is not ready (!)
CSS3 logo

Styling awesomeness!

CSS

  • Cascading Style Sheets
  • A language used for describing the presentation of content (HTML)
  • Separation is important due to:
    • simpler implementation
    • simpler maintenace
    • easier reuse
    • lower cost

CSS3

  • W3C’s latest revision of the CSS spec
  • With new version browser versions
    the overall support increases
  • Best support in webkit-browsers
    (Chrome & Safari)
  • IE is still lagging (way) behind

CSS3 features

(an incomplete list)

  • Border radius
  • Gradients
  • Inner/outer shadow
  • Rotate
  • Scale
  • Skew

Why go 2D
when you can go 3D?

  • CSS3 supports 3D presentation of HTML-content
  • CSS3 also supports perspective

Graceful
degradation

  • Not all browser support the (whole) CSS3 spec
  • When a property is not supported we degrade!
  • ...or we hack the living #@%&# out of IE 7!
  • Clients should be made aware of their choice:
    • make it work in all browsers (expensive)
    • make it work in modern browsers

Why not use images?

  • CSS3 allows for simpler implementation
  • CSS3 allows for simpler maintenace
  • Ergo: lower cost
  • Less network traffic means faster load times
  • Neglect of accessibility

Rule of thumb

Users should be able to consume the content
even without the best presentation

To be perfectly clear...

It's okay to show
a degraded webpage

Animations

Transitions between states

Why use
animations?

  • It brings delight to your design
  • It "speaks" better to us as humans
    rather than instant changes

Implementations

  • Javascript:
    • hard to program
    • consumes alot of CPU
  • CSS3:
    • allows for "true animations" with keyframes
    • makes use of the GPU to render the graphics

Planning
animations

  • Attributes (position, scale, colors, etc.)
  • Duration
  • Timing function (ease-in, ease-out, etc.)
  • Looping (and number of iterations)

Bridging the gap
from design
to implementation

Simplify the workprocess

  • Design with the web platform in mind
  • Think CSS when designing in Photoshop
  • Reduces the cost of converting /
    implementing graphical design

Use these

  • Vector graphics
  • Border radius
  • Opacity and anti-aliasing

...and these
layer styles

  • Drop Shadow
  • Inner Shadow
  • Color Overlay
  • Gradient Overlay
  • Pattern Overlay
  • Stroke

Avoid these

  • All (layer) blend modes
  • Layer styles:
    • Outer Glow*
    • Inner Glow*
    • Bevel*
    • Satin
  • ...and any advanced settings