Tips and Tricks learned building this site or somewhere else

Inkscape SVG to get decent looking text in a transparent image

It's easy to get an image with a transparent background and well drawn text if you use Inkscape and make one simple change before exporting a bitmap to png format.

For the so-called logo image in this site's header, I made an 800x180 image having a white background, pasted in the framed photo, and then added four text areas for name and three groups of skills.

The trick is to change the background color from #ffffff (white) to #ffffff00 (white with alpha) by selecting File, Document Properties, and double clicking on Background.  The image below shows the Background color popup with the Text box labeled RGBA: in the lower right corner.  Simple.  Sweet.  Magnitudes easier than fiddling with magic wands and anti-aliasing for a substandard result in paint.NET or GIMP or Photoshop.


return to Table of Contents



I wanted tabs and CSS and I wanted it my way

The Resumes page consumed inordinately huge investments in time, but it makes me smile.

Google Apps Website

This website is a Google Apps website, hosted by Google Sites and subject to some restrictions. The restrictions arise from the KISS nature of Google products. I chose Google Apps for my website to take advantage of the extremely low cost and the KISS ease of composing webpages.

A long resume in Slices

Much the same, my resume is long. When presented in standard historical style it fails to express my careers clearly.

I wanted to slice it up so that each career is spotlighted and viewers can easily jump to tools, skills, and education.  I wanted tabs and toggled text. That meant Javascript and CSS.  Both are used extensively in Google Sites. Neither are welcome directly in Google Sites webpages.

Sliced and Toggled with Help & Manual

I generated slices for writing, teaching, systems work, tools, education, and training by using Microsoft Word's Mail Merge against a Microsoft Access database having queries to filter and gather them up.  Each slice was imported into Help & Manual, my choice for easily arranging and publishing help documentation. I published the Help & Manual hmx file into HTML format.  Help & Manual generated HTML, CSS, and Javascript files.

That was easy.  There is, however, no way to simply upload those files and have them willingly hosted by Google Sites. 

Alternatives Considered

There may be a zillion ways to sneak CSS and Javascript into a Google Sites webpage. The few that seem mentioned often enough to make me relax include using Python hosted on Google Apps Engine, using Google Gadgets hosted on Google Apps Engine, and using Google Gadgets hosted on Google Code.

No small amount of time disappeared while trying each of them out.  No small amount of time was then spent making the third choice work.  It seemed to be simplest to edit html, CSS, and javascript files on my laptop, commit changes to svn on Google Code, and then test.  As is always true, it did work that simply, but some of the tiniest details took ages to second guess.  No one has ever said that debugging script is easy. And even when all things were working in the Chrome browser and Opera, it still took several experiments to find out what Internet Explorer and Firefox were willing to work with.

Chosen Google Gadgets hosted on Google Code

For anyone who wants to exceed the bounds of Google Sites, and if no such people exist, then for me to be able to recall, here is what worked.

prep work

  • set up tortoise svn (alternative would be some git client)
  • set up a google code account
  • set up a google code project with svn (or git)
  • check out the empty project, using tortoise, into a folder on my hard drive
  • put the HTML, CSS, and JS files in the folder
  • commit changed files, using tortoise, from the folder into the Google Code project
  • add a Google Gadget xml file, simple Hello World, and commit again
  • add the gadget as an xml file in the Google Code /svn/trunk folder to a webpage
  • test to see Hello World

development effort

how to get an html file loaded from Google Code /svn/trunk into the HTML of the Google webpage
thereupon followed a steep ascent into Google Gadgets opensocial heights
lots of conflicting advice to consider
how to get a CSS file loaded at the right time
opensocial bonus appears: tabs for free
CSS linked directly from Google Code /svn/trunk works great (on Chrome and Opera)

refinements

move CSS to gadget xml file
javascript loading best done by directly embedding in gadget xml file
refactor inline styling from html files directly to embedded CSS in xml file 
add embedded CSS for opensocial tabs
add javascript triggers when opensocial tab selected
trigger opensocial adjust-height

NET RESULT RECIPE