SlideShare a Scribd company logo
Develop HTML5 Sites
        Optimized with Web Performance
        Best Practices on WEM
        Gabriel Walt | Enterprise Community Evangelist




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
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
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
What is HTML5?




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   4
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
What is HTML5?                                                             h p://slides.html5rocks.com/ (use chrome)


  Semantics & Markup                                                                                 Offline 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
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
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
Hands-On!


                            Exercise 1.2
                            Authoring web content with WEM

                            Logged-in as admin
                            User: admin
                            Pass: admin




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   9
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
Hands-On


                            Exercise 1.3
                            Exploring the Content Repository
                            It’s a database that looks like a le system and
                            features all the good stuff like unstructured,
                            versioning, observation, access control…




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.    11
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
Hands-On


                            Exercise 1.4
                            Edit website markup




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   13
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
Hands-On


                            Exercise 2.1
                            Launch a WEM publish instance




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   15
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
Hands-On


                            Exercise 2.2
                            Publish content changes

                            Exercise 2.3
                            Publish component changes




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   17
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
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
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
Hands-On


                            Exercise 4
                            Add a Caching Layer
                            §     HTML Caching
                            §     Optimize the HTTP requests




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   21
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
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
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
WEM Deployment – Delivery Setup

                                                                               Cache Invalidation




                                                                             Publish                Dispatcher
                                                                              WEM

                                                                                                                                                   Visitor Traffic
                   Author
                                                                                                                   Load
                       WEM                                                                                        Balancer


                                                                             Publish                Dispatcher
                                                                              WEM                                                                  Visitor Traffic
                                                                                                                             CDN*

                                                                               Cache Invalidation

                                                                     App                               Delivery
                                                                                                                             * Content Delivery Network
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.                              25
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
   26

More Related Content

What's hot (20)

PPTX
CM WebClient for CA Plex
CM First Group
 
PDF
Professional Frontend Engineering
Nate Koechley
 
PDF
CM WebClient Datasheet
CM First Group
 
DOC
Alexander Zeng
Alex Zeng
 
PDF
CM WebClient CA Expo Mannheim Germany
CM First Group
 
PPT
Seamless Integrations between WebCenter Content, Site Studio, and WebCenter S...
Brian Huff
 
PDF
WebSphere Application Server - Meeting Your Cloud and On-Premise Demands
Ian Robinson
 
PDF
Anatomy of an HTML 5 mobile web app
Ivano Malavolta
 
PDF
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joo...
jaxconf
 
PDF
Ajax In Enterprise Portals Wesley Hales
rajivmordani
 
PDF
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Joonas Lehtinen
 
PDF
Adaptive Web Design Workshop [WebVisions NYC 2012]
Aaron Gustafson
 
PDF
Adaptive Web Design Workshop [Iceweb 2011]
Aaron Gustafson
 
PDF
JavaCro'14 - Vaadin web application integration for Enterprise systems – Pete...
HUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
PDF
Adaptive Web Design Workshop [inspire 2011]
Aaron Gustafson
 
PPTX
BlackBerry WebWorks
Bhasker Thapan
 
PPT
Adobe® Flex™
Uday Shankar
 
PDF
HTML5 and the dawn of rich mobile web applications
James Pearce
 
PDF
Java Edge.2008.Web.Frameworks.Catagorized
roialdaag
 
PDF
QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...
Codemotion
 
CM WebClient for CA Plex
CM First Group
 
Professional Frontend Engineering
Nate Koechley
 
CM WebClient Datasheet
CM First Group
 
Alexander Zeng
Alex Zeng
 
CM WebClient CA Expo Mannheim Germany
CM First Group
 
Seamless Integrations between WebCenter Content, Site Studio, and WebCenter S...
Brian Huff
 
WebSphere Application Server - Meeting Your Cloud and On-Premise Demands
Ian Robinson
 
Anatomy of an HTML 5 mobile web app
Ivano Malavolta
 
Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joo...
jaxconf
 
Ajax In Enterprise Portals Wesley Hales
rajivmordani
 
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Joonas Lehtinen
 
Adaptive Web Design Workshop [WebVisions NYC 2012]
Aaron Gustafson
 
Adaptive Web Design Workshop [Iceweb 2011]
Aaron Gustafson
 
JavaCro'14 - Vaadin web application integration for Enterprise systems – Pete...
HUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
Adaptive Web Design Workshop [inspire 2011]
Aaron Gustafson
 
BlackBerry WebWorks
Bhasker Thapan
 
Adobe® Flex™
Uday Shankar
 
HTML5 and the dawn of rich mobile web applications
James Pearce
 
Java Edge.2008.Web.Frameworks.Catagorized
roialdaag
 
QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...
Codemotion
 

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

PDF
Evolving Mobile Architectures
sgleadow
 
PPTX
When worlds Collide: HTML5 Meets the Cloud
David Pallmann
 
PPTX
Building assets on the fly with Node.js
Acquisio
 
PPTX
baidu开发者大会 - Web App开发框架介绍以及分析
joylite
 
PDF
X Aware Ajax World V1
rajivmordani
 
PPSX
Cross platform mobile application architecture for enterprise
Venkat Alagarsamy
 
PPTX
Building single page applications
SC5.io
 
PDF
Dynacache in WebSphere Portal Server
Rohit Kelapure
 
PPTX
WebBee rapid web app development teck stack
ALDAN3
 
PDF
HiUED 前端/web 發展和體驗
Bobby Chen
 
PDF
JSFoo-2017 Takeaways
Mir Ali
 
KEY
Cloud Computing & Scaling Web Apps
Mark Slingsby
 
KEY
Why You Need a Front End Developer
Mike Wilcox
 
PDF
Developing the Next Generation Embedded HMIs
mentoresd
 
KEY
20120802 timisoara
Richard Rodger
 
PDF
Moving to Web 2.0 - Best Practices for Business and Application Migration
anilmadugula
 
PPTX
Soa204 Kawasaki Final
Anush Kumar
 
PPT
FIND ME IF YOU CAN – SMART FUZZING AND DISCOVERY
Shreeraj Shah
 
PDF
Deploying Enterprise Apps in the Cloud
SDForum Cloud Services SIG
 
PDF
Migrating Enterprise Apps to the Cloud
SVDevOps
 
Evolving Mobile Architectures
sgleadow
 
When worlds Collide: HTML5 Meets the Cloud
David Pallmann
 
Building assets on the fly with Node.js
Acquisio
 
baidu开发者大会 - Web App开发框架介绍以及分析
joylite
 
X Aware Ajax World V1
rajivmordani
 
Cross platform mobile application architecture for enterprise
Venkat Alagarsamy
 
Building single page applications
SC5.io
 
Dynacache in WebSphere Portal Server
Rohit Kelapure
 
WebBee rapid web app development teck stack
ALDAN3
 
HiUED 前端/web 發展和體驗
Bobby Chen
 
JSFoo-2017 Takeaways
Mir Ali
 
Cloud Computing & Scaling Web Apps
Mark Slingsby
 
Why You Need a Front End Developer
Mike Wilcox
 
Developing the Next Generation Embedded HMIs
mentoresd
 
20120802 timisoara
Richard Rodger
 
Moving to Web 2.0 - Best Practices for Business and Application Migration
anilmadugula
 
Soa204 Kawasaki Final
Anush Kumar
 
FIND ME IF YOU CAN – SMART FUZZING AND DISCOVERY
Shreeraj Shah
 
Deploying Enterprise Apps in the Cloud
SDForum Cloud Services SIG
 
Migrating Enterprise Apps to the Cloud
SVDevOps
 
Ad

More from Gabriel Walt (7)

PDF
Managing Omnichannel Experiences with Adobe Experience Manager (AEM)
Gabriel Walt
 
PDF
Modernizing Adobe Experience Manager (AEM)
Gabriel Walt
 
PDF
SPA Editor - Adobe Experience Manager Sites
Gabriel Walt
 
PDF
Adobe Experience Manager Core Components
Gabriel Walt
 
PDF
AEM Sightly Deep Dive
Gabriel Walt
 
PDF
AEM Sightly Template Language
Gabriel Walt
 
PPTX
CQ Provisionning & Authoring
Gabriel Walt
 
Managing Omnichannel Experiences with Adobe Experience Manager (AEM)
Gabriel Walt
 
Modernizing Adobe Experience Manager (AEM)
Gabriel Walt
 
SPA Editor - Adobe Experience Manager Sites
Gabriel Walt
 
Adobe Experience Manager Core Components
Gabriel Walt
 
AEM Sightly Deep Dive
Gabriel Walt
 
AEM Sightly Template Language
Gabriel Walt
 
CQ Provisionning & Authoring
Gabriel Walt
 
Ad

Recently uploaded (20)

PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PDF
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
PDF
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PDF
Biography of Daniel Podor.pdf
Daniel Podor
 
PDF
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PDF
IoT-Powered Industrial Transformation – Smart Manufacturing to Connected Heal...
Rejig Digital
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
PDF
July Patch Tuesday
Ivanti
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PPTX
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PDF
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
PDF
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
Biography of Daniel Podor.pdf
Daniel Podor
 
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
IoT-Powered Industrial Transformation – Smart Manufacturing to Connected Heal...
Rejig Digital
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
July Patch Tuesday
Ivanti
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 

Optimizing HTML5 Sites with CQ5/WEM

  • 1. Develop HTML5 Sites Optimized with Web Performance Best Practices on WEM Gabriel Walt | Enterprise Community Evangelist © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 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
  • 4. What is HTML5? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 4
  • 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 Offline 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
  • 9. Hands-On! Exercise 1.2 Authoring web content with WEM Logged-in as admin User: admin Pass: admin © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 9
  • 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 stuff 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
  • 13. Hands-On Exercise 1.4 Edit website markup © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 13
  • 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
  • 15. Hands-On Exercise 2.1 Launch a WEM publish instance © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 15
  • 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
  • 17. Hands-On Exercise 2.2 Publish content changes Exercise 2.3 Publish component changes © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
  • 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
  • 21. Hands-On Exercise 4 Add a Caching Layer §  HTML Caching §  Optimize the HTTP requests © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  • 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 Traffic Author Load WEM Balancer Publish Dispatcher WEM Visitor Traffic CDN* Cache Invalidation App Delivery * Content Delivery Network © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25
  • 26. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26