BLOG_3

 

Part I – Reviewing this week’s lectures (record in blog)

Page Layout

  1. How exactly can cells be spanned across rows and columns in a table? Provide code and examples.

Cells can be spanned across rows and columns in a table using rowspan and colspan attributes.Rowspan allows a cell to span across multiple rows. For example  rowspan= “2” will stretch that cell aross two rows. Similarly, colspan= “2” will make a single cell span across two columns.

Example of rowspan and columnspan with its output:

Screenshot of code:



Screenshot of output:



  1. How did you find coding tables? Outline positive or negative observations, providing examples.

When it come to working with HTML tables, I find it has both positive and negative aspects.

Positive Observations:

Good for displaying tabular data: Tables are great for showing structured data such as schedules, list, pricing etc. For example, when creating a table to list countries and their cities in question no 1, the information is clearly presented.

Simple Structure: HTML table follows a simple syntax such as <tr> (table rows),<th> (table headers), <td>(table data) which makes it easy to work with table even with basic HTML knowledge.

Flexibility: Tables allows to merge cells using rowspan and colspan which helps to display complex data

Negative Observations:

-Complicated layout can be hard to manage

-Hard to style without CSS

-HTML tables are not mobile friendly.

Cognition

3.     Browse three university websites in the USA (observing content, layout, colour, responsiveness …): https://searchenginesmarketer.com/company/resources/university-college-list/

Chosen three universities websites in USA are:

University of Alaska

Athens State University

Oakwood University

  1. State four features that these websites have in common. You should state which websites you have analysed.

-Clear navigation menus

-Visually appealing with vibrant colours and lots of pictures

-Clear navigation menus

-Responsive design that adjust well across different devices

 

  1. Browse three university websites in Ireland (observing content, layout, colour, responsiveness …): https://www.educationinireland.com/en/Where-can-I-study-/View-all-Universities-Colleges/

Chosen three universities in Ireland are:

University College Dublin

Technological University Dublin

Trinity College Dublin

 

  1. State four features that these websites have in common. You should state which websites you have analysed.

Websites that I have analysed are: University College Dublin, Technological University Dublin and Trinity College Dublin. Four features that these websites have in common are:

-Clean modern layout

-Responsive Design

-Emphasis on International Students

-Consistent color themes

 

  1. Are there noticeable differences between Irish and American universities – content, navigation, theme, mobility….?

Yes, there are noticeable differences which are as follows:

Content Focus: Irish universities focus on international students and research while American universities sites focus on domestic students, financial aid, and campus life.

User Experience: Irish universities focus on simplicity and clarity while American universities often feature more interactive elements and diverse functionalities

Visual themes: Irish universities use conservative color schemes while American universities use bold color schemes.

Mobile Accessibility: Both Irish and American universities are mobile-friendly. But unlike Irish University websites, American universities include more interactive elements like live chats for admissions.

 

 

  1. From reading the many articles that I have tweeted on flat design/skeuomorphism/ neuomorphism /glassmorphism answer the following:

9.     What is the meaning of flat design? What website uses flat design?

Flat design is a simple style of design which uses two dimensional flat shapes. It doesn’t use effects like shadows or 3D textures and focus on clean basic elements. The purpose of choosing such designs is to make websites and apps easy to use and fast to load.

Examples of websites which use flat design are: gmail, google drive, Spotify, Airbnb etc

10.  For each of the following, provide a definition and an example website:

Skeuomorphism: It is the design approach that includes textures, shadows, and visual details that resembles physical materials and objects.

Examples:  Mr. Money Mustache: https://mrmoneymustache.com/

Neuomorphism: It is just like flat design with slight depth, using soft shadows and highlights to create the illusion of raised or recessed elements. It gives a subtle 3D effect to the design.

Examples: Solomidtech: https://solomidtech.webflow.io/

Glassmorphism: In this type of design, glass-like effect is given by use of blur translucent elements which is often paired with vibrant colors and soft shadows. This effect creates depth and layering to the design.

Examples: Reflect: https://reflect.app/

Neubrutalism: This type of design uses harsh contrasts, basic typography and unpolished elements. It is a bold and raw design and is opposite to minimalist design.

Example website: Pancake Web Studio: https://pancakewebstudio.com/

 

 

 

 

 

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

BLOG_4

Image
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. Test your code with the HTML validator ( http://validator.w3.org/ ) and the CSS validator ( http://jigsaw.w3.org/css-validator/ ). (record in blog) What are the problems that are highlighted? No errors or warnings were shown. Were you able to fix them?   Test your code across three browsers. (record in blog) The three browsers i...
Read more