December 30, 2007

End of Support for Netscape web browsers - The Netscape Blog

I can't help blogging this news from Netscape. I was surprised when version 8 of the Netscape browser came out because I thought all of Netscape's browser development had been turned over to the Mozilla Foundation. Version 8 was neat, though. It let you switch between the Firefox engine and the IE engine, so in one browser, you could check how a page would look in those two browsers. Version 9 removed that feature, so I really did not see a reason to use Netscape over Firefox. And I guess few others did either.

Still, the end brings back memories of the excitement of the early days of public access to the Internet. Netscape was not only significant for bringing graphical browsing to the public, it was also the beginning of the tech boom of the 90's. The Netscape IPO was the start of the idea that there was a ton of money to be made by financing Internet applications. I remember seeing Marc Andreessen being interviewed the morning of the initial offering after he had just become a multi-millionaire, or maybe a billionaire.

The thing about Netscape that scared Microsoft was the idea of the browser as a platform for applications, making the operating system irrelevant. That idea is still being pursued. One can only wonder what might have developed if Netscape could have maintained its market share and stayed independent instead of being subsumed into AOL.

December 23, 2007

January Meeting Rescheduled

Please note that due to a scheduling conflict at the school where PACS meets, the January meeting will be held on Saturday the 26th, one week later than previously scheduled.

December 13, 2007

December 15 Meeting Announcement

The next session of the PACS CSS Workshop will be this Saturday, December 15, at 9 - 10 am.

We finished up on styling tables at the last meeting. This month, the topic is IE Hacks. I will use an example that I picked up at a seminar to show a couple of problems with Internet Explorer when it comes to positioning elements using CSS. I thought the presentation was a good overview of a subject that I keep hearing about but never really had a good handle on.

See you Saturday.

December 09, 2007

Bookmarklets, Links and Favelets for the Busy Webdeveloper | saulrosenbaum.com

Saul Rosenbaum is a frequent guest speaker at the PACS Web Design SIG. He will in fact join us at the December 15 meeting.

Saul showed us a number of interesting online utilities and resources when we was last with us, and he was good enough to share with me his list of Bookmarklets, Links and Favelets for the Busy Webdeveloper. Some of these he demonstrated at our meeting, and all of them will give you great ideas and save you lots of time and effort.

Thanks, Saul.

November 25, 2007

November 17 Meeting Report:
Good Examples of Table Styling

At the November session of the PACS CSS Workshop, we finished up on the topic of styling tables by working on borders and frames and continued with background images. We tried some samples from a couple of CSS books and concluded by looking at some good examples from different sources.

Here are some additional sites about table styling. Take a look for inspiration, and check the sources to see how the styling is done.

Our next meeting is December 15. See you then.

November 14, 2007

November 17 Meeting Announcement

The next session of the PACS CSS Workshop will be this Saturday, November 17, at 9-10 in room 713.

This month we will finish up the topic of styling tables. There was more to it than I had originally thought, but we will conclude this month by putting the styles all together to improve the appearance and readability of tables.

Our lineup of web-related meetings will be at full strength this month, with Javascript back and Flash scheduled as usual, and we will be doing design at the Web Design SIG. All that and those frosted donuts.

You might note an addition to this website--I turned on comments. I am hoping that the Blogger controls will be sufficient to keep out spam. If you want to comment on anything, now you can.

And remember that if you want to receive notices whenever something is added to the CSS Workshop website, just use either the email system or the RSS feed. Links are in the right sidebar.

October 27, 2007

Data Tables and Cascading Style Sheets Gallery

I came just across this site called Data Tables and Cascading Style Sheets Gallery, and it fits right in with our recent sessions on styling tables. The site is basically like csszengarden. Chris Heilmann, the owner of the site, posted a table and invited users to submit styles for it. Each example is the same table but with a different style sheet. If you are using Firefox or another browser that lets you turn off styles, you can see the unstyled table.

There are also links to other sites for further information and inspiration on styling tables.

It's a lot of fun and should give us all some good ideas.

October 22, 2007

October 20 Meeting Report:
More Table Styling

At the October meeting, we continued with styling tables. Our goal for this topic is not just an attractive appearance but also an effective presentation of data. We started with a review of the basics of table HTML and then moved on to some finer points. We then worked on styling the HTML tags.

Much of the styling of tables is the same as any other HTML elements, with things like color, text-align, background, etc. Understanding how a table can be structured with HTML, using the horizontal groups thead, tfoot, and tbody, and the vertical groups col and colgroup, helps to make styling more efficient. There are also specific table styles in CSS: caption-side, border-collapse, and border-spacing. Browser support varies, and border-collapse is probably the most useful of the three.

We also started looking at the HTML border attribute, and we broke it down into its components, frame and rules.

We used this diagram to demonstrate the priorities of elements of a table when it comes to styles: tbl-layers.png.

We will pick up in November with mixing and matching HTML and CSS to make effective table styles that work across browsers. Then we will look at some actual examples of styled tables.

October 15, 2007

October 20 Meeting Announcement

The next session of the PACS CSS Workshop will be held this Saturday, October 20. We will start at the usual time, 9 am. But because the Javascript Workshop is off month, we will be splitting that hour with the Flash Workshop. As a result, CSS will go until 10:30. It's a timely opportunity, as I hope to use the extra time to complete the topic of Styling Tables.

We started this subject in June, and in September, we revisited it with a demo of a calendar that one of our members created for his church's website. We also spent some time on display:none, something that I wanted to get in before we went too far into the year. But that left us with a lot of material on tables still to be covered.

So this month, we will use the extra time to do justice to the topic. We will start with a quick review of what we covered previously, and then move on to some more advanced styling methods. I have learned a lot preparing for these sessions, and I think there will be something new for just about everyone.

Be sure to check the PACS website for details on other activities going on this month, including the expanded Flash Workshop and another Web 2.0 topic at the Web Design SIG.

See you Saturday.

September 27, 2007

Excellent CSS Resource - css-discuss

I recently attended a talk by a web developer who is involved with the CSS Discuss list. They have a wiki at css-discuss. The wiki is notable for two reasons. First, it is a very full set of discussions on topics of interest in CSS. Second, from what I have been able to learn, this list has an outstanding membership, and the big guns in CSS are involved here. So the site should be a great resource for everything to do with CSS.

The home page for css-discuss. org is, not surprisingly, http://www.css-discuss.org/.

September 16, 2007

September 15 Meeting Report:
Headings and Tables

At our September meeting, we followed up on two topics that we had covered in previous meetings.

The main portion of our meeting was spent on techniques for using a graphic to replace a heading. The issue is that you obviously can't have both the heading and the graphic visible, and I had always just given the heading the property display:none to remove it from visibility in a styled page.

What I learned from reading The Art & Science of CSS is that this technique has accessibility issues. As Cameron Adams, the author of the chapter on this subject, told me by email, the reason is that many current text-to-speech readers will ignore elements that have the display:none property. Cameron referred me to this article on screen reader visibility.

We discussed three techniques from his chapter for substituting a graphic for a heading, each with its own pluses and minuses:
  • Negative indent the heading with some high number: text-indent: -9999px; .

  • Put an empty span within the heading and make the image the background of that span.

  • Use a Flash replacement technique, such as described in this article on sIFR.

We finished with a demo by one of our members of a calendar that he prepared for his church group's website. He adapted the CSS techniques for styling a table that we discussed in June. Those techniques were taken, again, from The Art & Science of CSS.

September 12, 2007

September 15 Meeting Announcement

A new season of PACS begins this Saturday, September 15, and the CSS Workshop will be back at its usual time and place, 9 - 10 am in room 713.

Like some popular TV series, we left off last season with a cliff hanger. We were in the middle of talking about styling tables when time ran out. So for this first session, we will briefly review what we covered in June and then move on to finish the topic. Depending on time, we will cover one or two other topics--items of interest that came up over the summer.

We are fortunate that we will again have workshops on Javascript and Flash this year, and the Web Design SIG will start off with a Web 2.0 session. Reed will demo some of the newest ways to present information over the Internet. Don't miss his bagel video!

See you Saturday.

July 26, 2007

National Association of Government Webmasters
Annual Conference in Valley Forge

Readers of this site might be interested in this upcoming event: The National Association of Government Webmasters (http://www.nagw.org) will hold its fifth annual conference in September in Valley Forge. NAGW is an organization for webmasters of government entities at the county level and below.

About 250 people attended the conference in 2006. It is hoped that attendance this year will be closer to 300. The conference brochure is at http://www.nagw.org/mailing/mailing_2007_001.html.

Local web professionals who work with government clients or who would like to expand into that market might be interested in attending the conference sessions or in becoming a sponsor of the conference. There is a range of available sponsorships, and information is online at http://nagw.org/conference/2007/ under the Sponsors menu tab.

There is also a call for speakers at http://www.nagw.org/conference/2007/speakers.php, and there are still opportunities for presenters who would like to participate. Vendors who want to speak would be required to be sponsors. Even without being identified as a vendor, speaking at this conference would be a valuable public service by helping local governments develop more effective ways to use the internet to serve their constituents.

If anyone has questions, feel free to contact me. I am on the organizing committee of the conference as webmaster of a township in Chester County, PA.

June 20, 2007

June 16 Meeting Report:
Styling Tables

At the June meeting, we worked on styling tables, first reviewing the basics of HTML tables, and then using CSS to style horizontal segments using the THEAD, TFOOT, and TBODY tags. We started on vertical styling using the COL and COLGROUP tags, but there is more to do. I uploaded the two demo pages to a new Tables section in Sample Pages.

We will pick up on columns and then move on to borders when we meet again on September 15. We will also spend a little time with the examples that I showed at the Web Design SIG. They were taken from a new book called The Art & Science of CSS. If you were at the Web Design meeting, you know that one of the samples, using a transparent PNG to alternate background colors on rows, did not work correctly in IE6. I wrote to the author who responded by pointing out an error in the sample code. If you get the book, drop me a line, and I will show you the fix, if it is not posted on the publisher's website by then.

Between meetings, I will blog items of interest about CSS that I find. You can check back here at the website to see if there is anything new, or subscribe to either email notifications or RSS feeds. Just look in the sidebar of the site for instructions.

June 11, 2007

New Browsers from Apple and Netscape

It is only a beta, but this is good news for those of us who always wonder what our pages look like on the Apple Safari browser: Apple Introduces Safari for Windows. It is a free download, and it does seem to render pages very quickly, even though it is still beta software. Safari has tabbed browsing, but I do not see any indication that it supports extensions.

Also just released in beta is version 9 of the Netscape browser, available at the Netscape download page. I think it is slicker and faster than version 8. It no longer allows users to toggle between the Firefox and the Internet Explorer engines, but that function is available with the IE Tab plug-in which works in Navigator as well as Firefox.

June 09, 2007

June 16 Meeting Announcement

The next meeting of the PACS CSS Workshop will be next Saturday, June 16, at the usual 9-10 am time slot.

Last month, we finished talking about background images just as the clock struck 10. With this month's meeting being the last until September, I picked a topic that I think we can cover at one session--styling tables.

You heard right. We have been dissing tables as a means to lay out a webpage. But tables are not gone. They have a purpose, and CSS gives us a great tools for making tables do what they are supposed to do--convey information. Along the way, we will attack the concept of "div-itis", or more generally, the over-use of CSS and the corresponding non-use of HTML tags in designing pages.

There is no cafeteria service this month, so pack a lunch, and we'll see you Saturday.

May 22, 2007

Article on CSS Media Types

At the May CSS Workshop, we talked briefly about creating styles for print versions of a webpage. Then at Web Design, we talked about creating styles for handheld devices. So it was great timing that Builder.com just published a nice article on the media types that allow web developers to adapt their sites to different devices. Check out Adapt to your audience with CSS media types.

Note particularly the section toward the end entitled Support. It gives a good idea of what is practical now and what is just academic. There will be more support coming, I'm sure, so it is a good idea to get familiar with this technique.

May 20, 2007

May 19 Meeting Report:
Columns, Faux and Otherwise

At our May meeting, we covered some left-over topics from April. We discussed how background images on a page might not be printed, depending on how the user's browser preferences are set. But you can always set up a print style sheet and use the media="print" attribute to control how your page looks when it is printed.

We then looked again at background-attachment: fixed and noted that the background image can scroll off to the left as the browser window widens if you do not set up the attachment properly.

The primary topic for the month was the practical use of background-attachment to style a page. We looked at an approach to getting around the fact that an element cannot have more than one background attachment, at least as CSS and browsers stand at this point. The solution was to use two div's that occupy the same area of the page, each with its own background image. We then used that sample file to show how a background image can be made clickable, or at least look and act as if it were the image that was being clicked.

We finished with the question of how to use CSS to style a column so that the background will extend the full length of a page. We showed one technique that just uses background-color, and then we looked at the famed Faux Column technique that uses background-image.

I have posted demo files in the Sample Pages section of this site. There are comments in the source. Download the files (and images if needed), and edit away. Let me know if you have any questions.

Next meeting is June 16. See you then.

May 14, 2007

May 19 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, May 19, at 9 - 10 am.

In recent meetings, we have been working on using background images. We have had a lot of give and take during our sessions along with some on-the-fly experimentation, so it has taken longer than I had expected to cover this topic. But I think it has been worth the extra time.

In any case, this month, we will definitely get to styling columns. Getting the background right is a little trickier with a CSS formatted page than with a table layout, but we will look at a couple of ways to accomplish the task, including the famous Faux Column technique.

April 22, 2007

April 21 Meeting Report:
More on Backgrounds

This month, we continued working on background images and spent some time on setting different backgrounds for different elements on a page. The default background color of a webpage is transparent, per HTML specs, so even though background images are not inherited, they will show through your child elements unless you declare either a background color or image for that child. And in case the image does not load, you should always do both.

We put a background on headings and inline elements, and used the background-attachment property to let a background image stay in a fixed position while the page scrolls.

In the process of all this, we talked about alpha transparency of images as well as some philosophical questions on webpage design.

For a quick review of the background properties we have been working with, see this recent post with a link to an article on this subject.

April 15, 2007

April 21 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, April 21, at 9 - 10 am.

This month, we will continue working with background images. We will cover a couple of topics that came up last month but that we left with some open questions. I figured out the answers, and I will clear up all confusion in a matter of minutes. We will also take a quick look at the standard baseline style sheet that Eric Meyer recently published on his blog. I have a link to that article in a previous entry.

Our main subjects will be techniques for using multiple images for backgrounds and styling a sidebar to have a background color that goes the full length of a page. One of the techniques will be the famed Faux Columns, and we should be able to cover that topic in our allotted time.

April 14, 2007

Eric Meyer: Standard Baseline Style Sheet

Eric Meyer recently blogged about a baseline style sheet that he has developed: Eric's Archived Thoughts: Reworked Reset. I found this article interesting because we have had Web Design SIG presentations recently where we have discussed basic default styles as starting points for webpages. Meyer takes this idea to the next level. Check the previous blog for comments by some of his readers to see how he revised the first version.

March 24, 2007

March 24 Meeting Report:
Background Images

At our March meeting, we worked on using CSS to add graphics to a webpage without affecting the underlying HTML of the page.

We began by reviewing the HTML attributes BGCOLOR and BACKGROUND and the IMG tag to show how graphics were added before CSS. We then discussed the CSS properties background-image, background-repeat, and background-position, and then the shorthand property background. Using that property, we can use one declaration to define up to four background properties.

We then used background-image to add a graphic heading to a page, using display:none to hide the H1 heading without actually deleting it.

Next month we will continue on this topic by tying up some loose ends, and then getting into faux columns.

March 16, 2007

March 24 Meeting Announcement

The March meeting of PACS is on the fourth Saturday again this month -- our session will be on March 24, at the usual time of 9 am. There will be no Javascript Workshop meeting in March, so consistent with past practice, CSS and Flash will each expand to 90 minutes and make use of the open time between 10 and 11.

This month we will work on background images. In the process, we will get philosophical about when and how to use images on a webpage. And with the extra 30 minutes this month, we should be able to cover a related technique, faux columns. If you don't know what they are, don't miss our meeting.

On top of all that, we will have another fine book raffle where someone's PACS membership will pay for itself.

Finally, be sure to check out the PACS online store for all your fashion needs.

February 27, 2007

PACS Web Design Book Reviews
Beginning CSS Web Development

As those who have attended the CSS Workshop recently know, I have been using a book from Apress entitled Beginning CSS Web Development: From Novice to Professional. It is by Simon Collison.

My review of this book is now posted at PACS Web Design Book Reviews.

February 25, 2007

February 24 Meeting Report:
Page Template

At the February session of the CSS Workshop, we worked on some more issues involving page layouts. Some of the items were odds and ends about topics from previous meetings. We pointed out that while the HTML tags that create page elements, like headings and paragraphs, also create boxes, and that it is possible to position those boxes to lay out pages, the better approach is to use DIV tags to make the basic structure of the page.

We then went through some exercises in collapsing wrappers and showed that the problem does not arise often. Most likely, you will have a footer at the bottom of the page that will keeep the wrapper open in spite of the floating paragraphs that make up the page columns. Just be sure the footer has the clear:both declaration.

We then worked on a basic format of a page with a header, two columns, and a footer. That template is posted in our samples section. It was based on an example from a new book by Simon Collison called Beginning CSS Web Development.

A List Apart: Articles: In Search of the Holy Grail

We mentioned the so-called Holy Grail at the end of the February session. The name refers to a challenging task in CSS layout -- a three-column page with two fixed-width side columns and a liquid-width center column. For more on this layout, see A List Apart: In Search of the Holy Grail.

February 21, 2007

February 24 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, February 24, at 9-10 am.

We will continue working on using CSS for page layouts. I want to cover a couple of templates that can be reused easily, then touch on some other layout issues if we have time before going on to background images. Putting all these skills together will let you create attractive pages that are within the current HTML and CSS specifications. We will also have some great new books to raffle off at CSS and at Web Design in the afternoon.

There is a full lineup of excellent workshops on tap for Saturday, as usual. Check the PACS website for full details. And while there, take a look at the new "PACS Online Store" where you can buy all kinds of PACS-related items. The link is right on the front page of the site.

If you are interested in Internet Explorer 7's CSS support, there is a new PDF book from O'Reilly called Releasing CSS that covers the topic. Reed just posted my review -- see the Web Design reviews section.

January 22, 2007

January 2007 Meeting Report:
Two-column Layouts

At the January meeting, we worked on two-column fixed width layouts, which are more difficult than liquid layouts. We still use the float and clear properties, employ the DIV tag extensively, and manipulate the CSS box model.

A fixed-width layout needs an outside DIV to create an outer box within which we build our page, and we reviewed the container/wrapper concept.

We looked again at an example from last month of a page with one float and a large left margin. We then moved on to layouts that float both columns and saw that in browsers other than Internet Explorer, floated elements in a DIV collapse the DIV. Two solutions are (a) a spacer DIV which keeps the wrapper from collapsing, or (b) an inner wrapper that is floated and that can then be used to style the page because it does not collapse.

The samples we used are posted for download and experimenting in the Sample Pages section of this site. The files are listed under Layout Techniques. Look at the source of each page for annotations.

Next month we will look at page templates and then review the template that Saul Rosenbaum demonstrated at Web Design. After that, we will do background-image to make the templates look better, another topic that Saul discussed at Web Design.

January 16, 2007

January 20 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, January 20, at 9 - 10 am.

We have been talking about page layout for the last two meetings, and this month I want to tie things together to develop a basic CSS page template. To do so, we will talk about some gotchas that come up with the CSS box model, particularly with different browsers. As a lucky coincidence, one such issue came up at last month's Web Design meeting where Saul Rosenbaum demonstrated how he develops a webpage. I have his sample page, and we can review how Saul handles floats and positioning.

And a note about this site: I have reorganized the Index of Sample Pages (see sidebar) to make it easier to find the demo pages that we have used in past meetings.

January 04, 2007

Article from Builder.com on understanding floated elements in CSS

A recent article called Build a better Web site by understanding floated elements in CSS might be of interest to members of the workshop. This Builder.com tutorial is a simple one-page introduction to float and clear in CSS. The examples are easy to follow, and they reinforce what we have been covering at our recent meetings.

Note the last example which uses clear to position floated elements relative to each other.