Google provides a simple way to install Google Custom Search on your website. It has a flexible layout to include one website, multiple websites or specific webpages. You can customize the colors and branding to match your existing webpages. Other features include auto-complete, thumbnails and ads.

To get started, you will need the following:

1. A Google account
2. Administration access to the website that you will be adding the Google Custom Search.

Once you have that information setup, you can start by logging into Google’s Custom Search Engine.

1. Once logged in click “New search engine”.
2. Add the website domain in the “Sites to search” field. You can add any of these into that field, individual pages (www.example.com/page.html), entire site (www.mysite.com/*), parts of a site (www.example.com/docs/* or www.example.com/docs/), or entire domain (*.example.com).
3. Select the desired language.
4. Click “Create”.

From here you can add it to your site by clicking “Get code”, and place it where you want the search box and search results to appear, following Google’s guidelines.

If you prefer to tailor the look and feel you can do that by clicking on “Look and feel” in the left navigation. The “Layout” tab includes overlay, two page, full width, two column, compact, results only or Google hosted. The “Themes” tab is where you customize the look of the results. The “Customize” tab allows you to edit the search box, search button, results and more. The “Thumbnails” tab allows you to turn on and off from viewing in search results.

After that, click “Save & Get Code”. Place in the code to your HTML where the search box and results should appear, again following Google’s guidelines. These guidelines will be shown above the box where you copy the Google code to place into your website.

Other features that can be changed in your Google account without changing the code that is to be placed into your site include “Search features” to enable and disable promotions with multiple options, “Statistics and Logs” to get stats, Google Analytics and Audit log. The “Business” tab allows you to show or hide ads. To disable the ads you have to be an eligible organization according to Google’s guidelines or pay a fee to have them removed.

All the above information can be found at www.google.com/cse.

Have you ever wanted to group lists of information in XSLT? We do know that it’s a common issue in XSLT 1.0. There is a method to help with this called the “Muenchian Method” named after the developer, Steve Muench.

In this example we will cover the standard grouping method that is commonly used. The method involves generating a key and assigning it to “for-each” statements to handle the grouping.

For this particular example we will be grouping a mock address book by “surname” and sorting by “forename”.

First, start with standard flat input from the XML:

<records>
   <contact id="0001">
      <title>Mr</title>
      <forename>John</forename>
      <surname>Smith</surname>
   </contact>
   <contact id="0002">
      <title>Ms</title>
      <forename>Fiona</forename>
      <surname>Smith</surname>
   </contact>
   <contact id="0003">
      <title>Dr</title>
      <forename>Amy</forename>
      <surname>Jones</surname>
   </contact>
   <contact id="0004">
      <title>Mr</title>
      <forename>Brian</forename>
      <surname>Jones</surname>
   </contact>
</records>

Second, create the XSLT template with the key at the top, “for-each” statement with the grouping method applied and the final “for-each” statement that groups the desired element.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:key name="contacts-by-surname" match="contact" use="surname" />
   <xsl:template match="records">
      <xsl:for-each select="contact[count(. | key('contacts-by-surname', surname)[1]) = 1]">
         <xsl:sort select="surname" />
         <xsl:value-of select="surname" />,<br />
         <xsl:for-each select="key('contacts-by-surname', surname)">
            <xsl:sort select="forename" />
            <xsl:value-of select="forename" /> (<xsl:value-of select="title" />)<br />
         </xsl:for-each>
      </xsl:for-each>
   </xsl:template>
</xsl:stylesheet>

Third, the final output would look like this.

Jones,
   Amy (Dr)
   Brian (Mr)

Smith,
   Fiona (Ms)
   John (Mr)

The above information was provided by www.jenitennison.com.

By default any inline image will align with the baseline of the paragraph, unless a “margin-bottom” is applied to the paragraph’s baseline.

There are six lines that can be used for vertical alignment:

1. Top line is the line above all of the content.
2. Text-top line is top of the text that also includes any accent marks.
3. Middle line is the middle of the letter x-height.
4. Baseline is where all letters sit.
5. Text-bottom line is the bottom of all text that includes descenders.
6. Bottom line is below all content.

Given the above information, you can then determine how you want to change the vertical position of images in its surrounding text using the CSS “vertical-align” property. These properties can include, top, text-top, middle, baseline, text-bottom, bottom, sub, super, percentage and length.

Below are examples of each:

1. Top: img.class-name {vertical-align:top;}
2. Text-top: img.class-name {vertical-align:text-top;}
3. Middle: img.class-name {vertical-align:middle;}
4. Baseline: img.class-name {vertical-align:baseline;}
5. Text-bottom: img.class-name {vertical-align:text-bottom;}
6. Bottom: img.class-name {vertical-align:bottom;}
7. Sub: (aligns with the baseline position of subscript content) img.class-name {vertical-align:sub;}
8. Super: (aligns with the baseline position of superscript content) img.class-name {vertical-align:super;}
9. Percentage: (0% is baseline, by raising or lowering the value it can go above or below the baseline), example 1: img.class-name {vertical-align:5%;}, example 2: img.class-name {vertical-align:-5%;}
10. Length: (0px is baseline, by raising or lowering the value it can go above or below the baseline), example 1: img.class-name {vertical-align:5px;}, example 2: img.class-name {vertical-align:-5px;}

The above information was gathered from maxdesign.

There are a lot of great jQuery galleries to choose from, but the “ROUNDRR” plugin stands out as a circular gallery. If you’re looking for great circular plugin, this one of the better ones. This particular plugin has several different customizations, as well. In the provided link below, it has examples of each customization and how it works.

It has demos included such as pick mode, standard mode, tweets gallery, and autoplay.

The setup itself is very basic. It uses jQuery files, CSS and HTML provided in the examples.

See the demo and code on how it works here.

prettyPhoto is a great gallery with many options to customize different elements. It works cross browser and handles different setups such as images, slideshows, Flash, YouTube, Vimeo, Quicktime, external site iframes, inline content and AJAX content.

There are options for multiple galleries using relative naming and grouped thumbnails in the pop-up making navigating through images quick and easy. It also includes integrated social buttons for Facebook and Twitter if desired, title and description tags, image count.

The developer includes great documentation, tutorials on different setups, FAQs and support forums.

The prettyPhoto tutorial and source code can be found here.

If you need a basic tabs tutorial that works for a simple setup, this script works great. The tab tutorial was written by Jack Moore.

The script is detailed with comments for easy understanding. It is also setup to work with your existing markup.

The tab tutorial detailed setup link can be found here.

If you are using WordPress for your site and need a locator, than the SimpleMap plugin is a great solution. Its feature packed and is the most actively updated Google Maps plugin for WordPress.

Some of the features include:

• Import/export of your data with CSV or WordPress core exporter
• Custom markers with the premium support
• Full control of Google Maps domain, map type, starting location and more
• Shortcodes and Widgets
• Custom Post Types that allows you to use with pages and blog posts
• Location Taxonomies to organize the locations by category or tag

The plugin can be downloaded for free or you can purchase a premium version with support.

You can view the SimpleMap plugin site here for more details.

Recently a client asked me whether or not they should take the time to do a content inventory before (or during) a site redesign. A content inventory is a monster spreadsheet that describes every single page on the future site and where the source of that page’s information will come from (new content, imported from existing site, Word document, etc.).  Generally, when Beacon performs this task for a client, the spreadsheet contains the following columns and each row in the spreadsheet then represents a separate page in the site architecture:

• Page Name– “About Us” or “News” for example
• Description– If not obvious from the page name, additional information about the page
• Current URL– URL of the page on the current site, if any
• Level #– Where the page fits in the site hierarchy.  Tier 1 is the home page, Tier 2 is top level landing pages, Tier 3 are sub-pages, etc.
• Content Import– Person/group responsible for importing the content to the page on the new site
• Content Type– Type of page if not standard content– dynamic/transcriptional page, form, etc.
• # Pgs– Usually is “1″ so that an easy page count can be done from the spreadsheet, but navigational-only items that don’t represent actual pages on the site or link to 3rd party pages will have “0″
• Secure Access / Login– Indication if the page will require login/authentication for access
• Audience– If page will not be available to the public (log in only, for example), description of who can see the content
• Filename– Name of document or current URL where the content for this new page will be obtained
• Comments– Special information about this page

My immediate impulse to my client’s question of whether or not this document was required was to shout “YES, OF COURSE!”  Ok, maybe not really shout, but I do feel pretty strongly about this deliverable and think it is an essential step in the redesign process.  Upon reflection, however, I tempered my initial reaction, since I recognize that this can be an expensive and laborious task for very large sites and decided to find some articles to support (or dispute) my opinion.

Based on the resources below and my professional experience, I still think that if the project budget and timeline allow for it, this is a very critical step in the redesign process.  I think Jeffrey Veen said it best in “Doing a Content Inventory (Or, A Mind-Numbingly Detailed Odyssey Through Your Web Site)“:

A content inventory is a decidedly human task. In fact, we find that the process can often be as valuable as the final spreadsheet. If you invest the time in scouring your Web site and deconstructing every page (or at least a good selection of pages), you will end up as the uncontested expert in how it all goes together. And that’s invaluable knowledge to possess when redesigning your site.

I hope that the following resources will be helpful to you as well as you try to decide whether or not to undertake this Herculean task!

Resources

• http://www.datadirection.nl/blog/2011/08/23/practical-content-strategy-content-inventory-audit/
• http://www.adaptivepath.com/ideas/doing-content-inventory
• http://blog.braintraffic.com/2009/03/the-content-inventory-is-your-friend/
• http://nform.com/blog/2010/01/doing-a-content-audit-or-inven
• http://www.pointworks.de/software/igoomap/index.php
• http://peacockmedia.co.uk/integrity/
• http://www.fatpurple.com/2010/02/26/content-inventory/

For the seventh year in a row, Beacon will be attending the 2012 Cascade Server User’s Conference, put on by Hannon Hill at the Georgia Tech’s Global Learning Center and Hotel & Conference Center in Atlanta, GA.  It’s something that I look forward to every year, and this year’s conference is going to be even better:  Beacon is officially a Gold Sponsor, and we will be continuing our tradition of participating in the conference since I’ll be speaking again for the fifth time.  We have really grasped the opportunities to present our development expertise and knowledge of Cascade Server.

In writing this blog, it got me thinking about all of Beacon’s previous presentations at the conference:

• 2006:  Participated in a round table panel discussing our use of Cascade Server.
• 2008:  Tips & Tricks for End Users
• 2009:  Tips & Tricks for End Users (Part II)
• 2010:  Web Marketing w/ Cascade Server CMS + Live SEO Reviews (by Brad Henry, Director of Web Marketing Services)
• 2011:  Creative Uses of Cascade Server

This year, I’ll be speaking about something near and dear to my Cascade heart:  Cascade Server Optimization techniques.  In today’s world, everyone wants their Web experience to be fast.  Our interaction with Cascade Server is no different:  we need to get our content edits and publishing done quickly.  Cascade Server can be fast, but if it’s not programmed correctly, it can be a slow experience.  The session will show Cascade programmers how to properly implement indexing blocks, XSLT code, and best practices for hardware configuration and hosting.

The conference is always a great time for Beacon folks to meet current and prospective clients.  We will have a booth set up in the lobby where conference participants can enter a drawing to win great Google-branded prizes, and of course, talk to Rick Boccard and me about anything Cascade, or any other Web needs:  Web Marketing, Web Hosting, or general Web Development.

Additionally, in keeping with the presentation theme, we will have the opportunity to sign up for a free Cascade Server Performance Assessment.  During this assessment, I’ll evaluate your page render speed, publishing speed, configuration, code and general implementation.  Afterwards, you will receive valuable insights and actionable recommendations that will improve the user experience and simplify maintenance.  We hope that all participants will find the assessment very beneficial in improving your excellent Cascade Server performance even more.

We look forward to seeing everyone in Atlanta on September 16th!

PIE (Progressive Internet Explorer) is a great script that allows IE 6-9 to render some of the most useful CSS3 decoration features. This will save a lot of time from creating separate image files for certain layouts, which can also make your website load faster and cleaner. The great thing is that it is easy to insert into your current web design.

Some of great CSS3 features it supports are border-radius, box-shadow, border-image, css3 backgrounds and gradients.

After applying your CSS3 effects, just add one of these two options to make it work for IE 6-9.

1. Applying the PIE.htc file path into your CSS (recommended)
2. Using javascript to call the files for reference.

For full features, demos, code and everything about PIE, visit the developer site here.