‫تهیه کننده ‪ :‬مائده عراقی زاده‬
‫نیمسال دوم سال تحصیلی ‪1391‬‬
‫مزایای طراحی سایت با ‪HTML 5‬‬
‫• استفاده از تگهای نشانه گذاری برای دسته بندی مطالب سایت‬
‫• امکان طراحی اشیا و اشکال به صورت ‪ ۲‬بعدی با استفاده از تگ <>‪canvas‬‬
‫• امکان پخش فایل های صوتی و تصویری بدون نیاز به نرم افزارهای جانبی با استفاده از تگ های‬
‫< >‪video‬و <>‪audio‬‬
‫• اضافه شدن کنترل های جدید فرم همانند ‪Date ،Calendar ،Email‬و ‪Time‬‬
‫فرم ها را آسان می نماید‪.‬‬
‫که طراحی و برنامه نویس ی‬
‫ً‬
‫• امکان ذخیره اطالعات بر روی مرورگر کاربر – این قابیلت تقریبا کار کوکی ها ‪Cookie‬را در‬
‫صفحات ‪ HTML‬انجام می دهد‪.‬‬
‫• طراحی سایت با ‪HTML 5‬حجم کد را کاهش می دهد در نتیجه زمان بارگذاری صفحه‬
‫کاهش می یابد‪.‬‬
THE HEADER
<header id="banner" class="body">
<h1><a href="#">Smashing HTML5! <strong>HTML5 in the
year <del>2022</del> <ins>2009</ins></strong></a></h1>
<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header><!-- /#banner -->
FEATURED BLOCK
<aside id="featured" class="body"><article>
<figure>
<img src="images/temp/sm-logo.gif" alt="Smashing Magazine"
/>
</figure>
<hgroup>
<h2>Featured Article</h2>
<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
</hgroup>
<p>Discover how to use Graceful Degradation and Progressive
Enhancement techniques to achieve an outstanding, cross-browser <a
href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a>
and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a>
website today!</p>
</article></aside><!-- /#featured -->
THE LAYOUT’S BODY
<section id="content" class="body">
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#"
rel="bookmark" title="Permalink to this POST TITLE">This be the
title</a></h2>
</header>
<footer class="post-info">
<abbr class="published" title="200510-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
10th October 2005
</abbr>
<address class="vcard author">
By <a class="url fn"
href="#">Enrique Ramírez</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis
elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit
nec et leo. Ut ut malesuada tellus.</p>
</div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
...
</article></li>
<li><article class="hentry">
...
</article></li>
</ol><!-- /#posts-list -->
</section><!-- /#content -->
FOOTER BLOCKS
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
<span class="primary">
<strong><a href="#" class="fn url">Smashing
Magazine</a></strong>
<span class="role">Amazing Magazine</span>
</span><!-- /.primary -->
<img src="images/avatar.gif" alt="Smashing Magazine
Logo" class="photo" />
<span class="bio">Smashing Magazine is a website and
blog that offers resources and advice to web developers and web designers.
It was founded by Sven Lennartz and Vitaly Friedman.</span>
</address><!-- /#about -->
<p>2005-2009 <a href="http://smashingmagazine.com">Smashing
Magazine</a>.</p>
</footer><!-- /#contentinfo -->
Create Binary Trees using Javascript
and HTML5 Canvas
HTML5 code:
<!-- Lets draw some binary trees -->
<canvas id="canvas"></canvas>
CSS code:
/*Some basic CSS*/
* {margin: 0; padding: 0;}
/*To remove the scrollers*/
#canvas {display: block;}
Java Script code:
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//Lets resize the canvas to occupy the full page
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
//Some variables
var length, divergence, reduction, line_width, start_points = [];
init();
function init()
{
//filling the canvas white
ctx.fillStyle = "white";
ctx.fillRect(0, 0, W, H);
//Lets draw the trunk of the tree
//lets randomise the variables
//length of the trunk - 100-150
length = 100 + Math.round(Math.random()*50);
//angle at which branches will diverge - 10-60
divergence = 10 + Math.round(Math.random()*50);
//Every branch will be 0.75times of the previous one - 0.5-0.75
//with 2 decimal points
reduction = Math.round(50 + Math.random()*20)/100;
//width of the branch/trunk
line_width = 10;
//This is the end point of the trunk, from where branches will diverge
var trunk = {x: W/2, y: length+50, angle: 90};
//It becomes the start point for branches
start_points = []; //empty the start points on every init();
start_points.push(trunk);
//Y coordinates go positive downwards, hence they are inverted by
//from the canvas height = H
ctx.beginPath();
ctx.moveTo(trunk.x, H-50);
ctx.lineTo(trunk.x, H-trunk.y);
ctx.strokeStyle = "brown";
ctx.lineWidth = line_width;
ctx.stroke();
branches();
//Lets draw the branches now
function branches()
{
//reducing line_width and length
length = length * reduction;
line_width = line_width * reduction;
ctx.lineWidth = line_width;
var new_start_points = [];
ctx.beginPath();
for(var i = 0; i < start_points.length; i++)
{
var sp = start_points[i];
//2 branches will come out of every start point. Hence there w
//2 end points. There is a difference in the divergence.
var ep1 = get_endpoint(sp.x, sp.y, sp.angle+divergence, leng
var ep2 = get_endpoint(sp.x, sp.y, sp.angle-divergence, lengt
//drawing the branches now
ctx.moveTo(sp.x, H-sp.y);
ctx.lineTo(ep1.x, H-ep1.y);
ctx.moveTo(sp.x, H-sp.y);
ctx.lineTo(ep2.x, H-ep2.y);
//Time to make this function recursive to draw more branches
ep1.angle = sp.angle+divergence;
ep2.angle = sp.angle-divergence;
new_start_points.push(ep1);
new_start_points.push(ep2);
}
//Lets add some more color
if(length < 10) ctx.strokeStyle = "green";
else ctx.strokeStyle = "brown";
ctx.stroke();
start_points = new_start_points;
//recursive call - only if length is more than 2.
//Else it will fall in an long loop
if(length > 2) setTimeout(branches, 50);
else setTimeout(init, 500);
}
function get_endpoint(x, y, a, length)
{
//This function will calculate the end points based on simple vectors
//http://physics.about.com/od/mathematics/a/VectorMath.htm
//You can read about basic vectors from this link
var epx = x + length * Math.cos(a*Math.PI/180);
var epy = y + length * Math.sin(a*Math.PI/180);
return {x: epx, y: epy};
}}
HTML5 Canvas Experiment:
A cool flame/fire effect using particles
HTML5 code:
<!-- Lets make a cool flame effect -->
<canvas id="canvas"></canvas>
CSS code:
/*Some styles*/
* {margin: 0; padding: 0;}
#canvas {display: block;}
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//Make the canvas occupy the full page
var W = window.innerWidth, H = window.innerHeight;
canvas.width = W;
canvas.height = H;
var particles = [];
var mouse = {};
//Lets create some particles now
var particle_count = 100;
for(var i = 0; i < particle_count; i++)
{
particles.push(new particle());
}
//finally some mouse tracking
canvas.addEventListener('mousemove', track_mouse, false);
function track_mouse(e)
{
//since the canvas = full page the position of the mouse
//relative to the document will suffice
mouse.x = e.pageX;
mouse.y = e.pageY;
}
function particle()
{
//speed, life, location, life, colors
//speed.x range = -2.5 to 2.5
//speed.y range = -15 to -5 to make it move upwards
//lets change the Y speed to make it look like a flame
this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};
//location = mouse coordinates
//Now the flame follows the mouse coordinates
if(mouse.x && mouse.y)
{
this.location = {x: mouse.x, y: mouse.y};
}
else
{
this.location = {x: W/2, y: H/2};
}
//radius range = 10-30
this.radius = 10+Math.random()*20;
//life range = 20-30
this.life = 20+Math.random()*10;
this.remaining_life = this.life;
//colors
this.r = Math.round(Math.random()*255);
this.g = Math.round(Math.random()*255);
this.b = Math.round(Math.random()*255);
}
function draw()
{
//Painting the canvas black
//Time for lighting magic
//particles are painted with "lighter"
//In the next frame the background is painted normally without blending to the
//previous frame
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = "lighter";
for(var i = 0; i < particles.length; i++)
{
var p = particles[i];
ctx.beginPath();
//changing opacity according to the life.
//opacity goes to 0 at the end of life of a particle
p.opacity = Math.round(p.remaining_life/p.life*100)/100
//a gradient instead of white fill
var gradient =
ctx.createRadialGradient(
p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
ctx.fillStyle = gradient;
ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
ctx.fill();
//lets move the particles
p.remaining_life--;
p.radius--;
p.location.x += p.speed.x;
p.location.y += p.speed.y;
//regenerate particles
if(p.remaining_life < 0 || p.radius < 0)
{
//a brand new particle replacing the dead one
particles[i] = new particle();
}}}setInterval(draw, 33);}
‫پوسته موزیـک پلیر‬
‫یک موزیـک پلیر که با استفاده از ‪CSS3‬و ‪HTML5‬درست شده است‪.‬‬
<div class="music-player">
<div class="music-player-inner">
<div class="music-player-toggle">
<span class="music-player-toggle-inner">II</span>
</div>
<div class="music-player-music">
<div class="music-player-music-inner">
<div class="music-player-content">
Artist Name - Song Title <br>
2:00
<div class="music-player-slider">
<span class="music-player-played">
<span class="music-player-pointer"> </span>
</span>
</div>
-1:59
</div>
<span class="music-player-shade"></span>
</div>
</div>
</div>
</div>
.music-player {
font-family: Arial, Helvetica;
display: inline-block;
width: 600px;
height: 100px;
background : -webkitgradient(linear, left top, left bottombottom, colorstop(0.25, rgb(201,201,201)), color-stop(1, rgb(128,132,135)));
background : -moz-lineargradient(center top, rgb(201,201,201) 25%, rgb(128,132,135) 100%
);
position: relative;
overflow: hidden;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0, 0.8);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.8);
box-shadow: 0px 1px 2px rgba(0,0,0, 0.8);
}
.music-player-inner {
display: inline-block;
width: 600px;
height: 100px;
padding-top: 3.5%;
font-size: 25px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.6); }
.music-player-toggle {
margin-left: 1em;
display: inline-block;
width: 50px;
height: 50px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
-moz-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
}
.music-player-toggle-inner {
display: inline-block;
width: 50px;
height: 45px;
background : -webkitgradient(linear, left top, left bottombottom, colorstop(0.25, rgb(252,252,252)), color-stop(1, rgb(128,132,135)));
background : -moz-lineargradient(center top, rgb(252,252,252) 25%, rgb(128,132,135) 100%);
font-weight: bolder;
font-size: 35px;
padding-top: 5px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 2px solid #696b6b;
text-align: center;
}
.music-player-music {
margin-left: 2em;
display: inline-block;
width: 450px;
height: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background : -webkitgradient(linear, left top, left bottombottom, colorstop(0.25, rgb(227,233,195)), color-stop(1, rgb(198,218,149)));
background : -moz-lineargradient(center top, rgb(227,233,195) 25%, rgb(198,218,149) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
-moz-box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
position: relative;
}
.music-player-music-inner {
display: inline-block;
width: 450px;
height: 42px;
padding-top: 2%;
font-size: 25px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.music-player-shade {
top: 0;
display: inline-block;
position: absolute;
width: 450px;
height: 25px;
background: rgba(255, 255,255, 0.2);
}
.music-player-slider {
margin-top: .5em;
display: inline-block;
width: 350px;
height: 9px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #a9b096;
-webkit-box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
-moz-box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
text-align: left;
}
.music-player-played {
display: inline-block;
width: 175px;
height: 9px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background : -webkitgradient(linear, left top, left bottombottom, colorstop(0.25, rgb(146,150,131)), color-stop(1, rgb(80,85,65)));
background : -moz-lineargradient(center top, rgb(146,150,131) 25%, rgb(80,85,65) 100%);
text-align: rightright;
}
.music-player-pointer {
margin-left: 14.2em;
display: inline-block;
width: 7px;
height: 7px;
background: #fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg); }