GDI Seattle - Intermediate HTML and CSS Class 3 Slides

INTERMEDIATE HTML AND CSSCLASS 3Intermediate HTML/CSS ~ Girl Develop It ~

WELCOME!Girl Develop It is here to provide affordable andaccessible programs to learn software throughmentorship and hands-on instruction.Some "rules"

We are here for you!Every question is importantHelp each otherHave fun

MICRODATA

MICRODATAMicro-what?

From the W3C spec:“Sometimes, it is desirable to annotatecontent with specific machine-readable

labels...”“Microdata allows nested groups of

namevalue pairs to be added todocuments, in parallel with the existing

content.”Microdata Overview

MICRODATASounds BORING

Why should I care?

MICRODATAWouldn't it be great if the search results for your

restaurant looked like this?

MICRODATAOr if search results for your book looked like this?

MICRODATAOr if search results for your recipe looked like this?

RICH SNIPPETS“The more information a search resultsnippet can provide, the easier it is forusers to decide whether that page is

relevant to their search.”Rich snippets

RICH SNIPPETS“With rich snippets, webmasters with

sites containing structuredcontent...can label their content to

make it clear that each labeled piece oftext represents a certain type of data:for example, a restaurant name, an

address, or a rating.”Rich snippets

MICRODATA STRUCTUREWe will add microdata to our favorite pizza restaurant

<div> L'Amourita Pizza Located at 123 Main St, Albuquerque, NM. Phone: 206-555-1234 <a href="http://pizza.com">http://pizza.com</a></div>

MICRODATA STRUCTUREWe need to define three things to add microdata to our

sites:Itemscope attributeItemtype attributeItemprop attribute

MICRODATA STRUCTUREItemscope

<div itemscope> L'Amourita Pizza Located at 123 Main St, Albuquerque, NM. Phone: 206-555-1234 <a href="http://pizza.com">http://pizza.com</a></div>

MICRODATA STRUCTUREItem scope

Sets the "scope" of what we are describing with themicrodata.

All elements nested inside the div with "itemscope" willadhere to the vocabulary we specify with "itemtype". (i.e.

person, place, recipe)

MICRODATA STRUCTUREItemtype

<div itemscope itemtype="http://schema.org/Organization"> L'Amourita Pizza Located at 123 Main St, Albuquerque, NM. Phone: 206-555-1234 <a href="http://pizza.com">http://pizza.com</a></div>

MICRODATA STRUCTUREItemtype

Points you to the place where a microdata type isdefined

Since we're defining a business, we want to point to thedefinition of an Organization

defines several type including http://schema.orgOrganization

MICRODATA STRUCTUREItemprop

<div itemscope itemtype ="http://schema.org/Organization"> <span itemprop ="name">L'Amourita Pizza</span> Located at 123 Main St, Albuquerque, NM. Phone: <span itemprop ="tel">206-555-1234</span> <a href="http://pizza.com" itemprop ="url">http://pizza.com</a></div>

MICRODATA STRUCTUREItemprop

Itemprop is a property of your Item's type. The availableproperties are listed on the relevant page at

For our Organization example, the available includeare: name, url, address, telephone, and location. For the

full list:

http://schema.org/docs/schemas

http://schema.org/Organization

MICRODATA STRUCTUREItemprop

Itemprop is a property of your Item's type. The availableproperties are listed on the relevant page at

Here are properties of a http://schema.org/docs/schemas

Recipe

NESTED MICRODATAWe have specified ALMOST everything for our

Organization, but we still don't have entries for theaddress

Addresses are their own unique itemtype. So we needto nest the address information inside a new element

with the itemtype set to Address

<div itemscope itemtype ="http://schema.org/Organization"> <span itemprop ="name">L'Amourita Pizza</span> Located at 123 Main St, Albuquerque, NM. Phone: <span itemprop ="tel">206-555-1234</span> <a href="http://pizza.com" itemprop ="url">http://pizza.com</a> </div>

NESTED MICRODATA <div itemscope itemtype ="http://schema.org/Organization"> <span itemprop ="name">L'Amourita Pizza</span> Located at <span itemprop ="address" itemscope itemtype ="http://schema.org/PostalAddress"> <span itemprop ="streetAddress">123 Main St</span>, <span itemprop ="addressLocality">Albuquerque</span>, <span itemprop ="addressRegion">NM</span>. </span> Phone: <span itemprop ="tel">206-555-1234</span> <a href="http://pizza.com" itemprop ="url">http://pizza.com</a> </div>

MICRODATA RESOURCESTo make sure google sees your page the way you expect (interms of the microdata), use this tool:

Getting started guide: Tutorial on microdata from Mark Pilgrim:

Google overview of using Microdata for an Organization:

http://www.google.com/webmasters/tools/richsnippetshttp://schema.org/docs/gs.html>

http://diveintohtml5.info/extensibility.html

http://www.google.com/support/webmasters/bin/answer.py?answer=146861

LET'S DEVELOP ITEnhance our Women in Computing web site to use

HTML5 & CSS3

Use the schema to describe the women in tech.Feel free to add more info than we have to use more

itemprops!

Person

MULTIMEDIAAudio and video are first class citizens in HTML5

MULTIMEDIAUseful as a replacement for flash on mobile devices

Flash makes mobile devices sad :(

VIDEOThe Dream

The video element was created to make it unnecessaryto use plugins to display video content on your pages.The idea is to simplify and streamline video content

delivery.<video src="demo.mp4" type="video/mp4"> Your browser does not support the video element.</video>

VIDEOThe Reality

If you want to support ALL browsers and ALL videoencodings, you will still need a plugin as a last-resort fall

back plan.This is because not all browsers read video the sameway, and older browsers (like IE<9) don't support the

video element at all.

VIDEOThe Reality

<video id="movie" width="320" height="240" preload controls> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="pr6.mp4" /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' /> <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> </object></video><script>

</script>

var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } });

AUDIO<audio controls><source src="music.mp3" type="audio/mpeg"/><source src="music.aac" type="audio/mp4" /><source src="music.ogg" type="audio/ogg"/><!-- now include flash fall back --></audio>

MULTIMEDIAIf the dream is still far from reality, what's a dev to do?The good news is, devs are working on it all the time

Video on the WebMiro Video Converter

Native Audio in the Browser

CANVASEnvironment for creating dynamic imagesCanvas element + javascript = dynamic content!

CANVASAnimated Factorizationhttp://bomomo.com/http://canvasrider.com/http://lights.elliegoulding.com/Codepen.io

CANVASThe first step is to add a canvas element to your HTML.

Make sure you give it an id:

Unfortunately, everything else (all the cool stuff) isactually in JavaScript and outside the scope of this class

<canvas id="myCanvas" width="400" height="400"> Your browser doesn’t support Canvas.</canvas>

DEVICE ACCESSRich, device-aware features and experiences

GEOLOCATIONBrowsers using HTML5 can locate you through IPaddresses, WiFi connections, and GPS towers (for

mobile phones and tablets)But all the cool interactive stuff is, once again, done in

JavaScriptYou didn't expect HTML and CSS to do EVERYTHING,

did you?

Google Map

STORAGEstorage

storage-events

STORAGEYou can use HTML5 Web Storage to persist simpledata.Two kinds of HTML5 Web Storage:

SessionStorage for per-window dataLocalStorage for global, persistent data (stored tohard drive through the browser)

SESSIONSTORAGEEver accidentally bought two of the same kind ofticket, because you were shopping the same site inmultiple windows/tabs?Session Storage provides a good way to prevent this.Session Storage is not saved to the user’s hard driveIt only lasts for the time that a browser window or tabis open and viewing a specific site.

LOCALSTORAGEWith Local Storage, we can save data to the user’scomputer, via the browser.When a user revisits a site in the same browser theyfirst visited in, any data saved to Local Storage can beretrieved.Local Storage is browser-specific: Information yousave while browsing with Firefox will NOT be availableto Safari.

QUESTIONS?

?