Realizzare un sito web

CSS Presentazionep {color: red;border: thin solid green;padding: 2em 3em;display-style: block;}

Mercato dominato da implementazioni proprietarie

1996-2000

Consultabile di preferenza con Internet Explorer (o Netscape)

Concezione esclusivamente visiva, informazione (permanente) legata a filo doppio con elementi decorativi e dipendenti dal medium e dal pubblico

Dotcom bust (2000)

I siti sono costosi e difficilissimi da trasformare!!!!

Jeffrey Zeldman!
Molly Holzschlag!
Eric Meyer!
Peter Paul Koch!

Eroici pionieri di 5 anni fa.

Gli standard ignorati

W3c:Finanziato da Mit, Unione Europea, istituzione giapponese

Ricercatori e esponenti dell'industria discutono di tipi di documento, metodi di rappresentazione dell'informazione

Da grafica vettoriale (SVG) a HTML a CSS a SOAP a XSLT a XPATH a OWL (ontologia formale) a accessibilit, internazionalizzazione.

Riferimento indipendente dal costruttore del browser

Spesso gli standard ideati dal W3C sono migliori di quelli delle singole aziende

Senz'altro vero per la versione W3C delle pagine web

Separazione di presentazione e contenuto

L'intento della marcatura semantico, indipendente dall'aspetto (e va oltre la presentazione visiva....)

Supporto nei navigatori inizialmente pessimo (specialmente di CSS)

Data la rapidit dell'evoluzione, chi non segue queste tematiche con attenzione, rimane spesso indietro, specialmente fra coloro che si occupano soprattutto di informatica dura

Lunga lotta, con aspetti artistici, di concezione (cosa dovrebbe essere una pagina web), metodologici (processo di lavorazione)

Crescente specializzazione

Emerge il web designer e la web community come identit e prospettiva a parte

Firefox, Safari, Opera, Chrome...

Ma non Internet Explorer (specie < 8).

Morale

Chiedete messe in pagina senza tabelle, conoscenza CSS ai vostri designerNon usate manuali pubblicati prima del 2004.

http://validator.w3.org/

Bibliografia

Zeldman, J. (2006) Designing with Web Standards. 2nd ed. Peachpit Press.

Cederholm, D. (2007), Bulletproof Web Design. Berkeley, CA, New Riders Press.

ALA www.alistapart.com

WASP www.webstandards.org/about/mission

Architettura dell'informazione

Ricerca, navigazione, struttura dei dati
(archittettura dell'informazione)

Navigazione a faccette, ricerca contro navigazione

Bibliografia

Morville, P. & Rosenfeld, L. (2006) Information Architecture for the World Wide Web. 3rd ed. Sebastopol, CA, O' Reilly.

Morville, P. (2005) Ambient Findability. Sebastopol, CA, O'Reilly.

Visibilit, feedback, tolleranza, struttura, affordance

Approccio empirico

Tanti, tanti, tanti test

Non credere ci che il cliente afferma, osserva ci che fa

Misura dei tempi necessari e della percentuale di completamento di compiti assegnati

Incoveniente: si osservano solo comportamenti indotti dalla richiesta del ricercatore

Bibliografia

www.useit.com La colonna di Jakob Nielsen

Nielsen, J. & Loranger, H. (2006) Prioritizing Web Usability. Berkeley, CA, New Riders.

Norman, D. (1988) The Design of Everyday Things. London, Basic Books.

www.boxesandarrows.com

Krug, S. (2005) Don't make me think! 2nd ed. Berkeley, CA, New Riders Press.

Accessibilit

Assicurare usabilit migliore possibile per coloro che dispongono di capacit sensoriali e motorie diverse dalla maggioranza della popolazione

Vista debole o cecit, paralisi (per esempio dovuta ad artrite), sordit

Nel quadro delle pari opportunit e della lotta contro la discriminazione, sono stati sviluppati in sede internazionale e nazionale degli accordi e delle norme volte ad asicurare l'accessibilit dei siti web

La maggior parte delle norme prende come riferimento le raccomandazioni del W3C, le WCAG 1.0 e 2.0

La maggior parte delle WCAG richiede semplicemente che le pagine siano in formati validi per gli standard W3C, e di seguire una marcatura semantica

Le WCAG prevedono diversi livelli di accessibilit

100% richiede versione audio di tutti I testi.

In Europa esiste

Risoluzioni del parlamento europeo

Comunicazione della commissione 1.12.2008

In Italia la materia regolata dalla legge Stanca del 2004, tuttavia a fini pratici sono utili soprattutto I regolamenti attuativi

DPR 1 marzo 2005, n. 75 (G. U. 101 3 Maggio 2005)
http://www.pubbliaccesso.gov.it/normative/regolamento.htm
Decreto Ministeriale 8 Luglio 2005
Requisiti tecnici e i diversi livelli per l'accessibilit agli strumenti informatici.
http://www.pubbliaccesso.gov.it/normative/DM080705.htm
(Allegato A)

La definizione dei requisiti tecnici di accessibilit nonch larticolazione delle attivit previste per la verifica tecnica sono stabilite sulla base di:

a) quanto indicato nelle Recommendation del World Wide Web Consortium (W3C) ed in particolare in quelle del progetto Web Accessibility Initiative (WAI);

b) standard definiti nel paragrafo 1194.22 della Sezione 508 del Rehabilitation Act degli USA;

c) standard e specifiche tecniche definite in materia di accessibilit dalla International Organization for Standardization (ISO);

d) esperienze acquisite nellambito della Pubblica Amministrazione ed in particolare, tra quelle gi maturate, quelle relative allattuazione della Circolare AIPA del 6 settembre 2001 recante Criteri e strumenti per migliorare l'accessibilit dei siti Web e delle applicazioni informatiche a persone disabili e della Direttiva del Presidente del Consiglio dei Ministri 30 maggio 2002 per la conoscenza e l'uso del dominio internet ".gov.it" e l'efficace interazione del portale nazionale "italia.gov.it" con le pubbliche amministrazioni e le loro diramazioni territoriali.

Il rispetto di questa normativa requisito indispensabile, ma non sufficiente a garantire un'usabilita accettabile per le categorie di persone mirate

Le risorse sono limitate: scegliamo le priorit giuste

In sintesi

Usare software disponibile comunemente e a poco prezzo

Presentare un'architettura dell'informazione chiara e mirata alla funzione del sito

Navigabile in modo agevole ed efficiente

Mantenibile con conoscenze tecniche pi basse possibili

Raggiungibile per il pubblico

Il web non solo un problema da programmatori

Quali sono i caratteri salienti dellinformazione che presentiamo?

Come si etichetta ogni tipo di informazione?

Come fa il destinatario a raggiungerla?

Strumenti

Un flusso di lavoro che parte dal conoscere l'utente e arriva al lancio del sito, passando per la concezione grafica e I modelli di dati

Le tappe sono riferimenti mentali; il tempo e i mezzi per dedicare la stessa cura ad ogni fase possono mancare

Iterate:
realizzate un sottoinsieme funzionale del prodotto finale, raccogliete risultati, ricominciate pi saggi.

Non bloccamioci!

Brown, D. (2006) Communicating Design. Berkeley, CA, New Riders Press.
Goto, K. & Cotler E. (2004) Web ReDesign 2.0: workflow that works. Berkeley, CA, New Riders Press.

Inventario dei contenuti

Persone

Questionari, card sort

Mappa concettuale

Quali informazioni sono necessarie a quale pubblico?

Chi sono queste persone?

Cosa vogliono?

Bilanciare comunicazione e usabilit, funzionalit

La F di Jakob Nielsen: F for fast, that's how they read your precious content(http://www.useit.com/alertbox/reading_pattern.html)

Usiamo Google Analytics e Webmaster Tools per raccogliere statistiche sulle ricerche e le visite

Visite per fare qualcosa, per ottenere informazioni, per arrivare ad una pagina precisa
Thurow, S. & Musica, N. (2009) When Search Meets Web Usability. Berkeley, CA, New Riders Press.

Definire le categorie di persone alle quali consentire di inserire commenti, contenuti, e in che modo vengono concesse queste autorizzazioni

Precisione

Autore, data, pubblico, ambito tematico, immagine, Clicca in alto a destra, fai scorrere le pagina in basso

Il repertorio contiene documenti (soprattutto link) interessanti, ma necessario ripensare la struttura

Un buono schema deve restituire l'intento della collezione anche privo di introduzioni e cappelli destinati agli umani (v. la nube)

Facilitare la collaborazione

Concepire delle linee guida per l'inclusione del materiale

Programmare la manutenzione del contenuto

Quanti aggiornamenti a settimana, a mese? Da parte di chi?

Realizzazione

Hosting condiviso

Il sito attuale funziona su hosting condiviso

Ogni cliente dispone di una cartella

Fino a un migliaio di clienti condividono lo stesso computer

Le risorse disponibili dipendono dall'utilizzo di tutti gli altri

Non esistono garanzie realistiche sulle prestazioni

In genere le prestazioni sono scadenti

Il sovraccarico esiste sia sul web server che sul database

Il problema maggiore il database: le richieste sono spesso lentissime

Un applicazione web, per funzionare bene su hosting condiviso, dev'essere molto scarna

Bilanciare funzionalit e usabilit: funzioni avanzate causeranno tempi di attesa lunghi e l'impressione di malfunzionamento

Vantaggi dell'hosting condiviso

Il lavoro di manutenzione del sistema eseguito dal fornitore, dato che ogni modifica colpisce l'insieme dei clienti

Il costo rimane moderato (massimo 7-8$, eccetto Mediatemple che sale a 10$)

Differenze fra I fornitori di hosting condiviso

Se prezzi bassissimi (2$/mese) o gratis, non vi nessun database server incluso ed impossibile realizzarvi la maggior parte dei siti dinamici

Indispensabile .htaccess e SSH, altrimenti si pu solo pregare

PHPMyAdmin o equivalente, accesso FTP (meglio SFTP, vedi SSH) per utenti non tecnici (ma in genere sempre inclusi)

Differenze fra I fornitori di hosting condiviso

Se prezzi bassissimi (2$/mese) o gratis, non vi nessun database server incluso ed impossibile realizzarvi la maggior parte dei siti dinamici

Indispensabile .htaccess e SSH, altrimenti si pu solo pregare

PHPMyAdmin o equivalente, accesso FTP (meglio SFTP, vedi SSH) per utenti non tecnici (ma in genere sempre inclusi)

VPS

Partizioni stagne fra I clienti

Livelli di memoria garantiti

A partire da 20$/mese, ma per questi prezzi occorre saper amministrare la propria macchina da soli

VPS gestito

I costi salgono

Pi raro

Dreamhost lo propone a partire da 23$/mese, ma il prodotto discusso

L'applicazione dovrebbe funzionare su hosting condiviso

Esempio basato su Drupal, libero ed open source, adottata da molti nomi prestigiosi

Galleria di utenti Drupal

http://www.recovery.gov/http://www.wfp.org/http://www.hrw.org/http://www.jeunes.gouv.fr/http://www.asi.it/http://www.csail.mit.edu/http://www.englishonline.org.cn/http://beehive.govt.nz/

Limite finanziario

Un'installazione elementare gestita e messa a giorno pi facilmente da non esperti.

Drupal sviluppato apertamente da una comunit informale di sviluppatori

L'intero codice aperto e sviluppato in pubblico

Una ricerca su amazon di libri su Drupal fornisce cinquecento risultati

Drupal si evolve verso l'integrazione di tecnologie semantiche
http://www.youtube.com/watch?v=r4WgTRIRoa0

Rispetto a scrivere da zero:

Una base intensamente testata

Un'applicazione conosciuta che pu essere facilmente appresa con alle risorse gi disponibili (in inglese)

Riduzione dei tempi di sviluppo e dei costi

Vasto ecosistema di fornitori di supporto e servizi (ovviamente a pagamento, pochi in Italia rispetto al resto d'Europa)

e tutti i pezzi che si possono rompereRidurre le necessit di aggiornamenti

Scaricare il pi possibile I servizi all'esterno (Google Analytics invece di un registro interno, bookmark sociali invece che incorporati direttamente, ricerca esterna, anche sofisticata come Solr offerto da Acquia)

Inserimento automatico

Letichetta lindirizzo sul vecchio sito

Per ogni indirizzo sul vecchio sito, definiamo un termine della tassonomia

Trasformiamo gli indirizzi nel termine corrispondente

La posizione nella gerarchia automatica

Procedura semi-automatica:

Approfitiamo della migrazione per costruire sull'esperienza acquisita, e lanciare un progetto che rimedi alle lacune del precedente

Persone

Dei percorsi di navigazione

Una struttura esportabile, che comunica il senso dell'informazione

Gli standard web facilitano l'uso da parte di uomini e macchine

Una veste grafica ragionevole

Scelta di un applicazione conosciuta e mantenibile,
preferibilemente libera

Buon lavoro

Bibliografia

Generale Brown, D. (2006) Communicating Design. Berkeley, CA, New Riders Press.

Goto, K. & Cotler E. (2004) Web ReDesign 2.0: workflow that works. Berkeley, CA, New Riders Press

Architettura dell'informazione

Morville, P. & Rosenfeld, L. (2006) Information Architecture for the World Wide Web. 3rd ed. Sebastopol, CA, O' Reilly.

Morville, P. (2005) Ambient Findability. Sebastopol, CA, O'Reilly.

Thurow, S. & Musica, N. (2009) When Search Meets Web Usability. Berkeley, CA, New Riders Press.

Usabilit

www.useit.com

Nielsen, J. & Loranger, H. (2006) Prioritizing Web Usability. Berkeley, CA, New Riders.

Norman, D. (1988) The Design of Everyday Things. London, Basic Books.

www.boxesandarrows.com

Krug, S. (2005) Don't make me think! 2nd ed. Berkeley, CA, New Riders Press.

Standard web

http://validator.w3.org/.Zeldman, J. (2006) Designing with Web Standards. 2nd ed. Peachpit Press.

Cederholm, D. (2007), Bulletproof Web Design. Berkeley, CA, New Riders Press.

Testi di legge

DPR 1 marzo 2005, n. 75 (G. U. 101 3 Maggio 2005) http://www.pubbliaccesso.gov.it/normative/regolamento.htm

Decreto Ministeriale 8 Luglio 2005, Requisiti tecnici e i diversi livelli per l'accessibilit agli strumenti informatici.http://www.pubbliaccesso.gov.it/normative/DM080705.htm
(Allegato A)

Realizzare un sito web Fischer L. - ludovf.net

Realizzare un sito web

Design

Transcript of Realizzare un sito web