Planet Drupal

I’ve been working with the Drupal community on design projects for coming up to 12 months now - a splash in the ocean compared to many in the Drupal community but long enough to get a feel for how things work.

The ‘paid’ time I have left on the d7ux project is almost run out and I’m left feeling frustrated - not just by the work that I’d like to be able to continue to do on the Drupal 7 User Experience, but also by the great potential for building a critical mass of great designers and UX people in the Drupal community and the different types of activities that could spur this on, and the impact this could have on Drupal adoption and sustainability as an Open Source software project. So much opportunity, so little resource.

Despite the fact that I think there are probably a contingent within the Drupal community who are hoping that Mark & I are just going to go away once we stop getting paid for d7ux, the fact is that this is unlikely to happen any time soon. For various reasons and in various ways, I think we’re both kind of hooked on Drupal, or at least it’s amazing community.

Having said that, I know for myself it will be difficult to carve out any significant amount of time from the paid project work I’ll move onto and the demands joy of a family with a young child - I have long since given up on a social life!

At best, I hope to commit to spending a hour a day (or 5 hours a week) on Drupal post the official d7ux project. This is *far* less than others commit for ‘free’ each week but much more than many are able to consider committing.

(Having said that, have you seen that Matt Webb video I posted just before this post? What are you doing with your 100hrs?)

Here’s the thing… I really want to make those 5hrs a week count. At the moment, the logical place to spend those hours is bickering in the issue queue. Whilst some time does definitely need to be spent there, I think for the Design & UX community to spend too great a proportion of their time battling out grassfire by grassfire is not productive use of our time… but what can we do with just 5hrs?

I think the answer lies in crowdsourcing our time around big projects. Creating and managing projects that lots and lots of people can contribute an hour here and there to, and yet great and coherent value is created. I have some thoughts what kind of projects these might be:

• creating/maintaining/applying an design pattern library
• consulting with developers who are in the early stages of developing a module that has UI elements and providing them with assistance *before* they code a UI
• concentrated work on known difficult interfaces that should be easier. (ahem… views… ahem)
• more microprojects!but my absolute favourite pet project is:
• crowdsourced usability testing video library: create a library of video snippets of usability testing conducted by people around the world and tagged so that they can be used as a datasource to support design decision making AND to be pulled out over and over and over again to help maintain awareness of people-who-use-Drupal-who-are-not-us

Each of these projects (and I bet there are dozens more just as good or better!) provide:

• ways for designers and UX people to contribute in a rewarding way to the Drupal community (contributing to the issue queue is v important yes, but can at times be incredibly frustrating and demoralising)
• opportunities for new people to contribute to the community from their first interaction (rather than being smacked on the nose, told that everything has already been thought of and given a list of issues to read before proceeding),

Growing a vibrant design & UX community within the Drupal community in the long term and allowing Drupal to benefit from that (beyond finally starting to see some gorgeous looking sites that are Drupal-powered) is going to require some nuturing and creativity.

It needs someone to create and faciliate these ‘crowdsourced’ efforts and to promote them with in the Drupal community and within the broader Design/UX community.

But there is one big problem - in order to provide the framework for hundreds of people to start contributing their 5hrs a week, you need someone setting up and managing said framework. I think that this role is a Design Community Manager, I think it needs to be a paid role, and I think it should probably be about 2 days/wk.

So the three questions are:

• this is something pretty different for the Drupal community… is this something we’re willing to try?
• who’s going to sponsor this initiative, as in, put up the cash (and no doubt win the love and respect of both the Drupal and Design communities)
• who is the guy/gal for the job (but let’s answer the first two before we get into this. Be assured there are some great candidates)

DesignBump a popular social voting site for design related topics have just launched a great new modern looking design of their own. The new design which we think looks fantastic very much improves on previous versions and gives a cool modern look to the site. DesignBump is a site we at Social CMS Buzz have been [...]

Maarten Verbaarschot volunteered to take on a Microproject (thanks Maarten!) and for the past few weeks he has been working on interface design for a Media Library for Drupal. There is a great discussion going on in the Drupal.org issue queue that you might want to take a look at.

Maarten is currently working on the third iteration of these wireframes but he’d really love it if you can take a look and give him some feedback - anyone who has ever added an image to a web page should be able to have a say on this interface, so don’t hold back!

In particular, Maarten is looking for some user stories where users would be uploading content using this Media Library interface rather than uploading whilst in the process of creating a ‘node’ (story, article, post etc.). I know I have a couple but if you do also perhaps you can share them in the comments below or on the issue queue thread (if you’re a member of Drupal.org or would like to be!)

He is also working on an interactive prototype for this, and would love a little help from someone with good JavaScript skills so if you’re so inclined, please comment below.

You can see the work that Maarten has done so far here:

* Iteration 1: http://www.flickr.com/photos/mverbaar/sets/72157620755726297/
* Iteration 2: http://www.flickr.com/photos/mverbaar/sets/72157620894822174/
* Iteration 3: http://www.flickr.com/photos/mverbaar/sets/72157620894824094/ (in progress)

We really look forward to your feedback (here, on the flickr photos, on the issue queue, wherever is most comfortable for you).

Thank you Maarten for all your hard work so far! You rock!

And thank you to Maarten’s employers, Merge, for sponsoring a week of his time to work on this project. You rock too!

I have been using FrontPage SlideShow from JoomlaWorks on a number of sites, and would recommend it as a good CSS/PHP route to building a featured slide section that links to promoted content, articles, blog posts, groups, etc. One problem is that it is not free, the cost is around $35 for a license to use it on 5 to 10 domains. A second problem is highlighted by the example of releasing an installation profile for Drupal. We can release all of the code under GPL for the project except for FPSS. So, I began working on a conversion of our FPSS slides into Views Slideshow views.

The easiest way is to create a new content type, for example “slide,” and disable comments, post information, front page promotion, etc. Decide which size you would like to standardize all the images at, and then create a simple div structure with the image only as content. You can create a “views slideshow” view, sort only the “slide” content type, save it as a block or create a panels views block and embed it on a panels page. Use block or panels permissions to control the display. This is fine if you are using only images or banners made in photoshop that combine text and images, but if you want the to be text editable, viewable by search engines, and style-able by CSS, you will need to build a more complex template for your “slide” content type.

TUTORIAL:

1. Goto admin “content types” – create new content type “slide”
+ disable comments, attachments, and front page promotion in the content type form
+ goto themes “configure” – disable display post information for slides
+ you may want to disable the WYSYWIG editor (if any) on the slide node create form.
+ FCKeditor Global Profile: admin/settings/fckeditor/editg
—> visibility settings, add to exclude: node/add/slide
+ set the permissions – or skip if you only want admin to be creating this content type

2. Create a new slide – use a consistent template for this content type to build Views Slideshow displays
+ you can use html, css, php, etc. to create a custom template
+ we are looking to replace the FPSS template we are using now, and will give the template + css as a sample

Template:
+ paste in slide node create form – edit the links & paths to be consistent with your information

<div id="viewslide"> <div id="slideleft"> <div id="slidetop"> <h2><a href="/articles/second-life">Prototype of a Sustainable Virtual Reality</a></h2> </div> <div id="slidenote"> <p>Avatar: Elusyve Jewell</p> </div> <div id="slidedesc"> <p>Unlike any other site on the web, Second Life has transformed the internet into an immersive, 3-D virtual world, a collectively authored mindscape navigated by cyberpunk avatars. How long until the VR goggles appear and we log our first sessions on the holodeck? A look at the future evolution of Second Life. <a href="/articles/second-life">Read more</a>.</p> </div> </div> <div id="slideright"><a href="/articles/second-life"><img width="520" height="206" src="/files/secondlife.jpg" alt="Second Life" /></a></div>
</div>

CSS – paste in style.css or equivalent
+ Note: in the Drupala theme this is in blocks.css

#viewslide { width: 698px; height: 240px; border: 1px solid #B0B0B0; margin: 0; margin-top: 5px; padding: 0;
} #slideleft { float: left; width: 154px; margin: 0; padding: 10px; padding-right: 0; border-right: 1px solid #B0B0B0;
} #slidetop { width: 134px; margin:0; margin-left: 5px; margin-top: -10px; padding:0;
} #slidetop h2 { font-family: Arial,Verdana,sans-serif; font-size: 18px; line-height: 18px; color: #0088BF; font-weight:normal; letter-spacing:-1px; border: none; background: #fff;
}
div.block div#slidetop h2 { height: auto; margin-bottom: 10px; margin-top: 16px; padding-bottom: 3px; padding-left: 0; padding-top: 0;
}
#slidetop h2 a { font-family: Arial,Verdana,sans-serif; font-size: 18px; line-height: 18px; color: #0088BF;
}
#slidetop h2 a:hover { color: #CC3300 !important;
} #slidenote { width: 134px; margin: 0; margin-top: -10px; margin-left: 5px; padding: 0;
} #slidenote p { color:#28488C; height: 10px; font-family: Arial,Verdana,sans-serif; font-size: 8pt; font-weight: bold; line-height: 10px; margin: 0; padding: 0;
} #slidedesc { width: 134px; margin-right: 0; margin-left: 5px; margin-top: 5px; margin-bottom: 12px; padding: 0;
} #slidedesc p { font-family: Arial,Verdana,sans-serif; font-size: 8pt; line-height: 10px; color: #333333; margin: 0; padding: 0;
} #slideright { float: right; width: 532px; margin: 0; padding: 0;
} #slideright img { border: 0; margin: 0; margin-left: -1px; padding: 16px 0;
}

IE7 CSS Fix – paste in ie7.css
+ Note: in the Drupala theme this is in fix-ie2.css

#slidetop { margin-top: 10px;
}
#slidedesc { margin-bottom: 12px;
}
div.block div#slidetop h2 { margin-top: 6px;
}

IE6 CSS Fix – paste in ie6.css
+ Note: in the Drupala theme this is in fix-ie.css

#slidetop { margin-top: 10px;
}
div.block div#slidetop h2 { margin-top: 6px;
}

Note: this code is cross-browser tested in FF, IE7, IE6, Safari, Opera, & Chrome. It includes theme specific CSS fixes that may not be applicable to all theme code & CSS structures. It is configured to work with the Drupala & SEO-Mix themes for the Drupala installation profile.

3. To recreate the full effect of FPSS, you will need to open the images into an editor like photoshop and add a 20px background color: #CCCCCC (fade 64%) “tab” – use Arial font, change the alignment to vertical, and add a “read more…” text snippet along the bottom corner going up the side of the image.

4. Create a few of these “slide” content type nodes (full html) using the template, then goto views and create a Views Slideshow. Settings: page / block – views slideshow list view – fields: node body, no title, sort by random, and 10 nodes by page (filter to recommended 3 in panel settings), node: published, node-type: “slide”
+ Note: Views Slideshow also has its own configuration panels for fade settings, speed, etc.

5. Embed the Views Slideshow – goto panels – “views panes” and create a views block for the view just created (D5) – embed the block in any panels page or use admin/build/blocks to display in thee regions by path
+ You may want to “Set view URL to panel URL” additionally in the views pane settings

6. Goto “taxonomy” in admin and create a vocabulary for the “slide” content type if you want to create more views and sort the slideshows for particular pages.

Summary:

FPSS comes with 7 or 8 different templates at least and has quite a few features, very few of which are replicated here. We basically needed to change from the version of FPSS we were using to an open source alternative and Views Slideshow is a great module. Drupal designers who spend some time to create templates for Views Slideshow will find them extremely useful in serving multimedia content, or as a replacement for Flash in some situations. I also like and recommend FPSS and will probably continue to use it in some sites.

Example:

Views Slideshow: http://drupal.org/project/views_slideshow

FrontPage Slideshow: http://www.frontpageslideshow.net/

Drupal Module: http://drupal.org/project/fpss

Related Posts

• TypeHost Releases Three Open Source Themes for Drupal – Drigg 5.x
• Citigate Cunningham Nominated for 2008 Gold SABRE Award for Acquia Public Relations
• Automattic releases BuddyPress – Official “Sister Project” to WordPress
• Best New Drupal 6 Theme Releases of 2009
• Open Source Micro-Blogging CMS Software & Twitter Integrations

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Replacing FPSS with Views Slideshow in Drupal – Tutorial

Share and Enjoy:

First of all, I’d like to say hello fellow drupalers! This is my first post here, (and also my first ever blog post!) since Greg opened up drupaler.co.uk as a collaborative blog for Drupal developers.

read more

One of our little helpers (Daniel Harris) launched a wiki page to get more detailed info on what you would actually like to eat during the conference itself.

Please have a look and add your wishes. Of course, it has to be something that a great deal of people would eat too.

By doing this, we can then do our very best to be able to offer the most of your wishes possible during the conference, so you like what you see and eat.

First of all a BIG THANK YOU to everyone who has helped us so far with preparing, organizing and spreading the word about DrupalCon Paris 2009, all over Europe and even internationally.

This is your event! You are the community. You are the ones who represent Drupal and we want to have you, the representatives, join us in Paris.
So we need your help to spread the word even “louder” and make the DrupalCon even more Drupalicious, for you.

Because:

• you, the community, are the core!
• you, the community, make the decisions
• you, the community, decide where Drupal is going.

Here some carrots, that will lead your way to Paris in September:

FileField Paths has just hit version 1.3.

The biggest change in this latest version is an improved modular system allowing for better integration options, demonstrated with support for two new modules, the Image module and the Comment Upload module.

Other changes include improved support for the ImageField Crop module, Dutch and Danish translations and various bug fixes.

read more

At the core of all the hype around "social networking," and "social media," is the fact that "social" websites allow members of a website to connect with each and develop relationships without needing the administrators or content editors to mediate these connections. This from the "build and they'll come," school of design and strategy. In any case, even though Drupal is a fundamentally social platform, there is no user-to-user relationship support in the core of Drupal.Read More >>>

The weekend of June 27th and 28th saw over 200 Drupalers, including myself, flock to Denver for the annual DrupalCamp Colorado. Trellon was proud to sponsor the event. The fact that number of attendees doubled since last year shows the growth and momentum surrounding Drupal. This year, the event was combined with an Ubercamp- a gathering of Ubercart developers and enthusiasts.Read More >>>

I recently came across a discussion on LinkedIn regarding the longevity of Drupal. Alex, who posted the question mentioned about how the Post Nuke CMS forked into Zikula, which has lost a lot of its past popularity. We can see how the popularity shifted back in 2005 with Drupal leading the way.

Drupalcamp Colorado 2009 has come and gone. The event garnered over 200 participants - at least half of which came from out of State. Over 40 sessions (if you include BOFs and the opening and closing sessions) occurred over the two days ranging from pure business to the highly technical. Ubercart was heavily presented with Ubercamp partnering with Drupalcamp. The camp was followed by a media sprint.

pingVision presented in quite a few sessions:

• Functional Interactive Design - Laura Scott
• Preprocess functions - the what, why and how - Matt Tucker
• How to Create a Module - John Fiala
• Drupal Security For Coders and Themers - Ben Jeavons
• Web Services With Drupal, or The Acronym Parade: A Dance With APIs - Ben Jeavons
• Studio - a bit more than a base theme - Matt Tucker and Al Steffen
• Project Management -- Agile is not "Cowboy" spelled backwards - Katherine Lawrence

I personally took photos and video in and out of sessions and drafted notes at the panels I attended. Poring over them this last week for posting online had me thinking how extraordinarily good the sessions were this year. The Flickr feed is filling up with photos from several of the participants as well. If you have photos from the event on Flickr, please tag them drupalcolorado!

The event has re-energized me, encouraging me to reengage my community projects head on. It has me getting excited for Drupalcon Paris and the opportunity to interface with a larger segment of our community. Finally it makes me think about where this event will be next year. Perhaps it will have 400 participants with worldwide attendance?

Thank you to the organizers and thanks to everyone that came. It was a great event that pingVision was delighted to sponsor.

Vivek Kundra, the CIO of the United States, unveiled the new IT spending dashboards at usaspending.gov earlier this week. Tim O'Reilly has all the details in his blog post titled Radical transparency: the new federal IT dashboard. In short, the dashboards are designed to help CIOs of individual government agencies get a handle on the effectiveness of government IT spending. The site was built with Drupal.

This is a fundamental change in the way government is going to be run, and it is great to see Drupal play a small role in that. Great stuff!

Your workspace is your castle eh? Just thought I’d share my workspace with you, mind you this is just the Summer office, but it ain’t half bad!

I've just released a new module (fanfare) which seems to work pretty well. I have a couple of silly bug fixes to put up tonight (knew I should've called it "beta") but other than that it works great. It's called Node Reference Variables:
http://drupal.org/project/nodereference_variables

All it does is present a load of stuff (depending on other contrib modules installed and some admin options) via the hook_preprocess_node() preprocess hook for themers to use to do cool theming stuff with Node Reference CCK fields. Main feature I'm using is the jQuery UI tabs it provides.

read more

After some feedback from possible participants, we have a new date for our D7 file system, images and media sprint.

The sprint will now run on Sunday-Monday July 26-27 at the Zivtech offices in Philadelphia.

Also, Aaron Winborn will be joining drewish (a.k.a. Andrew Morton) and some Zivtech hackers for the sprint. Anyone else looking for an excuse to visit Philadelphia and hack on core is most welcome.

We've started a Chipin so we can help get Jon Stacey down from Nebraska to Philadelphia for the sprint - all donations welcome!

read more

Kat Bailey posted a very kind review of my Drupal 6 JavaScript and jQuery book.

From the review:

The book aims to get people with little to no knowledge of Drupal or JavaScript up to speed with creating really awesome functionality, really fast. In fact, its title almost belies the breadth of its scope: although the use of jQuery in Drupal 6 is the one topic that it covers exhaustively, it doesn't skip over any of the basic tools or concepts required to get going with Drupal, and so it would work pretty well as a first Drupal book for any aspiring front-end Drupaler. It covers everything from the ultra-utra-basic ("what is CSS?", "what is a Drupal block?") to Drupal JavaScript Behaviors (and everything else in drupal.js), to JavaScript Theming, to AJAX, to building modules with AJAX functionality, to jQuery syntax, effects, and even writing jQuery plugins!

I've spent the last week or so doing nothing but writing Drupal-centered JavaScript. Every time I reflect back on what JavaScript coding used to be like, I can't help but appreciate the hard work of the jQuery and Drupal JavaScript teams.

read more

Ever wanted to show your Drupal contact form at every page using a Block? You can now by using the Contact form blocks module.

Stephanie Pakrul and Chris Fassnacht from Top Notch Themes discussed Return on Investment and Ubercart. These are my notes from the presentation. I also took video that is broken up into four pieces at the end of this post. I was at the back of the room, so the sound is a little quiet. Hopefully it is still helpful.

They started out by talking about the strongest feature of Ubercart is its automatic integration with Drupal. That makes things relatively easy for the developer.

75% of users make a judgement about your company based on the design of a site. Business metrics can improve drastically with a good design. Quite simply good design can improve your conversion rate and improving you conversion rate is the investment that keeps on giving.

read more

Because of a bug in the Drupal 7 PostgreSQL chain (either in PDO or the database) BIGINT handling is not fixed in today's Drupal 6 release. And you wonder why I hate that database.