Introduzione al web authoring. Realizzazione di un prototipo con Fireworks CS6

IED Roma
Master Web Design 2013
Maggio 2013

Transcript

1. Introduzione al web authoring Realizzazione del prototipo con Fireworks CS6 Docente: Massimo Cassandro / maggio 2013 Master Web Design 2013
2. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Metodologia di lavoro 2 ‣ Creazione del wireframe (utilizzando Fireworks o altri programmi) ‣ NB: In questa esercitazione il wireframe è già stato elaborato ‣ Creazione del prototipo (con Fireworks) ‣ Elaborazione delle specifiche (dimensioni delle immagini, colori, ecc.) ‣ Creazione della pagina HTML (con Dreamweaver) ‣ Esportazioni di immagini e frammenti CSS da Fireworks a Dreamweaver
3. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 L’ambiente di lavoro di Fireworks 3 Strumenti Proprietà Pannelli
4. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Creazione del wireframe e del prototipo 4
5. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Creazione della griglia: metodo 1 5 Estensione Grids (http://johndunning.com/fireworks/about/Grids)
6. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Il documento ottenuto 6 NB: manca dei bordi laterali che vanno aggiunti manualmente (10 px per lato)
7. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Altri metodi 7 Estensione 960.gs (http://960.gs/) Modelli predefiniti di Fireworks
8. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Wireframe 8 Creare i segnaposti degli oggetti da inserire nella pagina con lo strumento Placeholder (http://johndunning.com/fireworks/about/Placeholder) Cliccando sul centro del segnaposto è possibile impostare diverse opzioni
9. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Wireframe 9 Per i segnaposti dei testi è possibile utilizzare le estensioni Greeked text (che inserisce solo l’ingombro del testo, senza dover specificare il font) o Lorem Ipsum (che inserisce un testo simulato). Anche in questo caso facendo clic al centro dell’oggetto è possibile impostare diverse opzioni. http://johndunning.com/fireworks/about/GreekedText http://johndunning.com/fireworks/about/LoremIpsum
10. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Il wireframe completato 10 /RJR WDJOLQH WHVWDWDVOLGHVKRZ
11. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Creazione del prototipo 11 Terminato il wireframe si passa alla realizzazione del prototipo. Il modo più semplice è duplicare la pagina appena creata (il wireframe) creandone una nuova (il prototipo). Se necessario, cancellare da quest’ultima tutti gli elementi non necessari.
12. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Il prototipo 12 Inserire tutti gli elementi della pagina, facendo attenzione a rispettare la griglia e le dimensioni impostate. Per il testo, porre particolare attenzione al rispetto dell’interlinea decisa per la griglia Utilizzare solo font standard o webfonts disponibili online (ad esempio su Google Fonts)
13. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Inserimento delle immagini: metodo 1 13 ‣ Metodo 1: aprire le immagini in un’altra finestra di Fireworks, o in un altro programma di editing ‣ Adattarle alle misure desiderate ‣ Inserirle nel layout utilizzando il comando Importa...
14. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Inserimento delle immagini: metodo 2 ‣ Da utilizzare per immagini che non necessitino di particolari elaborazioni ‣ Importare l’immagine nel layout, lasciando il segnaposto precedentemente inserito ‣ Portare l’immagine approssimativamente in “posizione” (1) ‣ Tagliare l’immagine ‣ Selezionare il segnaposto e scegliere il comando “Incolla dentro” ‣ Il segnaposto verrà utilizzato come “maschera” dell’immagine (2) 14
15. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Mascheratura delle immagini 15 (1) (2)
16. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Mascheratura delle immagini 16 Per eliminare i bordi del segnaposto (se la maschera è un oggetto prodotto con Placeholder), selezionare la maschera nella palette dei livelli... ... e disattivare l’opzione “Mostra riempimento e tratto” nel pannello Proprietà Disattivando il collegamento tra immagine e maschera (l’icona tra le due miniature) è possibile spostare l’immagine all’interno della maschera
17. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Il prototipo terminato 17 —‹•—Ž–”‹…‡•‘ŽŽ‹•‡–—•Ǥ—ŽŽƒ ‡—ƒ–‡Ǥ‡†‹•‹‡”‘•ǡ˜‘Ž—–’ƒ–‘ǡ ˆ‡”‡–—ƒ…ǡ…‘‰—‡—–ǡŽ‹„‡”‘Ǥ ‘‡…ƒŽ‡•—ƒ†ƒǤ—‹•“—‡˜‡Ž‹– •ƒ’‹‡ǡ‰”ƒ˜‹†ƒ“—‹•ǡ†‹…–—‹†ǡ ˜—Ž’—–ƒ–‡“—‹•ǡ–‘”–‘”ǤŠƒ•‡ŽŽ—• ’‡ŽŽ‡–‡•“—‡ǡ‡Ž‹–˜‡Ž—Ž–”‹…‹‡• ‡†‡–—•ƒ—‰—‡ǡ–‡’—•˜‹–ƒ‡ǡ ˜‡Š‹…—Žƒ‡‰‡–ǡ‘—›—–ǡŽ‡‘Ǥ —•…‡ˆƒ…‹Ž‹•‹•Ž‡…–—•ƒŽ‡…–—•Ǥ ‡ŽŽ‡–‡•“—‡‹•‹Ǥ ’”‡–‹— ƒ‰ƒ’‘•—‡”‡‡Ž‹–Ǥ—ŽŽƒƒ—…Ǥ ‘”„‹–‹…‹†—–‹’‡”†‹‡–—…Ǥ Šƒ•‡ŽŽ—•…‘•‡…–‡–—‡”—ŽŽƒ ƒ—…Ǥ –‡‰‡”•…‡Ž‡”‹•“—‡ —”ƒ‹•ƒ’‹‡Ǥ—”ƒ„‹–—”—Ž–”‹…‡•ǡ †‹ƒ—–ƒ†‹’‹•…‹‰’‘•—‡”‡ǡ‘”…‹†—‹ ‘”ƒ”‡—ŽŽƒǡƒ–•ƒ‰‹––‹•Ž‹„‡”‘ ƒ—”‹•—–”‹•—•Ǥ —•…‡ˆƒ…‹Ž‹•‹• Ž‡…–—•ƒŽ‡…–—•Ǥ‡ŽŽ‡–‡•“—‡‹•‹Ǥ ‡†‡…•ƒ’‹‡Ǥ–‹ƒ…‘˜ƒŽŽ‹•Ǥ ”ƒ•’—Ž˜‹ƒ”Ǥ Šƒ…Šƒ„‹–ƒ••‡ ’Žƒ–‡ƒ†‹…–—•–Ǥ —•…‡’‘”–ƒǤ‡† ‡—–—”’‹••‡†‹•Ž”—–”—‘”ƒ”‡Ǥ —‹•ƒ…ˆ‡Ž‹•Ǥ—‹•˜‡Ž‹–‡‹ǡ –”‹•–‹“—‡•‡†ǡ‡Ž‡‡–—˜‡Žǡ ˜‡Š‹…—Žƒ…‘†‹‡–—ǡˆ‡Ž‹•Ǥ ‡•–‹„—Ž—‹’‡”†‹‡–†‹ƒ ƒ‡…‡ƒ•ƒ••ƒ‡”ƒ–ǡ•…‡Ž‡”‹•“—‡ ƒ–ǡ’”‡–‹—•‡†ǡ˜—Ž’—–ƒ–‡—–ǡ Ž‘”‡Ǥ—…ƒ–‡‹„Šǡ’‘”––‹–‘” “—‹•ǡ‡‰‡•–ƒ•—–ǡƒŽ‡•—ƒ†ƒƒ—…–‘”ǡ –‡ŽŽ—•Ǥ—•’‡†‹••‡‹†‡–—•Ǥ ”ƒ‡•‡–ƒ—”‹•ƒ••ƒǡ‹’‡”†‹‡– ‘”ƒ”‡ǡ˜‡‡ƒ–‹•‡‰‡–ǡˆ”‹‰‹ŽŽƒ –ƒ–Ž‘”‡ƒ–’—”—•–”‹•–‹“—‡ •…‡Ž‡”‹•“—‡Ǥ‡†‡•–’‡†‡ǡ—Ž–”‹…‡• ‹†ǡ–‡’‘”•—•…‹’‹–ǡ‘”ƒ”‡‡–ǡ‹•ŽǤ —ŽŽƒ–‹…‹†—–’”‡–‹—ƒ••ƒǤ ‘”„‹’—Ž˜‹ƒ”†ƒ’‹„—•–‡ŽŽ—•Ǥ ‡ŽŽ‡–‡•“—‡Šƒ„‹–ƒ–‘”„‹ –”‹•–‹“—‡•‡‡…–—•‡–    Ǥǡ  ǡ  ǡǡ Ǥ   Ǥ    Ǥ        Ǥ —•‘…‹‹•ƒ–‘“—‡’‡ƒ–‹„—•‡– ƒ‰‹•†‹•’ƒ”–—”‹‡–‘–‡•ǡ ƒ•…‡–—””‹†‹…—Ž—•—•Ǥ—‹•“—‡ ‹•Ž†‹ƒǡ‘—›‡—ǡŽ‘„‘”–‹• …‘•‡“—ƒ–ǡ‘ŽŽ‹•—–ǡ–‡ŽŽ—•Ǥ ‡•–Ǥ ‡‡ƒƒ–ƒ”…—Ǥƒ‘Ž‡…–—•Ǥ ‹˜ƒ—•–‹…‹†—–„‹„‡†— ‡•–‹„—Ž—ƒ–‡‹’•—’”‹‹•‹ ˆƒ—…‹„—•‘”…‹Ž—…–—•‡–—Ž–”‹…‡• ’‘•—‡”‡…—„‹Ž‹ƒ…—”ƒ‡Ǥ—ŽŽƒ ‡—‹•‘†ǡ†‹ƒ—–—Ž–”‹…‹‡• —ŽŽƒ…‘”’‡”ǡƒ”…—ƒ••ƒ ‡Ž‡‡–—‘†‹‘ǡ—–ˆ‡—‰‹ƒ–‹„Š —…‡–‡”ƒ–Ǥ 1DPHXPDVVD 1XOODPHXLVPRGGLDP 4XLVTXHXWVDSLHQQHF 'RQHFWULVWLTXHWRUWRU 6HGDWDUFXDFDUFX ,QHWULVXV1XQF 1XOODPWXUSLVHUDW $HQHDQPDOHVXDGD WHVWDWDVOLGHVKRZ
18. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Compilazione delle specifiche 18 Come prima cosa, duplichiamo la pagina prototipo e creiamo quella delle specifiche Utilizzando il plug-in Specctr espandiamo l’area di lavoro per poter inserire le specifiche. NB: nella versione lite di Specctr alcune funzioni sono disabilitate (http://www.specctr.com/)
19. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Compilazione delle specifiche 19 Per ricavare le dimensioni degli oggetti mascherati, è necessario selezionare la maschera nella palette livelli Oltre a Specctr, è possibile usare lo strumento misurazione per tracciare distanze tra oggetti
20. Master Web Design / Introduzione al web authoring / Realizzazione del prototipo con Fireworks CS6 Il layout con le specifiche completato 20 WHVWDWDVOLGHVKRZ