Html5 css3 rp-03

804 views

Published on

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

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

No Downloads
Views
Total views
804
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5 css3 rp-03

  1. 1. HTML5 & CSS3 Real World Prep Kelly McCathran Adobe Certified Instructor | Adobe Design Master kelly@roundpeg.com
  2. 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. 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. 4. copyright 2013 | kelly mccathran HTML 5 Examples theexpressiveweb.com 4 html5rocks.com thegraphicalweb.com
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×