MENU

| BR

Campus

Cursos

Programas Executivos

Paises

Tabelas de bootstrap para iniciantes: como usar este framework para criar sites responsivos

Tabelas de bootstrap para iniciantes: como usar este framework para criar sites responsivos
#Tecnologia
29 de julho - min de leitura

A arte de fazer tabelas Bootstrap é uma forma de investir em sites responsivos, ou seja, melhorar a experiência do usuário e também entregar qualidade em todos os dispositivos. Quer saber como criar suas primeiras tabelas?


Ainda que os Bootstraps poupem um tempo considerável no gerenciamento de templates dos desenvolvedores, seu objetivo-chave é criar sites responsivos.

Porém, antes de começar a falar sobre o tema, você precisa entender o que é Bootstrap e como funciona esse framework web. E mais, como através dele é possível que a interface do usuário de um site ou app seja acessada de qualquer tipo de tela, de forma intuitiva para o usuário e descomplicada ao programador.

Bootstrap: o que é e como funciona?

O Bootstrap é um código aberto que ganhou fama por ser utilizado para montar a plataforma da rede social das notícias “quentinhas”, o Twitter. 

Quando um desenvolvedor trabalha na programação de um site, ele tem a opção de utilizar o código aberto do Bootstrap para facilitar em sua montagem (com códigos previamente prontos). Com ele, de forma muito mais prática, é possível tornar esse site responsivo.

Essa ferramenta front-end e de código-aberto, quando criada por Mark Otto e Jacob Thornton (na época, funcionários do Twitter) tinha o objetivo de tornar o desenvolvimento web algo mais rápido e prático, e não um universo sem fim de códigos. 

Por isso, ele contém todos os tipos de templates baseados em HTML e CSS para várias funções e componentes, como por exemplo: navegação, sistema de grades, além de plugins em JavaScript (jQuery), para implementar recursos como dropdowns, carrosséis de imagens e slideshows de maneira fácil e com pouco código.

Seus padrões seguem os princípios de usabilidade e as tendências de design para interfaces, o que resulta em páginas esteticamente mais agradáveis e também úteis, de simples navegação.

Uma equação interessante e sustentável para usuário, empresa e desenvolvedor.

Guia prático sobre tabelas Bootstrap

Como o Bootstrap usa três linguagens: o HTML, o CSS e JavaScript, é importante que você tenha conhecimentos básicos em cada uma delas. Mesmo que já existam classes e funções prontas nele, é possível que surjam alterações pontuais no meio do caminho. 

Por falar em programação, entre as vantagens deste framework está a de ter menos código digitado, ou seja, menos dor de cabeça para encontrar problemas de sintaxe.

Como um recurso muito utilizado na web é o elemento de tabelas, os desenvolvedores do Bootstrap pensaram numa forma de incluí-las em seus estilos predefinidos.

Assim, no uso prático da ferramenta, basta adicionar classes aos elementos para obter o resultado desejado. Ao criar uma tabela no HTML, se pode incluir na tag <table> a classe .table, nativa do Bootstrap, para que a tabela ganhe algumas formatações visuais.

Tabela

Na composição de suas tabelas do Bootstrap, você pode optar por muitos estilos. Abaixo, vamos dar alguns exemplos de tabela simples:

Tema escuro: basta acrescentar a classe .table-dark.

Alternar a cor das linhas: conhecida como linhas zebradas, ao aplicar a classe .table-striped, se consegue um efeito de cores alternadas entre as linhas do corpo da tabela. 

Tabela com todas as bordas: no padrão da classe .table, já é possível observar uma borda entre as linhas como padrão. Porém, você pode adicionar bordas entre as colunas, também por meio da classe .table-bordered. 

Tabela sem borda: para esse estilo, é utilizada a classe .table-borderless. Ou seja, uma tabela sem linha, porém que mantém todas as outras formatações. 

Tabela compacta: por meio da classe .table-sm, se reduz o tamanho de uma tabela. Como ela possui a metade do valor de padding entre linhas que o padrão adotado pelo Bootstrap, é possível compactá-la. 

Existem as classes preestabelecidas no Bootstrap, que têm a missão (quando inseridas dentro das tags) de “colorir” as linhas ou células. Para isso, é só acrescentar nestas linhas, ou em células, as classes abaixo:

➜ .table-active

➜ .table-primary

➜ .table-secondary

➜ .table-success

➜ .table-info

➜ .table-warning

➜ .table-dark

➜ .table-light

Depois de entender um pouco de estilização visual das tabelas, é necessário compreender também sobre como será a adequação delas na tela. Neste ponto, User Experience (UX) entra no jogo.

Aqui será necessário considerar a experiência de quem realmente testará a usabilidade deste site ou app. E as tabelas responsivas, com a realização de rolagem horizontal, de maneira rápida e intuitiva, vão ao encontro desse objetivo. 

Para tornar uma tabela do Boostrap responsiva para todos os tamanhos de tela (viewport), o desenvolvedor utilizará a classe .table-responsive em um elemento pai. Dessa forma, basta acrescentar uma div pai à tabela com essa classe.

Última tabela

Para o desenvolvedor que deseja acrescentar o responsivo para breaking points mais específicos e personalizados, é necessário adicionar <div> às classes:

➜ .table-responsive-sm

➜ .table-responsive-md

➜ .table-responsive-lg

➜ .table-responsive-xl

Se você chegou até aqui, já deve ter compreendido que desenvolver tabelas neste framework precisa fazer parte do hall das ferramentas que você precisa saber usar.

Mas,se também surgiram dúvidas novas de como evoluir nesse uso para aprimorar os resultados, indo ao encontro das necessidades do mercado atual, que tal se especializar em um curso que te prepare para isso?

Na Digital House, temos cursos na área de programação, onde você vai aprender esta habilidade digital com professores especialistas de mercado através de uma metodologia disruptiva, a sala de aula invertida.

Ou seja, vai compreender linguagens de programação, aplicá-las em frameworks de maneira ágil e assertiva, evoluindo sua carreira de maneira prática e descomplicada.

Outras notícias

Governança de dados: qual o papel do líder dentro da cibersegurança img
#Dados

Governança de dados: qual o papel do líder dentro da cibersegurança

Quando se fala em crime de vazamento de dados, a lista é extensa e preocupante. E as grandes empresas, inclusive as gigantes do ramo de tecnologia, não saem ilesas destes ataques. É por isso que a governança de dados ganhou tanto espaço nos últimos anos.Com uma governança adequada e qualificada, a luta pela proteção de dados ganha reforço e um recurso indispensável. Acompanhe o artigo e entenda as ações mais incisivas a se tomar em relação à cibersegurança, que vão além da tecnologia.Vazamento de dados - uma ameaça constanteA luta contra a vulnerabilidade no ciberespaço é cotidiana e permeia empresas de todos os tamanhos e segmentos, inclusive as mais entendidas do negócio (tech).Em junho deste ano, o twitter notificou seus clientes corporativos sobre risco de vazamento de seus dados pessoais. O LinkedIn, em 2012, anunciou que 6,5 milhões de senhas não associadas foram roubadas e postadas em um fórum de hackers russos.A história foi explicada mais tarde, em 2016. Acontece que o mesmo hacker que vendia os dados do MySpace estava oferecendo os endereços de e-mail e senhas de milhões de usuários do LinkedIn por 5 bitcoins (cerca de US$ 2.000 na época).A Microsoft  também passou por situação de vazamento de dados há poucos meses. A empresa foi acusada de expor 250 milhões de registros de usuários, por conta de uma falha no banco de dados de atendimento ao cliente. O problema aconteceu em dezembro de 2019 e, de acordo com a companhia, alguns textos encontrados traziam informações pessoais de clientes, como e-mail, endereço de IP, localização e outros dados sigilosos. Porém, neste caso, não houve indícios de ação de criminosos.E estas são apenas algumas amostras das instituições que foram impactadas com o vazamento de informações sigilosas dos seus clientes. LGPD e a governança de dadosAs normas da Lei Geral de Proteção de Dados (LGPD), que entra em vigor em 2021, vem ao encontro da relevância e obrigatoriedade de assegurar a privacidade das pessoas, que podem ser alvo de fraudes altamente personalizadas e extorsão. Um programa de governança de dados pode ser capaz de prevenir esse tipo de problema. Nesse sentido, o primeiro passo de uma empresa é categorizar e classificar os dados, armazená-los, designar quem poderá acessá-los e os responsáveis por monitorar todo esse processo.O principal objetivo de qualquer programa de governança de dados é uma política de privilégios mínimos, ou seja, as pessoas ou serviços terão acesso apenas aos dados de que precisam para realizar seu trabalho. Para esse programa dar certo, a estrutura de soluções de segurança da informação precisa funcionar. Tecnologia e pessoas devem estar alinhadas neste propósito.O “exército de dados”, formado pelos profissionais que agem na criação de barreiras contra os ciberataques, necessitam do suporte de tecnologias de análise e monitoramento das informações, de preferência em nuvem, que mantenha os registros de quem está acessando e como estão usando cada informação, em tempo real, além de alertas quando algo incomum é feito, probabilidades de ameaças etc.A procura por profissionais de dados só aumentaSegundo levantamento, realizado pela Serasa Experian com profissionais no Brasil, Estados Unidos, Reino Unido, Alemanha, França e Austrália, foi identificada a má qualidade das informações e a perda de recursos associada à geração de gastos adicionais.Isso significa que metade dessas empresas brasileiras reconhece que os dados empregados em suas análises não são precisos, comprometendo a eficácia dos processos de gestão. Portanto, essa má governança dos dados é um oponente real para os negócios.Sendo assim, uma boa governança, para ser efetiva, também necessita de fontes de dados confiável, captação e apresentação adequada por meio de profissionais qualificados em dados. A Digital House oferece os cursos de Inteligência Artificial, Data Science e Data Analytics na área de dados, além de um curso focado em cibersegurança, que fala sobre a importância da governança, LGPD e principais temas sobre segurança dos dados.Invista na sua carreira, esta é uma área que está ganhando cada vez mais espaço nas empresas e destaque no mercado de trabalho!

Novos hábitos do consumidor: quais comportamentos e consumos ganharam força durante a pandemia img
#Marketing

Novos hábitos do consumidor: quais comportamentos e consumos ganharam força durante a pandemia

O mundo não vai mudar completamente após a pandemia, mas existe uma mudança em curso que agora acontece de maneira muito acelerada, com impacto direto nas estratégias de negócio Digital First. Aos poucos, os novos hábitos do consumidor ganham forma.Alguns ficaram muito tempo em casa, outros evitaram ir muito longe, alguns tiveram mais tempo, outros começaram a trabalhar demais, alguns ficaram muito sozinhos outros passaram mais tempo do que estão acostumados com a família.O que aconteceu neste confinamento forçado?Novos hábitos do consumidorAumento das compras onlineNos últimos meses, conversei com 2 plataformas de e-commerce diferentes que afirmaram que o volume de vendas digitais atual é como se todo dia fosse uma Black Friday, os consumidores no home office forçado recorreram às compras online e levaram os lojistas a abrir mais de 135 mil lojas online novas no Brasil. Um nova rotina dentro de casaE será que esse home-office é para sempre? Se depender de  26% dos CEOS das 500 maiores empresas da lista da Fortune sim! Isso altera o deslocamento dessas pessoas pela cidade mudando os locais onde fazem compras e consomem refeições. E essa mudança de deslocamento deve fazer com que as pessoas passem mais tempo no bairro onde moram, assim as lojas locais ampliam sua importância para esse consumidor. Outro hábito que esse consumidor desenvolveu foi o costume de cozinhar em casa, um hábito que deve se manter mesmo pós-quarentena. O portal de receitas do UOL teve crescimento de 230% da audiência em junho/2020 quando comparado a março/2020.Para quem tem filhos o home-office pode ter se tornado um pesadelo, sem escola e tendo de apoiar mais de perto as tarefas educacionais, muitos pais perceberam que não tinham talento para a pedagogia, ou mesmo quando estavam à altura da tarefa, isso comprometia sua vida profissional.Sem poder sair para shows muita gente acompanhou seu cantor favorito dentro de casa, as lives que começaram simples ganharam status de superprodução e levaram milhões de brasileiros para o YouTube. Das 10 maiores lives musicais do YouTube na era pós-covid, 7 são brasileiras. Marília Mendonça chegou a ter 3,3 milhões de usuários simultâneos e seu show no YouTube já foi visto mais de 50 milhões de vezes.Empresas se adequando ao novo cenárioDe olho na mudança de comportamento do consumidor algumas marcas online estão fazendo integração com lojas de bairro, o que permite entregar serviços além de produtos. Por exemplo, a Petlove que agora pode vender banho e tosa que será entregue nos petshops parceiros.A renda do consumidor em geral caiu, essa é outra realidade dura desse novo cenário, isso tem feito com que as pessoas experimentem novas marcas e deem mais valor a novas formas de economizar, como cashback (dinheiro de volta) nas compras. De olho nessa tendência, a Magalu lançou o cashback no seu app.E enquanto alguns dão graças aos céus por poder abrir seu restaurante, outros estão aproveitando para lançar kits para cozinhar em casa, que é uma ótima maneira de manter esse cliente que criou um novo hábito.Se no ensino fundamental, médio e graduação as pessoas aguardam ansiosamente a volta às aulas, no segmento de cursos técnicos muitos tiveram experiências positivas e vão repensar a necessidade de sair de casa para se atualizar profissionalmente. E não falo apenas sobre a Digital House, existem relatos animados em todo o setor de educação. Quais os impactos no mercado?Essas mudanças de hábitos foram observadas em diversas pesquisas diferentes, e impactam cerca de 20% a 33% dos consumidores. Já pensou no seu modelo de negócio atual com apenas 67% a 80% dos seus clientes? Essa redução acaba inviabilizando muitos negócios que já não iam bem antes da pandemia, e deve forçar muitos mercados a mudança. Algumas pessoas que estão lucrando com esses novos modelos vão continuar contratando, e investindo em marketing para convencer ainda mais consumidores. E por fim, muitas dessas oportunidades apresentam uma opção mais barata ao consumidor que em sua maioria está passando por maus bocados. Isso não significa que você precise abandonar imediatamente seu negócio ou criar um novo, mas deixa claro que você precisa refletir diariamente se é o momento da virada ou de criar algo em paralelo.É hora de criar uma área de monitoramento de mercado (que para o pequeno empreendedor é um tempinho semanal para olhar as novidades da sua área de atuação) e se aprofundar na experiência do cliente (CX). As principais inovações muitas vezes vem de observar ou conversar com os consumidores.Quando a mudança vai chegar para qualquer setor é incerto, mas com certeza o consumidor não será mais o mesmo do mundo pré-pandemia.

Growth Hacking: o que é e como a estratégia de hacking de crescimento funciona img
#Marketing

Growth Hacking: o que é e como a estratégia de hacking de crescimento funciona

Desenvolvido pelo empreendedor americano Sean Ellis, toda empresa precisa saber o que é growth hacking. Ao pé da letra, o termo pode ser definido como o “marketing orientado a experimentos”. Independentemente do tamanho e segmento da empresa, todas têm um objetivo em comum – fazer o seu negócio crescer. Afinal, ninguém entra em campo para perder.Quando tratamos de experimentar, não significa que vamos “acertar no chute”, pois toda ação deve ser pensada estrategicamente, visando o crescimento sustentável a partir dos pontos deficientes. Growth Hacking: para aplicar, tenha em mente hipóteses.O growth hacking segue essa linha em três passos: formula as hipóteses, realiza os testes e descobre as oportunidades reais no mercado para desenvolver estratégias e acelerar o negócio da empresa diante da concorrência.Diferentemente de outras técnicas de marketing, o growth hacking é orientado pelos Key Performance Indicators (KPIs), para atingir o objetivo proposto. Como Growth Hacking funciona na práticaPodemos chegar a dizer que estratégias de growth hacking são “brigas contra o tempo”, pois há um sentimento de fazer tudo no menor tempo e custo possível, por meio de experimentos que validem as hipóteses criadas. Porém, essa agilidade exige uma equipe preparada e investimento em ferramentas que possibilitem experimentos e automações para encontrar as melhores soluções. Para sintetizar o processo do growth hacking, podemos resumi-lo em quatro etapas:1. Defina um objetivo;2. Crie hipóteses;3. Faça testes que comprovem as hipóteses;4. Utilize ferramentas de teste, analytics e automação.Com o growth hacking, não existe “acertar no escuro”. Antes do advento do digital, muitas empresas investiam uma fortuna em mídia off, mas sem saber o retorno que aquela veiculação de propaganda na televisão traria ao seu negócio. O growth hacking ajuda no crescimento das empresas por um motivo bem simples. Antes da estratégia ser aplicada, ela passou por experimentos e foi “metrificada”. Vantagens do growth hackingJá discutimos a respeito do conceito de growth hacking, inclusive já mostramos um dos seus benefícios. Separamos agora mais 4 benefícios desta estratégia de crescimento tão utilizada por startups:Crescimento rápidoVimos que o objetivo é crescer exponencialmente e o mais rápido possível. O growth hacker é o profissional responsável por analisar diversas áreas da organização, propor melhorias e ganhar mercado. É primordial que as estratégias tenham custos baixos e sejam criativas. Ambas as exigências são desafios inerentes do cotidiano de qualquer startup.Escalabilidade Falar sobre crescimento da empresa sem associar com aumento de receita é impossível. Os custos operacionais podem até aumentar, mas não pode sobressair ao retorno ganho.PrevisibilidadeUma das grandes vantagens é a mensuração de resultados, pois esse profissional consegue prever o que pode acontecer em determinado período, com base no histórico de transações e nos dados armazenados.ViralizaçãoAbuse das técnicas de viralização, como a indicação aos amigos por meio das mídias sociais. Isso faz com que a empresa seja reconhecida no mercado de forma mais rápida e com um investimento bem menor.Quer se tornar um growth hacker na área do marketing? Conheça os cursos da Digital House: Marketing Digital, Marketing Digital Avançado e Gestão de Marketing Digital.