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

HTML, CSS, JavaScript e Ajax
Gabriel Kamimura Yano
@gabrielyano
/gabrielkamimura
gabrielk.yano@gmail.com

Sumário
1. 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
!
Signiﬁcado à 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

HTML, CSS e JavaScript são interpretados por
navegadores web
!
!
!
!
Usados nesse contexto, dispensa-se o uso de compiladores
7

Sublime Text
http://www.sublimetext.com/
8

Brackets
Adobe
http://brackets.io/
9

HTML
HyperText Marckup Language (Linguagem de Marcação
de Hipertexto)
HTML serve para dar signiﬁcado e organizar a
informação dos websites
Derivado de Marcações XML
11

HTML - Tag
Marca informações com tags
Criar Elementos
<p> Isto é um parágrafo </p>
Menor que
Maior que
Caractere
Barra
12

HTML - Atributos
<a href="http://www.google.com.br">
Link
</a>
Atributo
13

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>
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

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

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
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
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
method="post">
<p>
Qual o seu e-mail?
</p>
<input name="email"/>
<input type="submit" name="cadastrar"
value="Cadastrar"/>
</form>
33

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 Propriedades
CAIXAS
width
height
border
background-color
position
box-shadow
TEXTOS
color
font
font-family
font-style
font-size
font-shadow
Especíﬁcos
Propriedades
especíﬁcas 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 ≠ 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
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

Escopo
var 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

Aprimorando um pouco
(...)
!
<p id="meu-paragrafo">Isto é um parágrafo</p>
<button id="btn-mudarCor">Mudar cor</button>
!
var btn = document.getElementById("btn-mudarCor");
!
btn.onclick = function() {
paragrafo.innerHTML += " vermelho";
};
!
</script>
!
(...)
61

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>
!
window.onload = function() {
!
var btn = document.getElementById("btn-mudarCor");
!
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>

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

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 - recursos
Seleçã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>

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

!
!
$.ajax({
method: "GET",
url: "nada.json",
dataType: "json"
}).success(function(response) {
var frutas = response;
!
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

!
!
$.ajax({
method: "POST",
url: "http://istoeumademonstracao.com",
data: { nome : "maça", cor: "vermelha" },
dataType: "json"
alert("fruta " + response.nome + " registrada." );
}).error(function(msg) {
alert (msg.responseText);
});
!
};
85
POST

Console no Google Chrome
+ mais ferramentas + console JavaScript ou F12
88

Bootstrap
Twitter
HTML, CSS, JS
Mobile ﬁrst
Diversos recursos
Multi-dispositivos
Grids Responsivos
http://getbootstrap.com/
89

Font Awesome
Coleção de ícones
transformado em fontes
Não requer JS
Personalizável via CSS
http://fortawesome.github.io/
Font-Awesome/
90

Angular JS
Single-Page Application
Data Binding;
Controllers
Directives
Roteamento
https://angularjs.org/
91

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

Bower
bowerbird - família de
pássaros - objetos
coloridos
Gerenciador de
dependências
http://bower.io/
93

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

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

Obrigado!!
Gabriel Kamimura Yano
@gabrielyano
/gabrielkamimura
gabrielk.yano@gmail.com

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

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Introdução a HTML, CSS, JS, Ajax (20)

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