Rethink your UI!

Posted on August 17, 2011 by Marco




Or: why you should get your navigation to the right hand side.

It’s a hunch right now, but don’t all things start with it? Seeing the good old navigation structure of a webpage on the left, where all items are listed nicely or in a horizontal top-alignment with dropdowns is pretty standard nowadays. But I claim that it’s end has come.

Why?

It’s about haptics. It took us a little time to get used to a mouse and a coordinate system that starts top-left and we coped with it. Nowadays even Microsoft is aware what User Experience means: it’s not from geeks to geeks, it’s from geeks to the dumbest imaginable user, the human. Touch-screens & tablet PC’s are reigning the scene now and it will ultimately make a big difference having haptical devices. (Sorry now for a left-handed:) Using your god-given hands to interact with a device (the left one holding it, the right one swiping its gestures) gets you going and degenerates you geekieness into a more human way of acting. Imagine you hand needs to go to the top left corner of your touchscreen to switch a menu item. What will you seen of your screen in the meantime? Nothing! Because your hand is covering it all.

It’s nothing new that touch devices have – in many cases – a bottom – right navigation. And I claim that this will overcome the existing top-left constructs. More about that and maybe some mockups later on!

 

Posted in UX Design | 2 Comments

Arduino and brains – make the world better! :)

Posted on August 17, 2011 by Marco




Posted in ClickWorthy | Leave a comment

How to easily show and hide parts of a form using jQuery

Posted on August 3, 2011 by Marco




It is a problem nobody may really takes serious anymore: The mantra “websites are stateless”. Sounds so last century. In fact, it is – and it is quite simple to enhance forms with jQuery a lot. I remembered the FLEX states that you define on top of you application, for instance: “success” and “error” and then add the “includeIn=”” option to visual elements. Same with jQuery! Definitely not new, but sleek…

Lets assume you have a form with different parts that you want to show or hide on a certain value selected.

We have the following HTML form:

<select id="emAction">
  <option value="girl">Its a girl!</option>
  <option selected="selected" value="boy">Its a boy!</option>
  <option value="mixed">Its both!</option>
</select>

<!-- this is actually only for the girl -->
<div class="field girl">do you want to order the Barbie set?
  <input id="girlsBarby" type="checkbox" value="NO" />
</div>

<!-- this is actually only for the boy-->
<div class="field boy">do you want to order the Tank?
   <input id="boysTank" type="checkbox" value="NO" />
</div>

<!-- this is for both-->
<div class="field boy girl">
    leave a message for the kid!
   <input id="message" type="text" />
   <span class="field girl">oh, remember - its a girl </span>
   <span class="field boy">oh, remember - its a boy </span>
</div>

 

Well, it’s an odd example but for the sake of simplicity… I used the following jQuery code to show and hide the fields in relation to my selectbox:

 

jQuery(document).ready(function () {
	$('#emAction').live('change', function() {
		var v = $(this).attr('value');
		$('.field').hide();			// hide all fields
		$('.' + v).show();			// show only selected classes
	}).triggerHandler('change');
});

 

Line 4 hides all classes with the name “field” – whereas Line 5 shows all visual elements with the current class selected. Making it easy to tag elements just like within state-supporting apps.

 

Posted in Experiments, jQuery | Leave a comment

How to smooth scroll a flex (4.5) list

Posted on July 23, 2011 by Marco




It’s been relatively easy to scroll a list back in the days of Flex 3 (using list.scrollToIndex or the maxVerticalScrollPosition).

Well, in Flex 4 we need a different approach for that, using the

list.scroller.viewport

to do that fancy thing. I wanted to use the Caurina Tweener class to for that approach but you can use any Tweening class you like. The following method resembles a part of the code I used with a Flex list control.

Continue reading →

Posted in Experiments, Flex | 2 Comments

Verbatim monsters – are dead…

Posted on July 22, 2011 by Marco




Senshukken

This happened to be a role model for my papervision3D aspirations. The Verbatim Monster Battle. Made in pv3D with quite a bit of interactivity and a social component I have to say it was awesome! Because the link tells me something that I can’t decipher with my Japanese language skills, I added a video – R.I.P:

 

 

Posted in ClickWorthy | Leave a comment

A (flash) gallery of me

Posted on July 22, 2011 by Marco




Posted in ClickWorthy | Leave a comment

iOS and Flex 4.5 – getting the certificate to p12

Posted on June 28, 2011 by Marco




So is it all harmony now? Getting the developer certificate set up for Flashbuilder 4.51 is not as simple as promoted. People who check out the official Adobe doc on that are running into issues (as I did). Well, it is explained quite detailed in the two videos at the end. But for a quick overview, here is what to do to get you Flex App on that good old iPhone:

2. get OpenSSL here

It’s the GnuWin32 distribution. Install it here C:\OpenSSL-Win32 , open CMD and go on from here… This tutorial assumes that you are in the c:\OpenSSL-Win32\bin folder. (If you install it on a Vista or Win7 do not use the Program-directory or UAC will make your life a bit harder — if you did, then just export all files to a folder outside the Program Files one!)

2. Get your AppleID and developer certificate

2.1. the mykey.key

This was an issue encountered by many. Important to know: This has to be generated by openSSL. Do it like that:

> openssl genrsa -out mykey.key 2048

This will store the key-file in the current directory (C:\OpenSSL\bin).

2.2. Get the certificate

If you need a (new) developer certificate, then you need to use that key to generate the certificate signing request:

> openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest
-subj "/emailAddress=your@email.de, CN=Your Name, C=COUNTRYCODE"

If a error turns up like “can’t find config file then you need to specify the path to your local (WIN) config file. I found mine under the OpenSSL folder /bin/openssl.cfg (not .cnf – but it worked as well). Example:

> openssl req -new -key mykey.key -config "c:\OpenSSL\bin\openssl.cfg"
-out CertificateSigningRequest.certSigningRequest -subj "/CN=Your Name, C=COUNTRYCODE"

2.3. Upload the CertificateSigningRequest-file to the Apple page and let it issue the dev certificate. Download that new certificate and put it into the c:\OpenSSL-Win32\bin folder.

 

3. With you Dev.Certificate compile your p12 certificate:

As soon as you downloaded you developer_identity.cer from Apple, go on:

3.1. Create a PEM file

in the CMD window, enter this:

> openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem
-outform PEM

3.2. P12

Then use the PEM to make the P12 cert:

> openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out mycert.p12

It will ask you for a password – just enter an arbitrary one and make sure, you use it in you FB IDE.

 

DONE.

 

More on that (note, he’s using OpenSSL from another source – this distribution will NOT take the /emailAddress attribute and it will raise problems with a missing openssl.cnf file )

iOS – getting the Apple Developer Certificate

Part II

 

 

Posted in Flex, Mobile Dev | 1 Comment

UX Design? Cool buzzword… yeah, hmm… yeah, … hmm, no… what?

Posted on June 18, 2011 by Marco




a guy pulling the plugCan you read what I am writing here? Are you bored already? Well, if you read on, then apparently something has driven you to do so. It might have been that – admittedly lame – headline or just the buzzword itself; or you are someone who already has a preconception of that term “UX DESIGN” – just like I had when I accidentlly stumbled upon it in a job description – the only I could find on SEEK.co.nz. Well, if you read on, this blog has at least a weak, but decent UX design …

After reading a bit about it here and there the thought began to dawn that it is something very old painted with fresh colours. First of all it means: User Experience Design. In my terms, I would describe it as the design of a product that is meant to be used by someone who is human. Isn’t that anything? you might ask. Yes it is. But I constrain it to one thing: the web.

A bit more precisely, a software application is for ‘human consumption’ if it has a user interface. Something like the good old Amazon webservice is not for your eyes (if there are not ultra-geeky). Software that awaits a user’s interaction and gives something back that the user at least expects (then it is OK) or that lays beyond his expectations (then it might be COOL) has a good UX design. Generally spoken. And this is where the key difference is between a Web Designer UX-disciples put emphasis on: A Web Designer is really close to an UX Designer because he creates the visuals the users have to cope with.

So, lets pretend, the visuals of a website make it’s interface (by let aside the fact that we have more than that on a modern and accessible webpage like audio etc.); why would we need UX-designers? A good Web Designer ponders about more than just the aesthetics of colours, a nice looking menu-bar with a fancy gradient or that AJAX-box that slides out and in again on mouse click. He should consider the user’s attitude and goals and  anticipate hist behaviour. In some parts he does: the navigation(s) have to put up with that. The goals and funnels, reflected by Google Analytics have to be considered in the design of the site. But that’s it. After my experience in the WebDesign area, there is much more to it than a Designer can handle by himself.

So, lets not pretend, visuals are everything. User Experience circulates around much more than that: the flow of the naviation, the reaction of the product to his actions, the speed of gaining information and the emotional experience (isn’t everything emotional at the end of the day?)

Continue reading →

Posted in UX Design | Leave a comment

An exploding gallery in FLEX/papervision3D

Posted on June 6, 2011 by Marco




Letting things explode is fun. For boys at least. So with this experiment I just extended the sliced cube to become – sliced horizontally – little cubes. And they need to jump around. That thing became my interactivesites.de – main app in the end. But, admittedly, I like the white sleek alpha version better.

Posted in Experiments | 1 Comment

An interactive sliced cube gallery

Posted on June 6, 2011 by Marco




Oldie but goldie: Taken from a merelly static sliced papervision3D cube and extended to read XML while re-skinning that thing on the fly. I saw quite a few sites using this cube (not mine) in a nice way (if I find the links, I’ll post it).

That thing had to be customized for a client – it is creating a MovieClip(), where a title and description bar is added to the image, converted to a Bitmap() and then used for skinning the cube’s sides.

more here

Posted in Experiments | 1 Comment