Web Design & Development Blog
This blog covers a lot of technical web development issues, focusing especially on Joomla, Drupal, and other open-source CMSes & platforms. Not all our posts are for web developers; we also make sure to write posts for those who are not technical.
04 September 2009 EventList Venues for Google Earth KML
A Google Earth KML-exporter add-on for EventList 1.0.1 for Joomla 1.5.
It lets you provide visitors a link with which they can directly open or download a KML-format file of all your published venues, complete with venue descriptions, links (if the venue contains one), and automatic creation of markers with latitude and longitude.
That is generated from the basic address information for the venue – you do not need to enter latitude or longitude anywhere. There is just one file to upload, but make sure to read the requirements in the readme.txt file that comes with the zip file.
See it in action here: http://www.novamineralclub.org/calendar. Click on the Google Earth icon at the far right above the calendar.
22 August 2009 Morfeoshow RSS Feed Plugin for Joomla
11 August 2009 Let your users have their own calendars!
A Community Builder plugin that can be displayed as a tab on a user’s personal profile, so each user can have a separate calendar. The user just needs to enter the unique ID of the calendar in the plugin parameters in their profile. You can set a default calendar and time zone, and individual users can set their own time zones and calendars as well. This plugin comes with English and Dutch language files. Tested on Joomla 1.5.14 with Community Builder 1.2.1. It should work with or without legacy mode on. Should function in Joomla 1.0 too, though multilingual functionality probably will not work.
28 July 2009 Events and calendars in Joomla
When building sites for customers, I have noticed people often need to announce upcoming events on their sites, and assume they need a full-page calendar displaying a month-view. However, it may in many cases be easier to display a simple list of upcoming events – even as simple as a single page, for example a regular Joomla article. This is especially true when there are not that many events in a given month. What if you have only two events per month? Is it still sensible to devote all that screen real estate to empty calendar days? It seems more direct to just list the events and their dates in such a case. From the visitors’ point of view, they want to find out what’s coming up, so the fastest way to get them that information is the best way.
The reverse is also true. You may have so many events that it would be silly to cram them on one long page, one after the other. You may even need to set up some event categories, for example academic calendar events versus cultural events.
There are several Joomla solutions (including a couple extensions) that I have used for both ends. In order from simple to complex:
- Simple Joomla article that is manually edited. Requires no additional customer training, but only works for small numbers of events.
- Get a free Google Calendar and embed it. Learn to live with the lack of full control over its styling.
- EventList extension (schlu.net). This is a great open-source extension that displays upcoming events in a very straightforward way. It also lets visitors register (though not pay for) events. With this you can offer visitors RSS feeds and iCal formats of your calendar as well. iCal (.ics) files can be imported into Microsoft Outlook and Google Calendar, and many other calendar applications. It does NOT offer a traditional month/week view except as a module, but that should be fine. Take a look at this recent calendar we did for the Brooklyn Music School.
- JCal Pro, the aptly named Events Calendar (a.k.a. JEvents), for displaying a month, week, or more at a time. JEvents also integrates with DT Register and Community Builder to allow for paid event registrations.
- Take a look at the calendar extensions at Joomla’s site.
08 July 2009 Rounded form elements with CSS3
Web Design and Development
Modern CSS3-compatible browsers such as Firefox and other Mozilla flavors now support rounded corners for form elements. While Internet Explorer 8 may be an improvement over 7, it still does not support the CSS3 standard as well as might be hoped for. Here is an example of what can be achieved:
Note that the second textarea element has a thicker white border, different background color, and different text color. It is easily possible to assign different border colors and radiuses to different elements. It is important to set a background color, even if it is to be the same as the page background color. I have found that if you don’t, your rounded borders may not be displayed.
Sample HTML/inline CSS code:
20 June 2009 PNG fix for IE6
Web Design and Development
Designing and modifying templates (especially for Joomla) I am increasingly finding PNG’s incredibly useful because they maintain JPG quality but support transparency. Problem is (you guessed it), Internet Explorer 6 doesn’t like them. I overcome this by adding this line of CSS into my template’s HTML file’s <head></head> section – in this case a Joomla 1.5 template’s index.php file:
17 June 2009 Armitage Gone Dance Think Punk Videos photos
Web Design and Development
In 2006 we designed a brand-new (and, incidentally, award-winning) site for a New York dance company called called Armitage Gone! Dance. At that time it was designed using Dreamweaver templates, and it was maintained using Adobe Contribute. We recently converted it to Joomla.
Check out the new video and photos of Armitage Gone Dance’s 2009 Think Punk event. Among those in attendance were Lou Reed, Calvin Klein, David Salle, Karole Armitage, Jeff Koons, and Rufus Wainwright.
Enjoy this article?
13 June 2009 Quick CSS Mockups with Photoshop
Web Design and Development
I wrote this article in 2007 for A List Apart, but since then technology has forged ahead, and this technique is now outdated, as the numerous comments illustrate. There seem to be two flavors of comments: designers who appreciated how quickly you could produce an XHTML/CSS mockup pretty straight from Photoshop, and the purists who voiced a vigorous distaste for the dirtiness of this technique, by which they mean that it is not semantic HTML. That is true, but then again, this technique was only meant for mockups, or perhaps as a starting point for a final HTML document. I typically only used this technique for creating quick mockups, but would create the final layout from scratch, coding the HTML and CSS by hand in Dreamweaver and producing the necessary images in Photoshop one by one.
Although the technique is outdated, maybe some of you still use ImageReady and could benefit from this. A discussion of Photoshop guides and slicing techniques is next on my agenda.
Following is the original article, reprinted with the permission of A List Apart and the author (me!):
You need to make a set of web design mockups for your client. You’d like to find an easy way to show these mockups in clean XHTML and CSS code, because plain JPGs don’t convey the full sense of the design, and sliced tables are evil. In fact, let’s forget table slices ever existed.
Caveat: This article is for people who need to produce valid, standards-compliant mockups quickly, with the graphics tools they already use. This is not a production technique for people who want to get the most benefit out of (X)HTML by creating structural, semantic markup. Creating structural, semantic markup, as A List Apart and most standardistas recommend, still takes time, thought, and hand-coding.
WYSIWYG graphics editors such as Fireworks, GoLive, and ImageReady allow you to generate HTML code, but the exported code tends to use tables or absolute positioning. That’s so 1999. So what, then, can these programs do in terms of producing valid and useful code? More than you think. I’ll show you an easy way to produce mockups with Photoshop, prepare them for the web with ImageReady, and clean up the code afterward.
I must admit, Fireworks was a major part of my design arsenal until I started taking accessibility and standards compliance seriously, and I don’t think I’m alone here. The problem I ran into was that I could only export HTML code using tables, when what I really wanted was relatively positioned
div elements. Only with ridiculous hours of coding and copious quantities of caffeine could you convert such a table to relative
divs, and this just steals more time from when you could have been designing more mockups or sleeping. So why start off with a sliced table at all? What I needed was a way to generate clean relatively positioned
divs—or, barring that, code that was close enough that it wouldn’t take aeons to make it play nice with W3C standards. These days, this is surprisingly straightforward with ImageReady.
Make ImageReady CSS-ready
Adobe Photoshop CS ships with a web-focused sidekick: ImageReady CS. Adobe Fireworks is great for vector applications, but less so for raster work. Conversely, ImageReady is perfectly suited for raster work, but less so for vector work (although that’s changing). Using ImageReady, you can export slices as absolutely positioned
divs, which can be easily transformed into relatively positioned
Slice it up
Use the Slice tool to create your slices. Once you’re finished use the Slice Select tool to select and rename each section. For example, you may have a header that will become a
div tag later on. ImageReady would really like to call this “Yourfile_1_01,” but you’ll save yourself some work by giving it a logical name from the start, like “header”. You will use this later on when editing your CSS. The same goes for the content area, any side columns, the footer, and other areas you may want to define.
Jump back and forth between designing in Photoshop and ImageReady until you’re ready to test out your design in a browser. Then, in ImageReady, go to File › Preview In › (insert favorite browser here). See whether your slices look and behave as intended, and modify your optimization settings accordingly. Exported slices will result in JPG or GIF images inserted into
div tags with
img tags; later, you may want to insert some of the images as background images for the individual
Exporting HTML & CSS
Set your output settings: select File › Output Settings › HTML and change the settings to your liking. Note that you can opt to generate XHTML code. Select “Next” and check the settings in Saving HTML Files.
Select “Next” again; this brings you to Slices. Here you can choose to “Generate CSS.” Next to Referenced, you’ll see a dropdown menu that allows you to choose By ID, Inline, or By Class. Select By ID. You can also get detailed with slice naming conventions if you’re so inclined.
Export your mockup to (X)HTML/CSS using File › Save Optimized As, and choose a location that makes sense to you. Note that ImageReady will create an
/images subdirectory in the same location where you save the HTML file. (Line wraps marked » —Ed.)
Example of ImageReady-produced CSS
Example of ImageReady-produced HTML
(Line wraps marked » —Ed.)
We now have slices consisting of absolutely positioned
divs, with the CSS contained directly in the HTML file’s
head. Maybe absolutely positioned
divs are just what you need—if so, grab a cup of coffee and relax. Otherwise, let’s take things a step further by converting these
divs to relative positioning.
First, make a copy of the ImageReady-generated HTML file and open it in your code editor (e.g. Dreamweaver, BBEdit, or another favorite editor). You’ll probably want to wrap all your
divs inside an outside container
div to control your mockup layout more precisely. ImageReady exports the CSS slices as
divs and wraps them in a container
div called “Table_01.” Rename the “Table_01”
div (to “container”, for example) and style it with CSS as you see fit. If you don’t need a container
div, just delete the “Table_01”
div and its CSS counterpart.
Next, switch all your other
divs to relative positioning by removing the absolute positioning declarations and letting them inherit relative positioning. Pay special attention to your floats and clears. You could try to switch all your
divs at once, but a more precise and predictable way to go about it is to change one
div at a time and check each
divs that contain images, decide which should be turned into CSS background images and which really deserve an image tag. Some slices (a content area, for example) may be of a single color and thus should be set using a CSS style without any images. Set the overall page background separately using your stylesheet. If this were a production layout, you’d probably move your CSS to an external stylesheet, but that may be overkill for single-page mockups. Validate your code and you’re good to go.
Example of converted and cleaned-up CSS
You’ll need to add appropriate height and width declarations back in if the image in this element becomes a background image in a later revision.
Example of converted and cleaned-up HTML
(Line wraps marked » —Ed.)
When you need to revise the mockup, you can simply make your graphic changes in Photoshop and ImageReady, then re-export the HTML file, overwriting the original one and its supporting images in the
/images subfolder. But before you do, make sure you’ve saved your converted, cleaned-up HTML file under a different name so it and its stylesheet will refer to the updated images without the danger of being overwritten by your newly exported revised HTML.
12 January 2009 Hallmark Heroes with Regis Philbin: KnowitAlz.com
KnowitAlz.com, an Alzheimer's blog we helped design and build, was featured on a Hallmark Heroes with Regis Philbin in December 2008.
The Hallmark Channel presents, “Hallmark Heroes with Regis Philbin”, a portrait of Kathy Hatfield, who cares for her 80 year-old Dad, who has Alzheimer’s and lives with her. She took the diagnosis and turned it into action by creating her Award Winning website, www.KnowItAlz.com and is developing an eco-friendly family care home for people with early stage dementia. A story of love and hope.
Page 5 of 5