Web Teacher » Mac

Useful links: media queries, next 6 billion, iOS5

vdebolt — Fri, 28 Oct 2011 13:05:15 +0000

Essential Considerations for Crafting Quality Media Queries from zomigi. Anytime Zoe takes the time to write about CSS, it’s worth reading and this article is particularly timely.

The Next 6 Billion. I’m already seeing references to “the next 6 billion” as a phrase that everyone seems to understand and that carries a lot of background meaning with it, so I suggest you check the original article by John Allsopp to see what it’s all about.

In the good to know category, check out Use Text Macros on your iPhone and iPad with iOS5.

RIP Steve Jobs

vdebolt — Thu, 06 Oct 2011 12:48:14 +0000

Image Credit: Jonathan Mak

Useful links: HTML5 forms, common HTML5 mistakes, Lion, Dropbox, and Bloom’s Taxonomy

vdebolt — Wed, 27 Jul 2011 15:01:09 +0000

The latest on browser support for HTML5 forms. From wufoo.

Avoiding Common HTML5 Mistakes from HTML5 Doctor.

Reading is Easier on Safari with Lion – Here’s Why from Mac Tips talks about several new features in Lion.

Use Dropbox to Test Your Website Locally from Digital Inspiration is sure a lot less expensive than Browser Cam.

Bet you never thought you’d see Bloom’s Taxonomy mentioned on A List Apart, but here it is. The UX of Learning.

Useful links: Triberr, Hidden, WebVTT

vdebolt — Tue, 28 Jun 2011 12:24:09 +0000

That Tech Chick has a post about a new social tool called Triberr. You might want to give it a spin to see if it increases traffic to your blog.

Hidden is a nice app for Macs. If your Mac is stolen, it sends you a location and photos of the thief.

Recent developments around WebVTT.

People have been asking me lots of questions about WebVTT (Web Video Text Tracks) recently. Questions about its technical nature such as: are the features included in WebVTT sufficient for broadcast captions including positioning and colors? Questions about its standardisation level: when is the spec officially finished and when will it move from the WHATWG to the W3C? Questions about implementation: are any browsers supporting it yet and how can I make use of it now?

WWDC 2011: The Musical

vdebolt — Wed, 08 Jun 2011 12:24:18 +0000

I could have saved myself a lot of typing yesterday. All you need is WWDC 2011: the Musical.

Useful links: Facebook app, Mac malware, iOS 5 rumors, Wells Fargo settlement

vdebolt — Wed, 01 Jun 2011 15:01:56 +0000

Turn your Facebook profile into a virtual museum. Might be a good way to take a look at what you’re sharing and whether it’s really what you want to be sharing.

Mac OS update against Mac Defender.

Twitter Getting Photos in Order Ahead of iOS 5 Integration. Just a few days until Apple announces what’s up with iOS 5, and these rumors are among the most interesting I’ve seen.

Wells Fargo will pay $16 Million to users who experienced accessibility issues with their phone and website services.

Useful links: CSS selectors, OS X shortcuts, Postel’s law, Bob’s Birthday

vdebolt — Wed, 09 Feb 2011 14:09:53 +0000

Understanding CSS Selectors at Script Junkie. Great explanation of attribute selectors, including how to style with attribute selectors when using ARIA roles and forms. The article also explains how to use more than one attribute selector to create styles.

Want to look like a real computer whiz on your Mac? Study A selection of Mac OS X keyboard shortcuts at 456 Berea Street for some lesser known shortcuts that will speed up your day.

Adactio was talking about Going Postel today. He said,

As long as we use progressive enhancement, the front-end stack of HTML, CSS, and JavaScript is remarkably resilient. Remove JavaScript and some behavioural enhancements will no longer function, but everything will still be addressable and accessible. Remove CSS and your lovely visual design will evaporate, but your content will still be addressable and accessible.

I had to go look up Postel’s Law to see what he was referring to. Just in case you’ve never heard of it either, here’s how Wikipedia describes it:

In computing, the robustness principle is a general design guideline for software:

Be conservative in what you send; be liberal in what you accept.

The principle is also known as Postel’s Law, after Internet pioneer Jon Postel, who wrote in an early specification of the Transmission Control Protocol that:

TCP implementations should follow a general principle of robustness: be conservative in what you do, be liberal in what you accept from others.

Today’s is Bob Marley’s birthday. And I cannot resist an occasional foray into the off topic land of iconic music. The wonderful organization Playing for Change has given us this in celebration of the day.

Useful Links: YouTube edu, Mac news, Privacy

vdebolt — Thu, 21 Oct 2010 15:03:13 +0000

100 Incredibly Useful YouTube Channels for Teachers may give you some helpful resources.

Apple’s “Back to the Mac” Event: All the Announcements at Mashable is a nice summary of recent announcements. No more CD slot – time to flip a switch in your brain to flash drive for everything.

Tracking the Companies that Track You Online is a podcast from NPR’s Fresh Air. It’s an interview with Julia Angwin of The Wall Street Journal that looks at how tracking companies, data brokers and advertising networks work.

Useful links: Tutorials, content strategy, iOS4, and some good advice

vdebolt — Thu, 19 Aug 2010 13:33:03 +0000

Think Vitamin has a set of video tutorials that can be viewed free. Some look suitable for classroom use.

Content Strategy Roles and You has some great ideas for organizing your workforce to fill content strategy roles. Be sure to check out the great infographic on approaches to web content strategy.

Speaking of content strategy, find out what’s coming in The Elements of Content Strategy and let the author know what you’d like to see there.

Immediately Improve iOS4 Performance with these Tips is some news you might find you can use.

The Web Design Community Offers Advice to Beginners is an inspiration and a cautionary tale at the same time. Good reading for students and instructors alike.

Embedding fonts the Google Way

vdebolt — Tue, 08 Jun 2010 12:48:30 +0000

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.