distortion

WhatTheFont for iPhone

gyo — Sun, 31 Jan 2010 18:26:55 +0000

Yes, I've got a new shiny iPhone for christmas. But I'm not here to write about it.
Instead I'd like to give some focus to the application WhatTheFont for iPhone.
Everyone knows about WhatTheFont (click if you don't), but the iPhone application is just so cool.

Shoot a picture, select the text, done.

I even use it on my monitor, and it works!

Well... enjoy!

Download WhatTheFont for iPhone

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Custom fonts embedding: no hacks, no Javascript, no Flash.

gyo — Thu, 03 Dec 2009 23:08:24 +0000

How to use custom fonts without sIFR, or any Javascript/Flash hacks?
Here is a CSS-only solution: @font-face

You can see a demo preview here, or download the files.

Introduction
We need to convert our preferred font into 3 different formats, to be sure it will be properly displayed on all the Browsers/OS flavours:

TTF or OTF - FireFox 3.5, Safari, Opera
EOT - Internet Explorer 4+ (Yes, it works on IE too...)
SVG - Chrome, iPhone

To convert the fonts to TTF/EOT/SVG it's very easy, we'll just need one tool (or more depending on the source format).

The tools
FontSquirrel - Font Generator
This tool is amazing. It converts a TTF/OTF file to the different formats we need to embed a font in a website.
It also compresses the font allowing us to choose the characters we need, stripping out all the others, resulting in a light version of the font. go to the website

Font converter
Another great online tool to convert fonts to/from different formats (.dfont, .ttf, .eot, .pfb, .otf). go to the website

Font Forge
The opensource font authoring tool. go to the website

And now, let's get our hands dirty...

The Code
Now that we have the files we need (TTF or OTF, EOT and SVG), we're ready to embed the font in our website.
Here is the CSS code:

@font-face {
   font-family: 'Museo500';
   src: url('Museo500-Regular.eot');
   src: local('Museo 500'), local('Museo-500'), url('Museo500-Regular.ttf') format('truetype'), url('Museo500-Regular.svg#Museo-500') format('svg');
}

With font-family, we define the name to use in our CSS rules:

h2 { font: 38px 'Museo500', Arial, sans-serif; }

As you can see, we treat "Museo500" like any other font we normally use in CSS; there are also the fallback fonts, that will be used just in case something goes wrong. Done.

Some notes
If you want to use custom fonts then this is a hard match to win for sIFR & Friends.

A negative point is that the Browser will show the fallback font until the custom one is loaded; on my humble ADSL connection it's very quick, but still noticeable.
Though, once the font files are cached it doesn't happen anymore.

It's true that many users can't upgrade Browsers because of restrictions on their systems... well, I bet they are running Windows, and @font-face works on Internet-Explorer; while if they are on a Mac it works on Safari.
The only "black-sheep" could be (surprisingly) FireFox, which only supports TTF/OTF since version 3.5 (the new version 3.6 also adds support for WOFF font files).

Last but not least, make sure the font's license gives you permissions to embed it in a website.

Conclusion
Web fonts embedding is becoming more and more supported, and I'm sure it will be soon a common practice. So, why not to start now?
This is not the latest trick to use custom fonts in websites, this is the future of web typography.

Spread the voice.

Related links
I made a light version of the subject, here you can find the most extensive and complete resources: Paul Irish and Jonathan Snook.
For my example I've chosen the beautiful font "Museo" by Jos Buivenga's exljbris Font Foundry

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

4 Free SVN Clients for Mac OSX

gyo — Mon, 23 Nov 2009 00:02:28 +0000

Here is a list of 4 Free SVN clients available on Mac OSX. I couldn't find one that integrates in OSX's Finder though; some time ago I wrote a post about SCPlugin, which integrates with the Finder right-click a-là Tortoise. Well, even if it's a discontinued project, and it doesn't have all the advanced features of Tortoise, I still use SCPlugin for my basic SVN tasks.

For all of you looking into something more complete and free...
Here is something ready to download!

ZigVersion

Bazaar

SubCommander

RapidSVN

Free SVN Client for Mac OSX SCPlugin. A seamless SVN integration for OSX contextual menu....

Related posts brought to you by Yet Another Related Posts Plugin.

Adding line breaks in Flash via XML

gyo — Wed, 21 Oct 2009 13:09:16 +0000

How to add a line break to a text coming from XML in Flash (AS2/AS3)?
I've been trying with \n and \r, and
using HTML text and it was breaking the XML; it could have been fixed with but I didn't like the solution, and in the end... I didn't want to use HTML text!

The answer was too easy, really:

This simple characters combination made it. Just put this inside your XML's texts to have a line break. Cool.
As many other times, I don't know why this is not advertised everywhere, it's the simplest and cleanest solution to add line breaks to a text field from XML.

Well, enjoy!

Now you can find a live example and download the sources.

UPDATE

A guy left a review on Stumble saying: "CDATA - Character Data. Use it. It's what it's there for".
At the very beginning I wrote that I didn't like this solution, but now I'd like to give more information on why I DON'T like CDATA:

- It increases the file size
- Your XML file becomes bloated and less readable
- If you need a new line break (which is the point of this post) you have to actually make the new line in the XML, destroying the formatting

Here is an example:
And this goes on a new line.]]>

Adding line breaks in Flash via XML - Copyright © 2009 Giordano Piazza

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Allow smoothing for external images (as2)

gyo — Wed, 22 Apr 2009 14:09:10 +0000

Here is a simple function to set the "Allow smoothing" images property at run-time in Flash.
Let's say you have a blank MovieClip named target_mc and you load an external image, it will be rendered without anti-alias/smoothing; I needed it to be smooth for a full-browser background story and the support for transparent images was a must, so here we go:

function smooth(mc:MovieClip) { var bitmap:BitmapData = new BitmapData(mc._width, mc._height, true, 0x000000); mc.attachBitmap(bitmap, 0, "auto", true); bitmap.draw(mc); }

To use it, just call the function pointing to the target mc:
smooth(target_mc);

As you can see from the code, the function doesn't load anything, it just re-draws a MovieClip with the "Allow smoothing" property set; this is because I needed a quick and simple function to render any MovieClip, since I use another library to handle the loading process.

Note: The code is actionscript2. I didn't investigate the actionscript3 behavior about this issue, if you know something please drop a comment!

IMPORTANT UPDATE
I tried what Non Cho suggested and it works for Flash Player 8! Thanks man!
You no longer need the smooth() function, just keep it in case you need to export for Flash Player 7.
All you have to do is to apply the forceSmoothing property to a MovieClip after the content (image or whatever) has finished loading:

mc.forceSmoothing = true;

Remember to set the forceSmoothing property to true only AFTER the content of the MovieClip has been completely loaded. This is very important, otherwise it will not work.

One more example could be:

mc.loadMovie("my_picture.jpg");

mc.onLoad = function() { this.forceSmoothing = true; }

Allow smoothing for external images (as2) - Copyright © 2009 Giordano Piazza

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Alternative sIFR-lite

gyo — Sun, 12 Apr 2009 21:09:03 +0000

I've playing around with sIFR (v2, v3 and jquery plugins) because I really love the concept behind it.
After some tests and fights I found sIFR-lite.
Dave at allcrunchy.com did a stunning job, and the result is a light-weight sIFR library (about 4k) that works better than the original, at least for me. Faster, lighter, better.

I decided to make some improvements to make it more flexible while keeping it super compact.

This version includes:
- Fixed a bug with Flash Player 10+ (thanks to a comment from Patrick)
- CSS text alignment is now supported

Download the Alternative sIFR-lite

See the DEMO

Please refer to the homepage of sIFR-lite for the documentation.

I do not take the full credits of sIFR or sIFR lite; the aim of this project is only to provide an alternative version with some bug-fixes, and some new features not included in the original.

Anyway... I'll be posting updates here, any input is welcome!

Alternative sIFR-lite - Copyright © 2009 Giordano Piazza

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Free SVN Client for Mac OSX

gyo — Thu, 19 Mar 2009 15:01:21 +0000

I've been searching for a nice svn client to use in OSX: I wanted something free, lightweight, simple like Tortoise for Windows.
With svnX I was able to do the basics, but everything was very confused.

Finally I found it!

SCPlugin

It adds new item subversion in the right-click menu. Just like Tortoise, simple and efficient.
Plus it's free and open-source... cool!

Quoted from the original website:
"The goal of the SCPlugin project is to integrate Subversion into the Mac OS X Finder. The inspiration for this project came from the TortoiseSVN project."

I don't understand why this is only "advertised" by a few people... this is what I needed from the beginning and it rocks!

Free SVN Client for Mac OSX - Copyright © 2009 Giordano Piazza

Related posts:
4 Free SVN Clients for Mac OSX Here is a list of 4 Free SVN clients available...

Related posts brought to you by Yet Another Related Posts Plugin.

6 Flash Essentials

gyo — Sun, 08 Mar 2009 00:14:52 +0000

A selection of six Javascript/Flash libraries to solve common tasks in the tough world of web-design.
Here is a quick list of the essential tools to use with Flash:

VideoMaru

Easy and powerful Flash video player, it let's you to create interfaces in minutes: just draw something, convert it to MovieClip and set an instance name (like play, stop, pause...).

SWFUpload

Cool if you need to show a progress bar during uploads.

sIFR

Use any font in your website with this. It substitutes defined html tags with a Flash SWF file displaying the embedded font.

SWFAddress

Deeplink for Flash. With this library you'll be able to link internal pages of a Flash website.

SWFFit

Automatically resize your Flash movie keeping it accessible independent of screen resolution.

Flash Switcher

Smart Firefox extension to quickly switch between different Flash Player versions.

6 Flash Essentials - Copyright © 2009 Giordano Piazza

Related posts:
Custom fonts embedding: no hacks, no Javascript, no Flash. How to use custom fonts without sIFR, or any Javascript/Flash...

Related posts brought to you by Yet Another Related Posts Plugin.

Web Design Elements

gyo — Thu, 05 Mar 2009 22:58:08 +0000

While making a website you may need some inspiration. I'm not going to talk about yet-another-cool-websites-gallery (btw i love them), instead here is a website that shows elements like headers, footers, breadcrumbs and more taken from many famous (and not) websites.

Pattern Tap

http://patterntap.com/collections/

Web Design Elements - Copyright © 2009 Giordano Piazza

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Lotus

gyo — Sat, 24 Jan 2009 14:27:23 +0000

A Flash experiment using native CS4 3D engine + random colors of a defined scheme.
This was done

Lotus - Copyright © 2009 Giordano Piazza

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.