HTML5 and CSS3 Today

HTML5 & CSS3 Today Brian P. Hogan New Auburn Personal Computer Services LLC twitter: bphogan email: brianhogan at napcs.com

Questions? Discussion is encouraged. twitter: bphogan email: brianhogan at napcs.com

twitter: bphogan email: brianhogan at napcs.com

Don’t let that stop you! twitter: bphogan email: brianhogan at napcs.com

HTML5 •New Structural Markup Tags •New form types •Native audio and video support •In place editing •Client-side Storage •Ofﬂine support •Websockets •ARIA accessibility markup twitter: bphogan email: brianhogan at napcs.com

CSS3 •Better selectors for ﬁnding elements •Box shadows •Text shadows •Multicolumn layout •Content creation •Media Queries •ROUND CORNERS! twitter: bphogan email: brianhogan at napcs.com

What is accessibility? twitter: bphogan email: brianhogan at napcs.com

•Blind, Low vision, or colorblind •Hearing-impaired •Physically-impaired •Cognitively-impaired twitter: bphogan email: brianhogan at napcs.com

But Accessibility is also •People with Mobile devices •People with slow computers •People with slow Internet connections •Search engines! •People who hate / fear Javascript twitter: bphogan email: brianhogan at napcs.com

Progressive enhancement twitter: bphogan email: brianhogan at napcs.com

You should progressively enhance. Your apps should degrade gracefully. twitter: bphogan email: brianhogan at napcs.com

HTML5 and CSS3 help you do it right. twitter: bphogan email: brianhogan at napcs.com

To use HTML5 and CSS3 today, ensure your apps work without it. twitter: bphogan email: brianhogan at napcs.com

New Markup twitter: bphogan email: brianhogan at napcs.com

Divitis twitter: bphogan email: brianhogan at napcs.com

How we do it now <div class="posts"> <div class="post"> <div class="article"> <div class="article_header"> <h2>An Awesome Article</h2> <span class="author"> by Barney Stinson </span> </div>  <div class="article_body"> <p>Lorem ipsum dolor sit amet, consectetur...</p> </div>  </div> </div>  </div> <!-- posts> twitter: bphogan email: brianhogan at napcs.com

How we do it in HTML5 <section id="posts"> <article> <header> <h2>An Awesome Article</h2> <h4 class="author">by Barney Stinson</h4> </header> <section class="body"> <p>Lorem ipsum dolor sit amet, consectetur...</p> </section> </article> </section> twitter: bphogan email: brianhogan at napcs.com

IE support? document.createElement("nav"); document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("article"); twitter: bphogan email: brianhogan at napcs.com

htmlshiv http://code.google.com/p/html5shiv/  twitter: bphogan email: brianhogan at napcs.com

Custom Data Attributes twitter: bphogan email: brianhogan at napcs.com

Custom Data Attribtes <a href="help/holiday_pay.html" data-width="600" data-height="400" title="Holiday Pay" class="popup">Holiday pay</a> twitter: bphogan email: brianhogan at napcs.com

Custom Data Attributes $(function(){ $(".popup").click(function(event){ event.preventDefault(); var href = $(this).attr("href"); var width = $(this).attr("data-width"); var height = $(this).attr("data-height"); var popup = window.open (href,"popup", "height=" + height +",width=" + width + ""); }); }); twitter: bphogan email: brianhogan at napcs.com

Custom Data and AJAX twitter: bphogan email: brianhogan at napcs.com

<form method="post" action="/projects" data-remote="true"> <label for="project_name">Project name</label><br> <input id="project_name" name="project[name]" type="text" required> <input type="submit"> </form> twitter: bphogan email: brianhogan at napcs.com

submit with AJAX! $(function(){ $("form[data-remote=true]").submit(function(e){ e.preventDefault(); // prevent normal submit $.ajax({ type: "POST", url: ($(this).attr("action") + ".js"), dataType: 'json', data: $(this).serialize(), success: function(data){ $('#results').html(data["render"]); } }); }); }); twitter: bphogan email: brianhogan at napcs.com

Build Better Forms twitter: bphogan email: brianhogan at napcs.com

New inputs!!!!! twitter: bphogan email: brianhogan at napcs.com

email <input type="email" name="email" id="email"> twitter: bphogan email: brianhogan at napcs.com

url <input type="url" name="url" id="url"> twitter: bphogan email: brianhogan at napcs.com

spinbox (number) <input type="number" name="age" id="age"> twitter: bphogan email: brianhogan at napcs.com

Sliders (range) <input type="range" min="0" max="10"> twitter: bphogan email: brianhogan at napcs.com

date <input type="date" name="event_date" value="2010-03-01"> twitter: bphogan email: brianhogan at napcs.com

Use these now! twitter: bphogan email: brianhogan at napcs.com

jQuery, date type, and CSS3 function hasDateSupport(){ input = document.createElement("input"); input.setAttribute("type", "datetime"); return(input.type !== "text"); } if (!hasDateSupport()){ $('input[type=datetime]').datepicker(); } twitter: bphogan email: brianhogan at napcs.com

attribute selectors! input[type=date]{color: red; } $('input[type=date]); twitter: bphogan email: brianhogan at napcs.com

modernizr http://www.modernizr.com/ twitter: bphogan email: brianhogan at napcs.com

placeholder and autofocus twitter: bphogan email: brianhogan at napcs.com

Placeholder <label id='email'>Emaill</label> <input id='email' placeholder="username@google.com" type='email'> twitter: bphogan email: brianhogan at napcs.com

fallback support? swap value and placeholder on blur twitter: bphogan email: brianhogan at napcs.com

Detect and Use function hasPlaceholderSupport() { var i = document.createElement('input'); return 'placeholder' in i; } twitter: bphogan email: brianhogan at napcs.com

Autofocus <label id='email'>Emaill</label> <input id='email' autofocus type='email'> twitter: bphogan email: brianhogan at napcs.com

Autofocus function hasAutoFocusSupport() { var i = document.createElement('input'); return 'autofocus' in i; } twitter: bphogan email: brianhogan at napcs.com

Required ﬁelds and regex validation are coming. twitter: bphogan email: brianhogan at napcs.com

HTML5 Video twitter: bphogan email: brianhogan at napcs.com

video <video src="movie.m4v" controls="controls"> <p>Your browser does not support the video tag.</p> </video> twitter: bphogan email: brianhogan at napcs.com

To play video, you need a container and a codec. twitter: bphogan email: brianhogan at napcs.com

H264 vs Theora vs WebM twitter: bphogan email: brianhogan at napcs.com

Firefox only plays Theora and WebM twitter: bphogan email: brianhogan at napcs.com

Chrome plays all. Sometimes. twitter: bphogan email: brianhogan at napcs.com

Google, Apple, and Microsoft are H264 licensees twitter: bphogan email: brianhogan at napcs.com

Mozilla will support WebM. So will IE9. twitter: bphogan email: brianhogan at napcs.com

So will Youtube. twitter: bphogan email: brianhogan at napcs.com

So will Flash Player! twitter: bphogan email: brianhogan at napcs.com

Safari plays H264. So do all of Apple’s iThingies. twitter: bphogan email: brianhogan at napcs.com

Patent-free or not, content makers will not encode videos twice. twitter: bphogan email: brianhogan at napcs.com

CONTROVERSIAL TOPIC AHEAD! twitter: bphogan email: brianhogan at napcs.com

The Adult industry will decide the winner. twitter: bphogan email: brianhogan at napcs.com

They want iPad users. twitter: bphogan email: brianhogan at napcs.com

They’re providing H264 + HTML5 video. twitter: bphogan email: brianhogan at napcs.com

Also, H264 will remain royalty-free for free content. twitter: bphogan email: brianhogan at napcs.com

Fallback? Video For Everyone! http://camendesign.com/code/video_for_everybody twitter: bphogan email: brianhogan at napcs.com

HTML5 Audio twitter: bphogan email: brianhogan at napcs.com

<audio id="drums" controls="true"> <source src="sounds/ogg/drums.ogg" type="audio/ogg"> <source src="sounds/mp3/drums.mp3" type="audio/mpeg"> <a href="sounds/mp3/drums.mp3">Download drums.mp3</a> </audio> twitter: bphogan email: brianhogan at napcs.com

MP3 vs AAC vs Vorbis twitter: bphogan email: brianhogan at napcs.com

Why bother? twitter: bphogan email: brianhogan at napcs.com

CSS3 Columns! twitter: bphogan email: brianhogan at napcs.com

Got content? <div id="example"> <h1>Splitting an element into columns</h1> <div class="column"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p> <p>Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div> twitter: bphogan email: brianhogan at napcs.com

Just split it! .column { -moz-column-width: 200px; -webkit-column-width: 200px; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5; } twitter: bphogan email: brianhogan at napcs.com

Fallback support using jQuery Columnizer plugin. http://welcome.totheinter.net/columnizer-jquery-plugin/ http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/ twitter: bphogan email: brianhogan at napcs.com

CSS3 Pseudo Classes twitter: bphogan email: brianhogan at napcs.com

Pseudo class Description Usage :nth-of-type Finds all n elements of a certain type p:nth-of-type :rst_child Finds the rst child element p:rst-child :nth-child Finds the nth child element p:nth-child(odd) :last-child Finds the last child element p:last-child :nth-last-child Finds the nth child element counting backwards p:nth-last-child(2n+1) :rst_of_type Finds the rst element of the type p:rst-of-type :last-of-type Finds the last element of the certain type p:last-of-type twitter: bphogan email: brianhogan at napcs.com

Great for styling tables! twitter: bphogan email: brianhogan at napcs.com

ie-css3.js http://www.keithclark.co.uk/labs/ie-css3/ twitter: bphogan email: brianhogan at napcs.com

And now... the moment you’ve been waiting for... twitter: bphogan email: brianhogan at napcs.com

ROUNDED CORNERS! twitter: bphogan email: brianhogan at napcs.com

Rounding Text Fields input{ background-color: #fff; border: 1px solid #000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; twitter: bphogan email: brianhogan at napcs.com

Various jQuery plugins for fallbacks. twitter: bphogan email: brianhogan at napcs.com

Shadows twitter: bphogan email: brianhogan at napcs.com

Shadows on text h1{ text-shadow: 4px 4px 4px #ccc; } twitter: bphogan email: brianhogan at napcs.com

Shadows on boxes .infobox { -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; width: 300px; border: 1px solid #888; } twitter: bphogan email: brianhogan at napcs.com

:after twitter: bphogan email: brianhogan at napcs.com

Extract links in a print stylesheet a:link:after, a:visited:after { content: " (" attr(href) ") "; font-size: 90%; } twitter: bphogan email: brianhogan at napcs.com

In place editing twitter: bphogan email: brianhogan at napcs.com

Any element can be ediable <section class="editable" contenteditable="true"> <h2>Click to change me</h2> <p>This paragraph can be changed</p> <ol> <li>So can these list items</li> <li>and you can add more items</li> <li>after this one by pressing enter</li> </ol> <p>It's pretty neat stuff</p> </section> twitter: bphogan email: brianhogan at napcs.com

Fallback? Make a regular form. twitter: bphogan email: brianhogan at napcs.com

Local Storage twitter: bphogan email: brianhogan at napcs.com

Remember when cookies were awesome? twitter: bphogan email: brianhogan at napcs.com

Neither do I. twitter: bphogan email: brianhogan at napcs.com

localStorage.setItem("background_color", “#fff”); var bgcolor = localStorage.getItem("background_color"); twitter: bphogan email: brianhogan at napcs.com

Fallback? Detect and use cookies. twitter: bphogan email: brianhogan at napcs.com

On Webkit? Web SQL Storage twitter: bphogan email: brianhogan at napcs.com

Use SQL! db.transaction(function(tx) { tx.executeSql('SELECT id, title, note FROM notes', [], function(SQLTransaction, data){ for (var i = 0; i < data.rows.length; ++i) { var row = data.rows.item(i); var id = row['id']; var title = row['title']; addToNotesList(id, title); } }); }); twitter: bphogan email: brianhogan at napcs.com

Works on iOS, Android 2, Chrome, and Safari! twitter: bphogan email: brianhogan at napcs.com

Will never work in Firefox. twitter: bphogan email: brianhogan at napcs.com

...but twitter: bphogan email: brianhogan at napcs.com

HTML Ofﬂine! twitter: bphogan email: brianhogan at napcs.com

Create client-side apps with HTML5 <html manifest="notes.manifest"> CACHE MANIFEST # v = 1.0.0 /style.css /javascripts/notes.js /javascripts/jquery.min.js twitter: bphogan email: brianhogan at napcs.com

No need for the App Store! twitter: bphogan email: brianhogan at napcs.com

Media Queries twitter: bphogan email: brianhogan at napcs.com

Different presentations for different devices @media only screen and (max-device-width: 480px) { body{ width:460px; } section#sidebar, section#posts{ float: none; width: 100%; } } twitter: bphogan email: brianhogan at napcs.com

Works in IE9 now. twitter: bphogan email: brianhogan at napcs.com

Websockets twitter: bphogan email: brianhogan at napcs.com

Polling is costly. twitter: bphogan email: brianhogan at napcs.com

Websockets are true client/server. twitter: bphogan email: brianhogan at napcs.com

require 'rubygems' require 'web_socket' require 'json' class TimeServer < WebSocket::Server Websocket Server def on_connect puts "Connection Accepted" @timer = EM.add_periodic_timer(5, EM.Callback(self, :sync_time)) end def on_disconnect puts "Connection released" EM.cancel_timer @timer end def on_receive msg end def sync_time puts "Hi" send_message({ :time => Time.now }.to_json) end end EM.epoll = true if EM.epoll? EM.kqueue = true if EM.kqueue? EM.set_descriptor_table_size(10240) EM.run do EM.start_server "0.0.0.0", 8000, TimeServer end twitter: bphogan email: brianhogan at napcs.com

Talk to it with Javascript var webSocket = new WebSocket('ws://localhost:8000/time'); webSocket.onopen = function(event){ document.getElementById('time').innerHTML = 'waiting for socket'; }; webSocket.onmessage = function(event){ var object = JSON.parse(event.data); document.getElementById('time').innerHTML = object.time; }; webSocket.onclose = function(event){ document.getElementById('time').innerHTML = 'socket closed'; }; twitter: bphogan email: brianhogan at napcs.com

Older browsers? Flash Sockets http://github.com/gimite/web-socket-js twitter: bphogan email: brianhogan at napcs.com

ARIA twitter: bphogan email: brianhogan at napcs.com

Stuff updates on the screen all the time. twitter: bphogan email: brianhogan at napcs.com

updatable window <h3>Tasks</h3> <form id="task_form"> <label>Task <input type="text" id="task" name="task" value=""> </label> <input type="submit" value="Add"> </form> <ul aria-live="polite" id="tasks"> </ul> twitter: bphogan email: brianhogan at napcs.com

ARIA also deﬁnes roles for elements. twitter: bphogan email: brianhogan at napcs.com

Landmark Roles •banner •navigation •main •document •application •complementary •contentinfo •search twitter: bphogan email: brianhogan at napcs.com

Stuff You Must Do Now! twitter: bphogan email: brianhogan at napcs.com

•New Markup •Form ﬁelds •Autofocus •Placeholder text •ARIA roles •Local Storage •Websockets twitter: bphogan email: brianhogan at napcs.com

Rendera http://rendera.heroku.com/ twitter: bphogan email: brianhogan at napcs.com

Useful Links http://beyondhtml5andcss3.com/ http://whencaniuse.com http://quirksmode.org/ http://twitter.com/bphogan twitter: bphogan email: brianhogan at napcs.com

Thanks! twitter: bphogan email: brianhogan at napcs.com

HTML5 and CSS3 Today

by Brian Hogan on Nov 15, 2010

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics

HTML5 and CSS3 Today Presentation Transcript