Archive | 2010

PySIG notes, 25-Feb-2010: CSS

By Ted Roche on March 1, 2010 in CSS, Home Page, HTML, LAMP, OpenSource, Python, Technology, Web Development

Six people braved miserably wet weather to attend the February meeting of the Python Special Interest Group, held as usual on the fourth Thursday of the month at the Amoskeag Business Incubator.

We had a brief set of introductions and announcements of upcoming meetings. We hope to host a discussion of PyCon 2010 presentations by PySIG members next month; details to be worked out, stay tuned.

I’ve seen this presentation seven times and I think this was the best. Along with the Introduction to CSS, I added a “sneak peek” preview of HTML5 and CSS3 and discussed the support (finally!) for CSS 2.1 in Internet Explorer 8 and how that meant the leading browsers all had support for some intriguing features as outlined in the SitePoint book, “Everything You Know About CSS is Wrong!” There was lots of give and take with the audience, and a few side trips off-script to cover an issue someone wanted to know more about, and a war story or two. Ben Scott was heckled in abstentia.

Slides can be found at http://www.tedroche.com/Present/2010/css/css.html.

Thanks to Bill for arranging and promoting the meeting, to the Amoskeag Business Incubator for the fine facilities, to Laura and the Hopkinton High girls basketball team fundraiser for the M&M cookies, and to all who attended and participated.

Notes from NH Ruby/Rails group, 15-Feb-2010, Brian Turnbull and Object Oriented Programming

By Ted Roche on February 19, 2010 in Apple Macintosh OS X, LAMP, OpenSource, Ruby, Technology

Despite being President’s Day, February 15th’s meeting of the NH Ruby group got 14 attendees. Held as usual at RMC Research in Portsmouth and hosted by Tim, a good time was had by all.

There was a round of introductions so everyone got to know each other. Announcements including Leslie Poston’s NHTweetup calendar, and the Rails Camp NE. Rails Camp is only a month away and down to a few last seats – don’t miss it!

Brian presented “Object Oriented Programming” — you can find the slides here. The presentation was a good high-level overview of OOP, as seen from the Ruby perspective. Brian noted ways in which Ruby differed from C++ and Java. There was some very good discussion and some teasers of future presentations: Mixins were thought too complex to try to squeeze into this presentation, and Brian is developing another talk, “The Complete Class,” which will include a discussion of all of the methods, properties and attributes a class should have to encapsulate best practices. I’m looking forward to both of those discussions.

Brian finished with two puzzles. Having covered the principles of OOP, Brian handed us an interesting problem to code: a 3×3 sliding tile puzzle. It’s great to see actual code being developed at the meetings, and it was a good challenge in that we all understood the problem domain. We broke into small groups and started modeling the problem. At the end of the evening Brian presented his model and code.

The bonus challenge involved taking Brian’s model and solving a particular puzzle in the fewest steps possible. I worked with a team that took this one on, repeating the classic steps of invoking recursion, discovering the limits of Ruby on the Mac for stack overflows 😉 and failing to properly store and retrieve states and scopes diving in and out of the recursion. While we didn’t finish the solution, we had some great discussions on the various ways to solve the problem and all learned more about working with Ruby, which after all is the point. Brian also posted his solution to finding the shortest steps to solving this problem.

Thanks to Tim and RMC Research for hosting us in their fine facilities, to Brian for organizing, pizza and the presentation, and to all for attending and participating!

Notes from Seacoast LUG, Caroline Meeks and Sugar on a Stick

By Ted Roche on February 9, 2010 in LAMP, Linux, OpenSource, Python, Technology

The Seacoast Linux User Group met last night, as they always do on the second Monday of the month, in Morse Hall Room 301 on the UNH Durham campus, at 7 PM. Kudos to Robert Anderson who’s been running the group… well, forever. Sixteen people attended last night’s very interesting meeting, which featured Caroline Meeks speaking on “Sugar on a Stick.”

Caroline’s been involved in Open Source since 1999 and is very interested in education. Her business, Solution Grove (http://www.solutiongrove.com) specializes in Open Source learning and knowledge management. She’s currently studying at Harvard Graduate School of Education and plans to complete her Masters in Education this year. She spoke (and demoed) enthusiastically about the activities available on Sugar and the remarkable effects they had on kids, leading to very positive educational outcomes.

Sugar on a Stick, a project from Sugar Labs, is an effort that puts the Sugar desktop (started on the One Laptop Per Child machines) onto a USB stick so an educational computer is available to a child any time they can access a computer. (SugarLabs is a spinoff open source project, with it’s own Sugar Labs Oversight Board (yes, SLOBS) and an all-volunteer force.) Caroline presented what Sugar on a Stick can do now, how it’s working in and out of schools, discussed the technical hurdles they are running into and made an appeal for help in testing/debugging/building, especially on Ubuntu’s project, the Sugar Remix.

Sugar on a Stick addresses the Achille’s Heel of the One Laptop Per Child program: despite a number of successful pilot programs, most deployments of OLPC haven’t resulted in each child having their own computer that they could keep with them, take home safely and use fulltime. When children have to share computers, or only get an hour at the lab, they are missing out. Sugar on a Stick lets the kids take their USB sticks with them and use them in whatever computer is handy. They can run their projects on Mom or Dad’s computer without harming that machine (or vice versa!) and can play whenever a machine is available.

Some games and educational programs don’t work at improving outcomes. One attendee cited an example of a well-known reader game. A study revealed that scores went _down_ after six months of using the reading program. The attendee referred to it as the “Drill and Kill” syndrome.

There’s lots of work that needs to be done on the project. The current version, based on Fedora’s Live stack, was developed in an era of much smaller capacity USB sticks and made compromises that aren’t needed any more. The compressed filesystem is suspected of being a problem with the corrupted stick phenomenon, which occurs too often to consider the project “ready for prime time.” Caroline said that, with a classroom of kids working Sugar on a Stick, there would always be one or two corrupted sticks. That’s too much data loss, too much frustration and disappointment, and too much disruption to be suitable for a classroom environment.

SugarLabs need mentors (those of us in LUGs) to finish making the software work. There’s not a lot of money in it right now, although they are looking at all possible grant sources. There’s a lot of enthusiastic high school students who need help pointing them in the right direction. College students have an opportunity to use a “Do Something” grant to provide compensation for working on this project. The call to action is for mentors and those familiar with the internals of Linux, especially Ubuntu’s live media functionality, to coach, mentor, supervise and help out in getting the next version of Sugar on a Stick, the Ubuntu Sugar Remix.

Prezi was the presentation software http://prezi.com/ Caroline was using. It was pretty neat. Her presentation can be found at: http://prezi.com/kuuhqwmkxxtm/ Caroline’s presentation and demonstration were quite impressive, and her obvious enthusiasm for the project lead to an energentic question-and-answer session at the end.

Thanks to Caroline for the presentation, to Robert and UNH for hosting and all for attending and participating!

Notes from CentraLUG, 1-Feb-2010

By Ted Roche on February 2, 2010 in LAMP, Linux, OpenSource, Technology

Five people attended the February 1st meeting of the Central New Hampshire Linux User Group. We met at Room 146 of the New Hampshire Technical Institute’s Library from 7 to 9 PM.

There were lots of interesting discussion. Ed was attending for the first time, and is getting back into software engineering after some time in another career. He had some questions on what the different distros were and how they worked, and there were, of course, plenty of opinions. Susan had some updates on her research on the BF scheduler, the bleeding-edge Ubuntu releases, realtime kernels, and the Dragon Naturally Speaking application. I reviewed some of the upcoming meetings, and there was a lot of interest in the Seacoast LUG’s “Sugar on a Stick” presentation and the Cascading Stylesheet presentation at PySIG at the end of the month.

Mark McSweeney made the main presentation. Mark works in a small office with a few partners, and budgets are tight. A few years ago, they had deployed a Microsoft back end and discovered that there were no satisfactory solutions for spam filtering on the Exchange server they had as a mail server. Mark came up with a very effective and economical solution using PostFix, Amavisd-new, ClamAV, DCC, Razor, Pyzor and SpamAssassin. Mark’s slides can be found at http://wiki.gnhlug.org/twiki2/bin/view/Www/SpamFilter, including links to the solution he followed, an updated version of which can be found at http://www.freespamfilter.org/

Member Susan Cragin will be making the presentation at out March 1st meeting, on the Dragon Naturally Speaking 10 program running on WINE. Stay tuned for more details.

Thanks for Mark for his great presentation, to the NHTI and Library staff for the great facilities, to Dave Rose for bringing the projector, and to all for attending and participating!

Visibone, a source of great reference guides and online utilities

By Ted Roche on January 14, 2010 in CSS, Home Page, HTML, JavaScript, MySQL, PHP, Technology, Web Development

One of my favorite tools for the past couple of years has been a web developer’s reference guide from Visibone. The book has rarely left my desk, within arm’s reach, to help out when I just can’t remember all the options for an HTML tag or a CSS style. While there are some great online references, having it all in a couple sheets of paper makes it easy to find what I’m looking for (especially if I couldn’t remember if it was text-something or font-mumble) and the reference has also let me browse around the dusty corners and learn something I didn’t know.

Recently, I did some web development using XHTML 1.1 and CSS 2.1 and realized my 2004 version of the guide was getting out of date. I was pleased to see many of the pages had been updated to a 2009 version. After reviewing the many options, I chose to go all in and bought the Everything Book, a step up from my earlier version. This one includes cheatsheets for PHP, MySQL, JavaScript, DOM, HTML, CSS, HTML special characters, web colors and a great index. The reference not only includes broad coverage of each topic but many side notes and compatibility guides (for CSS, the IE-Netscape-Opera-FireFox-Safari compatibility color coding is tremendously useful!)

There are a number of bonus references available on the Visibone site at no cost. Check out the color lab, the color swatches for many of the common graphics programs, the online color codes reference, and excerpts from all of the various reference materials. In addition to reference book, Visibone offers posters, charts and mouse pads. The web site is worth a visit; it’s charmingly quirky, retro, opinionated and clearly individualistic.

Semantic markup and styling of data entry forms, IE falls short

By Ted Roche on January 8, 2010 in CSS, Home Page, HTML, Web Development

Somehow, in my 10 years of working with HTML, I had missed the fieldset and legend tags. I’ve just started in on a web site redesign where they can be used to great effect and nice semantic markup. The fieldset tag is intended to be used as a container for grouping related input items in a form. By default, the fieldset has a transparent background and a thin black outline around the fields. The fieldset can contain a legend tag that appears by default in the upper left corner of the black outline as a title for the grouping. Both elements can be be modified with CSS styles to match and complement the rest of the page design. Here’s the basic HTML snippet:

<form...>
 <fieldset><legend>Ship To Address</legend>
 <br clear="all" />

 <label for="Building_or_Hotel">Name of Building/Hotel:</label>
 <input type="text" id="Building_or_Hotel" size="25" maxlength="50" />
 <br clear="all" />
...

</fieldset>

And the applicable CSS to make the form look pretty includes:

/* Styles for legends, the title atop the fieldset */
.dataform legend {
 background-color:rgb(137,111,43);
 color:white;
 font-weight:bold;
 margin-left: 0.5em;
 padding:0 1em 0 1em;
 }
/* Fieldset groups a set of inputs in a visual container */
.dataform fieldset {
 border-color:rgb(137,111,43);
 border-style:solid;
 border-width:1px ;
 background-color: rgb(93%,89%,78%);
 }

Results in a data entry form that looks like this:

Using CSS to add visual effects to the elements can yield some pretty sharp results while still having the speed and minimal bandwith of lightweight HTML and CSS text files. In addition, using the semantic fieldset and legend elements provides additional information about the form fields and their relationships in a machine-readable format, rather than just splattering a bunch of colored div boxes and styled text on the form. This is a great aid to tools used by the vision-impaired to provide more context to their users, and to search engines trying to derive the context of your forms.

Compatibility between different browsers is not too bad, though things could improve a bit. FireFox 3.5x, Chromium 4.0.285.0 (on Fedora, thanks, Spot!) and Safari 4.x appear dead-on the same (the screenshot above is FireFox 3.5.5), but there is an outlier and no one should be surprised to discover it’s Internet Explorer. Even in version 8, perhaps the most compatible browser Microsoft has shipped since the now-legendary IE5.5/Mac, things are just different. For some reason, the IE8 developers decided that the background color of the frameset should extend out over the border, to the edge of the legend, resulting in this less attractive appearance instead:

For IE7, the background color doesn’t appear at all, which might actually be better than to have it appear incorrectly. (Update: no, my bad, it just doesn’t like rgb values expressed as percentages.) So the appearance definitely won’t be as sharp for your IE users as for any other browser user. (Yet another reason to encourage your clients, friends, associates, neighbors and strangers on the street to avoid Internet Explorer. We can eliminate it in our lifetimes.) (UPDATE: there are, of course, work-arounds. Here are a few suggestions that might work for you from Sitepoint and CommunityMX and Matt Heerema.)

So, the next time you’re called upon to draw up an HTML data entry form, keep in mind that you can group your elements with fieldsets and use legends to add more contextual information to your design.

“Web Form Design: Filling in the Blanks” – a review

By Ted Roche on January 6, 2010 in Home Page, Web Development

Title: Web Form Design: Filling in the Blanks

Author: Luke Wroblewski

ISBN: 978-1-933820-24-8

Published by Rosenfeld Media, 2008

In the nineties, I used to do a lot of presentations at conferences of computer programmers. I used to enjoy doing “concept” presentations; not so much focusing on “how-to” as to “why” and “what” to do. When I set the audience’s expectations correctly that they were going to be exposed to new concepts, I got a good reception. When I failed to make that point clear, I would inevitably get comments in my speaker’s review of “Great idea, but where’s the code?”

If you’re looking for the code, look elsewhere. This is not the book for you. If you are looking for the concepts, the big ideas behind user interaction on the web, how to get information from the browser, how to successfully convert the most browsers into customers, why different alignments might make a difference in accuracy, speed and satisfaction in filling out forms, this is the book for you. Luke Wroblewski is an experienced professional in the field of HCI (“Human-Computer Interaction”) or UX (“User Experience”) with some impressive industry experience. This book shows a thoughtful approach to “how do I get people to fill out a form, quickly, pleasantly, correctly?”

So as not to get lost in the weeds of HTML vs. XHTML and CSS 1, 2, 2.1 and 3 varying levels of compliance, Luke talks forms purely from the user standpoint: we see excellent cropped screenshots of forms, focused on the individual elements under discussion. (Rosenfeld Media has done an excellent job of producing a beautiful book: heft, thick pages, rich colors and fine printing.) The book is divided into three sections: Form Structure, Form Elements, and Form Interaction. Each section assumes some base knowledge, thankfully, and doesn’t start out trying to explain why you’d use a checkbox vs. a radio button. And he’s frank that there rarely is One True Answer (at one point, calling out, “All together now: ‘It depends'”) but talks about empirical testing of speed, correctness, and the results of studies monitoring user’s eye movements, pauses and mouse movements to determine which layouts work and which confuse.

If you spend a lot of time designing forms, the 215 pages of this book are well worth a read, and don’t be surprised if you find yourself going back to the book for a refresher.

Everything You Know About CSS is Wrong! – A review

By Ted Roche on January 1, 2010 in CSS, Web Development

Well, almost everything

Authors Rachel Andrew and Kevin Yank almost lost me at “hello” with their book titled, “Everything You Know About CSS is Wrong!” ISBN 978-0-9804552-2-9. I’ve never liked the “Dummy’s Guide” book for the same reason — I’m not a dummy — and I’m fairly confident (and hope my clients are well aware) that my CSS knowledge, while not encyclopedic, is better than average, and I’ve delivered some fairly good web solutions.

However, the first goal of selling a book is to get attention, and the title surely does that. And the opening line of Chapter 1, “The problem with CSS is that CSS is too hard.” Okay, I’m hooked, reel me in. (By the way, you can download the sample chapter 1 & 2 from the SitePoint web site; start at http://www.sitepoint.com/books/csswrong1/)

The reality is that the book shows one of the newest features, now available in all of the current brand of browsers, with the late release of Internet Explorer 8, of table layout options in the display attribute. After years of preaching that HTML table layout is less desirable than CSS layouts, this can be a hard sell, but Rachel and Kevin make a good case that a tabular layout of tables, rows and cells, but rendered from CSS and not HTML, is the best of both worlds. Chapters 3 & 4 show the equivalent layouts of many of the common design problems we run into (and perhaps fall back to using tables) and how they should work both with the new CSS 2.1-complaint browsers and how to fall back gracefully into a degraded but workable layout for earlier browsers. Chapter 5 gets into some very exciting layout possibilities that will be coming in the next couple of years as the CSS3 specification gels.

A big plus for the book is that it is brief: 111 pages you can get through in one or two sittings. The graphics clearly show the developing examples. The code extracts are clear (and all the sample code can be downloaded from the web sites). And the writing is clear and well-edited.

The book is well worth the $29.95 cover price, but keep an eye out around the SitePoint site (and their Twitter feed) to catch one of their frequent discounts.

Newer posts

Navigation