|
[[File:VMLJoconde.jpg|thumb|Ritratto sviluppato con codice VML: [http://www.svg-vml.net/Joconde.htm La Gioconda in VML (33Kb)]]]
[[File:VMLog.gif|thumb|right|Logo di VML]]
[[File:VMLJoconde.jpg|thumb|right|Ritratto sviluppato con codice VML: [http://www.svg-vml.net/Joconde.htm La Gioconda in VML (33Kb)]]]
'''Vector Markup Language''' (VML) è un linguaggio [[Extensible Markup Language|XML]] aperto, destinato alla creazione di [[grafica vettoriale]] elaborate in 2D o 3D (statiche o animate) sulle pagine Web.
== Storica ==
VML èfu stato sottomessosottoposto come proposta di standard al [[World Wide Web Consortium|W3C]] nel 1998, per [[Autodesk]], [[Hewlett-Packard]], [[Macromedia]], Microsoft e Visio, ma si trovù in concorrenza con il [[PGML]] proposto da Adobe systems e [[Sun Microsystems]]. Dopo un lungo esame, il W3C decide di abbinare questi due formati, dando vita al formato [[Scalable Vector Graphics|SVG]].
Packard, Macromedia, Microsoft e Visio, ma si trova in concorrenza con il [[PGML]] proposto da Adobe systems e Sun Microsystems. Dopo un lungo esame, il W3C decide di
abbinare questi due formati, dando luce al formato [[SVG]].
VML è introdotto in [[Internet Explorer]], [[Microsoft Office]] e [[Silverlight]]. Fa parte della specificazione OOXML, dove viene definito in complemento di DrawingML.
== Utilizzo del formato sull’sul Web ==
Il linguaggio VML può integrarsi sia direttamente nel codice [[HTML]], sia tramite l’elementol'elemento <code>v:vmlframe</code> legato ad un o più file XML. Questo elemento permette di sistemare le graficaimmagini vettoriali in modo analogo alle immagini bitmap. L’utilizzazioneL'uso degli attributi <code>width</code> e <code>height</code> permettendopermette d’ingrandired'ingrandire o di ridurre le graficaimmagini senza perdita di qualità. NumerosiÈ possibile applicare numerosi effetti di filtro sono possibili sulle immagini che possono essere ugualmente messe nel sotto-elemento <code>v:fill</code> e prendere effetto degli attributi di colore e digradati, con utilizzo del [[canale alpha]] pourper la [[trasparenza]]. Esistono tre tipi di digradati da VML : gradient (lineare),
gradientRadial e gradientTitle (con focus variabile). L’extrusionL'extrusion 3D permette la messa in rilievo di ogni elemento VML: gli effetti di luce apportando profondità e realismo alle grafica.
VML è un linguaggio che permette realizzazioni complesse su file di formato [[XML]]. VML è maneggiabile con [[JavaScript]] o [[JScript]] e più comodamente con HTML + TIME per le animazioni.
[[Google Maps]] utilizza attualmente VML per il reso vettoriale con Internet Explorer, e SVG per i navigatori che lo sopportanosupportano.
== Esempi di codice ==
[[FileImage:Ovale blu.svggif|thumb|right|Risultato del codice esemplificativo]]
Il codice VML seguente integrato nel codice HTML mostra una semplice [http://www.svg-vml.net/oval.htm ellisse] {{Webarchive|url=https://web.archive.org/web/20091212050602/http://www.svg-vml.net/oval.htm# |data=12 dicembre 2009 }}:
<sourcesyntaxhighlight lang = "xml">
<html xmlns:v>
<style>v\:*{behavior:url(#default#VML);position:absolute}</style>
</body>
</html>
</syntaxhighlight>
</source><br>
<hr>
Le regole CSS sono utilizzate per i posizionamenti, la formattazione del testo, le dimensioni e i filtri quando essi possono essere applicati.<br>
La creazione di oggetti “modello” e la loro duplicazione si effettua tramite l’elemento <code>v:shapetype</code> per ogni forma vettoriale, e l’elemento <code>v:vmlframe</code> per i gruppi di oggetti vettoriali.<br><br>
Qui sotto: Esempio più complesso di combinazioni di elementi ed attributi propri a VML dentro il codice HTML.<br>
Una <font color=red>'''forma'''</font> definita da un file XML esterna è introdotta da l’elemento vmlframe su il quale un filtro e applicato. <br>
Altre <font color=#60CC00>''' forme periferiche'''</font> sono calcate su una <font color=green>'''shapetype'''</font>.
Ogni forma discendente di questa ultima può anche prendere i suoi propri attributi distinti del modello. L'<font color=#9F3300>''' insieme'''</font> raggruppato da l’elemento '''v:group''' viene a suo tempo riprodotto da una nuova "<font color=fuchsia>'''vmlframe'''</font>".<br>
Queste proprietà permettono delle composizioni vettoriali molto ricche utilizzando poche scritture.<br>
<table border=1 style="background-color:#A1C1CF;font-size:12px;width:690px">
<tr><td>
[[Image:VMLfireball.jpg|306px|thumb|right|Illustrazione di esempi: [http://www.web-vector-image.net/fireball.htm VML COLORED FIREBALL]]]
<span style="background-color:aqua"><b> File HTML </b></span>
<br><br>
<<font color=#9933A3><b>html</b></font> xmlns:v><br><br>
<<font color=#9933A3><b>style</b></font>><br>
v\:*<font color=#d65700>{behavior:url(#default#VML);position:absolute}</font><br>
v\:shape<font color=#d65700>{width:10000;height:10000}</font><br>
v\:group<font color=#d65700>{width:1000;height:1000}</font><br>
<<font color=#9933A3><b>/style</b></font>><br><br>
<<font color=#9933A3><b>body</b></font>><br><br>
<<font color=#9933A3><b>h1</b></font>>VML
COLORED FIREBALL<<font color=#9933A3><b>/h1</b></font>><br><br>
<<font color=red><b>v</b></font><b>:shapetype id=</b>"<font color=green><b>arw</font></b>"<b> path=</b>"
<font color=blue>m,c2,2,4,5,6,11,5,8,3,5,,2,1,2,,1,,e</font>"<b> fillcolor=</b>"<font color=blue>red</font>"><br>
<<font color=red><b>v</font>:stroke color=</b>"<font color=blue>yellow</font>"
<b>weight=</b>"<font color=blue>4</font>" <b>opacity=</b>"<font color=blue>.4</font>"/><br>
<<font color=red><b>/v</font>:shapetype</b>><br><br>
<<font color=red><b>v</font>:vmlframe src="<font color=#414141>ball.xml</font><font color=red>#ball</font>"
clip=</b>"<font color=blue>t</font>" <b>size=</b>"<font color=blue>32,32</font>"<br>
<b>style=</b>"<font color=blue>top:55;width:580;height:550;background-color:white;filter:blur(Add=1,Strength=140)</font>"/>
<br>
<br>
<<font color=red><b>v</font>:group id=</b>"<font color=#713300><b>gr1</b></font>"
<b>style=</b>"<font color=blue>left:80;top:25</font>">
<br>
<br>
<<font color=red><b>v</font>:shape type=</b>"<font color=green><b>#arw</font>"
style=</b>"<font color=blue>left:65;top:50;width:55000;height:4000</font>"
<b>fillcolor=</b>"<font color=blue>aqua</font>" <b>strokecolor=</b>"<font color=blue>lime</font>"/><br>
<<font color=red><b>v</font>:shape type=</b>"<font color=green><b>#arw</b></font>"
<b>style=</b>"<font color=blue>left:460;top:80</font>"<b> fillcolor=</b>"<font color=blue>fuchsia</font>"/><br>
<<font color=red><b>v</font>:shape type=</b>"<font color=green><b>#arw</b></font>"
<b>style=</b>"<font color=blue>left:-1900;top:1430;width:5000;height:4000;rotation:50</font>"/>
<br>
<br>
<<font color=red><b>/v</font>:group</b>>
<br>
<br>
<<font color=red><b>v</font>:vmlframe src=</b>"<font color=fuchsia><b>#gr1</b></font>"<b> style=</b>"
<font color=blue>left:390;top:140;width:200;height:150</font>"/>
<br>
<br>
<<font color=#9933A3><b>/body</b></font>><br>
<<font color=#9933A3><b>/html</b></font>>
----
</table>
Le regole CSS sono utilizzate per i posizionamenti, la [[formattazione del testo]], le dimensioni e i filtri quando essi possono essere applicati.
La creazione di oggetti “modello” e la loro duplicazione si effettua tramite l'elemento <code>v:shapetype</code> per ogni forma vettoriale, e l'elemento <code>v:vmlframe</code> per i gruppi di oggetti vettoriali.
<table border=1 style="background-color:#A3C7A2;font-size:12px;width:690px">
<tr><td>
Qui sotto: Esempio più complesso di combinazioni di elementi ed attributi propri a VML dentro il codice HTML.
<span style="background-color:lime"><b> File XML esterna: "<font color=#414141>ball.xml</font>" </b></span>
<br><br>
Una forma definita da un file XML esterna è introdotta da l'elemento vmlframe su il quale un filtro e applicato.
<font color=#9933A3><xml <font color=maroon>xmlns:v</font>>
Altre forme periferiche sono calcate su una shapetype.
<br>
Ogni forma discendente di questa ultima può anche prendere i suoi propri attributi distinti del modello. L'insieme raggruppato dall'elemento "v:group" viene a suo tempo riprodotto da una nuova "vmlframe".
<br>
<v:group <font color=maroon>id="</font><font color=red><b>ball</b></font>" style="<font color=blue>width:2000;height:2000</font>">
Queste proprietà permettono delle composizioni vettoriali molto ricche utilizzando poche scritture.
<br>
<br>
{| border="1" style="background-color:#A1C1CF;font-size:12px;width:690px"
<v:shape <font color=maroon>style</font>="<font color=blue>left:4;top:1</font>"
|-
<font color=maroon>path</font>="<font color=blue>m9,1l9,r1,2l11,1r,2l12,2v,4,,7,-7,6l6,7,4,6r1,c6,6,6,5,3,4r1,l,2r3,l2,1r3,l4,xnse</font>">
|
<br>
[[Image:VMLfireball.jpg|upright=1.4|thumb|Illustrazione di esempi: [https://web.archive.org/web/20100110220249/http://www.web-vector-image.net/fireball.htm VML COLORED FIREBALL]]]
<v:fill <font color=maroon>color</font>="<font color=blue>red</font>"
<span style="background-color:aqua">''' File HTML '''</span>
<font color=maroon>color2</font>="<font color=blue>yellow</font>"
<font color=maroon>focusposition</font>="<font color=blue>.99,.8</font>"
<<span style="color:#9933A3">'''html'''</span> xmlns:v>
<font color=maroon>focussize</font>="<font color=blue>.01,.01</font>"
<font color=maroon>type</font>="<font color=blue>gradientTitle</font>"/><br>
<<span style="color:#9933A3">'''style'''</span>><br />
<v:stroke <font color=maroon>weight</font>="<font color=blue>4</font>"
v\:*<span style="color:#d65700">{behavior:url(#default#VML);position:absolute}</span><br />
<font color=maroon>color</font>="<font color=blue>yellow</font>"
v\:shape<span style="color:#d65700">{width:10000;height:10000}</span><br />
<font color=maroon>opacity</font>="<font color=blue>.5</font>"/><br>
v\:group<span style="color:#d65700">{width:1000;height:1000}</span><br />
<<span style="color:#9933A3">'''/style'''</span>>
<<span style="color:#9933A3">'''body'''</span>>
<<span style="color:#9933A3">'''h1'''</span>>VML
COLORED FIREBALL<<span style="color:#9933A3">'''/h1'''</span>>
<<span style="color:red">'''v'''</span>''':shapetype id='''"'''<span style="color:green">arw</span>'''"''' path='''"
<span style="color:blue">m,c2,2,4,5,6,11,5,8,3,5,,2,1,2,,1,,e</span>"''' fillcolor='''"<span style="color:blue">red</span>"><br />
<'''<span style="color:red">v</span>:stroke color='''"<span style="color:blue">yellow</span>"
'''weight='''"<span style="color:blue">4</span>" '''opacity='''"<span style="color:blue">.4</span>"/><br />
<'''<span style="color:red">/v</span>:shapetype'''>
<'''<span style="color:red">v</span>:vmlframe src="<span style="color:#414141">ball.xml</span><span style="color:red">#ball</span>" clip='''"<span style="color:blue">t</span>" '''size='''"<span style="color:blue">32,32</span>"<br />
'''style='''"<span style="color:blue">top:55;width:580;height:550;background-color:white;filter:blur(Add=1,Strength=140)</span>"/>
<br />
<br />
<'''<span style="color:red">v</span>:group id='''"<span style="color:#713300">'''gr1'''</span>"
'''style='''"<span style="color:blue">left:80;top:25</span>">
<br />
<br />
<'''<span style="color:red">v</span>:shape type='''"'''<span style="color:green">#arw</span>" style='''"<span style="color:blue">left:65;top:50;width:55000;height:4000</span>"
'''fillcolor='''"<span style="color:blue">aqua</span>" '''strokecolor='''"<span style="color:blue">lime</span>"/><br />
<'''<span style="color:red">v</span>:shape type='''"<span style="color:green">'''#arw'''</span>"
'''style='''"<span style="color:blue">left:460;top:80</span>"''' fillcolor='''"<span style="color:blue">fuchsia</span>"/><br />
<'''<span style="color:red">v</span>:shape type='''"<span style="color:green">'''#arw'''</span>"
'''style='''"<span style="color:blue">left:-1900;top:1430;width:5000;height:4000;rotation:50</span>"/>
<br />
<br />
<'''<span style="color:red">/v</span>:group'''>
<'''<span style="color:red">v</span>:vmlframe src='''"<span style="color:fuchsia">'''#gr1'''</span>"''' style='''"
<span style="color:blue">left:390;top:140;width:200;height:150</span>"/>
<br />
<br />
<<span style="color:#9933A3">'''/body'''</span>><br />
<<span style="color:#9933A3">'''/html'''</span>>
|}
{| border="1" style="background-color:#A3C7A2;font-size:12px;width:690px"
|-
|
<span style="background-color:lime">''' File XML esterna: "<span style="color:#414141">ball.xml</span>" '''</span>
<br /><br />
<span style="color:#9933A3"><xml <span style="color:maroon">xmlns:v</span>></span>
<v:group <span style="color:maroon">id="</span><span style="color:red">'''ball'''</span>" style="<span style="color:blue">width:2000;height:2000</span>">
<br />
<br />
<v:shape <span style="color:maroon">style</span>="<span style="color:blue">left:4;top:1</span>"
<span style="color:maroon">path</span>="<span style="color:blue">m9,1l9,r1,2l11,1r,2l12,2v,4,,7,-7,6l6,7,4,6r1,c6,6,6,5,3,4r1,l,2r3,l2,1r3,l4,xnse</span>">
<br />
<v:fill <span style="color:maroon">color</span>="<span style="color:blue">red</span>"
<span style="color:maroon">color2</span>="<span style="color:blue">yellow</span>"
<span style="color:maroon">focusposition</span>="<span style="color:blue">.99,.8</span>"
<span style="color:maroon">focussize</span>="<span style="color:blue">.01,.01</span>"
<span style="color:maroon">type</span>="<span style="color:blue">gradientTitle</span>"/><br />
<v:shadow
<fontspan colorstyle="color:maroon">on</fontspan>="<fontspan colorstyle="color:blue">t</fontspan>"
<fontspan colorstyle="color:maroon">type</fontspan>="<fontspan colorstyle="color:blue">double</fontspan>"
<fontspan colorstyle="color:maroon">color</fontspan>="<fontspan colorstyle="color:blue">fuchsia</fontspan>"
<fontspan colorstyle="color:maroon">color2</fontspan>="<fontspan colorstyle="color:blue">yellow</fontspan>"
<fontspan colorstyle="color:maroon">opacity</fontspan>="<fontspan colorstyle="color:blue">.4</fontspan>"
<fontspan colorstyle="color:maroon">offset</fontspan>="<fontspan colorstyle="color:blue">-1pt,-.5pt</fontspan>"
<fontspan colorstyle="color:maroon">offset2</fontspan>="<fontspan colorstyle="color:blue">-2pt</fontspan>"/><br />
</v:shape><br />
</v:group><br />
<br />
</xml></font>
|}
</table>
== Editori e logistica ==
Microsoft Office permette di pubblicare grafica VML senza tuttavia utilizzare integralmente i DOM di VML.<br />
[[OpenOffice.orgLibreOffice]] permette di creare delle cartelle sostituibili al seguito burocratico di Microsoft con
delle grafica convertite in VML.
==Altri progetti==
{{interprogetto}}
==Collegamenti esterni==
=== Rapporto e dimostrazioni ===
*{{en}} [http://www.svg-vml.net/ Paragone VML/SVG] {{Webarchive|url=https://web.archive.org/web/20100117182213/http://www.svg-vml.net/ |date=17 gennaio 2010 }}
*{{en}}cita [web|1=http://midiwebconcept.free.fr/watkins.htm |2=Esempi basici.]|lingua=en|accesso=14 dicembre 2009|urlarchivio=https://web.archive.org/web/20100323213835/http://midiwebconcept.free.fr/watkins.htm#|dataarchivio=23 marzo 2010|urlmorto=sì}}
*{{fr}}cita [web|1=http://midiwebconcept.free.fr/ |2=Altri esempi notevoli.]|lingua=fr|accesso=14 dicembre 2009|urlarchivio=https://web.archive.org/web/20110720223740/http://midiwebconcept.free.fr/#|dataarchivio=20 luglio 2011|urlmorto=sì}}
*{{cita web|1=http://francoisfabie.free.fr/gallery.html|2=Galleria VML.|lingua=en|accesso=5 febbraio 2010|urlarchivio=https://web.archive.org/web/20110720221327/http://francoisfabie.free.fr/gallery.html|dataarchivio=20 luglio 2011|urlmorto=sì}}
*{{fr}} [http://www.dhteumeuleu.com/gallery-v6.php?tag=IE Grafica animate VML + Javascript.]
*{{cita web|url=http://www.dhteumeuleu.com/gallery-v6.php?tag=IE|titolo=Grafica animate VML + JavaScript.|lingua=fr|accesso=14 dicembre 2009|urlarchivio=https://web.archive.org/web/20120623000540/http://www.dhteumeuleu.com/gallery-v6.php?tag=IE|dataarchivio=23 giugno 2012|urlmorto=sì}}
=== Tutori, didattici ===
*{{fr}}cita [web|1=http://midiwebconcept.free.fr/ |2=Midiwebconcept Tutorial VML.]|lingua=fr|accesso=14 dicembre 2009|urlarchivio=https://web.archive.org/web/20110720223740/http://midiwebconcept.free.fr/#|dataarchivio=20 luglio 2011|urlmorto=sì}}
*{{fr}}cita [web|http://www.asp-php.net/tutorial/vml/index.php |asp-php.net tutoriel.]|lingua=fr}}
{{Portale|informatica}}
[[Categoria:XML]]
[[Categoria:Linguaggi di markup XML]]
[[de:Vector Markup Language]]
[[en:Vector Markup Language]]
[[es:Vector Markup Language]]
[[fr:Vector Markup Language]]
[[ja:Vector Markup Language]]
[[pl:Vector Markup Language]]
[[ru:VML]]
[[sk:VML]]
[[zh:VML语言]]
| 