Image Image Image Image Image
Scroll to Top

To Top

Information Resources

31

Mar
2016

Information Resources

Permalink

By admin404

ERA404 Favicon / App Icon Generator

March 31, 2016 - Information Resources

Favicons

See that little orange circle in the tab of your browser? That’s a favicon. The little 16×16 pixel square isn’t there just for looks. It has a subtle – yet important – role in building the brand on your website. When a visitor sees one, it’s a strong indicator that they came to the right place – which can also be reassuring in a sense.

But a 16 x 16 ICO file just won’t cut it anymore. Enter the ERA404 Favicon Generator.

The concept of favicons was first introduced by Internet Explorer in 1999. They were produced in ICO format and were dropped in the root folder of the domain as/favicon.ico. Since then many things have changed. They are now used for multiple purposes in different devices and many developers pay insufficient attention to their importance and thereby miss an opportunity to make their websites that much more distinctive and memorable. Today, favicons have an importance of their own. Their visual impact will continue to grow and you should expect them to grow in functionality, as well.

As different devices and screen resolutions continue to arrive on the market, the number of icons required for web sites and applications keep growing.

One of the best enhancements to the use of the favicon in recent times has been the expansion to allow the 32-bit PNG format. You can use transparent images with rounded corners as the favicon for your websites, a design that was too difficult to achieve in ICO format. Browsers like Google Chrome and Mozilla Firefox allow the use of PNG favicons.

Apple devices with iOS 1.1.3 and later require a special type of rel property which can be recognized only by such devices. The rel property in such devices use apple-touch-icon and apple-touch-icon-precomposed.  The value apple-touch-icon-precomposed is used to instruct the device not to add a simulated shine to the favicon and use it as it is. The recommended basic size for Apple devices is a 57×57 beveled square. For higher resolution screens use 114×114 size images. iPad2 uses 72×72 size while iPad3 uses 114×114 for its retina display.

Windows 8 uses the concept of tiles and has the option to pin a website to the home screen. Pinned Sites in Windows 8 describes how site developers can provide a site icon for their sites’ pinned site tiles on the Windows 8 Start screen, using msapplication-TileImage and msapplication-TileColor. More information can be found on the Microsoft Developer Network’s IEBlog, here.

Use the ERA404 Favicon Generator

 

App Icons

If you’re a developer building apps for iOS or Android, you’ll need to generate a number of icons before your application will even be submitted for review and approval. More importantly, app icons provide strategic marketing and promotional opportunities. If a picture is worth a thousand words, then your app icon is worth more than any other asset for your mobile or tablet app. Your app icon is the most evident element of your branding, both on the home screen of the users’ devices and in the app store where the decision is made to try/buy.

“Many users are inspired to download the app first by the icon rather than the description. We are visual animals and icons play a huge role.”

Gabriel Machuret, App Store Optimization Blog

While the ERA404 App Icon Generator will help you create icons at various sizes for your application, we recommend you use these as the foundation for creating more alluring artwork to promote your app. Sony Mobile recommends taking advantage of users’ impulsive mobile download behavior by making your images more compelling than just an icon. Carefully examine the value of your app icons and their application within the stores. Keep them iconic and uncluttered, strive to stand out, and consider qualified and unbiased reactions to the design before submitting them to the app store (iOS won’t let you change them until a new version is uploaded). Read more guidelines by Sony Mobile, here.

AppIcon Sizes

For your iOS and Android app: app icons, launch images, and Newsstand cover icons are generated in required formats and stored in the app bundle. The OS uses these images in various locations to represent your app.

For app stores (such as iTunes Store and Google Play): larger images are used for app identification and promotional purposes. OSX Human Interface Guidelines and Google Play Brand Guidelines can provide further information about usage and best practices.

Use the ERA404 App Icon Generator

Tags | app, app icons, app store, apple-touch-icon, apple-touch-icon-precomposed, favicons, google play, icons, ios, itunes store

19

May
2015

Information Resources

Permalink

By admin404

Twitter Cards and WordPress

May 19, 2015 - Information Resources

In our “Twitter CardsInformation Resource (February 2013), we shared with you a step-by-step guide for setting up your meta-tags, testing, and applying to Twitter to implement Twitter Cards into your WordPress site. Over the last two years, we’ve updated our process to best suit our clients who want to refine Twitter Card content for their WordPress sites, and overcome the limitations of sites with AJAX-loaded content, which was previously impossible with Twitter.

Read more…

Tags | .htaccess, ajax, ajax-loaded, dynamic content, lazy load, php, tips, tutorial, twitter, twitter cards, wordpress

02

Apr
2015

Information Resources

Permalink

By admin404

App Resource Cheat Sheet

April 2, 2015 - Information Resources

A Quick Reference of Application Icon and Splash Screen Sizes and Locations for Google Play and Apple iTunes App Store

With this year’s release of the iPhone 6 and 6 Plus and the growing, supposed Android Screen Fragmentation, we find ourselves dealing with more resources to support an increasing list of device screen resolutions. Oftentimes, finding an up-to-date list of the application icon and splash screen sizes (and locations, for PhoneGap Cordova) can be an arduous task. In fact, there’s a very good chance that by the time this Information Resource is published, it will already be deprecated.

Regardless, feel free to reference this list as a cheat sheet for Android and iOS icons and splash screen sizes with the caveat that it was created on April 2, 2015, and may already be obsolete. Read more…

Tags | android and ios, android screen fragmentation, android screens, app icon, app resources, app splash, app splashscreen, app store, apple app store, apple itunes, apple itunes store, apple store, application icon, application splash screen, cordova res, cordova resources, Default-568h@2x~iphone, Default-667h, Default@2x~iphone, Default~iphone, drawable, drawable-hdpi, drawable-land-hdpi, drawable-land-ldpi, drawable-land-mdpi, drawable-land-xhdpi, drawable-lpdi, drawable-mpdi, drawable-port-hdpi, drawable-port-ldpi, drawable-port-mdpi, drawable-port-xhdpi, drawable-xhdpi, google play, icon locations, icon sizes, icon-40, icon-50, icon-60, icon-72, icon-76, icon-small, iphone 6, iphone six 6 plus, phonegap icons, phonegap res, phonegap resources, reference, resource list, screen resolutions

10

Apr
2014

Information Resources

Permalink

By admin404

Cordova CLI Doesn’t Like Spaces

April 10, 2014 - Information Resources

This is a quick trick for any Cordova coders operating on a Windows environment.

C:\app\>cordova -d platforms add android
cordova library for "android" already exists. No need to download. Continuing.
Checking if platform "android" passes minimum requirements...
Creating android project...
Running command:
    cmd args=["/c",
        "C:\\Users\\My Account With Spaces\\.cordova\\lib\\android\\cordova\\3.4.0\\bin\\create",
        "--cli",
        "C:\\app\\platforms\\android",
        "com.mycompany.testapp",
        "Test App"]
'C:\Users\My' is not recognized as an internal or external command,operable program or batch file.

( Grrr )

Windows should probably know better than to create directories (especially often accessed ones, such as a user’s profile folder), if it doesn’t know how to later address them in command line.

If you’re scratching your head over this one, you can get around it by modifying the path.
Open superspawn.js, located  here:

C:\Users\[My Account With Spaces]\AppData\Roaming\npm\node_modules\cordova\src

Update the line that calls the command to use a symbolic link. It’s roughly line 57:

This:

cmd = resolvePath(cmd);

Becomes This:

cmd = cmd.replace('C:\\Users\\My Account With Spaces\\.cordova','C:\\cordovalink');cmd = resolvePath(cmd);

Then, create a symbolic link at the new location C:\cordovalink, using this command:

C:\>mklink /D C:\cordovalink "C:\Users\My Account With Spaces\.cordova"
symbolic link created for C:\cordovalink <<===>> C:\Users\My Account With Spaces\.cordova

Hopefully this will save you some time.

Tags | android, application, cli, coding, cordova, development, ios, plugin, production, programming, tips, tricks

06

May
2013

Information Resources

Permalink

By admin404

WordPress Video Thumbnails and Facebook

May 6, 2013 - Information Resources

Video Thumbnails (also called “Poster Movies” by Quicktime and “Poster Images” by other video services) are the photos that are displayed in a video player before a video is activated and/or while the video is buffering.

If your blog is built on WordPress, and your videos are hosted on YouTube, you’ll notice that Facebook’s “Like” and “Send” buttons will rather liberally “scrape” (Facebook’s version of spidering and indexing) the article you posted. If you have the WordPress SEO plugin installed, you’re given some greater control over the granularity of your meta. But neither the WordPress core nor this popular plugin currently has a handler for passing YouTube video thumbnails to your social networks via Open Graph. For posts that are videos with only a few words of supplemental copy, Facebook users may not be enticed to click these shared links if they don’t include video thumbnails. Read more…

Tags | facebook, plugin, wordpress, wordpress seo, youtube

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