Sunday 25 March 2012

Consumables Tracker System - Part 1 - Design

When creating any sort of browser based system, I tend to work in the same order each time.  It follows no professional systems analysis model that I know of, but is based loosely on user interface driven design methodologies.

My starting point tends to be a piece of A4 paper, and a pencil.  I try and draw a very rough outline of my page structure:



I'll then create a rough drawing of how I want each page to look - with a blank space in the centre for the page's content.



From here, I'll start working out what <div>'s I'll need, and create an HTML document and associated style sheet containing these <div>'s.  Nothing clever - just a page such as:

Then in the stylesheet, I just use background-color: <something_really_bright> to set each div to a different background color:

The result is a page which looks a lot like this:


The CSS is then tweaked to make the div's float to the right parts of the window, according to my page layout drawing.  For a better understanding of CSS, visit W3 Schools. 

Once I'm happy with the placement of the div's, I remove the 'background-color=' statements in the CSS file, or change them to more suitable colours.  I'll then add the page elements that stay the same on each page, such as the logo and the menu and change the CSS to set the page colour, font styles and font colours.  I originally learnt this method by following an excellent tutorial at subcide.com - one I'd certainly recommend!


Menu
To create menu's for my systems, I use a free tool called css 3 menu on my mac.  I could hand code them, but this tool allows me to quickly put together a menu which looks to much better than anything I could do, very quickly.  Then I add the style code to my CSS file, and copy and paste the HTML code into my HTML file.

This gives me an outline page which looks something like:
I save the HTML file as 'template.html'.  This becomes the base for which most other pages originate from.

Part 2 - Setting Up Include Files - coming soon....

M :)


Saturday 24 March 2012

Consumables Tracker System - Intro


Intro
Where I work, we issue a lot of toners, keyboards and mice, which works out very expensive.  In order to keep track of what is issued, I created a PHP/MySQL driven tracking system in order that we could keep tabs on what was going where, and charge back accordingly.

This series of posts describes how the tracker system works, and how it was put together.


Tasks
The system had to enable the department to record carrying out the following tasks:

  • Issue a toner, keyboard(s) and mouse / mice to rooms, and record this.
  • View a list of all stock issued, and mark as charged back.
  • Add 'on order' stock so that we can track undelivered stock and predict future stock levels
  • View and edit 'in stock' quantities, for stock checking.
Part 1 will follow soon....

Sunday 11 March 2012

Hello World

public static void main(String[]args)
          public class "HelloWorld"
          {
                        System.out.println("Hi, welcome to my blog");
           }
}

Output
Hi, Welcome to my blog

Not much here yet, but whilst you wait in anticipation of master zen-like coding hints (You'll be in for a long wait ;)  ), have a look at my 'About' page.

Maria :)