Conhecendo um pouco mais
o Boostrap e Responsividade
Personalização de Textos
• No atual HTML algumas tags foram colocadas como tags extintas ou como tags que usadas mostraria uma má prática de marcação do site, estas tags são <b>, <i>, <u> e <center>.
• A “proibição” do uso dessas tags acima foi substituída pelo uso do CSS para deixar o texto em negrito, itálico, sublinhado ou centralizado.
• Com o Bootstrap é possível personalizar o texto sem a necessidade de usar diretamente o CSS, assim usando apenas algumas tags HTML e classes do Bootstrap para personalização
Personalização de Textos
• O Bootstrap padronizou tags para personalização as tags são, <ins>,
<strong> e <em>.
• Além dessas tags existem também
classes para alinhamento de texto estas
são as classes text e suas derivadas,
estas são as classes textleft, textcenter,
textright, textjustify.
Personalização de Textos
• Funcionalidade das tag’s
– <ins> deixa o texto sublinhado
– <strong> deixa o texto em negrito – <em> deixa o texto em itálico
• Funcionalidade das classes
– textleft: deixa o texto alinhado à esquerda – textcenter: deixa o texto centralizado
– textright: deixa o texto alinhado ao centro – textjustify: deixa o texto justificado
Personalização de Textos
• Funcionalidade das tag’s
– <ins> deixa o texto sublinhado
– <strong> deixa o texto em negrito – <em> deixa o texto em itálico
• Funcionalidade das classes
– textleft: deixa o texto alinhado à esquerda – textcenter: deixa o texto centralizado
– textright: deixa o texto alinhado ao centro – textjustify: deixa o texto justificado
Imagens Responsivas
• Para tornar qualquer imagem responsiva, adicione a classe img-responsive à tag
<img>.
• Isso aplicará o CSS max-width: 100% e height: auto.
• Dessa forma, qualquer imagem será
redimensionada de forma proporcional,
conforme o tamanho da tela.
Tabelas Estilizadas e Responsivas
• Para criar tabelas, adicione a classe table à tag table. Isso fará com que a tabela ocupe a largura toda.
• Também existem outras classes que podem ser adicionadas, como table-striped, para alternar a cor de cada linha, facilitando a visualização, ou table-bordered, para criar tabelas com bordas.
• Para tornar uma tabela responsiva, coloque-a toda dentro de uma div com a classe table- responsive. Dessa forma, uma barra de rolagem horizontal será gerada automaticamente, sempre que necessário.
Mais sobre o sistema de Grid
• O sistema de grid consiste em 12 colunas, que podem ser divididas de forma diferente, conforma o tamanho da tela.
• Essa divisão é que proporciona a responsividade do Bootstrap.
• Por exemplo, em telas grandes, você pode
exibir as 12 colunas. Em um tela de celular,
essas 12 colunas podem ser dividias em 3
linhas de 4 colunas.
Mais sobre o sistema de Grid
Mais sobre o sistema de Grid
• Para usar esse sistema de grids da forma correta, precisamos seguir algumas “regras”:
1. Todas as linhas devem estar dentro de um elemento com a classe container, para correto alinhamento;
2. Para criar uma linha, use uma elemento HTML com a classe row;
3. Todo conteúdo deve estar dentro de colunas e elas devem ser os únicos elementos filhos de um linha (row);
4. Cada coluna é criada com um elemento HTML com a classe 5. col-<tamanho_tela>-<numero_colunas>, onde
<tamanho_tela> é a abreviação referente ao tamanho da tela que está sendo usada para acessar o site e
<numero_colunas> é o número de colunas que o elemento deve ocupar.
Mais sobre o sistema de Grid
• Os tamanhos de tela podem ser:
– xs (extra small): telas muito pequenas, como de smartphones;
– sm (small): telas de tablets na vertical;
– md (medium): telas de tablets na horizontal;
– lg (large): telas de computadores desktop.
• A quantidade de colunas em uma linha deve
somar sempre 12.
Mais sobre o sistema de Grid
• Exemplos:
• A linha terá sempre 12 colunas, independente do dispositivo. Por isso usamos o tamanho xs.
Mais sobre o sistema de Grid
• Exemplos:
• A linha será igual também em dispositivos de tela grande e pequenas, mostrando 3 colunas.
Mais sobre o sistema de Grid
• Exemplos:
• Em dispositivos de tela grande, mostra 3 colunas. Porém, em dispositivos menores, a linha será dividida, mostrando uma coluna abaixo da outra. Isso acontece pois usa-se a classe col-md-4, que faz com que a div ocupe 4 colunas em dispositivos de tela grande e média. Mas foi usado col-sm-12, que diz que, em dispositivos pequenos e muito pequenos, o elemento deve ocupar 12 colunas, ou seja, a linha inteira.
Mais sobre o sistema de Grid
Viewport
• Os smartphones modernos têm telas grandes e resoluções altas, justamente para nos permitir ver sites complexos feitos para Desktop.
• A tela de um iPhone 4S por exemplo é 960px por 640px.
Celulares Android já chegam a 1280px, o mesmo de um Desktop.
• Ainda assim, a experiência desses celulares é bem diferente dos Desktops. 1280px em uma tela de 4 polegadas é bem diferente de 1280px em um notebook de 13 polegadas. A resolução muda. Celulares costumam ter uma resolução em dpi bem maior que Desktops.
Viewport
• Os smartphones sabem que considerar a tela como 1280px não ajudará o usuário a visualizar a página otimizada para telas menores.
• Há então o conceito de device-width que, resumidamente, representa um número em pixels que o fabricante do aparelho considera como mais próximo da sensação que o usuário tem ao visualizar a tela.
• Nos iPhones, por exemplo, o device-width é considerado como 320px, mesmo com a tela tendo uma resolução bem mais alta.
• Por padrão, iPhones, Androids e afins costumam considerar o tamanho da tela visível, chamada de viewport como grande o suficiente para comportar os Sites Desktop normais.
Viewport
• A Apple criou então uma solução que depois foi copiada pelos outros smartphones, que é configurar o valor que julgarmos mais adequado para o viewport:
<meta name="viewport" content="width=320">
• Isso faz com que a tela seja considerada com largura de 320px, fazendo com que nosso layout mobile finalmente funcione e nossas media queries também.
• Melhor ainda, podemos colocar o viewport com o valor device-width definido pelo fabricante, dando mais flexibilidade com dispositivos diferentes com tamanhos diferentes:
<meta name="viewport" content="width=device-width">
Estudo aprofundado
• Leia o material do site da disciplina sobre Responsividade na seção de materiais “Bootstrap”
• Faça uma pesquisa sobre
Mobile First x Desktop First
• Faça o exercício de Bootstrap!!!
Testando a Responsividade
de sua aplicação
Teste Responsivo
• A maior parte das ferramentas gratuitas são para testes de URL, ou seja, seu site já deverá estar hospedado.
• Em sua maioria, os testes consistem em digitar a URL do site e a ferramenta testa a responsividade em diferentes formatos, tipos e tamanhos de telas.
• Ferramentas mais completas podem fornecer relatórios analíticos sobre o seu site, como performance, velocidade, nível de responsividade, dentre outros.
Insumo dos testes
• Sites sugeridos com responsividade:
1. http://www.devmedia.com.br
2. http://www.gamesgames.com.br 3. http://www.submarino.com.br
• Site sugerido com problemas de
responsividade:
1. http://www.siuniverso.com.br
Google’s Mobile-Friendly Test
https://bit.ly/2X614UQ
• Super simples. Para saber a visão do Google e testar a versão mobile do seu site, basta inserir o endereço do seu site na caixinha e pressionar enter.
• Ele irá gerar um relatório que mostrará se seu site é amigável aos dispositivos móveis ou não. O resultado é bastante intuitivo.
Mobile Teste Me
http://mobiletest.me/
• Ferramenta gratuita que permite a simulação de navegação mobile. Após fazer um registro breve, você terá acesso a simulação de diversos dispositivos, como Kindle ou Iphone 6, passando por modelos mais antigos como o Blackberry qwerty.
• Faça login e escolha um dispositivo entre os vários disponíveis.
PageSpeed Insights
https://developers.google.com/
speed/pagespeed/insights/
• Nesta solução, também do Google, você tem uma análise mais detalhada do seu site (poderá escolher entre a avaliação da versão mobile e desktop).
• O PageSpeed Insights, além de mostrar os pontos fortes e fracos da sua página, oferece instruções com exemplos do seu próprio site para corrigir problemas.
Responsinator
http://www.responsinator.com/
Screenfly
http://quirktools.com/screenfly/
Screenfly
WireFrames
CodeoRama
http://www.codeorama.com/responsive/
Multi Screen Test
http://whatismyscreenresolution.net
Uma solução Local
• O Google foi talvez o mais interessado e até pioneiro em fornecer facilidades ao desenvolvedor testar sua aplicação web em todos os detalhes necessários, como visualizar em tempo de execução seus elementos “escondidos” e posicionados, bem como a própria responsividade.
• O Google Chrome foi o navegador pioneiro em fornecer a ferramentas que auxiliam na produção e testes de webapps, disponível na opção “Ferramentas do desenvolvedor”
(Chrome DevTools)
• Com o botão direito em cima do site, você acessa pela opção “Inspecionar” (no Firefox – “Inspecionar Elemento”)
