Introduction to HTML5

erminerebelAI and Robotics

Nov 15, 2013 (3 years and 8 months ago)

71 views



Introduction to HTML5





By

Sam Nasr, MCAD, MCT, MCTS, MVP

Nasr Information Systems


October 22, 2013

Introduction

Sam Nasr (
sam@nasr.info
)



Software developer since 1995


Independent Software Consultant (Nasr Information Systems)


MCAD, MCT, MCTS(WSS/MOSS)


President
-

Cleveland C#/VB.Net User Group


President


Cleveland WPF User Group


President
-

.Net Study Group


INETA Mentor for Ohio


INETA Community Champ (2010, 2013)


Author for Visual Studio Magazine


Microsoft Most Valuable Professional (2013)


Housekeeping



Forum for learning



Feel free to ask questions



Cell Phones on vibrate please


Agenda


Browser Compatibility


New Features in HTML5


Simplified Markup


New Attributes


New Tags



New Features in CSS3


Selectors


Advanced Layout and Animation



New JavaScript API


Why HTML5?


Ubiquitous


Ease of Development


Widely Supported


Forged by many tech leaders


Better Performance


More Capabilities

Browser Support


caniuse.com


html5test.com


caniuse.com

html5test.com

Simplified Markup

HTML4:

<!DOCTYPE html PUBLIC

"
-
//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd">


HTML5:

<!DOCTYPE html>


Simplified Markup

HTML4:

<meta http
-
equiv="content
-
type" content="text/html; charset=UTF
-
8“>


HTML5:

<meta charset="utf
-
8">


Simplified Markup

HTML4:

<link type="text
-
css" rel="stylesheet" href="MyStyle.css">


HTML5:

<link rel="stylesheet" href="MyStyle.css">


Simplified Markup

HTML4:

<script type="text/
javascript
"
src
="Myscript.js">

<script type="text/
javascript
">




</script>


HTML5:

<script
src
="Myscript.js
">

<script>




</script>





New Tags

article

embed

mark

ruby

aside

figcaption

meter

section

audio

figure

nav

source

canvas

footer

output

summary

command

header

progress

time

datalist

hgroup

rp

video

details

keygen

rt

wbr

Non
-
Semantic Markup

<div id="Header">

<div id="Article">

<div id="Aside
">


<div id="Footer">


Semantic Markup

<Header>

<Article>

<Aside>


<Footer>


Semantic


<header>


<hgroup>


<h1>My Page</h1>


<h2>Life, The Universe and Everything</h2>


</hgroup>


<nav>


<h1>Page Navigation</h1>


<ul>


<li><a href="#">News</a></li>


<li><a href="#">Sports</a></li>


<li><a href="#">Weather</a></li>


</ul>


</nav>


</header>


<article>


<h1>Breaking News</h1>


<p>The quick brown fox jumps over the lazy
dog</p>


<aside>


<h1>Side Note</h1>


<p>Oh, by the way</p>


</aside>


</article>


<footer>


<p>Copyright 2012 (c)</p>


</footer>


<div class="header">


<h1>My Page</h1>


<h2>Life, The Universe and Everything</h2>



<div id="nav">


<h2>Page Navigation</h2>


<ul>


<li><a href="#">News</a></li>


<li><a href="#">Sports</a></li>


<li><a href="#">Weather</a></li>


</ul>


</div>


</div>



<div id="article">


<h1>Breaking News</h1>


<p>The quick brown fox jumps over the lazy
dog</p>


<div id="aside">


<h3>Side Note</h3>


<p>Oh, by the way</p>


</div>


</div>


<div id="footer">


<p>Copyright 2012 (c)</p>


</div>

Canvas



Canvas

Context methods


beginPath
()


moveTo
()


lineTo
()


fill()


fillRect
()


arc()

SVG

Canvas vs. SVG


Canvas


Not a drawing object, only a container


Only used for drawing and redrawing via JavaScript


Used for many HTML5 games due to performance
impact



SVG


Every object manipulated via the DOM


Could have performance issues if using many objects



New Attributes

<input type="text"


name="First"


autofocus


placeholder="Enter First Name" />


Input Types

<input type=

"color"

"date"

"datetime"

"datetime
-
local"

"email"

"month"

"number"

"range"

"search"

"tel"

"time"

"url"

"week"

Validation


input:required {


border:3px solid red;


}



input:valid {


border:3px solid gray;


}


Video


<video controls loop poster=“HTML5Rocks.png">


<source src=“HTML5Rocks.mp4" />


<source src="HTML5Rocks.ogv" />


<source src=“HTML5Rocks.webm" />


<source src="HTML5Rocks.wma” />

</video>



The browser will use the first recognized format.


Video Support



Audio


<audio controls loop>


<source src="yyy.mp3" />


<source src="yyy.ogg" />


<source src="yyy.wav" />


</audio>

Audio Support





Demo

HTML5

CSS3 Selectors

Position

Values

Misc

:first
-
child

:last
-
child

:first
-
of
-
type

:last
-
of
-
type

:only
-
of
-
type

:nth
-
child(#)

:nth
-
last
-
child(#)

:nth
-
of
-
type(#)

:nth
-
last
-
of
-
type(#)

[
attr
^=value]

[
attr
$=value]

[
attr
*=value]

:root

:empty

:target

:not(…)

::selection

CSS3 Selectors

Visible State

Validation

:enabled

:disabled

:checked

:valid

:invalid

:optional

:required

Compatibility

Style

Browser(s)

feature

[W3C

Standard]

-
ms
-
feature

IE

-
moz
-
feature

Firefox

-
webkit
-
feature

Safari and Chrome

-
o
-
feature

Opera

#title {


transform:rotate(
-
15deg);


-
ms
-
transform:rotate(
-
15deg);


-
moz
-
transform:rotate(
-
15deg);


-
webkit
-
transform:rotate(
-
15deg);


-
o
-
transform:rotate(
-
15deg);

}

Fonts

@font
-
face {


font
-
family:
FriendlyFontName
;


src: url('
fontname
.woff') format('woff');

}


selector
{


font
-
family:
FriendlyFontName
;

}

FontSquirrel.com

Text Shadows

div {


text
-
shadow: horizontal
-
offset


vertical
-
offset


blur


color;

}

The Long, Dark Tea Time of the Soul

Resize


selector
{



resize: both; /* none|horizontal|vertical */


overflow: auto; /* required */


max
-
width: 600px; /* optional */


max
-
height: 800px; /* optional */

}

Rounded Corners

selector

{


border
-
radius: 2em;


}


selector

{


border
-
top
-
left
-
radius:2em;


border
-
bottom
-
left
-
radius:2em;

}

Transform


Rotate


Skew


Scale

Rotate

.rotate {


transform:rotate(
-
15deg);


-
ms
-
transform:rotate(
-
15deg); /* IE */


-
moz
-
transform:rotate(
-
15deg); /* Firefox */


-
webkit
-
transform:rotate(
-
15deg); /* Safari, Chrome */


-
o
-
transform:rotate(
-
15deg); /* Opera */

}


Skew

Selector


{


transform: skewX(xdeg);


-
ms
-
transform: skewX(xdeg);


-
moz
-
transform: skewX(xdeg);


-
webkit
-
transform: skewX(xdeg);


-
o
-
transform: skewX(xdeg);


}

selector


{


transform: skewY(ydeg);


-
ms
-
transform: skewY(ydeg);


-
moz
-
transform: skewY(ydeg);


-
webkit
-
transform: skewY(ydeg);


-
o
-
transform: skewY(ydeg);


}


selector


{


transform: skew(xdeg, ydeg);


-
ms
-
transform: skew(xdeg, ydeg);


-
moz
-
transform: skew(xdeg, ydeg);


-
webkit
-
transform: skew(xdeg, ydeg);


-
o
-
transform: skew(xdeg, ydeg);


}

Scale

Selector

{

transform: scale(
factor
);


-
ms
-
transform: scale(
factor
);


-
moz
-
transform: scale(
factor
);


-
webkit
-
transform: scale(
factor
);


-
o
-
transform: scale(
factor
);

}


Selector

{

transform: scaleX(
factor
);


-
ms
-
transform: scaleX(
factor
);


-
moz
-
transform: scaleX(
factor
);


-
webkit
-
transform: scaleX(
factor
);


-
o
-
transform: scaleX(
factor
);

}

Selector

{

transform: scaleY(
factor
);


-
ms
-
transform: scaleY(
factor
);


-
moz
-
transform: scaleY(
factor
);


-
webkit
-
transform: scaleY(
factor
);


-
o
-
transform: scaleY(
factor
);

}



Demo

CSS3

data
-

attributes

<div data
-
firstname="David" id="fName">


var div = getElementById("fName");

var fn = div.dataset("firstname");



Web Storage


Capacity: 2
-
10MB (W3C recommends 5MB)


Local Storage vs Session Storage





Demo

JavaScript API

Recap


Browser Compatibility


New Features in HTML5


Simplified Markup


New Attributes


New Tags



New Features in CSS3


Selectors


Advanced Layout and Animation



New JavaScript API



Resources


HTML5 Rocks

http://www.html5rocks.com




Developing HTML5 Jump Start

http://channel9.msdn.com/Series/Developing
-
HTML
-
5
-
Apps
-
Jump
-
Start




.Net Study Group

http://www.meetup.com/Net
-
Study
-
Group/files/


Contact Info

sam@nasr.info



http://ClevelandDotNet.blogspot.com



@SamNasr



http://www.linkedin.com/in/samsnasr



http://speakerrate.com/samnasr


Thank you for attending!