![TEORIA DEL FUNZIONALE DELLA DENSITA Appunti del corso · DELLA DENSITA Appunti del corso Bartolomeo Civalleri [appunti aggiornati al September 16, 2014] 1. Premessa ... 3 Matrici](https://static.fdocuments.net/doc/165x107/5c664b1409d3f2d0218c12dc/teoria-del-funzionale-della-densita-appunti-del-della-densita-appunti-del-corso.jpg)
Corso web design appunti
25
06 giugno 2011 SITO: • STATICO: sito vetrina, per piccole aziende: non dialoga con un database, la sua funzione è quella di far vedere delle cose, non fornisce risposte! per gli aggiornamenti è sufficiente sovrascrivere le informazioni. • DINAMICO: dialoga con un database, le informazioni e i dati sono immagazzinate esternamente al sito, che fornisce delle risposte (es.: blog, social network, motori di ricerca..) • ANIMATO: solitamente realizzato con FlashPlayer HTML: linguaggio di formattazione per ipertesti: definisce come deve apparire un elemento; gestisce contenuti, cioè testi, immagini, etc. Hyper Text Markup Language CSS: fogli di stile a cascata: include tutte le regole con cui viene gestita ogni pagina del sito. Prima dell’avvento di CSS tutto il codice era in linea, presente su ogni foglio HTML. Cascading Style Sheet collegamenti tra HTML e CSS 1 .html .html .css .html
-
Upload
emanuele-maria-barboni -
Category
Design
-
view
95 -
download
4
Transcript of Corso web design appunti
06 giugno 2011
SITO: • STATICO: sito vetrina, per piccole aziende: non dialoga con un database, la sua
funzione è quella di far vedere delle cose, non fornisce risposte! per gli aggiornamenti è sufficiente sovrascrivere le informazioni.
• DINAMICO: dialoga con un database, le informazioni e i dati sono immagazzinate esternamente al sito, che fornisce delle risposte (es.: blog, social network, motori di ricerca..)
• ANIMATO: solitamente realizzato con FlashPlayer
HTML: linguaggio di formattazione per ipertesti: definisce come deve apparire un elemento; gestisce contenuti, cioè testi, immagini, etc.HyperTextMarkupLanguage
CSS: fogli di stile a cascata: include tutte le regole con cui viene gestita ogni pagina del sito. Prima dell’avvento di CSS tutto il codice era in linea, presente su ogni foglio HTML.CascadingStyleSheet
collegamenti tra HTML e CSS
1
.html
.html .css
.html
Computer Server (potenti hard disks sempre connessi)
HOSTING PROVIDER: spazio che contiene i file del sito sul server (es.: www.altervista.org)
FTP CLIENT: File, Transfert, Protocol: protocollo di trasferimento dei files; software che mette in comunicazione il mio computer con i server(es.: filezilla)
NOME DOMINIO: indirizzo che punta allo spazio sul server
2
COSTRUZIONE DI UN SITO
1. PROGETTAZIONE a. SU CARTA!
- ricerca iconografica- ricerca contenuti- divisione categorie- competitor- colori aziendali
2. REALIZZAZIONE
3. MESSA ON LINE
4. TESTING
5. AGGIORNAMENTI
I siti web sono composti da pagine web .html o .htm; ogni pagina è costituita da quattro elementi, che costituiscono il FRAMEWORK, cioè la struttura della pagina:
1. HEADER o testata; può contenere il LOGO e una TAGLINE (slogan)
2. BARRA DI NAVIGAZIONE o barra menu: a sinistra nel 76% dei casi
3. FOOTER o piè di pagina: informazioni dell’azienda ripetute su ogni pagina (di solito il footer ha una maggiore spaziatura tra le lettere per una migliore leggibilità)
4. CONTENTS
3
3
2
4
1
3
24
1
3
4
1
2
LOGO TAGLINE
HOMEPAGE: pagina iniziale
HTTP: protocollo di trasferimento ipertestualeHyperTextTransferProtocol
WWW: rete grande come il mondoWorldWideWeb
.estensione, che può essere geografica (es.: .it, .eu) o commerciale (.com)
Per convenzione, la homepage è chiamata INDEX (index.html)
N.B.: la SINTASSI dei nomi dei files:- NO MAIUSCOLE- NO SPAZI [- o _] [hyphen o underscore]- NO SIMBOLI O ACCENTI
La pagina index non deve stare in nessuna sottocartella, ma nella cartella ROOTE, cioè la cartella principale.
N.B.: ORDINE!Ad esempio, all’interno della cartella immagini è utile nominare i files non con il nome del contenuto ma con un nome univoco e un numero sequenziale:
- prodotti_oo1.jpg- prodotti_oo2.jpg- prodotti_oo3.jpg
N.B.: NON SPOSTARE I FILES DOPO AVER CREATO DEI COLLEGAMENTI!
4
index.htmlprodotti.htmlcontatti.html
immagini
scripts
IPERTESTUALITA’: alla base del web; insieme di testi che permettono all’utente l’approfondimento in vari livelli.
Wikipedia: esempio di sito con la massima fruibilità: ha cercato di mantenere un aspetto il più possibile ipertestuale.
Convenzioni: il web nasce con testo nero su fondo bianco, i collegamenti sono in blu, se già visitati in viola.
web 1.0 (web di sperimentazione, primi anni ’90): es.: sito costruito con Flaweb 2.0: web semantico: si concentra sulle parole, sulle informazioni, con la grafica ridotta al minimo!
5
DREAMWEAVER
Tre modi diversi di vedere una stessa pagina:
codice HTML WYSIWYGwhat you see is what you get
permette di vedere contemporaneamente code + design:è utile lavorare in questa modalità perché si può vedere come cambiano le cose nel codice mentre si lavora sulla progettazione
La pagina viene interpretata da un BROWSER, che traduce il codice HTML in un qualcosa di visivo.
HEAD: fornisce informazioni che non sono visibili sulla pagina web: metainformazioni (= descrizioni, parole chiave..), ma che vengono utilizzate dai motori di ricerca.
<head> tag </head>
Tra <head> e </head>, che indicano l’inizio e la fine degli elementi contenuti nell’head, sono contenute le meta-informazioni: descrizione, parole chiave..
BODY: contenuto che si visualizza nella pagina on line
FASE DI PREPARAZIONE DI UNA PAGINA WEB• TITOLO PAGINA• PAROLE CHIAVE• DESCRIZIONE
1. TITOLO DI PAGINA
<title> titolo </title>
2. DESCRIZIONE
Menu -> insert -> HTML -> head tags -> description: testo che nel motore di ricerca compare sotto il titolo di pagina
3. PAROLE CHIAVE (rating: i motori di ricerca filtrano i siti più attendibili)
6
code/codice split/dividi progettazione/design
head body
HTML
Menu -> insert -> HTML -> head tags -> keywords (divise tra loro da , e spazio): devono essere il più specifiche possibileSINTASSI DEI COMMENTI
<!--commento--> commenti che nel codice HTML compaiono in grigio e che non saranno visibili nella pagina del sito.
COLLEGARE TRA LORO DUE O PIU’ PAGINE
Barra inferiore -> proprietà -> [icona elenco puntato]
Es.: 3 pagineOgni pagina deve essere collegata a tutte le altre tranne che a se stessa!
1. index
2. index2
3. index3
CREARE LINK SU TESTO
Nella parte inferiore della visualizzazione split, seleziono il file che devo linkare alla pagina su cui mi trovo -> Link -> proprietà -> apri cartella -> seleziono il file
ESERCIZIO: collegare tutte le pagine tra loro e cambiare ad ognuna il titolo di pagina
<a href> (destinazione) nuovo tag<ul> (unorder list= elenco non numerato)<li> (elementi della lista)
LINKS:
• INTERNI AL SITO: RELATIVI alla struttura, rimandano ad una cartella del sito• ESTERNI AL SITO: ASSOLUTI, hanno un posizione assoluta nel web, e iniziano con
http://
Barra proprietà:
link Destinazione [Target]: SELF o BLANK
SELF: per i links interni, la pagina si apre nella stessa scheda
7
2.3.
1.3.
1.2.
http://www.google.com
BLANK: per i links esterni, la pagina si apre in una nuova scheda
8
07 giugno 2011
PROPRIETA’ DI PAGINA [PAGE PROPERTIES]-barra inferiore
Category -> apparance (CSS) [aspetto]
PAGE FONT: 12 caratteri consentiti, divisi in famiglie di 3: quelli garantiti su tutti i computer, in ordine di diffusioneSIZE: in pixel, almeno 12 o 14.
A questo punto abbiamo le informazioni inserite in un foglio di stile (CSS) della pagina all’interno dell’ head nel tag <style>
n.b.: in alto a destra, nota cartella CSS STYLE
HTML CSS
CONTENUTI ASPETTOeSTRUTTURA
Category -> links (CSS)
n.b.: Rollover links: definisce il colore dei collegamenti quando ci si passa sopra con il mousen.b.: colore collegamenti, visitati e attivi possibilmente dello stesso colore (e magari non sottolineati)!
N.B.: in alto a destra controllare l’ordine degli stati nella scheda CSS Style; deve essere in ordine di importanza, dal generale al particolare. Fondamentale per quanto riguarda i links: deve essere:- a: link- a: visited- a: active- a: hover
CLASSE = REGOLA
Si può definire una serie di regole da associare a paragrafi, parole, etc; per definirle:
Category -> heandings (CSS) [titoli]
Una volta definite le regole, si selezionano le porzioni di testo a cui applicarle e si pescano dalla barra inferiore in Format
In assenza di un’associazione ad una regola particolare vengono applicate le regole generali di pagina.
9
IMMAGINI
Le immagini inserite vanno ottimizzate per il web.
Apri immagini in Photoshop -> file -> salva per web e dispositivi
vengono visualizzate 4 versioni della stessa immagine: la prima è l’immagine originale, le altre rappresentano le varie modifiche ottenute modificando la qualità (da 0 a 100): viene scelta la migliore valutando il rapporto tra peso e qualità
nota: dpi: dots per inch, cioè punti per polliceparametri standard: - PRINT: 300 dpi
- WEB 72 (ora 96) dpi
<p> elemento a capo con salto di riga, cioè nuovo paragrafo</p> = invio<br> salta una riga e resta nello stesso paragrafo </br> = shift+invio<img src …> (src indica l’origine dell’immagine)
INSERIRE IMMAGINI
Menu -> insert -> image
Prima del salvataggio: Alternate text [Testo alternativo] importante perché:
- viene trovato dai motori di ricerca- aumenta l’accessibilità (es.: non vedenti)
LINK NELL’IMMAGINE
Click sull’immagine (in progettazione o split) -> dalla barra inferiore inserisco il link in
n.b.: in codice o code: l’immagine è diventata un tag <a herf>, cioè un link, e in quanto tale ha il bordo blu (convenzionale; comunque dello stesso colore dei links)Per togliere il bordo: click sull’immagine -> dalla barra inferiore inserisco 0 (=zero) nella casella Border
10
CREARE LA STRUTTURA DI UNA PAGINA DI LAYOUT(per ora, facciamolo con una tabella..)
Menu -> insert -> table (4 righe + 1 colonna)
Larghezza: 760 px (misura che consente di essere accessibili anche da vecchi monitor)
1. HEADER
Photoshop -> nuovo doc -> L: 760 px X H: 100 ris.: 72
Creo l’immagine dell’header
(se serve: SCREEN SHOT=fotografia della pagina web: tasto Print)
Nella prima cella della tabella in DW incollo l’immagine ottenuta in PS
2. BARRA DEL MENU
Es.: HOMEPAGE – CHI SIAMO – EVENTI - CONTATTI
3. CONTENTS
VIDEO
Incorporare un video: to embed (incorporare qualcosa che è presente altrove)Fonte: vimeo, non youtube!
www.vimeo.com -> selezionare video da incorporare -> Costumize embed optino (in basso) -> size: 760 px -> togliere il flag al’auto-play
copy EMBED CODE
il codice viene poi incollato in DW nella sezione code nella posizione che si individua nel design (click nella posizione di interesse, vedo nel code dov’è posizionata, lì incollo l’embed code)
<i frame> video </i frame>
“i frame” sta per inline frame: finestra che si apre dentro un’altra finestra: l’embed si basa sul concetto di iframe.
Se si vuole inserire un video non presente in rete, è sempre meglio esternalizzarlo piuttosto che affidarsi ad un server personale.
Anche le tracce musicali o le immagini di Flickr si caricano mediante l’embed code: sul sito viene visualizzata la traccia o l’immagine ma già linkata alla fonte da cui viene attinta.
11
IMMAGINI
Creare un SEGNAPOSTO IMMAGINE [IMAGE PLACEHORDER]: definisce lo spazio in cui in un secondo momento verrà inserita l’immagine
Menu -> insert -> image objects -> image placehorder
Es.: dimensione immagini 240 X 100 px
Photoshop -> strumento taglierina -> inserire i valori delle dimensioni nella barra in alto per ritagliare con una dimensione prestabilita.
n.b.: le tabelle si adattano al contenuto-> n.b.: attenzione a come si selezionano le tabelle, principale o interna.- le righe si selezionano a sinistra (non a destra)- le colonne si selezionano in alto (non in basso)
Le tabelle interne alle tabelle si allineano al centro di default.
Collegamento indirizzo mail: seleziono l’indirizzo (nel Footer) e scrivo mailto: indirizzo nella casella link della barra inferiore; l’indirizzo apre il client di posta elettronica.
Tasto nella barra in basso importante per adattare le celle ai contenuti (anche in orizzontale): elimina gli spazi vuoti.
Simulazione del link: per verificare come appare un link si inserisce un collegamento alla stessa pagina in cui siamo -> inserisco nella barra inf. “#” nella casella Link.
Cambio colore alla cella: seleziono la cella -> barra inf. -> Bg [Background]
IMAGE MAP = HOT SPOT
Link ad una posizione dell’immagine; es.: clickando sul logo torno all’homepage.
Selezionare immagine -> barra inf. -> 3 simboli , ,
selezionare l’area sensibile che poi può essere spostata con il cursore
12
07 giugno 2011
ROLLOVER IMAGE [IMMAGINI SOVRAPPOSTE]
Sono due immagini sovrapposte molto simili tra loro, funzione utilizzata per creare dei pulsanti
Menu -> insert -> image objects -> image rolloverOriginal image = immagine visualizzata staticamenteRollover image = immagine che si visualizza quando si clicka sulla precedente
Le immagini vengono create in Photoshop duplicando i livelli, ad es.: aggiungendo un’ombra esterna.
NAMED ANCHOR [ANCORE]
Sono links che puntano verso una porzione di pagina specifica: segnalibri all’interno della pagina. Le pagine con le ancore si riconoscono perché sono molto lunghe, e si usano proprio perché contengono molto testo.
Menu -> insert -> named anchor -> inserire il nome dell’ancora in minuscolo e senza spazi all’inizio del paragrafo, dove si vuole inserire il segnalibroPer collegare il paragrafo in questione ad un indice o altro collegamento interno, si deve selezionare il testo e inserire #nome dell’ancora nella casella Link nella barra inf.
FINESTRA POP-UP
Permette la navigazione senza dover abbandonare la pagina (es.: galleria di foto).Si creano tante pagine .html quante saranno le pagine di scorrimento (es.: quante saranno le foto che poi dovranno scorrere nella finestra); ogni pagina sarà costituita da 3 colonne (1 centrale per l’IMG e due per i links) e 2 righe (una per l’ IMG e i links e una per il testo)
13
IMG1
link a IMG 2link a IMG 5 (nel caso di 5 IMG totali)
BEHAVIORS [COMPORTAMENTI] (F4)
Prima di applicare un comportamento bisogna decidere (e selezionare) a cosa applicarlo.
Menu -> windows -> behaviors -> si apre una finestra -> per aggiungere un comportamento -> tasto dal menu a tendina -> open browser window ->
URL to display -> indirizzoprimaimg.html (cioè la pagina con la prima foto che si deve aprire nella gallery) -> inserire misure pop up leggermente più grandi della tabella creata per le imgn.b.: flag su Resize handles (maniglie di posizionamento: l’utente ha così la possibilità di modificare le dimensioni della finestra di pop up se ne avesse bisogno)
n.b.: 2 colonne di applicazioni:a sinistra -> quando a destra -> cosaon load (quando si carica) apre la finestra del browseron click (quando si clicka)
DISSOLVENZA o altri effetti (all’apparire della foto [appear])Menu -> windows -> behaviours -> effects
14
+
13 giugno 2011
FOGLI DI STILE CSS
CascadingStyleSheet
Fogli di stile a cascata: prima del ’98, tutta la formattazione, cioè l’aspetto delle pagine, veniva relegata ai fogli html (“IN LINEA”): non esistevano standard, ed essendo tutte le informazioni immagazzinate sulla pagina html, le pagine risultavano molto pesanti.L’introduzione dei CSS ha consentito di ottenere la scissione tra forma e contenuti.Con html diventava problematico applicare le applicazioni/variazioni ad ogni pagina: operazione che dava anche risultati piuttosto imprecisi.
Ora, con l’avvento dei fogli di stile CSS, le informazioni relative alla formattazione (colore sfondo, scelta del font, presenza di bordi..)sono immagazzinate sotto forma di regola in un document esterno: stile.css.Modificando il foglio di stile vengono apportate le modifiche a tutte le pagine html ad esso collegate.
n.b.: divisione tra forma e contenuto!
Il foglio di stile è un foglio esterno (!), che ha un collegamento (associazione) ad ogni file html del sito (ovvio che il file .css non ha senso di esistere quando il sito è costituito da una sola pagina)
[ripristino delle aree di lavoro: menu -> window -> workspace layout]
Menu -> window -> apro css style: apre una finestra a destra
Le finestre css style e properties devono sempre restare aperte!
15
.html
.html .css
.html
CODICE CSS INTERNO ALLA PAGINA
Nel code: il nome delle regole appare come testo rosa; a seguire si apre una graffa con i valori di quella regola.
<style type”text/css”> tag del foglio di stile
Finestra css style -> doppio click su una regola -> si apre la finestra CSS RULES
(es.: line height: valore interlinea standard: più o meno il valore del font con un margine di tolleranza 1-2 punti; text transform: capitalize ogni parola inizia con una maiuscola, uppercase scrive tutto maiuscolo, lowercase tutto minuscolo)
FINESTRA CSS STYLE (a destra) nella barra in basso a destra, 4 comandi important (collegamento, nuova regola
[+], modifica regola [matita o doppio click], elimina [cestino])
REGOLE
CLASS: regola generale che viene applicata a più elementi, es.: testo, immagini, etc ID: regola più specifica che si applica ad un solo element, es.: div tag (box di testo)
Creare nuova regola -> [+] -> si nomina in minuscolo e senza spazi -> dove si salva?RULE DEFINITION: - New Style Sheet File: salva in un nuovo file css
- This Document Only: salva nel document stesso
Dalla finestra CSS STYLE trasferisco (trascinandole) le regole che prima erano sul foglio .html in “style.css”. Le regole hanno un nome preceduto da un punto.n.b.: nella barra inf. –PROPERTIES- lavora sull’opzione CSS; qui in TARGETED RULE trovo la regola da applicare al testo selezionato.
<link href>: collegamento ad un foglio di stile esterno alla pagina nuovo foglio .html click sul simbolo del collegamento: link al foglio .css
HOVER
È la variazione di una classe che permette di dare un effetto particolare all’elemento a cui viene applicata quando ci si passa sopra con il mouse; si applica alle classi dal codice del foglio di stile: seleziono la classe a cui applicare l’effetto, copio e incollo tutto il codice compreso tra le due parentesi graffe (comprese) e rinomino una delle due regole :hover (senza spazi).Es.: .img e .img:hoverEs.: img -> opacity:valore tra 0,5 e 0,9
16
DIV [BOX GENERICI]
Le tabelle sono inizialmente nate per le tabulazioni, solo in seguito utilizzate anche per il layout. I DIV sono box generici, trasparenti, senza sfondo, etc..<div> tag </div>
I DIV sono regolamentati da classi univoche ID: ad ogni DIV corrisponde una regola ID, che hanno lo stesso nome. Ogni ID può essere applicata solo ai DIV che portano lo stesso nome.
n.b.: all’interno di un DIV vige la regola ID finchè non ne interviene un’altra più specifica (all’interno dei DIV si possono applicare delle classi)
menu -> insert -> layout object -> Div Tag->dare lo stesso nome a CLASS e ID->box: categoria di css (a sinistra nella finestra delle regole) che regola dimensioni e allineamento dei DIV
n.b.: utilizzare i commenti nel codice per individuare/segnalare inizio e fine di ogni DIV!
SINTASSI DEI COMMENTI NEI FOGLI CSS: /* commento /*SINTASSI DEI COMMENTI NEI FOGLI HTML: <!-- commento -->(usare l’ “INDENTAZIONE” come riferimento grafico: spazio che intercorre tra l’inizio del paragrafo e il bordo, si usa per determinare un gerarchia a livello visivo)
REGOLE DEI DIV
1. l’unico modo per centrare un DIV nella pagina è di mettere margine sinistro e margine destro su “Auto”
2. le misure di un DIV sono date dalla somma di larghezza+bordo+margine+padding. MARGIN: distanza che intercorre tra il bordo e l’elemento che lo affianca = distanza verso l’esterno. PADDING: distanza che intercorre tra il contenuto del DIV e il suo bordo = distanza verso l’interno.
3. per costruire un layout web non è sufficiente far susseguire Header, Contents, etc. ma si rende necessaria la presenza di un WRAPPER: meta-contenitore, permette ai DIV in esso contenuti di visualizzarsi nella maniera corretta; si tratta di un riferimento per i DIV: se non ci fosse, i DIV prenderebbero come riferimento i bordi della pagina.
17
15 giugno 2011
LAYOUT MONOLITICO: a una colonna
PROPRIETA’ DEI DIV
1. FLOAT: (= appoggiare, allineare)risponde alla domanda “da che parte di deve appoggiare il DIV”?FLOAT LEFT / FLOAT RIGHT
2. CLEAR: (= liberare)risponde alla domanda “che lato deve avere libero, il DIV”?CLEAR BOTH (in genere header e footer): libero da entrambi i latiCLEAR LEFT: libero a sinistra, cioè a sinistra del DIV non deve esserci nulla
OVER FLOW [sovraflusso]Quando il testo contenuto in un DIV ha dimensioni maggiori del contenitore.
CSS Rule -> Positioning -> Over Flow = “se il contenuto supera le dimensioni del contenitore, cosa deo fare”?:
- HIDDEN: taglia il testo in eccesso- VISIBLE: lascia il testo in eccesso (da verificare)- AUTO: inserisce una barra di scorrimento solo se serve
N.B.: per allineare correttamente il testo attorno ad un’immagine (al lato destro), si deve allineare l’immagine a sinistra!!!
18
16 giugno 2011
WEB FONTS
Fonts estratti dal web, utilizzabili per la costruzione degli header (per il sito si usa uno di quelli contenuti nelle 12 famiglie, che garantiscono la leggibilità da tutti i computer)Per utilizzare gli Web Fonts è necessario fare l’ embed dei fonts estratti dal web; questo avviene grazie a CSS3: aggiornamento dei fogli di stile (attributo: @fontface)
HEAD -> STYLE LIBRERIA GOOGLE FONT
CLASSE (con un font speciale)
UTILITA’ WEB FONTS: vanno bene solo per i titoli, non per i testi!!!
• Semplificano la realizzazione degli header (non più in PS): il sito risulta più leggero, il testo inserito si trova con i motori di ricerca
• Danno maggior personalità grafica
Google -> Web Fonts -> scegliere font -> click on “use this font” -> copy embed code tra I tag dell’head, comunque sopra il body-> creare nuova CLASSE: nel code, copiare tra le parentesi graffe la stringa di valori compresa tra le graffe nella seconda finestra in Google Web Fonts
FAVICON
- riferimento visivo immediato- permette di riconoscere il sito tra tante schede aperte
Essendo di 16x16 px, deve essere molto semplice (max 150 kb)
Con PS parto da un file quadrato ad esempio di 300x300 pxDal sito (tools. dynamicdrive.com) -> icongenerator -> salvare e trascinare nella cartella principale del sito
19
.html
22 giugno 2011LIGHT BOXn.b.: le LightBox entrano in conflitto con le SlideJQuery e con le ImageFlow se si trovano nella stessa pagina web.
Java script (.js) che permette alle immagini di essere visualizzate su uno sfondo nero opaco. Inseriti nella pagina web realizzano particolari effetti visivi (es.: slide, menu..): non sono altro che collegamenti tra un’immagine piccola ad un’immagine più grande.
Come inserirleCercare “lightbox2” in Google -> scaricare lightboxv2.05.zip -> estrarre il file ed eliminare la cartella MACOSX (serve per i Mac)3 cartelle: - .js: contiene i files java script- .css: foglio di stile del LightBox- images: contiene immagini per il funzionamento del LightBoxTutte e tre queste cartelle devono essere presenti allo stesso livello della pagina in cui viene inserito il LightBox.
Quindi:1: scaricare LightBox2: creare le miniature delle immagini3: salvare le cartelle nella cartella principale4: creare una nuova pagina .html -> galleria
Per far funzionare il LightBox è necessario collegare lo script: nella pagina index di LightBox copiare le prime 3 righe nell’head della pagina del sito, più la quarta riga posta più in basso (cmnq leggere le istruzioni..).Successivamente copiare: rel=”lightbox” all’interno del tag del link dell’immagine (link speciale che si apre nel LightBox); dopo la dicitura lightbox ma prima della chiusura delle “” inserisco [galleria1] per tutte le foto che si desidera aprire insieme in successione. Per inserire una didascalia di descrizione dell’immagine che comparirà nel box, scrivere, title=”descrizione” dopo ..[galleria1]”
CSS3
Upgrade di CSS2 che introduce alcuni nuovi effetti applicabili agli ID e classi, ad esempio ombreggiature a testo o DIV, divisione in colonne del testo..
BORDER RADIUS: div con bordi arrotondatiBOX/TEXT SHADOW: ombreggiature di box o testi
Ad esempio, sarà possibile creare dei bottoni senza l’uso dei div: selezionare il testo che si vuol trasformare in bottone, applicare un background al testo aggiungendo un border radius; creare una nuova classe :hover con un background diverso (n.b.: quando poi si applica la regola, selezionare il testo senza l’ultima lettera, che poi verrà cancellata e riscritta)
20
SPRY
Menu -> insert -> Spry
MENUBARSPRY ACCORDION (pannello a fisarmonica, utilizzato ad es. per descrivere eventi, news..)SPRY COLLAPSIBLE PANEL: pannello comprimibile, che si può gestire discretamente bene, ad es. per delle schede di approfondimento (si imposta di default se farlo comparire aperto o chiuso)SPRY TOOLTIP (pannello suggerimenti): applicator ad un testo o ad un’immagine, permette di aprire un box al passaggio del mouse.
MONITORAGGIO ACCESSI AL SITO
-> registrazione del sito su google analitics -> copiare l’embed code generato nell’head di ogni pagina che si vuole monitorare.
PAGINA PROTETTA DA PASS
Mettere in Google “password protect html”
[DIV FISSI]
DIV sempre visibili nella pagina anche se viene fatto lo scrolling. Possono esserlo l’header, il footer o alcuni piccoli div laterali. -> Impostare la larghezza del box al 100% -> opzione fixed nella voce Positioning nel pannello della regola -> placement (es.: header) -> top=0 – right=0 – left=0 (ricordarsi, nel caso dell’header, di mettere un margine inferiore per consentire la leggibilità del resto della pagina)Generalmente vengono posizionati all’esterno del wrapper.
21
23 giugno 2011ADOBE FLASHwww.sitiusabili.com (cerca “vantaggi e svantaggi dei siti in Flash”)
Programma di animazione vettoriale che sviluppa sulla barra del tempo diversi livelli spaziali. Nasce per creare animazioni (filmati interattivi) per il web. Per funzionare ha bisogno di un player installato nel computer dell’utente finale.
TIME LINE: linea temporale lungo la quale si sviluppano le animazioni.
Animare significa che nel tempo T un oggetto passa (si sposta, sta fermo o comunque cambia di stato) da uno stato A ad uno stato B.
fps= frame per second: unità di misura (24 di default, perché 24 sono i frame che costituiscono un secondo)
.fla: file di progetto
.swf: file esecutivo da inserire nel foglio .html
BANNER: box pubblicitari collegati ad una pagina di atterraggio (landing page)
File -> (actionscript 2.0) -> stage: riquadro bianco che rappresenta l’area di lavoro, che sarà l’area del filmato finale: dimensioni fondamentali sin dall’inizio (-> banner in Wikipedia per le dimensioni standard)
Save file .fla (per avere un file .swf -> file -> export)
n.b.: un solo oggetto su ogni livello!
Import to Stage: importa gli oggetti nell’area di lavoro e contemporaneamente nella libreriaImport to Library: importa gli oggetti nell’archivio (nel caso in cui le immagini vengano inserite in un secondo momento) CTRL+L: mostra libreria
La time line è costituita da frame, rappresentati da piccoli rettangoli verticali; se all’interno di un frame è presente un “pallino” nero, significa che all’interno del frame è presente qualcosa, se il pallino è bianco: il frame è vuoto.
FOTOGRAMMA CHIAVE: fotogramma “speciale” che determina l’inizio o la fine dell’animazione -> F6
Ogni elemento può subire un’animazione solo se è preventivamente trasformato in SIMBOLO -> F8 -> 3 opzioni:
1- GRAPH [elemento grafico]: immagini statiche2- MOVIE [filmato]: per animazioni complesse3- BUTTON: per creare un link
INTERPOLAZIONE DI MOVIMENTO [MOTION TWEEN]: trasformazione nel tempo dal punto A al punto B, cioè tra due fotogrammi chiave. Per creare un’interpolazione di movimento -> selezionare il simbolo -> click sul tasto destro -> prima voce del menu: Create Motion Tween; determinare subito la fine, nel tempo,
22
dell’animazione premendo F6 sul frame in questione (di default viene inserito dopo 24 frame)
Rimozione frame chiave -> CTRL+click -> tasto destro -> remove frame
4 punti chiave:- animazione per entrare (1+2)- animazione per stare fermo- uscita
ANTEPRIMA File -> Publish Preview -> Flash
TRASPARENZAPannello proprietà -> Color Effect -> Style -> αα = 0 oggetto completamente trasparente (=invisibile)α = 100% oggetto completamente visibile
LINKNuovo livello -> strumento rettangolo -> rettangolo quanto l’area del banner -> F8 -> Symolo=BUTTON -> trasparenza-> Finestra Behaviors -> web -> go to web page -> indirizzo
INCORPORARE IL BANNER NELLA PAGINA HTMLInsert -> Media -> .swf
23
27 giugno 2011
SLIDE SHOW (JQuery)
Galleria di scorrimento (preferibile a quelle in Flash).Le dimensioni delle slide devono essere necessariamente simili a quelle delle fotografie.
INSERIMENTOCopiare i due file .js contenuti nella cartella oltre agli script nell’head (vd esempio cartella “Slider_JQuery_Ema”)
Dato che le Slide incasinano tutta la parte della progettazione, per visualizzarle chiaramente intervenire sull’ID “Slider” -> Positioning -> Overflow -> hidden
IMAGE FLOW
Slide che si sviluppa tutta all’interno di un DIV.
Vd. esempio cartella “ImageFlow_EMANUELE” SLIDE A TUTTA PAGINA o SLIDE IN UN DIV
Lo script “type” fa riferimento ad un javascript.Il tag “rel” rappresenta il link ad un foglio di stile, necessario al funzionamento della Slideshow
“img src” = image source: origine dell’immagine“long desc”: la stessa immagine che compare ingrandita nella pagina web quando viene clickata l’ “img src”“alt”: didascalia che compare nella Slide
RIASSUMENDOPer creare un’ ImageFlow:
- inserire il collegamento al foglio di stile- inserire lo script
cioè: <dove si va a pescare il meccanismo che fa funzionare l’ImageFlow e quali regole dovrà seguire>
24
COMANDI DREAMWEAVER
• CTRL + N = apre un nuovo documento• CTRL + S = salvataggio• CTRL + Z = torna indietro di un passaggio• CTRL + J = apre proprietà di pagina• F12 = verifica la pagina nel browser• F4 = apre la finestra dei comportamenti• * = pagina non salvata!
COMANDI PHOTOSHOP
• CTRL + V = apre un nuovo documento• CTRL + S = salvataggio• CTRL + Z = avanti/indietro di un passaggio• CTRL + Z + ALT = indietro di un tot di passaggi• SHIFT = tenendolo premuto, riduce le dimensioni dell’immagine dal centro con le
proporzioni bloccate; permette di fare linee perfettam vert o orizzontali
SITI UTILI
www.stripegenerator.com (fonte di sfondi)www.corbis.com e www.sxc.hu (fonte di immagini)www.vimeo.com (per scaricare video -> embed code)www.soundcloud.com (fonte di brani musicali -> embed code)www.8tracks.com (si possono creare compilation personalizzate -> embed code)www.foxyform.com (per creare un forum di contatto -> embed code)www.kuler.adobe.com (fornisce abbinamenti di colori)www.brandsoftheworld.com (fornisce loghi)tools. dynamicdrive.com (per generare fav icon)www.web20badges.com (per creare badges)www.css3generator.com (per generare semplicemente effetti grafici)javascipt.html.it (raccolta di script utili)www.debutart.com (fornisce illustrazioni scaricabili)
25
