Design de aplicativo móvel / Dev Custom Temas com jQuery Mobile
Em nosso tutorial anterior do jQuery Mobile, eu havia introduzido muito do framework subjacente e como configurar o seu primeiro site. A biblioteca JS é leve e fácil de ser capturada em relação à dificuldade de aprendizado. Há também uma folha de estilos CSS genérica incluída nos arquivos para que você possa personalizar ainda mais os elementos em seu layout.
Para este segundo segmento, eu gostaria de gastar um pouco de tempo aprofundando essa ideia de temas do jQuery Mobile. Toda a indústria do design foi revolucionada pelo jQM e o processo de construção de um modelo móvel a partir do zero foi significativamente melhorado. O jQuery Mobile não é apenas uma biblioteca de scripts, mas todo um framework básico para desenvolver e produzir modelos móveis eficientes.
Conteúdo da folha de estilo padrão
Eu deveria começar esclarecendo exatamente que tipo de código CSS está incluído nos arquivos padrão. A folha de estilo do jQM 1.0 foi dividida em dois segmentos principais - estrutura e temas.
O código da estrutura é o material que você pode ignorar. Isso é usado para definir margens, preenchimento, altura / largura, variantes de fonte, juntamente com muitos outros padrões do navegador. Os temas internos são então divididos em A-E, cada um controlando diferentes efeitos visuais em seu design. Isso pode incluir cores de fundo, gradientes, sombras, etc..
Cada um desses elementos do tema interno também pode ser chamado de amostras. Quando você cria um modelo para celular, geralmente fica com um único tema. Mas em quase todos os cenários, o design pode ser melhorado com diferentes esquemas de cores. A folha de estilo padrão inclui apenas amostras A-E, mas você pode criar amostras F-Z para adicionar outras 21 alternativas à sua biblioteca de temas. Apenas para esclarecer esses termos novamente tema é considerado um único arquivo CSS que pode incluir até 26 diferentes amostras rotulado A-Z.
Estilos de comutação
Se você não escolher especificar nenhuma amostra, o jQuery Mobile ficará na amostra A por padrão. Se você ainda não sabia, os documentos do jQuery Mobile utilizam atributos de dados HTML5 para muitas funções internas. Uma delas inclui a alteração de amostras por meio do atributo data-theme. Confira meu exemplo de código abaixo para ver o que quero dizer.
Página padrão do jQM
Aqui está algum conteúdo interno.
Observe que coloquei o atributo data-theme na div da página raiz. Isso significa que a nova cor da amostra afetará tudo, incluindo as áreas de cabeçalho e conteúdo. Eu poderia incluir adicionalmente data-theme = "c" no div do cabeçalho para alterar apenas esse conteúdo do resto da minha página.
Componentes de uma amostra
Deve ser bastante simples como implementar essas amostras diferentes em um único layout. Então, vamos dar uma olhada no código CSS do jQM para que possamos dividir os componentes individuais de uma amostra. Confira o mais recente arquivo jQuery Mobile 1.4.5 CSS hospedado em seu próprio CDN.
Você deve observar como cada amostra é separada por um comentário distinto e cada uma das classes internas termina com a letra apropriada. Por exemplo .ui-bar-a e .ui-body-a são aplicadas nas barras de cabeçalho / rodapé e nas áreas de conteúdo por padrão. A maioria das propriedades está implementando uma redefinição nas cores de fontes e links, gradientes de plano de fundo e outros detalhes pequenos. Eu incluí simplesmente o ui-bar-a códigos para dar uma ideia de quais elementos segmentamos.
/* UMA ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a borda: 1px sólido # 2A2A2A; fundo: # 111111; cor: #ffffff; intensidade da fonte: Negrito; text-shadow: 0 / * a-bar-sombra-x * / -1px / * a-bar-sombra-y * / 1px # 000000; background-image: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, de (# 3c3c3c), para (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / imagem de fundo: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / background-image: -o-linear-gradiente (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: gradiente linear (# 3c3c3c, # 111); .ui-bar-a, entrada .ui-bar-a, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-um botão font-family: Helvetica, Arial, sans- serif; .ui-bar-a .ui-link-herdar color: #fff; .ui-bar-a .ui-link cor: # 7cc4e7 / * a-bar-link-color * /; intensidade da fonte: Negrito; .ui-bar-a .ui-link: hover cor: # 2489CE / * a-bar-link-hover * /; .ui-bar-a .ui-link: active cor: # 2489CE / * a-bar-link-active * /; .ui-bar-a .ui-link: visitou cor: # 2489CE / * a-bar-link-visited * /;
Se você está apenas procurando criar uma amostra personalizada, recomendo basear o modelo em um dos originais. O processo será muito mais fácil se você começar a escrever códigos em um novo documento CSS. Você não terá o incômodo de edição no arquivo original e você pode começar a trabalhar em uma ardósia limpa. Mas as áreas-chave que você deseja focar incluirão o seguinte:
- barras de cabeçalho e rodapé
- conteúdo do corpo e texto da página
- estilos de lista
- botão estados padrão / passar o mouse / ativo
- controles de entrada de formulário (extra)
Codificando um novo design de barra
A partir do mesmo arquivo CSS vimos anteriormente copiar / colar todo o código da amostra A (linhas 12-150) em um novo arquivo. Podemos usar o nome de amostra G para implementar esses novos estilos. Agora, depois de copiar o código, você quer renomear cada instância da classe que termina em -uma para -g, como é assim que o jQuery Mobile irá reconhecer quais estilos usar.
Gostaria de começar a redesenhar a barra de cabeçalho bg para imitar um gradiente iOS mais familiar. Isso pode ser feito somente dentro do .ui-bar-g selector. Queremos editar as propriedades de plano de fundo e imagem de plano de fundo para alterar os efeitos do gradiente. Confira meu código abaixo e uma tela de demonstração do novo gradiente.
.ui-bar-g fronteira: 1px sólido # 2d3033 / * a-bar-border * /; borda esquerda: 0px; borda direita: 0px; fundo: # 6d83a1; cor: #fff / * a-bar-color * /; intensidade da fonte: Negrito; text-shadow: 0 / * a-barra-sombra-x * / -1px / * a-bar-sombra-y * / 1px / * a-bar-sombra-raio * / # 3e4957; background-image: -webkit-gradient (linear, 0% 0%, 0% 100%, de (# b4bfce), cor-stop (0.5, # 899cb3), cor-stop (0.505, # 7e94b0), para (# 6d83a1)); background-image: -webkit-linear-gradient (superior, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradiente (superior, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / imagem de fundo: -ms-linear-gradiente (superior, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-gradiente linear (superior, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: gradiente linear (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);
Estou usando o esquema de cores azul encontrado na maioria dos aplicativos iOS padrão. Meu plano de fundo é inicialmente definido como uma cor sólida para dispositivos que não podem renderizar gradientes de CSS3. Então abaixo eu estou usando as paradas de cor ao redor do marcador de 50% para recriar o tradicional efeito de brilho lustroso da Apple. Também dentro do mesmo seletor eu modifiquei ligeiramente a sombra do texto com uma cor e um intervalo mais sutis.
Botões e Efeitos de Texto
É importante, ao codificar amostras, considerar especificamente quais áreas da interface precisam de atenção. A barra de cabeçalho fica ótima com esse novo plano de fundo, mas uma última modificação que gostaria de fazer corresponderá aos estilos de botão mais próximos aos dos aplicativos para iOS.
.ui-btn-up-g borda: 1px sólido # 375073; fundo: # 4a6c9b; intensidade da fonte: Negrito; cor: #fff; Sombra de texto: 0 / * a-bup-sombra-x * / -1px / * a-bup-sombra-y * / 1px / * a-bup-sombra-raio * / # 40536d; box-shadow: nenhum; -webkit-box-shadow: nenhum; -moz-box-shadow: nenhum; background-image: -webkit-gradient (linear, 0% 0%, 0% 100%, de (# 89a0be), cor-stop (0.5, # 5877a2), cor-stop (0.505, # 476999), para (# 4a6c9b)); background-image: -webkit-linear-gradient (superior, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradiente (superior, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / imagem de fundo: -ms-linear-gradiente (superior, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-linear-gradiente (superior, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: gradiente linear (superior, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); raio de fronteira: 4 px; -webkit-border-radius: 4 px; -moz-border-radius: 4 px; .ui-btn-up-g .ui-btn-interno, .ui-btn-hover-g .ui-btn-interno, .ui-btn-baixo-g .ui-btn-inner border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; .ui-btn-hover-g fronteira: 1px sólido # 1b49a5; plano de fundo: # 2463de; intensidade da fonte: Negrito; cor: #fff; Sombra de texto: 0 / * a-bup-sombra-x * / -1px / * a-bup-sombra-y * / 1px / * a-bup-sombra-raio * / # 40536d; box-shadow: nenhum; -webkit-box-shadow: nenhum; -moz-box-shadow: nenhum; background-image: -webkit-gradient (linear, 0% 0%, 0% 100%, de (# 779be9), cor-stop (0.5, # 376fe0), cor-stop (0.505, # 2260dd), para (# 2463de)); background-image: -webkit-linear-gradient (superior, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradiente (superior, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / imagem de fundo: -ms-linear-gradiente (superior, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-linear-gradiente (superior, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: gradiente linear (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); raio de fronteira: 4 px; -webkit-border-radius: 4 px; -moz-border-radius: 4 px;
A área de código que estamos editando agora está dentro das classes do botão da interface do usuário. Existem 3 modos diferentes para se preocupar: .ui-btn-up-g, .ui-btn-hover-g, e .ui-btn-down-g. Estou focando principalmente nos efeitos padrão (btn-up) e hover (btn-hover) editando a sombra da caixa e os gradientes lineares. Também expandi o efeito de cantos arredondados para que os botões pareçam mais retangulares.
Por causa disso eu precisei remover o raio da borda interna de uma classe chamada .ui-btn-inner. Essa classe é anexada a um elemento span dentro de cada link de âncora na sua barra de cabeçalho. Sem redefinir as propriedades do raio da borda, você notará pequenas falhas no desenho sempre que passar o mouse sobre um botão. À medida que você passa mais tempo codificando em temas do jQuery Mobile, memoriza essas pequenas nuances para projetos futuros.
Introdução ao ThemeRoller
Se você gosta de colocar as mãos no código, é altamente recomendável seguir as edições personalizadas. Não só você tem mais controle, mas é muito mais fácil depurar problemas dentro do CSS se você mesmo fez todas as edições. Mas, para muitos designers, esse processo é cansativo e levará mais tempo do que o necessário. Felizmente, a equipe do jQuery Mobile lançou um editor on-line sob o nome ThemeRoller.
A partir desta página, você tem acesso para editar as primeiras 3 amostras A-C ou até criar uma das suas próprias. Se você olhar na barra lateral esquerda, poderá alternar entre essas três configurações ou fazer alterações rapidamente nas opções do tema global. Isso inclui propriedades CSS, como raios de borda, sombras de caixa ou fontes de página padrão. Observe que, ao selecionar qualquer uma das amostras predefinidas, podemos editar apenas as mesmas áreas de antes - as barras superior / inferior, o conteúdo do corpo e os 3 estados dos botões.
Mas meu recurso favorito tem que ser o acesso direto a amostras do Adobe Kuler. Você pode criar alguns esquemas de cores na sua conta do Kuler e importá-los para o ThemeRoller. A interface suporta a funcionalidade de arrastar e soltar, por isso é muito simples experimentar algumas ideias diferentes em questão de minutos.
Em última análise, não há um método absoluto de construir corretamente suas amostras de jQM. Alguns designers preferem codificar CSS, enquanto outros vão adorar o intuitivo aplicativo da web ThemeRoller. Contanto que você esteja seguindo a estrutura de classes, então você deve obter os mesmos resultados de qualquer maneira.
Recursos Úteis
- Temas para telemóveis jQuery - Documentação
- Usando e personalizando os temas do jQuery Mobile
