Fondamenti d’Informatica
Proff. M. Angelaccio, B. Buttarazzi
A.A. 2015/2016
Laurea di Ingegneria (Gestionale)
Ambiente di lavoro Web
29/02/16
Ambiente di lavoro per il Web
Ambiente di lavoro HTML+Javascript
Browser (Chrome o Firefox)
navigare su web e rendering pagine HTML con
scripts Javascripts di programma (esercizi)
Editor di testo (Brackets)
editor pagine HTML con scripts
Altri Ambienti (+ complessi) Ambiente IDE
Es. Eclipse
29/02/16
Browser cos’è
• Programma che esegue il rendering di
pagine HTML
• Composto da
•
•
Engine di rendering
Interfaccia utente che contiene
•
•
•
29/02/16
Finestra del documento visualizzato
Address bar (per la URL)
Altro (Status bar e menu di gestione)
Editor di testo
• Suggerimento
• BRACKETS
•
http://brackets.io
•
Va usato per I file html e javascripts
29/02/16
Organizzazione files
• WEB APP-DIRECTORY
•
file index.html
•
•
uno o +.js
•
•
Contiene il codice HTML di base
Contengono funzioni e librerie in javascript che vengono
chiamate da index.html
Uno o + file .css
•
•
29/02/16
Contengono eventualmente personalizzazione delle
informazioni di stile (e.g. il colore dello sfondo)
Esempio files
•
Vetrina-gruppo (solo 1 file)
•
index.html
•
•
Vetrina-gruppo (con logo)
•
index.html
•
•
Contiene codice della vetrina
logo.jpeg
•
•
•
Contiene codice della vetrina
Contiene il file immagine (vedi tag <img>) riferito da index.html
<img src = “logo.jpeg”> </src>
Vetrina-gruppo (con script di welcome)
•
index.html
•
•
Contiene codice della vetrina
welcome.js
•
Contiene il script che visualizza finestra con messaggio di benvenuto
Esempio con lista
•
Vetrina-gruppo (solo 1 file)
•
index.html
•
•
Vetrina-gruppo (con logo)
•
index.html
•
•
Contiene codice della vetrina
logo.jpeg
•
•
Contiene codice della vetrina
Contiene il file immagine (vedi tag <img>) riferito da index.html
Vetrina-gruppo (con script di welcome)
•
index.html
•
•
Contiene codice della vetrina
welcome.js
•
Contiene lo script che visualizza finestra con messaggio di benvenuto
Esempio Vetrina 1 file
Esempio Vetrina 1 script
Esempio IMG MAP
• Immagine con aree click
• File esterno per immagine
• Mappa villa Mondragone
• File esterno per mappa aree
• File con coordinate punti aree (usato da
tag IMG MAP)
• http://www.turismopoli.it/
villamondragonemap/
Esempio video
•
•
Tag <video>
Uso immediato
•
•
Gestione proprietà video
•
•
Via tag
Gestione didascalie (text tracks)
•
•
Inserimento con link a file esterno
Via file esterno
http://www.turismopoli.it/VideoTurismoTrekking/
Esempio codice Video
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="Terra_e_aria_in_Molise.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
</div>
….............
</body>
</html>
29/02/16
Esempio codice Video-script
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
29/02/16
Esempio codice Video-script
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
29/02/16
Demo
Riferimenti
• w3schools.com
• Tutorial HTML
• Tutorial Jscript (primi 3-4 capp.)
• Tutorial Bootstrap (dopo Pasqua)
• MDN: developer.mozilla.org
•
https://developer.mozilla.org/en-US/docs/Web
• Sito del Corso (by Tutor)
•
http://foi1516.sytes.net/
