Bom Bandido

Recentemente, eu e o João Mateus (@joaodavidmateus) criámos o Bom Bandido, um site onde partilhamos coisas que achamos importantes, interessantes, engraçadas ou simplesmente parvas.

Apareçam por lá, subscrevam, ou sigam-nos nas redes sociais:

WWW: https://bombandido.com

RSS: https://bombandido.com/feed/

Twitter: https://twitter.com/bombandido

Facebook: https://www.facebook.com/bombandido

Sushi Sutory

Bubble Boy Games is proud to announce a new mobile game: “Sushi Sutory”.

It features:

• Colorful cartoony graphics.
• Lot’s of stuff to unlock.
• Addictive gameplay.
• Cool bonus games.

Checkout some of the in-game screens:

Jump, sushi, jump

Colorful graphics

Play fun bonus games

Play bonus game “Soy Catcher Extreme” to earn extra soy

The game is available at Google’s Play Store (will be available for iOS very soon):
https://play.google.com/store/apps/details?id=com.Bubble.SushiSutory

Retromania - Novo portal de "retro gaming"

Retromania é um novo portal português onde serão divulgadas as notícias mais revelantes do mundo do "retro gaming" e "retro computing" em português. Spectrums, Commodores, Ataris, Nintendos, Segas... está tudo lá:


http://www.retromania.pt

Neste site, existe ainda um fórum onde os mais aficionados podem trocar ideias, ajudar ou ser ajudado, partilhar novidades, etc:

http://www.retromania.pt/forum

Android game: Up Up n' Roll Away

We just released a new game for android: Up Up n' Roll Away.

It's is a "minimalist" game where you can test your precision skills.
Power up the ball, release in the right moment and you will get to the next platform.
The sky is the limit.
... be the ball...

Download link (from Google Play):
https://play.google.com/store/apps/details?id=com.BubbleBoy.UpUpRollAway

Here's how the game looks:

 

Drill & Drill Co.

We, at Bubble Boy, just released a new game for Android smartphones:

Your mission: to drill into the deepest layers of the Earth. How deep can you go?

Download link (from Google Play):
https://play.google.com/store/apps/details?id=com.BubbleBoy.Drilldrillco

Aventura das Palavras

Já conhecem a "Aventura das Palavras"?

A Aventura das Palavras é uma aplicação (app, se preferirem) para dispositivos android, feita por mim e pelo meu compincha João Caleia Rodrigues. É uma app pedagógica/didáctica/educativa para crianças entre os 6 e os 10 anos treinarem a leitura.

É esta a descrição que consta na Play Store:

A "Aventura das Palavras" ajuda as crianças a treinar, de forma divertida, as competências implicadas na leitura, como a correspondência grafo-fonética (correspondência letra-som), fusão fonética e fusão silábica, trabalhando vários tipos de sílabas (das mais fáceis às mais difíceis) e os casos especiais da Língua Portuguesa.

Façam download, avaliem a aplicação, façam reviews. Façam-nos ricos com esta aplicação... totalmente gratuita.

Link para download: https://play.google.com/store/apps/details?id=com.bubbleboy

Nota: No momento de edição deste post, a Aventura das Palavras encontra-se na lista "trending apps" na Play Store portuguesa:

The ZX Spectrum turns 30 years old today.

Here's my homage to it.

Spectrum Nostalgia, a set on Flickr.

Open letter to Microsoft about Silverlight. I mean Flash. I mean Silverlight.

Dear Microsoft,

Recently you announced you will support Silverlight applications in your new, to be released, Windows Phone 7 series operative system. That’s great news.

Yesterday you announced a bunch of new products: Visual Studio 2010, .NET 4.0, Silverlight 4. Once again, great news.

Yesterday you also announced and a new mobile phone named KIN. Sadly it won’t support Windows Phone 7 yet, since the OS is not to be released before the holiday season.

Curious about the KIN, I browsed to its official site www.kin.com. Cool site, teenager oriented, lots of Flash animations and interactivity.

Wait, did I say Flash? No, it’s got to be Siverlight of course. Let me just check.

(… me browsing…)

Dear Microsoft,

Being a mature company as you are, I noticed you use Flash technology in some of your sites (specifically the KIN and the XBox web sites). Does this mean that we should be using it in our sites if we want to be successful too?

Thanks in advance.

Yours truly,

Tiago

CSS Style <input type=”file”> tags

Inputs of type=”file” are probably the hardest tags to style in html. Due to security issues browsers don’t allow you to change it too much.
Of course we have tricks but since each browser makes its own implementation of the control (and it’s poorly documented stuff) the tricky part is to find something that works for all browsers.
If you google for it you’ll find a few tutorials that are hard to understand and use too much javascript, jquery and css.
I found a relatively simple way to achieve this and I’ll try to make it easy to understand. It goes in 4 steps.
STEP 1 – Create a text box and a input “type file”
Start with a textbox and a div with a input “type file” inside of it. The div should be the size of the “browse…” button that you want to use.
The only tricky part for now is the overflow property in the css class of the div being set to hidden. That causes the overflowing content of the div to be hidden from sight. See it in the screenshot.
html:

<input id="fileName" class="file_input_textbox" readonly />
 
<div class="file_input_div">
  <input type="file" />
</div>

css:

.file_input_textbox
{
 float: left
}

.file_input_div
{
  position: relative; 
  width: 100px; 
  height: 23px; 
  overflow: hidden;
}

screenshot:

STEP 2 – The fun part: oversize the input  “type=file”
Now we have to make the button part of the input “type=file” show in the div and completely fill it. Aligning it to the right is now enough because the different browsers act differently in this case.
So, the big trick in this tutorial? Oversize the control. How? Just set its font size to an absurd size (probably 30px will be enough, though).
html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

<div class="file_input_div">
  <input type="file" class="file_input_hidden"  />
</div>

css:

.file_input_hidden
{
  font-size: 23px; 
  position: absolute; 
  right: 0px; 
  top: 0px; 
  opacity: 0; 
}

screenshot:

STEP 3 – Make the input “type=file” invisible and put your customized button behind it.
Making the file input invisible doesn’t mean that you cant click it. So, make it invisible, put a customized button behind it.
That way, you will see your customized button but when you click it, you will in fact be clicking the real (invisible) browse button (the one that is oversized, overflowing, over the customized button, remember?)
You can customize your browse button by changing the “file_input_button” css class.
html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 
<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" />
</div>

css:

.file_input_button
{
 width: 100px; 
 position: absolute; 
 top: 0px;
 background-color: #33BB00;
 color: #FFFFFF;
 border-style: solid;
}

.file_input_hidden
{
 font-size: 45px; 
 position: absolute; 
 right: 0px; 
 top: 0px; 
 opacity: 0; 
 
 filter: alpha(opacity=0); 
 -ms-filter: "alpha(opacity=0)"; 
 -khtml-opacity: 0; 
 -moz-opacity: 0;
}

screenshot:

STEP 4 – Final step: Fill the text box with the name of the selected file
If you tried the previous steps, will have noticed that after you select a file, nothing shows in the text box. That’s because the file name is indeed being written in the hidden input “type=file”.
So, in this final step you shall add a simple javascript instruction to the onchange event of the input “type=file” tag. That instruction copies its value (the filename) to the text box.
html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 
<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>

And… voilá. It should be working. I’ve tested it in Firefox 3, IE6, IE7, IE8, Opera 10, Chrome 3 and it worked perfectly in all of them.

The complete solution
So, here is the complete code (css and html all in one):

//css
.file_input_textbox
{
 float: left
}

.file_input_div
{
 position: relative; 
 width: 100px; 
 height: 23px; 
 overflow: hidden;
}

.file_input_button
{
 width: 100px; 
 position: absolute; 
 top: 0px;
 background-color: #33BB00;
 color: #FFFFFF;
 border-style: solid;
}

.file_input_hidden
{
 font-size: 45px; 
 position: absolute; 
 right: 0px; 
 top: 0px; 
 opacity: 0; 
 
 filter: alpha(opacity=0); 
 -ms-filter: "alpha(opacity=0)"; 
 -khtml-opacity: 0; 
 -moz-opacity: 0;
}

 
//html
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 
<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>

There. I hope it works for you as well as it did for me. If you find it doesn't work that well, feel free to let me know.

And if you like playing android games, why not check my new game "Up Up n' Roll Away" in the Play Store:
https://play.google.com/store/apps/details?id=com.BubbleBoy.UpUpRollAway

Best Practices for Web Forms Design

Here’s a great document by Luke Wroblewski concerning Web Forms Design theory:

http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Ever wondered if you should right or left align your fields’ labels? If you should put your labels on top of the fields, etc? It’s all there with lots of screen shots.