Technical Blog #1
Sprint rua

Analogies for techie talk

What is HTML, CSS and the DOM?

Let's try explaining this to me 5 years ago before I ever looked at code. If HTML is the builder who structures a house, then CSS is the interior designr and decorator, then the DOM would be the project manager talking to the builders and interior designers, making sure everything works in harmony, including all other services needed for the house, and making sure it all completes on schedule. In tech talk HTML (or Hypertext Markup Language) is how we structure what elements we see on a webpage, CSS (cascading style sheets) allows us to code what these HTML elements look like, and where they are positioned on the page. The DOM (document object modle) interprets between the HTML and the scripting language used to render a webpage and be viewed on a browser.

Boxifying design

Boxifying put simply, is a visual way of breaking down your webpage design into smaller manageable boxes. Everything we see on our page is contained within a box, and HTML structure conatins boxes within boxes within boxes, you can go as deep into it as you like. Breaking down into boxes within boxes helps us to tweak and change all aspects of the page by joining up our CSS more easily when we style the pages.

The box model

The box model can apply to all HTML elements. The box model specifies how a box and its attributes relate to each other. For example the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall. From inside to out in order, the box model relates the width of the element, how much padding we have specified around the element, how much boarder around the padding we have specified, and how much margin around the borader we have specified. This helps hugely when styling in CSS.

Researching ideas and creating a wishlist

ZEN GARDEN - A robot named Jimmy

I really like fixed background image with opacity, i think it can keep a page consistent in design, no matter what part you are scrolling on. It adds design without it competing with the text and info you are trying to digest. I like the sections of information that are easy to read because they have been segregated with different colour backgrounds. as an end user i find that much easier than text all bunched together.

Colums are good for text, and a good contrast of colours of text and background help make this a user friendly site. I good user experience as information is clear and easy to find, but still looks interesting screenshots.

ZEN GARDEN - Army

I liked the header design of this site, using the image to include the name of the site, and how it was all central to the page, your eyes are pulled towards all the things you need to see. The side menu is clear to see, as are the heading of each section of text, all remaining consistent in design.. I like the image at the bottom of the page on the left corner, it makes it look more interesting as there is no other things going on there, so i balances it out. I like space so text isn’t too close to the sides of the window.

Colums are good for text, and a good contrast of colours of text and background help make this a user friendly site. I good user experience as information is clear and easy to find, but still looks interesting screenshots.