Web Design 2017/2018

Programma d’esame (valido per studenti che hanno seguito il corso nell’a.a 2017/2018)

Lo studente dovrà preparare un progetto web con in linguaggi HTML5 e CSS. Il sito dovrà proporre il maggior numero di comandi HTML e CSS possibili, naturalmente in modo coerente con la natura del progetto. L’argomento del sito può essere scelto a piacere. Il sito potrà avere un numero libero di pagine ma, indicativamente, è richiesta una complessità di almeno 5 pagine oltre alla home page (in totale, quindi, almeno 6 pagine).

Per la preparazione dell’esame, si consiglia di consultare le apposite guide di HTML e CSS sul sito HTML.it, oppure sul sito W3Schools

E’ possibile utilizzare il framework Bootstrap.

Il sito dovrà essere inviato almeno 7 giorni prima al docente via e-mail all’indirizzo andrea.crevola@gmail.com.

L’invio del progetto via e-mail è necessario per poter sostenere l’esame.

Ad ogni e-mail sarà inviata una risposta di “ricevuta”. Qualora non la riceviate entro 12 ore, siete autorizzati a spedire nuovamente i materiali o chiedere notizie.

Queste le date di consegna, appello per appello, nel 2019:

• appello del 25/1/2019: consegna entro le ore 24:00 di venerdì 18/1/2019
• appello del 15/2/2019: consegna entro le ore 24:00 di venerdì 8/2/2019
• appello del 19/4/2019: consegna entro le ore 24:00 di venerdì 12/4/2019
• appello del 17/6/2019: consegna entro le ore 24:00 di lunedì 10/6/2019
• appello del 5/7/2019: consegna entro le ore 24:00 di venerdì 28/6/2019
• appello del 26/7/2019: consegna entro le ore 24:00 di venerdì 19/7/2019
• appello del 6/9/2019: consegna entro le ore 24:00 di venerdì 30/8/2019
• appello del 18/11/2019: consegna entro le ore 24:00 di lunedì 11/11/2019

Non sono previste deroghe o eccezioni.
Si consiglia di non spedire i materiali all’ultimo momento… 

Hai delle domande? Lascia un commento qui sotto.

Esempi affrontati a lezione

Scarica file

Dispense

• PDF_01_WD_2017_intro-analisi
• PDF_02_WD_2017_content-strategy
• PDF_03_WD_2017_architettura-progettazione
• PDF_04_WD_2017_mobile-usability
• PDF_05_WD_2017_web-development
• PDF_06_WD_2017_workflow

HTML5 / CSS

• Guida HTML, http://www.html.it/guide/guida-html/ NOTA BENE: considerare solo le lezioni fino alla n. 23
• Guida CSS, http://www.html.it/guide/guida-css-di-base/

Bibliografia del corso

Contenuti & Web writing

• Pernice K., “F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)”, https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
• Karen McGrane, “Your Content, Now Mobile”,http://alistapart.com/article/your-content-now-mobile
• Jackob Nielsen, “How users read on the web”http://www.nngroup.com/articles/how-users-read-on-the-web/
• Jackob Nielsen, “Photos as web content”http://www.nngroup.com/articles/photos-as-web-content/

Web usability

• Shneiderman B, “The Eight Golden Rules of Interface design” https://www.cs.umd.edu/users/ben/goldenrules.html
• Mobify Blog, “Understanding Mobile User Experience: the 3 Modes of Mobile Usage”,http://www.mobify.com/insights/understanding-mobile-user-experience-the-3-modes-of-mobile-usage/
• Nielsen J., “Mobile content is twice as difficult”,http://www.nngroup.com/articles/mobile-content-is-twice-as-difficult/
• Nielsen J., “SEO and Usability”http://www.nngroup.com/articles/seo-and-usability/
• Nielsen J., “10 Usability Heuristics for User Interface Design”, http://www.nngroup.com/articles/ten-usability-heuristics/

Web writing & contenuti

• Reading contents on mobile
  https://www.nngroup.com/articles/mobile-content/
• Fonts & readability
  https://www.nngroup.com/articles/glanceable-fonts/
• Come gli utenti leggono online
  https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
• Why the page fold is still important
  https://www.nngroup.com/articles/page-fold-manifesto/
• Scrolling & attention
  https://www.nngroup.com/articles/scrolling-and-attention/
• How little do user read? (del 2008, ma ancora attuale)
  https://www.nngroup.com/articles/how-little-do-users-read/

Architettura dell’informazione

• Usability.gov, “Card sorting”, https://www.usability.gov/how-to-and-tools/methods/card-sorting.html

Accessibilità

• W3C WAI, “Web Content Accessibility Guidelines (WCAG) 2.0”,http://www.w3.org/TR/WCAG/
• HTML: una buona base per l’accessibilità
  https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/HTML_accessibilit%C3%A0
• “Metodologia per la verifica soggettiva legge Accessibilità”:http://www.pubbliaccesso.gov.it/normative/DM080705-B.htm
• Gallo S., “How Various Screen Readers Work on Mobile Devices”, http://equalentry.com/how-various-screen-readers-work-on-mobile-devices/
• Bailey E. “ARIA is Spackle, Not Rebar”, https://css-tricks.com/aria-spackle-not-rebar/
• Kearney M., Gash D., Boxhall A, “Introduction to ARIA”, https://developers.google.com/web/fundamentals/accessibility/semantics-aria/
• AAVV, “WAI-ARIA Authoring Practices 1.1”, https://www.w3.org/TR/wai-aria-practices-1.1/
• McKenna A., “Writing Baseline Accessible Markup and Styles”, https://dev.to/adammcquiff/writing-baseline-accessible-markup-and-styles
• Schenk L., “Advocating for Accessible UI Design”, https://css-tricks.com/advocating-for-accessible-ui-design/
• Myers M. “5 Common Misconceptions About Web Accessibility”, https://www.24a11y.com/2017/5-common-misconceptions-web-accessibility/
• Dalton A., “Web Content Accessibility Guidelines—for People Who Haven’t Read Them”, https://24ways.org/2017/wcag-for-people-who-havent-read-them/
• Screen Reader User Survey, https://webaim.org/blog/survey7results/

Web Development

• Ethan Marcotte, “Responsive Web Design”, http://www.italianalistapart.com/articoli/17-numero-7-8-giugno-2010/71-web-design-reattivo
• John Allsopp, “A Dao of web design”, http://alistapart.com/article/dao
• Viljamis Blog, “Responsive workflow”,http://viljamis.com/blog/2012/responsive-workflow/
• “Google Webmaster Guidelines”,http://support.google.com/webmasters/bin/answer.py?hl=it&answer=35769
• “Google Checklist per Webmaster”,http://support.google.com/webmasters/bin/static.py?hl=it&page=checklist.cs&tab=1095579
• Aaron Gustafson, “Understanding Progressive Enhancement”,http://alistapart.com/article/understandingprogressiveenhancement
• S. Champeon, N. Finck, “Inclusive Web Design for the Future”,http://www.hesketh.com/thought-leadership/our-publications/inclusive-web-design-future
• “Graceful Degradation”:http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement
• Aaron Gustafson, “Progressive Enhancement with CSS”,http://alistapart.com/article/progressiveenhancementwithcss
• Aaron Gustafson, “Progressive Enhancement with Javascript”,http://alistapart.com/article/progressiveenhancementwithjavascript
• Jackob Nielsen, “Mobile Site Vs Full Site”,http://www.nngroup.com/articles/mobile-site-vs-full-site/
• Stephanie Rieger, “Strategies for choosing test devices”,http://stephanierieger.com/strategies-for-choosing-test-devices/

Mobile

• Mobile web best practices”, http://mobilewebbestpractices.com/
• Karolina Szczur, “Think Again: Assumptions About Mobile To Reconsider”, http://mobile.smashingmagazine.com/2013/01/18/assumptions-about-mobile-to-reconsider/
• Built by boon Blog, “Responsive Design case study”,http://builtbyboon.com/blog/responsive-design-case-study
• Jackob Nielsen, “Mobile content: if in doubt, leave it out”,http://www.nngroup.com/articles/condense-mobile-content/
• Jackob Nielsen, “Mobile Sites vs. Apps: The Coming Strategy Shift”,http://www.nngroup.com/articles/mobile-sites-vs-apps-strategy-shift/
• Jackob Nielsen, “Mobile usability update”,http://www.nngroup.com/articles/mobile-usability-update/
• Jackob Nielsen, “Optimizing a screen for mobile use”,http://www.nngroup.com/articles/optimizing-a-screen-for-mobile-use/

Altro

• Eric Meyer, CSS Reset http://meyerweb.com/eric/tools/css/reset/
• Ms calculator http://www.jan-quickels.de/tools-web-typography/
• Jeffrey Zeldman, “Understanding Web Design”,http://alistapart.com/article/understandingwebdesign