Blog

Por que você deveria ter um blog

8 de maio de 2017

Por que você deveria ter um blog

Há alguns anos tivemos uma febre de blogs no Brasil e no mundo. Na época haviam verdadeiras celebridades virtuais que viviam de seus blogs e da receita que era feita deles, tal como acontece hoje com youtubers e celebridades do vídeo.
A febre passou, os blogs deixaram de ser tão lucrativos, mas continuaram sendo uma fonte importante de informação em diversos nichos, incluindo a área tecnológica.
Para muito além do lucro financeiro, os blogs ainda podem te trazer lucro pessoal. Se você ainda não tem certeza se ter um blog é algo que você quer, vou te apresentar alguns bons motivos para você começar e, com alguma dedicação, colher ótimos frutos no futuro.
// Você não precisa gastar um centavo
Existem diversas plataformas gratuitas onde você pode criar uma conta, escolher o visual do seu blog e sair escrevendo em questão de minutos.
Atualmente temos o Medium, WordPress e outras ferramentas que permitem que você publique seus textos usando Github ou Gitlab sem qualquer custo financeiro.
As únicas coisas que você vai precisar investir são: tempo e dedicação.
// Você aprende a se expressar
Engana-se quem pensa que um profissional nos dias de hoje pode se dar ao luxo, ou à vida triste, de se trancar numa caixa, receber a tarefa de um lado e devolvê-la concluída do outro.
Você precisa aprender a se expressar, seja para explicar seu ponto de vista, seja para negociar com um cliente, com seu chefe ou com sua equipe, ou mesmo para poder se comunicar decentemente.
É triste ver pessoas discutindo nas redes sociais sem a capacidade de formular duas frases que façam sentido ou conversando na rua sem conseguir expor suas ideias de forma clara e concisa.
Quando você se propõe a escrever para outras pessoas, você passa a praticar a escrita, para que seus leitores possam entender seu ponto de vista. Quando você se propõe a escrever sobre um assunto, você passa a praticar a leitura, pesquisando e estudando o tópico antes de simplesmente despejar um caminhão de palavras por aí.
Dessa forma, pouco a pouco, praticando, tentando, acertando e errando, sua capacidade de se expressar vai melhorando e aumentando. Depois de alguns meses você vai olhar para seus textos mais antigos e vai perceber o quanto você progrediu na arte de expor as ideias.
// Você se torna conhecido
Um dos efeitos colaterais mais positivos de se ter um blog é que, com um pouco de dedicação, você pode se tornar uma referência em determinado assunto.
Isso pode abrir portas profissionalmente e criar oportunidades para que você conheça pessoas interessantes e que compartilham dos mesmos gostos e interesses que você.
Você pode, inclusive, ser chamado para falar em algum evento sobre algo que você publicou e pode virar fonte de pesquisa.
Você pode também ajudar pessoas que estão começando, compartilhando experiências e mostrando o caminho das pedras para quem está passando pelas mesmas dores que você passou.
// Você pode descobrir que nasceu para isso
Assim como aprender a tocar um instrumento musical não é algo que acontece de um dia para o outro, escrever pode ser cansativo e frustrante no início.
Porém, com o tempo e com dedicação, você pode descobrir que gosta mesmo daquilo.
Quanto mais você escreve, mais fácil fica e mais ideias você tem para os próximos textos. Com o tempo você aprende a se organizar melhor, a fazer o texto fluir mais; aprende a trazer o leitor para dentro do seu texto, do seu mundo.
Já se imaginou escrevendo e publicando um livro? Posso pessoalmente garantir que não é nada de outro mundo depois de escrever parágrafos e mais parágrafos em blogs por aí.
// Você vai se divertir
Finalmente, assim como alguém que aprendeu a tocar um instrumento musical e pegou gosto pela coisa, você vai achar divertido escrever.
Você vai se interessar em escrever sobre os mais diversos temas. Se você escreve textos técnicos, por que não tentar escrever um conto ou um romance?
Se sua especialidade é a prosa, por que não tentar uma poesia de vez em quando?
Mesmo grandes escritores, apesar de não terem escrito em blogs, gostavam de variar o estilo.
Pode até ser que sua poesia seja bem ruim comparada com a sua prosa, e temos aí Machado de Assis que não nos deixa mentir, mas com certeza você vai sentir o desafio e a diversão de tentar algo que não é sua especialidade.
Até porque, no final das contas, lá no começo você nem ao menos tinha o hábito de escrever, lembra?
O post Por que você deveria ter um blog apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

Por que você deveria ter um blog
Fonte: Locaweb

Hostnet – Hospedagem de sites oficial do Chief of Design

27 de abril de 2017

Hostnet – Hospedagem de sites oficial do Chief of Design

Eae, tudo bele?
Hoje o artigo é muito especial, porque eu estou aqui para falar da parceria do blog com a empresa de hospedagem Hostnet e como você também pode ganhar 30% de desconto em qualquer plano da Hostnet.
Antes de falar de da empresa, eu quero compartilhar com você a minha história com a Hostnet, pois ela foi a primeira empresa de hospedagem de sites que contratei sozinho, como freelancer.
As primeiras versões do meu site portfólio ficaram alguns anos hospedados na Hostnet. Nunca tive problemas e sempre fui muito bem atendido. Além disso o meu primeiro freela onde faturei acima de 1mil reais, foi via Hostnet.
Antigamente, não sei se eles ainda tem, existia um espaço gratuito dentro do site da Hostnet, onde quem tinha hospedagem podia divulgar o seu trabalho de Web Designer, Desenvolvedor e etc.Então logo após colocar o meu site no ar eu preenchi os dados e divulguei o meu nome, marca e serviços nesse espaço de anúncios.
Depois de algum tempo recebi um e-mail de uma moça que tinha um blog em WordPress, mas que estava travada e não conseguia atualizá-lo. Conversamos via e-mail, depois marcamos uma reunião presencial e assim eu fechei o freela, na época foi a personalização do blog mais o tratamento de algumas imagens, em torno de 1300 reais. Depois desse trabalho ainda fiz mais alguns serviços de Design para a cliente onde tive ganhos acima de 2mil reais.
O tempo passou…Eu fui testar outros serviços… E agora no início de 2017 eu tive  oportunidade de  fazer um PodCast, com o Kauê Linden, fundador da Hostnet., e o Gustavo Guanabara. O pessoal da Hostnet gostou do nosso trabalho e desde então  fechamos uma parceria onde eu migrei TODOS os meus sites para a Hostnet, como por exemplo:

O Blog da Designimador – site sobre Design, Web Design, Design Gráfico, 3D e criatividade.
O site do eBook Solidário de HTML e CSS
O site do meu curso de Web Design. O Web Designer Pro (WDPRO)

Era um objetivo nosso mudar de hospedagem, pois estávamos tendo problemas com a anterior. Quando surgiu a oportunidade de migrar para a Hostnet logo me veio em mente todo o bom trabalho que eles prestaram no passado, então ficou fácil decidir a volta.
Agora, se você não conhece a Hostnet a seguir eu vou falar um pouco sobre ela e quais vantagens você pode ter se optar, assim como eu, em utilizar seus serviços.
Sobre a Hostnet
A Hostnet é uma empresa de hospedagem de sites brasileira e possuí datar centers aqui no Brasil.  Ela foi fundada em 2001 e  é uma empresa  que valoriza a criação, criatividade,  inovação e que acredita no uso de software livre (de código aberto). E 90% dos servidores dela rodam Linux.Todos os aplicativos oferecidos na hospedagem são de código aberto.
Só para você ter uma ideia que essa filosofia de apoio a comunidade e iniciativas  é verdade, a Hostnet apoia vários projetos de educação e tecnologia, como por exemplo o nosso blog Chief of Design e o Curso em vídeo do Professor Guanabara, além de apoiar outras iniciantes e contribuições em código.
Painel de controle próprio
A empresa conta com um painel de controle da hospedagem próprio e  diferenciado, onde os clientes podem administrar a sua hospedagem e todos os recursos, como e-mails marketing e outros aplicativos. E como o painel é feito pela própria Hostnet a melhoria é contínua, pois é baseada nas opiniões e sugestões de seus próprios clientes.
CDN  – Rede de distribuição de conteúdo
Caso você não saiba do que se trata, CDN é o acrônimo de Content Delivery Network, ou em português “Rede de Distribuição de Conteúdo”.
A ideia  dessa tecnologia , como o próprio nome já sugere,  é o de distribuir conteúdo digital através da internet. No caso, o conteúdo de um único site é distribuído por diversos data centers. Assim o seu site ganha muito em velocidade, desempenho e em segurança.
E se você tiver dúvidas, basta fazer uma pesquisa no Google para conferir as vantagens de usar uma CDN em seu site. Para você que tem um blog em WordPress, igual o Chief, por exemplo, isso é ainda mais essencial.
A Hostnet  tem uma parceria com a empresa CloudFlare, que é uma das maiores, quiçá  maior, empresas de CDN do mundo.  Além da  distribuição e proteção do conteúdo do servidor, caso precise, você também pode obter gratuitamente um certificado SSL (protocolo de segurança) em nome da CloudFlare.
O Suporte
Uma das coisas mais importantes em um serviço de hospedagem é o suporte. Não importa o seu nível de conhecimento, o tamanho do seu site ou da sua empresa: uma hora ou outra você precisará do suporte do serviço de hospedagem. Infelizmente a gente lembra apenas dessa parte quando o site “dá pau”.
O suporte da Hostnet é excelente e eu comprovei isso na prática, pois requisitei muito (enchei o saco dos caras) quando precisei migrar todos os meus sites.  E não é somente eu que acha isso, mas sim os clientes da Hostnet também. Tanto que ela ganhou o selo de qualidade RA1000, do site Reclame Aqui. O índice de aprovação da empresa no Reclame Aqui é considerado ótimo. E isso nenhuma outra empresa de hospedagem conseguiu fazer.

E todo esse suporte em português, feito por brasileiros. Muitas vezes ao adquirir uma hospedagem estrangeira, temos dificuldade na comunicação com o suporte ou até mesmo no fuso horário de atendimento, coisa que com a Hostnet você não terá problema.
A Hostnet  é uma das grandes empresas do segmento no Brasil. possuindo mais de 50 mil sites hospedados e mais de 100 mil domínios registrados. Atualmente está  expandindo os seus negócios, lançando um plano de Franquia para quem quer trabalhar com web .
Você pode saber mais sobre neste link: https://www.hostnet.com.br/seja-uma-franquia-hostnet/
Então se você está insatisfeito com a sua hospedagem atual  ou está  pesquisando para adquirir uma, sugiro que faça um teste com a Hostnet.
Aproveite agora o cupom CHIEFOFDESIGN2017 e ganhe  30% de desconto nos planos da Hostnet por 3 meses.
E caso não goste, não tem problema. Você tem 7 dias de garantia para receber o seu dinheiro, centavo por centavo, de volta.
Forte abraço.
Até mais.
The post Hostnet – Hospedagem de sites oficial do Chief of Design appeared first on Chief of Design.

Hostnet – Hospedagem de sites oficial do Chief of Design
Fonte: Chef of Design

6 estilos de liderança que você precisa conhecer

25 de abril de 2017

6 estilos de liderança que você precisa conhecer

Contrary to what many people imagine, leading a team is not as simple as that.
A leadership position requires knowledge and self-knowledge; Responsibility, professionalism and the essentials: empathy. A good leader needs to put himself in the place of the collaborator and the clients, since he is the professional that has the power to motivate, teach and, together with his team, to seek great solutions.
And have you been a good leader? There are 6 leadership styles – used by successful leaders – that can help you manage your team. Find out what they are:
// The Hare Leader
This style is for those times when you as a leader are working with a very tight deadline and need to move quickly so that you and your team deliver more results in no time.
It is not good to be a “hare leader” at all times, since focusing on delivery deadlines alone can lead employees to lose interest in the tasks. Empathy is important in this case, so focus on people so they can finish their chores. Find out by talking to your team about what can work and assist in your productivity.
// The dreamy leader
A dream leader can see beyond. He knows where he wants to get along with his team and company and shares that vision with the team, and the team knows that they can work harder to reach the goal.
To use this leadership style, see if all of your employees believe as much as you do that it will be possible to get where you want them to go. If they believe it is impossible to hit the target, you may end up talking to yourself and losing your team. Embase your ideas and show that it is possible. Motivate them!
// The leader director
This style of leadership can work well in times of crisis. The leader director knows what needs to be done and charges his employees. He keeps his head cool and manages to focus on success, solving what must be solved in a chaotic situation.
Now, maintaining that posture daily is not good, it takes balance. Only use this style of leadership when the situation really requires immediate and direct action, otherwise the employees will feel discouraged.
// The Greek leader
In this case, the leader takes democracy into account. He likes to hear everyone’s opinions from staff and other co-workers and think about how to solve issues that need to be improved so that everyone gets the best result.
If this is your leadership style, be careful and see if you are not asking for the opinion of the wrong people. Filter everything and make sure you are surrounded by professionals who understand your business and trust you.
// The affectionate leader
This leader cares very much about relationships within the company. He believes that a good relationship between the team can result in a good working environment and always seeks to understand the employees. The style works when the company is changing its dynamics, because that way the leader will be able to keep all united and moving in the same direction.
But when used excessively, this line of leadership can lower team performance. This is because, in this case, relationships end up being the main focus – leading the goals to oblivion.
// The leader coach
This leader acts as a coach. It seeks to understand what is going on with your employees and how you can help them grow professionally within the company, according to their abilities. Using this style, the business tends to evolve, as all seek to grow and evolve together.
The approach may not work if a collaborator is not feeling well inside the company and does not see himself growing in it, does not try to evolve and improve his skills. In this case it is best to use the leader’s stance until he or she can evolve.  
Now you know 6 leadership styles to manage your team. Whatever your choice, we hope you will inspire your employees and, together, leverage your business. Success! ;)
 
O post 6 estilos de liderança que você precisa conhecer apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

6 estilos de liderança que você precisa conhecer
Fonte: Locaweb

10# excelentes razões para você se tornar um Web Designer!

20 de abril de 2017

10# excelentes razões para você se tornar um Web Designer!

Eae, td bele?
Muita gente me pergunta se é realmente possível se tornar um Web Designer e obter uma boa remuneração, se existem boas oportunidades na área de Web Design, se é muito difícil aprender, entre outras coisas. Nesses caso eu sempre respondo que sim, pois realmente acredito que isso seja possível, pois eu sou prova viva disso.
Eu trabalho nessa área desde 2009 e eu consegui várias oportunidades graças ao Design e principalmente ao Web Design que onde atuo com mais força e foco.
E do mesmo jeito que conseguiu várias coisas sendo um Web Designer, eu sei que várias pessoas também podem atuar nessa área trabalhando com algo que goste e ainda por cima tendo êxito profissional.
Por isso gravei um vídeo onde eu falo 10 razões para você se tornar um Web Designer. Nele eu mostro fatos, baseados na minha experiência e também em dados estatísticos, de que é uma boa sim aprender Web Design. E esse aprendizado, hoje em dia graças a web e as possibilidades de cursos que temos, pode ser muito mais tranquilo e acessível que há tempos atrás. Se você tiver vontade de aprender e se dedicar é possível sim trabalhar com Design Web.
Então senta, relaxa, deixa de lado as distrações da net e me acompanha nos próximos minutos no vídeo abaixo onde mostro 10 razões para você se tornar um Web Designer.
Assista o vídeo abaixo:

 
E você pode começar a aprender de graça aqui no Chief of Design. Tem bastante conteúdo sobre Web Design aqui no nosso blog e também no canal no Youtube.
para isso não esqueça de assinar o nosso canal no Youtube para você saber das novidades, bele???
[CLIQUE AQUI PARA SE INSCREVER NO CANAL]
Para se inscrever nas próximas turmas do Web Designer PRO, basta acessar: www.webdesignercursos.com.br
Contribua deixando o seu comentário abaixo
E caso tenha mais dúvidas sobre a profissão Web Designer eu sugiro que baixe gratuitamente o meu ebook Profissão Web Designer.
Forte abraço.
Até mais.
The post 10# excelentes razões para você se tornar um Web Designer! appeared first on Chief of Design.

10# excelentes razões para você se tornar um Web Designer!
Fonte: Chef of Design

Como fazer um pitch memorável

18 de abril de 2017

Como fazer um pitch memorável

Você conseguiria resumir sua empresa em poucas frases, de forma atrativa, para chamar a atenção de investidores e fechar bons negócios?
Acredite, quando uma ideia é boa não é preciso muito tempo para vendê-la.
Basta ser objetivo, apresentá-la de mandeira e clara, confiar em si, em seu trabalho e estar preparado – características fundamentais para fazer um pitch. O termo, muito usado em startups, nada mais é do que um discurso de vendas para conseguir investimento.
Também existe o elevator pitch. Ele é um pitch reduzido, geralmente tem entre 1 a 3 minutos, e precisa abordar como você pretende ganhar dinheiro com seu negócio e sua proposta única de valor. Vem da ideia de “se você encontrasse um investidor em um elevador, o que diria sobre sua empresa?”.
Já o pitch tradicional dura 10 minutos e a apresentação deve ter cerca de 10 slides – o suficiente para comportar todas as informações importantes para o investidor e não entediá-lo. Para lhe ajudar nessa fase tão importante para seu negócio, listamos 6 dicas para você fazer um pitch memorável:
// Treine antes
Você tem apenas 10 minutos para fechar o negócio. Nada melhor do que ir preparado.
Treine a apresentação em frente ao espelho e utilize um cronômetro. Cuide sua postura e seu tom de voz – eles também são capazes de informar. Se você utilizar slides para lhe auxiliar na apresentação, não utilize muito texto.
Estude! Você está apresentando sua empresa, precisa conhecer e entender sobre o que está falando.
// Seu projeto em uma frase
Em entrevista para o portal Pequenas Empresas & Grandes Negócios, a especialista Sallyann Della Casa, da Growing Leader Foundation, conta que o começo da apresentação precisa ter uma frase que diga tudo sobre seu negócio. Ela seria a mistura de um slogan com o resumo do que seu produto ou serviço faz.
// Pense em seu diferencial
Quais são os pontos fortes de sua empresa? Quais problemas ela resolve, como seu produto funciona? Compare-a com seus concorrentes diretos ou indiretos e liste quais são seus diferenciais e qual a sua vantagem competitiva.
// Use um personagem
Para exemplificar melhor seu produto ou serviço, crie um personagem e conte a história dele e como sua empresa consegue ajudá-lo no dia a dia. Assim é mais fácil cativar o público e causar empatia.
// Quais são as expectativas
Fale sobre seu planejamento futuro. Como é o mercado para seu negócio? Utilize variáveis relevantes como base de usuários, faturamento e expectativa de crescimento. Lembre-se de não traçar metas tão agressivas apenas para impressionar. Investidores têm experiência e geralmente sabem o potencial de uma empresa. Seja verdadeiro!
// Frase de impacto
Use o final de seu pitch para fechar bem sua apresentação. Sabe aquela frase que você usou para apresentar inicialmente sua empresa? Use-a como fechamento. Uma frase de impacto pode ser o toque final para você impactar os investidores e fechar bons negócios.
E então, vamos colocar em prática essas dicas?
Esperamos que você tenha sucesso em seu pitch e que consiga fazer uma apresentação memorável. Boa sorte! ;)

O post Como fazer um pitch memorável apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

Como fazer um pitch memorável
Fonte: Locaweb

4 razões para você ter um site

7 de abril de 2017

4 razões para você ter um site

Sabemos que hoje em dia é praticamente impossível pensar em negócios e não pensar em Internet. Na verdade, é impossível pensar em qualquer coisa sem relacionar de alguma forma com a web.
Quando falamos de Brasil, pesquisas apontam que mais da metade dos brasileiros já acessam a Internet e não para por aí. Pela primeira vez os smartphones ultrapassaram o computador como dispositivo mais utilizado por quem navega o que nos evidencia que o mobile hoje já é uma realidade. Mas a pergunta é: será que as pequenas e médias empresas enxergam e exploram o potencial que Internet tem?
Pensando nisso e em ajudar você, leitor, a enxergar um pouco mais sobre o que estou falando, listei quatro razões para você ter um site:
// Encontrabilidade
Para mim essa é uma das principais razões para uma empresa ter um site na internet. Além de ficar acessível 24 horas por dia, 7 dias por semana e 365 dias por ano, com uma página na web fica muito mais fácil da sua empresa ser encontrada. A razão disso é bem clara, as pessoas não saem nas ruas procurando empresas e serviços, elas buscam isso na internet, que facilita, agiliza e qualifica essa pesquisa. Se a sua empresa não tem um endereço na Internet dificilmente será encontrada pelas pessoas. De acordo com uma pesquisa realizada em 2016 descobrir, pesquisar e localizar marcas, produtos, serviços e lojas online já representa cerca de 70% das pesquisas online.
// Credibilidade
Para esse ponto eu gostaria de te fazer uma pergunta: se você fosse comprar um produto ou contratar um serviço e estivesse em dúvida entre duas empresas, uma delas tem um site com dados sobre a empresa, endereço, telefone e outras informações profissionais e a outra não. De qual das duas você compraria? Eu tenho quase certeza que a sua resposta seria que compraria da primeira empresa, e a razão disso é muito clara: ela passa muito mais confiança do que a primeira.
// Divulgação
Quem nunca ouviu a velha frase “a propaganda é a alma do negócio”? Eu, particularmente, cresci ouvindo isso. Hoje em dia é muito comum encontrar pequenos empreendedores que querem divulgar seu negócio em redes sociais ou por meio de outras ferramentas, como e-mail marketing, sem sequer ter um site. Um dos principais enganos de quem empreende é não encarar o site da empresa como uma poderosa ferramenta de divulgação. A Internet não tem fronteiras. Com um site você transforma o seu negócio local em global e utilizando ferramentas para integração com redes sociais, os visitantes do seu site podem compartilhar informações sobre os seus produtos e serviços diretamente para o Facebook, Twitter e outras redes. Sem falar em campanhas de aquisição de novos clientes que você pode fazer através de e-mail marketing e outras estratégias, mas isso eu vou deixar para falarmos em uma próxima oportunidade.
// Relacionamento
Como comentei ali em cima uma das principais vantagens de estar na Internet é que você está online 24 horas por dia, 365 dias por ano. Então, para estar próximo do seu público mesmo estando distante fisicamente dele é essencial você disponibilizar canais diretos de comunicação com ele. Redes Sociais, e-mail e telefone de contato são bem legais para estreitar o relacionamento com seus clientes. Os formulários de contato também podem ser aproveitados para gerar leads, novas oportunidades de negócios e uma base de e-mails para você se relacionar. Sem falar que o site da sua empresa é a forma mais fácil de informar seu cliente sobre promoções, ofertas e outras informações que são importantes para o seu público.
Essas são algumas razões para você ter um site da sua empresa. É claro que não são as únicas, poderíamos falar e especificar uma dezena de motivos para sua empresa ter um endereço na web mas o conteúdo desse artigo ficaria um pouco extenso e esse não é o meu objetivo. Lembre-se, minha intenção é aqui mostrar a você o potencial que a Internet oferece para você aproveitar e alavancar os seus negócios.
Espero que tenha gostado e fique sempre de olho em nosso blog para acompanhar dicas e informações para você que já empreende ou tem vontade de empreender.
Até mais!
O post 4 razões para você ter um site apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

4 razões para você ter um site
Fonte: Locaweb

Guia introdutório de CSS Grid Layout

7 de abril de 2017

Guia introdutório de CSS Grid Layout

Eae? Tudo bele?
Hoje trago um assunto que poderá mudar a forma de enxergarmos a construção de layouts web. Falo do CSS Grid Layout.
Para quem desenvolve a algum tempo basta olhar para o passado para enxergar alguns modelos que não foram criados de forma específica para esta função, como por exemplo, o uso de tabelas.
Já o CSS Grid Layout fornece uma nova forma mais interessante e natural de fazer layouts avançados facilmente sem apelar para modelos não adequados.
Neste guia vou apresentar esta nova forma de criar layouts em CSS. E para você ter seu primeiro contato com este recurso trarei alguns exemplos de aplicações. Ok?
Então, sigam-me os bons!
O que é CSS Grid Layout?
CSS Grid Layout é um sistema bidimensional de layout baseado em grid que permite lidar com colunas e linhas , que segue a especificação da W3C. E é também considerado o primeiro módulo CSS criado especificamente para resolver os problemas de layout que muitos de nós já lidamos no passado.
E o que tínhamos antes?
Historicamente começamos o processo de construção de layouts com tabelas e usamos recursos CSS como floats, posicionamentos, inline-blocks, entre outros. Porém na essência estes métodos eram considerados hacks. Mais tarde surgiu o Flexbox, e é ele que mais se aproxima do CSS Grid Layout.
Layout Flexbox versus CSS Grid Layout
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.
Portanto a grande diferença então entre os dois é que Flexbox é essencialmente para a colocação de itens em uma única dimensão (em uma linha ou uma coluna). E CSS Grid Layout é para layouts de itens em duas dimensões (linhas e colunas).
Bom, agora que você agora já sabe que este sistema pode ser a solução para problemas corriqueiros na construção de layouts sem uso de hacks, uma questão que devemos nos preocupar é o suporte aos navegadores.
Suporte a navegadores
Conforme as atualizações forem surgindo vou deixando este artigo em ordem, mas no atual momento (abril de 2017) a maioria dos navegadores modernos suportam o CSS Grid Layout conforme podemos ver no suporte Can I Use. Entre os mais famosos o IE 11 e o Edge tem suporte parcial utilizando-se o prefixo –ms.

Terminologia
Agora vamos conhecer os termos envolvidos para este módulo antes de passarmos para os exemplos práticos. Isso será necessário para entendermos conceitualmente seus significados.
Grid Container
É o pai direto de todos os itens do grid e elemento em que display: grid é aplicado. Veja a seguir que a class “container” será responsável para atribuir o valor grid ao elemento pai.
HTML:<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>
CSS:.container {
display: grid;
}
Visualmente é toda área que contém as linhas e colunas, como você pode ver a seguir:

Grid Line
Corresponde as linhas divisórias que compõem a estrutura do grid. Temos dois tipos:
As linhas verticais (que formam as colunas do grid) e as horizontais (que formam as linhas do grid).
Na imagem a seguir identificamos as linhas verticais indicadas pelas setas vermelhas e horizontais pelas setas laranjas.

Grid Item ou Grid Cell
Refere-se aos elementos descendentes diretos do contêiner onde o grid é aplicado. É a menor unidade do grid. Veja no exemplo a seguir:

Podemos notar que o Grid Item está entre as Grid Lines de linha 1 e 2 e as Grid Lines de coluna 2 e 3.
Como já frisei somente um elemento filho direto pode ser um Grid Item. No exemplo a seguir o elemento que recebe a class “subitem” não poder ser um Grid Item:<div class=”container”>
<div class=”item”></div>
<div class=”item”>
<p class=”sub-item”></p>
</div>
<div class=”item”></div>
</div>
Grid Tracks
É o espaço horizontal ou vertical entre duas Grid Lines.

Grid Areas
É o espaço total que contornado por quatro linhas de Grid e pode ser composto por qualquer quantidade possível de Grid Cells/Grid Items.

Noções básicas
Para trabalhar com CSS Grid Layout se aplica CSS tanto para um elemento pai que se torna o contêiner quanto para os elementos filhos que se tornam itens Grid.
No contêiner você define a grid com display: grid e também os tamanhos de coluna e linha com grid-template-columns e grid-template-rows, em seguida, coloca seus elementos filho no grid com grid-column e grid-row.
No contêiner também é possível usar declarações com display: inline-grid, que gera um grid com comportamento de linha, e display: subgrid, que é usado quando seu grid está aninhado dentro de outro grid. Logicamente que display:block gerará um grid com comportamento de bloco.
Exemplos
A seguir vou disponibilizar alguns exemplos usando o JSFiddle. Para melhor entendimento você pode navegar entre as aba result, HTML e CSS para ver o aspecto visual dos Grids e a codificação usada.
Exemplo 1:

Você também pode ver esta demonstração ampliada clicando aqui »
Neste exemplo setamos a propriedade display para o valor grid para a div com a classe “container”. Em seguida dividimos o Grid em 3 colunas e 2 linhas resultando em 6 Grid Items. Repare que a largura das colunas tem tamanho igual e isso acontece também com a altura das linhas. Esse resultado foi obtido porque usamos o valor 1fr para cada coluna e para cada linha. 1fr é uma fração do espaço livre dentro do grid nas propriedades grid-template-columns e grid-template-rows. No exemplo, como estamos usando três colunas a declaração CSS pega o valor total disponível da largura que é 100% e divide por três partes iguais. O mesmo ele faz com a altura total resultando em 1 fr de 50% para cada linha.
Além do valor 1fr você pode definir largura e altura (Grid Tracks) com pixels, porcentagem, viewport hight ou viewport width.
Exemplo 2:
No exemplo anterior conseguimos posicionar de forma simples cada Grid Items. Entretanto também é possível posicioná-los manipulando as Grid Lines com as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end. Basta você saber atribuir corretamente os números de linha inicial e final a essas propriedades. Além destes as versões shorthand grid-column e grid-row também executam o posicionamento.
Olhando para o exemplo anterior, é assim que o navegador posiciona os elementos por padrão para nós:.item-1 {grid-column-start: 1;
grid-column-end: 2;
grid-row: 1;
background-color:#fd7701
}
.item-2 {grid-column-start: 2;
grid-column-end: 3;
grid-row: 1;
background-color:#fe861d
}
.item-3 {grid-column-start: 3;
grid-column-end: 4;
grid-row: 1;
background-color:#ff9538
}
.item-4 {grid-column-start: 1;
grid-column-end: 2;
grid-row: 2;
background-color:#fea354
}
.item-5 {grid-column-start: 2;
grid-column-end: 3;
grid-row: 2;
background-color:#feb474
}
.item-6 {grid-column-start: 3;
grid-column-end: 4;
grid-row: 2;
background-color:#ffcca0
}
Agora vamos utilizar essas declarações alterando o código do exemplo anterior no JSFiddle.

Você também pode ver esta demonstração ampliada clicando aqui »
Logicamente que visualmente não se mudou nada. Entretanto vemos a alteração na aba de CSS. E conhecer essa novas propriedades vai ser útil para o próximo exemplo.
Exemplo 3:
Uma das grandes novidades do CSS Grid Layout é que não importa a ordem que vem os elementos HTML do seu grid, você pode altera-las como bem desejar. É o que vamos fazer agora mudando as Grid Lines do exemplo anterior.

Você também pode ver esta demonstração ampliada clicando aqui »
Veja o poder desse módulo em suas mãos. Com apenas algumas mudanças de linhas em seus CSS você pode fazer uma alteração rapidamente em seu layout.
O que feito neste exemplo? Veja explicação comparando com o exemplo anterior:

Invertermos Os Grid Items 1 e 6 em relação a linha vertical e posicionamo-los na coluna central;
O Grid Item 2 foi para coluna 3, linha 1 através de grid-column-start: 3, grid-column-end: 4 e grid-row: 1;
O Grid Item 3 foi para coluna 1, linha 1 através de grid-column-start: 1, grid-column-end: 2 e grid-row: 1;
Já o Grid Item 4 foi para coluna 3, linha 2 através de grid-column-start: 3, grid-column-end: 4 e grid-row: 2
E o Grid Item 5 foi para coluna 1, linha 2 através de grid-column-start: 1, grid-column-end: 2 e grid-row: 2.

Exemplo 4:
Este exemplo demonstrará o posicionamento de Grid Items através de nomes de áreas, as chamadas Grid Areas. Podemos nomear uma área de grade usando a propriedade grid-template-areas, então podemos colocar um item de grid em uma área específica usando a propriedade grid-area. Veja no exemplo a seguir:

Você também pode ver esta demonstração ampliada clicando aqui »
Exemplo 5:
Para encerrar os exemplos vamos mostrar um um pouco mais complexo em relação aos anteriores com inserção também de outros elementos HTML com listas e parágrafos.

Você também pode ver esta demonstração ampliada clicando aqui »
Como você pode ver no bloco anterior construímos um esboço de uma página com topo, sidebar com navegação, área de conteúdo e rodapé. Foram usados elementos do HTML5 para dar semântica aos blocos e como no exemplo anterior foram usados Grid Areas.
Em relação aos exemplos anteriores temos duas novidades:
Uma é o uso de áreas de respiro (gaps) entre os Grid Items através das propriedades grid-column-gap e grid-row-gap e o grande destaque neste exemplo que o uso de um grid dentro de outro.
Note que a grande área cinza escura corresponde ao grid principal. Olhando o CSS vemos que a class “container” recebe “display: grid” que é responsável por atribuir características de grid ao bloco.  Veja também que existem blocos de cor azul que estão inseridos dentro de um bloco de cor cinza mais claro. Este bloco também está recebendo “display: grid” e está aninhado no bloco de class “container”. Identificamos este grid interno no CSS como a class “wrapper”.
Portanto uma das possibilidades do CSS Grid Layout é trabalhar com grids aninhados. E isso com certeza é mão na roda!
Conclusão
Como podemos ver o CSS Grid Layout pode ser uma revolução no modo de desenvolver layouts comparando-se com outros métodos. E você pode fazer seus primeiros testes nos navegadores que já dão suporte a esta tecnologia. O objetivo deste artigo foi dar uma pincelada sobre aspectos introdutórios deste sistema. Para uma pesquisa mais avançada você pode recorrer a documentação W3C.
Em breve notaremos o crescimento deste módulo. Sugiro que observe a evolução de uso nos grandes portais, templates de grandes CMSs como o WordPress, Drupal e Joomla e nas discussões na comunidade web em geral.
E você? O que achou do CSS Grid Layout? Já utiliza em seus projetos? Deixe sua opinião e aproveite e compartilhe sobre esse assunto com seus amigos!
Forte abraço.
Até mais.
Referências

A Complete Guide to Grid


http://codepen.io/simoneas02/post/grid-layout

An Introduction to the CSS Grid Layout Module


http://gridbyexample.com/examples/
https://drafts.csswg.org/css-grid/
http://codepen.io/simoneas02/post/grid-layout#sim-mas-devo-usar-flexbox-ou-grid-layout-3
The post Guia introdutório de CSS Grid Layout appeared first on Chief of Design.

Guia introdutório de CSS Grid Layout
Fonte: Chef of Design

Afinal, o que é e para que serve um media kit?

5 de abril de 2017

Afinal, o que é e para que serve um media kit?

Se você tem ou está pensando em criar um blog, já deve ter se deparado com o termo media kit em algum lugar, certo? A expressão pode assustar um pouco – principalmente os blogueiros de primeira viagem – mas ao contrário do que muitos imaginam, ele não é um bicho de sete cabeças.
Um media kit pode ser considerado como o “currículo” de seu blog ou site. Sim, isso mesmo.
Nele você apresenta informações relevantes, como o público-alvo; número de acessos, número de seguidores nas redes sociais e outros. Esses dados são fundamentais para as empresas que querem investir em seu projeto, por isso é importante que eles estejam bem organizados e atualizados.

// Por que uma empresa deveria anunciar em seu blog?

Comece seu media kit tendo essa pergunta em mente. Já que você precisa apresentar seu projeto, ressalte o que é mais importante nele, pense nos diferenciais. O que uma grande empresa ganharia ao investir nele?
Reserve as primeiras páginas justamente para isso: para apresentar o blog, quando foi criado, qual é a sua proposta e ressaltar os pontos fortes. Também é interessante contar um pouco da história do (s) criador (es) do projeto.

// Quais estatísticas você precisa abordar em seu media kit?
Abuse da criatividade para apresentar dos dados numéricos de seu blog. Invista em gráficos, ícones e afins. Acesse o Google Analytics e preocupe-se com as seguintes métricas:

– Visitas;
– Visitantes únicos (unique visitors);
– Visualização de página (pageview);
– Taxa de rejeição (bounce rate);
– Tempo de permanência.

Já quanto às redes sociais, leve em conta as redes em que você está presente. Digamos que você esteja no Facebook e no Instagram. Nesse caso é importante que o possível anunciante saiba:

– Quais são as redes em que você atua;
– Número de seguidores de cada uma;
– Número médio de curtidas;
– Número médio de comentários;
– Número médio de compartilhamentos.

Nesse caso é interessante também identificar qual é o público em suas redes sociais. No Facebook, por exemplo, é possível saber a porcentagem de homens e mulheres que curtiram sua página, a faixa etária e as regiões em que moram.

// Como deve ser a aparência do media kit?
Não há um número de páginas específico para um media kit. Pesquisando, encontramos uma média de 5 a 10 lâminas. Lembre-se que quanto mais claro e objetivo for, melhor.
Em questões de layout, o ideal é que seu media kit siga a mesma identidade visual de seu blog, ou seja, que ele utilize o mesmo logotipo, paleta de cores, elementos gráficos e as mesmas fontes, por exemplo.

// Quais são os serviços que seu blog oferece?

– Anúncio em banner?
– Postagens patrocinadas ou publieditoriais?
– Resenhas patrocinadas?
– Sorteios e concursos?
– Postagens patrocinadas nas redes sociais?
– Webséries?

Essas são as formas mais comuns de publicidade em blogs e sites. Se você irá oferecer esses formatos, precisa especificar como eles funcionam e quanto custam. Deixe uma parte de seu media kit para esse assunto. Procure especificar o tamanho dos banners, por exemplo, o número de postagens patrocinadas e etc.
Se alguma empresa já anunciou em seu blog, indicamos que você compartilhe essa informação na apresentação e mostre como foi. :)
Agora que você já sabe o que é e para que serve um media kit, está na hora de criar o seu! Quer saber mais sobre blogs? Confira este artigo e descubra tudo o que pode estar atrapalhando o sucesso de seu projeto! ;)
O post Afinal, o que é e para que serve um media kit? apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

Afinal, o que é e para que serve um media kit?
Fonte: Locaweb

Quais foram as senhas mais usadas em 2016?

31 de março de 2017

Quais foram as senhas mais usadas em 2016?

Digite “como descobrir a senha” no campo de buscas do Google e você encontrará mais de 420 mil resultados em menos de 1 minuto. Agora, se você digitar “como descobrir a senha do Facebook” – uma das sugestões do autocomplete – esse número aumenta consideravelmente. Mais de 9 milhões de resultados aparecerão em sua tela.
Assustado? Parece que sempre terá alguém tentando descobrir a senha do outro, seja a das redes sociais, a do e-mail, do Wi-Fi, do cartão de crédito… Por isso, todo cuidado é pouco.
Como você já deve estar cansado de saber, sua senha precisa ser forte. Uma combinação entre números, letras e caracteres como %&*#@ e que não tenha a ver com sua vida pessoal (como o nome de seus pais, data de nascimento, nome do cachorro) pode ser mais difícil de ser descoberta.
Só que, ainda assim, muitas pessoas acabam indo pela comodidade e continuam a utilizar senhas um tanto óbvias para protegerem suas informações pessoais. A Keeper, empresa de segurança, realiza uma pesquisa anual com as senhas mais usadas no mundo durante o ano.
Para o estudo são analisadas 10 milhões de combinações vazadas em violações de dados. Como já era de se esperar, entre as mais populares de 2016 encontram-se: 123456, google e 666666. Sendo que a  primeira opção foi a escolha de um em cada cinco usuários!
Confira a lista com as 10 senhas mais usadas do mundo em 2016:
– 123456
– 123456789
– qwerty
– 12345678
– 111111
– 1234567890
– 1234567
– password
– 123123
– 987654321
A Keeper, além de divulgar as senhas, também deu dicas para que você consiga proteger bem as suas:
– Não use senhas sequenciais de seis caracteres;
– Varie a combinação de caracteres, com números, letras maiúsculas e minúsculas e caracteres especiais;
– Utilize um gerenciador de senhas para poder lembrar as suas combinações e simplificar o gerenciamento delas.
Continue se preocupando com a construção de suas senhas! Utilize as dicas para criá-las e esteja mais seguro. Ah, e se você gosta de Star Wars, sabia que em 2015 “starwars” foi uma das senhas mais usadas? Que a Força esteja com a gente – e com nossas combinações – em 2017! ;)
O post Quais foram as senhas mais usadas em 2016? apareceu primeiro em Blog Locaweb – Notícias sobre tecnologia, programação e muito mais..

Quais foram as senhas mais usadas em 2016?
Fonte: Locaweb

Na mesa do Chief – Entrevista com a Designer Nayane Nathalie

31 de março de 2017

Na mesa do Chief – Entrevista com a Designer Nayane Nathalie

Eae! Td bele?
Último hangout dessa série especial para as mulheres :). É claro que não deixarei de trazer mulheres que atuam na área, mas esse mês foi especial.
No vídeo de hoje converso com a Designer Nayane Nathalie.
Mais um hangout com troca de ideias sobre a profissão, mercado, clientes, trabalho remoto, freela e muito mais.
Confira abaixo a entrevista completa:

Sobre a Designer Nayane Nathalie
Designer gráfico com foco de atuação em branding, formada pela UFSC (Universidade Federal de Santa Catarina). Natural de Florianópolis, atualmente mora na Alemanha, e possui como paixão branding, tipografia e café.
Conheça o trabalho da Nayane Nathalie:
http://www.behance.net/nayanenathalie
http://www.nayanenathalie.com
O que você achou do vídeo?
Se  gostou do vídeo deixe o seu comentário abaixo! Isso é muito para continuarmos com o nosso trabalho e melhorarmos cada vez mais.
Ajude nosso canal curtindo e compartilhando com seus amigos o vídeo.
CLIQUEI AQUI e se inscreva no Canal do Chief e fique por dentro das novidades.
Forte abraço.
Até Mais.
The post Na mesa do Chief – Entrevista com a Designer Nayane Nathalie appeared first on Chief of Design.

Na mesa do Chief – Entrevista com a Designer Nayane Nathalie
Fonte: Chef of Design

« First‹ Previous510511512513514Next ›Last »