Orangutangy

Chinese language tips for web design

Yukiko — Fri, 14 May 2010 19:12:43 +0000

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. I want to archive them here just in case I need to reference this ever again since it was PAINFUL…
Some Chinese Website tips:

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, “Microsoft YaHei”, “MS Yahei”, “宋体”, sans-serif;
Standard chinese sans-serifs are: Hei, HeiTi or “Microsoft YaHei”
Standard chinese serifs are: “Fang Song”, or “宋体”
Set a meta tag to display chinese charset: utf-8.

References:

Creating Chinese web pages

Augmented Reality – Test 1

Yukiko — Thu, 01 Apr 2010 22:43:55 +0000

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:

Download FLARToolkit
Download Marker Generation tool (Air app)
Made marker in Photoshop and printed it out
Ran the Marker Generation app and saved a .pat pattern file
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

Yukiko — Wed, 08 Jul 2009 01:55:40 +0000

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!

Class Objectives

At the end of the class, students will have a solid foundation in designing for the web. Students will also gain researching skills to extend and adapt their technical knowledge to the constantly-evolving web media.

Specifically, students will be able to:

Create, from start to finish, a fully-functioning website with limited interactive elements
Purchase hosting, domain names, and perform basic website administration tasks
Analyze target users to set site-wide design and content goals
Create clear navigation and site structure with attention to page hierarchy and UI design
Write valid HTML and CSS without use of WYSIWYG editors
Use CSS to style a page’s structure and text elements
Troubleshoot layout and basic code issues
Understand the current limitations of browsers and monitors
Be knowledgeable of current trends in web design
Create modular designs and provide specs for developer implementation
Strategize future improvements/updates to a page if given additional resources

Applications used

Adobe Photoshop
Text editor of personal choice
FTP program of personal choice
Adobe Dreamweaver (Optional)

Lesson Plan Overview

Basic website functionality

Browsers (what are they?)
Server-side vs client-side
Hosting, Domain names
FTP basics
File structure
HTML Tags: , , , , , etc…

Site architecture and Content development

Target user
Site depth and site maps
Page folds and call to action
Navigation standards (tabs, menus, breadcrumbs, footers)
Icons, Links, buttons
Language

Project: Create a web portal for linking to class work (HTML only. CSS not required.)

CSS basics

Linking methods (inline, per page, external, multiple)
Syntax: Selectors, inheritance
Containers
Margin, padding

CSS & Typography

Fonts
Spacing, color, line-height etc
HTML conjunction

Special characters

Images and color

RGB, Hex, web-safe

File types, size, transparency, animation, image maps

Monitors – Resolution, size

Browsers (display differences & percentage users)

Slicing strategies

Repeating backgrounds, gradients, rounded corners

Project: Design a restaurant’s website. (Simple portfolio piece using CSS typography for menu.)

Accessibility

Alt tags and metadata

SEO standards – uses and benefits

Web spiders, bots, crawlers

Screen Readers

Mobile devices

Forms and standard web components

Testing and scale

Code validation

User tests

Branding and adspace

Design style guides & specs

Analytics & user data

Modularity

Dynamic content (PHP & SQL, XML, web services)

Skinning

Content Management Systems

Further study: Languages, Browser functions (get/put/cookies/sessions), Flash, Weh services, UI

Final Project: Design and build a corporate campaign or product line mini-site
( Define current and new branding, navigation, content, sponsor pages, and provide design specs for future updates)

More dynamic/in-depth content – Out of class scope

Content Management Systems

php+Mysql concepts, uses: dynamic content

modularity and skinning

examples: WordPress, joomla, drupal, Ruby

Browser functions

get/put

cookies

sessions

Javascript

Forms

drop-down menus

shadowbox

XML

RSS Feeds

Dynamic Data (lead-in for flash)

Other languages

Flex, Actionscript 3, Java, Coldfusion

Web services

google maps

plug-ins

Band Album Cover: Pogonomys Championi

Yukiko — Mon, 01 Jun 2009 08:00:26 +0000

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.

Photoshop CS3+ Letterpress Tutorial

Yukiko — Mon, 04 May 2009 04:52:16 +0000

Here is a simple way to get a letterpress effect in Photoshop CS3 and above.

To summarize, you apply a bevel and emboss layer style to the area around the ‘imprinted’ art. For this tutorial, I will show how to make the effect and then use smart objects to warp it non-destructively.

Here’s my background card that I want to ‘letterpress’.

Create the art/text that will be imprinted

Create a color fill layer. Set fill to 0.

Mask out the area of the art layer. To do this, create a selection of the art by CTRL + clicking the layer in the layers pallete. Now select the Color fill’s layer mask fill the selection with black.

Add a ‘Bevel and emboss’ layer style to the color fill layer. Set the direction to ‘Up’ and adjust the depth, size, and opacity of the emboss style. (Press ok) These settings will change depending on the size of your document, but here’s a screenshot to start you off.

To warp non-destructively, create a smart object from the art and fill layer. To do this, select both the art and fill layer, right-click and select ‘Convert to Smart Object’. Now you can free-transform the smart-object and/or also warp it.

Complete!

Afterword:

You can change the art color afterwards without affecting the letterpress effect since it’s on the fill layer. However, if you change shape of the art then you will have to recreate the mask. Not too much work though right? If you have complicated art, I would suggest creating a smart object of just the art for easy selection. (Just one click as opposed to going through selecting layer-by-layer) Enjoy!

Put yourself in my shoes…

Yukiko — Mon, 13 Apr 2009 08:55:47 +0000

Tracy and I moved units after seeing this wonderful view. We wake up and come home to this. No drummers beneath us is also a plus.

Triptych x4

Yukiko — Mon, 15 Dec 2008 17:13:00 +0000

Here’s something I’m proud of: A card with 12 images on it. What does that make this? a dodecatic? whatever. Just a fun(?) exercise. I remember making things like this in school.

DVD drive not found – a solution!

Yukiko — Tue, 02 Dec 2008 07:18:00 +0000

My Toshiba has problems. That said, every now and then it can’t find it’s own DVD drive. No power no detection, nothing. I’m suspecting iTunes is the culprit but who knows. In any case I found out that there’s a simple solution posted around the web but I found it in a forum here.

Steps

1) Open regedit.exe (Start menu > run, type regedit, and the exe should be listed)

2) Locate the following reg file in the following path:

HKEY_LOCAL_MACHINE
SYSTEM
CurrentControlSet
Control
Class
{4D36E965-E325-11CE-BFC1-08002BE10318}

3) Delete the values for the Upper and Lower filters.

4) Restart

Real Estate Website Attempt #1

Yukiko — Mon, 24 Nov 2008 08:41:00 +0000

I’m building a realtor’s personal website. Since I have never worked with realty, I need to learn a few things about MLS searches. Here’s a quick summary of my learnings followed by some process.

1) There are many many MLS databases. Each area/firm/agent has their own. These databases are their secretly guarded stash of people’s homes and their connected agent. Agents have their own action list of homes. These can be managed by things like open realty, a myPhpAdmin but for homes…

2) Getting access to search MLS databases requires a realtor that is a member of the MLS owner group.

3) If permission is granted by the MLS Provider, one can create a query and ftp whichever listings you want to your own database. Permission may require $$.

4) Most often 3rd party companies just provide the code that figures out how to display the listing info. (A good webdev/designer should be able to do this decently)

5) Some companies offer to host the MLS info, but that just takes the place of the original MLS. Heavy lifting here depending on how many people input into the database. These services are really only useful for big agencies like Century 21 who supports hundreds of agents.

TRIED:

Installing Open Realty 2.5.5 into a test site -> success, easy

Installing WordPress into test site -> success, easy

LEARNED:

Open Realty 2.5.5 doesn’t actually querry an existing MLS but just allows realtors to input listings themselves. Not useful for me.

PLANNING TO:

Need to contact Century 21 and ask how to get MLS access. May need actual realtor to make call.

Tonight’s sketch

Yukiko — Tue, 11 Nov 2008 08:53:00 +0000

I should be asleep now but I was having too much fun sketching in photoshop… Just a reminder to everyone to have fun every now and then.