NetBeans y Pruebas Centradas en el Usuario: 008 Graficos en html

008 Crear Graficos en HTML

Ing. Honoria Reyes Macedo

INTRODUCCION: GRAFICOS EN HTML

El uso de imágenes para transmitir mensajes, es muy utilizado en la wb. Existen navegadores que no tienen activada la opcion de cargar imágenes, y los que si lo cargan pueden tardar varios segundos y hasta minutos; por lo que el uso de graficos es una alternativa para evitar este tipo de problemas.

En html se puede optar por usar SVG o CANVAS,tambien utiliza caracteres UNICODE.

Formato SVG: SVG es la abreviatura en ingles de Scalable Vector Graphics (Gráficos Vectoriales Escalables).

el formato SVG está basado en XML

Ejemplo:

a) En el archivo *.html agregar en una nueva <section>

<svg width="500" height="50"> <circle cx="25" cy="25" r="22" class="cicl001"/></svg>

b) En el archivo *.css
svg .cicl001 {

fill: yellow;

stroke: orange;

stroke-width: 5;

}

c) Definición para las demás formas:

Rectángulo <rect>
Círculo <circle>
Elipse <ellipse>
Línea <line>
Polilínea <polyline>
Polígono <polygon>
Ruta <path>

<rect x="0" y="0" width="500"
height="50"/>

<circl

e
cx="25" cy="25" r="22"

/>

<ellipse cx="250" cy="25" rx="100"
ry="25"/>

<line x1="0" y1="0" x2="500"
y2="50" stroke="black"/>

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>

Formato CANVAS: canvas puede definirse como un entorno para crear imágenes dinámicas. Se apoya en JavaScripten en JavaScript

Ejemplo:

a) Crear el el archivo de javascript miscanvas.js en una carpeta js

b)Agregar la liena siguiente en el archivo *.html antes de cerrar <body>

<script src="js/miscanvas.js"></script>

c) En el archivo *.html agregar en una nueva <section>

d) Capturar en el archivo de javaScript miscanvas.js

var miCANVAS = document.getElementById("cva001");

if (miCANVAS.getContext) {

var canvas = miCANVAS.getContext("2d");

// aquí lo manipularemos

canvas.fillStyle = "#FFF";

canvas.fillRect (10,10,100,100);

canvas.fillStyle= "pink";

canvas.strokeRect(15,15,40,40);

canvas.globalAlpha="lighter";

canvas.shadowColor="blue";

canvas.clearRect(35,35,35,35);

canvas.translate(70,70);

} else {

// advertencia : el navegador no soporta canvas

}

Formato UNICODE:
estándar de codificación de caracteres universal

Eemplo:
para que se muestre el carácter cuyo código hexadecimal es 2740 inserta: ❀
Se mostrará: ❀

Ejemplo 2:

Otra alternativa es usar javascript

document.write('\u2740')

</script>

Se mostrará: ❀

******************************* *********

EJERCICIOS

1) Hacer la leyenda en una pagina html
" DESARROLLO CENTRADO EN EL USUARIO "
o “Desarrollo Centrado en el Usuario”

Ejemplo:

<pre id="tit002"> ╔═╦═╦═╦═╦═╦═╦═╦╦╦═╗ ║║╠╠╬╚╣╬║╝╣╝╣║║║║║║ ╚═╩═╩╚╩╩╩╩╩╩╩═╩╩╩═╝

</pre>

Nota:

a) Usar la etiqueta <PRE> de html para que el navegador respete los espacios y saltos de linea.

Ejemplo:    <pre>
       ╚╩
                    </pre>

b) En el archivo de estilos poner margen, color de letra y tamaño de letra

Ejemplo: pre {

    padding-left:5em;
    color:#06C;
    font-size:3em;
    line-height:1em;
    background-color:#999;
    margin:.5em 0 .5em 0;
    text-align:left;
    width:80%;

}

Utilizando caracteres Unicode como por ejemplo:

2) Crear un logo utilizando un editor para generar codigo SVG
(Ejemplo de software a utilizar: Ilustrator , http://www.inkscape.org/, t)

Agregarlo a una seccion de nuestras paginas html

3) Crear ina imagen con canvas

4) Poner animación a las imagenes

lunes, 14 de noviembre de 2016