LAB Web Design 2014: 2014

giovedì 8 maggio 2014

Nota: menu a tendina

http://www.html.it/articoli/un-menu-a-tendine-solo-con-i-css-1/

giovedì 24 aprile 2014

bottoni di menu immagini animati rollover

Ciao,
vi segnalo un tutorial per chi volesse avere delle immagini in rollover nei menu di navigazione.
http://www.w3facile.com/css-e-webdesign/bottoni-rollover-col-css.html
E' un po' avanzato ma non vi spaventate.
Chi vuole fare questa cosa ci si può mettere su al lavoro!
Se ne trovate altri in giro in rete provateli e segnalateli volentieri.
Buon lavoro.

P.S. Già che ci siamo vi segnalo anche questo http://www.w3facile.com/css-e-webdesign/css-sprite-rollover-immagini-menu.html

martedì 22 aprile 2014

Avanzamento Siti

50% - http://web.dfc.unibo.it/lab-web-design/luca.naldi6/
100% - http://web.dfc.unibo.it/lab-web-design/morena.abbagnato/
100% - http://web.dfc.unibo.it/lab-web-design/elisabetta.dimari/
100% - http://web.dfc.unibo.it/lab-web-design/federica.motteran/
100% - http://web.dfc.unibo.it/lab-web-design/roberto.neri4
100% - http://web.dfc.unibo.it/lab-web-design/sara.giorgi4/

100% - http://web.dfc.unibo.it/lab-web-design/margrethe.salvati/

venerdì 4 aprile 2014

Galleria di foto

A voi: maneggiare con cautela e perizia
http://lokeshdhakar.com/projects/lightbox2/

LETTERE ACCENTATE:
Per scrivere parole con accenti basta semoplicemente sostituire le lettere accentate con gli opportuni codici HTML. Esempi:

à à
è è
é é
ì ì
ò ò
ù ù
À À
È È
É É
Ì Ì
Ò Ò
Ù Ù

link di riferimento: http://www.fauser.edu/fau/html_htm/html4b.htm

mercoledì 26 marzo 2014

Siti Online

martedì 25 marzo 2014

Gestione sfondi

Lo sfondo potrà essere o UNIFORME oppure un' IMMAGINE (sfumata, texture, ecc...)

Tramite la guida di stile andiamo alla lezione 20:
http://www.html.it/pag/14225/gestione-dello-sfondo/

E' fondamentale sapere che il colore di sfondo è una proprietà del BODY, è assegnabile a qualsiasi DIV
e va perciò gestita dal foglio di stile.

Ecco la lista delle proprietà per lo sfondo, applicabili:

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

- Per una trovare una texture basta scrivere su google image ''texture siti web'
- Per quanto riguarda la trasparenza dei file invece bisogna ricordarsi che vanno salvati ESCLUSIVAMENTE in PNG

domenica 16 marzo 2014

Come creare il menu di Navigazione

Lla navigazione si realizza nel box <div id="navigation">NAVIGAZIONE</div> del nostro file .html. Davanti ogni parola del nostro menu mettiamo il tag a e con questo facciamo i link tra le pagine (es. <a href="#">Home </a>).

Quando dobbiamo scrivere link più complessi creiamo un unordered list <ul> </ul> nella sezione di navigazione nel file .html.

<div id="navigation">
	<ul>
	<li><a id="activelink" href="#">Home</a></li>
	<li><a href="#">Pillole</a></li>
	<li><a href="#">Contenuti</a></li>
	<li><a href="#">Grafica</a></li>
	<li><a href="#">Linguaggi</a></li>
	<li><a href="#">Webdesign</a></li>
	<li><a href="#">Software</a></li>
	</ul>
	</div>

E nel file .css coppiamo i seguenti “stili di navigazione” per personalizzare il menu:

/*stili per la navigazione*/

div#navigation ul{margin: 0;padding: 0; list-style-type: none;}

div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/

div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}

div#navigation a:hover{color: #fff;text-decoration: underline}

div#navigation a#activelink{color: #033;text-decoration: none}

Visto che il tag è a, le proprietà vanno messe dentro il tag navigation a. Tutti i link che sono dentro navigation son con queste proprietà.

"Margini" e "padding" sono le due proprietà usate per la spaziatura degli elementi in HTML. Il margine è lo spazio esterno dell'elemento e il padding invece è l'imbottitura, lo spazio all'interno dell'elemento.

I selettori:

- a:hover gestisce il comportamento del tag a quando ci siamo sopra il link con il mouse (cambiare colore, sottolineare, campiare l’imagine pulsante);

- a:activelink ci fa vedere che siamo già stati nella pagina del link.

Quando dobbiamo mettere imagini nel menu, si inserisce il tag dell’imagine nel documento .html

<img src="url" alt="some_text"> .

Contenuti incorporabili: mappe e video

Le mappe e i video sono elementi che ci vengono forniti da terzi, rispettivamente Google maps e Youtube, dai quali possiamo“embeddare” il codice Iframe, che verrà poi inserito all'interno della nostra pagina “index.html”.

IL VIDEO:

Su Youtube ricerchiamo il video che ci interessa, clicchiamo condividi e copiamo il codice da incorporare ( codice iframe); lo riportiamo all'interno della nostra pagina “index.html”, posizionandolo nel <"body"> precisamente nel <"CONTENT">.
Dopo aver scelto le dimensioni che vogliamo dare al nostro video, possiamo salvare.

LA MAPPA:

Da Google maps inseriamo la posizione di nostro interesse e in basso clicchiamo su condividi e incorpora mappa.
Allo stesso modo copiamo il codice “iframe” e lo posizioniamo nel <"CONTENT"> della pagina “index.html”, tenendo sempre presenti le dimensioni.

NB: soltanto dopo aver caricato il sito online saremo in grado di visualizzare gli elementi presi dal web.

Si possono inoltre includere, mappe e video, anche attraverso social network.

Ciò è possibile anche con Facebook!

Qui di seguito il link:
https://developers.facebook.com/docs/plugins/like-box-for-pages

venerdì 14 marzo 2014

layout overview

http://www.html.it/pag/14295/indice-dei-layout-presentati-nella-guida/

http://html.it/guide/esempi/layout_css/mono.php?stile=monofisso

giovedì 13 marzo 2014

Primi passi per la programmazione di un sito

Cominciamo aprendo un programma adibito alla programmazione, nel nostro caso CoffeCup.

La prima cosa da fare è aprire una New Blank Page che sarà la nostra HOME, salvarla con il nome "index.html" (tutto minuscolo e senza spazi), e dovrà essere sempre questo il nome con cui si salva una Home Page ; successivamente si apre un'altra New Blank Page che va chiamata "stile.css".

Bisogna cancellare tutto il code editor in entrambe le New Blank Page e copiare il codice di partenza sia per HTML che per il foglio di stile: nel caso della pagina "index.html" il codice da incollare tra <body> e </body> è:

<div id="header">TESTATA</div>

<div id="navigation">NAVIGAZIONE</div>

<div id="content">CONTENUTO</div>

<div id="footer">PIEDE</div>.

Per quanto riguarda la pagina "stile.css" invece, il codice da incollare è un altro:

html, body {margin: 0; padding: 0}

#container {width: 960 px; margin: 0 auto;}

#header {background-color: red;}

#navigation {background-color: blue; color: white;}

#content {background-color: green;}

#footer {background-color: black;}

E ' importante ricordare che vanno creati tanti file HTML quante sono le pagine del sito MA un solo foglio di stile CSS ad esse collegato: salvati tutti esclusivamente nella stessa cartella del sito chiamata anche RADICE. In ogni pagina HTML devo mettere il link al foglio di stile esterno, va copiato nella "head".

<head>

</head>

Una volta salvato tutto, aprendo la pagina nel browser si vede la struttura con 4 box colorati che è esattamente il nostro punto di partenza.

lunedì 10 marzo 2014

Proprietà di presentazione dei testi, gestione dei colori, assegnazione di classi .

COME GESTIRE LE PROPRIETà DI PRESENTAZIONE DEI TESTI CON I FOGLI DI STILE (CSS)

1) La scelta del font : Proprietà font-family

Possiamo usare solo alcune tipologie di font che siano visualizzabili su quasi tutti i dispositivi per i testi che abbiamo intenzione di inserire sul web.
Infatti, se si vuole far vedere un oggetto con un font particolare, esso dovrà essere programmato come immagine.
I font si dividono sostanzialmente in cinque macrofamiglie :

- serif (ad esempio Times New Roman)
- sans-serif (ad esempio Arial)
- cursive (ad esempio Comic Sans)
- monospace (Courier)
- font liberi (fantasy : ad esempio Allegro BT)

La dichiarazione sintattica da fare nei fogli di stile è :

selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;}

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette (es. "Times New Roman"). Quando la pagina viene caricata, il browser tenterà di usare il primo font della lista. Se questo non è disponibile userà il secondo, e così via . Nel caso di impossibilità di utilizzo dei font prescelti, verrà usato il font principale della famiglia generica indicata presente nel sistema.

Un esempio di scelta del font per una parte del contenuto della pagina che stiamo progettando, può essere:

dentro la sezione content del foglio di stile : div {font-family: comic sans, cursive;}

2) La proprietà font-size

E' la proprietà che serve per definire le dimensioni del testo.
La sintassi da dichiarare nel foglio di stile è :

selettore {font-size: valore;}

dove il valore può essere indicato in pixel (px) , percentuale (%) , oppure con parole come small / medium /

large.

3) La proprietà font-weight

Questa proprietà è funzionale alla definizione della consistenza visiva del testo (grassetto).
La sintassi da dichiarare nel foglio di stile è :

selettore {font-weight: valore;}

Il valore può essere numerico (100 = più leggero ... 700 = grassetto ... 900 = più pesante) , oppure espresso con termini che ne descrivono l'aspetto (normal = valore predefinito , bold = grassetto).

4) La proprietà font-style

Serve per impostare il carattere corsivo del testo. La sintassi da dichiarare nel foglio di stile è :

selettore {font-style: valore;}

Il valore in questione può essere : normal (il testo rimane normale) , italic (il testo diventa corsivo).

5) La proprietà line-height

Tale proprietà ha lo scopo di impostare uno spazio tra le righe del testo, in quanto permette di selezionare
l'altezza che le linee di testo devono avere.
La sintassi da dichiarare nel foglio di stile è :

selettore {line-height: valore;}

Il valore può essere:
- numerico, solitamente da 1 a 1.5 ( in questo caso l'altezza della riga risulterà uguale a quella del font moltiplicata per il valore scelto ).
- un'unità di misura , ad esempio pixel.
- percentule (rispetto al font).
- normal (deciso dal browser).

6) La proprietà text-align

Con questa proprietà si sceglie come allineare il testo. Il valore è infatti rappresentato da alcune parole chiave che specificano le possibili modalità :
- left : allinea il testo a sinistra
- right : allinea il testo a destra
- center : centra il testo

La sintassi da inserire nel foglio di stile è:

selettore {text-align: valore;}

7) La proprietà text-decoration

Il testo può venire ulteriormente personalizzato aggiungendo dei valori nella seguente sintassi :

selettore {text-decoration: valore o valori;}

Tali valori sono utili per marcare le parole con delle righe (sottolineature ecc.).
I termini per definirli nel foglio di stile sono:
- none : il testo rimane normale.
- underline : il testo sarà sottolineato.
- overline : il testo avrà una linea superiore.
- blink : il testo sarà lampeggiante.

8) La proprietà font-variant

Consente di trasformare il testo in maiuscoletto (lettere in maiuscolo rese con dimensioni uguali ai caratteri minuscoli ).
La sintassi è :

selettore {font-variant: valore;}

I possibili valori sono : normal (il testo rimane normale) , small-caps (il testo si trasforma).

9) La proprietà text-transform

Essa serve per cambiare tutte le lettere del testo selezionato trasformandole in maiuscole/minuscole.
Inserendo i valori :
capitalize (la prima lettera di ogni parola viene trasformata in maiuscolo);
uppercase (tutto il testo diventa maiuscolo);
lowercase (tutto il testo diventa minuscolo).

La sintassi è : selettore {text-transform: valore;}

10) La proprietà white-space

Questa proprietà serve a gestire il trattamento degli spazi bianchi presenti tra le parole del testo, e la scelta di limitare l'andare a capo delle righe.
La sintassi è : selettore {white-space: valore;}

I valori sono specificati dai seguenti termini:
- none = gli spazi bianchi tra le parole sono ridotti a uno.
- pre = gli spazi bianchi e l'inizio delle nuove righe sono mantenuti come da linguaggio HTML.
- nowrap = gli spazi bianchi sono ridotti a uno e l'andata a capo è disabilitata.

Esistono numerose altre proprietà inseribili nel foglio di stile , che si possono trovare nelle guide on-line :

http://www.html.it/pag/14226/gestione-del-testo-propriet-di-base/
(link da cui è tratta la lezione sulle proprietà di base)

DEFINIZIONE E GESTIONE DEI COLORI DEL TESTO

Per definire i colori possiamo usare 16 colori standard oppure prendere il colore da Gimp attraverso il codice HTML.
La proprietà di assegnazione del colore nel foglio di stile è : selettore {color: valore;} dove il valore, nel caso dei colori standard, si identifica tra una lista di termini che identificano la palette VGA.

            black | navy | blue | maroon | purple | green | red | teal | fuchsia |

                 olive | gray | lime | aqua | silver | yellow | white

Per colori più personalizzati si utilizzano i codici con notazione esadecimale composti da sei elementi (lettere/numeri) che si riferiscono ai valori per i colori : RED, GREEN, BLUE (RGB). In questo caso i valori sono preceduti dal simbolo #.

Esempi : p {color: purple;}
div {color: #CC0000;}

Il seguente link manda alla guida CSS sui colori : http://www.html.it/pag/14224/gestione-del-colore/

A QUALI ELEMENTI SI POSSONO ASSEGNARE LE PROPRIETà DEL TESTO ?

1) Ai <div> : il testo del contenuto risulta tutto uguale in base alle proprietà assegnate al div.

2) A uno specifico tag :

- Se si vuole assegnare proprietà differenziate al titolo del testo, all'interno della sezione content nel foglio di programmazione HTML (INDEX), si deve inserire il tag : <h1> titolo </h1>
- Lo stesso si può effettuare per suddividere il contenuto in paragrafi, inserendo la dicitura : <p> testo </p>

Dopo aver modificato il foglio INDEX, si modifica il foglio CSS spostando le proprietà prima genericamente assegnate al contenuto all'interno delle nuove sezioni : h1 , p , ecc.

3) Alle classi :

Le classi sono utilizzate per selezionare elementi specifici del testo che si desidera far vedere diversamente (per esempio evidenziare un termine all'interno di un paragrafo).

La sintassi da dichiarare nel foglio di stile è : . nome testo { proprietà }
Esempio : . testorosso {color : red ;}

Per assegnare all' HTML l'elemento classe, si usa un tag chiamato span. Esso si deve inserire prima della
porzione di testo di interesse e deve essere seguito da uno spazio e da un tag class come segue :

<span <class "nome della classe"> </span>