La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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.

Presentazioni simili


Presentazione sul tema: "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."— Transcript della presentazione:

1 Web: linguaggi e strumenti di produzione

2 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 è lHTTP HyperText Transfer Protocol Prima versione dellHTML prevede solo testo

3 Cenni storici Nel 1993 il National center for supercomputing applications (Ncsa) crea Mosaic Marc Andreessen lascia lNcsa, fonda Netscape e crea il noto browser Succwssivamente la Microsoft lancia sul mercato Explorer

4 Standard di riferimento HTML L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: Word Wide Web Consortium)Word Wide Web Consortium Diverse versioni di questo linguaggio sono state rilasciate (HTML 2.0, HTML 3.2, HTML 4.0); e –

5 Introduzione allHTML Alla base del Web cè luso dellIpertesto Un ipertesto è un modo non lineare di organizzazione delle informazioni Le pagine Web sono generalmente scritte usando lHTML (HyperText Markup Language) HTML è un linguaggio di formattazione che serve a descrivere le caratteristiche di tutti gli elementi presenti allinterno di una pagina

6 Introduzione allHTML 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

7 Struttura informazioni un documento HTML inizia sempre con il tag e termina sempre con il tag l a struttura base di una pagina HTML è la seguente: informazioni documento

8 Struttura Identificatore di prologo Affinchè un documento sia identificato come HTML, esso deve iniziare con il prologo: !DOCTYPE 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,

9 Struttura... L'elemento 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.... L'elemento 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

10 Struttura... L'elemento contiene la pagina vera e propria, o almeno quello che si vedrà a video Può avere diversi attributi Colore di sfondo del documento. Immagine come sfondo. Colore del testo del documento. Colore dei collegamenti ipertestuali. Colore dei collegamenti attivi. Colore dei collegamenti già visitati.

11 Sezione... Il titolo da assegnare alla pagina. Questo è il titolo della pagina... Inserimento di funzioni o altro, sotto forma di script:......

12 Sezione fornisce informazioni addizionali al documento HTML es. il meta tag DESCRIPTION,

13 Formattazione e testo Specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative modifiche di Può avere altri due attributi : face che specifica il tipo di font e color che specifica il colore L'elemento specifica che una nuova riga deve iniziare COMMENTI

14 Formattazione e testo... definisce le dimensioni, il colore e il tipo di carattere adoperato Testo... specifica un paragrafo di testo, ha come attributo ALIGN che allinea il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY,

15 Formattazione e testo... Tutti gli attributi applicati al tag DIV saranno estese a tutto il blocco di codice interessato. Questo testo sarà centrato... specifica un blocco di testo da mostrare in grassetto... specifica un blocco di testo da mostrare in corsivo (italic).... specifica un blocco di testo da mostrare sottolineato

16 Collegamenti... Inserisce un collegamento ipertestuale.... Inserisce un collegamento ad un segnalibro nel documento stesso.... Inserisce un collegamento ad una .

17 Tabelle... Permette di creare una tabella. Definisce la grandezza del bordo della tabella. Definisce lo spazio tra le celle di una tabella. Definisce lo spazio tra il bordo e il contenuto delle celle di una tabella.

18 Tabelle Altezza di una tabella. Larghezza di una tabella.... Righe di una tabella.... Colonne di una tabella

19 Tabelle o Allinea il contenuto di una cella a destra, sinistra o a centro. o Allineamento verticale di una cella a centro, sotto o sopra. Estende la cella attraverso il numero di colonne specificato Estende la cella attraverso il num di righe specificato. Forza il testo di una cella affinché non vada mai a capo.... Crea una tabella d'intestazione con il testo in grassetto, allineato al centro.

20 Immagini Inserisce unimmagine, 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.

21 Moduli … 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 consente di ricevere dati dallutente gli attributi principali sono: - NAME: Definisce il nome della variabile in cui memorizzare il dato. - SIZE: Definisce la dimensione, del campo di input.

22 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,

23 Esempio modulo Primo modulo Inserisci il tuo nome:

24 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 lISO crea SGML versione internazionale e standardizzata del vecchio metalinguaggio W3C in questi ultimi anni promuove lo sviluppo del nuovo metalinguaggio Xml come alternativa allHtml

25 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"

26 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.

27 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.

28 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.

29 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".

30 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.

31 Lato-client - Applet Java Piccoli programmi realizzati in Java Sono inseriti nelle pagine Web ed eseguiti localmente dal browser Essendo eseguiti dal client linterazione con gli Applet non è condizionata dalla lentezza della rete Possono essere eseguiti su qualunque architettura basta che sia stata installata una Java Virtual Machine

32 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

33 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

34 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

35 Lato-Server PHP PHP è un linguaggio di programmazione che convive normalmente dentro lHTML 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 lerogazione della pagina Luscita di PHP è codice HTML per il browser, tutto ciò che è compatibile con HTML sul client è compatibile con PHP.

36 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 lutilizzo di PHP per creare portali web ha avuto un notevole incremento

37 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;

38 Strumenti di produzione Macromedia Dreamweaver MX Ottimo per completezza e facilità duso 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à duso abbastanza completo ma poco diffuso

39 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

40 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 – PHP – Spaghettibrain –


Scaricare ppt "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."

Presentazioni simili


Annunci Google