Front-end: do básico ao layout responsivo

413 visualizações

Publicada em

Material do workshop ministrado por Luciano Ratamero no Women Techmakers Rio em 18 de Julho de 2015

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
413
No SlideShare
0
A partir de incorporações
0
Número de incorporações
22
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Front-end: do básico ao layout responsivo

  1. 1. Front-end: do básico ao layout responsivo Luciano Ratamero
  2. 2. Sobre o workshop bem, não vai ser tanto um workshop assim… …porque é muita coisa pra decorar e bater cabeça
  3. 3. Qual o perfil de vocês?
  4. 4. Mas o que vai ter? HTML CSS JavaScript (jQuery) Um pouco de tudo: Twitter Bootstrap (se der tempo)
  5. 5. Okok, o que é HTML? Hyper Text Markup Language Linguagem de marcação Descreve o conteúdo interno de qualquer página web Centraliza todas as dependências da página
  6. 6. Legal, e o CSS? Cascading Style Sheets Folha de estilos Uma listona de como tudo tem que aparecer Apenas liga um elemento do HTML às suas características
  7. 7. E o JavaScript? Linguagem de programação Basicamente, um monte de função Manipula diretamente o HTML e o CSS de uma página Não vamos falar muito dele por aqui… =/
  8. 8. Podemos começar! Criamos um arquivo HTML Explicamos as tags <head> e <body> Abrimos num navegador Colocamos algumas mensagens
  9. 9. Temos conteúdo pra mexer! Começamos a usar o CSS IDs, Classes, Tags e seus seletores Características físicas Características de posicionamento Vamos importar o CSS no HTML!
  10. 10. Pausa para um café com dúvidas… …e música de elevador
  11. 11. Agora o negócio ficou sério O que é jQuery Querido e amado DOM (Document Object Model) Escondendo e exibindo coisas Escondendo e exibindo coisas com estilo Escondendo e exibindo coisas ao clicar em coisas Eventos: click, hover, focus, change
  12. 12. Pausa para outro café com dúvidas… …porque javascript dói a cabeça
  13. 13. Já sei o básico! E agora? Agora é hora de aprender o básico!
  14. 14. Navegador e seu device Como ele vê seu device Formas do seu site reagir ao navegador Media queries! Vamos imprimir uma lhama!
  15. 15. Tem mais? Media queries para tamanhos específicos Vamos mostrar a lhama acima de 640px! Vamos mostrar duas lhamas lado a lado/acima e abaixo! Lembra de falar do viewport!
  16. 16. Colunas salvam sua vida… …mas isso quer dizer que temos que escrever manualmente o CSS para cada tamanho diferente de device?
  17. 17. Twitter Bootstrap Bootstrap Grid Vamos jogar o CSS fora e trocar pelo Bootstrap Vamos refatorar o HTML para usar o Bootstrap
  18. 18. Vamos juntar tudo! (se ainda tiverem pique) Vamos fazer um formulário de contato Nome, email e mensagem Ao clicar no botão de enviar, desativar o botão, esperar 3 segundos e substituir todo o HTML por uma lhama
  19. 19. Dúvidas?
  20. 20. É isso, então :D Luciano Ratamero email: luciano@ratamero.com twitter: @lucianoratamero facebook: lucianoratamero Podem me mandar qualquer dúvida, mesmo!

×