HTML 5 & CSS 3

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 Custom data attributes { Agile Development } { Ruby on Rails } { Java / J2EE }

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 }

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 }

HTML 5 & CSS 3 Better Semantics Figure <figure> Group ﬁgures Captions Code blocks Essential content <figcaption> Nom Nom Nom { Agile Development } { Ruby on Rails } { Java / J2EE }

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 }

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 }

HTML 5 & CSS 3 Canvas Drawing API Create graphics on the ﬂy <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 }

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 }

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 }

HTML 5 & CSS 3 Forms Placeholders Autofocus Validations { Agile Development } { Ruby on Rails } { Java / J2EE }

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 }

HTML 5 & CSS 3 Media Elements WebM VP8 • Chrome • Firefox • IE 9 • Opera • Safari?? { Agile Development } { Ruby on Rails } { Java / J2EE }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

HTML 5 & CSS 3 Borders Border image Multiple border colors Border radius div { border-radius: 10px; } { Agile Development } { Ruby on Rails } { Java / J2EE }

HTML 5 & CSS 3 Text Text overﬂow 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 }

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 }

HTML 5 & CSS 3 Transformations Rotate Scale Skew Translate div { transform: rotate(45deg); } { Agile Development } { Ruby on Rails } { Java / J2EE }

HTML 5 & CSS 3 Transitions Animate properties Conﬁgurable duration /* Fade out on hover */ div { opacity: 1; -webkit-transition: opacity 1s linear; } div:hover { opacity: 0; } { Agile Development } { Ruby on Rails } { Java / J2EE }

HTML 5 & CSS 3 Selectors Already in use by many JS libraries e[attribute], e[attribute=value] :ﬁrst-child, :last-child, :link, :visited :nth-child(), :only-child, :after, :before :ﬁrst-of-type, :last-of-type :only-of-type :empty, :not() :target, :enabled, :disabled, :checked { Agile Development } { Ruby on Rails } { Java / J2EE }

HTML 5 & CSS 3 Media Queries Target speciﬁc 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 }

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 }

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 }

HTML 5 & CSS 3 When to Use? A better future ahead http://caniuse.com { Agile Development } { Ruby on Rails } { Java / J2EE }

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 }

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 }

HTML 5 & CSS 3 Discussion !? { Agile Development } { Ruby on Rails } { Java / J2EE }

{ Agile Development } { Ruby on Rails } { Java / J2EE }

http://www.slideshare.net	89
http://iwaysdeveloper.wordpress.com	37
http://www.linkedin.com	1

HTML 5 & CSS 3

by Kevin van Dijk on May 22, 2010

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 127

Statistics

HTML 5 & CSS 3 Presentation Transcript