Still a work in progress, this is my first file for my HTML5 & CSS3 Real World Prep class at roundpeg.com

1. HTML5 & CSS3
Real World Prep
Kelly McCathran
Adobe Certified Instructor | Adobe Design Master
kelly@roundpeg.com

2. copyright 2013 | kelly mccathran
 HTML5 is the latest iteration of the Hyper Text Markup Language
(the language of the internet & world wide web)
 HTML5 supports Interactivity, Audio, Video and Transitions that were
previously only possible with Flash (.swf)
 HTML5 utilizes the technologies below
What is HTML5?
SVGSVG
CSS3CSS3
CanvasCanvas
VideoVideo
AudioAudio
Transition
s
Transition
s
JavaScriptJavaScript
jQueryjQuery

3. copyright 2013 | kelly mccathran
What HTML5 is Used For
 HMTL5 allows you to create rich and dynamic web content for:
- Ads
- Interactive Websites
- Mobile & Tablet Apps
- Branded Experiences
 The focus of HTML5 is heavy on app development
 HTML5 doesn’t require a plug-in or add on, it simply works in modern browsers
 Many desktop computers (especially larger corporations & government agencies)
are running older browsers like Internet Explorer 5, 6, 7 and 8 that have
VERY little support for HTML5
3

4. copyright 2013 | kelly mccathran
HTML 5 Examples
theexpressiveweb.com
4
html5rocks.com
thegraphicalweb.com

5. copyright 2013 | kelly mccathran
The Need for New Tags
 Users were creating a lot of IDs & Classes with the same names
 HTML5 added many new Tags (or Elements)
- Canvas
- Main
- Header
- Footer
- Nav
- Section
- Article
- Figure
- FigCaption
- Audio
- Video
- Time
- Dialog
 List of New Elements in HTML5
w3.org/TR/html5-diff/#new-elements
5

6. copyright 2013 | kelly mccathran
New HTML5 Semantics
 HTML5 semantics were designed to extend the current capabilities of HTML, while
still displaying content in older browsers
 Presentational markup:
- <i>
 Semantic markup:
- <em>
 Semantic HTML enhances accessibility, searchability, internal control and
interoperability among devices
6

7. copyright 2013 | kelly mccathran
Browser Testing
 You never know what browser the end user will choose (or use) to access your
website (or app)
7

8. copyright 2013 | kelly mccathran
2 Schools of Thought
Graceful Degradation
 Start with more modern features and add all the latest and greatest features
 View and compensate for older browsers as you develop
Progressive Enhancement
 Start your site with older HTML content, catering to the lowest common
denominator
 Once you have working content, add more modern features
 This can also mean design for mobile first, because not all mobile browsers support
media queries
- Excellent reference article by Paula Borowska
http://paulaborowska.com/graceful-degradation-versus-progressive-enhancement-in-web-design-who-will-win/
8

9. copyright 2013 | kelly mccathran
Designing on the 960px Grid
 Most web page designs today adhere to a 960 pixel width grid
 Most sites use a base of 12 or16 columns
(although you may only notice 2, 3 or 4 columns)
 Source: 960gs.com
9

10. copyright 2013 | kelly mccathran
<Div> Structure
 Most pages constructed today have a container <div> to allow centering
#container {
width: 960px;
height: 100%;
margin: auto;
}
 HTML5 allows for further sectioning using:
<header>
<nav>
</nav>
<header>
10

11. copyright 2013 | kelly mccathran
HTML5 Sectioning
 HTML5 has four new sectioning elements (tags) to use in the page
- <nav >
- < section >
- < article >
- < aside>
- <header> and <footer> also create sections (at the top of bottom of the page)
 Each section tag has it’s own h1 – h6 hierarchy
11

12. copyright 2013 | kelly mccathran
caniuse.com
caniuse.com
html5test.com
html5test.com
html5readiness.com
html5readiness.com
HTML5 Canvas Tutorials
html5canvastutorials.com
12
Open Source Media Framework
OSMF was created to help you monetize and
protect your video assets by making it easier to
create and maintain the rich media experiences
osmf.org
VideoJS
HTML5 Video, available everywhere. HTML/CSS
skin and JavaScript API for HTML5
videojs.com
HTML5 Testing/Readiness Sites

13. copyright 2013 | kelly mccathran
WHATWG.org
Web Hypertext Application Technology
Working Group
whatwg.org
W3.org HTML5 Specification
For the most recent information, check the
Editor’s Draft on this page
w3.org/TR/html5/
html5doctor
http://html5doctor.com/
roundpegTV (recorded webinars)
http://roundpegTV.com
Responsive Design Recording
http://roundpeg.adobeconnect.com/p18p9g45fkj/
Webkit, Chromium & Blink
http://www.pcworld.com/article/2033063/
google-chromium-project-leaves-webkit-
to-work-with-blink-browser-engine.html
13
Adobe Edge Inspect
Preview and inspect html on devices
html.adobe.com/edge/inspect
Slideshare | Paul Trani
Things Every Design should Know when
Creating for Devices
http://www.slideshare.net/paultrani/things-every-
designer-should-know-about-creating-for-devices?
from_search=15
Slideshare | Paul Trani (ALL)
HTML5 Hotness, CSS3 for Advanced Design
http://www.slideshare.net/search/slideshow?
lang=**&page=2&q=Paul+trani&searchfrom=head
er&sort=relevance
Kelly's HTML5 Exercises
https://secure.logmein.com//f?
00_fXaS0usiKXAutk.L1IykqK2P-JNr9gEpE4iYCuG3
Corner Radius Creator
Writes CSS for you
http://border-radius.com/
Helpful Links

14. copyright 2013 | kelly mccathran
Do Some Code
 Now it’s time to get your hands dirty, let’s jump in a do a little code…
14