Laboratorio Web Design 2013

sabato 15 giugno 2013

Verifica finale siti

giovedì 16 maggio 2013

Come indicato fin dal principio ricordo che il lab è una idoneità subordinata alla realizzazione del vostro progetto di sito internet. In questo post voglio rendere il più esplicito possibile, come già fatto a lezione, i criteri di valutazione del vostro lavoro. Non essendoci voto ci sono una serie di requisiti minimi che il vostro progetto deve avere per superare l’idoneità.

Con il vostro sito dovete dimostrarmi che possedete le seguenti competenze:

Grafica
- manipolazione grafica immagini livello base
- elaborazione immagini per il web

Contenuti
- progetto di articolazione contenuti
- costruzione di un menu di navigazione
- inserimento contenuti nelle pagine
(il sito deve essere completo, anche scarno ma finito con tutti i contenuti)

Informatica
- corretto utilizzo dell’html livello base
- corretto utilizzo dei css livello base
- gesionte caricamento/aggiornamento sul server

Nel momento in cui il sito soddisfa questi requisiti per me l’idoneità c’è. Comunico personalmente quando il sito supera l'idoneità. La registrazione (salvo casi di urgenza) avverrà entro fine luglio.

mercoledì 24 aprile 2013

Siti Online

martedì 23 aprile 2013

MAPPE E VIDEO

COME INSERIRE UNA MAPPA:

1- aprire Google Maps e digitare l'indirizzo desiderato

2- puntare il mouse sull'ultimo bottone in alto a sinistra dove compare la scritta "Link"

3- copiare il secondo codice html

4- (per personalizzare le dimensioni della mappa cliccare "Personalizza e visualizza in anteprima la mappa incorporata", impostare le dimensioni desiderate e copiare il codice)

5- incollare il codice nella pagina html di Coffee Cup

COME INSERIRE UN VIDEO:

1- aprire YouTube e digitare il nome del video desiderato

2- cliccare sul video e poi su CONDIVIDI (sotto al video)

3- cliccare su CODICE DA INCORPORARE

4- (per modificare le dimensioni del video occorre andare su dimensioni video, proprio sotto il codice, e scegliere tra quelle predefinite oppure personalizzarle)

5- copiare il codice

6- incollare il codice nella pagina html di Coffee Cup

venerdì 19 aprile 2013

Navigazione Avanzata

Guida Layout dei siti con i CSS, lezione 41.
Layout monolitico fluido >> visualizza il css di questo layout >> /*stili per la navigazione*/

La LISTA si realizza nel modo seguente:
nella pagina HTML, inserire dopo il tag <div id=”...”>:

<div id="box3">
<ul>
<li>HOME</li> 
<li>PHOTO GALLERY</li>
</ul>

Il tag <ul> apre la lista, mentre <il> viene inserito per creare le voci della navigazione, creando così una lista verticale, puntata.

Se vogliamo ottenere una navigazione inline, ovvero orizzontale, bisogna ridefinire il foglio di stile inserendo:
#navigation ul{margin: 0;padding: 0; list-style-type: none;}  
#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/

Per inserire i link nella navigazione, dobbiamo aggiungere il tag <href>, nella pagina html:

<div id="box3"> 
<ul> 
<li><a href="index.html">HOME</a></li> 

Di base, se creiamo un link abbiamo una formattazione standard, che ne definisce lo stile. Per eliminarla, torniamo sul foglio di stile ed inseriamo: 
#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
#navigation a:hover{color: #fff;text-decoration: underline}
#navigation a#activelink{color: #033;text-decoration: none}

Il primo navigation definisce come si vedranno i link, quindi il colore, il font e la grandezza.
Il secondo navigation, riguarda il colore che il link assume quando ci passiamo sopra con il cursore del mouse. Per modificarlo, dobbiamo cambiare il codice cromatico seguente ad a:hover.

giovedì 18 aprile 2013

Gestire gli sfondi.

Gli sfondi sono una proprietà da gestire con i fogli di stile (CSS).

Nel sito HTML.it in Designe cliccare su CSS , poi in Guida CSS di base e, nella colonna di destra, su Guide più lette della settimana.

Lezione N° 17:

http://www.html.it/pag/14225/gestione-dello-sfondo/

Le misure dello sfondo:

larghezza 1400

altezza 1000.

Questa è la lista delle proprietà per lo sfondo:

background-color
background-image
background-repeat
background-attachment
background-position

Possiamo cambiare anche lo sfondo di un singolo DIV.

Lo sfondo può essere un colore uniforme (utilizziamo, in questo caso, solo il background) oppure una o più immagini che possono essere ripetute o meno.

Per lo sfondo a pagina intera possiamo creare una tabella dentro "body" nel css .

Questa è la dicitura da utilizzare per inserire lo sfondo e gestire le sue proprietà:

body {background-image: url(sfondo.gif); no-repeat; center top; background-color: pink; }

per lo sfondo uniforme mette solo il background.

lunedì 15 aprile 2013

Come inserire un'immagine nel file HTML

Per inserire un'immagine nel file HTML:

a → ogni immagine deve essere un file a parte che sta nella cartella “SITO”.

b → ogni immagine deve essere della grandezza giusta in base ai propri wireframe.

I formati ammessi nel web sono sostanzialmente tre: GIF, JPG e PNG.
Noi ne utilizzeremo principalmente due; PNG che si differenzia per la lettura delle trasparenze e JPG che invece non le legge.

Il tag per inserire le immagine è <img> non ha un elemento di chiusura, lo chiudiamo utilizzando lo slash (“/”) prima della parentesi angolare.

Esempio: < img src=”nomeimmagine”/> dove img è l'abbreviazione di immagine, e src sta per “source” (origine), è il percorso (URL) in cui il browser troverà il file da mostrare.

Per ulteriori chiarimenti e approfondire l'argomento, la guida HTML si trova a questa link http://www.html.it/guide/guida-html/ le lezioni da guardare sono la numero 26/27/28/29.