Web: linguaggi e strumenti di produzione. Cenni storici Il World Wide Web (o semplicemente The Web)...

Web: linguaggi e strumenti di produzione

Cenni storici

Il World Wide Web (o semplicemente The Web) nasce nel 1989 presso il CERN a Ginevra

Tim Berners-Lee crea il linguaggio HTML (HyperText Markup Language)

Il procollo per il trasferimento in rete dei documenti ipertestuali alla base del Web è l’HTTP HyperText Transfer Protocol

Prima versione dell’HTML prevede solo testo

Cenni storici

Nel 1993 il National center for supercomputing applications (Ncsa) crea Mosaic

Marc Andreessen lascia l’Ncsa, fonda Netscape e crea il noto browser

Succwssivamente la Microsoft lancia sul mercato

Explorer

Standard di riferimento HTML

L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: Word Wide Web Consortium)

Diverse versioni di questo linguaggio sono state rilasciate (HTML 2.0, HTML 3.2, HTML 4.0); e –

Introduzione all’HTML

Alla base del Web c’è l’uso dell’Ipertesto

Un ipertesto è un modo non lineare di organizzazione delle informazioni

Le pagine Web sono generalmente scritte usando l’HTML (HyperText Markup Language)

HTML è un linguaggio di formattazione che serve a descrivere le caratteristiche di tutti gli elementi presenti all’interno di una pagina

Introduzione all’HTML

In un documento il markup è il codice che contiene le informazioni per la sua formattazione

Si racchiude il testo tra istruzioni chiamate tag (o marcatori) in generale il markup utilizza normali

caratteri e quindi i documenti possono essere creati usando semplici editor di testo

Struttura

<NOME TAG> informazioni </NOME TAG>

un documento HTML inizia sempre con il tag<HTML> e termina sempre con il tag </HTML> l

a struttura base di una pagina HTML è la seguente:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN"><HTML><HEAD> informazioni</HEAD><BODY> documento</BODY></HTML>

Struttura Identificatore di prologo

Affinchè un documento sia identificato come HTML, esso deve iniziare con il prologo: !DOCTYPE

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">

Questo tipo di riga solitamente generata in modo automatico dall'editor

Non è obbligatoria ed ha il solo compito di informare il browser che si tratta di un documento html relativo a determinate specifiche,

Struttura <HTML>...</HTML>

L'elemento <HTML> identifica un documento che contiene elementi HTML

Segue all'identificatore di prologo e circonda tutto il testo restante, inclusi tutti gli altri elementi o tags.

<HEAD>...</HEAD>L'elemento <HEAD> viene utilizzato per fornire informazioni sul documento

In questa sezione trovano posto tutti quei tags che impartiscono direttive ai browser

Tutto ciò che si trova all'interno della struttura head non sarà visualizzato, ma interpretato dal browser

Struttura

<BODY>...</BODY>

L'elemento <BODY> contiene la pagina vera e propria, o almeno quello che si vedrà a video

Può avere diversi attributi

<body bgcolor="#xxxxxx">Colore di sfondo del documento.<body background="nomefile"> Immagine come sfondo.<body text="#xxxxxx"> Colore del testo del documento.<body link="#xxxxxx"> Colore dei collegamenti ipertestuali. <body alink="#xxxxxx"> Colore dei collegamenti attivi.<body vlink="#xxxxxx"> Colore dei collegamenti già visitati.

Sezione <HEAD>

<TITLE>...</TITLE>

Il titolo da assegnare alla pagina.

<Title>Questo è il titolo della pagina</Title>

<SCRIPT>...</SCRIPT>

Inserimento di funzioni o altro, sotto forma di script: <script LANGUAGE="JavaScript"

type="text/javascript">......</script>

Sezione <HEAD>

<META>fornisce informazioni addizionali al documento HTML

es. il meta tag DESCRIPTION,

<META NAME="DESCRIPTION“ CONTENT="Inserire qui la descrizione”>

Formattazione e testo

<BASEFONT>Specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative modifiche di <FONT SIZE=+..>

Può avere altri due attributi : face che specifica il tipo di font e color che specifica il colore <BASEFONT SIZE=“3" FACE="arial" COLOR=“black">

<BR>L'elemento <BR> specifica che una nuova riga deve iniziare

COMMENTI

Formattazione e testo

<FONT>...</FONT>definisce le dimensioni, il colore e il tipo di carattere adoperato <FONT attributo="specifica">Testo </FONT>

<P>...</P>specifica un paragrafo di testo, ha come attributo ALIGN che allinea il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY,

Formattazione e testo <DIV>...</DIV>

Tutti gli attributi applicati al tag DIV saranno estese a tutto il blocco di codice interessato.<DIV align="center"> Questo testo sarà centrato </DIV>

<B>...</B>specifica un blocco di testo da mostrare in grassetto

<I>...</I>specifica un blocco di testo da mostrare in corsivo (italic).

<U>...</U>specifica un blocco di testo da mostrare sottolineato

Collegamenti

<a href="url">...</a> Inserisce un collegamento ipertestuale.

<a href="#name">...</a> Inserisce un collegamento ad un segnalibro nel documento stesso.

<a href="mailto:e-mail">...</a>Inserisce un collegamento ad una e-mail.

Tabelle

<table>...</table>Permette di creare una tabella.

<table border="pixel">Definisce la grandezza del bordo della tabella.

<table cellspacing="pixel">Definisce lo spazio tra le celle di una tabella.

<table cellpadding="pixel">Definisce lo spazio tra il bordo e il contenuto delle celle di una tabella.

Tabelle

<table height="pixel" or "%">Altezza di una tabella.

<table width="pixel" or "%">Larghezza di una tabella.

<td>...</td>Righe di una tabella.

<tr>...</tr>Colonne di una tabella

Tabelle <tr align="?"> o <td align="?">

Allinea il contenuto di una cella a destra, sinistra o a centro.

<tr valign="?"> o <td valign="?">Allineamento verticale di una cella a centro, sotto o sopra.

<td colspan="colonne">Estende la cella attraverso il numero di colonne specificato

<td rowspan="righe">Estende la cella attraverso il num di righe specificato.

<td nowrap>Forza il testo di una cella affinché non vada mai a capo.

<th>...</th>Crea una tabella d'intestazione con il testo in grassetto, allineato al centro.

Immagini

<img>Inserisce un’immagine, può contenere i seguenti attributi:

SRC per indicare l'immagine da inserire. BORDER per indicare la dimensione dell'eventuale

bordo ALIGN per indicare l'allineamento dell'immagine

rispetto al testo: (LEFT,RIGHT o CENTER). WIDTH permette di specificare una larghezza

predefinita HEIGHT imposta un'altezza predefinita. ALT permette di visualizzare un testo al posto

dell'immagine se questa non è visualizzabile.

Moduli

<form>…</form> Crea un modulo, si definiscono due campi,

- METHOD indica in quale modo i dati devono essere comunicati al server- ACTION specificare l'URL di destinazione

<input> consente di ricevere dati dall’utente gli attributi principali sono:

- NAME: Definisce il nome della variabile in cui memorizzare il dato.

- SIZE: Definisce la dimensione, del campo di input.

Moduli- TYPE: Imposta il tipo di campo di immissione desiderato, e può assumere i

seguenti valori:

TEXT: visualizza una semplice linea di testo delle dimensioni date in SIZE. La variabile specificata in NAME assume per valore quanto digitato nel campo

PASSWORD: Anche in questo caso viene visualizzata una semplice linea di testo, ma quanto viene digitato dall'utente non è visualizzato sullo schermo

CHECKBOX: Visualizza un semplice bottone di selezione che può essere selezionato o non selezionato.

RADIO: Visualizza un bottone che non consente scelte multiple. RESET: Visualizza un pulsante che azzera tutti i dati finora inseriti. Se si

specifica il VALUE allora il nome del pulsante cambia SUBMIT: Visualizza il pulsante che se premuto invia tutti i dati inseriti

all'indirizzo URL specificato nel campo ACTION di FORM, è possibile utilizzare VALUE per cambiare il testo del pulsante.

HIDDEN: Serve per un campo nascosto,

Esempio modulo

<HTML><HEAD> <TITLE>Primo modulo</TITLE></HEAD><BODY><FORM METHOD=post ACTION="script.php">Inserisci il tuo nome: <INPUT TYPE="text" NAME="nome" SIZE=20><INPUT TYPE="submit“ VALUE=“Invia”>

</FORM></BODY></HTML>

XML

circa trent'anni fa un ricercatore di Ibm, Charles Goldfarb Crea il primo esempio di linguaggio Markup che prese il nome GML

Nel 1986 l’ISO crea SGML versione internazionale e standardizzata del vecchio metalinguaggio

W3C in questi ultimi anni promuove lo sviluppo del nuovo metalinguaggio Xml come alternativa all’Html

Xml

Xml è un metalinguaggio che consente di caratterizzare le informazioni contenute in un documento rendendone possibile la visualizzazione via Web e l'elaborazione da parte di applicativi

una "estensibilità" della definizione dei dati e della struttura del documento attraverso la possibilità di creare nuovi tag

offre la possibilità di definire i tag dei documenti nell'ambito dei Dtd o degli schemi e permette di definire, attraverso Xsl i "fogli di stile"

Linguaggi lato client e lato server

Quando uno script viene interpretato ed eseguito dal browser si parla di script lato client.

Quando lo script viene eseguito dal server in cui risiedono le pagine, allora si parla di script lato server

Gli script lato client possono non essere compatibili con diversi tipi o versioni di browser

Gli script lato server vengono eseguiti sulla macchina dove risiedono le pagine, l'output è una pagina HTML che viene restituita al browser.

Lato-client - Javascrispt

Nasce nel 1995 creato da Netscape per dotare il proprio browser di un linguaggio di scripting che permettesse ai web designer di interagire con gli Applet Java e gli altri elementi delle pagine web.

Brendan Eich creò quindi LiveScript che venne incorporato nella versione beta di Netscape Navigator 2.0

In omaggio a Java decise di chiamare il nuovo linguaggio JavaScript.

Lato-client - Javascrispt

JavaScript, viene eseguito sul nostro computer di casa dal

browser (è un linguaggio client side o lato client).

JavaScript è un linguaggio di scripting: questo significa che la sintassi JavaScript può essere scritta direttamente

dentro la pagina HTML.

Lato-client - VBScript

VBScript (Visual Basic Script) è un linguaggio di scripting che ha una sintassi molto simile a VisualBasic.

Le sue applicazione spaziano dal web all'automazione

di certe procedure su sistemi Windows.

Per utilizzare VBScript non sono necessari compilatori:

basterà scrivere il programma con un editor di testo, come blocco note, e salvarlo con estensione ".vbs".

Lato-client - ActiveX ActiveX technologies è una piattaforma per lo sviluppo

di contenuti interattivi che si serve di componenti software, script e applicazioni già esistenti.

E' dunque una innovazione di notevole interesse perchè, supportata da molti diversi linguaggi e strumenti già esistenti

Permette agli sviluppatori (o a chi ne fa uso) con vari background e diverse esperienze di trasferire la loro creatività sul web.

Lato-client - Applet Java

Piccoli programmi realizzati in Java

Sono inseriti nelle pagine Web ed eseguiti localmente dal browser

Essendo eseguiti dal client l’interazione con gli Applet non è condizionata dalla lentezza della rete

Possono essere eseguiti su qualunque architettura basta che sia stata installata una Java Virtual Machine

Lato-client - FLASH

Flash è uno standard per la generazione di filmati multimediali introdotto da Macromedia.

genera filmati di poche decine di Kb

è ormai supportato da tutti i browser che ne distribuiscono il plugin al momento dell'installazione

i filmati consentono infinite possibilità di interazione con l'utente

Lato-Server ASP

ASP (Active Server Pages) si distingue sicuramente per la rapidità e flessibilità

Le pagine asp sono completamente integrate con i file html.

Sono facili da creare e non necessitano di compilazione.

Confinato ai server Microsoft, non funziona con molti altri server che popolano il web

Lato-Server JSP

Jsp (Java Servlet Pages) è la risposta basata sulla tecnologia Java alle Common Gateway Interface

è efficiente perchè la Java Virtual Machine, essendo sempre caricata in RAM ha tempi di accesso alle risorse molto più limitati rispetto alla programmazione CGI

Java è un linguaggio "universale", gira su tutte le piattaforme grazie alla JVM

è praticamente gratuito essendo distribuite con il web server Apache

Lato-Server PHP

PHP è un linguaggio di programmazione che convive normalmente dentro l’HTML ed è un mezzo pratico per realizzare velocemente pagine HTML dinamiche

il più versatile e completo linguaggio di programmazione server-side attualmente disponibile

PHP viene eseguito dal server durante l’erogazione della pagina

L’uscita di PHP è codice HTML per il browser, tutto ciò che è compatibile con HTML sul client è compatibile con PHP.

Lato-Server PHP

Orientato ai database: possiede al suo interno tutte le funzionalità per gestire le informazioni estrapolate dai database.

Grazie alla integrazione di PHP con il sever di DB MySQL è possibile inviare query a basi di dati in modo estremamente semplice

Con la creazione di prodotti open-source come PHPNuke l’utilizzo di PHP per creare portali web ha avuto un notevole incremento

Lato-Server Perl

Il perl, è un linguaggio complesso, ma molto efficace, utilizzato per la creazione di cgi (common gateway interface) a livello professionale

Poco diffuso fra gli utenti medi, a causa della difficoltà di apprendimento e di gestione della sua sintassi;

Strumenti di produzione

Macromedia Dreamweaver MXOttimo per completezza e facilità d’uso Macromedia Flash MXGrandi potenzialità nella creazione di animazioni interfacce ed altri elementi grafici per il web Microsoft Frontpage Uno dei più diffusi, buono per i principianti non adatto alla realizzazione di siti complessi Adobe Go LiveBuona facilità d’uso abbastanza completo ma poco diffuso

Glossario Server (web)

Elaboratore sul quale risiedono le pagine del sito web Browser

un'applicazione che trasmette la richiesta a un server tramite una rete, il server risponde trasmettendo i dati

HTML (HyperText Markup Language)Linguaggio di formattazione per ipertesti alla base del web

HTTP (HyperText Transfer Protocol)Protocollo per il trasferimento di documenti ipertestuali

Bibliografia/sitografia

Libri HTML 4 per il World Wide Web – E. Castro -

Addison Wesley XML per il World Wide Web – E. Castro - Addison

Wesley PHP per il World Wide Web – Larry Ullman –

Addison WesleySiti HTML.IT – www.html.it PHP – www.php.net Spaghettibrain – www.spaghettibrain.com

Web: linguaggi e strumenti di produzione. Cenni storici Il World Wide Web (o semplicemente The Web)...

Documents

Transcript of Web: linguaggi e strumenti di produzione. Cenni storici Il World Wide Web (o semplicemente The Web)...