Lezione1

770 views

Published on

Lezione 1 di Web Design, Gruppi A-D

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

No Downloads
Views
Total views
770
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Lezione1

  1. 1. WEB DESIGN I VALERIA BRIGATTI LUCA GUARINI webdesign.naba@gmail.commartedì 6 novembre 2012
  2. 2. OBIETTIVI DEL CORSOmartedì 6 novembre 2012
  3. 3. ★ creare un sito “statico” ★ capire HTML e CSSmartedì 6 novembre 2012
  4. 4. Per domande, dubbi, aiuto, scrivete a: webdesign.naba@gmail.commartedì 6 novembre 2012
  5. 5. AGENDA DEL CORSOmartedì 6 novembre 2012
  6. 6. IL CORSO È SUDDIVISO IN 11 LEZIONI.martedì 6 novembre 2012
  7. 7. ‣ Sviluppo di siti mediante standard Web ‣ HTML ‣ CSS ‣ Nozioni di usabilità ‣ Differenze tra grafica per il Web e per la stampa ‣ Nozioni di accessibilitàmartedì 6 novembre 2012
  8. 8. LIBRI CONSIGLIATImartedì 6 novembre 2012
  9. 9. martedì 6 novembre 2012
  10. 10. martedì 6 novembre 2012
  11. 11. martedì 6 novembre 2012
  12. 12. martedì 6 novembre 2012
  13. 13. SUL WEBmartedì 6 novembre 2012
  14. 14. martedì 6 novembre 2012
  15. 15. MODALITÀ DI VALUTAZIONEmartedì 6 novembre 2012
  16. 16. test a crocette su HTML test a crocette su CSS Progetto finale: realizzazione sito webmartedì 6 novembre 2012
  17. 17. IL WEB DESIGNmartedì 6 novembre 2012
  18. 18. Il Web Design è il processo di pianificazione e creazione di un sito.martedì 6 novembre 2012
  19. 19. FRONT-ENDmartedì 6 novembre 2012
  20. 20. È la parte del sito visibile ai visitatori: contenuto, struttura, grafica, azioni possibili.martedì 6 novembre 2012
  21. 21. ✓ Web Designer ✓ Grafico ✓ UX Designer ✓ Information Architect ✓ UI Designer ✓ Content Strategist ✓ Art Directormartedì 6 novembre 2012
  22. 22. BACK-ENDmartedì 6 novembre 2012
  23. 23. È la parte "non visibile" del sito che ne rende possibile il funzionamento: programmazione lato server (PHP, ASP, etc.), database (MySQL, SQL, etc.).martedì 6 novembre 2012
  24. 24. ✓ developer/programmatore • PHP, ASP, Java, C • MySQL, SQLmartedì 6 novembre 2012
  25. 25. COSA FA IL WEB DESIGNER?martedì 6 novembre 2012
  26. 26. Il web designer "progetta" il sito e lo realizza mediante HTML, CSS e JavaScript.martedì 6 novembre 2012
  27. 27. ARGOMENTI DEL CORSOmartedì 6 novembre 2012
  28. 28. Web Standards ★ HTML (contenuto e struttura del sito) ★ CSS (presentazione, aspetto del sito)martedì 6 novembre 2012
  29. 29. BREVISSIMA STORIA DEL WEBmartedì 6 novembre 2012
  30. 30. martedì 6 novembre 2012
  31. 31. 1991 1993 World Wide Web rilascia il codice Tim Berners-Lee sorgente del World Wide Web, che diventa HYPERTEXT di pubblico dominiomartedì 6 novembre 2012
  32. 32. 1993 1994 Nascono molti nuovi browser Il primo browser web. Unix, Mac, Windows Netscape Navigator 1995 Microsoft Internet Explorermartedì 6 novembre 2012
  33. 33. BROWSER WARSmartedì 6 novembre 2012
  34. 34. Microsoft e Netscape puntarono a: • implementare nuove caratteristiche piuttosto che sistemare i problemi con quelle esistenti • creare, in maniera incompatibile, nuove funzionalità in competizione con quelle già implementate dagli altri browsermartedì 6 novembre 2012
  35. 35. Quindi, gli sviluppatori erano spesso costretti a sviluppare più versioni dello stesso sito per renderlo visibile su tutti i browser, oppure "ottimizzare" un sito per la visione su uno specifico browser.martedì 6 novembre 2012
  36. 36. WEB STANDARDSmartedì 6 novembre 2012
  37. 37. Tim Berners-Lee fonda il World Wide Web Consortium 1994 (W3C) al MIT, con il supporto di CERN, ARPA e Commissione Europea. Obiettivo: standardizzare i protocolli e le tecnologie utilizzate per creare il web, per far sì che il contenuto sia accessibile a tutti.martedì 6 novembre 2012
  38. 38. • Il W3C pubblica “recommendations”, ossia specifiche “consigliate” ma non obbligatorie • Es.: HTML 4.0, PNG, CSS • Il W3C non pone fine alle “browser wars” • 1998: per creare una pagina Web visibile da tutti era necessario conoscere 5 versioni di JavaScriptmartedì 6 novembre 2012
  39. 39. 1998 WaSP Obiettivo: far diventare le “recommendations” del W3C degli standard a cui devono adeguarsi tutti i browser (ossia Netscape e Microsoft allepoca).martedì 6 novembre 2012
  40. 40. www.webstandards.org "The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. We work with browser companies, authoring tool makers, and our peers to deliver the true power of standards to this medium."martedì 6 novembre 2012
  41. 41. WaSP portò alla creazione di browsers standards-compliantmartedì 6 novembre 2012
  42. 42. REDESIGN CON GLI STANDARD WEB 2001 2002 2003 Diventa leader nel supporto degli standard web e delle nuove tecnologie.martedì 6 novembre 2012
  43. 43. 2003 Dimostra come lʼintero design possa cambiare pur mantenendo la stessa identica struttura: separazione tra struttura e aspettomartedì 6 novembre 2012
  44. 44. PERCHÉ SEPARARELA STRUTTURADALLA PRESENTAZIONE?martedì 6 novembre 2012
  45. 45. ‣ Codice più efficiente: se mettiamo tutto in un file HTML, questo sarà più grande, quindi più pensante da scaricare, perciò più lento e più costoso. ‣ Siti più facili da mantenere: si può cambiare laspetto di un elemento solo nel CSS, con leffetto di cambiarlo in tutte le pagine HTML in cui è presente.martedì 6 novembre 2012
  46. 46. ‣ Accessibilità: le tecnologie assistive utilizzano le informazioni di struttura invece di quelle di presentazione. I documenti Web con markup semantico sono più facilmente navigabili e si accede al loro contenuto più facilmente. ‣ Compatibilità con più dispositivi: con diversi CSS si può visualizzare la stessa pagina.martedì 6 novembre 2012
  47. 47. ‣ Ai motori di ricerca piacciono gli Standard: il "crawler" cerca il contenuto e la struttura del documento, che deve essere semantica per segnalare al motore di ricerca cosa è importante e cosa non lo è. ‣ Separare contenuto, presentazione e comportamento è il modo migliore per sviluppare un sito o una app.martedì 6 novembre 2012
  48. 48. HTML, XHTML & HTML5martedì 6 novembre 2012
  49. 49. HTMLmartedì 6 novembre 2012
  50. 50. HYPER TEXT MARKUP LANGUAGEmartedì 6 novembre 2012
  51. 51. ‣ Un insieme di elementi che descrive la struttura di un documento. ‣ Markup ≠ programmazionemartedì 6 novembre 2012
  52. 52. ‣ Usato per specificare il contenuto e la struttura di un documento e per definirne il significato di ciascuna parte ‣ È quello che contiene tutto il testo, le immagini, etc., che vedete in un sito Web ‣ Utilizza degli "elementi" (detti anche "tag") per identificare le varie componenti di una pagina Web. Questi dicono al browser come interpretare linformazione che contengono.martedì 6 novembre 2012
  53. 53. ‣ Il markup deve essere quanto più semantico possibile, ossia deve descrivere la funzione del contenuto. ‣ Es.: un titolo sarà descritto da un elemento "heading", un paragrafo da un elemento "paragraph", un elenco da un elemento "list".martedì 6 novembre 2012
  54. 54. XHTMLmartedì 6 novembre 2012
  55. 55. EXTENSIBLE HYPER TEXT MARKUP LANGUAGEmartedì 6 novembre 2012
  56. 56. Porta in HTML le regole sintattiche più stringenti di XML (eXtensible Markup Language), ossia: - tutti i tag e gli attributi devono essere minuscoli - ogni tag aperto deve avere il corrispondente tag di chiusura - nessun elemento né attributo nuovo rispetto a HTMLmartedì 6 novembre 2012
  57. 57. martedì 6 novembre 2012
  58. 58. ‣ backward-compatible con HTML ‣ aggiunge funzionalità potenti per lo sviluppo di applicazioni web ‣ include funzionalità prima possibili solo con plugin o JavaScriptmartedì 6 novembre 2012
  59. 59. CSSmartedì 6 novembre 2012
  60. 60. CASCADING STYLE SHEETmartedì 6 novembre 2012
  61. 61. Permettono di controllare laspetto di ogni elemento HTML/XHTML/HTML5.martedì 6 novembre 2012
  62. 62. martedì 6 novembre 2012
  63. 63. TOOLSmartedì 6 novembre 2012
  64. 64. 1. Un editor di testo (es., Notepad, Text, TextWrangler, etc.) o un IDE (es., Panic Coda, Sublime Text 2, Notepad++) o una Web Development app (es., Adobe Dreamweaver)martedì 6 novembre 2012
  65. 65. Sublime Text 2 http://www.sublimetext.com/martedì 6 novembre 2012
  66. 66. 2. Alcuni browsermartedì 6 novembre 2012
  67. 67. Statistica di utilizzo dei browser - Settembre 2012 Internet Explorer Firefox 5% 16% Chrome 5% Safari 4% Opera Android Altro 23% 29% 19% Wikimedia Traffic Analysis Report - Browsers, 2012-09, Wikimediamartedì 6 novembre 2012
  68. 68. 3. Firebugmartedì 6 novembre 2012
  69. 69. 4. Un editor di immaginimartedì 6 novembre 2012
  70. 70. 5. Un client FTPmartedì 6 novembre 2012
  71. 71. Visualizzare il sorgente ‣ Sorgente: codice della pagina, ossia (X)HTML e CSS ‣ Nel browser, aprire una pagina web. Fare click con il tasto destro del mouse e poi cliccare su "Visualizza sorgente". Se la pagina è in HTML o XHTML, verrà visualizzato il sorgente.martedì 6 novembre 2012
  72. 72. XHTMLmartedì 6 novembre 2012
  73. 73. ELEMENTImartedì 6 novembre 2012
  74. 74. ‣ Gli elementi sono i mattoni costitutivi di (X)HTML. ‣ Dicono al browser che funzione ha un certo oggetto allinterno della pagina. Ad es., se è un paragrafo, un titolo, una citazione, etc. ‣ Contengono tutte le informazioni di cui necessita il browser.martedì 6 novembre 2012
  75. 75. ‣ Un elemento di (X)HTML comincia e finisce con dei tag: il tag di apertura e il tag di chiusura ‣ Un tag è costituito dal simbolo <, seguito da del testo ed infine dal simbolo >. ‣ Allinterno di un tag cè il nome del tag ed opzionalmente uno o più attributi.martedì 6 novembre 2012
  76. 76. martedì 6 novembre 2012
  77. 77. martedì 6 novembre 2012
  78. 78. martedì 6 novembre 2012
  79. 79. Cosè un attributo? ‣ Gli elementi di (X)HTML possono avere diversi attributi, che cambiano a seconda dellelemento e danno al browser delle informazioni aggiuntive sul contenuto dellʼelemento. ‣ Gli attributi si trovano solo nel tag di apertura. ‣ Ogni attributo è composto da una coppia Nome-Valore: name="value". ‣ Alcuni sono opzionali, altri obbligatori.martedì 6 novembre 2012
  80. 80. martedì 6 novembre 2012
  81. 81. <html> È lʼelemento che contiene lʼintera pagina web.martedì 6 novembre 2012
  82. 82. HEAD, TITLE & BODYmartedì 6 novembre 2012
  83. 83. <head> Si trova sempre prima dellʼelemento <body>. Contiene le informazioni che riguardano la pagina ma che non vengono visualizzate nella finestra del browser.martedì 6 novembre 2012
  84. 84. <title> È il titolo vero e proprio della pagina HTML o il nome del sito. Non viene visualizzato dentro la finestra del browser, ma fuori, sul bordo superiore o sul tab del browser.martedì 6 novembre 2012
  85. 85. martedì 6 novembre 2012
  86. 86. <body> Tutto quello che viene inserito tra <body> e </body>, verrà visualizzato nella finestra del browser.martedì 6 novembre 2012
  87. 87. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> DOCTYPE: Document Type Definition ‣ deve essere il primissimo elemento della pagina, prima di qualunque spazio bianco o testo o "invio" ‣ identifica la versione di HTML in uso ‣ il browser usa questa informazione per decidere come rendere gli oggetti sullo schermomartedì 6 novembre 2012
  88. 88. RIASSUNTOmartedì 6 novembre 2012
  89. 89. ‣ Le pagine HTML sono documenti testuali ‣ LʼHTML usa i tag (parole chiave circondate da < e >) per dare un particolare significato al contenuto che si trova tra il tag di apertura e il tag di chiusuramartedì 6 novembre 2012
  90. 90. ‣ Spesso si usa la parola “elementi” per far riferimento ai tag ‣ Gli attributi si trovano nei tag di apertura e danno delle informazioni aggiuntive riguardo al contenuto dellʼelementomartedì 6 novembre 2012
  91. 91. ‣ Gli attributi sono composti da nome_attributo=”valore” ‣ Per usare lʼHTML dovete conoscere i tag che vi mette a disposizione, la loro funzione e dove metterli.martedì 6 novembre 2012
  92. 92. Link ➡ Infographic: "A Brief History of Web Standards" - http://goo.gl/DgkpL ➡ WaSP: http://www.webstandards.org/ ➡ Tim Berners-Lee: http://goo.gl/J26H4 ➡ W3C: http://www.w3.org/ ➡ Opera Web Standards Curriculum: http://goo.gl/Erki3martedì 6 novembre 2012
  93. 93. COMPITImartedì 6 novembre 2012
  94. 94. ✓ Scaricare e installare Firefox, Chrome e Sublime Text 2. ✓ Installare Firebug in Firefox (https:// addons.mozilla.org/it/firefox/addon/ firebug/). ✓ Cominciare a pensare ad un layout per il proprio sito web personale per lesame.martedì 6 novembre 2012

×