i.ndustrio.us » HOW-TO

Posts Tagged ‘HOW-TO’

Getting Started With jQuery

June 20, 2007 – 9:06 pm

I first played with jQuery a month or so ago but it hasn’t been until recently that I’ve had a need to actually start using it in my applications. Since it was time to get reacquainted with the tool I thought I’d write a brief tutorial aimed at helping those unfamiliar with the jQuery JavaScript library.

What Is jQuery?
jQuery.com says it well…

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Let’s Get Started
Enough mumbo-jumbo, let’s jump into things. First of all, you’ll need to download the latest jQuery compressed library from http://jquery.com/src/jquery-latest.pack.js and save it locally so you can reference it within your head tag similar to this:

<script src="your/path/jquery.js"></script>

Just about everything that we would want to do with jQuery will manipulate the Document Object Module (DOM). If we try to touch the DOM before it’s appropriately loaded we’ll get some messy errors. To avoid that, the first Read More »

Posted in Tech/Web | Comments (0)

How To: Widen Your Kubrick Wordpress Theme

December 19, 2006 – 9:04 am

Although I plan on creating my own theme whenever I stumble across some free time, the default Kubrick theme that came with WP suits my needs just fine for now.

Lately I’ve been finding myself wanting to take advantage of the entire width of my blog screen. Elements that get in the way of accomplishing this are obviously the sidebar but also the column width as defined in the CSS.

Fortunately we can take care of that with a simple Page Template. If you’d like to create the occasional wide page and use your existing blog width, read my article on creating a Page Template.

Still Need More Space?

Alright, we still need more room for things like Amazon’s astore so let’s widen our standard Kubrick width from 760 to 800.

Note: Take note of the 40px increase as we’ll use that to adjust div padding and such.

As always, be sure to backup your CSS file (default: styles.css) just in case. I’ll present the following steps in an order you can follow if modifying a production site for minimal disruption.

Modify Some Graphics

Using your favorite editor or even MS Paint, open the following files and increase the image attributes to your desired width.

kubrickbg.jpg
kubrickbgwide.jpg (this might only be present if you’ve installed the sidebar widget)
kubrickfooter.jpg
kubrickheader.jpg

Once that is done, extend the image length by cutting off the right size and moving it to the new “right side”. Then copy a middle section of the image and paste it to fill the hole left behind by your initial cut.

If someone knows of an easier way of accomplishing this please share. All it all it isn’t very difficult at all anyway.

Save the new files as a name you’ll recognize to associate with your new width like *_800.jpg or .png (e.g., kubrickheader_800.jpg).

Note: If using MS Paint, you might want to save the image as a PNG to avoid the default JPG dithering that Paint applies to new files.

Edit The CSS

Using the standard Kubick Stylesheet, there are only a few CSS elements you’ll need to modify. Modify your style.css doc by navigating to Read More »

Posted in Tech/Web | Comments (27)

How To: Create a custom WP page template

December 17, 2006 – 5:31 pm

If you know what to look for, creating Page Templates in Wordpress is very straightforward and easy. Here are some simple instructions.

Beginning The Page Template

What you need to do is to create a custom page template. Open the page.php template file in your themes directory and save it as your desired template file (i.e., fullpage.php).

Next you need to add a commented header like the following to the top of your template file so that WP will know it’s actually a template.

<?
/*
Template Name: FullPage
*/
?>

Modifying Your Custom Template

Once you’ve done the above, hack the content to your heart’s desire. I created a new column style in the CSS to have better control over the display.

Here’s what the rest of my page ended up looking like (below the template comment):

<?php get_header(); ?>
   <div id="content" class="fullcolumn">
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <div class="entry">
         <?php the_content('<p class="serif">
             Read the rest of this page »</p>');?>
         <?php link_pages('<p><strong>Pages:</strong> '
             , '</p>', 'number');?>
      </div>
   <?php endwhile; endif; ?>
   <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
   </div>
<?php get_footer(); ?>

Additional Resources

See it in action: Amazon aStore

Posted in Tech/Web | Comments (2)

Simple How To: Upload & Download Content To Your Chocolate Phone

December 4, 2006 – 9:07 am

Despite the lackluster reviews I’ve been very happy with Verizon’s Chocolate phone (LG VX8500) since I picked it up back in August. I haven’t had the trouble others seem to have with things such as using the touch sensitive ‘buttons’.

One major gripe I immediately had was that despite my purchase of the ‘music’ package (complete with headphones, a cd of drivers and a USB cable) I wasn’t able to transfer pictures or ringtones to and from the phone.

The problem is that Verizon didn’t provide any software with controls for interfacing with the phone. They only provided drivers and instructions with how to use Media Player or Yahoo and the like to transfer tracks to your phone.

BitPim

After a bit of searching around I stumbled across a great piece of software called BitPim which takes care of that problem and more.

When I first downloaded it, the software didn’t have the LG VX8500 phone as a selection which required me to pick a near miss and reconfig the connection settings.

The resulting hack left several of the core BitPim features unavailable but enough to still remain tremendously useful.

Fortunately for Chocolate owners there is a new version of BitPim (0.9.08) which has the LG-VX8500 as a selection. You can now download and upload data to your heart’s content, including:

Phonebook
MP3s
Video
Pictures
Midi
Ringtones
Calendar
Memos
SMS
Call History
and more

Getting Started

Provided you have a USB cable which allows you to connect to your phone, getting up and running is easy. Follow these simple steps and you’ll be transferring content in no time.

Install the USB drivers for your phone. Download the Win2k drivers here
Connect the phone to your PC using the USB cable
Windows will attempt to install the drivers (point it to your drivers’ location)
Download BitPim
Configure your BitPim connection settings and select “LG-VX8500″ as your Phone Type
Once you’ve connected to your phone with BitPim, download the existing data from your phone

Voila, you can now move data to and from your phone - have fun and thanks BitPim!

Posted in Tech/Web | Comments (0)

WordPress: Creating a Static Directory

December 1, 2006 – 7:29 am

While I’m very happy with how WordPress2 handles dynamic page generation with customized permalinks and the like, that doesn’t quite suite my needs for storing static content in a “real” directory.

From time to time I find myself wanting to drop files into a directory under the root location of WordPress. Occasionally it’s nice to upload and link to source code, compressed archives, demo applications or even just random files.

If you’ve ever tried this you realize of course that Wordpress assumes all links coming to anything at or below the root location is a link it should dynamically handle and generate appropriately. As such, creating a location such as “…\mydirectory” under the WP root will result in WP 404 message.

Static Jack

I tried out Jack Born’s “Static Jack” plugin which is supposed to allow you the ability to basically add a redirect rule for static pages.

This worked find for a while but when I leaned on it a bit I found that it wasn’t quite designed to accomplish what I needed. Don’t get me wrong, I think this is a great plugin (thanks Jack) but it wasn’t specifically made to address my particular need.

The plugin handled a few things differently than I desired such as not being 100% compatible with IE and not allowing the browser to render txt documents correctly.

Present Solution

While I didn’t necessarily look forward to messing with the .htaccess file, I knew that the problem could probably be solved with inserting a line or two. Thanks to a helpful article by Håvard Stranden, the line I ended up adding was:

RewriteCond %{REQUEST_URI} !^/mydirectory/?

Adding the /? after “mydirectory” allows any directories beneath it to also serve “static” pages.

The WordPress section of my .htaccess now looks like this


RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/mydirectory/?
RewriteRule . /index.php [L]

I hope someone else finds this helpful.

Posted in Tech/Web | Comments (3)

Quick Fix for Xanga Crosspost 0.1 Login Issue

November 22, 2006 – 6:51 pm

Joe Tan has released a number of WordPress plugins available on his site. At present I use a couple of them: the Google Analytics & Feedburner Report and the Flickr Photo Album plugins.

Update: Joe’s latest release has fixed this particular issue. It looks like users might be experiencing a similar problem with ver 0.5 but I am unable to reproduce the error. Keep an eye on Joe’s page for another fix.

It was while browsing these tools that I came across his Xanga Crosspost for Wordpress plugin. I had no idea what Xanga even was or what this plugin did but upon viewing Joe’s Xanga page it became immediately obvious to me how useful the plugin might be. If nothing else perhaps it could leave a crumb trail for increased traffic.

Trouble with Xanga

After downloading and installing the plugin (which was effortless I might add). I then opened the Plugin configuration page to link my Xanga account with my Wordpress installation.

However when I submitted my Xanga username and password I received an “Error: Invalid username or password”. After retyping this several times and then copying and pasting the same credentials I used on Xanga’s site directly it became obvious to me that the problem was not my username or password.

After checking back in at the plugin homepage I noticed 4 recent comments describing the same problem. Something must have changed on Xanga’s end of things. But according to his site, Joe’s out of town for the holidays… if I want this working today it looks like I’ll have to hack it.

Posted in Tech/Web | Comments (26)

Technical Blogging isn’t Easy! Avoid These Mistakes!

October 19, 2006 – 4:02 pm

Okay, I have absolutely no readership right now so maybe this isn’t the best forum to ask for help or tips… but here’s what I’ve learned so far from my new technical blog.

Little or no blogging experience + starting a readable and engaging blog = very difficult (especially true for tech blogs IMHO)

My last post, which talked about version control using Subversion, really really sucked. I’m not quite sure what it is about it that I don’t like but the more I think about it the more I’m sure it is something I hate.

Oh well, chalk it up to a learning experience and try to use it as an example of what not to do in the future, blah blah blah…

How to Start off on the Wrong Foot

1. Liberal use of Cutesy Animal Pics from Flickr

I liked the photo I used from Flickr for my very first post but I think that always trying to work in pics where maybe they don’t belong is a bad idea. Compound that error with a lapse in judgement to use fuzzy wild animal pics and I think we’ve identified a definite formula for nausiating readers.

2. No Paragraph Headlines or Discernable Outline to Follow

I don’t know about the vast majority of blog readers out there but personally, I find that it is only the rare occasion where I am able to read a blog from start to finish without the assistance of paragraph headlines (preferably in BIG BOLD LETTERS). It’s almost like I need something shiny and descriptive to grab my attention and hold my hand through the rest of the article. Otherwise I usually find myself skipping through paragraphs and inevitably bailing out and hitting the back button.

3. Jumping into a Topic Without Introducing It

I can think of a handful of exceptions to this such as…

you’ve blogged about the topic before
you know your readers are already informed
or, the topic is self-explanatory

I’m sure there are a half-a-dozen more exceptions to this but the point is - just because your readers are say, technical readers, that does NOT mean they inherently understand ALL technology! It drives me crazy when people learn I’m a “computer guy” and then ask me to come over and fix their DVD player (note to mother-in-law: please take no offense at that remark; p.s. you’re a great cook).

4. Sounding Like a Freakin Nerd

If you try to communicate technical things to technical people - you do so in a technical way right? Sure, of course you do; technical people speak like that because it’s the most effecient way of communicating. By using technical words and acronyms you’re actually communicating more than you’re saying - which is why non technical people usually say something like, “um… you lost me at hello”.

I’m not sure the best way to avoid this when speaking technically because the last thing you want to do is water down or even skip over technical concepts.

At the same time however, I don’t think it’s fair to assume that all technical people learn in the same fashion. Introducing appropriate visual aids or metaphors might actually enhance the readability of your article to ALL readers! :O

5. You Need to Lighten up Buddy!

It all depends on your writing style of course but a bit of humor never hurt anyone. Okay, that’s completely untrue. If you’re not a humorous person, don’t try to be - you’ll only come across as an un-funny person trying to be something they’re not.

I don’t mean to simply say “be who you are”, because you can get that sort of writing advice anywhere. MY point is, keep it loose. Don’t write like a stiff, even other stiffs don’t like to read that stuff (my apoligies to any stiffs who may disagree).

In Conclusion…

We can apply these points and discover a few things we ought to keep in mind when writing a technical blog post.

Have you used a cutesy animal pic in the last month? Only resort to this if you’re desperate.. or if you’re blogging on the technical merits of taking cutesy animal pics.
Use BIG shiny bold headings every three or four paragraphs
Try to include an introductory sentence or two when rolling out a new topic (or at least a link to Wikipedia)
Visualize a person telling someone else what you are writing. If those people are wearing pocket-protectors then you might want to consider adjusting the tone of your article.
Who would sound better reading your article? Jon Stewart? Or Ben Stein? “…anyone…. anyone….Bueller… ” (i love that guy)

…Here’s to learning the hard way! Post your tips/comments!

Posted in Random Stuff, Tech/Web | Comments (3)