Archive

Archive for the ‘Internet Directories’ Category

Protecting Your PC on the Internet

May 9th, 2009 No comments

With the onslaught of computer hackers, scammers, and viruses that are prevalent around the Internet, it is important to know how and why you should install a firewall. This is your first line of defense between your computer and data that is entering it. With one, you can avoid dangerous attacks that can wipe out your data or steal personal information.

Since there are a wide variety of firewalls available, including those from major corporations such as Microsoft, you first need to determine what kind of firewall your PC requires.

A firewall is likely to be set up and ready to use if the computer came installed with the Microsoft XP or Vista operating system though you might have to tweak it if you are using broadband telephony with software offered by various Voip companiesor other addons to your PC. Check that it is turned on and working properly. Purchase your own software if you do not have one of these newer operating systems. Owners of Microsoft XP may still want to purchase separate firewall software as the XP version doesn’t get great reviews.

The many products available, include Norton, AVG, and McAfee and can be purchased in store or downloaded from the internet. Depending on the sophistication of the software, prices will vary but there are also plenty of low cost versions available, even from the big name companies.

The functions that you need, such as file and printing sharing, must not be blocked by the program. Settings can be configured during installation or at a later date using the documentation provided.

Parts of the Internet may be restricted by a firewall. Awareness of how you connect is important as if you use a local area network or a router, this could happen. It is difficult to access secured networks when you have installed a firewall. If you work from home or connect to a company computer, you need to coordinate with the IT department in your company before installing a firewall since they may have specific instructions concerning how to configure its settings so you are still able to connect to them.

Top 6 Internet Explorer Extensions for Web Developers

March 21st, 2009 No comments

For Web developers wanting to use Micosoft’s Internet Explorer as their primary browser, there’s some terrific IE extensions/add-ons that can aid you analyze, troubleshoot, debug, and speed up development of web pages.

Here, you’ll find the top 6 free IE extensions for web developers.

Where appropriate (and available), you’ll also find related resources, their download page, and documentation.

1. Internet Explorer Developer Toolbar

internet_explorer

The

Internet Explorer Developer Toolbar, developed by Microsoft, offers several features and options to aid web development and design.

It shares many features that we love from Chris Pederick’s Firefox Web Developer extension such as: outline div elements, mark-up validation tools, ruler and measuring tools, resizing the browser window precisely (i.e. to 800×600), and all that good stuff.

It’s an essential tool for analyzing and troubleshooting web pages.

Some features:
  • A Document Object Model inspector pane
  • Multiple validation – automatically opens validation services in multiple browser tabs at the same time
  • Syntax coloring of source code
Related Resources:

    "Using Microsoft IE Developer Toolbar" by Arkady Lesniara
    "15 Seconds: An Introduction to the Internet Explorer Developer Toolbar"

  • by John Peterson

Download:

  • IE Developer Toolbar on Microsoft Developer Center
2. Web Accessibility Toolbar

web_accessibility

The Web Accessibility Toolbar, developed by Vision Australia, was designed specifically to assess and analyze the accessibility of a web page, but it’s very useful regardless of whether you’re testing for accessibility or not.

Some features:
  • Greyscale function – renders pages into grayscale so that you can test color contrast.
  • Color Contrast Analyzer – a more detailed test for color blindness accessibility, which provides an analysis of the foreground and background color for "color visibility" as suggested by the W3C consortium.
  • Test Styles – which opens up a dialog box where you can edit existing CSS styles on a web page.
Related resources:
  • "Using the Web Accessibility Toolbar" on webcredible: user research & design
  • "Using the AIS Web Accessibility Toolbar" on WebAim: Web Accessibility in Mind

Download:

  • Web Accessibility Toolbar from Vision Australia

Documentation:

  • Toolbar Functions
3. HttpWatch (Basic Edition)

httpwatch

HttpWatch is an HTTP data viewer and debugger extension by Simtech Limited. HttpWatch comes in two editions: Basic and Professional.

The Basic edition displays plenty of information regarding HTTP data and web page performance such as status codes, total elapsed time it takes a web page to load, amount of downloaded data, and HTTP compression savings (if you use data compression).

Some features:
  • Page Level Time Chart – gives you a visual representation of the web page’s performance
  • Errors Log Summary – notifies you of any HTTP errors encountered.

Download:

  • HttpWatch from HttpWatch official website

Documentation:

  • HttpWatch Features Summary
4. WebCollect

web_collect

WebCollect is a simple web content capture tool. It allows you to take and save screenshots easily (great tool for design mock-ups and presentation). It also has an eyedropper tool which allows you to sample colors from a web page to extract their color values (in RGB, Dec, and Hex).

Some features:
  • Copy full screen – enabling you to copy a web page without having to crop or resize the image
  • Capture Rectangle Area – which allows you to copy just parts of a web page.
  • Support for most digital image file types such as JPG, PNG, and GIF.

Download:

  • WebCollect Toolbar 3.2 from CNET Download.com
5. Fiddler2

fiddler2

Fiddler2 is a web debugging proxy add-on whichs logs HTTP(S) traffic data. It’s very robust in features and is customizable to your needs.

Some features:
  • Session Inspector – which also provides you with headers and web forms data.
  • Set break-points – so that you can experiment with inbound/outbound data.
  • Performance Statistics – including world-wide estimated download times
Related resources:

"Performance Tuning with Fiddler" on MSDN.
FiddlerScript Editor – allows you to edit script rules on fiddler.

Downloads:

Fiddler2 from offical website
Microsoft .NET framework

 

6. Web Development Helper

webdevelopment

The Web Developer Helper is an IE extension targeted towards ASP.NET and JavaScript/Ajax Developers. It has a special set of tools for ASP.NET development.

Photoshop Droplets and ImageMagick: Tools for batch image processing

March 18th, 2009 No comments

photo You have a picture of a stuffed penguin. It’s not just any stuffed penguin, though. It’s the  latest and greatest in stuffed penguin technology, the hot item that everyone will want under their Christmas trees this year. You’ll make a fortune with this penguin, if only you can start selling it online in time for the holidays. “But wait!”, you say. “I can’t just put this picture on the Internet looking like that! It’s too big! It needs a border! It needs a drop shadow! What shall I ever do?”

OK, maybe not. Your penguin won’t lead to fame and fortune, and you can easily edit your image with Photoshop. So let’s change the scenario a bit: your client has a picture of a stuffed penguin, and a picture of a stuffed owl, and a stuffed gopher, and a stuffed wallaby, and a stuffed flamingo… You get the idea; hundreds of pictures from their Stuffed Animals from Around the World catalog.

Before you can load all of the pictures into your client’s fancy new e-commerce site, you need thumbnails with simple borders and drop shadows for each and every image. Simple, yes, but tedious. And you’ll get to do it all over again when they release next year’s line of stuffed animals.

Photoshop Droplets Save the Day

Fortunately, Photoshop includes a helpful tool for processing large batches of images: droplets. By creating a droplet, you can tell Photoshop to perform the same set of operations for every file in a folder.

Note: The instructions below are for Photoshop CS2. Menu items may have moved or had their names changed slightly in other versions of Photoshop.

Step 1: Plan Your Action

Before you create your droplet, carefully plan out what you want it to do, sparing no detail. Start by specifying what you have and what you want the results to look like.  In our case, we start with folder full of product images of various sizes. We want to end up with another folder full of product images that all have the following characteristics:

  • No more than 200px wide and 200px tall
  • A 1px grey border
  • A 5px drop shadow cast to the bottom right of the image on a white background
  • JPEG compression

Open up your first image and determine exactly what you need to do with that image to get the results you want.

  1. Resize the image to fit within your maximum dimensions, minus 5px in each direction to allow room for the shadow.
    1. Select File->Automate->Fit Image.
    2. Set the width and height constraints to 195px.
  2. Add a border to the image.
    1. Select the whole image (Select->All).
    2. Modify your selection so you have the border selected.
      1. Select->Modify->Border, and set the width to 1px.
    3. Fill the border with your chosen color
      1. Edit->Fill.
      2. Use->Color… and set the color to #808080.
    4. Deselect everything
  3. Add a drop shadow to the image.
    1. Make the background into a layer.
    2. Add the Drop Shadow layer style.
    3. Set the angle to 135 degrees, the distance to 3px, and the size to 5px (this will fit within our extra 5px).
    4. Resize the canvas, adding 5 pixels to the right and bottom, so the shadow will be visible.
  4. Flatten the image.
  5. Save the image in a different folder.
  6. Close the image.
Step 2: Record Your Action

You can save your process as an action, which is simply a series of steps that you record and then play back as many times as you like. The process of recording a new action is quite simple.

  1. Open one of the images you want to edit.
  2. Open the Actions palette (Window->Actions).
  3. Create a new set of actions, called “My Actions” (or anything you want).
  4. Create a new action in that set, called “My Neat Action” (or, again, anything you want).
  5. Make sure Photoshop is recording (if not, press the “Begin Recording” icon in the Actions palette), then go through the steps listed above to modify your image, save it, and close it.
  6. Press the “Stop Playing/Recording” icon in the Actions palette.
Step 3: Create a Droplet

Now that you have your action recorded, it’s time to save it as a droplet. Select File->Automate->Create Droplet… There are a few options you’ll need to set, such as the file name for the droplet and the location to save your modified images. It is very important that you check the “Override Action ‘Save As’ Commands” box. This will let the droplet save the files with the name and location you specify, rather than the name and location specified in the action you recorded earlier. When you click “OK”, Photoshop will create an EXE file. You use it by dragging images or folders onto that file’s icon.

 

Step 4: Let the Droplet Work Its Magic

You now have your droplet all set up and ready to go. Now, simply take a folder full of images and drag it onto the droplet file you created. Photoshop will run the set of actions you recorded earlier for each image in that folder, sending the results to the folder you specified when you created the droplet file.

A special note for Windows Vista users: when you first try to run a new droplet, you might get an error message from Windows, saying “Adobe Photoshop CS2 has stopped working.” If you get this error, Windows’ User Access Control restrictions are preventing the droplet from running properly. To fix it, right click on the droplet file and choose “Properties”. On the Compatibility tab, check the box labeled “Run this program as administrator”. You’ll have to click the “Allow” button every time you start a new batch.

Do More with ImageMagick

At this point, you’ve impressed your client with your quick turnaround on the project. So much so that you get an even bigger job. More than just stuffed animals, their full catalog includes stuffed fruits, stuffed rocks, stuffed small appliances. You name it, they stuff it. You need to prepare tens of thousands of images for your client. Try running that folder through your droplet and you’ll come back to your computer a few hours later to find that Photoshop has crashed. There is no hard and fast limit to how many files you can process at once; but the more you have, the more likely it is that Photoshop will get overwhelmed and stop responding. If you need to process extremely large batches of images, you might want to consider using ImageMagick.

What is ImageMagick?

Like Photoshop, ImageMagick is software for creating and editing raster images, featuring a rich set of tools. Unlike Photoshop, you’ll do most of your work in ImageMagick outside of the comfortable embrace of a graphical user interface. Instead, you open a command line, tell ImageMagick what you want it to do, and it goes about doing that without the need to display the images to you. ImageMagick is freely available open source software, with versions for Windows, OS X, and Unix. Chances are, if you have shell access to your web host, you’ll find ImageMagick already installed there.

Working with Files

You call ImageMagick from the command line using the command “convert“, along with various options to tell it exactly what to do. We’ll start by going through the commands necessary for each of the modifications we want to make to our image.

  1. Resize the image to so it is no larger than 192px x 192px.
    convert input.png -resize 192x192 output.png
  2. Add a 1px grey border to the image.
    convert input.png -bordercolor "#808080" -border 1 output.png
  3. Add a dropshadow to the image.
    convert input.png »
        ( +clone -background black -shadow 75x2+2+2 ) »
        +swap -background white -layers merge +repage -chop 2x2 output.png
  4. Save as a JPEG
    convert input.png output.jpg

Now that we know exactly how to do the individual step, we can mash everything together into one command to turn our original penguin into the thumbnail we’re after:

convert input.png -resize 192x192 -bordercolor "#808080" -border 1 »
    ( +clone -background black -shadow 75x2+2+2 ) +swap »
    -background white -layers merge +repage -chop 2x2 output.jpg

We need an easy way to apply the command to every file in our folder. The simplest way is to create a loop that grabs every file name in the folder (”%f” in the example below) and calls our command for that file name, creating an output file with the same name in a different directory (”../out/%~nf.jpg“).

This example works in a Windows command line; it can be modified to work on OS X or Unix:

for %f IN (*) do convert %f »
    -resize 192x192 -bordercolor "#808080" -border 1 »
    ( +clone -background black -shadow 75x2+2+2 ) +swap »
    -background white -layers merge +repage -chop 2x2 ../out/%~nf.jpg

Written exclusively for WDD by Jonathan Brinley.

Have you worked with ImageMagick or Photoshop droplets? Share your experiences below.

Super Mario Brothers Matryoshka Dolls

March 18th, 2009 No comments

Super Mario Brothers is making another amazing appearance in a beautiful Matryoshka Doll set (aka Russian Dolls) that bring the amazing characters to light in beautiful vintage looking art.

super mario matryoshka dolls 2 Super Mario Brothers Matryoshka Dolls

super mario matryoshka dolls 3 Super Mario Brothers Matryoshka Dolls

These Matryoshka Dolls combine beautiful colors and the Mario characters into one great gaming toy. We can see in the images Mario, which definitely fits as this kind of doll with his belly, Luigi, the Princess, Bowser, Toad, and a few more that get their own celebrity spotlight.

super mario matryoshka dolls 4 Super Mario Brothers Matryoshka Dolls
This set was created by Cmsturmhous, who also provided a lot of different views to show for this great creation. Mario doesn’t die off whatsoever, and with such art continuing to show itself…I don’t really hear anyone complaining.

 

dols

Ajax Communication Suite with Webmail and IM

March 18th, 2009 No comments

Claros inTouch is an Ajax communication suite with key features such as webmail, address book, post-it notes, built-in instant messenger and rss reader. It is an open source web application which features built in spam protection and instant messaging capabilities together with web 2.0 technologies.

It supports both Pop3 and IMAP protocols. Claros inTouch requires a JSP/Servlet container(such as Apache Tomcat), Sun JDK 1.4 or 1.5 and MySQL to run.

 

Claros inTouch

Hello world!

March 3rd, 2009 No comments

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!