Expression Web per la graficaCarmine Alfano | Graphic & Webdesigner

CHI SONO

Laureato in scenografia, sono attualmente iscritto al biennio specialistico di grafica progettuale, presso l’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 Napolie offro collaborazione come freelance per agenzie di comunicazione - studi grafici Italia.

Mi occupo della sezione grafica di DotNetCampania.orgper info e domande potete rivolgervi agli indirizzi qui indicati:

| carmine.alfano@dotnetcampania.org | info@carminealfano.it| dotnetcampania.org/blogs/mydesign

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.

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 l’impaginazione. Può essere anche usato per preparare la Masterpage da passare ai Programmatori

Sia Design che Web fanno parte del pacchetto Microsoft Expression Studiodedicato al mondo della grafica per ulteriori informazioni consultare il

sito: www.microsoft.com/expression

Differenze tra Immagine Vettoriale e Raster (o bitmap)

Grafica VettorialeInsieme di primitive geometriche

che descrivono punti, linee, curve e poligoni ai quali

possono essere attribuiti colori e sfumature

Grafica BitmapLe immagini vengono descritte

come in una griglia di pixel opportunamente colorati

(bitmap=mappa di bit).

Le curve di bézier

Le Curve di bézierLe curve furono realizzate nel 1959 da Paul de

Casteljau usando 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.

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

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

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.

Realizzare un layout – parametri fondamentali

72dpi

1024x768

RGB

Densità di pixel consigliata(si potrebbe anche esportare a 96dpima il peso delle immagini sarebbe superiore)

Ottimizzazione Dimensioni Layout consigliata

Modalità Colore da usare

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 maggioreed una migliore resa sulle linee inclinate.

dpi = dot per inch

Scegliere la risoluzione

640x480

800x600

1024x768

MONITOR DA 14 POLLICI

MONITOR DA 15 POLLICI

MONITOR DA 15 A 17 POLLICI

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

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.

La modalità di colore RGB

RGBModalità Colore Adatta al Video

Modalità Colore Adatta alla StampaCMYK

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

Formati di compressione bitmap

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:

.gif .png .jpg

Formati di compressione bitmap

.gif .png

.jpg

Struttura Layout: Header, Background, Menù, ecc…

Contenuti:Gallery, Fotografie, ecc…

Sempre a 72dpi

Struttura del layout – Macro aree

HEADER

CONTENT

FOOTER

Struttura del layout – Micro aree

HEADER

FOOTER

LOGO

COLONNASX

COLONNACENTRALE

COLONNADX

MENU

DEMORealizzare il layout di un’applicazione web

Un grazie di cuore a tutti gli sponsor

Senza di loro oggi non saremmo qui!

Compilate il modulo di feedback!

La vostra opinione per noi è fondamentale! Grazie!