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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Modulo 8. Sviluppo di pagine e siti Creare pagine Web

Modulo 8. Sviluppo di pagine e siti Creare pagine Web Pagina 1 di 6 Sviluppo di pagine e siti Creare pagine Web HTML è l'acronimo di HyperText Markup Language; si tratta di un linguaggio utilizzato per la marcatura ipertestuale. A differenza dei comuni linguaggi

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

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

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

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

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

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

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

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

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

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

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

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA

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

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

Guida OpenOffice.org Impress

Guida OpenOffice.org Impress Guida OpenOffice.org Impress Introduzione ad Impress IMPRESS è un programma nato per creare presentazioni e lezioni di aspetto professionale. È un programma inserito nella versione standard del pacchetto

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

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

[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

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

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

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

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

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

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

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

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

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

- 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

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

Gestione dei contenuti web Ultimi eventi

Gestione dei contenuti web Ultimi eventi Gestione dei contenuti web Ultimi eventi Questo manuale illustra le operazioni più comuni per la manutenzione e aggiornamento del sito web http://terremoti.ingv.it/ultimi eventi/ tramite l interfaccia

Dettagli

Flash Booking On-Line

Flash Booking On-Line Flash Booking On-Line 2.0 Specifiche di collegamento 2009 Athena Solutions Srl All rights reserved. Le informazioni contenute in questo documento rappresentano l'attuale posizione di Athena Solutions sui

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

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

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

Le Proprietà della Barra delle applicazioni e Menu Start di Giovanni DI CECCA - http://www.dicecca.net

Le Proprietà della Barra delle applicazioni e Menu Start di Giovanni DI CECCA - http://www.dicecca.net - Introduzione Con questo articolo chiudiamo la lunga cavalcata attraverso il desktop di Windows XP. Sul precedente numero ho analizzato il tasto destro del mouse sulla Barra delle Applicazioni, tralasciando

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

Esploriamo Javascript! 1 di Ivan Venuti

Esploriamo Javascript! 1 di Ivan Venuti Esploriamo Javascript! 1 di Ivan Venuti L Html è stato pensato (e creato) per presentare contenuti statici che, visualizzati da utenti diversi, diano sempre lo stesso risultato. Per sopperire a questa

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

UTILIZZO DEL TEMPLATE Parte 1 - struttura

UTILIZZO DEL TEMPLATE Parte 1 - struttura UTILIZZO DEL TEMPLATE Parte 1 - struttura PROGRAMMI UTILIZZATI: gestione del codice HTML - HTML-Kit è un Editor Web non di tipo visuale, che consente la costruzione ex-novo di pagine web o la loro modifica,

Dettagli

Concetti di base della Tecnologia dell'informazione e della Comunicazione. Studio Elfra sas Via F.lli Ruffini 9 17031 Albenga SV 0182596058

Concetti di base della Tecnologia dell'informazione e della Comunicazione. Studio Elfra sas Via F.lli Ruffini 9 17031 Albenga SV 0182596058 by Studio Elfra sas Concetti di base della Tecnologia dell'informazione e della Comunicazione Aggiornato a Aprile 2009 Informatica di base 1 Elaborazione testi I word processor, o programmi per l'elaborazione

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

Corso basi di dati Introduzione alle ASP

Corso basi di dati Introduzione alle ASP Corso basi di dati Introduzione alle ASP Gianluca Di Tomassi Email: ditomass@dia.uniroma3.it Università di Roma Tre Web statico e Web interattivo In principio il Web era una semplice collezione di pagine

Dettagli

Guida OpenOffice.org Writer

Guida OpenOffice.org Writer Guida OpenOffice.org Writer Le visualizzazioni di Writer Writer permette di visualizzare un documento in diverse maniere tramite: Visualizza->Schermo intero: permette di visualizzare il documento Writer

Dettagli

IL TUO SITO WEB. SkyNotes è l insieme degli strumenti di cui l azienda italiana necessita per essere competitiva nel mondo in costante cambiamento.

IL TUO SITO WEB. SkyNotes è l insieme degli strumenti di cui l azienda italiana necessita per essere competitiva nel mondo in costante cambiamento. IL TUO SITO WEB SkyNotes è l insieme degli strumenti di cui l azienda italiana necessita per essere competitiva nel mondo in costante cambiamento. personalizzabile # intuitivo # immediato IL TUO SITO SUBITO

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

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

Demo. La palette allinea. La palette Anteprima conversione trasparenza. Adobe Illustrator CS2

Demo. La palette allinea. La palette Anteprima conversione trasparenza. Adobe Illustrator CS2 Le Palette (parte prima) Come abbiamo accennato le Palette permettono di controllare e modificare il vostro lavoro. Le potete spostare e nascondere come spiegato nella prima lezione. Cominciamo a vedere

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

Sistema Web. Gestione Documenti Elettronici

Sistema Web. Gestione Documenti Elettronici GUIDA RAPIDA Sistema Web CONSORZIO CO.D.IN. M A R C H E Gestione Documenti Elettronici INDICE Capitolo 1: Avvio Applicazione Capitolo 2: Autenticazione Utente e Accesso al Sistema Capitolo 3: Navigazione

Dettagli

Gestione del Sito web direttamente dal Browser

Gestione del Sito web direttamente dal Browser Gestione del Sito web direttamente dal Browser L' unica azione che potrete compiere è quella di modificare i contenuti: (Consigliato per modifiche veloci riguardanti maggiormente il TESTO) (Non avrai la

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

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

Progetto Monitoraggio

Progetto Monitoraggio MINISTERO DELLO SVILUPPO ECONOMICO DIPARTIMENTO PER LO SVILUPPO E LA COESIONE ECONOMICA Progetto Monitoraggio Sistema Gestione Progetti Query (SGPQ) Manuale Utente Report Operativi Contenuti 1. Premessa...

Dettagli

Calcolatori e interfacce grafiche

Calcolatori e interfacce grafiche Calcolatori e interfacce grafiche COMPONENTI DI UN COMPUTER Hardware Tutti gli elementi fisici che compongono un calcolatore Software Comandi, istruzioni, programmi che consentono al calcolatore di utilizzare

Dettagli

Manuale di sviluppo Geecom Scritto da Andrea Pastore. versione 2.1 24/11/2014

Manuale di sviluppo Geecom Scritto da Andrea Pastore. versione 2.1 24/11/2014 Manuale di sviluppo Geecom Scritto da Andrea Pastore versione 2.1 24/11/2014 Capitolo 1: creare un template per Geecom La struttura di un template geecom Creare un template personalizzato Sommario Capitolo

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

Lavorare con le immagini

Lavorare con le immagini Lavorare con le immagini Domande più frequenti D: Ho importato alcune immagini PNG molto grandi e adesso il mio sito e molto lento. Come mai? R: Il formato PNG non è il più adatto per immagini di grandi

Dettagli

Sistema di autopubblicazione di siti Web

Sistema di autopubblicazione di siti Web Sistema di autopubblicazione di siti Web Manuale d'uso Versione: SW 2.0 Manuale 2.0 Gennaio 2007 CEDCAMERA tutti i diritti sono riservati CEDCAMERA - Manuale d'uso 1 1 Introduzione Benvenuti nel sistema

Dettagli

Vntcms 2 istruzioni per l uso!

Vntcms 2 istruzioni per l uso! Vntcms 2 istruzioni per l uso Tutte le operazioni di gestione dei contenuti del sito si effettuano dal pannello di amministrazione localizzato al seguente indirizzo: http://www.il-nome-del-mio-sito.it/admin/go

Dettagli

Talento LAB 2.1 - GUIDA E ASSISTENTE LA GUIDA IN LINEA. In questa lezione imparerete a:

Talento LAB 2.1 - GUIDA E ASSISTENTE LA GUIDA IN LINEA. In questa lezione imparerete a: Lab 2.1 Guida e assistente LAB 2.1 - GUIDA E ASSISTENTE In questa lezione imparerete a: Descrivere la Guida in linea e l'assistente Office, Descrivere gli strumenti della Guida in linea di Windows XP,Utilizzare

Dettagli

FONDAMENTI DI INFORMATICA. 3 Elaborazione testi

FONDAMENTI DI INFORMATICA. 3 Elaborazione testi FONDAMENTI DI INFORMATICA 3 Elaborazione testi Microsoft office word Concetti generali Operazioni principali Formattazione Oggetti Stampa unione Preparazione della stampa Schermata iniziale di Word Come

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

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

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

Come scrivere articoli in Blog didattici del Carcano

Come scrivere articoli in Blog didattici del Carcano Come scrivere articoli in Blog didattici del Carcano Il docente che voglia scrivere nei blog didattici deve prima di tutto registrarsi autonomamente (nome.cognome come ID); la richiesta di registrazione

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

Struttura logica di un programma

Struttura logica di un programma Struttura logica di un programma Tutti i programmi per computer prevedono tre operazioni principali: l input di dati (cioè l inserimento delle informazioni da elaborare) il calcolo dei risultati cercati

Dettagli

Cosa è un foglio elettronico

Cosa è un foglio elettronico Cosa è un foglio elettronico Versione informatica del foglio contabile Strumento per l elaborazione di numeri (ma non solo...) I valori inseriti possono essere modificati, analizzati, elaborati, ripetuti

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

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

Esercitazione n. 10: HTML e primo sito web

Esercitazione n. 10: HTML e primo sito web + Strumenti digitali per la comunicazione A.A 0/4 Esercitazione n. 0: HTML e primo sito web Scopo: Creare un semplice sito web con Kompozer. Il sito web è composto da una home page, e da altre due pagine

Dettagli

MANUALE UTENTE. SITO WEB Applicazione Fotovoltaico GSE FTV. stato documento draft approvato consegnato. Riferimento Versione 1.

MANUALE UTENTE. SITO WEB Applicazione Fotovoltaico GSE FTV. stato documento draft approvato consegnato. Riferimento Versione 1. MANUALE UTENTE SITO WEB Applicazione Fotovoltaico GSE FTV stato documento draft approvato consegnato Riferimento Versione 1.0 Creato 14/07/06 REVISIONI VERSIONE DATA AUTORE MODIFICHE 1.0 14/07/2006 Prima

Dettagli

HTML per tu+ Chiara Pere+

HTML per tu+ Chiara Pere+ HTML per tu+ Chiara Pere+ Cos é L HTML è il linguaggio con cui potete indicare come i vari elemen7 saranno dispos7 in una pagina Web. L estensione del file è.html e verrà visualizzato corre?amente trascinandolo

Dettagli

Lezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente!

Lezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente! Lezione nr. 5 >> Come creare un modulo Web I moduli web sono delle strutture fondamentali per ogni sito web e la loro conoscenza ti permetterà di risolvere almeno il 60% delle problematiche di gestione

Dettagli

G. Pettarin ECDL Modulo 3: Word 98

G. Pettarin ECDL Modulo 3: Word 98 G. Pettarin ECDL Modulo 3: Word 98 3.10 Creare in serie lettere ed etichette La Creazione guidata Stampa unione, presente nel menu Strumenti, consente di creare lettere tipo, etichette per indirizzi, buste...

Dettagli