Posts

Showing posts from October, 2021

Web and User Interface - Lab 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 (Completed in Notepad++) 2. Test your code with the HTML validator (http://validator.w3.org/ ) and the CSS validator (http://jigsaw.w3.org/css-validator/ ).  a. What are the problems that are highlighted?  HTML Validator (I had 4 x HTML pages on my Fish Creek website): index.html = I got 6 errors and a warning. I was advised in the 'warning' to consider adding a 'lang' attribute to the html to declare what language the page is in. Most of the Errors were the same as each other and consisted of the message telling me that " Element dt not allowed as child of element body in this context ".  python.html =  I got 1 error and a warning. They were the same error and warning as above mentioned in index.html.  askthevet.html = I got 1 error and a war...

Web and User Interface - Lab 3

Image
Part I – Reviewing this week’s lectures  Question  1.  Select one website that you visit the most. Draw its wireframe and identify its different divs or layers (header, footer, etc) BBC News wireframe (bbc.com/news) Above is a wireframe of the BBC News website which I visit at least once a day. My drawing is a bit out of scale. The main advertisement actually accounts for about 40-45% of the total length of the page, pushing the main content down to the bottom of the screen, along with a secondary content section. Beside these there is another space for advertisement, in this case taken up by an ad for Maldron hotels. It's a very image based page, and I usually click the picture above the story to go to the story because it's easier than clicking the text. There aren't plain blocks of text on the page, so I'm not sure where the divs are. Clicking into 'View page source' and searching 'div' indicates that there are many on the page, but it looks quite com...

Web and User Interface - Lab 1

Image
Part I – Beginning Web Development 1. Create a blog to document your Web & User Interface lab work. Welcome to my blog! 2. (a)  Wireframing versus prototyping. ( First observation ): The main difference between wireframing and prototyping is the ‘fidelity’ of each – that is, how closely the test examples of each match what the final webpage product will look like. Wireframing can be done by using a pen and paper and can be thought of as the 'skeleton view' of how a webpage will eventually look, showing outlines of structure and layout of the page. Simplicity is key.  ( Second observation ):   Prototypes are the next stage in the product design process and show colour, animations and the content the page will have. It looks like a more finished product but it is still not finished fully.  They allow a user to test a webpage’s interface and interactions. 2. (b)  The 10 Most Common Web Design Mistakes. ( First observation ):  Simplicity, as well as minim...