Presentazione dell'utilizzo della tecnologia ASP.NET all'interno del progetto Garden of Things

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Presentazione dell'utilizzo della tecnologia ASP.NET all'interno del progetto Garden of Things"

Transcript

1 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 1-16 Documentazione MasterPage Presentazione dell'utilizzo della tecnologia ASP.NET all'interno del progetto Garden of Things

2 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 2-16 Sommario: Indice generale Sommario:...2 Prefazione:...3 Cosa significa ASP.NET? A cosa serve?...3 Il Web Server Microsoft, IIS...3 Cos'è la MasterPage?...3 Perché si usa?...3 Attributo runat, a cosa serve?...3 Sguardo generale:...4 Struttura...4 Sfondo...4 Elementi costitutivi...5 Header del file...6 Body...7 Menu...9 Tecniche di visualizzazione...9 Struttura del menu...10 Footer...14 Cos'è il Footer?...14 A cosa serve?...14 Struttura del Footer...14 Responsive Web Design...15 Cosa vuol dire?...15 Perché è importante?...15 Nel nostro caso, perché è particolarmente utile?...15 Quali problematiche comporta?...15 Come è possibile realizzarlo?...15 Il RWD nel progetto Garden...16

3 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 3-16 Prefazione: Cosa significa ASP.NET? A cosa serve? È un insieme di tecnologie commercializzate da Microsoft per lo sviluppo di Web Application e Web Service che è possibile eseguire su un IIS. La sigla sta per Active Server Pages, il.net invece significa che è possibile compilare le applicazioni con un qualsiasi linguaggio supportato dal Framework.NET eseguendole sul CLR (Common Language Runtime). I paradigmi di programmazione da usare sono numerossimi, infatti, i controlli utilizzati, spesso e volentieri simili a quelli già proposti in Windows, possono essere gestori o scatenatori di eventi o semplicemente utilizzati per ricaricare la pagina per sfruttare i metodi POST e GET. È possibile programmare con una vastissima gamma di linguaggi, ma in questo caso è stato scelto C#, già studiato a scuola e linguaggio di punta di Microsoft. Il Web Server Microsoft, IIS IIS (Internet Information Service) è l'applicativo server web che permette l'esecuzione delle applicazioni, come il comune rivale Apache. Il vantaggio è che è estremamente ottimizzato e precompila le pagine da servire al client, rendendo estremamente veloce la loro esecuzione. Cos'è la MasterPage? È una pagina propria di ASP.NET che si comporta come un contenitore per tutte le altre che compongono la web application. Al suo interno contiene due elementi che hanno il compito di inserire all'interno di essa il contenuto della pagina che si intende visualizzare. Perché si usa? Perchè permette di separare il concetto di impaginazione (cioè il layout della pagina in generale, la MasterPage ) e il contenuto (le diverse pagine che andranno a comporre la web application). Attributo runat, a cosa serve? Quando il valore è runat="server", questo attributo specifica che il codice contenuto nell'elemento è eseguibile nel server e non nel client. Questo è obbligatorio per i blocchi di codice lato server.

4 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 4-16 Sguardo generale: Struttura La MasterPage è strutturata in divisioni ognuna con un proprio ruolo. In alto si trova la barra dei menu, che permettono di navigare all'interno della web application. Appena sotto si trova l'immagine di presentazione del sito, con annesso il logo del progetto. Al centro della pagina si trova il segnaposto per il contenuto delle pagine come accennato in prefazione. Infine in fondo alla pagina si trova il footer. Sfondo Lo sfondo è una fotografia scattata da uno studente che occupa tutta la pagina. <<<completare>>>

5 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 5-16 Elementi costitutivi Si vuole adesso approfondire la documentazione con riferimenti specifici ai singoli elementi, offrendo inizialmente la struttura gerarchica della pagina. Per ogni elemento della pagina si analizzeranno il ruolo che assume nell'insieme e i diversi stili di formattazione applicati. Si propone ora la struttura della pagina in linguaggio html solamente con i tag relativi agli elementi più significativi, senza entrare per adesso nello specifico di ognuno, dato che verranno analizzati più avanti con una sezione per ognuno a loro dedicata. <head runat="server"> </head> <body> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> <form id="form1" runat="server"> <div id="menuparent"> <div id="menu"> <div id="all"> <div id="main"> <div id="header"> id="contentplaceholder1" runat="server"> </body> </form> <div id="contentparent"> <div id="footparent"> <div id="foot"> <div id="content"> <asp:contentplaceholder </asp:contentplaceholder>

6 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 6-16 Header del file <head runat="server"> In questa zona della pagina vengono elencati tutti i link esterni alla pagina e al sito come fogli di stile, font esterni e script (codice da interpretare nel momento in cui la risorsa viene richiesta). Tutte le regole di stile verranno analizzate assieme agli elementi ai quali sono applicate. <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1"/> Queste righe servono per dare informazioni aggiuntive al browser o al server. In questo caso le informazioni passate sono la codifica del testo utilizzata (utf-8) e le scale di zoom da applicare alla pagina, all'inizio la scala è 1 e al massimo può essere 1, quindi non è possibile zoommare in alcun senso. <link rel="stylesheet" href="master.css" type="text/css" /> Foglio di stile contenente le regole da applicare agli elementi della pagina che non sono il menù. <title><%: Page.Title %> - Giardino ITT</title> All'interno dei tag title si inserisce il titolo della pagina, ma dato che si tratta di un sito dinamico si vuole visualizzare un titolo diverso per ogni pagina a seconda del contenuto. Ciò è realizzabile tramite VBScript. Basta la stringa che è racchiusa tra le parentesi angolari per adattare il titolo a seconda della pagina richiesta dinamicamente senza preoccuparci di uniformare le stringhe: lo script si preoccupa di assemblare il titolo della pagina, esempio Dati Attuali, con - Giardino ITT, generando un'unica stringa Dati Attuali Giardino ITT. <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> Siamo arrivati ad un aspetto importantissimo della potenza della tecnologia ASP.NET con i tag ContentPlaceHolder: i segnaposto per porzioni di codice scritte sulla pagina che vogliamo visualizzare. In questo caso l'attributo id settato a head indica che in quella posizione della pagina deve essere inserito il codice contenuto nel tag <asp:content ContentPlaceHolderID= head >. Il vantaggio di averlo inserito appena sopra al tag </head> ci permette di sovrascrivere altri possibili metatag, script e regole di stile che si applicheranno esclusivamente alla pagina in questione. </head> Chiusura dell'elemento head, fine delle informazioni aggiuntive e inizio della pagina che è effettivamente visualizzata dall'utente.

7 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 7-16 Body <body> In questa zona della pagina viene definita la struttura e il contenuto della pagina, non come viene visualizzata, che viene invece definito con i fogli di stile. È stato definito un semplice colore di sfondo, come accennato nello sguardo generale, più precisamente il colore #46a33f, equivalente a <form id="form1" runat="server"> Primo elemento che racchiude anche tutti gli altri è un elemento form che viene usato per identificare la web form che usiamo per interpretare gli script all'interno della pagina, che si vuole ricordare ancora una volta che conterrà tutte le altre, quindi permette di sfruttare le potenzialità degli script in tutte le pagine, non vengono perciò applicati stili particolari. <div id="menuparent"> <div id="menu"> <ul id="nav"> </ul> Divisioni contenenti si trova la struttura del menu, qui non presente perché analizzata in seguito. Si vuol far notare soltanto che, sia per il menu che contiene la barra di navigazione, che per la stessa barra, non vengono utilizzati i tag semantici specifici propri di HTML5 (<menu> e <nav>) per problemi di retro compatibilità con browser obsoleti non aggiornati. <div id="all"> Divisione che ospita tutti i contenuti, eccetto menu e footer, utile per definire stili che devono condividere anche tutti gli elementi. In questo caso vengono definite l'altezza e la larghezza della pagina, entrambe al 100% dell'altezza e della larghezza possibili. Le istruzioni da applicare necessarie sono: width: 100%; e height: 100%; <div id="main"> All'interno di questa divisione invece vengono inseriti tutti gli elementi che non sono né menu né footer. Viene definito che la larghezza massima del suo contenuto deve essere di 1024px, la larghezza minima deve essere di 400px e deve essere alta al 100%. Tutto ciò per fare in modo che rimangano dei bordi ai lati per questione di estetica e funzionalità dell'interfaccia dell'applicazione. Le regole applicate sono: height: 100%; max-width: 1024px; min-width: 400px; <div id="header"> In questo elemento è contenuto, come si evince dall'id, l'header della pagina, cioè immagine

8 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 8-16 significativa e logo del progetto. Non vi sono applicate regole particolari tranne quella per cui sotto ad una certa risoluzione dello schermo del dispositivo esso viene nascosto, perché risulterebbe di intralcio alla corretta visualizzazione dei contenuti più importanti come i dati riguardanti la serra. <div id="contentparent"> <div id="content"> Questa sovrapposizione di divisioni permette di realizzare uno sfondo semitrasparente senza che i contenuti siano opachi. L'effetto è realizzato con le regole background: rgba(255,255,255,0.8) nel contentparent e opacity:1 nel figlio. <asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder> Ecco un altro elemento ContentPlaceHolder, come quello visto in precedenza nel head del file, qui. La differenza è che questo è il segnaposto per il contenuto visibile della nostra pagina assemblata, MasterPage + pagina richiesta dall'utente. Chiusura delle divisioni per i contenuti <div id="footparent"> <div id="foot"> Divisioni contenenti il footer, la prima per posizionarlo e la seconda per centrarlo, ma l'argomento verrà trattato meglio nell'apposita sezione. </form> </body> </html> Chiusura webform e pagina.

9 Autori: E. Mazzoni, D. Tentoni, G. Tumedei 9-16 Menu Affrontiamo ora il delicato tema del menù che ha coinvolto i nostri periti in macchinose argomentazioni sulla migliore tecnica di visualizzazione e costruzione del menù per la web application. Tecniche di visualizzazione Si è discusso molto per decidere se utilizzare blocchi, alberi di navigazione o menu a tendina. Di seguito saranno analizzati nel dettaglio i pregi e difetti di questi elementi. Blocchi Con questa tecnica si ottengono dei elementi fissi nella pagina, senza effetti particolari se non qualche animazione, per cui ci è sembrata una scelta spartana da applicare ad un menù che deve essere user-friendly per un utente che non deve essere sommerso da effetti grafici, applicabile al nostro sito dato che sarà utilizzato da persone senza particolari esigenze che hanno bisogno di semplicità. Albero di navigazione Con questa tecnica era necessario lasciare dello spazio laterale adibito ad una rappresentazione ad albero delle pagine del sito, organizzata per argomenti e categorie. Ciò occupa spazio e per di più è sconsigliato dai maggiori web designer perché poco adattabile sui device con diverse risoluzioni. Riguardo l'argomento se ne tratterà meglio nella sezione sul responsive design. Tendina (con scorrimento a scomparsa) Questa è la tecnica che si è deciso di utilizzare. La tendina a scomparsa è un buon mix di blocchi, perché mostra solo degli elementi che richiamano alla sezione del sito che si intende navigare ed è molto adattabile al cambiare della risoluzione del device, sempre mantenendo la completezza dell'albero di navigazione. Passando con il mouse sopra alle voci a blocchi scende una tendina con tutte le voci navigabili tramite quella particolare sezione del menu.

10 Autori: E. Mazzoni, D. Tentoni, G. Tumedei Struttura del menu Ora verrà analizzata la struttura del menu proponendo inizialmente uno sguardo generale su tutto il codice e successivamente elemento per elemento. <div id="menuparent"> <div id="menu"> <ul id="nav"> <li> </li> <li> <ul> </ul> </li> <li> <ul> </ul> </li> <li> <ul> </ul> </li> </ul> <li></li>... <li></li> <li></li>... <li></li> <li></li>... <li></li>

11 Autori: E. Mazzoni, D. Tentoni, G. Tumedei <div id="menuparent"> Questa prima divisione serve per dare al nostro menu una barra lunga tutta la pagina di colore bianco come sfondo. Le regole applicate sono: width: 100%; height: 25px; background-color: white; position: fixed; <div id="menu"> Questa invece serve per impostare la larghezza massima e minima ai contenuti del menu, per allinearli quindi al resto della pagina con larghezza massima e minima: max-width: 1024px; minwidth: 400px; <ul id="nav"> Ecco l'inizio della struttura vera e propria. Un elenco di elementi non ordinato. Ciò ci permette di aggiungere e rimuovere voci dal menu in maniera semplice e pulita senza complicate operazioni su molti codici, basta aggiungere o togliere un elemento dall'elenco. Con le regole di stile viene semplicemente settato un font così da rendere leggibili i caratteri: font: 70%/1.5 Verdena,Tahoma,sans-serif; Sotto di essa si trova la struttura gerarchica basata su un annidamento di elenchi puntati. Gli elementi del primo vengono visualizzati sulla barra, mentre quelli del secondo livello vengono visualizzati solamente se se passa con il mouse sopra alla voce del menu ad essi associata. <a href="default.aspx"><strong>giardino ITT</strong></a> Primo elemento, non contiene al suo interno un sotto elenco puntato perché il suo compito è solamente quello di riportare il visitatore, ovunque esso si trovi, alla pagina iniziale. <a href="actual_data.aspx"><strong>dati Attuali Serra</strong></a> Questo secondo elemento di primo livello, quindi visualizzato, ci rimanda ad una pagina in cui sono elencate tutte le pagine del sito in cui è possibile trovare dati relativi alla situazione attuale della serra. <a href="#">di tutte le Grandezze e di tutte le centraline</a> Questo elemento, come altri che analizzeremo nei prossimi paragrafi, è un elemento di secondo livello sottostante alla voce Dati Attuali Serra. Permette di visualizzare la pagina con tutti i dati relativi ad ogni Grandezza e ad ogni Centralina in una pratica tabella. <a href="#">di tutte le Grandezze di una specificata centralina</a> Questo elemento permette di visualizzare la pagina con i dati attuali di tutte le Grandezze di una specifica centralina definita dall'utente. <a href="#">valori attuali per centralina e grandezza</a> Questo elemento permette di visualizzare i valori attuali di una centralina e di una grandezza scelta dall'utente. <a href="page2.aspx">ultimi valori per una centralina</a>

12 Autori: E. Mazzoni, D. Tentoni, G. Tumedei Questo elemento permette di visualizzare gli ultimi valori raccolti di una Centralina scelta dall'utente. <a href="#">ultimi valori per una grandezza</a> Questo elemento permette di visualizzare gli ultimi valori raccolti di una Grandezza scelta dall'utente. <a href="#">valori giornalieri per una grandezza e una centralina</a> Questo elemento permette di visualizzare gli ultimi valori raccolti di una Centralina e di una Grandezza scelta dall'utente. <a href="summarized_data.aspx"><strong>dati Riepilogativi Serra</strong></a> Questo elemento di primo livello permette di visualizzare una pagina in cui sono elencate tutte le sezioni del sito in cui è possible trovare dati medi di un certo periodo che può variare da una giornata ad un anno. <a href="#">riepilogo giornaliero</a> Questo elemento permette di visualizzare i valori medi di una giornata scelta dall'utente. <a href="#">riepilogo mensile</a> Questo elemento permette di visualizzare i valori medi di un mese scelto dall'utente. <a href="#">valori orari</a> Questo elemento permette di visualizzare i valori medi di un'ora scelta dall'utente. <a href="#">valori significativi della settimana</a> Questo elemento permette di visualizzare i valori significativi di una settimana scelta dall'utente. <a href="#">riepilogo settimanale</a> Questo elemento permette di visualizzare i valori medi di una settimana scelta dall'utente. <a href="#">riepilogo annuale</a> Questo elemento permette di visualizzare i valori medi di un anno scelto dall'utente. <a href="#"><strong>informazioni</strong></a> Questo elemento di primo livello permette di visualizzare una schermata da cui è possibile accedere a informazioni riguardanti il progetto e servizi aggiuntivi. <a href="#">progetto</a> Questo elemento permette di visualizzare alcune informazioni generali riguardo il progetto. <a href="#">galleria</a> Questo elemento permette di visualizzare una galleria di immagini <a href="#">contatti</a> Questo elemento permette di visualizzare una pagina con recapiti telefonici e da contattare

13 Autori: E. Mazzoni, D. Tentoni, G. Tumedei quando si verificano anomalie o guasti oppure per ricevere assistenza e informazioni aggiuntive. <link rel="stylesheet" type="text/css" href="masterstyle/menu-dd.css"/> <script type="text/javascript" src="masterstyle/jquery pack.js"></script> <script type="text/javascript" src="masterstyle/jquery.hoverintent.minified.js"></script> <script type="text/javascript" src="masterstyle/jquery-ddi2.js"></script> Questi riferimenti a fogli di stile e script sono inseriti all'interno dell'elemento head della pagina e contengono tutte le regole di visualizzazione e gli script utilizzati per il menù. Verranno analizzati quando saranno descritti gli elementi su cui sono applicati. Il contenuto di jquery pack.js e di jquery.hoverintent.minified.js sono i framework utilizzati nello script contenuto in jquery-ddi2.js. Lo script è: $(function(){ $("#nav>li").hoverintent( }); function(){$("ul",this).slidedown("slow");}, function(){$("ul",this).css({left:"-1px"}).slideup('fast')}); Senza entrare nel dettaglio del codice, si può leggere che nella prima riga di codice si definisce una funzione, che al passaggio del mouse sopra ad un elemento li, elemento del nostro menu, lo fa scorrere in basso ad una velocità moderata per poi farlo scorrere in alto ad una velocità repentina fino a scomparire, quando il mouse non si trova più sull'elenco sceso o sull'elemento del menu.

14 Autori: E. Mazzoni, D. Tentoni, G. Tumedei Footer Cos'è il Footer? Il Footer è un elemento presente in fondo alla pagina del nostro sito, nel nostro caso, essendo in fondo al codice della Pagina Master, esso verrà renderizzato in ogni sezione dell'applicazione. A cosa serve? Serve per fornire all'utente che visita il sito informazioni utili riguardo gli ultimi aggiornamenti e i creatori del servizio. Nel nostro caso, vengono forniti l'anno di pubblicazione e l'anno attuale di servizio, per dare all'utente una dimostrazione dell'operato svolto dalla serra. Viene inoltre fornito i nomi delle scuole collaboratrici al progetto con recapiti, più qualche altra informazione legale. Struttura del Footer <div id="footparent"> <div id="foot"> <strong><%: DateTime.Now.Year %> - Giardino ITT</strong> Nella prima divisione viene impostata la larghezza della barra del footer in modo da essere bianca e lunga tutta la pagina, come per il menu. Viene inoltre impostata una posizione fissa, in tal modo non si muove allo scorrere della pagina. Le regole applicate sono le seguenti: width:100%; display: table; background-color: white; position: fixed; left: 0; bottom: 0; Nella seconda divisione viene impostata una larghezza massima ai contenuti, ancora una volta analogamente al menu. Le regole di stile applicate sono: width: 100%; height: 25px; line-height: 25px; vertical-align: middle; text-align: center; font: 70%/1.5 Verdena,Tahoma,sans-serif; display: table-cell;

15 Autori: E. Mazzoni, D. Tentoni, G. Tumedei Responsive Web Design Cosa vuol dire? Il Responsive Web Design indica una tecnica per realizzare siti in grado di adattarsi graficamente alla risoluzione del dispositivo sul quale vengono visualizzati. Perché è importante? Perché bisogna guardare al futuro, dove le pagine web verranno visualizzate maggiormente su dispositivi mobili che talvolta hanno risoluzioni ridotte e risorse hardware inferiori, senza contare il noto problema italiano della disponibilità della rete, inoltre i dispositivi utilizzati da persone con difficoltà fisiche avranno delle risorse diverse, ad esempio densità di punti inferiore per permettere una maggior precisione in fase di acquisizione di input. Nel nostro caso, perché è particolarmente utile? Perché il personale addetto alla serra può avere necessità di consultare l'applicazione anche fuori casa o fuori dall'ambiente di lavoro. Inoltre, anche all'interno della serra stessa, se si ha bisogno di lavorare e muoversi spesso, ad esempio per controllare il colore delle foglie delle piante, portarsi appresso un computer potrebbe essere faticoso. Quali problematiche comporta? Quando la risoluzione è inferiore, ovviamente non si potrà continuare a visualizzare gli stessi contenuti come su un desktop. Principalmente deve cambiare la dimensione dell'immagine di sfondo e la dimensione del font, alcuni elementi non essenziali possono venire nascosti ed altri necessari possono venire ridimensionati e riposizionati. Si deve cercare il più possibile di equilibrare il rapporto leggibilità/contenuti, rendere leggibili il numero maggiore di contenuti. Come è possibile realizzarlo? Vengono usati dei breakpoint, punti di rottura, che ad una certa risoluzione cambiano il layout della pagina: ad una risoluzione inferiore a 1024px dispone gli elementi in un modo, ad una risoluzione inferiore a 800px li dispone in un altro.

16 Autori: E. Mazzoni, D. Tentoni, G. Tumedei Il RWD nel progetto Garden

Presentazione dell'utilizzo della tecnologia ASP.NET all'interno del progetto Garden of Things. Autori: E. Mazzoni, D. Tentoni, G.

Presentazione dell'utilizzo della tecnologia ASP.NET all'interno del progetto Garden of Things. Autori: E. Mazzoni, D. Tentoni, G. 1-16 Documentazione MasterPage Presentazione dell'utilizzo della tecnologia ASP.NET all'interno del progetto Garden of Things 2-16 Sommario: Indice generale Sommario:...2 Introduzione:...3 Cosa significa

Dettagli

DOCUMENTAZIONE PROGETTO GARDEN OF THINGS - PARTE WEB

DOCUMENTAZIONE PROGETTO GARDEN OF THINGS - PARTE WEB Alunno: Tumedei Gianni Classe: 5 E DOCUMENTAZIONE PROGETTO GARDEN OF THINGS - PARTE WEB SOMMARIO SOMMARIO... 1 PANORAMICA... 2 Descrizione e contesto del progetto... 2 Ambito del progetto... 2 ANALISI

Dettagli

HTML5. Approfondimento su layout Responsive

HTML5. Approfondimento su layout Responsive Approfondimento su layout Responsive In pasato la risoluzione di riferimento è stata 1024px mentre per il web design la larghezza di riferimento delle pagine è stata di 960px. Attualmente questo non è

Dettagli

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup:

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE

APPROCCIO WEB DESIGN REATTIVO: Prima di tutto costruiamo una BASE ESEMPIO FILE.CSS PER REALIZZARE MODELLO SITO WEB: www.modellinirobotanno80.altervista.org /*questo codice va aggiunto al css principale per far si che tutti i browser possano riconoscere correttamente

Dettagli

Le sezioni logiche di una pagina web

Le sezioni logiche di una pagina web Le sezioni logiche di una pagina web Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello)

Dettagli

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language HTML 05/04/2012 1 Introduzione Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language L'ipertesto è semplicemente un testo che funziona

Dettagli

Il linguaggio HTML - Parte 2

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza

Dettagli

Internet Architettura del www

Internet Architettura del www Internet Architettura del www Internet è una rete di computer. Il World Wide Web è l insieme di servizi che si basa sull architettura di internet. In una rete, ogni nodo (detto host) è connesso a tutti

Dettagli

Il linguaggio HTML - Nozioni di base

Il linguaggio HTML - Nozioni di base Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@dti.unimi.it What is HTML? HTML (HyperText Markup Language)

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

Layout dell area di lavoro

Layout dell area di lavoro Layout dell area di lavoro In Windows, Dreamweaver fornisce un layout che integra tutti gli elementi in una sola finestra. Nell area di lavoro integrata, tutte le finestre e i pannelli sono integrati in

Dettagli

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

Accessibilità del sito web del Comune di Triggiano

Accessibilità del sito web del Comune di Triggiano Accessibilità del sito web del Comune di Triggiano Il Comune di Triggiano, già attento nella precedente versione del suo sito web al tema dell'accessibilità delle informazioni, ha riprogrammato tutte le

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali?

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Riprendiamo il discorso, introducendo la tag Body e iniziando

Dettagli

Il linguaggio HTML - Nozioni di base (2)

Il linguaggio HTML - Nozioni di base (2) Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -

Dettagli

XSL: extensible Stylesheet Language

XSL: extensible Stylesheet Language XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono

Dettagli

Grafica: creare pulsanti con i css.

Grafica: creare pulsanti con i css. Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Dettagli

Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********`

Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********` Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********` Nota importante: Questa lezione e la successiva vanno considerate come un'unica lezione. Affronteremo

Dettagli

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas Fogli di stile CSS Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout,

Dettagli

REQUISITO DI ACCESSIBILITA

REQUISITO DI ACCESSIBILITA ISTITUTO COMPRENSIVO Pascoli - Crispi Via Gran Priorato, 11-98121 Messina Via Monsignor D'Arrigo, 18-98122 Messina Tel/Fax. 09047030 090360037 e-mail: meic87300t@istruzione.it / meee00800r@istruzione.it

Dettagli

Scrivere una applicazione html, css e javascript per Android

Scrivere una applicazione html, css e javascript per Android Scrivere una applicazione html, css e javascript per Android Prima di tuffarsi dentro, vorrei stabilire rapidamente il campo di gioco. In questo capitolo, definisco termini chiave, confrontare i pro e

Dettagli

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict.

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict. Tasti di accesso rapido Al fine di migliorare l'accessibilità del sito sono stati definiti i seguenti tasti di accesso rapido, per attivare le principali funzionalità offerte: [H] = Homepage [R] = Ricerca

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

Elementi di web design (parte I): introduzione all HTML

Elementi di web design (parte I): introduzione all HTML Elementi di web design (parte I): introduzione all HTML Luca Casotti E' necessario conoscere: Filesystem: cos'è un file e cos'è una cartella. Differenze fra tipi di file (sui sistemi windows: le estensioni

Dettagli

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare

Dettagli

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità Maria Grazia Ottaviani informatica, comunicazione e multimedialità Unità digitale 1 Ambiente HTML Introduzione Oltre ai linguaggi di programmazione esistono anche linguaggi detti markup. Sono linguaggi

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle

Dettagli

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine www.comune.udine.it relazione a cura di Fabrizio Chittaro fchittaro@gmail.com

Dettagli

Progettare pagine html. Studium Generale, a.a. 2013-2014, II semestre

Progettare pagine html. Studium Generale, a.a. 2013-2014, II semestre Progettare pagine html Studium Generale, a.a. 2013-2014, II semestre Quanto deve essere grande la nostra pagina? http://www.newfangled.com/optimal_site_width DIMENSIONE PAGINA Secondo le statistiche

Dettagli

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ Pag. 1 di 13 REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ PUBBLICA AMMINISTRAZIONE Comune di Pella (NO) http://www.comune.pella.no.it/ DATA DELLA VALUTAZIONE 09/07/2008 AUTORE DELLA VALUTAZIONE Alessio Mantegna

Dettagli

Consorzio Triveneto S.p.A. Payment Gateway

Consorzio Triveneto S.p.A. Payment Gateway Consorzio Triveneto S.p.A. Payment Gateway Specifiche di Personalizzazione della Hosted Payment Page Release 1.4.0 Data Versione Autore Descrizione 02/10/2003 1.2.0 PM Prima Release, associata al Manuale

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. **********

Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Prime nozioni: Tag e prima pagina, continuazione. Nota bene, al fine di avere anche

Dettagli

Creazione di un elemento grafico SmartArt Crea una nuova diapositiva con layout Titolo e contenuto.

Creazione di un elemento grafico SmartArt Crea una nuova diapositiva con layout Titolo e contenuto. G. Pettarin ECDL Modulo 6: Strumenti di presentazione 98 6. Gli Smartart Con gli elementi grafici SmartArt si può rappresentare visivamente le informazioni e i concetti che si vuole illustrare. È possibile

Dettagli

I PRINCIPALI TAG DEL LINGUAGGIO HTML

I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo

Dettagli

INTRODUZIONE ALL HTML

INTRODUZIONE ALL HTML INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema

Dettagli

Gestione servizio SuperSite Versione 7

Gestione servizio SuperSite Versione 7 Gestione servizio SuperSite Versione 7 Il servizio SuperSite di Aruba, grazie ai vari strumenti messi a disposizione dell utente, consente di creare un sito web personalizzato, in modo facile e veloce.

Dettagli

PRINCIPI DI PROGETTAZIONE DI UN SITO WEB

PRINCIPI DI PROGETTAZIONE DI UN SITO WEB PRINCIPI DI PROGETTAZIONE DI UN SITO WEB Area di specializzazione Esperto in DTP e Web graphic design Anno scolastico 2006/2007 Prof. ALDO GORLA PRINCIPI DI PROGETTAZIONE DI UN SITO WEB Progettare in base

Dettagli

Cimini Simonelli - Testa

Cimini Simonelli - Testa WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire

Dettagli

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare.

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare. Capitolo 6 jquery Negli ultimi anni è stata rilasciata una mole incalcolabile di framework JavaScript, più o meno completi, realizzati per supportare nel miglior modo possibile lo sviluppatore web aiutandolo

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali

Dettagli

[Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina

[Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina [Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina Creare cartelle per salvare il lavoro] Per iniziare dobbiamo imparare a gestire quello spazio bianco che diverrà la

Dettagli

L interfaccia di Microsoft Word 2007

L interfaccia di Microsoft Word 2007 L interfaccia di Microsoft Word 2007 Microsoft Word 2007 è un Word Processor, ovvero un programma di trattamento testi. La novità di questa versione riguarda la barra multifunzione, nella quale i comandi

Dettagli

Funzioni principali di Dropbox

Funzioni principali di Dropbox ICT Rete Lecco Generazione Web - Progetto FARO Dropbox "Un luogo per tutti i tuoi file, ovunque ti trovi" Dropbox è il servizio di cloud storage più popolare, uno tra i primi a fare la sua comparsa nel

Dettagli

Strumenti per lo sviluppo

Strumenti per lo sviluppo Strumenti per lo sviluppo Librerie Javascript jquery script.aculo.us Componenti aggiuntivi per i browser firefox e chrome Firebug Web developer Alcune utility on-the-fly Generatore di sorgente di codice

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

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla! HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!) CENNI SULL'HTML L'html è il linguaggio di base per lo sviluppo di pagine

Dettagli

www.informarsi.net MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http://www.informarsi.net/ecdl/powerpoint/

www.informarsi.net MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http://www.informarsi.net/ecdl/powerpoint/ MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http:///ecdl/powerpoint/ INTERFACCIA UTENTE TIPICA DI UN SOFTWARE DI PRESENTAZIONE APERTURA E SALVATAGGIO DI UNA PRESENTAZIONE

Dettagli

Guida all uso del sistema

Guida all uso del sistema www.unicas.it Versione 3.0 del 9/12/2009 Pagina 1 Sommario Premessa... 3 Accesso in modalità di redattore... 4 CREAZIONE DI ELEMENTI... 5 MODIFICA DI ELEMENTI... 12 ELIMINAZIONE DI ELEMENTI... 12 ORDINAMENTO

Dettagli

Siti web e Dreamweaver. La schermata iniziale

Siti web e Dreamweaver. La schermata iniziale Siti web e Dreamweaver Dreamweaver è la soluzione ideale per progettare, sviluppare e gestire siti web professionali e applicazioni efficaci e conformi agli standard e offre tutti gli strumenti di progettazione

Dettagli

HTML HyperText Markup Language:

HTML HyperText Markup Language: HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto

Dettagli

Realizzare il layout di un sito web senza utilizzare frame e tabelle

Realizzare il layout di un sito web senza utilizzare frame e tabelle Realizzare il layout di un sito web senza utilizzare frame e tabelle Questa guida descrive in maniera semplice e essenziale i passi necessari alla realizzazione di una pagina web strutturata in maniera

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per

Dettagli

Guida html e css base

Guida html e css base Sommario Guida html e css base...1 Introduzione...1 Formattare il testo...4 Organizzare il testo in paragrafi...5 Creare le sezioni come in un libro...6 Creare gli elenchi...8 Inserire immagini e collegamenti...11

Dettagli

I Tag dell html. Parte quarta

I Tag dell html. Parte quarta I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:

Dettagli

Modulo 1: Fondamenti per scrivere una pagina web

Modulo 1: Fondamenti per scrivere una pagina web Modulo 1: Fondamenti per scrivere una pagina web Indice del modulo Introduzione al linguaggio di marcatura Contenuto, struttura, presentazione Elementi e attributi Proviamo a scrivere una pagina HTML Aggiungere

Dettagli

CAPITOLO 10 - TECNOLOGIA ASP.NET - WEB FORM

CAPITOLO 10 - TECNOLOGIA ASP.NET - WEB FORM INTRODUZIONE Nel capitolo 5, dedicato all ambiente di sviluppo, si è descritto come implementare un progetto Web tramite lo strumento di sviluppo Microsoft Visual Studio 2010. Un progetto web (o sito web)

Dettagli

Utilizzo dei CSS: regole

Utilizzo dei CSS: regole Tutorial per siti scolastici accessibili con editor web open source Utilizzo dei CSS: regole Adotta un template CSS - Regole pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte

Dettagli

L interfaccia di P.P.07

L interfaccia di P.P.07 1 L interfaccia di P.P.07 Barra Multifunzione Anteprima delle slide Corpo della Slide Qui sotto vediamo la barra multifunzione della scheda Home. Ogni barra è divisa in sezioni: la barra Home ha le sezioni

Dettagli

MANUALE D USO Stazione editoriale MIR cms

MANUALE D USO Stazione editoriale MIR cms MANUALE D USO Stazione editoriale MIR cms Come si accede: Per entrare alla parte amministrativa del sito è sufficiente digitare nella barra dell url l indirizzo del sito seguito da: /admin/ nome del sito

Dettagli

Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat

Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat www.dimi.uniud.it/burigat CSS Reset Come abbiamo visto, i browser hanno un loro foglio di stile che viene applicato se non definiamo

Dettagli

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web. I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come

Dettagli

Ipertesto, navigazione e cenni HTML. Lezione Informatica I CLAWEB

Ipertesto, navigazione e cenni HTML. Lezione Informatica I CLAWEB Ipertesto, navigazione e cenni HTML Lezione Informatica I CLAWEB 1 Il concetto di Ipertesto (1/2) Definizione: Modello testuale in cui le diverse unità di contenuti non sono articolate secondo un ordine

Dettagli

Personalizza. Page 1 of 33

Personalizza. Page 1 of 33 Personalizza Aprendo la scheda Personalizza, puoi aggiungere, riposizionare e regolare la grandezza del testo, inserire immagini e forme, creare una stampa unione e molto altro. Page 1 of 33 Clicca su

Dettagli

HTML+XML= XHTML. Che cos è l XHTML

HTML+XML= XHTML. Che cos è l XHTML HTML+XML= XHTML Il ritorno al futuro del WEB A cura di Barbara Lotti Che cos è l XHTML Nel gennaio del 2000 il W3C ha rilasciato, anziché una nuova versione, una riformulazione dell HTML come applicazione

Dettagli

Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1

Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1 Indice generale Prefazione alla prima edizione...xvii Introduzione...xix Organizzazione dell opera...xx I capitoli...xx Le appendici...xxi Materiale online...xxi A chi si rivolge il libro...xxi Prerequisiti...xxii

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte.

Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte. Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte. Continuiamo la parte che completerà la trattazione dei link, andando ad operare direttamente

Dettagli

Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0)

Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0) Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0) Nota Bene: Si raccomanda di leggere queste dispense di fronte al computer, provando passo dopo passo le funzionalità descritte. Per

Dettagli

GUIDA ALL HTML. Creato da SUPREMO KING

GUIDA ALL HTML. Creato da SUPREMO KING GUIDA ALL HTML Creato da SUPREMO_KING 1 PREMESSE L html è il linguaggio fondamentale attraverso il quale è possibile creare delle semplici pagine web. L html non è un linguaggio di programmazione ma un

Dettagli

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 Le pagine del sito istituzionale e dei siti tematici del Comune di Pesaro sono state progettate

Dettagli

EDITOR per la modifica delle pagine

EDITOR per la modifica delle pagine Pagina 1 EDITOR per la modifica delle pagine Sommario EDITOR per la modifica delle pagine...1 Apertura...2 L'EDITOR...3 Procedure...6 Inserire collegamenti...6 Inserire un'ancora...6 Inserire un collegamento...6

Dettagli

Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0)

Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0) Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0) Nota Bene: Si raccomanda di leggere queste dispense di fronte al computer, provando passo dopo passo le funzionalità descritte. Per

Dettagli

Verifica tecnica accessibilità

Verifica tecnica accessibilità Verifica tecnica accessibilità Realizzato secondo il modello predisposto dal CNIPA per i soggetti di cui all articolo 3, comma 1, della legge 9 gennaio 2004, n. 4 Soggetto interessato: Comune di San Mauro

Dettagli

FUNZIONALITÀ DI REPORTISTICA DEL PROGRAMMA Gestione Negozi Benetton

FUNZIONALITÀ DI REPORTISTICA DEL PROGRAMMA Gestione Negozi Benetton FUNZIONALITÀ DI REPORTISTICA DEL PROGRAMMA Gestione Negozi Benetton SOMMARIO CENNI GENERALI... 3 STAMPA ORDINI... 18 STAMPA PACKING LIST... 21 STAMPA SCONTRINI... 24 STAMPA ARTICOLI VENDUTI... 30 STAMPA

Dettagli

CSS font-size: pt, px o em? Che unità di misura utilizzare?

CSS font-size: pt, px o em? Che unità di misura utilizzare? CSS font-size: pt, px o em? Che unità di misura utilizzare? In linea di massima possiamo dire che ogni unità di misura ammessa nei CSS ha una destinazione d'uso precisa: pt I punti (pt) sono l'unità di

Dettagli

HTML, XHTML, CSS. cosa c è dietro al web. Informatica Applicata Prof.Emanuela Zilio

HTML, XHTML, CSS. cosa c è dietro al web. Informatica Applicata Prof.Emanuela Zilio HTML, XHTML, CSS cosa c è dietro al web 1 HTML cos è NON è un linguaggio di programmazione ma un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno

Dettagli

Scritto da Enrico Battuello Domenica 20 Febbraio 2011 13:30 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39

Scritto da Enrico Battuello Domenica 20 Febbraio 2011 13:30 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39 Nelle lezioni precedenti di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio

Dettagli

NUOVO PORTALE ANCE. MANUALE per la GESTIONE della HOME PAGE VAI ALL INDICE DEI CONTENUTI

NUOVO PORTALE ANCE. MANUALE per la GESTIONE della HOME PAGE VAI ALL INDICE DEI CONTENUTI NUOVO PORTALE ANCE MANUALE per la GESTIONE della HOME PAGE VAI ALL INDICE DEI CONTENUTI DEI CONTENUTI ACCESSO AL MENU PRINCIPALE PAG. 3 CREAZIONE DI UNA NUOVA HOME PAGE 4 SELEZIONE TIPO HOME PAGE 5 DATA

Dettagli

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER Il percorso Web Graphic Designer con Certificazione internazionale Adobe Dreamweaver prepara lo studente ad acquisire solide conoscenze per la figura professionale

Dettagli

Guida alla composizione di modelli OpenOffice

Guida alla composizione di modelli OpenOffice Tekne Informatica & Comunicazione Guida alla composizione di modelli OpenOffice guida rapida per creare e modificare modelli OpenOffice per XDent 01 aprile 2011 Sommario Premessa... 2 Ottenere ed Installare

Dettagli

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi

Dettagli

INTRODUZIONE AD HTML

INTRODUZIONE AD HTML INTRODUZIONE AD HTML I Frames ovvero Le cornici. Nelle lezioni precedenti abbiamo imparato a creare il nostro sito facendo uso di testo, immagini, links e meta comandi. Pochi e semplici ingredienti per

Dettagli

Richiami sugli elementi del linguaggio HTML

Richiami sugli elementi del linguaggio HTML Richiami sugli elementi del linguaggio HTML Un documento in formato Web può essere aperto con un browser, attraverso un collegamento a Internet oppure caricandolo dal disco del proprio computer senza connettersi

Dettagli

Siti interattivi e dinamici. in poche pagine

Siti interattivi e dinamici. in poche pagine Siti interattivi e dinamici in poche pagine 1 Siti Web interattivi Pagine Web codificate esclusivamente per mezzo dell HTML non permettono alcun tipo di interazione con l utente, se non quella rappresentata

Dettagli

GUIDA DI PRIMO SOCCORSO

GUIDA DI PRIMO SOCCORSO GUIDA DI PRIMO SOCCORSO SULL USO DEL CODICE HTML NELL EMAIL MARKETING Il marketing via email è sicuramente uno dei più potenti ed efficaci strumenti di promozione. Veloce da implementare, offre risultati

Dettagli

01. Conoscere l area di lavoro

01. Conoscere l area di lavoro 01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze

Dettagli

Progetto P.O.N. www.lamiascuola.it

Progetto P.O.N. www.lamiascuola.it Progetto P.O.N. www.lamiascuola.it Corso di base HTML e Front Page Lezione del 24/03/2006 2 a Lezione - compatibilità browser - Meta Tag - creare un sito web - Barra degli strumenti - sfondo e colori -

Dettagli

Disegnare il Layout. www.vincenzocalabro.it 1

Disegnare il Layout. www.vincenzocalabro.it 1 Disegnare il Layout www.vincenzocalabro.it 1 Il problema dell interfaccia Una buona interfaccia deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare le principali aree

Dettagli

MANUALE IMMEDIATO DI HTML

MANUALE IMMEDIATO DI HTML MANUALE IMMEDIATO DI HTML Realizzato da NiktorTheNat Iniziato il giorno 9 aprile 2010 - terminato il giorno 22 aprile 2010 email autore: niktorthenat@tiscali.it canale youtube: http://www.youtube.com/user/niktorthenat

Dettagli

Microsoft Word Nozioni di base

Microsoft Word Nozioni di base Corso di Introduzione all Informatica Microsoft Word Nozioni di base Esercitatore: Fabio Palopoli SOMMARIO Esercitazione n. 1 Introduzione L interfaccia di Word Gli strumenti di Microsoft Draw La guida

Dettagli

Creazione ed uso di un data base in ACCESS Lezioni ed esercizi

Creazione ed uso di un data base in ACCESS Lezioni ed esercizi Creazione ed uso di un data base in ACCESS Lezioni ed esercizi 1 ACCESS Gli archivi Gli archivi sono un insieme organizzato di informazioni. Aziende Clienti e fornitori Personale Magazzino Enti pubblici

Dettagli

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Requisito n. 1 Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili

Dettagli

INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH

INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH IMPOSTAZIONE DI UNA IMMAGINE ALL INTERNO DI UNA PAGINA WEB: In questo capitolo è spiegata la procedura di inserimento e modifica di una immagine

Dettagli

MICROSOFT WORD INTRODUZIONE

MICROSOFT WORD INTRODUZIONE 1 MICROSOFT WORD INTRODUZIONE Word è il programma più diffuso per elaborazione di testi, il cui scopo fondamentale è assistere l utente nelle operazioni di digitazione, revisione e formattazione di testi.

Dettagli

e-mail marketing in pillole

e-mail marketing in pillole consigli tecnici per l impostazione di newsletter e dem efficaci Indice Di cosa parliamo... 2 01 Impaginazione...2 02 Formattazione del testo...4 03 Mobile... 6 04 Curiosità... 7 05 Link utili... 10 Di

Dettagli

Le immagini digitali. Modulo 2. Rappresentazione analogica. Rappresentazione digitale. Una palette a 16 colori

Le immagini digitali. Modulo 2. Rappresentazione analogica. Rappresentazione digitale. Una palette a 16 colori Foto digitale, invio via mail e inserimento in una pagina web Modulo 2 Cosa si intende con analogico e digitale? Come avviene la rappresentazione digitale delle immagini? Come è possibile trasformare un

Dettagli

I link e l'ipertestualità

I link e l'ipertestualità I link e l'ipertestualità I link sono "il ponte" che consente di passare da un documento all altro. In quanto tali, i link sono formati da due componenti: il contenuto che "nasconde" il collegamento (può

Dettagli