Your SlideShare is downloading. ×
0
Webdesigndalla teoria alla pratica     11/10/2011     prof. Carlo Frinolli
• Principi di tipografia [~2h]          (rif. typographybasics.pdf)   • Tipografia applicata: i testi e gli oggetti tipografi...
principi di tipografia
Principi di tipografiaL’oggetto di questa parte di lezione sono i LIBRI.Grossomodo i libri sono fatti di flusso di testi; qu...
Flusso di testo indistintoLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbicommodo, ipsum sed pharetra gravi...
FontFamiglie• Serif  Esempio di font serif• Sans Serif  Esempio di font sans-serif• Mono-Spaced  Esempio di font sans-serif
FontStili• Plain  Esempio di plain• Bold  Esempio di bold• Italic  Esempio di italic• Bold Italic  Esempio di bold italic
FontStili• Underline  Esempio di underline• Small caps  ESEMPIO DI SMALL CAPS• Superscript, Subscript (vd. pdf)
FontStili• Underline  Esempio di underline• Small caps  ESEMPIO DI SMALL CAPS• Superscript, Subscript (vd. pdf)Spaziature ...
Titoli• Annunciano il contenuto del blocco di testo successivo• Hanno l’utilità di separare un flusso indistinto di   conte...
Titoli
Paragrafi                               ¶• Separano i blocchi di testo fra loro• Aiutano la lettura e guidano l’occhio• Rag...
Paragrafi
ListeUna lista serve per ordinare dei punti. In queste slide ne uso aiosa. :)Liste non ordinate: servono per elencare punt...
Tabelle, foto e figureL’oggetto tabella è necessario solo quando è necessariomostrare dei dati tabellari, appunto.Le immagi...
il parallelo digitale:      ipertesti
dal testo all’ipertestohttp://www.youtube.com/watch?v=6gmP4nk0EOE
L’ipertesto diventa codiceOgnuno degli oggetti tipografici che abbiamo visto haun parallelo in HTML.Ne faremo una brevissim...
ParalleliFont                                      font-family (CSS)Titoli                                    <h1>, <h2>, ...
La novità degli ipertesti: i collegamenti  Un ipertesto è un insieme di documenti messi in relazione tra loro tramite  par...
strutturare i dati:i linguaggi di markup
Markup Language (wikipedia)A markup language is a modern system for annotating atext in a way that is syntactically distin...
HyperText Markup LanguageHTML è un linguaggio semantico e descrittivo delle pagineweb, formalizzato a metà anni ’80 da Tim...
Documenti HTMLGli ipertesti descritti con il linguaggio HTML sonotipicamente dei file (di estensione html, htm o shtml),che...
DOM - Document Object Modelda http://it.wikipedia.org/wiki/Document_Object_ModelIl Document Object Model (spesso abbreviat...
HTML: tagIn HTML il contenuto è generalmente compreso tra una coppia diparole chiave proprie del linguaggio, dette tag, ch...
HTML: struttura
HTML: il doctypeDefinisce gli elementi leciti allinterno del documento. Non sipossono usare altri elementi se non quelli de...
HTML: la headLa sezione <head> di una pagina HTML contiene informazioni utili dalpunto di vista del browser, e della descr...
HTML: <head>Un altro TAG notevole per la scrittura di pagine HTMLnel modo corretto è <meta>.Esso permette di inserire dati...
HTML: <meta> e SEOI motori di ricerca (Google, Yahoo, e altri)periodicamente scandagliano la rete con dei softwaremolto si...
HTML: facebookQuando sharate un link su Facebook, parsa la paginaalla ricerca di 3 cose:<title></title><meta name="descrip...
HTML: il bodyQuesta è la sezione più interessante per l’utente.In questa viene incluso tutto il contenuto e la suarelativa...
HTML: i tag principali<h1>, <h2>, ..., <h6> definiscono i titoli<p> racchiudono un paragrafo<br>, <br /> è un a capo automa...
<h1>, ..., <h6>Come nei libri e nei testi formattati possono essereutilizzati per annunciare il contenuto successivo(tipic...
<p>, <br>, <strong>, <em>Mentre <p> descrive al browser che il contenuto saràun paragrafo, gli altri avvertono lo stesso, ...
<ul>, <ol>, <li>Le liste sono estremamente importanti in HTML.Descrivono ovviamente delle liste di oggetti, ma sonocontinu...
<a>È probabilmente la ragione del successo di internet.<a> sta per ancora e permette di ancorare il contenuto del tag con ...
<img>Assieme alle ancora rappresenta un pilastro delwebdesign.È il tag necessario per includere immagini all’interno diun ...
accessibilità dei contenutiIl flusso di codice HTML può essere visualizzato sia con browserlato utente normodotato (Mozilla...
scrittura del codice, indentazione,               commentiNegli esempi precedenti il codice era spesso scritto senzatroppi...
compito per casa
Es 2: Scrittura di una pagina base HTML Necessario: Textedit o notepad.exe Tempo: 10’ Obiettivo: A partire dalla pagina 1....
programma                       - parte seconda -• I comportamenti di default [~2h]  • ex cursus dei principali comportame...
I comportamenti di     default
ex cursus dei comportamenti dei tag
Cascading StylesheetI fogli di stile a cascata, meglio noti con lacronimo CSS(dallinglese Cascading Style Sheet) e detti a...
Selettori e proprietàSulla falsa riga dell’HTML con TAG e attributi, i CSS lavorano conla triade• Selettore• Proprietà• Va...
Selettori e proprietàIl principio del CSS è quello di cambiare l’aspetto delleentità HTML per piegarlo alle esigenze di pr...
Selettori e proprietàLe direttive CSS si possono applicare in vari modiTAGh1 { color:white; }il colore bianco si applica a...
Selettori e proprietàCLASSI.first_title { color:white; }il colore bianco si applica a TUTTI i tag HTML dellapagina web che ...
Selettori e proprietàIDENTIFICATORI#unique_id_1 { color:white; }il colore bianco si applica a TUTTI i tag HTML dellapagina...
Includere un CSS in una paginaPer includere un file CSS e poter godere delle direttive degli stessi, si hanno alcuneopzioni...
Resettiamo tutti i comportamenti default  Questa pratica, comunemente inclusa in un file  reset.css è molto consigliata per...
padroneggiare l’apparenza
Perché Cascading?Il principio di funzionamento dei CSS è legato all’ordinein cascata con cui le direttive si applicano.es....
scrittura del codice, indentazione,               commentiNegli esempi precedenti il codice era spesso scritto senzatroppi...
I miei contattiemail: carlo.ied@nois3lab.itfacebook: www.facebook.com/carlo.frinollitwitter: @carl0s_
Upcoming SlideShare
Loading in...5
×

Open web programming

475

Published on

Le slide del corso di

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
475
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Open web programming"

  1. 1. Webdesigndalla teoria alla pratica 11/10/2011 prof. Carlo Frinolli
  2. 2. • Principi di tipografia [~2h] (rif. typographybasics.pdf) • Tipografia applicata: i testi e gli oggetti tipografici • Il parallelo digitale: gli ipertesti • quicklab• Strutturare i dati: i linguaggi di markup [~2h] • HTML (HyperText Markup Language) • L’accessibilità dei contenuti • Commenti, indentazione e leggibilità del codice • quicklab
  3. 3. principi di tipografia
  4. 4. Principi di tipografiaL’oggetto di questa parte di lezione sono i LIBRI.Grossomodo i libri sono fatti di flusso di testi; questisono composti da alcuni oggetti base che ripercorriamo:• Font (stili, famiglie e comportamenti)• Titoli• Paragrafi• Liste (ordinate, non ordinate)• Tabelle, foto o figurela terminologia usata può non essere ortodossa in tipografia ma ha un senso per ilparallelo con gli elementi HTML
  5. 5. Flusso di testo indistintoLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbicommodo, ipsum sed pharetra gravida, orci magna rhoncus neque, idpulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velitvitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Namconsectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nuncullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donecporttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursusvenenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida,diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pedenibh eget odio. Proin tincidunt, velit vel porta elementum, magna diammolestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusceet ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra
  6. 6. FontFamiglie• Serif Esempio di font serif• Sans Serif Esempio di font sans-serif• Mono-Spaced Esempio di font sans-serif
  7. 7. FontStili• Plain Esempio di plain• Bold Esempio di bold• Italic Esempio di italic• Bold Italic Esempio di bold italic
  8. 8. FontStili• Underline Esempio di underline• Small caps ESEMPIO DI SMALL CAPS• Superscript, Subscript (vd. pdf)
  9. 9. FontStili• Underline Esempio di underline• Small caps ESEMPIO DI SMALL CAPS• Superscript, Subscript (vd. pdf)Spaziature di carattereSpaziature di linea
  10. 10. Titoli• Annunciano il contenuto del blocco di testo successivo• Hanno l’utilità di separare un flusso indistinto di contenuti• Dichiarano una gerarchia innestata di contenuti e blocchi di testo
  11. 11. Titoli
  12. 12. Paragrafi ¶• Separano i blocchi di testo fra loro• Aiutano la lettura e guidano l’occhio• Raggruppano argomenti simili• Possono avere un interlinea o del margine fra di loro
  13. 13. Paragrafi
  14. 14. ListeUna lista serve per ordinare dei punti. In queste slide ne uso aiosa. :)Liste non ordinate: servono per elencare punti senza particolareenfasi sull’ordine in cui lo si fa• esempio di• lista• non• ordinataListe ordinate: servono per elencare punti con particolare enfasisull’ordine in cui lo si fa1. esempio di2. lista3. non4. ordinata
  15. 15. Tabelle, foto e figureL’oggetto tabella è necessario solo quando è necessariomostrare dei dati tabellari, appunto.Le immagini o figure possono seguire il flusso del testoo interromperlo. È buona pratica dare sempre “aria” adesse per lasciare all’utente la sensazione di cura.
  16. 16. il parallelo digitale: ipertesti
  17. 17. dal testo all’ipertestohttp://www.youtube.com/watch?v=6gmP4nk0EOE
  18. 18. L’ipertesto diventa codiceOgnuno degli oggetti tipografici che abbiamo visto haun parallelo in HTML.Ne faremo una brevissima carrellata.
  19. 19. ParalleliFont font-family (CSS)Titoli <h1>, <h2>, ..., <h6>Paragrafi <p>Liste (ordinate, non ordinate) <ul>, <ol>, <dl>Tabelle, foto, figure <table>, <img>
  20. 20. La novità degli ipertesti: i collegamenti Un ipertesto è un insieme di documenti messi in relazione tra loro tramite parole chiave. Può essere visto come una rete; i documenti ne costituiscono i nodi. La caratteristica principale di un ipertesto è che la lettura può svolgersi in maniera non lineare: qualsiasi documento della rete può essere "il successivo", in base alla scelta del lettore di quale parola chiave usare come collegamento. È possibile, infatti, leggere allinterno di un ipertesto tutti i documenti collegati dalla medesima parola chiave. La scelta di una parola chiave diversa porta allapertura di un documento diverso: allinterno dellipertesto sono possibili praticamente infiniti percorsi di lettura. (wikipedia) A differenza dei testi scritti a mano o stampati, gli ipertesti hanno come caratteristica principale quella di poter richiamare altri ipertesti tramite il meccanismo di collegamento ipertestuale. Questo meccanismo è il cuore del funzionamento della rete internet e delle reti in generale.
  21. 21. strutturare i dati:i linguaggi di markup
  22. 22. Markup Language (wikipedia)A markup language is a modern system for annotating atext in a way that is syntactically distinguishable from thattext. The idea and terminology evolved from the "markingup" of manuscripts, i.e. the revision instructions byeditors, traditionally written with a blue pencil on authorsmanuscripts.[...]Markup is typically omitted from the version of the textwhich is displayed for end-user consumption. Somemarkup languages, like HTML have presentationsemantics, meaning their specification prescribes how thestructured data is to be presented, but other markuplanguages, like XML, have no predefined semantics.(wikipedia)
  23. 23. HyperText Markup LanguageHTML è un linguaggio semantico e descrittivo delle pagineweb, formalizzato a metà anni ’80 da Tim Berners-lee e havisto la sua esplosione a metà degli anni ’90.Non è un linguaggio di programmazione ed è improprioparlare di programmazione di pagine HTML.Descrive, invece, la struttura e il contenuto di documentiipertestuali che possono essere visualizzati (parsati) dasoftware specifici (tipicamente browser internet come MozillaFirefox).Un parallelo reale di un linguaggio di Markup può essere quellodelle correzioni di una maestra su un compito di un alunno.
  24. 24. Documenti HTMLGli ipertesti descritti con il linguaggio HTML sonotipicamente dei file (di estensione html, htm o shtml),che risiedono su un computer o un server (un computerche è in grado di servire una richiesta).La chiamata a un file HTML da un browser restituiscelato utente il contenuto dello stesso con la relativaforma data dalla descrizione HTML.
  25. 25. DOM - Document Object Modelda http://it.wikipedia.org/wiki/Document_Object_ModelIl Document Object Model (spesso abbreviato come DOM), letteralmentemodello a oggetti del documento, è una forma di rappresentazione deidocumenti strutturati come modello orientato agli oggetti.DOM è lo standard ufficiale del W3C per la rappresentazione di documentistrutturati in maniera da essere neutrali sia per la lingua che per lapiattaforma. DOM è inoltre la base per una vasta gamma delle interfacce diprogrammazione delle applicazioni; alcune di esse sono standardizzate dalW3C.
  26. 26. HTML: tagIn HTML il contenuto è generalmente compreso tra una coppia diparole chiave proprie del linguaggio, dette tag, che aggiungono leinformazioni descrittive necessarie.ES:<title>questo è il titolo di pagina</title>in questo esempio il TAG è <title><p>questo è un paragrafo</p>in questo esempio il TAG è <p><a href=”questo è un attributo” title=”questo è un altroattributo”>questo è il contenuto di un ancora</a>in questo esempio il TAG <a> con due attributi: title e href.
  27. 27. HTML: struttura
  28. 28. HTML: il doctypeDefinisce gli elementi leciti allinterno del documento. Non sipossono usare altri elementi se non quelli definiti. Una specie di"vocabolario" per i file che lo useranno.Nei casi di interesse per noi i doctype saranno di tre tipi almassimo:• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">• <!DOCTYPE html> HTML5
  29. 29. HTML: la headLa sezione <head> di una pagina HTML contiene informazioni utili dalpunto di vista del browser, e della descrizione del documento, ma nonvengono visualizzate propriamente dallo stesso a favore dell’utente.ECCEZIONI: • <style>, <script> style e script, pur non visualizzando direttamente nulla sul browser, possono influire fortemente sulle modalità di visualizzazione delle pagine HTML • <title> il contenuto del tag <title> infatti viene visualizzato dal browser come titolo della pagina
  30. 30. HTML: <head>Un altro TAG notevole per la scrittura di pagine HTMLnel modo corretto è <meta>.Esso permette di inserire dati non visibili all’utente mautili alle macchine che (tramite browser) possonotrovarli utili.<meta><meta name="description" content="Free Web tutorials" /><meta name="keywords" content="HTML,CSS,XML,JavaScript" /><meta name="author" content="John Doe" /><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
  31. 31. HTML: <meta> e SEOI motori di ricerca (Google, Yahoo, e altri)periodicamente scandagliano la rete con dei softwaremolto simili a un browser (spiders vd. Matrix).Sono software automatizzati qui non sono in grado diriprodurre immagini, video, colori o stili particolari.Per questo in un buon codice HTML l’attenzione a regoleelementari di accessibilità ci permettono di avere dellepagine che sono già SEO friendly.
  32. 32. HTML: facebookQuando sharate un link su Facebook, parsa la paginaalla ricerca di 3 cose:<title></title><meta name="description" content="Free Webtutorials" /><link rel="image_src" href="/path/to/main_image.jpg" />
  33. 33. HTML: il bodyQuesta è la sezione più interessante per l’utente.In questa viene incluso tutto il contenuto e la suarelativa descrizione che va visualizzato da un browser.Poiché si tratta di un sistema per la visualizzazione diipertesti, la sua apparenza di base è molto simile aiprincipi di tipografia che abbiamo visto prima.
  34. 34. HTML: i tag principali<h1>, <h2>, ..., <h6> definiscono i titoli<p> racchiudono un paragrafo<br>, <br /> è un a capo automatico<strong> rappresenta il grassetto<em> rappresenta il corsivo o enfatizzato<ul>,<ol> definiscono le liste rispettivamente non ordinate e ordinate<li> rappresenta l’elemento di lista<a> è l’elemento di collegamento interno o ipertestuale<img>, <img /> è necessario per mostrare delle immagini collegate<table> si usa esclusivamente per rendere dati tabellari(approfondimenti successivi)rif: http://www.w3schools.com/tags/
  35. 35. <h1>, ..., <h6>Come nei libri e nei testi formattati possono essereutilizzati per annunciare il contenuto successivo(tipicamente un paragrafo o una lista o una tabella).Buona norma: in una pagina HTML l’<h1> riprende il<title> per una migliore indicizzazione da parte deimotori di ricerca.Inoltre è buona norma usare un solo <h1> per pagina(pro memo: i documenti hanno in genere un solo titoloe alcuni sottotitoli. Qui è lo stesso).es: <h2>questo è un titolo di secondo livello</h2>
  36. 36. <p>, <br>, <strong>, <em>Mentre <p> descrive al browser che il contenuto saràun paragrafo, gli altri avvertono lo stesso, e quindil’utente dell’interruzione di riga <br>, di un contenutoimportante <strong>, o enfatizzato <em>.N.B.: è sempre preferibile usare <strong> e <em>rispetto a <b> e <i> (bold e italic) perché questi ultimidue descrivono delle proprietà meramente estetiche delcontenuto e non delle proprietà semantiche.es: <p>questo paragrafo contiene unariga<br>interrotta e una parola molto<strong>importante</strong> e una molto<em>enfatizzata</em></p>
  37. 37. <ul>, <ol>, <li>Le liste sono estremamente importanti in HTML.Descrivono ovviamente delle liste di oggetti, ma sonocontinuamente utilizzate per descrivere contenuti di menu.La loro natura permette di leggere come un unico oggettotutto il contenuto.es: (vd. 2.html)<ul><li>questo è un elemento di lista non ordinata</li><li>questo è un altro elemento di lista non ordinata</li></ul><ol><li>questo è un elemento di lista ordinata</li><li>questo è un altro elemento di lista ordinata</li></ol>
  38. 38. <a>È probabilmente la ragione del successo di internet.<a> sta per ancora e permette di ancorare il contenuto del tag con unelemento all’interno dell’attributo href.<a href=”/path/to/file.est”>parola</a> da linkare.best practices è buona norma evitare di includere dentro una <a> molteparole. Risulta fuorviante per l’utente.È ottima norma aggiungere sempre l’attributo title nelle ancora. Permette agliutenti di sapere cosa è linkato.Oltre a file esterni è possibile linkare parti del documento stesso con il tag<a>.In particolare la sintassi è <a href=”#nomeancora”>ancora interna</a>,questa farà riferimento a un <a name=”nomeancora”></a> come si vedenell’es. 3.html
  39. 39. <img>Assieme alle ancora rappresenta un pilastro delwebdesign.È il tag necessario per includere immagini all’interno diun flusso di documento.Per questa ragione è buona norma utilizzarlo concoscienza dal punto di vista della visualizzazione e delleinterfacce.es: <img src=”path/to/image.est” alt=”contenutodescrittivo delle immagini” />
  40. 40. accessibilità dei contenutiIl flusso di codice HTML può essere visualizzato sia con browserlato utente normodotato (Mozilla Firefox, Google Chrome,Safari, IE), o con altri dispositivi assistivi per utenti ipodotati.Per questo la scrittura di un documento descrittivo come l’HTMLnon dovrebbe mai prescindere dai vari possibili usi di questo.L’uso comune e corretto degli attributi principali è necessarioaffinché il codice HTML sia portabile su software più comunicome su software meno comuni.Ricordati sempre di aggiungere un title=”” alle ancore.Ricordati sempre di aggiungere un alt=”” alle immagini.
  41. 41. scrittura del codice, indentazione, commentiNegli esempi precedenti il codice era spesso scritto senzatroppi criteri.MALE!Il codice HTML non morirà con te!Qualcun altro ci metterà le mani o tu lo erediterai daqualcun altro! Mettilo in condizione di riuscire a leggerlo.Usa i commenti <!-- questo è un commento --> consaggezza e in maniera descrittiva per te e per gli altri.es: 4.html e 5.html
  42. 42. compito per casa
  43. 43. Es 2: Scrittura di una pagina base HTML Necessario: Textedit o notepad.exe Tempo: 10’ Obiettivo: A partire dalla pagina 1.html, predisporre link interni a tutti i titoli dei paragrafi, e creare collegamenti esterni verso i seguenti siti: www.repubblica.it www.nois3lab.it http://corriere.it mailto:carlo.ied@nois3lab.it Inoltre predisporre tutti i tag scorsi nella pagina.
  44. 44. programma - parte seconda -• I comportamenti di default [~2h] • ex cursus dei principali comportamenti visivi dei tag • Cascading Style Sheet • Selettori e proprietà • Prima di cominciare• Padroneggiare l’apparenza [~2h] • Cascading e gerarchie • Cambiare l’aspetto dei principali tag. • Commenti, indentazione e leggibilità del codice
  45. 45. I comportamenti di default
  46. 46. ex cursus dei comportamenti dei tag
  47. 47. Cascading StylesheetI fogli di stile a cascata, meglio noti con lacronimo CSS(dallinglese Cascading Style Sheet) e detti anche semplicementefogli di stile, vengono usati per definire la rappresentazione didocumenti HTML, XHTML e XML. Le regole per comporre i fogli distile sono contenute in un insieme di direttive(Recommendations) emanate a partire dal 1996 dal W3C.Lintroduzione dei fogli di stile si è resa necessaria per separare icontenuti dalla formattazione e permettere una programmazionepiù chiara e facile da utilizzare, sia per gli autori delle pagineHTML che per gli utenti.
  48. 48. Selettori e proprietàSulla falsa riga dell’HTML con TAG e attributi, i CSS lavorano conla triade• Selettore• Proprietà• Valore
  49. 49. Selettori e proprietàIl principio del CSS è quello di cambiare l’aspetto delleentità HTML per piegarlo alle esigenze di presentazionesenza intaccarne la sostanza e il contenuto.Prima di continuare introduciamo due altri TAG html chesono fondamentali<div> definisce una divisione o sezione di una paginaHTML<span> è un espediente HTML per attribuire uncomportamento visuale al testo HTML, senza intaccarneil senso né il contenuto.
  50. 50. Selettori e proprietàLe direttive CSS si possono applicare in vari modiTAGh1 { color:white; }il colore bianco si applica a TUTTI gli <h1> della paginawebp { color: red; }il colore rosso si applica a TUTTI gli <p> della paginaweb
  51. 51. Selettori e proprietàCLASSI.first_title { color:white; }il colore bianco si applica a TUTTI i tag HTML dellapagina web che hanno un attributo class=”first_title”.second_title { color: red; }il colore rosso si applica a TUTTI i tag HTML della paginaweb che hanno un attributo class=”second_title”
  52. 52. Selettori e proprietàIDENTIFICATORI#unique_id_1 { color:white; }il colore bianco si applica a TUTTI i tag HTML dellapagina web che hanno un attributoid=”unique_id_1”#unique_id_2 { color: red; }il colore rosso si applica a TUTTI i tag HTML dellapagina web che hanno un attributoid=”unique_id_2”ATTENZIONE: affinché una pagina sia validasecondo W3C xHTML 1.0 strict è necessario che gliid siano chiamati univocamente
  53. 53. Includere un CSS in una paginaPer includere un file CSS e poter godere delle direttive degli stessi, si hanno alcuneopzioni; la posizione formalmente corretta di questo codice è all’interno di<head></head>Link del file esterno<link rel="stylesheet" type="text/css" href="foglio_di_stile.css">import del file esterno<style type="text/css">@import url(foglio_di_stile.css);</style>scrittura del css nella pagina<style type=”text/css”>/* put your css here */</style>
  54. 54. Resettiamo tutti i comportamenti default Questa pratica, comunemente inclusa in un file reset.css è molto consigliata per avere da subito il pieno controllo del foglio di stile e per revocare i comportamenti di default di browser bizzarri (IE :)) Per questo nei nostri progetti includeremo sempre un file reset.css http://meyerweb.com/eric/tools/css/reset/
  55. 55. padroneggiare l’apparenza
  56. 56. Perché Cascading?Il principio di funzionamento dei CSS è legato all’ordinein cascata con cui le direttive si applicano.es.: test.html
  57. 57. scrittura del codice, indentazione, commentiNegli esempi precedenti il codice era spesso scritto senzatroppi criteri.MALE!Il codice CSS non morirà con te!Qualcun altro ci metterà le mani o tu lo erediterai daqualcun altro! Mettilo in condizione di riuscire a leggerlo.Usa i commenti /* questo è un commento */ consaggezza e in maniera descrittiva per te e per gli altri.es: test.html
  58. 58. I miei contattiemail: carlo.ied@nois3lab.itfacebook: www.facebook.com/carlo.frinollitwitter: @carl0s_
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×