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

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

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

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

5. HTML HTML5 2010 DEVELOPMENT TIMELINE TIMELINE 2005 2000 1995
1990
Tim Berners-Lee defines HTML
Basic tags for simple text and formatting.
HTML
DEVELOPMENT
1995 – HTML First standardized version of html; included many of tags we are familiar with today.
TIMELINE
1995
WHATWG formed Begins development of what will 　　　　 become HTML5
HTML Stabilized the syntax and structure of Web authoring; still the standard today.
2000
W3C Takes Over 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
XHTML HTML heavy focus on structure; not backwards compatible
2005
HTML5 use increases – Many big players, including Apple, Google & Microsoft, increase support of HTML5
HTML5
2010
TIMELINE
HTML5 Completed HTML5 specifications are
expected to be completed
What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

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

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

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

9. HTML 5 <meta charset="utf-8">
HTML <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML <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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24. <!-- 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

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

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

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

28. <!-- 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

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

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

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

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

33. 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
CSS
CSS3 Selectors, Namespaces
& Color modules become official
What the Heck is HTML5 & CSS3? An Introductory Workshop Library Technology Conference 2012 – March 14, 2012

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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