Tag: artigos

Redes sociais para quem gosta de filmes e séries

Redes sociais para quem gosta de filmes e séries

Começarei este texto com uma pergunta básica: quantos filmes você assistiu em 2017? Tudo bem, o ano não acabou ainda, mas o questionamento é válido. Se você não tem a mínima noção do número de horas que passou em frente à TV, no escurinho do cinema ou com o notebook no colo, com o Netflix aberto – mas gostaria de saber -, indicaremos redes sociais essenciais para quem gosta de filmes e séries.
Assim você poderá saber quantos filmes viu e quanto tempo passou fazendo maratona de séries em 2018. Confira:
IMDb
Se você realmente gosta de filmes, com certeza conhece o IMDb. Quando o assunto é cinema, o site é uma das melhores fontes para se consultar. Por lá encontramos curiosidades, ficha técnica, informações sobre o elenco, entre outros.
O conteúdo é disponibilizado em inglês e o que muitos não sabem é que é possível criar um perfil de usuário – sem ser pelo IMDb Pro. A partir da conta é possível listar os filmes que já assistiu e pontuá-los; criar listas temáticas ou participar de fóruns. O legal é que também é possível vincular o perfil com suas redes sociais, como o Facebook, por exemplo. Clique aqui e confira: http://www.imdb.com.
Filmow
Diferentemente do IMDb, O Filmow é todo em português – mas sua interface não é muito legal. Porém, ainda assim, é uma ótima opção para quem gosta de filmes, séries e de se manter bem informado.
Nele você também pode criar um perfil e registrar os filmes que viu, os que deseja assistir e pode dar sua opinião sobre eles em uma página do próprio longa. O legal é que pelo Filmow você também pode interagir com outros perfis. Acesse: https://filmow.com.
Metacritic e Rotten Tomatoes
Se você gosta de ler críticas e estar por dentro das opiniões sobre os filmes que assiste, tanto o Metacritic quanto o Rotten Tomatoes são ideais. O conteúdo de ambos é em inglês e a partir das críticas, os sites geram uma nota para cada filme. O interessante é que no Metacritic, por exemplo, as avaliações de críticos e de usuários do site têm o mesmo destaque. Acesse: www.metacritic.com e  www.rottentomatoes.com.
Letterboxd
Uma das principais características do Letterboxd é sua interface – gente, que interface incrível! E não importa se você é um crítico renomado ou apenas uma pessoa que gosta de cinema, ele não diferencia os usuários, basta ter um perfil por lá e utilizá-lo.
No Letterboxd é possível criar um diário com os filmes que você já assistiu, basta dar um like na página da obra e registrar a data em que foi assistida. Você também pode dar estrelinhas – de 1 a 5 e criar sua própria rede de contatos. Mesmo com o conteúdo em inglês, é fácil de mexer, já que ele é bem intuitivo. Acesse: https://letterboxd.com.
Icheckmovies
Se você é viciado em filmes e listas, bem, não há rede melhor. Pelo Icheckmovies você pode escolher a lista dos filmes que deseja assistir e depois marca os que foram vistos. Você também pode criar as suas próprias listas e encontrar usuários com gostos parecidos. Acesse: www.icheckmovies.com.
Gostou das dicas? Já faça o download dos aplicativos e organize-se para o próximo ano! Se você também gosta de literatura, também separamos redes sociais ideais para viciados em livros. Confira aqui.
Tem mais redes para indicar? Deixe suas sugestões nos comentários! ;)
O post Redes sociais para quem gosta de filmes e séries apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

Redes sociais para quem gosta de filmes e séries
Fonte: Locaweb

Novidade: configure seu domínio próprio de e-mail direto no painel!

Novidade: configure seu domínio próprio de e-mail direto no painel!

Você já sabe que pode usar um domínio próprio tanto para realizar seus envios de e-mail marketing (domínio de envio), quanto para personalizar os links no corpo da mensagem (domínio dos links). Esses ajustes são indicados para melhorar os índices de entregabilidade da sua conta, já que são recomendações de bom uso de provedores como Gmail, Hotmail e Yahoo.
A novidade agora é que você pode fazer as configurações do domínio próprio pelo seu painel. É só ir no menu “Configurações” e no submenu “Domínio” e cadastrar os domínios que deseja utilizar.
Também é necessário realizar algumas alterações de zona de DNS desse domínio (vamos precisar mudar o CNAME, MX e TXT – um para o DKIM e outro para o SPF). Todos os ajustes necessários serão exibidos no seu painel de Email Marketing, no botão gestão de domínios. Basta seguir as orientações disponíveis.
Alguns lembretes importantes:

As alterações das configurações de DNS serão realizadas apenas uma vez;
Caso as quatro autenticações necessárias não estejam configuradas, utilizemos os nossos domínios;
É permitido configurar apenas um domínio de envio por vez;
Se a sua versão de painel não permitir estas configurações, avisa a gente no chat! Vamos te orientar sobre a migração para o novo painel. Lembrando que essa funcionalidade só está disponível a partir da versão 2012 do painel.

Ficou com dúvidas sobre algum termo? Veja o glossário abaixo:
Domínio: serve para localizar e identificar você ou sua empresa na Internet;
DNS: é um protocolo que traduz domínios alfabéticos (abdfc.com.br) enviados por usuários, para endereços de IP numéricos (123.456.789.90) que computadores podem reconhecer;
CNAME: é uma autenticação que personaliza os links e associa o seu domínio a endereços de links para descadastro, visualização externa e das imagens usadas no seu modelo;
DKIM:  é uma autenticação que verifica o cabeçalho da mensagem e certifica ao destinatário que o conteúdo não foi alterado até chegar à sua caixa de destino;
SPF: é uma autenticação que identifica para o provedor de e-mail que quem está enviando aquela mensagem é você mesmo, ou é alguém autorizado.
MX: é uma entrada que define o provedor responsável por receber mensagens de e-mail para um domínio. É importante para report de erros (por exemplo).
Gostou da nova funcionalidade? A gente espera que sim! Fazemos tudo ao alcance para que nossos produtos facilitem ao máximo a vida de vocês, clientes!
O post Novidade: configure seu domínio próprio de e-mail direto no painel! apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

Novidade: configure seu domínio próprio de e-mail direto no painel!
Fonte: Locaweb

8 palavras que todo viciado em série precisa conhecer

8 palavras que todo viciado em série precisa conhecer

Se você gosta de séries tanto quanto a gente, já deve ter se deparado com alguns termos em inglês que fazem parte desse universo. Em uma conversa com os amigos ou ao ler um artigo sobre sua série preferida, provavelmente conheceu palavras como spin-off, crossover, e fall season. O significado delas e muitas outras a gente explica agora. Preparado?
Let’s go!
 
1 – Cliff-hanger
Sabe aquela cena tensa no final de um episódio e que faz você ficar curioso, querendo logo ver o próximo? Ela é chamada de cliff-hanger. Traduzindo do inglês para o português, cliff significa penhasco e hanger vem de “to hang” e quer dizer cabide, aquilo que segura. Entende agora o porquê do termo?
 
2 – Crossover
Quando dois ou mais personagens de diferentes universos se encontram em outra história, chamamos de crossover. Um exemplo é a união de Supergirl com os personagens de Arrow, The Flash e Legends of Tomorrow.
 
3 – Hiatus
Um hiatus (hiato), como você já pode imaginar, significa uma interrupção na série – mas isso não significa que ela tenha acabado. O termo tem mais a ver com uma pausa que os atores e produtores possam descansar.
 
4 – Fall season
Fall significa outono. Geralmente as esperadíssimas novas temporadas ou séries novas estreiam em setembro, durante o outono americano. Por isso fall season.
 
5 – Pilot
Sim, Pilot é o episódio piloto, mas isso não significa que ele seja o primeiro episódio que você assiste. Ele também pode ser uma demonstração, um episódio produzido para vender a série para canais de televisão e pode conter um resumo da história.
 
6 – Plot Twist
Sabe aquela mudança repentina na história, um fato que transforma toda a série? Isso quer dizer plot twist. Plot, em inglês, significa enredo e twist, guinada. O termo também é usado dentro do mundo literário.
 
7 – Spin-off
Dentro do mundo das séries o termo spin-off define uma série que derivou de outra. Recentemente foi lançada Young Sheldon, série que traz a infância do personagem Sheldon Cooper, de The Big Bang Theory. Ela é um spin-off, assim como Joey, que foi originada a partir do personagem de Friends.
 
8 – Spoiler
Esse termo você conhece tão bem que chega a suar frio só em pensar nele. Spoiler vem de “To Spoil” e significa estragar. E, realmente, um spoiler pode estragar – e muito – a experiência de quem está assistindo a uma série. Imagina descobrir algo que aconteceu em um episódio, sem ter visto ainda? É…
 
Agora que você sabe o que essas palavras significam, vai fazer bonito nas conversas sobre séries! Se algum termo ficou de fora, deixe nos comentários! ;)
O post 8 palavras que todo viciado em série precisa conhecer apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

8 palavras que todo viciado em série precisa conhecer
Fonte: Locaweb

Flexbox CSS3 – Guia para iniciantes

Flexbox CSS3 – Guia para iniciantes

Eae? Tudo bele?
Para quem está iniciando no desenvolvimento de interfaces web um dos maiores desafios é criar layouts. Isso porque se trata de um fundamento importante responsável por dar “cara” a interface e servir de “abrigo” para os conteúdos.
O que se espera de um profissional responsável por projetar layouts para aplicações e web sites? Você já pensou sobre isso? No mínimo que se conheça os principais métodos para layoutar e que com esses conhecimentos seja possível aplica-los em aspectos importantes do layout. Mas quais os principais métodos para isso?
No passado todo o processo de construção de layouts era concebido por tabelas HTML e recursos CSS como floats, posicionamentos, inline-blocks, entre outros, que podem ser considerados ultrapassados em relação a outros métodos que surgiram.
Um destes métodos mais modernos é um modelo conhecido como Flexbox ou Flexibe Box Layout e chegou para layoutar de forma a não se apoiar em comportamentos inadequados e sem as limitações que eram encontradas nos métodos mais antigos.
Nesse artigo você vai conhecer as propriedades que envolvem este incrível método para que você possa a partir de hoje praticar e aplicar em seus projetos. Então vamos nessa?
Para começa vamos saber exatamente o que é Flexbox.
O que é Flexbox?
Flexbox é um recurso CSS3 que serve de modelo para desenvolvimento de layouts para websites e aplicações web visando organizar elementos dentro de contêiners de forma flexível conforme sua necessidade.
E essa flexibilidade se caracteriza pela capacidade de alterar a largura e / ou a altura dos elementos (que são tratados como itens) para se adequarem ao espaço disponível em qualquer dispositivo de exibição. Um recipiente flexível expande os itens para preencher o espaço livre disponível ou encolhe-os para evitar o transbordamento.
Além disso, Flexbox permite que se alinhem os itens horizontalmente e verticalmente, ordenando-os em diferentes posições no layout independente de como aparecem no documento HTML, e também permite que disponha os itens na horizontal (linhas) e na vertical (colunas).
Com essas características do Flexbox com certeza você poderá construir layouts de forma dinâmica.
Flex Container e Flex itens
O que indica que um layout está utilizando Flexbox é definição da propriedade display de um contêiner, o Flex Container, com o valor flex, ou inline-flex. Veja o código a seguir.
Código CSS:.container {
display: flex;
}
Mas mesmo que esta propriedade esteja definida não quer dizer que Flexbox funcionará. Ele não funciona apenas declarando CSS para um único elemento HTML. Deve existir uma relação entre um elemento pai, o contêiner que recebe o display: flex; e pelo menos um filho para que a mágica aconteça.
Quando você declara no elemento pai o display: flex você está convertendo todos os elementos filhos, os Flex Itens, para se comportarem como caixas flexíveis. Detalhe importante; o elemento pai não se torna flexível ao menos que ele seja filho de outro elemento que recebeu display: flex;.
Um Flex Container possui termos que definem os tamanhos, eixos e direções aplicados, no caso da imagem a seguir, a uma linha.

Existe uma propriedade em particular chamada flex-direction, e que a entenderemos mais a frente, que dispõe os Flex Itens de um Flex Container ou no eixo horizontal (Main Axis) ou no eixo vertical (Cross Axis).
Por padrão, Main Axis, que é o Eixo principal está na horizontal e faz com que os Flex Itens se aninhem um ao lado do outro em uma linha, enquanto Cross Axis é o eixo secundário. Porém isso pode ser invertido para que Main Axis fique na vertical e os Flex Itens se aninhem um abaixo do outro em uma coluna.
Por padrão, ou melhor dizendo, quando Main Axis está na horizontal, main-size corresponde a largura, mas se setarmos Main Axis para horizontal main-size será a altura.
E também por padrão, podemos dizer que Main Axis começa no ponto extremo à esquerda (main-start) e termina a direita (main-end) e Cross Axis começa no ponto extremo acima (cross-start) e termina abaixo (cross-end).
Propriedades para Flex Container
Vou agora apresentar uma a uma as propriedades Flexbox que estilizam um elemento Flex Container:
display
A propriedade CSS display espeficica como elementos HTML devem ser apresentados em relação ao tipo de caixa de renderização.
Com o valor “flex” ou “inline-flex” atribuído a esta propriedade, o contêiner e se torna flexível. Consequentemente seus filhos se tornam Flex Itens. Veja os códigos a seguir.
Código HTML:<div class=”container”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
Código CSS:.container {
display: flex; /* ou inline-flex */
background-color: #cdf6eb;
margin: 20px auto;
max-width: 500px;
font-family: sans-serif;
}
.container div {
background: #028082;
margin: 8px 4px;
font-size: 1em;
color: #fff;
}
A seguir podemos ver os resultados usando o JSFiddle para versão com display: flex e, logo em seguida com display: inline-flex. Para melhor entendimento você pode navegar entre as abas result, HTML e CSS para ver o aspecto visual e a codificação usada.
1 – display: flex:

2 – display: inline-flex:

flex-direction
Flex-direction é aplicada no contêiner, mas define o fluxo de exibição que os Flex Itens serão dispostos. É esta propriedade que pode mudar o Eixo principal da posição horizontal (Flex Itens aninhados lado a lado em linha) para na vertical (Flex Itens aninhados um abaixo do outro em coluna). Conheça os possíveis valores para esta propriedade:

row: Este é o valor padrão, onde os itens são organizados para exibição em forma de linha da esquerda para a direita;
row-reverse: Os itens também são organizados em linha, só que em ordem reversa em relação ao valor anterior. Da direita para a esquerda;
column: Os itens são organizados em forma de colunas iniciando de cima para baixo;
column-reverse: Os itens são organizados em forma de colunas, só que iniciando de baixo para cima.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>row</h4>
<div class=”container row”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
</div>
<h4>row-reverse</h4>
<div class=”container row-reverse”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
</div>
<h4>column</h4>
<div class=”container column”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
</div>
<h4>column-reverse</h4>
<div class=”container column-reverse”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
}
.row {
flex-direction: row;
}
.row-reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column-reverse {
flex-direction: column-reverse;
}
.container div {
background: #028082;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.row div, .row-reverse div {
margin: 8px 4px;
width: 80px;
}
.column div, .column-reverse div {
margin: 8px;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

flex-wrap
A propriedade flex-wrap determina se um Flex Container é de linha única ou multilinhas. O que ocorre é que por padrão os Flex Itens tentarão se ajustar dentro de uma linha mesmo que ultrapassem visualmente a largura do elemento pai. O flex-wrap oferece a opção de quebra de linha para que os elementos filhos se ajustem adequadamente.
Conheça os possíveis valores para esta propriedade Flexbox:

nowrap: Este é o valor padrão. Com ele todos os itens inseridos dentro do Flex Container serão dispostos em uma linha mesmo que ultrapasse a largura do contêiner;
wrap: Ocorrerá a quebra de linha se alguns dos itens ultrapassar a largura do Flex Container. Os itens mais à direita serão deslocados para a linha de baixo;
wrap-reverse: Também ocorrerá a quebra de linha se alguns dos itens ultrapassar a largura do Flex Container, só que neste caso os itens mais à direita serão deslocados para a linha de cima.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>nowrap</h4>
<div class=”container nowrap”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
</div>
<h4>wrap</h4>
<div class=”container wrap”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
</div>
<h4>wrap-reverse</h4>
<div class=”container wrap-reverse”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}
.wrap-reverse {
flex-wrap: wrap-reverse;
}
.container div {
background: #028082;
margin: 8px 4px;
width: 80px;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

flex-flow
A propriedade flex-flow é um propriedade de declaração única para escrita das propriedades flex-direction e flex-wrap.
Ao usar as propriedades flex-direction e flex-wrap usualmente a declaração fica da seguinte forma:.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Agora a forma abreviada com flex-flow:.container {
display: flex;
flex-flow: row wrap;
}
justify-content
Justify-content é uma propriedade que define o alinhamento dos Flex Itens ao longo do eixo principal do contêiner.

flex-start: Esse é o valor padrão. Os Flex Itens são alinhados a partir do início do contêiner;
flex-end: Os Flex Itens são alinhados a partir do fim do contêiner;
center: Os itens são alinhados ao centro do contêiner;
space-between: Cria um alinhamento uniforme entre os Flex Itens com um espaçamentos entre esses elementos. O primeiro item é deslocado para o início, e o último é deslocado para o final do contêiner;
space-around: Os Flex Itens também são uniformemente distribuídos ao longo contêiner, onde é criado um espaçamento ao redor dos elementos. Com isso, o primeiro e o último item possuirão margens e não ficaram grudados as extremidades do contêiner.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>flex-start</h4>
<div class=”container flex-start”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>flex-end</h4>
<div class=”container flex-end”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>center</h4>
<div class=”container center”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>space-between</h4>
<div class=”container space-between”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>space-around</h4>
<div class=”container space-around”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.container div {
background: #028082;
margin: 8px 4px;
height: 80px;
width: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

align-items
Align-items é uma propriedade que define como os Flex Itens serão distribuídos ao longo do eixo transversal do contêiner. Conheça os possíveis valores para esta propriedade:

stretch: Esse é o valor padrão. Neste caso os Flex Itens serão esticados para preencher toda a dimensão do eixo transversal igualmente;
flex-start: Desloca os Flex Itens para o início do eixo transversal;
flex-end: Desloca os Flex Itens para o final do eixo transversal;
center: Os Flex Itens são centralizados no eixo transversal;
baseline: Alinha os Flex Itens a partir da base da primeira linha de texto de cada um deles.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>stretch</h4>
<div class=”container stretch”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>flex-start</h4>
<div class=”container flex-start”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>flex-end</h4>
<div class=”container flex-end”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>center</h4>
<div class=”container center”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>baseline</h4>
<div class=”container baseline”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 400px;
font-family: sans-serif;
}
.stretch {
align-items: stretch;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}
.center {
align-items: center;
}
.baseline {
align-items: baseline;
}
.container div {
background: #028082;
margin: 8px 4px;
width: 80px;
font-size: 1em;
color: #fff;
flex: 1;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

align-content
Align-content é uma propriedade que define como as linhas são distribuídas ao longo do eixo transversal do contêiner. Conheça os possíveis valores para esta propriedade:

stretch: Este é o valor padrão. As linhas são distribuídas uniformemente ao longo do eixo transversal.
flex-start: Distribui as linhas a partir do início do eixo transversal;
flex-end: Distribui as linhas a partir do fim do eixo transversal;
center: Mantém as linhas no centro do eixo transversal;
space-between: Cria um espaçamento entre as linhas. Onde a primeira linha é deslocada para o início do eixo transversal, a última é deslocada para o final do eixo transversal;
space-around: As linhas são uniformemente distribuídos ao longo do eixo transversal, onde é criado um espaçamento ao redor delas. Com isso, a primeira e o última linha possuirão margens e não ficaram grudadas as extremidades do contêiner.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>stretch</h4>
<div class=”container stretch”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>flex-start</h4>
<div class=”container flex-start”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>flex-end</h4>
<div class=”container flex-end”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>center</h4>
<div class=”container center”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>space-between</h4>
<div class=”container space-between”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>space-around</h4>
<div class=”container space-around”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
height: 300px;
font-family: sans-serif;
flex-wrap: wrap;
}
.stretch {
align-content: stretch;
}
.flex-start {
align-content: flex-start;
}
.flex-end {
align-content: flex-end;
}
.center {
align-content: center;
}
.space-between {
align-content: space-between;
}
.space-around {
align-content: space-around;
}
.container div {
background: #028082;
margin: 8px 4px;
font-size: 1em;
color: #fff;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

Propriedades para Flex Itens
Vou agora apresentar uma a uma as propriedades que estilizam Flex Itens:
flex-grow
A propriedade flex-grow serve para especificar o fator de crescimento que um Flex Item terá em relação aos outros Flex Itens encontrados em um Flex Container. O valor especificado deve ser um número positivo. Por padrão o valor de flex-grow é 0, ou seja, os Flex Itens não crescem.
Quanto maior o valor de flex-grow, mais o Flex Item poderá crescer relativamente aos outros items. Para entender melhor imagine que você possui em uma linha de um contêiner 3 Flex Itens. Dois deles foram determinados flex-grow: 1, e um flex-grow: 2. O flex-grow: 2 tentará ocupar duas vezes mais espaço do espaço disponível que os outros itens.
Uma coisa que não devemos nos confundir é sobre a dimensão do quanto de espaço que um Flex Item tentará ocupar. Não é porque um flex-grow tenha um fator de crescimento 2 que ele terá o dobro de ocupação. Existe um cálculo envolvendo este fator mais o espaço disponível que determina quanto de largura, caso flex-direction: row, ou altura, caso flex-direction: column, um Flex Item deve ter.
Imagine o exemplo anterior onde um Flex Item tem o flex-grow: 2 e os outros dois tem flex-grow: 1. Vamos estipular para esses três Flex Itens uma largura de 100 pixels (flex-basis: 100px;) onde o contêiner, elemento pai destes itens tem uma largura (width) de 500 pixels.
O flex-grow quando possui valor acima de 0 faz com que os Flex Itens cresçam (se flex-wrap: wrap, não estiver declarado) para ocupar a largura do contêiner. Ou seja, os três Flex Itens, mesmo com a somas das larguras declaradas dando 300 pixels se distribuem para ocupar a largura de 500 pixels do contêiner. E aí que entra o cálculo da unidade de crescimento.
Observação: flex-basis, citado no parágrafo anterior, será melhor explicado no próximo tópico. Enquanto isso basta saber que esta propriedade define o tamanho inicial (largura ou altura) que um Flex Item deve ter antes que o espaço ao seu redor seja distribuído por outras propriedades.
Unidade de crescimento = espaço disponível / soma dos fatores de crescimento de todos itens
Sendo que, espaço disponível é o valor da largura do Flex Container (500 pixels) menos a soma das largura dos Flex Itens (300 pixels). Ou seja 200 pixels. E a soma dos fatores de crescimento dos Flex Itens é 4. Agora aplicando na fórmula:
Unidade de crescimento = 200px / 4 = 50px.
Agora para saber quanto cada Flex Item cresceu basta multiplicar o fator de crescimento por 50 pixels e somar pela largura (flex-basis: 100px;).
Resultado:
1 – Flex Itens com flex-grow: 1: (50px x 1) + 100px = 150 pixels.
2 – Flex Item com flex-grow: 2: (50px x 2) + 100px = 200 pixels.
Agora vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>flex-grow: 0;</h4>
<div class=”container”>
<div class=”grow_0″>Item 1</div>
<div class=”grow_0″>Item 2</div>
<div class=”grow_0″>Item 3</div>
<div class=”grow_0″>Item 4</div>
</div>
<h4>flex-grow: 1;</h4>
<div class=”container”>
<div class=”grow_1″>Item 1</div>
<div class=”grow_1″>Item 2</div>
<div class=”grow_1″>Item 3</div>
<div class=”grow_1″>Item 4</div>
</div>
<h4>flex-grow: 0; e flex-grow: 2;</h4>
<div class=”container”>
<div class=”grow_0″>Item 1</div>
<div class=”grow_2″>Item 2</div>
<div class=”grow_0″>Item 3</div>
<div class=”grow_0″>Item 4</div>
</div>
<h4>flex-grow: 0; | flex-grow: 2 | flex-basis: 100px ;</h4>
<div class=”container”>
<div class=”grow_1 basis”>Item 1</div>
<div class=”grow_2 basis”>Item 2</div>
<div class=”grow_1 basis”>Item 3</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
flex-wrap; wrap;
}
.grow_0 {
flex-grow: 0;
}
.grow_1 {
flex-grow: 1;
}
.grow_2 {
flex-grow: 2;
}

.container div {
background: #028082;
margin: 8px 4px;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}

h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

flex-basis
Como já citado anteriormente, flex-basis define o tamanho inicial que um Flex Item deve ter antes que o espaço ao seu redor seja distribuído por outras propriedades. No caso flex-grow e flex-shrink, está útltima ainda a ser retratada nesta artigo.
Quando o eixo principal for horizontal, esta propriedade define a largura mínima antes que espaço restante seja distribuído, quando for vertical defina e altura mínima.
Por padrão seu valor é auto (flex-basis: auto) que quer dizer ao tamanho da largura (ou altura) do Flex Item. Caso se para esse Flex Item não for determinado um tamanho de width, caso o eixo principal for horizontal, ou height, caso vertical, então flex-basis: auto; equivalerá ao tamanho do conteúdo.
Além do valor auto, esta propriedade também pode receber valores para dimensões, como pixels e porcentagens.
Agora vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>flex-basis: auto (flex-grow: 1; procurará distribuir os itens para ocupar o espaço do contêiner);</h4>
<div class=”container”>
<div class=”grow_1 basis_auto”>Item 1</div>
<div class=”grow_1 basis_auto”>Item 2</div>
<div class=”grow_1 basis_auto”>Item 3</div>
<div class=”grow_1 basis_auto”>Item 4</div>
</div>
<h4>flex-basis: auto (Com flex-grow: 0; os itens não ocuparão o espaço do contêiner e a largura deles será equivalente ao tamanho do conteúdo)</h4>
<div class=”container”>
<div class=”grow_0 basis_auto”>Item 1</div>
<div class=”grow_0 basis_auto”>Item 2</div>
<div class=”grow_0 basis_auto”>Item 3</div>
<div class=”grow_0 basis_auto”>Item 4</div>
</div>
<h4>flex-basis: 125px;</h4>
<div class=”container”>
<div class=”grow_1 basis_125″>Item 1</div>
<div class=”grow_1 basis_125″>Item 2</div>
<div class=”grow_1 basis_125″>Item 3</div>
<div class=”grow_1 basis_125″>Item 4</div>
</div>
<h4>flex-basis: 100px (A somatória da largura dos Flex Itens é igual a 400 pixels. Mas mesmo assim flex-grow: 1; fará que os itens ocupem o espaço de 500 pixels do contêiner);</h4>
<div class=”container”>
<div class=”grow_1 basis_100″>Item 1</div>
<div class=”grow_1 basis_100″>Item 2</div>
<div class=”grow_1 basis_100″>Item 3</div>
<div class=”grow_1 basis_100″>Item 4</div>
</div>
<h4>flex-basis: 100px (Com flex-grow: 0; os itens não ocuparão o espaço do contêiner e a largura deles será equivalente ao tamanho do conteúdo)</h4>
<div class=”container”>
<div class=”grow_0 basis_100″>Item 1</div>
<div class=”grow_0 basis_100″>Item 2</div>
<div class=”grow_0 basis_100″>Item 3</div>
<div class=”grow_0 basis_100″>Item 4</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
flex-wrap; wrap;
}
.grow_0 {
flex-grow: 0;
}
.grow_1 {
flex-grow: 1;
}
.basis_auto {
flex-basis: auto;
}
.basis_100 {
flex-basis: 100px;
}
.basis_125 {
flex-basis: 125px;
}
.container div {
background: #028082;
margin: 8px 4px;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
padding: 0 6%;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

flex-shrink
Enquanto no flex-grow define a capacidade dos Flex Itens de crescerem o flex-shrink faz exatamente o contrário ele define a redução, ou seja, ele serve para especificar o fator de encolhimento que um Flex Item terá em relação aos outros Flex Itens encontrados em um Flex Container.
Por padrão o valor de flex-shrink é 1, ou seja, os Flex Itens reduzem de tamanho para caber dentro do espaço disponível no contêiner.
Quanto maior o valor de flex-shrink, mais o Flex Item poderá reduzir de tamanho relativamente aos outros items.
E em qual situação o flex-shrink reduz o tamanho dos Flex Itens? Quando o espaço disponível é negativo, ou seja, quando a somatória das larguras (ou alturas, se o eixo principal for na vertical) dos Flex Itens ultrapassar o tamanho do Flex Container.
Com isso deduzimos que também existe uma formula para sabermos em quanto os Flex Itens são reduzidos para caber no container.
Unidade de encolhimento = espaço disponível / soma dos fatores de encolhimento de todos itens
Sendo que, espaço disponível é o valor da largura do Flex Container menos a soma das largura dos Flex Itens. O que resulta em um valor negativo.
Vamos imagina a seguinte situação. Temos um Flex Container com 500 pixels enquanto a largura dos Flex Itens somadas dá 800 pixels (flex-basis: 200px; para cada um de quatro itens) e a soma dos fatores de encolhimento de todos eles é 5 (um deles possui fator 2 e os restantes fator 1). Vamos transpor esses valore à formula.
Unidade de encolhimento = (500px – 800px) / 5 = -60 pixels;
Agora para saber quanto cada Flex Item encolheu basta multiplicar o fator de encolhimento por -60 pixels e somar pela largura (flex-basis: 100px;).
Resultado:
1 – Flex Itens com flex-shrink: 1: (-60px x 1) + 200px = 140 pixels.
2 – Flex Item com flex-shrink: 2: (-60px x 2) + 200px = 80 pixels.
Agora vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>flex-shrink com valor maior que zero define que Flex Itens devem encolher para caber no contêiner;</h4>
<div class=”container”>
<div class=”shrink_1 basis”>Item 1</div>
<div class=”shrink_2 basis”>Item 2</div>
<div class=”shrink_1 basis”>Item 3</div>
<div class=”shrink_1 basis”>Item 4</div>
</div>
<h4>flex-shrink: 0; (Flex Itens não encolhem)</h4>
<div class=”container”>
<div class=”shrink_0 basis”>Item 1</div>
<div class=”shrink_0 basis”>Item 2</div>
<div class=”shrink_0 basis”>Item 3</div>
<div class=”shrink_0 basis”>Item 4</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
flex-wrap; wrap;
}
.shrink_0 {
flex-shrink: 0;
}
.shrink_1 {
flex-shrink: 1;
}
.shrink_2 {
flex-shrink: 2;
}
.basis {
flex-basis: 200px;
}
.container div {
background: #028082;
margin: 8px 4px;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
padding: 0 6%;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

flex
Esta é a abreviatura para flex-grow, flex-shrink, flex-basis combinados nesta sequencia. O padrão é flex: 0 1 auto;. O uso da abreviatura é recomendada em vez de definir as propriedades separadamente..item {
flex: 0 1 auto;
}
A declaração acima faz do flex item inflexível quando há espaço disponível no contêiner, mas permite encolher quando há espaço insuficiente.
order
O padrão faz com que os Flex Itens aparecem no contêiner na ordem que são inseridos no HTML. Mas essa ordem pode ser alterada através da propriedade order sendo que se inicia de uma valor menor para o maior. O valor inicial de order é 0 e também é possível especificar valores negativos.
Agora vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>order – exemplo 1</h4>
<div class=”container row”>
<div class=”grow_1 order_3″>Item 1</div>
<div class=”grow_1″>Item 2</div>
<div class=”grow_1 order_4″>Item 3</div>
<div class=”grow_1 order_2″>Item 4</div>
</div>
<h4>order – exemplo 2</h4>
<div class=”container row”>
<div class=”grow_1 order_2″>Item 1</div>
<div class=”grow_1 order_4″>Item 2</div>
<div class=”grow_1 order_2″>Item 3</div>
<div class=”grow_1 order_menosUm”>Item 4</div>
</div>
<h4>order – exemplo 3</h4>
<div class=”container column”>
<div class=”grow_1 order_2″>Item 1</div>
<div class=”grow_1″>Item 2</div>
<div class=”grow_1 order_4″>Item 3</div>
<div class=”grow_1 order_2″>Item 4</div>
</div>
<h4>order – exemplo 3</h4>
<div class=”container column”>
<div class=”grow_1 order_3″>Item 1</div>
<div class=”grow_1 order_4″>Item 2</div>
<div class=”grow_1 order_2″>Item 3</div>
<div class=”grow_1 order_menosUm”>Item 4</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
flex-wrap; wrap;
}
.order_menosUm {
order: -1;
}
.order_1 {
order: 1;
}
.order_2 {
order: 2;
}
.order_3 {
order: 3;
}
.order_4 {
order: 4;
}
.grow_1 {
flex-grow: 1
}
.column {
flex-direction: column;
}
.container div {
background: #028082;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.row div {
margin: 8px 4px;
width: 80px;
}
.column div {
margin: 8px;
}
h4 {
margin: 20px 0 0 20px;
padding: 0 2%;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

align-self
Esta propriedade permite definir um alinhamento de um único Flex Item dentro de um contêiner sobrescrevendo o que foi definido no align-itens do Flex Container. Conheça os possíveis valores para esta propriedade:

auto: Este é o valor padrão. Com ele declarado o comportamento definido no container por meio do align-items é respeitado.
stretch: Neste caso o item será esticado para preencher toda a dimensão do eixo transversal (largura ou altura) igualmente;
flex-start: Desloca o item para o início do eixo transversal;
flex-end: Desloca o item para o final do eixo transversal;
center: O item é centralizado no eixo transversal;
baseline: Alinha o item a partir da base da primeira linha de texto de dos demais itens.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>Todo os valores de align-self + algin-items: flex-end</h4>
<div class=”container1 align-items_flex-end”>
<div class=”item_1″>Item 1</div>
<div class=”item_2 stretch”>Item 2</div>
<div class=”item_3 flex-start”>Item 3</div>
<div class=”item_4 flex-end”>Item 4</div>
<div class=”item_4 center”>Item 5</div>
<div class=”item_6 baseline”>Item 6</div>
</div>
<h4>Todo os valores de align-self + algin-items: flex-end</h4>
<div class=”container2 align-items_flex-end column”>
<div class=”item_1″>Item 1</div>
<div class=”item_2 stretch”>Item 2</div>
<div class=”item_3 flex-start”>Item 3</div>
<div class=”item_4 flex-end”>Item 4</div>
<div class=”item_4 center”>Item 5</div>
<div class=”item_6 baseline”>Item 6</div>
</div>
Código CSS:.container1, .container2 {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 400px;
font-family: sans-serif;
}
.container1 {
height: 100px;
}
.stretch {
align-self: stretch;
}
.flex-start {
align-self: flex-start;
}
.flex-end {
align-self: flex-end;
}
.center {
align-self: center;
}
.baseline {
align-self: baseline;
}
.align-items_flex-end {
align-items: flex-end;
}
.column {
flex-direction: column;
}
.container1 div, .container2 div {
background: #028082;
margin: 4px;
font-size: 1em;
color: #fff;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

Conclusão sobre Flexbox
Podemos concluir que o uso de Flexbox aperfeiçoa ainda mais a forma como desenvolvemos layouts por causa de suas características avançadas de como manipular os itens.
O próximo passo após a leitura deste artigo e praticar cada propriedade mencionada. Até aqui tivemos uma pincelada sobre aspectos introdutórios deste método. Para uma pesquisa mais avançada você pode recorrer a documentação W3C.
Uma observação importante: O mundo do desenvolvimento web sempre avança e sempre tem coisa nova. Quando falamos de CSS então sabemos que ele teveum avanço significativo nos últimos tempos. Tanto que quando falamos de layouts temos um recurso semelhante e mais atual ao Flexbox chamado CSS Grid Layout e que possui um artigo aqui no blog que sugiro que leia. E porque estou citando ele?
Porque rapidamente é importante que você saiba que ambos trabalham com a construção de layout e que existe uma diferença fundamental entre eles.
O Flexbox destina-se a layouts unidimensionais mais simples que possam ser dispostos em linha reta. É mais apropriado para os componentes de um aplicativo e layouts em pequena escala.
Já o CSS Grid Layout destina-se a layouts bidimensionais mais complexos. É adequado para organizar a estrutura de layout de elementos de nível mais alto, como cabeçalhos, rodapés, sidebar e seções.
Tendo isso esclarecido, agora me diga o que achou do Flexbox. Já utilizou alguma vez em seus projetos? Deixe sua opinião e aproveite e compartilhe sobre esse assunto com seus amigos!
Forte abraço.
Até mais.
Referências:


https://www.w3.org/TR/css-flexbox-1/

CSS Flexbox Layout Guide

Flexbox


https://www.devmedia.com.br/css3-flexbox-funcionamento-e-propriedades/29532
Imagem:
https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg
The post Flexbox CSS3 – Guia para iniciantes appeared first on Chief of Design.

Flexbox CSS3 – Guia para iniciantes
Fonte: Chef of Design

7 curiosidades sobre a Atari que você precisa saber

7 curiosidades sobre a Atari que você precisa saber

Há 45 anos era lançado um dos jogos mais clássicos da Atari, o Pong. Ele não tinha os gráficos que os games de hoje possuem, mas foi extremamente importante para a história do videogame.
O jogo eletrônico simula o tênis de mesa; foi desenvolvido por Nolan Bushnell e Ted Dabney e instalado pela primeira vez em um bar de São Francisco, na Califórnia. Ele nada mais era do que um console ligado a um monitor e movido a moedas. Foi por causa do Pong que a Atari foi fundada – em 27 de junho de 1972.
Diante disso, listamos 7 curiosidades sobre a Atari que todo gamer precisa saber. Confira:
1 – O preço nos dias de hoje
Em 1972, quando foi lançado, o Atari custava US$ 250 (o que hoje equivale a R$ 800, levando em consideração a cotação atual do dólar). Se corrigirmos o valor do videogame de acordo com a inflação nesses anos, seu preço estaria em torno dos R$ 3 mil – isso sem contar com as tributações brasileiras…
2 – Steve Jobs foi funcionário da Atari
Talvez você não saiba que Steve Jobs trabalhou na Atari entre 1974 e 1975 e essa foi sua única experiência como empregado. Depois ele saiu da empresa para montar a Apple, em conjunto com Steve Wozniak. Antes, os dois criaram o Breakout, jogo de 1976 da Atari.
Para quem deseja saber mais sobre esse tempo que ele passou na empresa, indicamos o livro Steve Jobs – A Biografia, escrito por Walter Isaacson e o filme Jobs.
3 – Bill Gates também participou da história da Atari
A Atari precisou contratar uma empresa que a auxiliasse na linguagem de programação BASIC para o Atari 800. Um jovem desenvolvedor foi responsável pelo projeto, ele era ninguém mais, ninguém menos do que Bill Gates e a organização que ofereceu o serviço era a Microsoft, mas depois de um ano o tal software não estava pronto. Com isso, Gates foi dispensado.
4 – O Atari teve sua versão fitness
O primeiro aparelho eletrônico que visava a prática de exercícios físicos foi criado pela Atari, em 1982 e se chamava Puffer. A ideia é que as pessoas jogassem ao mesmo tempo em que pudessem exercitar o corpo e melhorar sua saúde e a empresa até chegou a lançar games para o segmento.
5 – Parceria com a Nintendo?
Quando a Nintendo decidiu investir no mercado de games, chegou a considerar uma parceria com a Atari para desenvolver seu primeiro console. Como sabemos, as negociações não vingaram e a Nintendo criou o NES. Mas já parou para pensar em como seria se as duas empresas se unissem?
6 – Um outro tipo de “uniforme”
Em 1980 praticamente nenhuma empresa permitia que seus funcionários usassem roupas casuais para trabalhar, diferentemente da Atari – e isso dava uma espécie de “status” para eles. Além disso, quando as metas eram batidas eles comemoravam com festas em piscinas e bebida liberada.
7 – Um E.T. sem sucesso
Quando o Atari 2600 foi lançado, em 1979, as pessoas deixaram de ir ao fliperama para jogar em casa, já que o console permitia o uso de cartuchos. Com isso, vários jogos foram lançados, muitos sem qualidade – como foi o caso do game inspirado no filme E.T. – O Extraterrestre, considerado o pior jogo de todos os tempos.
O jogo foi licenciado por US$ 21 milhões e a Atari precisava vender 4 milhões de cartuchos para recuperar o valor e o que investiu em divulgação. As negociações para lançar o game terminaram em julho e ele deveria estar pronto até o Natal. Para aproveitar a data, eles tiveram que adiantar a produção para setembro e tiveram apenas 5 semanas para desenvolver o jogo. Óbvio que isso não deu muito certo e impactou a empresa.
E.T. ficou conhecido como o pior jogo da história, principalmente por causa dos bugs. Com isso, a Atari enterrou milhões de cartuchos no deserto.
Então, lembra do Atari? O videogame era do seu tempo? Se tiver mais alguma curiosidade para compartilhar com a gente, deixe nos comentários! ;)
 
O post 7 curiosidades sobre a Atari que você precisa saber apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

7 curiosidades sobre a Atari que você precisa saber
Fonte: Locaweb

Design para Eventos – Curso Online com 20% de desconto

Design para Eventos – Curso Online com 20% de desconto

Eae, tudo bele?
Eu não sei você já viu, mas recentemente eu gravei um entrevista com o Emerson Medeiros do Curso design para eventos. Caso não tenha visto, você pode conferir CLICANDO AQUI!
Durante esse bate papo o Emerson revelou como a área de design para eventos pode ser lucrativa. E isso é até lógico, afinal todo santo dia, tem evento, como por exemplo: balada, festas, congressos, feiras, etc.
Por isso o principal ponto positivo desse job é que a demanda nunca cessa. Além disso todo projeto é algo diferente: hoje você cria um flyer para uma balda sertaneja, amanhã para uma exposição  e por aí vai.  Realmente é possível conseguir bons frutos desse segmento.  E você como designer pode cuidar de toda a comunicação visual de um evento: flyers, camisetas, sites, banners e por ai vai.
Por isso hoje eu venho apresentar para o curso Design para Eventos, do Emerson Medeiros.  Esse curso vai  fazer com que você seja capaz de desenvolver todo tipo de criação, seja na área gráfica ou digital, que esteja relacionada à eventos. Como: banners, capas, vídeos, avatar, logotipo e identidade visual para festas. O curso possui ainda algumas aulas sobre fechamento de arquivos para impressão, além de assuntos mais dinâmicos, como: abordagem aos clientes, como e quanto cobrar (orçamento) e aulas de cinema 4D.
E o Emerson disponibilizou, para você que acompanha os meu conteúdos, um desconto de 20%. Se você tem interesse em aprender e atuar com Design para eventos, continue comigo neste artigo para saber como você pode começar agora utilizando esse super desconto.

O que você vai aprender no Curso de Design para Eventos?
O curso é basicamente composto em três módulos principais, que são:
Módulo 01 – Sua base Profissional
Você vai aprender os tipos de mídias que ultimamente vem sendo utilizado nos mais diversos eventos, através das aulas:

Aula 01: Introdução
Aula 02: Estimulando a criatividade
Aula 03: Praticando o conteúdo
Aula 04: Entendendo o cliente
Aula 05: Organização financeira
Aula 06: Tipos de mídias para eventos

Módulo 02 – Criação e desenvolvimento
Neste módulo você colocará a mão na massa, aprendendo e executando várias técnicas de criação em diversos estilos de flyers. Você estará pronto para encarar qualquer desafio e executá-lo com maestria. Para isso você terá aulas de:

Aula 01: Introdução ao Photoshop
Aula 02: Introdução ao Illustrator
Aula 03: Summer Party
Aula 04: Show de Sertanejo
Aula 05: Assadii Artwork
Aula 06: Concerto de Jazz
Aula 07: Agenda Pregador Luo
Aula 08: Redenção (Gospel)
Aula 09: Casa dos Amigos (Pagode)
Aula 10: Rock Festival
Aula 11: Conexão Reggae
Aula 12: Agenda Cantor Sertanejo
Aula 13: Éh do Gueto (Rap)

Módulo 03 – Identidade visual para eventos
Esse módulo é uma verdadeira aula de direção de arte. Nele você vai aprender a desenvolver toda identidade visual para um evento, padronizando cada peça de forma que se comuniquem entre si. Você terá aulas de:

Aula 01: Action Sketch
Aula 02: Iniciando o Projeto
Aula 03: Estilização de Tipografia
Aula 04: Cinema 4D e Pós Produção
Aula 05: Tropical Paradise
Aula 06: Flyer Trop. Paradise – Frente
Aula 07: Flyer Trop. Paradise – Verso
Aula 08: Finalizando a Identidade Visual – Tropical Paradise
Aula 09: Apresentação para o behance

O que você vai aprender no Curso de Design para Eventos?
Alem de todo esse rico material, que acabei de apresentar a você, no curso você ainda terá muito mais conteúdos como:

Exercícios práticos: além da parte teórica, no curso você aprenderá de forma prática, realizando exercícios e desafios.
Grupo exclusivo no faceboook e telegram: network e integração com toda a comunidade do curso.
Aulas ao vivo (lives) com o Emerson: além de aulas gravadas você terá a oportunidade de participar de aulas em tempo real, ao vivo.
Suporte exclusivo via Facebok e Whatsapp: você poderá tirar dúvidas diretamente com o professor.
Premiações: para os alunos que participarem dos desafios

Consultoria na sua carreira: o objetivo principal do curso é ajudas os alunos a se tornarem profissionais gabaritados.  Por isso você terá acompanhamento personalizado.
Qual a garantia que você tem? E se você não gostar do Curso?

Acredito que não vai acontecer, pois você com certeza vai adorar o  conteúdo. Mas caso isso ocorra, sem problemas. O Emerson Medeiros acredita de verdade no potencial desse conteúdo e que com ele você vai mandar muito bem nos seus jobs, gerando resultados para seus clientes e sendo muito bem pago por isso. Por isso você 14 dias de garantia. Se você  não aprender nada ou desistir  o seu dinheiro será devolvido, sem burocracia ou ressentimentos.
Será que vale a pena o Curso de Design para Eventos?
Mais de 450 pessoas já adquiriram o curso Design para eventos. Mas caso você tenha dúvidas sobre a qualidade, confira os depoimentos dos alunos:

Como adquiro o Curso de Design para Eventos com desconto?
Para adquirir o curso design para eventos agora para aprender como criar para eventos, aumentando o seu faturamento desenvolvendo projetos para eventos, é bem simples e você tem duas opções:
A primeira opção é acessar diretamente a página de checkout , clicando aqui! Ou, se preferir, acessando: http://bit.ly/design-20desconto
Com isso o desconto será aplicado automaticamente!
A segunda opção é  acessar o site do curso: https://emersonmedeirosdg.com.br/design-para-eventos/
Depois clique no botão “eu tô dentro” para acessar a página abaixo. Após acessá-la, clique no link “possui um cupom de desconto!”

Agora para inserir o cupom: CHIEFOFDESIGN.

Com isso você economizará  R$58,99 no valor curso.
Considerações finais
Se você deseja trabalhar com design e criatividade para eventos adquirir agora o curso Design para eventos é o melhor caminho. O investimento é baixíssimo comparado ao conteúdo entregue e as possibilidades podem abrir na sua carreira.  E o risco de investir em algo que você pode se arrepender no futuro é praticamente zero, pois basta avaliar o curso e em até 14 dias pedir o reembolso, caso não goste de algo.
Por isso se deseja criar a comunicação visual de eventos  que irão fazer saltar os olhos dos seus clientes. Comece agora pelo curso de Design para Eventos, clicando aqui!
Forte abraço.
Até mais.
The post Design para Eventos – Curso Online com 20% de desconto appeared first on Chief of Design.

Design para Eventos – Curso Online com 20% de desconto
Fonte: Chef of Design

Leia isto se quer ter muito sucesso no Instagram – Review

Leia isto se quer ter muito sucesso no Instagram – Review

Eae, tudo bele?
Neste artigo trago para você um review do livro Leia isto se quer ter muito sucesso no Instagram.
O título é bem ousado, mas na verdade transmite com fidelidade do que trata o livro.
Esse título é o novo lançamento da Editora GG Brasil e já está disponível. Organizado pelo renomado fotógrafo Henry Carrol, o livro traz dicas e segredos de instagrammers famosos.

Em resumo o livro apresenta como pessoas comuns, nada de excepcional ou talento extraordinário,condensaram a sua paixão por fotografia, comunicação e expressão, em histórias ilustradas pelas fotografias. Sim isso mesmo, o grande segredo, além de boas e criativas fotos, são as histórias que essas pessoas contam através de suas imagens. Então o instagram foi uma ferramenta que possibilitou a união de todos esses elementos.
É óbvio que o livro não tem o poder de te transformar em um instagrammer de sucesso de do dia para noite, e nem é esse o objetivo, mas ele pode ser muito útil pois dá dicas desde o registro dos seus momentos até a organização do seu feed. Por exemplo, no Livro você encontra dicas de:

Como aprimorar o seu perfil
Como compor as suas imagens
Como se comportar de maneira coerente na rede social
Dicas de criatividade
Dicas de edição de fotos
Dicas de edição de aplicativos
Qual postura ter diante os comentários de fãs e críticos
Como se tornar um usuário sugerido pelo instagram
Como você pode ganhar dinheiro com o instagram
Dicas sobre o que NÃO fazer no instagram

Conclusão
O livro é um guia muito bem feito para quem deseja entender sobre a rede social Instagram e como utilizá-la da melhor maneira. Não chega a ser uma leitura intelectual e sim um guia rápido, simples e prático.
Ele traz inúmeros exemplos, com imagens e perfis diferentes, sempre com dicas e abordagens simples e diretas. O livro superou minhas expectativas, esperava algo mais simples pelo tamanho do livro e superficial pelo título, mas é totalmente o contrário.
Se você se interessou pelo livro, você pode adquiri-lo no site da da Editora GG Brasil (CLIQUE AQUI).
Forte Abraço
Até mais.
The post Leia isto se quer ter muito sucesso no Instagram – Review appeared first on Chief of Design.

Leia isto se quer ter muito sucesso no Instagram – Review
Fonte: Chef of Design

Conheça Yapay: a plataforma de pagamentos online da Locaweb

Conheça Yapay: a plataforma de pagamentos online da Locaweb

É, mais um ano está chegando ao fim. Para nós 2017 foi muito especial, cheio de mudanças, de novidades, transformações. E para fecharmos o ano em grande estilo, apresentamos para você a nossa mais nova unidade de negócio: a Yapay.
A Yapay é uma plataforma de pagamentos online criada para entregar a melhor solução de pagamentos para quem vende e para quem compra. Nosso intuito é oferecer um produto de qualidade para nossos parceiros desenvolvedores e integradores, por meio das melhores práticas tecnológicas possíveis.
Saímos para o mercado com um gateway e intermediador de pagamentos, antigos SuperPay e TrayCheckout. Nossa equipe está focada no desenvolvimento de novos produtos e novidades para 2018. Um dos grandes pontos dessa mudança foi a utilização de novas tecnologias para esse crescimento.
Reformulamos nossas APIs e adotamos o padrão REST, buscando facilitar a comunicação de envio e resposta. A utilização de verbos HTTP corretos nas operações CRUD e os status code HTTP estão sendo a nossa prioridade na reformulação de nossas APIs.
Com as novas soluções elas estarão mais modernas, mais rápidas, mais versáteis e com recursos poderosos para ajudar em sua aplicação. Nós também prezamos pela definição de responsabilidades delas.
Por exemplo: uma API de login deve retornar apenas informações básicas como token e e-mail do usuário. Caso a aplicação necessite de dados extras, contamos com outro endpoint responsável por essas informações. Dessa forma, garantimos a intuitividade das rotas e facilitamos o entendimento de quem as utiliza.
Falando ainda em APIs, confira algumas das que estão disponíveis na Yapay, liberadas em um swagger:
– API de Pagamento
– API de Cliente
– API de Autorização
– API de Conta Bancária
– API de Carrinho de Compras
Contamos, inclusive, com módulos de integração, configurados e instalados; assim a loja virtual fica com a opção de pagamento Yapay disponível para vendas. E possuímos os módulos de integração Magento, WooCommerce, OpenCart, osCommerce e PrestaShop.
O principal diferencial da plataforma é a expertise adquirida com pagamentos online, antes da virada de Marca de TrayCheckout para Yapay, e a experiência com varejistas Tray, oferecendo um produto que visa suprir as necessidades de qualquer um de seus usuários.
// O lançamento da plataforma
Aproveitamos a RubyConf 2017 para lançarmos, no dia 17 de novembro, a Yapay.
Os desenvolvedores tiveram o primeiro contato com a plataforma durante o evento, realizado em São Paulo. Veja as fotos:

Para saber mais sobre a plataforma, acesse: www.yapay.com.br ;)
 
O post Conheça Yapay: a plataforma de pagamentos online da Locaweb apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

Conheça Yapay: a plataforma de pagamentos online da Locaweb
Fonte: Locaweb

Web Designer salário: quanto ganha um Web Designer?

Web Designer salário: quanto ganha um Web Designer?

Eae, tudo bele?
Você sabe quanto ganha um Web Designer? Qual o salário de um Web Designer?
Esse tipo de dúvida é muito comum para quem deseja atuar na área. E eu sei que é difícil, até certo ponto, encontrar informações fáceis e confiáveis sobre o salário de um Web Designer.
E isso acontece porque essa profissão é relativamente nova. Com o crescimento de alguns setores de mercado e avançado das tecnologias, surgiram novas profissões que não existiam até então em um passado recente. Dentre essas profissões está o de Web Designer ( ou designer de interfaces web).
Outro ponto que aguça essa dúvida comum aos “Galuchos”, são os vários fatores que podem influenciar diretamente nos rendimentos de um Web Designer.O salário pode variar de acordo com:

Tamanho da empresa;
região do país;
cidade da empresa;
nível de experiência do profissional;
sistema de de contratação.

Por isso gravei este vídeo para falar sobre o salário de um web designer e responder à certas perguntas como:

Qual a média salarial?
Quais fatores interferem no salário de um Web Designer?
Qual regime de contratação?
Qual a posição de um salário de um Web Designer se comparado com quadro de salários do Brasil?
Entre outros.

Então assista o vídeo abaixo e descubra qual é o salário médio de um Web Designer:
Web Designer salário – Quanto Ganha um Web Designer?

 
Caso você tenha decidido que é hora de fazer um curso de Web Design e deseja se tornar um profissional da área, você pode conhecer o meu curso: Web Designer PRO.

inscreva-se em nosso canal no Youtube [CLIQUE AQUI ]
Então é isso, Galucho! Se você gostou desse vídeo deixe o seu like e compartilhe com seus amigos eu tiverem interesse
Deixe a sua opinião, dúvida e/ou experiência na área de Web design, nos comentários abaixo, bele?
Caso tenha mais dúvidas eu vou deixar abaixo alguns links com mais conteúdos esclarecedores sobre a área de Web Design:
https://www.chiefofdesign.com.br/web-designer/
https://www.chiefofdesign.com.br/web-design-e-desenvolvimento-web-50-perguntas-e-respostas/
https://www.chiefofdesign.com.br/o-que-um-web-designer-faz/
https://www.chiefofdesign.com.br/vale-a-pena-ser-web-designer/
https://www.chiefofdesign.com.br/10-razoes-para-voce-ser-web-designer/
https://www.chiefofdesign.com.br/curso-de-web-designer/
Então é isso. Até a próxima.
Forte abraço.
Até mais.
The post Web Designer salário: quanto ganha um Web Designer? appeared first on Chief of Design.

Web Designer salário: quanto ganha um Web Designer?
Fonte: Chef of Design

Os melhores canais do Youtube para quem curte literatura

Os melhores canais do Youtube para quem curte literatura

internet

Eu não sei você, mas adoro dar uma boa pesquisada antes de comprar um livro. Geralmente leio resenhas, críticas em blogs, em portais de notícias e, claro, fico de olho nos canais literários do Youtube.
Confesso que nunca fui muito ligada nos Youtubers, mas há pouco tempo percebi que estava me inscrevendo nos canais e esperando ansiosa pelos vídeos. Foi aí que pensei: opa, tem algo acontecendo! Preciso compartilhar esses links com outras pessoas que também gostam de livros. Afinal, o conteúdo é muito bom!
Por isso, selecionei 5 canais literários do Youtube para você, que é tão viciado em literatura quanto eu. Confira:
// Pipoca Musical
Gente, eu sou suspeita ao falar de Pipoca Musical. Esse é o canal sobre literatura que eu mais gosto de acompanhar. Primeiro porque a Raquel Moritz lê muitos livros que eu leio – principalmente sobre ficção científica.
Ela é publicitária e em seu canal, que tem 23.779 inscritos, fala sobre filmes, séries e livros de terror, ficção científica, além de quadrinhos e obras de Neil Gaiman. Se você é nerd como eu, vai gostar!
O que eu gosto nos vídeos literários que ela posta: As resenhas e críticas da Raquel são muito, mas muito inteligentes. Dá para ver que ela vai fundo na leitura e nas pesquisas para embasar seus vídeos – e é isso que eu admiro demais nela.

// Tiny Little Things
Eu só fui conhecer o Tiny Little Things muito depois de sua criação (e vocês não imaginam o quanto me arrependo de ter levado tanto tempo). Tatiana Feltrin é incrível. Seus vídeos são muito bem elaborados, as críticas são embasadas e ela até lê em voz alguns trechos que gostou do livro.
Tatiana é formada em letras e pós-graduada em ensino de idiomas; seu canal foi criado em 2007 e tem mais de 24 milhões de visualizações.
O que eu gosto nos vídeos literários que ela posta: ela lê de tudo: de ficção científica, a Stephen King, a quadrinhos, a clássicos da literatura, a clássicos brasileiros. Seus vídeos são mais longos, mas valem ser vistos porque ela traz muitos detalhes interessantes sobre os livros.

// Who’s Geek
Mais um canal para quem é nerd, para quem é geek, para quem curte ficção científica. Gabi e Roberto são muito simpáticos. Os vídeos são curtos, divertidos e as críticas são bem feitas.
O que eu gosto nos vídeos literários que eles postam: os vídeos do Who’s Geek trazem muitos livros que eu já li ou quero ler. Ficção científica, terror e afins. O casal lê muito e é muito bacana acompanhar a relação deles com a literatura.

// Bel Rodrigues
O Canal da Bel Rodrigues eu conheci por acaso, por causa da Pam (em breve falarei sobre ela). Os vídeos não são apenas sobre literatura. Ela também fala sobre cinema, séries e alguns assuntos “polêmicos” – e também dá ótimas dicas para quem deseja escrever um livro.
Ela é publicitária, escritora e tem mais de 144 mil inscritos em seu canal.
O que eu gosto nos vídeos literários que ela posta: a Bel adora thrillers e lê muito sobre crimes, logo, ela consegue contextualizar muito bem seus vídeos quando esse é o assunto.
A youtuber chega a indicar filmes, séries e outros livros que tenham a ver, ou que sirvam como complemento do título que ela leu.

// Pam
Assim como a Bel Rodrigues, a Pam Gonçalves também é publicitária e escritora.
Eu a acompanho desde o início do canal, quando ela ainda tinha um blog sobre literatura. Os vídeos são rápidos e gostosos de serem assistidos e a youtuber é muito verdadeira, ela joga a real quando não gosta de determinado título.
Seu canal conta com mais de 215 mil inscritos e, por causa do seu amor pela literatura, já publicou seu segundo livro e participou de uma coletânea em conjunto com a Bel.
O que eu gosto nos vídeos literários que ela posta: acho a Pam muito verdadeira. Ela nem sempre gosta dos livros que estão em alta no momento e as dicas de escrita dela são fantásticas. Sério mesmo! Eu mesma já anotei várias para colocar em prática.

E então, gostou dos canais? Espero que você se inspire com as dicas dos “booktubers” e leia muito mais! Tem mais algum canal literário para indicar? Deixe nos comentários! ;)
O post Os melhores canais do Youtube para quem curte literatura apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

Os melhores canais do Youtube para quem curte literatura
Fonte: Locaweb