Download - Practical HTML5/CSS3 for Nonprofits

Practical HTML5/CSS3for Nonprofits(or "How to Party Like it's 2011 When it's Really Still 1999")

#11NTChtml5

Tim Arnold, Beaconfire

Session EvaluationEach entry via text or web is a chance to win

great NTEN prizes throughout the day!

Session Evaluations Powered By:

TEXTText 11NTChtml5 to

69866.

ONLINEUse 11NTChtml5 at

http://nten.org/ntc/eval

HTMLJust the facts

HTML + CSS + JAVASCRIPTThings get fancy.

HTML5Evolution

Other tired old TOTALLY 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”>


<p>Stuff</p>

</div>

</div>

<div id=“footer”>

Copyright My Organization

</div>

</div>

</body>

</html>


<html>

<head>




</head>

<body>

<section>

<header>

<nav><ul>

<li>home</li>

<li>about us</li>

</nav> </ul>

</header>

<section>

<article>


<p>Stuff</p>

</article>

<article>


<p>Stuff</p>

</article>

</section>

<footer>


</footer>

</div>

</body>

</html>


<html>

<head>




</head>

<body>

<section>

<header>

<nav> <ul>

<li>home</li>

<li>about us</li>

</nav> </ul>

</header>

<section>

<article>


<p>Stuff</p>

</article>

<article>


<p>Stuff</p>

</article>

</section>

<footer>


</footer>

</section>

</body>

</html>

<!DOCTYPE html>

<html>

<head>


<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>


<p>Stuff</p>

</article>

<article>


<p>Stuff</p>

</article>

</section>

<footer>


</footer>

</section>

</body>

</html>

OTHER “NEW” HTML5 TAGS <aside> <figure> <mark>

<time> <meter>

value min low high max optimum

<progress>

<canvas> <video> <audio>

<b> <i>

You’reWelcome

NEW FORM FEATURES

<input type="number">

<input type="range">

<input type="search">

<input type="text" list="mydata”>

<datalist id="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


Completion Date: July 2014Last Call: May 22, 2011


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)

http://playground.html5rocks.com/

MODERNIZR AND YEPNOPE

<html class=“no-js”>

<script src=“modernizr.js”/>

http://blogs.sitepoint.com/2011/03/08/regressive-enhancement-with-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);

}


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

}


yepnope({ test : Modernizr.geolocation, yep : 'normal.js',nope : ['polyfill.js', 'wrapper.js']

});


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

https://github.com/ryanseddon/H5F/blob/master/readme.md


http://modernizr.github.com/Modernizr/2.0-beta/

Bundled togetherModernizr: 3.7kb gzippedYepNope: 1.6kb

http://modernizr.github.com/Modernizr/2.0-beta/

RESOURCES http://html5doctor.com http://html5reset.org http://playground.html5rocks.com http://modernizr.github.com/Modernizr/2.0-be

ta http://yepnopejs.com

[email protected] | http://beaconfire.com/blog | @zdislaw

ARTICLES http://dev.opera.com/articles/view/new-form-f

eatures-in-html5 http://dev.opera.com/articles/view/custom-ht

ml5-video-player-with-css3-and-jquery http://blogs.sitepoint.com/2011/03/08/regress

ive-enhancement-with-modernizr-and-yepnope/

http://html5doctor.com/

http://html5reset.org/

http://playground.html5rocks.com/

http://modernizr.github.com/Modernizr/2.0-beta

http://modernizr.github.com/Modernizr/2.0-beta

http://yepnopejs.com/

mailto:[email protected]

http://beaconfire.com/blog

http://dev.opera.com/articles/view/new-form-features-in-html5

http://dev.opera.com/articles/view/new-form-features-in-html5

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

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

http://blogs.sitepoint.com/2011/03/08/regressive-enhancement-with-modernizr-and-yepnope/



Session EvaluationEach entry via text or web is a chance to win

great NTEN prizes throughout the day!

Session Evaluations Powered By:

TEXTText 11NTChtml5 to

69866.

ONLINEUse 11NTChtml5 at

http://nten.org/ntc/eval