Optimizing HTML5 Sites with CQ5/WEM

2. Who am I? Gabriel Walt §  Enterprise Community Evangelist §  Front-End Developer §  Joined Adobe through the Day acquisition §  CQ5 / WEM web developer §  h p://friendfeed.com/gabrielwalt §  gwalt at adobe dt com © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2

3. Lab Overview Plan §  HTML5 & WEM intro §  Exercise 1 – Learn how to author & develop on WEM §  Exercise 2 – Learn how to use an Author-Publish setup §  Exercise 3 – Optimizing HTML §  Exercise 4 – Optimizing HTTP © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3

5. What is HTML5? §  Follows HTML 4.01 and XHTML 1.1 §  Pragmatic approach developed by both, the WHATWG and the W3C §  Final speci cation is under progress… Exercise 0: §  Go to h p://ishtml5readyyet.com/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5

6. What is HTML5? h p://slides.html5rocks.com/ (use chrome) Semantics & Markup Oﬄine Storage Graphics / Multimedia §  More semantic tags §  Web Storage §  Audio + Video (section, article, header, footer, nav, aside, hgroup, …) §  Web SQL Database §  Canvas 2D & 3D §  New form types & Form eld types on mobile §  IndexedDB §  Inline SVG §  Markup for applications §  Application Cache (datalist, menu, command, meter, progress, …) §  Link metadata a ributes Realtime / Communication (link[rel=alternate], link[rel=prefetch], a[rel=external], …) §  Web Workers §  Microdata (aka microformat) §  WebSocket §  A ributes for Accessible Rich Internet Applications §  Noti cations CSS3 File / Hardware Access §  Powerful selectors §  Native Drag & Drop §  Transitions & Animations §  Desktop Drag-In (File API) §  Webfonts, Text wrapping, Columns, Text stroke §  Desktop Drag-Out §  Opacity, HSV colors, Gradients, Shadows, Re ections, Background enhancements, Rounded corners, Border §  FileSystem APIs Images, Flexible Box Model §  Geolocation §  Device Orientation §  Speech Input © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6

7. What is WEM? §  Web Content Management §  Mobile Web Content Collaboration Marketing Development §  Digital Asset Management Management & Pro les Campaigns Tools §  Marketing Campaigns §  Social Collaboration Shared Framework: Components, Work ow, Mobile, Digital Assets, §  Targeting (Test&Target) Multi-Site Manager, Tagging, Analytics & Optimization §  Work ow §  Multi-Site Manager OSGi Runtime §  Tagging Content Repository §  Analytics & Optimization §  Active Clustering Web Experience Management © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7

8. Hands-On! Exercise 1.1 Ge ing started with Web Experience Management 1.  Launch a WEM author instance 2.  Login as admin User: admin Pass: admin © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 8

10. Web Experience Management – Web Stack Client Web Experience Management Interacting with any client runtime HTTP[S], WebDAV, CIFS SMB, CMIS REST Web Framework + JSR 223 Scripting Host Scripting (JSP, server-side JS, Scala, etc.) Server OSGi Runtime Modern Application Stack Extensible and Modular JCR 2.0 API (JSR 170 + JSR 283) Featuring -  Structured and unstructured data Content Repository -  Access Control -  Search -  Query (SQL, XPath) Java VM -  Versioning -  Clustering -  Observation © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 10

11. Hands-On Exercise 1.3 Exploring the Content Repository It’s a database that looks like a le system and features all the good stuﬀ like unstructured, versioning, observation, access control… © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 11

12. Sling URL Decomposition /geometrixx/en/products.html the path de nes the resource the selectors de ne the rendition /geometrixx/en/products.teaser.html sling:resourceType geometrixx/components/contentpage © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 12

14. Semantic Markup <div id=“header”> <header> <div id=“nav”> <nav> <div class=“article”> <article> <div id=“sidebar”> <sidebar> <div class=“section”> <section> <div id=“footer”> <footer> Test your semantic markup h p://gsnedders.html5.org/outliner © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14

16. WEM Instances and Deployment QA PROD * PackageSVN, Manager, Vault & Replication Application Deployment * Publish Author/Publish WEM WEM Application Deployment * Author WEM DataCenter1 DataCenter2 Author Publish WEM WEM Subversion, Build Server, Selenium, LDAP DEV Firewall Firewall Internal Network DMZ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 16

18. Optimization Exercise 3 Optimize Front-End §  Merge CSS & JS §  Include JS at the bo om of the HTML §  Minify CSS & JS © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

19. Client Libraries categories Client Libraries §  We have various CSS & JS libraries cq.jquery (Frameworks) §  Express relations between client libs enterprise-dev.libs (Libraries & Site Design) §  dependencies enterprise-dev.layout (Page Component A) §  embed enterprise-dev.layout (Page Component B) §  Various optimizations §  concatenated enterprise-dev.content (Content Component A) §  mini ed enterprise-dev.content (Content Component B) §  gzipped through HTTP §  ClientLib dependencies and embeds /libs/cq/ui/content/dumplibs.html enterprise-dev.all (Publish ClientLib) © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19

20. Client Libraries / Frameworks etc Site-speci c Libraries clientlibs Component A designs Component B site Component C apps site Publish ClientLib components © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20

22. What is REST? §  REST is a term coined by Roy T. h p://domain/path/company.html Fielding in his PhD dissertation to describe an architecture style of Client Server network systems. Our company was founded in 545 BC by Pythagoras of Samos. Since then […] §  Describes desired Web architecture §  e Web is an example of REST system company.html §  Stateless §  Cacheable © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22

23. Hands-On Exercise 4.2 Enable HTTP gzip compression 1.  Uncomment line 87 of h pd.conf LoadModule deflate_module libexec/apache2/mod_deflate.so 2.  h p://bit.ly/h p-gzip # Insert filter SetOutputFilter DEFLATE # Don't compress images SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23

24. Hands-On Exercise 4.2 Enable HTTP gzip compression 1.  Uncomment line 92 of h pd.conf LoadModule expires_module libexec/apache2/mod_expires.so 2.  h p://bit.ly/h p-cache ExpiresActive On ExpiresDefault "access plus 1 month” FileETag None AddDefaultCharset utf-8 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

25. WEM Deployment – Delivery Setup Cache Invalidation Publish Dispatcher WEM Visitor Traﬃc Author Load WEM Balancer Publish Dispatcher WEM Visitor Traﬃc CDN* Cache Invalidation App Delivery * Content Delivery Network © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25

Optimizing HTML5 Sites with CQ5/WEM

You are reading a preview.

Check these out next

Optimizing HTML5 Sites with CQ5/WEM

More Related Content

Slideshows for you (20)

Similar to Optimizing HTML5 Sites with CQ5/WEM (20)

More from Gabriel Walt (7)

Recently uploaded (20)

Optimizing HTML5 Sites with CQ5/WEM