Tables + CSS (and captioning an image)

For those of you who use CSS in web design (or have been following its evolution), you may remember the battle cry of “tables are dead” from a few years ago, which was soon followed by rallying cry “Long live tables!”

According to the thinking (and gurus) at the time, EVERYTHING that could be done with a table could be done with div layout and a little creativity. In spite of the fact that tables can easily resolve some very tricky problems and can be styled with CSS, tables are still kind of a dirty word in web design.

I’ve had a few attempts to go tableless; some very successful, some not so successful. My least successful tableless adventure, happened in 2005. As part of a class project, I decided to create a tableless and very graphics heavy website. The tableless part was easy until I decided to embed flash. Without a table to control the size output, there was no way to force IE and firefox to render the flash movie the same. Believe me, I searched high and low. Nope, not doable. Because the “lesson” or project challenge that I was supposed to be learning was tableless layout, I was stuck with a website that doesn’t render perfectly in IE and firefox (although to be honest, most people couldn’t see the problem).

A table would have been the easy answer. Although I shy away from tables, I do find they still have value in web design, as I re-discovered just recently.
For the magazine (and the pacercms dev group), I’ve been working on the rss feed output. The original feed outputted the summary (the first feed image), but my goal is to output the whole magazine in a readable format, including images, links, and proper line breaks.

The easiest way to fold the images into a rss feed is through an embedded image (as in my new version of the feed). However, with an embedded image, there is no easy way to caption it. Sure, alt tags and names can provide popup and additional info, but I need to be able to easily and visibly include copyright info, author info, etc. AND have it show up in the feed in context, not at the bottom or top of each item.

Tables to the rescue! Using the caption tag, I am able to add both a caption and locate it below the text (actually, in my case, an image). I am also able to style the table so that it renders the same in each article: the placement will be the same, the padding will be the same, etc.

I can’t believe how easy this is and I also can’t believe that I had forgotten how useful tables are.

http://www.aurora-il.org/table_test.htm

the always wonderful, alistapart.
http://www.alistapart.com/articles/practicalcss/

Google site search webinar

New! Google Site Search Designed for Webmasters

Register Today

Attend the webinar and get:

* Entry to win a free Google T-Shirt

Attend this webinar and hear:

* Overview of Google Site Search
* Setup and technical details
* Customer case studies
* Live Q&A session answering all your questions

“Google Site Search: Designed for Webmasters”

Google has recently launched Google Site Search, a hosted website search solution that brings the relevancy and ease of Google to your website. Google Site Search has been designed specifically with webmasters in mind, for many reasons:

* Google relevancy - Leverage the high relevany algorithms that power Google
* Customizable - You can customize the search results to your look and feel
* Setup in minutes - As a hosted product, setup just requires a dozen mouse clicks on a web-based form
* Administrative control - New biasing features increase your administrative control

Webmasters have always recognized the importance of website search, but have so far not been able to get highly relevant website search that is easy to setup and maintain, for a low price. Until now. Attend the webinar and learn about this exciting new product from Google.

Online workshop XML in Libraries

Nifty little online workshop about XML in Libraries — very well organized and easy to follow. Covers the basics of XML to writing XML, with lots of exercises.
http://infomotions.com/musings/xml-in-libraries/

drupal and libraries

| View | Upload your own

Presented at Computers in Libraries 2008 conference

Link

Various web bits - Firefox3.0, image editing online, and make your own comix

• Good overview of Firefox3.0 in terms of web editing is located here
• I uploaded a rather large (and upside down) photo to pixenate, a free online web editing tool that even works with facebook.Pixenate tools include zoom, crop, resize, rotate, red eye, whiten, saturation, a few other features. Pretty nifty and easy to use. When you’ve finished, you can import to flickr or save.
• Make your own comic here

those strange domain names on ‘net

A brief article from the Washington Post about naming conventions on the ‘net.

Best web authoring tools for new web editors

Occasionally, I answer a question and I think, hmmm… maybe I should turn that into a blog post…

In response to a question on the best web authoring tool for someone just getting started — under consideration - a content management system (CMS) such as drupal as well as creating individual webpages.

To CMS or not?
I think it depends on several factors: access authority to the website server and whether the server meets the minimum requirements of a particular CMS (very important), as well as the purpose of the website, the size of the website, and a consideration for the content and number of contributors/authors to a website.

The advantage to using any CMS is that it is relatively easy to generate content for the general user, there are often built in extensions/modules to provide dynamic content, and these usually work well for larger sites (but can be used by small sites, too.) Installation, configuration and design can be sticky points, depending on the installer’s experience, access to site server, etc.

Individual pages + templates
For a small mostly static site with limited access to a server or run by a small number of web editors, writing or generating code + CSS is probably the easiest. Dreamweaver is certainly popular in terms of generating webpages and CSS. Templates can be created to minimize maintenance work.

Dreamweaver can also work with php, asp, etc. to incorporate in dynamic content (such as RSS feeds, etc.). Dreamweaver has the option of a graphical, code, or a combination of both interface, which is nice for those who are just learning code. I know quite a few happy Dreamweaver users. I haven’t used the latest version of Dreamweaver, but I have found previous versions a little clunky when editing an existing page that was not created by Dreamweaver, especially when importing CSS (I confess, I don’t use Dreamweaver on a regular basis).

As for free (or opensource) webpage generators, I would check out Nvu (which is based on Mozilla Composer code base). It looks very interesting. I used Netscape Composer eons ago. It was easy to use, but I’m not sure how the code quality and coding capability have held up over time.

http://www.nvu.com/index.php

Amaya is also an opensource web editor which can generate xml. Another project which looks interesting.
http://www.w3.org/Amaya/

In short, web design is about developing and implementing a plan using appropriate tools (software, databases, coding/scripting, etc.) and resources to create a web site meeting the content, design, and user needs for a particular person or group while providing the greatest ease of maintenance.

There are many different kinds of tools out there to create code for websites; it’s just determining the best fit (and hopefully adherence to code standards, too!). I do think that all web designers should have a fundamental knowledge of basic html and CSS, so that they can at least control the layout and design of their websites (i.e., keep them from looking so ‘out of the box’ and perhaps, correct problems, if/when they arise).

a better notepad.

wow, a much better notepad than notepad! this thing rocks.

google vs. yahoo (interesting little visual)

Sometimes I find the most interesting things on the internet…

A cliché true, but I found this little google vs. yahoo comparison today. I’ve no idea
of its accuracy (but I would think it probably is), but a very neat little tool to compare results ranking for a particular term in yahoo vs. google.

will portals win the social networking war?

Finally, some real contendors in aggregating social networking — a centralized spot to collect all of YOUR web 2.0 stuff! Isn’t it funny how there is all of this “stuff” and then the next step is to organize it and streamline it (sounds like cataloging, no)? Create the content and then organize it!

Pageflakes has a lot of functionality in terms of creating a centralized social networking presence , plus the ability to pull in even more content. Unfortunately, every “page” that you create has the same url (here is my page). It would be better if you could create unique pages with unique urls.

Other options include spokeo, profilactic, profilefly, and even google might be getting into the act if socialstream ever goes public….and there is about a million more in the works, it seems. Socialstream looks promising as does profilactic. I’m not sure about profilefly.

Anyhow, a brief post about portals vs. social networking working sites:
http://www.micropersuasion.com/social_networking/

..and how to aggregate your social networking sites:
http://mashable.com/2007/07/17/social-network-aggregators/

Pageflakes Update: There IS a unique URL for a pagecast. I’m not sure if this functionality was nonexistent when I set those up (lots of enhancements since then) or if I just never ever found it! When logged in, go to profile (click on your login name to get to the profile), and there will be a list of all pagecasts, rolling over the pagecast name displays the URL. The unique URL does not appear when logged in on the pages, though. In pageflakes when logged in, you see all of your page/pagecasts as tabs. These tabs do not display as unique URLs (which makes sense in some ways, but in others, makes it less apparent that there is a unique url for each page/tab!) Thanks for the anon tip! Much appreciated!