HOW TO USE RICH FONTS IN UR DESIGN


var federated_media_section = '';

Subscribe to MAKE Magazine Today!
HACKS:
Clever solutions to interesting problems.
');
document.write('Welcome to Hackszine - from the makers of MAKE and CRAFT');
if (commenter_name) {
document.write('My Account');
document.write('Logout');
} else {
document.write('Login');
}
document.write('RSS');
document.write('');
//-->
Welcome to Hackszine - from the makers of MAKE and CRAFT
Login
RSS
Search Hackszine
Most recent posts: page 1 of 6 1 2 3 4 5 6 >>Browse the complete archive by category or month.
-->
November 13, 2007
Sculpty Earth: topographic globe with dynamic weather in Second Life
New World Notes posted an interview with Zora Spoonhammer, a Second Life hacker who created an enormous in-world earth model, complete with dynamic weather that's pulled from real world weather sources:
"Come back up here!" Zora Spoonhammer shouts after him, before he disappears over the horizon. "He's my husband in real life. He's silly that way." She's a developer in the game industry, she explains, "and I think some of it is women in games don't get a lot of recognition in the industry as is. So he's sensitive to that." On the other hand, few men have wives who build dynamic planets in their spare time.
Sculpty Earth's model is generated by a C++ program, using USGS elevation data to define the model's geography. The Earth's textures are processed and down-rezzed from NASA's Blue Marble images, and there's a semi-transparent shell that surrounds the globe, displaying an animated cloud texture. The cloud texture is generated from real-time data and displays the last 24 hours of real life weather history.
Zora talks about a lot of the data sources that were used and links to a few resources for building your own SL models and software. Definately worth a read if you are interested in mapping applications or developing apps in Second Life.
SL Topographic Globe With Dynamic Weather - LinkBlue Marble - Link
Posted by Jason Striegel Nov 13, 2007 07:43 PM Gaming, Mapping Permalink Comments (0) TrackBack Digg It Tag w/del.icio.us
-->
November 12, 2007
OLPC telepresence robot
Instructables hosted an iRobot Create competition a little while ago, and one of the third place winners was Damon Kohler's OLPC Telepresence bot. It mashes two of my favorite consumer product designs into a cute mutant bot that's controllable via a web interface.
Rather than a huge electronics/robotics exercise, this project is fairly accessible to anyone with a little programming know-how. Aside from some simple wiring, the majority of the work is in the software. Damon has created a high level Python interface, called PyRobot, for controlling the Create and interfacing with the OLPC's webcam. With an afternoon of effort, you could be hacking your own little telepresence bot that you can view and control over the internet.
OLPC Telepresence Instructable - LinkPyRobot - LinkOLPC Telepresence Project Blog - Link
Posted by Jason Striegel Nov 12, 2007 07:15 PM Electronics, Linux Permalink Comments (0) TrackBack Digg It Tag w/del.icio.us
-->
November 11, 2007
Lego Autopilot
Chris Anderson came up with a kid-hackable UAV, the GeoCrawler 2, using an RC aircraft and a Lego NXT:
Features: In GPS mode, unlimited pre-programmed waypoints, with programmable options such as circle and hold. Ability to integrate other sensors, such as ultrasonic, compass, gyros, accelerometers, or barometric pressure (altitude). With optional bluetooth cellphone integration, control via text message, including dynamical-changed GPS waypoints, "come home" and "circle" commands, etc.
Instructions for the GeoCrawler 2 project are available at Chris' DIY Drones site, a growing social network for folks interested in building unmanned arial vehicles.
This is really an underexplored area of amateur robotics, primarily because it's been so cost prohibitive until very recently. I'm excited to see what people come up with over the next year or two. I expect it will be mind-blowing.
GeoCrawler 2 (Lego Autopilot) Instructions - LinkDIY Drones - Link
Posted by Jason Striegel Nov 11, 2007 09:26 PM Electronics, Flying Things, LEGO Permalink Comments (0) TrackBack Digg It Tag w/del.icio.us
-->
November 10, 2007
Third Hand++: DIY improvement on the classic "helping hands"
I use the standard Radio Shack "helping hands" tool a lot when I'm working on electronics. It's pretty useful for holding components in the right place while you're soldering or working with small parts. They can be a bit of a pain, though, because the little alligator clips tend to move around, causing components or wires to wiggle out of place while you are working. There are a few positions that the arms work well in, and many configurations in which they are just not articulated enough to function well.
Instructables user rstraugh has a nice do-it-yourself solution to this problem: Third Hand++, a multi-armed, modular tool made out of adjustable coolant hoses.
I was familiar with the adjustable coolant hose systems used to spray coolant at cutting tools in the machining industry and thought that would be a great place to start. I ordered various nozzles and hose segments from my favorite online machine tool supply company and started experimenting. This is what I came up with. While it still has plenty of room for improvement it has served me well over the last 3-4 years.
These arms can be placed into pretty much any position and they will stay there.
Another nice feature is that you can make all sorts of attachments for holding whatever you need to work on. So far I've made a circuit board holder, a clamp, a mount for an LCD, and an extraction fan for keeping fumes out of your face.
The cost? About $20.
The modular attachment idea is the real killer feature here. In addition to circuitboard and probe holders, you can also make grounded or powered arms. Heck, why settle for 3 arms? I wouldn't mind a big workbench octopus.
Third Hand++: A multi-use helping hand for electronics and other delicate work - Link
Posted by Jason Striegel Nov 10, 2007 07:21 PM Electronics Permalink Comments (0) TrackBack Digg It Tag w/del.icio.us
-->
November 9, 2007
HOWTO - Use rich fonts in your web design
Only Two Cross-Browser Web FontsIf you want to choose fonts that will look similar across most modern browsers you have two choices: Georgia and Verdana. Yeah, there are a few other fonts, such as Times, Arial, Helvetica, etc., that are available on all platforms, but they tend to look really nice on one platform and really crappy in another. Or they look nice in both, but the kerning or the letter height will be different for the exact same font size.
The web is a boring, two-font world.
Here's the thing though. Georgia and Verdana are really decent screen fonts. For large blocks of body copy, they provide you with a very respectable serif and sans-serif font option. When it comes to titles or navigational elements, however, you often want something that will stand out from the rest of the copy on your page.
Fonts in GIFs: The Old WayThe typical solution is to create your titles and nav buttons in Photoshop, then cut GIF images for placement in the web page. This lets you use any font face you desire, ensures that things look exactly the same in all browsers, and takes an extraordinary amount of extra effort.
If you want to put slick looking titles on your blog posts, this method will probably have you in a big white coat with extra long sleeves before a month is up. Even worse—hey, some of us look good in white—if you're using images for navigation or titles, the text isn't selectable, it isn't search friendly, and it's probably a nuisance for people who use screen readers to navigate your site.
sIFR: The Better WaysIFR is a little Flash/CSS/Javascript hack created by Shaun Inman and maintained by Mike Davidson and Mark Wubben. It uses Flash's font-embedding and rendering capabilities to place whatever typography you like in your site. What makes it different from the GIF method is that you develop your site with plain-ol' HTML, apply normal CSS classes, and if your browser supports Javascript and Flash, sIFR replaces the text on page-load with the desired typeface.
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:
A normal (X)HTML page is loaded into the browser.
A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".
Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.
Essentially, you can have the titles on your site render in any font you like by just adding a few lines of Javascript to the page template. Search engines and screen readers will still see normal HTML text, you can still use traditional fonts in your CSS classes so that it degrades gracefully on unsupported browsers, and the other 95% of browsers out there will render your site exactly as you designed it, regardless of platform. Oh, and you can select your fancy text too.
Seriously? Flash can used to improve web design _and_ promote web standards, accessibility, and indexability... This has been available for a couple of years, but I'm still left scratching my head.

Comments

Popular Posts