Principali caratteristiche. Editor visuali e editor testuali editor visuali o, dall'inglese, WSYIWYG - What You See Is What You Get, ovvero ciò che vedi.

Presentazione sul tema: "Principali caratteristiche. Editor visuali e editor testuali editor visuali o, dall'inglese, WSYIWYG - What You See Is What You Get, ovvero ciò che vedi."— Transcript della presentazione:

1 Principali caratteristiche

2 Editor visuali e editor testuali editor visuali o, dall'inglese, WSYIWYG - What You See Is What You Get, ovvero ciò che vedi è ciò che ottieni (il risultato finale) - poiché consentono allutente di realizzare le pagine in maniera visiva, quasi come se si stesse lavorando allinterno di un browser virtuale, generando automaticamente il codice sottostante; editor di testo o di codice, perché lutente non modifica visualmente gli elementi di una pagina - immagini, tabelle, frames, ecc. - ma interviene direttamente sul codice. Questa divisione, più netta nella seconda metà degli anni 90, è adesso più sfumata. Infatti gli editor visuali consentono un facile intervento diretto sul codice, mentre gli editor testuali, per contro, consentono rapide anteprima di pagina e linserimento di elementi della pagina tramite comandi che risparmiano buona parte della scrittura diretta del codice.

3 vantaggi e svantaggi Entrambi gli editor presentano vantaggi e svantaggi: se da un lato gli editor visuali consentono un più rapido apprendimento e spesso velocizzano il lavoro, dallaltro gli editor testuali consentono un assoluto controllo del codice, risultando così, spesso più graditi agli utenti avanzati e velocizzano il lavoro quando si vuole inserire codice personalizzato.

4 Dreamweaver Dreamweaver nasce, come editor visuale, nel 1997 ed il suo bellissimo nome (tessitore dei sogni) risulta veramente azzeccato. Nel corso degli anni si arriva alla versione 4, che consente anche un eccellente controllo del codice e che riscuote un crescente successo anche fra gli utenti avanzati, tra i più riluttanti ad adottare editor visuali. Oggi, infatti, Dreamweaver è utilizzato in tutto il mondo da circa l80% dellutenza professionale, perché offre molteplici vantaggi, non ultimo, quello di generare il codice più corretto e pulito tra gli editor della sua categoria. Lattuale versione di Dreamweaver non ha un numero di release, ma si chiama Dreamweaver MX, tuttavia nella finestra splash iniziale vediamo come numero di versione il 6, dunque Macromedia, la società che lo produce, ha saltato a piè pari la versione 5. Questo sta a significare limportanza delle novità di questa release, considerata dagli utenti delle prima ora, laggiornamento più importante mai realizzato.

5 Come procurarsi Dreaweaver Per fare esperienza con questo software dovete essere in possesso di Dreamveawer MX, se ancora non lo avete, è possibile scaricare una versione dimostrativa, pienamente funzionante per 30 giorni, dal sito da questa pagina del sito Macromedia. La versione dimostrativa è in inglese, per cui le videate ed i comandi descritti nelle lezioni seguenti saranno relativi alla versione inglese.Macromedia

6 Installare Dreaweaver Lanciate linstaller e seguite le istruzioni delle finestre di dialogo. Dreamweaver MX vi permette di editare parecchi linguaggi, per cui durante la fase di installazione vi verrà richiesto per quali linguaggi volete che Dreamweaver MX sia leditor predefinito. Dunque, se per qualche linguaggio preferite che leditor predefinito sia un altro, togliete da quel linguaggio il segno di spunta.

7 Configurare il Workspace La prima volta che lanciate Dreamweaver MX si aprirà una finestra di dialogo in cui vi verrà richiesto di configurare il vostro Workspace (spazio di lavoro). Tra le novità di MX cè la possibilità di scegliere tra tre tipi di configurazioni diverse: Dreamweaver MX Workspace, la nuova interfaccia con i pannelli integrati, posizionati sulla sinistra. Consigliata a chi è un assiduo utilizzatore di programmi come Flash, Fireworks o PhotoShop, che, appunto posizionano i pannelli sulla sinistra dellarea di lavoro; Dreamweaver 4 Workspace, che ricorda lintefaccia delle versioni precedenti, con i panelli sganciati che possono essere posizionati a piacimento nei vari punti del vostro monitor. Consigliata a chi lavora con due monitor contemporaneamente; Dreamweaver MX Workspace HomeSite/Coder –Style, la nuova interfaccia con i pannelli integrati, posizionati sulla destra e che di default si aprirà in Code View (Vista Codice). Consigliata per gli utenti di HomeSite, ColdFusion Studio e Jrun Studio. Spuntate la casella della vostra impostazione preferita (di default Dreamweaver MX ha selezionata la configurazione Dreamweaver MX Workspace) premete OK e finalmente si aprirà il nuovo Dreamweaver MX.

8 Esploriamo l'interfaccia La prima volta che lanciate Dreamweaver MX, se sul vostro computer non sono presenti altre installazioni di versioni precedenti nelle quali avevate definito dei siti, comparirà una finestra di dialogo che vi avverte che non vi sono siti definiti. Potete ignorarla cliccando su Cancel. Se si sceglie di premere Cancel, le successive volte che verrà lanciato Dreamweaver ci verrà riproposta questa finestra di dialogo, tuttavia sarà anche possibile definire il primo sito dal pannello Site del gruppo Code.

9 Definiamo il sito vediamo subito cosa succede cliccando su Edit Sites...: Comparirà unaltra finestra di dialogo, che consente varie opzioni sui siti; Clicchiamo Edit... per lanciare la finestra Site Definition in cui sono selezionate le opzioni Advanced e Local Info; Scriviamo il nome del sito nel campo Site Name; Clicchiamo sullicona della cartella accanto al campo Local Root Folder per navigare allinterno del nostro disco e selezioniamo una cartella per il nostro sito, così in questo campo apparirà il percorso del sito locale; Infine clicchiamo sullicona della cartella del campo Default Images Folder per navigare allinterno del nostro disco e selezioniamo una cartella per le immagini da inserire nel nostro sito, in questo campo apparirà il percorso della cartella dove si trovano le immagini del nostro sito locale.

10 Area di lavoro Analizziamo larea di lavoro che si presenta al primo avvio di Dreameaver MX. (ricordo che per le schermate di questo corso si è scelta larea di lavoro Dreamweaver MX Workspace HomeSite/Coder –Style.)Dreamweaver MX Workspace HomeSite/Coder –Style In alto troviamo la barra del titolo dove, accanto alla scritta Macromedia Dreamweaver MX, troviamo - in parentesi quadra - il titolo della pagina, seguito - in parentesi tonda - dal nome del file. Dreamweaver, per impostazione predefinita, assegna alla pagina il titolo Untitled Document fino a quando non ne scegliamo uno diverso e come nome del file - finché non lo salviamo con un nome a nostra scelta, Untitled – ed un numero progressivo in funzione dei nuovi documenti aperti in quella sessione di lavoro. La prima volta che apportiamo dei cambiamenti in una pagina, Dreamweaver aggiunge un asterisco accanto al nome del file. Immediatamente sotto troviamo le voci di menu di Dreamweaver:

11 Le voci del menù File, che contiene i comandi per la gestione dei files; Edit, che contiene i principali comandi per la modifica della o delle pagine; View comprende le opzioni per la visualizzazione dellarea di lavoro; Insert comprende gli stessi oggetti che sono anche accessibili dal pannello Insert, si tratta in genere di tag HTML; Modify consente di modificare le proprietà della pagina o degli elementi sui quali stiamo lavorando, tuttavia, pur essendo raggruppate in questa voce di menu alcune delle funzionalità principali, personalmente trovo più comodo accedere a tali funzionalità tramite i pannelli di Dreamweaver, oppure da scorciatoie come quelle di tastiera o utilizzando il comodissimo menù contestuale da tasto destro del mouse; Text da questo menu accediamo al controllo degli elementi testuali della pagina; Commands, i comandi che troviamo in questa voce di menù servono, in genere, per automatizzare operazioni ripetitive. In realtà ne troviamo ben pochi, ma importanti, perché in questa voce i menu possono essere registrate e salvate come voci di menu le operazioni che il singolo utente riterrà più utili, un po come le Macro dei programmi della suite Microsoft Office. Inoltre da questo menu potremo accedere ad una buona parte delle estensioni per Dreamweaver; Site questa voce di menu ci permette di accedere ai principali controlli sul sito che stiamo sviluppando, oltreché accedere alla sua rappresentazione visiva; Window da qui apriamo i vari pannelli di Dreamweaver, questi ultimi ci permettono ulteriori rapidi e completi controlli e modifiche sugli elementi della pagina; Help, per accedere ai vari file di help ed allExtension Manager, un programma separato, ma che viene installato contestualmente a Dreamweaver.

12 I pulsanti della toolbar Più in basso, al di sotto del gruppo di pannelli Insert troviamo la Barra degli Strumenti con una serie di pulsanti, da sinistra: Show Code View che ci permette di visualizzare la pagina come codice (HTML e/o gli eventuali altri linguaggi utilizzati); Show Code and Design Views che divide larea della pagina in due aree, ridimensionabili per mezzo del tracinamento del bordo comune, luna in vista codice e laltra in modalità visuale, simile a come apparirà sui browsers; Show Design View, la modalità visuale; Live Data View consente di visualizzare una pagina contenente linguaggi server side in modo simile a come apparirà sui browsers, per utilizzare questo comando è necessario avere scelto un Server Model ed avere attivato la connessione al database, Title: è il campo di testo che permette di modificare il titolo del documento; File Management, permette vari controlli, tra cui la pubblicazione del sito con il programma FTP integrato in Dreamweaver; Preview/Debug in Browser consente sia lanteprima che il debug nel browser di destinazione; Refresh Design View aggiorna la modalità visuale dopo aver modificato il codice; Reference apre il pannello dei riferimenti ai vari linguaggi di cui Dreamweaver offre la reference; Code Navigation ci permette di navigare rapidamente allinterno del codice, di individuare rapidamente le funzioni JavaScript inserite nella pagina ed attivare il relativo debug; View Options consente di personalizzare le varie opzioni di visualizzazione della pagina.

13 La barra di Stato In basso troviamo la Barra di Stato con sulla sinistra lutilissimo Tag Selector. Questo serve mentre costruiamo la pagina in Design View, infatti ci fa visualizzare il tag HTML su cui stiamo lavorando e tutti quelli precedenti in cui è racchiuso a partire da. In questo modo possiamo facilmente selezionare un tag altrimenti difficile da selezionare ed intervenire a modificarne le proprietà, velocizzando di molto il nostro lavoro in modalità visuale. Ad esempio se vogliamo selezionare la riga di una tabella allinterno della quale è inserito un filmato Flash, è sufficiente cliccare sul filmato e poi cliccare due tag indietro sul Tag Selector per selezionare esattamente la riga di tabella desiderata.

14 I pannelli I pannelli o i gruppi di pannelli che appaiono di default nellarea di lavoro al lancio di Dreamweaver MX, sono, dallalto verso il basso, al lato della documento aperto: Design (gruppo di pannelli), Code (gruppo di pannelli), Application (gruppo di pannelli), Files (gruppo di pannelli) e Answers. Infine al di sopra ed al di sotto della pagina troviamo rispettivamente il gruppo di pannelli Insert e il pannello Property. Altri pannelli sono disponibili dal menu Window: il gruppo Result che si apre sotto il pannello Property ed i pannelli accessibili da Windows >> Others… Ovvero i pannelli mobili Code Inspector e Sitespring, il gruppo di pannelli Advanced Layout, ed il pannello History, che si agganciano ai pannelli sul lato del documento tra il gruppo Sites ed Answers ed infine il pannello Timelines che si apre tra Property ed il gruppo Result in fondo alla pagina.

15 I pannelli Insert Il gruppo di pannelli Insert è situato sopra larea del documento, è unalternativa al menu Insert per inserire gli oggetti. Common, da cui inserire links, immagini, livelli, tabelle, Flash movies, ecc.; Layout, che consente di andare in modalità Layout View; Text, per inserire i principali elementi relativi alla formattazione del testo; Tables, che in vista codice consente di inserire alcuni tag di tabella non presenti nelle precedenti versioni di Dreamweaver; Frames, che consente la creazione di frameset ed, in vista codice, consente linserimento del tag Iframe, il cui supporto è tuttavia parziale e comunque nullo in modalità visuale; Forms, per inserire un form ed i suoi elementi; Template, una nuova funzionalità che consente linserimento rapido dei templates e linserimento di templates nidificati; Characters: inserisce linterruzione di riga (attivabile anche mediante la combinazione di tasti Maiuscolo+Invio), lo spazio unificatore ed i principali caratteri speciali (ad esempio il simbolo delleuro e del copyright) Media, inserisce i elementi multimediali come file Flash o Shockwave, nonché dei bottoni Flash, o converte il testo in Flash senza bisogno di avere questultimo programma; Head, da questo pannello accediamo agli elementi del tag head, tra cui i meta tags per i motori di ricerca e i link a file esterni (ad esempio JavaScript o CSS) Script, ci permette di gestire degli script interni o esterni alla pagina; Application, è un nuovo gruppo di oggetti relativo alle funzioni comuni delle pagine contenenti linguaggi lato server, supportati da Dreamweaver MX, ovvero ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, JSP e PHP MySQL. Pannelli specifici (ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e PHP) vengono visualizzati alla sinistra del pannello Application quando si sviluppano pagine nei menzionati linguaggi.