Category: Front-End

Temas Filhos WordPress – Para que servem e como criar?

Temas Filhos WordPress – Para que servem e como criar?

Se você quiser ter uma série de dores de cabeça com seu site WordPress, começa por alterar o tema de sua instalação sem criar um tema filho antes. Você precisa conhecer sobre TEMAS FILHOS!

Como dor de cabeça é algo que você não quer, esse artigo visa te explicar para que serve e como criar Temas Filhos e como esses temas podem salvar sua paz quando você precisa fazer uma modificação em seu site.

Muitas pessoas se queixam por terem perdidos suas alterações por total desconhecimento sobre os Temas Filhos. A queixa vão desde funcionalidades que deixaram de funcionar (códigos de terceiros que sumiram), até banners que sumiram das páginas.

Entender esse recurso te possibilita fazer alterações em um tema original do WordPress e não sofrer com as perdas destas em futuras atualizações.

Então simbora para o conteúdo!!!

O que é um Tema Filho?

A melhor definição para Tema Filho é definição encontrada no site oficial do WordPress:

“Um tema filho é um tema que herda as funcionalidades e estilos de outro tema, chamado de tema pai”.

Quando você cria um tema filho, ele é todo “baseado” em um tema já existente. No momento que você cria um Tema Filho o tema existente se torna Tema Pai.

Não existe Tema Filho sem Tema Pai, pois ele depende completamente de seu pai para funcionar. Ele não fará nada e nem poderá ser ativado, sem o tema original presente. 

O tema filho é quem vai receber as alterações no lugar do Tema Pai. Essa é a grande vantagem de usá-lo e é isso que vai livrar sua vida de certas dores de cabeça.

Você vai entender isso melhor no próximo tópico.

Por que usar temas filhos?

Existem dois grandes motivos:

O primeiro grande motivo é preservar as características e funcionalidades do tema pai que foram alteradas e que fatalmente seriam perdidas em uma atualização futura.

O segundo grande motivo é fazer alterações, mas considerando herdar as funcionalidades principais do tema original.

Quando usar um Tema Filho?

Você usará o Tema Filho quando você precisar entregar algo personalizado, mas de forma ágil e que mantenha as principais funcionalidades do tema original. Ou quando você precisar fazer pequenas alterações no tema.

Quando não é indicado usar Temas Filhos?

Não é indicado usar o tema filho quando você pretende alterar drasticamente o Tema.

Ao fazer isso você deixa de herdar as funcionalidades do tema principal e gasta muito tempo em desenvolvimento o que contraria uma das principais características do uso dos Temas Filhos que é a agilidade.

Neste caso é indicado que se construa um Tema do Zero.

Como criar um Tema Filho

Agora vamos para um passo a passo explicando como criar Temas Filhos e que você já poderá aplicar os conhecimentos adquiridos aqui em sua instalação.

Mas se você quiser aprender com mais riquezas de detalhes, no Curso Web Designer PRO temos um módulo inteiro sobre Temas Filhos.

1 – Criando a pasta do Tema

A primeira coisa é acessar o diretório na instalação WordPress onde se localiza os temas. Acessando, via FTP, o diretório onde se localiza os arquivos da instalação do WordPress, ele fica em “wp-content/themes”.

Na pasta “themes” você encontrará uma relação de temas. Você deve criar uma nova pasta neste diretório, pasta esta que receberá os arquivos do Tema Filho.

Você deverá renomear esta pasta para o nome que você pretende usar no Tema Filho. Não use espaços no nome para não ocasionar erros.

No exemplo deste artigo a pasta se chamará “fundamentos-do-design-theme” que corresponde a nome Fundamentos do Design Theme.

Esse pasta deverá possuir dois arquivos que você criará (style.css e functions.php) e que será o mínimo para que seu Tema Filho funcione.

Resumindo teremos:

a pasta do tema filho;o arquivo style.css;o arquivo functions.php.

2 – Criando a folha de estilos (style.css)

O arquivo “style.css” é obrigatório para que o Tema Filho funcione.

Você pode usar um editor HTML para criar esse arquivo. Com bloco de notas já é possível criar este arquivo se certificando que a extensão seja “.css”.

No topo do arquivo deverá ser inserido um cabeçalho com informações sobre o novo tema e referenciando o Tema Pai.

No nosso exemplo, o Tema Filho será construído a partir do tema “Twenty Twenty” que é um tema padrão do WordPress e que deve estar presente na instalação.

No seu caso você terá um tema próprio a qual pretenderá criar o Tema Filho.

Vamos ao exemplo (leia cada instrução):

/*Theme Name: Fundamentos do Design Theme (Aqui vai o nome do Tema Filho)Theme URI: https://wordpress.org/themes/twentytwenty/ (Aqui vai o endereço do Tema no Diretório de Temas do site do WordPress, caso houver)Description: Twenty Twenty Child Theme (Aqui descreve que o Tema é filho do tema Twenty Twenty)Author: David ArtyAuthor URI: https://davidarty.com (Site do autor do tema)Template: twentytwenty (Parte fundamental e obrigatória para o funcionamento – Este nome corresponde ao nome da pasta do Tema Pai)Version: 1.0.0 (Versão)License: GNU General Public License v2 or later (Licença)License URI: http://www.gnu.org/licenses/gpl-2.0.html (Endereço da Licença)Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready (Tags que descrevem características do Tema)Text Domain: twentytwenty (Possibilita que os metadados do tema seja traduzidos)*/

Na verdade, grande parte deste código não é necessário, caso seu tema não seja distribuído para comunidade. Então você pode resumi-lo com as partes mais importantes para a funcionalidade do tema. Veja a seguir:

/*Theme Name: Fundamentos do Design ThemeDescription: Twenty Twenty Child ThemeTemplate: twentytwentyText Domain: twentytwenty*/

Reforço aqui atenção para o nome presente na linha Template. Este nome deve corresponde ao nome da pasta do Tema Pai para que tudo funcione.

As próximas linhas do arquivo são dedicadas aos estilos CSS que irão substituir os estilos do Tema Pai.

Após essa edição no arquivo você deve subi-lo para sua hospedagem, na pasta do tema filho, e poderá ativar o Tema no WordPress.

Na hora que você for ativar o Tema Filho no painel do WordPress, lá em Aparência/Temas, você notará que ele não tem uma capa. Mas resolveremos esta questão em um tópico mais a frente.

Você também poderá também testar o tema novo visitando uma página do site. E se surpreenderá com uma página sem estilo algum.

Página sem estilos CSS

Mas não se preocupe! Estamos no caminho certo! Isso será corrigido na próxima etapa ao enfileirar os arquivos CSS usando o arquivo “functions.php”.

3 – Enfileirar as folhas de estilo do tema pai e do tema filho através do arquivos “functions.php”

O “functions.php” é um arquivo presente em seu tema WordPress, e ele é carregado antes de qualquer arquivo de template do tema.

Este arquivo é poderoso, pois ele determina diversas funcionalidades de um tema. Para quem tem conhecimentos avançados de PHP e da documentação do WordPress será possível usar este arquivo para substituir, ou editar funcionalidades presentes no Tema Pai.

Mas aqui usaremos para enfileirar as folhas de estilo usando wp_enqueue_scripts action e wp_enqueue_style() no tema filho.

Crie um arquivo chamando “functions” em seu editor e salve com a extensão “.php”. Insira o código a seguir:

<?php function theme_enqueue_styles() {

$parent_style = ‘parent-style’;

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
?>

Após a edição suba o arquivo “functions.php” para a pasta do Tema Filho em sua hospedagem para testar.

Uma coisa importante a frisar é que diferentemente do que ocorre com os estilos, o “functions.php” do Tema Pai é carregado antes do que o do Tema Filho.

Veja agora que ao visitar uma página do site o estilo visual será carregado. Mas, apesar de ser o mesmo do Tema Pai, o estilo que predomina sempre será do Tema Filho.

O que acontece é que no momento estão sendo carregados os estilos do Tema Pai. Mas basta sobrescrevê-los alterando valores das propriedades no arquivo “style.css” do Tema filho e que o visual se modifica.

Testando um tema filho com pequenas alterações

Para verificar a efetividade da criação do Tema Filho você pode testar fazendo certas edições. Para isso você deve dominar no mínimo as Linguagens CSS e HTML.

Existem diferentes níveis de edição para um Tema Filho de acordo com a complexidade.

Edições de complexidade baixa

Onde você edita com CSS algum elemento HTML existente no Tema Pai sem alterar ou outros Elementos HTML.

Um exemplo simples que serve para testar se o tema filho está funcionando é alterar a cor de um título de uma página. Veja um exemplo a seguir.

Passo 1:

Primeiro inspecionamos o elemento HTML através do Inspetor do navegador em uso para identificar o nome do seletor CSS.

Passo 2:

Agora pegamos os seletor identificado no código HTML e o usamos para definir uma nova cor para o títulos através de CSS no arquivo “style.css” do Tema Filho.

Salvamos o arquivo e subimos para pasta do Tema Filho. Recarregamos a página para averiguar se o título principal mudou para cor vermelha.

A mudança da cor do título para a cor vermelha é a confirmação final de que o Tema Filho está funcionando.

Se você conseguir chegar até aqui você está habilitado para configurar um Tema Filho.

O que foi exposto até este momento é fundamental para que partir deste ponto possa se fazer alterações mais complexas. Entretanto os tipos de edição tratadas a seguir seria indicado conhecer um pouco de PHP.

Edições de complexidade média

Esta edição é quando você precisa alterar um elemento HTML em um arquivo PHP do tema. Neste caso é preciso subir uma cópia do arquivo do Tema Pai para a pasta do Tema Filho.

Os temas WordPress são compostos por diversos arquivos de modelos em PHP (além de CSS e JS). São arquivos modulares e reutilizáveis, usados ​​para gerar as páginas da web em seu site WordPress. Alguns arquivos de modelo (como o modelo de cabeçalho e rodapé) são usados ​​em todas as páginas do seu site, enquanto outros são usados ​​apenas em condições específicas.

Você poderá ver a relação destes arquivos na Hierarquia de Modelos no site WordPress.

As alterações destes arquivos serão feitas no Tema Filho. Ao subir um destes arquivos para a Pasta do Tema Filho ele assumirá todas as funções em detrimento do arquivo existente no Tema Pai.

Use esse recurso com parcimônia. Se você acredita que deva editar uma quantidade muita grande de arquivos que compõem o Tema, considere se não é mais adequado criar um Tema do zero em vez de um Tema Filho.

Sem contar que qualquer ajuste que o desenvolvedor do Tema fizer em algum arquivo original não será repassado para o Tema Filho em futuras atualizações. O Tema filho só herda as funcionalidades do arquivos que estão somente no diretório do Tema Pai.

Um exemplo simples é incluir um subtítulo (tags Headline) no arquivo responsável por exibir o cabeçalho do site (header.php).

Observação: Para não ocorrer um erro PHP evite fazer edição entre as tags de abertura e fechamento do PHP (“<?php” e “?”>) se você não tem certeza do que está fazendo.

Edições de alta complexidade

Aqui você precisa de bons conhecimentos de PHP e da documentação WordPress.

Este tipo de edição visa alterar alguma linha de código PHP em um arquivo específico e como no tópico anterior deve ser usado com parcimônia. Ou alterar uma funcionalidade do tema pai através do arquivo “functions.php” ou também incluir uma funcionalidade nova.

Conclusão sobre Temas Filhos

Se você precisa fazer alterações pontuais e não quer que essas alterações sejam perdidas em atualizações futuras o uso de Temas Filhos WordPress é o caminho a seguir.

É comum pessoas e queixarem por terem perdidos alterações em seus sites WordPress e os Temas Filhos tem função de evitar isso. Mas como citado no artigo, use de forma consciente para não perder todo o potencial do Tema principal e de forma que faça o processo de desenvolvimento ser ágil para seu projeto.

Agora me diga nos comentários o que você acha sobre os Temas Filhos.

Aproveite e compartilhe esse conteúdo com seus amigo!!!

Abraço!!
The post Temas Filhos WordPress – Para que servem e como criar? appeared first on Chief of Design.

Temas Filhos WordPress – Para que servem e como criar?
Fonte: Chef of Design

Google Tag Manager. O que é? Para que serve?

Google Tag Manager. O que é? Para que serve?

Você já precisou inserir manualmente um pixel do Facebook em algum site? E precisou repetir o processo para inserir qualquer outro tipo de código de terceiros? E se você pudesse gerenciar todos esses códigos em um só lugar sem precisar mexer nos arquivos hospedados no servidor? É então hora de você conhecer o Google Tag Manager.
Eu sou Ed Francisco e estou aqui para te mostrar como você pode adicionar e gerenciar scripts de terceiros em seus sites e sites de clientes de forma simples e sem riscos com o Google Tag Manager.
Antes de entendermos como funciona esta ferramenta devemos primeiros conhecer as tags. Vamos começar?
O que são tags?
Existem ações fundamentais no marketing digital. Muitas destas ações visam aumentar o número de vendas. Entender o comportamento do usuário que visita um site, alimentá-lo com publicidade pós-visita e acompanhar e otimizar conversões se destacam entre as estratégias para alavancar as vendas.
Para que essas estratégias funcionem é necessário adotar de rastreadores que acompanham as ações. Se tratam de pequenos códigos javascript inseridos nos sites que realizam uma infinidade de tarefas, muitas delas relacionadas a estratégias de marketing digital. Esses códigos são tratados como tags.
Alguns tipos de tags famosas que possivelmente você já teve contato são:

Código de acompanhamento do Google Analytics;
Pixel de acompanhamento de conversão do Google Ads;
Pixel de remarketing do Google Ads;
Pixel de acompanhamento de conversão do Facebook Ads;
Pixel de remarketing do Facebook Ads.

O que é Google Tag Manager?
O Google Tag Manager é uma ferramenta gratuita que permite que você inclua os scripts de terceiros apenas em um lugar e sem a necessidade de acessar seu servidor.
Por que usar o Google Tag Manager?
A inserção das tags é um processo corriqueiro para quem trabalha com Marketing Digital. E esse processo não é uma tarefa fácil para quem não tem familiaridade com códigos HTML.
Existe um grande risco de quebra do site se uma pessoa sem conhecimento adequado mexer em algum arquivo que está n o servidor.
A adoção do Google Tag Manager traz a grande vantagem de não precisar acessar esse arquivos dependendo apenas de inserir um pequeno código uma vez e todos os outros que futuramente você precise inserir pode ser executado de forma simples e prática dentro da interface gráfica do Google Tag Manager.
E com uma outra vantagem de que se algo der errado você pode recorrer à uma versão anterior instalada.
Com a possibilidade de você administrar suas tags, pixels e scripts em um só lugar as pessoas que administram esse códigos terão mais autonomia sem precisar buscar ajudas de profissionais de TI que já podem estar bastante atarefados.
Como começar?
Para começar é preciso possuir uma conta no Google e logar com seus dados no site do Google Tag Manager.
Depois disso você precisa criar uma conta que pode ser o nome de sua empresa. Em seguida criará um contêiner que pode ser o nome de seu site ou aplicativo.
O processo continua com aceitação dos termos e a inserção de códigos específicos em seu site. Lembrando que depois destes os próximos códigos serão inseridos na interface do Google Tag Manager.
A seguir apresento um vídeo que além de falar sobre o Google Tag Manager demonstra como fazer essa configuração inicial.

Principais funcionalidades do Google Tag Manager
As principais funcionalidades do Google Tag Manager consistem na criação das tags e de acionadores que disparam quando é preciso que as tags entrem em ação.
Criação de Tags
Basicamente tags são os scripts que você que você quer incluir em um site, O Google Tag Manager oferece uma gama de tipos de tags pré-configurados como o Google Analytics, as tags de remarketing do Google Ads.
Caso o Google Tag Manager não ofereça uma pré-configuração para um script específico é possível adicioná-lo a partir do HTML personalizado. Caso este na inserção dos Pixels do Facebook.
Criação de acionadores
Os acionadores determinam em quais eventos uma tag deve funcionar. Um bom exemplo de acionador é quando determinada tag é acionada quando o usuário visita uma página.
Esta página foi definida na criação do acionadores. Lá você pode definir diferentes tipos de eventos e quando ele deve ser acionado.
Caso escolha o evento visualização de páginas você pode definir que o evento ocorra em todas as páginas ou em algumas específicas.
É indicado você criar os acionadores antes das tags porque eles deverão ser selecionados durante a criação das tags.
Modo de visualização
Quando configuramos nossas tags basta clicar em publicar para que as mesmas entrem em funcionamento. Mas é aconselhado que antes de publicar você ative o Modo de Visualização para que averigue se as tags estão funcionando no devido momento ou não.

Instalação de scripts do Google e pixels do Facebook no Google Tag Manager
No vídeo a seguir eu demonstro como criar e suas tags e pixels do Google e Facebook para que sejam instalados em sites WordPress. Confira!

Conclusão
O uso do Google Tag Manager se mostra uma ação vantajosa para inserção de scripts de terceiros de forma prática.
Ao adotar essa ferramenta a equipe de marketing passa a ter mais autonomia para gerenciar suas tags a não depender de outros profissionais para inserção dos códigos.
Agora me diga. Como você instala suas tags? Você já utilizou o Google Tag Manager?
Deixe seu comentário e aproveite e compartilhe esse artigo com os amigos.
Abraço!
The post Google Tag Manager. O que é? Para que serve? appeared first on Chief of Design.

Google Tag Manager. O que é? Para que serve?
Fonte: Chef of Design

O que é Elementor WordPress page builder?

O que é Elementor WordPress page builder?

Eae, tudo bele?

Este artigo é para você está procurando por Elementor WordPress. Aqui eu vou te mostrar o que é esse page builder e como você pode utilizar o WordPress Elementor Page Builder em seus sites.

O Elementor é uma ferramenta do WordPress, CMS do mundo. CMS é o acrônimo de Content Management System — que traduzindo significa, sistema de gerenciamento de conteúdo, existem vários no mercado, porém nada supera o WordPress em termos de possibilidades, suporte e ferramentas.

Os gerenciados de conteúdo permitem criar sites mesmo sem saber programar, eles contam com templates, plugins e outras ferramentas que nos possibilitam tal facilidade. E no caso específico do WordPress, temos milhares de possibilidades de criação, desde blogs até lojas virtuais e grandes sites. Aqui no Brasil, temos alguns exemplos como o site da Toyota, da editora Abril, do Rock in Rio, da Gisele Bündchen e até mesmo o blog do Wix (vejam só hehehe) é feito em WordPress.Só para você ter uma ideia, mais de 30% dos sites em todo o mundo são feitos com o WordPress. E o Elementor é o plugin mais utilizado (ou um dos mais, depende de quando você estiver lendo esse artigo) e baixados e utilizados de toda a plataforma.

Então neste artigo você verá como utilizar esse page builder e começar a criar os seus próprios sites de forma simples e intuitiva.

O que é o Elementor WordPress?

Caso você não saiba Elementor WordPress é plugin de page-builder para o CMS WordPress. Com ele é possível criar páginas de sites em uma interface real-time e do tipo “drag&drop”, ou seja, clicando e arrastando.

O plugin Elementor é um dos mais populares na comunidade WordPress, se tornando o principal page-builder da plataforma. Para utilizar o Elementor, basta ter um site em WordPress. Caso você não saiba instalar o WordPress ou nem sabe do que se trata, sugiro que leia esse outro artigo.

Abaixo você pode conferir uma live que fiz utilizando a ferramenta e como em pouco menos de 1 hora eu criei um site sem mexer em código, praticamente apena “clicando e arrastando”.

Quais os benefícios do Elementor WordPress?

O principal benefício é poder criar páginas de modo rápido, simples (clicando e arrastando) e sem precisar mexer em código. Podemos listar como alguns, dos vários benefícios que o Elementor pode proporcionar para você que precisa criar páginas web, como:

A curva de aprendizagem é relativamente rápida e simples;
você não precisa comprar a versão pro (mas é muito bom se puder);
existem vários produtores de temas, plugins e addons;
é um dos plugins mais utilizados pela comunidade do WordPress;
não precisa de conhecimentos em programação (mas é bom se souber);
não precisa de conhecimentos em HTML e CSS (mas é muito bom se souber);
ele funciona independente do tema que estiver utilizando, permitindo adicionar e deletar elemento em páginas e posts.

Como instalar o Elementor WordPress?

A instalação é bem simples. Basta você acessar o site diretório de plugin do wordpress, procurar pelo Elementor e depois clicar na opção “download”.

Você também tem a opção de acessar o próprio painel de controle do seu site em WordPress, depois ir em: Plugins> Adicionar Novo. NO campo de pesquisa você deve procurar por “Elementor“.

Abaixo deixo um vídeo tutorial que gravei mostrando como você instala o Elementor em seu site WordPress.

O vídeo acima faz parte de um curso de Elementor WordPress que gravei aqui para os seguidores do Chief of Design. Caso queira aprender mais, clique aqui.

Como usar o Elementor WordPress?

Após instalar o Elementor, basta você criar uma nova página ou post. Depois, clique em “Editar com o Elementor” e pronto. A partir disso você será redirecionado para a tela de criação da página, onde você poderá configurar e construir a página sua maneira.

Como já dito, o Elementor é um construtor de páginas to tipo “clica e arrasta”.Para você começar a criar a página, você vai adicionando elementos e literalmente construindo a sua página dessa maneira.

Em meu canal no Youtube eu tenho uma playlist onde mostro o passo a passo para você começar a trabalhar com o Elementor. Caso queira aprender mais, clique aqui.

O Elementor WordPress é pago?

Sim e não. Você pode usar tanto a verão free quanto a paga. Existem essas duas versões, gratuita e paga, do software, porém em ambas você consegue as suas páginas. É isso mesmo que você leu! Caso você não tenha dinheiro para comprar o plugin, é possível instalá-lo e utilizá-lo.

Também é possível, mesmo na versão free, instalar “addons” e outros plugins que atuam em conjunto com Elementor WordPress, potencializando as funcionalidades e possibilidades de criação de páginas.

A grande diferença entre a versão paga, chamada de Elementor PRO, e a gratuita está nas funcionalidades da ferramenta.

A versão paga do Elementor é muito mais completa, pois contém várias funcionalidades que a verão gratuita não tem. Para conhecer a versão PRO e todos os seus benefícios, clique aqui.

Quanto custa a versão paga do Elementor WordPress?

A versão paga do Elementor está disponível atualmente em três planos.

O plano “Personal” para uso ilimitado em 1 site, está por $49.
O plano “Plus” para uso ilimitado em até 3 sites, está por $99.
O plano “Expert” para uso ilimitado em até 1000 sites, está por $199.

Em todos os planos você tem 30 dias de garantia e 1 ano de suporte e atualizações. A licença é perpetua e você pode utilizá-la para sempre.

O preço sempre é aplicado em dólar americano, então dependendo do câmbio do momento, o valor pode ser maior ou menor.
Para conhecer a versão PRO e todos os seus benefícios, clique aqui.

Vale a pena comprar a versão paga do Elementor WordPress?

Sim, super vale a pena. O Elementor facilita de mais a construção de páginas web e sites completos. E o mais legal que você pode criar os sites dos seus clientes com ele. Não tem problema algum. Por isso, o investimento tende a se pegar ao longo do tempo, caso você atue como freelancer.

Caso você não trabalhe com sites, mesmo assim a versão Elementor PRO vai te ajudar, pois vai te ajudar a poupar muito tempo e com as funcionalidades exclusivas da versão paga você terá mais agilidade e controle sobre o seu projeto.
Você pode conhecer a versão PRO e todos os seus benefícios, clique aqui neste link.

Considerações

O Elementor WordPress com certeza está entre os melhores page-builders da atualidade,na minha opinião é o melhor e mais completo que existe.

A facilidade que o Elementor nos dá na hora de criar páginas, a sua versão free com bastante recursos e mais todo o suporte da comunidade com a criação de novas ferramentas e resoluções de bugs é muito grande.

Se você deseja aprender a utilizar essa ferramenta, eu tenho uma boa notícia para você.

Em meu canal no Youtube eu tenho uma série de vídeos onde mostro como você pode começar a criar os seus próprios sites com o Elementor. Clique aqui para conferir.

E você já utiliza o Elementor? Deixe abaixo a sua opinião, relato ou dica sobre esse plugin.

Forte abraço.

Até mais.
The post O que é Elementor WordPress page builder? appeared first on Chief of Design.

O que é Elementor WordPress page builder?
Fonte: Chef of Design

WordPress como Ferramenta de Marketing Digital

WordPress como Ferramenta de Marketing Digital

Eae, tudo bele?
No dia 13/10/2018 eu palestrei no WordCamp2018. O tema da minha palestra foi: WordPress como Ferramenta de Marketing Digital: Como o WordPress pode te ajudar a alavancar o seu negócio?
O WordPress é uma ótima ferramenta para quem é empreendedor e nessa palestra eu mostrei como nós utilizamos esse CMS aqui no Chief of Design e também em outros projetos.
E a oportunidade de palestrar no WordCamp foi incrível. A comunidade aqui do Brasil, e principal a de São Paulo, é uma das maiores do mundo.
Assista abaixo a palestra que ministrei e veja como foi esse super evento de tecnologia. E caso queira os slides da palestra, você pode conferir aqui.
WordPress como ferramenta de marketing digital – Palestra WordCamp 2018

E já que falei tanto sobre WordPress na palestra, vou complementar este artigo com mais conteúdo, para você entender por completo entender como o WordPress pode ser uma ótima ferramenta de marketing digital ajudando a melhorar o seu negócio, vamos entender um pouco do que se trata esse CMS.
O que é o WordPress?

Caso você nunca tenha ouvido falar em WordPress saiba que ele é uma plataforma de Gerenciamento de conteúdo, ou para muitos o CMS (que tem na prática o mesmo significado). Esta a é a plataforma para publicação de conteúdo mais usada no mundo e engloba quase 70% do mercado que trabalham com CMSs.
O que você poderá fazer caso domine este CMS?

Depende do objetivo. Se você pretende apenas trabalhar com conteúdo você poderá administrar todas as publicações do site através da construção de páginas, galeria de imagens, páginas de produtos, posts de blogs, entre outro tipos de conteúdo, e também executar agendamento e exclusão dos mesmos.
Também poderá instalar funcionalidades através de instalação de plugins e gerenciar comentários, se ativada esta função no projeto, e até gerenciamento de contas de colaboradores do projeto.
Caso seu objetivo seja a construção de um site, você poderá usar de recursos próprios do WordPress para agilizar seu trabalho e até ativar funcionalidades interessantes na própria interface desta plataforma sem muitas dificuldades. Entretanto você potencializará os seus layouts caso possua conhecimentos em linguagens de marcação, estilização [** Dica: To falando do HTML & CSS  e o melhor é que temos um ebook pra isso, viu! é  clicar no banner que está aí algum lugar desta página :P]  e/ou programação.
Quais recursos o WordPress oferece?

Além das inúmeras funcionalidades que esta plataforma disponibiliza, através de seus temas e plugins, também possui suporte em uma das comunidades mais engajadas que podemos encontrar na web, o que possibilita a você encontrar muitas variedades de soluções para problemas diversos.
Porque você deve aprender a mexer nesta plataforma?
O aprendizado deste CMS é imprescindível nos dias de hoje porquê:

pelo fato do mercado exigir cada vez mais profissionais habilitados nesta plataforma, pela possibilidade de oferecer aos criativos que não lidam com programação uma forma de aplicar funcionalidades através de configurações intuitivas em seu painel de controle;
porque possibilita a profissionais de front-end personalizar temas já existentes através de HTML e CSS e a desenvolvedores criarem temas do zero bastando ter acesso à documentação do WP;
E o principal: como esse sistema possibilita o gerenciamento, seus clientes poderão realizar a atualização dos conteúdos dos sites sem depender de você, bastando que ele seja orientado com as ferramentas de publicação que o WordPress oferece.

Não confunda WordPress.ORG com WordPress.COM

É importante ressaltar que tudo que foi dito até agora foi sobre o WordPress.ORG.
O WordPress.ORG é um projeto que oferece um aplicativo gratuito cujos arquivos você tem a total liberdade para modificá-los. Para que este aplicativo funcione, e você possa mexer na plataforma para construir seu site, você precisa hospedá-lo em um servidor.
Em relação ao WordPress.COM se trata de uma plataforma online, isso quer dizer que você não precisa baixar arquivos de forma alguma para instalar em uma hospedagem. Todos os recursos já vem prontos em uma hospedagem própria da plataforma. Mas possui muitas limitações. Exemplo: para que você ative funcionalidades extras você é obrigado a adquirir planos pagos para isso. Para você ter uma ideia para apenas adicionar um domínio é precisa pagar um plano.
Já com o WordPress.ORG. não existem estas limitações em relação as customizações, e grande parte das funcionalidades que você instala através de plugins é gratuita.
Na palestra eu falo sobre motivos para você utilizar o WordPress e como você pode utilizar o WordPress para a criação de:

Blogs;
Landingpages;
Testes A/B;
Para conseguir tráfego via SEO;
Entre outros.

Além de todas essas possibilidades de criação, deixarei alguns desses motivos aqui em texto para você conferir.
WordPress é fácil para instalar, configurar, gerenciar e manter
Umas das questões que tenho que lidar é administração de tempo. Ah , como é complicado, viu!
Então lidar com uma ferramenta que traga facilidades é um dos pré-requisitos para escolha de um CMS.
Já naquele tempo, quando comecei a rascunhar as primeiras ideias sobre o Chief, ganhar tempo era uma prioridade, afinal só poderia mexer no projeto nos momentos de folga e dedicar o maior tempo com criação de conteúdo e o mínimo com gerenciamento.
Para quem for instalar o WordPress pela primeira vez pode se surpreender se espera por uma instalação complexa. Porque é simples e rápido.
Em questão de configuração e gerenciamento a curva de aprendizagem é curta. E o CMS avisa sobre a necessidade de atualizações que podem ser feitas a um clique.
Caso você queira saber como instalar o WordPress veja este artigo.
E dependendo da hospedagem que utilizar essa ação pode até ser mais simples com instaladores automáticos. Como a Hostnet, por exemplo que tem o seu próprio sistema de instalação focado em WordPress.
É de código aberto

Vista que o Chief era um projeto que estava começando, umas das premissas era atingir os primeiros objetivos com o mínimo de recursos possíveis, ou seja, com pouca audiência prevista nos primeiros meses não se justificava investir em ferramentas caras, servidor dedicado e no que se refere a gerenciador, logicamente, soluções pagas estavam fora de cogitação. Uma solução open source era o que eu buscava.
Pois bem. O WordPress é open source e livre de restrições comerciais e limitações. Você pode baixá-lo e subi-lo no servidor de hospedagem que você escolher e usar da forma que você bem entender.
Possui uma comunidade enorme

Esse lado positivo do WordPress eu enxerguei muito antes mesmo de passar em minha mente em construir um blog sobre conteúdos para Web. Foi quando tive a necessidade de construir um site dinâmico e não sabia por onde começar, que encontrei soluções práticas na grande comunidade que cria conteúdos sobre WordPress, e soube que a partir daí teria respostas para grande parte das minhas dúvidas.
Essa comunidade enorme é consequência de um enorme número de seguidores sedentos por conteúdo. Daí o resultado foi “zilhões” de sites que falam sobre o assunto, um fórum feito especialmente para dar suporte, diversos eventos presenciais sobre o tema pelo mundo e desenvolvedores que criam temas e plugins para o WordPress.
Sabendo disso antecipadamente tive a certeza que o Chief estaria bem amparado.
Lógico que tem muita coisa espalhada na web e que você tem que angariar com paciência, ou optar por treinamentos como o meu curso Web Designer Pro, que possui módulos organizados sobre esse assunto.
Além da comunidade Web, também existem eventos presenciais da comunidade como palestras, workshops e meetups. Inclusive o meu primeiro WordCamp foi o de 2016 aqui em São Paulo. Duvido você me encontrar na foto abaixo

E
Ele é amigável para os mecanismos de buscas
Ter um site “encontrável” é objetivo para qualquer projeto, independente da ferramenta que você desenvolve. Você pode criar um site estático somente com HTML e CSS, mas sua preocupação com SEO deve estar presente.
De nada adiantaria escolher um CMS para o Chief, por melhor que ele seja, que não fosse amigável aos mecanismos de buscas. E WordPress é bem-conceituado neste quesito.
Nada mais, nada menos que Matt Cutts, engenheiro de software e ex-chefe da equipe de spam da web no Google declarou que o WordPress cuida de 80 a 90% de SEO.

Sem contar que você pode instalar uma funcionalidade através de um plugin gratuito chamado Yoast SEO que facilita e muito sua vida, provendo vários aspectos de SEO em seus sites.
Não abro mão deste plugin no Chief. Se você quiser saber mais sobre plugins importantes para o seu site em WordPress, sugiro que leia este outro artigo do aqui do blog.
WordPress é muito mais que um gerenciador para blogs
Já passou da época em que o Worpdress era um ótimo gerenciador de blog. Na verdade, ele é um CMS completo para todos tipos de sites. Basta a instalação de alguns plugins e você já tem uma loja virtual ou uma rede social.
Enquanto projetava o Chief of Design, vislumbrava o que mais um gerenciador de conteúdo poderia prover se eu quisesse oferecer de forma diferente os meus conteúdos. De repente poderia me ver com a necessidade de fornecer aos meus seguidores uma área de membros, poderia necessitar de algum recurso que me ajudasse a conquistar leads, etc.
Hoje em dia, boa parte destes recursos são realidades mesmo que através de plugins premium (pagos). O que faz que eu tenha uma melhor interação com meus seguidores além da interface do blog.
O WordPress possibilita a integração, desde que você adquira ferramentas corretas,desde criados de landingpages, áreas de membros até com ferramentas de e-mail marketing, por exemplo.
Interface de administração intuitiva

Está aí uma coisa que gosto muito no WordPress. A interface administrativa deste CMS é muito boa. O que faz que em pouco tempo usuários comuns possam gerenciar seus projetos.
A interface é intuitiva, fácil de usar e de acessar dados.
Acredito que esse é um os diferenciais do WordPress que você pode levar em consideração na hora de escolher um CMS.
Afinal, grande parte (ou praticamente tudo) das ações que um cliente realizará em um site dinâmico, construído por você, será na área administrativa. E o WordPress manda bem no que se refere ao Design de interface de usuário.
O WordPress possui ótimos temas modernos e responsivos

Existe uma gama de desenvolvedores que constroem sites adaptados para diferentes resoluções de telas. Isso já esperado quando comecei a descobrir o WordPress, tanto que quando comecei o Chief sabia que encontrar um bom tema responsivo não seria problema.
Claro que tendo conhecimentos em CSS, você poderá trabalhar ainda mais a responsividade de seus sites (sobre personalização vou falar mais à frente). Foi o que eu fiz no tema que o Chief usa atualmente.
O WordPress possui uma ferramenta de busca que possibilita encontrar diversos temas. Possui até filtro por características. Mas caso não encontre nos gratuitos o tema o ideal para  você, pode optar por temas pagos como os do site themeforest.
O WordPress possui plugins que são uma mão na roda

O WordPress foi criado para ser estendido. E esta forma de extensão é gerada pelos chamados plugins. A comunidade web aderiu a esta possibilidade e por isso que desenvolvedores em todo mundo criam funcionalidades extras, a todo tempo, que são adicionadas ao núcleo do gerenciador.
Pensou em uma funcionalidade para seu site? A chances de Worpdress ter um plugin que supre essa necessidade é grande.
Reconheço que outros CMSs, como o Drupal e o Joomla, dispõem de extensões como os plugin do Worpdress, mas a disponibilidade e variedade do WordPress é impressionante.
Existem alguns plugins que são tão bem classificados que dificilmente imagino o Chief sem alguns deles.
São plugins para SEO, segurança, performance, redes sociais, formulários, entre tantas funcionalidades que fico pensando o que seria de mim se tivesse que desenvolver tudo isso. Com poucos cliques você instala e ativa e, se precisar, realizar algumas configurações.
Obs.: Só não abuse no uso de plugins para não diminuir a performance de seus sites.
Altamente personalizável
A minha preocupação na hora de construir os meus projetos era se com apenas o domínio de HTML e CSS e fuçando na documentação do WordPress, seria possível personalizar um tema, que baixei na web, a partir do código inserindo campos e seções e personalizando o layout. E a resposta foi sim, tanto que visualmente o blog do Chief é muito diferente do tema original.
Esta personalização é feita através de temas filhos, assunto que poderemos abordar no futuro.
Se você manja de PHP você poderá ter um domínio ainda maior da personalização, pois grande porcentagem da parte funcional de um tema WordPress é formada por arquivos com extensão .php.
É possível também que você faça uma personalização mais abrangente se você dominar a criação de temas raiz ou a partir de um framework para ganhar mais tempo, como por exemplo o framework Odin, desenvolvido pela comunidade brasileira de WordPress.
Temas a partir do zero, temas a partir de frameworks e temas filhos são as formas que possibilitam um projeto altamente personalizável. Todavia ainda existe uma forma que possibilita uma menor de customização, que é através da customização do tema. Essa personalização varia de tema para tema e não mexe de forma efetiva com códigos.
Dependendo do tema é possível alterar a cor de fundo, a imagem de cabeçalho, inserir logo, inserir widgets e até mexer na tipografia.
Em comparação com os outros métodos citados anteriormente ele é bem inferior, porque não permite mexer de forma efetiva e profunda no layout.
 Por que você deveria usar WordPress em seus sites?
Acredito que você já tenha percebido o potencial do wordpress e que utilizá-lo é uma ótima escolha se precisas de sites dinâmicos.
O WordPress pode trazer boas vantagens como: facilidade de instalação e gerenciamento, uma comunidade disposta a oferecer os melhores conteúdos de suporte, um site otimizado para os mecanismos de buscas, funcionalidades extras e temas diversos e a possibilidade de customização. Tudo isso já seria suficiente para aderir a este CMS.
Considerações Finais
Como apresentei na palestra no WordCamp SP 2018, o WordPress pode ser uma ótima ferramenta em suas estratégias de marketing digital.
Se você trabalha com marketing e conteúdo, pode testar esse CMS, você não vai se arrepender. E quem sabe a gente se encontra em algum WordCamp, né?
Deixe o seu comentário ou dúvida abaixo. Fique à vontade!
Forte abraço.
Até Mais.
The post WordPress como Ferramenta de Marketing Digital appeared first on Chief of Design.

WordPress como Ferramenta de Marketing Digital
Fonte: Chef of Design

Jakeliny Gracielly – Entrevista🎙Na mesa do Chief

Jakeliny Gracielly – Entrevista🎙Na mesa do Chief

Eae, tudo bele?
Hoje trago uma entrevista com a desenvolvedora Jakeliny Gracielly, do FCamara.
Além de desenvolvedora a Jake também é palestrante de tecnologia e participa da organização de Meetups como o Nerdzão, o NerdGirls e o WordPress SP.
Essa entrevista é diferente, pois foi gravada pessoalmente, AO VIVO literalmente, feito na empresa FCamara.
Nesse bate-papo nós conversamos sobre mercado de tecnologia, faculdade de tecnologia, posicionamento profissional entre outros assuntos. E também falamos sobre como é o mercado de tecnologia para mulheres. É fato que existem muito menos mulheres nesse segmento, por isso uma parte importante do vídeo é justamente sobre esse assunto.
Então senta, relaxa, pega um café e assista abaixo essa super entrevista.
Entrevista: David Arty e Jakeliny Gracielly

Conheça a Jakeliny Gracielly
Líder de desenvolvimento na FCamara e decodificadora da Matrix. Analista de sistemas e técnica em programação, trabalha há 5 anos em projetos de tecnologia e desenvolvimento. É co-organizadora de comunidades (WordPress São Paulo, Nerdzão e FC Tech), entusiasta de cyber security e inteligência artificial.
Siga a Jakeliny Gracielly:
Site: https://jakeliny.com.br/
Medium: https://medium.com/@jakeliny.gr
Twitter: https://twitter.com/jakelinygr
Instagram:
https://www.instagram.com/jakelinygracielly/
Gostou do vídeo? Eu gostei
Espero que o vídeo tenha sido útil para você, que você tenha gostado e que te ajude de alguma maneira, agregando conhecimento e informação para você seguir a sua trajetória profissional.
Aproveite que está aqui e deixe o seu comentário abaixo!
E não esqueça de ajudar o 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 Jakeliny Gracielly – Entrevista🎙Na mesa do Chief appeared first on Chief of Design.

Jakeliny Gracielly – Entrevista🎙Na mesa do Chief
Fonte: Chef of Design

Web designer vs Front-end

Web designer vs Front-end

Eae, tudo bele?
Web designer vs Front-end? O que faz um Web Designer e um Front-End? Quais as diferenças e semelhanças?
Essa dúvida é bem recorrente para os iniciantes e muitos acabam confundindo cada área e o que cada profissional faz. Por isso gravei um vídeo (ao final deste artigo) sobre o tema. Mas antes de você~e assistir ao vídeo (não ouse sair deste artigo sem ver o nosso vídeo, viu!) eu explicarei aqui mesmo neste artigo com detalhes sobre cada tópico.
Vamos nessa?
O que faz um Web Designer?

De forma sucinta, um Web Designer é um profissional que executa design para web. Por isso para compreendermos melhor sua função temos que conhecer o conceito de web design. Veja a seguir:
“Web design é uma área que executa processos que envolvem o planejamento, a criação e a manutenção de interfaces para websites, aplicações web e interfaces digitais em geral, levando em conta a arquitetura de informações, a navegação, a usabilidade e demais aspectos que devem envolver fundamentos de Design.”
Logo um Web Designer planeja, cria e mantém interfaces digitais para web considerando aspectos importantes do Design.
Precisa ser Designer para trabalhar com Web Design?
Se formar Designer será um diferencial para quem pretende criar interfaces para web, porém não acredito ser o primeiro caminho que você deva tomar levando em conta que muitos bons profissionais nem possuem essa formação.
É possível, portanto, se tornar Web Designer sem cursar Design Gráfico. Basta que você utilize todos os meios possíveis para aprender os conceitos de Design.
Pessoas trabalhando, conversando e sorrindo em uma reunião no escritório Por Morrowind /Shutterstock
Web Design é uma área que deriva em suma do Design gráfico, lógico que com suas particularidades que se refere a aplicação para dispositivos web, mas os principais conceitos, como Teoria das cores, Tipografia, Gestalt, Grid, Imagens, entre outros, são presentes para essa área.
Então você tem diferentes possibilidades de aprender esses conceitos. Você pode aprender em:

cursos onlines ou presenciais,
lendo livros,
consultando a web,
em contato com outros profissionais,
em congressos e palestras, etc.

Mais tudo isso só será tão forte quanto cursar uma faculdade se você pôr em prática no dia-a-dia.
Vale ressaltar que um curso superior em Design sempre será bem-vindo. A questão é que ele somente não é o suficiente para te tornar um profissional da área e nem tão pouco um Web Designer de sucesso.
O que é um Front-end?
É um profissional que trabalha com HTML, CSS e JavaScript, basicamente. Ele trabalha com a parte que o usuário “vê “na tela. É a “parte da frente” do site. Ele é responsável pelo “meio de campo” entre o usuário e o Back-End.
Caso não saiba o que é Back-End, trata-se do desenvolvedor ( ou programador) . Ele trabalha com, por exemplo, PHP, ASP, Java, entre outros. O “dev” trabalha com a parte que o usuário ” não vê “na tela. É a “parte de trás” do site.
Web designer vs Front-end?
Como vimos o Web Designer cuida da criação da interface gráfica, já o Front-End da codificação que tornará possível que a interface gráfica, feita no Adobe XD, Sketch ou Photoshop, por exemplo, seja acessada e utilizada.
Um layout em algum programa gráfico, como o Adobe Photoshop, é algo estático. Trata-se apenas de uma imagem. Então para que aquela interface se torne realmente algo utilizável com possíveis ações pelo usuário (como clicar em um botão, por exemplo) quando é implementado com códigos. Esses códigos sãos, no mínimo, HTML e CSS.
O profissional que faz essa implementação é o Front-End. Logo para isso ele utilizará de linguagens web como HTML, CSS e Javascript.
Para CSS e JavaScript existem várias bibliotecas e frameworks que muitos profissionais se especializam como: Angular, Bootstrap, Jquery, Sass, VueJS, entre outros.
Portanto, cada profissional tem seu papel dentro de um projeto de uma interface gráfica. Tanto o Designer, que planejará e construirá uma interface a fim de facilitar a utilização do sistema (e não só facilitar, mas também deixar mais bonito, por que não?) o Front-End developer será o profissional responsável por tornar realidade(realidade virtual no caso rsrsr) as funcionalidades e o todo o layout planejado e estruturado pelo Designer.
São áreas que se complementam, pois toda interface gráfica (ou quase todas) precisa de um Design, mas para esse Design funcione ele precisa ser implementado no código. Portanto um depende do outro e vice e versa. É óbvio que um site pode ser feito apenas por um Front-End, mas falando de sites profissionais e com objetivos comerciais e de comunicação, o Design se faz muito importante. Existem pesquisas que apontam que pessoas saem do site caso o layout não seja agradável, pois pode transparecer que a empresa é desleixada, que não é confiável ou até mesmo que é uma empresa antiquada.
Caso esteja a fim de fazer um curso online sobre Web Design e que também tem matérias de front-end como CSS3, HTML,CSS Flebox e CSS grid layout, WordPress, entre outros, eu te indico o nosso curso de Web Design: o Web Designer PRO (clique aqui para saber mais).
O curso é 100% online. Os conteúdos são disponibilizados em uma plataforma 24 horas no ar, sendo que você pode assistir as aulas a qualquer hora e qualquer lugar que tenha um dispositivo com acesso a internet. O acesso é ilimitado, você pode ver e rever as aulas quantas vezes achar necessário.
Já são mais de 100 vídeo aulas na plataforma divididas em módulos. A grande maioria do conteúdo está disponível em vídeos e contempla aulas teóricas e práticas com exercícios e exposições de temas sobre web design e outros relacionados. São também disponibilizados materiais extras para download que complementam as vídeo-aulas.
Como complemento das aulas oferecemos tarefas específicas para que observar o processo de seu desenvolvimento criativo.
Também disponibilizamos na plataforma um campo para você expor suas dúvidas.
Então se quiser saber mais sobre o curso, é só acessar http://www.webdesignercursos.com.br/
Vídeo Web designer vs Front-end?
Abaixo segue o vídeo que gravei para falar sobre esse tema. Nele falo sobre o que cada profissional faz e as diferenças entre cada área. Assista e confira:

Então é isso, Galucho! Se você gostou desse vídeo deixe o seu like e compartilhe com seus amigos eu tiverem interesse
E não esqueça de se inscrever em nosso canal no Youtube [CLIQUE AQUI ]
Deixe a sua opinião, dúvida e/ou experiência na área de Web design, nos comentários abaixo, bele?
Até mais.
Forte abraço.
Até mais.
The post Web designer vs Front-end appeared first on Chief of Design.

Web designer vs Front-end
Fonte: Chef of Design

O que é CSS?

O que é CSS?

Este artigo é dedicado a quem está interessado em trabalhar com o aspecto visual de sites através de códigos. E isso é possível através do CSS. Mas afinal, o que é CSS?
Possivelmente você está em suas primeiras pesquisas sobre desenvolvimento web, web design e afins, sabe que o CSS é um dos caminhos a se trilhar e precisa saber mais sobre essa linguagem. Portanto neste artigo você será apresentado a um conteúdo que vai te guiar para que você possa entender a sintaxe, criar os primeiros estilos e dar forma às primeiras páginas web.
Sem mais delongas vamos ver o que você verá neste artigo.

O que é CSS?;
O que é possível fazer com CSS?;
Requisitos para aprender CSS;
Benefícios da aplicação de CSS;
Regras CSS;
Tipos de seletores básicos;
Selecionando elementos aninhados;
Grupamento de seletores;
Declaração única;
Efeito cascata;
Herança;
Especificidade;
Vinculação das folhas de estilos ao documento HTML;
Como criar um arquivo CSS.

O que é CSS?

CSS, sigla em inglês para Cascading Style Sheet, que em português quer dizer Folha de Estilo em Cascata, é uma linguagem que cuida da apresentação visual de páginas web através de regras de estilos. Podemos resumir que é uma linguagem de estilização ou apresentação.
A história da Folha de Estilo começou a surgir quando seu criador Håkon Wium Lie constatou que não havia como estilizar documentos em uma plataforma para publicação eletrônica. Em novembro de 1994 em Chicago, Håkon apresentou a proposta inicial do CSS em uma Web conferência.
Esta linguagem consiste em dar forma aos elementos HTML presentes na página web. HTML e CSS são parceiros. O CSS só existe em função do HTML.
Ela pega uma página praticamente sem estilos e enriquece com cores, formas, tamanhos e até animações. E esta linguagem que define qual a cor de um texto, onde determinado bloco será posicionado, entre outros estilos.
E o que é muito bacana é que o CSS também é um recurso acessível para estilizar o que você projetou em seu editor gráfico através de suas propriedades.
Um dos maiores atrativos do CSS é separar a apresentação em um arquivo externo. Com isso o HTML, que antes estava com a função de marcar e apresentar visualmente o conteúdo, ficou responsável por somente estruturar o conteúdo através da marcação.
O que é possível fazer com CSS?
Com aplicação das folhas de estilos é possível fazer muita coisa. Só para citar algumas, você pode:

Estruturar o layout do site;
Posicionar elementos na página web;
Mudar a ordem de apresentação dos elementos HTML;
Colocar espaçamentos entre elementos;
Preencher com espaço vazio entre a borda de um bloco e seu conteúdo;
Colocar diferentes tipos de bordas de diferentes cores nos blocos;
Inserir bordas arredondadas aos blocos;
Colocar cor de fundo, gradiente ou imagem de fundo aos blocos;
Trabalhar com diversas propriedades para tipografia. Tanto que aqui no Chief tem um artigo dedicado a muitas delas. CONFIRA AQUI!;
Inserir sombras em textos e blocos;
Fazer pequenas animações, transições;
Ocultar elementos, entre tantas coisas.

Requisitos para aprender CSS
Para aprender CSS é necessário para você possuir boas noções de HTML. Se você não conhece nada de HTML aconselho ler esse artigo para introdução. Caso você queira se aprofundar tanto no HTML quanto no CSS sugiro adquirir o E-book Solidário de Fluência em HTML e CSS.
Você precisa também ter instalado em sua máquina um bom navegador tipo Mozilla Firefox ou Google Chrome e um editor para desenvolvimento web. Para começar a aprender o bloco de notas basta.
Benefícios da aplicação de CSS
Entre os principais benefícios destaco:

A separação da folha de estilo da marcação;
Facilidade de manutenção visual do site através de um arquivo externo;
Disponibilidade de diretiva para construção de layouts que atendam diferentes tipos de dispositivos.
Aumento na velocidade de carregamento de páginas.

Regras CSS
Através das regras CSS é que você vai conseguir dar forma as suas páginas web. Portanto a atenção nas informações que vêm a seguir é fundamental.
A regra CSS é um comando que serve para definir o estilo que um elemento HTML receberá. Ele é composto por um ou mais seletores, e uma ou mais declarações. As declarações estão contidas entre chaves e são formadas pela propriedade e o valor da propriedade. O seletor vincula um elemento do documento HTML a declaração CSS.
Uma regra básica segue o seguinte esquema:
seletor { propriedade: valor }
Na imagem a seguir você poderá os detalhes da regra.

Seletor: Ele é responsável por selecionar o elemento, ou elementos HTML que receberão determinado estilo.
Propriedade: Se refere às características visuais que um elemento pode possuir. Tomamos como comparação qualquer objeto que podemos medir suas dimensões. Altura e largura seriam propriedades deste objeto quando pensamos em tamanho. Os elementos HTML também possuem propriedades de altura e largura.
Valor: Corresponde ao produto da propriedade. Ou seja, ele define como o elemento será apresentado. Se um elemento tem uma altura, o valor corresponde ao seu tamanho seguida pela sua unidade de medida. Um bloco com 2 cm de altura possui a propriedade altura cujo valor é 2 cm.
Outro exemplo para fixar o conceito é selecionar um parágrafo (seletor) para que apresente no navegador uma cor (propriedade) e cujo valor desta cor é vermelha (valor). Veja na sequência como apresentaríamos esta regra para apresentar um parágrafo vermelho.p { color: red; }
“p” seleciona todo e qualquer elemento HTML <p> encontrado no documento.
A propriedade “color” define que queremos estilizar a cor dos parágrafos.
E “red”, que quer dizer vermelha, é a cor escolhida para os parágrafos.
Outro ponto importante a saber é que uma regra CSS pode ter mais que uma declaração. Veja:p {
color: red;
font-size: 14px;
}
Tipos de seletores básicos
Existem uma lista repleta de seletores com diferentes objetivos. Mas existem 3 tipos de seletores básicos cuja aplicação é constante e cujo conhecimento para iniciantes é obrigatório. São eles que apresentaremos aqui.
Para conhecer a lista completa visite o site da W3C.
Vamos agora aos 3 tipos básicos.
Seletor de tipo
Este seletor seleciona um elemento html específico para estilização. A sintaxe é bem simples. Depois de escolhido o elemento que você propõe estilizar basta digitá-lo antes da abertura de chaves da declaração, conforme exemplo a seguir para o elemento <h1>.h1 {
color: blue;
}
Como só deve existir um elemento <h1> por página somente ele recebe esta estilização. Mas caso o elemento estilizado aparece mais vezes no documento HTML todos receberão o estilo, a menos que um deles receba um seletor específico.
Seletor ID
Este seletor seleciona um elemento HTML cujo atributo id tenha o mesmo nome do seletor. Observe o seguinte elemento HTML:<div id=”wrapper”></div>
Acima vemos um elemento que possui o atributo id com o valor wrapper. O nome do valor é um nome de sua escolha que você acha melhor colocar. Você pode selecioná-lo digitando o nome do valor precedido por tralha (#). Veja a seguir:#container { background-color: yellow; }
Ao utilizar # estamos selecionando um elemento com atributo id. O elemento <div> que recebe o id com valor “wrapper” terá uma cor de fundo amarela.
Duas observações importantes. O valor do atributo id só pode ser usado em um elemento dentre todas as tags de uma página. E caso haja conflito entre duas regras o seletor ID prevalecerá. Entenda a seguir.
HTML:<div id=”container”></div>
CSS:div { background-color: blue; }
#container { background-color: yellow; }


/* Isso é um simples comentário em CSS */
O elemento <div> foi selecionado duas vezes para receber cores de fundo diferentes, mas ele somente receberá a cor amarela porque o seletor ID tem prioridade em relação ao do tipo que seleciona elemento.
Seletor class
Este seletor seleciona um ou mais elementos HTML cujo atributo class tenha o mesmo nome do seletor. O fato deste tipo de seletor poder selecionar mais que um elemento HTML torna-o mais vantajoso em relação o do tipo id. Com uma simples regra é possível definir estilos que poderão ser aplicados por todo documento HTML onde exista necessidade de repetir estilos. Com isso economiza-se código e tempo de desenvolvimento. Observe o código HTML a seguir.<header class=”container”></header>
<section class=”container”></section>
<footer class=”container”></footer>
Digamos que você deseja que ambos tenham um padding (propriedade esta que preenche com um espaço vazio entre a extremidade do elemento até a área do conteúdo) de 15 pixels. Em vez de você criar uma regra para cada elemento você cria uma para o valor do atributo class que é “container”..container { padding: 15px; }
Note que antes de colocar o nome do seletor ele é precedido por um ponto para que funcione.
Observação sobre nomes de IDs e classes
Os nomes de IDs e classes é algo que você “cria”. Mas não é indicado inventar números e caracteres especiais. Simplifica as coisas usando apenas letras.
Esses nomes não devem ter espaço em branco. Espaço em branco em um atributo de um elemento HTML indica que existem dois seletores. Veja:<div class=”bloco maior”></div>
Isso não indica que exista uma class com seletor .bloco maior, e sim que existem duas classes, .bloco e .maior.
Selecionando elementos aninhados
Em muitos casos você terá a necessidade de criar um seletor para um elemento aninhado e para isso você precisará indicar o caminho que indica os elementos antecedentes. Observe a lista com links a seguir:<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”sobre.html”>Sobre</a></li>
<li><a href=”contato.html”>Contato</a></li>
</ul>
Você quer definir um tamanho de fonte de 14 pixels e poderia simplesmente fazer da seguinte forma.a { fonte-size: 14px; }
Daria certo. Mas agora imagine que você tenha mais links na página onde não deseja esse valor. Então estilizar “a” não seria a melhor solução.
Poderia então criar uma class para o elemento da lista. Mas repare a seguir no HTML.<ul>
<li><a href=”home.html” class=”tamanho-fonte”>Home</a></li>
<li><a href=”sobre.html” class=”tamanho-fonte”>Sobre</a></li>
<li><a href=”contato.html” class=”tamanho-fonte”>Contato</a></li>
</ul>
É um pouco trabalhoso colocar um atributo class em cada elemento, imagine uma lista com muitos elementos. E também é uma decisão pouco inteligente.
A melhor forma nesse caso é indicar os elementos antecedentes do elemento “a”. Veja a seguir.ul li a { font-size: 14px; }
Simples assim. Você coloca os elementos que precedem o “a” antes dele e com espaço entre ambos.
A regra com aninhamento também pode ser aplicada quando presente os outros tipos de seletores. Veja:<ul class=”menu”>
<li><a href=”home.html”>Home</a></li>
<li><a href=”sobre.html”>Sobre</a></li>
<li><a href=”contato.html”>Contato</a></li>
</ul>
Agora o CSS:.menu li a { font-size: 14px; }
Grupamento de seletores
Um uso também comum em CSS é em uma mesma declaração você colocar mais que um seletor com separação por vírgula. Veja a seguir:article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
O código acima pega todos elementos acima e informa que eles devem ser elementos em bloco. Esses elementos foram introduzidos no HTML5 e este código é um recurso para que navegadores antigos os reconheçam como elementos em bloco.
Mas você pode utilizar mais que um seletor não só para elementos HTML mais também mesclando os outros tipos de seletores. Veja a seguir:span, a, #seletor-1, .seletor-2 { font-weight: bold; }
Este código acima negrita os textos dos elementos selecionados.
Declaração única
Existem alguns casos que temos propriedades que atuam separadamente para resultar em estilo, mas que podem estar reunidas em uma só declaração. É o que chamamos de declaração única. Este tipo abrevia declarações reunindo todos seus valores em uma só.
Isso é muito útil para diminuir código e ganhar tempo.
Podemos tomar como exemplo as seguintes propriedades que estilizam borda.
Border-width: Propriedade que define a espessura da borda;
Border-style: Propriedade que define o tipo de borda (contínua, tracejada, etc);
Border-color: Propriedade que define a cor da borda;
Para reunir os valores das 3 propriedades podemos utilizar uma propriedade única chamada border.
Veja as seguintes declarações para uma div:div {
border-width: 1px;
border-style: solid;
border-color: black;
}
Agora a junção de seus valores em uma declaração única usando border.div {
border: 1px solid black;
}
Efeito cascata
O efeito cascata estabelece qual regra é prioritária na aplicação de estilo de um elemento. Ela é importante quando um elemento está recebendo mais que um valor de uma determinada propriedade através de regras diferentes gerando um conflito.
Imagine que uma regra determine que um contêiner receba a cor de fundo amarela e outra regra determina a cor de fundo azul. Neste momento alguns fatores vão determinar qual estilo será aplicado, como a localização da folha de estilo, a ordem da declaração da regra e a especificidade.
Herança
Algumas propriedades quando aplicadas a elementos pais são herdadas por elementos filhos. A isso chamamos de herança.
Elementos filhos são os elementos contidos no elemento pai. Veja seguir:<div>
<p>Este é um elemento filho de “div”.</p>
</div>
Digamos que definimos um valor de font-size (tamanho da fonte) para a <div> (elemento pai). Automaticamente o elemento <p> (elemento filho) herdará esse valor caso não for especificado outro valor de font-size específico para ele. Veja:div {
font-size: 14px;
}
p {
color: red;
}
No exemplo vemos que além de receber a cor vermelha o parágrafo também terá 14 pixels de tamanho de fonte herdado automaticamente de <div>.
Logicamente que nem todas as propriedades são herdadas. Você pode usar o valor inherit para força a herança. Veja no exemplo a seguir:div {
border: 1px solid #000000 /* borda de um pixel de cor preta */
}
p {
border: inherit;
}
O elemento <p> herda a borda de <div>. Toda vez que alterar o valor da declaração do elemento pai a característica vai ser replicada no elemento filho que recebe o valor inherit.
Especificidade
Isso vai acontecer com você no futuro. Você vai ter um texto com uma cor, mas ao verificar seu CSS você está vendo que o valor está indicando outra cor. Isso vai fritar sua mente.
O porque disso é que em uma página web pode ser que um elemento HTML esteja vinculado a diferentes regras CSS ao mesmo tempo gerando um conflito. A especificidade pode atuar determinando qual regra é prioritária. Vamos ao código HTML a seguir.<p>Você está lendo um artigo sobre CSS.</p>
<p>Também conhecido como Folha de Estilo em Cascata.</p>
<div>
<p>Esses são seus primeiros passos sobre a linguagem.</p>
</div>
E agora o CSS.p { color: red; }
Sem segredos. Todos os elementos possuem a cor vermelha.
Mas em muitos momentos seu projeto precisará de um estilo específico e não depender de uma regra genérica. Agora vamos a novas regras.p { color: red; }
div p { color: blue; }
Agora inserimos um novo seletor que muda a forma de estilizar os parágrafos. Os parágrafos continuam recebendo a cor vermelha, menos o parágrafo dentro da div que recebe uma regra específica que determina a cor do parágrafo como azul. Essa regra tem prioridade sobre a regra genérica com seletor “p”.
Vinculação das folhas de estilos ao documento HTML
A vinculação das folhas de estilos ao documento HTML é uma forma de fornecer estilos à página web. Existem 4 formas de fazer essa vinculação.

Por folha de estilo externa;
Por folha de estilo incorporada;
Por folha de estilo em escopo;
e por folha de estilo inline.

Folha de estilo externa
Para se obter uma folha de estilo externa temos que declarar as regras CSS em um arquivo a parte com e extensão .css. Com este tipo de vinculação você pode mudar um estilo no site inteiro apenas com uma pequena alteração no arquivo CSS.
A vinculação da folha de estilo externa pode se dar de 3 maneiras. Vamos a elas:
Linkando o arquivo através do elemento HTML ‹link›<head>
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
</head>
Acima vemos a primeira e mais comum forma de vinculação de folha de estilo externa. Uma observação importante é que o código deve estar entre as tags de abertura e fechamento do elemento head.
Usar folha de estilo de forma externa traz a vantagem de você deixar a página HTML menor, com um carregamento mais leve e você pode usar o mesmo arquivo CSS em diferentes páginas.
Importando o arquivo dentro do arquivo CSS externo@import url(estilos-extras.css);
.um-seletor-qualquer {
margin: 0;
padding: 0;
background-color: #ff0000;
font-size: 18px;
}
Note que para fazer a vinculação utilizamos a diretiva @import e ela deve ser declarada na folha de estilos antes de qualquer regra.
Importando o arquivo dentro do HTML
Este tipo faz a vinculação dentro do documento HTML entre as tags de abertura e fechamento do elemento head, através do elemento ‹style›, mas usando a diretiva @import antes das regras CSS.<head>
<style type=”text/css”>
@import url(estilos-extras.css);
</style>
</head>
O uso da diretiva @import não é a mais indicada para incorporação de folha de estilo externa devida a problemas de performance. Procure, sempre que possível, usar o elemento ‹link›.
Folha de estilo incorporada
Folha de estilo incorporada também conhecida como folha de estilo interna é aquela que você vincula dentro documento entre as tags de abertura e fechamento do elemento head, através do elemento ‹style›. Veja como a seguir:<head>
<style type=”text/css”>
.um-seletor-qualquer {
margin: 0;
padding: 0;
background-color: #ff0000;
font-size: 18px;
}
<style>
<head>
Este tipo de vinculação é indicada para aplicar em uma página única, ou seja, somente a página que tiver a folha de estilo incorporada receberá os estilos.
Folha de estilo em escopo
A folha de estilo em escopo também é utilizada dentro do documento HTML, mas o que difere das incorporadas é que elas ficam dentro de um contêiner de marcação HTML e os estilos somente serão aplicados para os elementos dentro deste contêiner. Veja a seguir.<div>
<style type=”text/css” scopped=”scopped”>
/* Aqui vão as regras CSS */
</style>

<!– Aqui vão os elementos HTML que receberão os estilos

</div>
Folha de estilo inline
Folha de estilos inline é quando uma declaração CSS é incorporada dentro de uma tag de abertura de um elemento através do atributo style. Veja a seguir.<p style=”font-size: 14px; color: #ccc; text-align: center;”>Aqui está um parágrafo de cor cinza alinhado no centro.</p>
Este tipo de vinculação deve ser desencorajado por misturar marcação com apresentação onde se perde as vantagens de se utilizar o CSS.
Como criar um arquivo CSS
Quando os estilos CSS estiverem dentro do arquivo HTML, obviamente a extensão será .html. Agora um arquivo com estilos separados para ser vinculado ao site deve ser salvo com a extensão .css.
Você pode até criar logo de cara um arquivo CSS. Mas faz mais sentido antes de criar este arquivo ter acesso aos elementos que serão estilizados. Então você precisa primeiro de um arquivo HTML.
Vamos então a uma página básica com um simples parágrafo. E nele insira uma folha de estilo externa. Você pode nomeá-la como estilo.css ou outro nome que desejar e que seja relacionado com o projeto.<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Minha primeira página com meus estilos CSS</title>
<link rel=”stylesheet” href=”estilo.css”>
</head>
<body>
<p>Esta página possui a cor de fundo azul conforme valor declarado na regra CSS dentro do arquivo “estilo.css”</p>
<p>O texto usado possui a cor branca.</p>
</body>
</html>
Você pode salvar o documento com o nome que desejar desde que tenha a extensão .html. A imagem a seguir mostra uma página sem seus estilos CSS.

Com o HTML salvo você já pode estilizar os elementos.
Utilizando seu editor de códigos preferido abra um novo documento. Se ele permitir escolha que deve ser um arquivo do tipo CSS. Aqui no exemplo vou utilizar o bloco de notas.
Digite suas primeiras regras CSS. Como você ainda não conhece muito sobre propriedades copie o código a seguir:body {
background-color: #05a4e7;
margin: 0;
padding: 2em;
font-size: 1.2em;
}
p {
color: #fff;
}
Salve o arquivo com o nome do arquivo conforme está dentro da tag do elemento <link>. Você pode salvar na mesma pasta que salvou o arquivo HTML.
Não esqueça de digitar e extensão .css. Escolha também no bloco de notas o tipo como “Todos os arquivos” e a codificação UTF-8.

Vá para o local onde você salvou o documento HTML e abra o arquivo clicando duas vezes sobre ele.
Você verá a página aberta no navegador principal instalado em sua máquina.

Lógico que o resultado é simples porém é mais apresentável do que a página sem estilos.
Agora o próximo caminho é conhecer as propriedades CSS. Você pode começar aos poucos por aquelas com uso mais acentuado. Aqui no Chief você pode encontrar uma lista com explicação de propriedades bastante usadas que eu sugiro a leitura.
Conclusão
Este guia só foi o pontapé inicial para você começar aplicar as primeiras regras em CSS. A partir dele você já pode criar suas primeiras folhas de estilo, executar todos os tipos de vinculação e fazer pequenas estilizações.
Mas os estudos precisam avançar! Por isso deixo uma lista útil de artigos do Chief of Design sobre CSS para você consultar posteriormente.
CSS e suas Propriedades mais usadas!
Tipografia para web – Parte 01
Como usar o CSS3 media queries para que seu site atenda a diferentes resoluções de tela
Flexbox CSS3 – Guia para iniciantes
CSS Grid Layout – Guia introdutório
CSS3 Animation – Tutorial para iniciantes
Espero que este artigo tenha sido útil e esclarecido suas dúvidas iniciais. Quaisquer dúvidas deixe um comentário.
Abraço!
The post O que é CSS? appeared first on Chief of Design.

O que é CSS?
Fonte: Chef of Design

O que é HTML?

O que é HTML?

Se você chegou até este artigo é provável que no mínimo saiba que o HTML é uma linguagem para construção de websites. É bem possível também que tenha interesse em descobrir sobre o processo para desenvolvimento de websites.
Pois bem. Como iniciante, começar com HTML é o caminho mais indicado, pois te trará um resultado visual mínimo em pouco tempo de estudo e porque se trata da linguagem base para estruturação de páginas web.
Tá a fim de aprender a construir páginas web? Então te convido a continuar a leitura deste artigo que vai te mostrar os princípios básicos desta linguagem que foi o ponto de partida para muitos desenvolvedores e web designers de sucesso e que pode ser o seu também.
Neste artigo você encontrará a definição de elementos, atributos, tags, termos esses comuns e relacionados ao HTML. Conhecerá alguns elementos básicos e suas estruturas de marcação. E entenderá também a estrutura de uma página web comum construída com puro HTML.
Neste artigo você verá:

O que é HTML?
Para que o HTML serve?
O HTML integra as linguagens que formam as camadas de desenvolvimento web
Vale a pena aprender HTML?
Os requisitos para aprender HTML
O que são tags e o que são elementos HTML?
Sintaxe HTML
Elemento HTML

Elementos vazios
Elementos dentro de outros elementos
Atributos
Estrutura básica do HTML [Montando sua primeira página web]

O que é HTML?

HTML é um acrônimo para HyperText Markup Language, que em português quer dizer linguagem de marcação de hipertexto. Se trata de uma linguagem de marcação que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e etc) na Web.
Para que o HTML serve?

Serve para que o navegador o interprete, informando-o como estruturar a página web, e exiba seu conteúdo quando você acessa essa página pela internet.
O HTML integra as linguagens que formam as camadas de desenvolvimento web
Quando acessamos uma página web a interface resultante, em grande parte dos casos, é obtida através de 3 camadas com funções diferenciadas. Cada camada é representada por uma linguagem específica.
É importante que você saiba da existência dessas camadas para entender que o HTML não trabalha sozinho. As outras linguagens que formam a camada de desenvolvimento são o CSS e o Javascript. Grande parte das páginas web são formadas por códigos das 3 linguagens.
HTML – A camada que apresenta o conteúdo
Podemos dizer que o HTML é a primeira camada. É nesta camada que atribuímos semântica ao conteúdo. É onde podemos dizer que determinada informação é um parágrafo, que determinado texto é um artigo, etc.
O HTML é responsável por exibir o conteúdo dando-lhe significado.
CSS – A camada que dá forma aos elementos do HTML
O CSS é uma linguagem de estilização, formatação. Quando você vê um texto com determinada estilo, uma página com determinada cor de fundo ou um bloco envolto a uma borda saiba que tudo isso foi obtido com CSS.
O CSS seleciona um elemento do HTML para estilizá-lo e apresentá-lo como nova forma no navegador.
Javascript – A camada que adiciona comportamentos dinâmicos
Quando o usuário está em contato com a interface de uma página pode a qualquer momento executar uma ação que resulte em um comportamento na página. Muitos desses resultados devem-se a acionamentos de scripts criado pela linguagem Javascript.
Um exemplo bem comum de comportamento dinâmico obtido com Javascript é quando ao preencher um formulário erramos o e-mail é o sistema nos avisa.
Mas o HTML é o fundamental
O HTML é a linguagem base e a primeira que acredito que deve ser aprendida. Ela é tão importante que tanto o CSS quanto o Javascript vinculam em seus códigos elementos, classes ou identificadores HTML para que uma ação seja executa dentro do arquivo HTML.
Entender as camadas de desenvolvimento web te ajudará na compreensão de como as linguagens se relacionam e também como a área de desenvolvimento atribuem as funções entre seus colaboradores.
A seguir deixo um material mais aprofundado em vídeo que ilustra bem as camadas web.

Vale a pena aprender HTML?

Se seu objetivo é mesmo construir sites, vale a pena aprender HTML. Mesmo que você tenha dúvida se é difícil ou trabalhoso, vale pelo menos começar a ter contato com a linguagem para você avaliar.
As opiniões são divididas sobre o nível de dificuldade em aprender o HTML. Lógico que a absorção de conhecimentos não é a mesma em todas pessoas, porém qualquer receio não te deve paralisar na meta de aprender.
Já nos primeiros contatos com o HTML você conseguirá visualizar resultados animadores em seu navegador com os primeiros conteúdos expostos. É isso te animará no decorrer dos estudos.
O que faz valer a pena começar a aprender esta linguagem são os fatos de você já começar a entender todo o funcionamento que envolve a confecção de páginas, a construir suas primeiras páginas, a entender e interpretar códigos para fazer a manutenção de sites e saber se comunicar com equipes de trabalho sobre detalhes que envolvem a codificação.
Sem contar que para aprender outras linguagens que envolvem a construção de sites é pré-requisito já dominar o HTML.
Requisitos para aprender HTML

Para que você aprenda HTML é suficiente ter conhecimentos básicos de informática. Também é necessário que esteja instalado em sua máquina um software que possibilite a manipulação de códigos. O bloco de notas consegue executar a tarefa e ele te força aprender por não ter nenhum recurso que autocomplete códigos.
Softwares são criados e descontinuados, por isso vou indicar dois que uso que estão ativos no momento que escrevo este artigo, e que você pode usar quando já tiver um bom domínio e quiser algo que agilize seu trabalho. São eles; o Sublime Text e o Notepad ++. Mas você é livre para pesquisar sobre editores HTML até encontrar aquele que te traga melhores benefícios.
O que são tags e o que são elementos HTML?
Quando se fala em trabalhar com códigos HTML temos em mente que existe uma forma lógica para dispor o conjunto de caracteres para construção desses códigos que mostrarão o conteúdo. Se trata da sintaxe. A forma trabalhada no HTML são através de tags.
Tags são marcas específicas, instruções que delimitam o conteúdo e informam ao navegador sobre que tipo de informação se trata (um título, um parágrafo, uma lista). Quando você enxerga um elemento visual em una página web, desde um texto, uma foto ou um vídeo, saiba que eles são inseridos através de tags.
Toda tag contém um nome (nome da marca) e este também dá designação ao elemento HTML. Elas são usadas para marcar o início e o final de um elemento. A partir daí podemos concluir que os elementos HTML são construídos por tags.
Elementos especificam como documentos HTML devem ser construídos. Através deles pode-se determinar qual tipo de conteúdo e onde ele, dentro do documento HTML, pode ser inserido e também transmitir significado semântico ao conteúdo inserido.
Vamos agora expor melhor na sintaxe HTML como as tags formam os elementos HTML.
Sintaxe HTML
Cada elemento é formado por uma tag de abertura e uma tag de fechamento. E entre essas tags é colocado o conteúdo.
Tag de abertura
A tag de abertura marca o início do elemento. Ela inicia-se com o sinal de menor <, seguindo pelo nome da tag que representa o elemento que queremos inserir no documento HTML e finalizando com o sinal de maior >.
Para exemplificar vamos usar a tag que instrui para inserção de um parágrafo (p).

Tag de fechamento
A tag de fechamento marca o fim do elemento. É similar a tag de abertura e se diferencia pelo uso de uma barra após o sinal de menor. Então, inicia-se com o sinal de menor <, seguido pelo sinal de barra ⁄, depois pelo nome da tag que representa o elemento que queremos inserir no documento HTML e finalizando com o sinal de maior >.

A seguir temos mais um vídeo que ilustra bem didática a sintaxe web. Confira!

Agora o que falta é entender como forma o elemento.
Elemento
Vamos continuar usando o parágrafo como exemplo. Para desenvolver o elemento primeiro colocamos a tag de abertura <p>, depois a informação que queremos exibir, e para encerrar a tag de fechamento </p>.<p>Este é um parágrafo.</p>

Elementos vazios
Existem alguns elementos que possuem apenas a tag de abertura. São chamados elementos vazios ou nulos. A tag de abertura destes elementos possuem fechamento automático.

Vamos ver um exemplo com a tag usada para quebra de linha em textos:<p>Av. Itaquera, 1000 – Itaquera<br>São Paulo – SP</p>
Neste caso vemos um parágrafo onde após o elemento <br>; a linha é quebrada e o conteúdo continua na linha seguinte.
O uso do elemento do vazio é simples assim com somente uma tag. Não existem conteúdos entre tags de abertura e fechamento como nos elementos comuns.
Em alguns casos você poderá encontrar elementos nulos com auto-fechamento. Eles geralmente são encontrados em uma versão extensível do HTML, o XHTML. O resultado das duas versões é o mesmo. Veja a seguir o resultado:<p>Av. Itaquera, 1000 – Itaquera<br/>São Paulo – SP</p>
Elementos dentro de outros elementos (Aninhamento)
Será comum para você, quando tiver lidando com códigos HTML, ver um elemento dentro de outro. A este comportamento chamamos de aninhamento, onde se costuma também dizer que o elemento que contém, que abriga o elemento interno é o elemento “pai” (elemento ancestral) e o abrigado é o elemento “filho” (elemento descendente).
Vamos a um exemplo:<p>O Web Designer PRO é <strong>o curso oficial de web design</strong> do Chief of Design. <strong>Não aceite imitações!</strong></p>
No exemplo acima temos um elemento pai (p) que contém dois elementos filhos (strong). Portanto strong, tag usada para enfatizar trecho de uma frase, está aninhada dentro de p.
Atributos
São instruções extras que damos a um elemento HTML para que se execute um comportamento específico. Estes atributos são inseridos nas tags de abertura.
Digamos que queremos que um texto venha a possuir uma cor vermelha. Podemos inserir na tag de abertura um atributo chamado “class”. Class se significa “classe”. Com essa classe podemos acionar a tag (que está com a determinada class) com a linguagem de formatação CSS e assim alterar a cor do texto para vermelho.
A inserção do atributo se dá da seguinte forma na tag de abertura:

Primeiro insira o sinal de menor < seguido do nome da tag do elemento a ser inserido.
Em seguida deixe um espaço vazio.
Depois coloque o nome do atributo a ser usado seguido de um sinal de igual ₌.
Logo após abra duas aspas e coloque dentro um valor para o atributo.
Para encerrar coloque o sinal de maior >.

Um exemplo da sintaxe:<p class=”altera_Cor”>Texto vermelho</p>
Nem todos os tipos de atributos são usados por todos elementos, alguns são específicos para cada tipo de elemento. Quando um atributo pode ser usado em qualquer elemento HTML ele faz parte dos atributos globais.
É importante conhecer os atributos, entretanto a princípio eu aconselho a focar em conhecer os elementos HTML para em segundo momento conhecer os atributos. Você pode consultar mais sobre atributos neste link.
Estrutura básica [Montando sua primeira página web]
Agora te explicarei em passos simples como montar sua primeira página web. Não espere nada avançado. É como aprender a dirigir: começamos pela primeira marcha. No nosso caso, uma página com conteúdo simples.
Vamos montar a estrutura mais básica usando elementos HTML estruturais comuns e fundamentais em qualquer página.
O que vamos precisar?
Você pode optar por fazer o que proponho a qualquer momento. Mas de toda forma vou te passar o processo em etapas, que no total nem leva 5 minutos para executar, e dentro das etapas explico a função de cada elemento usado.
Tudo que você precisa é abrir em sua máquina um editor de texto estilo bloco de notas ou seu editor favorito. Opcionalmente você pode até deixar preparada uma pasta para salvar este arquivo e possíveis arquivos que você venha a criar como forma de estudo.
Passo 1 – Inserção do elemento html
O elemento html é a raiz do documento. Ele é formado pela tag de abertura <html> e pela tag de fechamento </html>. Essas tags delimitam o documento.
Abra um novo documento em seu editor e digite as tags do elemento html da forma a seguir:<html>
</html>
No código acima podemos notar que iniciamos, na primeira linha com elemento raiz cuja abertura deu-se com a tag <html> e seu fechamento se concretiza na última linha com a tag </html>.
Passo 2 – Inserção do elemento head
O elemento head é responsável por abrigar elementos do cabeçalho. É comum encontras elementos para estilos, scripts e meta tags. Ele é formado pela tag de abertura <head> e pela tag de fechamento </head>. Essas tags delimitam o documento.
O elemento head é “filho” do elemento “html”.
Para esse segundo passo coloque as tags de head entre as tags de abertura e fechamento do elemento html conforme a seguir:<html>
<head>
</head>
</html>
OBSERVAÇÃO: Você pode notar que antes das tags de head existem espaços em branco. Esse comportamento é resultado da indentação. Indentação consiste em organizar seu código para que ele fique esteticamente agradável e principalmente legível.
Você pode indentar seu código usando a tecla TAB antes das tags.
Passo 3 – Inserção da meta tag que informa o formato de codificação de caracteres
Meta tags são responsáveis por fornecer informações importantes sobre o documento HTML. Com elas é possível passar informações que descrevem o conteúdo da sua página para os buscadores, informar qual o idioma usado na página, informar quem é o autor do código, entre outras funções.
Nesse passo vamos usar uma meta tag que informa o formato de codificação de caracteres. Isso para que sua página não fique com caracteres estranhos como na imagem a seguir.

Nesta meta tag usaremos o atributo charset e o valor utf-8.
Insira entre as tags de abertura e fechamento do elemento head a metag tag.
OBSERVAÇÃO: Esta meta tag é um elemento vazio.<html>
<head>
<meta charset=”utf-8″>
</head>
</html>
Passo 4 – Inserção do elemento title
Esse elemento é responsável pela exibição título que você vê na parte superior do seu navegador (barra de ferramentas).
Ele é formado pela tag de abertura <title> e pela tag de fechamento </title>. O conteúdo que você digitar entre essas tags será o texto que aparecerá na parte superior do navegador.
Insira entre as tags de abertura e fechamento do elemento head, e logo após a meta tag, as tags do elemento title conforme a seguir:<html>
<head>
<meta charset=”utf-8″>
<title>Minha primeira página web</title>
</head>
</html>
OBSERVAÇÃO: Você é livre para digitar o conteúdo que bem entender entre as tags de title. Faça o teste.
Passo 5 – Inserção do elemento body
Esse é um elemento fundamental dentro do documento HTML. Ele ilustra o corpo da página. E através dele que é possível exibir conteúdos na página. Entre as tags deste elemento é que vão ser inseridas outras tags específicas para inserção de conteúdo e divisão de seções.
O elemento body é formado pela tag de abertura <body> e pela tag de fechamento </body>.
Insira entre as tags de abertura e fechamento do elemento html, e logo após a tag de fechamento do elemento head as tags do elemento body conforme a seguir:<html>
<head>
<meta charset=”utf-8″>
<title>Minha primeira página web</title>
</head>
<body>
</body>
</html>
Passo 6 – Inserção do DOCTYPE
Prometi para você mostrar as tags fundamentais em uma página. Nos passos apresentados você teve contato com elas. Entretanto existem um elemento adicional importante, que não se trata de uma tag, e deve constar dentro documento HTML, Falo do DOCTYPE.
DOCTYPE é uma declaração responsável por dizer aos navegadores qual a versão do HTML que foi escrito o documento. Essa declaração deve estar posicionada no começo do documento.
A versão mais comum encontrada em sites no momento que escrevo este artigo é o HTML5. Também é a versão mais simples de declarar. Você pode conhecer os outros tipos de declaração neste link.
Aqui vou exemplificar uso do DOCTYE para o HTML5. Para declara basta que você digite o seguinte código na primeira linha de seu editor antes da tag de abertura do elemento html.<!DOCTYPE html>
Veja a seguir como deve ficar o código:<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Minha primeira página web</title>
</head>
<body>
</body>
</html>
Passo 6 – Salvar o documento HTML
Salve o arquivo no seu computador na pasta de seu escolha.
Caso use o bloco de notas, no menu selecione “Arquivo” e depois “Salvar como”.
Nomeie o arquivo “index.html”. Você pode definir até outro nome para o arquivo, porém a extensão deve ser .html.
Em tipo seleciona a opção “Todos os arquivos” e defina a codificação como “UTF-8”.

Passo 7 – Visualize a página no seu navegador
Vá para o local onde você salvou o documento HTML e abra o arquivo clicando duas vezes sobre ele.
Você verá a página aberta no navegador principal instalado em sua máquina.
Entretanto os passos NÃO PARAM por aí, porque apesar de termos uma página HTML pronta ainda não é possível ver o conteúdo. No exemplo, você somente verá o título da página no topo do navegador.

Mas não fique decepcionado. Mostrarei mais dois elementos HTML bastante usado em páginas web que mostrarão enfim sua página com conteúdo no próximo passo.
Passo 8 – Inserção dos elementos h1 e p
O elemento h1 é responsável por exibir o título mais importante no corpo da página. Não confundir este título com o título do elemento title. Como você já sabe o title exibe o título no topo do navegador.
O elemento p é um velho conhecido. Ele é responsável por inserir parágrafos.
Esses elementos serão inseridos entre as tags de abertura e fechamento de body. Proceda conforme o código a seguir. Você pode alterar os conteúdos entre as tags dos elementos se preferir.<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Minha primeira página web</title>
</head>
<body>
<h1>Minha primeira página web</h1>
<p>Aprendi a construir minha primeira página web com o Chief of Design.</p>
</body>
</html>
Salve o arquivo no mesmo local que você salvou a última vez. Seu sistema alertará se você quer substituir o arquivo. Substitua.
Após isso, vá até o arquivo e abra para visualizar no navegador. Você terá um resultado similar a este:

Lógico que é o resultado obtido foi algo simples. Ao adquirir o conhecimento sobre as outras tags existentes você pode evoluir e inserir diversos tipos de conteúdo. Com o HTML é possível inserir itens que você com certeza já interagiu navegando pela web como vídeos, imagens, listas, formulários, tabelas, áudios, entre outros.
Conclusão
Este guia só foi o pontapé inicial, mas o fundamental de uso mais constantes você já conheceu. O HTML é uma linguagem fantástica daquela que quando pegamos gosto se torna um conhecimento que sempre queremos aplica-lo e evoluir em saber mais.
Espero que este artigo tenha sido útil e esclarecido suas dúvidas iniciais. Outras virão. Então se sinta a vontade para expor suas dúvidas na seção de comentários.
Sugiro também a leitura do artigo “18 coisas sobre HTML que eu gostaria que tivessem me dito quando comecei a criar meu primeiro site”. E que também assista a playlist do Chief of Design sobre HTML e CSS. Você pode assistir o curso de fluência em HTML e CSS clicando aqui!
Peço também que compartilhe esta artigo com amigos que também queiram se informar sobre o HTML.
Abraço!
The post O que é HTML? appeared first on Chief of Design.

O que é HTML?
Fonte: Chef of Design

🎙Na mesa do Chief – David Arty e Müller Almeida – Vejo o mundo em CSS

🎙Na mesa do Chief – David Arty e Müller Almeida – Vejo o mundo em CSS

Eae! Td bele?Mais um vídeo para o canal no Youtube, mais um “Na mesa do Chief”, dessa vez com o Front-end Müller Almeida, do Vejo o mundo em CSS
O Müller Almeida é um Front-end extremamente criativo. Tem seu próprio estúdio criativo e é o responsável pela página Vejo o mundo em CSS, que conta com página no Facebook e canal no Youtube, que fala sobre o mundo Front-end de forma criativa e bem humorada.
A página Vejo o mundo em CSS vem conquistando seguidores justamente pro retratar o dia-a-dia e a mente e perfil do profissional Front-end. Não tem como não se identificar com os post bem humorados da página. E ela vem crescendo sem praticamente sem nenhum investimento em anúncios ou coisas do tipo.
Nesse bate-papo nós conversamos sobre Design, programação, faculdade, empreendedorismo, freelancer, web design, bootstra,CSS e claro sobre a área Front-end. Além disso o Müller passou, ao longo da entrevista, várias dicas para você iniciar que deseja atuar como Front-end e também ter o seu próprio negócio de tecnologia.
Portanto veja a seguir a entrevista. Pega um café, trakinas, bolinho de chuva, ou simplesmente só deixa rolar o áudio enquanto está trampando. Confira abaixo a entrevista completa
Entrevista: David Arty e Müller Almeida – Vejo o mundo em CSS

Conheça o trabalho do Front-end  Müller Almeida
➡ Site: http://www.codemohawk.com.br/
➡ Facebook: https://www.facebook.com/muller.almeida
https://www.facebook.com/vejoomundoemcss/
➡ Youtube: https://www.youtube.com/channel/UCG4IekyftS__tsbI0gdfEHA
O que você achou do vídeo?
E aí gostou? de boa? Espero que sim Que esse bate papo tenha sido útil para você , agregando conhecimento e informação para você seguir a sua trajetória profissional.
Se você gostou do vídeo deixe o seu comentário abaixo! Isso é muito importante 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 – David Arty e Müller Almeida – Vejo o mundo em CSS appeared first on Chief of Design.

🎙Na mesa do Chief – David Arty e Müller Almeida – Vejo o mundo em CSS
Fonte: Chef of Design

Tudo sobre Web Design: 50 perguntas e respostas

Tudo sobre Web Design: 50 perguntas e respostas

Eae, tudo bele? Já pensou que se as suas principais dúvidas sobre Web Design e Desenvolvimento Web fossem respondidas? Aquelas que que mais te intrigam e te deixam com várias dúvidas? Um conteúdo que tivesse tudo sobre Web design para matar as suas questões? Pois é! Eu pensei em te ajudar e criei este artigo Tudo sobre Web Design com 50 questões respondidas sobre Web Design e Desenvolvimento web.
É claro que é humanamente possível responder a todos que me procuram e as diversas dúvidas que recebo. Por mais que o título seja tudo sobre Web Design, infelizmente sempre pode faltar algo.
Entretanto separei uma parte considerável de perguntas elaboradas por leitores aqui do blog , que me acompanham de forma mais próxima, acessando meus e-mails e participando dos conteúdos.
Tendo em mãos essas questões, hoje decidi tirar informações importantes de dentro do baú do Chief para esclarecer em 50 perguntas tudo sobre Web Design e Desenvolvimento Web, com as principais dúvidas que recebo da galera.
Aproveite e confira! Quem sabe você não encontra uma questão semelhante àquela dúvida que ainda pairando em sua mente?
Entre os principais assuntos que vamos tratar estão dúvidas sobre: Web design, Front-end, Carreira, WordPress, HTML e CSS, entre outros.
Preparado? Vamos ver tudo sobre Web Design que você precisa saber antes de entrar na área? Se sim, então sigam-me os bons!
[ATUALIZADO em dez/2017]
1 -Como anda o mercado de web design brasileiro? – Tudo sobre Web Design
O segmento de web design e afins está em franco crescimento. O cenário propicia isso. Veja: temos no Brasil mais de 51,3 milhões de e-consumidores, o que pressiona o empresariado a possuir presença online para seus empreendimentos e consequentemente a contratação de profissionais para construção de seus websites.
Isso sem contar que 54,9% das residências no Brasil tem acesso a internet o que reflete em um grande caminho a percorrer onde surgirão oportunidades.
Outro dado relevante é que, segundo a ABRADi, o setor criativo responsável pelo crescimento e desenvolvimento de sites foi responsável pela maior fatia de faturamento do setor digital atingindo 30,4% do total obtido. Esse dado é segundo o último Censo realizado em 2013 e só revelado em 2016. E segundo este mesmo Censo, o faturamento do setor foi de R$ 2,7 bilhões, um crescimento de 25% em relação a 2012, quando faturou R$ 2,2 bilhões.
Eu gravei um vídeo onde falo mais sobre essa parte, você pode conferir clicando aqui!
2 – Onde pode trabalhar um Web Designer? – Tudo sobre Web Design
Há espaço em departamentos de comunicação, marketing, em agências de publicidade, empresas de TI , Startups, produtoras de vídeo, editoras de jornais e revistas on-line, ONGs, entre outras opções que necessitam ter um site ou que tem um negócio online. Também pode atuar de forma independente, como Freelancer  ou agência, prestando serviços.
3 – Como está o mercado para o Web Designer com tantas plataformas prontas como Wix e Uol, entre outros?

Esse é um assunto que gera muita discussão, porque certas pessoas acreditam que o uso de certos construtores online do “tipo clica e arrasta” prejudicam os profissionais da área.
Eu acredito que o público que vai atrás desses construtores não deve ser o seu público-alvo. Eles estão em outro estágio onde a preocupação com a facilidade e, até em alguns casos, com a gratuidade de certas plataformas são prioridades. Não acredito que você deve pensar que está perdendo clientes.
Um dia muitos desses clientes mudarão de estágio e necessitarão de algo mais robusto  e específico que essas plataformas não oferecem. Nesse momento que eles se enquadrarão em sua faixa de público-alvo, porque saberão, enfim, de verdade o que querem.  E nesta hora será sua vez de entrar em campo.
Tem um lado bom de ver o Wix no topo da parada: muita gente que não tinha recursos para contratar um profissional web se encorajou a ter uma presença online. Muitos não irão prosperar, isso é normal no mundo dos negócios. Os que prosperarem perceberão que precisam de algo a mais. E a vida seguirá!
Outro ponto importante é que essas empresas contratam designers para criarem os layouts e templates que vendem. Logo por mais que possa parecer, eles não atrapalham de forma efetiva a carreira de um Web Designer.
4 – Quais os tipos de trabalho um Web Designer faz?  – Tudo sobre Web Design
Ele pode criar layouts para diferentes tipos de sites, banners, peças gráficas para mídias sociais, entre tantas outras peças digitais. Mas para você ficar mais por dentro das tarefas que um Web Designer executa sugiro que você assista este vídeo
5 – Mexer com Web Design é para todos? – Tudo sobre Web Design
Todo mundo que gosta de design, de tecnologia, de artes, etc; e se dedicar para estudar e praticar, pode sim se tornar um Web Designer.
6 – Vale a pena trabalhar como Web Designer? – Tudo sobre Web Design

Vale muito a pena se você se identifica com área( como você verá no tópico a seguir).
Afinal trabalhar com o que se gosta é o que fará você levantar todos os dias para enfrentar os desafios.
7 – Como saber se eu gosto de Web Design? – Tudo sobre Web Design
Na questão anterior falei que vale a pena trabalhar se você se identifica. Mas como saber se ainda você não teve contato com área?
Segue algumas pequenas dicas que podem te orientar. Veja se você se enquadra nesses requisitos:

Você é criativo;
Você gosta de comunicação;
Você sente empatia pelas pessoas;
Você gosta de tecnologia;
Você admira artes e comunicação visual;
Você possui bom raciocínio lógico;
E o principal; você tem disposição para resolver problemas.

Se você se enquadra bem nesses requisitos você tem uma grande chance de gostar de atuar na área.
Claro que existe diferenças entre trabalhar com algo e simplesmente gostar. Mas caso tenha  esse tipo de perfil, já é meio caminho andado.
8 – Quanto ganha um Web Designer? – Tudo sobre Web Design
Depende de vários fatores: região do país, seu nível e experiência, o segmento da empresa, etc.
Em média um web designer ganha de 2 a 3 mil reais. Mas isso é apenas uma média. Esses números podem variar.
Esse assunto é importante e precisaria de um artigo inteiro para isso,  além do que fugiria um pouco do intuito deste tudo sobre Web Design – 50 perguntas e respostas.
Mas eu gravei um vídeo,  para o canal do Chief no Youtube, onde falo sobre salário de Web Designer. Confira a abaixo:

9 – Por onde devo começar? HTML, CSS e JavaScript ou Design?
Depende do seu objetivo. Os itens citados na pergunta estão correlacionados as profissões de Web Designer e Desenvolvedor Front-end.
Caso seu interesse seja seguir a carreira de Web Designer sugiro que, além de ler esse artigo tudo sobre Web Design, comece pelos fundamentos de Design de uma forma geral e aprofunde nos conceitos de Web Design.
Se você tiver facilidade para aprender coisas simultaneamente, comece também a praticar em softwares de edição de imagem como o Photoshop e de arte vetorial como Corel Draw ou Illustrator. Depois parta para as linguagens HTML e CSS.
Tenho um material muito massa (e não é porque fui que fiz, não. Ele é bom de verdade.) que auxilia Designers a lidarem com estas linguagens de um site mais simples e focando no essencial . Se tiver interesse sugiro que confira aqui o meu eBook de HTML &CSS!
Porém se objetivo é ser um Desenvolvedor Front-end corra para aprender HTML e CSS. Javascript? Não antes de você compreender lógica de programação.
E para aqueles que possuem interesse em se tornar um Desenvolvedor Back-end, se este for seu caso, comece com lógica de programação que você estará apto a aprender qualquer linguagem do lado do servidor.
10 – Qual é o melhor caminho de aprendizado que devo seguir para aprender os princípios do design na área?

Acredito que o melhor caminho de aprendizado é aquele que traga organização aos estudos para ganhar tempo, boa didática e desafios de ordem prática. Aliado a tudo isso você também pode considerar ao qual você melhor se adapta.
Existem diferentes caminhos. Você optar por se um autodidata ou por cursos. Dentre os cursos existem os presenciais e os online.
Eu gosto de cursos online e não digo isso só porque ofereço um curso online da área cujo conteúdo engloba os fundamentos de Design e Web Design. Digo isso por os cursos online reúnem o melhor de todos os mundos:

Primeiro porque é um especialista que está instruindo;
Segundo é que muitos dos cursos estão organizados de tal forma que dificilmente você encontraria organização igual, seja na web ou presencial.

Você ganha tempo com isso, além de não se preocupar com deslocamentos para cursos presenciais. Na maioria deles você pode estudar de onde quiser, na hora que bem entender e com a possibilidade dar replay quantas vezes quiser, caso não entenda ou queira rever algo.
Mas escolher entre um curso de Web Designer presencial, online ou até mesmo estudar por conta pesquisando na web, varia de cada perfil. Tem gente que precisa de um presencial. tem outros que tem menos tempo e preferem o online.  O melhor é avaliar o que é melhor para você.
11 – Quais as funcionalidades de cada linguagem – HTML e CSS?
HTML é uma linguagem de marcação. Ela tem a função de dar semântica ao conteúdo marcado.
Já o CSS é uma linguagem de formatação. Ela tem a função de dar estilo visual aos elementos HTML de uma página.
12 – Qual o melhor programa gratuito para quem está querendo aprender as linguagens HTML e CSS?
O bloco de notas é a melhor para aprender. Para trabalhar existem melhores. Porém no caso de aprendizado o bloco de notas é indicado porque não possui ferramenta de auto completar o que vai te obrigar a digitar certo e memorizar a sintaxe das linguagens.
Entre as opções de software para trabalhar temos inúmera opções como: Sublime Text
Brackets, Notepad++, NetBeans.
13 – Como entender melhor JavaScript e jquery?
Para entender melhor você deve aprender antes lógica de programação. Depois deve se aprofundar na sintaxe dessa linguagem. Esse  é o caminho certo.
14 – Sou iniciante, preciso obrigatoriamente dominar as ferramentas gráficas?
Deve dominar sim. Não existe Web Designer sem o domínio mínimo de ferramentas gráficas. Porém não antes de se qualificar nos fundamentos de Design. Ferramentas são apenas uma parte do processo e, talvez, seja até uma das etapas mais fáceis de aprender.
Sugiro também que você assista também o vídeo do link a seguir:
 Fundamentos de Design são mais importantes do que Softwares (Ferramentas).
15 – Quais as principais ferramentas que um Web Designer precisa saber utilizar para se destacar na área?

Não que ferramentas vão fazer você se destacar, mas são necessárias para seu bom desempenho.
As ferramentas que vale a pena investir seu tempo para aprendizado são Photoshop, Illustrator, Corel Draw e algum editor de códigos como o Sublime Text por exemplo.
Também existem ferramentas especificas para layouts como Sketch (só para MAC) e Adobe XD.
E por fim você também pode lidar um pouco com InDesign, After Effects, Premiere, entre outros.
Nestes dois artigos a seguir você terá uma relação de ferramentas alternativas à citadas e outros para funções específicas que eventualmente você poderá usar.
 O que todo Web designer precisa saber
 Ferramentas de Front-End
16 – Como ser mais criativo na hora de criar qualquer tipo de gráfico? No caso só conhecer a ferramenta é necessário?
Para mim criatividade está relacionada com as coisas que você experimenta e observa. O que determina o que você fará na hora de criação estará relacionado com o problema a ser resolvido e o que você vivenciou até então.
Criatividade é organizar de forma coerente todo o seu repertório.
Logo, não existe uma chavinha que você liga e vem a criatividade. Para ser criativo na hora do trabalho, você deve sempre vivenciar novas (claro que não todas ( ͡° ͜ʖ ͡°) ) coisas em sua área de atuação, em outras ciências e pessoal.
E não se apague muito a ferramentas gráficas. Um bom lápis e papel são ótimas ferramentas. Rabisque muito, faça esboços, deixe externar suas ideias e você verá que errará muito antes de chegar aonde quer. Não existe criatividade sem experimentações.
17 – Qual é o melhor programa? Photoshop, Corel Draw, Illustrator?
O Web Designer normalmente lida mais com o  Photoshop ou Sketch (só para MAC) e Adobe XD, dependo do profissional.
Mas você criar até mesmo no Corel ou Illustrator, ou em qualquer outra ferramenta. Se você conseguir entregar o trabalho com qualidade, dentro do prazo e do combinado, pouco importa a ferramenta.
Não seja refém de ferramentas e nem tenha mente fechada. Afinal, você é um Web designer ou um micreiro, né?
18 – Qual a dica para acompanhar o máximo das novas tendências da área de Web Designer diante do tempo escasso sem se desestimular?
Se o seu tempo está escasso é bom sinal para ter calma. Na verdade, na maioria dos casos, essa questão de empo trata-se mais de uma má administração do mesmo do que falta de tempo.
E cuidado. Querer acompanhar o máximo de informações com o tempo curto é um bom caminho para a desestimulação.
Meu conselho é que foque em um assunto de cada vez, sempre dando prioridade para aquele que julgar mais importante. Você não sabe o poder que se tem ao dedicar a somente uma matéria de cada vez.
19 – Qual é a diferença entre profissionais Front-end e Back-end?
Desenvolvedor Front-end é aquele responsável por projetar as interfaces de um website, trabalhando com a parte da aplicação que interage com o usuário. Para isso, este profissional, lida com as linguagens do “lado da frente” como HTML, CSS e Javascript.
O Desenvolvedor Back-end lida com linguagens do “lado de trás”, também conhecidas como linguagens do servidor como PHP, Java, Python, Ruby, entre outras. Também  trabalha diretamente com banco de dados como MySQL, SQL Server, PostgreSQL, entre outros. Este profissional, atua no que o usuário não pode visualizar. Ele desenvolve o sistema que vai ser utilizado para gestão dos dados utilizando a interface desenvolvida pelo desenvolvedor Front-end.
Para visualizarmos melhor imagine quando você loga em um sistema.
A parte da frente, onde você inseri seu login e senha, é de responsabilidade do  Front-end. Já o back-end fica com o sistema procura e valida se o nome de usuário e a senha estão corretos, permitindo que você acesse a área restrita.
20 – Qual a diferença de um Web Designer para um Desenvolvedor Web?

O Web Designer trabalha com o design do site, mas se preocupando com questões que visam a facilidade de uso experiência do usuário.
Já um Desenvolvedor Web, como já vimos na questão anterior, lida com a parte dos códigos da interfaces. E aí podemos ter uma divisão entre front-end,  que lida com a parte que o usuários interagem ou back-end que desenvolve o sistema que vai ser utilizado para gestão dos dados.
21 – Tem como trabalhar com Web Design sem necessariamente aprender programação? Ou é realmente necessário?
Por definição um Web Designer não efetua programação. Não acho essencialmente necessário. O máximo que ele pode lidar são com linguagens de marcação e formatação, que diferem muito das linguagens de programação. Porém pode ser um diferencial se um profissional saiba programar, mas é pouco comum.
Criar o design da página ao mesmo tempo  programar  pode te tornar em um profissional único, desde que faça os dois super bem.  porém aí que mora a questão: é muito raro alguém que consegue fazer isso em alta qualidade. Por isso normalmente o ideial é focar em um dos dois.
Tome cuidado para não se tornar um profissional “pato”. Não anda direito, não nada direito. Se proponha a fazer algo que faça bem. Talvez o caminho mias seguro é se especializar em uma área somente e focar nela.
Para aprofundar mais sobre essa questão assista este vídeo.
22 – Desenvolvedor é obrigado a saber design? – Tudo sobre Web Design
Obrigado é uma palavra forte, por isso minha resposta é não. Principalmente os desenvolvedores back-end.
Mas existem alguns desenvolvedores front-end que se aventuram com o Design. Isso porque é ele, o front-end, que vida ao layout no navegador,  aplicando-o no código. Muitos front-ends entendem de design e programas de edição gráfica.
O grande benefício disso é se sentir capacitado para assumir jobs freela mais completos e poder cobrar mais por isso.
23 – Preciso realmente saber tudo de código para ser Web Designer?
Não é necessário. Porém sempre bato na tecla que um Web Design deve conhecer HTML, CSS e um pouco de Javascript para poder criar pensando nas limitações que a área de desenvolvimento pode encontrar quando se depara com layout complexo.
Isso sem contar o bônus de poder assumir jobs mais completos trabalhando como freela.
24 – Existe alguma forma de trabalhar só com o design da página, sem precisar aprender códigos?

Existem softwares que permitem você trabalhar no modo visual em que você não precisa lidar com códigos. Mas isso não é legal!  Eu não indico você utilizar o modo visual.
Lidar com códigos, no caso HTML e CSS, é também pensar em Design. Quando você pensa na melhor forma de codificar, no desempenho que as páginas terão por causa dos códigos é pensar em projeto.
25 – Por que a maioria dos programadores reclamam de programas como Adobe Muse e Dreamweaver?
Esta pergunta vem de encontro com a pergunta anterior. O Adobe Muse é um software que permite a trabalhar no modo visual sem precisar de escrever uma linha de código.
A primeira vista ele é maravilhoso, porém como todo editor visual ele gera um código sujo. Mas o grande problema nem é este. Imagine se você precisar fazer manutenção em páginas já publicadas, o Adobe Muse não poderá te ajudar. Você precisará de conhecer a sintaxe da linguagem utilizada.
Por isso tais programas, normalmente, são combatidos por desenvolvedores.
O Adobe Dreamweaver também tem essa possibilidade, porém tem  a opção de utilizá-lo sem o modo visual.
26 – Trabalho com Photoshop e manjo um pouco de Illustrator. Gostaria de saber se existe setores de criação somente ou terei que saber programar também?
Depende da empresa. Existem algumas que possuem profissionais com funções bem definidas. Alguns trabalham com criação enquanto outros trabalham com desenvolvimento web.
Mas existem lugares onde o criativo também tem lidar com códigos, principalmente HTML e CSS as quais eu friso sempre que um Web Designer deve aprender.
A tendência é que cada vez mais seja dividido entre setores (design, programação) e cada vez menos você veja vagas que pedem para que faça de tudo.
27 – É muito essencial ter conhecimento do WordPress hoje?

Considero que sim. Atualmente o WordPress atinge cerca de 25% dos sites o mundo, está instalado em cerca de 75 milhões de websites de acordo com a Forbes. Imagine a potencial necessidade de manutenções que essa plataforma exige.
Sem contar os benefícios que esse CMS proporciona como fácil instalação, configuração, manutenção, temas e funcionalidades diversas. Se você ainda não conhece o WordPress corra para conhecer agora. Saiba mais sobre ele aqui!
28 – Ainda vale a pena criar sites em HTML, ou o WordPress seria a opção mais válida atualmente?
Isso vai de acordo com a necessidade do projeto. Se o projeto consiste em um site pequeno, de páginas estáticas e com pouca atualização pode ser feito só com HTML e CSS.
Lembrando que um site em WordPress é um site que resulta em páginas HTML. A grande diferença é que o WordPress possibilita a criação de sites dinâmicos, porque utiliza a linguagem php.
29 – Quanto tempo em média leva para a pessoa desenvolver bem um site do zero?
Essa pergunta é uma preocupação recorrente dos Galuchos. Gostaria de ter uma resposta precisa, mas talvez não consiga. Primeiro, porque não existe uma pesquisa sobre isso e segundo que mesmo hoje em dia, depois de vários anos,  eu sigo me aperfeiçoando para desenvolver bem um site do zero. Mas o mais importante é que eu desenvolvo dentro das minhas habilidades.
Aprender a desenvolver um site é como aprender a dirigir:
No começo você aprenderá a engatar a primeira e a segunda marcha, e mal dará sua primeira volta no quarteirão. Terá a impressão que precisa ser um alienígena com 3 braços para volante e freio de mão, 3 pernas para os pedais e vários olhos para o painel e retrovisores.
Depois de um tempo você já consegue dar voltas pelas ruas do bairro com só uma mão no volante e mais um tempo a frente você está encarando rodovias.
Para desenvolver sites é similar: no começo seus layouts podem sair confusos e cheios de problemas de usabilidade, depois de um tempo começa a criar bons layouts , mas estará apanhando no CSS. Quando menos você esperar estará estilizando temas WordPress.
Então senão se preocupe  com tempo e sim em superar etapas. Se aperfeiçoe na etapa de aprendizado que você está agora. Você será capaz de desenvolver dentro das suas habilidades e cada vez mais elas ficarão melhor.
E quando menos você esperar você estará desenvolvendo sites que satisfarão seus clientes.
30 – Como conseguir os primeiros clientes sem ser os amigos?
Para conseguir clientes você terá que ter algo para mostrar, no caso, um portfólio. E não é de todo mal que os primeiros clientes sejam amigos, ainda mais se eles pagarem por isso.
Porém, não fique preso somente a essa questão. Caso não tenha clientes para construir o seu portfólio, crie-os. Se a porta tá fechada para você, tente entrar pela janela, pela chaminé ou se precisar crie a sua própria passagem.
Você pode criar projetos pessoais, redesign de sites, crie para ONGs, etc. fFaça algo que forme seu portfólio e mostre para o mundo. Com o tempo os clientes não serão somente os amigos.
31 – Como montar um portfólio do zero? – Tudo sobre Web Design

Já dei uma dica na questão anterior, mas vou dar uma melhor agora. Clique aqui e baixe gratuitamente nosso Guia Definitivo sobre Portfólio. Nele você aprenderá:

Por onde começar o seu Portfólio;
Como conseguir trabalhos para o Portfólio;
Como promover o seu Portfólio;
Como se apresentar de forma Profissional;
Como construir um Currículo Eficiente;
Como criar um vídeo de apresentação.

32 – Como posso ganhar dinheiro trabalhando como Web Designer?
Existem basicamente duas formas de você ganhar dinheiro trabalhando como Web Designer: como empregado ou como freelancer.
Se você tiver tempo e disposição pode potencializar seus ganhos trabalhando das duas formas.
Também existem outras possibilidades como consultoria, docente, etc.
33 – Posso ser bem-sucedido me tornando um Designer freelancer e trabalhando a partir da minha casa?
Lógico que sim. E isso tem a ver, além de se preparar tecnicamente, com sua atitude mental. Se você procurar agir positivamente, sem ficar estático na zona de conforto, você irá focar com afinco naquilo que você mais deseja no momento. O sucesso então será consequência de suas ações.
Atuar como freelancer é um dos caminhos promissores no cenário atual.
34 – Como posso aumentar minha captação de clientes?
Não existe regra, fórmula milagrosa e nem nada do tipo. O que pode aumentar a captação de clientes é:

A qualidade do seu trabalho, ou seja, ter um bom portfólio;
Se apresentar e ter uma postura profissional, cumprindo prazos, entregando com qualidade, etc;
Divulgar o seu trabalho. Essa divulgação pode ser feito através de propagandas e também no clássico “boca a boca”.

35 – Como cobrar sendo freelancer? – Tudo sobre Web Design
Outra questão que não existe regra específica.
Na minha opinião, o ideal é cobrar por projeto. Para isso você precisa saber o valor médio, da peça que esta desenvolvendo, no mercado e cobrar de acordo com os seus custos e habilidades/histórico profissional.
Para sabe o valor dos seus custos, você pode definir o valor hora. Existem várias fórmulas que fazem isso. A seguir segue uma fórmula simples  que aprendi com um professor para definir o valor hora:
Somes os seus custos:
Despesas pessoais + 20% ou 30%
Custos profissionais (internet , softwares, hospedagem de site, etc)
Por exemplo:
Despesas pessoais R$2500,00 + 30% = 3250.
Custos= R$1000
3250 +1000=  4250
_________________
Agora faça vezes um Lucro de 20% (lucro médio de serviços):
Por exemplo:
Lucro = 4250 x 20% = 850
_________________
Depois some todos os valores ( despesas pessoais, custos profissionais e lucro) e divida por 160 horas que seriam 40h semanais.
.
Por exemplo:
3250 +1000+850 (/160) = 31,80.
Valor hora: R$31.80
_________________
A partir dessa base você saberá o mínimo que pode cobrar por um projeto. Mas o valor final vai depender de outra variantes importantes como o valor médio de mercado daquela peça, se você é muito requisitado, se você tem alguma habilidade única, é especialista naquilo e etc.
Não existe uma regra para isso!
36 – É possível entrar na área sem realizar um curso de Web Designer especializado? Eu consigo aprender  tudo sobre Web Design sozinho?

É possível, mas o caminho pode ser mais longo por dois motivos:

Você vai ter que angariar pela web conteúdos que estão espalhados.
Como você não tem conhecimento prévio sobre diversos assuntos fica difícil saber o que pesquisar quando nunca se viu falar na vida sobre determinado assunto, técnica ou ferramenta.

E foi para essa galera e também para quem já até está atuando na área que criei um, o Web Designer PRO, um curso de web design online que visa cobrir assuntos como fundamentos de design, conceitos de web design, design de conversão, processo criativo, aulas de Photoshop, fluência em HTML, CSS e WordPress.
Nesse curso você vai aprender tudo sobre Web Design para iniciar a sua jornada na área. Além das aulas, ao vivo e gravas, você terá suporte diretamente comigo.
Para saber mais sobre as próximas turmas do curso CLIQUE AQUI.
37 – Como ser um profissional sem curso superior?
Quem conhece minha história sabe que comecei a trabalhar na área sem ter curso superior e até conquistei uma vaga de emprego concorrendo com profissionais que já tinham curso superior. Acredito que o grande diferencial foi meu portfólio. E olha que não tinha tantos trabalhos.
Então o que sugiro é que pesquise muito e ponha em prática o que absorver, procure por um curso livre que atenda suas necessidades enquanto você não pode fazer uma faculdade e principal, construa seu portfólio para ontem.
Vale ressaltar que nenhuma faculdade ou curso vai te ensinar tudo sobre Web Design. Sempre você precisará pesquisar por conta, se atualizar e praticar.
Neste link eu disponibilizo um vídeo em que falo sobre o momento de fazer uma  Faculdade de Design agora. Que tal dar uma conferida?
38 – Existe um curso exclusivo só para eu entender tudo sobre Web Design?
Se pesquisarmos no Google por “Faculdades de Web Design” ou “Design Digital” nas primeiras páginas pouca coisa encontraremos. O que existem mais por aí são cursos livres de Web Design.
Um caminho que muitos seguem é fazer uma faculdade de Design Gráfico, e durante ou após o término da mesma, fazer um curso livre de Web Design.
Eu te sugiro o Web Designer PRO que é indicado para aqueles que não tem muito tempo e pretendem fazer um curso com relativo baixo investimento, porém com muito conteúdo.
39 – Certificação de Web Design acrescenta valor real?
Certificação é uma prova que, em tese, garante que um profissional domina determinado assunto tratado e está habilitado a trabalhar neste assunto.
Para mim este tipo de comprovação é válido apenas para vagas que fazem exigência do mesmo, que normalmente são poucas. Para muitas, ou maioria, das empresas o suficiente para te considerar capacitado o que você apresenta em seu portfólio ou em um teste prático positivo.
Tudo depende da cultura contratual da empresa.
40 – O que é design responsivo? – Tudo sobre Web Design
Basicamente é desenvolver websites que se adequam a diferentes dispositivos como celulares, tablets e desktop.
Pensar em design responsivo é inerente a construção de websites. Atualmente construir sites é sinônimo de executar design responsivo.
41 – Como fazer páginas responsivas? – Tudo sobre Web Design
Primeiro você deve saber como aplicar os conceitos do design responsivo e segundo compreender o uso das CSS3 Medias queries.
Para te ajudar te forneço 2 materiais essenciais.

O primeiro é o Manual de Web Design Responsivo para você entender os conceitos e que você pode baixar neste link.
E segundo sugiro a leitura do artigo “Como usar o CSS3 media queries para que seu site atenda a diferentes resoluções de tela”.
42- Quais as melhores práticas para criar um bom UX?
Vou citar algumas:

Pesquisar sobre o público alvo e entender seus anseios e necessidades;
De acordo com a pesquisa oferecer conteúdo relevante para este público;
Garantir que as pessoas encontrem esse conteúdo de forma simples;
Garantir que naveguem facilmente por todo o site sem dificuldades e constrangimentos;
Garantir que elas acessem e que a boa experiência seja preservada mesmo em dispositivos de tamanhos e sistemas diferentes;
Garantir que a pessoa que acessou o site saia de lá com as expectativas atendidas.
Garantir que nada que seja importante tenha passado despercebido;
Reduzir as interações negativas que não temos controle e/ou não podemos prever quando pode acontecer.

Para se aprofundar mais sugiro ler este artigo.
43 – Vale a pena migrar do design gráfico para o web design?
Sim, claro. Na verdade acredito que é mais fácil fazer o inverso: começar no web/digital e depois estudar sobre design gráfico. E na verdade você não precisa fazer uma escolha abruta em um ou outro. Você pode trabalhar com os dois.
Eu tenho um vídeo onde falo um pouco sobre isso. Você pode assistir aqui.
44 – Dá para aplicar conceitos do design impresso na web sem perder muito do design?
O Web Design como já diz no nome é Design aplicado para web. Portanto conceitos de Design de uma forma geral são os mesmo para ambas as áreas.
O que difere, fundamentalmente, é que na web o Designer não se preocupa com os processos de impressão e sim como as cores, tipografia e outros elementos funcionam no digital. Também se preocupa com a adaptação do layout  a diferentes resoluções de telas de forma, para proporcionar uma ótima experiência do usuário.
45 – Como funciona o domínio de um web site, ou seja, o que é necessário para ter um?
Domínio é o endereço principal pelo qual seus visitantes poderão encontrar seu projeto na internet. Para adquirir um é preciso visitar algum site  responsável por registro de domínios, fazer uma pesquisa para verificar se o nome escolhido está disponível, efetuar um cadastro no site e posteriormente pagar a taxa de registro.
Para você obter mais informações sugiro a leitura deste guia detalhado.
46 – Criar um site a partir do zero ou utilizar plataformas como o WordPress?
O bom de aderir a plataformas como o WordPress é que você tem uma boa estrutura pronta. Só que ainda sim você terá muito trabalho.
Existem casos que você ou sua equipe terão que partir do zero, por exemplo, pela complexidade do projeto que requer um CMS próprio com funcionalidades que o WordPress não possui, ou até pela simplicidade de um site que não precisa de um gerenciador.
No geral depende do projeto, tempo disponível e do objetivo do site.
47 – Para ser um Web Designer é preciso saber desenhar? – Tudo sobre Web Design

Um Web Designer não precisa ser um desenhista da Pixar. O que ele precisa é saber expressar suas ideias, quando precisar, através do desenho. Coisa bem diferente de ser um Ilustrador. Eu explico melhor sobre esse tema nesse vídeo.
48 – O que você me indica para me sentir mais confiante para uma entrevista?
Como Web Designer eu te respondo que uma  das coisas fundamentais, é que você tenha um portfólio para apresentar. Isso mostrará que você está preparado.
Outra coisa importante é você ter bem em sua mente como é empresa e seus princípios. Investigue-a, sabia sobre a sua cultura e se prepare para entrevista.Saiba muito o que você tem de bom para resolver os problemas que o cargo pretendido proporcionará.
E seja você: seja autêntico, seja sincero, não tente inventar ou bancar quem não é. Se for contratado, bem, senão bola para frente.
49 – Trabalhando com web eu terei tempo para minhas coisas, minha família e meus estudos?
Isso é bem relativo. Tanto como freela quanto como funcionário depende de inúmeros fatores. A grande questão é você saber utilizar o seu tempo e não deixar, caso ocorra, que outras pessoas mandem nele.
Trabalhar com web com certeza dá mais possibilidades para isso, porque você pode trabalhar de casa, o pessoal que tua na área tende a ter a mente mais aberta, você pode atuar de forma independente ,etc.
Entretanto tudo depende de como você se porta como profissional, como ajustas as suas prioridades e como organiza o seu tempo.
50 – Web Designer precisa saber de SEO? – Tudo sobre Web Design
Considero um diferencial. Em projetos freelancer é importante que você tenha pelo menos noções de SEO onpage.
Muito do sucesso de alguns projetos se dá graças ao grande número de visitas. Para conseguir visitas você pode pagar, fazendo anúncios, ou conseguir tráfego de graça e ultra segmentado que é através do SEO. É algo mais demorado e trabalhoso, mas vale a pena.
Neste artigo apresentamos as melhores práticas de SEO para Web Designers e Desenvolvedores. Vale a pena conferir!
Considerações finais – Tudo sobre Web Design
Procurei responder da melhor forma possível as 50 questões. É claro que talvez sejam impossível abordar todas as diferentes dúvidas que podem surgir. Mas procurei abordar neste artigo  tudo sobre Web Design, as principais e mais recorrentes perguntas.
Espero que as respostas sirvam para te dar um impulso na busca de seus sonhos e objetivos. E aproveito para pedir que você compartilhe com seus amigos que também tenham dúvidas sobre o mundo do web design e desenvolvimento web.
Caso tenha alguma dúvida que não foi tratada até aqui, neste artigo tudo sobre Web Design, sinta-se a vontade para descrevê-la nos comentários. Não sabemos tudo, porém aquilo que sabemos estamos dispostos, sempre que possível, a compartilhar com você da melhor maneira.
E aí? Você tem alguma coisa a acrescentar? Concorda ou discorda de alguma resposta?
Forte Abraço.
Até mais.
The post Tudo sobre Web Design: 50 perguntas e respostas appeared first on Chief of Design.

Tudo sobre Web Design: 50 perguntas e respostas
Fonte: Chef of Design