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

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

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

Week 3

I obtained a HTML & CSS book from Amazon, I also obtained a MySQL & PHP book from the library, I also downloaded a Javascript book on my tablet. These materials should assist with the project, the MySQL & PHP one should be immediately helpful to me when putting together the next deliverable over next week.

I have read a couple of chapters of each of those books, the HTML & CSS I more jumped to the sections I wanted to read and covered more chapters as there was less detail to learn.

I discussed the use of WordPress’ own database system with two of my friends who are choosing to use WordPress. I have considered using Joomla or Drupal instead and am still making my choice. WordPress can be used for an e-commerce site, however it is generally used for making blog sites, information  sites and other fairly non complicated sites. It is very easy to use, but looking at the specs there could be some constraints at everything seeming to be in a WordPress environment, with WordPress plugins and WordPress tools etc etc.

Joomla offers perhaps more of a challenge in installing it and getting going, but seems to have more possible components that are independent to the CMS. This could lead to more specific / advanced components being used to create an e-commerce site.

Both CMS’s have communities of followers and documentation, with WordPress being by far the biggest.

I also looked at Magento and OpenCart – these are both very good open source options. However there are a bit too “turn-key” as one of them described themselves, it looks like it would be easy to get going – but a lot of the technical detail may have already been taken care of. It’s certainly worth installing one of these to take a look though, which I plan to do soon.

Therefore the biggest risk I face at the moment is which CMS I am going to use, as then the tools I use following this depend on this choice. The reduction in risk will have to be further research, discussing choices with my colleagues and trying to install some of them to try (or using demos, I already played with the OpenCart admin and customer facing demo).

Week 2

This week I had to complete a Business Analysis for Jenkins IT as this deliverable was due on Friday.

I began this process by figuring out who would want to use the site, how they’d use it and who are the company that wants to have the site built. I wrote down some notes on why people would do these things, to write an introduction later. Following this,  I figured out who the typical users would be. Initially I searched online for typical user demographics who used computer websites or purchased IT equipment, however it was very difficult to find useful figures to reference, the only ones I could find were many years old so they would be useless in this industry. I wrote down a list of typical users of the site, such as personal users with varying levels of IT skills along with other types of users. I did not describe them at this time.

Following this I spent some time reviewing last terms (Group Project) lecture slides on project scope and this terms lecture slides on Business Analysis, so that I could get a good start on my rich picture. I wrote down stakeholders such as customers and insurance companies before writing between 1 and 4 bullet points for each of the stakeholders, so that I had notes to work from later.

I wrote down some ideas for use-cases, so that I could write these when writing in the hand in document. I however forgot to complete these in the end as I got caught up focusing in other areas, so my use-cases are very poor in my document. I should have made a better time plan so that I didn’t forget and waste marks in other places (e.g. too much resource focusing on minor issues).

I analyzed a number of websites that were similar business’ to Jenkins IT. The first website I analyzed was Dell. I browsed the Dell website viewing it’s product pages, adding items to the basket and attempting to checkout etc, I did this to study their process’ and the way they’d implemented an e-commerce site. The site was informative and generally very good, however they did have a problem with outdated information and a few minor things that could be changed such as the wording of their checkout system. I took many screenshots of the site using the Microsoft Windows Snipping Tool and included some of these in the end document.

The second website that I analyzed was the PC World website (almost identical to Dixons and Currys). I took screenshots as I navigated their pages and generally followed the same steps as I did with Dell. Currys possibly had better product information pages as it involved less windows and confusion about where to click, however their product range pages weren’t as good as the categorization of products and wording of the categories could be confusing. For example there was a Notebook section and a MacBook section, yet in the notebook section Mac’s were listed as “Apple Notebooks”.

Finally I did a quick analysis of the KNOWHOW website as these are just a service website, mainly catering to Currys/PC World aftersales. I thought their service descriptions were easy to read, however the presentation of the site didn’t quite suit what they were selling, it looked a bit like a media website, e.g. one selling music and video. I did however pick up some tips such as describing services in a basic, short way and then offering a more advanced description section.

I installed a photo editing program so that I could create a rich picture, based on the stakeholder short descriptions I’d created. I gathered public domain (free to use) images along with company logos that were often available from a “media resources” type of section on their site, or through finding a version in the public domain through Wikipedia. I then placed these in a diagram and linked up the relationships, such as Jenkins IT liaising with insurance companies to offer extended warranty as an additional service to customers.

Finally I used all of the notes generated to produce a final Business Analysis document, before converting it to PDF. I was happy with the final document apart from the missing use-cases. I could have done with an extra hour or two so need to start writing the final document earlier next time!

This week I need to use my previous work so that I can figure out how to turn these theories, ideas and scenarios into an actual data, website and database. I’ll need to work out what kinds of information on each page and where the information comes from, for example how many static individually written pages will I have and how many dynamically written pages will I have, that pull data from a database (e.g. product information page).

Another thing that I will need to think about and begin writing is the navigational structure of the website. I will need to work out how many top level categories there are and how many sub categories there are in the tree. It should be defined in such a way that navigation will make sense to the user and will still require the shortest amount of clicks for them to find the content they want.

Finally I need to work out what tables are required in the database and the relationships that exist between them, I will also need to decide how this will be implemented. The implementation will hang on whether I use WordPress as a CMS or find an alternative solution. I see this database specific part as the biggest challenge at the moment.

Time spent: Preparation and research earlier in the week – 5 hours. Preparation and implementation of the document later in the week – 9.5 hours. Total: ~14.5 hours

Week 1

This week I had to come up with a proposal for my major project, following the briefing we had from Chris in the lecture.

I started off by brainstorming some ideas of what could go into a website or a web app, this included topics / ideas such as:

  • e-commerce (physical and electronic goods)
  • calendaring
  • task management
  • support ticketing
  • games (online playable)
  • movie review aggregator

Following this I thought about what skills I had and what I needed to learn, to be able to implement these things. For the most part, I need more experience in using PHP and MySQL, therefore I’m going to get a book on this to read through and try things out. Also I believe Adrian Shaw will be giving some refresher sessions in this kind of area.

I spent further time writing down bullet points for a number of final idea which included the following websites / web based applications:

E-commerce (sale of physical goods)

  • List stock items that users can put in their cart, checkout and pay for
  • Allow some custom configuration to build an order
  • Order tracking

Photo upload site

  • Upload a photo
  • Rate photos
  • Comment on and share photos to social media sites

Car garage bookings

  • Check cars into the garage, logging various details
  • Create “jobs” to complete mechanical work and allocate resources (staff) to complete the jobs
  • Log updates to jobs. Possibly allow customers to check this themselves online

In the end I weighed up the pros and cons of the ideas, based on the complexity (scope) of the project, how relevant it would be to me and my future but also how interesting it would be for me. I also discussed these ideas on a number of occasions with my friends, to see what their opinion on the matter would be. Although the photo uploading one was possibly the least run of the mill idea, the e-commerce idea interested me most, as I am interested in business and IT tools for business, oh yes, I am taking Business IT after all. If I do the e-commerce one, I can also envisage easier visible progression along the way so that problems can be resolve more quickly and if things go wrong, there will still be other working parts in place that I have invested time in and can be observed to function well.

I believe that HTML, CSS, JavaScript, PHP, MySQL and Ajax are likely to be used when developing my site.

Things I need to look into over time include PHP frameworks, Content Management Systems and what will attract users to the website the most. The latter two being more important to begin with. The user aspect of things will probably be answered during my Business Analysis document creation this week, the other two I can look at during the week (preferably) or next week.

Time spent: ~11 hours

Facebook “Midnight Delivery” security flaw

Facebook have implemented a new service to wish friends and family a Happy New Year, offering to deliver your message to them on the strike of midnight.

StoriesFacebook however have not been very security consious when setting this up. By simple manipulation of the ID at the end of the URL of a sent message on the FacebookStories site, you are able to view other peoples Happy New Year messages. At least I was when I edited the ID for myself.

For example. I made this test one which you should be able to see saying “TEST TEST TEST TEST”:

Story2If you manipulate the ID (http://www.facebookstories.com/midnightdelivery/confirmation?id=76188), you can view other people’s messages, just change the ID number up or down a few.

It is you may say a pretty harmless flaw, as they tend to be generic messages and you can’t see who sent them (it shows your profile pic next to the message, as if you’ve sent it). However you can see the names of the recipients of the message.

Some messages do contain a photo, one such message I saw contained a photo of a father and their child, another a family photo, another was a personally written message with a photo such as this:

FBStory5I don’t know who these people are, but you can see it puts my profile pic next to it, as if I have sent the message. It shouldn’t be possible to do this, as these are not generic and are people’s personal images.

A very bad part of it all is I think that you can actually DELETE other people’s messages, which I have tested for myself on a single message as I thought that it would say access denied

Screenshot 1 shows a greeting written by someone: FBStory3

Screenshot 2 shows the greeting page after I clicked to delete it:


After I action the deletion, this URL is no longer reachable. Which may mean that I have deleted their message
Screenshot 3 is just an example of a mass message I came across:


I just wanted to share this. I don’t know how a site like Facebook can continue to take these kinds of risks. PLEASE Don’t go deleting random messages, but try and delete one of mine that I set up especially if you want :). And share this message with someone else who may be interested:

Jack. Tweet me here: https://twitter.com/Jackthewelshman

UPDATE 31/12/2012 05:25GMT – the site is currently down for maintenance, I sent it to Facebook too so I think they are working on it

UPDATE 31/12/2012 14:00GMT – Facebook still haven’t got back to me personally with  any response. This is the reason that I contacted The Verge, to actually get some action taken

UPDATE 31/12/2012 14:35GMT – I have just checked, the bug / oversight has now been fixed. You can no longer access other people’s messages by changing the confirmation message ID

UPDATE 01/01/2013 16:49GMT – Facebook still haven’t responded to the two messages that I sent regarding this bug (This is still correct 03/01/2013 23:05GMT – I guess that I’ll never get a response now)

What I did this week

This week we have been completing work on our group report, in between the final work on another 20 credits we’ve been working on. Therefore early in this work week we didn’t actually manage to meet up, however we did meet up during the end of this working week.

We have completed a lot of the business plan, this week we have been going through tidying the earlier sections of it up to “hand in standard”. Then we’ve been moving on to write bullet points incomplete sections or turning some points into text.

The Technology plan’s components are all completed apart from the Data Flow Diagrams, which I am going to which I have began producing and will complete in this following week. We had already done one, however after the lecture this week, I have realized that this existing one has elements of a flow diagram and that it’s better to just do it again. I will make a number of them to model different processes. The technology plan items need to be formatted into a formal document with descriptions (where applicable), at the moment they are only together and unstructured.

The marketing plan has a template which Seb has created. Ian has had some more feedback from the questionnaire, we however have not added many items to the formal Marketing Plan document – we only have relevant content saved, not in any order. This is the most incomplete part of the group report right now.

Sam and Tom discussed what they had done with the Technology plan and how they had brought them all together. Seb and I showed the group the progress in the business plan, Ian helped Seb make some changes before our meeting today, before the rest of us got to the meeting room. Ian told us what he’d done with the Marketing plan and what was missing from other plans, such as risks – so we will work on that first in this coming working week. During the meeting we set plan for this week and we have a meeting room booked for a period on all days.

I am confident that the work will be completed to a high standard by Friday, where one of us will be delivering it to Chris. The aim is to push forward ensuring we make all of the relevant points and workings for a 1st! We will see how it goes.

Time spent: 7 hours

EDIT: Just searched for a DFD diagram program to use that is easier to use than Word 2010, or one that has some more powerful features. I decided to go with Gliffy as it’s free, it’s web based and there are lot’s of tools available, such as easy linking of processes with arrows. I tested it out and made a DFD for two processes (3 diagrams in total, as I need to show my group multiple versions for feedback). More to come in the following week but will tag this work onto tonight.

Time added: 2 hours. Total time 9 hours

What I learnt this week

This week I learnt some more about data flow diagrams (DFDs). I had done them before, perhaps during A-Level, but certainly during a 1st or 2nd year module of some sort. However that’s a long time ago, so was a little rusty!

I learnt that DFDs are supposed to be easy to read, to show the sequence of processes happening and the data that is moving between them. The most important part that I took away from the lecture was that they aren’t highly detailed diagrams containing decisions and every single process that is going on. There are other diagrams more suited to this, such as flow diagram. What I previously made for my group project was probably just a flow diagram, so I can go back and fix that.

A data flow diagram has data stores, functions (processes) and arrows to show the relationship and movement.

Although the diagrams themselves don’t describe the detailed workings within a system or data flow, the diagrams themselves can still be large and complex, depending on the scale of the processes involved. For example the data flow diagram for voting in a poll online will be different to describing an inter library loan book request.

Other than this, Chris reminded us of the hand in date for the Group Report. We’ll decide on one person to hand it in, the method will probably be by email as this is easiest… and least chilly.

Question: I do have a question about our hand in. Do you want the format to be 3 files only (e.g. in a zip if by email), these being PDFs / word processor files – as if it’s a paper document hand in. Or can there be additional files too? I was just thinking let’s say there was a large image that we wanted to include, this would be fairly small on an A4 page but easier to see full screen (done via link to online resource in-document, or folder of content in the zip)

What I did this week

This week our group met up on Friday for just under 2 hours – we discussed how were going to split up the work and who was going to meet up to meet up for regular progress report or group work.

Seb and I have done previous work that relates to or is in the business plan, plus I quite like crunching numbers and things, so it was decided that we would take on the responsibility of finishing the Business plan. This can be reviewed later on by other team members. I spoke with Seb so that we could meet up on the weekend or next week.

Also during the meeting we realized that the Marketing plan needs to have a document template created, with headings and current content, so that we don’t always think from a blank sheet. This way we can complete it more quickly. We also need to gain more responses from our survey, as Ian showed us that although we had a lot of responses, over 75% were Students if I remember rightly. Ian is going to work on the Marketing plan and I am going to assist him with it.

Tom and Sam are going to meet up to complete the technology plan, they have done some of the original technology related pieces, so this makes sense.

Over the weekend I spent time looking through the results of the survey, writing down the main points about what things meant. For example stats show that the majority of people thought our pricing for annual student rental was reasonable, as our annual charge for students fall within the most popular range. However, if we get more respondents that are not Students, they may say the same thing, but their annual charge is currently set higher, in a different price band that isn’t quite as popular in the survey results. We may need to use this survey data to make some changes.

I also spent some time at the weekend looking for some example marketing plans, to get an idea of the layout. I did this while looking at the marketing related lectures we’ve had in previous weeks.

We met again on Monday and planned ahead of how we would allocate time in the week before hand in. We have made sure that we have at least 12 hours within the final 5 days, where we are all free to meet together. We have booked a meeting room for a few hours each day, so that anyone can meet, with a computer available to do or go through any work.

I spoke with Seb during Monday’s meeting to meet up on Tuesday to do some Business plan work.

On Tuesday I met up with Seb to work on the Business plan, that we have centrally saved in a group on Facebook. One of the things we did was we wrote down our ideas into section 14 about how we would promoted and advertise our rental service. There needs to be a campaign in the local area, particularly on campus during that start of terms and particularly around town and the local area (e.g. caravan parks) during tourist season. Nationally, we can only really advertise our business on the internet due to budget, this would make it easier to spend our money wisely, by targeting an audience using Google Adwords (geographical and keyword relevance). There may be some useful data from our marketing plan, to help with this.

The people in our group have a deadline for a 100% assignment and one 40% assignment, before the hand in for this group report. We have to balance our time between these things up until they are completed, by the 10th of December the group report will be our only responsibility left, so we can put more focus into it.

I believe this week we have pulled together to bring the standard up level to previous weeks again, but we need to work as hard as this up until the 10th, then twice as hard up until the deadline if we are going to complete this to a 1st standard – which we aim to achieve!

Work responsibility split:

Marketing: Ian/Jack === Business: Jack/Seb === Technology: Sam/Tom

Hours spent: approx 8 hours