Tomasco Ermenegildo

 HTML5 (HyperText Markup Language)  CSS (Cascading Style Sheets)  Javascript  XML (eXtensible Markup Language)  AJAX (Asinchronous Javascript And XML)  Architettura delle applicazioni web e Web Services  Workflow progettazione sito web  Comunicazione multimediale digitale

 HTML5 (HyperText Markup Language)

 Hyper Text Markup Language

Contenuto (HTML) Presentazione (CSS) Comportamento (JS)

Tecnologia per la comunicazione La mia prima pagina Il mio primo pragrafo. esempio  contenuto

Il corso di "Tecnologia per la comunicazione" si propone di fornire allo studente Google esempio

Il tuo browser non supporta il tag video Il tuo browser non supporta il tag audio esempio

Grassetto. Corsivo. Sottolineato. Marcato. Accentuato. Piccolo. Errore. Importante. Normale pedice. Normale apice.  Attribuire uno speciale significato al testo esempio

 Inline – attributi di stile nei tag in HTML  Interni – viene inserita una sezione elementi di stile nella sezione HTML  Esterni – vengono usati uno o più fogli di stile.CSS esterni

<h1 style="color:blue;font-family:verdana;font-size: 24pt; text-align:center">La mia prima pagina <p style="color:red;font-family:courier;font-size: 16pt; text-align:right">Il mio primo pragrafo.  Inline – attributi di stile nei tag in HTML style="prorietà:valore" esempio

 Interni body {background-color:lightgray} h1 {color:blue} p {color:green} La mia pagina web Testo colorato Paragrafo 2 esempio

 Esterni La mia pagina web Il primo paragrafo della pagina

La mia prima pagina Il mio primo paragrafo. Pagina non trovata Io sono blu Immagine piccola La fiat 500 h1 { color:blue; font-family:verdana; font-size:24px; } p { font-family:courier; font-size:16px; border:1px solid black; padding:10px; margin:30px; } p#p01 { color:blue; } p.error { color:red; } p.noborder { border:0px; } styles1.css esempio.htm

 Aprite il file esercizio1.html con il browser  Aprite il file esercizio1.html con Notepad  Aprite il file styles1.css con Notepad

 Quale testo verrebbe visualizzato se l'immagine non venisse trovata? foto di prova fiat 500 Image not found  Quale testo viene visualizzato al passaggio del mouse sull'immagine foto di prova fiat 500 Nessun testo

 Modificare il font-family con uno o più dei seguenti: Comic Sans MS, Garamond, Georgia, Lucida Console, Lucida Sans Unicode, MS Sans Serif, Symbol, Tahoma, Times New Roman  Quale delle seguenti modifiche fa sì che la prima parola del primo paragrafo venga visualizzata in grassetto e l'ultima parola in corsivo Il mio primo paragrafo. Il mio primo paragrafo. Il mio primo paragrafo.

 Modificare il font-size e vedere cosa succede  Togliere l'attributo "float:left;" dall'immagine e vedere cosa succede  Cosa succede se togliete l'attributo "padding" dal paragrafo?  Cosa succede se togliete l'attributo "margin" dal paragrafo

 Definiscono blocchi interpretati da un browser a prescindere dall’aspetto grafico

 Demarca un insieme di contenuti fra di loro correlati. Benvenuti al mare Ciao mi piace andare al mare

 Demarca una informazione indipendente dal resto del documento. Benvenuti al mare Ciao mi piace andare al mare

 demarca un contenuto di poca importanza rispetto al documento visita il nostro blog

 demarca l'intestazione di una sezione Benvenuti a tutti Sezione dedicata ai saluti Benvenuti al mare Ciao mi piace andare al mare

 demarca il pie di pagina o di sezione. Ralizzato da Ermenegildo Tomasco

 demarca una serie di link utili per la navigazione. Google Yahoo Bing

 Aprite il file esercizio2.html con il browser  Aprite il file esercizio2.html con Notepad  Modificare nel file esercizio2.html la linea con salvate e ricaricate la pagina nel browser: cosa succede?  Ripristinate la linea, salvate e ricaricate la pagina

 Modificate il footer in modo tale da scrivere in grassetto il vostro nome  Copyright © Vostro nome  Aggiungere la proprietà autoplay al video.  Provare a togliere (muted, controls, loop) e reinserire le proprietà del video  Modificate le dimensioni dell'immagine  Inserite un link con href=" sulla foto

 Aprite il file styles2.css con Notepad  Settare a blue il colore di sfondo dell'header e del footer  Allineare il footer a sinistra  Far visualizzare in rosso il testo: "Tecnologia per la comunicazione - Test"

 I form HTML sono usati per raccogliere dati dall’utente. Elementi del form.

 Text Input Nome: esempio

 Nome utente: Password:

 Textarea Input Note:

 Nazione:

 + =  Clicca!

 Radio Input Sesso: Uomo Donna

 Alto Biondo

 Quantità (tra 1 e 5):

 Compleanno:

 Il tuo colore preferito: Il tuo colore preferito:



 Maxlength Nome:  Size Nome:  readonly Nome:  Autofocus Campo principale: esempio

 Min e Max Quantità (tra 1 e 5):  Placeholder Nome:  Required Username:

 Aprite il file form.html con il browser  Aprite il file form.html con Notepad  Spostare il focus iniziale sul campo password  Rendere obbligatorio il campo nome  Settare la massima lunghezza della password a 8 caratteri

 Inserire una nuova opzione (Germania) nel campo Nazione  Fare in modo tale che l’opzione «alto» sia preselezionata al caricamento della pagina  Far si che il campo «anni» accetti valori tra 10 e 99  Inserire sul campo il suggerimento: ◦ "Scrivi la tua "

 Javascript

 HTML per definire il contenuto delle pagine web  CSS per specificare il layout delle pagine web  JavaScript per definire il comportamento delle pagine web

 JavaScript è il linguaggio di programmazione per HTML ◦ Accedere agli elementi HTML ◦ Cambiare il valore di un attributo HTML ◦ Cambiare gli stili ◦ Rimuovere/Aggiungere elementi e attributi HTML ◦ Gestire eventi in una pagina HTML

 DOM standard per l’accesso ai documenti  Definisce: ◦ Gli elementi HTML come oggetti ◦ Le proprietà degli elementi HTML ◦ I metodi per accedere agli elementi HTML ◦ Gli eventi per tutti gli elementi HTML

 JavaScript può essere utile per: ◦ Leggere/Modificare una proprietà di un elemento HTML es. modificare l’HTML di un paragrafo ◦ Validazione di un input form es lunghezza di una stringa maggiore di 6 caratteri ◦ Visualizzare del contenuto dinamico in una pagina es. Visualizzare il risultato di una operazione ◦ Gestione di eventi onChange, onClick, onLoad,...onChangeonClickonLoad

◦ JS Window JS Window ◦ JS Screen JS Screen ◦ JS Location JS Location ◦ JS History JS History ◦ JS Navigator JS Navigator ◦ JS Popup Alert JS Popup Alert ◦ JS Timing ◦ JS Cookies

 Si può accedere agli elementi di una pagina: tramite il suo id tramite il tag name tramite la classe  Si può accedere agli elementi di un oggetto es. un form

 Aprite la cartella js  Aprite il file LeggiEmodifica.html con il browser e con NotePad  Visualizzare il saluto in un popup (alert(...))  Aprite il file valida.html con il browser e con NotePad  Modifica la funzione js in modo tale che visualizzi un messaggio di errore se l’input è superiore a 10 caratteri

 Aprite il file somma.html con il browser e con NotePad  Modifica la funzione js in modo tale che calcoli la moltiplicazione di due numeri, al posto della somma  Aprite il file CambiaFoto.html con il browser e con NotePad  Modifica la funzione FotoPiccola in modo tale che setti la larghezza dell’immagine a 350px, dopo aver caricato l’immagine

 XML (eXtensible Markup Language)

 XML è stato progettato per descrivere dati  HTML è stato progettato per visualizzare dati Gildo Tomasco 16/12/1976  I tag XML sono costruiti  I tag XML sono predefeniti

 Separazione tra dati e visualizzazione  Condivisione dei dati  Comunicazione tra sistemi eterogenei  Indipendente dalla piattaforma (aggiornamenti o migrazioni)  Dati più accessibili (news feeds, disabili, …)

 Gli elementi in un documento XML formano un albero.  La prima linea definisce la versione dell’XML.  I documenti XML devono contentere un root element

Gildo Tomasco 16/12/1976 Mario Rossi 10/09/1980

 Tutti gli elementi devono avere un tag di apertura ed uno di chiusura  I tag XML sono Case Sensitive diverso da  Gli elementi XML devono essere opportunamente innestati..... errore  Gli attributi degli elementi devono essere tra ""

 Gli attributi degli elementi devono essere tra “”  Commenti in XML  Gli spazi bianchi in XML sono preservati  Un XML è Well Formed se rispetta le regole sintattiche

 Un elemento può contenere ◦ altri elementi ◦ testo ◦ attibuti ◦ o un mix dei precedenti elementi  Gli attributi possono contenere informazioni addizionali che non sono parte dei dati computer.gif

 Definisce uno standard per l’accesso e la manipolazione dei documnti XML.  Tutto in un documento XML è un nodo:. ◦ L’intero documento è il document node ◦ Ogni elemento XML è un element node ◦ I testo degli elementi XML sono text nodes ◦ Ogni attributo è un attribute node ◦ I commenti sono comment nodes

 Parents, Children, and Siblings ◦ In un documento XML, il nodo superiore è chiamato root ◦ Ciascun nodo, eccetto la radice, ha un esattamente padre ◦ Un nodo può avere un qualsiasi numero di figli ◦ Una foglia è un nodo che non ha figli ◦ Siblings sono nodi con lo stesso padre

 XMLHttpRequest  L’oggetto XMLHttpRequest viene usato per lo scambio di dati tra il browser ed il server, senza la necessità di dover ricaricare la pagina.  Parsare un Documento XML ◦ xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET",“Dipendenti.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML;

 x.nodeName - the name of x  x.nodeValue - the value of x  x.parentNode - the parent node of x  x.childNodes - the child nodes of x  x.attributes - the attributes nodes of x  x.getElementsByTagName(name) - get all elements with a specified tag name  x.appendChild(node) - insert a child node to x  x.removeChild(node) - remove a child node from x

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","dipendenti.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; Continua

x=xmlDoc.getElementsByTagName("Dipendente"); i=0; function mostraDip() { nome=(x[i].getElementsByTagName("Nome")[0].childNodes[0].nodeValu e); cognome=(x[i].getElementsByTagName("Cognome")[0].childNodes[0].n odeValue); dataAssunzione=(x[i].getElementsByTagName("DataNascita")[0].childNo des[0].nodeValue); txt="Nome: " + nome + " Cognome: " + cognome + " Data assunzione: "+ dataAssunzione; document.getElementById("dipendente").innerHTML=txt; } Continua

function next() { if (i<x.length-1){ i++; mostraDip(); } function prec() { if (i>0){ i--; mostraDip(); } Continua

>" />

 Appendice

Tecnologie per la comunicazione Continua esempio

Napoli Campania Napoli Salerno Avellino Continua

Geografia fisica Napoli sorge quasi al centro dell'omonimo golfo, dominato dal massiccio vulcanico Vesuvio e delimitato ad est dalla penisola sorrentina con Punta Campanella, ad ovest dai Campi Flegrei con Monte di Procida, a nord ovest-est dal versante meridionale della piana campana che si estende dal lago Patria al nolano. La città storica è andata sviluppandosi prevalentemente sulla costa. Il territorio di Napoli è composto prevalentemente da colline (molti di questi rilievi superano i 150 metri d'altezza per giungere fino ai 452 m della collina dei Camaldoli), ma anche da isole, insenature e penisole a strapiombo sul Mar Tirreno. Continua

Clima Napoli gode di un clima mediterraneo, con inverni miti e piovosi e estati calde e secche, ma comunque rinfrescate dalla brezza marina che raramente manca sul suo golfo. Il sole splende mediamente per 250 giorni l'anno.[41] La particolare conformazione morfologica del territorio del capoluogo, comunque, è tale da fare in modo che la città possieda al suo interno differenti microclimi, con la possibilità quindi di incontrare variazioni climatiche anche significative spostandosi di pochi chilometri. Ad esempio, più continentale rispetto al centro della città risulta essere la zona di Capodichino, al pari della maggior parte dei quartieri della zona nord del capoluogo, come Poggioreale o Secondigliano. Anche la zona dei Camaldoli, a causa della maggiore altitudine, si caratterizza per un clima leggermente più freddo nei mesi invernali, ed un clima meno afoso in quelli estivi. Non sono mancati però anche episodi di gelo (gli ultimi nel marzo 2005 e nel febbraio 2012). Continua

Copyright ©....

header { background-color:green; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:lightgray; height:520px; width:10%; float:left; padding:5px; } Continua

section { width:85%; float:left; padding:10px; } footer { background-color:green; color:white; clear:both; text-align:center; padding:5px; } Continua

p { text-indent: 50px; font-family: "Times New Roman"; font-size: 20px; text-align: justify; } p.secondo { text-indent: 50px; font-family: "Times New Roman"; font-size: 20px; color: red; } Continua

a:link {color:blue; background-color:transparent; text-decoration:none} a:visited {color:blue; background-color:transparent; text-decoration:none} a:hover {color:red; background-color:transparent; text-decoration:underline} a:active {color:yellow; background-color:transparent; text-decoration:underline} ul { list-style-type: none; } ul li { background-image: url(images/quadrato.gif); background-repeat: no-repeat; background-position: 0px center; padding-left: 15px; } Continua

ul.main { padding-left: 0px; } ul.sub { padding-left: 10px; } ol { padding-left: 150px; } img { float:left; }

 Colore del testo Titolo Paragrafo  Inline – attributi di stile nei tag in HTML style="prorietà:valore"  Font HTML Titolo Paragrafo  Taglia del testo HTML Titolo Paragrafo  Allineamento del testo HTML titolo centrato paragrafo allineato a destra esempio

 Link ad una pagina locale Prima Pagina  Link ad una pagina esterna Google  Definire uno stile per i link a:link {color:green; background-color:transparent; text-decoration:none} a:visited {color:green; background-color:transparent; text-decoration:none} a:hover {color:red; background-color:transparent; text-decoration:underline} a:active {color:yellow; background-color:transparent; text-decoration:underline}  I link sono definiti con il tag … esempio

 Link interni al documento Sezione dei consigli utili..... Consulta i nostri consigli Consulta i nostri consigli  I link sono definiti con il tag …

 Immagine con attributi  Link su una immagine  Imaging floating La fiat 500  Le immagini vengono inserite con il tag

 Image Maps  Le immagini vengono inserite con il tag esempio

Liste non ordinate o Primo oggetto o Secondo oggetto o Terzo oggetto o Quarto oggetto Liste ordinate 1. Primo oggetto 2. Secondo oggetto 3. Terzo oggetto 4. Quarto oggetto

Liste non ordinate primo secondo terzo Liste non ordinate o Primo oggetto o Secondo oggetto o Terzo oggetto o Quarto oggetto list-style-type:square list-style-type:circle list-style-type:none list-style-type:disc Possibili valori attributo type Liste ordinate 1. Primo oggetto 2. Secondo oggetto 3. Terzo oggetto 4. Quarto oggetto

Liste ordinate primo secondo terzo 1: con numeri A: con lettere upper case a: con lettere lower case I: upper case romano i: lower case romano Possibili valori attributo type esempio

Div: elemento di tipo blocco Napoli Napoli sorge quasi al centro dell'omonimo golfo, dominato dal massiccio vulcanico Vesuvio e delimitato ad est. Span: elemento di tipo inline La città più bella del mondo esempio

Il tuo browser non supporta il tag audio Novità di HTML5

Il tuo browser non supporta il tag video Novità di HTML5 esempio

 contenitore per due o più elementi di intestazione Benvenuti a tutti Benvenuti al mare Benvenuti in montagna Benvenuti in Italia Benvenuti in Campania Benvenuti al corso