Taking Control of User-generated Content

Taking Control of User-generated Content The Power of HTML5 and
CSS3 Cobey Potter Wellfire Interactive

User-generated content can be a pain in the Theon.

Users either: are perfect, spit out content too quickly, lacking
structure, or have all the time in the world to “beautify” their content.

WEBSITE STYLE GUIDES ARE EASILY IGNORED.

We finally have the tools to control them.

Become HTML5 in one easy step

Become HTML5 in one easy step <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">

Become HTML5 in one easy step <!DOCTYPE html>

New HTML5 Content Elements <article></article> for consumable content comments, blogposts,
whitepapers; anything that can stand on its own

New HTML5 Content Elements <section></section> for distinct parts of content
or areas on a page subsections in a whitepaper, a comment silo

New HTML5 Content Elements <aside></aside> content that pertains indirectly to
main content or to site on the whole callouts, related articles/pages, etc great for modules in a sidebar or footer

New HTML5 Content Elements <figure></figure> not necessarily a stand-in for
an image wrapper “optional” item that helps strengthen main content pullquotes, infographics, images

New HTML5 Content Elements <nav></nav> site or local/in-page navigation links
that could be considered for an aside are not <nav> items. links to external sites are not always <nav> items.

BUT I — MY <DIV>S

HTML5 (DOM) Outline Document Object Model has been updated... and
for the better. article, section, aside, and nav reset the Outline all headings (<h1>, <h2>, <h3>, etc) restart without detriment by search engines & accessibility readers

User-generated content can be contained users love using <h1>; the
bigger, the better! allows for multiple <h1> on a page eases editors following behind users and cleaning the content still results in a design/structure decision, but now we have options

Whats the support like? new elements are all legal in
any browser. for enabling native support in old browsers & checking out in the wild modernizr.com when should you use new elements? html5doctor.com bit.ly/trOtvq

One does not simply use HTML5 alone...

Time for my skills!?

CSS3 Magic? lots of new CSS3 functions to play around
with: border radius, gradients, box-shadows even state transitions and animations

CSS3 Selectors - Real Magic child selector: article > p
adjacent sibling: h1 + p general sibling: p ul available in Chrome, Safari, Firefox, Opera and yes, even IE7+ ~

CSS3 Selectors - Some math required nth-child / nth-last-child: ul
li:nth-child(2n+1){} first-of-type / last-of-type: dl dt:last-of-type {} nth-of-type / nth-last-of-type: dl dt:nth-of-type(odd) only-child / only-of-type: ul li:only-child available in IE9+, Chrome, Safari, Firefox, Opera * “type” refers to tag type, not class or ID

CSS3 Selectors - String matching equals: a[title=“Game of Thrones”] begins
with: a[href^=“http://”] ends with: a[href$=“.png”] contains: a[href*=“facebook”] space separated value: a[data-info =“stark”] available in IE7+ ~

User-generated content can be styled users generally get basic elements,
non-classed these selectors allow us to style based on position alone WARNING: “Keep Local.” ex: .user-gen ul li:only-child

Play in the sandbox twostepmedia.co.uk/cssselectors/ lea.verou.me/demos/nth.html

Now we have the weapons, the tools!

Thanks! Cobey Potter Wellfire Interactive @courcelan @wellfire [email protected] All Images
© HBO except Cat Helicopter Image used in part from Guardian UK

Taking Control of User-generated Content

Taking Control of User-generated Content

Cobey Potter

More Decks by Cobey Potter

Other Decks in Programming

Featured

Transcript