Posts Tagged ‘html’

Teh Drafts I’ve been saving

“Have you ever noticed that other peoples stuff is shit and your shit is stuff?”
- George Carlin

I’ve been saving up an enormous amount of shit from the interwubz that I meant to publish here on the blog but never got around to. So I decided to publish all the rubbish in one go, and make some notes on what the hell you are looking at. This should actually have been published in 4 posts, but most is rather old allready, and to be totally honest its not funny or interesting enough to be published in parts, but together it makes a good read.

Leroy H. Vokes - Quote Wisely and Well

Leroy H. Vokes - Quote Wisely and Well

There is a meme going around on the interwubs  ( also on Facebook ) which lets you make your own band covers. It’s simple:

  1. Go to wikipedia and hit “random page“, this is your artist name
  2. Go to random quotations and pick the last 4 or 5 words from the last quote, this is your album name
  3. Go to Flickr and Explore the last 7 days, the third picture is your album art

Above is my humble first try. Leroy H. Vokes appears to be an American Indian War Veteran from the latter half of the 19th century. And “quoting wisely” and well sounds like good advice to me.

I hear VJ Void is stil trying to automate the process, I’ll let you know when he is finished ;)

Indoor Projection Mapping
by Vision Impossible

YouTube Preview Image

“Mapping”, is the art of using video projection on buildings, while using the architecture in your work. Usually this is done outside. But  Vision Impossible, probably the best VJ team on this planet, has found a way to do it inside. This video was taken in Berlin and is the first indoor mapping project I know of. Amazing stuff!

Procedural Progamming

Procedural programming is the idea that you use formula’s and seeding to generate random variations in existing objects; it’s quite powerful if you want to have infinite landscapes or cities. The latter example was done quite brilliantly in the following video:

YouTube Preview Image
Through A1EX.

Generative Images Through Actionscript and Processing
By Gwen Vanhee

More generated images and videos, in AS3 and processing this time, can be found on Vimeo. Eyecandy, instead of a cityscape. But beautiful eyecandy indeed:

http://www.vimeo.com/17693219 http://www.vimeo.com/14406099

More on the process here and a very handy dandy AS3-image saver class

Vanhee even manages to sell the imagery, to IBM even;
http://www.vimeo.com/10152534

Got the links through Sven.

Yahoo Smut Server

If you loose your job through budget cuts, what do you do. Well whine and bitch about it of course, or you can also re-route the image search of your employer to serve all the happy residents on the internet, disgusting and filthy images through cute thumbnails.

The puppy. Don't click on it

The puppy. Don't click on it

The Register has the whole story the picture was taken from the coverage of TechCrunch

Not so Anonymous

As you may have read earlier I’ve been strolling to the muddy servers that make up Anonymous. I wrote about the terrible software they use to do their fames dDos attacks. These “LOICS” don’t only pingflood Anonymous’ targets like Mastercard, but also reveal the IP-addresses of the 15-year olds that operate them. Sloppy work. Damn sloppy. But XKCD has this nailed in a cute comic, that says it all.

wikileaks

Taken from the amazing XKCD

Holy Shit

YouTube Preview Image

Holy shit indeed.

From Kick Ass To Jack-Ass in under 4 seconds

yes, this cracked me up

Are you scared of this man?

Are you scared of this man?

Real life superheroes, just when you though the world couldn’t get even more ridiculous, a CNN feed pops up telling the tale of daring people wearing spandex and patrolling the streets of American cities. No, this is not a comic, these people are for real. I so wished I was making this up

Fear and loathing at http://www.reallifesuperheroes.com/

More from the webz
http://www.wlwt.com/news/19305002/detail.html (video)
http://bloggingouttacontrol.com/2011/01/08/cnn-interviews-the-real-life-superheroes-of-seattle/ (video)
http://en.wikipedia.org/wiki/Real-life_superhero (wiki, check the references… O_o )

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.