html e css - 2 | webmaster & webdesigner

33
HTML e CSS [2] Synergia – Matteo Magni

Upload: matteo-magni

Post on 29-Nov-2014

491 views

Category:

Technology


0 download

DESCRIPTION

Seconda lezione modulo HTML e CSS del corso per WebMaster & WebDesigner 2013

TRANSCRIPT

Page 1: Html e Css - 2 | WebMaster & WebDesigner

HTML e CSS [2]Synergia – Matteo Magni

Page 2: Html e Css - 2 | WebMaster & WebDesigner

Elenchi

<ol>

<li value="30"> imposta a 30 il numero di questa voce di elenco.

<li value="40"> imposta a 40 il numero di questa voce di elenco.

<li> attribuisce a questa voce di elenco il numero 41.

</ol>

<ul>

<li>Informazioni non ordinate.</li>

<li>Informazioni ordinate</li>

<li>Definizioni</li>

</ul>

http://www.diodati.org/w3c/html401/struct/lists.html

Page 3: Html e Css - 2 | WebMaster & WebDesigner

Liste - Menu

<div id="navigation_1">

<ul>

<li id="home"><a href="#" title="Home ">Home</a></li>

<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>

<li id="azienda"><a href="#" title="azienda">azienda</a></li>

</ul>

</div>

<div id="navigation_2">

<ul>

<li id="home"><a href="#" title="Home ">Home</a></li>

<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>

<li id="azienda"><a href="#" title="azienda">azienda</a></li>

</ul>

</div>

Lo formatteremo tramite i css

Page 4: Html e Css - 2 | WebMaster & WebDesigner

Elenchi di definizioni

• DL, DT, DD

Gli elenchi di definizioni si differenziano solo leggermente dagli altri tipi di elenchi per il fatto che le voci di elenco consistono di due parti: un termine e una descrizione. Il termine è fornito per mezzo dell'elemento DT ed è vincolato a contenuto in riga. La descrizione è data con l'elemento DD che racchiude contenuto a livello di blocco.

<dl>

  <dt>Dweeb</dt>

  <dd>persona giovane ed eccitabile che può maturare diventando un Nerd o un Geek</dd>

  <dt>Hacker</dt>

  <dd>un abile programmatore</dd>

</dl>

http://www.diodati.org/w3c/html401/struct/lists.html

Page 5: Html e Css - 2 | WebMaster & WebDesigner

Collegamenti

• Nell'esempio che segue, l'elemento A definisce un collegamento. L'ancora sorgente è il testo "sito Internet del W3C" e l'ancora di destinazione è "http://www.w3.org/":

• <a href="http://www.w3.org/">sito Internet del W3C</a>

http://www.diodati.org/w3c/html401/struct/links.html

Page 6: Html e Css - 2 | WebMaster & WebDesigner

Collegamenti - Ancore

• Usare attributo name:<A name="ancora­vuota"></A>

<EM>...dell'HTML...</EM>

<A href="#ancora­vuota">Collegamento ad ancora vuota</A>

• Usare attributo id:<H2 id="sezione2">Sezione due</H2>

...successivamente nel documento

<P>Fate riferimento alla <A href="#sezione2">Sezione due</A> più sopra

Page 7: Html e Css - 2 | WebMaster & WebDesigner

Collegamenti – Ancore (2)

• Usare id o name? Gli autori dovrebbero considerare i seguenti aspetti, quando devono decidere se usare id o name per un nome di ancora:

– L'attributo id può essere più che un semplice nome di ancora (ad es., un selettore per fogli di stile, un identificatore di elaborazione, ecc.).

– Alcuni programmi utente più vecchi non supportano le ancore create con l'attributo id.

– L'attributo name consente nomi di ancora più ricchi (per mezzo di entità).

Page 8: Html e Css - 2 | WebMaster & WebDesigner

Collegamenti url

• Quando si inserisce l'url per un link ad un documento HTML, questo può essere indirizzato in maniera assoluta.

– http://www.magni.me/pippo/pluto.html

In questo caso ci si riferisce al documento presente sull'host denominato www.magni.me, presente nella sottodirectory pippo e avente nome pluto.html

– /pippo/pluto.html

In questo caso ci si riferisce ad un documento pluto.html presente nella directory di primo livello /pippo presente nello stesso server che richiama tale Esempio:

– ../paperino/pippo.html

In questo caso si invoca un file che si trova in una directory denominata paperino la quale è allo stesso livello gerarchico della directory in cui è presente il file che lo invoca.

Sempre che non ci siano meccanismi di rewrite url

Page 9: Html e Css - 2 | WebMaster & WebDesigner

Collegamenti - title

• Questo attributo offre informazioni per la consultazione relative all'elemento per il quale è impostato.

• A differenza dell'elemento TITLE, che offre informazioni su un intero documento e può apparire una volta soltanto, l'attributo title può chiosare un qualsiasi numero di elementi. Si consulti la definizione di un elemento per verificare se esso supporta questo attributo.

• I valori dell'attributo title possono essere rappresentati dai programmi utente in una varietà di modi.

http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.3

Page 10: Html e Css - 2 | WebMaster & WebDesigner

Collegamenti - title

Per esempio, i browser visuali mostrano frequentemente il titolo come un "consiglio utile" (un breve messaggio che appare quando il dispositivo di puntamento si ferma su un oggetto). I programmi utente di tipo acustico possono, in un contesto analogo, dire a voce l'informazione presente nel title. Ad esempio, impostare tale attributo in un collegamento consente ai programmi utente (visuali e non visuali) di dire agli utenti qualcosa sulla natura della risorsa collegata:

Ecco una foto di  

<A href="http://someplace.com/neatstuff.gif" title="Una mia immersione con l'autorespiratore">

   me in immersione con l'autorespiratore l'estate scorsa

</A>

...dell'altro testo...

Page 11: Html e Css - 2 | WebMaster & WebDesigner

Immagini

<img src="pippo.png"

     alt="Una foto della mia famiglia al lago.">

http://www.diodati.org/w3c/html401/struct/objects.html

Page 12: Html e Css - 2 | WebMaster & WebDesigner

Risorse esterne

Page 13: Html e Css - 2 | WebMaster & WebDesigner

Attributo ALT

<IMG src="mappasito.gif" alt="Mappa del sito di synergia" longdesc="mappasito.html"/>

• L'attributo alt specifica il testo alternativo che è riprodotto quando l'immagine non può essere visualizzata. I programmi utente devono riprodurre il testo alternativo quando non possono supportare le immagini, quando non possono supportare un certo tipo di immagine o quando sono configurati per non visualizzare immagini.

http://www.diodati.org/w3c/html401/struct/objects.html#adef-alt

Page 14: Html e Css - 2 | WebMaster & WebDesigner

Se manca l'immagine?

Browser testuale

Page 15: Html e Css - 2 | WebMaster & WebDesigner

Se manca l'immagine?

Chrome Firefox

Page 16: Html e Css - 2 | WebMaster & WebDesigner

La ballata dell'alt tooltip

• Alcuni browser mostrano l'attributo alt comeToolTip quando il cursore passa sull'immagine.

• E' un errore, il testo alt è uno strumento di accessibilità. Non ha senso mostrare test alt ridondanti che il visitatore normodotato può già vedere.

Page 17: Html e Css - 2 | WebMaster & WebDesigner

Immagini decorative?

• Per le immagini senza significato, come le gif di spaziatura usate alt=” ”

• Non andiamo a complicare la vita all'utente con alt privi di significato

Corso di HTML<img src=”spazio.gif” alt=”gif di spaziatura”/>5

Se l'immagine non c'è non vedremo frasi inutili.

Page 18: Html e Css - 2 | WebMaster & WebDesigner

Uso di file esterni, multimedialità ed animazioni

Se volete inserire file multimediali (audio e video), oppure effetti grafici particolari scritti in qualche linguaggio di programmazione, ricordatevi sempre di fare attenzione al peso dei file che state inserendo. Siamo infatti sul web e dunque tutti i file, in un modo o nell'altro, dovranno essere scaricati dal visitatore del vostro sito per essere correttamente visualizzati.

http://www.diodati.org/w3c/html401/struct/objects.html

Page 19: Html e Css - 2 | WebMaster & WebDesigner

Image & Link

<a href="http://www.w3.org/Status" title="W3C's Open Source">

<img src="http://www.w3.org/Icons/WWW/w3c_home_nb" alt="W3C" width="72" height="47">

</a>

I link possono essere anche immagini, che se inserite all'interno del tag <a> risultano “cliccabili”

Page 20: Html e Css - 2 | WebMaster & WebDesigner

Tools for WebMaster

Di fronte a

• HTML

• Css

• Javascript

non siamo soli

Page 21: Html e Css - 2 | WebMaster & WebDesigner

Tools - Firebug

• Firebug è un'estensione di Mozilla Firefox che permette il debug, la modifica e il monitoraggio di tutti gli aspetti di una pagina web, come i fogli di stile, il codice HTML, la struttura DOM e il codice JavaScript (wikipedia)

Page 22: Html e Css - 2 | WebMaster & WebDesigner

Tools – Web developer toolbar

• Web Developer è un'estensione per Mozilla Firefox e i browser basati su Gecko (Flock e Seamonkey) che aggiunge al browser una toolbar con molti strumenti utili ai web developer. (wikipedia)

Page 23: Html e Css - 2 | WebMaster & WebDesigner

Tools - Chrome

Page 24: Html e Css - 2 | WebMaster & WebDesigner

Tools - IEInternet Explorer Developer Toolbar

http://www.microsoft.com/en-us/download/details.aspx?id=18359

Page 25: Html e Css - 2 | WebMaster & WebDesigner

Frames

In HTML i frame consentono agli autori di presentare i documenti in viste multiple, che possono essere finestre indipendenti o sottofinestre. Le viste multiple offrono ai progettisti un modo per mantenere determinate informazioni visibili, mentre altre viste sono fatte scorrere o sono sostituite. Ad esempio, all'interno della stessa finestra, un frame potrebbe mostrare un'insegna statica, una seconda un menu di navigazione ed una terza il documento principale, che può essere fatto scorrere o può essere sostituito navigando nel secondo frame.

http://www.diodati.org/w3c/html401/present/frames.html

Page 26: Html e Css - 2 | WebMaster & WebDesigner

Frames (2)<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Frameset//EN"

   "http://www.w3.org/TR/html4/frameset.dtd">

...

<frameset cols="20%, 80%">

  <frameset rows="100, 200">

      <frame src="frame1.html">

      <frame src="frame2.html">

  </frameset>

  <frame src="frame3.html">

  <noframes>

.....contenuto per chi non supporta i frame

  </noframes>

</frameset>

</html>

Page 27: Html e Css - 2 | WebMaster & WebDesigner

Frame (3)

Obiettivo: riutilizzare il codice già scritto

Col tempo ci si è accorti che il menu, l'header e il footer venivano ripetuti uguali in tutte le pagine.

Page 28: Html e Css - 2 | WebMaster & WebDesigner

Frames - Target

• Assegnando un nome ad un frame tramite l'attributo name, gli autori possono riferirsi ad esso come al "bersaglio" di collegamenti definiti da altri elementi. L'attributo target può essere impostato per elementi che creano collegamenti (A, LINK), mappe immagine (AREA) e moduli (FORM).

• Si consulti per favore la sezione sui nomi di frame di destinazione per informazioni sui nomi di frame riconosciuti.

• Questo esempio illustra come le destinazioni consentano la modifica dinamica del contenuto di un frame. In primo luogo definiamo un frameset nel documento frameset.html, mostrato qui:

Page 29: Html e Css - 2 | WebMaster & WebDesigner

Frames – Target (2)

• Tale meccanismo sembrava fornire una buona esperienza di navigazione e permetteva al webmaster di non ripetere codice

• DRY -Don't repeat yourself

Allora, perché non si usa più??

Page 30: Html e Css - 2 | WebMaster & WebDesigner

Frames are Evil

• I frame danno grossi problemi di usabilità

• Spesso capitava di raggiungere pagine indicizzate ma non avere a disposizione il menu per navigare

• Non sono molto graditi dai motori di ricerca

Esempio:

http://www.phing.info/docs/guide/current/http://www.phing.info/docs/guide/current/chapters/ProjectComponents.html

Page 31: Html e Css - 2 | WebMaster & WebDesigner

iFrame

• L'iframe (dall'inglese inline frame) in informatica è un Elemento HTML. Si tratta infatti di un frame "ancorato" all'interno della pagina, equivale cioè ad un normale frame, ma con la differenza di essere un elemento inline (interno) della pagina, non esterno.

• L'iframe viene generalmente utilizzato per mostrare il contenuto di una pagina web, o di una qualsivoglia risorsa, all'interno di un riquadro in una seconda pagina principale.

• Nel linguaggio HTML l'iframe viene rappresentato tramite il tag <iframe></iframe>.

Page 32: Html e Css - 2 | WebMaster & WebDesigner

iFrame (2)

• L'iframe ha gli stessi attributi del tag <frame>, i principali sono: width, height, src, frameborder che rappresentano rispettivamente la larghezza, l'altezza, il file d'origine da visualizzare e la dimensione del bordo. Può inoltre sostenere l'attributo style o comunque una classe di stile CSS.

• A causa di alcune truffe informatiche che hanno sfruttato talune vulnerabilità dei browser pur essendo una risorsa utile e di per sé innocua, l'iframe ha ormai una fama ingiustamente negativa.

• In ogni caso, per questioni di accessibilità e usabilità, ne è sconsigliato l'utilizzo dalle nuove direttive del W3C.

Spesso ce li fanno usare i servizi esterni

Page 33: Html e Css - 2 | WebMaster & WebDesigner

Domande?

Slide:

http://cypher.informazione.me/

Code:

https://github.com/inFormazione/Cypher/

mail:

[email protected]