Capítulo
Aplicando um Novo Design
1
A
15
Analisando o Web-Design proposto
V
amos partir, neste capítulo, de um Web-Design estático, produzido em menos de uma hora por um
Web-Designer amador (este autor), com o uso do software Xara Web-Style
(http://www.xara.com/products/webstyle)*.
A página da Figura D15.1 é um exemplo básico de Web-Design que pode ser realizado em tempo recorde
por produtos de mercado. O Web-Designer somente teve o cuidado de indicar os pontos do projeto visual
onde previu a entrada dos conteúdos dinâmicos, tais como menus e formulários.
Nosso trabalho é aplicar as partes dinâmicas conforme descrito, obedecendo às cores, fontes e tamanhos
definidos pelo Web-Design, além de conferir e otimizar o seu trabalho, no momento da montagem.
Figura D15.1. Web-design livre básico, produzido em uma hora com Web-Style.
#1. Conteúdo estático para o topo, com logotipo e trabalho artístico para a empresa ou aplicação.
Costuma incluir, no mínimo, o logo da empresa, nome ou sigla da aplicação e alguma sentença
opcional. Um comportamento padrão de usabilidade Web é que, ao clicar no topo/logo,
voltemos para a página principal (home-page) – teremos que implementar este recurso.
#2. A área horizontal para o conteúdo de menu foi reduzida pela arte, mas o Web-Design deixou
espaço suficiente para acomodar as opções dinâmicas. Teremos que incluir o nosso menu
dinâmico aqui, pois um menu estático limitaria nossa segurança visual e outros recursos
interessantes. Para isso, temos a cor de fundo e a fonte do texto definidas, que teremos que
seguir.
#3. Os formulários e a página principal entram nesta área, chamada de “corpo”.
*
O Web-Style não é um produto gratuito (custa cerca de U$ 70,00), mas apenas de minha preferência para prototipações rápidas de
Web-Design. Naturalmente, existem diversas outras opções nesta área, indo desde produtos gratuitos até dispendiosas suítes
profissionais.
#4. O rodapé deverá conter bordas arredondadas e uma textura especial.
#5. Na parte da direita, teremos que manter a barra do jCompany, que contém diversas opções
para troca de pele, leiautes, notas de liberação, “quem está on-line?”, etc...
A Figura D15.2 traz uma segunda arte para ser incluída somente na página de autenticação (login). Além
disso, esta página sofrerá apenas modificações de estilo.
Figura D15.2. Logotipo de entrada da aplicação, para login.
O nosso Web-Designer deixou também um arquivo de CSS com estilos diversos para ajustar tamanhos e
fontes de texto, em situações diversas, estilo de formulários, botões, etc.. Teremos contato com o
restante deste material, ao longo dos tutoriais.
Aplicando o Novo Web-Design à aplicação RH Tutorial
- Modificando a definição geral
A primeira ação de customização a ser feita em aplicações geradas, antes de iniciarmos a aplicação de
novos artefatos de Web-Design, é a modificação de algumas declarações de “metadados” corporativos
(em nível da empresa) e da aplicação, relacionados a esta área.
A imagem que aparece na página de autenticação, os nomes da aplicação e da empresa que aparecem
nos rodapés, bem como a pele e o leiaute defaults, são algumas destas declarações.
Importante: Em uma organização com demanda de desenvolvimento em escala (com dezenas ou
centenas de aplicações que compartilham de um mesmo Web-Design), muitas vezes este passo será
desnecessário, porque haverá certamente uma “camada Bridge” com estas informações já configuradas Ou o template INI já poderá ter sido customizado, de modo que novas aplicações sejam criadas já com o
Web-Design e metadados apropriados.
Como não é o nosso caso, vamos modificar uma primeira vez, estes arquivos.
Edite o arquivo de metadados “package-info.java”, que fica abaixo do pacote
“src\main\config\com\powerlogic\jcompany\config\emp”.
<Este conteúdo está sendo revisado para a versão do jCompany 6.0.1 e Jaguar 6.1.1>
Sumário
Neste capítulo, aplicamos um Web-Design inteiramente novo em nossa aplicação “rhtutorial”,
compreendendo diversos aspectos da arquitetura de camada Visão do jCompany FS Framework. Ao
aplicarmos customizações na aparência e ergonomia (look-and-feel) de nossa aplicação, mantivemos
nossa estratégia de reinventar o mínimo de componentes de leiaute, mantendo o reuso maximizado.