practical html5+css3 stc

presented by [email protected] San Diego, California

PracticalHTML5& CSS3

for real writers

Shameless PlugFormerly HyperTrain, now davegash.comSan Diego based, but do mostly onsite work, plus lots of conferencesTrain & consult on user assistance, online publishing, and related technologies: HTML, CSS, XML/XSL, DITA, etc.Uncle Dave's motto: "Write any time."[email protected] used in this presentation available from me via emailLet's start with an audience poll…

Quick pollHow many people here are…

application developers?video producers?cartography experts?animation artists?audio engineers?living in your parents' basement?

Not many? Good!This session is for regular writers, content providers who write information meant to be displayed in browsers: you & me!

Session OverviewCurrent state of HTML5Dismiss some features we don't care aboutExplore some features we do care aboutLook at some examples, including an HTML4–to–HTML5 transition pageusing CSS3 (and CSS2)Summary, resources

Current state of HTML5 (1)

Expected development path2007: Initial Working Draft2009: Working Draft2011: Last Call Working Draft2012: Candidate Recommendation2013: Last Call for Review2014: Proposed Recommendation2015: HTML5.1 Candidate Recommendation2016: HTML5.2 Working Draft2017: ?

W3CTF?!?


Actually not as crazy at it soundsIt took us 20 years to get to HTML4HTML originally drafted in 1992

"Useful" ≠ "finished"Many HTML5 features are being supported pretty quickly by comparisonLots of HTML5 features are available now

Wait a minute…"HTML5 features", not just "HTML5"?


HTML5 isn't A thing, it's a BUNCH of thingsAudio, video, canvas, local storage, geolocation, new tags, web workers, web sockets, offline apps, messaging, various APIs…Some features are core HTML5, some are peripheral, some have separate specs, some were previously HTML5 but moved, etc.Mark Pilgrim, in HTML5 Up and Running, about splitting features into separate specs: "If that sounds like slicing a pie into more pieces to reduce the total number of calories… well, welcome to the wacky world of standards."

Meaning what?Lots of admittedly cool HTML5 features – many available now – are not very applicable to us as writers

Audio, video (eh, maybe)CanvasGeolocationWeb workersWeb socketsetc.

So we aren't going to look at those

So what is useful now?As writers, we focus on content

Content that makes sense and flows wellContent both writer & reader can understandContent that we can write easily now and that we (or someone else) can edit easily laterContent that is typable, chunkable, reusable

HTML5 has a set of elements for thatSemantic structural elements: article, aside, nav, hgroup, header, footer, section, figureMaybe not the most showy features, but certainly among the most useful

HTML4 semanticsShort conversation

Not much association between tags and meaningWe use <div>s for everything – standalone, nested, sequential – and style them heavilyHowever, <div>s provide no semantic info about their content"DIVitis" bloats pages without adding contextThey work now, but later you have no idea how your own content (let alone anyone else's) is structured

Typical HTML4 layoutHard to visualize how elements are used

<div>

<div>

<div>

<div>

<div>

HTML5 semanticsAll over the place

W3C took "pave the cowpaths" approach (desire lines, desire paths)http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths

Designed new elements to match IDs and classes mined from real-world sitesSo these HTML4 divs

Became these HTML5 elements

<div id="article">, <div id="header">, <div class="nav">, <div class="aside"> ...

<article>, <header>, <nav>, <aside> ...

Typical HTML5 layoutEasy to visualize how elements are used

Semantic structural tagsElement Description

<article> Contains discrete content meant to be distributable or reusable; used for standalone blocks, forum posts, or blog entries

<nav> Contains a significant collection of links to other pages or other parts of the current page; used for basic navigation

<aside> Contains content tangentially related to its surroundings; used for sidebars, pull quotes, related information links

<section> Contains generic content representing a thematic grouping; used to contain other elements, or if other semantic elements don't apply

<hgroup> Contains h1-h6 elements when a section has multiple levels, subheadings, alternative titles, or taglines

<header> Contains a standard HTML heading and, typically, extra content such as a TOC, search form, or logo

<footer> Contains a small chunk of information about content above it; may include copyrights, About or Contact links, etc.

Just one thing…"Using HTML5 tags will make my pages look great"… not!HTML5 elements don't DO anything

Elements that describe their content but don't cause any formatting are the essence of structured authoring

You still have to style the elementsBut you don't have to guess at relationshipsBoth content and formatting make more sense, are easier to reuse, read, and—more importantly—easier to write

Selected CSS3 featuresCSS3 also has many features that are:

Totally awesome (read: not normally useful)Browser-specific (read: not normally useful)

Let's not get crazy, stick with:CSS3 rounded cornersCSS3 text shadow & image shadowCSS3 link nudgingCSS2 drop capsCSS2 fixed-position DIV

Conversion exampleFrom this To this

"HTML5 The Missing Manual" by Matthew MacDonald, used by permissionhttp://oreilly.com/pub/a/oreilly/ask_tim/2001/codepolicy.html

<header>

<aside>

<nav><section>

<article>

<article>

<article>

<div>

<div>

<div>

<div><div><div><div><div>

First steps (1)

Simplify the DOCTYPECommon HTML4 (transitional)

HTML5

Catch-all code for IE8 & below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd">

<!DOCTYPE HTML>

First steps (2)

Clean the <head>HTML4

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="type=text/html; charset=UTF-8"><link rel="stylesheet" href="mystyles.css" type="text/css" /><script src="myscripts.js" type="text/javascript"></script></head>

<html><head><meta charset="UTF-8"><link rel="stylesheet" href="mystyles.css"/><script src="myscripts.js"></script></head>

Original HTMLMostly <div>s and classes<div class="Header"><h1>How the World Could End</h1><p class="Teaser">Scenarios that spell the end...</p><p class="Byline">by Ray N. Carnation</p></div>

<div class="Content"><p><span class="LeadIn">Right now</span>...<h2>Mayan Doomsday</h2><p>Skeptics suggest...<h2>Robot Takeover</h2><p>Not quite...<h2>Unexplained Singularity</h2><p>We don't...</div>

<div class="Footer"><p class="Disclaimer">These apocalyptic...<a href="AboutUs.html">About Us</a></div>

Original CSSNothing fancy.Header { background-color: #7695FE; border: thin #336699 solid; padding: 10px; margin: 10px; text-align: center;}.Content { font-size: medium; font-family: Cambria,Georgia, "Times New Roman", serif; padding-top: 20px; padding-bottom: 5px; padding-left: 50px; padding-right: 50px; line-height: 120%;}.Footer { text-align: center; font-size: x-small;}

What's wrong with that?The HTML doesn't tell us anything

No semantic info about <div>s' contentMust examine classes to understand structure

The CSS is non-specificMostly independent classes (".Header")Styles could be applied to any element

Content and formatting are separate BUT…No obvious relationship between themNo semantic clues to content's structure

The class names are mixed-case!

Revised HTML (1)

Mostly semantic elements<header class="siteheader"> <img src="site_logo.png" alt="Apocalypse Today"></header>

<aside class="navsidebar"> <nav> <h2>Articles</h2> <ul> <li><a href="howtheworld.htm">How The World... </ul> </nav> <section> <h2>About Us</h2> <p>Apocalypse Today... </section> <section> <img src="ad.jpg" alt="Luckies cigarette ad"> </section></aside>

Revised HTML (2)

Mostly semantic elementsMixed with "regular" elements<article class="content"> <header class="articleheader"> <h2>How the World Could End</h2> <h3>Scenarios that spell the end of life as we know</h3> <p class="byline">by Ray N. Carnation</p> </header>

<p><span class="leadin">Right now</span>...

<figure class="floatfigure"> <img src="human_skull.jpg" alt="Human skull" /> <figcaption>Will you...</figcaption> </figure>

<p>But don't...</article>

Revised HTML (3)

Mostly semantic elementsIntuitive, flexible nesting<aside class="navsidebar"> <nav> <h2>Articles</h2> <ul> <li><a href="howtheworld.htm">How The World... </ul> </nav></aside>. . .<article class="content"> <h3>Robot Takeover</h3> <p>Not quite... <aside class="pullquote"> <img src="quotes_start.png" alt="Quote"> We don't... <img src="quotes_end.png" alt="End quote"> </aside></article>

Revised CSS (1)

Similar to "old" CSSMore use of dependent classesGood use of descendant (contextual) selectorsaside.navsidebar { position: absolute; ...}

aside.navsidebar img { margin-top: 10px; ...}

section.content { margin-left: 240px; ...}

article h3 { font-size: x-large; ...}

Revised CSS (2)

Includes new goodiesText and image shadowsheader h1 { margin: 0px; color: white; font-size: xx-large; text-shadow: 2px 3px 4px #555555;}

figure.floatfigure { float: left; margin-left: 0px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; box-shadow: 6px 6px 5px #888888;}

Revised CSS (3)

And more new goodiesRounded cornersLink nudgingheader.siteheader { margin-left: 240px; . . . border-radius: 20px;}

aside.navsidebar li a { transition: padding-left 250ms ease-out;}

aside.navsidebar li a:hover { padding-left: 20px;}

Revised CSS (4)

Plus some old faves:first-letter for drop capsposition: fixed (<aside>) for non-scroll elementarticle p:first-letter { display: block; float: left; margin: 6px 2px 0px 0px; font-size: 200%; font-family: Times;}

aside.navsidebar { top: 0px; left: 0px; . . . font-size: small; position: fixed; }

Summary HTML5/CSS3 have lots of individual features, many ready for use nowBenefits can be seen immediately; it's not too soon to jump on bandwagonHTML5 isn't a panacea, but a significant, practical step forward for everyoneCSS3 isn't a whole new styling concept, but adds new functions that simplify codeRemember, learning new stuff is good for everyone: you, your users, your company

Resources "HTML5 Up and Running" by Mark Pilgrim

http://shop.oreilly.com/product/9780596806033.do

"HTML5 The Missing Manual" by Matthew MacDonald

http://www.amazon.com/HTML5-Missing-Manual-Manuals/dp/1449302394

"CSS3 The Missing Manual" by David Sawyer McFarland

http://www.amazon.com/CSS3-Missing-David-Sawyer-McFarland/dp/1449325947

"HTML5 & CSS3 Visual Quickstart Guide"http://www.amazon.com/HTML5-Visual-QuickStart-Guide-Edition/dp/0321719611

practical html5+css3 stc

Technology