wiki:Projects/Design

Version 33 (modified by Pat Tressel, 11 years ago) ( diff )

--

Design

Table of Contents

  1. AJAX Loader
  2. Switch between an update and read page using JS
  3. Conduct a Usability Test
  4. Suggest a Usability Enhancement
  5. Design a Sahana Eden Theme
    1. What are themes for?
    2. Developing a new theme
    3. For GCI
    4. Examples
  6. Design a (better) GUI for the CAP broker (already done?)
  7. Write a blueprint for a GUI (web) tool to build and test XSL files …

AJAX Loader

An AJAX loader/throbber based on the sunflower logo would be really cool

Switch between an update and read page using JS

If the user has the relevant permissions, the read (display) view of a CRUD page should ideally be convertible to an Edit (update) form without needing a full-page refresh. This /could/ be done with an AJAX call, but even better would be to download the form into a hidden Div & hide the read view/open the edit form via a button.

Conduct a Usability Test

  1. Find a person to do be your test subject for the Usability Test. Anyone will do!
  2. Identify a workflow for the usability test on either you own http://eden.sahanafoundation.org/wiki/InstallationGuidelines local instance or a demo site of Sahana,
  3. Write up a report on the Usability Test on the wiki (either as a page or as a attached Document).
    1. What the test subject found easy
    2. What the test subject found hard
    3. What the test subject liked
    4. What the test subject dis-liked
    5. What would you improve in Sahana Eden (even better if you can make these improvements!)

After you the usability document is approved, upload to google docs or dropbox, then add a hyperlink next to the respective task called "(report)" pointing to that document.

For more instructions of how to conduct a usability test from the book "Don't Make Me Think" go to: ​http://www.sensible.com/downloads-dmmt.html

Suggest a Usability Enhancement

  1. Review your own http://eden.sahanafoundation.org/wiki/InstallationGuidelines local instance or a demo site of Sahana.
  2. Identify improvements which could improve the Usability
  3. Please post each improvement in a separate new ticket.
    • Type: enhancement
    • Keyword: usability + template / demo site you are reviewing
    • Include as many details as possible. If you can design a mockup to attach - even better!

If you are completing this for Google Code In you must suggest 4 enhancements for one task. You may be able to find Usability Enhancement in the Usability Test Reports - just make sure that they haven't been reported already.

Design a Sahana Eden Theme

GCI students doing the "design a theme task", please see the section For GCI which tells what's required for the GCI task. The full construction of theme CSS files plus sample pages, described in this section, was too large, so we've cut it down. Please read this section and see the Examples, but then do what's in the For GCI section. Please, just one of these tasks per student, as they take a long time, and most of what you'll learn will happen during the first try.

See DeveloperGuidelines/Themes

What are themes for?

A theme for a web site provides the "look and feel" of the pages. It gives the overall layout for pages -- it tells where major page elements, like navigation controls, menu bars, side bars, footer, are placed. It specifies colours and backgrounds and logos. Most web sites, Eden included, have several different types of pages that display data from the server's database (the "content") or provide forms and controls for user interaction -- the theme determines the general layout and page elements for each type of page, independent of the actual data shown.

Ideally we're looking for:

  • A new 'base' theme that could be adapted for use by various organizations, and easily built upon foe branding. (That is, organizations will have different branding elements -- logos, color schemes, fonts, etc. -- so it would be good to have a theme that looks good with many sets of branding elements and where colors, backgrounds, etc. could be easily changed.)
    • This should be responsive (e.g. using Twitter Bootstrap as several of our newer themes do)
  • A new 'default' theme which builds upon the base theme with Sahana branding
  • Re-implement some of the existing themes using the new 'base' theme

The design of Sahana Eden could be enhanced greatly with everything from a better colour scheme (for example, the grey menu blends into the browser which is confusing) to making more efficient use of space. If you're more of a web designer than programmer, your input is greatly needed. If you could come up with static designs for the following pages, or programmers can do their thing and make Sahana Eden beautiful. If you can design and program, even better!

Developing a new theme

Think about the purpose for the site for which you're developing a theme.

  • Is it for the public? or for internal use by an organization?
  • Will it be used mainly by people using it for the first time, or infrequently, or by people who will have training or use it frequently?
  • What will be the common operations users need to do?

This distinction might affect what appears in navigation elements -- will users need help and information about the site? or will they need tools to get their work done? It might affect how much decoration and color is used.

The design of the Eden homepage is more controlled by the template than the theme, but it is worth considering as it will be sharing the same CSS that goes with the theme, and may share some or all navigation elements with inside pages. So the layout and contents of the homepage might be taken into account. For instance, a site for internal use may not need a homepage with images and videos that introduce users to the purpose of the site. Instead, users of an internal site might want a practical page, that gives them quick access to tasks they need to do.

The implementation of a theme typically provides CSS and media, but may also include HTML and JS, and even server-side Python code and view code with Python templates, as needed.

Try producing a design for each of these pages -- they cover the main page types in Eden. The links to examples are given to show the type of information that might appear in each, but should not be taken as a restriction on the format you design.

Review CSS & layout.py for different themes to avoid duplication -- try for something unique.

Ensure that elements have consistent design & class/id tags and can easily be customized

  • Buttons
  • Tables
  • Popups
  • Fonts
  • Throbbers

Please share your CSS and HTML files and any images they need. If you have mockups or anything you'd like to point out about your theme, please include that too.

For GCI

Examples

The ​demo server is using the default theme -- please feel free to make something that looks nothing like it.

Have a look at these sites using Sahana Eden -- you'll see they have very designs (all are test sites so you can enter test data if-useful):

This shows a theme that was previously made for this design task. It is an example of what types of files you may need to include -- that is, the actual CSS files and images for the theme, plus example HTML files and anything you need for fake contents. Please put the design itself entirely out of mind, and Do It Your Way!

Here are the current theme files. (If you have an Eden developer environment installed, you can try them out by editing your models/000_config.py file and setting settings.base.theme to the name of a theme there (same as the name of the directory).)

Among those, these themes use Bootstrap.js:

  • DRMP
  • Philippines

Almost all use jQueryUI.

Design a (better) GUI for the CAP broker (already done?)

PLEASE NOTE: This task seems to be completed, see | Ticket 1026 Proposed by: ​| Nuwan

This is for Common Alerting Protocol (CAP) with capabilities for multi-language alerting and multi-media delivery. Use Agasti CAP Broker as a starting point. (This needs clarification. Eden does not have a CAP broker that I know of. And the current Agasti CAP support is in Krakatoa, not Mayon, so needs to be ported there too. So before there can be a GUI, there would need to be a port or implementation of a CAP broker, no? --Pat)

Specific : Build a ​| wireframe with functionality for the ​| Common Alerting Protocol messaging broker. It should follow a publisher subscriber model. Some specifications are in the ​| CAP Software Requirement Specifications
Measurable : CAP messaging broker is becoming a much sort after tool by many organizations. It is an ITU recommendation. Such tool can be easily adopted by governments and emergency coordination agencies for managing their alerting and situational awareness.
Attainable :
Step 1 :: Study the Sahana Agasti CAP Broker
Step 2 :: document the requirements
Step 3 :: develop the wireframe to provide the required functionality
Step 4 :: run the wireframe through a set of test scenarios, to be documented as stories
Relevant : Part of the Sahana interoperability policy.
Time-bound : Given that the Sahana Agasti CAP broker has much of the functionality it should not take too long to develop the wireframe.
Evaluate : Requirements will be discussed with the Sahana community and a prototype wireframe will be presented.
Reevaluate : Once the wireframe is built on the concluded requirements that will be put to test through the scenario based testing.

Write a blueprint for a GUI (web) tool to build and test XSL files (already done?)

PLEASE NOTE: This task seems to be completed, see | XSLT Blueprint

Proposed by: ​| Nuwan
Although this is classified as a design task, familiarity with coding, and especially with XSL transformations, will be helpful.

Specific : Given that Sahana is use a lot of XML there should be a tool to develop text, html, etc. outputs based one's own XSL transformation file. The user should be presented with the option to select the XML file; i.e. tags and schema, then include/exclude those tags with inserts of fixed text. The user should be able to preview the output. The built XSL file can then be stored to be used for a particular function. In this case it would be producing CAP message based user specific outputs for email, web, rss, twitter, google, etc.
Measurable : This would allow super users to develop implementation specific CAP content delivery outputs.
Attainable :
Step 1 :: research existing available solutions to get a feel for the type of functionality needed
Step 2 :: document and discuss the set of requirements with Sahana community
Step 3 :: develop the wireframe and test it with test scenarios
Step 4 :: document the set of specifications
Relevant : The Irrigation department may want the CAP messages to be formed in one way in an email compared with that of the Health department. A rapid XSL development tool will put the burden of building and maintaining those finals in the hands of the users and implementers and not engineers.
Time-bound :
Evaluate : design requirements and settling on them.
Reevaluate : wireframe with the test scenarios

Note: See TracWiki for help on using the wiki.