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. 

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.

Zulu Love Letter Assignment

Requirements:
So what is required from us for this assignment? Oh so many things.

• We need those awesome web skills we already got down
• HTML5 - what all the cool kids are using now
• CSS3 for sweet styling sheets
• JavaScript using the canvas element- not a fave of mine but hey...
• Magazine article
• Okay so we actually need the content part as well. The text. A paragraph. A sentence. 
• NOTE! Since its a mobile site and its only one page put the important stuff in. Like Rob said, a word count is arbitrary so don't feel like you writing too much or too little just be relevant.
• Example: write about the origin of the Love Letter or write about how to make one (colour coding)
• Interactive component
• We have not got this far, but I believe we are using the canvas element from JavaScript to make a virtual version of beading the letter. (Am I correct?)

Capabilities:

What are various devices capable of doing with regards to our mobi magazine?

• Touch screen
• A capability I would like to learn more about is touch screens! Beading a love letter using your finger tips would be ama-zing.
• Video and audio capabilities
• you could include a video on how to bead a zulu love letter that the user can watch before they start their own. 
• Download and send images
• You could have the user save the image of their zulu love letter design and sms/mms/bluetooth or send it via other platforms to their loved one.
• Depending on the browser
• Many mobile android browsers have support for JavaScript (canvas element - basic support) and HTML5. 

Question: Is there an up-to-date online reference for HTML5 feature support within browsers? Specifically mobile browsers?

Answer: Yes...go to Can I Use.com

IMPORTANTE

And guys it was suggested you do your mock layout for your magazine article on a piece of paper. This will help you work out percentages for the fluid layouts and help you plan your site. Once the paperwork is done slap some coding into Dreamweaver and have a "trial version" done for Monday. 

*Thee best of luck

PS: How is everyone feeling about SRP?

1. Fine-ish
2. Good
3. I got this!
4. Piece of cake
5. AAAAAHHH! OMW! FML! Can't deal...
6. Couldn't be bothered....

Pick a number! (Be honest) hahaha
me...#1

Quick facts about the Zulu Letter

For those who don't want to trawl through sites and books to find out what a Zulu love letter is all about I have made a list of quick facts to cover the basics. This is the quick and dirty way to cram info so if you interested in the full story then check out the full version on my blog - Geek Streets.

Here are the quick facts!

• What is it?
• It is a message conveyed using symbolically coded beadwork. 

• Why is it used?
• It is used to convey feelings of love and affection.

• Who makes them?
• Zulu maidens. 

• What influences the coding?
• The colours combined
• The way the colours are arranged
• The use of the object
• That nature of the object

• What do the colours mean?
• Black - grief and loneliness. 
• White - purity, hope and true love. 
• Yellow - wealth.
• Green - love sickness and jealousy.
• Blue - loyalty.
• Red - intense love. 

• Where do these meanings come from?
• From nature. Eg. Red - intense love, because red is the colour of blood (igazi) hence the saying "my heart bleeds for you". 

• How do you read it?
• Traditionally they had a long single strand of beads and then reading it from one end to the other. Now with the square design you read the message from the outside toward the center. 

Now see how this one is read...starts from the outside with loneliness and grief then advances to the center while conveying various other emotions. 

It's all about the grid yo!

Fluid Grid Layout!!!

While doing the exercise I found the thing I needed to wrap my head around was the layout. Some of us are used to using fixed pixels so that we can program pictures and content containers to fit in exactly where we want them to. I know at one stage we have all had that frustrating moment when you are chasing a container around your screen because it won't stay in the center of the page...hate that.  Since being considerate is the new buzz word we need to start allowing our sites to shape to whatever screen or device they find themselves on. We need to stop being so darn inconsiderate!

Adobe Dreamweaver CS6 contributors found inspiration from Ethan Marcotte (this guy must be awesome amazing socks because he was mentioned in our textbook too) and Joni Korpi when dealing with arranging the columns into a fluid grid layout.

*See Marcotte’s article, Responsive Web Design, and skip down to the Media Queries paragraph to see the thought process behind media queries.

*Check out Korpi’s Golden Grid System, which uses meticulous calculations to respond to the biggest and smallest screen sizes. This article also gives you html, css and javascript examples to download which has comments as well so you understand as you go along. 

For those who have Dreamweaver CS6 (lucky bums) they have templates set out for fluid grid layouts. I advise you to just skim over those layouts if you are completely lost and see how they did it there. You should invest in downloading Dreamweaver for a month’s trial run if you have not already, dude...like seriously...

Get the trial version of Dreamweaver CS6 or buy it if your wallet allows. Price being $485 - excluding tax. Then check out the tutorial video. The first video is from the Adobe site (the nasal sounding guy, I think his name is James) and the second one I found on YouTube (the ponytail guy) is more basic. Both of the videos are very helpful.