Web 2.0 com Ajax: JQuery/PHP (Aula 01)

Agenda
 Apresentação

 Introdução

 HTML

 CSS

 JavaScript

Wagner Silva # Web 2.0 com Ajax Aula 01

Apresentação
 Web 2.0 com Ajax

 E-mail: web2softeam@gmail.com

 Twitter: twitter.com/web2softeam


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.


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.


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.


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.


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

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


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

Introdução
 Fóruns

 Grupos

 Blogs

 Wikis

 Redes Sociais

 Compras Coletivas

 Computação em Nuvem

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

Introdução: PHP
 Veloz, simples e eficiente

 Estruturada/ Orientada a Objetos

 Tipagem Dinâmica

 Permite conexão com Banco de Dados


HTML
 Linguagem de Marcação (Tags)

 Simples e Leve

 Principais Tags:
 Doctype

 HTML

 Head

 Body


HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Conteúdo da Página
</body>
</html>

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

CSS
 Linguagem de Estilo

 Formatação x Conteúdo

 Controle e Adaptação de Layout

 Seletores: Tags, Classes e Identificadores

 Pseudo-Classes

 Pseudo-Elementos


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>


 Através da tag style dentro de head:
<head>
<title>Título</title>

<style type=“text/css”>
body{
background-color:#123456;
}
</style>
</head>


 Link para um arquivo independente/externo:
<head>
<title>Título</titulo>

<style type=“text/css” rel=“stylesheet” href=“arquivo.css”>

</head>


CSS: Seletores (Tags)
body{
background-color:#aabbcc;
}

p{
font-family:” Georgia”;
font-size:12pt;
text-align: justify;
}

a{
color:orange;
text-decoration:none;
}


CSS: Seletores (Classes)
body{
}

p.texto_noticia{
font-size:12pt;
}

a.link_patrocinado{
color:orange;
font-weight:bold;
}


CSS: Seletores (Identificadores)
body{
}

#rodape{
font-size:12pt;
}

#link_especial{
color:orange;
font-weight:bold;
}


CSS
 Separar formatação e conteúdo da página do formulário
utilizando CSS.


JavaScript
 Linguagem de Script

 Semelhante ao Java (~Conceito e Uso)

 Controle sobre objetos numa página

 Tipagem dinâmica

 Expressões Regulares


JavaScript: Inserindo num HTML
 Através da tag script:

<head>
<script type=“text/javascript”>
function bemVindo(){
alert(“Seja Bem-Vindo!”);
}
</script>
</head>


 Através da tag script:

<body>
<script type=“text/javascript”>
function bemVindo(){
alert(“Seja Bem-Vindo!”);
}
</script>
</body>


 Link para um arquivo independente/externo:

<head>
<script type=“text/javascript” src=“arquivo.js”>
</script>
</head>


 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();”>


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.


Web 2.0 com Ajax # Aula 01
 Próxima Aula:
 HTML DOM e JQuery.

 E-mail: web2softeam@gmail.com

 Twitter: twitter.com/web2softeam


Web 2.0 com Ajax: JQuery/PHP (Aula 01)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Web 2.0 com Ajax: JQuery/PHP (Aula 01)

Semelhante a Web 2.0 com Ajax: JQuery/PHP (Aula 01) (20)

Mais de Wagner Silva

Mais de Wagner Silva (15)

Último

Último (20)

Web 2.0 com Ajax: JQuery/PHP (Aula 01)