Slides minicurso Web Design

562 visualizações

Publicada em

Slides do primeiro dia do mini curso de web design dado na SEE - UNICAMP 2014

Publicada em: Internet
  • Seja o primeiro a comentar

Slides minicurso Web Design

  1. 1. Introdução ao Web Design Como funciona a internet, o que é HTML e CSS, criando um site básico
  2. 2. Ana Rute Mendes Web Designer Formada em Comunicação Social - Midialogia e técnica em Informática @ana_rute Virgílio Santos Desenvolvedor Formado em Engenharia de Computação @virgilionsantos Paula Furtado Especialista em Educação Formada em Letras, mestranda em Linguística Aplicada @paularfurtado http://escolamupi.com.br https://github.com/mupi/ QUEM SOMOS
  3. 3. O Web Design Back-end X Front-end Design Thinking
  4. 4. Planejamento Wireframes Mockups Protótipos
  5. 5. WIREFRAME
  6. 6. MOCKUP
  7. 7. Tarefa #1 Em uma folha de papel, fazer um mockup a mão de uma página de perfil ou currículo
  8. 8. HTML Hipertext Markup Language Linguagem de marcação Estrutura e organização
  9. 9. HTML Semântica Elementos, tags e atributos <a href="http://escolamupi.com.br"> Escola Mupi </a>
  10. 10. Estrutura básica <!DOCTYPE html> <html lang="pt"> <head> <meta charset="utf-8"> <title>Meu primeiro site</title> </head> <body> <h1>Olá mundo!</h1> <p>Oba, meu primeiro site!</p> </body> </html>
  11. 11. Principais tags Títulos: <h1></h1> Parágrafos: <p></p> Imagens: <img /> Quebra de linha: <br /> Listas: <ul></ul>, <ol></ol> e <li></li> Âncoras: <a></a> Destacar palavras: <strong></strong> e <em></em>
  12. 12. Tarefa #2 Estruturar o seu mockup em uma página HTML
  13. 13. Elementos em bloco vs. em linha Div e span Elementos semânticos <header></header>, <footer></footer>, <aside></aside>, <nav></nav>
  14. 14. CSS Cascade Style Sheets Linguagem para estilização
  15. 15. CSS & HTML Classe e ID Seletores http://paularfurtado.github.io/ css-selector-game
  16. 16. Inserindo CSS <p style="color: #FF0000;">Oi!</p> <style type="text/css"> p.exemplo{ border: 1px dashed #00F; } </style> <link rel="stylesheet" type="text/css" href="caminho/arquivo.css" /> Inline Através das tags <style> Em arquivos externos, através da tag <link> 1. 2. 3.
  17. 17. CSS Sintaxe da linguagem seletor { propriedade: valor; }
  18. 18. Propriedades tipográficas Cor de texto: color Família de fonte: font-family Tamanho da fonte: font-size Estilo de fonte: font-style Peso da fonte: font-weight Altura da linha: line-height p { color: #000088; font: italic normal bold 14px 100% Georgia, serif; }
  19. 19. Valores das propriedades Cores na web: RGB, Hex, RGBa Pixels e medidas
  20. 20. Modelo de caixa largura: width altura:height borda: border Conteúdo do elemento distância interna: padding margem: margin
  21. 21. Exemplos de uso section { height: 100px; margin: 0 auto; /* centraliza o elemento */ width: 150px; } footer { border-top: 1px solid #ccc; padding: 2em; margin-top: 5px; }
  22. 22. Tarefa #3 Crie um arquivo CSS, insira- o no seu HTML e estilize a sua página

×