2. Agenda
Apresentação
Introdução
HTML
CSS
JavaScript
Wagner Silva # Web 2.0 com Ajax Aula 01
3. Apresentação
Web 2.0 com Ajax
E-mail: web2softeam@gmail.com
Twitter: twitter.com/web2softeam
Wagner Silva # Web 2.0 com Ajax Aula 01
4. Apresentação
Wagner Amaral e Silva
Bacharel em Ciência da Computação
Analista de Sistemas do Tribunal de Justiça do Estado
de Sergipe e Professor Substituto do Departamento de
Computação da Universidade Federal de Sergipe.
Já foi diretor presidente e diretor de projetos da
Softeam Jr. Estagiou na Embrapa e na Caixa
Econômica. Trabalhou como desenvolvedor web na
FabricaClick e na Medlynx.
Wagner Silva # Web 2.0 com Ajax Aula 01
5. Apresentação
Introdução: O que é a Web 2.0? Revisando HTML,
CSS e Javascript. Conhecendo o HTML Document
Object Model.
JQuery: O que é JQuery? Vantagens e Desvantagens.
Baixando a Biblioteca. Conhecendo a Sintaxe.
Seletores e Filtros: Conceitos iniciais. Tipos de
Seleção através de Tags, Identificadores e Classes.
Hierarquia de Seletores. Aplicação de Filtros.
Hierarquia de Filtros.
Wagner Silva # Web 2.0 com Ajax Aula 01
6. Apresentação
Manipulação de Códigos: Manipulando cores,
tamanhos e posição de objetos HTML. Manipulando
propriedades de Identificadores e Classes CSS.
Manipulação de eventos do usuário. Operações com
Arrays e Objetos.
Animação de objetos: Manipulando a exibição e
ocultação de objetos. Customizando uma animação
através da união de propriedades CSS. Aplicando
Delay. Enfileirando animações.
Wagner Silva # Web 2.0 com Ajax Aula 01
7. Apresentação
Ajax: O que é Ajax? Revisando PHP e o objeto
XMLHttpRequest. Conexões síncronas e assíncronas.
Manipulando funções através do Ajax. Carregando e
enviando dados dinamicamente a um banco de dados.
Plugins: Conhecendo os repositórios. Tipos de
Plugins. Configurando Plugins de Formulários,
Imagens, Layout, Menus e Grids.
Wagner Silva # Web 2.0 com Ajax Aula 01
8. Apresentação
Nome
E-mail
Curso e/ou Trabalho
Experiência com Programação
Experiência com PHP
Experiência com JQuery
Expectativa com o Curso
Wagner Silva # Web 2.0 com Ajax Aula 01
9. Introdução
“Alguém ouviu falar em TV 2.0
quando as transmissões passaram a
ser coloridas ou via satélite?”
Marcelo Sant’Iago
Wagner Silva # Web 2.0 com Ajax Aula 01
10. Introdução
“Web 2.0 é a mudança para uma internet como
plataforma (...) a regra mais importante é
desenvolver aplicativos que aproveitem os efeitos
de rede para se tornarem melhores quanto mais
são usados pelas pessoas, aproveitando a
inteligência coletiva.”
Tim O’Reilly
Wagner Silva # Web 2.0 com Ajax Aula 01
11. Introdução
Fóruns
Grupos
Blogs
Wikis
Redes Sociais
Compras Coletivas
Computação em Nuvem
Wagner Silva # Web 2.0 com Ajax Aula 01
12. Introdução: JQuery
Biblioteca JavaScript
“Write less. Do more.”
Coerência e Simetria: HTML e CSS
Evita Hacks
Documentação
Plug-ins
Licenças: GNU Public License e MIT
Wagner Silva # Web 2.0 com Ajax Aula 01
13. Introdução: PHP
Veloz, simples e eficiente
Estruturada/ Orientada a Objetos
Tipagem Dinâmica
Permite conexão com Banco de Dados
Wagner Silva # Web 2.0 com Ajax Aula 01
14. HTML
Linguagem de Marcação (Tags)
Simples e Leve
Principais Tags:
Doctype
HTML
Head
Body
Wagner Silva # Web 2.0 com Ajax Aula 01
15. HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Conteúdo da Página
</body>
</html>
Wagner Silva # Web 2.0 com Ajax Aula 01
16. HTML
Contruir um formulário utilizando somente HTML e com as
seguintes características:
A página deve possuir uma cor de fundo que não seja
branco;
O formulário deve possuir borda e uma cor de fundo
diferente da página;
O formulário deve possuir os seguintes campos com títulos
em negrito: Nome, CPF, Sexo, E-mail, Telefone Principal,
Interesses, Estado, Cidade, Endereço e Foto;
O formulário deve possuir as ações: Cadastrar e Cancelar
Wagner Silva # Web 2.0 com Ajax Aula 01
17. CSS
Linguagem de Estilo
Formatação x Conteúdo
Controle e Adaptação de Layout
Seletores: Tags, Classes e Identificadores
Pseudo-Classes
Pseudo-Elementos
Wagner Silva # Web 2.0 com Ajax Aula 01
18. CSS: Inserindo num HTML
Nas tags do conteúdo:
<body style=“background-color:#123456”>
<h1 style=“background-color:red;”>Título</h1>
<p style=“color:blue; font-weight:bold;”>Parágrafo</p>
</body>
Wagner Silva # Web 2.0 com Ajax Aula 01
19. CSS: Inserindo num HTML
Através da tag style dentro de head:
<head>
<title>Título</title>
<style type=“text/css”>
body{
background-color:#123456;
}
</style>
</head>
Wagner Silva # Web 2.0 com Ajax Aula 01
20. CSS: Inserindo num HTML
Link para um arquivo independente/externo:
<head>
<title>Título</titulo>
<style type=“text/css” rel=“stylesheet” href=“arquivo.css”>
</head>
Wagner Silva # Web 2.0 com Ajax Aula 01
24. CSS
Separar formatação e conteúdo da página do formulário
utilizando CSS.
Wagner Silva # Web 2.0 com Ajax Aula 01
25. JavaScript
Linguagem de Script
Semelhante ao Java (~Conceito e Uso)
Controle sobre objetos numa página
Tipagem dinâmica
Expressões Regulares
Wagner Silva # Web 2.0 com Ajax Aula 01
26. JavaScript: Inserindo num HTML
Através da tag script:
<head>
<script type=“text/javascript”>
function bemVindo(){
alert(“Seja Bem-Vindo!”);
}
</script>
</head>
Wagner Silva # Web 2.0 com Ajax Aula 01
27. JavaScript: Inserindo num HTML
Através da tag script:
<body>
<script type=“text/javascript”>
function bemVindo(){
alert(“Seja Bem-Vindo!”);
}
</script>
</body>
Wagner Silva # Web 2.0 com Ajax Aula 01
28. JavaScript: Inserindo num HTML
Link para um arquivo independente/externo:
<head>
<script type=“text/javascript” src=“arquivo.js”>
</script>
</head>
Wagner Silva # Web 2.0 com Ajax Aula 01
29. JavaScript: Inserindo num HTML
Eventos:
<body onload=“javascript: bemVindo();”>
<input type=“text” id=“txt_busca” onchange=“javascript:
validaBusca(this.value);”>
<input type=“button” id=“btn_disponibilidade”
value=“Verificar disponibilidade” onclick=“javasctipt:
verificaDisponibilidade();”>
Wagner Silva # Web 2.0 com Ajax Aula 01
30. JavaScript
Adiconar as seguintes funcionalidades na página do
formulário:
Validação de CPF
Ao cadastrar, exibir um alerta dizendo que os dados
foram cadastrados com sucesso.
Wagner Silva # Web 2.0 com Ajax Aula 01
31. Web 2.0 com Ajax # Aula 01
Próxima Aula:
HTML DOM e JQuery.
E-mail: web2softeam@gmail.com
Twitter: twitter.com/web2softeam
Wagner Silva # Web 2.0 com Ajax Aula 01