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> es. il meta tag DESCRIPTION, <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 <!-- Questo testo è solo un commento, -->
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 MX Ottimo per completezza e facilità d’uso Macromedia Flash MX Grandi 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 Live Buona 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 Wesley Siti HTML.IT – www.html.it PHP – www.php.net Spaghettibrain – www.spaghettibrain.com