Mediamatic Developers blog

anyMeta 4.19.3 - Atom module 0.3.2 2012-02-09T14:02:16+01:00 http://www.mediamatic.nl/feed/atom/2781/nl Mediamatic Developers blog 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/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/22991 2010-07-26T12:02:08+02:00 HTML5 Training (Web Forms 2.0) Research on enhanced forms

This part of the training looks at the advantages, disadvantages and use cases of web storage. Other parts available include research on <a href="http://www.mediamatic.nl/page/22984/en">drag and drop</a> as well as the <a href="http://www.mediamatic.nl/page/22981/en">Web Storage API</a>.

A greatly welcomed addition to the HTML5 spec are new input types, allowing future versions of browsers to validate certain input without having to use Javascript as well as providing users with soft-keyboards a more specialized keyboard layout. <h2>general input types</h2> The email input field provides the user with a soft-keyboard with a layout that highlights buttons that are required to enter email addresses most often:  The numbers input field, like the email input field, provides a specialized keyboard, this one focusing on number entry:  The URL input field, like its siblings, provides direct access to the most required buttons when entering URLs:  All above buttons will, eventually, be validated by the user's browser and will not require Javascript anymore but as of this moment, the biggest advantages are that users with soft-keyboard get input-specific button layouts and that Javascript validation does not have to rely on a specific (CSS) ID or class anymore but can utilize the type attribute. <h2>specialized input types</h2> Next to the above mentioned input types, HTML5 also adds support for the placeholder, autofocus and search input types. As the name suggests, the placeholder type provides developers with the possibility to include a placeholder in the input field, thereby enabling the site manager to provide succinct instructions on the data that is expected to be entered in a given input field.  The search input field provides the user with the ability to delete the contents of a single field by clicking the X in a small greyish circle that appears as soon as the user starts to enter data. This features makes the most sense on mobile devices, where keyboard space is at a premium and deleting large amounts of field data is cumbersome.  The autofocus input field provides developers with the possibility of automatically setting the focus on a certain input field. This was done in the past by utilizing Javascript functions which usually would only fire once the page was fully loaded. Depending on the size of the page, this firing could trigger at an inopportune moment. <h2>Support</h2> Support for enhanced forms is widely available in recent versions of Firefox, Safari and Chrome, with Internet Explorer 8.0 having added support for it as well. Kerim Satirli http://www.mediamatic.net/id/152667 ARTICLE text 1 http://www.mediamatic.nl/id/22984 2010-07-26T12:00:51+02:00 HTML5 Training (Drag and Drop) Research on Drag and Drop

This part of the training looks at the advantages, disadvantages and use cases of drag and drop. Other parts available include research on <a href="http://www.mediamatic.nl/page/22981/en">Web Storage</a> as well as the <a href="http://www.mediamatic.nl/page/22991/en">enhanced usage of forms</a>.

Drag and drop support in browsers, initially conceived by Microsoft's Internet Explorer team in 1999, is slated to become an official part of the HTML5 spec, as outlined by the W3C. Drag and drop enables users to utilize interfaces in a more human way, by allowing items to be both dragged and dropped, as one would do in real life to sort items or data. <h2>drag and drop</h2> Drag and drop is, according to Peter-Paul Koch, one of the most widely respected voices on HTML and related technologies, broken, stating that: <blockquote> You MUST NOT use HTML5 drag and drop. Rely on old-school scripts instead. </blockquote> <h2>User Feedback</h2> User feedback from drag and drop implementations varies heavily, with Firefox taking the most logical approach and providing the user with clear feedback:  Chrome on the other hand, provides the user with no information at all about the item that is being dragged:  Internet Explorer versions 6 and 7 are unable to render HTML5 drag and drop controls at all:  Internet Explorer 8 is giving the user conflicting feedback, in essence telling him / her that dragging is not supported by means of a forbidden cursor, while at the same time, still allowing an item to be dragged and dropped.   <h2>Support</h2> Support for drag and drop is only spottily available in recent versions of Firefox, Safari and Chrome, with old versions of Internet Explorer not being able to support drag and drop at all. More recent versions of Internet Explorer, while technically being capable of supporting drag and drop, have a problematic user interaction design, which could result in an extremely confusing user experience. <h2>Showcases</h2> Following are a number of screecasts that display different features of drag and drop implementations. The video below demonstrates how drag and drop can be used to test fonts, by dragging them into the document: <object width="407" height="306" class="inline-object wiki-youtube"><param name="movie" value="http://www.youtube.com/v/dWDtYpGF6Wg&fs=1"></param><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed class="inline-object wiki-youtube" src="http://www.youtube.com/v/dWDtYpGF6Wg&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="407" height="306"></embed></object> The video below demonstrates how Firefox is unable to cope with bad fonts and instead of displaying an error message, crashes. <object width="407" height="306" class="inline-object wiki-youtube"><param name="movie" value="http://www.youtube.com/v/mQFZ2nRQrhE&fs=1"></param><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed class="inline-object wiki-youtube" src="http://www.youtube.com/v/mQFZ2nRQrhE&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="407" height="306"></embed></object> Kerim Satirli http://www.mediamatic.net/id/152667 ARTICLE text 1 http://www.mediamatic.nl/id/22981 2010-07-26T12:01:45+02:00 HTML5 Training (Web Storage) Research on Web Storage

One interesting addition to the HTML5 spec is web storage, a (better) way of storing data, both for long- and short term use. Web Storage consists of two items that share most of their feature set with each other: for long term storage, there is localStorage, for short term storage, sessionStorage ought to be used. Both solutions could be considered cookies on steroids, as they provide most, if not all, features cookies provide, while at the same time not being limited to an extremely low 4KB limit. <h2>localStorage</h2> localStorage enables a developer to store a large amount of data in a SQLite database on the user's computer. This data will be available to pages under the domain that initially stored the data indefinitely or until the user cleans up his web applications cache, either manually or by using a Firefox extension such as <a href="https://addons.mozilla.org/en-US/firefox/addon/6623/">BetterPrivacy</a>. Contrary to cookies, this data does not have to be transmitted every time a request was made. Any and all data can be invalidated by utilizing timestamps. <h2>sessionStorage</h2> sessionStorage provides the same basic functionality as localStorage does, with the biggest exception being that data will only be available during the current (tab) session. Closing a tab ought to delete the data that was stored, however, by using features such as Firefox' "undo close last tab" function, all data can be restored. In any case, however, the data will be gone when the browser application is terminated. <h2>Support</h2> Support for Web Storage is widely available in recent versions of Firefox, Safari and Chrome, with Internet Explorer 8.0 having added support for it as well. <h2>Showcases</h2> Following are a number of screecasts that display the different features of Web Storage implementations. The video below demonstrates how localStorage can be used to save data: <object width="407" height="306" class="inline-object wiki-youtube"><param name="movie" value="http://www.youtube.com/v/pMzyhdkfLLc&fs=1"></param><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed class="inline-object wiki-youtube" src="http://www.youtube.com/v/pMzyhdkfLLc&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="407" height="306"></embed></object> The video below demonstrates how localStorage is able to store data during a single browser session: <object width="407" height="306" class="inline-object wiki-youtube"><param name="movie" value="http://www.youtube.com/v/PFKN8aQ7sdA&fs=1"></param><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed class="inline-object wiki-youtube" src="http://www.youtube.com/v/PFKN8aQ7sdA&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="407" height="306"></embed></object> The video below demonstrates how localStorage is able to store data during multiple browser sessions: <object width="407" height="306" class="inline-object wiki-youtube"><param name="movie" value="http://www.youtube.com/v/nCI8BOmiUBc&fs=1"></param><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed class="inline-object wiki-youtube" src="http://www.youtube.com/v/nCI8BOmiUBc&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="407" height="306"></embed></object> The video below demonstrates how sessionStorage can be used to save data: <object width="407" height="306" class="inline-object wiki-youtube"><param name="movie" value="http://www.youtube.com/v/SzGcwgBPJJM&fs=1"></param><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed class="inline-object wiki-youtube" src="http://www.youtube.com/v/SzGcwgBPJJM&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="407" height="306"></embed></object> The video below demonstrates how sessionStorage is able to store data during a single browser session: <object width="407" height="306" class="inline-object wiki-youtube"><param name="movie" value="http://www.youtube.com/v/S7DAtBuz3l4&fs=1"></param><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed class="inline-object wiki-youtube" src="http://www.youtube.com/v/S7DAtBuz3l4&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="407" height="306"></embed></object> The video below demonstrates how sessionStorage is unable to store data during multiple browser sessions: <object width="407" height="306" class="inline-object wiki-youtube"><param name="movie" value="http://www.youtube.com/v/TnTwAycl0gU&fs=1"></param><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed class="inline-object wiki-youtube" src="http://www.youtube.com/v/TnTwAycl0gU&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="407" height="306"></embed></object> Kerim Satirli http://www.mediamatic.net/id/152667 ARTICLE text 1 http://www.mediamatic.nl/id/22068 2010-06-11T17:20:00+02:00 RFID-variant van traditionele Alleycat

De <a href="http://www.mediamatic.nl/page/19868">ikCam Alleycat</a> is een race voor fietsers die bestaat uit verschillende checkpoints. De rijder mag zelf de route tussen deze checkpoints 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.

<h3>Het idee</h3> Het idee van Mediamatic was om een <a href="http://en.wikipedia.org/wiki/Alleycat_races">Alleycat race</a> in Amsterdam te organiseren met een verrassend spelelement, namelijk het gebruik van de <a href="http://www.mediamatic.nl/page/3149/nl">ikTag</a> en de <a href="http://www.mediamatic.net/page/90674/en">ikCam’s</a>. De ikCam’s worden gebruikt als start, finish en checkpoints. Het resultaat is een RFID-versie van een traditionele Alleycat. Om de race te rijden krijgt de deelnemer een ikTag en een manifest in de vorm van een <a href="http://www.mediamatic.net/page/143607">spoke card</a> uitgereikt. Daarop staan de adressen van de checkpoints die hij of zij moet behalen. <h3>Hoe werkt het?</h3> De race begint wanneer de deelnemer bij het startpunt een foto maakt met behulp van zijn of haar ikTag en de ikCam. Vanaf dat moment moet de deelnemer via de checkpoints naar het finishpunt rijden. Ook het behalen van de checkpoints en het finishen gebeurt met de ikTag en de ikCam. Wanneer de race is voltooid, kan de deelnemer de gemaakte foto’s en zijn of haar racegegevens terug vinden op Mediamatic.net. Tevens is er een leaderboard op de website met de best gereden tijden van de Alleycat. Tijdens de race worden de resultaten live gestreamd via de site van Mediamatic. <a href="http://www.mediamatic.nl/3176/nl/iktag-was-developed-by-mediamatic"> <img src="http://fast.mediamatic.nl/f/cnsk/image/373/3176-400-300.jpg" height="300" width="400" alt="" title="ikTag was developed by Mediamatic" playable="1"/> </a><a title="Vergroot afbeelding - ikTag was developed by Mediamatic - Mediamatic Lab" href="/3176/nl/iktag-was-developed-by-mediamatic">ikTag was developed by Mediamatic</a> <a href="http://www.mediamatic.nl/3134/nl/ikcam-tijdens-kom-je-ook"> <img src="http://fast.mediamatic.nl/f/cnsk/image/440/3134-400-267.jpg" height="267" width="400" alt="" title="ikCam tijdens Kom je ook?" playable="1"/> </a><a title="Vergroot afbeelding - ikCam tijdens Kom je ook? - Mediamatic Lab" href="/3134/nl/ikcam-tijdens-kom-je-ook">ikCam tijdens Kom je ook?</a> <h3>De flow</h3> Het volgende schema geeft een visuele weergave van de flow van de ikCam Alleycat. 1. Taken van de deelnemer. 2. Systeem op de achtergrond (Anymeta). 3. De Mediamatic website. <a href="http://www.mediamatic.nl/22074/nl/flow-ikcam-alleycat"> <img src="http://fast.mediamatic.nl/f/cnsk/image/804/22074-177-400.jpg" height="400" width="177" alt="" title="Flow ikCam Alleycat" playable="1"/> </a><a title="Vergroot afbeelding - Flow ikCam Alleycat - Mediamatic Lab" href="/22074/nl/flow-ikcam-alleycat">Flow ikCam Alleycat</a> <h3>Installatie</h3> Nadat de flow van de race was vastgesteld zijn we gaan kijken naar het installeren van de ikCam’s op de verschillende locaties in Amsterdam. De ikCam’s moesten zo worden geïnstalleerd dat ze altijd bereikbaar zijn voor de deelnemers. Er is daarom gekozen om de ikCam’s achter het raam op te hangen. De deelnemer kan dan van buitenaf door het raam de ikTag laten scannen en zo een foto maken. De ikCam’s zijn opgehangen met behulp van een glasdrager met drie zuignappen. Deze is met een ophanging van Ty-Raps bevestigd aan de ikCam. Bij het testen kwam naar voren dat de ikCam’s in eerste instantie niet plat tegen het raam kwamen te hangen, wat het maken van een foto belemmerde. Om ervoor te zorgen dat de ikCam's goed bleven hangen, hebben we een stuk dubbelzijdig tape bevestigd aan de onderkant van de ikCam frontjes. Op die manier blijven de ikCam's tegen het raam aan plakken. <a href="http://www.mediamatic.nl/22080/nl/alleycat-ikcam"> <img src="http://fast.mediamatic.nl/f/cnsk/image/148/22080-400-300.jpg" height="300" width="400" alt="" title="Alleycat ikCam" playable="1"/> </a><a title="Vergroot afbeelding - Alleycat ikCam - Mediamatic Lab" href="/22080/nl/alleycat-ikcam">Alleycat ikCam</a> <a href="http://www.mediamatic.nl/22082/nl/alleycat-ikcam"> <img src="http://fast.mediamatic.nl/f/cnsk/image/922/22082-400-300.jpg" height="300" width="400" alt="" title="Alleycat ikCam" playable="1"/> </a><a title="Vergroot afbeelding - Alleycat ikCam - Mediamatic Lab" href="/22082/nl/alleycat-ikcam">Alleycat ikCam</a> <a href="http://www.mediamatic.nl/22088/nl/alleycat-ikcam"> <img src="http://fast.mediamatic.nl/f/cnsk/image/311/22088-300-400.jpg" height="400" width="300" alt="" title="Alleycat ikCam" playable="1"/> </a><a title="Vergroot afbeelding - Alleycat ikCam - Mediamatic Lab" href="/22088/nl/alleycat-ikcam">Alleycat ikCam</a> <h3>Configuratie</h3> Naast de installatie van de ikCam’s moeten deze ook geconfigureerd worden. Daarvoor is eerst een event-pagina aangemaakt op de Mediamatic.net website, die gekoppeld is aan de ikCam’s voor de Alleycat. De ikCam’s zijn zo geconfigureerd dat er een ikCam is voor de start, een voor de finish en vier voor de checkpoints. Wanneer er een foto wordt gemaakt met de ikCam staat bij de afbeelding waar deze is gemaakt, de naam van de ikCam en dat deze gekoppeld is aan de Alleycat race. Als na de start alle checkpoints zijn behaald wordt bij de finishfoto tevens de eindtijd weergegeven. Jonathan Davids http://www.mediamatic.net/id/143517 ARTICLE text 1 http://scherpenisse.net/id/644 2010-02-15T08:53:41+01:00 Resource sharing using Publish/Subscribe

Explaining the principles of resource sharing between websites using the publish/subscribe paradigm.

Over the last year you might have heard, either through <a href="http://scherpenisse.net/">me</a>, <a href="http://ralphm.net/blog/">Ralph Meijer</a> or through the grapevine, about the stuff we do at <a href="http://www.mediamatic.nl/">Mediamatic</a> related to the resource sharing technologies we're developing. This resource sharing is a part of our ongoing efforts to create a <a href="http://www.mediamatic.net/page/26902/en">federation of social networks</a> using a number of open web standards, the collective of which we've dubbed <a href="http://open-ci.nl/">Open-CI</a>. At Mediamatic, we implement Open-CI in <a href="http://www.anymeta.net/">Anymeta</a>, our community management system. Despite Anymeta being mainly closed-source, the technologies and standards we use are open, and we're in a continuous effort to document the different aspects that Open-CI is made of. This article will explain resource sharing: one of the most fundamental parts of Open-CI.The primary reason for writing this article is to highlight the fact that an open-source implementation of resource sharing is currently being implemented by me in <a href="http://zotonic.com">Zotonic</a>, a web framework written in Erlang that I work on in my spare time. With this article I hope to explain to Zotonic users and developers what these new modules and dependencies are that have been appearing over the last weeks, and why resource sharing is an essential feature of any modern CMS.<h2>Resource sharing: What is it?</h2>Resource sharing as we define it is a framework in which websites share the resources they have in a publisher/subscribe model. By resources, I refer to any form of web content that a website publishes: blog articles, reviews, pictures, status updates, et cetera.In the publish/subscribe model websites act as publishers (that's what websites are very good at) on the one hand: they publish their content on their webpages. On the other hand, and this is where the new stuff starts, websites act as subscribers as well: they can subscribe to resources that exist at a different site, for instance, for showing the content of the resource (e.g. the text of an article) in their own context, independent of the layout of the site it was original published on, or just showing a permalink to the resource with the proper title of the article.Why all this complexity of publishers and subscribers, you might think, when you can just copy-paste the information from one website to another? There's nothing wrong with copy-pasting, except that when doing it that way, the information can easily get outdated. It might be that the title of the article on the original site changes, or even the link to the article might change. If you just copy-paste, you'll end up with outdated information and maybe even broken links. Resource sharing solves this by using the publisher/subscribe model: when the resource at the publisher's site changes, the subscriber is notified of this change and can update his information.<h2>Use cases: Why would you want it?</h2>There are several reasons why you would want to share resources between sites. From the top of my head, I'm listing a few:<ul><li>You're writing an article for your company's blog, but you also want to publish it at your private blog, because you have a larger audience there.</li><li>You want your profile picture on only one place and have all your social networking sites use the same picture, so you can instantly replace it on all sites.</li><li>You want to have a website which aggregates information from different websites so you can display all events from the different sites into a single calendar.</li></ul><h2>Technical details: How do we do it?</h2>So far I managed not to talk about any underlying technology at all, so you could grasp the concept. The remaining sections of this article dive into the tech behind this all.The <a href="http://en.wikipedia.org/wiki/Publish/subscribe">publish/subscribe</a> paradigm explained in the previous sections has a perfect match on the technical level: Our take on resource sharing is based mainly on <a href="http://xmpp.org/extensions/xep-0060.html">XEP-0060</a>, the Publish-Subscribe subprotocol of <a href="http://xmpp.org/about/">XMPP</a> (the Extensible Messaging and Presence Protocol, formerly known as Jabber). It goes beyond the scope of this article to explain how XMPP works, but for a quick refresh of XEP-0060, publish/subscribe works with the concept of pubsub nodes on an XMPP server, to which publishers can push information to. Subscribers subscribe to pubsub nodes, receiving the notification in near-realtime whenever a publisher publishes information to a node.In our resource sharing implementation, resources on a website is linked to a single pubsub node on an XMPP server. This link is a one-to-one link: every single resource is linked to a single pubsub node: so when you have the node, you know which resource it represents, and vice versa. Furthermore, for future reference, resources that are published by a website are called authoritative resources when the resource resides on the website that it was created on. In other cases, when the resource has been imported using pubsub, we call the resource non-authoritative.<h3>Publisher side</h3>The publisher side of resource sharing is pretty straight-forward. Whenever the resource changes, the publishing website publishes an XML representation of the contents of the new resource to this node over XMPP. The XML representation of this "payload" is <a href="http://www.ietf.org/rfc/rfc4287.txt">Atom</a>. We chose Atom because an atom entry is in many cases a fitting representation for a web resource; it includes for example information on when the original resource was published and by whom.To tell the world that a resourcer can be subscribed to on XMPP to receive updates for resource, the publisher puts a <tt><link></tt> element in the <tt>head</tt> section of the content. This link element contains the XMPP URI telling subscribers where they should direct their subscriptions to receive updates regarding the resource. This XMPP URI is nothing more than the name of the XMPP server plus the name of the node:<pre><link rel="xmpp.feed" href="xmpp:pubsub.mediamatic.nl?;node=id/9411" title="XMPP updates for this item" /> </pre>If you view the source of this page, you'll see how eJabberd pubsub nodes look like by default.<h3>Subscriber side</h3>The subscriber side is somewhat more complex. First of all, the subscribing website must have a way of telling that the resource is non-authoritative: a boolean flag or similar. Also, it must store the original location of the resource: the resource URI. The combination of the two can be used to display a notice on the non-authoritative site to show that the resource has been imported from somehwere else (for an example of this, see <a href="http://scherpenisse.net/page/638">this article</a>).When subscribing to a piece of content on another website, you need this resource URI: the location where the HTML representation of the resource can be found (often the "permalink" of the resource). The subscriber retrieves the HTML representation by dereferencing the URI, and looks for the <tt>link</tt> element with <tt>type="xmpp.feed"</tt>, extracting the XMPP URI from the <tt>href</tt> attribute. When this XMPP URI of the resource has been discovered, the subscriber proceeds to create a non-authoritative "stub" article, marking this with the found XMPP URI. It then sends out the subscribe request to the service referenced in the XMPP URI, for the discovered node. When the subscription succeeds, most XMPP servers immediately send a notification to the subscriber. This notification contains the most recent item that was published to the node. On the receiving of this notification, the subscriber can extract the payload, which represents the contents of the resource in Atom XML format, and then proceed to update the "stub" article that was created before the subscription started, using the Atom contents.Now, the subscriber has made a succesful subscription to a resource on another site. Every time someone changes the original resource, the subscriber gets notified, and can update his own non-authoritative copy of the resource accordingly.<h3>Deleting and relocating resources</h3>When a subscriber deletes his non-authoritative resource, he also sends out a unsubscribe request to the services referenced in the XMPP URI of the non-authoritative resource, saying, hey, I deleted this so I don't need any future notifications.The deletion of authoritative resources needs to be propagated over publish/subscribe as well: otherwise, when the original resource gets deleted on the publisher's site, the subscriber's copy is still there and now links to a 404 page on the publisher's site. Luckily, XEP-0060 is extensive enough to cover this situation: when the publisher deletes the resource, he also sends out over XMPP a request to delete the pubsub node that was linked to the content. The XMPP server then notifies every subscriber of this fact, and thus the subscribers can delete their non-authoritative copies of the resource as well.Resources can also relocate: for instance, you can decide that your blog post should move from your personal blog to your company's blog. Or, you change the domain name of your blog, which also affects the domain name of your XMPP server. In both these cases, the resource is first at one site, and the next moment it's published at another site. Luckily you know the new location of the node, the location of the XMPP server where you're moving your content to. This case can be handled much like a delete: you tell your subscribers that the node is no longer there, but that they should resubscribe to <a href="http://xmpp.org/extensions/xep-0060.html#owner-delete-request">another location</a> to continue to receive updates for the item.<h2>Conclusion</h2>I hope that this article gives insight into how resource sharing over XMPP works, both on a conceptual and a technical level. Technically, there can be a lot more said about this subject. For one, this article did not go into implementation detail on the XMPP side, where one can choose from several possible implementation options.An article on how to use resource sharing into Zotonic will be convered in a next article. This article will not only cover the setup procedure but will also highlight the implementation details of the responsible <tt>mod_pubsub</tt> module. - ARTEFACT 1 http://www.mediamatic.nl/id/9411 2010-02-26T13:55:15+01:00 2 days of Fosdem'10...

Fosdem, the Free and Open-Source Developer's European Meeting, is held every year in Brussels. It's a free event, attracting thousands of open-source developers from all around the world. In this article I'll talk about the stuff I've learned during these two days.

<h2>Saturday</h2> Arrived at 10 am at Brussels central station, meeting Ralph in his hotel with some of the XMPP gang. Nice seeing the folks whose blogs I read in Real Life (tm). Went on the bus to the FOSDEM site. Very impressed by the crowds! Fosdem's bigger than I expected: their slogen: "over 5000 developers, 200 talks, 2 days, 0 euros" really pays off. Helped setting up the XMPP booth on the info market, and while I was at it, got my <a href="http://www.cacert.org/">CAcert</a> certification. They really should <a href="http://wiki.cacert.org/InclusionStatus">accept</a> the CA root certificate into all browsers! Oh well. At 13:00 went to the XMPP devroom, which was packed. Nice to see such a big interest. Basically, I sat through all talks: The Extraordinary, Magical Powers and Possibilities of XMPP - General introduction on the XMPP protocol and its extensions. Ofcourse, having read the <a href="http://oreilly.com/catalog/9780596521271">XMPP book</a>, I was already familiar but always nice to have it reiterated. Stump the XMPP Experts! Open Q&A - Open Q&A session. First question: "What is the best XMPP server?" was received with laughter: The kind of server obviously depends on the requirements of your application. Building Federated Social Networks on XMPP - Skipped on this one to get lunch and sit in on a session on the <a href="http://savannah.gnu.org/">GNU Savannah</a> project. XMPP and the Social Web - Interesting talk by 2 guys from Vodafone (Maastricht based) which presented their platform and proposed 4 XMPP extensions for the improvement of doing social networking over XMPP. We should be in touch with these guys! Ralph will probably tell more about this. PubSub Gone Wild: Info Sharing at Mediamatic - Next on was Ralph, which presented our work with Anymeta, Open-CI (ofcourse, in particular its XMPP integration), the IkTag and its social applications. Mirabeau: Creating Personal Media Networks - 2 guys decided to build a uPNP bridge for XMPP to limit the fact that uPNP devices only work on the local net. Very cool stuff, although the talk made quite some assumptions about the knownledge of uPNP and did not really go into the XMPP details. But their technology really rocks, and should function transparently. You Got Your XMPP in My Website: Using Strophe.js for Fun and Profit - Jack Mofitt (of <a href="http://www.collecta.com/">Collecta</a> fame) intro'd and demo'd his javascript framework (more on this below). The last three talks got into details on the extension of the <a href="http://xmpp.org/extensions/xep-0166.html">Jingle</a> XMPP subprotocol for the establishment of out-of-band TCP streams between XMPP clients (e.g. for a/v conferencing). Amongst others, a guy from <a href="http://www.collabora.co.uk/">Collabora</a> demoed his implementation of <a href="http://dgh.livejournal.com/12711.html">multi-person video conferencing</a>. <h2>Sunday</h2> Attended talk on <a href="http://reprap.org/">Reprap</a>, the open-source, self-replicating 3D printer. The project is still in its early stages but already shows great results. Adrian Bowyer was funny and raised good, even philosophical questions on the origins of the materials we use in our everyday life. Next up was a talk in the NoSQL room for talks about <a href="http://hadoop.apache.org/hbase/">HBase</a> and <a href="http://www.mongodb.org/display/DOCS/Home">MongoDB</a>. But the room was so overly crowded that I did not manage to get in. Alternatively I sat down in one of the Hacker rooms with Ralph and some of the XMPP guys including Jack Mofitt. Familiarized myself with Jack's excelent <a href="http://code.stanziq.com/strophe/">Strophe.js</a>, a pure Javascript library for doing XMPP (over HTTP/BOSH) straight from the browser. I managed to port our livestream backchannel to use this technology, instead of the twisted local-server based Wokkel+Nevow solution. This should be interesting to deploy on our Anymeta websites to get realtime updates on stuff that's happening (status changes, Ik* apps, et cetera). Fancy stuff! With the network failing in the hacker room, I moved out to the big Janson hall to follow a talk on <a href="http://hadoop.apache.org/">Hadoop</a>: a framework for large, distributed data processing including a distributed file system and a map/reduce framework. The talk provided a nice overview of the different subprojects of which Hadoop is composed, but was on the whole quite superficial. Next on: Dave Recondon et al. from Facebook, speaking about "Scaling Facebook with Open Source". At this point, the massive Janson hall was packed with developers. Dave provided some insight in how their platform grew out from a regular LAMP setup into the multi-server setup, serving 400 million users. Nice to see that they still are using PHP and MySQL, giving me good hopes that it *is* possible to scale that setup. However, as in the previous talk, they did not go into specifics but more only showcased the aspects of their technologies that they opensourced. Of particular interest for Mediamatic can possibly be their Hip Hop PHP compiler, the <a href="http://github.com/facebook/scribe">Scribe</a> server for maintaining logs, and their pure-javascript <a href="http://github.com/facebook/connect-js">connect-js Facebook API</a>. One interesting aspect they mentioned, though, was the fact that all Facebook database queries are kept as simple as possible, so the Memcached servers basically serve as index servers, and they do all joins on the PHP side. Probably they can because of the speed gained by precompiling the PHP with Hip Hop. Final talk of the conference for me was about Status.net, by its founder, <a href="http://status.net/">Evan Prodromou</a>. Formerly known as Laconi.ca, they provide the identi.ca opensource social status platform. They have opened their code so that everybody can run their own, federated social networking platform around status sharing. The platform provides all kinds of hooks to tap into the mainstream proprietary social platforms like Twitter and Facebook, making it possible to share your updates with the world. One of the things they do provide is XMPP support. Evan mentioned the emerging <a href="http://xmpp.org/extensions/xep-0277.html">Microblogging over XMPP</a> standard (XEP 0277). He also got into quite some detail about how the status.net architecture (which is also LAMP) deals with scalability issues, like deferred processing of tasks and denormalizing complex database joins into inboxes per user. <h2>Breakdown</h2> All and all, it was a very fruitful weekend. On the XMPP side I learned a lot about new applications of XMPP and about future directions of the social web; the architectural/scalability talks on sunday got me thinking about the architectural challenges we face with Anymeta currently. But that's another topic: I'll blog again in the coming period on these. conference report Arjan Scherpenisse http://www.mediamatic.nl/id/2555 ARTICLE text 1