Obiettivi del corso INFO WEB – LEZIONE N.1 RAVENNA, 5 MARZO 2008 creazione di pagine web con il linguaggio HTML: le basi del linguaggio HTML, i generatori e gli editor, la fase di progettazione, l'uso dei principali tag, la messa in linea delle pagine, l'utilizzo di un programma per la generazione. Introduzione a Wiki,Blog e CMS. I materiali didattici potranno essere scaricati dalla sezione Materiali didattici del sito www.cirsfid.unibo.it/didattica. L’esame sarà svolto in forma orale; si consiglia agli studenti di preparare un elaborato in HTML come verifica delle competenze acquisite. L'elaborato verrà discusso durante la prova orale. Dott. Giuseppe Contissa [email protected] HTML (Hyper Text Markup Language) L’HTML è un linguaggio di markup, ossia di descrizione. Non è un linguaggio di programmazione. Il linguaggio HTML non presuppone meccanismi di compilazione o gestione degli errori di programmazione: se la sintassi non viene rispettata semplicemente non si ottiene la visualizzazione della pagina, perlomeno non nel modo previsto. Appartiene alla famiglia dei linguaggi per la descrizione logica dei documenti derivati da SGML (Standard Generalized Markup Language), famiglia che comprende anche XHTML e XML. Il concetto di markup Il concetto di markup (o marcatura) deriva dall’ambiente tipografico, ed indica le annotazioni e i simboli che si usavano per indicare le parti del testo che dovevano essere corrette. Un collegamento ancora più antico (XII-XIII secolo) va all’opera dei Glossatori: le glosse erano spesso annotazioni a fronte, a retro o fra le righe del testo. La marcatura di un documento aggiunge alle informazioni che costituiscono il contenuto del documento delle metainformazioni sulla sua struttura e visualizzazione (rappresentazione). HTML (Hyper Text Markup Language) (2) Sviluppato a partire dalla fine degli anni ‘80 da Tim Berners Lee al CERN di Ginevra. Il W3C (World Wide web Consortium), l’organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML, ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0). La versione presa in considerazione in questo corso è l’HTML 4.01. La marcatura nel linguaggio HTML In un documento è possibile distinguere tra contenuto, struttura e visualizzazione. (esempio: in un libro, una frase ha un contenuto, una posizione nella struttura, una modalità di rappresentazione). Il linguaggio HTML separa il contenuto di un documento dalla sua struttura e visualizzazione, che vengono descritte attraverso dei marcatori denominati TAG. Quella che appare una complicazione rispecchia in realtà la filosofia originaria del web, e preannuncia la sua evoluzione (web semantico). La marcatura nel linguaggio HTML (2) È effettuataattraversoi TAG, chegestiscono: formattazione del documento L’inserimentodiimmagini L’inserimentodialtrielementimultimediali (filmati, applet,…) I collegamentitra le variepaginechecompongono un sito (creandoquindidocumentichehanno la strutturadiipertesti). Ipertesto La Creare pagine HTML Per creare pagine HTML si utilizzano software specializzati detti editor HTML Editor testuali: permettono di scrivere intervenendo direttamente sul codice (esempi: Notepad, HomeSite, HotDog). Editor WYSIWYG (whatyouseeiswhatyouget): non visualizzano il codice HTML, ma anticipano su schermo la pagina come verrà visualizzata dal browser(esempi: FrontPage). Editor ibridi testuali/WYSIWYG (esempio: Dreamweaver). Il file creato viene normalmente salvato con estensione “.htm” o “.html”. E’ un testo o un insieme di testi leggibili, con l’ausilio di una interfaccia elettronica, in maniera non sequenziale, per mezzo dei collegamenti ipertestuali. I collegamenti costituiscono una rete di informazioni, organizzate secondo diversi criteri, in modo da costituire vari percorsi di lettura alternativi. Progettare un sito web Prima di implementare un sito Web è necessario considerare vari aspetti di progettazione: Decidere una procedura tecnica (definire strumenti e tecnologie da utilizzare) Considerare il contenuto del sito, e conseguentemente la progettazione dei documenti e le modalità di presentazione Definire la struttura del sito (ad albero, lineare, ecc.) Per creare interi siti web si possono usare questi strumenti o in alternativa/aggiunta tool quali: Wiki, Blog, CMS, che permettono una gestione più agevole ed evoluta dei contenuti. Accessibilità Accessibilità (2) “Il potere del web sta nella sua universalità. Un aspetto essenziale è che tutti possano accedervi a prescindere dalle disabilità” Tim Berners-Lee. Direttore W3C Esistono alcuni standard e linee guida per definire l’accessibilità: WCAG, Web ContentAccessibilityGuidelines della WAI, Web AccessibilityInitiative (sezione del W3C) Negli USA la legge “Section 508” (Section 508 Amendmentto the RehabilitationActof 1973) In Italia la legge n. 4 del 2004 (legge Stanca) e successivi regolamento di attuazione (DPR 1 marzo 2005, n.75) e regole tecniche (DM 8 luglio 2005) Art. 2 della legge 9 gennaio 2004, n.4 (legge Stanca): 1. Ai fini della presente legge, si intende per: a) “accessibilità”: la capacità dei sistemi informatici, nelle forme e nei limiti consentiti dalle conoscenze tecnologiche, di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari; b) “tecnologie assistive”: gli strumenti e le soluzioni tecniche, hardware e software, che permettono alla persona disabile, superando o riducendo le condizioni di svantaggio, di accedere alle informazioni e ai servizi erogati dai sistemi informatici. Strumenti di Validazione http://validator.w3.org/ controllare il codice HTML rispetto alle guidelines del W3C) Browser (per http://www.w3.org/WAI/ER/tools/complete Lista di tool per controllare il codice rispetto a numerose guidelines o leggi disciplinanti l’accessibilità I Tag Sono parole riservate racchiuse fra parentesi angolari (nome del tag), seguite normalmente da un contenuto Es<p>testo</p> Es. <imgsrc=“immagine.gif” alt=“foto”> Commenti Possono essere inseriti commenti e annotazioni che non debbono essere interpretati e visualizzati dal browser. <! commento non visualizzabile> TAG di commento indicato dal W3C: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//IT”> Non deve essere chiuso e deve essere posto all’inizio del documento, prima di qualsiasi altro tag. Sono case-insensitive, cioè indipendenti dal maiuscolo o minuscolo Possono essere annidati uno dentro l’altro. Esempio: <tag1 attributi> contenuto 1 <tag2> contenuto 2</tag2> </tag1> Es. <a href=“/didattica.htm”>didattica</a> Alcuni tag invece non hanno contenuto, perché ad esempio indicano solo la posizone di alcuni elementi, conseguentemente non hanno neanche una chiusura. Un tag del genere è detto “empty”, cioè “vuoto”. I Tag (2) Spesso si presentano in coppie in cui il tag di chiusura ha lo stesso nome del tag di apertura ma è preceduto da una barra / Hanno degli attributi (obbligatori o facoltativi), il cui valore è racchiuso tra apici. Es. <title>titolo…. Il browser si occupa del rendering, cioè di interpretare e visualizzare gli ipertesti in linguaggio html, e di fornire strumenti per la fruizione dell’ipertesto stesso. Il browser cerca sempre di visualizzare il contenuto del file HTML anche se i tag sono non chiusi, incompleti o inesistenti. Da browser è possibile richiamare l’html alla base della pagina correntemente visualizzata (IE: menu-> visualizza ->html; firefox:menu-> visualizza ->sorgente pagina; safari: menu-> vista-> visualizza codice). È buona norma usare i caratteri di tabulazione per far rientrare il testo ogni volta che ci troviamo a creare un annidamento. Questa procedura si chiama indentazione e serve per rendere il testo più leggibile (all’utente umano - per il browser è indifferente).