Coding Introduction

This exercise consisted in the introduction of both HTML and CSS code.

First we started with some basic HTML code:

Above there is a screen shot of the first code we did. Over here we were introduced how to do a title (what is going to be written on the tab of the browser), the header of the website, how to put an image with alternative text to it, how to write normal content and finally how to do a hyper-link.

After that we were asked to do a similar exercise but more personalized, and to do the hyper-link within the image.

The day after we were introduced to the CSS code:

After we did a new HTML code/page we started to arrange that content by CSS. In this stage we were taught how to change the font type and size, how to align the text, how to change a background colour, how to do a border, how to arrange the position of a specific part of content with the margin, padding and overflow and finally how to section different parts by given them an ID name.

Accessibilty

For this exercise we had to check if the website we chose (in my case www.imdb.com) has accessibilities, so user with any disabilities could use it also, and even if something goes wrong in the actual content of the website, the user still will be ale to know what he is supposed to see or watch.

To do so we used the WebAIM Checklist which included several guidelines which helped us determine whether or not the website we chose is accessible or not.

Here I'm going to talk about some of the guidelines listed, starting with the first guideline; "Text Alternatives: Provide text alternatives for any non-text content". The imdb website has no text alternatives and this could been noticed when the images were disabled no text replaced them to show what's supposed to be there.

Images Visible

Images Disabled

Another guideline is; "Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure". The imdb website is adaptable as everything is sectioned and titled, and that makes it easier to read the content, even if the layout would be a subject to change.

Another guideline that I found this website has, is; "Distinguishable: Make it easier for users to see and hear content including separating foreground from background". Regarding colour only black is used for the text, blue for the links and all of this is set on a light grey background, making it easy for the user to read.

Another guideline is; "Keyboard Accessible: Make all functionality available from a keyboard". Although it is a bit complicated and takes some time to be done, this guideline is also covered by this website.

Above I mentioned some of the few guidelines the imdb website has or not, that makes it accessible; all this could be done thanks to the WebAIM Checklist which can be found here: http://webaim.org/standards/wcag/checklist

Frameworks

The website I'm working with (www.imdb.com) has one of the simplest framework one can use; and that is the 960 Grid System. Basically this type of framework uses a grid system based on a width of 960 pixels, and all the information will be put in that area. With this method the content won't be responsive to the window, that means if the size of the window is changed the content will stay in the same place, it won't move regardless the size of the window.

Probably this kind of framework is used because of the kind of content the website has; videos, images, lists, and text, so all these won't change its place, because it might not make sense.

A framework that I found is the CodeIgniter Rocks. It is a framework that when the size of the window is changed, the content of the website will change its position in a way that the website still looks elegant.

This type of framework may be applied to the IMDB website because as I said before when the size of the window is changed the content still be kept in an elegant position.