Lab 4

Part 1 - Coding a Fish Creek Website

2. Regarding my HTML files I had, there were no errors or warning to show. Although regarding my CSS file, no errors were found but a few warnings were shown regarding the display properties of the custom navigation menu. I found this navigation menu style sheet on the article ‘A Complete Guide to FlexBox’ (https://css-tricks.com/snippets/css/a-guide-to-flexbox/), but I couldn’t solve this warnings.



3. The code appears to be working the same way in all different tested browsers (Safari, Chrome, Firefox)


--------------------------------------------------------------------------------------------------------------------------

Part II - Web Development Tools

1. Some extensions that I found useful for Chrome were:

Page Ruler
It allows me to render a rule on any webpage with the width, height and position of each element.

Wappalyzer
If I’m on a website and I’m just curious to understand how it works and the technologies it is using I could use this extension and it would detect content management systems, ecommerce platforms, web frameworks, server software, analytic tools and a lot more.

On Firefox:

Web Developer
It has some great features for CSS development and image options such as making all images invisible or check alt tags.

Web Developer Checklist
A simple add on that gives a check list of the usability of a website as SEO, Mobile, Accessibility, Performance and more.


--------------------------------------------------------------------------------------------------------------------------

Part III - Perception & Attention

2. The first game made me realize that contrast is what makes me differentiate two images with more ease. Missing objects previously placed on the background are also more difficult to find. The second game was harder for me. Trying to find similar images inside two circles with a lot of 'noise' is much harder that it seems.

 3) It made me realize that when I can quickly find patterns in an image I can memorize it easier. Images with a lot of noise and asymmetry took longer to memorize. I made use of the Gestalt principles on Continuation and Proximity, trying to make patterns out of the images presented. This exercise can help me better understanding how a user can interact with a website with a large content of information and different resources as images, texts, links, ads, videos.

4) I could count the 15 passes, but while doing it I was unable to see the gorilla. This is relevant to HCI because it uses important cognitive attributes such as perception and attention and checks how both of them work together.


Comments

Post a Comment

Popular posts from this blog

Page Layout & Cognition 1. The attribute colspan can be used in the <td> tag to span a cell to a set number of columns . The attribute rowspan  specifies the number of rows a cell should span. Usage of colspan: <table>   <tr>     <td>TITLE</td>   </tr>   <tr>     <td>Subtitle 1</td>     <td>Subtitle 2</td>     <td>Subtitle 3</td>   </tr> </table> In the example above the table contains 2 rows. The first row contains one cell with the attribute colspan set to value 3. That means this cell will span to 3 cells. Usage of rowspan: <table>   <tr>     <td>Value 1</td>     <td rowspan="2">TOTAL</td>   </tr>   <tr>     <td>Value 2</td>   </tr> </table> In the example above the table contains 2 rows. Because the last cell in the first has the attribute rowspan set to 2, it will span wit
Read more
Today in class we had to discuss about two different articles. “All you need to know about mockups, wireframes, and prototypes” The article explains with some level of detail the differences about these terminologies and why it is important to differentiate them. Wireframes could be viewed as the skeleton of a project. Wireframes should be used by those who want to have a ‘big picture’ of the project right from the start, so they can properly plan right from the start, reducing risks and adding some extra value on future work. The difference of wireframes and mockups is that wireframes mainly focus on the structure while mockups focus on the visuals. While some developers consider the mockups unnecessary, stakeholders are more likely to digest a project with visuals because wireframes require some level of imagination and mockups are closer to the final product. “10 Most Common Web Developer Mistakes” This article highlights what is important to have in mind wh
Read more