Introdução

Criar uma experiência da web excepcional otimizada para diversos dispositivos é essencial para os negócios hoje. Os usuários agora esperam poder navegar na web em seus celulares com a mesma facilidade que em seus desktops.

Para lidar com dispositivos móveis, começa-se falando em aplicativos nativos, mas eles têm um algo custo de propriedade e a reutilização de código é limitada. Outra solução é criar um website alternativo especificamente para um dispositivo móvel, mas essa não é uma solução prática, pois pode resultar em muitos recursos de código para manter.

Ethan Marcotte publicou um artigo discutindo uma solução prática para as mudanças no cenário de dispositivos e tamanhos de tela que cria websites flexíveis, fluidos e adaptáveis. Leia o influente artigo de Ethan sobre web design responsivo (consulte Recursos mais adiante neste artigo).

Voltar para parte superior

Pré-requisitos

WebSphere® Portal

Ao desenvolver esta série de artigos, usamos WebSphere® Portal versão 8.0. A maioria do código que discutimos é essencial em qualquer desenvolvedor de tema: HTML, CSS, Javascript e JSP.

Navegador da web

Recomendamos ter ao menos Mozilla Firefox 4 com a extensão Firebug instalada. No entanto, qualquer navegador com suporte a CSS3 poderá renderizar essas táticas corretamente. A maioria dos navegadores hoje possui suas próprias ferramentas de desenvolvimento integradas, mas nossos exemplos fazem referência especificamente ao Firebug.

Cliente WebDAV

Para atualizar um tema no WebSphere Portal, é necessário um cliente WebDAV. A amostra para este artigo foi desenvolvida usando AnyClient. É possível usar qualquer cliente de WebDAV para o qual WebSphere Portal ofereça suporte. Nós discutimos como colocar código em arquivos que você copiou para a máquina local, e supomos que você o faça primeiro na máquina local e, em seguida, copie de volta para WebDAV.

Para mais detalhes, consulte este artigo sobre conexão ao WebDAV: "Connecting to the Portal WebDAV with 8.0."

Tema customizado

É necessário criar um tema customizado para poder aplicar as táticas de web design responsivo. Não modifique o tema do Portal 8.0 diretamente, pois ele pode ser atualizado por fixpacks de serviço. Em vez disso, crie uma cópia do tema do Portal 8.0. Isso garante que o novo tema tenha todos os elementos necessários para funcionar e que alterações não serão sobrescritas por um fixpack. Para criar um tema customizado, siga as instruções neste artigo: "Create a copy of the theme."

Você também deve estar familiarizado com estes conceitos discutidos nestes artigos:

• Modularização de tema: The module framework
• Beans Expression Logic: Portal EL Beans

Voltar para parte superior

Começando

Por padrão, o tema padrão do WebSphere Portal 8.0 não está otimizado para dispositivos móveis. Duas peças essenciais para criar um tema responsivo do Portal são:

Consultas de mídia
As consultas de mídia permitem o uso de CSS com base na orientação, tamanho de tela e outros atributos do dispositivo. É possível colocá-las no elemento <link /> ao incluir CSS ou em sequência diretamente no CSS. Para esse artigo, colocamos as consultas diretamente no CSS para aliviar solicitações extras ao servidor. Usar consultas é semelhante a escrever condições if para dizer a um navegador quando ativar um certo conjunto de estilos.

Elementos fluidos
Um elemento fluido usa porcentagens, em vez de valores fixos, para definir o tamanho dos contêineres. As porcentagens criam um contêiner elástico, que será otimizado para diferentes fatores de forma. Esse conceito aplica-se a muitas partes do tema, como navegação, rodapé, contêineres de layout e mais.

Este artigo apresenta uma solução simples, que otimiza para diferentes fatores de forma, mas também leva em consideração recursos disponíveis na conta. Entregar imagens otimizadas para alguns dispositivos também é uma parte importante, que será discutida posteriormente nesta série.

Usando Firebug para inspecionar áreas do tema

Firebug é uma extensão do Firefox que oferece muitas ferramentas de desenvolvedor dentro do navegador. Firebug permite inspecionar, editar e depurar CSS, HTML e Javascript sequenciais em qualquer página da web. Usamos essa ferramenta para identificar áreas estáticas do tema que precisamos ajustar para torná-lo responsivo. Se você não conhece bem o Firebug, consulte este artigo no developerWorks: "Debug and tune applications on the fly with Firebug."

Voltar para parte superior

Tornando o tema responsivo

Agora, vamos incluir elementos responsivos no tema. Você deve já ter criado um tema customizado. Certifique-se de ter uma página com o tema customizado designado, para poder visualizar as alterações enquanto acompanha este artigo.

Introdução aos estilos de tema do WebSphere Portal 8.0

Os temas do WebSphere Portal usam uma camada comprimida para os estilos padrão, para melhorar o desempenho. Esses estilos são armazenados no WebDAV no tema customizado. A localização no WebDAV é:

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

Os arquivos de camada são chamados "master.css" e "masterRTL.css" e são incluídos pelo módulo "wp_theme_portal_80", definido como uma contribuição específica do tema no arquivo:

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

Esses estilos definem a estrutura da página e podem ser usados em qualquer tema que compartilhe a marcação HTML do WebSphere Portal 8.0. Há duas camadas porque uma é para usuários bidirecionais (masterRTL.css), e a outra, para usuários não bidirecionais (master.css). Na versão bidirecional, o layout da página é da direita para a esquerda. Essas folhas de estilo são usadas quando a página está em um idioma bidirecional, como árabe ou hebraico.

Iremos atualizar o arquivo master.css diretamente para incluir o código que irá criar um design responsivo.

Criar as consultas de mídia

As consultas de mídia otimizam o tema para diferentes dispositivos. Neste exemplo, falamos sobre dois dispositivos adicionais além de um desktop: um smartphone e um tablet. Em design, quando uma consulta de mídia é introduzida, isso é geralmente chamado de ponto de interrupção. É possível ter mais de um para cada dispositivo de destino, mas, neste exemplo, nós ignoramos alterações de orientação e outros pontos de interrupção menores e concentramo-nos em um ponto para cada dispositivo.

Conecte ao ponto de entrada fs-type1 para WebDAV, navegue para o tema customizado e copie o arquivo master.css discutido na seção anterior para a sua máquina local. É um arquivo comprimido, portanto, será apenas uma única linha longa de CSS. Tudo bem, pois queremos manter a parte do desktop da interface com o usuário intacta e incluir estilos adicionais para otimizar mais.

A primeira consulta que incluiremos é para um dispositivo tablet, portanto, os dispositivos de destino terão tela com menos de 800 pixels. Copie a consulta de mídia abaixo, na Listagem 1, no final de master.css.

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

}

Ao longo deste artigo, não deixe de copiar o arquivo de volta para o WebDAV após fazer atualizações, como incluir código em master.css. Com essa consulta de mídia instalada, qualquer estilo colocado na estrutura será renderizado quando o tamanho da tela for menor que 800 pixels.

A segunda consulta a ser incluída é para smartphones, com dispositivos de destino com tela com largura inferior a 480 pixels. Copie a consulta de mídia abaixo, na Listagem 2, no final de master.css.

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

}

Com essa consulta de mídia instalada, qualquer estilo colocado na estrutura será renderizado quando o tamanho da tela for menor que 480 pixels. A Listagem 3 mostra master.css com esses dois pontos de interrupção.

.wpthemeMenuAnchor {display:inline-table !important;}.wpthemeMenuBorder {top: -9999px.... 
@media screen and (max-width: 800px) {

}

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

}

Atualizar as estruturas de tema para que se tornem responsivas

Você agora tem duas estruturas definidas que contêm os estilos que substituem o desktop e otimizam o tema para um tablet e smartphone. O primeiro passo para identificar áreas do tema que precisam tornar-se responsivas é usar o Firebug para inspecionar o DOM e localizar as estruturas que têm uma largura definida.

Para inspecionar o DOM, selecione o botão de seta no lado direito da barra de ferramentas do Firebug (Figura 1).

Usando o inspetor, é possível passar o mouse sobre as áreas da página para ver a largura definida nos estilos. Ao passar o mouse sobre os elementos na página, você verá que há um wrapper de página com a classe de estilo "wpthemeFrame" (veja a Figura 2); e, nas principais áreas da página, como navegação, conteúdo principal e rodapé, há uma estrutura com a classe de estilo "wpthemeInner" (veja a Figura 3).

Essas duas classes de estilo são definidas com valores estáticos. É necessário alterar as larguras para refletir precisamente o dispositivo de destino e tornar as estruturas com as classes definidas flexíveis. Para fazer isso, configure a largura mínima em wpthemeFrame para o mínimo para o qual você deseja que o design responsivo adapta-se (para esta amostra, 320 pixels). Em seguida, para tornar todas as principais áreas da página elásticas, dê a wpthemeInner uma largura porcentual (nesta amostra, usamos 100%). Copie as definições de estilo de wpthemeFrame e wpthemeInner para a consulta de mídia de tablet definida com uma largura máxima de 800 pixels, como mostra a LIstagem 4. Como esses estilos serão aplicados a todas as telas com tamanho inferior a 800 pixels, serão aplicados para tablets e smartphones.

	
@media screen and (max-width: 800px) {
	.wpthemeFrame {
		min-width: 320px;
	}
		
	.wpthemeInner { 
		width: 100%;
	}
}

Os seguintes itens para modificar para diferentes dispositivos são a alternância do modo de edição e o menu de projeto (Figura 4).

Se você acha que usuários em um tablet ou smartphone não precisarão dos recursos do modo de edição, é apropriado ocultá-los nesses dispositivos. Para isso, basta incluir um estilo para ocultar os elementos: inclua o CSS na Listagem 5 em "utb-project-quicklink" e "utb-project-info".

	
@media screen and (max-width: 800px) {
	.wpthemeFrame {
		min-width: 320px;
	}
		
	.wpthemeInner { 
		width: 100%;
	}
	.utb-project-quicklink, 
	.utb-project-info {
		display: none;
	}
}

Como mostra a Figura 5, a página em um tablet agora irá redimensionar e ocultar os recursos de edição.

Outro elemento da página que se deve controlar ao otimizar para telas menores é a quantidade de navegação exibida para o usuário. Nesta amostra, nós fazemos com que a navegação superior não seja renderizada em telas menores que 480 pixels. Também removemos a caixa de entrada de procura da otimização de smartphone, para economizar espaço na tela. Para isso, basta usar a mesma abordagem que você fez com a alternância do modo de edição e definir um estilo para ocultar esses elementos. Inclua o código em negrito na Listagem 6 na consulta de mídia voltada para smartphones.

	
@media screen and (max-width: 480px) {
	.wpthemeHeader,
	.wpthemeSearch {
		display:none;
	}
}

Usar estilos para ocultar marcação para design responsivo é rápido e fácil e, em alguns casos, pode ser a melhor abordagem. A seção avançada abaixo mostra como configurar a lógica para que, em vez de usar estilos, seja possível usar classes de dispositivos para controlar a marcação que é renderizada.

Ao otimizar o tema para dispositivos menores, é importante levar em consideração que os mecanismos de inserção também irão mudar. Tablets e smartphones permitem que um usuário use eventos de toque para selecionar itens na página. É necessário garantir que os elementos na página possam ser facilmente selecionados usando os dedos. Uma área da página que se torna muito congestionada em telas menores é o rodapé. Para aliar essa congestão e tornar os eventos de toque mais fáceis, é necessário garantir que o rodapé tenha um espaçamento adequado. Isso exige aumentar o espaço em torno dos links do rodapé, aumentar o tamanho da fonte e certificar-se de que as colunas são elásticas. Inclua o código na Listagem 7 na consulta de mídia de tablet (em outras palavras, max-width: 800px).

			
	.wpthemeFooter li { 
		margin: 10px 0;
	}
	
	.wpthemeFooter a{
		font-size: 1.25em
	}
	
	.wpthemeFooterCol {
		width: 30%;
		padding: 0 1%;
	}
	
	.wpthemeCol {
		margin-left: 0;
	}

Smartphones oferecem menos espaço do que um desktop ou tablet, portanto, é difícil exibir itens lado a lado e, ao mesmo tempo, garantir que seja fácil determinar as diferentes áreas da página para usar para eventos de toque. É necessário empilhar alguns elementos da página, para que estejam otimizados para smartphones. As áreas da página a serem otimizadas dessa forma são a navegação, o layout e o rodapé.

Para o layout, faz sentido otimizar os contêineres para tablets e smartphones. Esta amostra é voltada para os layouts de fábrica que têm todas as colunas. Não deixe também de incluir algum conteúdo na página, para poder ver como os portlets são empilhados em telas de diferentes tamanhos ou em dispositivos diferentes. Copie o código da Listagem 8 na consulta de mídia do tablet para empilhar o layout, e será aplicado a todos os dispositivos com uma tela menor que 800 pixels. Veja a Figura 8.

						
.wpthemePrimaryContainer.wpthemeCol,
.wpthemeSecondaryContainer.wpthemeCol,
.wpthemeTertiaryContainer.wpthemeCol {
	padding: 0 2.5%;
	width: 95%;
}
			

Para empilhar navegação e rodapé, aplique isso apenas a dispositivos de smartphone. Copie o código na Listagem 9 para a consulta de mídia de smartphone. Veja a Figura 8.

						
.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
}
			

O empilhamento dos links de navegação produz um padrão que é típico de smartphones. No entanto, não está sempre claro se, ao clicar no link, o usuário será levado a uma nova página ou se o conteúdo irá expandir e contrair. Para esclarecer ao usuário que esses links mudarão o contexto da página, inclua setas para a seção da página. Para fazer isso, é necessário incluir uma imagem no WebDAV. A imagem chama-se "arrow.png" e está localizada nos arquivos de amostra disponíveis na seção Downloads deste artigo. Após fazer o download da imagem, coloque neste local no WebDAV:

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

A estrutura de arquivo após a imagem ser copiada para WebDAV será como na Figura 9.

Quando a imagem estiver em WebDAV, ela pode ser usada nos estilos. É necessário incluir a imagem nos links de navegação, e já temos uma definição em master.css na consulta de mídia de smartphone. Inclua um atributo de plano de fundo na definição dos links de navegação primário, como mostra a Listagem 10.

							
.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;
}
			

Após configurar o novo atributo de plano de fundo, deve ser possível atualizar a página e ver as setas exibidas no lado direito da área de link de navegação, como mostra a Figura 10.

Configurar a porta de visualização correta para dispositivos

Muitos navegadores de smartphones ajustam a escala de páginas da web para aumentar a largura da porta de visualização para um tamanho apropriado para exibir marcação voltada a desktops. É necessário fazer com que gestos acidentais não alterem a escala do tema a ponto de ser difícil usá-lo.

O exemplo de meta tag abaixo, na Listagem 11, torna a largura automaticamente igual à largura da tela do dispositivo. A propriedade de escala inicial define o nível de zoom quando a página é carregada pela primeira vez. As propriedades de escala máxima e escala mínima definirão os parâmetros do recurso de zoom no dispositivo, e, com o mínimo e o máximo definidos na mesma escala inicial, o usuário não poderá aumentar ou diminuir o zoom da página. Isso é aceitável, pois planejamos otimizar a interface com o usuário para telas menores, e um design responsivo realmente otimizado não deve precisar do recurso de zoom.

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1">

Inclua a meta tag acima (Listagem 11) no elemento <head> do tema. Para fazer isso, conecte ao ponto de entrada fs-type1 para WebDAV e navegue até o modelo theme.html do tema customizado. Supondo que você esteja usando os modelos padrão que foram localizados, eles estarão neste local:

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

Copie o arquivo theme_en.html para a máquina local e abra. Localize o elemento <head> no modelo, que deve ser semelhante à Listagem 12 abaixo.

<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 o exemplo de meta tag no elemento <head> do modelo de tema (Listagem 13) e copie de volta para o WebDAV.

<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>

O tema agora preenche o espaço apropriado em todos os dispositivos, e os recursos de zoom estão desativados

Voltar para parte superior

Avançado: Modificando conteúdo dinâmico

Na seção anterior, você aprendeu como ocultar alguns elementos por meio de estilos display:none controlados por consultas de mídia nos recursos de CSS estático do tema. Por questão de desempenho, é melhor remover completamente esses elementos da página em alguns dispositivos, para que a resposta ao dispositivo seja a menor possível.

A remoção completa de um elemento da página para alguns dispositivos pode ser realizada usando DeviceClass de ClientProfileBean de Beans Expression Logic (EL) do Portal. Beans EL podem ser usados nos recursos de JSP do tema e permitem que a camada de apresentação comunique-se com a camada de aplicativo, como a API Portal Model.

Ao contrário dos recursos estáticos do tema, que estão disponíveis através de WebDAV, os recursos de JSP dinâmicos do tema estão disponíveis através do aplicativo corporativo (ear) do tema, pois exigem acesso ao contexto do servlet para compilação e execução.

Os recursos JSP dinâmicos do tema estão associados aos recursos estáticos do tema em theme.html através de pontos de conteúdo dinâmico. Para mais explicações, consulte Working with dynamic content spots.

Criando um conjunto de conteúdo dinâmico

Antes de continuar, certifique-se de ter realizado todas as etapas e subseções de Create a copy of the theme quando você criou seu próprio tema customizado no começo deste artigo.

A subseção Copy the dynamic resources for your theme explicou como criar o ear do tema com os JSPs.

A subseção Bind your theme to the context root of the web app explicou como registrar a raiz de contexto do ear do tema com o servidor de Portal.

A subseção Modify the dynamic resource references for your theme explicou como criar seus próprios pontos de conteúdo dinâmico customizado.

Colocando tudo junto:

• O conteúdo dinâmico aparece em theme.html na forma de uma tag âncora dyn-cs, como <a rel="dynamic-content" href="dyn-cs:id:customTheme_commonActions"></a>.
• O ID dyn-cs, como customTheme_commonActions, mapeia para a propriedade customizada no provedor de ambiente de recursos (REP) WP DynamicContentSpotMappings no WebSphere Integrated Solutions Console.
• Em seguida, o valor da propriedade customizada, como res:/customTheme/themes/html/dynamicSpots/commonActions.jsp, é mapeado para o recurso JSP dinâmico no ear do tema.

É esse commonActions.jsp que usamos como um exemplo da atualização de conteúdo dinâmico com Beans EL.

Exemplo da atualização de conteúdo dinâmico com Beans EL

Localize e edite o arquivo commonActions.jsp na tela customizado em <wp_profile>\installedApps\<cell>\<CustomThemeEAR>.ear\<CustomTheme>.war\themes\html\dynamicSpots.

A primeira tag que deve ser incluída é c:set para definir o tipo de dispositivo atual em uma variável chamada deviceClass usando o DeviceClass do bean EL clientProfile. Inclua a linha na Listagem 14 na parte superior do arquivo após os includes.

<%-- 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">

Você agora está pronto para remover condicionalmente alguns elementos da página. Primeiro, remova o link de nome de usuário para editar o perfil do usuário no smartphone. Para isso, inclua uma tag c:if em torno do bloco de códigos que você deseja remover, usando a variável deviceClass na comparação. Inclua as duas linhas na Listagem 15 em torno do bloco <li> de link de nome de usuário.

<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>

Os tipos de dispositivo incluídos de fábrica são desktop, tablet e smartphone. É possível configurar tipos de dispositivo adicionais, para ter qualquer número deles ao longo do tempo. Saiba mais neste artigo: Device Classes.

A próxima coisa a fazer é remover o link de menu Actions em smartphones e tablets. Inclua as duas linhas na Listagem 16 em torno do bloco <li> do menu Actions.

<c:if test="${(deviceClass != 'tablet') && (deviceClass != 'smartphone')}">
<li>
<%--
This creates the Actions context menu for page actions.  We use the
&#36; HTML entity to encode the $ character so that it won't be interpreted
as a JSP expression here and will show up as literals.
--%>
.
.
.
</li>
</c:if>

A última coisa a fazer é remover o link Sign Up em smartphones. Inclua as duas linhas na Listagem 17 em torno do bloco <li> de Sign Up.

<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>

Se o recarregamento de JSP estiver ativado no ear do tema, as alterações do JSP aparecerão automaticamente na próxima vez que você carregar suas páginas. Se o recarregamento de JSP não estiver ativado, a alternativa mais rápida é excluir o arquivo de classe JSP compilado, _commonActions.class, da pasta temporária em <wp_profile>\temp\<cell>\WebSphere_Portal\<CustomThemeEAR>\<CustomTheme>.war\themes\html\dynamicSpots. Após excluir esse arquivo de classe, o JSP será recompilado e você verá as alterações da próxima vez que carregar sua página. Também é possível reiniciar o aplicativo da web do tema para ver as alterações.

Os arquivos de amostra disponíveis na seção Downloads deste artigo fornecem estilos adicionais que ajudam a tornar mais algumas áreas do tema responsivas, como a navegação secundária mostrada nas figuras abaixo.

Agora a página, quando executada em um tablet, ficará como na Figura 11. Observe que não há menu Actions. E a marcação do elemento não foi ocultada, mas sim removida completamente da página, o que é melhor para o desempenho.

A página, quando executada em um smartphone, ficará como na Figura 12. Observe que não há link de nome de usuário nem menu Actions. E a marcação do elemento não foi ocultada, mas sim removida completamente da página, o que é melhor para o desempenho.

Voltar para parte superior

Resumo

O primeiro artigo na série examinou os aspectos básicos de desenvolver um tema que integre conceitos de web design responsivo. Agora você tem um tema customizado que se adapta automaticamente a diferentes dispositivos.

Design responsivo permite criar uma presença em dispositivos móveis sem despesas adicionais significativas, mas há mais para levar em consideração no design responsivo do que apenas espaço na tela. As próximas partes desta série mostram como usar recursos de dispositivo como eventos de toque e priorização de conteúdo para criar uma experiência da web realmente excepcional.

Voltar para parte superior

Download

Informações sobre métodos de download

Recursos

Aprender

• Leia "Responsive Web Design", o artigo seminal de Ethan Marcotte sobre o assunto.
  
  
• "Code example of Responsive web design using CSS3 Media Queries" explica como codificar consultas de mídia de CSS3.
  
  
• "Connecting to the Portal WebDAV with 8.0" (Portal wiki, 2012) explica como usar WebDAV com Portal.
  
  
• "Debug and tune applications on the fly with Firebug" (developerWorks, maio de 2008) mostra como usar Firebug com Firefox.
  
  
• Consulte "Create a copy of the theme" (Portal wiki, 2012) para detalhes sobre como copiar o tema padrão como a base para um tema customizado.
  
  
• "The module framework" (Portal wiki, 2012) descreve a arquitetura modular do tema Portal v8.
  
  
• "Working with dynamic content spots" (Portal wiki, 2012) discute pontos de conteúdo dinâmico.
  
  
• "Portal EL Beans" (Portal wiki, 2012) descreve os Beans Expression Logic do Portal.
  
  
• Saiba mais sobre desenvolvimento de uma experiência da web excepcional usando WebSphere Portal.
  
  
• No site Mobile development do developerWorks, você encontra artigos de instruções, código para avaliação, fóruns, demos e perspectivas técnicas sobre produtos e tecnologias para desenvolvedores de dispositivos móveis.
  
  

Obter produtos e tecnologias

• Faça download do Firefox.
  
  
• Faça download do Firebug.
  
  
• Avalie os produtos IBM da melhor forma para você: faça download de um produto teste, teste um produto online ou use um produto em um ambiente de nuvem.
  
  
• Experimente os produtos Lotus no Greenhouse para entender melhor e aprimorar sua capacidade de colaboração com amigos e colegas.
  
  

Discutir

• Participe da Comunidade do developerWorks e explore os blogs, fóruns, grupos e wikis voltados para desenvolvedores.
  
  

Sobre os autores

Jon Lidaka é engenheiro de frontend trabalhando no Research Triangle Park Development Lab da IBM. Durante seu período no desenvolvimento do Portal, ele participou principalmente do desenvolvimento de temas, dedicando-se a acessibilidade e globalização e a vários componentes, incluindo portlets de administração e integrador de aplicativo da web. Atualmente, é líder da missão de desenvolvimento remoto do Portal. Jon participou de diversas conferências da IBM, falando sobre design de interface com o usuário e otimizando temas do Portal para dispositivos móveis.

Scott Consolatti é engenheiro de frontend no Research Triangle Park Development Lab da IBM. Durante seu tempo no desenvolvimento de Portal, dedicou-se principalmente a desenvolvimento de temas, com foco na nova arquitetura de tema modular. Também fez contribuições interiores a vários componentes, incluindo widgets, CSA e personalização. Scott também participou do desenvolvimento da interface com o usuário de muitos outros produtos IBM, incluindo IBM Mashup Center e IBM Lotus ActiveInsight, e possui várias patentes relacionadas a interface com o usuário. Atualmente, dedica-se a permitir uma experiência de dispositivo móvel no tema padrão do WebSphere Portal.

Classificar este artigo

Comentários

Voltar para parte superior

Índice

• Introdução
• Pré-requisitos
• Começando
• Tornando o tema responsivo
• Avançado: Modificando conteúdo dinâmico
• Resumo
• Download
• Recursos
• Sobre os autores
• Comentários

Conheça a IBM da sua cidade

A IBM está mais perto do que você imagina!

---

Saiba mais