/* usemedia.com . joes koppers . 06.2005 */
/* thnx for reading this code */


/* transfer mysqldata to local script */

items = new Array();

items[0] = new item(41,'Smart Newsreader',0,5,1,'web application','16/04/08','16 April 2008','OBA (Public Library Amsterdam)','javascript, AJAX, JSON','Joes Koppers, EDIA','Interaction design for an online language education tool','Created for <a href="http://www.educatietechnologie.nl/" target="_blank" >Stichting Educatie Technologie</a> / <a href="http://www.edia.nl/" target="_blank" >EDIA</a>.<br><br>Interface / interaction design and front-end development for ALANE Smart NewsReader, an application for language learning through current news bulletins. A user reads at his own level and is supported by translations and example sentences. Each read text is concluded by a short auto generated task.<br><br>The design consists of a single page approach, with three distinct vertical sections, each with a number of horizontal sliding subpages. Technically: all html is javascript generated and communication with the (java) server is done through JSON protocol.<br><br>The online application is currently only available at the public library of Amsterdam (<a href="http://www.oba.nl/index.cfm/t/Slimme_Nieuwslezer/vid/5708CE46-03BA-B94F-F2785962BBCF3DAB" target="_blank" >OBA</a>)<br><br>','188,189,190,191,192','newsreader^course overview^lesson support^lesson task^progress','326,1060,1060,1060,1060','117,733,733,733,733','','','');

items[1] = new item(39,'MediaGuild',1,3,3,'website','20/07/07','20 july 2007','online','HTML5, AJAX, JSON, usemedia CMS','Joes Koppers','Website for MediaGuild, using new standards from HTML 5 proposal','Created for <a href="http://mediaguild.com" target="_blank" >MediaGilde / MediaGuild</a>, an organisation that supports development of creative talent and entrepreneurship in ICT and new media.<br><br>The interface shows four overlapping sections with the MediaGuild logo in the center. Content items are represented as colored circles, placed around this center, their color defined by the section or overlap they are positioned in.<br><br>A section can be \'selected\' — by clicking the section name — revealing more items in it. The same effect can be achieved by dragging the M logo around. Clicking an item will \'open\' it, and shows its full text and media contents.<br><br>The site is a first in using the CANVAS element, as proposed in the <a href="http://www.whatwg.org/specs/web-apps/current-work/" target="_blank" >HTML 5</a> standard by <a href="http://blog.whatwg.org/faq/" target="_blank" >WHATWG</a>. MSIE compatibility is provided by Google\'s <a href="http://excanvas.sourceforge.net/" target="blank" >ExplorerCanvas</a> project.<br><br>Back-end used for the project is usemedia CMS. Communication between front- and back-end is done through JSON protocol.','173,174,175,176','color-overlap sections^default layout^section selected^content item expanded','1020,1020,1020,1020','690,690,690,690','','','');

items[2] = new item(40,'bliin',2,3,3,'website, mobile software','\'07',' 2007','online','dhtml, javascript, AJAX','Stef and Selene Kolman (concept), Just van den Broecke (original server), Tomas van der Wansem (mobile and server), Joes Koppers (interaction design, web front-end)','Bliin is a live community that lets you share images, audio, text and video from wherever you are, and it\'s shared with the world on the bliin Google map','Created for <a href="http://bliin.com" target="_blank" >bliin.com</a>, a social network for sharing personal experiences, in real-time, located on a world map.<br><br>The design concept is built around two \'i\' shapes — representing you vs. other users — positioned on both ends of the screen.<br><br>The world map forms an always present backdrop on which users and shares are displayed. All interface controls are initially folded into a compact bliin circle in the top left corner. The interaction with user shares — commenting, linking, tagging — all takes place in the expanded view of the medium itself at its geo location on the google map.<br><br>The previous version of <a href="http://bliin.com" target="_blank" >bliin</a> included a mobile application, used to broadcast your live location, adding photo\'s and browsing your direct surroundings. Currently there\'s a dedicated <a href="http://m.bliin.com" target="_blank" >mobile site</a> for your handset.','177,193,194,195,196,197','bliin navigation^world view^map options^user share^user comments^user to user','205,1024,1024,1024,1024,1024','189,610,610,610,610,610','','','');

items[3] = new item(37,'OOGlive',2,3,4,'Live Interface','29/09/06','29 September 2006','Westergasfabriek, Amsterdam','Flash Media Server, .net, 1x server, 4x pc, 3x laptop+webcam','Joes Koppers, Bente van Bourgondiën (Flash prg)','an interactive interface to multiple live news streams and related artworks','Created for OOGlive event — artist commentary on the news — september 29, Westergasfabriek, Amsterdam. Presented by <a href="http://www.volkskrant.nl" target="_blank" >Volkskrant</a> / <a href="http://www.paradiso.nl" target="_blank" >Paradiso</a>.<br><br>The interface appears as a television mosaic, projected on a large screen, showing 18 channels/sources playing simultaneously. The sources consist of live streams (CNN/NOS/Al Jazeera), live webcams, a live camera feed, chat windows and the artist contributions to the program. On top of the mosaic, continuous scrolling RSS headlines are shown, altering between multiple online sources.<br><br>At various moments in the program, the static mosaic (grid) transformed into a three dimensional world — a spinning globe, controlled by mouse movement —  revealing many more sources to choose from. When collapsed the world produces a new selection of 18 sources on the grid.<br><br>Any source can be dragged onto one of the four \'channels\' at the bottom of the interface. These channels represent four more projected screens, placed on the side walls on location. The side-screens are also used to present \'breaking news\', during which the interface \'world\' expands, resulting in a viewers perspective from inside the globe.<br><br>More info on the OOGlive event can be found at <a href="http://ooglive.com/uk_ooglive_home.html" target="_blank" >ooglive.com</a>, including a small (non 3D) version of the interface.','153,156,157,165,166,167,168,169','breaking news^presenting the interface^browsing the world^a live contribution^screen: the mosaic^screen: grid with contribution^screen: spinning the world^screen: breaking news','720,720,720,720,1024,1024,1024,1024','576,576,576,576,819,819,819,819','151,164','live recording,interface','http://usemedia.com/movies/OOGlive_live_short.mp4,http://usemedia.com/movies/OOGlive_screen.mp4');

items[4] = new item(35,'Touch me',2,2,3,'interactive touchscreen','09/03/06','09 March 2006','Stedelijk Museum, Amsterdam','Quad G5, cameras, Macromedia Director, custom IR touchscreen','Joes Koppers, Arjen Keesmaat (touchscreen)','Touchscreen game in which visitors of the museum become targets, while other visitors can deform and destroy them','Created for "<a href="http://www.stedelijk.nl/oc2/page.asp?pageid=1260&url=/detectflash.asp" target=_blank >Next Level, Art Games & Reality</a>", Stedelijk Museum Amsterdam, 2006<br><br><i>Touch me</i> is a touchscreen game in which the visitors of the museum step into a game and become "targets" themselves. Other visitors, by touching the screen, can deform and ultimately destroy (explode!) these targets into pixels, erasing them off the screen.<br><br>The 2 by 2.6 meter touchscreen is using the same custom touch technology as developed earlier for <a href="javascript:do_search(\'USETEXT, please touch\')" >USETEXT, please touch</a>, programmed by <a href="http://arri.nl" target=_blank >Arjen Keesmaat</a>.<br><br><i>A special thanks to Fabian Roth for providing the pinch mathematics.</i><br>','146,147,148,149,150','visitors are targets^visitors interacting^visitor being distorted^visitor\'s head blown off^exploding pixels','1280,1280,1280,1280,1280','960,960,960,960,960','170,171,172','visitors playing,recorded screen,multi targets','http://usemedia.com/movies/touchme_live.mov,http://usemedia.com/movies/touchme_screen1.mp4,http://usemedia.com/movies/touchme_screen2.mp4');

items[5] = new item(26,'Respect2All',1,3,2,'website, print','03/10/05','03 October 2005','online, dutch schools','dhtml, javascript, Flashcomm server','Luna Maurer, Joes Koppers, Bente van Bourgondien (Flashcomm)','Educational project, making possible for schoolkids to record and publish videostatements about respect online','A Dutch educational project about <i>respect</i>, created for stichting Respect2all / Oranjefonds.<br><br>A collaboration with designer <a href="http://www.poly-luna.com" target=_blank >Luna Maurer</a><br><br>Based on a simple grammar game, the designconcept for this project consistently uses 4-word statements following a strict structure: <i>subject - verb - adjective - object</i>. This mainly typographic style uses the latest font by <a href="http://www.underware.nl" target=_blank >Underware</a>, <i>Auto 1</i>.<br><br>The website makes it possible for all schoolkids to record short videomessages (statements), via a free of charge distributed <b>webcam</b> and the \'<b>statement recorder</b>\', a password protected part of the website that can capture video/audio of any locally connected webcam and stream it to the server. The technology used for this is <a href="http://www.macromedia.com/software/flashcom/" target=_blank >Macromedia Flash Communication Server</a>.<br><br><br>site: <a href="http://www.respect2all.nl" target=_blank >www.respect2all.nl</a><br>print design: <a href="http://usemedia.com/downloads/lesbrief.pdf" target=_blank >lesbrief.pdf</a><br><br>(all content is in Dutch)<br>','109,110,111,112','lesbrief cover^website homepage^website videostatements^statement recorder','566,978,978,978','751,651,651,651','','','');

items[6] = new item(9,'DITVOORST DVD-box',1,3,1,'7 x DVD + book','22/03/05','22 March 2005','Dutch book/video stores','DVD, print design','Thom Hoffman, Joes Koppers','The complete collection of Dutch director Adriaan Ditvoorst films on DVD','Release by <a href="http://www.totalfilm.nl" target=_blank >totalfilm</a>, all in Dutch.<br><br>Deze 7 DVD-box bevat alle films - 4 speelfilms en 5 korte films - van Adriaan Ditvoorst (1940-1987) in de allernieuwste digitaal gerestaureerde versies; PARANOIA (\'67), FLANAGAN (\'75), DE MANTEL DER LIEFDE (\'78), DE WITTE WAAN (\'83) en de korte films IK KOM WAT LATER NAAR MADRA (\'65), CARNA (\'69), ANTENNA (\'69), DE VAL (\'70) en DE BLINDE FOTOGRAAF (\'72). Een uitgebreide ge&iuml;llustreerde biografie in boekvorm - MORGENSTER - plaatst de filmer Ditvoorst in een historische context.<br>Twee unieke DVD\'s completeren de box: DE DOMEINEN DITVOORST, de bekroonde documentaire uit 1992 en <a href="javascript:do_search(\'ditvoorst solitary genius\')" >DITVOORST SOLITARY GENIUS (A LIFE IN PIECES)</a>, een interactieve DVD gemaakt door Thom Hoffman en Joes Koppers. Op deze DVD maakt u op verrassende wijze kennis met leven en werk van Adriaan Ditvoorst in meer dan honderd fragmenten uit diens intrigerende oeuvre.<br><br>','63','box design','1280','735','','','');

items[7] = new item(3,'Frequency 1550',1,4,2,'interaction design','02/05',' February 2005','Amsterdam, WAAG','Mobile phones, Java, Flash, GPS, GRPS, UMTS, Keyworx platform','development team @ WAAG Society','Complete (interaction) design for a mobile game pilot project','<a href="http://www.waag.org" target=_blank >Waag Society</a> developed a \'mobile learning game\' pilot together with IVKO, part of the Montessori comprehensive school in Amsterdam. It\'s a citygame using mobile phones and GPS-technology for students in the age of 12-14. It is a research pilot examining whether it\'s possible to provide a technology supported educational location-based experience. In the Frequency 1550 mobile game, students are transported to the medieval Amsterdam of 1550 via a medium that\'s familiar to this agegroup: the mobile phone. The pilot took place in 2005 from 7 to 9 February and was supported by KPN Mobile\'s UMTS network.<br><br>Try the functional design <a href="javascript://demo" onclick="window.open(\'http://freq1550.waag.org/design_gp.html\',\'demo\',\'width=400,height=600,scrollbars=0\')" >demo</a> (use a PNG supporting browser) and <a href="http://freq1550.waag.org/design_hq.html" target=_blank >browse</a> an overview of interface designs. More at project URL: <a href="http://freq1550.waag.org" target=_blank >freq1550.waag.org</a>','9,10,11,12,13,14,15','Mobile phone interface - Menu^Mobile phone interface - Map^Mobile phone interface - Media^Headquarters interface - Map^Headquarters interface - Assignments^Headquarters interface - Browser & Media^Headquarters interface - Modern map','293,293,293,1024,1024,1024,1024','538,538,538,768,768,768,768','','','');

items[8] = new item(2,'ITEMS 6',1,3,1,'publication','12/04',' December 2004','Netherlands + online','','Max Bruinsma','Portfolio article in ITEMS magazine','Max Bruinsma was asked by Dutch design-magazine ITEMS to write a text about the work of USE / Joes Koppers. It was published in ITEMS nr. 6, december \'04 - january \'05.<br>The complete text (in Dutch!) can be read at <a href="http://maxbruinsma.nl/items/index.html?koppers.htm" target=_blank >maxbruinsma.nl</a>.<br>','8','ITEMS 6 cover','844','1024','','','');

items[9] = new item(8,'DITVOORST solitary genius',2,3,3,'DVD','28/09/04','28 September 2004','Netherlands','','Thom Hoffman & Joes Koppers, Marco Vermaas (authoring), Willem Thijssen & Nynke Rusticus (production)','Interactive DVD about life and work of Dutch filmmaker Adriaan Ditvoorst','Presented at Dutch Film Festival Utrecht, 2004. Concept created in <a href="http://stifosandberg.stimuleringsfonds.nl/" target=_blank >STIFO@Sandberg</a> workshop 2001/2002.<br><br>A collaboration with filmmaker and fotographer Thom Hoffman. <br><br>DITVOORST solitary genius is an interactive documentary about life and work of Dutch filmmaker Adriaan Ditvoorst. The viewer is invited to browse through a labyrinth of images, clips, that are connected via thematic words. These words appear on the four sides of the screen, while watching the filmfragment. Each side is connected to the corresponding <i>direction</i> key on the remote control, which means the viewer can navigate the whole DVD (131 minutes total) by solely using the \'up\', \'down\', \'left\' and \'right\' arrowkeys.<br>Besides the over 100 fragments large labyrinth, the DVD offers a \'biography track\', a chronological overview of Ditvoorst\'s life and films explained in interviews with his friends and collegeas.<br><br>Read more in this <a href="http://stifosandberg.stimuleringsfonds.nl/pdf/14_Ditvoorst_solitary.pdf" target=_blank >pdf</a> (article in Dutch).<br><br>The (short) online version of this interactive documentary can be found at <a href="http://www.ikonrtv.nl/ditvoorst" target=_blank >ikonrtv.nl/ditvoorst</a>. This site uses interactive QuickTime and offers a simular navigation as found on the DVD. (content in Dutch)','55,56,57,58,59,60,61','title^De Zoeker^De Zoeker^clip from Flanagan^clip from Paranoia^clip from De Witte Waan^Biography Track','764,764,764,764,764,764,764','572,572,572,572,572,572,572','','','');

items[10] = new item(5,'USETEXT, please touch',2,2,3,'interactive projection','03/09/04','03 September 2004','Stedelijk Museum, Amsterdam','G5, IR-cam, Macromedia Director, webcamXtra','Joes Koppers, Arjen Keesmaat (motiontracking)','"this is not a text, this is not a paper..." touchscreen installation based on usetext.com','Created for the Stedelijk Museum 2004 "Municipal Art Acquisitions Graphic Design". <br><br><i>USETEXT, please touch</i> is a 2,70 by 1,90 meter touchscreen, based on the online text tools at <a href="http://usetext.com" target=_blank >usetext.com</a>. It shows an alernate version of the layered text browsing tool#01.<br>The installation uses a backprojection and a custom developed infrared touch sensing mechanism. The screen does not have to be actually touched, at certain distance the text already reacts on the users hands/body. Every object (hand, arm etc) pointed at and nearby the screen will produce an interactive \'cursor\', making the installation (unlimited) multi-user. The touch sensitivity is based on analizing a video-image produced by a high senitivity black&white camera and infrared lights.<br><br>','21,22,23,24,30,31','installation @ SMCS^multi-cursor touchscreen^user browsing^multi user^custom IR-touchscreen development^IR lights + camera @ SMCS','1280,1280,1280,1280,1024,1024','960,960,960,960,768,768','32,126,127,130','single user,multi user,passing by,touch sensitivity','http://usemedia.com/movies/single_user.mov,http://usemedia.com/movies/multi_user.mov,http://usemedia.com/movies/passing_by.mov,http://usemedia.com/movies/touch_sensitivity.mov');

items[11] = new item(25,'Fused Space',0,2,1,'concept','16/07/04','16 july 2004','online','','Susann Lekås & Joes Koppers','OPTIONALTIME / public expanse wins second prize in international \'fused space\' competition','The third OPTIONALTIME concept "public expanse" wins <b>second prize</b> in international competition themed \'<i>new media in/as public space</i>\'. Read the concept text at <a href="http://fusedspace.org" target=_blank >fusedspace.org</a>. <br><br>A collaboration with videoartist Susann Lekås.<br><br><a href="http://optionaltime.com" >optionaltime.com</a><br><br>','107,108','concept visualization^concept visualization','1024,1024','819,819','','','');

items[12] = new item(24,'browser browser',2,3,2,'website','06/04',' June 2004','Post CS, Amsterdam','dhtml, javascript','Joes Koppers','A browser for the best of the sandberg browsers','Created for the exhibition "10 years Sandberg Design".<br><br>Browserbrowser is a browser for the (best of the) Sandberg students\' browserconcepts, submitted for <a href="http://www.browserday.com" target=_blank >International Browserday</a> over the last years. <br><br>The interface - in good browserday website tradition - consists of draggable and scalable browser windows, that act as (media) filters on the content.<br><br><a href="http://www.nl-design.net/browserday/browserbrowser" target=_blank >browserbrowser</a>','101,102,103,104','content window and media filters^content seen through filters^using the filters^viewing text only','1024,1024,1024,1024','768,768,768,768','','','');

items[13] = new item(16,'Optionaltime2',1,3,1,'interactive projection','19/02/04','19 February 2004','NEMO, Amsterdam','MAX/MSP, softVNS, G5, camera','Susann Lekås & Joes Koppers, Arjen Keesmaat (programming)','An interactive video-installation blending multiple timelines reacting to the movements of the audience','Second in the OPTIONALTIME series, created for the public entrance of <a href="http://www.e-nemo.nl" target=_blank >NEMO</a> science museum, Amsterdam.<br><br>A collaboration with video-artist Susann Lekås.<br><br>This interactive video installation shows three independent timelines blended together as one image and scene. Each timeline is connected to the viewer\'s actions in a separate zone in front of the projection. The audience shift the timelines, and create (\'direct\') an endless story. The movie is filmed at the same location as it is shown and creates an illusion of extended reality.<br><br>all details at <a href="http://optionaltime.com" target=_blank >optionaltime.com</a>','115,116','projection & interactive zones^projection reacts to viewer','1024,1024','768,768','133','docu movie','http://usemedia.com/movies/optionaltime2.mp4');

items[14] = new item(10,'Spirits United',2,2,2,'interactive QuickTime','01/04',' January 2004','online','QuickTime, Livestage pro','Nicolas Provost, Joes Koppers','Interactive documentairy-film build from short clips. The viewer is free to select the amount and order of the viewed clips.','Created for Mixed-Up series of Dutch broadcaster NPS, online at <a href="http://www.cinema.nl/kort" target=_blank >cinema.nl</a>. More about the project in this <a href="http://www.cinema.nl/cinema/specials/magazines/news/index.jsp?portals=3142294&maps=16464606&magazines=17551331&news=18940015" target=_blank >interview</a> (in Dutch)<br><br>A collaboration with Belgian filmmaker Nicolas Provost.<br><br>Spirits United is an interactive interface to a collection of filmfragments made by Nicolas on his trips through Africa and the US. The user is free to watch and combine many different clips and soundtracks, all in one <i>fluent filmic experience</i>.<br>This project uses the interactive capabilities of <a href="http://www.apple.com/quicktime" target=_blank >Apple\'s</a> QuickTime Player.','64,65,66,67,68,69','Spirits United^Spirits United 2^Spirits United 3^Spirits United 4^Spirits United 5^Spirits United 6','800,800,800,800,800,800','600,600,600,600,600,600','70','*Spirits United','http://download.omroep.nl/nps/dekortefilm/mixedup/spiritsunited/spiritsunited.mov');

items[15] = new item(27,'useware.com',0,2,0,'software','\'04',' 2004','online','','','useware.com is a future spot for publishing software tools','<a href="http://useware.com" target=_blank >useware.com</a> is a future location for publishing various software tools.','','','','','','','');

items[16] = new item(22,'My Brave New Window',2,2,1,'videoshow','08/11/03','08 November 2003','','videomixers, DV, DVD, After Effects,  Image/ine','Luna Maurer, Roel Wouters, Maarten Wolzak, Joes Koppers','Live videoshow using 6 beamers creating a panoramic projection','Performed at <a href="http://www.n8.nl" target=_blank >Museumn8</a> (museum night), Scheepvaartmuseum, Amsterdam.<br>Originally created (2002) for Badischer Kunstverein Karlsruhe, Germany. <br><br>A panoramic projection with 6 video beamers. Three videolayers of animated photographs create a three dimensional world which is sampled live to the music. The audience is recorded and placed within this new world.','95,96,97','Museumn8, Scheepvaartmuseum^Museumn8, Scheepvaartmuseum^Museumn8, Scheepvaartmuseum','640,640,640','480,480,480','134','docu movie','http://usemedia.com/movies/MBNW.mp4');

items[17] = new item(23,'Deep Sites',0,2,1,'publication','17/04/03','17 April 2003','','','Max Bruinsma','Book by Max Bruinsma featuring some usemedia works','Max Bruinsma\'s <a href="http://www.thamesandhudson.com/en/1/0500283842.mxs?bf75414de9a755c384d45ace041160c7&0&0&0" target=_blank >book</a> "<b>Deep Sites, intelligent innovation in contemporary webdesign</b>" features usemedia.com and other urls by USE.<br><br><a href="http://deepsites.maxbruinsma.nl/" target=_blank >deepsites.maxbruinsma.nl</a>','','','','','','','');

items[18] = new item(14,'Windows 17.01',1,3,1,'outdoor projection','17/01/03','17 January 2003','Mediamatic Supermarkt','DVD, After Effects','Joes Koppers','Outdoor projection on Mediamatic\'s Supermarkt building. Reallife rendition of earlier windows experiments.','Created for Mediamatic Supermarkt Outdoor projections, 2003<br><br>"<i>Windows 17.01 apparently shows an ordinary exhibition private view behind three ‘windows’, a snack, a drink…. But then, for a brief moment, that image is unhinged as one of the windows focuses on a visitor and follows her through the space. The window breaks away from its fixed position; it even transgresses onto the frames of the other windows, and then settles itself down again. For a moment, the trompe-l’oeil is revealed for what it really is: an optical illusion, a manipulated projection of an earlier recording...</i>"<br><br>(excerpt from Mediamatic article by Geert-Jan Strengholt, read the full article <a href="http://www.mediamatic.net/article-200.6237.html" target=_blank >here</a>).<br>','83','videostill','755','565','84,85','docu movie,windows 17.01','http://usemedia.com/movies/supermarkt.mp4,http://usemedia.com/movies/windows17.01.mov');

items[19] = new item(4,'usetext.com',0,3,2,'online text publishing tools','\'03',' 2003','online','Dynamic HTML, javascript, php','Joes Koppers, Max bruinsma','A series of online text publishing and reading tools','Today a large percentage of online content is (still) text based, and more than often this text is directly transferred from the paper to the screen. Forgetting about the specifics of a digital medium, authors have their online readers scroll through endless pages of linear text, on a screen that is not even pleasant to read from.<br><br><a href="http://usetext.com" target="blank" >usetext.com</a> hosts tools that <i>specifically think about publishing text for a (dynamic) screen</i>. Usetext is a service, subscribers to usetext get a personal online database where they can write, store and publish texts using the usetext tools.<br><br>A collaboration with writer <a href="http://maxbruinsma.nl" target=_blank >Max Bruinsma</a>','','','','','','','');

items[20] = new item(13,'6th Browserday, Amsterdam',0,3,1,'website','17/05/02','17 May 2002','online, Amsterdam','dhtml, javascript','Mieke Gerritzen, Joes Koppers','Website for 6th International Browserday, held in Amsterdam, May 2002.','The website for 6th <a href="http://www.browserday.com" target=_blank >International Browserday</a> was designed around this edition\'s theme: \'Wireless, Rich Air\'. <br>Four \'wireless\' windows move and vibrate randomly onscreen, together creating a view on the content, which is placed on a fixed position on the desktop. The \'wireless windows\' act as viewfinders; being dragged around the screen, they reveal the content underneath.<br><br>A fifth window is provided with links to the different content sections of the site, a click on a subject in this window groups the four \'wireless\' windows together and loads a new content page in their \'view\'.<br><br><b>Turn off any popup-blocking to view this site!</b><br><br><a href="http://www.nl-design.net/browserday/6/" target=_blank >view site</a><br><br>','77,78,79','screen 1^screen 2^screen 3','1024,1024,1024','768,768,768','','','');

items[21] = new item(11,'Optionaltime',1,3,2,'interactive video installation','22/03/02','22 March 2002','Museum De Paviljoens, Almere','Image/ine, MAX/MSP, 2xG4, cameras','Susann Lekås & Joes Koppers, Arjen Keesmaat (programming)','An interactive video installation in which the viewer takes part in the movie','First OPTIONALTIME, created for \'Nonlinear Editing\' exhibition at Museum <a href="http://www.depaviljoens.nl" target=_blank >De Paviljoens</a>, Almere.<br><br>A collaboration with video-artist Susann Lekås.<br><br>"<i>Between reality and fiction, before meets after.</i>"<br>Optionaltime blends the moments present, past and future together into one experience. The viewer plays a role in a movie, sharing an elevator journey with fictive characters. The live image of the audience is captured by cameras in the installation and mixed into the movie, creating non-linear experience of time.<br><br>all details at <a href="http://optionaltime.com" target=_blank >optionaltime.com</a><br><br><br>','118,120,121','videostill^viewer-movie interaction^installation @ De Paviljoens','1024,1024,1024','768,768,768','122','docu movie','http://usemedia.com/movies/optionaltime.mp4');

items[22] = new item(20,'Lectures & presentations',0,2,1,'','\'02',' 2002','various','','','Past lectures and presentations','<b>12</b> Faculty KMT, HKU, Hilversum. Subject: <i>interaction design</i><br><br><b>06</b> <a href="http://www.mediamatic.net" target=_blank >Mediamatic</a> workshop, Amsterdam. Subject: <i>interactive storytelling</i><br><br><b>05</b> Ongoing Series, <a href="http://www.depaviljoens.nl" target=_blank >De Paviljoens</a>, Almere. Subject: <i>browsers</i><br><br><b>05</b> Input festival, Rotterdam. Subject: <i>"DITVOORST - solitary genius"</i><br><br><b>05</b> <a href="http://www.nl-design.net/browserday/6" target=_blank >6th Browserday</a>, Paradiso, Amsterdam. Subject: <i>website</i>','','','','','','','');

items[23] = new item(12,'5th Browserday, Berlin',1,3,2,'website','04/12/01','04 December 2001','online, Berlin','dhtml, javascript','Mieke Gerritzen, Joes Koppers','Website for 5th International Browserday, held in Berlin, December 2001.','The 5th edition of the <a href="http://www.browserday.com" target=_blank >International Browserday</a> carried the theme \'Mobile minded\'. The design of the website plays around this theme, providing four \'mobile windows\' that can be dragged around the screen. Making combinations of the windows by placing them next to eachother reveals the content pages, spread over all four windows alligned.<br><br>A fifth navigational window is added with shortcuts to the content as well. A click on a subject in this window automatically alligns the mobile windows in the correct order and displays the requested page.<br><br><b>Turn off any popup-blocking to view this site!</b><br><br><a href="http://www.nl-design.net/browserday/5/" target=_blank >view site</a>','80,81,82','screen 1^screen 2^screen 3','1024,1024,1024','768,768,768','','','');

items[24] = new item(15,'nl-design.tv',1,3,2,'Interactive QuickTime','\'01',' 2001','online','QuickTime, Macromedia Flash, Livestage pro','Mieke Gerritzen, Joes Koppers','Online interactive TV channel with movies by and collected by NL.Design, Amsterdam ','Created for <a href="http://www.nl-design.net" target=_blank >NL.Design</a><br><br>NL-Design.tv is an online interactive TV channel, that features divers (design) clips in thematic channels. The interface is a custom skinned QuickTime move, allowing the viewer (user) to browse the different channels, watch all programs in a channel, or only selected programs in any order. Everything is on demand available.<br><br>For the demanding viewer, there\'s an iChannel, which allows the user to create his own order of programs, selected from all available channels. The interface is simple drag and drop of program thumbnails until the iCH is conform wishes, after which a click on the \'lean back\' button will commence playback of the created playlist.<br><br>While watching a program, the viewer can have additional info scroll into view, with credits, links to related content and TV-style zap buttons.<br><br>This QuickTime movie integrates Macromedia Flash for the interactive GUI.<br><br><b>NOTE: since version 7.1.3 Flash support in QuickTime is disabled by default. To view nl-design.tv first check \'QuickTime preferences -> Advanced -> Enable Flash\'</b><br><br>','87,88,89,90','channel select^program select^the iChannel^watching a program','650,650,650,650','428,428,428,428','86','*nl-design.tv','http://www.nl-design.net/tv/channel.mov');

items[25] = new item(17,'Lectures & presentations',0,2,1,'','\'01',' 2001','various','','','Past lectures and presentations','<b>12</b> <a href="http://www.nl-design.net/browserday/5/" target=_blank >5th Browserday</a>, Volksbühne, Berlin, Germany. Subject: <i>website</i><br><br><b>10</b> <a href="http://interface.t0.or.at/index.html" target=_blank >Interface Explorer</a>, Vienna, Austria. Subject: <i>browser concept</i><br><br><b>09</b> Catalogue of strategies bookpresentation, Amsterdam. Subject: <i>nl-design.tv premiere</i><br><br><b>05</b> <a href="http://www.actar.es/173a.html" target=_blank >HD new graphics</a> bookpresentation, RAS galleria, Barcelona, Spain. Subject: <i>usemedia.com</i><br><br><b>03</b> <a href="http://www.nl-design.net/browserday/4/" target=_blank >4th Browserday</a>, Cooper Union, New York City, USA. Subject: <i>"Changing the behaviour"</i>, <a href="http://usemedia.com/downloads/changing_the_behaviour.pdf" target=_blank >read pdf</a><br><br><b>01</b> Film- and television studies, UvA, Amsterdam. Subject: <i>Interaction design</i><br><br><b>01</b> <a href="http://www.montevideo.nl" target=_blank >Montevideo</a>, Amsterdam. Subject: <i>new.usemedia.com</i>','','','','','','','');

items[26] = new item(30,'duck',1,2,2,'game, interaction experiment','05/00',' May 2000','online','dhtml, javascript','Nirit Peled, Joes Koppers','a html puzzle featuring an animated bathtub duck','Part of <a href="javascript:alert(\'will be added to archive soon...\')" >Please in Pieces</a>, a series of interactive works/tools, in collaboration with Nirit Peled.<br><br>Being online for more than 5 years, this little html puzzle is still gaining popularity on the net. Put the pieces in the right order to find a surprice...<br><br><b>Turn off any popup-blocking!</b><br><br><a href="javascript://duck" onclick="piece0=window.open(\'http://usemedia.com/done/duck/?id=0\',\'piece0\',\'scrollbars=no,resizable=no,status=no,width=100,height=100,left=100,top=100\');" >start</a><br>','123','solving the puzzle','800','600','','','');

items[27] = new item(7,'archived.',0,3,1,'website','\'00',' 2000','online','dhtml, javascript','Joes Koppers','The original interface of usemedia.com','Late 2000 the first interface of usemedia.com was launched, mainly to link the first interface experiments \'<b>say.</b>\' and \'<b>new.</b>\' The interface used custom transparent scrollbars to \'<i>scroll for less options and more detail</i>\', focussing on one of the four main sections, while scrolling the background image horizontally.<br><br>usemedia.com has since served as a experimental webserver to test and publish a variety of interaction designs. In 2003 usemedia.com was updated to a layout simular to today\'s design, archiving the older interface and works under <a href="http://archived.usemedia.com" target=_blank >archived.usemedia.com</a>.<br><br>','52,53,54','main screen^scrolling...^scrolling...','901,901,901','676,676,676','','','');

items[28] = new item(21,'Lectures & presentations',0,2,1,'','\'00',' 2000','various','','','Past lectures and presentations','<b>11</b> <a href="http://www.virtueelplatform.nl/artefact-1024.715.html" target=_blank >e-culture fair</a>, RAI, Amsterdam. Subject: <i> \'PLEASe in pieces\'</i><br><br><b>10</b> <a href="http://www.browserday.com" target=_blank >Browserday</a> brainstorm, FIT, New York City, USA. Subject: <i>interfaces, browser concept</i><br><br><b>07</b> Film- and Television studies, UvA, Amsterdam. Subject: \'PLEASe in pieces\', webdesign</i><br><br><b>05</b> <a href="http://www.waag.org/browser/browserday_2000" target=_blank >3rd Browserday</a>, Paradiso, Amsterdam. Subject: <i>\'underwater\', videobrowser</i><br><br><b>04</b> <a href="http://www.sandberg.nl/design/archive/newwork2001/" target=_blank >new work 1</a>, Sandberg Institute, Amsterdam. Subject: <i>\'PLEASe in pieces\'</i><br><br><b>03</b> <a href="http://www.waag.org" target=_blank >WAAG</a>, Amsterdam. Subject: <i>\'browser browser\'</i>','','','','','','','');

items[29] = new item(6,'browser',1,4,1,'concept, interactive demo','04/98',' April 1998','Paradiso Amsterdam','Macromedia Director','Joes Koppers','Winning browserconcept presented at the First International Browserday','First prize winner @ First International <a href="http://www.browserday.com" target=_blank >Browserday</a>.<br>More articles: <a href="http://eye.maxbruinsma.nl/31brows.htm" target=_blank >eye magazine</a>, <a href="http://www.mediamatic.nl/magazine/9_2/koppers-browser/koppers-1nl.html" target=_blank >mediamatic magazine</a> (dutch version)<br><br>The basic principle behind Browser was \'expansion\', as in expansion of the access to content. While the browsers we\'re now familiar with usually aim at filtering and personalizing (both of which actually represent a kind of narrowing), Browser also allows random elements to come into play and offers a special interface which quickly gives a broad overview of the content. The principle here is that the more you look, the more you get. Expansion until you get something interesting.	Browser doesn\'t have any fixed interface elements, such as a menu bar or buttons. The layout of the screen depends on how you surf. The mode of navigating through the content is connected to the user\'s actions, which can by turns be aggressive, intent, goal-oriented, fidgety, impatient, slow or fast. In the first version of Browser, the navigation is directly coupled to the mouse\'s speed and movements.<br><br>Browser comes equipped with a large set of functions; the program itself decides which ones to employ depending on the user\'s current \'state of browsing\'. This selection can be called up at any arbitrary moment by pressing a specific key (the \'option\' key), but it can also appear automatically. Functions always appear at the mouse\'s position as so-called contextual menus, and thus they\'re not only coupled to the \'state of browsing\' but also to anything which is located at the mouse\'s position, or any of the position functions as well. An example of this is the \'scroll\' function, which appears when the mouse is moved to a spot where the text or image runs off of the screen.<br><br>One of Browser\'s important functions is the on/off function. You can turn Browser completely off, at which point it only takes you to a site (which you then see full-screen) without doing anything more. The principle behind this is that content providers have to begin investigating the possibilities of the medium. Thus no general navigational standard to which all websites have to defer. <i>The browser should be nothing more than an invisible intermediary. A medium, not an interface</i>.<br><br><b>The fast, impatient user</b><br><br>As the first example of a kind of browsing, we have the fast, impatient user.<br>This user will often not wait until a page has been completely loaded, but instead immediately clicks further.<br>Browser reacts to this by inserting a new \'window\' alongside the requested link, containing either a random or possibly a relevant location. As long as the user continues to browse at high speed, more and more \'windows\' will be opened. Eventually Browser will completely switch over to the "<i>zap state of browsing</i>", in which the windows will no longer display the sites at their actual size, but instead will show small previews.<br>If Browser\'s functions are called up at this point, they will be limited to three options: \'rewind\', \'forward\', and \'stop\', i.e. only the functions which the user now needs. After the program has switched over to this mode, the mouse cursor changes into \'looking\' mode, i.e. your eyes. If it ever becomes possible to actually implement this, the device will look where you look. A white frame then appears around the cursor, your focus area. The more you look around (via mouse movements), the bigger this frame becomes, and the random factor becomes greater within the frame. More and more previews begin to appear.<br><br>The principle behind this is that the more you look, the more you get, up until the point where your attention has been caught, and your focus area becomes smaller (automatically, via less mouse movement). And now Browser generates, around the central point of interest, more previews, associations and relevant sites, relevant to the one you\'re currently looking at. This process repeats itself endlessly so that eventually you get generations of previews, guided by whatever grabs your attention. Ultimately, the user can decide to completely zoom in. This is done by clicking on the relevant preview, which causes the site to appear full-screen, and you wind up back in a so-called \'normal\' browser.<br><br><b>The slow, attentive user</b><br><br>The second example concerns a compensatory style of browsing: a slow, attentive user. This user will stay on the same page for a longer period of time, and will for example scroll in order to go through the remainder of a long text. <br>When Browser detects this behavior, the program switches over to the "<i>layer state of browsing</i>", which means that new links or information will be offered in different kinds of \'windows\', namely \'layers\'. These are placed on top of the current document, and retain a certain degree of transparency. Underlying documents are no longer invisible, but instead remain recognizable. Layers are activated by a simple pass of the mouse. This interface allows the user to easily retain an overview. It also becomes possible for the user to compare different kinds of information very quickly by switching between the various layers. In this way, research into a certain topic, for example, can be simplified.<br>If Browser\'s functions are called up at this point, the user will find that there are quite a few extra options available. One of these extra functions is "locator", a tool which also serves to maintain the overview: it gives a graphic outline, with the help of spheres and lines, meant to represent the spatial structure of the information. Locator indicates where you are situated in regard to other documents or pages. It is a navigational tool within a specific site, and thus not one within the entire Internet. The most important characteristic here is that a distinction is drawn between direct and indirect links. With locator, you can skip certain steps, an expanded form of \'back\' and \'forward\'.<br>At the same time, it\'s also possible to browse via associative links, represented by freestanding spheres — these concern related topics that Browser searches out for you. You can see locator in action at the Rietveld Academy\'s <a href="http://www.gerritrietveldacademie.nl" target=_blank >site</a>, for which this navigation tool was initially developed. ','33,34,35,36,37,38,39,40,41,42,43,44','Introduction^functions^webpage^layered browsing (slow user)^layered browsing (slow user)^layered browsing (slow user)^layered browsing (slow user)^layered browsing (slow user)^zap browsing (fast user)^zap browsing (fast user)^zap browsing (fast user)^zap browsing (fast user)','642,642,642,642,642,642,642,642,642,642,642,642','481,481,481,481,481,481,481,481,481,481,481,481','131','demo movie','http://usemedia.com/movies/browser98.mov');

news = '';
news += '. news<br><br>';
news += '. june 11th — december 08, <a href="javascript:do_search(\'usetext, please touch\')" >Usetext, please touch</a> on show at <a href="http://graphicdesignmuseum.com" target="_blank" >Graphic Design Museum Beyerd</a>, Breda, Netherlands<br><br>';
news += '. winter 07 — spring 08, working on interaction design for <a href="http://7scenes.com" target="_blank">7scenes.com</a><br><br>';
news += '. july 2007, website <a href="http://mediaguild.com" target="_blank">online</a> for <a href="javascript:do_search(\'mediaguild\')">MediaGuild</a><br><br>';
news += '. summer 2007, updates over last 6 months have been slow<br>due to some projects being under NDA...<br><br>';
news += '. fall 2006, navigating experiences at <a href="http://bliin.com" target="_blank" >bliin.com</a><br><br>';
news += '. <a href="javascript:do_search(\'OOGlive\')">OOGlive</a> september 29, now partly archived at <a href="http://ooglive.com/ooglive_home.html" target="_blank" >ooglive.com</a><br><br>';
news += '. usemedia nominated for <a href="http://isoc.nl/awards/" target="_blank" >isoc awards</a> 2006<br><br>';
news += '. march — june 2006, <a href="javascript:do_search(\'touch me\')" >Touch me</a> at  <a href="http://www.stedelijk.nl/oc2/page.asp?pageid=1260&url=/detectflash.asp" target=_blank >Next Level</a> exhibition, Stedelijk Museum Amsterdam<br><br>';
news += '. october 2005, usemedia.com is new.<br>the (almost) complete archive of USE is now available & searchable under <a href="javascript://find." onmouseup="find()">find.</a><br><br>';


/* item constructor */

function item(id,title,w_img,w_txt,h_txt,mediatype,shortdate,longdate,location,tech,people,description,content,images,captions,images_w,images_h,qtls,qtl_titles,qtl_srcs)
{
//	alert('adding item:'+id);

	this.id = id;
	this.title = title;
	this.w_img = w_img//(w_img*120) + (((w_img*2)+(w_img-1))*8) -16;
	this.w_txt = w_txt//(w_txt*120) + (((w_txt*2)+(w_txt-1))*8) -16;

	this.h_txt = h_txt;
	
	this.mediatype = mediatype;
	this.shortdate = shortdate;
	this.longdate = longdate;
	this.location = location;
	this.tech = tech;
	this.people = people;
	
	this.desc = description;
	this.content = content;

	this.images = (images!='')? images.split(","):'';
	this.captions = (images!='')? captions.split("^"):'';
	this.images_w = (images!='')? images_w.split(","):'';
	this.images_h = (images!='')? images_h.split(","):'';

	this.qtls = (qtls!='')? qtls.split(","):'';
	this.qtl_titles = (qtls!='')? qtl_titles.split(","):'';
	this.qtl_srcs = (qtls!='')? qtl_srcs.split(","):'';

	this.searchdata = '';
	
	//defaults	
	this.expanded = false;
	this.found = true;
	this.color = default_item_color;
}