Capitolo 4 La tipografia...125 Portare il testo nel Web... 128 Sostituzione del testo con immagini... 129 Web font con @font-face...



Documenti analoghi
Sommario. Introduzione... xv. Capitolo 1 Gli elementi di base delle pagine web Capitolo 2 I file delle pagine web... 27

KIT RECUPERO IDONEITA' Classi Seconde. Scienze e Tecnologie Applicate

autocad sommario :50 Pagina V Indice Introduzione

SOMMarIO INIZIARE. iii. Adobe dreamweaver CS5 ClASSroom in A book

1 CONOSCERE L INTERFACCIA

Piccola guida a Microsoft Word 2003

Strumento di composizione tipografica EOS Guida rapida

Office 2007 Lezione 07. Gestione delle immagini

Indice generale. Introduzione...xv. Parte I Per iniziare Capitolo 1 Introduzione allo sviluppo ios con tecnologie web...3

Presentation. Scopi del modulo

Indice PARTE PRIMA L INIZIO 1

Identificare le diverse parti di una finestra: barra del titolo, barra dei menu, barra degli strumenti, barra di stato, barra di scorrimento.

Grafica ed interfacce per la comunicazione Scienze della Comunicazione

FUNZIONI DI IMPAGINAZIONE DI WORD

Argomenti Microsoft Word

CORSO DI INFOGRAFICA PROF. MANUELA PISCITELLI A.A.

Indice. Introduzione... XI A chi si rivolge questo libro... XII Struttura del libro... XII

CORSI I principali programmi Adobe Photoshop/InDesign/Illustrator Nozioni di base

Indice generale. Le persone dietro questo libro...xi. Introduzione...xv. Innamorarsi di jquery...1

IN TV: la visibilità dei contenuti determina la loro bontà. IN RETE: la bontà dei contenuti determina la loro visibilità.

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER

[FINANZAECOMUNICAZIONE / VADEMECUM]

STAMPARE FOTO CON LA COOP

Esame di Informatica CHE COS È UN FOGLIO ELETTRONICO CHE COS È UN FOGLIO ELETTRONICO CHE COS È UN FOGLIO ELETTRONICO. Facoltà di Scienze Motorie

FONDAMENTI DI AUTOCAD

Introduzione. Cos'è un programma di grafica vettoriale?

01. Conoscere l area di lavoro

I Quaderni di LAPSUS n 3 e. CmapTools

Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template.

LA STRUTTURA DEL SITO

Editoria Digitale. Schema didattico di riferimento 1

Indice generale. Capitolo 3 Introduzione a PHP...43 Sintassi e istruzioni di base Variabili, operatori e commenti Array...

Espresso Book Machine

Tecniche grafiche per il disegno a mano libera il segno espressivo

KIT RECUPERO IDONEITA' Classi Seconde. Scienze e Tecnologie Applicate

TAVOLA 1 ORGANIZZAZIONE DELLO SPAZIO. Esercizio di divisione dello spazio, costruzioni grafiche elementari, scritturazioni e uso del colore.

EUROPEAN COMPUTER DRIVING LICENCE SYLLABUS VERSIONE 5.0

La grafica con Word. La parte evidenziata è una Riga. La parte evidenziata è una Colonna. La parte evidenziata è una Cella

Sommario Prefazione... xiii Diventa esperto in sicurezza... xiii Capitolo Codici nocivi... 1

Cos è un word processor

IMPOSTAZIONE DELLE TAVOLE GRAFICHE

La Stampa Unione. Individuare la lista indirizzi per la Stampa Unione

FONDAMENTI DI INFORMATICA. 3 Elaborazione testi

Indice. Introduzione PARTE PRIMA PRENDERE CONFIDENZA CON SVG 1

io e il Corriere immagini veloci come il pensiero Mirco Tangherlini

Syllabus LIM - Modulo 1.0 Competenza Strumentale

CMS ERMES INFORMATICA

SISTEMI MULTIAGENTE. Esercizio

Immagini vettoriali Immagini bitmap (o raster) Le immagini vettoriali .cdr.swf .svg .ai.dfx .eps.pdf .psd

Open Office Writer - Elaborazione testi

Indice generale. Introduzione...xiii

FORMATO FILE FORMATO CONSIGLIATO

Presentazione del nuovo portale. la conoscenza certificata

Programma Corso Adobe Photoshop CS5. Cap. 1 L AREA DI LAVORO. Cap. 2 GESTIONE DELL IMMAGINE. Cap. 3 DIMENSIONE E RISOLUZIONE

IL TUO SITO WEB. SkyNotes è l insieme degli strumenti di cui l azienda italiana necessita per essere competitiva nel mondo in costante cambiamento.

LIGHTING NOW! - LISTINO 2015 LISTINO mobile: info@lightingnow.net -

Stile carattere: permette di selezionare il carattere da usare per la riga fra quelli disponibili.

Come creare uno schema per il punto croce con il PAINT

Che cos è BaseKit Site Builder.

Riduzione effetto mosso Filtro Camera Raw Alterazione prospettica Dimensione immagine Mantieni dettagli (ingrandimento)

Start/Tutti i programmi/ Microsoft Office/Word File/Chiudi Pulsante Chiudi File/Nuovo/Documento vuoto Modelli presenti. File/Salva File/Salva con nome

GUIDA ALL USO DELL E-READER SONY PRS-T1...2

Indice Configurazione di PHP Test dell ambiente di sviluppo 28

ISTITUTO DI ISTRUZIONE SUPERIORE STATALE M.K.GANDHI WORD Isabella Dozio 17 febbraio 2012

Artigiani di Podcast. Lezione del 8 febbraio Fabio P. Corti

Microsoft Word. Nozioni di base

GUIDA ALL USO DEL PORTALE

INFORMATICA. Elaborazione delle immagini digitali. Università degli Studi di Foggia Dipartimento di Medicina Clinica e Sperimentale

La tua pubblicità su QualitiAmo

DISPENSA PER MICROSOFT WORD 2010

Guida Introduttiva Picasa 3

Personalizza. Page 1 of 33

Corso di INFORMATICA GRAFICA. Modulo 2 (CAD) Stefano Cinti Luciani. Introduzione a PhotoShop

PROGRAMMA DEL CORSO WEB DESIGN CREATIVO

Microsoft Word -II Lezione

Università di L Aquila Facoltà di Biotecnologie Agro-alimentari

File/Salva con nome/ Casella Tipo file

PHOTOSHOP BREVE TUTORIAL

Marketing Brand Strategies Soluzioni Creative il marketing B2B Soluzioni di Qualità dal yykk WEB, PRINT & ADVERTISING

Gli strumenti per creare un libro, uno striscione, un giornalino, un depliant, un fumetto

Uso dei modelli/template

Piano didattico. Disporre il testo in colonne. Modificare l aspetto di un grafico

Unità di Misura Basso a Sinistra Alto a Destra Lunghezze Angoli Griglia Snap 0, ,21000 Decimali Gradi Decimali

Sistemi Web! per il turismo! - lezione 9 -

Guida rapida all uso di Moodle per gli studenti

Compilatore risorse display grafico LCD serie IEC-line

NVU Manuale d uso. Cimini Simonelli Testa

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto

Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password.

Web Design Avanzato - 36 ore

Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e

Le immagini digitali. Le immagini digitali. Caterina Balletti. Caterina Balletti. Immagini grafiche. Trattamento di immagini digitali.

Fatti trovare... Fatti preferire! Web Site» E-Commerce» Social Media» Web Marketing» Photo» Video» Graphic design

lo PERSONALIZZARE LA FINESTRA DI WORD 2000

All interno dei colori primari e secondari, abbiamo tre coppie di colori detti COMPLEMENTARI.

SITO DI ZONA

ALLEGATO II Dispositivi di attacco

File/Salva File/Salva con nome. Strumenti/Opzioni/Dati utente Strumenti/Opzioni/Percorsi. ?/Guida di OpenOffice.org, F1, Maius+F1.

Al giorno d oggi, i sistemi per la gestione di database

Transcript:

Indice Prefazione... XI A chi si rivolge questo libro... XIII Contenuti del libro... XIII Per saperne di più... XIV I forum di SitePoint... XIV Il sito web del libro... XV Aggiornamenti ed errata corrige... XV Le newsletter di SitePoint... XV I podcast SitePoint... XV Feedback dai lettori... XV Ringraziamenti... XVI Convenzioni adottate nel libro... XVI Esempi di codice... XVI L autore...xvii Il consulente tecnico...xvii Il revisore tecnico...xvii Il responsabile dello sviluppo...xvii Il sito SitePoint...XVIII Capitolo 1 Layout e composizione...1 La progettazione...2 Osservazione...3 Analisi...5 Implementazione...6 Definizione di un buon design...7 Anatomia di una pagina web...9 La teoria della griglia... 12 La regola dei terzi... 14 Il 960 Grid System... 15

VI Indice Equilibrio... 16 Equilibrio simmetrico... 17 Equilibrio asimmetrico... 19 Unità del layout... 22 Prossimità... 22 Ripetizione... 23 Enfasi... 24 Posizionamento... 25 Continuità... 26 Isolamento... 26 Contrasto... 27 Proporzione... 27 Layout fondamentali... 29 Navigazione a colonna sinistra... 30 Navigazione a colonna destra... 31 Navigazione a tre colonne... 32 Trovare l ispirazione... 32 Utilizzare un file morgue... 33 Le tendenze più recenti... 34 Lo stile rivista, privo di navigazione... 34 Minimalismo nudo e crudo... 36 Ridimensionamento: layout fisso, fluido o dinamico... 37 Larghezza fissa... 37 Larghezza variabile... 38 Una soluzione alternativa: i layout dinamici... 39 La risoluzione dello schermo... 40 Un applicazione concreta: Southern Savers... 42 Per iniziare... 44 Capitolo 2 Il colore...49 La psicologia dei colori... 50 Associazione di colori... 50 La temperatura dei colori... 57 I valori cromatici... 58 Saturazione... 59 Teoria di base dei colori... 59 Rosso, giallo, blu o CMYK... 61 Gli schemi colore... 64 Schema di colori monocromatico... 64 Schema di colori analoghi... 68

Indice VII Schema di colori complementari... 70 Colori split complementari, triadici e a rettangolo... 75 Altre combinazioni di colori... 77 Creare una tavolozza di colori... 78 La notazione esadecimale... 78 Strumenti e risorse per l uso dei colori... 80 Color Scheme Designer 3... 80 Adobe Kuler... 81 COLOURlovers... 82 Color Stream, app per iphone... 83 Pictaculous... 83 Colour Contrast Check... 84 Applicazione dei colori: i coupon Southern Savers... 85 Capitolo 3 La texture...89 I punti... 90 Le linee... 91 Le forme... 93 Angoli arrotondati... 96 Rotazione delle forme... 97 Forme e layout... 99 Volume e profondità... 100 Prospettiva... 101 Proporzioni... 101 Luci e ombre... 103 Pattern... 106 Realizzare una texture... 111 Stile invecchiato, segnato dal tempo, logoro e nostalgico... 111 Pulita e granulare... 114 Lo stile album artigianale... 116 Lo stile estroso a cartoni animati... 117 Texture minimaliste... 120 Iniziate a sviluppare un vostro stile personale... 121 Un applicazione concreta: ritagliare e risparmiare... 122 Capitolo 4 La tipografia...125 Portare il testo nel Web... 128 Sostituzione del testo con immagini... 129 Web font con @font-face... 132

VIII Indice Auto-hosting dei web font... 133 Servizi di font web... 134 sifr e Cufón... 135 Anatomia della forma di una lettera... 135 Spaziatura del testo... 138 Spaziatura orizzontale... 139 Spaziatura verticale... 140 Allineamento del testo... 141 Differenze tra i caratteri tipografici... 143 Font serif... 144 Font sans serif... 146 Font di scrittura a mano... 148 Font a larghezza fissa... 149 Font novelty... 152 Font dingbat... 154 Trovare i font... 156 Gallerie di font gratuiti... 156 Gallerie di font commerciali... 156 Artisti singoli e foundry... 157 Scegliere correttamente i font... 157 Impostare dimensione del font e altezza della riga... 159 Punteggiatura e caratteri speciali... 160 Un applicazione concreta: la stampa del testo... 162 Capitolo 5 Le immagini...165 Cosa cercare... 166 Le fonti delle immagini... 169 Fotografare per conto proprio... 170 Gli archivi fotografici... 171 Immagini gratuite... 173 Immagini senza diritti d autore... 175 Immagini regolate da contratto... 176 Affidarsi a professionisti... 178 Come non cercare le immagini... 179 Google ganking... 180 Hotlinking... 181 Clipart... 182 Ritaglio creativo... 183 Fotoritocco con Photoshop... 187

Indice IX Formati e risoluzione dei file... 193 Interventi creativi sulle immagini... 195 Utilizzo di immagini per migliorare le immagini... 196 Utilizzo di CSS per migliorare le immagini... 198 Un applicazione concreta: i piccoli dettagli... 202 Sempre più avanti... 205 Appendice A Appunti sul design per dispositivi mobile...207 Come evitare le abitudini web nelle applicazioni per iphone... 208 Ideare un applicazione per iphone: da dove iniziare... 210 Le domande da farsi... 210 Dove trovare ispirazione... 211 Prima una serie di schizzi... 212 Quattro modi per migliorare la natura metaforica del dispositivo mobile... 213 L applicazione ical non permette di voltare pagina con uno swipe... 214 Siti mobili e media query... 215 Come fanno gli utenti mobili a navigare nel Web?... 216 Come fanno gli utenti mobili a navigare sul vostro sito?... 218 Le media query possono risolvere la situazione?... 218 Indice analitico...219