Strumenti via WEB per la gestione dinamica dei siti

1. Strumenti via WEB per la gestione dinamica dei siti

2. La direzione scelta Esigenze espresse dalla Provincia di Torino: 1) Utilizzare Internet come canale strategico di comunicazione e di interazione con il cittadino - utente 2) Gestire in modo diretto i contenuti del sito, delegando ad altri la gestione del supporto informatico (compresa la formazione tecnica delle redazioni)

3. Glossario • Contenuti: informazioni relative alla materia specifica • Redazione: gruppo di esperti di dominio che si occupano della gestione del sito, attraverso un meccanismo di flusso di pubblicazione delle pagine • Sito gestibile autonomamente: possibilità di pubblicare direttamente contenuti sul sito della Provincia, nelle sezioni di propria competenza • Strumento di gestione dinamica di un sito: ArsDigita Community System di ArsDigita • Strumenti di collaborazione: strumenti che assicurano un contatto immediato tra PA e cittadino • (Forum, NewsLetter, News, ecc.) • Dinamicizzazione: realizzazione del sito con uno strumento che consente la gestione dinamica dei contenuti da parte di una redazione esperta di dominio

4. Scopi del corso Fornire gli strumenti per rendere le redazioni del sito indipendenti nella gestione dei contenuti Conoscenze base del linguaggio HTML: autonomia nella redazione di contenuti Formazione per l’uso di: strumenti via WEB per la gestione dinamica dei siti Cos’è ACS • Nozioni elementari • di Internet: • funzionamento siti Internet • utilizzo strumenti via WEB • Conoscere e imparare a usare: • il CMS (Content Management System) • gli altri strumenti di collaborazione

5. Organizzazione del corso • Lunedì mattina: progettazione e gestione siti Internet • Lunedì pomeriggio: HTML, teoria • Martedì: HTML, teoria ed esercitazioni pratiche • Giovedì mattina: ACS, CMS e gli strumenti di collaborazione • Giovedì pomeriggio: presentazione manuali • Venerdì: Ulterioni esercitazioni con il CMS

6. Lunedì mattina: AGENDA • Cosa vuol dire essere in rete • Struttura generale di una rete • Browser, HTML, URL ….. Chi sono costoro? • I siti: pagine statiche e dinamiche • Accessibilità e usabilità

7. Cosa vuol dire essere in rete Definizione semplice di rete • Sistema che permette la comunicazione fra diverse componenti. • Fra tali componenti ci sono: • Client • Server • Data base • Il collegamento fra le diverse componenti può avvenire via: • Modem • Linea ISDN (collegamento digitale, migliori prestazioni) • Linea ADSL (collegamento a fibre ottiche)

8. Client Cosa vuol dire essere in rete Il client Componente di una rete che usufruisce dei servizi messi a disposizione dagli altri componenti della rete

9. Cosa vuol dire essere in rete Il server Componente di una rete che mette a disposizione dati, servizi, applicazioni... Possono esserci: • file server • data server -> Server che ospita i Data Base • application server -> Server che ospita le applicazioni • printer server

10. Cosa vuol dire essere in rete Il Data Base (o DB) Sistema per immagazzinare dati: • Dati semplici (numeri, parole..) • File interi DB utilizzato nel sistema informativo della Provincia di Torino: ORACLE Nuovi strumenti Compatibilità con ORACLE

11. Struttura generale di una rete: Internet - LAN e WWW Internet e' il nome con cui si designa un grande insieme di reti di calcolatori collegate fra loro. Cellula fondamentale e' la LAN (Local Area Network) che ha le dimensioni di un edificio o poco di piu' L'insieme di pagine HTML, immagini, suoni, filmati (iperoggetti) collegati fra di loro costituisce il World Wide Web (WWW). Un iperoggetto e' un documento che al suo interno contiene i rimandi verso altri iperoggetti (link).

12. Printer Server Server Printer Router Client Client Client WAN Struttura generale di una rete: Reti locali (LAN)

13. Struttura generale di una rete Rete esterna/Rete aziendale Firewall: protezione della rete locale dal resto del mondo In generale i client interni alla rete locale possono accedere ad un numero di servizi maggiore rispetto ai client sulla rete esterna Es: Internet/Intranet

14. Struttura generale di una rete Come si comunica? I protocolli Protocollo = Insieme di regole per comunicare Protocollo HTTP E’ il protocollo di comunicazione utilizzato per trasferire sulla rete gli ipertesti. http://www.provincia.torino.it FTP (File Transfer Process) E’ il protocollo di comunicazione studiato per il trasferimento di file fra due computer collegati alla rete.

15. Il Browser Browser, HTML, URL ….. Chi sono costoro? Il browser è il software che permette la navigazione in Internet. Svolge due funzioni principali: Puntare ad oggetti Internet: E’ in grado di accedere ad un indirizzo internet Formattare e visualizzare i dati: Interpreta i documenti Web redatti in HTML Unisce eventuali file separati (immagini, alcuni Javascript, applet Java…)

16. I Browser Applicazione che amplia le funzionalità del browser stesso Browser, HTML, URL ….. Chi sono costoro? • Il browser può permettere: • la navigazione • l’invio e la ricezione della posta elettronica • lo scaricamento (download) di file e programmi • le teleconferenze • l’integrazione con software esterni • il supporto di plug-in • l’editor visuale codice HTML • I browser più diffusi sono: • Internet Explorer • Netscape

17. I Browser Browser, HTML, URL ….. Chi sono costoro? Explorer Attualmente il più diffuso al mondo Netscape

18. I Browser Browser, HTML, URL ….. Chi sono costoro? ATTENZIONE !!!!! Ci possono essere piccole differenze nell’interpretazione dell’HTML da parte di diversi browser E’ quindi opportuno verificare la corretta visualizzazione delle pagine WEB create da parte dei browser più diffusi

19. Browser, HTML, URL ….. Chi sono costoro? HTML HTML - HyperText Markup Language - è un linguaggio per creare documenti per il Web HTML non è un linguaggio di programmazione HTML descrive tutti gli elementi presenti in un ipertesto E’ costituito da <TAG> che delimitano il tipo di informazione

20. <html> <head> (caratteristiche del documento) <title> Titolo della pagina </title> </head> <body> Contenuto del file html </body> </html> Browser, HTML, URL ….. Chi sono costoro? HTML Alcuni esempi di TAG : In generale: <nome del comando> Informazioni </nome del comando> • Formattazione: • paragrafi, tabelle, • colori, font • Inserimento di: • link, immagini

21. Browser, HTML, URL ….. Chi sono costoro? Esempio di pagina HTML: <br> <a href="http://www.provincia.torino.it">Link</a> <br> <table BORDER COLS=2 WIDTH="100%" > <tr> <td>Tabella</td> <td>Colonna 2</td> </tr> <tr> <td>Riga 2</td> <td>Riga 2 Colonna 2</td> </tr> </table>

22. Browser, HTML, URL ….. Chi sono costoro? URL Uniform Resurce Locator E’ l’indirizzo di una specifica pagina Web Esempio: http://www.provincia.torino.it Il prefisso http: indica il tipo di protocollo IndirizzoInternet //

23. I siti:paginestatiche e dinamiche Cosa vuol dire pagina statica ? Collegandosi ad una certa URL, viene restituito sempre lo stesso file HTML L’informazione HTML è fissa Viene trovato il file HTML richiesto Server URL del Server: richiesta di un file Client

24. I siti:paginestatiche e dinamiche Come viene generata una pagina dinamica ? Nel server viene attivato un programma che elabora i dati e crea la pagina HTML Server Attivazione programma URL del Server: richiamato file di programma Creazione dinamica della pagina HTML Client Restituzione pagina Web dinamica

25. I siti:paginestatiche e dinamiche Soluzioni tecniche per generare pagine dinamiche: • CGI (Common Gateway Interface) • programmi per generare la pagina HTML dinamica, componendo le informazioni elaborate • Compatibilità con sistemi UNIX o LINUX • (scelti dalla Provincia di Torino) • ASP (Active Server Pages) • PHP (Php Hypertext Preprocessor)

26. Creazione istantanea e automatica della pagina HTML tramite apposito programma Richiesta della pagina I siti:paginestatiche e dinamiche Non confondere le pagine dinamiche con gli strumenti dinamici per la gestione del sito!! Redazione della pagina HTML semplificata: Template predefiniti da associare, Contenuto da scrivere (in HTML) Versioning Publishing

27. I siti:paginestatiche e dinamiche Non confondere le pagine dinamiche con gli strumenti dinamici per la gestione del sito!! Gli strumenti dinamici per la gestione di siti utilizzano pagine dinamiche Non è vero il contrario: ci sono pagine dinamiche non costruite con strumenti dinamici per la gestione dei siti

28. Accessibilità e usabilità • Un qualunque sito Web deve essere facilmente accessibile: • Tempi di attesa ridotti • Compatibilità con diverse versioni di browser • Non richiedere continui aggiornamenti software per il corretto • funzionamento • Nell’ambito della Pubblica Amministrazione: • Il sito Web deve essere accessibile a tutti • (anche con problemi fisici o cognitivi): • Effetti grafici semplici • Facile navigabilità

29. Accessibilità e usabilità • Un qualunque sito Web deve essere facilmente usabile: • Facile da navigare: • Menu semplici • Interfacce chiare • No pop-up inopportune (pubblicità, ...) • No bottoni strani, immagini animate, musichette , ... • Nell’ambito della Pubblica Amministrazione: • Regole imposte dall’AIPA sull’usabilità dei siti • La distribuzione dell’informazione dev’essere rivolta a tutti

30. Lunedì pomeriggio: HTML, TEORIA Agenda • Le regole d’oro per pubblicare su internet • Le basi dell’HTML; i tag fondamentali • I font • I paragrafi • Le liste • I link • Le immagini • Le tabelle • I form • I fogli di stile

31. Pubblicare su Internet10 Regole d’oro 1 pianificare il messaggio 2 preferire la semplicità e la chiarezza 3 scegliere la brevità 4 incuriosire la visita 5 agevolare la navigazione 6 riportare le informazioni indispensabili 7 utilizzare materiali esistenti 8 aggiornare continuamente le pagine 9 mantenere le promesse 10 promuovere il proprio sito web

32. HTML • HTML - Hypertext Markup Language - è un linguaggio per creare documenti per il Web • HTML non è un linguaggio di programmazione • HTML descrive la posizione di tutti gli elementi presenti in un documento

33. Pagine statiche Il server contiene le pagine web (file scritti in html) e le immagini <HTML> <HEAD> <TITLE> CSI Piemonte </TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF” BACKGROUND=“images/image1.gif> Il browser interpreta le istruzioni html e visualizza la pagina

34. Sintassi del linguaggio HTML Tag Fondamentali <NOME DEL COMANDO> informazioni </NOME DEL COMANDO> Un documento HTML inizia sempre con il tag <HTML> e termina sempre con il Tag </HTML> TAG = istruzioni che identificano la posizione e la funzione degli elementi

35. Sintassi del linguaggio HTML Tag Fondamentali <HTML> <HEAD> caratteristiche del documento <TITLE> titolo della pagina </TITLE> </HEAD> <BODY> contenuto del file HTML </BODY> </HTML>

36. Sintassi del linguaggio HTMLDimensioni dei caratteri Il documento inserito nel Body viene visualizzato secondo le direttive di formattazione <H1>Il più grande</H1> <H2></H2> headers <H3></H3> <H4></H4> <H5></H5> <H6>Il più piccolo</H6> N.B. Non usare gli elementi <H1-H6> per ottenere effetti sul testo. <H1-H6> segnalano la presenza di titoli.

37. Sintassi del linguaggio HTMLIstruzione Font <FONT specifica alcuni attributi delle font (colore, tipo ...) SIZE= dimensione dei caratteri (da “1” a “7”); + o - determinano un aumento o una diminuzione dei caratteri COLOR= colore “#codifica esadecimale” FACE= tipo di carattere (Arial, Verdana, ...) > </FONT> Esempio: <FONT FACE=“ARIAL, VERDANA” SIZE=3>testo tipo</FONT> N.B. E’ buona norma prevedere almeno due font alternative (una simile per stile, una di default visibile su tutti i sistemi)

38. Sintassi del linguaggio HTML La codifica RGB • Ogni colore può essere codificato mediante tre numeri • compresi tra 0 e 255 che rappresentano la quantità • di ROSSO, VERDE e BLU presenti nel colore stesso • Ogni numero compreso tra 0 e 255 deve essere • trasformato nella rappresentazione esadecimale • (base 16) corrispondente • Con questa codifica si possono rappresentare • più di 16mila colori diversi

39. Sintassi del linguaggio HTMLParagrafi <P apre il paragrafo; gestisce le proprietà di allineamento ALIGN=“center/right/left” > </P> si può omettere <BR> mette a capo il testo <CENTER> centra il testo</CENTER> <HR> inserisce una linea di separazione nel testo <HR WIDTH=“valore in pixel o percentuale” SIZE=“3” (spessore della linea)> <BLOCKQUOTE> indica la presenza di citazioni </BLOCKQUOTE> N.B. Non usare BLOCKQUOTE per delimitare il rientro del testo

40. Sintassi del linguaggio HTMLListe di elementi <UL> inizio di una lista non ordinata <UL TYPE=[disc o circle o square]> determina il tipo di punto <LI> primo elemento</LI> <LI> secondo elemento</LI> </UL> <OL> inizio di una lista ordinata <OL TYPE=[1 o a o A]> determina il tipo di lista numerata o letterale <LI> primo elemento</LI> <LI> secondo elemento</LI> </OL> N.B. Non è necessario chiudere </LI>

41. Sintassi del linguaggio HTMLLink <A>serve per “ancorare” il collegamento alla pagina</A> COLLEGAMENTI ESTERNI <A HREF=“http://www.csi.it”>La pagina del Csi</A> ALTRI COLLEGAMENTI ESTERNI (altri protocolli) <A HREF=“ftp://ftp.gutenberg.org”> ftp del Progetto Gutenberg</A> <A HREF=“news://news.polito.it”> area news del Politecnico</A>

42. Sintassi del linguaggio HTMLLink COLLEGAMENTI INTERNI <A HREF=“#riferimento”>se fai click qui</A> <A NAME=“#riferimento”>arrivi qui</A> COLLEGAMENTI DI POSTA ELETTRONICA <A HREF=“mailto:comunica@itocsivm.csi.it> Gruppo Comunicazione</A> URL indirizzi “ASSOLUTI”: /prova/index.htm indirizzi “RELATIVI”: .. / .. / index.htm

43. Sintassi del linguaggio HTMLImmagini/GIF • FORMATO GIF (Grafics Interchange Format) • supporta al massimo 256 colori (8bit) • prevede l’interlacciamento, cioè le immagini vengono • visualizzate con successive schermate di definizione • è utile per la grafica semplice, con grandi superficie di colore • uniforme • non è adatto con particolari tipi di compressione grafica

44. Sintassi del linguaggio HTMLImmagini/JPEG • FORMATO JPEG (Joint Photografic Experts Format) • l’estensione dei file è JPG • supporta 16 milioni di colori (24bit) • prevede una forte compressione, con perdita di qualità, • quindi le dimensioni dei file sono molto piccole • è ideale per le immagini fotografiche con sfumature • non è adatto per immagini con aree di colore omogeneo

45. Sintassi del linguaggio HTMLImmagini/Attributi <IMG SRC= “nome del file dell’immagine” ALT= “testo” testo descrittivo nel caso in cui un’immagine non possa essere visualizzata ALIGN= “top/middle/bottom” allineamento del testo con la figura BORDER= “valore in pixel” HSPACE= “valore in pixel” spazio orizzontale tra testo e oggetti intorno ad un’immagine VSPACE= “valore in pixel” spazio verticale tra testo e oggetti intorno all’immagine >

46. Sintassi del linguaggio HTMLImmagini/Mappa • consente di costruire immagini sensibili • è necessario avere il file dell’immagine e una specifica della • mappatura, cioè l’indicazione di quali parti sono attive e quali • no • per preparare l’immagine adatta a questo scopo, è • necessario usare particolari programmi, come “Mapedit” oppure • programmi WYSIWYG • preparata l’immagine, con Mapedit è possibile definire • aree rettangolari, poligonali e circolari alle quali associare • distinti URL

47. Sintassi del linguaggio HTMLImmagini/Mappa <IMG SRC=“nome del file dell’immagine” USEMAP=“#nome della mappa” ISMAP (indica che l’immagine è una mappa)> <MAP name=“mappa”> <AREA shape=“rect” coords=“50,10,100,100” HREF=“...”> <AREA shape=“circle” coords=“20,20,15” HREF=“...”> </MAP>

48. Sintassi del linguaggio HTMLTabella/Struttura <TABLE> inizio tabella <TR> inizio nuova riga <TD> inizio nuova cella Contenuto della cella </TD> fine cella </TR> fine riga </TABLE> fine tabella

49. Sintassi del linguaggio HTMLTabella/Attributi <TABLE BORDER=4 bordo tabella WIDTH=50% larghezza tabella in pixel o percentuale HEIGHT= altezza della tabella in pixel BGCOLOR colore di sfondo della tabella CELLSPACING spaziatura interna tra le celle CELLPADDING spaziatura tra il testo e il bordo delle celle > ... </TABLE>

50. Sintassi del linguaggio HTMLTabella/Attributi TD <TABLE> <TD WIDTH larghezza cella HEIGHT altezza cella COLSPAN estensione in larghezza delle singole colonne ROWSPAN altezza delle singole celle ALIGN allineamento testo (“left”, “center”, “right”) VALIGN allineamento testo (“top”, “middle”, “bottom”) > </TD> </TABLE>