BLOG_4

Part I – Coding a Fish Creek Website

1. Alter your Fish Creek code (from previous labs) to use the following:

a.      Classes and ids

b.     Centring layers

c.      The position attribute

d.     The float attribute

The screenshot of updated code of Fish Creek Website with above mentioned alteration is as follows:

index.html code 






 services.html code




            styles.css code 


Ensure No. 1 is complete before you answer 2 & 3.

  1. Test your code with the HTML validator (http://validator.w3.org/ ) and the CSS validator (http://jigsaw.w3.org/css-validator/ ). (record in blog)
    1. What are the problems that are highlighted?

No errors or warnings were shown.

  1. Were you able to fix them?

 

  1. Test your code across three browsers. (record in blog)
    The three browsers in which code is tested are:
    -Brave Browser
    -Microsoft edge
    -Google Chrome
    1. Were there any?
      The code works well in these three websites.
    2. If so, were you able to fix them?

  2. Try the following CSS game: http://flukeout.github.io/ (record in blog)
    1. What level did you get to?
      I get to level 15.
    2. What did you learn from the game??
      This game is a very interactive way to learn CSS. It uses real life everyday elements to teach the concept of CSS selector.

 

Part II – Web Development Tools (record in blog)

  1. Look at the “Developer Tools” in the Chrome Browser and answer the following:
    1. What does your page look like from a mobile perspective?
      The page looks good fit to mobile screen. All the elements are visible.

    2. What will you use this tool for when developing a website?
      -To plan website before coding
      -To write, organize and manage code
      -For debugging
      -To test websites compatibility on different devices.
      -To track user behavior and improve the site

  2. Research and describe one other extension/add-on that could be helpful when developing a website for each of the following browsers:
    1. Firefox
      Firebug is the extension/add-on that could be helpful when developing a website for Firebox. Firebug is useful for inspecting codes, debugging, and testing changes before applying to website.

    2. Chrome
      Lighthouse is other extension/add-on that could be helpful when developing a website for Chrome browser. Lighthouse is used for performance audits, accessibility checks, SEO audits and progressive web app testing.

Part III – Perception, Attention & Memory (record in blog)

  1. Visual perception (attention and memory)

Play the following games - https://www.freebrainagegames.com/  

                           i.          Comment on how you did overall.

I achieved an overall brain age of 35.

                         ii.          Comment on what strategies you used to get the best score you could.

- In first game, I focused on the ball that lights, in second game I only saw the color of text and avoid reading it. In third game I tried to remember the words with same letters and in fourth game, I tried to follow the yellow diamonds with my eyes. In summary, to get the best results, I tried to focus on the specific task of the game.

  1. Visual memory – play the following game: https://www.proprofs.com/games/pattern-memory/  

a.      Comment on how you did.

I reached level 5 and scored 12100.

b.     Did you use the Gestalt principles (https://www.interaction-design.org/literature/topics/gestalt-principles ) during this game?

Yes, recognizing patterns and grouping similar objects together.

c.      How can this exercise help you as an interaction designer?

This exercise helps interaction designer to understand how user perceive and remember visual memory. Interaction designer can create more user-friendly and interactive design that enhance user experiences.

 

 

  1. Testing attention & working memory – do the following activity: https://youtu.be/vJG698U2Mvo
    1. How selective was your attention?

I managed to count 15 passes as I was only counting the passes made by players wearing white shirts, ignoring other players.

    1. How is this relevant to usability?

The concept of selective attention is relevant to usability in design. In user interface design, it is required to focus on the specific details that are important to user instead of cluttering the website with less important details. Design should be simple, clear and user centric.

 

 

 

  

Comments

Post a Comment

Popular posts from this blog

BLOG_2

  LAB 2 Part II – Using <meta> in an HTML5 page 1.      Identify four different uses of the meta tag . Four different uses of the metadata are: 1.SEO optimization: The meta tag is used to provide search engines with information about the content of web page. 2.Character set declaration: The meta tag defines the character encoding for the document .For example “UTF-8” ensures the page can display special characters and symbols correctly. 3. Meta refresh(redirect) tag: This tag is used to automatically refresh or redirect the user to another URL. 4. Meta Cache-Control: This tag instruct the webpage not to cache the webpage   1.                Copy the head section/make a screenshot of one of the web pages with the meta tag and paste into your blog.   <head> <!--Meta tag for character set--> <meta charset="UTF-8"> <!--Meta tag for descript...
Read more

BLOG_1

  LAB 1 Part I Read the following article:     https://www.invisionapp.com/inside-design/wireframe-prototype-difference/ a.      In ChatGPT, investigate the disadvantages of using wireframes and prototypes. Copy and paste the output of ChatGPT into your blog Disadvantages of Wireframes 1.Lack of Detail ·        Visual limitations ·        Interaction Limitations 2.Miscommunication ·        Unrealistic Expectations ·        Over-focus on Layout 3.Time-consuming for Complex Projects 4.Limited Usability Testing   Disadvantages of Prototypes 1.High Resource Demand ·        Time and Cost ·        Iteration Burden 2.Misleading Fidelity ·        False Confidence ·        Neglecti...
Read more