Tomasco Ermenegildo.  HTML5 (HyperText Markup Language)  CSS (Cascading Style Sheets)  Javascript  XML (eXtensible Markup Language)  AJAX (Asinchronous.

Presentazione sul tema: "Tomasco Ermenegildo.  HTML5 (HyperText Markup Language)  CSS (Cascading Style Sheets)  Javascript  XML (eXtensible Markup Language)  AJAX (Asinchronous."— Transcript della presentazione:

1 Tomasco Ermenegildo

2  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

3  HTML5 (HyperText Markup Language)

4  Hyper Text Markup Language

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

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

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

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

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

10  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

11 <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

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

13  Esterni La mia pagina web Il primo paragrafo della pagina

14 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

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

16  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

17  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.

18  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

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

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

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

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

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

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

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

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

27  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="http://www.google.it" sulla foto

28  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"

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

30  Text Input Nome: esempio

31  Nome utente: Password:

32  Textarea Input Note:

33  Nazione:

34  + =  Clicca!

35  Radio Input Sesso: Uomo Donna

36  Alto Biondo

37  Quantità (tra 1 e 5):

38  Compleanno:

39  Il tuo colore preferito: Il tuo colore preferito:

40  E-mail:

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

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

43  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

44  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 email il suggerimento: ◦ "Scrivi la tua email"

45  Javascript

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

47  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

48  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

49  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

50 ◦ 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

51  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

52  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

53  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

54  XML (eXtensible Markup Language)

55  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

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

57  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

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

59  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 ""

60  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 http://www.w3schools.com/dom/dom_validate.asp

61  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

62  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

63  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

64  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;

65  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

66 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

67 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

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

69 >" />

70  Appendice

71 Tecnologie per la comunicazione Continua esempio

72 Napoli Campania Napoli Salerno Avellino Continua

73 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

74 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

75 Copyright ©....

76 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

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

78 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

79 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

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

81  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

82  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

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

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

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

86 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

87 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

88 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

89 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

90 Il tuo browser non supporta il tag audio Novità di HTML5 http://www.online-convert.com/

91 Il tuo browser non supporta il tag video Novità di HTML5 http://www.online-convert.com/ esempio

92  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