Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Tarea 3

    Загружено:

    guefloes2931
    15 просмотров12 страниц

    Оригинальное название

    Tarea3

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    15 просмотров12 страниц

    Tarea 3

    Загружено:

    guefloes2931

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 12

    INTRODUCCIN

    La web de hoy en da trata de hacer nfasis en las nuevas tecnologas que se van desarrollando, una de estas tecnologas es la llamada WEB SEMNTICA, para esto se utiliza la nueva tecnologa del lenguaje para este fin, denominado HTML5.

    En el presente tarea se enfatiza a realizar un anlisis de algunos de los cdigos que facilita la URL http://www.htmlya.com.ar/html5/, donde estos cdigos son relacionados a canvas, audio, video y elementos semnticas.

    OBJETIVO GENERAL Analizar y ejecutar el cdigo alguno de los elementos de html 5 de la URL http://www.htmlya.com.ar/html5/.

    DESARROLLO En esta tarea vamos a realizar algunos ejemplos, en los que se utiliza los elementos nuevos que incorpora el HTML5, para el desarrollo de las pginas web.

    DOCTYPE

    Cdigo El cdigo que se detalla a continuacin, es un cdigo para demostrar el comportamiento del elemento doctype de HTML 5.

    <!DOCTTYPE HTML> <html> <head></head> <body> <p>Si vemos el cdigo fuente de esta pgina veremos la forma de declarar el DOCTYPE en HTML5.</p> </body> </html>

    Resultado

    Como resultado de este cdigo empleado, podemos visualizar la siguiente ventana con el resultado obtenido.

    CANVAS 3

    Cdigo El cdigo que se detalla a continuacin, es un cdigo para demostrar el ejemplo de canvas.

    <!DOCTTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle = "rgb(200,0,0)"; lienzo.fillRect (10, 10, 100, 100); } } </script> </head> <body onLoad="dibujar()">

    <canvas id="lienzo1" width="300" height="200">Su navegador no permite utilizar canvas.</canvas> </body> </html>

    Resultado En este ejemplo podemos visualizar los elementos que se utilizan en la etiqueta CANVAS, que viene incorporada en el HTML5.

    CANVAS 4

    Cdigo El cdigo que se detalla a continuacin, es un cdigo para demostrar el ejemplo de canvas.

    <!DOCTTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1");

    if (lienzo) { lienzo.strokeStyle = "rgb(200,0,0)"; //Inicio de camino lienzo.beginPath(); lienzo.moveTo(0,0); lienzo.lineTo(150,300); lienzo.lineTo(300,0); //Trazar linea lienzo.stroke(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300">Su navegador no permite utilizar canvas.</canvas> </body> </html>

    Resultado En este ejemplo podemos visualizar la ejecucin del cdigo que utilizamos anteriormente.

    CANVAS 7 Cdigo El cdigo que se detalla a continuacin, es un cdigo para demostrar el ejemplo de canvas.

    <!DOCTTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x)

    { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(255,0,0)"; lienzo.fillRect(10,10,200,100); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300">Su navegador no permite utilizar canvas.</canvas> </body> </html>

    Resultado En este resultado podemos observar el fcil manejo de las fisuras y objetos (Ejm. Cuadrados, Rombos, etc).

    CANVAS 9

    Cdigo

    El cdigo que se detalla a continuacin, es un cdigo para demostrar el ejemplo de canvas.

    <!DOCTTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(255,0,0)"; lienzo.strokeStyle="rgb(0,0,255)"; lienzo.lineWidth=5; lienzo.beginPath(); lienzo.moveTo(150,10); lienzo.lineTo(10,290); lienzo.lineTo(290,290); lienzo.lineTo(150,10); lienzo.fill(); lienzo.stroke(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300">Su navegador no permite utilizar canvas.</canvas> </body> </html>

    Resultado La figura siguiente es el resultado de la ejecucin del cdigo previa.

    CANVAS 14 Cdigo El cdigo que se detalla a continuacin, es un cdigo para demostrar el ejemplo de canvas.

    <!DOCTTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1");

    if (lienzo) { lienzo.fillStyle="rgb(0,0,0)"; lienzo.fillRect(0,0,600,600); img1 = new Image(); img1.src = 'canvas14.jpg'; img1.onload = function() { lienzo.drawImage(img1,0,0); lienzo.drawImage(img1,300,0,50,50); lienzo.drawImage(img1,0,0,125,125,0,300,72,72); } } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600">Su navegador no permite utilizar canvas.</canvas> </body> </html>

    Resultado En este ejemplo podemos visualizar el fcil manejo de las imgenes, con la nueva versin del HTML.

    AUDIO Cdigo El cdigo que se detalla a continuacin, es un cdigo para demostrar un ejemplo de audio en HTML 5.

    <!DOCTTYPE HTML> <html> <head></head> <body> <audio controls> <source src="Haciendo el amor.mp3"> </audio> </body> </html>

    Resultado En este ejemplo podemos visualizar la fcil integracin del audio a nuestras paginas web, por lo que facilita el manejo de esto.

    VIDEO Cdigo El cdigo que se detalla a continuacin, es un cdigo para demostrar el ejemplo de video en HTML 5.

    <!DOCTTYPE HTML> <html> <head></head> <body> <video width="640" height="360" controls> <source src="Amor de lejos.wmv"> </video>

    </body> </html>

    Resultado En este apartado podemos visualizar la integracin de los videos a nuestra pgina, de fcil manejo y utilizacin.

    ELEMENTO SEMNTICO

    Cdigo El cdigo que se detalla a continuacin, es un cdigo para demostrar el ejemplo de un elemento semntico en HTML 5.

    <!DOCTTYPE HTML> <html lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Elementos semnticos del HTML5</title> </head> <body> <header> <h1>Encabezado de la pgina</h1> </header> <nav>

    <p>enlaces de navegacin</p> </nav> <section> <p>Seccin 1</p> </section> <section> <p>Seccin 2</p> </section> <aside> <p>Publicidad</p> </aside> <footer> <p>Pi de pgina</p> </footer> </body> </html>

    Resultado En esta figura podemos visualizar la ejecucin del cdigo anteriormente expuesto en nuestro ejemplo.

    A manera de conclusin podemos decir que en este apartado aprendimos a utilizar algunos de los elementos que se han incorporado a la nueva versin del HTML.

    BIBLIOGRAFA o http://www.htmlya.com.ar/html5/

    Вам также может понравиться