Post on 12-May-2015
description
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
“…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>
<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>
<!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 <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
WHEN CAN YOU START USING HTML5?
Completion Date: July 2014Last 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
<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
<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
MODERNIZR AND YEPNOPE
http://modernizr.github.com/Modernizr/2.0-beta/
Bundled togetherModernizr: 3.7kb gzippedYepNope: 1.6kb
RESOURCES http://html5doctor.com http://html5reset.org http://playground.html5rocks.com http://modernizr.github.com/Modernizr/2.0-be
ta http://yepnopejs.com
tim.arnold@beaconfire.com | 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/
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