1 / 32

به نام خدا

به نام خدا. به نام خدا. بررسی سایت های طراحی شده با HTML5. تهیه کننده : مائده عراقی زاده نیمسال دوم سال تحصیلی 1391. مزایای طراحی سایت با HTML 5 استفاده از تگهای نشانه گذاری برای دسته بندی مطالب سایت امکان طراحی اشیا و اشکال به صورت ۲ بعدی با استفاده از تگ < canvas >

bena
Download Presentation

به نام خدا

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. به نام خدا به نام خدا بررسی سایت های طراحی شده با HTML5 تهیه کننده : مائده عراقی زاده نیمسال دوم سال تحصیلی 1391

  2. مزایای طراحی سایت با HTML 5 • استفاده از تگهای نشانه گذاری برای دسته بندی مطالب سایت • امکان طراحی اشیا و اشکال به صورت ۲ بعدی با استفاده از تگ <canvas> • امکان پخش فایل های صوتی و تصویری بدون نیاز به نرم افزارهای جانبی با استفاده از تگ های <video> و <audio> • اضافه شدن کنترل های جدید فرم همانند Email، Calendar، Date و Time که طراحی و برنامه نویسی فرم ها را آسان می نماید. • امکان ذخیره اطلاعات بر روی مرورگر کاربر – این قابیلت تقریباً کار کوکی ها Cookie را در صفحات HTML انجام می دهد. • طراحی سایت با HTML 5 حجم کد را کاهش می دهد در نتیجه زمان بارگذاری صفحه کاهش می یابد.

  3. 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 -->

  4. FEATURED BLOCK <aside id="featured" class="body"><article> <figure> <imgsrc="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 -->

  5. THE LAYOUT’S BODY

  6. <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="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ --> 10th October 2005 </abbr> <address class="vcard author"> By <a class="urlfn" href="#">Enrique Ramírez</a> </address> </footer><!-- /.post-info -->

  7. <div class="entry-content"> <p>Loremipsum dolor sit amet, consecteturadipiscingelit. Quisquevenenatisnunc vitae liberoiaculiselementum. Nullam et justo <a href="#">non sapien</a> dapibusblanditnec et leo. Ututmalesuadatellus.</p> </div><!-- /.entry-content --> </article></li> <li><article class="hentry"> ... </article></li> <li><article class="hentry"> ... </article></li> </ol><!-- /#posts-list --> </section><!-- /#content -->

  8. FOOTER BLOCKS <footer id="contentinfo" class="body"> <address id="about" class="vcard body"> <span class="primary"> <strong><a href="#" class="fnurl">Smashing Magazine</a></strong> <span class="role">Amazing Magazine</span> </span><!-- /.primary --> <imgsrc="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 -->

  9. 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;}

  10. Java Script code: window.onload = function(){ var canvas = document.getElementById("canvas"); varctx = 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);

  11. //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 deducting it //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(); }

  12. //Lets draw the branches now function branches() { //reducing line_width and length length = length * reduction; line_width = line_width * reduction; ctx.lineWidth = line_width; varnew_start_points = []; ctx.beginPath(); for(vari = 0; i < start_points.length; i++) { varsp = start_points[i]; //2 branches will come out of every start point. Hence there will be //2 end points. There is a difference in the divergence. var ep1 = get_endpoint(sp.x, sp.y, sp.angle+divergence, length); var ep2 = get_endpoint(sp.x, sp.y, sp.angle-divergence, length); //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);

  13. //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 varepx = x + length * Math.cos(a*Math.PI/180); varepy = y + length * Math.sin(a*Math.PI/180); return {x: epx, y: epy}; }}

  14. 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;}

  15. window.onload = function(){ var canvas = document.getElementById("canvas"); varctx = 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 varparticle_count = 100; for(vari = 0; i < particle_count; i++) { particles.push(new particle()); } //finally some mouse tracking canvas.addEventListener('mousemove', track_mouse, false);

  16. 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}; }

  17. //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";

  18. for(vari = 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;

  19. //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);}

  20. پوسته موزیـک پلیر یک موزیـک پلیر که با استفاده از CSS3 و HTML5 درست شده است.

  21. <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>

  22. .music-player {   font-family: Arial, Helvetica;   display: inline-block;   width: 600px;   height: 100px;   background : -webkit-gradient(linear, left top, left bottombottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(128,132,135)));   background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(128,132,135) 100%);  

  23. 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);   }  

  24. .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);   }  

  25.   .music-player-toggle-inner {   display: inline-block;   width: 50px;   height: 45px;   background : -webkit-gradient(linear, left top, left bottombottom, color-stop(0.25, rgb(252,252,252)), color-stop(1, rgb(128,132,135)));   background : -moz-linear-gradient(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;       }  

  26. .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 : -webkit-gradient(linear, left top, left bottombottom, color-stop(0.25, rgb(227,233,195)), color-stop(1, rgb(198,218,149)));   background : -moz-linear-gradient(center top, rgb(227,233,195) 25%, rgb(198,218,149) 100%);  

  27. 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);       }  

  28. .music-player-shade {       top: 0;   display: inline-block;   position: absolute;   width: 450px;   height: 25px;   background: rgba(255, 255,255, 0.2);   }  

  29. .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;   }  

  30. .music-player-played {   display: inline-block;   width: 175px;   height: 9px;       -webkit-border-radius: 6px;       -moz-border-radius: 6px;   border-radius: 6px;   background : -webkit-gradient(linear, left top, left bottombottom, color-stop(0.25, rgb(146,150,131)), color-stop(1, rgb(80,85,65)));   background : -moz-linear-gradient(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);  }  

  31. با تشکر از توجه شما

More Related