Practical HTML5/CSS3 for Nonprofits

Practical HTML5/CSS3 for Nonprofits (or "How to Party Like it's 2011 When it's Really Still 1999") #11NTChtml5 Tim Arnold, Beaconfire

Session Evaluation Each entry via text or web is a chance to win great NTEN prizes throughout the day! TEXT Text 11NTChtml5 to 69866. ONLINE Use 11NTChtml5 at http://nten.org/ntc/eval Session Evaluations Powered By:

HTML + CSS + JavaScript Things get fancy.

Other tired oldTOTALLY AWESOME catchphrases: AJAX Web 2.0 SEO B2B DHTML *

*HTML5 no longer actually exists. Damn, that was fast. “…the term is now basically being used to mean anything Web-standards-related, so it's time to move on!” - Ian Hickson, Jan 19, 2011, WHATWG blog

“…because people seem to like easy-to-pronounce acronyms and cute logos, I proposed NEWT as a tongue-in-cheek way to highlight the jargon abuse I see happening.” - Bruce Lawson, Opera

HTML Tags <h1></h1> <h2></h2> <p></p> <a></a> <strong></strong> <em></em> <ul> <li></li> <li></li> </ul>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Most Sites Today</title> <script type="text/javascript" src=“scripts.js“></script> <link type="text/css“ href=“styles.css” media=“all" rel="stylesheet“/> </head> <body> <div id=“container”> <div id=“header”> <ul id=“nav”> <li>home</li> <li>about us</li> </ul> </div> <div id=“content”> <div class=“post”> <h1>Very Intersting Title</h1> <p>Stuff</p> </div> <div class=“post”> <h1>Very Intersting Title</h1> <p>Stuff</p> </div> </div> <div id=“footer”> Copyright My Organization </div> </div> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Most Sites Today</title> <script type="text/javascript" src=“scripts.js“></script> <link type="text/css“ href=“styles.css” media=“all" rel="stylesheet“/> </head> <body> <section> <header> <nav><ul> <li>home</li> <li>about us</li> </nav> </ul> </header> <section> <article> <h1>Very Intersting Title</h1> <p>Stuff</p> </article> <article> <h1>Very Intersting Title</h1> <p>Stuff</p> </article> </section> <footer> Copyright My Organization </footer> </div> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Most Sites Today</title> <script type="text/javascript" src=“scripts.js“></script> <link type="text/css“ href=“styles.css” media=“all" rel="stylesheet“/> </head> <body> <section> <header> <nav> <ul> <li>home</li> <li>about us</li> </nav> </ul> </header> <section> <article> <h1>Very Intersting Title</h1> <p>Stuff</p> </article> <article> <h1>Very Intersting Title</h1> <p>Stuff</p> </article> </section> <footer> Copyright My Organization </footer> </section> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Most Sites Today</title> <script type="text/javascript"src=“scripts.js“></script> <link type="text/css“href=“styles.css” media=“all" rel="stylesheet“/> </head> <body> <section> <header> <nav> <ul> <li>home</li> <li>about us</li> </nav> </ul> </header> <section> <article> <h1>Very Intersting Title</h1> <p>Stuff</p> </article> <article> <h1>Very Intersting Title</h1> <p>Stuff</p> </article> </section> <footer> Copyright My Organization </footer> </section> </body> </html>

<!DOCTYPE html> <html> <head> <title>Most Sites Today</title> <script src=“scripts.js“></script> <link href=“styles.css” media=“all" rel="stylesheet“/> </head> <body> <section> <header> <nav> <ul> <li>home</li> <li>about us</li> </nav> </ul> </header> <section> <article> <h1>Very Intersting Title</h1> <p>Stuff</p> </article> <article> <h1>Very Intersting Title</h1> <p>Stuff</p> </article> </section> <footer> Copyright My Organization </footer> </section> </body> </html>

Other “New” HTML5 Tags You’re Welcome <aside> <figure> <mark> <time> <meter> value min low high max optimum <progress> <canvas> <video> <audio> <b> <i>

New Form Features <input type="number"> <input type="range"> <input type="search"> <input type="text" list="mydata”> <datalistid="mydata"> <option label="Mr" value="Mister"> <option label="Mrs" value="Mistress"> <option label="Ms" value="Miss"> </datalist>

New Form Features <input type=“color”>

New Form Features <input type=“date“> <input type=“time“>

New Form Features <input type="tel“> <input type="email“ placeholder=“Your Email Address”> <input type="url"> input[type=text]:focus:valid, input[type=email]:focus:valid, input[type=number]:focus:in-range { outline: 2px #0f0 solid; } input[type=text]:focus:invalid, input[type=email]:focus:invalid, input[type=number]:focus:out-of-range { outline: 2px #f00 solid; }

When Can You Start Using HTML5? Completion Date: July 2014

When Can You Start Using HTML5? Completion Date: July 2014 Last Call: May 22, 2011

When Can You Start Using HTML5? Whenever your target browsers support the bits you want to use.

Internet Explorer Supporting CSS3 & HTML5 Tim

How to make it all work Progressive (or regressive) enhancement JavaScript to “teach” the bad browsers <script>document.createElement("figure");</script> Test it out: http://playground.html5rocks.com Modernizr and a script loader (YepNope)

Modernizr and YepNope <html class=“no-js”> <script src=“modernizr.js”/> http://blogs.sitepoint.com/2011/03/08/regressive-enhancement-with-modernizr-and-yepnope

Modernizr and YepNope <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange draganddrop rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths”> http://blogs.sitepoint.com/2011/03/08/regressive-enhancement-with-modernizr-and-yepnope

Modernizr and YepNope .borderradius .box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .no-borderradius .box { border-radius: 5px; behavior: url(PIE.htc); }

Modernizr and YepNope if(!Modernizr.input.placeholder) { // custom placeholder code }

Modernizr and YepNope yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] });

Modernizr and YepNope yepnope({ test: Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && Modernizr.input.pattern, nope: 'h5f.min.js' }); https://github.com/ryanseddon/H5F/blob/master/readme.md

Modernizr and YepNope http://modernizr.github.com/Modernizr/2.0-beta/ Bundled together Modernizr: 3.7kb gzipped YepNope: 1.6kb

Resources http://html5doctor.com http://html5reset.org http://playground.html5rocks.com http://modernizr.github.com/Modernizr/2.0-beta http://yepnopejs.com Articles ,[object Object]

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery

Practical HTML5/CSS3 for Nonprofits

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Practical HTML5/CSS3 for Nonprofits

Notas do Editor