Mac Archives - Page 3 of 8

Embedding fonts the Google Way

For a while I toyed with the idea of using embedded fonts to liven up my web pages. I would read articles on how to do it and get discouraged. Some browsers needed one kind of font, some another—it was too much bother.

Then Google came out with a font embedding system that is dead easy. You can get started with them at the Google Font API page.

For completeness, I must add other sources for embeddable fonts. One is Font Squirrel. It uses a different technique involving the CSS @font-face declaration. With Font Squirrel, you download the font and put it on your server. TypeKit sells access to embeddable fonts, which are on their server network. TypeKit has many more fonts than the free sources do. The price structure on TypeKit is very reasonable.

The How To

Google’s tools are the easiest to use. Here’s how you would use Google fonts.

Pick a font you like from the Webfonts page.
Click a font you like. You see it in various sizes. Click the Tab that says “Get the Code”
There are two code snippets. The first you paste into the head of your HTML document. Make it the first thing in the head. (I’ll get to why in a minute.) I wanted to try the Cantarell, so I pasted this code into my web page.
The second code snippet goes into your CSS file. I changed it up a bit to include three sizes of headings and default to sans-serif rather than the serif in their example code. Here’s how my CSS looked.
Upload the HTML and the CSS to your server and take a look at your page. (You may need to refresh the page.) Here’s how Cantarell looks on my web site.

The Caveats

The Google fonts work with most browsers, but with limits. One limit is that you need a pretty up to the minute version of any browser to see the magic. That means don’t remove that old font rule in your stylesheet, just put the new one calling a font from Google after your original rule. If the browser doesn’t know the embedded font magic, it will still show your original font.

The other limit is download time. If you have a lot of users with dial up, mobile users or users with slow connections of some other kind, you may want to stay away from the idea for a while longer. It’s whiz-bang fast with cable or DSL, but that may not be who your web page targets.

It works in Google Chrome versions 4.249.4+. Chrome renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font. This may cause a problem with slow connections. Apple Safari versions 3.1+ work. Like Chrome, Safari renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font. The same thing applies in Internet Explorer versions 6+. The reason the LINK element you paste into the document head must go first is because of Internet Explorer. If it isn’t the first thing there, the whole page may not render.

The fonts work in Mozilla Firefox version: 3.5+. In Firefox, the first display is the text in the default font. Firefox then re-renders text in the web font once it has loaded. So, the user sees something, but it may change appearance unexpectedly when the connection speed is slow.

For Opera versions 10.5+, Google mentions no problems. Imagine that.

In one of those interesting coincidences, A List Apart published Web Fonts at the Crossing today, which gives the insatiably curious the whole story on web fonts.

More than one way to kill Flash

Apple announced a new HTML5 demo site. The site features all sorts of HTML5 demo projects, with the video demo coming right at the top of the list. There are demos on transitions, typography and more. Viewable in Safari, naturally. (Insert snark here.)

At the bottom of the page, there’s a subtly placed link to Steve Jobs’ article explaining why iPhone and iPad don’t support Flash—in case you didn’t make the connection to Flash from the rest of the page.

To me, the interesting part of this effort from Apple is the link to the developer information about the demos. You can pick up examples, instructions and code. There might be some gems useful to educators among the instructions.

Useful Links: DW CS5 HTML5 Pack, Togetherville, synthetic cells, something’s happening here

Adobe Dreamweaver CS5 HTML5 Pack is a free extension. Sorry, it only runs on CS5—can’t retrofit older versions of Dreamweaver.

Togetherville: Walled Garden Social Networking for the Younger Set. There have been social networks for young children before, but this one is making news right now. I’m wondering what educators will do with this new site.

Scientists Create First ‘Synthetic Cells’ is a bit off-the-web-design-topic, but it’s fascinating news from the scientific world that may have far reaching implications.

Something’s happening here. People used to be either a Windows person or a Mac person. Now Android is outselling iPhone, Google has a new store in direct competition with iTunes, the number of Android apps is growing fast. When we weren’t looking the world changed to a place in which you are either a Google person or a Mac person.

Useful Links: Accessibility tweeps, NFB Complaint, 3G woes

The ultimate “follow Friday” list for accessible tweeps or perhaps it would be more correct to say people who tweet about accessibility. Oddly, the names in the list are not linked to the relevant twitter pages, making following the suggested people rather labor intensive. One Twitter name on their list is wrong. Tom Babinszki is @tbabinszki, not what their post says. Complaints aside, it’s a useful resource list for those interested in accessibility information on Twitter.

Law Schools Discriminate Against Blind Applicants: National Federation of the Blind Files Complaints Against Nine Law Schools. This action from the National Federation of the Blind may have far reaching consequences similar to what happened with the Target lawsuit.

The other day someone was asking my opinion about whether to not to buy an iPad, and if she did, whether it was worth the extra hundreds to get an iPad with 3G capability. My position was go for the 3G if you’re going to do it. I think it’s a good policy to start with the maximum capability you can get in a new device. It you start from the lowest point, you have to upgrade almost immediately to keep the device useful for a period of years. Then yesterday, something happened to several AT&T towers in the Albuquerque area, and my phone lost service for the day. After repeated attempts to get through to AT&T from my neighbor’s land line (I don’t have a land line) I finally talked to someone at AT&T. They had me turn off the 3G capability on my iPhone and use the Edge network until the 3G problem was fixed. I was stunned by how slow service was using the Edge network. Honestly, I’d never realized what a significant difference 3G makes. Now I can speak from experience when I tell people that they should go for the 3G if they are going to spend the money for a device of any kind. And, by the way, 3G is back in working condition in my part of Albuquerque today.

Useful links: Funny stuff, press Enter, VoiceOver

Need a laugh? How to Successfully Educate Your Clients on Web Development at Smashing Magazine is really funny.

Who moved my Enter key? from Know IT describes the role muscle memory plays in keyboarding. Personally, I’m still waiting for Mac and Windows to agree on the location and function of the Ctrl/Cmd keys. Moving from Mac to Windows and back again is like getting into a car and discovering that the brake and gas pedal are reversed in this particular model. Once you get it working, you go back to the other car and have to learn it all over again.

iPhone VoiceOver Features for People with Disabilities is an informative video describing the iPhone VoiceOver accessibility features.

Useful links: Flash vs. HTML 5, Creative Suite 5, Women in Tech on Flickr

With typical hyperbole, the news of late has been filled with headlines like “Flash is dying” and “Apple kills Adobe Flash.” Well, here’s a headline that shows that Adobe hasn’t been asleep at the wheel in quite the manner all the iPad prognosticators thought: Flash CS5 with export to HTML5 Canvas.

While we’re talking about Adobe and CS5, today is the big day to reveal all the hot new features in CS5. Start here at the Adobe blog and at the product descriptions to find more about what the latest Creative Suite promises to do. People have been talking about some of the new features in Photoshop for a while already, but I’m more interested in seeing what’s happening with Dreamweaver.

The Women in Tech pool I started on Flickr is growing. If you have some photos of women in tech you’d like to share, please add them to the group.

iPad frenzy and The Story of Stuff

The past few days there have been hundreds of stories about the release of the iPad. Stories about standing in line to buy it, stories about why it’s a great product, stories about why it’s not a great product, stories about why you should buy one, stories about why you shouldn’t buy one.

It’s a media frenzy around the shiny new tablet from Apple.

I am not one to talk. I’ve written about the iPad myself. I’m part of the frenzy.

How did you feel watching this barrage of iPad stories? Did you feel that there was something wrong with you if you weren’t standing in line outside an Apple store? Did you have an undefinable urge to buy one, or envy someone who had one when you didn’t? What emotions did the iPad bring up in you?

I’ll confess first. I’d love to have one. I love techy gadgets, I’m a Mac person. I’m sure I would feel wonderful if I owned such a sleek and beautiful device. So my emotions ranged from longing to envy to just feeling bad because I didn’t buy one like all the cool kids. Sigh.

During the same few days the iPad frenzy was going on in the media and blogosphere, I was doing something else. I was reading a book called The Story of Stuff by Annie Leonard. There’s a storyofstuff website and a video.

The video came out before the book. It encapsulates most of the points in the book into a 20 minute visual with commentary from Annie Leonard. I hope you’ll take the time to watch it. Afterwards, I want to discuss a specific aspect of the book that may make you feel better if you are struggling with whether or not to buy an iPad.

In “Chapter 4: Consumption” in The Story of Stuff, Leonard describes a phenomenon of consumerism that is based on social comparisons. She says,

. . . our sense of wealth and material well-being is relative; that is, it has to do with how much Stuff we have compared to other people. So, if we’re hanging around a bunch of ostentatious spenders, we feel poor. If we’re hanging around with people who are lower than us on the economic ladder, we feel rich.

Leonard talks about how our sense of comparison has expanded. We aren’t just trying to keep up with the Joneses next door, now we’re comparing ourselves to millionaires and celebrities that we see on TV. She credits Juliet Schor who wrote The Overspent American for the concept called “vertical expansion of our reference group.” We’re now comparing ourselves with a much wider group of people than ever before. Leonard tells this story about wanting to buy a new pair of shoes every time she was in Manhattan.

I’d see women with gorgeous designer shoes everywhere. I’d just have to buy a new pair of shoes even though—believe me—I really do not need any more shoes. It was irresistible. . . . Then I read Schor’s book. In my experience, a powerful way to free oneself from an unhealthy dynamic is simply to name it. Now when I am in Manhattan and I get that rush of need, I can call it out: “There’s that vertical expansion of my reference group thing again: just gotta hang on until I get home,” and I can walk right past those shoe stores.

Leonard’s tale about the vertical expansion of a reference group really resonates right now. Everyone everywhere is talking about the iPad, and I’m wishing I could rush out and buy one, even while I know I don’t need it and can’t afford it. Reading The Story of Stuff made me realize that I could use her mantra: “There’s that vertical expansion of my reference group thing again: just gotta hang on,” and I’d be able to get through the frenzy and come out on the other end with no iPad.

Am I telling you not to buy a iPad? Absolutely not. It may be the perfect thing for you. But if, like me, you know you don’t really need it and can’t really afford it, I’m telling you that you don’t need to feel bad about not buying one. In fact, you can even feel good about consuming less Stuff.