News for July 2010

Scripted Interfaces

“What is information to some, is static to others” – attributed to Cloude Shannon

A question that has been maddening web- and interface designers for years is how interfaces are described. An interface consists, in short, in three basic elements. 1) the design, 2) the interaction 3) the functions So, a button can be red (design) change color when hovered over (interaction) and lead to another page (function). These three elements need to be unified into one language that describes all elements, or at least connects to another language that describes parts of the three main elements. Since the dawn of web design these different elements have been encoded into HTML.

<style>
a { color: red }
a:hover { color: yellow }
</style>
<a href="somedomain.com">button</a>

A red button, changes color on roll-over, leads to some domain when clicked.
Style, the design, has been separated, quite early, from the actual function (ie. where the link leads) using CSS, or cascading style sheets. Which is a good thing. But where does interaction go? (in this case, into the CSS) and the function? The actual function; the code that tells your browser to go and fetch an internet address and parsed it as HTML, is not there, that’s why we call HTML a Markup Language and not a programming language. Strictly speaking, the actual function is burrowed somewhere in your browser. If HTML does anything of the three interaction elements it’s simply connecting design (CSS) with interaction (in this case also in CSS) and function (int he browser)

In Flash one would write something like:

var someButton:SimpleButton = new Simplebutton()
someButton.addChild(overstate.png)
someButton.addChild(normalstate.png)
someButton.addEventListener(MouseEvent.RollOver, function(e) { // show overstate } )
someButton.addEventListener(MouseEvent.RollOut, function(e) { // show normalstate } )
someButton.addEventListener(MouseEvent.Click, function(e) { NavigateToURL( new URLRequest("someDomain.com") ) } )

Now this code wouldn’t parse, and strictly speaking “NavigateToURL” is also something of a shortcut, but as the Class of NavigateToURL is defined within the Flash virtual machine, we’ll accept that flash renders both design (overstate.png and normalstate.png are images), interaction (RollOver and RollOut) and the actual function (NavigateToURL).

The problem is that the first example can be understood, quite effortlessly by any graphic designer building a web page and the latter one cannot; it’s programming code and graphical designer get all icky when they get within ten feet of programming code.
To make things even worse, the actual programming of most websites is done on the server side of the web, giving the designer only generated HTML which has to be scripted in CSS. This works to a certain extend, but making CSS is tedious and rigorous work

Flash, even though it started out as an animation designer application, is mostly coding. To meet the current demands of frameworks and server side code Adobe has tried to bridge the coding and HTML gap with Flex, which looks a bit like:

<?xml version="1.0" ?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
 <mx:HTTPService id="httpRSS" url="http://www.petefreitag.com/rss/" resultFormat="object" />
 <mx:Panel id="reader" title="Pete Freitag's Blog Reader" width="500">
  <mx:DataGrid id="entries" width="{reader.width-15}" dataProvider="{httpRSS.result.rss.channel.item}" cellPress="{body.htmlText=httpRSS.result.rss.channel.item[entries.selectedIndex].description}">
    <mx:columns>
      <mx:Array>
        <mx:DataGridColumn columnName="title" headerText="Title" />
        <mx:DataGridColumn columnName="pubDate" headerText="Date" />
      </mx:Array>
    </mx:columns>
  </mx:DataGrid>
  <mx:TextArea id="body" editable="false" width="{reader.width-15}" height="300" />
  <mx:Button label="Load Blog Entries" click="{httpRSS.send()}" /
 </mx:Panel>
</mx:Application>

Which is interesting, but it still doesn’t combine all three functions. What I especially dislike about it that it is Code, even the ‘Markup part’ of it, still reads like code, not like design. It just wants to implement to many features.
Now adobe had build a product, called Catalyst, which tries to render a photoshop document into this Flex-code, allowing the programmer to work on it, after it is designed, but this is till bulky, sluggish code at best.

So I’m a big fan of designing script and markup languages for content platforms, allowing the designer to work as free as possible, within a set framework. With readable markup. Now I tried this twice, and I failed the first time, and I got a bit further the second time.

The first script language describes Nltracks objects and looks something like this:

<relatedContent>
 <win winX='0' winY='0'/>

 <!-- graphical elements -->
 <!-- background -->

 <backgroundImages>
 <image name='topPic' url='_styling/elements/gerelateerd/video/weblink_bg_top.png' />
 <image name='middlePic' url='_styling/elements/gerelateerd/video/video_bg_middle_stretchme_V.png'/>
 <image name='bottomPic' url='_styling/elements/gerelateerd/video/video_bg_bottom.png'/>
 </backgroundImages>

 <!-- content -->
 <contentPlace contentPlaceX='0' contentPlaceY='0' />
 <listPlace listPlaceX='20' listPlaceY='65' />

 <icon iconX='30' iconY='2'/>

 <contentImages>
 <image name='button1_out' url='_styling/elements/gerelateerd/weblinks/button_bezoek.png'  />
 <image name='button1_over' url='_styling/elements/gerelateerd/weblinks/button_bezoek_mo.png' />

 <textField name='title' setX='85' setY='3' setW='130' setH='40' sharpness='10'/>
 <textField name='subTitle' setX='85' setY='3' setW='130' setH='30' sharpness='10'/>    <!-- let op, subtitle is nu related aan textheight van de 'title' -->
 </textFields> 

 <topTextContent>Weblinks bij:</topTextContent>

 <id_object>tags</id_object>
 <relatedURL>weblinks/related</relatedURL>

 <refreshTime>10000</refreshTime> <!-- microseconds -->
 <reverse>false</reverse>
 <maxItems>2</maxItems>

</relatedContent>

This describes a “content window” on a certain point on a infinite Canvas website and its jabberish, sluggy, big and non-transperant. This is clearly a poor languate. It even needs an extra CSS file for styling, splitting text and image design. But, truth be told, CSS is so ubiquitous nowadays that I really don’t see a way around it.

Next, I tried to make a more universal language to describe Canvas objects. I build a system called “blokkendoos”, which allowed more freedom and features an editor to build with.

blokkendooseditor

The editor allowed for editing a background, and adding elements like text, mailforms, images, links etc. unto them. Now as an editor this worked pretty nifty, but of course at the end of the day it still shits XML;

<canvasObject>
 <win winX="294" winY="301"/>
  <deeplink>#/custom/winacties 2</deeplink>

   <object width="1108">
   <backgroundImages>
    <image name="topPic" url="blokkendoos/images/header/1180_large_header.png"/>
    <image name="middlePic" url="blokkendoos/images/body/1108_large_body.png"/>
    <image name="bottomPic" url="blokkendoos/images/footer/1108_large_footer.png"/>
    </backgroundImages>

    <component type="Image" place="static" id="0">
      <settings targetWidth="1108">
       <position x="7" y="0" w="266" h="273"/>
       <source>http://data.nltracks.nl/live/blokkendoos/win_alain.png</source>
       <link enabled="true" target="_self">#/nieuws/19220/Winnen! Het nieuwe album van Alain Clark</link>
      </settings>
    </component>

    <component type="Image" place="static" id="1">
       <settings targetWidth="1108">
         <position x="7" y="1" w="266" h="273"/>
         <source>http://data.nltracks.nl/live/blokkendoos/winfrom.png</source>
         <link enabled="true" target="_self">http://www.nltracks.nl/#/custom/frommermann</link>
       </settings>
   </component>
 </object>

 <object/>

 <tags usetags="false"/>
</canvasObject>

Now this actually gets usefull; it describes something called “objects” and “components” and then it combines HTML like terms and positioning information.
still, it is quite rigorous about background positioning and has strict descriptions of certain types.

So, for Marduq, I’m building a menu-script that allows you to spawn marduq-objects into place. These are build with any object flash can handle, video audio, html, css and whatnot. It needs to position a DVD like menu, with buttons and text; and I’m thinking about something like:

So I came up with something like this:

scriptable

Which is described like this:

<marduq>

 <box 0="#0" y="#-1" width="500" height="500" bgColor="0xbb3333" alpha="0.4" >
        <image url="nltracks_radio_thumb.jpg" x="#0" y="#-0.6" scale="1"/>
 </box>

 <image url="couvsdsc01es2.jpg" x="#1" y="#0" scale="1">
     <image url="viva espana.jpg" x="#-1" y="#0" scale="0.3"/>
     <image url="nltracks_radio_thumb.jpg" x="#-1" y="#-1" scale="1">
          <image url="nltracks_radio_thumb.jpg" x="#-1" y="#0" scale="1"/>
          <image url="nltracks_radio_thumb.jpg" x="#-1" y="#1" scale="1"/>
     </image>
 </image>

 <button type="toggle" action="play_pause" x="500" y="500" width="250" height="250" bgColor="0x4455dd" alpha="0.5">
      <image name="normalState" url="videoplayer_fout_.png" x="#-1" y="#-1" scale="0.4"/>
      <image name="overState" url="videoplayer_fout_.png" x="#-1" y="#-1" scale="0.4"/>
      <image name="doneState" url="videoplayer_fout_.png" x="#-1" y="#-1" scale="0.4"/>
 </button>

</marduq>

(actual script is longer) What this script does is spawning certain things on a Canvas (infinite or regulare browser window). It then positions it and scales it. All the argumets are optional. If a node is spawned within another node it regards that parent as the ’screen’, which means that the position [0, 0] renders as the top left corner of the parent thing. Extra stuff can be given with a certain thing; for example a button is extended with three images. These define the different states. Also an ‘action’ is defined as an argument, allowing interaction with the platform.

Now the kinky part is that it utilizes 3 (three) different positioning engines, so you never have to worry about resolution anymore. The first one is actual pixels measured from the top left corner. so [100, 100] will place it nicely at a 100 pixel right and 100 pixel down position as measured from the top left corner of the parent object of ’screen’

Now the second one is made up in percentage, and is triggered by adding an %-sign in the location parameter like [ 50%, 50% ], which puts the top right corner of your exactly in the center of your parent object. To position it exacly in the center you will have to subtract half of the objects width and height.

The third one I have called ‘grid spacing’ and is triggers with an #-sign. In this system [ #0, #0 ] defines the absolute center of the parent object, without the need of subtracting width or height. [#-1, #-1] will place your object in the top left of the parent object, and [#1, #1] positions it at the bottom right. The object stays within the parent always. So if you want to position a menu to the right of the Canvas, simply locate it at [#1, #0] which centeres it at the rigth and middle place of the parent object.

Well, for everybody still reading…

I think that is just dandy!

:)

Posted: July 29th, 2010
Categories: media, nerd, research, site, technology, web, work
Tags: , , , , , , , ,
Comments: 2 Comments.

Skydoll, Spaceship just released in Holland

Eh… Hello, Dio. Do you got a minute ?

- Skydoll 1, Yellow city, page 1, panel 2, ( translation from Dutch – XX )

couvsdsc01es2

I’m like the local comic authority ( which reminds me, I’ve to send a CBR archive of Preacher to Gnuif — sec. I’ll get the archive from the great and all inspiring #dasein ) – I’ve about 160 Gigs of comics, and there are few who can name titles that I don’t have, yet. What I like, I buy. That has resulted in a collection of comics that include most of the Vertigo imprint, and that has fought and defeated an Ikea Expedit book shelf. But most of the comic bits are American Comics. Which is great. But I’m European, and the work done in France and other European countries is just as great and from time to time brilliant ( too).

So when I visited Gent gent with my girlfriend I went to what is supposed to be one of the best comic … ehr… bande dessinées shops in a 500 mile radius; the Port. Now when I enter a comic shop, I usually resemble a DJ in a record shop. I know every title, but I haven’t quite listened too all. I know every publishing line, and are always looking for a next release. Yet, strangely enough, when it comes to European comics I used to be quite ignorant. And that bothered me. I was here to learn.

The funny thing was, every album was there, but the one isle was American, Manga, Dutch and Hebrew translated into French, and the other isle was in Dutch and original English. This was a Belgium store after all. I wasn’t interested in the American comics for now, I knew them already, usually torrenting two or three issues ahead of release in print. I was interested in European, for a change.

European comics have a somewhat troubled heritage. Where the American comic line is usually targeted at 15-year-olds, the European market has been targeted at 8-year olds. Of course with it’s great exceptions on both side of the ocean, but the general bulk of the content is targeted at those ages. This means that X-men has to compete with Suske and Wiske and JLA has to compete with Asterix. The sales figures follow the same trends, just different age groups. Donald Duck, by the way, is ubiquitous in both continents.

So as the medium comes of age I see different patterns emerging. Most American graphic novels or let’s say ‘adult comics’, follow a deepened path of superheroes and mutants. European comics however, tell humorous slap-stick and ‘adventure’ stories. There are no real ‘ongoing story lines’ in Europe, les bande dessinées are build on one-shots. Published In series perhaps, but still induvidual albums. Most of which are made by the same authors and artists. Changes of author and artist are rare, as opposed to say the Hellblazer (ongoing) series at DC/Vertigo.

All this, and the fact that Europe exists in a dozen different countries and languages has made theEuropean strip world very fragmented. It’s hard to spot the gems in between the rubbish and so-so-releases. As I was browsing the isles in Gent all these titles flashed in front of me. I had a couple of folders in hand, listing publishing houses, publishing lines and soon-to-be-released items. I was studying this system. I was trying to find that gem to get into.

For American readers, I also bought ‘Blankets‘, ‘Demo‘ and ‘Local‘ there, just because I had vagulue heared about them, and because they were on just display. This was clearly a comic shop that was good at presenting the title you don’t want to mis.

Finally, back in the shop; under the sign: “just In, part three!” was a title that completely, utterly and totally blew my mind.

Skydoll

I’ll be damned. That is probably the longest introduction that I’ve ever written for a comic review, but I think it was worth it.

Actually, I’m not planning on bothering you with all the details. You need to go out, and buy the fourth album (yes,  I’m counting the ’spaceship’ collectors edition an album, screw you, buy it ). Skydoll is probably one of the best titles to hit the market in 10 (ten) years. And here is why:

Skydoll is created by Italians. And you may not know this, but 70 percent of (European) Disney comic titles are actually created in Italy. Italy has a large population of great comic artist and a lot of them are employed, or were employed by Disney. These people are drawing parts of cartoons, parts of comics (Mickey magazine, the Witch comic and animation empire etc. etc.) they are amazing artist. But you never hear from them because,  they work for Disney. There is only one autograph you will see.

skydollpreview1

Now two of these artist have broken free and decided back in 1998 to do a series of their own and publish it in France, which has one of the best comic cultures around. They came up with a cyber-gothic-doll-pink-cute-catholic-duckburg-sci-fi-world that is the world of skydoll. This has relegion, sex, punk, cute, fluffy, goth, new age, cyber echo’s all over the place. Did I mention it was cute too? By God, man; these people are amazing. Do the image search!

I’m really at a lack of words here. The stuff is great. And the artists, Alessandro Barbucci and Barbara Canepa don’t even have wiki entries.

Finally, for the American readers. Marvel agrees with me, and says this is great stuff. So you people can BUY it! Actually, the new American line is much more interesting then the current European line, and Marvel is probably publishing the actual fourth album first. In English. And Marvel does it better; in the Dolls Factory (ordered it, but torrents beat the shop) they published interviews with the makers and a 60+ page album with the complete sketch of the original first album. (w00t!!!)
And there is still better stuff coming in. Barbucci and Canepa are taking their friends with them, like the amazing Bengal. (sic!)

Posted: July 22nd, 2010
Categories: comics, nerd, web
Tags: , , , , , , , , , ,
Comments: No Comments.

Important Service Announcement

YouTube Preview Image

Yes. This may be just what you needed to know.

Posted: July 21st, 2010
Categories: philosophy, weird
Tags: , , , , ,
Comments: No Comments.

Google is Hitting on Me

But What is it ?

google_is_hitting_on_me_smaller

Yup, that resolves to Google allright

Someone or something up at Google HQ up in Mountain View CA apparently thinks NLtracks.nl is a pretty cool site.

That is to say he, she or it has been visiting and navigating it for some time today, and it has been doing so with a device that has a 1024×1024 pixel resolution, and no known Browser or known Operating System.

So, what device has Flash capabilities, a 1024×1024 resolution and runs on some weird software, at Google ?

Posted: July 20th, 2010
Categories: nerd, research, site, technology, web, weird, work
Tags: , , , , , , , , , , , , , , ,
Comments: 3 Comments.

Here is what a winner looks like

Viva España !

Now, this is what a winners’ welcome looks like;

YouTube Preview Image

Now stop whining about some sodding bastards that had to kick and scrape their second place together in the world cup. It’s a fucking disgrace.

Posted: July 13th, 2010
Categories: Algemeen, media
Tags: , , , , , , , , ,
Comments: No Comments.