Mobile app – part 2

Posted on by
Reply

Ok- so after going to a phonegap SF meetup tonight- I got super excited and needed to get something done tonight. I needed to get something small done since I only had about 3 hours.

Goal: Generate & show QR code on iphone simulator

  1. Started by following this tutorial on embedding a map:
  2. At first I couldn’t click on links or view external images. Was baffled until I noticed errors on bottom panel.
  3. Next I gutted the code to just show a url of an image.
    • Google has a nifty qr code generator. Based on the url, google will return a qr png image.
    • function run() { var url = “https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=Hiya”; document.getElementById(‘map’).setAttribute(‘src’,url); }
  4. And that’s it! Run and done!

Next up: Reading QR codes…

Seems like there’s 2 main phonegap iphone plugins: ZXing and ZBar. I need to read up on both.

Edit- Ok I lied- I got bored and decided to add a form submission to change the qr image. I used jquery mobile to get the quick and dirty styling. ~1hr (’cause I forgot how to handle forms)

Mobile app experimentation

Posted on by
Reply

Everyone tells me that two fields are rather hot right now in design: UX (User experience) and Mobile design. So, in the two weeks I took off for the holidays, I figured I’d do some dappling in some mobile app creation starting with a simple iPad game. I want to document some of my thoughts around the process as I go through it- just in case I forget (always)

  1. Purchased IOS Dev account.  $99  (Actually $107 w/tax)
  2. Downloaded Phone gap for iPad
  3. Downloaded  & installed xTools on Apple’s site (>4gb! So large a download!)

Tools Used

  • Phonegap
  • jQuery mobile
  • Sencha?
  • Crafty

Articles read

Update 12/26: Got phonegap working on xTools

Was able to get phonegap up and running. Basically allows you to use js instead of ios. You still use xTools for the iphone simulator and the deployment of your in-process project. It’s pretty wild to see your own ‘app’ on an iPhone.

Update 12/28: Trying out Crafty JS

Saw Crafty JS was a good game JS library, so I’m trying it out following this tutorial.

Chinese language tips for web design

Posted on by
2

Update 2010, Oct 26 – New discoveries, much better font reference confidence

Recently I needed to work with some Chinese and we had tons of trouble trying to figure out which fonts to use and how to specify them in CSS. After a lot of detective work and comparing long font lists we found some basic font choices that should work on both PC and Macs that have Chinese language packs active. The process was PAINFUL…

After several months, this is coming up again as we define our style guide. I found a new article which describes and provides screen-shots for 5 common mandarin fonts. He lists in order,

  1. 宋体, Song Ti, a serif font very common in site font declaration
  2. 黑体, Hei Ti, a sans-serif. (We picked this one for body text)
  3. 幼圆, You Yuan, a rounded font like comic-sans without the stigma.
  4. 隶书, Li Ti, a brush script.
  5. 微软雅黑, Microsoft Ya Hei a sans-serif, supposedly not fully supported yet designy

Some [updated] Chinese Website tips:

  1. Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters. font-family: futura, arial, Hei, “微软雅黑”, “宋体”, sans-serif;
  2. Standard chinese sans-serifs are: 黑体 (Hei ti), 微软雅黑 (MS Yahei)
  3. The standard chinese serifs is: 宋体 (Song ti)
  4. Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=”utf-8″>
  5. My final recommendation for a sans-serif font stack is: font-family: arial, 黑体, 微软雅黑, 宋体, sans-serif;

References:

Augmented Reality – Test 1

Posted on by
1

Yukiko's test of Augmented reality

I just got my augmented reality demo to work! It was really easy – Just one afternoon of work. To try it out you need: A webcam, a printout of this page. Click on this link and hold up your printout to your webcam in order to play with the demo.

I pretty much followed this video tutorial by The Flash Blog. It describes how to use the FLAR and Papervision 3d toolkits with Flex to detect a symbol in a video feed and map a 3D model to its plane. I just adapted his tutorial to Flash. (I’ll post my .FLA shortly)

Here were my overall steps:

  1. Download FLARToolkit
  2. Download Marker Generation tool (Air app)
  3. Made marker in Photoshop and printed it out
  4. Ran the Marker Generation app and saved a .pat pattern file
  5. Created FLARdemo.as class file, Flardemo.fla
    • in the .fla, declare Flardemo object, add to display
    • setupFLAR() – import .pat file
    • setupCamera()
    • setupBitmap() – load video feed into flartools
    • setupPV3D()
      • Create scene, camera, container
      • create lights, materials, objects
      • Create render engine, FLAR trans matrix, viewport
      • Add to display list
    • Create onEnterFrame event handler
      • Feed video to FLAR
      • test for symbol detection, if yes then,
        • get and set transform matrix
        • render papervision!
Some overall troubles and solutions included:
  • Since in Flash, not flex, I needed to declare, create, and add to display list a FLARdemo object in my .fla file. This wansn’t described in the Flash blog tutorial.
  • Also since I was working in Flash, library imports were a bit more complicated. I eventually gave up and cut/pasted from another tutorial that he was following. A less documented, but code provided tutorial is located here by a guy named Mikkoh.

A dream web design class

Posted on by
Reply

I have a question to poll the audience: If you were to create a new Web design intro class, what would you teach? There were plenty of holes in my knowledge left to fill after my first class (still are plenty of them), but what would you propose adding? Here’s my take on an intro web design class. Do you have anything to add/remove? Let’s be brutal!

Continue reading →

Band Album Cover: Pogonomys Championi

Posted on by
Reply

albulmCover

I finally decided to try my hand at the music album cover design challenge. The rules make it so that you get a random picture, band name and song title and then design a cover for such a selection.  Ivan describes the exact rules in his post.

Here is my cover art  for Pogonomys Championi, playing their hit single, “homework formerly eaten by the dog”. I liked the idea of pairing the light quirky background with the dark silhouette of a laughing dog. I tried to convey indie rock band with mayan flavor. The band logo is of course their champion mouse.

References: Pogonomys Chamioni is a tree mouse. The song title is a quote from Doug Larson, “Home computers are being called upon to perform many new functions, including the consumption of homework formerly eaten by the dog”. Original Photograph by ATLITW.