copyright (c) 2010 - marco barbato realizzazione di siti web betaingegneria marco barbato – studio...

Copyright (C) 2010 - Marco Barbato

Realizzazione di siti web

betaingegneriaMarco Barbato – Studio di Ingegneria

Web: http://www.betaingegneria.it Mail: [email protected]

Who I am Scopo del corso Strumenti Risorse

http://www.betaingegneria.it/


Who I am

Laurea in Ingegneria Elettronica Mi sono occupato di Automazione Industriale e

Robotica Da 10 anni mi occupo di tecnologie per il Web Lavoro con la PA, con l'industria e faccio

fromazione superiore e universitaria Mi occupo anche di musica


Scopo del corso

Acquisire familiarità ed usare la lingua franca del web (XHTML) e gli stili (CSS)

Definire l'architettura di un sito Integrare il sito nel web (accesso a ws, a

risorse remote, ...) Separare contenuti e presentazione,

differenziare la presentazione a seconda del dispositivo di accesso

Varie ed eventuali


Strumenti

Non faremo ricorso se non alla fine per causa di forza maggiore a tool di sviluppo visuale (Adobe Dreamweaver)

Useremo strumenti open source per la valutazione dell'accessibilità

Useremo strumenti standard per la valutazione della qualità del codice


Risorse

http://www.w3.org (sito del consorzio Web) http://www.betaingegneria.it (il mio sito contiene

parecchie risorse relative al web) Altri riferimenti web o bibliografici ve li darò

durante il corso

http://www.w3.org/

http://www.betaingegneria.it/


Breve storia del web

Web <> Internet (dispense) 1989: Tim Berners-Lee fa girare al CERN di

Ginevra una proposta per la gestione delle informazioni.

Nel 1990 scrive WorldWideWeb, il primo web browser su una stazione NeXTStep

La più antica pagina web conservata al CERN TBL inventa l'HTML, il protocollo http e il primo

server web httpd.

http://www.betaingegneria.it/html/diapo/index.html

http://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gif

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html


Il Web cresce...

Nel 1993 TBL e lo sviluppo del web si spostano negli USA al MIT di Boston.

1994: W3C 1996: Google (da gogol, 1 seguito da 100 zeri) 1999: esplode l'e-commerce. Si parla per la

prima volta di Web 2.0. Nasce il blog 2001: Wikipedia 2004: Facebook, Gmail 2005: Youtube, Google Maps


Ma cos'è il web?

Il Web è un servizio di Internet che consente di scambiare dati (testo strutturato, files di vario tipo MIME) attraverso il protocollo HTTP.

W3C dixit: 1. A uniform naming scheme for locating

resources on the Web (e.g., URIs). 2. Protocols, for access to named resources over

the Web (e.g., HTTP). 3. Hypertext, for easy navigation among

resources (e.g., HTML).


Il protocollo HTTP

Altri servizi di Internet: mail, ftp, IRC, gopher... HTTP è un protocollo client / server: chi ha

anche il solo compito di scrivere pagine web è utile che abbia almeno una vaga idea di come funzioni.

Una sessione HTTP si articola in due fasi: REQUEST e RESPONSE:

REQUEST è un'interrogazione che parte dal client verso il server

RESPONSE è la risposta del server


HTTP

Il client (un browser o un altro programma) lanciano una request verso il server web

La richiesta contiene l'URI della risorsa, i dati contingenti della richiesta e alcuni dati di contorno (tipo di browser, codifica, lingua, etc)

Il server raccoglie la richiesta, la elabora (lui o qualcun altro), costruisce un flusso di uscita (header + body) e lo restituisce al client.

La sessione si chiude qui: non c'è memoria.


Approfondimento 1/1

URI Uniform Resource Identifier è un sistema di coordinate nel mondo delle risorse:http://www.sito.it/risorsa?parametri

http: protocollo www.sito.it: è l'host risorsa: file o programma parametri: ad es: input a,b per avere a+b Dobbiamo immaginare il web come un insieme

di documenti e servizi dotato di coordinate.

http://www.sito.it/risorsa?parametri

http://www.sito.it/


Approfondimento 1/2

REQUEST Http header (dal browser al server):GET / HTTP/1.1Host: bachUser-Agent: Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.0.19) Gecko/2010040118 Ubuntu/8.10 (intrepid) Firefox/3.0.19Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: it-it,it;q=0.8,en-us;q=0.5,en;q=0.3Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveIf-Modified-Since: Thu, 23 Sep 2010 06:39:21 GMTIf-None-Match: "99903-3b0a-490e785a6f840"Cache-Control: max-age=0

MIME type: etichetta che identifica cosa c'è dentro ad un file (Multipurpose Internet Mail Extensions)


Aprofondimento 1/3

Problema della rappresentazione dei caratteri: un amico di penna giapponese è un bel problema. Con un inglese sarebbe OK. Per gli inglesi basta ASCII. Con 7 bit fanno tutto.

Già con francesi e italiani è complicato: àèìòùçnon bastano 7 bit. Ok, 8.

Coi greci, gli arabi e gli israeliani siamo daccapo. Con le lingue orientali siamo fritti.

Unicode + UTF : si possono codificare e trasmettere tutti i caratteri.


UNICODE / UCS

È un tabellone che contiene un'associazione tra un carattere ed un codice esadecimale

E' arrivato alla versione 5.2.0 nel 2009, trae le origini da ISO 10646 del 1989)

Prevede una codifica a 21 bit (2 milioni di caratteri), ma quasi tutti i caratteri sono mappati da U+0000 a U+FFFF (Basic Multilingual Plane), che con 65536 caratteri copre già praticamente tutto (cinese, matematica, etc)


UTF

Unicode Transformation Format è una codifica a lunghezza variabile dei caratteri Unicode.

Repertorio: un elenco di caratteri col loro nome. Codice: mappa tra un carattere e un numero > 0 Codifica (Encoding): come il codice viene

rappresentato in un file o in un flusso tcp/ip (sito w3c: ”used to transform the document character stream into a byte stream”: es. UTF-8

Esercizi

http://www.betaingegneria.it/prove/basic/encoding/


Torniamo all'header

GET è uno dei comandi del protocollo con cui un client chiede una risorsa;

Accept-Language scrive le preferenze di lingua del browser

Accept dice quali mime type il browser gestisce Accept-Charset quale codifica il browser usa

per visualizzare i caratteri In sostanza mandiamo la carta d'identità del

browser.


RESPONSE

Il server web httpd di solito fa da passamano, prende i file e li spedisce al client uno alla volta (html, stili, immagini, audio, etc).

Se è richiesta l'elaborazione httpd passa i parametri all'application server che risponde con un flusso HTML: httpd fa ancora una volta il passamano.


Esempio di RESPONSE

HTTP/1.1 304 Not ModifiedDate: Thu, 23 Sep 2010 17:38:41 GMTServer: Apache/2.2.9 (Ubuntu) PHP/5.2.6-2ubuntu4.6 with Suhosin-Patch mod_python/3.3.1 Python/2.5.2 mod_perl/2.0.4 Perl/v5.10.0Connection: Keep-AliveKeep-Alive: timeout=15, max=100Etag: "d9814-3b0b-490f09b20a000"

Il server si presenta con il suo header, dice la versione (1.1) il codice di risposta (304), la data e l'ora, alcune informazioni sul sistema operativo del server


RESPONSE (continua)

Non è finita: all'header nel flusso http segue il corpo che è il documento HTML vero e proprio.

Se è un file nel file system del server si dice pagina web statica (in questo corso impareremo a costruire solo pagine statiche)

Se è un file costruito al volo è una pagina web dinamica.

A volte anche le pagine dinamiche sono statiche (cache).


Esempio del corpo XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="it"><head> <title>betaingegneria - studio d'Ingegneria Marco Barbato</title> <link type="text/css" rel="stylesheet" href="style.css" /> <script type="text/javascript" src="script.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /></head><body> ....</body></html>

Questo è XHTML 1.0 Ma anche HTML ha una storia

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd


Storia di HTML

Da HTML a HTML 5: sito del Consorzio Web. 1989 HTML (TBL) - 1991 HTML+ 1993 NCSA Mosaic 1994 HTML 2 (Netscape, W3C) 1995 HTML 3 (Microsoft IE, CSS) 1997 HTML 3.2 – 1998 HTML 4.0 2000 XHTML 1.0 – 2008 HTML 5

http://www.w3.org/People/Raggett/book4/ch02.html


Cominciamo con HTML 4.01

Internationalization Accessibility Tables (sia come contenitori di dati che per

layout: obbrobrio! → XHTML 1.0) <OBJECT> Style Sheets Scripting Printing (<LINK />)


Struttura di HTML

Versione<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Elemento (tag) HTML Elemento HEAD Elemento BODY

A seconda della versione del browser e dell'html che usiamo, ci sono permessi errori

La maggior parte delle cose che la pagina web mostra è nella sezione BODY.


Generalità sui tag

Vi sono tag che viaggiano in coppia (<A></A>) o da soli (<META />)

Un tag è formato da un nome e da degli attributi<a href=”index.html” target=”parent”>Indice</a>

Cercheremo di usare tag semantici che si associano alla funzione più che all'aspetto.

Ad esempio <i></i> di permette di fare l'inclinato. Ma lasciamo queste cose agli stili e usiamo <em></em> (emphasize)


La sezione BODY

È la più immediata perché ”si vede subito” Con HTML 4.02 usiamo i tag in maiuscolo, con

xhtml 1.0 il minuscolo Qui ha luogo l'impaginazione del sito, ciò che

vedremo del sito: testo, titoli, immagini, video, form (moduli interattivi), link (collegamenti ipertestuali)

Adotterremo sempre una separazione netta tra contenuto e aspetto usando i CSS.


Tag di testo

Tag semantici (di testo strutturato) Intestazioni <H1></H1> fino a 6 livelli <EM>,<STRONG>,<DFN>,<CODE>,<ACRONYM>

Tag visuali Paragrafi <P>, <PRE>

Tag visuali usati soprattutto in XHTML <div>


Liste

Per ottenere delle liste non ordinate<ul>

<li>carta</li><li>penna</li><li>calamaio</li>

</ul> e ordinate

<ol><li>Zoff</li><li>Gentile</li>

</ol>


Tabelle

In HTML <= 4.02 sono state usate a sproposito; hanno un significato semantico: contenere dati; invece sono state usate per impaginare. Acqua passata.

<table><thead /><tr /><th /> intestazioni<tbody /><tr /><td /> celle

</table> L'oggetto tabella è molto complesso e ci

torneremo studiando il DOM.


Link: generalità

È l'elemento principe del web: il collegamento ipertestuale!

<a href=”uri”>testo</a> Se uri ha un # davanti ci muoviamo all'interno

della presente risorsa; in questo caso cerchiamo un tag <a name=”uri” />

URI può essere assoluto (specifico protocollo, host e risorsa) o relativo (solo la risorsa, protocollo e host vengono sottointesi).

Esercizio 1 - Esercizio 2

http://www.betaingegneria.it/zuccante/slides/html3/slide5-0.html

http://www.betaingegneria.it/zuccante/slides/html3/slide6-0.html


Link 2: relazioni tra documenti

LINK è un elemento da usarsi solo nella sezione HEAD.

Lo usiamo per collegare fogli di stile Per dire al browser qual è il foglio di stile più adatto

alla piattaforma su cui gira (pc, braille, smartphone) Per dire ai motori di ricerca dove trovare

versioni del sito in altre lingue versioni pdf del sito l'indice del sito


Link 3: accessori

Per l'accessibilità esistono due strumenti legati al tag àncora <a>:

Tasto di accesso (ACCESSKEY): posso attivare un link con la tastiera anziché con il mouse; ad esempio se ACCESSKEY=”A” attiverò il link con la sequenza ALT+SHIFT+A

Testo alternativo (ALT): questo testo viene letto da un sintetizzatore vocale. Utile anche per le immagini


Link: plug in

Determinati tipi MIME sono gestiti nativamente dal browser. I tipi che non lo sono di solito si associano ad un plug in (spina) che ne permette la lettura all'interno del browser. Se il plug in non è disponibile (il browser on digerisce il file), viene forzato il salvataggio della risorsa sul proprio computer.

Dal lato server si può controllare il comportamento del browser forzando il salvataggio tramite una direttiva nell'header


Oggetti multimediali

<img src=”uri” /> (abituiamoci alla sintasi xhtml 1.0)

<object /> è più generale: può definire una immagine (al posto di img), un'applet Java, un video...

Se cominciamo a includere mp3 dobbiamo pensare che l'mp3 il browser lo potrà suonare solo se ha il plug-in apposito installato.


Digressione

Youtube usa una tecnologia particolare: di solito si deve attendere che sia terminato il download di tutti gli oggetti perché il browser possa renderizzarli. Ma mp3 e video darebbero comunque luogo a ritardi, per cui si adotta una tecnologia che permette di sentire vedere mano a mano che il file viene scaricato (streaming)


Frames

Solo en passant, è uno strumento deprecato. <FRAMESET cols="20%,80%">

<FRAMESET rows="30%,70%"> <FRAME src="overview.html" name="pListFrame"> <FRAME src="allclasses.html" name="pFrame"> </FRAMESET> <FRAME src="summary.html" name="classFrame"></FRAMESET>

<NOFRAMES><H2>Frame Alert</H2><P>This document is designed to be viewed using the frames feature. If you see this message, you are using a non-frame-capable web client.<BR>Link to <A HREF="overview-summary.html">Non-frame version.</A></NOFRAMES>

Nella slide seguente il risultato. Serve per caricare più pagine web nella stessa finestra.Bandito come strumento per siti accessibili


Visualizzazione del frameset


FORMS

Uno degli strumenti più usati (compila un modulo per l'iscrizione, username e password, seleziona una nazione, rispondi ad un questionario, ...)

Ci porta ad andare ancora più a fondo nello studio di HTTP

Ci introduce a DOM e a JavaScript: il modulo può essere reso più interattivo con JavaScript e con AJAX.


Un esempio di FORM

Questo modulo permette di autenticarsi in un sito

<form action="login.php" method="post"><fieldset> <legend>Username</legend>

<input type="text" name="uname" size="8" /></fieldset><fieldset> <legend>Password</legend>

<input type="password" name="paswd" size="8" /></fieldset><fieldset>

<input type="submit" value="Entra" /></fieldset></form>

Questo form ha molti oggetti e attributi che devono essere compresi bene.


Attributi di FORM

action: URI della risorsa cui è affidata l'elaborazione dei dati. È sempre un programma

method: con quale comando di protocollo i dati vengono inviati al server. Conosciamo già GET, che consente di invocare un URI completo. Un altro comando è POST il quale fa pervenire i dati al server tramite il suo standard input.

Una differenza tra get e post è che con get vediamo transitare i dati sulla barra degli indirizzzi.


Approfondimento

Stuttura di un messaggo GET GET /examples/basic/method.php?uname=ppp&paswd=ppp HTTP/1.1

Host: bachUser-Agent: Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.0.19)....

Struttura di un messaggio POST POST /examples/basic/method.php HTTP/1.1

Host: bach...Content-Type: application/x-www-form-urlencodedContent-Length: 19uname=ppp&paswd=ppp

Query string: *[nome=valore]&


Campi di un modulo

Testo / Password Checkbox / Radio Lista di selezione (combo box) Lista di selezione multipla File Pulsanti / button Con fieldset posso visualizzare i campi in modo

compatto


Conclusione

A questo punto abbiamo gli elementi fondamentali per costruire un sito web.

Non siamo ancora in grado di agire in profondità sull'aspetto del sito e dobbiamo migliorare l'interattività con l'utente.

Per queste cose ci sono 2 strumenti: i CSS e il Javascript


CSS Cascading Style Sheets

Nel mezzo del cammin di nostra vitami ritovai per una selva oscurache la diritta via era smarrita

Dante, Divina Commedia, Inf, I, 1-3

Nulla meglio di questa terzina introduce il difficile argomento dei CSS (versione 2). Di per sé l'argomento è una scienza esatta, ma l'aspetto commerciale rende veramente una selva oscura il comportamento delle regole CSS nei vari browser. Ci vuole pazienza e dedizione.

http://www.betaingegneria.it/zuccante/slides/Zuccante/Overview.html


CSS: regole, selettori

I Cascading Style Sheet si chiamano così perché possono essere sovrapposti per creare effetti nella pagina web. Un foglio di style è un file che contiene uno o più selettori fatti così:selettore {

regola1;regola2; ...}

regola = proprietà: valore;

Si possono definire anche operatori tra selettori Dispense

http://www.w3.org/TR/2008/REC-CSS2-20080411/


DOM

Document Object Model Modellazione di un documento (libro, giornale,

fumetto, ...) come un oggetto. W3C ”a platform- and language-neutral

interface that allows programs and scripts to dynamically access and update the content, structure and style of documents”

Adottando questa piattaforma siamo in grado di analizzare e modificare un documento XHTML.


DOM /2

<TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE>


DOM /3

In sostanza trasformiamo un documento in un albero. Le strutture ad albero sono pane per i denti dei linguaggi di programmazione.

Con i CSS navighiamo quest'albero per stabilire delle regole di rendering.

Con Javascript navighiamo quest'albero per compiere delle azioni sul documento.

Il papà di DOM si chiamava DHTML.


XML

Ancora un po' di storia: HTML è un derivato di un linguaggio di tag generale l'SGML (Standard Generalized Markup Language (ISO 8879:1986 SGML)).

SGML si pone l'ambizioso obiettivo di rappresentare un documento come un oggetto strutturato e di fornire un appiglio per i linguaggi di programmazione affinché lo possano processare come una struttura dati.


XML /2

XML è un altro derivato (o profilo, o sottoinsieme, o dialetto) di SGML che è più facile da trattare di SGML per i parser (analizzatori di testo). X sta per eXtensible.

XML è un linguaggio strutturato che permette di rappresentare dati, un foglio XML può essere comparato ad un vero database.

Si può usare XML anche per fare pagine web!(esempio) oggi tutti i browser supportanoXML + XSLT (esercizi sulle trasformazioni)

http://www.betaingegneria.it/zuccante/index.html

http://www.betaingegneria.it/basic/


XHTML

XHTML è una versione di HTML definita in modo molto rigoroso come un documento XML.

Dobbiamo essere grati dell'avvento di XHTML perché è un tentativo di rendere rigoroso il lavoro del web master, che non deve più impazzire perché determinati tag si comportano in modo diverso da browser a browser (ovviamente non tutti la pensano così).

Con XHTML posso trattare la pagina web come se fosse una struttura dati


XHTML /2

Posso infatti elaborare una pagina web con un programma, ad esempio per leggerla e mettere via i dati in campi di una tabella di database.

Questo tipo di attività si chiama interoperabilità e preferisce in ogni caso lo scambio dati tramite XML.

Posso definire dei tag specializzati (custom) tramite le Document Type Definition DTD.


Una parola sul W3C

Il Consorzio Web, nato a Boston nel 1994 su iniziativa di TBL, conta 356 membri (2009).

Tutto ciò che riguarda il web viene proposto, elaborato, codificato da questo organismo di riferimento per il mercato. Eventuali fughe in avanti vengono man mano discusse, razionalizzate e, se accettate, espresse in uno standard.


XHTML reprise

I documenti devono essere ben-formati (4.1) I tag sono scritti in minuscolo (4.2) I tag devono essere rigorosamente chiusi (i tag

singoli si scrivono con <x /> (4.6)) (4.3) I valori degli attributi vanno chiusi tra ” (4.4) NON sono ammessi attributi minimizzati (e.g. checked) (4.5)

L'identificatore di tag (frammento) è id (4.10)


XHTML /3

Uso delle tabelle: non ci sono direttive, ma le direttive WAI-WCAG sull'accessibilità impongono che non le si usi per scopi di layout.

I tag non devono avere overlap (ed es. È proibito <p><a></p></a>) (esempio)

L'identificatore pubblico è xhtml1.0 strict (DTD) La presentazione è esclusivamente demandata

ai CSS Gli script possibilimente vanno all'esterno.


Validatori

Il W3C mette a disposizione uno strumento per validare la correttezza del codice XHTML. Una volta validato, se un bowser (user agent) non lo visualizza come ci si aspetta è per un buco nel browser.http://validator.w3.org

Anche i CSS hanno un validatore ufficiale:http://jigsaw.w3.org/css-validator/sviluppato da Mozilla

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/


Namespaces

Spazi di nomi: sono definizioni di insiemi particolari di tag. XHTML permette, ad esempio, di definire in un documento pezzi che si esprimono con tag non standard.

<p>The following is MathML markup:</p><math xmlns="http://www.w3.org/1998/Math/MathML"> <apply> <log/> <logbase> <cn> 3 </cn> </logbase> <ci> x </ci> </apply></math>

Ovviamente non è detto che il motore grafico del browser digerisca...

http://www.w3.org/1998/Math/MathML


Javascript

Javascript è un OOL interpretato, l'interprete è a bordo dei browser. Serve per migliorare l'interattività lato client.

Definiamo le strutture di controllo, le funzioni built-in, le strutture dati di Javascript.

Javascript è stato usato intensivamente dal 2005 in poi (DOM level 3), prima si facevano script abbastanza semplici per controllare le form ad esempio.

Dopo esserci sgrezzati, studieremo la libreria jQuery.


Javascript esempio 1

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"><head> <title>Esempio Javascript</title> <script type="text/javascript"> function ciao() {alert('Ciao'); return true; } </script> <style type="text/css"> span.boo {font-weight: bold; color: #f00;} </style></head><body> <p>Come attivare un <span onclick="return ciao();" class="boo">alert</span></p></body></html>

Un interessante esercizio con cui giocare, testare il browser e i validatori XHTML/CSS


Javascript /2

La sintassi è praticamente identica a Java (strutture if, for, while, case, operatori prefissi, postfissi, dichiaratori di classe, accesso a membri e metodi delle classi, polimorfismo)

Non abbiamo il tempo di spingerci molto in là, ma faremo qualche esempio con jQuery e con le API di GoogleMaps (se c'è tempo).

Il Javascript consente di accedere ad un oggetto del DOM e agire su di esso e sul suo stile con i metodi consentiti.


Javascript /3

Si possono definire anche classi, al modo di Java, potenziando il browser senza limiti. Ovviamente se l'interprete Javascript a bordo del browser è abbastanza moderno.

Queste due risorse forniscono un manuale e alcuni esercizi di complessità crescente.

http://www.javascriptkit.com/jsref/index.shtml Esercizi

http://www.javascriptkit.com/jsref/index.shtml

http://www.betaingegneria.it/zuccante/javascript/


Cose da sviluppare

Navigabilità del sito, albero di navigazione, chiarezza delle sezioni e degli strumenti

Web services Media diversi: come trattarli, esempi col

telefonino


Come strutturare i siti

Ci sono delle caratteristiche desiderabili per un sito:

Pulizia (niente rumore, distinzione chiara nelle aree delle pagine web, comandi e etichette chiare)

Orientamento (dove sono nel sito?) Per cercare una informazione mi serve sapere

com'è fatto il sito?? Possibilità di interazione Possibilità di personalizzazione


Strutture chiare

Google all'inizio aveva solo il logo, la <input text /> e due pulsanti (”Search” e ”I feel lucky”). Sfondo bianco. La sua banalità l'ha fatto il motore vincente.

Ora ha sviluppato un miriade di funzioni, e ha dovuto fornire un discreto menu in alto. Ma continua ad avere una notevole semplicità nonostante sia estremamente complesso.

Trovo spesso noioso raggiungere Analytics.


Strutture chiare /2

SI può parlare di politica, di news, di turismo, di siderurgia o medicina: un menu serve sempre.

Un logo identifica a colpo d'occhio un brand, una realtà.

Contenuti dinamici importanti da mettere nella home (se ce ne sono)

Una funzione di ricerca, di tagging, note di copyright, una barra breadcrumb. O un albero di navigazione (mappa del sito).


Strutture chiare /3

Ma per il turismo? Voglio sapere: dove devo andare (→ Google Maps), che tempo fa (→ webservice meteo), dove posso dormire (database alberghi e ristori), cosa posso fare una volta arrivato (offerte di svago,

benessere e cultura), quanto spendo (→ listini aggiornati, offerte, form di

interrogazione del database). Voglio trovare le info anche se non sono davanti al

pc (mobile)


Web 2.0

Web Semantico: infrastruttura comune che consente ai dati di essere condivisi e riutilizzati da applicazioni, imprese e community. Nel Web classico sono i documenti (risorse) ad essere condivisi, qui ci si vuole spingere ad entrare nei documenti e a condividerne gli elementi che li costituiscono.

La fondamentale filosofia della circolazione dei dati (ovviamente con le necessarie regole) unita alla partecipazione nella loro produzione è stata etichettata genericamente con Web 2.0.


Web 2.0 /2

Non è più comunicazione verticale (il webmaster pubblica e io leggo) ma orizzontale (tutti possono pubblicare o postare un commento o un tag, o elaborare dati)

Strumenti Web 2.0 sono il social tagging, il blog, il page rank di Google, gli RSS, il wiki che fornisce strumenti di publishing.

La definizione è di Tim O'Reilly. Interessante leggere il suo articolo [it].

http://www.bitmama.it/articles/14-Cos-Web-2-0


Accessibility

”The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect” [TBL, WAI]

Dall'inventore del Web fino alle organizzazioni, tutti hanno preso in considerazione i benefici di un web accessibile a tutti.

Ma cosa vuol dire precisamente accessibilità? Semplicemente la facoltà di usare il web e potervi

contribuire da parte delle persone disabili e anziane [WAI]

http://www.w3.org/WAI/

http://www.w3.org/WAI/intro/accessibility.php


Accessibilty /2

La legislazione italiana è più precisa sulla definizione. Nel 2004 il Parlamento vara la Legge 4/2004 promossa dal Ministro delle Infrastrutture Lucio Stanca dell'allora governo Berlusconi.

La legge enuncia 22 Requisiti per poter definire un sito come accessibile; definisce metodologie e criteri di valutazione; è prevista l'applicazione da uno logo a seconda del grado di aderenza ai requisiti. Sono requisiti più stretti delle linee guida del WAI-WCAG.

copyright (c) 2010 - marco barbato realizzazione di siti web betaingegneria marco barbato – studio...

Documents

copyright c

marco barbato il web

il web lavoro

marco barbato http il

consorzio web http

ingegneria web

marco barbato risorse

marco barbato ma cos