Introdução a HTML, CSS, JS, Ajax

1.761 visualizações

Publicada em

Slides com conteúdos básicos sobre HTML, CSS, JavaScript e Ajax.

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

Sem downloads
Visualizações
Visualizações totais
1.761
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.028
Ações
Compartilhamentos
0
Downloads
73
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução a HTML, CSS, JS, Ajax

  1. 1. HTML, CSS, JavaScript e Ajax Gabriel Kamimura Yano @gabrielyano /gabrielkamimura gabrielk.yano@gmail.com
  2. 2. Sumário 1. Introdução 2. IDEs 3. HTML 4. CSS 5. JavaScript 6. Ajax 7. Dicas 2
  3. 3. Front-end Back-end HTML, CSS, JavaScript PHP, ASP, Java, Ruby, Python 3
  4. 4. Desenvolvimento por Camadas Informação ! Significado à Informação HTML Formatação ! Estilo CSS Comportamento ! Controlar elementos JavaScript 4
  5. 5. HTML, CSS, JavaScript Linguagens básicas para criar websites HTML - Informação CSS - Deixar a informação "bonita" JavaScript - Informação com comportamento (Por exemplo, exibição de submenu) 5
  6. 6. IDEs, Editores de código
  7. 7. HTML, CSS e JavaScript são interpretados por navegadores web ! ! ! ! Usados nesse contexto, dispensa-se o uso de compiladores 7
  8. 8. Sublime Text http://www.sublimetext.com/ 8
  9. 9. Brackets Adobe http://brackets.io/ 9
  10. 10. HTML
  11. 11. HTML HyperText Marckup Language (Linguagem de Marcação de Hipertexto) HTML serve para dar significado e organizar a informação dos websites Derivado de Marcações XML 11
  12. 12. HTML - Tag Marca informações com tags Criar Elementos <p> Isto é um parágrafo </p> Menor que Maior que Caractere Barra 12
  13. 13. HTML - Atributos <a href="http://www.google.com.br"> Link </a> Atributo 13
  14. 14. HTML - Estrutura da página <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> 14
  15. 15. Para aprender HTML, será necessário saber quais as tags disponíveis, o que elas fazem e onde podem ser usadas
  16. 16. Títulos<h1> <h2> <h3> <h4> <h5> <h6> <h1> Título principal </h1> <h2> Título nível 2 </h2> <h3> Título nível 3 </h3> <h4> Título nível 4 </h4> <h5> Título nível 5 </h5> <h6> Título nível 6 </h6> 16
  17. 17. Parágrafos <p> <p> Este é um parágrafo </p> <p> Este é outro parágrafo </p> 17
  18. 18. Negrito e itálico <b> ! <i> <p> Este é um texto em <b>negrito</b> </p> <p> Este é um texto em <i>itálico</i> </p> 18
  19. 19. Quebra de Linha e linhas horizontais <br /> ! <hr /> <p> Em cima <br />Embaixo </p> <p> Em cima <hr />Embaixo </p> 19
  20. 20. Lista Numérica <ol> ! <li> <ol> <li>Café</li> <li>Chá</li> <li>Leite</li> </ol> 20
  21. 21. Lista de marcadores <ul> ! <li> <ul> <li>Café</li> <li>Chá</li> <li>Leite</li> </ul> 21
  22. 22. Links <a> ! <a href="http://google.com.br">Google</a> 22
  23. 23. Imagens <img/> <img src="img/borboleta.png" alt="Uma borboleta" title="As borboletas são insetos da ordem Lepidoptera" /> 23
  24. 24. Tabelas <table > <tr> <td> <table> <tr> <td></td> <td>09:00</td> <td>10:00</td> <td>11:00</td> </tr> <tr> <td>Segunda-feira</td> <td>Geografia</td> <td>Matemática</td> <td>Filosofia</td> </tr> <tr> <td>Terça-feira</td> <td>Biologia</td> <td>Física</td> <td>Química</td> </tr> </table> 24
  25. 25. Formulários
  26. 26. Como funcionam formulários O name de cada item do formulário é enviado ao servidor com seus valores O Servidor processa a informação e faz algo com ela com a ajuda de linguagens de programação (PHP, C#) Obrigado!! Seu cadastro foi realizado com sucesso!! O servidor cria uma nova página e envia de volta 26
  27. 27. Estrutura de Formulário <form > <form action="http://exemplo.com/cadastrar.php" method="post"> <p>Aqui ficarão os elementos do formulário</p> </form> 27
  28. 28. Entrada de Texto <input/> <form action="http://exemplo.com/ cadastrar.php" method="post"> <label> Username <input name="username" type='text'> </label> </form> 28
  29. 29. Entrada de Senha <input/> <form action="http://exemplo.com/ cadastrar.php" method="post"> <label> Username <input name="username" type='text'> </label> <label> Senha <input name="senha" type='password'> </label> </form> 29
  30. 30. Caixa de Texto <textarea> <form action="http://exemplo.com/ cadastrar.php" method="post"> <label> Comentário <textarea name="comentario"> Insira seu comentário </textarea> </label> </form> 30
  31. 31. Radio Button <form action="http://exemplo.com/cadastrar.php" method="post"> <p> Estilo musical favorito: </p> <input type="radio" name='genero' value='pop' checked="checked"/> Pop <input type="radio" name='genero' value='rock'/> Rock <input type="radio" name='genero' value='jazz'/> Jazz </form> 31
  32. 32. Checkbox <form action="http://exemplo.com/cadastrar.php" method="post"> <p> Estilos musicais favoritos: </p> <input type="checkbox" name='genero' value='pop' checked="checked"/> Pop <input type="checkbox" name='genero' value='rock'/> Rock <input type="checkbox" name='genero' value='jazz'/> Jazz </form> 32
  33. 33. Botão de Submit <form action="http://exemplo.com/cadastrar.php" method="post"> <p> Qual o seu e-mail? </p> <input name="email"/> <input type="submit" name="cadastrar" value="Cadastrar"/> </form> 33
  34. 34. CSS
  35. 35. CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Apresentação (aparência) "Adota" linguagens de marcação (XML e HTML) 35
  36. 36. Sintaxe .pagina { background-color: blue; } Seletor Propriedade Valor 36
  37. 37. Por Exemplo ... <html> <head> <style> .pagina { background-color: blue; } </style> </head> <body class="pagina"> ! </body> </html> ! ! 37 exemplo.html
  38. 38. Caixas imaginárias ao redor dos elementos HTML Isto é um Título Este é um parágrafo. Aqui, temos elementos em negrito e itálico. Este é um outro parágrafo. Aqui, temos mais conteúdos. 38
  39. 39. Exemplos de Propriedades CAIXAS width height border background-color position box-shadow TEXTOS color font font-family font-style font-size font-shadow Específicos Propriedades específicas de determinados elementos list-style-type 39
  40. 40. Alguns seletores // Aplica-se a todos os elementos * { color: #444; } ! // Nomes de elementos h1 { font-size: 150%; color: cyan; } ! //ID de elementos #conteudo { background-color: green; } ! //Classes de elementos .btn { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } 40 exemplo.css
  41. 41. Mais Alguns seletores // Seletor de descendentes p a { color: pink; } ! // Seletor de múltiplos elementos h1, h2, h3, h4, h5, h6 { font-size: 150%; color: cyan; } ! // Elementos de determinada classe h1.titulo { font-size: 150%; color: cyan; } 41 exemplo.css
  42. 42. Carregamento externo de CSS <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 42
  43. 43. JavaScript
  44. 44. JavaScript JavaScript ≠ Java ECMAScript Comportamento Manipulação das demais camadas 44
  45. 45. JavaScript - Exemplo <html> <head></head> <body> <script type="text/javascript"> alert('Hello World!'); </script> ! </body> </html> 45
  46. 46. JavaScript - Outro Exemplo <script type="text/javascript"> var entrada = prompt("Qual o seu nome?"); alert('Olá ' + entrada); </script> 46
  47. 47. JavaScript - variáveis Tipagem dinâmica var - escopo local escopo global 47
  48. 48. Exemplos ... var str = "Algum texto"; ! gbl = "global"; ! var num = 123; ! var frutas = ["maça", "laranja", "manga"]; ! var fruta = { nome: "maça", cor: "vermelho", peso: "100g" } 48
  49. 49. Tipos var num = 22, //number num2 = "22"; //string ! var num3 = num + num2; //string alert(num3); //2222 49
  50. 50. Funções function hello(nome) { alert("Olá " + nome + "!"); } ! ! hello(prompt("Qual o seu nome?")); 50
  51. 51. Escopo var a = 0; var b = 1; ! function soma() { var a = 5; var b = 3; console.log(a + b); } ! soma(); 51
  52. 52. If var valor = prompt("Informe um número"); ! if (valor > 10) { alert("O valor é maior que 10"); } 52
  53. 53. If .. else var valor = prompt("Informe um número"); ! if (valor > 10) { alert("O valor é maior que 10"); } else { alert("O valor é menor ou igual a 10"); } 53
  54. 54. for var frutas = ['maça', 'banana', 'laranja']; ! for ( var i = 0; i < frutas.length; i++ ) { alert(frutas[i]); } 54
  55. 55. for..in var frutas = ['maça', 'banana', 'laranja']; ! for ( var i in frutas ) { alert(frutas[i]); } 55
  56. 56. While var i = 0; ! while (i < 5) { alert(i); i++; } 56
  57. 57. DOM Document Object Model Representa como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador 57
  58. 58. Document Quando um HTML é carregado pelo navegador, ele torna- se um objeto document 58
  59. 59. Exemplo... var paragrafo = document.getElementById("meu-paragrafo"); ! paragrafo.style.color = "red"; <p id="meu-paragrafo">Isto é um parágrafo </p> JS HTML 59
  60. 60. E o resultado disso é ... 60
  61. 61. Aprimorando um pouco (...) ! <p id="meu-paragrafo">Isto é um parágrafo</p> <button id="btn-mudarCor">Mudar cor</button> ! <script type="text/javascript"> var btn = document.getElementById("btn-mudarCor"); ! btn.onclick = function() { var paragrafo = document.getElementById("meu-paragrafo"); paragrafo.style.color = "red"; paragrafo.innerHTML += " vermelho"; }; ! </script> ! (...) 61
  62. 62. Agora, ficou assim... 62
  63. 63. Agora, ficou assim... 63
  64. 64. Só poderemos trabalhar com elementos após o carregamento da página (...) ! <p id="meu-paragrafo">Isto é um parágrafo</p> <button id="btn-mudarCor">Mudar cor</button> ! <script type="text/javascript"> window.onload = function() { ! var btn = document.getElementById("btn-mudarCor"); ! btn.onclick = function() { var paragrafo = document.getElementById("meu-paragrafo"); paragrafo.style.color = "red"; paragrafo.innerHTML += " vermelho"; }; } ! </script> ! (...) 64
  65. 65. Localização dos elementos (nós) document.getElementById("meuId"); 65 <p id="meuId">Parágrafo</p> document.getElementsByTagName("a"); <a>Link 1</a> (...) <a>Link 2</a> document.getElementsByClassName("titulos"); <h1 class="titulos">Título 1</h1> (...) <h2 class="titulos">Título 2</h1>
  66. 66. Eventos var elemento = document.getElementById("meuElem"); ! elemento.onclick = function() {}; //Ao clicar com o mouse ! elemento.onchange = function() {}; //Ao alterar valor (value) ! element.onload = function() {}; // Ao carregar ! elemento.onfocus = function() {}; //Ao ganhar foco ! elemento.onblur = function() {}; //Ao perder foco ! elemento.onerror = function() {}; //Ao ocorrer erro ! elemento.onsubmit = function() {}; //Ao submeter um formulário 66
  67. 67. Eventos (2) var elemento = document.getElementById("meuElem"); ! elemento.onmouseover = function() {}; //Ao passar o mouse por cima ! elemento.onmouseout = function() {}; //Ao retirar o mouse de cima 67
  68. 68. Manipulação de HTML var elemento = document.getElementsByTagName("a")[0]; ! elemento.innerHTML = "Novo texto"; 68 <a> </a>
  69. 69. Alterações no estilo var elemento = document.getElementsByTagName("a")[0]; ! elemento.style.backgroundColor = "green"; ! elemento.style.width = "10px"; ! elemento.style.height = "2em"; ! elemento.className = "btn btn-default"; 69
  70. 70. Mais informações sobre manipulação do DOM Eduardo Mendes - slides de JQuery - http:// pt.slideshare.net/edumendes/jquery-34235136
  71. 71. JQuery Biblioteca/framework de JS John Resig Write less, do more 71
  72. 72. JQuery - recursos Seleção e manipulação de elementos HTML Manipulação de CSS Efeitos e animações Navegação pelo DOM Ajax Eventos 72
  73. 73. JQuery - Carregamento 73 <html> <head> <title>Carregando o JQuery</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> // (...) </script> </body> </html>
  74. 74. Ajax
  75. 75. Imagine o Google Maps. Você acha que o conteúdo do Google Maps é carregado de uma vez e enviado ao navegador? 75
  76. 76. Lembre agora das páginas do Facebook e do Twitter, elas são recarregadas ao mudar o conteúdo? 76
  77. 77. Páginas clássicas (sem Ajax) precisam recarregar a página inteira se o conteúdo mudar 77
  78. 78. Ajax Asynchronous JavaScript and XML NÃO é uma linguagem de programação Arte de trocar dados com o servidor sem recarregar a página toda. 78
  79. 79. ! XMLHttpRequest - Troca de dados assíncronamente com o servidor; JavaScript/DOM - Para apresentar a informação; CSS - Para estilizar a apresentação dos dados; JSON ou XML - Usados como formato de transferência de dados; 79 O AJAX é baseado nos padrões da internet
  80. 80. Um evento ocorre... ! Cria um objeto XMLHttpRequest Envia HttpRequest Navegador Processa os dados retornados utilizando JavaScript Atualiza o conteúdo da página Navegador Processa o HTTPRequest Cria a response e envia dados de volta ao navegador Servidor Internet Internet 80
  81. 81. var btn = document.getElementById("btn-carregar"); ! btn.onclick = function() { ! $.ajax({ method: "GET", url: "dados.json", dataType: "json" }).then(function(response) { var frutas = response; ! for ( var i in frutas ) { alert(frutas[i].nome + " é " + frutas[i].cor); }; }); ! }; [ { "nome": "Maça", "cor": "Vermelha" }, { "nome": "Banana", "cor": "Amarela" } ] demoAjax.js dados.json 81
  82. 82. O resultado é 82
  83. 83. O resultado é 83
  84. 84. var btn = document.getElementById("btn-carregar"); ! btn.onclick = function() { ! $.ajax({ method: "GET", url: "nada.json", dataType: "json" }).success(function(response) { var frutas = response; ! for ( var i in frutas ) { alert(frutas[i].nome + " é " + frutas[i].cor); }; }).error(function() { alert ("Não foi possível achar o arquivo"); }); ! }; [ { "nome": "Maça", "cor": "Vermelha" }, { "nome": "Banana", "cor": "Amarela" } ] demoAjax.js dados.json Success / Error 84
  85. 85. var btn = document.getElementById("btn-carregar"); ! btn.onclick = function() { ! $.ajax({ method: "POST", url: "http://istoeumademonstracao.com", data: { nome : "maça", cor: "vermelha" }, dataType: "json" }).success(function(response) { alert("fruta " + response.nome + " registrada." ); }).error(function(msg) { alert (msg.responseText); }); ! }; 85 POST
  86. 86. var btn = document.getElementById("btn-enviar"); ! btn.onclick = function(event) { ! event.preventDefault(); ! var dados = {}; dados.nome = document.getElementById("fnome").value; dados.cor = document.getElementById("fcor").value; ! ! $.ajax({ method: "POST", url: "http://istoeumademonstracao.com", data: dados, dataType: "json" }).success(function(response) { alert("fruta " + response.nome + " registrada." ); ! }).error(function(msg) { alert (msg.responseText); ! }); ! }; 86 Aprimorando o exemplo anterior <form id="meuform"> <label> Nome da fruta: <input name="nome" id="fnome"/> </label> ! <label> Cor: <input name="cor" id="fcor"/> </label> <input id="btn-enviar" type="submit" value="Cadastrar" /> </form>
  87. 87. Dicas
  88. 88. Console no Google Chrome + mais ferramentas + console JavaScript ou F12 88
  89. 89. Bootstrap Twitter HTML, CSS, JS Mobile first Diversos recursos Multi-dispositivos Grids Responsivos http://getbootstrap.com/ 89
  90. 90. Font Awesome Coleção de ícones transformado em fontes Não requer JS Personalizável via CSS http://fortawesome.github.io/ Font-Awesome/ 90
  91. 91. Angular JS Single-Page Application Data Binding; Controllers Directives Roteamento https://angularjs.org/ 91
  92. 92. Angular Material Design https:// material.angularjs.org/#/ Implementação do Material design no ANgular JS Diretrizes do Material Design: http:// www.google.com/design/ spec/material-design/ introduction.html 92
  93. 93. Bower bowerbird - família de pássaros - objetos coloridos Gerenciador de dependências http://bower.io/ 93
  94. 94. Referências FRANKLIN, Alysson . Tenha o dom. Disponível em :<http://tableless.com.br/tenha-o-dom/> Acessado em 30/04/2015 às 12h33min Tableless. Guia para iniciantes na área de web.<http://tableless.github.io/iniciantes/> Acessado em 29/04/2015 às 15h45min W3Schools <http://www.w3schools.com/> http://www.w3schools.com/ajax/ajax_intro.asp http://api.jquery.com/ MIRANDA, Luiz Otávio. Eventos em Javascript. 2014. Disponível em: <http://www.tutsup.com/2014/04/25/eventos- em-javascript/> Acessado em 04/05/2015 às 12h30min MIRANDA, Luiz Otávio. O DOM e o JavaScript. 2014 Disponível em: <http://www.tutsup.com/2014/05/02/dom-e- javascript/> Acessado em 04/05/2015 às 12h15min DUCKETT, Jon. HTML & CSS Design and buid websites. 2011 94
  95. 95. Referências http://www.codecademy.com/pt-BR/skills/make-a- website/topics/html-elements/html-heading-try http://www.codecademy.com/pt/courses/web-beginner-en- HZA3b/0/1?curriculum_id=50579fb998b470000202dc8b http://www.codecademy.com/pt/tracks/javascript MORRRISON, Michael. Use a Cabeça! JavaScript. 2008. Rio de Janeiro 95
  96. 96. Obrigado!! Gabriel Kamimura Yano @gabrielyano /gabrielkamimura gabrielk.yano@gmail.com

×