Sei sulla pagina 1di 14

21-Cap01 7_DW.

qxd

22-10-2007

12:07

Pagina 347

CAPITOLO

17

ADOBE DEVICE CENTRAL


In questo capitolo
In questo capitolo apprenderai come utilizzare Adobe Device Central imparando a creare contenuti per dispositivi mobili. In particolare vedrai come creare e visualizzare in anteprima il contenuto su diversi dispositivi mobili, eseguire test per diversi dispositivi simulando interazioni reali, incluso il test di vari livelli di prestazioni, di memoria e di varie opzioni di consumo energetico e di illuminazione.

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 348

348

INTRODUZIONE

AD

ADOBE DEVICE CENTRAL

Adobe Device Central consente ai Web designer e agli sviluppatori che utilizzano Dreamweaver CS3 di realizzare anteprime dei le di Dreamweaver e visualizzarli su diversi dispositivi mobili. possibile quindi avere unidea di come verranno visualizzate le pagine Web su schermi di piccole dimensioni e vericare per esempio se i moduli CSS vengono eseguiti correttamente. Il proprio sito Web pu essere visibile sui telefoni portatili utilizzando Dreamweaver per creare le pagine e Device Central per vericare come vengono visualizzate sui vari dispositivi. Adobe Device Central supporta diversi formati, inclusi Flash, bitmap, video e Web. Puoi utilizzare diversi formati per creare tipi di contenuto differenti, come screen saver o sfondi. Iniziamo con lavviare e osservare linterfaccia principale del programma. 1. Dal pulsante Start seleziona la voce Tutti i programmi e fai clic su Adobe Device Central CS3 (vedi gura 17.1).
Figura 17.1
Il comando di avvio.

2. Viene cosi avviato il programma che visualizzata una nestra di benvenuto (vedi gura 17.2) attraverso la quale puoi:

aprire subito un le per testarlo sui dispositivi mobili; esplorare lelenco dei dispositivi supportati; accedere a una serie di documenti di supporto; avviare la procedura di creazione di contenuti utilizzando Flash, Photoshop o Illustator.

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 349

CAPITOLO 17 ADOBE DEVICE CENTRAL

349

Figura 17.2
La nestra di benvenuto. CAPITOLO

17

3. Fai clic sul pulsante in alto a destra per chiudere la nestra di benvenuto e visualizzare linterfaccia principale di Adobe Device Central (vedi gura 17.3).
Figura 17.3
Linterfaccia di Adobe Device Central.

COMPONENTI

DELLAREA DI LAVORO

Nella schermata principale sono presenti i componenti dellarea di lavoro di Adobe Device Central. Diamo un rapido sguardo a ognuno di essi: Il pannello Set dispositivi, posto in alto a sinistra, visualizza un set predenito di dispositivi generici. Per creare set di dispositivi personalizzati, trascina le icone (o copiale e incollale) dallelenco Dispositivi disponibili nel pannello Set dispositivi.

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 350

350

Il pannello Dispositivi disponibili, posizionato sotto il pannello Set dispositivi, visualizza tutti i dispositivi mobili che sono installati con Adobe Device Central. Il pannello Dispositivi disponibili pu essere considerato come una raccolta di dispositivi utilizzabili per testare il contenuto. Per impostazione predenita, i dispositivi nel pannello Dispositivi disponibili sono raggruppati per produttore e ordinati per nome.

Per ordinare i dispositivi in un gruppo, fai clic sullintestazione di una colonna. Per esempio, puoi raggruppare per Produttore e per Profondit colore, per ordinare tutti i gruppi Produttore in base alla profondit del colore.

La Scheda Proli dispositivo occupa la maggior parte dellinterfaccia; essa mostra informazioni dettagliate sui dispositivi. Le diverse schermate mostrano informazioni generali e dettagli specici per Flash, bitmap, video e Web. La scheda Proli dispositivo pu mostrare uno o pi dispositivi.
DEI DISPOSITIVI

SELEZIONE

Vediamo in pratica le modalit di impiego del programma per creare un set di dispositivi personalizzato. 1. Fai clic sul segno + a sinistra del nome di un gruppo di dispositivi, per espandere il gruppo e visualizzare il nome dei dispositivi disponibili (vedi gura 17.4).
Figura 17.4
Espansione del gruppo.

2. Fai clic sul nome di un modello e osserva nella scheda Proli dispositivo le informazioni relative (vedi gura 17.5).

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 351

CAPITOLO 17 ADOBE DEVICE CENTRAL

351

Figura 17.5
Selezione del dispositivo. CAPITOLO

17

3. Come puoi notare possibile osservare, oltre limmagine del dispositivo, tutta una serie di informazioni utili per lo sviluppo dei contenuti mobili. possibile visualizzare la versione di Flash Lite, la dimensione del display, i dati che riguardano il sistema operativo, i dati che riguardano gli operatori telefonici, le reti supportate e le lingue dellinterfaccia del telefono.

Per visualizzare le informazioni relativa allintegrazione del player Flash allinterno del dispositivo selezionato, fai clic sul pulsante Flash (vedi gura 17.6).

Figura 17.6
Le informazioni sul player Flash.

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 352

352

Per visualizzare le informazioni relative al supporto della graca bitmap, seleziona il pulsante Bitmap (vedi gura 17.7).

Figura 17.7
Le informazioni sul supporto della graca.

Per visualizzare le informazioni relative al supporto del video, quali codec e caratteristiche geometriche, seleziona il pulsante Video (vedi gura 17.8).

Figura 17.8
Le informazioni relative al video.

Per visualizzare le informazioni relative al supporto del Web, quali browser, formati e posizione della pagina Web, seleziona il pulsante Web (vedi gura 17.9).

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 353

CAPITOLO 17 ADOBE DEVICE CENTRAL

353

Figura 17.9
Le informazioni relative al supporto Web.

CAPITOLO

17

Tieni premuto il tasto Ctrl e fai clic sul nome di altri dispositivi per visualizzare pi terminali contemporaneamente (vedi gura 17.10).

Figura 17.10
Selezione di pi dispositivi.

Questa utile funzione permette di visualizzare in una scheda comparativa le informazioni di ogni dispositivo per confrontare le diverse caratteristiche tra i dispositivi selezionati e controllare le differenze o similarit dei dispositivi per i quali stiamo realizzando i contenuti.

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 354

354

CREAZIONE

DI UN SET PERSONALIZZATO

Se, come abbiamo visto precedentemente, ci serviamo di pi dispositivi per creare e testare il contenuto, pu essere molto comodo creare un set di dispositivi personalizzato, cos da raggruppare tali dispositivi in un set richiamabile ogni volta che necessario. Per creare un set di dispositivi personalizzato, procedi come segue. 1. Fai clic sul segno + presente sul pannello Set dispositivi (vedi gura 17.11).
Figura 17.11
Il pulsante Nuovo set dispositivi.

2. Inserisci nel campo del nuovo set il nome da assegnare al tuo set personalizzato (vedi gura 17.12).
Figura 17.12
Il nuovo set.

3. Seleziona un dispositivo nella lista dei dispositivi disponibili e trascinalo sulla cartella del set appena creato (vedi gura 17.13).
Figura 17.13
Trascinamento di un dispositivo nel nuovo set.

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 355

CAPITOLO 17 ADOBE DEVICE CENTRAL

355

Il dispositivo sar visualizzato nellelenco dei dispositivi del set (vedi gura 17.14).
Figura 17.14
Il dispositivo inserito nel set. CAPITOLO

17

Procedi allo stesso modo per aggiungere ulteriori dispositivi al set personalizzato.

FUNZIONE

DI RICERCA

Nella creazione di un set di dispositivi personalizzato, per cercare i dispositivi da utilizzare, oltre alla modalit manuale che abbiamo appena visto, possibile utilizzare una funzione di ricerca alquanto avanzata. 1. Fai clic sullicona Cerca dispositivi presente nella parte superiore della nestra Dispositivi disponibili (vedi gura 17.15).
Figura 17.15
Licona Cerca dispositivi.

2. Viene visualizzata la nestra di ricerca nella quale inserire i termini da cercare allinterno dei dispositivi (vedi gura 17.16).
Figura 17.16
La nestra di ricerca.

3. Digita per esempio nel campo Cerca la parola Nokia per ridurre la lista dei dispositivi disponibili ai soli terminali della relativa casa produttrice e osserva il risultato nella nestra Dispositivi disponibili (vedi gura 17.17).

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 356

356

Figura 17.17
Una semplice selezione dei dispositivi.

4. Fai clic sul pulsante Aggiungi criteri di ricerca per inserire ulteriori termini da cercare e perfezionare la ricerca (vedi gura 17.18).
Figura 17.18
Il pulsante Aggiungi criteri di ricerca.

5. Seleziona nei campi di ricerca le caratteristiche dei dispositivi da cercare, per esempio tutti i dispositivi con un display superiore ai 170 pixel (vedi gura 17.19).
Figura 17.19
Ulteriori chiavi di ricerca.

Nella nestra Dispositivi disponibili saranno visualizzati i soli terminali corrispondenti alle chiavi di ricerca inserite.

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 357

CAPITOLO 17 ADOBE DEVICE CENTRAL

357

possibile a questo punto trascinare i dispositivi voluti nella cartella del set personalizzato per aggiungerli al gruppo (vedi gura 17.20).
Figura 17.20
Il gruppo del set personalizzato. CAPITOLO

17

ELIMINARE

UN DISPOSITIVO DA UN SET

Per eliminare un dispositivo da un set, procedi come segue. 1. Fai clic con il pulsante destro del mouse sul dispositivo da eliminare. 2. Allapertura del menu contestuale, fai clic sulla voce Elimina (vedi gura 17.21).
Figura 17.21
Il comando Elimina.

AGGIORNAMENTO

DEI DISPOSITIVI

Data la continua produzione di nuovi dispositivi e il costante aggiornamento degli stessi, necessario aggiornare di frequente la lista dei dispositivi disponibili. 1. Seleziona il menu Dispositivi e fai clic sulla voce Ricerca aggiornamenti dispositivi (vedi gura 17.22).

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 358

358

Figura 17.22
Il comando Ricerca aggiornamenti dispositivi.

2. Tramite il collegamento al sito di Adobe sar possibile scaricare le caratteristiche dei nuovi terminali e aggiornare i dispositivi disponibili.

CREARE

UNANTEPRIMA DEI CONTENUTI PER DISPOSITIVI MOBILI

Per creare lanteprima delle pagine realizzate con Dreamweaver CS3 su vari dispositivi portatili, necessario utilizzare Device Central con la funzione integrata Small-Screen Rendering di Opera. Sar possibile in tal modo avere unidea di come verr visualizzato il contenuto delle pagine sul dispositivo selezionato
Lo Small-Screen Rendering di Opera non supporta i frame, i pop-up, la sottolineatura, la barratura, la sopralineatura, lintermittenza e lo scorrimento del testo. Cerca quindi di evitare questi elementi di progettazione.

Vediamo come visualizzare su dispositivo mobile una semplice pagina HTML realizzata con Dreamweaver CS3. 1. Avvia Dreamweaver CS3 e apri, o crea, la pagina da visualizzare in anteprima (vedi gura 17.23).
Figura 17.23
La pagina in Dreamweaver.

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 359

CAPITOLO 17 ADOBE DEVICE CENTRAL

359

Se il documento gi stato creato, possibile aprirlo direttamente in Adobe Central Device selezionando dal menu File la voce Apri (vedi gura 17.24). Figura 17.24
Il comando Apri. CAPITOLO

17

2. Dal menu File seleziona la voce Visualizza anteprima nel browser e fai clic sul comando Device Central (vedi gura 17.25).
Figura 17.25
Il comando Device Central.

Viene visualizzata la scheda Emulatore che ti permette di osservare in anteprima il risultato della visualizzazione sul dispositivo mobile selezionato (vedi gura 17.26). Come puoi notare, la scheda Emulatore studiata per simulare come il contenuto apparir su un dispositivo mobile specico. Puoi emulare solo un dispositivo per volta. Per selezionare un dispositivo diverso, fai doppio clic sul nome di un dispositivo nel pannello Set dispositivi o Dispositivi disponibili (vedi gura 17.27).

21-Cap01 7_DW.qxd

22-10-2007

12:07

Pagina 360

360

Figura 17.26
La scheda Emulatore.

Figura 17.27
Visualizzazione su diverso dispositivo.

Potrebbero piacerti anche