LAB Web Design 2014

domenica 2 marzo 2014

Il Linguaggio HTML

Il linguaggio html è un linguaggio di markup e non di programmazione. Esso dà indicazioni su informazioni come, per esempio, il colore o il formato delle scritte, la posizione degli elementi all’interno della pagina. Il browser ha la funzione di leggere il linguaggio html, interpretarlo e visualizzare la pagina nel modo corretto.

Il Tag (lezione 5): il concetto chiave del linguaggio html è il tag (o marcatore), a cui viene affidata la visualizzzazione. I tag html possono rappresentare oggetti (come ad esempio le immagini) o servire a suddividere la pagina in aree (come i "div").

I tag vanno inseriti tra parentesi angolari (<tag>) e la chiusura del tag viene indicata con un "/" (slash)

Il contenuto va inserito tra l'apertura e la chiusura del tag. Esempio: <tag>contenuto</tag>.

I tag principali sono:
<br/> (shift + invio)---> è il tag che consente di andare a capo

<strong> ----> è il tag che permette di evidenziare una o più parole in grassetto

<a href="la pagina a cui riconduce il link">contenuto (la parola cliccabile)</a> ---> è il tag del link

Questo è il tag del link. Come vediamo tale tag si compone di 2 parti: la prima ci dice a quale pagina riconduce quel link. La seconda, invece, indica il contenuto del link.

La struttura della pagina (lezione 8): il documento html presenta una dichiarazione iniziale ed è suddiviso in due sezioni: Head e Body. l'Head contiene tutte quelle informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto ed interpretato. Nel body invece è racchiuso il contenuto vero e proprio del documento. E' qui che andremo a scrivere.

Esempio di documento html:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html>
<head>
   <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
   <title>HTML.it</title>
</head>
<body>
   <!– Scriveremo qui –>
>
   Qui il nostro contenuto

</body>
</html>

Editare un documento html: Un documento html, essendo un file di testo, può essere editato e modificato con strumenti come il "blocco note". Per agevolare e facilitare il lavoro di editing esistono però programmi più avanzati come Coffee Cup.

Per creare un file con Coffee Cup: aprire il programma, clickare su file, clickare su "new blank page".

Per salvare un file con Coffee Cup: clickare su file, clickare su "save as", salvarlo in una cartella. E' importante ricordare che tutti i file che servono per la costruzione del nostro sito vanno racchiusi all'interno della stessa cartella.

sabato 1 marzo 2014

Il Box Model

Attraverso il foglio di stile possiamo disegnare molto facilmente una serie di box, gli spazi principali del nostro sito web.
Il foglio di stile ci permette di fare riferimento ad una struttura di layout 'universale', che può essere adattata a tutti i siti web. Tale struttura è composta da 5 box:
-la testata (header);
-la navigazione (navigation);
-il contenuto (content): questo box sarà generalmente più grande degli altri;
-il piede (footer);
-un quinto box che contenga spazialmente tutti gli altri (container).
Esempio:

Possiamo disporre i box a nostro piacimento.
Per fare questi box devo inserire nel foglio di stile cinque diversi id (#nomeid), ognuno corrispondente ad un box diverso, specificandone le relative proprietà. Per collegare CSS e HTML uso il tag <div>.
Ad esempio, nel foglio di stile inserisco una cosa di questo tipo:
html, body {margin: 0; padding: 0 }
#container {width: 960px; margin: 0 auto}
#header {background-color: red; }
#navigation { background-color: blue; color:white; }
#content { background-color: green;}
#footer {background-color: black; }
Successivamente, collego gli id del CSS all'HTML, inserendo cinque tag <div>, facendo in modo che il primo contenga gli altri quattro:
<div id="container">
<div id="header">TESTATA</div>
<div id="navigation">NAVIGAZIONE</div>
<div id="content">CONTENUTO</div>
<div id="footer">PIEDE</div>
</div>
Tutti i box vengono allineati automaticamente a sinistra della pagina. Tuttavia, la disposizione standard della maggior parte dei siti prevede che i box siano ancorati al centro.
Per ottenere l'ancoraggio al centro inserisco nel foglio di stile "html, body {margin: 0; padding: 0 }", dove le proprietà margin e padding servono a centrare il layout; inoltre nell'id #container inserisco la coppia proprietà:valore "margin: 0 auto". L'id container, che contiene gli altri quattro, allinea tutti i box.
Dentro i vari <div> (blocchi) posso inserire contenuti. Ad esempio nel div navigazione posso inserire la navigazione, nel div contenuto un testo e un'immagine.

venerdì 28 febbraio 2014

foglio di stile di base

html, body {margin: 0; padding: 0 }
#container {width: 960px; margin: 0 auto}
#header {background-color: red; }
#navigation { background-color: blue; color:white; }
#content { background-color: green;}
#footer {background-color: black; }

<div id="container">

<div id="header">TESTATA</div>
<div id="navigation">NAVIGAZIONE</div>
<div id="content">CONTENUTO</div>
<div id="footer">PIEDE</div>

</div>

Guide HTML + CSS

http://www.html.it/guide/guida-html/

http://www.html.it/guide/guida-css-di-base/

sabato 15 febbraio 2014

Come scaricarsi le immagini da google

Andate sul motore di ricerca di google immagini su ogni immagine c'è scritta la grandezza, bisogna cliccare sull'immagine, ma per visualizzare definitivamente l'immagine nella sua grandezza reale bisogna cliccare nuovamente su visualizza immagine.
Cosa importante ma da non sottovalutare: ogni immagine esiste sul web come un file con un indirizzo web.
Se voglio scaricarla nella sua grandezza reale devo fare salva con nome,
per visualizzare l'estensione dell'immagine basta andare su pannello di controllo --> opzioni cartella e spuntare "nascondi estensione file", se non la apro con il visualizzatore di windows ma la apro con gimp me la apre con la sua grandezza reale (GIMP ci dice sempre la grandezza dell'immagine),
per ridimensionarla vado su immagine --> scala immagine (la risoluzione degli schermi deve essere 72),
la catenella a destra in automatico fà in modo che si mantenga il rapporto tra altezza e larghezza,
infatti se un'immagine si vuole trasformare da lunga a quadrata dovrò tagliarne un pezzo.
Per confermare digito "scala", se sono furbo faccio salva con nome e la salvo aggiungendo "piccola" al nome per distinguerla dall'originale.
Mettiamo che mi serva per il sito un'immagine quadrata 200x200 per farlo correttamente la dovrò ritagliare (tool taglierino x intenderci) e farla perfettamente quadrata con lo strumento ritaglia, compaiono delle proprietà a sinistra (conviene farlo con dimensioni con un rapporto fisso 600 600) infine dò la conferma.

sabato 8 febbraio 2014

Come impostare il design di un sito

Per prima cosa occorre realizzare un abbozzo del sito utilizzando uno dei tanti programmi di grafica esistenti (nel nostro caso GIMP), in modo da avere un'idea di come sarà il nostro prodotto finale.
Detto questo andiamo ad aprire un file gimp di 72 megapixel, impostando le dimensioni della pagina a seconda delle nostre necessità (ad esempio una pagina corta avrà come dimensioni 960x600); una volta creata la pagina posizioneremo al suo interno tutti i nostri elementi (sfondo, immagini, testi, ecc.) ricordando che potremo poi eventualmente estenderli ed adattarli alla pagina web finale.

Osserviamo ora nello specifico come inserire nel nostro file ciascuno degli elementi sopra citati:

SFONDO - se vogliamo realizzare uno sfondo in tinta unita utilizziamo lo strumento "secchiello"; una volta selezionato, facciamo click su uno dei due rettangoli (quello in primo piano) presenti poco più sotto all'elenco degli strumenti, in modo da poter scegliere la tonalità del colore che ci interessa (nella finestra delle tonalità sarà presente anche la notazione HTML del colore da noi scelto). Se invece vogliamo impostare un'immagine particolare come sfondo, vedi sez. IMMAGINI.

N.B.: Se una volta realizzata la testata, la vogliamo uniformare con un unico sfondo, diverso da quello principale, dobbiamo cliccare su "livello" - "crea nuovo livello" e scegliamo il nuovo colore; fatto questo, nella colonna a destra (dove è rappresentato l'ordine gerarchico dei livelli) dobbiamo spostare questo livello sotto i livelli delle immagini / testi della testata, ma sopra il livello dello sfondo principale.

IMMAGINI - per portare un'immagine nella nostra pagina grafica occorre aprirla in una seconda pagina gimp, selezionarla, copiarla e scegliere, dopo aver cliccato con il tasto destro del mouse nella nostra pagina principale, l'opzione "incolla come livello". Per scalare un livello (ad es. se l'immagine è troppo grande), lo selezioniamo nella colonna di destra e utilizziamo lo strumento "scala", facciamo click sull'elemento e lo riduciamo della misura desiderata.
TESTI - per inserire dei testi nella nostra pagina dobbiamo utilizzare lo strumento "testo"; facciamo click sulla pagina e si aprirà una finestra dove potremo inserire il nostro testo. Nella colonna di sinistra sarà inoltre possibile apportare modifiche al tipo di carattere usato, alle sue dimensioni, al colore, ecc.

domenica 2 febbraio 2014

Come creare e salvare un file con Gimp

Come creare e salvare un file con Gimp

Come creare un file con Gimp? Per prima cosa clicco su Nuovo, immediatamente si apre una finestra con tutte le funzioni avanzate, tra cui la dimensione dell'immagine, fondamentale è la grandezza dell'immagine in quanto il programma vuole sapere la lunghezza e la larghezza di essa in pixel. Per comodità sceglieremo quasi sempre 960 x 600 cosi da avere un'immagine un po più larga e non molto alta. Importante è il fatto di accertarsi che nell'immagine vi siano sempre 72 dpi (punti per pollice) e che il colore sia sempre RGB (rosso, verde, blu) ovvero lo spazio colore dell'immagine.

Dopo aver inserito questi dati del file e aver cliccato su Ok comparirà lo spazio della grafica o dell'immagine alla quale andremo a lavorare. Per organizzare il lavoro al meglio è fondamentale regolare lo zoom in basso a sinistra e posizionare le finestre degli strumenti, sia per la creazione del nostro lavoro e sia per la gestione dei suoi livelli, ai lati dello schermo e lo spazio di lavoro al centro. Ma come si salva un file su Gimp? E' molto semplice, basta con lo strumento Pennello per esempio disegnare un disegno o una grafica sul foglio di lavoro e infine per salvare bisogna cliccare su Salva. Tutti i file grafici però possono essere molto complessi, come file immagini, scritte ecc... per salvarli con tutte le loro caratteristiche dobbiamo salvarli nel loro formato grafico nativo del programma. Il formato di Gimp è XCF, e solo questo formato permette di conservare la complessità del lavoro effettuato, tutti i lavori di grafica e design che andremo a fare, li salveremo in formato nativo, questo per appunto modificare o lavorare nuovamente sul file di Gimp. Altrettanto importante è la possibilità di salvare in un formato visibile a tutti gli altri programmi di visualizzazione immagini e grafica, come lo è per esempio Jpeg. Se ho bisogno di dare a qualcuno lo stesso file con la quale sto lavorando su Gimp, devo cliccare “Salva come”, selezionare il tipo di file, selezionare Jpeg e salvarlo sul desktop. Si tratterà di un file che basterà alla sola visualizzazione e non darà la possibilità di operare su di esso. E' necessario sapere che il Jpeg permette per mezzo di un algoritmo di compressione di fare delle immagini comprimendole in modo da regolare la dimensione fisica, ma lo fa perdendo delle informazioni e buttando via della qualità, la qualità va da 0 a 100, ma noi per il web generalmente utilizzeremo una qualità intorno ai 70. Con questo processo ho salvato il file sia con il suo formato nativo sia in Jpeg per la comunicazione esterna, e quindi posso vedere la grafica o l'immagine con un normale visualizzatore d'immagini e lo posso far vedere agli altri. Bisogna prestare molta attenzione attenzione a non lasciare il file per Gimp in Jpeg salvandolo sempre di nuovo con il suo formato nativo per poterci lavorare su.

Roberto Neri