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

1. HTML e CSS [2]
Synergia – Matteo Magni

2. Elenchi
http://www.diodati.org/w3c/html401/struct/lists.html
<ol> <ul>
<li value="30"> imposta a 30 il <li>Informazioni non
numero di questa voce di ordinate.</li>
elenco. <li>Informazioni ordinate</li>
<li value="40"> imposta a 40 il <li>Definizioni</li>
numero di questa voce di
elenco. </ul>
<li> attribuisce a questa voce
di elenco il numero 41.
</ol>

3. Liste - Menu
<div id="navigation_1"> <div id="navigation_2">
<ul> <ul>
<li id="home"><a href="#" <li id="home"><a href="#"
title="Home ">Home</a></li> title="Home ">Home</a></li>
<li id="contatti"><a href="#" <li id="contatti"><a href="#"
title="Contatti">Contatti</a></li> title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" <li id="azienda"><a href="#"
title="azienda">azienda</a></li> title="azienda">azienda</a></li>
</ul> </ul>
</div> </div>
Lo formatteremo
tramite i css

4. Elenchi di definizioni
http://www.diodati.org/w3c/html401/struct/lists.html
• DL, DT, DD <dl>
Gli elenchi di definizioni si <dt>Dweeb</dt>
differenziano solo leggermente dagli
altri tipi di elenchi per il fatto che le <dd>persona giovane ed
voci di elenco consistono di due parti: eccitabile che può
un termine e una descrizione. Il maturare diventando un
termine è fornito per mezzo Nerd o un Geek</dd>
dell'elemento DT ed è vincolato a
<dt>Hacker</dt>
contenuto in riga. La descrizione è
data con l'elemento DD che <dd>un abile
racchiude contenuto a livello di programmatore</dd>
blocco.
</dl>

5. Collegamenti
http://www.diodati.org/w3c/html401/struct/links.html
• 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>

6. 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

7. 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à).

8. 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

9. Collegamenti - title
http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.3
• 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.

10. 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...

11. Immagini
http://www.diodati.org/w3c/html401/struct/objects.html
<img
src="pippo.png"
alt="Una foto
della mia famiglia
al lago.">

12. Risorse esterne

13. Attributo ALT
http://www.diodati.org/w3c/html401/struct/objects.html#adef-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.

14. Se manca l'immagine?
Browser testuale

15. Se manca l'immagine?
Chrome Firefox

16. 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.

17. Immagini decorative?
• Per le immagini senza Corso di HTML<img
significato, come le gif src=”spazio.gif”
di spaziatura usate alt=”gif di
alt=” ” spaziatura”/>5
• Non andiamo a
complicare la vita Se l'immagine non
all'utente con alt privi di c'è non vedremo
significato frasi inutili.

18. Uso di file esterni, multimedialità
ed animazioni
http://www.diodati.org/w3c/html401/struct/objects.html
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.

19. Image & Link
<a I link possono essere
href="http://www.w3.or
g/Status" title="W3C's anche immagini, che
Open Source"> se inserite all'interno
<img
src="http://www.w3.org
del tag <a> risultano
/Icons/WWW/w3c_home_nb “cliccabili”
" alt="W3C" width="72"
height="47">
</a>

20. Tools for WebMaster
Di fronte a
• HTML
• Css
• Javascript
non siamo soli

21. 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)

22. 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)

23. Tools - Chrome

24. Tools - IE
Internet Explorer Developer Toolbar
http://www.microsoft.com/en-us/download/details.aspx?id=18359

25. Frames
http://www.diodati.org/w3c/html401/present/frames.html
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.

26. 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>

27. 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.

28. 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:

29. 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ù??

30. 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

31. 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>.

32. iFrame (2)
Spesso ce li fanno usare i servizi esterni • 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.

33. Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me