333mmcc-blog

[333mmcc-blog]

Journal Post 30/10-10/11

I’ll be frank dear read, I have been giving DECO1800 that much attention after submission of the final project along with moving into SWOVAT a focusing on other subjects. But with the worst of exam week behind me, I’ve shifted my attention back to the portfolio; which is due very soon! As you know, I’ve already completed quite a lot of the portfolio from the mid-semester break. Coming back to the website with fresh eyes, there are a few changes that I’ve made to give it a bit more of a cleaner layout. To start I made the link buttons at the top of the page a tad bigger just to make them a bit more obvious to the user. I’ve also made a small gap between the main body and the navigation bar at the top of the page to better discern between the body document and the rest of the website page

In DECO1400 we were told that using imagery would help our audience to empathise with use and our website’s content. Using this knowledge, I’ve stuck a presentable portrait of myself on the home so that people have a better who I am, what I look like and my high value of good quality work.

I’ve also made some adjustments to the project buttons. The icons in my prototype went opaque when the user hovered over it, which seems a little counter intuitive. To fix this I now have the buttons becoming opaque when defocused. Another small change I made to the button was that they have the image is the background for a div element instead of having some transformed text over an image since the transformed text seemed to move around a lot when the monitor was resized

The content organisation for the project was originally just going to be text and images thrown onto the page with some headings to guide the reader. To section the content in a much more clear and concise manner I’ve used the JQuery accordion to hold the bulk of the text. The accordion does a really good job at decluttering the webpage as well as being robust and customisable to fit in with the website style.

To make things even more compact I’ve employed the use of the W3 schools photo slideshows to display all the images for my prototypes

 Overall the website very well but if I had a little more time to work on the project I would like to break up the monotonicity of the colour scheme and have at least two colours. Some times when the screen gets too small the website can break with the main body starting to overlap the navigation buttons. If I had more time it would be good to implement a smart phone mode so that the website can properly adjust for very small screen sizes.

It would also be good to have a dynamic back and forth message system in each of the projects so that people could message me directly without having to email me.

 Well dear reader, this nearly brings us to the conclusion of DECO1800, but before I leave I few burning remarks for the course.

Walking into this course I had no idea what to expect. I had some vague idea that the course was meant to be web design of some description since it extended from DECO1400. My naivety can be seen in my first few posts of my journal blog where I mention that our assignment website will have a PHP backbone which prompted me to try and get ahead a to pick up some PHP with Code academy

I initially expected that we might be creating our own PHP systems to set up smaller scale data bases to pass in log-in details from a user that has signed up to our website. Unfortunately, not many of these expectations were really met where as we only had a very cursory glance at some PHP and didn’t really going into any detail.

Also, I know that the tutors and mentors assumed HTML and JS knowledge from DECO1400 but I think it would have been nice to build on from that knowledge and to teach other cool things you can do in web design broadening our knowledge in web design libraries and exploring advanced/new CSS features such as flex box.

A lot of the lecture content was mostly web design which we had already done a lot of in DECO1400. I think the 2-hour workshop didn’t really give us a large enough amount of time to properly learn coding material. For the assessment, I was given the task of creating the HTML and CSS for the website. All the components that I had to create for this task wasn’t too different to the stuff we did in DECO1400. The main difference was that I had a better understanding of JS and JQuery and allowing for more complex website set ups.

As I’ve mentioned in my blog posts on numerous occasions, I let one of my other team members do most of the data retrieval for the website since he was very keen to do that task and we had another member do the google map API since he had previous experience.

With that being said, I certainly did extend my knowledge of website design through this assignment, picking up the ability to use more complex CSS styling to achieve a desired design and using JQuery in a much more sophisticated way to implement certain interactive features.

I also learnt a bit of data retrieval from the course through the workshops and through various other online materials requesting data through an AJAX call and parsing the data to be used for a website. I picked up quite a bit of PHP through the workshops and other online resources albeit I still fail to see why anyone would use it over JS.

 Since I was also elected as team leader for this project I also got a bit of managing experience from this project making sure everyone was on track and prompting them to catch up if they were falling behind as well as staying on top of the general progress of the website, keeping everyone informed and updated with changes to the website. The assessment for this project turned out okay, I guess. The underlying fact that the project involved team work definitely puts unnecessary strain on students that strive to do well, making sure that the rest of the team is up to speed. The assignment itself was interesting, using the data to create a web app that turns the data base information into something much more readable. However, trying to orchestrate this project with a team which doesn’t really take interest in the course and that leaves things to the last minute can be very frustrating.

Nonetheless, I think the course does an excellent job at discerning hard working and lazy students with the weekly journey posts giving tutors an insight of how much work students actually do complete and how much of a contribution they are making to the team.

Regardless of any group project on this scale there will always be the few that put work off and let the rest of the team carry their weight. To remedy this, I think it could be better to make the groups really small, like groups of 1 or 2 even if it does mean making the project smaller. The reason for this is that it’s not as easy for any one individual to slack off since they only have one other partner working on the project with them.

Another thing I wanted to mention about the course it that I really wanted to have more time in workshops looking at and creating miniature projects using PHP and SQL to really expand our knowledge on using these two tools for both the assignment and future web projects.

Well that’s from me for now, hopefully I’ll be back to cover even design and thinking material in the future.

 Finis

[333mmcc-blog]

[333mmcc-blog]

Journal Log 27/10

This week we showed cased our website in this week’s workshop. Unfortunately, we did quite get to implement every interactive feature of the website and had to leave it half finished

For the Journey mode we couldn’t really find or think of any information to put in the history fact for the Journey Mode so that was cut out completely. We considered putting a list of all the convicts that had been arrested so far, however Fazer mentioned that since the story had taken place along time after many of the convictions had taken place so the list would be very long and wouldn’t change much from chapter to chapter. He also said it would be too hard to create a piece of code to quickly find the convictions that had happened in the last few days.

The Journey Mode also had navigation for the tags on the screen. As mentioned, each boat tag in the Journey Mode represented a chapter in the story, with the tag showing where that chapter took place. In our design we proposed that when a tag was clicked on it would take you the corresponding chapter. However, we were unable to implement this feature mostly due to a lack of time.

Despite this, our Journey Mode turned out to be the more functioning part of the website, it was in fact the Browse Mode that was really a big letdown. For the Browse Mode map, the tags didn’t really display on the map all too well, so in a last-ditch effort we simply had tags randomly positioned around the UK with mismatched tag names.

Not only this but the modals that were meant to come up with information when a tag was clicked on didn’t really work when we tried fitting my/Frazer’s work together with the prototype code for the modal that worked on html divs but broken when we tried transferring this code across.

The Browse mode was also supposed to have a feature showing all the different vessel routes. Again, since we didn’t have the time to properly implement our website we resorted to a much more basic method of displaying multiple paths routes be slightly randomising the positions of the Journey Mode path to create new, slightly similar, paths. We were meant to have a similar feature as the Journey Mode’s History Fact, were all the convicts arrested up to a particular date would be display. This had to be scrapped, again, due to a lack of time. It’s worth mentioning that maybe to other people this website was half decent and I’m portraying as a bit of a disaster because I’m a pessimist, I don’t know, it’s just not the website I envisioned to have by the end of the semester.

If we were granted an extra month to work on this assignment we would definitely try to get features such as the search convicts by date in and have modals appear in the browse mode appear when the user clicks on the tag.

The down fall of our group, I think, is that we focused too much how many ways we could when we should’ve been thinking above just clever and innovative ways of using the data favouring the quality of data usage over quantity. Most groups only really small amounts of their data, serving only one purpose in their entire website. For example, one group only used the pictures from the WW2 data base to create a puzzle game where you have to try and fit pieces back together. I think the group was too caught up in finding a lot of mundane and basic methods of using the data we didn’t really think of any inventive or creative ways of utilising the data.

[333mmcc-blog]

[333mmcc-blog]

Journal Post 25/10

For this week, Frazer and I got the modal pop up for the browse mode working however the modal only worked on a local browser. The modal, as mentioned last week, opens when the user selects a tag in the browse mode a modal containing a short fact about the location and the people convicted at that location will appear. The modals, however, were only tested on dummy divs to make sure the modal was formatted properly and that the information actually appeared. The code will need to be modified when Brae implements the tags into the browse mode.

I have also made the username on the home page appear in the Journey Mode in place of the protagonist’s name. What I was doing beforehand was rather stupid and just saved the name as a normal JavaScript variable. Of course, this variable reset every time a different page was visited or the user refreshed the page. Therefore, the user name had to be saved into the session storage so that it wasn’t erased.

The team will also need to handle some problems with requesting data from the SLQ since multiple since for some parts of the website, some requests are being made simultaneously. To resolve this, we are going to have all the data pulled from the data base on the home page and then put into the session storage or local storage. Although this is almost certainly bad design we will prevent the user from proceeding to the Journey/Browse Mode until all the data has finished loading.

So, what are hoping to accomplish? Well were hoping to get the tags for the Browse Mode done very soon so that we can properly implement the pop up tags when the user clicks on the tag.

With the coding part aside, the group commenced the final report with Frazer and I coming up with a compromise to split up the documentation:

 Brae and Frazer were given:

·         Description of implementation (how the system works), including what is fully functional and what has been simulated for the purposes of the project. Use of any third party libraries/frameworks/code must be described and clearly referenced in both the report and via comments in your source code.

·         What you were unable to implement, describing why and how would these value-add to the final product.

All the coders where given:

·         Discussion of issues/major challenges encountered along the way, and how you changed the

·         Discussion of changes made to the original concept and why these were made (i.e. response to feedback, further research or implementation difficulties).

I was given one of the harder parts of the project:

·         Detailed description of the final project - its purpose, audience, approach to the given data sets and intended interactivity - supported & illustrated with relevant visuals.

Finally, being the main designer and tester, Elliot’s part was:

·         Any improvements you would make to the final product and why.

·         The successful and unsuccessful aspects of the product and why they were successful/unsuccessful.

·         What you like and dislike about the final outcome and why.

[333mmcc-blog]

[333mmcc-blog]

Journal Log 11/10

This week I have mostly been working on the pop up modal for the browse mode. Essentially when the browse mode for our webpage is initialised it will have a map with a bunch of tags on it each representing a court, settlement or ship vessel. When the tag is selected by the user, information pertaining to database as well as information from Wikipedia will be displayed inside a modal that pops up. The Wikipedia information will be taken from a dictionary from within the JavaScript file. Full disclosure, I literally just stole first few lines for each data point from wiki and threw it in the dictionary with the keys of the dictionary being the information point name.

The way I get the information from the data base is going to be a bit trickier. First, I must get a list of all the convicts through the Session Storage and save it to the variable ‘con’. When the user selects a tag, a function will be activated that grabs two pieces of information from the tag, this being the general-data-type/class the tag represents (such as a court or settlement). This information will be passed into another function made by Fraser that extracts a list of all the relevant information from another data source, this other data source being ‘con’. The information from this function will then be looped over and printed into the modal. To make sure the modal doesn’t fill up the whole page I’ve put in a max height and y-overflow so that the user can simply scroll down if there is a lot of information. The scroll bar was a little jazzed up as well to keep in line with the theme of the site. Fraser pointed out the modal might’ve been a bit on the smaller side of things so the size was adjusted to allow more information to be displayed at once. I’ve haven’t really finished but I’ve got a photo of what I’ve so far!

As far as team goals are concerned we are very far behind. The prospect of us finishing over the holidays spectacularly failed when communication between the group came to a halt during the break. I fruitlessly attempted to invigorate our team’s activity by prompting them with questions about the assessment, but alas, no response was given. We urgently need both maps for Journey and Browse Mode to be up before the end of next week. The maps also need to done to ensure we have enough information to start writing our Final Reports. We also still need to figure out what we are going to do with the History Facts at the bottom of each page. Since the SQL data doesn’t have much to go on we may need more data from elsewhere or get very creative with the data we have.

[333mmcc-blog]

Modal Prototype

[333mmcc-blog]

Journal Log 26/09-3/10 (A post for Week 9)

This week our group had our presentation, showing off to the tutors the work we had done so far with our project. The presentation itself, I think, went pretty well since we described all the work we had done so far and showed off the website (the prototype) almost exactly within the allowed 5 mins.

Despite the well-timed presentation, I don’t think the work we have done so far has not been done with efficiency since we are certainly taking far too long for certain parts of the website. I had hoped by this time on our project both the browse mode and journey would have functioning maps. Alas, we have only managed to incorporate a map into the Browse mode and even then, the paths that have been placed on the map in the Browse mode is functionality that should be in the Journey Mode map and it has a timeline that we are not sure of keeping. The CSS is also a little underdone with a lot of the aesthetics still needing to be put in such as the textures for the side bar along with some font changes. I had also made some recent CSS adjustments for the side not to fall under a certain width when the screen size gets too small. However, when the width of the side bar stops shrinking, because the home button footer is still a percentage based width, the footer will actually go on top of the next and back buttons causing them to squish against each other.

At the moment, we only have two dummy chapters to make sure everything works properly before we started adding more chapters. Clearly this is going to have to change and I am hoping to add 8 more Journey Chapters complete with actual chapter text (not just filler text) with history facts from the library at the bottom of the chapter. I’ll try and get this all done by the end of the mid semester break.

I think it’s also important to note that we haven’t actually put any of the data from the library into our website yet. All we have done so far is printed it all out to the console. Since this is quite a big task we will take small steps at a time first adding names and dates to the chapters in the side bar then using places of conviction to form tags on the browse mode map.

The hardest thing we still need to do is create an animated boat that moves along the path of the automatically generated paths of the boats.

The feedback from the prototype we received in the week 9 work shop was a mix of good and bad commenting. A lot of people mentioned a clear and simple design for the website, yet the aesthetics elements where a bit flat and lacking. Many people said that we should also better define our target audience and suggested that we target school students since our layout was very simple to use.

The communication within the group is pretty good with the Facebook Messanger we created. However, the group has a tendency to leave things to the last minute. For example, two group members were working on the progress report for Part B of the assignment up until 11:00pm on the day it was due. Needs to be addressed and amended with better organisation as well as breaking tasks up into milestones instead of just giving due dates.

[333mmcc-blog]

Journal Log 23-30/09/17

Over the midsem break I’ve made a variety of changes to the Browse Mode and Journey Mode pages.

 Journey Mode

To start, in the Journey Mode page there was a glitch with my old CSS that when the page was shrinked down the home button bar would start to cover the next and back buttons. This was because I forgot to change the percentage based width for the next and back buttons when the page had reached a certain width. This was amended by including the next and back div in a set pixel width when the page width was under a certain size as well as increasing the z-index of the next and back div.

In line with the design document I also changed the background colour to a paper texture. But to retain good website integrity, I’ve kept the background colour in the CSS in case the image does not load.

Another change I made to the Browse Mode page is when the user hovers over the chapter number at the top of each chapter, the colour of the number inverts to indicate to the user that it is an interactable object. Likewise, when the user hovers over a particular chapter in the chapter menu the background of the chapter title changes to a darker colour to, again, suggest that the object ‘does something’ when the user selects it.

Also, I’ve made a rough draft of every chapter of the story to go inside the Journal Entry. Since the website is targeted at people who like history as well as school children, I’ve included real life events in the story to make it as historically accurate as possible.

 Browse Mode

The aesthetic adjustments to the Browse Mode are very similar to the adjustments I made in the Journey Mode, that is, making sure the home button bar does not go on top of the back/next div as well as changing the background of the sidebar. However, the biggest change I made to the Browse Mode was the form box.

Clearly if someone enters something nonsensical into the form or makes a typo, the website should communicate to them that they have done something wrong. The first modification I made to the date fields was changing the maximum character entry for the day, month and year to two, two and four respectively. When the user presses submit, I’ve created a piece of code in JS that checks what has been entered before passing on to find information on the entered date. These checks are:

·         Are all the fields a number?

·         Are all the field not empty?

·         Is the year greater than 1600 and less than 1900? (Since this is when most of the events of the data base took place)

·         Is the month greater than 0 and less than 13?

·         Is the day greater than 0 and less than 32?

Once an input date passes all these checks, the input field background turns green to indicate that the

 user that they have entered a valid date. Otherwise it turns red indicative of an incorrect/invalid date.

 Portfolio

It is also worth mentioning that I’ve started to build the website portfolio that is due later on in the semester. I’ve gone for a super simple that’s clean and easy to navigate so I don’t put off any future employers that might want to look through it when I graduate. I shall fill out the page that showcases the Voyager website we are building once I have completed and submitted the project.

[333mmcc-blog]

[333mmcc-blog]

Journal 10-14/09

This past week I’ve mostly just been completing the frame working for the HTML, CSS and some JS. I’ve very much progressed on from last week with just basic HTML frame working. For start, all of the links in the website now work. What’s more, I have included a basic name checking feature in the home page that checks to see if the user has or hasn’t entered a name into the name submission. If the users don’t enter a name and try to move to one of the other webpages, the website will come up with a friendly error message telling them they cannot continue on until they enter some sort of name into the text field.

As for the Journey mode, I have managed to find a way to switch between different chapters using the next and back buttons, as well as a chapter selection, all with surprisingly little code.

What I ended up doing was putting each chapter into a div with the display set to None and just sit them at the bottom of the HTML document doing nothing. The plan is when a user requests a specific chapter, the side-bar is emptied and a clone of requested chapters (with the original chapter’s display still set to none) is appended to the side-bar, then some JQuery turns on the display of the cloned version in the sidebar.

Aside from that, I also did the frame working for the Browse mode of the website. As I mentioned last week, since I wasn’t sure how Fraser was extracting the data from the library, I couldn’t do much of the interactivity for that part of the website and didn’t really go beyond the HTML frame working.

From our latest Contact, there are somethings that my group members wanted me to change about the website. First, my fellow group members pointed out that it would be better if the back and next buttons stayed fixed at the bottom of the navigation bar instead of the user having to scroll all the way to the bottom to quickly move between chapters.

My group members also said that the home button at the bottom of the page needed better styling. Both of the things I quickly fixed this afternoon (as shown in the pictures below).

Looking at our progress plan document, we are a bit behind schedule since we are still tweaking our parts of the assignment when the bulk of the coding should have already been completed. As well as this, none of us haven’t even touched the document we need to submit for part B. Being the team’s leader, I will divvy up the work tomorrow and assign each member their own part of the document to do.

[333mmcc-blog]

[333mmcc-blog]

Journal 4-7/09/17

In this week’s contact, our group went through a scoping process which is pretty much planning what we should submit in a ‘worst case scenario’ situation

During the scoping session, we categorised major interactive parts of our website into ‘Key Features’ and ‘Additional features’ as follows:

Key Features:

·         Basic navigation between website pages

·         Basic map interactivity including; displaying tags on the map, the map repositioning when a new chapter is selected. To clarify the map DOES NOT have to respond to mouse clicks and other user inputs

·         Basic navigation bar with the story content mixed in with the library’s data content

Additional Features:

·         CSS styling for the page aesthetics

·         The map has interactive tags, with the ability to jump chapters using the tags on the map

·         The map has a route of the voyage etched into it with an animated sail boat that moves along the route as the user progresses through the story chapters

I guess the MVP would be a website that has all of the interactive components form the ‘Key Features’ section. Such a website would be very minimal have little to no aesthetics and only have a very rudimentary frame of the website layout. The player could move between chapters fine using the next and back buttons at the bottom of the navigation albeit the tags on the map would be completely useless for navigation as a result of the map not responding to user input

 As mentioned last week all of us had been assigned one major part of the project. As a reminder, I was given the HTML and CSS for the website as well as having working links between each of the webpages. Brae was given the job of sorting out the Google Maps API, Fraser was given the job of using JS to format data from the library into a usable format. Finally, Elliot was tasked with designing the aesthetics for the website including choosing fonts, colours and images to be used in the website as well as having to justify his design choices in a design report.

 Elliot immediately offered to do all the aesthetic design since, being a multimedia student, he was much better artistically than any of us. The rest of us didn’t really mind which part of the assignment we got. So, since the map was the hardest part of the assignment we gave that to our most experienced coder, Brae. What was left over was the data retrieval and the HTML/CSS website frame working and although both Fraser and I wanted to do the data retrieval I, out of the goodness of my heart, let Fraser do this part.

 Hence, my part of the assignment will be coding up the most (if not all) of the HTML and CSS. This part of the assignment is probably the most laborious and quite frankly, boring. To clarify, I must create 3

 unique HTML page from scratch. The home page will probably be the simplest of the three. All I really need is a centred title with a submission field and two buttons for the Journey and Browse mode. What I’ve created the necessary frame work so that once I have completed the other two pages, I can link all the pages together in a relatively short amount of time.

Functionality wise, on the home page, I’ve made it so when the user hovers over the text form it expands, changes opacity and colour so the user recognises it is an interactive object. Likewise, when the user hovers over the buttons, they will expand and display an arrow symbol to, again, emphasis that the objects are interactive.

It’s worth mentioning that I will have to try my best to do most, if not all, of the website interactivity using CSS. The reason being that when the code is combined with my other group members who are coding mostly with JS for data retrieval and display, using CSS as an alternative to JS minimises the risk on conflict.

The Journey mode will probably be the hardest of the three pages to code. I want to have each chapter load without having to reload the website page. To do this each chapter will be stored within a div class with the displays set to hidden; and when a different chapter is requested by the user a piece of JS code will empty the side bar and then append the desired chapter to the side bar.

As for the browse mode, unfortunately I can’t do much more the basic HTML and CSS for this page without collaborating with Fraser to find a method to append the information from the data base to the side bar since it will depend on how he retrieved the data.

I think the work can be done within a reasonable amount of time. However, instructors are expecting a prototype for next week so our will be very pushed for time and I very much doubt that my group will get any more than the site’s fundamentals done.

[333mmcc-blog]

[333mmcc-blog]

Journal 31/08/17

This week our team collectively created our paper prototype for the assignment. For those of you who are new to this blog, a paper prototype is a very rudimentary paper cut-out prototype of website/interface. A person may navigate the paper prototype, similar to the actual electronic interface, except finger pointing/pressing is used instead of mouse clicks and screen changes are made by people replacing paper drawings of the interfaces screens

Each member in my team made their own part of the paper prototype which then were amalgamated to form a complete paper interface to be tested on the Wednesday workshop. During the prototype testing, we managed to interview a total of 9 people most of with pretty similar feedback. Almost all of them were confused on how to move back chapters. In fact, so many interviewees got stuck on this task that we decided to add a back button in the side bar on our prototype in-between interviews just so that no one else got stuck on this task and wasted interviewing time to what to do. I think the reason so many people got stuck on this task was that originally, we had a timeline at the bottom of the screen, however we decided to remove it since we thought it cluttered the screen.

Another task that often left interviewees stumped was searching for data using the data base. Again, the reason for this was that the ‘Browsing Mode’ was a very last-minute thing to add to the prototype so there wasn’t even a home button to get from the journey mode back to the home (so this also was drawn in the middle of the interviewing process).

Other users explained that they would like to see a list of chapters since finding chapter tags on the map could sometimes be difficult. The feedback itself was recorded by a scribe taking notes in my handbook which I later sent to the rest of my group

The design of our interface has changed in a number of ways from the feedback in response to the prototyping feedback. First, the interface no longer has a timeline and instead has a browsing mode which users can search for information by date. Since a new browsing mode has been added, we have placed a home button in the bottom left corner of the journey/browsing so that the user can using the home screen to switch between the two modes. As well as this when a user clicks the chapter number at the top of the page, a whole list of chapters will appear which the user can click on to move to that chapter.

Funnily enough, some of the other prototypes I tested from other groups, during the workshop, had entirely different problems to us. For example, one group had too much information on their start screen that, for me at least, was a bit overwhelming. I suggested to them that they could store a lot of the information in slide-down menus with heading and the users could access that information as they needed it. Another group had navigation buttons that were way too small a took me a while to find them on the website page.

  At the end of our workshop our group started organising which part of the website we were going to code. Since Brae was the most experienced of us all, he was tasked with setting the google map interface. Fraser’s job is to grab data from the library data base using JavaScript, JQuery, PHP and AJAX and format it into a suitable style for Brae’s map. Elliot, being the only team member to study multimedia, is to design all the graphical aspects of the website. I on the other hand am actually building the website skeleton using HTML, CSS, JavaScript, JQuery and PHP. I’ve already started drafting some wireframes for the website to share with the team to make sure I don’t need to go back and make any really big changes to the website after I’ve finished coding the websites foundations.

[333mmcc-blog]