gdi seattle - intermediate html and css class 3 slides
DESCRIPTION
TRANSCRIPT
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
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?
?