Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Introduccion Del HTML

    Cargado por

    Elmer Albines Rivas
    11 vistas14 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    11 vistas14 páginas

    Introduccion Del HTML

    Cargado por

    Elmer Albines Rivas

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 14

    INTRODUCCION DEL HTML.5 HTML 5 es la quinta revisin ms importante que se hace al lenguaje HTML.

    En esta versin, se introducen nuevas caractersticas para ayudar a los autores de aplicaciones Web, y se ha prestado especial atencin a la definicin de claros criterios de conformidad para los agentes de usuario (navegadores) en un esfuerzo por mejorar la interoperabilidad. La especificacin actual de HTML 5 la podemos consultar aqu. Podemos seguir los cambios que se hacen a la especificacin del HTML 5 en Twitter. Los integrantes del grupo de trabajo para definir las especificaciones del HTML 5 pertenecen a muchas empresas y los podemos ver aqu. Este tutorial presenta los elementos de HTML 5 que estn actualmente siendo implementados por los navegadores: FireFox, Chrome, Safari, Opera y esperemos prximamente IE.

    2 - DOCTYPE

    La declaracin del tipo de documento (DTD Document Type Declaration), esta seccin se ubica en la primera lnea del archivo HTML, es decir antes de la marca html. Segn el rigor de HTML 4.01 utilizado podemos declararla como: Declaracin transitoria:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Declaracin estrcta:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Ahora con el HTML 5 se simplifica esta seccin con la siguiente sintaxis:


    <!DOCTYPE HTML>

    Es importante agregar el DOCTYPE, de esta forma el navegador puede saber que estamos utilizando la especificacin del HTML 5. EJEMPLO <!DOCTYPE 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>

    Si vemos el cdigo fuente de esta pgina veremos la forma de declarar el DOCTYPE en HTML5.

    3 - CANVAS

    CANVAS es una nueva marca del HTML 5, permite dibujar en dicha rea mediante JavaScript. El objetivo de este elemento es hacer grficos en el cliente (navegador), juegos etc. Para hacer un uso efectivo de este nuevo elemento de HTML tenemos que manejar el JavaScript. La estructura de un programa que accede al canvas es:
    <html> <!DOCTYPE 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>

    La primer funcin que implementaremos y ser de uso comn en todos los problemas es la que retorna la referencia al objeto que nos permite dibujar en el canvas:
    function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; }

    La funcin recibe el "id" que hemos especificado en el elemento canvas dispuesto en la pgina (en este ejemplo le llamamos lienzo1):
    <canvas id="lienzo1" width="300" height="200"> Su navegador no permite utilizar canvas. </canvas>

    En caso que el navegador no implemente la especificacin del elemento canvas produce un falso el if (lo que estamos haciendo en este if es comprobar si existe la funcin getContext, en caso afirmativo el navegador soporta canvas):
    if (canvas.getContext)

    En caso de implementar el canvas obtenemos una referencia del mismo llamando a la funcin getContext y pasando como parmetro un string con el valor "2d" (a futuro es probable la implementacin de un canvas que permita "3d"):
    var lienzo = canvas.getContext("2d");

    La funcin dibujar es la que se ejecuta luego que se carga la pgina en el navegador:


    function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle = "rgb(200,0,0)"; lienzo.fillRect (10, 10, 100, 100); } }

    En esta funcin llamamos a la anterior "retornarLienzo("lienzo1") pasando como parmetro el id del canvas respectivo. En caso que la funcin retorne la referencia al lienzo el if se verificar como verdadero y estaremos en condiciones de comenzar a dibujar en el mismo:
    var lienzo=retornarLienzo("lienzo1"); if (lienzo)

    Mediante la variable lienzo podemos acceder a un conjunto de funciones y propiedades disponibles para dibujar. En nuestro ejemplo:
    lienzo.fillStyle = "rgb(200,0,0)"; lienzo.fillRect (10, 10, 100, 100);

    Activamos como color de relleno de figura el rojo (200,0,0) y seguidamente llamamos a la funcin fillRect que dibuja un rectngulo desde la posicin (10,10) con ancho de 100 pxeles y un alto de 100 pxeles. La coordenada (0,0) se encuentra en la parte superior izquierda. ejemplo <!DOCTYPE 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>

    4 - CANVAS (dibujar lneas)

    Para dibujar lneas disponemos de una serie de mtodos que debemos llamar en un orden predeterminado. El algoritmo para dibujar dos lneas que formen una letra "V" es:
    <!DOCTYPE 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>

    Inicializamos la propiedad que fija el color de la lnea:


    lienzo.strokeStyle = "rgb(200,0,0)";

    Llamamos al mtodo beginPath para indicar que comenzamos a dibujar la/s lnea/s:
    lienzo.beginPath();

    Movemos el puntero grfico a la coordenada donde comenzar a dibujarse llamando al mtodo moveTo:
    lienzo.moveTo(0,0);

    A travs del mtodo lineTo trazamos una lnea desde donde se encuentra el puntero grfico hasta la coordenada indicada mediante parmetros:
    lienzo.lineTo(150,300);

    Trazamos una segunda lnea desde donde finaliz la anterior hasta la nueva coordenada:
    lienzo.lineTo(300,0);

    Para que se hagan efectivas todas la lneas trazadas hasta el momento debemos llamar al mtodo stroke:
    lienzo.stroke();

    El puntero grfico se desplaza cada vez que llamamos al mtodo lineTo. EJEMPLO.. <!DOCTYPE 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>

    5 - CANVAS (dibujar rectngulo - permetro)

    Para dibujar rectngulos disponemos del mtodo strokeRect. Dispone de cuatro parmetros, los dos primeros indican la columna y fila inicial del rectngulo y los otros dos representan el ancho y alto en pxeles. El mtodo strokeRect es afectado por la propiedad strokeStyle. Solo se pinta el permetro del rectngulo indicado. Dibujaremos un rectngulo ubicado en la columna 50 y fila 10 con un ancho de 200 pxeles y 100 pxeles de altura:
    <!DOCTYPE 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(0,0,255)"; lienzo.strokeRect(50,10,200,100);

    } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>

    Activamos el color azul y dibujamos inmediatamente el rectngulo:


    lienzo.strokeStyle = "rgb(0,0,255)"; lienzo.strokeRect(50,10,200,100);

    <!DOCTYPE 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(0,0,255)"; lienzo.strokeRect(50,10,200,100);

    } } </script>

    </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>

    6 - CANVAS (estilos de lnea)

    Disponemos de varias propiedades para configurar el etilo de la lnea. Mediante un ejemplo veremos como fijar valores a las propiedades: lineWidth, lineCap y lineJoin.
    <!DOCTYPE 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.beginPath(); lienzo.strokeStyle="rgb(255,0,0)"; lienzo.lineWidth=7; lienzo.moveTo(10,5); lienzo.lineTo(10,295); lienzo.stroke(); lienzo.beginPath(); lienzo.strokeStyle="rgb(0,255,0)";

    lienzo.lineCap="butt"; lienzo.moveTo(30,5); lienzo.lineTo(30,295); lienzo.stroke(); lienzo.lineCap="round"; lienzo.beginPath(); lienzo.moveTo(50,5); lienzo.lineTo(50,295); lienzo.stroke(); lienzo.lineCap="square"; lienzo.beginPath(); lienzo.moveTo(70,5); lienzo.lineTo(70,295); lienzo.stroke(); lienzo.beginPath(); lienzo.strokeStyle="rgb(0,0,255)"; lienzo.lineJoin="bevel"; lienzo.moveTo(100,90); lienzo.lineTo(130,10); lienzo.lineTo(160,90); lienzo.stroke(); lienzo.beginPath(); lienzo.lineJoin="round"; lienzo.moveTo(100,180); lienzo.lineTo(130,100); lienzo.lineTo(160,180); lienzo.stroke(); lienzo.beginPath(); lienzo.lineJoin="miter"; lienzo.moveTo(100,270); lienzo.lineTo(130,190); lienzo.lineTo(160,270); lienzo.stroke(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>

    Para definir el ancho de la lnea disponemos de la propiedad lineWidth:


    lienzo.lineWidth=7;

    La propiedad lineCap indica como se grafican los puntos extremos de la lnea:


    lienzo.lineCap="butt";

    Los valores permitidos son: "butt", "round" y "square".Si disponemos "butt" lo finaliza inmediatamento, si indicamos "round" genera un semicrculo y con "square" dibuja un cuadrado. La tercer propiedad es lineJoin. Con esta indicamos como debe procederse a graficar en los vrtices de uniones de segmentos. Los valores permitidos son: "bevel", "round" y "miter". EJEMPLO <!DOCTYPE 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.beginPath(); lienzo.strokeStyle="rgb(255,0,0)"; lienzo.lineWidth=7; lienzo.moveTo(10,5); lienzo.lineTo(10,295);

    lienzo.stroke();

    lienzo.beginPath(); lienzo.strokeStyle="rgb(0,255,0)"; lienzo.lineCap="butt"; lienzo.moveTo(30,5); lienzo.lineTo(30,295); lienzo.stroke(); lienzo.lineCap="round"; lienzo.beginPath(); lienzo.moveTo(50,5); lienzo.lineTo(50,295); lienzo.stroke(); lienzo.lineCap="square"; lienzo.beginPath(); lienzo.moveTo(70,5); lienzo.lineTo(70,295); lienzo.stroke(); lienzo.beginPath(); lienzo.strokeStyle="rgb(0,0,255)"; lienzo.lineJoin="bevel"; lienzo.moveTo(100,90); lienzo.lineTo(130,10); lienzo.lineTo(160,90); lienzo.stroke(); lienzo.beginPath(); lienzo.lineJoin="round";

    lienzo.moveTo(100,180); lienzo.lineTo(130,100); lienzo.lineTo(160,180); lienzo.stroke(); lienzo.beginPath(); lienzo.lineJoin="miter"; lienzo.moveTo(100,270); lienzo.lineTo(130,190); lienzo.lineTo(160,270); lienzo.stroke();

    } } </script>

    </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>

    También podría gustarte