3 febbraio 2014 WEB DESIGN • “ RISORSE PRATICHE “ GESTALT: forma ( in tedesco ) corrente di pensiero, nata in germania tra l’800 e ‘900. se vediamo un gruppo di elementi, non li percepiamo come singoli elementi ma come insieme. Percezione. PRINCIPI DELLA GESTALT • SIMILITUDINE: quando un oggetto è simile ad un altro, essi vengono

percepiti come gruppo o pattern. possiamo evidenziare un elemento sfruttando una sua anomalia rispetto agli aspetti simili.

• CONTINUAZIONE: si ha una continuazione quando l’occhio si sposta un ad oggetto all’altro seguendo la direzione un un elemento grafico

• CHIUSURA: abbiamo una chiusura quando un oggetto è incompleto o ha spazi non completamente chiusi, ma tuttavia lo percepiamo chiuso. es. logo WWF

• PROSSIMITÀ: quando degli elementi sono posizionati vicini, essi vengono percepiti come un gruppo unico

• FIGURA E SFONDO: l’occhio umano differenzia tra un oggetto e il suo sfondo. giocare con questi due elementi crea molte possibilità grafiche.

ALTRI PRINCIPI DEL DESIGN: organizzazione degli elementi, divisi in ELEMENTI e CARATTERISTICHE e le loro sottocategorie • organizzare gli elementi • organizzare gli intervalli: la grafica si basa sull’organizzazione degli intervalli

tra gli elementi • bilanciamento del peso: rapporto tra dimensione e densità. un colore scuro

ha più peso di uno chiaro. tanti elementi sono difficili la bilanciare • combinazioni armoniche: • * (monocromatica) PRO: facile da controllate e risulta equilibrata. CONTRO:

non ha contrasto, non ha profondità, stacco tra bianco e nero • * (analoga) PRO: più ricche della monocromatica. CONTRO: mancano di

contrasto • * (colore complementare) PRO disegnano l’attenzione massima. CONTRO:

duro da equilibrare • * (triangolare) PRO: alto contrasto e armonia. CONTRO: non come

complementare • colori simili per indicare una relazione • ricordarsi delle connotazioni sociali dei colori. es. colori della bandiera =

patriottismo • ritmo: ripetizioni di elementi • semplicità: non usiamo grafiche inutili • icone per rappresentare i concetti. es. lampadina per rappresentare i

concetti • contrasto e leggibilità: usare colori che hanno il maggior contrasto possibile

per migliorare la leggibilità

FONT ( CARATTERI ) esistono 2 grandi famiglie di font: graziati (serif = graziati) usato più per la tipografia e senza grazie (sans serif = bastoni) usato più per il web • comic sans: usato per i bambini con meno di 11 anni, tono divertente,

informale !!! KULER.ADOBE.COM = comunity di designer che condividono le loro palettes di colori, fornisce il codice colore in esadecimale HEX !!! WEBDESIGNER: disegnatore dello spazio web, spazio estetico HTML: hyper text markup language, linguaggio di formattazione di hyper testi. serve per creare una struttura tecnologica per mostrare su internet alcuni contenuti. MULTIMEDIA: contenuti online di tipo video - testo - immagine BROWSER: software che traduce il linguaggio html in qualcosa di visibile. traduttore ( internet explorer, chrome, safari, ecc ) ogni modifica che apportiamo in html ha una corrispondenza del browser nell’anteprima visiva DREAMWEVER: (tessitore di sogni) editor visuale. URL: unique ressource locator (indirizzo). all’interno dello stesso dominio (nel mondo di internet) 2 documenti non possono occupare lo stesso posto con lo stesso nome REGOLE FONDAMENTALI PER IL WEB • Si usa l’allineamento a bandiera a sinistra • Nel web design lo sfondo deve essere o bianco o nero. questo offre la

massima visibilità. • Il vuoto da significato ed enfasi agli elementi, il vuoto è più importante del

pieno • usare le icone che non lasciano agli utenti margine di interpretazione es.

icona di Facebook, home, contatti ecc • sul web si cerca di evitare il corsivo perché inclinato quindi difficile da

leggere a causa dei pixel • non unire più stili di carattere es. corsivo + grassetto UNA PAGINA WEB è FORMATO SOSTANZIALMENTE DA 3 TAG: "HTML" CHE RACCHIUDE "HEAD" E SUCCESSIVAMENTE “BODY” • NELL’ “HEAD” vengono inserite tutte le metainformazioni che non si vedono

ma sono importanti per i motori di ricerca ad es. TITLE , DESCRIZIONE E PAROLE CHIAVI DEL SITO, SCRIPT (es. monitora gli accessi al sito) CODICI PER LE STATISTICHE O PER DETERMINATI EFFETTI

• BODY è la parte visibile e grafica del sito • DESCRIZIONE DI PAGINA: (description) un centinaio di caratteri che

descrivano il contenuto del sito • PAROLE CHIAVE: (keywords) parole che permetteranno di al motore di

ricerca l’indirizzamento al sito. ( parola, “spazio” parola 2, “spazio” ecc )

• TAG COMMENTO: < !- - permette di inserire un commento che non visibili se non nel codice - - > ( senza spazi )

• INDEX: tag che identifica tutte le home page di tutti i siti del mondo

4 febbraio 2014 WEB DESIGN estensioni di dominio che ricordano la provenienza geografica( .it, .es, ecc) o più generico. ( .com, .net, .gov) lo spazio web è un “hard disk” mette a disposizione un dominio gratuito o a pagamento. Internet è sostanzialmente è uno spazio SERVER in un computer affittati dai PROVIDER (aziende che affittano spazi web) che vendono un dominio. HOME PAGE DEL SITO: index.html REGOLE PER SALVARE ONLINE. i file/domini devono essere, per problemi di leggibilità dei browser. • senza spazi • non devono contenere simboli • devono essere preferibilmente in minuscolo COME CARICARE IL SITO IN LOCALE SU SERVER ONLINE dobbiamo utilizzare programmi CLIENT FTP (file transfer protocol) es. filezilla programma che che suddivide lo schermo del nostro pc in due schermate (nostro pc / pc server) semplicemente trascinando i file sul server possiamo caricare online il nostro sito web. il “FILEZILLA CLIENT” per funzionare ha bisogno di: • HOST, USER, PASSWORD clicca su CONNETTI TRUCCO PER CARICARE PIU FILE NELLO STESSO SPAZIO WEB • creare diverse cartelle con nomi diverse (in minuscolo senza spazi) • normalmente ad un dominio corrisponde 1 sito una volta caricato il file, andare su internet e digitare: http://www.effedesigngrafiche.altervista.org/esercizio-tag/ (cartella contenente il file) SITO STATICO: realizzato con html, per aggiornare un sito statico, bisogna sovrascrivere il file. ( aprire dreamwever, modificare la pagine index, e ricaricarla su filezilla) SITO DINAMICO: compilato in PHP, le info non vengono salvati in DB (server esterni) e il sito viene modificato e costruito direttamente online. SITI ANIMATI: sito costruito in html o php e gli effetti vengono creati con javascript (foto che si ingrandisce, ecc) ARCHITETTURA DEL WEB: • PERTESTUALITA: hyper testo, cliccando su quella voce, andiamo ad aprire un altra

pagina che approfondisce quella voce. COLLEGAMENTO DI PAGINE HYPERTESTUALI DI DEFAULT; i link visitati in dreamwever sono di colore viola, gli hypertesti di default sono di colore blu COLLEGARE 3 PAGINE HYPERTESTUALI TRA LORO: • HREF: è sempre il tag per i collegamenti • assegnare alla parola (selezionandola)

• andare alle “properties” e assegnare il link al file che si deve aprire quando si clicca sulla parola

PROPRIETA DI PAGINA DI DREAMWEVER (cmd+j) • modificare le proprietà delle Appearance (css) • modificare Link (css) • modificare le proprietà di sottolineatura, quando ci passi sopra, ecc. CSS: cascade style sheet (fogli di stile a cascata), gestisce l'aspetto HTML: gestisce i contenuti, immagini, testi ORGANIZZAZIONE CARTELLA DI LAVORO SITO WEB: • creare una cartella “sito1” • creare una sottocartella in sito1 “IMG” contenente le fonti grafiche • index.html • video.html • ecc.html La TESTATA, MENU E FOOTER del sito devono restare uguali per tutte le pagine. • misure standard del sito: 960 larghezza, altezza dipende dal contenuto COME FARE IL SITO1 (1 colonna e 5 righe) insert, table • * border thickness (bordo) immettere un valore • * padding: distanza che intercorre tra il bordo e l’elemento • * spacing: distanza tra le celle modificare la dimensione delle celle, cliccandoci sopra col mouse IN UNA RIGA POSSIAMO INSERIRE ALTRE CELLE (insert - table) • PER IL WEB SI LAVORA CON UNA RISOLUZIONE A 72ppi o 96ppi • SALVA PER WEB: versione jpeg ottimizzata più leggera e senza perdita di

qualità INCOLLARE TESTO DA INTERNET SENZA FORMATTAZIONE ( tasto destro mouse - paste special ) INCORPORARE ELEMENTI MULTIMEDIALI: condividere il video che vogliamo incorporare, prendiamo il codice e lo incolliamo nel codice html tra ( <td> e </td> ). ALLINIEAMENTO DEL TESTO NELLE CELLE: ogni cella ha un allineamento proprio per il testo ( hort - vert ) scegliere quindi il tipo di allineamento. di default l’allineamento è al centro della cella.

5 febbraio 2014 WEB DESIGN # : mostra l’anteprima di come verranno i link INVIO: a capo con salto di paragrafo SHIFT + INVIO: a capo senza salto di paragrafo COLLEGARE UN COMANDO DI "INVIO MAIL”: • selezionare l’indirizzo email “comando Mail to” • nella casella HTML, sezione LINK • scrivere: mail to: indirizzomail@.ecc SITO RESPONSIVE (ADATTABILE ALLO SCHERMO): • file - new html • creare una tabella ma con dimensioni in percentuale • quando salveremo il file “responsive” possiamo visualizzarlo sui diversi

dispositivi, simulando la visualizzazione con “WEB MASTER TOOLS” INCORPORAMENTO "MAPPA NAVIGABILE" • andare su google maps • cliccare sul simbolo della “CATENA" • copiare il link sul linguaggio html — SE SALVIAMO PER WEB UNA IMMAGINE “IN FORMATO PNG", LASCIANDO LO SFONDO TRASPARENTE, QUANDO LO INCORPORIAMO ALLA PAGINA WEB, AVREMO UNA IMMAGINE SCONTORNATA.

6 febbraio 2014 WEB DESIGN PHOTOSHOP, TAGLIARE IMMAGINE A … PIXEL x … PIXEL • dalla barra, selezionare “style” • fixed size, quindi immettere le misure • cliccare sull’immagine, photoshop creerà una selezione , successivamente taglieremo

l’immagine FORMATI PER WEB: • JPG: si usa per le fotografie • GIF: si utilizza per elementi grafici che non hanno particolari sfumature, si usano per

bottoni, icone, ecc • PNG: per importare delle immagini scontornate su internet (PNG-8: per gli elementi

grafici, PNG-24: per le foto scontornate) ROOL - OVER IMAGE immagine che al passaggio del mouse, cambia... • creare 2 foto, a.jpg (senza scritta) e b.jpg (con la scritta) • su un documento in Dreamwever, cliccare su ( insert - image object - rollover image • immettere: original image (senza scritta), rollover image (con la scritta) e l’URL

(reindirizzamento a indirizzo per quando cliccheremo sull’immagine) QUANDO CREIAMO UN ROOLOVER, IL SOFTWARE CREA UNO SCRIPT ALL’INTERNO DELL’ HEAD SELF: i link interni al sito si aprono nella stessa scheda di navigazione BLANK: quando sono esterni, tende a farli aprire in una nuova scheda • selezionare il testo e inserire il link (inserire dominio assoluto; http:// ecc) • su target selezionare su _self o _blank. se non mettiamo nulla, lo apre di default nella stessa

scheda. • *LANDING PAGE: pagina in cui di arriva, quando si clicca su un banner (pagina di

atterraggio) • * DEM: impaginazione delle news letters (pagine pubblicitarie inviate per posta

elettronica) STILI DI TESTO A CASCATA (CSS): documento con estensione .css al cui interno impostiamo delle regole che determinano l’aspetto del sito per tutto ciò che riguarda, fonti, colori, bordi, box, arrotondamenti dei bordi, ecc. • i codici dei fogli di stile, appaiono nel tag “head” all’interno dei tag “style” FOGLIO DI STILE INTERNO: quando le modifiche vengono applicate ad una sola pagina FOGLIO DI STILE ESTERNO: (style.css) le modifiche applicato a questo file, le modifiche vengono applicate a tutte le pagine. si crea solo quando abbiamo un certo numero di pagine. MODOFY - PAGE PROPERTIES - HEADINGS (CSS) è più conveniente lavorare impostando il titolo più grande (H1) fino ad (H6) che è il più piccolo dei titoli. dopo il titolo H6, ci sono i testi. UN FONT NORMALE SUL WEB VA DAI 12 AL 14 pixel } h1 { font-size: 36px;

color: #333; H1: selettore , font-size:36px; regole del selettore SINTASSI DEL FOGLIO DI STILE: • nome (proprietà: valore; proprietà: valore; ) CSS3 GENERATOR.COM : GENERA I CODICI PER LE OMBRE DEI TESTI • FIREBUG (SU FIREFOX) : PERMETTE DI ANDARE SU INTERNET

E VEDERE IL CODICI HTML E CSS DI TUTTE LE PAGINE INTERNET, E IN TEMPO REALE DI MODIFICARE QUALCOSA E VEDERE ISTANTANEAMENTE LE MODIFICHE APPORTATE.

7 febbraio 2014 WEB DESIGN lsottocorno@newpeopleteam.it (con scansione attestato vecchio x esonero DIV: elementi html all’interno del tag <div> </div>, senza forma e senza colore a cui potranno essere associate delle proprietà attraverso regole CSS. il div è con un rettangolo vuoto a cui si possono associare regole come: carattere particolare, larg max - larg min, sfondo, ecc. • Creando i Div creaimo un box model. BOX MODEL: è un layout creato dai Div il comando è ( INSERT - LAYOUT OBJECT - DIV TAG) • CLASS: regola. se mettiamo il punto prima della classe, lo possiamo associare a più

elementi. Quando si applica ad un TAG, è possibile applicarlo in generale, mentre con le CLASSI, possiamo applicarlo a più elementi della pagina, ID invece lo applichiamo ad un singolo elemento. x tag : generale .class: lo applichiamo a più più elementi #id: 1 solo elemento e non può essere ripetuta. • Quando applichiamo una classe al div, diventerà: <div.class….> 1. quando si crea un sito, bisogna realizzare in div contenitore che delimita nella sua interezza

il sito web, WRAPPER (avvolgitore) che avrà al suo interno tutti i vari Div. Quando si lavora con i div, si lavora in pixel, le misure sono fondamentali.

2. padding, margine e bordo fanno spessore; quindi devo sottrarlo dalla misura totale che non dovrà mai essere superata.

3. quando devo affiancare un certo numero di div è sempre opportuno creare un box secondato che li racchiude tutti WRAPPER secondario, in cui saranno contenuti tutti i box

4. ogni div va commentato per non dimenticarci in caso di modifiche successive. il Wrapper secondario che contiene altri div, in html viene tradotto in: <div> <div2> </div2> </div> commentare ogni apertura e chiusura dei div con: < !- - ….. - -> 1. aperto il INSERT DIV TAG 2. new CSS RULE (css, class: .wrapper) 3. CSS rule definition for. wrapper • type: font e tipografia • background: sfondi, colori di sfondo,ecc • block: tutto ciò che riguarda i blocchi di testo ( spaziatura, ecc.) • box: dimensioni box, padding (bordo interno), margin (margine esterno),

FLOAT: dove si deve appoggiare il blocco div generalmente a sinistra (destra, sinistra, ecc), CLEAR: liberare. se ha valore “left” significa che il box non vorrà nulla a sinistra quindi tutto il resto finirà sotto. “clear both”

su quella linea rimane da solo sia da destra che da sinistra. 4. l’unico modo per allineare un Div è al centro è metterli margine destro e

margine sinistro automatico. “margin: 0auto” da destra e sinistra, deselezionando “same fon all”

5. unico modo per allineare un div al centro in verticale è impostare il PADDING TOP: es.10p - PADDING: es 10px - HEIGTH: auto

6. PER MODIFICARE I DATI GIA IMMESSI, INTERVERREMO DAL CODICE. COMMENTI IN CSS: sintassi /* COMMENTO */ BARRA DI NAVIGAZIONE: impostare l’altezza automatica in modo che la nostra barra si adatterà alla misura dei pulsanti che andremo ad inserire.

11 febbraio 2014 ESTENSIONI. FIREFOX • dummy lypsum (generatore di testo) • fire bug (modifica elementi css in tempo reale) • measure it (righello online) • awesome screenshot (istantanea della parte visibile + testi, frecce ecc) • wappalyzer (quando accediamo ad un sito, riconosce con che tecnologia è

stato fatto) CREAZIONE CLASSE ESEMPIO (ridimensionamento immagine) • nel tag <head> inserire la seguente regola style css <style type="text/css"> .immagine_text {width:100px; height:100px; } </style> • cliccare sulla foto, e applicare la classe • l’immagine si ridimensionerà automaticamente contro: ridimensiona ma non elimina il peso come farebbe photoshop COMANDO. “:hover” comando che ci permette di regolare le proprietà dell’elemento quando ci passo sopra con il mouse • • .immagine_text:hover {ecc;} WWW.CSS3 GENERATO.COM sito internet per generare i codici css da copiare nel codice all’interno del tag <style type="text/css”> e </style> REGOLA OPACITA’: • creare una regola “ .immagine_opaca “ • {opacity: 1(visibile), 0 (trasparente; 0.5(semitrasparente) } • se noi mettiamo l’opacità ad un div, tutto ciò che sta dentro diventa opaco. BOX SHADOW: proprietà che permette di aggiungere una ombreggiatura ad un box o immagine TEXT SHADOW: ombreggiatura per il testo (esclusivamente per titoli) MAX-WIDTH: immagine che si adatta ma fino ad un certo numero di pixel • width: 100% • height: auto • max-width: es. 500px

12 febbraio 2014 GOOGLE WEB FONTS: raccolta di fonts online che possono essere incorporati nei progetti web. la più importante è “google web fonts”. • si utilizzano esclusivamente per i titoli. font particolari e birrari • cliccando si “word” possiamo vedere l’anteprima della nostra parola con quel web font PER INCORPORARLO: • inserire un codice nell’ head • creare una classe che dica: font family … nome del font • cliccare su QUICK USE • inserire il link all’interno dell’ HEAD nel codice html nella pagina <link href= .. ULTIMO PASSAGGIO: • integrare nel nostro codice CSS la regola : font-family: “nome font”, corsive

o altro (es. ) <head> <!-- FONT 1 --> <link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'> </head> <style type="text/css"> .titolo1 {font-family: 'Jolly Lodger', cursive; font-size:100px;} </style> ° DIV FISSI (CHE RESTANO INCOLLATI ALLA PAGINA) utili con barre di navigazione fisse durante lo scrolling. • dal pannello (ctrl+j) da box e positioning, si gestisce tutto. • positioning - position - fixed (barra fissa) - placement - top 0px (attaccato in

alto) ◦ IL DIV FISSO, VA FUORI DAL WROPPER (parte che scrolla) (controllare che non ci siano div nell’head che non centrano nulla) FILE CSS. ESTERNI: se io cancello qualcosa nel codice HTML non influenzo tutte le pagine, se cancello qualcosa nel CSS ESTERNO, cambio il contenuti di tutte le pagine che utilizzano quella regola csss.

13 febbraio 2014 (zonkvolta@gmail.com) inviare appunti (sito) ENVATO: sito con collegamenti ad altri siti che permettono di scaricare template e altri applicativi modificabili, effetti /script, video, colonne sonore, illustrazioni grafiche, foto. 1. LIVELLI DI SPECIFICITà DELLE REGOLE CSS: • tag (non preceduta da punteggiatura) livello più alto di generalizzazione. ridefiniamo le

regole applicate a tutta la pagine; es body: {background-color:#fff} • classi (precedute da un punto) .body • id (precedute al cancelletto) #body, ridefiniscono la pagina • ridefiniscono il comportamento del browser (precedute da un asterisco) es: * {padding:0;

margin:0;} IL FOGLIO DI STILE “normalize.css” (scaricabile da internet) contiene tutte le regole per ridefinire tutte le differenze tra i vari browser. incollarlo nel nostro codice html sotto title. <link href= “ ecc “ > 1. IMAGE MAPS: link solo ad un’ area della foto. aree sensibili su cui passando col mouse si

può accedere al link. si può linkarla solo una porzione dell’immagine. - inserire la foto - cliccarci sopra - MAP - selezionare la forma desiderata (rettangolare, ellittica o poligonale) - possiamo quindi associare il link all’ hotspot nella casella link) - decidere il “target” (se la pagina di apre in un’altra pagina _blank, o nella stessa)

1. PUNTI DI ANCORAGGIO: link interni alla pagina. • creare del testo • creare un indice • menù: insert - named anchor - inserire il nome dell’ancor point • l’ancora va inserita nel punto in cui dovrà portarci il link ciccato SINTASSI ANCHOR: <p><a name="sezione1" id="sezione1"></a>sezione1</p> . comando il html per mettere un ancora all’interno di una pagina, dove c’è questa stringa, c’è un punto che può essere collegato • selezioniamo la voce dell’indice e assegnamo un link • nella sezione link: #nome sezione GLI ELEMENTI DELL’ANCORA SONO: 1. il nome scritto in minuscolo 2. la porzione del link #nomesezione CREARE UN’ ANCORA “TOP” PER TORNARE A PIè PAGINA PER MAGGIORE PRATICITà. • creare un’ancora all’inizio della pagina • creare un link accanto ad ogni sezione della pagina • collegare il link (selezionando la parola o icona) all’ancora “top”

SCOLL MORBIDO: tornando su, lo scroll fa vedere il movimento della pagina. • copiare un codice (javascript) sotto il titolo, l’effetto però non sta nel codice

ma da 2 file esterni (src= …) link di javascript • copiare i file “js” nella cartella principale del sito in cui dobbiamo incollare il

codice javascript • copiare e incollare nella cartella di lavoro, i file necessari per far funzionare il

codice “js” • codice da copiare e incollare all’interno dell’ head, bisogna stare attenti

quando vediamo “src” che il percorso del file sia corretto.

14 febbraio 2014 SLIDE SHOW 1. creare un cartella in cui inseriremo i 2 file java script con le opzioni di slide show • inserire le immagini nella stessa cartella di lavoro 2. copiare nell’ head, sotto "title"tutto il tag <style> css. es. <style> #slider { width: 640px; (dimensione immagine) height: 380px; (dimensione immagine padding:0; border:0; } #slider img {padding: 0; margin:0; border:0;} #slider .clicker a {width: 11px; height: 11px; background: #fff; margin-right: 2px;} (PULSANTINO BIANCO) #slider .clicker a.active {background: #ff0;} </style> • successivamente, sotto <style>; copiare i 2 file .js <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="jquery.hslide.js"></script> <script> $(function(){ $('#slider').hslide(); }); </script> 3. nel body inserire un div ( <div id="slider”> ) all’interno del quale andremo ad inserire tanti

div singoli che conterranno ogni singola immagine dello “slide show” <div id="slider"> <div> <p><img src="immagini/42-24145324.jpg"></img></p> <p>&nbsp;</p> </div> <div><img src="immagini/42-24149257.jpg"></img></div> <div><img src="immagini/42-24152491.jpg"></img></div> </div> <br /><br /><br /> <br /> note: è possibile scaricare altri script per slide show con altri effetti. note: i file java e pagina html devono essere contenuti nella stessa cartella • PSEUDO CLASSI CON I LINK: regola css che si applica solo in determinati contesti. es link di colori diversi all’interno della stessa pagina. prima del nome della regola, anteporremo una “a” es. a.bottone_rosso {a; b; c;}

per effetto rollover es a.bottone_rosso:hover {solo ciò che cambia} • TASTO LIKE PER I SOCIAL 1. sul motore di ricerca es. google, digitare “ Like

Button - Facebook Developers” 2. si aprirà una pagina in cui cancellare il contenuto di “url to like”, scegliere il

layout che più ci piace e successivamente cliccare “get code” 3. all’apertura del <body>, copiare il codice JAVASCRIPT SDK che ci verrà

dato dal sito 4. copiare il codice del plugin nel div che conterrà il nostro tasto like

17 febbraio 2014 IMPORTANZA DI FARSI TROVARE “S.E.O." • GOOGLE WEB MASTER TOOLS: strumento per segnalare a google che il tuo sito

“esiste” manualmente (submit manuali), segnalare i vari problemi, comunicare le keywords, ecc.

• VERIFICA CONTROLLO E MANUTENZIONE: errori http - errori di contenuti • ANALIZZARE L’ANDAMENTO DEL SITO: google ci mette a disposizione alcuni

strumenti come “analytics”. se il nostro sito raggiunge il 30% significa che il sito funziona e viene trovato dal motore di ricerca

• RICERCA ORGANICA - RISULTATI SPONSORIZZATI: quando effettuiamo una ricerca su google ci appaiono i risultati della ricerca organica, in alto e a destra della pagina google ci darà i siti sponsorizzati (pagati a google per “essere messi in vetrina” decidendo con quali parole farci trovare ADWORDS)

• AREE DI INTERVENTO: decidere il nome dominio, nome delle varie pagine, ridurre i contenuti ajax (linguaggio che permette di effettuare modifiche ad una pagina senza riaggiornarla, es. javascript), semplificare la navigazione, informazione, affiliazione ad altri siti (scambio di link), utilizzare i tools di monitoraggio e analisi

• PAGE RANK OTTIMALE: scegliere parole chiavi valide e cercare di farsi lineare da siti autorevoli.

IMPORTANTI SONO I METATAG: • TITLE titolo della pagina, inserito nel <title> (titolo contenuto + categoria + titolo del

sito), lunghezza massima 80 battute, le parole che appaiono prima hanno un peso maggiore, le keywords di riferimento vanno ripetute massimo 3 volte. devono essere comprese tra due virgolette ed essere separate da un virgola e spazio.

• CONTENT <meta content= descrizione della pagina nell’ head. massimo 150 battute. • KEYWORDS <meta content= … name= “keywords”/> parole chiavi inserite sempre nell’

head, massimo 10, le parole inserite prima hanno un peso maggiore URL • utilizzare url testuali - pianificare gli url in fase progettuale - utilizzare gli url rewriting

(permettono di sostituire parametri numerici o simbolici con keywords) MENU E NAVIGAZIONE • utilizzare i menù testuali • massima usabilità (minor numero di click possibile per raggiungere il risultato) • breadcrumbs: mappa che indica al visitatore in che area specifica si trova all’interno del

sito CONTENUTI • testi non troppo brevi • con google master tools possiamo ricevere dei suggerimenti in merito • verificare quali siano i termini più ricercati per il tema trattato • utilizzare le intestazione da h1 ad h6 perché google sa già che gli “h1, h2, h3, ecc” sà già

che si tratta di titolo, sottotitolo, ecc, quindi velocizza il caricamento della pagina • evitare di mostrare contenuti testuali tramite flash o immagini perché google non sa leggere

i contenuti delle immagini (inserire nel tag della foto le informazioni che permettono a google di capire il contenuto della foto) max 30 battute /testo alternativo - sfruttare

il nome del file che deve essere più preciso possibile CONTROLLARE L’ACCESSO AL SITO “crawling" • è importante “nascondere" ai motori di ricerca alcune pagine • proteggere il sito dai link spam inseriti dall’utente tutto questo è controllabile attraverso alcuni strumenti come: • robots.txt • nofollow • meta tag • antispam FEED RSS (ready simple semplification) funzionano con i siti dinamici. • permettono di “abbonarsi” soltanto ad alcune categorie di un sito per cui l’utente riceverà

una mail quando il sito aggiungerà contenuti riguardanti quella categoria… aumentando così la fidelizzazione al sito

21 febbraio 2014 WWW.UDEMY.COM (video lezioni online per corsi vari) MENU’ DI WORDPRESS: gestisce tutto cio che avviene nella barra dei menù. Dal “menu structure” possiamo decidere quali sotto cartelle avranno le nostre voci dei menù, possiamo inserire un link esterno. • wordpress ci dà la possibilità di inserire più menù anche inserendolo come widget “menù

personalizzato” quando il tema non offre la possibilità di aggiungere più di un menù, tramite “MANAGE LOCATIONS”

• possiamo creare dei "menù a tendina” creando sottocategorie all’interno delle pagine principali, semplicemente spostando con il mouse le barre delle varie voci di menù.

1. Aspetto - menù - create new menù - “nome del menù” - crea manù - selezionare le categorie etc. , creare i link, creare tutto quello che deve comparire nel menù ed eventualmente annidarli

2. widget - trascinare la barra “menù personalizzato” nell’area desiderata - inserire il titolo - selezionare il nome del menù che vogliamo far comparire nella “side bar / barra laterale”

THEME OPTIONS: opzioni strettamente legate al menù scelto. possiamo scegliere il colore dello schema, il colore dei link e il default layout (posizione della barra laterale) Le ultime versioni di wordpress, mantengono in memoria i widget che avevamo preimpostato prima delle modifiche, quindi se vorremo, potremo ritornare ad avere le barre laterali con i widget. DALL’EDITOR DEI TEMI, possiamo modificare i file .css , .php, etc. ARTICOLI: quando inseriamo un nuovo articolo, finisce nella home page di defalult. possiamo impostarlo diversamente selezionando “pagina statica” invece di “pagina dinamica”. PAGINE: le nuove pagine vanno a finire nell’elenco delle pagine statiche. PAGINE IN WORDPRESS: • appena creiamo una pagina, wordpress ci crea immediatamente un URL.

Possiamo scrivere un titolo e copiarlo nel “permalink”. MEDIA: • INSERT MEDIA: selezionando una immagine dalla cartella delle nostre foto,

possiamo trascinarle sulla nostra pagina in wordpress così da copiarle. wordpress per “media” intende tutti i file immagini, video, pdf, audio ecc e li sposta in “libreria media”. cliccando si “articoli” - “tutti gli articoli”, wordpress ci crea una bozza dell’ultimo articolo in creazione. cliccando su “modifica” possiamo rieditarlo e tramite il comando “aggiungi media” possiamo inserire l’immagine nel nostro

articolo. SETTAGGI MEDIA FILE: sulla destra della schermata ci sono le opzioni di modifica delle immagini. wordpress ha 3 opzioni di miniatura delle immagini per inserirle nell’articolo in preview. una volta caricata l’immagina nell’ articolo bozza, cliccando sulla foto possiamo rieditarla e decidere la grandezza ecc. VIDEO: cliccando su “text” all’interno dell’articolo, possiamo recuperare il codice del video e incorportarlo nel nostro articolo FORMATO ARTICOLI: possiamo decidere i vari tipi di formato dell’articolo. possiamo scegliere tra standard (testo e immagine), digressione (video), link, etc. CATEGORIE: possiamo decidere direttamente in che categoria andrà a finire il nostro articolo, anche creando una nuova categoria. ESERCIZIO WORDPRESS IN ITINERE: 1. tema (modificare l’aspetto) 2. pagine 2/3 (con incorporamento) 3. menù di navigazione del sito 4. personalizzazione 5. blog? -> creare pagina articoli che sarà il contenitore per il blog 6. inserire alcuni widget PLUGIN DI WORDPRESS: piccoli programmino che permettono di estendere le potenzialità di wordpress; es. plugin per slide show, plugin per lite box, plugin per condivisione, etc. “NON C’è NULLA CHE UN PLUGIN NON POSSA FARE" scaricato il plugin, bisogna configurarlo. IMPOSTAZIONI DEL SITO IN WORDPRESS: • GENERALE titolo del sito - motto del sito - etc • STRUTTURA formattazione dei simboli - formato articolo - destinazione

articoli senza categoria • LETTURA impostare la pagina iniziare blog/statica, numero articoli per

pagina • DISCUSSIONE consentire o non la scrittura di commenti per i nuovi articoli -

moderazione del commento • MEDIA dimensioni per miniature • PERMALINK sintassi per il salvataggio dei nuovi articoli (usare: nome

articolo o data e nome)

20 febbraio 2014 SISTEMI DI GESTIONE DEI CONTENUTI (CMS content management system) sistema di gestione dei contenuti i CMS sono software “lato server”, non sono istallati sul nostro pc ma sul server (spazio web che abbiamo acquistato) al nostro cms “punta” un nome dominio. (il cmd consiste in una serie di cartelle contenenti file con estensione .php e estensione .css) all’interno di un sito dinamico tutte le informazioni vengono stoccate in un database (SQL). TUTTO L’AGGIORNAMENTO AVVIENE ONLINE (non serve l’editor di testo o dreamweaver) ciò che differenzia il sito statico da un sito statico oltre a file php (contiene una serie di comandi che riportano all’informazione che ci serve) e css, TIPI DI CMS i più famosi sono “open source”; costantemente aggiornati per ottenere prestazioni migliori • oggi il cms lavora meglio degli altri su specifici utilizzi e gestione di contenuti es. per l’

E-commerce useremo “magento - opencart”. ogni cmd ha un utilizzo specifico ma la gestione è simile.

per accedere ad un contenuto bisogna avere delle credenziali di accesso su scala gerarchica; dall’ amministratore all’utilizzatore finale. senza le credenziali d’accesso neanche l’amministratore può modificare il sito che è già online. IL “CMS” SI DIVIVE IN: (quando modifichiamo il “cms” minimo dobbiamo avere aperte 2 finestre; 1 per le modifiche e 1 per la visualizzazione dell’utilizzatore) • FONT - END: visualizzazione dell’utilizzatore finale • BACK - END: pannello di visualizzazione per le modifiche e comunque visualizzabile

soltanto da chi ha le credenziali d’accesso. possiamo aggiungere plugin (aggiunta contenuti multimediale, eliminazione di articoli e pagine)

CONTENT MANAGER: colui che inserisce gli articoli aggiornati e originali all’interno del sito dell’azienda WEB DESIGNER: (designer dell’informazione) bilancia il design (10%) all’informazione (90%) WORDPRESS “content is the king” tutto è concentrato sull’informazione testuale e sulle informazioni fotografiche WORPRESS (nasce come blog ma diventa un complessissimo gestore di contenuti) è un creatore di siti web (cms) e blog software. Il blog è un cms che ci permette di pubblicare articoli in ordine cronologico, quello più recente, sta in alto.

su Wordpress.com (gratuito) ci si iscrive, possiamo gestire il nostro sito senza però poterlo personalizzare tanto. per creare un sito web in wordpress abbiamo 2 possibilità: 1. creare un sito su www.wordpress.com avendo una versione preistallata con limitate

possibilità di personalizzazione 2. scaricare da wordpress.org un software da istallare sul nostro pc e configurarla noi QUANDO ACQUISTIAMO IL NOSTRO SPAZIO WEB, dobbiamo ricordarci di acquistare 1. nome dominio 2. spazio web 3. data base MYSQL se non acquistiamo il data base non possiamo istallare wordpress. NOTE: quando acquisteremo il nostro dominio (30-40 euro annuali) comprare quello per LINUX (più prestante rispetto a windos) WORDPRESS ISTALLAZIONE MANUALE: • decomprimere la cartella .zip • caricarla sul nostro server • si apre una pagina in cui inseriremo dei dati che ci saranno consegnati al momento

dell’acquisto WORD APPLICATION ISTALLER: • quando acquistiamo il nostro spazio web (es. aruba) • controllare se il sito del nostro spazio web abbia già i file application di wordpress PERCHE’ USARE WORDPRESS: • è open source, semplice da utilizzare con internet 1.0 l’azienda imponeva dei contenuti e l’utente non poteva interagire con l’azienda con internet 2.0 l’utente è allo stesso livello dell’azienda e l’azienda attraverso campagne di comunicazione coinvolge il cliente. L’utente attraverso i commenti feedback può decretare il successo o il fallimento di una azienda. Tutto questo non sarebbe possibile se non ci fossero i database. Attraverso i CORPORATE BLOG le aziende coinvolgono i clienti. • wordpress lo usano le testate giornalistiche, aziende piccole e grandi e utenti comuni • nasce come blog ma poi diventa CMS (gestione di contenuti e aggiunta di estensioni) quando istalliamo wordpress, abbiamo il “blog sterile" ma con l’istallazione di plugin possiamo istallarci i “temi; plugin per e-commerce, plugin per visualizzazione mobile” TECNOLOGIA WP: è scritto in PHP (linguaggio di formattazione e non di “style”) qualsiasi sito “dominio".com se ci istallo il wordpress, vado su: • “dominio”.com/wp-login.php (si apre la pagina di back end) pagina per

modificare i contenuti • “dominio”.com/wp-admin.php (si apre la pagina di admin) pagina per creare

la struttura del sito DASHBOARD - LA BACHECA: pagina iniziale in cui possiamo monitorare il sito (commenti, articoli, ecc) POSTS - ARTICOLI:

• possiamo inserire nuovi articoli (post) che vanno a finire un una pagina speciale come se fosse un blog;

• nelle le pagine invece possiamo inserire contenuti in pagine statiche I siti fatti in wordpress in base al sito che andremo a realizzare possiamo decidere se le varie pagine saranno dinamiche o statiche. es. la home page del sito aziendale potrà essere statica mentre quella per un blog sarà dinamica. INSERIRE / MODIFICA ARTICOLI: visualizzeremo una schermata in cui nell’area “visuale” vedremo alla fine ciò che stiamo inserirendo, mentre nell’area “html” vedremo il codice wordpress e qualsiasi cms ci permette di dividere gli articoli in categorie. un post può appartenere a più categorie. quando stiamo per pubblicare il nostro nuovo post, possiamo decidere la categoria in cui andrà a finire il nostro articolo. in wordpress fin quando non premiamo il tasto “aggiorna” (tasti in blu, comandi importanti) possiamo lavorare il “bozza”. COMMENTI: ogni articolo può essere commentato. per ogni articolo, possiamo decidere se far inserire i commenti o meno. possiamo decidere che i commenti possono essere pubblicati immediatamente o devono essere tenuti in “sospeso” in attesa di moderazione/applicazione. SISTEMA CAPTCHA (inserimento manualmente di caratteri) wordpress ci dà anche la possibilità utilizzare questo sistema anti spam. CONTENUTI STATICI: wordpress gestisce il contenuto delle pagine statiche • ISTANT WORDPRESS: software che emula un ambiente di rete all’interno

del nostro pc wordpress ha una voce di menù ASPETTO che ci permette di personalizzare il nostro sito con diversi aspetti grafici IL TEMA WORDPRESS in editor, troviamo il codice di ogni singolo layout di pagina. possiamo così modificare il tema direttamente dal codice. Le scritte sono nel database, non nel foglio PHP che contiene esclusivamente indicazioni per “andare a pescare l’informazione nel database” un tema di wordpress deve avere ALMENO UN FOGLIO DI STILE I TEMI DI WORDPRESS SONO RESPONSIVE (si adattano alla finestra) QUANDO VOGLIAMO MODIFICARE UN FOGLIO DI STILE CSS DI UN

TEMA WORDPRESS, CON “ISPEZIONA ELEMENTO” PROVIAMO PERSONALIZZARE LA REGOLA CSS E SUCCESSIVAMENTE LA CAMBIAMO SUL CSS DEL TEMA E “AGGIORNIAMO”. CREARE UN TEMA PER WORDPRESS: SU WWW.ARTISTEER.COM possiamo disegnare un tema wordpress. LA STRUTTURA DELL’INDEX DI WORDPRESS: il broswer legge dall’alto in basso tutti i vari comandi, componendo dinamicamente la pagina. L’ html invece renderizza la pagina. DIFFERENZA TRA BLOG (sito dinamico) E SITO WEB AZIENDALE (sito statico). a wordpress, dobbiamo dire subito che in “home page” ci và una pagina statica, altrimenti di default wordpress metterà in homepage gli ultimi articoli inseriti. se noi clicchiamo su “pagina statica” wordpress ci chiede se vogliamo una pagina per gli articoli quindi creerà una pagina vuota per cui ogni volta che scriviamo un articoli, automaticamente wordpress la indirizzerà su quella pagina vuota “news”. • WAPPALIZER : estensioni per Crhome e Firefox che ci dice con che CMS è

stato fatto il sito WIDGET DI WORDPRESS. insieme ai temi ed ai plugin sono una delle cose più personalizzabili di wordpress. LA BARRA LATERALE: è un area in cui noi possiamo andare a trascinare un certo numero di widget es. barra di ricerca, ultimi 5 articoli, link ecc… i widget possono essere inseriti esclusivamente nelle SIDE BAR (barre laterali), possono essere aggiunte o cancellate trascinando i widget già caricati, fuori dalla barra laterale. OGNI WIDGET PUò AVERE UN TITOLO che nel sito apparirà sopra il nostro widget. • BLOGROLL: con il widget blogroll, possiamo aggiungere una serie di link

(andando su LINK, su AGGIUNGI NUOVO e inserendo il titolo e link del sito su cui vorremo indirizzare l'utente ) che compariranno nella nostra barra laterale.

24 febbraio 2014 • HAIKUDECK.COM: sito che permette di esportare .ppt e .pdf per slide e presentazioni • GOOGLE WEB DESIGNER è un programma gratuito che ha le stesse funzioni di “adobe

flash”. LEZIONE SU ADOBE FLASH 1∞ regola di flash - determinare il numero di fotogrammi al secondo. asse x - asse del tempo asse y - asse dei livelli (oggetti- elementi) Flash non Ë web usability perchË. A-alimenta il cattivo design incoraggiando l'abuso di grafica. B-va contro i principi basilari dell'interazione web. C-distrae dallo scopo principale del sito. Svantaggi di flash. Richiede flash player per essere visualizzato. HTML5, CSS3 e JAVASCRIPT permettono animazioni simili. Non visualizzabile su iphone (apple ha rifiutato flash). Cattiva indicizzazione SEO. Viene letto come "video". Nozioni base. Le animazioni avvengono sullo STAGE. La timeline composta da FOTOGRAMMI. Animazione possibile tra KEYFRAMES. - solo tra fotogrammi chiave Ë possibile creare un'animazione. I fotogrammi nel mezzo sono "interpolazioni" tramite cui si sviluppa l'animazione. MOTION TWEEN (interpolazione animata). -creazione automatica dell'animazione (es. spostamento di un oggetto) Il “psd” di flash si chiama .fla ma nella pagina html inseriremo il file .SWF. Adobe flash può esportare il file in molti formati, ma il più interessante è il formato .exe per pc o altro formato per mac perché è autosufficiente perché non richiede l’istallazione di plugin “flash player”. é possibile esportare anche in formato jpeg “singolo fotogramma”.

.GIF è un formato che supporta anche l’animazione, quindi possiamo esportare piccole animazioni da incorporare all’interno della nostra pagina web. LA LIBRERIA: luogo all’interno del documento flash in cui vengono raccolti tutti gli elementi del nostro filmato “es. sottoni e simboli”; alla fine nel formato di esportazione .SWF verranno raccolti soltanto gli elementi che abbiamo utilizzato realmente. Nel file . FLA verranno salvati tutti gli elementi che abbiamo nella libreria, nel file .SWF ci saranno solo gli elementi che utilizzo effettivamente. es. un banner in flash es. 300 x 200 non può pesare più di 30kb, quindi abbiamo disperse qualità di salvataggio. E’ POSSIBILE CREARE ANIMAZIONE ESCLUSIVAMENTE TRA DUE IMMAGINI CHIAVE. TIPI DI ANIMAZIONE: ogni oggetto che viene animato, si chiama simbolo (es. cerchio rosso). Questo simbolo nell’arco di un secondo posso creare: • degli spostamenti da A a B (animazione di movimento) • cambiamenti di forma es. piccolo/grande ( animazione di forma ) • cambiamenti di forma es. cerchio/quadrato (animazione di metamorfosi • animazioni sul testo variabili in base all’effetto che vorremo ottenere • effetti speciali I SIMBOLI prima di essere utilizzati devono essere salvati in: • GRAPHIC: qualsiasi simbolo che può essere animato • BUTTON: sono bottoni su cui possiamo cliccarci sù • MOVIE CLIP: si utilizza in rari casi. è un filmato all’interno di un filmato. es.

faro che lampeggia e si sposta da un punto A ad un punto B. Il simbolo in questo caso è il faro che lampeggia.

ACTIONSCRIPT: linguaggio mediante il quale è possibile dare dei comandi al filmato e ai suoi elementi; es. ai bottoni “play”. un actionscript è anche il comando di stop. permette di lineare un bottone all’interno del filmato. L’adobe flash può essere sostitutivo con altre “suite gratuite” che permettono di esportare i file in HTML e sono compatibili con dispositivi che non supportano il flash player. IL BANNER è L’EVOLUSIONE DELLA PUBBLICITà SU CARTA STAMPATA E DEVE ESSERE SEMPRE LINKATO ALLA PAGINA DEL PRODOTTO SPONSORIZZATO.

lo standard per un banner è 24,00 frame al secondo. >24 filmato più fluido, < 24 filmato a scatti. Impostare l’impostazione di lavoro “classico” windows - workspace - classic IL BANNER è CICLICO e non dura più di 10 secondi, flash di default RIAVVIA il filmato ————————————————————————— inserire una KEYFRAME : insert - timeline - keyframe FRAME GRIGI: frame statici FRAME BLU: frame animati per creare l’interpolazione di più elementi, possiamo modificare i movimenti, dimensioni, posizione di più elementi creando per ogni elemento un nuovo livello. IL FORMATO DI ESPORTAZIONE DEL NOSTRO LAVORO SARà NECESSARIAMENTE IN .SWF file - publish settings “esporta per web” quando salveremo, otterremo un file .swf e un file .html quando vogliamo incorporare il nostro banner nella nostra pagina web, dobbiamo creare un div delle dimensioni esatte del nostro banner e inserire un nuovo “media” .swf ————————————————————————— LIGHTBOX: piccolo file javascript che permette di collegare una immagine o un testo ad una immagine più grande. • creare una cartella contenente i file per il lightbox. • copiare la cartella “css" che regolamenta le regole del lightbox • copiare la cartella “images" • copiare la cartella javascript “js" che permette al javascript di funzionare abbiamo predisposto in nostro sito ad accogliere il lightbox • creare un nuovo documento in dreamweaver • copiare sotto il title all’interno dell’ head il codice:

<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> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> • all’interno del body invece, dobbiamo caricare l’immagine in miniatura • cliccare sull’immagine “miniatura” e all’interno della casella LINK dobbiamo

collegarla all’immagine più grande. • ATTIVARE IL LIGHTBOX 1. all’interno del body per ogni immagine a cui vogliamo applicare l’effetto

lightbox, dobbiamo dare all’immagine l’attributo “rel" <a href=“nomeimmagine.jpg"rel="lightbox”> • DESCRIZIONE DELL’IMMAGINE 1. all’interno del body per ogni immagine a cui vogliamo applicare l’effetto

lightbox con la DICASCALIA, dobbiamo dare all’immagine l’attributo <a href="IMG/2.jpg"rel="lightbox" title=“disascalia 1”> • CREAZIONE DI UNA GALLERIA DI LIGHTBOX 1. per tutte le foto che vogliamo inserire in una galleria specifica, dopo rel=

“lightbox”, dobbiamo inserire tra parentesi quadre [ nome galleria ] <a href="IMG/2.jpg"rel="lightbox [galleria1]" title=“didascalia 1” INCONA DEI PREFERITI (favicon) caricando il file five.ico all’interno della cartella principale del nostro spazio web. • si crea una immagine quadrata in jpg • andiamo sul sito tools.dynamicdrive.com • il sito ci converte il nostro file .jpg in five .ico

25 febbraio 2014 • BGPATTERN: sito per generare i pattern e scaricarli gratis • STRIPEGENERATOR: sito per generare pattern a striscie esportabili in formato .png • ULTIMATE CSS GRADIENT GENERATOR: generatore di gradient per gli sfondi. • FIVERR: sito che per 5 dollari ti fanno qualsiasi cosa. CSS-TRICKS.COM/EXAMPLES/BUTTONMAKER sito che ci crea la classe css da applicare al nostro testo per creare un pulsante. MESSAGENET: sito per numero di telefono fisso gratuito che inoltra il messaggio alla segreteria o l’email sul cellulare SMASHIN MAGAZINE: il sito per nozioni web più importante del mondo; (es. siti RESPONSIVE) WEC SCHOOL: sito in cui troviamo le regole del buon web designer PROVIDER A CUI AFFIDARSI: • kolst (italiano con prezzi medi) • register.it • aruba NORMALIZE.CSS: pialla le differenze tra i vari browser MARSHALL MC LUHAN: massimo esperto di comunicazione di massa (informarsi) JACOB NIELSELD: massimo esperto di usabilità al mondo CONSIGLI PER IL LAVORO DEL “WEB DESIGNER” • IL DOMINIO si intesta al nome del proprietario dell’azienda • IMPARARE A CONOSCERE JQUERY • IMPARARE twitter bootstrap: template con un sistema a griglie con cui

possiamo progettare il nostro sito web • IMPARARE A FARE I SITI DI E-COMMERCE, CON WORDPRESS • IMPARARE AD USARE I SOCIAL “ social media menager” • RICORDARSI DEL SEO (tutto ciò che è necessario per essere indicizzati) • RICORDARSI DI INSERIRE LA “TAGLINE” IL MOTTO SOTTO IL LOGO. • INFORMARSI SUI PLUGIN • IMPARARE GOOGLE WEB DESIGNERS • TESTI CONCISI NEI SITI WEB • STANDARDIZZARE I NOSTRI TITOLI “H1, H2, H3 ——————————————————————————————— FORM DI CONTATTO: foxyform.com : generatore gratuito di form di contatto che ci permette di

includere nel nostro sito un form di contatto per l’inserimento dei dati ecc. MENU’ A TENDINA: richiedono di norma l’utilizzo di javascript CON IL CSS I MENU A TENDINA SI FANNO CON UNA SEMPLICE LISTA PUNTATA. • cssmenubuilder.com : sito che ci permette di creare con codici css che

dobbiamo mettere nel foglio di stile e htm dei menù. • purecssmenù.com: permette di creare menù a tendina con menù e

sottomenù navigabili. bisogna registrarsi per ricevere il codice html. ——————————————————————————————— INSERIRE UN BANNER NELLA PAGINA HTML: nel nostro div, cliccheremo: • INSERT • MEDIA • SWF

27 febbraio 2014 COME ACQUISTARE UNO SPAZIO WEB: • ALTERVISTA è gratuito ma impone il suo dominio • ARUBA.IT: acquistiamo (dominio e spazio web) ARUBA è un ISP internet server provider (servizi per il web) • database : (per un sito dinamico) • com : quando acquistiamo un dominio .com possiamo acquistare delle

estensioni (.it .net) che costa meno dell’acquisto di un dominio completo e che comunque reindirizzano l’utente al .com

• it : può essere dominio completo o REIDIRECT • net : può essere dominio completo o REIDIRECT i .IT e .NET (reidirect) puntano al .com che punta al dominio (hosting / .com) e costano meno. (circa 6 euro in confronto ai 20 del dominio intero senza altre estensioni) 1. scelta dominio (preferibile .com) 2. scegliere !HOSTING LINUX + MAIL! (costa euro 20,66) sono consigliati: • antivirus e antispam • backup spazio web • whois privacy (se un utente cerca il tuo nome su internet, google non

indicizza il nome associandoti al sito da te acquistato, ad esempio se acquistiamo un dominio con i nostri dati per una azienda)

• su KOLST è un hosting (ISP) italiano che è più gestibile in quanto più

piccolo di aula. è più indicato per chi ha tanti domini da acquistare www.OSCON.it : sito da cui scaricare il facsimile di un contratto standard da personalizzare e da presentare al cliente • dati dei contratti • tipologia del servizio • tempi di consegna • modalità di pagamento RICORDA! firma il contratto su tutte le pagine e spampalo in duplice copia.

28 febbraio 2014 www.microlibri.com (sito da cui poter scaricare le slide, etc. di emanuele) (visitare) WEBDESIGNERWALL.COM : è possibile (APPROFONDIRE) parallax scrolling : sfondi su più livelli che “scrollano” uno sotto l'altro INTRODUZIONE ALL’ HTML 5 i cambiamenti che introduce html5 si possono riassumere con una semplificazione del codice rispetto alla versione precedente xhtml4 e eliminazione di alcuni tag non più supportati. analizzeremo tag audio e video che permettono di creare player mp3 o mp4 con un semplice tag. un’altra tag interessante è il tag “canvas / cornice” che ci permettere di creare uno spazio in cui inserire una animazione . html5 è un linguaggio di markup per la programmazione di pagine web. introduce diverse novità. • html permette di caricare un video senza affidarsi ai provider esterno (you

tube ecc) semplicemente inserendolo nel tag video. sostituirà totalmente il flash player.

• TAG AUDIO definisce tutto ciò che ha a che fare con il sonoro. il tag audio ha un player di default. abbiamo degli attributi importanti che permettono il funzionamento del player ( SRC indirizzo al quale si trova il video, AUTOPLAY, LOOP, CONTROLS indica se l’interfaccia deve essere visualizzata o meno, PRELOAD indica se l’auto deve caricarsi tutto prima di essere riprodotto

per assicurarsi che un audio possa essere ascoltato da tutti i browser occorre fornirlo in diversi formati ( mp3, mp4, o un messaggio di errore in quanto il browser non supporta html5). dobbiamo usare il tag source all’interno del tag auto. se vogliamo inserire una sola risorsa audio il codice è questo: <audio src=“audio/gusto.mp3” controls=“controls” /> • TAG VIDEO gestisce la visualizzazione del filmato. gli attributi sono es.

(POSTER possiamo decidere l’immagine di anteprima del video, possiamo decidere anche la dimensione del player video)

con una sola fonte: <video src=“video.ogg” id=“movie” width=“320px” height=“240px” poster= "img/gusto.jpg” controls= “controls” preload= “auto” /> con più fonti, bisogna aggiungere i tag <source src= …

Le novità introdotte dall'HTML5 rispetto all'HTML 4 sono finalizzate soprattutto a migliorare il disaccoppiamento tra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori, eccetera), definite dalle direttive di stile, e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre l'HTML5 prevede il supporto per la memorizzazione locale di grosse quantità di dati scaricati dal web browser, per consentire l'utilizzo di applicazioni basate su web (come per esempio le caselle di posta di Google o altri servizi analoghi) anche in assenza di collegamento a Internet. MAGGIORE INTERAZIONE TRA BROWSER E IL COMPUTER DELL’UTENTE. • viene supportato Canvas che permette di utilizzare JavaScript per creare

animazioni e grafica bitmap (CORNICE) al cui interno possiamo creare delle piccoli “software"

Canvas è una estensione dell'HTML standard che permette il rendering dinamico di immagini bitmap gestibili attraverso un linguaggio di scripting • Introduzione della geolocalizzazione, dovuta ad una forte espansione di

sistemi operativi mobili (quali Android e iOS, tra i più diffusi); • sostituzione del lungo e complesso doctype, con un semplice <!DOCTYPE

html>. PER DICHIARARE CHE QUELLA è UNA PAGINA HTML • JAVASCRIPT linguaggio complesso. piccoli script con cui attraverso il

browser possiamo far funzionare es. il lightbox • JQUERY libreria di java per effetti. si occupa più dell’aspetto grafico il PHP , JQUERY, e CSS sono i 3 linguaggi più importanti del web.