Sistemi tecnologici e informazione online Università di Roma "La Sapienza" Sistemi tecnologici e informazione online Domenico Ventriglia 2010
Esercizio Almeno 3 giorni prima bisogna inviare una email 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
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 <h1>..) 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 <font …> 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)
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 l’esigenza 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 http://www.w3schools.com/css/demo_default.htm (uso professionale) http://www.csszengarden.com/
Perchè utilizzare i css? Usabilità: La pagina puo’ essere navigata anche senza css sulla base dell’html 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)
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)
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 <style>. La dichiarazione va posta all'interno della sezione <head> 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. ….
Css interno -esempio Vediamo un esempio (preso da http://www.w3schools.com/css/default.asp) <html> <head> <style type="text/css"> body {background-color:#d0e4fe;} h1 { color:orange; text-align:center; } p { font-family:"Times New Roman";font-size:20px; } </style> </head> <body> <h1>CSS example!</h1> <p>This is a paragraph.</p> </body> </html>
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: <elemento style="regole_di_stile"> Se, ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo: <h1 style="color: red; background: black;">...</h1>
Css esterno Può essere inserito utilizzando l'elemento <link>. La dichiarazione va sempre collocata all'interno della sezione <head> del documento. Ad esempio: <html> <head> <title> Titolo di prova</title> <link rel="stylesheet" type="text/css" href="stile.css"> </head> <body>... .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)
Css esterno- esempio Vediamo il solito esempio (preso da http://www.w3schools.com/css/showit.asp?filename=ex1) File html (mio.html) <html> <head> <link rel="stylesheet" type="text/css" href="ex1.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> File css (ex1.css) body { background-color:yellow; } h1 { font-size:36pt; } h2 { color:blue; } p { margin-left:50px; }
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 <h1>: 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
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 Alcuni esempi di contenitore blocco sono: <div> <h1>..<h6> <p> <ul> <ol> <form> <table> 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 l’altezza in funzione del suo contenitore Puo’ contenere altri elementi di tipo block
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 # http://www.w3schools.com/css/css_id_class.asp <html> <head> <style type="text/css"> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>
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 “.” http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class <html> <head> <style type="text/css"> .center { text-align:center;} </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html>
Selettore: class (2) E’ possibile specificare che un solo elemento html deve essere gestito mediante una classe http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class <html> <head> <style type="text/css"> p.center{ text-align:center; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> </body> </html>
Background http://www.w3schools.com/css/css_background.asp
Altre proprietà Capito il meccanismo possiamo applicare tabelle simili per formattare il testo, tabelle, form,
Link per i css Documenti: http://www.w3schools.com/ (inglese ) http://css.html.it/guide/ (italiano) http://www.w3schools.com/css/css_examples.asp Software Topsyle http://www.newsgator.com/ Firebug web developer toolbar https://addons.mozilla.org/it/firefox/addon/1843/ https://addons.mozilla.org/it/firefox/addon/60/ Validatore css http://jigsaw.w3.org/css-validator/