Benefits of Organizing Your Web Design Projects

Having a system to keep your web designs in order will help you and your clients.

• You can find things quickly and easily
• Builds trust with your clients; they might even look to you when they misplace items
• With regular and redundant backups, you’ll never lose any work
• Reusable frameworks allow you to get to work faster without reinventing the wheel for every project

File Structure

For my system, I’m using five folder, each preceded with a number so they are sorted correctly in the folder. Several of these folders have sub-folders. For the sake of simplicity, the folder names are bolded, and my notes are in plain text.

• Client/Project Folder – e.g. Ted’s Drywall Website
• 1 – Documents – This houses any documents related to the client
• Proposals – Copies of any proposals sent to the client, and all versions thereof.
• Contracts – Copies of all contracts sent to the client; I typically have an unsigned Word and PDF version, then a scanned PDF of the signed contract
• Invoices – Invoiced saved as Excel files and PDFs sent to the client
• Other – Anything that doesn’t fit elsewhere, such as email correspondence I want a copy of
• 2 – Inspiration – I put anything I use for inspiration here, such as color pallets, screenshots, and photos
• 3 – Materials – This is any material provided by the client or created by me for the project
• Content – Textual content for the site, and any supplemental materials like magazine articles
• Imagery – Photos, logos, icons, etc
• Other – Anything else, like Flash animations, audio and video files, lists of links, etc
• 4 – Design – Anything creative built during the design phase
• Wireframes – Wireframes of different modules of the project (e.g. home page, contact form)
• Mockups – Mockup of different modules of the project (e.g. home page, contact form)
• Other – Photoshop files for project imagery
• 5 – Development – This is where the actual website is stored; while this will vary project to project, it will mirror what’s on the webserver and generally follows the same basic structure
• Images – All images for the site
• Scripts – All external Javascript files
• Stylesheets – All CSS files
• Common – Common site elements like headers, sidebars, etc. that are included at the server level

So that’s my system right now. I’ll probably adapt it over time as my needs change, but for now it’s working quite well. I’ve already used it to dig out old files a few times, and I’m sure the utility will only grow as time passes.

If you need a program for vector drawing (as opposed to raster/bitmap graphics, like Photoshop), you’ve got a lot of options, Illustrator being the standard. If you use it frequently, it’s probably worth shelling out the cash, but if you just need it occasionally, why not use a free alternative?

Inkscape Versus Illustrator

While this program boasts all the features and functionality you would expect to find in a vector drawing tool, you have to wonder how comprable it is to commercial software. So how does Inkscape weigh in against Illustrator, the heavy-hitter in the industry? Here’s the story, straight from the Inkscape Wiki:

Things Illustrator can do that Inkscape cannot do:

• Gradient meshes
• Multiple strokes and fills for one object
• Color management for print (ICC Profiles, etc.)
• PMS color
• Natively work with graphs based on data
• Free transform and perspective transform (only via extension)
• Blends (only via extension)

Things Inkscape can do that Illustrator cannot:

• Edit SVG source directly
• Clones, tiled clones, edit clones on canvas
• Keys to move/rotate/scale by screen pixels
• Shapes as objects
• Edit gradients with handles on-canvas (CS4 added this feature)
• Edit nodes with keyboard
• One-click paint bucket fill
• Color painting over objects (CS4 added this feature with the name Blob brush)

System Requirements

Inkscape will run well on Windows (XP, Vista, or 7) and Mac (OS X 10.4 Tiger, 10.5 Leopard or 10.6 Snow Leopard). You can also run it on Windows 2000 by downloading an older versions of the program, 0.47.

Vector Graphics on the Go

Like some other programs we’ve featured, there is a version of Inkscape for PortableApps, so you can install it on your thumb drive and take it wherever you want to go. If you haven’t already setup PortableApps on your thumb drive, what are you waiting for?

You’ve got of options for getting media from your computer to your television set without going to the trouble of burning stuff to a DVD, but sometimes a DVD is the only thing that will work. Unfortunately, your (totally legal, and absolutely not stolen, right?) videos might be in a vvariety of different file formats, sizes, and aspect ratios, which means a lot of conversion and fiddling around. Wouldn’t it be great if you could just drag everything into one program and it did the rest? Well…

DVD Flick Features:

If you have some videos in various files and want to get them burned to a playable disc, you’ve got a project on your hands. Or you would, were it not for this useful little tool. Not only will it automatically re-encode your videos to the appropriate format, but it will also burn the disc for you. One stop shopping.

• Supports a massive number of video and audio codecs
• Drag and drop simplicity
• Automatically converts the video to the appropriate format for a playable DVD
• Add simple menus
• Add subtitles
• Add chapters
• Multiple audio tracks
• Change video aspect ratio
• Burns the disc with the same program
• Creates ISO files

DVD Flick Requirements:

• Windows 2000, XP, Vista, or 7
• At lease 256 MB of RAM, although 512 is required for Vista and recommended elsewhere
• Pentium MMX of higher (or comparable AMD processor), although a Pentium IV is recommended

DVD Flick is a Windows-only application, but here’s a list of some alternatives for Mac users.

When it comes to screen recording / screencasting software, Camtasia Studio is the big dog on the market, but it also comes with a big price tag: about $300.00. It’s a nice program when you need a feature-packed program and can afford it, but if you just need to create a quick tutorial video to share with a client, why shell out the cash? That’s what makes CamStudio such a nice alternative. It might not have all the features of its big brother, but it have the core functionality you need.

Where to Use It

So why do you need a screencasting program? Well…

• Creating video tutorials
• Reviewing software
• Feature demonstrations
• Record and share seminars and presentations
• Bug tracking and recording

CamStudio Features

• Export to AVI
• Includes an AVI to Flash converter for easy sharing
• You can record the full screen, certain regions, or a custom defined area
• Record audio from a microphone or speakers
• Autopan feature will follow the cursor around during the screencast, making sure it only records what’s relevant
• Annotate your screencast
• Various cursor options so your view can easily follow your mouse
• Fairly robust export settings allow you to control framerate, compression, etc.

What About Mac Users?

Unfortunately, CamStudio is only available on the PC at this time. I did some searching for alternatives for Mac users, but wasn’t able to find anything that offered the same features at no cost.

Take CamStudio With You

Just like Audacity, CamStudio is available on PortableApps, which mean you can install it on your thumb drive and take it with you anywhere! You can get more information here.

There are loads of online project management program out there, Basecamp being the biggest. These are really fantastic programs, with loads of really useful features. But for smaller operations, the pricetag ($50 – $150 per month for Basecamp) is just too high to make it realistic for many freelancers and small businesses. Luckily, Freedcamp boasts many of the same features, and a tough to beat month cost of zero dollars.

Freecamp Features

Freecamp is a full feature project management solution, and includes everything you’d expect out of the box. It also gets regular updates, which do everything from fix bugs to add new features and streamline the user interface.

• Track multiple projects
• Track time and create invoices
• Collaborate with different users, and easily manage what they’re able to see and edit
• 256-Bit Encryption to keep your information secure
• Create to-dos and milestones, assign those to individuals or groups of individuals, and even set priorities to ensure the important items get handled first
• Communicate via a discussion board and comments of various assigned tasks
• Customizable, widgetized dashboard
• Get notifications via email or text message whenever anything is added or changed on your project; you can even reply right from the email
• Share files
• Save time by creating and reusing project templates

The Freedcamp Marketplace

At this point you’re almost certainly wondering, what’s the catch? How do the people behind Freedcamp make any money off it? By selling add-ons and additional functionality in their Marketplace.

Currently the Marketplace is pretty small, with only a handful of applications available. However, it is growing slowly but surely, and what they have right now all seems very useful. Best of all, not all of the items in the marketplace have a cost; there are several free applications there – like a calendar and a password manager – that look quite useful.

Probably the biggest item in the Marketplace is storage. With a free account, you get a scant 20MB of storage. If you are using the tool to share files, you’re going to eat this up in a hurry. There are several upgrade options available, from $2.49 a month for 1 GB of storage to $39.99 a month for an unlimited account.

When it comes to editing audio, there are a lot of options out there. But when it comes to getting the most bang for your buck (or lack of a buck, in this case), it’s tough to beat Audacity.

Audacity Features

With Audacity you can do almost anything you can think of with your audio files:

• Record audio from the mic or a line-in jack, which will let you digitize your analog music collection
• Up to 16 editing tracks, plus you can dub over existing recordings to create multi-track recordings
• Import a variety of audio files, including WAV, AIFF, AU, MPEG, etc.
• Export a variety of audio files, including WAV, AIFF, AU, MPEG, etc, and with a variety of quality options
• Export to MP3 with a free plugin (there are other plugins available to export to a number of proprietary formats)
• Robust editing options
• Several built in effects, including audio clean-up options, volume adjustment and normalization, pitch/tempo alteration, etc.
• Add additional effects with plugins

Read the full feature list here.

Audacity Requirements

It doesn’t take a whole lot to run this program. If you’re a Windows user, you’ll need to be running at least Windows 98 (and seriously, is anyone still running Windows 98?). If you’re on a Mac, you’ll need Mac OS X 10.4 to 10.7. It will also run on Linux.

Easy, right?

Getting Started

Audacity is a powerful application, and can be a little intimidating to new users. Thankfully, it’s also very well documented. You can look at the full documentation here. There is also a handy and fully searchable Wiki available.

I would highly recommend the Wiki, because it’s easy to browse, you can search for specific items, and there are also lists of tutorials and tips for getting started.

Expanding Audacity

Under the features section I mentioned that you can add to the program’s already impressive feature list with plugins. They even have a list of plugins available on their official site.

Audacity on the Go

Because it’s a desktop application, Audacity doesn’t seem very portable. At least until you realize there’s a version available for Portable Apps. What’s Portable Apps? It’s an extremely handy application that you can install onto your thumb drive to launch programs from any computer without having to install them locally. It has a wide variety of programs available: browsers, security tools, utilities, games, productive tools, and everything else.

If you’re not already using Portable Apps, check it out here.

It’s a free – that’s right, free – course on Javascript (and possibly some others) that delivered in weekly lessons, projects, and challenges. So far over 388,000 people have signed up, and I expect that number is going to continue to grow throughout 2012. There’s just one thing; since the lessons are delivered quickly, the sooner you join the easier it will be to catch up.

There are loads of tutorials and lesson out there, so what makes Codecademy special? I’m glad you asked.

Code Directly in the Lessons

Unlike most other tutorials, you aren’t just given instructions and then sent off on your own. Codecademy is completely interactive. Each lesson is divided into a number of manageable pieces, and you don’t move onto the next one until you complete the coding for the first.

There’s an integrated coding window on every lesson. Not only does it process the code, but it highlights syntax and helps you spot potential issues, minimizing a lot of the frustration of debugging.

In order to move onto the next part of the lesson, your code needs to check out in the built-in validator. Sure, sometimes it’s a little strict when it comes to having to use the exact content provided, but on the whole it works really well.

A Sense of Accomplishment

One of the more brilliant parts of Codecademy is the way they use elements from gaming to help give you a sense of accomplishment as you proceed. As you finish lessons your score goes up.

And when you hit certain milestones you’ll earn “Achievements”, which come in the form of cool little badges that sit under your profile. It might seem like a little thing, but upping that score and earning more badges gets addictive, and quick.

I’ve earned fifteen achievements so far, and I can’t wait to get caught up in my lessons (I started three weeks late) so that I can fill out my profile with more points and badges. And as an added layer of fun, you can compete with your buddies. I got the chance to brag up my meager accomplishments with one of my friends who just started yesterday.

Who knew learning could be so fun?

Do you need a way to share your screen with a client, or have them share theirs with you? There are a lot of programs out there to do this, like WebEx, Livemeeting, GoToMeeting, and a few dozen others. The problem with them all is that they cost you money. That’s fine when you need some of their other, often impressive, features. But when you just need to share screens to demonstrate something or collaborate on work, the price might be too much.

That’s where Join.Me comes in. It’s quick, insanely easy to use, and completely free for basic users. Let’s dive in and take a look at a few features, shall we?

Join.Me Free Features

For the free version, Join.Me has a pretty impressive feature list:

• Works for PC and Mac
• Viewers can also use their iPhone, iPad, or Andriod device
• Up to 250 concurrent users
• Share control on your screen – great for troubleshooting and collaboration
• Supports multiple monitors – and you can control which monitor is shared
• Users can chat and send files
• 256 bit SSL security encryption

This is lacking two big features that most paid programs have: the ability to schedule meetings, and the ability to change presenters. That makes the free version of Join.Me ideal for ad hoc meetings and presentations by single users, which is probably fine in most cases.

Join.Me Requirements

There’s always a catch, isn’t there? Well don’t worry, the requirements are extremely minimal.

As a viewer, you’ll need:

• Flash Player 10 (free from Adobe)
• Mobile viewers will need to install the free Join.Me app instead
• Internet Explorer 7 or higher, or the current version of Firefox, Chrome, or Safari
• A broadband internet connection

As a host you’ll need:

• Windows XP, Vista, or 7 / Mac Snow Leopard or Lion
• Mobile users cannot currently host Join.Me
• Flash Player 10 (free from Adobe)
• Internet Explorer 7 or higher, or the current version of Firefox, Chrome, or Safari
• A broadband internet connection

Beyond the Free Version

For $19 a month or $149 a year, you can upgrade to the Pro version of Join.Me. This is significantly cheaper than most of the mainstream products, especially when you sign up for the annual plan.

It boasts some nice looking additional features like:

• The ability to give someone else presenter rights to the meeting (PC and Mac users only, no mobile)
• A desktop application
• Meeting scheduling
• International conference call lines
• Personalize your link and background
• User management and control over who can join your meeting

Is upgrading worth it? I suppose that depends on your needs. If you have a lot of meetings and need to be able to schedule them and pass off presenter rights, then maybe it is. If you’re like me, and just need a tool for quick ad hoc sessions, then the free version will work just fine.

WordPress is the most popular Content Management System (CMS) in the world, with over 60 million downloads to date. There are many, many reasons for this, but the two biggest are probably that it’s both free and well supported.

This tutorial series will guide beginners through the essentials of WordPress, from downloading and installing the software, to writing and managing posts, to controlling the look and feel of their website.

This tutorial will cover logging into WordPress for the first time, writing, and publishing your first post.

Logging into WordPress and Changing the Permalinks

Now that you’ve got it installed, it’s time to log into WordPress for the first time. You can access the login screen a few different way.

With a fresh install, you should have the “Meta” widget on your sidebar (we’ll get to widgets in a future tutorial). Among other things, this will have a login link in it. If you don’t have the Meta widget, you can always access the login page by going to address-for-your-site.com/wp-admin. Either way, you’ll see a login screen.

Enter your username and password to log into WordPress

Enter your username and password and hit “Log In”. The first time you login, you’ll see a welcome screen with some useful information to help you get acclimated to the admin interface. A similar screen will display after updating the software to highlight new features.

Welcome to WordPress!

There’s a lot in the admin to dive into, but we’re going to worry about that in the next installment. For now, we want to create our first post.

But before we do that, we’ll want to pick a Permalink structure. Sound complicated? Don’t worry, it isn’t. A permalink is simply the permanent URL to your post, page, etc. By default, WordPress permalinks are pretty ugly (it just assigns the post a number), so changing them is one of the first things you should do. On the left-hand menu, hover over “Settings” and then click “Permalinks” from the flyout menu.

Go to Settings > Permalinks to pick a permalink structure

You have a few different options when it comes to Permalinks, and you can always create you own. Read through your options and pick one that works for you, then click “Save Changes”.

Setting your permalink structure is one of the first things you should do with your new site

Add a New Post

Now that we’ve got our permalinks set to something respectable, it’s time to create our first post. Simply hover over the “Posts” icon in the left-hand sidebar, then select “Add New” from the flyout menu. Alternatively, if you have the admin bar turned on (and it is by default) you could hover over the “+ New” button on the top admin page, then select “Post” from the flyout.

You probably noticed that you can add other things to your site as well, such as Pages and Links. We’ll tackle these in more depth in a later tutorial, but they all follow the same general process, which is one of the things that makes WordPress so approachable for new users.

Navigating the “Add New Post” Screen

Now that you’ve opened a new post, let’s take a look at some of the moving pieces.

At the top of your post is the title. For titles try to be descriptive and interesting; this is generally the first thing your readers will see, so you want to give the a reason to keep reading. It’s also a good idea to keep you titles to less than 70 characters, because this is all most search engines will display. If your title is longer than that, it will get cut off.

Once you enter a title and either save the post, or allow the auto-save feature to save it, a new area will show up displaying the full URL (permalink) to the post.

Below the title is the main content area. This is where you’ll do all your writing. There is a media upload tool, as well as toolbox, which is expandable by clicking the last button in the row. You can also switch between normal editing mode and HTML mode by clicking the tabs on the left. We’ll explore these options in the next section.

To the right you have a Publish box. This will allow you to save, preview, and publish your post. We’ll take a look at that in more detail shortly.

Next we have Format, which is a relatively new feature, introduced in WordPress 3.1. The formats can style various posts in different ways; you can read more about them in the Codex. One thing to note, not all themes will support all post formats, and some themes might not support them at all.

Below that you’ll find Categories and Tags. We’ll explore these in depth shortly.

Finally, we have the Featured Image, also known as the Post Thumbnail. This will set a – you guessed it – featured image for the post. Different themes will use this in different ways, but it commonly shows along with the excerpt of your post.

Writing the Post

Okay, let’s dive in and write this post!

The first thing we need to do is give the post a title. Like I said, try to be both description and interesting, but keep it under 70 characters. Once you add your title, the post permalink will be setup for you. This will vary depending on what permalink structure you chose, but the “slug” (the last part of the URL that pertains directly to this post) can be edited by clicking the “Edit” button. You can edit the permalink to your heart’s content before publishing your post, but be wary of doing to once the post goes live. Changing the permalink will break any links or bookmarks that point to the old permalink.

Add your post title, then watch the permalink show up

Next up is the content of the post itself. This is one area where WordPress really shines. Right out of the box, you get a powerful, yet easy to you content editor (also called a WYSIWYG – What You See Is What You Get). Most of the buttons here should be pretty obvious to anyone who has every written and email or used Microsoft Word. By default, you only see the first row of buttons. You can click the last button on the right to toggle the extra stuff (affectionately referred to as the “Kitchen Sink”).

Let’s take a look at the buttons:

The WordPress toolbar

1. Bold
2. Italic
3. Strikethrough
4. Unordered List – Start an unorderes/bulleted list
5. Ordered List – Start an ordered/numbered list
6. Blockquote – The styling for this item will vary by the theme you have installed, but generally it will indent the selected text and provide some padding around it. Some themes may also add stylized quotation marks or other visual cues.
7. Align Left – Left justify content – this also works for images
8. Align Center – Center align content – this also works for images
9. Align Right – Right justify content – this also works for images
10. Insert/Edit Link/Unlink – Link text or an image with the first button, remove a link from text or an image with the second
11. Insert “More” Tag – This will make a break in your content so that people will need to click through to read the entire post
12. Toggle Spellchecker – There are multiple language options available in the dropdown
13. Toggle Fullscreen Mode – This will give you the full screen to write on, which is usually pretty handy
14. Show/Hide Kitchen Sink – this toggles the second row of buttons
15. The “Format” dropdown controls how content is displayed. It defaults to “Paragraph”, but you can use this to add Headlines and other items.
16. Underline text – use this sparingly or not at all. When people see underlined text, they expect a clickable link
17. Align Full – This will fully justify text
18. Select Text Color – Changes the color of the highlighted text
19. Paste as Plain Text – This will strip out all the formatting from content you’re pasting into your post
20. Paste from Word – This will strip out all the extraneous formatting Microsoft Word applies to content
21. Remove Formatting – Erases formatting from selected content
22. Insert Custom Character – Use this to insert things like ® and Ω
23. Outdent/Indent – Changed the indentation for selected content
24. Undo/Redo – Undoes or redoes the previous action
25. Help – Opens the help interface

Okay, that’s enough delaying, start typing up your blog! WordPress will automatically save as you go, but you can also click “Save Draft” from the Publish window on the right if you need to take a break. If you want to check out your work in progress, first save your draft, then click “Preview”.

Adding Images/Media

Now that you’ve got some text in there, let’s spruce things up with some imagery. Click the “Upload/Insert” link right above the toolbars.

Click "Upload/Insert" to launch the Add Media interface

WordPress recently redid it’s Add Media interface, combining what used to be four different tools into one, easy to use utility. You have a few different options here. You can drag images directly into the box, you can browse to them on your computer, use a link from somewhere on the internet, or use something you’ve previously uploaded into the library.

You can add images and other media in a variety of ways

Since this is our first post, let’s just find an image on our computer. Click “Select Files”, then browse to an image you have saved on your computer.

Once your image is uploaded, you’ll see a screen with a few options on it. This will allow you to give your image:

• An Alt Tag: Alternative text for the image, in case it doesn’t load or for users with visual disabilities
• A Title Tag: This is what shows in the mouse-over text, most people make this the same as the alt tag
• A Caption: This displays directly under the image
• A Description: This is used in the Media Library
• Link URL: This will make the image a clickable link that goes to whatever URL you put here. By default, it’s the URL to the full-sized image
• Alignment: How the image is aligned in you post
• Size: How large the image is

Once the image is uploaded you can add things like a caption or Alt tags

You can insert the image into the post, save it to the library, or use it as the featured image (thumbnail) for the post. In this case, let’s insert it into our post. Once the image is inserted into the post, you can click to select it and change it’s alignment. Aligning it right or left will make the text float around it, like so:

You can float your content around the image

Categories and Tags

These are two of WordPress’ default taxonomies. A taxonomy is just a fancy word for a way to organize content. Generally speaking, a post will be organized into one Category, but use Several tags. Categories should be more general, while tags should be more specific.

For instance, if you were writing a review of a movie you just saw, you might put it in the “Reviews” category. But you would go into more detail on tags. You might have tags for genre (Adventure, Sci Fi, Horror, etc.), the director or stars (Martin Scorsese, George Clooney, etc.) your rating (Five Stars, Grade A, etc.) or any number of other ways that allow your readers to find your content. You can also create custom taxonomies.

You’ll want to think about what categories you’re going to use in your blog. You don’t want ten thousand categories with one or two posts in each one, but you also want to give your readers the ability to browse them without being overwhelmed.

For this post, I’m going to add a new Category called “Networking”. Simply click “+ Add New Category” at the bottom of the panel, type the name of your Category, and click “Add New Category” (you can ignore Parent Category for now). “Networking” has been added, however the blog is also being put into the default, “Uncategorized” category. To fix this, simply remove the check from “Uncategorized”.

Adding a new category is very simple

Tags are even simpler to add. Just type them into the text box in the Tags panel, seperating each item with a comma, and click “Add”. For instance, since this post is talking about starting a unicycle gang, I might use “Unicycle, Gang, Friends” as tags. Tags allow your readers to find similar articles, so make sure you use tags that are helpful and will be used again in the future.

Seperate each tag with a comma

Your categories and tags will display in the post’s meta information, which can vary from one theme to another:

Our category and tags on the WordPress 2011 theme

Publishing

Now that our first post is finished, it’s time to publish it. This really simple to do, just press the big blue “Publish” button on the right and you’re all set.

Of course, sometimes it’s not that simple. What if you want to write a post today, but have it published the day after tomorrow? Or what if you want to have today’s post appear behind some more recent posts in the timeline? Well that’s pretty easy too.

Right about the “Publish” button is a small calendar icon with the words “Publish immediate Edit”. If you click edit you can tell WordPress when you want this post to be published by setting a date and time.

You can tell WordPress exactly when a post should be published

Once you set the date and time and hit “Ok”, the “Publish” button will change to “Schedule”.

Reviewing and Editing

Now that we’ve published our post, let’s say we find something we need to change. A typo, or a reference we neglected to add, perhaps. WordPress makes this really simple for us.

If you have the admin turned on by default, you can simply browse to the post, and click “Edit Post”.

Alternatively, if you’re logging into the admin you can click the Posts > All Posts button on the left tool back, and then select the post you want to edit from the list.

You can edit the post in a couple of different ways

Once you’ve selected a post to edit, it works just like writing it the first time around. Make your changes, and then click “Update”, which has replaced the “Publish” button on the right. Easy!

Conclusion

We’re done! You’ve just written your first post in WordPress! Using this tutorial you should be able to write posts, publish, and edit already published posts. You’re on your way to being a WordPress rockstar. Or at least a WordPress roadie.

In this tutorial we covered the following:

• Logging into the admin
• Adding a post
• Navigating the “Add New Post” screen
• Writing the post
• Adding Media
• Categories and Tags
• Publishing
• Reviewing your post and editing it after publishing

Be sure to check back for the next portion of this series, where we will discuss navigating the admin interface.

SOPA and PIPA actually started with good intentions. They sought to protect copyright holders on the internet by allowing the Department of Justice to take legal action against “foreign” websites that offer pirated content.

The trouble is how they go about it.

What SOPA/PIPA Would Do

SOPA would allow the US Department of Justice to take action against non-US based websites through court orders. Once these orders were issued, the Attorney General could require internet service providers, advertising networks, search engines, and online payment programs like PayPal, to cease doing business with the offending website. In the case of search engines, that search engine would be required to blacklist the site.

Let’s say that a website in Pakistan is offering bootleg copies of popular movies. Under SOPA, the Department of Justice could:

1. Force internet service providers like Comcast to not display the website by undermining the DNS
2. Force advertising networks like Google AdSense to neither accept ads for the site nor display ads on the site
3. Force search engines like Google and Bing to not display the website in search results
4. Force online payment processing programs like PayPal to refuse to process any payment for the site

These actions would effectively shut down the site and stop it from generating profits.

SOPA would also make it a crime to stream unauthorized copyrighted content, punishable by up to five years in prison.

Now you might be thinking that doesn’t sound so bad. After all, these sites are illegally sharing copyrighted content, so they should be punished. But there are some problems.

Criticism of SOPA/PIPA

SOPA/PIPA might sounds like a good idea at first, but there are a number of problems with the legislation.

Unfairly Targeting Innocent Websites

If a site has a forum or comment threads, a user could easily add a link to another site sharing illegal content. With a high volume of comments or forum posts, it might be very hard to spot that link until its too late. And as the web becomes more interactive and user-centric, this will be an increasing issue. It will also force website owners to spend more time on administration, which will increase overhead.

SOPA and PIPA Won’t be Effective Against Pirates

SOPA/PIPA will block websites using DNS (coincidentally, that’s the same thing countries like China and Iran do to censor the internet). Pirates can get around this by simply using the IP address instead. This just isn’t an option for legitimate websites. Furthermore, tampering with the DNS system could introduce new security loopholes.

Punishments Too Harsh

In addition to getting websites shut down, website owners could face harsh criminal charges, including up to five years in prison. When you consider that the party being punished might not be responsible for (or even aware of) the piracy, this seems particularly draconian.

SOPA and PIPA discourage innovation

If website owners worry that their site could be shut down if they cross some poorly defined intellectual property line, they’re going to be less likely to create and post new content. New start-ups will also face many more challenges, which could derail their business ideas before it even starts.

Furthermore, sites like Facebook and Twitter will have to impose much stricter policies about what users can share, and may even have to begin censoring posts.

Conflicts of Interest

Does anyone remember when NBC Universal merged with Comcast, one of the biggest internet service providers? A lot of people were really upset about it for a variety of reasons, but SOPA/PIPA could make it that much worse. SOPA/PIPA will allow ISPs to block website if they have “a reasonable belief” that the website hosts illegal content, which opens the doors to abuse.

How You Can Help

Angry yet? I sure hope so. SOPA/PIPA aren’t done deals yet, and you can help knock them out.

Go to Stop American Censorship for a full range of options, such as mailing your congress person or joining in the internet blackout. They also have some very in depth information on SOPA/PIPA, including this fantastic infographic, if you’re interested in doing more.