Week01 01: Overview - UX-UI-Design-Lab/DH150-UX-WebCoding GitHub Wiki

Objectives:

  1. understand what we will learn/do + how to success (15min)
  2. understand who we are working with: classmates and instructor (15min)
  3. understand the topic of the course, pair discussion (20min)
  4. Start the project research + assignment01
  5. Demonstration: atom and github, and chrome browser's dev tool (30min)

Introduction

As the first class, we will spend some time to understand what we will do together (= learning how to improve ux design with web-code, for accessibility) and who we will work with (classmates and instructor).

  • We will review the syllabus and have some time to share thoughts and questions.
  • This about me might be helpful as an instruction about the instructor.
  • You can find some expectation and communication methods on CCLE

Activity: Accessibility

Let's share some thoughts on accessibility.

  1. what does it mean?
  2. why does it matter, for what?
  3. any helpful resource/examples to learn about it?
  4. any personal experience of hardship in web-accessibility (so ended with bad ux)

This reading/video will be helpful:

I will pair you up for the small-group discussion - while, you take notes (on ccle) what you learned from your partner. After the pair discussion, we will have a short time to share with classmate what you learned.

Start the project & assignment01

The next question would be, how do we know which website is better than the other in terms of accessibility?

We will measure the web-accessibility by using browser's development tool. I will show you how to open the development tool in Chrome browser and how to measure the web accessibility (and SEO).

Step01: List up the five+ museum websites

I will ask you do some research on the websites for your project. In this summer, let's try what we can do for the museum websites. Any kinds of museum should be okay, private/public, art/science or others, and anywhere (but test the English version if possible) any size. Is there any museum you want to visit? Before you put the search keywords, write down some candidates -- like 5 museums. Then, search and check if those museums have their website. Copy the name of the museum + url you found.

For example, I like Getty (who doesn't? :) - I list up the Getty (https://getty.edu/). But I know their research tool website is quite unfinished yet (https://www.getty.edu/research/tools/) -- I may want to analyze this page.

I have heard there is Snoopy museum in CA (did you know that?) - so I searched it (https://schulzmuseum.org/). After navigating the menus, I feel that the timeline page may have some work on accessibility. (https://schulzmuseum.org/timeline/)

Like this, pick at least five candidates and have the url (of the specific page).

To avoid duplication of choices, I may assign a certain condition for each of you.

Step02: open development tool in (chrome) browser and diagnose

I will use Chrome for the main browser. In Chrome, you can open development tool by menu > view > developer > developer tools or right-click on the webpage opened in the browser > inspect.

Go to the far right tab to find "lighthouse"; check accessibility and SEO (desktop); and click "generate report"

Share what you can see as a result. (screen-capture the summary and/or save the report)

  • save the two scores of accessibility and SEO per each website, check all five websites.
  • what do you find it interesting?
  • you should have many questions about the unfamiliar terms and code. We will learn about them one by one.

Setting up

We will explore how to use code editor atom - and you will install it.

  • and write something (text) and save it (as .html)
  • install script plugin to test what you wrote in the browser
  • if there is any issue to use atom as code editor, check code editors and try some of them that may work for your system.

You will be asked to create an account in Github if you don't have any yet.

  • and create a repository (ex. DH150-ux-webcoding) and create the default README.md
  • write something in README.md via github interface and test the preview -- save(commit changes)
  • create a new file, write something, and save it as .html - test the preview -- save(commit changes) -- it may take some time to check because of some backend(server) side process.
  • publish the page and get the url

Test your first file edited from atom to github, then publish it as a webpage.

  • create a new html in atom editor
  • write something, for example (for the draft of your assignment01)
  • Web-accessibility project: XXX
  • DH150, 2021 summar
  • assignment01: setup and notes
  • list of the websites and their scores
  • preview (cmd + i, in mac) or goto atom menu > package > script > run script (it will look different from what you see in the editor, don't be alarmed, we will make it better one by one.)
  • save it (ex. as assignment01.html) in the folder you can manage
  • upload it to github repository (ex. DH150-ux-webcoding from the above)
  • find the url (it will look like this: YOUR_ACCOUNT_NAME.github.io/YOUR_REPOSITORY/filename.html, for example https://ux-ui-design-lab.github.io/DH150-UX-WebCoding/assignment01.html)
  • then, check accessibility and SEO of your assignment01.html
  • what are the scores?
  • can you guess (by the error) how you might improve the score?

note: We might try to connect github account to atom editor - so you can directly push the file to the server. But the ux of this process is not very friendly and need to use command line (terminal). If you feel comfortable with git, please feel free to set it up for your own convenience.

[for the next class] I intensionally did not explain "SEO" - what is that about? In next class, we will invite special guests and learn about accessibility and SEO from industry case study.