Creazione di pagine web: progettazione HTML con StyleVision
Il ritmo frenetico dell'ambiente aziendale odierno significa che le informazioni, insieme al formato in cui sono richieste, cambiano frequentemente. Sebbene alcune pagine web contengano contenuti che raramente cambiano (ad esempio, le pagine "Chi siamo" e le indicazioni stradali), la maggior parte dei siti web aziendali di oggi vengono continuamente aggiornati con nuovi dati. Per questo motivo, molte organizzazioni scelgono di archiviare i contenuti web in formato XML. Questo consente alle organizzazioni di sviluppare i contenuti in modo estremamente efficiente, poiché le informazioni contenute nel file XML possono essere utilizzate per molteplici scopi e in diversi formati di output; lo schema XML associato al file XML descrive il modello dei contenuti. StyleVision è un potente strumento di progettazione di fogli di stile e report che può aiutarvi a sfruttare al meglio il formato XML. StyleVision vi permetterà di creare pagine web con una formattazione sofisticata, utilizzando una finestra di progettazione basata su modelli e con funzionalità di trascinamento e rilascio. StyleVision genera automaticamente fogli di stile XSLT, consentendovi di integrare il vostro progetto in un sito nuovo o esistente; è possibile generare persino applicazioni web ASPX direttamente dal menu File.
In questo articolo, progettiamo una pagina web che mostrerà alcune delle capacità di formattazione HTML di StyleVision. Sebbene le funzionalità di formattazione integrate di StyleVision consentano di creare design sofisticati tramite semplici operazioni di trascinamento, in questo esempio utilizzeremo CSS3, immagini e altri elementi di design standard per creare una pagina web che non necessiti di essere riformattata quando il contenuto cambia.
Il nostro primo progetto StyleVision era estremamente semplice.
Come potete vedere nella finestra "Albero dello schema" qui sotto, lo schema XML di origine è stato progettato in modo che l'XML possa essere pubblicato in formato libro e include una panoramica, titoli dei capitoli, sottotitoli dei capitoli e contenuti. Abbiamo semplicemente trascinato gli elementi corrispondenti a queste sezioni nella finestra di progettazione.
Come potete vedere di seguito, il contenuto XML viene visualizzato correttamente, e non è stato necessario scrivere manualmente alcun codice XSLT o HTML per ottenere questo risultato. Tuttavia, è necessario applicare una formattazione stilistica prima di poterlo pubblicare come pagina web.
Sebbene quasi tutti gli elementi di progettazione possano essere formattati nelle sezioni "Stili" e "Proprietà" dell'interfaccia StyleVision, in questo caso utilizzeremo un file CSS per applicare la formattazione. In questo modo, se desideriamo modificare la formattazione, potremo semplicemente indicare un nuovo file CSS all'interno del codice XSLT, invece di apportare modifiche direttamente alla progettazione.
Utilizzeremo XMLSpy, il software di Altova Editor XML con funzionalità integrate per la modifica e la creazione di CSS, sia nella versione 2 che nella versione 3, per sviluppare i nostri fogli di stile.
La schermata qui sotto mostra una parte del file CSS che abbiamo creato in XMLSpy e include le proprietà per i titoli h1, h2 e h3. Definiamo questi elementi qui, nel file CSS. Successivamente, li assegneremo agli elementi del nostro file XML in StyleVision.
Si noti che abbiamo incluso le proprietà CSS3 "box-shadow" per gli elementi "h1" e "box-sizing" per gli elementi "h3": sia XMLSpy che StyleVision supportano HTML5 e CSS3.
Una volta creato il file CSS, torneremo a StyleVision e lo assoceremo al progetto che abbiamo creato. Per associare un file CSS a un progetto StyleVision, basta cliccare sul link "aggiungi nuovo file CSS" nella panoramica del progetto e selezionare il file desiderato.
Si prega di notare che un progetto StyleVision può supportare più file CSS. Di recente abbiamo pubblicato un articolo sul blog che spiegava come assegnare dinamicamente i file CSS a un progetto StyleVision. Ora possiamo iniziare ad assegnare i selettori che abbiamo creato nel nostro file CSS agli elementi del nostro progetto. Inizieremo con il titolo del capitolo. Evidenzieremo l'area di contenuto per l'elemento del titolo del capitolo e selezioneremo "h1" dal menu a tendina nella barra dei menu.
Nel nostro file CSS, abbiamo definito il tipo di carattere, la dimensione, il colore e l'allineamento per gli elementi <h1>. Abbiamo inoltre utilizzato la proprietà box-shadow di CSS3.
Di seguito è riportata la visualizzazione HTML del nostro progetto, in cui il selettore "h1" è stato assegnato all'elemento che rappresenta il titolo del capitolo.
Analogamente, assegneremo i selettori "h2" e "h3" agli elementi di intestazione principale e secondaria, rispettivamente. Il nostro design ora appare così.
La visualizzazione HTML è mostrata qui sotto: notate che abbiamo utilizzato la proprietà CSS3 "box-sizing" per posizionare i sottotitoli ("Creare risultati efficaci" e "Progettazione del foglio di stile visivo") e per disporre il testo attorno a essi.
Infine, aggiungeremo un'immagine nella parte inferiore della pagina utilizzando un attributo chiamato "coverimage" presente nel file XML di origine (mostrato nell'immagine sottostante).
Per aggiungere l'immagine al nostro progetto, trasciniamo semplicemente l'elemento "coverimage" dall'albero dello schema alla finestra di progettazione e selezioniamo "Crea immagine". Questo aprirà la finestra di dialogo "Inserisci immagine". Passiamo quindi alla scheda "Dinamico", clicchiamo sul pulsante "Modifica XPath" e selezioniamo l'elemento "cover image" dall'albero dello schema.
La finestra di dialogo "Inserisci immagine" apparirà di seguito.
Abbiamo inoltre aggiunto alcune formattazioni per le immagini nel nostro file CSS, utilizzando la proprietà CSS3 "border-radius", che permette di aggiungere angoli arrotondati a un elemento.
La sezione del nostro file CSS che definisce la formattazione delle immagini è riportata di seguito. Questa visualizzazione è stata ottenuta con XMLSpy.
Oltre alle tecniche di formattazione che abbiamo utilizzato in questo esempio, potremmo anche aggiungere funzionalità avanzate utilizzando funzioni JavaScript, modelli condizionali, calcoli automatici e altro ancora; tuttavia, per semplicità, in questo caso ci limiteremo a utilizzare solo le funzionalità di base.
Il nostro progetto è ora pronto per essere utilizzato – la visualizzazione HTML è mostrata nell'immagine sottostante.
[Immagine non disponibile]
Ora che siamo soddisfatti del design, possiamo salvare il foglio di stile XSLT generato automaticamente utilizzando il menu File.
Possiamo anche creare un'applicazione web ASPX per questo progetto, selezionando l'opzione "Progettazione web" che si trova immediatamente sotto "Salva i file generati". Possiamo scegliere di generare output in formato HTML 4 o HTML 5, e possiamo anche selezionare la compatibilità con Internet Explorer dalla finestra di dialogo "Proprietà" (accessibile anche tramite il menu "File").
Ancora meglio, se i dati di origine vengono modificati, queste modifiche verranno automaticamente riflesse nell'output HTML.
Se aggiungiamo, ad esempio, nuovi contenuti al nostro file XML, questi vengono formattati nello stesso modo del contenuto originale e tutti gli elementi di design vengono visualizzati correttamente in relazione tra loro: non è necessario riscrivere il codice HTML.
Qui, abbiamo aggiunto un nuovo sottotitolo di capitolo e il relativo contenuto al file XML sottostante, e lo abbiamo visualizzato in anteprima in formato HTML.
Come potete vedere, StyleVision offre il meglio di entrambi i mondi: è possibile creare un singolo modello HTML, valido per tutti i casi, con funzionalità di formattazione dinamica. Grazie al controllo completo sulla formattazione offerto da StyleVision, è possibile progettare pagine web e applicazioni ASPX che riflettano la vostra visione.