La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Sistemi tecnologici e informazione online Domenico Ventriglia 2010 Università di Roma "La Sapienza"

Presentazioni simili


Presentazione sul tema: "Sistemi tecnologici e informazione online Domenico Ventriglia 2010 Università di Roma "La Sapienza""— Transcript della presentazione:

1 Sistemi tecnologici e informazione online Domenico Ventriglia 2010 Università di Roma "La Sapienza"

2 Esercizio Almeno 3 giorni prima bisogna inviare una in cui vi sono: - generalità - indirizzo del blog - indicazione delle altre persone del gruppo -post e url utilizzati per gli esercizi dati a lezione - scrivere i post bilingue - inviare i post piu significativi a dig e oknotizie - inserire una mappa di google in un post - introdurre Google analytics - una relazione critica del traffico prodotto dal vostro blog (utenti unici, pagine viste, frequenza di rimbalzo, tempo di permanenza,..). Pagine: 1 max 2

3 HTML (struttura o presentazione) Inizialmente HTML fu pensato per delegare la presentazione grafica dei contenuti ai browser che venivano configurati per adattarsi al meglio allo specifico contesto (schermi piccoli, grandi, capacità visive del lettore,…) (vedremo esempio con il tag..) Con il passare del tempo esigenze pratiche e la mancanza di regolamentazione hanno favorito il proliferare di comandi (tag) che si occupassero sia della presentazione grafica della pagina che della sua struttura (vedremo esempio con il tag La standardizzazione del linguaggio e le nuove esigenze (siti di centinai di pagine web) hanno reso indispensabile il disaccoppiamento fra presentazione e la struttura (in realtà vi e una terza dimensione che è il contenuto). HTML si occupa della struttura della pagina mentre i css della sua presentazione (ne riparleremo)

4 Fogli di stile (CSS) Cascading Style Sheet (CSS) I CSS vengono introdotti nel 1996 dal W3C (Wold Wide Web). Servono per gestire gli aspetti legati alla grafica di un documento web (tipicamente html). Ad esempio il font, i colori, le spaziature, margini… Come spesso succede vi era lesigenza di separare il modello dalla presentazione Html definisce la struttura della pagina web (gli elementi presenti, la loro rilevanza, i raggruppamenti logicima non dovrebbe occuparsi degli aspetti legati alla presentazione di questi elementi. Esempi: stesso html con vestiti diversi (uso professionale)

5 Perchè utilizzare i css? Usabilità: La pagina puo essere navigata anche senza css sulla base dellhtml strutturato/ gerarchico ( esagerato dire semantico) Accessibilità: Essendo html strutturato vi particolari brower che possono interpretarlo e leggerlo ( caso non vedenti) Indicizzazione: I motori di ricerca sanno dare il giusto significato ai tag html presenti nella pagina (vedi seo) Manutenzione (importante): Centinai di pagine html con la stessa struttura possono essere governate da un unico file css o viceversa uno stesso file html puo avere piu css (visto prima)

6 Come usare i css Possono essere associati ad un documento html principalmente in due modi: css esterni un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo editabili anche con il Blocco Note o TextEdit ai quali si assegna l'estensione.css. css interni quando il suo codice è compreso in quello del documento (in questo caso perdo diversi dei vantaggi legati ai css)

7 Css interni -incorporati I css interni possono essere utilizzati principalmente in due modalità: A) I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento. La dichiarazione va posta all'interno della sezione Il tag style ha come attributi:.type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio..media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale. all. Il CSS si applica a tutti i dispositivi di visualizzazione. screen. Valore usato per la resa sui normali browser web. print. Il CSS viene applicato in fase di stampa del documento. projection. Usato per presentazioni e proiezioni a tutto schermo. aural. Da usare per dispositivi come browser a sintesi vocale. braille. Il CSS viene usato per supporti basati sull'uso del braille. embossed. Per stampanti braille. handheld. Palmari e simili. ….

8 Css interno -esempio Vediamo un esempio (preso da body {background-color:#d0e4fe;} h1 { color:orange; text-align:center; } p { font-family:"Times New Roman";font-size:20px; } CSS example! This is a paragraph.

9 Css interno –in linea B) I fogli in linea possono essere inseriti direttamente nel documento HTML. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina. La sintassi generica è la seguente: Se, ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:...

10 Css esterno Può essere inserito utilizzando l'elemento. La dichiarazione va sempre collocata all'interno della sezione del documento. Ad esempio: Titolo di prova....rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet..href: serve a definire l'URL assoluto o relativo del foglio di stile. E' obbligatorio..type: (già visto).media: (già visto)

11 Css esterno- esempio File html (mio.html) This header is 36 pt This header is blue This paragraph has a left margin of 50 pixels File css (ex1.css) body { background-color:yellow; } h1 { font-size:36pt; } h2 { color:blue; } p { margin-left:50px; } Vediamo il solito esempio (preso da

12 Css sintassi A prescindere da come il css è inserito in pagina la sintassi utilizzata è: Essa è composta da due blocchi principali: il selettore il blocco delle dichiarazioni Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi : lo sfondo sarà rosso, il colore del testo bianco. Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia: proprietà valore

13 Elementi blocco Alcuni dei selettori piu usati sono gli elementi blocco. Vengono utilizzati per raggruppare degli elementi in pagina con delle proprietà simili fra loro, creando delle zone di impaginazione Tutti gli elementi blocco hanno le seguenti proprietà: Formano un blocco e si dispongono a capo Assumono le max lunghezza possibile rispetto al suo contenitore Modifica laltezza in funzione del suo contenitore Puo contenere altri elementi di tipo block Alcuni esempi di contenitore blocco sono:..

14 Selettore: id e class Un elemento html puo specificare dei propri selettori chiamati : id class Il selettore id: Specifica lo stile di un singolo/unico elemento E definito con il # #para1 { text-align:center; color:red; } Hello World! This paragraph is not affected by the style.

15 Selettore: class Un selettore class : definisce lo stile di un insieme di elementi imposta in una sola volta lo stile di tutti gli elementi di quella classe si utilizzando il simbolo. { text-align:center;} Center-aligned heading Center-aligned paragraph.

16 Selettore: class (2) E possibile specificare che un solo elemento html deve essere gestito mediante una classe p.center{ text-align:center; } This heading will not be affected This paragraph will be center-aligned.

17 Background

18 Altre proprietà Capito il meccanismo possiamo applicare tabelle simili per formattare il testo, tabelle, form,

19 Link per i css Documenti: (inglese ) (italiano) Software Topsyle Firebug web developer toolbar https://addons.mozilla.org/it/firefox/addon/1843/ https://addons.mozilla.org/it/firefox/addon/1843/ https://addons.mozilla.org/it/firefox/addon/60/ Validatore css


Scaricare ppt "Sistemi tecnologici e informazione online Domenico Ventriglia 2010 Università di Roma "La Sapienza""

Presentazioni simili


Annunci Google