Another Problem Identified: Gallery

Responsive Gallery is now completely Unresponsive!

Sadly, my gallery has stopped working also as a side-effect of the inclusion of a custom pop-up box. While I have struggled to get it to respond, I am unable to be successful.

However, I have identified the cause of the problem after removing code piece by piece. The gallery works perfectly until I attach this javascript file to it, which unfortunately is a key component of the pop up box:

<script src="SexyAlertBox/mootools.js" type="text/javascript"></script>

There is definitely some code in the "mootools.js" that conflicts with the code in my gallery's own .js file.

Having said that and weighed all the odds, I have decided still to keep the popup box. I have included many galleries into the websites I have built over the passed year, but I have never customized an alert box in javascript. And through this experience I am learning so much about how easily the javascript codes in the plug-ins we download and install into our websites conflict. Also doing an alert box is new for me and I feel I have gained more by including it into my project than the gallery. Although I have left the code for my gallery in as it is, it has just rendered itself unresponsive for a responsive gallery...what an ironic end to my project!

Swirl Magazine: Zulu Love Letter Feature

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: 

beadArray = beadArray + new Array ();

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.

Beading the Interactive Component

Adding Beads

Managed to add all the beads to the canvas for my interactive component. Also added a stylesheet to edit the background of the beading area. 

Feels so cool that it works! I attempted to add an if statement to get it onto the next row but ended up more confused. Conceptually I'm sure its on track but I assume there should be other variables involved as how would 'iCanvas' know I'm telling it to asses the width?! And I'm sure it should be an if/else statement, not just an if. And they could possibly be two separate functions... Nevertheless, it went something like this:

function addBead (beadToDraw){

context.drawImage(beadToDraw, column*80, 0);

column++;

if(iCanvas>=600){

context.drawImage(beadToDraw, 0, row*80);

row+1;

};

}

Zulu Love Letter: The Uber-Version

If I had the awesome ability to properly code javascript in order to achieve my ideal version of an interactive component for the Zulu Love Letter, I would have interactive component be much more creative and constructive. Ideally, in terms of bead colour selection, I would like to have a set of colour boxes that allows users to select the precise shade of a specified colour they prefer. This will be represented by a row of differently coloured beads alongside each other. Once clicked upon, a preview window will pop up that would feature around 6 to 8 different shades of the selected colour. Users will then have to select their desired shade and it will go to the ‘selection box’ and users will be able to add the bead to the string. For the stringing process,

I would like to include some basic animation, once each bead is chosen and dropped into the beading area, there will be a background image of a string where on the bead will move across and positioned in the next consecutive place designated by the beading process. I would like for the interactive component to have full touch functionality. In terms of touch, users will be able to drag each bead along the string themselves, thereby touchscreen users will have a unique beading experience non-touch users won’t necessarily have the opportunity to experience.

The design will be a lot more colourful than the mock up I made but the feel will be crafty and earthy, to evoke the feeling of Zulu culture. The Background of the beading area will feature a very light watermarked line drawing of Zulu maidens beading.

Lastly, once the last bead of the love letter has been strung, an option for saving and sharing the love letter will pop up. This will send it to a preview area where users are able to either (a) write a caption explaining the meaning of their love letter or (b) attach a pre-written colour coding guide as a caption to help receivers decode the love letter themselves. Once that has been chosen, users can then click “share” (via facebook/twitter) or “jpeg” to save the image and either “email” or “text message” it to the receivers (free of charge).

Feature Article Webpage Prototype

Below is a link to my feature article webpage prototype.

 

I am still in the process of adding images to my slideshow, restructuring the written article (as there is a bit of repetition and its not 'magazine-y' enough yet, adding the gallery to my tablet view (as it is currently only activated in smartphone and desktop view) as well as adding navigation links and links to other related articles. Also in smartphone view, list-style-type still needs to be set to none and I'm not 100% done with my design layouts, and whether I'm settled with the Google web font I decided to choose.

Having said that, Click Here to view my webpage so far.

Zulu Love Letter Assignment

Mobile Assignment Zulu Love Letter 

Capabilities 
The capabilities for this assignment really depend on the devices they will be browsed or viewed on. I intend to aim my assignment of course for users with smartphones and those with desktop computers which have updated browsers and support the likes of HTML5, CSS3, j-query and the JavaScript we will be using. Capabilities that will be focused on are:

 • Downloading and sending an image of the Zulu Love Letter’s created to love interests or even friends and family. On a side note, I do remember partaking in something similar twice, once when Shakira’s “S Florale” perfume was released, you had to create your own logo with the first letter of your name and once created you could place it as a tattoo on a photo of yourself, download it as a jpeg or share it on Facebook/twitter etc. That was probably more advanced but conceptually I’m thinking it’s probably the same. The second time was when we could create our own Coldplay butterfly that would be flying about at one of their performances, I can’t remember exactly everything about it but you could save an image of that too for keeping and sharing.

 • How users physically interact with the webpage, be it via tablet, smartphone or desktop. Each of these options presents a different set of capabilities. Where with tablets and smartphones there are the options of touch screen whereas desktop its usually the generic keyboard/mouse combo and notebooks or laptops have touch pads with keyboards and the additional option of having a mouse. Each of these options need to be considered when building the interactive component and even the site as to find the best combination of options so that it is a pleasant browsing experience for as many as possible.

Requirements 
The requirements I will be using as a framework for approaching our Zulu Love Letter assignment will focus on 3 key areas: technicality, design and interactivity.

For the technical requirements I feel that we will be drawing on most of the coding skills we have equipped ourselves with over the past year.

• HTML5 & CSS3: This will be the basis of coding from which the webpage will be constructed. HTML5, which is considered the new standard for web offers a whole new range of possibilities previous versions did not. Including of course the support of CSS3 which offers us the unique option of implementing media queries in order to achieve our ultimate goal of creating webpages that are optimized for mobile, tablet and desktop browsing, allowing each their own unique styling parameters.

 • J-query plug-ins: In keeping with the theme of Responsive Web Design (RWD), I’ve researched and found some great responsive slideshows to use in the assignment to showcase the feature articles accompanying images. There’s even on that allows users with touch screen to swipe through the images!

• Adobe Photoshop: This probably isn’t entirely relevant, but one must recognize the wonderful software I’ll be doing all the webpage’s graphics in, including creating or rather simulating glass beads for my interactive component, which I have already done in the prescribed colours (black, white, blue, yellow, pink, red, pink and green)... and maybe just one or two surprise colours to give it a little edge.

On the visual level, the design will have to be simplistic enough to NOT clutter up a mobile device. However, also it should be funky and trendy enough to want to be viewed on a mobile device! Since the feature article is for a magazine, magazine layouts are pretty much standard and in their essence have generic elements that should be present:

 • A catchy heading in a legible font that is chosen based on evoking the users interest and also supporting whatever is being said.

• Images!! Recently I learnt about the concept of a ‘post-literate’ society i.e. a society that CAN read but choose not to. So of course, the more that can be communicated visually, the better.

• A well-written feature article (for web) that is short and sweet but offers the necessary information to (1) inspire the user to actually want to partake in the interactive component and also (2) to educate the user and provide them with the necessary knowledge to meaningfully construct their own Zulu Love Letters.

 Lastly when talking about interactivity, one has to consider how the interactive component will be built and the nature of its interactivity:

• JavaScript Canvas Element: As mentioned in class this will be used to build an interactive component whereby users are able to simulate the beading of their own Zulu Love Letters. I don’t yet know too much about the JavaScript canvas element; perhaps I will follow this post with one dedicated to a basic introduction thereof.

Media Queries -- Useful Site

Here's just a really useful site that showcases mobile optimized websites...

Media Queri: http://mediaqueri.es/

Just useful to see it all in action :)

Interactivity and the Mobile Web

It is a week into the new semester and after a few days filled with introductions and at least a night or two spent googling for "mobile magazines", "mobile magazine apps" and somewhere between "e and electronic magazines and/or books", I realized the semester has officially begun and I'm feeling slightly disoriented -- as usual!

In all my googling about interactivity for mobile magazines, what I have concluded is that interactivity is just a practical extension of the concept: Experience... The experience of browsing, of interacting and receiving a response from the other end. All the concepts we learnt about with Processing last semester. And after reading the first chapters of our textbook, Head First Mobile Web, a call for the responsiveness of design mixed with the excitement and curiosity of the users together have seemed to push the browsing experience beyond anything anyone could have anticipated.

And I think essentially its the survival instincts in people that really fuel all these advancements. The fact that people want to be able to do things themselves, take things into their own hands and create. Be creators and express themselves. Be the authors of their lives. All these apps that require people to mix the perfect coffees, draw pretty pictures and travel the world over, for example World Atlas, all fuel this inner-aspect of users. And then again, having everything at the tap of a button or the touch of a screen, well how could that not be something people would be interested in?!

So getting to the point, our first assignment is to create a mobile magazine feature article about Zulu Love Letters, with an interactive component that allows users to create their very own Zulu Love Letter. This assignment is intriguing for a number of reasons, partly technical but also creatively. So a big thumbs up to our lecturers who came up with it. On a technical level, we're doing mobile. It's something I haven't taken the time to look at before, so I'll be learning something new and also something completely relevant to the times we're living in. The prospect of mobile web design was intimidating at first, as I wasn't sure how much of what we've done needs to change and how exactly that transformation occurs. Also probably largely all the above-my-head technical chatter about android devices and different operating systems for phones requiring different scripts for apps freaked me out. However, now that we're over the introduction to scalability and getting into the swing of Responsive Web Design using fluid layouts, I feel a whole lot better. I'm pleased to say that though my first fluid layout is hideous, it's successfully scalable and percentages are making a lot more sense to me now.

So on a closing note, I just wanted to say I am excited about getting this mobile web assignment started and I hope to learn as much as I can in the short time we have to execute it, and also to share the (hopefully) cool things I come across along the way.

Visit my blog post here: http://www.mendilab.co.za/FAM3007F/2012/ryklai001/?p=78

Below are a list of sites that I managed to come across in the mean time, related and just interesting and interactive apps:

Best Interactive E-books: http://www.bestinteractiveebooks.com/

About Interactive E-books: http://uxmag.com/articles/interactive-ebook-apps-the-reinvention-of-reading-and-interactivity

Examples of apps ~ Since it all of these are about the user having the opportunity to create something (much like our Zulu Love Letters), they just seemed relevant... conceptually anyway o.O!

Starbucks Coffee Master: http://itunes.apple.com/za/app/starbucks-coffee-master-for/id436466118?mt=8

Glow Coloring: http://itunes.apple.com/za/app/glow-coloring/id360776513?mt=8

How to make Origami: http://itunes.apple.com/za/app/how-to-make-origami/id472936700?mt=8