protocolli • Domini e IP • Ipertesti • Il protocollo http • Storia di Internet • Il W3C • Web 2.0 • Il web di domani 2. Siti web • Anatomia di un sito web • Pagine web • Siti statici e siti dinamici • Applicazioni server side e client side • Siti gestiti da database • Server e applicazioni web 3. Browser • La guerra dei browser • Browser market share • L’importanza degli standard • Dispositivi assistivi • Progressive enhancement e gracefully degradation • La rivoluzione mobile • Responsive design • Web Apps 4. Linguaggi • HTML e CSS • Linguaggi lato server • Linguaggi lato client • Librerie e framework 5. Scegliere un server • Scegliere e configurare un server • Tipologia dei siti web più comuni • Servizi accessori 6. Avviare un progetto web • Scegliere un servizio di hosting • Registrare un dominio • Figure professionali • Usabilità e accessibilità Panoramica ragionata di tecnologie e metodologie per il World Wide Web
intende in realtà un sistema complesso di tecnologie e protocolli che interagiscono tra loro • Il web (la “rete”) è di fatto costituito da tantissimi nodi (termine generico che può indicare un sito, un server, una singola pagina o addirittura un utente) interconnessi tra loro. • Il tutto è reso possibile da una suite di protocolli (TCP/IP: Transmission Control Protocol e Internet Protocol) che permettono a tutti i computer connessi (host) di parlare una lingua comune, a prescindere dalla loro architettura hardware e software 4
un’architettura client-server • Per server si intende il sistema hardware/software che fornisce risorse attraverso una rete informatica • Il client è invece il dispositivo (anche in questo caso hardware/ software) che richiede e riceve risorse da un server • Il server è a volte indicato come host quando si fa riferimento principalmente alla componente hardware 5
una pagina web (URL) o facciamo clic su un link effettuiamo una richiesta ad un server tramite uno specifico protocollo. • Non ha nessuna importanza da quale programma o computer sia partita la richiesta, né quale sia il server che la riceve, né quale software sia stato impiegato per costruire la pagina che vogliamo visualizzare • Un protocollo di comunicazione in informatica è un insieme di regole formalmente descritte, definite al fine di favorire la comunicazione tra una o più entità. Tutte queste regole sono definite mediante specifici protocolli, dalle tipologie più varie, a seconda delle entità interessate e il mezzo di comunicazione. Se le due entità sono remote, si parla di protocollo di rete. (da Wikipedia) 6
La richiesta viene inoltrata al nodo più “vicino” Ogni nodo ne contatta un altro fino ad arrivare a destinazione. L’informazione richiesta viene quindi restituita all’utente Ogni nodo è identificato nella rete in modo univoco tramite il proprio Indirizzo IP (Internet Protocol Address)
si chiama routing (instradamento). • Alcuni software permettono di tracciare il routing (traceroute) del percorso per raggiungere un server traceroute to www.l.google.com (173.194.35.177), 64 hops max, 72 byte packets 1 10.88.155.158 (10.88.155.158) 8.267 ms 4.861 ms 4.714 ms 2 10.251.172.1 (10.251.172.1) 4.676 ms 4.819 ms 5.015 ms 3 10.251.168.22 (10.251.168.22) 4.890 ms 4.731 ms 4.815 ms 4 10.251.169.1 (10.251.169.1) 4.833 ms 5.611 ms 4.839 ms 5 10.247.125.121 (10.247.125.121) 5.322 ms 4.963 ms 5.033 ms 6 10.251.173.194 (10.251.173.194) 5.000 ms 4.955 ms 5.470 ms 7 10.1.156.149 (10.1.156.149) 4.936 ms 4.875 ms 5.253 ms 8 10.254.1.41 (10.254.1.41) 5.348 ms 5.576 ms 5.042 ms 9 89.97.200.98 (89.97.200.98) 5.349 ms 5.762 ms 5.284 ms 10 26.26.128.101 (26.26.128.101) 5.442 ms 5.530 ms 5.553 ms 11 89.96.200.1 (89.96.200.1) 15.395 ms 15.085 ms 15.914 ms 12 89.96.200.26 (89.96.200.26) 60.802 ms 14.809 ms 14.509 ms 13 81-208-50-22.ip.fastwebnet.it (81.208.50.22) 39.878 ms 14.674 ms 15.486 ms 14 209.85.249.54 (209.85.249.54) 16.474 ms 15.711 ms 16.200 ms 15 216.239.48.146 (216.239.48.146) 24.650 ms 24.498 ms 24.860 ms 16 209.85.250.39 (209.85.250.39) 25.641 ms 25.623 ms 25.777 ms 17 muc03s02-in-f17.1e100.net (173.194.35.177) 25.486 ms 25.577 ms 25.463 ms Traceroute per www.google.com
ogni dispositivo connesso a Internet ha un proprio indirizzo IP (nella forma 123.123.123.123), dove ogni numero può avere un valore da 0 a 255 • Per rendere più semplice identificare un dispositivo, è possibile assegnargli un nome a dominio, ovvero una stringa composta da un nome e da un’estensione (quest’ultima identifica il paese o il tipo di dominio) • La conversione tra domini e IP viene svolta dai DNS (Domain Name Server), un sistema di database distribuito gestito da server specifici • L’assegnazione dei domini e degli indirizzi IP viene svolta da enti internazionali no-profit e poi affidata a distributori commerciali, istituzionali ecc. (ISP, Internet Service Provider) • L’organismo internazione che presiede l’assegnazione degli indirizzi è l’ICANN (Internet Corporation for Assigned Names and Numbers), il Registro Italiano dei domini (http://www.nic.it) ha sede presso il CNR di Pisa. 9
identificato univocamente da un URI (Uniform Resource Identifier) • Un URI (Uniform Resource Identifier) identifica una risorsa generica che può essere un documento, un’immagine ecc. • Un URL (Uniform Resource Locator) è in sostanza un URI che fornisce indicazioni più precise e specifiche sulla risorsa • Possiamo quindi dire che un indirizzo web che indica specificatamente una pagina, un’immagine, ecc. è un URL (es. http://www.google.it/images/srpr/logo3w.png), altrimenti è un URI (http:// www.google.it) 10
di testo formata da diverse parti: protocollo://<username:password@>nomehost<:porta></percorso> ¬ <?querystring><#fragment identifier> • La prima parte indica il protocollo usato per la richiesta (http, ftp, https, ecc.). Se non indicato, il protocollo http è generalmente predefinito • Username e password: parametri opzionali per l’autenticazione diretta. È possibile indicare solo lo username (seguito da “:”); se presente, la password deve essere seguita da “@”. L’autenticazione nell’URL è molto rischiosa e alcuni browser la rendono inutilizzabile • nomehost rappresenta l’indirizzo del server. Può essere un nome di dominio o un Indirizzo IP. 11
porta d’ingresso deve essere utilizzata dal server per indirizzare la richiesta al processo che la deve elaborare. Nel caso del protocollo http, la porta predefinita è la 80 (quindi http://www.google.it corrisponde a http://www.google.it:80) • Il percorso (opzionale) indica come individuare la risorsa all’interno del server 12
serie di caratteri che permettono di indicare al server uno o più parametri. La querystring è separata dall’URL tramite il carattere “?”, ed ha generalmente il formato: ...?parametro1=valore1¶metro2=valore2... • Il fragment identifier indica una posizione specifica all’interno della risorsa richiesta. In una pagina web può essere utilizzato per visualizzare un punto specifico. Ad esempio l’indirizzo http://www.miosito.it/mia_pagina.html#paragrafo1 carica la pagina mia_pagina.html e si posiziona sull’elemento con id=paragrafo1 13
degli ipertesti • Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave (wikipedia) • Le parole chiave fungono da collegamenti ipertestuali (hyperlinks) che consentono di navigare da un documento all’altro • Il concetto di ipertesto nasce molto prima del web; senza voler andare troppo indietro nel tempo, basta pensare al software HyperCard della Apple (1980) 14
il protocollo http (hypertext transfer protocol) • Http si basa su un meccanismo di richiesta (da parte del client) e di risposta (da parte del server) • Elemento fondamentale della richiesta è l’URI (Uniform Resource Identifier), che indica sostanzialmente la risorsa richiesta (la pagina, l’immagine, ecc...) • Il server risponde quindi con un messaggio di stato (che indica l’esito della richiesta) e con la risorsa stessa 15
HTTP/1.1) è la richiesta vera e propria e contiene il metodo della richiesta, la risorsa desiderata (in questo caso la pagina di root, indicata da “/”), e la versione del protocollo utilizzato (http/1.1) • I metodi più comuni sono • GET (utilizzato prevalentemente per ottenere la risorsa indicata) • POST (utilizzato per inviare dati tramite form) • HEAD (analogo a GET, ma utilizzato solo per avere informazioni sulla risorsa richiesta ma non la risorsa stessa) 18
delle intestazioni (header) che contengono informazioni aggiuntive. • Gli header più comuni sono: • Host: indica il server a cui si fa riferimento. È obbligatorio • User-Agent: informazioni sul client che ha effettuato la richiesta (tipologia, versione, sistema operativo, ecc.) • Cookie: eventuali informazioni aggiuntive legate al server richiesto precedentemente memorizzate 19
comprende una riga di stato, una sezione di header e il corpo della risposta (ovvero la risorsa richiesta, se disponibile) • La riga di stato (HTTP/1.1 200 OK) riporta nuovamente l’indicazione del protocollo e un codice di stato.
al client l’esito della richiesta e sono catalogati in base alla prima cifra: • 1xx: messaggi informativi • 2xx: richiesta andata a buon fine • 3xx: redirect, la risorsa è stata spostata su un altro URI (che viene fornito) • 4xx: client error (richiesta non corretta) • 5xx: server error • Codici più comuni: • 200 OK. Il server ha fornito la risorsa richiesta • 404 Not Found. La risorsa richiesta non è disponibile • 500 Internal Server Error. Errore interno del server 22
comuni sono: • Server: il server http che ha gestito la richiesta • Content-type: indica il tipo di risorsa restituita (ad esempio text/html, indica un documento html, image/jpeg, un’immagine JPEG, ecc.) 23
altri strumenti per verificare le richieste HTTP (operazione che può essere utile in alcune fasi di debug) • Google Chrome dispone di un sistema di analisi delle pagine integrato da cui è possibile ricavare molte informazioni sulle richieste http 24
è un protocollo di comunicazione nel quale i dati trasferiti durante le connessioni sono crittografati • Il funzionamento è analogo a quello del classico http non crittografato ed è assolutamente trasparente per l’utente • Viene utilizzato in connessioni in cui è necessario garantire la sicurezza dei dati inviati (ad esempio nei pagamenti online) 26
audio/video che vengono riprodotti nel client man mano che sono ricevuti • Non è quindi necessario, come avviene per le altre risorse, ricevere interamente i dati per poterne avviare la ripoduzione. Questo è quindi particolarmente utile con file di grandi dimensioni • Tra l’inizio della ricezione dei dati e la loro riproduzione è comunque necessario un piccolo ritardo che serve a creare un piccolo accumulo di dati (buffer) utile per rimediare a latenze nella ricezione. • Lo streaming può anche essere generato “in diretta” (streaming live) 27
http, uno dei protocolli più comuni. È usato per trasferire file da e verso un server utilizzando client appositi e dopo essersi autenticati (salvo nel caso di FTP pubblici che permettono connessioni anonime) • Telnet è un protocollo che permette l’accesso ad un server remoto per effettuare operazioni di manutenzione, configurazione ecc.. • SMTP, IMAP, POP sono protocolli per l’invio e la ricezione alla posta elettronica 28
sistemi telematici nati negli anni ‘70 ma legati principalmente ad usi militari o al mondo universitario • I vari sistemi (BBS, Usenet, ecc..) si basavano su sistemi UNIX e utilizzavano interfacce a “riga di comando” (CLI, command line interface) • Tra il 1989 e il 1990 Tim Berners-Lee e Robert Cailliau misero a punto il protocollo HTTP e una prima specifica del linguaggio HTML in cui viene utilizzata una nuova interfaccia basati sugli ipertesti • Nel 1983 viene creato Mosaic, il primo browser • Nel 1994 nasce Netscape, il primo browser commerciale • Nel 1995 Microsoft crea Explorer 29
nel 1994 e conosciuto anche come W3C, è un'organizzazione non governativa internazionale che ha come scopo quelllo di sviluppare tutte le potenzialità del World Wide Web (Wikipedia) • Il W3C è composto da aziende informatiche, compagnie telefoniche, organizzazioni no-profit e altre società legate allo sviluppo del web • Il suo scopo principale è quello di definire degli standard per tutto ciò che è legato al web: linguaggi, comportamento dei browser, temi legati all’accessibilità ecc... • Il W3C non impone gli standard, ma cerca in qualche modo di mettere d’accordo le esigenze dei vari produttori emettendo delle “raccomandazioni” 30
da Tim O’Reilly nel 2004) si intende un’evoluzione del web caratterizzata da una forte interazione tra siti web e utenti • L’evoluzione è stata resa possibile dal progredire delle tecnologie, dal miglioramento delle prestazioni dei client e della velocità delle connessioni • Cambia soprattutto l’approccio degli utenti alla rete: non più semplici fruitori ma autori essi stessi 31
database • Uso di grafica vettoriale • Aumento della velocità di connessione • Aumento dell’interattività • Web semantico • Realtà aumentata • Web 3D 32
un insieme di pagine correlate tra loro tramite hyperlink • La pagina principale (Home Page) risiede nella root del sito ed è richiamata automaticamente anche digitando solo il dominio del sito. In base alla configurazione del server, questo può avvenire o meno anche per le eventuali sottocartelle • La pagina principale ha un nome predefinito configurabile. Nei server Apache ha generalmente nome index.html (o .php, ecc.) 35
HTML • Ogni pagina è sua volta costituita da più componenti: • Il codice HTML che costituisce la pagina vera e propria: questo è l’unico elemento obbligatorio • Uno o più fogli stile (CSS). I css possono essere incorporati nel codice HTML o richiamati da un file esterno • Uno o più script (Javascript). Anche gli script possono essere incorporati o esterni • Immagini • Contenuti multimediali 36
essere statici o dinamici • I siti web statici sono costituiti da pagine html aggiornate manualmente e senza nessuna possibilità di interazione da parte dell’utente • I siti web dinamici sono costituiti da pagine generate dinamicamente (in tutto o in parte) per mezzo di linguaggi lato server e generalmente acquisendo dati da un database e consentendo, dove necessario, l’interazione da parte degli utenti 37
che agiscono sulle pagine web possono essere suddivisi in due grandi categorie: linguaggi lato server (server side) o lato client (client side) • Nei linguaggi lato server le pagine web sono elaborate prima di essere inviate al client, che riceve quindi un normale html. Visto che la stessa pagina può contenere contenuto diverso (in base ad esempio a diversi parametri inviati al server) le pagine gestite da linguaggi lato server sono definite come dinamiche. • I linguaggi lato server più comuni sono PHP, ASP.NET, JSP, Ruby, Python, Coldfusion 38
sono elaborati invece direttamente nel browser e hanno lo scopo principale di aggiungere interattività alla pagina • Sono collegati alla pagina web tramite il tag <script> ma possono essere anche incorporati nella pagina stessa • Il linguaggio lato client per eccellenza è Javascript • Possiamo aggiungere anche ActionScript, usato nelle applicazioni Flash (e comunque basato su JS), anche se in realtà non viene elaborato direttamente dal browser, ma da un plug-in specifico 39
tipicamente collegato ad un database • In questo caso, durante l’elaborazione della pagina, lo script interroga un database per recuperare delle informazioni che vengono inserite nel codice HTML generato • I sistemi di database più diffusi sono Oracle MySQL e PostgreSQL, tra quelli opensource, e IBM DB2, Microsoft SQL Server, Oracle e Sybase tra quelli commerciali 41
Richiesta Risposta Parametri della richiesta HTML elaborato Engine Query Result Database Nella stessa pagina possono essere presenti diverse richieste al database
è il server HTTP, la cui componente software ha notevole impatto sulle performance generali del sistema • In questo campo è assolutamente padrone Il server open-source Apache su sistemi basati su UNIX • Apache è comunque disponibile anche per Windows 65% 18% 12% 2% 1% 2% w3techs.com - agosto 2012 Market share server http Apache Microsoft-IIS nginx Litespeed Google Altri
server HTTP, in un sistema per la gestione di un dominio web sono normalmente presenti anchi altri servizi: • Server FTP, per il caricamento dei file e l’aggiornamento del sito • Server di posta • Database • Interprete di un linguaggio di scripting • Software di controllo versione 44
di effettuare il rendering del codice html ricevuto tramite una richiesta http. • La velocità e la qualità di quanto viene visualizzato (la pagina web) indicano l’efficienza del browser stesso • Ovviamente un browser deve anche essere in grado di effettuare richieste http tramite inserimento diretto da parte dell’utente o tramite hyperlink • Inoltre un browser deve essere in grado di eseguire script lato client (Javascript), di visualizzare specifici formati di file (immagini jpeg, png ecc.) e di avvalersi di helper application o plug-in per formati particolari di file • Infine un browser può disporre di servizi accessori atti a semplificare la navigazione: gestione dei bookmark e delle pagine, cronologia, multiutenza ecc... 47
in un browser rimane comunque la sua capacità di visualizzare correttamente e velocemente le pagine web, cioè di interpretare e visualizzare con precisione il codice HTML, CSS e Javascript. • All’inizio del web, quando ancora non esistevano standard consolidati, il tentativo di imporsi sul mercato portò i due principali contendenti (Microsoft con Explorer e Netscape Communication con Navigator) a ingaggiare una sorta di battaglia per avere il predominio commerciale • La guerra dei browser, come fu definita, vide alla fine (all’incirca nel 1999) l’affermazione della Microsoft
della guerra dei browser e delle questioni legate al monopolio (che portarono la Microsoft in tribunale per abuso di posizione dominante), le varie battaglie hanno causato enormi problemi alla comunità del web per il modo in cui furono combattute • Sia Microsoft che Netscape cercarono di affermare la loro visione del web, promuovendo tecnologie, tag html, funzioni e metodi JS ecc. proprietari, ovvero che funzionavano solo con il loro browser • Con il passare degli anni, costruire un sito web che funzionasse bene con entrambi i browser è diventato sempre più complesso, portando spesso ad un appiattimento verso un browser specifico (scelto per comodità o necessità dalla sviluppatore) o a semplificare evitando quanto potenzialmente a rischio di una non corretta visualizzazione da parte di alcuni browser 49
nel 1998 alcuni web designer crearono il Web Standard Project (WaSP) con lo scopo di promuovere una progettazione che evitasse codici proprietari e favorisse l’affermazione di standard internazionali • L’arrivo sul mercato di browser più aderenti agli standard (Firefox, Safari e Chrome) e l’attività del W3C hanno portato negli ultimi anni a invertire la rotta e a premiare la progettazione di siti web standard • Progettare e costruire secondo gli standard e più semplice, riduce i costi di produzione e consente di realizzare siti accessibili ad un maggior numero di persone e dispositivi per il collegamento a Internet. I siti sviluppati seguendo queste linee guida continueranno a funzionare correttamente anche quando i browser tradizionali si evolveranno e nuovi dispositivi per Internet faranno il loro ingresso sul mercato. (http://www.webstandards.org/about/mission/ it/)
con i classici browser, esiste una categoria di dispositivi, hardware e software, creati per permettere l’uso del web a tutte quelle persone che, a causa di disabilità fisiche, non possono utilizzare gli strumenti di navigazione ordinari • Un software di questo genere può ad esempio mostrare solo il testo, magari con colori ad alto contrasto, può “leggere” la pagina con un sistema di sintesi vocale o rappresentarla in Braille • Un sito web utilizzabile da ogni tipo di utenza è un sito “accessibile” • L’accessibilità di basa prima di tutto sull’uso degli standard e su una serie di tecniche nella stesura del codice, definite anche a livello legislativo
ai web designer notevoli problemi sul modo di sviluppare un sito • Il web designer si trova di fronte alla scelta se garantire la compatibilità con la maggior parte possibile dei browser o se utilizzare tecniche moderne compatibili solo con quelli più recenti • Per ovviare a questo problemi esistono le due tecniche del progressive enhancement e del gracefully degradation • La prima tecnica prevede che ogni sito abbia un set base di funzionalità, compatibili sul maggior numero possibile di browser, che crescono progressivamente su dispositivi più moderni • La seconda prevede che dove una funzionalità non sia supportata, il browser possa degradare in maniera trasparente verso metodologie più compatibili 53
in grado di navigare in internet, ha rivoluzionato molti aspetti del moderno web design • Grazie anche al ricambio molto più frequente di quanto avvenga per i computer desktop, i dispositivi modbili sono generalmente più aderenti agli standard e più aggiornati degli altri browser (la frequenza media di ricambio di un telefonino è di circa 2 anni) • Quello che cambia sono, ovviamente, le dimensioni del schermo, cosa che costringe a organizzare differentemente i contenuti 54
differentemente in base alle dimensioni del viewport ha due possibili soluzioni: • effettuare lo sniffing del dispositivo e servire contenuti ad hoc • produrre un sito in grado di adattarsi alle dimensioni del browser • Quest’ultima tecnica, definita Responsive Web Design da Ethan Marcotte in un articolo su A List Apart, prevede l’utilizzo di media queries per fornire al browser il codice più adatto alle proprie dimensioni 56
essere incapsulato in un’applicazione specifica in grado di sfruttare al meglio le capacità del dispositivo • La costruzione di queste applicazioni prevede lo sviluppo con HTML5, CSS e Javascript e la successiva elaborazione tramite l’applicazione PhoneGap (http://phonegap.com/) 57
‣ http://it.wikipedia.org/wiki/Guerra_dei_browser • Jeffrey Zeldman, Progettare siti web standard ‣ Pearson Education, 2007 • The Web Standard Proiect ‣ http://www.webstandards.org/ ‣ http://it.wikipedia.org/wiki/Web_Standards_Project ‣ http://www.acidtests.org/ • Ethan Marcotte, Responsive Web Design ‣ A List Apart: http://www.alistapart.com/articles/ responsive-web-design/ ‣ Vers. italiana: http://www.italianalistapart.com/articoli/ 17-numero-7-8-giugno-2010/71-web-design-reattivo ‣ A Book Apart: http://www.abookapart.com/products/ responsive-web-design • Luke Wroblewski, Mobile first ‣ http://www.abookapart.com/products/mobile-first • When can I use... ‣ http://caniuse.com/
diversi linguaggi di programmazione con diversi scopi che riflettono anche le varie fasi e le figure professionali in gioco: • La parte relativa ai contenuti e all’accesso ai dati • La parte relativa alla visualizzazione dei dati • La parte relativa al controllo e all’interazione con l’utente • Questo schema si riflette in uno specifico modello di sviluppo denominato MVC (Model-View-Controller) • Ogni fase prevede professionalità specifiche che devono poter convivere e lavorare insieme • Per questo motivo uno dei fondamenti di un corretto processo di sviluppo è la separazione “fisica” tra le varie parti, cosa che permette uno sviluppo modulare e la riusabilità del codice 60
strumenti del mestiere del web designer • L’HTML permette di costruire la struttura della pagina e fornisce gli strumenti di base per la comunicazione con il server (form e links) • Il CSS definisce la formattazione dei contenuti, il loro aspetto grafico e la loro posizione nella pagina. • Nello spirito della separazione tra contenuto e vista, l’HTML non deve contenere nessuna indicazione sul suo “aspetto”. • L’HTML deve quindi preoccuparsi di fornire i contenuti e di assegnare loro tag che abbiano valore semantico e ne definiscano la gerarchia 61
elaborati in remoto, prima che la pagina sia inviata al browser. • Producono tipicamente un codice HTML con contenuti generati dinamicamente, spesso da un database • I linguaggi dipendono dal sistema operativo del server (ad esempio ASP può essere elaborato solo su IIS) • Possono essere commerciali (come ASP o Coldfusion) o open source (come PHP, Ruby, ecc.) 62
linguaggio open source, tipicamente ospitato su server Unix/Linux (ma funziona praticamente su tutte le piattaforme) • PHP (Hypertext Preprocessor) è un linguaggio nato nel 1994 ad opera del danese Rasmus Lerdorf • La sua semplicità e versatilità hanno fatto sì che prendesse rapidamente piede • Insieme a Linux, Apache e MySQL, costituisce la piattaforma LAMP, una delle configurazioni più utilizzate a livello mondiale, cosa che ha contribuito moltissimo al suo “primato” • Linguaggi più moderni e più potenti, come Ruby e Python sono spesso indicati come potenziali successori di PHP 64
Microsoft che funziona su server IIS (Microsoft Internet Information Services) • Deve il suo successo alla sua semplicità e al fatto che è facilmente integrabile con gli strumenti della piattaforma “Microsoft Office” • ASP è stato ufficialmente abbandonato (anche se continua ad essere supportato sui server IIS) in favore di ASP.net. • Malgrando il nome in comune, ASP e ASP.net sono sostanzialmente differenti 65
inizi degli anni ’90 dalla Sun MicroSystems, ora acquisita da Oracle • Uno dei punti di forza di Java è quello di essere indipendente dalla piattaforma: un programma scritto in Java, tramite gli appositi interpreti, può girare su qualsiasi sistema operativo • Nel mondo del web la tecnologia Java prende la forma delle JavaServer Pages (JSP) • Esistono anche delle forme di applicazioni Java client side (le applet Java), che non hanno avuto molto successo a causa soprattutto della loro “pesantezza” in termini di utilizzo della CPU dei client, e sono state rapidamente soppiantate da Flash e Javascript 66
server. • Tra i tanti, vanno citati: • Perl, uno dei primi linguaggi usati nel mondo del web (è del 1987). Nato come ausilio per il reporting (da cui il nome: Practical Extraction and Report Language), ha preso rapidamente piede nel mondo del web finché non è stato soppiantato da PHP • Ruby on Rails è un framework open source basato sul linguaggio Ruby, fortemente basato sul modello MVC e creato negli anni ’90 per la 37Signals • Python è un linguaggio di programmazione nato nel 1991. È usato, tra gli altri, nei sistemi Google • Coldfusion è un linguaggio di Adobe, fortemente integrato con la sua suite di sviluppo e design 67
quelli server side, sono in numero molto ridotto. • Il motivo principale è che l’unico linguaggio elaborato nativamente dai browser è Javascript • Tutti gli altri necessitano di plug-ins, ovvero di estensioni (programmi) in grado di estendere le capacità del browser per leggere un particolare formato di file ed interpretarne i comandi • Tra questi, quello sicuramente più diffuso, è il formato Adobe Flash, con il suo linguaggio ActionScript 68
l’insieme delle proprietà che lo definiscono, sinteticamente individuate dalla sua estensione. • Esistono formati interpretati nativamente dai browser e altri che invece necessitano di un plug-in o di una helper application per essere riprodotti • I formati nativi includono comunemente le immagini GIF, PNG e JPEG e, naturalmente i file plain-text (HTML, CSS e JS sono tutti formati plain-text) • Alcuni browser supportono anche altri formati (ad esempio Chrome interpreta i file PDF senza bisogno di plug-in) • Con HTML5, molti browser comiciano a supportare anche formati audio e video (purché i relativi codec siano presenti nel sistema operativo) 69
il nome di LiveScript • Successivamente, in seguito all’implementazione di Java in Netscape fu ribattezzato Javascript (generando molta confusione) • In seguito al suo successo, Microsoft sviluppò una sua versione chiamata JScript • Solo successivamente fu standardizzato con il nome di EcmaScript (da ECMA, European Computer Manufacturers Association), ma mantiene per uso comune la vecchia denominazione 70
versioni dei browser e del linguaggio, per anni Javascript è stato sotto o mal utilizzato preferendogli soluzioni alternative (Flash) o confezionando siti “Best view with...”, quanto di peggio e di più lontano dal concetto di base del Web • L’affermazione degli standard, delle librerie JS e la crescita tecnologica stanno già da tempo, fortunatamente, invertendo la tendenza mettendo in evidenza le straordinarie capacità di questo linguaggio e delle sue implementazioni nei browser più recenti 71
ai vari browser ed anche per semplificare lo sviluppo, gli ultimi anni hanno visto la nascita di diverse librerie e framework Javascript (e CSS). • Una libreria è una raccolta di funzioni e strutture predisposti a interagire con un’ambiente di sviluppo per semplificarne l’utilizzo. È il caso di JQuery, per citare quella che attualmente è la più diffusa libreria Javascript. • Semplificando, possiamo dire che un framework espande il concetto di libreria nell’insegna del riutilizzo, aggiungendo porzioni di codice (anche di linguaggi correlati), immagini, templates (ampiamente testati) e indicazioni operative. Un esempio di framework è HTML5 Boilerplate, un sistema completo per costruire siti web utilizzando HTML 5. • Altre librerie e Framework: JQuery UI, Prototype, Mootools, Ext JS, Kendo UI, ecc. 72
di Macromedia) per la creazione e la riproduzione di Rich Internet Applications, ovvero applicazioni in grado di espandere le normali funzionalità dei browser. • Grazie alle sue enormi potenzialità (grafica vettoriale, streaming audio e video, animazioni avanzate, supporto dell’XML) ebbe un rapido sviluppo nel mondo del web, nell’epoca in cui la guerra dei browser aveva di fatto paralizzato lo sviluppo di altre tecnologie • Altro elemento importante è il fatto che Flash ha avuto, fin dalle prime versioni un suo linguaggio di programmazione, ActionScript (così chiamato a partire dalla 4ª release) basato su JavaScript 73
sito, in passato è stato utilizzato spesso anche per costruire interamente un sito web (cosa che comportava comunque vari problemi: difficoltà nell’indicizzazione dai parte dei motori di ricerca, difficoltà nella manutenzione, ecc...) • Con il miglioramento dei browser e la diffusione degli standard, Flash è tornato ad essere utilizzato in forma di componente di un sito (banner animati, streaming video) • Con HTML5, i browser possono gestire in modo nativo di alcune funzioni (come la visualizzazione di contenuti audio e video), rendendo di fatto Flash non più necessario (di fatto è già da tempo non supportato dai dispositivi IOS) 74
Builder), la strategia di Adobe per questa tecnologia sembra essere più orientata verso Applicazioni indipendenti, ponendosi come competitor della piattaforma .NET di Microsoft • Da notare che Microsoft, nel 2007, lancia la sua tecnologia SilverLight, alternativa a Flash per lo streaming Audio/Video 75
basato su un linguaggio di descrizione della pagina. • Un file PDF rappresenta un documento che può essere visualizzato in modo indipendente dalla piattaforma. • Oltre agli usi specifici legati al processo di produzione tipografica, il PDF è entrato rapidamente nell’uso corrente vista la sua capacità di contenere in un un’unico file documenti anche di grandi dimensioni. • La sua semplicità di creazione e l’integrazione in molti CMS ha fatto sì che spesso venga impropriamente usato per sostituire pagine HTML • È usato anche per la distribuzione di libri digitali, insieme ai classici formati e-book 76
marcatori (come l’HTML) utilizzato principalmente come supporto per la trasmissione di dati in modo indipendente dalla piattaforma e dal software che li ha generati. • L’XML fa molto altro: permette di gestire file di configurazione, definire e trasportare strutture complesse e può generare pagine HTML tramite l’uso dei fogli stile XSLT • Il suo utilizzo più frequente è nella trasmissione dati tramite l’utilizzo di web-services, applicazioni web in grado di scambiare dati tra server utilizzando appunto XML. 77 <rubrica> <nome>Mario</nome> <cognome>Rossi</cognome> </rubrica>
configurazione di un server dipendono da diversi fattori: • Il tipo di sito da realizzare • Il budget • Vincoli dovuti a particolari applicazioni (es. un CMS), ad esigenze di sviluppo, ecc.. 80
frequenti tipi di siti web in: • Siti “vetrina” (poche pagine statiche o dinamiche) • Siti e-commerce • Siti dinamici interattivi (che offrono un servizio online agli utenti) • Siti con importante contenuto multimediale (con o senza streaming) • Blog 81
create più perché “un sito web si deve avere” che per necessità • Se fatti con cura e individuandone il reale scopo possono comunque dar luogo a soluzioni dignitose • Spesso si tende ad arricchirli con moltissime cose inutili e scarsamente (o per nulla) aggiornate, aumentandone l’effetto negativo • Questo tipo di siti non necessità di particolari risorse e può essere creato anche con il solo HTML 82
essere costruiti con sistemi creati ad hoc o con CMS specifici (es. Magento) • Un sito e-commerce che funzioni non deve preoccuparsi solo degli aspetti legati strettamente al web, ma di tutto ciò che concerne l’attuazione del servizio: dalla logistica alla consegna • Siti di questo genere necessitano sicuramente di un database e di un linguaggio di programmazione. Le risorse da impiegare dipendendono dal tipo di software utilizzato e dalla quantità di transazioni previste 83
una variazione sul tema dei siti e- commerce (a prescindere dal fatto che siano a pagamento o no) • Sono siti che offrono servizi online di vario genere in cui la componente software (il prodotto offerto) ha un ruolo predominante • Progetti di questi genere hanno bisogno di un importante lavoro di pianificazione di tempi e risorse 84
materiale audio o video o in cui ci sia una importante percentuale di questo tipo di componente • In questi progetti è molto importante valutare il target in termini di dispositivi impiegati per la fruizione dei contenuti • Sono sicuramente necessari risorse importanti per servire il materiale agli utenti 85
anche che spesso si utilizzano CMS per blog anche per altri usi • Nella maggior parte dei casi le risorse standard dei più comuni piani di hosting offerti dai provider sono sufficienti a questo tipo di uso 86
di un provider, è necessario valutare anche aspetti più o meno secondari che possono però avere un ruolo importante nella realizzazione del progetto: • Quantità e capacità delle caselle email, qualità della webmail, presenza di filtri antivirus e antispam • Configurabilità dell’ambiente di sviluppo e dei DNS • Modalità di accesso al database, quantità e capacità dei db • Versioni del software disponibili • Applicativi preinstallati (CMS, tool di gestione e monitoraggio) • Possibilità di installazione di librerie software aggiuntive • ecc. 87
richiede la valutazione di diversi elementi e l’esecuzione di specifici passaggi: • Valutazione generale del progetto (aspettative e target) • Valutazione delle risorse hardware e software necessarie • Valutazione delle competenze necessarie • Definizione dell’architettura del sito • Creazione di un prototipo • Design • Implementazione • Pubblicazione • Eventuali operazioni di marketing 89
un provider è definito Hosting • All’avvio di un progetto web vanno prese in considerazione anche le caratteristiche dell’hosting offerte e necessarie al progetto • Nella scelta dell’hosting entrano in gioco parametri come lo spazio disponibile, il sofware installato o installabile, la sicurezza, il supporto tecnico 91
hosting: • Condiviso: è il sistema più comune e più economico e sicuramente sufficiente alla maggior parte dei casi. In questo caso, sulla stessa macchina sono collocati più domini che ne condividono CPU, memorie e risorse • Dedicato: è l’esatto opposto, ovvero una macchina dedicata solo al proprio dominio. Il provider si occupa della connettività, del backup e generalmente di un supporto di base 92
un sito e ridurne i costi è utilizzare un CMS (Content Management System) • Un CMS è in sostanza un software completo per la gestione e la pubblicazione di un sito web • Sono necessarie competenze basilari di programmazione (nel linguaggio del CMS) per adattare un software alle proprie esigenze e conoscenze di HTML e CSS per adattare la veste grafica • In rete, sono disponibili risorse con una grande varietà di skin per CMS sia gratuite che a pagamento • Tra i CMS più diffusi: Wordpress e Joomla, entrambi in ambiente PHP + MySQL 93
l’operazione con cui si acquista un nome a dominio presso l’autorità specifica del proprio paese • Generalmente, l’ISP presso cui si registra il dominio, offre anche il servizio di hosting. Benché non ci sia nulla che vieti di registrare domini e hosting presso ISP diversi, è bene verificare prima quale sia la scelta migliore in modo di semplificare la gestione del tutto 94
professionali principali coinvolte in un progetto web sono: • Progettista • Redattore dei contenuti • Web designer • Sviluppatore • Addetto alla promozione e al marketing • In base alla natura e all’entità del progetto, più figure possono essere assorbite da un’unica persona, o, al contrario, possono essere richieste competenze aggiuntive (architetto dell’informazione, esperto UX, ecc...) 95
web, strettamente legato al suo design è il prototyping, ovvero la creazione di un’anteprima grafica del progetto (statica o parzialmente funzionante). • Prima del prototyping vero e proprio può esistere una fase preliminare di individuazione della navigazione e delle interazioni, in cui le pagine non sono rappresentate in dettaglio, ma schematicamente (wireframing) 96
diversi scopi: • Mostrare al cliente una veste grafica definitiva ma ancora facilmente modificabile • Effettuare test di utilizzo (A/B testing) • Esplorare soluzioni alternative di singole parti • Velocizzare enormemente la fase di sviluppo • Oggi esistono moltissimi strumenti per wireframing e prototyping, online o desktop, tra queste: Balsamiq Mockup, Adobe Fireworks, Adobe Proto, ecc. • Molti designer utilizzano anche altri strumenti non specifici: Adobe Photoshop, Apple Keynote, ecc. 97
la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti” (it.wikipedia.org/wiki/Usabilità) • Per quanto riguarda il web, semplificando, possiamo definire “usabilità di un sito” la sua efficienza in termini di facilità per un utente nel navigare e nell’accedere a tutte le sue funzionalità • In termini più ampi, l’insieme delle sensazioni, percezioni e reazioni che un utente prova quando naviga un sito, è definita User Experience (UX). • Uno studio ben fatto sull’usabilità e sull’esperienza utente è sicuramente un valore aggiunto importante nella stesura di un progetto per un sito web 98
hardware o software che lo rende fruibile a persone con disabilità • Dal punto di vista del design di una pagina web, l’accessibilità di si basa sull’utilizzo di un markup semantico e con grammatica formale validata, sull’utilizzo di attributi atti a porgere all’utente informazioni alternative su un determinato elemento (ad esempio l’attributo ALT di un immagine). • L’accessibilità dovrebbe essere un elemento di attenzione per ogni designer e diventa un obbligo di legge quando si tratta di siti di pubbliche amministrazioni (anche se la normativa attuale, la legge Stanca del 2004, è scarsamente attuata) 99
World Wide Web Consortium ha avviato la Web Accessibility Initiative (WAI), allo scopo di definire linee guida e modalità di applicazione da utilizzare nella realizzazione di siti web accessibili. • L’iniziativa interessa sia i produttori di dispositivi hardware e software, che gli sviluppatori di siti web • Tra i documenti più direttamente legati al web design: le Linee guida per l’accessibilità ai contenuti del Web (WCAG) e l’insieme dei documenti WAI-ARIA (Accessible Rich Internet Applications) che specificano tecniche per aumentare l’accessibilità dei contenuti web. 100
• html.it: Guida Progettazione siti web ‣ http://www.html.it/guide/guida-progettazione-siti-web • html.it: Guida Pubblicare un sito web ‣ http://www.html.it/guide/guida-pubblicare-un-sito-web • Steve Krug, Don’t make me think ‣ Hops-Tecniche Nuove • 37 Signals, Defensive design per il web ‣ Hops-Tecniche Nuove • IWA Italy - International Webmaster Association Italia ‣ http://www.iwa.it/ • Webaccessibile: la risorsa di IWA Italy sull’accessibilità del web ‣ http://webaccessibile.org/ • Wikipedia: Usabilità ‣ http://it.wikipedia.org/wiki/Usabilità ‣ http://it.wikipedia.org/wiki/Usabilità_del_web • Wikipedia: User experience ‣ http://it.wikipedia.org/wiki/User_Experience • Wikipedia: Accessibilità ‣ http://it.wikipedia.org/wiki/Accessibilità_(design) • Jakob Nielsen's Website ‣ http://www.useit.com/ • Jakob Nielsen, Hoa Loranger, Web usability 2.0 ‣ New Riders- Apogeo • Donald A. Norman, La caffettiera del masochista ‣ Giunti • Luisa Carrada, Il mestiere di scrivere ‣ Apogeo ‣ http://www.mestierediscrivere.com • Web Accessibility Initiative ‣ http://it.wikipedia.org/wiki/Web_Accessibility_Initiative ‣ http://www.w3.org/WAI/ ‣ http://it.wikipedia.org/wiki/WAI-ARIA ‣ http://www.html5today.it/tutorial/introduzione-wai-aria
mcassandro
phaya72
tomorrowkey
__allllllllez__
lmi
infiniteloop_inc
meteatamel
neuecc
tamaiyutaro
yuhta28
lycorptech_jp
jacopen
handy
zenorocha
bluesmoon
jcasabona
addyosmani
chriscoyier
lara
sachag
schacon
keavy
bryan
brettharned
erikaheidi
