Your SlideShare is downloading. ×
0
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
The Future of [Plone] Theming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Future of [Plone] Theming

684

Published on

How theming changes in Plone 5 and front-end development in general.

How theming changes in Plone 5 and front-end development in general.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
684
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Future of [Plone] Theming Chrissy Wainwright How theming changes in Plone 5 and front-end development in general. The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 2. What changes in Plone 5? Diazo is the default theming story The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 3. What changes in Plone 5? portal_skins becomes deprecated The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 4. What changes in Plone 5? New theme: The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 5. What changes in Plone 5? Uses Chameleon for templates The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 6. What changes in Plone 5? Lots of other things (go check it out!) https://plone5.veit-schiele.de (demo site) http://plone.org/try-five (download) The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 7. Help prepare Plone 5! Sprints this weekend: Plone 5 bug fixes Javascript/Mockup Skins removal Plone installer collective.jbot Dexterity/PloneFormGen Meet in Sage room 3235 The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 8. How can you future-proof a Plone theme? Make it a Diazo theme Use Plone Default as the base theme Reduce number of template overrides Turn custom skins templates into view templates The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 9. Make a Diazo Theme Diazo is a method of mapping dynamic content to a static theme zopeskel.diazotheme for boilerplate A Diazo theme is basically a resource directory The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 10. Use Plone Default as Your Base Don't use Sunburst (Plone 4 Theme) Navbar will still be styled Also note that the main_template now uses HTML5 elements The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 11. Reduce Number of Template Overrides Includes skins and z3c.jbot Do as much as possible with Diazo Some templates will be relocated in Plone 5 Upgrading Plone is easier when you don't have to manage the template overrides When you do override a template, add a note of what version it came from The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 12. Create View Templates In configure.zcml: <browser:page for="*" name="homepage" class=".homepageview.HomePageView" template="homepageview.pt" permission="zope2.View" /> This template is accessible at yoursite.com/@@homepage, so with Diazo: <replace css:theme="#content" css:content="#home" href="/@@homepage"/> The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 13. What changes are happening with the Internet? Supported Technologies Browser Usage Responsive Themes The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 14. Supported Technologies HTML5 CSS3 SVG images http://caniuse.com/ The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 15. Browser Stats Chrome, FF, IE11, Safari iPad, IE8-10 The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 16. Browser Stats Look at your site's analytics IE6 is "dead"! The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 17. Responsive Themes Fairly easy to implement Don't need a separate site or an app for mobile Use the viewport <meta> tag Uses CSS media queries, tiny bit of JS for navigation toggle The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 18. CSS/JS Optimization Put all CSS and JS files in the resource registries Order files in CSS and JS registries to make as few requests as possible The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 19. Image Optimization Use image sprites Use CSS instead of images where possible http://jpegmini.com, https://tinypng.com The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 20. Any Questions/Comments? The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 21. Resources  and  Links Updating  a  Traditional  Plone  Theme  to  Diazo Plone  5  Demo Diazo.org zopeskel.diazotheme http://caniuse.com StatCounter  May  2014 http://jpegmini.com,  https://tinypng.com http://sixfeetup.com/quickref Presentation  created  with  Hovercraft!

×