MasterChef Web Version

Oi, souo GokuVentura

• Rafael L. Ventura

• @raffesmind

• Co-organizador do HTML-SP e EmberSP

O QUE É?

• Dicas para compreender o desenvolvimento Web com analogias da cozinha;

• Boas práticas e dicas marotas para facilitar sua vida;

• É para iniciantes, para dar uma orientação sobre o mundo web, então se tiverem dúvida, perguntem!

CONHECENDO A COZINHA

Ao digitar uma url no seu navegador favorito, você faz uma requisição para uma rede que irá traduzir aquele domínio para uma localização física, ou seja, um IP

Isso na culinária poderia ser resumido na seguinte forma:

O navegador seria um garçom que irá servir aquilo que você pediu a um cozinheiro, que terá o papel de servidor aqui;

INGREDIENTES• O html é o ingrediente principal do seu prato, seria a base

do que vamos fazer com a web, então seria a carne, salada, do prato

• CSS seriam os temperos que você irá utilizar no prato, para deixar eles mais saborosos;

• JS seriam diferentes técnicas para fazer a preparação do prato, as vezes pode ir desde o corte, até o flambar ele na sua frente, ajuda na apresentação;

• BackEnd (Java, Node, Python, etc…) são as diversas ferramentas na sua cozinha, desde o fogão as facas para preparar seu html;

HTML

HTML• HYPER TEXT MARKUP LANGUAGE;

• Composto de Tags;

• Cada tag possui atributos próprios

• Pensado para criar estrutura de documentos;

• W3C organiza o padrão;

• Ficam contidas sempre entre o sinal de < e >

PRATO BÁSICO

HEAD

• Aqui ficarão as especificações do seu arquivo HTML;

• Coloque apenas essencial para que sua página seja visualizada (CSS e Meta Tags);

• Evite o carregamento de JS aqui;

• Atente-se para manter o Caminho Crítico para a renderização da sua página simples;

BODY

• Aqui terá efetivamente o conteúdo do seu site;

• Separe o conteúdo em blocos;

• Evite linhas com muitos caracteres;

• Uma linha, uma mudança;

• Mantenha IDs únicos a cada elemento;

• Dois tipos de tags:

• Block: Criam elementos que geram margens e por padrão seriam exibidos um em baixo do outro naturalmente;

• Inline: As que não criam por padrão elementos com margens, sendo normalmente auxiliares para aumentar a importância do texto ou elementos;

Como pensar a semântica

POR QUE SEMÂNTICA IMPORTA?

• Melhora o Ranking no google;

• Facilita que um deficiente visual leia seu site;

• Facilita a manutenção;

CSS (CASCADE STYLE SHEETS)

CSS• O tempero da Web;

• Consegue alterar visualmente qualquer atributo do HTML;

• É quem se preocupa com as cores, tamanho da fonte, e estruturas;

• Formado por Seletores e Regras;

• Escrito como chave e valores;

• Podem ser escritos dentro das tags, no cabeçalho da página ou num arquivo externo;

ADICIONANDO SAL

COMBINE PARA DAR MAIS SABOR

• Uma das características mais importantes do CSS é que ele pode combinar diferentes classes para adicionar mais;

CUIDADO PARA NÃO SALGAR DEMAIS

• Evite duplicar regras de forma desnecessária;

• Evite colocar especificidade demais nos seletores;

• Prefira Classes a IDs;

• Cuidado na utilização de Media Queries;

RENDERIZAÇÃO DA PÁGINA

MANTENHA A COZINHA ORGANIZADA

• OOCSS;

• Tenha componentes com responsabilidade única;

• Separe o que for estrutural do que for apenas estético;

• Seja claro nas suas classes (Inicie com o BEM);

s

• SMACSS

• Atomic Design

• ITCSS

USO DO !IMPORTANT É COMO PIMENTA, PARECE

UMA BOA IDEIA NA HORA, DEPOIS….

Resets ou Normalizadores

• Feitos para padronizar a Web;

• É como se cada navegador (garçom) tivesse uma mania para apresentar os elementos básicos do seu prato;

• Então algumas pessoas já pensaram em instruções para deixar que todos eles partam do mesmo principio;

Frameworks (Bootstrap)

• Frameworks são como molhos prontos;

• Vêm com muito sabor, diversas misturas de ingredientes e aceleram a produção do prato;

• Podem ter muito sódio, ou seja, podem trazer alguns contrapontos como excesso de <divs> ou padrões diferentes do atual;

JAVASCRIPT

• É o que dá o comportamento a página;

• Na culinária seriam os diferentes estilo para cozinhar e apresentar o prato;

• Pode desde validar um formulário até criar controles de vídeos;

• Podem ser colocados em qualquer lugar através da Tag <script>;

• Coloque preferencialmente o JS antes de fechar a Tag do Body;

• Sempre que possível use o atributo ASYNC na <script>;

• Tente desacoplar o JS de como o HTML é exibido, pense em usar propriedades especificas para conectar os dois;

GULP, GRUNT, BROCOLLI, ETC…

• São como estagiários na cozinha;

• Fazem as tarefas que podem ser muito chatas ou trabalhosas, e deixam o ambiente de trabalho mais fácil;

ANGULAR, REACT, EMBER, VUE, AURELIA, ETC…

• Frameworks para facilitar o desenvolvimento de grandes aplicações web, como SPAs (Single Page Application);

• Na culinária seria como os diferentes estilos para cozinhar um prato, como o francês, o brasileiro, japonês, etc…

• Cada um tem suas limitações e objetivos, conheça as histórias por trás;

CONSIDERAÇÕES FINAIS• Lembre-se que você deve compreender sempre

o que seu cliente quer, seja para montar um hotsite, um cms, ou mesmo um web app;

• Assim como os cozinheiros confiam no paladar, você deve confiar em seus olhos;

• Pratique bastante;

• Se divirta;

• Hack Mozilla - A Few Tips

• CSS positioning explained by building an ice cream

• OOCSS Wiki

• Free Code Camp

• Frontend Br

• Async Script

REFERÊNCIAS:

OBRIGADO

DÚVIDAS?