Apache Trinidad

• Obfuscation & Compression
• Design goal of reduced file size
• Turn off in web.xml

CSS Compression

Geometry

• ADF Layout Preview Site
• ADF Layout Online Tool
• http://jdevadf.oracle.com/adf-richclient-demo/faces/visualDesigns/index.jspx
• Martin Deh Blog Post
• http://martindeh.blogspot.com/2009/08/adf-layout-overview-and-best-practices.htm

ADF Layout Preview

• To Flow or not to Flow?
• Scrolls Bar Headaches
• Majority of web sites use flow-type layout
• Since a page template can be changed dynamically
• Create pages and design custom components that display properly in stretching and flowing context

Flow or Stretch?

• Build outer structure with containers that can be stretched and stretch its children
• PanelStretchLayout, PanelSplitter, …
• Create flowing islands
• Use PanelGroupLayout with type=”scroll” or type=”vertical”- this can be stretched, but will not stretch its children
• Don’t embed stretching components inside flowing islands
• Don’t stretch something vertically when inside of a flowing container
• Don’t use height with % unit

Flowing Tips

• Use non-stretching containers
• PanelGroupLayout, PanelBorderLayout, …
• PanelBorderLayout can be used to approximate HTML table component
• To avoid multiple scroll bars, do not nest scrolling PanelGroupLayout components
• Consider type=”vertical”

Flowing Layouts

af:inputText::label

af_inputText_label

Skin Selectors

Enabling the ADF Skin Editing in JDeveloper

• Style Component or Components
• Starts with af|
• contains the name of the component
• Piece of the component to skin, via a pseudo-element
• ::label
• ::content
• ::read-only

Skinning Keys

• JDev code editing support
• ADF Faces Skin Extensions
• Syntax Help
• Image selection
• Code Completion
• Code Folding
• Collapses CSS style definitions
• Mouse-over code info

Skin Development Support

• StyleClass
• Can be used in conjunction with skinning
• Applies styles to the root DOM element
• Can use EL for context specific CSS
• InlineStyle
• Styles the root DOM element
• Can use EL for context specific CSS

CSS in ADF Faces

• ContentStyle Works for
• Input components
• listboxes
• Choices
• richTextEditor
• Shuttle
• contentStyle applied to each list in a shuttle

CSS in ADF Faces

Coarse Grained & Fine Grained

Hybrid Model

Navigation via CSS

• Custom CSS
• Images & Video
• WC Content
• “Web Folders”
• Revise without involving development group
• Revisions, Audit & Workflow
• Drag and Drop

Externalizing Static Assets

Tools

Chrome Inspection

Tools – More!

• “Reset” Stylesheet to Clean Base Styles
• TR Inhibit Makes this possible
• Nice Template within Sample
• Inspired by WebDesignerWall.com

Bob Fraser CSS Reset Tool

• CSS3 Reduces Time and Headaches
• CSS3 Gradient Generators
• CSS3 Border Radius Generators
• CSS3 Box Shadow Generators

More Specific Tools

• Frank Nimphius
• Incredible ADF Skinning Lecture
• http://download.oracle.com/otn_hosted_doc/ jdeveloper/11gdemos/adf-insider-skinning/ adf-insider-skinning.html
• ADF Skinning Tool in JDeveloper
• https://blogs.oracle.com/shay/entry/ adf_faces_skin_editor_how

• Learn About Design and Get Inspired!
• Nettuts
• Smashing Magazine
• Dribbble

3rd Party Information

Skin Editor for JDeveloper 11.1.2

http://jdevadf.oracle.com/adf-richclient-demo/faces/visualDesigns/formLayout.jsp

Online ADF Skin Tool

• DOM is your friend
• $(‘.selector’).find
• Magic of CDATA
• ! Important
• CSS using generated selectors

Applying Styling Client Side

ADF Skin Sample

Posts Related to WebCenter Portal Template Design Best Practices

• E2.0 Workbench Podcast 6 – WebCenter Portal Mobile Templates using Adaptive Styles
• WebCenter Spaces 11g – UI Customization
• 4 WebCenter Spaces Essential CSS Tricks
• Oracle UCM Integration with WebCenter
• Tagging for Business Applications

One of the most powerful aspects of ADF is the ability to leverage Data Controls that abstract a web developer from having to know details of underlying data sources. In our sample we are going to illustrate how a Java Bean can be created, along with a search class and search method to expose LDAP functionality to developers who via the Data Control will be able to drag and drop items within the Data Control to declaratively create this portlet.

Sample Files and Purpose
For the purposes of our portlet development, the following are key files that we will use within our Fusion Web Application

1. DirectorySearch.java – this file contains the method that actually executes the search and returns the results to us. As it receives the results it adds the individual people into a List of Person beans. This class will be used to create our Data Control.

2. Person.java – this Java Bean will provide a container to hold the people that come back in the result set. We will take a look at how to create the structure of the bean, so that this same approach could be used with other projects.

3. GetLDAPUserImage.java – this provides a Servlet that will return the image stored for a given user in the LDAP system. We will not cover it in detail, but it provides a nice utility to let us enhance the results shown for a search by including a user’s photo.

4. LDAPSearch.jspx – our ADF page that will make use of the Data Control in order to provide the interface for the search and the result set.

5. web.xml – in this file we will setup Environment Entries that will be used by the GetLDAPUserImage servlet, as well as the DirectorySearch class to connect to LDAP. This allows us to abstract settings that are environment specific from our actual code.

6. WebCenter Template UI Snippet – at the bottom of this post I have included some navigation snippet code based on what we did in the Navigation Episode that now includes this “portlet”. For the purposes of our display in the UI I have chosen to keep things simple and just use an iFrame to hold the application within our nested list items. This is a hack, but a nice way to quickly provide the feature.

Weblogic Server Embedded LDAP Server Config
If you are going to try to use the embedded LDAP server in WLS for testing, keep in mind that you will need to set the password for connectivity. Set the password in the location below, this will be used to authenticate when using the cn=Admin user principal, as we have specified in our web.xml example in the source code below.

Thoughts on Possible Enhancements
This was made as an example to illustrate a series of platform features, but it may be interesting to expand in the following ways

1. Expose this application via WSRP as a portlet and use portlet preferences to pass the LDAP configuration information. This could allow the base path to support various areas of a directory on the basis of a user’s role – e.g. collaboration portals may only want to expose contact information for peers within a business unit.
2. Add additional attributes to the person object to make the display more comprehensive
3. Add more detailed search options to allow filtering prior to the execution of the search

Happy coding!

Project Code
Download LDAP Search Portlet for WebCenter ADF Project Code

The following are the code samples used in our example. For the search it has been commented in a way with its LDAP connection information that will also apply to the LDAP connectivity in GetLDAPUserImage.java. Arguably, there are better ways to code this, but I have kept it simple for demonstration purposes.

package E2Workbench;

import java.util.ArrayList;
import java.util.List;
import java.util.Properties;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingEnumeration;
import javax.naming.NamingException;
import javax.naming.directory.Attributes;
import javax.naming.directory.DirContext;
import javax.naming.directory.InitialDirContext;
import javax.naming.directory.SearchControls;
import javax.naming.directory.SearchResult;

public class DirectorySearch {

    // Variables for LDAP connectivity
    private String sLDAPBase;
    private String sLDAPUrl;
    private String sLDAPAuthType;
    private String sLDAPPrincipal;
    private String sLDAPPassword;

    public DirectorySearch() {
        super();
        
        // Set defaults for our connectivity to LDAP
        sLDAPBase = "";
        sLDAPUrl = "";
        sLDAPAuthType = "";
        sLDAPPrincipal = "";
        sLDAPPassword = "";
        
        // Get the values from the web.xml file
        try {
            // Obtain the initial Java Naming and Directory Interface (JNDI) context
            InitialContext initCtx = new InitialContext();
    
            // Perform JNDI lookup to obtain the resource.
            sLDAPBase = (String) initCtx.lookup("java:comp/env/LDAPBase");
            sLDAPUrl = (String) initCtx.lookup("java:comp/env/LDAPUrl");
            sLDAPAuthType = (String) initCtx.lookup("java:comp/env/LDAPAuthType");
            sLDAPPrincipal = (String) initCtx.lookup("java:comp/env/LDAPPrincipal");
            sLDAPPassword = (String) initCtx.lookup("java:comp/env/LDAPPassword");
        }
        catch (Exception ex)
        { 
        }
    }
    
    public List<Person> SearchLDAPDirectory(String sSearchName) {

        // Default search query to be performed against LDAP take a look at
        // http://www.centos.org/docs/5/html/CDS/ag/8.0/Finding_Directory_Entries-LDAP_Search_Filters.html for 
        // some examples
        String filter = "(objectclass=person)";
        
        // Use the search value passed into this method if it contains a value
        if (sSearchName != "")
        {
            filter = "(&(objectclass=person)(cn="+sSearchName+"*))";
        }

        // Create our collection of properties to be used in creating the LDAP connection
        // the values are arrived at on the basis of the Environment Entries in the web.xml file
        Properties env = new Properties();
        env.put(DirContext.INITIAL_CONTEXT_FACTORY, "com.sun.jndi.ldap.LdapCtxFactory");
        env.put(DirContext.PROVIDER_URL,sLDAPUrl);
        env.put(Context.SECURITY_AUTHENTICATION, sLDAPAuthType);
        env.put(Context.SECURITY_PRINCIPAL, sLDAPPrincipal);
        env.put(Context.SECURITY_CREDENTIALS, sLDAPPassword);
        
        // Create a list of our matches on the basis of our query
        List<Person> lPersonMatches = new ArrayList();
        
        try {
            DirContext directoryConnection = new InitialDirContext(env);
            SearchControls sc = new SearchControls();
            sc.setSearchScope(SearchControls.SUBTREE_SCOPE);
            
            // Create an object to hold the results from our query against LDAP
            NamingEnumeration matchingDirectoryEntries = null;

            // Perform the search
            matchingDirectoryEntries = directoryConnection.search(sLDAPBase, filter, sc);
                       
            while (matchingDirectoryEntries.hasMore()) {
                SearchResult result = (SearchResult) matchingDirectoryEntries.next();
                
                // Uncomment the following line to see all of the values that are returned with the search result object
                // System.out.println(result.toString()+"\n");
                
                // Capture all of the attributes of the matching object (email, displayname, etc)
                Attributes resultAttributes = result.getAttributes();
                
                // Set default values for the Person object that we will create on the basis of this matching search result
                String sEmail = "--";
                String sName = "--";
                String sPhone = "--";
                String sDepartment = "--";
                String sUid = "--";

                // Check to make sure that an attribute is not null.  If not, store it so it can be used to 
                // fill a Person object that we will create to hold the result
                if (resultAttributes.get("mail") != null) {
                    sEmail = resultAttributes.get("mail").get().toString();
                }

                if (resultAttributes.get("displayname") != null) {
                    sName = resultAttributes.get("displayname").get().toString();
                }

                if (resultAttributes.get("telephonenumber") != null) {
                    sPhone = resultAttributes.get("telephonenumber").get().toString();
                }

                if (resultAttributes.get("description") != null) {
                    sDepartment = resultAttributes.get("description").get().toString();
                }
                
                if (resultAttributes.get("uid") != null) {
                    sUid = resultAttributes.get("uid").get().toString();
                }

                // Create a person object with the values in this loop itteration                
                Person FoundPerson = new Person(sName, sEmail, sPhone, sDepartment, sUid);

                lPersonMatches.add(FoundPerson);
            }

            // Close connection to the directory            
            directoryConnection.close();
            
        } catch (NamingException nex) {
            
            // Oh snap!  Something went wrong
            System.err.println("Error: " + nex.getMessage());
        }
        
        // Send back our list of matching objects - in this case Person objects as deinfed in our accompanying bean
        return lPersonMatches;
    }
}

package view;

import javax.servlet.*;
import javax.servlet.http.*;

import java.io.IOException;

import javax.naming.*;

import java.io.*;

import java.util.*;

import javax.naming.directory.*;

public class GetLDAPUserImage extends HttpServlet {
    private static final String CONTENT_TYPE =
        "text/html; charset=windows-1252";

    private String sLDAPBase;
    private String sLDAPUrl;
    private String sLDAPAuthType;
    private String sLDAPPrincipal;
    private String sLDAPPassword;

    public void init(ServletConfig config) throws ServletException {
        super.init(config);

        // Connection process identical to the one in DirectorySearch.java
        // for relevant comments, please refernece that code

        sLDAPBase = "";
        sLDAPUrl = "";
        sLDAPAuthType = "";
        sLDAPPrincipal = "";
        sLDAPPassword = "";

        try {
            InitialContext initCtx = new InitialContext();

            sLDAPBase = (String)initCtx.lookup("java:comp/env/LDAPBase");
            sLDAPUrl = (String)initCtx.lookup("java:comp/env/LDAPUrl");
            sLDAPAuthType =
                    (String)initCtx.lookup("java:comp/env/LDAPAuthType");
            sLDAPPrincipal =
                    (String)initCtx.lookup("java:comp/env/LDAPPrincipal");
            sLDAPPassword =
                    (String)initCtx.lookup("java:comp/env/LDAPPassword");
        } catch (Exception ex) {
        }

    }

    public void doGet(HttpServletRequest request,
                      HttpServletResponse response) throws ServletException,
                                                           IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request,
                       HttpServletResponse response) throws ServletException,
                                                            IOException {

        // Thanks to Buster Nimmons for the following code snippet to inspire this servlet
        // original source - http://www.mail-archive.com/jsp-interest@java.sun.com/msg41646.html

        response.setContentType("image/jpeg");

        // ID of the users image to retrive
        String userId = request.getParameter("userId");
        byte bt[] = null;

        //get the OutputStream to send the image back to the browser
        OutputStream ot = response.getOutputStream();
        try {
            String filter = "(uid=" + userId + ")";

            // make connection to LDAP and lookup user
            Properties env = new Properties();
            env.put(DirContext.INITIAL_CONTEXT_FACTORY,
                    "com.sun.jndi.ldap.LdapCtxFactory");
            env.put(DirContext.PROVIDER_URL, sLDAPUrl);
            env.put(Context.SECURITY_AUTHENTICATION, sLDAPAuthType);
            env.put(Context.SECURITY_PRINCIPAL, sLDAPPrincipal);
            env.put(Context.SECURITY_CREDENTIALS, sLDAPPassword);

            DirContext directoryConnection = new InitialDirContext(env);
            SearchControls sc = new SearchControls();
            sc.setSearchScope(SearchControls.SUBTREE_SCOPE);

            NamingEnumeration matchingDirectoryEntries = null;

            // Perform search
            matchingDirectoryEntries =
                    directoryConnection.search(sLDAPBase, filter, sc);

            while (matchingDirectoryEntries.hasMore()) {
                SearchResult result =
                    (SearchResult)matchingDirectoryEntries.next();
                Attributes attrs = result.getAttributes();

                // get the jpegPhoto attribute of this users entry (getValue returns an Object which I cast to byte[])
                bt = (byte[])(attrs.get("jpegPhoto").get());

                //write the byte[] to the OutputStream
                ot.write(bt);

                //close OutputStream and we're done
                ot.close();
            }

            directoryConnection.close();
        } catch (Exception ex) {

        }
    }
}

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1" inlineStyle="width:320.0px;">
      <af:messages id="m1"/>
      <af:outputText value="People Search" id="ot2"
                     inlineStyle="font-size:1.4em; font-weight:600; margin-left: 7px;"/>
      <af:form id="f1">
      
      
      
      <af:decorativeBox id="db1" styleClass="AFStretchWidth"
                        inlineStyle="height:360.0px; margin-left: 5px">
          <f:facet name="center">
            <af:panelGroupLayout xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                 id="pgl1" layout="default">
              <af:table value="#{bindings.Person.collectionModel}" var="row"
                        rows="#{bindings.Person.rangeSize}"
                        emptyText="#{bindings.Person.viewable ? 'Search via the form above.' : 'Access Denied.'}"
                        fetchSize="#{bindings.Person.rangeSize}"
                        rowBandingInterval="1"
                        filterModel="#{bindings.PersonQuery.queryDescriptor}"
                        queryListener="#{bindings.PersonQuery.processQuery}"
                        filterVisible="false" varStatus="vs" id="t1"
                        columnStretching="last" width="100%" contentDelivery="immediate"
                        verticalGridVisible="false">
                <af:column sortProperty="name" filterable="false" sortable="false"
                           id="c1">
                    <af:image source="../getldapuserimage?userId=#{row.userid}"
                            id="userimage"
                            inlineStyle="width:80px; text-align:left;"/>
                </af:column>
                <af:column sortProperty="email" filterable="false"
                           sortable="false"
                           id="c5">
                        <af:outputText value="#{row.name}" id="ot4"/>
                  <af:outputText value="#{row.email}" id="ot3"/>
                  <af:outputText value="#{row.phone}" id="ot5"/>

                  <af:outputText value="#{row.description}" id="ot1"/>
                </af:column>
              </af:table>
            </af:panelGroupLayout>
          </f:facet>
          <f:facet name="top">
            <af:panelGroupLayout layout="horizontal"
                                 xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                 id="pgl2"
                                 inlineStyle="margin-top: 10px; margin-left: 8px">
              <af:inputText value="#{bindings.sSearchName.inputValue}"
                            label="Name"
                            required="#{bindings.sSearchName.hints.mandatory}"
                            columns="#{bindings.sSearchName.hints.displayWidth}"
                            maximumLength="#{bindings.sSearchName.hints.precision}"
                            shortDesc="#{bindings.sSearchName.hints.tooltip}"
                            id="it1">
                <f:validator binding="#{bindings.sSearchName.validator}"/>
              </af:inputText>
              <af:commandButton actionListener="#{bindings.SearchLDAPDirectory.execute}"
                                text="Go"
                                disabled="#{!bindings.SearchLDAPDirectory.enabled}"
                                id="cb1"/>
            </af:panelGroupLayout>
          </f:facet>
        </af:decorativeBox>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

               <div id="navbox">
                  <c:set var="navNodes" value="${navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false']}" scope="session"/>
                  <ul id="nav">
                     <c:forEach var="menu" varStatus="vs" items="${navNodes}">
                        <li class="parentnode">
                           <a href="/webcenter${menu.goLinkPrettyUrl}" class="${menu.selected}">${menu.title}</a>
                           <c:if test="${not empty menu.children}">
                              <ul>
                                 <c:forEach var="child" items="#{menu.children}">
                                    <li class="childnode">
                                       <a href="/webcenter${child.goLinkPrettyUrl}">${child.title}</a>
                                       <c:if test="${not empty child.children}">
                                          <ul>
                                             <c:forEach var="grandchild" items="#{child.children}">
                                                <li class="grandchildnode">
                                                   <a href="/webcenter${grandchild.goLinkPrettyUrl}">${grandchild.title}</a>
                                                </li>
                                             </c:forEach>
                                          </ul>
                                       </c:if>
                                    </li>
                                 </c:forEach>
                              </ul>
                           </c:if>
                        </li>
                     </c:forEach>
                     <c:if test="${securityContext.authenticated}">
<![CDATA[
                           <li class="parentnode">
                              <a href="#">People Search</a>
                              <ul>
                                 <li class="childnode">
                                    <iframe src="http://127.0.0.1:7101/LDAPSearchPortlet-ViewController-context-root/faces/LDAPSearch.jspx" width="330" height="360" frameborder="0"></iframe>
                                 </li>
                              </ul>
                           </li>
]]>
                     </c:if>
                  </ul>
               </div>

package E2Workbench;

public class Person {
    
    private String name;
    private String email;
    private String phone;
    private String description;
    private String userid;

    public Person(String name, String email, String phone, String description, String userid) {
        this.name = name;
        this.email = email;
        this.phone = phone;
        this.description = description;
        this.userid = userid;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getEmail() {
        return email;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getPhone() {
        return phone;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getDescription() {
        return description;
    }

    public void setUserid(String userid) {
        this.userid = userid;
    }

    public String getUserid() {
        return userid;
    }
}

<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5" xmlns="http://java.sun.com/xml/ns/javaee">
  <context-param>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
  </context-param>
<context-param>
<param-name>oracle.adf.view.rich.security.FRAME_BUSTING</param-name>
<param-value>never</param-value>
</context-param>
  <context-param>
    <description>If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.</description>
    <param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
    <param-value>false</param-value>
  </context-param>
  <context-param>
    <description>Whether the 'Generated by...' comment at the bottom of ADF Faces HTML pages should contain version number information.</description>
    <param-name>oracle.adf.view.rich.versionString.HIDDEN</param-name>
    <param-value>false</param-value>
  </context-param>
  <filter>
    <filter-name>trinidad</filter-name>
    <filter-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</filter-class>
  </filter>
  <filter>
    <filter-name>adfBindings</filter-name>
    <filter-class>oracle.adf.model.servlet.ADFBindingFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>trinidad</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
    <dispatcher>FORWARD</dispatcher>
    <dispatcher>REQUEST</dispatcher>
  </filter-mapping>
  <filter-mapping>
    <filter-name>adfBindings</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
    <dispatcher>FORWARD</dispatcher>
    <dispatcher>REQUEST</dispatcher>
  </filter-mapping>
  <listener>
    <listener-class>oracle.adf.mbean.share.config.ADFConfigLifeCycleCallBack</listener-class>
  </listener>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet>
    <servlet-name>resources</servlet-name>
    <servlet-class>org.apache.myfaces.trinidad.webapp.ResourceServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>BIGRAPHSERVLET</servlet-name>
    <servlet-class>oracle.adfinternal.view.faces.bi.renderkit.graph.GraphServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>BIGAUGESERVLET</servlet-name>
    <servlet-class>oracle.adfinternal.view.faces.bi.renderkit.gauge.GaugeServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>MapProxyServlet</servlet-name>
    <servlet-class>oracle.adfinternal.view.faces.bi.renderkit.geoMap.servlet.MapProxyServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>GatewayServlet</servlet-name>
    <servlet-class>oracle.adfinternal.view.faces.bi.renderkit.graph.FlashBridgeServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>GetLDAPUserImage</servlet-name>
    <servlet-class>view.GetLDAPUserImage</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>resources</servlet-name>
    <url-pattern>/adf/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>resources</servlet-name>
    <url-pattern>/afr/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>BIGRAPHSERVLET</servlet-name>
    <url-pattern>/servlet/GraphServlet/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>BIGAUGESERVLET</servlet-name>
    <url-pattern>/servlet/GaugeServlet/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>MapProxyServlet</servlet-name>
    <url-pattern>/mapproxy/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>resources</servlet-name>
    <url-pattern>/bi/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>GatewayServlet</servlet-name>
    <url-pattern>/flashbridge/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>GetLDAPUserImage</servlet-name>
    <url-pattern>/getldapuserimage</url-pattern>
  </servlet-mapping>
  <mime-mapping>
    <extension>swf</extension>
    <mime-type>application/x-shockwave-flash</mime-type>
  </mime-mapping>
  <env-entry>
    <description>Base for LDAP Queries</description>
    <env-entry-name>LDAPBase</env-entry-name>
    <env-entry-type>java.lang.String</env-entry-type>
    <env-entry-value>dc=wc_domain</env-entry-value>
  </env-entry>
  <env-entry>
    <description>LDAP Connection URL</description>
    <env-entry-name>LDAPUrl</env-entry-name>
    <env-entry-type>java.lang.String</env-entry-type>
    <env-entry-value>ldap://owcvm03:7001</env-entry-value>
  </env-entry>
  <env-entry>
    <description>Authentication method used for LDAP</description>
    <env-entry-name>LDAPAuthType</env-entry-name>
    <env-entry-type>java.lang.String</env-entry-type>
    <env-entry-value>simple</env-entry-value>
  </env-entry>
  <env-entry>
    <description>User to connect to LDAP in format cn=username</description>
    <env-entry-name>LDAPPrincipal</env-entry-name>
    <env-entry-type>java.lang.String</env-entry-type>
    <env-entry-value>cn=Admin</env-entry-value>
  </env-entry>
  <env-entry>
    <description>Password for user connecting to LDAP</description>
    <env-entry-name>LDAPPassword</env-entry-name>
    <env-entry-type>java.lang.String</env-entry-type>
    <env-entry-value>welcome1</env-entry-value>
  </env-entry>  
</web-app>

Posts Related to E2.0 Workbench Podcast 7 - LDAP Search Portlet for WebCenter with ADF

• E2.0 Workbench Podcast 1 – Exposing Twitter Data with ADF in Oracle WebCenter
• Slash E2.0 Management Costs – Be like an LDAP Service
• WebCenter – Exposing Twitter Data in an ADF WSRP2 Portlet
• The Minimalist Approach to Content Governance – Manage Phase
• Oracle UCM Integration with WebCenter

After running into this issue last week in a new project, I spent a good amount of time brainstorming various workarounds, then stumbled onto a simple fix!

The FancyBox plugin can help create engaging user experiences and was used in the podcast E2.0 Workbench Podcast 5 – WebCenter Image Gallery with Content Presenter with a hardcoded the MIME type for the image as follows to get around the parameter / dynamic URL issue.

If a URL with parameters like “http://owcvm03/cs/idcplg?IdcService=GET_FILE&dID=#{node.propertyMap['dID'].value}&dDocName=OWCVM03_#{fn:toLowerCase(node.id.uid)}&allowInterrupt=1″ was used in place of “http://owcvm03/cs/groups/public/documents/image/#{fn:toLowerCase(node.id.uid)}.jpg” the above code, you have hit this issue in the past you may have wondered if you had to change something server side or work some magic with URL encoding to get around this (the first two places I started my search).

By simply appending a “&ext=.jpg” to the end of your URL, your dynamic presentation will work as planned. The following code illustrates this for our image gallery sample

The above fix will apply equally to URLs coming from WebCenter Content, as well as WebCenter Sites.

Hope this helps to save some people time in their development!

Posts Related to WebCenter Content & Sites Dynamic Parameter Image URLs FancyBox Fix

• E2.0 Workbench Podcast 5 – WebCenter Image Gallery with Content Presenter
• WebCenter Sites Template Attribute Helper Code
• E2.0 Workbench Podcast 4 – Google Chrome UCM Search Extension
• Site Studio Mobile Example – WCM Reuse
• E2.0 Workbench Podcast 3 – HTML5, UCM and WebCenter “QuickBox”

The following code snippet can be added to a page to see the attributes of an asset of a collection of assets (if the snippet is added within a looping structure within a page).

Code Snippet by Itself

<%
     // Get all of the available name value pairs
     Enumeration eParameters = ics.GetVars();

     // Transfer the above list into an array
     ArrayList arList = Collections.list(eParameters);

     // Itterate through the list and print out the various name value pairs
     for(String key : arList) {
     out.print(String.valueOf(key) + ": " + ics.GetVar(key) + "
");
}

%>

Code Snippet in a Sample Loop

          
               
               
<%= ics.GetVar("assetId") %>

                    <%
                         // Get all of the available name value pairs
                         Enumeration eParameters = ics.GetVars();

                         // Transfer the above list into an array
                         ArrayList arList = Collections.list(eParameters);

                         // Itterate through the list and print out the various name value pairs
                         for(String key : arList) {
                              out.print(String.valueOf(key) + ": " + ics.GetVar(key) + "
");
                         }

                    %>

                    

          
     

Make sure to import “java.util.*” into your page template if you have not already as follows

<%@ page import="java.util.*" %>

If your snippet is properly setup you will see the following returned in your browser

This highlights what items are currently available via the GetVar method of the ICS Object (Interface to Content Server). You can then use the corresponding name to get the value for use in your template.

<%= ics.GetVar("MyGreatAttributeName") %>

Over the following weeks I will be sharing more code snippets and tips around WebCenter Sites. Hopefully these tricks can help people to get up and running with their development quickly. Happy coding!

Posts Related to WebCenter Sites Template Attribute Helper Code

• E2.0 Workbench Podcast 7 – LDAP Search Portlet for WebCenter with ADF
• E2.0 Workbench Podcast 2 – WebCenter PS3 Navigation Models and CSS Menus
• E2.0 Workbench Podcast 5 – WebCenter Image Gallery with Content Presenter
• Site Studio Mobile Example – WCM Reuse
• Be an Effective E2.0 Architect – Know your Inhabitants

The full exploration of three key tenets is covered in an accompanying white paper entitled, “Three Key Tenets of Optimal Social Collaboration white paper”.

Read the white paper

“Effective social collaboration is actionable, deeply contextual and inherently derives its value from business entities outside of itself.

How does an organization begin the journey from traditional, siloed collaboration to natural, business entity based social collaboration?

Successful enablement of enterprise social collaboration requires that organizations embrace the following tenets and understand that traditional collaborative functionality has inherent limits – it is innovation and integration in accordance with the following tenets that will provide net-new efficiency benefits.”

The following tenets and an organization’s respective maturity around each will indicate how much additional value may be possible to unlock with their collaborative solutions.

1. Leverage a Ubiquitous Social Fabric
2. Supply Continuous Context to Support Decision Making and Problem Solving
3. Extend the Collaborative Lifecycle into Back Office

Read the Three Key Tenets of Optimal Social Collaboration white paper

Posts Related to Three Key Tenets of Optimal Social Collaboration White Paper

• Guest Post – Social Collaboration Use Cases
• Social BPM – Benefits & Getting Started
• Does the Social Web Benefit any Organization? Absolutely – If they are Smart
• Overlapping Social Networks in your Enterprise? Strategies to Understand and Govern
• Unlocking the Value of Enterprise 2.0 Collaboration and Authoring Tools

The following 4 tips use CSS snippets that can be applied to WebCenter Spaces templates to quickly change the UI, without having to compile new code or leverage an IDE. In the example template shown here and attached below, we have used the WebCenter Spaces Side Navigation. Please note that you will want to verify that your changes work across various browsers, as each one has different levels of support for this advanced CSS syntax.

first-child

First Child allows you to essentially set a start point from which all children of a certain type will be impacted by the CSS you indicate as applicable. This allows you to quickly apply CSS to an entire series of tags that would normally have to be addresses one by one. In the case of

.xnn.x1nl div:first-child

it lets the page know that any tag under a Div tag with xnn and x1nl CSS classes should use the CSS you have specified.

.xnn.x1nl div:first-child
{
     background: #333;
}

will let all of the first elements under the div tag with classes xnn and x1nl receive a background color of #333.

Check out more details around the first-child selector pseudo class.

[class*='yourclassnamehere'] and [id*='youridhere']

Have you ever had a series of class names or IDs in CSS that followed a pattern where the start of the class name was the same, but perhaps there were various random characters applied after the shared base? This is what the class* syntax allows up to do. In our example we are using

div[class*='xq']

to indicate that all Div tags with a class starting with xq should have the following style applied as follows

div[class*='xq']
{
     background: #333 ! important;
     background-image: none ! important;
}

In the above code, you may see something unusual. What is the ! important code? We will cover the ! important modifier next.

! important

Sometimes generated markup from rich controls can contain embedded style code (e.g. <div style=”color:#000;”></div>). The ! important modifier will enable you to override inline styles or any style that is applied previously on the page, regardless of where (top, bottom, etc). Consider ! important as the trump card indicating what style the browser ultimately will apply to a particular item within the document object model.

View additional WC3.org details around ! important.

.WCSiteTemplateBackground

The following code is WebCenter Spaces specific and will allow you to control what background color is delivered for a basic Spaces template (this can depend on Spaces version, but the pattern will be the same, with the .x1nj class potentially changing).

.WCSiteTemplateBackground, .x1nj
{
     background-image: none;
}

The following is our final CSS code that is applied to our Space to create a stripped down UI that removes the gradient images that were applied out of the box.

.xnn.x1nl div:first-child
{
     background: #333;
}

.WCSiteTemplateBackground, .x1nj
{
     background-image: none;
}

div[class*='xq']
{
     background: #333 ! important;
     background-image: none ! important;
}

The full template code below from the above screenshot that can be used to jumpstart any UI adjustment that may be undertaken via the CSS tricks above.

   
      
         
            WCSiteRRTemplateSideNavFlow
            
               auxiliary1
            
            
               content
            
            
               auxiliary1Size
               int
               200
            
            
               templateFixWidth
               java.lang.String
               1120
            
            
               sideNavigationSize
               java.lang.String
               200
            
         
      
      
.xnn.x1nl div:first-child
{
	background: #333;
}

.WCSiteTemplateBackground, .x1nj
{
	background-image: none;
}

div[class*='xq']
{
	background: #333 ! important;
	background-image: none ! important;
}


      
         
            
               
                  
               
               
                  
               
               
                  
                     
                        
                           
                              
                                 
                              
                           
                        
                        
                           
                              
                                 
                                    
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                    
                                 

                              
                           
                        
                     
                  
               
               
                  
                     
                        
                           
                           
                        
                     
                  
                  
                     
                        
                           
                              
                           
                        
                        
                           
                        
                        
                           
                           
                        
                     
                  
               
               
                  
                     
                  
                  
                     
                        
                        
                        
                        
                        
                        
                        
                     
                  
               
               
                  
               
            
         
      
   

Posts Related to 4 WebCenter Spaces Essential CSS Tricks

• WebCenter Spaces 11g – UI Customization
• WebCenter Portal Template Design Best Practices
• Social BPM – Benefits & Getting Started
• E2.0 Workbench Podcast 6 – WebCenter Portal Mobile Templates using Adaptive Styles
• Sensei of E2.0 – Quantifiable Benefits of Evangelism

Today most organizations are proficient at Web Content Management (WCM), but relatively new to Web Experience Management (WCM). Over the past few weeks I have had an intense focus on clearly defining an way to illustrate this shift and provide resources to allow businesses to get a sense of what lies ahead for web experience management.

To help people quickly understand and gain visibility into the torrent of information related to Web Experience Management, here are 5 key resources to help expose elements of what will be required for an evolution to WEM, as well as future strategy on the web and beyond.

What is the functional difference between WCM and WEM platforms?

It would be nearly impossible to write this post without immediately addressing the general functional differences. Please note that what I write here is my own take on these differences and does not necessarily represent the views of Oracle.

In the above figure I have grouped WCM and WEM functionality. There are many views on the interwebs around this, but WCM functionality essentially provides a core foundation for what is available to enable rich WEM. Since WCM core capabilities like meta data, workflow and basic analytics are topics that have been covered in depth before – let’s focus on what WEM provides above and beyond the WCM foundation.

• Segmentation – based on a user’s behavior (implicit personalization) or profile (explicit personalization) it is possible to tailor the information being show to the user. For instance, if an anonymous user views a variety of “learn German” MP3s on a site like Amazon.com, the site may begin to show the user related items that showcase other learn German MP3s, but also travel information for Germany and Austria or history books on the regions. In order to facilitate this WEM allows this organization to create a “segment” for users who look through learn German materials. This segment will ensure that a dynamic, contextual user experience is delivered for this person.
  
  Additionally, the user may log in and the system may start to use information about past purchases to delivered promotions and other targeted information on the basis of the user’s demographic information, Facebook connections indicating what products their friends like, etc.
  
  
• Personalization – personalization comes in 2 forms – Implicit and Explicit.
  • Implicit – essentially Implicit personalization is possible on the basis of an anonymous user’s geography, method by which they arrived at your site, device they are browsing from, clicks that they have made on your site and the content on your site they have viewed.
  • Explicit – once a user is known to your site via a login, Facebook token or other authentication mechanism, it is possible to deliver extremely targeted content. You not only have information about prior interactions with that user from your CRM or ERP system, but can potentially interact with the user’s Social Graph to determine what they like and what people they are friends with like.
    
    
• User Generated Content (UGC) / Community – customer self service sites, fan clubs and other communities can enable organizations to increase sales into their existing customer base and increase satisfaction with that company’s products or services. WEM technologies offer deeper engagement with users on the basis of user forums, product ratings, comments, profiles and communities. Prospective customers are more inclined to believe comments from peers, than from a vendor, so comments and ratings (User Generated Content) are critical to consider when presenting product information.
  
  
• Social Media Integration – twitter, Facebook and other social media platforms allow organizations to quickly communicate with their customers and prospects, as well as for people to provide commentary about the organization itself. The web experience happens both inside of and outside of an organization’s web properties and thought must be given to how this information is managed – from a publishing and response standpoint. For more details around the emergence of social media and its implications for companies, check out Get Social or Die with Jeremiah Owyang below.
  
  
• Campaigns – are used to determine what materials are being shown to users in the various segments discussed above. This allow marketing teams to shape the experience of users on the basis of what segments have been identified and created. In our example above, the possible segment “german interest” may be created to allow marketers to create a campaign consisting of materials to show to this segment around language tapes, travel guides, german history, etc.
  
  
• Multichannel Delivery – it is now the rule, rather than the exception, that your site will be reviewed on mobile devices. This may mean a tablet, smartphone or a future device not yet known. Either way, your content, along with personalization and multimedia assets, need to be ready for delivery to a wide range of devices. WEM platforms inherently will provide functionality to allow reuse of functions and assets across all channels.
  
  
• Advanced Analytics – page view analytics have existed for quite some time and no marketing department is without them. With this being said, traditional analytics provide limited insight and no proactive capability to assist in the delivery of a web experience. Campaign monitoring, click stream analysis and A/B testing are all essential tools to support marketing and are a key component of WEM. Much more on advanced web analytics below within the other resources.

Get Social or Die with Jeremiah Owyang

Jeremiah is a partner with Altimeter Group focusing on web strategy and customer experience. Anyone familiar with or new to consumer social media (Facebook, Twitter, etc) will get a ton of value from the following session Jeremiah did where he discusses developing a social strategy for your organization.

Check out his first session in a series of 4 from Amplify Festival

Review the remaining 3 parts of Jeremiah’s session at Amplify Festival.

Measuring Online Marketing Success with Avinash Kaushik

Web analytics are great – but are you looking at metrics that actually matters? For instance “…only you are the person that cares about your home page… people go deep on your site – look at the pages with the highest bounce rates” “… what traffic sources are actually adding value to my business? … who are my BFFs?” He also covers the concept of micro and macro conversions and highlights key indicators and ways of filtering data for more detail that actually show the behaviors occurring on your site that are critical to your success.

Avinash Kaushik provides a passionate, informative introduction in this session done for Inbound Marketing University.

Rethinking Engagement Metrics

With all of the increased focus around inbound marketing within organizations (blogging, etc) new ways of viewing metrics are critical to understanding what is really occurring online that contributes to brand recognition and sales.

Eric T. Peterson and Joseph Carrabis from the Nextstage Group have come up with some innovative formulas to attempt to measure user engagement, providing insight beyond what is generally expected from web analytics. Their report is embedded below. Additionally, Lois Beckett from the Nieman Journalism Lab provides an excellent overview and insights on the basis of this work in action with some Philadelphia news organizations in Getting beyond just pageviews: Philly.com’s seven-part equation for measuring online engagement.

The formula and an excerpt from the report highlight the insight capable of being gleaned from analytics that otherwise simply appears as a massive pile of information. For details into this approach, definitely dive into the report a bit or check out Lois Beckett’s great summary.
Σ(Ci + Di + Ri + Li + Bi + Fi + Ii)

“Visitor Engagement is a function of the number of clicks (Ci), the visit duration (Di), the rate at which the visitor returns to the site over time (Ri), their overall loyalty to the site (Li), their measured awareness of the brand (Bi), their willingness to directly contribute feedback (Fi) and the likelihood that they will engage in specific activities on the site designed to increase awareness and create a lasting impression (Ii).”

Marketing Analytics 101 – How to Measure the Effectiveness of your Web Site

This lecture from Hubspot reviews why outbound marketing is broken and how it has driven the increased focus around inbound marketing. It covers at a detailed level various ways to view and understand publishing, metrics and optimization around inbound efforts.

Posts Related to 5 Key Resources for Understanding WCM to Web Experience Management (WEM) Evolution

• Enterprise 2.0 Interactivity Spectrum – Portal, Content or Both?
• Elevating Customer Experience through Enterprise Social Networking
• Age Gap Fallacy and Social Networking – “Perspective Gap” Impacts Enterprise 2.0 Adoption
• 10 Reasons Enterprise Portal Still Matters
• Portal Content Personalization

Posts Related to Guest Post - Social Collaboration Use Cases

• Three Key Tenets of Optimal Social Collaboration White Paper
• Social BPM – Benefits & Getting Started
• Does the Social Web Benefit any Organization? Absolutely – If they are Smart
• Guest Post – 5 Best Practices Laying the Foundation for WebCenter Projects
• You Don’t Want Facebook for the Enterprise

WebCenter Portal offers a variety of capabilities around mobile, some running on device, while others offering development platforms to cater to a wide range of devices – both off and on device. The pace of device capability is hurdling forward at a tremendous pace, as table and other form factors have grown rapidly in adoption. Depending on the project needs with a WebCenter Portal it may make sense to look at using CSS3 and Adaptive Design techniques to provide both a desktop browser, tablet and mobile experience from a single code base*

Only a few short years ago it was important to cater to a very wide range of devices web capabilities. Thankfully those days are coming to a close, as consumers of the “Facebook” generation frequently want the best access to news, events and services related to them and their social interactions.

Ok – enough around the introduction. How do we take WebCenter Portal onto a mobile? What do we want to achieve with the mobile version?

• What we will Achieve
• Technical Approach
• WebCenter Portal Adaptive Page Template
• Media Query CSS for Page Template
• Project Source Code
• Excellent Supporting Resources

What we will Achieve

1. The mobile experience will optimize the browsing experience for an iPhone style viewport, removing the login box and dropping the Offerings to below the page body. This simple example shows how with basic CSS we can easily change the visibility and positioning of the elements. Keep in mind that because this is client side, some items still remain within the document object model, but are removed in the user’s view. With EL these could be removed when the sever processes the user request, so that they would not show in the page markup behind the scenes, but in our case we are just going to use this as an example to illustrate Adaptive Design.
2. We will also change the navigation for easier use on a small form factor device.  In our case – and this is just an example – we are going to disable the dropdown functionality available on the desktop, assuming that child pages would have their own respective detail navigation.  In an actual deployment it may be more likely to use other techniques to handle this, but we do it here to show the difference that various CSS modification based on viewport size can have.

How will we do it?

1. CC3 Media Queries – CSS3 affords us the ability to understand the size of a user’s viewport and respond accordingly with styles tailored to a given user’s device. This means that we can adjust our user interface on the basis of desktop, tablet, mobile and even the big display in Times Square as needed
2. Portal Skin Family – WebCenter offers some nice skins around the Fusion UI, but for our example we need to set our skin to “simple” in the trinidad-config.xml file to give us the most control over the page style.
3. Viewport Meta Tag – We need to add a meta tag to let the browser know how to behave with our page (see more detail related to mobile meta tags) to keep our work abstracted from the core of WebCenter I used JQuery to append the meta tag within the header as follows$(‘head’).append(”);
4. WebCenter Page Template – For the purposes of this demonstration I created a slimmed down template with IDs and classes that make it very CSS edit friendly for this example.
5. IE – what would a post about the web be like without some caveats around IE? IE9 embraces the latest around media queries, but prior versions need a little extra love. We won’t showcase it in our example, but this great post over at Web Designer Wall – Adaptive & Responsive Design with CSS Media Queries dives right in to the gritty details of legacy support and how with a few extra files it is actually not too bad.

  
  







<script>
$('head').append('<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />');
</script>





    
     

          Account Login
        

        


          
            

                

                

                

              

                

                  
                    
                  

                  
                    
                  
                

                
                  
                

              

            
          
        

        

        

        
        
${node.title}
            

                

                  ${child.title}
                  

                
              

            
        

        
        

        

        




        
          
        

      
    

    
      
        pageTemplate_adaptive
        
          content
          content
        
      
    
  

mediaquery.css – CSS3 using Media Queries

Source code included in download package below code block

.contentbody
{
  width: 960px;
  margin: 0 auto;
}

.header
{
  height: 50px;
}

#maincontent {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#sitelogo
{
  background: url("../images/webcenter.png") ;
  height: 61px;
  width: 126px;
}

#mobileloginlink
{
  display: none;
}

.footer
{
}

.clear
{
  clear: both;
}

#nav{
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	float:left;
	width:100%;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
}
#nav a{
	display:block;
	padding:5px;
	color:#fff;
	background:#888;
	text-decoration:none;
}
#nav a:hover{
	color:#fff;
	background:#6b0c36;
}
#nav ul{
	background:#fff;
	background:rgba(255,255,255,0);
	list-style:none;
	position:absolute;
	left:-9999px;
  margin-left: -40px;
}
#nav ul li{
	float:none;
}
#nav ul a{
	white-space:nowrap;
}
#nav li:hover ul{
	left:0;
}
#nav li:hover a{
	background:#000;
}
#nav li:hover ul a{
	text-decoration:none;
  font-weight: normal;
}
#nav li:hover ul li a:hover{
	background:#333;
}

/* CSS that will be used for screens <= 600px */
@media all and (max-width: 600px)
{

.headerloginbox
{
  display: none;
}

#mobileloginlink
{
  display: block;
}

.contentbody
{
  width: 300px;
  margin: 0 auto;
}  

  #maincontent
  {
    width: 100%;
  }

  #sidebar
  {
    clear: both;
    float: left;
    background: #efefef;
  }

  #nav li:hover ul a{
    display:none;
  }
}

Sample Code Download

• Download the sample portal project code - please note that it is not 100% identical to the video code, but has all key elements (in the video the mediaquery.css file was located in "styles" vs "css" as in the download version.

Great Resources

Many other great techniques are possible through Adaptive Design. I suggest that you check out the following posts for more information.

• Web Designer Wall - Adaptive & Responsive Design with CSS3 Media Queries
• HTML5Rocks - "Mobifying" Your HTML5 Site
• Yannick Ongena - WebCenter 11g PS3 Tutorial: Building a WebCenter Template

Happy mobiling!

* Please note that this blog represents my own views and not those of Oracle. The techniques illustrated here are an implementation approach and sample.

Posts Related to E2.0 Workbench Podcast 6 – WebCenter Portal Mobile Templates using Adaptive Styles

• Site Studio Mobile Example – WCM Reuse
• WebCenter Portal Template Design Best Practices
• WebCenter Spaces 11g – UI Customization
• The Minimalist Approach to Content Governance – Create Phase
• Oracle UCM Integration with WebCenter

People can spot great design, but often struggle to explain why a design is effective, let alone create one themselves.

What if we had a core set of rules to help with this process that were pretty simple? Going from bad to moderate would be a huge improvement and basic rules can get us there.

Let’s take ourselves on a quick journey to introductory design… Quick – close you eyes and think about the characteristics of a designer.

What did you think of?

Religious about the Apple brand, loves lattes and pulls awesome espresso shots, listens to music from indie bands or electronica and when you tell them about something cool you found – they tell you about how it was interesting 5 years ago, but is now completely passe.

Beyond this – they seem to have an ability to just “get it” with ramifications around certain design decisions. Absorbing even only a fraction of this skill can pay big dividends with the usage of our applications.

How can this be done?

Good News
The good news effective design can be learned. As a starting point I have included 5 key resources in the form of a presentation given to developers around design, as well as a series of web sites for inspiration and reference. If you review the presentation first, you will begin to see new points within each design that were not previously visible due to you updated perspective.

1. Idan Gazit: Design for Developers Lecture
In the following presentation Idan Gazit uses some colorful language, but bear with him, as provides excellent commentary on design for developers. Here are some key design aspects that he discusses in detail, providing some insight that will absolutely change the way you view your existing and current projects.

• If you are a developer you inherently do front end!
• Attractive things work better
• Do less, go minimal
• Design using a grid framework
• Leave more whitespace
• Your words are dressed in Typography
• Colors – go monochromatic or one color with grey or black

2. Smashing Magazine
Frequently updated blog around the state of the web from a design standpoint. Smashing does a good job of providing both technical developer and design focused information.
check out Smashing Magazine

3. Dribbble
Dribble is “Show and tell for creatives” where people share designs tagged by type (logo, ui, etc). Dribbble makes it possible to search on the basis of color palette. Some stunning example of design are located here and serve as brilliant inspiration. The content here is especially germane to developers looking to take their game to a new level with UI design using the examples tagged for http://dribbble.com/tags/ui and http://dribbble.com/tags/app. Head over to Dribbble for more.

4. Pattern Tap
Pattern Tap breaks down user submitted examples into categories like forms, buttons, navigation and other areas extremely helpful to web application interface development.
visit Pattern Tap

5. The Best Designs
Provides an outstanding gallery of web designs segmented into various categories based on appearance. A great spot to see what some of the top end designers are doing on the web today.
check out The Best Designs

Posts Related to Design for Developers - 5 Great Resources

• Mom’s Enterprise Usability Tip #1 – Avoid Option Overload Plague
• Be an Effective E2.0 Architect – Know your Inhabitants
• Misconceptions – Redesigns and Information Architecture
• Tagging for Business Applications
• OldSpice your Innovation – Dangers of Status Quo E2.0