Professional Documents
Culture Documents
qxd
22-10-2007
12:07
Pagina 347
CAPITOLO
17
21-Cap01 7_DW.qxd
22-10-2007
12:07
Pagina 348
348
INTRODUZIONE
AD
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
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
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
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
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
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
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
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.