Poll | Fiona MacNeill | Macknowlogist

Charty McCharterson

Sat, 07 Jan 2017 00:00:00 +0000

I knew that all of that work that I did on polls would come in handy at some point. The time arrived, as displaying data was something that seemed important from the beginning, to support the goals for the project. I wanted to support the information about ‘UK smart device ownership’ with some data. Having spent quite a bit of time and trying things out, I felt sure that the the Google Charts api (n.d.) would give me the level of interactivity and customisation required.

Something I changed

Like the tools I had used already (see earlier entries including Flickity by metafizzy (2016), smooth-scroll by cfernandi (2016)) the instructions always say to call the JavaScript package in the header. This is something that my instructor, Marcus, had pointed out as bad practice. Therefore, I created a new eventlistener in my JavaScript file in order to load google’s “loader.js” script. This allowed me to place the ’ tag at the bottom of my index.html file. However, unlike the other widgets and code snippets that I have used, I cannot compile Google’s JavaScript as part of my own script (Google, 2016a), it has to be loaded from Google servers (licensed under Apache license version 2.0 (2004) ). For this reason I reused the loading GIF from the contact form, to show while the chart loads. The data itself is from Offcom’s report entitled, The Communications Market, 5 Internet and Online Content (2016a, p. 191). What is great about their site is that they make the raw data available in Microsoft Excel format, so I was able to construct the chart based on a subset of data (Ofcom, 2016b). In order to show the age versus ownership I selected a stacked barchart as a space efficient way to show the data.

Prepping the chart for print

I have still to create my print stylesheet, which is something that I will do towards the end of the project. In the meantime it made sense to make sure that the chart was prepped for printing to png. I am not going to make a link to the png available as that function will run in browsers which support the HTML5 element (Google, 2016c). However, what customising this script did do, was create a static view of the chart showing it in suitable format for printing.

Tab clear

I decided that I needed to highlight the User Experience section of the portfolio page design, as it was all very wordy. There is still a lot to consider in this area, but I decided to add a tab image on the top-left of the UX factors (formerly scenarios) section. I started by creating an svg, partially inspired by a post on CSS-Tricks (Coyier, 2013). However, I really wasn’t happy with it in terms of formatting and scaling. For now I have replaced it with a tab which I created using pure CSS. The tab is actually made of two divs, one for the the main tab shape (rounded rectangle) and one for the slant leading up to it using the skewX transform option. However, I will have to replace this as it is only compatible with IE11 or later (Can I use, 2016). It is a shame, but it was good to learn about the transform option and again I used the ::before pseudo element to add text content on the div.

The first attempt at the tab using an .svg

Second attempt at a tab using two CSS divs - one skewed 40deg - sadly it will need to be replaced due to the need for background compatibility. Ultimately, I will need to go back to an svg solution, but I will draw it to look like what I came up with using the CSS.

References

Apache Software Foundation. (2004). Apache license version 2.0. Retrieved January 7, 2017, from Apache Software Foundation website,

Can I use… (2016, October 23). Retrieved January 7, 2017, from

Coyier, C. (2013, December 4). SVG tabs (using an SVG shape as template)

\[Blog post\]

. Retrieved from

cferdinandi. (2016, December 11). Cferdinandi/smooth-scroll. Retrieved December 11, 2016, from

Google. (n.d.). Charts | Google developers. Retrieved January 7, 2017, from Google Charts,

Google. (2016a, September 12). Load the libraries. Retrieved January 7, 2017, from Google Charts,

Google. (2016b, September 12). Bar charts. Retrieved January 7, 2017, from Google Charts,

Google. (2016c, October 12). Printing PNG charts. Retrieved January 7, 2017, from Google Charts,

metafizzy. (2016). Flickity. Retrieved January 15, 2017, from

Ofcom. (2016a). The Communications Market 2016: 5 Internet and online content. Retrieved from

Ofcom. (2016b, August 4). Data downloads. Retrieved January 7, 2017, from Ofcom.org.uk,

On the importance of self-discipline

Sat, 24 Dec 2016 00:00:00 +0000

Update on the previously mentioned to-do list:

Task scenarios to reflect the decision to present all of the content on one long page.
General characteristics for user groups - I went a bit more in-depth and produced a user characteristics list for the primary user group of health professionals
[Tentative plan] create a UML diagram - I am not going to do this, as it is primarily a tool to communicate with developers and as I am UXer and developer here I think that it is more important for me to crack on with the development (although if I had been more self-disciplined and followed a UML I probably could have avoided the feature creep outlined below).
An paper online prototype – in the end this was a prototype version of the actual site. Delivered to Dr. Theo Fotis on the 12th of December.

Adding polling aka feature creep 16/12 - 24/12

In my last post I mentioned that I had decided to add a poll as I felt that some further interaction might be needed. I now realise that really a bit of a superfluous feature and upon reflection I have spent too much time on it.

What I can take from it, is that I learned a lot about JSON and PHP in the process. This activity was really the textbook definition of feature creep or scope creepA handy definition from wikipedia just in case you need it: . Here is a consolidated account of what I did and what I found out in the process. I thought about using the fantastic Google charts tools. I could not, however figure out how to feed data into the chart, based on clicks of the options and then also how to store that information. Here is an image of a mock-up that I made during that particular phase.

Initially, prior to the radio buttons, I was just using buttons to visualise the poll options. It looks nifty, alas it had no functionality whatsoever.

Then I thought about creating a custom Google form skin as the front-end for a Google chart. There was some documentation on this ( ) and I referred to the excellent documentation from Google as well, but it wasn’t the right thing. Then as I use , a web application for polling, in my day-job I thought that using might be a good way to go. Especially as their poll visualisation is very nice. I must highlight at this point that I wanted to avoid using an iFrame and have a solution that was integrated with the site. This is largely due to the fact that the iFrame content would almost certainly be blocked on NHS Trust computers (again this knowledge is based on my professional experience). The PollEverywhere API highlighted the use of JSON (Javascript Object Notation) for the configuration of polls. However, I have to admit that their documentation was a little beyond my own knowledge and I felt unsure of where to start. I asked Marcus for his advice on the 16th of December and I also found a . Normally I’m not a huge fan of the w3schools tutorials, but this seemed like the perfect solution. I was able to build the poll, but the issue with it is that it is that it stored its values in a standard text file and this is a very insecure method. Marcus advised that I look at writing the values to a JSON file via the PHP and then pulling said values through html for the poll visualisation.

So I decided to see if I could adapt the script to read from and write to a JSON file instead. Easier said than done as the syntax from PHP to JSON confused me a bit. Marcus did a bit of troubleshooting on it too and this was very helpful to get on the right track. I finally decided that it was time to join StackOverflow and start asking and answering questions, here is the question that I asked: . The community were great and I got a lot closer to a solution. However, echoing data back via html in the php file proved too tricky and issue to surmount. I could get the one option to display, but I couldn’t pull the previous results to display. This was immensely frustrating, to be so close and yet missing at the final hurdle.

Animated GIF showing the issue where I could only display current data not pull the existing data from the JSON. The values update in the JSON but the html based on echoing the PHP does not.

It was also really hard to debug the issues as a small change could take a few re-runs (despite hard reload and clear-cache reloads) to actually manifest and break it all. Then I stopped and thought, why am I doing this? Sure, it looks pretty and adds an element of interest, but after working on , it hit home that I had been the victim of my own self-inflicted feature creep. The end users have very limited time to look at this site and probably wouldn’t have time to contemplate the poll question. Furthermore, the poll question detracts from the content of the site. Finally it introduces additional security considerations and affects the life-span of the code in the site. So I have decided to archive what I did offline and continue from where I left off on the 16th. You live and you learn. I shall now be focusing on an prioritised to-do list and I will deviate from my Trello board no longer.

Something that I have had on my list for a while was to add a skip to content link for screen readers and keyboard navigation users. I looked at how a few sites did it and settled on advice from the WebAIM site ( ). Although instead of positioning the content off-screen by 1000px I positioned it above with top:-20em. Although the WebAIM site recommends against positioning above due to the fact that this may cause a scroll off-screen, based on testing I have not found this to be the case and as Mozilla use this method (e.g. here: ) and I am trying to convert all my units to dynamic values (ems or percentages) - it seemed like the way to go.

References

Heaversm/google-custom-form. (2016, August 5). Retrieved December 24, 2016, from

Macascot. (2016). JSON Newbie - permanently saving values to JSON between browser reloads. stackoverflow. Retrieved 25 December 2016, from

Mozilla Developer Network. (2016a, September 13). Getting started. Retrieved December 24, 2016, from

Mozilla Developer Network. (2016b, June 1). HTML forms guide. Retrieved December 24, 2016, from

PHP AJAX poll. Retrieved December 24, 2016, from

PHP Group. (2001). PHP: File_get_contents - manual. Retrieved December 24, 2016, from

Poll everywhere. (2016). Retrieved December 27, 2016, from

Populating data using server-side code. (2016, January 28). Retrieved December 24, 2016, from

Scope creep (2016). In Wikipedia. Retrieved from

Strawpoll/strawpoll. (2016, June 28). Retrieved December 24, 2016, from

Task analysis. (2013, September 6). Retrieved December 24, 2016, from

The poll everywhere API. Retrieved December 24, 2016, from

Poll | Fiona MacNeill | Macknowlogist

Charty McCharterson

Something I changed

Prepping the chart for print

Tab clear

References

On the importance of self-discipline

Update on the previously mentioned to-do list:

Adding polling aka feature creep 16/12 - 24/12

Added a skip to content link for accessibility

References