Ngayxanh Web Design Resources » tools

How To Create A Simple Portfolio Site Running On Surreal CMS

Jon Phillips — Thu, 13 Aug 2009 00:27:21 +0000

I always enjoy working on new things and learn about new CMS and how they work and all. I recently connected with Cory at Surreal CMS, and I decided to write a tutorial on how to create a portfolio site and run it with Surreal CMS.

It’s pretty simple actually. In this tutorial I’ll show you how I came up with the basic design, we’ll also go through coding that layout (markup and CSS) and I’ll show you how to integrate Surreal CMS and how it can be used to run your site and your client’s sites. We’ll also go through the process of branding the CMS so that your clients see your own logo instead of the Surreal CMS logo.

Now let’s get started!

First We Need A Design

I used Adobe Fireworks to create the basic layout and graphics. You can check it out below – This is what we’ll slice, code and use to run Surreal CMS with. It’s a rather basic layout, but it’ll be perfect for the purpose of this tutorial.

Here’s the layout:

Quick Overview Of The Layout Design

I created a new document in Adobe Fireworks and set the width and height to something I’m comfortable working with. In this case I went with 1200×1000px. And I chose #EEEEEE as the background color.

In the first layer I created a rectangle and gave it a height of 130px and a width of 1200px. The rectangle has a linear gradient that goes from #70A033 to #48761C (the green rectangle at the top – which we’ll use as our body background image).

I then created the logo using Century Gothic and the nav menu is set in Helvetica. I made it uppercase and put a -1px letter spacing. Then I created a main content box and set the color to #FFFFFF (so it contrasts a bit with the #EEEEEE in the background)

Then it was just a matter of figuring out what to put in those content boxes. I figured it’d be cool to have some thumbnails of recent projects (that would open in a lightbox when clicked) and a little ‘about us‘ blurb. I used some cool free icons from Function.

And then at the bottom there’s the usual footer with a Copyright notice and all.

Slicing Up The Images

I grabbed a 1×130px sample of my green gradient box. This will become our body background image and it will repeat horizontally.

I also saved the logo and tagline as a transparent PNG file.

And then I just sliced the icons.

Coding The Layout

Our portfolio site will have 4 pages:

Home
About
Work
Contact

First of all we’re going to have to create the following files:

nav.php
footer.php
index.php
style.css

We’re going to need more PHP files for the about, work and contact pages, but for now let’s focus on writing the markup and CSS for the homepage.

Let’s Start With The Header

You’ll notice that I use a class=”editable” on many divs and paragraphs. This is because Surreal CMS will look for those regions and make them editable via the CMS admin panel. Make sure you never use a class=”editable” for anything else than what you want to show up in the CMS.

So, we’ll need to declare the DOCTYPE and then we can start coding away. Here’s the first part of the website:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS

Then the logo and navigation:


	
		
			home
			about
			work
			contact

We’ll come back to the header section later, but that’s a start.

As you can see I gave my header an ID of ‘header‘, and I gave the unordered list a class of ‘menu‘. Obvious, right?

And Then The Main Index

We’ll start the main index file with the header we just did and then do a php include to grab the nav.php file, like this:

< ?php include('nav.php'); ?>

And then we’ll need a main div (maincontent) that will hold all of our content. Right before that maincontent div I put a paragraph and gave it a class of ‘message‘. This is the box that’s between the header and the content on the homepage.

	Hello there! Welcome to surreal portfolio. This site is an example of what you can do with  Surreal CMS - an easy to use and powerful CMS that can make your life as a designer much easier! (oh hey, and this section is easy to edit via the Surreal CMS admin panel)

And of course we close this file with another php include, our footer file:

< ?php include('footer.php'); ?>

A Simple Footer

The footer is pretty simple, just a paragraph inside a div. Then we end the document with the closing body and html tags.


	Copyright 2009 - Jon Phillips & SpyreStudios - Powered by Surreal CMS.

We’re Getting Somewhere

Now we have a somewhat functional homepage (though it’s butt ugly since we didn’t write any CSS yet) Here’s what our homepage should look like now:

Here’s the homepage markup in it’s entirety (we’ll add some content and javascript soon):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS




< ?php include('nav.php'); ?>

	Hello there! Welcome to surreal portfolio. This site is an example of what you can do with  Surreal CMS - an easy to use and powerful CMS that can make your life as a designer much easier! (oh hey, and this section is easy to edit via the Surreal CMS admin panel)


	

< ?php include('footer.php'); ?>

Now We Need Content

So, before we write any CSS, let’s add some content. Let’s take the ‘maincontent’ div and add some stuff in there:

We have 2 sections:

Latest From The Portfolio
About Our Company

Since the first section to come up is the ‘Latest From The Portfolio‘, let’s create a div and add some images:

	
		
		Latest From The Portfolio

See, I also added rel=”lightbox” to my image links. We’ll need to go back in the header.php and add the JS file for this to work. I used Lightbox 2 and you can download it here and instructions are also available on the website.

Let’s go back to our header and add the JS files and the Lightbox 2 CSS file in there. Like this:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS

Now let’s do the ‘About Our Company‘ section. Another div and 2 paragraphs inside it. You’ll notice I’ve also put H2 headings for each section.

	
		
		Latest From The Portfolio
			
			
			
			
			
		
		
		About Our Company
			We're a small, yet highly focussed, team of designers and developers from Montreal, Canada. We build websites for clients from all over the world and we love what we do!
			This website is our home on the web - please take a minute to have a look around or click here to learn more about us...

Now The CSS!

I don’t think it’s necessary for me to explain the whole CSS file. Everything is pretty self explanatory: maincontent div for the main content, content1 div for the first block of content, same for the second block of content, unordered list with a class of menu for the navigation menu. Pretty easy, right? (you can always leave a comment and I’ll try my best to answer your questions)

Here’s the CSS in it’s entirety:


body {
background:#eee url(images/bodybg.jpg) repeat-x;
color:#444;
width:900px;
font-size:14px;
font-family:helvetica, arial, sans-serif;
margin:0 auto;
padding:0;
}

#header {
margin:0;
padding:0 0 15px;
}

h1 {
float:left;
width:397px;
margin:0;
padding:30px 0 20px;
}

h2 {
font:bold 26px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:0 0 20px;
}

h2.computer {
background:url(images/computericon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:8px 0 30px 56px;
}

h2.coffeecup {
background:url(images/coffeeicon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:12px 0 30px 50px;
}

h3 {
font:normal 22px georgia, serif;
color:#000;
margin:0;
padding:25px 0 12px;
}

img.right {
float:right;
background:#eee;
border:1px solid #ccc;
margin:0 0 15px 20px;
padding:10px;
}

img.left {
float:left;
background:#eee;
border:1px solid #ccc;
margin:0 20px 15px 0;
padding:10px;
}

ul.menu {
text-transform:uppercase;
float:right;
margin:0;
padding:50px 0 0;
}

ul.menu li {
font-size:18px;
font-weight:700;
letter-spacing:-1px;
display:inline;
margin:0;
padding:0 8px;
}

ul.menu li a,ul.menu li a:visited {
border:none;
background:transparent;
color:#fff;
display:inline;
margin:0;
padding:0;
}

ul.menu li a:hover,ul.menu li a:visited:hover {
background:transparent;
border:none;
color:#000;
display:inline;
margin:0;
padding:0;
}

p.message {
clear:both;
font:normal 24px helvetica, arial, sans-serif;
background:#fff;
letter-spacing:-1px;
color:#313F4C;
line-height:30px;
margin:0 0 30px;
padding:30px;
}

p.message span {
font:18px normal georgia, 'Time New Romans', serif;
color:#888;
font-style:italic;
margin:0;
padding:0 0 0 10px;
}

#maincontent {
float:left;
width:840px;
font:14px normal helvetica, arial, sans-serif;
background:#fff;
color:#313F4C;
line-height:34px;
margin:0 0 10px;
padding:30px;
}

#maincontent p {
line-height:28px;
}

ul {
line-height:18px;
list-style-type:none;
display:block;
margin:0;
padding:0;
}

ul li {
list-style-type:none;
display:block;
margin:0;
padding:0 0 8px;
}

ul li a {
list-style-type:none;
color:#556D84;
display:block;
margin:0;
padding:10px;
}

ul li a:hover {
list-style-type:none;
display:block;
color:#000;
margin:0;
padding:10px;
}

#maincontent img {
border:1px solid #ccc;
background:#eee;
margin:0 3px;
padding:8px;
}

#maincontent img:hover {
border:1px solid #bbb;
background:#ddd;
margin:0 3px;
padding:8px;
}

a,a:visited {
text-decoration:none;
color:#48771E;
}

a:hover,a:hover:visited {
text-decoration:none;
color:#000;
}

.footer {
float:left;
font-size:12px;
width:900px;
color:#999;
padding:10px 0 40px;
}

.content1,.content2 {
width:840px;
font:16px normal helvetica, arial, sans-serif;
background:#fff;
color:#333;
margin:0 0 30px;
padding:0;
}

Creating The Other PHP Files

Now that we’re done with the header, navigation, main index, footer and CSS, let’s create our work, about and contact pages.

This is actually very easy: Simply duplicate the index.php file 3 times, rename to about.php, work.php and contact.php and you’re almost done. Open up those 3 new files in your favorite editor and remove the ‘message’ paragraph and insert some lorem ipsum in the maincontainer div. (at the end of the tutorial you have a download link so you can grab all the files from this tutorial)

Creating Your Surreal CMS Account – PROMO CODE!

We’ve partnered with Surreal CMS to give you guys and gals a little something. You can create a free account with Surreal CMS but there are some restrictions. With the upgraded account you’d be able to manage an unlimited number of websites, use your own custom logo and color scheme (clients will love this), and access the CMS via your own domain at cms.yourdomain.com instead of via surrealcms.com. Those features are not available with free accounts.

The Designer/upgraded account costs $25 per month, but Cory agreed to give the first month free to readers and visitors of SpyreStudios. You can read more about it and grab the promo code by visiting this page (this offer is valid up till September 31st).

Integrating Surreal CMS To Our Design

Now that we have a working website, let’s work on the fun (and actually pretty easy) stuff

Surreal CMS really is a simple, no-fuss CMS. All you have to do to make a region editable (I mentioned this earlier) via the CMS is to add a class=”editable” to an element. It’s that easy! You can also add a title=”something here” to elements, though if an element already has an ID, you won’t need to add the title attribute.

Step By Step

1- Go to Surreal CMS and signup. Once you’re done with the signup process, login with your email and password. You’ll be on the ‘My Websites’ page. Click on ‘Add a Website’ and enter your FTP information, test the connection and browse to your website root. The website root is where you will upload your website files, in most cases that’s the main folder, also called ‘root directory’.

Click ‘Save Changes‘ when you’re done.

2- Click on the website URL and then on ‘Enable Pages‘. Then select the pages you’d like to enable. Make sure you actually upload those files manually to your website root directory. For this tutorial I uploaded all my php files, my css file, the js folder that contains the lightbox script, a css folder that contains the lightbox css, and my images folder. When you’re done, you’ll be able to change the display name of the file so it’s easier to work with in the CMS.

3- Since we put the class=”editable” to many of our divs and paragraphs, we’ll be able to edit those regions via the admin panel. Next to each of the file names you’ll see an ‘Edit‘ link, click on the one next to the index.php. It’ll load the Editor. There you will see the content regions you defined as ‘editable’, you’ll also have a ‘publish to web’ button which, when clicked, will update your html or php file. And you can also edit your markup by clicking on the ‘Edit Content Regions’ button. What that means is once you’ve uploaded your files, you don’t have to re-upload anything, you can manage everything via Surreal CMS.

That’s basically it. You can manage your whole site from within the Surreal CMS admin. Want to add a new editable region? Easy! Just load up the ‘Content Region Editor‘ and add the class=”editable” to the element you want to edit with Surreal CMS.

The class=”editable” can be added to a number of html tags (more than this list – those are some of the most popular ones anyway):

blockquote
div
h1 — h6
img
ol, ul
p
pre
span
table, td, th

4- You can even change the title and meta description and keywords via Surreal CMS. Just click on ‘Properties‘

Adding Editors

This feature is pretty cool. Say you’re building websites for clients and you want them to be able to edit their site themselves (that’s the whole point right?) Simply add an editor, edit the welcome message, and voila! You’re done! Your client will be able to easily edit the content of the pages the same way you would via the Surreal CMS admin.

Use Surreal CMS With Your Own Domain

That part is pretty straight forward. This is if you would like to be able to access the CMS via your own domain instead of the default edit-content.com website.

Login to your web hosting account
Navigate to the DNS (or Name Server) Management section
Select a domain/sub-domain that you want to use to access the CMS
Create a CNAME record that points to edit-content.com

Branding Surreal CMS With Your Own Logo And Color Scheme

Of course if you use Surreal CMS to build websites for your clients you’ll want them to see your logo and color scheme instead of the default colors and logo. Click on the ‘My Account tab at the top, upload your logo and change the color scheme. It’s that easy. You can also change your contact information and password via this page.

Here’s the default design of the Surreal CMS admin:

Here’s my own:

It’s A Wrap!

That concludes our tutorial on creating a portfolio site running on Surreal CMS. I hope you liked it! Here’s our final result: Surreal Portfolio.

You can download the files from this tutorial here (downloaded 83 times already!).

If you would like to try out Surreal CMS, remember that you can get a Designer Account for the first month for free (the offer is valid up till September 31st). The Designer/Upgraded account enables features that are not available with the free account!

Cheers!

Windows 7 Keyboard Shortcuts to Increase Productivity

Kay — Tue, 30 Jun 2009 13:45:40 +0000

via Wikipedia

With all the less pleasant verdicts about Vista, Windows 7 is perhaps PC users’ next best news. Codenamed Blackcomb, this new Microsoft operating system is surely a successor over it’s predecessor Windows XP and definitely Vista. With Microsoft to end their support for Windows XP in 2014, we figured Windows 7 will be completely taking over things in the next year or so.

If you are a Windows users it’s probably time for a change, or at least tryout this new operating system. Here are some shortcut keys to help improve your productivity and user experience with Windows 7. Full list after jump.

General Windows 7 Shortcuts

Shortcut	Description
Win + UP Arrow	Maximize the current window
Win + Down Arrow	Restore down or minimize current windows
Win + Left Arrow	Dock the current window to the left half of the screen
Win + Right Arrrow	Dock the current window to the right half of the screen
Win + [number]	Activate and run the program pinned on Windows 7 Taskbar, running program won’t be affected
Win + Home	Minimize all but the current window
Win + Space	Makes all windows transparent so you can see through to the desktop
Win + Pause/Break	Open System Properties
Win + Tab	Flip Aero 3D [press Tab to cycle between Windows]
Win + B	Move focus to notification tray (the right-most portion of the taskbar)
Win + D	Show/Hide desktop
Win + E	Windows Explorer is launched
Win + F	Search
Win + G	Bring all gadgets on top and foreground
Win + L	Lock Computer
Win + M	Minimize all windows
Win + P	Open the projection menu (generally used for laptops connected to projectors)
Win + R	Run Command is launched.
Win + S	OneNote Screen Clipping Tool
Win + T	Show preview thumbnail of running applications in Windows Taskbar one by one without mouse over
Win + X	Mobility Center
Win + #	Quicklaunch
Win + =	Magnifier
Win + [+/-]	Enables the magnifier and zooms in/out
Win + Shift + Up Arrow	Maximize vertical size
Win + Shift + Down Arrow	Restore vertical size
Win + Shift + Left Arrow	Jump to left monitor
Win + Shift + Right Arrow	Jump to right monitor
Win + Shift + M	Undo all window minimization
Win + Shift + T	Cycles backwards
Win + Ctrl + F	Opens the Active Directory Find Computers dialog
Ctrl + Right Arrow	Move the cursor to the beginning of the next word
Ctrl + Left Arrow	Move the cursor to the beginning of the previous word
Ctrl + Up Arrow	Move the cursor to the beginning of the previous paragraph
Ctrl + Down Arrow	Move the cursor to the beginning of the next paragraph
Ctrl + Click	A pinned taskbar icon to cycle through the program’s open windows (e.g. IE)
Ctrl + Win + Tab	Persistent flip 3D
Ctrl + Shift with an arrow key	Select a block of text
Ctrl with any arrow key + Spacebar	Select multiple individual items in a window or on the desktop
Ctrl + Shift + Esc	Open Task Manager directly
Ctrl + Shift + N	Create new folder

Shortcuts for Ease of Access

Shortcut	Description
Right SHIFT for eight seconds	Turn Filter Keys on and off
Left ALT+left SHIFT+PRINT SCREEN (or PRTSCRN)	Turn High Contrast on or off
Left ALT+left SHIFT+NUM LOCK	Turn Mouse Keys on or off
SHIFT five times	Turn Sticky Keys on or off
NUM LOCK for five seconds	Open the Ease of Access Center
Win + U	Cycle through all open windows

For: Windows Explorer

Shortcut	Description
Alt + Left Arrow	Go back
Alt + Right Arrow	Go forward
Alt + Up Arrow	Go up a directory
Alt + Enter	Open the Properties window of the current selection
Alt + Spacebar	Open the shortcut menu for the active window
Alt + F4	Close the active window
Alt + Tab	Switch to previous active window
Alt + Esc	Cycle through all open windows
Alt + D	Move focus to address bar
Alt + P	Show/hide the preview panel
Ctrl + N	Open a new window
Ctrl + Mousewheel	Change the view type (extra large, small, list view, detail, etc.)
Num Lock + Asterisk (*) on numeric keypad	Display all subfolders under the selected folder
Num Lock + Plus Sign (+) on numeric keypad	Display the contents of the selected folder
Num Lock + Minus Sign (+) on numeric keypad	Collapse the selected folder

For: Taskbar Modifiers

Shortcut	Description
Shift + Click on icon	Open a new instance
Middle click on icon	Open a new instance
Ctrl + Shift + Click on icon	Open a new instance with Admin privileges

For: Dialog Box

Shortcut	Description
Ctrl + Tab	Move forward through tabs
Ctrl + Shift + Tab	Move back through tabs
Shift + Tab	Move back through options
Tab	Move forward through options
Alt + underlined letter	Perform the command (or select the option) that goes with that letter
Enter	Replaces clicking the mouse for many selected commands
Spacebar	Select or clear the check box if the active option is a check box
Arrow keys	Select a button if the active option is a group of option buttons
Backspace	Open a folder one level up if a folder is selected in the Save As or Open dialog box

For: Photo Gallery

Shortcut	Description
Ctrl + F	Open the Fix pane
Ctrl + P	Print the selected picture
Ctrl + I	Open or close the Details pane
Ctrl + Period (.)	Rotate the picture clockwise
Ctrl + Comma (,)	Rotate the picture counter-clockwise
Ctrl + Mouse scroll wheel	Change the size of the picture thumbnail
Ctrl + B	Best fit
Ctrl + E	Search for an item
Alt + Left Arrow	Go back
Alt + Right Arrow	Go forward
Plus Sign (+)	Zoom in or resize the picture thumbnail
Minus Sign (-)	Zoom out or resize the picture thumbnail
Shift + Delete	Permanently delete the selected item
Enter	View the selected picture at a larger size

Logging In And Out Windows 7

Shortcut	Description
Win + Right Arrow + Enter	Shutdown
Win + Right Arrow + Right Arrow + R	Restart
Win + Right Arrow + Right Arrow + S	Sleep
Win + Right Arrow + Right Arrow + W	Switch users

45 Free Useful Thumb Drive Applications

Kay — Thu, 07 May 2009 14:00:57 +0000

Thumb drives were once used to store files and make data portable, but due to the rapid increase in storage capacity over the pass few years these gadgets now have a bigger role. Some even run the entire operating system on a thumb drive.

The more we rely on thumb drives, the more demands we have in terms of tools and applications to facilitate the transfer and security of files. If your thumb drive plays an important role in your daily job, here are some you might be interested.

Synchronization And Backup

Microsoft USB Flash Drive Manager – Backup and Restore USB Thumb Drive Data

Microsoft USB Flash Drive Manager allows you to backup and restore presentation, pictures, songs and applications from and to USB Flash Drive devices and take them with you. Use USB Flash Drives to store personal data, to keep your network configuration and to share information with your friends. Microsoft USB Flash Drive .

xPortClone – Backup Removable Devices

xPortClone is a simple but effective tool that allows you to backup files from a removable device to your hard drive. It can be used with iPods, USB drives or even CDs or DVDs.

Toucan – Sync, Backup & Secure

Toucan is a small utility allowing you to synchronise, backup and secure your data with more options than the built in suite utilities. It is split up into 7 tabs, allowing you to easily find the function that you want.

SyncToy – Synchronizing Files and Folders

SyncToy, a free PowerToy for Microsoft Windows, is an easy to use, highly customizable program that helps users to do the heavy lifting involved with the copying, moving, and synchronization of different directories. Most common operations can be performed with just a few clicks of the mouse, and additional customization is available without additional complexity.

Recovery Tools

Roadkil’s Unstoppable Copier – Recovers Files from Disks

Unstoppable Copier is useful to copy files from any damaged media sources, like portable thumb drive as it recovers files from disks with physical damage. The program will attempt to recover every readable piece of a file and put the pieces together.

Undelete Plus – Data Recovery

Undelete Plus is a quick and effective way to restore accidentally deleted files. It can also recover files that have been emptied from the Recycle Bin, permanently deleted files within Windows using the Shift + Delete, and files that have been deleted from within a Command Prompt.

Recuva – File Recovery

Recuva is a freeware Windows utility to restore files that have been accidentally deleted from your computer. This includes files emptied from the Recycle bin as well as images and other files that have been deleted by user error from digital camera memory cards or thumb drive. It will even bring back files that have been deleted by bugs, crashes and viruses!

SoftPerfect File Recovery – Recover Accidentally Deleted Files

SoftPerfect File Recovery is a tool to recover accidentally deleted files from hard disks, USB flash drives, CF and SD cards and other storage media.

Portable Platforms

PortableApps.com Suite and Platform

The PortableApps.com Suite and Platform lets you carry your favorite computer programs along with all of your bookmarks, settings, email and more with you. Use them on any Windows computer. All without leaving any personal data behind. As soon as you connect your thumb drive into a computer, Portable Apps will open up automatically.

U3 Smart Drive – Store Data & Carry Software Applications

U3 smart drive allows you to carry your software on the same flash drive that carries your files. You can plug it into any PC and work, play a game, message friends, send email, edit photos and more. When you unplug it, it leaves no personal data behind.

PStart

PStart is a simple tray tool to start user defined applications. Designed to run portable applications (like portable Firefox & Thunderbird), you can start anything runnable from USB key devices or removable disks.

CodySafe – A Simple Data Carrier

CodySafe is a software tool that turns any portable drive from a simple data carrier to a computer-on-stick. Carry your computer programs with you, manage them, launch them on any PC, and leave no footprint behind. The management of your portable documents, multimedia files and pictures has never being that easy.

Mojopac – Turn USB Thumb Drive into A Portable Computing Environment

MojoPac, a friendly technology that allows you to take you entire PC on any storage device. MojoPac turns any USB 2.0 storage device, such as iPods, USB flash drives, portable hard drives, USB-enabled cell phones, and USB-enabled digital cameras, into a portable computing environment.

XAMPP – Portable Web Server

XAMPP is a Web Server package that contains Apache, MySQL, PHP and Perl. XAMPP enables it’s user to host a Website, Blog, CMS or try out PHP code and test MySQL database structures all from a testing or production environment.

Security Tools

Dr.Web CureIt

Dr.Web CureIt is a standalone anti-virus and anti-spyware scanner that scans your PC for viruses, trojans, adware, spyware, hack tools, rootkits, and other malware. The program does not require an installation and can be run from a USB drive.

Portable Antivirus

Portable Antivirus is a FREE portable antivirus application that is capable to remove certain variants of virus, Trojans, ad-ware and spy ware from your computer.

ClamWin Portable – Antivirus

ClamWin Portable is the popular ClamWin antivirus packaged as a portable app, so you can take your antivirus with you to scan files on the go.

PC Repair System – Assemble a PC repair kit

PC Repair System provides a variety of free and/or open-source tools for file recovery, anti-virus, anti-spyware, system info and system maint. There are 37 applications in total.

Eraser Portable – Scurely Erase Data

Eraser Portable is a secure data removal tool that runs directly from your iPod, USB thumbdrive, portable hard drive or any other portable media.

TrueCrypt – USB Encrytion Tool

TrueCrypt encrypts an entire partition or storage device such as USB flash drive or hard drive.

FreeOTFE – USB Thumb Drive Encryption Tool

FreeOTFE is a free, open source, “on-the-fly” transparent disk encryption program for USB thumb drive and PC. These disks operate exactly like a normal disk, with the exception that anything written to one of them is transparently, and securely, encrypted.

KeePass – Secure USB Thumb Drive Data

KeePass Portable is the popular KeePass Password Safe packaged as a portable app, so you can securely carry your email, internet and other passwords with you. You can place it on your USB flash drive, iPod, portable hard drive or a CD and use it on any computer, without leaving any personal information behind.

Crypto Anywhere – Encryptor

Crypto Anywhere is small enough to fit on a single floppy or USB key chain drive and is very easy to use. If you run Crypto Anywhere from a floppy disk or USB drive, you can encrypt your email without even installing software on your workstation.

File & Folder Unlocker – Lock Your Thumbdrive

File & Folder Unlocker is a powerful yet easy-to-use system utility that gives you complete control over the locked files and folders on your computer.

Blue Micro USB Flash Drive – PC Logon Admin

Blue Micro USB Flash Drive turns your existing pendrive or flash drive into a key to logon to your pc. This makes it easier for users to manage their computer account passwords. This software creates a encrypted code on your pendrive, only understood by this software. This software can be installed on windows xp or 2000 only.

Operating Systems

Damn Small Linux

DSL was originally developed as an experiment to see how many usable desktop applications can fit inside an USB thumb drive. DSL has a nearly complete desktop, and a tiny core of command line tools. All applications are chosen with the best balance of functionality, size and speed.

Puppy Linux

With Puupy Linux you’re able to install and run the OS off of a USB flash drive. Applications such as SeaMonkey, AbiWord, Gnumeric, and Gxine/xine are included.

Slax – Your Pocket Operating System

Slax is a modern, portable, small and fast Linux operating system with a modular approach and outstanding design. Slax provides a wide collection of pre-installed software for daily use, including a well organized graphical user interface and useful recovery tools for system administrators.

Crunchbang Linux

CrunchBang Linux is an Ubuntu based distribution featuring the lightweight Openbox window manager and GTK+ applications. The distribution has been built and customised from a minimal Ubuntu install.

Mac-on-Stick

Mac-on-Stick is a project that explains how to load Mac OS Classic 7.0.1 onto a portable device using the minivmac emulator. It takes a few steps and is more appropriate for the technically-minded, but is quite an interesting experiment.

Office Tools

OpenOffice.org

OpenOffice.org Portable is a complete office suite — including a word processor, spreadsheet, presentation tool, drawing package and database.

Tiny USB Office

Tiny USB Office lets you to create rich-text word processing documents, share files across multiple computers, transfer files, create MS Excel compatible spreadsheets, comma-delimited database files, email your contacts, talk to your friends or co-workers on MSN, create pdf files, or securely encrypt or delete files.

Darik’s Boot And Nuke

Darik’s Boot and Nuke (”DBAN”) is a self-contained boot disk that securely wipes the hard disks of most computers. DBAN will automatically and completely delete the contents of any hard disk that it can detect, which makes it an appropriate utility for bulk or emergency data destruction.

Mazzick – Mouse Gestures on Your Thumb Drive

Mazzick is a simple mouse gesture utility that you can carry on your USB thumb drive. Using Mazzick is simple: just invoke it using one of the default shortcuts (like holding Shift, for example), then draw the gesture you want.

VLC Media Player Portable

VLC Media Player Portable is the popular VLC media player packaged as a portable app, so you can take your audio and video files along with everything you need to play them on the go.

TiddlyWiki – Non-linear Personal Web Notebook

TiddlyWiki is a single html file which has all the characteristics of a wiki – including all of the content, the functionality (including editing, saving, tagging and searching) and the style sheet. Because it’s a single file, it’s very portable – you can email it, put it on a web server or share it via a USB stick.

More Tools

USB AutoRunner

With USB AutoRunner you can have applications or documents autorun when you insert your USB device. When you insert your USB device into a computer, your chosen application or file will automatically open.

DCoT Menu System – Create USB Shortcuts Folder

A system to create a shortcuts folder at the root of my USB drive.

Flash Drive Reminder – Never Forget Your Thumb Drive

Flash Drive Reminder is an utility that pops up a reminder if you try and log off Windows without removing your flash drive. This program adds an entry to the AutoPlay dialog that pops up when you insert a flash drive into a computer.

USBDeview – Lists All USB Devices

USBDeview is a small utility that lists all USB devices that are currently connected to your PC or have been connected to it in the past. Along with the device name and description, it displays the the serial number (if available), date the device was added and last connected, VendorID and other information.

Help! I’m Lost! Autorun Script

A program called “Help! I’m Lost!” on the drive, that a finder just can’t get around opening. The program opens a message box with your personal “I’m lost” message.

EjectUSB

EjectUSB is designed to be a simple utility to close all programs running from a specified drive or folder and then attempt ejection if a drive was specified.

USB Disk Ejector

USB Disk Ejector allows you to quickly remove USB devices in Windows. It was originally designed to remove only USB pen drives but will now eject any USB device. It can be run as a non-visual command line program or a normal gui program.

Disable USB Drive

Disable USB Drive keeps people from walking up to a PC and copying data off with a USB key, but allows you to keep your scanner, keyboard, and mouse working.

BootIt – Flip Removable Bit

BootIt flip the flashdrive removable media bit so flashdrive can be detected by Windows as a fixed disk.

Evolution of Photoshop: 1988 – 2009

hongkiat — Mon, 04 May 2009 14:00:10 +0000

Adobe Photoshop has always been one of the greatest (if not the best) software when it comes to manipulating and editing image. It all started off in 1987 with a Mac application call Display, created by Thomas Knoll. With almost two decades worth of changes and improvements, you almost can’t imagine how the first version of Photoshop would look like by looking at the Photoshop you have on your desktop.

In this post, we attempt to bring you back in time to look at how the very first Photoshop look like, then we scan through each evolution of Photoshop to the latest Adobe Photoshop CS4 in market today.

Application Icon

	Adobe Photoshop .63 (1988)
	Adobe Photoshop .87 (1989)
	Adobe Photoshop 1.0 (1990)
	Adobe Photoshop 2.0 (1993)
	Adobe Photoshop 2.5 (1993)
	Adobe Photoshop 3.0 (1995)
	Adobe Photoshop 4.0 (1996)
	Adobe Photoshop 5.0 (1998)
	Adobe Photoshop 5.5 (1998)
	Adobe Photoshop 6.0 (2000)
	Adobe Photoshop 7.0 (2002)
	Creative Suite 1 (2003)
	Creative Suite 2 (2005)
	Creative Suite 3 (2007)
	Creative Suite 4 (2009)

Welcome Splash / About Screen

Adobe Photoshop .07 (1988)

Adobe Photoshop .63 (1988)

Adobe Photoshop .87 (1989)

Adobe Photoshop 1.0 (1990)

Adobe Photoshop 2.0 (1993)

Adobe Photoshop 2.5 (1993)

Adobe Photoshop 3.0 (1995)

Adobe Photoshop 4.0 (1996)

Adobe Photoshop 5.0 (1998)

Adobe Photoshop 5.5 (1998)

Adobe Photoshop 6.0 (2000)

Adobe Photoshop 7.0 (2002)

Creative Suite 1 (2003)

Creative Suite 2 (2005)

Creative Suite 3 (2007)

Creative Suite 4 (2009)

Toolbars

Adobe Photoshop .63 (1988)	Adobe Photoshop .87 (1989)	Adobe Photoshop 1.0 (1990)	Adobe Photoshop 2.0 (1993)	Adobe Photoshop 2.5 (1993)
Adobe Photoshop 3.0(1995)	Adobe Photoshop 4.0(1998)	Adobe Photoshop 5.0(1998)	Adobe Photoshop 5.5(1998)	Adobe Photoshop 6.0 (2000)
Adobe Photoshop 7.0(2002)	Creative Suite 1(2003)	Creative Suite 2(2005)	Creative Suite 3(2007)	Creative Suite 4 (2009)

Workspace

Adobe Photoshop 0.63 (1988)