Tutorials « Interactive Llama : Stephen M. James : IndianapolisInteractive Llama : Stephen M. James : Indianapolis Interactive Llama : Stephen M. James : Indianapolis

Ultimate Website Checklist for Launch

Somedays I wish designing and coding websites was just Photoshop/Illustrator and a code editor (I like Coda at this time), but it’s not. Once you understand how the whole system works (Best Practices are changing everyday in this industry…) and you work at a place that has clients based on relationships (therefore valuing quality over shipping bad product), it’s a varied list of technologies to provide optimal performance, social sharing, error checking, compiling, and general quality assurance.  There are many of these lists out on the web. Mine is targeting the WordPress CMS, but should be applicable to most content management systems and probably most websites. Remember, it’s sometimes about removing a feature instead of adding one.

Continue Reading →

Tips for responsive web design

Right now, responsive is pretty much all about the width of your website–although it may not always be that way. Responsive design is an approach though and not a specific technology (media queries, etc.). It’s about responding to the device the website is being displayed upon. For example, the appropriate design may change for touchscreens by making buttons larger.

People are used to scrolling up and down, so matching the width of your document to the width the browser is often the main goal. Although most of the tips below are related to CSS and media queries AND focus on informational sites (not web applications), I believe that JavaScript has a significant place to play in behavioral changes and touch implementations in responsive design. The following list is intended for front-end developers and designers that work with CSS regularly, but are just starting to build responsive sites.

Note: I am not going to use the term mobile, but small-screen. Using mobile implies that you are moving–not that you are viewing the site on a small screen. (via Zeldman)

The decision trees of your layout multiplies with responsive design. Where should this item if the screen resolution is…? This adds complexity to the project due to the multiple (or continous with fluid layout) layouts. Be sure to plan out how many layouts you will create from the beginning. Small, medium, and large? Two small layours (landscape and portrait?) Start with a media query boilerplate and add or subtract the media queries you need.

Continue Reading →

Pruning blog posts from syndication feeds

rssbuttons

Update 06/11: PostRank appears to still work, but they have been bought by Google (not a big surprise…). We are waiting to see if the Social First top-down strategy that Page is implementing will cause PostRank to atrophy or shut down anytime soon. There is a Chrome/Safari plugin that works with Google Reader, too.

Update: FeedHub is dead. It’s been deceased for almost a year now. Their parent company mSpoke shut the free news feed authority weighing system. I have replaced FeedHub with another free feed weighing service, PostRank. It’s not as convenient to use. All your feeds are not combined into one feed. If you have over one hundred feeds that you subscribe to, you will want to export an OPML file (collection of feed URLs) and import that file into your feed reader. You do however have the option within each feed to allow either all, good, great, or only the best ranked news feed articles.

Continue Reading →

Hiding an email address from spambots and spiders

There is an army of spiders out there.  Some, like GoogleBot, you want scanning your site to be listed in their search engine. Many however have a devious purpose–to collect email addresses to add to spam email lists. If your email address is already out there, then there is no pulling it back in. The only way to eliminate spam is to create a different address and inform all your contacts that you have changed email addresses.

Ways to combat email spam:

  • A non-linked image
  • HTML entity encoding
  • Client-side obfuscation/abstraction (via JavaScript)
  • Server-side redirect
  • Contact form (no email address listed)

If your email address, is spelled out with any client viewable code, it is possible to obtain. Now that search engines can read PDF documents, including your email within a PDF as text may be suspect. I have not gone into great depth on any of them below but have provided a short description of each method with advantages and disadvantages listed.

Continue Reading →

Project organization: A reasonable file framework

file-framework

The writer, Stewart O’Nan, once said “The two hardest things about writing are starting and not stopping.” Programming at its essentials is writing. When I’m wearing my web developer hat, it seems that I spend over a quarter of my time browsing around the OS-X Finder. So what better way to start programming then having a file framework. Not only can you start more quickly, but your structure will stay consistent. Think of the last time you edited someone else’s project and that person placed all their files in one folder. Oh, the horror!

Introduction to my file framework

The guiding principle for my file framework is:

Either precisely title all files with hierarchical prefixes or create sub folders to categorize your files.

With video projects and print projects that output to one file, file organization isn’t as essential. With web design, you do not want the files you publish getting mixed up with your source files. Yes, we all have at least once uploaded a 100MB Photoshop file to the online server and wondered why it was taking so long. This file framework focuses on web production and output.

Continue Reading →

How to create a Twitter book reading list

twitter-reading-list

I enjoy reading books. Most of the time, I read non-fiction. I don’t have anything against fiction. My wife reads fiction, but it’s not my cup of tea, unless its a classic. Whatever you read, you would probably like to share it with your friends. Now it’s easy. With these steps you can tweet about your latest book by simply adding the book to an Amazon Wishlist. No figuring out how much of the title you can post within the 140 character limit. No creating a TinyURL for the Amazon product page. A few hours later your twitter account will tweet your book addition!

Continue Reading →

Gallery2 titles and keywords search engine optimization script

If you are interested in the open-source image gallery web application, Gallery, you have probably read the Thirteen Ways To Add SEO To Gallery2. If you haven’t, then read that tutorial first. Within that tutorial, I mention a bulk renaming script that I have used for years with Gallery2 to change titles and keywords. This post is about that title and keyword generating bulk script. It removes some common naming conventions from the titles and removes common words from the keyword list. Do people really want to see all the photographs that contain the articles, “a,” “an” and “the.” I certainly wouldn’t.

The default title for Gallery2 item uploads is the file name of the image. It easier to name your files well from the beginning from the safety of either than edit the URL, titles, and keywords for your item after they are uploaded. My naming convention for a file name is photo_set-photo_subset-people_or_objects. For a photo of my parents, my bride and myself at my wedding, I used “wedding-party-parents-rachel-stephen.jpg”

Continue Reading →

CSSsprite: Photoshop script combines two images for CSS hover

The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken from JavaScript and the hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

Continue Reading →

Secondary Browser: I’ve been using Chrome for months

This isn’t about Chrome, for me it’s really about using a second browser. A second browser to only use for web applications. Honestly, I admit I haven’t been using Google Chrome for months now. I’ve been using Safari. It is my understanding that Google’s Chrome browser uses WebKit as it’s rendering engine with the advantage of starting each window/tab in a separate process (which Internet Explorer 8b2 also does) to increase stability. The general idea is if your Google Docs crashes, then your Gmail doesn’t crash–just how desktop applications work. Your web applications are sand-boxed and protected from other web pages. Safari/WebKit/Chrome: What’s the difference?

Continue Reading →

Create reading list in WordPress from Amazon Wish List using Yahoo! Pipes

I read many books from the library. I don’t finished reading many books though. First of all, they are free, since they are from the library, and second my attention span doesn’t last that long. I believe browsing the web daily from age 14 (circa 1996) will do that to someone (read the latest cover story in The Atlantic Monthly, is Google Making Us Stoopid). Most of the books I read come from the magazines I read (The Atlantic, Books & Culture: A Christian Review) or from the podcasts I listen to (Diane Rehm, This Week in Tech).

Either way, I want to share my latest reading endeavors across my blogs. But how?

Continue Reading →

Plain text link to HTML with a PHP function and regular expressions

If you have ever wanted to turn a plain text link, http://www.smjdesign.com, into a “linked” HTML version, http://www.smjdesign.com, you can now. Pass the following function your entire text field and it will find all your links and return tagged HTML.

function replace_plain_text_link($plain_text) {
$url_html = preg_replace(
'/(?<!S)((http(s?):\/\/)|(www.))+([\w.1-9\&=#?\-~%;\/]+)/',
'<a href="http://www.interactivellama.com/http$3:/$4$5">http$3://$4$5</a>', $plain_text);
return ($url_html);
}
echo replace_plain_text_link("hi this is dummy text before
http://www.smjdesign.com hi this is dummy text after")

Continue Reading →

Graphic web design and cascading style sheets

On Saturday, February 9 at 11:30 am, I spoke at BarcampIndy 2008 on Graphic Web Design and Cascading Style Sheets. All presentations were broadcast on BlipTV. You can view a video of this presentation on BlipTV.

The premise of my presentation was to show an overview of the process between layout in Illustrator and PhotoShop to coding in HTML and CSS. I find that web design is often segmented between the coders and graphic designers. I propose that the best outcome can come from bridging that gap. I do this in my daily workplace and try to show tips and techniques for others to bridge that gap. The time slot was only a half hour, so I could not go into coding detail, but only point to tutorials via links.

Continue Reading →

WordPress: Setup a static front page and a posts page

In WordPress Administration under Options->Reading, there is an option to set a “Front page” and “Posts page.” The front page setting is fairly straightforward. If you do not want your latest blog posts (index.php) as your homepage, you can set a static page and its template as the root page (http://www.example.com/). This is great for an under construction page, too.

Posts Page

What is a post page? If you have disabled the default homepage (explained above) and made it a static template page, then where are your latest posts? They are on this page.

1) Create a page (Write>Write Page) and make the “Page Slug” on the sidebar whatever URL slug you want to be the location of your posts. I recommend making it be the same as your custom structure (Options>Permalinks, e.g. – “blog” as in “/blog/%postname%/”).

2) Go to this Options->Reading and in the drop down box for “Posts Page” you can now choose your newly created page (e.g.- “Blog”).

The contents of this page (i.e.- “Blog”) will never really be accessible. Now if the user goes to “http://www.example.com/blog” then they will see the latest posts instead of an error.

Upgrading a blog to WordPress 2.3 and changing your Ultimate Tag Warrior tags

I upgraded the poetry knook today from WordPress 2.1.3 to 2.3. Including backing up the database and user files, the process took about an hour. Be sure to follow the upgrade steps (in order!). I have heard that logging into administration during an upgrade can cause problems.

WordPress 2.3, which was released back in September, includes among other things: a native tag system, plug-in and platform upgrade notification, post management interface improvements, roll your own dashboard, and roll your own RSS libraries. Many of these items have been addressed by plug-ins. Tagging especially comes to mind. I love Ultimate Tag Warrior and use it on all my blogs.

Continue Reading →

HTML standards in email clients: Oh, the horror!

A new HTML standards for email clients advocacy site has sprung up. It’s called Email Standards Project. I sincerely hope that it is able to make a difference. I’ve personally had issues with the major discrepancies in email clients at my job. I’ve heard that Microsoft Outlook 2007 is unfortunately using the Word HTML engine instead of the Internet Explorer Engine. The full list of clients that are on the Average or Poor list are:

This is based on their acid test. If you are involved in developing internet applications or sites and aren’t familiar with acid tests (and you should be!), visit WebStandards.org for the web browser acid test.

So what’s a person to due in the mean time–structural tables and inline CSS, of course! That’s what! So barbaric and so 1999! Here is a tutorial on what HTML/CSS you can use across multiple email clients.

Another hard drive crash–fixed in just an hour

Today, I came home to see the dreaded “DISK BOOT FAILURE – INSERT SYSTEM DISK AND PRESS ENTER” notice from Windows XP. This has already happen recently–a little over a month ago. This time though I knew what I was doing.

All my personal data (photos, music, program installation files) are on a separate drive that I then backup every week to an external hard drive. This separates the data from the hard disk that contains the operating system and creates a second copy. Separating the data from the operating system also allows for an easier backup, since the whole drive and be duplicated. I use Retrospect Express that came free with my external hard drive to copy and verify the external drive.

Most likely my master boot sector (MBR) became corrupted and so I told the Windows XP installation CD to install a second copy of Windows. This fixes the master boot sector and allow me to boot into the previous version. Walla! The problem is fixed.

Now if I could only figure out why the hard drive’s master boot sector become corrupted in the first place. My first thoughts were heat, but then why would only the boot sector be corrupted. If you have any ideas, please post them!

Library book lookup from your browser

Have you ever seen a book on Amazon or another website and wondered whether your local library had a copy of it?

I have to admit as much as I like my library, Indianapolis Marion County Public Library. I do not care for the web interface with it’s URL session ids and timeouts and JavaScript linking! So I try to stay out of the website until I want the book. I saw LibraryLookup on 43 Folders. I tried LibraryLookup, but was annoyed with the ISBN interface. BookBurro looked promising but it only worked on 20-some library. I’m not a member of any of those libraries.

I decided to roll my own Firefox Search Plugin–which is very simple to do. You just have to know the query keywords for your library (such as isbn, keyword, title). The IMCPL is an IPAC system and uses “UTL” for its title keyword. Just drop this Firefox Search Plugin for IMCPL Title Browsing or this Firefox Search Plugin for IMCPL Keyword Search in your Firefox Search Plugins folder and restart Firefox. You will need Mozilla Firefox 2.0 or greater for this.

The Firefox Search Plugins folder for PC is C:\Program Files\Mozilla Firfox\SearchPlugins

The Firefox Search Plugins folder for PC is for OS-X that’s /Volumes/Macintosh HD/Users/{user name}/Library/Application Support/Firefox/Profiles/{profile number}.default/searchplugins/

That’s all there is to it. Here are the few lines of the code for the Indianapolis Marion County Public Library for title browsing:


<search
name="IMCPL"
method="GET"
action="http://catalog.imcpl.org/ipac20/ipac.jsp"
queryCharset="utf-8">

<input name="term" user>
<input name="index" value="UTL">
<input name="spp" value="50">
</search>

Multiple CSS increases productivity of hiding and showing with display attribute

With the prevalence of DHTML, much less AJAX, I have begun to use separate Cascading Style Sheets for development and publishing. Since styles override each other, the easiest way to accomplish this is to add a second style sheet link after the publishing CSS link and comment it out when one wants to test the page.

“dev.css” contains “display: block;” within all classes that in the publishing CSS contain “display: none;” much like that below:

.profile_box { display: none;} (index.css)

.profile_box { display: block; } (dev.css)

Flash: Flash JavaScript Integration Kit

I’ve noticed some Google searches related to the Flash Back button post, so I thought I’d post on the Flash JavaScript Integration Kit.

You can call Actionscript function from JavaScript and call JavaScript from inside ActionScript. One use I’m considering using it for is for a new portfolio idea.

–Stephen M. James
www.smjdesign.com

Flash: Using swapDepths()

NOTE: This article is only valid for ActionScript 2. In ActionScript 3, movieclip depths start at 0 and are contiguous. If you have 2 objects within a container, they will be at depths 0 and 1, respectively. You cannot have one at depth 0 and the other at 3 leaving 2 empty depths (depths 1 and 2).

So you want to change the depth of your pictures and text in Flash with ActionScript?

Check out this tutorial, Depths – How they work in Flash, at Kirupa.com. The first page you should already know if you been doing coding ActionScript professionally for some time. It is the second page that is the most interesting:

Major points of the second page:

  • Timeline Zone: Flash places static items on the timeline in depths -16,384 to -1.
  • Dynamic Zone: Dynamically placed movieclips are in 0 to 1,048,575 (and can only be removed from this range)
  • Reserved Zone: Dynamically placed movieclips can be in 1,048,576 to 2,130,690,04, (but can’t be removed)
  • The exception to these zones is createEmptyMovieClip method. There is no limit for the depth when creating an empty movieclip.
  • The timeline refreshes when gotoAndPlay() is called. Timeline refreshes do not keep dynamically placed movieclips on the screen if they were placed there by a frame in the future of the timeline. Example: A movieclip is dynamically created (or swapDepths is called, placing the movieclip in the “Dynamic Zone”) in frame 10. A refresh occurs in frame 5, when gotoAndPlay(5) is called. The dynamically created movieclip (from frame 10) dissappears.
  • If you use swapDepths to bring a movieclip which was placed on the timeline originally to a depth above 0 (not the Timeline Zone), then in a timeline refresh, that clip will not be removed in the clearing of the depths (the refresh) and a new instance of the same movieclip will be placed at its original depth, thus duplicating it and causing runtime errors that Flash Player will not flag.

So what is one to do? If you just swapping movieclips back and forth, like in this template for the Renaissance Pointe, then call swapDepths() with a negative value.

Looking for an Actionscript 3 tutorial?

You might try this tutorial on swapDepths for Actionscript 3.