Lab4 & Blog4


Part 1 - Testing HTML and CSS codes


What are the problems?



The errors that the validator detected were mainly caused by mistakenly placed </p> paragraph end without a <p>start, and misplaced <h6> subheader.



As for the CSS




Fortunately, CSS only detected a single problem, I went to fix the code but I couldn't how so I just rewrote it and I got fixed somehow. As for HTML, once I got rid of the </p> everything seemed better. Yet I still got some errors saying not enough space in my "a" links but I couldn't find a way to fix it, even though website definitely works as I planned. 


I tried my code on 3 browsers: Safari, Google Chrome and Firefox.  I am not sure if it is related with me writing the codes and checking websites with the first two browsers but they all seemed same, and there was no differences that I detected.



4. Trying the CSS game.


I got to level 13, which is pretty embarrassing but I found the game to be enjoyable actually.  I realized the reason I struggled through the game maybe because when I was creating  my CSS scripts, I mainly changed w3schools codes into how I needed them. Might be a lot enjoyable for me when I write the codes by myself and get the hang of it. Overall, its a fun way to get used to the codes of CSS.


PART2


Research and describe one other extension/add-on that could be helpful when developing a website for each of the following browsers:


Firefox: SEoquake The SEO Audit tool, the Keyword Density report, Internal/External Link Analysis, Social Metrics, and many others are all included in SEOquake which can improve SEO in easy ways.

Google Chrome: Colorpick Eyedropper, is a tool that can easily identify colors in every page with their color codes. Even though it might not be needed all the times it's handy to have it, I think.

Chrome: Check my links: In blog #1, while mentioning about most common design mistakes, I picked expired or not working links as a major design mistake because I simply believe, as a user, it is frustrating to come across a link that you think may help you, but end up with a dissapoinmnet. This extension prevents that and I believe it could be a handy tool for any developers.


Part III - Perception, Attention & Memory

Visual Perception: I did 9 in the first game, I think I may do better at a day where my eyes are not tired as much, but still.

The method I used was to make a pattern of the light bulbs in my mind and follow them. This method works great when there are no repeating attributes. 

Visual Memory: Considering I was too tired starting the exercise and was using a terrible internet without an actual mouse but a touchbar,  I think I did fairly good scoring 16/20. 

I did use the Gestalt principles without knowing what they were. I do consider myself a visual learner which I believe is the reason for this behavior. 

It is a good exercise about detecting the focus of the user which might enhance the interaction knowledge. 


Test Attention & Working Memory:

I counted the passing of the ball and saw the gorilla in the meanwhile. I think even though I am focused on something, I tend to still be aware of whats happening around. 

I belive what this video indicates is that, some content displayed is not gonna get any attention if there is too much going on.










Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Lab2nd Part II and III– Using "meta" and other tags for SEO

Resim
SEO in the Fish Creek Hospital Web Page  Search engine optimization (SEO) is a crucial element to be considered while designing websites, for websites to be search-friendly and easy to locate on search engines. Usage of proper titles and headers increases SEO drastically with the help of relevant tags on the html script. Meta tags are also another great way to optimize what will be displayed in the search engines. Meta tags might be applied for keywords, site description, author name etc. (as can be seen on the Fish Creek Animal Hospital Site). Alt tags and internal links are considered just as important in terms of SEO while designing the page.       In future web designs, I will be using titles/headers/meta tags/ alt tags and both internal and external links via 'nav' and 'a' tags so that the designed website will appear accordingly to user needs.  While designing Fish Creek Website, I implemented mostly descriptive meta tags alongside essential titl...
Devamı

Lab 3& Blog3 - Analysing Websites & Starting CSS

Resim
Page Layout   The website I analyzed is oitheblog.com, it's a travel guide website, that I have been using for a couple of years, I find its design pretty appealing and also user-friendly While looking through their coding tables I realized it was well structured and well organized as well as well designed.  It is simply decorated and coded. The majority of the flow included div/span and class tags which I found reasonable. Cognition - Q3 - Q7 US University Websites Analyzed universities are: 1-   Brown University 2-  Texas A&M University 3-  MIT 4-   University of St. Louis From an initial look, the major similarity I detected between US websites, was visual variety. In 3 out of four pages used videos on their home page. It is easy to tell that all sites are focused on advertisement rather than information as well as TU Dublin's site. Only MIT's website is more informative with the amount of research advertisement they have. Overall, I found all 4 webs...
Devamı

Blog1& Lab 1st - Beginning Web Development

Resim
Beginning Web Development  Part 2. A    Wire-framing vs. prototyping: What’s the difference? A wireframe is a web page layout that shows what interface features will be present on key pages. Whereas prototypes are more detailed, visually structured representations. Prototypes, allow users to evaluate the interface and interactions of a digital product, and this interactivity can be beneficial during application usability testing.                                                                                                        Image Credit: bluearcher.com Even though wireframes and prototypes serves the aim of displaying the final product in web design, they do differ in several ways in terms of how detaile...
Devamı