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

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

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:

FBStory4

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:

FBStory2

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:
http://www.facebookstories.com/midnightdelivery/confirmation?id=76746
http://www.facebookstories.com/midnightdelivery/confirmation?id=76742

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)