INTERMEDIATE HTML AND CSS
CLASS 3Intermediate HTML/CSS ~ Girl Develop It ~
WELCOME!
Girl Develop It is here to provide affordable and
accessible programs to learn software through
mentorship and ha...
MICRODATA
MICRODATA
Micro-what?
From the W3C spec:
“Sometimes, it is desirable to annotate
content with specific machine-readable
la...
MICRODATA
Sounds BORING
Why should I care?
MICRODATA
Wouldn't it be great if the search results for your
restaurant looked like this?
MICRODATA
Or if search results for your book looked like this?
MICRODATA
Or if search results for your recipe looked like this?
RICH SNIPPETS
“The more information a search result
snippet can provide, the easier it is for
users to decide whether that...
RICH SNIPPETS
“With rich snippets, webmasters with
sites containing structured
content...can label their content to
make i...
MICRODATA STRUCTURE
We will add microdata to our favorite pizza restaurant
<div>
L'Amourita Pizza
Located at 123 Main St, ...
MICRODATA STRUCTURE
We need to define three things to add microdata to our
sites:
Itemscope attribute
Itemtype attribute
I...
MICRODATA STRUCTURE
Itemscope
<div itemscope>
L'Amourita Pizza
Located at 123 Main St, Albuquerque, NM.
Phone: 206-555-123...
MICRODATA STRUCTURE
Item scope
Sets the "scope" of what we are describing with the
microdata.
All elements nested inside t...
MICRODATA STRUCTURE
Itemtype
<div itemscope itemtype="http://schema.org/Organization">
L'Amourita Pizza
Located at 123 Mai...
MICRODATA STRUCTURE
Itemtype
Points you to the place where a microdata type is
defined
Since we're defining a business, we...
MICRODATA STRUCTURE
Itemprop
<div itemscope itemtype ="http://schema.org/Organization">
<span itemprop ="name">L'Amourita ...
MICRODATA STRUCTURE
Itemprop
Itemprop is a property of your Item's type. The available
properties are listed on the releva...
MICRODATA STRUCTURE
Itemprop
Itemprop is a property of your Item's type. The available
properties are listed on the releva...
NESTED MICRODATA
We have specified ALMOST everything for our
Organization, but we still don't have entries for the
address...
NESTED MICRODATA
<div itemscope itemtype ="http://schema.org/Organization">
<span itemprop ="name">L'Amourita Pizza</span>...
MICRODATA RESOURCES
To make sure google sees your page the way you expect
terms of the microdata), use this tool:
Getting ...
LET'S DEVELOP IT
Enhance 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
MULTIMEDIA
Audio and video are first class citizens in HTML5
MULTIMEDIA
Useful as a replacement for flash on mobile devices
Flash makes mobile devices sad :(
VIDEO
The Dream
The video element was created to make it unnecessary
to use plugins to display video content on your pages...
VIDEO
The Reality
If you want to support ALL browsers and ALL video
encodings, you will still need a plugin as a last-reso...
VIDEO
The Reality
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type='video/webm; co...
AUDIO
<audio controls>
<source src="music.mp3" type="audio/mpeg"/>
<source src="music.aac" type="audio/mp4" />
<source src...
MULTIMEDIA
If the dream is still far from reality, what's a dev to do?
The good news is, devs are working on it all the ti...
CANVAS
Environment for creating dynamic images
Canvas element + javascript = dynamic content!
CANVAS
Animated Factorization
http://bomomo.com/
http://canvasrider.com/
http://lights.elliegoulding.com/
Codepen.io
CANVAS
The first step is to add a canvas element to your HTML.
Make sure you give it an id:
Unfortunately, everything else...
DEVICE ACCESS
Rich, device-aware features and experiences
GEOLOCATION
Browsers using HTML5 can locate you through IP
addresses, WiFi connections, and GPS towers (for
mobile phones ...
STORAGE
storage
storage-events
STORAGE
You can use HTML5 Web Storage to persist simple
data.
Two kinds of HTML5 Web Storage:
SessionStorage for per-windo...
SESSIONSTORAGE
Ever accidentally bought two of the same kind of
ticket, because you were shopping the same site in
multipl...
LOCALSTORAGE
With Local Storage, we can save data to the user’s
computer, via the browser.
When a user revisits a site in ...
QUESTIONS?
?
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
Upcoming SlideShare
Loading in …5
×

GDI Seattle - Intermediate HTML and CSS Class 3 Slides

473
-1

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
473
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

GDI Seattle - Intermediate HTML and CSS Class 3 Slides

  1. 1. INTERMEDIATE HTML AND CSS CLASS 3Intermediate HTML/CSS ~ Girl Develop It ~
  2. 2. WELCOME! Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction. Some "rules" We are here for you! Every question is important Help each other Have fun
  3. 3. MICRODATA
  4. 4. MICRODATA Micro-what? From the W3C spec: “Sometimes, it is desirable to annotate content with specific machine-readable labels...” “Microdata allows nested groups of namevalue pairs to be added to documents, in parallel with the existing content.” Microdata Overview
  5. 5. MICRODATA Sounds BORING Why should I care?
  6. 6. MICRODATA Wouldn't it be great if the search results for your restaurant looked like this?
  7. 7. MICRODATA Or if search results for your book looked like this?
  8. 8. MICRODATA Or if search results for your recipe looked like this?
  9. 9. RICH SNIPPETS “The more information a search result snippet can provide, the easier it is for users to decide whether that page is relevant to their search.” Rich snippets
  10. 10. RICH SNIPPETS “With rich snippets, webmasters with sites containing structured content...can label their content to make it clear that each labeled piece of text represents a certain type of data: for example, a restaurant name, an address, or a rating.” Rich snippets
  11. 11. MICRODATA STRUCTURE We 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>
  12. 12. MICRODATA STRUCTURE We need to define three things to add microdata to our sites: Itemscope attribute Itemtype attribute Itemprop attribute
  13. 13. MICRODATA STRUCTURE Itemscope <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>
  14. 14. MICRODATA STRUCTURE Item scope Sets the "scope" of what we are describing with the microdata. All elements nested inside the div with "itemscope" will adhere to the vocabulary we specify with "itemtype". (i.e. person, place, recipe)
  15. 15. MICRODATA STRUCTURE Itemtype <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>
  16. 16. MICRODATA STRUCTURE Itemtype Points you to the place where a microdata type is defined Since we're defining a business, we want to point to the definition of an Organization defines several type includinghttp://schema.org Organization
  17. 17. MICRODATA STRUCTURE Itemprop <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>
  18. 18. MICRODATA STRUCTURE Itemprop Itemprop is a property of your Item's type. The available properties are listed on the relevant page at For our Organization example, the available include are: name, url, address, telephone, and location. For the full list: http://schema.org/docs/schemas http://schema.org/Organization
  19. 19. MICRODATA STRUCTURE Itemprop Itemprop is a property of your Item's type. The available properties are listed on the relevant page at Here are properties of a http://schema.org/docs/schemas Recipe
  20. 20. NESTED MICRODATA We have specified ALMOST everything for our Organization, but we still don't have entries for the address Addresses are their own unique itemtype. So we need to 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>
  21. 21. 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>
  22. 22. MICRODATA RESOURCES To make sure google sees your page the way you expect terms 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/richsnippets http://schema.org/docs/gs.html> http://diveintohtml5.info/extensibility.html http://www.google.com/support/webmasters/bin/answ answer=146861
  23. 23. LET'S DEVELOP IT Enhance our Women in Computing web site to use HTML5 & CSS3
  24. 24. Use the schema to describe the women in tech. Feel free to add more info than we have to use more itemprops! Person
  25. 25. MULTIMEDIA Audio and video are first class citizens in HTML5
  26. 26. MULTIMEDIA Useful as a replacement for flash on mobile devices Flash makes mobile devices sad :(
  27. 27. VIDEO The Dream The video element was created to make it unnecessary to 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>
  28. 28. VIDEO The Reality If you want to support ALL browsers and ALL video encodings, you will still need a plugin as a last-resort fall back plan. This is because not all browsers read video the same way, and older browsers (like IE<9) don't support the video element at all.
  29. 29. VIDEO The 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(); } });
  30. 30. 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>
  31. 31. MULTIMEDIA If 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 Web Miro Video Converter Native Audio in the Browser
  32. 32. CANVAS Environment for creating dynamic images Canvas element + javascript = dynamic content!
  33. 33. CANVAS Animated Factorization http://bomomo.com/ http://canvasrider.com/ http://lights.elliegoulding.com/ Codepen.io
  34. 34. CANVAS The 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) is actually in JavaScript and outside the scope of this class <canvas id="myCanvas" width="400" height="400"> Your browser doesn’t support Canvas. </canvas>
  35. 35. DEVICE ACCESS Rich, device-aware features and experiences
  36. 36. GEOLOCATION Browsers using HTML5 can locate you through IP addresses, WiFi connections, and GPS towers (for mobile phones and tablets) But all the cool interactive stuff is, once again, done in JavaScript You didn't expect HTML and CSS to do EVERYTHING, did you? Google Map
  37. 37. STORAGE storage storage-events
  38. 38. STORAGE You can use HTML5 Web Storage to persist simple data. Two kinds of HTML5 Web Storage: SessionStorage for per-window data LocalStorage for global, persistent data (stored to hard drive through the browser)
  39. 39. SESSIONSTORAGE Ever accidentally bought two of the same kind of ticket, because you were shopping the same site in multiple windows/tabs? Session Storage provides a good way to prevent this. Session Storage is not saved to the user’s hard drive It only lasts for the time that a browser window or tab is open and viewing a specific site.
  40. 40. LOCALSTORAGE With Local Storage, we can save data to the user’s computer, via the browser. When a user revisits a site in the same browser they first visited in, any data saved to Local Storage can be retrieved. Local Storage is browser-specific: Information you save while browsing with Firefox will NOT be available to Safari.
  41. 41. QUESTIONS? ?

×