Para aqueles que estão cansados de quebrar a cabeça pensando nas formatações front-end de seus sites, que não aguentam mais terem que pensar em formatações como: tipografia de parágrafos, cabeçalhos, links e afins, conheçam o Bootstrap .
Bootstrap nada mais é que, um pacote de elementos e funções personalizáveis que servem para te auxiliar na criação do seu site, tornando muito mais fácil o desenvolvimento front-end da página.
Ele traz como benefícios aos desenvolvedores, códigos tornam sua página responsiva, te ajudam a implementar menus dropdown, slideshows, entre muitas outras coisas, de maneira bem mais simples e rápida, poupando os desenvolvedores das dores de cabeças na hora da criação do site.
Uma breve história sobre o Bootstrap
Bootstrap foi criado como uma solução interna que resolveria inconsistências de desenvolvimento dentro da equipe de engenharia do Twitter, pois eles não haviam uma estrutura base de desenvolvimento da plataforma. O intuito do Bootstrap era fazer com que toda a equipe trabalhasse com maior rapidez e eficiência, e com isso, menos inconsistências seriam geradas no desenvolvimento dos códigos.
Percebendo que isso podia fazer a diferença não só dentro do próprio Twitter, o Bootstrap foi lançado como um projeto de software livre no Github em Agosto de 2011, e em apenas alguns meses se tornou o projeto de desenvolvimento de software livre mais ativo do mundo, e vem se tornando cada vez mais conhecido.
Como adicioná-lo em meu website?
Para adicionar o Bootstrap em seu website, você precisa primeiramente, baixá-lo no link (http://getbootstrap.com/2.3.2/) e depois basta adicioná-lo em seu código HTML, por meio de link de referência comum no header ou em qualquer outro lugar do código onde você desejar, lembre-se de após adicionar o Bootstrap, adaptar os IDs e Classes do seu código, aos mesmos IDs e Classes do Bootstrap, durante o desenvolvimento do seu website.
Lembrando que o Bootstrap é gratuito, então não há nenhum problema em adicioná-lo ao seu projeto.
sábado, 14 de maio de 2016
sexta-feira, 13 de maio de 2016
Escondendo o que não é tão necessário
Vamos ser diretos: às vezes algum elemento que colocamos no site pode não ser tão útil, relevante ou necessário caso visto num dispositivo menor.
Vamos pensar assim: geralmente, por questões de estética, colocamos no site algumas imagens, banners, textos destacados, entre outros elementos que tem o objetivo de deixar o site mais dinâmico, e preencher possíveis espaços que ficariam em branco numa tela grande para chamar um pouco mais de atenção de quem acessa. Entretanto, quando acessados de algum dispositivo móvel, mesmo que os elementos tenham sido bem organizados para caber na tela, podem ficar fora do contexto que eles apresentam na tela maior, e darem a impressão de estarem desconexos. Pensando nisso, é necessário pensar no quanto aquele elemento é relevante para quem vai acessar o site de uma tela menor.
Por exemplo: acessando do notebook, o site tem um espaço para banner grande, talvez até com mais de uma imagem sendo mostrada alternadamente. Será que no tablet ou no celular ele é tão importante, ou será que não vai ocupar um espaço na tela onde eu já poderia mostrar algum texto que seja mais importante? Pois é.
Para exemplificar, vamos ao código abaixo:
HTML:
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ex elit, pulvinar ut mattis a, feugiat sit amet lorem. Ut nisi arcu, cursus vel est id, pulvinar laoreet nulla. Sed egestas fringilla tellus, vel fermentum ex feugiat id. Donec vel porta arcu. Praesent eget sollicitudin eros. Aenean vitae erat nec massa aliquet tempor.
</div>
<img class='imgOpcional' src='imagens/tcc.jpg' />
<div>
Quisque consectetur felis vel est ultricies tristique. Vestibulum finibus dignissim cursus. Nam efficitur dapibus dictum. Mauris nec orci nec mauris pulvinar rutrum. Vestibulum interdum, diam ut lobortis ultrices, orci erat accumsan diam, quis accumsan ante augue rhoncus orci.
</div>
</body>
CSS:
.imgOpcional {
height: 500px;
}
div {
border: 1px solid #000000;
}
Como resultado nas diferentes telas temos o seguinte:
Como podemos ver o resultado fica desastroso, para falar no mínimo. A imagem fica grande, gera barra de rolagem, o texto abaixo da imagem fica escondido até rolarmos a página para baixo, e por aí vai.
Como vimos em posts anteriores, nós poderíamos tratar essa imagem de diferentes formas, talvez a primeira ideia que vem à cabeça de muitos é redimensionar a imagem, o que é uma possibilidade.
Agora vamos nos questionar: essa imagem realmente é necessária? Pois é, talvez não seja tanto. Ela dá uma beleza para o site, mas não é realmente relevante para a mensagem que queremos passar. Assim sendo, podemos fazer o seguinte:
CSS:
div {
border: 1px solid #000000;
}
.imgOpcional {
max-width: 50%;
}
@media screen and (max-width: 640px) {
.imgOpcional {
display: none;
}
}
Agora temos uma eficiência melhor no que se trata de passar uma informação e "despoluir" um pouco o site num celular, por exemplo.
Alguns podem pensar: poxa, mas sem imagem o site fica tão feio.
Talvez, mas como queremos reforçar sempre, a ideia não é definir padrões nem regras de layout, mas sim mostrar possibilidades e como o conceito de design responsivo pode nos ajudar. Nós podemos dar uma infimidade de tratamentos diferentes para esse caso: mostrar a imagem em 100% na tela na vertical e sumir com ela na horizontal, diminuir a altura dela em um ou nos dois casos, fazer a imagem grande ficar oculta e mostrar uma imagem menor que fique oculta em telas maiores, e por aí vai. O que importa é ter em mente a ideia de como deixar nosso site o mais acessível possível para nosso público, independente do lugar de onde ele nos acesse.
Como vimos em posts anteriores, nós poderíamos tratar essa imagem de diferentes formas, talvez a primeira ideia que vem à cabeça de muitos é redimensionar a imagem, o que é uma possibilidade.
Agora vamos nos questionar: essa imagem realmente é necessária? Pois é, talvez não seja tanto. Ela dá uma beleza para o site, mas não é realmente relevante para a mensagem que queremos passar. Assim sendo, podemos fazer o seguinte:
CSS:
div {
border: 1px solid #000000;
}
.imgOpcional {
max-width: 50%;
}
@media screen and (max-width: 640px) {
.imgOpcional {
display: none;
}
}
Agora, ao abrir o site, vamos ver o seguinte:
Alguns podem pensar: poxa, mas sem imagem o site fica tão feio.
Talvez, mas como queremos reforçar sempre, a ideia não é definir padrões nem regras de layout, mas sim mostrar possibilidades e como o conceito de design responsivo pode nos ajudar. Nós podemos dar uma infimidade de tratamentos diferentes para esse caso: mostrar a imagem em 100% na tela na vertical e sumir com ela na horizontal, diminuir a altura dela em um ou nos dois casos, fazer a imagem grande ficar oculta e mostrar uma imagem menor que fique oculta em telas maiores, e por aí vai. O que importa é ter em mente a ideia de como deixar nosso site o mais acessível possível para nosso público, independente do lugar de onde ele nos acesse.
Assinar:
Postagens (Atom)