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

Presentazione sul tema: "Expression Web per la grafica Carmine Alfano | Graphic & Webdesigner."— Transcript della presentazione:

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

2 CHI SONO Laureato in scenografia, sono attualmente iscritto al biennio specialistico di grafica progettuale, presso lAA.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 Impostazione della griglia, 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 impaginazione nei browser più utilizzati.

4 Expression Studio Expression Design software di grafica vettoriale che useremo per realizzare il layout del sito Expression Web è invece un editor html che useremo per scrivere il codice, sviluppare limpaginazione. Può essere anche usato per preparare la Masterpage da 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 Differenze tra Immagine Vettoriale 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 Casteljau usando un algoritmo da lui inventato. Nel 1962 furono largamente pubblicizzate dallingegnere 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 Blend possiamo salvare sul web in vettoriale puro che il browser interpreterà grazie al plug-in silverlight

8 Cosa sono i pixel pixel=picture elements In computer grafica col termine pixel si indica ciascuno degli elementi puntiformi che compongono la 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 limmagine. Un esempio possibile sono le varie risoluzioni dei monitor come 1024 x 768 ecc. Quantità di pixel delle immagini: la quantità effettiva di pixel che compongono limmagine. 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. 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 1024x768 RGB Densità di pixel consigliata (si potrebbe anche esportare a 96dpi ma il peso delle immagini sarebbe superiore) Ottimizzazione Dimensioni Layout consigliata Modalità Colore da usare

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. 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. dpi = dot per inch

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

13 800x600 o 1024x768? 800x600 1024x768 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. MINIMO COMUNE DENOMINATORE RISOLUZIONE CONSIGLIATA

14 800x600 o 1024x768? 1024x768 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. 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.

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

16 Formati di compressione bitmap Immagine bitmap.gif.png.jpg Formati di compressione:. 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

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

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

19 Struttura del layout – Macro aree HEADER CONTENT FOOTER

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

21 DEMO Realizzare il layout di unapplicazione web

22 Un grazie di cuore a tutti gli sponsor Senza di loro oggi non saremmo qui!

23 Compilate il modulo di feedback! La vostra opinione per noi è fondamentale! Grazie!