Practical HTML5/CSS3 for Nonprofits
39
Practical HTML5/CSS3 for Nonprofits (or "How to Party Like it's 2011 When it's Really Still 1999") #11NTChtml5 Tim Arnold, Beaconfire
-
Upload
tim-arnold -
Category
Technology
-
view
1.603 -
download
2
description
In this session, you will get an overview of what HTML5 is, is not, and how CSS3 can help reduce development time while enabling you to do some pretty cool things with a lot less work. Heck, we'll probably even throw in some jQuery if you're lucky
Transcript of 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
“…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
[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/
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
![[Apostila] HTML5 e CSS3](https://static.fdocuments.in/doc/165x107/55cf99ab550346d0339e8e3f/apostila-html5-e-css3.jpg)
