La versione 2015 di Dreamweaver CC è incentrata sulla progettazione reattiva, sui miglioramenti alle funzioni di modifica del codice, sull’anteprima delle pagine Web sui dispositivi e sull’estrazione in batch da composizioni di Photoshop di immagini ottimizzate per il Web con più risoluzioni. L’integrazione con il framework Bootstrap consente di creare siti Web reattivi per dispositivi mobili. Le media query visive integrano ulteriormente l’esperienza di progettazione per il Web reattivo consentendo di visualizzare e modificare le progettazioni in vari punti di interruzione. 

Questa versione include anche diversi miglioramenti delle funzioni di modifica nella vista Dal vivo e CSS Designer. Questo articolo presenta le nuove funzioni e i miglioramenti e fornisce collegamenti a ulteriori risorse di aiuto e apprendimento.

Dreamweaver consente ora di provare le pagine Web prodotte su più dispositivi contemporaneamente. Potete vedere come la pagina Web rifluisce con diversi fattori di forma e provare le funzioni interattive sulle pagine. Tutto questo senza dover installare nessuna app per dispositivi mobili o senza dover connettere fisicamente i dispositivi al desktop. Acquisite semplicemente il codice QR generato automaticamente con i dispositivi e visualizzate in anteprima le pagine Web sui dispositivi.

Live Inspect, quando attivato sul desktop, riflette tutti i dispositivi connessi e consente di ispezionare i diversi elementi e di modificare le progettazioni secondo necessità.

Per informazioni dettagliate, vedete Visualizzare in anteprima ed esaminare pagine Web su più dispositivi.

Media query visive

Le barre media query visive sono una rappresentazione visiva delle media query presenti nella pagina. Queste barre consentono di visualizzare, in diversi riquadri di visualizzazione, la pagina Web in diversi punti di interruzione e come diversi componenti nella pagina Web si riadattano. Osservando la pagina nei diversi riquadri di visualizzazione, potete modificare il design specifico a un riquadro di visualizzazione senza influire sul design della pagina in altri riquadri di visualizzazione.

Le media query visive comprendono tre barre come righe orizzontali, ciascuna rappresentante una categoria di media query:

•  Verde: media query con condizioni max-width
•  Blu: media query con condizioni min-width e max-width
•  Viola: media query con condizioni min-width

Per ulteriori informazioni, consultate Media query visive.

Supporto per il linting del codice

Con questa nuova versione di Dreamweaver, è ora possibile eseguire il debug del codice per individuare gli errori più comuni utilizzando il linting. Il linting è il processo di analisi del codice per trovare potenziali errori o utilizzi sospetti del codice. Dreamweaver può eseguire questo comando su file HTML, CSS e JavaScript durante il caricamento, il salvataggio o la modifica. Gli avvisi e gli errori rilevati vengono quindi elencati nel nuovo pannello Output.

Per ulteriori informazioni, vedete Codice di linting.

Supporto per Emmet

Siete sviluppatori molto produttivi che sviluppate diverse righe di codice con Dreamweaver? Con le abbreviazioni di Emmet potrete risparmiare tempo prezioso: sono facili da ricordare e da digitare e vengono sostituite dal codice completo con la semplice pressione del tasto Tab nella vista Codice.

Per ulteriori informazioni, consultate Inserire codice utilizzando Emmet.

Anteprima nella vista Codice

Se lavorate nella vista Dividi, potete vedere immediatamente qualsiasi modifica alle immagini o ai colori nella vista Dal Vivo o Progettazione. Quando però preferite lavorare solo nella vista Codice, le immagini sono solo nomi di file, e questo spesso non è intuitivo. Anche i colori, a meno che non si utilizzino colori predefiniti, sono solo un insieme oscuro di numeri. Con questa versione di Dreamweaver, potrete rapidamente vedere in anteprima le immagini e i colori direttamente nella vista Codice. Questa funzione consente di connettere visivamente i nomi file delle immagini e i formati dei colori con le immagini o i colori attuali da essi rappresentati. Le decisioni di progettazione potranno di conseguenza essere prese con maggiore rapidità, riducendo drasticamente i tempi di sviluppo.

Per ulteriori informazioni, vedete Anteprima di immagini e colori nella vista Codice.

La vista Codice visualizza anche un’anteprima dell’errore. Il numero di riga contenente il codice errato, è evidenziata in rosso. Quando si passa con il mouse sul numero, appare una breve descrizione dell’errore.

Nota: viene visualizzato solo il primo errore nella riga. Se la riga contiene solo un avviso, ne viene visualizzata la descrizione. Se la riga contiene un avviso e un errore, viene visualizzata solo la descrizione dell’errore.

Nuovi snippet di codice

Gli snippet sono parti di codice che possono essere riutilizzati ripetutamente in più progetti. In questa release di Dreamweaver sono presenti snippet di codice nuovi e aggiornati:

• Snippet Boostrap
• Animazioni e transizioni CSS
• Effetti CSS
• Snippet CSS
• Snippet HTML
• Snippet JavaScript (aggiornamento)
• Snippets PHP
• Snippet preprocessore
• Snippets responsive design

Per informazioni sull’utilizzo degli snippet di codice, vedete Operazioni con gli snippet di codice.

Ora potete inoltre mantenere gli snippet di codice aggiornati nelle vostre installazioni di Dreamweaver utilizzando la funzioni di sincronizzazione cloud. Per informazioni sulla sincronizzazione degli snippet di codice con Creative Cloud e altre installazioni di Dreamweaver, vedete Sincronizzare le impostazioni di Dreamweaver con Creative Cloud.

Integrazione con Bootstrap

Bootstrap è il più diffuso framework HTML, CSS e JavaScript gratuito per lo sviluppo di siti Web reattivi e per dispositivi mobili. Il framework include modelli CSS e HTML reattivi per pulsanti, tabelle, elementi di navigazione, caroselli di immagini e altri elementi che è possibile utilizzare nelle pagine Web. Sono inoltre disponibili alcuni plug-in JavaScript aggiuntivi, che consentono anche agli meno esperti di creare siti Web reattivi di grande impatto.

Dreamweaver consente di creare documenti Bootstrap e anche di modificare pagine Web esistenti create con Bootstrap. Potete iniziare a progettare il vostro sito Web Bootstrap utilizzando uno dei modelli campione di Bootstrap selezionabile dalla finestra di dialogo Nuovo documento (Modelli per iniziare > Bootstrap Templates). 

• Bootstrap-Agenzia
  
• Bootstrap-eCommerce
• Bootstrap-Portfolio
• Bootstrap-Prodotto
• Bootstrap-Immobiliare
• Bootstrap-Curriculum
  

Dalla finestra di dialogo Nuovo documento (Nuovo documento > Bootstrap), potete anche creare un documento Bootstrap personalizzato. Create quindi il sito Web modularmente utilizzando i componenti Bootstrap quali pannelli a soffietto e carousel, utilizzando il pannello Inserisci in Dreamweaver. Oppure, se avete a disposizione delle composizioni Photoshop, utilizzate Extract per importare immagini, font, stili, testo e altro ancora nel documento Bootstrap.

Con Dreamweaver potete modificare sia i progetti Bootstrap completi sia quelli ancora in corso d’opera; non solo potete modificare il codice, ma anche sfruttare le funzioni di modifica visiva quali la modifica nella vista Dal vivo, CSS Designer, media query visive ed Extract. 

Per informazioni dettagliate, vedete Operazioni con i file Bootstrap.

Supporto per la modifica di tabelle nella vista Dal vivo

La modifica delle tabelle può essere effettuata con facilità e rapidità nella vista Dal vivo utilizzando una delle seguenti opzioni o una combinazione di esse:

Per ulteriori informazioni, vedete Modificare le dimensioni di tabelle e Formattare tabelle e celle.

Nuovi menu nella vista Dal vivo

Le funzionalità di modifica nella vista Dal vivo sono state migliorate con i seguenti menu disponibili nella vista stessa:

• Modifica
• Formato
• Comandi
• Sito
• Opzione "Incolla speciale" nel menu Modifica e di scelta rapida

Supporto per gli elementi dell’interfaccia utente jQuery nella vista Dal vivo

Ora potete inserire widget jQuery direttamente nella vista Dal vivo utilizzando il pannello Inserisci. Trascinate l’elemento desiderato dal pannello Inserisci sulla vista Dal vivo e tenete premuto il mouse per utilizzare una delle seguenti funzioni di inserimento:

• Guide dal vivo: queste guide sono visualizzate quando passate sulla vista Dal vivo con l’elemento trascinato dal pannello Inserisci. Grazie alle Guide dal vivo, potete inserire elementi in alto o in basso, a sinistra o a destra, rispetto all’elemento attivo.

• Icona DOM: l’icona DOM appare dopo la visualizzazione delle Guide dal vivo, quando vi fermate un attimo. Fate clic sull’icona per visualizzare la struttura DOM in una finestra a comparsa e rilasciare l’elemento in un punto preciso della struttura del documento.

• Assistente di posizionamento: consente di posizionare l’elemento prima o dopo l’elemento attivo o di nidificarlo al suo interno (nella vista Dal vivo).

Per ulteriori informazioni, vedete Inserire elementi direttamente nella vista Dal vivo.

Pannello DOM

Vista rapida elemento è ora il pannello DOM (Finestre > DOM). Il pannello DOM consente di eseguire tutte le funzioni offerte da Vista rapida elemento e altre ancora. Questo pannello è disponibile in tutte le aree di lavoro ed è permanente, potete cioè aprire due documenti e accedere contemporaneamente ai relativi pannelli DOM.

Utilizzando il pannello DOM, potete:

• Trascinare elementi del pannello Inserisci e inserirli con precisione nella struttura del documento.
• Copiare, incollare, duplicare, spostare o eliminare gli elementi strutturali nel documento.
• Visualizzare qualsiasi elemento della pagina nel contesto della struttura del documento dato che l’elemento attivo è evidenziato nel pannello DOM.

Per informazioni dettagliate sull’utilizzo del pannello DOM, anche per la modifica della struttura HTML, vedete Pannello DOM.

Suggerimenti di codice SVG nei documenti HTML

Nei documenti HTML sono ora supportati i suggerimenti di codice per tutti gli elementi e gli attributi SVG. Utilizzando questi suggerimenti di codice, potete ora aggiungere elementi SVG nella vista Codice dei documenti HTML allo stesso modo dei documenti SVG.

Anteprime tecnologia

A partire da questa versione, il team di Dreamweaver offre anteprime di alcune funzioni per raccogliere commenti e suggerimenti. In base ai commenti, queste funzioni saranno migliorate ulteriormente e incluse come funzioni di base di Dreamweaver. Tali funzionalità sono accessibili dalla categoria Anteprime tecnologia della finestra di dialogo Preferenze.

La funzione in anteprima in questa versione è Evidenziazione codice. Questa funzione consente di evidenziare tutte le occorrenze del testo selezionato nella vista Codice.

Per utilizzare questa funzione, effettuate le seguenti operazioni:

Per spostarvi tra le varie istanze del testo evidenziato, potete utilizzare le seguenti scelte rapide da tastiera:

• Selezionate l’occorrenza successiva: F3 (Win); Cmd+G (Mac)
• Selezionate l’occorrenza precedente: MAIUSC+F3 (Windows); Cmd+MAIUSC+G (Mac)

Anteprima personalizzata nella vista Codice utilizzando le API di ShowPreview

Con questa versione di Dreamweaver, potete generare una finestra a comparsa di anteprima personalizzata che viene visualizzata quando posizionate il cursore sul codice nella vista Codice. Per implementare le anteprime personalizzate, potete utilizzare la nuova API, showPreview, insieme all’API esistente mm: browsercontrol. Ad esempio, potete utilizzare queste API per visualizzare un’anteprima di tutti i parametri di una funzione JavaScript quando passate il cursore sul nome della funzione.

Per ulteriori informazioni, vedete Guida di riferimento alle API di Dreamweaver: Code view functions (Funzioni della vista Codice).

Ripiegamento del codice

Nelle versioni precedenti di Dreamweaver, era necessario selezionare blocchi di codice nella vista Codice e poi comprimerli. In questa versione e nelle successive, potete comprimere i blocchi di codice semplicemente passando il mouse sui numeri di riga e facendo clic sul triangolo visualizzato.

Il ripiegamento del codice (compressione) è possibile nei file HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML e SVG ed è basato sui blocchi di tag.

Le azioni Copia, Taglia e Incolla e di trascinamento non modificano lo stato di ripiegamento del codice. Ad esempio, quando copiate un blocco di codice compresso, l’azione Incolla lo incollerà come blocco compresso.

Nei file HTML, a differenza della precedente funzionalità di compressione del codice, il contenuto compresso contiene ora il tag di chiusura e sarà riprodotto in maniera diversa. Ora inoltre, il numero di caratteri visualizzati in un blocco di codice compresso è maggiore. In questo modo è più semplice visualizzare l’anteprima degli attributi iniziali, se presenti.

Per ulteriori informazioni, vedete Comprimere il codice.

Miglioramenti a Extract

• Extract per dispositivi
• Supporto per unità percentuali

Extract per dispositivi

Nei dispositivi non variano solo le dimensioni ma anche le risoluzioni. La progettazione per un sito Web reattivo deve prevedere la corretta visualizzazione sui dispositivi delle versioni delle immagini con più risoluzioni. Tuttavia la creazione di così tante versioni con risoluzioni diverse per tutte le immagini di un progetto può diventare un’attività complessa.

Extract in Dreamweaver semplifica in modo considerevole questa attività. Durante l’estrazione dell’immagine dalla composizione Photoshop nella versione 2015 di Dreamweaver, potete scegliere di estrarne versioni con risoluzioni diverse. L’immagine in Photoshop viene ridimensionata automaticamente in risoluzioni predefinite diverse.

Queste immagini possono successivamente essere richiamate in JavaScript o media query per visualizzarle in base al dispositivo utilizzato. Ad esempio, per gli schermi retina ad alta densità, potete utilizzare una versione dell’immagine con una risoluzione doppia. 

Per ulteriori informazioni, vedete Estrarre immagini dai file PSD.

Supporto per unità percentuali

Nel pannello Extract potete ora visualizzare la larghezza e l’altezza delle immagini oltre che in pixel, in valori percentuali come pure le misurazioni.

Quando selezionate una risorsa nel pannello Extract, nella finestra a comparsa visualizzata è presente un’opzione per passare tra pixel e percentuale. L’unità selezionata in questa finestra a comparsa viene mantenuta quando visualizzate le misurazioni tra risorse.

Miglioramenti della modifica nella vista Dal vivo

Inserimento nidificato nella vista Dal vivo

Nella vista Dal vivo potete ora inserire elementi all’interno di altri elementi. Quando trascinate elementi dal pannello Inserisci, Risorsa o all’interno della vista Dal vivo, mantenendo il cursore sopra diversi elementi della pagina, noterete il riscontro visivo per annidare gli elementi, insieme alle guide per prima e dopo.

• Guide prima/dopo: quando passate sul 30% della parte superiore o inferiore dell’elemento.
• Riscontro visivo nidificazione: quando passate sul 40% della parte centrale dell’elemento.

Modifica di selettori direttamente in Visualizzazione elemento

Per modificare il nome del selettore, ora potete fare semplicemente clic sul suo nome in Visualizzazione elemento. La modifica viene salvata facendo clic in un punto qualunque della pagina.

Modifiche della barra degli strumenti Codifica

Nella barra degli strumenti Codifica, le seguenti opzioni relative alla compressione del codice, sono state rimosse:

• Comprimi tag completo
• Comprimi selezione

Nota: queste opzioni sono state rimosse dal menu di scelta rapida e anche dal menu Modifica.   Ora potete comprimere il codice passando il mouse sul numero di riga e facendo clic sul triangolo visualizzato.   Le seguenti opzioni sono ora anche disponibili per i file HTML, CSS e JS.

• Evidenzia codice non valido
• Avvisi per errori di sintassi nella barra delle informazioni

Ora potete utilizzare il linting per trovare errori nel codice, i cui risultati sono visualizzati nel pannello Output.

Miglioramenti a CSS Designer

• Modalità Tutto e Corrente
• Suggerimenti per i valori della proprietà
• Identificazione tramite colori delle media query
• Altre modifiche

Modalità Tutto e Corrente

CSS Designer offre ora due modalità diverse per visualizzare e modificare le proprietà CSS:

• Tutto: con questa modalità, viene elencato tutto il codice CSS, le media query e i selettori del documento corrente. Questa modalità non distingue la selezione nella vista Progettazione o Dal vivo.

La modalità è ottimale per creare CSS, media query e selettori.

• Corrente: con questa modalità, sono elencati gli stili calcolati per qualsiasi elemento selezionato nella vista Progettazione o Dal vivo. In un file CSS, quando è selezionato un selettore, questa modalità ne visualizza le proprietà.

Suggerimenti per i valori della proprietà

Per l’impostazione di nuove proprietà, Dreamweaver ora visualizza suggerimenti per il codice in CSS Designer, in modo simile alla vista Codice.

Identificazione tramite colori delle media query

Le media query nel pannello CSS Designer sono ora identificate da colori per corrispondere alle Media query visive.

•  Verde: media query con condizioni max-width
•  Blu: media query con condizioni min-width e max-width
•  Viola: media query con condizioni min-width

Altre modifiche

• Opzione Mostra set: la casella di controllo Mostra set nella sezione Proprietà è ora selezionata per impostazione predefinita al primo avvio di Dreamweaver. Le eventuali modifiche a questa opzione (selezione o deselezione) è permanente in tutte le sessioni successive di Dreamweaver.

• Il pannello scorre per visualizzare Aggiungi proprietà al centro: quando fate clic su + nella sezione Proprietà, essa scorre in modo che la riga Aggiungi proprietà sia visualizzata al centro del pannello. Se la sezione Proprietà è troppo piccola, la riga Aggiungi proprietà è visualizzata nella parte inferiore del pannello.

• Evidenziazione dello sfondo durante l’aggiunta di una nuova proprietà: quando la casella di testo Aggiungi nuova proprietà è attiva, la riga è evidenziata con lo sfondo grigio.

• Modifica della posizione dei pulsanti + e -: i pulsanti + e - visualizzati in ciascun pannello di CSS Designer sono stati spostati dall’estrema destra all’estrema sinistra per renderli più visibili.

• La categoria Personalizzato è stata rinominata: il nome della categoria per le proprietà personalizzate è stato cambiato in Altro.

Modifiche al flusso di lavoro del server di prova

Le migliorie al flusso di lavoro del server di prova in questa versione sono dirette a rendere semplice ed efficace la modifica nella vista Dal vivo dei documenti con codice server-side.

Modifiche nella configurazione del server

A differenza delle versioni precedenti di Dreamweaver, ora potete assegnare un determinato server solo come server di prova oppure server remoto. Nell’interfaccia utente per la configurazione del server, le caselle di controllo sono state sostituite con pulsanti di opzione per obbligare la scelta del server.

Se aprite un sito o importate le impostazioni di un sito creato in versioni precedenti di Dreamweaver e se il sito dispone di un unico server specificato sia come server di prova che server remoto, verrà creata una voce duplicata per il server. Una è contrassegnata come server remoto (a cui viene aggiunto _remote) e l’altra come server di prova (a cui viene aggiunto _testing).

Invio automatico di file dinamici

Ora quando aprite, create o salvate modifiche nei documenti dinamici, Dreamweaver li sincronizza automaticamente con il server di prova. Dreamweaver non visualizza più le finestre di dialogo "Aggiornamento server di prova" o "Invia file dipendenti" per i flussi di lavoro dei server di prova.

Per ulteriori informazioni, vedete Invio automatico di file dinamici.

Modifiche al flusso di lavoro di Business Catalyst

L’estensione Business Catalyst è stata decommissionata e non potrà essere utilizzata in Dreamweaver CC 2015 o versioni successive. Dreamweaver CC 2014.1.1 è l’ultima versione compatibile con l’estensione Business Catalyst.

Per utilizzare Business Catalyst con Dreamweaver CC 2015 e versioni successive, utilizzate l’opzione di connessione SFTP in Dreamweaver. Per ulteriori informazioni, vedete la documentazione di Business Catalyst.

Questo è l’annuncio ufficiale su questa modifica nel sito Web di Business Catalyst. 

Altre modifiche

• Il pannello Inserisci è stato riorganizzato per raggruppare tutte le opzioni nelle categorie in Comuni, Layout e Oggetto multimediale in una categoria più logica, HTML.

• I video delle brevi presentazioni e il collegamento per avviarli dal menu Aiuto sono stati rimossi. Questa opzione non è inoltre disponibile per impostazioni internazionali diverse dall’inglese.

• Le opzioni presenti nella barra a discesa del documento nella parte inferiore della pagina sono state semplificate; le uniche opzioni disponibili ora sono Orientamento, Dimensione reale e Modifica dimensioni.