Desenvolvimento para a web usando html e css

1,954 views

Published on

Apresentação utilizada no minicurso de 6h ministrado no 7º Cetec da Univates, intitulada "Desenvolvimento para a web usando html e css".

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,954
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Desenvolvimento para a web usando html e css

  1. 1. 7 CCETEC Univates Desenvolvimento para a web usando HTML e CSS Eduardo Bonfandini
  2. 2. INTRODUÇÃO For dummies
  3. 3. TIPOS DE MAGIA NEGRA 1. 2. 3. 4. 5. Html Css Javascript Php Mysql
  4. 4. HTML HyperText Markup Language Linguagem de marcação Não é linguagem de programação
  5. 5. HTTP? URL? ● Hypertext transfer protocol: http://meusite.com.br HTTPS (HyperText Transfer Protocol Secure) ● Uniform resource locator: http:// https:// ftp:// mailto:// telnet:// tel://
  6. 6. CSS Cascade Style sheet Definição visual Deixa a web maneira
  7. 7. JAVASCRIPT Javascript Programação cliente Deixa a web dinâmica
  8. 8. AJAX Asynchronous Javascript and XML
  9. 9. O MAIS MANEIRO DE TODOS http://jquery.com/
  10. 10. NÃO É JAVA Alternativa do Netscape ao Vbscript (Morreu). Lembra BEEEEEEEEEEEM de longe o Java por isso o nome.
  11. 11. LADO SERVIDOR Papel Higiênico Perfumado
  12. 12. ESSE NÃO É O NARUTO IE come cola!
  13. 13. DIVERTIDO SEMPRE 2007
  14. 14. O MELHOR NAVEGADOR
  15. 15. W3C World Wide Web Consortium Padronização Menos o IE (come cola)
  16. 16. VALE A PENA VALIDAR? http://validator.w3.org/
  17. 17. HTML 4, XHTML, HTML5 ● Html 4, CSS 2 Maneiro mas limitado ● Xhtml Similar a html mas mais bem formatado (não pegou) ● Html 5, CSS 3 Maneirão http://www.w3schools.com/
  18. 18. HTMLn? HTML5 não é uma alternativa é uma evolução do HTML 4.
  19. 19. MÃO NA MASSA Seções
  20. 20. DOCTYPE HTML 5 (Maneiro) <!DOCTYPE html> HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3. org/TR/html4/strict.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3. org/TR/xhtml11/DTD/xhtml11.dtd">
  21. 21. ESTRUTURA <!DOCTYPE html> <html> <head> <title>Título</title> </head> <body> Conteúdo </body> </html>
  22. 22. INDEX.HTML ● Nome do arquivo principal index.html ● Servidores web reconhecem automáticamente ● Segredo do sucesso: Identação
  23. 23. DIV ● Define uma divizão, seção ou bloco do documento. ● Normalmente usado como agrupador. ● Trabalha relacionado com formatação CSS. ● Por padrão é um quebrador de linha display: block.
  24. 24. <!DOCTYPE html> <html> <head> <title>Título</title> </head> <body> <div>Conteúdo</div> </body> </html>
  25. 25. ESTILOS <div style="color: white; backgroundcolor: red; font-size: 20px;">Conteúdo</div>
  26. 26. QUE FEIO! ISSO NÃO SE FAZ! Estilos inline são feios e bobos!
  27. 27. MAIN.CSS ● ● ● ● ● ● ● Outra camada Minusculas sempre. Sem acentuação Nomes curtos e com significado qualquer_coisa.css De preferência somente um arquivo de css. Evitar requisições
  28. 28. CONTEUDO CSS .main { color: white; background-color: red; font-size:20px; }
  29. 29. CLASSES COM CLASSE Não usar: ● mainDiv ● redDiv ● right Usar: ● main ● principal ● secundaria SIGNIFICADO OBJETIVO SEMÂNTICA
  30. 30. UNINDO HTML E CSS .. <title>Título</title> <link rel="stylesheet" href=" main.css" type="text/css" media=" all"> </head> <body> <div class="main"> Conteúdo</div>...
  31. 31. SPAN ● Muito similar a div, mas não é um bloco. ● Sem display:block; ● Normalmente utilizado para diferenciar uma parte do texto visualmente. <span>Outro conteúdo</span> Mais a frente discutiremos a parte do display.
  32. 32. DIFERENÇA SPAN/DIV
  33. 33. SEÇÕES HTML 5 Principalmente utilizadas para SEO. Comportamanto semelhante a div. header Cabeçalho footer Rodapé section Seção qualquer article Um artigo. aside Sidebar, menu lateral details Detalhes que podem ser escondidos ou mostrados dialog Diálogo/popup. summary Cabeçalho para details. nav Navegação, engloba links. Normalmente usado para o menu principal.
  34. 34. SUPORTAR O COME COLA CSS: header, nav, article, footer, address { display: block; } Javascript (depois, depois...): document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav");
  35. 35. http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
  36. 36. NA PRÁTICA ● As diferentes seções não são tão diferentes assim. ● São mais usadas para organização e semantica. ● Uma página organizada é aumenta a “manutenibilidade”, ou seja capacitade de manutenção. ● Uma página com boa semântica permite que o motor dos buscadores façam uma melhor interpretação da página.
  37. 37. Elementos básicos Cabeçalhos, parágrafos e muito mais.
  38. 38. HEADING Cabeçalhos. Títulos. <h1>This <h2>This <h3>This <h4>This <h5>This <h6>This is is is is is is heading heading heading heading heading heading H’s são legais. 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
  39. 39. Nãooooooo!
  40. 40. Nãoooooooooooooooooooooo! 12 px de diferença! Maldito seja User Agent Style sheet! Eu mal consigo ver seus movimentos!
  41. 41. YES!
  42. 42. CSS Reset h1 { h4 { font-size: 32px; font-size: 16px; margin: 20px 0; margin: 20px 0; line-height:34px; line-height:18px; } } h2 { h5 { font-size: 24px; font-size: 12px; margin: 20px 0; margin: 20px 0; line-height:26px; line-height:14px; } } h3 { h6 { font-size: 20px; margin: 20px 0; margin: 20px 0; line-height:22px; } font-size: 11px; line-height:12px; }
  43. 43. CSSRESET.COM
  44. 44. Parágrafo (p) <p>Conteúdo <span>dentro</span> do parágrado<p> Usado normalmente para colocar conteúdo textual como notícias e posts de blogs. Pode receber filhotes. Tem o mesmo problema de alinhamento dos h’ s
  45. 45. Artigo ( article, hr, br) Passível de uso em conjunto com article e h’s, formando uma boa estrutura para um post. <article> <h1>Título muito interessante</h1> <p>Conteúdo cheio de showdebolise!</p> <hr> <p>Conteúdo de outro parágrado.<p> </article>
  46. 46. Comentário <!-- Este é um comentário não serve para quase nada.--> ● ● ● ● ● ● Utilizado somente para código Browser ignora Utilizado para destacar autor Pegadinhas (vaga de emprego) Uso não recomendado pelo pagespeed. Utilize comentários na linguagem do servidor.
  47. 47. Formatação <p><b>Bold text</b></p> <p><code>Computer code</code></p> <p><em>Emphasized text</em></p> <p><i>Italic text</i></p> <p><kbd>Keyboard input</kbd> </p> <p><pre>Preformatted text</pre></p> <p><small>Smaller text</small></p> <p><strong>Important text</strong></p> <p><abbr> (abbreviation)</abbr></p> <p><address> (contact information)</address></p> <p><bdo> (text direction)</bdo></p> <p><blockquote> (a section quoted from another source)</blockquote></p> <p><cite> (title of a work)</cite></p> <p><del> (deleted text)</del></p> <p><ins> (inserted text)</ins></p> <p><sub> (subscripted text)</sub></p> <p><sup> (superscripted text)</sup></p>
  48. 48. Links Crie um novo arquivo chamado listas.html <!DOCTYPE html> <html> <head> <title>Listas</title> <link rel="stylesheet" href="main.css" type=" text/css" media="all"> </head> <body> <h1>Listas</h1> </body> </html>
  49. 49. Links <nav> <a href="">Home</a> | <a href="listas.html">Listas</a> | <a href="pasta/">Pasta</a> | <a href="http://www.google.com.br" >Google</a> <a href="#article">Artigo</a> </nav>
  50. 50. Links attributos rel: Target: alternate author bookmark help license next nofollow noreferrer _blank _parent _self _top framename prefetch prev search tag Media: Type: mime
  51. 51. Listas Ul, Ol, li
  52. 52. Não ordenada <ul> <li>Café</li> <li>Xá</li> <li>Leite</li> </ul>
  53. 53. Ordenada <h2>Ordenada</h2> <ol reversed="reversed" start="5"> <li>Café</li> <li>Xá</li> <li>Leite</li> </ol>
  54. 54. Ordenada com tipo <h2>Ordenada com tipo</h2> <ol type="I”> <li>Café</li> 1) 1 - Número <li>Xá</li> 2) A - Alfabética <li>Leite</li> 3) a - Alfa. minus. <li>Refrigerante</li> 4) I - Romano 5) i - Romano minus. <li>Cerveja</li> </ol>
  55. 55. Lista descrição <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Dl: Lista descrição Dt: define termo/nome Dd: descreve termo/nome
  56. 56. Estilos em listas Este slide ainda não está pronto. Volte semana que vem.
  57. 57. Tabelas tr, td, th, summary ...
  58. 58. Tabelas <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
  59. 59. Estilos em tabela <table style="border: solid 1px black;"> <table border=1> table { border-collapse :collapse }
  60. 60. Tabelas : tags Tag Descrição table Tabela th Cabeçalho (table header) tr Linha (table row) td Célula ( cell) caption Título colgroup Grupo de colunas col Usado com colgroup thead Cabeçalho da tabela tbody Corpo da tabela tfoot Rodapé da tabela sumary Sumário (não é renderizado)
  61. 61. Formulários Input , select, data-list e muito mais!
  62. 62. Input <form> <label for=nome> <input id="nome" name="nome" placeholder="Preencha o nome"> </form>
  63. 63. Tipos text color date datetime datetime-local email month number range search tel time url week
  64. 64. Select <label for="comida">Bebidas </label> <select id="comida" name="comida"> <option value="1">Arroz</option> <option value="2">Feijão</option> <option value="3">Massa</option> <option value="4" selected>Aipim</option> <option value="5">Nabo</option> </select>
  65. 65. Datalist <label for="browser">Navegadores </label> <input list="browsers" name=" browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
  66. 66. Checkbox <input type="checkbox" name=" vehicle" value="Bike">I have a bike<br> <input type="checkbox" name=" vehicle" value="Car">I have a car
  67. 67. Radiobutton <input type="radio" name=" sex" value="male">Male<br> <input type="radio" name=" sex" value="female">Female
  68. 68. Imagem <img src="images/metalSlug.png" alt="Metalslug">
  69. 69. SVG <img src="images/rabisco.svg" alt=" Rabisco"> <svg> <rect width="90" height="60" x=" 50" y="0" fill="#00FFCC" stroke=" #FF0000" stroke-width="3"/> </svg>
  70. 70. Canvas <p> <canvas id="figura" width="300" height=" 300"></canvas> </p> <p> <button onClick="desenhar()" >Desenhar</button> </p>
  71. 71. Canvas <script> function desenhar() { var desenho = document. getElementById('figura'); var context = desenho.getContext('2d'); context.fillStyle = '#00FFFF' context.fillRect(50,50,200, 200); } </script>
  72. 72. SketchFab (Canvas3d) http://sketchfab.com/
  73. 73. Google maps https://www.google.com.br/maps/
  74. 74. Ferramentas para qualidade ● Page speed https://developers.google.com/speed/pagespeed/ ● Yslow https://addons.mozilla.org/pt-br/firefox/addon/yslow/ ● w3c validator http://validator.w3.org/ ● ...
  75. 75. CSS Seletores e estilos
  76. 76. CSS :hover :active :before :after float:left display:block position:absolute
  77. 77. JAVASCRIPT Make cool things!
  78. 78. FIM? Obrigado!

×