2) I principali linguaggi di programmazione

Premessa alla parte seconda

I principali linguaggi per poter visualizzare le pagine

In questa seconda parte del corso spieghiamo come funzionano i principali linguaggi di internet. Come puo’ avvenire che una pagina con testo, immagini, musica ,filmati possa apparire sullo schermo del nostro computer cosi’ come e’ stata inviata da un altro computer? Come puo’ il nostro computer di casa ricostruire immagini e suoni partendo da cio’ che riceve? Sequenze infinite di zero e uno? Bisogna comprendere il funzionamento di alcuni linguaggi che sono preposti allo scopo I cosi’ detti linguaggi di mark-up: HTML,CSS,XHTML,HTML5 e i due linguaggi Javascript e Php che servono a rendere le pagina di internet “dinamiche” o “interattive”, cioe’ che cambiano in funzione dei dati che noi inseriamo dal nostro computer di casa o dal nostro smartphone. (vedremo in seguito la differenza tra’ una pagina statica e una pagina dinamica e come una pagina statica si trasforma in una dinamica) HTML (HyperText Markup Language) Parte seconda:I principali linguaggi per poter visualizzare le pagine . Validazione dei documenti Un documento scritto con uno qualsiasi dei linguaggi approvati dal W3c se risponde alle specifiche stabilite dal W3C è definito documento valido ovvero well formed. Teoricamente, tutti i browser dovrebbero essere conformi agli standard W3C, e quindi essere in grado di rendere i documenti su qualsiasi piattaforma. La validazione (cioè il controllo sintattico) dei documenti non assicura tuttavia al 100% la compatibilità con tutti i browser, principalmente per limiti di questi ultimi, ma è comunque fortemente consigliata. Uno strumento per controllare la validità dei documenti è disponibile presso il Markup Validation Service del W3C .

HTML (HyperText Markup Language)

(il piu’ importante linguaggio del w3c che permette ai navigatori di internet di visualizzare le pagine )

Riassunto: Come avviene,all’interno del nostro computer, la ricostruzione di una pagina inviata da un altro computer (sever) lontano? Il computer di partenza (server) a cui richiediamo la pagina per esempio attraverso una ricerca su Google, ha immagazzinato nella sua memoria la pagina sotto forma di righe numerate in sequenza ordinata 1,2,3,4, ecc Se la pagina di partenza e’ formata, per esempio, da testo e da immagini , in ciscuna riga non viene riportata l’immagine fisica ma solo l’indirizzo (in memoria) in cui si trova l’immagine nel computer di partenza e il punto in cui deve essere inserita l’immagine e le dimensioni con cui deve essere rappresentata l’immagine. Cosi’ come non vengono riportati la grandezza del testo e i colori dello stesso ma solo il testo in un formato qualsiasi e delle “istruzioni” o etichette o marcatori che segnalano al computer di arrivo che dimensione dovra’ avere il testo quando verra’ ricostruito e che colore dovra’ avere. Nel caso per esempio del testo che deve essere ricostruito, su ogni etichetta c’e’ una scritta che indica al computer di arrivo che riceve quella parte di testo cosa deve fare di quel testo. Se per esempio all’inizio della prima riga c’e’ l’etichetta <h1> e in seguito la frase “Buon giorno a tutti “, il nostro computer di casa , o meglio il browser (navigatore) del nostro computer di casa sa’ che deve far apparire sullo schermo la intestazione “Buon giorno a tutti “ scritta in caratteri di dimensione 7. Lo sa’ in quanto il nostro computer nella lettura sequenziale della pagina incontra nella prima riga la etichetta (h1) . Se incontrasse in una riga successiva la etichetta <p >seguita da un’altra frase farebbe apparire questa seconda frase sullo schermo con i caratteri di dimensione 4 se incontrasse una etichetta <img>. farebbe apparire una immagine con determinate dimensioni specificate nella etichetta ecc. Il consorzio W3C ha codificato attraverso il linguaggio html tutta una serie di etichette, circa 116 in totale, da inserire nella pagina di partenza che dicono al computer che riceve queste etichette esattamente quello che deve fare con il contenuto contrassegnato dalle etichette stesse. Per questo il linguaggio html si chiama “linguaggio a marcatori “o a etichette-markup language- in inglese. Una pagina HTML si divide in tre’ parti fondamentali:

1)Il DTD (document Type Declaration)

2)La HEAD cioe’ la testa della pagina

3)Il BODY cioe’ il corpo della pagina

  • Il DTD serve a far capire al browser che legge il documento in quale versione del linguaggio HTML il documento e’ stato scritto
  • La HEAD contiene tutta una serie di informazioni preliminari di carattere generale per il browser che servono a impostare e visualizzare correttamente la sottostante parte cioe’ il Body.
  • Il BODY e’ invece la parte visibile al navigatore e fornisce informazioni moltoprecise e puntuali al browser per la visualizzazione della pagina cosi’ come e’ stata voluta da chi la ha creata.

Le prime due parti della pagina non sono visibili al navigatore. Al navigatore e’ visibile solo il contenuto della terza parte cioe’ del Body Per le finalita’ di questo corso e’ importante esaminare nel dettaglio le prime due parti della pagina , la DTD e la HEAD in quanto sono le parti che servono a capire se un sito e’ attuale sia dal punto di vista tecnico che commerciale o se e’ un sito che deve essere rivisto e corretto poiche’ non e’ piu’ attuale. Inoltre se si desidera rendere il sito facilmente indicizzabile dai motori di ricerca e se si desiderano impostare delle azioni di marketing e’ necessario intervenire principalmente sulla DTD e sulla HEAD. L’HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti), in informatica è il linguaggio di markup (a etichette o a marcature ) solitamente usato per la formattazione di documenti ipertestuali disponibili nel World Wide Web sotto forma di pagine web. È un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C) Esempio di pagina HTML : Quella sotto riportata e’ una pagina formata da solo 11 righe numerate da 1 a 11 Pagina HTML

filehtml

 Spiegazione: La etichetta “ DOCTYPE” (Doc-Type = Tipo di documento o DTD -Document Type Definition) definisce il tipo di documento .In questo caso la etichetta “Doctype” segnala al “browser” ,che riceve la pagina, che si tratta di una pagina scritta in linguaggio “Html5”. In questo modo il browser installato sul nostro computer sa’ che per visualizzare la pagina che gli arriva, deve utilizzare le regole del linguaggio Html5. Il testo tra’ le due etichette <html> e </html> descrive la pagina web Il testo tra’ le due etichette <body> e </body> e’ il contenuto della pagina visibile dall’utente (righe con sfondo grigio) Il testo tra’ le due etichette <h1> e </h1> su sfondo bianco viene visualizzato come intestazione della pagina cioe’ con grandi caratteri Il testo tra’ le etichette <p> e </p>,su sfondo bianco, viene visualizzato come il contenuto del paragrafo con caratteri di grandezza normale Le due righe vuote in verde si chiamano righe di testa e possono contenere delle etichette dette etichette di testa che normalmente non vengono visualizzate L’etichetta meta charset indica al brawser che il set di caratteri usato nel documento e’ “UTF-8″ . La pagina sopra riportata apparira’ sullo schermo del nostro computer senza le etichette (gialle) cosi’ come sotto riportato

La mia prima intestazione

il mio primo paragrafo

Esaminiamo ora piu’ nel dettaglio le parti della pagina che viene trasmessa al nostro browser che non sono visibili agli utenti: la DTD e la HEAD la Testa del documento. (vedi tabella sottostante). La DTD (Document Type Declaration ) e La Head ( testa del documento) rispettivamente in color grigio e in color verde nella pagina HTML sottostante sono molto importanti per varie ragioni

  • 1)Per capire con che versione dell’HTML e’ stato costruito il sito (ci serve per capire immediatamente se il sito e’ un sito vecchio con necessita’ di manuenzione o se e’ recente ) e per poterlo validare secondo lo standard W3C
  • 2)Per poter capire come e’ possibile intervenire sulle pagine del sito al fine di renderle meglio indicizzabili e facilmente reperibili dai motori di ricerca.

paginahtml   Come sopra accennato, perché un documento possa essere validato, deve contenere un elemento chiamato DTD (Document Type Definition o Document Type Declaration), da posizionare preferibilmente all’inizio del documento. Esempio: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”http://www.w3.org/TR/html4/loose.dtd&gt; Questa riga  in rosso fornisce alcune informazioni sul documento: Elemento                                                                   Descrizione HTML                                                     il tipo di linguaggio utilizzato è l’HTML PUBLIC                                                 il documento è pubblico W3C il documento fa riferimento alle specifiche rilasciate dal W3C (è il segno “meno”) le specifiche non sono registrate all’ISO (organizzazione di standardizzazione nternazionale). Se lo fossero state, ci sarebbe stato un “+” DTD HTML 4.01 Transitional     il documento fa riferimento a una DTD (“Document Type Definition” cioè “Definizione del tipo di documento”); la versione di HTML supportata è la 4.01 “transitional” EN                                                        la lingua con cui è scritta la DTD è l’inglese Inoltre, se necessario, è possibile specificare l’indirizzo di riferimento a cui è possibile trovare la DTD: per l’HTML non lo si fa quasi mai, perché gli URL a cui trovare la documentazione sono universalmente noti.

I tipi più comuni di DTD, e le relative sintassi dichiarative, sono:

XHTML 1.0 Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt; XHTML 1.0 Transitional <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; XHTML 1.0 Frameset <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt; XHTML 1.1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt; Il tipo di codifica applicata (character encoding) deve essere sempre specificato all’inizio del documento. Ciò consente al validatore, come ad esempio quello prima citato, messo a disposizione dal W3C, di controllare se il documento risponde allo standard del W3C stesso. Il processo di validazione identifica e fornisce una descrizione degli errori rilevati (error log). Esaminiamo ora la testa del documento HTML nel dettaglio e i vari tag di cui puo’ essere composta testahtmlTag della head (Etticchette della testata della pagina) Descrizione delle principali funzioni dei Tag della head (Testata della pagina)etichettetesta

Attributi e valori del Tag “meta”

Tra’ i tag sopra riportati esaminiamo nel dettaglio solo il tag “meta” in quanto riveste un ruolo importante nella indicizzazione effettuata dai motori di ricerca. Meta data: “dati riguardante i dati “= informazioni riguardanti i dati attributitagmeta

Esempio di codice con il tag “meta”

<head>

<meta charset=”UTF-8″>

< meta name=”description” content=”corso di base di informatica”>

<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>

< meta name=”author” content=” Giancarlo”>

</head> NB: In color rosso sono gli attributi del tag meta. In color blu sono i valori degli attributi.

Riportiamo piu’ sotto la descrizione di base del linguaggio Html cosi’ come fornita dal W3C

Cosa e’ HTML?

HTML e’ un linguaggio adatto alla descrizione delle pagine web. HTML stà per Hyper Text Markup Language HTML e’ un linguaggio a marcatori Un linguaggio a marcatori e’ costituito da una serie di marcatori I marcatori descrivono i contenuti del documento I documenti HTML contengono i marcatori (o etichette) HTML e testo I documenti HTML sono anche chiamati pagine web

I marcatori HTML

I marcatori o etichette HTML sono chiamati Tag ITag HTML sono delle parole circondate dai due segni di maggiore e minore cosi’: <html> I tag HTML normalmente sono rappresentati in coppie come <p> e </p> Il primo tag di una coppia e’ chiamato Tag di apertura, il secondo tag della coppia e’ chiamato tag di chiusura esempio: <nome del tag>contenuto</nome del tag>

Gli Elementi HTML

Nel linguaggio HTML un elemento e’ costituito dat tag di apertura, dal contenuto e dal tag di chiusura Questo in rosso e’ un elemento Html

<p>Questo e’ un paragrafo di testo</p>

elementohtml2 ALTRI DUE ESEMPI DI ELEMENTI HTML :Marcatore di apertura -Contenuto dell’elemento- Marcatore di chiusura

  1. <p> Questa è una parte di testo</p>
  2. <a href=”default.htm”> Questo e’ un link </a>

Sintassi di un elemento HTML

Un elemento HTML inizia con un marcatore di partenza :marcatore di apertura Un elemento HTML termina con un marcatore finale :marcatore di chiusura Il contenuto dell’elemento e’ tutto cio’ che e’ compreso tra’ i due marcatori di apertura e di chiusura Alcuni elementi HTML hanno contenuto vuoto Gli elementi vuoti sono chiusi con il marcatore di apertura La maggioranza degli elementi HTML hanno degli “attributi”

Attributi di un elemento HTML

Gli elementi HTML possono avere degli attributi .Gli attributi forniscono ulteriori informazioni su ogni elemento. Gli attributi sono sempre specificati nel marcatore iniziale Gli attributi sono sempre in coppia nome/valore : nome= “valore”

Esempio di attributo di un elemento HTML: “href “

I LinK nel linguaggio HTML sono contrassegnati dal marcatore <a>. Cio’ significa che quando il browser incontra un marcatore <a> lo interpreta come un link. Un attributo dell’elemento contraddistinto dal marcatore <a>’ e’ “href “che specifica un indirizzo nel web a cui il browser rinvia. <a href=”default.htm”> Questo e’ un link </a>

Tag del body  (Etticchiette del corpo della pagina)

All’interno della sezione di body, che racchiude la parte visualizzabile del documento, si utilizzano i tag specifici previsti per la formattazione dei contenuti accessibili all’utente finale, ossia per il controllo di:

  • intestazioni (titoli di capitoli, di paragrafi eccetera)
  • strutture di testo (testo indentato, paragrafi, eccetera)
  • aspetto del testo (grassetto, corsivo, eccetera)
  • elenchi e liste (numerate, generiche, di definizione)
  • tabelle moduli elettronici (campi compilabili dall’utente, campi selezionabili, menu a tendina, pulsanti eccetera)
  • collegamenti ipertestuali e ancore layout generico del documento inserimento di immagini inserimento di contenuti multimediali (audio, video, animazioni eccetera)
  • inserimento di contenuti interattivi (script, applicazioni esterne)

Tra quelli elencati sopra, il tag <a> è quello che gioca un ruolo chiave in quanto descrive un collegamento (o link) a un altro documento ipertestuale consentendo, con un click del mouse o con un’operazione da tastiera, di abbandonare la pagina o il sito che si sta visualizzando e caricare quella indicata dal link, realizzando così la funzione di navigazione tipica dell’uso di Internet.

I CSS :( Fogli di stile)

Riassunto Abbiamo visto nel capitolo precedente che la pagina internet che viene trasmetta dal server a cui ci siamo collegati arriva al nostro computer sotto forma di righe di codice contenenti i contenuti da visualizzare: frasi scritte immagini ecc numerate e contrassegnate da varie etichette . Ogni etichetta segnala al nostro computer cosa deve fare del contenuto contrassegnato dalla etichetta stessa.Per esempio visualizzare un determinato testo o una determinata immagine. Il foglio di stile invece segnala al nostro computer lo” stile “ che deve essere usato per la visualizzazione . Per Esempio il colore dei caratteri con cui deve essere scritta la frase stessa, o la posizione dell’immagine all’interno della pagina. E’ evidente che le istruzioni riguardanti lo stile con cui deve essere visualizzata la pagina devono raggiungere il nostro computer prima che il nostro computer visualizzi la pagina sul nostro schermo. Altrimenti il nostro computer non saprebbe che colore usare per il testo e non saprebbe dove collocare l’immagine.Infatti il foglio di stile (le istruzioni per lo stile) vanno poste nella testata della pagina. Il foglio di stile quindi non e’ altro che una lista di istruzioni che specificano lo stile da assegnare a ogni etichetta. Esempio la istruzione h1{color:white;backgraund:black;} indica al nostro computer che tutte le etichette contrassegnate con la scritta h1 devono rappresentare i caratteri in colore bianco con lo sfondo in nero. Tenendo separati la logica della rappresentazione dallo stile della rappresentazione attraverso un foglio di stile , si ha il grande vantaggio di poter rappresentare una pagina in diversi stili senza dover rifare il codice della pagina. Cioe’ senza dover cambiare le etichette in essa contenute.Basta infatti inserire nella testa della pagina un foglio di stile differente.   L’acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e designa un linguaggio di stile per i documenti web. I CSS istruiscono un browser o un altro programma utente su come il documento debba essere presentato all’utente, per esempio definendone i font (il tipo di carattere), i colori, le immagini di sfondo, il layout (la disposizione degli oggetti nella pagina), il posizionamento delle colonne o di altri elementi sulla pagina, etc. La storia dei CSS procede su binari paralleli rispetto a quelli di HTML, di cui vuole essere l’ideale complemento. Da sempre infatti, nelle intenzioni degli uomini del W3C, HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento. Per questo obiettivo, ovvero arricchire l’aspetto visuale e la presentazione di una pagina, lo strumento designato sono appunto i CSS. L’ideale perseguito da anni si può sintetizzare con una nota espressione:

separare il contenuto dalla presentazione.

La prima specifica ufficiale di CSS (CSS 1) risale al dicembre del 1996. Nel maggio 1998 è stata la volta della seconda versione: CSS 2. Niente stravolgimenti, ma molte aggiunte rispetto alla prima. CSS 2 non è altro che CSS 1 più alcune nuove proprietà, valori di proprietà e definizioni per stili non canonici come quelli rivolti alla stampa o alla definizione di contenuti audio. Mentre prendeva corpo la specifica relativa ai CSS3, veniva anche effettuata una revisione della seconda specifica, denominata CSS 2.1, che ha raggiunto lo stato di raccomandazione ufficiale nel giugno 2011. Il foglio di stile e’ costituito da un elenco di regole che vengono applicate ai vari elementi del documento.       L’illustrazione mostra la tipica struttura di una regola CSS. selettorecss Essa è composta da due blocchi principali:

  • il selettore
  • il blocco delle dichiarazioni.

Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <h1>: lo sfondo sarà rosso, il colore del testo bianco. I selettori possono essere di diverso tipo e a queste tipologie dedicheremo una sezione specifica della guida. Per il momento sia chiara la funzione che essi svolgono. Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe, la prima di apertura e la seconda di chiusura.Al suo interno possono trovare posto più dichiarazioni. Una dichiarazione è composta da una coppia: proprietà; valore. La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Le dichiarazioni vanno invece separate con un punto e virgola. Non è obbligatorio, ma è buona norma mettere il punto e virgola anche dopo l’ultima dichiarazione del blocco.

Inserire i fogli di stile CSS in un documento html

Vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire preliminarmente la fondamentale distinzione tra fogli esterni e interni.

CSS esterni e interni

È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo modificabili anche con un editor di testo ai quali si assegna l’estensione .css. Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea. Fogli di stile collegati Per caricare un foglio di stile esterno in un documento esistono due possibilità. La prima è quella che fa uso dell’elemento HTML <link>. La dichiarazione va sempre collocata all’interno della sezione <head> del documento HTML: <html>

<head>

<link href=”stile.css” rel=”stylesheet” type=”text/css” media=.”….”>

</head> <

body> [...]

</html> L’elemento <link> presenta una serie di attributi : href,rel,type,media  di cui è importante spiegare significato e funzione:

  • Attributo rel :descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
  • Attributo href :serve a definire l’URL assoluto o relativo del foglio di stile. È obbligatorio
  • Attributo type :identifica il tipo di dati da collegare. Per i CSS il valore da usare è text/css.L’attributo non è più obbligatorio a partire dalla versione 5 del linguaggio HTML.
  • Attributo media :con questo attributo si identifica il supporto (schermo, stampa, etc.) cui applicare un particolare foglio di stile. È un attributo opzionale.

Usare @import per caricare un CSS esterno Un altro modo per caricare CSS esterni è usare la direttiva @import all’interno dell’elemento <style>: <html>

<head>

<style> @import url(stile.css); </style>

</head>

<body> [...]

</html> Il CSS va collegato definendo un URL assoluto o relativo da racchiudere tra parentesi tonde (ma vedremo che altri modi sono accettati) e che la dichiarazione deve chiudersi con un punto e virgola. Questa modalità di inserimento di CSS esterni è comunque ormai in disuso. Il metodo da prediligere è quello basato sull’elemento link.

Fogli incorporati

I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite il tag <style>. Anche in questo caso la dichiarazione va posta all’interno della sezione<head>: <html>

<head>

<style     type=”text/css”>  body {background: white;} p {color: black;} [...] </style>

</head>

<body> [...]

</html> In colore blu’ sono le due dichiarazioni del foglio di stile incorporato Style fa parte della collezione di attributi HTML definiti globali: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente: <elemento style=”regole_di_stile”> Se, ad esempio, si vuole formattare un titolo h1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo: <h1 style=”color: red; background: black;”>…</h1> Le cose da osservare nel codice sono due. Come valore di style si possono dichiarare più regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della proprietà da impostare. Esattamente come si fa con i CSS esterni e incorporati. Consigli : A questo punto è giusto chiedersi: quando usare l’una o l’altra soluzione? Il punto di partenza nella risposta deve essere questo: i risultati nella formattazione del documento non cambiano. Una cosa è però facilmente intuibile: l’uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Intervenire nei meandri di una pagina per andare a modificare uno stile e ripetere l’operazione per quante sono le pagine del nostro sito può diventare davvero frustrante. Del resto, il loro uso è considerato deprecato anche dal W3C. Nelle più moderne pratiche di sviluppo, l’uso di CSS in linea è quasi sempre limitato a regole inserite dinamicamente tramite Javascript. Dunque, usare sempre fogli di stili esterni. Ricorrere a quelli incorporati per particolari esigenze di formattazione su elementi specifici di una certa pagina. Rifuggire fin quando è possibile dall’uso di CSS in linea.

L’attributo media e i tipi di media

Piu’ sopra abbiamo accennato all’attributo HTML media. Grazie ad esso siamo potenzialmente in grado di impostare un foglio di stile per ogni supporto su cui la nostra pagina verrà visualizzata. Una possibilità davvero interessante e che va sempre più acquistando importanza con l’ampliarsi dei dispositivi di fruizione delle pagine HTML. Se prima c’era unicamente un browser, oggi ci sono tablet, smartphone, schermi televisivi, console per i videogiochi. Per non parlare dei software usati dai disabili come i browser vocali. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalità. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile, oltre che controproducente. La soluzione ideale sta quindi nella creazione di fogli di stile ad hoc.

Sintassi  dell’attributo media:

L’attributo media può accompagnare sia l’elemento <link> sia l’elemento <style>. Ecco due esempi di sintassi:

  1. <link href=”print.css” media=”print” rel=”stylesheet”>
  2. <style media=”screen”> regole CSS… </style>

Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l’attributo media riportati nella tabella sottostante

css

È possibile usare più di un valore, ma i nomi della lista vanno separati da una virgola: <link rel=”stylesheet” media=”print, tv, aural” href=”print.css”> L’uso più tipico di questa funzionalità consiste nel collegare al documento vari fogli di stile adatti a ciascun supporto. Lo user agent (es: browswer cel nostro pc) che visualizzerà la pagina sarà in grado, se conforme agli standard, di caricare quello giusto:

  • <link rel=”stylesheet” media=”screen” href=”screen.css”>
  • <link rel=”stylesheet” media=”print” href=”print.css”>

Evoluzione e scenari d’uso

Nelle pratiche di sviluppo più comuni, le potenzialità offerte dall’attributo media e dalla vastità di dispositivi che supporta si riducono notevolmente. Di fatto, ove l’attributo sia utilizzato, i valori oggi sfruttati sono solo:

  • all
  • screen
  • print

E in effetti, un’applicazione utilissima è proprio quella che prevede l’implementazione di un foglio di stile ad hoc per la stampa. Ciò non significa che questo attributo abbia perso senso, anzi. Il suo uso è attualmente legato soprattutto al contesto delle media query, il meccanismo principe per l’attuazione del cosiddetto responsive design con cui possiamo identificare i dispositivi in base alle loro caratteristiche e funzionalità. Riportiamo di seguito la definizione di foglio di stile cosi’ come riportata dal W3C

Cosa e’ un CSS

Css sta’ per Cascading Style Sheets Gli stili definiscono come devono essere visualizzati gli elementi HTML Gli stili furono aggiunti nel linguaggio HTML 4.0 per risolvere un problema I fogli di stile esterni possono far risparmaire molto tempo .Ifogli di stile esterni sono salvati in files con estensione Css I fogli di stile risolvono grandi problemi HTML non e’ mai stato pensato per contenere marcatori per formattare i documenti o stabilire lo stile. HTML e’ stato pensato per definire il contenuto di un documento come:

  • <h1>Questa e’ una intestazione</h1>
  • <p>Questo e’ un paragrafo</p>

Quando sono stati aggiunti al linguaggio Html3.2 dei marcatori come <font> e l’attributo per il colore, e’ iniziata per gli sviluppatori una fase complicata . Lo sviluppo di grandi siti web in cui furono inseriti marcatori per specificare sia il tipo di carattere che il colore inseriti in ogni singola pagina, portarono a dei processi di revisione dei siti molto costosi. Per risolvere questo problema il W3C ha creato il linguaggio CSS A partire dalla versione 4.0 di HTML tutta la parte della formattazione poteva essere rimossa dal documento HTML e inserita in un apposito file Css separato. Oggi tutti i brawser supportano i fogli di stile Il foglio di stile Css stabilisce come devono essere visualizzati i vari elementi del linguaggio dal punto di vista stilistico. I fogli di stile sono spesso salvati in file esterni al documento con estensione.css I fogli di stile esterni permettono di cambiare lo stile e il layout di ogni singola pagina di un sito anche molto complesso semplicemente sostituendo o modificando un singolo file.

CSS Media queries

Già nelle prime specifiche dei CSS era previsto un meccanismo adatto a servire fogli di stile ad hoc a seconda del dispositivo di visualizzazione. È quello basato sull’utilizzo dell’attributo media e dei diversi tipi di media. L’ambito di applicazione in cui tale tecnica si è rivelata più utile è forse quello dei CSS per la stampa. Nei CSS3 il meccanismo di base è stato notevolmente migliorato e reso più efficace, fornendo agli sviluppatori uno strumento molto potente per servire stili specifici non solo in base ai dispositivi di fruizione ma anche a diverse caratteristiche degli stessi. Si entra così nell’epoca delle media queries. Com’è fatta una media query Come recita la definizione che appare nella specifica, “una media query consiste nella dichiarazione di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media”. Molto più semplice far parlare un esempio: <link rel=”stylesheet” media=”screen and (color)” href=”colore.css” /> Stiamo collegando alla pagina un foglio di stile (colore.css) attraverso l’elemento link. Usiamo l’attributo media per indirizzarlo a certi tipi di dispositivi e non ad altri. Nel contesto dell’attributo media abbiamo definito una media query. Analizziamola. Tipi di media Come si accennava nella definizione, una media query prevede innanzitutto l’uso di un tipo di media. Possiamo scegliere tra questi: all: il CSS si applica a tutti i dispositivi di visualizzazione (vedi la tabella soprastante in giallo e grigio)

  • screen: schermo di computer; print: pagina stampata;
  • projection: presentazioni e proiezioni; speech: dispositivi a sintesi vocale;
  • braille: supporti basati sull’uso del braille;
  • embossed: stampanti braille;
  • handheld: dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche;
  • tty: dispositivi a carattere fisso come i terminali;
  • tv: visualizzazione su schermi televisivi.

Se in una media query non si dichiara alcun tipo di media specifico, si assume che la regola o il CSS siano rivolti a tutti i tipi di media. In pratica, il valore implicito di default è all. Nel nostro esempio abbiamo usato screen, rivolgendoci dunque ad una categoria ben specifica: gli schermi di computer. Operatori logici e caratteristiche dei media Sempre stando alla specifica, una media query è un’espressione logica che può essere vera o falsa. È vera se soddisfa tutte le condizioni espresse nelle query. Per costruire query complesse si può fare ricorso a operatori logici come and, not e only. Torniamo al nostro esempio: media=”screen and (color)” Dopo aver dichiarato il tipo di media da usare come target (screen), abbiamo inserito la parola chiave and. Il suo significato non è diverso da quello comune e presente in tutti i linguaggi di programmazione: esegue un’unione logica tra due espressioni. La seconda espressione è (color). color rappresenta una delle tante caratteristiche possibili di uno schermo di computer. Nello specifico designa uno schermo a colori. A livello sintattico si noti che la seconda parte di una media query, quella con le caratteristiche del tipo di media, va posta tra parentesi tonde. A questo punto il significato della nostra query è chiaro. Essa sarà vera (ovvero sarà applicato il foglio di stile colore.css) se la pagina viene visualizzata su uno schermo di computer a colori. Un altro operatore logico utile è not. Esso nega il risultato della query. Modifichiamo il nostro esempio: media=”screen and (not color)” Il foglio di stile colore.css sarà applicato su schermi di computer che non siano a colori. La parola chiave only ha invece come funzione primaria quella di nascondere il foglio di stile agli user agent più datati. Scrivendo infatti media=”screen and (color)” è implicito che il CSS va rivolto solo al tipo di media screen. Ma usando questo codice media=”only screen and (color)” nascondiamo il CSS ai vecchi browser, che salteranno la dichiarazione. Una volta compreso il meccanismo si possono costruire query molto specifiche e complesse, per esempio concatenando tramite and più espressioni: media=”screen and (color) and (device-aspect-ratio: 16/9)” La query è vera se la pagina viene visualizzata su uno schermo a colori con aspect ratio di 16/9. Più media query possono essere raggruppate in una lista separandole con una virgola: media=”screen and (color), projection and (color)” Come e dove dichiarare una media query Ci sono tre modi per dichiarare una media query. Abbiamo già visto il primo. Si definisce la query nel contesto dell’attributo media dell’elemento link: <link rel=”stylesheet” media=”screen and (color)” href=”colore.css” /> All’interno di un foglio di stile, poi, si può impostare una query facendo ricorso alla direttiva @media: @media screen and (color) { /* qui vanno le regole CSS */ } Infine, si può importare un CSS specifico attraverso una media query usando la direttiva @import all’interno di un altro foglio di stile: @import url(colore.css) screen and (color); Caratteristiche dei media su cui si può intervenire per indirizzare un foglio di stile. Nella parte precedente ci siamo soffermati sulle regole di base delle media queries. Per sfruttarne al meglio tutto il potenziale, però, è fondamentale conoscere le caratteristiche dei media su cui si può intervenire per indirizzare un foglio di stile. Width width designa la larghezza dell’area di visualizzazione del documento. Su un normale browser web essa è rappresentata dal viewport e non ha nulla a che vedere con le dimensioni dello schermo del dispositivo. I valori di width possono essere espressi con qualunque unità di misura . @media screen and (width: 400px) { /* regole CSS */ } width può essere preceduta dai prefissi min- e max-, ottenendo così min-width e max-width. È proprio così che esplica tutta la sua utilità, specie nella realizzazione di layout. La seguente espressione, per esempio, applica un certo stile quando le dimensioni sono comprese tra 400px e 1024px: @media screen and (min-width: 400px) and (max-width: 1024px) { /* regole CSS */ } A puro titolo esemplificativo abbiamo creato questa demo: #box1 { background: #4c74be; width: 300px; padding: 30px; border-top-left-radius: 20px; margin-bottom: 40px; color: black; } @media screen and (min-width: 400px) and (max-width: 1024px) { #box1 { color: red; } } Il div #box1 ha il testo nero, ma nella media query abbiamo scritto: quando la larghezza della finestra è compresa tra 400px e 1024px il testo diventa rosso. Height height designa l’altezza dell’area di visualizzazione del documento. Come nel caso di width può essere definita con i prefissi min- (min-height) e max- (max-height). Device-width Con device-width si descrive la larghezza dell’intera area di rendering di un dispositivo. Su un computer o su un dispositivo mobile si intende la larghezza dell’intero schermo del dispositivo, non semplicemente quindi dell’area di visualizzazione del documento! Accetta i prefissi min- (min-device-width) e max- (max-device-width). <link rel=”stylesheet” media=”all and (max-device-width: 480px)” href=”iphone.css” type=”text/css” /> Device-height Descrive l’altezza dell’intera area di rendering di un dispositivo. Accetta i prefissi min- e max-. Orientation La caratteristica orientation indica se il dispositivo di output è in modalità landscape (la larghezza è maggiore dell’altezza) oppure portrait (l’altezza è maggiore della larghezza). I valori che può assumere sono appunto landscape o portrait. Nell’esempio la definizione di media queries con cui si servono CSS ad hoc ad un iPad a seconda se si trovi in modalità landscape o portrait: <link rel=”stylesheet” media=”all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)” href=”ipad-portrait.css” type=”text/css” /> <link rel=”stylesheet” media=”all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)” href=”ipad-landscape.css” type=”text/css” /> Aspect-ratio Definisce il rapporto tra la larghezza (width) e l’altezza (height) dell’area di visualizzazione di un documento. Può assumere i prefissi min- e max-. I valori si esprimono attraverso due numeri interi separati dal simbolo /: 3/4, 16/9, etc. Device-spect-ratio Descrive il rapporto tra la larghezza (device-width) e l’altezza (device-height) dell’area di rendering di un dispositivo. Può assumere i prefissi min- e max-. @media screen and (device-aspect-ratio: 16/9) { /* regole CSS */ } Con questa media query creiamo una regola CSS che si applica solo a schermi con un rapporto di 16/9. Color Tecnicamente questa caratteristica indica il numero di bit per ciascuna componente colore sul dispositivo di output. color infatti può assumere come valori dei numeri interi, assumendo che 0 designa un dispositivo che non supporta il colore. Nella pratica, comunque, salvo che non si abbiano esigenze molto specifiche, si può usare nella sua forma più semplice, andando così a indirizzare i CSS ai dispositivi che supportano il colore: @media all and (color) { /* regole CSS */ } Color-index Descrive il numero di colori presenti nella tavolozza supportata da un certo dispositivo. Può assumere i prefissi min- e max-. <link rel=”stylesheet” media=”all and (min-color-index: 256)” href=”colore.css” /> Secondo questa media query, il foglio di stile colore.css sarà applicato su dispositivi che supportano come minimo una tavolozza di 256 colori. Monochrome  Indica il numero di bit per pixel su un dispositivo monocromatico (a scala di grigi). Resolution Descrive la risoluzione (ovvero la densità di pixel) del dispositivo di output. I valori della risoluzione possono essere espressi in dpi (punti per pollice) oppure in dpcm (punti per centimetro). Può assumere i prefissi min- e max-. @media print and (min-resolution: 300dpi) { /* regole CSS */ } Scan Si tratta di una caratteristica valida per gli schermi televisivi, quindi per il tipo di media tv. Indica il tipo di scansione, interlacciata o progressiva. I valori possono essere

  • progressive
  • interlace.

Grid Indica se il dispositivo è di tipo bitmap oppure ‘a griglia’, come certi terminali monocromatici e gli schermi per cellulari con un solo font

Il linguaggio XHTML

L’XHTML (sigla di eXtensible HyperText Markup Language, Linguaggio di marcatura di ipertesti estensibile) è un linguaggio di marcatura che associa alcune proprietà dell’XML (meta linguaggio) con le caratteristiche dell’HTML: un file XHTML è un pagina HTML scritta in conformità con lo standard XML. L’XHTML è nato ufficialmente il 26 gennaio 2000 come standard del World Wide Web Consortium (W3C), e può essere definito tecnicamente una riformulazione dell’HTML 4.01 in XML 1.0; è una sorta di “ponte” tra questi due linguaggi.

Caratteristiche generali

Il linguaggio prevede un uso più restrittivo dei tag HTML sia in termini di validità che in termini di sintassi per descrivere solo la struttura logica della pagina, mentre il layout e la resa grafica sono imposti dai fogli di stile a cascata (Cascading Style Sheets, CSS). L’XHTML è il successore diretto e la versione più aggiornata dell’HTML. La necessità di un linguaggio dotato di una sintassi meglio definita rispetto a quella dell’HTML cominciò ad essere avvertita quando si diffuse l’uso di inviare pagine web ai nuovi dispositivi apparsi sul mercato diversi dai tradizionali computer, come ad esempio piccoli apparecchi portatili, dotati di risorse hardware e software non sufficienti ad interpretare il linguaggio HTML. Va tenuto presente che più generica è la sintassi di un linguaggio di markup, più difficile risulta realizzare dispositivi in grado di interpretarlo correttamente. Una specifica Document Type Definition (DTD) definisce l’insieme di regole mediante le quali un dato documento può essere renderizzato (cioè rappresentato correttamente) dall’XHTML. Tutti i browser attualmente più diffusi sono in grado di renderizzare correttamente i documenti XHTML, ma anche i browser più vecchi sono solitamente in grado di interpretare i documenti XHTML, poiché questo linguaggio è in buona parte un sottoinsieme dell’HTML e le sue regole sintattiche sono compatibili all’indietro. Lo stesso vale anche in senso inverso: quasi tutti i browser compatibili con l’XHTML rendono correttamente anche i documenti HTML. Per sfruttare appieno le potenzialità dell’XHTML è necessario usarlo in abbinamento ai fogli di stile, in modo da scrivere un codice per pagine web in cui la presentazione sia separata dalla struttura dei dati. L’XHTML Transitional (XHTML di transizione) Si distingue dall’HTML principalmente perché è più compatibile con le specifiche dell’XML e dall’XHTML stretto (XHTML strict) per una maggior tolleranza nei confronti di definizioni deprecate. La differenza più importante è che tutti i tag devono essere ben strutturati, cioè obbedire ad una serie di regole che ne assicurino la coerenza reciproca, e devono essere terminati, compresi quelli vuoti (ad esempio img e br). Per eseguire la terminazione in modo implicito si può aggiungere una “/” di chiusura al tag di apertura (es: <img … /> e <br />). Altri tipi di abbreviazione non sono invece permessi (es: <option selected>). La sintassi prevede inoltre che i tag debbano essere sempre scritti in lettere minuscole, convenzione in contrasto con l’abitudine invalsa a partire dalla versione 2.0 di HTML, quando la maggior parte dei programmatori preferiva le maiuscole. Nell’XHTML tutti gli attributi (compresi quelli numerici) devono essere scritti fra virgolette, cosa facoltativa in SGML e HTML, in cui le virgolette possono essere omesse se il contenuto è una stringa alfanumerica o comprende alcuni altri caratteri speciali riservati. Per ulteriori dettagli si rinvia alle specifiche W3C XHTML.

Il linguaggio HTML5

L’HTML5 è un linguaggio di markup per la strutturazione delle pagine web. Storia Lo sviluppo venne avviato dal gruppo di lavoro Web Hypertext Application Technology Working Group (WHATWG) (fondato nel 2004 da sviluppatori appartenenti ad Apple, Mozilla Foundation e Opera Software) che si pose come obiettivo quello di progettare specifiche per lo sviluppo di applicazioni web, focalizzandosi su miglioramenti e aggiunte ad HTML e alle tecnologie correlate. Inizialmente in contrasto con il World Wide Web Consortium per le lungaggini nel processo di evoluzione dello standard html e per la decisione del W3C di orientare la standardizzazione verso l’XHTML 2 che non garantiva retro compatibilità, lo stesso W3C ha poi riconosciuto valide tali motivazioni, annunciando di creare un apposito gruppo per la standardizzazione dell’HTML5 e abbandonare l’XHTML 2.0 Dal 2007 il WHATWG ha collaborato con il W3C in tale processo di standardizzazione, per poi decidere nel 2012 di separarsi dal processo di standardizzazione del W3C creando di fatto due versioni dell’HTML5: la versione del WHATWG viene definita come “HTML Living Standard” e quindi in continua evoluzione, mentre quella del W3C sarà una unica versione corrispondente ad uno “snapshot” del Living Standard. Il World Wide Web Consortium ha annunciato che la prima versione dello standard sarà pronta per fine 2014 e l’html5.1 per il 2016 la prima Candidate Recommendation è stata pubblicata dal W3C il 17 dicembre 2012. Novità Le novità introdotte dall’HTML5 rispetto all’HTML 4 sono finalizzate soprattutto a migliorare il disaccoppiamento tra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori, eccetera), definite dalle direttive di stile, e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre l’HTML5 prevede il supporto per la memorizzazione locale di grosse quantità di dati scaricati dal web browser, per consentire l’utilizzo di applicazioni basate su web (come per esempio le caselle di posta di Google o altri servizi analoghi) anche in assenza di collegamento a Internet. In particolare:

  • vengono rese più stringenti le regole per la strutturazione del testo in capitoli, paragrafi e sezioni;
  • vengono introdotti elementi di controllo per i menu di navigazione; vengono migliorati ed estesi gli elementi di controllo per i moduli elettronici;
  • vengono introdotti elementi specifici per il controllo di contenuti multimediali (tag <video> e <audio>);
  • vengono deprecati o eliminati alcuni elementi che hanno dimostrato scarso o nessun utilizzo effettivo;
  • vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati all’accessibilità, finora previsti solo per alcuni tag;
  • viene supportato Canvas che permette di utilizzare JavaScript per creare animazioni e grafica bitmap;
  • introduzione della geolocalizzazione, dovuta ad una forte espansione di sistemi operativi mobili (quali Android e iOS, tra i più diffusi);
  • sistema alternativo ai normali cookie, chiamato Web Storage, più efficiente, il quale consente un notevole risparmio di banda;
  • standardizzazione di programmi JavaScript, chiamati Web Workers e possibilità di utilizzare alcuni siti offline;
  • sostituzione del lungo e complesso doctype, con un semplice <!DOCTYPE html>.

Il linguaggio Javascript

JavaScript Introduzione Il linguaggio Javascript e’ in grado di modificare il codice HTML di una pagina al verificarsi di un “evento “ che puo’ essere un clik su un bottone o su una immagine o il caricamento di una pagina Gli “eventi” che possono cambiare parti del codice HTML secondo il linguaggio Javascript sono anche altri: per esempio , il caricamento di una pagina o lo spostamento del mouse, o il passaggio del mouse su un determinato punto della pagina ecc. Ad ogniuno di questi “eventi” il linguaggio e’ in grado di modificare la pagina HTML dando al programmatore la possibilità di rendere la pagina “dinamica” cioe’ che risonde in modi differenti a secondo della “azione” che compie il visitatore della pagina. Un esempio comune di utilizzo del codice Javascript e’ la “validazione di un form”. Quando per esempio si compila un campo di un formulario per potersi iscrivere a un sito internet e viene richiesto di inserire il proprio nome , se il nome non viene inserito quando si clicca il bottone “invio” per inviare il formulario , potrà apparire la scritta “compilare tutti i campi contrassegnati con un asterisco”. Questa scritta viene generata dal codice Javascrit quando al clik sul bottone “invio” in fondo al formulario, il programma si accorge che e’ rimasto un campo vuoto obbligatorio. Questa elaborazione non comporta uno scambio di informazioni con il server. Tutto avviene nel nostro computer , poiche’ il linguaggio javascript viene interpretato dal Browser installato sul nostro computer. Si dice quindi che javascript e’ un linguaggio “lato client”. Javascript e’ il linguaggio di programmazione piu’ popolare che esista. E’ un linguaggio che serve ovunque: per integrare il linguaggio Html per le pagine web, per i sever, per i laptop e tablet, per gli smatphones e altro. Di seguito riportiamo alcuni esempi per far capire quello che puo’ fare il linguaggio javascript JavaScript puo’ modificare gli elementi del linguaggio HTML Abbiamo visto studiando la sintassi del linguaggio HTML come il linguaggio stesso sia formato da porzioni di linguaggio chiamati “elementi” che sono quasi sempre costituiti da due marcatori di apertura e di chiusura e di un contenuto. Java script e’ un linguaggio che e’ in grado di modificare in vari modi gli elementi e quindi di modificare piu’ in generale la pagina HTML. Piu’ in particolare Si puo’ usare java script per

  • Cambiare gli elementi Html
  • Cancellare gli elementi Html
  • Creare nuovi elementi Html
  • Copiare e clonare elementi Html

e molto altro…. Le modifiche della pagina avvengono in concomitanza con un evento. Per esempio un clik su un pulsante predisposto. Il seguente esempio cambia il contenuto (innerHtml) di un elemento HTML identificato con l’il tag id=”demo” Esempio document.getElementById(“demo”).innerHTML = “Hello JavaScript”; Il metodo document.getElementById() e’ uno dei tanti metodi del HTML

Il codice a sinistra in questa tabella se eseguito produce la pagina di destra della tabella.Facendo click sul bottone “click me” la frase “questa e’ una prova” (in verde) cambia nella frase “hallo javascript”
Codice della pagina html Risultato visualizzato nel browser prima e dopo aver cliccato sulla scritta blu Click me. Il contenuto dell’elemento <p…</p> (in rosso a sinistra) e’ stato modificato!
 <!DOCTYPE html><html> <body>

<h1>My First JavaScript</h1> <p>JavaScript puo’ cambiare il contenuto di un elemento HTML:</p> <button type=”button” onclick=”myFunction()”>Click Me!</button> <p id=”demo”>questa e’ una prova .</p>

<script>

function myFunction() { document.getElementById(“demo”).innerHTML = “Hello JavaScript!”; }

</script> </body> </html>

 My First JavaScript JavaScript puo’ cambiare il contenuto di un elemento HTML:

Click Me!

Questa e’ una prova
 My First JavaScript JavaScript puo’ cambiare il contenuto di un elemento HTML:

Click Me!

Hallo java script

JavaScript puo’ cambiare gli attributi Html

Questo esempio, modifica il valore dell’attributo originale (src, contrassegnato in verde nella colonna di sinistra) di un Elemento Html <image> Il codice javascript a sinistra della tabella fa’ si’ che quando si fa’ clik sulla lampadina l’immagine denominata “pic_bulboff.gif” (lampadina spenta)

venga sostituita con l’immagine

“pic_bulbon.gif” (lampadina accesa)

<!DOCTYPE html>

<html>

<body>

<script> function changeImage() { var image = document.getElementById(‘myImage’); if (image.src.match(“bulbon”)) { image.src = “pic_bulboff.gif”; } else { image.src = “pic_bulbon.gif”;

<!DOCTYPE html>

<html>

<body>

<script>

function changeImage() { var image = document.getElementById(‘myImage’); if (image.src.match(“bulbon”)) { image.src = “pic_bulboff.gif”; } else { image.src = “pic_bulbon.gif”; } }

</script>

<img id=”myImage” onclick=”changeImage()” src=”pic_bulboff.gif” width=”100″ height=”180″> <p>Click sulla lampadina per accenderla e spegnerla</p>

</body>

</html>

Click sulla lampadina per accenderla e spegnerla

JavaScript puo’ cambiare lo stile di un documento HTML (CSS) Il cambiamento dello stile di un elemento Html e’ una variante del cambiamento di un attributo HTML.

Esempio: document.getElementById(“demo”).style.fontSize = “25px”; Con un clik sul bottone “clik Me la scritta nera a caratteri piccoli diventa una scritta rossa a caratteri grandi

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript</h1> <p id=”demo”>JavaScript can change the style of an HTML element.</p>

<script>

function myFunction() { var x = document.getElementById(“demo”); x.style.fontSize = “25px”; x.style.color = “red”; }

</script>

<button type=”button” onclick=”myFunction()”>Click Me!</button>

</body>

</html>

My First JavaScript

JavaScript can change the style of an HTML element.

Click Me!

My First JavaScript JavaScript can change the style of an HTML element.

Click Me!

PHP e le pagine dinamiche

Parte seconda:I principali linguaggi per poter visualizzare le pagine Modifica Pagine statiche e pagine dinamiche : Il Linguaggio PHP Parlando di PHP e di altri linguaggi di scripting può capitare di sentir citare le espressioni “lato client” e “lato server”: per chi non è esperto della materia, tali definizioni possono suonare un po’ misteriose. Proviamo a chiarire questi concetti: vediamo come funziona, in maniera estremamente semplificata, la richiesta di una pagina Web. 1) L’utente apre il suo browser e digita un indirizzo Internet, ad esempio http://www.nostrosito.it/pagina1.html: a questo punto il browser si collega al server http://www.nostrosito.it e gli chiede la pagina pagina1.html. Tale pagina contiene esclusivamente codice HTML: il server la prende e la spedisce al browser, così com’è (insieme ad eventuali file allegati, ad esempio immagini). Il nostro utente quindi avrà la possibilità di visualizzare questa pagina. 2) Supponiamo ora che l’utente richieda invece la pagina pagina2.php: questa, contrariamente a quella di prima, non contiene solo codice HTML, ma anche PHP. Il codice PHP non puo’ essere interpretato dal browser.In questo caso il server, prima di spedire la pagina al browser , esegue il codice PHP, che in genere produce altro codice HTML: ad esempio, PHP potrebbe controllare che ore sono e generare un messaggio di questo tipo: “Buon pomeriggio, sono le 17.10!” Dopo l’esecuzione, la pagina non conterrà più codice PHP, ma solo codice HTML. A questo punto è pronta per essere spedita al browser. (Ovviamente, il file che non contiene più codice PHP non è quello “originale”, ma la “copia” che viene spedita al browser. L’originale rimane disponibile per le prossime richieste.) Quindi l’utente vede solo il codice HTML, e non ha accesso al codice PHP che ha generato la pagina. 3)Per comprendere ancora meglio questo concetto, confrontiamo PHP con un altro linguaggio di scripting molto diffuso sul Web, cioè JavaScript, che di solito viene usato come linguaggio “lato client”: JavaScript infatti viene eseguito non dal server, ma dal browser dell’utente (il client, appunto). JavaScript ci consente di eseguire operazioni che riguardano il sistema dell’utente, come ad esempio aprire una nuova finestra del browser, o controllare la compilazione di un modulo segnalando eventuali errori prima che i dati vengano spediti al server. Ci permette anche di avere un’interazione con l’utente: ad esempio, possiamo far sì che quando il mouse passa su una determinata immagine, tale immagine si modifichi. Per svolgere tutti questi compiti, JavaScript deve essere eseguito sul sistema (computer) dell’utente: per questo il codice JavaScript viene spedito al browser insieme al codice HTML.Quindi l’utente ha la possibilità di visualizzarlo, contrariamente a ciò che accade con PHP. Abbiamo citato alcune utili funzioni svolte da JavaScript sul browser dell’utente: PHP, essendo eseguito sul server, non è in grado di svolgere direttamente queste funzioni. Ma attenzione: questo non significa che non sia in grado ugualmente di controllarle! Infatti PHP svolge principalmente la funzione di ‘creare’ il codice della pagina che viene spedita all’utente o meglio al browser dell’utente: di conseguenza, così come può creare codice HTML, allo stesso modo può creare codice JavaScript. Questo significa che PHP ci può permettere, ad esempio, di decidere se ad un utente dobbiamo spedire il codice JavaScript che apre una nuova finestra, oppure no. In pratica, quindi, lavorando sul lato server abbiamo il controllo anche del lato client. Rimane un ultimo dettaglio da svelare: come fa il server a sapere quando una pagina contiene codice PHP che deve essere eseguito prima dell’invio al browser? Semplice: si basa sull’estensione delle pagine richieste: .php o .js.o .html.

PHP secondo il W3C

Riportiamo ora letteralmente la traduzione della introduzione al linguaggio PHP riportata dal consorzio W3C : Link:http://www.w3schools.com/php/  Il PHP e’ un linguaggio che viene normalmente utilizzato da un server e che seve principalmente per rendere dinamiche le pagine web.Il vantaggio del linguaggio PHP rispetto al linguaggio ASP di Microsoft che e’ anche esso un linguaggio usato sui servers e’ che PHP e’ un linguaggio utilizzabile gratuitamente da chiunque.

Cosa e’ il linguaggio PHP

  • PHP sta’ per PHP Hypertext Preprocessor
  • PHP e’ un linguaggio “open-source tra’ i piu’ popolari nel web.
  • PHP e’ un linguaagio “lato server” cioe’ installato e eseguito sul server
  • PHP non costa nulla , e’ scaricabile e utilizzabile senza alcun costo
  • PHP e’ abbastanza potente da essere il linguaggio di base del piu’ famoso sistema di blog (wordPress)
  • PHP e’ talmente potente da essere usato dal piu’ importante social network che esista : (Facebook)
  • PHP e’ talmente facile da usare che e’ normalmente il primo linguaggio imparato dei principianti per poter lavorare sui server.

Cosa e’ un file PHP

Un file PHP puo’ contenere, testo,HTML,CSS, Javascript,e codice PHP. Il codice PHP viene eseguito sul server e il risultato della elaborazione viene inviato al Browser sotto forma di linguaggio HTML. Infatti i Browser non sono in grado di elaborare il linguaggio PHP .Un file PHP ha sempre estensione.php

Cosa puo’ fare il linguaggio PHP

Il linguaggio PHP puo’:

  • Generare delle pagine dal contenuto dinamico
  • Creare, aprire,leggere,scrivere,cancellare,e chiudere files sul server
  • Raccogliere dati dai questionari inviati al server dai visitatori del sito
  • Inviare e ricevere cookies
  • Inserire , cancellare , modificare dati in un database collegato
  • Impedire ai visitatori l’accesso a determinate pagine del sito
  • Criptare i dati trasmessi o ricevuti

Con il linguaggio PHP non ci si limita a creare del linguaggio HTML . Si possono editare delle immagini, dei files PDF, e anche dei files per animazioni in linguaggio Flash . Si puo’ anche editare ogni testo come , HTML o XML.

Perche’ utilizzare il linguaggio PHP?

  • 1. Php gira su molte piattaforme (Windows,Linux,Mac OS x, ecc)
  • 2. Php e’ compatibile con quasi tutti i servers oggi esistenti
  • 3. Php e’ utilizzabile con quasi tutti i database
  • 4. Php e’ gratis.
  • 5. Php e’ facile da imparare e funziona molto bene sul server su cui e’ installato

Sintassi di base del linguaggio PHP

Il codice php puo’ essere inserito ovunque si desideri nel documento. Il codice php inizia con il simbolo <?php e finisce con il simbolo ?>

<?php // il codice php viene inserito qui’ ?>

La estensione di default per i files php e’ .php .Un file php normalmente contiene tags HTML e righe di codice php .Sotto riportiamo un esempio di un semplice file php con un codice php che usa una “echo” funzione built-in php per visualizzare il testo “hello World” in una pagina web Esempio:

<!DOCTYPE html> <html>

<body>

<h1>My first PHP page</h1> <?php echo “Hello World!”; ?>

</body>

</html>

PHP MySQL

Con il linguaggio PHP ci si puo’ connettere a qualsiasi database e si possono estrarre immettere e modificare dati nel database.. Mysql e’ il piu’ popolare e usato database usato insieme al linguaggio PHP Cosa e’ MySQL? Mysql e’ un software basato su un database usato nel web . Mysql e’ un software basato su un database che e’ installato e funziona normalmente su un server Mysql e’ ideale sia per piccole che per grandi applicazioni .

  • Mysql e’ molto veloce, affidabile e facile da usare .
  • Mysql supporta lo standard “sql” Mysql funziona con diversi sistemi operativi .
  • Mysql e’ gratuito e facile da usare
  • Mysql e’ sviluppato,distribuito e supportato dalla azienda Oracle
  • Mysql deriva il suo nome dal proprio inventore :My

I dati in un database Mysql sono immagazzinati in tabelle. Una tabella e’ un insieme di dati correlati tra’ di loro inseriti in righe e colonne. I database sono utili quando immagazzinano le informazioni divise per categorie . Ad esempio, una azienda potrebbe avere un database formato dalle seguenti tabelle contenenti i dati: Dipendenti Prodotti Clienti Ordini PHP + MySQL Il linguaggio php abbinato a un database Mysql puo’ essere utilizzato con diversi sitemi operativi (windows, Unix ecc) Queries La query e’ una domanda o una richiesta di dati fatta a una base di dati o “database” Possiamo interrogare un database per avere informazioni specifiche e avere come risposta una stringa di dati o “recordset” . Portiamo come esempio la seguente “query” che usa lo standard Sql :

SELECT LastName FROM Employees

La query sopra esposta fornisce come dati il nome di tutti gli impiegati presenti nella colonna “last name” della tabella “impiegati”. Sql (Structured Query Language) e’ il linguaggio che interagisce con i database (immissione e estrazione di dati, manipolazione di dati )

Lascia un Commento