Image Image Image Image Image
Scroll to Top

To Top

Information Resources

05

Mar
2013

Information Resources

Permalink

By admin404

Apache Mod_Rewrite for Vanity URLs

March 5, 2013 - Information Resources

Ever wondered how web services like Twitter (twitter.com/era404), Facebook (facebook.com/era404), and MySpace (currently: new.myspace.com/era404) are able to serve vanity URLs for their numerous users? The answer is in the rewrite.

Working with URL rewriting (namely: Apache’s mod_rewrite, a rule-based rewriting engine) can be a little bit confusing. LiquidWeb Hosting’s stellar technical support team passed the inquiry from tech-to-tech before a solution was found. This solution was further polished by ERA404 systems guru, Tony Muka, and is explained below.

 
What are the rules?

We mentioned “rule-based” when describing this Apache module. So what are the rules?

1. Ignore files that already exist on your web-space (index.htm, logo.png, and so on).

RewriteCond %{SCRIPT_FILENAME} !-f

2. Ignore directories that already exist on your webspace, too (image folders, script folders, and so on).

RewriteCond %{SCRIPT_FILENAME} !-d

3. For everything else, let’s pass anything after the base URL as an argument to your backend script to do whatever magic you wish to do. Now this is the confusing part because (unlike the previous two rules) it’s written in something that looks like Q*bert gibberish. Let’s have a look at that last rule.

RewriteRule ^([^/]+)/?(.*)$ /?user=$1&$2

Notice that this rule starts with “RewriteRule” and not “RewriteCond[ition]”. This is where we ask Apache to rewrite the URL if the first two conditions aren’t met—that is to say, it will only rewrite URLs for non-existent files and directories. Here’s a little breakdown of what will happen when you’ve put this instruction set on your web server:

This Requested URL Rewrites to Because
     
domain.com/index.htm (no rewrite) …this file actually exists
     
domain.com/images/ (no rewrite) …this directory actually exists
     
domain.com/username domain.com/?user=username No file or directory exists
named “username”
     
domain.com/username
&action=profile
domain.com/?user=username
&action=profile
No file or directory exists
named “username”

 
With this last requested URL, you can see the power of Apache’s mod_rewrite, because we can technically provide instruction for your handler scripts to do anything you need them to do. In this usage, a username is passed, as well as an action to present the profile page. This methodology can be used in countless scenarios where a long, cumbersome URL can be compacted, such as REST requests, XML requests, and so on.

 
Putting it All Together

# address translation for user URLs
RewriteEngine on
RewriteBase /
# look for url/username or url/username/ and translate to url/?user=username
# maintain all other passed arguments
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^([^/]+)/?(.*)$ /?user=$1&$2

Simply put this script into a text document, name it “.htaccess” and drop it into your webserver’s root directory. Make sure that Apache’s mod_rewrite module is activated on your HTTP server’s configuration (it usually is), and you’ll be all set to rewrite some URLs.

 

Tags | .htaccess, apache, engine, mod, request_filename, REST, rewrite, rewritecond, rewriteengine, rewriterule, script_filename, uniform resource locator, url, xml

04

Mar
2013

Information Resources

Permalink

By admin404

Google Author and Publisher Tags

March 4, 2013 - Information Resources

Google is piloting the index of author and publisher information in search results to help users discover content created by you on the various blogs and news sites on which you contribute. Adding an “author” tag to your blogs and news articles, or a “publisher” tag to your corporate news articles, press releases, and informational resources (such as this one) can help link users to additional articles on your site, or other sites, which you’ve written. The advantages to these new tags are apparent, especially considering how easy they are to implement.
Read More

Tags | author, contribute as, contributor to, google, mark-up, publisher, rich snippets, structured data testing too, tag

18

Feb
2013

Information Resources

Permalink

By admin404

Twitter Cards

February 18, 2013 - Information Resources

If you’re an avid user of Twitter, you’ve probably noticed the new links that show up on the bottom of certain tweets in your feed. The links say “View Summary” and allow you to read the title and excerpt of an article, along with a thumbnail of the article’s featured image. Those links are called Twitter Cards, come in three different varieties: summaries, photos, and player, and have two different layouts:  web and mobile.Read More

Tags | niall kennedy, process, tutorial, twitter cards, view summary, wordpress plug-in

18

Feb
2013

Information Resources

Permalink

By admin404

Above the Fold

February 18, 2013 - Information Resources

When creating mechanicals for website strategy, or Strategic UI/UX, we often make recommendations for content that should be visible above the fold. In the context of Web search/usage, the term above the fold refers to the part of the web page a user can see without having to scroll down or use the scroll bar within their web browser. In general, this space is at the top of a Web page, and is considered prime real estate for visibility and getting information seen most efficiently. The term, itself, is derived from the web’s ephemeral predecessor, the newspaper, in which the most poignant stories—the ones that would be more likely to sell that particular newspaper over competing papers—were those that were above the crease on Broadsheet or Berliner sized papers. Web strategists use the term above the scroll interchangeably with above the fold.

As browser resolutions increase, the fold mark keeps changing. In 2013, 25.4% of the world was browsing at 1366×768, as opposed to only 18.7% in 2012. And the growing availability of mobile phones and tablet devices, such as iPads, has changed the landscape to a point where we can no longer rely on a majority resolution and location of the fold. As a result, we recommend fluid, responsive layouts that accommodate for the broadest range of resolutions possible. Not only does this help clients to be able to see the most important content, while helping them to sell their services over their competitors’, but it also helps us to reorganize and strategize content based on the different types of users. For instance, a user on a phone may be more interested in contact information, a tablet user may want to read topical news or view videos, and a desktop user may want more in-depth articles and research information. Responsive layouts help gear the content toward these different demographics and re-organize what’s seen above the various folds.

That said, we’re currently in the age of Cinema (16 x 9 resolutions) and Retina (2x Device Pixel Ratios) displays. With iOS’s dock protruding into the available horizontal space and retina’s ability to scale content by pinching, the confusion over the floating fold mark is mired further.

With the one caveat that the rapidly changing environment may soon render this outdated, our recommended fold mark remains 645px for landscape orientations (with allowance for a persistent bookmarks bar) and 900px for portrait.

 

Examples of our testing can be seen below:

Safari Landscape

Safari Landscape

Chrome Landscape

Chrome Landscape

Safari Portrait

Safari Portrait

Chrome Portrait

Chrome Portrait

Safari Landscape - Bookmark Bar

Safari Landscape – Bookmark Bar

If you’re interested in learning more about fold lines, Strategic UI/UX or the changing landscape of the web, drop us a line to initiate a conversation.

Tags | above the fold, above the scroll, berliners, broadsheets, design, develpment, mechanicals, orientation, resolution, standards, strategy, tabloids, website, wireframes

12

Feb
2013

Information Resources

Permalink

By admin404

Scoping a Project

February 12, 2013 - Information Resources

Every year, long before the ice thaws and the ground softens, my father takes a cup of coffee out to the farthest corner of the yard and studies a medium-sized rectangle of roped off terrain that will become his garden. The footage is limited, living in a modest suburb in Michigan, but in his mind, the objectives are organized into columns and rows.

  • Anxiety: What environmental factors should be concern me?
  • Trust: Will I get out what I put in?
  • Expectations: What level of commitment should I prepare for, in terms of budget? Labor? Upkeep?
  • Comfort: What is a realistic yield for an endeavor of this size?

When breaking ground on any mission that will require his time, energy, and resources, my father knows that thorough, comprehensive planning, coupled with a solid foundation, will make all the difference in the success of his venture.Read More

Tags | application, application scope, blueprint, digital, organization, planning, preparation, project scope, scope, scope diagram, site scope, spreadsheet, strategy, web, web site

23

Oct
2012

Information Resources

Permalink

By admin404

Disabling Caching with .htaccess

October 23, 2012 - Information Resources

For our friends and fellow designers who would rather not have to perpetually clear browser cache while fine-tuning CSS, Actionscript, ads or procedural images, you might want to have a look at the following apache/.htaccess directive:

<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>

This little trick, courtesy of AskApache, here:
http://www.askapache.com/htaccess/using-http-headers-with-htaccess.html

Tags | .htaccess, apache, browser, caching, clear, conf, disable, httpd, perpetual, persistent