In this article I’m talking about The Ugly Prototyper a concept idea for a prototyping functionality.

When I start a web project sometimes I need to think about the size of the element on a page.
You are saying “never heard about photoshop/fireworks/flair builder/other prototyping software?” yes, I’ve done my homework, tryed lot of them and discovered that none give me the possibility to input a percent of the father element and get a new object of the proper size.

Practically we have to rely only on us eyes to decide if the logo (or content area) is big enough.
We put elements on page, size them and only then mathematically calculate their encumbrance (when this happens).
It’s a trials and errors method.
I don’t like at all.

If you are designing with a content-driven method you have to decide the right priority of the page elements, I think that a good starting point is to say:”the content area cannot be less than the 33% of the page, the header must be no bigger than 25%, ads will be 25%”, visually see it, modify and then (only then) start with the real prototyping and design.

So I developed my tool.
I made it in few nightly hours, sorry, it lacks of functionality and usability.
You have to reload a page if you change the working area size after creating some child and a lots of others problem.
In my excuse: this is not a release!
The Ugly Prototyper is on line just to be showed to my friends and to gather opinions

Italiano:
In questo articolo parlo di The Ugly Prototyper, un concept per uno strumento di prototipizzazione.

Ho provato diversi software per la prototipizzazione delle pagine web (e più genericamente delle interfacce) e non ho trovato nessuno che mi fornisse la possibilità di inserire una percentuale ed ottenere in cambio un oggetto della dimensione giusta.
Lo trovo strano, perchè in questo modo per il posizionamento contiamo solo sul nostro occhio che potrebbe non essere abbastanza allenato.
Penso che in fase di progettazione, specie se usiamo un approccio content-driven, sarebbe un buon punto di partenza poter decidere che l’header non debba essere più grande del 25%, i contenuti non più piccoli del 33% visualizzandone gli ingombri per poi partire con la prototipizzazione ed il design reali.

Nessuno me lo faceva e così ho creato il mio tool.
è stato sviluppato in poche ore notturne, quindi ha parecchi problemi, tra cui che non ha un sacco di funzionalità comode e necessarie, che bisogna ricaricare la pagina se si cambiano le dimensioni dell’area di lavoro dopo aver già creato almeno un oggetto ed un sacco di altre cose.

A mia discolpa posso dire che questa non è una release (e forse non ci sarà mai una release).
The Ugly Prototyper è messa on line per farsi vedere dagli interessati e raccogliere qualche opinione.

Non ho nulla contro il plugin il cui funzionamento è ineccepibile, ma si basa su un parametro che varia a seconda del browser rendendo necessario interpretare i risultati solo dopo aver sniffato il browser del navigatore.

Mousewheel infatti all’attivazione dell’evento “rotella girata” restituisce una variabile delta contenente un signed int che ci dice di quanto è stata spostata la rotella e ce ne indica il verso grazie al segno.

Su firefox uno spostamento della rotella verso l’utente (per me giù) è positivo ed uno spostamento nell’altro verso (su) è negativo. In opera esattamente il contrario.

Ho scoperto ora il problema ed aggiornerò il post con la mia soluzione (quando l’avro almeno pensata) e con altre indicazioni sul comportamento negli altri browser.

“hey js dammi un oggetto di tipo jquery che eventualmente contiene parameters”

Che è ben diverso da “hey js trasformami parameters in un oggetto jquery e ridammelo“.

quindi se a questo codice html:

<div><p>Lorem ipsum bla bla bla</p></div>

applicchiamo il jqueroso:

var tmp = $(‘span’);

l’espressione if ($tmp) {//stuffs} risulterà sempre eseguita perchè tmp è un  oggetto jquery (un array) di lunghezza nulla, quindi un sistema per rendere efficace l’espressione potrebbe essere:

if ($tmp.length>0) {//better stuffs}

Ci sono tanti altri sistemi, ad esempio prima di scoprire questo effettuavo il controllo sui valori di altri attributi con $(tmp).attr(), ma questo è più compatto e funziona sempre (dovrebbe).