37. ...too many HTTP requests
provide alternates?
unsupported...that's a lot of
JavaScript!
requests...
...is Flash even supported?
does every device support Flash?
...ah, that is Flash!
the right version of
media formats...
Saturday, March 9, 13
38. HTML5 video suitable for
each browser
...screen size?
...available bandwidth?
for each browser...
media format
a couple
c.2000...
fsdfffSaturday, March 9, 13
43. using Canvas
<html>
<head>...</head>
<body>
<h1>Page
Heading</h1>
<p>Lorem
ipsum...</p>
<canvas
id="picture1"
width="400"
height="300"/>
<p>Lorem
ipsum...</p>
</body>
</html>
Page Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. orem
ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. orem
ipsum dolor sit amet, consectetur adipisicing elit, sed do
Saturday, March 9, 13
44. What is the difference between 2 logos?
Canvas logo PNG logo
Saturday, March 9, 13
54. building a Box with 3DTransforms
x
z
y
.package
>
div:nth-‐child(1)
{
-‐webkit-‐transform:translateZ(200px);
}
Saturday, March 9, 13
55.
x
z
y
.package
>
div:nth-‐child(2)
{
-‐webkit-‐transform:rotateY(90deg);
}
building a Box with 3DTransforms
Saturday, March 9, 13
56. x
z
y
-‐webkit-‐transform:
rotateY(90deg)
translateZ(200px);
.package
>
div:nth-‐child(2)
{
}
building a Box with 3DTransforms
Saturday, March 9, 13
57. x
z
y
-‐webkit-‐transform:
rotateY(90deg)
translateZ(200px);
.package
>
div:nth-‐child(2)
{
}
building a Box with 3DTransforms
Saturday, March 9, 13
89. @-‐webkit-‐keyframes
stamp-‐it
{...}
</style>
<style>
stamp keyframe animation
<script>
function
onClickHandler(event)
{
var
stampElement
=
/*
get
the
element
*/;
var
stampElement.style.webkitAnimation
=
“stamp-‐it
0.5s”;
}
</script>
Saturday, March 9, 13
93. @-‐webkit-‐keyframes
stamp-‐it
{...}
<script>
function
onClickHandler(event)
{
var
stampElement
=
/*
code
to
get
the
element
*/;
var
stampElement.style.webkitAnimation
=
“stamp-‐it
0.5s
forwards”;
}
</script
<style>
animation fill mode
</style>
Saturday, March 9, 13