Ajax.org is today introducing Cloud9 IDE, a fresh cloud-based development platform for JavaScript incorporating HTML5, and supporting Python, Ruby and PHP. The environment aims to enables developers to easily build, test, debug, and deploy Web and mobile applications with a minimum of technical skills and time required. If the name of the project (Cloud9 IDE) rings a bell, you may remember that it merged with Mozilla Skywriter, a Web-based framework for code editing, back in January 2010.

Read the rest of this entry »

Stepping into the kitchen now, Google  introduced a recipe search engine Thursday that serves up dishes based not only on the ingredients you may have on hand, but the calories you want to consume and even how much time you have to cook.

Ah, what a godsend! I’m so glad Google came out with this. Now, I’ve got everything I need from one search engine

Opinion BY Armin

With a Great Tagline Comes Great Responsibility

Launched in 1994, the Independent Film Channel (IFC) has grown remarkably from a weird little runt of a channel that was a spin-off from Bravo (before Bravo was all Queer Eye for the Straight Guy, Housewives of…, and Top This or That — into one of the most progressive and rewarding cable channels through original programming (Portlandia), fantastic re-runs (Freaks and Geeks), and movies where the endings aren’t always happy. Today the IFC universe consists of the cable channel, a feature film production company, a distributor of independent and foreign films, and a theater in New York City. For the better part of 2010, IFC has been using a new logo and tagline created by Portland, OR-based Feel Good Anyway and they recently put up a great case study of their ongoing project with IFC.

The imperfections of the logo, on purpose.

Different logo and tagline lock-ups.

The old logo had its charm and moment of brilliance in the “I” looking like the edge of a film strip but sixteen years, especially for something brewed in the middle of the 1990s, is plenty of time for something to date. The new IFC wordmark has no hidden visual, but it sure is bold. And bold is good. The appeal of the new logo comes in the embrace of the tagline, a fantastic one at that, and how the two interact in clunky ways. It’s also funny that the logo is constructed a bit “poorly.” The new logo also helps IFC move beyond just “film” and supports all of its digital and brick and mortar ventures.

Sample pages from the guidelines.

But as with all good TV branding, the real fireworks are in the on-air package and Feel Good Anyway has converted the “Always On. Slightly Off.” philosophy into a fantastic identity that is smart, quirky, and perfectly executed.

Network graphics. See bigger here.

Network IDs. See bigger here.

Network Interstitials, “a library of thematic interstitials that IFC could mix and match with other assets to make promos. The themes were based around the channel’s programming genres and included such all-time favorites as comedy, sex, music, food, horror, and action, among others.” See bigger here.

An excellent examination of the new IFC logo. Personally, I like the imperfections and the various lockup configurations. What do you all think?

We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks.

You might have seen some of these tools in our Twitter stream or on our Facebook page, but certainly not all of them. We’ve prepared the most useful ones (yet not necessarily the most beautiful ones) in this handy overview for your convenience. Please share any further tools with us and our readers in the comments to this post. As usual, we express sincere gratitude to all designers and developers out there who create, maintain and improve these tools as their little side projects. You really make the difference, guys. Thank you.

You may want to check out our previous round-up, Time-Saving and Educational Resources for Web Designers, as well.

Useful Web Services, Tools and Resources

FontFuse: Gallery of Font Pairings
FontFuse is a font pairing design resource that displays font pairings and hence helps you compare and choose fonts. You can browse through fonts as well as font families, and explore the most recent, most popular and contest-leading font pairings.

Little Big UI Details
This site features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day.

A Sampler Page
While physical books are traditionally well defined and structured objects, digital books live on screens that vary greatly in their dimensions. In this A List Apart article, Craig Mod dives into the similarities and differences of these media and presents the baseline for designers who want to produce beautiful and readable text on a tablet.

Readability: Enjoy Reading, Support Writing
Another handy little helper that gets rid of the unwanted clutter. Readability allows you to choose your preferred settings (font size, margin and style) and applies them to any website. Drag the bookmarklet with your saved settings into your bookmars bar or folder, visit the website of your choice, click on the bookmarklet and you get a good, comfortable read. Besides, readability offers a way to compensate writers and publishers without punishing readers. 70% of all membership fees go directly to the people who make the content.

Prey: Rest Safe
This tool is small but efficient open-source application that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Ge.tt
With Ge.tt you can turn any type of file into web content and share it instantly. You just click on and select files and share the files with your friends or publish the data online. You may want to check an alternative, Crate, as well.

Lanyrd: Get More Out of Conferences
Lanyrd is the social conference directory that lets you keep track of what is going on around you, both as a conference speaker and visitor. You can browse conferences by topic, see who the keynote speakers are and who might like to attend it with you. Follow intereresting conferences by checking out attendees tweets or browse slide, videos and podcasts of past events you might have missed. And you can check SmashingMag’s account on Lanyrd, too.

Dashkards: Dashboard Cheat Sheets For Your Favorite Mac Apps
The site presents keyboard shortcut cheatsheets for you favorite Mac apps to help you memorize them. Simply add the dashkards to your dashboard and save time.

Bundler: Manage Your Application’s Dependencies
Bundler manages application’s dependencies through many machines systematically and repeatedly. You can use the tool with frameworks (it works out of the box with Rails 3) and check out an application with a gemfile for development. A detailed instruction is available on the app’s main web page.

BuildorPro
BuildorPro runs through your browser, and so the browser becomes your development environment — meaning that every time you change your code by hand or through the visual tools, the changes are instantly reflected in the design window. Currently in beta.

Zerply: Present Yourself Professionally
With Zerply you can present yourself, discover and connect as well as converse and collaborate. By setting up a professional profile, you can tell people who you are and what sites you use.

Prevue: Sharing Tool for Designers
Prevue is a free concept sharing tool that helps you upload in a simple and elegant way by organizing and sharing your work with others. Either share individual projects with clients, or turn all your projects and designs into a beautiful and clean portfolio to share with the world.

Git Immersion
Git is a fast version control system which can be downloaded on this site. Git Immersion is a very detailed guide to Git, with examples and practical tips for developers.

Wirify: The Web as Wireframes
This tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.

Open with Photoshop Firefox Extension
If you are looking for nifty time-savers, this little Firefox add-on is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Scr.im: Email Address Shortener
Scr.im lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on Scr.im, and it gives you a link to a page with your email address, with security to prevent bots from viewing it.

Compfight: Flickr Search Engine
Compfight is a Flickr search engine for images licensed under Creative Commons (or other) licenses. They pull their results directly from Flickr and gives you multiple options to restrict your search.

Browserling: Interactive Cross-browser Testing in Your Browser
Browserling offers you a graphical web console to do cross-browser testing without leaving your own browser. A helpful way to try out your creations. The virtual browsers run live enabling you to type and click away just as if you were running the actual browser. Paid and free options are available.

User Feedback and Concept Testing with Verify
Verify is the fastest way to collect and analyze user feedback on screens or mockups. See where people click, what they remember, or how they feel about a Web design.

foxGuide: Photoshop Guides Inside Firefox
foxGuide is a Firefox extension that displays horizontal and vertical guides. These guides appear as thin lines that float over the webpage. You can move or remove them just the way you do it in Photoshop.

GridBookmarklet
The tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.) Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page.

URLi.st: Share and Sync Your Links
URList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link to the group of links.

Spritebox: Create CSS from Sprite Images
Spritebox is a WYSIWYG tool to help Web designers create CSS classes and IDs from a single sprite image. It is easy and free to use and is based on the principle of using the background-position property to align areas of a sprite image into block elements of a Web page. You may want to check out CSS Sprite Generator, too.

Joliprint
This is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments. If you’d like an alternative, give Web2PDF or Notforest a try.

Entitifier
Cleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online. Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet.

The Email Address Obfuscation Debate
Superuser has an interesting discussion about email obfuscation, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

Quick CSV Data Convertor
As Web designers, we constantly receive data in Excel and other spreadsheet formats. This works fine when you just need to view the data on your computer. But when you need to upload it to and display it on the client’s website, it becomes a huge pain. This tool takes a CSV or tab-delimited file in Excel and converts it to JSON, XML, ActionScript and other Web-friendly formats instantly. If you want to convert your spreadsheet data to HTML, you might want to give Tableizer a try.

Instant Blueprint
Instant Blueprint is a way to create a web project framework. In a very short time you can get your project up and running with valid HTML/XHTML and CSS. It’s a simple online form where you enter the required information and markup id tags. Then you select options such as, javascript library and document type. This then generates the blueprint you need to get your project going.

Interaction-Design.org: HCI, IxD, UX, IA, Usability, and More
This website is a growing library of documents, references and useful articles about interaction design. Leading personalities of the respective branches are asked to contribute to every topic including videos and commentaries.

jQuery Deconstructed
The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools.

Last Click

Humans.txt: We are People, Not Machines
Humans.txt is an initiative founded by a group of Spanish enthusiasts with the idea to give credit to the humans behind Web projects. Start your own humans.txt now and stick it in the website’s root folder, right next to robots.txt. Fill the file with whatever info about the contributors you like. Be a part of the initiative and help establish the standard for humans.txt.

Spacelog Apollo 13
This site allows you to explore transcripts of radio communications between the Apollo 13 crew and the NASA personnel back at Houston. You can check out photographs taken from the ground as well as by the crew in space. If you’re interested in space missions and the history of Apollo 13, this is the site for you.

Google Art Project
The Google Art Project lets you visit all the great museums around the world and offers interactive 360° tours. High zoom levels give you astounding close-up impressions of the masterpieces, getting that close would probably be impossible in reality. You can even create your own virtual tour and showcase your own great tableaus.

Liveset: Now the Concert Comes To You
This service allows you to watch live concerts on the Web and on mobile devices in HD. Once you’ve become a member, you can claim digital tickets and enjoy the show on your large screen at home, together with your friends or family.

How To Build a Corporate Website (Comic Strip)
Unfortunately, very sad, yet very true.

How Would You Like Your Graphic Design?
A nice Venn diagram that helps you (and maybe your client) resolve dilemma on getting fast, cheap, free and great graphic design. Pick two out of four.

Tweet

I never tire of reading articles like this. Designing for the Web continues to change, not only from a technology standpoint, but also from technique. This post from Smashing Magazine is definitely one to bookmark. I’d love to hear what other designers use in their toolbox. Please leave a comment here and share links you think other designers may benefit from and tell us why you think they’re valuable.

Often, it’s the little details that turn a good layout into a great design; details such as subtle textures, shading and smooth shapes. Photoshop contains a vast array of tools for embellishing a design, but choosing the right one isn’t always easy. Being the obsessive-compulsives that we are, we’ve conducted a huge range of experiments to determine the benefits and disadvantages of each technique. Here, then, is an obsessive-compulsive’s guide to some frequently used tools and techniques for Web and UI design in Photoshop.

Noise and Textures

Subtle noise or texture on UI elements can look great, but what’s the best way to add it? Our goal is to find the best method that maintains quality when scaled but that is also easy to implement and edit. To find out which is best, we’ll judge each method using the following criteria:

• Number of layers used: fewer is better.
• Ability to scale: if the document is resized, will the effect maintain its quality?
• Can the noise be on top of the Color and Gradient layer styles?
• Can the method be used with any texture, not just noise?

1. Bitmap Layer With Noise

Probably the most obvious method for adding texture to a shape is to create a normal bitmap layer, fill it with a color, select Filter → Noise → Add Noise, then apply a mask or Vector Mask to match the element you’re adding noise to.

Using a high amount of noise, setting the layer blending mode to Luminosity and reducing the opacity will yield the most control over the noise with the least disturbance to the underlying layers. A noise setting of 48% gives a high dynamic range without clipping the noise. (Clipping results in higher contrast, which might not be desirable.)

• Layers: 2
• Scales: No, texture will have to be recreated if the document is scaled
• Works with Color and Gradient layer styles: Yes
• Works with any texture: Yes

2. Inner Glow Layer Style

Adding an Inner Glow layer style with the source set to center and the size to 0 will let you use the noise slider to add texture to any layer. It’s a good solution, provided you’re not already using the Glow layer style for something else. The noise is added above the Color, Gradient and Pattern layer styles, which is great.

Unfortunately, the noise can only lighten or darken the underlying elements. The previous bitmap layer method can add highlights and shade at once while maintaining the average luminosity, and it looks far better in my opinion.

• Layers: 1
• Scales: Yes, texture will be remade automatically
• Works with Color and Gradient layer styles: Yes
• Works with any texture: No

3. Smart Object with Filter

Create a Solid Color layer, convert it to a Smart Object, select Filter → Noise → Add Noise, apply a Vector Mask to match your element, set the layer blending mode to Luminosity and reduce the layer’s opacity.

It’s a fairly involved process, but it can accommodate a combination of effects that can be remade if the document gets scaled.

• Layers: 2
• Scales: Yes, texture will be remade automatically
• Works with Color and Gradient layer styles: Yes
• Works with any texture: No

4. Pattern Overlay Layer Style

Start by creating a noise or repeating pattern in a new document, then choose Edit → Define Pattern. Once you’ve defined the pattern, it will be available in the Pattern Overlay layer style options. As with previous methods, using Luminosity as a blending mode and reducing the opacity to suit it yield great results.

The Pattern layer style is composited below the Color and Gradient styles, ruining an otherwise perfect noise and texture method. However, you can create a second layer that just holds the texture if you need to, or start with a Gradient Fill layer, sidestepping the limitation.

• Layers: 1
• Scales: Yes, but you’ll need to change the Layer style scale to 100% after scaling
• Works with Color and Gradient layer styles: No, the pattern appears underneath
• Works with any texture: Yes

Which Method Is Best?

Although a little cumbersome, creating a Gradient Fill layer, adding a Pattern layer style, then creating a Vector Mask seems to be the best method possible. This can be used to create flexible, scalable and editable single-layer UI elements with texture. As a bonus, Gradient Fill layers can be dithered and so also produces the highest quality results (Gradient layer styles cannot be dithered).

We’ve created some examples below and included the source document so that you can see how they were built.

Download the PSD (.zip)

Rounded Rectangles

Rounded rectangles, or “roundrects” as QuickDraw so fondly calls them, are standard fare on a Web and interface designer’s utility belt. They’re so common that it’s rare for Web pages or apps to not contain a roundrect or two. Unfortunately, pixel-locked rounded rectangles can actually be fairly difficult to draw in Photoshop. (By pixel-locked, I mean that every edge falls on an exact pixel boundary, creating the sharpest object possible.)

Experienced Photoshop users will probably already know one or two ways to draw a roundrect. Hopefully, after reading this article, they’ll also know a couple more, as well as which methods produce pixel-perfect results.

1. Rounded Rectangle Vector Tool

Photoshop’s Rounded Rectangle vector tool appears like the ideal candidate for the task, until you realize that the edges it creates are blurry and inconsistent.

Fortunately, there is a fairly well-hidden option that locks the Rounded Rectangle vector tool’s output to the pixel grid. Excellent.

To enable pixel-locked drawing for the Rounded Rectangle vector tool, check the “Snap to Pixels” option in the Options bar. If you have “Snap to Pixels” turned off, drawing at 100% zoom achieves the same result.

The result is perfect roundrects, every time. The only downside is that the corner radius can’t be altered during or after drawing the shape. If you need a different radius, you’re forced to draw it again. It’s a shame the roundrect tool isn’t like Illustrator in this regard, where the up and down arrow keys increase and decrease the corner radius while drawing.

On the positive side, keeping your objects as vectors means that you’ll be able to resize the document and the corners will take full advantage of any extra resolution. There is one small caveat though: if you resize, you’ll have to do it as an exact multiple, or risk fuzzy non-pixel–locked edges.

If you’re being pedantic about the results, you may notice that the antialiasing on the first half of each corner doesn’t match the second half — you’ll have to look carefully to notice, though. For example, looking at the zoomed corner below, the start of the corner to the apex isn’t identical to the apex to the end of the corner (starting from either side). In practice, that probably won’t create any issues.

2. Blur

The blur method is a bit of a hack that involves creating a selection, blurring it, then increasing the contrast so that you’re left with a sharp mask that’s antialiased nicely.

It’s seven steps in total and is prone to being inaccurate; plus, the radius of the corners can’t be changed on the fly. Applying levels can also be a bit fiddly. One advantage is that different levels settings can be used to obtain different degrees of antialiasing, from incredibly soft to completely aliased.

1. Create a new layer.
2. Draw a rectangular selection.
3. Enter quick mask (Q).
4. Gaussian blur by half the radius that you’d like for the rounded corners. (For example, a 10-pixel radius would need a 5-pixel blur.)
5. Apply Levels (Command + L), and use about 118 for the black point and 137 for the white point on the input levels.
6. Exit quick mask (Q).
7. Fill selection.

On the positive side, this blur method can be used to quickly create some interesting and organic shapes that would be difficult to draw by hand.

3. Circles

The circles method is very accurate and easily reproducible, but has a whopping 13 steps. That’s a lot of clicking for just a single roundrect.

1. Create a new layer.
2. Make a circular selection that is twice as large as the radius you would like (for example, a 10-pixel radius would require a 20×20-pixel circle).
3. Fill the selection.
4. Move the selection right. This can be done quickly by holding down Shift and pressing the right-arrow key a few times.
5. Fill the selection.
6. Move the selection down.
7. Fill the selection.
8. Move the selection left.
9. Fill the selection.
10. Make a rectangular selection that covers the entire vertical span of the roundrect but that starts and ends halfway through the circles at the ends.
11. Fill the selection.
12. Make a rectangular selection that covers the entire horizontal span of the roundrect but that starts and ends halfway through the circles at the ends.
13. Fill the selection.

4. Stroke

The stroke method is very accurate, easily reproducible and has only about four steps, depending on the result you’re after. The corners are a bit sharper than those of the circle method, though. That may be a good thing or a bad thing, depending on your preference.

1. Create a new layer.
2. Draw a rectangular selection that is smaller than the area you require (smaller by double the radius, if you want to be exact).
3. Fill the selection.
4. Add a stroke as a layer style that is as thick as the corner radius you would like.

If you’d like to flatten the object to remove the stroke, keep following the steps below.

1. Create a new layer.
2. In the Layers palette, select the new layer and the previous layer.
3. Merge layers (Command + E).

It’s possible to automate the flattening with a Photoshop Action. This can also be set up as a function key to speed things up further.

A huge advantage of the stroke method is that it’s dynamic, so the radius can be edited in real time. It can also be used to easily create other rounded shapes, as seen below.

Which Method Is Best?

In most cases, using the Rounded Rectangle tool with “Snap to Pixel” turned on will give great results and be the quickest method. If you’d like the ability to change the corner radius without redrawing, then the stroke method is the one to use.

However, as seen below, each method yields different results. So, depending on what you’re after, you may need to use a combination of methods.

All tests were completed using Photoshop CS4 and CS5 on a Mac. Behavior for both versions was consistent.

Gradients

Gradients are a great way to add life-like lighting and shading to surfaces. When built with gradient layers and layer styles, they also ensure that UI elements can be scaled and reused easily.

Linear Gradients

Linear gradients are gradients in their most basic form — a gradual blend of colors and following a straight line. I’m sure you knew that, so onto the more interesting stuff.

Reflected Gradients

Reflected gradients are like their linear friends, but they repeat the gradient twice, with the second repeat mirrored. This makes editing a little less tedious, provided it fits the result you’re after.

Radial Gradients

Radial gradients start from the center (or any chosen point) and grow outward in a circular pattern. They’re handy for creating spheres and applying effects to the edge of circular elements. The center point of the gradient can be moved by clicking and dragging on the canvas while the gradient window or layer styles window is open.

Angle Gradients

Angle gradients can be a great way to mimic environmental reflections found on highly polished metallic objects. The center point of the gradient can be moved by clicking and dragging on the canvas while the gradient window or layer styles window is open.

Gradients on Gradients

Anything worth doing is worth overdoing, right? Combining a gradient layer with a gradient layer style lets you overlay two different gradients, giving more complex and — here’s the good part — completely dynamic results. To combined the gradients, you’ll need to set a blending mode for the gradient layer style. For the examples below, I’ve used either Screen (good for lightening) or Multiply (good for darkening).

Dithering Is Everything

Adding dithering to a gradient produces smoother results. Non-dithered gradients often contain visible banding. Dithering is even more important if your artwork is being viewed on cheaper 6-bit per channel TN LCDs and certain display types that tend to amplify posterization problems.

If you’re not seeing the difference, here’s an extreme and completely unrealistic example of gradient dithering in action:

Ensuring that your gradients are dithered is easy: just check the appropriate box in Photoshop.

Note that gradient layer styles can’t be dithered, and gradients in placed objects (such as stuff you’ve pasted from Illustrator) aren’t dithered.

If you use transparency in a gradient, that won’t be dithered either, which can be a huge issue at times. There is a solution for some specific cases: if you’re using a gradient with transparency to lighten an area with white, then using a non-transparent gradient with a Screen Layer blending mode will let you dither it. The same technique can be used for darkening with the Multiply blending mode.

A combination of the gradient techniques described above were used to create the Mac app icon below.

Gradient Maps

Quite different to other types of gradients, gradient maps can be a great way to add color treatment, allowing for very precise control. Gradient maps use the brightness of each pixel to map to a corresponding color in a gradient.

If the gradient starts at red and ends at blue, then everything white in the image will turn red, and everything black will turn blue. Everything in the middle tonally will map to the gradient, depending on how bright it is.

The image below was used in a poster for Kingswim, a swimming school:

With a gradient map. Large view

Without the gradient map, things look quite different. It’s a composite of about seven photos; the boy and background were shot on black and white film with intentionally low contrast so that the grain would be more prominent when the contrast was pushed by the gradient map. The gradient map also hides the color mismatches in the compositing.

Gradient map off. Large view

A Little Obsessed?

Absolutely. I conducted all of the tests above to learn more about some common techniques that I already use: that is, to reassess and fine tune, with the aim of improving my designs. Creating great artwork without intimately knowing your tools is certainly possible, but the more you know, the more likely you are to work faster and with greater confidence.

Would you like to know more about a specific technique or Photoshop feature? Please let us know in the comments.

(al)

Tweet

This week’s sites we like features three FontFonts in three unique designs.

Polldaddy is the most powerful and easy-to-use survey software around. FF Tisa feels authoritative but friendly in large headlines. Note the two pixel white text-shadow that suggests the text is pressed into the subtly textured background.

Designers & Books features a lovely and austere layout by Pentagram using FF Dagny. Originally designed for Swedish newspaper Dagens Nyheter, FF Dagny serves exceptionally well in minimalist designs such as this one.

Dan Higbie‘s site also features FF Dagny and FF Tisa. Equally handsome is his latest post which sports Corner Store and Bello in an inspiring masthead. The curved baseline lends a bit of realism to Corner Store’s hand-painted style, courtesy Lettering.js and some carefully-applied CSS rotate transforms.

That’s all for this week! As always, share sites that you like in the comments.

With most modern browsers supporting @font-face nowadays, tons of web designers have flocked to Typekit as the definitive source for reliable fonts. Not only are they reliable — Typekit takes the pain of hosting fonts — but they are legally licensed, web-only fonts. Typekit handles the relationships and protections necessary to working with the finest type foundries, so that all designers need to focus on are implementing a line of JavaScript to their code and doing what they love to do best — design beautiful websites.

Behind the scenes at the Federal Communications Commission, a quiet war is being waged over the future of television. It isn’t getting as many headlines as net neutrality or the Comcast/NBCU merger, but the debate is nearly as important. It’s about how far Google, Sony, and their allies can take their Google TV system.

Big Cable is trying to set limits on how easy it will be for devices like Google TV to access pay TV content and reassemble it into something that will reconfigure both television and the internet.

In their bid to get the FCC to help Google TV and similar devices, “Sony/Google are asking the Commission to ignore copyright, patent, trademark, contract privity, licensing, and other legal rights and limitations that have been thoroughly documented,” the National Cable and Telecommunications Association (NCTA) warned last Wednesday.

What is NCTA talking about? The trade association is trying to set limits on how easy it will be for devices like Google TV to access pay TV content and reassemble it into something that will reconfigure both television and the internet.

That’s at the heart of the FCC’s proposal for an AllVid system, which Google very loudly supports. AllVid doesn’t exist yet, but the idea is to mandate an industry-wide gadget that you could plug into your broadband router and connect to your cable TV provider, then watch online video and pay channels through a variety of AllVid-friendly devices. Not surprisingly, Google and Sony love this idea, because it could transform the Google TV from just a neat product into a revolution.

Big cable hates the proposal, because that revolution could leave multi-video program distributors (MVPDs), if not in the dust, at least working in a far more competitive video environment. But the AllVid proposal faces real technical challenges that have yet to be worked out.

At present, Google TV is a suite of devices that integrate streaming IP video services like YouTube with various kinds of third-party content, all searchable on a Google TV screen. You can get in on this by buying the Google TV standalone HDTV set, or by hooking your extant screen to a Logitech Revue or Sony Internet TV Blu-ray Disc Player.

As our own Chris Foresman notes, the gear is expensive and kind of clunky, but you can also use your phone as a remote control, and voice command functionality is on the way.

The biggest challenge for Google TV has been finding pay content partners. The DISH network is accessible via the device. And Google has clinched content deals with HBO, CNBC, Turner Broadcasting and the National Basketball Association.

But other providers are loudly declining to hop on the bandwagon, most noticeably Viacom, which has blocked full episodes of its fare from the Google TV browser (no big shocker here; the company is suing Google’s YouTube for $1 billion over copyright infringement claims).

So what would turn Google TV or any similar gadget into a truly revolutionary machine is an interface that easily allows any HDTV/set top box system to tap into any couch potato service, while simultaneously serving as a gateway to the Internet, with all its search, cloud, and social networking functionalities. For millions of households that still experience the ‘net as less of an imperative than television, the internet would become television.

Continue reading …

Filed under: Design ]]> http://arnolddelacruz.wordpress.com/2011/02/12/can-cable-block-the-google-tv-revolution/feed/ 0 Arnie epicenter_googletvrevolution0212 http://arnolddelacruz.wordpress.com/2011/02/12/google-rolls-out-two-factor-authentication-for-everyone-you-should-use-it/ http://arnolddelacruz.wordpress.com/2011/02/12/google-rolls-out-two-factor-authentication-for-everyone-you-should-use-it/#comments Sat, 12 Feb 2011 18:15:52 +0000 Arnold DC http://arnolddelacruz.wordpress.com/2011/02/12/google-rolls-out-two-factor-authentication-for-everyone-you-should-use-it/ ]]>

Given how much data we’re trusting to online sites these days — email, search history, even voice calls — the repercussions to having our account passwords phished, hacked, or guessed are worse than ever. Unfortunately as far as consumers are concerned, account security has been stagnant for years: nearly every service requires a username and password, and that’s it. Cue the scary music and a Dateline special on having your identity stolen.

But today, Google is making things much, much better for those who want it. Update: Google is actually rolling this out over the next few days, so you may not see it quite yet.

The feature is called two-factor authentication, and it’s been available to Google Apps customers since September. Now it’s rolling out to everyone. It’s a bit confusing and the set-up process will probably intimidate a lot of people, but it’s well worth looking into if you value your account data. You can activate it by hitting the ‘two-step verification’ link on this page.  So what exactly does it do?

In short, it makes it so that when you go to login to your Google account, you need to enter both your existing password and a special new second passcode — one that you don’t have to write down or memorize because it’s always changing, so it’s nearly impossible to phish. You generate this second password by firing up a new mobile app available for Android, iPhone, and BlackBerry called ‘Google Authenticator’, or by having Google call or send you a text message to a phone number you entered when you set up the feature. That password will expire in just a few minutes though, so be quick (and yes, you will feel like a secret agent the first few times you use it).

It’s not as stressful as it sounds, because you can elect to only require this second password once per computer (this still keeps phishers from being able to access your account). There are a few more quirks to it — in order to save passwords in applications like iCal, Mail, and most other desktop apps, you’ll have to generate a unique app-specific password. But again, you can save this so you only have to do it once per app.

There are also a few backup measures in place should you lose access to your mobile phone. You can designate a second, backup phone number to send the passcode to, and you’re also strongly encouraged to print out a set of ‘one-time’ passwords to keep in a safe place. This is only for the secondary password — you’ll still have to keep that ‘normal’ Google password memorized.

I’ve been using a beta version of the system for the last few weeks, and for the most part I’ve been very pleased with it. The setup process, though it’s improved since I first used it, is still pretty involved. You don’t really have to do much thinking and the setup wizard only takes a few minutes to complete, but this whole second-password thing feels foreign after a decade (or more) using the old system. This is probably why Google isn’t heavily promoting the feature to consumers yet — you’ll have to go looking for it in your accounts dashboard.

To be clear, two-factor authentication isn’t a new idea. It’s been used by large businesses for years. But giving consumers access to this same protection is a big win, and I’m hoping other services will follow suit in the near future.

CrunchBase Information

Google

Information provided by CrunchBase

via feedproxy.google.com

While Google’s efforts to help its users protect their information is applaudable, I would rather have them work on implementing SSO (single sign on) authentication across their various services. Somewhat related to this, I would love to see a more intuitive UI for a dashboard of all the services used under Google that’s accessible across all of them. Currently, for services like AdSense, you have to hard type the URL for another service, say Analytics or Affiliate Network for example, to get to it. Once logged in, you should be able to access all your Google services from any one of them easily. I would love to design the UI for this.