html 5 and content strategy for the web
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
HTML 5 and
Content Strategy for the Web
By: Christina FregosiISC 496
HTML5HTML5 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 ElementsHeader and FooterNav – 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
<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 JavaScript1. <canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;”>Your browser does not support the HTML5 canvas tag.</canvas>
2. <script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d"); Xctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script> Y
Audio and Video SupportPrior to HTML5 you needed a plug-in like
Silverlight or Flash
NOW
<audio> and <video> tags
<Audio>
<video>
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.
Polyfill ExampleIE 9
IE8
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.
End Result
Top 10 Reasons to use HTML510. Accessibility
9. Video and Audio support8. DOCTYPE
7. Cleaner Code6. Smarter Storage
5. Better Interaction4. Game Development
3. Legacy/ Cross Browser Support2. Mobile
1. It’s the Future!
FACTSAverage time people spend on a website –As long as it takes for the website to loadLess than 60 seconds690 seconds for an average, and about 30% stay
5 minutes or longer, but 52-53% exit in less than 30 seconds
What can good content do for a publisher?Build your brandClose the sale
Improve retentionWin loyalty
Help the user do something better, smarter and with greater ease
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
What is Bad Content? Subpar
Inconsistent Irrelevant content Duplicate pages
Broken or redirected links Wrong or not updated information Spamming the search engines
How to measure content effectiveness?
Google Web Analytics and Webmaster ToolsBing/Yahoo! Webmaster Tools
Search Engine Optimization (SEO)
<title><meta description>
<alt><h1>
Internal LinksLinks to external sources
Social sharingCrawlability
Work CitedBing’s Webmaster Guidelines Content Strategy for the Web by Kristina HalorsonCOX, 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 GuideMarsman, Jennifer. N.p.. Web. 25 Nov 2012.
<http://msdn.microsoft.com/en-us/hh549253.asp&xgt;.www.w3schools.com