WEB INTERATTIVO E DINAMICO 4 Come abbiamo visto, il consente di fornire una delle pagine web. linguaggio HTML struttura ai contenuti Il browser legge e interpreta il markup in ordine, riga per riga, e visualizza i contenuti sul display uno per uno. Se il browser non è in grado di interpretare qualche informazione, la salta e passa a quella successiva. Il si occupa, invece, della definendo la formattazione degli elementi e le modalità della loro visualizzazione a livello grafico. linguaggio CSS presentazione dei contenuti Entrambi i linguaggi linguaggi di programmazione. non sono I , infatti, permettono di , cioè di creare logiche di funzionamento che vengono eseguite in base al verificarsi di particolari condizioni o eventi, oltre a consentire l’utilizzo di contenitori di informazioni che prendono il nome di variabili o strutture dati. linguaggi di programmazione realizzare i programmi In generale, esistono due : famiglie di linguaggi di programmazione : come il linguaggio C, le cui righe di codice vengono lette da un software chiamato che converte il codice sorgente in un codice eseguibile (che, successivamente, può essere eseguito in blocco). In caso di errori nel codice sorgente la conversione in codice eseguibile non può essere effettuata; linguaggi compilati compilatore : come il linguaggio JavaScript, le cui righe di codice vengono lette, interpretate ed eseguite direttamente, istruzione per istruzione, da un software chiamato interprete. In caso di errori nel codice sorgente, l’interprete salta l’istruzione ed esegue la successiva oppure restituisce un messaggio di errore. linguaggi interpretati Approfondimento – La struttura di un sito web / cascading a cascata Lo sapevi che Il testo del programma, scritto da una persona utilizzando il linguaggio di programmazione si chiama codice sorgente . Il programma generato dal compilatore ed eseguito dalla macchina si chiama . codice eseguibile Il linguaggio JavaScript Le logiche di funzionamento delle pagine web possono essere create utilizzando il JavaScript che è un linguaggio: : cioè interpretato da un software (chiamato client web); di scripting : perché il software che lo interpreta (client web) è il browser, che viene eseguito su macchine di tipo client, come per esempio il PC di casa. lato client Quando viene usato nel mondo del web, il JavaScript viene sfruttato per (funzioni) che possono essere richiamati al verificarsi di determinati , innescati dall’utente (per esempio quando interagisce con la pagina con il mouse o con la tastiera) o dal browser (per esempio quando questo completa il caricamento della pagina). creare blocchi di codice eventi Come i fogli di stile del linguaggio CSS, anche il codice JavaScript può essere (con estensione .js), collegato al documento HTML per mezzo di un opportuno tag <script>. inserito in un file esterno In alternativa il codice JavaScript può essere direttamente in , sempre utilizzando il tag <script>. incorporato una pagina HTML attenzione Anche se i nomi si assomigliano, il e il sono due linguaggi diversi. JavaScript Java esempio Facciamo comparire un messaggio pop-up in una pagina del browser. Con Notepad++ creiamo un file index.html con il seguente codice. Creiamo un file esterno codice.js contenente il codice: alert("Apertura pop-up"); Aprendo la pagina index.html nel browser, automaticamente viene visualizzato il pop-up. Possiamo ottenere lo stesso risultato eliminando dal tag <script> di apertura il riferimento al file esterno e inserendo direttamente fra i tag <script> il codice JavaScript. Solitamente il viene , ma può essere inserito in qualunque altro punto del body o nella head. codice JavaScript scritto in fondo al body I , come l’HTML, il CSS e il JavaScript sono composti da . siti sviluppati utilizzando linguaggi lato client pagine web statiche Una volta terminato, il sito web statico viene caricato in rete, sull’hard disk del server, e diventa disponibile per la consultazione da parte degli utenti del web. Un software chiamato server web fornisce le risorse (file HTML, file CSS, file JS, immagini ecc.) “così come sono” ai client web (browser) che ne fanno richiesta. attenzione Quando si digita sulla barra di un browser l’indirizzo di un sito web, la richiesta viene gestita dal server web che invia al client web una copia delle pagine del sito richiesto. >> pagina 378 I siti web dinamici e il linguaggio PHP I siti web dinamici sono composti da pagine web dinamiche elaborate da software installati sul server (per esempio software interpreti). Le risorse richieste dai client web vengono generate in tempo reale sul server e restituite al richiedente. Le logiche di funzionamento dinamico delle pagine web possono essere create utilizzando il linguaggio , che è un linguaggio: PHP : cioè interpretato da un software (chiamato interprete PHP); di scripting : perché il software che lo interpreta (l’interprete PHP) viene eseguito su macchine di tipo server. lato server Il viene (tra il tag di apertura e il tag di chiusura ) ma l’estensione viene modificata in .php, per indicare al server che il codice deve essere elaborato dall’interprete PHP. codice PHP inserito nei documenti HTML ?> La prima pagina di un sito dinamico si chiamerà quindi index.php. attenzione L’ utente lato client può visualizzare il codice HTML, CSS e JavaScript, ma non ha accesso al codice PHP . esempio Per generare dinamicamente una pagina che contiene il paragrafo “Ciao mondo” nel file index.php inseriamo l’istruzione echo che fornisce al server web il testo inserito tra virgolette. Quando il client web richiede la pagina index.php, il server web, a sua volta, richiede all’interprete PHP di interpretare il codice PHP in essa contenuto. L’interprete PHP elabora solo il codice PHP e restituisce al server web il codice: <!DOCTYPE html> <html> <body> <p>Questa è una pagina dinamica!</p> </body> </html> all’interno del quale tutte le istruzioni PHP sono state elaborate e rimosse, eventualmente sostituite con codice HTML. Il server web restituisce quindi al client web un codice HTML (che potrebbe contenere eventualmente anche codice JavaScript, ma sempre privo di codice PHP) generato dinamicamente a seguito di un’elaborazione lato server. La pagina visualizzata dal browser è la seguente. Per poter eseguire siti web dinamici sul PC è necessario installare un software server web . Per esempio, l’ambiente di sviluppo XAMPP (scaricabile gratuitamente dal sito https://www.apachefriends.org/it/index.html), contiene il server web Apache e un interprete PHP. Il sito web creato deve essere salvato in un’apposita cartella del programma XAMPP (come se fosse stato caricato su un server), in questo modo il server web Apache è in grado di rispondere alle richieste del browser, in locale. Per memorizzare informazioni lato server (per esempio le informazioni sugli account degli utenti), i server web possono utilizzare un database lato server. attenzione Nel gergo comune si fanno coincidere il concetto di server con quello di server web e il concetto di client con quello di client web (browser). In realtà i e i sono , mentre i e i sono . impropriamente server client hardware server web client web software >> pagina 379 Lo sapevi che Apache è un server web sviluppato dalla Apache Software Foundation, open source e completamente gratuito, molto diffuso, che opera su un’ampia varietà di sistemi operativi, fra cui Windows, Unix e Linux. Per ricevere richieste e restituire risposte sfrutta i protocolli http e https. prova tu Vero o falso? Le caratteristiche degli elementi responsivi si adattano alle dimensioni dei display. Il JavaScript è un linguaggio di programmazione che genera pagine web dinamiche. Il codice PHP può essere eseguito solo dai server web. ApprofondiMENTO I CMS I ( , in italiano sistemi per la gestione dei contenuti) sono software applicativi che consentono agli utenti, anche senza possedere particolari conoscenze tecniche, di senza necessità di scrivere codice nei linguaggi del web. CMS Content Management System costruire e aggiornare siti web dinamici Tra i CMS più diffusi ci sono WordPress, Shopify, Joomla! e Drupal. Video – Comparazione tra HTML e CMS Approfondimento – I CMS e WordPress SCHEDA CLIL eXtensible Markup Language Speaking about markup languages, we can’t not mention XML. The acronym stands for eXtensible Markup Language. It’s a sort of metalanguage, that can be used to define text formats which can be interpreted by humans as well as machines. You can see at XML as a generalization of HTML. HTML defines hypertexts. XML is a superset, is more general and can be used in many more applications. XML is often employed to write down rules a specific language must comply to. You can define elements of the language, their syntax, and - if needed - their basic semantics (the meaning of such elements). It looks much more complicated than it is. But, as a system administrator in computer science, you may find XML files commonly used as configuration files. Under Windows, several services (i.e. Radius) let export their configuration to XML files. So that human beings can possibly read or edit them. And then such set of settings can be imported into another server. If my firewall crashed, but I exported its complex configuration before its fault, I can quickly install a new firewall and import previous working configuration. XML can let me save a lot of time. And my company can go back to work early. This means save money, too! So, please don’t hate XML. Your wallet would not agree.