O documento fornece analogias culinárias para explicar conceitos básicos de desenvolvimento web, como HTML, CSS e JavaScript. O HTML é comparado aos ingredientes básicos de um prato, o CSS são os temperos e JavaScript são diferentes técnicas de cozinha. Exemplos e boas práticas são dados para cada tecnologia para ajudar iniciantes a compreenderem o mundo do desenvolvimento web.

2. Oi, souo GokuVentura
• Rafael L. Ventura
• @raffesmind
• Co-organizador do
HTML-SP e EmberSP

3. 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!

4. CONHECENDO A
COZINHA

5. 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

7. 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;

8. 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;

9. HTML

10. 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 >

11. PRATO BÁSICO

12. HEAD

13. • 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;

15. BODY

16. • 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;

18. • 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;

20. Como pensar a semântica

21. POR QUE SEMÂNTICA
IMPORTA?
• Melhora o Ranking no google;
• Facilita que um deficiente visual leia seu site;
• Facilita a manutenção;

22. CSS
(CASCADE STYLE SHEETS)

23. 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;

24. ADICIONANDO SAL

25. COMBINE PARA DAR MAIS SABOR
• Uma das características mais importantes do
CSS é que ele pode combinar diferentes classes
para adicionar mais;

26. 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;

27. RENDERIZAÇÃO DA PÁGINA

28. 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);

29. s
• SMACSS
• Atomic Design
• ITCSS

30. USO DO !IMPORTANT É
COMO PIMENTA, PARECE
UMA BOA IDEIA NA
HORA, DEPOIS….

31. 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;

32. 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;

33. JAVASCRIPT

34. • É 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>;

35. • 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;

36. 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;

37. 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;

38. 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;

39. • Hack Mozilla - A Few Tips
• CSS positioning explained by building an ice
cream
• OOCSS Wiki
• Free Code Camp
• Frontend Br
• Async Script
REFERÊNCIAS:

40. OBRIGADO

41. DÚVIDAS?