LEZIONE del 3/3 -compito del web designer Cosa fa il web designer??? Il compito di un web designer richiede diverse competenze: -TRADUCE idea grafica in codice che il browser interpreta -ASSIMILA e conosce i nuovi linguaggi e le nuove tecnologie -RISPETTA VINCOLI del web (html linguaggio restrittivo)(w3c(world wild web consortium)regole di usabilità scrittura linguaggio e buona norma) -PROGETTA e realizza siti web -PENSA A TUTTI GLI UTENTI in primo piano: (!!!)accessibilità -> mettere tutti gli utenti in condizione di visualizzare il sito, renderlo disponibile anche a persone con handicap visivi (!!!)usabilità -> quando si raggiungono le info nella maniera più intuitiva e veloce usabilità=praticità. Il web è basato su delle convenzioni * Per fare capire a tutti occorre SEMPLIFICARE -SCHEMATIZZA su carta le idee (successivamente su photoshop e poi su drwv) -LAVORA IN PROPRIO o per un'agenzia -CONOSCE IL SEO (search engine optimization) per l'ottimizzazione sui motori di ricerca -SI INFORMA(!!!) su innovazioni di linguaggio web -SI OCCUPA DI SOCIAL progetta web-app e SMM(social media marketing) -LAVORA CON CMS(content management system) -CONOSCE IL MARKETING per il lancio -CONOSCE IL DEM (direct email marketing/newsletter) -CREA BANNER PUBBLICITARI animati con flash html5 -GESTIRE IL CLIENTE -SI TRASFORMA IN FOTOGRAFO (o in copywriter) *Senza materiale non si può iniziare Occorre mettere online il nostro sito. Realizziamo il sito in locale (sul nostro pc) e poi lo trasferiremo su un server remoto. Gli ISP (internet service provider) affittano parte di loro server. Lavoreremo su alcune sottocartelle. ES: Gessy.altervista.org → lavoreremo in delle sottocartelle Gessy.altervista.org/sito1 Gessy.altervista.org/sito2 Gessy.altervista.org ---- il portfolio
ftp: file transfer protocol Parametri di connessione FTP
• Host: ftp.portfolio.altervista.org ← Parametro per connetterci • Porta: 21
1. Utente: portfolio ← Parametro per connetterci • Password: la stessa del pannello di controllo di AlterVista • Modalità: passiva (PASV) • Criptazione: Nessuna o TLS esplicito
FILEZILLA pc-server trascini e rilasci REGOLA!!!!!!!!!!!
– la home del sito web deve sempre chiamarsi index.html – i nomi dei file sempre in minuscolo senza spazi o simboli strani
struttura base: index e una sotto cartella che chiameremo IMG la cartella delle immagini http://www.portfoliogessicap.altervista.org/sky.jpg http://www.portfoliogessicap.altervista.org/img/sky.jpg ← ora è dentro la cartella img
LEZIONE 4/3 -HTML -SEO: title, description, keywords -Spazi -Link ipertestuale -Foglio di stile -Abbozzo di sito HTML : Hyper text markup language = linguaggio di formattazione per ipertesti Con l'html puoi costruire la struttura/il framework/l'ossatura di una pagina. – File new (oppure usi CTRL N)... doc type... HTML 5 – LAVORA SU DUE FRONTI codice e design(che è simile a word) lavorare in modalità split per vedere entrambe le parti. <!-- questo non viene visualizzato e risulta come commento --> Un TAG determina l'inizio/fine di qualcosa. Dentro il tag avviene la realizzazione pratica della pagina. <html> - - dentro ci sono due tag fondamentali: head e body - </html> <body>: contiene la grafica, la parte relativa a foto, video, testi, tabelle ecc. <head>: contiene informazioni e meta dati che servono per l'indicizzazione nei motori di ricerca e queste informazioni non hanno riscontro grafico ma vengono solo lette da browser e motori di ricerca. L'head include meta informazioni (titolo pagina, descrizione, codici, script ecc) Title e meta description sono importanti per il SEO. Si mettono anche le meta key words.
Insert → head → description es: pagina di presentazione del corso Insert → head → keywords es: lavoro Risulta: <meta name="description" content="pagina di presentazione del
corso">
Sarà visualizzata solo ed esclusivamente all'interno del nostro motore di ricerca. <meta name="keywords" content="esercizio, lavoro, milano, lavoro milano"> Si possono modificare le keywords dal codice SPAZI In Code gli spazi non contano. In Design invece dando gli invii: <p> </p> tag p, ovvero tag paragrafo. I motori di ricerca lanciano nel web degli spiders: software che scansionano le informazioni meta e le riportano in un database enorme. Link ipertestuale: elemento (testo/immagine) che ha una proprietà particolare ovvero porta ad un altro url (Universal Resource Locator) Design → scrivo e seleziono → vado su link e metto http://www.gazzetta.it → vado su title (attributo) e metto cronaca sportiva (per l'accessibilità) → vado su target: se il link è esterno al sito si va su _blank (nuova scheda) se il link è interno al sito si va su _self *la A sta per i LINK!! a href /a è il tag che definisce un link es. <a href="http://www.gazzetta.it" title="cronaca sportiva" target="_self">La Gazzetta dello Sport </a> a href _ link _ descrizione elemento _ dove si apre la pagina _ titolo /a
FOGLIO DI STILE <style type="text/css"> linguaggio con sintassi diversa che determina font colore sfondo ecc elemento che si vuole modificare (ctrl shift alt quadra) { Attributi da cambiare: orange;} background-color → è una proprietà css(fogli di stile a cascata) la sintassi per i commenti è /* */
color:#FFF;/*definisce il colore del testo*/ font-size:25px;/*cambio la dimensione*/ ABBOZZO DI SITO Elementi che non possono mancare su un sito: 1-HEADER(testata) → LOGO 2-Navbar → link 3-video 4-testo 5-foto e testo 6 FOOTER(piè di pagina) es.6 righe, alla 4 faremo un'ulteriore tabella per avere due colonne Layout tabellare: 900px larghezza standard ??? px altezza si adatta al contenuto NUOVO TAG <table width="900" border="0" cellspacing="0" cellpadding="0"> tabella → riga → cella table → tr → td Per allineare la tabella, una volta selezionata, vado su align. CREARE L'HEADER con photoshop (72 pixel/pollice risoluzione standard) File → salva per web: ottimizza le immagini riducendone il peso. Il peso influisce sui tempi di caricamento. Immagine → tabella: inserisci immagine risulta sul code: <img src="img/header.jpg" width="900" height="80" alt=""/> CREARE LA NAVBAR Inserisco i link, quando non ho ancora pronte le altre pagine posso renderle link utilizzando # e creo un link fasullo
INSERIRE VIDEO non sono fisicamente sul sito ma sul server dal quale vengono presi.
RIC: inserire davanti all'embed del video sul code http://
INSERIRE FOTO: con photoshop e poi inserisci foto Cambiamo il font ecc. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Oliviero Toscani - Homepage</title> <style type= "text/css"> body{ color:#333; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; } a{color:} </style> </head> Per modificare il colore dei link devo mettere a{} text-decoration:none → nessuna sottolineatura
LEZIONE 5/3 slide, sito1 (continuazione) Slide sulla Gestalt... La Gestalt è una corrente di pensiero, nata in Germania fra la fine dell'Ottocento e gli inizi del Novecento. I suoi sostenitori affermarono che la percezione di ciò che ci circonda non è la semplice somma di elementi e sensazioni primarie, bensì un'unità strutturata di esse. Quando vediamo elementi il cervello li percepisce come unità e non come singoli elementi. Similitudine (oggetti uguali si uniformano, un oggetto diverso spicca dagli altri) Continuazione(segui la direzione dell'elemento grafico) Chiusura(Si applica molto nel logo design, linea non c'è ma viene creata dal cervello per dare un senso al disegno) Prossimità(IMP elementi vicini percepiti come unico gruppo es. Barra navigazione) Figura sfondo(si può giocare tra immagini e sfondo) (il mezzo di comunicazione determina il linguaggio secondo McLuhan) ELEMENTI • Immagini(foto) • Elementi grafici (forme bottoni) • Sfondi • Vuoto(IMP) • Font (esistono famiglie di font da usare,nel web l'utente non legge tutti i font) • Loghi • Contatti e info( generalmente si mettono nel footer (p.iva obbligatoria)) CARATTERISTICHE • Colore • Peso e proporzione (importanza di un elemento rispetto alla pag. elemento più o meno nero(quindi colorato, grassetto,sottile)all'interno della pagina) • Allineamento • Dimensione • Direzione (dove porta l'occhio) Organizzazione degli elementi e bilanciamento peso Organizzazione degli intervalli(+ vicini e simili + sono percepiti come unico gruppo) Combinazioni armoniche: -monocromatiche -analoga(come sopra ma con maggiori colorazioni) -complementare(attenzione ma anche pugno nell'occhio) -triangolare Colori simili = relazione fra le parti (Ridondanza crea rumore McLuhan) Ricordarsi delle connotazioni sociali dei colori(si legano i colori a cose comuni) Ritmo (per il testo stesso font,ripetizione)Semplicità(no grafica inutile) Icone(possono confondere l'utente,si usano solo ed esclusivamente quando si parla di social in quanto sono universali) Contrasto(la maggior leggibilità si ha con nero e giallo) Font Il font COMIC SANS si usa solo in determinati contesti. Font: -grazie: ha terminazioni; si chiamano font serif -senza grazie: font san serif comunamente noti come bastoni (helvetica font più usato nel mondo)
ABBOZZO SITO ripresa del sito1 Padding → margine interno distanza tra il bordo dell'elemento e il contenuto Margine → margine esterno </p> a capo con invio e salta la riga </br> a capo con shift+invio non salta riga CREARE IL FOOTER: partita iva, info, contatti... per aprire un programma di posta dobbiamo selezionare il testo e nel campo link inserire un link speciale: mailto ([email protected] ) Modifiche in linea ° Per mettere direttamente nel codice una parola in grassetto occorre scrivere <strong>parola</strong> ° Per mettere direttamente nel codice una parola in corsivo occorre scrivere <em>parola</em> ° Per modificare in linea un paragrafo Dentro il tag <p> nel foglio di stile css il paragrafo è... <p style=”color: F00”> jknjksdnfldksn </p> ° Per mettere in mezzo il testo del footer <td style="text-align:center"> *Per una questione di leggibilità è sconsigliabile usare il corsivo. *Gli effetti si usano una sola volta *Si evita l'allineamento giustificato (su carta va bene) la distanza tra una parola e l'altra non è coerente e spezza la linea di lettura dal monitor. Le regole principalmente vanno nel foglio di stile(sono regole generali applicabili a tutto), se però dobbiamo modificare solo alcune parti possiamo ricorrere alla modifica in linea. Quando si disegna un layout ci sono elementi che devono rimanere coerenti header footer e navbar. Creando l'homepage noi abbiamo creato la nostra pagina mastro. Cambiamo i contenuti all'interno. Salviamo la pagina index con un altro nome e da questa ricaviamo le altre pagine del sito. (es.contatti)
Ora alleghiamo l'indirizzo da google maps
LEZIONE 5/3 tag, url e link , fogli di stile css, tipi di siti web, SEO slide TAG <html> <head> <body> <a href> link <p> a capo saltando la riga <br> a capo senza saltare riga <strong> grassetto <em> corsivo <iframe> per gli embed <img src> per le immagini … Collegamenti ipertestuali: _self, _blank, title, link relativo, #link fasullo, link assoluto http://.... Url:url assoluti sono http://... normalmente tutti i link esterni sono url assoluti. Gli url assoluti puntano una notizia già online sul web. Quando lavoriamo all'interno di una cartella di lavoro del nostro computer si scrive semplicemente nome.html Questa cartella di lavoro è un microcosmo e possiamo indicare in maniera semplice il link. Usiamo cioè i link relativi. Ovvero relativi alla nostra pagina di lavoro. Fogli di Stile CSS (cascading style sheets) Contengono le regole di un documento html. Occorre distinguere tra struttura e aspetto. Struttura si cura con html, aspetto con css. I fogli di stile permettono di portare all'esterno tutto ciò che riguarda l'aspetto della pagina. *Semplificare, minimizzare le regole aiuta dal punto di vista della coerenza estetica del sito e della realizzazione del sito stesso. Se non è funzionale non occorre crearla. Sito web statico/dinamico/animato
1) statici: scritti in html (linguaggio di markup ovvero marcatura(strutturazione della pagina)), una volta caricati online per aggiornare una pagina dobbiamo sovrascrivere la nostra pagina attraverso filezilla. Questo tipo va bene per i siti vetrina (Sono utilizzati per siti che mostrano le caratteristiche di prodotti, di portfolio online, di aziende o di servizi)
2) dinamici: scritti in php(linguaggio di programmazione),usato, ad esempio, per un motore di ricerca (questo può pescare informazioni all'interno del database) un sito che ha a disposizione una base di dati, può così rispondere alle richieste dell'utente. Ha un “cervello pensante” che può dare delle risposte.
3) Animati: realizzati con tecnologia flash (non si vedono sul telefono). Siti che sono come dei video interattivi. Ha senso usare flash per i banner pubblicitari.
(google web designer)
SEO slide: I meta dati non influenzano l'aspetto del sito, sono compilati per i motori di ricerca. Si usano title, keyword, description. Google ora legge direttamente quello che c'è nel body. Mantenendo il sito aggiornato si può salire di posizione all'interno dei risultati dei motori di ricerca. Un motore di ricerca non vede il foglio di stile, solo i contenuti Visitatori: (google analytics) Traffico diretto: le persone che digitano direttamente il tuo sito Search enginers: le persone che raggiungono il sito dal motore di ricerca Referring sites: le persone che raggiungono il sito da link di siti amici Più utenti arrivano al sito più si guadagna, più il mio sito prende importanza. Per aggiunger il proprio sito ai motori di ricerca:
– submit manuali:vado sui motori di ricerca e segnalo la presenza del mio sito – submit massivo: aggiungi il sito a 10000 motori di ricerca – open directory project – aggregatori – link da altri siti
“Con il termine ottimizzazione si indica la complessa attività di strutturazione dei contenuti delle pagine web di un sito, allo scopo di facilitarne la lettura da parte dei motori di ricerca.” Importante : la qualità delle visite → tempo speso sul sito e tipologia di ricerca. Ricerca organica → ricerca normale Ricerca pagata → google offre la possibilità di sponsorizzare il tuo sito,ogni chiave di ricerca ha un prezzo. Nome di dominio: scelta individuale,nome del brand con o senza parole chiave URL rewriting: dall'url si deve capire cosa contiene la pagina (es.contatti,biografia) Semplificare la navigazione: se è chiara e pulita si ha maggiore possibilità di comparire più in alto sul web. Struttura informazioni: seguire cioè un ordine logico Usare tool di analisi e monitoraggio (es google analytics) possiamo capire il target CSS: → <head> <style type="text/css"> Esistono tipi di regole css: a{} ridefiniamo tutti i link body{} ridefiniamo l'aspetto standard della pagina p{} Gerarchia !!! regola tag > regola classe > id
CLASSI: regole che possono essere applicate a più di un elemento in maniera selettiva il nome è preceduto da un punto .titolo{} Il tag applica in automatico le modifiche mentre per la classe dobbiamo applicarla .titolo{ font-family:georgia, serif; font-size: 24px; font-weight: → da qui posso fare il grassetto ecc. ; font-style:italic → per il corsivo color:#900; background-color: #FFF; text-transform: uppercase;/*CIAO*/ /*CAPITALIZE: Ciao Ciao*/ text-decoration: line-through; } il body risulta: <p class="titolo">Applichiamo la classe titolo</p> <p><span class="titolo">Applichiamo in parte</span> la classe titolo</p> <!--span è come se fosse una scatola vuota, una cosa generica--> Per non copiare i tag possiamo aprire blocco note incollare e poi copiare su dreamweaver oppure incolla speciale col tasto destro nome classe è arbitrario nome tag no! Dopo un disegno schematizzato creiamo il nostro sito. Tabella,foto,testi,link,font e proprità. Es. sito Elite milano
LEZIONE 7/3 Come collegare un foglio di stile esterno? Div Regole CSS importanti 1 em corrisponde alla dimensione standard del browser (per il font) per la pagina in % 1 px unità assoluta 12-14 px CSS collegato a tutte le pagine e non dentro all'head di ogni singola pagina. Quando abbiamo siti web di una pagina sola possiamo non esternalizzare, negli altri casi conviene scrivere il file css all'esterno. Ogni pagina poi contiene il link alla pagina css. Il foglio di stile css si chiama style.ccs Utile perchè possiamo creare più versioni di un sito. DIV Un div è una scatola vuota. <div> </div> Il vantaggio dei div la loro povertà, queste scatole vuote possono essere formattate attraverso regole css. Come collegare un foglio di stile esterno? I div devono essere abbracciati attach existing CSS file Add as: link <link href="style.css" rel="stylesheet" type="text/css"> sull'html → inserisci div (normalmente si fa sul codice perchè è più preciso) new css rule Selctor typer: class Selector name: .box1 Rule definition: style.css Le proprietà principali che io devo dare al div sono: larghezza, altezza, colore sfondo la parte più importante è la sezione box → ho l'opzione modifica regola per cambiare le impostazioni Border: solid linea dotted puntinato !!!Per allineare un div al centro della pagina bisogna mettere margin left e right automatico margin-left: auto margin-right: auto oppure margin: 0 auto (0 per sopra e sotto, auto per dx e sx)
Lezione 10/3 formati .jpg .png .gif, sito con DIV e comando float Come salvare per il web? Dobbiamo vedere che cosa si vuole salvare: pulsante, foto, trasparenza...In photoshop usiamo il comando “salva per il web” Ci sono 3 formati: .jpg → (joint photographic experts group) metodo di compressione lossy (ovvero di perdita di dati) più adatto alle fotografie in senso stretto una maggiore compressione determina un effetto quasi di sfocatura .png →(portable network graphics) si usa per la possibilità di avere parti dell'area dell'immagine trasparente ci sono 2 tipi di png: png 8 simile al formato gif e supporta 256 colori va bene per icone o pulsanti png 24 supporta 16.7 milioni di colori ed è simile al jpg supporta foto più pesanti permette la trasparenza (in phshop ci sono diversi livelli di trasparenza) .gif →(graphic interchange format) paletta che arriva fino a 256 colori, si ha una riduzione selettiva dei colori ideale per bottoni ed elementi grafici supporta l'animazione supporta la trasparenza RISOLUZIONE: quantità di px per pollice 72dpi-96dpi(punti per pollice) per il web 300dpi per la stampa Dimensioni comuni per il web: 1024x768 ratio:1.33(rapporto lato per lato) → oltre i 1024 non si va! E a scendere... Immagini rotonde? Hanno probabilmente una parte trasparente o una parte ha lo stesso colore dello sfondo Non è necessario caricare il file .psd online. Il psd ci permette di intervenire in un secondo momento. Un sito web deve stare tra gli 80/100 kb /*super regola che ridefinisce le regole del browser nel documento css*/ *{ margin: 0; padding: 0;} .box1{background-color: #F60; height: 400px; width: 400px; margin: 0 auto; padding: 10px; background-image: url(Screenshot_2013-03-23-13-45-43-1.png); border: 4px dotted #FF6600;} Quando abbiamo più div affiancati dobbiamo impostare il FLOAT. Ovvero un valore che si inserisce nel momento in cui noi desideriamo dare una regola di posizionamento.
LEZIONE 12/3 utilizzo dei web font, creare barra menu con lista, Pseudo classe La comunicazione web è restrittiva nel design. Limiti → semplificazione → facilità di accesso Tipografia sul web: usiamo famiglie di font, per la compatibilità tra sistemi operativi. Ciò permette una visualizzazione uniforme fra diversi sistemi operativi. Ci sono font e colori WEB SAFE → a prova di web,non c'è il rischio che quel font/colore non esista all'interno del s.o. !!!allineare il paragrafo a bandiera a sinistra!!! Un web font è un font che viene incorporato all'interno della pagina web. → questo mi permette di far visualizzare un determinato font anche a chi non ce l'ha. I web font più usati sono i “google web font” Come funziona?? google.com/fonts → premiamo su quick use e utilizziamo il carattere desiderato. Il tempo di caricamento della pagina tende ad aumentare e si rischiano pasticci. _è concesso un solo web font per pagina _devono essere grandi _unire con ombreggiature una tantum _è concesso l'utilizzo solo per i titoli La tipografia è importante...
'http://fonts.googleapis.com/css?family=Della+Respira' rel='stylesheet' type='text/css'> la incorporo all'interno del web <style type="text/css"> .titolo{font-family: 'Della Respira', serif;} </style> Su dreamweaver non si vede l'anteprima.Anche per gli effetti grafici vale lo
stesso discorso:1 solo effetto!!! (ombreggiatura,bordi arrotondati ecc) text shadow_ ombreggiatura a un testo css3generator Per impostare l'ombreggiatura dobbiamo dire: quanto deve spostarsi a dx → quanto deve spostarsi in basso blur determina la qualità dell'ombra (valore alto si sfoca) box shadow_ombreggiatura a un div come sopra con l'aggiunta dello spread: estensione border radius gradient CREARE BARRA MENU: Per creare menù si utilizzano le LISTE. Si utilizzano regole css per abbellire il tutto. UL=UNORDERED LIST LI=list item <ul class=”lista”> <li>HOMEPAGE</li> <li>CHI SIAMO</li> .lista{list-style-type:none;/*levi il puntino*/} <li>MAPPADEL SITO</li> /*andiamo nello specifico*/ <li>CONTATTI</li> .lista li{display:inline-block;/*li mette in fila*/} </ul> Pseudo classe: classe che si verifica solo nel momento in cui avviene una determinata situazione /*la pseudo classe :hover determina lo stato di .lista li al passaggio del mouse*/ /*metto solo le regole che cambiano il resto viene ereditato*/ /*transition-duration*/ .lista li:hover{background-color:#F00;color:#000;} Se mi trovo dei link all'interno di lista li uso questa classe: .lista li a{color:#FFF; text-decoration:none;}
LEZIONE 14/3 SEO parte2 Risultati di ricerca: Se scrivi = discoteca bolgia = cerca discoteca,bolgia,discoteca bolgia. Se scrivi = “discoteca bolgia”= cerca discoteca bolgia PAGE RANK:classifica che determina l'affidabilità del sito. (è un voto) I backlinks sono un ennesimo valore per apparire nei motori di ricerca. Title, description....etc → slide Google (web master/keywords/) tools Intestazioni da h1 a h6 → h1 titolo più importante h6 meno importante in questo modo noi diciamo a google quale sia il titolo principale indicando il tag h1{} nel foglio di stile. CREARE CONTENUTI PENSANDO AGLI UTENTI E AGGIORNARE IL SITO SPESSO
• CLICCA QUI è funzionale? Non è descrittivo.. • display none---> scompare l'elemento, non smascherare link o parole chiave con qst tecnica • Testo alternativo (attributo alt) molto breve (30 battute circa) • No index...non indicizza la pagina • feed rss (really simple syndication) gli utenti abbonandosi a questo flusso ogni volta
Inserire BUTTON facebook social plug-in <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> Inserisci il codice del tuo plugin dove vuoi che il plugin appaia nella tua pagina. <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
LEZIONE 17/3 COMUNICAZIONE VISIVA...WEB USABILITY see slide... Il processo di design Stabilite gli obiettivi del progetto (contenuti, target…) prima di cominciare Non accontentatevi della prima idea soddisfacente, portatela fino in fondo e considerate le alternative Create e valutate prototipi (su carta e su web) Nielsen J. (2000). Web usability. Milano, Apogeo. Una buona introduzione all’usabilità delle pagine web
LEZIONE 18/3 Flash flash: nasce nel '96 acquisito da Adobe. É un software per animazioni e banner. (Jacob Nielsen no web usability). Lavora in vettoriale. Un'immagine digitale è composta da pixel la grafica bitmap o raster ha un effetto di sgranatura in seguito ad un ingrandimento. La Grafica vettoriale invece non ha questo effetto. Il formato vettoriale è dato da formule matematiche. (Si realizzano i loghi) Il vettoriale è più leggero, la grafica vettoriale è molto semplificata (sia per colori sia per forme). Animazioni vettoriali grazie allo strumento del disegno. Flash ha la possibilità anche di importare elementi bitmap. Il filmato flash permette un'interazione. Con flash abbiamo modo di effettuare delle operazioni. Il linguaggio che sta alla base di flash è actionscript. I principali utilizzi:
• banner animazioni per il web • interi siti web • rich media application RMA (cd in allegato) • cartoni animati
flash importa e utilizza: • file video • audio • elementi vettoriale • testo e input • immagini bitmap
editing(modifiche e realizzazioni banner) • simile al montaggio video • linea temporale
dobbiamo tenere conto del piano tempo(x) livelli(y) (come con photoshop il liv superiore copre quello inferiore) In flash dobbiamo chiederci cosa avviene, il dove e il quando → Frame rate. 24 fps( fotogrammi per secondo) Ogni 24 frame otteniamo 1 secondo di filmato. Il formato di flash si chiama flashmovie. A livello di seo è un disastro, in quanto viene letto come video. Nielsen: flash 99%bad → alimentiamo il cattivo design incoraggiando l'abuso di grafica, va contro i principi basilari delle interazioni web, distrae dallo scopo principale del sito. Per visualizzare un formato flash occorre il flash player. Non visualizzabile su Iphone. HTML5 e CSS3 permettono animazioni simili... Le animazioni avvengono sullo STAGE, sulla timeline avvengono le cose. Lo stop motion:animazioni tipo cartoni di plastilina(foto,movimento,foto,movimento...) Flash calcola l'animazione in automatico (frame1--- frame 24 ). è possibile creare animazioni tra keyframes. Interpolazione → motion tween: capacità di flash di creare un'animazione dal punto A al punto B.
Formati di salvataggio: .FLA codice sorgente .SWF esportazione (shock wave flash) può esportare anche in .exe, (in formato eseguibile è vantaggioso perchè se tu esporti in formato exe tu puoi visualizzarlo senza avere il flash player).jpg(sequenza di jpg), .gif(animata) La libreria:
• raccoglie elementi usati nel filmato, bottoni e simboli(ogni simb. ha caratteristiche particolari) • contiene immagini,video e audio • possiamo scegliere se usare o meno un elemento • quando salvo il file .fla salvo anche libreria
TIPI di Animazione: interpolazione di movimento, di forma, di metamorfosi(pallina rossa,quadrato giallo), effetti sul testo,effetti speciali. Le animazioni avvengono grazie ai simboli; ne esistono 3 tipi: -MOVIE CLIP filmato con animazione -GRAPHIC più utilizzati, foto che animiamo -BUTTON pulsante Noi possiamo animare soltanto i simboli e soprattutto tra un fotogramma A e B (A e B sono dei keyframes). Landing page → pagina di destinazione. Actionscript → linguaggio per determinare l'interazione (es. riavviare o fermare il filmato) PRINCIPI BASE DELL'ANIMAZIONE animare: far compiere uno spostamento da A a B nell'arco di un tempo. Ogni parte in flash può avere un colore riempimento e un colore bordo. Slection tool tasto destro sull'elemento crea motion tween ok F6 crea un keyframe selezioni il frame 24 e poi trascini il pallino Invio → anteprima veloce dell'animazione free transform tool frame 24 fotogramma 48 tasto dx insert keyframe position PUBLISHING SETTINGS deselezioni html esportiamo in swf e in gif animato file publish originiamo il nostro file swf gif LEZIONE 19/3 Banner Creare un banner: 550x400px 1°blocco: dal 20 maggio in tutti i negozi di telefonia 2°blocco: foto 3°blocco: da 19 euro... livello1 strumento testo e transizioni livello2 insert blanck key frame, file -> import to stage BUTTON!! f8 converti in simbolo alfa 0% f9 actions snippet di codice al clic ti reindirizza su un sito in una blanck page
LEZIONE 20/3 slideshow,div fissi slider jquery file javascript e cartellina img con immagini (stessa grandezza) in dreamweaver dobbiamo dire nell'head che ci sono file javascript. Questa parte cura l'aspetto ecc: <style> #slider { è il wrapper che contiene le foto width: 640px; height: 380px; padding:0; border:0; } #slider img {padding: 0; margin:0; border:0;} #slider img {padding: 0; margin:0; border:0;} #slider .clicker a {width:5px; height:5px; background: #fff; margin-right: 2px;} /*pulsantino di navigazione*/ #slider .clicker a.active {background: #F00;} /*quando è attivo, per indicare la foto che appare*/ </style> Questi sono i collegamenti ai javascript: <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="jquery.hslide.js"></script> <script> $(function(){ $('#slider').hslide(); }); </script> Nel body invece vengono inserite le immagini: <body> <div id="slider"><!-- parte che andremo ad inserire nel punto che ci interessa--> <div><img src="immagini/42-24145324.jpg"></img></div> <div><img src="immagini/42-24149257.jpg"></img></div> <div><img src="immagini/42-24152491.jpg"></img></div> <div><img src="immagini/42-24822205.jpg"></img></div> <div><img src="immagini/42-26700019.jpg"></img></div> </div> Su jqueryhslide.js si possono modificare le parti in rosso. Aumentando o diminuendo la frequenza. Per evitare di vedere su dreamweaver nel design le foto fuori dal div : nel css posso mettere un comando di overflow overflow:hidden;
DIV FISSI stanno incollati alla pagina. Barra in alto, barre laterali ecc. I div fissi stanno fuori dal wrapper!!! .divalto{ width: 100%; /*occupa tutta la pagina*/ height:50px; top:0px; /*margine da uno dei lati del browser, sarà quindi attaccato in alto a dx e a sx*/ left:0px; right: 0px; position:fixed; /*importante*/ background:#90C; } .divdestro{ width:50px; height:200px; right: 0px; position:fixed; background:#03C; top:35%; /*al 4o% perchè devi calcolare l'altezza*/ } DIV TRASPARENTE Su photoshop uso un quadratino trasparente come png e rendo il tutto trasparente. La scritta all'interno non viene intaccata in questo modo OVERFLOW es. testo dentro il div che esce. Overflow auto (barre di scorrimento) overflow hidden(taglia il testo)
LEZIONE 21/3 ISP Scegli nome dominio (es gioielleria...può essere rossi.com,rossi.it,gioielleriarossi.com ecc), al cliente vengono chieste tre proposte nel caso non siano disponibili i domini. Si possono avere sia il .com sia il .it così il .it reindirizza al .com. É conveniente comprare più estensioni possibili per non incappare in dittarossi.com (gioielleria) e dittarossi.it (produzione stufe) Usa il .com per legge ogni stato ha diritto ad un'estensione dominio. Più il nome dominio è specifico,meno dovremmo avere problemi di disponibilità. Avremo poi varie opzioni. Acquistiamo un dominio su uno spazio web. Esistono due tipi di hosting: -windows -linux(permette di effettuare molte più operazioni) gli internet service provider garantiscono un uptime (sito disponibile al 99%) Altro parametro per valutare un hosting è il servizio clienti. Per realizzare un sito dinamico con wordpress noi abbiamo a disposizione un database.(my sequel) Backup !!! importante Altro servizio utile sono le mail. Antivirus e antispam Statistiche!!! le dobbiamo impostare attraverso google an. E non attraverso aruba o altri. Dominio+redirect !!! e commerce è in crescita... ogni attività commerciale deve avere una pec posta elettronica certificata ed ha lo stesso valore di una raccomandata. WhoisPrivacy Kolst hosting condiviso le risorse del computer vengono condivise tra più persone.
GALLERIA DI IMMAGINI js css img images.nature (es) queste cartelle sono fondamentali <!--script necessari al funzionamento della galleria lightbox--> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <!--collegamento al foglio di stile del lightbox--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> immagine piccola link -> immagine grande <a href="../!LIGHTBOX/immagini_natura/grande_1.jpg" rel="lightbox"><img src="immagini_natura/miniatura_1.jpg" width="80" height="80" alt=""/></a> Navigazione tra una foto e l'altra (nome univoco) rel="lightbox [galleria1]" dice allo script che queste foto fanno parte dellastessa sequenza title="paesaggio capoverdiano"> questo attributo permette di inserire la didascalia
Consigli: 1) impara l'inglese 2) fai networking (tutti devono sapere quello che sai fare 3) conosci i cms(siti dinamici,wordpress,jumla,magento,concrete ecc) 4) gioca pulito(ritenuta d'acconto fino all'apertura della p.iva) 5) rimani aggiornato 6) dai un valore al tuo tempo (pochi,maledetti e subito. Niente gratis, mai.) 7) niente sconti 8) fatti aiutare 9) datti degli orari.non confondere notte e dì.esci di casa 10) 50% subito (se non hanno la prima metà non hanno nemmeno la seconda) 11) a ognuno il suo (commerciale) 12) sperimenta 13) costruisci le basi 14) venera il css (risolve molti problemi web) 15) mobile first!!! 16) sii responsive (siti web adattativi) (indicazioni nell'head, media query) 17) progetta su carta, in agenzia fa capire che abbiamo uno schema,un'idea di base 18) segui gli standard 19) web usability (far raggiungere le info nel modo pià semplice e veloce) 20) tipografia 21) clienti morosi (esame di coscienza) 22) gestisci lo stress 23) impara jquery (libreria di java script che permette di imparare animazioni ecc) 24) impara Bootstrap(un framework, una struttura da cui partire creato dagli inventori di twitter, sistema a
griglia completamente responsive, sicuro e compatibile con i dispositivi mobili) 25) punta sull'e-commerce 26) la manutenzione non è inclusa (determina la timeline e niente modifiche gratis) 27) contratto (DEVE ESSERCI SEMPRE) 28) sii social (molti lavori arrivano tramite fb o altri social) 29) attento ai dettagli 30) impara dagli errori 31) ama quello che fai 32) sii gentile ma deciso 33) !!!procuratevi un numero fisso 34) zero costi fissi (riducete i costi per la vostra attività,affitta le cose quando servono(movie)) 35) differenziate l'offerta (trucco è specializzarsi ma allo stesso tempo fare diverse cose) 36) ottimizza le immagini 37) design minimale 38) copia tutto e tutti (i mediocri imitano e i geni copiano) 39) testa i siti (provarli su diversi browser, diverse risoluzioni e diversi dispositivi)Rimani su
cose semplici 40) cross browser (mettili in condizione di vedere il tuo sito) 41) ricorda il seo (valore percepito: valore che le persone danno al tuo lavoro) 42) studia il codice !!! 43) affidati ad un buon hosting 44) impara i principi del design (gestalt, horror vacui) 45) belle fotografie (parte più impostante) 46) o bianco o nero per gli sfondi 47) un effetto alla volta 48) estendi firefox con strumenti utili allo sviluppo web 49) cerca su internet(leggi le offerte e capisci quello che serve)
50) trova un altro lavoro finchè non decolla l'attività 51) specializzati (guru) 52) niente icone bizzarre 53) concentratevi sui contenuti (qualità deriva da testo e immagini) 54) imparate a scrivere (ogni web designer dovrebbe essere anche copywriter) 55) less is more 56) barra di navigazione (meglio a sinistra) 57) NO sito in flash 58) tagline sotto il logo( tagline è un breve slogan sotto il logo, ampliate il significato con qualche pixel in
più, il logo può non essere esplicativo, allora specifichi e descrivi) 59) studiate i plugin (programma che estende...ce n'è uno per ogni cosa) 60) Backup!!! doppia copia di tutto il sito. 61) Conosci i social network(social media management, i clienti possono chiederti la gestione
delle pagine dei social) 62) reputazione online 63) statistiche web (studiale e impara a leggere i dati Google analytics) 64) potenzia la sensibilità(aiuta a vedere la bellezza) 65) capisci il cliente (scappate a gambe levate) 66) rifiutate i lavori 67) sii veloce ma non consegnare i lavori a tempo record 68) valuta il tempo lavorativo 69) valore percepito(fai capire che il tuo lavoro richiede un certo determinato impegno) 70) rimani open-source (usa software libero, quando possibile) 71) se ti fa risparmiare tempo comprala!!! (software template ecc) envato, cod canyon ecc 72) usa google web designer 73) web font SOLO per i titoli 74) css esterno SEMPRE 75) normalize.css serve a piallare gran parte delle discrepanze visive 76) W3C school 77) smashing magazine 78) favicon :) 79) niente musica sul sito, niente autoplay 80) testi sintetici(tenete conto dei mezzi di comunicazione) 81) puntualità (ed eleganza) 82) lasciate parlare il cliente 83) siate onesti su cosa sapete fare ammettere i limiti 84) siate coerenti nella grafica come nella vita ... 85) usare html standard h1, h2, h3... 86) meglio vimeo rispetto a you tube 87) mi prepari prima una bozza??? si ma dopo un compenso... 88) create killer content (articoli specialistici ed interessanti) 89) non siete soli !! parlate al plurale per non essere deboli (abbiamo un team al seguito) 90) incorporate (EMBED!! soundcloud ha uno streaming migliore del vostro) 91) Slide senza titolo! Ricordare di metterlo 92) Keywords e descrizione inserire sempre aiutano ad indicizzare 93) scegliete un .com 94) aprite un blog 95) portfolio online e .pdf avere degli screenshot e linguaggi usati 96) sfogliabili su issuu.com 97) il vostro sito web chiaro e pulito 98) c'è un generatore online per ogni esigenza 99) F12 100) Jakob Nielsen 101) investite in cultura 102) allenate il cervello
Oscon forma di contratto prestazioni occasionali, la legge le tutela con una tassazione a forfait con una percentuale annua Dati dei contraenti, bla bla bla tot 1250 ritenuta 250 imp: foglio siglato e firmato in tutte le sue parti contratto di fornitura: presa d'impegno da entrambe le parti Non possono mancare: dettaglio servizio, costi, modalità di pagamento, clausole(es. Materiali testuali e fotografici forniti dal cliente, causa di guasti il web designer non ha responsabilità), interventi eccedenti (cifra all'ora)... penale del ...% ogni giorno di ritardo di un pagamento. Allegare il preventivo al contratto. Tipologia servizio tempi consegna dettaglio del servizio modalità di pagamento tutela legale Per lavori piccoli 50% all'inizio, per gli altri (oltre 5000 euro) pagamento 90giorni. Bozza grafica (dalle 3 alle 5 bozze mostrate al cliente) POCHE BOZZE E UNA BREVE PRESENTAZIONE Farsi dare dei riferimenti 3 o 4 da altri siti. 100 euro a pagina Foto? Testi? Non andare sotto i 15-20 euro/ora
LEZIONE 26/3 WORDPRESS cms scritto in php che usa un database Nasce il 27/5/2003 Piattaforma software installata su server Scritto in PHP(permette di creare pagine dinamiche, linguaggio di programmazione interpretato, originariamente concepito per la programmazione di pagine web dinamiche, html è un linguaggio di formattazione e non program.)+database MySQL CMS(content management system) Click pubblica la pagina si aggiorna in automatico wordpress.org installazione personalizzata wordpress.com sito preinstallato es. Sito.wordpress.com, funzionalità limitate spesso i provider forniscono l'installazione"1click"(application installer) un'installazione un database. Wordpress ha una struttura molto flessibile. Applicazioni standard:
• e-commerce • siti aziendali • blog personali • notiziari • siti annunaci,forum ecc
Tutte le interazioni web che interagiscono con l'utente sono modificate in base alle domande dell'utente. Alcune applicazioni dinamiche con database:
• gestionali online • siti web • posta elettronica • form di contatta • motori di ricerca
Un cms è uno strumento software installato su un server web. Caratteristiche di wordpress:
• estensioni delle funzionalità tramite plugin • temi gratuiti • usa Url permanenti che aiutano il SEO • gestione delle categorie • editorWYSIWYG (what u see is what u get)per i testi (interfaccia tipo word ma
abbiamo anche la possibilità di modificare le parti) • si possono creare pagine statiche • supporto multi-autori • blocco di utenti in base all'indirizzo ip (gerarchia di utenti) • possibile specificare meta-tag • ecc.
Front-end : parte del sito visibile ai visitatori Back-end : parte amministrativa si accede con password Struttura PHP Aspetto CSS Contenuti HTML Temi e plugin il tema regolamenta tutto l'aspetto del sito... 5 o 5000 pagine... sono quasi tutti responsive e divisi per categorie I plugin sono piccoli script che permettono di espandere funzionalità di wordpress. I più utilizzati: .effetti grafici .SEO .sicurezza .widget .social e commenti Su wordpress noi possiamo far commentare l'utente Wp lavora sia con pagine statiche sia con pagine dinamiche( dette post o articoli) i post finiscono in una pagina speciale detta blog e sono ordinati per data. Wp gestisce l'upload dei media Diversi permessi Versione sempre aggiornata Wp è sicuro e ci sono anche plugin utili. É possibile creare più menù,effetti tendina widget( social,ultimi articoli ecc) Altri CMS: joomla(comunities)drupal(più esteso), concrete5, magento(per l'e- commerce), prestashop. http://portfoliogessicap.altervista.org/wordpress/wp-login.php è il login testo..html visuale..design custom css...possiamo modificare senza intaccare il css iniziale aspetto -custom css contatti – contact form tag-> servono soprattutto per il SEO
LEZIONE 27/3 Menù a tendina con dreamweaver http://cssmenumaker.com LEZIONE 28/3 HTML5 Non è ancora pronto, è in fase di sperimentazione.Ha introdotto il tag CANVAS Una sorta di zona al cui interno è possibile mettere qualcosa di multimediale. L'HTML 5 non fa le animazioni. L'HTML5 introduce il markup semantico (indica al browser che : quello è un header, quello un footer, quello un articolo ecc), in questo modo le ricerche si affinano. TAG audio: il contenuto della tag viene visualizzato solo nel momento in cui il browser non riesce a gestire il file audio. Associato a questo ci sono vari comandi (src,autoplay,loop,controls,preload) <audio controls="controls" preload="auto"> e poi vari formati mp3,mp4 ecc TAG video: simile al tag audio(in più ha altezza e larghezza,poster(immagine statica iniziale). Preferibilmente file mp4.
Recommended
