Lezione1

  • 403 views
Uploaded on

Lezione 1 di Web Design, Gruppi A-D

Lezione 1 di Web Design, Gruppi A-D

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
403
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
27
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WEB DESIGN I VALERIA BRIGATTI LUCA GUARINI webdesign.naba@gmail.commartedì 6 novembre 2012
  • 2. OBIETTIVI DEL CORSOmartedì 6 novembre 2012
  • 3. ★ creare un sito “statico” ★ capire HTML e CSSmartedì 6 novembre 2012
  • 4. Per domande, dubbi, aiuto, scrivete a: webdesign.naba@gmail.commartedì 6 novembre 2012
  • 5. AGENDA DEL CORSOmartedì 6 novembre 2012
  • 6. IL CORSO È SUDDIVISO IN 11 LEZIONI.martedì 6 novembre 2012
  • 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. LIBRI CONSIGLIATImartedì 6 novembre 2012
  • 9. martedì 6 novembre 2012
  • 10. martedì 6 novembre 2012
  • 11. martedì 6 novembre 2012
  • 12. martedì 6 novembre 2012
  • 13. SUL WEBmartedì 6 novembre 2012
  • 14. martedì 6 novembre 2012
  • 15. MODALITÀ DI VALUTAZIONEmartedì 6 novembre 2012
  • 16. test a crocette su HTML test a crocette su CSS Progetto finale: realizzazione sito webmartedì 6 novembre 2012
  • 17. IL WEB DESIGNmartedì 6 novembre 2012
  • 18. Il Web Design è il processo di pianificazione e creazione di un sito.martedì 6 novembre 2012
  • 19. FRONT-ENDmartedì 6 novembre 2012
  • 20. È la parte del sito visibile ai visitatori: contenuto, struttura, grafica, azioni possibili.martedì 6 novembre 2012
  • 21. ✓ Web Designer ✓ Grafico ✓ UX Designer ✓ Information Architect ✓ UI Designer ✓ Content Strategist ✓ Art Directormartedì 6 novembre 2012
  • 22. BACK-ENDmartedì 6 novembre 2012
  • 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. ✓ developer/programmatore • PHP, ASP, Java, C • MySQL, SQLmartedì 6 novembre 2012
  • 25. COSA FA IL WEB DESIGNER?martedì 6 novembre 2012
  • 26. Il web designer "progetta" il sito e lo realizza mediante HTML, CSS e JavaScript.martedì 6 novembre 2012
  • 27. ARGOMENTI DEL CORSOmartedì 6 novembre 2012
  • 28. Web Standards ★ HTML (contenuto e struttura del sito) ★ CSS (presentazione, aspetto del sito)martedì 6 novembre 2012
  • 29. BREVISSIMA STORIA DEL WEBmartedì 6 novembre 2012
  • 30. martedì 6 novembre 2012
  • 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. 1993 1994 Nascono molti nuovi browser Il primo browser web. Unix, Mac, Windows Netscape Navigator 1995 Microsoft Internet Explorermartedì 6 novembre 2012
  • 33. BROWSER WARSmartedì 6 novembre 2012
  • 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. 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. WEB STANDARDSmartedì 6 novembre 2012
  • 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. • 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. 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. 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. WaSP portò alla creazione di browsers standards-compliantmartedì 6 novembre 2012
  • 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. 2003 Dimostra come lʼintero design possa cambiare pur mantenendo la stessa identica struttura: separazione tra struttura e aspettomartedì 6 novembre 2012
  • 44. PERCHÉ SEPARARELA STRUTTURADALLA PRESENTAZIONE?martedì 6 novembre 2012
  • 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. ‣ 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. ‣ 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. HTML, XHTML & HTML5martedì 6 novembre 2012
  • 49. HTMLmartedì 6 novembre 2012
  • 50. HYPER TEXT MARKUP LANGUAGEmartedì 6 novembre 2012
  • 51. ‣ Un insieme di elementi che descrive la struttura di un documento. ‣ Markup ≠ programmazionemartedì 6 novembre 2012
  • 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. ‣ 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. XHTMLmartedì 6 novembre 2012
  • 55. EXTENSIBLE HYPER TEXT MARKUP LANGUAGEmartedì 6 novembre 2012
  • 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. martedì 6 novembre 2012
  • 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. CSSmartedì 6 novembre 2012
  • 60. CASCADING STYLE SHEETmartedì 6 novembre 2012
  • 61. Permettono di controllare laspetto di ogni elemento HTML/XHTML/HTML5.martedì 6 novembre 2012
  • 62. martedì 6 novembre 2012
  • 63. TOOLSmartedì 6 novembre 2012
  • 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. Sublime Text 2 http://www.sublimetext.com/martedì 6 novembre 2012
  • 66. 2. Alcuni browsermartedì 6 novembre 2012
  • 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. 3. Firebugmartedì 6 novembre 2012
  • 69. 4. Un editor di immaginimartedì 6 novembre 2012
  • 70. 5. Un client FTPmartedì 6 novembre 2012
  • 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. XHTMLmartedì 6 novembre 2012
  • 73. ELEMENTImartedì 6 novembre 2012
  • 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. ‣ 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. martedì 6 novembre 2012
  • 77. martedì 6 novembre 2012
  • 78. martedì 6 novembre 2012
  • 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. martedì 6 novembre 2012
  • 81. <html> È lʼelemento che contiene lʼintera pagina web.martedì 6 novembre 2012
  • 82. HEAD, TITLE & BODYmartedì 6 novembre 2012
  • 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. <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. martedì 6 novembre 2012
  • 86. <body> Tutto quello che viene inserito tra <body> e </body>, verrà visualizzato nella finestra del browser.martedì 6 novembre 2012
  • 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. RIASSUNTOmartedì 6 novembre 2012
  • 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. ‣ 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. ‣ 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. 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. COMPITImartedì 6 novembre 2012
  • 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