Swirl Magazine Feature Article Zulu Love Letter (w/interactive component)
Access my Assignment:
Click here to access my Zulu Love Letter assignment.Click here to access my Blog.
Reflections & Rationale
About the Magazine:
My magazine is titled Swirl. I chose Swirl as it reflects a magazine that is both fun as well as trendy. I had no desire of creating a magazine that had an African focus as I wanted to place the concept of a Zulu Love Letter within the context of a more broader (and global) sphere.
Swirl magazine is meant to be a stylised craft magazine with a sentimental/nostalgic character. The magazine will showcase various crafts, art, and trends within those categories and the magazine is aimed at young teenage girls specifically.
About the Interactive Component:
The interactive component (i.e. building a Zulu Love Letter) was a great pleasure to create. I feel that as an interactive component it covers two essential functionalities, (a) it offers users the ability to create and manipulate as well as, (b) offering users the ability to share what they have just created -- adding a sense of social value to the component.
Reflections on the Assignment:
I genuinely enjoyed this assignment, I consider it a breath of fresh air! While I would've preferred to have the opportunity to really get our hands dirty with the JavaScript - as I feel we just saw the iceberg in the distance, not even got to the tip of it - I am pleased with what we've managed to learn. This very brief introduction to JavaScript has opened my eyes to the realm of possibilities that exist within this language and it is very exciting to add interaction to our work.
As far as media queries go, that must probably be the most useful thing we've learnt so far. With the migration of most web-based browsing to mobile and tablet, this certainly has been an upgrade to our skills and abilities and I am pleased that we have by now managed to get a solid fix on fluid layouts, which of course is integral to the use of media queries. Thank God for HTML5 and CSS3!
In terms of the different strategies magazines have been adopting in order to ease into the mobile era have been making use of scalable designs, such as the one we have produced through the use of media queries. With the wave of touch screens that have taken the mobile (and tablet) markets by storm, a major interest and curiosity surrounding interactivity has been ignited. In terms of this, magazines have begun investing resources into producing online versions of print magazines in the form of websites as well as mobile apps. These apps offer interactive components, competition entries via the mobile apps, sharing and 'liking', hyperlinking (for example in fashion magazines to brands and products) as well as other unique and exciting features. Transforming magazines in this manner also allows for animation effects and the incorporation of multimedia content such as videos and audio, making the experience of magazine viewing a million times more interactive, informative and innovative than their print versions. Magazines are also thus more affordable and can be read 'on the go'. These are just some of the aspects magazines have honed in on in their transition into the mobile era.
On the whole, I feel pleased with what we have learnt and it will definitely prove extremely useful for our SRP and other future projects we will be lucky to find within our reach.
Identified Problems
Below is a list of key problems I have identified in my code:
Function: "Undo"
The problem I identified with the undo function is as follows: when one adds a bead and removes it, the bead 'physically' removes, however, it does not remove from the beadArrayData we have defined. So if one saves the bead array, then it will still load with the bead that was undone in place. I attempted to rectify this by adding a piece of code (into my removeBead function) that read something like this:
Sadly this didn't work. Though it did clear the removed bead from the string but when one added the next bead and upon that added another, the second bead (and consecutive) added after it changed the colour of the first bead added after the removed bead and continued to only change the colour of the one bead and not actually add another bead. So that attempt failed.
Function: "Append"
For some strange reason, when the URL is appended, the string of beads are too long and exceed the width of my div id="logg" that I have defined. While I believe the solution to this is attainable and probably simple, I couldn't manage to figure it out without breaking the append. The append function also on occasion causes my "component" div to shift left after it has loaded the URL in some views -- I'm not certain how to fix this.
Custom Alert Box
I managed to customize my alert box (which you will be able to view if you click "save" or "save as PNG". While there is no error to speak of really, I just wasn't able to customize it to the extent I would've preferred. The CSS, while straightforward, corresponded to the JavaScript, which was not quite as straightforward. Also the Alert box is NOT responsive and I didn't fully understand how to achieve that without completely dissecting the CSS (which I don't have as much time as I would like to do so).
So I hope my efforts will at least be noted in this department.
Page Height
I do not wish to take out the custom alert box that I made but ever since I added it, the height of my page seems to exceed the footer. While it doesn't affect my media queries (that's why I have decided to keep the custom alert in), it still forces my webpage past the footer, which then displays just the gradient background with the pattern as set in the CSS of the page.
No comments:
Post a Comment