Library Technology Conference 2012 – March 14, 2012 What the heck is HTML5 & CSS3? An Introductory Workshop Johan Oberg Digital Scholarship and Services Librarian, Macalester College Ron Joslin Technology Coordinator & Instruction Librarian, Macalester College Leslie Mollner Reference Librarian, Macalester College Library Technology Conference 2012 – March 14, 2012

over the next two hours… What we’ll be doing over the next two hours… Brief review the development of HTML & CSS about it) What is HTML5? (and why should we be excited about it) Build a basic web page w/ HTML5 [ HANDS-ON ACTIVITY ] What is CSS3? (and why should we be excited about it) Apply CSS3 to our web page [ HANDS-ON ACTIVITY ] Browser compatibility and other challenges Show some tools & examples What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Session Goals: Gain a better understanding of what HTML5 and CSS3 is and what to expect as it is more widely adopted Start you thinking about how it could affect web development at your library What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

HTML5 What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

HTML HTML5 2010 DEVELOPMENT TIMELINE TIMELINE 2005 2000 1995 1990 1991 - Tim Berners-Lee defines HTML Basic tags for simple text and formatting. HTML DEVELOPMENT 1995 – HTML 2.0 First standardized version of html; included many of tags we are familiar with today. TIMELINE 1995 WHATWG formed - 1996 Begins development of what will 　　　　 become HTML5 1999 - HTML 4.0 Stabilized the syntax and structure of Web authoring; still the standard today. 2000 W3C Takes Over - 1998 W3C adopts WHATWG work and changes its name to HTML5. 2000 – XHTML 1.0 Designed to move HTML toward XML; strict rules and focus on structural markup 2004 - XHTML 2.0 HTML heavy focus on structure; not backwards compatible 2005 HTML5 use increases – 2005-2010 Many big players, including Apple, Google & Microsoft, increase support of HTML5 HTML5 2010 TIMELINE HTML5 Completed- 2014 HTML5 specifications are expected to be completed What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

So what is HTML5? It is the newest specification for HTML: merges HTML 4, XHTML 1.0 and DOM Level 1 It’s simplified coding will make web pages better structured, more meaningful, and device neutral. It’s built-in APIs will change web pages into application development platforms. It’s still evolving – expected to be fully completed in 2014! Most experts agree, HTML5 should transform the web into a faster, leaner environment and better allow for the development of a richer user experience. What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Highlighting HTML5 Features Cleaner, more consistent and descriptive code Backwards compatibility Local storage Native support for video and audio Smarter web forms Canvas 2D drawing area Related applications What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Cleaner, More Consistent and Descriptive Code More semantic structural elements added RON (2:23pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

HTML 5 <meta charset="utf-8"> HTML 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 5 <meta charset="utf-8"> RON – Example: character set definition (2:24pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

RON - better structured, more semantic layout (2:25pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Backwards Compatibility Works with HMTL 4 and earlier, XHMTL 1 and earlier, with some deprecation of elements RON (2:27pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Apps can store info for offline use Local Storage Apps can store info for offline use RON (2:29pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Native Support for Video, Audio What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

RON (2:31pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Smarter Web Forms RON (2:33pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

RON (2:35pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Now, it’s time to build our HTML5 web page. RON (2:38pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Add HTML 5 Doctype & Charset & Some Structure What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

<meta charset="utf-8"> <title>HTML 5</title> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML 5</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="pagebody"> </div> </body> </html> What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Add A Header & Some Navigation LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

<h1>Prairie Land Library</h1> <nav> <ul> <header> <h1>Prairie Land Library</h1> <nav> <ul> <li>About Us</li> <li>Collections</li> <li>Services</li> </ul> </nav> </header> LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Add Some Articles, a Section & Video LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

<h1>A Library Quilt</h1> <section> <article> <h1>A Library Quilt</h1> <img id="feature_image_1" src="quilt.jpg"/> <p>Content Goes Here</p> </article> <!-- more code goes here --> </section> LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

<!-- code already here --> <article> <section> <!-- code already here --> <article> <h1>Meet A Librarian</h1> <video width="490" height="276” controls="controls"> <source src="beth.mp4" type="video mp4" /> </video> </article> </section> LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Add Some Asides & Audio What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

<h3>Today in the Library</h3> <aside> <h3>Today in the Library</h3> <h4>Library Marks Tennessee Williams’ Birthday, March 26</h4> <p>Content goes here</p> </aside> LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

<h3>Audio Mixer</h3> <aside> <h3>Audio Mixer</h3> <audio id="audio1" controls="controls" title="Guitar" preload="preload" loop="loop"> <source src="guitar.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio> <!-- more code goes here --> </aside> LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

<!-- code already here --> <aside> <!-- code already here --> <audio controls="controls" title="Cool Congas" preload="preload" loop="loop"> <source src="cool.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio> </aside> LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Finally, Add a Footer LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

<h2>About Us</h2> <h2>Collections</h2> <footer> <h2>About Us</h2> <h2>Collections</h2> <h2>Services</h2> </footer> RON (2:40pm) What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Try out your HTML5 page! LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

CSS3 What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

CSS CSS3 (& CSS4!) 2010 DEVELOPMENT TIMELINE TIMELINE 2005 2000 1995 1990 CSS 1994 – CHSS Precursor to CSS, developed by Håkon Wium Lie DEVELOPMENT 1996 – CSS Level 1 CSS Level 1 becomes official through the W3C, developed by Lie & Bert Bos TIMELINE 1995 1998 – CSS Level 2 CSS Level 2 becomes official CSS3 – 1998 CSS3 starts to be developed 2000 2000’s – CSS Level 2.1 CSS Level 2.1 developed through the 2000's CSS3 – 2000’s Work continues on CSS3 2005 CSS3 (& CSS4!) 2011 – CSS Level 2.1 CSS Level 2.1 becomes official LESLIE: Review of the development of CSS (5 minutes) CSS4 – 2009 CSS4 starts to be developed, Not supported by any browsers 2010 TIMELINE CSS3- 2011 CSS3 Selectors, Namespaces & Color modules become official What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

So what is CSS3? It is the newest standard for CSS that will take over for CSS 2.1 with backward compatibility Modules, modules, modules. CSS3 has been split up into sections for easier updating in smaller chunks, Each module adds functionality to, and replaces part of, the CSS 2.1 specification Some modules are already completed, SVG (Scalable Vector Graphics), Media Queries and Namespaces It’s still evolving – expected to be fully completed in ? LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Highlighting CSS3 Features Selectors Color Opacity Transparency Borders Backgrounds Gradients Media Queries Multi-Column Layout Shadows @Font-Face WOFF Transitions Transforms Animation Box Sizing LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Progressive Enhancement Graceful Degredation Progressive Enhancement VS. Graceful degradation and progressive enhancement both consider how well a site works in a variety of browsers on a variety of devices Graceful degradation focuses on building the website for the most advanced/capable browsers while older browsers just get by, often with poor performances Progressive enhancement focuses on content first, the main reason web sites are created. Style and interactivity are layered on to enhance the site but are not required aspects for the content to be available to the user LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Vendor-Specific Prefixes or Extensions Webkit - Safari, Chrome Moz - Firefox, Gecko Ms - Internet Explorer 0 - Opera Khtml - Konqueror What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Now, it’s time to make our HTML5 web page look pretty with CSS3. LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Background Gradient background: #275e87; /* fallback for older/unsupporting browsers */ background: -webkit-gradient(linear, 0 0, 0 70%, from(#31a7de), to(#bde1f1)); LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Border Radius border-top-left-radius:9px; border-top-right-radius:9px; LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Border Radius /* The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera */ border-radius:10px; LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Border Radius border-top-left-radius: 7px; border-top-right-radius: 7px; LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Color & Opacity background-color:#31a7de;color:#fff;opacity:0.7; What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Background Gradient background: #FFCCFF; background: -webkit-gradient(linear, 0 0, 0 70%, from(#ffaf4b), to(#ff920a)); LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Border Radius border-radius: 10px; LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Box Shadow box-shadow: 10px 10px 10px #000; LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Background Gradient background: #275e87; /* fallback for older/unsupporting browsers */ background: -webkit-gradient(linear, 0 0, 0 60%, from(#cfcfcf), to(#f6f6f6)); LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Border Radius border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Browser Support Tools What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Browser Support Tools HTML5 Test CSS3 Test When Can I Use... HTML5 Please HTML5 & CSS3 Readiness HTML5 & CSS3 Support LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

HTML5 Test LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

CSS3 Test LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

When Can I Use… LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

HTML5 Please What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

HTML5 & CSS3 Readiness What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

HTML5 & CSS3 Support LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Validator.nu LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

HTML5 & CSS3 Examples & Tools LESLIE What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

What the Heck is HTML5 & CSS3 What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

What the Heck is HTML5 & CSS3 What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

What the Heck is HTML5 & CSS3 What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

What the Heck is HTML5 & CSS3 What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Questions? What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

Thank You! What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012