|
 Le grandi
potenzialità dell’eXtensible Markup
Language consentono anche la creazione di nuovi
linguaggi; alcuni di questi sono orientati al
disegno
vettoriale, ovverosia alla rappresentazione di elementi
grafici non per mezzo di immagini bitmap ma attraverso l’uso
di formule e
script. Uno dei più grossi limiti del World Wide Web è,
infatti, legato alla grafica: attualmente è possibile inserire
immagini in una pagina HTML solo come file esterni in formato
GIF,
BMP, JPG o
PNG.
Microsoft da una parte,
Adobe,
Sun e
Netscape dall’altra, hanno fatto le loro
proposte di linguaggio “taggato” per la realizzazione
di grafica vettoriale in due dimensioni. I due formati sono
VML (Vector Markup Language) e
PGML (Precision Graphics Markup Language).
PGML (Precision Graphics
Markup Language), linguaggio per la grafica vettoriale 2D
proposto da Adobe, Sun e Netscape al
W3C Consortium il 10 aprile del 1998. Durante “XML ’98”,
una grande manifestazione che si è tenuta nel novembre del
1998 a Chicago, è stato presentato un ActiveX fatto
girare su Microsoft Internet Explorer 4.0, in grado di
visualizzare un documento PGML: si trattava della mappa
dettagliata di una città nella quale erano indicate vie e
case; la mappa era interattiva e consentiva lo zoom su
particolari; i nomi delle strade erano resi in modo perfetto
utilizzando diversi tipi di font e le scritte potevano seguire
percorsi contorti; la resa grafica si presentava impeccabile.
Il
W3C ha cercato di armonizzare le due proposte
pubblicando le raccomandazioni per
SVG (Scalable
Vector Graphics); il PGML è stato così abbandonato dalle
tre società per orientarsi totalmente verso la proposta del
W3C.
Di seguito saranno descritti gli aspetti generali di
VML e
SVG e saranno presentati anche alcuni semplici esempi.
Vector
Markup Language
 VML
è il linguaggio per la grafica
vettoriale in due dimensioni proposto da
Microsoft al
W3C il 13 maggio 1998. È chiaramente basato
su XML ed è compatibile con
HTML,
CSS e
DOM. Già da alcune
versioni, VML è implementato nelle applicazioni di
Microsoft
Office ed stato incluso anche in
Internet Explorer a partire
dalla versione 5.0.
Gli oggetti VML possono essere documenti
indipendenti
oppure possono essere inseriti all'interno di pagine Web, in
questo caso saranno visualizzati solo se all'interno del
documento HTML compare il
tag "style" in cui viene
inserita la stringa
v\:* { BEHAVIOR:
url(#default#VML); }
che associa ai vari prefissi dei namespace e
indica al browser Web la presenza nel documento di elementi
grafici VML da visualizzare. Ogni tags VML deve avere la
seguente struttura:
<v:nome_elemento
attributi> </v:nome_elemento>
dove con "nome_elemento" si indica il
tipo di oggetto VML che deve essere disegnato e con
"attributi"
si indicano gli eventuali parametri con i rispettivi valori
necessari alla visualizzazione della figura.
VML è uno strumento molto semplice e piuttosto potente,
è compatibile con gli standard esistenti
ed è altamente
comprimibile (un’immagine bitmap occupa molto più spazio
rispetto al corrispettivo formato VML). Purtroppo, senza un
editor visuale, non è facile disegnare figure nel linguaggio
VML, neppure se si tratta di forme poco complesse. Tuttavia,
VML è ampiamente supportato nelle applicazioni
Microsoft; in
quasi tutti i pacchetti
Office è inclusa una barra degli
strumenti denominata “disegno”, in cui sono disponibili forme
e linee predefinite che si possono anche personalizzare in
modo completamente visuale: è possibile modificare lo stile
delle linee, il colore dello sfondo, aggiungere
l’ombreggiatura, ecc…
VML è stato introdotto anche in
FrontPage
XP,
attualmente l’ultima versione dell’applicativo di
Microsoft
Office per creare pagine Web; è così possibile disegnare
forme geometriche in modo visuale con estrema facilità senza
dover passare alla visualizzazione del codice
HTML. Inoltre,
FrontPage XP è in grado di creare automaticamente un documento
compatibile anche con i browser che non supportano
VML; in
questo caso i disegni sono visualizzati come semplici immagini
in formato GIF.
Anche
Microsoft Visio, a partire dalla versione 2000, comprende
il supporto per VML; in particolare, consente il salvataggio
dell’intero diagramma creato in formato
VML.
Esempi di VML
VML applicato alle mappe cognitive
Dimostrazione del Teorema di Pitagora con VML [1]
Dimostrazione del Teorema di Pitagora con VML
[2]
Scalable
Vector Graphics
 SVG è un linguaggio per descrivere elementi grafici
bidimensionali attraverso XML; è stato proposto dal
W3C come
raccomandazione nel settembre del 2001. Esso consente di
utilizzare tre tipi di oggetti grafici:
forme grafiche
vettoriali (tracciati formati da linee rette e curve),
immagini e
testi. Gli oggetti grafici possono essere
raggruppati, formattati, trasformati e composti con oggetti
precedentemente creati.
Tra le caratteristiche più importanti di
SVG vi sono:
la possibilità di effettuare trasformazioni annidate,
utilizzare maschere di trasparenza (alpha masks),
effetti di
filtraggio ecc. Con questo linguaggio è, inoltre, possibile
realizzare disegni interattivi e dinamici
che, attraverso
l’uso di linguaggi di scripting supplementari, permettono la
creazione di sofisticate animazioni. SVG include, infatti, una
vasta serie di eventi come per esempio
“OnMouseOver” e
“OnClick”, che possono essere associati ad ogni
elemento grafico.
SVG è una applicazione
XML; pertanto, segue i
namespace
ed utilizza le espressioni di XPointer; estende le animazioni
di SMIL e le nuove versioni di
SMIL utilizzeranno proprio
SVG;
i contenuti di un documento SVG possono anche ricevere uno
stylesheet con
CSS.
Il termine “scalable” indica la possibilità di
aumentare e diminuire uniformemente la dimensione degli
oggetti grafici; ingrandendo un’immagine in formato
bitmap
porta spesso a pessimi risultati ottenendo rappresentazioni in
cui si possono addirittura distinguere i singoli pixel; con
oggetti grafici scalabili questo non avviene mai. Per il Web
gli oggetti scalabili sono un enorme vantaggio: possono essere
visualizzati indipendentemente su schermi con differenti
risoluzioni ed evitano al Web designer di predisporre un sito
per la visualizzazione a diverse risoluzioni. Un determinato
oggetto può essere posizionato in posti diversi in una stessa
pagina a dimensioni diverse; inoltre, può essere ingrandito
per consentire di scorgere dettagli.
La parola “vector” indica che all’interno di
questo linguaggio si fa uso di grafica vettoriale, sono quindi
inclusi oggetti geometrici come linee e curve che garantiscono
ampia flessibilità rispetto alle immagini bitmap che
immagazzinano informazioni per ogni pixel; i formati
vettoriali possono anche integrare formati
BMP,
JPG, TIF… e
combinarle con informazioni vettoriali.
Il termine “graphics” indica che, contrariamente
alla maggior parte delle grammatiche generate da
XML,
SVG non
rappresenta oggetti testuali, ma elementi grafici, coprendo
così il vuoto tra XML e la grafica; questo linguaggio
fornisce, infatti, una descrizione ricca e strutturata di
grafica vettoriale che può essere usata come documento
indipendente o come un XML namespace per altre grammatiche.
Il linguaggio SVG permette di realizzare potenti
rappresentazioni grafiche grazie ai numerosi tipi di tags in
esso definiti; nel linguaggio sono presenti dei “tipi di dati
di base” tra cui:
|
<integer> |
rappresenta un numero intero |
|
<number> |
rappresenta un numero reale |
|
<length> |
rappresenta la misura di una distanza |
|
<coordinate> |
rappresenta una lunghezza nel sistema delle coordinate |
|
<list of xxx> |
rappresenta una lista di elementi, “xxx” può essere
qualunque tipo |
|
<angle> |
rappresenta un angolo indicato da un numero seguito
dall’unità di misura |
|
<color> |
rappresenta un colore nel formato RGB |
|
<paint> |
rappresenta il metodo per tracciare e riempire gli
oggetti |
|
<percentage> |
rappresenta la percentuale relativa ad un altro valore |
|
<time> |
rappresenta un tempo in secondi e millesimi di secondo |
I frammenti di codice SVG possono essere inseriti in
altri documenti oppure possono essere file indipendenti; gli elementi del linguaggio
devono sempre essere racchiusi all’interno del tag
<svg>.
Esempi
di SVG
Mappe geografiche con SVG
Altre
rappresentazioni
Sebbene non siano recenti, è bene ricordare che sono stati
presentati al
W3C altri linguaggi per rappresentare
elementi grafici sfruttando XML.
Uno di questi è
Web Schematics, una rappresentazione pensata per la
creazione di flow chart e altri semplici diagrammi,
presentata nel marzo del 1998. Sempre basata su
Web
Schematics, un’altra rappresentazione inoltrata al
W3C è
stata DrawXML che prevedeva l’utilizzo di
classi Java
per il disegno dei diagrammi.
Nessuna di queste due proposte ha avuto successo; il
W3C ha preferito concentrarsi sullo sviluppo delle
raccomandazioni per SVG.
Linguaggio
grafico per mappe
In questa pagina sono stati presentati i due maggiori
linguaggi per la grafica basati su XML:
Vector Markup
Language (VML) proposto da
Microsoft e
Scalable
Vector Graphics (SVG) raccomandazione del
W3C.
Entrambi i linguaggi hanno dimostrato di essere
altrettanto validi e potenti e più che sufficienti a
rappresentare una mappa cognitiva.
SVG, con le opzioni di animazione e interazione, sembra
essere lo strumento migliore per creare mappe interattive;
tuttavia, il supporto per questo linguaggio è ancora poco
diffuso. VML è, invece, già integrato all’interno delle
applicazioni più comuni come
Microsoft Internet Explorer
e
Microsoft Office e sembra più immediato da apprendere
e implementare.
In definitiva entrambi i linguaggi sono molto validi e
possono essere scelti in base al tipo di applicazione che si
vuole costruire.
|
Rappresentare la grafica
www.vivisimo.com
www.google.it