Implemente un diseño web responsivo mediante WebSphere Portal, Parte 1: Iníciese con el tema predeterminado

Utilice técnicas de diseño responsivo para optimizar su interfaz de usuario de WebSphere Portal para múltiples dispositivos dentro de un tema individual

Crear una experiencia para múltiples dispositivos es esencial, pero dirigirse al conjunto correcto de dispositivos puede ser un reto. El diseño web responsivo (RWD) se ha convertido en un enfoque popular para crear un website individual que optimice el contenido y el diseño automáticamente con base en el tamaño de la pantalla, el dispositivo y la orientación, eliminando la necesidad de diseñar para una preferencia de dispositivo de usuario específica. Este artículo discute cómo transformar su tema de WebSphere Portal en una experiencia web responsiva desde el principio. Con técnicas de CSS avanzadas, puede implementar un tema que responda en tiempo real a distintas resoluciones de pantalla utilizando diseños flexibles y elementos elásticos.

Jonathan Lidaka, WebSphere Portal Front-end Engineer, IBM

Jon Lidaka is a Front-end engineer at IBM's Research Triangle Park Development Lab. While in Portal development, he has primarily contributed to theme development, with a focus on accessibility and globalization, and to various components including the administration portlets and web application integrator. Jon has spoken at multiple IBM conferences on user interface design and optimizing a Portal theme for mobile devices. His current focus is on leading the mobile development mission for WebSphere Portal.



Scott Consolatti, WebSphere Portal Front-end Engineer, IBM

Scott Consolatti is a Front-end engineer at IBM's Research Triangle Park Development Lab. During his time in Portal development, he has primarily contributed to theme development with a focus on the new modular theme architecture. He has also previously contributed to various components including widgets, CSA, and personalization. Scott has also contributed to the development of the user interface of many other IBM products including IBM Mashup Center and IBM Lotus ActiveInsight, and has numerous patents related to user interface. Currently he is focused on enabling a mobile experience within the default theme for WebSphere Portal.



28-01-2013

Sobre esta serie

Esta serie lo lleva a través de las etapas para desarrollar una interfaz de usuario dentro de WebSphere® Portal que integre conceptos de diseño web responsivo (RWD). Utilizar el diseño responsivo le garantiza obtener el máximo de su esfuerzo de diseño web, ya que proporciona una forma para que la interfaz de usuario se optimice automáticamente para la resolución de pantalla, la orientación o las posibilidades. Adaptarse con elegancia a estos atributos de dispositivo utilizando elementos elásticos garantiza que su sitio sea utilizable y esté listo para futuros tamaños de pantalla.

Introducción

Crear una experiencia web excepcional que sea optimizada a través de múltiples dispositivos es esencial para las empresas de hoy. Los usuarios esperan poder explorar la web en sus teléfonos con la misma facilidad con que lo hacen en su computadora de escritorio.

Dirigirse a dispositivos móviles normalmente comienza con una conversación sobre aplicaciones nativas, pero estas aplicaciones tienen un alto costo de propiedad y la reutilización de código es limitada. Otra solución es crear un sitio web alternativo específicamente para un dispositivo móvil, pero esta no es una solución práctica, ya que puede terminar con muchos recursos de código qué mantener.

Ethan Marcotte publicó un artículo en el que discute una solución práctica para el panorama cambiante de los dispositivos y los tamaños de pantalla al crear websites flexibles, fluidos y adaptables. Lea el artículo de influencia de Ethan sobre diseño web responsivo (vea Recursos más adelante en este artículo).


Requisitos previos

WebSphere® Portal

En el desarrollo de esta serie de artículos, utilizamos WebSphere® Portal versión 8.0. La mayoría del código que discutimos es esencial para cualquier desarrollador de temas: HTML, CSS, JavaScript y JSP.

Navegador web

Le recomendamos que tenga al menos Mozilla Firefox 4 con la extensión Firebug instalada. Sin embargo, cualquier navegador con soporte de CSS3 será capaz de representar estas tácticas correctamente. La mayoría de los navegadores vienen con sus propias herramientas de desarrollo incorporadas, pero nuestros ejemplos hacen referencia específicamente a Firebug.

Cliente de WebDAV

Para actualizar un tema en WebSphere Portal, es necesario un cliente de WebDAV. La muestra para este artículo fue desarrollada utilizando AnyClient. Puede utilizar cualquier cliente de WebDAV que soporte WebSphere Portal. Discutimos la colocación de código en archivos que ha copiado a su máquina local y asumimos que hace esto primero en su máquina local y después lo copia de nuevo en WebDAV.

Para obtener más detalles, revise este artículo sobre conectarse a WebDAV: "Connecting to the Portal WebDAV with 8.0."

Tema personalizado

Necesita crear su propio tema personalizado antes de aplicar las tácticas de diseño web responsivo. No modifique el tema de Portal 8.0 directamente, ya que este tema puede ser actualizado por fixpacks de servicio. En lugar de eso, cree una copia del tema de Portal 8.0; esto garantiza que su tema tenga todos los elementos necesarios para que el tema funcione, y los cambios no serán sobrescritos por un fixpack. Para crear un nuevo tema personalizado, siga las instrucciones en este artículo: "Create a copy of the theme."

También debe estar familiarizado con estos conceptos discutidos en estos artículos:


Primeros pasos

De forma predeterminada, el tema de WebSphere Portal 8.0 no está optimizado para dispositivos móviles. Dos piezas esenciales para la creación de un tema de Portal responsivo son:

Consultas de soporte físico
Las consultas de soporte físico habilitan el uso de CSS con base en la orientación, el tamaño de pantalla y otros atributos del dispositivo. Puede colocarlas en el elemento <link /> al incluir CSS o incorporarlas directamente en el CSS. Para este artículo, colocamos las consultas directamente en el CSS para mitigar cualquier solicitud extra al servidor. Utilizar consultas es similar a grabar condiciones if para decirle a un navegador cuándo habilitar cierto conjunto de estilos.

Elementos fluidos
Un elemento fluido utiliza porcentajes, y no valores fijos, para definir los anchos del contenedor. Los porcentajes crean un contenedor elástico que se optimizará para distintas formas. Este concepto se aplica a muchas partes del tema, tales como la navegación, el pie de página, los contenedores de diseño y más.

Este artículo se enfoca en una solución simple que se optimiza para distintas formas, pero también toma en cuenta las posibilidades disponibles. Entregar imágenes optimizadas para ciertos dispositivos también es una pieza importante que será discutida más adelante en esta serie.

Utilizando Firebug para inspeccionar áreas del tema

Firebug es una extensión para Firefox que proporciona muchas herramientas de desarrollador dentro del navegador. Firebug le permite inspeccionar, editar y depurar CSS, HTML y JavaScript incorporado en cualquier página web. Utilizamos esta herramienta para ayudarnos a identificar áreas estáticas del mismo tema que necesitamos ajustar para hacerlas responsivas. Si no está familiarizado con Firebug, revise este artículo en developerWorks: "Debug and tune applications on the fly with Firebug."


Haciendo el tema responsivo

Ahora añadamos elementos responsivos al tema. Ya debió haber creado un tema personalizado. Asegúrese de tener una página con el tema personalizado asignado, de forma que pueda ver sus cambios conforme avanza a través de este artículo.

Introducción a los estilos del tema de WebSphere Portal 8.0

Los temas de WebSphere Portal utilizan una capa comprimida para los estilos predeterminados para incrementar el rendimiento. Estos estilos son almacenados en WebDAV dentro del tema personalizado. La ubicación en WebDAV es:

  • fs-type1:themes/<customTheme>/css/

Los archivos de la capa son llamados "master.css" y "masterRTL.css" y están incluidos en el módulo "wp_theme_portal_80", el cual es definido como una contribución específica del tema en el archivo:

  • fs-type1:themes/<customTheme>/contributions/theme.json

Estos estilos definen la estructura de la página y pueden ser utilizados en cualquier tema que comparta la marcación de HTML de WebSphere Portal 8.0. Existen dos capas, ya que una es para usuarios bidireccionales (masterRTL.css) y la otra es para usuarios no bidireccionales (master.css). Para la versión bidireccional, la página se expone de derecha a izquierda; estas hojas de estilo son utilizadas cuando la página está en un lenguaje bidireccional, como el árabe o el hebreo.

Actualizaremos el archivo master.css directamente para incluir el código que creará un diseño responsivo.

Cree las consultas de soporte físico

Las consultas de soporte físico optimizan el tema para distintos dispositivos. En este ejemplo, nos enfocamos en dos dispositivos adicionales distintos a la computadora de escritorio: un teléfono inteligente y una pizarra digital. En el diseño, cuando una consulta de soporte físico es presentada frecuentemente se le llama punto de interrupción. Puede tener múltiples puntos de interrupción por cada dispositivo al que se está dirigiendo, pero para este ejemplo ignoramos los cambios de orientación y otros puntos de interrupción menores y nos enfocamos en un punto de interrupción para cada dispositivo.

Conéctese al punto de entrada fs-type1 para WebDAV, navegue hacia su tema personalizado y copie el archivo maestro master.css discutido en la sección anterior para su máquina local. Este es un archivo comprimido, así que solo será una larga línea de CSS. Esto está bien, ya que queremos mantener la parte de escritorio de la interfaz de usuario intacta y añadir estilos adicionales para optimizarla más.

La primera consulta que desea añadir es para un dispositivo de pizarra digital, así que desea dirigirse a dispositivos con un ancho de pantalla menor a 800 píxeles. Copie la consulta de soporte físico debajo en el Listado 1 al final de master.css.

Listado 1. Consulta de soporte físico para un ancho de pantalla menor a 800 píxeles
@media screen and (max-width: 800px) {

}

Durante todo este artículo, asegúrese de copiar el archivo de regreso en WebDAV después de que hace las actualizaciones, como añadir código a master.css. Con esta consulta de soporte físico en su lugar, cualquier estilo que esté colocado dentro de la estructura se representará cuando el tamaño de pantalla sea menor a 800 píxeles.

La segunda consulta a añadir es para un dispositivo de teléfono inteligente, que se dirige a dispositivos con un ancho de pantalla menor a 480 píxeles. Copie la consulta de soporte fijo debajo en el Listado 2 al final de master.css.

Listado 2. Consulta de soporte físico para un ancho de pantalla menor a 480 píxeles
@media screen and (max-width: 480px) {

}

Con esta consulta de soporte físico en su lugar, cualquier estilo que esté colocado dentro de la estructura se representará cuando el tamaño de pantalla sea menor a 480 píxeles. El Listado 3 muestra master.css con estos dos puntos de interrupción en su lugar.

Listado 3. El archivo master.css con consultas de soporte físico
.wpthemeMenuAnchor {display:inline-table !important;}.wpthemeMenuBorder {top: -9999px.... 
@media screen and (max-width: 800px) {

}

@media screen and (max-width: 480px) {

}

Actualice las estructuras de tema para que se vuelvan responsivas

Ahora ya tiene dos estructuras configuradas que contienen los estilos que alteran temporalmente el escritorio y optimizan el tema para una pizarra digital y un teléfono inteligente. La primera etapa para identificar las áreas del tema que necesitan volverse responsivas es utilizar Firebug para inspeccionar el DOM y encontrar las estructuras que tienen un ancho establecido.

Para inspeccionar el DOM, seleccione el botón de flecha en el lado derecho de la barra de herramientas de Firebug (Figura 1).

Figura 1. El inspector de Firebug
The Firebug inspector

Utilizando el inspector, puede pasar el ratón sobre áreas de la página para ver el ancho definido en los estilos. A medida que comienza a pasar el ratón sobre elementos de la página, notará que hay un derivador de página con la clase de estilo "wpthemeFrame" (vea la Figura 2); y dentro de las principales áreas de la página, como la navegación, el contenido principal y el pie de página, se encuentra una estructura con la clase de estilo "wpthemeInner" (vea la Figura 3).

Figura 2. El elemento de derivador de página
The page wrapper element
Figura 3. Las estructuras internas de la página
The inner structures of the page

Estas dos clases de estilo son definidas con valores estáticos. Necesita cambiar los anchos para que reflejen con precisión el dispositivo al que se dirigen y hacer las estructuras con las clases definidas flexibles. Para hacer esto, establezca min-width en wpthemeFrame con el ancho mínimo al que desea que su diseño responsivo se adapte (para este ejemplo, es 320px). Después, haga todas las áreas principales de la página elásticas al darle a wpthemeInner un ancho de porcentaje (para esta muestra, utilizamos 100%). Copie las definiciones de estilo para wpthemeFrame y wpthemeInner a la consulta de soporte físico de la pizarra digital definida con un max-width de 800 píxeles, como se muestra en el Listado 4. Ya que estos estilos serán aplicados a todos los tamaños de pantalla debajo de 800 píxeles, aplicará tanto para pizarras digitales como para dispositivos de teléfono inteligente.

Listado 4. Cree estructuras responsivas para wpthemeFrame y wpthemeInner
@media screen and (max-width: 800px) {
	.wpthemeFrame {
		min-width: 320px;
	}
		
	.wpthemeInner { 
		width: 100%;
	}
}

Los siguientes elementos a modificar para distintos dispositivos son el conmutador de modo de edición y el menú de proyecto (Figura 4).

Figura 4. El conmutador de modo de edición y el menú de proyecto
The Edit mode toggle and project menu

Si no cree que los usuarios de una pizarra digital o de un teléfono inteligente requerirán de las posibilidades del modo de edición, ocultarlas de la vista en estos otros dispositivos sería apropiado. Para hacer esto, simplemente añada un estilo para ocultar los elementos: añada el CSS del Listado 5 para "utb-project-quicklink" y "utb-project-info".

Listado 5. Eliminando el modo de edición
@media screen and (max-width: 800px) {
	.wpthemeFrame {
		min-width: 320px;
	}
		
	.wpthemeInner { 
		width: 100%;
	}
	.utb-project-quicklink, 
	.utb-project-info {
		display: none;
	}
}

Como se muestra en la Figura 5, la página en una pizarra digital ahora ajustará su tamaño y ocultará las posibilidades de edición.

Figura 5. Las posibilidades de edición están ocultas
Edit capabilities are hidden

Otro elemento de la página que tal vez quiera controlar mientras optimiza para tamaños de pantalla más pequeños es la cantidad de navegación que es mostrada al usuario. En esta muestra, ocultamos la navegación superior de la representación en tamaños de pantalla debajo de 480 píxeles. También eliminamos el recuadro de entrada de búsqueda en la optimización de teléfono inteligente para ahorrar espacio en la pantalla. Para hacer esto, simplemente use el mismo enfoque que usó con el conmutador de modo de edición y establezca un estilo para ocultar estos elementos. Añada el código en negrita del Listado 6 a la consulta de soporte físico dirigida a teléfonos inteligentes.

Listado 6. Eliminando la navegación superior
@media screen and (max-width: 480px) {
	.wpthemeHeader,
	.wpthemeSearch {
		display:none;
	}
}
Figura 6. La navegación superior y la búsqueda están ocultas para un teléfono inteligente
Top navigation and search are hidden for a smartphone

Utilizando estilos para ocultar la marcación para diseño responsivo es rápido y fácil, y en algunos casos puede ser el mejor enfoque. La sección avanzada a continuación discute cómo configurar la lógica de forma que, en lugar de utilizar estilos, puede aprovechar las clases del dispositivo para controlar la marcación que es representada.

Al optimizar el tema para dispositivos más pequeños, es importante tener en cuenta que el mecanismo de entrada también cambiará. Estos dispositivos de pizarra digital y teléfono inteligente permiten a un usuario utilizar eventos táctiles para seleccionar elementos en la página. Usted desea asegurarse de que los elementos en la página sean fácilmente seleccionables utilizando un dedo. Un área de la página que se vuelve bastante congestionada en tamaños de pantalla pequeños es el pie de página. Para aligerar esta congestión y permitir fáciles eventos táctiles, debe asegurarse de que el pie de página tiene un espaciado apropiado. Esto requiere añadir más espacio alrededor de los enlaces de pie de página, incrementando el tamaño de la fuente y asegurándose de que las columnas sean elásticas. Añada el código en el Listado 7 a la consulta de soporte físico de la pizarra digital (en otras palabras, max-width: 800px).

Listado 7. Añadir el espaciado apropiado al pie de página
	.wpthemeFooter li { 
		margin: 10px 0;
	}
	
	.wpthemeFooter a{
		font-size: 1.25em
	}
	
	.wpthemeFooterCol {
		width: 30%;
		padding: 0 1%;
	}
	
	.wpthemeCol {
		margin-left: 0;
	}
Figura 7. El pie de página tiene el espaciado apropiado para dispositivos más pequeños
Page footer has proper spacing for smaller devices

Los teléfonos inteligentes proporcionan menos espacio que una computadora de escritorio o una pizarra digital, así que es más difícil mostrar elementos de lado a lado y que al mismo tiempo sea fácil determinar las distintas áreas de la página y utilizar eventos táctiles Usted desea hacer una pila de algunos elementos de la página, de forma que estén optimizados para teléfonos inteligentes. Las áreas de la página a optimizar de esta manera son la navegación, el diseño y el pie de página.

Para el diseño tiene sentido optimizar los contenedores para pizarras digitales y teléfonos inteligentes. Esta muestra se dirige a diseños de fábrica que tengan todas las columnas. También, asegúrese de añadir algo más de contenido a la página, de forma que pueda ver cómo los portlets se apilan para distintos tamaños de pantalla o dispositivos. Copie el código del Listado 8 en la consulta de soporte físico de la pizarra digital para apilar el diseño y se aplicará para todos los dispositivos con un ancho de pantalla menor a 800 píxeles. Vea la Figura 8.

Listado 8. Estilos para apilar los contenedores de diseño
.wpthemePrimaryContainer.wpthemeCol,
.wpthemeSecondaryContainer.wpthemeCol,
.wpthemeTertiaryContainer.wpthemeCol {
	padding: 0 2.5%;
	width: 95%;
}

Para apilar la navegación y el pie de página, aplique esto solo para dispositivos de teléfono inteligente. Copie el código en el Listado 9 en la consulta de soporte físico del teléfono inteligente. Vea la Figura 8.

Listado 9. Estilos para aplicar la navegación y el pie de página
.wpthemeCommonActions.wpthemeRight,
.wpthemePrimaryNav.wpthemeLeft {
	clear:both;
}

.wpthemeBanner .wpthemeNavContainer1,
.wpthemePrimaryNav.wpthemeLeft,
.wpthemeNavListItem.wpthemeLeft,
.wpthemeNavListItem a{
	float: none;
}

.wpthemePrimaryNav .wpthemeNavListItem {
	background: -moz-linear-gradient(top, #474747 0%, #111111 100%); 
	background: -webkit-gradient(
		linear, left top, left bottom, 
		color-stop(0%,#474747), color-stop(100%,#111111));
	border-top: 1px solid #1A1A1A;
}

.wpthemePrimaryNav li a,
.wpthemePrimaryNav li a :focus,
.wpthemePrimaryNav li a:hover,
.wpthemePrimaryNav li a:active,
.wpthemePrimaryNav .wpthemeSelected a, 
.wpthemePrimaryNav .wpthemeSelected a:focus, 
.wpthemePrimaryNav .wpthemeSelected a:hover,
.wpthemePrimaryNav .wpthemeSelected a:active {
	padding: 10px;
}

.wpthemeFooter{
	margin: 0 2.5%;
}

.wpthemeFooterCol {
	width:100%;
	padding:0
}
Figura 8. El diseño de navegación primaria y el pie de página son apilados para dispositivos de teléfono inteligente
The primary navigation, layout, and footer are stacked for smartphone devices

Apilar los enlaces de navegación produce un patrón que es típico en dispositivos de teléfono inteligente; sin embargo, no siempre está claro si el hacer clic en el enlace lo llevará a una nueva página o si el contenido se expandirá y colapsará al seleccionar el enlace. Para dejar claro para el usuario que estos enlaces cambiarán el contexto de la página, añada flechas a la sección de la página. Para hacer esto, es necesario añadir una nueva imagen en WebDAV. La imagen es llamada "arrow.png" y está ubicada en los archivos de muestra disponibles en la sección de Descargas de este artículo. Una vez que descargue la imagen, colóquela en esta ubicación en WebDAV:

  • fs-type1:themes/<customTheme>/css/images/

La estructura del archivo después de copiar la imagen a WebDAV se verá como la Figura 9.

Figura 9. La nueva imagen de flecha en WebDAV
The new arrow image on WebDAV

Después de que la imagen esté en WebDAV, puede utilizarla en los estilos. Usted desea añadir la imagen a los enlaces de navegación y ya tiene una definición en master.css en la consulta de soporte físico del teléfono inteligente. Añada un nuevo atributo de segundo plano a la definición para los enlaces de navegación primaria como se muestra en el Listado 10.

Listado 10. Añadiendo la flecha a la navegación primaria en un teléfono inteligente
.wpthemePrimaryNav li a,
.wpthemePrimaryNav li a :focus,
.wpthemePrimaryNav li a:hover,
.wpthemePrimaryNav li a:active,
.wpthemePrimaryNav .wpthemeSelected a, 
.wpthemePrimaryNav .wpthemeSelected a:focus, 
.wpthemePrimaryNav .wpthemeSelected a:hover,
.wpthemePrimaryNav .wpthemeSelected a:active {
	background: url(images/arrow.png) no-repeat scroll right center transparent;
	padding: 10px;
}

Una vez que tenga el atributo de segundo plano en su lugar, debe poder renovar la página y ver las flechas mostradas en el lado derecho del área de enlaces de navegación, como puede ver en la Figura 10.

Figura 10. Navegación de teléfono inteligente
Smartphone navigation

Establezca el viewport correcto para los dispositivos

Los navegadores de teléfono inteligente frecuentemente escalan las páginas web hacia un ancho de viewport, uno que sea apropiado para mostrar la marcación dirigida a los dispositivos de escritorio. Usted desea asegurarse de que los gestos no intencionales no escalen el tema en una forma que lo haga difícil de usar.

El ejemplo de meta etiqueta a continuación en el Listado 11 automáticamente hace el ancho igual al de la pantalla del dispositivo. La propiedad de escala inicial establecerá el nivel de zoom cuando la página sea cargada por primera vez. Las propiedades maximum-scale y minimum-scale establecerán los parámetros de la funcionalidad de zoom en el dispositivo, y con el mínimo y el máximo establecidos con la misma escala inicial, el usuario no tendrá la capacidad de acercar o alejar el zoom en la página. Esto es aceptable, ya que planeamos optimizar la interfaz de usuario para pantallas más pequeñas y un diseño responsivo verdaderamente optimizado no debe necesitar la funcionalidad de zoom.

Listado 11. Establezca el viewport para inhabilitar el escalamiento del dispositivo
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1">

Incluya la meta etiqueta anterior (Listado 11) en el elemento <head> del tema. Puede hacer esto al conectarse al punto de entrada fs-type1 para WebDAV y navegar hacia la plantilla theme.html de su tema personalizado. Asumiendo que está utilizando las plantillas predeterminadas que están localizadas, estarían en esta ubicación:

  • fs-type1:themes/<customTheme>/nls/

Copie el archivo theme_en.html a su máquina local y ábralo. Encuentre el elemento <head> en la plantilla, que debería verse como el Listado 12 a continuación.

Listado 12. Elemento head de la plantilla del tema
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- rel=dynamic-content indicates an element that is replaced with the contents 
produced by the specified href. dyn-cs:* URIs are resolved using the 
WP DynamicContentSpotMappings resource environment provider. These values can
also be set using theme metadata if a theme is specified in the URI 
(e.g. @tl:oid:theme_unique_name). -->
<link rel="dynamic-content" href="co:head">
<link rel="dynamic-content" href="dyn-cs:id:80theme_head">
<!-- rendering is delegated to the specified href for each locale -->
</head>

Coloque el ejemplo de meta etiqueta en el elemento <head> de la plantilla del tema (Listado 13) y cópielo de nuevo en WebDAV.

Listado 13. Elemento head de la plantilla del tema
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1">
.
.
.
</head>

El tema ahora llena el espacio apropiado en todos los dispositivos y las posibilidades de zoom están inhabilitadas.


Avanzado: modificando el contenido dinámico

En la sección anterior, aprendió cómo ocultar ciertos elementos mediante estilos display:none controlados por consultas de soporte físico en los recursos de css estáticos del tema. Por razones de rendimiento, será mejor eliminar completamente esos elementos de la página para ciertos dispositivos, de forma que el tamaño de la respuesta para el dispositivo sea tan pequeño como sea posible.

Eliminar completamente un elemento de una página para ciertos dispositivos puede ser logrado utilizando DeviceClass de ClientProfileBean de los Beans de Lógica de Expresión (EL) de Portal. Los Beans EL pueden ser utilizados en los recursos de JSP del tema y permiten que la capa de presentación se comunique con la capa de aplicación, como la API Portal Model.

A diferencia de los recursos estáticos del tema, los cuales están disponibles a través de WebDAV, los recursos de jsp dinámicos del tema están disponibles a través de la aplicación empresarial (ear) del tema, ya que requieren acceso al contexto del servlet para compilar y ejecutar.

Los recursos de jsp dinámicos del tema están enlazados a los recursos estáticos del tema en theme.html mediante áreas de contenido dinámico. Para obtener una explicación más amplia, vea Working with dynamic content spots.

Creando un nuevo conjunto de contenido dinámico

Antes de continuar, asegúrese de que ha completado todas las etapas y subsecciones de Cree una copia del tema cuando creó su propio tema personalizado al comienzo de este artículo.

La subsección Copie los recursos dinámicos para su tema explicó cómo crear su propio ear de tema con el jsps.

La subsección Enlace su tema con la raíz del contexto de la aplicación web explicó cómo registrar la raíz del contexto del ear de su tema con el servidor de Portal.

La subsección Modifique las referencias de recurso dinámico para su tema explicó cómo crear sus propias áreas de contenido dinámico personalizadas.

Reuniéndolo todo:

  • El área de contenido dinámico aparece en theme.html en forma de una etiqueta ancla dyn-cs, tal como <a rel="dynamic-content" href="dyn-cs:id:customTheme_commonActions"></a>.
  • El id dyn-cs, como customTheme_commonActions, se correlaciona con la propiedad personalizada en DynamicContentSpotMappings resource environment provider (REP) in the WebSphere Integrated Solutions Console.
  • Y después, el valor de la propiedad personalizada, como res:/customTheme/themes/html/dynamicSpots/commonActions.jsp, se correlaciona al recurso de jps dinámico en el ear de su tema.

Este commonActions.jsp es el que utilizaremos como un ejemplo de actualizar contenido dinámico con Beans de EL.

Ejemplo de actualizar contenido dinámico con Beans de EL

Ubique y edite el archivo commonActions.jsp de su tema personalizado en <wp_profile>\installedApps\<cell>\<CustomThemeEAR>.ear\<CustomTheme>.war\themes\html\dynamicSpots.

La primera etiqueta que desea añadir es una etiqueta c:set para establecer el tipo de dispositivo actual en una variable llamada deviceClass utilizando DeviceClass del Bean de EL clientProfile. Añada la línea en el Listado 14 en la parte superior de su archivo después de las inclusiones.

Listado 14. Bean de EL para obtener el tipo de dispositivo actual
<%-- Renders links for Login/Logout and Help that are shown in the banner --%>
<c:set var="deviceClass" scope="request" value="${wp.clientProfile['DeviceClass']}" />

	<ul class="wpthemeCommonActions wpthemeRight">

Ahora está listo para eliminar condicionalmente ciertos elementos de la página. Primero, elimine el enlace de nombre de usuario para editar el perfil de usuario en teléfonos inteligentes. Para hacerlo, añada una etiqueta c:if alrededor del bloque de código que desea eliminar, utilizando la variable deviceClass en la comparación. Añada las dos líneas en el Listado 15 alrededor del bloque k <li> del enlace de nombre de usuario.

Listado 15. Bloque if para eliminar el enlace de nombre de usuario con base en el tipo de dispositivo
<c:if test="${deviceClass != 'smartphone'}">
<li class="wpthemeFirst">	
<portal-internal:adminlinkinfo name="SELFCARE">
<portal-navigation:urlGeneration contentNode="<%=wpsContentNode%>" 
	layoutNode="<%= wpsCompositionNode %>" 
	portletWindowState="Normal" 
	themeTemplate="" 
	portletParameterType="render">
<portal-navigation:urlParam type="render" name="ao" value="thm"/>
<portal-navigation:urlParam type="render" name="OCN" 
	value="<%= wpsNavigationNodeID %>" />
	<a href="<%wpsURL.write(escapeXmlWriter);%>">
		<c:out value="${wp.user[themeConfig['user.displaynameattribute']]}" />
	</a>
   </portal-navigation:urlGeneration>
   </portal-internal:adminlinkinfo>
</li>
</c:if>

Los tipos de dispositivo de fábrica son computadora de escritorio, pizarra digital y teléfono inteligente. Puede configurar tipos de dispositivo adicionales, de forma que puede tener cualquier número de tipos de dispositivos con el tiempo. Aprenda más en este artículo: Device Classes.

Lo siguiente que desea hacer es eliminar el enlace del menú Actions en teléfonos inteligentes y pizarras digitales. Añada las dos líneas en el Listado 16 alrededor del bloque <li> del menú Actions.

Listado 16. Bloque if para eliminar el menú Actions con base en el tipo de dispositivo

Haga clic para ver la lista de códigos

Listado 16. Bloque if para eliminar el menú Actions con base en el tipo de dispositivo

<c:if test="${(deviceClass != 'tablet') && (deviceClass != 'smartphone')}">
<li>
<%--
Esto crea el menú de contexto Actions para acciones de página.  Utilizamos la entidad de HTML
&#36; para codificar el carácter $ de forma que no sea interpretado como una expresión de JSP aquí y se muestre como letras.
--%>
.
.
.
</li>
</c:if>

Lo último que desea hacer es eliminar el enlace Sign Up en los teléfonos inteligentes. Añada las dos líneas en el Listado 17 alrededor del bloque <li> de Sign Up.

Listado 17. Bloque if para eliminar el enlace Sign Up con base en el tipo de dispositivo
<c:if test="${deviceClass != 'smartphone'}">
<li class="wpthemeFirst">
	<portal-internal:adminlinkinfo name="SELFCARE">
	<portal-navigation:urlGeneration allowRelativeURL="true" 
		contentNode="<%=wpsContentNode%>" 
		layoutNode='<%= wpsCompositionNode %>' 
		portletWindowState="Normal" 
		themeTemplate="">
	<portal-navigation:urlParam type="render" name="ao" value="thm"/>
	<portal-navigation:urlParam type="render" name="OCN" 
	   value="<%= wpsNavigationNodeID %>" />
		<a href='<% wpsURL.write(escapeXmlWriter); %>'>
			<portal-fmt:text key="link.enrollment" bundle="nls.engine"/>
		</a>
	</portal-navigation:urlGeneration>
	</portal-internal:adminlinkinfo>
</li>
</c:if>

Si tiene la recarga de jsp habilitada en el oído de su tema, sus cambios de jsp aparecerán automáticamente la siguiente vez que cargue su página. Si no tiene la recarga de jsp habilitada, la alternativa más rápida es suprimir el archivo de clase de jsp compilado, _commonActions.class, de la carpeta temp en <wp_profile>\temp\<cell>\WebSphere_Portal\<CustomThemeEAR>\<CustomTheme>.war\themes\html\dynamicSpots. Después de que suprime ese archivo de clase, su jsp se volverá a compilar y verá sus cambios la siguiente vez que cargue su página. Alternativamente, también puede reiniciar la aplicación web de su tema para ver sus cambios.

Los archivos de muestra disponibles en la sección de Descargas de este artículo proporcionan estilos adicionales que ayudan a hacer algunas cuantas áreas más del tema responsivas, como la navegación secundaria mostrada en las figuras a continuación.

Ahora cuando su página se ejecute en una pizarra digital se verá como la Figura 11. Note que no hay un menú Actions. Y la marcación para el elemento no está oculta, sino que está completamente eliminada de la página, lo cual es mejor para el rendimiento.

Figura 11. El tema responsivo en un dispositivo de pizarra digital
The responsive theme on a tablet device

Su página ejecutándose en un teléfono inteligente se verá como la Figura 12. Note que no hay enlace de nombre de usuario ni menú Actions. Y la marcación para el elemento no está oculta, sino que está completamente eliminada de la página, lo cual es mejor para el rendimiento.

Figura 12. el tema responsivo en un dispositivo de teléfono inteligente
The responsive theme on a smartphone device

Resumen

El primer artículo en esta serie lo llevó a través de las bases del desarrollo de un tema que integra conceptos de diseño web responsivo. Usted ahora tiene un tema personalizado que automáticamente se adapta a distintos dispositivos.

El diseño responsivo le permite tener una presencia móvil sin un gasto adicional significativo, pero hay más por considerar en el diseño responsivo que solo el espacio de la pantalla. Las siguientes partes de esta serie le muestran cómo aprovechar posibilidades de dispositivo como eventos táctiles y priorización de contenido para crear una experiencia web verdaderamente excepcional.


Descargar

DescripciónNombretamaño
Responsive design sample filesrwd_sample_files.zip10KB

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=WebSphere, Desarrollo móvil, tecnologia Java
ArticleID=966691
ArticleTitle=Implemente un diseño web responsivo mediante WebSphere Portal, Parte 1: Iníciese con el tema predeterminado
publish-date=01282013