This is an example how to search your blog as a query in Google. But have you ever wanted to learn how to make your own ‘Search Tools’ for Firefox so that you can look-up information on your own blog quickly, from anywhere on the internet? Or do you want to hack Google Custom search to improve your earnings and it’s functionality?

It turns out making a search tool is relatively simple. In fact using this tool, you can make one in about five minutes. The trick is to figure out what a search query on your blog looks like. For Wordpress users, it might look like this:

http://yourblog.com/blog/?s=news&search=Search

This is important because you’ll notice the form asks you for a front of search term and a back of search term. The query itself should be left out so that your users can enter whatever they want. Let’s dissect the search query….

FRONT
http://yourblog.com/blog/?s=

QUERY
news

BACK
&search=Search

Your own search queries may look a bit different than this depending upon the software you use. To get the query preform a search using the GUI and then copy and paste the query from the navigation bar.

If you’re using Google custom search, you’ll notice that the query looks very different. This is because they use identifiers to keep track of revenues earned from custom search. Now, I have no idea if hacking their custom code is a violation of TOS but I’ve done it, it works but since it’s questionable I can’t flat out explain what to do here. Instead, we’ll create one using the Wordpress specific query….

Ready.to then creates the XML file needed to add custom search to your top navigation bar. You can see where it puts the tool below:

Notice that I now have custom search option added to my Firefox Toolbar. That’s great, you’ve got an XML file, however if you upload the file to your blog and link to it, Firefox won’t know to execute the script. To do that you need to add a bit of javascript code to the header of your site and use another custom query for linking.

<script type="text/javascript">
<!--
function addp(csurl) {
try {
window.external.AddSearchProvider(csurl);
} catch (e) {
alert("You need to use Internet Explorer (7.0 or later)
or Firefox (2.0 or later) to install the OpenSearch plug-in.");
}}
//-->
</SCRIPT>

That script tells the browser what to do with the .xml file. Now we need to tell Firefox where to find it, and that it’s an executable and not just a linked file. We do this with the addp request defined in the header script…


<a href="#" onClick="addp("http://developertutorials.com/blog/DevTut.xml");">

This tells the browser that the file is executable, the script tells FireFox what to do with that executable (add it to the toolbar).

That’s it, if everything went well you’ve created a custom search tool for Firefox in about five minutes. You can get the Developer Tutorial Firefox Search Tool here.

It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

1. A normal (X)HTML page is loaded into the browser.
2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

It sounds a little too good to be true, yet it’s the breakthrough all designers and creative have been waiting for as it makes the display of vibrant text possible even in cases where you have no idea what the end users system capabilities are. The best part is text remains parsible the sIFR developers explain….

sIFR is fully accessible to screenreaders and other assistive technology. Don’t take our word for it……The knee-jerk reaction of some people whenever they see Flash is that it must be inaccessible because it’s Flash. What we’ve done with sIFR, however, is turn that model completely on its head. Your (X)HTML document is still the exact same document it was before sIFR kicked in. Your code is untouched and sIFR is completely abstracted to the javascript layer; therefore, your accessibility, your search engine friendliness, and your semantics are the same as they were before the day you decided you like nice fonts.

sIFR stands poised to revolutionize the way we think about design and typography on the web. what happens when text is no longer restricted to W3C universal fontypes? What happens when the visual becomes the markup instead of developers marking up the visual? Things start to look WAYYY better, that’s what and it’s one of the first steps towads Web 3.0 in the design community. So what about if users have javascript turned off in their browser?

sIFR snaps right in and lifts right out. This is an important point. Making the decision to use sIFR is often just a question of adding a .js include to your site, uploading a .swf and some .css files to your server, tuning your fonts, and that’s it. It generally doesn’t require any wholesale code or design changes, and should you decide at some point in the future that you don’t want to use it, simply remove the .js file and you’re back to browser text.

Needless to say sIFR is pretty incredible. You can read more about this new technology from the developers site at http://mikeindustries.com

One way to do this is with javascript, the other way is with CSS.

Preloading Images with Javascript

Javascript is unfortunately abused all over the web. It’s used for scripts that create pop-up ads, pop-under ads, and to change browser homepages. So the only draw back to this approach is that some users have deliberately turned off javascript in their browsers to thwart abusers. No big deal. If the user has javascript turned off, the technique I’m about to share will be ignored and the page will load normally.

1. So how is it done? In the folder that contains your index.html file and stylesheets, create a folder called ‘Scripts’.
2. Let’s create a blank document in the text editor and call it preload.js
3. We’re going to create an array of calls for images that will start to load as soon as the head of the page loads. List all the images you want to have ‘headstart’ on loading here. This can include images that are linked to on the page but that don’t appear on the page. When dealing with a Photoshop design that is being marked up to XHTML you should place all the slices here.
4. Next you want to place the following code in the header section of your HTML document just after the <title> and <meta> tags.

   <script type="text/javascript" src="scripts/preload.js"> </script>
   

   This tells the HTML document to look for the script before the stylesheet and subsequently, to request the array of images the stylesheet needs to load. Alternatively you could place the javascript inline but I prefer using external documents.

5. The contents of the Javascript file should look like this:

   if (document.images)
   {
   preload_image = new Image();
   img_path = new Array();	
   
      img1 = new Image();
      img2 = new Image();
      img3 = new Image();
      img4 = new Image();
      img5 = new Image();
      img6 = new Image();
      img7 = new Image();
      img8 = new Image();
      img9 = new Image();
      img10 = new Image();
      img11 = new Image();
      img12 = new Image();
      img1 = new Image();
      img1.src = "../images/yourimage_01.png";
      img2.src = "../images/yourimage_02.png";
      img3.src = "../images/yourimage_03.png";
      img4.src = "../images/yourimage_04.png";
      img5.src = "../images/yourimage_05.png";
      img6.src = "../images/yourimage_06.png";
      img7.src = "../images/yourimage_07.png";
      img8.src = "../images/yourimage_08.png";
      img9.src = "../images/yourimage_09.png";
      img10.src = "../images/yourimage_10.png";
      img11.src = "../images/yourimage_11.png";
      img12.src = "../images/yourimage_12.png";
      img13.src = "../image/yourimage_13.png";
   
   for(var i = 0; i<=img_path.length; i++)
   preload_image.src = img_path[i];
   }
   

6. That’s it. You can use this to preload images for the next page, icons, or any number of things but the idea is to use it to call the array before they’re called elsewhere on the page.

Preloading Images with CSS

Another method is to preload images in the stylesheet. This method is fairly useless on the actual homepage but it can be used to preload all sorts of images on subsequent pages. Lets look at the code:

     .hiddenPic {display:none;}

This class should be placed somewhere in your stylesheet. You can place it inline in your html document and it would look like this:

     <style type="text/css">
     .hiddenPic {display:none;}
     </style>

Next, at the bottom of your html page just before the </body> closing tag, we need to call all the images from the next page we want preloaded and apply the .hiddenPic class:

     <img src="yourimage.jpg" alt="" title="" height="" width="" class="hiddenPic">

     <img src="yourimage01.jpg" alt="" title="" height="" width="" class="hiddenPic">

     <img src="yourimage02.jpg" alt="" title="" height="" width="" class="hiddenPic">

</body>

How does it work? Essentially you’re calling the images when the browser reads the page and hiding them before they are ever displayed with the display:none; line. The idea is that the browser downloads the images and caches them anyways so that when the user clicks through to the next page the users browser will note that the images being requested have already been cached and won’t waste time downloading them again.

Now that load time has been reduced, in Part 6 we’ll get back to marking up our XHTML to PHP and developing our Wordpress theme.

If you use Photoshop on a daily basis you’ve probably found yourself doing the same tasks over and over again and it would be nice to have the ability to automate those things to save yourself some time, right? Well scripts make that just a tad bit easier.

First things first, to speed up your understanding of scripting, you should probably download some existing scripts from the various repositories and websites that offer them. Here’s a list of places that offer free Adobe scripts for Photoshop and other Adobe products.

Adobe Exchange Repository

Ps-Scripts

Graphicsoft

You may have noticed that some of these sites offer ‘Actions’ as well and you might be asking yourself, how does an ‘action’ differ from a ’script’? Actions (in Photoshop) are a means to record all commands used to generate an effect in Photoshop for the purpose of re-application later. Many people say that scripts are similar to actions because they can both be used to automate tasks, but scripts can do so much more then what was possible with actions. For starters scripts have conditional logic which makes it possible to automate different outcomes based on various inputs. Essentially scripting Photoshop is programming and thus it uses various programming languages for results.

So what can you do with scripts? A few examples are using Photoshop to snatch frame grabs from a video source, turning a photo into a rainy day or to turn RGB values in an image into swatches automatically.

For the purposes of this tutorial I’ll only deal with JavaScript since it is platform independent (Mac and Windows). Also available are Visual Basic (Windows) and AppleScript (Mac) commands.

Adding and Using Scripts

• After downloading scripts you’ll need to install by navigating to Applications >> Adobe Photoshop CS2 >> Presets >> Scripts.
• Drop your file into the ‘Scripts’ folder and launch (or relaunch) Photoshop.
• Open your image in Photoshop.
• Select File > Scripts and select the script you wish to use.



• A dialog window may pop open asking if you want to apply the script. Click ‘yes’.

Bam you’re done. Scripting is really that easy. Now for the harder part.

Writing or Editing Scripts

Regardless of whether you install a single CS3 application or the entire Creative Suite, two other applications are installed by default: Adobe Bridge and the ExtendScript Toolkit. The ExtendScript Toolkit is a coding environment that aims to allow you to add new features to Adobe products through scripting.

• Find the ExtendScript Toolkit. Go to Applications >> Utilities >> Adobe Utilities >> ExtendScript Toolkit2. In some rare cases this may not have been installed or deleted. No worries, the toolkit can be downloaded for Macs here and PCs here.



• You’ll see a window with Photoshop-like palettes on the left and a text editor on the right.
• Choose File > New JavaScript. This will create a blank file with an area on the right ready for you to type. If you’re editing a script, instead of creating a new file you would simply open that script instead.
• Understanding the window in front of you is critical. First, the ‘Select Target Application’ option tells ExtendScript which application you are writing the script for. In the top left dropdown menu select Adobe Photoshop CS2 or 3 (depending on your version). When asked if you want to start the application, choose ‘yes’.
• If you aren’t familiar with scripting or you’d like a reference guide, download the Photoshop JavaScript Reference Guide.

This concludes our tutorial. Stay tuned to this column because in a future lesson I’ll help you go beyond these steps to actually writing and creating your own scripts from scratch.

But Developers doesn’t need to wait for PHP6 for this feature because YUI JavaScript Framework 2.51 added this Flickr like file upload feature (though it’s experimental inclusion).

Let’s have a look at the component’s features-

1. Multiple file selection in a single “Open File” dialog.
2. File extension filters to facilitate the user’s selection.
3. Progress tracking for file uploads.
4. A range of file metadata: filename, size, date created, date modified, and author.
5. A set of events dispatched on various aspects of the file upload process: file selection, upload progress, upload completion, etc.
6. Inclusion of additional data in the file upload POST request.
7. Faster file upload on broadband connections due to the modified SEND buffer size.
8. Same-page server response upon completion of the file upload.

Beside JavaScript and Cookie support, the users also need Adobe Flash Player support in their browser to use the feature.

YUI Home Page: http://developer.yahoo.com/yui/

The main advantage of jQuery for us PHP developers is that it utilises our existing knowledge. When PHP code brings you closer to the HTML and other UI needs - CSS, for instance, - jQuery leverages that knowledge. It takes a little while to get used to functional programming, of course, but with CSS selectors, basic method chaining, and an approach to event handling that just works, jQuery is an ideal framework for PHP developers getting started with JavaScript interaction design.

So, next time you’re looking to get your hands dirty with DOM, DHTML and AJAX, head over to jQuery.com and give it a go.