Webmonkey

Great Documentation Is Key to Open Source Success

Listen up open source developers, if you want your project to succeed you’re going to have to do more than write great code; you’re going to have to document it, teach new users how it works and provide real-world examples of what you can do with it. That’s the message from Jacob Kaplan-Moss, one of the creators of Django, a very successful open source, Python-based web framework. At least some Django’s success can be attributed to its thorough documentation which is not just reference materials, but also includes tutorials, topical guides and even snippets of design philosophy.

Building Web Pages With HTML 5

Depending on who you ask, HTML 5 is either the next important step toward creating a more semantic web or a disaster that's going to trap the web in yet another set of incomplete tags and markup soup. The problem with both sides of the argument is that very few sites are using HTML 5 in the wild, so the theoretical solutions to its perceived problems remain largely untested.

The IFrames Lowdown

Unlike regular frames, iframes float anywhere on a page just like an image!

Authenticate and Track Users with PHP

Learn how authentication, cookies, and sessions can add security and a personal touch to your site.

Building a Photo Gallery

Got some righteous digital pics that you want to display on your site? Todd shows you how to create a photo gallery using PHP.

Building with Flash and MySQL

Building a blog is cool, but building a blog with Flash, MySQL, and PHP is so much cooler. Scott guides you through two days of coding and querying.

Encryption Tutorial

Dishes up the why and how of real-life data encryption, covering PGP and GnuPG, and using PHP and the mcrypt and mhash libraries.

Generating Images on the Fly

Paul looks at how PHP, GIMP, or Generator can be used to churn out up-to-the-second charts and graphs, change your site's look and feel on demand, display newly created passwords as bot-defying GIFs, and more.

Making PDFs with PHP, PDQ

PHP can do a lot for your Web operation. You can generate nice-looking printable receipts, invoices, and brochures. Disc-Cover has a test site that looks up info about a CD automatically and then generates a PDF label for the CD box that you can print, cut out, and use. And there are literally one billion other possible uses for dynamically generated PDFs.

PHP/MySQL Tutorial

See why Graeme thinks these packages make the world's best combination for creating data-driven sites, then get started in Web databasing the open source way

Site Navigation with PHP

Put some logic in your pages with PHP. Minimize the hassles for yourself and your users.

Threaded Discussion with PHP/MySQL

Make your Web site a conversation piece and learn a couple of coding tricks in the process.

Choosing the Right Database System

The Web-surfing public doesn't really care about flashy-yet-useless technology. They want Web sites that do something for them: provide a service or entertainment; help get a job or a date; check bank account balances, stock prices, interest rates, availability of airline tickets, today's weather ... and so on.

Freelancing in the Web World

To live the freelance life is to live a life of uncertainty. Not knowing when or from where your next paycheck is coming requires a certain mind-set that not everyone possesses. Some may argue that with so many companies struggling just to keep their heads above water now that the bang is out of the Big Web Boom, full-time work is no more secure than the freelance lifestyle. But before you unplug that feeding tube once and for all, ask yourself if you really have what it takes.

Push Media and HTTP 1.0

While push systems bring us a new paradigm for content delivery, the underlying technologies are the same ones your browser and email have run on for years. If you've been working on the Web for a while, you may already be a push-media expert.

Stylesheets: The Next Generation

So, you've mastered Cascading Style Sheets, right? You've memorized the spec, read up on all the tips and tricks, and even understand the theoretical benefits of separating presentation from structure in your Web pages. Your Web sites are filled with gorgeously rendered text and sport fine control of point size, leading, margins, and backgrounds. You change dozens of pages by editing one simple text file. You've done all that, haven't you? Yeah, me neither.

The Writing on the Web

Sure, the Web talks a good game with its sound and video and animation and god-awful 3-D interfaces. But lurking beneath all those various bells and whistles is good ol' text. It doesn't have the sinus-blowing sex appeal of Flash or MP3, but text is the stalwart backbone of Web-based content. It rolls up its sleeves and gets the real work done.

Writing Web Documentation

Your product is almost ready for release. You're about to pat yourself on the back when you realize that you have no user documentation! Panic sets in.

新サイト最適化講座1−画像編 (第1回)

百聞は一見にしかずじゃないけれど、その分量の対比という意味では、同じ読み込み時間で、テキストなら何ページ分も表示できるのに、大きな画像は1枚表示するのがせいぜい、というインターネットの世界を良く表しているね。ウェブサイトを巡っていれば、最後に出てくるのは画像だというのは知ってるだろ、読み込みにかかる時間の大半を画像ファイルに費やしちゃってるから、表示が最後になっちゃうんだ。

新サイト最適化講座1−画像編 (第2回)

PNGとGIFの圧縮は可逆圧縮といって、JPEGとは違い、画像の詳細部分がぼやけたりしないんだ。とても細かい地図なんかをスキャンしたり、小さなテキスト付きの画像を作るんだったら、GIFかPNGのどちらかを選んだ方が良いね。ただ、大きな写真をGIFやPNGで保存すると、ファイルサイズが巨大になって、読み込み時間も長くなっちゃうからね。

Embedding Fonts Tutorial

We really don't have to be stuck in bland land anymore. Font embedding is here, which means that we can use just about any font we want to on our Web pages, and users will actually see it.

Browser Chart

One of the biggest pains about making Web pages is having to keep track of which browsers support what features. Wouldn't it be nice if there were some way to keep track of it all? Well, we've whipped up a few articles and charts to make things easier for you.

JavaScript Code Library

The Webmonkey code library is our own collection of code fragments, function packages, and Web editor extensions - a resource containing generalized code, specific workarounds, and good ideas that you can use to enhance your pages in ways you may not know how (or may not want to bother) to program.

Stylesheets Guide

CSS (cascading stylesheets) is a simple mechanism for controlling the style of a Web document without compromising its structure. By separating visual design elements (fonts, colors, margins, and so on) from the structural logic of a Web page, CSS give Web designers the control they crave without sacrificing the integrity of the data - thus maintaining its usability in multiple environments. In addition, defining typographic design and page layout from within a single, distinct block of code - without having to resort to image maps, tags, tables, and spacer GIFs - allows for faster downloads, streamlined site maintenance, and instantaneous global control of design attributes across multiple pages.

Transactions in MySQL

Protect your data from crashes and the confusion of multiple user requests with a transaction-capable database.

Freelancing in the Web World

So you think you've got the cojones to be a freelancer, eh? Then join Evany as she gives you some pointers on this wild and woolly career move.

Online Job Hunt Tutorial

Team Webmonkey reveals where to look for Web jobs, how to tweak your e-résumé, and the best way to interview.

The Right Web Job for You

Looking for a dream job in the Web industry? What the job titles really mean and what skills you need for each position.

Wanna Be a Project Manager?

Whether you're managing an entire army or an army of one, Pam's project management tips will help you get that site built.

Digital Photography for the Web

Like digital photography? Here's a look at tools and tricks you can use to create great photos for your site.

Old Dog Learns Stylesheets

Heidi shares the stylesheet wisdom you need to drag your site into the CSS century.

Progressive Enhancement and the Future of Web Design

A look at the past and future of Web design, including a new strategy called progressive enhancement.

Sharing Your Site with RSS

Jason shares his knowledge about RSS: What it is, how it's used, and why you need it. Just don't ask him what it stands for.

Streamlining with Web Standards

Save time, money, blood, sweat, and tears by rebuilding your old-school site with standards-friendly CSS and XHTML.

Photoshop 7.0 Overview

Is Photoshop 7.0 magnificent? Or does it leave us itching for more?

Photoshop Crash Course

Adobe Photoshop is the Ginsu knife of graphics programs - it does everything from creating Web graphics to tweaking photos to putting the head of your favorite actor on the body of a porn star.

Adding Search to Your Site

As long as there's been a Web, there's been a need for search engines. Because of the volume of information that's available out there, people will always need help finding what they want. Nowadays, it's commonplace for individual sites, even personal homepages, to have their own search capabilities, and so a slew of new services have appeared to help you quickly and easily add search to your site.

HTML Teaching Tool

A collection of 23 HTML tutorials for students of web design.

Intro to HTML

HTML is the lingua franca of the Net. It's a simple, universal mark-up language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used.

Introducing XHTML

The benefits of transforming HTML from a stand-alone language into an XML version of itself aren't immediately apparent until you understand the inherent value of XML. Since the language syntax is so strict in XML, parsers (the software that reads and understands the code you write) are a lot easier to develop. Ultimately, it will allow browsers to become smaller, faster, and more stable. It also means your code will behave in a far more predictable way: Either something will work, or you will get an error. It will be a marked difference from the voodoo we experience across multiple browsers today.

Web Hosting for Under Ten Bucks

There's a ginormous number of hosts out there, and they each offer a variety of packages and pricing plans. A lot of people can get away with hosting a site for free, while some prefer to have their own domain name and email address associated with their site. But whatever your motivation or reason for hosting, there's a perfect package available for you. I've sniffed around and I've found some of the best bets for cheap hosting — most of my finds were under US$10 per month

What can <META> Do for You?

The <meta> tag is often found at the top of an HTML document between the </title> and the </head> tag. It has a variety of uses, but one of the most common is the client-pull function, used to either reload or redirect pages after a specified amount of time.

WML Overview

WAP is the Wireless Application Protocol, actually a suite of protocols and specifications designed to allow folks to receive Internet-type data on mobile devices. The often-heard catchphrase — used, for example, to explain WAP to your parents or your customers — is 'the Internet on your phone.' Unfortunately, that's a bit misleading because WAP services are available on an array of devices, not just phones, and because only a tiny subset of the Internet can be viewed via WAP. WAP has gotten its fair share of negative press (much of which is summarized here) and is generally considered to be not quite perfect — but, like it or not, it's been rolled out on a fairly large scale. WAP is best suited for small, concrete pieces of data; stock quotes, addresses, instant messaging, and such. It's much less well suited to things like huge threaded message boards or slideshows from our trip to wine country. To accommodate the limitations of a phone-sized platform — tiny screen, minimal input options, low bandwidth, and excruciating per-minute charges — a special markup language, part of the WAP specification, has been devised.

Dynamic DNS Basics

A machine on a DSL or cable line without a static IP is connected to the Internet, but only one way. People from the outside can't initiate communication with that machine except through an intermediary, because they simply can't find it! This makes hosting from home impossible ... except through trickery. For there is a solution, a clever one. It is called dynamic DNS.

Internet2 and You

Internet2 is a high-performance network that uses an entirely different infrastructure than the public Internet we know and love/hate today. And there are already over 200 universities and scientific institutions, and over 60 communications corporations (notice the .edu top-level domain), in the Internet 2 network.

Post-Boom Job Guide

As an individual with a vested interest in discovering what's really going on in the marketplace (i.e., I'm looking for a job too), I decided to put my considerable free time to good use and do some investigative journalism. What follows is a kind of State of the Union for Internet developers: Is it really that bad out there? What happened to all the work? What skills are companies looking for in the new New Economy? And most importantly, what can you do to get/keep a job in these troublesome times?

Design Basics

The first thing you need to do is ask yourself a few questions. What is the point of the site? What are your goals? Do you want to show the world pictures of your cat? Are you trying to sell worms through the mail? Are you promoting your new major motion picture? The answer will help you begin to focus your page. As you edit your material, you will quickly see that the picture of your cat has no business on the homepage of your new blockbuster.

Designing for Different Resolutions

So you've designed a startling site. It looks great on your computer, and you're bucking convention by putting the navigation bar on the right side. But if you don't pay attention to monitor resolution, some of your audience may never see that navbar and won't get past the first page. Since I work full time on the computer, I prefer to use a Macintosh with a large screen and good color resolution. But many people are surfing the Web with an old PC and a smaller screen. What they see is dramatically different from what I see, so I must account for those differences in everything I create.

Designing Web Sites for PDAs

Imagine that you're riding on the local urban underground railway. It's the morning commute, and the train is packed. The stranger next to you flips methodically through the Times Tribune Chronicle in a way that lands half of the paper in your lap. You want to teach this space invader a lesson. So you tear the paper from her grasp, ball it into a mass, and squeeze with the transformative might of Superman until the lump is shaped into a perfectly readable, rectangular object that can be held comfortably in one hand. This is similar to the challenge of designing content for the PalmPilot. I came upon this analogy while designing a Wired News mini-site for the PalmPilot's AvantGo browser. During the project, I learned some fundamental guidelines that should be kept in mind when designing Web content for a PDA audience, which I'll share over the next few pages. But first I want to put in a word about the importance of the Web to the PDA.

Director MX Versus Flash

Director, which hit the scene way back in 1988, was always considered the ultimate multimedia authoring tool. Then the Web came along and Shockwave, a format that translated Director projects for the Web, was born. It was pretty wowie in its day (circa 1995), but the size of Shockwave files, along with the browser plugin users needed to see them, really slowed Shockwave down. Enter Flash's SWF format, which was designed solely for the Web so it was faster and easier to use than Shockwave. And the rest is history: Flash is everywhere, and whipper-snapper Web developers are all, 'Shockwave who?' But Shockwave has its uses. Flash may be better than ever these days, but you can still outgrow it. Say you need better video performance, or you want to create a game or educational tool that uses a joy stick. Or maybe you're looking for the depth of 3D animation. When it comes to interactive projects in the non-Web world (yes, it's true, there is life outside the Web) — such as CD-ROM games, educational materials, reference books, and presentations — sometimes Flash just isn't enough. If you're tackling a big-league, off-Web project, or a particularly intricate website, then perhaps it's time to take another look at Macromedia's Director MX.

Forms as Design Elements

Before there was Java, before there was JavaScript, before there was Shockwave or FutureSplash or frames - hell, before there were tables - there were tools built into HTML that let you add interactivity, layer text, and generally differentiate your Web site from a hard-to-read magazine. Known as forms, they were developed as a uniform system for collecting user input on the Web. But feh! Who cares what they're supposed to do? When I look at pulldown menus, I see cleverly concealed sidebars; radio buttons and checkboxes become visual accents; and scrolling menus make me think, 'Hey, Bill, I got yer floating frame right here.'

From Web to Print

The Web is WYSIWYG. What you see is what you get. What you see on the monitors and via the connections - and what you use for beta testing - is what your work will look like to all those who check out your URL. What's on your screen will be pretty close to what's on their screens. Print is a different matter altogether. Once your files leave your computer, there's a whole wonderful road they have to journey along to make it into print. You do everything you can to make sure they're ready for their adventure, but just as you're likely to forget your toothbrush or your favorite socks when you take a trip, your files often go to print missing a vital item. You can only hope that the thing you forgot about is easy to correct and not a big expensive mistake that blows your deadline and your budget. Getting your files through your service bureau (where your files are turned into negatives so that your negatives ultimately become the finished product) and to the printer is like taking up the gauntlet. Best case scenario, you'll be winded; worst case, you'll be pounded to a bloody pulp. I fear I'm showing my bias toward the Web.

Good Forms

So you've decided it's time to interact with your users. You're tired of this one-way street — you talking, them listening. You want to actually hear what your readers have to say. In order to do this, you'll need to provide a way for people to enter information. Therefore, you're going to need an HTML form.

Hot Design Tips

Many designers felt it was important to understand the medium, design for bandwidth constraints, create an end product that works for both the user and the client, and, of course, play the right tunes while designing. Their responses reinforced a lot of what I've learned while working at HotWired, and I also learned some new things. I learned some designers can count, some can't (the number five was subject to much creative interpretation). Spelling, I discovered, proved to be a similar challenge, though some of the new words and terms they came up with were true genius. Finally, when confronted with a problem, ask advice of some really smart - or smart-ass, as the case may be - designers, and they'll respond with elegant and very workable solutions. With a total of over 80 tips as varied as the designers themselves, hopefully you'll find something you can use to improve your own designs.

Information Architecture Tutorial

Information architecture is the science of figuring out what you want your site to do and then constructing a blueprint before you dive in and put the thing together. It's more important than you might think, and John Shiple tells you why.

Site Optimization Tutorial

We're all tired of waiting for Web pages to download, aren't we? To make sure that visitors to your site don't get frustrated, we rounded up some in-house experts to help you make your pages faster 'n greased lightning.

Site Redesign Tutorial

As the Web moves out if its infancy, it's beginning to feel growing pains. Suddenly that first-generation site just ain't up to snuff - it's time for a redesign. This week, five experts give you the benefit of their very different experiences and perspectives on the process of a redesign: a manager who hired a design firm to tackle his company's site, a producer at a top-notch design firm, a director of production who tells you how to install or overhaul your own dynamically generated site, an in-the-trenches designer who does the hands-on work, and finally someone who has han-solo-ed the redesign all on her lonesome.

Introduction to After Effects

As a broadcast designer, I'm constantly using Adobe After Effects. Broadcast designers are the people who create TV show openings, bumpers, interstitials, station IDs, corporate IDs, etc. And since After Effects became available, no type or logo on TV is ever stationary. Even low-budget commercials and TV programs now have fancy graphics. Broadcast design used to be a very expensive form of art - companies like RG/A and Pittard Sullivan were the only ones who could afford the equipment to do this kind of stuff. Now this technology is the hands of smaller companies and individuals. After Effects has democratized the whole market.

Web Animation Tutorial

In these modern days, Web animators may not have to spend 17 hours hand painting cells to make Dopey wink, but bandwidth, platform, and browser issues make animation for the Web its own special hell. Anna and Emily have navigated many circles of this hell, and they make animation ... well, if not easy, then easier.

The Basics of QuickTime 5

This article focuses on Apple’s latest release, QuickTime 5, both from a user’s and developer’s perspective. I'll also describe the tools you'll need, the creative possibilities, and how to best deliver a project to your intended audience.

Thau's Advanced JavaScript Tutorial

This article shows you how to make cookies (Mmmmm), and you'll learn fancy string handling and associative arrays along the way. Give your JavaScript a sense of history and time (by setting timelines on your pages so that different events occur at different times), and then learn how to sense which browser your visitors are using.

Thau's Basic JavaScript Tutorial

The series starts off with a look at JavaScript fundamentals, including variables, if-then statements, link events, and image swaps. Keep following along as Thau gets down and dirty with the JavaScript Document Object Model, windows and frames, JavaScript syntax with loops, arrays, and functions, and forms. This all sound like a bunch of gobbledygook? Well, dig in and learn!

Web Typography Tutorial

Though many outside the design community see type as 'just lines on a page,' it has long been considered an art form, as well as a potent form of communication with a stylistic language all its own. From the calligraphy schools of ancient China to the explosive new forms of David Carson, it's clear that type is more than just a vehicle for conveying information to the user. If done right, type can be one of the most powerful tools for shaping the way an audience perceives written information, written information such as these very fiery-hot words you see before you. The pages that follow are your mini-guidebook to the strange and magical land of type. Your guide on this tour is Webmonkey Nadav, the designer with a human-friendly touch.

Webmonkey: The Web Developer's Resource

Webmonkey offers a How-to Library on authoring, design, multimedia, e-business and programming.