Clase 6

PROGRAMACION WEB 2008
FUNDACIÓN RED MILENIUM
Clase 6:
VML son las siglas para Vector Markup Language VML se escribe
usando la sintaxis de XML (Extensible Markup Language). El VML se
utiliza para producir gráficos orientados a objetos (vectores) junto con la
información de como se han de mostrar y como editar esta información.
Antes que nada…
En la etiqueta <HTML> agregar:
<html xmlns:v="urn:schemas-microsoft-com:vml">
Y en el <HEAD>:
<style>
v\:* { behavior: url(#default#VML); }
</style>
Ahora está listo para usar VML!
Formas predefinidas
VML proporciona los siguientes elementos predefinidos:
 Rect para trazar un rectángulo

 Roundrect para trazar un rectángulo de esquinas
redondeadas
 Line Línea Recta
 Polyline formas que se crean con segmentos de línea
conectadas
 curve- cubic
 bezier curve
 oval
 arc- segment of an oval
Ejemplo 1:
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<TITLE>Primer Ejemplo VML</TITLE>
<style>
</style>
</HEAD>
<BODY>
<v:rect
style="width:100;height:100"
fillcolor="red"
strokecolor="blue"/>
</BODY>
</HTML>
1
El resultado es un cuadrado con las siguientes características:
 ancho (width): 100; altura (height): 100

 Color fondo (fillcolor): rojo
 borde (strokecolor): azul.
Si desea dibujar un óvalo azul:
<v:oval style="width:100;height:80" fillcolor="blue">

</v:oval>
Ejemplo2: Formas Predefinidas
<HEAD>
<TITLE>Predefined shapes - Example 3</TITLE>
<style>
</style>
</HEAD>
<BODY>
<v:roundrect style="width:100;height:100"
arcsize="0.3" fillcolor="blue" strokecolor="red"/>
<br>
<v:line style="width:100;height:100"
from="0,0" to="100,100"
strokecolor="red" strokeweight="4pt"/>
<br>
<v:polyline style="width:100;height:100"
points="0,60,50,90,60,10,100,100"
strokecolor="blue" strokeweight="1pt"/>
<br>
<v:curve style="width:100;height:100"
from="0,0" control1="30,200" control2="80,10"
to="100,0" strokecolor="red" strokeweight="3pt"/>
<br>
<v:arc style="width:100;height:100"
startangle="0" endangle="120"
strokecolor="blue" strokeweight="2pt"/>
<br>
<v:oval style="width:100;height:50"
fillcolor="blue" strokecolor="red" strokeweight="3pt"/>
</BODY>
</HTML>
Ejemplo 4 Stroke - dashstyle / tipo de línea:
2
<HEAD>
<TITLE>Stroke - Example 4</TITLE>
<style>
</style>
</HEAD>
<BODY>
from="0,0" to="100,100"
strokecolor="black" strokeweight="2pt">
<v:stroke dashstyle="solid"/>
</v:line>
from="0,0" to="100,100"
strokecolor="blue" strokeweight="2pt">
<v:stroke dashstyle="dot"/>
</v:line>
from="0,0" to="100,100"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dash"/>
</v:line>
from="0,0" to="100,100"
strokecolor="green" strokeweight="2pt">
<v:stroke dashstyle="dashdot"/>
</v:line>
from="0,0" to="100,100"
strokecolor="grey" strokeweight="2pt">
<v:stroke dashstyle="longdash"/>
</v:line>
from="0,0" to="100,100"
strokecolor="black" strokeweight="2pt">
<v:stroke dashstyle="longdashdot"/>
</v:line>
</BODY>
</HTML>
SOLID DOT DASH DASHDOT LONGDASH LONGDASHDOT
3
Fondo Degradado
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Request for Information</title>
<style>
v\:* {behavior:url(#default#VML);}
</style>
<script language="JavaScript">
function rotateGradient() {
}
</script>
</head>
<body onload="window.setInterval('rotateGradient()', 1)">

<v:background fillColor="#FF9999">
<v:fill type="gradient" angle="145"/>
</v:background>
<h1>Este es nuestro fondo</h1>
</body>
</html>
4
Textos
<HEAD>
<TITLE>VML Example - 2 (shape)</TITLE>
<style>
</style>
</HEAD>
<BODY>
<v:shape coordsize="200,200" style="width: 300px; height: 400px;
float: left" path="m 0,50 c 25,0 75,0 100,50 c 125,0 175,0 200,50 e m
0,75 c 25,137 75,137 100,200 c 125,137 175,137 200,75 e"
fillcolor="red">
<v:path textpathok="true" />
<v:textpath on="true" fitshape="true" fitpath="true"
string="PROGRAMACIÓN" style="font-family: 'Arial Black';" />
<v:extrusion on="true" type="parallel" color="black"/>
</v:shape>
<v:shape coordsize="200,200" style="width: 400px; height: 500px;

float: left" path="m 0,50 c 25,0 75,0 100,50 c 125,0 175,0 200,50 e m
0,75 c 20,125 25,148 100,200 c 175,148 170,125 200,75 e"
fillcolor="red">
<v:path textpathok="true" />
<v:textpath on="true" fitshape="true" fitpath="true" string="WEB"
style="font-family: 'Arial Black';" />
<v:extrusion id="ext" on="true" type="parallel" color="red"
metal="true" backdepth="20pt" rotationangle="0,-45" />
</v:shape>
</BODY>
</HTML>
Formas
5
<HEAD>
<TITLE>VML Example - 2 (shape)</TITLE>
<style>
</style>
</HEAD>
<BODY>
<v:shape style="width: 250px; height: 250px"
stroke="true" strokecolor="red" strokeweight="3px"
fill="true" fillcolor="blue"
coordorigin="0 0" coordsize="175 175">
<v:path v="m 10,70
l 85,10,160,70,160,160,10,160
x e"/>
</v:shape>
</BODY>
</HTML>
* Los valores de 10,70 m indicar el punto de

inicio.
* Los valores l 85,10,160,70,160,160,10,160

indican que una línea recta que se inicia en el
primer punto (10, 70) y termina en el punto
(85, 10), que se convierte en el nuevo punto
actual. Una nueva línea comienza en este
punto y termina en el siguiente punto, que se
convierte en el nuevo punto actual, y así sucesivamente, hasta el último
punto (10, 160).
* Símbolos xe: x indica que el camino se estrecha por una línea recta al
punto de origen (10,70); el sentido de la e es "dejar de dibujar".
También interesante en este caso es la definición de los locales de

coordinar el espacio:
* Coordorigin = "0 0" – Define la coordenada de origen
* Coordsize = "175 175" - Define el tamaño de las coordenadas

Clase 6

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase 6

Cargado por

Copyright:

Formatos disponibles

PROGRAMACION WEB 2008

FUNDACIÓN RED MILENIUM

Antes que nada…

En la etiqueta <HTML> agregar:

Ahora está listo para usar VML!

VML proporciona los siguientes elementos predefinidos:

 Rect para trazar un rectángulo

El resultado es un cuadrado con las siguientes características:

 ancho (width): 100; altura (height): 100

Si desea dibujar un óvalo azul:

<v:oval style="width:100;height:80" fillcolor="blue">

Ejemplo2: Formas Predefinidas

Ejemplo 4 Stroke - dashstyle / tipo de línea:

SOLID DOT DASH DASHDOT LONGDASH LONGDASHDOT

<body onload="window.setInterval('rotateGradient()', 1)">

<v:shape coordsize="200,200" style="width: 400px; height: 500px;

* Los valores de 10,70 m indicar el punto de

* Los valores l 85,10,160,70,160,160,10,160

También interesante en este caso es la definición de los locales de

También podría gustarte