Friday, 31 August 2012

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. 

Final Project Links


Zulu Love Letter Link: 


Personal Blog Link: 


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.

Sunday, 26 August 2012

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

Sunday, 19 August 2012

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!

Friday, 17 August 2012

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.  

Thursday, 16 August 2012

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.  

Wednesday, 15 August 2012

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>

Monday, 13 August 2012

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

Sunday, 12 August 2012

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.

Friday, 10 August 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. 

Tuesday, 7 August 2012

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.

Monday, 6 August 2012

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

Assignment1: Zulu Love Letter Rationale


By definition, a Zulu Love letter is an African beaded message created by Zulu maidens for their lovers to symbolize their affections, using various colored beads, each with a different meaning. The assignment places emphasis on the requirements and capabilities of the Zulu Love letter on a mobile platform, whether it be on a smartphone or a tablet device. The Zulu Love Letter will appear on a single web page and will stand out due to the interactivity it will offer the user.  Interactivity will be possible through the use of Javascript coding to bring each individual bead to life, taking into consideration the size of each bead and the number of beads per column and row for efficient coding. Javascript
The aforementioned requirements for this interactive web page magazine, work on 3 levels, namely, functional (what people want to do with the web page and designing around meeting those needs), technical (which incorporates considering things like Java support on the mobile device) and finally, considering the user.  The use of the fast-becoming-popular, HTML 5 which has its own set of capabilities, and is more powerful when Javascript is used to detect these capabilities, falls under the requirements. This is under the assumption that most devices nowadays (not considering ancient mobile devices) are able to support Javascript. The use of CSS3, an-up-to-date, and powerful means with which to use media queries to, for example, style the web page, along with the Javascript <canvas> element to create the beads’ interactive abilities, are also key requirements. CSS3 is great because it assists in optimization of the mobile site to make it significantly responsive.
A magazine article - text relevant to the Zulu Love letter might be appropriate here, perhaps giving in-depth explication of what a Zulu Love Letter is, what the colors signify, meaning of the pattern created therein, and how it was created on said site - must be included. The word count of the article is not necessary but definite consideration must be taken in this regard as nobody is keen to engage in a long scroll-down string of text. It may cause users to lose interest. This site should use an image or images in a slideshow perhaps, to generate interest and up the interactivity aspect for user.  However, not all devices will be able to support this slideshow feature. Other constraints such as the size of the screen per device and the speed of the network – smaller apps are better since they make the device operate faster, must be considered.
The capabilities mentioned above relate to what can be done on the various mobile devices regarding this mobile magazine.  Touch, which is the use of the finger to flick, pinch, tap or double tap, press or rotate, is a nifty capability which would be great for making the experience more intuitive for the user. Perhaps using this to enable the user to create the Zulu Love Letter would be an awesome way to truly engage the user. The use of innovations such as Wifi or Bluetooth for users to perhaps send each other  (share) the Zulu Love Letter is worth considering. It all seems challenging but quite exciting in the greater scheme of things.

Zulu Love Letters Assignment :)


For this blog post we had to give a short break down on what requirements our magazine page and application will have, and the capabilities we will try and use to meet those requirements.
Without knowing too much of how the actual application is going to work I would say the requirements would be-
1. That the page resizes to fit the screen size of the device being used to view it, whether that be a computer, a smart phone or a tablet.
The user shouldn't have to scroll from left to right, multiple columns should become one column when viewed on a smart phone, and there should not be too many steps involved in creating their own love letter (i.e. drag and drop would work great on a touch screen phone but not on a phone that lacks these capabilities). The images should resize as well so as to keep to an attractive and readable layout.
2. The font size needs to resize depending on the screen size.
3. Users need to be able to use what ever device they have e.g. Tablet, Smartphone or Computer to make the love letter, therefore the interaction should not be solely based on 'touch' (swipes, pinch and stretch etc) but the user should be able to use their Blackberry tracker pad, computer mouse or laptop tracker pad to make the Love Letters.
4. It would have to function without Flash as this does not work on iPhones or iPads.
The capabilities I assume we will use to meet these requirements are HTML5, CSS3 media queries and liquid layouts to achieve the resizing of the page, images and the font depending on the screen size.
JQuery and potentially Java Script will be used to create the application eliminating the need for flash.
Most of this was a stab in the dark though as I am not all together sure what we will be using or how we will be using it. I think when I actually get stuck into the assignment rather than speculating about it I will be able to give better feedback.

Capabilities and Requirements for ‘Zulu Love Letter’ inspired Mobile Magazine



The Brief: Develop a responsive web page in HTML5 as an interactive feature for a magazine, inspired by the tradition of Zulu Love Letters. The design must adapt easily to smart phone, tablet, and desktop browsers. 
Requirements:
1.     Creative Side

* A feature article:
- Inspired by the message of zulu love letters that both entertains and informs the user about the tradition behind and meaning of Zulu love letters
- Text must not be too long – mobile users like to get information clearly and quickly (A longer version of article could be added for desktop users).
- A simple and visually pleasing layout for mobile users, yet also stays true to magazine-like aspects such as a catchy tagline, title, magazine logo (for a fictional magazine), language use, etc.
- Hi/low res photographs of Zulu love letters.
- A set of annotated links so that readers can explore further.

2.     Technical Side

*  Web skills:
- HTML5
   (allows the <canvas> element)
- CSS3
   (use of media queries)
- Javascript
(interactive component embedded within the HTML5 <canvas> element)

Capabilities:

* Depends on the devices the mobile magazine will be viewed on, but the following capabilities are rooted
- Touch screen
- Video and audio
(eg. a video on how to bead a zulu love letter that the user can watch before they start their own)
- Saving and Sending Zulu Love Letter design
(allows user to save the image of their design and sms/mms/bluetooth or send it via other platforms to their loved one)

Sunday, 5 August 2012

Assignment / Zulu Love Letter / Capabilities / Requirements


Capabilities 
This assignment requires us to develop a magazine feature that can work both on desktop, tablet and mobile devices. This already implies that the capabilities for each device may differ. However, each device, in their varying degrees of capabilities, will support HTML5, CSS3 and Javascript. 
For starters, one should be able to create their own Zulu Love Letter which we will have built with Javascript. The user should be able to download their own image and send it. Being able to share their Zulu Love Letter via Facebook, Twitter or email should be something to consider. This will definitely add to the interactive component of our mobi magazine. 
One needs to consider how the users interact with their device according to their device’s capabilities. For example, tablets and smartphones can have touch screens while desktops comprise of keyboards and a mouse. 
As mentioned in class, a slideshow or video could be included in our mobi feature. However, not all  of the devices, such as mobile devices can support this. Additionally, we need to decide if we want to include our Javascript component in our mobile devices. However, most modern mobile browsers are capable of supporting Javascript and HTML5 which makes use of the <canvas> element. 
Requirements 
For this assignment we are required to make use of HTML5, CSS3 and Javascript (to be honest probably the scariest part of it all :/). These elements draw on the knowledge that we have learnt and will be learning at a later date, that is, our technical skills. HTML5 allows us to implement the <canvas> element among many other rad things. If you haven’t done so yet, download, Dive into HTML5 by Mark Pilgrim. CSS3 is what allows us to use media queries which will aid us in creating responsive webpages optimised for mobiles, tablets and desktops. Each device will therefore have unique styling commands according to its capabilities. Javascript forms part of the interactive competent which will be embedded within the HTML5 <canvas> element.  
For the magazine article, we need to write up a snazzy article that educates, entertains and informs the reader. This can include information about its origins and meanings of coloured beads as well as how one can go about constructing Zulu Love Letters. If we think about “mobile first”, the article should be written up for a mobile screen. This means it should not be too long to read as many mobi users prefer to get to the point as quickly as possible. However, we may want to consider writing up a longer article that can be included for desktops as those users are more likely to browse around and muck around than mobile users. Using the hidden element in CSS3 for some sections of text shouldn’t be too much of a problem. 
A magazine layout must be visually simple enough to read (think clean backgrounds and fonts); have a catchy title with a tagline that expands a bit on the heading but doesn’t give too much away and must make use of visuals. If people are too lazy to read the article, they should be able to understand what the images are trying to say and hop on down to the create-your-own-zulu-love-letter section. 
- Have a great day!





Assignment: Zulu Love Letter | Robin Brink


The Zulu Love Letter assignment proposes an interactive magazine article which pays special attention to the mobile platform. The interactive component which is the focus of this project will be developed in Javascript. Our prior experience in Processing should serve as a helpful introduction to coding syntax and the conceptualization of a program. 


The Javascript application will be embedded in the webpage using the HTML5 <canvas> element. CSS3, also part of the new wave of web technologies, will allow us to develop responsive (considerate) web pages. CSS3 media queries are invoked to render appropriate styling for different devices. The final webpage should be optimized for the mobile, tablet and desktop browsing environments. 


The magazine article component should include an introduction to the tradition of Zulu Love Letters, and instructions on how to use the embedded application. Once an image has been completed the user should be able to save the image or share via social networks.