Top 5 CSS3 animations and games (2nd year interactive media students)

I would like to dedicate this post to the top 5 students participating in the 2nd year interactive media course where I had the opportunity to introduce students to CSS3 animation and JavaScript. I was delighted with some of the students work considering they were all novices to programming and we only spent 13 hours together in total.

The top 5 in Descending order:

Pydegadu, Usheekan @ http://mendi.uct.ac.za/~pydraa001/Assignments/index.html

Shier, James @ http://mendi.uct.ac.za/~shrjam005/index.html

Douglas, Stephen @ http://mendi.uct.ac.za/~dglste001/odds_&_ends.html

Kaliwo, Watipaso @ http://mendi.uct.ac.za/~klwwat001/projects.html

Patel, Inez @ http://mendi.uct.ac.za/~ptline001/animation.html

Animation links (CSS3, parrallax, etc.)

http://en.wikipedia.org/wiki/History_of_animation

http://www.w3schools.com/css3/css3_animations.asp

http://css3.bradshawenterprises.com/animations/

http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html

http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

http://en.wikipedia.org/wiki/Parallax_scrolling

http://css-tricks.com/parallax-background-css3/

One last thing

HI. Forgot to ask if you could view my project in safari! thank you

Its done!

The Tea Room mobile magazine!

For the blog post go to my blog Geek Street.

Zulu Love Letter assignment: Robin Brink [BRNROB022]

Assignment submission: Robin Brink [BRNROB022]:

http://mendi.uct.ac.za/~brnrob022/zulu_love_letter/brnrob022/

Magazine feature and blog

The move to mobile

The trend nowadays is the use of mobile devices to browse the web. Smartphones and tablets have made it easier, now more than ever, to do so and the increasing popularity of these portables have led to the Mad (Mobile Application Development) era. The transition from desktops to mobile has meant that current website owners who wish to expand on their mobile users have to build or tweak their websites to suit mobile browsing (otherwise a browser automatically adds an page scroll which is not preferable in mobile browsing). Here a four methods which can be used for this transition.

Adjust

This method requires the programmer to adjust the viewport and text-size in the css. Webkit tools allows for the resizing and scaling of the webpages content. This approach is quick but problematic as the content and navigation is still made for desktop. This means that however a webpage would look on pc, it will look that way on mobile, just rescaled. Large files such as images would still have to load, slowing down the mobile usage.
An example in the coding would look like this:
1 html {
2 -webkit-text-size-adjust: auto; /* Automatically adjusted for Safari on iPhone. */
3 -ms-text-size-adjust: auto; }

Media Queries

One of the perks of HTML5 is its responsive layout capability. Using media queries, a webpage can adapt to suit different screen sizes. Problem with this approach is that HTML5 is still new so not all browser versions like IE8 are compatible with it. In favour of this method, I find it the easiest and method effective method (on a tight budget) to transition to suit mobile adaptability. Reason being is that with this method web designers can remove certain content from a webpage depending on the screen size. Using id or class div tags, content can be arranged in media queries so that large file assets such as large images wont load if say perhaps the screen is 480px. But this method would become strenuous in undertaking for existing websites already hard-coded to suit desktop layouts.
An example of this approach in the coding would look like this:
1 @media only screen and (max-device-width: 480px) {
 2 .desktopcontent { display : none;
3 }

 

*My magazine uses both the above mentioned approaches 

 

Redesign

A more expensive and timely approach for mobile conversion is redesigning the entire site. The site is designed specifically for mobile browsers so only necessary content and navigation are used, making mobile browsing easier and quicker. A link to the entire site should be provided if this option is used. An example of such site would be recognized (not exclusively though) by URLs ending with .mobi or contain mobile.site.com.

Apps

Anybody with a smartphone or tablet should know plenty about these. Apps are designed to best suit these portable devices. They are installed and used as programmes on mobiles, just like application software on pcs. Apps are lightweight and the most preferable option for mobile browsing. They are also quite intense in designing as they require most skill and expertise to make. There is now available apps for most popular websites such as facebook and twitter and other media (magazines and newspapers) such as Time and Daily Telegraph. 
 

Further reading on mobile design

smashingmagazine

alistapart

onextrapixel

slideshare

 

Saving image from canvas

To save the image on the canvas, a function toDataURL() is used to save the image object to the image data URL. This saves the image onto the local storage where is can be accessed as an image file. Another function that allows the user to save an image from URL is that window.URL.createObjectURL() but this function only works on Chrome. For this project, GIF images of beads will be used to draw on the canvas, so to save the image as one or to make all the individual bead images to render as one image, an array can be used. This array can save the images, convert them to strings appending them to the URL and when the URL is called the image will reconvert from string to image. The URL will be used as the "file location" to send the zulu love letter in an email so that the custom made love letter image is viewed by the chosen recipient(s). To see more on these methods, click here.
For my project a different approach is used. This method, which i think is easiest to use- and programme- is to convert the image to jpg, bmp or png using Canvas2Image. The user can rightclick or double tap after image is converted and choose a file location on local space to save the image. This method is explained further here.

Further reading on canvas

w3schools

tutsplus

 

My links 

BEADS Magazine
tholoana23blog

shani assignment link

Link to 'Ayoba Online Magazine' : http://www.mendilab.co.za/FAM3007F/2012/bdlsha002/Ayoba/index.html

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.

Project

I have emailed you about an issue with my javascipt+canvas detect, but you haven't replied. Here is the link to my site www.mendilab.co.za/FAM3007F/2012/apspai001/magazine/index.html . I have the detected code in my html document but have commented it out because it deletes the browser scroller.
All my other blog post I have been making are on my personal blog: http://www.mendilab.co.za/FAM3007F/2012/apspai001/

Strategies Magazines Use to Adapt to the Mobile Era

In a day and age where people are constantly on the go, individuals have become increasingly reliant on info on-the-go, as opposed to physically being confined to their chairs in front of a desktop or television.  Whether magazines display on mobile devices as scanned images embedded in a Flash object which can be navigated like a physical magazine, or as responsive web pages, there is a general expectation that magazines that are trendy, tech savvy and forward-thinking, will be available on multiple platforms. This is a valid expectation for magazines to embrace the mobile era, considering how doing so can broaden their target markets, thus raising their notoriety and increasing their sales via online subscriptions.

But adapting to mobile requires implementation of carefully planned strategies.  Whether they be through creating a unique mobile application, a dedicated mobile site, through adaptive layouts, or tweaks, users expect a funtional and easy to navigate platform, especially since iOS and Android offer mobile browser support similar to that on desktops. People want to be able to fill out forms sithout facing stumbling blocks because the developers did not take into consideration the fact that connectionas are slow, mobile screens are smaller,  or text is problematic, and therefore did not think to use check boxes, select menus or lists or radio buttons as opposed to text fields.  Anything to make inputing info easier and quicker. This is a key issue if magazines do not consider that their physical magazines are very different from their virtual counterpart. Considerations must also be made for email newsletter design on mobiles to increase viewer readability. Things like adjusting the viewport and text size while taking into consideration that downloads of things like stylesheets can slow the process and result in a bad user experience.

Adaptive layout uses media queries with modern devices able to query things like device width and height, orientation, touch, and much more. Ofcourse, source order in the mark-up should be impeccable, for content to display in the proper order. Scalability must be considered for adapting to different layouts. This is cheap in terms of adapting an online magazine’s content because only minimal additional design is required. However, older mobile browsers (including Internet explorer 8) do not support media queries thus excluding customers in this bracket. Also, images can render slower when the content in HTML is downloading, also because of low bandwidth in Africa than overseas.

Creating an altogether new dedicated mobile website version of the magazine is more ideal but a micro website will cost more money to build since they reside on their own domain or sub-domain (for example ‘magazine.mobi’ or ‘mobile.magazine.com’). Ensuring that visitors are redirected to the dedicated website correctly (with option to view the full site version) and keeping assets such as images to a minimum, will improve performance in terms of quickness and will attract  more consumers because of this appeal. However, maintaining the micro site (in terms of optimizing assets and adapting content) can be expensive for a magazine, and if not designed well, can throw customers off if the design is too different from the full version(desktop).

Applications/Apps for example are great to consider for a mobile magazine since they offer search functionality, sort and filter UI design and apps are a n increasingly popular mobile development trend. They are popular because they are scalable, work cross platform and are a more affordable option. An app is also a handy when refining the data the customers are after. For apps to be effective though, magazines will definetly need to invest in a public relations marketing campaign and creative narratives around hot news, also perhaps running contests to promote it. Apps are valuable because they offer users a more streamlined journey and they use native device controls. They also offer better perfomance and speed as they are lightweight and rely on minimal bandwidth. The tricky things when considering apps include, again, ease of use, easy setup for customer and must have some value to the customer through visual appeal or personal connection. Apps on the downside, require pre-approval from a third party and their creation and maintainence, like a micro site, is costly.

Magazines therefore have decisions to make with the options available in order to keep moving with the times, embracing the smartphone and tablet era to attract a wider customer base and cater to existing customers.

The World Needs More Love Letters...

YAY! I have finished this assignment.... and... it WORKS! Hooray!
I really enjoyed learning more about how sites are so easily adaptable for desktop, mobile and tablet. But I think it's safe to say, I am glad the assignment is done and uploaded.

I struggled a little to keep up with the speed in which we covered the assignment and often felt like I didn't want to add anything extra in case I broke the code, it stopped working and I didn't know how to fix it.

I think that most magazines need to have an online version these days. The whole world is moving towards an online location and print media is just not as profitable as online media. The ability to create interaction allows users to build a relationship with the magazine by interacting with it. I have seen many magazines use interactive quizzes which end with a recommendation about what type of clothes to wear, or what kind of food you should cook etc. The interactive elements allow the user to not only interact with that one particular page, but to follow other links provided on the page, and perhaps even do further research on the topic or item they are interacting with. Another aspect which online magazines are using, as we studied in this assignment is the ability to send and save our Love Letter for example. Not only could they send or save their results from the magazine app but they can share them on Facebook and Tweet them too, which helps the magazine to get more followers and potentially more readers.

As well as all the above mentioned points, an interactive online magazine which is available in tablet and mobile format is of huge value to readers who do a lot of reading on their phones and ipads. For example business men who commute on the trains for 2 hours every day and need something to read on their ipads. Rather than buying a new magazine every week, they can simply access the mobile version of the magazine which results in more readers for the magazine, more frequent downloads because it could never be sold out, easily transportable magazines, and feedback from their readers as to what they enjoy, and what they interact with the most.

 The interactive component helps to attract readers, keeps the magazine fresh and up to date, keeps it accessible on mobile devices and tablets and thus brings 'print' media into the digital age. Therefore I think the future of magazines is to head towards an online, interactive, mobile-able version.

Here is the link to mine, it's very simple, but that's how I like it. No one wants a site that's going to take a thousand hours to download and chew up all the data on your phone!

http://mendi.uct.ac.za/~cnlemm001/

A Complete "Love" Affair

So after many tears and screaming at an unresponsive, ironically named, "responsive" web page, I flung my hands in the air, and yelled "YES!", signaling the near end of my trauma. In short, Duke's web page is complete and working in Firefox, Internet Explorer and Google Chrome.

I am happy with the way it looks expect for a few minor issues which should be sorted before the dust settles on this post. I struggled tremendously with understanding the Javascript code and more often than not, felt as dumbed down as the illness I had at the beginning of term caused me to be. The side effects of my confusion may be evident in the order of the code( which I tried to make as coherent/sound as possible) but ultimately, the functions used to SAVE an image and to APPEND kind of got the better of me in the end.

My site name "Ngiyakuthanda" means "I love you" and I felt tied in with the theme of the web page. The use of a gallery showcasing various zulu love letters also reinforces the write-up. The color choices are eye-catching and bright; just as African people are, and those of you who saw my first web page when we began this course will know, I'm in love with the diversity of Africa and all things African.
I find fluid grid layout exciting and am hopeful about the possibilities it presents for our SRP project in terms of mobile devices and catering for them. I have learnt a great deal, with a huge amount of effort and thank Duke for being patient with us. I am pretty certain that responsive web design is something I am going to try and become expert in because it is so relevant for keeping up with current technological advancements.

Check out my site here and don't be afraid to comment either :)
http://mendilab.co.za/FAM3007F/2012/slmdia001/zulu-love-letter/

Enjoy the vac everyone!
D

My Thoughts on My Final Design and Course

The completed Zulu Love Letter website was done and dusted tonight. I'm really pleased with how it came out. I dig the design - it has an African, fun, quirky and bright feel. The theme of the patterned triangles, although emulated in different ways, is a consistent design feature of the site.

On a whole, I really enjoyed the actual concept of the project. It was something different and interesting. My Magazine "Pattern" is a hypothetical online magazine which caters to the DIY design heads while trying to promote South African culture. The logo is the repeated pattern just above the "Pattern" text and just below the extra links at the bottom of the page. I liked included the video about learning colour names in Zulu - just spices things up and provides some extra information and knowledge that could not be included in the article but is still relevant to the theme of Zulu culture. 

I did found the Javascript something difficult to grapple. We went pretty quickly with it in class so I did struggle with the concepts. However, I was amazed at the power of Javascript and what a small amount of code can do. I'm hoping to apply this knowledge to my SRP Pizza Building Website. It'll be very similar in concept. 

Please enjoy and check it out! http://www.mendilab.co.za/FAM3007F/2012/annfra001/zulu_love_letter_media_queries/

Final Project Links

Zulu Love Letter Link: 

http://www.mendilab.co.za/FAM3007F/2012/annfra001/zulu_love_letter_media_queries/

Personal Blog Link: 

http://www.mendilab.co.za/FAM3007F/2012/annfra001/

Different strategies used by magazines who are adapting to the mobile era: 

Magazines are moving from the tangible print medium to the virtual space of the online world. Web 2.0 means interactivity: information sharing, collaboration and user-centred design. Users can interact, share and collaborate with each other, creating a virtual community through social media dialogue and creating user-generated content. This is the space in which we live and increasingly, other industries are moving into this realm. Indeed, the proliferation of blogs and social networks have forced print media to hop on the band wagon to keep up with the changing times and their changing audiences. This means moving online. And with a change of scenery, comes a change in mindset.

Magazines moving online need to keep engaging with their audiences. Engagement includes keeping a continuous flow of communication, interactive components embedded in the magazine and links to their other social network accounts. This way, audiences have a wide range of options when wanting to communicate with their favourite magazine.

Twitter, Facebook, Pinterest and Youtube are just some of the options that can be included within online magazines. People can like a certain article or the whole magazine. They can follow magazines on Twitter and retweet their articles. Pinterest can provide audiences with images that are directly or indirectly related; pinned images can extend the feel, atmosphere and design that the magazine may be trying to convey. Youtube can give audiences a behind-the-scenes look on various published articles. And users can of course, comment, debate, like and share these articles, images and videos from the very inside of the virtual magazine (or they can be redirected to these accounts from links within the magazine). 

Increasingly, however is the trend for online articles to be shorter. Indeed, mobile browsers are slower to download content and the screen size is much smaller. This has resulted in articles becoming shorter in length with less images. Navigation needs to be simple. A user cannot simply turn to any page like in physical magazines, but rather will click on an article that interests them or click the next button to take them to the next page. Other stories that have a similar theme could be suggested at the end of the article to the user so that a continuous click through is created. This applies to both mobi and desktop users, however desktop magazine users will have extra features that mobi users would not have. 

Online magazines also allow users the ability to create their own accounts. Users can save their favourite stories or it can even be used as part of a classified section where their online personal details can act as a CV for employers seeking potential employees. Online magazines are also more accessible to the visually impaired through the implementation of the zoom function. On a similar vein, with the increasingly popularity of fluid and flexible designs through the implementation of media queries, online magazines can be viewed on multiple devices: you can carry your magazine on your phone, tablet or computer. The size of a glossy paper magazine is no longer restricted in size. You can now carry your magazine in tiniest of bags and importantly, the content is also updating with the latest news. The immediacy, interactivity, fluidity and flexibly are important goals to have in mind when developing various strategies for online mobi magazines.

Some links for taking the interactive component to the next level

Adding save image from canvas functionality:
http://www.nihilogic.dk/labs/canvas2image/
http://en.wikipedia.org/wiki/Data_URI_scheme

Getting URL parameters using JavaScript for passing data via a URL:
http://www.netlobo.com/url_query_string_javascript.html

Adding drag, drop and resize functionality to the canvas using the Kinetic.js library:
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

Deadline FAM3008s Assignment 2 September 2012

Please Note that the FAM3008s Assignment: Mobile magazine feature and HTML5 app is due on 2 September 2012.

Please submit this assignment by submitting a blog post as author to the http://consideratewebdesign.blogspot.com clearly indicating the following two links:

1) Your Zulu love letter Mobile magazine feature, including the interactive component.
2) Your Personal Blog

You will be assessed on how well your Mobile magazine feature is designed to adapt its layout and content to the client on which it is viewed (smart phone, tablet and desktop browsers). 

Also you need to include in your post an explanation of different strategies used by magazines who are adapting to the mobile era. 

Bonus marks: Include in your post an explanation of how you would go about saving the user’s design and displaying it as an image (png, jpeg etc)

For a reminder of the assignment details click the following link:
http://consideratewebdesign.blogspot.com/2012/07/fam3008s-assignment-mobile-magazine.html

Some of the technical features I will be assessing:
1) Media Queries
2) HTML5 capability detection using Javascript
3) Customization of your interactive component

When the code is your oyster

If I had the knowledge and skills to create a creative, interactive and user-friendly code for my Zulu Love Letter, I wouldn’t be here. I would be out there, in the real world, making amazing games, websites and designs for clients earning copious amounts of money, holding private yacht parties with free booze and oysters. Unfortunately, my coding skills don’t reach very far. In fact, they are pretty much limited to Mendi Lab. But, if I was as skilled as I dream to be, my Zulu Love Letter would have the following:

Starting off with the pin, I would like the user to be able to choose between “small”, “medium” and “large” sizes. Beads would adjust according to the size of the pin chosen. However, to allow maxine freedom of choice in the design of the Love Letter, there would be the option of changing individual bead size. On touch screens, it could be a nice idea to use the zoom action with ones fingers to make the bead bigger or smaller. On desktops and mobiles, the “+” key could be used to make it bigger and the “-” to make it smaller. Another way would be the use “b” for big and “s” for small. This is what makes the virtual world just one step ahead of our reality. If we were to string beads in the real world, all the beads would have to be the same size for it to function properly. However, computer generated games give users the option to take what we know as reality to another dimension (almost like me imagining I’ll have my own boat parties). 

In terms of colour selection of the beads, users have the option of selecting three shades of the colour selected, for example, “light blue”, “blue” and “dark blue”. Depending on where the user is creating the Love Letter, these colours will either show up as part of the colour list (e.g.: on desktop) or not (e.g. on mobile). What could be a cool idea instead of showing the colours as a list, would allow the users to tap the bead to change the colour. Each tap would change the colour into one of the three shades. Obviously it is important that the user is creating something with a purpose. The colours and their meanings must be clearly shown so the users know what feelings they are conveying through their Zulu Love Letter. I doubt people would want to create messages symbolising death and despair. If they do, I guess there’s nothing stopping. They just won’t get an invite to my boat parties.

Once the bead is chosen, it would be great if could be controlled through touch functionality. Tablet users, for example, could drag beads into place themselves. On desktops, users could use the up/down, left/right keys to move the bead into the right place, and mobile users could the trackball. However, it could also be an option to use the keys “L”, “R”, “U”, “D” to indicate, left, right, up, down. This could be used for both desktop and mobile. In all three devices, it would be cool to animate the bead to have it zoom to the canvas by itself. This would be a feature that would have to be used for desktop and mobile devices as tablet users still have the option of dragging the bead into place.  

Once the bead is in position, I would like a cute little animation surprise to happen. So, for example, once placed in its position, a little heart image flies up from the space where the bead is to the top of the page. Or a little burst of light or sparkles erupt from behind the bead.

If the same colour is wanted to chosen again, users should be able to do this easily. For mobile devices, the trackball could be clicked to allow the same colour to appear and for desktop and tablet users, the enter key could be used. Otherwise, the bead could still be chosen from the list if they desired. 

If the user would want to edit their Love Letter there would be a few options. There would be an undo button, a redo button and start again (to clear everything). However, with the the undo option on tablet and desktop devices, the “back” button could be used.  

In terms of being able to save/share the image, users could email it, Tweet it, Facebook it, Pin it, save it as an jpeg on their computer and to their phone memory card. Once the image is on the phone memory, it would optimised so it could be BBMed or Whatsapped to others. Before saving sending it, users can preview what they have created. If the users want to restart, they have that option. They can also write a short something explaining their Zulu Love Letter or attach a pre-written colour coding guide so that they don’t have to write it up themselves. Within this text, there will be blank spaces where the user can fill in the names of those who are receiving it. 

I also think that templates of other designs are a good idea. These would also have accompanying text explaining the meaning of Zulu Love Letter. Users could send these or merely look at them for design inspiration. Other ways for users to get inspiration could include a colour wheel where users could pick a colour which then generates a Love Letter with the chosen colour as the main bead in the pattern. Other beads would also be part of the design as accompanying colour to create the message of the design more complex. Lastly, users could chose already created patterns. Users have the option of filling in the beads of their choice according to the pattern. 

- Have a good day!

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).

No-limits you say? Challenge accepted!

These are the various interactive components and how I would want them to work...

• Beading
• I would like to have the beads (all white) to already be on the canvas. Then with the cursor animated to look like a brush I want to be able to click on the bead and have it fill up with color as if it is being painted. 

• Alternatively I could have the canvas blank and with a click of the mouse have the bead fly across the screen and into place under the pin. However I think it would be easier to create the love letter if all the beads were already on the canvas. 

• Touch screen capability?
• I would actually like the user to physically bead the letter using the mobile screen and a fingertip. I would want an empty canvas and then a jar, much like the one above, and have the user pick beads out of a full jar and place then under the safety pin where it will lock into place. This would be a lot more fun but I assume a lot more coding. 

• Edit options
• As you can see with the toolbar above the letter I would like to have an option for: undo, redo, camera and new. New will reset the love letter so that the user can start from over. The camera option will work like a screen shot but will only take a pic of the love letter. The camera will take the snapshot and save a jpg in the users default folder for images. 

• Sending the love letter 
• I have put an e-mail option in the top right corner so that once the letter is complete you can send the image with a little message to your loved one. It should probably be advised that the user take a snapshot of the letter using the camera icon and then send the jpeg. 

Furthermore besides knowing all the fancy schmancy stuff canvas can do I would like to keep the interaction simple. After all we are just beading a letter - lets not overcomplicate the situation. 

Note:

For those who want to see how far the limits of html5 animation can stretch check out these 30 amazing examples of what can be done. 

For those who want to see the code you can use for a simple paint app with mouse and touch screen capability see The Code Project's article. 

design

If I had to design an App, I would have a canvas full of the same colour beads. For someone to change the colour, all they would have to do is click on each individual bead to change the colour. There would be an option of 5 colours. With this idea, there would be no need for a reset button because all they would have to do, is click on the beads to change it.

Once the design is finished, a pop up would appear telling the person what there love letter means, then the person would then have an option to save their design. All of the saving and editing would be researching and finding code to implement it. With the saving option it would obviously give the person the option to save it on there computer.  

Possible User Dynamics

To create an online zulu love letter, there ought to be a easy-to-use/understand dynamics between the user and their device. There are a range of different ways this interaction could occur. Here are some of the ways I could think of.

1. Small-medium different coloured bead images could be placed above/ below the canvas. The images should be clickable so that which ever colour bead is double-clicked, that same colour will be added on the canvas. This method would be most pleasurable to touch-screen devices as it relies on tapping the images. For non-touch screen devices, the mouse will be used to select the desired colour.
A single click or tap on the bead can be used to remove the bead off the canvas. 

2. The way I plan on doing it, is by assign a number (1-9) to each of the nine colours that can be used. The user will basically punch in which ever number is allocated to a colour and that coloured bead will be added.

 I am hoping that I will be able to use a cursor so that a person may "backspace" on their pc's or add a delete button. The delete/backspace function will delete the bead before the cursor. The cursor will be able to move around the canvas so that any bead can be deleted without deleting the whole line (Just like a normal type pad).


  -The methods can come with a reflection function that will allow for a symmetrical zulu love letter. The user can decide if they wish to have the reflector placed vertically/ horizontally or diagonally in the mid-section of the canvas.

   -The reflector will basically work by adding the same colour bead added by the user on the other side of the reflector. So for example, if we have a 10x10 grid and the reflector is placed horizontally (across the x-axis) then the reflection of grid position(0, 0) will be grid position(0, 10). Alternatively, if the reflector is placed vertically (across the y-axis) then the reflection of grid position(0, 0) will be grid position(10, 0), etc.  And if the user wishes, two reflectors can be added to reflect beads over both axis. Like the picture below.

The optional reflection function will make creating the zulu love letter easier as half or 3/4 of the work is already done for the user.

The next step would be saving the completed zulu love letter. On method on how that can happen is by setting the canvas to save the grouped png beads as single jpg (or which ever desired format) images. On mobiles, the image can be saved on an external (memory card) and on the other devices, it could be saved on the disk drive. From there, the user can share (BBM, whatsApp, tumblr, etc), email and even edit the image.


On a more advanced level, it would be cool if there were a sound element that could plot down beads according to the users instructions. Each colours could be matched to a specific phrase such as yellow being tied down to a phrase such as "you left me in poverty", to represent just that. "So much poverty" could add more yellow beads to the design and a phrase such as "i'm richer now" could remove all yellow beads. The amount of a specific colour will be determined by how much the user emphasizes the key words (poor, rich) and through quantitative words such as "much" or "less".
Links: Zulu Love Letter site Blog

Blog posts from the OTHER blog ;)

Here are the links to my other blog posts on my 'Coding & Nerd School 101' blog :)

Mobile sites that blew my mind!-

http://www.mendilab.co.za/FAM3007F/2012/cnlemm001/?p=35

Assignment Numero Uno-
http://www.mendilab.co.za/FAM3007F/2012/cnlemm001/?p=27

annddd...

New term, new term, new term!
http://www.mendilab.co.za/FAM3007F/2012/cnlemm001/?p=25

Unrestricted Interaction

This week we had to write a theoretical blog post on what we would do with our Zulul Love Letter’s application if we had no coding restrictions, basically be creative and think of how interactive our application COULD be (without needing the knowledge to code it).

So I was thinking that there is no point in having the Zulu love letter if you don’t use it as a love letter. So I thought it would add a whole new level to the application if one could save their love letter, and then send a url to their loved one. The receiver would then click on the url and be taken straight to a page which would simply portray the created love letter and a note from the sender letting them know exactly what it was and what it meant. This would obviously mean that the app would have to be able to store and save the love letter. It could perhaps be set up to save it for a short period of time and then replace it with another’s love letter, basically the link would expire if the receiver of the love letter did not visit it within a specified time frame. This would mean that there would not need to be as much storage space needed for the indefinite storage of love letters, once the receiver has looked at the love letter, they have the option to save it their computer, otherwise it would get erased from the system. Another option for sending the love letter would be to send a picture of it to someone’s phone. Perhaps the user could chose between a BBM pin or whatsapp number to send the picture of their love letter to. This would save the receiver from having to get onto their computer to see it and would also be in keeping with the mobile site theme that we have been working on this term. Obviously this would meant that the image would have to be quite small so that it loads quickly on the phone and doesn’t use too much data but this could be achieved with smaller images that are optimized for web and mobile web to be specific.

One also needs to consider that in order to save the love letter the user/creator would need to create an account to save it to. I assume this would require php and databases which we did last semester. This could be a very simple username/password log in set up for readers of the magazine itself.

Other more basic interaction that I would like would be the ability to drag the beads onto the canvas and to move them around on the canvas and put them anywhere you want. Another fun option would be to bed able to change the sizes of the beads so that one could have different sized beads in their love letters. It would be nice to be able to change the colours of the beads simply by clicking on them when they’re already in the pattern of the love letter too, rather than having to delete the bead and then load another time everytime you wanted to change the colour. Perhaps the user would be able to click on the bead that needed to change colour, a pop up mean would appear and they could chose the new colour that they wanted the bead to be, and it would automatically change.

Another useful option would be to have templates already made that the user could take inspiration from and follow. Perhaps one could click on the template option and a much lighter-coloured template would pop up on the canvas and the user can follow the pattern but change the colours if they want. This would make making patterns a lot easier as the user would not have to count beads and plan so far ahead, they could simply follow the template. This would also be useful in protecting users from making love letters that said something they didn’t actually intend for it to say, as the combination of triangles and colours is quite complicated in the interpretation.

Perhaps another option would be to give the user the chance to type in the words that they would like to use in their love letter, for example love, joy, desire etc and then the application automatically generates a love letter for them from those emotions/words. It would be a quicker way to do it than to add each bead yourself, and could also potentially be more accurate in portraying accurate feelings and not just something that looks pretty.
These are all options that could be used in the Zulu Love Letters application, if we didn’t actually have to code them all in. Sometimes I wish we could just wiggle our noses and our applications and sites would look and do exactly how we imagined them in our heads! :) A girl can dream! ;)

If I were to independently develop an interactive beadwork application... | Robin Brink

If I were to independently develop an interactive beadwork application...

Were I to develop this project in my own time I would start prototyping my concept in Processing, a language and IDE which I am becoming familiar with. The first thing I would develop is a class of bead objects.

This class would define a bead object of a particular size, with mouse click interactivity for changing colours. I would use mouseX and mouseY coordinates in conjunction with a mouseClicked function to determine whether the user has selected a bead to change its colour.

I would initialise the bead object in an ‘off’ state, by which I mean the fill value would be undefined (or blank). When the user clicks the bead it would cycle through an array of fill colour options, eventually leading back to the ‘off’ state. A simple application of this idea would be hovering over a bead, clicking it to fill with a colour, clicking again (repeatedly) to cycle through the available colours, and clicking back to the blank state if need be.

Once this bead object has been developed I would declare a two dimensional array (or matrix) which is made up of an even number of bead objects (in their blank states). The user could then begin clicking different beads in the ‘grid’ and start developing their design. Processing features a very simple ‘save’ function which could be used to save a .jpg or .png to the cache.

The benefit of this approach is that the user can begin working on their design from any point within the ‘canvas’ - as opposed to working from top to bottom. The ability to cycle through colour options (in place) would also allow for creative improvisation and flexibility.

I have described a theoretical approach to this assignment within the programming framework of Processing. I would thus have to invest some time in learning how to write this program in Javascript as it is more widely implemented on the internet.  

Blog Assignment - Zulu Love Letter No-limits

This blog assignment requires you to think creatively about the Zulu love letter's interactive component and to describe possible interactions that could be designed for interacting with this interactive component. This is a conceptual exercise and will not be implemented in code. It is therefore an opportunity to explore interaction design without technical limitations. So imagine…

In your description of your interaction design, consider how users could add, remove and edit the virtual beadwork of the Zulu love letter. In addition you can also consider how the user might send and save the Zulu love letter. Important here is that you think about the meaning of the interaction you are designing. How does the interaction you are proposing structure the users activity with the interactive media?

You need to do this post by Friday the 17th of August 2012.

As promised the skeleton code for the HTML5 Canvas detection

Due to time constraints in class I could not wait for everyone to take this down, so as promised, here is the skeleton code for the HTML5 Canvas detection. Please note: 1) I am expecting you to expand on this code and to communicate the browser's possible lack of capabilities clearly to your user.
2) You need to make sure to reference your Modernizr that you downloaded as it might be a different version and have a different path!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 capability detections</title>
<script type="text/javascript" src="js/modernizr.custom.78490.js"></script>
</head>
<body>
<noscript>
Sorry, but you need JavaScript enabled!
</noscript>
<script type="text/javascript">
if (Modernizr.canvas) {
alert("Canvas ready");
} else {
alert("no Canvas support");
}
</script>
</body>
</html>

Magazine draft

Here's a link to a draft of my magazine layout. Its still a draft in wordpress but hoping to convert it soon.

Hope the final looks this good. Wanna add a mini slideshow bar on the side-about 5*5 cm. That would be fresh. 

Some screen grabs to amuse the eyes.

                                                The desktop view:

Some stuff in between... and la mobile view

Does your browser have what it takes?

We have been learning about browser capabilities and what options we have when converting to mobile versions of our sites. And today was the grueling Javascript session to use coding as a means of testing capabilities. Just for kicks I came across a useful but also very fun site to give your browser the HTML5 test.

Find out how well your browser supports HTML5.

• My Chrome 21 on Windows 7 here at home rakes in 437 points out of 500 (plus bonus points). Whats also helpful is that you can see what elements your browser supports and the canvas element appears to be on of them. 

And for those who are not up to speed with all the HTML5 elements there is a site which shows the all HTML5 elements in a Periodic Table. Fun.

Ooooo! And one last thing! Game developers are jumping on the HTML5 bandwagon and creating the craziest games. (Fran I've seen you playing those Google doodle games). 

Mobile Magazine

I trust everyone's attempt at this mobi-mag went well...hey hey hey?

So far I have not had any brain surging and rocking ideas, but for the sake of providing a basic html layout of what the end result will look like I made up a temporary magazine called Siyaphi? Let us take you there! Which is Xhosa and means, 'where are we going?' Let us take you there (well duh that part was English).
I thought a tourist magazine about Africa would be fitting for the Zulu Love Letter assignment.

SIDEBAR: I will probably change the whole thing.

 For a detailed analysis of my mobi-mag layout you can check out my blogpost about it, but I know you guys are probably busy so hey just go straight to my one page site by clicking the pic.

Magazine draft

Here is the link to the draft for my magazine page. I really think the visuals could use a lot of work, so I need to focus more on that in the next few days. It could look a lot more attractive.

But this is what I have so far :)

http://mendi.uct.ac.za/~cnlemm001/

PROGRESS ON MOBI SITE

VISIT URL: http://www.mendilab.co.za/FAM3007F/2012/bdlsha002/mobi/


CURRENT CHALLENGES:

•  Logo has been designed, however it does need to be improved - needs more oomph!
•  Cannot get font (african theme) to work in all browsers.
•  Sidebar jumps from the left side to the right in Safari.
•  When the computer screen is minimised to mobile screen size, header overlaps the logo.

My site so far

Here is my link to my site. Zulu Love Letter  

What still needs to be done:

1. The title of my magazine "// Pattern" needs to be redone in the CSS as it gets too small when the screen goes to mobile screen size. 
2. I seem to have a strange margin on the one side of the site - need to find out why it's doing that. 
3. Plugin a slideshow.
4. Change the layout of extra information section so that it is more user-friendly.

This is best viewed in Chrome, but also looks ok in Firefox. I did check it on my phone and got slightly different results in terms of colour, background and images (but lets just blame my old Blackberry for that). 

Use it | Don't use it

I found a useful link that you may want to take a look at if you've got time (lol)
30 Useful Responsive Web Design Tutorials

- Have a good night!

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.

Tim O'Reilly on JavaScript and HTML5 (Fluent 2012)

Mission: A Zulu Love Letter

Assignment: Develop an online interactive magazine feature using HTML5. The magazine should be designed to adapt to different hardware types (desktop/ tablet/ smartphone) on which it is viewed.

Capabilities: The magazine should comprise of basic magazine features such as a logo and a smart design/ navigate user interface. The web page should also:
- Be online (just in case)
- Have an interactive component allowing users to build and customize their own Zulu Love Letter

  
- Feature hi/low res images of Zulu Love Letters as well as text for articles and instruction.
- Adapt across screen sizes
- Provide links for further exploration

Requirements: Technical requirements for the webpage include knowledge of HTML5/ CSS3. We'll be using HTML5 as opposed to the normal (but outdated) HTML4 because of the canvas element which "allows for dynamic, scriptable rendering of 2D shapes and bitmap images" (thanks Wikipedia).   For the interactivity component, designers will need to know their way around JavaScript. Some touch-up requirements to set your magazine from rest will include knowing what your user basically wants. This means leaving out all gibberish in texts, having an eye for thee design and most importantly, a fully functional-easy-to-understand webpage. 

Bring with next week (13 August)

We will be starting the interactive component of the Zulu Love Letter next week, so remember to bring along transparent png files for each of your colored beads.
I would like to also remind you that we agreed that you will be adding a blog post to the http://consideratewebdesign.blogspot.com/ linking to your "online magazine web article" by Monday. This is important so that I can give you some feedback and we will be able to identify technical problems early on in the process.

The vision of web (some thoughts and such like)

I follow a pretty decent site, .Net.  It has regular online magazines and magazines that you buy in-store (cost an arm and a leg though). Anyway, they often post useful short articles on things about the web and such like which I suggest you may want to follow on Facebook or something - who knows, something you are interested in could come up. The latest one they published was a link to 45 portfolio sites that they thought were pretty cool. I looked through a couple of them and most were pretty decent. Look, some were really beautifully designed and very aesthetically pleasing  to look but that was really all. Don't get me wrong, I take my hat off to people with a strong and clear design vision - I wish I could create what they have done but if I see a website by a web designer, I'm expecting a site that can be responsive and flexible. Maybe it is because I have been exposed to CSS3 and the power of media queries that now I'm acting like a spoilt brat, but seeing a site like this which is way more simple is more appealing because it works on all screen sizes and I think that takes more vision and analytical thinking than just plonking a cool design on a page one after the other. 

Assignment

Requirements:

-interactivity (Main assignment creating a mobile app using Zulu love letter)
-feature article about Zulu love letter
-Picture\pictures of Zulu love letter.
-This all must be built for pc,tablet and mobile.
-fluid layout
-Online magazine look
-CSS
-HTML5
-javaScript

Capabilities:

-Internet (different for each device)
-All are capable of having audi and video
-All can respond with keyboard (touch screen or not)
-All have a saving option
-Downloading
-Sending and receiving information and emails
Sent from my BlackBerry® wireless device