Dreamweaver è un programma semplice ma potente: attraverso questo software, infatti, è possibile creare, in pochissimo tempo, un sito web gradevole e funzionale senza conoscere approfonditamente il codice HTML. Come tutti i prodotti Adobe, Dreamweaver è periodicamente aggiornato e sottoposto a nuove implementazioni: tramite questa sezione potrete tenervi aggiornati su tutte le novità e gli sviluppi del software oltre che conoscere i principali suggerimenti e consigli su come usarlo al meglio.

Blog RSS Reader in Adobe AIR 1.0 con Dreamweaver CS3

Nuovo lavoro realizzato in Adobe AIR 1.0, con Dreamweaver CS3.
Questo è un lettore (come al solito molto semplice) di Feed RSS. Per l’occasione ho utilizzato anche gli Spry Widget che oggi Dreamweaver mette a disposizione.
Anche questa volta troverete un file zippato al seguente link (link) con il file AIR, e tutti file utilizzati per l’occasione che potrete riutilizzare liberamente.

Ovviamente ricordatevi di aggiornare Dreamweaver CS3 con l’estensione per Adobe AIR 1.0…
Altrimenti non potrete fare molto! :)

Creare applicazioni in Adobe AIR con Dreamweaver CS3

In questo post, forse più un breve tutorial, vedremo come sia possibile creare una desktop application (o più brutalmente ‘un lavoro in AIR’) partendo da un semplice documento HTML, formattato in stile web 2.0 attraverso i CSS 2.
Per prima cosa è indispensabile avere:
Dreamweaver CS3. In versione trial a 30 giorni scaricabile dal seguente link
L’estensione Adobe AIR
per Dreamweaver, gratuita e scaricabile dal seguente link.
Il Runtime di Adobe AIR (per installare/visualizzare i prodotti AIR). Gratuito e scaricabile da seguente link

Dopo l’installazione dell’estensione, apriamo Dreamweaver e impostiamo un sito utilizzando l’apposito pannello “Sito“. Questo pannello oltre a gestire il materiale contenuto nel nostro lavoro, ci permetterà di impostare anche il prodotto finale in AIR. Questo passaggio è pertanto obbligatorio, pena la non realizzazione del file in AIR. Vediamo quindi come impostare un sito.
Ovviamente necessitiamo di un lavoro da impostare, quindi, se volete, potete scaricare un mini sito di prova dal seguente link.

E’ un file zippato. Decomprimetelo in una cartella del vostro computer, quindi gestite il materiale tramite la voce di menu “Sito“, quindi “Nuovo Sito“. Come da immagine sottostante:

Ne approfitto per far notare come l’estensione di AIR appena installata abbia anche aggiunto due voci di menu apposite per lavorare in AIR: Air Application Settings… e Create AIR File. Quelle che appunto useremo noi. Ma andiamo con ordine.

Ora nelle seguenti schermate di impostazioni del sito, selezionate la cartella dove avete il vostro materiale, o dove avete salvato il nostro esempio. Non è necessario impsotare un server di prova se lavorate con l’esempio che avete scaricato, ne un linguaggio server-side (ASP, PHP, ecc..) visto che non ne avremo bisogno.

Ora aprendo l’unica pagina presente nell’esempio (home.html) oppure la pagina del vostro esempio, clicchiamo sulla voce di menu “Sito” quindi su “AIR Application Settings..“.
Una volta aperto il pannello completiamolo come illustrato nell’immagine sottostante (per uno zoom potete cliccare sulla foto).
Come vedete sono semplici impostazioni. Ma molto importanti.
I primi campi “File Name“, “ID“, “Version” e “Initial Content“, sono tutti obbligatori e personalizzabili senza limitazioni.
Ovviamente dobbiamo impostare una pagina iniziale (come l’home page per i siti internet) in “Initial Content”.
Il “Window style” impostato su “System Chrome” permetterà ad AIR di visualizzare il nostro lavoro all’interno di una finestra di sistema di Windows (sfruttandone appunto il colore di sistema, come fosse una normale finestra). Le altre due possibile opzioni invece permettono di rendere la finestra trasparente, facendo sparire i bordi delle finestre di Windows ma anche i classici pulsanti di riduzione a icona, chiusura e allargamento della finestra. Ovviamente in questi casi dovremmo sfruttare delle funzioni Javascript per chiudere la finestra altrimenti non avremmo nulla che possa farlo (eccetto ovviamente la combinazione di tasti: ALT+F4).Lasciamo inalterate le due successive opzioni.
Nella parte “Installer Settings” dobbiamo aggiungere nel pannello “Included files” anche le cartelle dei CSS e delle IMG per le immagini cliccando su “+” o “-” se vogliamo aggiungere singoli file o sul simbolo della cartella per aggiungere intere cartelle al progetto . Ricordatevi sempre infatti che all’interno di ogni progetto AIR dobbiamo inserire tutti gli elementi che compongono il nostro lavoro.
Manca solo un’ultima cosa: la firma digitale.
Ora, nessuno di noi è un produttore di software, quindi creeremo una firma digitale fittizia.
Per fare ciò clicchiamo sulla voce “Set” di “Digital signature“.
Nel successivo pannello, clicchiamo su “Create“.
Quindi nel nuovo e ultimo pannello, inseriamo i dati appositi. Salviamo il file ed impostiamo le password richieste.
Tornando al pannello di impostazioni di AIR possiamo ora creare il nostro file AIR, cliccando su “Create AIR file“.
Al termine troveremo il nostro file AIR pronto per l’installazione.
Basterà aprire il file per avviare il processo di installazione di AIR.
Così facendo il nostro file sarà installato sulla macchina. Troveremo un icona sul desktop e per disinstallarlo (meraviglia!) basterà andare in “Installazioni Applicazioni” e trovarlo in elenco per poterlo disinstallare. Come un programma comune.

Finalmente chi conosce i linguaggi del Web potrà ora tagliarsi una fetta di spazio nel mondo dello sviluppo Desktop.

Buon divertimento!

XML e Dreamweaver CS3: come creare contenuti dinamici

Grazie all’introduzione dei cosidetti Spry di Dreamweaver CS3, oggi è possibile, sfruttare le potenzialità di Javascript ed XML per creare pagine dal contenuto dinamico senza doversi finalmente più preoccupare di fastidiosi aggiornamenti. Certo, la soluzione migliore sarebbe conoscere linguaggi server-side, come PHP, ASP.NET, Coldfusion, ecc… .

Vediamo comunque come intervenire.

Prendiamo un classico caso di aggiornamento quasi obbligatorio: un catalogo di prodotti che in breve potrebbe anche essere la pagina dei “servizi” di un’agenzia.

Per prima cosa in Dreamweaver CS3 inseriamo nella parte esatta della nostra pagina del testo generico che sostituisca momentaneamente quello effettivo. Più o meno come nell’esempio sottostante:
Ora, questa sezione composta da “titolo”, “tipo” e descrizione dovrebbe essere ripetuta orientativamente per il numero degli elementi contenuti nel file XML. Andiamolo a vedere:

Ecco un esempio, scaricabile da qui se volete utilizzarlo come esempio.
Come potete vedere il file XML altro non è che una sequenza di dati gestiti da codice di marcatura (tag) come l’HTML. Solo che i nomi dei nodi sono personalizzati.
L’importante è che la struttura (dvd-titolo-anno) rimanga sempre uguale per ciascun lavoro.

Così facendo, i dati saranno salvati sull’XML, la pagina HTML li formatterà da un punto di vista grafico e il codice Javascript che Dreamweaver aggiungerà, gestirà la loro ripetizione all’interno del documento in funzione del numero di nodi “lavoro” contenuti nel documento XML.

Quindi per elaborare le nostre informazioni e posizionarle al posto giusto, dovremo utilizzare il framework Spry di Dreamweaver, raggiungibile cliccando sul menu alla voce “Spry“.
Da questa voce, clicchiamo sul primo pulsante a sinistra: “Dataset XML Spry“.
Nel pannello successivo impostiamo i seguenti valori in questa maniera:
Nome dataset: rs1
Origine XML: catalogo.xml
Elemento di riga: scegliamo il nodo principale “dvd”(se state usando l’esempio di prima).
XPath: catalogo/dvd
Il resto lasciamo pressapoco invariato. Confrontate con l’immagine sottostante per testare la prova.
L’immagine sottostante sintetizza quanto detto finora:
Confermiamo cliccando su “ok”.
Così facendo abbiamo stabilito una connessione tra la nostra pagina e il file XML.
Salviamo il nostro documento e Dreamweaver ci chiederà di salvare dei file Javascript all’interno della nostra applicazione. Confermiamo.
Ora, su Dreamweaver selezioniamo la porzione di pagina che vogliamo venga ripetuta per il numero di nodi “dvd” contenuti nel file XML, cioè la sezione precedenemtente inserita con i testi generici.

Ora non faremo altro che selezionare questa sezione e chiedere a Dreamweaver CS3 di ripetere questa parte (anche se ancora con i testi generici).

Quindi evidenziamo le varie : “titolo”, “tipo” e “descrizione dalla pagina”.
Clicchiamo sul terzo pulsante degli strumenti “Spry”, cioè “Ripetizione Spry“. Con ciò confermiamo che l’area selezionata è quella da ripetere. Per concludere la corretta ripetizione, dobbiamo apportare delle leggere modifiche al codice.
Andiamo in vista codice di Dreamweaver e cambiamo la riga corrispondente a quella selezionata e modifichiamo il codice in modo tale da aggiungere all’attributo (in arancione) “spry:repeat” anche il “spry:region=”id”.
Ora se provassimo a salvare e guardare in anteprima di Internet Explorer 7 o Firefox 2 vedremo che l’area viene ripetuta esattamente quanti sono i nodi “dvd” dell’XML ma sempre col testo “di appoggio”.
Concludiamo quindi sostituendo quel testo con quello corretto. Durante il nostro lavoro, Dremweaver dovrebbe aver reso agibile un ulteriore pannello “Applicazioni”–>”Associazioni” (vedi foto):
Ora selezioniamo sulla pagina la parola “titolo”, cancelliamola e sostituiamola nel punto esatto (tramite appunto drag&drop) con la voce “titolo” presente nel pannello “Associazioni”. Così facendo sostituiamo tutte le voci.
Al termine salviamo e testiamo la nostra pagina in Internet Explorer (7 possibilmente) o Firefox od Opera.
Come vedrete il file inserisce automaticamente tutti i film estratti dal file XML.
Ora per fare modifiche o aggiornamenti, basterà prendere il file XML e aggiungere o togliere quanto serve.

SCARICA L’ESEMPIO COMPLETO