Log
A brief history of the course.
WEB F1 (Web Foundation)
Summary
Over the past year in web foundations 1, we have been researching and studying the world wclasse web. This entailed a literature review at the start of the year on reducing personal information exposure on the web (see Literature Review). This helped us develop the research skills that we will defiantly need later on In life and throughout this course. Secondly we were tasked with the creation of a portfolio website (this on here!). This task tested our knowledge of HTML and CSS. With this task, however, came some key lessons that we should take on when creating a website, for instance, key designing elements and “un-written” rules that should be taken into account when creating a successful website, for example, making sure to separate context from form. This is done using proper HTML and CSS etiquette – making sure that all style and formatting is kept well and truly in the style sheet and all the content is marked up properly on the HTML side/file. Another key element to success web development and other forms of development was efficiency. We were taught proper “manners” in term of both keeping your text editor open and full to the brim with add-ons at the same time, for instance, ensuring your text size is as small as your corneas can physically handle to allow you to see the most code on the screen at one single moment, and secondly to making sure your snippets.cson is packed full of lovely short cuts to write as much code as possible with the least amount of key strokes.
Work Log
Web Security key concepts
HTML Introduction
Starting a webserver with WINSCP
Types of Markup
Procedural Markup - Focuses on how it looks and what to do. (Based of a WYSIWYG basis)
Descriptive Markup - Focuses on describing the content rather than the formatting and visual aspects. Using proper semantics to describe the content. This better allows the developer to seperate the form from the content of the webpage.
Basic HTML tags
HTML semantics
Semantics are used to clearly define the meaning to both the webpage and the developer. they are much better than using a div tag as div tags are ambiguous
CSS
CSS is a dynamic way to format a webpage. It allows the user to describe the format and design of the page. This works through a combination of editing existing HTML tags (body, li, ul etc.) and creating classes and ids. These allow you to specificly design/edit different aspects of the webpage. Classes are designed to let you assign the same style to multiple elements on the page, whereas id's let you specifically change one element. These can be combined to create very elegent and specifc designs and formats on the webpage.
inline CSS involves placing the CSS inside the HTML file. This is particularly useful for testing specific elements on the webpage before making any design choice final. However, it is the correct practice to separate the form/design from the content of the webpage.
external CSS involves relocating the style sheet code into an external file and then linking to it in the head of the HTML page. This is much better practice as it allows the page to only have to load the CSS file once and save it in cache. this makes page loading times much faster as the style code doesn't have to be read everytime another page is loaded, this in turn reduces the file size of the HTML files further increasing the load times of the webpage.
Advanced CSS
Advanced selectors - This piece of CSS selects all of the "A" tags in under a "P" tag.
p > a { }
An example of this may be the desire to select all of the "Li" tags under a "Ul" tag. This will then affect the formatting and style of that "Li" tag.
ul > li { }
Another example of an advanced selector selects all child elements within of a given type.
div p { }
Subclasses are also useful when checking for various simple inputs from the user.
This first selector is called to all "P" tags when the mouse is hovered over it.
P:hover { }
Design
Users want to feel accepted and accomplished when they are on and use a webpage. Affective design, with the demographics and psychographics of the primary user, considered will ensure that this takes place and that the user is most comfortable when using the site. Placement of elements, the choice of colour, and the amount of content on the page, all tie together when creating an outstanding design. Users want to part-take in as little learning as possible when using a webpage as attention span may be limited - based on the primary user. Web designers must be focused on creating a design that doesn't overload the user with content and information as well as adding enough to draw the attention of the user. Not too boring, not too hectic. A concept to remember when designing an affective design, is considering how much you can remove from the design before it loses purpose. You want the minimal amount on the page to do its job - Further increasing load times of the site as well as not crowding the page with unnecessary images and content. "Design isn't just how it looks, it's how it works." - Steve Jobs.
Usability
The first thing that comes to mind when considering usability is the primary users mental model. What are your primary users used to? Are they behind a desk using word all day? Are they playing video games until 3 in the morning? When these specific users are interacting with your page, they will have certain expectations, where buttons should be placed, what icons mean etc.. These aspects should be considered when designing the webpage layout and style. Perhaps your user is a big mobile user, when they access a webpage where are their eyes going to go first? Where will they go to navigate pages? How much information are they used to seeing before losing interest. Beta testing a page can be an effective way to flag up any elements that may be causing issues or elements that are being used constantly. The use of website cookies will allow the developer/company/organisation see exactly where the users are going when they use the page. These can then be addressed to ensure that the user can find/locate them much easier in the next iteration of the page.
Accessability
It is important that anyone using any webpage can access and use any part of the website to its full potential. Therefore it obvious that any form of disability/language barrier is taken into account when dealing with how accessible your webpage is. Techniques to allow anyone to view your webpage can include clear HTML semantics and/or alt tags to allow any text-to-speak to clearly read all the text on the screen. any videos that are present on the page should be close-captioned to allow anyone who is deaf to understand clearly what is going on in the video. Colour schemes are also an important aspect to consider. Firstly, it has been proven that particular colour schemes (navy-blue text on a cream background) can improve the reading of people with dyslexia. Another aspect of colour schemes is colour-blindness. Using specific shades of colour next to one another, can cause it to not be visible all together. Text should always be placed atop a background colour that contrasts the font colour. This will ensure that the user, should they be colour blind, has the best chance at reading the content on the page.
Graphics
