HTML 5 & CSS 3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML 5 & CSS 3

on

  • 8,184 views

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

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

Statistics

Views

Total Views
8,184
Views on SlideShare
8,054
Embed Views
130

Actions

Likes
17
Downloads
312
Comments
2

4 Embeds 130

http://www.slideshare.net 89
http://iwaysdeveloper.wordpress.com 37
http://www.linkedin.com 3
http://pmomale-ld1 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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…
  • thank
    nice slide
    Are you sure you want to
    Your message goes here
    Processing…
  • nice overview.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

HTML 5 & CSS 3 Presentation Transcript

  • 1. HTML 5 & CSS 3 Kabisa Knowledge Session - May 21, 2010 { Agile Development } { Ruby on Rails } { Java / J2EE }
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. HTML 5 & CSS 3 Forms Placeholders Autofocus Validations { Agile Development } { Ruby on Rails } { Java / J2EE }
  • 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. HTML 5 & CSS 3 Media Elements WebM VP8 • Chrome • Firefox • IE 9 • Opera • Safari?? { Agile Development } { Ruby on Rails } { Java / J2EE }
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. HTML 5 & CSS 3 Borders Border image Multiple border colors Border radius div { border-radius: 10px; } { Agile Development } { Ruby on Rails } { Java / J2EE }
  • 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. 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. HTML 5 & CSS 3 Transformations Rotate Scale Skew Translate div { transform: rotate(45deg); } { Agile Development } { Ruby on Rails } { Java / J2EE }
  • 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. 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. 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. 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. 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. HTML 5 & CSS 3 When to Use? A better future ahead http://caniuse.com { Agile Development } { Ruby on Rails } { Java / J2EE }
  • 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. 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. HTML 5 & CSS 3 Discussion !? { Agile Development } { Ruby on Rails } { Java / J2EE }
  • 39. { Agile Development } { Ruby on Rails } { Java / J2EE }