All posts tagged ‘tutorial’

File Under: Ajax, JavaScript

Build Ajax Components With Spry

Apparently, the pro-developer guiding principles of Macromedia continue to survive under the direction of Adobe. Ever since they acquired Macromedia, Adobe, the company that was previously all about PDFs and PSDs, has been releasing a healthy serving of web tools via Adobe Labs. The Adobe Labs site is quickly becoming a vital meeting place on the web where developers can share ideas and experiment with new technologies.

Adobe’s Flash-meets-Ajax framework lets developers create dynamic interfaces and UI elements. Now they’ve unveiled a preview release of their new Ajax framework, Spry.

In this article, I’ll walk you through making a very simple Spry application. I hesitate to even call it an application, because most of the heavy lifting is done in the framework itself. The code we’ll be writing will look an awful lot like HTML and CSS.
Continue Reading “Build Ajax Components With Spry” »

File Under: Blog Publishing

Get Started With Movable Type

You recently decided hosted blogging is for the birds. You want more control over your blog’s setup. In fact, you want total control over every last detail of your layout, functionality and design. So what do you do? Where do you turn?

One popular option is the Movable Type publishing system from Six Apart (other popular options include Drupal, Joomla!, and WordPress). Movable Type contains pretty much everything you need to get your own site up and running, plus the flexibility to get really obsessive over the details. Also, with a little creativity and some community-created plugins, you can power much more than just a reverse-chronological list of blog posts.

This tutorial won’t go into the Movable Type installation process in-depth since there are many resources online already. What we’ll cover is the process of dressing up a vanilla Movable Type installation by customizing the look and feel of your new site. We’ll also get you started with some custom features by installing some plugins.

Continue Reading “Get Started With Movable Type” »
File Under: Multimedia

Get Started With OEmbed

Anyone with a blog will tell you: the best thing about the social media sharing revolution is the “sharing” part.

Popular sharing sites like YouTube, Photobucket and Last.fm offer embed codes, strings of code that make it easy for you to plug a video or a song (inside a small player or display wrapper) into your page. These codes work great for sites that offer them, but embed codes and options for embedding media differ greatly from site to site. And some sites don’t offer any easy sharing codes.

It’s easy enough to post an image or MP3 if you know some HTML. But by now we’re deep into the age of the big “share” button — blog tools and widgets that offer no-brainer, one-click posting. So if you’re building a social app that allows users to share images, videos or songs, your visitors will expect something that’s as dead easy as it gets.

To that end, what if there was a standard for grabbing a full multimedia embed code from a URL? Wouldn’t it be nice if you could turn a simple URL link into an embedded Flickr image or YouTube video? Sure, you can reverse engineer many of the various embed structures offered by sharing sites, but what happens when the host of your embeded media changes its format or relocates the actual asset? Thousands of broken links suddenly litter your site.

These are the wishes (and problems) that led to OEmbed, a new proposed standard for taking a URL and generating an embed link. The proposal is the brainchild of Pownce developers Leah Culver and Mike Malone, as well Cal Henderson of Flickr and Richard Crowley of OpenDNS.

Not every site supports it, so OEmbed isn’t going to solve all your embedding needs overnight. But given that some big names — like Flickr and Viddler — have already signed on, we think others will soon follow suit.

Let’s dive in to see how OEmbed can make your life (and your webapp) easier.

Continue Reading “Get Started With OEmbed” »
File Under: HTML

Create Simple HTML Tables

I love tables. I know, I know. I’m a geek. But I really do.

I remember when I first discovered tables, back in the days of Netscape 1.1. I stayed up all night and had a transcendental experience around 4 a.m. Finally, I could control where things fell on a page!

Well … kinda. Actually, the beauty of tables is that they’re flexible. You can make them spread out, and take up the whole page (no matter how wide the user makes it). Or you can make them rigid, and force the page into a certain shape. The choice is yours. You’re in control.

But today we’re starting with the basics.


Continue Reading “Create Simple HTML Tables” »

File Under: UI/UX

Photoshop Tips for the Web

It’s difficult to think of an electronic gadget that’s changed the way I look at the world more than my digital camera. I held off from buying one at first, but after a year of researching and one particularly hefty tax return from Uncle Sam, I made the plunge. Roughly US$500 later and I was staring down a convex lens at my life. Suddenly, every sight was a picture waiting to be taken! Every scene a perfect composition begging to be snapped up and stored on a memory card. After some advice from my pro photographer friends and a whole lot of practice, I officially became the annoying guy with the camera at the crowded party.

The truth is that digital photography is actually rather difficult. Not the taking pictures part, that’s easy. It’s the creation of a perfect end product that’s the sticky part. Taking a raw JPEG or TIFF file and crafting a digital image that looks beautiful on all the different monitor types is a process that transcends art and borders on science. Some photos turn out almost perfect from the get go – never underestimate the power of good natural light! – but most of your snapshots are going to need some gentle persuasion in the right direction before they are ready to wow the New York gallery scene.

Don’t panic, because Webmonkey is here to impart advice on creating that sharp, bright, and well-balanced image that you can show off on your site, your blog, Flickr, Zooomr or anywhere on the web. We’ll be using some tools and techniques that will be familiar to you if you’ve ever spent any time messing around in Photoshop. I’ll also be covering some basic rules about file handling, monitors, and display options.

Continue Reading “Photoshop Tips for the Web” »