MASSIMO UBERTINI HTML

Transcript

1 MASSIMO UBERTINI HTML

2 MODULO 1 HTML Introduzione Web Visual Studio HTML TAG XHTML Grafica Layout Tecniche Multimedialità CSS HTML 5.0 HTML um 1 di 347

3 INTRODUZIONE STORIA L HTML (HyperText Markup Language) e il WWW (World Wide Web), sono nati alla fine degli anni 80 presso i laboratori di fisica nucleare del CERN (Conseil Européen pour la Recherche Nucléaire), di Ginevra (Svizzera). Nel marzo del 1989 Tim Berners-Lee tenne ufficialmente a battesimo il WWW che doveva servire a tutte le comunità di ricercatori e scienziati sparsi per il mondo, da cui Worldwide, per poter scambiare nel più breve tempo possibile e nella maniera più completa le proprie esperienze sulle ricerche in corso. Tim Berners-Lee insieme con Robert Cailliau scrisse il primo client WWW, un browser editor che girava sotto NeXTStep e il primo server, insieme alla maggior parte del software di comunicazione che definiva URL (Uniform Resource Locator), HTTP (Hyper Text Transfer Protocol) e HTML. 25 dicembre 1990 Prima pagina Internet: Berners-Lee lasciò il CERN per gli Stati Uniti, dove insegna scienza del computer e della comunicazione al Laboratorio di Scienza Informatica del MIT (Massachusetts Institute of Technology), ha fondato e dirige il W3C (WWW Consortium), un associazione di compagnie e utenti singoli per uno sviluppo sicuro e democratico del web. 7 gennaio 1997 NCSA (National Center for Supercomputing Applications) MOSAIC di Marc Andressen ed Eric Brina Nasce VOIP (Voice Over Internet Protocol) la voce attraverso Internet. LYCOS progettato da Michael Maudin, deriva Lycos idae famiglia di ragni che inseguono la preda invece di usare la tela. SGML (Standard Generalized ML) È il padre dell HTML, SGML è una famiglia di linguaggi di markup di cui HTML è uno dei membri, in pratica SGML è una specifica di linguaggi di contrassegno che permette ad un utente di definire il proprio linguaggio di contrassegno, l HTML è quindi un istanza dell SGML. Evoluzione La prima versione dell HTML, nota come HTML senza specifica della versione, non si differenzia in maniera sostanziale dalla versione corrente, i TAG definiti nella versione HTML um 2 di 347

4 iniziale del linguaggio sono rimasti anche nella versione attuale e questo comporta che una vecchia pagina scritta nella versione 1.0 dell HTML è ancora correttamente visualizzabile da un browser basato sull ultima versione. Non è vero il viceversa, perciò una pagina scritta secondo gli standard della nuova versione non porterà alla visualizzazione in un vecchio browser. specifiche di HTML I nuovi elementi dell HTML sono i seguenti: q, ins, del, acronym, legend, colgroup, button e fieldset. Gli elementi disapprovati: isindex, applet, center, font, basefont, strike, s, u, dir e menu. Gli elementi ritenuti obsoleti: xmp, plaintext e listing, al posto dei quali va usato esclusivamente il comando pre. Caratteri Usa il set di caratteri ISO/IEC (International Organization for Standardization) (International Electrotechnical Commission) che include qualsiasi tipo di carattere in qualsiasi lingua, ciò vuol dire che il W3C ha tenuto conto dello sviluppo planetario del web e che sarà possibile inserire in una stessa pagina idiomi o caratteri di lingua differenti. Accessibilità Tiene conto delle limitazioni incontrate dai portatori di handicap e prevede diversi strumenti per facilitarne l accesso a documenti iperstestuali. Distinzione tra struttura base e contenuto di un documento attraverso i fogli di stile. Tabelle che prevedono la possibilità di accedere ai non vedenti. Form che permettono di essere selezionati attraverso tasti di scelta rapida. Mappe cliccabili che possono visualizzare testo in alternativa alle immagini. Supporto dei comandi title e lang per tutti gli elementi. Descrizioni lunghe per tabelle, immagini, frames. Supporto degli elementi abbr e acronym. Possibilità di usare, all interno di fogli di stile, linguaggi di comunicazione quali TTY (TeleTYpe), braille ed altri. Object Potranno essere inseriti elementi eseguibili e multimediali, per fare questo il marcatore object sostituisce gli attuali img e applet. Questo marcatore permette d includere immagini, video, suoni ed applicazioni nel documento, attraverso una tecnica gerarchica per specificare varie alternative in base all ambiente in cui si trova ad operare il browser dell utente. Tabelle Permette un notevole controllo sulle tabelle. L elemento colgroup permette di creare gruppi di colonne, specificandone allianeamento e larghezza. 1. Possibilità di allineamento per caratteri indicati come (.) e (:) per esempio, sarà possibile allineare una colonna di numeri sul punto decimale. 2. Introduzione di maggior flessibilità. 3. Possibilità di ottenere tabelle scorrevoli con testate fisse, più un supporto adeguato per le tabelle interrotte durante le pagine di stampa. 4. Semplificare le tabelle importate per adeguarsi al modello SGML CALS, l ultima stesura fa sì che l attributo sia compatibile con le ultime versioni dei più popolari browsers. 5. Un nuovo elemento permette di raggruppare una serie di colonne con larghezza e proprietà di allineamento differenti da uno o più elementi e rules="basic" è stato HTML um 3 di 347

5 sostituito da rules="groups". Form L attributo accesskey specifica un accesso diretto tramite tastiera ai campi del formulario. Con readonly, un attributo supplementare, i webmaster possono vietare i cambiamenti ai campi del form; l elemento label aggiunge un etichetta con un particolare form di controllo. L elemento fieldset raggruppa campi in relazione fra di loro e, in associazione con l elemento legend, può essere usato per nominare il gruppo. Entrambi questi elementi, permettono una migliore interpretazione e interazione; una nuova serie di attributi onchange-input, in associazione con il supporto per i linguaggi script, permette ai form dei providers di verificare i dati inseriti dall utente; l elemento input ha un attributo accept che permette agli autori di specificare una lista di media o tipi di struttura per l input; l elemento button può essere usato per arricchire i forms in modo diverso oltre ai classici submit e reset. Scripting Prevede la possibilità di associare script ai form, in modo da generare una maggior interattività con l utente, senza per questo doversi servire di complesse applicazioni Java. Stampa Permette di stampare pagine web senza per questo ottenere una riproduzione della pagina, si ha la possibilità di definire ciò che sarà stampato e come sarà stampato. HTML um 4 di 347

6 WEB BROWSER La prossima generazione renderà la navigazione più veloce e sicura grazie a nuove tecnologie in grado di ottimizzare le risorse hardware disponibili. Plugin Prima i plugin erano eseguiti in un unico processo perché tutti i componenti condividevano una porzione della RAM (Random Access Memory). Google ha eliminato questo difetto in Chrome, avvia i plugin in processi separati, se Flash va in crash il browser non è coinvolto. Accelerazione 3D Il browser per renderizzare sequenze 3D usa l interfaccia WebGL che utilizza direttamente la scheda grafica con le OpenGL (Open Graphics Library). GPU (Graphics Processing Unit) Power In Windows i browser inviano il codice calcolato alla GDI (Graphics Device Interface) che ha i seguenti compiti: visualizzazione grafica, tracciare linee e curve, renderizzare i font, per questi compiti usa la CPU. Per questo motivo Microsoft propone DirectWrite e Direct2D che sfruttano la GPU con le DirectX9. HTML um 5 di 347

7 Web 1.0 Nella prima decade della sua vita il web è stato un medium di sola lettura: una grande libreria dalla quale ricevere informazioni. Web 2.0: social network Nella seconda decade ha visto la diffusione di servizi che lo hanno trasformato in un medium di scrittura, attraverso blog e social network, rete di relazioni, i navigatori si sono convertiti da spettatori in attori, iniziando a pubblicare informazioni e opinioni: è il web della partecipazione. Facebook: 2004 Mark Zuckerberg. Web 3.0: web semantico Nella terza decade le informazioni disponibili diventano comprensibili ai PC. I PC oggi conservano i documenti senza comprenderne il significato che invece di solito è chiaro a prima vista per un lettore umano. Quando un motore di ricerca salva nella sua cache le pagine web, non distingue se la parola espresso si riferisca ad un treno o a un tipo di caffè, lo stesso vale per i contenuti non testuali come le immagini o gli elementi multimediali. Il WWW contiene un enorme quantità di documenti e d informazioni che si stanno espandendo rapidamente. I dati web sono non strutturati o semistrutturati, quindi difficili da cercare. La ricerca d informazioni sta diventando sempre più onerosa sia in termini di tempo sia in termini di risorse. Il web semantico è stato proposto come soluzione al problema. HTML um 6 di 347

8 Esplicita l intento di costruire un sistema capace di operare trattando documenti che siano comprensibili sia dagli esseri umani sia da applicazioni software. Il web semantico rappresenta l evoluzione d Internet da semplice sistema di comunicazione e recupero di documenti, ad un sistema intelligente in cui l informazione sarà compresa da specifici software in grado di assistere l utente a localizzarla e a rielaborarla in modo personalizzato e adatto alle proprie esigenze. Architettura È rappresentata sotto forma di una pila di livelli indipendenti. La pila mostra l ordine di sviluppo e le relazioni fra i diversi pezzi che la formano. Ogni livello è indipendente ma connesso a quello precedente e a quello successivo: sistemi compatibili con la tecnologia di un livello lo saranno anche con quella del livello più in basso. Alla base della pila, ossia alla base del web semantico, vi sono le risorse web, raggiungibili con indirizzi in caratteri occidentali URI o in caratteri internazionali IRI (Internationalized Resource Identifier). Il livello dei documenti strutturati: XML (extensible ML). Il livello delle asserzioni: RDF (Resource Description Framework), RDFS (RDF Schema) e OWL (Web Ontology Language) sono i linguaggi basati su XML che permettono di rappresentare le risorse web sotto forma di dati e di renderle disponibili ai livelli successivi. A supporto di questi linguaggi vi è SPARQL (Simple Protocol And RDF Query Language), con cui s interrogano le basi di dati create con RDF e OWL attraverso una sintassi simile a quella dell SQL (Structured Query Language) e RIF (Rule Interchange Format), la tecnologia per condividere regole fra sistemi semantici differenti. Il livello della logica dovrebbe consentire alle macchine di acquisire nuove conoscenze a partire da quelle già rappresentate, per esempio, con RDF e OWL. Il livello della prova sarà utilizzato per verificare che le nuove conoscenze acquisite con il livello logico siano dimostrabili, mentre Il livello della fiducia permetterà di accertarsi, con l uso ad esempio di firme digitali che l intero processo sia basato su connessioni affidabili. Il livello della fiducia è centrale poiché assicura che l intero processo di rappresentazione, elaborazione e produzione di nuove informazioni sia affidabile e possa essere utilizzato con sicurezza in applicazioni o in servizi web. Ontologie Le ontologie sono l ultimo scalino verso il web semantico. Un ontologia è una esplicita e formale specificazione di una concettualizzazione condivisa. Concettualizzazione perché ci si riferisce a un modello astratto di fenomeno. Condivisa perché cattura conoscenza riconosciuta da un gruppo. HTML um 7 di 347

9 Formale perché automaticamente decodificabile. Esplicita perché basata su strutture di immediata applicazione. Un ontologia è formata da un insieme di classi. Un ontologia è formata da un insieme di relazioni. Un ontologia è formata da un insieme di proprietà e restrizioni. Un ontologia è formata da un insieme d istanze. Vocabolari Stabiliscono un elenco di termini con cui definire gli elementi all interno di un campo di conoscenze, per esempio nel campo delle biciclette un vocabolario potrebbe stabilire che, per identificare il modello di una bicicletta si dovrà usare il nome modello, per identificare la serie il nome casa costruttrice. Il web semantico può contare su un gran numero di vocabolari, ossia di elenchi di termini o HTML um 8 di 347

10 frasi che rendono standard l espressione di alcuni concetti. Alcuni di essi sono utilizzati per descrivere le informazioni relative alle persone: FOAF (Friend of a Friend) e hcard, informazioni sulla collocazione geografica di un luogo: Geonames, sugli eventi: RDFCalendar e sui social network: Sioc, sui prodotti pubblicati in un sito di commercio elettronico: GoodRelations. Progettazione Definizione di classi. Organizzazione delle classi in una gerarchia tassonomica. Definizione delle proprietà e valori leciti per ciascuna di esse. Attribuire i valori alle proprietà per tutte le istanze create. Linguaggi Alla base del web semantico vi è un linguaggio o, meglio, un modello per la strutturazione dei dati chiamato RDF (Resource Description Framework) che è per i dati quello che l HTML è per le pagine web. XML RDF Consente di standardizzare il modo in cui sono definiti i metadati in rete, fornendo un modello espressivo semplice basato su tre tipi di oggetti. 1. Risorse: oggetti identificati univocamente da un URI. 2. Proprietà: attributo che descrive una risorsa. 3. Asserzione: tripla costituita da Soggetto, risorsa Predicato, proprietà Oggetto, valore della proprietà. La relazione è espressa visualmente sotto forma di grafo in cui soggetto e oggetto sono i nodi mentre gli archi rappresentano le proprietà. OWL Fornisce un linguaggio per definire ontologie strutturate, basate su web che permettono una più ricca integrazione ed interoperabilità di dati tra comunità descrittive. Utilizza gli URI per i nomi e la struttura di descrizione per il web fornita da RDF per aggiungere le seguenti funzionalità alle ontologie. Capacità di essere distribuite tra molti sistemi. Scalabilità per le necessità del web. Compatibilità con gli standard web per l accessibilità e l internazionalizzazione. Apertura e estensibilità. OWL è suddiviso in tre sottolinguaggi, ognuno caratterizzato da una diversa capacità espressiva. 1. OWL Lite, permette di esprimere semplici vincoli e gerarchie di classificazione. 2. OWL DL, permette di disporre di una massima espressività, sia garantendo che il sistema d inferenza estrarrà tutte le conclusioni, sia che tutte le elaborazioni si concluderanno in un tempo finito. HTML um 9 di 347

11 3. OWL Full, permette di sfruttare tutta la libertà sintattica di RDF ma senza alcuna garanzia che il sistema estrarrà tutte le conclusioni possibili. Estrazione dati L estrazione di dati consiste in cinque passi. 1. Si sviluppa un application ontology che descrive un area d interesse. 2. Si analizza questa ontologia per generare uno schema di database e per generare regole per associare costanti e parole chiave. 3. Per ottenere dati dal web, si richiama un estrattore di record che divide un documento web non strutturato in pezzi, della dimensione del record, pulendoli dai TAG di markup, e presentandoli come documenti di singoli record non strutturati per una successiva lavorazione. 4. S invoca un riconoscitore che usa le regole di associazione generate dal parser, analizzatore, per estrarre dai singoli documenti non strutturati puliti gli oggetti attesi per riempire l istanza del modello. 5. Al termine, si usa un euristica per determinare quale costante popola quale record nello schema di database. Questa euristica mette in relazione le parole chiave estratte con le costanti estratte e usa set di relazioni e costrizioni di cardinalità nell ontologia per determinare come costruire i record e inserirli nello schema di database. Una volta che i dati sono estratti, si possono fare interrogazioni usando un linguaggio standard di query per database. Il web semantico è un evoluzione che né sostituisce né entra in concorrenza con il web attuale; lo si può immaginare come una sorta di strato applicato alle informazioni pubblicate online e che ne consente la comprensione anche da parte di un applicazione software. Un elemento pubblicato online una pagina, un video, un immagine seguendo gli standard del web semantico potrebbe avere così due facce. 1. Una tradizionale da visualizzare normalmente sul browser. HTML um 10 di 347

12 2. Una nuova, in RDF e OWL o in altri linguaggi che sarà però letta e interpretata da applicazioni o agenti intelligenti. Per estendere questo strato si può agire in due modi. 1. Bottom up: pubblicando nuove informazioni che hanno già al loro interno delle notificazioni semantiche, per esempio OntoWiki. 2. Top down: aggiungere un livello semantico a informazioni già pubblicate, risiede interamente sulla capacità di un applicazione di capire il significato di un testo che gli viene somministrato e di formalizzarne i concetti in modo da renderli poi riutilizzabili da software in diversi contesti; è l approccio più complesso e richiede grande potenza di calcolo e raffinati strumenti di elaborazione del linguaggio naturale NLP (Natural Language Processing) e di apprendimento automatico; per esempio Cogito. Cogito della modenese Expert System, l azienda che ha sviluppato il correttore ortografico italiano incluso nelle edizioni di Microsoft Office. Il primo passo che compie Cogito quando riceve un testo da analizzare è l analisi grammaticale, logica e lessicale del testo. Questa analisi consente non solo d individuare il significato di singole parole o di sintagmi specifici, come ad esempio area euro a indicare l area economica che adotta la moneta unica ma organizza il testo in unità minime di significato sotto forma di triplette soggetto, verbo, complemento oggetto e individua gli argomenti principali del testo sotto forma di temi di economia, statistica, lavoro, sport, scuola. Durante l analisi, attraverso una rete semantica, un ontologia, chiamata Sensigrafo e composta da più di un milione di nodi in quattro lingue italiano, inglese, arabo e tedesco, il motore disambigua le parole che hanno più di un significato: per la parola persona, ad esempio, il motore di Cogito registra nove significati differenti e, in base al contesto della frase, seleziona quello più pertinente. Sensigrafo è una rete semantica che, inizialmente costruita a mano, può oggi apprendere automaticamente nuovi concetti per espandere i domini di conoscenza. In un passaggio successivo Cogito individua le tre frasi più importanti del testo, estrae le entità più rilevanti personaggi, città, luoghi, aziende, date, indirizzi e costruisce fra di esse una rete di riferimenti utilizzando delle azioni come collegamento. Tutte le relazioni individuate possono essere visualizzate in un grafo in cui ai nodi corrispondono le entità e agli archi le azioni. Un testo così strutturato, in cui ogni entità è messa in relazione ad un altra in base a dei significati, è un testo compreso completamente da una macchina. HTML um 11 di 347

13 Ambiente di sviluppo L ambiente di sviluppo di ontologie integrate o meglio editor di ontologie, è un tool grafico con tre componenti principali. 1. Un editor di modelli strutturati per definire le strutture e relazioni tra oggetti. 2. Un editor di frame di dati per definire graficamente espressioni regolari usate per identificare costanti e parole chiave. 3. Un visualizzatore di documenti che evidenzia frasi associate a espressioni regolari. HTML um 12 di 347

14 Ontologie NLP (Natural Language Processing) Wordnet si configura come un sistema incrociato di riferimenti lessicali basato sulle più recenti teorie psicolinguistiche della memoria lessicale umana. Nomi, verbi, aggettivi sono organizzati in insiemi di sinonimi, ognuno dei quali rappresenta un concetto lessicale. Ontologie in Word Microsoft ha pubblicato un add-on che consente d integrare ontologie nei testi scritti con Word. Salva in locale alcune ontologie scelte da Microsoft e permette di annotare i testi che si sta scrivendo con i termini in esse contenuti. HTML um 13 di 347

15 VISUAL STUDIO INTRODUZIONE Prima di avviare un qualsiasi progetto web, è importante la scelta degli strumenti più adatti per raggiungere i propri obiettivi. La soluzione di scrivere da zero l intero codice è inefficiente e richiede un notevole dispendio di tempo e risorse. Per fortuna, è possibile evitare di reinventare la ruota, ricorrendo a strumenti che forniscano il codice comune e indispensabile alla maggior parte dei progetti. Il sito web del.net Framework è noto come ASP.NET (Active Server Page). I mondi delle applicazioni desktop e delle applicazioni web convergono con.net, è stato introdotto un modello di programmazione per il web che ha permesso ai programmatori di trasferire le proprie competenze di sviluppo Windows in ambito web. Per realizzare ed eseguire un applicazione web con ASP.NET è necessario che nel sistema sia installato il.net Framework e un server web in grado d interpretare ed eseguire i file ASP.NET che hanno estensione ASPX. Visual Studio integra un server web per consentire di eseguire ASP.NET: IIS (Internet Information Services) Express 8, simile a IIS. Per non andare in conflitto con la porta 80 gestita da IIS, questo server web intercetta le richieste HTTP su una porta configurata: nell esempio HTML um 14 di 347

16 ESEMPIO Aprire un progetto, File/Nuovo progetto (CTRL+MAIUSC+N). Nella finestra Nuovo progetto, selezionare Modelli//Visual C#/Web/Applicazione Web ASP.NET vuota. Si apre un progetto vuoto, allora bisogna inserire una pagina HTML. Visual Studio supporta i nuovi standard web, come HTML5, CSS3, EcmaScript5. HTML5 Il controllo FileUpload supporta l upload multiplo di file nei browser che implementano questa funzionalità. Il controllo TextBox accetta i nuovi valori legati ai form nella proprietà TextMode. I nuovi TAG <video>, <article> e <header> supportano un modello a oggetti ricco anche lato server. L UpdatePanel supporta l inserimento separato dei file JavaScript legati alle diverse funzionalità o controlli (AJAX Library, GridView, Menu) che ora possono essere aggiornati singolarmente e non sono inclusi in maniera statica come risorse all'interno di ASP.NET. CSS3 Supporto all indentazione delle regole CSS (Cascading Style Sheet), utile quando ci sono espressioni che si applicano a selettori complessi, ai browser hack, un color picker, gli snippet e le regioni che consentono di raggruppare le sezioni. Fare clic sul nome del progetto con il tasto destro Aggiungi/Nuovo elemento. HTML um 15 di 347

17 Fare clic su Aggiungi. Nel progetto, Visual Studio inserisce automaticamente il file HTML vuoto. Visual Studio offre un ambiente RAD (Rapid Application Development) visuale che aiuta il programmatore nello sviluppo dell applicazione web. Il file HTMLPAGE1.HTML si apre nell area di progettazione, dove il programmatore progetta l aspetto visuale della pagina web. In basso a sinistra ci sono tre modalità di progettazione. Progettazione Si costruisce la pagina trascinando i controlli web presenti nella Casella degli strumenti. Usato per la progettazione di pagine HTML senza conoscere la sintassi, il codice resta invisibile e il programmatore interviene sul documento come se lavorasse con un word processor. Dividi La finestra di progettazione si divide in due parti, nella parte inferiore si trascinano i controlli web e nella parte superiore c è il codice di markup scritto da Visual Studio. Origine Si scrive direttamente il codice di markup nella pagina. HTML um 16 di 347

18 Progettazione È il designer dove si rappresenta graficamente l interfaccia su cui si sta lavorando. Per eseguire l applicazione, fare clic sul menu Debug/Avvia senza eseguire debug (CTRL+F5) il progetto si avvia come se si trattasse di un applicazione Windows ma si apre il browser che visualizza la pagina realizzata. Fare clic con il pulsante destro sull icona nell area di notifica. HTML um 17 di 347

19 C è la possibilità di scegliere il browser con cui effettuare i testing. È possibile usare l intellisense. L intellisense JavaScript è basato sull esecuzione di codice. Possibilità di definire globalmente le librerie JavaScript e il relativo helper, per avere l ntellisense, anziché farlo localmente ogni volta che si utilizza. HTML um 18 di 347

20 DSL (DYNAMIC STYLESHEET LANGUAGE) Linguaggio dinamico che ha variabili, istruzioni, mixin, operatori e funzioni. Nell OOP (Object Oriented Programming) un mixin è una classe che contiene una combinazione di metodi provenienti da altre classi. Less È un CSS preprocessor, in altre parole uno strumento che estende le funzionalità di CSS. Libreria per la personalizzazione della grafica del sito con fogli di stile in formato LESS. In Less i mixin sono istruzioni che incorporano blocchi di dichiarazioni definiti altrove nel CSS, un set di mixin pronti per l uso si trova all indirizzo seguente Ci sono due modi per programmare. 1. Usare Less solo in fase di sviluppo e poi compilare per generare dai file LESS i corrispondenti CSS. 2. Incorporare direttamente nel sito i CSS in formato LESS, bisogna, però, includere la libreria LESS.JS, inoltre s impiega più tempo per il caricamento delle pagine. File BOOTSTRAP.LESS // Core variables and "mixins.less"; // "print.less"; // Core CSS HTML um 19 di 347

21 @import "type.less"; // "glyphicons.less"; // Components w/ "tooltip.less"; "bootstrap.less";.page-header { font-size: (@font-size-base * 1.4); font-weight: 200; line-height: (@line-height-base * 1.4); h1{ font-size: (@font-size-base * 4); } }.page-footer { }.page-header{ margin: px; }.page-content{ margin: 0 auto; }.content-area{.col-md-8; width: percentage((8 }.sidebar-container{.col-md-4; width: percentage((4 } // mixin in azione.content-area-left,.sidebar-container-left{ float: left; }.content-area-center{ margin-left: auto; margin-right: auto; }.content-area-right,.sidebar-container-right{ float: right; }.page-footer{ margin: 40px 0 0; padding: 28px; }.jumbotron{ HTML um 20 di 347

22 } margin: 0 auto; padding-top: (@jumbotron-padding); padding-bottom: (@jumbotron-padding); HTML um 21 di 347

23 HTML Linguaggio di formattazione Le pagine web sono documenti in formato testo. I file HTML hanno estensione HTML o HTM e si tratta di file statici, ossia non generati dinamicamente da uno script server side che potranno risiedere anche sul desktop dell utente, doppio clic e il sistema avvia il browser predefinito che interpreta i TAG e presenta il documento sul monitor. L HTML è un linguaggio di formattazione, non di programmazione, ossia un linguaggio in cui le istruzioni sono costituite da TAG che permettono al browser di attribuire un significato a testi o ad elementi mediali e multimediali e di renderli a video nelle modalità desiderate dallo sviluppatore. Se, per esempio, all interno di una frase si applica la formattazione del grassetto e si sbaglia il marcatore non è segnalato alcun errore, la frase apparirà comunque per intero e semplicemente non sarà visualizzato il grassetto. Il documento è composto da elementi che ne definiscono la struttura. Titoli. Paragrafi. Elenchi. Tabelle. Per indicare di che tipo sono gli elementi e per delimitare l inizio e la fine di ciascun elemento si usano i TAG. Un TAG è costituito da una parola chiave tra (<>), il TAG di chiusura usa la stessa parola chiave preceduta dal segno di slash (/). HTML um 22 di 347

24 L inserimento dei TAG nel documento è definito fase di contrassegno. <tag>testo</tag> Per poter applicare più comandi con lo stesso TAG, sono stati introdotti i parametri che sono inseriti solo nel TAG di apertura. Tranne che per alcune rare eccezioni i parametri da soli non sono in grado di svolgere alcuna funzione, occorre attribuire un valore al parametro: il valore è scritto tra virgolette e dopo il simbolo di uguale (=). <tag parametro= valore > testo </tag> Linguaggio sorgente I browser offrono dei tool di sviluppo e debugging per il codice sorgente, per esempio, in Internet Explorer il menu Strumenti/Strumenti di sviluppo F12 apre la finestra seguente. TRE LIVELLI I linguaggi da conoscere sono tre e ognuno di essi ha una specifica finalità, costituiscono quelli che sono definiti i tre livelli del webdesign. 1. HTML: imposta la struttura e racchiude il contenuto della pagina web. 2. CSS: descrive l aspetto della pagina web e dei suoi elementi, presentazione. 3. JavaScript: è un linguaggio di scripting, interpretato direttamente dal browser attraverso uno script engine che ne esegue le istruzioni e rende la pagina interattiva. Sebbene sia possibile inserire istruzioni CSS o JavaScript direttamente all interno del codice HTML, modalità che è definita inline, è buona regola tenere distinti i tre linguaggi, creando file separati e richiamandoli, all occorrenza, all interno dei file HTML. HTML um 23 di 347

25 STRUTTURA DI UNA PAGINA WEB La struttura di una pagina, anche se è vuota presenta TAG nidificati e si divide in due parti tutte racchiuse tra i TAG <html>. 1. L header: <head>. 2. Il corpo: <body>. Il primo TAG è <html> che è chiuso al termine del documento con </html>, segnala al browser che il documento conterrà del codice HTML. <head> identifica l intestazione della pagina e contiene informazioni invisibili, vanno incorporati file CSS e JavaScript esterni. <title> contiene il titolo della pagina, ovvero quel testo che apparirà in alto, nella pagina web, sulla barra del titolo del browser. <body> è il corpo della pagina e conterrà tutti i TAG relativi al testo, alle immagini, al layout, di fatto tutti gli elementi che si vogliono inserire nella pagina web saranno scritti tra <body> e </body>. Gli elementi contenuti nel body si dividono in due categorie. 1. Elementi di blocco, block level: hanno un ritorno a capo prima e dopo, per esempio titoli e paragrafi. 2. Inline: non hanno un ritorno a capo, per esempio i collegamenti ipertestuali. Tutti questi TAG sono obbligatori e devono comparire in tutte le pagine web. <html> <head> <title> </title> </head> <body> <!-- commento --> </body> </html> HTML um 24 di 347

26 DOCTYPE Dev essere il primo elemento ad aprire il documento, questo vuol dire che dev essere posto prima di <html>. Si tratta di un TAG che non ha bisogno di chiusura e che ha il compito di fornire informazioni al server che ospita la pagina. Le informazioni fornite da DOCTYPE riguardano il tipo di documento visualizzato oltre ad essere necessarie alla comunicazione tra browser e server. DOCTYPE dev essere scritto in una forma standard. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Questa riga fornisce alcune informazioni sul documento. HTML PUBLIC: il documento è pubblico. DTD XHTML 1: la versione di XHTML supportata è la 1. EN: la lingua del documento è l inglese. L uso di DOCTYPE non è obbligatorio e può essere omesso. Paragrafo In HTML non esistono i concetti di barra spaziatrice e paragrafo intesi secondo i concetti della normale videoscrittura, è infatti possibile scrivere il testo a piacere, anche andando a capo o lasciando molti spazi. Comunque, il testo va inserito in elementi che rispecchiano la struttura del documento. È possibile creare un paragrafo usando il TAG <div>, con la sua chiusura </div>. Ogni volta che si utilizza questo TAG, il testo è inserito a capo. Il TAG <div> permette di creare dei blocchi di codice (division) da distinguere logicamente dalla restante parte del documento. All interno di una <div> possono trovar posto un menu di navigazione, degli annunci pubblicitari, una galleria d immagini e, in generale, parti di pagina che racchiudono elementi logicamente omogenei. <html> <head> <title> </title> </head> <body> <div> Testo nella pagina</div> </body> </html> Gli spazi non sono considerati. In alternativa a <div>, è possibile usare il comando <p>, è uguale ma lascia un interlinea tra i due paragrafi, la dimensione dell interlinea è direttamente proporzionale alla HTML um 25 di 347

27 dimensione del carattere che, in questo esempio, è quello di default. <html> <head> <title> </title> </head> <body> <p> Testo nella pagina</p> </body> </html> I caratteri speciali si scrivono nella forma seguente: &nome. (spazio) " ( ) Interruzione di linea I paragrafi sono elementi di blocco e quindi è inserito un ritorno a capo prima e dopo il paragrafo. I ritorni a capo inseriti nel testo non sono interpretati. All interno di un paragrafo ampio e con molto testo, è naturale desiderare d inserire un interruzione di linea. Il comando è <br> (Break Row), questo TAG non richiede alcuna chiusura, il testo è mandato a capo nel punto in cui compare <br>, anche se nel codice è stato scritto tutto su un unica riga, è possibile inserire un numero di <br> a piacere. Il TAG <hr> oltre ad andare a capo inserisce una riga. <html> <head> HTML um 26 di 347

28 <title> </title> </head> <body> <p> Testo <br/> nella pagina</p> </body> </html> Intestazione Usare le intestazioni è molto importante, dal momento che consente di applicare ad un determinato testo una formattazione particolare. Per i titoli si usano i TAG <h1> significa di heading1, <h2>, <h3>, <h4>, <h5>, <h6>. <html> <head> <title> </title> </head> <body> <h1> Intestazioni </h1> </body> </html> Il testo è scritto in grassetto e con una dimensione maggiore, il numero uno identifica il livello d intestazione. Al posto del numero uno, è possibile inserire i numeri da due a sei, la dimensione del testo è maggiore per l intestazione di primo livello e via via minore fino al sesto livello, il meno importante. Anche se ad ogni intestazione corrisponde un interlinea, mettere più intestazioni affiancate non porta a sommare le interlinee. Esempio, progettare una pagina web, inserire un testo nel TAG <title>, aggiungere nel HTML um 27 di 347

29 body un intestazione di secondo livello e inserire un testo all interno di un paragrafo. <html> <head> <title>la mia prima pagina web </title> </head> <body> <h2> Titolo della pagina </h2> <p> <Testo della pagina ></p><br/> <p> "Testo della pagina"</p> </body> </html> TAG annidati Un TAG può contenere altri TAG. Il TAG che si apre per ultimo deve sempre chiudersi per primo. Una buona norma per evitare errori di annidamento è quella d indentare il codice, in modo da averne una lettura più immediata. HTML um 28 di 347

30 TAG Formattazione Scelta del carattere Per poter modificare un carattere, senza dover ricorrere alle intestazioni che apportano anche il grassetto e l interlinea, si usa il TAG <font>. <html> <head> <title>la formattazione del testo </title> </head> <body> <font> Testo da formattare </font> </body> </html> Se si osserva il browser si nota che non è cambiato nulla. font non può essere usato senza parametri, per cui ha tre parametri unici e proprietari. face contiene il nome del carattere che si desidera utilizzare, il nome del carattere è quello contenuto nel file di sistema, per esempio Arial. È possibile inserire qualunque carattere installato sul PC, tuttavia solo se l utente finale possiede quel preciso carattere la pagina sarà formattata correttamente. <font face = Arial >Testo da formattare</font> Per ovviare a questo problema, è possibile inserire più caratteri, separati da una virgola, in questo modo se l utente non possiede il primo carattere, sarà visualizzato il secondo e poi il terzo. <font face = Arial, Verdana, Georgia >Testo da formattare</font> Tra i caratteri universali, quelli presenti su tutti i PC, ci sono il Verdana, l Arial ed il Times. Dimensione del carattere Un secondo parametro di font è size, consente di modificare la dimensione del testo. È possibile inserire come valore un numero compreso tra uno e sette. Al contrario dell intestazione, al numero uno corrisponde la dimensione minore: 12 pt. <font face = Arial size = 1 >Testo da formattare</font> HTML um 29 di 347

31 Se si desidera modificare la dimensione di una particolare porzione di una frase, è possibile nidificare il TAG <font>. <html> <head> <title>la formattazione del testo </title> </head> <body> <font face = "Arial" size = "1">Testo da <font size = "5"> formattare</font></font> </body> </html> È possibile inserire anche un valore relativo, un numero preceduto dal segno più o meno. In questo modo sarà applicato un valore relativo a quello inserito nel TAG principale. <font face = Arial size = 1 >Testo da <font size = +1 > formattare</font></font> Il risultato è equivalente ad inserire il valore due all interno del parametro size. Colore del carattere È possibile modificare il colore del testo con il parametro color. Questo parametro può ospitare il nome del colore o il codice esadecimale, per esempio si può inserire la parola red. <font color = red >Testo da formattare</font> Il codice esadecimale è una serie di sei caratteri, corrispondenti ai tre canali RGB (Red Green Blue) del colore, per distinguere questa serie da un qualunque altro insieme di caratteri, è inserito prima del codice il carattere speciale cancelletto (#). Per conoscere il codice corrispondente al colore scelto, è possibile usare una qualunque applicazione di grafica. <html> <head> <title>la formattazione del testo </title> </head> <body> <font color = "#ff0000"> Testo da formattare </font> </body> </html> HTML um 30 di 347

32 Alcune parti all interno del testo possono essere evidenziate con i TAG <em> emphasized e <strong> che sono elementi inline. <html> <head> <title>la formattazione del testo </title> </head> <body> <p>testo normale<em>testo em</em><strong>testo strong</strong> Test normale</p> </body> </html> Altri TAG che servono per differenziare parti di testo sono i seguenti. I primi due sono elementi di blocco, tutti gli altri sono elementi inline. <html> <head> <title>la formattazione del testo </title> </head> <body> <address> Indirizzo dell autore della pagina web.</address> <blockquote>citazione proveniente da un altra fonte.</blockquote> <cite>citazione con cite, </cite><q>citazione con q,</q><dfn> definizione.</dfn> <code>codice di un applicazione, </code><var>variabili, <kbd> tastiera, </kbd></var> <samp>testo che costituisce l output del PC</samp> </body> </html> HTML um 31 di 347

33 Altri TAG che servono per la formattazione del testo. <b> scrive il testo in neretto. <i> scrive il testo in corsivo. <u> scrive il testo in sottolineato. <html> <head> <title>la formattazione del testo </title> </head> <body> <p><b>neretto <b><i>corsivo </i><u>sottolineato</u></p> </body> </html> Allineamento Si usa il parametro align nei TAG <p> e <div>, supporta tre valori testuali: left, center e right, rispettivamente a sinistra, centro e destra. È possibile attribuire il parametro align ad ogni TAG <div> o <p> inserito nella pagina. Le impostazioni di allineamento si sommano a quelle dei TAG e sono rispettate le regole d interlinea. <html> <head> <title>allineamento del testo </title> </head> <body> HTML um 32 di 347

34 <div align = "center"> Testo da allineare </div> </body> </html> ELENCO Elenco puntato È il primo esempio di codice HTML in cui sono utilizzati più TAG, <ul> per aprire e chiudere la lista e <li>, per identificare i punti della lista. <html> <head> <title>elenco puntato</title> </head> <body> <ul> <li> Prima voce </li> <li> Seconda voce </li> <li> Terza voce </li> </ul> </body> </html> Oltre alla comparsa dei punti tipici di questo elenco, il testo è stato rientrato verso destra di una tabulazione. È possibile modificare il tipo di punto, utilizzando il parametro type, questo parametro supporta tre valori. disc è il valore di default. circle il risultato è la sostituzione dei punti pieni con dei piccoli cerchi. HTML um 33 di 347

35 square questa impostazione inserisce dei piccoli quadratini al posto dei cerchi. <html> <head> <title>elenco puntato</title> </head> <body> <ul type = "square"> <li> Prima voce </li> <li> Seconda voce </li> <li> Terza voce </li> </ul> </body> </html> Elenco numerato Segue le stesse logiche dell elenco puntato, il TAG <ul> è sostituita dal TAG <ol>. L effetto è il classico elenco numerato, elenco che mette a disposizione alcuni parametri. start supporta un valore numerico e consente di stabilire il punto di partenza della lista. <html> <head> <title>elenco numerato</title> </head> <body> <ol start = 4 > <li> Prima voce </li> <li> Seconda voce </li> <li> Terza voce </li> </ol> </body> </html> HTML um 34 di 347

36 type consente di creare un diverso tipo di elenco numerato, inserendo la lettera I, maiuscola o minuscola, l elenco mostrerà numeri romani maiuscoli o minuscoli. <html> <head> <title>elenco numerato</title> </head> <body> <ol type = "I"> <li> Prima voce </li> <li> Seconda voce </li> <li> Terza voce </li> </ol> </body> </html> type consente di creare un diverso tipo di elenco numerato, inserendo la lettera A, maiuscola o minuscola, per avere un elenco numerato identificato dalle lettere. <html> <head> <title>elenco numerato</title> </head> <body> <ol type = "A"> <li> Prima voce </li> <li> Seconda voce </li> <li> Terza voce </li> HTML um 35 di 347

37 </ol> </body> </html> Liste di definizione Sono degli elenchi in cui gli elementi sono rientrati di paragrafo in base al TAG utilizzato. <dl> (Definition List), è il comando per crearle; <dt> identifica il termine della lista e <dd> identifica invece la descrizione del termine stesso. Solo le descrizioni TAG <dd> sono tabulate, naturalmente è possibile associare più descrizioni al medesimo termine, per farlo è sufficiente ripetere più volte il TAG <dd>. <html> <head> <title>lista di definizione</title> </head> <body> <dl> <dt> Primo termine </dt><dd>prima definizione del primo termine.</dd> <dd>seconda definizione del primo termine. </dd> <dt> Secondo termine</dt><dd>prima definizione del secondo termine.</dd> <dd>seconda definizione del secondo termine. </dd> </dl> </body> </html> HTML um 36 di 347

38 Collegamento IPERTESTUALE Collegamento Il TAG che crea un collegamento è <a> (Anchor), un parametro obbligatorio è href che supporta l indirizzo fisico del file di destinazione. Se ad esempio si desidera che al clic sia aperta la pagina INDEX.HTML, si deve scrivere questo nome tra le virgolette del parametro href. Tra il TAG <a> e la sua chiusa </a> troveranno posto le parole che risulteranno sensibili al clic del mouse e la parola risulterà sottolineata e di colore blu. È possibile inserire un collegamento in un punto qualunque di un testo. Naturalmente è possibile inserire un immagine, al posto del testo cliccabile. <html> <head> <title>collegamento ipertestuale</title> </head> <body> <ul> <li><a href ="prova1.html">prima voce</a></li> <li><a href ="prova2.html">seconda voce</a></li> <li><a href ="prova3.html">terza voce</a></li> </ul> </body> </html> Ancoraggio S intende l inserimento di un punto fisso all interno di una determinata pagina. Per farlo si utilizza il TAG <a> con il parametro name, il nome da assegnare ad un ancoraggio dev essere composto da un unica parola e dev essere univoco, nel caso esistano più ancoraggi nella stessa pagina. Inserendo questo ancoraggio, si è fissato un punto che è raggiungibile tramite un comune link, all interno della pagina stessa. Se si scrivesse direttamente il nome dell ancoraggio, però, il browser cercherebbe un file, privo di estensione, con quel nome, allora per comunicare al browser che si tratta di un ancoraggio, inserire il simbolo del cancelletto, prima del nome. <a name = indice > indice <a href = #indice >vai all indice</a> HTML um 37 di 347

39 All apparenza si presenta come un normale link, tuttavia, se cliccato, non aprirà alcun file ma scorrerà verso l alto o il basso a seconda dei casi fino a raggiungere l àncora. Questo sistema è molto utile nelle pagine con tanto testo. Per raggiungere un ancoraggio presente in un file diverso da quello corrente, è sufficiente scrivere il nome della pagina web seguito dal cancelletto e dal nome dell ancoraggio. <a href = index.html#indice >Vai all indice del file</a> In HTML si usa il parametro id, in questo modo si assegna un nome ad una parte specifica del testo, nel collegamento poi, come valore di href si deve indicare href=documento#etichetta o solo href= #etichetta se il collegamento si trova nel documento stesso. <html> <head> <title>collegamento ipertestuale</title> </head> <body> <ul> <li><a href ="#prova1">prima voce</a></li> <li><a href ="#prova2">seconda voce</a></li> </ul> <hr/> <a id = "prova1">primo link</a> <hr/> <a id = "prova2">secondo link</a> <hr/> <address>per contattare l amministratore del sito scrivera a <a href="mailto:webmaster@sito.com">webmaster@sito.com</a></address> </body> </html> Si può creare anche un collegamento con destinazione un indirizzo di posta elettronica con il comando mailto. HTML um 38 di 347

40 Esempio di àncore. <html> <head> <title>esempio di àncore</title> </head> <body> <h1><a name="indice">uso delle àncore per un indice interno</a></h1> <ul> <li><a href="#primo">primo paragrafo.</a> <li><a href="#secondo">secondo paragrafo.</a> <li><a href="#terzo">terzo paragrafo.</a> <li><a href="#quarto">quarto Paragrafo.</a> <li><a href="#">falso link: la pagina punta a se stessa!</a> </ul> <p> <a name="primo"><h3>primo paragrafo</h3></a> <div><a href="#indice">torna all indice</a></div> <br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> <br/> </p> <p> <a name="secondo"><h3>secondo paragrafo</h3></a> <div><a href="#indice">torna all indice</a></div> <br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> <br/> </p> <p> <a name="terzo"><h3>terzo paragrafo</h3></a> <div><a href="#indice">torna all indice</a></div> <br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> HTML um 39 di 347

41 <br/> </p> <p> <a name="quarto"><h3>quarto paragrafo</h3></a> <div><a href="#indice">torna all indice</a></div> <br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> Ciao, mondo! <br><br> <br/> </p> </body> </html> Percorsi assoluti e relativi Un link è un collegamento ad un documento o ad un suo elemento specifico. Il link è identificato dal valore assegnato all attributo href del TAG <a>. Questo valore rappresenta un percorso, ossia l indirizzo della risorsa cui si riferisce. Un percorso può essere assoluto, quando l indirizzo comprende il dominio del sito che ospita la risorsa; oppure può essere relativo, quando il riferimento è ad una pagina dello HTML um 40 di 347

42 stesso sito e nell indirizzo non è indicato il dominio. Struttura del sito Molto frequentemente le pagine non si trovano tutte nella stessa cartella. Quando si crea un link, il browser cerca il file specificato nella stessa cartella in cui è presente il file corrente. Se il file di destinazione è in una sotto directory della cartella corrente è sufficiente scrivere il nome della cartella, seguito da uno slash (/) e quindi dal nome del file. <a href = cartella/index.html >Fare clic qui</a> Se il browser deve scendere di più cartelle, occorre esplicitare l intero percorso. <a href = cartella/altra_cartella/index.html >Fare clic qui</a> Se invece di scendere di livello, deve salire, occorre utilizzare la sintassi (../) tante volte quanti sono i livelli che si desidera risalire. <a href =../../index.html >Fare clic qui</a> Alternativamente è possibile inserire un collegamento assoluto, anteponendo un semplice slash (/) al percorso del file, in questo modo il file di destinazione sarà cercato a partire dalla root del sito, ovvero dalla sua cartella principale. <a href = /percorso/cartella/index.html >Fare clic qui</a> Queste regole valgono per qualunque tipo di file che si desidera collegare. È bene tenere presente, però che i collegamenti assoluti non funzionano in locale, poiché necessitano di un server web che indichi al browser la cartella principale del sito. HTML um 41 di 347

43 XHTML (EXTENSIBLE HTMl) INTRODUZIONE 26 gennaio 2000: il W3C rilascia la prima specifica del linguaggio di markup destinato a sostituire HTML: XHTML (XML + HTML). L elemento chiave è la X, è la stessa X su cui si fonda XML, HTML è ora una parte della grande famiglia XML, ne condivide regole di base e potenzialità. XML è un super linguaggio che consente la creazione di nuovi linguaggi di marcatura. Gli obiettivi, dichiarati nella prima specifica ufficiale, ottobre 1998, sono espliciti. Utilizzo del linguaggio su Internet. Facilità di creazione dei documenti. Supporto di più applicazioni. Chiarezza e comprensibilità. Per fare in modo che altri creino documenti XML dello stesso tipo bisogna definire una DTD (Document Type Definition), identifica gli elementi, TAG, consentiti, cosa essi significano, come devono essere trattati, ad esempio, stabilisce quali sono gli attributi possibili per ciascun elemento. In un documento XHTML, la DTD dev essere obbligatoriamente specificata all inizio. XML prevede l uso di fogli di stile per la presentazione del documento: XSL (extensible Stylesheet Language), supera così il grande limite del web che è quello della dipendenza da un tipo di documento HTML singolo e non estensibile. Si propone di dare un po di rigore alla struttura sintattica delle pagine visto che HTML è troppo permissivo da questo punto di vista. XHTML ha i seguenti vantaggi. Possibilità di usare strumenti standard per analizzare e elaborare documenti. Estensibilità, in pratica definisce nuovi TAG, senza richiedere alcun aggiornamento del browser, solo specificando il DTD. differenze sintattiche di XHTML rispetto HTML Gli elementi devono essere correttamente annidati. HTML <b><i>ciao</b></i> XHTML <b><i>ciao</i></b> I nomi di elementi e attributi devono essere in minuscolo: case sensitive. In XHTML è consentito solo l uso delle minuscole per i nomi di elementi e attributi. HTML <TABLE> <TR><TD>Ciao</TD></TR> </TABLE> XHTML <table> <tr><td>ciao</td></tr> </table> HTML um 42 di 347

44 Gli elementi non vuoti devono essere chiusi. HTML <p>ciao XHTML <p>ciao</p> I valori degli attributi devono essere posti tra virgolette. HTML <img src=pippo.gif> XHTML <img src="pippo.gif"> Ogni attributo deve avere un valore. Alcuni attributi di HTML non hanno un valore, si dice che sono stand alone, è il caso dell attributo selected usato per identificare l opzione di un menu a tendina selezionata all apertura del documento. In XHTML anche questi attributi devono essere valorizzati. HTML XHTML <option selected>ciao</option> <option selected="selected">ciao</option> Il problema si pone anche nei form, se ad essi non si assegna un azione si ha la situazione seguente. <form action=""></form> Si può risolvere assegnando un valore fittizio. <form action="action"></form> Gli elementi vuoti devono terminare con />. Tutti i TAG devono essere chiusi. HTML XHTML <br><img src="test.gif"> <br/><img src="test.gif"/> Uso di id e name Questi attributi identificano un elemento, in questo modo si ha una perfetta conformità con XML dove ID è l attributo standard per l identificazione dei frammenti. In realtà il cambiamento con HTML è notevole, perché per elementi come <img> o <a> l attributo d identificazione è proprio name. HTML <a name="test> XHTML <a id="test"> Per compatibilità <a id="test" name="test"> Un elemento <a> non può contenere altri elementi <a>. L elemento <pre> non può contenere gli elementi <img>, <object>, <big>, <small>, <sub>, <sup>. L elemento <button> non può contenere <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe>, <isindex>. L elemento <label> non può contenere un altro elemento <label>. L elemento <form> non può contenere l elemento <form>. HTML um 43 di 347

45 Versioni di XHTML Le versioni disponibili e pubblicate come raccomandazioni dal W3C sono le seguenti. XHTML 1.0 Pubblicata il 26 gennaio 2000 e seguita da una versione rivista dell ottobre XHTML Basic È una versione ridotta del linguaggio, specificamente pensata per dispositivi mobili PDA (Personal Digital Assistant) e smartphone, contiene solo gli elementi che si adattano a questi dispositivi. È destinata a sostituire WML (Wireless Markup Language) come linguaggio di base per le applicazioni WAP (Wireless Application Protocol). XHTML 1.1 Basata sulla DTD Strict della versione 1.0, rappresenta la prima formulazione pratica del concetto di modularità. In questa visione, gli elementi fondamentali, in pratica l insieme di TAG che definisce la struttura di un documento, è raggruppato in una serie di moduli indipendenti che possono essere implementati o esclusi secondo le necessità. XHTML 2.0 Rappresenta l evoluzione di XHTML 1.0: si caratterizza principalmente per una struttura modulare, in cui le regole per l impostazione dei vari elementi di una pagina web: suddivisione del testo, moduli elettronici, dati tabellari sono descritti in moduli separati che possono evolvere indipendentemente tra loro. Rispetto alla prima versione, sono rese più forti le caratteristiche XML per le regole sintattiche, inoltre sono approfondite ed estese le possibilità di controllo sui moduli elettronici, form, introducendo strutture più complesse ed elementi di elaborazione. ANALISI DI UNA PAGINA <?xml version= 1.0 standalone="yes"?> <!--Preambolo XML opzionale--> <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!--DTD obbligatorio--> <html xmlns=" <!--Namespace base obbligatorio--> <head> <title>xhtml</title> </head> <body> <h1>xthml</h1> </body> </html> Dichiarazione DOCTYPE Obbligatoria, è composta da due sezioni. 1. Un FPI (Identificatore Formale Pubblico) riferito ad una delle tre DTD XHTML. 2. L URI (Uniform Resource Identifier) della DTD. <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" " Ha lo scopo di stabilire a quale delle tre DTD XHTML s intende conformarsi e dire al HTML um 44 di 347

46 browser dove essa è collocata. Nell esempio, la DTD di riferimento è quella Transitional, collocata sul sito del W3C. Il DOCTYPE, inoltre, non ha alcun effetto sulla presentazione della pagina, serve solo al validatore per stabilire le regole della convalida. La parola chiave public, significa che la DTD è pubblica, creata dal W3C. In effetti, in XML, è anche possibile definire DTD private, specifiche per l applicazione, in tal caso si usa la parola chiave system. DTD Strict È la DTD più rigida, centrata esclusivamente sulla struttura del documento. Elimina diversi elementi ed esclude tutti gli attributi che definiscono la presentazione, per questo scopo vanno usati i CSS. Elementi non supportati. <applet>, <basefont>, <center>, <dir>, <font>, <frame>, <frameset>, <iframe>, <isindex>, <menu>, <noframes>, <s>, <strike>, <u> Esempio, definire nella DTD Strict l uso dell elemento <img>. <!ELEMENT img EMPTY> <!ATTLIST img %attrs; src %URI; #REQUIRED alt %Text; #REQUIRED longdesc %URI; #IMPLIED height %Length; #IMPLIED width %Length; #IMPLIED usemap %URI; #IMPLIED ismap (ismap) #IMPLIED > L elemento immagine è vuoto EMPTY, puo assumere tutti gli attributi fondamentali %attrs; sono quelli comuni alla maggior parte degli elementi id, class, style e title. Altri attributi possibili sono: src, alt, longdesc, width, height, usemap, ismap. src e alt sono obbligatori #REQUIRED, gli altri opzionali #IMPLIED. DTD Transitional Nelle intenzioni del W3C essa dev essere una sorta di passaggio verso una ridefinizione più rigida del linguaggio. DTD Frameset Usata quando si utilizzano i frame. Elemento radice - Namespace XHTML L elemento radice <html> deve contenere la dichiarazione di un namespace XML, spazio dei nomi, può assumere questi attributi. dir determina la direzione del testo. lang specifica il linguaggio di base dell elemento quando è interpretato come HTML. xml:lang specifica il linguaggio di base dell elemento quando è interpretato come XML. xmlns specifica il namespace predefinito per XHTML, è l unico attributo obbligatorio. Il namespace usato dev essere " La necessità di un namespace, spazio di nomi, dipende dalla derivazione da XML, linguaggio estensibile per definizione. È possibile, infatti, estendere il set di TAG di XHTML con elementi di altri linguaggi, anche HTML um 45 di 347

47 creati personalmente. Specificare uno o più namespace evita la possibilità di conflitti tra i TAG. <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//OVERFLOW//DTD XHTML-FML 1.0//EN" " <html xmlns=" <head> <title>xml</title> </head> <body> <x:form> </x:form> </body> </html> Il codice riporta l implementazione di FML (Form Markup Language), in un documento XHTML, un linguaggio che ridefinisce e potenzia l uso dei form. All interno dell elemento <html> sono stati definiti due namespace: quello standard di XHTML e quello di FML, la differenza tra i due, a parte l URI, sta nel prefisso, il primo non ne ha, il secondo ha come prefisso x. Significa che i TAG non preceduti da prefisso sono quelli standard di XHTML e come tali sono interpretati. Nel corpo della pagina è stato inserito un form ma il TAG è preceduto da x, vuol dire che esso appartiene al namespace FML e come tale dev essere trattato dal browser. Senza specificare il prefisso si ha il form XHTML. Testata La funzione principale della sezione <head> è quella di contenere informazioni che non sono direttamente visualizzate nella pagina ma che sono comunque di grande rilievo. Elementi che possono apparire nella testata. <base> <isindex> <link> <meta> <noscript> <object> <script> <style> <title> Usato per definire l URL di base della pagina, utile per la risoluzione dei link relativi. Sconsigliato, è un modo per creare elementi simili alle caselle di testo. Contiene informazioni su documenti esterni collegati, usato per i CSS. Specifica informazioni di vario tipo sul documento. Usato per visualizzazioni alternative nei browser che non supportano gli script. Racchiude un oggetto. Contiene script di programmazione. Definisce le regole di formattazione per il documento corrente. Specifica il titolo del documento che compare nella barra del titolo del browser. Corpo Il corpo del documento è la sezione in cui si sviluppa il contenuto, è racchiusa tra i TAG <body></bodystyle>. Gli elementi che possono comparire all interno del corpo sono suddivisi in due categorie. 1. Elementi blocco Sono quelli che definiscono la struttura del documento, possono contenere altri elementi blocco, elementi inline o testo, quando sono inseriti danno origine ad una nuova riga nel HTML um 46 di 347

48 flusso del documento. Elemento Descrizione Supporto DTD <address> Definisce un blocco di testo destinato a indirizzi, firme, indicazioni sull autore. STF Non può contenere altri elementi blocco. <blockquote> Usato per riportare citazioni da altri documenti. Il testo inserito è indentato. STF Può contenere tutti gli elementi blocco. <center> Centra il testo che racchiude. TF <dir> Crea una lista di tipo directory. TF <div> Definisce un blocco di contenuto generico o una sezione del documento. STF Può contenere tutti gli elementi blocco. <dl> Crea una lista di definizione. Può contenere solo gli elementi <DT> e <DD>. STF <fieldset> Usato per raggruppare campi di un form. STF <form> Definisce un form, può contenere i classici elementi dei form ma anche elementi blocco. STF <h1>..<h6> Definiscono titoli e sottotitoli. Non possono contenere altri elementi blocco. STF <hr> Inserisce una linea divisoria orizzontale. STF <isindex> Inserisce un elemento simile alle caselle di testo. TF <menu> È un elenco non numerato di link che permettono all utente di muoversi all interno del sito: ogni TF voce di menu punta a una diversa pagina del sito. <noframes> Inserisce contenuto alternativo per i browser che non supportano i frame. STF <noscript> Inserisce contenuto alternativo per i browser che non supportano gli script. STF <ol> Lista ordinata, può contenere solo l elemento <LI>. STF <p> Definisce un paragrafo, non può contenere altri elementi blocco ma solo testo o elementi inline. STF <pre> Definisce testo preformattato che mantiene le impostazioni dello spazio bianco. STF <table> Definisce una tabella per l inserimento di dati tabulari. STF <ul> Lista non ordinata, può contenere solo elementi <LI> STF <dd> Descrizione di un termine in una lista di definizione. STF <dt> Definizione di un termine in una lista di definizione. STF <frameset> Definisce un frameset. F <li> Elemento di una lista ordinata o non ordinata. STF <tbody> Definisce il corpo di una tabella, con <THEAD> e <TFOOT> raggruppa le righe di una tabella. STF <td> Cella di tabella. STF <tfoot> Definisce il piede di una tabella. STF <th> Intestazione di cella. STF <thead> Definisce la testata di una tabella. STF <tr> Riga di tabella. STF HTML um 47 di 347

49 Nella strutturazione del documento è fondamentale rispettare le regole relative alla gerarchia e all annidamento degli elementi blocco, il primo elemento della gerarchia dev essere <div> che definisce una sezione del documento. Al suo interno trovano posto gli altri elementi, la cosa importante è che bisogna evitare annidamenti errati che i browser fanno passare senza problemi ma che il validatore segnala in quanto violano le regole delle DTD. <p><div>ciao, mondo</div></p> Il documento è visualizzato regolarmente nel browser. In realtà il documento non è valido, in quanto l elemento <p> non può contenere altri elementi blocco. Allora, il giusto annidamento è il seguente. <div><p> Ciao, mondo </p></div> 2. Elementi inline Gli elementi inline si distinguono da quelli di tipo blocco per due motivi: quando sono inseriti non danno origine a una nuova riga e possono contenere solo dati, essenzialmente testo o altri elementi inline. <p>questo tasto è<b>grassetto</b></p> La parte delimitata dai TAG <b></b></ non è posta su una nuova riga. Anche per gli elementi inline va posta molta attenzione all annidamento. <b><p>testo in grassetto</p></b> Non è validato in quanto un elemento inline non può contenerne uno di tipo blocco. Attributi di body Gli attributi per il testo, i link, il colore di sfondo e i margini dell elemento <body> sono espressamente vietati solo nella DTD Strict, non vanno pertanto usati e devono essere sostituiti dai CSS. VANTAGGI Codice pulito e ben strutturato XHTML è un linguaggio che definisce solo la struttura, se s inseriscono elementi non supportati, per esempio font, larghezza per le celle di tabelle o margini per il body, il documento non è valido. Perché la formattazione si fa con i CSS, risultato: codice più pulito, più logico, più gestibile. Esempio: due pagine realizzate secondo le due impostazioni. HTML. <html> <head> <title> Esempio</title> <meta http-equiv="content-type" content="text/html; charset=iso "></meta> </head> <body bgcolor="#ffffff" text="#000000"> HTML um 48 di 347

50 <h1><font face="georgia, Times New Roman, Times, serif" color="#004080"> Giacomo Leopardi</font></h1> <h2><font face="georgia, Times New Roman, Times, serif" color="#004080">l infinito</font></h2> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> Sempre caro mi fu quest ermo colle,</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> e questa siepe che da tanta parte</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> dell ultimo orizzonte il guardo esclude.</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> Ma sedendo e mirando, interminati</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> spazi di là da quella, e sovrumani </font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> silenzi, e profondissima quiete</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> io nel pensier mi fingo; ove per poco</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> il cor non si spaura. E come il vento</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> odo stormir tra queste piante, io quello</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> infinito silenzio a questa voce </font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> vo comparando: e mi sovvien l eterno,</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> e le morte stagioni, e la presente</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> e viva, e il suon di lei. Così tra questa</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> immensità s annega il pensier mio:</font></p> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> e il naufragar m è dolce in questo mare.</font></p> <h1><font face="georgia, Times New Roman, Times, serif" color="#004080"> Codice</font></h1> <p><code><html><br/> <head><br/> <title>esempio</title><br/> <meta http-equiv="content-type" content="text/html; charset=iso "> <br/> </head></code></p> <p><code><body bgcolor="#ffffff" text="#000000"><br/> <h1><font face="georgia, Times New Roman, Times, serif" color="#004080"> Giacomo<br/>Leopardi</font></h1><br/> <h2><font face="georgia, Times New Roman, Times, serif" color="#004080"> L infinito</font></h2><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> Sempre caro mi<br/> fu quest ermo colle,</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> HTML um 49 di 347

51 e questa siepe, <br/> che da tanta parte</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> dell ultimo orizzonte<br/>il guardo esclude.</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> Ma sedendo e mirando,<br/>interminati</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> spazi di l&agrave;<br/>da quella, e sovrumani </font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> silenzi, e profondissima<br/>quiete</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> io nel pensier<br/>mi fingo; ove per poco</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2">il cor non si spaura.<br/>e come il vento</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> odo stormir tra<br>queste piante, io quello</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> infinito silenzio<br/>a questa voce </font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> vo comparando:<br/>e mi sovvien l eterno,</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> e le morte stagioni,<br/>e la presente</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> e viva, e il suon<br/>di lei. Cos&igrave; tra questa</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> immensit&agrave;<br/>s annega il pensier mio:</font></p><br/> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2"> e il naufragar<br/>m &egrave; dolce in questo mare.</font></p><br/> <</body>><br/></html> </code></p> </html> XHTML <?xml version= 1.0 standalone="yes"?> <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>esempio</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" href="stile.css" type="text/css" /> </head> HTML um 50 di 347

52 <body> <h1>giacomo Leopardi</h1> <h2>l&#39;infinito</h2> <p>sempre caro mi fu quest&#39;ermo colle,</p> <p>e questa siepe che da tanta parte</p> <p>dell&#39;ultimo orizzonte il guardo esclude.</p> <p>ma sedendo e mirando, interminati</p> <p>spazi di là da quella, e sovrumani</p> <p>silenzi, e profondissima quiete</p> <p>io nel pensier mi fingo; ove per poco</p> <p>il cor non si spaura. E come il vento</p> <p>odo stormir tra queste piante, io quello</p> <p>infinito silenzio a questa voce</p> <p>vo comparando: e mi sovvien l&#39;eterno,</p> <p>e le morte stagioni, e la presente</p> <p>e viva, e il suon di lei. Così tra questa</p> <p>immensità s&#39;annega il pensier mio:</p> <p>e il naufragar m&#39;è dolce in questo mare.</p> <h1>codice</h1> <p><code><html><br/> <head><br/> <title>esempio</title><br/> <meta http-equiv="content-type" content="text/html; charset=iso " /><br/><link rel="stylesheet" href="newstyle.css" type="text/css" /><br/></head><br/><body><br/><h1>giacomo Leopardi</h1><br/> <h2>l&#39;infinito</h2><br/><p>sempre caro mi fu quest&#39;ermo colle,</p> <br/><p>e questa siepe che da tanta parte</p><br/> <p>dell&#39;ultimo orizzonte il guardo esclude.</p><br/> <p>ma sedendo e mirando, interminati</p><br/> <p>spazi di l&agrave; da quella, e sovrumani</p><br/> <p>silenzi, e profondissima quiete</p><br/> <p>io nel pensier mi fingo; ove per poco</p><br/> <p>il cor non si spaura. E come il vento</p><br/> <p>odo stormir tra queste piante, io quello</p><br/> <p>infinito silenzio a questa voce</p><br/> <p>vo comparando: e mi sovvien l&#39;eterno,</p><br/> <p>e le morte stagioni, e la presente</p><br/> <p>e viva, e il suon di lei. Cos&igrave; tra questa</p><br/> <p>immensit&agrave; s&#39;annega il pensier mio:</p><br/> <p>e il naufragar m&#39;&egrave; dolce in questo mare.</p><br/> </body><br/></html></code></p> <p> </p> </body> </html> STILE.CSS BODY { margin: 0px } A:link, A:visited { text-decoration: none } A:hover { text-decoration: none; color: #C7C901} A:hover {color: orange} HTML um 51 di 347

53 STRONG {font-family:verdana, arial; font-style:normal; font-size:10px} cite {font-family:verdana, arial; font-style:normal; font-size:9px; margin:0px} code {font-family:arial; font-style:normal; font-size:13px}.sfondo {background: #DEEFFF}.tabella { font-family : Verdana, Arial, Helvetica, sans-serif; font-style : normal; font-size : 12px; }.titolo { font-family: Arial; font-size: 85%}.codice { font: 12px "Courier New", Courier, mono; color: #000000; background: #FFFFCC; }.classeli{color:red; font-weight:bold;} A.intestazione {color :#B0C7EF; text-decoration : none} A.intestazione:Visited {color :#B0C7EF; text-decoration : none} A.intestazione:Active {color :#B0C7EF;} A.intestazione:Hover {color :navy; background-color:yellow;} A.intestazione2 {color :white; text-decoration : none} A.intestazione2:Visited {color :white; text-decoration : none} A.intestazione2:Active {color :white;} A.intestazione2:Hover {color :black; background-color:orange;} A.menu {color :white; text-decoration : none} A.menu:Visited {color :white; text-decoration : none} A.menu:Active {color :white;} A.menu:Hover {color :black; background-color:yellow;} A.menu2 {color :blue; text-decoration : none} A.menu2:Visited {color :navy; text-decoration : none} A.menu2:Active {color :navy;} A.menu2:Hover {color :navy; background-color:yellow;} A.menu3 {color :blue; text-decoration : none} A.menu3:Visited {color :blue; text-decoration : none} A.menu3:Active {color :white;} A.menu3:Hover {color :white; background-color:navy;} A.menu4 {color :black; text-decoration : none} A.menu4:Visited {color :black; text-decoration : none} A.menu4:Active {color :black;} A.menu4:Hover {color :black; background-color:#afc7ef;} A.menu5 {color :white; text-decoration : none} A.menu5:Visited {color :white; text-decoration : none} A.menu5:Active {color :black;} A.menu5:Hover {color :black; background-color:#afc7ef;} A.pro {color: blue; text-decoration: underline} A.pro:Visited {color: blue; text-decoration: underline} A.pro:Hover {color: blue; text-decoration: underline} A.prored {color: red; text-decoration: underline} A.prored:Visited {color: red; text-decoration: underline} A.prored:Hover {color: red; text-decoration: underline}.b2b { font-family:verdana, arial; font-style:normal; font-size:14px}.b2b2 { font-family:verdana, arial; font-style:normal; font-size:12px} HTML um 52 di 347

54 Estensibilità Dal momento che XHTML è XML diventa estensibile, significa che è facile incorporare in un documento parti scritte in uno dei tanti linguaggi della famiglia XML. Esempio, si devono inserire in una pagina delle formule matematiche complesse, basta dichiarare il namespace relativo al linguaggio MathML e inserire nella pagina i TAG specifici di quest ultimo. <?xml version= 1.0 standalone="yes"?> <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>esempio</title> </head> <body> <p>esempio di MathML:</p> <math xmlns=" <apply> <log/> <logbase> <cn> 3 </cn> </logbase> <ci> x </ci> </apply> </math> </body> </html> Portabilità È la capacità di un documento di essere visualizzato e implementato efficacemente su diversi sistemi: PC, PDA, cellulari WAP/GPRS (General Packet Radio Service) e web TV. Nella pagina XHTML s incorporano diversi CSS per ciascun supporto. Su un PC si vede il layout standard. Su un cellulare si visualizza un layout ridotto e adatto alle caratteristiche del mezzo. HTML um 53 di 347

55 GRAFICA INTRODUZIONE I formati più utilizzati per la grafica sono i seguenti. JPEG (Joint Photographic Experts Group) Le JPG supportano milioni di colori e sono utilizzate per le foto, la caratteristica, però, è la compressione: è possibile ridurre il peso dell immagine, anche se a discapito della qualità. In base alle esigenze di pubblicazione e al peso globale della pagina è possibile scegliere un buon compromesso tra qualità e peso. L ottimizzazione delle JPG è impostata in fase di salvataggio. GIF (Graphics Interchange Format). Le GIF hanno un numero massimo di 256 colori, compresso senza perdita d informazione, sono utilizzate per loghi o pulsanti ovvero immagini che non hanno bisogno di alta definizione, hanno la caratteristica di poter avere un colore trasparente, in altre parole risulta invisibile al browser e questo consente l effetto di un immagine scontornata. Dal momento che solo un colore può essere reso trasparente per ottenere un effetto accattivante occorre che il colore sia applicato in maniera uniforme. Un altra importante caratteristica delle GIF è che possono supportare il multi frame, ovvero possono essere composte da più immagini e quindi apparire animate. Per creare una GIF animata si possono usare software dedicati, come Microsoft GIF Animator, Adobe ImageReady o FireWorks. Per fare in modo che un immagine sia scaricata poco per volta dal web, è possibile salvare le GIF in modo interlacciato e le JPG in modo progressivo. Questo migliora l impatto in fase di navigazione ma influisce negativamente sul peso delle immagini. Le immagini GIF usano la compressione lossless senza perdita di informazione LZW (Lempel Ziv Welch) che cerca le sequenze di pixel ripetute: dunque questo formato è adatto ad immagini in bianco e nero, specie se contrastate ma non è adatto a comprimere fotografie. PNG (Portable Network Graphics) Le PNG combinano i vantaggi dei formati GIF e JPG. Perché i browser non visualizzano immagini vettoriali al posto delle GIF, JPG e PNG che sono bitmap, il limite delle immagini vettoriali è il fatto che ancora oggi non esiste uno standard industriale per la trasmissione d immagini vettoriali attraverso la rete. Per visualizzare le immagini vettoriali in Internet occorre un plugin costruito dalla casa proprietaria del formato da visualizzare. INSERIMENTO Siccome i file HTML sono in formato ASCII (American Standard Code for Information Interchange), non è possibile inserire un immagine inglobandola nel file stesso ma è gestita come file separato. Il TAG per l inserimento delle immagini è <img> e richiede l uso obbligatorio del parametro src, source, dove trova posto il nome dell immagine che si desidera inserire. Se l immagine è nella stessa cartella del file HTML, non è necessario specificare alcun percorso. Questo TAG, non richiede chiusura e può ospitare tantissimi parametri. HTML um 54 di 347

56 I primi sono width e height che possono ospitare valori numerici o percentuale. Nel primo caso ridimensionano in modo assoluto lo spazio riservato all immagine che, quindi, è deformata in base al valore in pixel immesso. La percentuale agisce nello stesso modo ma ridimensiona in base ai valori originali di larghezza e altezza del file cui ovviamente corrisponde 100%. È possibile inserire qualunque valore ma conviene predisporre a priori la giusta dimensione dell immagine poiché, se ridimensionata via HTML, il file perderà la qualità originale, senza che il peso e quindi il tempo di scaricamento, subisca alterazioni. Al fine di predisporre il giusto spazio nella pagina per l immagine, è sempre bene inserire questi due parametri, impostando come valore la dimensione reale dell immagine. <html> <head> <title>immagini</title> </head> <body> <img src = "raissa.jpg" width = "100"height = "90"/> </body> </html> Usando il parametro border, cui associare un valore numerico, si può aggiungere all immagine un riquadro dello stesso colore del testo. <html> <head> <title>immagini</title> </head> <body> <img src = "raissa.jpg" border = "2" width = "100"height = "90"/> </body> </html> HTML um 55 di 347

57 Il parametro alt permette di visualizzare una stringa di testo in alternativa all immagine, il testo apparirà nel riquadro dell immagine prima di essere scaricata, apparirà anche nel caso in cui l immagine sia corrotta o mancante. Il parametro title permette di specificare una stringa di testo che il browser usa come tooltip. <html> <head> <title>immagini</title> </head> <body> <img src="raissa.jpg" border="2" alt="raissa" title="la gatta sul tetto che scotta" width ="100"height="90"/> </body> </html> POSIZIONAMENTO L immagine è un elemento inline ed è visualizzata sulla stessa riga del testo, se non è separata dal testo con un interruzione di riga o di paragrafo. Per allineare il testo rispetto alle immagini si ricorre al parametro align, con i valori left e right si porta l immagine a sinistra e a destra del testo. Il testo è sempre allineato sul lato superiore dell immagine. Se omesso il parametro align il testo è allineato in basso. HTML um 56 di 347

58 <html> <head> <title>immagini</title> </head> <body> <p> <img src = "raissa.jpg" border = "2" align = "left" width = "100"height = "90"/> L immagine si trova alla sinistra del testo.<br /> L immagine si trova alla sinistra del testo.<br /> L immagine si trova alla sinistra del testo.<br /> L immagine si trova alla sinistra del testo.<br /> L immagine si trova alla sinistra del testo.<br /> <hr /> <img src = "raissa.jpg" border = "2" align = "right" width = "100"height = "90"/> L immagine si trova alla destra del testo. </p> </body> </html> I parametri hspace distanza orizzontale e vspace distanza verticale consentono d impostare una distanza in pixel del testo attorno all immagine. La distanza è applicata su tutti i lati, non è possibile col semplice HTML, applicare la distanza ad un singolo lato. <html> <head> <title>immagini</title> </head> <body> <p> <img src = "raissa.jpg" border = "2" align = "left" width = "100"height = "90" hspace = "20" vspace = "20"/> L immagine si trova alla sinistra del testo.<br /> HTML um 57 di 347

59 L immagine si trova alla sinistra del testo.<br /> L immagine si trova alla sinistra del testo.<br /> L immagine si trova alla sinistra del testo.<br /> L immagine si trova alla sinistra del testo.<br /> <hr /> <img src = "raissa.jpg" border = "2" align = "right" width = "100"height = "90"/> L immagine si trova alla destra del testo. </p> </body> </html> Collegamento IPERTESTUALE Per creare un collegamento da un immagine si parte dal TAG dell àncora, quindi, tra l apertura e la chiusura, s inserisce il comando dell immagine, invece che un testo. All interno del parametro href, s inserisce l oggetto della destinazione: una pagina web, un altra immagine. Osservando l anteprima si nota che è comparso un bordo di colore blu, si tratta dell equivalente per il testo della sottolineatura: l immagine ora è cliccabile. <html> <head> <title>immagini</title> </head> <body> <a href = "raissa.jpg"> <img src = "raissa.jpg" width = "100"height = "90"/></a> </body> </html> HTML um 58 di 347

60 Si può specificare la dimensione del bordo con l attributo border, il valore zero lo nasconde. Utilizzando le immagini affiancate si può progettare una barra degli strumenti. Invece d inserire in una pagina complesse immagini, conviene inserire nella pagina delle miniature delle immagini che sono dei collegamenti ipertestuali alle immagini stesse; in questo modo l utente può decidere se vuole aspettare il tempo necessario a scaricare l immagine di alta qualità. SfondO Per aumentare la flessibilità di una pagina web è possibile applicare un colore esadecimale allo sfondo della pagina stessa. Si usa il parametro <body bgcolor>, s inserisce un qualunque colore in codice esadecimale, il colore è applicato a tinta unita. I colori di testo e collegamenti rimangono immutati. <html> <head> <title>sfondo</title> </head> <body bgcolor = "#ff0000"> Testo formattato </body> </html> È possibile cambiare questi colori con altri due parametri: text e link. <html> HTML um 59 di 347

61 <head> <title>sfondo</title> </head> <body bgcolor = "#ff0000" text = "#fffff" link = "#800000" > Testo formattato </body> </html> Sebbene questi parametri funzionino egregiamente, con l avvento dei fogli di stile l impostazione del colore via HTML è caduta in disuso. Sebbene comporti alcuni notevoli disguidi, è possibile applicare un immagine allo sfondo della pagina, il parametro è background. In questo parametro occorre inserire il nome dell immagine e il suo percorso, nel caso non si trovi nella stessa directory del file HTML. <html> <head> <title>sfondo</title> </head> <body background="fondo.jpg"> Testo formattato </body> </html> L immagine è inserita come sfondo e incollata in senso verticale ed orizzontale per tutta la dimensione della pagina stessa. È sempre possibile inserire del testo o altre immagini nella pagina. L effetto finale può risultare confuso, per questa ragione difficilmente si applicano immagini di sfondo alle pagine, a meno che non siano preparate ad hoc, con filetti divisori o elementi che facilitino la consultazione dei contenuti. HTML um 60 di 347

62 Spacer È un immagine GIF completamente trasparente e grande 1 pixel per 1 pixel. Gli spacer sono uno strumento potentissimo: modificando infatti le dimensioni di larghezza e altezza, è possibile allineare il testo rispetto ad un immagine che risulta comunque sempre invisibile. Il peso dell immagine è ininfluente sull economia della pagina e può essere usato per posizionare gli elementi in modo non altrimenti ottenibile con i semplici TAG <p> e <div>. <html> <head> <title>immagini</title> </head> <body> <img src = "raissa.jpg" width = "1"height = "1"> </body> </html> MAPPE La mappa è un immagine suddivisa in aree, chiamate hotspot o aree attive, ciascuna delle quali rappresenta un collegamento ipertestuale verso un URL diverso. Le mappe si possono dividere in due parti. Mappe lato client Sono identificate dall attributo usemap, nel TAG <img> che specifica la posizione dell elemento <map>, nell esempio nomemappa che descrive le informazioni sugli hotspot, forma, coordinate e URL, dell immagine; l elemento <map> può trovarsi nella stessa pagina o in una pagina diversa. <img src="mappa.gif" usemap="mappa.htm#nomemappa" /> L elemento <map> descrive la mappa, contiene dei TAG <area> che descrivono gli hotspot della mappa, ha i seguenti attributi. shape indica la forma dell hostspot, i valori sono: rect, circle, poly, default. coords indica le coordinate in pixel. href indica l URL di destinazione. Le mappe lato client contengono tutte le informazioni necessarie per elaborare i collegamenti, quando l utente fa clic sulla mappa, il browser determina l URL e richiede il documento. In altre parole, le mappe immagine non sono definite scrivendo i TAG ma sono create con applicazioni grafiche che creano automaticamente i TAG relativi. HTML um 61 di 347

63 Esempio, Adobe Fireworks. Partire da un immagine di qualsiasi tipo. Assegnare gli URL desiderati alle aree dell immagine che rappresentano le aree attive e salvare l immagine. HTML um 62 di 347

64 Dopo aver creato gli oggetti dell immagine, fare clic su File/Update HTML L applicazione modifica in automatico la pagina web ed inserisce gli hotspot. <html> <head> <title>mappe</title> </head> <body><img name="mappa" src="mappa.gif" width="167" height="224" border="0" id="mappa" usemap="#m_mappa" alt="" /><map name="m_mappa" id="m_mappa"> <area shape="rect" coords="9,139,162,219" href="papera.htm" title="papera" alt="papera" /> <area shape="rect" coords="48,62,123,130" href="pluto.htm" title="pluto" alt="pluto" /> <area shape="rect" coords="25,13,147,56" href="pippo.htm" title="pippo" alt="pippo" /> </map> </body> </html> HTML um 63 di 347

65 Mappe lato server Sono identificate dall attributo isemap, nel TAG <img>, è necessaria un applicazione sul server. HTML um 64 di 347

66 GIF animate Visualizzazione d immagini GIF in rapida successione che serve per rappresentare semplici animazioni con bassa definizione. Il TAG <img> permette d inserire GIF animate. Una GIF animata è costituita da un file GIF che contiene diverse immagini; il browser visualizza le immagini una dopo l altra ottenendo un animazione. Per creare una GIF animata bisogna creare tutte le immagini e assemblarle con un applicazione adatta. <html> <head> <title>immagini</title> </head> <body> <img src = "bici.gif" /> </body> </html> HTML um 65 di 347

67 FAVICON (FAVorites ICON) Indica un icona associata ad una particolare pagina web, solitamente la favicon è una piccola immagine, spesso un logo, pertinente ai contenuti del sito web correlato. La favicon è visualizzata alla sinistra dell URL nella barra degli indirizzi del browser, inoltre è visualizzata nel menu preferiti. Nata come funzionalità di Microsoft Internet Explorer versione 5, in seguito è stata integrata su molti altri browser tra cui: Firefox, Mozilla, Opera, Safari, e Konqueror. In origine la favicon era posta nella directory radice del server web con il nome FAVICON.ICO e usata direttamente da Internet Explorer. Anche se questo metodo rimane funzionante, è stato introdotto un apposito TAG HTML per specificare la posizione del file. Il TAG è posto nella sezione <head> di un file HTML con la sintassi seguente. <link rel="shortcut icon" type "image/x-icon" href="images/favicon.ico"> L immagine ha dimensioni 16X16, 32X32 o 48X48 pixel, se ICO ma può essere usata come favicon anche il formato GIF e PNG di qualsiasi dimensione. Sfruttando le potenzialità del formato GIF è possibile creare delle favicon animate. HTML um 66 di 347

68 LAYOUT PAGINA WEB Testata Al fine di non disorientare il navigatore, è bene utilizzare schemi di navigazioni cui l occhio è già allenato. L uso di una testata viene incontro a questa esigenza, deve contenere il logo dell azienda, alcuni riferimenti alla società e i link alle principali sezioni del sito, deve apparire sempre in alto e dev essere presente in ogni pagina del sito. Dev essere centrata, per farlo si ricorre al TAG <div>. <body> <div align = center > <img src = logo.gif width = 100 height = 70 > nome società chi siamo prodotti referenze contatti </div> </body> Corpo della pagina Questa è la parte che deve contenere le informazioni da trasmettere. Le sezioni di una pagina possono anche essere create separatamente e poi unite nel layout finale. Non vi sono particolari vincoli per la costruzione del corpo della pagina. In genere, però, se sono presenti dei collegamenti, questi sono inseriti sulla destra. <body> <p> pagina dei prodotti </p> <a href = prodotto1.html > primo prodotto </a><br/> <a href = prodotto2.html > secondo prodotto </a><br/> </body> Piè di pagina Anche questa sezione è ripetuta in tutte le pagine del sito, contiene normalmente un riferimento ed eventualmente i credits del sito. Dev essere centrato, per farlo si ricorre al TAG <div>. <body> <div align = center > sito realizzato da urm 10 webmaster@sito.com </div> </body> Font È uno dei momenti più delicati della creazione di un sito. Il font dev essere appropriato al contesto e sempre facilmente leggibile, sia nella dimensione sia nel colore, Verdana ed Arial sono sempre delle buone scelte. L impatto è immediatamente migliore ma usare la stessa dimensione non può migliorare la comprensibilità della pagina e del messaggio in essa contenuto. Piè di pagina e Testata devono avere dimensioni minori rispetto al corpo. HTML um 67 di 347

69 Il piè di pagina, inoltre, dev essere il meno invasivo possibile. <body> <div align = center > <img src = logo.gif width = 100 height = 70 > nome società chi siamo prodotti referenze contatti </div> <font face = arial size = 4 > <p> pagina dei prodotti </p> <a href = prodotto1.html > primo prodotto </a><br/> <a href = prodotto2.html > secondo prodotto </a><br/> <div align = center > <font face = arial size = 1 > sito realizzato da urm 10 webmaster@sito.com </div> </body> Menu Date le liste puntate, è possibile sostituire i punti forniti dall HTML con delle immagini. Usando immagini semplici e poco pesanti è possibile personalizzare il menu. <body> <p> pagina dei prodotti </p> <img src = 1.gif ><a href = prodotto1.html > primo prodotto </a><br/> <img src = 2.gif ><a href = prodotto2.html > secondo prodotto </a><br/> </body> Utilizzando le liste di definizione è possibile arricchire il menu. <body> <p> pagina dei prodotti </p> <dt> <img src = 1.gif ><a href = prodotto1.html > primo prodotto </a><br/> </dt> <dd>caratteristiche del primo prodotto</dd> <dt> <img src = 2.gif ><a href = prodotto2.html > secondo prodotto </a><br/> </dt> <dd>caratteristiche del secondo prodotto</dd> </body> Tabella Inserire una tabella È lo strumento d impaginazione più potente offerto dall HTML. Il TAG per creare una tabella è <TABLE>. Per aggiungere una riga alla tabella, si usa il comando <TR>. Per inserire le celle dati si usa <TD>, per le celle d intestazione si usa <TH>. In HTML ogni cella è un entità a sé e il comando dev essere ripetuto per tutte le celle che si desidera inserire <html> HTML um 68 di 347

70 <head> <title>tabelle</title> </head> <body> <table> <tr> <td></td> <td></td> </tr> </table> </body> </html> La pagina appare vuota, questo perché le tabelle sono utilizzate principalmente per creare il layout di una pagina e di default il bordo è nullo. Per vedere i bordi, si usa il parametro BORDER, cui si attribuisce un valore numerico, corrispondente alla dimensione in pixel del bordo esterno della tabella. La didascalia di una tabella si definisce con il TAG <CAPTION> <html> <head> <title>tabelle</title> </head> <body> <table border = "2"> <caption>prima tabella</caption> <tr><th>colonna 1</th><th>Colonna2</th></tr> <tr> <td>a</td> <td>b</td> </tr> </table> </body> </html> HTML um 69 di 347

71 Se si desidera inserire una seconda riga, è sufficiente ripetere il codice da <TR> a </TR>. <html> <head> <title>tabelle</title> </head> <body> <table border = "2"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> Proprietà di una tabella Il TAG <TABLE> ha molte proprietà, una delle più utili è data dal parametro WIDTH che consente di modificare la dimensione della tabella stessa. Oltre ad un valore numerico, corrispondente alla dimensione in pixel, è possibile usare un valore percentuale. HTML um 70 di 347

72 <html> <head> <title>tabelle</title> </head> <body> <table border = "2" width = "350"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> La proprietà WIDTH può essere applicata anche al TAG <TD>, in modo da modificare la dimensione delle colonne. Anche se questo parametro è stato inserito in un solo TD, l intera colonna ne ha seguito l impostazione. Infatti, in HTML non possono esistere celle con larghezze diverse nella stessa colonna o altezze diverse nella stessa riga. <html> <head> <title>tabelle</title> </head> <body> <table border = "2" width = "350"> <tr> <td width = 100 >A</td> <td>b</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> HTML um 71 di 347

73 </html> Analogamente è possibile modificare l altezza, ricorrendo al parametro HEIGHT. Anche in questo caso è possibile inserire il parametro in un TD per ottenere l effetto su tutta la riga, o in TABLE per applicarlo all intera tabella. <html> <head> <title>tabelle</title> </head> <body> <table border = "2" width = "350" height="200" > <tr> <td width = "100">A</td> <td>b</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 72 di 347

74 Attraverso il parametro ALIGN che supporta i valori LEFT, CENTER e RIGHT, è possibile modificare l allineamento della tabella. Lo stesso parametro può essere applicato al <TD>, in modo da modificare l allineamento del testo contenuto nelle celle. Naturalmente ogni <TD> può essere personalizzato liberamente. <html> <head> <title>tabelle</title> </head> <body> <table border = "2" width = "350" height="200" align="center"> <tr> <td width = "100">A</td> <td align = "right">b</td> </tr> <tr> <td height="150">seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 73 di 347

75 Il TAG <TD> ammette anche il parametro VALIGN che allinea in senso verticale il contenuto delle celle. I valori ammessi sono: TOP, MIDDLE e BOTTOM. I parametri VALIGN ed ALIGN sono compatibili tra loro e possono essere inseriti nella medesima cella. <html> <head> <title>tabelle</title> </head> <body> <table border = "2" width = "350" height="200" align="center"> <tr> <td width = "100">A</td> <td align = "right">b</td> </tr> <tr> <td height="150">seconda riga</td> <td valign ="top">ultima cella</td> </tr> </table> </body> </html> HTML um 74 di 347

76 Il parametro di TABLE CELLSPACING consente d impostare in pixel la distanza tra le celle. La spaziatura è applicata su tutti e quattro i lati e non c è modo, se non con gli stili, di modificare questa impostazione. <html> <head> <title>tabelle</title> </head> <body> <table border = "2" width = "350" height="200" align="center" cellspacing ="10"> <tr> <td width = "100">A</td> <td align = "right">b</td> </tr> <tr> <td height="150">seconda riga</td> <td valign ="top">ultima cella</td> </tr> </table> </body> </html> HTML um 75 di 347

77 CELLPADDING, invece, imposta la distanza tra il bordo interno delle celle ed il contenuto delle celle stesse. <html> <head> <title>tabelle</title> </head> <body> <table border="2"width="350"height="200"align="center"cellspacing="10"cellpadding="10"> <tr> <td width = "100">A</td> <td align = "right">b</td> </tr> <tr> <td height="150">seconda riga</td> <td valign ="top">ultima cella</td> </tr> </table> </body> </html> HTML um 76 di 347

78 Modificare i bordi Oltre alla dimensione, è possibile modificare anche il colore del bordo di una tabella. Il parametro BORDERCOLOR supporta il solito codice esadecimale. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height="200" bordercolor = "#000066"> <tr> <td width = "100">A</td> <td align = "right">b</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 77 di 347

79 Lo stesso parametro può essere usato dentro le celle. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height="200" bordercolor = "#000066"> <tr> <td width = "100">A</td> <td align = "right">b</td> </tr> <tr> <td bordercolor = "#ff0000">seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 78 di 347

80 Usando una tabella composta da una riga ed una colonna è possibile creare l effetto di un riquadro che contiene, ad esempio, un immagine. A questo scopo conviene portare a zero sia CELLSPACING sia CELLPADDING. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" bordercolor = "#ff0000" cellspacing = "0" cellpadding = "0"> <tr> <td><img src = "raissa.jpg"></td> </tr> </table> </body> </html> HTML um 79 di 347

81 Sfondi di una tabella Attraverso il parametro BGCOLOR, è possibile applicare un colore a tinta unita alla tabella. Il colore è applicato a tutta la tabella, compresi gli spazi tra le celle. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height="200" bgcolor = "#6666cc"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> Per modificare il colore di una singola cella, si può usare lo stesso parametro applicato al <TD>, in questo caso sarà colorata solo la cella e non lo spazio tra le celle. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height="200" bgcolor = "#6666cc"> <tr> HTML um 80 di 347

82 </tr> <tr> </tr> </table> </body> </html> <td>a</td> <td>b</td> <td bgcolor = "#ffff00" >Seconda riga</td> <td>ultima cella</td> Esattamente come per il BODY, è possibile applicare un immagine di sfondo alla tabella o alle celle, si usa il parametro BACKGROUND. L immagine è replicata per tutta la dimensione della tabella; se la tabella è invece più piccola della foto, l immagine è troncata in corrispondenza dei margini della tabella. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height="200" background = "raissa.jpg"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 81 di 347

83 Usando Il TAG <IMG> si può inserire un immagine come contenuto di una cella. L immagine non è troncata ma la cella è ridimensionata per contenere l intera immagine. Se le dimensioni della tabella sono fisse le altre celle sono rimpicciolite in modo da rispettare il più possibile le impostazioni del parametro WIDTH. <html> <head> <title>tabelle</title> </head> <body> <table border = "1"> <tr> <td>a</td> <td><img src = "raissa.jpg"></td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 82 di 347

84 Layout Le tabelle consentono di creare una struttura molto complessa, per questa ragione sono utilizzate per creare gli scheletri del layout di pagina. Attraverso il parametro COLSPAN, inoltre, è possibile unire le celle tra di loro. La logica da seguire è la seguente: la cella contenente il parametro è espansa fino ad occupare lo spazio di più celle: il numero delle celle è indicato dal valore numerico del parametro stesso. Per questa ragione le celle e i TAG <TD> che sono stati sostituiti dal COLSPAN, devono essere eliminati. <html> <head> <title>tabelle</title> </head> <body> <table border = "1"width = "350" height = "200"> <tr> <td colspan = "2">A</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 83 di 347

85 Usando ROWSPAN si ottiene lo stesso risultato applicato però in verticale, ovvero unione di celle presenti su più righe, anche in questo caso occorre eliminare un <TD>. Dal momento che la cella sostituita è quella sulla riga sottostante, occorre eliminare uno dei <TD> presenti nella seconda serie di <TR>. Il ridimensionamento è dovuto al fatto che, in assenza dei parametri di larghezza delle celle, il browser adatta le celle in proporzione al loro contenuto. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height="200"> <tr> <td rowspan = "2">A</td> <td>b</td> </tr> <tr> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 84 di 347

86 È possibile unire le celle di più righe, l importante è che esista sempre una riga o una colonna con tutte le celle esplicitate, altrimenti il browser non sarà in grado di valutare come unire le celle con i parametri COLSPAN o ROWSPAN. Questo semplice schema può essere usato per impaginare un layout, inserendo nella prima riga la testata, nell ultima il piè di pagina e nella riga centrale il menu ed il corpo della pagina. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height="200"> <tr> <td colspan = "2">Prima riga</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> <tr> <td colspan = "2">Terza riga</td> </tr> </table> </body> </html> HTML um 85 di 347

87 Attribuire delle dimensioni che portino a tutta pagina la tabella e che diano un altezza fissa alla prima riga, aggiungere la testata del sito e nella terza riga il piè di pagina. Quindi preparare il menu e ridimensionare la cella, in modo che occupi una piccola parte della tabella, poiché la cella di destra dovrà contenere il testo della pagina e quindi dovrà avere maggior spazio a disposizione, infine aggiungere il testo nell ultima cella. Eliminare il bordo, poiché la tabella, usata come layout, deve risultare invisibile, per rendere più accattivante l effetto finale, centrare la tabella nella pagina. <html> <head> <title>home Page</title> </head> <body> <table> <tr> <td colspan = "2" height = "70" align = "center"> <img src = "raissa.jpg"> Nome della società <a href ="chi.html"> Chi siamo </a> <a href ="prod.html"> Prodotti </a> <a href ="ref.html"> Referenze </a> <a href ="con.html"> Contatti </a> </td> </tr> <tr> <td with = "120" valign = "top"> <font face = "arial" size = "2"> Prodotti: <br><br> <img src ="fish.bmp">prodotto 1<br/> <img src ="fish.bmp">prodotto 2<br/> <img src ="fish.bmp">prodotto 3<br/> <img src ="fish.bmp">prodotto 4<br/> </font> HTML um 86 di 347

88 </tr> <tr> </td> <td valign = "top"> <font face = "arial" size = "4"> Testo della pagina. pagina dei prodotti. descrizione dei prodotti. </font> </td> <td colspan = "2" height = "30" align = "center"> <address>per contattare l amministratore del sito scrivera a <a href="mailto:webmaster@sito.com">webmaster@sito.com</a></address> </td> </tr> </table> </body> </html> Spacer Le celle di una tabella devono sempre contenere del testo o immagini. Provare ad eliminare il testo contenuto nella seconda cella della prima riga. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height = "200"> <tr> HTML um 87 di 347

89 </tr> <tr> </tr> </table> </body> </html> <td>a</td> <td></td> <td>seconda riga</td> <td>ultima cella</td> Tuttavia può capitare di desiderare una cella vuota, ci sono due strade da seguire. La prima è quella d inserire una particolare stringa, &NBSP che corrisponde alla barra spaziatrice e l effetto è quello di una cella vuota. Tuttavia si tratta di un carattere, anche se invisibile che possiede una dimensione relativa al set di caratteri della pagina che, senza uso del TAG <FONT> o degli stili, è quello di default. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height = "200"> <tr> <td>a</td> <td>&nbsp</td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> HTML um 88 di 347

90 </body> </html> Per poter avere totale controllo sulle dimensioni del contenuto della cella, si ricorre allo spacer: l immagine trasparente. Usando i parametri WIDTH ed HEIGHT si può far occupare all immagine lo spazio desiderato, una cella che contiene un immagine si ridimensiona in base allo spazio occupato dall immagine stessa. La tabella può quindi essere controllata con la precisione del pixel grazie all uso degli spacer. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height = "200"> <tr> <td>a</td> <td><img src ="spacer.gif" width = "250" height = "150" ></td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 89 di 347

91 Se invece si desidera una cella vuota ma senza ridimensionamenti, basta inserire uno spacer con larghezza ed altezza molto ridotta, o addirittura si possono omettere i due parametri. <html> <head> <title>tabelle</title> </head> <body> <table border = "1" width = "350" height = "200"> <tr> <td>a</td> <td><img src ="spacer.gif" ></td> </tr> <tr> <td>seconda riga</td> <td>ultima cella</td> </tr> </table> </body> </html> HTML um 90 di 347

92 ESEMPI Progettare le seguenti tabelle. HTML um 91 di 347

93 <html> <head> <title>tabelle</title> </head> <body> <table width="75%" border="1"> <caption> <div align="center"><b>fatturato dell azienda</b></div> </caption> <thead> <tr> <th width="20%">mesi di attività</th> <th width="40%">fatturato da attività 1 (in euro)</th> <th width="40%">fatturato da attività 2 (in euro)</th> </tr> </thead> <tfoot> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td ><b>totale</b></td> <td > </td> <td >45.000</td> </tr> </tfoot> <tbody> <tr> <td >Gennaio</td> <td >10.000</td> <td >1.000</td> </tr> <tr> <td >Febbraio</td> <td >20.000</td> <td >2.000</td> </tr> <tr> <td >Marzo</td> <td >30.000</td> <td >3.000</td> </tr> <tr> <td >Aprile</td> <td >40.000</td> <td >4.000</td> </tr> <tr> <td >Agosto</td> <td >50.000</td> <td >5.000</td> </tr> HTML um 92 di 347

94 <tr> <td >Settembre</td> <td >60.000</td> <td >6.000</td> </tr> <tr> <td height="24">ottobre</td> <td >70.000</td> <td >7.000</td> </tr> <tr> <td >Novembre</td> <td >80.000</td> <td >8.000</td> </tr> <tr> <td height="24" >Dicembre</td> <td >90.000</td> <td >9.000</td> </tr> </tbody> </table> </body> </html> <html> <head> <title>tabelle</title> </head> <body> <table width="75%" border="1"> <colgroup bgcolor="#00ffcc" width="20%" align="right"></colgroup> <colgroup span="2" bgcolor="#33ccff" width="40%" align="center"> <caption> <div align="center"><b>fatturato dell azienda</b></div> HTML um 93 di 347

95 </caption> <thead> <tr> <th>mesi di attività</th> <th>fatturato da attività 1 (in euro)</th> <th>fatturato da attività 2 (in euro)</th> </tr> </thead> <tfoot> <tr> <td><b>totale</b></td> <td>30.000</td> <td>3.000</td> </tr> </tfoot> <tbody> <tr> <td>gennaio</td> <td>10.000</td> <td>1.000</td> </tr> <tr> <td>febbraio</td> <td>20.000</td> <td>2.000</td> </tr> </tbody> </table> </body> </html> <html> <head> <title>tabelle</title> </head> <body> <table width="700" border="1"> <colgroup span="5" width="20" bgcolor="red"></colgroup> <colgroup width="60"> <col span="5" bgcolor="blue" align="left"/> <col span="5" bgcolor="green" align="right"/> HTML um 94 di 347

96 </colgroup> <tr> <td><b>1</b></td> <td><b>2</b></td> <td><b>3</b></td> <td><b>4</b></td> <td><b>5</b></td> <td><b>6</b></td> <td><b>7</b></td> <td><b>8</b></td> <td><b>9</b></td> <td><b>10</b></td> <td><b>11</b></td> <td><b>12</b></td> <td><b>13</b></td> <td><b>14</b></td> <td><b>15</b></td> </tr> <tr> <td><b>16</b></td> <td><b>17</b></td> <td><b>18</b></td> <td><b>19</b></td> <td><b>20</b></td> <td><b>21</b></td> <td><b>22</b></td> <td><b>23</b></td> <td><b>24</b></td> <td><b>25</b></td> <td><b>26</b></td> <td><b>27</b></td> <td><b>28</b></td> <td><b>29</b></td> <td><b>30</b></td> </tr> </table> </body> </html> HTML um 95 di 347

97 <html> <head> <title>tabelle</title> </head> <body> <br/><table width="300" border="1" frame="void" rules="all"> <thead> <tr> <th width="50%">intestazione 1</th> <th width="50%">intestazione 2</th> </tr> </thead> <tfoot> <tr> <td>chiusura 1</td> <td>chiusura 2</td> </tr> </tfoot> <tbody> <tr> <td>corpo 1</td> <td>corpo 2</td> </tr> <tr> <td >corpo 3</td> <td>corpo 4</td> </tr> <tr> <td >corpo 5</td> <td>corpo 6</td> </tr> </tbody> </table> </body> </html> HTML um 96 di 347

98 Siti ridimensionabili Cambia la risoluzione del monitor e il sito cambia: è un errore frequente di chi si trova a sviluppare per la prima volta pagine web. Si ragiona basandosi su parametri cartacei, quando tutto rimane fermo, fisso e immutabile. Si cerca di ottimizzare il sito in modo che non compaiano barre orizzontali o verticali. Uno dei pregi del web è infatti la relativa indipendenza dei contenuti dai contenitori: le pagine web possono essere viste infatti in moltissimi modi. Il che vuol dire anche che si può girare nel web a partire da qualsiasi piattaforma Windows, Linux o Macintosh, con qualsiasi browser Internet Explorer, Netscape Navigator, Mozilla, Opera e a qualsiasi risoluzione dello schermo 640x480, 800x600, 1024x768. Bisogna sapere adattare il proprio sito a molteplici situazioni. La maggior parte degli utenti Internet imposta il monitor con una risoluzione di 1024x768. In ogni caso è opportuno sviluppare il sito in modo che si veda in maniera corretta a tutte le risoluzioni. Esempio, ottimizzare il sito a 800x600: si tratta di evitare che nel sito compaiano barre orizzontali e verticali. Impostare il sito a una grandezza di 780x450 con Windows XP che utilizza delle barre più grosse, queste grandezze diventano: 779x430. Dopodiché ci sono diverse possibilità, a risoluzioni superiori di 800x600. Il sito rimane allineato a sinistra. Il sito rimane centrato a qualsiasi risoluzione. Il sito si ridimensiona, occupando la totalità dello schermo. Si utilizzano le tabelle in percentuale. Per far sì che un sito si ridimensioni a tutta pagina occorre mantenere varie celle fisse e lasciare una o più celle libere di ridimensionarsi a proprio piacimento: saranno queste celle libere a colmare lo spazio che altrimenti risulterebbe vuoto. Procurarsi una GIF trasparente di 1 pixel x 1 pixel, è un immagine vuota che nell ordinaria costruzione di un sito è utile. Si sa che, se non c è nulla all interno di una cella, il browser non la vede, è allora indispensabile riempire la cella con qualsiasi cosa: un <BR>, un non-breaking-space, oppure l immagine vuota. Netscape in origine aveva creato un TAG apposito, lo <SPACER>. Un altro problema che si verifica è che, quando ci sono delle tabelle annidate, da una cella interna non è possibile vedere lo sfondo che sta sopra. Anche in questo caso la situazione si risolve mettendo un immagine vuota di sfondo. <table width="500" border="1" cellspacing="0" cellpadding="0" height="400"> <tr> <td background="imgs/sfondo.gif" align="center" valign="middle"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="imgs/spacer.gif"> </td> <td background="imgs/shim.gif"> </td> <td background="imgs/shim.gif"> </td> </tr> </table> </td> </tr> </table> Se non ci fosse l immagine trasparente, la tabella interna avrebbe uno sfondo bianco. L immagine vuota è utile per le tabelle in percentuale. Non occorre utilizzare delle percentuali realistiche ma basta dare ad una cella il valore HTML um 97 di 347

99 dell 1% perché questa si schiacci sul proprio contenuto, basta darle invece un valore del 100% perché si allarghi al massimo. È evidente, a questo punto che le dimensioni non vanno più date alle celle che saranno dell 1% o del 100% ma va attribuito al contenuto. Si tratta dunque di prendere lo spacer, dargli le dimensioni preferite e quindi schiacciargli contro la cella: la dimensione della cella è così tenuta dallo spacer. Stesso procedimento nel caso in cui si avesse del contenuto vero contro cui schiacciare la cella, si usa il NOWRAP per le scritte. La pagina non risulta appesantita dall utilizzo di tutte queste immagini vuote: l immagine è infatti caricata una sola volta. Ovviamente se le celle ridimensionabili sono più di una, il 100% dev essere diviso fra tutte le celle che devono essere ridimensionate. Il codice corrispondente a questo esempio è il seguente. <table width="100%" border="2" cellspacing="0" cellpadding="3"bordercolor="#000000"> <tr> <td width="1%"><img src="imgs/spacer.gif" width="40" height="20"></td> <td width="33%">contenuto 1</td> <td width="1%"><img src="imgs/spacer.gif" width="80" height="20"></td> <td width="33%">contenuto 2</td> <td width="1%"><img src="imgs/spacer.gif" width="40" height="20"></td> <td width="33%">contenuto 3</td> <td width="1%"><img src="imgs/spacer.gif" width="40" height="20"></td> </tr> </table> La somma totale delle celle è di 103% e le proporzioni non rispettano la realtà ma il layout è visualizzato correttamente, perché la larghezza del 100% è espressa nel TAG <TABLE> che controlla le celle sottostanti. Proprio per questo stesso motivo che le percentuali non rispecchiano più la realtà, non ci sarà da stupirsi se per avere tre celle della stessa misura e che si ridimensionano allo stesso modo, si deve dare, ad esempio, alla prima il 60% alla seconda il 40% e alla terza il 30%. HTML um 98 di 347

100 TECNICHE FRAME L uso dei frame è sconsigliato perché non sono supportati dall XHTML. Sono una tecnica di costruzione di layout molto vecchia: risalgono infatti a diversi anni fa ma per molte ragioni sono ancora utilizzati nei siti web. Con i frame è possibile separare le pagine web in sezioni distinte, di qualsiasi dimensione, all interno della finestra del browser. Non vi è limite al numero di pagine web che si possono inserire in frame, anche se, naturalmente, maggiore è il loro numero e minore è la dimensione a loro disposizione. Lo spazio può essere suddiviso in righe o colonne. Generalmente i layout presentano una riga in alto e due colonne nella parte inferiore. Ma non vi è alcun vincolo di sorta. Il contenuto di un frame può essere indipendente dagli altri ma si può anche fare in modo che le azioni dell utente in un frame influenzino il contenuto degli altri frame. Frameset Perché le pagine possano essere caricate in più frame occorre che sia preparata una pagina apposita che contenga le impostazioni sulla suddivisione dello spazio disponibile: questo è il frameset. Apparentemente il frameset è una pagina web normalissima, tuttavia presenta il TAG <FRAMESET> al posto del TAG <BODY>. All interno di <FRAMESET> troverà luogo un parametro dedicato a specificare la suddivisione dello spazio e la dimensione di ciascun riquadro. COLS con valore un numero con o senza % o *; definisce numero e dimensione delle colonne da creare; un numero indica la larghezza delle colonne in pixel; % indica la larghezza relativa alla finestra del browser, per esempio per inserire più riquadri è sufficiente inserire un maggior numero di valori, a patto che la somma sia 100%; * indica che il frame è proporzionale agli altri. ROWS per la suddivisione in righe. FRAMEBORDER indica se i frame hanno un bordo: valore uno bordo, valore zero senza bordo. BORDER indica lo spessore del bordo. La quantità di valori inseriti indicherà anche il numero di riquadri. <html> <head> <title>frame</title> </head> <body> <frameset cols = 20%, 80% > </frameset> </body> </html> Il riquadro corrispondente sarà l unico a variare per adattarsi allo spazio reso disponibile dalla risoluzione. HTML um 99 di 347

101 Frame Una volta impostato il frameset, occorre inserire i frame con il TAG <FRAME>, se ne inserirà uno per ogni riquadro; la chiusura del TAG è facoltativa, gli attributi sono i seguenti. NAME nome del frame, dev essere composto da una sola parola e non contenere caratteri speciali. SRC percorso ed il nome del file da caricare, altrimenti il frame è vuoto. NORESIZE evita che il frame sia ridimensionato. SCROLLING (YES, NO, AUTO) per la barra di scorrimento. FRAMEBORDER indica se il frame ha un bordo. MARGINHEIGHT altezza dei margini superiore e inferiore in pixel. MARGINWIDTH larghezza dei margini sinistro e destro in pixel. Usando <FRAMESET> invece di <FRAME> si possono creare layout di frame complessi. <html> <head> <title>frame</title> </head> <body> <frameset cols = "200, *"> <frame src = "indice.htm"> <frame src = "home.htm"> </frameset> </body> </html> Il file INDICE.HTML ha lo sfondo di color giallo che conterrà i collegamenti alle varie sezioni del sito. <html> <head> <title>indice</title> </head> <body bgcolor="#ffff66"> Indice <br/><br/> </body> </html> Il file HOME.HTML ha lo sfondo viola e contiene il testo dell homepage del sito. <html> <head> <title>home</title> </head> <body bgcolor="#66666ff"> <br/><br/> Home </body> </html> Se i nomi dei file e i loro percorsi sono giusti, si ottiene un layout composto da due pagine web distinte. Il riquadro di sinistra sarà largo 200 pixel, mentre quello di destra occuperà tutto lo spazio disponibile. HTML um 100 di 347

102 Collegamenti Quando si ha un sito privo di frame e si fa clic su un link, il file di destinazione va a sostituire la pagina corrente. Per modificare questa impostazione si deve tornare nel codice del frameset. Aggiungendo il parametro NAME al TAG <FRAME> si può attribuire un nome univoco al riquadro. <html> <head> <title>frame</title> </head> <body> <frameset cols = 200, * > <frame src = indice.htm name = sinistra > <frame src = home.htm name = destra > </frameset> </body> </html> Grazie all assegnazione di un nome univoco, i riquadri possono essere identificati e quindi raggiunti dalla destinazione di un collegamento. Tornare nella pagina HTML contenente l indice per modificare i TAG dei collegamenti. Il parametro del TAG <A> da aggiungere è TARGET e il valore da inserire è il nome del riquadro impostato nel frameset, gli attributi sono i seguenti. _BLANK apre l URL in una nuova finestra. _PARENT apre l URL nel frame genitore di quello corrente. _SELF sostituisce il frame in cui si trovava il collegamento. _TOP visualizza l URL nella finestra completa, eliminando i frame. <html> <head> <title>indice</title> </head> <body bgcolor="#ffff66"> Indice <br/><br/> HTML um 101 di 347

103 <a href ="home.htm" target="destra" Home></a><br /> </body> </html> Formattazione In un layout come quello costruito finora, la dimensione dei frame è relativa alle impostazioni del frameset. Tuttavia questa dimensione non è fissa e con un semplice clic e trascina, applicato alla divisione tra i riquadri, è possibile ridurre o aumentare la dimensione dei riquadri stessi. Questa impostazione è facoltativa e può essere rimossa agendo sul frameset. Inserendo il parametro NORESIZE, privo di valori, si forza la dimensione del riquadro cui è applicato. Se ci sono solo due frame è sufficiente inserirlo in una sola delle TAG <FRAME> È possibile anche eliminare il bordo grigio tra i riquadri. Per farlo inserire il parametro BORDER, con valore zero nel TAG <FRAMESET> <html> <head> <title>frame</title> </head> <frameset cols = "200, *" border = "0"> <frame src = "indice.htm" name = "sinistra" noresize> <frame src = "home.htm" name = "destra"> </frameset> </html> L effetto finale è molto apprezzato nei casi in cui lo sfondo delle pagine sia identico. Come accade nelle normali pagine web, se il contenuto di un frame è troppo grande per essere contenuto in un unica schermata, il browser aggiunge le barre di scorrimento laterali. È possibile far sì che le barre non compaiano ma grazie al parametro SCROLLING, cui si associa il valore NO, questo parametro è inserito nel TAG <FRAME>. <html> <head> <title>frame</title> </head> <frameset cols = "200, *" border = "0"> <frame src="indice.htm" name="sinistra" noresize scrolling no> <frame src = "home.htm" name = "destra"> </frameset> </html> Naturalmente se il contenuto è maggiore, rispetto allo spazio disponibile, la parte eccedente è troncata. Esempio. <html> <head> <title>frameset</title> </head> <frameset rows="64,*"> <frame name="banner" scrolling="no" noresize> <frameset cols="150,*"> HTML um 102 di 347

104 <frame name="contents"> <frame name="main"> </frameset> </frameset> <noframes> <p>la pagina è divisa in frame ma il browser non li supporta.</p> </noframes> </html> Esempi Progettare due frame indipendenti separati da una barra orizzontale. <html> <head> <title>frame</title> </head> <frameset rows="*,*"> <frame name="superiore"> <frame name="inferiore"> </frameset> <body></body> </html> Progettare due frame indipendenti separati da una barra verticale. <html> HTML um 103 di 347

105 <head> <title>frame</title> </head> <frameset cols="*,*"> <frame name="sinistra"> <frame name="destra"> </frameset> <body></body> </html> Progettare un frame d intestazione seguito da un frame principale, il contenuto del frame principale dipende dal collegamento selezionato nell intestazione. <html> <head> <title>frame</title> </head> <frameset rows="64,*"> <frame name="intestazione" scrolling="no" noresize target="principale"> <frame name="principale"> </frameset> <body></body> </html> Progettare un frame d intestazione seguito da un frame principale e da un frame per il sommario, il contenuto del frame sommario dipende dal collegamento selezionato nell intestazione. <html> HTML um 104 di 347

106 <head> <title>frame</title> </head> <frameset rows="64,*"> <frame name="intestazione" scrolling="no" noresize target="sommario"> <frameset cols="150,*"> <frame name="sommario" target="principale"> <frame name="principale"> </frameset> </frameset> <body></body> </html> Progettare un frame d intestazione e un frame per il piè di pagina, il contenuto del frame sommario dipende dal collegamento selezionato nell intestazione o nel piè di pagina. <html> <head> <title>frame</title> </head> <frameset rows="64,*,64"> <frame name="superiore" scrolling="no" noresize target="sommario"> <frameset cols="150,*"> <frame name="sommario" target="principale"> <frame name="principale"> </frameset> <frame name="inferiore" scrolling="no" noresize target="sommario"> <noframes> </frameset> <body></body> </html> HTML um 105 di 347

107 Progettare un frame principale e un frame per le note a piè pagina, il contenuto delle note a piè pagina dipende dal collegamento selezionato nel frame principale. <html> <head> <title>frame</title> </head> <frameset rows="*,20%"> <frame name="principale" target="note a piè di pagina"> <frame name="note a piè di pagina"> </frameset> <body></body> </html> HTML um 106 di 347

108 MULTIMEDIALITÀ INTRODUZIONE Nelle pagine web si possono inserire elementi multimediali che possono essere visualizzati in una finestra diversa, elementi esterni o come parte della pagina, elementi interni. Il browser riconosce solo alcuni tipi di file, per i formati che non riconosce può richiamare un visualizzatore esterno autonomo, un plugin (Firefox) o un controllo ActiveX (Microsoft) che sono distribuiti gratuitamente e possono essere scaricati da una pagina web e installati con una procedura automatica e operano nelle seguenti modalità. Annidata: decodifica i dati all interno della pagina, per esempio un filmato video. A pieno schermo: assume il controllo della finestra del browser. Nascosta: svolge le funzioni in background, per esempio un file audio. Gli elementi multimediali possono essere di due tipi. 1. Esterni: sono inseriti usando un collegamento ipertestuale. 2. Interni: sono inseriti con i seguenti TAG. <EMBED> tecnologia plugin. <OBJECT> tecnologia ActiveX. <APPLET> per le applet Java. Ci sono due classi di servizi. 1. Broadcast, radio digitale, è un servizio che permete di ascoltare la radio usando un PC collegato a Internet. 2. Punto a punto, unicast, telefono VoIP la voce di chi utilizza il servizio è digitalizzata e spedita via TCP/IP (Transmission Control Protocol/Internet Protocol) attraverso Internet, esistono tre tipi di VoIP (Voice over IP) PC to PC PC to Phone Phone to Phone. Per avviare un audio quando si fa clic su un collegamento ipertestuale basta creare un collegamento al file sonoro. <html> <head> <title>audio</title> </head> <body> <a href="canzone.mp3">suona</a> </body> </html> HTML um 107 di 347

109 Per avviare un audio all interno della pagina si usa il TAG <BGSOUND> il parametro SRC permette d identificare il file sonoro da eseguire. Con il parametro LOOP s indica il numero di volte che il file sonoro dev essere riprodotto. Se invece di un numero, s inserisce il valore INFINITE, l audio sarà riprodotto all infinito. <html> <head> <title>audio</title> </head> <body> <bgsound src = "canzone.mp3" loop = "infinite"> </body> </html> Anche se sulla pagina non appare nulla, il suono è riprodotto in continuazione. <EMBED> è una TAG più potente e consente un maggior controllo sul flusso audio. Con AUTOSTART, cui si assegna il valore true o il valore false, fa sì che al caricamento della pagina il file sia riprodotto oppure no. Il parametro LOOP è presente ma stavolta ammette solo i valori true e false. È possibile anche stabilire il volume del sonoro, grazie a VOLUME, i valori ammessi sono numeri compresi tra zero e cento. EMBED crea una vera console interattiva e le dimensioni sono personalizzabili con i parametri: WIDTH e HEIGHT. <html> <head> <title>audio</title> </head> <body> <embed src = "canzone.mp3" loop = "false" autostart = "true" volume = "70" width = "100" height = "70"> </body> </html> HTML um 108 di 347

110 Per avviare un audio all interno della pagina si usa il TAG <OBJECT>, con il TAG <PARAM> si gestiscono le proprietà del controllo ActiveMovie. Il valore CLASSID fa riferimento al controllo DirectShow ActiveMovie, è un numero di 32 cifre esadecimali che identifica il controllo nel registro di sistema. <html> <head> <title>audio</title> </head> <body> <object id="audio" classid="clsid:05589fa1-c356-11ce-bf01-00aa a" style="height:45px"> <param name = "FileName" value= "canzone.mp3" /> <param name = "AutoStart" value= "1" /> </object> </body> </html> Video Per avviare un video in una finestra separata basta inserire nella pagina un collegamento che punti al file del filmato che dev essere memorizzato nella stessa cartella del documento XHTML. <html> <head> <title>video</title> </head> HTML um 109 di 347

111 <body> <a href="sci.avi">film</a> </body> </html> Per avviare un video all interno della pagina si usa il TAG <EMBED> con l attributo SRC che specifica il file. Nel caso dei video è bene prestare molta attenzione ai valori di larghezza e altezza, altrimenti il video risulterà troppo piccolo o la consolle non mostrerà tutti i comandi. Si possono aggiungere tutti gli altri parametri, anche se non sono obbligatori. <html> <head> <title>video</title> </head> <body> <embed src = "sci.avi" width = "300" height = "300"> </body> </html> Per avviare un video all interno della pagina si usa il TAG <OBJECT>, con il TAG <PARAM> si gestiscono le proprietà del controllo ActiveMovie. Il valore CLASSID fa riferimento al controllo DirectShow ActiveMovie. <html> <head> <title>video</title> </head> <body> <object id="video" classid="clsid:05589fa1-c356-11ce-bf01-00aa a"> <param name = "FileName" value= "sci.asf" /> <param name = "ShowDisplay" value= "1" /> <param name = "ShowControls" value= "1" /> <param name = "ShowPositionControls" value= "1" /> <param name = "ShowTracker" value= "1" /> <param name = "EnabeTracker" value= "1" /> <param name = "PlayCount" value= "1" /> </object> </body> </html> HTML um 110 di 347

112 PLUGIN Il TAG <EMBED> permette d incorporare un file che dev essere letto o visualizzato da parte di un plugin, il contenuto del file può essere di diverso tipo, l attributo SRC permette di specificare l URL del file da incorporare. Le dimensioni dell area da visualizzare del plugin si possono specificare con gli attributi WIDTH e HEIGHT. <html> <head> <title>plugin</title> </head> <body> <embed src = "progetti.pdf" width = "500px" height = "300px"> </body> </html> HTML um 111 di 347

113 Adobe Acrobat Reader Acrobat è un sistema sviluppato dall Adobe, la maggiore azienda nel settore del desktop publishing e permette di distribuire documenti elettronici impaginati e formattati. Si basa su un particolare formato di file, il PDF (Portable Document Format), simile al linguaggio PostScript usato dalle stampanti professionali. A differenza di altri formati, un documento PDF mantiene inalterata la sua impostazione grafica originale in ogni condizione di visualizzazione. Per visualizzare un file PDF è necessario utilizzare un apposita applicazione di lettura, Acrobat Reader, disponibile per molte piattaforme, Macintosh, Windows e Linux. Acrobat Reader è distribuito gratuitamente e può funzionare sia come visualizzatore stand alone sia come plugin per i browser, in questo modo i file PDF possono essere distribuiti su Internet. I file PDF sono in grado d includere informazioni multimediali, come immagini, suoni, animazioni e anche filmati. È inoltre possibile inserire link ipertestuali che collegano elementi interni al documento, o che rinviano ad altre pagine o risorse sul web. CONTROLLI ACTIVEX È un applicazione che possiede metodi, proprietà ed eventi che possono essere utilizzati all interno del linguaggio di scripting VBScript. Un controllo ActiveX è inserito in una pagina web con il TAG <OBJECT> ma dev essere disponibile sul PC dell utente, altrimenti si deve installarlo e registrarlo nel registro di sistema. L attributo CODEBASE permette di specificare l URL da usare per prelevare il controllo dalla rete, se non è presente nel PC. Le dimensioni dell area da visualizzare dell oggetto ActiveX si possono specificare con gli attributi WIDTH e HEIGHT. HTML um 112 di 347

114 I TAG <PARAM> permettono d impostare le proprietà del controllo, in ogni TAG sono presenti gli attributi NAME e VALUE. <html> <head> <title>activex</title> </head> <body> <p> <object classid="clsid:8e27c92b c-8a2f c02" id="calendar1"> <param name="backcolor" value=" "> <param name="year" value="2010"> <param name="month" value="9"> <param name="day" value="27"> <param name="daylength" value="1"> <param name="monthlength" value="1"> <param name="dayfontcolor" value="0"> <param name="firstday" value="1"> <param name="gridcelleffect" value="1"> <param name="gridfontcolor" value=" "> <param name="gridlinescolor" value=" "> <param name="showdateselectors" value="-1"> <param name="showdays" value="-1"> <param name="showhorizontalgrid" value="-1"> <param name="showtitle" value="-1"> <param name="showverticalgrid" value="-1"> <param name="titlefontcolor" value=" "> <param name="valueisnull" value="0"> </object> </p> </body> </html> HTML um 113 di 347

115 Formati per documenti interattivi I documenti interattivi sono documenti che includono animazioni e suoni e sono capaci d interagire con l utente, per esempio i videogiochi. Si usano tipicamente per presentazioni graficamente complesse. Macromedia Director è la più famosa applicazione di authoring di documenti di questo tipo; Shockwave è un plugin per browser che consente di riprodurre documenti realizzati con Macromedia Director. A partire dalla versione 6.0 di Director, Shockwave permette lo streaming. Nel 1997 è apparso Flash 2.0, allo scopo di portare su web alcune caratteristiche importanti di Director. La forza di Flash è nel formato vettoriale con cui opera. Consente di ottenere filmati compatti e di ottima qualità grafica che possono zoomare a tutto schermo senza perdita di qualità. Un altro vantaggio delle immagini vettoriali è che il filmato può racchiudere informazioni addizionali. Ad esempio, agli oggetti possono essere associate delle proprietà particolari, come l attivarsi ad un click del mouse. Flash Flash consente ai progettisti di creare applicazioni di natura dinamica. I file sorgenti creati dall applicazione hanno estensione FLA e memorizzano le immagini in formato vettoriale, per la riproduzione nelle pagine web dev essere creato un Movie Flash Player con estensione SWF e serve un visualizzatore, il Flash Player. Le applicazioni Flash possono anche richiedere una certa quantità di larghezza di banda di rete per essere eseguite in modo corretto. Per inserire un filmato di Flash si ricorre al TAG <OBJECT> nel quale s indicano le dimensioni in larghezza e altezza del filmato. Tra <OBJECT> e la sua chiusura s inserisce il TAG <PARAM> nel quale s indica il nome del file da caricare e il suo eventuale percorso. Per far sì che il filmato sia visualizzato anche da altri browser, si aggiunge il TAG <EMBED>, nel parametro SRC è inserito il nome del file. <html> <head> <title>flash</title> </head> <body> <p> HTML um 114 di 347

116 <object classid="clsid:d27cdb6e-ae6d-11cf-96b " id="obj1" codebase=" on=6,0,40,0" border="0" width="468" height="200"> <param name="movie" value="default.swf"/> <param name="quality" value="high"/> <embed src="default.swf" pluginspage=" type="application/xshockwave-flash" name="obj1" width="468" height="200"> </object> </p> </body> </html> Mediante DreamWeaver è possibile inserire un filmato SWF con pochi clic. Alternativamente si può ricorrere al codice esportato da Flash in fase di pubblicazione. HTML um 115 di 347

117 CSS INTRODUZIONE Il linguaggio HTML ha come scopo quello di gestire i contenuti, specificandone la struttura attraverso TAG diversi. Tuttavia questa formattazione è completamente sotto il controllo dell utente che può modificarla nelle Impostazioni del browser. Per permettere agli autori di definire l aspetto delle pagine, dal 1993 in poi Netscape e Internet Explorer, presentarono TAG proprietari, ovvero non aderenti agli standard e non compatibili con i browser concorrenti, un esempio di questi TAG è <font>. Questi TAG proprietari di formattazione erano l unico modo per gli autori di definire la formattazione, tuttavia questi TAG presentano tre problemi. 1. Il primo problema è costituito dalla lunghezza degli stessi, se confrontata con una pagina che adotta il CSS, una pagina che non lo adotta è in genere più pesante, in termini di bit, in un rapporto che spesso raggiunge il 200%, inoltre, le istruzioni CSS possono essere raccolte in un file esterno che rimane memorizzato nella cache del browser, riducendo ulteriormente la quantità di dati che i server devono trasmettere. 2. Il secondo problema risiede nella mancanza di logica del codice HTML, un codice non aderente agli standard, comporta molto lavoro aggiuntivo per i browser che devono cercare di correggere e interpretare, quando possibile, direttive arbitrarie. 3. Il terzo problema è la mancanza di compatibilità con gli smartphone, queste pagine infatti sono progettate per schermi con risoluzione minima 800x600 pixel, i palmari che hanno una risoluzione inferiore e una forma dello schermo ben diversa dal rapporto 4:3 o 16:9 dei monitor per PC, si trovano quindi impossibilitati a visualizzare correttamente la pagina e l utente dovrà tentare di decodificarla. Nelle pagine web non standard si usa il TAG <table> per realizzare l impaginazione delle pagine web, questo è considerato dai puristi come inaccettabile in quanto le tabelle sono pensate per impaginare dati tabulari e non layout web. Il layout consiste nella collocazione grafica degli elementi all interno di una pagina web. In fase di progettazione, una pagina è suddivisa in aree omogenee dal punto di vista grafico: la definizione del layout è un operazione propedeutica allo sviluppo di un sito. Oltre alla collocazione degli elementi, il progetto del layout deve prevedere il comportamento della pagina rispetto alla finestra del browser: un layout può essere fisso, liquido o elastico. I CSS, quindi, sono il meccanismo standard per aggiungere stile alle pagine, in pratica s intende tutto ciò che concerne l aspetto grafico della pagina: la disposizione degli elementi (layout e posizionamento), i colori, i margini e i font. Definire gli stili all interno delle pagine web, comporta il dover ripetere la definizione per ogni pagina del sito, esiste un modo per evitare questa ripetizione, creare un foglio di stile che contiene tutte le classi e pseudo classi. Permettono, quindi, di applicare caratteristiche di formattazione agli elementi HTML. CSS è il presentation layer del web design Ogni singolo elemento della pagina è selezionato ricorrendo ad una data sintassi e gli sono assegnati determinati attributi grafici. Ad esempio, l istruzione seguente. p { color: red; HTML um 116 di 347

118 } Attribuisce il colore rosso ad ogni paragrafo <p> della pagina. La stringa si compone di una parte esterna alle parentesi, in cui sono elencati i selettori degli elementi cui applicare gli stili e una parte interna, in cui sono elencate le proprietà color e i corrispondenti valori red. I selettori hanno lo scopo d individuare, all interno del documento, uno o più elementi rispondenti a determinate caratteristiche. La sintassi per specificare le regole dei CSS è la seguente. selettore { proprietà1: valore1; proprietà2: valore2 } Esistono diversi tipi di selettori. Selettori di TAG Permettono di applicare uno o più stili a tutti i TAG di un certo tipo. p { } color: red; Applica il colore rosso a tutti gli elementi <p> della pagina. Selettori di classe Permettono di applicare uno stile a tutti gli elementi aventi un determinato attributo class, la classe è specificata anteponendo un punto alla parola chiave..note { background: yellow; } Applica a tutti gli elementi con attributo class="note" uno sfondo giallo: ciò qualunque sia l elemento assegnato alla classe. Selettori di id Identifica un elemento unico all interno della pagina. Selezionare un elemento in base all identificativo è semplice come selezionare una classe, con la differenza che al posto del punto è utilizzato un cancelletto (#). #copyright { border-bottom: 1px solid #000; } L elemento con id="copyright"> mostra come bordo inferiore una linea continua nera, spessa 1px. Spesso succede che si applica uno stile ad un elemento HTML e le modifiche non hanno HTML um 117 di 347

119 alcun effetto sulla resa a video. Esempio, dato il seguente codice. <div id="sidebar"> <ul class="menu"> <li><a href="index.html">indice</a></li> Inoltre, dare dei colori ai link secondo le seguenti istruzioni. #sidebar a { color: red; }.menu a { color: blue; } La prima istruzione applica un colore rosso a tutti i link compresi nell elemento con id="sidebar". La seconda istruzione applica un colore blu a tutti i link compresi nell elemento con class="menu". Nel browser la seconda istruzione non è applicata: il motivo è che la specificità del primo selettore è superiore alla specificità del secondo. La specificità rappresenta una sorta di diritto di precedenza di un selettore CSS. Un selettore di id ha sempre la precedenza rispetto a un selettore di classe. Per applicare il colore rosso a tutti i link della sidebar, ad eccezione di quelli all interno del menu, basterà assegnare alla <div> una classe invece che un id. <div class="sidebar"> </div> Pseudo classi Seleziona un elemento in base al suo stato, sono precedute da un singolo simbolo di due punti (:). a:link seleziona ogni link della pagina. a:visited seleziona ogni link che punti ad una pagina già visitata dall utente. a:hover seleziona l elemento sul quale, in un determinato momento, si trova il cursore del mouse. a:active seleziona il link attivo, cliccato ma non ancora rilasciato. Pseudo elementi Seleziona una parte di un elemento HTML che non è direttamente individuato come elemento, sono preceduti da un doppio simbolo (::). ::first-line ::first-letter ::before ::after TIPI DI CSS Esistono diverse modalità d inserimento delle istruzioni CSS all interno del documento HTML. 1. Inline Permettono di applicare la formattazione ad un elemento specifico della pagina. HTML um 118 di 347

120 Si aggiunge l attributo style al TAG dell elemento. È possibile definire regole che valorizzano più proprietà separandole da punto e virgola. L uso degli stili in linea è sconsigliato perché il codice CSS è mescolato al codice HTML. <html> <head> <title>fogli di stile in linea</title> </head> <body style =" background :Yellow;color:Black"> <h1 style ="font-size :40pt;color:Red">Titolo</h1> <p style ="font-size:20pt">paragrafo</p> </body> </html> 2. Incorporati Permettono di applicare la formattazione a più elementi di una pagina. Si aggiunge il TAG <style> posto dopo il TAG <html> e prima del TAG <body>, di solito nella sezione <head>. Questa modalità rispetta il principio di separazione dei tre layer solo in parte: nel caso in cui il sito si componga di una sola pagina. <html> <head> <title>fogli di stile incorporati</title> <style type="text/css"> body { background :Yellow;color:Black} h1 {font-size :40pt;color:Red} p {font-size:20pt} </style> </head> <h1>titolo</h1> <p>paragrafo</p> </body> </html> HTML um 119 di 347

121 3. Esterni o collegati (linked style sheet) È possibile definire le regole di stile all interno di uno o più file esterni, con estensione CSS che contengono le definizioni di stile con la stessa sintassi degli stili incorporati, alla pagina HTML e quindi essere linkati dalla pagina. Questa modalità ha il vantaggio di separare, oltre che logicamente, anche fisicamente la struttura della pagina HTML dai relativi fogli di stile. Un file CSS può essere incluso anche da pagine diverse così da rendere possibile la condivisione di regole di stile senza che queste debbano essere riscritte più volte. Il CSS è collegato a tutte le pagine desiderate del sito e ad esso faranno riferimento in due modi. 1. La è una regola del CSS e va inserita prima di tutte le altre regole all interno dell elemento <style> con la sintassi "stile.css"; 2. Il TAG <link> va inserito nella sezione <head> definendo i seguenti attributi. TYPE contiene l indicazione sul tipo di file che si desidera collegare, text/css. rel indica la relazione del documento corrente con quello cui si fa riferimento in href stylesheet. href contiene il percorso ed il nome del file da collegare. Il file STILE.CSS potrebbe a sua volta contenere File PROVA.HTML <html> <head> <title>fogli di stile collegati</title> <link rel="stylesheet" href ="stile.css" type="text/css"> </head> <body> <h1>titolo</h1> <p>paragrafo</p> </body> </html> File STILE.CSS body { background :Yellow;color:Black} h1 {font-size :40pt;color:Red} p {font-size:20pt} Esempio, foglio di stile esterno. body { margin-left:.5cm; margin-right:.5cm; color: #000099; font-family: Verdana,Arial,sans-serif; font-size: 10pt; } a:link { text-decoration: none; color: # ; } a:visited { text-decoration: none; color: Gray; HTML um 120 di 347

122 } a:hover { Color: #ffff00; text-decoration: none; } td { font-family: "MS Sans Serif"; font-size: 12pt; } p { text-align: justify; text-indent: 12px; } body Tutto quello dichiarato all interno di questo elemento sarà esteso a tutto il documento, per cui tutta la pagina web farà uso del font verdana, nel caso in cui questo non fosse installato nel PC del visitatore si cercherà di fare uso di Arial, se anche questo dovesse mancare allora sans-serif, dopo di che sarà assunto il font di default. Margine laterale dai bordi destro e sinistro: 0.5 cm. Colore del testo: blu scuro. Dimensione del font: 10 punti. a:link Link da visitare: non sottolineati di colore verde. a:visited Link visitati: non sottolineati di colore grigio. a:hover Cambio colore al passaggio del mouse: non sottolineati di colore grigio. td Tabelle: font Ms Sans Serif dimensione 12 punti. p Paragrafo: allineamento giustificato, indentizione 12 pixel. CSS 3.0 Le nuove funzionalità sono le seguenti. Nuovi selettori e pseudo classi che rendono ancora più semplice riferire un elemento in base ai suoi attributi. È migliorata la gestione dei font e dell ordinamento dei testi, con l implementazione della disposizione del testo su più colonne. È possibile riconoscere i vari media su cui il CSS è visualizzato impostando anche caratteristiche riguardanti la larghezza dello schermo e la sua risoluzione e non più solo in base ai classici selettori Screen/Print. HTML5.0 e CSS 3.0 permettono l utilizzo di font personalizzati all interno delle pagine web. I font web-safe, per esempio i font diffusi su tutte le piattaforme quali Arial, Verdana, non permettono una completa espressività ai grafici, le scelte erano due. 1. Adobe Flash, si sostituiva all elemento da renderizzare, di solito titoli o intestazioni, un file flash contenente il solo font o un immagine generata lato server. 2. Immagini, con la conseguenza di appesantire le pagine web. Soluzioni di ripiego che caricavano di lavoro il client o il server e non permettevano l uso intensivo all interno di tutta la pagina. HTML 5.0 offre due possibilità. 1. Attributo 2. Utilizzare servizi come typekit o Google Font API. HTML um 121 di 347

123 I due servizi si appoggiano a JavaScript e al TAG <canvas> per creare un disegno del font scelto e renderizzarlo a schermo, permettendone pure la selezione e l indicizzazione da parte dei motori di ricerca. La sintassi per il CSS relativo alle ombre è così composta: spostamento verso destra, spostamento verso il basso e colore, è possibile applicare più ombre allo stesso elemento. È possibile combinare font, ombre, rotazioni. Attenzione alle licenze dei font che si utilizzano, di norma molto restrittive, per esempio non ne permettono l utilizzo all interno delle pagine web, anche se regolarmente acquistati. STILI PREDEFINITI Il browser applica agli elementi delle pagine web degli stili predefiniti, in altre parole significa che, anche senza applicare uno stile specifico, un elemento <h1> sarà reso a video diversamente da un elemento <p>. Tuttavia, lasciare al browser il compito di applicare lo stile agli elementi della pagina non è quasi mai una scelta opportuna, sia perché gli stili predefiniti non permettono di creare una grafica coerente con l immagine del sito, sia perché i diversi browser possono rendere a video la stessa pagina web in modo diverso l uno dall altro. La prima operazione da compiere, quando si crea un nuovo stile per una pagina web, è quella di azzerare gli stili predefiniti, per evitare difformità di comportamento tra i diversi browser, un web designer definisce questa operazione CSS reset. ATTRIBUTI DI STILE Unità di misura Dimensioni di box, interlinea di un paragrafo, dimensioni del font, possono essere specificate secondo diverse unità di misura relative. I valori di una proprietà non vanno mai messi tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola, esempio: "Times New Roman". Quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell unità. È corretto quindi scrivere 15px oppure 5em, è invece sbagliato usare 15 px o 5 em. Unità per le dimensioni Questa è la lista delle unità di misura usate per definire dimensioni, spazi o distanze. in (inches - pollici): classica misura del sistema metrico americano, praticamente nullo il suo valore su un supporto come un browser web viste le variabili relative a risoluzione e ampiezza dei monitor. cm (centimetri): stesso discorso visto per i pollici, la difficoltà maggiore sta nella resa su monitor che è altra cosa rispetto alla carta stampata. mm (millimetri): vedi centimetri. pt (points - punti): unità di misura tipografica destinata essenzialmente a definire la dimensione dei font, nei CSS 1pt = 1/72 di pollice. pc (picas): unità poco usata. 1 pica equivale a 12 punti. em (em-height): unità di misura spesso usata dagli autori CSS, 1 em equivale all altezza media di un carattere per un dato font, è un unità di misura relativa. ex (ex-height): poco usata. 1 ex equivale all altezza del carattere x minuscolo del font scelto. px (pixels): unità di misura ideale su monitor, è quella più usata e facile da comprendere. Unità di misura assolute Sono poco adatte per lo schermo perché è difficile conoscerne la risoluzione, mentre sono HTML um 122 di 347

124 adatte per la stampa. Percentuale Un valore espresso in percentuale è da considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l elemento parente. Si esprime con un valore numerico seguito, senza spazi, dal segno di percentuale: 60% è pertanto corretto. Stringhe Alcune proprietà dei CSS possono avere come valore una stringa di testo da inserire come contenuto aggiunto nel documento. I valori espressi da stringhe vanno sempre racchiusi tra virgolette. Le proprietà in questione sono tre: content, quotes, text-align ma solo per le tabelle definite con i CSS. Valori URI Si tratta di URL che puntano a documenti esterni in genere immagini, come negli sfondi. Possono essere URL assoluti o relativi, in questo caso il path fa sempre riferimento alla posizione del foglio di stile e non del documento HTML. La definizione dell indirizzo è sempre introdotta dalla parola chiave URL e va inserita tra parentesi tonde senza virgolette, esempio: URL(immagini/sfondo.gif). Unità per gli angoli Due proprietà comprese nella sezione dei CSS dedicata ai dispositivi audio possono essere espresse con unità di misura relative agli angoli, le due proprietà sono azimuth e elevation. Le unità di misura sono le seguenti. deg (degree - grado): descrive l ampiezza di un angolo, esempio 90deg. grad (gradians): descrive l ampiezza di un angolo su una scala 1-400, esempio 100grad = 90deg. rad (radians): descrive l ampiezza di un angolo su una scala 1-pi greco. Unità di tempo Sono usate per impostare la pausa tra le parole lette da un sintetizzatore vocale. Si applicano solo a queste tre proprietà: pause, pause-after, pause-before. Le unità di misura sono le seguenti. s (secondi) ms (millisecondi) Unità di frequenza Usate solo negli stili audio, definiscono la frequenza del segnale. Hz (Hertz) KHz (Kilohertz) Font font-family è la proprietà di stile che permette di scegliere la famiglia di font per il testo. È anche possibile indicare più famiglie di font, sarà utilizzata la prima disponibile sul PC che esegue il rendering. font-family (famiglia), font-style (stile), font-weight (spessore o peso), font-size (dimensione). font (imposta in un unica proprietà tutto). <html> <head> HTML um 123 di 347

125 <title>font</title> <style type="text/css"> h1 {font-family :Times, Sans-Serif ;font-size:40px} h1 {font-family :Times, Sans-Serif ;font-style:italic} p {font-family :Arial, Serif } strong {font-weight:bold} code {font-family :Courier,monospace} </style> </head> <body> <h1>font</h1> <h2>unità di misura</h2> <code>esempio di codice</code> <p>testo <strong>normale</strong></p> <p style="font-size:20px">testo di 20 px</p> <p style="font-size:1 cm">testo di 1 cm</p> <p style="font-size:0.5in">testo di 0.5 pollici</p> <p style="font-size:20pt">testo di 20 pt</p> <p style="font-size:2em">testo di 2 em</p> <p style="font-size:150%">testo di 150%</p> <p style="font-size:small">testo small</p> </body> </html> HTML um 124 di 347

126 Testo text-align (left, right, center, justify), text-decoration (none, underline, overline, line-through, blink), text-indent, text-transform (capitalize, uppercase, lowercase, none), line-height, vertical-align (basline, middle, sub, super, text-top, text-bottom), white-space (normal, pre, nowrap). <html> <head> <title>testo</title> <style type="text/css"> h1 {text-align:center} p {line-height :2em;text-align:justify;text-indent:10px } a {text-decoration :none} </style> HTML um 125 di 347

127 </head> <body> <h1>testo</h1> <p>testo con interlinea doppia, giustificato e con indentazione della prima riga.</p> <p><a href="file.html">collegamento ipertestuale non sottolineato</p> <p style="white-space:nowrap">testo che non va a capo anche se non c è spazio.</p> </body> </html> <html> <head> <title>testo</title> <style type="text/css"> p { font-size: 18pt; background-color: Yellow } strong { font-size: 12pt; vertical-align: top } em { font-size: 12pt; vertical-align: bottom } </style> </head> <body> <p> Questo è <strong>soltanto</strong> testo di <em>prova</em> </p> </body> </html> HTML um 126 di 347

128 Colore Ci sono due modi per indicare, nelle regole di stile, un colore. color, background-color. background (imposta in un unica proprietà tutto). Definizione Sono sedici parole chiave che definiscono i colori della palette VGA standard di Windows. black navy blue maroon purple green red teal fuchsia olive gray lime aqua silver yellow white. #RRGGBB È possibile impostare il colore di un elemento servendosi di codici esadecimali, i primi due numeri corrispondono ai valori per il colore rosso, RED, la seconda coppia fa riferimento al verde, GREEN e l ultima al blue, BLUE (00 RR, GG, BB FF). Per esempio, #CC0000 rappresenta una tonalità di rosso. #RGB (N,N,N) Con N tra zero e 255, molti dei codici esadecimali sono rappresentati da valori duplicati, è possibile usare per essi una sintassi abbreviata in cui i valori per il rosso, il verde e il blue sono definiti solo dal numero. Il colore dell esempio precedente può essere definito in questo modo: #C00. Nell uso di questa sintassi vanno valutati i risultati con colori che non presentino coppie di valori duplicati, il risultato può essere diverso a livello di tonalità secondo i casi. RGB(N%,N%,N%) Con N tra 0.0 e 100.0, un altro modo per rappresentare i colori è quello di usare per i tre elementi base del sistema RGB una lista di valori in percentuale separati da una virgola. Per indicare il nero e il bianco si usano i codici seguenti. RGB(0.0%,0.0%,0.0%) e RGB(100.0%,100.0%,100.0%). RGB(RRR,GGG,BBB) Si definiscono i valori di rosso, verde e blue con tre valori compresi, rispettivamente, tra 0 e 255, è il sistema delle applicazioni grafiche. Il range è l equivalente decimale di quello esadecimale 00-FF. Anche qui, i tre valori vanno separati da una virgola. Per esempio il codice del nero è il seguente RGB(0,0,0). HTML um 127 di 347

129 Box model Ogni oggetto del documento è visualizzato in un riquadro, box, le cui proprietà possono essere controllate da regole, box oriented formatting model. Ogni box è suddiviso in quattro aree. 1. Contenuto. 2. Padding, margine interno. 3. Bordo. 4. Margine esterno. Dietro un elemento si trova lo sfondo, intorno all elemento c è il bordo, il padding separa il contenuto dal bordo, intorno al bordo c è il margine che separa l elemento dagli altri. La dimensione di un box è la somma delle dimensioni di contenuto, padding e bordo. La proprietà margin imposta un margine tra l elemento individuato dal selettore e gli elementi ad esso adiacenti. Il padding produce uno spazio tra il bordo dell elemento e il suo contenuto, può assumere un valore unico, quando i contenuti sono posti alla stessa distanza dai quattro lati dell elemento, oppure può assumere quattro valori diversi: nell ordine: distanza dal lato superiore, destro, inferiore e sinistro. Layout border-width, border-style (none, dotted, dashed, solid, double, groove, ridge, inset, outset), border-color. border (imposta in un unica proprietà tutto). border-top, border-right, border-bottom, border-left. margin-top, margin-right, margin-bottom, margin-left. margin (imposta in un unica proprietà tutto). padding-top, padding-right, padding-bottom, padding-left. padding (imposta in un unica proprietà tutto). width, height, overflow, visibility. <html> <head> <title>box model</title> <style type="text/css"> p {background:yellow; border:2px solid #000000; HTML um 128 di 347

130 margin:50px; padding:30px; width:300px } </style> </head> <body> <p>ogni box è suddiviso in 4 aree: contenuto, padding (margine interno), bordo e margine esterno.</p> </body> </html> Elenco list-style-type (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none), list-style-image, list-style-position (inside, outside). list-style (imposta in un unica proprietà tutto). Cursore Questa proprietà non permette di ottenere cursori di forme diverse da quelli impostati di default nel sistema ma al contrario ne permette l interscambio e il controllo. Quando il puntatore del mouse passa su un link, da freccia si trasforma in manina. Quando una pagina web è in fase di caricamento il puntatore si trasforma in clessidra. Questa proprietà consente di controllare questi eventi, assegnando un puntatore a piacimento a tutti gli eventi della pagina. auto: il cursore è definito in base alle impostazioni automatiche di default del browser. crosshair: il browser visualizza il cursore con la classica croce. default: il browser visualizza il puntatore sempre nella sua forma standard. hand: il cursore assume per tutto il documento la forma della mano. move: il cursore assume la forma tipica degli elementi trascinati. e-resize: il cursore assume la forma di una freccia verso sinistra, tipicamente attivata quando si ridimensionano finestre o oggetti. ne-resize: freccia di default rivolta in alto a destra. nw-resize: freccia rivolta verso l alto a sinistra, questo stile si differenzia dal default perché stabilisce il cursore anche se l impostazione del browser è differente. n-resize: freccia non standard rivolta verso l alto. HTML um 129 di 347

131 se-resize: freccia standard rivolta verso il basso a destra. sw-resize: freccia standard rivolta verso il basso a sinistra. s-resize: freccia non-standard rivolta verso il basso. w-resize: freccia non-standard rivolta verso sinistra. text: al cursore è assegnata la tipica forma della barra verticale che i browser impostano quando incontrano testo senza link o immagini. wait: il classico cursore a forma di clessidra od orologio. help: il cursore a forma di punto interrogativo o fumetto che solitamente indica la possibilità di ottenere maggiori informazioni sull oggetto. <html> <head> <title>cursore</title> </head> <body> <div style="color: gray; cursor: hand; font-family: arial; font-size: 12px"> <b>passa il mouse per una prova</b></div> </body> </html> Disegni <html> <head> <title>css</title> <style type="text/css"> div { width: 442px; height: 242px; voice-family: "\"}\""; voice-family: inherit; width: 40px; height: 20px; border-style: solid; border-color: black; border-width: 1px; padding: 20px; } </style> </head> <body> <div></div> </body> </html> HTML um 130 di 347

132 Immagini <html> <head> <title>immagini</title> <style type="text/css"> img { width: 80px; } </style> </head> <body> <p> <img src="raissa.jpg" alt="raissa" /> </p> </body> </html> Le immagini possono essere usate per personalizzare sfondi, linee o elenchi. Si può applicare anche un colore di sfondo, usando la proprietà: BACKGROUND-COLOR. Tutto il contenuto di BODY, ovvero tutta la pagina, sarà formattato. <html> <head> <title>immagini</title> <style type="text/css"> body { font-family: arial; HTML um 131 di 347

133 background-color: #ff0000; } </style> </head> <body> Testo formattato </body> </html> Per inserire una linea basta che l immagine sia quella di una linea. Per impostare un immagine di sfondo si usa la proprietà BACKGROUND-IMAGE. Il valore è URL, seguito dall indicazione tra parentesi e virgolette dell immagine da caricare ed il suo eventuale percorso. Con un solo comando s imposta sfondo e formattazione del testo per l intera pagina. <html> <head> <title>immagini</title> <style type="text/css"> body { font-family: arial; background-image :url("fondo.jpg"); } </style> </head> <body> Testo formattato </body> </html> HTML um 132 di 347

134 La proprietà BACKGROUND-REPEAT, specifica se l immagine di sfondo dev essere ripetuta; il valore REPEAT-X, s impone allo sfondo di replicarsi solo lungo l asse delle ascisse; il valore REPEAT-Y, invece, lo sfondo si replica solo lungo l asse delle ordinate, ovvero in verticale, infine, con NOREPEAT, lo sfondo è inserito solo una volta e non si replica mai, utilissimo per filetti o sfondi di layout. <html> <head> <title> Immagini </title> <style type="text/css"> body { font-family: arial; background-image:url("fondo.jpg"); background-repeat: repeat-x; } </style> </head> <body> Testo formattato </body> </html> La proprietà BACKGROUND-POSITION se c è un immagine di sfondo ne specifica la posizione iniziale. <html> <head> <title>immagini</title> <style type="text/css"> body { background-image: url(raissa.jpg); background-repeat: no-repeat; background-position: 50% 50%; } </style> </head> <body> </body> </html> HTML um 133 di 347

135 <html> <head> <title>immagini</title> <style type="text/css"> div { width: 140px; height: 140px; border-style: solid; border-color: black; border-width: 1px; padding: 10px; background-color: green; overflow: scroll; } </style> </head> <body> <div> <img src="raissa.jpg" alt="raissa" /> </div> </body> </html> La posizione rispetto al testo dipende dal valore di VERTICAL-ALIGN. TOP allinea al testo il bordo superiore dell immagine. MIDDLE allinea al testo la metà dell immagine. BOTTOM allinea al testo il bordo inferiore dell immagine. <html> <head> <title>immagini</title> </head> <body> <p> <img src = "raissa.jpg" width = "100"height = "90" style="vertical-align:top"/> HTML um 134 di 347

136 Il testo è allineato al bordo superiore dell immagine. <hr/> <img src = "raissa.jpg" width = "100"height = "90" /> Il testo è allineato al bordo inferiore dell immagine. <hr/> <img src = "raissa.jpg" width = "100"height = "90" style="vertical-align:middle"/> Il testo è allineato al centro dell immagine. </p> </body> </html> La proprietà float permette di allineare gli elementi. left l immagine appare sul lato sinistro mentre il testo fluisce intorno al margine destro. right l immagine appare sul lato destro mentre il testo fluisce intorno al margine sinistro. <html> <head> <title>immagini</title> </head> <body> <p> <img src = "raissa.jpg" width = "100"height = "90" style="float:left"/> Il testo scorre alla destra dell immagine.<br /> Il testo scorre alla destra dell immagine.<br /> Il testo scorre alla destra dell immagine.<br /> Il testo scorre alla destra dell immagine.<br /> Il testo scorre alla destra dell immagine.<br /> HTML um 135 di 347

137 <hr/> <img src = "raissa.jpg" width = "100"height = "90" style="float:right"/> Il testo scorre alla sinistra dell immagine. </p> </body> </html> Per usare un immagine come punto elenco si usa la proprietà LIST-STYLE-IMAGE. <html> <head> <title>immagini</title> <style type="text/css"> ul {list-style-image:url(fish.bmp);} </style> </head> <body> <ul> <li>prima voce </li> <li>seconda voce </li> <li>terza voce </li> </ul> </body> </html> HTML um 136 di 347

138 Le immagini possono essere usate come contenuto sostitutivo per contenuti speciali non riconosciuti dal browser che lascerebbero lo spazio vuoto, come applet Java, controlli ActiveX e plugin, basta porre un TAG d immagine prima del TAG di chiusura del contenuto speciale; se il browser non riconosce il tag speciale lo ignora e riconosce solo il TAG <IMG>. Filtri su immagini I fogli di stile consentono di evitare l uso di GIF animate attraverso l inserimento di codice HTML. Gli effetti ottenibili grazie ai filtri sono sei e tutti si verificano quando il puntatore del mouse passa sull immagine. Trasparency: rende opaca l immagine finché il mouse non la sfiora e assume la luminosità originale. Blur: effetto sfuocato dell immagine verso sinistra. Light: effetto ombreggiato dell immagine da destra verso sinistra. Wave: effetto ondulato sull immagine. Flip horizontal: immagine invertita verso sinistra. Flip vertical: immagine capovolta. Per ottenere gli effetti dei filtri sull immagine è necessario agire su due punti del documento: all interno del TAG <HEAD> e nello SRC dell immagine. <html> <head> <script> function alphaon(x) {document[x].filters.alpha.opacity +=50;} function alphaoff(x) {test=x provatimer=setinterval("prova(test)", 100)} function prova(x) {if (document[x].filters.alpha.opacity>50) { document[x].filters.alpha.opacity -= 10 } else {clearinterval(provatimer)} } function bluron(x) {document[x].filters.blur.enabled=1;} function bluroff(x) {document[x].filters.blur.enabled=0;} function lighton(x) HTML um 137 di 347

139 {document[x].filters.light.enabled=1; document[x].filters.light.addpoint(0,0,0,0,0,0,0);} function lightoff(x) {document[x].filters.light.enabled=0;} function waveon(x) {document[x].filters.wave.enabled=1;} function waveoff(x) {document[x].filters.wave.enabled=0;} function fliphon(x) {document[x].filters.fliph.enabled=1;} function fliphoff(x) {document[x].filters.fliph.enabled=0;} function flipvon(x) {document[x].filters.flipv.enabled=1;} function flipvoff(x) {document[x].filters.flipv.enabled=0;} </script> <title>filtri</title> <style type="text/css"> img { width: 80px; } </style> <head> <title>immagini</title> </head> <body> <img border="0" hspace="0" name="immagine1" onmouseout="alphaoff( immagine1 )" onmouseover="alphaon( immagine1 )" src="raissa.jpg" style="filter: alpha(opacity=50)"> <img border="0" hspace="0" name="immagine2" onmouseout="bluroff( immagine2 )" onmouseover="bluron( immagine2 )" src="raissa.jpg" style="filter: blur(enabled=0)"> <img border="0" hspace="0" name="immagine3" onmouseout="lightoff( immagine3 )" onmouseover="lighton( immagine3 )" src="raissa.jpg" style="filter: light(enabled=0)"> <img border="0" hspace="0" name="immagine4" onmouseout="waveoff( immagine4 )" onmouseover="waveon( immagine4 )" src="raissa.jpg" style="filter: wave(freq=3, lightstrength=40, strength=4, enabled=0)"> <img border="0" hspace="0" name="immagine5" onmouseout="fliphoff( immagine5 )" onmouseover="fliphon( immagine5 )" src="raissa.jpg" style="filter: fliph(enabled=0)"> <img border="0" hspace="0" name="immagine6" onmouseout="flipvoff( immagine6 )" onmouseover="flipvon( immagine6 )" src="raissa.jpg" style="filter: flipv(enabled=0)"> </body> </html> HTML um 138 di 347

140 All immagine RAISSA.JPG è assegnato il nome immagine1 e un livello di opacità pari a cinquanta. Per opacità s intende quanto visibile sia l immagine all atto del caricamento della pagina. A livelli più bassi corrisponde un immagine più sfocata. Il gestore di eventi onmouseover stabilisce che nel momento in cui il puntatore del mouse entra nell area di immagine la stessa diviene nitida; mentre il gestore onmouseout fa tornare l immagine allo stato iniziale quando il puntatore si sposta. Effetti di transizione Le transizioni di pagina consentono di visualizzare effetti simili ad alcuni cambi immagine televisivi, in altre parole la pagina richiamata non è immediatamente visualizzata ma preceduta da effetti di vario tipo, quali dissolvenze e altre presentazioni. Le transizioni si attivano esclusivamente quando si accede alla pagina da un altro documento o in alternativa quando si esce dalla pagina per visualizzarne un altra. Quindi premendo il tasto aggiorna del browser, questo non sortirà alcun effetto ma sarà necessario tornare alla pagina precedente e cliccare nuovamente sul link. Gli effetti di transizioni possono essere in entrata, page-enter o in uscita, page-exit di pagina. Il codice va inserito tra i TAG <HEAD> e consente diversi effetti. Negli esempi che seguono è stato impostato il valore page-enter per cui gli effetti si producono all entrata della pagina. Box in <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=0)"> Box out <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=1)"> Circle in <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=2)"> Circle out <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=3)"> Wipe up <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=4)"> Wipe down <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=5)"> Wipe right <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=6)"> Wipe left HTML um 139 di 347

141 <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=7)"> Vertical blinds <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=8)"> Horizontal blinds <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=9)"> Checkerboard across <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=10)"> Checkerboard down <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=11)"> Random dissolve <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=12)"> Split vertical in <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=13)"> Split vertical out <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=14)"> Split horizontal in <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=15)"> Split horizontal out <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=16)"> Strips left down <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=17)"> Strips left up <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=18)"> Strips right down <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=19)"> Strips right up <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=20)"> Random bars horizontal <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=21)"> Random bars vertical <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=22)"> Random <meta http-equiv="page-enter" content="revealtrans(duration=4,transition=23)"> Per ottenere degli effetti simili in uscita dalla pagina è sufficiente sostituire a page-enter la dicitura page-exit. Un ultima avvertenza riguarda l impossibilità di usare le transizioni in pagine divise in frame, o per meglio dire all interno dei singoli frameset. Se, infatti, il TAG è inserito nel file principale del frame quello che costruisce e imposta i vari frameset, gli effetti si producono, mentre questo non accade nei singoli frameset. La spiegazione di questo che a prima vista potrebbe apparire come un bug, è nella constatazione che gli effetti di transizioni si producono sull intera schermata del browser e non su una singola parte di essa. Infine va sottolineato che questi effetti si ottengono esclusivamente su Microsoft Internet Explorer. File DEFAULT.HTML <html> <head> <title>transizione</title> </head> <body> <a href = "pippo.html">fai clic qui</a> </body> HTML um 140 di 347

142 </html> File PIPPO.HTML <html> <head> <title>la formattazione del testo </title> <meta http-equiv="page-enter" content="revealtrans(duration=2,transition=22)"> </head> <body> <p>ciao, mondo!</p> <p>ciao, mondo!</p> <p>ciao, mondo!</p> <p>ciao, mondo!</p> </body> </html> CSS-P (CSS Positioning) Il posizionamento degli elementi sullo schermo dipende da tanti fattori. Il tipo degli elementi e la loro dimensione. Il tipo di posizionamento. Le relazioni tra gli elementi del documento. Le informazioni esterne, per esempio la dimensione della finestra in cui visualizzare un immagine. I TAG <div> e <SPAN> permettono di combinare insieme due o più elementi in modo che diventino un unico elemento posizionabile. Gli elementi block level generano un box, gli elementi inline sono distribuiti su più linee. Si può modificare il tipo di elemento con la proprietà DISPLAY, i valori sono BLOCK, INLINE, LIST-ITEM, TABLE e NONE che nasconde l elemento e fa in modo che non occupi spazio nella pagina. I documenti HTML sono posizionati all interno della pagina attraverso uno schema di flusso dei dati. Questo significa che si parte dal margine alto a sinistra del documento e ogni elemento si posiziona in base al precedente, senza possibilità di sovrapporre oggetti. Le specifiche dei CSS-P consentono diversi tipi di posizionamento. HTML um 141 di 347

143 Statico È il posizionamento predefinito dal browser, in altre parole quello tradizionale di HTML, per cui ogni elemento è posizionato in base al flusso di dati del documento. Esegue la disposizione dei box uno dopo l altro verticalmente, la distanza tra due blocchi è determinata dai margini. Gli elementi inline sono disposti orizzontalmente uno dopo l altro, andando a capo quando non c è più spazio. Relativo Tale posizionamento non esce dal flusso di dati, né produce alcuna modifica rispetto agli elementi posizionati in modo statico, assume caratteristiche proprie del posizionamento dinamico quando sono impostate le proprietà LEFT e RIGHT che spostano l elemento a sinistra e in alto di quello che lo precede. Float Serve solo per posizionare box, il box è prima collocato come nel posizionamento statico, poi estratto dal flusso e shiftato a sinistra o a destra. Assoluto Questo tipo di posizionamento consente di astrarre il CSS dal flusso dei dati, consentendo di posizionarlo in qualsiasi punto della pagina, in modo assolutamente indipendente dagli altri elementi che anzi possono essere sovrapposti o sottoposti. I posizionamenti assoluto e relativo consentono agli sviluppatori di sistemare con precisione elementi nel documento, di sovrapporli e attraverso degli script, di muoverli. In questo modo i web designer hanno un controllo sul documento simile a molti strumenti in possesso dei grafici tradizionali. Il tipo di posizionamento dipende dai valori assegnati alla proprietà POSITION che assume i seguenti valori. STATIC default, colloca l elemento nella posizione normale senza considerare le proprietà TOP e LEFT. RELATIVE è il posizionamento relativo. ABSOLUTE è il posizionamento assoluto. FIXED è il posizionamento assoluto rispetto alla finestra. Il tipo di posizionamento dipende dai valori assegnati alla proprietà FLOAT che assume i seguenti valori. LEFT O RIGHT l elemento è considerato di tipo block level ed è spostato a sinistra o a destra all interno del blocco contenitore. NONE default non usa il posizionamento FLOAT. Esempio, posizionamento assoluto. Le misure sono espresse in pixel (px) ma possono essere sostituite con altri valori, tutte fanno riferimento al margine superiore sinistro, il posizionamento è assoluto distanziato dal margine superiore e sinistro di 100 pixel. <html> <head> <title>immagini</title> </head> <body> <div style="position:absolute; top:100px; left:100px"> <img src="raissa.jpg" border="0"> </div> </body> HTML um 142 di 347

144 </html> Esempio, posizionamento relativo. Si tratta di un semplice testo privo di qualsiasi formattazione che il documento interpreta come flusso di elementi, all interno di questo testo s imposta un foglio di stile con posizionamento relativo per le parole sito italiano, con una distanza dall elemento più vicino alla sinistra e in alto di 10 pixel. Si usa la marcatura SPAN al posto di DIV, perché quest ultima è più adatta a quantità corpose di testo, mentre la prima si adatta meglio a frasi brevi come questa. Altra considerazione riguarda il ritorno a capo che DIV impone agli elementi. <html> <head> <title>immagini</title> </head> <body> Ubertini.it è un <span style="position:relative; top:10px; left:10px"> <b> sito italiano></b> </span> sui Sistemi Informatici. </body> </html> Altri parametri impostabili sono WIDTH e HEIGHT che stabiliscono rispettivamente la larghezza per orizzontale e l altezza per verticale del foglio di stile. Il testo è racchiuso in un foglio di stile di dimensioni pari a 100px di altezza e di larghezza. <html> <head> <title>immagini</title> </head> <body> <div style="position:absolute; top:100px; left:100px; width:150px; height:150px"> Ubertini.it è un sito italiano sui Sistemi Informatici. </div> </body> </html> HTML um 143 di 347

145 La proprietà VISIBILITY determina la visibilità di un elemento, può essere impostato su HIDDEN o VISIBLE. <html> <head> <title>css-p</title> <style type="text/css"> img { width: 80px; } </style> </head> <body> <div style="position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden"> <img src="raissa.jpg" border="0"> </div> </body> </html> I CSS-P permettono di sovrapporre immagini, testo ed elementi gli uni agli altri. La gerarchia con la quale tali elementi sono sovrapposti dipende, quando non stabilito diversamente, dalla posizione nel codice HTML. Un elemento posizionato dopo un altro sarà sovrapposto a questo. <html> <head> <title>css-p</title> <style type="text/css"> img { width: 80px; } </style> </head> <body> <div style="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible"> <img src="raissa.jpg" border=0> </div> <div style="position:absolute; top:150px; left:150px; width:200px; height:200px; HTML um 144 di 347

146 visibility:visible"> <img src="raissa.jpg" border=0> </div> </body> </html> Se due o più elementi sono collocati nello stesso posto, l elemento elencato per primo appare sopra. Si può modificare l ordine di posizionamento con la proprietà Z-INDEX che definisce l ordine grafico degli elementi attraverso valori numerici. L elemento principale va impostato come valore positivo 1, mentre gli altri in posizione sottostante con valore negativo -1. Riprendendo l esempio precedente e lasciando inalterato l ordine gerarchico, è possibile che il secondo elemento si sovrapponga al primo grazie alla proprietà Z-INDEX. <html> <head> <title>css-p</title> <style type="text/css"> img { width: 80px; } </style> </head> <body> <div style="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible z-index:1"> <img src="raissa.jpg" border="0"> </div> <div style="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible z-index:2"> <img src="raissa.jpg" border="0"> </div> HTML um 145 di 347

147 </body> </html> La proprietà OVERFLOW permette di gestire, attraverso l uso di scroller, i contenuti degli elementi che eccedono l area impostata con HEIGHT e WIDTH. Perché ciò accada è necessario che la proprietà overflow sia impostata su SCROLL e non su HIDDEN. In questo secondo caso, infatti, gli elementi sono visualizzati limitatamente alla grandezza dell area di ritaglio ma senza lo scroller laterale. <html> <head> <title>immagini</title> </head> <body> <div style="position:absolute; overflow:scroll; float:left; top:10px; left:10px; width:150px; height:100px"> Ubertini.it è un sito italiano sui Sistemi Informatici. </div> </body> </html> <html> <head> <title>immagini</title> </head> <body> <div style="position:absolute; overflow:hidden; float:left; top:150px; left:10px; width:150px; height:100px"> Ubertini.it è un sito italiano sui Sistemi Informatici. </div> </body> </html> Tutti gli elementi supportano il posizionamento statico e relativo. Questi supportano solo quello assoluto. Applet, Button, Div, Fieldset, Iframe, IMG, Input, Object, Select, Span, Table, Textarea. HTML um 146 di 347

148 Esempio, creare titoli con effetto ombreggiato, è possibile in HTML classico solo con il ricorso a immagini create con apposite applicazioni di web grafica o fotoritocco. Ma la presenza d immagini appesantisce la pagina. I CSS-P ottengono lo stesso risultato senza usare immagini ma semplice testo. Si crea un testo assegnando uno stile, una grandezza e una certa posizione assoluta nella pagina. <html> <head> <title>immagini</title> </head> <body> <div style="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px; color:black; z-index:1"> Ubertini.it. </div> </body> </html> Per il testo si è usato il font Impact di grandezza pari a 100 pixel e colore nero, distanziato dal margine sinistro e superiore di 10 pixel. La proprietà Z-INDEX è impostata sul valore positivo 1. Ma si tratta di un testo nero senza ombreggiatura, per inserire l ombra si deve aggiungere il codice seguente. <html> <head> <title>immagini</title> </head> <body> <div style="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px; color:black; z-index:1"> Ubertini.it </div> <div style="position:absolute; font-size:100px; font-family:impact; top:15px; left:15px; color:gray; z-index:-1"> Ubertini.it </div> </body> </html> HTML um 147 di 347

149 Il testo rimane di uguale grandezza e stile ma cambia il colore, dal black precedente al gray attuale. La distanza dello stile dal margine superiore e sinistro aumenta rispettivamente di 5 pixel e la proprietà Z-INDEX è impostata sul valore negativo -1. Tutto questo crea il primo testo sovrapposto al secondo che essendo distanziato di 5 pixel ma di uguale dimensione crea un effetto ombreggiato. CSS I fogli di stile esterni o collegati sono quelli che meglio rispondono alle esigenze degli sviluppatori e soprattutto quelli che meglio interpretano la filosofia dei fogli di stile. Per comprendere pienamente le peculiarità dei CSS esterni si pensi ad un sito di grandi dimensioni con 1000 pagine HTML e un certo tipo di formattazione del testo. Improvvisamente esigenze estetiche impongono di modificare colore di sfondo, tipo di carattere e allineamento del testo. Si presentano tre casi. 1. Il sito è costruito in HTML classico, per cui sarà necessario agire su ogni singola marcatura di ognuna delle 1000 pagine. 2. Il sito è costruito adottando fogli di stile in linea, per cui anche in questo caso sarà necessario agire su tutte le singole marcature di ognuna delle 1000 pagine. 3. Il sito è costruito con i fogli di stile incorporati, per cui si dovrà comunque modificare l intestazione di stile di 1000 documenti, anche se non si dovrà agire sui singoli attributi della pagina che rimangono identici. Seppure l ultimo espediente limita notevolmente il lavoro di aggiornamento rispetto ai primi due punti, si tratta pur sempre di agire su un numero elevato di documenti. La soluzione a questo problema è che gli stili dei singoli marcatori siano raggruppati in un documento indipendente dal resto delle pagine e da queste semplicemente richiamati con una semplice riga di codice. In questo modo una modifica sul file CSS genera automaticamente la stessa modifica su tutti i documenti che lo richiamano. Sono fogli di stile a cascata perché in una singola pagina HTML si possono usare tipi diversi di fogli di stile, il browser applica gli stili definiti seguendo un ordine d interpretazione prestabilito a cascata. L ordine di priorità dalla più bassa alla più alta è il seguente. 1. Stili di default applicati dal browser. 2. Fogli di stile collegati. 3. Fogli di stile incorporati. 4. Stili in linea. File PROVA.HTML <html> <head> <title>fogli di stile e CSS</title> <link rel="stylesheet" type ="text/css" href="stile.css"> <style> p {background-color:yellow} </style> </head> <body> <h1> Uso dei fogli di stile CSS</h1> <p>l ordine di priorità dalla più bassa alla più alta è il seguente.</p> <ul> <li style="font-style:italic;font-size:1em">stili di default applicati dal browser.</li> HTML um 148 di 347

150 <li>fogli di stile collegati.</li> <li>fogli di stile incorporati.</li> <li>stili in linea.</li> </ul> </body> </html> File STILE.CSS h1 {font-size :40px;text-align:center} ul {list-style-type:square} li {font-size:1.5em} RAGGRUPPARE E IDENTIFICARE ELEMENTI I TAG <div> e <SPAN> e gli attributi ID e CLASS offrono un meccanismo per aggiungere struttura a un documento. Il TAG <div> contrazione di division, è un elemento BLOCK LEVEL usato per raggruppare elementi. Il TAG <SPAN> è un elemento INLINE usato per creare un nuovo elemento come parte di un altro elemento. L attributo ID assegna un nome a un elemento. L attributo CLASS permette di assegnare una classe a degli elementi per raggrupparli. REGOLE DEI FOGLI DI STILE Una regola CSS è composta da un selettore e almeno una dichiarazione, più dichiarazioni si separano con il ;. Il selettore permette di selezionare uno o più elementi del documento. La dichiarazione è composta da una proprietà e un valore. CSS non è case sensitive. Commento: /* commento */. Ereditarietà Gli elementi del documento hanno una struttura ad albero, un elemento contenuto in un HTML um 149 di 347

151 altro documento è figlio dell elemento in cui è contenuto. Le proprietà sono ereditate di genitore in figlio. Per esempio, in un documento HTML si può impostare uno stile di default da applicare a tutti gli elementi del documento impostando una definizione di stile per l elemento <BODY> che contiene tutti gli elementi della pagina, questa definizione è ereditata da tutti gli altri elementi. Non tutti gli stili e le classi posseggono questa caratteristica, per esempio per le tabelle il TAG <table> non eredita gli stili e necessita una ridefinizione a sé. Selettore È costituito da due oggetti. 1. Un TAG HTML. 2. Un identificatore di elemento, è il valore dell attributo ID di un elemento. I selettori contestuali indicano ogni elemento che è discendente di un altro. <html> <head> <title>fogli di stile e CSS</title> <style type="text/css"> #uno{ background:yellow} </style> </head> <body> <p id="uno">primo paragrafo.</p> <p>secondo paragrafo.</p> <p>terzo paragrafo.</p> <ul> </body> </html> HTML um 150 di 347

152 Classe L uso delle classi permette di applicare formattazioni diverse ad elementi dello stesso tipo, assegnando una classe al TAG HTML che definisce l elemento. Nel documento si specifica la classe e quindi lo stile relativo con l attributo CLASS. Se una classe non esiste o non contiene parametri, il browser ignora il comando e applica le impostazioni di default. <html> <head> <title>classe</title> <style type="text/css"> h1.sinistra {text-align:left} h1.destra {text-align:right} </style> </head> <body> <h1 class="sinistra">allineato a sinistra</h1> <h1 class="destra">allineato a destra</h1> </body> </html> Si possono anche progettare classi globali utilizzabili da tutti gli elementi. <html> <head> <title>classe globale</title> <style type="text/css">.grande {font-size:20pt}.piccolo {font-size:10pt} </style> </head> <body> <h1 class="grande">titolo grande</h1> <p class="grande">paragrafo grande</p> <h1 class="piccolo">titolo piccolo</h1> <p class="piccolo">paragrafo piccolo</p> </body> </html> HTML um 151 di 347

153 Pseudo Classi Permettono di differenziare diversi stati di uno stesso elemento, anche in base al comportamento dell utente. Il TAG <A> permette di usare quattro pseudo classi che permettono di modificare lo stile dei diversi stati di un collegamento ipertestuale: a:link, a:visited, a:active, a.hover. <html> <head> <title>pseudoclasse</title> <style type="text/css"> a {text-decoration:none} a:visted {font-style:italic} a:hover {color:red;text-transform:uppercase} </style> </head> <body> <h1>link</h1> <a href="1.html">stili in linea.</a><br/> <a href="2.html">fogli stili incorporati.</a><br/> <a href="3.html">fogli stili collegati.</a><br/> </body> </html> HTML um 152 di 347

154 Pseudo Elementi Sono usati per indirizzare sotto parti di elementi: first-line, first-letter. <html> <head> <title>pseudoelementi</title> <style type="text/css"> h1:first-letter{font-size:50px} p:first-line {font-style:italic} </style> </head> <body> <h1>pseudoelementi</h1> <p>sono usati per indirizzare sotto parti di elementi; servono per effetti tipografici</p> </body> </html> TABELLA È un elemento block level, la proprietà DISPLAY:INLINE-TABLE permette di utilizzare una tabella come elemento INLINE. Si possono definire le colonne con il TAG <COL>. Righe e colonne possono essere organizzate in gruppi usando le classi, gli elementi di HTML um 153 di 347

155 livello più basso ereditano le proprietà di quelli di livello più alto. Si può stabilire l allineamento verticale o orizzontale dei dati in una cella con le proprietà: vertical-align (baseline, top, bottom, middler), text-allgn (center, left, right). Si può nascondere una riga o una colonna con la proprietà display:none. <html> <head> <title>tabella</title> <style type="text/css"> table {text-align:center} caption {text-align:left} #col1 {font-style:italic;background:yellow} </style> </head> <body> <h1>tabella</h1> <table> <caption>ruote delle biciclette</caption> <col id="col1"/><col id="col2" /> <tr><th>bicicletta</th><th>numero ruote</th></tr> <tr><td>velocipede</td><td>1</td></tr> <tr><td>bici da corsa</td><td>2</td></tr> <tr><td>triciclo</td><td>3</td></tr> </table> </body> </html> Il box in cui è visualizzata la tabella contiene anche la didascalia. La tabella ha contenuto, bordo e margini. Le celle hanno contenuto, bordo e padding ma non hanno margini. L impostazione del bordo dipende dalla proprietà border-collapse (separate, collapse). Per quanto riguarda gli sfondi, la tabella è vista come se fosse su sei livelli, dal basso verso l alto: la tabella, gruppi di colonne, colonne, gruppi di righe, righe e celle. HTML um 154 di 347

156 <html> <head> <title>tabella</title> <style type="text/css"> table {text-align:center;border-style:double;border-color:red} caption {text-align:left} #col1 {font-style:italic;background:yellow} th {background:red;padding:10px} td {border-style:solid;border-color:black} </style> </head> <body> <h1>tabella</h1> <table> <caption>ruote delle biciclette</caption> <col id="col1"/><col id="col2" /> <tr><th>bicicletta</th><th>numero ruote</th></tr> <tr><td>velocipede</td><td>1</td></tr> <tr><td>bici da corsa</td><td>2</td></tr> <tr><td>triciclo</td><td>3</td></tr> </table> </body> </html> Si può modificare l aspetto dei bordi impostando anche la seguente proprietà. table {text-align:center;border-style:double;border-color:red;border-collapse:collapse} CSS sui diversi dispositivi Un utilissima funzione dei CSS è la possibilità di essere applicati solo sui dispositivi, media, specificati dall autore. HTML um 155 di 347

157 La sintassi HTML da utilizzare è la seguente. <link rel="stylesheet" type ="text/css" href="stile.css" media = Screen > Il codice precedente associa il foglio di stile solo, in teoria, ai browser standard per PC desktop e portatili. I valori dell attributo media sono i seguenti. Screen, desktop e laptop. Handheld, PDA e smartphone. Print, stampanti. Braille, browser braille. Embossed, stampanti braille. Projection, proiezioni. Speech, sintetizzatori vocali. TTY, telescriventi. TV, televisioni. All, tutti i dispositivi. Sebbene il numero dei dispositivi gestibili tramite CSS sia notevole, soltanto i primi tre sono supportati in maniera sufficiente. Il media screen è quello standard cui si fa riferimento. Il media handheld è specifico per i palmari ma alcuni browser per palmari tentano, spesso con scarso successo, d interpretare anche i fogli marcati con screen, per cui si preferisce in genere marcare con handheld sia il foglio per lo schermo sia quello per il palmare e poi usare quest ultimo per sovrascrivere le istruzioni del primo. Il media print codifica la pagina per la stampa. ESEMPI Progettare un foglio di stile con sfondo giallo chiaro, per il testo utilizzare il tipo carattere Verdana, per le intestazioni il tipo carattere Times New Roman con colore marrone. a:link {color: rgb(51,153,255); } a:visited {color: rgb(51,102,204); } a:active {color: rgb(255,153,0);} table {table-border-color-light: rgb(255,204,102); table-border-color-dark: rgb(204,153,102); } body {font-family: Verdana, Arial, Helvetica; background-color: rgb(255,255,204); color: rgb(102,102,51); } h1 {font-family: Times New Roman, Times; color: rgb(153,153,51); } h2 {font-family: Times New Roman, Times; color: rgb(204,153,0); } h3 {font-family: Times New Roman, Times; color: rgb(0,102,153); HTML um 156 di 347

158 } h4 {font-family: Times New Roman, Times; color: rgb(153,153,0); } h5 {font-family: Times New Roman, Times; color: rgb(255,153,0); } h6 {font-family: Times New Roman, Times; color: rgb(51,102,204); } Progettare un foglio di stile con sfondo nero, per il testo utilizzare il tipo carattere Verdana con colore bianco, per le intestazioni utilizzare il tipo carattere Verdana, i collegamenti sono visualizzati in arancione. a:link {color: rgb(255,204,0); } a:visited {color: rgb(255,255,153); } a:active {color: rgb(255,51,0);} body {font-family: Verdana, Arial, Helvetica; background-color: rgb(0,0,0); color: rgb(255,255,255); } table {table-border-color-light: rgb(255,255,102); table-border-color-dark: rgb(0,0,0); } h1, h2, h3, h4, h5, h6 {font-family: Verdana, Arial, Helvetica;} h1 {color: rgb(255,204,0);} h2 {color: rgb(255,255,255);} h3 {color: rgb(204,51,0); } h4 {color: rgb(255,255,153);} h5 {color: rgb(255,255,0);} h6 {color: rgb(255,255,255);} Progettare un foglio di stile con sfondo verde oliva chiaro, per il testo utilizzare il tipo carattere Arial, per le intestazioni utilizzare il tipo carattere Times New Roman. a:link {color: rgb(0,102,153); } a:visited {color: rgb(0,153,102); } a:active {color: rgb(0,102,102);} body {font-family: Arial, Helvetica; background-color: rgb(204,204,153); color: rgb(0,51,51); } table {table-border-color-light: rgb(102,204,204); table-border-color-dark: rgb(0,102,102); } h1, h2, h3, h4, h5, h6 {font-family: Times New Roman, Times;} HTML um 157 di 347

159 h1 {color: rgb(0,153,153);} h2 {color: rgb(102,102,102); } h3 {color: rgb(153,153,102); } h4 {color: rgb(0,153,153);} h5 {color: rgb(102,102,102);} h6 {color: rgb(153,153,102);} Progettare un foglio di stile con sfondo azzurro mare, per il testo utilizzare il tipo carattere Garamond con colore giallo, per le intestazioni utilizzare il tipo carattere Verdana, i collegamenti sono visualizzati in arancione. a:link {color: rgb(255,204,0);} a:visited {color: rgb(153,204,204); } a:active {color: rgb(102,255,0);} body {font-family: Garamond, Times New Roman, Times; background-color: rgb(51,102,204); color: rgb(255,255,153); } table {table-border-color-light: rgb(153,255,204); table-border-color-dark: rgb(0,0,51); } h1, h2, h3, h4, h5, h6 {font-family: Verdana, Arial, Helvetica;} h1 {color: rgb(255,204,0);} h2 {color: rgb(153,255,51); } h3 {color: rgb(0,255,204); } h4 {color: rgb(255,204,0);} h5 {color: rgb(153,255,51);} h6 {color: rgb(0,255,204);} Progettare un foglio di stile per immagini con bordi arrotondati..div1 { border: 3px solid #ccc; background-color: #ededed; HTML um 158 di 347

160 /* Opera 10, IE9 */ border-radius: 15px-webkit-border-radius: 15px; /* Safari, Chrome */ -moz-border-radius: 15px; /* Firefox */ } Progettare font di ogni tipo per le pagine { font-family: Mega; src: url( topolino.otf ); { font-family: Mega; font-weight: bold; src: url( topolino.otf ); } h1 { font-family: Mega; font-size: 80px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); position:absolute; text-shadow: 2px 8px #eee, -1px -1px #fff; box-shadow: 4px 6px #eee;} p { font-family: Mega; font-size: 14px; margin-top:50px; color:#c33 } Progettare testo con colonne multiple. #colonna { text-align: justify; -moz-column-count: 3; /* Numero di colonne del paragrafo */ -moz-column-gap: 1.5em; -moz-column-rule: 1px solid #c4c8cc; -webkit-column-count: 3; -webkit-column-gap: 1.5em; -webkit-column-rule: 1px solid #c4c8cc; } Progettare pulsanti. h2 { /* proprietà pulsante */ font-size: 80px; line-height: 190px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; text-shadow: rgba(0, 0, 0,.3) 5px 5px 5px; } #container HTML um 159 di 347

161 { /* sfondo (compatibile anche con IE) */ background: #666666; background: -moz-linear-gradient(top, # %,# %, #3A3A3A 51%, # %); /* firefox */ background: -webkit-gradient(linear, left top,left bottom, color-stop(4%,#666666), colorstop(50%,#545454), color-stop(51%,#3a3a3a), colorstop(100%,#131313)); filter: progid:dximagetransform.microsoft.gradient(startcolorstr= #666666, endcolorstr= #131313,GradientType=0 ); /* IE, dimensioni*/ height: 200px; width: 800px; margin: 100px auto; /* ombra */ -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0,.3); -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0,.3); box-shadow: 5px 5px 5px rgba(0, 0, 0,.3); /* bordi arrotondati */ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } PROGETTAZIONE DELLA HOME PAGE Suddividere l home page in riquadri secondo questo modello. A ciascuno dei box corrisponde il TAG <div> e in base alla struttura gerarchica, un <div> potrà contenerne altri annidati al suo interno. Si definisce la formattazione da associare a ciascun box mediante un foglio di stile File STILE.CSS #contenitoregenerale { width:100%;} #intestazione {border:2px solid #000000; background-image:url(fondo.jpg); background-repeat:repeat; color:#000000; HTML um 160 di 347

162 min-height:80px; width:80%; background:white; } #logos {float:left; width:25%; } #titoli {border-left:2px solid #000000; border-right:2px solid #000000; width:44%; text-align:center; float:left; } #logoi {width:31%; float:left; text-align:center; } #menuorizzontale {width:100%; float:left; background:#ffffcc; text-align:center; border-top:2 solid black; padding-top:4px; } #corpo {width:80%; border-left-color:black; border-left-style:solid; border-left-width:2; border-right-color:black; border-right-style:solid; border-right-width:2; border-bottom-color:black; border-bottom-style:solid; border-bottom-width:2; background:#009966; } #contenutocentrale {width:69%; background:white; border-right-color:black; border-right-style:solid; border-right-width:2; float:left; text-align:left; padding-left:5px; padding-top:5px; } #menuverticale {width:31%; HTML um 161 di 347

163 height:100%; background:#009966; font:georgia; font-family:georgia, Times New Roman, Times, serif; font-size:95%; text-align:left; float:left; margin-bottom:0px; padding-bottom:0px; } #footer {width:80%; background:#cccccc; border-bottom-color:black; border-bottom-style:solid; border-bottom-width:2; border-left-color:black; border-left-style:solid; border-left-width:2; border-right-color:black; border-right-style:solid; border-right-width:2; font:georgia; font-family:georgia, Times New Roman, Times, serif; font-size:90%; color:#333333; padding-top:5px; padding-bottom:5px; } File HTMLPAGE1.HTM <html> <head> <title>primo sito</title> <link rel="stylesheet" href ="stile.css" type ="text/css" /> </head> <body> <div id="contenitoregenerale" align="center"> <div id="intestazione"> <div id="logos"><!-- box per il logo di sinistra --> <img src="raissa.jpg" alt="raissa" /> </div> <div id="titoli"><!-- box con i nomi --> <p>titoli</p> <p>titoli</p> <p>titoli</p> <p>titoli</p> </div> <div id="logoi"><!-- box per il logo di destra --> <img src="raissa.jpg" alt="raissa" /> </div> <div id="menuorizzontale"> <p>menu orizzontale</p> </div> HTML um 162 di 347

164 </div> <div id="corpo"> <div id="contenutocentrale"><!-- box per i contenuti --> <p>home Page</p> <p>benvenuti nel sito dei gatti</p> <p>trovi...</p> <p>buona navigazione</p> </div> <div id="menuverticale"> <p>menu verticale</p> <p>menu verticale</p> <p>menu verticale</p> <p>menu verticale</p> </div> </div> <div id="footer"><!-- box per il copyright --> <p>copyright 2010 mail-to: xxxxx@xxxxx.com</p> </div> </div> </body> </html> Il risultato all interno del browser è il seguente. HTML um 163 di 347

165 HTML 5.0 specifiche Non è solo un linguaggio di markup, in realtà si può affermare che trattasi di un insieme di tecnologie finalizzate non più alla creazione di pagine web ma allo sviluppo di vere e proprie applicazioni. È uno standard elaborato dal WHATWG (Web Hypertext Application Technology Working Group) per l esigenza di svecchiare standard quali HTML 4.01 e XHTML 1.0 e di permettere agli sviluppatori di evitare l uso di plugin proprietari alla base delle applicazioni web quali Flash, Microsoft Silverlight e JavaFX. Sviluppo in parallelo di HTML e XHTML, due varianti dello stesso linguaggio, una definita classica (text/html) che sarà riconosciuta come HTML 5.0, l altra come variante di XHTML che sarà individuata come XHTML 5.0. Sette principi base hanno ispirato i redattori dello standard. 1. Compatibilità Il nuovo standard deve poter essere facilmente adottato da chi già lavora con HTML, CSS, DOM (Document Object Model) e JavaScript e dev essere comunque compatibile con i browser più diffusi sul mercato, anche se ormai obsoleti, senza dover utilizzare plugin specifici o work-around diversi da quelli già disponibili. 2. Gestione degli errori La gestione degli errori nel codice non dev essere delegata ai browser o riscritta dagli sviluppatori. 3. Gli utenti non devono essere esposti ad errori del markup La specifica dello standard deve prevedere comportamenti di recovery ben definite per gestire eventuali errori nel markup. 4. Nuove caratteristiche Devono rispondere a precise esigenze pratiche, per esempio possibilità di memorizzare informazioni sul client per evitare il passaggio d informazioni sul cavo e risparmiare banda. Estensione di attributi per l accessibilità dei contenuti. Migliorie ed estensione degli elementi che controllano i moduli. Eliminazione di elementi di scarso o nessun utilizzo effettivo. 5. Scripting Se è possibile specificare markup con le stesse funzionalità, lo scripting non va utilizzato. 6 Indipendente dal dispositivo Bisogna evitare di rendere lo standard dipendente dal device sul quale è utilizzato. 7. Logica open Lo sviluppo dello standard dev essere open e completamente trasparente per il pubblico. Sono stati rimossi i seguenti TAG. <frame> e i relativi <frameset> e <noframes> <font>, <big>, <strike>, <u>, <s>, <basefont>, <tt>, <center> e <dir> perché la funzionalità è ormai scorporata e delegata ai CSS. HTML um 164 di 347

166 Layout Lo storage dei dati in locale crea una cache delle pagine web direttamente nel browser dell utente, questo permette alle applicazioni di lavorare anche offline. Tra le altre cose è stato aggiunto il supporto nativo al drag and drop di elementi nella pagina. È stata, inoltre, semplificata la sintassi relativa al DOCTYPE. <!DOCTYPE> <title>esempio HTML 5.0</title> <p>ciao mondo in HTML 5.0!</p> l TAG <head> e <body> sono comunque presenti nello standard per compatibilità ma non sono più fondamentali. Come fare a rendere questo esempio HTML 5.0 compatibile con i browser che non supportano lo standard, bisogna utilizzare uno strumento esterno come HTML5SHIV che permette ad Internet Explorer di riconoscere i nuovi TAG. <!DOCTYPE> <html> <head> <title>esempio HTML 5.0 </title> <!--[if IE]> <script src=" <![endif]--> </head> <body> <p>ciao mondo in HTML 5.0!</p> </body> </html> HTML 5.0 permette di separare ancor di più la struttura di un documento, definita dal markup vero e proprio, dallo stile applicato al documento e dal suo stesso contenuto: a questo scopo introduce nuovi elementi semantici. Applicazione di regole per una più attenta e precisa definizione della struttura del testo, suddividendola in paragrafi, sezioni e capitoli. HTML um 165 di 347

167 Gli elementi che costituiscono la struttura della pagina sono i seguenti e sostituiscono i div. <header> contiene l intestazione della sezione di una pagina, sebbene sia adatto a ospitare anche altri elementi, come un form di ricerca o una tavola dei contenuti. <footer> si adatta ad un piè di pagina, con link a documenti collegati, informazioni di copyright, informazioni accessorie sulla sezione cui si riferisce. Esempio, uso del TAG header. <!DOCTYPE> <html> <title>esempio Header e Footer</title> <body> <header> <h1>ciao, mondo!</h1> <p>html 5.0</p> </header> </body> </html> La visualizzazione è identica in HTML 1.0 ma se si applicha un foglio di stile che allinea al centro della pagina l intero header si ottiene. L allineamento centrato del TAG insieme al prossimo TAG: il TAG <footer> si comporta allo stesso modo. File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Header e Footer</title> <link rel="stylesheet" href="css/style.css" /> <body> HTML um 166 di 347

168 <header> <h1>ciao, mondo!</h1> <p>html 5.0</p> </header> <p> Testo della pagina</p> <footer> <h1>copyright urm</h1> <p>tutti i diritti riservati.</p> </footer> </body> </html> File STYLE.CSS header { text-align: center; } footer { text-align: center; } Sempre nell intestazioni di pagina o di sezioni di pagina, è stato introdotto il TAG <hgroup> che consente di raggruppare una serie di <header> per impostarne le caratteristiche in modo centralizzato. Il codice seguente raggruppa due classici TAG <header>, <h1> e <h2> all interno di un gruppo a cui è assegnato lo stile per allineare a destra il tutto. File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Hgroup</title> <link rel="stylesheet" href="css/style.css" /> <body> <hgroup> <h1>ciao, mondo!</h1> <h2>html 5.0</h2> </hgroup> HTML um 167 di 347

169 </body> </html> File STYLE.CSS hgroup { text-align: right; color: red; } Un ulteriore raggruppamento di TAG destinato a rappresentare una sezione di contenuto, è il TAG <section> l obiettivo è il medesimo, ovvero tenere insieme una serie di TAG per assegnarne attributi comuni. Menu di navigazione Il TAG <nav> riunisce le varie voci di menu rappresentate dal TAG <anchor>. Esempio, spostarsi fra le tre pagine precedenti con le relative àncore nei menu. File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Nav</title> <link rel="stylesheet" href="css/style.css" /> <body> <nav> <a href= Primo.html >Primo</a><br /> <a href= Secondo.html >Secondo</a><br /> <a href= Terzo.html >Terzo</a> </nav> </body> </html> File STYLE.CSS nav a { color: red; } HTML um 168 di 347

170 Non utilizzare il TAG <nav> per qualunque gruppo di link all interno delle pagine ma inserirvi solo i blocchi principali che consentono all utente la navigazione principale. È possibile referenziare articoli esterni alla pagina tramite il TAG <article> permette d identificare in modo chiaro e univoco i link verso risorse esterne di tipo articolo, il post di un blog o anche solo un commento, l articolo di un magazine o qualsiasi altro contenuto. Non confondendo il TAG con link di tipo diverso; inoltre al TAG può essere assegnato un attributo di stile univoco. Esempio, al TAG <article> assegnare un attributo di stile per identificare i link verso articoli esterni, lo stile non è assegnato al menu di navigazione e agli altri link della pagina. File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Article</title> <link rel="stylesheet" href="css/style.css" /> <body> <nav> <a href= Primo.html >Primo</a> <a href= Secondo.html >Secondo</a> <a href= Terzo.html >Terzo</a> </nav> <br /> <section> <p> <article> <a href=" Programmi di Sistemi III, IV e V</a><br /> Tre documenti </article> </p> <p> <article> <a href=" Programmi d'informatica III, IV e V</a><br /> Tre documenti </article> </p> </section> </body> </html> File STYLE.CSS nav a { color: Red; HTML um 169 di 347

171 } article { color:green } article a { color: blue; } Nel caso si vogliano creare sezioni dipendenti dal testo di una pagina, come ad esempio le note nei box laterali, oppure le note inserite nel testo dei libri più comuni, è possibile marcare il contenuto con il TAG <aside> l effetto grafico dev essere poi impostato come per tutti i TAG attraverso uno stile. Esempio, inserire due note nel testo all interno di una pagina e assegnare uno stile. File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Aside</title> <link rel="stylesheet" href="css/style.css" /> <body> <header> <h1>presentazione</h1> </header> <br /> Nel marzo del 1989 Tim Berners-Lee tenne ufficialmente a battesimo il WWW che doveva servire a tutte le comunità di ricercatori e scienziati sparsi per il mondo, da cui Worldwide, per poter scambiare nel più breve tempo possibile e nella maniera più completa le proprie esperienze sulle ricerche in corso. <aside> HTML5 non è ancora uno standard quindi i contenuti presentati possono variare. </aside> <br /> Tim Berners-Lee insieme con Robert Cailliau scrisse il primo client WWW <aside> Tecnologie: WWW (World Wide Web), URL (Uniform Resource Locator). </aside> </body> </html> File STYLE.CSS HTML um 170 di 347

172 aside { color: Green; position: relative; margin-top: 20; margin-left: 100; } In pratica, questi nuovi TAG, così come il TAG <article> e le sezioni <header> e <footer> consentono d identificare e quindi strutturare il contenuto in modo più chiaro ma non hanno un loro stile di default come invece accade per il TAG <nav>. I nuovi TAG sostituiscono le <div>, la loro denominazione, inoltre, riprende la denominazione assegnata agli attributi id e class delle <div>, ciò per favorire una facile lettura del codice e garantire la retrocompatibilità delle nuove applicazioni. MULTIMEDIALITÀ Particolare attenzione è stata riservata ai contenuti multimediali come audio e video. Da sempre è possibile inserire nelle pagine un suono di sottofondo ed è possibile vedere video tramite i classici plugin, inoltre, il supporto nativo dei video consente un perfetto adattamento grafico alla pagina che li ospita. L idea di HTML 5.0 è poter gestire queste tipologie di contenuto utilizzando solamente TAG standard e non dover ricorrere a plugin esterni. Lo standard raccomanda l uso di CODEC aperti sia per l audio sia per il video: per esempio Ogg Vorbis per l audio, alternativa open source a MP3 e Theora per i video, alternativa open source a MPEG-4, comunque le funzionalità sono indipendenti dai CODEC utilizzati. Esempio, attivare il microfono del PC e dettare il contenuto di un modulo. È sufficiente aggiungere un attributo al campo input del form, il modulo è utilizzabile, anche usando browser che non offrono il supporto al riconoscimento vocale, è buona regola aggiungere un avviso per gli utenti. HTML um 171 di 347

173 File ESEMPIO.HTML <!DOCTYPE> <html> <head> <title>esempio Microfono</title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="script/script.js"> </script> </head> <body> <form action="#"> Clicca sul microfono e parla!<br /> <input type="text" name="parla" x-webkit-speech="x-webkit-speech" /> </form> </body> </html> File STYLE.CSS * { font-family:arial, Helvetica, sans-serif; font-size:25px; } body { width:960px; margin:20px auto; } File SCRIPT.JS if (document.createelement("input").webkitspeech === undefined) { alert("l'input vocale non è supportato dal tuo browser!"); } All interno del TAG <video> si può inserire del testo di aiuto agli utenti che dispongono di HTML um 172 di 347

174 browser precedenti. Premendo il tasto destro del mouse sulla finestra del video, è possibile attivare un menu contestuale per riprodurre, mettere in pausa, disattivare o attivare l audio, ripetere il video o attivare i controlli di navigazione sul video stesso. È inoltre possibile copiare l URL del video o salvare il video stesso in locale. Il TAG <audio si presenta in modo quasi identico e consente di riprodurre contenuti audio presentando all utente i controlli per riprodurre il brano. Gli attributi previsti per entrambi i TAG sono i seguenti. autoplay: fa partire la riproduzione in modo automatico. controls: presenta all utente la barra di controllo della riproduzione. autobuffer istruisce il browser sulla gestione del buffer del file. loop: per riprodurre in modo continuo il brano. preload: indica al browser d iniziare a caricare l audio durante il caricamento della pagina, in modo da avere il contenuto già pronto se l utente decide di riprodurlo, l attributo è ignorato se è stata impostata la riproduzione automatica, autoplay. src: indirizzo da cui prelevare il file multimediale Il TAG <video> ha anche la possibilità di specificare la dimensione del video dello schermo visibile nella pagina stessa tramite gli attributi width e height. Al posto di utilizzare i TAG <audio> e <video> è possibile utilizzare il TAG <source> per riprodurre contenuti multimediali in automatico. Non è possibile utilizzare gli attributi indicati in precedenza per gestire il file in questione. Il TAG <source> consente, infatti, d impostare solamente i seguenti attributi. media: definisce il tipo di risorsa per decidere se effetuarne il download o meno tramite l impostazione del valore media query. src: rappresenta l indirizzo da cui prelevare il video. type: impostabile ad un valore numerico definisce il punto da cui far partire la riproduzione. Il TAG <video> e il TAG <audio> sono entrambi derivati da un TAG padre denominato HTMLMedialElement, quindi molti degli attributi non sono direttamente esposti dal VideoElement ma dalla classe padre. L interfaccia del DOM che definisce l elemento video è la seguente. interface HTMLVideoElement : HTMLMediaElement { attribute DOMString width; attribute DOMString height; readonly attribute unsigned long videowidth; readonly attribute unsigned long videoheight; attribute DOMString poster; }; È comunque possibile utilizzare le API per gestire con maggiore autonomia la grafica e l interfaccia del filmato. Per farlo basta aggiungere uno script in cui sia inizializzata la variabile video. Esempio, inserire un video. File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Video</title> <script type="text/javascript" src="script/script.js"> </script> <body> <header> HTML um 173 di 347

175 <h1>video</h1> </header> <div> <video controls src="video.ogg" id="myvideo">theora decoder not found</video> <video src ="video.ogg" id="myvideo" >Decoder not found</video><br> <!-- codice per player flash, da inserire per mantenere retrocompatibilità --> <input type="button" onclick="video.play()" value="play" /> <input type="button" onclick="video.pause()" value="pause" /> <input type="button" onclick="video.stop();" value="stop" /> <input type="button" onclick="video. currenttime = 0;" value="rewind" /> </div> </body> </html> File SCRIPT.JS var video = document.getelementbyid("myvideo"); Formato video Il formato video WebM è l alternativa open source ai formati FLV ed MP4, consente un risparmio di banda e risorse server per chi realizza servizi di streaming o hosting video e supera la necessità d impiegare appositi plugin per browser. Il formato multimediale WebM è definito tecnicamente come contenitore per audio e video. Come i formati AVI o MP4, anch essi contenitori multimediali, anche un file WebM contiene un flusso video abbinato ad un flusso audio, ciascuno dei quali compresso utilizzando uno specifico CODEC. Il formato video di compressione del WebM è il VP8 che garantisce grandissime prestazioni e un rapporto tra la qualità video finale e le dimensioni dei file eccezionale, è di libero utilizzo, mentre i CODEC l MP4 o il DVX sono proprietari. Dal punto di vista dell audio, il flusso è compresso utilizzando il CODEC Vorbis, più efficiente di MP3. Lo standard WebM prevede una grande flessibilità per quanto riguarda la risoluzione dei HTML um 174 di 347

176 filmati, il framerate e il bitrate audio e video, flessibilità che lo rende adatto per la riproduzione su qualsiasi dispositivo, dal cellulare alla TV HD. Per riprodurre sul PC un file WEBM, è necessario installare i CODEC specifici. Per Windows, esistono specifici filtri Direct Show che consentono di vedere i file WebM direttamente all interno di Windows Media Player e allo stesso modo di modificare questi file con Windows Live Movie Maker. La soluzione ottimale per consentire la riproduzione di file WebM e di altri formati video, è quella d installare il pacchetto aggiornato di CODEC K-lite, oppure, installare player che sono già compatibili con questo formato, come VLC. Per la fruizione, aggiungere tra le configurazioni multimediali del server le estensioni di file video/webm WEBM e audio/webm WEBA all elenco dei file multimediali MIME (Multipurpose Internet Mail Extensions). Esempio, inserire un audio. <!DOCTYPE> <html> <title>esempio Audio MP3</title> <body> <header> <h1>audio</h1> </header> <audio controls autobuffer> <source src="quella carezza della sera.mp3" /> <!-- Codice per player flash, da inserire per mantenere retrocompatibilità --> </audio> </body> </html> Esempio, realizzare un player audio per i file che devono risiedere sul server dove è collocata la pagina HTML, mostra cinque canzoni e al clic su ognuna di essa oltre alla riproduzione è mostrata una descrizione del brano. Al clic sul link, la funzione playfile mette in pausa il player, non esiste stop e carica il nuovo file da riprodurre. Una volta caricato il file la funzione inizia a riprodurlo, inserendo la descrizione nell apposita <div> situata sotto il player. HTML um 175 di 347

177 File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Audio</title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="script/script.js"> </script> <body> <header> <h1>audio</h1> </header> <div style="float:left"> <ul id="playlist"> <li><a href="javascript:playfile('affida una lacrima al vento.mp3','adamo - Affida una lacrima al vento')">canzone N 1</a></li> <li><a href="javascript:playfile('la notte.mp3','adamo - La notte')">canzone N 2</a></li> <li><a href="javascript:playfile('felicita.mp3','al Bano e Romina Power - Felicita')">Canzone N 3</a></li> <li><a href="javascript:playfile('tu sei l'unica donna per me.mp3','alan Sorrenti - Tu sei l'unica donna per me')">canzone N 4</a></li> <li><a href="javascript:playfile('concerto.mp3','alunni Del Sole - Concerto')">Canzone N 5</a></li> </ul> </div> <div style="margin-left:250px"> <audio id="playeraudio" controls autobuffer> <!-- codice per player flash, da inserire per mantenere retrocompatibilità --> </audio> <div id="descrizione"> </div> </div> </body> </html> File STYLE.CSS body { font-family:arial, Helvetica, sans-serif; font-size:20px; } #playlist { list-style-type:none; margin:0; padding:0; } #playlist li { width:200px; padding:10px; background-color:#ccc; border:1px solid #000; margin-bottom:10px; } #playlist li a { color: #333; HTML um 176 di 347

178 text-decoration:none } #playlist li a:hover { color: #fff; text-decoration:none } File SCRIPT.JS function playfile(url, desc) { var player = document.getelementbyid("playeraudio"); player.pause(); player.setattribute('src', url); player.load() player.addeventlistener("load", function () { player.play(); document.getelementbyid("descrizione").innerhtml = desc; }) } GEOLOCALIZZAZIONE Con l avvento delle tecnologie di localizzazione negli smartphone è possibile permettere agli utenti di segnalare la propria posizione e utilizzarla per aggiungerla ad una mappa. Il metodo da utilizzare è getcurrentposition(successcallback, errorcallback), facente parte dell oggetto navigator.location. Le due opzioni della funzione si occupano rispettivamente delle operazioni da effettuare in caso di successo della sua esecuzione e in caso di errore. Con i metodi getcurrentposition e watchposition si può trovare la posizione attuale e monitorarla nel corso del tempo, aggiornando la posizione sulla mappa se si è in HTML um 177 di 347

179 movimento con watchposition. Questo tipo di script non funziona in locale ma bisogna effettuare l upload su un server web; inoltre, è necessario che l utente consenta al browser di rivelare la posizione. Esempio, restituire un alert con le coordinate geografiche del visitatore. File ESEMPIO.HTML <!DOCTYPE> <html> <head> <title>esempio Geolocalizzazione</title> <script type="text/javascript" src="script/script.js"> </script> </head> <body> <input id="cliccami" type="button" value="geolocalizzazione" onclick="geolocation()"/> <br> <br> <div id="mappa" style="width:500px;height:200px"></div> <script type="text/javascript" src=" <script type="text/javascript" src="script/script.js"> </script> </body> </html> File SCRIPT.JS document.getelementbyid('cliccami').addeventlistener('click', function () { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showposition); navigator.geolocation.watchposition(showposition); } else { console.log("geolocation non supportata"); } function showposition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var options = { zoom: 13, center: new google.maps.latlng(lat, lng), maptypeid: google.maps.maptypeid.roadmap } var map = new google.maps.map(document.getelementbyid("mappa"), options); var marker = new google.maps.marker({ position: new google.maps.latlng(lat, lng) }); marker.setmap(map); } }, false); HTML um 178 di 347

180 LS (LOCAL STORAGE) E SS (SESSION STORAGE) I cookie sono lo strumento più utilizzato dai programmatori per gestire le sessioni di autenticazione sui siti e per conservare informazioni utente all interno del browser. Tuttavia essi presentano dei difetti di sicurezza perché sono scambiati in chiaro tra il client e il server e quindi possono essere intercettati. Per esempio, un client vuole accedere in modo sicuro ad un server. Per fare questo deve scrivere il proprio nome utente e la password nell apposito modulo. A questo punto, il server verifica che le credenziali siano corrette e poi genera una stringa speciale che possa identificare il client. Il server invia la stringa al client, il quale salva la stringa ricevuta come cookie. Ogni volta che il client vuole accedere ad una pagina presente nell area riservata del server, non dovrà eseguire nuovamente l autenticazione: gli basterà inviare la stringa contenuta nel cookie e il server la riconoscerà immediatamente, dandogli la possibilità di accedere all area protetta. Se un malintenzionato s inserisse nella comunicazione tra il server e il client potrebbe leggere il contenuto del cookie e interrogare il server fornendogli la stringa del cookie. In questo modo il server sarebbe convinto di ricevere la richiesta delle pagine protette da parte del client, mentre in realtà è stato il malintenzionato ad accedervi. HTML 5.0 introduce l oggetto LS, è uno spazio che le applicazioni web possono usare per archiviare dati ed è gestito direttamente dal browser web. Si tratta di un sistema molto più sicuro, anche perchè una determinata informazione è accessibile solo alla applicazione che l ha scritta ed è molto più complicata da intercettare. La sua principale forza sta proprio nel fatto che è gestita dal client e non dal server, come accadeva con i cookie: questa caratteristica è definita same origin restriction. Per questo motivo, però, non può essere controllato da un linguaggio di programmazione server-side ed è necessario utilizzare un linguaggio interpretato dal client quindi client-side come JavaScript. L API di HTML 5.0 offre due oggetti. 1. sessionstorage: permette di tenere i dati in memoria per la vita di una sola sessione e in una sola finestra: aprendo la stessa applicazione in una nuova finestra, è avviata una nuova sessione e i dati della prima non saranno disponibili. 2. localstorage: fa riferimento ad un dato dominio e rende disponibili i dati a tutte le finestre del browser, inoltre, i dati rimangono permanentemente in memoria finchè non esplicitamente eliminati dall applicazione o dall utente, con i tool del browser, il limite di spazio è di 5 MB. sessionstorage e localstorage condividono la stessa API JavaScript. LS, un vero e proprio database engine su cui è possibile fare query SQL (Structured Query Language). L oggetto localstorage permette d immagazzinare dati nel formato chiave/valore e cancellarli con delle chiamate JavaScript. Questo significa che i dati degli utenti sono salvati sul PC all interno del browser e che sono disponibili solo a loro, solo su quel PC e in quel particolare browser. HTML um 179 di 347

181 File ESEMPIO.HTML <!DOCTYPE> <html> <head> <title>esempio LS</title> <script type="text/javascript" src="script/script.js"> </script> </head> <body> </body> </html> File SCRIPT.JS if (typeof (localstorage) == 'undefined') alert('il tuo browser non supporta il localstorage HTML 5.0'); else { try { localstorage.setitem("name", "Ciao, mondo!!"); } // salva una coppia chiave/valore catch (e) { if (e == QUOTA_EXCEEDED_ERR) alert('quota disco superata!'); } document.write(localstorage.getitem("name")); // recupera il valore e lo scrive a video localstorage.removeitem("name"); // cancella il valore dallo storage } NOTIFICHE È la possibilità di notificare all utente particolari eventi tramite un API dedicata, non si tratta di messaggi JavaScript come alert o prompt bloccanti per l utente ma di vere e proprie notifiche, ad esempio permettono d inviare messaggi all utente ma allo stesso tempo gli consentono di continuare a lavorare e rimangono in sovraimpressione anche se il browser è ridotto ad icona. Il browser chiederà un permesso esplicito all utente per l attivazione del servizio di notifica e poi invierà messaggi che potranno contenere testi e/o immagini racchiusi in piccole finestre indipendenti da quella principale del browser. Esempio, includere codice HTML invece che puro testo all interno delle notifiche. I due pulsanti attivano gli eventi di gestione della pagina; all interno della variabile url, si salva l indirizzo del sito che si vuole mostrare come notifica. File ESEMPIO.HTML <!DOCTYPE> <html> <head> HTML um 180 di 347

182 <title>esempio Notifiche</title> <script type="text/javascript" src="script/script.js"> </script> </head> <body> <input type="button" id="request_permission" value="attiva notifiche"> <input type="button" id="show_html_notification" value="mostra notifiche HTML"> </body> </html> File SCRIPT.JS var url = ' document.getelementbyid('request_permission').addeventlistener('click', function () { window.webkitnotifications.requestpermission();}, false); document.getelementbyid('show_html_notification').addeventlistener('click', function () { if (window.webkitnotifications.checkpermission() == 0) { // passiamo l'url della pagina da mostrare alla finestra di notifica window.webkitnotifications.createhtmlnotification(url).show(); } else alert("l'utente non ha autorizzato l'invio di notifiche!") }, false); Esempio, creare un servizio di notifica basato su Twitter, in modo da poter inviare i messaggi più recenti dell account a chi visita la pagina web. Alla pressione del pulsante di richiesta autorizzazione, il browser notifica con un messaggio la richiesta con la funzione window.webkitnotifications.requestpermission. In caso affermativo, le notifiche sono disponibili, altrimenti no. Per la connessione al server Twitter, da dove sarà scaricato un file JSON (JavaScript Object Notation) contenente i tweet, si usa una callback chiamata dalle API Twitter, si creano le notifiche passando come parametro username, avatar e contenuto del tweet. La funzione window.webkitnotifications.createnotification costruisce l oggetto finestra di notifica che è poi mostrato attraverso il metodo show. File ESEMPIO.HTML <!DOCTYPE> <head> <title>esempio Notifiche</title> <script type="text/javascript" src="script/script.js"> </script> </head> <body> <input type="button" onclick="consentinotifiche()" value="attiva notifiche" /> <input type="button" onclick="mostratwitter( raissa )" value="mostra account twitter di raissa" /> </body> </html> HTML um 181 di 347

183 File SCRIPT.JS function consentinotifiche() { if (window.webkitnotifications.checkpermission() == 0) // permesso accordato else window.webkitnotifications.requestpermission(); } function mostratwitter(username) { var script = document.createelement("script"); script.src = http: document.body.appendchild(script); } function tweetcallback(data) { var tweet; var i = data.length; while (i--) { tweet = data[i]; if (window.webkitnotifications.checkpermission() == 0) { window.webkitnotifications.createnotification( tweet.user.profile_image_url, tweet.user.name, tweet.text).show(); } else { // non abbiamo ricevuto l autorizzazione a mostrare le notifiche alert( Non sono state autorizzate le notifiche HTML 5.0 ) return; } } } MICRODATA Sono API che permettono di assegnare informazioni supplementari agli elementi HTML, agendo come una sorta di metadati. È un modo per assegnare etichette ai contenuti al fine di descrivere un tipo specifico d informazioni, per esempio recensioni, informazioni su persone o eventi. Ogni tipo d informazione descrive uno specifico tipo di elemento, come una persona, un evento o una recensione. Ad esempio, un evento ha proprietà quali il luogo, l ora di inizio, il nome e la categoria. In generale, i microdati utilizzano attributi nei tag HTML <span> o <div> per assegnare nomi brevi e descrittivi a elementi e proprietà. Esempio, snippet che racchiude informazioni sul nome e sulla nazionalità. <!DOCTYPE> <html> <title>esempio Microdata</title> <body> HTML um 182 di 347

184 <!-- Aggiungiamo i Microdata --> <div itemscope> <p>mi chiamo <span itemprop='name'>pippo</span>.</p> <p>sono <span itemprop='nationality'>un cartone animato</span>.</p> </div> </body> </html> WEB WORKERS File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Web Worker</title> <script type="text/javascript" src="script/script.js"> </script> <body> <button onclick="avvia()">avvia</button> <button onclick="unknowncmd()">manda comando nullo</button> <button onclick="stop()">ferma</button> <output id="result"></output> </body> </html> File SCRIPT.JS function avvia() { worker.postmessage({ 'cmd': 'start', 'msg': 'via.' }); } function stop() { worker.postmessage({ 'cmd': 'stop', 'msg': 'Ciao' }); } function unknowncmd() { worker.postmessage({ 'cmd': 'foobard', 'msg': '?' }); } var worker = new Worker('worker.js'); worker.addeventlistener('message', function (e) { document.getelementbyid('result').textcontent = e.data; }, false); File WORKER.JS self.addeventlistener('message', function (e) { var data = e.data; switch (data.cmd) { case 'start': self.postmessage('worker iniziato: ' + data.msg); break; case 'stop': self.postmessage('worker FERMATO: ' + data.msg + '. (il worker non funzionerà HTML um 183 di 347

185 più)'); self.close(); break; default: self.postmessage('comando sconosciuto: ' + data.msg); }; }, false); WEBSOCKET Sono uno standard, simile ad HTTP che permette la comunicazione client/server tra pagine web e server web. Come per le classiche socket che si trovano in altri linguaggi, le WebSocket consentono una comunicazione bidirezionale e full-duplex. Il protocollo WebSocket è progettato per essere implementato nei browser web e server web ma può essere utilizzato da qualsiasi client o server. WEB FORMS 2.0 Nuova versione dei moduli: validazione embedded, nuovi tipi di campi, per esempio i formati ora/data e miglioramenti nella gestione d input con range. I moduli sono parte integrante delle applicazioni, permettono all utente d inserire dati e interagire con l applicazione: fino a oggi la validazione dei form era delegata a script JavaScript: se l utente naviga l applicazione disattivando gli script non sarà possibile validarne l input, se non lato server. <form> <input name="campotesto" type="text" required> <button type=submit>invia</button> </form> L attributo required permette di richiedere all utente d inserire obbligatoriamente un determinato valore. Sarà il browser poi a validare l input, senza dover utilizzare script ad hoc. Il campo età deve obbligatoriamente contenere un numero compreso tra 18 e 99. <input name="eta" type="number" min="18" max="99" required> Quattro tipi diversi di validazione: il nuovo type number, min, max e required per ottenere il risultato voluto. Grazie alle regular expression si può impostare qualunque tipo di validazione sui campi: basta definire un pattern, usando la sintassi per le regular expression JavaScript. <input name="codice_postale" requie pattern="([0-9]{5})" type="text"> DND (DRAG AND DROP) HTML um 184 di 347

186 È un API che permette di trascinare oggetti all interno del DOM di una pagina web. L interazione, però, non si limita agli elementi della pagina: l API consente ad un applicazione web di scambiare dati con altre applicazioni, anche desktop, come editor di testo o applicazioni di grafica. Alcuni elementi di una pagina web sono trascinabili di default: sono le selezioni di testo, le immagini e i collegamenti ipertestuali. Nel caso si desidera trascinare altri elementi, sarà necessario assegnarvi l attributo draggable= true. Che un elemento sia trascinabile, però, non significa che possa essere spostato in un area della pagina diversa dalla sua posizione iniziale. Bisognerà prima individuare un elemento in cui possa trovare una nuova collocazione. È necessario, quindi, inserire nel DOM del documento una <div>, un paragrafo o anche una lista, in cui gli oggetti saranno rilasciati, quindi prevedere due event handlers: uno che comunichi al browser che l elemento individuato può accettare dati da elementi trascinati, ondragover e uno che esegua le operazioni stabilite al momento del rilascio dell elemento, ondrop. Durante un operazione di DnD non sono attivati eventi associati al movimento del mouse, come mousemove ma solo gli eventi collegati alle varie fasi del trascinamento e rilascio degli oggetti nella pagina che sono sette. 1. dragstart: è attivato sull elemento trascinato quando ha inizio l azione di trascinamento, drag, il relativo eventlistener imposta i dati relativi all elemento trascinato. 2. dragenter: è attivato quando il mouse comincia a muoversi su un elemento durante un drag and drop, di default nessun elemento accetta operazioni di rilascio, drop, quindi l event listener associato dovrebbe impostare la possibilità di rilasciare al suo interno elementi trascinabili; in altre parole avviene con un return false da parte di un event listener inline, oppure invocando il metodo event.preventdefault. 3. dragover: è attivato quando il mouse si sposta su un dato elemento durante un DnD; le operazioni eseguite dall event listener associato sono le stesse di ondragenter. 4. dragleave: è attivato quando il mouse si sposta al di fuori di un elemento durante un operazione di trascinamento. 5. drag: attivato sull elemento trascinato durante un operazione di trascinamento. 6. drop: attivato sull elemento su cui avviene il rilascio, al momento del rilascio. 7. dragend: l evento è attivato sull elemento trascinato, al termine del DnD, ossia, al momento del rilascio. Al momento dell avvio del DnD è attivato l evento dragstart sull elemento trascinato; subito dopo è attivato, sempre sull elemento trascinato, l evento drag. Gli eventi dragenter e dragover sono attivati al passaggio del mouse su una drop area : gli event listener associati avranno lo scopo principale d individuare l area di drop e dovranno restituire false. Al momento del rilascio sono attivati gli eventi drop e dragend: il primo sull area di drop, il secondo sull elemento trascinato. Esempio. File ESEMPIO.HTML <!DOCTYPE> <html> <head> <title>esempio DnD</title> <script type="text/javascript" src="script/script.js"> </script> </head> <body> HTML um 185 di 347

187 <img src="img/1.png" class="draggable" /> <img src="img/2.png" class="draggable" /> <img src="img/2.png" class="draggable" /> <div id="dropbox"></div> </body> </html> File SCRIPT.JS Si deve creare un riferimento alla div#dropbox, a questa si associano i due event handlers ondrop e ondragover. Quando una delle immagini è rilasciata, è attivato l evento drop e diventa disponibile l oggetto event.datatransfer. Il metodo getdata permette di accedere al valore di Text, che, nel caso delle immagini, corrisponde al valore dell attributo src. var dropbox = document.getelementbyid('dropbox');dropbox.ondrop = function (event) { this.innerhtml += '<img src=' + event.datatransfer.getdata('text') + '/>'; this.innerhtml += '<img src="' + event.datatransfer.getdata('text') +'"/>'; return false; }; dropbox.ondragover = function () { return false; } TAG DINAMICI È un elemento HTML che consente di presentare all utente una serie d informazioni che variano durante la visualizzazione della pagina, come ad esempio una progress bar o opzioni con cui l utente può interagire direttamente come ad esempio una data grid. il TAG <canvas>, in italiano vuol dire tela, consente di definire una superficie di disegno su cui, tramite codice JavaScript e DOM, è possibile inserire oggetti grafici, come rettangoli, ellissi, cerchi o altri elementi più complessi, in altre parole è una superficie indipendente dalla risoluzione video dove mostrare grafici, giochi e immagini. Le API sono definite dallo standard e permettono di disegnare forme semplici linee, rettangoli, poligoni, grazie ad un set completo d istruzioni. Esempio, il pulsante Disegna, recupera il canvas denominato mycanvas e lo riempie con HTML um 186 di 347

188 un rettangolo del colore passato come parametro alla funzione di disegno. File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Canvas</title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="script/script.js"> </script> <body> <header> <h1>disegna</h1> </header> <canvas id="mycanvas"></canvas> <input type=button onclick="disegna('#ff0000')" value="disegna" /> <input type=button onclick="disegna('#0000ff')" value="disegna" /> </body> </html> File STYLE.CSS section { margin-bottom:20 } File SCRIPT.JS function Disegna(colore) { var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = colore; ctx.fillrect(0, 0, 80, 100); } Esempio, disegnare due triangoli. File ESEMPIO.HTML <!DOCTYPE> HTML um 187 di 347

189 <html> <head> <title>esempio Canvas</title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="script/script.js"> </script> </head> <body> <header> <h1>disegna</h1> </header> <canvas id="mycanvas" width="220" height="220"> </canvas> <input type=button onclick="disegna('#ff0000')" value="disegna"/> </body> </html> File STYLE.CSS canvas { border: 2px solid black; } File SCRIPT.JS La funzione disegna si occupa di tutto: crea il context, ctx, in due dimensioni, recuperando l oggetto mycanvas grazie alla chiamata document.getelementbyid. Il context non è altro che una specie di puntatore all area di disegno che è composta da una matrice che ha il punto di coordinate (0,0) in alto a sinistra. L istruzione ctx.fillstyle='rgba(0,255,0,0.5)'; definisce il colore e la trasparenza del riempimento che sarà utilizzato fino a nuove istruzioni. Con la chiamata a ctx.moveto(10,10) si muove di 10 punti sia sull asse x sia su quello delle y e comincia a disegnare linee grazie al metodo lineto. function Disegna(colore) { var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); // impostiamo il colore (verde, con trasparenza al 50%) ctx.fillstyle = 'rgba(0,255,0,0.5)'; ctx.beginpath(); // muoviamoci al punto di coordinate x=10, y=10 ctx.moveto(10, 10); // Disegnamo i punti del triangolo ctx.lineto(100, 10); ctx.lineto(10, 100); ctx.lineto(10, 10); // riempiamo il poligono e diamogli un bordo ctx.fill(); ctx.stroke(); ctx.closepath(); // altro triangolo ctx.beginpath(); // muoviamoci al punto di coordinate x=20, y=20 ctx.moveto(20, 20); // disegnamo i punti del triangolo ctx.lineto(200, 40); ctx.lineto(100, 150); HTML um 188 di 347

190 } ctx.lineto(20, 20); // riempiamo il nostro poligono e diamogli un bordo ctx.fill(); ctx.stroke(); ctx.closepath(); Esempio, disegnare un grafico, i file ESEMPIO.HTML e STYLE.CSS rimangono uguali. File SCRIPT.JS function Disegna(colore) { var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); for (i = 0; i < 400; i += 20) { ctx.moveto(0, i); ctx.lineto(i + 20, 400); ctx.stroke(); } } HTML um 189 di 347

191 HTML 5.0 gestisce tramite CSS una serie di animazioni preimpostate. Lo schema di ogni animazione effettuata tramite <canvas> può riassumersi in quattro fasi che compongono il ciclo di animazione. 1. Pulizia dello schermo: rimozione dello stato precedente dell animazione. 2. Salvataggio dello stato corrente. 3. Disegno dello stato aggiornato. 4. Ridisegno del contenuto del CANVAS. Esempio, simulare una palla in movimento sullo schermo. Alla chiamata dell init sono settate sia l altezza sia la larghezza del canvas che serve per calcolare i rimbalzi, è poi creato l intervallo che aggiorna il canvas con la pallina, di volta in volta in movimento. File ESEMPIO.HTML <!DOCTYPE> <html> <head> <title>esempio Canvas</title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="script/script.js"> </script> HTML um 190 di 347

192 </head> <body onload="init()"> <h1>animazione</h1> <canvas id="disegno" width="400" height="220"></canvas> </body> </html> File STYLE.CSS canvas { border: 2px solid black; } File SCRIPT.JS La funzione draw, prima ad ogni frame, ripulisce lo schermo in modo da poter disegnare il nuovo passaggio dell animazione da zero. var x = 150; var y = 150; var dx = 2; var dy = 4; var ctx; var WIDTH; var HEIGHT; // disegna la pallina function draw() { clear(); circle(x, y, 10); if (x + dx > WIDTH x + dx < 0) dx = -dx; if (y + dy > HEIGHT y + dy < 0) dy = -dy; x += dx; y += dy; } // disegna un cerchio alle coordinate passate come parametro function circle(x, y, r) { ctx.beginpath(); ctx.arc(x, y, r, 0, Math.PI * 2, true); ctx.closepath(); ctx.fill(); } function clear() { ctx.clearrect(0, 0, WIDTH, HEIGHT); } function init() { var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); WIDTH = document.getelementbyid("disegno").width HEIGHT = document.getelementbyid("disegno").height return setinterval(draw, 10); } HTML um 191 di 347

193 Esempio. La <div> con id box è animata al rollover con una rotazione di 360 gradi e un ingrandimento pari al doppio delle sue dimensioni iniziali. L animazione è molto fluida ed è possibile accodare tra loro diversi eventi in modo da creare animazioni sempre diverse, in combinazione con il tipo di animazione definito dalla proprietà transition. File ESEMPIO.HTML <!DOCTYPE> <html> <head> <title>esempio Box animata</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div align="center" style="padding:100px"> <div id="box">questa è una box animata</div> </div> </body> </html> File STYLE.CSS #box { width:200px; height:150px; padding:10px; background-color: #eee; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } HTML um 192 di 347

194 #box:hover { background-color: #fc3; -webkit-transform: rotate(360deg) scale(2); -moz-transform: rotate(360deg) scale(2); -o-transform: rotate(360deg) scale(2); } Un secondo elemento è rappresentato dal TAG < progress > che visualizza una progress bar, anch essa programmabile in JavaScript, per indicare all utente lo stato di avanzamento di un processo. Si recupera la progress bar tramite il metodo getelementbyid e si utilizza l oggetto ricevuto nelle funzioni onprogress e onloadend per assegnare il valore incrementale alla proprietà value della progress bar stessa. Esempio, attivare una progress bar durante il caricamento di una risorsa esterna. File ESEMPIO.HTML <!DOCTYPE> <html> <title>esempio Progress bar</title> <script type="text/javascript" src="script/script.js"> </script> <body> <progress id="pb"></progress> </body> </html> File SCRIPT.JS var progressbar = document.getelementbyid("pb") client = new XMLHttpRequest(); client.open("get", " client.onprogress = function (pe) { if (pe.lengthcomputable) { progressbar.max = pe.total; progressbar.value = pe.loaded; } } HTML um 193 di 347

195 client.onloadend = function (pe) { progressbar.value = pe.total; } client.send() Il TAG <command> consente di definire un elemento associato ad un comando, come ad esempio un radio button, un raggruppamento e una serie di eventi che si scatenato durante l interazione dell utente con il comando stesso. Il TAG <datagrid> definisce il layout di una sequenza di dati in modo semplice e lineare. Il contenuto interno alla griglia è rappresentato da un elenco ordinato <ol> con vari list item <li> all interno, è possibile legare il contenuto della griglia ad una sorgente dati utilizzando Javascript, AJAX (Asynchronous JavaScript and XML) e JQuery. Esempio. <!DOCTYPE> <html> <head> <title>esempio Datagrid</title> </head> <body> <datagrid> <ol> <li>sistemi <ol style="list-style-type:lower-alpha;"> <li> Classe terza </li> <li> Classe quarta </li> <li> Classe quinta</li> </ol> </li> <li> Tecnologie informatiche <ol style="list-style-type:lower-alpha;"> <li> Prima </li> <li> Seconda </li> </ol> </li> </ol> </datagrid> </body> </html> HTML um 194 di 347

196 Il TAG <datalist> consente di definire l elenco degli elementi da presentare in altri elementi HTML, per esempio è possibile definire l elenco delle possibili voci per un campo d input così come l elenco di elementi per controlli più complessi. Il TAG <detail> consente di definire il dettaglio di un elemento di una lista, può servire anche per raggruppare elementi nascosti per default che devono essere visualizzati come dettaglio di una selezione dell utente. Il TAG <embed> permette di utilizzare contenuti embedded, inclusi, all interno di documenti HTML, al posto di utilizzare il TAG <object> o referenziare un plugin esterno, è possibile inserire risorse di tipo <audio>, <canvas>,<img>, <math>, <svg> e <video>. GRAFICA VETTORIALE È possibile inserire direttamente il formato vettoriale SVG (Scalable Vector Graphics) e, pertanto, gestire immagini scalabili dimensionalmente. Più specificamente si tratta di un linguaggio derivato dall XML che si pone l obiettivo di descrivere figure bidimensionali statiche e animate. Esempio. <!DOCTYPE> <html> <title>esempio SVG</title> <body> <svg id="svg-area" width="638" height="140" viewbox=" "> <rect x="100" y="20" rx="25" width="100" height="335" fill="#faebd7" stroke="purple" stroke-width="2" /> <rect x="-50" y="300" width="300" height="75" fill="none" stroke="#4b0082" strokewidth="4" transform="rotate(-30)" /> <path d="m 950,200 h -150 a 150, ,0 150,-150 z" fill="green" stroke="blue" stroke-width="5" /> <path d="m 925,175 v -150 a 150, ,0-150,150 z" fill="yellow" stroke="blue" stroke-width="5" /> <path d="m 1450,350 l 50,-25 a 25, ,1 50,-25 l 50,-25 a 25, ,1 50,-25 l 50,-25 a 25, ,1 50,-25 l 50,-25 a 25, ,1 50,-25 l 50,-25" fill="none" stroke="red" stroke-width="5" /> </svg> </body> </html> HTML um 195 di 347

197 VRML (Virtual Reality Modelling Language) Le prime applicazioni di realtà virtuale in rete sono state costruite utilizzando VRML, il linguaggio di modellazione per la realtà virtuale ideato da Mark Pesce, Tony Parisi e Dave Raggett nel 1994 e promosso dalla Silicon Graphics, l estensione è WRL. L idea di base è ambiziosa: creare in rete ambienti tridimensionali ai quali sia possibile collegarsi così come ci si collega a una normale pagina informativa su web; ambienti che possano essere navigati in maniera analoga a quanto accade in videogiochi 3D, nei quali sia possibile visualizzare gli altri utenti collegati e interagire, in cui, al posto dei legami ipertestuali realizzati rendendo attive zone di testo, vi siano legami ipermediali realizzati rendendo attivi oggetti ed eventualmente personaggi della scena. Trasmettere attraverso la rete immagini di ambienti tridimensionali, aggiornate secondo dopo secondo così come richiesto dalla necessità di rendere fluido e naturale il movimento, è un compito difficile, la soluzione adottata fu semplice: trasferire non già immagini ma sintetiche descrizioni geometriche dell ambiente e degli oggetti che vi si trovano, lasciando al client, installato sul PC dell utente, il compito di tradurre queste descrizioni in immagini tridimensionali. Perché il client possa correttamente interpretare le descrizioni dell ambiente, queste devono essere scritte in un linguaggio standard ed è qui che entra in gioco VRML. In parte basato su Open Inventor, un linguaggio di descrizione grafica che era stato elaborato dalla Silicon Graphics, VRML comprende istruzioni per descrivere un certo numero di oggetti-base ad esempio cubi, sfere, piramidi, la loro posizione rispetto agli assi cartesiani, posizione e intensità delle fonti luminose che li illuminano, caratteristiche di opacità o trasparenza delle superfici. VRML comprende le istruzioni per rendere attivi gli oggetti che si desidera collegare ad altre risorse informative in rete siano esse pagine XHTML, altri mondi VRML, file sonori, immagini, testi. Esempi di client, Webspace della Silicon Graphics, il primo vero client VRML; WorldView, dell InterVista Software, il primo disponibile per il grande pubblico in una versione per Microsoft Windows; Cosmo Player e il VRML Viewer 2.0. X3D Nel 2005 il W3C sostituisce il VRML con questo linguaggio basato su XML. WEBGL (WEB BASED GRAPHICS LIBRARY) Non è un linguaggio di programmazione ma un insieme di librerie, per esempio THREE.JS che consentono d integrare, grazie a JavaScript, oggetti tridimensionali direttamente in HTML. WebGL non è uno strumento per realizzare file tridimensionali, come sono, invece, VRML e X3D ma consente ad un browser di sfruttare la potenza di calcolo della GPU e delle CPU multi core. È stato progettato da OpenGL e rende possibile lo sfruttamento dell accelerazione HTML um 196 di 347

198 hardware 3D direttamente nelle pagine web, senza bisogno d installare alcun plugin. Il sistema è libero da licenze, sfrutta una connessione software tra JavaScript e OpenGL ed è multipiattaforma ma è complesso da implementare perchè si deve interfacciare con la scheda video del PC, in modo da sfruttarne l accelerazione H/W. Per visualizzare i contenuti WebGL si usa l elemento <canvas> e come per i video, i contenuti WebGL riescono ad essere fruiti online senza bisogno di ricorrere a Flash. In WebGL per disegnare si deve definire una coppia di programmi chiamati shader, il cui compito è girare all interno di WebGL per definire come sono elaborate le coordinate spaziali dei vertici, vertex-shader e come devono essere disegnati i singoli pixel all interno di una forma geometrica, fragment-shader. Per lo sviluppo di questi micro programmi, WebGL definisce un linguaggio apposito, chiamato GLSL (GL Shading Language), simile al C. Il vertex-shader prende come argomento un vertice e lo rielabora in modo da definire alcune sue caratteristiche, come la posizione, l illuminazione; è utile in un applicazione per realizzare effetti di movimento, di trasformazione, di deformazione, di riflesso. Il fragment-shader è una piccola porzione all interno di una figura geometrica, dove si possono stabilire le proprietà del pixel che andrà a raffigurarla. La più basilare delle caratteristiche manipolabili è il colore. Nel mondo GL i vertici sono definiti con valori semplici e usati come modello universale per il disegno delle figure simili. Se si devono disegnare molti triangoli simili fra di loro, in altre parole che hanno le stesse proporzioni ma che hanno dimensioni, posizioni e orientamento differenti, si usa un solo buffer di vertici. Ogni volta, prima di disegnare lo specifico triangolo di cui si ha bisogno, si applica una trasformazione ai vertici di base. La programmazione della computer grafica, per rendere semplice l espressione e il calcolo di queste operazioni, ha preso in prestito dall algebra il concetto di matrice di trasformazione. Le matrici 4X4 per la stesura degli shader sono lo strumento per applicare traslazioni, rotazioni e ridimensionamenti alle figure espresse con un buffer di vertici. Non c è bisogno di compilare manualmente queste matrici, indicando uno per uno i loro valori, esiste una libreria JavaScript: GLMATRIX MIN.JS. Esempio. File ESEMPIO.HTML <!DOCTYPE> <html> <head> <title>esempio 3D WebGL</title> <script type="text/javascript" src="script/shader-loader.js"></script> <script type="text/javascript" src="script/glmatrix min.js"></script> <script id="shader-vs" type="x-shader/x-vertex"> <!-- inserimento dei vertex-shader--> <!-- array di 3 elementi --> attribute vec3 avertexposition; <!-- matrice di 4X4 elementi --> uniform mat4 umvmatrix; uniform mat4 upmatrix; <!-- il codice dentro main elabora l attributo ricevuto in ingresso per definire la posizione finale del vertice, salvandolo sulla variabile gl_position, una variabile standard per l output dei vertex-shader. L elaborazione genera un vettore di 4 elementi, chiamando vec4(), di cui i primi tre sono le coordinate (x, y, z) del vertice ricevuto in argomento. HTML um 197 di 347

199 Il quarto parametro di posizione è utile per eseguire il prodotto del vertice con le due matrici > void main(void) { gl_position = upmatrix * umvmatrix * vec4(avertexposition, 1.0); } </script> <script id="shader-fs" type="x-shader/x-fragment"> <!-- inserimento dei fragment-shader--> #ifdef GL_ES precision highp float; #endif uniform vec4 ufragcolor; <!-- gl_fragcolor è un vettore di 4 elementi che rappresenta un colore che è impostato dall esterno sulla variabile uniform chiamata ufragcolor. I colori sono rappresentati da 4 valori decimali, tutti compresi tra 0.0 ed 1.0, corrispondono ai canali RGBA (Red, Green, Blue, Alpha) che identificano il colore --> void main(void) { gl_fragcolor = ufragcolor; } </script> <!-- attivo la libreria WebGL--> <script type="text/javascript"> var gl; function initwebgl() { var canvas = document.getelementbyid("glcanvas"); try { <!-- recupera la canvas dichiarata grazie all id --> <!-- estrae il contesto WebGL con la seguente chiamata --> gl = canvas.getcontext("experimental-webgl"); gl.viewportwidth = canvas.width; gl.viewportheight = canvas.height; } catch (e) { } if (!gl) { alert("webgl non supportato dal tuo browser..."); } else { initshaders(); initbuffers(); drawscene(); } } <!-- la funzione carica i due script GLSL e l inserisce all interno di uno shader-program. Sull oggetto che rappresenta il programma degli shader si hanno a disposizione i parametri da impostare per i vertici, le matrici di trasformazione ed il colore dei frammenti. --> var shaderprogram; function initshaders() { var fragmentshader = loadshader(gl, "shader-fs"); var vertexshader = loadshader(gl, "shader-vs"); shaderprogram = gl.createprogram(); gl.attachshader(shaderprogram, vertexshader); gl.attachshader(shaderprogram, fragmentshader); gl.linkprogram(shaderprogram); if (!gl.getprogramparameter(shaderprogram, gl.link_status)) { HTML um 198 di 347

200 alert("impossibile inizializzare gli shader"); } gl.useprogram(shaderprogram); shaderprogram.vertexpositionattribute=gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(shaderprogram.vertexpositionattribute); shaderprogram.pmatrixuniform = gl.getuniformlocation(shaderprogram, "upmatrix"); shaderprogram.mvmatrixuniform=gl.getuniformlocation(shaderprogram, "umvmatrix"); shaderprogram.fragcolor = gl.getuniformlocation(shaderprogram, "ufragcolor"); } var trianglevertexpositionbuffer; <!-- i vertici delle figure geometriche che devono essere disegnate, vanno espressi come triplette di coordinate (x, y, z), da salvare poi in un buffer. Definire un triangolo: vettore di 9 elementi, tre vertici, l array dev essere trasformato in un buffer di WebGL, per farlo si hanno a disposizione delle funzioni specifiche. La prassi consiste nel dichiarare globalmente i buffer di cui si ha bisogno, per poi avere una funzione initbuffers() che li inizializza tutti: --> function initbuffers() { var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; trianglevertexpositionbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, trianglevertexpositionbuffer); gl.bufferdata(gl.array_buffer, new Float32Array(vertices), gl.static_draw); } <! creo le due matrici di trasformazione --> var mvmatrix = mat4.create(); var pmatrix = mat4.create(); <!-- disegna il triangolo --> function drawscene() { <!-- queste istruzioni abilitano il controllo di profondità, definiscono un colore di sfondo (bianco) e puliscono la scena, è un cls che è eseguito prima di tracciare le figure --> gl.enable(gl.depth_test); gl.clearcolor(1.0, 1.0, 1.0, 1.0); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); <!-- il passo successivo consiste nel definire una finestra di visione sulla scena, impostando anche la prospettiva, la prima istruzione apre una finestra sul mondo 3D e la fa coincidere con la canvas creata inizialmente, riempiendola totalmente. La seconda istruzione usa le dimensioni della finestra per impostare la prospettiva con cui l utente vedrà il mondo tridimensionale. Avrà un angolo di visuale pari a 45 gradi e vedrà tutto ciò che ha una distanza da lui nella direzione delle z compresa tra 0.1 e 100. La prospettiva così impostata è salvata sulla matrice pmatrix che è usata dal vertexshader per calcolare dove posizionare i singoli vertici --> gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); mat4.perspective(45, gl.viewportwidth / gl.viewportheight, 0.1, 100.0, pmatrix); <!-- una matrice d'identità, se applicata ad un vertice, non produce alcuna modifica alle coordinate di quest ultimo, il metodo identity è una sorta di reset che annulla ogni trasformazione espressa dalla matrice Partendo dalla matrice d identità, si possono poi applicare diverse trasformazioni. Il ridimensionamento della figura: mat4.scale(matrice, [2.0, 0.5, 1.0]); la trasformazione così costruita ridimensiona la figura: la raddoppia lungo la direzione delle x (2.0), la HTML um 199 di 347

201 dimezza lungo le y (0.5) e la mantiene inalterata lungo le z (1.0). La figura può essere ruotata intorno ad un asse: mat4.rotate(matrice, 0.5, [0.0, 1.0, 0.0]); questa chiamata genera una matrice che esegue una rotazione di 0.5 radianti intorno all asse delle y (l asse di rotazione è individuato dai valori sull array fornito come terzo argomento). La figura può essere spostata linearmente in un altro punto: mat4.identity(mvmatrix); per esempio le coordinate sono aumentare di 1 sulle x, diminuire di 2 sulle y e restare inalterate sulle z --> mat4.identity(mvmatrix); <!-- usando mvmatrix, anch essa tenuta poi in conto dal vertexshader, il triangolo sarà traslato di 3 unità indietro lungo l asse delle z, le coordinate z del triangolo che al momento della definizione valevano 0, diventeranno -3. Questo farà rientrare il triangolo nell intervallo da 0.1 a 100, all interno del quale è visibile per l osservatore, inoltre, allontanarlo un po dalla vista farà sì che, per effetto della prospettiva, sarà un po più piccolo e perciò si vedrà interamente dentro la canvas --> mat4.translate(mvmatrix, [0.0, 0.0, -3.0]); <!-- disegno il triangolo, l istruzione carica il buffer con i vertici del triangolo --> gl.bindbuffer(gl.array_buffer, trianglevertexpositionbuffer); <!-- imposta i parametri per gli shader --> gl.vertexattribpointer(shaderprogram.vertexpositionattribute,3,gl.float, false, 0, 0); gl.uniformmatrix4fv(shaderprogram.pmatrixuniform, false, pmatrix); gl.uniformmatrix4fv(shaderprogram.mvmatrixuniform, false, mvmatrix); <!-- scelta del colore rosso --> gl.uniform4fv(shaderprogram.fragcolor, new Float32Array([1.0, 0.0, 0.0, 1.0])); <!-- disegno il triangolo --> gl.drawarrays(gl.triangles, 0, 3); } </script> </head> <!-- richiamo la funzione initwebgl--> <body onload="initwebgl()"> <!-- creo un canvas di 300*150 di nome glcanvas--> <canvas id="glcanvas" width="300" height="150"> Non posso inizializzare la WebGL! </canvas> </body> </html> File SHADER-LOADER.JS <!-- una volta che gli shader sono pronti all uso, si devono caricare in memoria. La funzione loadshader() accetta due argomenti: l oggetto gl e l id dello shader da caricare e convalida lo script dello shader e restituisce un oggetto che lo rappresenta --> function loadshader(gl, id) { var shaderscript = document.getelementbyid(id); if (!shaderscript) { return null; } var str = ""; var k = shaderscript.firstchild; while (k) { if (k.nodetype == 3) { str += k.textcontent; } k = k.nextsibling; HTML um 200 di 347

202 } } var shader; if (shaderscript.type == "x-shader/x-fragment") { shader = gl.createshader(gl.fragment_shader); } else if (shaderscript.type == "x-shader/x-vertex") { shader = gl.createshader(gl.vertex_shader); } else { return null; } gl.shadersource(shader, str); gl.compileshader(shader); if (!gl.getshaderparameter(shader, gl.compile_status)) { alert(gl.getshaderinfolog(shader)); return null; } return shader; Per disegnare forme complesse si usa il metodo g.drawarrays(modo, primo, quanti). Gli argomenti primo e quanti indicano qual è il primo vertice da considerare nel buffer corrente e quanti vertici, sempre dallo stesso buffer, devono essere disegnati. Il parametro modo indica il tipo di disegno da realizzare. WebGL supporta sette differenti modi. 1. gl.points disegna punti, uno per ciascun vertice fornito. 2. gl.lines disegna linee tra le coppie di vertici presenti nell array fornito. 3. gl.line_strip disegna linee che vanno dal primo all ultimo vertice della lista. 4. gl.line_loop disegna linee che vanno dal primo all ultimo vertice della lista, in più è tracciata un ulteriore linea dall ultimo al primo vertice, realizzando così una figura chiusa. 5. gl.triangles disegna triangoli pieni estraendo dalla lista dei vertici le triplette consecutive. 6. gl.triangle_strip disegna triangoli pieni e continui usando i vertici della lista con uno schema del tipo: v1, v2, v3; v2, v3, v4; v3, v4, v5; 7. gl.triangle_fan disegna dei triangoli pieni e continui usando i vertici della lista con uno schema del tipo: v1, v2, v3; v1, v3, v4; v1, v4, v5; HTML um 201 di 347

203 Disegnare un quadrato è come disegnare due triangoli affiancati. Usare un buffer di quattro vertici. var vertices = [ -1.0, 1.0, 0.0, 1.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; Dopo aver trasformato questo array di quattro vertici in un buffer, si può tracciarlo. gl.drawarrays(gl.triangle_strip, 0, 4); Il problema con i buffer di vertici è che gli elementi al loro interno sono sempre considerati secondo l ordine con cui sono stati inseriti: v1, v2, v3 e v4. Alcune volte, però, si ha bisogno di cambiare questo ordine, per tracciare una figura il cui ordine sia, ad esempio, v5, v3, v1, v2, v4. Per esempio, disegnare un cubo. var vertices = [ -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, -1.0 ]; cubevertexpositionbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, cubevertexpositionbuffer); gl.bufferdata(gl.array_buffer, new Float32Array(vertices), gl.static_draw); HTML um 202 di 347

204 Bisogna tracciare sei quadrati, la prima faccia la si fa unendo i primi quattro vertici. La faccia diametralmente opposta, allo stesso modo, si fa tracciando triangoli fra gli ultimi quattro vertici. Le altre facce, però, hanno bisogno di prendere vertici fuori ordine. Ad esempio la faccia laterale sulla destra va fatta con i vertici: v2, v6, v4, v8. Per disegnare usando dei vertici in un ordine differente da quello che hanno nel proprio buffer, si può definire un secondo buffer, di tipo ELEMENT_ARRAY_BUFFER. var indices = [ 0, 1, 2, 3, 4, 5, 6, 7, 4, 5, 0, 1, 6, 7, 2, 3, 4, 0, 6, 2, 1, 5, 3, 7 ]; cubevertexindexbuffer = gl.createbuffer(); gl.bindbuffer(gl.element_array_buffer, cubevertexindexbuffer); gl.bufferdata(gl.element_array_buffer,new Uint16Array(indices), gl.static_draw); Questi indici miscelano gli otto vertici definiti precedentemente in modo da individuare sei quadrati che sono poi le sei facce del cubo da disegnare. Per eseguire il disegno di ciascuna delle sei facce, per prima cosa si fa il bind sia dei vertici sia degli indici. gl.bindbuffer(gl.array_buffer, cubevertexpositionbuffer); gl.bindbuffer(gl.element_array_buffer, cubevertexindexbuffer); Adesso, invece di usare drawarray, si usa il metodo seguente. gl.drawelements(modo, quanti, tipo, primo-byte); modo è il tipo di disegno da eseguire, si usa TRIANGLES_STRIP per fare quattro quadrati, quanti è il numero di vertici da disegnare. tipo tipo degli elementi contenuti nel buffer degli indici, è gl.unsigned_short. primo-byte è l indice del primo byte da considerare nel buffer degli indici. Siccome gli indici sono di due byte ciascuno, se si comincia dal primo si mette zero, se si comincia dal secondo si mette due, per il terzo si mette quattro. Ecco quindi come disegnare le sei facce del cubo, usando un colore diverso per ciascuna di esse. gl.uniform4fv(shaderprogram.fragcolor, new Float32Array([1.0, 0.0, 0.0, 1.0])); gl.drawelements(gl.triangle_strip, 4, gl.unsigned_short, 0); gl.uniform4fv(shaderprogram.fragcolor, new Float32Array([1.0, 1.0, 0.0, 1.0])); gl.drawelements(gl.triangle_strip, 4, gl.unsigned_short, 4 * 2); gl.uniform4fv(shaderprogram.fragcolor, new Float32Array([0.0, 1.0, 0.0, 1.0])); gl.drawelements(gl.triangle_strip, 4, gl.unsigned_short, 8 * 2); gl.uniform4fv(shaderprogram.fragcolor, new Float32Array([0.0, 1.0, 1.0, 1.0])); gl.drawelements(gl.triangle_strip, 4, gl.unsigned_short, 12 * 2); gl.uniform4fv(shaderprogram.fragcolor, new Float32Array([0.0, 0.0, 1.0, 1.0])); gl.drawelements(gl.triangle_strip, 4, gl.unsigned_short, 16 * 2); gl.uniform4fv(shaderprogram.fragcolor, new Float32Array([1.0, 0.0, 1.0, 1.0])); gl.drawelements(gl.triangle_strip, 4, gl.unsigned_short, 20 * 2); HTML um 203 di 347

205 Per realizzare animazioni, per esempio il cubo che ruota a velocità costante intorno ai suoi tre assi, si devono definire, a livello globale, al di fuori da qualunque funzione, tre angoli di rotazione. var angle_x = 0; var angle_y = 0; var angle_z = 0; All interno di drawscene si usano i valori dei tre angoli per applicare una rotazione al cubo che si disegna subito dopo. mat4.rotate(mvmatrix, angle_x, [1.0, 0.0, 0.0]); mat4.rotate(mvmatrix, angle_y, [0.0, 1.0, 0.0]); mat4.rotate(mvmatrix, angle_z, [0.0, 0.0, 1.0]); Subito dopo aver disegnato le sei facce, s incrementano i valori dei tre angoli. angle_x += 0.01; angle_y += 0.02; angle_z += 0.005; Usando un incremento differente per ciascun angolo si ottiene una rotazione più complessa, capace di mostrare alternativamente diverse prospettive del cubo. Fare in modo che il metodo drawscene che contiene l esecuzione del disegno e la logica di avanzamento dell animazione, sia richiamato ciclicamente. In JavaScript un effetto del genere può essere ottenuto usando setinterval. Nella funzione initwebgl cambiare la chiamata al metodo drawscene con quella ciclica formulata al modo seguente. setinterval("drawscene()", 20); In questo modo drawscene sarà richiamato una volta ogni 20 millisecondi, vale a dire 50 volte al secondo. FONT I font web-safe, quelli diffusi su tutte le piattaforme come Arial e Verdana, non hanno HTML um 204 di 347

206 permesso una completa espressività ai grafici. Le scelte erano due, utilizzare Adobe Flash o immagini, con la conseguenza di appesantire le pagine web, in altre parole caricavano di lavoro il client o il server e non permettevano l uso intensivo all interno di tutta la pagina. HTML 5.0 e CSS 3.0 offrono due alternative. 1. Usare l attributo 2. Utilizzare servizi come typekit o Google Font API. Esempio, usando CSS 3.0 e l impostare un font a scelta come base per gli elementi della pagina e utilizzarlo anche nelle varianti grassetto e corsivo se presenti. Per l utilizzo: basta dichiarare un font-face, linkarlo al file del font in formato OTF e poi utilizzarlo come parametro dell attributo { font-family: Delicious; src: url( Delicious-Roman.otf ); { font-family: Delicious; font-weight: bold; src: url( Delicious-Bold.otf ); } h1 { font-family: Delicious; font-size: 35px; } p { font-family: Delicious; font-size: 14px; } Oltre a utilizzare font personalizzati, si possono aggiungere molti effetti ai testi: ombre, rotazioni, per esempio spostamento verso destra, spostamento verso il basso e colore. File ESEMPIO.HTML <!DOCTYPE> <head> <title>esempio Font</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <h1>questo è un titolo scritto in Delicious</h1> </body> </html> File STYLE.CSS -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); position:absolute; text-shadow: 2px 8px #336666, -1px -1px #fff; box-shadow: 4px 6px #330000; } p { HTML um 205 di 347

207 } font-family: Delicious; font-size: 14px; Esempio, usare le Google Font API, collegano le pagine web alla Google Font Library, per l utilizzo di webfont, eliminando il problema di reperire font e conservarli sul server File ESEMPIO.HTML <!DOCTYPE> <html> <head> <title>esempio Font</title> <link rel="stylesheet" href="css/style.css" /> <link rel= stylesheet type= text/css href= /> </head> <body> <h1>questo è un testo scritto usando le Google Font API</h1> </body> </html> File STYLE.CSS h1, p { font-family: Tangerine; } p { font-size: 20px; } HTML um 206 di 347

208 MODULO 2 WEB Pubblicazione Registrazione Hosting Housing Motori di ricerca Google Wolfram Alpha Bing Progettazione siti web HTML um 207 di 347

209 PUBBLICAZIONE INTRODUZIONE Per mettere a disposizione degli utenti il sito bisogna pubblicarlo su un server web, in altre parole metterlo in linea. Il server web è un servizio che permette la consultazione di pagine web memorizzate. Se il sito dev essere reso disponibile solo all interno di un intranet basta salvare le pagine sul server. Se il sito dev essere reso disponibile in Internet ci sono i seguenti metodi. 1. Rendere accessibile il server dall esterno. 2. Usare un servizio offerto da un ISP (Internet Service Provider) nei modi seguenti Hosting: ospita il sito web sul server dell ISP; vantaggio: costo basso; svantaggio: si condivide lo stesso server e la stessa banda con gli altri clienti Housing: il server è di proprietà dell utente e gestito dall utente ma è collocato nei locali dell ISP; svantaggi: è costoso e richiede esperienza nella gestione del server; vantaggi: si possono scegliere tutti i componenti desiderati. FTP (File Transfert Protocol) È il protocollo che permette di trasferire file da un host ad un altro attraverso Internet. È utilizzato per spedire i file sul server web. Perché ciò avvenga sono necessari tre elementi. 1. L indirizzo del server al quale spedire i file. 2. Password e UserId forniti dall ISP per accedere allo stesso. 3. Un applicazione client specifica per l FTP. Le macchine che entrano in gioco in una sessione FTP sono due. 1. Il PC locale. 2. Il PC remoto In una sessione FTP è possibile effettuare due operazioni. 1. Download: è l operazione con la quale si trasferiscono file dal PC remoto al PC locale. 2. Upload: è l operazione con la quale si trasferiscono file dal PC locale al PC remoto. Sia l operazione di download sia quella di upload possono essere eseguite solo sui PC remoti che accettano sessioni FTP. Non tutti i file memorizzati su host abilitati a sessioni FTP sono prelevabili o prelevabili gratuitamente. Per trasferire un file usando il protocollo FTP occorre avere a disposizione un applicazione FTP chiamata client FTP che è attivata sul PC locale e occorre conoscere l indirizzo IP o il nome logico del PC remoto. Ci sono due modalità di collegamento ad una macchina remota. 1. FTP anonimo È quello utilizzato per il prelievo di file ad accesso pubblico, consiste in un login effettuato senza disporre di un proprio codice utente e di una propria password, quindi anonimamente. In questa modalità non si ha pieno accesso al PC remoto; si può quindi entrare solo in determinate cartelle, per esempio nella cartella chiamata PUB ovvero public e nelle sue sotto cartelle e si possono solo leggere alcuni file ma non cancellarli, spostarli o modificarli. 2. FTP con account Dà pieno accesso ad una determinata directory del sistema remoto, nella quale si può HTML um 208 di 347

210 inserire, modificare e cancellare file, proprio come se fosse una directory del PC locale. Per esempio, se si acquista spazio su xoom.it, alla fine della procedura di setup saranno forniti dati relativi alla password e all UserId, oltre, l indirizzo al quale accedere per modificare il sito in FTP, ftp.xoom.it. Il perché di questi dati riservati è evidente: se l accesso FTP fosse libero chiunque, in qualsiasi momento, potrebbe entrare nel sito e cancellarne tutto il contenuto. Se si sottoscrive un servizio commerciale, si acquista un dominio i dati devono esserti forniti dall azienda con cui si è firmato il contratto di hosting. Client FTP GUI Per esempio, FileZilla, nella casella Host: è inserito l indirizzo del server web. Nei campi Username: e Password: sono inseriti i dati personali. Se i dati sono corretti il FileZilla si collega al server FTP visualizza diverse finestre. 1. A sinistra è visualizzato il contenuto del PC locale dal quale si devono selezionare i file del sito creati in locale. 2. A destra è invece visualizzata la struttura del server. Per trasferire i dati dal PC locale al server, non si deve far altro che selezionarli da sinistra e trascinarli col mouse verso la schermata di destra. L unica accortezza è che si deve indicare al client FTP se si stanno trasferendo file ASCII o binari. I file HTML e CSS sono ASCII; immagini, file audio e file video sono invece binari. Alcuni server non accettano file eseguibili per ragioni di sicurezza. Trasferire i dati via FTP è facile, si tratta di usare un software graficamente simile a Esplora Risorse di Windows. HTML um 209 di 347

211 REGISTRAZIONE INTRODUZIONE Per accedere ad un server con un nome di dominio, invece dell indirizzo IP, il server web deve avere un nome di dominio registrato in modo che possa essere individuato dai DNS (Domain Name System). La registrazione dei nomi di dominio e di conseguenza degli indirizzi di posta elettronica è fatta dall ISP. HTML um 210 di 347

212 HOSTING INTRODUZIONE Tutti i server sono impostati per riconoscere in ogni cartella creata un file di default, richiamato dal browser. Se si digita nella stringa del browser si va sull home page di pippo.it. Guardando la stringa dell URL del browser non appare alcun file ma solo l indirizzo in realtà quello che si sta visualizzando è il file di default del server di pippo.it di nome INDEX.HTML. In altre parole, se si digita senza specificare il documento da visualizzare, il server visualizza automaticamente il file INDEX.HTML presente nella cartella richiamata. Se il file INDEX.HTML fosse assente dalla cartella il browser risponderebbe con un messaggio di 404 URL NOT FOUND. Questo meccanismo funziona con ogni cartella, per cui se si digita visualizza il file INDEX.HTML presente in quella sotto cartella. I server possono essere impostati per richiamare di default qualsiasi file, INDEX.HTML, INDEX.HTM, INDEX.ASP, INDEX.XML o anche per chiamarne più di uno. In quest ultimo caso il server richiama il primo file della lista, in assenza del quale cercherà il secondo e così via, fino a trovare il file giusto. L hosting è sicuramente la strada maestra che molti siti percorrono per garantire la propria connettività: le pagine sono pubblicate e rese disponibili alla navigazione su PC che accolgono diversi siti web. Il sito, quindi, non ha una banda minima o massima a disposizione ma ottiene connettività da una sorta di enorme calderone collettivo messo a disposizione dal provider. Ovvio che la banda disponibile risente di flussi di traffico di molti siti ma nella maggior parte dei casi è sovradimensionata rispetto all effettivo consumo. Il vantaggio principale dell hosting è quello di svincolarsi dalla gestione tecnica del server. Infatti, se un server non è costantemente seguito rischia la vulnerabilità e possibili attacchi esterni, il fatto che l hosting preveda un amministratore tecnico che si occupi della gestione delle macchine garantisce maggiormente da attacchi esterni e malfunzionamenti. Sono monitorati e seguiti costantemente da amministratori. Altro vantaggio dell hosting è la messa a disposizione di programmi CGI (Common Gateway Interface) per la gestione di operazioni server side include. Servizi aggiuntivi previsti dalla quasi totalità dei pacchetti hosting. FTP Consente di pubblicare le proprie pagine e di aggiornarne i contenuti. Supporto agli script CGI Accesso ad una directory CGI-BIN personale dove installare propri CGI non indicati nel servizio, non tutti i servizi di hosting danno questa possibilità, soprattutto per questioni di sicurezza. Pannello di Controllo Sono pannelli di controllo grafici per le operazioni più comuni relative al proprio sito. Spazio su Disco Quantità massima di GB disponibili per la pubblicazione. Registrazione dei Nomi di Dominio Non è inclusa nel prezzo, accertarsi sui costi di registrazione soprattutto dei domini.it. HTML um 211 di 347

213 Nomi di dominio addizionali Possibilità di registrare più di un nome di dominio che rimanda presso l URL principale. Il costo di tale nome di dominio aggiuntivo è inferiore rispetto al principale. Per esempio, si può registrare un dominio del tipo e contestualmente il quale rimanda al primo. Estensioni di FrontPage Consentono una perfetta integrazione tra server e applicazione, tali estensioni sono compatibili con server Unix/Linux. Indirizzi di posta elettronica Esistono due modalità per l assegnazione di in base al dominio sottoscritto. Gli alias consentono di scaricare posta dell indirizzo prescelto ma non di spedirla. In altre parole, è possibile impostare il client di posta per scaricare la posta dal dominio sottoscritto ma per spedirla occorre appoggiarsi al provider abituale, la ragione di questa scelta è nella mole di traffico, molto più pesante per posta in uscita che in entrata. Se si desidera un indirizzo di posta vero e proprio, sia in entrata sia in uscita, SMTP (Simple Mail Transfer Protocol) e POP3 (Post Office Protocol), si deve richiedere una casella di posta POP3. Autoresponder Consente d impostare una risposta automatica a tutte le mail indirizzate ad un certo indirizzo di posta elettronica. Database Per l indicizzazione e la ricerca di articoli. Streaming RealAudio Sistema client-server per la distribuzione di contenuti multimediali. Carrello della spesa Applicazioni per la gestione di attività di commercio elettronico. SSL (Secure Socket Layer) Secure Server È un sistema di criptazione per transazione via WWW con carta di credito o altri strumenti. Statistiche Monitoraggio del traffico del sito. Motore di ricerca interno Un motore di ricerca interno per parole chiave. Form Mail, guestbook, contatori Sono servizi per spedire form, creare libri degli ospiti e contatori degli accessi; forniti da tutti i provider. Tipo di server HTML um 212 di 347

214 HOUSING INTRODUZIONE L housing è una soluzione orientata a siti con grande traffico e consiste nel collegare un PC di proprietà direttamente nei locali del provider. È una soluzione che elimina gli alti costi e la lentezza delle linee dedicate e permette la gestione in remoto della macchina. Le caratteristiche salienti dell housing sono le seguenti. PC di proprietà installato presso il backbond del provider. Alimentazione con gruppi di continuità centralizzati. Climatizzazione dei locali. Possibilità d installare qualsiasi sistema operativo e server, oltre ad applicazioni scritte e quant altro sia necessario alla gestione di un sito. Manutenzione hardware e software a carico del cliente. Manutenzione da remoto e possibilità di accedere ai locali in orari di ufficio. Importante, ai fini di una buona velocità di connessione, è la banda massima disponibile. I vantaggi principali di un housing sono nella possibilità di gestire la propria macchina assumendone il controllo totale. In altri termini si diventa amministratori del sistema, con tutti i pro e i contro che questa qualifica procura. Per chi ha esperienze nel campo dei server la soluzione dell housing è preferibile rispetto all hosting. Oltre ai costi di affitto delle linee va aggiunto quello di acquisto della macchina da mettere nei locali del provider. Un rischio che si corre acquistando un servizio in housing è di avere una banda sovradimensionata in alcuni orari del giorno e sottodimensionata in altri. In altre parole, un sito in housing può essere velocissimo in orari di scarso traffico, la notte o la prima mattinata e lentissimo in orari di alto traffico, giorni feriali in orari di apertura degli uffici. Se, quindi, l hosting si basa su un traffico mensile totale, l housing fa esclusivo riferimento alla banda minima garantita, oltre la quale il sito rallenta. Visti i costi e le complicazioni gestionali, l housing è consigliabile a webmaster con esperienze precedenti o grosse società che vogliono limare gli alti costi delle linee dedicate. HTML um 213 di 347

215 MOTORI DI RICERCA INTRODUZIONE Il funzionamento di un motore di ricerca è in linea di principio semplice: il backend sfrutta dei software automatizzati, chiamati spider che navigano incessantemente sul web per costruire un database di tutte le pagine esaminate. Lo spider consulta un sito proprio come farebbe un normale utente, tanto da essere identificato dal sito stesso come una regolare visita. All operazione di crawling letteralmente strisciare segue quella d indexing, ovvero l indicizzazione delle pagine visitate all interno dei database del motore di ricerca; il database contiene delle copie, ridotte o compresse, delle pagine web. L indicizzazione non segue immediatamente la visita, quindi ad un dato istante possono esistere pagine visitate e non ancora indicizzate; finché una pagina non è inclusa nell indice, questa non può contribuire ai risultati delle ricerche. Influenza dei link in uscita dai social network sul ranking delle pagine web. OTTIMIZZAZIONI L ottimizzazione per i motori di ricerca consiste spesso nell apportare modifiche minime ad alcune parti del sito, tuttavia, possono avere un impatto significativo sul modo in cui gli utenti utilizzano il sito e sulla sua presenza nei motori di ricerca. Gli utenti sono, infatti, coloro cui il sito si rivolge e che trovano le pagine attraverso i motori. Creare titoli unici Il titolo comunica gli argomenti della pagina sia agli utenti sia ai motori di ricerca. Si deve, possibilmente, usare un titolo univoco per ogni pagina del sito. Se il documento compare in una pagina di risultati di ricerca, il contenuto del TAG <title> comparirà, di norma, nella prima riga dei risultati. Le parole nel titolo sono evidenziate in grassetto se compaiono nella query di ricerca dell utente, questo può aiutare gli utenti a capire se la pagina corrisponde alla loro ricerca. Buone norme per i TAG <title> di una pagina Descrivere accuratamente il contenuto della pagina: scegliere un titolo che comunichi efficacemente l argomento del contenuto della pagina. Evitare. Scegliere un titolo che non ha relazione con il contenuto della pagina. Usare titoli automatici o vaghi. Creare TAG <title> unici per ogni pagina: ognuna delle pagine dovrebbe avere, nell ipotesi migliore, un TAG <title> unico che aiuti i motori di ricerca a capire in cosa la pagina si distingue dalle altre pagine del sito. Evitare. Usare un solo TAG <title> per tutte le pagine del sito o per molte di queste. Usare titoli brevi ma descrittivi: i titoli possono essere brevi e al tempo stesso ricchi d informazioni. Evitare Usare titoli eccessivamente lunghi, non utili per l utente. Riempire il titolo di parole chiave non necessarie. METATAG Il METATAG description di una pagina fornisce ai motori di ricerca un sommario HTML um 214 di 347

216 dell argomento della pagina. Mentre il titolo di una pagina dovrebbe essere composto da poche parole o da una frase, il METATAG description di una pagina può contenere una o due frasi o un breve paragrafo. Permettono d inserire informazioni nel TAG <head> delle pagine web. Aggiungere un METATAG description a ciascuna delle pagine è sempre utile nel caso il motore non trovi una buona selezione di testo da usare nella frase di descrizione (snippet). Nei risultati di ricerca, le snippet compaiono sotto il titolo di una pagina e sopra l URL della stessa. Le parole nella snippet sono in grassetto quando corrispondono a quelle digitate dall utente per la sua ricerca. Questo aiuta l utente a capire se il contenuto della pagina corrisponde a ciò che lui sta cercando. Tutti i METATAG sono impostati con il comando <meta> e sono elementi invisibili. <meta> ha due parametri obbligatori. 1. name indica il tipo di TAG meta, ad esempio, con il valore description, si può indicare una descrizione del sito. 2. content conterrà quindi un testo a piacere che può contenere anche segni di punteggiatura. Possono essere presenti più elementi <meta>. Molti motori di ricerca controllano il contenuto della descrizione e la confrontano con le parole chiave inserite dall utente. 3. Inserendo un nuovo METATAG e impostando per il parametro name il valore keywords, si possono indicare direttamente le parole chiave che identificano la pagina web; nel parametro content s inseriranno le parole chiave. Le parole devono essere distinte dal segno della virgola (,) conviene inserire keywords composte da più termini, in modo da distinguersi rispetto gli altri siti che contengono termini analoghi. Si può inserire un numero di parole chiave a piacere ma ogni motore di ricerca ha un limite massimo, oltre al quale smette di considerarle. <html> <head> <title> MetaTag</title> <meta name="description" content="insegnante a tempo indeterminato di Informatica Industriale Istituto Tecnico Industriale Statale Fauser Novara Sistemi Automazione e Laboratorio corsi extrascolastici corsi scolastici Sistemi Automazione e Laboratorio Architettura degli Elaboratori"> <meta name="keywords" content="insegnante a tempo indeterminato di Informatica Industriale, Istituto Tecnico Industriale Statale Fauser Novara, Sistemi Automazione e Laboratorio, corsi extrascolastici corsi scolastici, Sistemi Automazione e Laboratorio, Architettura degli Elaboratori > </head> <body </body> </html> È inutile inserire più volte le stesse TAG <meta>, i motori di ricerca sono in grado di riconoscere questi piccoli sotterfugi e castigano i siti che li contengono posizionandoli tra gli ultimi risultati della ricerca. Buone norme per l uso del METATAG description Descrivere accuratamente il contenuto della pagina: scrivere una descrizione che possa informare e interessare gli utenti che vedono il METATAG description come snippet in un risultato di ricerca. HTML um 215 di 347

217 Evitare. Scrivere un METATAG description che non ha relazione con il contenuto della pagina. Usare descrizioni generiche. Riempire la descrizione di sole parole chiave. Copiare e incollare tutto il contenuto del documento dentro il METATAG description. Usare una descrizione unica per ogni pagina: avere METATAG description diverse per ogni pagina aiuta sia il motore sia gli utenti, soprattutto per quelle query di ricerca attraverso cui gli utenti potrebbero ottenere molte pagine del dominio fra i risultati. Se il sito ha molte di pagine, scrivere manualmente i METATAG description è impossibile. In questo caso, si potrebbe generare in maniera automatica i METATAG description in base al contenuto di ogni pagina. Evitare. Usare un unico METATAG description per tutte le pagine del sito. Migliorare la struttura degli URL Creare categorie e nomi di file descrittivi per i documenti del sito è utile non solo per mantenere una buona organizzazione del sito stesso ma anche per aiutare i motori di ricerca a indicizzare i contenuti. Inoltre, questo è utile per creare URL più amichevoli e facili da usare per coloro che vogliono linkare il contenuto. I visitatori del sito potrebbero, infatti, essere confusi da URL estremamente lunghi e difficili che contengono poche parole riconoscibili. L URL di un documento è mostrato come parte di un risultato di ricerca di Google, sotto il titolo e la snippet del documento. Come il titolo e la snippet, le parole nell URL compaiono in grassetto nei risultati di ricerca se corrispondo ai termini della query di ricerca dell utente. Buone norme per definire la struttura di un URL Utilizzare delle parole nell URL: pertinenti al contenuto e alla struttura del sito, sono più intuitive per gli utenti che lo navigano; evitare. Usare lunghi URL con parametri e session id non necessari. Scegliere nomi generici per le pagine. Usare un numero eccessivo di parole chiave. Semplificare la struttura delle directory: organizzare bene il contenuto in modo che permetta ad un visitatore di capire in che area del sito si trovi. Utilizzare una struttura per le directory del sito che indichi il tipo di contenuto in un dato URL. Evitare. Avere una rete profonda di sotto cartelle. Utilizzare nomi di categoria che non abbiano alcuna relazione con il loro contenuto. Fornire una versione unica dell URL per raggiungere un dato documento: per prevenire che alcuni linkino ad una versione ed altri ancora ad un altra versione di un URL, fare in modo di riferirsi ad un URL nella struttura interna sempre nello stesso modo. Se visitatori differenti accedono allo stesso contenuto tramite URL diversi, implementare una redirezione; evitare. Avere pagine nei sotto domini e contemporaneamente nella root che puntino allo stesso contenuto. Mescolare versioni con il WWW e versioni senza il WWW nella struttura di linkaggio interna. Usare le lettere maiuscole. Rendere il sito semplice da navigare La navigazione di un sito web è importante per permettere ai visitatori di trovare velocemente il contenuto che desiderano. HTML um 216 di 347

218 Essa può inoltre aiutare i motori di ricerca a comprendere quale contenuto è ritenuto importante dal webmaster. Buone norme per la navigazione del sito Creare una gerarchia che segua il flusso naturale dei contenuti: rendere la navigazione più semplice possibile per gli utenti che vanno dal contenuto generale a quello più specifico. Aggiungere pagine navigazionali quando ha senso e inserirle efficientemente all interno della struttura del sito. Evitare. Creare reti complesse di link tipo: ogni pagina ha link ad ogni altra pagina sul sito. Esagerare con la creazione di strutture profondissime, tali da richiedere anche molti clic per raggiungere la pagina d interesse. Usare prevalentemente link di testo per la navigazione: avere link di testo rende l identificazione del contenuto del sito più semplice per i motori di ricerca. Evitare. Adottare una navigazione interamente basata su menu a tendina, immagini o animazioni. Navigazione a briciole di pane (breadcrumb): questo tipo di navigazione è una lista di link in linea in cima o in fondo alla pagina che permette ad un visitatore di tornare indietro verso la sezione precedente o verso l home page. Molti breadcrumb utilizzano l home page come primo link a sinistra e una lista di link verso le sezioni via via più specifiche andando verso destra. Usare una sitemap HTML sul sito e creare un file sitemap XML: una semplice pagina contenente i link a tutte le pagine del sito o almeno alle più importanti può essere utile. Creare un file sitemap XML permetterà ai motori di ricerca di trovare più facilmente le pagine del sito. Evitare. Lasciare che la sitemap HTML non sia aggiornata e tenere link rotti che non funzionano. Creare una sitemap HTML che elenchi le liste di link, ad esempio per argomento, senza organizzarle. Considerare cosa accade quando un visitatore taglia una parte dell URL: alcuni utenti potrebbero navigare il sito in maniere non proprio canoniche. Per esempio, al posto di utilizzare un link breadcrumb, l utente potrebbe tagliare l URL sperando di risalire al contenuto più generale. Usare delle pagine 404, errore Pagina non trovata che siano utili: gli utenti capiteranno occasionalmente su pagine che non esistono, sia perché hanno digitato un URL sbagliato sia perché hanno seguito un link rotto. Avere una pagina 404 personalizzata che guidi gentilmente il visitatore su una pagina utile, migliorerà di molto la sua esperienza sul sito. La pagina 404 dovrebbe avere un link di ritorno alla pagina principale e/o a pagine correlate, o a sezioni popolari del sito. Evitare. Permettere che le pagine 404 siano indicizzate dai motori di ricerca, assicurarsi che il server web sia configurato per restituire 404 HTTP status code quando pagine che non esistono sono richieste. Fornire solo messaggi vaghi del tipo Not found, 404 o addirittura nulla. Usare pagine 404 con un design completamente diverso dal resto del sito. Offrire contenuti utili Creare del contenuto utile ed originale è il fattore più importante per il sito. I visitatori riconoscono il contenuto di valore quando lo vedono e, come conseguenza, indirizzeranno altre persone verso di esso. Ciò avviene tramite blog post, social network, , forum ed altri mezzi online ed offline. HTML um 217 di 347

219 Il passaparola è infatti il mezzo più efficace per costruire la reputazione del sito. Buone norme per il contenuto Scrivere testo semplice da leggere: gli utenti apprezzano il contenuto ben scritto e facile da seguire. Evitare. Scrivere testo astruso con molti errori grammaticali. Inserire il testo all interno d immagini. Mantenere il contenuto organizzato intorno all argomento del sito: è consigliabile avere il contenuto organizzato in maniera tale che gli utenti siano sempre in grado di capire dove un certo contenuto inizia e dove finisce. Suddividere il contenuto in sezioni logicamente collegate aiuta il visitatore a trovare quello che cerca più velocemente. Evitare. Inserire enormi quantità di testo su argomenti vari in una pagina senza suddivisioni di layout, paragrafi. Utilizzare un linguaggio pertinente: ragionare sulle parole che un utente cerca per trovare il contenuto. Persone che sono già molto esperte sull argomento potrebbero utilizzare parole chiave diverse da chi lo conosce poco. Anticipare queste differenze e tenerne conto al momento della stesura del contenuto, usando un buon mix di parole chiave nel testo potrebbe produrre risultati positivi. Creare contenuto unico: avere contenuto nuovo non solo incentiverà gli utenti abituali a tornare ma ne attrarrà di nuovi. Evitare. Arrangiare o addirittura copiare contenuto già esistente, esso non fornirà che poco valore aggiunto per gli utenti rispetto a quello già presente nel web Avere contenuto duplicato o quasi duplicato all interno del sito. Creare contenuti e servizi esclusivi: valutare l idea di avere contenuti e servizi che nessun altro offre. Creare contenuto principalmente per gli utenti, non per i motori di ricerca: concepire un sito attorno alle esigenze degli utenti e renderlo al tempo stesso facilmente accessibile ai motori di ricerca produce spesso ottimi risultati. Evitare. Inserire parole chiave in eccesso solo per i motori di ricerca e non per gli utenti. Avere liste di parole chiave con errori del tipo parole errate frequentemente usate per raggiungere questa pagina, esse non rappresentano alcun valore aggiunto per gli utenti. Nascondere testo esclusivamente per i motori di ricerca. Utilizzare anchor text ottimizzati È il testo cliccabile dei link ed è posizionato all interno del TAG <a href="..."></a>. Questo testo dice qualcosa di utile sulla pagina linkata sia per gli utenti sia per i motori di ricerca. I link sulle pagine possono essere interni che puntano quindi a pagine del sito, o esterni che puntano a pagine di altri siti. In ognuno di questi casi quanto più l anchor text è appropriato, tanto più semplice sarà la navigazione per gli utenti. Buone norme per l uso degli anchor text Scegliere testi descrittivi: il testo che si usa come anchor text dovrebbe dare almeno un idea di base sul contenuto della pagina linkata. Evitare. Scrivere anchor text generici. HTML um 218 di 347

220 Usare testo che non abbia relazione con il contenuto. Usare l URL della pagina che si sta linkando. Usare testo conciso: l obiettivo dovrebbe essere quello di avere testo breve ma descrittivo. Evitare. Scrivere frasi molto lunghe o addirittura piccoli paragrafi per gli anchor text. Formattare i link in modo che siano semplici da individuare: rendere semplice l individuazione dei link da parte degli utenti in modo che siano facilmente distinguibili dal testo. Il contenuto diventa meno utile quando i link non sono di facile individuazione e sono cliccati accidentalmente o non sono trovati. Evita. Usare CSS o altri metodi che rendano i link uguali al testo. Utilizzare anchor text anche per i link interni: si potrebbe pensare che i link puntino principalmente all esterno del sito ma occorre prestare molta attenzione anche a quelli che puntano alle pagine interne perché questo permetterà agli utenti e a Google di navigare con facilità nel sito. Evitare. Usare troppe parole chiave e testi troppo lunghi solo per i motori di ricerca. Creare link non necessari alla navigazione. Utilizzare il TAG <heading> Sono usati per organizzare temi e sotto temi della pagina. Ci sono sei misure di TAG <heading>: si parte da <h1>, il più importante, fino ad arrivare ad <h6>, il meno importante. Poiché i TAG <heading> rendono il testo cui si riferiscono più grande del testo normale, tale formattazione aiuta visivamente gli utenti a comprendere l importanza dei contenuti della pagina. Una struttura multipla di TAG <heading> è infatti utilizzata per creare una gerarchia all interno del contenuto e questo facilita la navigazione al suo interno. Buone norme per l uso degli TAG <heading> Scrivere un sommario: pensare a quali saranno i punti principali e secondari del contenuto della pagina e decidere come usare le intestazioni in modo appropriato. Evitare. Porre nelle intestazioni testo che non è utile nel definire la struttura della pagina. Usare le intestazioni dove altri TAG come <em> o <strong> sarebbero più appropriati. Variare in modo irregolare la grandezza dei TAG <heading>:. Utilizzare le intestazioni con moderazione: usare le intestazioni quando ha senso farlo. Troppe intestazioni su una sola pagina possono creare difficoltà all utente nel leggere il contenuto e distinguere i vari argomenti. Evitare. Fare un uso eccessivo delle intestazioni. Inserire tutto il testo di una pagina dentro ad un intestazione. Usare le intestazioni a fini meramente grafici e non per definire la struttura del contenuto. Ottimizzare l uso delle immagini Per ogni immagine è bene creare un nome di file distinto e personalizzare l attributo alt che permette di specificare un testo alternativo che apparirà nel caso l immagine, per qualche motivo, non possa essere visualizzata. Se un utente sta visualizzando il sito con un browser che non supporta le immagini, o se sta utilizzando tecnologie alternative, come ad esempio uno screen reader, il contenuto dell attributo alt fornirà informazioni riguardo all immagine corrispondente. Se si sta usando un immagine come link, il testo alternativo per quell immagine sarà HTML um 219 di 347

221 trattato in modo simile all anchor text di un link testuale. Non ricorrere ad un uso eccessivo d immagini-link per la navigazione del sito, soprattutto quando i link testuali possono adempiere tale funzione. Buone norme per l uso delle immagini Usare nomi di file e testo alternativo brevi ma descrittivi: come altri elementi della pagina finalizzati all ottimizzazione, i nomi di file e il testo alternativo sono più efficaci quando sono corti ma descrittivi. Evitare. Usare termini generici quando possibile. Scrivere nomi di file eccessivamente lunghi. Riempire il testo alternativo di parole chiave o copiare e incollare intere frasi al suo interno. Fornire testo alternativo quando si usano le immagini come link: editare il testo alternativo può aiutare Google a comprendere meglio il contenuto della pagina cui tale collegamento porta, scrivere un anchor text per un link testuale. Evitare. Scrivere un testo alternativo eccessivamente lungo, in quanto potrebbe essere considerato SPAM. Usare solamente immagini come link per la navigazione nel sito. Raggruppare le immagini in una cartella a parte: invece di lasciare i file delle immagini sparsi in varie cartelle e sottocartelle del dominio. Usare formati di file comunemente supportati. Fare un uso efficace del file ROBOTS.TXT Comunica ai motori di ricerca se devono o no accedere e indicizzare le varie sezioni del sito e dev essere situato nella cartella principale. I bot di tutti i motori di ricerca conformi, contrassegnati dal simbolo asterisco (*), non devono accedere e indicizzare il contenuto presente in /IMG/. Ci sono diversi altri modi per evitare che il contenuto compaia nei risultati di ricerca, come aggiungere l attributo noindex al METATAG robots o utilizzare.htaccess a cartelle protette da password. Buone norme per l uso del file ROBOTS.TXT Utilizzare metodi più sicuri per il contenuto sensibile: è meglio non affidarsi al file ROBOTS.TXT per bloccare l accesso a materiale sensibile o confidenziale. I motori di ricerca potrebbero comunque fare riferimento all URL che si sta bloccando, mostrando soltanto l URL, non il titolo o la descrizione, nel caso ci siano collegamenti a quell URL da qualche parte in Internet, ad esempio da referrer log. Inoltre, motori di ricerca non conformi o meno sofisticati, ad esempio non uniformati al Robots Exclusion Standard, potrebbero non rispettare le istruzioni del file ROBOTS.TXT. Infine, un utente curioso potrebbe esaminare le cartelle e sotto cartelle nel file ROBOTS.TXT e indovinare l URL corrispondente al contenuto che non si vuole che sia visto. Criptare il contenuto o proteggerlo con password tramite l.htaccess sono metodi molto HTML um 220 di 347

222 più sicuri. Evitare. Sottoporre all indicizzazione pagine che offrono solamente risultati di ricerca, agli utenti non piace approdare da un motore di ricerca ad un ulteriore pagina di risultati di ricerca che non offre un significativo valore aggiunto. Sottoporre all indicizzazione un alto numero di pagine generate automaticamente, aventi identico o quasi identico contenuto. Sottoporre all indicizzazione URL creati come risultato di un servizio proxy. Tenere in considerazione il <rel="nofollow" per i link Se s inserisce un link ad un sito che non si ritiene attendibile e non si voglia passare a quel sito la reputazione del sito di partenza attribuire il valore nofollow all attributo rel all interno dell anchor TAG di quel link, questo fa sì che il motore di ricerca non segua quel link e non passi la reputazione della pagina del sito alla pagina cui quel link conduce. Per esempio, se nel sito si ha un blog i cui commenti sono abilitati, i link all interno dei commenti potrebbero passare la reputazione a pagine di cui non si conosce l affidabilità. Le sezioni di commento dei blog sono altamente esposte allo SPAM. Molti pacchetti di software per blog applicano automaticamente il nofollow ai commenti degli utenti. Lo stesso consiglio è valido per ogni altra sezione o area del sito in cui l inserimento di contenuto da parte degli utenti sia possibile, come ad esempio i guestbook, i forum, bacheche. Il nofollow può inoltre essere utile nel caso si voglia inserire un riferimento a un sito web all interno del contenuto ma senza passare ad esso la reputazione. Per esempio, immaginare di scrivere un blog post relativo allo SPAM nei commenti e di voler mettere in evidenza un sito che recentemente ha inserito SPAM nei commenti del blog. L intenzione è di allertare gli altri utenti riguardo quel sito, quindi includere il link al sito nel contenuto; tuttavia, di sicuro non si vuole dare al sito la reputazione tramite il link. In questa circostanza è opportuno usare il nofollow. Infine, se l interesse è di applicare il nofollow a tutti i link presenti in una pagina, si può usare nofollow nei METATAG robots, all interno del TAG <head> del codice HTML della pagina. Questa è la soluzione all interno del codice. <meta name= robots content= nofollow > STRATEGIA ALTERNATIVA Non esiste un unico modo per farsi riconoscere dai motori di ricerca e le variabili che entrano in gioco sono talmente tante che è impossibile apparire tra i primi posti su tutti i motori di ricerca presenti su Internet. <html> <head> <title> Strategia</title> </head> <body <h1>titolo della pagina</h1> <h2>titolo del paragrafo</h2> Testo della pagina </body> </html> HTML um 221 di 347

223 Le strategie che si analizzano, però, sono valide per quasi tutti i motori di ricerca e non sono considerate dagli spider come tentativi di SPAM. Usare sempre le TAG d intestazione, in questo modo il testo contenuto sarà considerato prioritario e significativo sui contenuti della pagina. Usare sempre il parametro alt nelle immagini e inserire nel testo alcune delle parole chiave. Ripetere tre volte il TAG <title>. Inserire i commenti HTML contenenti le parole chiave, sono elementi invisibili che contengono testo o codice HTML che è ignorato dal browser, il loro scopo originale è quello di aiutare in fase di sviluppo. <html> <head> <title> Strategia</title> < title > Strategia</ title > < title > Strategia</ title > </head> <body <h1>titolo della pagina</h1> <h2>titolo del paragrafo</h2> <!-- Materiale didattico, Informatica, Sistemi --> <img src = 1.GIF alt = Materiale didattico, Informatica, Sistemi > Testo della pagina </body> </html> Tra le cose da non fare mai, invece, c è scrivere un testo lunghissimo dello stesso colore dello sfondo. Gli spider riconoscono questo mezzo e ignorano il sito. Non usare mai le door pages, in altre parole delle pagine composte solo da parole chiave e recanti una METATAG che reindirizza sulla vera homepage del sito. Anche questo trucco è riconosciuto dagli spider. <meta http-equiv = refresh content = 0; url =home.html > Non usare testo nascosto per aumentare la densità delle keyword senza disturbare l utente, tecniche comuni includono usare testo dello stesso colore dello sfondo, layer invisibili, frame nascosti. I TAG <html> usati per inserire commenti all interno di una pagina sono un buon esempio. Sono nati per permettere l introduzione di brevi annotazioni. Non essendo visibili agli utenti che visitano la pagina web sono spesso abusati per far trovare ai motori di ricerca un po di keyword in più rispetto a quelle mostrate agli utenti. Nei siti che fanno uso di frame, il TAG <noframes> è stato ideato per mostrare testi a quei browser che non possiedono il supporto dei frame o che hanno temporaneamente disabilitato tale caratteristica. Un chiaro abuso del TAG <noframes> consiste nel riempirlo di keyword. Il TAG <noscript> è a volte usato per fornire contenuti alternativi a quei browser che non supportano il linguaggio indicato nel corrispondente TAG <script>. Quello che è nato per meglio supportare gli utenti dei browser testuali o dei browser meno aggiornati è spesso utilizzato come un ulteriore trucco per fornire ai motori di ricerca testi non visibili alla maggior parte degli utenti. HTML um 222 di 347

224 Google sta utilizzando strumenti di LSI (Latent Semantic Indexing) o LSA (Latent Semantic Analysis) che leggono un testo e permettono di determinare se questo è coerente o meno. TR (TRUSTRANK) L algoritmo suppone che, se un sito propone sempre risorse affidabili e linka solo contenuti di qualità, può legittimamente meritare la fiducia da parte dei SE (Search Engine) e può quindi aspettarsi di essere valutato come fonte più o meno autorevole nel suo settore. È un algoritmo implementato all interno dei parametri d indexing dei motori di ricerca: rispetto al PageRank di Google che analizza il numero dei link in ingresso su uno specifico documento, il TrustRank valuta qualitativamente i link in uscita da un determinato dominio. Introduce, inoltre, l idea dell esistenza di alcune pagine-seme in grado di funzionare come centri di diffusione del trust - se valutato in positivo, del distrust se applicato al negativo delle pagine SPAM, dei domini bannati dagli indici. Allo scopo di valutare l autorevolezza relativa di un profilo Twitter, è preso in considerazione il rapporto tra follower e following. SPAM (Spicy Pork And Ham) <html> <head> <title>spamming con la parola massimo</title> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="author" content=""/> <meta name="generator" content=""/> </head> <!- gli spammer inseriscono una lettera in più al centro di massimo ma con dimensioni piccolissime -> <!- il software antispam non è in grado di leggere correttamente la parola -> <!- gli spammer inviano e mail ad indirizzi inesistenti ma inseriscono nel campo mittente un indirizzo valido -> <!- l e mail non può essere consegnata, quindi il server di posta la rispedisce al mittente -> <body> <!- gli spammer inseriscono uno spazio tra le lettere e contemporaneamente -> <!- impostano a zero le dimensioni dello spazio -> M<font size=0> </font> A<font size=0> </font> S<font size=0> </font> S<font size=0> </font> I<font size=0> </font> M<font size=0> </font> O <p> </p> <!- gli spammer vogliono che l utente veda un messaggio, mentre il software antispam ne vede un altro -> <!- che non contiene tracce di spam. Il messaggo innocuo ha lo stesso colore dello sfondo -> <body bgcolor=white> massimo <font color=white>ciao, mondo</font> <p> </p> <!- lo spammer scrive la parola utilizzando il codice ascii -> M<font size=0> </font> a<font size=0> </font> HTML um 223 di 347

225 s<font size=0> </font> s<font size=0> </font> i<font size=0> </font> m<font size=0> </font> o </body> </html> HTML um 224 di 347

226 GOOGLE INTRODUZIONE Nel 1998 due studenti di Stanford, Sergey Brin e Larry Page progettano Google, deriva da googol, termine coniato da Milton Sirotta, nipote del matematico americano Edward Kasner, indica il numero 1 seguito da 100 zeri. Ricerche di base Per effettuare una ricerca, immettere alcune parole descrittive, quindi premere il tasto INVIO oppure fare clic sul pulsante Cerca per elencare i risultati più rilevanti. Quando Google analizza una pagina, esamina anche il contenuto delle pagine associate, dando la precedenza a quelle in cui i termini ricercati sono presenti in sequenza. Ricerche con AND automatico Google visualizza solo le pagine che contengono tutti i termini ricercati, aggiungendo automaticamente l operatore booleano AND. Per limitare ulteriormente la ricerca, è sufficiente aggiungere altri termini. Parole comuni Google ignora le parole e i caratteri comuni, denominati anche stop words, scartando automaticamente termini come HTTP e.com nonché alcune singole cifre e lettere, poiché questi termini non aiutano a restringere il campo di ricerca ma anzi contribuiscono a rallentare i tempi di ricerca. Utilizzare il segno (+) per includere parole comuni nella ricerca. Ricordarsi di lasciare uno spazio prima del segno (+). Il segno (+) può essere utilizzato anche per la ricerca di frasi. Visualizzazione del contesto di ricerca Tutti i risultati trovati da Google contengono una o più sintesi della pagina web che mostrano il contesto in cui sono utilizzati i termini ricercati. Ricerca di radici di parole: stemming Per garantire la massima precisione nei risultati, Google non supporta la ricerca di radici di parole, stemming né le ricerche con caratteri jolly. In altre parole, Google cerca solo le parole esatte digitate nel campo di ricerca. Se s inserisce googl o googl*, il risultato non sarà googler o googlin. In caso di dubbio, provare ad usare sia il singolare sia il plurale; ad esempio linea aerea e linee aeree. Lettere maiuscole/minuscole o accenti Google non fa distinzione tra lettere minuscole e maiuscole poiché considera tutte le HTML um 225 di 347

227 lettere come minuscole. Ad esempio, digitando google, GOOGLE e GoOgLE si ottengono sempre gli stessi risultati. Per impostazione predefinita, Google non riconosce accenti o altri segni diacritici. In altre parole, se si digita [Muenchen] e [München] si ottengono sempre gli stessi risultati. Per fare una distinzione tra le parole, anteporre il segno + ; ad esempio [+Muenchen] rispetto a [+München]. Interpretazione dei risultati A Collegamenti superiori Visualizza la pagina che permette d impostare parametri che limitino l ambito della ricerca. Web: consente di effettuare una ricerca su tutti i siti web indicizzati. Immagini: consente di effettuare una ricerca per immagini. Gruppi: consente di accedere ai gruppi di discussione. Directory: visualizza i contenuti presenti sul web per canali in modo che l utente possa semplicemente selezionare le categorie desiderate per trovare le parole chiave da utilizzare per le ricerche. Tuttavia, per trovare una categoria specifica, è possibile anche fare clic su uno dei collegamenti visualizzati. News: è un servizio automatizzato che organizza e presenta notizie raccolte da 250 fonti d informazione in Italiano, aggiornate incessantemente, consentendo di cercare ed esaminare diverse interpretazioni di un determinato avvenimento. B Pulsante Cerca Selezionare questo pulsante per effettuare un altra ricerca. In alternativa, è possibile anche utilizzare il tasto INVIO. C Ricerca avanzata Visualizza la pagina che permette di restringere i campi di ricerca per effettuare delle ricerche avanzate. HTML um 226 di 347

228 Strumenti per le lingue Consente di accedere al servizio di traduzione. D Campo di ricerca Per effettuare una ricerca, è sufficiente inserire alcune parole chiave descrittive e premere INVIO oppure fare clic sul pulsante Cerca per visualizzare i risultati più rilevanti. E Preferenze Visualizza la pagina che permette d impostare le preferenze per le ricerche quali il numero predefinito di risultati da visualizzare su ciascuna pagina, la lingua dell interfaccia e l uso del filtro SafeSearch. Mi sento fortunato Permette di visualizzare automaticamente la prima pagina web trovata da Google. Gli altri risultati non sono visualizzati. L uso di questo pulsante permette di ridurre i tempi di ricerca e di dedicare più tempo alla consultazione delle pagine web desiderate. Pagine provenienti da: Italia Mostra le pagine web che si trovano in Italia. Pagine in italiano Mostra solo i risultati delle pagine che sono in italiano. Web Sono mostrati i risultati disponibili in qualsiasi lingua. F Riga delle statistiche Questa riga fornisce indicazioni sulla ricerca effettuata e indica il numero di risultati trovati nonché i tempi di ricerca. G Suggerimenti Informazioni per rendere più efficaci le ricerche basate sui termini appena ricercati. Offrono maggiori dettagli sulle funzionalità speciali di Google e indicano gli strumenti per risparmiare tempo. H Risultati OneBox Google include molte risorse d informazioni specializzate e quelle più attinenti alle ricerche effettuate, sono riportate in cima ai risultati di ricerca. Queste informazioni sono chiamate risultati onebox perché accessibili da qualsiasi casella di ricerca Google. Tipici risultati onebox includono notizie, quotazioni di borsa, previsioni del tempo e siti web locali correlati alla ricerca. I Titolo della pagina La prima riga di un risultato è costituita dal titolo della pagina web trovata. Qualche volta, al posto del titolo è visualizzato un URL a indicare che la pagina non ha un titolo oppure che Google non ha incluso nell indice tutto il contenuto della pagina stessa. La pagina è proposta tra i risultati perché altre pagine web già indicizzate contengono collegamenti che rimandano ad essa. Se il testo associato a questi collegamenti contiene la parola ricercata, è possibile che la pagina sia inclusa nell elenco dei risultati anche se il testo completo della pagina web non è stato incluso nell indice. HTML um 227 di 347

229 J Testo sotto il titolo Questo testo rappresenta la sintesi della pagina web trovata e contiene i termini ricercati evidenziati in grassetto. Questa sintesi permette di vedere in quale contesto sono utilizzati i termini e di decidere se aprire o meno i risultati. K URL della pagina web Indica l indirizzo Internet della pagina web trovata. L Dimensioni Questo numero indica le dimensioni della sezione di testo della pagina web trovata. Non sono visualizzate dimensioni per i siti non ancora indicizzati. M Versione della cache La selezione del collegamento della versione cache permette di visualizzare la copia archiviata della pagina web così come si presentava al momento della sua indicizzazione. Questa funzione permette di visualizzare una copia del sito per ricercare le informazioni desiderate nel caso in cui non si possibile collegarsi direttamente alla pagina web. I termini ricercati sono evidenziati anche nella versione cache. N Pagine simili Selezionare questo collegamento per un risultato specifico per ricercare automaticamente sul web altre pagine correlate a questo risultato. O Risultato con rientro a sinistra Nel caso in cui Google trovi più risultati all interno di uno stesso sito web, visualizza per primo nell elenco il risultato più rilevante. Gli altri risultati sono visualizzati con un rientro a sinistra. Ottimizzazione delle ricerche Suggerimenti generali Poiché Google visualizza solo le pagine che contengono tutte le parole ricercate, per ottimizzare o restringere le ricerche è sufficiente aggiungere altre parole a quelle già inserite. Se si aggiungono altre parole, sarà visualizzato un sottoinsieme delle pagine visualizzate dopo la prima ricerca. Esclusione di parole da una ricerca Per escludere una parola dalla ricerca, è sufficiente inserire il segno meno (-) davanti al termine da escludere, ricordarsi d inserire anche uno spazio prima del segno meno. Ricerca di frasi Per ricercare le frasi con Google, è sufficiente racchiuderle tra virgolette. In tutti i documenti trovati, la frase ricercata risulterà racchiusa tra virgolette a meno che tali parole non siano parole comuni o parole comuni speciali che richiedano l uso del segno (+). L uso delle virgolette è particolarmente utile se si ricercano detti famosi o nomi specifici. Alcuni caratteri sono utilizzati come elementi di unione tra più frasi. Google riconosce i trattini, le barre oblique, i punti, il segno uguale e gli apostrofi come elementi di unione. HTML um 228 di 347

230 Ricerca per categorie La directory Google è uno strumento molto utile per effettuare ricerche limitate su un argomento specifico. Ad esempio, per visualizzare solo risultati relativi al pianeta Saturno, è sufficiente selezionare Saturno nella categoria Scienze > Astronomia della directory Google. In questo modo si evita che siano visualizzati risultati relativi alla macchina Saturn, al gioco omonimo o altri risultati che possano essere correlati al termine Saturno. Le ricerche all interno di categorie specifiche permettono di restringere il campo di ricerca e di visualizzare rapidamente solo le pagine desiderate. Ricerche avanzate In molti casi, è sufficiente aggiungere altre parole a quelle iniziali per restringere il campo di ricerca fino a trovare le informazioni desiderate. Google fornisce all utente numerosi funzioni di ricerca. Limitare la ricerca alle pagine contenute in un sito web specifico. Escludere dalla ricerca alcune pagine di un sito web specifico. Ricercare solo le pagine disponibili nella lingua selezionata. Trovare tutte le pagine collegate ad un sito web specifico. Trovare tutte le pagine correlate ad un sito web specifico. Funzioni speciali di Google Titoli notizie Quando si effettua una ricerca su Google, in testa ai risultati di ricerca potrebbero apparire alcuni collegamenti introdotti dal termine Notizie. Questi collegamenti riportano ad articoli estratti da notiziari costantemente monitorati da Google. I collegamenti appaiono solo se i termini ricercati risultano parole attualmente usate negli articoli, facendo clic sul collegamento si è direttamente portati al sito dell articolo. Calcolatrice Per usare la funzione calcolatrice di Google, inserire nello spazio di ricerca l espressione che si desidera risolvere e fare INVIO o cliccare su Cerca. La calcolatrice può eseguire espressioni matematiche di semplice aritmetica (5+2*2 or 2^20) e più complicate come (e^(i pi)+1). È possibile fare calcoli con altri sistemi di numerazione, come esadecimale e binario. Esempio, 01010B in decimal. Le quotazioni del cambio Con Google è possibile ottenere la quotazione delle monete dei vari paesi. Basta immettere una stringa del tipo 34 USD in EUR per ottenere la conversione di 34 dollari americani in euro. 1 EUR in NZD. Pesi e misure Con Google è possibile convertire una qualsiasi unità di misura in un altra. Basta scrivere 46 cm in inch per sapere a quanti pollici corrispondono 46 cm. Si possono specificare le unità di misura di ogni paese specificando la sigla internazionale. Traduzione di pagine web L uso di questa tecnologia di traduzione automatica permette ad utenti di lingua inglese di accedere ad una vasta gamma di pagine web in altre lingue. Se i risultati della ricerca comprendono pagine in lingue diverse dall inglese, è visualizzato HTML um 229 di 347

231 anche il collegamento alla versione inglese della pagina. Per visualizzare la traduzione dei titoli e delle sintesi dei risultati delle ricerche in inglese, è possibile attivare l opzione di traduzione nella pagina Preferenze. Se si attiva quest opzione, Google traduce automaticamente i risultati della ricerca in inglese. Ricerca di file PDF (Portable Document Format) I risultati contenenti file PDF riportano l indicazione blu [PDF] davanti al titolo. Se si seleziona un risultato contenente questo tipo d indicazione, è aperto automaticamente Acrobat Reader per consentire la visualizzazione del file. Per i file PDF, al posto dell indicazione Versione cache è visualizzata l indicazione Versione testo che contiene una copia del documento PDF senza i relativi elementi di formattazione. Per visualizzare i risultati senza i collegamenti PDF, digitare FILETYPE:PDF nel campo di ricerca insieme ai termini ricercati. Versioni cache Google acquisisce un istantanea di ciascuna pagina indicizzata durante la scansione del web e la rende disponibile come copia di backup nell eventualità in cui la pagina originale non sia disponibile. La selezione di quest opzione permette di visualizzare la pagina web con lo stesso layout con cui è stata indicizzata. Il contenuto salvato nella cache è quello utilizzato da Google per verificare se la pagina soddisfa o non i requisiti di ricerca. La parte superiore della versione cache della pagina contiene un intestazione che serve a ricordare all utente che si tratta della versione cache e non della versione originale. Nella versione cache sono anche evidenziati i termini ricercati per permettere all utente di comprendere il motivo per cui la pagina è considerata rilevante. L opzione Versione cache non è presente per i siti non ancora indicizzati e per i siti che sono stati rimossi dall indice su richiesta dei proprietari. HTML um 230 di 347

232 Pagine simili La selezione di quest opzione permette di ricercare automaticamente pagine web correlate ai risultati visualizzati. Se si ritiene un sito particolarmente interessante, è possibile utilizzare quest opzione per trovare siti simili non ancora visitati che contengano lo stesso tipo di contenuti. Quest opzione è particolarmente utile per trovare informazioni complete su vari tipi di prodotti e scegliere l offerta migliore. Se si sta effettuando la ricerca in un campo specifico, quest opzione permette di trovare rapidamente numerose risorse senza perdere tempo a pensare alle eventuali parole chiave che potrebbero essere contenute su tali siti. I risultati della ricerca possono essere tuttavia più limitati se il contenuto della pagina è molto specifico. Ad esempio, Google può non essere in grado di trovare pagine correlate alla propria homepage se questa non contiene informazioni sufficienti a consentirne l associazione ad altre pagine. Inoltre, nel caso di società che utilizzano più URL per le proprie pagine, ad esempio google.com e è possibile che un URL contenga più informazioni dell altro. Collegamenti ad altri siti Alcune parole seguite da due punti hanno un significato speciale per Google. Una di queste parole è l operatore link:. L uso di quest operatore permette di visualizzare tutte le pagine associate all URL specificato nel campo di ricerca. Ad esempio, link: permette di visualizzare tutte le pagine associate alla pagina principale di Google. Non è possibile utilizzare l operatore link: e contemporaneamente selezionare dei termini ricercati. Limitazioni per i domini Alcune parole seguite da due punti hanno un significato speciale per Google. Una di queste parole è l operatore site:. Per ricercare un sito specifico, inserire l istruzione site:sampledomain.com nel campo di ricerca; per ricercare un dominio site:.it. Definizioni Per visualizzare la definizione di una parola o di una frase, digitare la parola definizione quindi uno spazio e poi la parola o le parole di cui si desidera la definizione. Se Google individua nel web una definizione per quella parola o frase, la recupera e la visualizza all inizio dei risultati della ricerca. Inoltre, è possibile ottenere un elenco di definizioni utilizzando l operatore speciale define: senza lasciare spazi tra l operatore stesso e il termine o i termini di cui si desidera trovare la definizione. Ad esempio, la ricerca define:html produce un elenco di definizioni di HTML raccolte da varie fonti online. PR (PAGERANK) Una delle caratteristiche peculiari di Google è stata la possibilità di analizzare in modo ricorsivo i collegamenti del web a ritroso, in altre parole i link che puntano verso una determinata pagina. Questo meccanismo è alla base del PR, l elemento fondante dell architettura di Google. Si tratta di una stima dell importanza che una pagina web ricopre all interno d Internet, HTML um 231 di 347

233 basata sul numero di citazioni che la pagina stessa riceve all interno della rete. Alla base del PR vi è una formula matematica ben precisa: assumendo che una pagina A sia citata dalle pagine T1, T2, T3 Tn ovvero queste ultime abbiano un link che punta verso A e che C(T) sia il numero totale di link presenti su una pagina T, il PR di A, PR(A) è il seguente. PR(A) = (1-d) + d (PR(T1)/C(T1) PR(Tn)/C(Tn)) Tralasciando il fattore d e il primo termine (1-d), si nota come la formula sia ricorsiva, ovvero come il calcolo del PR di una pagina A presupponga la conoscenza dei PR di tutte le altre pagine esaminate. Il PR può essere calcolato usando un algoritmo iterativo e corrisponde all autovettore principale di una matrice di link del web normalizzata. Questo vuol dire che si può calcolare il PR di una pagina senza sapere il PR finale delle altre pagine. Può sembrare strano ma siccome l algoritmo è iterativo, a ogni computazione ci si avvicina sempre di più al valore finale. Si deve solo ricordare l ultimo valore calcolato e ripetere la computazione molte volte finché i numeri smettono di variare in modo rilevante. Esempio, due pagine che si linkano a vicenda. Ognuna ha un solo link in uscita (C(A) = 1 AND C(B) = 1). Non conoscendo il loro PR si prova con un numero a caso, per esempio uno e si fa qualche calcolo: d = 0.85 PR(A) = (1 - d) + d(pr(b)/1) PR(B) = (1 - d) + d(pr(a)/1) In pratica. PR(A) = * 1 = 1 PR(B) = * 1 = 1 Molta fortuna oppure c è qualcosa di sbagliato. Provare con un altro numero di partenza, per esempio 0.5. Prima iterazione. PR(A) = * 0 = PR(B) = * = Seconda iterazione. PR(A) = * = PR(B) = * = Terza iterazione. PR(A) = * = PR(B) = * = HTML um 232 di 347

234 Si arriva a uno? Provare con un altro numero di partenza maggiore di uno, per esempio 10. Prima iterazione. PR(A) = * 10 = 8.65 PR(B) = * 8.65 = Seconda iterazione. PR(A) = * = PR(B) = * = Terza iterazione. PR(A) = * = PR(B) = * = I numeri tendono decisamente a uno, non è quindi importante il valore di partenza, l algoritmo ci porterà inevitabilmente al risultato stabile. Quante volte è necessario ripetere il calcolo per i grandi network, ci possono volere milioni d iterazioni. Il fattore smorzante ha un influenza importante, se è troppo alto servirà troppo tempo per far convergere i numeri, se è troppo piccolo si supera ripetutamente la convergenza. Scegliere l ordine in cui si eseguono i calcoli è anche importante, si giungerà alla convergenza in ogni caso ma se si segue un certo ordine ci si arriverà più in fretta. Si può vedere come il PR, ovvero l importanza di una pagina, dipenda da quanto questa sia citata da altre pagine; inoltre, il voto di una pagina pesa tanto più quanto questa pagina è importante, ovvero goda a sua volta di un buon indice PR. Applicato a un motore di ricerca, il meccanismo di PR consente di restituire le pagine in un ordine ben preciso, sulla base di un oggettiva importanza delle medesime. In questo modo, ad esempio, la ricerca George Bush restituisce in primo luogo pagine di enciclopedie o fonti istituzionali e non un qualsiasi blog con barzellette e aneddoti. Esempio, progettare il PR per le seguenti quattro pagine web. HTML um 233 di 347

235 Già dopo dieci iterazioni i valori convergono al PR seguente. È interessante notare che nonostante la pagina D non abbia link in entrata ha comunque un PR di Questo, anche se sembra sbagliato, diventa ovvio guardando la formula. PR(A) = (1-d) + d (PR(T1)/C(T1) PR(Tn)/C(Tn)) PR(A) = (1-d) + d * (0) = 0.15 Nella configurazione iniziale, bisogna specificare almeno il numero delle colonne, infatti, la definizione è la seguente, BOOL webmatrix[][4]. Il numero delle righe è dedotto dalla definizione, il C, infatti, alloca 16 BOOL consecutivi ma se non gli si dice quante colonne ci sono, non sa come trovare i vari elementi. Infatti, un elemento come webmatrix[2][2] è traslato in webmatrix[2*numcols+2] e quindi il numero delle colonne dev essere noto a compile-time. #include <stdio.h> #include <stdlib.h> #include <malloc.h> /* il C non ha un tipo BOOL, è scomodo scrivere unsigned char, definisco un alias */ typedef unsigned char BOOL; double* iteration(bool* matrix,double* pagerank,double damping,int sizex,int sizey,int* totalsperlines); int* calculatetotalsperlines(bool* matrix,int sizex,int sizey); int main(void) { const double damping=0.85; int iterations=10;int* totalsperlines; const int guess=1; BOOL webmatrix[][4]= { {0,1,1,0}, {0,0,1,0}, {1,0,0,0}, {0,0,1,0} }; system("cls"); /* calcolo la dimensione della matrice */ int SIZEX=sizeof(webMatrix[0]); int SIZEY=sizeof(webMatrix)/SIZEX; /* alloco la memoria per i risultati ricordarsi di liberarla prima di uscire */ double* pagerank=(double *)malloc(sizeof(double)*sizey); /* se voglio riempire pagerank di "guess", tanto vale che ce lo copi direttamente dentro */ for(int i=0;i<sizey;++i) pagerank[i]=guess; /* calculatetotalsperlines alloca memoria, ricordarsi di liberarla prima di uscire */ HTML um 234 di 347

236 totalsperlines=calculatetotalsperlines(&webmatrix[0][0],sizex,sizey); /* OK, iterazione principale */ while(iterations--) { pagerank=iteration(&webmatrix[0][0],pagerank,damping,sizex,sizey,totalsperlines); } /* stampo i risultati */ for(int i=0;i<sizey;++i) printf("pagerank [%d]-> %01.2f\n",i,pagerank[i]); /* libero la memoria allocata */ free(pagerank); free (totalsperlines); system("pause");return (0); } double* iteration(bool* matrix,double* pagerank,double damping,int sizex,int sizey,int* totalsperlines) { for(int i=0;i<sizex;++i) { double sum=0.0; for(int y=0;y<sizey;++y) { sum+=(matrix[y*sizex+i]?(pagerank[y]/totalsperlines[y]):0); } /* con qualche semplice passaggio algebrico */ pagerank[i]=1+damping*(sum-1); } return pagerank; } int* calculatetotalsperlines(bool* matrix,int sizex,int sizey) { int* totalsperlines=(int *)malloc(sizeof(bool)*sizex); for (int n=0;n<sizex;++n) { totalsperlines[n]=0; for(int i=0;i<sizey;++i) totalsperlines[n]+=matrix[sizex*n+i]; } return totalsperlines; } Oltre a PR, Google sfrutta l analisi del testo di link, Anchor Text: associando l Anchor Text al documento verso cui punta è possibile indicizzare numerosi contenuti che non sono normalmente trattabili da un normale motore di ricerca, come immagini, applicazioni, database, filmati. Inoltre, l Anchor Text può consentire una qualità maggiore nei risultati, poiché spesso la stringa descrive il documento in modo più preciso rispetto al contenuto stesso. Esempio. Col passare degli anni e nonostante la crescita esponenziale del sistema, il cuore dell architettura è rimasto il medesimo; sono comunque state implementate e affinate altre tecniche di ricerca che includono l analisi della prossimità dei documenti e quella della formattazione delle pagine tenendo ad esempio in considerazione il font o la posizione HTML um 235 di 347

237 delle citazioni. Servizi GMail Account di posta elettronica che consente di avere una casella di 2 GB, la massima dimensione dei file è di 10 MB. Per potersi registrare al servizio è necessario ottenere un invito da parte di un utente che abbia già un account. Grazie all applicazione GmailDrive è possibile trasformare l account in un hard disk virtuale. Google Print Consente di accedere ad un database contenente una biblioteca virtuale. Basta effettuare la ricerca per ottenere l elenco dei libri indicizzati e che è possibile consultare online. Per problemi di copyright l accesso ai contenuti è limitato: è possibile visualizzare fino ad un massimo di tre pagine consecutive. Effettua una ricerca solo sui siti di e-commerce per conoscere le migliori offerte relative ad un prodotto. Si può ridurre il numero dei risultati impostando la fascia di prezzo all interno della quale si è disposti ad acquistare il prodotto. Google Video Permette di cercare e visualizzare, mediante un player da installare sul proprio PC, una serie di filmati contenuti sui server di Google. Per visualizzare i video è necessario andare sul sito scaricare ed installare il player. Google Earth Consente di visualizzare il globo terrestre e di effettuare ricerche su località specifiche per controllare cartine e immagini satellitari. È accessibile mediante un software scaricabile gratuitamente sul proprio PC da Google Map Consente di cercare una località e ottenere una cartina o una visualizzazione dal satellite. Con i tasti freccia ci si sposta all interno dell area per selezionare il punto preciso da visualizzare mentre con quelli (+) e ( ) si può modificare il livello di zoom. Google Talk Consente di chattare o di effettuare una conversazione a voce con altri utenti che si sono registrati al servizio GMail. Non è un VOIP ma un instant messenger. Google Hacking Permette di trovare informazioni private, visualizzare webcam nascoste o accedere a risorse installate su altri PC collegati in rete, mediante speciali stringhe da utilizzare nel campo di ricerca. Nel sito andare nella sezione Google Hacking Database. Si possono ottenere risultati simili digitando la stringa nel campo di ricerca. HTML um 236 di 347

238 Per trovare tutti i documenti contenenti password: filetype:dat password.dat. Per trovare password di canali IRC: set mode:+k. Per trovare documenti multimediali: intitle: index of -inurl:html mp3 elenca i file MP3. Per trovare tutte le webcam di Panasonic: inurl: Viewer-Frame?Mode=. Google Desktop La ricerca sul PC dev essere facile come la ricerca sul web. Per consentirti di eseguire facilmente ricerche sul PC, Google Desktop indicizza e memorizza le versioni dei file e altre attività del PC, quali , chat e cronologia web. Google Office Permette di usare le applicazioni di office automation via Internet. HTML um 237 di 347

239 WOLFRAM ALPHA INTRODUZIONE È un motore computazionale della conoscenza che decodifica ed elabora, intrecciando i dati a sua disposizione, base di conoscenza, esibendo definizioni o eseguendo calcoli e confronti secondo i casi, invece di cercare nel web e restituire una lista di collegamenti ipertestuali, come fa un motore di ricerca. Partorito dal genio di Stephen Wolfram (Londra, 29 agosto 1959) conosciuto per aver sviluppato il software Mathematica. È un software molto complicato che elabora dei precisi input sia in linguaggio matematico sia in linguaggio naturale, fornendo una risposta dettagliata alla domanda. Il modo in cui si pone la domanda può dunque influenzare l efficacia della risposta. Wolfram Alpha, come specifica il suo stesso creatore, si pone l obiettivo di trovare un modo per rendere computabile la conoscenza sistematica che abbiamo sin qui accumulato filtrandola, riorganizzandola ed elaborandola in modo da rispondere alle esigenze specifiche dell utente. Per adempiere a questo, occorre prendere le domande che le persone pongono in un linguaggio naturale e rappresentarle in una forma precisa che possa andar bene alle computazioni che è possibile fare. La struttura del computational knowledge engine, è costituito da circa 6 milioni di linee di codice di Mathematica. Attivato il 18 maggio 2009, l indirizzo è il seguente. HTML um 238 di 347

240 BING (BING IS NOT GOOGLE) INTRODUZIONE Bing è il nuovo motore di ricerca rilasciato da Microsoft il 3 giugno È un motore di ricerca di nuova generazione, in grado di comprendere ciò che l utente desidera ricercare anche con poche parole chiave, inoltre sarà in grado di riportare anche i risultati di Wolfram Alpha. La piattaforma Bing espone una serie di servizi fruibili attraverso tanti linguaggi di sviluppo, da HTML, passando per il PHP fino a giungere a linguaggi come Visual Basic. Il nome BING è stato scelto per il fatto di essere onomatopeico, in modo da ricordare il suono del campanello che si sente quando si trova la soluzione a un problema, è anche un acronimo ricorsivo. Bing mobile È fruibile anche da dispositivi mobile, l indirizzo è il seguente. La piattaforma offerta da Bing espone una serie di servizi che permettono d interrogare la base dati del motore di ricerca con diverse modalità che si chiamano protocolli, con differenti endpoint, in altre parole indirizzi web cui richiedere il servizio e utilizzando diverse sorgenti di ricerca. I protocolli d interrogazione sono i seguenti. XML. SOAP (Simple Object Access Protocol) usato per lo scambio di messaggi tra componenti software, si muove sopra tutti i protocolli internet ma HTTP è il più utilizzato. JSON, è basato sul linguaggio JavaScript, è usato in AJAX come alternativa a XML/XSLT. Il primo passo per utilizzare i servizi offerti da Bing è di generare un AppID, in pratica una stringa di 40 caratteri che permette di essere riconosciuti nel momento in cui si effettua una ricerca, per fare questo è sufficiente avere un account LiveID. RICERCA Nel momento in cui si effettua una ricerca, si deve specificare quali sono le parole chiavi e che genere di risultato si vuole ottenere. Il tipo di risultato richiesto rappresenta la fonte di ricerca. Bing prevede undici tipi di fonti di ricerca. 1. Ad: ricerca d inserzioni pubblicitarie, utile se si decide di mostrare agli utenti dei banner specifici. 2. Image: è effettuata la ricerca d immagini che soddisfano le parole chiavi inserite. 3. InstantAnswer: permette di avere risposte a domande quali quanti secondi ci sono in un anno?. 4. MobileWeb: permette di ricercare contenuti web per dispositivi mobile. 5. News: effettua una ricerca per ottenere notizie che verificano le parole di ricerca inserite. 6. Phonebook: dettagli su attività commerciali come indirizzi, numeri di telefono e informazioni analoghe. 7. RelatedSearch: contenuti legati alla ricerca effettuata e di possibile interesse. 8. Spell: risultati con uno spelling simile a quello ricercato. 9. Translation: traduzioni tra differenti lingue. HTML um 239 di 347

241 10. Video: ricerca contenuti video correlati alla ricerca effettuata. 11. Web: effettua la classica ricerca di contenuti web. Ogni fonte di ricerca dispone di parametri opzionali che possono essere utilizzati per affinare le ricerche e ottenere risultati più aderenti al target degli utenti dell applicazione. In una richiesta Bing possono essere utilizzate anche più fonti di ricerca contemporaneamente. Le interrogazioni a Bing sono effettuate con richieste Get all indirizzo web seguente. /xml.aspx La sintassi minima di una richiesta Bing è la seguente. Appid=<appid>&query=<parole chiave da ricercare>&sources=<elenco fonti di ricerca> Appid contiene l AppID ottenuto in precedenza dal sito per sviluppatori di Bing. query è l elenco delle parole da ricercare, separate dal carattere (+). sources è l elenco delle fonti di ricerca da utilizzare separate dal carattere (+). Ad esempio, se si desidera ricercare le immagini relative alle parole chiave ricerca si deve inoltrare la seguente richiesta. Image e il risultato ottenuto. L elenco dei risultati può essere variato con l utilizzo di un opportuno parametro nella query string della richiesta che può essere estesa utilizzando due tipologie di parametri. 1. Generali: dichiarati una sola volta e validi per tutte le fonti di ricerca Version: rappresenta la versione dell API di Bing che s intende utilizzare, se non impostato è preso il valore Market: rappresenta la nazione/cultura per cui dev essere effettuata la ricerca, ad esempio it-it per la lingua italiana in Italia, se non è impostato, il motore di Bing cerca di dedurre la lingua tramite algoritmi quali l indirizzo IP e così via Adult: indica il filtro per adulti impostato per la ricerca, se non impostato, è preso il valore di default, dipendente dal market selezionato, i possibili valori del parametro sono i seguenti Off non è utilizzato alcun filtro Moderate i risultati della ricerca non includono immagini o video Strict i risultati non debbono includere né testo, né immagini e foto Options: permette d impostare proprietà comuni a tutte le sorgenti di ricerca, come l abilitazione del riconoscimento automatico della nazione Latitude: imposta la latitudine geografica in cui centrare la ricerca in modo da rendere la ricerca più accurata Longitude: imposta la longitudine geografica in cui centrare la ricerca in modo da renderla più accurata UILanguage: imposta la lingua dell interfaccia grafica Radius: imposta il raggio di ricerca per la richiesta, da utilizzare in combinazione con latitudine e longitudine per rendere più accurata la ricerca. 2. Particolari: differenti per ogni fonte di ricerca, usa la sintassi: <nome fonte>.<parametro> Count: specifica il numero di record da restituire, se non impostato il valore è Offset: specifica il numero del primo record dei risultati di ricerca, se non impostato il valore è 0, questo parametro è utile, utilizzato assieme al parametro Count, per gestire una paginazione dei risultati lato server, prelevando solamente i record strettamente necessari alla visualizzazione di una determinata pagina. HTML um 240 di 347

242 PROGETTAZIONE SITI WEB Introduzione Il web è un luogo di lavoro e condivisione, da non confondere con la televisione. Non possono essere accomunati perché sono entrambi supportati da uno schermo. La differenza tra i due mezzi risiede nel rapporto con gli utenti: il web è un medium on demand in cui l utente richiede le informazioni con un atto di volontà, mentre la televisione è un mezzo broadcast che lascia lo spettatore passivo di fronte all offerta dei contenuti. La TV è fatta per essere guardata, il web per compiere azioni. Quando un visitatore apre una home page, la possibilità che abbia intenzione di passare molto tempo a scoprirne il sistema di navigazione o a decifrarne le icone, è nulla. Gli utenti web non sono spettatori né esploratori, vogliono fare qualcosa. Accedere a Internet non è come guardare un film o un video in TV, le aree in cui spesso i creativi sono più ferrati, il web è fatto per lavorare, cliccare, cercare, ottenere dei risultati, non semplicemente, guardare. Le pagine web di un sito sono posizionate nell hard disk di un server, un PC sempre acceso e sempre connesso a Internet. usabilità L usabilità è una delle armi a disposizione per trattenere l audience e per consentire ai visitatori di lavorare con il sito, è quella proprietà che lo rende facile da navigare e usare. La parola usabilità deriva dalla progettazione del software: dalla metà degli anni 80 iniziò a svilupparsi quella che è una vera e propria scienza che coniuga la psicologia e l intelligenza artificiale all informatica. I principali attributi dell usabilità sono definiti nel SUL (Sun Usability Lab). Utilità La prima domanda riguarda ovviamente il senso stesso del sito, a cosa serve? Facilità di apprendimento Come si comportano gli utenti davanti a un sito che non hanno mai visto. Si ritrovano in aree di cui non conoscono il senso generale e di cui non sanno dire come sono arrivati, vorrebbero fare qualcosa ma non sanno come. Efficienza I visitatori possono interrogare il sistema e ricevere delle risposte veloci, o devono tentare e ritentare per ottenere ciò che hanno in mente, il caricamento del sito dev essere rapido. Facilità di ricordo Gli utenti ricordano immediatamente come usare il sito la seconda o terza volta che ci ritornano. Quantità di errori I navigatori compiono errori o usano spesso il tasto back come se fossero finiti dove non volevano, il sito stesso contiene errori di vario genere. Soddisfazione Il sistema è divertente e soddisfacente da usare o crea ansia e frustrazione. HTML um 241 di 347

243 Il punto di vista dell utente è la prima cosa di cui tenere conto nella progettazione e produzione di un sito web. La scelta più facile sarebbe quella di cadere nel tranello della tecnologia a tutti i costi, del fare colpo sul cliente. Mentre, nel costruire schemi di navigazione, grafica e database occorre sempre chiedersi: come si comporteranno i visitatori che vantaggi ne trarranno?. In tutte le fasi della progettazione occorre sempre avere ben chiari gli obiettivi che si vogliono raggiungere, conoscendo soprattutto le necessità degli utenti, prevedendo i loro comportamenti nel sito. Che cosa succede in siti non usabili I dati tangibili di un sito non usabile provengono innanzitutto dall analisi dei log. I log sono file di testo che conservano la memoria dei visitatori e del traffico di un sito, statistiche relative al sito. Esistono diversi software per l analisi statistica dei log, esistono siti che on line vanno a monitorare le visite, i dati riportati dai log sono il primo fatto sui cui lavorare. Progettare senza stile Per progettare un sito usabile, la prima cosa da fare è non cadere in quelli che sono tra gli errori più comuni nella costruzione di pagine, errori estetici, di navigazione e di ergonomia. GIF animate Quando in una home page tutto si muove e lampeggia, l effetto finale è fastidioso. Tra gli estremisti dell usabilità c è chi sostiene addirittura che tutte le animazioni sono scartate automaticamente dal campo di attenzione dei visitatori perché da sempre portatrici d inutili messaggi pubblicitari. Musica I file MIDI sono l ideale per infastidire il navigatore, non solo sono di pessimo gusto ma sono fisicamente fastidiosi all orecchio umano. Interfacce Esistono anche home page prive di descrizioni esplicite che richiedono un approccio esplorativo. HTML um 242 di 347

244 In genere software JavaScript al passaggio del mouse rivela i contenuti dei link misteriosi. Background Gli sfondi psichedelici e ripetuti sono uno degli errori più comuni del web. Per esempio, mettere del testo blu sullo sfondo elettrico. Pulsanti Pulsanti di tutti i colori, con effetti che variano dal bevel and emboss ai lighting effects, i filtri portati al massimo utilizzo. Caricamenti lenti Quando dopo trenta secondi di attesa ancora permane la scritta, Loading, please wait. La maggior parte delle persone lascia perdere, rivolgendo l attenzione ad altri siti presenti sul web. Uso smodato delle tecnologie Flash, applet Java, JavaScript. Home page per browser specifici Pop-up Diventa intollerabile quando la finestrella si apre per pubblicità, è sopportabile quando approfondisce il contenuto di una pagina. Tutto ha inizio dalla capacità di banda, caricamenti rapidi, linee veloci e linee lente Il responso di un sito dev essere di circa sei secondi: a chi lo costruisce sembrano pochissimi ma a chi deve visionare un listato di 500 titoli rilasciato dal motore di ricerca sembrano anche troppi e se i secondi sono di più sicuramente abbandonerà l impresa. Progettare per crescere, un sito web non è mai finito A che cosa serve esercitare tutte le proprie doti grafiche in un sito se poi non è possibile modificarlo con facilità. Di due cose c è bisogno in un sito in crescita. 1. Di un layout in grado di essere facilmente modificabile, o ancora meglio collegabile a un database: quindi con meno grafica e più testo HTML. 2. Di un layout in grado di espandersi senza rompersi, di contenere, in pratica, quell accumulo d informazione che si sedimenta nel tempo. Un sito Internet non è mai finito e tende a conservare uno storico di tutti i contenuti che l hanno attraversato. ACCESSIBILITÀ Significa non lasciare fuori nessuno, né quelli che usano connessioni lente o browser in disuso, o processori lenti, neanche chi soffre di handicap visivi come daltonici e HTML um 243 di 347

245 ipovedenti. Per chi è a caccia di grandi numeri tra i visitatori è opportuno e non solo etico, non tralasciare nessuno. Anche se si amano le tecnologie si dovrebbe sempre prevedere una versione light del sito. L accessibilità, più che una caratteristica migliorativa di un sito, è una norma da rispettare per disposizione di legge, DL N 4 del 09/01/2004 Legge Stanca. All interno del W3C si è costituito il WAI (Web Accessibility Initiative) che ha elaborato le linee guida per l accessibilità, chiamate WCAG (Web Content Accessibility Guidelines), su tre livelli. 1. Livello A norme che devono essere rispettate da tutti. 2. Livello AA norme che dovrebbero essere soddisfatte. 3. Livello AAA norme che potrebbero essere soddisfatte. In conclusione, usabilità e accessibilità non sono problematiche tra loro distinte e di pertinenza di due domini tra loro indipendenti, rispettivamente quella della progettazione e dello sviluppo tecnico ma sono tra loro collegate. Esistono sul web dei validatori automatici che esaminano il codice XHTML di una pagina, valutandone il livello di accessibilità tecnica. passi nella progettazione di un sito Web Le diverse fasi e le diverse professionalità Nel contesto produttivo della creazione di un sito web l approccio user oriented riguarda tutte le fasi della progettazione: dall analisi di marketing all implementazione dei database. L usabilità attraversa persone con competenze diverse, animate dal medesimo atteggiamento: attenzione verso l utente, in ogni fase del lavoro. Analisi di marketing Gli analisti di mercato si occupano di: analisi delle risorse, budget, opportunità, definizione degli obiettivi e dei target del sito a breve e medio termine, Internet business plan. Progettazione e information architecture Gli esperti di content design si occupano di: analisi del benchmarking, analisi delle risorse informative attuali e potenziali, pubblicazioni, redazioni, database, stesura del concept, definizione delle diverse aree del sito e loro relazioni, definizione della ramificazione degli argomenti. Comunicazione I graphic designers si occupano di: layout, look & feel dell home page, look & feel dei template del sito, storyboard e grafica di eventuali animazioni. Web development I producer HTML si occupano d integrazione tra look & feel e HTML, integrazione tra look & feel e altri linguaggi CSS, JavaScript, DHTML (Dynamic HTML), integrazione con gli script dinamici ASP, PHP. Programmazione web I programmatori web si occupano d implementazione di script dinamici PHP, ASP, CGI, JSP (JavaServer Pages), integrazione con database. L usabilità riguarda tutti È importante che l approccio alla progettazione usability oriented sia seguito in ogni fase del lavoro e che ogni singolo partecipante alla costruzione di un sito sia responsabilizzato. Il presupposto condiviso dovrebbe anche essere quello di conoscere ognuno le HTML um 244 di 347

246 responsabilità dell altro: sia perché il più delle volte i confini tra i vari settori sono molto sfumati e facilmente intercambiabili, sia perché ognuno dovrebbe avere un idea di ciò che accade in tutte le fasi della lavorazione di un sito. L editoria multimediale è stata considerata agli inizi il campo in cui la figura dell autore, dell editore e del tipografo tendono a coincidere. Nei grandi web site la riunione delle tre figure in una sola non può avvenire, per diversi problemi pratici, sono troppe le specializzazioni in campo ma è importante conservare una visione d insieme, altrimenti il percorso produttivo si blocca. Nove domande da porsi quando si progetta un sito 1. Quali sono gli obiettivi che si vogliono raggiungere con Internet? 2. Qual è il profilo socio professionale del pubblico? 3. Quali tipi di contenuti potrebbero interessare il target e fare parte o meno del sito? 4. Di quali tecnologie, finanziamenti, competenze c è bisogno per fornire questi servizi? 5. Chi sono i concorrenti, come sono organizzati i loro siti, di quali strategie si avvalgono? 6. Che tipo d interazioni ci sono e ci potrebbero essere con i target del sito, quali bisogni potrebbero insorgere? 7. Quali sono gli obiettivi a breve, medio e lungo termine del sito che si va a progettare? 8. Quale potrebbe essere l andamento del sito tra un anno? 9. Con quali criteri misurare il successo e il gradimento? Priorità durante e dopo la pubblicazione Mantenere alta la qualità dei contenuti dovrebbe sempre rimanere la priorità numero uno. Ogni altro aspetto è secondario, compreso il look & feel, la facilità d uso e la promozione. Le ricerche di mercato andrebbero usate nella valutazione di un sito per capire quanto il proprio target trovi utili i contenuti principali. Identificare alcuni contenuti correlati da affiancare a quelli principali. Cercare dei partner che possano aiutare in questo. Fare conoscere al potenziale pubblico quanto le informazioni presenti nel sito possano loro risultare utili. Promozione Pianificare una campagna nei media correlati. Pubblicizzare gli aggiornamenti del sito con una newsletter. Pubblicizzare il sito anche off line, con inserzioni. Trame e contenuti dell advertising dovrebbero non solo informare del cambiamento ma creare una storia attorno ad esso. Fornire anteprime di ciò che comparirà nel sito. Considerare un area permanente in cui far confluire le novità del sito, sul settore di cui il sito si occupa. Costituire una piccola redazione che si occupi dell aggiornamento. Testi e ipertesti: differenze e somiglianze I siti web consistono di un insieme di documenti organizzati in forma ipertestuale. Anche il testo lineare classico può essere considerato un ipertesto al grado zero, composto da una sola possibilità di lettura o un solo percorso, è di facile lettura ma anche rigido nel presentare i contenuti: toglie libertà di approccio all utente lettore ed è poco affine al metodo associativo con cui la mente esplora il mondo quotidiano. Il grafo offre infiniti percorsi, flessibilità totale dell ambiente esplorativo ma anche mancanza di organizzazione, l assoluta mancanza di gerarchia crea estrema confusione. Gli alberi organizzano l informazione in più percorsi ma non infiniti, sono per questo chiamati multi lineari e si suddividono principalmente in due tipi. 1. Estesi. 2. Profondi. HTML um 245 di 347

247 L albero verticale si sviluppa in profondità, di clic in clic, mentre l albero esteso tende a presentare la maggior parte dei contenuti nel primo livello in home page. L albero esteso ha i pregi della semplicità d uso di un testo lineare e ha i vantaggi di flessibilità dell ipertesto ma non scade nella carenza di organizzazione del grafo, né nell eccessivo annidamento dell informazione di un albero verticale. Portare i contenuti in home page e organizzarli in aree chiare e distinte è una delle soluzioni migliori nel web: toglie l incognita dei troppi clic e punta sulla flessibilità. Organizzare l ipertesto: IA (Information Architecture) È il processo di organizzazione, etichettazione e visualizzazione dei sistemi di navigazione e ricerca degli ipertesti, come tale è in grado di aiutare le persone a trovare e maneggiare l informazione con successo. Una buona IA, organizzando il sistema dei collegamenti ai vari documenti dell ipertesto rende un sito facile da usare e aiuta i visitatori a ritornare. Come si articola un processo di organizzazione dei link. 1. Organizzazione del sito: indica i modi in cui le informazioni sono raggruppate. 2. Sistemi di etichettatura: sono essenzialmente i nomi e le definizioni con cui sono indicati i gruppi dei contenuti. 3. Sistemi di navigazione: strutture dell interfaccia come barre di navigazione e mappe che aiutano l utente a interagire con il contenuto del sito. 4. Sistemi di ricerca: aiutano a formulare le domande che possono portare a documenti rilevanti. Costruire schemi di navigazione orizzontali Per semplificare il sistema la prima cosa da fare è tracciare una struttura chiara. Quando ci si trova a dover progettare un sito di grandi dimensioni la prima cosa da fare è individuare i cluster. L idea è di raggruppare oggetti simili in schemi di navigazione insiemistici. Un esempio di cluster paralleli di navigazione potrebbe essere l automobile genitore. 1. Automobili sportive, figlio. 2. Automobili di lusso, figlio. 3. Automobili da città, figlio. I tre link sono paralleli, stanno tutti su uno stesso (sotto) livello, apparterebbero tutti a una stessa generazione di fratelli. HTML um 246 di 347

248 La navigazione a briciole di pane Se nel sito i link vanno sempre più in profondità dando origine a più generazioni di livelli, allora è il caso di usare una struttura a briciole di pane, si presenta come una serie di passi successivi che dal primo, padre, portano fino a un qualche pronipote. Esempio. Hardware (genitore) > PC (figlio) > Portatili e Palmari (nipote) > Notebook (pronipote). Questo tipo di percorso andrebbe sempre indicato nelle pagine per favorire l orientamento degli utenti. La navigazione a cluster può essere presentata usando nuove tecnologie come i menu a scomparsa nelle barre di navigazione. Ogni pagina figlio deve avere comunque la possibilità di ritorno alla pagina genitore. Risalire il sito a ritroso, dal fondo alla cima, dovrebbe essere facile come percorrerlo dal basso verso l alto. Tipi di link Jacob Nielsen nel suo libro Web Usability ha indicato tre tipi principali di link. 1. Link Topici: il testo sottolineato che conduce a ulteriori informazioni riguardo all argomento trattato, non tutti sono d accordo nell inserire dei collegamenti dentro il testo, si corre il rischio di spezzare troppo la lettura. 2. Link associativi: sono usati per indicare altre pagine dal contenuto simile o correlato a quella attuale che l utente potrebbe perciò trovare interessante. Per esempio, i famosi titoli correlati nel caso ci si trovi in un sito che vende libri, oppure stampanti a colori nel caso si stiano consultando le stampanti in bianco e nero. Non sono vere e proprie guide alla navigazione del sito ma piuttosto forme di manipolazione della navigazione. 3. Link strutturali: sono link usati per connettere fra loro diversi livelli della struttura del sito. È importante che i link strutturali siano ripetuti identici su tutte le pagine, cosicché l utente possa sapere quali opzioni di navigazione aspettarsi e in che rapporto stanno tra i loro gli argomenti in cui ci si muove. Generalmente i link strutturali sono quelli che alloggiano sulle barre di navigazione o menu. Barre di navigazione Diversi studi hanno confermato che il contenuto di un sito è la cosa più importante. Il pubblico sembra non dare importanza a ogni altro aspetto del design. Quando arrivano in una pagina gli utenti ignorano le barre di navigazione e gli altri HTML um 247 di 347

249 elementi di design: guardando direttamente all area di contenuto dell home. Inoltre, nonostante gli sforzi, spesso non capiscono in che zona si trovano di un sito. I visitatori sono estremamente tesi agli obiettivi che vogliono raggiungere e che hanno in mente e non utilizzano il loro tempo per qualcos altro. Per raggiungere i loro obiettivi spesso si affidano alle maschere di ricerca con parole chiave come principale strategia, bypassando ogni tentativo di visita guidata. Se le pagine sembrano non possedere un contenuto rilevante, i visitatori le abbandonano dopo due - tre secondi, senza affidarsi troppo ai menu. Se gli utenti non capiscono un certo elemento di design, non perdono tempo a impararlo, piuttosto continuano ignorandolo. Menu Il punto è: quali sono le probabilità che il visitatore abbia veramente bisogno di passare da una sezione all altra del sito senza fare ritorno all home page? Apparentemente pochissime. Del resto basterebbe semplicemente fare clic sul back e in mezzo secondo l home già in memoria sarebbe sullo schermo. Eppure, senza nessuna cornice intorno, le pagine diventerebbero orfane, non sarebbero contestualizzate, anche se non ne faranno uso, gli utenti devono sempre poter sapere dove potrebbero andare. Obiettivi della navigazione Ci sono modi migliori di costruire un sistema di navigazione usabile che non il semplice aggiungere link uno dopo l altro al sito. L esperienza di navigazione può essere definita in modo tale guidare gli utenti da un punto all altro di un sito web riconoscendo punti d ingresso, punti di azione e punti di uscita. Dietro queste idee astratte ci sono alcuni concetti fondamentali che devono essere considerati. Un sito di successo organizza l informazione in un formato facile da usare. Per progettare un sito che lavori con e per i visitatori, la chiave di volta sta nell identificare uno specifico, critico punto di azione. L intero schema di navigazione va costruito cercando di guidare gli utenti verso questi punti di azione, partendo dalla loro prospettiva. Punto di azione È il luogo in cui si vuole guidare i nostri utenti, ci sono zone dell ambiente web dove i visitatori possono interagire, acquistare qualcosa o ottenere l informazione desiderata. Per scoprire quali sono gli action point bisogna prima chiedersi che cosa i visitatori vorrebbero fare durante la visita e creare una gerarchia delle priorità. Alla fine risulteranno esserci diversi punti di azione per uno stesso sito. Punto d ingresso Dal punto d ingresso gli utenti dovrebbero trovare percorsi chiari verso ogni punto di azione del sito. L home page può essere inteso come il primo punto di azione di grado zero. Punto di uscita Sono i nodi dove si concentrano maggiormente le uscite dei visitatori dal sito, hanno molto a che fare con i punti di azione: nel migliore dei casi gli utenti escono dal sito perché hanno finito ciò che volevano fare nel punto di azione, o nel peggiore perché non sono riusciti in ciò che volevano. Una volta che si sono scoperti i motivi per cui gli utenti lasciano, si può pensare di posizionare altri punti di azione dalle pagine di fuga allo scopo di trattenerli sul sito. Se condotta con successo, questa strategia permette di guidare i visitatori da un punto di HTML um 248 di 347

250 azione all altro, tenendo alto il loro interesse con l offerta di materiale interessante. Un altra delle strategie, nel caso che le cose siano andate bene, è quella di cercare d instaurare un feeling post navigation, per esempio ripetere un invito all iscrizione alla newsletter. Infine, i punti di uscita possono aiutare ad identificare i problemi di usabilità. Se si nota che una percentuale significativa di utenti lascia il sito da una pagina che non ha in alcun modo a che fare con un punto di azione, significa che gli utenti lasciano a metà il percorso e quindi è probabile che ci siano dei problemi di comprensione. Una delle cose più importanti è tenere d occhio i log per capire quali sono i punti di uscita. Test di usabilità Il modo migliore di curare l usabilità del sito è di osservare come gli utenti interagiscono con esso e incorporare i risultati che ne conseguono nella progettazione. Il test di usabilità è indicato per la valutazione di siti predefinitivi, prima del loro rilascio sul mercato. Il numero di utenti da coinvolgere in un test di usabilità varia in relazione alla quantità delle classi di utenza cui è destinato il prodotto e ai risultati all analisi costi/benefici. Può essere adottata la seguente regola per ottenere dati qualitativi. Cinque utenti, se il sito è destinato a un target specifico. Tre - quattro utenti per ogni tipologia, se i target sono due. Tre utenti per ogni tipologia se i diversi target del sito sono più di due. Per avere dati quantitativi, sono necessari almeno venti utenti. Creatività in un sito Quando di tratta di creatività cartacea, l appel si riferisce al livello di gradimento e coinvolgimento delle persone. In parte questa sensazione può essere traslata sul web, ricordando che comunque non rappresenta lo scopo principale della progettazione ma uno dei fattori che contribuiscono a creare l user experience. Ci sono sei fattori importanti per la riuscita di un sito web. 1. Fornire contenuti rilevanti e di alta qualità. HTML um 249 di 347

251 2. Rendere il sito facile da usare. 3. Promuoverlo efficacemente, nei media on line e off line. 4. Rendere l esperienza al sito unica nel suo genere. 5. Avere credibilità. 6. Evocare emozioni. I creativi hanno per primo il compito di conferire credibilità e cura al sito, perché l attenzione che loro riverseranno nel posizionamento di un logo sarà percepita dagli utenti come l attenzione che i proprietari del sito mettono in tutti i servizi che offrono. Tutti gli ambienti web hanno bisogno di essere credibili, qualsiasi cosa facciano. Il punto sei non riguarda necessariamente tutti ma solo quelli che per diverse ragioni puntano su fattori emotivi: siti di profumi, moda, cibi ricercati. In questo caso il lavoro dei creativi è doppio, oscilla tra il mantenere la credibilità, non perdere mai di vista l usabilità e regalare agli utenti un po di stupore. La grafica può avere diverse funzioni in un sito. Icone per la navigazione. Mappe. Icone informative. Immagini. Immagini di sfondo. Banners. Titoli. Loghi e intestazioni. Quando si vogliono inserire alcuni di questi elementi la prima cosa di cui tener conto è naturalmente, la portata del download. Un buon designer sa quanto il web non aiuti in questo. I colori piatti delle GIF sono di grande aiuto, pesano poco e se ben scelti sono di sicuro effetto. Le home invase dalle gigantografie fotografiche sono ormai in disuso a causa dei problemi di caricamento. Obiettivi degli elementi grafici di un sito Organizzare al meglio i link nella home page. Gerarchizzare il contenuto. Promuovere i contenuti principali con colori e layout. Minimizzare la possibilità di fraintendimenti e confusione. Organizzare l home page creando aree chiare e ben distinguibili. Organizzare l informazione in gruppi visivi, basati sugli argomenti o sulle analogie che hanno dal punto di vista dell utente. Promuovere argomenti e novità tenendo sempre conto della loro iterazione con i database. Associare visivamente nomi pregnanti per ogni link, mantenendo sempre nomi accreditati, per esempio un carrello ormai si chiama necessariamente così. Rendere al meglio la struttura di navigazione Organizzare i link in aree tematiche. Occorre fare attenzione a non accumulare troppi link. Se, nonostante tutti gli sforzi la pagina rimane troppo piena allora è meglio raccordarsi con gli architetti dell informazione per ridefinirne il numero. Quando i visitatori hanno di fronte una home page vorrebbero avere la sensazione di cogliere al volo tutte le possibili direzioni. Raggruppare le scelte in aree tematiche aiuta e le aree devono essere estremamente chiare, con al massimo cinque - sette voci per area. HTML um 250 di 347

252 Suddividere le schermate o tenere gli scrolling Le pagine dovrebbero contenere un articolo intero. Un designer non si deve scandalizzare se alcuni layout richiedono l uso dello scrolling, se si resta entro i tremila caratteri tutto va bene. È meglio tenere una pagina un po allungata che spezzarla in parte prima e parte seconda: è fastidioso per i lettori ritrovarsi a dover attendere un nuovo caricamento quando sono già immersi nella lettura. Avanti - Indietro Evitare pulsanti come Avanti Indietro, è sempre meglio usare del testo che spieghi dove il link porterà, esempio Leggi l articolo completo, Le immagini della premiazione. Tipo di file che si linka Occorre fare sempre molta attenzione: un link presuppone il caricamento di una nuova pagina, se al contrario porta ad aprire un file video o un MP3, va sempre reso con un icona e va indicata la dimensione del file in KB; evitando d indicare il tempo di download come fanno alcuni, perché è un dato relativo. Occorre scrivere: scarica il filmato del discorso d insediamento, icona telecamera, 980 KB. Un abitudine piuttosto deleteria è quella di far partire il client di posta elettronica quando si clicca su contatti, è meglio allora progettare un form d immissione. Rollover Aiutano a distinguere tra grafica decorativa e di navigazione e soprattutto danno l impressione che l interfaccia reagisca immediatamente alla presenza dell utente. Vanno costruiti con attenzione, evitando stravolgimenti strani, è meglio usare variazioni di colore piuttosto che di formato in genere un testo che si trasforma in grassetto, provoca spostamenti non voluti in tutto il testo. Posizione delle barre di navigazione Sicuramente gli elementi strutturali vanno messi dove le persone si aspettano di trovarli. Ormai le interfacce web sono diventate uno standard, voler essere creativi a tutti i costi inventando nuove disposizioni porterebbe di fatto ad alcuni problemi di usabilità. I link strutturali dei siti vanno posizionati in questo modo. HTML um 251 di 347

253 1. Contenuti principali: centro pagina. 2. Barre di navigazione primarie: orizzontalmente nella parte superiore della pagina. 3. Barre di navigazione secondarie: verticalmente sulla sinistra. 4. Ritorno all home page del sito: in alto a sinistra. Tutti i software in commercio hanno il menu in alto, gli utenti si sono abituati a cercare tendine e pulsanti sulla parte alta della schermata. Negli ultimi tempi la tendenza dei grandi siti web è di usare barre orizzontali in alto e di ricorrere alla vecchia tabella sulla sinistra solo per le sotto sezioni. Esempio: le disposizioni dei vari elementi nell home page. Sezione interna Alla barra di navigazione in alto è stata aggiunta quella di sinistra che aiuta a muoversi nella sezione Chi siamo. Intestazione delle pagine interne Ogni riferimento al contenuto della pagina, intestazione, dev essere sempre ben chiaramente visibile, in genere sotto il menu di navigazione. Visibilità dei link Mai nascondere sotto lo scrolling elementi importanti della navigazione o contenuti rilevanti, gli utenti possono lasciare la pagina senza averli potuti vedere, un caso per tutti: Acquista ora nascosto in fondo alla pagina. Colori dei link È preferibile usare il blu per il colore dei link. Da quando il web è nato il blu è stato il colore deputato a questo scopo e ogni utente si aspetta, vedendo una parola blu che quella sia un collegamento. Eventualmente, per ovviare ai problemi cromatici del blu elettrico, si potrebbe usare in sostituzione un colore della stessa tonalità ma desaturato in modo da non compromettere l equilibrio cromatico del layout. Utilizzo dei font È meglio evitare di usare testi sottolineati se non si tratta di link. Anche il maiuscolo risulta poco leggibile: può funzionare solo per brevi parole. HTML um 252 di 347

254 I font in una stessa schermata non dovrebbero essere di più di due tipi, un accumulo di forme genera un senso di confusione. Attenzione anche al testo centrato, funziona per i titoli ma è deleterio per il corpo del testo, la leggibilità cala del 10%. Animazioni L utente è costretto ad aspettare due volte, la prima che l animazione arrivi sul browser, la seconda che si svolga, anche se il più delle volte non aggiunge assolutamente nulla al contenuto di un sito. È un po come dover pagare, le spese telefoniche, per vedere semplice pubblicità. Lo skip non è la soluzione ideale, richiede comunque un clic e una parte di attesa. Senza contare le infinite energie che sono buttate per un animazione di livello professionale skippata. Risparmiare sulla progettazione Flash sarebbe controproducente: un animazione non fluida e male orchestrata oltre a togliere appeal elimina anche quel poco che rimane di credibilità. L unica soluzione possibile è incorporarlo dentro la pagina, lasciando a chi non possiede il plugin la possibilità di vedere un immagine ferma. In questo modo non si esclude nessuno e non si verificano tempi di attesa supplementari per accedere direttamente ai menu di navigazione e ai contenuti. Chi vuol andare subito all informazione può mentre l animazione si svolge in un altra area della pagina, un animazione permanente, in loop, diventa il più delle volte fastidiosa. Distrae dal contenuto e diventa un elemento di disturbo, un po come qualsiasi stimolo sensoriale che si ripete sempre uguale. No alle animazioni come link, l animazione va usata per guidare l attenzione su un elemento o evento del sito, non verso pagine troppo importanti, ormai il pubblico si è abituato agli oggetti in movimento e li considera per lo più forme di pubblicità evitandoli immediatamente ed eludendoli dal proprio campo visivo. Paradossalmente anche gli stessi banner sono per lo più invisibili all attenzione degli utenti: non si dovrebbe mai far partire un merchant di e-commerce per esempio, unicamente da un animazione. Attenzione al pulsante back, il più delle volte con Flash non funziona, si rischia d intrappolare i visitatori in pagine da cui non riescono più a tornare indietro. Peso di una pagina HTML L home page dovrebbe caricare in meno di sei secondi con un modem a 56 Kbps, quindi complessivamente non dovrebbe superare di 40 KB. Tabelle Se sono troppo complesse rischiano di rallentare la composizione della pagina nel browser, dovrebbero sempre potersi espandere in verticale per accogliere nuovi link. Creare delle directory Per organizzare i file creare cartelle che contengono i vari HTML per le diverse aree di contenuto, usare quando è possibile fogli di stile esterni alla pagina. Template/Include Nelle parti fisse delle pagine in collaborazione con i programmatori ASP e PHP. Automatizzare il più possibile Cercare il più possibile di alimentare le pagine tramite database. Testare sempre in diverse piattaforme e browsers Usare height e width nel TAG delle immagini per un caricamento migliore. HTML um 253 di 347

255 Usare gli alt text per le immagini. Usare le nuove tecnologie e nuovi linguaggi solo quando sono stabili. Per i form attenzione ai tasti Reset, per lo più costituiscono un problema, perché gli utenti li attivano per sbaglio al posto del Send, in linea di massima andrebbero evitati. Gli svantaggi dei frame sono noti: non si possono stampare, né possono essere ricostruiti dai motori di ricerca, confondono i visitatori che perdono facilmente l orientamento, non distinguendo la posizione in cui si trovano rispetto all home page. Ottimizzazione del codice: manuale o automatica Il modo più semplice di comprimere il sorgente è di usare un applicazione per l ottimizzazione dell HTML. Se si osserva il codice sorgente del motore di ricerca Google per esempio, ci si accorge che non ci sono spazi tra un TAG e l altro; sono sparite le indentazioni e molti spazi, il risultato è che la velocità di caricamento è impressionante. Un codice di questo genere è difficilmente rieditabile, per cui la compressione è un lavoro che va fatto alla fine. Applicazioni come Space Agent, VSE Web Site Turbo e WebOverdrive, lavorano tutti per rimuovere gli eccessi di spazi, le tabulazioni, gli apici e tutti gli attributi che non sono indispensabili, l ottimizzazione automatica non può fare miracoli, un lavoro veramente accurato può essere solo eseguito a mano. L idea è di ottenere la videata il più velocemente possibile e per farlo, quando un sito è veramente molto trafficato, non rimane che agire con regole estreme. Commenti Quando il lavoro è finito si possono rimuovere. Head Minimizzare la dimensione del TAG <head>, se è pieno di script il caricamento della pagina è rallentato. Ritardare la partenza dei JavaScript alla fine del caricamento, mettere il JavaScript alla fine del body e usare onload. METATAG Tenerli sotto i duecento caratteri, non usare virgole ma solo spazi. Immagini Rimuovere gli alt dai GIF trasparenti. JavaScript Ottimizzare il codice, impostare anche caratteri singoli per variabili e funzioni. URL Usare nomi brevi per gli URL. Scrivere per il web È il regno della concretezza e precisione. Sintassi e grammatica Attenzione nei confronti della grammatica, per quanto interessante, un testo con periodi lunghissimi o peggio interrotti e sgrammaticati non sarà mai usabile. Rendere il testo percorribile con lo sguardo Utilizzare elenchi puntati e usare i grassetti per sottolineare le parole chiave. HTML um 254 di 347

256 Bisogna evitare un eccessivo uso del grassetto, quando è troppo, stanca e perde la sua funzione di accentratore dell attenzione. Il modo di leggere sul web non prevede quella concentrazione che si ha mentre si legge su carta, né una matita per sottolineare. I testi sul monitor non sono propriamente letti ma passati in rassegna con lo sguardo alla ricerca di titoli e parole chiave. Per questo è importante organizzarli bene per una facile scansione. Occorre una grande attenzione nella scrittura dei sottotitoli che devono essere precisi, il loro compito non è creare aspettativa ma riassumere il contenuto di ciò che segue. Nel web non serve la suspence, serve la sintesi. Separare il testo Usare linee vuote, invece d indentare. Ci sono due modi di separare i paragrafi, spaziare o indentare. L indentazione è molto elegante, riposa lo sguardo e crea separazione ma in genere è la riga vuota il separatore più indicato quando si tratta di vagliare velocemente il testo con uno sguardo: lo spazio bianco infatti è immediatamente riconoscibile. Allineamento del testo In genere l allineamento a sinistra è il migliore. Il testo centrato è leggibile solo per i titoli e risulta fastidioso per testi più corposi. Sebbene in molti paesi il percorso di lettura sia opposto a quello occidentale, per ora l allineamento a sinistra, quando si usano caratteri romani è diventato uno standard. Ampiezza delle righe In una riga non dovrebbero esserci più di 15 parole o più di 75 caratteri. I giornali hanno capito da molto tempo l importanza delle linee brevi. Lo sguardo andando spesso a capo si riposa, prende fiato, soprattutto sul web dove la lettura è di circa il 25% più difficile. Non esagerare con lo scrolling e tenere il testo ridotto Il testo dev essere contenuto, circa 650 parole in una sola pagina. Occorre pensare i testi in formato web, in altre parole sotto i 3000 caratteri; è inutile suddividerli in più pagine. Se un testo è bene organizzato in titoli e paragrafi, non intimorisce, perché può essere passato in rassegna velocemente con lo sguardo, mentre molti trovano fastidioso dover aspettare il caricamento di una nuova pagina se hanno intrapreso la lettura. È utile anche prevedere una versione stampabile per i propri articoli, nel caso in cui si debbano essere discussi in una riunione lontano dal monitor. Colori per il testo Nero o grigio scuro su bianco, altri colori per il testo sono poco indicati. Si dispone di circa 16 milioni di colori e la tentazione di usarli in libertà è grande: ma occorre contenersi, il vecchio nero su bianco è ancora quello che funziona meglio. L occhio umano riesce a cogliere con grande facilità il contrasto, sarebbe disastroso invece usare colori che vibrano come rosso su azzurro o colori senza contrasto come rosa e verde, indistinguibili per chi soffre di un lieve daltonismo. Scrivere per tutti Evitare slang o espressioni sofisticate, del resto è vero che l inglese è la lingua del web ma è anche vero che molti che lo leggono non sono inglesi madrelingua. Se si scrive in italiano, l accorgimento, a meno di precise scelte artistiche o espressive, è quello evitare termini troppo dotti, dialettali o specialistici. Le quattro massime. HTML um 255 di 347

257 1. Quantità: riportare solo la quantità necessaria d informazioni. 2. Qualità: le informazioni devono essere fondate su prove. 3. Relazione: le informazioni devono essere pertinenti con l argomento trattato. 4. Chiarezza: le informazioni devono essere esposte in modo chiaro. Caratteri Due caratteri progettati per la leggibilità sullo schermo: il Verdana e il Georgia. Il loro lato negativo è che non sempre risultano così leggibili una volta stampati, mentre l Arial e il Times New Roman sono leggibili anche sulla carta. Evitare le parole scritte in maiuscolo Le maiuscole rallentano il processo di riconoscimento e quindi la velocità di lettura. I lettori leggono riconoscendo con un colpo d occhio le forme delle parole. Per questo i titoli non dovrebbero mai essere scritti tutti in maiuscolo. Tenere i testi aggiornati Scrivere sempre la data di pubblicazione nell intestazione. Ogni testo deve recare la data di pubblicazione, perché dev essere ricollocato in un contesto temporale. È chiaro che se il tempo passa e le date rimangono sempre indietro la credibilità del sito ne risente e gli utenti fiuteranno la mancanza di contenuti aggiornati. IMPAGINAZIONE Il progetto grafico dev essere sintesi di creatività, deve riuscire a comunicare, mantenendo armonia ed equilibrio tra gli elementi. Lo stile che si sceglie definisce l impaginazione, la disposizione della grafica e del testo. Per le pagine web, pur partendo dalle stesse logiche di base della grafica tradizionale, si segue un percorso parallelo. Su Internet lo spazio verticale non è sempre definito: si deve ricordare l impostazione in larghezza e, di conseguenza, la disposizione verticale degli elementi. L esigenza è la comprensione di ciò che si sta leggendo a colpo d occhio. Quindi, i titoli delle sezioni devono essere ben visibili e non devono utilizzare caratteri diversi, né possono essere troppo elaborati: la grandezza minima con cui si può riportare una parte testuale è otto punti. L assetto grafico dev essere coerente e riconoscibile in ogni sezione. Affinché una produzione grafica sia definita, si devono strutturare gli elementi in gabbie. In genere, si definisce gabbia la suddivisione in orizzontale e in verticale dello spazio di una pagina: la segmentazione determina dimensioni e posizione d immagini, aree testuali, didascalie, margini. La griglia deve riuscire a gestire e a contenere aree di testo variabili e, quindi, essere flessibile, evitando la sensazione di disordine. Con sezione aurea s indica, in arte e matematica, il rapporto fra due grandezze disuguali, di cui la maggiore è medio proporzionale tra la minore e la loro somma. In grafica e nell impaginazione si può semplificare dicendo che individuando i margini aurei HTML um 256 di 347

258 secondo misurazioni precise si tracciano le diagonali che individueranno il punto da cui far partire il testo della pagina. L utilizzo delle sezioni auree permette di ottenere un equilibrio non solo matematico ma anche visivo, nell impaginazione del testo rispetto ai margini della pagina, una garanzia di equilibrio nella lettura. Una volta scelta la gabbia che si vuole adottare, è sempre bene fare prove, verificando se la strutturazione sia in grado di reggere anche in casi estremi. Lo spazio bianco non è un elemento da sottovalutare: la distanza dai margini e i blocchi di testo aiutano a indirizzare e a bloccare lo sguardo. Stesso discorso per gli allineamenti che siano delimitati da fondini o linee e, quindi, espliciti o invisibili ma ugualmente individuati dall occhio. L utente deve percepire omogeneità nel progetto grafico che sta alla base dell impaginato, senza che questa sensazione sia esasperata. Per esempio, un articolo o post dev essere impaginato in due pagine di formato A4. L articolo è composto da un titolo, un sottotitolo (catenaccio) e da una parte testuale e da tre immagini. Una volta impostati i margini della pagina, è bene suddividerla ulteriormente in aree simmetriche. Se si procede con la suddivisione in orizzontale e in verticale, si può iniziare a individuare la gabbia all interno della quale inserire gli elementi. Naturalmente le possibilità sono infinite: bisogna scegliere la soluzione più adeguata e che corrisponda al risultato finale. Una delle prime decisioni da prendere in fase di progettazione è la scelta della risoluzione video alla quale adattare il progetto. Si può scegliere di progettare la pagina a larghezza fissa oppure impostare il sito a larghezza variabile. Nell impaginazione a larghezza fissa è tralasciata la larghezza della finestra browser che si adatta a quella dello schermo dell utente che può possedere un 16:9 o un 4:3, fissando le dimensioni di visualizzazione a quella risoluzione che è la convenzione riconosciuta. Oggi si progetta a 1024x768 con una contrazione in larghezza di circa 900 pixel. Si ha pieno controllo sulla visualizzazione finale: l impostazione del testo e delle immagini è programmata in zone precise. Se le impostazioni sono state assegnate correttamente con un CSS a gestione del layout e del testo, non ci sarà alcun tipo di cambiamento. In caso contrario, l utente può scegliere di visualizzare il carattere da molto piccolo a molto grande, cosa che potrebbe, in parte, rovinare la visualizzazione della pagina, a meno che tutto ciò non sia stato opportunamente calcolato. Nell impaginazione a larghezza variabile le impostazioni di larghezza sono espresse in percentuale. È una scelta poco considerata dai web designer, proprio per una questione di scarso controllo sul risultato finale. Lo spazio a disposizione varia a seconda della larghezza della finestra del browser e quindi a seconda del monitor in cui è visualizzata. Questo vuol dire che, se l utente possiede un 16:9 e tiene la finestra del browser a tutta HTML um 257 di 347

259 pagina, riuscirà a leggere il contenuto della pagina con molta difficoltà. Agli inizi erano le tabelle, il cui concetto stesso è legato a quello di griglia o gabbia tipografica d impaginazione. Tener conto di questo elemento di costruzione di una pagina in fase di progettazione comportava una suddivisione delle sezioni della pagina bel definite ma, per alcuni aspetti, era limitata la creatività, soprattutto nella disposizione di grafica un po più elaborata. Osservando una pagina costruita con una tabella era possibile individuare la suddivisione in celle, la disposizione degli elementi grafici, impostati come sfondi ripetuti o come immagini inserite all interno di una cella. Oggi le tabelle sono state completamente sostituite dall utilizzo dei fogli di stile che permettono maggiore libertà espressiva nella disposizione grafica e un maggiore controllo dei singoli elementi. Utilizzando i CSS non si parla più di griglia ma di impostazione di layout. Non esiste più un elemento rigido di organizzazione degli spazi ma ciò non significa che nella fase progettuale non si debba tenere in considerazione un impaginazione che preveda una gabbia. Per quanto riguarda il web bisogna saper disporre gli elementi in una gabbia visiva. Si può dire che la disposizione generale è definita dalla scelta del template all interno del quale, poi, si dispongono gli elementi ingabbiati. In uno stesso sito web si possono anche ritrovare diverse tipologie di pagina, l importante è che rispondano coerentemente a una logica, o gabbia, predefinita, in cui l utente sappia individuare gli elementi fissi e quelli variabili, senza avere l impressione di essersi persi. Per esempio, progettare un sito web. Notare come un progetto grafico cambia a seconda che si usi una griglia piuttosto che un altra. Tenere sempre in considerazione i seguenti aspetti del sito. Header contenente il logo. Area personale per la registrazione. Menu con eventuali sotto menu. Serie di funzionalità. Home page con almeno tre news, di cui una principale e due di secondaria importanza, tutte comunque corredate da un immagine. Footer di chiusura con i contatti e le informazioni legali. Risoluzione 1024x768. Secondo queste caratteristiche si provi a ipotizzare due tipi d impaginazione con le gabbie seguenti, la prima su tre colonne e la seconda su due colonne. Da una prima impostazione di massima, disporre gli elementi secondo macro aree: affinché ciascuna delle tre colonne abbia una funzionalità specifica. Se si prova ad approfondire il passaggio, si può addirittura assegnare all interno di ciascuna area gli elementi, definendo già ciò che sarà pulsante, area testuale, immagine grafica. Questo tipo di strutturazione è anche chiamata wireframe, ottima per definire, in fase progettuale cosa conterrà ciascuna pagina del sito. HTML um 258 di 347

260 Una volta eseguito anche questo passaggio, è ora di stendere il progetto grafico vero e proprio, tenendo conto della gabbia di partenza. HTML um 259 di 347

261 MODULO 3 STRUMENTI Editor Microsoft script editor Dreamweaver Microsoft FrontPage Microsoft Expression Studio CMS SPS HTML um 260 di 347

262 EDITOR INTRODUZIONE Possono essere suddivisi in quattro categorie. 1. Editor testuali orientati al codice: sono stati i primi ad apparire sul mercato, permettono di evitare la digitazione di ogni singolo marcatore grazie a pulsanti o menu a tendina, suggeriscono la sintassi dei comandi. 2. Editor visuali: sono WYSWYG (What You See is What You Get), consentono la realizzazione delle pagine HTML senza conoscerne la sintassi, mostrando immediatamente il risultato finale, infatti, il codice resta invisibile all utente che interviene sul documento come se lavorasse con un word processor. 3. Editor di siti, non solo sono in grado di velocizzare la creazione di documenti HTML ma si preoccupano anche di verificare l integrità dei link tra i documenti che si stanno editando e il resto del sito, ad esempio, nel caso in cui si decidesse di cambiare il nome a un file, ripristinerebbero automaticamente tutti i collegamenti ipertestuali a quel file contenuto nel sito. 4. CMS (Content Management System) è un sistema di gestione dei contenuti, uno strumento software installato su un server web studiato per facilitare la gestione dei contenuti di siti web, svincolando l amministratore da conoscenze tecniche di programmazione; esistono CMS specializzati, in altre parole progettati per un tipo preciso di contenuti e CMS generici. Tecnicamente un CMS è un applicazione lato server, divisa in due parti: la sezione di amministrazione, back end che serve ad organizzare e supervisionare la produzione dei contenuti e la sezione applicativa, front end che l utente web usa per fruire dei contenuti e delle applicazioni del sito. L uso di un CMS diventa obbligatorio quando si vuole avere una piattaforma dove più collaboratori lavorano contemporaneamente. Separano nettamente i contenuti dall aspetto grafico del sito: tutti i documenti pubblicati sono salvati in un database mentre l aspetto del sito dipende dal template usato, esempi: Joomla! e Drupal. Netscape Composer Uno dei primi editor WYSIWYG è stato quello incluso in Netscape sin dal La versione più recente è Netscape Composer, inclusa nella suite di Netscape Communicator. Adobe GoLive Erede di PageMill, il cui sviluppo è stato abbandonato, GoLive è la risposta Adobe a FrontPage e Dreamweaver. L applicazione nasce per piattaforma Macintosh ma è disponibile anche per Windows. Permette di sviluppare siti web a livello professionale con immagini, suoni e animazioni. Include Adobe Web Workgroup Server che semplifica la collaborazione tra più web designer. Le principali caratteristiche di Adobe GoLive sono le seguenti. Progettazione di diagrammi del sito: è possibile creare un sito e sviluppare un diagramma di progettazione da sottoporre per eventuali commenti e approvazioni. I diagrammi consentono, in particolare, di visualizzare le relazioni e i collegamenti esistenti tra le pagine. Dopo aver eseguito il diagramma del sito, è possibile generare velocemente una mappa del sito mediante la funzione del sommario e trasformare il diagramma in pagine interattive per il sito. Creazione e progettazione visiva delle pagine: la produzione di pagine è facilitata, senza che sia necessario elaborare il codice. È possibile salvare, gestire e applicare stili di testo e creare nuovi stili basati sul testo formattato di una pagina e applicarli al HTML um 261 di 347

263 testo all interno di tutto il sito; è anche possibile definire, applicare e visualizzare i CSS. Inoltre, è possibile visualizzare a schermo diviso sia il layout della pagina sia del codice sorgente. Infine è definita una procedura guidata per il sito per creare e importare altri siti. Integrazione degli strumenti standard dell industria nel flusso di lavoro: è possibile elaborare immagini, elementi grafici e applicazioni di animazione già esistenti e integrarli all interno di GoLive. I file originali, non ottimizzati, si possono posizionare nelle pagine e convertirli in seguito in immagini grafiche ottimizzate e formattate per il web. È anche possibile aggiungere animazioni Smart SWF alle pagine web e sviluppare contenuto multimediale elaborato per il web. Pacchetti con azioni JavaScript predefinite: Adobe GoLive contiene un pacchetto di quattordici azioni JavaScript con cui è possibile aggiungere funzioni d interattività alle pagine web che si stanno creando senza dover occuparsi del tipo di programmazione necessario. Si giova di un ottima interfaccia utente e di comode ed evolute soluzioni per l inserimento d immagini e link. Analogamente a Expression Web e Dreamweaver, non si limita a fornire gli strumenti per la creazione delle pagine HTML ma consente una vera e propria gestione del sito Internet, verificando la correttezza dei collegamenti ipertestuali, fornendo procedure guidate per la pubblicazione. È attento alle tecnologie Microsoft, supporta i comandi ASP, include un editor Visual Basic, GoLive spiana la strada agli utenti Mac supportando in modo nativo QuickTime, consentendo l uso degli Apple WebObjects. TopStyle CSS & HTML Editor Lo StyleChecker analizza il foglio di stile alla ricerca di errori e incongruenze ed è possibile settarlo secondo diversi profili basati sulle specifiche del W3C o dei singoli browser. Lo StyleSweeper aiuta a mantenere ordinato il codice, mentre con un clic si ha la possibilità, se collegati, di effettuare la validazione sul sito del W3C. Incorpora un potente editor XHTML. Coffee Cup Style Sheet Maker++ Permette di creare CSS retro-compatibili, wizard per classi e id, la presenza di facilitazioni per la creazione di effetti DHTML. HTML um 262 di 347

264 MICROSOFT SCRIPT EDITOR INTRODUZIONE Consente di visualizzare e modificare i TAG all interno dei file HTML che sono creati quando un documento di Microsoft Office è salvato in formato HTML. È inoltre possibile aggiungere uno script, ad esempio VBScript (Visual Basic Scripting) o JavaScript ed eseguire il debug di tale script. Dopo aver terminato le modifiche dei TAG e dello script HTML in Microsoft Script Editor ed essere tornati all applicazione di Office in cui è aperto il documento, è possibile sincronizzare il documento di Office per visualizzare le modifiche apportate al formato HTML, quando si salva il documento di Office in formato HTML, saranno salvate anche tali modifiche. Con Microsoft Script Editor è possibile creare nuovi file HTML e salvarli direttamente in qualsiasi posizione disponibile ed è possibile, inoltre, aprire i file HTML esistenti da qualsiasi posizione disponibile per apportare le modifiche o eseguire il debug. Se è installato Office, nella cartella C:\PROGRAMMI\MICROSOFT OFFICE\OFFICE11, si trova il file MSE7.EXE. HTML um 263 di 347

265 DREAMWEAVER INTRODUZIONE È l applicazione per la creazione di siti più evoluta e potente, editor di documenti web estremamente sofisticato, segue abbastanza strettamente le specifiche W3C e consente un controllo sul codice delle pagine assai preciso. La gestione della grafica è sofisticata, supporta in modo nativo le animazioni vettoriali e interattive create con Flash e Director. Consente l inserimento di animazioni in DHTML e include alcuni accorgimenti che aiutano a realizzare dei siti Internet accessibili anche ai portatori di handicap. Grazie ai template è possibile impaginare tutta una serie di pagine in base a scelte predeterminate e quindi modificarle in blocco semplicemente intervenendo sul template di riferimento. Gestisce al proprio interno un client FTP. Per configurare il client si deve accedere alla gestione del sito: uno strumento che attiva molte funzioni, come la ricerca, la mappa, sui file contenuti in una particolare cartella. Fare clic su Sito/Nuovo sito HTML um 264 di 347

266 Nella scheda Avanzate, Categoria alla voce Informazioni locali si possono modificare i valori inseriti. HTML um 265 di 347

267 Categoria alla voce Server di prova. Esempio, progettazione di un sito. File INDEX_01.HTM <HTML> <HEAD> <TITLE>Primo sito</title> <LINK HREF="STILE.CSS" TYPE=TEXT/CSS CHARSET=ISO REL=STYLESHEET> </HEAD> </BODY TEXT=# VLINK=# ALINK=#FF0000 LINK=# BGCOLOR=#FFFFFF> Qui inserisco il nome del sito <P> e lo slogan</p> </BODY> </HTML> File STILE.CSS UL { margin-top: 2px margin-right: 2px HTML um 266 di 347

268 } LI { margin-bottom: 2px margin-left: 2px margin-top: 4px margin-right: 2px margin-bottom: 4px margin-left: 0px } A: LINK { color:blue;font-family:"san-serif";text-decoration:none; } A: VISITED { color:green;font-family:"san-serif";text-decoration:none; } SPRY È una libreria JavaScript e CSS che permette di creare pagine web con contenuti più complessi, inoltre aiuta nella validazione dei moduli HTML e può essere utilizzato anche per visualizzare dati XML e creare elementi di pagina interattivi che in pieno stile AJAX, mostrino dati dinamici senza richiedere l aggiornamento dell intera pagina. Avviare la creazione di un nuovo sito e impostare l utilizzo della tecnologia server ASP VBScript. HTML um 267 di 347

269 Quando si realizza un sito, occorre definire uno stile grafico generale. Menu Alcuni elementi, generalmente la testata i menu, sono comuni a diverse pagine. Per non dover ripetere in ogni pagina le righe di codice relative alle parti comuni è possibile creare un modello unico da includere in ogni pagina. Essendo il modello, per definizione, una pagina immutabile è necessario inserire una o più aree modificabili. 1. Creare una pagina con gli elementi comuni. 2. Inserire una o più aree modificabili Inserisci/Oggetto modello/area modificabile CTRL+ALT+V. 3. Salvare il modello File/Salva come modello. 4. Per ogni nuova pagina cui si desidera applicare il modello fare, Elabora/Modelli/Applica modello alla pagina. Creare un menu con tendine apribili che sarà salvato come modello. 1. Creare un nuovo file HTML. 2. Dal pannello Inserisci visualizzare la categoria Spry e premere il pulsante Barra di menu Spry. 3. Salvare la pagina per proseguire. 4. Indicare come tipo di barra da inserire la barra in orizzontale e premere OK. HTML um 268 di 347

270 Dreamweaver inserisce la barra con delle voci fittizie nella pagina. Nella finestra d ispezione delle Proprietà ci sono tre caselle con voci di menu. La prima corrisponde alle etichette dei vari menu. La seconda alle voci dei menu. La terza ai sotto menu. Sopra ciascuna di queste caselle sono visibili i pulsanti (+) e (-) che permettono di aggiungere o eliminare voci. Due pulsanti a forma di freccia, una rivolta verso l alto e una verso il basso, permettono di riordinare le voci del menu. Selezionare la voce 1.1, poi fare clic su Sfoglia nella casella Collegamento e inserire il file INDEX_01.HTML. Il menu è terminato, eventualmente è possibile modificare le regole di stile che lo definiscono per personalizzarne l aspetto. 1. Salvare il file con il menu. 2. Salvare anche come modello dopo aver aggiunto sotto il menu un area modificabile, Inserisci/Oggetto modello/area modificabile CTRL+ALT+V. 3. Creare una nuova pagina, fare clic sul menu Elabora/Modelli/Applica modello alla pagina e salvarla con il nome INDEX.HTML. Questa sarà l homepage del sito web. Fare clic nell area modificabile e nel pannello Inserisci visualizzare la categoria Spry e premere il pulsante Pannello comprimibile Spry. HTML um 269 di 347

271 Il pannello comprimibile è costituito da due aree. 1. Scheda è la parte sempre visibile. 2. Contenuto è la parte che può essere mostrata o nascosta semplicemente facendo clic sull area scheda. Per inserire del testo in queste aree, è sufficiente sostituirlo al testo segnaposto Scheda e Contenuto. Per impostazione predefinita, il testo dell area Contenuto è visibile e l utente può, eventualmente, nasconderlo. Per nascondere il testo facendo in modo che sia l utente, se vuole, espanderlo, tenendo selezionato il pannello comprimibile, nella finestra d ispezione delle Proprietà, dagli elenchi a discesa Visualizza e Stato predefinito, scegliete Chiuso. Utilizzare Vista dal vivo per controllare come si comporta il pannello comprimibile. HTML um 270 di 347

272 Fare clic su Scheda. Dataset Questo strumento offre la possibilità di leggere dati da un file HTML ma soprattutto da un file XML e utilizzarli per costruire pagine dinamiche che mostrano sempre i dati aggiornati la struttura e i dati sono inseriti tra i TAG. Per creare un nuovo file chiamato DB.XML, fare clic su File/Nuovo/XML. File DB.XML. <?xml version="1.0" encoding="utf-8"?> <base> <utente> <ID>1</ID> <Nome>Luca</Nome> <Cognome>Rossi</Cognome> </utente> <utente> <ID>2</ID> <Nome>Giovanni</Nome> <Cognome>Verdi</Cognome> </utente> <utente> <ID>3</ID> <Nome>Piero</Nome> <Cognome>Bianchi</Cognome> </utente> <utente> <ID>4</ID> <Nome>Samuele</Nome> <Cognome>Verdini</Cognome> </utente> </base> Si vuole costruire una pagina di nome INDEX_01.HTML, nella barra dei menu è già impostato un collegamento verso questa pagina, in cui saranno mostrati i dati relativi elencati nel file DB.XML. Creare il file e, nel pannello Inserisci, categoria Spry, fare clic sul pulsante Dataset Spry. HTML um 271 di 347

273 Dall elenco a discesa Seleziona tipo dati scegliere XML e nella casella Nome dataset assegnare il nome del dataset. Nella casella Specifica file di dati, usando il pulsante Sfoglia, indicare il file XML che contiene i dati. Nella casella Elemento riga, si vede la struttura del documento XML. Fare clic sull elemento che contiene i dati che interessano. Nella sezione Anteprima dati, si vede un anteprima dei dati che sono importati. Una volta definiti i dati da importare premere il pulsante Seguente. In questo passaggio è possibile applicare criteri di ordinamento e filtrare le righe duplicate. In questo caso non è necessario, quindi si passa alla schermata successiva. Qui è possibile scegliere tra diverse strutture preimpostate per la presentazione dei dati. Ciascuna struttura potrà poi essere modificata, modificando opportunamente le regole di stile che la definiscono. 1. Scegliere Inserisci layout master/dettaglio, questo layout consente di vedere sulla sinistra l elenco degli elementi principali di ciascun oggetto e, quando si fa clic su un elemento principale, permette di vedere i dettagli sulla destra. 2. Ogni layout può essere configurato, magari eliminando qualche gruppo di dati, premendo il pulsante Configura. 3. Premere il pulsante Fine per inserire l oggetto nella pagina. HTML um 272 di 347

274 Utilizzare Vista dal vivo per controllare come si comporta il dataset. Esecuzione dell applicazione nel server web IIS. Copiare il sito web creato da Dreamweaver. I:\SITO DW Nella cartella del server web. C:\INETPUB\WWWROOT HTML um 273 di 347

275 HTML um 274 di 347

276 MICROSOFT FRONTPAGE INTRODUZIONE È un editor WYSIWYG in grado di gestire frame e form, CSS e DHTML. Importa documenti di Microsoft Office Word, Excel, Access e altri tipi di file RTF (Rich Text Format), ASCII, immagini, in modo efficiente. Consente di lavorare sia in modalità WYSIWYG sia in modalità HTML. È possibile disabilitare il controllo automatico della sintassi HTML/XHTML, così da consentire l introduzione d istruzioni come i comandi ASP, le procedure JavaScript. Molto utile alla gestione di grandi siti Internet la possibilità di rinominare un file, o una cartella e di vedere modificarsi automaticamente tutte le pagine che facevano riferimento a quel file o a quella cartella dal vecchio nome al nuovo. Una procedura guidata aiuta la pubblicazione delle pagine, sia verso un comune server Internet, sia verso un server compatibile con le cosiddette FrontPage extensions SharePoint Services. È possibile creare pagine con un motore di ricerca interno; è possibile inserire contatori degli accessi e, infine, è possibile collegare le proprie pagine HTML a database di vario tipo Access, SQL server. Condivide gli strumenti di correzione di Office. HTML um 275 di 347

277 Visualizzare righello e griglia Permette l inserimento d immagini e di testo in posizioni specifiche dello schermo. Per inserire righello e griglia eseguire la seguente procedura. 1. Fare clic sul menu Visualizza/Righello e griglia. 2. Selezionare nell ordine: Mostra righello, Mostra griglia, Blocca sulla griglia. 3. Si possono cambiare i parametri del righello e della griglia facendo clic su Configura. 4. Impostare, per esempio, la spaziatura in 20 pixel e la spaziatura del bloccaggio sulla griglia a 2 pixel. Posizionare paragrafi, immagini, tabelle e altri elementi Normalmente, i paragrafi di testo, le immagini, le tabelle e gli altri elementi di una pagina web sono disposti in sequenza. Tuttavia in FrontPage si può scegliere dove posizionare gli oggetti. 1. Scegliere dal menu Visualizza/Barre degli strumenti/posizionamento. 2. Seleziona l elemento che si desidera posizionare. 3. Fare clic sul pulsante Posiziona con coordinate assolute sulla barra degli strumenti Posizionamento in modo che il pulsante sia selezionato, FrontPage disegnerà un bordo attorno all elemento per indicare che è posizionato e mostrerà i bordi dell area posizionata. 4. Fare clic sul bordo blu si aprirà il quadro delle attività Livello. Qui si può attivare: Bordi e sfondo, Posizionamento e Comportamenti. HTML um 276 di 347

278 Utilizzare immagine di ricalco L immagine di ricalco, presente solo nell editor di FrontPage, permette di sistemare, oggetti pulsanti, immagini, caselle di testo, seguendo un immagine da ricalcare. Per utilizzare Immagine di ricalco si usa la procedura seguente. 1. Fare su Visualizza/Immagine di ricalco e, almeno la prima volta, su Configura. 2. Nella finestra Immagine da ricalco scegliere con Sfoglia l immagine che deve servire come ricalco, stabilire l opacità da 0% a 100% e confermare con OK. 3. Terminato il lavoro di allineamento andare sul menu Visualizza/Immagine di ricalco e togliere il segno di spunta a Mostra immagine. Tabelle e celle layout Fare clic sul menu Visualizza/Barre degli strumenti/tabelle. Utilizzare le icone presenti sulla barra degli strumenti Tabelle per disegnare tabelle e celle, da tale barra scegliere le seguenti opzioni. Disegna tabella layout. Disegna cella layout. HTML um 277 di 347

279 Disegna tabella. Gomma. Si può agire anche in un altro modo utilizzando il riquadro attività Tabelle e celle layout, per aprirlo fare clic sul menu Tabella/Tabelle e celle layout... Nel riquadro delle attività Tabelle e celle layout fare clic sul tipo di layout desiderato. Immediatamente si generano la tabella e le celle. Si può utilizzare la barra Tabelle che si attiva dal menu Visualizza, e poi Barre degli strumenti e quindi clic su Tabelle. Creare pulsanti interattivi Sono molto usati nelle pagine web. Per esempio, creare un pulsante interattivo col carattere Symbol che esegue un link al video sequenza di questa procedura. 1. Fare clic sul menu Inserisci/Pulsante interattivo Scegliere quindi il tipo di pulsante, il testo del carattere e l operazione che deve effettuare, poi il tipo di carattere e infine l immagine che si desidera dare al pulsante. 3. Terminate tali operazioni fare clic sul pulsante OK. Quando si salva la pagina ricordarsi di salvare anche le immagini del pulsante. HTML um 278 di 347

280 Fissare livello e comportamenti Livello o layer offre la possibilità di creare una particolare finestra nella quale attivare particolari azioni ed eventi. Per creare un livello si usa la seguente procedura. 1. Posizionare il cursore all altezza in cui si vuole collocare un livello e fare clic sul menu Inserisci/Livello. 2. Fare un doppio clic sul livello che si è appena creato, si aprirà il Riquadro delle attività Livelli. 3. Drag and drop il Livello nel punto della pagina desiderato. 4. Ridimensionare a piacimento. 5. Nel Riquadro delle attività Livelli, fare doppio doppio clic sul nome provvisorio per cambiarlo. 6. Selezionare il livello e impostare Bordi e sfondo... e il tipo di posizionamento. All interno del livello s inseriscono sia testo sia immagini, nell esempio è riprodotta l immagine di una casa. 7. Si può decidere se tenere il livello nascosto oppure visibile, per fare questo selezionare il livello e fare clic sull icona dell occhio, esistono tre posizioni: predefinita, nascosto e visibile. 8. Una volta creato un livello si può decidere che Comportamento attivare, fare clic su quel determinato livello, per fare ciò fare clic, nel riquadro delle attività Livelli, su Comportamenti. 9. Si aprirà il riquadro Comportamenti, facendo clic su Inserisci si stabilisce Azione da effettuare ed Evento, nell esempio l azione è un messaggio di popup e l evento è onclick. HTML um 279 di 347

281 Inserire un filmato in formato Flash Per inserire un animazione eseguire la seguente procedura. 1. Decidere in quale punto della pagina dovrà essere inserita l animazione. 2. Dal menu Inserisci/Immagini/Filmato in formato Flash Fare clic col tasto destro e quindi esegui Riproduci filmato in formato Flash, mentre il filmato è in esecuzione è possibile ridimensionarlo nella pagina. HTML um 280 di 347

282 Modelli dinamici Si può usare per aggiungere contenuto predefinito e formattazione ad una pagina web, come alternativa all utilizzo di un modello di FrontPage. I modelli dinamici hanno le seguenti caratteristiche. 1. Aggiungere un modello dinamico ad una pagina già esistente dopo che questa è stata creata, invece di usarlo per creare una nuova pagina. 2. Un modello dinamico rimane indissolubilmente collegato alla pagina. Se, in seguito, si cambia il modello, FrontPage aggiorna automaticamente la pagina collegata in modo che possa acquisire le modifiche apportate al modello. 3. Quando la pagina è collegata ad un modello dinamico, si possono modificare solo quelle parti impostate nel modello come aree modificabili. Per creare e usare un modello dinamico usare la seguente procedura. Creare una pagina tipo. 1. Impostare come aree modificabili l area del titolo e l area del testo. Per creare un area modificabile, posizionare il punto d inserimento dove si vuole inserire l area o selezionare il testo che si vuole incorporare nell area e scegliere Formato/Modello Web dinamico/gestione aree modificabili. 2. Quindi nella finestra di dialogo Aree modificabili, digitare un nome per l area nella casella Nome area:, fare clic sul pulsante Aggiungi, quindi fare clic su Chiudi. 3. Salvare il modello dinamico selezionando File/Salva con nome, nella finestra di dialogo Salva con nome selezionare Modello Web Dinamico (*.DWT) dalla casella di riepilogo Tipo file:, specificare un nome e una posizione per il modello e fare clic sul pulsante Salva. 4. Per applicare il modello dinamico ad una pagina web, creare una nuova pagina web. Quindi selezionare Formato/Modello Web dinamico/associa modello Web dinamico e selezionare il modello dinamico nella finestra di dialogo Associa modello Web dinamico. 5. La pagina acquisirà il contenuto e la formattazione del modello, si può aggiungere e modificare il contenuto o la formattazione nelle aree modificabili. 6. Se in seguito si modifica il modello dinamico, tutte le pagine associate a quel modello saranno di conseguenza cambiate. Modificare l anteprima nel browser Si può vedere in anteprima e regolare le dimensioni della finestra del browser. Addirittura se su un PC sono installati più browser è possibile vedere l anteprima in quel browser dopo averne fissate le dimensioni. L operazione richiede i seguenti passi. Fare clic su File/Visualizza anteprima nel browser, scegliere quindi in che risoluzione vedere l anteprima. Se si fa clic su Modifica elenco Browser si aprirà la finestra Browser, scegliere Aggiungi per aggiungere un browser e segno di spunta su Salvare la pagina automaticamente prima dell anteprima. HTML um 281 di 347

283 Pubblicare un sito web La finestra di dialogo Proprietà sito Web remoto consente di specificare le modalità di pubblicazione in una diversa posizione dei file e delle cartelle del sito web. Questo processo è definito anche pubblicazione del sito web locale nel sito web remoto. Per accedere alla finestra di visualizzazione Sito web remoto eseguire la seguente procedura. 1. Fare clic su Visualizza/Cartelle. 2. Poi fare clic su Sito web remoto e poi su Proprietà sito Web remoto La finestra di dialogo include opzioni nelle seguenti schede. Tipo server web remoto Selezionare il tipo di server che ospita il sito web remoto. FrontPage o SharePoint Services Se il server web esegue le estensioni del server di FrontPage, SharePoint Team Services o Windows SharePoint Services, immettere le informazioni relative al web. Percorso sito web remoto, digitare l indirizzo Internet, compreso il protocollo, del sito web remoto nel quale si desidera pubblicare file e cartelle. Usa connessione crittografata SSL. Utilizza il protocollo SSL per la connessione al server, SSL è un protocollo per la crittografia e il trasferimento più protetto d informazioni su Internet. WebDAV (Web-based Distributed Authoring and Versioning) Se il server web supporta il protocollo WebDAV, immettere le informazioni relative al server nelle seguenti caselle. FTP Se il server supporta il protocollo FTP immettere le informazioni relative al server nelle seguenti caselle. Directory FTP. HTML um 282 di 347

284 Digitare il percorso della cartella specifica nel sito web remoto. Usa FTP passivo. Pubblica file e cartelle del sito web locale nel sito web remoto utilizzando a ogni connessione una porta diversa specificata dal server, se il server che ospita il sito remoto utilizza la stessa porta per ogni connessione, deselezionare questa casella di controllo. File System Se il sito web remoto è memorizzato nel PC in uso o nel file server, digitarne l indirizzo o il percorso nella casella Percorso sito Web remoto. Visualizzare la pagina Sono disponibili quattro tipi diversi di visualizzazione pagina, secondo le esigenze specifiche e delle preferenze di visualizzazione e di utilizzo delle pagine. Usare i pulsanti che sono alla base della pagina visualizzata in forma Normale nella finestra di FrontPage. Visualizzazione Normale Corrisponde alla visualizzazione pagina predefinita e consente di progettare e modificare pagine web in un ambiente di tipo WYSIWIG durante la creazione delle pagine mediante l utilizzo di strumenti di progettazione. Doppia visualizzazione Consente di esaminare e modificare il contenuto della pagina web in uno schermo suddiviso in due sezioni che consente di accedere contemporaneamente alle visualizzazioni Codice e Normale. Visualizzazione Codice Consente di visualizzare, scrivere e modificare i TAG HTML direttamente, grazie alle caratteristiche di ottimizzazione del codice di FrontPage, è possibile creare codice HTML appropriato e semplificare le operazioni di eliminazione del codice non desiderato. HTML um 283 di 347

285 Visualizzazione Anteprima Consente di verificare in modo approssimativo l aspetto della pagina nel browser senza doverla salvare, utilizzare questa visualizzazione per controllare le modifiche apportate durante la creazione della pagina web. Visualizzazione del codice Si usa la seguente procedura. 1. Dal menu Visualizza/Barre degli strumenti/visualizzazione Codice. 2. Successivamente selezionare la visualizzazione Codice. 3. Se si fa clic, sull icona Opzioni presente nella barra Visualizzazione codice si può decidere quindi se nell editare il codice si desidera: andare A capo automatico, avere sempre presenti i Numeri di riga, attivare il Margine selezione oppure attivare il Rientro automatico. Utilizzare l editor del codice sorgente La versione di FrontPage non accontenta solo coloro che utilizzano l applicazione che non conoscono nemmeno un comando HTML ma va incontro alle esigenze di coloro che intendono utilizzarlo in modo massiccio. Per lavorare con i TAG HTML della pagina eseguire la seguente procedura. 1. Fare clic sul menu Visualizza/Barra dei tag. 2. Ogni oggetto della pagina è identificata dal suo tag. 3. In ogni momento si può selezionare il tag e modificarlo Modifica tag Si aprirà l Editor di tag per modificare i parametri e confermare le variazioni facendo un clic sul segno di spunta verde. HTML um 284 di 347

286 IntelliSense Quando si lavora nella finestra Codice, la funzione IntelliSense semplifica il lavoro con il codice HTML sorgente. Per esempio, se si digita < per iniziare a inserire un TAG HTML, l applicazione visualizzerà un elenco a comparsa di tutti i TAG applicabili nel contesto corrente. Si può quindi fare doppio clic su un TAG dell elenco per inserirlo subito. Si può accedere agli strumenti di IntelliSense anche tramite il menu Modifica/IntelliSense. Ottimizzare HTML Le opzioni per l ottimizzazione del codice consentono di ridurre la quantità di codice HTML non standard o di altro codice presente nelle pagine web. In questo modo sarà semplificata la modifica delle pagine in visualizzazione Codice, le dimensioni dei file delle pagine saranno minori e la visualizzazione delle pagine da parte dei visitatori sarà più rapida. L ottimizzazione del codice può essere eseguita durante la creazione delle pagine oppure quando le pagine sono pubblicate sul sito web o in entrambi i casi. Se il codice è ottimizzato durante la creazione delle pagine, i tipi specifici di codice nelle pagine saranno automaticamente rimossi durante la modifica. Ad esempio, se si apre una pagina web creata con Word, sarà rimosso il codice specifico di Word. Se si sceglie di ottimizzare il codice quando si pubblicano le pagine, i tipi specifici di codice nelle pagine saranno automaticamente rimossi solo alla pubblicazione delle pagine sul sito web remoto. Il codice sarà invece mantenuto nelle pagine sul sito locale. Ciò significa che sarà possibile continuare a visualizzare il codice mentre si modificano le pagine nel sito locale ma né l autore né i visitatori saranno in grado di vederlo nelle copie delle pagine sul sito remoto. Per ottimizzare il codice eseguire la seguente procedura. 1. Clic sul menu Strumenti/Ottimizza HTML Poi, nella finestra Ottimizza HTML fare un segno di spunta su tutti i Commenti che si desidera rimuovere. HTML um 285 di 347

287 Accesso facilitato Permette l utilizzo da parte di utenti con problemi di mobilità, di vista o di udito. È possibile verificare l accesso facilitato di ogni pagina del sito. 1. Fare clic sul menu Strumenti/Accesso facilitato F8. 2. Nella finestra spuntare le opzioni da controllare e poi fare clic su Controlla. HTML um 286 di 347

288 Mappare le immagini Caricare l immagine di cui si vuole eseguire la mappatura e farvi sopra clic per selezionarla, aprire il menu Visualizza/Barre strumenti/immagini. Selezionare nella barra, lo strumento Area sensibile che consente di tracciare aree omonime con forme diverse, sono disponibili tre strumenti per disegnare rispettivamente aree rettangolari, circolari, o poligonali. Portare il cursore nell area dell immagine e isolare con un riquadro l area da rendere interattiva, rilasciando il tasto del mouse è aperta la maschera che gestisce l assegnazione del collegamento ipertestuale. Progettare un modulo Fare clic su Visualizza/Riquadro attività CTRL+F1. Sulla destra dell area di lavoro si apre una speciale finestra in cui si possono gestire direttamente tutte le operazioni connesse alla creazione di un sito o di una pagina web. Fare clic su File/Nuovo Nel riquadro attività Nuovo scegliere Altri modelli di pagina Dall elenco dei modelli scegliere un modello, fare clic su OK. HTML um 287 di 347

289 È possibile personalizzare il testo, i commenti o i campi del modulo. Si può usare la creazione guidata dei modelli. Fare clic su File/Nuovo Nel riquadro attività Nuovo scegliere Altri modelli di pagina Dall elenco dei modelli scegliere Pagina modulo, fare clic su OK e poi su Avanti. Fare clic su Aggiungi per creare una nuova domanda nel modulo. HTML um 288 di 347

290 Seguire passo dopo passo la creazione guidata. Al termine si possono inserire altre opzioni o voci facendo di nuovo clic su Aggiungi. HTML um 289 di 347

291 All interno di una pagina fare clic su Inserisci/Modulo. Accesso ai database Se le applicazioni devono gestire i dati inseriti come risposta alle interrogazioni, query, dagli utenti remoti, l inserimento o l aggiornamento di dati già esistenti, occorre un accesso web ai servizi di database. FrontPage fornisce funzioni di database molto utili. Salva risultati nel database aggiunge i dati del modulo direttamente in una tabella di database anziché in pagine web o in file di testo. Pubblicazione di database con un solo pulsante è un opzione all interno di Salva risultati nel database che crea un file di database, genera una nuova tabella chiamata Risultati all interno del database e crea nella tabella tante colonne quanti sono i campi in un modulo HTML. Creazione guidata e Area risultati database sono strumenti per creare query di un database basato su web. Durante la creazione guidata è chiesto il nome del database, di una tabella o di una query, le colonne da includere nella tabella e le opzioni di HTML um 290 di 347

292 formato; sono create delle pagine web che cercano e visualizzano i dati richiesti. Pagine di accesso ai dati sono pagine web che, una volta visualizzate nel browser dell utente web, permettono d impostare una connessione con il server web e aggiornare il database in modo interattivo. Affinché le pagine di un database funzionino veramente da database, un web su disco non sarà sufficiente, occorre un web su server residente su un server web che supporta ASP.NET e ADO (Active Data Objects). Progettare un sito web, scegliere File/Nuovo Nel riquadro attività Nuovo, in Nuovo sito Web fare clic su Altri modelli di sito Web Il sito funziona solo se sul server dell ISP operano le estensioni del server di FrontPage. Nella finestra Modelli sito Web, fare doppio clic su Creazione guidata Interfaccia database e specificare il percorso del nuovo sito web. HTML um 291 di 347

293 Nell area Per una visualizzazione ottimale della pagina è consigliabile utilizzare: specificare ASP.NET come tecnologia del server. Specificare una delle opzioni di connessione, per esempio Crea un nuovo database di Microsoft Access nel sito Web. Fare clic su Avanti. Fare clic su Avanti. HTML um 292 di 347

294 Fare clic su Avanti. Fare clic su Avanti. HTML um 293 di 347

295 Se in questo passaggio si seleziona la casella di controllo Modulo d invio o Editor di database, è possibile creare pagine per aggiungere, modificare ed eliminare record. Fare clic su Avanti. Se si seleziona la casella di controllo Non impostare la protezione della pagina di invio o dell editor di database mediante nome utente e password, qualsiasi visitatore del sito potrà aggiungere, modificare o eliminare record di database. Fare clic su Avanti. HTML um 294 di 347

296 Fare clic su Fine. FrontPage crea automaticamente i seguenti file e cartelle. HTML um 295 di 347

297 Aprire il sito web con il browser. HTML um 296 di 347

298 HTML um 297 di 347

299 Fare clic su Aggiungi record. Fare doppio clic sul record da modificare. HTML um 298 di 347

300 Estrarre dati da un database in base ad un determinato criterio Per creare un filtro a partire dall area Risultati database eseguire la seguente procedura. Fare doppio clic sulla banda colorata Inizio dell area risultati database. HTML um 299 di 347

301 HTML um 300 di 347

302 HTML um 301 di 347

303 SVILUPPARE UN SITO Scegliere File/Nuovo, nel riquadro attività Nuovo, in Nuovo sito Web fare clic su Altri modelli di sito Web Nella finestra Modelli sito Web, fare doppio clic su Sito Web a pagina singola e specificare il percorso del nuovo sito web, quindi fare clic su OK. Adesso si deve dare una veste grafica al sito, fare clic su Formato/Tema, si apre la finestra Tema e si sceglie come impostare la grafica del sito. Da Formato/Bordi condivisi, si attivano i bordi nel modo seguente. HTML um 302 di 347

304 Fare clic destro sulla barra di navigazione nel bordo superiore per impostare i collegamenti che deve gestire, selezionare dal menu contestuale Proprietà Barra dei collegamenti. Fare clic destro sulla barra di navigazione nel bordo laterale sinistro per impostare i collegamenti che deve gestire, selezionare dal menu contestuale Proprietà Barra dei HTML um 303 di 347

305 collegamenti. Nel bordo inferiore inserire una tabella senza bordi di due righe e tre colonne, fare clic su Tabella/Inserisci/Tabella Nella prima cella della tabella inserire un contatore di accessi, fare clic su Inserisci/Componente Web Nella seconda riga e seconda cella della tabella inserire un collegamento che consente al HTML um 304 di 347

306 visitatore d inviare posta elettronica, fare clic su Inserisci/Collegamento ipertestuale (ALT+CTRL+K). Posizionare il cursore in un punto della pagina dove si desidera inserire un immagine, fare clic su Inserisci/Immagine/Da file Quando si salva la pagina, è buona regola di progettazione salvare l immagine nella cartella IMAGES HTML um 305 di 347

307 Fare clic in un punto qualsiasi della pagina, dal menu contestuale selezionare Proprietà pagina, dopo aver impostato il titolo, inserire un suono. Si procede adesso alla creazione di tutte le pagine vuote, quest operazione si deve fare solo dopo aver fatto la progettazione del sito. Nel Riquadro di spostamento, in basso, selezionare la scheda Struttura, fare clic con il tasto destro sull home page e selezionare Nuovo/Pagina. Creare le pagine seguenti. HTML um 306 di 347

308 Ora selezionare Elenco cartelle, fare clic su Nuovo/Cartella e spostare i documenti. Nel Riquadro di spostamento, in basso, selezionare la scheda Struttura, fare clic con il tasto destro sull home page e selezionare Nuovo/Pagina. Creare le due pagine seguenti: cerca e sommario. Aprire la pagina CERCA.HTM, fare clic su Inserisci/Componente Web /Ricerca su Web. HTML um 307 di 347

309 La pagina visualizzerà il form per effettuare ricerche all interno del sito. Aprire la pagina SOMMARIO.HTM, fare clic su Inserisci/Componente Web /Sommario Il visitatore potrà così visualizzare la mappa generale del sito. Per inserire nuove funzionalità all interno del sito si utilizzeranno i modelli già disponibili, provvedendo ad aggiungere il nuovo sito all interno di quello già esistente. Scegliere File/Nuovo, nel riquadro attività Nuovo, in Nuovo sito Web fare clic su Altri modelli di sito Web Nella finestra Modelli sito Web, fare doppio clic su Creazione guidata sito Web Discussione e specificare Aggiungi al sito Web corrente, quindi fare clic su OK. HTML um 308 di 347

310 Il forum è configurato automaticamente da un wizard che crea le cartelle e i file necessari, per esempio la cartella DISC e il file principale del forum è DISC_WELC.HTM. Il sito è terminato, anche se tutte le pagine sono vuote, con una veste grafica e con i pulsanti di navigazione attivi. Se si fa clic sulla classe terza, si trova la scelta q1 e q2, se si fa clic su q1 si trova la pagina UD1 ma nella pagina UD1 si può fare clic su Home per tornare all home page HTML um 309 di 347

311 oppure sul pulsante Su per tornare alla pagina di terza. HTML um 310 di 347

312 La visualizzazione della struttura e dei link a partire dall home page è la seguente. HTML um 311 di 347

313 MICROSOFT EXPRESSION STUDIO INTRODUZIONE Se Visual Studio resta lo strumento principe per lo sviluppatore Silverlight e WPF (Windows Presentation Foundation), le applicazioni non possono prescindere dalla realizzazione d interfacce utenti usabili, ricche e interattive. Microsoft ha realizzato la suite Expression Studio, una famiglia di prodotti per sviluppatori che consente di compilare applicazioni client per il web e per Windows e contenuto multimediale. La suite comprende diversi strumenti per sviluppatori e grafici interessati a sviluppare siti web e ad implementare in essi applicazioni grafiche ed interattive. La suite comprende i seguenti software. VERSIONI Microsoft Expression Studio 1.0 è stato rilasciato il 30 aprile Microsoft Expression Studio 2.0 è stato rilasciato il 1 maggio Microsoft Expression Studio 3.0 è stato rilasciato il 22 luglio Microsoft Expression Studio 4.0 è stato rilasciato il 7 giugno HTML um 312 di 347

314 Expression Design Lo strumento di progettazione professionale per la creazione di contenuto grafico utilizzabile nelle applicazioni di sviluppo in Expression Studio. È possibile importare nel progetto file WMF (Windows MetaFile), EMF (Enhanced MetaFile) ed EMF+ (Enhanced MetaFile). I file WMF ed EMF sono file particolarmente portabili con contenuti grafici basati su vettori, creati comunemente con gli strumenti di grafica disponibili nelle applicazioni Microsoft Office, come Word e Visio. In Word, ad esempio, è utilizzato il formato EMF per creare immagini WordArt. Anche le diapositive e i grafici creati in PowerPoint utilizzano questo formato. Con i formati metafile è possibile memorizzare dati immagine complessi in file di dimensioni relativamente ridotte. HTML um 313 di 347

315 Expression Encoder Screen Capture Expression Encoder Interfaccia in grado di facilitare la preparazione di video. HTML um 314 di 347

316 Expression Web È lo strumento dotato di funzionalità complete per la progettazione, lo sviluppo e la pubblicazione di siti web, conformi agli standard del web. Supporta ASP.NET, PHP, Microsoft Silverlight, immagini Deep Zoom Composer, AJAX e video Silverlight. È possibile importare file di Adobe Photoshop e pubblicare in modo protetto i siti realizzati, con flussi di trasferimento a più file e FTP protetto. HTML um 315 di 347

317 Il modulo Verifica SEO (Search Engine Optimization) analizza il sito per ottenere i massimi livelli possibili di classificazione nei motori di ricerca. Consente di scegliere opzioni SEO, visualizzare un report SEO, filtrare i risultati nel report SEO e scorrere in avanti e indietro l elenco dei risultati nel report SEO per visualizzare ulteriori dettagli sulle singole voci. HTML um 316 di 347

318 Expression Web SuperPreview Permette di confrontare le pagine in più browser contemporaneamente, è prevista la sovrimpressione di pagine da due diversi browser che semplifica la risoluzione di errori di layout e posizionamento. Esempio, pulire la cache d Internet Explorer. using System; using System.IO; class Pulitura { static void Main(string[] args) { new Pulitura().clearIECache(); Console.ReadKey(); } void cleariecache() { ClearFolder(new DirectoryInfo(Environment.GetFolderPath(Environment.SpecialFolder.InternetCache))); } void ClearFolder(DirectoryInfo folder) { foreach (FileInfo file in folder.getfiles()) file.delete(); foreach (DirectoryInfo subfolder in folder.getdirectories()) ClearFolder(subfolder); } } HTML um 317 di 347

319 Expression Blend+ SketchFlow Lo strumento destinato a designer e creativi, sulle piattaforme Silverlight e.net, per la realizzazione d interfacce basate su XAML (extensible Application Markup Language). Consente di generare un applicazione disegnando le forme, disegnando i controlli come i pulsanti e le caselle di riepilogo, facendo in modo che i pezzi dell applicazione rispondano alle selezioni del mouse e agli input dell utente e creando uno stile unico per ogni cosa. Per creare un nuovo progetto, fare clic su File/Nuovo/Progetto (CTRL+MAIUSC+N). Nella finestra di dialogo Nuovo Progetto selezionare Silverlight o WPF, quindi selezionare il tipo di applicazione, per esempio Applicazione WPF e il linguaggio di programmazione, immettere il nome del progetto nel campo Nome: quindi premere OK. La struttura del progetto è la seguente. Expression Blend è il prodotto destinato al disegno dell UI (User Interface) e condivide il HTML um 318 di 347

320 formato di progetti con Visual Studio. È possibile, quindi, aprire lo stesso progetto con Expression Blend e visualizzare nella superficie di design, il layout definito in precedenza in Visual Studio. Esempio, UI dell equazione di primo grado. Ovviamente si poteva partire da Expression Blend e definire esattamente lo stesso layout. Per popolare, per esempio una listbox da inserire nella sezione master è necessario avere una fonte dati. Ovviamente, da Visual Studio, è possibile creare una classe e metterla in binding sulla listbox, ma, tramite Expression Blend è possibile lavorare con dati di test. Nella scheda Dati selezionare Progetto e, tramite il pulsante Crea dati di esempio in alto a destra, selezionare l opzione Nuovi dati di esempio. Dopo aver scelto un nome per la fonte dati, premere OK per creare la struttura tabellare. Per default, la struttura si presenta con una collezione di dieci elementi, ciascuno dei quali è definito da una classe che espone due proprietà: Property1 e Property2. HTML um 319 di 347

321 La prima cosa da fare è modificare il nome e il tipo delle proprietà: è sufficiente un doppio clic sulla proprietà per modificarne il nome e premere il relativo pulsante Modifica il tipo di proprietà per scegliere un tipo e un formato predefinito. È ovviamente possibile aggiungere nuove proprietà tramite il pulsante (+) e selezionare Aggiungi proprietà semplice. Accanto alla voce Collection, il pulsante Modifica valori di esempio consente di modificare i valori di default proposti da Expression Blend. Per creare i controlli e agganciarli alla fonte dati di esempio, si può trascinare direttamente la Collection nel design in una sezione non utilizzata, rappresentata dal colore nero. HTML um 320 di 347

322 Una volta posizionata la Collection, si vede la ListBox appena creata riempita con una composizione di controlli, i quali visualizzano in verticale le proprietà definite nella Collection stessa, immagini comprese. Per portare il controllo nella sezione master della pagina, dalla scheda Oggetti e sequenza temporale occorre trascinare la ListBox all interno della voce Window. Solo a questo punto è possibile selezionare la ListBox, premere il tasto destro del mouse e scegliere la voce Ridimensiona automaticamente/altezza in modo che la dimensione della ListBox si adatti alla dimensione della colonna. Adesso bisogna modificare il template degli item della ListBox in modo da personalizzare il layout delle singole voci. Lasciando selezionata la ListBox, tramite il tasto destro del mouse, occorre aprire il menu contestuale e scegliere Modifica modelli aggiuntivi/modifica Elementi generati [ItemTemplate]/Modifica corrente per entrare in modifica del template legato al singolo elemento della ListBox. Come si nota dalla palette Oggetti e sequenza temporale, Expression Blend ha creato un elemento padre di tipo StackPanel che contiene le due TextBlock riferite alle proprietà Azienda e Nome e un controllo di tipo Image per la foto. Fare clic sullo StackPanel e, tramite il tasto destro del mouse, selezionare Modifica tipo di layout/grid: in questo modo si sostituisce lo StackPanel. Le operazioni effettuate hanno modificato lo XAML corrispondente, quindi, volendo, si può riprendere Visual Studio e modificare o aggiungere proprietà o elementi all UI. Tramite Expression Blend è possibile però effettuare queste modifiche direttamente dal designer: selezionare la griglia appena creata e dalla palette Layout scegliere Auto nelle proprietà Width e Height. Dopo quest impostazione è possibile sistemare i controlli trascinandoli con il mouse nella posizione preferita. Ora si devono visualizzare i dettagli dell elemento selezionato nella ListBox. Si utilizza il meccanismo di data binding che consente di definire direttamente nel codice XAML i legami fra controlli e dati. Ogni controllo di WPF e Silverlight espone una proprietà DataContext che rappresenta i dati associati al controllo stesso; questi dati sono visibili e utilizzabili da tutti i controlli figli: questo meccanismo consente di effettuare il binding fra l elemento selezionato della ListBox e il controllo Border. Selezionare dalla palette Oggetti e sequenza temporale l oggetto DetailsControl e dalla scheda Proprietà, nella palette Proprietà comuni, scegliere il pulsante Nuovo della proprietà DataContext. Nel menu contestuale scegliere Element Property Binding... e, tramite il cursore a forma di mirino, selezionare la ListBox. La dialog che appare consente d impostare la proprietà sorgente del binding che corrisponde all elemento selezionato della ListBox rappresentato dalla proprietà SelectedItem. Nella sezione dettagli impostare la proprietà SelectedIndex della ListBox da (-1) a (0) in modo che il primo elemento diventi selezionato per default. Tramite quest operazione si è collegato il Border dei dettagli all elemento selezionato della lista dei dati. Non resta che posizionare i controlli all interno del detail e associarli alle proprietà dei dati. Per eseguire quest operazione, attivare il controllo DetailsControls nella palette Oggetti e sequenza temporale, scegliere uno StackPanel dalla palette dei controlli di sinistra e disegnarlo, all interno della sezione dei dettagli. HTML um 321 di 347

323 CMS INTRODUZIONE Prima di passare alla fase di selezione di un CMS, è necessario definire i prerequisiti del sito che si va a creare per rendere più agevole il processo di selezione. In questa categoria rientra non solo la scelta della vera e propria natura del sito ma anche la decisione su chi dovrà usarlo, sull infrastruttura tecnologica sulla quale si appoggerà, sul livello di competenze richiesto agli amministratori. Svantaggi. Costo di acquisto dell applicazione. L applicazione è un infrastruttura complessa che da un lato facilita la pubblicazione di un sito web, rendendo automatici i processi di pubblicazione delle pagine e di strutturazione delle stesse ma dall altro tende a legare lo stesso sito alle proprie strutture. Costo del servizio di hosting molto più alto di un servizio per la gestione tradizionale. Possibili tipologie di siti web che potrebbero essere gestite da un CMS. Siti generalisti Sono i portali, siti che includono una gran varietà di funzioni: pubblicazione di notizie, gallerie fotografiche, strumenti di community, per esempio Joomla! Blog Sono tipologie di siti che prevedono la pubblicazione di articoli o post in ordine cronologico suddivisi per categorie, nati come diari personali, sono veri e propri strumenti editoriali professionali che possono essere utilizzati per la pubblicazione di notizie, foto, video, per esempio Wordpress. E-commerce Offrono tutti gli strumenti per la vendita di prodotti, si va dalla pubblicazione degli oggetti organizzati in categorie fino alla gestione del processo di acquisto e post-vendita, per esempio Magento. HTML um 322 di 347

324 Wiki Sono servizi che permettono la pubblicazione collaborativa di pagine web, il loro scopo è di pubblicare pagine che tutti possono non solo leggere ma anche modificare, il principio su cui si basano è che la scrittura collaborativa di documenti e testi possa permettere di migliorare la qualità del testo stesso, per esempio Mediawiki il servizio su cui è costruita l enciclopedia collaborativa Wikipedia. Community Di solito i siti dedicati alle community si raccolgono attorno a un forum, un servizio che facilita la discussione e lo scambio di messaggi su temi predefiniti, i servizi di questo tipo offrono spesso funzionalità più evolute, come sistemi di messaggistica interna, pubblicazione di foto e video, per esempio phpbb (PHP Bulletin Board). E-Learning Facilitano la somministrazione della formazione online permettendo di gestire corsi, insegnanti e studenti; formalizzando i corsi in percorsi formativi formati da testi, immagini, video; valutando i risultati raggiunti attraverso verifiche online, per esempio Dokeos. Collaborazione I siti che permettono agli utenti di collaborare tra di loro sono molto diffusi in ambito aziendale, oltre a consentire di condividere documenti, immagini e altre tipologie di risorse, includono di solito strumenti di comunicazione asincrona, forum e sincrona chat, blog, wiki e altre tipologie di strumenti che favoriscono la condivisione di risorse e buone pratiche, per esempio Alfresco. Gallerie fotografiche I siti di gallerie fotografiche hanno un solo scopo: pubblicare le fotografie o anche i video prodotti da un utente nel modo più semplice possibile, oltre a suddividere le fotografie in album e visualizzare in diverse risoluzioni, consentono agli utenti di scaricarle, votarle e commentarle, per esempio Gallery. REQUISITI DI BASE Tipologia Le scelte si possono suddividere in quattro differenti alternative. 1. CMS Custom: progettato internamente può essere utile quando le necessità sono talmente specifiche che non è possibile, o non è conveniente, trovarle nelle altre tipologie di servizi. 2. CMS Open Source: è la strada più seguita, poiché consente di avere prodotti di alta qualità a costi quasi nulli. Tutte soluzioni rilasciate con licenza GNU GPL (GNU is Not Unix General Public License) sono valide per funzionalità e per l ampio supporto reso disponibile da una vasta community di programmatori e appassionati. 3. CMS commerciali: è la strada più costosa, sono adatti a grandi organizzazioni che hanno bisogno di soluzioni pronte all uso e servizi di assistenza sempre disponibili. 4. CMS come SaaS (Software as a-service), spesso gratuiti e molto semplici da utilizzare, anche se adatti a piccoli siti web, per esempio Google Sites o Weebly. Plugin Ogni CMS ha un set di funzionalità incluse nell installazione, built-in e diverse altre funzionalità che invece vanno installate a parte, chiamate estensioni, moduli o plugin. Scegliere le giuste funzionalità non è cosa semplice. I plugin permettono di ampliare le funzionalità di un CMS e sono una delle caratteristiche da valutare con più attenzione quando si deve scegliere un software per il proprio sito. HTML um 323 di 347

325 Tra i più comuni plugin, quelli che ogni CMS dovrebbe permettere d installare, ci sono: le gallerie d immagini e video per pubblicare set di fotografie in modo semplice e veloce; i sondaggi, per interagire con i propri visitatori e raccogliere informazioni sui loro interessi; le aree di upload e download, per consentire di pubblicare file e lasciarli scaricare; la gestione avanzata dei TAG, per creare TAG cloud o per consentire ai navigatori di seguire specifici argomenti del sito; le statistiche, o interne o basate su servizi esterni, per permettere di analizzare gli accessi al sito; nel caso il sito prevedesse commenti pubblici e senza moderazione preventiva, è d obbligo dotarsi di un modulo antispam, per evitare di ritrovarsi i commenti pieni di spazzatura. Interfaccia grafica La disponibilità di template, ossia di pacchetti di elementi grafici che sono in grado di modificare l intera interfaccia grafica di un sito. È un elemento di primaria importanza poiché nulla come l aspetto grafico definisce a colpo d occhio la natura e la qualità di un sito. Sicurezza I CMS sono applicazioni web, esposte 24 ore su 24 all esterno, la sicurezza e la solidità dell applicazione è uno di quegli aspetti che non va assolutamente sottovalutato. La sicurezza va valutata sotto due diversi profili. Da un lato verificando il numero delle vulnerabilità, errori di programmazione che possono compromettere il corretto funzionamento del sito, rilevate nel corso del tempo. Dall altro lato, va verificato il numero di giorni che trascorrono dalla scoperta della vulnerabilità al rilascio di una patch di sicurezza in grado di correggerla. Documentazione Sia gli amministratori di sistema sia gli utenti del CMS dovrebbero avere a disposizione una buona documentazione per sapere come gestire l applicazione. Le strade per ottenere queste informazioni sono tre. 1. La documentazione ufficiale rilasciata con l applicazione. 2. I canali di supporto diretto. 3. La comunità di utenti. Marketing Strumenti per la promozione del sito, indispensabili per promuovere attività di marketing, per aumentare il numero di visitatori e per fidelizzare i lettori. Indispensabile, in questo campo, sono gli strumenti per l ottimizzazione sui motori di ricerca: dalla riscrittura degli indirizzi in un formato gradito ai motori fino alla gestione dei metadati. La possibilità di gestire, attraverso funzioni built-in o plugin, strumenti per la condivisione delle risorse sui social network e su altri servizi di comunicazione, o anche risorse per la creazione di campagne di marketing. Accessibilità Da valutare, in fase di scelta di un CMS, anche tutte le funzioni che si possono far ricadere sotto la categoria di accessibilità, in altre parole tutti quegli strumenti che favoriscono l accesso al sito ad un più vasto numero di persone. Molti CMS possono attivare questa funzione attraversi un plugin. Inoltre, se vi fosse la necessità di raggiungere anche un pubblico internazionale, va constatata la possibilità di poter contare su interfacce multi lingua che si adattano automaticamente alla lingua del visitatore. HTML um 324 di 347

326 Wordpress È una piattaforma di personal publishing e CMS nota soprattutto per il suo largo impiego nella creazione di blog, è indicato per la realizzazione e pubblicazione di blog personali. La versione standard ne supporta uno solo per installazione. A ogni modo, è sempre possibile utilizzarlo per l impiego in piccoli gruppi di lavoro. Un apposita versione multi utente, Wordpress multi user, consente di gestire con una sola installazione un network di blog, amministrati tutti tramite un unico pannello. ASPNUKE È una piattaforma che nasce nel 2002, lo stesso anno è nata la più grande community italiana dedicata all argomento. Con la versione 2.0.6, poi, il progetto è definitivamente diventato solo italiano. Per il corretto funzionamento in locale, è sufficiente avere installato un server web che permetta l elaborazione di script ASP, quale ad esempio Microsoft IIS. Sul fronte dei database, si può scegliere tra Access o MySQL. DRUPAL Creato all università di Anversa da Dries Buytaert e Hans Snijder come BBS (Bulletin Board System), divenne un progetto libero nel Il nome Drupal è la traslitterazione inglese per la parola olandese druppel che significa goccia. Finita l università, il gruppo di studenti decise di pubblicare il sito in Internet, in modo che essi potessero continuare a comunicare, per cui nacque drop.org. Una volta pubblicato sul web, l utenza del sito aumentò e i membri iniziarono a parlare di autenticazione, moderazione, rating, syndication e di come implementarle sul sito. Nel 2001 Dries decide di rilasciare il software dietro drop.org con il nome di Drupal e con licenza open source, per permettere ad altre persone di utilizzare ed estendere il sistema. Drupal funziona su diversi sistemi operativi Windows, Mac OS X, Linux e qualsiasi piattaforma che supporti i web server Apache o IIS e PHP. Drupal utilizza un database per memorizzare i contenuti e necessita dunque di un software come MySQL e PostgreSQL che sono gli unici DBMS supportati. Il software sfrutta un design modulare che consente nella sua configurazione base, o core, di fornire le funzionalità essenziali. Ulteriori funzionalità possono estendere il core tramite l installazione di moduli e temi. Esistono numerose distribuzioni utili a semplificare il processo d installazione a quanti necessitino di usare Drupal in contesti specifici: un sistema di e-commerce, un sito musicale, un blog. Si tratta d installazioni pronte all uso, preconfigurate con moduli di terze parti. HTML um 325 di 347

327 JOOMLA! Realizzato in PHP è pubblicato con licenza open source GNU GPL v.2. Il nome del progetto è un interpretazione fonetica della parola Swahili jumla che significa tutti insieme o come un unica entità. Questo termine fu scelto poiché rifletteva i propositi del team di lavoro che presiede tuttora insieme alla comunità alla realizzazione del progetto. La prima release di Joomla! fu annunciata il 16 settembre 2005: si trattava di un clone della versione di Mambo L obiettivo primario era quello di riscrivere completamente il codice per renderlo completamente compatibile con MySQL. Requisiti: Apache, MySQL e PHP. Joomla! dal 2005 è vincitore di numerosi premi internazionali. Le estensioni si possono dividere in tre categorie. Moduli Sono estensioni che permettono di aggiungere al sito piccole porzioni di codice HTML. Sono utili per pubblicare elementi d informazione o semplici funzionalità interattive. Ad esempio, esiste un modulo di login per l accesso degli utenti, un altro per la pubblicazione di sondaggi, uno per la distribuzione di feed RSS (Really Simple Syndication). Sono utilizzati per implementare funzionalità elementari. Componenti Si caratterizzano essenzialmente per il livello di complessità delle funzionalità che forniscono. I componenti possono raggruppare più moduli per dare servizi strutturati. A un livello superiore, infine, gli stessi componenti possono essere usati da applicazioni che assolvono a funzionalità ancora più complesse. Plugin Funzionano come quelli comunemente utilizzati nei software per sistemi desktop. Possono essere semplicissimi o mettere a disposizione funzionalità molto sofisticate. FLATNUKE È adatto per soluzioni hosting senza database, oppure come scelta mirata per piccole e medie community. Al posto del database, utilizza flat file, in pratica semplici documenti di testo, in genere in formato XML. Ogni utente può impostare le funzionalità preferite aggiungendo, eliminando o modificando i file di cui è composto. La vera forza di questo prodotto è, comunque, data dalla possibilità di aggiornare il proprio sito da qualsiasi PC del mondo attraverso le news. Queste le principali caratteristiche. Centro di controllo: consente di amministrare il portale da un interfaccia web. Gestione utenti: gli amministratori possono attribuire agli utenti vari tipi di permessi per l accesso alle varie parti del sito o per la modifica dei contenuti. Forum: può essere organizzato in diversi argomenti raggruppati tra loro ed è dotato di numerose funzionalità. HTML um 326 di 347

328 Gallery: permette di creare gallerie d immagini amministrabili dall interfaccia web. Gestore di file: consente di caricare file da rendere disponibili per il download. Motore di ricerca interno: in grado di effettuare ricerche tra le news, il forum, i file in download, gli utenti, le immagini e le sezioni. E107 Progettato da Steve Dunstan nel 2001, è scritto in PHP e utilizza MySQL come database per la memorizzazione dei contenuti, gratuito, personalizzabile e sempre in costante sviluppo tramite plugin è possibile adattare la piattaforma a ciò che si deve fare. XOOPS Progettato nel 2002 dotato di forum proprietario installabile e configurabile, è scritto in PHP e si appoggia al database MySQL per salvare tutti i contenuti inseriti e le tabelle della piattaforma stessa. OCPORTAL Progettato nel 2004 e scritto in PHP con il database MySQL. ICY PHOENIX Progetto italiano basato su PHPBB potente, scalabile e adattabile alle proprie necessità, con modifiche e integrazioni di codice che aggiungono flessibilità all intero pacchetto. Ha molte caratteristiche originariamente rilasciate per il progetto PHPBB XS che è stato fondato da Bicet e successivamente sviluppato sia da Bicet sia da Mighty Gorgon. PHP-FUSION Progettato da Nick Jones nel 2002, è scritto in PHP, usa come database MySQL per memorizzare i contenuti del sito, la gestione dei contenuti è molto semplice grazie ad un pannello di amministrazione centralizzato. HTML um 327 di 347