what you need to knowfiles.granneman.com/presentations/css/rfid-chips-are-here-slides.p… · rfid...
TRANSCRIPT
![Page 1: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/1.jpg)
RFID Chips Are HereWhat You Need to Know
© 2013 R. Scott GrannemanLast updated 20131116
You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.
Washington University in St. Louis !
R. Scott Granneman
1 RFID Chips Are Here.key - November 16, 2013
![Page 2: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/2.jpg)
Fake Links
2 RFID Chips Are Here.key - November 16, 2013
![Page 3: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/3.jpg)
Need to create a fake link? !
Easy !
<a href=“#”>Fake link</a>
3 RFID Chips Are Here.key - November 16, 2013
![Page 4: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/4.jpg)
<div> inside <div>
4 RFID Chips Are Here.key - November 16, 2013
![Page 5: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/5.jpg)
Don’t be afraid to nest <div> inside </div>!
(or other block-level elements either)
5 RFID Chips Are Here.key - November 16, 2013
![Page 6: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/6.jpg)
<div id=“page-container”>! <header>! Header content! </header>! <div id=“main-container”>! Main content! </div>! <aside>! Aside content! </aside>! <footer>! Footer content! </footer>!</div>
6 RFID Chips Are Here.key - November 16, 2013
![Page 7: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/7.jpg)
Pseudo Classes
7 RFID Chips Are Here.key - November 16, 2013
![Page 8: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/8.jpg)
<p> is always a paragraph !
<hr> is always a horizontal rule !
<em> is always emphasized text !
These elements are always in the same state
8 RFID Chips Are Here.key - November 16, 2013
![Page 9: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/9.jpg)
<a> can be in 4 different states !
Link!Visited!Hover!Active
9 RFID Chips Are Here.key - November 16, 2013
![Page 10: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/10.jpg)
a:link!!
A link on a webpage,unvisited or clicked on
!
What does it look like by default?
Blue Underlined
Cursor is an arrow10 RFID Chips Are Here.key - November 16, 2013
![Page 11: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/11.jpg)
a:visited!!
A link on a webpage after you’ve clicked on it & visited it
!
What does it look like by default?
Purple Underlined
Cursor is an arrow11 RFID Chips Are Here.key - November 16, 2013
![Page 12: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/12.jpg)
a:hover!!
A link on a webpage as you hover your cursor over it
!
What does it look like by default?
Blue (or purple) Underlined
Cursor is a hand12 RFID Chips Are Here.key - November 16, 2013
![Page 13: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/13.jpg)
a:active!!
A link on a webpage at the moment you click on it
!
What does it look like by default?
Red (IE, a long time ago) Underlined
Cursor is a hand13 RFID Chips Are Here.key - November 16, 2013
![Page 14: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/14.jpg)
You may need to differentiate between different uses of <a>
14 RFID Chips Are Here.key - November 16, 2013
![Page 15: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/15.jpg)
<div id=“page-container”>! <p>! Lorem ipsum <a href=“//chainsawonatireswing.com”>dolor sit amet</a>.! </p>!</div>!<footer>! © 2013 <a href=“//www.granneman.com”>Scott Granneman</a>!</footer>
15 RFID Chips Are Here.key - November 16, 2013
![Page 16: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/16.jpg)
#page-container a:link,!#page-container a:visited,!#page-container a:hover,!#page-container a:active {! color: #800000;! text-decoration: none;!}!!
footer a:link,!footer a:visited,!footer a:hover,!footer a:active {! font-family: Helvetica, sans-serif;! border: 1px dotted #e9e9e9;!}
16 RFID Chips Are Here.key - November 16, 2013
![Page 17: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/17.jpg)
If necessary,you can always attach a class to an a
!
a.class:visited {…}
17 RFID Chips Are Here.key - November 16, 2013
![Page 18: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/18.jpg)
By the way,there are other pseudo-classes,
including !
:first-letter!:first-line!:first-child
Side Note
18 RFID Chips Are Here.key - November 16, 2013
![Page 19: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/19.jpg)
HTML5 Elements
19 RFID Chips Are Here.key - November 16, 2013
![Page 20: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/20.jpg)
<hgroup><hgroup> is dead
Mozilla Developer Network:
“This element has been removed from the HTML5 (W3C) specification”
20 RFID Chips Are Here.key - November 16, 2013
![Page 21: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/21.jpg)
<hgroup>!!
“… used to group a set of h1–h6 elements
when the heading has multiple levels,
such as subheadings,alternative titles,
or taglines.”
http://www.w3.org/TR/html5/semantics.html#the-hgroup-element21 RFID Chips Are Here.key - November 16, 2013
![Page 22: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/22.jpg)
<hgroup>! <h1>! Google Apps Deciphered! </h1>! <h2>! Compute in the Cloud! </h2>!</hgroup>
22 RFID Chips Are Here.key - November 16, 2013
![Page 23: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/23.jpg)
<footer>
23 RFID Chips Are Here.key - November 16, 2013
![Page 24: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/24.jpg)
Replaces <div id=“footer”> !
<footer> is not just for pages,but also for <section> too
!
Info such as:author
copyright links to related content
contact info
24 RFID Chips Are Here.key - November 16, 2013
![Page 25: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/25.jpg)
Thank you! !
!
www.granneman.com !
ChainSawOnATireSwing.com !
@scottgranneman
25 RFID Chips Are Here.key - November 16, 2013
![Page 26: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/26.jpg)
RFID Chips Are HereWhat You Need to Know
© 2013 R. Scott GrannemanLast updated 20131116
You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.
Washington University in St. Louis !
R. Scott Granneman
26 RFID Chips Are Here.key - November 16, 2013
![Page 27: What You Need to Knowfiles.granneman.com/presentations/css/RFID-Chips-Are-Here-Slides.p… · RFID Chips Are Here ... For full licensing information, please see the last slide/page](https://reader035.vdocuments.mx/reader035/viewer/2022071015/5fcdff5f93a0f534885d2c15/html5/thumbnails/27.jpg)
Licensing of this work !
This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/
3.0/deed.en_US !
In addition to the rights and restrictions common to all Creative Commons licenses, the Attribution-ShareAlike License features the following key
conditions: !
Attribution. The licensor permits others to copy, distribute, display, and perform the work. In return, licensees must give the original author credit:
!Scott Granneman • www.granneman.com • [email protected]
!Share Alike. The licensor permits others to distribute derivative works under a
license identical to the one that governs the licensor’s work. !
Questions? Email [email protected]
27 RFID Chips Are Here.key - November 16, 2013