I Linguaggi Del Web (1° Giornata)

831 views

Published on

Corso rivolto alla comprensione delle caratteristiche di HTML, XHTML, CSS nel pieno rispetto degli standard e con consapevolezza della compatibilità cross-browser.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
831
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

I Linguaggi Del Web (1° Giornata)

  1. 1. I linguaggi del Web (1° Giorno) Diego La Monica – Web Solution Developer Email: [email_address] web: http://diegolamonica.info Skype: diego.la.monica Mobile: +39 333 7235382
  2. 2. Chi sono? <ul><ul><li>Web solution developer
  3. 3. Membro di IWA/HWG
  4. 4. Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009
  5. 5. Membro del Gruppo di Lavoro Protocols & Format istituito dal W3C per conto di IWA/HWG
  6. 6. Autore del tool “Wi.Li.” http://wili.diegolamonica.info
  7. 7. Autore del framework JavaScript “ JAST” http://jastegg.it
  8. 8. Autore del framework PHP “ALPHA” (di prossima pubblicazione) </li></ul></ul>
  9. 9. Il programma della giornata <ul>Modulo 1 – (X)HTML <li>Cos’è HTML
  10. 10. I tag e la loro rappresentazione
  11. 11. Differenze tra le grammatiche HTML e XHTML
  12. 12. La suddivisione di una pagina
  13. 13. Strutturare una pagina autodescrittiva </li></ul>
  14. 14. Il programma della giornata <ul>Modulo 2 – Stili e Crossbrowsing <li>Cos'è uno stile?
  15. 15. Come si può descrivere lo stile di un elemento
  16. 16. Una cascata di... colori.
  17. 17. Separare l'informazione dalla sua presentazione
  18. 18. Rendere l'idea cross-browser.
  19. 19. L'accessibilità sempre in testa!
  20. 20. Uno sguardo al futuro: HTML 5 vs. XHTML 2 </li></ul>
  21. 21. Modulo 1 - (X)HTML <ul>( e X tensible ) H yper T ext M arkup L anguage </ul>
  22. 22. Cos’è HTML <ul><li>HTML = HyperText Markup Lanaguage
  23. 23. È un linguaggio di strutturazione dei contenuti
  24. 24. È un documento di testo opportunamente strutturato e servito al browser tipicamente come text/html (tramite l’estensione .htm o .html)
  25. 25. Non sono necessari editor per la composizione di una pagina HTML anche se aiutano e rendono veloce lo sviluppo </li></ul>
  26. 26. La sintassi di HTML <ul><li>Non è rigorosa
  27. 27. Ogni tag ha il suo scopo
  28. 28. Esistono diverse versioni di HTML </li></ul><ul><ul><li>L’ultima ufficiale è HTML 4.01
  29. 29. La nuova edizione (l’evoluzione) è HTML 5 ancora in stato di Working Draft </li></ul></ul>
  30. 30. HTML4.01 <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
  31. 31. Commentare il markup <!-- Questo testo non verrà mai renderizzato dal browser, ma sarà presente nell'HTML della pagina -- >
  32. 32. I tag e la loro rappresentazione <ul><li>Un tag è un informazione che struttura un contenuto presente nella pagina.
  33. 33. Un tag è identificato da una parola chiave racchiusa tra parentesi triangolari
  34. 34. Un tag può essere vuoto o può contenere informazioni aggiuntive
  35. 35. Un tag può contenere altre informazioni, e quindi eventuali altri tag al suo interno </li></ul><li> <img> <p>Testo</p> <p>Testo <em>in corsivo</em> </p>
  36. 36. Gli attributi <ul>Ciascun tag ha una serie di caratteristiche (attributi) che ne descrivono l'aspetto semantico e rappresentativo: <li>ASPETTO SEMANTICO: Attributi aumentano la comprensione dell'elemento (alt, longdesc. Title … )
  37. 37. ASPETTO RAPPRESENTATIVO: Attributi che alterano l'aspetto estetico di un elemento: (border, backcolor, background, forecolor, …)
  38. 38. GESTIONE DEGLI EVENTI: Attributi che consentono di programmare il comportamento all'occorrenza di determinati eventi (onclick, onfocus, onblur … ) </li></ul>
  39. 39. La sintassi XML <ul><li>XML = eXtensible Markup Language
  40. 40. XML è più rigoroso: ogni tag aperto deve essere necessariamente chiuso
  41. 41. Esiste una differenza tra documenti XML ben strutturati e documenti XML validi.
  42. 42. XML è una grammatica di base, ciascuna implementazione è un particolare dialetto che aderisce a precise regole. </li></ul>
  43. 43. Introdurre l'XML <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <ul><li>Tutti i browser interpretano correttamente XML (servito come application/xml )
  44. 44. Internet Explorer (almeno fino alla 8) non supporta application/xml (deve essere fornito come text/html ) </li></ul>
  45. 45. Il dialetto XHTML <ul><li>XHTML = eXtensible HyperText Markup Language
  46. 46. È una grammatica XML per descrivere documenti HTML
  47. 47. Esistono diverse versioni di questo dialetto: </li></ul><ul><ul><li>XHTML 1.0 Transitional pensato per consentire una graduale migrazione dei contenuti prodotti in HTML 4.01 verso la nuova grammatica.
  48. 48. XHTML 1.0 Strict per chi produce un contenuto HTML seguendo la “strutturazione formale” di XML </li></ul></ul>
  49. 49. Differenze tra HTML e XHTML DTD HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot;http://www.w3.org/TR/html4/frameset.dtd&quot;> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> XHTML 1.0 Strict <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;>
  50. 50. La struttura di un documento Le informazioni contenute in un documento web sono (o lo possono essere) rivolte a tre diversi fruitori (target della pagina): <ul><li>Informazioni rivolte agli utenti
  51. 51. Informazioni utili per il browser
  52. 52. Informazioni per i motori di ricerca </li></ul>
  53. 53. XHTML come una matrioska <?xml version=&quot;1.0&quot; encodin=&quot;utf-8&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title> Hello world! </title> </head> <body> <div> <h1> Titolo della pagina </h1> <p> Paragraph #1 </p> <div> Sub contents… </div> </div> … <body> </html>
  54. 54. Suddividere una pagina Esistono diverse varianti di una rappresentazione comunque sintetizzata in questo schema Intestazione Corpo Piè di pagina
  55. 55. Suddividere una pagina Una pagina web è tipicamente progettata con le seguenti sezioni: <ul><li>Intestazione </li></ul><ul><ul><li>Logo e altre informazioni primarie </li></ul><li>Corpo </li><ul><li>Contenuti generali (con struttura che tipicamente va da 1 a 4 colonne) </li></ul><li>Piè di pagina </li><ul><li>Recapiti aziendali copyright e Partita IVA </li></ul></ul>
  56. 56. Strutturare l'header Elementi che aiutano a strutturare un buon header: <ul><li>La codifica della pagina ( UTF-8, UTF-16 …)
  57. 57. Indicare un titolo (es. <title>Titolo della pagina</title> )
  58. 58. Una FavIcon
  59. 59. È buona prassi inserire l'autore della pagina
  60. 60. Indicazioni sulla lingua del documento
  61. 61. Indicazioni sui contenuti della pagina
  62. 62. Indicare la durata, parole chiave e descrizione del documento </li></ul>
  63. 63. Strutturare il documento Significa progettare un documento di testo con i corretti accorgimenti. Ciascun capitolo di un libro viene identificato da un numero di capitolo formattato secondo un preciso stile (un intestazione di secondo livello) mentre il titolo di un libro corrisponde ad un'intestazione di primo livello. Una casa con le finestre al posto delle porte non sarebbe una buona casa. Un sito non strutturato rispettando il valore semantico di ciascun elemento, non è un buon sito.
  64. 64. Uno stile che... fa la differenza Fino al 2004 (ma ancora oggi) molti professionisti utilizzavano ForeColor e BackgroundColor o il tag Font per formattare i contenuti di una pagina. Anche l'elemento Table ancora oggi viene impropriamente utilizzato per la strutturazione di layout per il web. Cosa ha contribuito a tutto ciò? <ul><ul><li>Il non aggiornamento professionale dei web-designer
  65. 65. Professionisti non in grado e/o non disponibili ad informare gli altri.
  66. 66. Il mancato o parziale supporto dei browser ai fogli di stile . </li></ul></ul>
  67. 67. Modulo 2 – Stili & Crossbrowsing <ul><li>Cos'è uno stile?
  68. 68. Come si può descrivere lo stile di un elemento
  69. 69. Una cascata di... colori.
  70. 70. Separare l'informazione dalla sua presentazione
  71. 71. Rendere l'idea cross-browser.
  72. 72. L'accessibilità sempre in testa!
  73. 73. Uno sguardo al futuro: HTML 5 vs. XHTML 2 </li></ul>
  74. 74. Cos'è uno stile? È una regola che descrive la presentazione di uno o più elementi (tag) presenti su un documento. border: 1px solid red; Background-color: #ffe; Font-size: 2em; Color: #800;
  75. 75. Stilizzare un elemento - 1 Stile “in linea”. <div style=&quot;border: 1px solid red&quot;> Lorem Ipsum dolor sit amet </div>
  76. 76. Stilizzare un elemento - 2 Stile “sulla pagina”. <style type=&quot;text/css&quot;> div{ border: 1px solid red; Color: #f00; Background-color: #ffe; } </style>
  77. 77. Stilizzare un elemento - 3 Stile “separato dalla pagina”. <link rel=&quot;stylesheet&quot; href=&quot;mioStile.css&quot; media=&quot;screen&quot; />
  78. 78. Descrivere lo stile di un tag h1{ display: block; text-indent: 1em; } div{ font-family: Verdana, Arial, Sans-serif; font-size: 0.8em; }
  79. 79. Attributi speciali id e class <div id=&quot;mio-div&quot; >Lorem Ipsum</div> <div class=&quot;altro-elemento&quot; > Dolor Sit </div> <p class=&quot;altro-elemento&quot; > Amet </p>
  80. 80. Stile in base a id e class #mio-div{ ← In base all'ID … } . altro-elemento{ ← In base alla Classe … }
  81. 81. Una cascata di colori p{ … } ← Applicato a tutti i paragrafi div p{ … } ← Applicato a tutti i paragrafi che sono sotto un DIV div p.myclass{ … } ← Applicato a tutti i paragrafi con classe myclass sotto un DIV
  82. 82. Separare la presentazione dal contenuto “ Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati. ” DM 8 Luglio 2005 – Requisito n. 11 <link rel=”stylesheet” type=”text/css” href=”myStyle.css” /> Oppure: <style type=&quot;text/css&quot;> @import &quot;myStyle.css&quot; </style>
  83. 83. Rendere l'idea cross-browser Ciascun browser interpreta alcune caratteristiche dei CSS indicate nella documentazione W3C in modo arbitrario. Talvolta le caratteristiche vengono implementate solo da alcuni di essi. border-radius: 5px; ← Specifica per angoli arrotondati in CSS3 -moz-border-radius: 5px; ← Versione dello stile definita da Mozilla ( non consente la validazione del CSS ) -webkit-border-radius:5px ← Versione supportata da Safari e Chrome ( non consente la validazione del CSS )
  84. 84. Cross-browser... offuscato... Una caratteristica trattata secondo interpretazione soggettiva è la trasparenza: opacity: 0.9; ← Indica che l'opacità dell'oggetto è del 90%. Su Internet Explorer non funziona… Filter: opacity(alpha=90); ← Versione funzionante per IE... ma il CSS non viene validato
  85. 85. Per pochi... solo per IE... Per consentire a Internet Explorer di caricare dei contenuti che gli altri browser non dovranno interpretare è necessario utilizzare dei tag di commento strutturati in modo particolare: <!--[if lte IE 6]> <p>Paragrafo visto da IE 6 e precedenti</p> <![endif]-->
  86. 86. … e per tutti gli altri? Secondo Microsfot per servire delle parti di HTML a tutti browser ad eccezione di IE è necessario utilizzare la seguente sintassi: <![if !IE]> … <![endif]> Ma il markup diventerà invalido... Soluzione? <!--[if !IE]>--> … <!--<![endif]-->
  87. 87. Codici condizionali di IE Operatore Descrizione IE Identifica Internet Explorer o se seguito da un numero è un vettore di versionamento lt “ Less Than” = Minore Di lte “ Less Than Equal” = Minore o uguale a gt “ Greater Than” = Maggiore di gte “ Greater Than Equal” = Maggiore o uguale a ! Negazione (NOT) & , | Operatori And e Or ( ) Raggruppamento di sottoespressioni True, False Costanti booleane Vero Falso
  88. 88. Problema: il “Box Model” According to the CSS1 specification, released by the World Wide Web Consortium (W3C) in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward.
  89. 89. Il “Box Model”: la soluzione annidare due box, definire in quello più esterno un width pari alla larghezza che si vuole abbia il box, e in quello più interno solo il padding ed il border desiderato. <div class=”esterno”> <div class=”interno”> Lorem Ipsum </div> </div>
  90. 90. L'accessibilità sempre in testa <ul><ul><li>Rispetto degli standard
  91. 91. Aumentare la semantica </li></ul></ul>Perchè? <ul><ul><li>Per garantire alle tecnologie assistive di poter fruire i contenuti
  92. 92. Perchè accessibilità e usabilità viaggiano di pari passo
  93. 93. Perchè i motori di ricerca non guardano... Leggono! </li></ul></ul>“ Fare web e come partecipare ad un gioco: Standard, Accessibilità e Usabilità sono solo alcune delle sue regole. Nessun gioco è bello se non si seguono le regole!”
  94. 94. Back to the future: HTML 5 Il “ W3C HTML Working Group ” dal 2004 (prima si era costituito il WHATWG non facente parte del W3C ) sta lavorando alle nuove specifiche denominate HTML 5 . Pro: Molto più orientato al “Web 2.0” e alle applicazioni su basate su Web Contro: Finquando i vari browser non adotteranno la specifica avremo da occuparci della retrocompatibilità
  95. 95. Alcuni particolari di HTML 5 <ul><ul><li>Il namespace: <!DOCTYPE HTML>
  96. 96. Nuovi elementi più semantici: nav , header , footer , figure
  97. 97. Nuove caratteristiche per gli elementi di un form: required , placeholder
  98. 98. contemplati nuovi type: email , tel , number , date , url </li></ul></ul>
  99. 99. XHTML 2.0… sogno di una notte di mezza estate Nella calda estate del 2009 il W3C ha decretato la chiusura del gruppo di lavoro che si era dedicato alla definizione delle specifiche di XHTML 2. Tra gli italiani del gruppo c'era Alessio Cartocci . Lo scopo ufficiale è stato di veicolare tutte le risorse verso HTML5. XHTML è una serializzazione XML della sintassi HTML pertanto deve seguire e implementare le specifiche HTML con le regole imposte da XML . Il futuro è in HTML5 o, nella versione XML, XHTML 5!
  100. 100. I linguaggi del Web (1° Giorno) Diego La Monica – Web Solution Developer Email: [email_address] web: http://diegolamonica.info Skype: diego.la.monica Mobile: +39 333 7235382

×