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.
sábado, 30 de abril de 2016
Formulário também precisam ser readaptáveis
Formulários sempre exigem um pouco de atenção quando são construídos, por terem diferentes tipos de campos que tem tamanhos e formatos variados, mas quando falamos de aplicar design responsivo em um formulário, não é algo assim tão complicado. Caso você tenha lido o post anterior sobre aplicar media queries junto com porcentagem para aproveitar o espaço da tela (que pode ser lido clicando aqui), esse post vai ser bem fácil também.
Primeiro vamos ver o código abaixo e o resultado que ele gera ao ser acessado:
HTML:
<section class='colunas'>
<form>
<div class='linha'>
<div class='label'><label>Nome</label></div>
<div><input type='text' /></div>
<div class='label'><label>Sexo</label></div>
<div>
<select>
<option value=''>Feminimo</option>
<option value=''>Masculino</option>
<option value=''>Outro</option>
</select>
</div>
</div>
<div class='linha'>
<div class='label'><label>Observações</label></div>
<div><textarea></textarea></div>
<div class='label'><label>Idade</label></div>
<div><input type='text' /></div>
</div>
<div class='linha'>
<div> </div>
<div><input type='submit' /></div>
</div>
</form>
</section>
CSS:
.colunas div > div {
width: 15%;
float: left;
padding: 1px 5px;
box-sizing: border-box;
}
.colunas div.linha {
clear: both;
}
input[type='text'],
input[type='submit'],
select,
textarea {
width: 100%;
}
Resultados:
Como podemos ver, sempre baseado nos nossos exemplos anteriores, o formulário ficará bem aplicado num navegador no desktop ou notebook, mas num celular, por exemplo, tanto na vertical quanto na horizontal o espaço será mal aproveitado e desalinhado. Como podemos fazer um melhor uso desse espaço então? Fácil: media queries e porcentagem. Vamos ver o código, mas usando eles dessa vez:
.colunas div > div {
width: 15%;
float: left;
padding: 1px 5px;
box-sizing: border-box;
}
.colunas div.linha {
clear: both;
}
input[type='text'],
input[type='submit'],
select,
textarea {
width: 100%;
}
@media screen and (max-width: 640px) {
.colunas div > div {
width: 49%;
}
div {
vertical-align: top;
}
}
@media screen and (max-width: 360px) {
.colunas div > div {
width: 100%;
padding: 0px;
}
input[type='text'],
input[type='submit'],
select,
textarea {
margin-bottom: 5px;
}
.label {
background: orange;
}
}
Vendo o resultado, temos um layout mais fluído e melhor aproveitado:
Como sempre reforçado nesse blog, a ideia não é criar um padrão único de formatação, afinal, qual seria a utilidade disso? Teríamos sempre sites acessíveis de qualquer dispositivo, mas sempre com a mesma cara, não teria a mínima graça.
Nossa ideia é sempre mostrar algumas técnicas que podem fazer nossos sites serem mais acessíveis, tanto mostrando coisas que o HTML junto com CSS nos permitem fazer, tanto mostrar que o Design Responsivo está aí com o intuito de facilitar nossa vida como programadores e desenvolvedores web.
Primeiro vamos ver o código abaixo e o resultado que ele gera ao ser acessado:
HTML:
<section class='colunas'>
<form>
<div class='linha'>
<div class='label'><label>Nome</label></div>
<div><input type='text' /></div>
<div class='label'><label>Sexo</label></div>
<div>
<select>
<option value=''>Feminimo</option>
<option value=''>Masculino</option>
<option value=''>Outro</option>
</select>
</div>
</div>
<div class='linha'>
<div class='label'><label>Observações</label></div>
<div><textarea></textarea></div>
<div class='label'><label>Idade</label></div>
<div><input type='text' /></div>
</div>
<div class='linha'>
<div> </div>
<div><input type='submit' /></div>
</div>
</form>
</section>
CSS:
.colunas div > div {
width: 15%;
float: left;
padding: 1px 5px;
box-sizing: border-box;
}
.colunas div.linha {
clear: both;
}
input[type='text'],
input[type='submit'],
select,
textarea {
width: 100%;
}
Resultados:
Como podemos ver, sempre baseado nos nossos exemplos anteriores, o formulário ficará bem aplicado num navegador no desktop ou notebook, mas num celular, por exemplo, tanto na vertical quanto na horizontal o espaço será mal aproveitado e desalinhado. Como podemos fazer um melhor uso desse espaço então? Fácil: media queries e porcentagem. Vamos ver o código, mas usando eles dessa vez:
.colunas div > div {
width: 15%;
float: left;
padding: 1px 5px;
box-sizing: border-box;
}
.colunas div.linha {
clear: both;
}
input[type='text'],
input[type='submit'],
select,
textarea {
width: 100%;
}
@media screen and (max-width: 640px) {
.colunas div > div {
width: 49%;
}
div {
vertical-align: top;
}
}
@media screen and (max-width: 360px) {
.colunas div > div {
width: 100%;
padding: 0px;
}
input[type='text'],
input[type='submit'],
select,
textarea {
margin-bottom: 5px;
}
.label {
background: orange;
}
}
Vendo o resultado, temos um layout mais fluído e melhor aproveitado:
Como sempre reforçado nesse blog, a ideia não é criar um padrão único de formatação, afinal, qual seria a utilidade disso? Teríamos sempre sites acessíveis de qualquer dispositivo, mas sempre com a mesma cara, não teria a mínima graça.
Nossa ideia é sempre mostrar algumas técnicas que podem fazer nossos sites serem mais acessíveis, tanto mostrando coisas que o HTML junto com CSS nos permitem fazer, tanto mostrar que o Design Responsivo está aí com o intuito de facilitar nossa vida como programadores e desenvolvedores web.
Espaçamento de textos
Muitas vezes quando estamos desenhando o layout de um site para desktops pensamos bastante no espaço entre objetos, principalmente entre os textos e as bordas dos blocos onde eles estão contidos, e isso é bom, pois impede que todo o conteúdo do nosso site fique muito próximo, às vezes até colado, ficando com uma cara que não seja agradável de mexer.
Entretanto, como estamos aqui aprendendo a pensar em design responsivo, temos que também pensar nas pessoas que acessarão nosso site em dispositivos móveis, certo? Exato!
Primeiro, vamos considerar o código abaixo:
HTML:
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed accumsan justo. Mauris non pellentesque leo. Nulla orci ipsum, posuere a euismod ut, auctor eu mauris. Suspendisse facilisis ipsum ex, quis ultricies arcu hendrerit eget. Aenean eget placerat eros. Praesent rutrum tincidunt velit, nec posuere urna lobortis sit amet. Cras metus erat, pellentesque vitae eleifend non, gravida eu urna. Nulla dictum vel nunc in ullamcorper. Mauris a odio est. Maecenas dictum orci massa, in dictum neque feugiat sed. Ut ut arcu dictum odio fermentum sagittis.
</div>
</body>
CSS:
div {
border: 1px solid #000000;
padding: 25px;
}
Ele gera o seguinte resultado dos dispositivos:
O resultado fica desalinhado ou desregulado nos dispositivos móveis? Na verdade não, tudo está até que bem no lugar. Entretanto, quando pensamos em design responsivo, é sempre bom aproveitarmos ao máximo o tamanho da tela para darmos o máximo de informação ao usuário na tela sem que ele precise rolar o site (SEMPRE NA VERTICAL, sempre temos que evitar a existência de qualquer barra horizontal nos nossos sites.)
Vamos analisar o código abaixo:
CSS:
div {
border: 1px solid #000000;
padding: 25px;
}
@media screen and (max-width: 640px) {
div {
padding: 20px 10px;
}
}
@media screen and (max-width: 360px) {
div {
padding: 15px 0px;
}
}
E o resultado que isso gera:
Sutil, certo? Sim, a diferença parece pouca, mas às vezes, dependendo do conteúdo ou do texto que temos num bloco, essa diferença pode fazer com que todo o nosso conteúdo seja apresentado de uma vez, facilitando a leitura e diminuindo a necessidade de o usuário rolar o site, o que facilita a navegação.
Essa diminuição de distanciamento nem sempre precisa existir, ou ser tão diminuída a ponto do texto quase tocar as bordas, tudo é relativo e depende de como você quer que seu site seja apresentando, o que queremos reforçar aqui é a ideia de que, se queremos fazer um site que possa ser acessado mais facilmente de qualquer lugar, temos que pensar nos diferentes dispositivos que podem ser usados para acessá-los, e como facilitar o acesso ao seu conteúdo.
Entretanto, como estamos aqui aprendendo a pensar em design responsivo, temos que também pensar nas pessoas que acessarão nosso site em dispositivos móveis, certo? Exato!
Primeiro, vamos considerar o código abaixo:
HTML:
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed accumsan justo. Mauris non pellentesque leo. Nulla orci ipsum, posuere a euismod ut, auctor eu mauris. Suspendisse facilisis ipsum ex, quis ultricies arcu hendrerit eget. Aenean eget placerat eros. Praesent rutrum tincidunt velit, nec posuere urna lobortis sit amet. Cras metus erat, pellentesque vitae eleifend non, gravida eu urna. Nulla dictum vel nunc in ullamcorper. Mauris a odio est. Maecenas dictum orci massa, in dictum neque feugiat sed. Ut ut arcu dictum odio fermentum sagittis.
</div>
</body>
CSS:
div {
border: 1px solid #000000;
padding: 25px;
}
O resultado fica desalinhado ou desregulado nos dispositivos móveis? Na verdade não, tudo está até que bem no lugar. Entretanto, quando pensamos em design responsivo, é sempre bom aproveitarmos ao máximo o tamanho da tela para darmos o máximo de informação ao usuário na tela sem que ele precise rolar o site (SEMPRE NA VERTICAL, sempre temos que evitar a existência de qualquer barra horizontal nos nossos sites.)
Vamos analisar o código abaixo:
CSS:
div {
border: 1px solid #000000;
padding: 25px;
}
@media screen and (max-width: 640px) {
div {
padding: 20px 10px;
}
}
@media screen and (max-width: 360px) {
div {
padding: 15px 0px;
}
}
E o resultado que isso gera:
Sutil, certo? Sim, a diferença parece pouca, mas às vezes, dependendo do conteúdo ou do texto que temos num bloco, essa diferença pode fazer com que todo o nosso conteúdo seja apresentado de uma vez, facilitando a leitura e diminuindo a necessidade de o usuário rolar o site, o que facilita a navegação.
Essa diminuição de distanciamento nem sempre precisa existir, ou ser tão diminuída a ponto do texto quase tocar as bordas, tudo é relativo e depende de como você quer que seu site seja apresentando, o que queremos reforçar aqui é a ideia de que, se queremos fazer um site que possa ser acessado mais facilmente de qualquer lugar, temos que pensar nos diferentes dispositivos que podem ser usados para acessá-los, e como facilitar o acesso ao seu conteúdo.
Assinar:
Postagens (Atom)