Recursos de inicialização

Neste segundo artigo da série vamos lidar com os recursos do Bootstrap. É uma biblioteca completa de recursos para o design de sites e aplicativos, incluindo templates e elementos para formulários, fontes e menus, entre outros.

No artigo anterior argumentamos que há momentos em que os gerenciadores de conteúdo não são a melhor opção e que escrever código do zero para um site é a alternativa certa. No entanto, isso não significa que temos que reinventar a roda. O uso de frameworks como o Bootstrap reduz muito o tempo de design e facilita a obtenção de resultados.

Recursos de inicialização

Para entender os recursos do Bootstrap, precisamos entender a mudança de paradigma no design de sites.

quando eles aparecerem os sites precisavam se adaptar aos diferentes tamanhos de monitores. Mas, com o passar do tempo, celulares e tablets tornaram-se cada vez mais o meio de acesso preferido dos usuários. o desafio era fazer com que as páginas se adaptassem às diferentes telas sem que o usuário tivesse que ampliar, diminuir ou mover o conteúdo para poder vê-lo.

Em princípio, as seguintes abordagens foram adotadas:

• Projeto responsivo: O design é o mesmo, mas adaptado automaticamente ao tamanho da tela. Essa abordagem tem alguns problemas, como o usuário pode ser forçado a aumentar o zoom em determinadas seções da página para vê-las.
• Avanço progressivo: Ele começa projetando o site para o dispositivo com menos recursos (geralmente o celular porque possui uma tela menor, um navegador com menos compatibilidade para recursos avançados e muitas vezes requer o uso de um plano de dados para se conectar). Uma vez finalizado, com base neste design, são adicionados recursos para obter a versão para tablets, notebooks e computadores desktop.
• Degradação gradual: É o caminho inverso. O site para computador é criado primeiro e os recursos são removidos até que uma versão compatível com dispositivos móveis seja obtida.

Como é sempre mais fácil adicionar do que remover, o avanço progressivo é a tendência que conseguiu prevalecer. B.ootstrap, por exemplo, adota a abordagem “mobile first”, ou seja, a base do desenho é sempre a versão que será mostrada no menor tamanho de tela e, então, são estabelecidas as modificações que serão feitas à medida que for passando para os tamanhos que seguem.

Uma vantagem extra de usar o Bootstrap tem a ver com o fato de que O Google prioriza sites compatíveis com dispositivos móveis em suas pesquisas.

Outro conceito que devemos levar em consideração é a diferença entre design de frontend e backend. O design front-end cuida de tudo o que o usuário vê e com o qual interage. O backend agrupa o que é feito no servidor. Um exemplo do primeiro é o de um formulário da web. Mostrando uma série de opções é mostrado como um menu drop-down é design de frontend, que a opção escolhida é enviada por correio ou adicionada a um banco de dados é design de backend.

Bootstrap é um framework que combina elementos de estilo CSS e programação Javascript para controlar a renderização e dar interatividade a todos os componentes de uma página desenvolvida em HTML5.

Entre as coisas que podemos controlar com o Bootstrap estão:

• acessibilidade: Componentes como menus ou caixas de diálogo são compatíveis com leitores de tela ou adequados para uso por pessoas com mobilidade reduzida.
• Botões: Incluindo medidas, estilos, estados e agrupamento.
• Formulários:  Incluindo renderização, tipos de controles e validação de entrada.
• Imagens: Controla a origem, alinhamento e tamanho da tela das imagens inseridas.
• Elementos de navegação: Por exemplo, barras laterais ocultáveis ​​ou menus verticais ou horizontais, dependendo do dispositivo.
• Tipografia: Controle como as diferentes partes do texto são exibidas.
• Esquema: Ajustando a renderização do conteúdo dependendo do dispositivo

No próximo artigo veremos alguns exemplos práticos de seu uso.