HTML 5 & CSS 3
Kabisa Knowledge Session - May 21, 2010




   { Agile Development } { Ruby on Rails } { Java / J2EE }
HTML 5 & CSS 3
A brief overview

     Modular
     Not based on SGML
     Inline SVG
     Support for PUT and DELETE
     ...
HTML 5 & CSS 3
HTML 5 Features

    Better Semantics
    Canvas
    Input Types
    Form Validation
    Media Elements
   ...
HTML 5 & CSS 3
Better Semantics

          <div id=”header”>                                              <header>


     ...
HTML 5 & CSS 3
Better Semantics

   Figure                                   <figure>


   Group figures
   Captions
   Cod...
HTML 5 & CSS 3
Better Semantics
     Progress
     •   <progress max=”100”><span>51</span>%</progress>

     •   Completio...
HTML 5 & CSS 3
Better Semantics

     Command
     •   Something a user may execute
     Datagrid
     •   Non-tabular dat...
HTML 5 & CSS 3
Canvas

     Drawing API
     Create graphics on the fly

   <canvas id=”super_square”>
      fallback infor...
HTML 5 & CSS 3
Input Types

     Defaults to “text’ when unsupported
     <input type=”tel”>
     <input type=”url”>
     ...
HTML 5 & CSS 3
Input Types
     <input type=”datetime”>
     <input type=”date”>
     <input type=”range”>
     <input typ...
HTML 5 & CSS 3
Forms

   Placeholders
   Autofocus
   Validations




             { Agile Development } { Ruby on Rails }...
HTML 5 & CSS 3
Media Elements

     OGG Theora/Vorbis
     •   Chrome
     •   Firefox
     •   Opera
     MPEG4 H.264/AAC...
HTML 5 & CSS 3
Media Elements

      WebM VP8
  •   Chrome
  •   Firefox
  •   IE 9
  •   Opera
  •   Safari??




       ...
HTML 5 & CSS 3
Drag & Drop

    Images and links by default
    Cancel default dragover (dragenter in IE)
    Listen for d...
HTML 5 & CSS 3
Local Storage

     localStorage & sessionStorage
     Pro cookies
     Key - Value
     String only
     M...
HTML 5 & CSS 3
Local Storage

      WEB SQL
      Transactions
      Client-side SQLite


  var db = openDatabase(‘food’, ...
HTML 5 & CSS 3
Local Storage

     Offline Application Caching
     Refer directly to cache
     Offline storage
     Event ...
HTML 5 & CSS 3
Geolocation

   Find current coordinates of user
   Track user

 navigator.geolocation.getCurrentPosition(s...
HTML 5 & CSS 3
Web Sockets
    Bi-directional full-duplex communication
    Increase scalability
    Less connections
    ...
HTML 5 & CSS 3
Web Workers

  Background JavaScript threads
  Can not manipulate DOM
  OS-level threads
  Pass data throug...
HTML 5 & CSS 3
Microdata
     Additional semantics
     Scoped name/value pairs
     Custom vocabularies
     Scopes
     ...
HTML 5 & CSS 3
CSS 3 Features

     Opacity
     RGBA & HSL/A Color
     New Background Properties
     New Border Propert...
HTML 5 & CSS 3
Opacity

     Adjust opacity of an element
     Value between 0.0 and 1.0
     Not supported in IE

   div ...
HTML 5 & CSS 3
RGBA & HSL/A Color

     RGB with alpha value
     Hue, Saturation, Lightness with alpha value
     Alpha v...
HTML 5 & CSS 3
Backgrounds

     Background-size
     Multiple background images

  div { background-size: 160px 98px; wid...
HTML 5 & CSS 3
Borders

   Border image
   Multiple border colors
   Border radius

  div { border-radius: 10px; }




   ...
HTML 5 & CSS 3
Text

      Text overflow
      Text shadow
      Column width
      Column gap

 article { column-width: 10...
HTML 5 & CSS 3
Fonts

   @font-face
   Local or URL
   TIF and OTF
   EOT in IE4+
   No need for SIFR or Cufon anymore
   ...
HTML 5 & CSS 3
Transformations

     Rotate
     Scale
     Skew
     Translate

  div { transform: rotate(45deg); }




 ...
HTML 5 & CSS 3
Transitions

     Animate properties
     Configurable duration


   /* Fade out on hover */
   div {
      ...
HTML 5 & CSS 3
Selectors

     Already in use by many JS libraries
     e[attribute], e[attribute=value]
     :first-child,...
HTML 5 & CSS 3
Media Queries

    Target specific range of devices
    Does not validate

    .blog {
       font-size: 1.1...
HTML 5 & CSS 3
3D

     Only in Chrome & Safari
     Perspective
       Distance in pixels
     Rotate3D
       Rotate thr...
HTML 5 & CSS 3
When to Use?
 IE 7
 IE 8                    A better future ahead
 IE 9
 Firefox 3.5
 Firefox 3.7
 Opera 10...
HTML 5 & CSS 3
When to Use?

                         A better future ahead




                                          ...
HTML 5 & CSS 3
Progressive Enhancement

   Websites do not have to look the same in every browser
   Progressive Enhanceme...
HTML 5 & CSS 3
Modernizr

   Test-Driven progressive enhancement
   Detect support for CSS 3 properties
   Feature detecti...
HTML 5 & CSS 3
Discussion




                             !?
             { Agile Development } { Ruby on Rails } { Java ...
{ Agile Development } { Ruby on Rails } { Java / J2EE }
Upcoming SlideShare
Loading in...5
×

HTML 5 & CSS 3

7,334

Published on

An introduction to the new features brought by HTML 5 and CSS 3. Slides from my presentation at the May 2010 Kabisa Knowledge Session.

Published in: Technology
2 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,334
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
328
Comments
2
Likes
17
Embeds 0
No embeds

No notes for slide







































  • HTML 5 & CSS 3

    1. 1. HTML 5 & CSS 3 Kabisa Knowledge Session - May 21, 2010 { Agile Development } { Ruby on Rails } { Java / J2EE }
    2. 2. HTML 5 & CSS 3 A brief overview Modular Not based on SGML Inline SVG Support for PUT and DELETE Custom data attributes { Agile Development } { Ruby on Rails } { Java / J2EE }
    3. 3. HTML 5 & CSS 3 HTML 5 Features Better Semantics Canvas Input Types Form Validation Media Elements Drag & Drop Local Storage Geolocation Web Sockets Microdata { Agile Development } { Ruby on Rails } { Java / J2EE }
    4. 4. HTML 5 & CSS 3 Better Semantics <div id=”header”> <header> <div id=”nav”> <nav> <div id=”article”> <div id=”side”> <section> <aside> <article> <div id=”footer”> <footer> { Agile Development } { Ruby on Rails } { Java / J2EE }
    5. 5. HTML 5 & CSS 3 Better Semantics Figure <figure> Group figures Captions Code blocks Essential content <figcaption> Nom Nom Nom { Agile Development } { Ruby on Rails } { Java / J2EE }
    6. 6. HTML 5 & CSS 3 Better Semantics Progress • <progress max=”100”><span>51</span>%</progress> • Completion of a task • Value between 0 and given maximum Meter • Tickets sold: <meter min=”0” high=”1300” optimum=”2000”>1900</meter> • Scalar measurement within known range Time • <time datetime=”2010-05-21T016:00+02:00”>21 May 2010 at 4 PM</time> • Attribute: pubdate { Agile Development } { Ruby on Rails } { Java / J2EE }
    7. 7. HTML 5 & CSS 3 Better Semantics Command • Something a user may execute Datagrid • Non-tabular data Mark • Highlight some text Output • Output of an application Ruby • Ruby annotations for Asian languages { Agile Development } { Ruby on Rails } { Java / J2EE }
    8. 8. HTML 5 & CSS 3 Canvas Drawing API Create graphics on the fly <canvas id=”super_square”> fallback information </canvas> var canvas = document.getElementById(‘super_square’); var context = canvas.getContext(‘2d’); context.fillStyle = “rgba(101, 156, 64, 0.4)”; context.fillRect(0, 0, 100, 100); { Agile Development } { Ruby on Rails } { Java / J2EE }
    9. 9. HTML 5 & CSS 3 Input Types Defaults to “text’ when unsupported <input type=”tel”> <input type=”url”> <input type=”email”> <input type=”number”> <input type=”search”> Tel Url Email Number { Agile Development } { Ruby on Rails } { Java / J2EE }
    10. 10. HTML 5 & CSS 3 Input Types <input type=”datetime”> <input type=”date”> <input type=”range”> <input type=”color”> <input type=”file multiple”> Date Range File multiple { Agile Development } { Ruby on Rails } { Java / J2EE }
    11. 11. HTML 5 & CSS 3 Forms Placeholders Autofocus Validations { Agile Development } { Ruby on Rails } { Java / J2EE }
    12. 12. HTML 5 & CSS 3 Media Elements OGG Theora/Vorbis • Chrome • Firefox • Opera MPEG4 H.264/AAC • Chrome • IE 9 • Opera • Safari { Agile Development } { Ruby on Rails } { Java / J2EE }
    13. 13. HTML 5 & CSS 3 Media Elements WebM VP8 • Chrome • Firefox • IE 9 • Opera • Safari?? { Agile Development } { Ruby on Rails } { Java / J2EE }
    14. 14. HTML 5 & CSS 3 Drag & Drop Images and links by default Cancel default dragover (dragenter in IE) Listen for drop event with dataTransfer object It sucks <div draggable=”true”></div> addEvent(div, ‘dragstart’, function(e) { e.dataTransfer.setData(‘foo’, ‘bar’); }, true); addEvent(div, ‘dragend’, function(e) { e.dataTransfer.getData(‘foo’); }, true); { Agile Development } { Ruby on Rails } { Java / J2EE }
    15. 15. HTML 5 & CSS 3 Local Storage localStorage & sessionStorage Pro cookies Key - Value String only Megabytes of data try { localStorage.setItem(“wants_cookies”, “a whole box!”); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert(“You have way too much cookie boxes, go away.”); } } { Agile Development } { Ruby on Rails } { Java / J2EE }
    16. 16. HTML 5 & CSS 3 Local Storage WEB SQL Transactions Client-side SQLite var db = openDatabase(‘food’, ‘1.1’, ‘A whole database filled with food’, 1024); db.transaction(function(tx) { tx.executeSql(‘SELECT * FROM vegetables’, [], function(tx, results) { for (i = 0l i < results.rows.length; i++) { alert(results.rows.item(i).text); } }); }); { Agile Development } { Ruby on Rails } { Java / J2EE }
    17. 17. HTML 5 & CSS 3 Local Storage Offline Application Caching Refer directly to cache Offline storage Event listeners online/offline <html manifest=”cache.manifest”> CACHE MANIFEST images/logo.png styles/screen.css styles/print.css { Agile Development } { Ruby on Rails } { Java / J2EE }
    18. 18. HTML 5 & CSS 3 Geolocation Find current coordinates of user Track user navigator.geolocation.getCurrentPosition(show_on_map, handle_error, {enableHighAccuracy: true}); { Agile Development } { Ruby on Rails } { Java / J2EE }
    19. 19. HTML 5 & CSS 3 Web Sockets Bi-directional full-duplex communication Increase scalability Less connections No need for Comet-like hacks http://pusherapp.com { Agile Development } { Ruby on Rails } { Java / J2EE }
    20. 20. HTML 5 & CSS 3 Web Workers Background JavaScript threads Can not manipulate DOM OS-level threads Pass data through serialized objects { Agile Development } { Ruby on Rails } { Java / J2EE }
    21. 21. HTML 5 & CSS 3 Microdata Additional semantics Scoped name/value pairs Custom vocabularies Scopes SEO <section itemscope itemtype=”http://example.org/Person”> <h1 itemprop=”name”>Kevin van Dijk</h1> <img itemprop=”picture” src=”picture.jpg” alt=”Me”> </section> { Agile Development } { Ruby on Rails } { Java / J2EE }
    22. 22. HTML 5 & CSS 3 CSS 3 Features Opacity RGBA & HSL/A Color New Background Properties New Border Properties Shadows New Text Properties Fonts Transformations 3D Selectors { Agile Development } { Ruby on Rails } { Java / J2EE }
    23. 23. HTML 5 & CSS 3 Opacity Adjust opacity of an element Value between 0.0 and 1.0 Not supported in IE div { background: #000; opacity: 0.6; } { Agile Development } { Ruby on Rails } { Java / J2EE }
    24. 24. HTML 5 & CSS 3 RGBA & HSL/A Color RGB with alpha value Hue, Saturation, Lightness with alpha value Alpha value between 0.0 and 1.0 div { background: rgba(118, 187, 78, 0.4) } div { background: hsla(40%, 95%, 95%, 0.5) } { Agile Development } { Ruby on Rails } { Java / J2EE }
    25. 25. HTML 5 & CSS 3 Backgrounds Background-size Multiple background images div { background-size: 160px 98px; width: 500px; height: 98px; } div { background: url(left.png) top left no-repeat, background: url(right.png) top right no-repeat } { Agile Development } { Ruby on Rails } { Java / J2EE }
    26. 26. HTML 5 & CSS 3 Borders Border image Multiple border colors Border radius div { border-radius: 10px; } { Agile Development } { Ruby on Rails } { Java / J2EE }
    27. 27. HTML 5 & CSS 3 Text Text overflow Text shadow Column width Column gap article { column-width: 100px; column-gap: 30px; } Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices tellus nec nibh adipiscing elit. Morbi ultrices tellus nec nibh suscipit sit amet egestas nibh mollis. suscipit sit amet egestas nibh mollis. Pellentesque eget lectus mauris. Nunc Pellentesque eget lectus mauris. Nunc venenatis risus in magna ullamcorper vitae venenatis risus in magna ullamcorper vitae mattis mauris ultricies. Praesent nisl eros, mattis mauris ultricies. Praesent nisl eros, adipiscing in varius tempor, eleifend quis dolor. adipiscing in varius tempor, eleifend quis dolor. Suspendisse at tellus eget erat sollicitudin Suspendisse at tellus eget erat sollicitudin iaculis at quis eros. Fusce nibh neque, porttitor iaculis at quis eros. Fusce nibh neque, porttitor vitae condimentum ac, condimentum id lacus. vitae condimentum ac, condimentum id lacus. Fusce lorem leo, scelerisque a mollis eget, Fusce lorem leo, scelerisque a mollis eget, convallis nec arcu. Praesent tincidunt est in arcu convallis nec arcu. Praesent tincidunt est in arcu scelerisque mollis. Integer et turpis velit. scelerisque mollis. Integer et turpis velit. Pellentesque malesuada, elit id mattis varius, Pellentesque malesuada, elit id mattis varius, dolor lorem imperdiet tortor, vulputate aliquam dolor lorem imperdiet tortor, vulputate aliquam tellus risus vitae felis. Vestibulum egestas tellus risus vitae felis. Vestibulum egestas gravida enim, ac tincidunt leo convallis in. Nam gravida enim, ac tincidunt leo convallis in. Nam { Agile Development } { Ruby on Rails } { Java / J2EE }
    28. 28. HTML 5 & CSS 3 Fonts @font-face Local or URL TIF and OTF EOT in IE4+ No need for SIFR or Cufon anymore http://typekit.com/ { Agile Development } { Ruby on Rails } { Java / J2EE }
    29. 29. HTML 5 & CSS 3 Transformations Rotate Scale Skew Translate div { transform: rotate(45deg); } { Agile Development } { Ruby on Rails } { Java / J2EE }
    30. 30. HTML 5 & CSS 3 Transitions Animate properties Configurable duration /* Fade out on hover */ div { opacity: 1; -webkit-transition: opacity 1s linear; } div:hover { opacity: 0; } { Agile Development } { Ruby on Rails } { Java / J2EE }
    31. 31. HTML 5 & CSS 3 Selectors Already in use by many JS libraries e[attribute], e[attribute=value] :first-child, :last-child, :link, :visited :nth-child(), :only-child, :after, :before :first-of-type, :last-of-type :only-of-type :empty, :not() :target, :enabled, :disabled, :checked { Agile Development } { Ruby on Rails } { Java / J2EE }
    32. 32. HTML 5 & CSS 3 Media Queries Target specific range of devices Does not validate .blog { font-size: 1.1em; line-height: 1.6em; color: #fff; width: 100%; } @media all and (min-width: 20em) { .blog { font-size: 1.1em; line-height: 1.6em; color: #fff; width: 100%; } } { Agile Development } { Ruby on Rails } { Java / J2EE }
    33. 33. HTML 5 & CSS 3 3D Only in Chrome & Safari Perspective Distance in pixels Rotate3D Rotate three-dimensional Translate3D Move along three axes Scale3D Scale in three dimensions { Agile Development } { Ruby on Rails } { Java / J2EE }
    34. 34. HTML 5 & CSS 3 When to Use? IE 7 IE 8 A better future ahead IE 9 Firefox 3.5 Firefox 3.7 Opera 10.50 Safari 4 Chrome 4 http://html5readiness.com { Agile Development } { Ruby on Rails } { Java / J2EE }
    35. 35. HTML 5 & CSS 3 When to Use? A better future ahead http://caniuse.com { Agile Development } { Ruby on Rails } { Java / J2EE }
    36. 36. HTML 5 & CSS 3 Progressive Enhancement Websites do not have to look the same in every browser Progressive Enhancement != Graceful Degradation Do not lock anybody out (not even IE 6) http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/ Courtesy of alistapart.com { Agile Development } { Ruby on Rails } { Java / J2EE }
    37. 37. HTML 5 & CSS 3 Modernizr Test-Driven progressive enhancement Detect support for CSS 3 properties Feature detection Add support for HTML 5 elements { Agile Development } { Ruby on Rails } { Java / J2EE }
    38. 38. HTML 5 & CSS 3 Discussion !? { Agile Development } { Ruby on Rails } { Java / J2EE }
    39. 39. { Agile Development } { Ruby on Rails } { Java / J2EE }
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×