Posts

Lab 4 - Part 3 - Perception, Attention & Memory

3. Visual Perception i. Overall result Overall the test said I have a brain age of 35, I suppose this is good as I am 40 years old. ii. Strategy To try remember the order I counted as the balls bounced, this helped me remember the sequence. 4. Visual Memory a. Overall result Overall I got a score of 15700, or to Level 11/20 b. Gestalt Principles I tried to use the Gestalt principles, grouping certain boxes together to remember their location. c. Interaction Designer I found the article on Gestalt principles highly insightful. It explained how the grouping, layout, and use of colour in design can significantly influence how users perceive and interact with an interface. I plan to apply these principles when designing my own interfaces to create more intuitive and visually cohesive user experiences. 5. Attention and Working Memory a. Selectiveness of memory I saw the gorilla... the issue here is that I was an internet user when this video did the rounds 15 years ago, so ...
Post a Comment
Read more

Lab 4 - Part 2 - Web Developer Tools

Image
1. "Developer Tools" Google Chrome Version Used: 141.0.7390.77 (Official Build) (64-bit)/p> a. Mobile Perspective My Fishcreek page does not look good from a mobile perspective as it is not responsive. Much of the website is positioned off the right hand side of the browser window. b. Uses for this tool This tool is very useful I would use it to check compatibility with various screen sizes, namely: a selection of smart phone resolutions, tablet resolutions, and desktop resolutions. 2. Useful Web Development tools for Browsers Firefox Palette Creator Palette Creator is a useful tool for Firefox. I personally find it difficult to come up with colour palettes for my websites. Palette Creator make is easy to create a palette from images on the web. Below I have ran the extension on a tropical beach image and have asked for an 8bit palette. 16bit and 32bit palettes are also available by default.   Say I'm making a webpage dedicated to this dark red vintage Americ...
Post a Comment
Read more

Lab 4 - Part 1 - Coding and Validation

Image
2. Code validator tests Validators used: HTML Validator CSS Validator HTML error(s) I had one error. I had added some images to my Fishcreek website, when adding them, before styling with CSS, I included attributes for "width" and "height". These were not needed. The HTML checker didn't like my use of 100% for width, it expected a value, and "auto" for height. I had the same error for 4 images. Error HTML <img src="fishcreek.jpg" alt="Fish Creek" width="100%" height="auto" class="fishcreek-image"> HTML fix(es) I was able to fix the errors by removing the width and height attributes. This did not change how my website rendered. Fixed HTML <img src="fishcreek.jpg" alt="Fish Creek" class="fishcreek-image"> CSS error(s) I had no CSS errors. However I had a warning. I had accidentally set both the color and background-color property's of m...
Post a Comment
Read more

Lab 3 - Part 1 - Cognition

3. Browse three university websites in the USA (observing content, layout, colour, responsiveness): US Universities Content Layout Colour Responsiveness Webber International University The homepage offers direct access to major categories (Academics, Admissions, etc.). Course offerings, on-campus and online programs, contact and location information are present. Some pages may become text heavy, but the structure is logical. The site uses a consistent navigation bar across pages. Flow is straightforward, with major sections clearly segmented (Programs, Catalogs, About). The “Home Video” page is a special visual section. The university’s official colours are Forest Green & Gold. On the website, dark green is used for headers and accent bars; gold/yellow is used for highlights. The site doe...
Post a Comment
Read more

Lab 3 - Part 1 - Page Layout

1. How exactly can cells be spanned across rows and columns in a table. Cells can be spanned across rows and columns in a table by using colspan and rowspan atributes in <th> or <td> html tags. <th colspan="3">Cell Spanning 3 Columns</th> <td rowspan="2">Cell Spanning 2 Rows</th> The example above shows the general syntax used for colspan and rowspan . Below is example html code used to demonstrate various uses of colspan and rowspan in a table. <style> th, td { padding: 10px; text-align: center; } </style> <table border="1"> <tr> <th colspan="3">Cell Spanning 3 Columns</th> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td rowspan="2">Cell Spanning 2 Rows</td> <td...
Post a Comment
Read more

Lab 2 - Part 3 - SEO

1. What I Learned About SEO I explored the articles from Moz , Hobo , Increasily , Backlinko , Single Grain , Search Engine Journal , Leadfeeder , RankToday , and Google . Each of these articles highlighted best practices for improving search visibility and user experience. ChatGPT’s SEO guidance aligned closely with these sources. The key recommendations that could be confirmed across multiple references were: Use clear, descriptive <title> tags - ideally 50-60 characters, including keywords. This helps both Google and users understand the topic of each page. Structure pages with a single <h1> followed by meaningful <h2> and <h3> headings. This creates a logical hierarchy and improves accessibility. Write helpful, user-focused content that satisfies search intent. Avoid keyword stuffing; relevance and clarity matter more. Include structured data (Schema.org) to help search engines understand your business type and enable rich snippets. ...
Post a Comment
Read more

Lab 2 - Part 2

Q1. Identify 4 Different Uses of <meta> tag : 1. Character Encoding This meta tag specifies which character set the webpage uses. Ensuring letters, symbols, and accents display correctly. <meta charset="UTF-8"> 2. Viewport Settings This tag controls how the page scales and displays on mobile devices, making your webpage responsive. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 3. Page Description This tag provides a short summary of your webpage’s content. Search engines often show this text in search results. <meta name="description" content="This is a sample webpage description"> 4. Robots This tag tells search engines whether to index or follow links <meta name="robots" content="index, follow"> Q3. <meta> tags added to <head> of Fish Creek Website: <head> <meta charset="UTF-8"> <meta name="vi...
Post a Comment
Read more