WEM Architecture & Framework

WEM Environment

WEM: Web Experience Management (WEM)

Overview & Supported Languages

WEM

Web Experience Management (WEM) is a the current Cisco.com publishing system. WEM’s foundation is the Adobe Experience Manager (AEM) authoring system and source file repository.

Cisco.com (CDC) only supports Java based technologies such as:

JSON
JQuery
Javascript
Java
HTML5 (see guidelines)
Kaon
WebGL

CDC does not support the following(including but not limited to):

Database Functionality
(SQL, Access, etc.)
Flash
PHP
ASP
Ruby on Rails
No CMS other than Adobe Experience Manager AEM (WordPress, Drupal, etc.)

Cross Browser Compatibility Requirements

Desktop

Desktop Operating System	IE11 & Above	Firefox 55 & Above	Firefox 56 & Above	Safari 10 & Above	Chrome (Latest Version)
Windows 10 & Above	Full Regression	Sanity testing	Full Regression	-	Full Regression
Mac OS 10.11 & Above	-	-	Sanity	Sanity	Full Regression

Notes:

Regression testing is required, sanity testing is must cover all basic user functionality of code
Any browser NOT listed is NOT supported.
IE8,IE9,& IE10 are no longer supported as the combined traffic on CDC on all three browsers is only 0.7%

Cross Browser Compatibility Requirements

Mobile Operating System	iPhone	iPad	Nexus 4	Nexus 5 and 7	Blackberry Z10	Windows Surface
iOS 11.x & Above	Full Regression	Sanity	-
Android 6.x (Marshmallow) & Above	-	-	Sanity	-	-	-
Android 7.x (Nougat) & Above	-	-	-	Full Regression	-	-
Blackberry OS 10	-	-	-	-	Sanity	-
Windows 8.1	-	-	-	-	-	Sanity

File Naming Conventions

Cisco.com (CDC) observes strict File Naming convention for files and foldersAll file names and folders should be:

Lower case

A file name may only contain one period (.) as the separator between the name and the file extension.

No special characters except underscores and dashes

Not allowed: #, %, &, {, }, \, <, >, *, ?, /, ‘, “, :, !, @

Naming should be SEO friendly and relevant to the content

Visible Text: Work with site strategist and editorial team to make sure text editorial and legal guidelines are followed.File & URL References - All references to files/urls are relative instead of hard coded to the tool or application (not to staging/Cisco.com)

A typical asset path will start with: “/c/dam/m/…”

Change Log: Please provide a change log, and where applicable only send the updated file(s).

Minification and Optimization

Slow Page Load = High bounce user rate and SEO penalization

Code Improvement Recommendations

Code (JavaScript) Minification does not affect the functionality of the source code, it improves load time (and your web app’s performance) because the size of the file to be downloaded now reduces.

Code Optimization Tools:

Test Page load speed: developer.google.com/speed
Chrome extension: https://developer.chrome.com/devtools
JavaScript Minification: Google Closure Compiler, YUI Compiler, JS Min
HTML Minification: HTMLMinifier
CSS Minification: CSSNano, csso

WEM/DAM Configuration

WEM Website vs DAM

In WEM there are 2 distinct areas called 'Websites' and DAM’
Websites is where all web pages reside (html)
DAM is where all other assets reside
All non-html assets such as images, Documents, css, js, xml, etc

Websites Paths

Internal Path: (e.g.,) /Websites/content/r/mysite/ index.html
External Path: (e.g.,) http://www.cisco.com/c/r/mysite/index.html

DAM Paths

Internal Path: (e.g.,) /Digital Assets/content/dam/r/mysite/ image.png
External Path: (e.g.,) http://www.cisco.com/c/dam/r/ mysite/image.png
Generic Website vs DAM Training: https://www.youtube.com/watch ?v=UyWkEbOzfyc
WEMSupported DAM Mime types; file names cannot have more 1 one periods; e.g., min.file.c

Accessibility

Accessibility's Guidelines:

Customers (both public and federal) are required to purchase IT solutions that are accessible.

Consumer groups could potentially litigate against companies that do not meet accessibility guidelines.
Every major Cisco customer has at least one disabled employee who is involved in purchase decisions.
Because Cisco.com is a key component of every Cisco solution, the site must closely comply with accessibility regulations

Include the following features

Keyboard navigation via tab order on the pages
Skip links allow graceful degradation for non-JavaScript users
Resizable fonts
Print function automatic converts to
printer-friendly version
0 = help
For detailed information see WW3s definition
Here is a more designer friendly less technical link to get you started