Monday, October 8, 2012

Site to Sea

At Google, system redundancy is a priority.  So naturally Google has multiple facilities for doing almost everything.

For creating web pages, they used to offer two services, Google Webpages, and Google Sites.  Both of these offered a free way to create simple web pages, each complete with their own, two, separate, different HTML editors!  And by the way, if you count Blogger, then Google had three HTML editors.  Just awesome!

Awhile back, they discontinues the Webpages offering, and it's editor (leaving two HTML editors).  That old editor was actually a little better in that you could insert the code fragments other Google facilities helpfully offer as a way of tying up things like Google Web Master Tools, Analytics and adsense into the same Googlish bundle.

You can't quite so all that with Google Sites, so there's Googly things that you simply can't do, even with both feet, and hands up to your elbows, in the Google ecosystem (awesome!).

The other day, I foolishly went to try and simplify some pages I've made with Google Sites.  I wanted to pull a few images from Picasa Web Albums, instead of the server I had been using, and use a better template for the layout.

The truly great thing about WYSIWYG HTML editors, like Google Sites has, is that you really need to know a lot about HTML to use them.  And I mean a lot.  I don't mean that you have to know the simple handful of tags that any chimp-in-training could use to create a perfectly sensible web page.  To use these tools, you really need to know it all.  And you need to know all the options to every tag, no matter how obscure, because let me tell you, those tools will use all of them!  And they will insert every single available tag, and every option that tag has, into what you create, all with absolutely no code formatting.

In fact, as an added convenience, if you try to format the HTML yourself to give yourself some shred of a chance at reading it, the software will happily just mix it all up!  Take that self!  And it does not just run it all together either.  Oh no, this software is extremely sophisticated.  Look forward to line beaks at seemingly random, and blank lines added, in addition to the simple thrill of running things together.  The editor takes a special joy in creating non-breaking spaces.  Everyone loves a sprinkling of non-breaking spaces here and there.  There's nothing like that to give a paragraph that not-paginated-correctly look of extra white space at the end of some lines.

In addition, it appears the programmers that created it all got paid by the div tag, but I digress...

The whole point of this exercise in losing the will to live, was to simplify a few pages (in the name of Google, Apple, Microsoft and IBM, what was I thinking?).

This seemed to go pretty well.  I created two templates, cutting and pasting some items for the existing content, and used some URLs from Picasa for images (oh, did I mean that the Sites editor can not grab images directly from Picasa like the Blogger HTML editor can?  I didn't?  Well, it can't).  I used my new templates as a way to have a consistent header and footer on the pages, with an ad block down the side.

"Any chimp would be proud of this!", I insanely thought to myself.  Little did I know...

Later in the day I happened to look at the page on my phone with the Dolphin browser (a great mobile browser, highly recommended for chimps of all sizes).  To my horror, I found several links not working, and a large scattering of "not found" broken image icons - all things I knew I had tested.  What the?!

Well this post is getting long so I'll just cut to what I learned.

1) The Firefox I was using with the Google Sites editor did not display broken image icons.
2) The Sites editor, somehow, created broken img tags as a result of my cutting and pasting (never did figure out how that happened).
c) Because Firefox did not display the broken img icon, it also failed to cut and paste in an expected manner.  As a result, each time I cutted and pasteded, I'd get an additional copy of the broken tag,  Awesome!  On some lines that had a gif of a little bullet at the front, I had one, two, even three broken images!  All invisible in the editor, in Firefox, but sore thumbs in Chrome!
4) Since the templates were wrong, all the pages I converted to the templates were wrong.
5) When you edit and save a Sites page, it does not refresh and show your edits the first time you go back to it from another page - you have to expressly refresh it.  As a result, when I my edits created errors, I did not see those errors when I went back though to test everything.  I had even followed links that ere actually invalid!

Awesome!

(Next time, how much fun it is to load images into Picasa Web Albums!  Maybe.  Or something else...)