CSS

CSS – Definindo o cálculo de dimensões com box-sizing

Olá web developer! Ao estilizar elementos no CSS, muitas vezes precisamos definir dimensões. Porém, o modo como as dimensões dos elementos são calculadas podem causar alguns problemas.

Onde quero chegar com isso? Bom, algumas pessoas desconhecem que temos duas maneiras de calcular o tamanho dos elementos. Você conhece?

Tamanho baseado no conteúdo

Imagine uma div com um texto dentro. Vamos definir sua largura como 100px e altura também sendo 100px. Isso deveria resultar em um quadrado, já que largura e altura estão iguais, certo? Mas e se eu colocar uma margem interna (padding) de 50px à esquerda? Qual será o tamanho?

.box{
    width: 100px;
    height: 100px;
    padding-left: 50px;
}

Veja que o resultado foi um retângulo com uma largura de 150px. A forma padrão de se calcular o tamanho de um elemento é a soma de sua largura ou altura (width ou height), margem interna (padding) e grossura da borda (border).

Isso pode causar problemas em algumas ocasiões. Imagine que agora a gente queira criar um elemento que preencha 100% da largura de seu pai, mas que também tenha uma margem interna para que o texto não fique encostado em suas bordas. Para isso, vou criar um container para essa nossa caixa:

.container{
  width: 100px;
  height: 100px;
  border: 5px solid rgba(0,0,0,0.5);
}

E vou mudar a nossa caixa agora para que a largura seja 100% ao invés de deixar 100px fixos. Assim, nossa caixa poderá preencher dinamicamente dependendo do tamanho do elemento pai.

.box{
    width: 100%;
    height: 100px;
    padding-left: 50px;
}

Teremos o seguinte resultado:

Veja que a nossa caixa ultrapassou o tamanho do seu elemento pai, pois o padding-left de 50px foi somado à largura, resultado em uma largura total de 150px. Isso pode ser a causa de problemas quando vamos definir dimensões de um elemento dentro de outro e o layout acaba quebrando quando pensamos que deveria estar tudo certo.

Tamanho baseado nas bordas

Para evitar o problema mostrado anteriormente, podemos usar a propriedade box-sizing para indicar como queremos que o navegador calcule as dimensões dos elementos. O valor padrão do box-sizing é content-box. Veja o que acontece quando alteramos para border-box:

.box{
    width: 100%;
    height: 100px;
    padding-left: 50px;
    box-sizing: border-box;
}

O box-sizing com o valor border-box faz com que o navegador não calcule a dimensão de um elemento somando bordas e margens com altura e largura.

Com content-box, ao definir width: 100px, o interior (conteúdo) do elemento terá 100px, mas por termos padding-left: 50px, o tamanho total do elemento será 150px.

Com border-box, se definirmos por exemplo, width: 100px, não importa se colocarmos padding-left: 50px, o tamanho final do elemento será os 100px que definimos em width. Mas como definimos 50px de padding-left, agora o interior do elemento terá apenas 50px de espaço para que o elemento possua 100px de largura no total.

Para evitar problemas, muitas pessoas gostam de forçar o comportamento de todos os elementos e pseudo-elementos como border-box usando o seguinte código:

*, *::before, *::after {
  box-sizing: border-box;
}

Dependendo do que você está criando, se está trabalhando com texto, criando layouts, etc, cada comportamento pode ser o mais indicado.

CSS – Altura automática proporcional à largura sem JavaScript

Olá Web Developer! Hoje em dia precisamos desenvolver páginas para os mais variados tamanhos de telas. Isso está cada vez mais simples, principalmente com o Flexbox e CSS Grid. Porém, não temos ainda uma propriedade no CSS que nos permite definir a proporção das dimensões de um elemento. Aqui nós aprenderemos como é fácil fazer isso.

Padding com porcentagem

Algo que pode passar despercebido por alguns desenvolvedores é usar porcentagem como valor das propriedades de margem interna (padding).

Quando definimos um valor em porcentagem, estamos querendo que aquele valor seja relativo a um outro valor. Então quando definimos que queremos um width de 50%, estamos dizendo que queremos que ele tenha a metade do valor do width do elemento pai. Se este tiver 200px de largura, o filho com 50% ficará com 100px de largura.

Quando usamos porcentagem no padding, ele não irá pegar a porcentagem relativa ao padding do elemento pai, e sim, proporcional à largura do pai. Veja no exemplo interativo abaixo:

<div class="box-container" >
    <div class="box-content" ></div>
</div>

Note que eu não defini nenhuma altura para .box-container, apenas largura. E no seu elemento filho, .box-content, mandei ele ter altura igual a 0 e coloquei uma porcentagem em padding-bottom (também poderia ser padding-top). Assim, sua dimensão vertical ficará por conta do padding-bottom.

Como dito anteriormente, a propriedade padding utiliza a largura do elemento pai como base para calcular seu valor quando utilizamos porcentagem. Então se colocarmos o pai com width: 200px e o filho tiver padding-bottom: 50%, sua altura será 100px. Como o elemento filho tem sua altura modificada, o elemento pai também terá. Podemos aproveitar isso para criar um container que mantenha as proporções entre largura e altura. Assim, um elemento que tem sua largura modificada pela largura da tela manterá uma altura proporcional.

Teste com outros valores. Um bom exemplo é deixar o padding-bottom com valor 100%. Isso fará com que a altura do elemento filho seja igual à largura do elemento pai, resultando em um quadrado, não importa o quanto a largura do elemento pai seja modificada.

Só um detalhe: eu defini width do .box-container em px apenas para dar um exemplo, mas você pode usar qualquer unidade para a largura do elemento pai, como % ao criar um elemento responsivo para a sua página.

Criando um container reutilizável

Agora que já entendemos o conceito, vamos arrumar esse elemento para que ele seja reutilizável em qualquer projeto. Vamos por partes para entender como ele vai funcionar até chegar em um resultado bem simples e limpo.

Aproveitando pseudo-elementos

Para não ter o trabalho de escrever no HTML um elemento como container que cuidará da largura e um elemento filho apenas com padding-bottom para cuidar da altura, podemos aproveitar os Pseudo-Elementos. Assim criaremos uma única tag e o CSS automaticamente irá inserir o responsável pela altura.

Vamos então remover o box-content e passar suas propriedades para um pseudo-elemento de box-container.

<div class="box-content" ></div>

E nosso CSS está no exemplo abaixo:

Ok, não temos mais uma div vazia, passamos essa função para um pseudo-elemento que já está crescendo, mas o elemento pai não está mais. O pseudo-elemento também não possui mais largura, pois sua dimensão é baseada no seu conteúdo, e definimos content como vazio (“”). Mas isso não importa, já que ele é apenas um controlador de altura. O que faremos agora é arrumar para que o elemento pai possa ter sua altura modificada.

Arrumando os pseudo-elementos

A primeira coisa a se notar é que o pseudo-elemento está ocupando espaço. Isso pode atrapalhar o conteúdo que quisermos colocar no nosso container. Um jeito simples para ele não atrapalhar nosso conteúdo é colocar um float.

A propriedade float sempre precisa ser limpada para evitar problemas no layout. Podemos fazer isso usando outro pseudo elemento, que colocaremos no ::before. Como por padrão os pseudo-elementos crescem de acordo com seu conteúdo e aqui também colocamos o content vazio, vamos mudar seu display para block para ele ter um tamanho.

Nosso código ficará assim:

Deixando o elemento reutilizável

Veja que agora temos uma única tag que podemos controlar a altura apenas mudando a sua largura. Mas para que o elemento seja realmente reutilizável, precisamos permitir que o desenvolvedor possa definir qual a proporção daquele elemento. Podemos aproveitar as variáveis CSS. Se você ainda não sabe como usá-las, eu mostro no nosso canal do YouTube no vídeo Variáveis com CSS puro.

Vamos criar uma variável CSS que vai indicar qual a proporção que deve ser mantida. Vamos chamar de aspect-ratio e colocar diretamente na tag. Vamos supor que queremos a mesma proporção de telas widescreen, que é 16:9. Vamos criar a variável com o valor 16/9. Assim poderemos utilizar este valor com a função calc() para calcular a porcentagem, afinal é mais simples de entender 16/9 do que 56.26%, não é mesmo?

<div class="box-content" style="--aspect-ratio: 16/9" ></div>

E o nosso novo padding-bottom está no exemplo abaixo:

Simplificando ainda mais o HTML

O nosso elemento com dimensões proporcionais está pronto. Temos um CSS simples e para utilizar basta criar um elemento com a classe box-content e colocar uma variável aspect-ratio para definir a proporção. Se quiser, você pode parar por aqui mesmo.

Mas se precisamos definir a variável de controle de proporção, não seria mais simples definir estes estilos simplesmente para elementos que possuem essa variável, nos poupando do trabalho de ter que colocar a classe box-content? Podemos fazer isso apenas alterando os seletores.

Vamos trocar o seletor .box-content por [style*="--aspect-ratio"]. Esse seletor basicamente está indicando para pegar os elementos que possuem --aspect-ratio em alguma parte dentro do atributo style.

Veja como nosso HTML ficará bem mais simples:

<div style="--aspect-ratio: 4/3" ></div>
<div style="--aspect-ratio: 16/9" ></div>

E nosso CSS:

Agora você tem um container reutilizável que mantém a proporção entre largura e altura. Para deixá-lo responsivo, basta deixar seu width como 100%. Assim ele mudará de tamanho de acordo com o seu elemento pai.

Utilizando arquivos estáticos no Flask

No último artigo dessa trilha, vimos como retornar páginas HTML em requisições Flask e, assim, melhorar a interação da nossa aplicação com seu usuário. Porém, normalmente, há o uso de arquivos estáticos (JS, CSS e IMG) para melhorar a aparência das nossas páginas e, consequentemente, a experiência do usuário. Sendo assim, veremos neste artigo como incorporar estes arquivos ao nosso projeto Flask.

Criando diretório dos arquivos estáticos

É uma boa prática adotada pela comunidade que todos os arquivos estáticos de uma aplicação Flask sejam armazenados em um diretório “static” na raiz do projeto e, dentro deste diretório, uma nova pasta contendo os tipos de arquivos estáticos (CSS, JS e IMG), como podemos ver abaixo:


Para este projeto, iremos usar o Bootstrap como CSS. Para isso, realizamos o download do arquivo .min.css do framework (https://getbootstrap.com/docs/4.3/getting-started/download/) e armazenamos no diretório “static/css”, como vimos na imagem acima.

Ao realizar este procedimento, o Flask já estará apto a utilizar este arquivo CSS no projeto, bastando apenas importá-lo em nosso template.

Flask - Fundamentos
Curso de Flask - Fundamentos
CONHEÇA O CURSO

Utilizando arquivos estáticos no template

Agora que já configuramos nosso projeto para armazenar arquivos estáticos, precisamos importá-lo em nosso template. Para isso, é muito simples. O primeiro passo é criar uma tag link no head do arquivo HTML e referenciar nosso arquivo bootstrap.min.css:

Agora, no href do link, indicamos onde se encontra o arquivo estático que queremos utilizar. No nosso caso, ele se encontra em static/css/bootstrap.min.css. Sendo assim, temos que passar, como primeiro parâmetro do método url_for, o diretório raiz dos arquivos estáticos. Após isso, informamos o restante do caminho até o arquivo no atributo filename, como vemos acima.

Agora, já estamos aptos a usar o arquivo do bootstrap em nossos templates e, com isso, personalizar nossas páginas HTML. Utilizando como base o tema Jumbotron do bootstrap, conseguimos criar uma página com todo o poder do framework:

Concluindo

A utilização de arquivos estáticos em projetos Flask é, realmente, muito simples. Apenas precisamos criar um diretório para comportar estes arquivos e importá-los em nossos templates utilizando o método url_for do Jinja2.

Porém, sabemos que o conteúdo de uma página HTML nem sempre é estático. Muitas vezes este conteúdo é enviado pela requisição e exibido no HTML… Bom, como fazer isso? É exatamente o que veremos no próximo artigo desta série 🙂

CSS: Aprenda a Criar o Efeito de Flip Cards

Olá Web Developer! Hoje vamos aprender a criar o efeito de Flip Cards com CSS puro.

Esse efeito é muito interessante, e nos permite fazer com que um elemento gire. É um ótimo exercício para estudar animações e transformação 3D com CSS. Veja como ficará o resultado:

Iniciando o Espaço 3D

Como a animação CSS que vamos criar será 3D, precisamos criar um container para essa animação, indicando a sua profundidade. Vamos chamar esse container de flip-container. Ele servirá como o “espaço 3D” onde nossos elementos vão ficar.

<div class="flip-container" >

</div>

No CSS nós indicamos a profundidade do nosso container. Isso é feito com a propriedade perspective, que indica o quanto um objeto está longe do usuário. A profundidade é aplicada aos elementos filhos, e não ao próprio elemento com a propriedade de perspectiva.

Também aproveitamos para definir a altura e largura desse elemento.

.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

Imagine esse container como o cubo da imagem abaixo:

Container 3D de imagem

Definindo o container das imagens

Como queremos um efeito de um cartão que gira, vamos criar um elemento que será container das duas imagens. Imagine ele como o elemento laranja da imagem abaixo:

Container de imagens 3D

Portanto, é esse elemento que vamos girar depois. Vamos chamá-lo de flipper

<div class="flip-container" >
    <div class="flipper" >

    </div>
</div>

Vamos definir sua largura e altura como 100%. Assim ele ficará com o mesmo tamanho do seu container. Para que ele mantenha a profundidade que definimos em seu elemento pai (flip-container) quando formos girá-lo, passamos o valor preserve-3d à propriedade transform-style.

.flipper{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

Definindo a Parte da Frente e de Trás

Para podermos separar melhor o que será frente e atrás, vamos criar um container para cada um: front e back.

<div class="flip-container">
  <div class="flipper">
    <div class="front">

    </div>
    <div class="back">

    </div>
  </div>
</div>

Assim será fácil reutilizar este efeito, pois basta colocarmos o que quisermos em cada uma das divs. Para este exemplo utilizarei uma imagem em cada div, mas você pode colocar o que quiser.

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</div>

Girando os elementos

Já vou mostrar como girar os elementos para facilitar o entendimento do que faremos depois.

Como dito anteriormente, o que vamos girar é o elemento flipper. Como queremos que ele mostre a outra face, girando na horizontal, vamos usar a propriedade transform e girá-lo 180 graus no eixo Y.

Imagem 3D - eixo de rotação

Então basta adicionarmos transform: rotateY(180deg) ao elemento flipper. Podemos fazer isso de várias maneiras, como colocar essa propriedade em uma classe CSS e adicionar a classe no flipper em um clique.

Neste exemplo faremos com que essa propriedade seja aplicada ao flipper assim que o usuário passar a seta do mouse em cima do elemento flip-container.

.flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Para que a rotação não ocorra de forma instantânea, e sim como uma transição, vamos adicionar o tempo de transição ao flipper com a propriedade transition. Vamos definir a velocidade da transição para a propriedade transform como 0,8 segundos.

.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

Arrumando a Posição dos Elementos

Ficamos com uma div em cima e outra embaixo. Para que as duas fiquem na mesma posição, vamos definir front e back com position: absolute. Para respeitarem a posição de seu elemento pai (flipper), vamos definir sua posição como relative.

Também vamos definir front e back com altura e largura como 100%, para que eles fiquem com o tamanho total de seu container.

.flipper{
    position: relative;
    ...
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}

Arrumando a Parte Visível

Já temos os elementos da frente e de trás posicionados. Porém, o elemento que é declarado por último sempre fica por cima. Isso faz com que agora nós apenas possamos enxergar a imagem que foi colocada em back.

Primeiro vamos girar back a 180 graus. Como ele inicialmente estará de costas para nós, vamos rotacioná-lo.

.back{
    transform: rotateY(180deg);
}

Agora teremos o front de frente para nós e o back de costas. Quando passarmos o mouse por cima, o front ficará de costas e o back de frente.

Para finalizar este efeito, podemos simplesmente indicar ao CSS que não queremos que seja exibida a parte de trás dos elementos. Assim veremos apenas o elemento que estiver de frente para nós. Fazemos isso passando o valor hidden para a propriedade backface-visibility.

.front, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

Efeito no Clique sem JavaScript

Podemos fazer esse efeito de Flip Card ocorrer após um clique usando apenas CSS. Basta usarmos um Checkbox escondido para definir quando o elemento deverá girar.

Primeiro adicione um checkbox antes de flip-container.

<input type="text" type="checkbox" id="switch" />

E vamos mudar a regra que indica quando o elemento deverá girar. Usando :checked podemos indicar uma regra que ocorre quando um checkbox está marcado.

Troque a regra em que colocamos o .flip-container:hover pela regra a seguir:

#switch:checked ~ .flip-container .flipper {
  transform: rotateY(180deg);
}

Veja que com isso o nosso elemento irá girar quando clicarmos no checkbox.

Podemos fazer o checkbox ser marcado ao clicar no nosso elemento. Basta usar o elemento <label> e indicar o id do nosso checkbox. Assim os cliques feitos no <label> são redirecionados ao checkbox.

Então vamos trocar a div flip-container por um label:

<input type="checkbox" id="switch" />

<label class="flip-container" for="switch" >
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</label>

Veja que agora você pode marcar o checkbox simplesmente clicando na imagem.

Para finalizar, basta esconder o checkbox com display: none.

#switch{
    display: none;
}

Você ainda pode mudar a direção da rotação, tendo os seguintes resultados:

O que é Ionic?

O Ionic é um Framework Open Source gratuito sobre a licença MIT para desenvolvimento de aplicações mobile híbridas.

Aplicações híbridas são aplicativos móveis construídos de maneira alternativa a aplicações nativa. São construídos, geralmente, utilizando HTML+CSS+JavaScript, desta maneira se tornaram extremamente populares, pois permite o desenvolvimento multiplataforma, utilizando o mesmo HTML para diferentes sistemas operacionais.

Aqui no Blog possuímos um artigo “App Nativo x App Híbrido: existe o melhor?” onde você pode conferir mais detalhes.

Ionic - Criação de aplicações mobile
Curso de Ionic - Criação de aplicações mobile
CONHEÇA O CURSO

Caso você não saiba o que é um Framework

O framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base onde as aplicações são construídas, um otimizador de recursos. Tem como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

Aqui no blog também possuímos um artigo sobre “Para que serve um Framework”.

Sendo assim, o que é o Ionic?

Desenvolvido por Max Lynch, Ben Sperry e Adam Bradley da Drifty Co., sua primeira versão teve seu lançamento em 2013 e atualmente encontra-se na versão 4.

Como dito acima, é um Framework para criação de aplicações móveis e desktop de alto desempenho e qualidade, que utiliza as tecnologias web HTML, CSS e JavaScript.

Como diz em seu site, o Ionic ajuda as equipes a criarem e distribuírem belos aplicativos híbridos em várias plataformas, possuindo foco na experiência do usuário ou interação do usuário com o aplicativo (controles, interação, gestos, animações).

Projetado para funcionar e ser exibido em diferentes plataformas, possui um design limpo, simples e funcional, com componentes padrões, tipografia, paradigmas interativos e diversos templates.

Além disso, possui um cliente de linha de comando (CLI) para gerenciar todo projeto criado com o Ionic. O CLI é uma ferramenta que cria aplicativos Ionic de forma rápida e fornece vários comandos úteis para facilitar o desenvolvimento utilizando o Framework. Possui um servidor de desenvolvimento integrado, ferramentas de compilação e depuração, entre outros benefícios.

Para instalar o Ionic CLI basta clicar aqui.

Por que aprender Ionic?

Além da principal vantagem no desenvolvimento de aplicações híbridas, muitas outras vantagens podem ser listadas quando pensamos no Ionic, dentre elas:

  • Estabilidade na criação de aplicações híbridas: Apesar de utilizar HTML, CSS e JS para o desenvolvimento das aplicações, o Ionic entrega um produto altamente estável e com desempenho similar ao de aplicativos nativos;

  • Multiplataforma: Com o Ionic, podemos desenvolver um único código que seja executado em diferentes sistemas operacionais, diminuindo o tempo de desenvolvimento de novas aplicações.

  • Menor tempo de desenvolvimento: Por criar aplicações multiplataforma, o tempo no desenvolvimento dessa aplicação se torna algo vantajoso em relação às aplicações nativas, uma vez que todo código criado será reutilizado para qualquer sistema operacional móvel, diminuindo assim o tempo de desenvolvimento;

  • Menor custo: Uma vez que poupamos o tempo em seu desenvolvimento, estamos poupando os custos desta aplicação, fazendo com que, criar aplicações multiplataforma torne-se algo mais rentável e menos custoso;

  • Prototipação: Criar telas no Ionic é extremamente fácil, pois possui uma ferramenta para esta finalidade, o Ionic Creator, que é uma ferramenta de “arrasta e solta” para facilitar as ideias de criação de suas aplicações que pode ser acessada neste link;

  • Documentação: Além de possuir uma grande comunidade, a documentação do Ionic é bastante completa, entre outras.

O futuro do Ionic

Como dito acima, o Ionic Framework encontra-se na versão 4, lançado no ano de 2019. Esta versão mais recente foi reprojetada para funcionar como uma biblioteca independente de componentes da web, com integrações para os mais recentes frameworks JavaScript, como o Angular, Vue e React. Ou seja, com a nova versão do Ionic, podemos criar aplicativos híbridos utilizando qualquer framework javascript, como Vue, Angular e React.

O Ionic é um excelente framework que, com certeza, poderá ser utilizado para criar aplicativos dos mais diversos segmentos. Sendo assim, este framework é um forte candidato a ser o seu próximo queridinho no desenvolvimento de aplicativos móveis.

Principais editores de código para desenvolvimento

Infinitas são as possibilidades na hora de escolher um editor de texto para utilizar no desenvolvimento dos seus projetos. Sendo assim, neste artigo veremos alguns editores de texto e suas principais características.

Brackets

Desenvolvido pela Adobe Systems, o Brackets é um editor de texto que facilita a criação de páginas web, mantendo seu foco principal no desenvolvimento web. Software livre e de código aberto, atualmente é mantido no GitHub sobre a licença MIT pela adobe e qualquer outro desenvolvedor que queira contribuir com suas melhorias. É um editor de texto escrito em JavaScript, CSS e HTML.

Atualmente encontra-se na versão 1.14 e possui disponibilidade de download nos sistemas operacionais Linux, Windows e Mac.

Dentre suas vantagens e características podemos citar:

  • Personalizável por meio de extensões;
  • Editores expandidos: permite visualizar trechos de código utilizados em outros arquivos;
  • Live Preview: Garante a visualização instantânea de alterações ao mesmo tempo que são executadas;
  • Suporte nativo a pré-processadores.

O download da ferramenta pode ser feito acessando no próprio site da Brackets.

Em sua página é possível contribuir, acessar seu suporte, blog, entre outras opções para te ajudar ainda mais na escolha deste editor.

Desenvolvedor Java Pleno
Formação: Desenvolvedor Java Pleno
A formação Desenvolvedor Java nível Pleno da TreinaWeb tem como objetivo a abordagem da API de acesso a bancos de dados relacionais e a API de manipulação de arquivos, respetivamente o JDBC e a I/O API. A definição e manipulação de arquivos XML e o JavaFX - a biblioteca para criação de aplicações desktop oficial do Java, também são abordados nesta formação. Por fim, ainda são abordadas as boas práticas de modelagem de bancos de dados relacionais e os recursos avançados para desenvolvedores dos bancos de dados MySQL e Oracle.
CONHEÇA A FORMAÇÃO

Sublime Text

Desenvolvido em Python, o Sublime Text é um ferramenta que visa a simplicidade e facilidade de uso. Lançado em 2008, é um editor de texto multiplataforma e proprietário que, dentre diversas características, podemos citar:

  • Comunidade ativa;
  • Extensões baseadas em Python;
  • Coloração de sintaxe personalizável;
  • Pré Visualização do código-fonte;
  • Autocomplete.

O download da ferramenta pode ser feita neste link, assim como acompanhar suas novidades, fórum e encontrar seu suporte.

VSCode (Visual Studio Code)

Criado pela Microsoft, o Visual Studio Code é um editor de texto open source, multiplataforma e gratuito com foco na construção de aplicações web.

Além de contar com uma comunidade extremamente ativa e suporte principalmente para a ASP.Net e Node.js., podemos listar como vantagens:

  • Autocomplete de código;
  • Navegação facilitada entre arquivos;
  • IntelliSense: Conclusões inteligentes com base em tipos de variáveis, definições de função e módulos importados;
  • Depuração de código diretamente do editor;
  • Suporte nativo ao Git;
  • Tarefa em execução;
  • Extensível e personalizável.

Para baixar a ferramenta, basta acessar este link, onde você encontrará sua documentação, blog, extensões e muito mais.

NotePad++

Ideal para iniciantes, o NotePad++ é um editor de código atrativo pela sua simplicidade.

Disponível somente para usuários Windows, é um editor open source sobre a licença GPL (General Public License) que além de suportar diversas linguagens de programação, traz como vantagens:

  • Autocomplete;
  • Sistema de definição de linguagem;
  • Divisão de tela;
  • Suporte para macros, plugins e muitos outros.

O download da ferramenta assim como visualizar suas características, comunidade, recursos e muito mais, pode ser feito a partir deste link.

Atom

Desenvolvido pelo GitHub sobre a licença MIT, o Atom é um editor de código open source, disponível para os sistemas operacionais Windows, Linux e Mac.

Semelhante ao Sublime, porém com alguns diferenciais, o Atom possui integração nativa com o GitHub e consegue trabalhar com comandos Git sem necessidade de nenhuma instalação adicional. Dentre várias características, podemos citar:

  • Editor de código multiplataforma;
  • Comunidade ativa;
  • Gerenciador de pacotes integrado;
  • Autocomplete;
  • Interface simples e amigável;
  • Personalizável.

Para baixá-lo, basta acessar neste link onde você também encontará seus temas, documentação, blog e muito mais.

Criando um Portfólio com o Pingendo

Diferente de um currículo, o portfólio é o meio mais completo de expor sua experiência profissional.

Desta forma, você poderá utilizá-lo para compartilhar suas experiências de maneira mais organizada na web.

Neste artigo criaremos uma página web para que você possa utilizar como portfólio pessoal utilizando o Pingendo.

Ferramenta utilizada

Para criação desta página, utilizaremos o Pingendo pelo fato de ser uma ferramenta de fácil uso e extremamente simples.

Com o Pingendo é possível criar páginas web responsivas no estilo “arrasta e solta”. Por este motivo, esta ferramenta é ideal para criação de páginas mesmo que você não possua tanto conhecimento sobre programação.

O primeiro passo é entrar em seu site no link: https://pingendo.com/ e realizar o download da ferramenta.

Ao clicar no “Download”, selecione o seu sistema operacional e a ferramenta começará a ser baixada.

Após baixar a ferramenta, basta instalá-la em seu computador “NEXT-NEXT-FINISH”, e pronto! Inicializaremos a criação do nosso portfólio.

Neste artigo faremos algo bem básico. Uma pequena página para que você tenha apenas uma noção do que a ferramenta proporciona.

Realizando a criação do nosso Portfólio

Após instalar o Pingendo, abriremos a ferramenta para iniciar.

Logo na página inicial já nos deparamos com alguns templates prontos, e podemos utilizar aquele que mais nos agrada, realizando apenas as alterações necessárias.

Lembrando que não estaremos manipulando códigos (HTML/CSS) na criação deste portfólio, já que a ferramenta permite a criação de páginas no estilo “arrasta e solta”. 🙂

Selecionaremos o template desejado, a pasta de destino e clicaremos em CREATE.

Logo após, selecionamos o arquivo “index.html” para editá-lo.

Pronto! A partir daí, podemos começar a editar todo layout conforme nossa necessidade.

A ferramenta é totalmente simples (como dito acima), e ao clicar nos botões ou sobre as caixas de texto, podemos editá-las, alterá-las, excluí-las ou inserir imagens. Fica a cargo da sua criatividade.

Abaixo, mostraremos algumas formas de editar o template utilizado.

Lembrando que não estamos modificando a estrutura do template utilizado, apenas realizando algumas alterações para se encaixar na página que desejamos criar.

Para alterar o texto, basta clicar sobre componente desejado e inserir o novo texto. Na barra lateral direita, é possível aumentar a fonte, centralizar o texto, alterar a cor, entre outras opções.

É possível também excluir todo o componente ou toda seção a qual este componente pertence, como mostra na imagem abaixo:

Outra opção é poder alterar as imagens, como mostra na imagem abaixo. Clicando na imagem padrão do template, basta procurar na lateral direita a URL da nova imagem e inseri-la.

Abaixo, veremos o Portfólio criado com a ferramenta.

Concluindo:

Neste artigo vimos o quão fácil é criar uma página web com o Pingendo, mesmo que você não tenha tanto conhecimento em programação.

Vale ressaltar que, apesar de ser uma ferramenta de fácil utilização, é importante aprender as tecnologias que envolvem a criação de páginas web (HTML/CSS/JavaScript) pois, desta forma, você poderá criar páginas personalizadas ou até mesmo manipular o código dos templates utilizados pelo Pingendo.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

CSS Grid – Um Guia Interativo (Parte 2 – Itens)

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com CSS Grid. Agora veremos as propriedades que utilizamos nos itens do container.

Itens

Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).

Neste post veremos as propriedades que ficam nos elementos da grid.
Teremos basicamente um container com alguns itens dentro.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Para vermos a diferença das propriedades aplicadas em um item específico, vamos adicionar a este item a classe .selected.

<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

grid-area

Esta propriedade nós já vimos no post anterior. Ao declarar nomes para as áreas da nossa grid, utilizamos o grid-area para indicar a área onde um item irá se posicionar.

grid-column-start, grid-column-end, grid-row-start e grid-row-end

Indicar nomes para cada área da nossa grid e depois posicionar os itens usando o nome é bem simples. Porém, pode ser que você precise de algo mais flexível do que isso.
Com as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end nós podemos indicar em que linha e coluna um item deve iniciar e acabar. Podemos usar tanto número quanto nomes.

grid-column e grid-row

Essas duas propriedades são atalhos para as 4 propriedades anteriores.
Em grid-column nós indicamos o início / fim da coluna, e em grid-row nós indicamos o início e fim da linha. Os valores são separados por /.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Tudo em uma propriedade: grid-area

Podemos também indicar essas 4 posições dentro de apenas uma única propriedade. Para isso também usamos o grid-area. A ordem é inicio-linha / inicio-coluna / fim-linha / fim-coluna

justify-self

Alinha o item da grid horizontalmente dentro de sua própria célula (área).

  • stretch (padrão): estica o item horizontalmente para ele preencher sua célula
  • start: alinha o item no início de sua célula
  • end: alinha o item no fim de suas células
  • center: alinha o item no centro de suas células

align-self

Alinha o item da grid verticalmente dentro de sua própria célula (área).

  • stretch (padrão): estica o item verticalmente para ele preencher sua célula
  • start: alinha o item na parte de cima de sua célula
  • end: alinha o item na parte de baixo de sua célula
  • center: alinha o item no centro de sua célula

place-self

Atalho para align-self e justify-self em uma única declaração.

CSS Grid – Um Guia Interativo (Parte 1 – Containers)

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o CSS Grid. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como ele funciona.

Já fizemos aqui um guia completo sobre FlexBox. Para conferir:

Guia Interativo FlexBox – Parte 1 (Containers)
Guia Interativo FlexBox – Parte 2 (Itens)

Caso você esteja em dúvida sobre usar Flexbox ou CSS Grid, também já fizemos um post sobre isso: Flexbox ou CSS Grid?

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

O Que É CSS Grid?

O CSS Grid é um sistema de estruturação de layout que o CSS nos fornece. Diferente do Flexbox, que apenas nos permite trabalhar em uma única dimensão, o CSS Grid nos permite configurar layouts em duas dimensões (linhas e colunas). A junção de linhas e colunas formam uma grade, o que dá o nome a esse sistema (Grid).

O CSS Grid é bem poderoso e completo, permitindo que certas coisas sejam feitas de mais de uma maneira, o que pode confundir muitos iniciantes. Portanto, aqui irei mostrar as principais partes da forma mais simples para que você já termine de ler este post sabendo trabalhar com o CSS Grid.

Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (grid container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).

Grid Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o grid container.
Teremos basicamente um container com alguns itens dentro. Dependendo do exemplo a quantidade de itens poderá ser alterada.

<div class="container" >
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

Display

Primeiro precisamos definir que o nosso container é do tipo “grid”; Fazemos isso com a propriedade “display”.

.container{
    display: grid;
}

Isso irá criar uma grid do tipo block, significando que o .container irá ocupar a linha inteira.
Caso você queira containers inline, utilize display: inline-grid;

grid-template-columns e grid-template-rows

Como estamos trabalhando com uma grade, precisamos indicar quantas linhas e quantas colunas nossa grade terá.
Para colunas usamos o grid-template-columns e para linhas usamos o grid-template-rows.

Se queremos 3 colunas, não indicamos com o número três. O que fazemos na verdade é indicar qual o tamanho de cada coluna que queremos. A medida pode ser em qualquer unidade (px, em, %, cm, etc). Cada valor deve ser separado por um espaço.

Exatamente da mesma maneira nós declaramos as linhas utilizando a propriedade grid-template-rows.

grid-template-areas

Até agora só declaramos o tamanho das nossas colunas e linhas. Você deve ter notado que nossos itens vão se organizando na grid de acordo com a ordem em que estão no HTML.

Porém, o CSS Grid nos permite ir além disso: podemos dar nomes para cada área da nossa grade e depois indicar onde cada elemento deve ir. Dessa maneira fica bem simples de entender a estrutura da nossa grid. Fazemos isso com a propriedade grid-template-areas.

Vamos alterar um pouquinho o nosso HTML. Iremos colocar as classes header, sidenav, content e footer nos itens da grid para podermos indicar a posição de cada um deles depois.

<div class="container" >
    <div class="item header" ></div>
    <div class="item sidenav" ></div>
    <div class="item content" ></div>
    <div class="item footer" ></div>
</div> 

Para cada item, vamos declarar a propriedade grid-area, que serve para indicar o nome da área em que cada elemento deverá ocupar na grid. Para facilitar eu dei o mesmo nome das classes, mas você pode dar o nome que quiser.

.header{
  grid-area: header;
}
.sidenav{
  grid-area: sidenav;
}
.content{
  grid-area: content;
}
.footer{
  grid-area: footer;
}

Agora vamos ao que interessa: indicar o nome das áreas da nossa grid.
Para dar nomes às áreas de uma mesma linha, escrevemos dentro de aspas "". Ao abrir novas aspas estaremos indicando que estamos indo para a linha seguinte.

No exemplo abaixo nós escrevemos o nome das áreas em uma única linha. Mas para ficar mais simples de entender nós poderíamos ter escrito em linhas separadas. Fica visualmente mais legível:

.container{
    grid-template-areas: "header header" 
                         "sidenav content" 
                         "footer footer";
}

Repetimos header e footer duas vezes porque declaramos duas colunas e queremos que eles ocupem as duas.

Experimente mudar os nomes das áreas de lugar e veja que nossos elementos irão mudar de posição também. Algumas sugestões:

  • “sidenav header” “sidenav content” “sidenav footer”
  • “header header” “content sidenav” “footer footer”
  • “header header” “content sidenav” “footer sidenav”

Se quiser criar uma área sem nome, coloque .. Experimente: “header header” “content sidenav” “. footer”

grid-column-gap, grid-row-gap e grid-gap

Nossos itens estão todos colados. Podemos indicar qual o espaço entre linhas e colunas.
Para isso usamos as propriedades grid-column-gap e grid-column-row.

O grid-gap é um atalho para declarar as duas propriedades em um só lugar.
Se você passar um único valor, os dois serão aplicados para o espaço para linhas e colunas. Se passar dois valores, o primeiro será para linhas e o segundo para colunas.

.container{
    grid-gap: 20px;
    grid-gap: 20px 50px;
}

* O prefixo grid- destas propriedades está sendo removido e já é suportado nos navegadores modernos. Portanto, também pode-se utilizar as propriedades column-gap, row-gap e gap.

Curso de
CONHEÇA O CURSO

justify-items

Alinha todos os itens da grid horizontalmente dentro de sua própria célula (área).

  • stretch (padrão): estica os itens horizontalmente para eles preencherem sua célula
  • start: alinha os itens no início de suas células
  • end: alinha os itens no final de suas células
  • center: alinha os itens no centro de suas células

align-items

Alinha todos os itens da grid verticalmente dentro de sua própria célula (área).

  • stretch (padrão): estica os itens verticalmente para eles preencherem sua célula
  • start: alinha os itens na parte de cima de suas células
  • end: alinha os itens na parte de baixo de suas células
  • center: alinha os itens no centro de suas células

place-items

Atalho para align-items e justify-items em uma única declaração.

justify-content

O justify-item alinha cada item dentro de sua própria área. Já o justify-content alinha horizontalmente as áreas em relação ao container.

  • stretch: redimensiona os itens da grid para preencherem a largura do container. Apenas funciona se você não tiver declarado uma largura para as colunas.
  • start: alinha as áreas no início da grid
  • end: alinha as áreas no final da grid
  • center: alinha as áreas no centro da grid
  • space-around: distribui as áreas com o espaço a sua volta
  • space-between: distribui as áreas com o espaço entre elas
  • space-evenly: distribui o espaço igualmente entre as áreas

align-content

O align-item alinha cada cada item dentro de sua própria área. Já o align-content alinha verticalmente as áreas em relação ao container.

  • stretch: redimensiona os itens da grid para preencherem a altura do container. Apenas funciona se você não tiver declarado uma altura para as linhas.
  • start: alinha as áreas no topo da grid
  • end: alinha as áreas na base da grid
  • center: alinha as áreas no centro da grid
  • space-around: distribui as áreas com o espaço a sua volta
  • space-between: distribui as áreas com o espaço entre elas
  • space-evenly: distribui o espaço igualmente entre as áreas

place-content

Atalho para align-content e justify-content em uma única declaração.

grid-auto-columns e grid-auto-rows

Pode ser que você precise criar novas linhas ou colunas, as quais ainda não estão declaradas. Ao serem criadas, qual o tamanho delas?
Estas propriedades nos permitem indicar qual será o tamanho de novas linhas e colunas criadas.

Um exemplo bem simples é caso você não tenha declarado o tamanho das linhas ou colunas. Ao adicionar novos elementos, eles ficarão com o tamanho indicado nestas propriedades.

Nós aprendemos a posicionar os itens da grid passando o nome das áreas.
Porém, há outra maneira (um pouco mais complicada) de se fazer isso. Após indicar o tamanho das áreas e colunas, podemos indicar em que linha/coluna o item começa e em que linha/coluna ele termina. Ficaria assim:

.item{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3
}
/*ou com os atalhos:*/
.item{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
/*ou com esse atalho*/
.item{
    grid-area: 1 / 2 / 2 / 3;
}

Se você declarar, por exemplo, para um item se posicionar em uma linha ou coluna que não foi declarada, ele ficará com as dimensões declaradas em grid-auto-columns e grid-auto-rows também.

grid-auto-flow

Se você possui itens que não possuem uma área declarada para ficar, esta propriedade indica se estes itens devem ir para uma nova linha ou coluna.

grid

Atalho para definir em uma única declaração as seguintes propriedades: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns e grid-auto-flow

Funções e Valores Especiais

O CSS Grid também veio com palavras-chave que guardam valores especiais e também novas funções para dar ainda mais poder à criação de nossos layouts.

Valores Especiais

Ao declarar as dimensões das linhas e colunas, podemos indicar algumas palavras especiais ao invés de valores numéricos:

  • min-content: o elemento ficará com o tamanho mínimo de seu conteúdo
  • max-content: o elemento ficará com o tamanho máximo de seu conteúdo
  • auto: utiliza o espaço disponível

No exemplo a seguir, o primeiro item ficará com o tamanho mínimo de seu conteúdo, ou seja, seu texto. O segundo item ficará com o tamanho máximo necessário para caber seu conteúdo (texto).
Já o terceiro elemento ficará com o espaço que sobrou.

A unidade fr

Além de indicar a dimensão de linhas e colunas com as tradicionais unidades como px, % e em, agora também contamos com o fr.
Esta unidade indica fração.

No código abaixo cada uma das colunas ficará com 1/3 do espaço disponível (1fr + 1fr + 1fr = 3).

.container{
  /***********/
  grid-template-columns: 1fr 1fr 1fr;
  /***********/
}

No código abaixo a primeira coluna ficará com 50px, a segunda com 2/5 do espaço disponível e a terceira, com 3/5 (2fr + 3fr = 5).

.container{
  /***********/
  grid-template-columns: 50px 2fr 3fr;
  /***********/
}

Experimente brincar com os valores das colunas no Playground abaixo:

A função minmax()

Imagine que você tenha uma linha ou coluna que pode variar de tamanho, mas que ela não pode passar de um valor mínimo ou máximo. Esta função nos permite indicar ambas as dimensões limites.

No código abaixo a primeira e terceira coluna terão 1fr de largura. A segunda coluna terá seu tamanho alterado de acordo com a largura de seu container. O tamanho mínimo será 100px e o máximo será 50% da largura do container (isso mesmo, podemos misturar unidades diferentes!).

.container{
  /***********/
  grid-template-columns: 1fr minmax(100px, 50%) 1fr;
  /***********/
}

Isso ajuda muito a ter mais controle do tamanho dos elementos e também nos poupa de escrever vários media queries.

A função fit-content()

Esta função recebe um único parâmetro, o tamanho máximo que um elemento pode chegar. É como se você usasse o min-content, mas com um controle de tamanho máximo que o elemento pode ter.

Uma diferença principal com o minmax() é que o minmax() sempre buscará ocupar o maior espaço possível, enquanto o fit-content() não ocupará mais espaço do que o necessário.

A função repeat()

Quando precisarmos criar mais de uma linha ou coluna com a mesma dimensão, utilize a função repeat() para não ter que ficar escrevendo várias vezes. Primeiro indicamos o número de repetições e depois, o valor a ser repetido.

No código abaixo nossa primeira coluna terá 50px de largura. Depois teremos 3 colunas com 20px e uma última com 1fr.

.container{
  /***********/
  grid-template-columns: 50px repeat(3, 20px) 1fr;
  /***********/
}

Experimente mudar a quantidade de repetições e o valor da dimensão dos itens repetidos no Playground abaixo.

auto-fill e auto-fit

Junto ao repeat() podemos usar as palavras especiais auto-fill e auto-fit. Isso ajuda muito na hora de criar layouts responsivos de forma bem simples.

Nos exemplos abaixo, note que eu não indiquei quantas colunas eu quero. Na função repeat() eu usei os valores auto-fill e auto-fit.

O auto-fill tenta preencher o espaço disponível com quantos itens der, não importando se os itens estão vazios. Já o auto-fit também tenta colocar quantas colunas der, expandindo os itens para caber no espaço disponível.

Veja que, como estamos usando a função minmax(), também temos controle do tamanho mínimo e máximo dos itens.

CSS Flexbox – Um Guia Interativo (Parte 2 – Itens)

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com Flexbox. Agora veremos as propriedades que utilizamos nos itens do container.

Itens

Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).

Neste post veremos as propriedades que ficam nos elementos filhos.
Teremos basicamente um container com alguns itens dentro.

Curso de
CONHEÇA O CURSO

Para vermos a diferença das propriedades aplicadas em um item específico, vamos adicionar a este item a classe .selected.

<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
</div>

order

Por padrão, os itens de um Flex Container são exibidos na ordem presente no HTML.

Com a propriedade order nós podemos alterar a ordem dos elementos. O valor deve ser um número inteiro, negativo ou positivo.

flex-grow

Indica o quanto um item pode crescer caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter duas vezes mais espaço do que os outros.

flex-basis

Define o tamanho padrão de um elemento antes do espaço disponível ser distribuído. O valor pode ser em px, %, em, etc.

Se o valor for auto, ele irá olhar para o valor de width e height do item.

Se o valor for content, ele irá olhar para o tamanho do conteúdo do item.

flex-shrink

Indica o quanto um item pode encolher caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter metade do espaço do que os outros.

flex

Esta propriedade é apenas um atalho para flex-grow, flex-shrink e flex-basis, nos permitindo declarar os valores em uma única propriedade.

.item.selected{
    flex: 2 4 50px;
}
Curso de
CONHEÇA O CURSO

align-self

Você deve se lembrar da propriedade align-items que vimos no post sobre as propriedades do container.

A propriedade align-self nos permite sobrescrever o valor desta propriedade para um único item. Assim podemos, por exemplo, colocar um único item no final de uma linha enquanto todos os outros estão no começo.