Stay Updated !
Seven years ago, Robin Sharp divided the lifecycle of a programming language into 7 phases:
Conception
Adoption
Acceptance
Maturation
Inefficiency
Deprecation
Decay
I think Robin is correct. Once a language becomes mainstream and reaches the “acceptance” phase, it’s only a matter of time till it becomes inefficient. This is because language designers face a dilemma:
… or …
Both directions have drawbacks.
In the former case, the language doesn’t keep up with the industry. Since the language is not “state of the art”, it only adds friction and inefficiency to the craft of building software applications.
In the latter case, the language is constantly evolving to meet the state of the art, but also collecting baggage and extra weight along the way as practices fall out of fashion. Eventually the language is so large and complex it again carries an inherent inefficiency.
Since its inception, we’ve seen the addition of generics, lambdas, and dynamic programming features to C#. These are all welcome additions for me, and make the language better.
At the same time we’ve seen the rise of new paradigms for functional and multi-threaded programming. I have to wonder if keywords like lock, volatile, and delegate are out of fashion, like skinny leather ties that only clutter up a tie rack.
Do the new features in C# 4.0, like the dynamic keyword, push the language solidly into the maturation phase? Or … after 10 years … are we passed the maturation tipping point where C# can only descend towards inefficiency?
What do you think?
When I installed Visual Studio 2010 a couple of days ago I was really disappointed to see that Intellisense failed to work completely in the new install. No workey in .js files, or ASPX pages inside of script blocks. After some back and forth with folks on the ASPInsiders list and the product teams it looks like there is an issue somewhere with the default settings that get set when Visual Studio 2010 first installs.
This doesn’t affect all installs, but there were handful in a small group of folks, so this is likely going to hit a few of you trying out Visual Studio 2010 as well.
To get Intellisense to work again, thanks to a tip from Luis Abreu, I ended up resetting my Visual Studio settings (Tools | Import and Export Settings):
then go ahead and reset to your preferred default profile (I typically choose the C# profile over the Web profile). This may seem counter intuitive immediately after a new install since I hadn’t changed any settings yet, but the reset did the trick.
And voila, Intellisense in JavaScript is back.
I suspect this has something to do with VS 2010 importing some existing VS 2008 settings, so even if you don’t have problems in VS 2010 it might be a good idea to actually reset all settings just to make sure there’s a clean slate to start with.
Hope this helps out some of you.
One nice feature that will be quite useful is support for CodeSnippet Expansion in JavaScript, which means you can automate common tasks with keyboard expansions. Since there’s no CodeRush for VS 2010 yet and I keep typing my CR shortcuts out of habit, I guess I’m going to fix up some my more common shortcuts as code snippets (especially for ASP.NET snippets). The main reason I didn’t use Code Snippets extensively in the past is because there was no support for ASP.NET and JavaScript but now there’s much less of an excuse. While I still prefer the ease and flexibility with which you can create new shortcuts in CodeRush, the VS Code Snippet functionality is relatively nice and easy and it’s built in and easily portable to other VS installations.
jQuery support (with the –vsdoc.js extension files) is now also baked in VS 2010 – jQuery Intellisense just works out of the box and it seems that Intellisense is much more snappy. No more long delays before it works even in large script files and quicker IS pop ups while typing. The JavaScript Intellisense engine (according to release notes) has been reworked to be more flexible and supposedly faster because of it and this first quick checks seem to confirm that.
There are also some improvements in the code formatting behavior which in the past drove me batty with its inconsistent Indenting, re-indenting, outdenting etc. It appears that now the editor gets the intended behavior right most of the time – the result is the auto-format is a heck of a lot less jumpy than it used to be. In a few tests of a script heavy app I’m working on the auto-indenting with often nested jQuery code ended up working predictably and not jumpy as in 2008. Not exactly a new feature but I’m just glad to see this working much better the way it’s supposed to.
Unfortunately the JavaScript editor’s improvements in general are rather minor. There’s still no code navigation of any kind (no function list drop down or class/function/navigator) which IMHO is the biggest shortcoming of the VS JavaScript editor. Disappointed as there was some discussion that this was a coming feature for the VS 2010 editor. Anything beyond Ctrl-F to find code inside of the JS editor would be useful.
Also Refactoring inside of JavaScript surely would be nice. At the very least renaming support is something I wish for in many occasions. Basic function extraction would be useful too as well as block optimization refactorings, but renaming really is the one I would like more than anything.
Anyway, it looks like minor improvements at this point and let’s hold out hope there may still be additional improvements by the time VS 2010 ships.
Show If is an online tool that will help you generate PHP code to easily target your visitors based on their browser, operating system, referrer, screen resolution, language and location.
Most of the targeting options are found from the browser’s header information. You can use this online tool to generate code that can let you show ads to certain users, customize your landing page, ban certain users, geo-targeting, etc.
You can put a keyword instead of a domain name in the referrer section. The referrer section searches the entire referring URL string for the word you enter, not just the domain name. If you want to target people who searched for the keyword “Free” you could just put that keyword in the referrer section.
The geo-targetting option runs off of the project at hostip.info, and allow_url_fopen must be turned on in PHP configuration (php.ini) for generated code to work. Visit Show If: http://showif.com/
You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.
 |
Let’s face it: Web-safe fonts are very limiting. Maybe a dozen fonts are out there that are widely enough adopted to be considered “Web safe,” and those ones aren’t exactly spectacular for much other than body type. Sure, Georgia, Arial or Times New Roman work just fine for the bulk of the text on your website, but what if you want something different for, let’s say, headings? Or pull quotes? What then?
You have a few options. Many people just opt for more elaborate CSS font stacks, with their preferred fonts up front. But that still leaves a big chunk of your visitors seeing the same old Web-safe fonts.
Enter dynamic text replacement. In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don’t use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.
sIFR (Scalable Inman Flash Replacement) was one of the first dynamic text replacement methods, developed in the spring of 2005. It uses JavaScript and Flash to convert any text you designate on a page to any typeface you choose and has been released as open source under the CC-GNU LGPL license, so it’s free for anyone to use.
sIFR is fully accessible to screen readers, because it simply displays the original text if JavaScript or Flash isn’t enabled. And because of the way text is rendered, if your visitors zoom in using a browser’s text-zoom option, the replaced text will also zoom in (only when the page loads, though, not if they zoom in afterward).
While sIFR is a rather complex system, its basic concept is simple: JavaScript checks to see whether Flash is installed in your browser. If it isn’t (or if JavaScript isn’t installed), it stops there and the visitor sees your text in whatever font you’ve specified in your style sheet. If Flash is installed, then the JavaScript measures each element on the page that you’ve designated to be converted.
Once JavaScript has measured all the elements, it replaces each with a Flash movie that is the same size as the original element. The original text is passed into the Flash movie as a variable, then some ActionScript code in the Flash file draws the text in the typeface you’ve chosen and scales it to fill the area occupied by the Flash movie.
P+C DTR (with word-wrapping and inner tags) (the “P” and “C” standing for PHP and CSS) is a text replacement method that works with PHP and CSS rather than Flash or JavaScript. Considering that PHP is a server-side language, and every modern browser automatically supports CSS, this method has some advantages over those that use Flash or JavaScript. This version of P+C DTR is based on the original P+C DTR method, but with the addition of word-wrapping and inner tags.
P+C DTR uses PHP’s output buffering functions to extract the heading text and give it an inline style that points to the script that replaces the text with an image. Therefore, the only requirement on the back end is that the host server supports PHP image generation.
The CSS comes into play in designating the heading’s font color, size and background color. The styling for the heading is kept in a separate CSS file, but the file is called only once per browser session, so it doesn’t have a noticeable impact on page load time.
Cufón was created as an sIFR alternative. It uses JavaScript to replace text, without Flash, making it more widely compatible than sIFR.
Using Cufón is a bit more involved than a lot of other DTR methods. You have to go through an extra step: converting whatever fonts you want to use to a format that Cufón can work with. An automated tool can do this, though, so technically it is not more complicated than the other methods.
Once you’ve converted the fonts, Cufón simply replaces the text in your browser with the font you’ve designated via the JavaScript. Activating Cufón is as simple as uploading the script and putting a couple of lines of code in the head of your document.
Typeface.js is a JavaScript-based dynamic text replacement method that embeds fonts on your page rather than converting them to images. This means that visitors are presented with a page that acts (and really is) like a regular HTML and CSS page.
Whereas most of the methods mentioned so far either replace the text with Flash or turn the text into an image, Typeface.js styles text with an embedded font using JavaScript. So, your text stays as accessible as it was before, without the need for Flash.
Typeface.js uses the browser’s vector drawing capabilities to draw the text in your HTML documents. All modern browsers support this (Firefox, Opera and Safari use the <canvas> element and SVG, and Internet Explorer supports VML).
Facelift Image Replacement (FLIR) is another DTR alternative that uses PHP and JavaScript. Flir lets you replace any element (h1, h2, spans, etc.) with dynamically generated text and has extensive documentation available as well as a forum for getting help.
FLIR is relatively straightforward. JavaScript finds the parts of your page that need to be replaced. It then sends the text for each of those parts to a PHP script that generates an image with the desired fonts, and then it plugs them back in where they belong on the page.
sIFR 3 is the newest version of sIFR. It’s currently in development, so bugs still need to be worked out. A number of new features have been added, and using sIFR is now easier.
sIFR 3 works much like sIFR 2.0. It uses Flash and JavaScript to replace text on the page with a Flash movie, while retaining accessibility features.
SIIR is another technique that replaces your original text with an image file in whatever font you choose. It includes a caching program to reduce the load on your server from all of the dynamically generated content, and it also includes some accessibility features. SIIR works with virtually any TrueType font.
SIIR works like most other dynamic text replacement techniques that use images to replace the original text. A mixture of JavaScript and PHP code finds the individual elements that need to be replaced; it pulls text from the website to generate dynamic images in the desired font, and then inserts those images in place of the text.
alt attribute in images to display the original text if the browser has images turned offBased on the original sIFR technique, sIFR Lite is a simpler, more user-friendly technique. The result is much more light-weight than the original and entirely object-oriented. It has been tested on Safari, Firefox, Camino, IE and Opera.
Like sIFR, sIFR Lite uses a combination of Flash and JavaScript to replace the original text with a Flash file. JavaScript searches the page for elements that need to be replaced, then Flash scripts create the dynamic images, and JavaScript replaces the original text with the new Flash files.
This is the original Dynamic Text Replacement technique that appeared on A List Apart in June of 2004. It uses a combination of JavaScript and PHP to replace plain text on your page with a dynamically generated image. It is the precursor to all of the techniques discussed above. If it weren’t for this technique, many of the other ones may not have been developed. It should also be noted that the demo page for this method now redirects to the P+C DTR method mentioned above, so it seems that the original method is viewed as obsolete.
A small PHP script generates and renders a PNG image whenever it’s requested by a JavaScript file. The JavaScript file is largely based on Peter-Paul Koch’s JavaScript Image Replacement method. Basically, once the HTML on a page has finished loading, a JavaScript file tests for image support, and if images are supported, it finds the elements that need to be replaced and sends them to the PHP script. Using it is fairly straightforward, and only a couple of lines of code need to be configured.
PHP Image Replacement (also known as PIR) is based at least in part on the method originally outlined by A List Apart but modified to be used with jQuery for better control over the end images produced.
PHP Image Replacement uses a modified version of the PHP script from A List Apart to dynamically create the replacement images and then uses jQuery to dynamically replace pieces of the page text with images generated by the PHP script.
FontJazz is a JavaScript typography engine that works entirely on the client-side and requires no server-side processes. It works with any typeface.
FontJazz uses JavaScript to render headlines in the user’s browser, rather than as images on your site’s server.
A few WordPress plug-ins are available for some of the dynamic text replacement methods mentioned above, as well as two that are unique to WordPress. The biggest advantage of plug-ins is that less coding is usually required, and you’re less likely to run into bugs from conflicting scripts.
FLIR for WordPress is still in development but is close to being completed. It works just like the FLIR method mentioned above. The main bug currently present is that automatic updates don’t always work. Almost all of the configuration for FLIR can be done from the admin panel, though you’ll still need to do some things manually (such as upload and configure fonts).
WP sIFR works like sIFR 2.0. The only configuration you have to do is upload your SWF font file to the plug-in directory and activate the plug-in. All of the other configuration is done from within the WordPress admin panel.
WP-Cufon lets you easily use Cufón on your WordPress website and it includes good documentation and regular updates. It also works just like Cufón, so you’ll still need to convert your fonts beforehand. Configuration is done directly in the admin panel in WordPress.
AnyFont uses custom fonts (TrueType or OpenType) to replace text in post titles, menu items, and pretty much anything else in your WordPress theme. It has a font manager that you use to easily upload new fonts from within WordPress; it has built-in style management; you can add shadows to your text; it includes cache management; and it uses SEO-compatible image replacements.
The Font Burner Control Panel is a different technique for adding fonts to your website. Basically, it allows you to use any of the more than 1000 fonts available on Font Burner on your WordPress blog. All you have to do is upload the plug-in to your plug-ins folder, activate it and then configure it through the admin panel.
Embedding fonts is another option if you don’t want to use an image replacement technique. While you can upload fonts to your own server and use @font-face that way, it uses a lot more bandwidth and there can be intellectual property issues to deal with. The services below offer a great alternative by hosting fonts for you and serving them remotely. The advantage is, obviously, that you can have a rich embedding of commercial fonts in your designs; the drawback is that these services usually require membership and a monthly fee.
Typotheque is a service that lets you use the @font-face rule in CSS. It works with fonts within the Typotheque collection, which currently consists of more than 25 typefaces. They have a free trial license available, as well as a variety of paid options.
Kernest.com is another web service that takes advantage of the @font-face attribute in your CSS and serves fonts for you, saving bandwidth. They serve both free and commercial fonts. Pricing is based on the font(s) you choose.
Together with various typographic foundries, Typekit.com has developed a web-only font linking license that allows for rich font embedding in web design and also protects interests of type designers. Typekit uses jQuery and a subscription service to allow designers to embed non-standard, non-system-specific fonts into HTML-pages.
As other services, it uses the @font-face CSS property. The configuration takes place via the Typekit’s plattform; to use the fonts, designers just need to insert two JavaScript-snippets into their pages. The service offers a platform that hosts both free and commercial fonts and has various plans ranging from $24.99 per month to $49.99 per month. The service is in closed beta (October 2009). Developed by Jeffrey Veen.
Fontdeck is an upcoming font embedding solution from Clearleft and OmniTi. As other services, FontDeck is a font-face delivery system that will work keep both font designers and web designers happy. Developed by Richard Rutter and Jon Tan. Not available yet.
Here’s a handy table that shows the features of each technique mentioned above:
| Method | Technology Used | Font Types Supported | Images? |
|---|---|---|---|
| sIFR 2.0 | Flash, JavaScript | Not specified | No, Flash |
| P+C DTR | PHP, CSS | Not specified | Yes |
| Cufon | JavaScript | Must be converted: TTF, OTF, PFB, PostScript | Yes |
| Typeface.js | JavaScript | Must be converted: TrueType, OpenType | Yes |
| FLIR | JavaScript, PHP | Not specified | Yes |
| sIFR 3 | Flash, JavaScript | Not specified | No, Flash |
| SIIR | JavaScript, PHP | TrueType | Yes |
| sIFR Lite | Flash, JavaScript | Not specified | No, Flash |
| DTR | JavaScript, PHP | OpenType, TrueType | Yes |
| PHP Image Replacement | JavaScript, PHP, jQuery | Any | Yes |
| FontJazz | JavaScript | Any | Yes (background) |
| AnyFont | WordPress-Only | TrueType, OpenType | Yes |
| Font Burner Control Panel | WordPress-Only | Font Burner Fonts Only | Yes |
| Typotheque | @font-face | Typotheque Fonts Only | No |
| Kernest.com | @font-face | Kernest.com Fonts Only | No |
| Typekit | @font-face | Typekit Fonts Only | No |
Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.
(al) (ll) (vf)
© Cameron Chapman for Smashing Magazine, 2009. |
Permalink |
5 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Fonts, sIFR, text replacement
By Mike Takahashi
Recently, there have been a lot of creative ideas and uses of online ads that have been pushing the traditional medium. Takeover ads, where ads takeover the entire site design have become more common. Apple has taken banner ads into a new dimension by creating ads that appear to interact within the design of a site. While others have been able to leverage platforms such as YouTube and Twitter to create an interactive experience. Here are some creative and unique trends that have been showing up in advertising online.
Follow Your INSTINCT
http://www.youtube.com/watch?v=HoOCiaxIZF4
To promote their new phone Instinct, Samsung created an interactive online video campaign on YouTube called “Follow Your Instinct.” Using YouTube’s annotations feature, which allows clickable links embedded in the video to other videos, users can follow multiple story lines by choosing where to go next. At the end of each short clip you are presented with two choices. For example: 1) Follow you Instinct or 2) Go to your desk
http://look.daileyads.com/omma_submissions/twitteralpha/
TurboTax created a live Twitter banner ad that showed the five most recent tweets featuring responses to consumer questions and comments on taxes, product use and feedback.
By now you’ve probably seen one of the many creative and witty Apple ads featured on sites such as CNN, The Wall Street Journal, and Pitchfork. By breaking the traditional mold of static banner ads and utilizing synched ads, an interactive experience is created using elements within a site’s layout to grab the users attention.
Appeared in the Wall Street Journal
Appeared in the New York Times
Takeover ads takeover a sites existing layout, changing the normal flow and convention of what the user is normally accustomed to seeing.
http://www.youtube.com/watch?v=zSU-z-t9Ku4
To promote their new game Wario, Nintendo created what at first appeared to be a standard YouTube page showing a video of the game being played. However, as the video progresses, elements within the design of the page start to interact with the game. The entire screen shakes, items begin to fall down, YouTube’s navigation starts to crumble, and the page eventually becomes unrecognizable.
To show the features of the iPod Touch, Apple was able to create an interactive experience that interacted with Pitchfork’s design. This has also appeared on sites such as ESPN.
To promote the game Madden NFL 10, YouTube’s home page was taken over by an ad that interacts with elements the home page as football players break outside the ad space and into the design of the site.
http://avatarclient.com/extranet/awards/2009/startrek/mtvtakeover/index.html
For the release of the new Star Trek movie, MTV’s home page was taken over to give the effect that the site’s content was being sucked into the warp of the Enterprise as it zoomed into the page toward the viewers.
http://skate.quiksilver.com/thespot
As the video begins to play, the skaters start to jump outside the video and become part of the website, interacting with elements of the design by skating and doing tricks on the photos, video player, etc.
After click ads expand and interact with the design of the page only when a user had clicked on it.
Braquo is a crime TV series in France.
Traditional advertising has been able to successfully incorporate and leverage social media to create interactive experiences that can only be done online. Designers have been able to leverage the concepts and ideas of sites like Twitter to create an interactive experience with users that allow them to engage with the audience.
Twitter Promotion for Live Album
http://twitter.jackjohnsonmusic.com
A simple, yet effective concept that was done using Twitter to promote Jack Johnson’s live album En Concert. It allows you to Tweet up to 24 characters while the other 116 characters are reserved to retweet the message. Once it is sent, a link is given to download a free mp3 from the album.
Jason has been able to take online ads in a unique direction by leveraging the social context of his every day life. He has sponsors pay him to wear their shirt for an entire day, taking pictures and then blogging about his interactions and experiences with people on his site. Days are sold at “face value,” so January 1 is $1 and December 31 is $365. It’s become quite popular, with 2009 already sold out, and 2010 quickly filling up. He’s also added a second person in a different time zone to help out in 2010.
http://www.facebook.com/redbull?v=app_123793864961
Brands are incorporating interactive experiences with consumers on the web in more ways than ever. Red Bull has taken the scavenger hunt concept one step further by teaming up with Facebook to incorporate a virtual scavenger hunt across the United States. Using the website, you type in your zip code to find the locations of places where cans of Red Bull are hidden. The general locations are shown via Google Maps with clues on where to find the exact spot. Once found, you "claim the stash." Users can make comments on each individual location and upload photos of their stashes through Facebook.
http://www.milliondollarhomepage.com
Not really a trend, but worth mentioning since it was something truly creative and completely different at the time. Conceived in 2005 by Alex Tew, a college student who needed to raise money for his tuition, he came up with an idea to try and make $1 million by selling 1,000,000 pixels for $1 each on a single web page. He ended up selling every single pixel making $1 million with several imitators copying his idea.
The creativity in the ads shown have engaged the audience with something new and different. They break the traditional online advertising medium by creating new experiences that people have yet to become fully accustomed to. But how long will these trends continue to attract audiences before the novelty wears away and people start to ignore them? Banner blindness is already a known problem. It’s probably only a matter of time before some of these ideas take on the same fate.
Mike Takahashi is the Web Strategies Manager for Communications and Public Outreach at UCLA (University of California, Los Angeles). He is passionate about every aspect of design and how technology can help influence our lives in meaningful ways. You can follow him on his blog at TAKA DESIGNS.
Copyright © 2010 Answer My Query All rights reserved. Maintained by Orange Brains .