About the format

• If you are using Opera or any other browser with support for presentation CSS, going into full-screen mode will automatically turn this page into a slide show

Introduction

• Alexander Limi
• One of Plone's two dictators
• Works for Plone Solutions in Norway
  • Training
  • Development
  • Support
• http://www.plonesolutions.com

Do not try this at home ;)

• What I'm currently showing is not the same syntax as in beta2 (some small changes)
• This document will go online along with the release of Plone 2, and be updated to reflect the structure
• Summary: The most cutting-edge of these techniques are not exactly the same in beta2.

A simple example

What did we do here?

• We use CSS to:
  • Replace elements with images
  • Change the structure of the page
• Result: We are not touching any templates at all, but are still able to change the structure and look of a page - including inserting images where there was only text previously!

Plone 2 makes it easy

• Example: Moving the leftmost column to the right side:

        #navigational {
            float: right;
        }
  
        #main {
            float: left;
        }
  

• This floats the column with the navigational boxes to the right side, and lets the main column occupy the space on the left.

That nifty image trick

Image trick revealed

• But how can you insert an image instead of a regular HTML element?
• And why would you want to?

Merry Christmas, Mr. Langridge

• Plone uses a technique called Langridge Image Replacement

Langridge Image Replacement (short: lir)

• Allows you to replace elements with an id and its subelements

LIR example

• Replacing the heading of a portlet:

     #portlet-news h5 {
        padding: 25px 0 0 0;
        overflow: hidden;
        background-image: url("Image.png");
        background-repeat: no-repeat;    
        height: 0px;
        }
  

What elements can be replaced like this?

• Any element with an ID, which is most of the elements in Plone²:
  • logo
  • portal tabs
  • portlet headings
  • almost any other element

So why would you want to?

• This way, you can build very graphic-intensive sites without:
  • Touching the templates
  • Ruining all the accessibility work that has gone into Plone 2
  • Still making the site usable in any browser (text browser / screen reader / mobile phone)

Another Plone First

• Plone 2 is the first CMS in the world to enable this functionality
• As far as we know, the first web application in the world to do this.
• Some examples from CSSZenGarden.com

Background: Plone Philosophy

• User-centric
• Personalized content
• Make it easy to keep track of what's going on

Plone Philosophy

• Light-weight design, focus is on content - not presentation
• Support standards relentlessly
• Be accessible to any person using any browser

Accessibility

• Plone is US Gov Section 508 compliant
• Plone is WAI-AAA compliant (W3C's WCAG)
• Result: Blind and disabled people can use it more easily
• Plone 2 is currently the most accessibility-friendly CMS in the world
• Plone is the first CMS in the world to conform to W3C's strictest standards.

Web addresses

• URLs should be accessible:
  • http://plone.org/documentation/archetypes/gettingstarted
  • not: http://plone.org/article.jsp?02740,93,294&mode=web&uid=5364F3...
• Pages should be search engine index-friendly and carry metadata

Device support

• Should be accessible to any web-capable device
  • Desktop web browsers
  • Phones
  • PDAs
  • Text Terminals
  • Kiosk Terminals
  • Screen Readers

Low bandwidth usage

• Should be usable over slow phone line connections
• Should always compress pages before transfering
• Should always cache images, javascript and style sheets

The HTML

• Semantic markup, not visual - no tables for layout
• All design should reside in Style Sheets, not in the templates
• Easy customization of the code to accomodate special needs
• 100% XHTML 1.0, CSS 1+2 and ECMAScript compliance.
• Plone 2.0 has a different HTML structure than 1.0

User interface elements

Back to CSS

• Some examples of using LIR and CSS to skin a web site
• CSSZenGarden.com

Adding/overriding with your own style sheets

• plone_styles/ploneCustom.css
• Customize it, and add your own classes
• You can also override existing classes, since it has priority over plone.css
• In Plone 2.0, you can customize your site radically with this technique if you know CSS

A short CSS primer

• Short overview of what you need to know
• The actual specification is quite readable
• W3Schools.com have nice tutorials

Theory and goal

• Separates layout and design from content
• Style sheets are attached to the markup and transforms its looks and behaviour
• Centralizes layout outside the actual content
• Makes re-use easier and re-design more efficient

CSS: Format

Simple Example:

    a.externalLink {
        color: Red;
    }

CSS Components: Classes & IDs

• Class: generic class of elements, can have several on same page
• ID: specific element, unique on a page

CSS: Identifying elements

• Classes:

      <img class=genericImage" />
  

• Corresponding CSS selector:

      .class { border-color: black; }
  

CSS: Identifying elements

• IDs:

      <img id="specificImage" />
  

• Corresponding CSS selector:

      #specificImage { border-style: dashed; }
  

CSS: Qualifying elements - Classes

Specific tag class:

    img.example {}

• Every img tag with class example

General classes:

    .example {}

• Any tag with class example

CSS: Qualifying elements - IDs

Specific tag ID:

    img#example {}

• Every img with ID example

General IDs:

    #example {}

• Every tag with ID example

CSS: Qualifying Elements

You can be more specific about which elements should be affected:

    p a { color: Green; }

• Will only affect a tags inside p tags

Another example:

    p, a { color: Black; }

• Will affect all p and a tags

CSS: Qualifying Elements

You can also combine tags explicitly:

    p + a { color: Yellow; }

• Will only affect a tags immediately following a p tag

CSS: Common gotchas

• Underscore _ is not allowed
• The box model
• Floating elements are removed from the document flow
• Absolute/relative positioning

CSS: Useful tips

• Get an editor with good support for CSS, preferrably with introspection/autocompletion
  • TopStyle Lite for Windows

CSS: Mozilla - a very special browser

• Mozilla/Firebird is your best development tool
• Lots of CSS developer plugins.
• Is (mostly) correct when it comes to implementation

CSS: Recommended Moz plugins

• editCSS - lets you edit CSS in real-time inside the browser
• Style Selector - Lets you switch between alternate style sheet in a document
• PNH Developer Toolbar
• Tabbrowser Preferences

XHTML - what is it?

• A reformulation of HTML that is XML compatible
• Fully compatible with all browsers

XHTML - main differences

• Every tag has to be closed. Example:

      <br />
  
      <p>Some text</p>
  

• A lot of the tags in HTML 4.01 are deprecated

XHTML - Common gotchas

• Missing DOCTYPE declaration
  • Triggers "quirks" mode in Mozilla and IE
  • Will cause inconsistent behaviour, tries to do best-effort rendering
• Non-closed tags
• Use the W3C validator!

ZPT and XHTML

• ZPT helps you write valid code
• Only checks for valid markup, doesn't validate code according to the DTD

Reference

• Walkthrough of the common elements in Plone
• Show how the HTML looks like
• Show the corresponding CSS

Tabs, HTML

• Example:

      <ul id="portalTabs">
        <li class="selected">
          Home
         </li>
  
         <li class="plain">
          News
         </li>
      </ul>
  

Tabs, CSS

Generic structure:

    ul#portalTabs {
     border-collapse: collapse;
     padding: 0.5em 0em 0em 2em;
     list-style: none;
    }

   ul#portalTabs li { display: inline; }

Tabs, CSS

The links:

   ul#portalTabs li a {
    /* The normal, unselected tabs. */
    background: transparent;
    border-color: #8CACBB;
    border-width: 1px; 
    border-style: solid solid none solid;
    color: #436976;
    text-transform: lowercase;
   }

   ul#portalTabs li.selected a {
    /* The selected tab. There's only one of this */
    background: #DEE7EC;
    border: 1px solid #8CACBB;
    border-bottom: #DEE7EC 1px solid;
   }

Boxes, HTML

• Example:

      <div class="box">
  
        <h5>Recently Published</h5>
  
        <div class="body">
  
          <div class="odd content">
          An odd item
          </div>
  
          <div class="even content">
          An even item
          </div>
  
      </div>
  

Box, CSS

Example:

    div.box {
     border: none;
     margin-bottom: 1em;
     padding: 0;
    }

    div.box h5 { 
     background: #DEE7EC;
     border: 1px solid #8CACBB;
     border-style: solid solid none solid;
     text-transform: lowercase;
     display: inline;
     white-space: nowrap;
    }

    div.box div.body {
     background: transparent;
     border: 1px solid #8CACBB;
    }

Listings, HTML

• Example:

      <table class="listing">
  
        <tr>
          <th>Type</th><th>Size</th>
        </tr>
  
        <tr class="odd">
          <td>Document</td>
          <td>  6 KB  </td>
        </tr>
  
      </table>
  

Listings, CSS

• You're hopefully starting to get it ;)
• Styling tables isn't straightforward - requires some experimenting

Forms

• Plone 2 format:

     <form class="ploneForm">
  
      <div class="field">
  
        <label>Document name</label>
  
        <input type="text" />
  
        <div class="help">
        Can not contain spaces, underscores or mixed case.
        </div>
  
      </div>
  
     </form>
  

Other tricks up our sleeves

• Presentation CSS
• Print CSS
• Insertion of own CSS from your application

Presentation CSS in Plone

• Any document in Plone can also be a presentation with multiple slides
• Only Opera supports this natively, Mozilla plans to implement it
• Could be supported later in IE via javascript
• plonePresentation.css

Presentation CSS - theory

• h1 and h2 tags indicates new page
• Ordered/Unordered lists (ul/ol) and definition (dd) lists are shown
• Code listings (pre) are shown
• Normal p tags are hidden
• This means you can write a more comprehensive explanation for the web and print version

Presentation CSS - in practice

• Hide all elements we don't want to show up
• Increase font size and header formatting
• Move logo to bottom right

Presentation CSS - code

• Very simple to get this working:

media="projection"

We specify the media for our presentation style sheet in the link to it.

page-break-before: always;

Makes sure every h1 tag starts a new page.

Print CSS

• Same concept as for Presentation mode
• media="print"
• Changes fonts, eliminates useless (for print) elements
• Makes separate template for printing unnecessary

How can an application easily add its own style sheets?

• How to insert your own CSS on a per-template basis:

     <metal:fill-slot="css_slot">
       <style>
       a { color: Blue; }
       </style>
     </metal:fill-slot>
  

Summary

• With Plone 2, your site can maintain:
  • Accessibility
  • Semantically correct HTML
  • Flexibility
• While still allowing you to change its appearance radically, even without touching the templates.

Contact

• Plone Solutions
  • Training
  • Development
  • Support
• http://www.plonesolutions.com
• info@plonesolutions.com

Director's Cut

• Deleted Scenes

Usability

• Some common questions and some easy-to-remember tips

Pull-down menus (aka. Limi's Crusade)

• Do not use as navigational items
• You can use them for grouping functions that are similar (item types, publishing states)
• Avoid Flash / Javascript for navigation unless you have fully functional, transparent fallback modes
• Multi-level menus are particularly bad

Why are pull-downs bad for navigation?

• Several studies show this (it's not just me ;)
• People don't explore, they browse / skim your site
• Menus make them stop and forces them to think
• Thinking is bad (when in a hurry :)
• You are hiding information with menus

Menu summary

• Menus are useful for functionality, but they are not navigational structures
• There's a reason the file explorer is not a menu, but a tree
• A menu limits you to a few choices, which is good when you want to perform an oft-used function, but bad for navigation
• Menus are not inherently evil, but they have to be used correctly. And navigation is not a task they are well suited for

Psychology guidelines and Usability

• Some common rules of thumb

About number of items

• Humans can keep track of 7 ± 2 items in short-term memory
  • Try to limit number of sections on your site
  • Try to limit the number of choices at the top level of your application
  • Try to not go above that number of items in a folder

Site structure

• Users prefer (and are most productive with):
  • First level: Few choices
  • Next level: Can have many choices
  • Subsequent levels: Precise, specific choices

Contact

• Plone Solutions
  • Training
  • Development
  • Support
• http://www.plonesolutions.com
• info@plonesolutions.com