Prototype 1: We had to design a key part of the project which was the camera activation coding, which in theory would open up the mobile phone camera using the HTML and java coding so users could take and upload photos onto the web page. Here are some of the prototypes of this that we made, note there are several versions which are still being tested in terms of usability.
[UPDATE]: We have now changed the prototype so that when the user loads the page they can see a small version of their Mozaik that they can pinch zoom. As well as this, when they rotate the phone the image will fill the screen and still pinch zoom. This change, in fact, meets the initial wireframe designs perfectly, which can be found here. Now, this has been made, we can start to add the images to the squares. To do this, Josh opened a stock image onto photoshop and applied a grid so that he could cut the image into 12 perfect squares all at 600px squared, which is the size of the divs that will contain the images.
Below: You can see the coding and continuous testing of the current index.html page which will be renamed to cam.html when the project progresses. At the moment it is connected to 2 other PHP files that organise and crop the uploaded images to a set size (this may need some tweaking though to fit the second prototype) as well as upload the photos onto the server. In addition to this, Josh made a CSS to style the original prototype so that it fits the final interface designs.
Prototype 4: This prototype is a continuation of the previous prototype. Josh converted the HTML and CSS into a jQuery template with a series of jQuery function sheets because making the web pages fit the mobile screens a lot easier than doing it from scratch. In addition to this he has been battling the jQuery code as it is continuously trying to overrun the styling, but in this process, we learnt that we can make my styling more important than the imported automated styling. In the process of this, Josh has been making stylised buttons that when pressed they will change colour slightly to give the user a sense of feedback, this is very subtly subtle but a very important touch needed for this app to feel professional. As well as remaking the prototype to fit the design ideas, Josh made a template for us to use when making the rest of the pages for the app, consequently saving us time and a lot of unnecessary effort.