Programaçao De Scripts - Aula 04

Responsividade

Responsividade é a capacidade de um site adaptar-se em diferentes tamanhos de tela.

O tópico da responsividade teve seu boom junto com o advento dos smartphones - afinal, ninguém queria entrar num site e ter que pinçar o conteúdo para ler o que está escrito.

Pensando nos usuários mobile, as ferramentas de busca priorizam sites responsivos, portanto há um grande impacto no SEO (Search Engine Optimization).

Técnicas Comuns

Media Queries: Permitem aplicar estilos diferentes com base no tamanho da tela.

Flexbox: Facilita o layout de elementos, proporcionando alinhamento e distribuição eficiente do espaço.

CSS Grid: Permite a criação de layouts complexos de forma mais simples, organizando o conteúdo em uma grade.

Desafios da Responsividade

Garantir que todos os elementos se ajustem corretamente em diferentes dispositivos.
Testar em múltiplos dispositivos, o que pode ser demorado.
Otimizar o desempenho para evitar problemas de velocidade.

Melhores Práticas para a Responsividade

Design Mobile First: Começar o design com foco em dispositivos móveis para garantir um layout adaptável desde o início.

Unidades Relativas: Utilizar unidades como %, em, e rem para criar elementos que se ajustam de forma mais fluida.

Teste Regularmente: Realizar testes em diferentes dispositivos e navegadores.

Bootstrap

• Definição: Bootstrap é um framework front-end utilizado para desenvolver interfaces responsivas e móveis. Ele fornece templates de design prontos para uso.
• Vantagens: Agiliza o desenvolvimento, oferece uma grid flexível, componentes pré-definidos e é amplamente suportado.
• Características Principais: Sistema de grid responsivo, componentes personalizáveis e consistência na aparência em diferentes navegadores.
• Estrutura da Grid: Utiliza um sistema de grid com até 12 colunas para criar layouts complexos.
• Componentes Responsivos: Navbar, Cards, Modais, Botões, Carousel.

CSS Grid: Uma Alternativa Poderosa

Vantagens: Oferece controle total sobre o layout, permitindo a criação de layouts complexos sem a necessidade de adicionar classes extras no HTML.

Desvantagens: Exige mais CSS para alcançar os mesmos resultados que o Bootstrap.

Funcionalidades:

• grid-template-columns e grid-template-rows: Definem a largura e a altura das colunas e linhas.

• grid-column-start, grid-column-end, grid-row-start, grid-row-end: Posicionam itens na grade.

• span: Permite que um item ocupe várias colunas ou linhas.

• grid-areas: Permite dar nomes a diferentes partes da grade.

• minmax(): Define um valor mínimo e máximo para o tamanho de colunas e linhas.

• fr: Unidade que distribui o espaço disponível.

Bootstrap vs. CSS Grid: Um Debate Contínuo

A escolha entre Bootstrap e CSS Grid depende das necessidades do projeto.

Bootstrap: Requer mais HTML (divs e classes) e menos CSS. É uma solução completa com componentes pré-definidos. Ideal para projetos menos complexos e para quem busca rapidez.

CSS Grid: Requer mais CSS e menos HTML. Oferece mais flexibilidade e controle sobre o layout. Ideal para projetos complexos que exigem personalização.

Status Atual do Bootstrap

Não está morto: Apesar do surgimento de novos frameworks, Bootstrap continua sendo amplamente utilizado.

As novas versões do Bootstrap trazem melhorias, como a remoção da dependência do jQuery e a introdução de CSS custom properties.

O Bootstrap

Para acessar a documentação do Bootstrap vista pelo professor durante a aula, basta clicar aqui

Itens da Documentação do Bootstrap visto em sala:

• CDN para inserir no nosso html;
• Layout Containers;
• Layout Grid;
• Layout Gutters;
• Layout CSS Grid;
• Forms Overview;
• Forms Validation;
• Components Accordion;
• Components Alerts;
• Components Badges;
• Components Buttons;
• Components Cards;
• Components Collapse;
• Components Dropdowns;
• Components Modal;
• Components Navbar;
• Components Pagination;
• Components Placeholder;
• Components Popovers;
• Components Progress;
• Components Spinners;
• Components Toast;
• Components Tooltip;