Expression Web per la grafica

1. Expression Web per la grafica Carmine Alfano | Graphic & Webdesigner

2. CHI SONO Laureatoin scenografia, sonoattualmenteiscritto al bienniospecialisticodigraficaprogettuale, pressol’AA.BB. di Napoli. Lavoro da 8 anni in uno studio grafico, per progetti di marchi, immagine coordinata, brochure, depliant, manifesti. Attualmente collaboro con un’ agenzia di webdesign di Napoli e offro collaborazione come freelance per agenzie di comunicazione - studi grafici Italia. Mi occupo della sezione grafica di DotNetCampania.org per info e domande potete rivolgervi agli indirizzi qui indicati: |carmine.alfano@dotnetcampania.org | info@carminealfano.it | dotnetcampania.org/blogs/mydesign

3. AGENDA Argomenti____________________________ • Impariamo a realizzare un Layout con Design • Impostazionedellagriglia, Design, Esportazione • Usiamo Expression Web per sviluppare le pagine in html • Per trasformare la nostra idea grafica in html/css • Utilizzare Super Preview • Per la verifica della corretta impaginazionenei browser più utilizzati.

4. Expression Studio Expression Designsoftware di grafica vettoriale che useremo per realizzare il layout del sito Expression Webè invece un editor html che useremo per scrivere il codice, sviluppare l’impaginazione. Può essere anche usato per preparare la Masterpageda passare ai Programmatori Sia Design che Web fanno parte del pacchetto Microsoft Expression Studio dedicato al mondo della grafica per ulteriori informazioni consultare il sito: www.microsoft.com/expression

5. DifferenzetraImmagineVettoriale e Raster (o bitmap) Grafica Vettoriale Insieme di primitive geometriche che descrivono punti, linee, curve e poligoni ai quali possono essere attribuiti colori e sfumature Grafica Bitmap Le immagini vengono descritte come in una griglia di pixel opportunamente colorati (bitmap=mappa di bit).

6. Le curve di bézier Le Curve di bézier Le curve furono realizzate nel 1959 da Paul de Casteljauusando un algoritmo da lui inventato. Nel 1962 furono largamente pubblicizzate dall’ingegnere della Renault Pierre Bézier che stabilì un modo di realizzare le curve che partiva da due punti e una linea vettoriale appunto, un sistema innovativo che permette ancora oggi agli operatori grafici di realizzare disegni curvilinei bellissimi e precisi. Le curve di Bézier possono essere realizzate da molti programmi di grafica vettoriale come Expression Design, Corel Draw, Adobe Illustrator, Inkscape o Freehand.

7. I programmi di grafica vettoriale Expression Design È un programma di grafica vettoriale, che ci dà la possibilità di realizzare delle immagini tramite curve di bézier o primitive geometriche. In fase di esportazione per il web dobbiamo comunque salvare il nostro elaborato vettoriale in un formato di compressione bitmap. Solo nel caso in cui stiamo utilizzando programmi come Blendpossiamo salvare sul web in “vettoriale puro” che il browser interpreterà grazie al plug-in silverlight

8. Cosa sono i pixel pixel=pictureelements In computer grafica col termine pixel si indica ciascuno degli elementi puntiformi che compongonola rappresentazione di una immagine raster. Solitamente i punti sono così piccoli e numerosi da non essere distinguibili ad occhio nudo, apparendo fusi in un'unica immagine quando vengono stampati su carta o visualizzati su un monitor

9. I due aspetti della risoluzione LA RISOLUZIONE Comprende questi due aspetti Quantità di pixel delle immagini: la quantità effettiva di pixel che compongono l’immagine. Un esempio possibile sono le varie risoluzioni dei monitor come 1024 x 768 ecc. Densità dei pixel: è la distribuzione dei pixel per un area specifica (misurata in inch, pollici) con la formula DPI (dots per inch). Esempi di possibili risoluzioni fra le più comuni sono 72 dpi, 300 dpi ecc.

10. Realizzare un layout – parametri fondamentali 72dpi Ottimizzazione Dimensioni Layout consigliata 1024x768 RGB Modalità Colore da usare Densità di pixel consigliata (si potrebbe anche esportare a 96dpi ma il peso delle immagini sarebbe superiore)

11. Ottimizzare la densità dei pixel 72 dpi Densità di pixel, tutte le immagini per il web vanno esportate a tale risoluzione per ridurre i tempi di caricamento. dpi = dot per inch Con il DPI si esprime la quantità di punti stampati o visualizzati su una linea lunga un pollice (circa 2,54 cm). Generalmente ad un valore più elevato corrisponde una risoluzione maggiore ed una migliore resa sulle linee inclinate.

12. Scegliere la risoluzione 640x480 MONITOR DA 14 POLLICI 800x600 MONITOR DA 15 POLLICI 1024x768 MONITOR DA 15 A 17 POLLICI

13. 800x600 o 1024x768? 800x600 MINIMO COMUNE DENOMINATORE 1024x768 RISOLUZIONE CONSIGLIATA Alcuni sostengono che si dovrebbero sviluppare le pagine basandosi sul minimo comune denominatore. Si capisce però che utilizzando questa risoluzione per progettare le pagine web, si ha a disposizione meno spazio per gestire i contenuti di una pagina. Se il nostro target di riferimento è particolarmente evoluto, di conseguenza sappiamo che la maggior parte delle persone che visualizzeranno le pagine da noi create avranno, nella maggior parte, una risoluzione uguale o superiore a 1024x768, possiamo permetterci di realizzare un layout che si riferisca a questa risoluzione.

14. 800x600 o 1024x768? 1024x768 NON E’ UNA RISOLUZIONE LIMITE css dedicato PER DISPOSITIVI MOBILI È consigliabile, inoltre, realizzare un foglio di stile css dedicato esclusivamente ai dispositivi mobili, anche perché sarebbe impossibile trovare un minimo comune denominatore che vada bene sia per i palmari che per i pc. Fino a pochi anni fa andava in voga un tipo di progettazione che prevedeva la colonna centrale di colore diverso rispetto allo sfondo, a volte, con effetti ombra si staccava del tutto da esso, oggi bisogna considerare anche gli utenti che hanno monitor da 19 e 20 pollici, è quindi consigliabile, strutturare il layout a “fasce” orizzontali, o addirittura a fondo unico.

15. La modalità di colore RGB • RGB • CMYK Modalità Colore Adatta alla Stampa Modalità Colore Adatta al Video

16. Formati di compressione bitmap Formati di compressione:. .gif .png .jpg Questi formati comprimono le dimensioni dei file delle immagini per ridurre i tempi di caricamento. È importante sapere quale formato utilizzare per ogni diverso tipo di immagine Immagine bitmap

17. Formati di compressione bitmap .gif .png .jpg Sebbene sia anche’esso generato da un software di grafica vettoriale, quando lavoriamo per il web dobbiamo sempre esportare il nostro layout in formati bitmap compressi come:

18. Formati di compressione bitmap .gif .png .jpg Contenuti: Gallery, Fotografie, ecc… Sempre a 72dpi Struttura Layout: Header, Background, Menù, ecc…

19. Struttura del layout – Macro aree HEADER CONTENT FOOTER

20. Struttura del layout – Micro aree HEADER LOGO MENU COLONNA SX COLONNA CENTRALE COLONNA DX FOOTER

21. DEMO Realizzareil layout diun’applicazione web

22. Un grazie di cuore a tuttigli sponsor Senza di lorooggi non saremmo qui!

23. Compilateil modulo di feedback! La vostraopinione per noi è fondamentale! Grazie!