Webdesign for Dummies [lezione 4]

Nella lezione precedente abbiamo visto i tag per la formattazione del testo. Adesso vedremo le immagini e gli oggetti multimediali.

Il tag IMG

Il tag per l'inserimento delle immagini è:

E' uno di quei tag che si aprono e si chiudono subito, non racchiude porzioni di testo, quindi per correttezza, in fondo bisogna inserire un / per chiuderlo. Il tag ha i seguenti attributi:

• alt="testo" necessario per inserire una descrizione dell'immagine in modo che appaia al posto dell'immagine se questa non fosse disponibile o visualizzabile. Infatti sta per alternative text. Con le nuove disposizioni standard, l'attributo alt è necessario per l'accessibilità.


• height/width che serve a dare all'immagini delle dimensioni massime. Non sono necessari.


• name="testo". Come il name del tag a serve a dare un nome univoco all'immagine in modo che possa risultare accessibile script e fogli di stile. In ogni caso è meglio usare un id.


• src="URL". L'indirizzo assoluto o relativo all'immagine. Senza questo l'immagine non verrà ovviamente visualizzata.

Usi e formati di img

L'url del tag img deve finire con uno dei tre formati di immagini compatibili col web: .gif, .jpg/.jpeg o .png. Le immagini possono essere:

• Semplici immagini


• Links aggiungendo il tag a e rendendo l'immagine linkabile.


• Mappa immagine. Come i link le mappe sono delle immagini che non portano ad un solo indirizzo ma hanno varie aree cliccabili per andare in più posti.

Con la separazione presentazione/contenuto ora si tende ad inserire le immagini che non fanno parte dei contenuti nel css come sfondi o immagini decorative, mentre le immagini nei post devono essere messe nell'html in quanto contenuti della pagina. Questo per migliorare sempre l'accessibilità dei contenuti.

Caricamento rapido delle immagini

Dovete sapere che quando il browser carica una pagina, salva tutte le immagini nella cache, ovvero in uno spazio temporaneo del pc. Questo permette di caricare una sola volta la stessa immagine invece di ricaricarle tutte le volte da capo. Quindi, per velocizzare ulteriormente questo processo, è preferibile riutilizzare quando possibile, la stessa immagine, evitando doppie copie su altri spazi. Se dovete usare la stessa immagine 10 volte, salvatela sul sito e caricate solo quella, cancellando le copie con nomi diversi che avete altrove. Puntando allo stesso file, il browser impiegherà meno tempo per caricarle.

Per quanto riguarda le immagini grandi, è sempre meglio usare delle anteprime piccole che rimandano all'immagine grandi, oppure dei pop-up viewer per ingrandirle. Da evitare un resize automatico dell'immagine. Basta fare una prova per accorgersi che l'immagine viene visualizzata subito grossa e una volta caricate tutte le immagini viene ridimensionata, deformando le pagine. Meglio fare delle preview a parte e ingrandirle in seguito o linkando gli originali.

Mappe immagine

Passiamo ora alle mappe immagine. Le mappe immagine sono delle semplici immagini che funzionano, appunto come una mappa. Prendiamo, ad esempio, una cartina dell'Italia. Immaginiamo ora che per ogni regione ci sia un link al sito della regione. Con una mappa immagine è possibile realizzarlo in quanto viene associato un link per ogni area creata con delle coordinate. Per realizzare una mappa immagine vi rimando a questi tutorials:

Mappe immagine con Dreamweaver

Mappe immagine con Gimp

Mappe immagine con Photoshop

Se non disponete di un programma come dreamweaver o comunque di un programma che vi permette di tagliare l'immagine in zone, potete sempre scrivere il codice a mano, anche se è più lungo. Ecco qui come potete fare passo passo:

• Prima di tutto create la vostra immagine ed inseritela col codice img normale


• Al tag img aggiungete questa parte usemap="#Map". Il nome è personalizzabile potete anche chiamarlo #pippo se preferite. Se avete più mappe immagine, dategli un nome specifico, come cartina del mondo per esempio.


• Adesso aprite un tag map dandogli il nome Map o pippo o quello che avete dato dopo il cancelletto. Mi raccomando, il cancelletto non mettetelo qui ma solo nel campo usemap di img:
  CODICE

  <map name="Map">


• Ora dovete mettere delle aree cliccabili. Per fare questo dovete mettere le coordinate di partenza e di fine della forma, ovviamente specificandola. Esistono 3 tipi di forme che potete dare all'area cliccabile. Il rettangolo, il cerchio e la forma poligonale, ovvero con più lati.


• Per dare una forma si usa l'attributo shape: shape="rect" oppure shape="circle" infine shape="poly" rispettivamente per rettangolo, cerchio e poligono. Subito dopo si danno le coordinate.


• Per il rettangolo ci sono 4 valori da inserire. Le coordinate di partenza e quelle di fine del rettangolo, ovvero il primo px in alto a sinistra e l'ultimo in basso a destra. Le coordinate si scrivono nell'ordine di x,y. x è l'asse delle orizzontale, mentre y verticale. Se vogliamo mappare tutta un'immagine si parte dall'angolo in alto che avrà coordinate 0,0. I secondi valori daranno la distanza da quei punti in orizzontale o verticale. quindi se le coordinate sono 0,0,100,120. Il rettangolo sarà largo 100 e alto 120 a partire dall'angolo in alto a sinistra. il codice sarà:
  CODICE

  <area shape="rect" coords="0, 0, 100, 100">


• Per il cerchio i valori sono 3. Ci sono sempre le x e y di partenza che indicano il centro del cerchio e un terzo valore r che è il raggio del cerchio che è misurato in px. Il codice è :
  CODICE

  <area shape="circle" coords="50,50, 20">



• Il poligono invece è più complesso. Prevede l'inserimento di tutte le coordinate dei lati a coppie x e y. Si parte dal primo lato e si continua a definire la forma lato per lato. Ecco ad esempio un triangolo approssimato:
  CODICE

  <area shape="poly" coords="0,0, 0,40, 30,40">
  .
  Il triangolo parte dall'angolo in alto a sinistra, poi crea un lato sempre attaccato allo 0 però alto 40px e poi resta alto 40px e si sposta di 30px a destra. In pratica un triangolo rettangolo.



• Per ultimo vanno inseriti i collegamenti con href e l'alt che descrive l'area linkata per l'accessibilità.Ecco il codice completo:
  CODICE

  <img><map name="mappa">
  <area shape="rect" coords="0, 0, 100, 100" href="index.html" alt="torna in home">


• Potete anche aggiungere un target per dirgli come aprire i links, con _self si apriranno nella stessa pagina, con _blank in una nuova pagina o scheda:
  CODICE

  <area shape="rect" coords="0, 0, 100, 100" href="index.html" alt="torna in home" target="_blank">

In ogni caso suggerisco sempre di aiutarsi con qualche programma che vi aiuti a mappare le immagini in automatico, soprattutto se pensate a forme poligonali. Inoltre è più facile trovare le coordinate giuste.

Oggetti Embed

In una pagina web è possibile inserire altre cose oltre alle immagini come video, filmati flash oppure applet Java. Queste cose possono essere mostrati con objet o applet però quest ultimo è deprecato. Object si usa con tutti i media. C'è anche embed però non è standard o validabile dal w3c e viene usato per i media che necessitano dei plug-in per essere visualizzati. Verrà introdotto come standard in HTML5, ma nella versione 4 non figura come ufficiale.

Object

Il tag object è stato progettato e pensato per visualizzare tutti i tipi di oggetto, come applets, video e flash e anche le immagini volendo. Mi raccomando, ricordatevi di non usare applet in quanto con HTML5 non sarà più supportato. E' sempre meglio evitare tag deprecati in modo che con le nuove versioni il sito continuerà ad essere visualizzato correttamente.
Gli attributi principali di che tratteremo in questa lezione sono:

• data


• height


• name


• type


• width

Andiamo ad analizzarli uno per uno.

-data è l'url relativo o assoluto dell'oggetto da visualizzare. Mentre in un embed è src, qui si dichiara con data.
-height e width ovviamente rappresentano l'altezza e la larghezza dell'oggetto.
-name è il nome dell'oggetto per riferirvisi con degli scripts. Coi nuovi standard però si è optato per l'uso di id.
-type è il tipo di oggetto che verrà visualizzato.

Ecco un esempio di tag object che visualizza un'immagine:



Per fare in modo che non ci siano problemi di visualizzazione si tende ad usare un testo alternativo. Potrebbe anche contenere dei tag. Nel caso che per un motivo o per un altro un object non dovesse essere visualizzato, viene mostrato il testo alternativo. E' possibile inserire a questo punto un tag img in modo da far vedere comunque la foto. Tutto quello che si trova all'interno viene visualizzato solo se object non funziona, quindi non ne verrebbero visualizzate due.
Esistono altri attributi di object e anche un tag param però preferisco parlarvene solo in superficie. In genere questo tag, così come embed viene fornito automaticamente dai servizi di hosting, come deviantArt per i lavori linkati dal sito o da youtube per i video ed essi contengono tutto il necessario per funzionare correttamente.

Embed

Embed funziona in modo simile ad object. A parte che se viene usato da qualche sito, vi da il codice completo, ma se volete includere il tutto in un embed dovete sapere che le cose cambiano così:

-data diventa src
-il testo alternativo che prima poteva essere inserito tranquillamente dopo la chiusura del primo tag viene inserito dentro un altro tag noembed.

Ecco come cambia lo stesso tag di prima:



In ogni caso le raccomandazioni standard preferiscono l'uso del tag object e di usare embed come ultima spiaggia o come contenuto alternativo di object.

Inline frames o iframe

Il tag <iframe> permettono ad un documento HTML di essere incluso in un'altra pagina web in una finestra scrollabile. Un iframe è un oggetto di tipo inline come le immagini, non come i div, quindi non lasciano spazi a meno che non sia diversamente specificato tramite css. Ecco i suoi attributi principali:

• frameborder (0 o 1) crea un bordo al'iframe, se lo mettete a 0 sparisce il bordo, nel caso ve lo faccia vedere di base.


• src per inserire l'url assoluto o relativo delle pagine web da includere


• width & height che sono l'altezza e la larghezza dell'iframe, da adattare se non volete ad esempio mostrare una scrollbar (utile su forumfree per inserire un menù jquery o particolare)


• scrolling (yes, no, auto) stabilisce se e come viene inserita la scrollbar dei contenuti

Per maggiori informazioni su come inserire un menù jquery su forumfree leggete qui: Menù a minitabs.

Nella prossima lezione introdurremo le tabelle come strumento per contenere dati. Vedremo poi perchè.