1 / 22

HTML 5 and Content Strategy for the Web

HTML 5 and Content Strategy for the Web. By: Christina Fregosi ISC 496. HTML5. HTML5 includes new elements for better structure, form handling, drawing and media content. Semantics Elements- describe their meaning or purpose clearly to the browser and to the developer. . New Elements.

paige
Download Presentation

HTML 5 and Content Strategy for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 5 and Content Strategy for the Web By: Christina Fregosi ISC 496

  2. HTML5 HTML5 includes new elements for better structure, form handling, drawing and media content. Semantics Elements- describe their meaning or purpose clearly to the browser and to the developer.

  3. New Elements • Header and Footer • Nav – creates a navigation or menu bar • Sections and Aritcles – group your content • Aside – can be used for secondary content such as a side bar or related links

  4. <Canvas> • Used to draw graphics, on the fly. • The element is only a container for graphics. To actually draw in the canvas one typically uses JavaScript • <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;”>Your browser does not support the HTML5 canvas tag.</canvas> 2. <script>varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); X ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);</script> Y

  5. Audio and Video Support Prior to HTML5 you needed a plug-in like Silverlight or Flash NOW <audio> and <video> tags

  6. <Audio>

  7. <video>

  8. Polyfill • “ A shim that mimics a future API, providing fallback functionality to older browsers” – Paul Irish • JavaScript Modernizr – adds feature detection capability so you can check specifically for whether a browser supports an element and provide a backup option if not possible.

  9. Polyfill Example IE 9

  10. IE8

  11. How to fix the problem? • Adding a reference to Modernizr will brute-force these elements into the DOM. 1. Download it from : http://www.modernizr.com/download/ 2. Add a reference in the <head> section.

  12. End Result

  13. Top 10 Reasons to use HTML5 10. Accessibility 9. Video and Audio support 8. DOCTYPE 7. Cleaner Code • Smarter Storage

  14. 5. Better Interaction 4. Game Development 3. Legacy/ Cross Browser Support 2. Mobile 1. It’s the Future!

  15. FACTS Average time people spend on a website – • As long as it takes for the website to load • Less than 60 seconds • 690 seconds for an average, and about 30% stay 5 minutes or longer, but 52-53% exit in less than 30 seconds

  16. What can good content do for a publisher? • Build your brand • Close the sale • Improve retention • Win loyalty • Help the user do somethingbetter, smarter and with greater ease

  17. What is Good Content? • Easy to find information • Well-designed layout and labeling • Use of Social Networks • Always know your location (URL, breadcrumbs) • Always display what is best for your visitors • HTML/XML Site Maps

  18. What is Bad Content? • Subpar • Inconsistent • Irrelevant content • Duplicate pages • Broken or redirected links • Wrong or not updated information • Spamming the search engines

  19. How to measure content effectiveness? • Google Web Analytics and Webmaster Tools • Bing/Yahoo! Webmaster Tools

  20. Search Engine Optimization (SEO) <title> <meta description> <alt> <h1> Internal Links Links to external sources Social sharing Crawlability

  21. Work Cited Bing’s Webmaster Guidelines Content Strategy for the Web by Kristina Halorson COX, PATRICK. "P 10 REASONS TO USE HTML5 RIGHT NOW." codrops. WEBDESIGN, 24 2011. Web. 26 Nov 2012. <http://tympanus.net/codrops/2011/11/24/top-10-reasons-to-use-html5-right-now/>. Google’s Search Engine Optimization Starter Guide Marsman, Jennifer. N.p.. Web. 25 Nov 2012. <http://msdn.microsoft.com/en-us/hh549253.asp&xgt;. www.w3schools.com

More Related