Your SlideShare is downloading. ×
0
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Practical HTML5/CSS3 for Nonprofits
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Practical HTML5/CSS3 for Nonprofits

1,594

Published on

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 …

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,594
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Web Hypertext Application Technology Working Group
  • If we need an over-all term to encompass DAP, CSS 3, HTML5, Geolocation, SVG, WebGL, then let’s call it the Open Web Stack
  • If we need an over-all term to encompass DAP, CSS 3, HTML5, Geolocation, SVG, WebGL, then let’s call it the Open Web Stack
  • Matt Cutts of Google says it’s OK
  • Mark: marked but not emphasizedMeter: numeric value in a specified range
  • Javascript is for presentational purposes only
  • CSS3 Pie http://css3pie.com/
  • Transcript

    • 1. Practical HTML5/CSS3<br />for Nonprofits<br />(or "How to Party Like it's 2011 When it's Really Still 1999") <br />#11NTChtml5<br />Tim Arnold, <br />Beaconfire Consulting<br />
    • 2. Session Evaluation<br />Each entry via text or web is a chance to win great NTEN prizes throughout the day! <br />TEXT<br />Text 11NTChtml5 to 69866.<br />ONLINE<br />Use 11NTChtml5 at <br />http://nten.org/ntc/eval<br />Session Evaluations <br />Powered By:<br />
    • 3. HTML<br />Just the facts<br />
    • 4. HTML + CSS + JavaScript<br />Things get fancy.<br />
    • 5. HTML5<br />Evolution<br />
    • 6. Other tired old catchphrases:<br />AJAX Web 2.0 SEO B2B DHTML<br />*<br />
    • 7. *HTML5 no longer actually exists.<br />Damn, that was fast.<br />“…the term is now basically being used to mean anything Web-standards-related, so it's time to move on!”<br />- Ian Hickson, Jan 19, 2011, WHATWG blog<br />
    • 8. “…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.”<br />- Bruce Lawson, Opera<br />
    • 9. “…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.”<br />- Bruce Lawson, Opera<br />
    • 10. HTML Tags<br /><h1></h1><br /><h2></h2><br /><p></p><br /><a></a><br /><strong></strong><br /><em></em><br /><ul><br /> <li></li><br /> <li></li><br /></ul><br />
    • 11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html><br /> <head><br /> <title>Most Sites Today</title><br /> <script type="text/javascript" src=“scripts.js“></script> <br /> <link type="text/css“ href=“styles.css” media=“all" rel="stylesheet“/> <br /> </head><br /> <body><br /> <div id=“container”><br /> <div id=“header”><br /> <ul id=“nav”><br /> <li>home</li><br /> <li>about us</li><br /> </ul><br /> </div><br /> <div id=“content”><br /> <div class=“post”><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </div><br /> <div class=“post”><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </div><br /> </div><br /> <div id=“footer”><br /> Copyright My Organization<br /> </div><br /> </div><br /> </body><br /></html><br />
    • 12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html><br /> <head><br /> <title>Most Sites Today</title><br /> <script type="text/javascript" src=“scripts.js“></script> <br /> <link type="text/css“ href=“styles.css” media=“all" rel="stylesheet“/> <br /> </head><br /> <body><br /><div id=“container”><br /><div id=“header”><br /><ul id=“nav”><br /> <li>home</li><br /> <li>about us</li><br /> </ul><br /> </div><br /><div id=“content”><br /><div class=“post”><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </div><br /><div class=“post”><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </div><br /> </div><br /><div id=“footer”><br /> Copyright My Organization<br /> </div><br /> </div><br /> </body><br /></html><br />
    • 13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html><br /> <head><br /> <title>Most Sites Today</title><br /> <script type="text/javascript" src=“scripts.js“></script> <br /> <link type="text/css“ href=“styles.css” media=“all" rel="stylesheet“/> <br /> </head><br /> <body><br /> <div id=“container”><br /><header><br /><nav><ul><br /> <li>home</li><br /> <li>about us</li><br /> </nav> </ul><br /> </header><br /><section><br /><article><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /><article><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> </section><br /><footer><br /> Copyright My Organization<br /> </footer><br /> </div><br /> </body><br /></html><br />
    • 14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html><br /> <head><br /> <title>Most Sites Today</title><br /> <script type="text/javascript" src=“scripts.js“></script> <br /> <link type="text/css“ href=“styles.css” media=“all" rel="stylesheet“/> <br /> </head><br /> <body><br /><section><br /> <header><br /> <nav> <ul><br /> <li>home</li><br /> <li>about us</li><br /> </nav> </ul><br /> </header><br /><section><br /> <article><br /><h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> <article><br /><h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> </section><br /> <footer><br /> Copyright My Organization<br /> </footer><br /> </section><br /> </body><br /></html><br />
    • 15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html><br /> <head><br /> <title>Most Sites Today</title><br /> <script type="text/javascript"src=“scripts.js“></script> <br /> <link type="text/css“href=“styles.css” media=“all" rel="stylesheet“/> <br /> </head><br /> <body><br /> <section><br /> <header><br /> <nav> <ul><br /> <li>home</li><br /> <li>about us</li><br /> </nav> </ul><br /> </header><br /> <section><br /> <article><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> <article><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> </section><br /> <footer><br /> Copyright My Organization<br /> </footer><br /> </section><br /> </body><br /></html><br />
    • 16. <!DOCTYPE html> <br /><html><br /> <head><br /> <title>Most Sites Today</title><br /> <script src=“scripts.js“></script> <br /> <link href=“styles.css” media=“all" rel="stylesheet“/> <br /> </head><br /> <body><br /> <section><br /> <header><br /> <nav> <ul><br /> <li>home</li><br /> <li>about us</li><br /> </nav> </ul><br /> </header><br /> <section><br /> <article><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> <article><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> </section><br /> <footer><br /> Copyright My Organization<br /> </footer><br /> </section><br /> </body><br /></html><br />
    • 17. <!DOCTYPE html> <br /><html><br /> <head><br /> <title>Most Sites Today</title><br /> <script src=“scripts.js“></script> <br /> <link href=“styles.css” media=“all" rel="stylesheet“/> <br /> </head><br /> <body><br /> <section><br /> <header><br /> <nav> <ul><br /> <li>home</li><br /> <li>about us</li><br /> </nav> </ul><br /> </header><br /> <section><br /> <article><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> <article><br /> <h1>Very Intersting Title</h1><br /> <p>Stuff</p><br /> </article><br /> </section><br /> <footer><br /> Copyright My Organization<br /> </footer><br /> </section><br /> </body><br /></html><br />
    • 18. Other New HTML5 Tags<br />You’re<br />Welcome<br /><aside><br /><figure><br /><mark><br /><time><br /><meter><br />value <br />min <br />low <br />high <br />max <br />optimum <br /><progress><br /><canvas><br /><video><br /><audio><br /><b><br /><i><br />
    • 19. New Form Features<br /><input type="number"><br /><input type="range"><br /><input type="search"><br /><input type="text" list="mydata”><br /><datalistid="mydata"><br /><option label="Mr" value="Mister"><br /><option label="Mrs" value="Mistress"><br /><option label="Ms" value="Miss"><br /></datalist><br />
    • 20. New Form Features<br /><input type=“color”><br />
    • 21. New Form Features<br /><input type=“date“><br /><input type=“time“><br />
    • 22. New Form Features<br /><input type="tel“><br /><input type="email"><br /><input type="url"><br />input[type=text]:focus:valid,<br />input[type=email]:focus:valid,<br />input[type=number]:focus:in-range { outline: 2px #0f0 solid; }<br />input[type=text]:focus:invalid,<br />input[type=email]:focus:invalid,<br />input[type=number]:focus:out-of-range { outline: 2px #f00 solid; }<br />
    • 23. When Can You Start Using HTML5?<br />Completion Date: July 2014<br />
    • 24. When Can You Start Using HTML5?<br />Completion Date: July 2014<br />Last Call: May 22, 2011<br />
    • 25. When Can You Start Using HTML5?<br />Whenever your target browsers support the bits you want to use.<br />
    • 26. How to make it all work<br />Progressive enhancement<br />JavaScript to “teach” the bad browsers<br /><script>document.createElement("figure");</script><br />Test it out: http://playground.html5rocks.com<br />
    • 27. CSS3<br />Again, with the progressive enhancement<br />JavaScript to the rescue (ish)<br />
    • 28. Internet Explorer<br />Supporting CSS<br />Tim<br />
    • 29. Resources <br />http://html5doctor.com<br />http://html5reset.org<br />http://playground.html5rocks.com<br />http://dev.opera.com/articles/view/new-form-features-in-html5<br />http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery<br />Me <br />tim.arnold@beaconfire.com<br />http://beaconfire.com/blog<br />@zdislaw<br />
    • 30. Session Evaluation<br />Each entry via text or web is a chance to win great NTEN prizes throughout the day! <br />TEXT<br />Text 11NTChtml5 to 69866.<br />ONLINE<br />Use 11NTChtml5 at <br />http://nten.org/ntc/eval<br />Session Evaluations <br />Powered By:<br />

    ×