Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Stackbox CMS: Next Generation Content Management

vlucas
March 02, 2012

Stackbox CMS: Next Generation Content Management

vlucas

March 02, 2012
Tweet

More Decks by vlucas

Other Decks in Technology

Transcript

  1. Title Text KWWSZZZH[DPSOHFRP ,QVLGH3DJH )RUPRUHLQIRFRPPHQWVDQGVXJJHVWLRQVJRWRPRUWHQMXVWFRPDZLUHIUDPHNLWIRUJRRJOHGUDZLQJV 6HFWLRQ 6HFWLRQ /RJLQ 6LJQXS ,WHP

    ,WHP ,WHP ,WHP ,WHP ,WHP +HDGLQJ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRU YLYHUUD &RS\ULJKW0\3URMHFW QSXWRN" <HV 1R SOD\HUURU   WLFN\QRWH +HDGLQJ /RUHPLSVXPGRORUVLWDPHWFRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRUYLYHUUD 3KDVHOOXVFRQJXHWHPSRUMXVWRVHGFXUVXV4XLVTXHQRQTXDP WXUSLV&XUDELWXUPROOLVOXFWXVWHPSRU$OLTXDPVLWDPHWQLVOYHO DUFXUXWUXPRUQDUHDWYHOVHP8WFRQVHTXDWVFHOHULVTXH DGLSLVFLQJ 3UDHVHQWSUHWLXPOLEHURQHFOHFWXVHOHPHQWXPLQWHUGXP8WDW RGLRORUHP6HGSRVXHUHWHPSXVOLEHURLQFXUVXVPLDFFXPVDQ LG1XOODIDFLOLVL0DHFHQDVYDULXVOHRLGODFXVSUHWLXPDOLTXHW 3HOOHQWHVTXHDFHUDWHOLW Â%XOOHW Â%XOOHW Â%XOOHW +HDGLQJ Simple Content Page Monday, May 30, 2011
  2. Content for this page KWWSZZZH[DPSOHFRP ,QVLGH3DJH )RUPRUHLQIRFRPPHQWVDQGVXJJHVWLRQVJRWRPRUWHQMXVWFRPDZLUHIUDPHNLWIRUJRRJOHGUDZLQJV 6HFWLRQ 6HFWLRQ /RJLQ

    6LJQXS ,WHP ,WHP ,WHP ,WHP ,WHP ,WHP +HDGLQJ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRU YLYHUUD &RS\ULJKW0\3URMHFW QSXWRN" <HV 1R SOD\HUURU   WLFN\QRWH +HDGLQJ /RUHPLSVXPGRORUVLWDPHWFRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRUYLYHUUD 3KDVHOOXVFRQJXHWHPSRUMXVWRVHGFXUVXV4XLVTXHQRQTXDP WXUSLV&XUDELWXUPROOLVOXFWXVWHPSRU$OLTXDPVLWDPHWQLVOYHO DUFXUXWUXPRUQDUHDWYHOVHP8WFRQVHTXDWVFHOHULVTXH DGLSLVFLQJ 3UDHVHQWSUHWLXPOLEHURQHFOHFWXVHOHPHQWXPLQWHUGXP8WDW RGLRORUHP6HGSRVXHUHWHPSXVOLEHURLQFXUVXVPLDFFXPVDQ LG1XOODIDFLOLVL0DHFHQDVYDULXVOHRLGODFXVSUHWLXPDOLTXHW 3HOOHQWHVTXHDFHUDWHOLW Â%XOOHW Â%XOOHW Â%XOOHW +HDGLQJ Monday, May 30, 2011
  3. Common Elements • URL • Title • Body • Parent

    / Hierarchy • Section / Category / Tags • Metadata • Template Monday, May 30, 2011
  4. Title Text KWWSZZZH[DPSOHFRP ,QVLGH3DJH )RUPRUHLQIRFRPPHQWVDQGVXJJHVWLRQVJRWRPRUWHQMXVWFRPDZLUHIUDPHNLWIRUJRRJOHGUDZLQJV 6HFWLRQ 6HFWLRQ /RJLQ 6LJQXS ,WHP

    ,WHP ,WHP ,WHP ,WHP ,WHP +HDGLQJ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRU YLYHUUD &RS\ULJKW0\3URMHFW QSXWRN" <HV 1R SOD\HUURU   WLFN\QRWH +HDGLQJ /RUHPLSVXPGRORUVLWDPHWFRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRUYLYHUUD 3KDVHOOXVFRQJXHWHPSRUMXVWRVHGFXUVXV4XLVTXHQRQTXDP WXUSLV&XUDELWXUPROOLVOXFWXVWHPSRU$OLTXDPVLWDPHWQLVOYHO DUFXUXWUXPRUQDUHDWYHOVHP8WFRQVHTXDWVFHOHULVTXH DGLSLVFLQJ 3UDHVHQWSUHWLXPOLEHURQHFOHFWXVHOHPHQWXPLQWHUGXP8WDW RGLRORUHP6HGSRVXHUHWHPSXVOLEHURLQFXUVXVPLDFFXPVDQ LG1XOODIDFLOLVL0DHFHQDVYDULXVOHRLGODFXVSUHWLXPDOLTXHW 3HOOHQWHVTXHDFHUDWHOLW Â%XOOHW Â%XOOHW Â%XOOHW +HDGLQJ Content for all pages Monday, May 30, 2011
  5. Complex Page KWWSZZZH[DPSOHFRP +RPHSDJH+XOXVW\OH )RUPRUHLQIRFRPPHQWVDQGVXJJHVWLRQVJRWRPRUWHQMXVWFRPDZLUHIUDPHNLWIRUJRRJOHGUDZLQJV 6HFWLRQ 6HFWLRQ /RJLQ 6LJQXS ,WHP

    ,WHP ,WHP ,WHP ,WHP ,WHP +HDGLQJ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRU YLYHUUD $FWLRQ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD +HDGHU +HDGHU +HDGHU &RS\ULJKW0\3URMHFW QSXWRN" <HV 1R SOD\HUURU   WLFN\QRWH Monday, May 30, 2011
  6. Content for this page KWWSZZZH[DPSOHFRP +RPHSDJH+XOXVW\OH )RUPRUHLQIRFRPPHQWVDQGVXJJHVWLRQVJRWRPRUWHQMXVWFRPDZLUHIUDPHNLWIRUJRRJOHGUDZLQJV 6HFWLRQ 6HFWLRQ /RJLQ

    6LJQXS ,WHP ,WHP ,WHP ,WHP ,WHP ,WHP +HDGLQJ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRU YLYHUUD $FWLRQ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD +HDGHU +HDGHU +HDGHU &RS\ULJKW0\3URMHFW QSXWRN" <HV 1R SOD\HUURU   WLFN\QRWH Monday, May 30, 2011
  7. Which one is the main content area? Hint: None of

    them are. Monday, May 30, 2011
  8. The definition of a page these content management systems use

    is fundamentally flawed. Monday, May 30, 2011
  9. No CMS that uses this definition of a page agrees

    on the same solution to this problem, or even the same terminology. Monday, May 30, 2011
  10. Solutions(?) for “other” content • Widgets • Blocks • Modules

    • Plugins • Nodes • Extensions • Code Snippets • Hard-coded in Templates Monday, May 30, 2011
  11. Users are forced to edit pieces of the same page

    in completely different areas of a complex admin system several pages away from the content itself. Monday, May 30, 2011
  12. These methods are all workarounds to a flawed model that

    doesn’t work for pages. Monday, May 30, 2011
  13. Title Text What is a page? We need a new

    definition Monday, May 30, 2011
  14. Common Elements • URL • Title • Body • Parent

    / Hierarchy • Section / Category / Tags • Metadata • Template Monday, May 30, 2011
  15. Common Elements • URL • Title • Parent / Hierarchy

    • Metadata • Template Monday, May 30, 2011
  16. The page template defines the content. It is impossible to

    know the content - amount, placement, or type - ahead of time. Monday, May 30, 2011
  17. Content for this page KWWSZZZH[DPSOHFRP +RPHSDJH+XOXVW\OH )RUPRUHLQIRFRPPHQWVDQGVXJJHVWLRQVJRWRPRUWHQMXVWFRPDZLUHIUDPHNLWIRUJRRJOHGUDZLQJV 6HFWLRQ 6HFWLRQ /RJLQ

    6LJQXS ,WHP ,WHP ,WHP ,WHP ,WHP ,WHP +HDGLQJ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRU YLYHUUD $FWLRQ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD +HDGHU +HDGHU +HDGHU &RS\ULJKW0\3URMHFW QSXWRN" <HV 1R SOD\HUURU   WLFN\QRWH Monday, May 30, 2011
  18. How do we define content areas? Designers will be working

    with templates. Monday, May 30, 2011
  19. Regions defined with CSS classes <html> <head> <title>Homepage</title> </head> <body>

    <div class=”cms_region” id=”slideshow”></div> <div class=”cms_region” id=”intro_left”></div> <div class=”cms_region” id=”intro_center”></div> <div class=”cms_region” id=”intro_right”></div> </body> </html> Monday, May 30, 2011
  20. Title Text KWWSZZZH[DPSOHFRP ,QVLGH3DJH )RUPRUHLQIRFRPPHQWVDQGVXJJHVWLRQVJRWRPRUWHQMXVWFRPDZLUHIUDPHNLWIRUJRRJOHGUDZLQJV 6HFWLRQ 6HFWLRQ /RJLQ 6LJQXS ,WHP

    ,WHP ,WHP ,WHP ,WHP ,WHP +HDGLQJ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRU YLYHUUD &RS\ULJKW0\3URMHFW QSXWRN" <HV 1R SOD\HUURU   WLFN\QRWH +HDGLQJ /RUHPLSVXPGRORUVLWDPHWFRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRUYLYHUUD 3KDVHOOXVFRQJXHWHPSRUMXVWRVHGFXUVXV4XLVTXHQRQTXDP WXUSLV&XUDELWXUPROOLVOXFWXVWHPSRU$OLTXDPVLWDPHWQLVOYHO DUFXUXWUXPRUQDUHDWYHOVHP8WFRQVHTXDWVFHOHULVTXH DGLSLVFLQJ 3UDHVHQWSUHWLXPOLEHURQHFOHFWXVHOHPHQWXPLQWHUGXP8WDW RGLRORUHP6HGSRVXHUHWHPSXVOLEHURLQFXUVXVPLDFFXPVDQ LG1XOODIDFLOLVL0DHFHQDVYDULXVOHRLGODFXVSUHWLXPDOLTXHW 3HOOHQWHVTXHDFHUDWHOLW Â%XOOHW Â%XOOHW Â%XOOHW +HDGLQJ Content for all pages Monday, May 30, 2011
  21. We also need global regions <html> <head> <title>Homepage</title> </head> <body>

    <div class=”cms_region_global” id=”header”></div> <div class=”cms_region” id=”content”></div> <div class=”cms_region_global” id=”sidebar”></div> <div class=”cms_region_global” id=”footer”></div> </body> </html> Monday, May 30, 2011
  22. Unobtrusive markup for regions • Content regions defined with CSS

    classes • cms_region • Content for the current page • cms_region_global • Content shared across multiple pages • Any global template region that shares the same ID Monday, May 30, 2011
  23. Different types of content KWWSZZZH[DPSOHFRP +RPHSDJH+XOXVW\OH )RUPRUHLQIRFRPPHQWVDQGVXJJHVWLRQVJRWRPRUWHQMXVWFRPDZLUHIUDPHNLWIRUJRRJOHGUDZLQJV 6HFWLRQ 6HFWLRQ /RJLQ

    6LJQXS ,WHP ,WHP ,WHP ,WHP ,WHP ,WHP +HDGLQJ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW&UDV LPSHUGLHWHQLPDFDXJXHDXFWRU YLYHUUD $FWLRQ /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD /RUHPLSVXPGRORUVLWDPHW FRQVHFWHWXUDGLSLVFLQJHOLW &UDVLPSHUGLHWHQLPDF DXJXHDXFWRUYLYHUUD +HDGHU +HDGHU +HDGHU &RS\ULJKW0\3URMHFW QSXWRN" <HV 1R SOD\HUURU   WLFN\QRWH Monday, May 30, 2011
  24. Different types of content • Text / HTML / WYSIWYG

    • Site Navigation • Blog / News • Event Calendar • Image/Video Slideshow • Contact Form • Product Listing • etc... Monday, May 30, 2011
  25. Every piece of content is a module so nothing is

    pre-defined. Monday, May 30, 2011
  26. Kill the admin panel. Put all edit controls on-page, overlaid

    on top of the content the user wants to edit. Monday, May 30, 2011