HTML5(-4) 8. on-line cartaceo. Mark Pilgrim. diveintohtml5.ep.io O'Reilly. Tecnologie di Sviluppo per il WEB 1

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "HTML5(-4) 8. on-line cartaceo. Mark Pilgrim. diveintohtml5.ep.io O'Reilly. Tecnologie di Sviluppo per il WEB 1"

Transcript

1 HTML5(-4) 8 diveintohtml5.ep.io O'Reilly Mark Pilgrim on-line cartaceo Tecnologie di Sviluppo per il WEB 1

2 Scopo di HTML 5 Tra gli obiettivi che gli sviluppatori si sono proposti ci sono: Continuare a mantenere le potenzialità delle versioni precendenti. Mark-up semantici per una migliore leggibilità del codice Per esseri umani (non-vedenti, etc...) Per spider e SEO Ridurre uso di plug-in nelle applicazioni web Tecnologie di Sviluppo per il WEB 2

3 Sintassi HTML5 è compatibile con HTML4 e XHTML1, ma non è compatibile con caratteristiche SGML esoteriche di HTML4, processing instructions shorthand markup (Che noi non abbiamo neanche visto...) I documenti che usano sintassi HTML sono serviti con il text/html media type (MIME TYPE) Tecnologie di Sviluppo per il WEB 3

4 MIME Types Web-server spedisce vari header prima di spedire la pagina di mark-up Tra i più importanti: Content-type: text/html E' detto MIME-type della pagina Questo header è l'unica cosa che determina cosa è una particolare risorsa E quindi come deve essere resa Tecnologie di Sviluppo per il WEB 4

5 Trattamento degli errori Il WHAT (Web Hypertext Applications Technology) working group documenta come analizzare HTML in modo che sia compatibile con i contenuti attuali del Web. (Invece del reverse engineering fatto fin'ora dai vari browser: Mosaic aveva i suoi algoritmi, Netscape lo imitò, poi venne IE, e poi ancora Opera, FF, poi Safari imitò FF...) Tecnologie di Sviluppo per il WEB 5

6 Rilevare HTML5 Il DOM costruito dal browser per una pagina, è costituito da oggetti, che rappresentano gli elementi HTML della pagina: Ognuno ha delle proprietà In HTML5, ci sono oggetti che hanno una proprietà unica Li identifica quindi univocamente. Ci sono 4 tecniche per il rilevamento Tecnologie di Sviluppo per il WEB 6

7 Rilevare HTML5: Le 4 tecniche 1) Testare se una certa proprietà esiste Su un oggetto globale (ad esempio) 2) Creare un elemento e...goto 1 3) Creare un elemento, verificare se esiste un metodo, chiamarlo e verificare il valore restituito 4)Creare un elemento, settare una proprietà ad un valore e verificare se la proprietà ha mantenuto quel valore. Tecnologie di Sviluppo per il WEB 7

8 Rilevare HTML5: Modernizr Una facile alternativa è quella di usare la libreria open-source Javascript (valida anche per CSS3) Modernizr <script src="modernizr.min.js"> </script> if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } Esempio Tecnologie di Sviluppo per il WEB 8

9 Geolocation Dove sei? Indirizzo IP, wireless, cellullare, gps Le API geolocation consentono di condividere la propria posizione con siti ritenuti affidabili Lat e Long sono rese disponibili a JS nella pagina web, che quindi le può mandare al server web. Tecnologie di Sviluppo per il WEB 9

10 Proprietà geolocation E' una nuova proprietà di navigator Esempio: function getlocation() { if (Modernizr.geolocation) { navigator.geolocation.getcurrentposition(showmap); } else { // non c'è supporto nativo} } A questo punto il browser mostra una finestra pop-up (non bloccante) chiedendo se l'applicazione può spedire i dati. showmap è una call-back function (definita dal programmatore) Da Wikipedia: In computer programming, a callback is a reference to executable code, or a piece of executable code, that is passed as an argument to other code. Tecnologie di Sviluppo per il WEB 10

11 Proprietà geolocation Può avere anche un secondo parametro che specifica una funzione da invocare in caso di errore Può avere anche un terzo parametro per specificare opzioni particolari (ad esempio la migliore accuratezza possibile, o un timeout prima di riportare un errore) Tecnologie di Sviluppo per il WEB 11

12 Geolocation: funzione showmap function showmap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // qui qualcosa da mostrare: una mappa? } La funzione callback è chiamata con un singolo parametro, che è un oggetto con due proprietà: 1. coords 2. timestamp Tecnologie di Sviluppo per il WEB 12

13 Geolocation:Proprietà dell'oggetto position 1. coords: coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeaccuracy coords.heading coords.speed 2. timestamp Tecnologie di Sviluppo per il WEB 13

14 Geolocation: Esempio Esempio Tecnologie di Sviluppo per il WEB 14

15 Local Storage HTML5 ha introdotto il concetto di localstorage, ovvero un sistema di memorizzazione e gestione delle informazioni sul computer dell'utente che ci consente di memorizzare fino a 5 mega di dati. Ma non esiste gia'? Si, i cookie, ma: 1. Inclusi in ogni request a) rallenta il server b) trasmessi in chiaro 2. Limitati a 4KB Sufficienti a rallentare, ma non sufficienti per memorizzare qualcosa di significativo Tecnologie di Sviluppo per il WEB 15

16 Local storage: desiderata Più spazio......sul client che persista dopo un refresh......e che non sia trasmesso al server! è chiamato anche HTML5 storage DOM storage limite di 5MB Tecnologie di Sviluppo per il WEB 16

17 Local Storage: storage detection usiamo Modernizr if (Modernizr.localstorage) { // window.localstorage è disponibile } else { // non c'è supporto nativo } E' una proprietà dell'oggetto window Tecnologie di Sviluppo per il WEB 17

18 Local Storage: HTML5 storage E' basato su coppie chiave/valore - Att.ne: valori sono stringhe (...nel caso usare parseinteger/parsefloat) Metodi dell'oggetto localstorage: var foo = localstorage.getitem( bar ); localstorage.setitem( bar, foo); Il codice sopra può essere riscritto con un array associativo: var foo = localstorage[ bar ]; localstorage[ bar ] = foo; Altri metodi removeitem(key); clear(); key(n) per ottenere l' n-ma chiave Tecnologie di Sviluppo per il WEB 18

19 Local Storage: tracciare modifiche Viene lanciato l'evento storage sull'oggetto window quando... setitem() removeitem() clear() effettivamente provocano un cambiamento dello stato della memoria se si setta una chiave al suo valore attuale o si cancella una memoria vuota, allora non viene lanciato l'evento Problemi con IE e FF... Tecnologie di Sviluppo per il WEB 19

20 Local Storage: proprietà evento Storage key La chiave che è stata aggiunta, rimossa, o modificata oldvalue Il valore precedente o null se l'item è nuovo newvalue Il valore nuovo o null se l'item è stato rimosso url La url chiamante il metodo che ha scatenato l'evento Tecnologie di Sviluppo per il WEB 20

21 Local Storage: Esempio... if (Modernizr.localstorage) { var testo = localstorage.getitem("testo"); document.getelementbyid('testo').value = testo; localstorage.setitem("testo", document.getelementbyid('testo').value);... function distruggidatosinistro(){ if (Modernizr.localstorage) { document.getelementbyid('testo').value=""; localstorage.removeitem("testo"); }... Esempio Tecnologie di Sviluppo per il WEB 21

22 Local Storage: proprietà evento Storage Esempi tratti dal libro di Freeman: Listato 39.1 nel file 39.1.html Per settare le variabili Listato 39.2 nel file storage.html Per tracciare le modifiche I listati sono nel file cap39.zip sul sito nella sezione altro. Tecnologie di Sviluppo per il WEB 22

23 Creare Web App's Offline Usiamo l'oggetto Localstorage (codice cap40.zip sul sito nella sezione altro ) Tecnologie di Sviluppo per il WEB 23

24 Local Storage: lavorare offline Molto simplicisticamente E' una lista di URL dirette a : HTML, CSS e JS file con immagini e altre risorse La home page punta al manifest file Il browser legge questa lista, scarica le risorse elencate, le mette in cache e le mantiene aggiornate da questo momento in poi. Quando si tenta di accedere al Web senza connessione, si viene rediretti lì Tecnologie di Sviluppo per il WEB 24

25 Local Storage: lavorare offline Parte del lavoro spetta ora allo sviluppatore. Per determinare se si è offline window.navigator.online Restituisce false se il browser è sicuramente offline true, quando il browser potrebbe essere online Tecnologie di Sviluppo per il WEB 25

26 Local Storage: flusso di eventi Associati al downloading, caching, etc, ci sono una serie di eventi scatenati sull'oggetto, ad esempio: window.applicationcache Consentono di stabilire se è iniziato il downloading, quanto manca, quanti file, etc... Tecnologie di Sviluppo per il WEB 26

27 Local Storage: Il file cache.manifest Per iniziare il download ed il caching delle risorse: <!DOCTYPE html> <html manifest= /cache.manifest > <body>... Necessario il content-type text/cache-manifest Tecnologie di Sviluppo per il WEB 27

28 Configurazione di Apache In Apache nel file httpd.conf # Apache mimetype configuration text/cache-manifest manifest Se non possiamo accedere al file httpd.conf, allora nel file.htaccess AddType text/cache-manifest.manifest Accertarsi che l'estensione dei file sia.manifest Tecnologie di Sviluppo per il WEB 28

29 Local Storage: Manifest file La prima linea del file è: CACHE MANIFEST Ha tre sezioni, marcate da header: explicit CACHE online whitelist NETWORK fallback FALLBACK Se non sono indicate, il default è la sezione explicit Tecnologie di Sviluppo per il WEB 29

30 Local Storage: explicit CACHE MANIFEST /clock.css /clock.js /clock-face.jpg Non ha header indicati, quindi questa è la sezione explicit Queste risorse sono scaricate e messe in cache e rese disponibili se si va offline Tecnologie di Sviluppo per il WEB 30

31 Local Storage CACHE Esempi tratti dal libro di Freeman: Listato 40.2 nel file fruit.appcache Un semplice manifest file Listato 40.3 nel file 40.3.html Una semplice applicazione web che usa il manifest fruit.appcache Provateli con FF e cliccate su cherries Lavorate offline (opzione nel menù FILE) Tecnologie di Sviluppo per il WEB 31

32 Local Storage: online-whitelist CACHE MANIFEST NETWORK: /tracking.php CACHE: /clock.css NETWORK è la online-whitelist Non va mai in cache Ogni volta che il file tracking.php è richiesto, il browser tenta di prelevarlo dal server (sebbene userà una copia i cache se l'utente vi era andato prima di essere offline) Tecnologie di Sviluppo per il WEB 32

33 Local Storage: fallback CACHE MANIFEST FALLBACK: / /offline.html NETWORK:... Risorse sostitutive di quelle online che per qualche motivo non sono andate in cache. Lo slash indica qualsiasi pagina del nostro sito e se non c'è la risorsa disponibile in cache si usa /offline.html Tecnologie di Sviluppo per il WEB 33

34 Warning: L'aggiornamento di un file incluso nel manifest non comporta l'aggiornamento della versione in cache Perchè il browser, per verificare se ci sono stati aggiornamenti, controlla i contenuti del file manifest e... questi non sono cambiati! Quindi ogni volta che viene modificato un file della cache è necessario cambiare anche il file manifest Ad esempio cambiare un commento Tecnologie di Sviluppo per il WEB 34

35 Local Storage FALLBACK Esempi tratti dal libro di Freeman: Listati 40.6 Provateli con FF e lavorate OFFLINE Nel menù FILE I listati sono nel file cap40.zip sul sito nella sezione altro. Tecnologie di Sviluppo per il WEB 35

36 Abbreviare i tag (1) HTML 4: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict EN > HTML 5: <!DOCTYPE html> Tecnologie di Sviluppo per il WEB 36

37 Abbreviare i tag (2) HTML 4: <html xmlns= lang= en xml:lang= en > HTML 5: <html lang= en > Tecnologie di Sviluppo per il WEB 37

38 Abbreviare i tag (3) HTML 4: <meta http-equiv= Content-Type content= text/html ; charset= utf-8 /> HTML 5: <meta charset= utf-8 > Tecnologie di Sviluppo per il WEB 38

39 Abbreviare i tag (4) Tag <link> con attributo rel Link a risorse esterne Per arricchire il documento Link a risorse interne Esempio: <link rel=stylesheet href= file.css /> Piccola ottimizzazione: Eliminazione di type= text/css Tecnologie di Sviluppo per il WEB 39

40 ...non solo abbreviare Ma anche nuovi elementi semantici: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark mark, summary, meter, time, nav, video, output, wbr progress, rp, rt, ruby, section, source, Tecnologie di Sviluppo per il WEB 40

41 TAG SEMANTICI Header Nav Section Article Aside Footer Utili ad esempio per ciechi o per persone con difficoltà ad usare il mouse Tecnologie di Sviluppo per il WEB 41

42 Tag Semantici: Terminologia <section> Definisce un contenuto generico <article> Rappresentare articoli indipendenti <header>, <footer> Blocchi di contenuti topmost e bottommost <nav> Crea un menu di navigazione <aside> Contenitore di approfondimento SKIP Tecnologie di Sviluppo per il WEB 42

43 Tag Semantici: esempio (1) Tecnologie di Sviluppo per il WEB 43

44 Tag Semantici: esempio (2) Tecnologie di Sviluppo per il WEB 44

45 Header Sostituisce <div id= header...> In maniera molto naturale utile per blind-people e motori-di-ricerca Il significato del tag <p class= tagline...> (usato come un sub-heading) non ha un ruolo di mark-up (come invece hanno i tag <Hx> per il profilo) Siamo dovuti ricorrere a CSS Si usa <hgroup>... Per non creare un nuovo nodo nel profilo (e trattarlo insieme ad <header>) Tecnologie di Sviluppo per il WEB 45

46 Header: Example <div id= header > </div> <header> <h1>my weblog</h1> HTML4 <p class= tagline >Un sacco di lavoro per fare questo senza sforzo </p> <hgroup> <hgroup> </header> <h1>my weblog</h1> HTML5 <h2>un sacco di lavoro per fare questo senza sforzo</h2> Tecnologie di Sviluppo per il WEB 46

47 Article Il tag <article> rappresenta una sezione autonoma in un documento, pagina, applicazione o sito (infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o interamente in diverse pagine). In sostanza, anche se nelle specifiche non è espresso, l'elemento <article> rappresenta una forma particolare di <section> Tecnologie di Sviluppo per il WEB 47

48 Article: Cosa c'è di nuovo? Che in HTML4 il profilo (outline) consentiva di avere un solo H1 In HTML5 ogni article crea un nuovo nodo nel profilo e quindi gli si può assegnare un heading <h1> Tecnologie di Sviluppo per il WEB 48

49 Article: Esempio VECCHIO CODICE <div class= entry > <p class= post-date >October 22, 2009</p> <h2> <a href= # rel= bookmark title= link to this post > Travel day </a> </h2> </div> Tecnologie di Sviluppo per il WEB 49

50 Article: Esempio HTML 5 <article> <header> <p class= post-date >October 22, 2009</p> <h2> <a href= # rel= bookmark title= link to this post >Travel day </a> <h2> </header> </article> Tecnologie di Sviluppo per il WEB 50

51 Navigation Il tag <nav> è definito per quella parte della pagina che contiene i link di navigazione interni al sito. Questo contenitore di link deve essere la barra di navigazione principale del sito e può essere un menu verticale, orizzontale, con sottomenu a comparsa ecc... Tecnologie di Sviluppo per il WEB 51

52 Navigation: Esempio VECCHIO CODICE <div id= nav > <ul> <li><a href= # >home</a></li> <li><a href= # >blog</a></li> <li><a href= # >gallery</a></li> <li><a href= # >about</a></li> </ul> </div> Tecnologie di Sviluppo per il WEB 52

53 Navigation: Esempio HTML5 <nav> <ul> <li><a href= # >home</a></li> <li><a href= # >blog</a></li> <li><a href= # >gallery</a></li> <li><a href= # >about</a></li> </ul> </nav> Cosa c'è di nuovo? Semanticamente si sta dicendo che è la lista di navigazione e non una semplice lista Se si è in difficoltà con il mouse o con la vista può aiutare molto... Tecnologie di Sviluppo per il WEB 53

54 Footers Non si deve però intendere il tag footer come piè di pagina ma come footer della section in cui è incluso (come con il tag header): - Non necessariamente deve essere inserito solo alla fine di un documento - All'interno di una pagina web possono essere presenti diversi <footer> anche più di uno per lo stesso elemento. Semplifica di molto il mark-up delle pagine Tecnologie di Sviluppo per il WEB 54

55 Footer: Esempio HTML4 <div id= footer > <p> qui ci va tutto quello che normalmente va in un footer... </p> </div> HTML5 <footer> qui ci va tutto quello che normalmente va in un footer... </footer> Tecnologie di Sviluppo per il WEB 55

56 Section Il tag <section> è utile per definire porzioni di pagina che indicano elementi differenti. Questo elemento contiene, spesso, un <header> e un <footer>. L utilità non è solo pratica (nella divisione del codice), ma anche semantica per permettere di differenziare le sezioni del sito. Tecnologie di Sviluppo per il WEB 56

57 Section: Esempio... <section> <h1>wwf</h1> <p>the World Foundation was born in </p> </section>... Tecnologie di Sviluppo per il WEB 57

58 Aside Rappresenta una sezione di una pagina costituita da informazioni che sono marginalmente correlate al contenuto dell'elemento padre che la contiene, e che potrebbero essere considerate distinte da quest'ultimo. Ѐ contenitore di approfondimento in cui possiamo inserire gruppi di link, pubblicità, bookmark e così via Tecnologie di Sviluppo per il WEB 58

59 Aside: Esempio... <p>la mia famiglia ha visitato il centro Epcot questa estate.</p> <aside> <h4>epcot Center</h4> Il Centro Epcot è un parco tematico a Disney World, in Florida. </aside> Tecnologie di Sviluppo per il WEB 59

60 TAG DI INTERATTIVITÀ CANVAS COMMAND DETAILS BACK Tecnologie di Sviluppo per il WEB 60

61 Canvas RFC: area (tela) bitmap, dipendente dalla risoluzione per grafici, giochi, immagini visuali al volo. Area rettangolare in cui usare JS per disegnarci. Non ha un suo contenuto o un suo bordo... <canvas id= a width= 300 height= 225 ></canvas> var acanvas=document.getelementbyid( a );... Tecnologie di Sviluppo per il WEB 61

62 Canvas: Alcune funzioni getcontext( 2d ) Il contesto: dove accade tutto fillrect(x,y,widht, height) Disegna un rettangolo riempito con lo stile definito da... fillstyle, strokestyle (per il contorno) Colore strokerect(x,y,width, height) Disegna un rettangolo ma solo con i bordi di strokestyle colorati ClearRect Cancella il rettangolo Tecnologie di Sviluppo per il WEB 62

63 Canvas: Esempio var canvas=document.getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); //Quadrato ctx.fillstyle='#ff0000'; ctx.fillrect(20,30,100,100);... Esempio Tecnologie di Sviluppo per il WEB 63

64 Command Il tag <command> rappresenta un comando che l'utente può invocare ed è solitamente utilizzabile all'interno di toolbar e nel tag menu.... <menu> <command onclick="alert('hello')">click Me!</command> </menu> Non è suppotato da nessun browser al momento Esempio Tecnologie di Sviluppo per il WEB 64

65 Details Il tag <details> rappresenta un widget informativo da cui l'utente può ottenere informazioni supplementari o controlli. <details> <summary>copyright </summary> <p>all pages and graphics on this web site are the property of </details> Esempio the company Refsnes Data.</p> Tecnologie di Sviluppo per il WEB 65

66 TAG DI MULTIMEDIALITÀ NATIVA VIDEO AUDIO EMBED Tecnologie di Sviluppo per il WEB 66

67 Video Youtube: incanalati con plug-in Flash (altri con QuickTime, RealPlayer) HTML5 ha uno standard per far girare i video in una pagina web con <video> Ancora in evoluzione...un modo gentile per dire che non e' supportato ancora molto :-) E' responsabilità nostra stabilire quale browser supporta quale container (avi,mp4, ogg, flash, etc.) e quale codec Tecnologie di Sviluppo per il WEB 67

68 Video Il container in realtà stabilisce come memorizzare i file, non cosa memorizzare Analogamente a zip, tar, etc. che comprimono qualsiasi tipo di file Il codec è il formato vero e proprio Tecnologie di Sviluppo per il WEB 68

69 Video: Attributi Il tag <video> propone alcuni attributi specifici, oltre a quelli generici di ogni tag: poster: l indirizzo di una immagine statica per rimpiazzare il video se il browser non è in grado di visualizzarlo controls: indica se deve essere visualizzata una interfaccia per controllare la riproduzione, l interfaccia può permettere le funzioni: play, pause, salto ad una posizione del video (seek), cambio del volume, loop: indica se la riproduzione deve riprendere dall inizio automaticamente al momento che arriva alla fine del video Tecnologie di Sviluppo per il WEB 69

70 Video: un semplice mark-up <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> controls: saranno mostrati i controlli. Ci sono software per fare l'encoding nei diversi container e codec (e.g.: firefogg) Tecnologie di Sviluppo per il WEB 70

71 Video: attributo autoplay <video src= gita.webm width="320" height="240" autoplay></video> Se si vuole evitarlo (come utente), si puo' usare questa estensione in FF (c'è anche per gli altri browser): var i; var arvideos = document.getelementbytagname('video'); for (i= arvideos.length-1; i>=0; i--) { } arvideos[i].autoplay= false; Tecnologie di Sviluppo per il WEB 71

72 Video: Esempio <video controls="true" height="350" width="350" poster="asd.jpg"> <source src="auto.mp4" type="video/mp4"> <!--Chrome efirefox --> </source><source src="auto.webm" type="video/webm"> <!-- Firefox e Opera --> </source><source src="auto.ogg" type="video/ogg"> Il tuo browser non supporta il tag video. Aggiornalo! </video> Esempio Tecnologie di Sviluppo per il WEB 72

73 Audio Il tag <audio> rappresenta un suono o uno stream audio.... <audio controls="controls"> <source src="horse.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio> Esempio Tecnologie di Sviluppo per il WEB 73

74 Embed L'elemento <embed> è già utilizzato da anni per inserire contenuti interattivi o multimediali. Era stato deprecato in HTML 4, ora è stato reintrodotto <body> <embed src="helloworld.swf" /> </body ESEMPIO Tecnologie di Sviluppo per il WEB 74

75 TAG DI TEMPO E UNITÀ DI MISURA METER PROGRESS TIME Tecnologie di Sviluppo per il WEB 75

76 Meter Il tag <meter> rappresenta una misura scalare all'interno di un intervallo noto, o un valore frazionario.... <body> <meter value="2" min="0" max="10">2 out of 10</meter> <br /> <meter value="0.6">60%</meter> </body> Esempio Tecnologie di Sviluppo per il WEB 76

77 Progress (visto in Ajax) Il tag <progress> rappresenta lo stato di completamento di un compito e può essere di due tipi: - indeterminato - determinato... <body> The object's downloading progress: <progress value="22" max="100"></progress> </body> Esempio Tecnologie di Sviluppo per il WEB 77

78 Time Questo elemento è inteso come un modo moderno per codificare le date e gli orari in maniera leggibile anche per i computer Non è supportato da nessun browser <article> <header> <time pubdate datetime= > October 22, 2012 </time> </article> Non è supportato da nessun browser Esempio Tecnologie di Sviluppo per il WEB 78

79 Moduli: una sporca dozzina (1/12) Tutti i browser se non riconoscono un tipo, lo rendono come text Placeholder L attributo placeholder di HTML5 consente di visualizzare un breve suggerimento all interno delle caselle input di tipo testo e delle textarea che scompare quando si dà il focus. <form> <input name= q placeholder= mittente... > <input type= submit value= ricerca tra le > </form> Esempio Tecnologie di Sviluppo per il WEB 79

80 Moduli: una sporca dozzina (2/12) Autofocus <form> <input name=q autofocus> <script> if (!( autofocus in document.createelement( input ))){ document.getelementbyid( q ).focus(); } </script> <input type=submit value=ricerca> </form> Esempio Tecnologie di Sviluppo per il WEB 80

81 Moduli: una sporca dozzina (3/12) <form> <input type= > <input type= submit value= VAI > </form> La resa è identica al tipo text, ma in alcuni casi, come per l'iphone/htc, cambia la tastiera offerta per comprendere tasti utili ) Esempio Tecnologie di Sviluppo per il WEB 81

82 Moduli: una sporca dozzina (4/12) Indirizzi Web <form> <input type= url > <input type= submit value= VAI > </form> La resa è identica al tipo text, ma in alcuni casi, come per l'iphone/htc, cambia la tastiera offerta per comprendere tasti utili (.com, ) Esempio Tecnologie di Sviluppo per il WEB 82

83 Moduli: una sporca dozzina (5/12) Numeri <form> <input type= number min= 0 max= 10 step= 2 value= 6 <input type= submit value= VAI > </form> Alcune funzioni JS gratis a corredo input.stepup(n), input.stepdown(n), input.valueasnumber Iphone/HTC: Tastierino numerico, operatori,... Esempio Tecnologie di Sviluppo per il WEB 83

84 Moduli: una sporca dozzina (6/12) Numeri come slider <form> <input type= range min= 0 max= 10 step= 2 value= 6 <input type= submit value= VAI > </form> ESEMPIO Tecnologie di Sviluppo per il WEB 84

85 Moduli: una sporca dozzina (7/12) Calendario per scelta data <form> <input type= date > </form> <script> var i=document.createelement( input ); i.setattribute( type, date ); if (i.type == text ) { //usa alternative... } </script> ESEMPIO Tecnologie di Sviluppo per il WEB 85

86 Moduli: una sporca dozzina (7/12) Calendario per scelta data Esempio di validazione non andata a buon fine Tecnologie di Sviluppo per il WEB 86

87 Moduli: una sporca dozzina (8/12) Caselle di ricerca <form> <input name= q type= search > <input type= submit value= Find > </form> In Safari la casella ha gli angoli arrotondati In Chrome e Safari Guardate a destra quando si inizia a scrivere... ESEMPIO Tecnologie di Sviluppo per il WEB 87

88 Moduli: una sporca dozzina (9/12) Scelta di colori <form> <input type= color > </form> Scelto un colore, restituisce la rappresentazione esadecimale Supportato solo da Opera 11, per il momento Tecnologie di Sviluppo per il WEB 88

89 Moduli: una sporca dozzina (9/12) Validazione moduli Fatta con javascript Nel 10% dei casi non e' abilitato Difficile da fare correttamente cf. espressioni regolari Si può anche annullare: <form novalidate> <input type=" " id="addr"> <input type="submit" value="subscribe"> </form> Non supportata da IE e Safari Tecnologie di Sviluppo per il WEB 89

90 Microdata Annotazioni fatte sul DOM con coppie nome/valore presi da un dato vocabolario specificato dall'utente. Utile per motori di ricerca Si definisce uno scope ed un vocabolario e poi si definiscono come semplici attributi Tecnologie di Sviluppo per il WEB 90

91 Conclusioni Ancora bug: in fase di sviluppo Utile per lo sviluppo quando sarà completamente sviluppata. Tecnologie di Sviluppo per il WEB 91

HTML 5. on-line cartaceo. Mark Pilgrim. diveintohtml5.ep.io O'Reilly. Tecnologie di Sviluppo per il WEB 1

HTML 5. on-line cartaceo. Mark Pilgrim. diveintohtml5.ep.io O'Reilly. Tecnologie di Sviluppo per il WEB 1 HTML 5 diveintohtml5.ep.io O'Reilly Mark Pilgrim on-line cartaceo Tecnologie di Sviluppo per il WEB 1 Scopo di HTML 5 Tra gli obiettivi che gli sviluppatori si sono proposti ci sono: C o n t i n u a r

Dettagli

HTML5: il corso Fondamentale

HTML5: il corso Fondamentale HTML5: il corso Fondamentale Impara la tecnologia che sta ALLA BASE del mondo Internet di oggi, in particolar modo se vuoi creare siti facilmente indicizzabili e responsive IlTuoCorso - Ermes srl Via E.De

Dettagli

Esercizi di JavaScript

Esercizi di JavaScript Esercizi di JavaScript JavaScript JavaScript é un linguaggio di programmazione interpretato e leggero, creato dalla Netscape. E' presente a patire da Netscape 2 in tutti i browser ed é dunque il linguaggio

Dettagli

19. LA PROGRAMMAZIONE LATO SERVER

19. LA PROGRAMMAZIONE LATO SERVER 19. LA PROGRAMMAZIONE LATO SERVER Introduciamo uno pseudocodice lato server che chiameremo Pserv che utilizzeremo come al solito per introdurre le problematiche da affrontare, indipendentemente dagli specifici

Dettagli

Guida all uso di Java Diagrammi ER

Guida all uso di Java Diagrammi ER Guida all uso di Java Diagrammi ER Ver. 1.1 Alessandro Ballini 16/5/2004 Questa guida ha lo scopo di mostrare gli aspetti fondamentali dell utilizzo dell applicazione Java Diagrammi ER. Inizieremo con

Dettagli

Come funziona il WWW. Architettura client-server. Web: client-server. Il protocollo

Come funziona il WWW. Architettura client-server. Web: client-server. Il protocollo Come funziona il WWW Il funzionamento del World Wide Web non differisce molto da quello delle altre applicazioni Internet Anche in questo caso il sistema si basa su una interazione tra un computer client

Dettagli

Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template.

Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template. I TEMI PREDEFINITI (TEMPLATE) Scelta del tema I temi predefiniti di wordpress sono la base di un sito che usa un utente che per ragioni pratiche o per incapacità non può creare un sito usando solo codice

Dettagli

Utilizzo dei Cookie Cosa sono i cookie? A cosa servono i cookie? cookie tecnici cookie, detti analitici cookie di profilazione

Utilizzo dei Cookie Cosa sono i cookie? A cosa servono i cookie? cookie tecnici cookie, detti analitici cookie di profilazione Utilizzo dei Cookie Questo sito utilizza i cookie. Utilizzando il nostro sito web l'utente accetta e acconsente all utilizzo dei cookie in conformità con i termini di uso dei cookie espressi in questo

Dettagli

Cookie. Krishna Tateneni Jost Schenck Traduzione: Luciano Montanaro

Cookie. Krishna Tateneni Jost Schenck Traduzione: Luciano Montanaro Krishna Tateneni Jost Schenck Traduzione: Luciano Montanaro 2 Indice 1 Cookie 4 1.1 Politica............................................ 4 1.2 Gestione........................................... 5 3 1

Dettagli

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE.

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE. Cos'è l'html HTML è una sigla che viene da una frase inglese che vuol dire: " Linguaggio di contrassegno di ipertesti" (Hyper Text Markup Language) L'Html non è un vero e proprio linguaggio di programmazione,

Dettagli

UTILIZZO DEI COOKIES (informativa conforme al Provvedimento del Garante Privacy del 8 Maggio 2014)

UTILIZZO DEI COOKIES (informativa conforme al Provvedimento del Garante Privacy del 8 Maggio 2014) UTILIZZO DEI COOKIES (informativa conforme al Provvedimento del Garante Privacy del 8 Maggio 2014) Star Link srl, Titolare del trattamento dei dati personali, informa che questo Sito internet fa uso di

Dettagli

ammesso solo con il tuo consenso. Le modifiche apportate hanno lo scopo di semplificare il controllo di quali

ammesso solo con il tuo consenso. Le modifiche apportate hanno lo scopo di semplificare il controllo di quali CHE COSA SONO I COOKIES E COME LI UTILIZZIAMO Un cookie è un semplice file di testo che viene memorizzato sul tuo computer o dispositivo mobile dal server di un sito web e che solo quel server sarà in

Dettagli

GUIDA ALL USO DEL PANNELLO DI GESTIONE SITO WEB

GUIDA ALL USO DEL PANNELLO DI GESTIONE SITO WEB GUIDA ALL USO DEL PANNELLO DI GESTIONE SITO WEB Copyright 2014 Wolters Kluwer Italia Srl 1 Sommario 1 Come accedere al Pannello di gestione... 4 2 del Pannello di gestione del sito web... 5 3 delle sezioni...

Dettagli

Capitolo 3. L applicazione Java Diagrammi ER. 3.1 La finestra iniziale, il menu e la barra pulsanti

Capitolo 3. L applicazione Java Diagrammi ER. 3.1 La finestra iniziale, il menu e la barra pulsanti Capitolo 3 L applicazione Java Diagrammi ER Dopo le fasi di analisi, progettazione ed implementazione il software è stato compilato ed ora è pronto all uso; in questo capitolo mostreremo passo passo tutta

Dettagli

Scuola Italiana del Middlebury College. Informazioni ed istruzioni per utilizzare MOODLE

Scuola Italiana del Middlebury College. Informazioni ed istruzioni per utilizzare MOODLE Scuola Italiana del Middlebury College Informazioni ed istruzioni per utilizzare MOODLE L ambiente di lavoro in visualizzazione studente e docente con la funzione Attiva modifica 1) Vai a: go/hub 2) Entra

Dettagli

WEBGIS 1.0. Guida per l utente

WEBGIS 1.0. Guida per l utente WEBGIS 1.0 Guida per l utente SOMMARIO 1 INTRODUZIONE...3 2 FUNZIONALITA...4 2.1 Strumenti WebGIS... 4 2.1.1 Mappa... 5 2.1.2 Inquadramento mappa... 6 2.1.3 Toolbar... 7 2.1.4 Scala... 9 2.1.5 Legenda...

Dettagli

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013 Corso di HTML Modulo L3 1-Concetti generali 1 Prerequisiti Browser Rete Internet Client e server 2 1 Introduzione In questa Unità introduciamo alcuni semplici elementi del linguaggio HTML, con il quale

Dettagli

Manuale per i redattori del sito web OttoInforma

Manuale per i redattori del sito web OttoInforma Manuale per i redattori del sito web OttoInforma Contenuti 1. Login 2. Creare un nuovo articolo 3. Pubblicare l articolo 4. Salvare l articolo in bozza 5. Le categorie 6. Modificare un articolo 7. Modificare

Dettagli

Cookie e Webstorage. Vediamo ora i metodi dell oggetto localstorage. Per memorizzare un valore si utilizza il metodo setitem:

Cookie e Webstorage. Vediamo ora i metodi dell oggetto localstorage. Per memorizzare un valore si utilizza il metodo setitem: Cookie e Webstorage Un cookie (letteralmente biscotto) è un pacchetto di informazioni che viene salvato sul computer dell utente. In successive sessioni di collegamento a Internet (normalmente per un periodo

Dettagli

I.N.A.I.L. Certificati Medici via Internet. Manuale utente

I.N.A.I.L. Certificati Medici via Internet. Manuale utente I.N.A.I.L. Certificati Medici via Internet Manuale utente CERTIFICATI MEDICI... 1 VIA INTERNET... 1 MANUALE UTENTE... 1 COME ACCEDERE AI CERTIFICATI MEDICI ON-LINE... 3 SITO INAIL... 3 PUNTO CLIENTE...

Dettagli

Cimini Simonelli - Testa

Cimini Simonelli - Testa WWW.ICTIME.ORG Joomla 1.5 Manuale d uso Cimini Simonelli - Testa Il pannello di amministrazione Accedendo al pannello di amministrazione visualizzeremo una schermata in cui inserire il nome utente (admin)

Dettagli

Client - Server. Client Web: il BROWSER

Client - Server. Client Web: il BROWSER Client - Server Client Web: il BROWSER Il client Web è un applicazione software che svolge il ruolo di interfaccia fra l utente ed il WWW, mascherando la complessità di Internet. Funzioni principali Inviare

Dettagli

Corso di PHP. Prerequisiti. 6.1 PHP e il web 1. Conoscenza HTML Tecnica della programmazione Principi di programmazione web

Corso di PHP. Prerequisiti. 6.1 PHP e il web 1. Conoscenza HTML Tecnica della programmazione Principi di programmazione web Corso di PHP 6.1 PHP e il web 1 1 Prerequisiti Conoscenza HTML Tecnica della programmazione Principi di programmazione web 2 1 Introduzione In questa Unità illustriamo alcuni strumenti di programmazione

Dettagli

Il linguaggio HTML - Parte 4

Il linguaggio HTML - Parte 4 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto

Dettagli

HTML 1. HyperText Markup Language

HTML 1. HyperText Markup Language HTML 1 HyperText Markup Language Introduzione ad HTML Documenti HTML Tag di markup Formattazione del testo Collegamenti ipertestuali Immagini Tabelle Form in linea (moduli) Tecnologie di Sviluppo per il

Dettagli

Esistono sostanzialmente due metodi per inserire un video online (preso da siti di video sharing come Youtube) in un powerpoint slideshow :

Esistono sostanzialmente due metodi per inserire un video online (preso da siti di video sharing come Youtube) in un powerpoint slideshow : Arricchire con contenuti multimediali uno slideshow di Powerpoint, sia per fare presentazioni a carattere professionale, didattico o per presentare una tesi-relazione, in determinate circostanze può veramente

Dettagli

Internet Explorer 7. Gestione cookie

Internet Explorer 7. Gestione cookie Internet Explorer 7 Internet Explorer 7 è la nuova versione del browser di Microsoft disponibile per i Sistemi Operativi: Windows Vista, Windows XP (SP2), Windows XP Professional x64 Edition e Windows

Dettagli

CMS MUSEO&WEB. Mappe grafiche. Andrea Tempera (OTEBAC) 12 aprile 2010

CMS MUSEO&WEB. Mappe grafiche. Andrea Tempera (OTEBAC) 12 aprile 2010 CMS MUSEO&WEB Mappe grafiche Andrea Tempera (OTEBAC) 12 aprile 2010 Introduzione Grazie ad appositi tag HTML possiamo associare molteplici collegamenti a differenti zone di un'unica immagine; un'immagine

Dettagli

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi>

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi> FRAME HTML 6 I frame Danno la possibilità di creare finestre multiple all'interno della finestra del browser Si riesce a suddividere la pagina in più sezioni indipendenti, ma che si possono influenzare

Dettagli

1 2 Fase di autenticazione utente

1 2 Fase di autenticazione utente DInG my Dates di Andrea Dignani DinG my Dates è una applicazione di tipo Reminder, ovvero una app in grado di segnalare in un determinato istante di tempo all' utente un certo avvenimento/evento accaduto

Dettagli

Linguaggio JavaScript

Linguaggio JavaScript Linguaggio JavaScript A. Lorenzi, R. Giupponi, D. Iovino LINGUAGGI WEB. LATO CLIENT Atlas Copyright Istituto Italiano Edizioni Atlas Script Il termine script in informatica indica, in generale, un testo

Dettagli

Manuali.net. Nevio Martini

Manuali.net. Nevio Martini Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009 Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente

Dettagli

Guida al sistema. Dott. Enea Belloni

Guida al sistema. Dott. Enea Belloni Sistema Gestionale Voucher Guida al sistema Dott. Enea Belloni Sommario della presentazione Il sistema informatico per la gestione delle domande L utente presentatore: diritti e responsabilità La pagina

Dettagli

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>... HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento

Dettagli

Manuale Utente Albo Pretorio GA

Manuale Utente Albo Pretorio GA Manuale Utente Albo Pretorio GA IDENTIFICATIVO DOCUMENTO MU_ALBOPRETORIO-GA_1.4 Versione 1.4 Data edizione 04.04.2013 1 TABELLA DELLE VERSIONI Versione Data Paragrafo Descrizione delle modifiche apportate

Dettagli

Titolare del trattamento dei dati innanzi descritto è tsnpalombara.it

Titolare del trattamento dei dati innanzi descritto è tsnpalombara.it Decreto Legislativo 196/2003 Codice in materia di protezione dei dati personali COOKIE POLICY La presente informativa è resa anche ai sensi dell art. 13 del D.Lgs 196/03 Codice in materia di protezione

Dettagli

INDICE. IL CENTRO ATTIVITÀ... 3 I MODULI... 6 IL MY CLOUD ANASTASIS... 8 Il menu IMPORTA... 8 I COMANDI DEL DOCUMENTO...

INDICE. IL CENTRO ATTIVITÀ... 3 I MODULI... 6 IL MY CLOUD ANASTASIS... 8 Il menu IMPORTA... 8 I COMANDI DEL DOCUMENTO... MANCA COPERTINA INDICE IL CENTRO ATTIVITÀ... 3 I MODULI... 6 IL MY CLOUD ANASTASIS... 8 Il menu IMPORTA... 8 I COMANDI DEL DOCUMENTO... 12 I marchi registrati sono proprietà dei rispettivi detentori. Bologna

Dettagli

GUIDA STUDENTI HOMEPAGE DEI CORSI ON-LINE

GUIDA STUDENTI HOMEPAGE DEI CORSI ON-LINE GUIDA STUDENTI Benvenuti sulla piattaforma Des-K, basata su Moodle. Di seguito una breve introduzione alla navigazione tra i contenuti e le attività didattiche dei corsi on-line e una panoramica sui principali

Dettagli

Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia

Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia Scuola Digitale Manuale utente Copyright 2014, Axios Italia 1 SOMMARIO SOMMARIO... 2 Accesso al pannello di controllo di Scuola Digitale... 3 Amministrazione trasparente... 4 Premessa... 4 Codice HTML

Dettagli

Capitolo 4 Pianificazione e Sviluppo di Web Part

Capitolo 4 Pianificazione e Sviluppo di Web Part Capitolo 4 Pianificazione e Sviluppo di Web Part Questo capitolo mostra come usare Microsoft Office XP Developer per personalizzare Microsoft SharePoint Portal Server 2001. Spiega come creare, aggiungere,

Dettagli

Lezione 6: Form 27/04/2012

Lezione 6: Form 27/04/2012 Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi

Dettagli

FotoAeree. La Sardegna vista dall alto MANUALE PER L USO DELL APPLICAZIONE

FotoAeree. La Sardegna vista dall alto MANUALE PER L USO DELL APPLICAZIONE FotoAeree La Sardegna vista dall alto MANUALE PER L USO DELL APPLICAZIONE REGIONE AUTONOMA DELLA SARDEGNA [2] Indice 1. Introduzione 2. Navigatore 5 7 8 9 2.1. Strumenti di navigazione 2.2. Ricerca 3.

Dettagli

GUIDA ALL UTILIZZO DEL PORTALE DELLA RETE DEI COMUNI OGLIO PO

GUIDA ALL UTILIZZO DEL PORTALE DELLA RETE DEI COMUNI OGLIO PO GUIDA ALL UTILIZZO DEL PORTALE DELLA RETE DEI COMUNI OGLIO PO Il portale della Rete dei Comuni Oglio Po risponde all url: http://www.comuniogliopo.it Il portale è un contenitore per i siti comunali degli

Dettagli

LA GESTIONE DELLE VISITE CLIENTI VIA WEB

LA GESTIONE DELLE VISITE CLIENTI VIA WEB LA GESTIONE DELLE VISITE CLIENTI VIA WEB L applicazione realizzata ha lo scopo di consentire agli agenti l inserimento via web dei dati relativi alle visite effettuate alla clientela. I requisiti informatici

Dettagli

7.4 Estrazione di materiale dal web

7.4 Estrazione di materiale dal web 7.4 Estrazione di materiale dal web Salvataggio di file Salvataggio della pagina Una pagina web può essere salvata in locale per poterla consultare anche senza essere collegati alla Rete. Si può scegliere

Dettagli

Il calendario di Windows Vista

Il calendario di Windows Vista Il calendario di Windows Vista Una delle novità introdotte in Windows Vista è il Calendario di Windows, un programma utilissimo per la gestione degli appuntamenti, delle ricorrenze e delle attività lavorative

Dettagli

CONTENUTI 1. INTRODUZIONE...3 2. CONCETTI BASICI SU EQUINOX CMS XPRESS...5 3. ACCESSO A EQUINOX CMS XPRESS...9 4. PAGINA D INIZIO...

CONTENUTI 1. INTRODUZIONE...3 2. CONCETTI BASICI SU EQUINOX CMS XPRESS...5 3. ACCESSO A EQUINOX CMS XPRESS...9 4. PAGINA D INIZIO... CONTENUTI 1. INTRODUZIONE...3 DEFINIZIONE...3 ELEMENTI DEL SERVIZIO...3 TECNOLOGIA E OPERAZIONE...3 WORKFLOW E GRAFICO DI PROCESSI...4 2. CONCETTI BASICI SU EQUINOX CMS XPRESS...5 STRUTTURA...5 OGGETTI...5

Dettagli

ICARO Terminal Server per Aprile

ICARO Terminal Server per Aprile ICARO Terminal Server per Aprile Icaro è un software aggiuntivo per Aprile (gestionale per centri estetici e parrucchieri) con funzionalità di terminal server: gira sullo stesso pc dove è installato il

Dettagli

MANUALE EDICOLA 04.05

MANUALE EDICOLA 04.05 MANUALE EDICOLA 04.05 Questo è il video che si presenta avviando il programma di Gestione Edicola. Questo primo video è relativo alle operazioni di carico. CARICO Nello schermo di carico, in alto a sinistra

Dettagli

I Preferiti. Elenco dei Preferiti

I Preferiti. Elenco dei Preferiti G. Pettarin ECDL Modulo 7: Internet 38 I siti preferiti Navigando nella rete può capitare di trovare dei siti, di cui vogliamo memorizzare l'indirizzo. Magari si vuole organizzarli in categorie. Tutti

Dettagli

5. Fondamenti di navigazione e ricerca di informazioni sul Web

5. Fondamenti di navigazione e ricerca di informazioni sul Web 5. Fondamenti di navigazione e ricerca di informazioni sul Web EIPASS Junior SCUOLA PRIMARIA Pagina 43 di 47 In questo modulo sono trattati gli argomenti principali dell universo di Internet, con particolare

Dettagli

Avvio di Internet ed esplorazione di pagine Web.

Avvio di Internet ed esplorazione di pagine Web. Incontro 1: Corso di aggiornamento sull uso di internet Avvio di Internet ed esplorazione di pagine Web. Istituto Alberghiero De Filippi Via Brambilla 15, 21100 Varese www.istitutodefilippi.it Tel: 0332-286367

Dettagli

Guida Joomla. di: Alessandro Rossi, Flavio Copes

Guida Joomla. di: Alessandro Rossi, Flavio Copes Guida Joomla di: Alessandro Rossi, Flavio Copes Grafica e template 1. 15. La grafica e i template Personalizzare l'aspetto del sito aggiungendo nuovi template e customizzandoli 2. 16. Personalizzare il

Dettagli

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,

Dettagli

Architettura del. Sintesi dei livelli di rete. Livelli di trasporto e inferiori (Livelli 1-4)

Architettura del. Sintesi dei livelli di rete. Livelli di trasporto e inferiori (Livelli 1-4) Architettura del WWW World Wide Web Sintesi dei livelli di rete Livelli di trasporto e inferiori (Livelli 1-4) - Connessione fisica - Trasmissione dei pacchetti ( IP ) - Affidabilità della comunicazione

Dettagli

Manuale Utente Amministrazione Trasparente GA

Manuale Utente Amministrazione Trasparente GA Manuale Utente GA IDENTIFICATIVO DOCUMENTO MU_AMMINISTRAZIONETRASPARENTE-GA_1.0 Versione 1.0 Data edizione 03.05.2013 1 Albo Pretorio On Line TABELLA DELLE VERSIONI Versione Data Paragrafo Descrizione

Dettagli

I file di dati. Unità didattica D1 1

I file di dati. Unità didattica D1 1 I file di dati Unità didattica D1 1 1) I file sequenziali Utili per la memorizzazione di informazioni testuali Si tratta di strutture organizzate per righe e non per record Non sono adatte per grandi quantità

Dettagli

Cancellare la cache e i cookie dal browser

Cancellare la cache e i cookie dal browser Cancellare la cache e i cookie dal browser Ultima revisione: Ottobre 2014 Cancellare la cache e i cookie dal tuo browser può aiutareti a risolvere una varietà di problemi che potresti riscontrare. I cookie,

Dettagli

MANUALE PER L UTILIZZO DELLA FUNZIONE EVENTI Rel.1.2 del 29 gennaio 2004

MANUALE PER L UTILIZZO DELLA FUNZIONE EVENTI Rel.1.2 del 29 gennaio 2004 MANUALE PER L UTILIZZO DELLA FUNZIONE EVENTI Rel.1.2 del 29 gennaio 2004 PRELIMINARE - Avete digitato la password che Vi è stata attribuita e siete entrati nell area riservata all AMMINISTRAZIONE del Vostro

Dettagli

connessioni tra i singoli elementi Hanno caratteristiche diverse e sono presentati con modalità diverse Tali relazioni vengono rappresentate QUINDI

connessioni tra i singoli elementi Hanno caratteristiche diverse e sono presentati con modalità diverse Tali relazioni vengono rappresentate QUINDI Documenti su Internet LINGUAGGI DI MARKUP Internet permette (tra l altro) di accedere a documenti remoti In generale, i documenti acceduti via Internet sono multimediali, cioè che possono essere riprodotti

Dettagli

ESERCITAZIONE Semplice creazione di un sito Internet

ESERCITAZIONE Semplice creazione di un sito Internet ESERCITAZIONE Semplice creazione di un sito Internet Sistemi e Tecnologie Informatiche - Prof. Gregorio Cosentino 1 Internet Una rete globale che connette milioni di computer in tutto il mondo, anarchica

Dettagli

Creare un sito Multilingua con Joomla 1.6

Creare un sito Multilingua con Joomla 1.6 Creare un sito Multilingua con Joomla 1.6 Istruzioni Vai a: navigazione, ricerca Testo originale: http://docs.joomla.org/language_switcher_tutorial_for_joomla_1.6 Questa guida è valida sia per Joomla 1.6

Dettagli

Guida all uso delle Web View su ios

Guida all uso delle Web View su ios Guida all uso delle Web View su ios Tesina per il corso di Programmazione di Sistemi Mobile Lorenzo Pellegrini Matricola: 0000653299 Cosa sono le Web View? Le web view sono componenti grafiche, integrabili

Dettagli

ShellPictionary. Sistema operativo Microsoft Windows 98 o superiore Libreria SAPI e voce sintetica Casse audio

ShellPictionary. Sistema operativo Microsoft Windows 98 o superiore Libreria SAPI e voce sintetica Casse audio Progetto Software to Fit - ShellPictionary Pagina 1 Presentazione ShellPictionary Il progetto è finalizzato alla realizzazione di una interfaccia per disabili motori verso l applicativo Pictionary. Pictionary

Dettagli

PULSANTI E PAGINE Sommario PULSANTI E PAGINE...1

PULSANTI E PAGINE Sommario PULSANTI E PAGINE...1 Pagina 1 Sommario...1 Apertura...2 Visualizzazioni...2 Elenco...2 Testo sul pulsante e altre informazioni...3 Comandi...3 Informazioni...4 Flow chart...5 Comandi...6 Pulsanti Principali e Pulsanti Dipendenti...6

Dettagli

Introduzione allo sviluppo Web. Studium Generale, a.a. 2013-2014, II semestre

Introduzione allo sviluppo Web. Studium Generale, a.a. 2013-2014, II semestre Introduzione allo sviluppo Web Studium Generale, a.a. 2013-2014, II semestre 1 Contatto Daniel Graziotin daniel.graziotin@unibz.it http://ineed.coffee/teaching/ introduzione-allo-sviluppo-web 2 Esame Esame

Dettagli

Istruzioni per la configurazione di Internet Explorer

Istruzioni per la configurazione di Internet Explorer Istruzioni per la configurazione di Internet Explorer Introduzione 1. Indice 1. Indice... 1 2. Introduzione... 2 3. Rimozione del blocco popup... 2 3.1 Blocco popup di Internet Explorer... 2 3.2 Blocco

Dettagli

VADEMECUM PER UNA STRATEGIA SEO VINCENTE

VADEMECUM PER UNA STRATEGIA SEO VINCENTE F a b r i z i o C a r u s o VADEMECUM PER UNA STRATEGIA SEO VINCENTE L esperienza maturata e i risultati raggiunti nel corso degli anni attraverso l insegnamento e la consulenza SEO mi hanno indotto a

Dettagli

Internet Explorer 6. Gestione cookie

Internet Explorer 6. Gestione cookie Internet Explorer 6 Internet Explorer 6 è una raccolta di tecnologie di base di Windows XP Home Edition e Windows XP Professional che garantisce riservatezza, affidabilità, flessibilità e libertà durante

Dettagli

Guida all'utilizzo della Piattaforma di E-Learning Corsi on-line. D.Lgs. 81/2008 denominato TESTO UNICO per la Sicurezza nei Luoghi di Lavoro

Guida all'utilizzo della Piattaforma di E-Learning Corsi on-line. D.Lgs. 81/2008 denominato TESTO UNICO per la Sicurezza nei Luoghi di Lavoro Guida all'utilizzo della Piattaforma di E-Learning Corsi on-line D.Lgs. 81/2008 denominato TESTO UNICO per la Sicurezza nei Luoghi di Lavoro www.otj.it MANUALE DEL CORSISTA INTRODUZIONE L'utilizzo di

Dettagli

MAUALE PIATTAFORMA MOODLE

MAUALE PIATTAFORMA MOODLE MAUALE PIATTAFORMA MOODLE La piattaforma moodle ci permette di salvare e creare contenuti didattici. Dal menù principale è possibile: inviare dei messaggi agli altri docenti che utilizzano la piattaforma:

Dettagli

PORTALE CLIENTI Manuale utente

PORTALE CLIENTI Manuale utente PORTALE CLIENTI Manuale utente Sommario 1. Accesso al portale 2. Home Page e login 3. Area riservata 4. Pagina dettaglio procedura 5. Pagina dettaglio programma 6. Installazione dei programmi Sistema operativo

Dettagli

Manuale servizio Webmail. Introduzione alle Webmail...2 Webmail classica (SquirrelMail)...3 Webmail nuova (RoundCube)...8

Manuale servizio Webmail. Introduzione alle Webmail...2 Webmail classica (SquirrelMail)...3 Webmail nuova (RoundCube)...8 Manuale servizio Webmail Introduzione alle Webmail...2 Webmail classica (SquirrelMail)...3 Webmail nuova (RoundCube)...8 Introduzione alle Webmail Una Webmail è un sistema molto comodo per consultare la

Dettagli

Il Sito web www.agordino.net, usa i cookie per raccogliere informazioni utili a

Il Sito web www.agordino.net, usa i cookie per raccogliere informazioni utili a Cookie Policy INFORMATIVA ESTESA SULL USO DEI COOKIE www.agordino.net Il Sito web www.agordino.net, usa i cookie per raccogliere informazioni utili a migliorare la tua esperienza online. La presente policy

Dettagli

Configurare Outlook Express

Configurare Outlook Express Configurare Outlook Express Le funzioni Outlook Express è il programma fornito da Microsoft per la gestione della posta elettronica e dei newsgroup. Esso consente: Gestione di account multipli Lettura

Dettagli

SITO DI ZONA WWW.AGESCIANCONA.ORG

SITO DI ZONA WWW.AGESCIANCONA.ORG SITO DI ZONA WWW.AGESCIANCONA.ORG Questa è come si presenta la Home page del sito. in questo documento vengono descritte le varie sezioni e come utilizzare alcune funzionalità Pagina 1 di 19 Menù principale

Dettagli

Banca dati Professioniste in rete per le P.A. Guida all uso per le Professioniste

Banca dati Professioniste in rete per le P.A. Guida all uso per le Professioniste Banca dati Professioniste in rete per le P.A. Guida all uso per le Professioniste versione 2.1 24/09/2015 aggiornamenti: 23-set-2015; 24-set-2015 Autore: Francesco Brunetta (http://www.francescobrunetta.it/)

Dettagli

POSTECERT POSTEMAIL CERTIFICATA GUIDA ALL USO DELLA WEBMAIL

POSTECERT POSTEMAIL CERTIFICATA GUIDA ALL USO DELLA WEBMAIL POSTECERT POSTEMAIL CERTIFICATA GUIDA ALL USO DELLA WEBMAIL Sommario Pagina di accesso... 3 Posta in arrivo... 4 Area Posta... 5 Area Contatti... 8 Area Opzioni... 10 Area Cartelle... 13 La Postemail Certificata

Dettagli

Questo sito internet fa uso di cookie, al fine di rendere i propri servizi il più possibile efficienti e semplici da utilizzare.

Questo sito internet fa uso di cookie, al fine di rendere i propri servizi il più possibile efficienti e semplici da utilizzare. INFORMATIVA ESTESA SUI COOKIE Questo sito internet fa uso di cookie, al fine di rendere i propri servizi il più possibile efficienti e semplici da utilizzare. La presente informativa è redatta in ottemperanza

Dettagli

Gestione del sito web con Drupal

Gestione del sito web con Drupal Gestione del sito web con Drupal Legenda 1. Accesso al backend 2. Menù principale 3. Editing diretto delle singole pagine 1. Testi 2. Immagini 3. SEO (Search Engine Optimization) 4. Dashboard 5. Gestire

Dettagli

Che cos'è un modulo? pulsanti di opzione caselle di controllo caselle di riepilogo

Che cos'è un modulo? pulsanti di opzione caselle di controllo caselle di riepilogo Creazione di moduli Creazione di moduli Che cos'è un modulo? Un elenco di domande accompagnato da aree in cui è possibile scrivere le risposte, selezionare opzioni. Il modulo di un sito Web viene utilizzato

Dettagli

Guida di Pro Spam Remove

Guida di Pro Spam Remove Guida di Pro Spam Remove 1) SOMMARIO 2) ISTRUZIONI DI BASE 3) CONFIGURAZIONE 4) FILTRO 5) ARCHIVIO E-MAIL 6) NOTE CONCLUSIVE 1) SOMMARIO Pro Spam Remove è un software che si occupa di bloccare tutto lo

Dettagli

VERSIONE 5.1/5.2 GUIDA RAPIDA PER WEBACCESS HTML 3

VERSIONE 5.1/5.2 GUIDA RAPIDA PER WEBACCESS HTML 3 VERSIONE 5.1/5.2 GUIDA RAPIDA PER WEBACCESS HTML 3 TM GUIDA RAPIDA DI GROUPWISE 5.2 GroupWise WebAccess consente di accedere alla posta e al calendario con qualsiasi browser Web compatibile HTML 3. Invio

Dettagli

GUIDA ALL USO DELL AREA RISERVATA

GUIDA ALL USO DELL AREA RISERVATA GUA ALL USO DELL AREA RISERVATA Sommario PREMESSA... 2 1 Come accedere all Area Riservata... 3 2 del Pannello di gestione del sito web... 4 3 delle sezioni... 7 3.1 - Gestione Sito... 7 3.1.1 - AreaRiservata...

Dettagli

Cosa succede quando si naviga

Cosa succede quando si naviga Programma corso Introduzione (spicciola) di architettura del web Creazione del sito e primi passi Sito statico o blog? Inserimento ed aggiornamento contenuti Personalizzazione grafica Iscrizione ai motori

Dettagli

MANUALE D USO DELLA PIATTAFORMA ITCMS

MANUALE D USO DELLA PIATTAFORMA ITCMS MANUALE D USO DELLA PIATTAFORMA ITCMS MANULE D USO INDICE 1. INTRODUZIONE... 2 2. ACCEDERE ALLA GESTIONE DEI CONTENUTI... 3 3. GESTIONE DEI CONTENUTI DI TIPO TESTUALE... 4 3.1 Editor... 4 3.2 Import di

Dettagli

Manuale Servizio NEWSLETTER

Manuale Servizio NEWSLETTER Manuale Servizio NEWSLETTER Manuale Utente Newsletter MMU-05 REDAZIONE Revisione Redatto da Funzione Data Approvato da Funzione Data 00 Silvia Governatori Analista funzionale 28/01/2011 Lorenzo Bonelli

Dettagli

Comandi di Internet Explorer ausiliari e di personalizzazioni Comando Comandopulsante scelta rapida

Comandi di Internet Explorer ausiliari e di personalizzazioni Comando Comandopulsante scelta rapida 2.3 Ausili alla navigazione e personalizzazioni 2.3.1 I comandi Alcuni ausili alla navigazione sono forniti da strumenti quali "Cerca", Preferiti", "Cronologia". Nella tabella si mostrano i comandi per

Dettagli

GUIDA UTENTE WEB PROFILES

GUIDA UTENTE WEB PROFILES GUIDA UTENTE WEB PROFILES GUIDA UTENTE WEB PROFILES... 1 Installazione... 2 Primo avvio e registrazione... 5 Utilizzo di web profiles... 6 Gestione dei profili... 8 Fasce orarie... 13 Log siti... 14 Pag.

Dettagli

Come modificare la propria Home Page e gli elementi correlati

Come modificare la propria Home Page e gli elementi correlati Come modificare la propria Home Page e gli elementi correlati Versione del documento: 3.0 Ultimo aggiornamento: 2006-09-15 Riferimento: webmaster (webmaster.economia@unimi.it) La modifica delle informazioni

Dettagli

Bookenberg non è un softwere ma una piattaforma online, quindi:

Bookenberg non è un softwere ma una piattaforma online, quindi: Tutorial le basi Bookenberg non è un softwere ma una piattaforma online, quindi: - non devi installare nulla sul tuo computer - vai sul sito, ti registri e sei operativo Nella sezione LIBRO usa l icona

Dettagli

Esempio Cookie Policy

Esempio Cookie Policy Esempio Cookie Policy INFORMATIVA ESTESA SULL USO DEI COOKIE Uso dei cookie cascinaladoria.it o il Sito utilizza i Cookie per rendere i propri servizi semplici e efficienti per l utenza che visiona le

Dettagli

BREVE GUIDA PER I TUTOR - CORSI DI FORMAZIONE D.M. 821/13 Login

BREVE GUIDA PER I TUTOR - CORSI DI FORMAZIONE D.M. 821/13 Login BREVE GUIDA PER I TUTOR - CORSI DI FORMAZIONE D.M. 821/13 Login 1. accedere alla piattaforma : http://www.istitutoleonori.it/moodle/ 2. cliccare sul link "Login" (in alto a destra) 3. inserire le credenziali

Dettagli

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css. Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,

Dettagli

L archiviazione della posta elettronica può aiutarci a recuperare spazio senza costringerci a cestinare documenti importanti

L archiviazione della posta elettronica può aiutarci a recuperare spazio senza costringerci a cestinare documenti importanti L archiviazione della posta elettronica può aiutarci a recuperare spazio senza costringerci a cestinare documenti importanti Potete immaginare un ufficio senza archivio? Sarebbe un inferno. Dover rintracciare

Dettagli

Manuale Utente MyFastPage

Manuale Utente MyFastPage Manuale MyFastPage Utente Elenco dei contenuti 1. Cosa è MyVoice Home?... 4 1.1. Introduzione... 5 2. Utilizzo del servizio... 6 2.1. Accesso... 6 2.2. Disconnessione... 7 2.3. Configurazione base Profilo

Dettagli

Sistema Gestionale FIPRO. Dott. Enea Belloni Ing. Andrea Montagnani

Sistema Gestionale FIPRO. Dott. Enea Belloni Ing. Andrea Montagnani Sistema Gestionale FIPRO Dott. Enea Belloni Ing. Andrea Montagnani Firenze, 29 Aprile 2010 Sommario della presentazione Il sistema informatico per la gestione progetti FIPRO L utente presentatore: diritti

Dettagli

Il sofware è inoltre completato da una funzione di calendario che consente di impostare in modo semplice ed intuitivo i vari appuntamenti.

Il sofware è inoltre completato da una funzione di calendario che consente di impostare in modo semplice ed intuitivo i vari appuntamenti. SH.MedicalStudio Presentazione SH.MedicalStudio è un software per la gestione degli studi medici. Consente di gestire un archivio Pazienti, con tutti i documenti necessari ad avere un quadro clinico completo

Dettagli

SWISSCAST. Descrizione della modalità di esportazione di documenti in pagine HTML

SWISSCAST. Descrizione della modalità di esportazione di documenti in pagine HTML SWISSCAST Descrizione della modalità di esportazione di documenti in pagine HTML Versione 1.2 del 22 dicembre 2009 1 Scopo del documento Questo documento descrive come esportare documenti pubblicati sul

Dettagli

1. ACCESSO AL PORTALE easytao

1. ACCESSO AL PORTALE easytao 1. ACCESSO AL PORTALE easytao Per accedere alla propria pagina personale e visualizzare la prescrizione terapeutica si deve possedere: - un collegamento ad internet - un browser (si consiglia l utilizzo

Dettagli