Developing web applications using a static data store where data must be updated, stored and manipulated frequently can be a cumbersome task. However this article will introduce you to the world of relational databases allowing you to maximise your data’s potential.

Introduction

With the constant expansion of web applications and user driven web sites it becomes a necessity to have a way to store data in an organised fashion which can be retrieved and manipulated on the fly; something which is impossible with static content. In order to achieve this, a database must be used! A database in its simplest form is the collecting of data in an organised fashion whether it is using a filing cabinet or a computerised database. Integrating a database into your web site or web application allows you to store and retrieve data using specific commands. For this article we will be using a relational database management system package called MySQL. This is open-source software available under the GNU general public licence which of course makes it free of charge! The MySQL web site can be found at http://www.mysql.com/ any word that you see underlined in this article indicates a MySQL function you can find full documentation on these functions on the MySQL web site.
TIP: To search the MySQL web site for a function, simply append the function name to the MySQL URL. E.G. http://www.mysql.com/SELECT this example would search for select. I have produced a modified version of Jesse Ruderman‘s Google search bookmarklet in order to search the MySQL 5.1 documentation. To use this simply highlight the underlined word then press the bookmarklet to be taken to the search results. Alternatively launch the bookmarklet with nothing highlighted to be given a prompt box asking you to enter what you wish to search. Bookmarklet: MySQL SEARCH

Understanding a database

In order to store data in a database firstly a database must be created. This database can then store many tables (imagine a filing cabinet storing many files); each table must have defined columns, and of these columns are created to store specific data (imagine a data entry form). It is possible to limit what can be inputted into these such as numeric data or character limits for example. Once data has been entered into the database it will be stored in an appropriate table, the table will then consist of rows and columns much like a spreadsheet as data is saved and displayed in a tabular form. MySQL can manage multiple databases which can contain multiple tables. Access levels can be granted to different users to provide or revoke specific privileges. MySQL uses commands/functions based on SQL (structured query language). This allows us to use keywords to specify what data we wish to return. MySQL then implements some additional features to enhance the functionality available. Keywords are generally easy to understand and often relate to an English word or phrase (E.G. SELECT, UPDATE, WHERE).

Getting Started

In this installment we will cover:

• Installing MySQL on your local machine(windows)
• Configuring your local MySQL installation(windows)
• Connecting to your local database
• Connecting to a remote database
• Entering and formatting queries
• Formatting and logging results
• Backing up a database
• Restoring a database

In order to use MySQL it is necessary for us to have it installed whether it be on our local system or on a remote web host. However in order to connect to either we must firstly have an interface to use.
Today we will be using the essentials package which is available on the MySQL web site at http://dev.mysql.com/downloads/. At the time of writing the current stable version is 5.1 and I will be discussing how to install it on the windows operating system. Firstly locate the software which you require, I will be using the 64 bit windows version but you may choose otherwise depending on your system architecture. For this article I have chosen to use the essentials package as it includes all the features needed. You can compare the differences between the windows versions at http://dev.mysql.com/doc/refman/5.1/en/windows-choosing-package.html.

Installing MySQL on your local machine

Once you have downloaded the appropriate installation executable, launch it and you will be prompted with the above window. As you can see I am installing version 5.1.30. Press Next to progress onto the next screen.

I have chosen to keep with the typical installation, however feel free to choose what components you want to install. You will need the MySQL server and data files if you are working on your local machine; however if you have a remote database available to you that you wish to use you can choose not to install these features. You will need the MySQL command line shell as this is the application that we will be using. Again if you are not using a local database you can skip the Command line utilities and server instance configuration. This article will not cover using C with MySQL however if you are developing using C you may choose to install this. Press Next to progress onto the next screen.

You will be then asked to confirm your choices, press Install if you are happy otherwise press Back to make any changes.

Your installation will start, at this point you may get an interruption from an anti virus or Windows Vista User Account Control, it will state that a program is asking to be installed or access specific files. This will be signed by MySQL AB; this is the company which operates and maintains MySQL which you can read about at http://www.mysql.com/about/.

Once installed, make sure you have the Configure the MySQL Server now (if installed) ticked and press finish. Congratulations, you have successfully installed MySQL Server/components. Next the MySQL server Instance Configuration Wizard should load. However if it doesn’t launch don’t worry, you can access it in the MySQL programs folder (if installed).

Configuring your local MySQL installation

We are now going to configure your installation (if you installed the server), press Next to progress onto the next screen.

You now have the option of using a standard configuration; however I will be using a detailed configuration which will allow me to customise different aspects of my installation.

I have chosen this as a developer machine; however you may choose which option you prefer. The developer machine will allow full usage however it will prevent too many resources being used. Press Next to progress onto the next screen.

As this installation is intended for development purposes and not for a specific project, I chose a multifunctional database which allows use the InnoDB and MyISAM storage engine. You can read more about storage engines at http://dev.mysql.com/doc/refman/5.1/en/storage-engines.html. Press Next to progress onto the next screen.

You must now select where you want to store the InnoDB datafile, depending on storage space you have available you may wish to change this if you have a larger capacity or faster drive available. Press Next to progress onto the next screen.

You must now set up the amount of concurrent connections that you are going to have connecting to your database at any one time. Choosing DSS allows up to 100 connections but assumes an average of 20 concurrent connections. OLTP allows up to 500 concurrent connections. However for our developer machine we are often only going to be making a single connection; therefore I set the manual setting to 5. Press Next to progress onto the next screen.

You now are given the choice to customise TCP/IP settings. I have un-ticked the checkbox in order to disable this. By disabling this it prevents remote connections to the database. You can then set the server mode, I left this box ticked (you can read more about server modes in detail at http://dev.mysql.com/doc/refman/5.1/en/server-sql-mode.html). Press Next to progress onto the next screen.

We now need to select what character set/encoding we are going to be using. I chose UTF8 as it allows different languages to be inputted (international readers). Press Next to progress onto the next screen.

You now need to decide if you want to run the server as a service, you can customise the service name by the drop down box. By installing MySQL as a service by default the server will be started automatically and will restart in even of failure. I recommend using the setting above. You also get the option to include the MySQL Bin files in the windows path. This allows us to call MySQL directly from the command line, I also recommend doing this. Press Next to progress onto the next screen.

You now have to provide a password for the root account. This is the ‘master’ account with full privileges (the account username will be ‘root’); I do not recommend leaving this blank! The choice to enable access from root machines is un-ticked by default; I kept it this way as I had disabled TCP/IP settings but it also proves a higher security risk potential if details fall into the wrong hands. I also disabled the choice to enable an anonymous account as this database is intended for personal use. Press Next to progress onto the next screen.

Your installation configuration is now ready to be applied, press execute to start the process.
You should then receive a successful configuration message. Once completed, press finish to exit this wizard. Your have now successfully completed the configuration.
If you are installing MySQL on a different operating system or if you wish to refer back to the official documentation it can be found at http://dev.mysql.com/doc/refman/5.1/en/installing.html.

Connecting to your local database

Now that you have the server installed we can now connect to it!
I am going to be using the Windows CLI (command line interface) to initialise the connection, but you may use the MySQL CLI found in the MySQL programs folder. Firstly open a command prompt by opening the run dialog box found on the start menu and then type CMD and press [ENTER]; upon which you will be displayed a window similar to the one below.

The first command that we are going to type is going to connect to the server with our user name and password.
There are several ways of connecting to the server all of which do the same task. The MySQL connection command uses the following syntax:

mysql [host] [port] [username] [password] [database]

Each of these arguments can be passed to the mysql command as follows:

• –host=host or -hhost
• –port=port or -P
• –username=username or -uusername
• –password=password or -ppassword
• database is given simply as a string (E.G. db_name)

Note: By supplying the full password string like this it will be visible on screen, if you prefer you can simply supply the -p or -password command with no password to be presented with a hidden password entry prompt. We also don’t need a command terminator as we are typing into the Windows CLI at the moment not MySQL.

So as we wish to connect to our local computer so we can eliminate the host argument (see connecting to a remote host later in this article). We want to log in as our root account to give us full privileges, so we are going to need our username and password; as we currently haven’t got any databases set up we will not supply the database argument either. I will be connecting to the “root” user account on my local machine with the password of “secret” using the following command:

mysql -uroot -psecret

This connects to MySQL using the root user with a password of secret. The following commands will achieve the same result.

mysql --username=root --password=secret

mysql -uroot --password=secret

mysql --username=root -psecret

The user account ‘root’ is the master MySQL account which was created during the installation; this is the same user that you should be connecting as. However please note that it is not recommended to leave a root account turned on a web installation, please refer to user accounts and privileges at the MySQL web site for further information.(http://dev.mysql.com/doc/refman/5.1/en/adding-users.html)

Connecting to a remote database

(skip this if you are connecting to a local database) In order to connect to your remote database, often supplied by a hosting provider, you must know the IP address or host name of your database (and possibly the port number if it has been changed the default is 3306). You would connect to this as you would a local database just replacing the host and port arguments depending on your hosting configuration.

Disconnecting

To disconnect from the MySQL session send the QUIT (or \q)command.

QUIT

Formatting queries and results

Now that we are connected (after receiving “Welcome to the MySQL monitor.” message) we are ready to send our commands however there are a few other points to note.

MySQL allows use of whitespace without affecting the commands entered. This comes in handy in making our queries as readable as possible (see the image below). Both of these queries produce the same result, however the second one is significantly easier to read.

Note: This query will not work as we do not have a database set up this is for demo purposes only!
You can see the code I used below, both of the queries entered are identical however by pressing [ENTER] the CLI allows us to continue the command on a separate line. MySQL has implemented a feature to cancel an input if your command spans multiple lines, simply issue the clear command “\c”.

SELECT fld_1longlonglong, fld_2longlonglong, fld_3longlonglong, fld_4longlonglong, fld_5longlonglong, fld_6longlonglong, fld_7longlonglong FROM tbl_name WHERE fld_1longlonglong = `datavalue`;

This however also means that a special command must be sent to indicate that it is then end of the command. We can use either of the following:

• ;
• \g
• \G

The first two terminators are identical, however the third one when used within a query that returns data shows the result in a vertical table rather than horizontal. This is great to bear in mind if we are returning information from a table which has many columns as it may become unreadable.

Restoring a Database

Next we will be importing a SQL file, this is the same process that you would do if you were restoring a database backup. This file simply has all the commands necessary to make a duplicate of the database at the given backup time. Ideally we would make our own database, however making a database can be a complex subject including relationships, naming conventions, storage engines and field settings which is beyond the scope of this article.

We are going to be using a pre-prepared database available at http://dev.mysql.com/doc/#sampledb scroll down until you see the example databases and you want to go ahead and download the world database (world.sql).

Once connected to MySQL we are going to restore the world database as it is a backup of a previous database. This file is simply a list of MySQL commands which will be run to make the new database. This SQL file only contains table data and does not store database information, therefore we must first create a database to store the tables in (refer to the analogy at the start of the article). Note: To save the length of this article I will be placing multiple commands in the code snippets, you can separate these commands or issue them together lookout for the command terminators shown previously in this article. Also be aware that MySQL functions are not case sensitive so SELECT is the same as select and SeLEcT. I personally capitalise MySQL functions in order to make my queries as easy to read as possible, as queries get longer and more complex this becomes a valuable feature alongside whitespace.
To make the database we are going to issue the CREATE DATABASE command, once created we are then going to USE the database.

CREATE DATABASE db_world; USE db_world;

Time to import the backup, there are many ways of doing this, its known as batch processing (http://dev.mysql.com/doc/refman/5.0/en/batch-commands.html). Since we are connected to MySQL already we are going to use the SOURCE command followed by our file name. I have extracted the “world.sql” file from the zip folder and placed it on my C: drive root you will need to know the absolute path to your source file. If you only provide your file name MySQL will look for source in the folder you launched your command prompt from (C:\USERS\USERNAME on vista C:\Documents and Settings\Username on XP). You cannot browse to a different directory while using the MySQL interface so make sure you supply the appropriate absolute path. After issuing this command the CLI window will issue each of the commands within the SQL file, once completed you will be returned to the mysql> prompt.

SOURCE C:\world.sql;

No you have a fully functional database at your disposal. However we do not yet know what it contains! Let’s do a little bit of diving around; we are going to use the following commands:

• SHOW TABLES; – this shows the tables in the current database.
• DESCRIBE tbl_name; – this shows what fields exist in the specified table.

SHOW TABLES;

After issuing the command we now know that the database contains three tables: “city”,”country” and “countrylanguage”. Next we are going to find out what fields these tables store. You want to issue the DESCRIBE tbl_name for each of the tables.After issuing the DESCRIBE command for the country table you will see below that it returned a unreadable mess, to solve this simply use the \G terminator instead of ;.

DESCRIBE city;
DESCRIBE country;
DESCRIBE country \G
DESCRIBE countrylanguage;

Now we have all the information that we need in order to manipulate the tables as we wish, we have the database username, password, database name, table names and field names if you are developing in a different language such as PHP this is the information you would require to return data to your system (see http://php.net/mysql).

Logging results

We can choose to log output of the MySQL interface; we do this by sending the \T filename.txt command. In order to stop logging we issue the \t command. The below example saves a file called log.txt to the root directory of the E: hard drive. On my machine this is a spare hard drive, please note you must have permission to access this drive; you will be unable to write to your windows installation drive root on Windows Vista without launching MySQL from an elevated command prompt.

\T E:\log.txt
SHOW TABLES;
\t

E:\log.txt contents:
mysql> SHOW TABLES;
+--------------------+
| Tables_in_db_world |
+--------------------+
| city               |
| country            |
| countrylanguage    |
+--------------------+
3 rows in set (0.00 sec)

mysql> \t

Backing up a database

The MySQL monitor comes with an extension called mysqldump; as you might expect dumps the necessary information from the database to be able to make an exact replica. The mysqldump command uses the following syntax:

mysqldump [username] [password] [database name] > [dump file]

To launch this you should be disconnected from the MySQL session.
The following code logs into the MySQL session with the root user account with the password secret, it then dumps the table db_world to the file db_worldbak.sql.

mysqldump -uroot -psecret db_world > db_worldbak.sql

Conclusion

After reading this article, I hope you have gained a firm understanding of how to interface with mysql on a command line level. Something which can prove useful as commands can be sent directly to the MySQL database rather than via another scripting language. Please do not stop here, http://dev.mysql.com/doc/ really is a great resource and in no time you will be making you own database. Below I have written some basic queries to search the world database and some examples for you to try. Lets see if you can understand them, if not again you know where the documentation is located.

SELECT Name, Population
FROM city
WHERE CountryCode='GBR'
ORDER BY Population ASC
LIMIT 0,5\G

In English this query SELECTS and returns the Name and Population FROM the table city WHERE the country code is GBR, the results are then filtered using ORDER BY Population ASC (ascending population) and is then LIMITed to return the first 5 results. This query shows the name and population of the least 5 populated cities in Great Britain.

And one more for the road…

SELECT
CONCAT(city.Name,' speak the ', countrylanguage.Language, ' language')AS Detail,
city.Population
FROM city, countrylanguage
WHERE city.CountryCode = countrylanguage.CountryCode
AND city.countryCode = 'GBR'
AND countrylanguage.Language = 'English'
ORDER BY city.Population ASC
LIMIT 5,5 \G

In English this query SELECTs data, it CONCATenates Name from the city table and Language from the countrylanguage table and displays the results AS Detail the query also SELECTs Population from the city table. Again this query SELECTs its data FROM the city table and the countrylanguage table, this returns data where the city’s country code is the same as the country code of the country language. The data is filtered to display countries WHERE there country code is GBR AND the Language is English, this is then ORDERed BY increasing population, and results are LIMITed to show the results from 6 to 10. This query is known as an INNER JOIN, as two tables are linked together within the query. This query will display the 6th to the 10th least populated cites with the GBR country code which speak English.
How did I know what data to write those queries for you ask! By running the following SELECT query it uses the wild card character to select all the fields and return all of the data in the specified table. From the result of the query I got an understanding of what was included and I made some scenarios which I wanted to query.

SELECT * FROM tbl_name;

Here are a few functions which you may want to look at in more detail to get started:

• SELECT
• FROM
• WHERE
• LIMIT
• ORDER BY
• AND
• OR
• CONCAT
• SHOW DATABASES
• USE
• CREATE
• SHOW TABLES
• DESCRIBE
• UPDATE

Lookout for a follow up tutorial on retrieving and manipulating data. Feel free to ask any questions in the comments and I will do my best to answer them. Make sure you start a question with #Q so I can find them!

Source Nettuts
]]> http://nvmindmedia.wordpress.com/2009/04/08/everything-you-need-to-get-started-with-mysql/feed/ 0 nvmindmedia http://nvmindmedia.wordpress.com/2009/04/08/10-rare-html-tags-you-really-should-know/ http://nvmindmedia.wordpress.com/2009/04/08/10-rare-html-tags-you-really-should-know/#comments Wed, 08 Apr 2009 00:30:51 +0000 nashio http://nvmindmedia.wordpress.com/?p=18 ]]> Web developers these days are often expected to know and work in multiple languages. As a result, it’s tricky to learn everything a language has to offer and easy to find yourself not utilizing the full potential of some more specialized but very useful tags.

Unfortunately we haven’t been tapping into the full potential of these more obscure HTML tags as of late. But it’s never too late to get back into the game and start writing code that taps into the power of some under-used tags.

Here are ten of some of the most underused and misunderstood tags in HTML. While they might be less familiar, they’re still quite useful in certain situations.

1. <cite>

All of us will be familiar with the <blockquote> tag, but did you know about <blockquote>’s little brother <cite>? <cite> allows you to define the text inside of the element as a reference. Typically the browser will render the text inside of the <cite> tag in italics, but this can be changed with a touch of CSS.

The <cite> tag is really useful for citing bibliographic and other site references. Here’s an example of how to use the cite tag in a paragraph:

David Allen’s breakthrough organization book Getting Things Done has taken the web by storm.

2. <optgroup>

The <optgroup> tag is a great way to add a little definition between groups of options inside a select box. If you needed to group movie listings by time, for example, then it would look like this:

Showtimes
  Twister Napoleon Dynamite What About Bob?  Be Kind Rewind Stranger Than Fiction 

Live demo:

Showtimes Twister Napoleon Dynamite What About Bob? Be Kind Rewind Stranger Than Fiction

This allows the select list to visually separate the movie listings.

3. <acronym>

The <acronym> tag is a way to define or further explain a group of words. When you hover over text that has the <acronym> tag used, a box appears below with the text from the title tag. For example:

The microblogging site  Twitter has recently struggled with downtimes.

Live demo:

SEO is full of trickery and magic.

4. <address>

The <address> tag is quite an obscure little tag, but that doesn’t mean it isn’t useful! As the name implies, <address> allows you to semantically markup addresses in HTML. The nifty little tag will also italicize all of the data within the brackets, though the style can easily be changed through simple CSS.

Glen Stansberry
1234 Web Dev Lane
Anywhere, USA

5. <ins> and <del>

If you’re wanting to display editing revisions with with markup, <ins> and <del> are just the ticket. Like the name implies, <ins> highlights what’s been added to the document with an underline, and <del> shows what’s been taken out with a strikethrough.

John likes LOVES his new iPod.

Live demo:

John likes LOVES his new iPod.

6. <label>

Form elements seem the easiest to forget when marking up a document. Of the form elements, one of the most forgotten is the <label> tag. Not only is it a quick way to note the label’s text, the <label> tag can also pass a “for” attribute to specify which element is to be given the label. Not only are these <label> tags great for styling, they also allow you to make the caption clickable for the associated element.

Username

7. <fieldset>

Fieldset is a nifty little attribute that you can add to your forms to logically group form elements. Once applied the <fieldset> tag draws a box around the elements within the fieldset. Bonus points for adding a <label> tag within the fieldset to define the title of the group.

Are You Smarter Than a 5th Grader?
Yes 

No 

Live demo:

Are You Smarter Than a 5th Grader? Yes No

8. <abbr>

The <abbr> tag is much akin to the <acronym> tag, except the <abbr> tag is only used to define abbreviated words. Just like <acronym>, you define a title within the tag. When a visitor hovers over the abbreviated text, the full definition appears below. The <abbr> tag is rarely used, but the benefits are many for screen readers, spellcheckers and search engines.

Sgt. Pepper's Lonely Hearts Club is my favorite album.

Live demo:

Sgt. Pepper’s Lonely Hearts Club is my favorite album.

9. rel

Rel can be an insanely useful attribute, as any HTML element can have a rel applied to it. It’s helpful for passing extra variables that aren’t otherwise specified. This is helpful when using Javascript with your HTML. If you have a link that you want to edit inline, you might add:

This link is editable

The Javascript might be looking for a link with the rel attribute “clickable”, and it knows to apply some Ajax and allow it to be edited inline. This is one of many techniques you can use with the rel attribute, as the possibilities are endless.

10. <wbr>

The <wbr> tag is an incredibly obscure tag. To be honest, I doubt many of you have come into contact with the tag, as it’s hardly ever used. (Truthfully, I hadn’t seen the tag before I started researching this article.) Essentially, the tag allows you to specify a place where you think a line break might be useful, but only if needed. This tag is unique as it relies on the discretion of the browser to insert the linebreak, if needed. It’s perfect for creating layouts that you want to avoid having horizontal scrollbars.

If you were wanting to achieve the same effect but without using the <wbr> tag, you could also try or ­­. It should be noted that none of these tags have full support across all browsers. To see which browsers support the tags check out this article by Quirksmode.

How do you say Supercalifragilisticexpialidocious?

One of the most important aspects of being a web developer is having the correct tools and applications at your disposal to get the job done. These applications can range from text editors with helpful features, to screen capturing software to display video and/or audio to a client or your users. Today, we will have a look at 30+ amazing Mac applications for web developers.

Panic’s Coda

Anyone who knows me had to imagine this would be the first on the list. I use Coda everyday and couldn’t imagine development without it. If you are looking for a super powerful and functional text editor, I highly recommend Coda.

Price: Free trial, $99 for regular license.

Visit Site

TextMate

Another popular text editor for Mac is TextMate created by MacroMates. Another nice feature is the price is a bit lower than that of Codas.

Price: Free Trial, $55 per license.

Visit Site

Eclipse

Eclipse is a very popular IDE that has become the tool many programmers prefer to use. There are many Eclipse Plugins as well that support different web and computer languages. No matter what language you program in, Eclipse can most likely accommodate you.

Price: Free!

Visit Site

QuickSilver

A favorite of many Mac owners, QuickSilver is a very extendable interface that allows you to quick launch programs, manage shortcuts, contacts, music, and many other applications.

Price: Free!

Visit Site

Komodo Edit

If you are looking for a powerful free and open source text editor that runs on any platform, then Komodo Edit might be the one for you. Primarily focused on dynamic web languages, Komodo Edit comes with many features and customizable plugins to help you get the job done.

Price: Free and Open Source!

Visit Site

Billings 3

Billings 3 is a wonderful time billing and invoicing tool, perfect for anyone who does any freelance work. Billings 3 integrates with the Mac interface brilliantly and its features save a lot of manual labor.

Price: $39.99 per license, $25.00 to upgrade.

Visit Site

BB Edit

BBEdit is a text editor for Mac that claims ‘It Doesn’t Suck’, and you know what? It most certainly does not. Packed full of helpful features, including project management, BBEdit is the text editor of choice for many web developers.

Price: Free Trial, $125 per license, $49 for educational license.

Visit Site

MAMP

Most recent Macs come with everything that MAMP does, but by downloading and installing MAMP you can get your own local server up and running in under 5 minutes. In case you were wondering, MAMP stands for Mac, Apache, MySQL, and php/perl/python, whatever your server side language of choice. If you need help installing check out this quick screencast on getting MAMP setup on your Mac.

Price: Free, additionally a paid version ‘MAMP Pro’ is available for $55.00.

Visit Site

Panic Transmit

Saying that Transmit is a superb FTP program for Mac would be an extreme understatement. Just look at all the features of the program on their homepage, there are far too many to list here. If you are looking for a high quality FTP program for Mac, Transmit is a great choice.

Price: Free Trial, $29.95 per license.

Visit Site

Paparazzi

If you do a lot of writing or use screenshots often, you may consider downloading paparazzi. Paparazzi is a small but powerful (and free) screenshot program that makes taking snapshots of websites a breeze.

Price: Free!

Visit Site

Magnifique

While not necessarily a development tool, Magnifique heps you customize the look and feel of your Mac workspace by quickly changing in between themes of your choice. Great for those who need a little inspiration, or who need a change of ‘scenery’.

Price: Free!

Visit Site

Flow

Flow is a visual workflow manager, built to give you full control and understanding over your current project. The concept of flow is slightly difficult to describe, so I recommend checking the screenshots or giving the trial a go. While it is a bit on the pricy side, it is extremely helpful if you work at a company where you often work with a large group of people and need to stay organized.

Price: Free Trial, $249 per license.

Visit Site

Man Hour

Man Hour is a simple and flexible time tracking program. It’s strength lies in it’s flexibility of letting you change what you charge per hour depending upon the project at hand. The price tag is also very easy on the eyes.

Price: Free Trial, $9.99 per license.

Visit Site

CyberDuck

Cyberduck is a popular and free ftp program requiring Mac OS X 10.4 or higher. It also supports FTP, SFTP, WebDAV, Mosso Cloud Files and Amazon S3.

Price: Free and Open Source!

Visit Site

FileZilla

FileZilla is a very well known open source FTP program that runs on most operating systems. Simple, easy to use, and works as it should.

Price: Free and Open Source!

Visit Site

TextExpander

Recently Jeffrey posted a screencast titled ‘How I can code twice as fast as you.’ While the title was sort of a joke, Jeffrey showed how valuable a good text expander program can be and how much time it can save. My personal favorite is TextExpander for Mac OS X. Text Expander will save you all kinds of time by allowing you to setup shortcut names for anything you type over and over again.

Price: Free Trial, $29.95 per license.

Visit Site

DropBox

Dropbox is a very easy to use program that allows you to share, sync, and backup files on your hard drive. Even better is that you get a 2GB account for free, which should be plenty to backup those files you can’t afford to lose.

Price: 2 GB free, $9.99/month for more space.

Visit Site

Growl

Growl is another one of those applications that is a little hard to explain, but extremely helpful to have. Basically, Growl lets you know when certain things happen, in a very unobtrusive way. For instance, Growl integrates perfectly with Coda and lets you know when a file or folder has been successfully uploaded or downloaded, or if there was an error that occurred. Check out the about page for more screenshots and information.

Price: Free.

Visit Site

LaunchBar

LaunchBar is a lot like QuickSilver, with a very powerful search tool. LaunchBar also allows you to setup and use simple text commands to run programs, edit files, and manipulate data. It is free to use until April 1, 2009.

Price: Free until Apr 1, $32 per license after that.

Visit Site

Money³

Money³ is the latest version of the Money accounting program built specifically for Mac OS X. Version 3 offers a completely new user interface and the ability to manage all different types of accounts. In addition, Money can also help you plan and track your budget. Furthermore, it was cool to get to use the ‘sup’ tag.

Price: Free Trial, $39.00 per license.

Visit Site

On The Job

On The Job is a fully packed software program built to track time and expenses, and provide you with super simple client invoicing. The multiple billing currency option is particularly helpful.

Price: Free Trial, $39.95 per license.

Visit Site

Versions

Version control is very important for anyone involved in development, and Versions makes it super simple to maintain. Even if you have never worked with subversion, Versions is a breeze.

Price: Free Trial, $53 per license.

Visit Site

Snipply

Snipply is an Adobe AIR application used to organize chunks and snippets of code into separate categories. If you have used Code, it is similar to Coda Clips. I prefer to keep my larger code libraries in Snippley as it is very easy to use and doesn’t clutter my clips. Best of all it is absolutely free!

Price: Free and Open Source!

Visit Site

Espresso

There has been a lot of talk about Espresso and how it will rival many of the current popular text editors. It is currently in public beta and requires Leopard. Check out all of the features offered on the homepage.

Price: Free to try, pre order for $80.00. Discount for CSSEdit users.

Visit Site

CSSEdit

From the same people that built Espresso, CSSEdit is a text editor focused mainly on, well, CSS. Packed with all kinds of helpful features and references, CSSEdit is great for those who frequently design websites or templates.

Price: Free Trial, $40.00 per license

Visit Site

Capture Me

Looking for a simple and free screen capturing program? Then you might enjoy Capture Me, which contains features resizing on the fly, custom file types for images, and an easy to use interface.

Price: Free and Open Source!

Visit Site

BackDrop

Backdrop is a great program for those of us who constantly have multiple windows and panles open and need to clear up some space. If you need to focus on some code, or just do some writing, just activate BackDrop and watch your clutter disappear, allowing you to get back to work.

Price: Free!

Visit Site

ServerSkine

If you are constantly searching and trying to keep track of different clients domain and server information, ServerSkine can be a lifesaver. ServerSkine allows you to organize all of your different server and domain accounts of your clients in one easy to use program.

Price: Free!

Visit Site

Snapz Pro X

Snapz Pro X is a very powerful and versatile video and screen capturing software program for Mac. If you have checked out the WordPress for Designers series, this is the software I use to create the screencasts.

Price: Free Trial, $69 per license.

Visit Site

Skype

While not limited to Mac OS only, Skype is a must have application for those who freelance or do any kind of work from home. Use it to make free calls to your boss or company, catch up with a client, or sit it on a video chat for a meeting.

Price: Free, discount for calls to certain areas of the world.

Visit Site

SpanningSync

SpanningSync allows you to synchronize iCal and Address Book with Google Calendar and Gmail Contacts. For those power gmail users, SpanningSync can be a huge help when it comes to organizing your events.

Price: Free, discount for calls to certain areas of the world.

Visit Site

Your Favorites?

For the sake of time and this article, there is no way we could include every excellent Mac application, so what are some of your favorites? What applications do you find to be most helpful when it comes to development?

Thanks Twitter!

A special thanks to those that replied to me on twitter when I asked what were some of your favorite Mac apps. I did my best to take all of your replies into thought before I finalized the list. Thanks Twitter!

Browsers will automatically display a tooltip when you provide a title attribute. Internet Explorer will also use the alt attribute. But, in this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

One of the great tools we have in our web development goodie-bag are tooltips. A tooltip is a box that appears when you hover your cursor over an element like a hyperlink. It provides supplementary information about that element. For example, a link with little or no text (an icon) may become confusing. Provide an extra sentence or two within a tooltip to explain to your users what will happen if they click on it.

Before You Start

This tutorial would probably fit in the category of Intermediate. The instructions assume that you have at least a basic understanding of HTML/CSS, slicing techniques and jQuery.

If you need a refresher on jQuery, here are a few recommended sites:

• jQuery for Absolute Beginners: Video Series
• Create a Custom WordPress Plugin From Scratch
• 15 Resources To Get You Started With jQuery From Scratch
• jQuery and JavaScript Coding: Examples and Best Practices
• Getting Started with jQuery
• How to Get Anything You Want – part 1

Just so you have a clear idea of the files involved in this tutorial, here is what the file structure should look like by the time you are done.

Here’s a rundown of what each file/folder is:

• Images folder contains the following images:
• – - tipTip.png – created in Step 2
• – - tipMid.png – created in Step 2
• – - tipBtm.png – created in Step 2
• index.html – – created in Step 3
• style.css – created in Step 3
• jquery-1.3.1.min.js – download this here
• jquery.betterTooltip.js – – created in Step 5

First, Get a Little Creative

Open up Photoshop, or your software of choice, and whip up an awesome looking tooltip. Rather than designing on a plain white background, it may help to draw up your tooltip on a background similar to that of your site. That way it will blend in seamlessly. For the most part, there is no right or wrong way to complete this step. Just use your imagination and creativity.

Step 2 – Slice and Dice Your Tooltip

For this particular design, you will need to slice the tooltip into 3 different images. This particular design will need a PNG to preserve transparency. 1) The top piece. 2) A thin 1 pixel slice that will repeat vertically in the middle. 3) The bottom piece. The 4th part of the diagram below shows the three pieces after they were cut out.

Place these image files into a folder named “images”.

Note: Internet Explorer does NOT like PNG transparency. Even IE 7 only partially supports it. If you animate a PNG with JavaScript, any area with transparency will turn black momentarily while in movement. I’m using this design knowing full well it will have issues in IE that are hard to work around.

Step 3 – Write the HTML/CSS Markup

With the images sliced, we can move on to the HTML and CSS markup. This will be the easiest part of the whole tutorial.

The HTML

This HTML markup will soon be moved into an external JavaScript file, so just type this in whatever is most convenient and can be referred to later.

	<div class="tip">
		<div class="tipMid"></div>
		<div class="tipBtm"></div>
	</div>

There are three div tags. Two nested inside a parent. The first div, “tip” will be used to hold everything together and display the top portion of the tooltip, tipTop.png.

“tipMid” will eventually hold the text that the tooltip will display. It will also have tipMid.png repeating vertically inside it.

“tipBtm” is solely there to display the bottom portion of the tooltip, tipBtm.png.

Inside of index.html, add a bunch of filler text and some elements with their title attributes filled out. Such as:

	This is a link

In the head of index.html, you will need to link to the stylesheet and the two JavaScript files.

	<link href="style.css" rel="stylesheet" type="text/css" media="all" />
	<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
	<script type="text/javascript" src="jquery.betterTooltip.js"></script>

The CSS

The CSS used for this tooltip is relatively simple, just add the following to style.css

	.tip {
		width: 212px;
		padding-top: 37px;
		display: none;
		position: absolute;
		background: transparent url(images/tipTop.png) no-repeat top;}

	.tipMid {background: transparent url(images/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}
	.tipBtm {background: transparent url(images/tipBtm.png) no-repeat bottom; height: 32px;}

Let me explain the above.

The wrapping element, .tip, is used to hold everything together. It has a top padding of 37 pixels. That’s the height of the image in the background. The padding will push the child elements down to reveal the image behind. It also has a position absolute so that we can move it around on top of the page content.

The other two classes simply have a background image and, in the case of .topMid, padding to give the content that will be placed inside, some room to breathe.

Step 4 – Why a Plugin?

jQuery is pretty cool by itself. But the real magic is in extending it with a plugin. When you put your code into a plugin, you are making it reusable. That way you can build up a code library and never write the same code twice.

Here is the tooltip plugin in its entirety:

	$.fn.betterTooltip = function(options){

		/* Setup the options for the tooltip that can be
		   accessed from outside the plugin              */
		var defaults = {
			speed: 200,
			delay: 300
		};

		var options = $.extend(defaults, options);

		/* Create a function that builds the tooltip
		   markup. Then, prepend the tooltip to the body */
		getTip = function() {
			var tTip =
			"<div class='tip'>" +
				"<div class='tipMid'>"	+
				"</div>" +
				"<div class='tipBtm'></div>" +
			"</div>";
			return tTip;
		}
		$("body").prepend(getTip());

		/* Give each item with the class associated with
		   the plugin the ability to call the tooltip    */
		$(this).each(function(){

			var $this = $(this);
			var tip = $('.tip');
			var tipInner = $('.tip .tipMid');

			var tTitle = (this.title);
			this.title = "";

			var offset = $(this).offset();
			var tLeft = offset.left;
			var tTop = offset.top;
			var tWidth = $this.width();
			var tHeight = $this.height();

			/* Mouse over and out functions*/
			$this.hover(function() {
				tipInner.html(tTitle);
				setTip(tTop, tLeft);
				setTimer();
			},
			function() {
				stopTimer();
				tip.hide();
			}
		);		   

		/* Delay the fade-in animation of the tooltip */
		setTimer = function() {
			$this.showTipTimer = setInterval("showTip()", defaults.delay);
		}

		stopTimer = function() {
			clearInterval($this.showTipTimer);
		}

		/* Position the tooltip relative to the class
		   associated with the tooltip                */
		setTip = function(top, left){
			var topOffset = tip.height();
			var xTip = (left-30)+"px";
			var yTip = (top-topOffset-60)+"px";
			tip.css({'top' : yTip, 'left' : xTip});
		}

		/* This function stops the timer and creates the
		   fade-in animation                          */
		showTip = function(){
			stopTimer();
			tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
		}
	});
};

Step 5 – Write the Plugin

Now that you’ve seen what the code looks like, it’s time to dissect it. To get started, create a .js file and name it jquery.betterTooltip.js to make it compliant with jQuery plugin standards.

Inside that .js file, include the following code:

	$.fn.betterTooltip = function(){

	});

This creates a public function that can be invoked from the head of a document or another external .js file. To invoke your plugin, you need to call the follow line from within a $(document).ready page event.

	$(document).ready(function(){
		$('.tTip').betterTooltip();
	});

The above line will attach the plugin to every element with the class name of “tTip”. Likewise, you could attach it to any element of your choosing.

Expose the Plugin Settings

In order to prevent having to modify the plugin for every project it’s important to expose some of the variables and settings so they can be tweaked from outside the plugin itself. The ultimate goal would be to never touch the plugin, just adjust its settings. To do this, add the following to that first chunk of code:

	$.fn.betterTooltip = function(options){
		/* Setup the options for the tooltip that can be
		   accessed from outside                      */

		var defaults = {
			speed: 200,
			delay: 300
		};

		var options = $.extend(defaults, options);
	});

This allows the settings “speed” and “delay” to be modified when the plugin is invoked like this:

	$('.tTip').betterTooltip({speed: 600, delay: 600});

These are completely optional. If not specified, the plugin will use the default values.

Inject the Tooltip Markup

Remember that HTML you typed up for the tooltip? It will now make its official appearance. In this chunck of code, the jQuery “prepend” content manipulation is used to inject the tooltip immediately after the opening body tag. This way we can make sure that the tooltip is positioned on top of everything.

	/* Create a function that builds the tooltip
	   markup. Then, prepend the tooltip to the body */
	getTip = function() {
		var tTip =
		"<div class='tip'>" +
			"<div class='tipMid'>"	+
			"</div>" +
			"<div class='tipBtm'></div>" +
		"</div>";
		return tTip;
	}
	$("body").prepend(getTip());

The $(this).each function

This is one of the most important and useful aspects of a jQuery plugin. The $(this).each function loops through each page element that is associated with the plugin when it was evoked. In this case it’s all elements with the “tTip” class. When it loops through each element it applies the properties and methods that you specify.

	$(this).each(function(){

		var $this = $(this);
		var tip = $('.tip');
		var tipInner = $('.tip .tipMid');

		var tTitle = (this.title);
		this.title = "";

		var offset = $(this).offset();
		var tLeft = offset.left;
		var tTop = offset.top;
		var tWidth = $this.width();
		var tHeight = $this.height();

		/* Mouse over and out functions*/
		$this.hover(function() {
			tipInner.html(tTitle);
			setTip(tTop, tLeft);
			setTimer();
		},
		function() {
			stopTimer();
			tip.hide();
		}
	);

This is fairly simple. The top half consists of a bunch of properties for the height, width, x & y position and even the title attribute value of the “tTip” elements. I’m using the jQuery offset() CSS method to grab the top and left position. There is also a hover function assigned to each “tTip” class that calls methods on mouse over and out. These methods will be described further down in the tutorial.

One important part of the $(this).each function is this line of code here that removes the title attribute:

	this.title = "";

The whole point of this tooltip is to swap the generic tooltip with a better eye catching version. If you don’t remove the title attribute, which the browser uses to generate the generic tooltip, you will get duel tooltips. Like this:

Delay the Fade-in Animation of the Tooltip

		/* Delay the fade-in animation of the tooltip */
		setTimer = function() {
			$this.showTipTimer = setInterval("showTip()", defaults.delay);
		}

		stopTimer = function() {
			clearInterval($this.showTipTimer);
		}

These two methods, setTimer and stopTimer are used to create a delay from when the user hovers their cursor over the element with the “tTip” class and when the tooltip makes its appearance. This is important to avoid annoying users. I’m sure we all share the frustration when we accidentally hover over one of those pop-up ads that are hidden in the content of sites.

The setTimer method creates a setInterval object that calls “showTip()” after the allotted time has passed. In order for setInterval to not loop infinitely, the method stopTimer is called to stop the setInterval object.

Position the Tooltip

		/* Position the tooltip relative to the class
		   associated with the tooltip                */
		setTip = function(top, left){
			var topOffset = tip.height();
			var xTip = (left-30)+"px";
			var yTip = (top-topOffset-60)+"px";
			tip.css({'top' : yTip, 'left' : xTip});
		}

The hover function inside the $(this).each loop, that was created earlier, calls setTip(). Its purpose is to position the tooltip directly above “tTip” element. This is done prior to the fade-in animation.

Tooltip Fade-in Animation

		/* This function stops the timer and creates the
		   fade-in animation                          */
		showTip = function(){
			stopTimer();
			tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
		}
	});
};

Last but not least, the showTip() function. This uses jQuery’s animate() UI effect to fade the tooltip in while simultaneously sliding it down.

Wrapping it Up. . .

Once you are done and happy with your results, you can move your plugin from the basic HTML page full of filler text to the real world and put it to use.

This is a very basic example of what a tooltip plugin can do. The fun part now will be to make it more robust. There are all sorts of ways to expand this plugin. A needed enhancement would be detecting the location of the tooltip in relation to the boundaries of the browser window and displaying the tooltip accordingly so it doesn’t get cut off.

Thanks for reading this tutorial. I hope it shed some light on how you can use jQuery to enhance your website’s interface.

Let the comments begin! I want to hear what you think. Does this technique actually help users get around easier, or is it just another annoyance?

Source Nettuts
]]> http://nvmindmedia.wordpress.com/2009/04/08/build-a-better-tooltip-with-jquery-awesomeness/feed/ 0 nvmindmedia The file structure Initial Tooltip Design Slice up the tooltip Avoid duel tooltips http://nvmindmedia.wordpress.com/2009/04/08/social-networking-with-buddypress/ http://nvmindmedia.wordpress.com/2009/04/08/social-networking-with-buddypress/#comments Wed, 08 Apr 2009 00:10:52 +0000 nashio http://nvmindmedia.wordpress.com/?p=11 ]]>

Automattic, the company behind WordPress, has recently acquired and will be releasing social networking software called BuddyPress. The software, built on top of WordPress, was created by Andy Peatling as way to start your very own social network similar to Facebook. Today, we will take a look at installing BuddyPress.

Step 1 – What is BuddyPress?

BuddyPress is a social networking application built on top of WordPress Multi-User (MU) as a plugin. WordPress MU is the the software behind WordPress.com. It allows a user to host a network of blogs on a site. BuddyPress adds a large variety of new social interaction features to WordPress. The features can be added all at once or as individual components:

• A WordPress blog
• Individual profiles for members
• Private Message (PM) functionality
• Friend Networks
• Groups, which include a blog, photos and other user generated content
• “The Wire” (like the wall on Facebook)
• Activity/Action streams of public actions on the site
• Forums using bbPress

A fully featured demo is available at the BuddyPress website.

Today, we will install a full installation of BuddyPress (all the bells and whistles), so we can start a social network from scratch.

The software is in its RC stage, but is nearing its final version. The current version will help you get started with social networking by providing an admin control panel and all the basic features outlined above. You will then be ready to upgrade to the final version when the time comes.

Step 2 – Requirements

Before you install the BuddyPress system, your server will require you have two components already in place:

• a MySQL database to store all the BuddyPress information. If you do not have a database created, create one with a user who has all privileges (such as UPDATE, INSERT, DELETE, SELECT) on that database. Remember the username/password and database name for later steps.
• a mod rewrite module so you can have clean URLS. If you have used WordPress or another piece of software that has clean URLs, then you should be ready to proceed without adding this component again.

Step 3 – Download WordPress MU

Before you can start the BuddyPress installation you will need a copy of WordPress MU installed. Grab the latest version (ZIP) (TAR.GZ) and unzip it. You should see a folder with a name similar to “wordpress-mu”.

Upload the files in this directory to the location where you want to access your site. This can be the main domain or a subfolder. Grab a cup of coffee or tea while you wait for the upload to finish.

Step 4 – Install WordPress MU

Once the upload has completed you can go ahead and install WordPress MU.

Point your browser to the directory where you uploaded the files so that index.php is executed. You will be shown a screen to enter some details. The settings should be filled as given below:

• Blog Addresses – For the purpose of this article we will select “sub-directories”. If you happen to have Wildcard DNS records enabled, you can select the other option, but that is outside the scope of this article.
• Database Name – The database name from Step 2
• User Name – The username from Step 2
• Password – The password from Step 2
• Database Host – This is usually localhost if the MySQL server is on the same server as the web server. Only change this if the installation is returning errors about the server/host setting.
• Server Address – The installer should be able to guess this setting, but double check that it is set to the server/domain you are installing to.
• Site Title – This will be the name of the social network site, so name it whatever you want.
• Email – Enter a valid email address to be used for the admin account.

Once you have double-checked all the above settings, click Submit. If all goes well, you should be greeted with an “Installation Finished!” screen that includes your username and password. You have also been sent an email with the same details included.

Before you continue, follow the instructions for setting permissions on the Installation Finished page.

Step 5 – Download BuddyPress

At this point, you can now install the BuddyPress system. Since we are installing the full system, you can download the “combo” archive here.

Unzip the combo file and upload all the contents of the extracted zip to the root mu-plugins folder located in wp-content. Upload ALL the folders and files located in the zip, and make sure these folders and files have been chmodded to 755.

Move the mu-plugins/bp-themes folder you just uploaded to wp-content. Make sure these folders have been chmodded to 755.

Step 6 – Setup BuddyPress

Once the files are uploaded, log in to the WordPress MU admin control panel with the username and password you created earlier. The URL to log in (emailed to you when you installed WordPress MU) is in the form http://yourdomain.tld/folder/wp-login.php

Under the “Site Admin” menu find the “Themes” link and click it. You will be shown a list of installed WordPress MU themes, one of which is the BuddyPress theme. Select “Yes” for “BuddyPress Home Theme” and click “Update Themes”.

Finally, you will need to enable registrations if you want users to be able to sign up for your site. Under the “Site Admin” menu go to “Options” and make sure the Enabled option is selected for “Allow new registrations”.

Congratulations! Your social network is now ready for use. When logged into the admin control panel, you can manage a few settings from the “BuddyPress” link under “Site Admin”. To view your new network and profile click “My Account” from the admin bar at the top of the screen and select “Activity” or “Profile”.

Step 7 – Additonal Plugins and Themes

The plugin space for BuddyPress is small right now, but it will probably explode with new activity like WordPress once did. However, there are a few cool plugins available for BuddyPress right now:

• bpGroups which includes improvements to the group system.
• Invite Friends which adds some functionality to allow you to add friends from other social networking applications like Twitter, Facebook and GMail.
• Twitter To Wire which adds your tweets to your wire (the BuddyPress version of Facebook’s Wall) automatically.

There is also a page for themes, but no themes have yet been made available for download. If you are curious about the power of the theming system, you can view a few examples at WannaNetwork, GrungePress, and Flokka.

Closing

I hope this tutorial has been successful in introducing you to BuddyPress and has opened up an opportunity for you to start your own social network site. The WordPress MU / BuddyPress configuration provides more social functionality than can be provided by a simple forum or blog network setup.

Remember, this tutorial is meant to familiarize you with the software and its installation before its final release. If you want to continue with your BuddyPress installation on the programming side of things, the BuddyPress Codex has some developer documentation.

Source Nettuts
]]> http://nvmindmedia.wordpress.com/2009/04/08/social-networking-with-buddypress/feed/ 0 nvmindmedia BuddyPress Features Demo phpMyAdmin FTP/Files Install Install Files Themes Allow New Registration Settings Extend Screen Shot http://nvmindmedia.wordpress.com/2009/04/08/50-excellent-image-galleries-you-can-use-today/ http://nvmindmedia.wordpress.com/2009/04/08/50-excellent-image-galleries-you-can-use-today/#comments Wed, 08 Apr 2009 00:08:17 +0000 nashio http://nvmindmedia.wordpress.com/?p=8 ]]> 1. Gallery 2

Gallery 2 has probably the biggest community and is one of the most used gallery scripts on the web.

2. Zenphoto

Zenphoto bills itself as the “simplest, most useful gallery software for your site”. The script is built in PHP.

3. Minishowcase

Minishowcase is an simple and tiny php/javascript photo gallery.

4. TripTracker

TripTracker is a small JavaScript image viewer and animated slideshow player.

5. Dynamic Drive CSS Image Gallery

Instead of using JavaScript, the Dynamic Drive CSS Image Gallery is completely powered by CSS.

6. Ajax Photo Gallery

A free Ajax-powered photo gallery that pulls photos from Picasa from XML.

7. SimpleViewer

A free flash-based image gallery script that also comes with an optional Pro version that offers more options and customizations.

8. Jalbum

Jalbum is a hybrid online/offline software that you download to your computer that uploads the image galleries to your space at jalbum.net.

9. Coppermine

Like Gallery 2, Coppermine is another “old school” PHP photo album script that has been around for many years.

10. Plogger

Plogger is a PHP gallery script that has useful features like inline ajax photo editing, zip upload files, and the ability to build your own themes.

11. CSS Play

A slick, multi-page gallery built entirely of CSS.

12. Polaroid Gallery

Polariod Gallery is an interesting flash script that arranges your photos (from XML file or Flickr RSS feed) into a gallery of “polaroids”.

13. dfGallery

dfGallery is a beautiful free flash gallery script, with customizable themes and an administration section built with the PHP framework CodeIgniter.

14. (E)2 Photo Gallery

An excellent JavaScript photo gallery built with MooTools.

15. AutoViewer

AutoViewer arranges images in a Flash gallery in a specified sequence with images and captions.

16. Smooth Gallery

Yet another JavaScript image gallery built upon the tiny framework MooTools.

17. Satellite

A photo gallery script that allows users to build customizable galleries from their Flickr accounts.

18. Hoverbox

Hoverbox is a simple, lightweight CSS-only image gallery.

19. Flash Gallery

Like the name suggests, Flash Gallery is a simple XML and Flash powered gallery that is easy to customize.

20. HighSlide JS

While not technically a gallery script, HighSlide allows you to easily zoom in and out on pictures, using a simple JavaScript effect.

21. Pixelpost

Pixelpost is a twist on an image gallery script that adds photo blogging into the mix. Open source, fast, and multi-lingual.

22. Script and Style Auto-Generated Photo Gallery

A nifty script that takes a directory of images and creates an image gallery. Built with PHP and JavaScript.

23. Postcard Viewer

A flash script that takes images, places them into “postcards” and rearranges them in a gallery.

24. Andrew Berg’s Flash Photo Browser

A simple flash-animated photo browsing script. Simple but fun.

25. Flickr Photo Album for WordPress

Tan Tan Noodles has a plugin for WordPress that pulls your Flickr photosets and creates albums in WordPress.

26. Galleria

Galleria is a lightweight image gallery script based on jQuery.

27. Lightview

A clean, lightweight solution for building simple image and media galleries in overlays.

28. Fancy Zoom

Fancy Zoom is a bit of JavaScript that allows you to zoom in on photos without requiring a second download of the image.

29. Imagevue

A nice flash image gallery that has photo albums, slideshows, and an admin area.

30. jpGalScroll Photo Gallery

A simple gallery snippet built upon jQuery that offers scrolling and pagination.

31. nextgen gallery

nextgen gallery is a robust image gallery plugin for WordPress users, built upon jQuery.

32. Singapore

Dubbed as the “smallest big gallery”, Singapore is a lightweight, powerful image gallery script built on PHP.

33. jQuery Cycle

A plugin for jQuery that let’s you “cycle” through galleries of images in different ways.

34. Imagin

A flash photo gallery that can organize pictures into galleries and sub-galleries.

35. Phormer

PHP-based photo gallery that doesn’t require a MySQL database and installs in under 3 minutes.

36. Gullery

Gullery is a simple image gallery built with Ruby on Rails. Perfect for a personal portfolio or small image gallery.

37. How to Build a Photo Gallery with CakePHP and Flickr

An interesting tutorial on how to build a web-based image gallery with the PHP framework CakePHP and Flickr.

38. filebrowser

A small PHP application that allows you to thumbnail images for use on the web. Built by Lussumo.

39. FAlbum

A WordPress-powered image gallery that displays photos and photosets from Flickr.

40. Slimbox 2

A tiny, standards-compliant, fully customizable lightbox image viewer built upon jQuery.

41. Animated JavaScript Slideshow

A slideshow gallery feature script built upon Javascript, in under 5kb.

42. iPhotoToGallery

An iPhoto plugin that makes publishing photos to a Gallery 2 installation much easier.

43. FrogJS Gallery

A simple, unobtrusive gallery script built upon Lightbox, but showcases galleries in a different manner.

44. Create a Spectacular Photo Gallery with MooTools

Nettuts+’ very own Jared Rhizor has an excellent tutorial on how to build a simple image gallery with MooTools.

45. Django-based photo gallery tutorial

Simple tutorial on how to build a photo gallery with the Python framework Django.

46. Zen Gallery

Elegant flash gallery scripts and tools for putting photos on your site.

47. folderblog

A free, lightweight PHP script that displays images from a folder into a gallery.

48. Duh Gallery

Yet another simple WordPress gallery plugin.

49. Original Photo Gallery

A set of scripts that provide a client side script to scale images and publish the images in gallery form.

50. Making the ultimate dynamic image gallery in Flash 8

A guide for intermediate Flash users to build a dynamic image gallery, loaded by XML.

When designing websites, a commonly desired feature is the ability to dynamically print or email any section of a webpage. Unfortunately, this idea is usually scrapped later in the project due to a lack of time or knowledge. Formatting the text for printing is more difficult than it might initially seem. Today, we will use JavaScript to automatically search for certain page elements and format them correctly for a printing.

Objectives:

At the end of this tutorial, we will have accomplished the following:

• Use jQuery to print or email any section of a page automatically when a certain element is clicked.
• Format and change the style to optimize for print or email.
• Add variables to the email version (To, From, Message, etc.)

The Page

What’s Wrong With This?

Wow…that page is colorful. I agree – it’s not the greatest color scheme in the world. This design was definitely not designed for print. Although the background blue will not print out on most printers, the printer will just make it disappear. This will mess up the rest of the design though because now the bright orange and green text will print on a white background. There is no easy way for a user to print out a nice black and white formatted article from this page, short of copying it into a word processor and formatting it themselves.

Keep The Design, Fix The Problem

One solution might be to provide a print stylesheet, as Tuts+ has done. This would work if there was only one article on a page. Unfortunately, this example is in blog format. This means that there are several articles on a page; and chances are the user only wants to print out one article. We are going to use jQuery to allow the user to click a link after each article that formats the article and allows them to print or email it.

HTML for This Page

The HTML is rather simple for this page. We’ll add a couple of standard classes: One to signify a section to be printed/emailed (.printSection), one to signify the area that contains the links to print or email (.printControls), a class for all print links (.printControl), and a class for all email links (.emailControl). Notice how we also linked to Google’s minified file. This allows us to use jQuery later.

1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
2. <head>
3. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
4. <title>Print | Email jQuery Plugin</title>
5. <script type=“text/javascript” src=“http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”>
6. </script>
7. </head>
9. <body>
10. <div class=“page-wrap”>
11. <div class=“printSection”>
12. <a name=“1″></a>
13. <h2>This is a Heading</h2><br />
14. <img src=“image.jpg” />
15. <p>Article Text</p>
16. <span class=“printControls”><p class=“printControl”>Print Section</p> |
17. <p class=“emailControl”>Email Section</p></span>
18. </div><!– End printSection –>
19. <div class=“printSection”>
20. <a name=“2″></a>
21. <h2>This is a Different Heading</h2><p>Article Text</p>
22. <p>More Article Text</p>
24. <span class=“printControls”><p class=“printControl”>Print Section</p> |
25. <p class=“emailControl”>Email Section</p></span>
26. </div><!– End printSection –>
27. <div class=“printSection”>
28. <a name=“3″></a>
29. <h2>This is Another Heading</h2><p>Article Text</p>
30. <p>More Article Text</p>
32. <span class=“printControls”><p class=“printControl”>Print Section</p> |
33. <p class=“emailControl”>Email Section</p></span>
34. </div><!– End printSection –>
35. <div class=“printSection”>
36. <a name=“4″></a>
37. <h2>This is a Heading Again</h2><p>Article Text</p>
38. <p>More Article Text</p>
40. <span class=“printControls”><p class=“printControl”>Print Section</p> |
41. <p class=“emailControl”>Email Section</p></span>
42. </div><!– End printSection –>
43. </div><!– End Page Wrap –>
44. </body>
45. </html>
    

The CSS

The CSS is pretty simple too.

1. body{
2. text-align: center;
3. font-family: Tahoma, Arial, Helvetica, Sans Serif;
4. }
5. h2{
6. color: #d98841;
7. font-size: 48px;
8. padding: 0px;
9. margin: 0px;
10. font-weight: normal;
11. }
13. .page-wrap{
14. margin-left: auto;
15. margin-right: auto;
16. width: 550px;
17. background: #10222b;
18. padding: 15px;
19. text-align: left;
20. }
21. .printSection p{
22. color: #bdd684;
23. font-size: 12px;
24. text-align: justify;
25. }
26. p.printControl, p.emailControl, .printControls{
27. display: inline;
28. color: #f2ece4;
29. }
30. p.printControl, p.emailControl{
31. cursor: pointer;
32. }
33. img{
34. margin-left: 35px;
35. }
    

We’ll also add a bit of CSS to increase usability. In case Javascript is disabled, we don’t want dead links – so we hide the links:

1. <noscript>
2. <style>
3. .printControls{
4. display: none;
5. }
6. </style>
7. </noscript>
   

Script Time

What do we want to accomplish when printing?

• add a listener to wait for a .printControl or .emailControl to be clicked.
• change the appearance of the section to be printer friendly
• grab the parts of the page that we want to print
• open up a window and size it.
• put the parts of the page that we grabbed into the window
• open up the print dialogue box
• close the window after done printing

How we are going to accomplish these things?

Add the Listener:

We put the print listener inside the DOM reading function:

1. $(document).ready(function(){
2. $(‘.printControl’).click(function(){
3. //Here we will put the printing code
4. });
5. });
   

Change the Appearance

We need to change the colors from the colorful scheme, to black and white. There are several ways we can accomplish this task. The method we’ll use is to add a class temporarily to the affected section, take the code to print, and then immediately remove the class again. We add the class by using jQuery’s CSS selector to select the divs, and then add a class to all elements inside with the children() command.

A lot of functionality is shared among applications – like sending emails or preventing spam. In the spirit of reusing the wheel instead of reinventing it, here are nine free web libraries that you can use in your next program which will dramatically increase your efficiency.

1. ReCAPTCHA

The reCAPTCHA library allows you to integrate an advanced CAPTCHA system on your website, which helps keep spam bots from posting on your website. The visual CAPTCHA also includes a helpful audio feature.

In addition to the reCAPTCHA service, the library also includes an API for the “Mailhide” service which hides emails from spammers.

The API is free and easy to implement on your site and also gives back to the community as it translates scanned books.

Download ReCAPTCHA | Get an API Key | Documentation

2. Akismet

Akismet is a free service that can be used on most small sites – or used on larger sites for a small fee. The library works by comparing comments to a database of existing spam comments provided by other users. The library can then decide to flag the comment for moderation or allow it through. Everyday the library grows and the service improves.

Implement Akismet

3. Services_JSON

JSON is a handy format for transmitting human readable data. Not everyone has made the move to PHP5 which has included JSON support since version 5.2.0. This small library enables you to implement JSON functionality into your own applications if you are not using a recent version of PHP.

View Services_JSON

4. Smarty

Smarty is a template engine which was formally a sub-project of the PHP project. Smarty provides many powerful features such as loops, variables, and a great caching system. The library has many years under its belt and is nearing its version three release.

Download Smarty | View Documentation

5. pChart

In addition to displaying text data in your application, it can also be useful to show data in a more visual format. This can be done with a slew of options like pie charts and bar graphs. pChart is a script that allows you to create charts and graphs from SQL queries or manually provided details. The script is baked by GD to create the images. There is also a main focus on the aesthetics; so it creates some beautiful work.

Download pChart | View Documentation | View Demos

6. SimplePie

SimplePie allows you to easily pull in syndicated content (like RSS feeds). It’s also been integrated with a lot of different platforms and language sets; it should be able to deal almost any feed in a variety of ways.

Download SimplePie | View Documentation | Extending SimplePie to Parse Unique RSS Feeds

7. XML-RPC PHP Library

Applications sometimes use functionality to “ping” other sites when an action has occurred (known as trackbacks). This is done by using a protocol called XML-RPC. The XML-RPC PHP library also allows you to integrate the functionality into your website.

Download XML-RPC PHP | View Documentation

8. Amazon S3

Amazon provides a nice service to work in the cloud, called “S3″. Nettuts+ even uses it to store the images seen in each article. There is a nice Amazon S3 library that doesn’t require any third party tools and allows for large file uploads.

Download Amazon S3 PHP Class

9. PHPMailer

Most applications send out an email in some form, but usually rely on the basic php mail() function. PHPMailer is an existing powerful class that allows you to send different types of emails – from basic text to rich formatted emails. These emails can also include attachments or custom headers.

Download PHPMailer | View Documentation

Source Nettuts
]]> http://nvmindmedia.wordpress.com/2009/04/07/9-extremely-useful-and-free-php-libraries/feed/ 0 nvmindmedia