Home . > . Tecnica informatica
Libro SCIENZE - Gruppo TECNICA informatica
HTML- Hyper Text Mark-up Language
Introduzione
Linguaggio a marcatura (norma ISO 8879 SGML - Standard Generalized Mark-up Language) per ipertesti.
Serve a creare le pagine dei siti internet.
Consigli per un buo sito
Realizzare una 'navigazione' nel sito che sia facile da imparare:
"Se i vostri visitatori devono impiegare tempo peer imparare come funziona avranno meno energia per
recepire i contenuti" (J.Fleming).
Su ogni pagina lasciate elementi fissi, e soprattutto menù invariabli.
Date modo all'utente di muoversi avanti e indietro senza far ricorso al browser.
Ogni pagina, ma soprattutto la Home page deve essere veloce da caricare.
Può sembrare divertente riempire una pagina di animazioni, ma da l'impressione di disordine e soprattutto
di dilettantismo.
In ogni momento devo sempre sapere dove sono: evitare 'vicoli ciechi'.
Leggere sul video è più stancante; lasciare spazi ogni 10 righe; impaginate a 'bandiera'.
----------------------------
"Il mestiere del web", manuale di sopravvivenza per web designer e committenti, di Sofia Postai.
(www.vocabola.com/ilmestieredelweb)
----------------------------
www.mestierediscrivere.com/index.php/scrivere_web/ di Luisa Carrada.
---------------------------
Home page
La prima pagina che si vede collegandosi ad un sito internet:
- utenti che vedono il sito per la prima volta;
questi utenti si pongono alcune domande: dove sono? come trovo ciò che sto cercando?
Dunque fornire identità e orientamento.
- utenti che già lo conoscono;
questi utenti invece cercano soprattutto informazioni più recenti, aggiornamenti.
La home page dovrebbe scaricarsi velocemente; quindi usate immagini piccole e di poco peso (pochi Kbyte);
evitate operazioni lente e complicate, come ad esempio i filmati (da mettere in pagine interne).
Identità
Cosa fa questo sito? Inserire il logo in evidenza. Andrebbe posto in alto a sinistra perchè è il posto
più importante della pagina.
Inserire vicino al logo una piccola frase esplicativa che introduca in maniera chiara e accattivante a cosa
serve il sito. Evitare slogan: si deve soprattutto capire.
L'intera pagina, nel suo insieme, deve presentare informazioni semplici ed efficaci sull'dentità del sito:
l'home page deve indicarlo con chiarezza.
Navigazione
Dove posso andare? Cosa posso trovare? Come faccio ad arrivarci?
Queste funzionalità possono essere fatte in tre modi.
- Con i menu.
I menu dovrebbero utilizzare etichette che indicano il più precisamente possibile quale pagina vedrò.
L'uso di icone senza etichette è sconsigliabile in quanto non tutti conoscono il significato delle icone.
Normalmente un menu va posto in una barra orizzontale sotto il logo, oppure nella colonna a sinistra.
- Con directory.
Descrivono le sezioni principali del sito. Con un solo clic consentite all'utente di entrare in una
sezione che gli interessa, da dove può effettuare scelte più precise.
- Con una ricerca.
Utile se il vostro sito ha molte pagine.
Possibile una combinazione di tutte e tre le possibilità.
Novità
Generalmente l'home page è la pagina che presenta le novità. Si mettono gerarchicamente dopo il logo e
la navigazione. Ogni novità va accompagnata dalla data: l'utente può così concentrarsi su quelle che
non ha visto, od eventualmente, ritornare sulle ultime anche se già viste.
Utenti registrati
Inserire nell'home page la form per l'inserimento di nome utente e password. Alcuni siti utilizzano
un link ad una pagina di ingresso vera e propria. Poichè non occupa molto spazio inserire direttamente
sulla home page, evitando un link in più.
Banner
Al momento della creazione della pagina prevedete già lo spazio, per evitare che siano mal integrati
nella pagina.
Devono essere inserite gerarchicamente dopo il logo, magari anche dopo il menu, che sono le parti più
importanti di un sito.
Inserirli prima del logo da l'impressione che siano più importanti del sito stesso.
Normalmente sono inseriti in una colonna apposita sul lato destro della pagina.
Evitare di inserirne troppi; spesso i banner di piccole dimensioni sono comunque efficaci.
Prevedete banner fissi e alcuni animati; tutte le animazioni distraggono e sono anche poco gradite:
usatele con parsimonia.
Intro e copertina
Le intro sono moduli animati usate per introdurre l'ingresso al sito vero e proprio, ed hanno la
possibilità di saltarle, soprattutto per gli utenti che già lo conoscono.
Le copertine sono costituite da un'unica grande immagine, che hanno un unico link al sito vero
e proprio.
Sono lente da caricare e normalmente poco gradite all'utente, che perde tempo prima di vedere la Home
page vera e propria.
Da usare solo se c'è effettiva necessità, o per particolari motivi.
Usabilità
Più è ricco, più è denso di immagini, più ci sono gif animate, e più il sito è bello.
Però non è proprio così.
Secondo una ricerca della Stanford University in collaborazione con il Poynter Institute, il 92%
degli intervistati si sofferma per prima cosa sui titoli e gli articoli, mentre il 64% guarda le
fotografie, mentre solo il 20% guarda altro.
Su Internet è il contenuto che guida: fondamentale il concetto di usabilità.
L'usabilità è un parametro molto importante. Nel web prima ho esperienza dell'usabilità di un sito,
poi svolgo le funzioni per le quali il sito è progettato.
-----------------------------
Webmaster
Dal corso di Wolfgang Cecchin
Il mestiere del webmaster non consiste tanto nel conoscere nei minimi dettagli il codice HTML,
quanto piuttosto nel sapere come il codice HTML verrà visualizzato sul computer dell'utente:
infatti uno dei lavori più difficili è quello di riuscire a far vedere correttamente il proprio
sito con i browser e le piattaforme più svariate.
I files scaricati dal web vengono memorizzati in una particolare cartella del computer che prende
il nome di cache. In Internet Explorer è possibile visualizzarla utilizzando i comandi:
Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file
L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML
(il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio
(HTML 2.0, HTML 3.2, HTML 4.0); e - da un certo punto in poi - l'HTML si è evoluto in XHTML (si tratta
dell'HTML riformulato come linguaggio XML - ne sono già state rilasciate due versioni).
L'ultima rilasciata è HTML 4.01 del 24 dicembre 1999.
Cominciare a studiare l'HTML e non l'XHTML, in quanto alcuni concetti dell'XHTML richiedono già una
certa esperienza, e poi L'HTML è più immediato e consente di incominciare subito a produrre documenti web;
infine chi conosce l'XHTML non può non conoscere l'HTML.
La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster.
Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del
World Wide Web Consortium che riguardano il codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Poi apriamo il nostro primo tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
... altri tag ...
</html>
Un documento HTML è normalmente diviso in due sezioni:
Testa ()
Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve
essere letto e interpretato.
Questo è il luogo dove scrivere i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca),
script JavaScript o VbScript, fogli di stile, eccetera.
Corpo ()
Qui è racchiuso il contenuto vero e proprio del documento.
Questi sono i due tag che devono essere presenti in questa sezione:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
indica al browser che deve caricare il set di caratteri occidentale (e non il set di caratteri
giapponese).
<title>Nome del sito</title>
Il title è il titolo della pagina e compare in alto sulla barra del browser.
È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<<- menu tecnica informatica
HTML, !DOCTYPE switch
L'utilizzo di differenti per determinare il modo in cui un browser funziona e visualizza
il layout. In tal modo è possibile realizzare sia pagine retrocompatibili, sia pagine aderenti agli
standard.
La scelta viene demandata allo sviluppatore, che scegliendo il fornisce al browser le
istruzioni necessarie per funzionare in modalità 'standard' oppure 'non standard ma retrocompatibile'.
In modalità 'non standard' la pagina è visualizzata come nelle versioni precedenti del browser.
L'assenza o la presenza ed il tipo di determinano il modo in cui è visualizzata una pagina,
e non pochi problemi possono sorgere in fase di realizzazione di una pagina; tutto dipende da questo
tag che precede gli elementi (X)HTML.
I documenti SGML (Standard Generalized Markup Language) devono conformarsi ad una DTD (Document
Type Definition).
Il consorzio per gli standard del web, W3C, ha definito l'HTML come una SGML e quindi aderire agli
standard internazionali ISO 8879.
La DTD di un documento (X)HTML definisce i tag e la sintassi per creare il documento.
La pagina (X)HTML valida deve contenere il <!DOCTYPE> (Document Type Declaration) che ne dichiara la
versione e la relativa DTD a cui è conforme.
Il <!DOCTYPE> doveva anche essere un'utile informazione per i browser, per istruirli esplicitamente
sul tipo di documento da processare.
Alla fine degli anni '90 i browser non solo non implementavano integralmente le specifiche del W3C (in
particolare per i CSS), ma sviluppavano tag e attributi proprietari.
Il W3C nel dicembre 1999 definiva l'ultima versione dell'HTML, la 4.01, per poi, a partire dal
2000, come XHTML che riformulava l'HTML non più come applicazione dello SGML, ma come applicazione
XML, un insieme ristretto dello SGML.
Il W3C sviluppava i CSS (Level 1 nel dicembre 1996, e Level 2 nel maggio 1998) che dovevano sostituire
tag ed attributi di layout, lasciando all' (X)HTML il solo originario compito di linguaggio di marcatura.
Il W3C nell'ottobre 1998 sviluppava lo standard per l'accesso al DOM (Document Object Model) adottando
l'ECMAScript, noto impropriamente come JavaScript.
Ultima modifica 02-05-2011
HTML, elenco comandi
Linguaggio a marcatura (norma ISO 8879 SGML - Standard Generalized Mark-up Language):
- i 'comandi' (marcatori, 'tag' in inglese) sono delimitati dai caratteri '<' e '>';
- i comandi sono letti e interpretati da un programma detto Browser (sfogliatore);
- viene visualizzato tutto ciò che si trova al di fuori dei marcatori;
- ogni marcatore può contenere attributi;
- un marcatore errato o sconosciuto al browser non provoca alcun messaggio di errore:
viene semplicemente ignorato.
MARCATORI GENERICI
<HTML> .. </HTML> inizio e fine documento HTML
attributi: VERSION=".."
<HEAD> .. </HEAD> informazioni generiche (non visualizzate)
STYLE=".." foglio di stile associato
<META> informazioni sul contenuto; utile per i motori di ricerca
<META NAME="AUTHOR" CONTENT="nome">
<META NAME="DESCRIPTION" CONTENT="breve descrizione del sito">
<META NAME="KEYWORDS" CONTENT="elenco parole chiave scienza, tecnica, ..">
<TITLE> .. </TITLE> titolo del documento;
appare nella 'History List' e nella parte alta del browser
<!-- commento --> viene ignorato
PER IL TESTO
<BODY> .. </BODY> inizio e fine del corpo del documento
attributi: BACKGROUND="nomefile" immagine di sfondo
BGCOLOR="codice" colore sfondo
TEXT="codice" colore del testo
LINK="codice" colore dei collegamenti
VLINK="codice" colore dei collegamenti non attivati
ALINK="codice" colore dei collegamenti attivati
codice colore: #rrggbb codice esadecimale del rosso (rr), del verde (gg)
e del blu (bb) secondo il sistema RGB.
(Per i colori vedi 'lista colori in fondo')
<Hn> .. </Hn> titolo; n=1:6 in ordine decrescente di grandezza carattere
<BR> ritorno a capo; i caratteri ASCII di Return e LineFeed sono ignorati
<HR> visualizza una riga orizzontale per tutta la lunghezza;
utile per separare parti del documento
attributi: SIZE =".." spessore in pixel della linea
WIDTH=".." linghezza in pixel, o in percentuale con %
ALIGN=".." allineamento
NOSHADE senza ombreggiatura
Allineamento (ALIGN)= LEFT, RIGHT, CENTER, JUSTIFY
<P> .. </P> il testo vero e proprio; inserisce i ritorni a capo
attributi: ALIGN=".."
<FONT> .. </FONT> definire il tipo, la grandezza e il colore dei caratteri
attributi: SIZE="n" altezza, da 1 a 7 (default=3)
COLOR="codice" colore
FACE="nome" tipo carattere
<font face="Symbol"> : caratteri speciali (vedi 'caratteri speciali' in Home)
<BIG> .. </BIG> ingrandisce il testo (si può nidificare)
<SMALL> .. </SMALL> rimpicciolisce il testo (si può nidificare)
<B> .. </B> grassetto
<I> .. </I> corsivo
<SUP> .. </SUP> apice
<SUB> .. </SUB> pedice
<PRE> .. </PRE> testo a spaziatura fissa e riconosce i ritorni a capo
&xxx caratteri speciali predefiniti:
xxx= lt : '<' gt : '>' nbsp : spazio
&#cod.ASCII visualizza il carattere con il codice ASCII
es.: cod.ASCII=123: '{' ; cod.ASCII=125: '}'
IMMAGINI, SUONI E MOVIMENTO
<IMG SCR="nomefile"> visualizza un'immagine (solo in formato GIF o JPEG)
BORDER=n =0 non visualizza il bordo, =1 visualizza un bordo
<BGSOUND SCR="nomefile"> esegue il file musicale (in formato MIDI, WAV o MP3)
LOOP=INFINITE lo ripete fino a che si rimane nella pagina
<MARQUEE> testo </MARQUEE> scritte in movimento
BEHAVIOR= tipo di scorrimento SCROLL (scorre), SLIDE (scivola), ALTERNATE (rimbalza)
SCROLLAMOUNT= numero di punti di spostamento della scritta ad ogni uscita
SCROLLDELAY= millisecondi tra un'uscita e l'altra della scritta
DIRECTION= utilizzato con BEHAVIOR per la direzione LEFT (sinistra), RIGHT (destra)
LOOP= quante volte la scritta deve scorrere, INFINITE (sempre)
BGCOLOR= colore della scritta
WIDTH= larghezza in pixel della scritta
HEIGHT= altezza in pixel della scritta
ALIGN= allineamento TOP, MIDDLE, BOTTOM
VSPACE= numero di pixel di spazio in verticale
HSPACE= numero di pixel di spazio in orizzontale
LINK
<A HREF='link'> ..testo.. </A> formato generale di un link:
'link' può essere un rimando ipertestuale o un indirizzo http o altro;
'..testo..' è ciò che appare sottolineato e quando il cursore vi passa
sopra diventa una 'manina'
<A HREF="#nome"> ..testo.. </A> rimando ipertestuale sullo stesso documento
..
<A NAME="nome"></A>
oppure
<span class="mw-headline" id="nome">
<A HREF="nomefile"> ..testo.. </A> rimando ipertestuale altra pagina
<A HREF="link"> <IMG SCR="nomefile" border=0> </A> rimando ipertestuale con immagine
border=0 : non appare il bordo intorno all'immagine
<A HREF="link" TITLE="spiega"> ..testo.. </A> con title appare un quadratino che spiega il link
<IMG SRC="nomefile" USEMAP="#nome"> rimandi ipertestuali su porzioni di un'immagine
<MAP NAME="nome">
<AREA SHAPE="rect" COORDS="y,x,y1,x1" HREF="nomefile" > parte dell'immagine
<AREA SHAPE="rect" COORDS="y2,x2,y3,x3" HREF="nomefile" TITLE="spiega" > parte dell'immagine
...
</MAP>
<A HREF="link" target="_blank"> ..testo..</A>
rimando ipertestuale che apre una finestra;
la nuova finestra ha caratteristiche standard.
Per definire una finestra con determinate caratteristiche usare:
<A HREF="#" OnClick=window.open("nomefile","nomefinestra","opzioni")> ..testo.. </A>
rimando ipertestuale che apre una finestra:
"nomefile" può essere un'immagine o una pagina html,
"opzioni" sono toolbar,directories,menubar,scrollbars,resisable = yes/no, width,heigt=n
LISTE
<UL> .. </UL> elenco semplice; ogni elemento è preceduto da <LI>
inserisce una riga prima e dopo
TYPE=DISC preceduto da un pallino pieno
CIRCLE " " vuoto
SQUARE " quadratino pieno
<DL> .. </DL> glossario: nome + spiegazione:
<DT> .. </DT> nome
<DD> .. </DD> spiegazione
TABELLE
Permettono la formattazione delle informazioni secondo i propri gusti estetici; qualsiasi esigenza estetica
e di formattazione verrà risolta con le tabelle.
Le tabelle si possono nidificare, e servono anche a creare l'impostazione della pagina con BORDER=0.
Immagini nelle celle:
specificare i valori di WIDTH e HEIGHT di <IMG> consente al browser di determinare le dimensioni della
cella in anticipo, e di tracciare la tabella prima di caricare l'immagine.
<TABLE> .. </TABLE> tabella;
fra i due marcatori specificare le righe e le colonne
WIDTH= larghezza tabella in pixel (n% in percentuale alla finestra)
HEIGHT= altezza tabella in pixel (n% in percentuale alla finestra)
BORDER= altezza del bordo, =0 no bordo, >0 bordo sempre più spesso
CELLSPACING= spazio tra celle e cella e bordo
CELLPADDING= spazio tra contenuto della cella e bordo cella stessa
COLOR colore sfondo tabella
BGCOLOR= colore sfondo tabella
BORDERCOLOR= colore del bordo (non funziona se BORDER=0 o non c'è)
BORDERCOLORLIGHT= colore del bordo più chiaro per l'aspetto tridimensionale
(non funziona se BORDER=0 o non c'è)
BORDERCOLORDARK= colore del bordo più scuro per l'aspetto tridimensionale
(non funziona se BORDER=0 o non c'è)
BACKGROUND="url" immagine da inserire come sfondo della tabella
ALIGN= allineamento al margine della finestra consentendo la visualizzazione di un testo a
LEFT (sinistra), CENTER, RIGHT (destra)
VALIGN= allineamento al margine della finestra TOP, BOTTOM
FRAME= lato del bordo esterno da visualizzare:
VOID, ABOVE, BELOW, HSIDES (lato superiore e lato inferiore), LHS (lato sinistro),
RHS (lato destro), VSIDES (lati destro e sinistro), BOX (tutti e quattro i lati), BORDER (come box)
RULES= bordi interni della tabella da visualizzare:
NONE, ALL
GROUPS, ROWS, COLS visualizza i bordi orizzontali tra le varie sezioni della tabella di
<THEAT>, <TBODY>, <TFOOT>
<CAPTION> .. </CAPTION> titolo della tabella
ALIGN allineamento TOP, BOTTOM
<THEAD> .. </THEAD> intestazione
<TBODY> .. </TBODY> corpo della tabella
<TFOOT> .. </TFOOT> parte finale della tabella
<COLGROUP> .. </COLGROUP> raggruppa le colonne di una tabella per applicarvi a tutte determinate
proprietà
<COL> .. </COL> come COLGROUP
<TH> .. </TH> riga intestazione
ALIGN allineamento LEFT, CENTER, RIGHT
VALIGN allineamento verticale TOP, MIDDLE, BOTTOM, BASELINE
NOWRAP blocco scorrimento testo
<TR> .. </TR> riga della tabella;
fra i due marcatori specificare le celle (colonne)
COLOR colore sfondo riga
BGCOLOR colore sfondo riga
BORDERCOLOR colore del bordo
BORDERCOLORLIGHT colore del bordo
BORDERCOLORDARK colore del bordo
ALIGN allineamento LEFT, CENTER, RIGHT
VALIGN allineamento verticale TOP, MIDDLE, BOTTOM, BASELINE
<TD> .. </TD> cella della tabella
ALIGN allineamento scritta orizzontale (LEFT, CENTER, RIGHT)
VALIGN allineamento scritta verticale (TOP, MIDDLE, BOTTOM)
COLOR colore sfondo cella
BGCOLOR colore sfondo cella
BORDERCOLOR colore del bordo
BORDERCOLORLIGHT colore del bordo
BORDERCOLORDARK colore del bordo
COLSPAN numero di colonne che ogni cella andrà a coprire
ROWSPAN numero di righe che ogni cella andrà a coprire
WIDTH altezza cella
HEIGHT lunghezza cella
NOWRAP blocco scorrimento testo
Per i parametri BGCOLOR, BORDERCOLOR, BORDERCOLORDARK e BORDERCOLORLIGHT se ci sono
più definizioni l'ordine sarà: TD, TH, TR, TABLE.
AVANZATE
<FORM> .. </FORM>
area della pagina che contiene campi di inserimento e operazioni
varie per effettuare ricerche, utilizzo di banche dati, e altro;
ACTION = "nomefile" nome file con comandi da eseguire (vedi PHP o ASP)
METHOD = "GET" invia i dati a 'nomefile'
<INPUT> .. </INPUT> definisce i campi da inserire nella FORM
TYPE = definisce il tipo di campo:
TEXT=testo, PASSWORD=per password, SUBMIT=pulsante, CHECKBOX=campo 'si/no'
RADIO= campo con diverse alternative (CHECKED=scelta iniziale),
IMAGE=immagine, HIDDEN=non visualizzato, ma il valore usato
RESET=pulsante per l'azzeramento dei campi
NAME = nome del campo
VALUE = valore predefinito del campo
<input name="news" type=text size="80" value="qui il testo di partenza">
<input type="image" src="puls-lente.jpg" alt="Cerca">
<TEXTAREA> .. </TEXTAREA> crea un'area testo delimitata.
COL = numero di caratteri per riga visibili
ROWS = numero di righe visibili
WRAP = se tornare a capo o no
<textarea name="news" rows="3" cols="80"> qui il testo di partenza </textarea>
Per dargli font e colore usare 'style':
<textarea name="news" rows="3" cols="80" style="font-family:Arial; font-size:14px">
<SELECT>...</SELECT>
Consente di effettuare delle scelte rappresentate dall'elemento OPTION.
Ha tre possibili attributi:
MULTIPLE per effettuare diverse selezioni,
NAME il nome che sarà inviato come coppia nome/valore,
SIZE specifica il numero di voci visibili.
L'elemento OPTION è utilizzato soltanto con SELECT e rappresenta una scelta fra diversi valori.
Ha due possibili attributi:
SELECTED per indicare l'opzione inizialmente selezionata;
VALUE per indicarne il valore rappresentato.
Riga singola con pulsante per scegliere:
<SELECT NAME="stati">
<OPTION VALUE="it">Italia
<OPTION VALUE="us">Stati Uniti
</SELECT>
Riga multipla (nell'esempio visualizza le prime 4 scelte ed evidenzia [SELECTED] la seconda):
<SELECT NAME="nazioni" SIZE=4 MULTIPLE>
<OPTION VALUE="it">Italia
<OPTION VALUE="us" SELECTED>Stati Uniti
...
</SELECT>
FRAMES
Suddivisione della pagina in più pagine.
Si possono inserire tutti i frames che servono e combinarli nel più svariato dei modi a seconda delle proprie
necessità.
<FRAMESET> .. </FRAMESET>
Possiede due attributi: ROWS (altezza della riga) e COLS (larghezza colonna).
<FRAMESET ROWS="150, 600"> : suddivide la pagina orizzontalmente in due parti (in pixel).
<FRAMESET COLS="25%, 75%"> : suddivide la pagina verticalmente in due parti (in %).
Al suo interno può contenere annidati altri elementi quali FRAMESET, FRAME o NOFRAME.
<FRAME> : proprietà del FRAMESET
attributi:
SRC="url" : definisce l'indirizzo del file html che verrà visualizzato nella sezione frame nel frameset.
NAME="nome" : nome assegnato al frame stesso
MARGINWIDTH="n" : rientro sui lati, destro e sinistro
MARGINHEIGHT="n" : rientro sui lati, superiore e inferiore
SCROLLING="yes|no|auto"
NORESIZE : evita al frame di essere ridimensionato
FRAMEBORDER="yes|no" : rendere visibili o meno i bordi dei frames
FRAMESPACING="n" : impostare spazio aggiuntivo intorno ai frames
TARGET : aprire il collegamento su un frame diverso da quello in cui si trova.
Per esempio creare un menu laterale in modo che i links richiamati dal menu siano visualizzati sulla pagina
principale.
Per fare questo si dovrà specificarne il nome, quello che è stato assegnato al frame.
<A HREF="paginax.htm" target="home"> </A>
Nel caso in cui non esistesse un frame con nome 'home' verrà aperta una nuova finestra del browser.
target="_blank": Apre il link in una nuova finestra, senza nome
target="_self" : Apre il link nel frame stesso (è così di default) L'esempio è qui
target="_parent" : Il documento viene caricato nel frameset precedente a quello corrente (più esattamente
nel frame genitore).
Il comportamento di _parent è particolarmente evidente in una struttura annidata in cui alcune pagine HTML
contengono a loro volta dei frameset.
target="_top" : Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame.
(Più esattamente il documento viene carictao nella parte piùalta ("top") della struttura, ed è questo
il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.
reindirizzamento
Al caricamento di una pagina passa ad un'altra pagina; utile se si è cambiata una pagina senza dover
modificare tutte le pagine che indirizzano a quella pagina non più esistente:
<meta http-equiv="Refresh" content="0;url=http://www.nomesito.it/pagina.htm">
("0 sono i secondi prima del redirect)
-----------------------------
I meta tag
Adesso che abbiamo terminato il nostro sito possiamo occuparci di farlo trovare dai motori di ricerca.
È utile allora impostare correttamente i meta tag all'interno della del documento: si tratta
di una serie di parole chiave e descrizioni, che aiutano i motori di ricerca a classificare il sito.
Abbiamo già visto il <title>, che è il titolo della pagina; ma il testo ivi contenuto può comparire
anche in seguito alla ricerca in un motore, come titolo del link.
Sarà dunque importante impostarlo in modo pertinente:
<title> ENCICLOPEDIA </title>
C'è poi il meta-tag "description" che permette di impostare una descrizione sintetica del sito stesso.
Anche in questo caso, la descrizione compare talvolta nei risultati della ricerca:
<meta name="description" content="ENCICLOPEDIA">
Infine il meta-tag "keywords" permette di indicare alcuni contenuti relativi al sito stesso.
Le keywords (a seconda del webmaster) compaiono separate da virgola, da punto e virgola, oppure senza
alcun segno di interpunzione:
<meta name="keywords" content="dizionario, scienza, tecnica, politica, economia ..">
È fortemente sconsigliabile l'inserimento di keyword "astute" non relative al contenuto effettivo del
sito per migliorare il posizionamento (tipo le ricercatissime "sesso", "mp3", ecc.).
Quando i motori di ricerca se ne accorgono, per lo più cancellano il sito dalle loro liste.
-----------------------------
Il DocType (DTD)
Il <!DOCTYPE> assume un aspetto di questo genere:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
Questa riga fornisce alcune informazioni sul documento:
HTML : il tipo di linguaggio utilizzato è l'HTML
PUBLIC : il documento è pubblico
W3C : il documento fa riferimento alle specifiche rilasciate dal W3C
- (è il segno "meno") le specifiche non sono registrate all'ISO (organizzazione di
standardizzazione Internazionale). Se lo fossero state, ci sarebbe stato un "+"
DTD HTML 4.01 Transitional : il documento fa riferimento a una DTD ("Document Type Definition" cioè
"Definizione del tipo di documento"); la versione di HTML supportata è la 4.01 "transitional"
EN : la lingua con cui è scritta la DTD è l'inglese
Se necessario, è possibile specificare l'indirizzo di riferimento a cui è possibile trovare la DTD:
per l'HTML non lo si fa quasi mai, perché gli URL a cui trovare la documentazione sono universalmente
noti.
Per quel che riguarda l'HTML le indicazioni possibili sono tre:
Strict: è una DTD particolarmente rigorosa: esclude ogni elemento che riguarda il layout (la cui
formattazione è affidata all'utilzzo dei CSS) e non è consentito l'uso degli elementi deprecati:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
http://www.w3.org/TR/html4/strict.dtd>
Transitional: è una versione temporanea, per consentire il passaggio da una specifica all'altra.
Nella DTD transitionali tag deprecati sono ammessi.
Questa DTD andrà bene nella maggior parte dei casi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
Frameset. È la DTD che riguarda i frames:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
http://www.w3.org/TR/html4/frameset.dtd>
Nelle ultime versioni il tipo di <!DOCTYPE> utilizzato influisce sulla visualizzazione della pagina
da parte del browser.
Ultima modifica 14-06-2013
<- menu tecnica informatica
HTML - object
Inserire file multimediali (audio e video), oppure effetti grafici particolari scritti in qualche
linguaggio di programmazione, fare attenzione al peso dei file.
Tutti i file dovranno essere scaricati dal visitatore del vostro sito per essere correttamente
visualizzati.
Inserire un file mp3 da 3 Mb come musica di sottofondo sarebbe esagerato.
La maggior parte dei file multimediali si inserisce all'interno delle pagine con il tag <object>,
che è il tag corretto - secondo le indicazioni del W3C - per inserire elementi
multimediali, tanto che nelle specifiche dell'XHTML 2 (l'evoluzione dell'HTML) persino le immagini
devono essere inserite tramite questo tag.
Un altro tag che spesso viene utilizzato per la multimedialità è <embed>: si tratta di un elemento
che non è nelle specifiche del W3C, ma che è stato a lungo utilizzato, perché supportato sia
da Internet Explorer, sia da Netscape Navigator, a differenza di <object>, che ha dei problemi
di compatibilità.
Attributi di object:
data : per specificare il percorso dell'oggetto da inserire nella pagina;
classid : dà indicazioni sul percorso dell'oggetto, ed è utile per identificare il tipo di plugin
con cui eseguire l'oggetto;
codebase : serve per indicare l'URL di base, a cui il codice indicato in "data" o in "classid" fa
riferimento;
type : è il tipo di oggetto da inserire (più esattamente è il MIME type dell'oggetto);
archive : si può indicare una lista di URL, separati da virgola, contenti risorse relative all'oggetto
inserito;
width, height : se necessario, si possono indicare una larghezza e una altezza
In molti casi il tag object si occupa di attivare un "plug-in", cioè un componente aggiuntivo che
si integra nel browser, per lo più fornito dal produttore del software multimediale (es. Flash),
in grado di leggere il file multimediale (qualsiasi esso sia).
Per impostare un suono di sottofondo e vogliamo seguire le specifiche dell'HTML 4.01, utilizziamo
il tag object.
<object data="url del file audio" type="audio/wav" autostart="true">
<embed src="url del file audio" autostart="true">
</object>
tuttavia, affinché tutto funzioni perfettamente, spesso conviene indicare il tipo di plugin da utilizzare
grazie all'attributo classid.
Sia integrato in una pagina Web e riproducibile sia in Netscape sia in Internet Explorer.
Netscape infatti ignorerà il tag OBJECT (l'ActiveX Microsoft) utilizzando il tag EMBED.
Vediamo il codice necessario ad aprire la barra del lettore multimediale RealOne
(se RealOne non è presente, l'utente verrà avvisato).
Notare che all'interno del tag object vengono espressi i parametri che indicano come devono essere
visualizzati i controlli di RealOne, e la sintassi alternativa per browser obsoleti (indicata
tramite <embed>):
<object id="sound1" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="src" value="multimedia/audio/jet_pubb.wav">
<param name="controls" value="All">
<param name="console" value="sound1">
<param name="autostart" value="false">
<embed src="http://nomefile.wav"
type="audio/wav" console="sound1" controls="All" autostart="false" name="sound1">
</object>
Quando si inserisce dei file audio, fare sempre caso ad essere i proprietari dei diritti d'autore,
o ad avere l'autorizzazione a utilizzare la musica (o il suono) in questione.
Ricordiamo anche che l'uso di suoni o musica di sottofondo se utilizzata in modo eccessivo può
compromettere l'usabilità del sito.
Come per l'audio anche per i video si dovrebbe utilizzare il tag object.
La sintassi è identica a quella dei file audio:
<object data="filmato.mov" type="video/quicktime" width="164" height="140">
<embed src="filmato.mov" type="video/quicktime" width="164" height="140">
</object>
si può utilizzare l'attributo "classid" con gli appropriati parametri per aprire barre di
visualizzazione e controlli vari ed eventuali.
Attributo "src"
Esempio: <embed src="nome_file.mp3"></embed>
Come per le immagini questo attributo serve a specificare l'indirizzo del file sonoro che si desidera
riprodurre che, tra le varie estensioni supportate da questo plug-in, può essere di tipo:
.mp3
.wav
.midi
.rmi
.mpeg (per i video)
.avi (per i video)
e cosi via.
Attenzione alla dimensione del file perchè più "grosso" e più tempo l'utente dovrà attendere per
caricare il brano e poterlo così ascoltare.
Attributi "width" ed "height"
Impostano rispettivamente la larghezza e l'altezza del player.
Con il browser Internet Explorer, il player vi apparirà molto grande, rischiando di rovinare
il layout della vostra pagina.
Allo scopo di evitare questo inconveniente è bene dare sempre delle misure al player; questo si fa nello
stesso modo in cui si danno le dimensioni a tabelle, immagini, e cosi via, ossia aggiungendo al Tag gli
attributi width ed height, le cui misure andranno espresse in pixel.
Inoltre le dimensioni di default del player sono diverse a seconda del browser, per cui è meglio impostare
dei valori fissi.
Per evitare di mettere misure troppo piccole, e "tagliare fuori" cosi il controllo del volume, impostare
la larghezza dell'embed minimo a 280.
Facciamo un esempio che comprende la barra del volume:
<embed src="nome_file.mp3" width="280" height="45"></embed>
Facciamo un secondo esempio che comprende solo i pulsanti PLAY e STOP:
<embed src="nome_file.mp3" width="75" height="45"></embed>
Attributo "autostart"
Noterete che la musica si avvierà automaticamente all'apertura della pagina.
Ciò accade perchè l'attributo autostart è impostato di default a valore "true".
Se volete far partire la musica solo quando l'utente preme il bottone PLAY, impostare questo attributo
a "false".
Esempio:
<embed src="nome_file.mp3" width="280" height="45" autostart="false"></embed>
Attributo "loop"
E' possibile far ripetere il brano all'infinito, di modo che se l'utente vuole ascoltarlo più volte
non deve ripremere PLAY ogni volta che la canzone finisce, con l'attributo loop.
Se impostato a 1 farà si che una volta terminata la canzone ricominci da capo automaticamente,
all'infinito. Altrimenti, di default, loop assume valore 0, e una volta eseguito il brano il player
si fermerà. Ad esempio:
<embed src="nome_file.mp3" width="280" height="45" autostart="false" loop="1"></embed>
Attributo "hidden"
Si può fare che il player non venga visualizzato, impostando l'attributo hidden al valore
"true" (il valore di default, com'è intuibile, è "false").
Può essere utile se volete mettere un sottofondo musicale al sito.
In questo caso settare l'attributo "autostart" a "true", in modo da far partire il brano in
automatico, in quanto l'utente, non vedendo il player, non potrà interagirvi.
Esempio:
<embed src="nome_file.mp3" autostart="true" loop="1" hidden="true"></embed>
Il Tag "noembed"
Come accennato nel paragrafo introduttivo, c'è da dire anche che embed non è compatibile con tutti
i browser; ecco perchè è bene aggiungere, subito dopo la chiusura </embed>, il Tag <noembed>,
il cui scopo è fornire un testo alternativo in caso di mancato supporto:
<embed src="nome_file.mp3"></embed>
<noembed>Elemento multimediale non supportato!</noembed>
Per i filmati e per l'audio è possibile utilizzare lo streaming attraverso il web.
Consente di scaricare il filmato gradualmente dal server, a mano a mano che lo si sta vedendo e in modo
del tutto trasparente all'utente.
Se volete sincronizzare diversi filmati audio e video, dovete utilizzare un linguaggio apposito che prende
il nome di «SMIL».
Flash è un software molto potente sviluppato da Macromedia a partire dal 1996.
Si tratta di un programma che utilizza grafica vettoriale: significa che le immagini non vengono descritte
attraverso mappe di bit (bitmap), ma attraverso formule matematiche.
Per questo motivo i filmati in Flash pesano molto meno della grafica tradizionale, e per lo stesso motivo
i colori sono "piatti".
Inoltre, proprio perché le immagini sono espresse da formule matematiche, non c'è il problema dell'effetto
"sgranato" dovuto al ridimensionamento proprio della grafica tradizionale, perché i filmati in flash
si adattano automaticamente alle dimensioni indicate nel codice HTML (o se le dimensioni sono espresse
in percentuale, si adattano alla pagina).
I file sorgenti dei filmati (quelli su cui gli sviluppatori lavorano) hanno estensione .fla, i file compilati
(quello che si possono vedere in giro per il web) hanno invece estensione .swf (cioè "Shockwave Flash"):
è quest'ultimo tipo di file che dobbiamo inserire nelle nostre pagine HTML.
Per inserire un filmato in flash in una pagina HTML è sufficiente utilizzare la seguente sintassi:
<object type="application/x-shockwave-flash" data="http://bottone_in-out.swf" width="450" height="164">
<param name="movie" value="http://bottone_in-out.swf"/>
</object>
Includere un file Java
Java è un linguaggio di programmazione rilasciato dalla Sun nel 1995, ma in corso di sviluppo sin
dal 1991.
Il suo successo nel web è dovuto alle famose "applet" ("piccole applicazioni") che permettono di
aggiungere interattività alle pagine web.
Oggi si tende a non usare Java per le applet, perché la sua esecuzione avviene tramite un software
chiamato "virtual machine", e ogni volta che tale software deve essere richiamato da una pagina web,
l'esecuzione della pagina stessa risulta rallentata.
In Internet Explorer non viene più distribuito con la Virtual Machine Java inclusa dalla versione 6.
Chi utilizzerà questo browser non visualizzerà le applet se non ha esplicitamente chiesto
l'installazione della componente dal sito Windows Update.
Tutto quello che si può fare con le applet Java oggi lo si può fare anche con Flash o JavaScript, e quindi
in molti casi si preferisce utilizzare questi linguaggi.
Java rimane una valida alternativa per applicazioni web complesse (ad esempio i dati e i grafici delle
quotazioni finanziarie, che devono essere aggiornati in tempo reale), o anche per applicazioni come la
chat (i client in Java sono tuttora insuperati).
I file con il codice sorgente hanno estensione ".java", i file compilati (da inserire nelle nostre pagine
web) hanno invece estensione ".class".
La sintassi per inserire un applet java è:
<applet code="lake" codebase="http://html.it/guide/esempi/guida_html/multimedia/java/" width="263" height="130">
<param name="image" value="http://html.it/guide/esempi/guida_html/multimedia/java/logo.gif">
<!--html alternativo -->
<img src="http://html.it/guide/esempi/guida_html/multimedia/java/logo.gif" width="263" height="65" alt="html.it">
<!-- fine html alternativo -->
</applet>
Il W3C ha però deprecato l'utilizzo del tag applet, e al suo posto dovrebbe essere preferito il tag object:
<object id="appletLake" codetype="application/java" codebase="http://html.it/guide/esempi/guida_html/multimedia/java/" classid="java:lake.class" width="263" height="130" >
<param name="image" value="http://html.it/guide/esempi/guida_html/multimedia/java/logo.gif">
<!--html alternativo -->
<img src="http://html.it/guide/esempi/guida_html/multimedia/java/logo.gif" width="263" height="65" alt="html.it">
<!-- fine html alternativo -->
</object>
quest'ultima sintassi tuttavia non è ancora perfettamente funzionante con tutti i browser.
Dal momento che non è detto che tutti gli utenti possiedano il software e il plugin per vedere Java
è bene inserire del testo HTML alternativo nel caso in cui la virtual machine che esegue Java non sia
presente (nel codice precedente era presente del codice HTML alternativo, al posto di un avviso).
Ad esempio:
<applet code="lake.class" width="263" height="130">
<param name="image" value="http://html.it/guide/esempi/guida_html/multimedia/java/logo.gif">
È necessario installare Java sul proprio sistema
</applet>
(www.HTML.it)
Ultima modifica 23-02-2012
<- menu tecnica informatica
HTML, streaming
Flusso di dati audio/video trasmessi da una sorgente a una o più destinazioni tramite una rete telematica.
Questi dati vengono riprodotti man mano che arrivano a destinazione.
I contenuti audio/video sono inizialmente compressi e memorizzati su un server come file.
Un utente può richiedere al server di inviargli i contenuti audio/video.
Non è necessario scaricarli per intero sul PC per poterli riprodurre: i dati ricevuti vengono decompressi
dal Decodec e riprodotti pochi secondi dopo l'inizio della ricezione.
Questo ritardo serve a creare un polmone ("buffer" in gergo) per rimediare a latenze o microinterruzioni
della rete.
Di questo tipo sono i flussi streaming di Real Video e Real Audio, Windows Media Player, QuickTime,
Adobe Flash Video (quest'ultimo tipo di formato file utilizzato nel sito di Youtube).
Questo tipo di servizio viene offerto anche da parte di diverse reti televisive, come MTV o la RAI,
come servizio di streaming totale o parziale (nel caso delle reti rai si ha quasi la totalità delle
trasmissioni a disposizione, dove alcuni programmi non vengono rilasciato a disposizione o non sono
immediatamente disponibili)
Ci sono due diverse modalità di streaming: in diretta (live streaming) e in differita.
Nel primo si intende la diffusione sul web di un evento nel momento stesso in cui questo
avviene nella realtà.
Esempi di questo tipo sono le trasmissione di concerti, oppure la trasmissione di convegni.
Per streaming in differita si intende invece la trasmissione di un evento video o audio già avvenuto
e registrato su un supporto digitale, successivamente archiviato nel server da dove sarà visualizzabile
da tutti.
Questi due tipi di streaming devono essere gestiti in modo completamente differente.
Nel caso del video in diretta sarà necessario avere a disposizione un server appositamente dedicato allo
scopo, dotato di propri protocolli di trasferimento.
Nel caso di un video in differita sarà semplicemente necessario utilizzare un normale server Web che
gestisca il protocollo HTTP.
Se avete già a disposizione un filmato da pubblicare o avete una webcam con cui distribuire il filmato,
l'unico software di cui avrete bisogno è quello che vi premetterà di convertire il filmato dal formato
originale al formato di streaming compresso e distribuirlo sulla rete.
Dal punto di vista della comunicazione dei dati sono sostanzialmente due i metodi per distribuire un
proprio filmato sulla rete: attraverso un normale server web e protocollo HTTP, oppure attraverso un
server dedicato e protocollo RTSP (Real Time Streaming Protocol).
Per pubblicare un filmato live dovrete per forza basarvi su un server con supporto al protocollo RTSP.
La differenza fra i due tipi di comunicazione è grande.
Il protocollo HTTP, basato sul TCP/IP, è stato messo a punto per la distribuzione di file di testo
e di immagini, non di filmati in streaming.
Il normale procedimento di una richiesta HTTP, quella che avviene in ogni sito web, prevede l'apertura
della comunicazione tra client (il browser) e web server, la richiesta del file, l'invio del file
e la chiusura della comunicazione.
Non c'è spazio per la "riproduzione" di un file.
Il protocollo RTSP, appositamente dedicato allo streaming, introduce invece il concetto di "tempo" nella
comunicazione.
Con il protocollo RTSP si può controllare la "durata" temporale del file che può essere riprodotto con
maggiore o minore velocità, può essere controllato dall'applicazione server, può essere interrotto e
nuovamente riprodotto, la sua riproduzione può essere modificata in tempo reale in base a parametri di
qualità del servizio ecc.
Quando un filmato viene trasmesso con il protocollo HTTP (dunque da un normale web server) non si parla
di streaming ma di progressive download: il file video viene scaricato piano piano (viene "bufferizzato")
e la riproduzione inizia quando una sua piccola porzione viene gestita dal programma di riproduzione.
Con il protocollo HTTP si può comunque distribuire con semplicità un filmato perdendo però inevitabilmente
qualche funzionalità avanzata.
Il codice seguente lascia che un file RealVideo sia integrato in una pagina Web e visualizzabile sia in
Netscape sia in Internet Explorer.
Netscape infatti ignorerà il tag OBJECT (l'ActiveX Microsoft) utilizzando il tag EMBED:
<object id=video1 classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" height="180" width="240">
<param name="controls" value="ImageWindow">
<param name="CONSOLE" value="Clip1">
<param name="AUTOSTART" value="true">
<param name="SRC" value="crash.rm">
<embed height="180" width="240" controls="ImageWindow" src="crash.rm" console="Clip1" type="audio/x-pn-realaudio-plugin"
autostart="true"> </object>
<object>
apre il codice cui spetterà il compito di integrare il componente ActiveX per Microsoft Internet Explorer.
I parametri che include sono:
classid (un indentificativo unico per il tipo di File ad uso del browser),
height (la dimensione del filmato in altezza),
width (la dimensione del file video in larghezza).
I parametri successivi indicano le proprietà del controllo: la proprietà autostart farà partire il filmato
non appena aperta la pagina mentre src indica il percorso del file.
<embed>
contiene il codice per Netscape, molto simile a quello per Explorer.
Importante è che le dimensioni della finestra (tag height="" width="") siano identiche alle dimensioni
del video reperibili direttamente dal Real Producer.
Nel nostro caso il video ha un formato di 240 (in lunghezza) x 180 (in larghezza) pixel.
A questo codice base è possibile aggiungere anche altre funzionalità.
Per aggiungere un pulsante Play basterà inserire, nel punto in cui desiderate sia visualizzate l'immagine
del pulsante, il seguente codice:
<object id=video1 classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" height="25" width="45">
<param NAME="controls" VALUE="PlayButton">
<param NAME="console" VALUE="Clip1">
<embed type="audio/x-pn-realaudio-plugin" console="Clip1" controls="PlayButton" height="25" width="45"
autostart="false"> </object>
Lo stesso codice base che vedete sopra può essere adattato per utilizzare i molti altri strumenti gestibili
da RealPlayer.
Basterà sotituire a PlayButton le altre definizioni secondo la tabella che segue (tra parentesi indichiamo
anche le dimensioni degli strumenti che dovranno essere sostituite rispettivamente nei tag width e height):
Tipo di controllo Tag
Pulsante Stop StopButton
Area d'informazione TACCtrl (370, 32)
Posizione del filmato PositionSlider (120, 26)
Pulsante di avanzamento veloce FFCtrl (28, 18)
Pannello informativo sull'autore del video InfoPanel (300, 55)
Pulsante 'mute' MuteCtrl (26, 26)
Pulsante Indietro Veloce RWCtrl (28, 18)
Barra del Volume MuteVolume (26, 65)
Un'altra strada per visualizzare la barra standard consiste nell'inserire come parametro controls all e come
dimensioni 375x100 pixels: si avrà così a disposizione il pannello completo delle maggiori funzionalità.
Ultima modifica 23-02-2012
HTML, Colori
E' possibile definire vari milioni di colori con la cosidetta 'notazione esadecimale': RRVVBB
cioè i primi due caratteri (RR) definiscono la quantità di 'rosso',
il 3° e 4° (VV) il verde e il 5° e 6° (BB) il Blu.
La 'notazione esadecimale' usa i seguenti caratteri "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F" (cioè dopo la cifra 9 per
esprimere il valore '10' usa il carattere 'A' (quindi 'F' rappresenta il valore '15').
Il numero 'esadecimale' quindi è 00, 01, 02 .. 0F, 10 (valore 16), 11 (valore 17), 12, .. 1F, 20, .. FD, FE, FF
(valore 255).
Quindi per modificare la presenza di un colore (esempio il rosso), devi modificare il valore esadecimale.
Dalla lista dei colori che segue prendi un colore che si avvicina e per tentativi 'aggiungi' e 'togli' i colori
fondamentali.
Un altro possibile sistema è usare il programma 'Paint', menù 'Colori' e poi tasto 'Definisci un colore';
cliccando sulla mappa dei colori visualizza la 'composizione' in Rosso-verde-Blu in valore decimale
(da 0 a 255), che trasformi in esadecimale:
00..0F (0..15), 10..1F (16..31), 20..2F (32..47), 30..3F (48..63), 40..4F (64..79), 50..5F (80..95)
60..6F (96..111), 70..7F (112..127), 80..8F (128..143), 90..9F (144..159), A0..AF (160..175), B0..BF (176..191)
C0..CF (192..207), D0..DF (208..223), E0..EF (224..239), F0..FF (240..255)
Considera che molte sfumature non si notano; cioè, in teoria, con questo sistema posso definire oltre
16 milioni di colori (e precisamente 16.777.215), ma nella realtà le sfumature sono molto meno
(cioè se provi a modificare di una quantità il colore praticamente non cambia, mentre se lo modifichi
di 10 quantità vedi una piccola differenza).
Colore che in 'Paint' da "80,135,118" trasformato in esadecimale 508575;
leggera modifica: "83,140,123" trasformato in esadecimale '53907C' :
Infine, se vuoi 'schiarire' il colore devi aumentare il valore (infatti FFFFFF rappresenta il bianco),
se lo vuoi 'scurire' devi diminuire (000000 rappresenta il nero).
Ed ora una serie di colori:
| AQUA | |
GRAY | |
NAVY | |
SILVER | |
BLACK | |
GREEN | |
FUCHSIA | |
MAROON | |
| OLIVE | |
TEAL | |
BLUE | |
LIME | |
PURPLE | |
WHITE | |
RED | |
YELLOW | |
Fondamentali
| 000000 | |
0000FF | |
00FF00 | |
FF0000 | |
FFFF00 | |
00FFFF | |
FF00FF | |
FFFFFF | |
Grigi (per formare il grigio dare ai tre colori lo stesso valore)
| FAFAFA |
F5F5F5 |
ECECEC |
E0E0E0 |
D3D3D3 |
CACACA |
BBBBBB |
AFAFAF |
9F9F9F |
7F7F7F |
5F5F5F |
3F3F3F |
| |
|
|
|
|
|
|
|
|
|
|
|
Verdi
| 20B2AA | |
6B8E23 | |
00CED1 | |
98FB98 | |
7CFC00 | |
CCCC99 | |
AAFFAA | |
CEFFCE | |
| FFFFC0 | |
FFF493 | |
FFFFE0 | |
BDB76B | |
FFFFE7 | |
508575 | |
53907C | |
99CCCC | |
Rossi
| FF7F50 | |
A52A2A | |
D2691E | |
FF1493 | |
FFD700 | |
FAF0E6 | |
FA6503 | |
E9967A | |
| FFA500 | |
FFDAB9 | |
EFD9B9 | |
F5F5DC | |
B22222 | |
F4A460 | |
FAEBD7 | |
F5DEB3 | |
| FFDA9B | |
| |
| |
| |
| |
| |
| |
| |
Blu
| 00BFFF | |
E6E6FA | |
4682B4 | |
8A2BE2 | |
1919AA | |
B0E0E6 | |
9370DB | |
BCF0EE | |
| #FFFFFF |
|
| #FFFFCC |
|
| #FFFF99 |
|
| #FFFF66 |
|
| #FFFF33 |
|
| #FFFF00 |
|
| #FFCCFF |
|
| #FFCCCC |
|
| #FFCC99 |
|
| #FFCC66 |
|
| #FFCC33 |
|
| #FFCC00 |
|
| #FF99FF |
|
| #FF99CC |
|
| #FF9999 |
|
| #FF9966 |
|
| #FF9933 |
|
| #FF9900 |
|
| #FF66FF |
|
| #FF66CC |
|
| #FF6699 |
|
| #FF6666 |
|
| #FF6633 |
|
| #FF6600 |
|
| #FF33FF |
|
| #FF33CC |
|
| #FF3399 |
|
| #FF3366 |
|
| #FF3333 |
|
| #FF3300 |
|
| #FF00FF |
|
| #FF00CC |
|
| #FF0099 |
|
| #FF0066 |
|
| #FF0033 |
|
| #FF0000 |
|
|
| #CCFFFF |
|
| #CCFFCC |
|
| #CCFF99 |
|
| #CCFF66 |
|
| #CCFF33 |
|
| #CCFF00 |
|
| #CCCCFF |
|
| #CCCCCC |
|
| #CCCC99 |
|
| #CCCC66 |
|
| #CCCC33 |
|
| #CCCC00 |
|
| #CC99FF |
|
| #CC99CC |
|
| #CC9999 |
|
| #CC9966 |
|
| #CC9933 |
|
| #CC9900 |
|
| #CC66FF |
|
| #CC66CC |
|
| #CC6699 |
|
| #CC6666 |
|
| #CC6633 |
|
| #CC6600 |
|
| #CC33FF |
|
| #CC33CC |
|
| #CC3399 |
|
| #CC3366 |
|
| #CC3333 |
|
| #CC3300 |
|
| #CC00FF |
|
| #CC00CC |
|
| #CC0099 |
|
| #CC0066 |
|
| #CC0033 |
|
| #CC0000 |
|
|
| #99FFFF |
|
| #99FFCC |
|
| #99FF99 |
|
| #99FF66 |
|
| #99FF33 |
|
| #99FF00 |
|
| #99CCFF |
|
| #99CCCC |
|
| #99CC99 |
|
| #99CC66 |
|
| #99CC33 |
|
| #99CC00 |
|
| #9999FF |
|
| #9999CC |
|
| #999999 |
|
| #999966 |
|
| #999933 |
|
| #999900 |
|
| #9966FF |
|
| #9966CC |
|
| #996699 |
|
| #996666 |
|
| #996633 |
|
| #996600 |
|
| #9933FF |
|
| #9933CC |
|
| #993399 |
|
| #993366 |
|
| #993333 |
|
| #993300 |
|
| #9900FF |
|
| #9900CC |
|
| #990099 |
|
| #990066 |
|
| #990033 |
|
| #990000 |
|
|
| #66FFFF |
|
| #66FFCC |
|
| #66FF99 |
|
| #66FF66 |
|
| #66FF33 |
|
| #66FF00 |
|
| #66CCFF |
|
| #66CCCC |
|
| #66CC99 |
|
| #66CC66 |
|
| #66CC33 |
|
| #66CC00 |
|
| #6699FF |
|
| #6699CC |
|
| #669999 |
|
| #669966 |
|
| #669933 |
|
| #669900 |
|
| #6666FF |
|
| #6666CC |
|
| #666699 |
|
| #666666 |
|
| #666633 |
|
| #666600 |
|
| #6633FF |
|
| #6633CC |
|
| #663399 |
|
| #663366 |
|
| #663333 |
|
| #663300 |
|
| #6600FF |
|
| #6600CC |
|
| #660099 |
|
| #660066 |
|
| #660033 |
|
| #660000 |
|
|
| #33FFFF |
|
| #33FFCC |
|
| #33FF99 |
|
| #33FF66 |
|
| #33FF33 |
|
| #33FF00 |
|
| #33CCFF |
|
| #33CCCC |
|
| #33CC99 |
|
| #33CC66 |
|
| #33CC33 |
|
| #33CC00 |
|
| #3399FF |
|
| #3399CC |
|
| #339999 |
|
| #339966 |
|
| #339933 |
|
| #339900 |
|
| #3366FF |
|
| #3366CC |
|
| #336699 |
|
| #336666 |
|
| #336633 |
|
| #336600 |
|
| #3333FF |
|
| #3333CC |
|
| #333399 |
|
| #333366 |
|
| #333333 |
|
| #333300 |
|
| #3300FF |
|
| #3300CC |
|
| #330099 |
|
| #330066 |
|
| #330033 |
|
| #330000 |
|
|
| #00FFFF |
|
| #00FFCC |
|
| #00FF99 |
|
| #00FF66 |
|
| #00FF33 |
|
| #00FF00 |
|
| #00CCFF |
|
| #00CCCC |
|
| #00CC99 |
|
| #00CC66 |
|
| #00CC33 |
|
| #00CC00 |
|
| #0099FF |
|
| #0099CC |
|
| #009999 |
|
| #009966 |
|
| #009933 |
|
| #009900 |
|
| #0066FF |
|
| #0066CC |
|
| #006699 |
|
| #006666 |
|
| #006633 |
|
| #006600 |
|
| #0033FF |
|
| #0033CC |
|
| #003399 |
|
| #003366 |
|
| #003333 |
|
| #003300 |
|
| #0000FF |
|
| #0000CC |
|
| #000099 |
|
| #000066 |
|
| #000033 |
|
| #000000 |
|
|
Ultima modifica 10-11-2009
<- menu tecnica informatica
HTML5, video
Per inserire un video in una pagina Web utilizzando la sintassi HTML5:
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
La complessità di HTML5 nasce non tanto dalla sintassi, quanto dal supporto delle funzionalità da parte
dei browser e dal video encoding.
Gli sviluppatori web sono abituati a combattere con le compatibilità dei browser, ma a questo si aggiunge
lo spinoso problema del disaccordo tra i produttori di browser sugli standard video.
Per scrivere un sito che funzioni in HTML5, bisognerà quindi tener conto sia di come moderni browser quali
Chrome, Firefox e Internet Explorer 9 implementano gli standard Web HTML5 per i video, sia di come gestire
la visualizzazione nei browser più vecchi.
Limiti e vantaggi
Prima di tutto, per ridimensionare le nostre aspettative, è utile conoscere i limiti di HTML5 per quanto
riguarda la riproduzione video.
Ad esempio la riproduzione Full-screen attualmente non rientra nella specifica HTML5.
I menu forniti di default dal player sono essenziali e dar loro un aspetto più sofisticato o coordinato
con un brand aziendale, può richiedere un certo sforzo;
a complicare il tutto ci sono i browser, che implementano HTML5 e i CSS ognuno in modo diverso.
Per fare un esempio, se aggiungiamo al video player gli angoli arrotondati su IE e Firefox, potremmo
visualizzarlo squadrato su Chrome e Safari.
Non c'è nulla nelle specifiche che permetta uno streaming omogeneo o adattivo, che invece rappresenta una
caratteristica essenziale per un sito serio di riproduzione video;
Ancora più importante il fatto che la specifica non includa, ed evidentemente non lo farà mai, i
Digital Rights Management (DRM).
Questo significa che i contenuti protetti da copyright non potranno essere distributi attraverso HTML5
(almeno non dai detentori del copyright).
Prima di tutto, gli sviluppatori occasionali di siti che non sono super-specializzati sulla riproduzione
video riescono ad inserire video in streaming in modo molto più facile e senza passare per siti di terze
parti come YouTube o Vimeo.
In precedenza, gli sviluppatori avevano fondamentalmente tre opzioni per fare direttamente l'embed video:
- L'embed di un file non-streaming, che quindi doveva essere scaricato per intero prima di essere
riprodotto;
- l'acquisto di plugin di terze parti (che potevano o meno funzionare su tutti i browser);
- l'uso di un media server dedicato, una soluzione troppo costosa e/o complicata da usare per la maggior
parte dei siti.
HTML5 risolve questi problemi e offre una cornice personalizzabile per riprodurre video in streaming senza
ricorrere a software di terze parti.
In secondo luogo, le specifiche HTML5 ci permettono di distribuire video su piattaforme proprietarie, come
quelle dei prodotti iOS (iPhone, iPad). Ma guardando a questo aspetto da un'altra prospettiva, ciò libera
gli sviluppatori dai vincoli imposti dalle piattaforme di distribuzione proprietarie che possono limitare
o controllare come vengono distribuiti i file media.
Dopo tutto, è questo il motivo per cui esistono gli standard aperti.
L'HTML5 è l'ultima revisione di HTML.
Quindi possiamo lavorare tranquillamente anche con JavaScript e CSS e manipolare il codice lato
client o lato server, come siamo abituati a fare.
Elementi essenziali all'interno del tag stesso:
src è la posizione e il nome della sorgente video, funziona allo stesso modo del parametro src
del tag <img>. Invece di individuare la fonte video qui è possibile farlo
al di fuori del tag:
<video id="sampleMovie" src="HTML5Sample.mov"></video>
width ed height (opzionali) sono le dimensioni del video.
Sono la larghezza e l'altezza del fotogramma video, piuttosto che il video stesso.
Come per <img>, non metterle fà sì che il browser utilizzi le dimensioni di default del video di
originale.
A differenza di <img>, mettere una dimensione diversa da quella d'origine causa un ridimensionamento
proporzionato del video, piuttosto che una sua distorsione.
In altre parole, il video incorporato manterrà lo stesso rapporto tra le dimensioni.
Se si specifica una dimensione inferiore rispetto all'originale, l'intero video si ridimensiona.
Tuttavia, se si specifica una dimensione più grande, il video verrà visualizzato nella sua dimensione
originale.
<video id="sampleMovie" src="HTML5Sample.mov" width=”640” height=”360”></video>
controls: aggiunge video control overlay di default. Questo è utile se non si vuole creare un proprio
controllo personalizzato.
Se si vogliono personalizzare i controlli del lettore, è possibile utilizzare JavaScript e CSS.
La specifica permette la manipolazione metodi e proprietà come play(), pause(),(), currentTime, volume,
muted e altro ancora.
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
preload: inizia il download del video non appena l'utente va sulla pagina.
Per far sì che il video carichi in anticipo, è sufficiente includere l'attributo.
Per evitarlo basta impostare l'attributo uguale a " none ".
<video id="sampleMovie" src="HTML5Sample.mov" preload></video>
<video id="sampleMovie" src="HTML5Sample.mov" preload=”none”></video>
autoplay: il male puro. Questo indica al browser di avviare la riproduzione del video non appena la pagina
viene caricata. Da non usare.
<video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>
Ora arriva la magia. Le specifiche HTML5 includono una funzione che permette di compensare le disfunzioni
del browser ancora presenti sui formati video.
Anziché specificare la sorgente video utilizzando l'attributo src, è possibile annidare più tag all'interno
del tag <video>, ognuno con una sorgente video diversa.
Il browser legge automaticamente l'elenco e sceglie il primo che è in grado di riprodurre. Per esempio:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
Se si testa questo codice su Chrome, si dovrebbe ottenere il video WebM, o anche in H264.
Eseguendolo in Firefox, ince, si vedrà invece il video Ogg.
Idealmente, anche se non strettamente necessario su tutti i browser, si dovrebbe includere un tipo MIME nel
tipo parametro, per assicurare la compatibilità con tutti i browser.
Questo parametro dovrebbe specificare il tipo di video, così come il codec video e audio.
La specifica del parametro dipenderà esclusivamente da come si codifica il video, esistono molti modi.
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
Una piccola precisazione sui tipi MIME: il server deve essere configurato per riconoscere i vari tipi.
Per Windows Server, questo significa aggiungere le voci per i vari tipi MIME all'IIS.
Per i server Apache, è necessario aggiungere la direttiva AddType al vostro file httpd.conf o htaccess.:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Graceful Degradation
Anche se un tag <video> multi-source funziona sui browser "HTML5 ready", ancora non fa lo stesso sui
browser ante-HTML5.
Fortunatamente, la specifica include un meccanismo per la compatibilità verso il basso.
Possiamo prendere i tag <object> che utilizziamo o che abbiamo utilizzato prima di HTML5, e aggiungerli
in fondo alla lista dei parametri <source>.
Tipicamente, gli object specificano il player che si sta utilizzando (presumibilmente un plug-in
di terze parti), e i loro parametri, come la fonte video da utilizzare per quel player.
L'esempio seguente utilizza Flowplayer, un popolare player di terze parti con una versione disponibile
gratuitamente.
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
(www.HTML.it, Justin Whitney, 26-11-2011)
Ultima modifica 26-12-2012
XHTML
L'XHTML è l'HTML riformulato come linguaggio XML.
L'HTML è 'case unsensitive', cioè si può scrivere indifferentemente maiuscolo e/o minuscolo.
L'XHTML è invece 'case sensitive' e quindi è consigliabile scrivere tutto in minuscolo.
L'organizzazione che si occupa di standardizzare l'HTML è il W3C (Word Wide Web Consortium) ha rilasciato
varie versioni di HTML (l'ultima la 4.1 del 24-12-1999); quindi l'HTML si è evoluto in XHTML.
La conoscenza dell'HTML è un prerequisito essenziale.
Ultima modifica 02-05-2011
<- menu tecnica informatica
Luciano Michieletto - Pagina creata il 16-01-2009, modificata il 14-06-2013
|
