Sunday, November 23, 2008

Version Control Software

When projects require several developers (i.e. designers, developers, html coders, etc), they may run into situations where multiple people try to edit the same file at the same time. This could be problematic, since one developer could easily overwrite another's work.

To prevent one person from overwriting another's work, most teams of coders use version control software. Version control software allows multiple people to simultaneously work on the same files while not overwiting each other's work.

Subversion is probably the most popular version control software:
http://subversion.tigris.org/

CVS is an older version control software. Subversion considered to be the better successor to CVS.
http://ximbiot.com/cvs/wiki/

For our intents and purposes, they are equivalent. There are a few simple concepts for using Subversion or CVS:

The Repository
CVS and Subversion use a type of client/server architecture. The permanent location of all files is on the server, in what is called a Repository. The Repository has the current version of all files, as well as all the older versions of the files. It keeps a permanent record of any changes to the project. Clients can always get the latest copy of the files by copying them from the Repository. So developers generally make changes to files on their local machines, and then upload them to the Repository so that other developers can get the lastest version of the files.

The Client
Your local computer runs a Subversion client that automates the common tasks that you will need to do when using version control. The recommended client for Windows is TortoiseSVN. For Mac, you should check out the client recommendations on the subversion site.

Working Copies
When a developer downloads the latest copy of the files from the Repository, they are placed in what is called a Working Copy. This is exactly what it sounds like - a copy of the original files that a developer can use to work. Once a developer has finished working on them, she has to then upload them back to the Repository so other developers can see the changes.

Updating
To get the latest copy of files from the Repository, a developer runs a command called Update. This automatically downloads the latest files from the Repository.

Committing
When a developer has finished making changes to her Working Copy of the files, she first runs the Update command to make sure that nobody else has modified the same files she is about to upload, and then runs a Commit command that automatically uploads the changed files to the Repository.

Conflicts
When two developers have modified the same files at the same time, and then they both Commit their changes, the second developer to commit his changes will experience a Conflict. Usually the work the developers have done is in different parts of the file, so Subversion or CVS can automatically merge the two versions together. However, in some cases Subversion and CVS cannot figure out how to merge the two versions of the file, so it asks one of the developers to manually merge the two. Subversion will show you the difference between the two files, and you can usually easily see what has to be done to get the two versions to merge correctly.

Reminder: Your Vote Counts

Please remember to vote for what material you want to cover in the next class. If you are viewing this in an RSS reader, you will have to visit my blog home page here in order to vote - the polling widget is on the right side of the page. If you prefer to learn something not included in this poll, add your ideas in the comments section for this post.

Speaking of votes, for something completely unrelated to web development, the PBS website has a vote going on for which short film to show on TV this Saturday. One of the contestants happens to be a film by my brother, so if you're interested, he could use your vote. Voting closes this Tuesday. Click here to watch and vote.

Please note that PBS is using the same Flash media player that I used in my Flash media examples - if you right-click on the videos you will see which media player they are using.

Overview of PHP/MySQL examples

Class 6 - Basic PHP
Class 7 - Intermediate PHP
Class 8 - Basic MySQL
Class 9 - RSS & XML
Class 10 - Object Orientation, Embedding Flash, Creating Social Networks

Saturday, November 22, 2008

Playing Media Files with Flash

To play audio or video files consistently across all the browsers, you will want to use a Flash media player. Flash is the most widely supported application on the web for audio and video files.

There are a variety of Flash media players available online, some free, some not. Here is an example using the freely available JW FLV Media Player, which is the same player used by SimplePie to play podcasts.

The nice thing about the JW FLV Media Player, and other players of its ilk, is that you can relatively easily skin it to make it fit the design of your site.

There are two ways people generally embed Flash players into their XHTML: via the <embed> tag, or using Javascript. This page gives a good overview of the two methods, and the reasons for using the Javascript version.

This example is the same as the first example, but uses the Javascript SWFObject.js library to put the Flash player on the page instead of using the <embed> tag.

Favicons

Favicons are the little icons that show up in the address bar of the web browser for some websites. For example, the favicon for blogger.com is the little orange square with the B in it.



Of course, you will want to create a favicon for your own sites. Favicons are in a special .ico image format that is not natively supported by Photoshop. This article has a good explanation of how to download a Photoshop plugin that lets you save favicons in .ico format using Photoshop.

If you don't have Photoshop, you can still create favicons by using a variety of website services that convert standard .jpg, .gif, or .png image files into .ico format. For example, here is one such site.

To use your favicon once you have created it, make sure the file is named favicon.ico, and put it in the root folder of your website. Then add the following code into the <head> of your XHTML code:

<link rel="shortcut icon" href="./favicon.ico" />

Monday, November 17, 2008

Photoshop Alternatives

Many of you don't want to buy Photoshop. While Photoshop is the absolute standard in image editing on the web, there are some free alternatives:

paint.net

GIMP

Saturday, November 15, 2008

Class 9 - In-Class Assignment

Your assignment from class 7 was to make an image uploading service. Hopefully you have completed that assignment.

Your in-class-assignment for this class is to publish an RSS feed for that site. Now that you are familiar with the concept of an MVC architecture, you will realize that if your site is set up in an MVC style, you will easily be able to apply different Views to the same data.

So your image uploading service will have two views: one in XHTML for web browsers, and another in RSS for RSS feed readers. I have retrofitted the blog example from class 8 so that it now has both an XHTML and an RSS view. Obviously this should be your reference for this assignment.

Additionally, your XHTML view will have a link tag that tells an RSS reader, like Google Reader, Esprsso, or NetVibes, where to find the rss version of your site.

The link tag syntax for RSS feeds is:
<link rel="alternate" type="application/rss+xml" title="NY Times RSS Feed" href="http://nytimes.com/HomePage.xml" />

Any site that has an RSS feed specified in the link tag will show the orange rss icon in the right side of the location bar of your Firefox browser. Clicking that icon will bring you to the RSS feed in Firefox.