Embed Size (px)
Citation preview
HTML, CSS, JavaScript e Ajax
Gabriel Kamimura Yano
@gabrielyano
/gabrielkamimura
gabrielk [email protected]
Sumário1. Introdução
2. IDEs
3. HTML
4. CSS
5. JavaScript
6. Ajax
7. Dicas
2
Front-end Back-end
HTML, CSS, JavaScript PHP, ASP, Java, Ruby, Python
3
Desenvolvimento por Camadas Informação
!
Significado à Informação HTML
Formatação !
Estilo CSS
Comportamento !
Controlar elementos JavaScript
4
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
IDEs, Editores de código
HTML, CSS e JavaScript são interpretados por navegadores web
!
!
!
!
Usados nesse contexto, dispensa-se o uso de compiladores
7
HTML
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
HTML - TagMarca informações com tags
Criar Elementos
<p> Isto é um parágrafo </p>
Menor que Maior queCaractere
Barra12
HTML - Estrutura da página
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
14
Para aprender HTML, será necessário saber quais as tags disponíveis, o que elas fazem e
onde podem ser usadas
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
Parágrafos
<p><p> Este é um parágrafo </p> <p> Este é outro parágrafo </p>
17
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
Quebra de Linha e linhas horizontais
<br /> !
<hr />
<p> Em cima <br />Embaixo </p> <p> Em cima <hr />Embaixo </p>
19
Lista Numérica
<ol> !
<li>
<ol> <li>Café</li> <li>Chá</li> <li>Leite</li> </ol>
20
Lista de marcadores
<ul> !
<li>
<ul> <li>Café</li> <li>Chá</li> <li>Leite</li> </ul>
21
Links
<a> ! <a href="http://google.com.br">Google</a>
22
Imagens
<img/> <img src="img/borboleta.png" alt="Uma borboleta" title="As borboletas são insetos da ordem Lepidoptera" />
23
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
Formulários
Como funcionam formuláriosO 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
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
Entrada de Texto
<input/> <form action="http://exemplo.com/cadastrar.php" method="post"> <label> Username <input name="username" type='text'> </label> </form>
28
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
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
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
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
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
CSS
CSS
Cascading Style Sheets (Folhas de Estilo em Cascata)
Apresentação (aparência)
"Adota" linguagens de marcação (XML e HTML)
35
Sintaxe.pagina { background-color: blue; }
Seletor Propriedade Valor
36
Por Exemplo ...<html> <head> <style> .pagina { background-color: blue; } </style> </head> <body class="pagina"> ! </body> </html> !!
37
exemplo.html
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
Exemplos de PropriedadesCAIXAS
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
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
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
Carregamento externo de CSS
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
42
JavaScript
JavaScript
JavaScript ≠ Java
ECMAScript
Comportamento
Manipulação das demais camadas
44
JavaScript - Exemplo
<html> <head></head> <body> <script type="text/javascript"> alert('Hello World!'); </script> ! </body> </html>
45
JavaScript - Outro Exemplo <script type="text/javascript"> var entrada = prompt("Qual o seu nome?"); alert('Olá ' + entrada); </script>
46
JavaScript - variáveis
Tipagem dinâmica
var - escopo local
escopo global
47
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
Tipos
var num = 22, //number num2 = "22"; //string !var num3 = num + num2; //string alert(num3); //2222
49
Funções
function hello(nome) { alert("Olá " + nome + "!"); } !!hello(prompt("Qual o seu nome?"));
50
Escopovar a = 0; var b = 1; !function soma() { var a = 5; var b = 3; console.log(a + b); } !soma();
51
If
var valor = prompt("Informe um número"); !if (valor > 10) { alert("O valor é maior que 10"); }
52
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
for
var frutas = ['maça', 'banana', 'laranja']; !for ( var i = 0; i < frutas.length; i++ ) { alert(frutas[i]); }
54
for..in
var frutas = ['maça', 'banana', 'laranja']; !for ( var i in frutas ) { alert(frutas[i]); }
55
While
var i = 0; !while (i < 5) { alert(i); i++; }
56
DOM
Document Object Model
Representa como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador
57
Document
Quando um HTML é carregado pelo navegador, ele torna-se um objeto document
58
Exemplo...
var paragrafo = document.getElementById("meu-paragrafo"); !paragrafo.style.color = "red";
<p id="meu-paragrafo">Isto é um parágrafo </p>
JS
HTML
59
E o resultado disso é ...
60
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
Agora, ficou assim...
62
Agora, ficou assim...
63
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
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>
Eventosvar 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
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
Manipulação de HTML
var elemento = document.getElementsByTagName("a")[0]; !elemento.innerHTML = "Novo texto";
68
<a> </a>
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
Mais informações sobre manipulação do DOM
Eduardo Mendes - slides de JQuery - http://pt.slideshare.net/edumendes/jquery-34235136
JQuery
Biblioteca/framework de JS
John Resig
Write less, do more
71
JQuery - recursosSeleção e manipulação de elementos HTML
Manipulação de CSS
Efeitos e animações
Navegação pelo DOM
Ajax
Eventos
72
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>
Ajax
Imagine o Google Maps. Você acha que o conteúdo do Google Maps é carregado de uma vez e enviado
ao navegador?
75
Lembre agora das páginas do Facebook e do Twitter, elas são
recarregadas ao mudar o conteúdo?
76
Páginas clássicas (sem Ajax) precisam recarregar a página inteira se o conteúdo mudar
77
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
!
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
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
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
O resultado é
82
O resultado é
83
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.jsonSuccess / Error
84
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
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>
Dicas
Console no Google Chrome+ mais ferramentas + console JavaScript ou F12
88
BootstrapTwitter
HTML, CSS, JS
Mobile first
Diversos recursos
Multi-dispositivos
Grids Responsivos
http://getbootstrap.com/
89
Font AwesomeColeção de ícones transformado em fontes
Não requer JS
Personalizável via CSS
http://fortawesome.github.io/Font-Awesome/
90
Angular JSSingle-Page Application
Data Binding ;
Controllers
Directives
Roteamento
https://angularjs.org/
91
Angular Material Designhttps://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
Bowerbowerbird - família de pássaros - objetos coloridos
Gerenciador de dependências
http://bower.io/
93
ReferênciasFRANKLIN, 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
Referênciashttp://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
