SlideShare a Scribd company logo
1 of 38
Paint it   !
Theming
What is theming?

   Adding decorations          CSS
   Altering structure          Configuration, Diazo
   Modifying user experience   Diazo, Programming




                                                     Paint it Plone! — Simone Deponti for Abstract
Theming The process
 1. Mockups by designer
2. HTML mockups
    a. Widget library

3. Integration with backend




                              Paint it Plone! — Simone Deponti for Abstract
Theming The cast
 1. Wireframe
2. Mockups
3. UX customizations
4. Static theme
5. Diazo rules
6. Custom templates




                       Paint it Plone! — Simone Deponti for Abstract
Dawn of a design
The dawn of a design
Good                   Bad
  Wireframes             Printed stuff
  Mockups with specs     No specs
  Modular design         No patterns




                                        Paint it Plone! — Simone Deponti for Abstract
Ratio
 « The relationship in quantity, amount, or size between two or more things
                                                                                               — Definition of ratio



Web pages have to adapt to different sizes and resolutions, making absolute measurement very
difficult. But you can try to maintain a pattern with proportions, which is fundamental for:

   Legibility
   Usability
   Aesthetics




                                                                              Paint it Plone! — Simone Deponti for Abstract
What to measure
1. Font sizes (headings and normal text)
2. Paddings, margins, interlines
3. Elements
4. Lines (borders, graphic signs, etc)




                                           Paint it Plone! — Simone Deponti for Abstract
I forgot my phone!

     It's not necessary to start your design with
     mobile experience in mind, but it helps.

     However, it's not possible to entirely
     delegate the mobile experience to
     implementation time, you need to go back
     to the drawing board for that.

     Progressive enhancement currently
     doesn't perform so well




                                                    Paint it Plone! — Simone Deponti for Abstract
Playing with blocks
Do not focus on decorations

Instead focus on typography, elements, and make something that works well with no decorations and
in black & white.

Colors and graphics elements enhance the experience, they cannot create it alone




                                                                         Paint it Plone! — Simone Deponti for Abstract
Typography
Johannes' legacy
Fun fact
    Gutenberg's Bible is still one of the pinnacles of the art of typography, being one of the very few
    printed books that can rival with carefully handcrafted books (as done by scribes) in terms of
    beauty.

Screen typography is even harder:

    Hinting is crucial
    Hinting is boring and hard
    Many free fonts are not well hinted
    Font rendering systems vary wildly




                                                                               Paint it Plone! — Simone Deponti for Abstract
Getting text wrong
Bad                                                                                            Good
Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum quam, suscipit         Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum
velpellentesque a, porttitor tempus mi. Aliquam at orcilobortis metus venenatis facilisis.
                                                                                                quam, suscipit velpellentesque a, porttitor tempus mi. Aliquam at
   Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc.
                                                                                                orcilobortis metus venenatis facilisis.
   Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque.
                                                                                                    Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc.
                                                                                                    Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque.
Lorem ipsum dolor
                 Integer mollis, augue et molestie rutrum, lorem velit fringilla ipsum, eget
                 pellentesque tortor purus eu enim.                                             Lorem ipsum dolor
                 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere                          Integer mollis, augue et molestie rutrum, lorem velit
                 cubilia Curae; Nam nunc diam, pellentesque eget eleifend sed,                                     fringilla ipsum, eget pellentesque tortor purus eu enim.
                 consectetur nec felis. Ut ac felis nisi.
                                                                                                                   Vestibulum ante ipsum primis in faucibus orci luctus et
                                                                                                                   ultrices posuere cubilia Curae; Nam nunc diam,
                                                                                                                   pellentesque eget eleifend sed, consectetur nec felis.
                                                                                                                   Ut ac felis nisi.




                                                                                                                                     Paint it Plone! — Simone Deponti for Abstract
Getting fonts wrong
Bad                                                    Good
 @font-face {                                           @font-face {
     font-family: 'PTSansNarrowRegular';                    font-family: 'PTSans';
     src: url('PTN57F-webfont.eot');                        src: url('PTN57F-webfont.eot');
     src: url('PTN57F-webfont.woff') format('woff');        src: url('PTN57F-webfont.woff') format('woff');
     font-weight: normal;                                   font-weight: 200;
     font-style: normal;                                    font-style: normal;

 }                                                      }

 @font-face {                                           @font-face {
     font-family: 'PTSansCaptionBold';                      font-family: 'PTSans';
     src: url('PTC75F-webfont.eot');                        src: url('PTC75F-webfont.eot');
     src: url('PTC75F-webfont.woff') format('woff');        src: url('PTC75F-webfont.woff') format('woff');
     font-weight: normal;                                   font-weight: 700;
     font-style: normal;                                    font-style: normal;

 }                                                      }

 @font-face {                                           @font-face {
     font-family: 'PTSansCaptionRegular';                   font-family: 'PTSans';
     src: url('PTC55F-webfont.eot');                        src: url('PTC55F-webfont.eot');
     src: url('PTC55F-webfont.woff') format('woff');        src: url('PTC55F-webfont.woff') format('woff');
     font-weight: normal;                                   font-weight: 400;
     font-style: normal;                                    font-style: normal;
 }                                                      }




                                                                                                 Paint it Plone! — Simone Deponti for Abstract
Grids
What's a grid?
A grid is:

  1. A creative constraint
  2. The exoskeleton of the page
  3. Something that helps in placing stuff




                                            Paint it Plone! — Simone Deponti for Abstract
What grid?
Avoid fluid grids.

Obvious, recommended choice
    The Deco grid system, Plone's builtin
More original choice
    Get a prebuilt one (personal preferences: cssgrid, frameless)
Not-as-crazy-as-it-sounds choice
    Make your own




                                                                    Paint it Plone! — Simone Deponti for Abstract
Making your own
You can make a grid that is also a layout engine.

With a good starting point (Golden Grid System) it's not that hard.

When doing responsive design, not all layouts are possible (a 16-column grid has 16! possible layouts).

Optimize/tweak only for the layouts you use.




                                                                             Paint it Plone! — Simone Deponti for Abstract
CSS Preprocessors
LESS vs SASS
LESS                                          SASS
  Easier to setup                               Feature complete
  Works client side (great for development)     Slightly more difficult to set up
  Lacks a couple features                       Ruby
  Javascript & node.js




                                                                     Paint it Plone! — Simone Deponti for Abstract
CSS vs LESS/SASS
CSS                               LESS
 #header {                         @darkred: #842210;
   border-radius: 5px;             @blackish: #111111;
   -webkit-border-radius: 5px;     .rounded-corners (@radius: 5px) {
   -moz-border-radius: 5px;          border-radius: @radius;
 }                                   -webkit-border-radius: @radius;
 #header h1 {                        -moz-border-radius: @radius;
   color: #842210;                 }
   font-size: 26px;                #header {
   font-weight: bold;                .rounded-corners();
 }                                   h1 {
 #header p {                           color: @darkred;
   font-size: 12px;                    font-size: 26px;
   color: #111111;                     font-weight: bold;
 }                                   }
 #header p a {                       p {
   text-decoration: none;              font-size: 12px;
 }                                     color: @blackish;
 #header p a:hover {                   a {
   border-width: 1px;                     text-decoration: none;
 }                                        &:hover { border-width: 1px }
 #footer {                             }
   border-radius: 10px;              }
   -webkit-border-radius: 10px;    }
   -moz-border-radius: 10px;       #footer { .rounded-corners(10px); }
 }




                                                                          Paint it Plone! — Simone Deponti for Abstract
Owh, my brain
LESS                        CSS
 .mixin1() {                 .tst3 {
   @media all {                color: grey;
     .tst {                  }
       color: black;         @media all {
       @media screen {         .tst {
         color: red;             color: black;
         .tst3 {               }
            color: white;    }
         }                   @media all and screen {
       }                       .tst {
     }                           color: red;
   }                           }
 }                             .tst .tst3 {
 .tst3 {                         color: white;
   color: grey;                }
 }                           }
 .mixin1();




                                                       Paint it Plone! — Simone Deponti for Abstract
Colors
Question
   What is the hexadecimal value ( #XXXXXX ) for a dark, desaturated yellow?

Modern browsers have    hsl()   ( hsl(60,   30%, 30%); ).


IE (6|7|8): What about us?

Using a CSS preprocessor helps:     desaturate(darken(yellow, 30%), 30%);




                                                                               Paint it Plone! — Simone Deponti for Abstract
Internet
Explorer
Dissociative identity disorder
      China is the only country still using IE6 widely, 21.3% still use IE6 (source: ie6countdown.com)
      Internet Explorer usage in 2012, by version

                           Region                         IE 9     IE 8    IE 7                IE 6
      Worldwide                                          15.22%   15.10%   2.15%             0.90%
      Europe                                             14.79%   12.05%   1.70%             0.47%
      North America                                      16.97%   12.05%   2.60%             0.62%
      South America                                      11.45%   14.11%   1.42%             0.56%
      Asia                                               10.85%   18.13%   2.40%   2.04% (but 16.88% in China)
      Africa                                             8.84%    12.43%   1.73%              1.53%
      Oceania                                            20.79%   14.22%   1.76%             0.47%




Percentage of total market, data by gs.statcounter.com                                 Paint it Plone! — Simone Deponti for Abstract
Bugs affecting IE
Internet Explorer bugs, by version

Version                                                             Bugs/missing features
     6       No   > , + , tag[attr="value"] , position: fixed ,   buggy   .class1.class2 , :hover   only on links, buggy    overflow: visible .

             No   (max|min)-(width|height)

     7       No :before , :after , :focus , buggy :first-child , buggy        position: fixed ,   broken box model and no way to have a
             border that doesn't take up space.
             Also incomplete table styling (forget about playing with borders) and handling of whitespace.

     8       No CSS3 whatsoever, including         :last-child .

             Webfonts look ugly.
             :first-child , + ,      do not behave correctly when you add/remove elements

     9       Not substantially better or worse than any other browser




                                                                                                                 Paint it Plone! — Simone Deponti for Abstract
IE tricks
Use modernizr.js to include browser-specific optimizations.

Use Javascript to add classes where you are missing selectors (e.g.   :first-child   and      :last-child ).


Throw away borders for browsers with an incomplete box model.




                                                                               Paint it Plone! — Simone Deponti for Abstract
Cutting & Seaming
Models and policies
There are too many page types for a designer to come up with a full mockup of each.

However, if you decompose each page in a layout and a set of widgets, things are easier to design and
mock.

This also reminds me of something else that began with D.




                                                                            Paint it Plone! — Simone Deponti for Abstract
Bootstrap The lesson
Bootstrap is more than a default set of CSS.

It provides a documented set of widgets, where it's easy to pick the one that fits best thanks to visual
examples, and just using the correct markup does the job.

And the whole system is coherent and cohesive, allowing you to mix & match.




                                                                              Paint it Plone! — Simone Deponti for Abstract
Bootstrap The opportunity
Nothing prevents you to do what Bootstrap does.

Catalog and document all of your widgets in a static template, and   plone.app.theming       will serve it over
the ++theme++ traversal namespace.

It doesn't need to be as wide or as encompassing as Bootstrap , but it's a very good starting point.




                                                                               Paint it Plone! — Simone Deponti for Abstract
Useful CSS classes
  .hiddenStructure   Links
  .selected              .link-plain

  .portalMessage         .link-anchor

      .info              .link-external

      .warning           .link-category   (tags)
      .error             .link-overlay



  .discreet




                                             Paint it Plone! — Simone Deponti for Abstract
Useful markup
 Tables
 Tabs
 Portlets
 Breadcrumbs
 Navigation
 Edit bar




                Paint it Plone! — Simone Deponti for Abstract
Useful Javascript
  modernizr
  jQuery
  jQueryTools (tabs, overlays)
  jQueryUI (currently as add-on)




                                   Paint it Plone! — Simone Deponti for Abstract
Diazo tricks
A few parts of Diazo often overlooked or misunderstood.

Wrapping stuff                                            classA is classB
  <replace css:content="#my-content">                     <replace css:content=".classA">
    <div id="my-wrapper" class="a-class">                   <xsl:copy select="node()">
      <div class="another-class">                             <xsl:attribute name="class">
        <xsl:apply-templates select="node()" />                 <xsl:value-of select="./@class" /> classB
      </div>                                                  </xsl:attribute>
    </div>                                                    <xsl:apply-templates />
  </replace>                                                </xsl:copy>
                                                          </replace>




if ... elif ... else                                     and
  <rules css:if-content="#foo"> ... </rules>
  <rules css:if-content="#bar"> ... </rules>              <rules css:if-content="#foo">
  <rules css:if-not-content="#foo, #bar"> ... </rules>      <rules css:if-content="#bar"> ... </rules>
                                                          </rules>




                                                                                                   Paint it Plone! — Simone Deponti for Abstract
Using jbot
There are situations in which using Diazo is overkill.

Then you shall use jbot.

When to do that:

  1. When it's a small component.
  2. When it would require the use of advanced XSLT to morph the original HTML.




                                                                          Paint it Plone! — Simone Deponti for Abstract
Paint it Plone!
Questions?




             Paint it Plone! — Simone Deponti for Abstract

More Related Content

Similar to Paint it Plone!

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Tim Frick
 
16.9 mixed scheme dark version
16.9 mixed scheme   dark version16.9 mixed scheme   dark version
16.9 mixed scheme dark versionhamza bekkali
 
16.9 mixed scheme dark version
16.9 mixed scheme   dark version16.9 mixed scheme   dark version
16.9 mixed scheme dark versionhamza bekkali
 
4.3 mixed scheme dark version
4.3 mixed scheme   dark version4.3 mixed scheme   dark version
4.3 mixed scheme dark versionhamza bekkali
 
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...NCCOMMS
 
10 PowerPoint hacks that will help you win friends and save your time
10 PowerPoint hacks that will help you win friends and save your time10 PowerPoint hacks that will help you win friends and save your time
10 PowerPoint hacks that will help you win friends and save your timeHavain
 
Production management stage 2 2015
Production management stage 2 2015Production management stage 2 2015
Production management stage 2 2015Benedict Terry
 
Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Olybop .fr
 
Stop-Motion-Animation.ppt
Stop-Motion-Animation.pptStop-Motion-Animation.ppt
Stop-Motion-Animation.pptraketeeraph
 
15 Ways To A Blistering-Fast Web Site
15 Ways To A Blistering-Fast Web Site15 Ways To A Blistering-Fast Web Site
15 Ways To A Blistering-Fast Web SiteIan Lurie
 

Similar to Paint it Plone! (20)

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

 
16.9 blue scheme
16.9 blue scheme16.9 blue scheme
16.9 blue scheme
 
16.9 red scheme
16.9 red scheme16.9 red scheme
16.9 red scheme
 
16.9 mixed scheme dark version
16.9 mixed scheme   dark version16.9 mixed scheme   dark version
16.9 mixed scheme dark version
 
16.9 blue scheme
16.9 blue scheme16.9 blue scheme
16.9 blue scheme
 
16.9 mixed scheme dark version
16.9 mixed scheme   dark version16.9 mixed scheme   dark version
16.9 mixed scheme dark version
 
16.9 mixed scheme
16.9 mixed scheme16.9 mixed scheme
16.9 mixed scheme
 
4.3 mixed scheme
4.3 mixed scheme4.3 mixed scheme
4.3 mixed scheme
 
4.3 mixed scheme dark version
4.3 mixed scheme   dark version4.3 mixed scheme   dark version
4.3 mixed scheme dark version
 
4.3 blue scheme
4.3 blue scheme4.3 blue scheme
4.3 blue scheme
 
4.3 red scheme
4.3 red scheme4.3 red scheme
4.3 red scheme
 
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
 
10 PowerPoint hacks that will help you win friends and save your time
10 PowerPoint hacks that will help you win friends and save your time10 PowerPoint hacks that will help you win friends and save your time
10 PowerPoint hacks that will help you win friends and save your time
 
Production management stage 2 2015
Production management stage 2 2015Production management stage 2 2015
Production management stage 2 2015
 
16.9 mixed scheme
16.9 mixed scheme16.9 mixed scheme
16.9 mixed scheme
 
The Wedge
The WedgeThe Wedge
The Wedge
 
Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3
 
Stop-Motion-Animation.ppt
Stop-Motion-Animation.pptStop-Motion-Animation.ppt
Stop-Motion-Animation.ppt
 
15 Ways To A Blistering-Fast Web Site
15 Ways To A Blistering-Fast Web Site15 Ways To A Blistering-Fast Web Site
15 Ways To A Blistering-Fast Web Site
 
Proposal
ProposalProposal
Proposal
 

Recently uploaded

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 

Recently uploaded (20)

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 

Paint it Plone!

  • 2. Theming What is theming? Adding decorations CSS Altering structure Configuration, Diazo Modifying user experience Diazo, Programming Paint it Plone! — Simone Deponti for Abstract
  • 3. Theming The process 1. Mockups by designer 2. HTML mockups a. Widget library 3. Integration with backend Paint it Plone! — Simone Deponti for Abstract
  • 4. Theming The cast 1. Wireframe 2. Mockups 3. UX customizations 4. Static theme 5. Diazo rules 6. Custom templates Paint it Plone! — Simone Deponti for Abstract
  • 5. Dawn of a design
  • 6. The dawn of a design Good Bad Wireframes Printed stuff Mockups with specs No specs Modular design No patterns Paint it Plone! — Simone Deponti for Abstract
  • 7. Ratio « The relationship in quantity, amount, or size between two or more things — Definition of ratio Web pages have to adapt to different sizes and resolutions, making absolute measurement very difficult. But you can try to maintain a pattern with proportions, which is fundamental for: Legibility Usability Aesthetics Paint it Plone! — Simone Deponti for Abstract
  • 8. What to measure 1. Font sizes (headings and normal text) 2. Paddings, margins, interlines 3. Elements 4. Lines (borders, graphic signs, etc) Paint it Plone! — Simone Deponti for Abstract
  • 9. I forgot my phone! It's not necessary to start your design with mobile experience in mind, but it helps. However, it's not possible to entirely delegate the mobile experience to implementation time, you need to go back to the drawing board for that. Progressive enhancement currently doesn't perform so well Paint it Plone! — Simone Deponti for Abstract
  • 10. Playing with blocks Do not focus on decorations Instead focus on typography, elements, and make something that works well with no decorations and in black & white. Colors and graphics elements enhance the experience, they cannot create it alone Paint it Plone! — Simone Deponti for Abstract
  • 12. Johannes' legacy Fun fact Gutenberg's Bible is still one of the pinnacles of the art of typography, being one of the very few printed books that can rival with carefully handcrafted books (as done by scribes) in terms of beauty. Screen typography is even harder: Hinting is crucial Hinting is boring and hard Many free fonts are not well hinted Font rendering systems vary wildly Paint it Plone! — Simone Deponti for Abstract
  • 13. Getting text wrong Bad Good Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum quam, suscipit Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum velpellentesque a, porttitor tempus mi. Aliquam at orcilobortis metus venenatis facilisis. quam, suscipit velpellentesque a, porttitor tempus mi. Aliquam at Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc. orcilobortis metus venenatis facilisis. Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque. Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc. Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque. Lorem ipsum dolor Integer mollis, augue et molestie rutrum, lorem velit fringilla ipsum, eget pellentesque tortor purus eu enim. Lorem ipsum dolor Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere Integer mollis, augue et molestie rutrum, lorem velit cubilia Curae; Nam nunc diam, pellentesque eget eleifend sed, fringilla ipsum, eget pellentesque tortor purus eu enim. consectetur nec felis. Ut ac felis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nunc diam, pellentesque eget eleifend sed, consectetur nec felis. Ut ac felis nisi. Paint it Plone! — Simone Deponti for Abstract
  • 14. Getting fonts wrong Bad Good @font-face { @font-face { font-family: 'PTSansNarrowRegular'; font-family: 'PTSans'; src: url('PTN57F-webfont.eot'); src: url('PTN57F-webfont.eot'); src: url('PTN57F-webfont.woff') format('woff'); src: url('PTN57F-webfont.woff') format('woff'); font-weight: normal; font-weight: 200; font-style: normal; font-style: normal; } } @font-face { @font-face { font-family: 'PTSansCaptionBold'; font-family: 'PTSans'; src: url('PTC75F-webfont.eot'); src: url('PTC75F-webfont.eot'); src: url('PTC75F-webfont.woff') format('woff'); src: url('PTC75F-webfont.woff') format('woff'); font-weight: normal; font-weight: 700; font-style: normal; font-style: normal; } } @font-face { @font-face { font-family: 'PTSansCaptionRegular'; font-family: 'PTSans'; src: url('PTC55F-webfont.eot'); src: url('PTC55F-webfont.eot'); src: url('PTC55F-webfont.woff') format('woff'); src: url('PTC55F-webfont.woff') format('woff'); font-weight: normal; font-weight: 400; font-style: normal; font-style: normal; } } Paint it Plone! — Simone Deponti for Abstract
  • 15. Grids
  • 16. What's a grid? A grid is: 1. A creative constraint 2. The exoskeleton of the page 3. Something that helps in placing stuff Paint it Plone! — Simone Deponti for Abstract
  • 17. What grid? Avoid fluid grids. Obvious, recommended choice The Deco grid system, Plone's builtin More original choice Get a prebuilt one (personal preferences: cssgrid, frameless) Not-as-crazy-as-it-sounds choice Make your own Paint it Plone! — Simone Deponti for Abstract
  • 18. Making your own You can make a grid that is also a layout engine. With a good starting point (Golden Grid System) it's not that hard. When doing responsive design, not all layouts are possible (a 16-column grid has 16! possible layouts). Optimize/tweak only for the layouts you use. Paint it Plone! — Simone Deponti for Abstract
  • 20. LESS vs SASS LESS SASS Easier to setup Feature complete Works client side (great for development) Slightly more difficult to set up Lacks a couple features Ruby Javascript & node.js Paint it Plone! — Simone Deponti for Abstract
  • 21. CSS vs LESS/SASS CSS LESS #header { @darkred: #842210; border-radius: 5px; @blackish: #111111; -webkit-border-radius: 5px; .rounded-corners (@radius: 5px) { -moz-border-radius: 5px; border-radius: @radius; } -webkit-border-radius: @radius; #header h1 { -moz-border-radius: @radius; color: #842210; } font-size: 26px; #header { font-weight: bold; .rounded-corners(); } h1 { #header p { color: @darkred; font-size: 12px; font-size: 26px; color: #111111; font-weight: bold; } } #header p a { p { text-decoration: none; font-size: 12px; } color: @blackish; #header p a:hover { a { border-width: 1px; text-decoration: none; } &:hover { border-width: 1px } #footer { } border-radius: 10px; } -webkit-border-radius: 10px; } -moz-border-radius: 10px; #footer { .rounded-corners(10px); } } Paint it Plone! — Simone Deponti for Abstract
  • 22. Owh, my brain LESS CSS .mixin1() { .tst3 { @media all { color: grey; .tst { } color: black; @media all { @media screen { .tst { color: red; color: black; .tst3 { } color: white; } } @media all and screen { } .tst { } color: red; } } } .tst .tst3 { .tst3 { color: white; color: grey; } } } .mixin1(); Paint it Plone! — Simone Deponti for Abstract
  • 23. Colors Question What is the hexadecimal value ( #XXXXXX ) for a dark, desaturated yellow? Modern browsers have hsl() ( hsl(60, 30%, 30%); ). IE (6|7|8): What about us? Using a CSS preprocessor helps: desaturate(darken(yellow, 30%), 30%); Paint it Plone! — Simone Deponti for Abstract
  • 25. Dissociative identity disorder China is the only country still using IE6 widely, 21.3% still use IE6 (source: ie6countdown.com) Internet Explorer usage in 2012, by version Region IE 9 IE 8 IE 7 IE 6 Worldwide 15.22% 15.10% 2.15% 0.90% Europe 14.79% 12.05% 1.70% 0.47% North America 16.97% 12.05% 2.60% 0.62% South America 11.45% 14.11% 1.42% 0.56% Asia 10.85% 18.13% 2.40% 2.04% (but 16.88% in China) Africa 8.84% 12.43% 1.73% 1.53% Oceania 20.79% 14.22% 1.76% 0.47% Percentage of total market, data by gs.statcounter.com Paint it Plone! — Simone Deponti for Abstract
  • 26. Bugs affecting IE Internet Explorer bugs, by version Version Bugs/missing features 6 No > , + , tag[attr="value"] , position: fixed , buggy .class1.class2 , :hover only on links, buggy overflow: visible . No (max|min)-(width|height) 7 No :before , :after , :focus , buggy :first-child , buggy position: fixed , broken box model and no way to have a border that doesn't take up space. Also incomplete table styling (forget about playing with borders) and handling of whitespace. 8 No CSS3 whatsoever, including :last-child . Webfonts look ugly. :first-child , + , do not behave correctly when you add/remove elements 9 Not substantially better or worse than any other browser Paint it Plone! — Simone Deponti for Abstract
  • 27. IE tricks Use modernizr.js to include browser-specific optimizations. Use Javascript to add classes where you are missing selectors (e.g. :first-child and :last-child ). Throw away borders for browsers with an incomplete box model. Paint it Plone! — Simone Deponti for Abstract
  • 29. Models and policies There are too many page types for a designer to come up with a full mockup of each. However, if you decompose each page in a layout and a set of widgets, things are easier to design and mock. This also reminds me of something else that began with D. Paint it Plone! — Simone Deponti for Abstract
  • 30. Bootstrap The lesson Bootstrap is more than a default set of CSS. It provides a documented set of widgets, where it's easy to pick the one that fits best thanks to visual examples, and just using the correct markup does the job. And the whole system is coherent and cohesive, allowing you to mix & match. Paint it Plone! — Simone Deponti for Abstract
  • 31. Bootstrap The opportunity Nothing prevents you to do what Bootstrap does. Catalog and document all of your widgets in a static template, and plone.app.theming will serve it over the ++theme++ traversal namespace. It doesn't need to be as wide or as encompassing as Bootstrap , but it's a very good starting point. Paint it Plone! — Simone Deponti for Abstract
  • 32. Useful CSS classes .hiddenStructure Links .selected .link-plain .portalMessage .link-anchor .info .link-external .warning .link-category (tags) .error .link-overlay .discreet Paint it Plone! — Simone Deponti for Abstract
  • 33. Useful markup Tables Tabs Portlets Breadcrumbs Navigation Edit bar Paint it Plone! — Simone Deponti for Abstract
  • 34. Useful Javascript modernizr jQuery jQueryTools (tabs, overlays) jQueryUI (currently as add-on) Paint it Plone! — Simone Deponti for Abstract
  • 35. Diazo tricks A few parts of Diazo often overlooked or misunderstood. Wrapping stuff classA is classB <replace css:content="#my-content"> <replace css:content=".classA"> <div id="my-wrapper" class="a-class"> <xsl:copy select="node()"> <div class="another-class"> <xsl:attribute name="class"> <xsl:apply-templates select="node()" /> <xsl:value-of select="./@class" /> classB </div> </xsl:attribute> </div> <xsl:apply-templates /> </replace> </xsl:copy> </replace> if ... elif ... else and <rules css:if-content="#foo"> ... </rules> <rules css:if-content="#bar"> ... </rules> <rules css:if-content="#foo"> <rules css:if-not-content="#foo, #bar"> ... </rules> <rules css:if-content="#bar"> ... </rules> </rules> Paint it Plone! — Simone Deponti for Abstract
  • 36. Using jbot There are situations in which using Diazo is overkill. Then you shall use jbot. When to do that: 1. When it's a small component. 2. When it would require the use of advanced XSLT to morph the original HTML. Paint it Plone! — Simone Deponti for Abstract
  • 38. Questions? Paint it Plone! — Simone Deponti for Abstract