ADOBE DREAMWEAVER CS5.5
INTRODUZIONE
Dreamweaver CS5.5 è uno dei più avanzati programmi di editing di pagine web HTML (e non solo) in circolazione. Utilizzato in moltissime realtà lavorative di grande e piccolo calibro, è disponibile anche in italiano. Fa parte della Creative Suite di Adobe che comprende anche programmi come Flash, Illustrator ed il più diffuso Photoshop.
Esamineremo le principali funzionalità del programma e vedremo come renderlo produttivo per la gestione di grandi o piccoli progetti Web. Per seguire con profitto la guida è bene avere una versione installata del programma che può essere scaricato, in versione dimostrativa funzionante per 30 giorni, all’indirizzo: www.adobe.com/go/trydreamweaver_it.
In questa prima parte, dopo aver introdotto le funzionalità del software e le differenze con le versioni precedenti, vedremo velocemente come effettuare una corretta installazione del prodotto, in modo tale da non avere problemi d’uso successivamente.
Nella seconda parte (Le basi di Dreamweaver CS5.5) ci soffermeremo nei dettagli dello spazio di lavoro messo a disposizione, per poi passare ai vari menu. Vedremo anche come adattare l’ambiente di sviluppo a quelle che sono le nostre esigenze: studieremo il menu Preferenze per consentirci una perfetta configurazione dell’IDE.
Nella terza parte (Creare una completa pagina HTML) vedremo, quindi, come creare una prima e semplice pagina di prova: inizialmente partiremo dal semplice file HTML testuale per poi associarvi un foglio di stile CSS dando così un’impostazione estetica alla pagina. Useremo quindi i collegamenti ipertestuali, le tabelle per l’ordinamento dei dati, immagini, filmati in Flash ed infine guarderemo il mondo dei moduli (form in inglese) come conclusione.
Nella quarta parte (Strumenti importanti) studieremo quindi la funzionalità di ricerca, della convalida del codice secondo gli standard e l’interessante Riferimenti, per avere sempre sottomano le informazioni delle quali abbiamo bisogno.
La quinta parte (Il menu Comandi e cenni di automatizzazione) si soffermerà sul menu Comandi: programmi avanzati come Dreamweaver infatti permettono spesso di “registrare” e memorizzare le nostre azioni ed automatizzarle successivamente, in modo tale da evitare di fare sempre la stessa cosa perdendo tempo in maniera improduttiva.
La sesta parte (Dreamweaver e siti dinamici) ci permetterà di entrare più “nel vivo” dello sviluppo delle applicazioni web. Grazie agli strumenti messi a disposizione da XAMPP vedremo come far interagire ed integrare Dreamweaver con un server ed un sito residente su di esso. Seguiremo ovviamente tutte le fasi necessarie: preparazione dell’ambiente di lavoro, definizione dei siti, scrittura del codice e quindi il test dal vivo.
La sesta e ultima parte (Le nuove funzionalità di Dreamweaver CS5.5), prima delle conclusioni, ci porterà ad affrontare più da vicino tre delle novità più interessanti che la versione Creative Suite 5.5 ci mette a disposizione: l’integrazione con un content management system come WordPress, l’aggancio con un sistema quale Subversion ed infine l’integrazione con Adobe BrowserLab.
Funzionalità e Novità
Per capire al meglio quale software andiamo ad utilizzare, è utile sapere in principio quali sono le sue principali funzionalità. Chi ha utilizzato Dreamweaver nelle sue versioni precedenti sa bene quali sono le caratteristiche che questo programma offre, a volte differenziandosi dagli altri in circolazione dello stesso tipo:
# Editor WYSIWYG che consente di visualizzare il risultato del proprio lavoro in tempo reale;
# Gestione di progetti e configurazione di siti con possibilità aggiuntiva di lavoro in remoto (su server esterni con file non presenti in locale);
# Integrazione con i principali linguaggi di scripting utilizzati (Javascript, VBScript e così via);
# Integrazione con i principali linguaggi di scripting lato server utilizzati nel settore (PHP, ASP e così via);
# Validazione dei contenuti per rendere i propri lavori conformi agli standard contemplati dal World Wide Web Consortium (W3C);
# Creazione di Macro per registrare le proprie azioni ed aumentare la produttività;
e sicuramente altre funzionalità che hanno facilitato la vita di molti programmatori e web designer negli ultimi anni. Uno sguardo particolare meritano anche le varie caratteristiche che sono state introdotte in questa ultima versione, la CS5.5. Caratteristiche che consentono all’applicazione di rimanere al passo con i tempi e gli standard:
# Integrazione con jQuery, uno dei più famosi Framework Javascript in circolazione ed utilizzato ormai su milioni di siti web;
# Il pannello Anteprima Multischermo, che permette di visualizzare il risultato del proprio lavoro contemporaneamente su più tipologie di dispositivo (Schermi, Smartphone, Tablet e così via);
# Supporto all’HTML5 e CSS3, le ultime versioni dei linguaggi di markup e fogli di stile disponibili degli standard globali nella creazione di pagine web;
# Integrazione con Adobe Browser Lab, che consente di effettuare un testing approfondito ed affidabile del proprio prodotto su più browser e soprattutto più piattaforme e sistemi operativi differenti, in modo tale da garantire un’usabilità prossima al 100%;
# La funzionalità di integrazione con il framework PhoneGap, che da allo sviluppatore le possibilità e gli strumenti per realizzare delle applicazioni per i sistemi operativi attualmente più diffusi sugli smartphone: iOS ed Android;
# Supporto all’FTP migliorato, che ora consente la comunicazione su standard più sicuri quali FTPS ed FTPeS;
Abbiamo a che fare, quindi, anche con un ambiente di sviluppo che fa l’occhiolino alle applicazioni per smartphone e tutto ciò che attualmente consideriamo “di prossima generazione”. Parlando di requisiti, Dreamweaver è sicuramente poco pretenzioso, considerati gli standard attuali a cui si lavora: basta un processore Pentium 4 (o AMD Athlon 64), Windows XP come sistema operativo, 512 Mb di Ram ed 1 GB di spazio sul disco fisso.
Confronto fra le funzionalità delle versioni CS di Adobe Dreamweaver:
Dopo questa breve panoramica sulle funzionalità e le peculiarità del programma, possiamo passare a vedere la fase di installazione.
Cenni sull’installazione
Vediamo quali sono i passi fondamentali per procedere con l’installazione di Dreamweaver (ricordiamo che si può scaricare la versione dimostrativa da www.adobe.com/go/trydreamweaver_it). Una volta scaricato il programma di installazione, ci ritroveremo davanti un wizard semplice da usare.
Seguendo la procedura guidata ed inserendo i dati necessari (come il percorso d’installazione e i dati personali) non avremo difficoltà ad arrivare alla schermata di installazione vera e propria e concludere il processo senza problemi. Osserviamone i passaggi principali.
Innanzitutto l’estrazione dei file del pacchetto, che dovrebbe avvenire in pochi secondi, al massimo qualche minuto:
Successivamente, dopo il caricamento effettivo dei file e l’avvio del programma d’installazione vero e proprio, ci appare davanti la schermata di accettazione dei termini d’uso e delle clausole generali di Adobe:
La schermata successiva ci chiederà di inserire un numero di serie per il prodotto oppure approfittare del periodo di prova che ci viene concesso. Scegliamo l’opzione che più ci aggrada e confermiamo con Avanti dopo aver selezionato la lingua d’installazione. Arriveremo quindi alla schermata precedente all’installazione, nella quale scegliere i prodotti extra da installare e la directory dove copiare i file:
È tutto pronto: clicchiamo su Installa ed avviamo il processo. Non temete se il vostro PC si dilunga nell’elaborazione, inizialmente verrà effettuato un calcolo del tempo rimanente e sicuramente può richiedere più tempo del previsto. Il tutto, comunque, dovrebbe concludersi in pochi minuti. Al primo avvio, molto probabilmente, verrà chiesto di selezionare i tipi di file da associare al programma. Dopo aver scelto le estensioni desiderate nella finestra appena comparsa basterà confermare per avviare Dreamweaver.
A questo punto non rimane altro da fare: la procedura è stata completata e possiamo avviare il nostro Dreamweaver CS5.5, per iniziarlo ad analizzare ed esaminare nel dettaglio.
Lo spazio di Lavoro
Per non lasciare nessuno disorientato, in questa guida esamineremo tutto passo per passo, interfaccia inclusa, in modo da evitare disordini e interrogativi. Dopo l’installazione possiamo procedere al primo avvio: l’interfaccia che ci troviamo davanti è apparentemente semplice, ma conviene analizzarla per bene:
Una schermata di benvenuto ci introduce a tutte quelle operazioni basilari che riguardano la creazione di file nuovi o già esistenti: la prima colonna (1) permette di sfogliare velocemente i file recentemente modificati, la seconda colonna (2) invece consente di creare un nuovo file di un determinato tipo (HTML, Coldfusion, PHP, Javascript e così via) e la terza colonna (3) è particolarmente d’aiuto per tutti coloro che sono al primo impatto. Qui, infatti, l’utente può trovare varie voci che vanno dalla panoramica generale del programma fino alle caratteristiche di ultima generazione, come la Vista dal Vivo o l’integrazione con Browser Lab. Sempre in questa splash screen vi è una sezione più in basso, che permette un veloce accesso alla guida ufficiale del prodotto e le risorse collegate.
Passiamo ai menu e ai pannelli. Al primo avvio c’è solo una barra e presenta tutte le opzioni classiche tipicamente contemplate (esamineremo più avanti questa sezione). Tornando a concentrarci sull’area di lavoro, in questo momento possiamo notare un pannello in basso ed uno laterale diviso in due sezioni.
In quello in basso (Proprietà) tendenzialmente vengono caricate le varie impostazioni di un elemento attivo: un tag o un altro elemento. Tramite dei moduli specifici potremo modificarne le peculiarità. Come vedremo successivamente, inoltre, molto spesso questo pannello si suddivide a sua volta in più schede, in modo tale da rendere più veloci tutte le operazioni comuni.
Il pannello a destra invece presenta più di una semplice scheda: di default già si può visualizzare la scheda del BrowserLab, la scheda Inserisci, successivamente quella degli Stili CSS (che ritroviamo allo stesso posto delle versioni precedenti) ed infine un file manager, sempre utile, con una rappresentazione ad albero dei contenuti del nostro PC.
Accanto al pannello File notiamo anche il pannello Risorse, particolarmente utile quando si gestisce un sito e lo si è definito. Anche per quanto riguarda questa caratteristica, tuttavia, ne parleremo più tardi, limitandoci per ora ad un uso basilare del programma.
Cliccando su un qualsiasi tipo di file dalla colonna 2 della schermata precedentemente menzionata, avviamo la creazione di un file del tipo selezionato. Portiamo il mouse su HTML e vediamo come cambia l’ambiente di lavoro nel caso si inizi a lavorare su un file.
Dopo aver avviato la creazione di un nuovo file, l’ambiente e lo spazio di lavoro cambiano in base al tipo di file e alle esigenze dell’utente stesso. La prima modifica ovviamente si vede nella parte più grande dell’area, che ha sostituito lo splash screen iniziale con l’editor WYSIWYG di Dreamweaver. Da questo momento in poi, infatti, ogni modifica che effettueremo in questa schermata riprodurrà fedelmente l’output effettivo della pagina su un qualsiasi browser.
Di seguito, una schermata del programma in azione nel momento che stiamo descrivendo.
Nella barra al di sotto dei menu si notano tre pulsanti vicini: Codice, Dividi e Progettazione. Cliccando su Codice visualizzeremo solo ed esclusivamente il codice della nostra pagina, in modo tale da facilitare piccole modifiche mirate nel caso ce ne sia bisogno. Progettazione invece permette di osservare la pagina così come esce nel browser: al momento dell’avvio, infatti, è questa la voce predefinita che viene selezionata. Dividi invece è un ottimo compromesso tra le due voci precedenti: nel caso dobbiate fare delle modifiche (passando per il codice) che risultano in cambiamenti estetici alla pagina allora qui potete vedere sia il codice che il risultato in tempo reale.
Più a destra troviamo il pulsante Codice dal Vivo che offre una schermata simile a Dividi ma blocca la modifica del codice in modo tale da selezionare, nella schermata del sorgente, ciò che abbiamo selezionato nella vista della modalità Progettazione. Particolarmente utile se dobbiamo modificare una pagina non nostra, magari dal codice complesso.
Dei pulsanti Vista dal Vivo ed Esamina ne parleremo più avanti, in fase di analisi della nuove caratteristiche. Stessa cosa riguarda il già citato Multischermo che permette di visualizzare l’output su più piattaforme contemporaneamente.
Come da tradizione in Dreamweaver già da qualche versione, alla fine della barra troviamo una pratica casella di testo nella quale inserire il titolo da dare alla pagina che stiamo attualmente modificando (ovvero il tag title).
Oltre questi dettagli, la nostra schermata dell’area di lavoro non è stata modificata eccessivamente. Come già detto precedentemente il pannello Proprietà in basso si è adeguato al documento che stiamo usando, proponendo tutte le impostazioni più comuni (testo in grassetto, corsivo, elenchi puntati e numerati e così via.) e la possibilità di scegliere tra HTML e CSS: in poche parole, la possibilità di applicare le modifiche “estetiche” alla pagina HTML o al codice CSS associato.
Arrivati a questo punto, l’infarinatura generale per quanto riguarda l’area di lavoro è completa. Ora possiamo passare ad esaminare i menu, essenziali per godere di un uso facile ed agevole del nostro programma.
I menu dell’interfaccia
Conoscere bene i menu del programma che si usa è una pratica utile, che sicuramente può evitare errori grossolani soprattutto per quanto riguarda l’impostazione del programma in base alle proprie esigenze. Nelle prossime righe faremo un’analisi attenta ma veloce dei vari menu che Dreamweaver ci mette a disposizione.
Si parte con il più classico di sempre: File. Passando di qui possiamo eseguire tutte le operazioni basilari di creazione di nuovi file, apertura di file già esistenti, salvataggio e chiusura. Troviamo anche la connessione con Adobe Bridge, già presente nelle altre versioni. Troviamo quindi le voci di importazione ed esportazione, nel caso avessimo a che fare con file e sorgenti di dati provenienti dall’esterno (ad esempio un file XML) e la voce riguardante la conversione. Con un semplice click possiamo infatti convertire il nostro documento in un formato a nostro piacimento. Novità di questa versione, ovviamente, è l’introduzione della voce HTML5 a questo elenco di possibilità. A chiudere troviamo la visualizzazione in un browser a scelta, già presente precedentemente, la possibilità dell’anteprima multischermo ed infine il controllo ortografico della pagina.
Arriviamo quindi al menu Modifica assolutamente da non sottovalutare data la mole di caratteristiche che presenta. Evitando di spiegare nel dettaglio a cosa servono istruzioni quali Copia, Incolla e Seleziona Tutto, vediamo subito che ci sono cose da evidenziare. Innanzitutto la funzionalità Cerca e Sostituisci che per chi non è abituato a lavorare con questo ambiente può essere d’aiuto. In seguito arriviamo ad altri strumenti utili, anche quando si lavora con linguaggi di scripting quali il PHP: parlo della funzionalità Bilancia Parentesi, Rientro del Codice e Mostra Suggerimenti Codice. Sono presenti anche gli strumenti di compressione del codice, utili nel caso avessimo a che fare con listati molto lunghi e difficili da scorrere in poco tempo.
Come conclusione di questa sezione ci sono tre voci sicuramente tra le più importanti: Libreria Tag, che consente di visualizzare velocemente i tag contemplati dal programma, con suddivisione in base al linguaggio scelto; Scelte rapide da tastiera che consente di modificare l’insieme di scorciatoie da tastiera che possono aiutare l’utente ad ottenere gli stessi risultati in minor tempo; Preferenze che permette di configurare tutto ciò che si può configurare del programma. Come prevedibile, data la vastità delle opzioni, questa voce verrà trattata nel dettaglio più avanti.
Il Menu Visualizza permette di modificare la nostra area di lavoro in base a quelle che possono essere le nostre esigenze. Ad esempio, lavorando ad uno script in PHP non avremmo nessun bisogno di un pannello di gestione dei fogli di stile. Da questo menu possiamo occuparci di tutto questo, rimuovendo i pannelli che non ci servono e aggiungendo quelli che preferiamo. La cosa migliore da fare, anziché elencare tutte le voci, è sperimentare con esse in modo tale da trovare l’approccio migliore per lavorare con Dreamweaver.
Inserisci contiene tutte le voci legate ad istruzioni di inserimento di contenuti: da un semplice tag div ad un file multimediale, le possibilità sono tutte selezionabili qui. Una nota particolare va in questo caso alla possibilità di inserire degli snippet di codice per quanto riguarda jQuery Mobile, il cui supporto, ricordiamo, è stato introdotto proprio in questa versione del programma.
La voce Elabora consente invece di gestire le proprietà del documento che stiamo modificando e tutto ciò che riguarda la modifica di tabelle, immagini (sono qui presenti, infatti, le voci Ritaglia, Ridimensiona o Luminosità e Contrasto) e così via.
Nel menu Formato troviamo tutto ciò che riguarda la formattazione del testo. Qui è possibile trovare tutte quelle voci che generalmente sono contemplate nel pannello Proprietà posizionato in basso: tipologia del carattere, associazione di fogli di stile CSS, elenchi ed allineamenti.
C’è quindi il menu Comandi, che racchiude le voci dedicate alle Macro, utilissimo strumento del quale parleremo più in la, il controllo ortografico del documento in uso ed oltre ciò lo strumento di ottimizzazione del codice che permette di rimuovere automaticamente dei tag inutili e commenti. Da questo menu, inoltre, si richiama la schermata di gestione delle estensioni installate dall’utente insieme al programma.
Gestire le estensioni è semplice: cliccando su Gestisci Estensioni si arriva ad una schermata simile alla seguente:
Da qui, selezionando la voce desiderata dal menu File, è possibile installare al volo un’estensione partendo dal pacchetto (in formato .zxp, .mxp, .mxi) scaricato. Per facilitare il lavoro nel caso siano presenti più programmi della suite installati nel sistema, le estensioni sono regolate dall’Extension Manager, applicazione dedicata stand alone rispetto all’applicativo principale (Dreamweaver nel nostro caso).
Successivamente troviamo il menu Sito, vitale nel caso iniziassimo ad usare delle soluzioni dinamiche e più complesse. Tramite la definizione di siti, infatti, è possibile sfruttare tutte le caratteristiche più avanzate del programma. Anche questo, tuttavia, è un argomento del quale parleremo più in la. Degna di nota è la voce Applicazioni Mobili / Configura Application Framework, che permette di scaricare velocemente ed installare al volo il famoso Android SDK, oggi utilizzato su una grande quantità di device dal mercato in costante crescita.
Gli strumenti per modificare la nostra area di lavoro non finiscono qui: il menu Finestre è interamente dedicato al fornire gli strumenti per decidere “cosa visualizzare e cosa no” nel nostro spazio. Come inoltre osservabile sotto la voce Layout area di lavoro ci sono dei set predefiniti utilizzabili che raggruppano in maniera diversa le aree contemplate nello spazio di lavoro. Giostrando tra queste sicuramente è possibile trovare la migliore, adatta al proprio progetto. Quella che stiamo utilizzando, attualmente, è quella predefinita (Designer).
Infine la rassegna del menu si conclude con la voce Aiuto. Qui è possibile trovare ogni informazione necessaria a comprendere il programma ed il suo funzionamento in ogni minimo dettaglio. Apparentemente trascurata, è una sezione decisamente utile per ogni utente che si trovi alle prime armi. Vi è infatti un collegamento alla guida ufficiale del prodotto, oltre che ad altri collegamenti ai forum ufficiali, pagine di registrazione dei prodotti Adobe e la pagina degli Aggiornamenti, rilasciati dall’azienda per migliorare il programma.
I menu sono stati trattati a sufficienza: a questo punto non rimane altro che dare uno sguardo alla schermata delle preferenze.
Il menu Preferenze per una perfetta configurazione
Data la quantità di informazioni da trattare, una trattazione a parte per la schermata delle preferenze è senza dubbio necessaria. Solo cliccando sulla voce del menu corrispondente, sotto Modifica, e guardando la schermata che viene fuori si può avere un’idea ben precisa della mole di impostazioni disponibili:
Trattare tutte le voci una per una sarebbe proibitivo e noioso, per cui ci limiteremo ad osservare le più importanti ed utilizzate solitamente. Al primo posto troviamo la scheda Generale. Vi sono poche opzioni, alcune riguardano la modifica del codice, altre la gestione del documento e l’apparizione di alcune finestre come quella di benvenuto, all’avvio.
Più avanti troviamo la schermata dell’Anteprima nei Browser. Tramite questa scheda possiamo aggiungere o rimuovere i browser con cui testare il nostro sito. Generalmente vengono automaticamente inseriti tutti i browser attualmente installati nel sistema.
Colorazione del Codice offre la possibilità di personalizzare i colori con il quale il codice viene evidenziato all’interno del documento in uso. Particolarmente utile per chi è abituato a lavorare con determinati schemi di colori e vuole ritrovare la stessa affinità con il proprio ambiente di lavoro. Ovviamente è possibile modificare schema per ogni linguaggio contemplato dal programma.
Degna di nota è anche la schermata Elementi Invisibili che consente di decidere quali elementi (invisibili, appunto) mostrare in fase di progettazione, magari per un riferimento personale. È possibile scegliere la propria preferenza in un ventaglio piuttosto ampio: ancoraggi, script, commenti, ma anche tag relativi a linguaggi server-side (come il PHP e l’ASP).
Tra le altre schede essenziali troviamo Suggerimenti per il Codice che offre tutte le impostazioni legate all’autocompletamento del codice in scrittura e la possibilità d’uso (immediato o ritardato) dei suggerimenti sul codice in tempo reale. Data la versione del software, è stata introdotta questa funzionalità anche per il framework jQuery.
La scheda Tipi di file/Editor si rivela decisamente utile per gestire i file e decidere quali estensioni assegnare al Dreamweaver e quali no. Nel caso ce ne fosse bisogno, inoltre, è possibile definire un editor esterno per ogni tipo desiderato, in modo tale da richiamarlo velocemente se ce ne fosse bisogno.
A concludere questa carrellata c’è la schermata W3C Validator, che gestisce le impostazioni del già citato validatore di codice incorporato in Dreamweaver (già da qualche versione). In questo caso possiamo definire quale standard utilizzare nel caso questo non venga definito esplicitamente e se mostrare o meno i warning e gli errori.
Per quanto riguarda la teoria ormai siamo a posto: adesso il passo successivo è iniziare a creare qualcosa nel vero senso della parola. Dalla prossima volta vedremo come creare la nostra prima pagina web, aggiungendoci di volta in volta qualche elemento e capendo come gestirlo al meglio con Dreamweaver CS5.5.
La prima pagina HTML
Adesso possiamo iniziare a dare uno sguardo a tutte quelle procedure e gli strumenti che Dreamweaver ci mette a disposizione. Poiché si tratta di una guida base, dedicata a chi sa poco o nulla del programma, cominceremo con il creare una nuova pagina Web, procedura che con Dreamweaver CS5.5 è decisamente semplice.
Dal menu File selezioniamo la voce Nuovo. Ci si aprirà una finestra nella quale scegliere che tipo di file creare e con quali preferenze. Una schermata simile alla seguente:
Ovviamente sono molti i tipi di file contemplati, senza considerare le opzioni da definire: una pagina vuota, oppure un modello, o ancora un file per uno script in qualsiasi linguaggio noi desideriamo o ancora, ultima introduzione, pagine dal modello inerente il nuovo standard HTML5. Creare qualcosa di semplice però è ancora più facile: senza toccare altro, clicchiamo su Crea o premiamo il tasto Invio per avviare subito la creazione di una pagina HTML vuota.
A questo punto, la nostra pagina è già pronta. Cliccando su Codice è possibile notare che la struttura basilare della pagina è stata già definita, per quanto riguarda i suoi tag principali: il tag head, ma anche il body. Tutto già pronto all’uso. La prima cosa da fare è modificare il titolo della pagina: andiamo ad agire sul tag title contenuto in head.
Per raggiungere il nostro obiettivo velocemente la strada è semplice: in alto a destra, nella casella di testo presente sulla barra appena creata, dove è riportato Documento senza titolo digitiamo il nuovo nome per la nostra pagina, ad esempio Pagina di Prova per HTML:
Come potete vedere dalla schermata qui sopra, o nell’ambiente di sviluppo, le modifiche vengono applicate al codice in tempo reale. Non abbiamo cambiato una sola riga di codice, ma abbiamo solo agito passando dall’interfaccia del programma. Provate ancora, cliccando su Progettazione ed inserendo del testo. Anche in questo caso la modifica si rifletterà direttamente sul codice sorgente. Un concetto importante per chi si avvicina la prima volta a questo strumento: niente più editing esclusivamente sul codice, ma un ampio uso dell’interfaccia WYSIWYG.
La nostra pagina è stata creata e non dobbiamo fare altro, prima di procedere oltre, che salvarla. Cliccando su File > Salva oppure utilizzando la scorciatoia CTRL+S (consiglio di iniziare da subito ad usare le scorciatoie, molto più veloci ed efficienti) possiamo salvare il nostro file in una cartella a piacimento, come indica la schermata qui di seguito:
Una pagina vuota, però, serve a ben poco. Andiamo avanti e vediamo come inserire, volta per volta, tutti i vari elementi più importanti di una pagina: link, tabelle, media di vario genere, quindi moduli ed infine l’associazione di un foglio di stile CSS.
Aggiungere collegamenti ipertestuali (o link)
La creazione di collegamenti ipertestuali (o link) è praticamente immediata. Presenta (come il rispettivo tag, d’altronde) pochi accorgimenti da prendere ed è attuabile facendo riferimento al solo pannello Proprietà del quale abbiamo già parlato in fase di analisi dell’interfaccia.
Innanzitutto scriviamo un po’ di testo da usare, come nell’immagine di seguito:
Selezioniamo quindi il testo già scritto e passiamo a lavorare con il pannello Proprietà (a fondo del programma). Le impostazioni da modificare, in questo caso, sono essenzialmente due.
# In corrispondenza della voce Collegamento occorre riportare l’indirizzo al quale ci si vuole collegare. In questo caso è “http://www.google.it” (virgolette escluse);
# In corrispondenza della voce Destinazione invece si va ad agire su dove deve avvenire questo collegamento. Nella stessa pagina (_self), in una nuova (_blank) oppure in quella principale (_parent) e così via.
Oltre questi due elementi più classici possiamo anche aggiungere l’attributo title, gestito in questo caso dall’interfaccia alla voce Titolo presente poco più in alto di Destinazione. All’apparenza inutile, questo attributo è importante: il testo in esso contenuto viene visualizzato, nella pagina pubblicata, quando si lascia il mouse fermo per qualche secondo sul collegamento.
Attributi meno comuni come accesskey ed altri devono essere gestiti necessariamente in fase di editing del codice vero e proprio. Tuttavia, nonostante questa leggera mancanza, l’auto completer del codice fa il suo lavoro egregiamente ed appena iniziamo a lavorare sul tag subito ci viene proposto ciò che ci serve, come nella schermata seguente:
Questo ovviamente non è il solo metodo per inserire link. Ce n’è uno ancora più guidato, che prevede l’uso di una finestra a parte. Cliccando sul menu Inserisci selezioniamo Collegamento Ipertestuale. Ecco qual è la schermata che ci verrà proposta:
Ormai non ci sono più dubbi su ciò che bisogna inserire in questo modulo per creare il link che ci serve: collegamento, destinazione ed in questo caso anche la shortcut d’accesso.
Creare e modificare tabelle
Nonostante le tabelle non siano più usate come lo erano qualche anno fa (vista la diffusione del CSS come standard per la creazione di layout), queste rimangono comunque un importante strumento nella rappresentazione dei dati.
Vediamo adesso tutto ciò che riguarda la loro creazione modifica con Dreamweaver CS5.5. La finestra di creazione di una tabella si apre dal menu, selezionando Inserisci > Tabella. In alternativa si può usare la combinazione di tasti Ctrl+Alt+T. Nella finestra, simile a quella osservabile qui di seguito, è possibile selezionare tutti i parametri iniziali più importanti. Larghezza, altezza, numero di righe e colonne e posizione dell’intestazione.
Dopo aver inserito le informazioni richieste possiamo cliccare su Ok. Come di consueto, il codice della pagina viene automaticamente modificato secondo le esigenze. Cliccando su Codice si possono vedere le modifiche effettuate:
A questo punto occorre vedere come modificare la propria tabella dopo la sua creazione. Ovviamente in nostro soccorso arriva il pannello delle Proprietà, che mostra già una buona quantità di opzioni da modificare. Qui troviamo opzioni per quanto riguarda la larghezza della tabella, spacing tra le varie celle e rispettivo margin. Oltre questo inoltre abbiamo la possibilità di assegnare eventuali classi CSS alla tabella e l’impostazione di un tipo di allineamento ben preciso nel documento. Sono inoltre presenti, nella zona più in basso del pannello, dei comodi pulsanti per la conversione da pixel a percentuale delle larghezze e dimensioni varie della tabella, sia nella sua interezza che per le singole celle.
Tuttavia, c’è ancora da scoprire. Cliccando con il pulsante destro del mouse sulla tabella apriamo il menu contestuale: nell’immagine di seguito potete osservare cosa offre il menu Tabella:
C’è la possibilità di eseguire le stesse operazioni che abbiamo visto prima e non solo: si possono effettuare vere e proprie modifiche strutturali, aggiungendo o rimuovendo celle, righe, colonne o fondendole insieme in modo tale da ottenere l’effetto desiderato. Nel caso di un utilizzo frequente, anche per queste funzioni vi sono una serie di scorciatoie da tastiera già definite. Se vi sia la necessità comunque si possono modificare nel rispettivo menu.
Infine, per tutti coloro che hanno l’animo da “perfezionista” vi è un ulteriore strumento di modifica per le tabelle. La schermata Modifica Tag si può richiamare dal menu contestuale, cliccando in questo caso su Modifica Tag <table> oppure, in alternativa, tramite la combinazione di tastiera Maiusc+F5. Non solo con questo strumento è possibile gestire ogni proprietà illustrata prima, ma si può prendere accorgimenti nel caso di browser differenti, gestire le informazioni sull’accessibilità, assegnare ID al tag e gestire tutte le operazioni legate ad eventi tramite il richiamo di funzioni e metodi in Javascript.
Aggiungere immagini, video e altro
Aggiungere media di vario genere (immagini, video, filmati flash e così via) con Dreamweaver è intuitivo e non presenta particolari difficoltà. Il fulcro delle operazioni, come già avvenuto per le tabelle, è il menu Inserisci. Facciamo una rapida rassegna dei vari media che possiamo posizionare nella nostra pagina passando dall’ambiente di sviluppo.
Iniziamo dalle immagini, che nel codice vengono identificate dal tag <img>. Nel menu inserisci vi è la voce corrispondente, Immagine, appunto. La schermata che viene proposta è un semplice file explorer, nel quale selezionare il file da aggiungere. Sono supportati tutti i formati più comuni, dal jpg al png, passando per bmp, gif ed ovviamente il formato psd di Adobe Photoshop. Ecco la schermata di apertura del file:
Una volta selezionata l’immagine viene chiesto di inserire alcune informazioni riguardanti l’accessibilità, rigorosamente controllata dal W3C in fase di validazione degli standard. Successivamente basta cliccare su Ok per vedere la propria immagine esattamente come apparirà nella pagina finale.
Anche in questo caso le operazioni di modifica sono molto semplificate. Basta dare un’occhiata al pannello Proprietà per capire quali sono le possibilità che ci vengono offerte: dimensioni, testo alternativo, eventuali collegamenti e rispettive destinazioni, collegamenti e modifiche all’immagine stessa.
Stesso discorso vale per la finestra Modifica Tag. Cliccando con il pulsante destro del mouse verrà attivata la voce Modifica Tag <img> che permetterà di modificare ogni aspetto del tag esattamente come avveniva per le tabelle, anche per quanto riguarda la gestione degli eventi.
Uno strumento che può risultare comodo è lo strumento di ottimizzazione di immagini che si può trovare, nel menu contestuale, cliccando su Ottimizza…. La finestra che viene proposta, simile a quella di seguito, permette infatti di modificare la qualità dell’immagine, cambiarne il formato e gestirne l’attenuazione ed altri parametri. Il tutto visualizzando in tempo reale l’output e la dimensione del nuovo file risultante.
Per quanto riguarda gli altri media il discorso non si discosta molto da questo appena fatto: dal menu Inserisci, cliccando su Oggetto multimediale è infatti possibile selezionare svariate tipologie di file da inserire nel documento. Sono considerati i file SWF, ovvero le applicazioni realizzate con Flash, file Shockwave, Applet Java, controlli ActiveX e Plugin.
Come sempre, anche in questi altri casi il menu contestuale aiuta, soprattutto per quanto riguarda la presenza del Modifica Tag che consente di gestire ogni minimo aspetto del nostro prodotto senza andare a toccare una sola riga di codice all’interno del file.
Facciamo un passo avanti adesso, andando ad analizzare alcuni degli strumenti più importanti e vitali per una pagina web: i moduli e la loro realizzazione.
Creare moduli di invio (o form)
Ogni sito che abbia un minimo di interattività utilizza un modulo con il quale gestire le informazioni digitate dall’utente: sia esso visibile o invisibile, un complesso sistema o un semplice guestbook delle visite. Adesso vedremo come possiamo realizzare un form efficiente nella nostra pagina senza andare a toccare il codice, osservando invece quali sono gli strumenti che l’interfaccia di Dreamweaver ci propone.
Innanzitutto bisogna inserire il modulo, l’elemento basilare. Per farlo basta cliccare su Inserisci, quindi selezionare Modulo ed infine ancora Modulo. Il nostro form verrà automaticamente creato nella pagina, nella posizione in cui avevamo lasciato il nostro cursore. Per permettere di distinguerlo, viene tratteggiato (solo in fase di progettazione e non nel vero output) con un tratteggio rosso.
Occorre quindi modificare le varie impostazioni: tipologia di passaggio delle informazioni, pagina di destinazione e così via. Cliccando sul form appena creato, per selezionarlo, basta guardare in basso, in corrispondenza del pannello Proprietà: sarà qui che troveremo tutte le opzioni di modifica che ci servono. Per prima cosa, possiamo dargli un ID (da non sottovalutare considerando l’uso degli id che si fa con javascript e jQuery: basti pensare ad un semplice plugin di validazione) oppure gestire l’attributo action, method e decidere anche la destinazione del collegamento, proprio come un link.
Qui di seguito è possibile vedere una schermata del programma in fase di modifica di un form:
Ovviamente, anche per quanto riguarda il form è presente un preciso menu contestuale che permette una veloce modifica dei parametri ed un rispettivo Modifica Tag dalla stessa struttura dei casi previsti precedentemente, con la sola differenza, stavolta, di adattarsi al tag form.
A questo punto si può cominciare ad esaminare la quantità di controlli che possono essere inseriti nel modulo. L’elenco si può richiamare tramite il menu Inserisci: cliccando su Modulo ecco qual è la lista che ci viene proposta:
Sono presenti tutti i componenti e controlli d’uso più consueto: campi di testo, aree di testo, campi nascosti, pulsanti e caselle di controllo, senza lasciare indietro liste e campi per il caricamento di file. Non sono però gli unici ad essere previsti: oltre alle etichette ed ai set di campi, infatti, sono previsti i controlli speciali Spry, leggermente più potenti delle controparti “basilari”.
Giusto per fare un esempio, un casella di testo Spry offrirà delle opzioni diverse nel pannello delle Proprietà: non solo si potrà decidere se dare un limite minimo o massimo di caratteri, ma anche scegliere se validare automaticamente il campo secondo determinati standard (ad esempio validare automaticamente il testo inserito come un indirizzo email, un numero di telefono o un numero di previdenza sociale).
Per facilitare il lavoro dell’utente inoltre sono stati realizzati dei gruppi di controlli, come ad esempio il Gruppo di Caselle di Controllo o ancora il Gruppo di Pulsanti di Scelta, gestibili senza la necessità del minimo ritocco del codice grazie all’interfaccia del programma.
Continuando a parlare dei moduli, vediamo come aggiungere i vari tipi di componenti ai form appena creati, per poi configurarli in maniera corretta. In questa sorta di “esempio” creeremo un form che rimanda l’utente in una nuova pagina (che chiameremo elabora_dati.php). Il suo layout sarà simile ad un form tipico di login su un sito, simile a quello che vediamo di seguito:
Una semplice schermata: username e password da inserire, facoltà di “ricordare” i dati dell’accesso e un pulsante di invio dei dati. Vediamo adesso come realizzarlo nella pratica. Innanzitutto creiamo il form (si è già spiegato come si fa). Tra le sue proprietà andiamo a modificare tre caratteristiche:
# il metodo di invio dei dati, che sarà impostato su “POST”;
# la pagina di destinazione, che sarà appunto “elabora_dati.php”;
# il target del collegamento, che verrà impostato su “_blank” per indicare l’apertura di una nuova finestra;
Insomma, qualcosa di molto simile allo screenshot riportato qui di seguito:
Ora non rimane che aggiungere i vari controlli di cui abbiamo bisogno. Innanzitutto la prima casella di testo (e rispettiva label): basterà cliccare su Inserisci > Modulo > Campo di Testo in modo da mostrare la finestra corrispondente per l’inserimento dei valori. In corrispondenza del campo Etichetta verrà scritto Username:, posizionando questa prima del campo di testo:
Automaticamente verrà creata la nostra prima casella di testo. Ora tocca alla seconda: ripetiamo la procedura con una etichetta diversa, ricordandoci però, dopo la creazione, di andare a modificare il campo Tipo, cambiando Riga Singola in Password. Questo permetterà di offuscare il contenuto della casella, come tipico quando si inserisce una password.
Ora è il turno della casella di controllo, ovvero la classica casella con la possibilità di inserire il simbolo di spunta per selezionare o deselezionare una determinata opzione. Cliccando su Inserisci > Modulo > Casella di Controllo si apre la rispettiva finestra di creazione: anche qui si sistema l’etichetta e si assegnano eventuali ID, oltre, in caso, a scegliere una scorciatoia da tastiera.
Siamo quasi alla fine: non rimane che il pulsante. Anche in questo caso la procedura è praticamente immediata: si seleziona Inserisci > Modulo > Pulsante e si conferma per posizionare il nuovo controllo nel form. Successivamente quindi si modifica il testo da mostrare sul pulsante, agendo sulla proprietà Valore nel pannello Proprietà ed assicurandosi che il tipo di pulsante sia di Invio e non di Reset: in tal caso infatti alla pressione del pulsante l’intero form subirebbe un tabula rasa.
Anche per quanto riguarda i form la rassegna è conclusa: per tutti i controlli la traccia da seguire per una corretta impostazione è questa e non c’è bisogno di perdere tempo per osservarli uno ad uno. Tocca passare, invece, ad un argomento sicuramente degno di nota: i fogli di stile CSS ed il loro utilizzo.
Creare e modificare fogli di stile (o CSS)
I layout standard utilizzano i Fogli di stile o CSS: niente più tabelle quindi, ma file che determinano lo stile e l’impaginazione dei contenuti. Ora vedremo come creare un foglio CSS, come modificarlo tramite Dreamweaver e successivamente collegarlo alla pagina precedentemente creata.
Iniziamo subito: cliccando su File > Nuovo ci si apre il menu di selezione del file da creare. Stavolta scegliamo CSS come in figura:
Quello che ci troviamo davanti è il nostro nuovo file. L’evidenziatore della sintassi userà quella di questo linguaggio. Provando a scrivere le prime istruzioni noterete la differenza.
Sicuramente il metodo più veloce per l’editing di questo tipo di file è fare tutto con la tastiera, direttamente sul codice. Tuttavia, anche in questo caso Dreamweaver non manca di mettere a disposizione dell’utente degli strumenti e interfacce ad hoc in caso di inesperienza. Si guardi infatti il pannello laterale Stili CSS presente anche nella figura qui di seguito:
Cliccando con il pulsante destro del mouse si aprirà il menu contestuale: selezioniamo Nuovo… per aprire la finestra di creazione di un nuovo elemento CSS. La schermata che ci verrà presentata sarà questa:
come si può vedere, sarà possibile creare una nuova classe o un nuovo ID. Ancora, sarà possibile ridefinire dei tag HTML (nel caso, ad esempio, volessimo modificare le proprietà del tag “body”) e decidere se spostare il tutto su un nuovo file oppure effettuare le modifiche partendo dal documento corrente.
Facciamo al volo una piccola prova: creiamo una nuova classe, diamole il nome di classe1 e facciamo clic su ok per confermare. La schermata che ci si pone davanti parla da sola: stavolta è possibile modificare qualsiasi attributo previsto dagli standard CSS, per una personalizzazione totale del selettore. Per comodità, inoltre, il tutto è stato suddiviso in schede tramite un comodo menu sulla sinistra, in base al “settore” dell’attributo scelto:
Nel nostro esempio le modifiche eseguite sono davvero poche: il tipo di font selezionato è Verdana, di grandezza 14 e sottolineato. Cliccando ulteriormente su Ok la finestra viene chiusa e il codice nel foglio di stile automaticamente viene modificato in base alle ultime scelte. Il nostro selettore è pronto, senza neanche usare una riga di codice. Ora, salviamo il file nella stessa pagina del file HTML creato prima: proviamo ad effettuare un collegamento per vedere se tutto funziona.
Associare un foglio di stile ad una pagina è semplice: basta tornare alla pagina sulla quale effettuare la modifica, aprire il menu contestuale e selezionare Stili CSS > Associa Foglio di Stile. Si seleziona il file (in questo caso style.css). E si conferma. Il foglio di stile è stato creato, pronto per essere usato.
Per concludere in maniera completa la panoramica sui fogli di stile occorre anche vedere come modificare dall’interfaccia un foglio di stile già creato precedentemente. Anche in questo caso la procedura è piuttosto semplice.
Innanzitutto torniamo al nostro foglio di stile. Nel pannello laterale, sotto la voce Stili CSS, selezioniamo Tutte anziché Corrente. In un diagramma ad albero vedremo la nostra classe classe1 realizzata poco fa. Per modificarla basta un semplice doppio clic sull’elemento in questione. Subito si apre una finestra molto familiare, la stessa che abbiamo usato per creare il selettore:
Una volta fatte le dovute modifiche, basta premere Ok per cambiare il codice e tornare al nostro file.
Non rimane altro che apportare le modifiche effettuate utilizzando la nostra classe con un tag nel documento HTML. Selezioniamo il primo testo della pagina, ovvero Testo di Prova. Una volta fatto, cerchiamo nel pannello delle proprietà, in basso, la voce Classe. Automaticamente Dreamweaver importa tutte le classi collegate, sia quelle definite all’interno del documento che, come nel nostro caso, definite in un file CSS esterno:
Selezionando classe1 dal menu verrà automaticamente modificato il testo, e con esso il codice corrispondente nella pagina. Ancora una volta, il tutto con il solo aiuto dell’interfaccia, senza aver toccato minimamente il sorgente.
Cercare e sostituire codice e testo
Avere ben presenti le funzioni “accessorie” che Dreamweaver mette a disposizione è decisamente importante. Soprattutto se queste possono salvare molto tempo in determinate occasioni. Una di queste è la funzionalità di ricerca. Richiamare questa funzionalità è molto semplice: basta cliccare su Modifica > Cerca e Sostituisci oppure passare per la scorciatoia Ctrl + F:
La schermata che troviamo, nonostante la dimensione ridotta, presenta svariate opzioni: la voce Cerca In consente di scegliere dove cercare nel contesto del nostro documento. Possiamo infatti scegliere se cercare tra tutti i documenti aperti, solo in quello attualmente in modifica o ancora in una singola porzione di testo selezionato. Oppure, per completezza, cercare in tutti i file di un sito precedentemente definito dall’utente.
In corrispondenza della voce Cerca invece definiamo il tipo di elemento da cercare: del semplice testo nella visuale di Progettazione oppure uno “spezzone” di codice nella modalità omonima. Se ciò non fosse sufficiente si può cercare un tag ben preciso oppure, per avere la massima precisione, si può scegliere di cercare un testo determinato in un tag preciso specificato dall’utente.
Sulla destra della casella Cerca vi sono due icone: una raffigurante un dischetto ed una raffigurante una cartella. Sono, rispettivamente, le funzionalità di salvataggio e caricamento della query di ricerca. Nel caso volessimo memorizzare quella determinata ricerca, infatti, Dreamweaver permette di salvarla e recuperarla successivamente, in modo tale da evitare di perdere tempo.
La voce Trova varia in base alla tipologia di ricerca che si fa. In ogni caso è qui che dobbiamo specificare la stringa (testo o codice che sia) da ricercare all’interno della pagina o dell’insieme di file. Nel caso di funzionalità di ricerca avanzate, ovviamente, la finestra cambia il suo layout mostrando i controlli più adatti. Un esempio è la ricerca di testo in tag ben precisi, come mostra l’immagine di seguito:
Al di sotto di Trova c’è Sostituisci: nel caso volessimo sostituire il testo trovato con un’altra stringa a nostro piacimento è qui che dobbiamo mettere il testo che andrà a rimpiazzare quello specificato in Trova. Al di sotto di Sostituisci, infine, una serie di opzioni dedicate alla differenziazione tra lettere maiuscole e minuscole, gestione degli spazi vuoti e così via.
Infine, sulla destra di questa piccola finestra, i pulsanti che avviano le procedure di ricerca e sostituzione, il cui uso è intuitivo e decisamente semplice da comprendere. Ad ogni modo nel caso di dubbi il pulsante Aiuto consente di trovare al volo le informazioni necessarie ad un uso ottimale della funzionalità.
Ottenere informazioni su codice e tag
Come già specificato prima, Dreamweaver CS5.5 supporta molti linguaggi di programmazione: non si ferma quindi al semplice HTML e CSS, supportando invece sia linguaggi lato client come JavaScript sia lato server come PHP ed ASP. La funzionalità Riferimenti è un’interessante aggiunta al ventaglio di caratteristiche del programma.
Il suo scopo è semplice quanto importante: permettere all’utente di avere un riferimento del linguaggio in uso sempre a portata di mano, in modo tale da conoscere o ricordare il funzionamento di un certo metodo od oggetto. Per richiamare questa funzionalità basta cliccare sul menu Aiuto > Riferimenti, oppure utilizzare la scorciatoia associata (di default è Maiusc + F1).
Vediamo ora come utilizzarla al meglio. La sua “location” predefinita è al di sotto del pannello delle proprietà. Se non abbiamo modificato il layout dell’interfaccia, quindi, al richiamo sarà questa la schermata che ci verrà proposta:
Il sotto-pannello è impostato in modo tale da risultare intuitivo. In alto a sinistra c’è la lista di fonti, nella quale selezionare quella più appropriata in base alla situazione. Dreamweaver CS5.5 mette a disposizione alcune delle migliori: O’Reilly (HTML Reference, CSS Reference, PHP Pocket Reference) e, per quanto riguarda Coldfusion, Adobe.
Gli altri due box di selezione che si trovano al lato della prima variano in base al linguaggio scelto: sempre da qui che si selezionano gli oggetti o funzioni che interessano. Una volta selezionata la voce desiderata, il visualizzatore in basso mostra la pagina relativa al tag, istruzione o metodo che abbiamo cercato.
Siamo davanti ad una caratteristica da non sottovalutare. Sebbene le istruzioni e descrizioni fornite spesso non sono delle più complete e possono essere ben lontane dal risolvere un problema, tuttavia molto spesso ci si può trovare davanti a piccoli problemi o davanti a funzioni delle quali non conosciamo il significato. Almeno per avere un’idea basilare può essere particolarmente utile avere uno strumento del genere senza dover fare ricerche extra.
Per un utilizzo ottimale delle references (così in inglese), ovviamente, non ci si limita al semplice richiamo del pannello per poi effettuare la ricerca: passando in modalità Codice nel nostro documento è già possibile testarne le caratteristiche più veloci. Ad esempio, si può cliccare con il pulsante destro del mouse sul tag <html>, in prossimità del nome del tag stesso, per poi selezionare la voce Riferimenti e visualizzare tutte le informazioni corrispondenti, come avviene nell’immagine seguente:
Passiamo adesso ad un’altra funzionalità altrettanto importante, sempre di più ricercata e quindi gradita dagli addetti ai lavori: la validazione secondo gli standard del W3C.
Convalidare il codice con il W3C
La funzionalità di convalida del codice inclusa in Dreamweaver CS5.5 segue, naturalmente, le regole e gli standard dettati dall’ente globale per quanto riguarda il settore, il W3C (World Wide Web Consortium). Per richiamare questa funzionalità occorre passare dal menu File per poi selezionare Convalida > Convalida Documento Corrente (W3C).
In questo modo è possibile effettuare l’operazione di convalida sul documento aperto. Il funzionamento della procedura è semplice: il codice del file viene inviato (via Internet) al server dell’ente e, come risposta, si hanno eventuali errori oppure un messaggio positivo che segnala che il controllo è andato a buon fine.
Proviamo quindi ad utilizzarlo in tutte le sue sfaccettature, creando intenzionalmente un errore nel codice della nostra pagina di prova. Ad esempio, basta eliminare la chiusura del tag p (del paragrafo) rimuovendo il tag di chiusura </p>. A questo punto possiamo lanciare lo strumento di convalida, che mostrerà una finestra come la seguente:
Cliccando su Ok si avvia la procedura, il cui stato è visualizzabile nella barra di status al di sotto del pannello Proprietà. Dopo qualche secondo ecco il risultato:
Occorre quindi correggere il nostro codice. Inseriamo nuovamente il tag di chiusura precedentemente rimosso e avviamo una seconda volta la procedura di convalida. Stavolta, come si vede dall’immagine sottostante, le cose sono andate diversamente:
Non sono stati trovati errori e la nostra pagina è stata validata con successo: può essere quindi pubblicata sul web senza problemi. Ci sono anche delle scuole di pensiero contrarie a tal proposito, ma sicuramente un sito web validato nella sua totalità (nonostante certe volte all’atto pratico si riveli impossibile) è senza dubbio migliore nella completezza e chiarezza.
Abbiamo terminato la rassegna delle funzionalità più comuni: è arrivata l’ora di dare uno sguardo ad un’altra caratteristica importante: la registrazione dei comandi ed il loro uso.
Cos’è un Comando e cos’è il pannello Cronologia
Come promesso precedentemente, ci ritroviamo a trattare nel dettaglio un argomento interessante che riguarda Dreamweaver: il concetto di Comando, la sua registrazione e successivo utilizzo pratico e gli strumenti collegati, come ad esempio il pannello Cronologia. In questa prima lezione ci soffermeremo un secondo sullo spiegare quest’ultimo strumento e, in generale, sul vedere cos’è un “comando”.
Possiamo identificare come Comando a livello basilare un’azione che noi effettuiamo, che ha una ripercussione sul codice o comunque sulla presentazione del documento. Una modifica visibile, come la scrittura di un testo o una cancellazione, oppure invisibile, come l’andare a capo iniziando un nuovo paragrafo. Astraendo il concetto, capire cosa significa per Dreamweaver la parola Comando è facile. Molte volte, in un sacco di programmi in circolazione, sarà capitato di annullare un’azione appena eseguita: in Dreamweaver accade lo stesso. Annullando l’azione appena eseguita annulliamo, appunto, il comando appena portato a termine.
È proprio qui che, per renderci conto ancora di meglio di cosa parliamo, deve essere introdotto il pannello Cronologia che Dreamweaver CS5.5 mette a disposizione dell’utente. Nel caso non sia già presente nell’interfaccia è possibile richiamarlo, tramite il menu Finestra > Cronologia oppure tramite la scorciatoia predefinita Maiusc + F10. Di seguito, una schermata del programma con il pannello attivato, in basso a destra:
Proprio su questo pannello Dreamweaver memorizza ogni singola azione svolta, in modo tale da ritrovarla successivamente, in caso di bisogno. Mano a mano che lavoriamo sul documento l’elenco aumenta la sua grandezza.
A questo punto si può estendere il concetto di Comando come un’azione che non solo viene eseguita e termina, ma come un qualcosa che può essere salvato per un uso futuro. Si può infatti provare a cliccare con il pulsante destro del mouse su una qualunque delle varie azioni riportate nel pannello. Si può ripetere il passaggio oppure copiarlo, o ancora cancellare la cronologia nel caso non ne avessimo più bisogno.
Oltre queste voci troviamo quindi la più importante: Salva come Comando. Vediamo com’è possibile salvare una o più azioni come comando, in modo tale da riutilizzarle successivamente sulla nostra pagina o altre pagine.
Creazione di un Comando
La creazione di un comando può avvenire in vari modi. Vediamo innanzitutto il più semplice in assoluto: basta dire a Dreamweaver di “registrare” le nostre azioni a partire da un punto, precisamente fin quando noi non diamo lo stop alla procedura. Per utilizzare questa funzionalità è necessario essere in modalità di Progettazione.
Per prima cosa provvediamo ad avviare la nostra registrazione: si può fare tramite il menu Comandi > Avvia Registrazione oppure tramite una scorciatoia da tastiera, che di default è Ctrl+Maiusc+X. Senza dare altri segnali, una volta cliccato sulla voce del menu non dobbiamo fare altro, la fase di recording è iniziata.
Ora si può fare qualche prova: scriviamo un testo di esempio e successivamente premiamo su Invio per andare a capo, alla riga successiva. Nel totale abbiamo effettuato due azioni: la scrittura del testo e il ritorno a capo. Interrompiamo la registrazione, cliccando su Comandi > Interrompi Registrazione.
Nello stesso menu, adesso, clicchiamo su Riproduci Comando Registrato. Noteremo che Dreamweaver ha riscritto lo stesso testo ed è andato nuovamente a capo: la procedura ha funzionato con successo. Si noti inoltre che il comando può essere utilizzato anche su altre pagine: si può provare a creare un nuovo file vuoto ed eseguire il comando: il risultato sarà lo stesso.
A questo punto possiamo portare questo concetto ad un gradino ancora più in alto, facendo un lavoro di registrazione sulla nostra cronologia (tramite il pannello omonimo) e salvare a tutti gli effetti un comando, in modo tale da utilizzarlo velocemente richiamandolo tramite il menu rispettivo o una scorciatoia, anche dopo la chiusura e successiva riapertura del programma.
Torniamo al nostro file di prova e cancelliamo la cronologia dal pannello. A questo punto, sul file, scriviamo come prima un testo di prova ed andiamo a capo. Le ultime due azioni registrate saranno Immissione testo: Testo di Prova; e Nuovo paragrafo. Selezioniamo entrambe le voci con il mouse e clicchiamo con il pulsante destro del mouse su di esse: selezioniamo Salva come Comando….
La schermata successiva ci chiederà di dare un nome al nostro comando, stavolta composto non da una semplice azione ma dalle due registrate. Diamogli un nome a piacimento e clicchiamo quindi su ok per confermare. Volendo richiamarlo basta cliccare su Comandi per poi selezionare il nome che abbiamo appena usato:
Dopo aver cliccato la procedura verrà richiamata automaticamente ed eseguita. Stavolta il vantaggio è quello di poter salvare non solo grandi quantità di comandi, ma anche la possibilità di riutilizzarli successivamente, anche in futuro e non solo nella sessione d’uso corrente.
Adesso possiamo andare avanti: iniziamo a lavorare con un server.
Preparazione dell’ambiente di lavoro
Fino ad adesso abbiamo visto come usare Dreamweaver CS5.5 nelle sue caratteristiche basilari. Abbiamo visto come creare una pagina, fare ricerche, registrare dei comandi da usare successivamente. Adesso è giunto il momento di fare un altro passo avanti: integrare il programma con un server, che verrà installato in locale, in modo tale da lavorare con un sito dinamico e vedere in tempo reale l’output risultante.
Per prima cosa occorre scegliere il server: per la semplicità d’uso, in questo caso, si è optato per il famoso XAMPP ( http://www.apachefriends.org/it/xampp.html) che consente di installare velocemente un server Apache completo di PHP e MySQL (per la gestione del database). Installare XAMPP è facile: basta andare sul sito ufficiale del progetto, scaricare il pacchetto di installazione (attualmente pesa intorno ai 60 MB) ed avviare successivamente la procedura. Non richiede passaggi extra di configurazione, per cui eviteremo di entrare nel dettaglio in questo caso.
Una volta terminata la procedura di installazione si può avviare direttamente il pannello, simile a quello nella figura di seguito. Per rendere attivi i servizi di cui abbiamo bisogno, cliccare su Start in corrispondenza del servizio Apache (il servizio del webserver) e MySQL (il servizio del sistema di gestione del database):
In questa sezione , quindi, vedremo come affrontare la creazione e successiva gestione dei Siti. Un Sito nel gergo di Dreamweaver può essere identificato come la raccolta di tutte le risorse, pagine e file in generale che riguardano un progetto al quale bisogna lavorare. A livello logico, il programma lo divide in due parti.
La prima, locale, è situata in una cartella a piacimento sul pc, in modo tale da avere sottomano tutti i file e poterci lavorare senza problemi e rallentamenti. La seconda invece è la parte “in remoto” che si trova sul server effettivo sul quale distribuire il prodotto. Dreamweaver si occuperà di questo “passaggio” in modo tale da gestire completamente il flusso di lavoro: creazione del contenuto, modifica e successivo invio al server finale.
Bisogna ricordare, inoltre, che non è obbligatorio avere un server sul quale mandare i file: in fase di definizione di un sito, infatti, Dreamweaver consente di lavorare anche senza aver specificato la parte “in remoto”. Questa potrà essere aggiunta più tardi, quando si presenti la necessità di inviare i contenuti sul web o sul server di destinazione.
Più avanti vedremo anche come integrare il nostro programma con realtà più complesse, come Subversion oppure un CMS diffuso del calibro di WordPress. Adesso ci limiteremo con qualche script in PHP leggero, in modo tale da poter lavorare con qualcosa di semplice per apprendere il meccanismo.
Cominciamo con il primo passo: la definizione di un nuovo sito tramite il menu Sito.
Definizione del sito su Dreamweaver e primo script
Vediamo adesso come definire un sito e come effettuare tutte le operazioni all’atto pratico che servono per lavorare in questa nuova realtà più dinamica. Per prima cosa, dal menu Sito selezioniamo la voce Nuovo Sito. Ci apparirà una schermata simile alla seguente:
Provvediamo a definire i primi parametri, quelli per la sezione in “locale” del nostro sito. A questo punto possiamo cliccare su Server e successivamente sull’icona del + per aggiungere un nuovo server remoto sul quale lavorare e trasferire i files. Avendo installato il server XAMPP in locale, useremo le coordinate per raggiungere il server su localhost. Inoltre, dato che stiamo usando un server che presenta la combinazione PHP / MySQL, andiamo ad impostare, in fase di aggiunta dei dati del server, la voce PHP / MySQL in corrispondenza di Modello Server, in Avanzate. Di seguito la schermata di aggiunta dei dati del server:
Adesso anche il nostro server è stato configurato correttamente. In fase di inserimento dei dati possiamo cliccare su Prova per verificare che il tutto funzioni.
Ovviamente, è necessaria un’attenta configurazione e creazione dell’utente sul server FTP, altrimenti la procedura non funzionerà. Non bisognerà utilizzare l’utente anonimo messo a disposizione di default, bensì bisognerà crearne uno ex-novo dal pannello di controllo del server FTP, passando per quello di XAMPP. Creando questo nuovo utente bisognerà assegnare ogni tipo di permesso: sia per quanto riguarda la scrittura che per la lettura, inclusa la possibilità di creazione e modifica di nuove cartelle. Altrettanto importante, in fase di definizione del sito, è specificare la cartella precisa dove verranno posti i file (in questo caso la cartella in questione è Server1).
A questo punto il server di prova per il nostro lavoro è pronto. Occorre realizzare uno script in PHP di prova, da salvare inizialmente in locale per poi trasferire sul server di prova, in modo tale da permettere la prova immediata con un solo click del mouse.
Creiamo un nuovo file: stavolta selezioniamo un file di tipo php. Aggiungiamoci una semplice istruzione di output, da usare solo come test, all’interno del tag “body”. In questo caso, ad esempio, ho aggiunto l’istruzione:
<?php echo “<p>Amor onni cosa vince.</p>”; ?>
Una semplice istruzione di echo per visualizzare del testo su schermo, con una frase di Leonardo da Vinci. Salviamo il file (al click su Salva occorre ricordare che questo viene salvato nella cartella in locale) e successivamente selezioniamo la preview tramite browser dal menu File > Visualizza anteprima nel Browser. È in questo momento (e non prima) che i file vengono trasferiti dalla cartella in locale al server di prova. Questo facilita la modifica, rendendo i salvataggi più veloci e i caricamenti sul server solo quando richiesto.
Prima di concludere questa fase occorre descrivere uno strumento che molto spesso viene confuso con l’anteprima nel browser: la “Vista dal Vivo”.
La “Vista dal Vivo” e “Codice dal Vivo”
A volte, la confusione può far perdere di vista il vero scopo di una determinata funzionalità o caratteristica. Un esempio comune per quanto riguarda Dreamweaver, agli occhi dei meno esperti, si manifesta nell’equivoco tra lo strumento Vista dal Vivo e la semplice preview dal browser, menzionata in precedenza.
Oltre ciò, abbiamo anche un altro pulsante sulla barra degli strumenti: il Codice dal Vivo. Adesso vedremo nel dettaglio cosa sono, cosa li rende differenti tra loro e dalla preview nel browser.
Iniziamo con Vista dal Vivo. Lo scopo di questa modalità di modifica, derivata da Progettazione è quella di offrire il rendering più realistico possibile della pagina. Infatti, andando a lavorare con una qualsiasi pagina dotata di un minimo di impostazione grafica e avviando l’anteprima da browser la differenza tra Progettazione e Anteprima nel Browser è evidente.
Vista dal Vivo offre un anello di congiunzione tra le due: una visuale più vicina alla realtà senza però dover stare ad avviare l’anteprima per ogni test. Un’altra differenza inoltre si trova nella possibilità di modifica: se dalla modalità Progettazione è possibile modificare l’aspetto della pagina, in Vista dal Vivo non è possibile, dato che rimane bloccata per tutta la durata della sua attivazione.
La funzionalità non si limita ad una sola preview, ovviamente, ma offre un ventaglio di possibilità non indifferenti:
# Bloccare il codice Javascript, nel caso si debbano modificare degli elementi interattivi quali menu a comparsa, gestione dei form e così via;
# Modificare il codice CSS relativo alla pagina ed osservare le modifiche in tempo reale;
# Sincronizzazione automatica con il server remoto ad ogni test con la “Vista dal Vivo”;
Attivare i collegamenti sulla pagina per avere un test ancora più accurato;
Così come la Progettazione ha la sua versione “Live” anche il codice non è da meno. È stata introdotta infatti la funzionalità Codice dal Vivo. Una caratteristica decisamente utile, specie quando si ha a che fare con pagine dal codice dinamico, con inclusioni di script in linguaggi server-side.
Lo scopo di questa peculiarità è semplice: mostra il codice della pagina attualmente in modifica, non riportando però quello della schermata Codice, bensì quello che uscirebbe in output da una qualsiasi chiamata da parte di un browser. Non verrebbero visualizzate quindi tutte le istruzioni in PHP, ASP e così via, ma solo quelle della pagina risultante. Ad esempio, riprendendo lo script precedente, l’istruzione in PHP riportata è:
<?php echo “<p>Amor onni cosa vince.</p>”; ?>
ed è proprio questo che vediamo nella visuale Codice. Attivando la visuale Codice dal Vivo, invece, il risulato sarebbe ben diverso:
<p>Amor onni cosa vince.</p>
Ad ogni modo ricordiamo comunque che stiamo parlando di funzionalità legate ai test. Per un’accuratezza al 100% l’unico strumento adatto è l’anteprima da browser, oppure Adobe Browser Lab, che esamineremo in seguito.
Integrazione con WordPress
In conclusione vedremo in azione alcune delle caratteristiche di nuova introduzione in Dreamweaver CS5.5. Precisamente ne vedremo tre: l’integrazione con il CMS WordPress, l’integrazione con Subversion, il famoso sistema di controllo versione e l’integrazione con Adobe Browser Lab.
Iniziamo ad esaminare l’integrazione con WordPress. In questo caso Dreamweaver ci ritorna particolarmente utile in fase di modifica dei template grafici. Ovviamente salteremo la fase di installazione di WordPress, in quanto non strettamente attinente . Daremo per scontato inoltre l’uso di un server sul quale appoggiarci (WordPress è scritto in PHP ed usa il database MySQL), arrivando subito al setting delle impostazioni nel programma. La versione di WordPress utilizzata in questo caso è la 3.1.2, reperibile su http://www.wordpress-it.it/wordpress-in-italiano/.
Vediamo ora cosa fare in Dreamweaver. Per prima cosa dobbiamo definire un nuovo sito: dal menu Sito clicchiamo su Nuovo Sito. Definiamo un nome a piacere per il sito ed indichiamo la cartella in locale dei file del webserver, come nell’immagine seguente:
Adesso possiamo configurare il lato “server” del nostro sito. Nella definizione dei parametri dobbiamo specificare, stavolta, la tipologia Locale/Rete dato che stiamo lavorando con un server installato sul nostro PC. Nella casella Cartella Server specificheremo la directory dei file sul webserver, mentre in URL Web la posizione del sito nella formula “http://localhost/e così via.”. In questo caso è ” http://localhost/wp1/“. Di seguito la schermata di configurazione:
Dopo aver confermato le modifiche anche al lato “server” del sito dobbiamo tornare alla schermata precedente. Dal server appena definito deselezioniamo la voce Remoto, selezionando invece Di Prova, considerando che è un server di test locale. Confermiamo tutto e Dreamweaver provvederà immediatamente ad eseguire la scansione di tutti i file presenti nella cartella da noi specificata. Per verificare che tutto sia andato secondo le previsioni, una volta terminata la procedura cerchiamo il file index.php nella cartella principale di WordPress per poi cliccare su Vista dal Vivo: il blog di prova verrà visualizzato come se fosse stato richiamato dal browser:
A questo punto è facile intuire come la modifica di un tema sia decisamente agevole, tramite l’uso dell’interfaccia. Seguendo la sua filosofia, Dreamweaver permette la modifica senza toccare una sola riga di codice. Basta selezionare un qualsiasi elemento della pagina (sia esso un elemento singolo o un contenitore) e usare le finestre relative agli stili CSS viste precedentemente per modificare tutto ciò che serve. I cambiamenti verranno visualizzati in tempo reale nella schermata.
Può essere particolarmente utile perché molto spesso si può avere a che fare con temi da modificare e non scritti personalmente. Ci si può imbattere quindi in codice sicuramente funzionante, ma anche disordinato. Con questa preziosa funzionalità si evita di perdere del tempo prezioso.
Integrazione con Subversion
Nonostante lo stesso Dreamweaver CS5.5 consenta di collegarsi al proprio server per scaricare file e caricarli anche in base alle modifiche effettuate, tramite le sincronizzazioni, non può definirsi un client SVN completo. Per venire incontro, però, agli sviluppatori e ai team più esigenti viene permessa un’integrazione completa con un server che utilizza il famoso software di controllo versione Subversion: sarà possibile controllare le ultime versioni dei file, bloccare e sbloccare file, aggiungere file o spostare singoli file o interi siti. Vediamo come creare questo ponte tra i due software.
Prima di continuare una piccola nota: Dreamweaver permette l’integrazione con la libreria Client di Subversion nella sua versione 1.6.9. Nel caso vengano utilizate versioni successive si ricordi che non sono compatibili con le precedenti. Stessa cosa vale per applicazioni client di terzi (ad esempio TortoiseSVN).
Innanzitutto, vediamo come impostare una connessione tra Dreamweaver ed SVN. Per prima cosa torniamo al menu Sito cliccando quindi su Gestisci Siti. Selezioniamo il nostro sito di prova creato precedentemente per WordPress e, una volta aperta la finestra di modifica, clicchiamo sulla terza voce del menu: Controllo Versioni. In corrispondenza di Accesso selezioniamo Subversion. A questo punto verranno sbloccate le altre opzioni: ora dobbiamo compilare questo modulo in base alle informazioni del nostro server Subversion. Anche qui c’è il tasto Prova per verificare che tutto sia andato secondo i piani:
Una volta effettuata correttamente la connessione, la maggior parte delle operazioni più importanti viene svolta tramite la finestra di esplorazione dei propri progetti e il menu contestuale Controllo Versione:
Tramite queste voci possiamo scaricare in locale, dal server, l’ultima versione del file, modificarla per un successivo upload. I file possono anche essere modificati in alcune delle loro parti e non totalmente. Una volta eseguita la modifica si utilizza Deposita sempre dal menu contestuale, come in figura:
Con la funzionalità di commento, quindi, si potrà anche aggiungere un messaggio riguardante la modifica effettuata, per evitare del lavoro extra a chi modificherà dopo di noi il file. Non a caso, infatti, i benefici di questi sistemi si vedono soprattutto in realtà più grandi, che vanno oltre il semplice developer.
In conclusione è opportuno ricordare anche che Dreamweaver mette a disposizione la possibilità di usare un software a scelta per il confronto dei file, in modo tale da poter scegliere più velocemente quale usare e quale scartare tra due commit. Tale software a nostra scelta si può collegare a Dreamweaver, passando per il menu Preferenze > Comparazione File.
Ora non rimane che il passo conclusivo su Dreamweaver CS5.5: il tool Adobe Browser Lab.
Integrazione con Adobe Browser Lab
Avere tutto sotto controllo è importantissimo per uno sviluppatore, oggi più di ieri. Ci sono infatti molti problemi a cui fare fronte, tra cui quello della compatibilità: tanti browser, tanti sistemi operativi, tante configurazioni e di conseguenza tante soluzioni da trovare. Adobe Browser Lab è un servizio online (raggiungibile su https://browserlab.adobe.com/it-it/index.html) con un semplice scopo: facilitare la riproduzione dei contenuti su tutte le piattaforme. Ora vedremo come integrare Dreamweaver CS5.5 con questo tool.
Per prima cosa bisogna attivare l’estensione: clicchiamo su Finestra > Estensioni > Adobe Browser Lab per visualizzare nel pannello laterale la rispettiva schermata. Nel frattempo, apriamo ancora una volta il nostro file index.php di WordPress, installato precedentemente. A questo punto possiamo cliccare su Anteprima dal pannello di Adobe Browser Lab. Nel caso non siamo già connessi al servizio Adobe CS Live dobbiamo inserire i dati del nostro utente:
Verrà mostrata una schermata in cui si avverte l’utente che i file presenti sul nostro hard disk verranno temporaneamente trasferiti sui server del servizio online Browser Lab. Per consentire questa operazione dovremo cliccare su Ok. La procedura di preparazione inizierà,e bisognerà aspettare fin quando tutto il materiale non sarà pronto:
Il risultato sarà visualizzato direttamente nella schermata di Browser Lab, nel proprio browser di default. Tramite la finestra di configurazione, ovviamente, sarà possibile anche selezionare il pacchetto di programmi da usare per il testing: sono presenti tutte le versioni di Firefox, Internet Explorer, Chrome e Safari:
Nella prova effettuata poco sopra è stato usato l’indirizzo di Google, ed automaticamente Browser Lab ha provveduto a caricarlo visualizzandolo nelle versioni Chrome e Internet Explorer: le differenze si vedono. È inoltre possibile posizionare dei righelli sulla pagina, nel caso si dovessero effettuare delle misurazioni:
Anche in questo caso Dreamweaver ci ha messo a disposizione un tool potente, fortemente automatizzato che consente un notevole risparmio di tempo: tutto a vantaggio della propria produttività.
Termina con questa overview di Browser Lab la nostra guida su Dreamweaver CS5.5. Per chi volesse approfondire particolarmente i singoli argomenti la risorsa migliore è senza dubbio l’help ufficiale di Adobe CS Live, rintracciabile su http://help.adobe.com/it_IT/cslive/cs/using/index.html. Altrimenti si può andare su http://www.adobe.com/communities/, la community ufficiale della Adobe dove trovare dei percorsi di learning validi e forum dove scambiarsi pareri, tecniche e soluzioni.
I enjoy looking through a post that can make people think.
Also, thank you for allowing for me to comment!
—————-
Mi piace guardare un post che può far riflettere la gente.
Inoltre, grazie per avermi permesso di commentare!
Mi piace.
Mi sta decisamente piacendo il tuo blog e non vedo l’ora di ricevere nuovi aggiornamenti.
Sei un blogger eccessivamente professionale,eccellente post!
Grazie per la ottima esposizione.
Bellissimo blog!
Questo blog è meraviglioso!
I really like the design and layout of your website. Excellent work!
—————-
Mi piace molto il design e il layout del tuo sito web. Lavoro eccellente!
Consigli molto utili in questo post!Grazie mille per la condivisione!
It’s really a cool and useful piece of information. I’m
satisfied that you simply shared this helpful info with us.
Please stay us informed like this. Thanks for sharing.
Very nice site