html 5 and content strategy for the web

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

Upload: paige

Post on 23-Feb-2016

36 views

Category:

Documents


0 download

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 Presentation

TRANSCRIPT

Page 1: HTML 5  and  Content Strategy for the Web

HTML 5 and

Content Strategy for the Web

By: Christina FregosiISC 496

Page 2: HTML 5  and  Content Strategy for the Web

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.

Page 3: HTML 5  and  Content Strategy for the Web

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

Page 4: HTML 5  and  Content Strategy for the Web
Page 5: HTML 5  and  Content Strategy for the Web

<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

Page 6: HTML 5  and  Content Strategy for the Web

Audio and Video SupportPrior to HTML5 you needed a plug-in like

Silverlight or Flash

NOW

<audio> and <video> tags

Page 7: HTML 5  and  Content Strategy for the Web

<Audio>

Page 8: HTML 5  and  Content Strategy for the Web

<video>

Page 9: HTML 5  and  Content Strategy for the Web

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.

Page 10: HTML 5  and  Content Strategy for the Web

Polyfill ExampleIE 9

Page 11: HTML 5  and  Content Strategy for the Web

IE8

Page 12: HTML 5  and  Content Strategy for the Web

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.

Page 13: HTML 5  and  Content Strategy for the Web

End Result

Page 14: HTML 5  and  Content Strategy for the Web

Top 10 Reasons to use HTML510. Accessibility

9. Video and Audio support8. DOCTYPE

7. Cleaner Code6. Smarter Storage

Page 15: HTML 5  and  Content Strategy for the Web

5. Better Interaction4. Game Development

3. Legacy/ Cross Browser Support2. Mobile

1. It’s the Future!

Page 16: HTML 5  and  Content Strategy for the Web

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

Page 17: HTML 5  and  Content Strategy for the Web

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

Page 18: HTML 5  and  Content Strategy for the Web

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

Page 19: HTML 5  and  Content Strategy for the Web

What is Bad Content? Subpar

Inconsistent Irrelevant content Duplicate pages

Broken or redirected links Wrong or not updated information Spamming the search engines

Page 20: HTML 5  and  Content Strategy for the Web

How to measure content effectiveness?

Google Web Analytics and Webmaster ToolsBing/Yahoo! Webmaster Tools

Page 21: HTML 5  and  Content Strategy for the Web

Search Engine Optimization (SEO)

<title><meta description>

<alt><h1>

Internal LinksLinks to external sources

Social sharingCrawlability

Page 22: HTML 5  and  Content Strategy for the Web

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