• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mocking CQ5 HTML
 

Mocking CQ5 HTML

on

  • 1,650 views

Presentation “Mocking CQ5 HTML - An efficient way to deliver CQ5-compatible designs“ by Jan Kuźniak at CQCON2013 in Basel on 19 and 20 June 2013.

Presentation “Mocking CQ5 HTML - An efficient way to deliver CQ5-compatible designs“ by Jan Kuźniak at CQCON2013 in Basel on 19 and 20 June 2013.

Statistics

Views

Total Views
1,650
Views on SlideShare
1,648
Embed Views
2

Actions

Likes
0
Downloads
23
Comments
0

1 Embed 2

http://www.markszulc.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mocking CQ5 HTML Mocking CQ5 HTML Presentation Transcript

    • © 2013 Cognifide Limited. In commercial confidence only.Mocking CQ5 HTMLAn efficient way to deliverCQ5-compatible designsby Jan Kuźniak
    • © 2013 Cognifide Limited. In commercial confidence only.Agenda• To Mock, Or Not To Mock?• How To Mock CQ5?• Demo
    • © 2013 Cognifide Limited. In commercial confidence only.© 2013 Cognifide Limited. In commercial confidence only.To MockOrNot To Mock?
    • © 2013 Cognifide Limited. In commercial confidence only.
    • © 2013 Cognifide Limited. In commercial confidence only.
    • © 2013 Cognifide Limited. In commercial confidence only.Why does it happen?Creative ≠ Technical• Working with external creative agency− That didn’t hear about CQ before• Customer has completed a design before engagingdevelopers• Replatforming existing sites• UI developers are unable to test their code, until integration isfinished
    • © 2013 Cognifide Limited. In commercial confidence only.CQ5-Compatible HTMLKathy Sierra and Bert BatesSun Certified Programmer & Developerfor Java 2 Study Guide (2003)“Code as if the developerthat integrates yourmarkup is a homicidalmaniac who knows whereyou live.”
    • © 2013 Cognifide Limited. In commercial confidence only.
    • © 2013 Cognifide Limited. In commercial confidence only.„It’s your fault”• CQ developers couldn’t be bothered with CSS− And if they could – they would mess it up anyway− And it’s a waste of their time− „Why do I have to fix UI dev’s bugs?”• UI team couldn’t be bothered with JSP− And if they could – they would mess it up anyway− And it’s a waste of their time− And integration with CQ5 changed their markup− „It’s not my fault, they broke it”− „I cannot reproduce your issues”
    • © 2013 Cognifide Limited. In commercial confidence only.Solution• Engage UI developers early in the project− And teach them what „CQ5-compatible markup” means• Test if a design is compatible with CQ5 before integration− Mock CQ5 markup, classes and scripts• Enable bug reproduction and collaboration
    • © 2013 Cognifide Limited. In commercial confidence only.© 2013 Cognifide Limited. In commercial confidence only.How To MockCQ5 Markup
    • © 2013 Cognifide Limited. In commercial confidence only.CQ5 HTML Mocks 101• Get your plain HTML page• Add WCM markup in the <head> and around components− Add WCM JavaScript and CSS to your project• Voilà!− Well, almost− WCM JavaScript makes some requests you’ll have to mock
    • © 2013 Cognifide Limited. In commercial confidence only.HTML Mocks in practice• Plain Apache HTTP Server• WCM-specific files under /mock− mod_redirect takes care of requests• WCM decoration markup added using Server Side Includes− WCM initialisation (<head>)− Component start / end− Paragraph system start / end
    • © 2013 Cognifide Limited. In commercial confidence only.
    • © 2013 Cognifide Limited. In commercial confidence only.Where to go next?• Collaborate your UI devs− Share Git / SVN− Pass CSS / JS ownership• Build use cases / test cases− UI devs provide a list of component’s variants− CQ devs implement and demo exactly same variants• Demo to customer using CQ HTML-mocks− You can mock dialogs too!− Keep it lightweight, keep it cheap
    • © 2013 Cognifide Limited. In commercial confidence only.
    • © 2013 Cognifide Limited. In commercial confidence only.© 2013 Cognifide Limited. In commercial confidence only.Thank you!