Picking a CSS framework.

Posted on by
Reply

I really like the 960gs, but I want to make an adaptive site. So I’ve been on the hunt for a css framework that includes 2 things: a set of media queries, a set of grid classes.  It’s been frustrating since many of the frameworks seems to have one but not the other. Of course I want to get this up in < 1 day. So far I think Simple grid is the best followed closely by Skeleton.

Frameless grid

  • Very little documentation. Seems to require LESS framework compiling?
  • Can’t figure out how to use quickly
  • Stack overflow: How to read less css

Less grid

  • Still have to define pixel widths for each media format? slow!

Skeleton

  • based on 960gs
  • Worried about page load, unminified, non-cdn
  • Have to Redefine lots styles.

Simple grid

  • Nice nesting of columns.
  • Seems the easiest to start up.
  • Worried about page load, unminified, non-cdn

Sifteo Cubes: Notes on Developing

Posted on by
Reply

Warning Sifteo cube development is still very ALPHA. And as usual, Documention is sparse/erratic. Here’s my personal notes trying to “get started”.

  • Need to download Sifteo’s developer’s kit, SiftDev SDK. It includes:
    • 6 Demo projects, with some brief documentation on features used
    • SiftDev, a developer’s version of Siftrunner
    • Siftulator (A cube simulator – kinda broken!)
  • Download & install the MonoDevelop (the IDE that your use to compiles/runs the apps)

Running the demos:

  1. Open up the MonoDevelop app.
  2. Open up the .sln project.  File > Open Project > … navigate to the demo folder and find the demo you want to run
  3. Fix the broken project references.
    • Project > Edit references
    • Delete the reference to Sifteo
    • Find the Sifteo.dll file by navigating to the Sifteo_SDK/Siftdev.app/Contents/Resources/Runtimes/Mono/Current/Sifteo.dll
    • Click Add, and it will appear in the right pane.
    • Hit OK to apply changes
  4. Run the code. Menu Run > Run
  5. Open up the SiftDev app.
  6. Connect/pair your cubes
  7. Load the app by going to the Developer menu > load apps… > Select the folder of the demo
  8. Click on the app and hit Play!,

PS: I’m running Mac 10.6.8, SiftDev 1.1.2, MonoDevelop 2.8.6.5, Siftulator 00_05_09

Sifteo Cubes: Review

Posted on by
Reply

Mom gave me a set of Sifteo cubes for my birthday. I took them out for a trial run that weekend, but haven’t sat down with them to develop until today. (Potentially) awesome gift?

Here’s the lowdown:

  • For about $150, you get 3 cubes, a charging/storage box, and a wifi adapter usb dongle.
  • To play with your cubes, you must have a base computer to run the Siftrunner app. This app hosts the games that communicates (via the usb dongle) to your cubes.
  • In the Siftrunner app, you can switch games, purchase new ones (using their credits), and pair/disconnect 1-6 cubes. Currently only 19 games on the marketplace.
  • The cube inputs/sensors include: 1 main button (on the screen), an accelerometer, a 129x129px display, NFC sensors along the edges (detects contact between cubes)

Pros:

  • Lots of potential. Input methods are diverse.
  • Build quality: The cubes feel solid, screens are bright, button is buttony
  • I like the charging box. Great idea. Nice that the dongle hides inside when not in use.

Cons:

  • Don’t like having to have a computer host without the ability to use it as an additional input/output device (Although it outputs an app’s sounds- which is odd.)
  • Wish an ipad or tablet could host.
  • Already bored with the games. With only 19 games and no near plans for a paid marketplace, hard to justify developing new games. (forum posts mention developers should use a paypal donate button. Seriously?)
  • Their “Creativity Kit” is very very limited. It allows you to make a list of “Put 3 words in the right order” puzzles.
  • Pricey for potential

Final word

By themselves, I think Sifteo cubes are kind of lackluster. To be honest, I even feel a little cheated for my mom’s sake. Sifteo used the media to drum up a noise for the holiday push before their games and infrastructure was even ready for prime time. I saw them at a GDGT event back in November 2011, and they didn’t have any games running at the time. Now I see that they still have ways to go. Until they get a better infrastructure for developers (a payment method), I can’t truly see it as a viable game system/platform or even endorse it for my friends.

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.