Web 2.0 com Ajax: JQuery/PHP

Aula 01 Wagner Silva

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: [email protected] 
Twitter: twitter.com/web2softeam Wagner Silva # Web 2.0 com Ajax Aula 01

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

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

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

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

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

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

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

Introdução  Fóruns  Grupos  Blogs  Wikis 
Redes Sociais  Compras Coletivas  Computação em Nuvem Wagner Silva # Web 2.0 com Ajax Aula 01

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

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

HTML  Linguagem de Marcação (Tags)  Simples e Leve
 Principais Tags:  Doctype  HTML  Head  Body Wagner Silva # Web 2.0 com Ajax Aula 01

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

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

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

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

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

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

CSS: Seletores (Tags) body{ background-color:#aabbcc; } p{ font-family:” Georgia”; font-size:12pt;
text-align: justify; } a{ color:orange; text-decoration:none; } Wagner Silva # Web 2.0 com Ajax Aula 01

CSS: Seletores (Classes) body{ background-color:#aabbcc; } p.texto_noticia{ font-family:” Georgia”; font-size:12pt;
text-align: justify; } a.link_patrocinado{ color:orange; font-weight:bold; } Wagner Silva # Web 2.0 com Ajax Aula 01

CSS: Seletores (Identificadores) body{ background-color:#aabbcc; } #rodape{ font-family:” Georgia”; font-size:12pt;
text-align: justify; } #link_especial{ color:orange; font-weight:bold; } Wagner Silva # Web 2.0 com Ajax Aula 01

CSS  Separar formatação e conteúdo da página do formulário
utilizando CSS. Wagner Silva # Web 2.0 com Ajax Aula 01

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

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

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

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

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

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

Web 2.0 com Ajax # Aula 01  Próxima Aula:
 HTML DOM e JQuery.  E-mail: [email protected]  Twitter: twitter.com/web2softeam Wagner Silva # Web 2.0 com Ajax Aula 01

Web 2.0 com Ajax: JQuery/PHP

Web 2.0 com Ajax: JQuery/PHP

Wagner Silva

More Decks by Wagner Silva

Other Decks in Programming

Featured

Transcript

Aula 01 Wagner Silva

Agenda  Apresentação  Introdução  HTML  CSS 

Apresentação  Web 2.0 com Ajax  E-mail: [email protected] 

Apresentação  Wagner Amaral e Silva  Bacharel em Ciência

Apresentação  Introdução: O que é a Web 2.0? Revisando

Apresentação  Manipulação de Códigos: Manipulando cores, tamanhos e posição

Apresentação  Ajax: O que é Ajax? Revisando PHP e

Apresentação  Nome  E-mail  Curso e/ou Trabalho 

Introdução “Alguém ouviu falar em TV 2.0 quando as transmissões

Introdução “Web 2.0 é a mudança para uma internet como

Introdução  Fóruns  Grupos  Blogs  Wikis 

Introdução: JQuery  Biblioteca JavaScript  “Write less. Do more.”

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

HTML  Linguagem de Marcação (Tags)  Simples e Leve

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

HTML  Contruir um formulário utilizando somente HTML e com

CSS  Linguagem de Estilo  Formatação x Conteúdo 

CSS: Inserindo num HTML  Nas tags do conteúdo: <body

CSS: Inserindo num HTML  Através da tag style dentro

CSS: Inserindo num HTML  Link para um arquivo independente/externo:

CSS: Seletores (Tags) body{ background-color:#aabbcc; } p{ font-family:” Georgia”; font-size:12pt;

CSS: Seletores (Classes) body{ background-color:#aabbcc; } p.texto_noticia{ font-family:” Georgia”; font-size:12pt;

CSS: Seletores (Identificadores) body{ background-color:#aabbcc; } #rodape{ font-family:” Georgia”; font-size:12pt;

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

JavaScript  Linguagem de Script  Semelhante ao Java (~Conceito

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

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

JavaScript: Inserindo num HTML  Link para um arquivo independente/externo:

JavaScript: Inserindo num HTML  Eventos: <body onload=“javascript: bemVindo();”> <input

JavaScript  Adiconar as seguintes funcionalidades na página do formulário:

Web 2.0 com Ajax # Aula 01  Próxima Aula: