We have posted the first 16 sections of Step-by-Step: Installation and Configuration of a Google Enterprise Search Platform. These initial sections offer a basic, practical guide to how The Findability Project, with its project specs as ground zero, proceeded with installation of the Windows server software and settings, installation and configuration of Microsoft Office SharePoint Server (MOSS), and basic configuration of the SharePoint document site.

Much more is coming. These first several steps simply set the stage for getting into deployment of the Google Search Appliance (GSA), what we think are the more interesting and challenging parts. Among other things, upcoming are documentation of how to install and configure the connector to the GSA, and walkthroughs explaining how we have configured our GSA to accomplish the goals of the project.

(Kudos to Ed Lachgar, IT extraordinaire at Legal Services of Northern California for writing up these first 16 sections.)

As suggested last week, Gmail seems to be emerging as the prevailing point of engagement for many of us using Google Apps. As if on cue, today Lifehacker highlighted the Integrated Gmail Firefox extension that loads any Google App inside Gmail. Not that I am recommending that particular extension. But it goes in the same Google Apps direction so many of us are going, namely, relying on the Gmail UI as the point of first entry to Google Apps.

As a coda to last week’s post about turning on Gmail 2.0 for Google Apps, it is worth noting that doing so will effectively kill some Firefox add-ons that you may be accustomed to using to spiff up the appearance of your Gmail interface, including some commonly used Greasemonkey Gmail scripts and popular Userstyles.org Gmail scripts that rely on Stylish. You should update those, as needed.

For LSNC perhaps the biggest deal is having a solution for mailto links, so that the Gmail 2.0 “Compose Mail” page opens whenever the user clicks on a mailto link.

One of the easiest solutions to this dilemma is to have users install the Better Gmail 2.0 Firefox add-on.

To get the “Compose mailto Links in Gmail” feature to work with your Google Apps domain, click on the “Advanced” button in the Better Gmail 2.0 console and then simply add your domain. Problem solved. Well, for the most part. Once set, if the user has Firefox open and is already logged into Gmail, whenever the user clicks on a mailto link it will open to the Gmail Compose Mail page. If not logged into Gmail, clicking the link will trigger Gmail opening to its default Inbox page. Hey, but no harm, no foul.

With the Better Gmail 2.0 add-on you also get several other useful options, including a very helpful “Attachment Icons” display that substitutes file-type specific icons for the Gmail default paper clip icon. Useful stuff.

For starters, let it be known that we’re now calling it Project Grace: Pika Reloaded. We’re totally into Pika love, believe me. But the new project moniker just seems to say it better since the whole exercise is about taking all that core Pika goodness and “reloading” it with all the love goodies we can muster. So there you have it.

And before we launch directly into rebuilding the styles for Pika 3.06, I thought to offer an overview of a few web development tools that are extremely helpful and fairly easy to use for figuring out what is going on with a given web page’s structural markup and the CSS code controlling its styles. To that purpose, I discuss here four particularly useful tools for HTML and CSS diagnostics available for use within the Firefox browser:

• Firebug
• MRI bookmarklet
• XRAY bookmarklet
• Web Developer Toolbar

Firebug

There is no question that the Firebug browser extension for Firefox is the web developer tool I will rely on most for Stage One of Project Grace. The name Firebug is true to its purpose: It is a remarkable and easy-to-use web page debugging tool you can invoke with a few mouse clicks directly from within your Firefox browser window to easily and visually deconstruct any web page. At the same time you get immediate access to the underlying HTML, CSS and JavaScript code so you can better understand how the page is built and what the underlying HTML, CSS and JavaScript code are doing (or not doing) when the page loads. It is not the first web page debugging tool to hit the web developer world. But is by far the first to make debugging HTML, CSS and JavaScript code in a given web page this easy to do, and in a way that makes the tool authentically easy to use even for non-professional web designers. You know. Like most of us.

My intention here is not to reinvent the tutorial wheel. If you are new to Firebug, it is easy enough to find a basic introduction to Firebug; any number of longer-form Firebug tutorials; even a long-form “Welcome to Firebug 1.0″ video by its creator Joe Hewitt. Get your Firebug orientation, as you need.

Rather, my goal here is more modest, just to get you up and running and in the swim with Firebug to assure you can follow along as its use is illustrated in the Project Grace articles to come. So, for Firebug newbies, here is one way to get your Firebug on:

First, be sure to install Firebug in your Firefox browser. After installing it, completely close out and then restart your Firefox browser (as you would with any newly added Firefox extension). You need to “enable” Firebug when you first use it. To do so, click on the green circular icon with the white check mark located in the lower right-hand corner of your browser, on the far right of the status bar, as illustrated. This triggers a dialog window inviting you to enable Firebug. Do so.

You’re good to go. You should now see the Firebug “inspection” window. Click on the “Inspect” tab and watch the magic, as you hover your mouse over parts of the web page displayed in the window above the Firebug inspection window. As you hover over any element on the web page, Firebug highlights the element with a blue border in the web page above, while highlighting the corresponding HTML structural markup in the Firebug window below. On the right side of the Firebug inspection window, you will also see a separate window detailing the CSS “Style” code and the spatial “Layout” affecting the display of that same element. Here’s an example using Webdogs 2.0 of what is displayed if you hover your mouse over the Webdogs 2.0 logo at the top of the page:

Give it try here at Webdogs 2.0. Open the Firebug inspection window and hover over the Webdogs 2.0 logo image, as illustrated above. Click on the logo image. Here’s what you’ll see on the left side of the Firebug inspection window, with the markup for the Webdogs 2.0 logo image element conveniently highlighted in blue:

You can immediately see in the left pane of the Firebug inspection window where that page element is located in the flow of page HTML markup, plus its corresponding attributes.

On the right side of the Firebug inspection window, you can also see all the CSS code affecting the presentation or display of the Webdogs 2.0 logo:

The CSS information provided by Firebug is nutrient dense, to the max: You can see immediately all the CSS selectors (e.g., #banner img); the corresponding properties for each selector (e.g., float:left; and so on) affecting the dispay of the page element; and the location of that particular bit of CSS code (e.g., style.css at line 101). But wait … there’s more! Scroll down and you will see examples of other bits of CSS code that are inherited from other parts of the cascade (e.g., the styles affecting the display of the anchor tags that makes the image a clickable link), as well as other inherited style elements that have been trumped by other, more specific parts of the CSS code (e.g., the color values affecting anchor tags elsewhere in the page design). If that were all Firebug did, that would be plenty. But it does tons more things you’ll discover as you play with it.

MRI and XRAY bookmarklets

Sometimes using Firebug is akin to using a shotgun when a fly swatter would do the job just fine, thank you very much. In that spirit, allow me to suggest you try the XRAY, a handy bookmarklet that enables you to quickly see how the box model is affecting the display of any page element. Again, to illustrate using Webdogs 2.0, click on the XRAY bookmarklet, which triggers a smoke-colored “Welcome to XRAY” window. Click on the Webdogs 2.0 logo image and you get a chock-fulla display of information about the spatial layout of that particular page element:

Not only is this a great way with a single click to get a lock on the basic dimensions (height, width, margins and padding) of a page element and its positional characteristics (e.g., the element is a “float”), it is the quickest way I know to determine whether an id or class attribute has been added to the element, and what is the inheritance heirarchy affecting the element — all useful information for locating or establishing related CSS coding in the style sheet.

The MRI bookmarklet does something similar but different: Click on the MRI bookmarklet and then enter a selector into the dialog box and it will find any page element that uses that same selector. It also works in reverse: You can see the page element on the page but want to know what selectors it uses. No problema. Click on the MRI bookmarklet and then click on the page element and the dialog box displays a list of suggested selectors affecting the display plus the structural markup heiracrchy. Other tools are better at this sort of thing or do it differently, e.g., Firebug (described above) and View Source Chart extensions. But the MRI bookmarklet is a nice quickie way to get this basic information, in a pinch.

Web Developer Toolbar

The Web Developer Toolbar is famously described as the Swiss Army Knife of web development tools. It has some 150+ functions and so it can seem overwhelming. If you are new to it you may find it helpful to read the Web Developer Toolbar Overview.

Over the last year or so Firebug has largely supplanted the Web Developer Toolbar as the “diagnostic” tool of choice for many because the former makes it easier to get to the source of and diagnose HTML, CSS and JavaScript code on a given page. But beyond the formidible, more user friendly “debugging” advantages of Firebug, the Web Developer Toolbar does a whole lot more things.

For Project Grace, here is a little used and little understood tool in the Web Developer Toolbar I use all the time: “Display Topographic Information.” You can find it about half way down the list of options under “Information.” I use the “Topographic Information” display primarily to get a “pseudo-grid” display of all the elements displayed on the page. Some designers use a background grid to evaluate the relative positioning of elements. I prefer to just use the topographic information display. With it, I can more readily see how page elements are positioned relative to each other, whether the elements display evenly (or not), and way more easily so than looking at the regular page itself, especially in a design like Webdogs 2.0 that relies on a lot of open, unbordered page elements and does not rely on rules or lines to orient the eye to the spatial relationship of those elements.

To illustrate my point, take another look at the home page of Webdogs 2.0. Regardless of how you feel about the overall design, the page elements look basically well-ordered, evenly spaced, no? Well, maybe. Maybe not. Using the Web Developer Toolbar, select “Display Topographic Information” and view the same page:

Ah! Get it? This “topogrpahic” layout of all the page elements actually makes it easier to see if the positioning of elements is consistent with the overall intended layout design. I get the advantage of a grid-like view of the page but with added topographic detail. And it helps me see whether a page element is too big or “pushing” or “obstructing” other elements, something that can be very hard to do, or simply impossible, by just deconstructing the CSS code in the abstract context of a style sheet.

OK people, now let’s get some real work done. Onward and upward to Project Grace 02: Basic HTML and CSS deconstruction!

The Whole Enchilada: Project Grace: Pika Reloaded

Earlier this week Google announced code changes to prepare Gmail for the future, notably this week for both IE7 and Firefox 2.0 users. The roll out of the updated interface has already hit those of us with personal Gmail accounts. As is the norm, those with the no-cost, non-profit Google Apps Gmail accounts are on the back end of the roll out. It’s coming but the changes haven’t hit the free Google Apps people. At least it hasn’t hit us at LSNC.

The first-glance, apparent changes are seemingly cosmetic and involve minor changes in functionality: Larger fonts for input buttons; an always resident contacts search field on the left that in the older version only displayed when the user opted to turn on Gmail’s integrated chat feature; and more keyboard shortcuts. At least for now users have the option, illustrated here, to roll back the interface to the “older version” –

But there are deeper things going on, including a much improved Contacts manager. Truth be told, in the older interface some aspects of the Contacts features were among the worst implementations in Gmail. You could smoothly import and export contacts, yes. And, well yes again, Gmail has a superb implementation called contact sharing that automatically integrates new shared domain email users to your Contacts. OK, and Gmail’s AJAX implementation of auto-completing email addresses as you address an email message is, well, the best. But my point here is that managing your Contacts was always a cumbersome process: Adding, viewing, editing and deleting contacts was way harder than it should have been. And the worst frustration was no direct or efficient access to your contacts without opening Gmail and drilling down a few levels, at least, to get the contact information you’re looking for.

Things have changed. The Contacts manager in Gmail has had a serious, structural makeover with way better feature integration. For example, here’s a screen shot of my work entry displayed in my personal Gmail account:

Nice.

And for those with personal Gmail accounts, here’s a trick for opening the new Contacts manager its own browser window: Assuming you’re already signed into your personal Gmail account, use the URI https://mail.google.com/mail/contacts/ui/ContactManager to create a shortcut or hotkey to open the Contacts manager. And even though the new Contacts manager may have not yet been implemented openly in your Google Apps version of domain-hosted Gmail, there’s a good chance you may be able to do the same thing with this URI, substituting your domain as indicated:

https://mail.google.com/a/yourdomain.com/contacts/ui/ContactManager

All these changes in Gmail coding have made Firefox a bit funky this whole week. I have experienced repeated funky, buggy sorts of problems with Firefox while using Gmail both in my personal account and my Google Apps version. Change is hard, I guess. But regardless, try it. You’ll like it. Or not.

Not being an Apple Mac guy, I had long heard of but never used the Safari browser which, as anyone who reads a tech list knows, was released last week in a Windows version as Safari 3 Public Beta. Okay, I bit. I was curious. But when I installed it initially on separate Windows XP and Windows Vista desktops, in both cases I could not get it to work correctly, the principal problem being all I got was an interface with the horizontal menu missing and basically no web page text. Not being particularly invested in Safari, I was only so motivated to crack this puzzle, so I didn’t. Apparently this problem with the Windows version of Safari is widespread, but there is now a solution: Fix font issue in Safari for Windows. The fix explained there worked for me. But now having it up and functioning, I can see only one practical advantage in using Safari for me, namely, I can now conveniently test page displays in Safari, something I could not do before. That’s worth something since Safari passes the acid test, standards-wise, which matters. But Firefox has all the web development add-on tools I and so many others use, so the practical incentive to use Safari on the Windows platform as my browser of first choice just doesn’t seem to be there. But that’s me. How about you all?

First annoyance:

As I recall it, the problem started with Firefox 2.0.0.3. If I didn’t already have Firefox open and clicked on a Windows shortcut to a web location, I would get an error message like this:

The odd thing is that, despite what the message says, if you wait a bit the page eventually loads into the browser. The Firefox folks are aware of the problem but haven’t yet fixed this particular bug. But there is a fix although it is a bit cumbersome: Windows error opening Internet shortcut or local HTML file. Per that article, there are a couple of ways to deal with the bug, but I took the path of least resistance and went directly into the registry settings and deleted the four “ddexec” registry keys referenced in the article. It works.

Second annoyance:

This problem is about getting a Firefox add-on (née extension) that works in Firefox 1.5.x but hasn’t been updated so it works in the current Firefox 2.x. Actually it is unfair to call this an “annoyance” since that implies this is Firefox’s fault. It is not. If an add-on doesn’t work, it is up to the developer of the extension to fix it, not Firefox. And in general most Firefox add-ons I use have been in quick order updated to work with the latest versions of Firefox, but occasionally some are not. What’s a wizened Webdog to do?

The answer is to install Nightly Tester Tools, an add-on that makes old version extensions functionally compatible with current versions of Firefox. Once you install Nightly Tester, you’ll see a new option at the bottom of the add-on dialog window:

Click on “Make all compatible” and then close/restart Firefox and most, if not all out-of-date add-ons should work just fine.

That said, one more thing: While the Nightly Tester add-on is active, it triggers a “build” number reference in the title bar of the Firefox browser, as illustrated here:

If that annoys you, just disable Nightly Tester and the build number disappears.

The New York Times tech section today features Firefox and the Anxiety of Growing Pains, detailing the dynamics of the widely and justifiably admired darling of the open source community, and what the infusion of big bucks is doing to it. A worthy read.

Here are a few additional Firefox/Greasemonkey/Gmail goodies we are currently promoting for use by LSNC advocates:

DragDropUpload – one of the limitations of the default Gmail setup is that you have to use the browse file dialog, one file at a time, to add multiple file attachments to your Gmail message. But the DragDropUpload extension eliminates all that inefficiency. Install it and you can just drag-n-drop all your files in one fell swoop on top of the “Attach a file” link and BAM! you are good to go! This is absolutely a must-have Firefox extension if you use Gmail.

Wouldn’t it be handy if you could “save” specific types of searches of your Gmail content? Turns out you can. Install Greasemonkey and then saunter over to the Gmail-Greasemonkey page at Google Code, where you’ll find several Gmail goodies including the Saved Searches script. Install it and your Gmail account will automatically save your Gmail searches for you. Comes with a couple of handy dandy “saved searches” already set up for you including “Attachments” and “Last Week.” Killer.

You would not be the first person to grumble, “Yeah, I love how Gmail works but, whew, is it ever butt ugly!” That’s being a bit harsh, I think, but if you are needin’ some serious Gmail beautification, there are plenty of options out there. For starters you could install the Stylish Firefox extension (think of it as a Greasemonkey alternative) and then go wallow in all the UserStyle.org Gmail extensions. Need to hide the ads in Gmail? Want a cooler look to your left-side navigation and list of labels? Think the Inbox is way overdo for a makeover? It’s all there for you. And if you’re motiviated, dig into the scripts for each of the individual extensions and tweak the CSS code to make the colors your own. Sweet.

… and since I’m on the topic of web standards, and we all are now living in an IE7 world, let me refer you to Newly Supported CSS Selectors in IE7, a free article at Community MX by CSS czars John Gallant and Holly Bergevin. The article provides a very helpful refresher or re-orientation on the core CSS concepts of selectors and combinators, and how they yield specificity. The big news here is that IE7 now supports child combinators and adjacent-sibling combinators.

Does it matter? Yes it does. For example, here is the Google Analytics browser report for last week at Webdogs 2.0, with its targeted tech-niche audience: Our intrepid visitors overwhelmingly rely on one flavor or another of Firefox or Safari, but only about 13% drive by at the wheel of an IE:

But the web hoi polloi still overwhelmingly use IE. Here’s the same report for the LSNC main website, with IE getting 83%, Firefox 15%, and statistical crumbs to the remainder: