Mediamatic Developers blog

anyMeta 4.19.12 - Atom module 0.3.2 2012-05-23T06:25:32+02:00 http://www.mediamatic.nl/feed/atom/2781/nl Mediamatic Developers blog http://www.mediamatic.nl/id/41898 2011-08-08T17:26:11+02:00 Mockup prototyping with HTML, CSS and JavaScript. Quick, efficient, keeping everyone happy.

If there is one thing you will encounter as a usability tester, it's that even small changes to the interface of Anymeta can eat away a considerable amount of time from both you and the front-end developers.

When you want to test interface changes in Anymeta, you can't always ask a front-ender to make the appropriate modifications. The front-enders simply don't have enough time to implement every change you want to test. [Remember, they are very busy bees!] In my case, if I had to go to a front-ender to ask for a change in the Anymeta wizards, chances are their hands are probably full. This is where mockup prototyping comes in. Mockups are an inexpensive and time-saving way to test if your solutions to usability issues are working like they should. With some basic HTML, CSS and JavaScript knowledge you can easily recreate most parts of Anymeta. Recreate the part of the interface you would like to test as a dummy. This means that it doesn't actually process any data and perform any functionality; it just looks that way. When you're ready for testing, just let the user work through it as if it were the real thing. Most of the time, the usability issues you find in the mockups are also there in the real thing. This process of prototyping your design is quite advantageous. Because mockups are only a visual representation of your product, it's easier to build and change. This way, you save time between making changes and testing them. After each test round, you can quickly fine-tune the prototype yourself. This gives you the chance to work out most of the flaws before you pass it on to the front-enders. This results in less time spent bugging front-enders to fix usability issues and keeps your project manager happy. http://www.mediamatic.net/id/181993 ARTICLE 1 http://www.mediamatic.nl/id/49341 2011-06-24T16:52:32+02:00 Usability Testers Manual A guide for usability testing on a budget

Usability is a very important aspect in the development of interactive Mediamatic products. Unfortunately, there isn't a big budget available to do top-notch usability testing. To help you along with getting set up, this short manual was written. <h2>Recruitment</h2> To test your designs, you'll need people. Here are some different methods for finding participants. <ul> <li>Post an advert on the Mediamatic website. There are always users on the website that are interested. Additionaly, have the advert posted shared on the official Facebook page and Twitter channel. That way you can spread your chances across the Mediamatic social network.</li> <li>Ask people you know. Friends, colleagues, aquaintances. They are a resource that's just sitting there under your nose, waiting to be used.</li> <li>Ask visitors of exhibitions at Mediamatic Bank. They might have some time to do a small user test.</li> </ul> Once you have your users, its time to move on the preparing the testing environment. <h2>Setting up the testing environment</h2> You need very little resources to set up a good testing environment. Make sure to reserve one of the meeting rooms so you can test in a quiet environment without a lot of distractions. Furthermore, here's a list of things you'll need. <ul> <li>One Macbook with Quicktime Pro, or something else that records the screen as well as audio</li> <li>Skype, for screen sharing with any colleagues observing from another room</li> <li>A USB-mouse, for ease when people don't like using the trackpad</li> <li>Seperate paper slips for every scenario</li> <li>A notepad for keeping notes during user tests</li> <li>Something to drink (and to eat)</li> </ul> When starting up the Macbook, make sure you've got Quicktime running in the background so you don't have to open it before you begin testing. Make sure that any files that are needed during tested are conveniently located in a map on the desktop, so users don't get too much distracted with their task. If a colleague is available, it is recommended to have them observe the session via screensharing on Skype. That way anything that slips past you while making notes can still be observed by your colleague, increasing the chance that you'll find all issues. Start up Skype and make sure that the screensharing function is already established. Do this before the participant arrives. Also make sure to check everything is there and is functional. A checklist is included in the offline version of this manual. You can find it on the fileserver under 3.)Anymeta/Interaction design/Common aanpassingen 2011. If you plan on using a different test setting, make sure to make your own checklist that works with it! <h2>Testing</h2> When your participant arrives and you've introduced yourself, let them take a seat behind the computer. Explain to them what you are going to test in this session and tell them that any errors that occur isn't their fault, but the systems. When you give the participant a scenario, just tell them what it says, to clarify what you would like them to do. Don't use words that point them to the results, just clarify the task. Take your time to make notes. Ask questions if you see something interesting happen. Make your participants think aloud. You can ask them the following questions to get the most information: <ul> <li>What did you expect to happen when you did that?</li> <li>What do you think will happen when you do that?</li> <li>What are you looking for?</li> <li>What are you trying to do?</li> </ul> If you don't get the time to ask everything during the session; ask afterwards. This way you can get as much explanation for their actions as possible. After testing, thank them and give them a small present for their efforts. After they have left, transfer the screen recording to the file server and discuss the observations with your fellow observer(s). <h2>Results</h2> The best way to digitize your results is by putting them in a spreadsheet; divide the results by person and task for each scenario. If you have time, watcht he recordings again; you might have missed something that is very difficult to spot. After you have made a list of every problem each user experienced, count fo each problem how many users experienced it. That way you can prioritize which issues should be solved right away. <h2>Coming up with solutions</h2> Coming up with solutions can be the hardest part of the usability cycle. It requires a lot of thought in how people might respond to what you have come up with. Don't hesitate to make rough sketches or clickable prototypes to quickly test with other people. And don't forget: there are multiple approaches to each problem. Make sure to cover as much of these angles as you can so you can quickly determine which way to go during the design meet. http://www.mediamatic.net/id/181993 ARTICLE text 1 http://www.mediamatic.nl/id/28955 2011-04-05T16:53:13+02:00 The completometer

Devising a method for compelling authors to complete their contributions.

Since the purpose of Anymeta is partly to let users share their own content on the internet, we love to encourage them to make their content as complete as possible. To stimulate this behaviour, we designed the Complete’o meter widget. This widget would remind authors of their progress in making the things they create complete, and also tell them of things that they still need to do. To give the users an incentive to do these tasks, they need to know what those tasks help them with, and why they should even bother with these tasks. They need to know if what the do is worth it all. This is accomplished by giving explanatory messages to each of the tasks on the meter: what their function for that particular thing is and how it helps if they are filled in. To enforce the idea of urgence, the meter is very intrusive at first, taking up a large portion of space next to the thing in question on its page. As the tasks on the meter are completed, the user is rewered by the meter shrinking in size, making it less intrusive every time until it eventually disappears altogether. Version 1 The first version was a quick sketch showing what elements would be in the meter design. The tooltips seemed too far from their tasks to be recognized as a whole, and needed to appear next to each other. Completed tasks should always appear in the filled half of the meter. That way the user knows how far they have progressed in completing their publication. I was asked to give the meter a percentual progress indicator, So the user has a better idea of how far they have progressed. Version 2 In the second version, missing elements such as measurement lines and the precentage lable were added, and the task labels were turned into buttons. The buttons were given the same look as the edit buttons on the Mediamatic website, so users know that they are interactive. The tooltips were positioned in such a way that they stick to the bottom of the relating button, and to the side of the meter. The next task was to think of a way to make the meter shrink nicely, and think of something to do with the buttons of completed tasks every time the meter shrinks. While the custom made mouseover tooltip is an interesting design addition, it was decided to use normal browser tooltips for now. Version 3 For the third version, I created two slightly different versions that show how the shrinking of the meter and buttons of completed tasks would be handled. Furthermore the tooltip was changed to look like the default browser type. Version A had its buttons of completed tasks removed. This puts extra emphasis on the fact that the previous tasks have been completed and no longer need to be worried about. This could however also be seen as definitive closure by the user and make them think that these tasks are not available anymore altogether. This design also loses some of its informative purpose, because the user can no longer see which specific tasks have already been completed. Version B still kept all of its buttons during shrinking, with buttons of completed tasks instead appearing in a gray color to remind the user that these tasks have already been completed. This design gives clarity by showing which tasks have already been done in one quick glance. The only drawback is that as the meter begins to shrink, the distance between each button gets smaller, making the meter look more crammed with every shrink. In the end, we discussed blending these two variants together: if the meter is in a shrunken state, the completed tasks are not visible. But if the mouse would be hovered over the shrunken meter, it would expand to full size, with completed tasks appearing as grayed out buttons. To shrink the meter as much as possible, it was decided to cut off the “appendage” that hangs below with no buttons at all, reducing it instead to a partial fade-out to give a hint that more is to be seen if you hover over it with the mouse. Version 4 The merged version also called for some more coloring, to give a more authentic meter feel and bring the design to life. The borders were changed from gray to black, and the meter “fluid” to the same color as the buttons. In the shrunken versions, the meter fluid is still slightly visible in the fade-out, to still give the appearance that the meter is being filled. Another small difference with previous versions is that the meter begins at a percentage that is appropriate for the amount of required fields that have already been filled in. This was done because it would be inconsistent to have te meter report the profile is not complete at all, while parts have already been filled in. Version 5 A few changes were made to streamline the design. First, the labels were shortened as much as possible. Also, for things like Keywords, Images and body text, a recommended number was added to the end of the text label. The progress percentage of the meter is also determined by how close the user is to achieving the recommended amount. Also, a title for the meter was added to the top , in combination with a sentence to motivate the user. This sentence would change according to how much progress was made on the contribution in question. Another tweak is that when the meter is full, it totally disappears, only displaying the title and a sentence telling the user the contribution is complete. When they hover over the title, the meter appears, showing what has been done. http://www.mediamatic.net/id/181993 ARTICLE 1 http://ralphm.net/blog/2011/02/02/activitystreams 2011-02-03T10:32:22+01:00 Activity Streams in practice What are they doing?

How we use ActivityStreams in anyMeta as a concept, format for Federated notifications and over XMPP for real-time use.

<div> Atom and RSS feeds are typically used to support syndication of existing works, most commonly weblog entries. They are XML documents that provide a common representation that can be consumed by feed readers, unlike the HTML pages for such a work. <a href="http://activitystrea.ms/">ActivityStreams</a> is a format for syndicating social activities around the web. Based on the Atom Syndication Format, it tries to provide a feed for activities, rather than existing works. This includes the act of posting a blog entry, but can also express activities typical for social networking sites, like adding friends, liking something or affirming an RSVP for an event. At <a href="http://www.mediamatic.nl/">Mediamatic Lab</a>, we've recently gave notifications an overhaul. We had some code scattered around for sending notices to users, like when they received a friend request. We wanted to add a bunch of notifications so that people are aware of what happens in the network of sites, with their profile or works they've created. For example, when someone tags a person as being in a picture, it would be nice for that person to get a message about that. We also have a collection of RFID-enabled Interactive Installations that generate XMPP notifications for our backchannel system. I'll come back on this. Whenever something happens that you want to send a notification for, there are a couple of things that you want to include in the notification: what happened, when it happened, and which persons and/or things are involved. The concepts of ActivityStreams turned out to coincide with how we wanted the notification to work. It abstracts activities in actors, objects and targets, along with a human-readable text to describe each activity. A verb is an identifier for the kind of activity that has taken place. A verb takes the form of a URI, much like rel attributes in Atom link elements, or properties in RDF. The most basic verb is post, with the URI http://activitystrea.ms/schema/1.0/post. An actor is the (usually) person that has performed the activity. Objects are the main persons or things that the activity was performed upon. For example, when I post a picture, I am the actor, and the picture is the object. A target is an object an action was done to. An example could be the photo album my uploaded picture was posted to. Actors, objects and targets usually have a URI, a title and an object type, similar to RDF classes. Our new notification system does a couple of things whenever a an activity has taken place. It figures out the verb, actor, object and possibly the target and then creates a notification entry. It then calculates the parties that should get this notification in their inbox. This is usually the actor and the owner of the object. A person's profile is always owned by itself, so when the object is a person, that person would get a notification on things happening to them. When a party is not local (i.e. on another site in the federation), the notification is sent to the other site to be processed there. Each person's inbox is viewable as a stream of activities, much like Jaiku or Facebook, and is also published as an ActivityStreams feed (e.g. <a href="http://www.mediamatic.nl/person/feed/24879">ralphm's activities</a>. New notifications can then be processed by other modules. One of them is the Message module, that sends out e-mails for notifications, according to personal preferences. For now, you can choose what kind of notifications you want to receive an e-mail about, by choosing the verbs you are interested in. Examples currently include: friend requests/confirmations, changes to things you own, people liking, linking to, RSVPing (for events), sharing (to Twitter, Facebook, etc) or commenting on things you own, and people tagging you in a picture. Another module is the Publish-Subscribe module, that provides <a href="http://xmpp.org/extensions/xep-0060.html">XMPP Publish-Subscribe</a> nodes for each person, along with a node for all notifications for that site. This allows for applications that use the stream of activities for a person or the whole site, in near-real-time. An example could be a mobile app to track activity for you and/or your friends, or IM notifications much like Identi.ca or Jaiku. Another possibility is a <a href="http://www.mediamatic.nl/page/8371">backchannel</a>. We developed a backchannel system for events we deploy our <a href="http://www.mediamatic.nl/page/26657">RFID-enabled Interactive Installations</a> at. A backchannel feed is aggregated from a configurable set of sources, of which the incoming items are formatted into notifications to be put up on a live stream. Every time someone takes a (group) picture with our <a href="http://www.mediamatic.nl/ikcam">ikCam</a>, the image is posted on the backchannel, along with a text listing the people in the picture. On top of that, we also can include tweets by tracking particular keywords and people. We use (and improved) <a href="http://github.com/ralphm/twitty-twister">twitty-twister</a> to interact with Twitter's Streaming API from Twisted. I've recently changed the streaming code of twisty-twitter to consume JSON instead of the deprecated XML (with a bunch of tests), and a way to detect unresponsive connections. With activities now also available as XMPP notifications, the logical step was to consume these for the backchannel as well. We have an <a href="http://display.mediamatic.nl:8000/">office backchannel</a> on a big screen that tracks Twitter for keywords related to Mediamatic and its events, and the notifications from our interactive installations. It now also includes activity on our sites, and this turns out to be a great way to see everything happening in our sites. So, did it all go smoothly? No. We found quite some things in the ActivityStreams' concepts in combination with anyMeta and our interactive installations that we didn't expect when we started the project. One of the big ones was Agents. Our interactive installations have their own user accounts to take pictures, process votes, etc. These accounts have special privileges to perform actions like making all people in an ikCam picture contacts in the network. We also have a Physical I-like-it button, which is an RFID reader placed next to a physical object (e.g. a painting) that has a representation in one of the sites. When reading a tag, it creates a like relationship between the holder of the RFID tag and the object. When we just enabled the first enabled the new notifications functionality, a message popped up on the backchannel: ikPoll Agent likes iTea. That was quite unexpected but quite logical when we thought about it. ikPoll Agent is the user account for the I-like-it button, that is powered by the same software as our more generic ikPoll installations. We defaulted the actor of an activity to the user account performing the action. Although the agent creates a link from the person to the object, the link was not created on behalf of the physical user. So we needed to introduce the concept of Agents, and have that also stored and communicated along with activities. The same action would now yield an entry with the title 'ralphm likes iTea (via ikPoll Agent). Another was pictures taken with the ikCam. Besides posting the image, all actors are tagged in the picture, the picture is optionally linked to an event and a location. This yields a bunch of notifications, where we would like to have only one: ralphm took a self-portrait. We have started work on compound activities that would have the enclosed activities linked to it and back, a bit like the <a href="http://www.faqs.org/rfcs/rfc4685.html">Atom Threading Extension.</a>. This would allow aggregators like the backchannel only show the umbrella notification. A final one was our verb link. This was supposed to be a catch-all verb for the activity of creating a semantic link between two things, of which the predicate didn't already have its own verb (like friending, liking, etc.). It now looks like having a notification like 'person A linked to thing B' might need some more information. An e-mail notification at least has the links to respective pages, but that doesn't quite work on a backchannel beamed on a big screen. For now we ignore such notifications for the backchannel, until we have a better solution. It might be that we need to include the link's predicate in the notification, or make links themselves first-class citizens (with their own URI). Going to FOSDEM and/or the <a href="http://xmpp.org/participate/the-xmpp-summit/xmpp-summit-10/">10th XMPP Summit</a> in Brussels? I'll be talking about this and other topics in my talk on Federating Social Networks on Saturday 5 February. </div> - ARTEFACT 2 http://www.mediamatic.nl/id/27787 2011-04-05T12:31:26+02:00 CSS Cascading Style Sheets and page layout

A small lesson into understanding the basics of Cascading Style Sheets and styling a webpage.

We learned about building the layout of an Anymeta website today, using CSS (Cascading Style Sheets). Firstly, on the top level of building the layout of a website templates can be used to access parts of code from the Anymeta folder. A template can be seen as a wrapper for code. These lines of code can also access other parts of code, creating a possible network of different styling options for your website. The standard Anymeta layout and styling options are also known as the common. This approach to building the layout of a website works like a tree structure. This means that any code from a level further down the tree overrules any code from a higher level. This way it's very easy to make a general layout with the necessary project specific options. Any code that has been changed to suit specific needs not included in the common is called an overwrite. The templates create the layout of the page by using the generic code. Project specific exceptions can be seen in the style.css. All the text properties can be seen in the typography.css. If we look more closely to what actually happens in de template, we see that the general layout is shown on top of the template page as follows: a a b c d e f f f This generates the basic structure of a website that has a large item on top, taking up two thirds of the width of the page. Next to this is an item taking up one third. The rest of the letters represent similar page distribution. A class specifies styling properties for a certain markup in the page, for example the title. This can either be specific for all similar items, or can be used as an exception rule for one specific item. We can recognize a class by a point (.) before the code Quite similar, but different to a class is an ID. It can be recognized by a hash-tag in front of the code (#). An ID is specific to one item only. A cufon is a wrapper for a font that is not normally used on all browsers. This way it can be displayed everywhere without issues. It is important to add all text icons like exclamation marks etcetera, because not doing so can result in the website not showing these at all. Margins and padding give us different spacing options between items on the page. A margin provides the spacing between two items. Padding creates the space around the text within an item. A div contains a part of HTML code, and is needed to work with blocks of code. If we want to insert a certain set into the template we need to give it a name to connect the two, for example: home.set. This refers to a certain set with the properties given to it in the admin. If we use a list-publish for this, we can change the properties in the admin as well, like item length etc, without the need of using a front-ender as support. Labelfiles gives properties to an image, like length and width. This can be used as a general setting for all images in a certain list, or even the whole website. The admintools houses the system specifics. Here are all the core tools which the website can access. In the admintool we can also decide which features are activated, and which are not. We can play around with all these different features with a great add-on for your browser called Firebug. With this add-on you can see how a webpage is set up and change any parameter in the code. Unfortunately this only works on your own computer, not on the actual webpage... Nick Verstand http://www.mediamatic.net/id/170931 ARTICLE 1 http://www.mediamatic.nl/id/26801 2010-11-02T20:53:51+01:00 Facebook: I would Like to Post my Like to You Pushing your site's activity to Facebook

As some developers might know, Facebook provides a vast landscape of tools for integration. Unfortunately, navigating that landscape can be quite hard as the APIs changes constantly and the documentation is often lacking. So in today’s Facebook Integration landscape, what are the easy wins out there to push your site’s activity to Facebook?

Facebook allows any site to radically spice up their on and off-site activity. For Mediamatic, this has obvious benefits to everyone in the <a href="http://www.anymeta.net">AnyMeta Ecosystem</a>. <h3>Connect Me!</h3> With just a few lines of JavaScript, you can integrate your site with Facebook. And most of the API’s functionality can also be executed from the browser. This can make Facebook integration very easy. Without much effort, you can start publishing posts to your users’ Facebook profile. A post has several freeform fields like: name, caption, description, picture, link, etc. <h3>The Untangle ‘Facebook Like’</h3> One other obvious way of increasing exposure is by syndicating the liking of objects to Facebook. Throughout the web, you can find Facebook like buttons. In it’s most simplest form, these buttons allow any user - even without Facebook Connect - to like a page and after clicking the button the like will be shown on their Facebook profile. It’s important to note here however, that these simple likes at this moment cannot be retrieved through <a href="http://developers.facebook.com/docs/api">Facebook’s API</a>. In other words: with a simple like there is no persistent connection created between the user and the liked object. <a href="http://www.mediamatic.nl/26807/en/i-like"> <img src="http://fast.mediamatic.nl/f/cnsk/image/049/26807-100-100.jpg" height="100" width="100" alt="" title="I Like!" playable="1"/> </a><a title="Vergroot afbeelding - I Like! - Mediamatic Lab" href="/26807/en/i-like">I Like!</a> It is however possible to make the like button behave differently. If the page that hosts the like button holds enough <a href="http://opengraphprotocol.org">OpenGraph</a> meta-data, Facebook will turn that page into a topic, or more accurately an external Facebook page. When a user uses the like button on a page with ‘enough meta-data’, a link will be created between the user and that topic. These more advanced likes can be retrieved through the Facebook API. Also, a visible connection between the user and the topic will be displayed (forever?) on that user’s Facebook profile. This is key to Facebook’s interest graphing strategy. Unfortunately, in the current state of the Facebook Platform, it’s impossible to perform any of the aforementioned likes through the Facebook API. By <a href="http://bugs.developers.facebook.net/show_bug.cgi?id=10714">many</a> <a href="http://forum.developers.facebook.net/viewtopic.php?pid=278380">users</a> this has been reported as a bug, but more likely this has been done by design. Facebook does not want third-parties liking topics on behalf of it’s users. It’s unclear whether they will provide any solution in the near future. (Side note: it is possible to ‘like’ activity stream entries through the API, but this is far from useful) <h3>Pushing Activity to Facebook</h3> So what can (and should) I do to push my site’s activity to Facebook? <ul> <li>Make sure like buttons are placed on all your pages and that OpenGraph meta-data is present on those pages.</li> <li>All activity (other than likes that happen on a page) can be pushed to Facebook by publishing a post to a user’s profile. This will require Facebook Connect (often in combination with offline publishing permissions).</li> <li>When users visit from Facebook, make sure you provide them with an easy way to Facebook connect.</li> </ul> Have some other recommendations? Please add by leaving a comment! Dominiek ter Heide http://www.mediamatic.net/id/165554 ARTICLE text 1 http://www.mediamatic.nl/id/26644 2010-10-26T13:41:50+02:00 Web traffic sources in developing countries An analysis of traffic to the Puma Creative Arts network sites using Google Analytics.

The Puma Creative Arts network websites <a href="http://www.creativecaribbeannetwork.com">"creativecaribbeannetwork.com"</a> and <a href="http://www.creativeafricanetwork.com">"creativeafricanetwork.com"</a> are both aimed at the promotion of social networking within the Arts in developing areas of the world. They plan to bring people together by leveraging the power of networking and giving artists access to each other and to resources that they might otherwise not be able to obtain. While developing these two networks and working on the third (the "creativesouthamericanetwork.com") the development team at Mediamatic has been trying to keep in consideration the technical abilities of its target audience, namely artists in developing countries. By asking questions like "how much of our traffic comes from areas with low internet penetration" and "what sorts of browsers do our visitors use", we try to tailor the websites so that we can get the greatest coverage for all visitors, including those with slow internet connections or out of date computer hardware.

<h3>The Creative Caribbean Network</h3> <h4>Visitors to Date: 25th October 2010</h4> To date in 2010, the Caribbean network has been visited 32,658 times by 17,041 unique visitors with users spending an average of 5:30 on the site. Of the 32,658 visits the percentage per browser breaks down as follows: <ol> <li>Firefox - 11,558 - 35.36%</li> <li>Safari - 9,530 - 29.16%</li> <li>Internet Explorer - 9,407 - 28.78%</li> <li>Chrome - 1,819 - 5.57% </li> <li>Opera - 123 - 0.38%</li> </ol> (12 other browsers too minor to mention) These statistics show Firefox with a clear ~5% lead in usage making it the most popular browser. Internet Explorer, unexpectedly, is used in only ~29% of visits suggesting that the developing nations of the Caribbean don’t use IE as much as first expected. All in all the 3 major browsers; IE, Firefox and Webkit (Safari, Chrome) comprise roughly 1/3 of the total visitors for the year 2010 to date. <h4>Geographical locations:</h4> The top 10 countries of origin for incoming visits to the Caribbean network for the year to date were: <ol> <li>United States - 10,733 </li> <li>Jamaica - 3,721 </li> <li>United Kingdom - 3,265</li> <li>Netherlands - 2,146 </li> <li>Puerto Rico - 1,249</li> <li>Canada - 1,157</li> <li>Trinidad and Tobago - 1,119</li> <li>France - 857</li> <li>Barbados - 797</li> <li>Germany - 761 </li> </ol> Surprisingly ,only 4 of the top 10 are countries that are part of the Caribbean, with Jamaica leading. The top viewer was the US by a ~7000 visit margin, suggesting that the majority of the visitors to the Caribbean networks are not from third world countries as previously expected. <a href="http://www.mediamatic.nl/26647/en/caribbean-heat-map"> <img src="http://fast.mediamatic.nl/f/cnsk/image/139/26647-400-276.png" height="276" width="400" alt="" title="Caribbean Heat map" playable="1"/> </a><a title="Vergroot afbeelding - Caribbean Heat map - Mediamatic Lab" href="/26647/en/caribbean-heat-map">Caribbean Heat map</a> Even more interestingly, the majority of US based visits to the site (4,588) came from Florida, which is right next to the Caribbean islands. This suggests that the majority of usage for the website is coming from US based, Caribbean citizens. <a href="http://www.mediamatic.nl/26648/en/usa-heat-map"> <img src="http://fast.mediamatic.nl/f/cnsk/image/361/26648-400-220.png" height="220" width="400" alt="" title="USA Heat Map" playable="1"/> </a><a title="Vergroot afbeelding - USA Heat Map - Mediamatic Lab" href="/26648/en/usa-heat-map">USA Heat Map</a> <h4>Recent visits:</h4> Since August 25th 2010, the network has been visited 7,452 times by 5,108 unique visitors, with users spending an average of 3:46 on the site. The browser usage percentages are as follows: <ol> <li>Firefox - 2,548 - 34.19%</li> <li>Internet Explorer - 2,435 - 32.68%</li> <li>Safari - 1,715 - 23.01%</li> <li>Chrome - 622 - 8.35%</li> <li>Opera - 54 - 0.72%</li> </ol> (12 other browsers too minor to mention) While being roughly the same as the overall year statistics, a trend is noticeable with the higher use of IE in recent months compared to the year average leading to the conclusion that as more people access the site the amount of IE users is rising steadily. <h4>Special mention - IE Browser versions:</h4> The version breakdown for IE for 2010 to date is as follows: 9,409 visits total. <ol> <li>8.0 - 5,948 - 63.22%</li> <li>7.0 - 418 - 25.70%</li> <li>6.0 - 918 - 9.76%</li> <li>9.0 - 122 - 1.30%</li> </ol> Clearly IE 8 is overwhelmingly the most used version with almost 2/3 of total IE visits coming from IE 8 browsers. As expected the uptake of IE 9 amongst the Caribbean network users is very low with only 1.3% of 122 visits coming from IE9 (with a large amount of those possibly being made by Mediamatic staff testing the site). Predictably IE 6, being over 10 years old, was only used for 918 visits and will continue to decline. <h3>The Creative Africa Network</h3> Browser usage in the Africa network breaks down like this: <ol> <li>Firefox - 34,934 - 35.22%</li> <li>Internet Explorer - 31,689 - 31.94%</li> <li>Safari - 24,248 - 24.44%</li> <li>Chrome - 6,488 - 6.54%</li> <li>Opera - 678 - 0.68%</li> </ol> <a href="http://www.mediamatic.nl/26649/en/can-browser-distirbution"> <img src="http://fast.mediamatic.nl/f/cnsk/image/556/26649-400-281.png" height="281" width="400" alt="" title="CAN Browser distirbution" playable="1"/> </a><a title="Vergroot afbeelding - CAN Browser distirbution - Mediamatic Lab" href="/26649/en/can-browser-distirbution">CAN Browser distirbution</a> Over all, to date in 2010, the network had 99,200 visits made by 60,938 unique visitors. Once again Firefox was the most used browser followed by IE. It was again a roughly 1/3 each split between Firefox, Webkit and IE. <h4>Geographical locations:</h4> Google Analytics breaks the continent of Africa in to five regions comprising the separate countries; Northern, Western, Middle, Eastern and Southern Africa. These regions split as follows for the years 2010 to date: <ol> <li>Southern Africa - 11,154</li> <li>Eastern Africa - 5,176</li> <li>Western Africa - 4,144</li> <li>Northern Africa - 2,887</li> <li>Middle Africa - 692</li> </ol> As expected, Southern Africa has easily the most visitors with as many by itself as the rest of the regions put together. <a href="http://www.mediamatic.nl/26645/en/africa-heat-map"> <img src="http://fast.mediamatic.nl/f/cnsk/image/071/26645-400-341.png" height="341" width="400" alt="" title="Africa Heat Map" playable="1"/> </a><a title="Vergroot afbeelding - Africa Heat Map - Mediamatic Lab" href="/26645/en/africa-heat-map">Africa Heat Map</a> The East, North and Western regions are all at roughly the same leve. However Middle Africa, comprised of Cameroon, Gabon, Congo (DRC), Congo (Republic), Angola, Equatorial Guinea and Chad, really lags behind with only a trickle of visits for the entire year. This may be due to low levels of Internet penetration in this region of the world. In the most popular region, Southern Africa (comprised of South Africa, Botswana, Namibia, Lesotho and Swaziland), South Africa is the overwhelming main source of traffic on the continent producing 10,656 visits for the year to date. This is unsurprising, given the higher amount of internet penetration there. Other high traffic countries include: <ul> <li>Nigeria - 1,809</li> <li>Kenya - 2,793</li> <li>Egypt - 1,106</li> </ul> <h4>Worldwide visits:</h4> The top 10 countries that provided the Africa network with traffic over the year to date were: <ol> <li>United States - 16,024</li> <li>United Kingdom - 15,690</li> <li>South Africa - 10,672</li> <li>France - 7,322</li> <li>Netherlands - 5,198</li> <li>Germany - 4,554</li> <li>Kenya - 2,797</li> <li>Italy - 2,650</li> <li>Canada - 2,587</li> <li>Denmark - 2,114 </li> </ol> Interestingly, there are only two African countries in the top 10; South Africa and Kenya and the majority of traffic, over 31,000 visits, comes from the US and UK. <h4>Special mention - IE Browser versions:</h4> For 31,694 total IE visits in the year to date, the breakdown of versions is as follows: <ol> <li>8.0 - 17,732 - 55.95%</li> <li>7.0 - 9,730 - 30.70%</li> <li>6.0 - 4,213 - 13.29%</li> <li>9.0 - 12 - 0.04%</li> </ol> We can see here that IE7 and IE6 comprise a larger portion of the IE versions than in the Caribbean network, possibly due to lower levels of internet penetration and older hardware being more common in Africa. Once again IE8 is the stand out in terms of usage. <h3>Conclusion:</h3> Using this information it is recommendable to devote the largest amount of development time to styling in Firefox as this is the most used site. The Webkit browsers will not need much additional work, if any, over the Firefox development. The rest of the time should be devoted to IE, in particular IE8. IE6 support is no longer necessary and IE7 and IE9 come a distant second to 8. Attention should be paid to making the sites accessible to those with low connection speeds/ underpowered computers. This is not the priority that would have been expected due to the fact that a large amount of the sites' visitors come from 1st world countries, where fast computers and broadband internet connections are readily available. With limited time, resources should be concentrated on Firefox and IE8 to provide the most coverage of the sites' users. Chris Finch http://www.mediamatic.net/id/137912 ARTICLE text 1 http://www.mediamatic.nl/id/23470 2010-09-22T17:37:12+02:00 De iPhone Alleycat applicatie

De iPhone Alleycat applicatie is gebaseerd op de traditionele Alleycat races. Deze fietsrace moet via verschillende checkpoints worden afgelegd naar de finish. De route tussen deze checkpoints mag de racer zelf bepalen. Om deze race zo goed mogelijk af te leggen is niet alleen snelheid, maar ook de creativiteit en de navigatievaardigheid van de fietser belangrijk.

Dit artikel moet een beeld vormen van mijn flow/interactie ontwerp voor de iPhone Alleycat app. Onderaan dit artikel is er een link naar een clickable mockup. Met dank aan Sara Kolster en Maarten Wolzak. <h3>Hoe werkt het?</h3> <a href="http://www.mediamatic.nl/23494/nl/iphone-alleycat-app-scherm-1"> <img src="http://fast.mediamatic.nl/f/cnsk/image/997/23494-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 1" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 1 - Mediamatic Lab" href="/23494/nl/iphone-alleycat-app-scherm-1">Iphone Alleycat app. scherm 1</a> Wanneer de Alleycat iPhone app wordt opgestart, zal er eerst om toestemming worden gevraagd om jouw huidige locatie te mogen bepalen. De app heeft deze namelijk nodig om een lijst te kunnen genereren van dichtstbijzijnde Alleycats en jouw locatie te bepalen op de kaart. <hr /> <a href="http://www.mediamatic.nl/23496/nl/iphone-alleycat-app-scherm-2"> <img src="http://fast.mediamatic.nl/f/cnsk/image/131/23496-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 2" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 2 - Mediamatic Lab" href="/23496/nl/iphone-alleycat-app-scherm-2">Iphone Alleycat app. scherm 2</a> Nadat je hebt toegestemd met het gebruik van jouw locatie zal de app een lijst genereren met de dichtstbijzijnde Alleycats. Elke Alleycat in de lijst zal worden weergegeven met de naam van de Alleycat , het startpunt, de snelste tijd die momenteel gereden is van de desbetreffende Alleycat en de rating. Races die je al een keer hebt gereden worden weergegeven met een vlaggetje. Als je op het vlaggetje drukt kom je op jouw persoonlijke detailpagina van de desbetreffende race met jouw persoonlijke racegegevens. Onderin het scherm zijn er nog twee weergave/filter opties, namelijk “coolest”en “done races”. <hr /> <a href="http://www.mediamatic.nl/23497/nl/iphone-alleycat-app-scherm-3"> <img src="http://fast.mediamatic.nl/f/cnsk/image/624/23497-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 3" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 3 - Mediamatic Lab" href="/23497/nl/iphone-alleycat-app-scherm-3">Iphone Alleycat app. scherm 3</a> Onder het “coolest” tabje staan alle best beoordeelde Alleycats (gebaseerd jouw locatie). De Alleycats kunnen worden beoordeeld door de gebruikers. Best beoordeelde Alleycats komen bovenin in de lijst te staan. De eerste drie plekken zijn gereserveerd voor de Mediamatic Alleycats. Dit zijn speciaal beoordeelde en/of ontworpen Alleycats door Mediamatic die zij graag onder de aandacht van de gebruikers willen brengen. <hr /> <a href="http://www.mediamatic.nl/23498/nl/iphone-alleycat-app-scherm-4"> <img src="http://fast.mediamatic.nl/f/cnsk/image/313/23498-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 4" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 4 - Mediamatic Lab" href="/23498/nl/iphone-alleycat-app-scherm-4">Iphone Alleycat app. scherm 4</a> Onder het “Done races” tabje staan alle races die je hebt behaald. Het aantal uren, minuten en/of seconden die je te kort komt voor de snelste tijd worden tevens in deze lijst weergegeven. Als je op één van deze Alleycats drukt ga je naar jouw persoonlijke detailpagina van die race met jouw persoonlijke race gegevens. <hr /> <a href="http://www.mediamatic.nl/23499/nl/iphone-alleycat-app-scherm-5"> <img src="http://fast.mediamatic.nl/f/cnsk/image/866/23499-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 5" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 5 - Mediamatic Lab" href="/23499/nl/iphone-alleycat-app-scherm-5">Iphone Alleycat app. scherm 5</a> Als je in de “near you” lijst op Alleycat1 zouden drukken komen we op dit scherm. Dit is de detailpagina van de Alleycat. Bovenin staat de snelste gereden tijd voor deze Alleycat, door wie deze is behaald en op welke datum. Daaronder staat een kaart met het startpunt, de checkpoints en het finishpunt. In het balkje “Reviews” wordt de rating weergegeven en door hoeveel mensen deze race is beoordeeld. Als je op het balkje drukt kom je in een scherm terecht waar je alle reviews van deze race kunt bekijken. Door op “Leaderboard” te drukken kom je in het leaderboard scherm. Hier staan de gedeelde tijden van de gebruikers van deze race. Als het ware dus een soort scorebord. Als je besluit dat je deze race wilt rijden druk je op “Do this race”. <hr /> <a href="http://www.mediamatic.nl/23500/nl/iphone-alleycat-app-scherm-6"> <img src="http://fast.mediamatic.nl/f/cnsk/image/075/23500-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 6" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 6 - Mediamatic Lab" href="/23500/nl/iphone-alleycat-app-scherm-6">Iphone Alleycat app. scherm 6</a> Na op ”Do this race” te hebben gedrukt kom je op dit scherm terecht. Dit is een kaart met het overzicht van de race en jouw locatie(weergegeven als een blauw rondje). Om de race te beginnen moet er op de startknop worden gedrukt. Deze kan echter pas ingedrukt (geactiveerd) worden wanneer je je bij het startpunt begeeft. Je zult dus eerst naar het startpunt toe moeten fietsen. <hr /> <a href="http://www.mediamatic.nl/23514/nl/iphone-alleycat-app-scherm-7"> <img src="http://fast.mediamatic.nl/f/cnsk/image/729/23514-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 7" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 7 - Mediamatic Lab" href="/23514/nl/iphone-alleycat-app-scherm-7">Iphone Alleycat app. scherm 7</a> Zodra je bij het startpunt bent wordt de startknop geactiveerd. Druk nu op start op te beginnen met de race. <hr /> <a href="http://www.mediamatic.nl/23503/nl/iphone-alleycat-app-scherm-8"> <img src="http://fast.mediamatic.nl/f/cnsk/image/558/23503-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 8" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 8 - Mediamatic Lab" href="/23503/nl/iphone-alleycat-app-scherm-8">Iphone Alleycat app. scherm 8</a> Zodra je op start hebt gedrukt, telt de app vijf tellen af zodat je je gereed kunt maken voor de race. <hr /> <a href="http://www.mediamatic.nl/23504/nl/iphone-alleycat-app-scherm-9"> <img src="http://fast.mediamatic.nl/f/cnsk/image/135/23504-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 9" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 9 - Mediamatic Lab" href="/23504/nl/iphone-alleycat-app-scherm-9">Iphone Alleycat app. scherm 9</a> Na het aftellen start de race en begint de tijd te lopen. Met het knopje linksonder kun je je locatie opnieuw bepalen. Onder het knopje rechtsonder zit de stopknop om de race te stoppen. Tijdens het racen is het scherm vergrendeld, je kunt dus niet zomaar terug naar het begin scherm. Je zal dan eerst op de stopknop moeten drukken. Omdat het niet handig is om continu op het scherm van de iPhone te kijken tijdens het racen, zal er doormiddel van geluid feedback worden gegeven. Dit zal het beste werken met oordopjes. Via je oordopjes kan auditief informatie worden gegeven bijvoorbeeld over de afstand tot een checkpoint, wanneer je een checkpoint of race hebt behaald (ondersteunt met de trilfunctie). <a href="http://www.mediamatic.nl/23505/nl/iphone-3gs-earphone"> <img src="http://fast.mediamatic.nl/f/cnsk/image/551/23505-300-300.jpg" height="300" width="300" alt="" title="iphone-3gs-earphone" playable="1"/> </a><a title="Vergroot afbeelding - iphone-3gs-earphone - Mediamatic Lab" href="/23505/nl/iphone-3gs-earphone">iphone-3gs-earphone</a> Misschien voor versie 2? Jouw gereden tijd opvraagbaar tijdens de race via de remote op de Iphone oordopjes, druk het knopje in en je krijgt jouw gereden tijd te horen. Visuele weergave tijdens de race tussen jouw gereden tijd en de snelst gereden tijd. Uitdagen van andere gebruikers. Tijdens de race Tijdens het rijden is het natuurlijk niet handig om de Iphone in de hand te hebben. Gelukkig zijn er een aantal Iphone houders op de markt die een alternatief bieden. Zoals de arm/pols- houders en de fietshouders . <a href="http://www.mediamatic.nl/23506/nl/the-wristoffice-mobile-phone-holder"> <img src="http://fast.mediamatic.nl/f/cnsk/image/783/23506-400-268.jpg" height="268" width="400" alt="" title="The WristOffice Mobile Phone Holder" playable="1"/> </a><a title="Vergroot afbeelding - The WristOffice Mobile Phone Holder - Mediamatic Lab" href="/23506/nl/the-wristoffice-mobile-phone-holder">The WristOffice Mobile Phone Holder</a> <a href="http://www.mediamatic.nl/23507/nl/bicio-goride-iphone-holder"> <img src="http://fast.mediamatic.nl/f/cnsk/image/986/23507-400-400.jpg" height="400" width="400" alt="" title="Bicio-GoRide-iPhone Holder" playable="1"/> </a><a title="Vergroot afbeelding - Bicio-GoRide-iPhone Holder - Mediamatic Lab" href="/23507/nl/bicio-goride-iphone-holder">Bicio-GoRide-iPhone Holder</a> <hr /> <a href="http://www.mediamatic.nl/23508/nl/iphone-alleycat-app-scherm-10"> <img src="http://fast.mediamatic.nl/f/cnsk/image/043/23508-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 10" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 10 - Mediamatic Lab" href="/23508/nl/iphone-alleycat-app-scherm-10">Iphone Alleycat app. scherm 10</a> Als je op het knopje rechtsonder drukt zal er een rode stopknop verschijnen waarmee de race gestopt kan worden. Zodra er op de stopknop wordt gedrukt zal er een popup scherm verschijnen die zal vragen of je zeker weet of je de race wilt stoppen. <hr /> <a href="http://www.mediamatic.nl/23509/nl/iphone-alleycat-app-scherm-11"> <img src="http://fast.mediamatic.nl/f/cnsk/image/568/23509-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 11" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 11 - Mediamatic Lab" href="/23509/nl/iphone-alleycat-app-scherm-11">Iphone Alleycat app. scherm 11</a> Tijdens de race zal de app jouw locatie en afgelegde route bijhouden en weergeven op de kaart. Wanneer je naar een checkpoint fietst zal deze worden afgevinkt op de kaart en staat deze geregistreerd als behaald. Onder in het scherm wordt jouw racetijd bijgehouden. <hr /> <a href="http://www.mediamatic.nl/23510/nl/iphone-alleycat-app-scherm12"> <img src="http://fast.mediamatic.nl/f/cnsk/image/277/23510-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app scherm12" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app scherm12 - Mediamatic Lab" href="/23510/nl/iphone-alleycat-app-scherm12">Iphone Alleycat app scherm12</a> Wanneer je alle checkpoints hebt behaald en bent aangekomen bij de finish heb je de race succesvol afgerond. Er zal een pop-up verschijnen met een bevestiging en welke plaats je hebt gehaald op de leaderboard. Als je op “close” drukt sluit je de pop-up en ga je terug naar de kaart, als je op “view results” drukt ga je naar jouw persoonlijke detailpagina met jouw race gegevens. Omdat je de race succesvol hebt behaald zal deze nu in de Alleycat lijst (in het eerste scherm) met een vlaggetje worden weergegeven en vermeld worden in de “Done races” lijst. <hr /> <a href="http://www.mediamatic.nl/23511/nl/iphone-alleycat-app-scherm-13"> <img src="http://fast.mediamatic.nl/f/cnsk/image/574/23511-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 13" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 13 - Mediamatic Lab" href="/23511/nl/iphone-alleycat-app-scherm-13">Iphone Alleycat app. scherm 13</a> Dit is jouw persoonlijke detailpagina van de race die jij hebt gereden. Bovenin staat jouw behaalde racetijd en de datum wanneer deze race is gereden. Daaronder staat een kaart met een overzicht van jouw gereden route. Onder het balkje “Review” kun je een review schrijven voor deze Alleycat. Onder het balkje “View leaderboard & share score” Kun je jouw gereden tijd vergelijken met andere gebruikers op de leaderboard die deze race hebben behaald. Tevens kun je ervoor kiezen om jouw gereden tijd te gaan delen. Jouw gedeelde racetijd zal dan zichtbaar zijn voor de andere gebruikers op de leaderboard (zowel in de app als op de Mediamatic website). Als je een Mediamatic profiel hebt kunnen jouw race gegevens en reviews ook op jouw persoonlijk Mediamatic profiel worden weergegeven. <hr /> <a href="http://www.mediamatic.nl/23512/nl/iphone-alleycat-app-scherm-14"> <img src="http://fast.mediamatic.nl/f/cnsk/image/691/23512-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 14" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 14 - Mediamatic Lab" href="/23512/nl/iphone-alleycat-app-scherm-14">Iphone Alleycat app. scherm 14</a> Het geven van een review en rating. Het rating systeem bestaat uit het geven van sterren. Vijf sterren als hoogste beoordeling, geen sterren als laagste. Door over de sterren te sweepen kun je het gewenste aantal sterren opgeven. <hr /> <a href="http://www.mediamatic.nl/23513/nl/iphone-alleycat-app-scherm-15"> <img src="http://fast.mediamatic.nl/f/cnsk/image/600/23513-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 15" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 15 - Mediamatic Lab" href="/23513/nl/iphone-alleycat-app-scherm-15">Iphone Alleycat app. scherm 15</a> Als je op het balkje “View leaderboard & share score” in jouw persoonlijke detailpagina drukt kom je in dit scherm terecht. Hier kun je jouw score vergelijken met andere gebruikers en deze delen. Jouw tijd wordt onder in het scherm weergegeven. Op deze manier kun je door de leaderboard navigeren en jouw tijd makkelijk vergelijken met de andere gebruikers omdat deze immers in beeld blijft. In dit geval heb je de tiende plek behaald, wanneer je naar beneden zou scrollen in de leaderboard zou dit betekenen dat op de tiende plek jouw racetijd zou moeten staan. Wanneer jouw plek zichtbaar is in de leaderboard zal de balk met jouw tijd onder in het scherm verdwijnen (de balk zal met een animatie effect de leaderboard in worden geplaatst). Op deze manier wordt niet tweemaal dezelfde informatie weergegeven in hetzelfde scherm. Zodra je weer verder gaat scrollen en jouw tijd niet meer zichtbaar is in de leaderboard zal de balk onder in het scherm weer terugkomen. Om jouw racetijd te delen druk je op de balk onder in het scherm. <hr /> <a href="http://www.mediamatic.nl/23515/nl/iphone-alleycat-app-scherm-16"> <img src="http://fast.mediamatic.nl/f/cnsk/image/250/23515-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 16" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 16 - Mediamatic Lab" href="/23515/nl/iphone-alleycat-app-scherm-16">Iphone Alleycat app. scherm 16</a> Als je hebt besloten jouw racetijd te gaan delen kom je in dit scherm terecht. Er zijn twee opties om te delen. Via jouw Mediamatic log-in (voor gebruikers met een Mediamatic account) of via een nickname. Als je een Mediamatic account hebt en kiest voor de Mediamatic log-in zullen jouw racegegevens gekoppeld worden aan jouw online Mediamatic profiel. De app zal tevens jouw Mediamatic log-in gegevens locaal opslaan zodat je de volgende keer niet nogmaals hoeft in te loggen. <hr /> <a href="http://www.mediamatic.nl/23516/nl/iphone-alleycat-app-scherm-17"> <img src="http://fast.mediamatic.nl/f/cnsk/image/287/23516-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 17" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 17 - Mediamatic Lab" href="/23516/nl/iphone-alleycat-app-scherm-17">Iphone Alleycat app. scherm 17</a> Als je ervoor kiest om met jouw Mediamatic log-in te gaan delen moet je in dit scherm jouw log-in gegevens invoeren. Mocht je je log-in gegevens zijn vergeten kun je op “Lost your password?”drukken. Je krijgt dan een scherm waar je jouw e-mailadres moet invoeren zodat jouw log-in gegevens daarheen kunnen worden gestuurd. <hr /> <a href="http://www.mediamatic.nl/23517/nl/iphone-alleycat-app-scherm-18"> <img src="http://fast.mediamatic.nl/f/cnsk/image/052/23517-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 18" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 18 - Mediamatic Lab" href="/23517/nl/iphone-alleycat-app-scherm-18">Iphone Alleycat app. scherm 18</a> Lost your password? <hr /> <a href="http://www.mediamatic.nl/23518/nl/iphone-alleycat-app-scherm-19"> <img src="http://fast.mediamatic.nl/f/cnsk/image/029/23518-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 19" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 19 - Mediamatic Lab" href="/23518/nl/iphone-alleycat-app-scherm-19">Iphone Alleycat app. scherm 19</a> Nadat de gegevens zijn ontvangen per e-mail kunnen deze hier worden ingevoerd. <hr /> <a href="http://www.mediamatic.nl/23519/nl/iphone-alleycat-app-scherm-20"> <img src="http://fast.mediamatic.nl/f/cnsk/image/454/23519-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 20" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 20 - Mediamatic Lab" href="/23519/nl/iphone-alleycat-app-scherm-20">Iphone Alleycat app. scherm 20</a> Als je ervoor kiest om met een nickname te delen kun je deze hier invoeren. <hr /> <a href="http://www.mediamatic.nl/23520/nl/iphone-alleycat-app-scherm-21"> <img src="http://fast.mediamatic.nl/f/cnsk/image/054/23520-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 21" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 21 - Mediamatic Lab" href="/23520/nl/iphone-alleycat-app-scherm-21">Iphone Alleycat app. scherm 21</a> Bij het succesvol delen via de Mediamatic log-in zal jouw racetijd worden weergegeven in de leaderboard met jouw Mediamatic profielnaam en foto in de vorm van een avatar. Tevens zijn jouw racegegevens nu gekoppeld aan jouw Mediamatic profiel. Met het tabje “ All/You”onder in het scherm kun je filteren op de gedeelde racetijden van jouw en andere gebruikers of alleen jouw racetijden. <hr /> <a href="http://www.mediamatic.nl/23521/nl/iphone-alleycat-app-scherm-22"> <img src="http://fast.mediamatic.nl/f/cnsk/image/389/23521-400-400.png" height="400" width="400" alt="" title="Iphone Alleycat app. scherm 22" playable="1"/> </a><a title="Vergroot afbeelding - Iphone Alleycat app. scherm 22 - Mediamatic Lab" href="/23521/nl/iphone-alleycat-app-scherm-22">Iphone Alleycat app. scherm 22</a> Bij het succesvol delen via een nickname zal jouw racetijd worden weergegeven met de jouw ingevoerde nickname en een anonieme avatar. <h1>Bekijk mockup</h1> <a href="http://download974.mediafire.com/tq8n2m6sk53g/7h5wz0066d53txa/Iphone+Alleycat+mockup.pdf">Klik hier voor de mockup</a> Jonathan Davids http://www.mediamatic.net/id/143517 ARTICLE text 1 http://www.mediamatic.nl/id/23412 2010-07-30T17:11:16+02:00 Printing a badge What's the easiest way to create and print badges from Anymeta

This article goes into the different alternatives for creating and printing badges for events which are hosted from an Anymeta site.

<h2>Requirements</h2> <ul> <li>Easy to use and configure by frontend developers</li> <li>Badge generation should be fast</li> <li>Create multi-paged PDFs with multiple badges in one file.</li> <li>People at home might self-print their badge</li> </ul> <h2>Current situation</h2> The current situation is <a href="http://www.mediamatic.net/page/155337/en">nicely summarized by Kerim</a>. We currently use the fPDF library with manual scripting to tweak the margins, fonts etc. Pros of PDF badges: <ul> <li>single-file download</li> <li>less chrome when printing</li> <li>page breaks are easy</li> </ul> Cons of PDF badges: <ul> <li>clogging when printing many files</li> <li>hard to maintain by front-enders</li> </ul> <h2>Alternatives</h2> There are different ways to go here. <h3>Keeping the current situation</h3> Hard to maintain & change; problems with the fixed (non-flowing) manual fPDF layout. <h3>SVG badge template</h3> SVG is a standard for vector graphics based on XML. We might use a system where graphical designers design a badge in Illustrator or Inkscape, and export the file to SVG. Uploading it to Anymeta which then processes it, replacing certain template tags it finds with e.g. the users name, title, etc. It gives back a PDF file ready for printing. It sounds nice but there might be problems with this solution: <ul> <li>The actual rendering of the svg might be different depending on the svg version used.</li> <li>Text wrapping is not very well supported in SVG</li> <li>Used fonts might not be available on the server, thus creating sysadmin overhead of installing them.</li> <li>Template tags might be very complex and not understandable by designers / easily destroyed (e.g., if-statements)</li> <li>Loops are hard to do (e.g. printing a list of friends as listitems)</li> </ul> <h3>Direct HTML printing</h3> Generally HTML is a nice and logical path to take. Every frontend developer knows how to do this, and this way all Anymeta's functionality is exposed through the template system. <a href="http://www.mediamatic.net/page/155337/en">Kerim looked into this</a> but there are several problems: <ul> <li>page breaks not being handled well</li> <li>no proper way to get rid of the margin that the browser generates</li> </ul> No problems with fonts, we can use the @font-face declaration to embed a custom font inside the HTML, ready for printing. However for self-printing we cannot rely this since not all browsers support it. <h3>Offscreen HTML rendering into a PDF document</h3> <a href="http://www.mediamatic.net/page/155502/en">offscreen rendering of HTML</a> might be the way to go. A script can render a specially crafted page template with wkhtmltopdf . Again, @font-face can solve the sysadmin overhead of having to install all kinds of fonts on the server. For different types of badges we create different base templates, with the help of CSS3 to rotate the different pages of the badge into the right position. If we would need to generate multipage pdfs for use with multiple badges we would need an extra step using fPDF to combine the rendered HTML files. Then there is the issue of timing. We have to do some tests to see if Anymeta is fast enough to handle the request, do several sub-requests (one for each to-be-customizes badge page), combine these results into one PDF file, and serve it back. However it will probably always be faster than the current version, which is slow because the printers cannot handle landscape PDF files. In this solution we'll just always create portrait PDFs even if the content needs to be rotated. Sysadmin note: For wkhtmltopdf we can use a separate webserver (one of the API servers) so that we only need to install it on one machine. It can be statically linked so it does not depend on X11 being installed. <h2>Recommendation</h2> I would suggest we go for the wkhtmltopdf + @font-face + fPDF for combining the rendered HTML into a final PDF file which can be folded. Arjan Scherpenisse http://www.mediamatic.nl/id/2555 ARTICLE text 1 http://www.mediamatic.nl/id/23044 2010-07-23T14:26:05+02:00 HTML5 training: notes from the audience What I learned at work today

Last week, at Mediamatic Lab, we took a couple of hours to learn more about the new generation of HTML, HTML5. <a href="http://www.mediamatic.net/person/152667/en">Kerim</a>, <a href="http://www.mediamatic.net/person/60325/en">JD</a>, and <a href="http://www.mediamatic.net/person/87702/en">Andreas</a> researched aspects of this mark up language that were relevant for our sites and within their particular expertise. They presented their findings and recommendations for how we, as a company, should integrate HTML5 into our sites currently and as it becomes standardized and is supported by more browsers. Here's a bit of what we learned.

HTML5 is the newest version of HTML. From what I heard today, it actually reintroduces many of the features of early versions of IE that were never implemented in other browsers. HTML5 re-engineers these to be more stable in all browsers at least eventually when HTML5 is supported by all browsers... The presentations identified some of the nicest features of HTML5, those which might be worth implementing now, and what we should think about for the future. <h3>The Presentations and their blog posts</h3> <ul> <li><a href="http://www.mediamatic.net/person/152667/en">Kerim</a> started off the training - he looked at <a href="http://www.mediamatic.nl/page/22981/en">data storage</a>, <a href="http://www.mediamatic.nl/page/22984/en">drag and drop</a> and <a href="http://www.mediamatic.nl/page/22991/en">enhanced usage of forms</a></li> <li><a href="http://www.mediamatic.net/person/60325/en">JD</a> looked at editable content, new body elements, and video support.</li> <li><a href="http://www.mediamatic.net/person/87702/en">Andreas</a> presented <a href="http://www.mediamatic.nl/page/22978/en">new possibilities for fonts and in CSS3</a>.</li> </ul> <h2>Some highlights</h2> <h3>Web storage</h3> <a href="http://www.mediamatic.net/person/152667/en">Kerim</a> reported about the upgrades to <a href="http://www.mediamatic.nl/page/22981/en">data storage</a> in HTML5. While cookies allow for a limited amount of storage and browsers cache some data, if you are composing work in a browser, interruptions in internet access often mean you lose a lot of work. HTML5 has two types of web storage that could make this a thing of the past. Now if you go offline, you can just put your session on hold and your data is stored locally. Once you reconnect your data can be sent to the server so nothing is lost. There are two types of storage so a user has access to data throughout a session - using sessionStorage - or even longterm across sessions - using localStorage. Online people are calling it "Cookies on steroids". Kerim made some really nice demos of how these work and included them in his post. <h3>Form features and new body elements</h3> Discussed by <a href="http://www.mediamatic.net/person/152667/en">Kerim</a> and <a href="http://www.mediamatic.net/person/60325/en">JD</a> , HTML5 has an expanded set of form and body tags. For forms this means that just by marking up your form elements correctly, browsers can intelligently change the interface to make data entry and validation easier. Currently on a mobile device or anything with a soft keyboard, the keypad will change to be appropriate for that type of form element. For example, if you are entering an email address the "@" will be visible. In the future, desktops will also benefit. The data will be validated for the specified format. In the meantime, adding more precise body and form element tags will help clean up code and make it more readable. <h3>Autofocus</h3> Not too splashy, but useful, HTML5 will make it easier to put form focus into pages so users can automatically be working in the "right" form field. This will be faster than current javascript implementations that don't determine focus until after the page is loaded. <h3>Fonts</h3> <a href="http://www.mediamatic.net/person/87702/en">Andreas</a> looked at HTML5 and was most excited by the new possibilities for rendering fonts. Web designers have been bound to "Web-safe" fonts if they want the text to look right, be searchable and easily copied, but that might not be the case for long. New techniques to render fonts allow for many more options. Andreas presented other rendering techniques, their pricing and the browser support. One of the most exciting options is Typekit where you can rent fonts at a reasonable price and choose from a quickly expanding font library. This is changing the face of the web. We will perform a test to see if we can start using these font libraries in our sites. <h2>Other things and things for later</h2> <h3>Drag and Drop</h3> The bottom line on HTML5 and drag and drop seems to be, don't do it (yet). It's not standardized or supported (yet). Read more on Kerim's <a href="http://www.mediamatic.nl/page/22984/en">post</a>. I'll stop here. <h3>Editable content</h3> JD talked about two modes where users will be able to edit all of the html of a page directly, designMode, or a section at a time, contentEditable, but since this will require a lot of parsing so that users don't unwittingly add spurious code and because all browsers interpret formatting differently, we'll wait on this one. <h3>Video support</h3> Different browsers support different video formats and the UI around videos is not the same across browsers so it is tricky to provide cross browser support. Still with no single solution in place at Mediamatic, JD thought it is worthwhile and showed an example of how we could present video by stacking in the CSS so all browsers will show the video and when one format is not available the browser will “fallback gracefully” to the format that is. <h3>Style sheets</h3> Some CSS3 effects some seem promising like the fact that color notations includes alpha/opacity, shapes can have rounded corners and gradients and you can rotate anything. Unfortunately with IE not supporting any of these styles, it's not very useful yet. <h3>Conclusions</h3> HTML5 in the future will allow us to replace scripting on our sites with HTML Unfortunately, HTML5 is not well supported yet so there are only a few aspects of what we learned that we may be able to leverage now. Jeana Frost http://www.mediamatic.net/id/134518 ARTICLE text 1