*whistles… *twiddles thumbs…

go-to guys for web tutorials

web trends

for fun

digital buzz

nostalgic fonts

ways of remembering code


challenges i face…

my web design looking different across browsers. Standardize CSS already!

*ps: this blog looks better in chrome 🙂

debugs in internet explorer. urrrgh!

relating images (or at least images i relate to)


seeing in code

dinner table in html
menu in html
comics in html

programmer jokes

How to tell html5 from html.

Try it out in Internet Explorer

Does it work?


It’s html5

Advertising on websites

Sometimes I open a website and there I am, literally searching for the actual content of the website amidst the advertisements. We have reached the time for the creation of an app/application software that disables advertisements from appearing on a users browsing device. #justsaying

And when I though things could not get any worse (or better for marketing companies. Its all about perspective 🙂 ) Some genius came up with the “splash adverts”. So just as it is with most popular “youtube” videos, I keep coming across websites that advertise products on their “splash” pages. I wonder how much that costs in the marketing corporation. I mean, The power of a splash is huge. I mean, that’s the page that appears when you enter a website/webpage. The avid human browser closes a tab upon opening it to discover that they have been link-misled (yehh, no-one really sees the whole “>>skip this ad<< found on the corner of the window). So unless you trust that viewers will remain on your page; that means unless you have something audiences really want (like giving away free ipads or something) or are just that important/ established (like Time magazine or something), then I suggest you do not take advantage of this type of advertising space because it will not prove advantageous to you in the end. If you are an average Joe in the digital world, I suggest you keep your advertisement space to the right of your screen- that will be one less reason for a user not to close your webpage.

further reading

p.s. this link will direct you to a splash-free website. Happy browsing 🙂

Digital Strategy Presentation | Julian Cole

Tagged , , ,

TEDxGMP|Visualisation Project

The bigger chunk of this semester’s work will be working on a Senior Production Project. Last semester we (the dynamic web design students) put forth proposals on socially relevant projects that we would like to engage in- on a web-related basis. My partner came up with the idea of creating mad visualisations for TEDx Global Music Project , a non-profit TED sublet that aims to share “songs worth sharing”.

view final project here

It was decided that projessing.js would be used to build the visualizations but for the new-comer who has no idea what I am about to ramble on about here is the story. From the beginning.

TEDx Global Music Project | Proposal: Dynamic Visual Index
Robin Brink &TholoanaPhoshodi (2012)

TED(Technology, Entertainment, Design) is a global set of conferences owned by the private non-profitSapling Foundation, formed to disseminate “Ideas Worth Spreading”. – http://www.wikipedia.org/en/wiki/TED
Since June 2006, the talks have been offered for free viewing online, under Creative Commons license (free to copy, distribute and transmit), through TED.com.

As of November 2011 over 1050 talks are available free online. In June 2011 the viewing figure stood at more than 500 million, reflecting a still growing global audience. – http://www.wikipedia.org/en/wiki/TED

TEDx Global Music Project

“In the spirit of Ideas Worth Spreading, the TEDx Global Music Project will compile and share the best in musical performances from over the 1,700 TED events around the world.”- http://www.tedxhuntsville.com/tedxglobalmusicproject

Video Archive | Existing content
The TEDx Global Music Project site hosts ±200 music performance videos at this time. These videos include such metadata currently: geographic location, performance details, various tags and labels. The metadata available is currently presently limited to these fields. Our project would involve the development and expansion of this metadata-base.

Proposal | Challenges
• How to visualise the TEDx Global Music Project video archive?
• How to present data in meaningful ways?
• How to progress from static representations (linear lists)?
• How to create a meaningful tag taxonomy?

Concept | Audience
Our proposal is to develop an interactive visual index. We aim to present metadata pertaining to the video archive in interesting and meaningful ways. Visual representations of data can be used to provide more immediate and more engaging user experiences. We would like, for instance, to convey the global nature of the GMP by creating a geographical visualisation. Our general goal would be to compile, assess and compare data and then develop appropriate visualisations.

Target audience:
– The TED community, and anyone on the web.

Goals | Concerns
TED aims to foster global communication and cultural exchange. Bearing this in mind our project considers the global scope (diverse internet users).Music is a universal language and it unites people. We want to make a contribution to its dissemination. By assessing and expanding metadata tags, and by developing a visual index – we aim to stimulate new connections and encourage cultural exchange.

Related projects | Competition
‘Videosphere’, a data visualisation by Bestiario offers a spherical representation of a network of TED videos. The visualisation focuses on displaying videos by tag relationships. The video stills are stretched to map the sphere, and just one approach to tag relationships is offered. Our project goals and aesthetics differ considerably. – http://www.bestiario.org/research/videosphere

Skills required
Our project will be developed in Processing. We will at first address a few visualisations engaging with different sets of metadata. Javascript will be used to embed our sketches online. PHP might likely come into play, when sorting metadata from the video database. HTML(5) and CSS will be the building blocks of our website presentation.

Existing code / resources
We are very fortunate to have access to a wealth of resources.
•Online code and visualisation resources:
http://www.openprocessing.org/ [Community]
http://www.learningprocessing.com [Instruction]
http://www.selection.datavisualisation.ch [Inspiration]
• We have also the following books at our disposal:
“Visualising Data”, O’Reilly (2007)
“Processing: A Programming Handbook”, MIT Press (2007)
“Learning Processing”, Morgan Kauffman (2008)
“Processing: Creative Coding and Computational Art”, Friendsof (2007)
“Getting Started with Processing”, O’Reilly (2010)
“Beautiful Visualisations”, O’Reilly (2010)

Useful relationships
We have direct contact with Gareth Pearson, a curator at TEDxStellenbosch.Gareth will facilitate and assist in our interaction with the TEDx Global Music Project.
Amy Robinson, founder of the TEDx Global Music Project, has expressed enthusiasm and support for our proposal stating:“Whoa this is AWESOME!!”

Franchi on infographics

Why this project?…


“One of the most important (and least technical) skills in understanding data is asking good questions. An appropriate question shares an interest you have in the data, tries to convey it to others, and is curiosity-oriented rather than math-oriented. Visualizing data is just like any other type of communication: success is defined by your audience’s ability to pick up on, and be excited about, your insight”
-Ben Fry

The TEDx Global Music Project is an independently organised sublet initiative to the TEDx programme. Like TEDxTalks, which hosts events across borders, devoted to “Ideas worth Spreading; the Global Music Project organises musical events all over the world to disseminate those “Songs worth Sharing”. The GM Project expands on cultural and social interconnectivity through the “universal language” of music. While the TEDxGMP initiative is put forth as generic in a geographical sense, exactly how global is it? What can the disparity between the frequencies of events in a certain location compared to another indicate in international relations? Progressing from linear data representations, the TEDxGMP|Visualization project will use graphical sketches done in Processing to visually answer and communicate with these questions. Through dynamic infographics, the visualization project will make user-end interaction with data more meaningful and engaging.

Why visualize data?

The process of visualizing data begins with the need for easy and accessible statistics (Steele and Lliinsky, 2010). As Processing co-founder Ben Fry (2007) stated in the quote above, the intention of a data visualization is to convey a certain message or point to an audience. Raw data, such as a list or spreadsheet of cars in America for example, blatantly lays out the data for interpretation. Visualizations intend to further such compilations by graphically representing them. By recreating information in graphical and visual forms, patterns are revealed more easily, making the process of interpreting data more efficient and therefore more useful. If such a method in presenting statistical data provides better insight to the user and does so without data overloading them, then an engagement with the data is encouraged. This increases the chances of the message or objective being communicated to audiences.

On a more linguistic note, there exists debate that seeks to set a distinction between “infographics” and data visualizations. While there seems to be no official definition for either, and as the two terms are often used interchangeably, an anonymous user on the debate forum Quora.com, gives a reasonable definition for the two. [He] states:

Information graphics are visual representations of information, data or knowledge often used to support information, strengthen it and present it within a sensitive context. They are specific, context-sensitive and often times hand-crafted. Information graphics are used to tell a story or answer a question.

Data visualizations are visual displays of measured quantities by means of the combined use of a coordination system, points, lines, shapes, digits, letters quantified by visual attributes. They are general, context-free and often times created automatically. Data visualizations are used to let the user find his own story or answer.

Both can be static, animated or interactive.

As per definition above, “infographics” appear to be more subjective. They are barely raw compilations of data but instead are processed graphics that tell a narrative. In inducing an emotional response from audiences, “infographics” work well as they are created to reveal “the bigger picture.” With that said, it would seem advisable that the project be called TEDx GMP | Infographics but given the expansion of our project, that is all-inclusive of Infographics as well as quantity-driven visualizations, the term visualization will be used in its general definition.

Why visualise the TEDx Global Music Project video archive?

American poet, Henry Wadsworth Longfellow deemed music as “the universal language of mankind”. The art of music in this aspect, enhances social and cultural interconnectivity across the globe. Although music should inherit a universal dialect in this regard, everybody is inclined to have different tastes in music. Furthermore, this personal preference determines the music that different individuals listen to. With the variation of genres and individual disposition, a “popular music” order is born. Popular music is that which appeals to the greater audiences (Middleton, 2002). The dissemination of music plays a critical role in determining the popularity of music. A middle-class teenage boy living in South Africa for example, might be more inclined to listen to American hip hop, house and other such pop-culture genres as opposed to teenage boy living in a rural area who might only have access to and therefore more inclined to listen to local/ traditional music. Just as well, the pop-culture genres are more documented because of their popularity and furthermore the pop-culture music genres progress and keep developing in terms of production, accessibility and archiving. In contrast, local/ traditional music stagnates as production, accessibility and archiving it is not as easy as recording a song on a Smartphone and sharing it on youtube- as it happens in the more urbanised societies. If production, accessibility and archiving of music are those important factors that sustain the diversity and universality of music, then initiatives such as the TEDx Global Music Project are the worlds global production libraries. Hosting musical events all over the world and sharing the videos on the web becomes the medium needed to embrace and encourage musical connectivity, internationally. The TEDxGMP| Visualisation project aims to present metadata pertaining the TEDxGMP video archive in interesting and meaningful ways. Visual representations of such data can be used in tracking patterns and following trends that occur in the global music industry. Different interpretations of such data are necessary in solving or being aware of social and cultural issues that are highlighted and exposed by gender/ continental/ genre accordance’s in music. A geographical visualisation for instance, such as one presenting data on a map, will be used by viewers to compare and assess the global nature of not just the GMP but of the global nature of music sharing. Such interactions aim to make new connections, stimulate knowledge sharing and encourage cultural exchange.

Why use Processing programming language?

There exists a number of programming languages that can used for visual representations. These include Raphael, Paper.js and Processing (Grossbart, 2012). The new HTML5 also implements a canvas function that allows for drawing and rendering of graphics on a webpage. Processing was the preferred language to use for the visualisation project as not is built for visual executions but it also allows for interactivity. In addition, it’s open source library allows for free use and modification of existing code. This also means that the visualizations produced in the project, can further be updated and upgraded as the TEDx GMP expands on its video database. The only limitation with Processing is that it does require a java/flash plug-in to execute else the sketchbook won’t run (ibid).


The visualization project begins with a global perspective; a map showcasing scalable ellipses that represent the proportions in numbers of performances per country. A list of the featured countries appears on the side of the map that also includes a horizontal bar representation of the data. For interactivity, when a user hovers over a certain ellipse on the map or over a certain country on the list, the respective illustration on the map/ bar graph is highlighted. This means users can hover over a country on the list and it will be emphasized on the map and vice versa. The next visualisation goes on to a more continental perspective. The six ring-charts represent the six different continents where performances have been held. Each ring on the chart represents a different data category, and within each ring lies proportions matching the data in that category. Ring charts are used to represent the continents as it allows for an addition of multiple rims per ring. This quality becomes useful when attempting to compress representations of an individual factor that contains multiple characteristics, compared to other factors. Once again, the hover function allows the user to get a textual representation of the segment they wave their mouse over. We had the idea of replacing the ellipse on the map with the country-respective ring charts but after an attempt to do so, we found that the programme took longer to load, slowing the responsive interaction down. A tag cloud is used to represent the popularity of certain languages used by performers to avoid adding another bar graph. For the users convenience, the languages on the tag cloud can be arranged by popularity or alphabetical order. On a designers note, a red/grey colour scheme is used as red is the main colour used for the TEDx logo and grey’s neutrality blends the page together.


  1. Anon. “What is the difference between a data visualization and an infographic?”
    Available online:
    Accessed : 18/10/2012</li

  2. Fry, B. 2007. Visualizing Data. USA: O’Reilly Media
  3. Grossbart, Z. (2012). “Web drawing Throwdown: Paper.js vs. Processing.js vs Raphael.”
    Available online:
    Accessed : 18/10/2012
  4. Jacobalonso. (2011) “Why visualize data? We don’t know yet” on Seeing Complexity; Visualizing complex data.
    Available online: http://seeingcomplexity.wordpress.com/2011/03/13/why-visualize-data-we-dont-know-yet/
    Accessed : 18/10/2012
  5. Middleton, R. (1990/2002). Studying Popular Music. Philadelphia: Open University Press. ISBN 0-335-15275-9.
  6. Steel, J. and Lliinsky, N. (2010). “Beautiful Visualizations: Looking at data through eyes of experts”. USA: O’Reilly Media
Tagged , , , ,

a zulu love letter

view the final project

Part of the course this semester requires us (the dynamic web design students) to design an online magazine with an interactive feature. Here are the particulars.

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, customize, save and send 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.

Further reading on HTML5


a quick side step…

The Zulu Fairytale

Disclaimer: A Zulu Love Letter is not a love letter written in Zulu

Once upon time, on the eastern coasts of South Africa, in a land called Natal, beaded messages where used as a medium from Zulu maidens to their male partners. Beadwork was assembled through careful consideration for colour and arrangement. DiffereZulu Love letternt coloured beads would represent different emotions or feelings and the different arrangements surrounding the different colours would signify different expressions. The beadwork, like any other language, had its own syntax and grammar. Mistresses, girlfriends and wives would assemble these letters to give to theirs before they went off (for months at times) to work in the cities. The beaded letters looked pretty and were made so that the receiver could pin the piece onto their clothes. The more the man had, the more macho he would appear. The only problem was that the men did not know the language as it was mastered only by the ladies at home. The men would then have to rely on female relatives when they went back home to interpret the letters from their sometimes cheating lovers. And the rest is history.

back to web design…

Capabilities? Check!

Before we get any further, part of building a functional website requires the programmer to think broadly about the different users that the site is built for. The mad upsurge of technological progress has resulted in a multi-thread complex of browser, device and software availability. There is mac vs. windows, pc vs. mobile, firefox vs. safari and those are just the popular ones. All these different variants sometimes require different “needs” from the programmers. These “needs” range from displays for different screen sizes, browser capability alternatives and nice friendly messages where appropriate. You’ll find that javaScript does not run on Internet Explorer, so alternative or a text prompt should be available for the “Internet Explorers”. Or, Applets need plugins and wont run on iOS or Android so programmers need a way around that. Luckily, for most part of it, I’m not the ultimate “programmer” in these scenarios. Instead, super-incredible web developers come up with coding and shortcuts for the “smaller programmers” to use. These shortcut include media-queries in CSS3 for screen size adaptability and open-source javaScript downloads such as Modernizr that detect for browser support. Once these are sorted, we are good to go.

Further reading on browser capabilites



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.


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:

 html {
 webkit-text-size-adjust: auto; /* Automatically adjusted for Safari on iPhone. */
 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 and just like the zooming approach above, the content is still not tailored for mobile which could ultimately slow down the mobile browser.
An example of this approach in the coding would look like this:

 @media only screen and (max-device-width: 480px) {
 img { max-width: 100%; }

*My magazine uses both the above mentioned approaches


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.


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





Drawing on canvas

Canvas is a HTML5 element that allows users to draw shapes, characters and images on a webpage. JavaScript is used to draw on the canvas which allows for a dynamically generated graphic. Most browsers (with the exception of Internet Explorer 8 and earlier versions) support canvas. This element will be used in my magazine feature to allow users to make their own zulu love letters. The drawing part of this section is the easy part. Saving the image from the canvas is where things start to get a bit tricky.

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.
To see more on these methods, click here.

For my project a different approach is used. My Zulu love letter will be drawn on the canvas by the user adding GIF image beads onto the canvas. So, to make all the individual bead images render as one image, an array will be used. This array will 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).

Further reading on canvas



a little extra

For the convenience of the user, an idea on drawing the zulu love letter came to head. Because most zulu love letters are symmetrical (well at least pretty ones are), it would make it quicker easier if a reflection line is added on the canvas. 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. This 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 10×10 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. But this is just an idea, we will see how it goes.

view the final project

Tagged , , ,