Presentation

moonlightmidgeInternet και Εφαρμογές Web

18 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

107 εμφανίσεις

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