Week 6

Downloaded Balsamiq, installed and quickly drew a mock up. ~ 1 hour

Took screenshots of the major pages of DinoPC, eBuyer, PC World and Mesh Computers – such as homepage, cart, product listing page etc. Made notes on what I found so I could follow the best practices ~ 3 hours

Used Balsamiq to draw detailed screenshots of major pages ~ 10 hours

Used Photoshop to create images ~ 2 hours

Found product descriptions and images for mockup ~ 1 hour

Read CSS & HTML for creating dynamic websites. Looked at process and design, layout, structures.  ~ 1 hour

Research grid systems and @media queries ~ 1 hour

Write up ~ 2 hours

Total: 21 hours

Advertisements

Week 5

This week I have been reading some chapters of “HTML & CSS – design and build websites”, I have brushed up on HTML code and have skimmed over some of the chapters on CSS, which I will be looking at in more depth next week, along with putting some of it into practice. I read chapters on page structure, tables, forms, introducing CSS and use of colours, those are the ones I remember looking at, I briefly looked at others. It is also useful and will apply, but the tables and forms chapters were most appealing to me as I will be making use of form features such as dropdown lists and radio buttons – reading helped point out the positives of each and when to use them – e.g. radio buttons presents all options so user can see right away, dropdown is better for a larger amount of options.

I have also just discovered a chapter on the process and design of building a website, I have only looked at the first page but it looks very useful, this will help me with my Friday’s hand in of the page designs. The chapter looks like it will look at catering for your audience, how to do this and what techniques will be used to make people behave in different ways

Time ~3 hours

I have also read a chapter and a half of “PHP & MySQL for dynamic websites”. With this book I aim to brush up on my existing basic PHP understanding, but learn more about PHP coding and get introduced to MySQL so I can use the pair for making / making use of a database driven website. I’d already looked at the introduction to PHP chapter, but I finished that one off – this went over basically what Adrian Shaw did, basic syntax, comments, variables, strings etc. However the chapter also reminded me about techniques such as concatenation of strings and when to use what kind of quotation mark.The second chapter I looked at actually used the PHP to do some basic web programming – it went over forms, the use of GET / POST, methods of validation (using ifs, isset() etc), it also went over arrays and types of loops, which I am going to need to know about when handling large amounts of data, going to and from the browser.

I also peered at the end of the book and read some pages, got scared by all of these unknown terms and then went back to the start. It was good looking at some examples of practices using all of the skills to be learnt in the book. I believe an example was talking about user registration.

I’ll include this under this heading too – I found more resources for reference on PHP / MySQL / jQuey / Ajax. I was looking to see what was available in the library, not much (although both my CSS and PHP book I had ordered in by the library), therefore I found some PDFs to “preview” online instead.

Time: ~ 7.5 hours

Finally this week I also purchase some web hosting and a domain name, all in all very cheap at $2/month all in, including the domain. Therefore I’ve installed WordPress and created a couple of pages. I also tried to make modifications using an FTP client to update things rather than using the online interface, this worked too. I haven’t modified any of the styling yet, this is something I will consider over the coming weeks. The first thing I’ll be doing is working out getting data in and out of the database, using PHP and MySQL. I have set a database up for my site (on iPage’s servers, not Uni), however I’ll be honest and say I don’t really know what I’m doing – this week I will at least try putting data into the database (even if manually) then write some code to get that data out. I really need to be at a level of posting data to the database soon though.

Time: ~ 2 hours

Blog
Time: ~ 1 hour

Lecture slide and feedback review:

Time: ~ 1 hour

TOTAL: 14.5 hours

(coming week – UI designs, get evaluation and more reading. If time, practice dynamic web stuff!)

Week 4

This week I performed tasks to move towards completing the deliverable for Friday. I decided to begin this by deciding and mapping out the hierarchical structure of the website. I did this be analyzing national sites such as Dell and PC World, but also by looking at local sites. I found it very difficult to find localised computer sales websites that were of any decent quality and even less that had the capability of selling products online. Abiko computers was one example of a decent site that customers could use to find information, they included FAQs, information about products and a contact form for example: http://www.abiko.co.uk

http://www.webb-computers.info/ and http://www.nepstore.co.uk/ were at least two examples of local sites with e-commerce capability – both including information about the company and some products for sale on the homepage.

I worked out how wide and deep the hierarchy of the site should be, I decided that top level categories should all be listed at the top of the screen in a navigational bar, with subcategories being accessed from here or directly on the category pages. From the homepage users should normally go “Category > Subcategory > Product” or “Category > Product” where appropriate, the site should direct users to a purchase and channel them to where they want to go as quickly as possible. If the hierarchy ended up being too deep, then some product may not be found due to the user giving up after too much refinement or searching for a niche category area of the site.

A reasonably wide hierarchy enables the user to quickly see the wealth of information and services available on the site. Following this a separate level for category and sub-category should be adequate, with any other search narrowing done by using options available on the screen (e.g. sorting and refinement criteria input from the user), which dynamically updates the content being displayed from the database, rather than having further pages deeper into the site structure.

I drew out a hierarchy structure roughly by hand, so I could scribble any notes and changes and then drew it up later in Microsoft Word 2013 using Smart Art tools available. The whole process of research and drawing up this particular part of things took about 3 hours.

While putting together the site structure I also had to think about what kind of products, services, information and methods of contact with the company should be available on the website. I had to decide what pages there would be, as the site structure depends on the content. Initially I didn’t think about what exactly was going to go on each page, but did think of what the page title / topic would be, along with what general content would be available. This took about 2 hours, roughly with pen and paper. I thought and wrote about the pages in more details when working on the final document later in the week.

The E-commerce site will revolve around the use of PHP and MySQL to interact with the site’s database, these languages will be used to pass data in and out of the database. I drew out the titles of what tables would be needed – such as Customer and Stock, before adding attributes to these tables. I then worked out what the relationship would be between these tables, to ensure there was no data duplication and that no calculated information would be stored in the database. I then wrote a small passage about each table so that I knew what to do in the write-up. This took about 3 hours.

The final write-up involved installing SmartDraw in create the ER diagrams and using a drawing tool in MS Word 2013 to create the hierarchy diagram. Drawing these diagrams took a lengthy amount of time due to re-thinking structures and the time it took to get things to display correctly (I hadn’t had much experience with these tools in the past). When I was drawing the ER diagrams, I also had to think of what the PKs and FKs would be and what the cardinality was between the tables. This took about 3.5 hours.

The rest of the write up took about 8 hours. This involved thinking about what content would be on each page and how this content would be generated, in most cases it made sense to generate the content by pulling it from a database.

Main risks – CMS use and will I use order tracking via reference number or implement user accounts instead, where they can view details about their order from their account.

Time: ~ 20 hours