Desevolvimento Web Client-side - HTML

1,066 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,066
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desevolvimento Web Client-side - HTML

  1. 1. Pacote Web Desenvolvendo com Padrões Web Módulo 1 - HTML Guilherme Cavalcanti contato@guilhermecavalcanti.com @guiocavalcanti
  2. 2. Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by/2.5/br/
  3. 3. Roteiro • Noções gerais • O que são Padrões Web • Importância dos Padrões Web – 3 camadas do desenvolvimento • Ferramentas • HTML e XHTML • Validação • Hello World • Estrutura Básica – DOCTYPE – HTML – HEAD – BODY
  4. 4. Noções Gerais
  5. 5. O que são Padrões Web? • Web – Troca de livre de informações – Acessível por qualquer pessoa no planeta • Guerra dos Browsers – Netscape Vs. Microsoft – Falta de padrões – Usuário saí perdendo • Gambiarras – Tentativa de reduzir incompatibilidade entre browsers
  6. 6. O que são Padrões Web? • W3C – World Wide Web Consortium, 1994 – Tentativa de criar padrões para Web • HTML, CSS, XML, XSLT – Resolver problemas de incopatibilidade – Uma página deve ser exibida de maneira semelhante independente de qual dispositivo esteja visualizando.
  7. 7. Analogia • Tomadas e Conectores • CDs de Drivers • USB • Etc, etc, etc
  8. 8. 3 camadas Comportamento JavaScript Formatação CSS Informação HTML
  9. 9. Importância dos Padrões: Produtividade • Desenvolvimento tradicional – Fases seqüenciais – Fases interdependentes • Resultados – Ninguém pode mudar de ideia – Necessidade de programador e designer
  10. 10. Importância dos Padrões: Produtividade • Desenvolvimento com Padrões – Fases paralelas – Fases independentes • Resultado – Mudanças rápidas – Velocidade – Cliente feliz
  11. 11. Ferramentas • Escrever o código • Perigo do autocompletar • Imitar o usuário • Testar, testar, testar
  12. 12. Ferramentas • Linux – Gedit + montes de plugins • Windows – NotePad++ http://sourceforge.net/projects/notepadpluspe/ – EditPlus http://www.editplus.com/download.html • MacOS – TextMate • Firefox – FireBug – Web Development Toolbar – Validação W3C
  13. 13. HTML/XHTML • Linguagem de Marcação • Compostas por tags (marcadores) • Dá significado ao conteúdo e o agrupa em blocos
  14. 14. Tags • Responsáveis por delimitar um “pedaço” de conteúdo http://pastie.org/836704
  15. 15. Hello World http://pastie.org/836736
  16. 16. Validação
  17. 17. Validação http://pastie.org/836717
  18. 18. DOCTYPE • Diz ao browser que tipo de HTML está sendo enviado
  19. 19. html • HTML • Atributos – <html></html> – xmlns – Delimita um documento http://www.w3.org/199 HTML 9/xhtml – Todas as tags HTML – xml:lang estão dentro dela pt-br – lang pt-br
  20. 20. head • HEAD – <head></head> – Define informações sobre o documento • Título • Palavras-chave (metadados) • JavaScript/CSS
  21. 21. head > title • title – <title>Título da Página</title> – Só pode ser definido uma vez no documento – Título que aparece na janela – Nome que fica guardado quando a página é adicionada aos favoritos – Aparece nos resultados de busca do Google
  22. 22. head > meta • meta – <meta /> – Informações sobre os dados – Não é exibida para o usuário – Usada por mecanismos de busca – Não precisa ser fechada
  23. 23. head > meta • Atributos Attribute Value Description content text Specifies the content of the meta information name author Provides a name for the information description in the content attribute keywords generator revised others
  24. 24. body • body – <body></body> – É o corpo do documento – Contem o que vai ser mostrado ao usuário (textos, imagens, links) – Parte mais importante de um documento HTML
  25. 25. h1, h2, h3, h4... • Tags de títulos de texto – <h1>Seção 1 do documento</h1> – H de heading – Organização do texto em seções – Semelhante a um livro – Muito importante para mecanismos de busca • Deve condizer com o conteúdo que a segue
  26. 26. p • Define um parágrafo de texto – <p>Parágrafo</p> – Para nós é mais uma ferramenta para formatar o texto. http://pastie.org/836928
  27. 27. img • Inclui uma imagem no documento – <img src=“url” alt=“texto alternativo” /> Attribute Value Description alt text Specifies an alternate text for an image src URL Specifies the URL of an image longdesc URL Specifies the URL to a document that contains a long description of an image
  28. 28. a • Link, hyperlink ou ancora para outro documento – Atribui não linearidade a Web (hypertexto) http://pastie.org/836943 Attribute Value Description accesskey character Specifies a keyboard shortcut to access an element title text Specifies extra information about an element href URL Specifies the destination of a link
  29. 29. table • Define uma tabela – <table></table> – Precisa conter pelo menos um tr, th ou td
  30. 30. Table > tr • Define uma linha da tabela – <table></table> – Sozinha não faz grandes coisas
  31. 31. Table > thead e tfoot • Define uma tabela – <table></table> – Sozinha não faz grandes coisas
  32. 32. td • <td></td> • Atributos – Representa células numa – colspan: mescla células tabela numa mesma linha – Se nenhum “span” for – rowspan: mescla células utilizado, deve haver a numa mesma coluna mesma quantidade em cada linha
  33. 33. td • Células mescladas numa mesma linha • Células mescladas numa mesma coluna http://pastie.org/838290 http://pastie.org/838291
  34. 34. ul, ol • <ul></ul> – Lista não ordenada (u de unorded) – Pode possuir vários <li></li> • <ol></ol> – Lista ordenada (o de orded) – Também possui vários <li></li>
  35. 35. ul, ol http://pastie.org/838294 http://pastie.org/838296
  36. 36. Listas Aninhadas http://pastie.org/838297
  37. 37. form • <form action=“” method=“”></form> – Permitem o envio de dados entre cliente e servidor – O servidor precisa ter um controlador aguardando a submissão dos dados • PHP, ASP.NET, Python, Java, Ruby... – Aplicações • Formulários de contato, login/senha, cadastro de usuário, busca, etc
  38. 38. Comentários sobre GET e POST • GET – Deve ser usado quando a submissão não irá acarretar numa mudança de estado no servidor – Dados visíveis pela URL • POST – Acarreta mudança de estado (consulta no banco de dados, envio de e-mail) – Os dados são enviados de maneira transparente
  39. 39. form • Atributos – action • URL para o controlador responsável por receber os dados – method • Método de submissão • Pode ser GET ou POST
  40. 40. form • Sintaxe básica http://pastie.org/838308
  41. 41. form > inputs • Representam as entradas que serão enviadas ao servidor Attribute Value Description type button Specifies the type of an input element checkbox file hidden image password radio reset submit text value value Specifies the value of an input element
  42. 42. form > inputs • Exemplo de login/senha (inseguro) http://pastie.org/838316 • Exemplo de login/senha (mais seguro) http://pastie.org/838318
  43. 43. form > select • form de busca com categorias http://pastie.org/838325
  44. 44. form > label • Adiciona labels (etiquetas) aos campos – Atributo for especifica qual é o input alvo de um label – Deve ser sempre usado em conjunto com um input ou select http://pastie.org/838329
  45. 45. form > checkbox e radio http://pastie.org/838344
  46. 46. form > input Attribute Value Description checked checked Specifies that an input element should be preselected when the page loads (for type="checkbox" or type="radio") disabled disabled Specifies that an input element should be disabled when the page loads name name Specifies a name for an input element readonly readonly Specifies that an input field should be read-only (for type="text" or type="password") src URL Specifies the URL to an image to display as a submit button
  47. 47. form > fieldset, legend • Organizar campos em grupos – Usabilidade http://pastie.org/838354
  48. 48. em • <em>Texto</em> • Texto enfatizado • Geralmente usado para aplicar negrito
  49. 49. address • <address>Rua Sempre Viva</address> • Tag para definir endereços • O Google Maps utiliza
  50. 50. hr • <hr/> • Usado como separador de conteúdo
  51. 51. Gerador de metatags http://www.iwebtool.com/metatags_generator
  52. 52. div, span • Quase modificam a apresentação • Servem para agrupar outros elementos – Geralmente relacionados entre si • São de grande ajuda na hora de aplicar os estilos
  53. 53. div • <div> é usado para agrupar um ou mais elementos nível de bloco • Pode conter elementos de bloco
  54. 54. span • O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. • Não pode conter elementos de bloco (p, table, div...)
  55. 55. Gerador de metatags http://pastie.org/838366 • Ferramenta mais completa – http://www.addme.com/meta.htm
  56. 56. Comentários

×