Il Web e i suoi linguaggi

F. Giovanetti

Liceo di Luino

Il Web

• Quando navighiamo in Internet possiamo fruire di informazioni
• La base dell'organizzazione delle informazioni è il concetto di ipertesto
• Un ipertesto è un insieme di documenti con collegamenti multipli (link) tra le varie pagine.

Elementi di un ipertesto

• Il passaggio da una pagina all'altra in un ipertesto avviene in modo non sequenziale
• La mancata sequenzialità distingue profondamente gli ipertesti dai testi tradizionali (es. libri)
• L'elemento fondamentale di un ipertesto è il link (collegamento ipertestuale)
• Le pagine Web sono solo un esempio di ipertesto (sicuramente il più famoso)

Linguaggi di marcatura

• Per creare le pagine web occorre specificare all'interno dei testi le parole dalle quali partono i collegamenti e
• in generale il ruolo svolto dalle varie parti di testo (ad esempio i titoli)
• Per raggiungere questo scopo occorre un cosiddetto linguaggio di marcatura.
• HTML è l'acronimo di Hyper Text Mark-Up Language ed è stato creato da Tim Berners-Lee
• Spesso si confondono i linguaggi di marcatura (come html) con i linguaggi di programmazione ma sono concetti completamente diversi

Browser

• Quando navighiamo su internet utilizziamo un software detto browser (Firefox, Internet Explorer, Opera, Safari, Konqueror, ...)
• Il browser è un esempio di client, vale a dire un software (o per meglio dire un processo software) in grado di ricevere un determinato servizio
• Il browser intepreta il linguaggio HTML e presenta graficamente la pagina da esso descritta
• Occorre avere sin dall'inizio ben chiaro che questo processo di intepretazione è molto variabile a seconda del software, del sistema operativo e delle caratteristiche hardware.

Client, server, protocollo

• Il termine client indica un (processo) software dedicato alla fruizione di un determinato servizio
• Un altro (processo) software detto server invece rende disponibile il servizio
• Esempi tipici di server web sono Apache (open source) e Internet Information Services di Microsoft
• A volte i termini client e server indicano i computer sui quali vengono eseguiti i relativi software
• La comunicazione tra client e server avviene per mezzo di un insieme di regole detto protocollo
• Nel caso del web il protocollo si chiama HTTP

Evoluzione di HTML

• Lo scopo di HTML è descrivere la struttura logica dei documenti ipertestuali
• In seguito HTML si arricchisce di elementi di descrizione grafica (colori, font, ...)
• Questa evoluzione avviene in modo abbastanza anarchico, con l'introduzione di elementi proprietari da parte dei produttori di software (Microsoft e Netscape)
• Allo scopo di satndardizzare il linguaggio HTML, il W3C, fondato dallo stesso Berners Lee, introduce delle specifiche
• Nel corso degli anni si succedono diverse versioni delle specifiche (l'ultima è la 4.0.1) ed evoluzioni successive come XHTML

Browser testuali, grafici e multimedialità

• I primi browser erano puramente testuali
• In seguito vengono proposti dei browser grafici
• HTML permette di includere oggetti multimediali di vario tipo ed è al proposito molto flessibile

Contenuti e presentazione

• Lo sviluppo di HTML porta all'introduzione di numerose marcature dedicate alla presentazione grafica del testo
  • grassetto, corsivo, sottolineato
  • colori
  • font (carattere, dimensione)
  • altri effetti grafici
• Si tratta di uno snaturamento delle caratteristiche iniziali di HTML

Separare contenuti e presentazione

• La commistione di contenuti e presentazione porta numerosi inconvenienti
  • difficoltà nella manutenzione dei siti
  • mancanza di accessibilità
  • peso eccessivo dei file (e conseguente lentezza)
  • difficoltà nell'ottenere layout uniformi e quindi aspetto "hobbistico" dei siti.
• Occorre dunque ritrovare la separazione dei contenuti dalla presentazione grafica
• Soluzione: fogli di stile

CSS

• I fogli di stile CSS sono dei file di testo che contengono le istruzioni relative alla presentazione grafica di una pagina web
• Anche le specifiche CSS sono emanate dal World Wide Web Consortium
• I CSS permettono di specificare le caratteristiche relative a colori, font,margini, dimensioni, posizioni, ecc.

Vantaggi dei CSS

• I fogli di stile e in generale la separazione dei contenuti dalla presentazione offrono notevoli vantaggi:
  • La manutenzione di un sito è molto più veloce
  • Le varie pagine hanno caratteristiche grafiche omogenee
  • La stessa pagina può essere adattata a dispositivi molto diversi (schermi, dispositivi mobili, proiezioni, programmi di sintesi vocali
  • L'aderenza agli standard offre maggiori garanzie rispetto ai browser (soprattutto quelli più recenti)

Scrivere HTML e CSS

• Per realizzare pagine web volendo può bastare un semplice editor di testo
• Per ragioni di praticità in genere si utilizzano degli editor dedicati che possono appartenere a due diverse categorie:
  • editor di codice (si lavora direttamente in linguaggio html)
  • editor visuali (si lavora direttamente sul risultato), indicati spesso con l'acronimo WYSIWYG

Credits e licenza

• Questa presentazione (nella versione proiettata) è realizzata con S5 di Eric Meyer
• Si tratta di uno strumento per realizzare presentazioni scrivendo semplicemente un file html, quindi con strumenti standard e non proprietari
• Eccetto dove diversamente specificato, i contenuti di questa presentazione sono rilasciati sotto Licenza Creative Commons