PHProgress

Just a quick recap of the work done in the final workshop for last week. There were not a lot of people around with groups climbing into holiday mode and illness going around. Which was good as I was able to really did into the PHP and hog Artuo's time in this session to get our Login system set up and working. 

Unstyled Log In Fun

While it looks terrible at the moment all the elements from our original site are ready to be put into place. I was testing this PHP experiment in a separate folder to ensure that I did not cause any issues with the gitHub repository or anyone else's work so it has no style sheet attached to it.

Please Register

A page that I had forgotten about, users will need to actually sign up. So we will have to do a bit of work styling this page as it is a new addition compared to the paper prototype. We also allocated jobs during this workshop session so I am confident that the team will be able to achieve another round of testing with a hi fidelity prototype after the break.

Database Entries

The fruits of today's labor. It is a small step in the right direction, but I am definitely starting to feel more confident not only with the PHP code syntax but how to spot errors. We looked today at the error log and how to print PHP errors to the screen to help with the debugging process and this will be invaluable as I try to load more data into the system over the break and convert more pages from straight HTML to PHP.

While there is no class next week, it definitely does not mean an end to the work and I am hopeful to have the PHP code finished by the end of mid-term break so that we can focus on additional aspects of the concept in the future weeks as well as adding polish.

Turning up the Heat

This week it was time to really get serious with the Project and kick it into high gear. Time to walk the walk and stop talking about "yeah so its all working we just need to hook it up".

That was the start of this week. What followed were some long nights, intense levels of frustration, vague JavaScript errors (along with the specific ones with no googleable solution >.<).

For my part of the project putting it all together meant that all the JS, JQuery, AJAX code that I had written I now needed to put into other peoples pages and made sure it worked in the environment that it was supposed to. Along with helping out the rest of the team with styling, and other page coding where ever they needed me.

Our end result demo code (live here) shows almost all of the functionality we want to include in our project as a core (CSS and HTML editors not playing together yet). I would have liked the styling to be a little bit more complete and consistent, but the team has identified this as an area we can work on other the break to make sure the prototype is higher fidelity and more easily able to be tested.

The other big hurdle that we are going to run into is our Back end system, which is currently non-existent. This is going to be my major role for the project so I am going to be spending a lot of time looking at this guy:

It is definitely exciting and scary at the same time, seeing as this is my first experience with PHP but it is something that I am really interested in for my later Thesis work. I am planning to make a solid dent on the back end systems over the break so that we can get into more gamification aspects of our project and improve user experience over and above the basic functionality.

Ill let you know how it goes ^.^

Feedback Presentation

For specific feedback we asked how everyone felt about the publish button. What if you publish something unfinished?

• There was no solid opinion on yes or no. But an interesting point was made about removing the publish button and instead having some sort of WIN! or achievement type system pop up when the user gets to 0 errors (ie. has completed the task).
• This could have an option to share the success to social media or publish to private or public gallery.

Multiple points of Feedback on the HTML editor or Working Panel.

• Users agree that the windows for editing the code should be larger, so that there is less scrolling to do (breaking up the errors into segments would also help with smaller code blocks).
• Artuo suggested toggle box to make windows larger or smaller and continue to work in them. While Fatimah suggested a similar idea of a pop-out system. 
• We will need to look into the current capabilities for adjusting the editors size as well as users ability to resize windows. (Changes to overall page width will need to be represented across the site).

This lead into a discussion about the Number of Errors.

• Currently there are a large amount of errors which load into the working panel. Users were concerned with the amount of errors and how they would be managed.
• Artuo suggested ordering the errors by importance (Must be fixed, not webstandard but wont break HTML, minor)
• The whole validator section will need to be styled and themed appropriately into the future.
• In terms of number of errors there was a suggestion to break the rebuild into sections. This could be a good way to tie in some gamification aspects as we are finishing up the build. 
• Components would be a good way to work, encouraging users to encapsulate their code for each segment of a page.

From this we touched again on the Target Audience.

• This is the second time target audience has been raised. This is probably out of fear that the task of validating a whole site with no help is too difficult for students mid-highschool. Perhaps we should look to pitch it at senior years (validate and redesign could be a good final project) and entry level for university.
• Looking at the volume of errors it is clear that re-validating is not a simple process, and saving progress will be important along the way.

Where to?

Setting up the back end database management system. Filling the database with content of archived websites, finding applicable images from trove and thumbnails to represent websites.

Workshop Grunt work and a Sassy Project

Big thanks to Lilly today who helped everyone in the group set up both Grunt, Ruby, RubyGems, and SASS for us to use on the project. We had already been using GitHub for version control and had decided that we wanted to use Bootstrap. With the latest Bootstrap 4 using SASS we thought it would be a good opportunity to jump in.

First Foray into the Command Prompt World

I had heard a lot about SASS and the idea of having a compiled CSS where you could use variables and other added functionality sounded like a really neat idea. So I am glad that we are going to be using it on this project as I feel the experience will be invaluable (even if it all ends horrible). This project has involved a lot of jumping into the deep end but fingers crossed with a team of four we will be able to bring together a fully functional prototype for the demonstration next week.

From the feedback on our project thus far there have been a lot of great suggestions for further functionality which we could add to our concept. I feel that if we can achieve all our core functionalities by next weeks demonstration we will really be able to branch out and explore some fun aspects that we could add to improve user experience.

But back to the real world, where in another stroke of success I manged to complete the Trove API call. Credit in no small part to our Tutor and Leila (who was also having the same problem) who helped me cobble together a working request for an image.

Trove API Call

Image from Trove

All in all despite today's minor successes there is still a lot more work left to be done. It may be a long weekend ahead. But hopefully more content for the blog and more frustrations, venting and hopefully reflection from me too.

Time to Catch Up

Last time I saw this blog I was quietly confident about all the progress that I was going to make on this project. Completing the API calls getting the PHP system set up (Learning PHP). However, fast forward a week and I am still in pretty much the same position. Only this time there is a demonstration due in a week. What happened?

Collectively the group decided last week that with a number of other more pressing assessment pieces (I'm looking at you Digital Prototyping) and the demonstration deadline far enough away off we could take a breather and step back from our studio project for the week.

Step forward into this week and I was still hitting a brick wall on the Trove API call. All the other APIs had been configured correctly, or enough to know that they were sending and receiving data (without necessarily manipulating it). The never ending pain came in the form of a console error with the very uninformative, no 'Access-Control-Allow-Origin' header is present.

The Error that plagued my Existence

So after truckloads of reading on StackOverflow as well as the W3Schools I was no closer to an answer. I even found a blog from a student previous taking this course who had the same issue without a real solution. Then after reading the MDNs page on CORS and cross site access restrictions and a few subsequent links I came across JSONP. By using a JSON object with added padding. It essential tricks the server and gets around the Same Origin Policy by wrapping the response up as a script. Scripts thankfully are not subject to this same policy. This website helped to spell it all out for me.

The only problem now was that I had up until this point been writing only in vanilla JavaScript and had not really familiarized myself with the JQuery notation (Sorry DECO7140 two notations and Python syntax at the same time was not going to happen). So of course it was time to hit up the academy

Thanks Code Academy

In a round about kind of way its good that this is making me learn JQuery, because it is definitely a useful library and a skill that I will need to have in the real world. Its just a shame it took hours and hours and hours to realize that it was a necessity for this project.

Experience with Paper Prototyping (Week 7)

Last weeks contact session was really exciting. Each of the teams were conducting paper prototyping sessions and I was lucky enough to be the one testing other groups, rather than conducting tests. It was great to see how the other teams were progressing and how their ideas were coming together. But it was also a good opportunity to see where our development was at in relation to the other groups.

I feel like we are on par at the moment with most groups. We are definitely behind team Findamals in terms of Backend development, but our team also does not have a software engineer so I guess that ok ^.^

Testing the Truth detective groups prototype made me realize just how difficult a game like this would be to build. The amount of things I saw Lilly just tapping and tapping and tapping on the piece of paper to try and get a clue was funny. Finding that balance between obvious clues and inconspicuous ones will be hard. Let alone having to deal with users inputs and spelling mistakes.

On the other end of the scale the Pinboards team had an actual working digital prototype. While it was very shallow it was still quite impressive and they had a survey to follow up with after the testing session. Which in hindsight is probably something that we should have organised.

While Felix and Rena got a lot of good feedback shown below, it would be a good idea for us to place a bit more emphasis on the testing session next time.


Migrated from Team blog.

Landing Page
1. Too much text to read for the construction.  -Could consider using flow chart or combination of pictures
2. The "Sign in" and "Login" button should be more distinguishable (separated?) and more informative to users what the difference is.


Home page
1. More instructions to tell the user what they should do (e.g. What's the difference of Hand and Easy;)
2. Emphasise the category tags, letting users choose among different topics
3. Whether to show the current works if users have already signed up and made some edit
4. More pages for different topics?

Editing page
1. More objective-orientated that users should know what to achieve (e.g. the total number of errors,  etc)
2. Layout of the page should be changed to follow the sequence of the work (e.g. errors 1st, editor 2nd, "Save" and "Publish" 3rd)
3. Change "Publish" to "Save & Publish" or a popped up windows with confirmation
4. Consistent navigation bar, allow users to navigate to different page.
5. Layout of the editor (customisable? switchable tags?)
6. Users are allowed to add name to their works
7. Any hint to users if they have solved all the errors
8. Users are only required to edit on page (no hyperlink include)
9. Inline CSS or separated stylesheet

My Restoring
1. The way of presenting: follow the format of "Gallery" or "Homepage"
2. Process recording presents as number counter instead of percentage bar.
3. Name of the works: customised name instead of numbers


Gallery
1. The work shown in Gallery would list its author
2. Develop presenting style as light box


Others
1. Do we need to make a profile setting page and a separated instruction page ("Help")
2. Logo position, Logo consistency.
3. To import the website (index) with only one stylesheet, by restricting the year range.

Poster and Pitch Reflections (Week 5)

Everyone was hyper stressed about the pitch this week and making sure we had a whiz bang presentation that looked a million dollars. I kept having to remind the group that the majority of the marks were actually for the proposal document and we should be spending our time refining that to make the best use of our time.

Because the pitch was based on my original poster concept I was able to recycle a lot of the content from my original pitch and we even reused the poster image again as a one of our slides. Ill be the first to admit that the poster itself is pretty ugly, but I like bright colours, and hopefully with the arrows it got the message across. It was a lot easier to talk to when it was projected up on the big screen and we were able to structure our group presentation around the steps it illustrated. 

The prezi presentation that Rena built was fantastic and really helped to show our concept, and everyone pitched in to explain the area of the project that there were working on in more detail. While we got grilled a little bit on our Audience, I feel that the research Lilly conduced and the evidence we have suggests that it will be an appropriate group to aim for provided the difficulty level is not too steep.

Lilly took notes of the feedback and created a neat little table for us to put on the team blog.

Gamification

• level up
• easy: validate
• hard: no validator = more points

Tangential learning

• do you want to learn more about a topic? Go to Trove and search the rabbit hole of links.

Multi-user

• more than one person editing like Google Drive
• set-up a friends group or study group to work on a problem together
• solve collaboratively

Help

• How do they get help?
• discussion board
• chat panel
• links to stack overflow (see codeacademy)

Web design

• add in an extra level of complexity 
• validation doesn't make it look better

Audience

• is years 7 and 8 too young?
• when is validation appropriate
• what are students really learning in the classroom
• how hard are the validation problems

Gallery

• add a voting system

Last Weeks Progress + This Weeks Plan

Last week we had the presentation and the Proposal document due, with all the preparations for both of these pieces and other assessment I was unfortunately not able to even get a real look in at PHP and finalizing our API calls for the groups project.

While we were briefly exposed to some more PHP in the workshop session,it seems clear that It will take some substantial effort to actually understand what it is that I need to be doing to have the database / log-in form and HTML elements interact correctly.

There have been several instances already during workshops for this course where I have largely felt lost. There has been a lot of processes undertaken to set up the zone, enable PHP and SQL, upload files to the server use the command line (putty in my case) SSH into the server and all sorts of other things. While I was able to accomplish the tasks put before me (as they were step by step instructions) I come away almost feeling more lost than when I started. Completing a task but having no understanding of the HOW behind the methods and the WHY is irksome.

I am hopeful that by the end of the course I will be able to fully understand the processes that I am undertaking and have greater control in how I can shape their outcomes, but at the moment I feel much more like an uneducated person blindly following a list of instructions. With the pressures of the team project I am hopeful that I will still have time for some self directed learning in the areas around severs, zones, back end access and all the other related jargon.

This week is shaping up to be less intense with other subjects and I am hopeful that I will be able to deliver a completed and functional Log-in system by the end of this week. I will take the initiative and do some reading on PHP before the workshop session so that I can more aptly ask for help if I need it. I will also esquire with my information systems tutor as to how I would implement such a system. Taking INFS7900 alongside this course has actually worked out quite nicely as we are learning the PHP myAdmin interface and the concepts underpinning such a relational database system.

In other project news our paper prototypes are going to be tested in this weeks contact session. In preparation the team has organised to have a meeting on Tuesday morning so that we can run an initial in group walkthrough of the system to weed out any obvious interface problems. We have still yet to decide who will be running the testing session with our prototype in the contact session and who will test other groups prototypes. I am expecting that we will discuss that tomorrow.

That is enough ramblings for one night. Until next update (hopefully there will be multiple this week)