Crafty Cat » Blabberings

A Sliding Alternative to CAPTCHA?

clair — Fri, 09 Jul 2010 02:32:42 +0000

A Sliding Alternative to CAPTCHA?

via LukeW | Writings on Digital Product Strategy and Design by Luke Wroblewski on 7/1/10

It’s no secret that the use of difficult CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart) in Web forms can confound ordinary people, drop conversion rates, and increase errors in addition to (hopefully!) keeping the bad guys out of your site. As a result, I’m always interested in alternatives to standard CAPTCHA techniques.

Once such approach brought to my attention recently can be found on They Make Apps. Instead of the distorted text strings that typify most modern CAPTCHAs (above), the sign up form on They Make Apps uses a slider that asks people to: “show us your human side; slide the cursor to the end of the line to create your account.” Moving the slider to the right completely submits the form and triggers error validation just like a standard Submit button would.

I don't have any data that suggests this implementation impacts conversion rates (up or down). It doesn't seem to cover accessibility issues since it requires a mouse or drag gesture to work (no keyboard support). And at large scale, it won't keep spammers out effectively. CAPTCHA busting farms already employ human labor to crack distorted text CAPTCHAs at incredibly cheap rates (moving a slider would be even faster & easier) and it's likely trivial to develop a script that will adjust the slider automatically to submit the form. But it is still nice to see people exploring different approaches.

Tags: forms, guidelines, usability, UI components, innovative UIs

Posted via email from for posterity’s sake

Designing for the Retina Display (326ppi)

clair — Fri, 09 Jul 2010 02:29:57 +0000

For those who want to design mobile apps

Designing for the Retina Display (326ppi)

via LukeW | Writings on Digital Product Strategy and Design by Luke Wroblewski on 7/8/10

For three generations of the iPhone, Apple kept the screen consistent (320×480 pixels and 3.5 inches diagonal). But now Apple’s new iPhone 4 boasts the “highest resolution phone screen ever (960×640 pixels and 3.5 inches diagonal).” What’s the impact to designers?

But first, why is it an issue? Because of PPI (pixels per inch) or pixel density variations.

“A screen with lower density has fewer available pixels spread across the screen width and height, where a screen with higher density has more — sometimes significantly more — pixels spread across the same area. The density of a screen is important because, other things being equal, a UI element (such as a button) whose height and width are defined in terms of screen pixels will appear larger on the lower density screen and smaller on the higher density screen.”

Initial Palm and Android smartphones were in the same ballpark as Apple’s first set of iPhones so ppi (pixels per inch) was roughly the same across these devices.

iPhone: 320×480 | 3.5 in | 164ppi

Palm Pre | 320×480 | 3.1 in 186ppi

Palm Pixie | 320×400 | 2.63 in | 194ppi

T-Mobile G1 | 320×480 | 3.2 in | 180ppi

?MyTouch 3G | 320×480 | 3.2 in | 180ppi

?HTC Hero | 320×480 | 3.2 in | 180ppi

The next set of Android phones featured much higher PPI only to be bested by Nokia’s next generation of smartphones and finally the iPhone 4.

Motorola Droid | 480×854 | 3.7 in | 264ppi

Nexus One | 480×800 | 3.7 in | 252ppi

?HTC Desire | 480×800 | 3.7 in | 252ppi

Nokia N97 | 360×640 | 3.2 in | 229ppi

Nokia N900 | 800×480 | 3.5 in | 266ppi

Apple iPhone 4 | 960×640 | 3.5 in | 326ppi

So how do designers manage these jumps in pixel density? Here’s a round-up of recent articles that tackle the issue.

Designing for iPhone 4’s Retina Display by Josh Clark (author of Tapworthy) looks at the impact of the Retina Display on iPhone application development.

Starting in iOS 4, dimensions are measured in “points” instead of pixels. Conveniently enough, the iPhone screen is 320×480 points on both iPhone 4 and older models.

On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide. So: just specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen.

To add high-resolution images to your app, you have to include a second set of all your graphic files. For every image in your app, add a second version that’s twice the size, adding @2x to the name.

Photoshop fans should learn to get comfortable with Illustrator. By building your app graphics in vector format, you can export them in whatever size you like with limited muss or fuss.

How to make your web content look stunning on the iPhone 4’s new Retina display by Aral Balkan outlines the high-level impact of the Retina Display on Web design & development.

If you want your applications and web sites to look beautiful on the iPhone 4’s new retina screen, you’re going to have to create high-resolution versions of your bitmaps and/or use vectors.

You basically have to design liquid interfaces (and interface elements) for your apps.

SVG can help in creating resolution-independent designs.

Since browsers do not currently have automatic support for loading high-resolution versions of image and video assets, we can use a combination of CSS media queries and JavaScript for the same effect.

With CSS3 media queries you can then build Web sites with completely different CSS files based off the pixel-ratio of CSS pixels to device pixels, including higher res artwork as necessary.

This approach also degrades gracefully, since you can specify the lowres CSS file and then higher res CSS files inside media queries that will be ignored by browsers that don’t understand them.

High DPI Web Sites by Dave Hyatt outlines how the WebKit team is thinking about allowing Web authors to effectively support very high resolution devices.

Most Web site authors have traditionally thought of a CSS pixel as a device pixel. However as we enter this new high DPI world where the entire UI may be magnified, a CSS pixel can end up being multiple pixels on screen.

Safari actually supports PDF as an image format (the hands of the clock Dashboard widget are an example of this). However other browsers do not support this format. The agreed-upon standard for scalable graphics on the Web is SVG.

Our goal with WebKit is to make SVG a first-class image format, so that it can be used anywhere you might use a PNG, a GIF or a JPG.

Targeting the iPhone 4 Retina Display with CSS3 Media Queries by Walt Dickinson shows how to use CSS3 media queries to target the Retina Display.

In order to preserve the design of existing websites, images are automatically pixel-doubled. And this creates a schism between “device pixels” and “CSS pixels”.

With CSS3 media queries, you can use device-pixel-ratio, for targeting specific pixel densities. This tells browsers to include High PPi CSS files only if the device pixel ratio is 2 or higher. This CSS file overrides the background images of some of my site’s graphics with higher resolution versions and uses the background-size property to set the correct CSS pixel dimensions.

If you’ve come across any other resources on designing for the Retina Display (326ppi), let me know!

Tags: screens, technology, mobile, apple

Posted via email from for posterity’s sake

Testing 1-2-3

clair — Fri, 09 Jul 2010 02:10:37 +0000

Just testing posting via email. I am hoping this works for those quick postings.

Posted via email from for posterity’s sake

Ubuntu Light

clair — Wed, 12 May 2010 05:52:55 +0000

http://www.markshuttleworth.com/archives/383

We focused on maximising screen real estate for content. In particular, we focused on maximising the available vertical pixels for web browsing. Netbooks have screens which are wide, but shallow. Notebooks in general are moving to wide screen formats. So vertical space is more precious than horizontal space.
We also want to embrace touch as a first class input. We want people to be able to launch and switch between applications using touch, so the launcher must be finger friendly.

How interesting

Posted via email from for posterity’s sake

I have my own butler XD

clair — Tue, 30 Mar 2010 07:08:03 +0000

Image Credit: Dang Ching

Guess what came in the mail last week? The picture above says it all! That is a figure of Sebastian (from the anime Kuroshitsuji) which my friend Jonette sent me as a late birthday present. He’s taller than my usual dolls and figures but hey, at least I have my own butler. *LOL* If ever I have my own workspace at the client’s office, I’d make sure I could bring him along with me and pretend he’s the one pouring me tea during break time or crunch time. (Well, I drink tea when the mood strikes me so…)

Too bad I can’t ask him to literally protect me from harm, but here’s hoping he could protect me from insanity. After all, he’s one hell of a butler.

Biking

clair — Sun, 28 Mar 2010 16:01:46 +0000

I’ve always liked biking. When I was a kid, I used to bike in our backyard. We had a little bike with those training wheels and there was a time that those training wheels came off so I was learning with one of my hands against the wall, trying to make myself balance on the bike. It worked for me! Haha. And growing up, I used to borrow bikes from different neighbors. It seemed to be the ‘in’ thing in the 90s. There were a lot of kids with bikes and bikes with sidecars attached to them. Those were fun to ride. Anyhow, my mom and stepdad decided to get a couple of bikes for their exercise. Though it seems like I am mainly the one who gets to use one of the bikes when I am home on weekends.

So yeah, this is the bike I use. Been using them mainly on Sunday afternoons when the sun is about to set. I bike around the neighborhood for 30 minutes. The only tricky part is avoiding dogs and children who are learning how to bike or are running around. The feeling of going up to the gate makes my legs work harder because it’s an uphill ride. That’s a huge challenge for me since I am physically unfit. *lol* Oh well. But at least I get to have fun because it’s not like riding an exercise back. On an exercise bike you don’t see anything else but the things around you and that makes me impatient. When I am on an actual bike, I see my neighborhood and the sun setting down gradually. The wind in my face is also a welcome feeling which I won’t get inside a gym. I will try to wake up early for this next time. But for now, I shall savor the Sunday afternoons biking around.

Telling Stories with Talecraft Cards

clair — Sat, 27 Mar 2010 17:07:13 +0000

This afternoon, JM and I decided to meet at Coffee Bean and Tea Leaf. Before that I was just looking for drawing supplies when I decided to check out the games sold in National Book Store. Near a wooden checkers set were boxes of Talecraft cards. I have seen them so many times in various cons but I never got myself a set until today. Wanting to try something new, I decided it could be a fun way to spend an afternoon.

So I got myself something to drink and then started checking out the cards while waiting for him. Talecraft basically has the following types of cards:

genres – the type of story you’re supposed to be telling; examples: romance, sci-fi
archetypes – the characters in your story; examples: reluctant hero, siren
key – key things needed in your story.
- keywords – could be anything like objects, places; examples: church, lock of hair
- plotlines – certain twists in the story; examples: revenge, pursuit
- pick – you need to follow what it says in the card. it would usually tell you to pick another card type
- swap – you need to follow what it says in the card. would usually mean swapping out one of your cards of a particular type with a new one from the deck.

Each player has to get 1 genre card, 2 archetype cards of which one will be the protagonist and the other the antagonist, and 6 key cards. Now if a player gets pick or swap cards among the key cards, then the player must do as the card says.

I started writing a story when JM showed up and we decided to play the cards. It was interesting really, because there was a time when I got 3 pick cards which all said pick archetype card. I ended up with a story of 5 characters! We ended up telling several stories and it was interesting to hear JM make thrillers and mystery stories. He seems to have something in his head right away. As for me, I am terrible at making horror and thrillers. There were moments when JM suggested to me how I could improve my stories. Once he even suggested I ship the twin brothers instead of making them rivals because that is an even more forbidden love than one of the twins marrying the daughter of their employer! Haha! I like JM’s historical fiction set in the time of Lapu-lapu with Pintados and all. And this is one of the times I wish I recorded our stories. Oh well, maybe another session?

Belated happy birthday to me!

clair — Tue, 09 Mar 2010 00:47:19 +0000

So several weeks ago, I celebrated my 30th birthday by watching “Rent” with my dear boyfriend. It was a show that we got tickets for last December. It was an interesting musical with the topic of friendship, AIDS, homosexuality and living a bohemian life. There were quite a number of songs that I loved from it and I am glad to have bought a soundtrack from the booth outside of the theater. I cried when Angel died, and I felt the frustrations Mark felt as a person who wants to express himself as an artist. It was really great! However, I didn’t like the acting of the guy who was playing Roger. I thought he was terrible in terms of acting.

Earlier that day, my friends at work surprised me with greetings and presents that I really loved. Some of them were really sweet in their messages in the mail. And one of my co-workers texted me because he was on site (client’s office) that day. Gosh, such awesome messages that warmed the heart. Rjene even made me cry that morning because she gave me a teru teru bozu! And her message in the card made me cry too.

The big white and pink teru teru bozu from Rjene, the white shell charm from Ence (way back when she went on a trip) and Martin’s gift to me was a Haruhi charm. Hehe.

My fellow PM/BAs and friends at work also gave me a lovely gift: a tea tumbler from Starbucks. I know my hint was blatant because I posted it on Plurk but I am just so thankful for this gift because it does keep my tea warm. Now that I have a tea ball, looks like that tumbler and tea ball plus the darjeeling tea that Dai gave me last November will all be my friends if and when I get deployed on site.

Carl was thoughtful too. I saw a package wrapped in old forms haha. But guess what’s inside? It was a DVD copy of Infernal Affairs! OMG. The Andy Lau fangirl in me just squeed so much

It was the gestures of these people that made the day extra special because of the talks I’ve had with my friends, the moments I got to spend with them. Thanks to everyone who had dinner with me before I ran off to meet JM for the musical. It was so hilarious, the things that happened over dinner in Giligan’s in Greenbelt 1. We even practically filled up one section of the place.

The following day was Eda’s birthday and I visited her at home. Some of our co-workers were there too and there was just so much food! I envy Eda that she could eat so much yet not gain weight ~_~ In any case, I am touched that she invited me over as well. I hardly have friends in the area. And we also played Zombie Fluxx that day. Hahaha. And when I went home, my sister surprised me by bringing sans rival. She told me to get sylvanas so we could stuff it in the sans rival. It was awesome! Hahaha.

See? Isn’t so glorious? Sans rival with sylvanas!!!!! *NOM!*

Then last week, it turns out one of my friends from Asia Source 3 is in the country. Mifan Careem (Sahana Project). It was a pleasant surprise. Too bad I wasn’t able to join them during the first week he was here. JM and I met up with Mifan and Bobby. It was great catching up with them and sharing stories of how we have all been doing these days. It made me miss camp a whole lot more and just last night, I ended up brainstorming with Shane about what we could do this summer.

My 30th birthday was mainly spent with my colleagues and friends this year. It feels like I am approaching something like my teen age years again in terms of certain changes in the way I think and feel about things. Career-wise, I am looking for other challenges to come. I know it’s a dangerous thing to ask for but I’d like to grow so it’s a risk I have to take. Sacha asked me what I am looking forward to this year. I guess it’s more of changes in different aspects of my life. Like I should be taking better care of my health and then there is also that desire to grow more as a crafter and also that desire to be more active in the free and open source community. But we’ll see how things will go, shall we?

2009 was…

clair — Thu, 31 Dec 2009 14:23:56 +0000

awkward.

In so many ways it has been an awkward year. It began with me feeling awkward, not quite sure what I’m supposed to do. And it’s ending that way too.

Certain circumstances made it that way and so I had to work with what I had. Ah, well. Despite feeling awkward about my own skills, my own place in this world, etc. I think that I’ve learned a lot. I’ve also gotten a stronger spine. I’ve learned not to always agree with everything. And sometimes I just agree to disagree with people as our opinions on certain matters are quite different.

This year I’ve traveled with friends and co-workers to different parts of the country. Namely, Cebu, Bohol and Palawan. I also went out to another province for a source camp without knowing for certain what I’d be experiencing. All those traveling gave me a different perspective on myself, life and dealing with other people. I’ve deepened my friendship with other people throughout those travels and I’ve gained new friends. Not everyone of them are here in the country though. But that’s fine. Whatever they shared about their culture and their experiences is something I could take with me as I go through life.

This year, I’ve picked up a new skill. Well, sort of. It’s sewing with a sewing machine. We’ve cosplayed with our own costumes this year. That was something really fun And I also sewed a plushie for a friend’s magic show. It wasn’t perfect but I’m glad he used it. That was a challenge for me and I’d like to make more plushies in the future. This interest in sewing is because of my growing interest in fashion. Started out with gothic and lolita fashion, as well as steampunk. But I’m also getting interested in Korean fashion because it’s quite accessible to me. Some friends and co-workers who love fashion and crafting are always eager to to share what they know. We’ve been wanting to have days for crafting and as I’ve started learning about hackerspaces I think that we should probably have one too. Not just for crafting but for geeking out too since we’re all geeks and nerds anyway.

I also had Bell’s palsy for a while. That was pretty awkward. Thankfully I didn’t really have it for a long time. Though I can feel my eyelid drooping from time to time I just do some exercises to make sure it will be fine. Same thing goes for my mouth, when the muscles around it feel like they’re getting stiff. But in general it’s been pretty much ok.

Towards the end of the year, somehow I still feel like I haven’t found my place, so to speak. But I’ve had quite a blast with old friends and new found ones. It wasn’t a smooth ride at all but I’m with friends who have helped me solve issues I’ve encountered. That’s why at the end of it all, I’m thankful.

Avatar was awesome~!

clair — Tue, 22 Dec 2009 02:03:34 +0000

It was a visual feast for me when we watched Avatar at Glorietta 4 last night. The graphics was stunning! The movement of the characters, the creatures in that world, the world itself — everything looked so good. And the background music was great. I love those elements in the movie.

As far as the story goes, I love the way that it focused on the relationships of people. Sure there was a lot of action going on. However what left a deep impression on me was that it showed how important relationships are. That it’s beyond 2 people or a small group of people. Everyone’s connected somehow. As a moderately introverted person, it gives a bigger picture than what I am used to. I’d rather be with a small group of friends and focus there. But you see, as time goes by I also realize that there are things that matter to the collective. And that there are things that you must thwart or retain in order to have some kind of harmony and/or balance in the community.

Another thing I liked about Avatar is that it reminds me to understand people more. I know I am closed minded and judgmental but I don’t want to go to the extreme ends that those guys in the movie did. Tsk. They just wanted to gain something for their own good but not realize that there’s so much harm for the rest. And for the rest who will be affected, I was encouraged to fight for the things I believe in. During these days, especially with the corruption in government and all that crap, I feel the need all the more.

So yes, I definitely liked Avatar. It had some flaws too but the overall enjoyment wasn’t ruined for me.