HTML 5 and Content Strategy for the Web By: Christina Fregosi ISC 496
HTML 5 and Content Strategy for the Web By: Christina Fregosi ISC 496.
Dec 25, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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
<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
1. <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"); X
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);</script> Y
Audio and Video Support
Prior 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 Example
IE 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 HTML5
10. Accessibility
9. Video and Audio support
8. DOCTYPE
7. Cleaner Code
6. Smarter Storage
5. Better Interaction
4. Game Development
3. Legacy/ Cross Browser Support
2. Mobile
1. It’s the Future!
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
What can good content do for a publisher?
Build your brand
Close the sale
Improve retention
Win 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 Tools
Bing/Yahoo! Webmaster Tools
Search Engine Optimization (SEO)
<title>
<meta description>
<alt>
<h1>
Internal Links
Links to external sources
Social sharing
Crawlability
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
Related Documents
