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
b) En el archivo *.css
Ejemplo:
a) En el archivo *.html agregar en una nueva <section>
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:
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"/><circle
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:
Ejemplo:
a) Crear el el archivo de javascript miscanvas.js en una carpeta js
Formato UNICODE:
estándar de codificación de caracteres universal
canvas puede definirse
como un entorno para crear imágenes dinámicas.
Se apoya en JavaScripten en JavaScriptEjemplo:
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>
<script src="js/miscanvas.js"></script>
c) En el archivo *.html agregar en una nueva <section>
<canvas id="cva001" width="valor"
height="valor">Aqui va algo</canvas>
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á: ❀
para que se muestre el carácter cuyo código hexadecimal es 2740 inserta: ❀
Se mostrará: ❀
Ejemplo 2:
<pre>
╚╩
</pre>
Otra alternativa es usar javascript
<script
type="text/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”
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
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>
╚╩
</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%;
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
No hay comentarios.:
Publicar un comentario