Successfully reported this slideshow.

Html5 css3 rp-03


Published on

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

Published in: Technology, Design
  • Be the first to comment

Html5 css3 rp-03

  1. 1. HTML5 & CSS3 Real World Prep Kelly McCathran Adobe Certified Instructor | Adobe Design Master
  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 4
  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 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 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: 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 HTML5 Canvas Tutorials 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 VideoJS HTML5 Video, available everywhere. HTML/CSS skin and JavaScript API for HTML5 HTML5 Testing/Readiness Sites
  13. 13. copyright 2013 | kelly mccathran Web Hypertext Application Technology Working Group HTML5 Specification For the most recent information, check the Editor’s Draft on this page html5doctor roundpegTV (recorded webinars) Responsive Design Recording Webkit, Chromium & Blink google-chromium-project-leaves-webkit- to-work-with-blink-browser-engine.html 13 Adobe Edge Inspect Preview and inspect html on devices Slideshare | Paul Trani Things Every Design should Know when Creating for Devices designer-should-know-about-creating-for-devices? from_search=15 Slideshare | Paul Trani (ALL) HTML5 Hotness, CSS3 for Advanced Design lang=**&page=2&q=Paul+trani&searchfrom=head er&sort=relevance Kelly's HTML5 Exercises 00_fXaS0usiKXAutk.L1IykqK2P-JNr9gEpE4iYCuG3 Corner Radius Creator Writes CSS for you 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