Criar temas customizados de dispositivos móveis em jQuery

Personalize o visual de páginas, barras de ferramentas, elementos de formulário, listas, botões, etc.

A alta taxa de adoção de smartphones e dispositivos tablet está, em última instância, aumentando a demanda por desenvolvedores e designers da web de dispositivos móveis. A estrutura do jQuery Mobile permite criar experiências da web em dispositivos móveis que fazem concorrência aos resultados de desenvolvimento de aplicativo nativo fornecendo acesso instantâneo a aplicativos e a websites usando navegador da web, em vez de fazer os usuários transferirem por download e instalarem os aplicativos remotos. Saiba como usar a estrutura de temas do jQuery Mobile para criar aplicativos da web e websites remotos com marca customizada.

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock é desenvolvedor da web e designer por contrato desde 1996. Ele trabalhou em projetos para empresas como SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software e Fire Mountain Gems. Ele é autor de Ajax for Web Application Developers (Sams) e The ActionScript Migration Guide (New Riders), bem como um colunista de destaque e escritor de vários websites e revistas de design, incluindo Peachpit.com, InformIT.com e a revista Practical Web Design . Kris também é o fundador do www.studiosedition.com, um estúdio de desenvolvimento de software e design da web especializado na fusão de forma e função.



16/Jan/2012

A estrutura do jQuery Mobile é uma biblioteca JavaScript que pode ser usada para facilmente criar uma versão para dispositivo móvel de um website, convertendo as páginas da web existentes em websites e aplicativos fáceis e simples de usar com toque na tela. A estrutura do jQuery Mobile afeta a maneira como os aplicativos remotos são acessados e distribuídos em dispositivos móveis e tablets possibilitando que os usuários se conectem diretamente a aplicativos fáceis e simples de usar com toque na tela através de um navegador da web.

As taxas de adoção de dispositivos móveis e tablets estão disparando, e a estrutura do jQuery Mobile está permitindo aos desenvolvedores atender a demanda crescente por essas experiências da web remotas aumentando a velocidade à qual os websites remotos podem ser produzidos.

Em particular, o jQuery Mobile inclui uma estrutura de tema que pode ser facilmente customizada. A habilidade de customizar amostras de cores e conjuntos de ícones fornece temas customizados de páginas, barras de ferramentas, conteúdo, elementos de formulário, listas, botões, etc. Este artigo fornece uma breve visão geral de como criar um tema customizado para cada um desses tipos de elemento do jQuery Mobile. Temas customizados permitem criar versões para dispositivos móveis de websites que seguem a mesma marca que suas versões para desktop.

Criação de temas do jQuery Mobile

O jQuery Mobile tem uma estrutura de página recomendada, mas opcional, para aplicativos da web padrão que inclui algumas construções comuns, como um elemento de página que contém elementos de cabeçalho, conteúdo e rodapé. Para definir esses elementos, a estrutura do jQuery Mobile usa o atributo data-role de HTML5. Lista 1 mostra um exemplo do modelo HTML recomendado do jQuery Mobile usando data-role para cada elemento principal.

Lista 1. Um elemento usando data-role da página
<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div>

	<div data-role="content">
		<p>Page content goes here.</p>		
	</div>

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
	
</div>

Outro elemento importante e recomendado é uma tag <meta viewport> . Essa tag especifica como um navegador deve exibir o website remoto. O código a seguir mostra como adicionar uma tag <meta> para definir viewport para dispositivos móveis:

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

A tag <meta viewport> é importante para renderizar sua página da web remota adequadamente com base no dispositivo que a está acessando. Sem essa tag, sua página da web pode aparecer pequena, ou com zoom reduzido, uma vez que muitas páginas da web que não foram desenvolvidas para dispositivo móvel serão exibidas. Figura 1 mostrar uma página da web remota que usa a tag <meta viewport> e exibe o conteúdo de maneira mais adequada ao dispositivo sendo usado.

Figura 1. Uma página da web remota usando a tag <meta viewport>
Uma página da web remota usando a tag <meta viewport>

A estrutura do jQuery Mobile inclui um sistema de criação de tema de página que fornece controle total sobre o visual e o estilo dos elementos de página. O atributo data-theme de HTML5 pode ser adicionado a um elemento para aplicar uma amostra de cor de tema existente do jQuery Mobile ou uma nova amostra de cor. O sistema de criação de tema inclui cinco amostras, usando uma letra para identificar cada uma—por exemplo, A-E são as amostras que a estrutura do jQuery Mobile fornece nativamente. É possível visualizar as amostras existentes efetuando o download do arquivo CSS que a estrutura do jQuery Mobile fornece. Para criar uma nova amostra, é possível usar qualquer letra do alfabeto que ainda não esteja sendo usada (ou seja, F-Z). Depois de determinar a letra que gostaria de usar, é possível fazer referência a qualquer uma das amostras existentes para copiar e customizar classes para todos os diversos elementos de página.


Criação de tema da página

A criação de tema da página consiste em criar o estilo do elemento HTML que contém toda a página da web. A estrutura de página recomendada do jQuery Mobile consiste em um elemento <div> que inclui um atributo de data-role com um valor para page. Para criar o estilo desse elemento, aplique um atributo de data-theme a ele e especifique um valor único e não utilizado para uma nova amostra, de modo que seja possível escrever um CSS customizado para ele. O código a seguir mostra um exemplo do elemento page usando um valor de data-theme de F:

<div data-role="page" data-theme="f">

Usando esse data-role e data-theme, a estrutura do jQuery Mobile de fato cria e adiciona algumas classes ao elemento page . Aqui está um exemplo de como seria a saída do navegador depois de ser processada pela estrutura:

<div data-role="page" data-theme="f" 
class="ui-page ui-body-f ui-page-active" style="min-height: 580px;">

Como se pode ver, várias classes CSS foram adicionadas ao elemento page . As classes ui-page e ui-page-active foram atribuídas com base no valor de data-role de page, e a classe ui-body-f foi atribuída com base no valor de data-theme de F. É possível usar qualquer uma dessas classes para definir estilo do elemento page ou os seus conteúdos. Lista 2 mostra um exemplo de como usar a classe ui-body-f para adicionar criação de estilo customizado ao elemento page .

Lista 2. Criação de estilo do elemento page do jQuery Mobile usando CSS
.ui-body-f {
  background-color: #f9f9f9;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
}

O CSS customizado adicionado a essa classe define a cor do plano de fundo e a fonte utilizada na página da web remota. Quando tiver criado sua amostra de página, é possível ser mais específico com os elementos HTML que deseja ter como destino e estilizar. Por exemplo, Lista 3 mostra como ter como destino e estilizar o texto de entrada e os campos de senha que aparecem dentro do elemento page .

Lista 3. Estilizando todo o texto de entrada e campos de senha que aparecem dentro do elemento page
.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] {
  background-color: #ccc;
}

As possibilidades são infinitas depois de ter obtido controle sobre o elemento page . Com esse elemento de contenção dos conteúdos da página da web, é possível verdadeiramente ter como destino e customizar qualquer elemento.


Criação de tema da barra de ferramentas

Na estrutura do jQuery Mobile, as barras de ferramentas são os elementos de cabeçalho e rodapé. Para definir uma barra de ferramentas como cabeçalho ou rodapé, usa-se o atributo data-role . O valor do atributo data-role deve ser header ou footer , dependendo do elemento que está sendo criado. Lista 4 fornece um exemplo das barras de ferramentas de cabeçalho e rodapé incluídas dentro de um elemento page .

Lista 4. Usando as barras de ferramentas de cabeçalho e rodapé
<div data-role="header">
	<h1>Page Title</h1>
</div>

<div data-role="footer">
	<h4>Page Footer</h4>
</div>

Atribuir um tema a uma barra de ferramentas é tão fácil quanto usar o atributo data-theme e atribuir a ele um valor de amostra customizado. Por padrão, as barras de ferramentas de cabeçalho e rodapé recebem a amostra de cor a para mostrar a hierarquia visual. Aqui está um exemplo de um tema customizado atribuído à barra de ferramentas de cabeçalho:

<div data-role="header" data-theme="f">
	<h1>Page Title</h1>
</div>

Para estilizar este tema, é preciso criar uma nova classe CSS para a barra (Lista 5).

Lista 5. Estilizando a barra de ferramentas de cabeçalho
.ui-bar-f {
  padding: 10px 0px;
  background-color: #069;
  border-bottom: 2px solid #036;
  color: #fff;
}

Essa nova classe CSS customizada estiliza todas as barras de ferramentas que têm F data-theme aplicado. Entretanto, frequentemente há momentos em que você gostaria que seu cabeçalho e rodapé tivessem uma aparência diferente. Para obter essa diferença, é preciso criar um novo tema personalizado —atribua a ele o nome de G—e criar uma nova classe CSS para estilizá-lo (Lista 6).

Lista 6. Adicionando uma classe CSS customizada para a barra de ferramentas do rodapé
.ui-bar-g {
  margin-top: 20px;
  padding: 10px 0;
  color: #fff;
  border-bottom: 2px solid #000;

  background-color: #000;
  background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,0.65) 100%); 
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,
  rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', 
  endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* W3C */
}

O tema da barra de ferramentas G define algumas propriedades básicas, mas também inclui diversos gradientes complexos para diferentes navegadores. Esses gradientes são intimidadores, mas, felizmente, não é preciso memorizá-los para criá-los, uma vez que há websites que os gerarão para você. Assim, é possível simplesmente copiar e colar o código na sua classe CSS. Visite a seção Recursos deste artigo para obter um link para gerar gradientes para o seu website.


Criação de temas de conteúdo

O elemento content pode ter um tema definido para a amostra customizada de sua escolha. Para criar uma amostra customizada para o conteúdo no seu website remoto, é preciso criar primeiro um elemento content (Lista 7).

Lista 7. Adicionando um bloco redutível ao elemento content
<div data-role="collapsible" data-collapsed="true" data-theme="f">
    <h3>>Login</h3>
    Login form will go here
</div>

Esse bloco será recolhido quando a página for carregada. Quando um usuário clica na barra de título, ela revelará o formulário de login que você criará em breve. Para criar o estilo desse bloco, simplesmente atribua um data-theme para ele e crie uma classe CSS customizada. Lista 8 fornece um exemplo de algumas classes customizadas associadas com o bloco redutível e seus conteúdos.

Lista 8. Classes CSS customizadas associadas com a barra de títulos para o bloco redutível
ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-up-f {
  background: #666;
  color: #fff;
  text-decoration: none;
}
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-down-f, 
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-hover-f {
  background: #999;
  color: #fff;
  text-decoration: none;
}

Essas classes CSS definem o estado não ativo, ativo e flutuante da barra de título redutível. A tag <h3> da Lista 7 é convertida em um <h3> com uma classe ui-collapsible-heading ; o texto contido—neste caso, "Login"—é convertido em um hyperlink com algumas classes, dependendo do estado. As três classes para o hyperlink são ui-btn-up-f, ui-btn-down-f e ui-btn-hover-f. Cada uma dessas classes é autoexplicativa, cobrindo o estado para cima, para baixo e suspenso da barra de títulos para o bloco de conteúdo redutível. As classes mudam dependendo do valor de data-theme , assim, essas classes incluem um F anexado no final; se você fosse usar um valor de data-theme de G, as classes teriam um G anexado ao final no lugar de F.


Tema da lista

Listas são comuns em páginas da web remotas porque fornecem uma maneira de rapidamente mostrar opções para as pessoas enquanto elas estão em movimento. Para converter uma lista HTML regular em uma lista remota sofisticada que seja fácil de usar em dispositivos sensíveis ao toque, tudo o que se precisa fazer é definir o atributo data-role para listview, conforme mostrado na Lista 9.

Lista 9. Convertendo uma lista HTML simples em uma lista fácil e simples de usar com toque
<ul data-role="listview" data-inset="true" data-theme="f">
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
</ul>

Por padrão, a lista aparece com a largura total da janela do navegador, como a Figura 2 mostra.

Figura 2. A aparência padrão de uma visualização de lista no jQuery Mobile
A aparência padrão de uma visualização de lista no jQuery Mobile

Entretanto, se você desejar inserir os itens da lista e arredondar os cantos, é possível usar o atributo data-inset e definir seu valor para verdadeiro, como mostrado na Figura 3.

Figura 3. Uma visualização de lista com o atributo data-inset definido para verdadeiro
Uma visualização de lista com o atributo data-inset definido para verdadeiro

Adicionar um tema a uma listview é fácil. Como você fez com todos os outros temas, simplesmente atribua um valor de data-theme . Lista 9 usou F como o valor do tema. Para customizar os itens da lista, é preciso tê-los como destino com CSS, como a Lista 10 mostra.

Lista 10. Customizando os itens da lista
.ui-listview .ui-btn-up-f a, 
.ui-listview .ui-btn-down-f a, 
.ui-listview .ui-btn-hover-f a {
  color: #fff;
}

Os elementos que você está definindo como destino com CSS na Lista 10 são os hyperlinks reais dentro dos itens da lista para definir a cor do texto para branco. As classes ui-btn-up-f, ui-btn-down-f e ui-btn-hover-f são todas injetadas pelo jQuery Mobile para manipular os diferentes estados dos itens da lista.


Tema de formulário e botão

Você cria um formulário para um website remoto usando a estrutura do jQuery Mobile da mesma maneira que faria para qualquer website: simplesmente adicione elementos de entrada e rótulos associados, o que assumirão o tema da página existente. Lista 11 dá um exemplo.

Lista 11. Criando um formulário remoto
<div data-role="collapsible" data-collapsed="true" data-theme="f">
  <h3>>Login</h3>
  <form action="" method="post">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" />
    <label for="username">Password</label>
    <input type="password" name="password" id="password" />
    <fieldset class="ui-grid-a">
      <div class="ui-block-a">
        <button type="reset" data-inline="true">Reset</button>
      </div>
      <div class="ui-block-b">
        <button type="submit" data-inline="true" data-theme="f">Submit</button>
      </div>
    </fieldset>
  </form>
</div>

Os elementos do formulário também podem ter um tema personalizado. Lista 12 mostra um exemplo de como um formulário é estilizado usando o tema F do seu elemento page .

Lista 12. Criação de estilo customizado para os elementos de entrada usados no seu formulário de login
.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] {
  background-color: #ccc;
}

Na Lista 11, você provavelmente observou fieldset com o código do botão customizado. Cada botão tem um tema diferente associado a ele: o botão Reset usa o tema padrão, enquanto o botão Submit usa o tema F . A Lista 13 mostra as classes CSS customizadas criadas para esses dois botões para torná-los diferentes em aparência.

Lista 13. Classes CSS customizadas para botões de formulário
.ui-btn-up-f {
  background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%, 
  rgba(78,137,197,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396b9e', 
  endColorstr='#a64e89c5',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* W3C */
  border: 1px solid #225377;
  text-shadow: #225377 0px -1px 1px;
  color: #fff;
}
.ui-btn-down-f, 
.ui-btn-hover-f {
  background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%, 
  rgba(75,136,182,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%,
  rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
  /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%,
  rgba(75,136,182,0.65) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72b0d4', 
  endColorstr='#a64b88b6',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
  /* W3C */
  border: 1px solid #00516E;
  text-shadow: #014D68 0px -1px 1px;
  color: #fff;
}

Como você pode ver, o botão Save tem um gradiente associado a ele que o faz se destacar mais que o botão Reset . Usar diversos temas para conjuntos de botões é uma boa maneira de identificar qual botão é o mais importante ou o botão principal.


Conclusão

Criar um tema para um website fácil e simples de usar com toque com a estrutura jQuery Mobile é fácil depois que você entende o atributo data-theme e os elementos que a estrutura fornece. Com a adição do atributo data-theme , é possível atribuir valores customizados e classes CSS customizadas associadas que permitirão a criação de websites fáceis e simples de usar com toque usando a estrutura do jQuery Mobile. Para saber mais sobre a estrutura, consulte a seção Recursos ou, ainda melhor, teste algum CSS customizado você mesmo usando o código de amostra da seção Download .


Download

DescriçãoNomeTamanho
Sample jQuery Mobile webpagejquery-mobile-custom-themes.zip4KB

Recursos

Aprender

Obter produtos e tecnologias

  • Faça o download do jQuery Mobile a partir do site da estrutura de jQuery Mobile.
  • Faça o download e experimente o IBM Mobile Technology Preview, um conjunto de amostras de código e serviços para ajudá-lo a começar a desenvolver aplicativos remotos que ampliam e se integram à sua empresa. A visualização inclui um serviço de notificação RESTful; PhoneGap, uma estrutura de software livre para o desenvolvimento de aplicativos híbridos remotos; um tempo de execução WebSphere Application Server leve; e amostras de código para que você possa ver como tudo funciona.
  • O IBM WebSphere Application Server Feature Pack para Web 2.0 e Dispositivo móvel inclui o IBM Dojo 1.7 Toolkit, novos blocos de construção rich Internet application (RIA) e remoto e um componente de diagrama com base em Dojo. Com as ferramentas acompanhantes do Rational, o Feature Pack o ajuda e adaptar e implantar aplicativos WebSphere desenvolvidos originalmente para navegadores desktop em dispositivos móveis.
  • Avalie os produtos IBM da maneira que for melhor para você: faça download da versão de teste de um produto, avalie um produto on-line, use-o em um ambiente de nuvem ou passe algumas horas na SOA Sandbox aprendendo a implementar Arquitetura Orientada a Serviços de modo eficiente.

Discutir

  • Participe da Comunidade do developerWorks. Entre em contato com outros usuários do developerWorks e explore os blogs, fóruns, grupos e wikis voltados para desenvolvedores.

Comentários

developerWorks: Conecte-se

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


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

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

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=784658
ArticleTitle=Criar temas customizados de dispositivos móveis em jQuery
publish-date=01162012