This site is archived.

Showcases, user experience and design track

Developing flexible and modular JavaScript components

kkaefer's picture
Submitted by kkaefer on Tue, 07/29/2008 - 00:41.

Session recording

Placement
Session time: 
08/30/2008 - 11:00 - 08/30/2008 - 12:00

Overview

We'll discuss ways to develop reusable and flexible JavaScript components by leveraging JavaScript's full potential and using Drupal's lightweight JavaScript frameworks. We'll look at several JavaScript components and see how they were implemented and how they interact with each other.

Agenda

* The JavaScript widget skeleton
* Bootstrapping components with Drupal.behaviors
* Interaction with delegates
* Managing events
* Talking back home
* Making it themable and translatable

Goals

The session aims to create a better understanding of how JavaScript components can be built in a more modular and extensible way.

Resources

You should be familiar with JavaScript and jQuery.

Front End Performance – How to make your website blazingly fast

kkaefer's picture
Submitted by kkaefer on Tue, 07/29/2008 - 00:29.

Session recording

Placement
Session time: 
08/28/2008 - 16:00 - 08/28/2008 - 16:45

SESSION OVERVIEW

This lecture-style session will present and discuss various approaches to improve front end performance. While server side performance has an impact on the speed websites are delivered, the vast par of loading time is spent on retrieving CSS, JavaScript and image files. For a truly zippy website, it is therefore vital to drastically lower the amount of time spent here. In his book “High performance websites”, Steve Souders discusses various ways to accomplish this. This session is based on that book but contains additional Drupal-related information and strategies.

AGENDA

* Anatomy of a web page
* Measuring the non-obvious and identifying bottlenecks
* The Hypertext transfer protocol
* Reducing HTTP requests
* Configuring Apache
* Additional optimizations
* Content delivery networks
* Related Drupal modules

GOALS

You should get a feeling for what “front end performance” actually means and where the main problems are located. You will also learn how to tackle these issues in a structured manner, measure the effects and get to know the basics of the foundation technology of the web, the Hypertext transfer protocol.

RESOURCES

You should be familiar with how a website is structured and know basic Apache configuration. Being familiar with HTTP is a bonus.

Enable the Community to improve usability

berkes's picture
Submitted by berkes on Mon, 07/28/2008 - 10:34.

Session recording

Co-presenters: 
Placement
Session time: 
08/28/2008 - 09:00 - 08/28/2008 - 10:30

I want to open a discussion on how to use various components and sides of Drupal to enable us, Developers to improve usability in our projects. Le us discuss how to use Form Elements, Helper Libraries, Naming conventions and Insert Your Birght Idea Here to enable the community to improve Drupal's usability.

Overview
Improving usability for project Foo might make the same software horrible to use in project Bar. That is why we could look at improving usability in Drupal by not making Drupal core more usable. But by enabling the developers to make Their Drupal project more usable for Their users in Their specific cases: enabling the community to improve usability.

Looking at Drupal as a Framework (the CMF) gives us opportunities: We can improve usability by enabling Dan the Distro Builder to put together a Blog Install Profile that is very usable for Bob the Blogger.

Agenda
* Introduction on Usability in general: Why is it so hard to get right in Drupal?
* Short introduction on why this 'enable' route might work better then the oldfashioned 'make Drupal core more usable'.
* Open Discussion on ways to achieve this.
* Putting Money where Mouth is: create code, docs and projects after the outcome of the discussions. This should be the biggest part: we must avoid this becoming a vapourware project and start off with some Real Working Code and Good Resources.

Goals
Setting up and initial infrastructure that will help people who want to contribute to the usability of Drupal.
Get a message out about this initiative and to enthuse developers for this usability project.
And, in the very end: to allow you to build a perfect site for your specific users.

Resources
Please collect any nice code (form elements) nice ideas (the back of a beermat) or good designs (like That One CSS Trick to align forms) on your laptops or servers. So that we have some real working code and ideas to start off with.

Sex Drupal & Rock n roll : Putting the ümlaud into Drüpal

mortendk's picture
Submitted by mortendk on Mon, 07/28/2008 - 10:16.

Session recording

Placement
Session time: 
08/29/2008 - 09:00 - 08/29/2008 - 10:30

Drupal theming isnt that hard (at first) - but after the first sweet feeling of geek stardom, the truth comes sneaking...
Some elements in a drupal sit can be a little tricky, unless you are willing to dig a bit deeper and get a little dirty.
so this one is all about pimping the crap outta your site, and in the process build up a libary of pure awesomeness

Agenda

  • - a Ménage à trois - Theming understanding
    and theres more than one position...
  • - the quest for a the nada-html template.
    Cleaning up the css & html and remain some of your sanity.
  • - access all areas pass
  • - this my son is the kingdom you shall inhert
    how to steal win the prince (or princes), steal the gold and get a kingdom for your self
    or how to use the build in inheritance (thank you zen)
  • - forms vs. the themer
    round 1.
  • - Pimping the menu
    use the source luke
    Menus and the art of theme function overwriting
    css based coolness
    imagemaps -oh yeah we old skool
    image based menus - the designers love em ...
  • The land of milk & honey
    drupal6 theming

Goals
To show some of the possibilities that are hiding just under the hood of drupal, and a couple of approaches to sex up your drupal life, and give the universal answer to the question that more than once have been shouted out:
"How the F!"#" do i get this menu to look like that the designer gave me - why cant we just use plain text menus and be done!"
and go from : "aaaargh I hate designer I hate drupal I aaaaaargh" to
"woohoo Drupal is the sweatest system in the world - wheres Dries I wanna kiss that guy, and by beers for all in the community"

Resources
basic css ,html, some php & basic drupal theming knowledge, and not to offended by the words that start with F.

Contrib module Usability

Erik Stielstra's picture
Submitted by Erik Stielstra on Sun, 07/27/2008 - 13:27.

Session recording

Placement
Session time: 
08/28/2008 - 09:00 - 08/28/2008 - 10:30

Overview
Usability is a big factor in the success of a website or a web
application. With some usability knowledge developers can improve their
modules.
I will show what changes have been made (and will be) to Simplenews and
Header Image modules (the modules I maintain). Along the way I will share
my thoughts and considerations regarding contributed module usability.

Usabiltiy is no rocket science, just applied common sense.

Agenda

* What is usability and why do we need it
* Common mistakes
* Simplenews and Header Image usability past, present and future

Goals

To make module developers, users and decisionmakers aware of usability
aspects of module development.
Resources

* Common sense
* Books: Don't make me think by Steve Krug

Report as inappropriate:
http://szeged2008.drupalcon.org/mollom/contact/d6913aa9de19dc61

Accessibility Best Practices in Drupal Theming

v's picture
Submitted by v on Sun, 07/27/2008 - 10:55.

Session recording

Placement
Session time: 
08/29/2008 - 11:00 - 08/29/2008 - 12:00

Overview

Online Presentation Slides

Accessibility should not be considered an option or an add-on. It is the responsibility of the entire team, from the designer, to the coder, to the writer, to the themer, and even to the business development team.

Agenda

  1. Accessibility Guidelines & Drupal
    • WCAG
    • PAS 78
    • Section 508
  2. Themes & Accessibility
    • HTML
    • CSS
    • JavaScript
  3. Modules & Accessibility
    • For administrators
    • For end users

Goals

Fortunately, Drupal has a solid foundation for coding standards and separating its data, logic, and presentation separate from each other. This has greatly contributed to the ease in which to make a Drupal site accessible. But is it enough and could it be better?

Resources

Link to the slide:
http://quiddities.com/presentations/2008/08/drupalcon-accessibility/

Making a useful admin interface

sign's picture
Submitted by sign on Fri, 07/25/2008 - 21:03.

Session recording

Placement
Session time: 
08/30/2008 - 15:00 - 08/30/2008 - 15:45

Overview

Everytime I work on a drupal based project, I am thinking about users how they are going to add content, set up taxonomy, maintain site and perform other tasks without getting lost on their site. This session will try to showcase best practices in admin interface and I will try to show where rootcandy (http://drupal.org/project/rootcandy) project is at the moment and where it is heading.

Agenda

* Several scenarios how to make administration easier
--* TBC
* RootCandy theme/module project
--* RootCandy for developers
--* RootCandy for users
* Available modules that can improve administration

Goals

By the end of this session, attendees will see more possibilities in improving admin section and benefits of making admin section userfriendlier.

User Testing in Drupal

eigentor's picture
Submitted by eigentor on Wed, 07/23/2008 - 13:25.

Session recording

Placement
Session time: 
08/29/2008 - 13:30 - 08/29/2008 - 14:30

Overview

The formal user tests at the University of Minnesota and Baltimore have got quite some attention. They also had a common bottom line: Drupal is quite hard to get into for novice users.

We want to improve this. But how can we make sure we really tackle the major issues? And how do we find out if improvements are really improvements?

Repeated testing is the answer. Make sure to find out how the user experiences Drupal for our own attitude cannot be but biased. How is someone who is not accustomed to the workflow and UI able to perform a given task?

And how to make user testing fun? I'll try to depict how this can be done utilizing the
Usability Testing Suite (UTS).

Agenda

  • Tests in U of Minnesota and Baltimore: have there been reliable results?
  • A bit of theory: how is user testing generally carried out in other projects and companies
  • The Usability Testing Suite (UTS): A way to go?
  • A plan how to encourage and organize constant testing

Goals

Find a way to make user testing an asset to Drupal. Just like code testing has got a key role in Code Quality.

The talk will have an ensuing BoF to discuss the further steps in user testing. If we could come up with a plan that feels feasible, this would be wonderful.

Resources

Usability Testing Suite
In dev state,
maintained by boombatower

Website template porting to Drupal 6 - a crash course

Gábor Hojtsy's picture
Submitted by Gábor Hojtsy on Tue, 07/22/2008 - 15:14.

Session recording

Placement
Session time: 
08/30/2008 - 11:00 - 08/30/2008 - 12:00

Overview

Web design is hard. I am not at all a designer or graphic magician, but would like to see great themes on my Drupal sites, so I am continuously on the lookout for great templates to adapt to Drupal. Whoever professional you ask will tell you that building a website on an existing template is a bad idea and of course you should architect the look and feel and interaction of the website for the specific need at hand. Unfortunately lots of people just lack the professional resources. And starting from an existing template still allows you to tweak it further (if the license grants you to do so).

Therefore this session is about picking a template (the Modern World template from Solucija) and converting it to a fully functional Drupal 6 theme with blocks, menus, a screenshot for the theme selector and all live from the ground up in 45 minutes, instructions included. Make sure to drink some coffee so you can grok every part of this quick flowing live tutorial!

Agenda

* Starting from template vs. custom research/process/architecture/design
* Template licensing, what should you consider
* Downloading and starting off with the theme
* Several steps, while the theme will be horribly broken, but we keep going
* A glamourous end result
* More on licensing, how to contribute the theme to drupal.org or elsewhere if drupal.org is not applicable

Goals

Attendees will leave with a recipe to port existing templates to Drupal 6 and hopefully even contributing them to Drupal.org (but this last item will not be obligatory).

Resources

Also check out my blog post: http://hojtsy.hu/blog/2008-jul-22/i-will-teach-you-port-templates-drupal...

The Views 2 user interface - retracing the design process

yoroy's picture
Submitted by yoroy on Fri, 07/18/2008 - 22:40.

Session recording

Placement
Session time: 
08/28/2008 - 15:00 - 08/28/2008 - 15:45

Overview

Version 2 of the popular Views module was rewritten from scratch to make it even more flexible and powerful. With more flexibility comes more complexity and quite some time was spent working out a user interface that could expose all these powerful features without becoming an enormous scrolling form. This session retraces the process that led to the current interface, showcasing how developers and interface designers worked together to find a working solution to a complex problem.

Agenda

- Views1 to Views 2: adding multiple dimensions of infinite flexibility.
- Concepts, wireframes, and other false starts.
- Two basic concepts: sentences and summaries.
- The end result. Do you like it? What could be better? How can we translate the good bits to other use cases?

Goals

First of all, this presentation wants to provide an overview of the design process for this particular user interface. The larger picture is that the web is rapidly evolving from websites into web applications. The Drupal UI toolkit has to be extended with smarter and more complex form widgets to build the interfaces for these web apps. Ideally the good stuff in Views 2 can find it's way into other Drupal applications as well.

Resources
Bring your own feedback on the new interface! What do you like, what do you think could be improved?