Aula 01Wagner Silva
Agenda        Apresentação        Introdução        HTML        CSS        JavaScriptWagner Silva # Web 2.0 com Ajax ...
Apresentação        Web 2.0 com Ajax        E-mail: web2softeam@gmail.com        Twitter: twitter.com/web2softeamWagner...
Apresentação        Wagner Amaral e Silva        Bacharel em Ciência da Computação        Analista de Sistemas do Tribu...
Apresentação        Introdução: O que é a Web 2.0? Revisando HTML,           CSS e Javascript. Conhecendo o HTML Document...
Apresentação        Manipulação de Códigos: Manipulando cores,           tamanhos e posição de objetos HTML. Manipulando ...
Apresentação        Ajax: O que é Ajax? Revisando PHP e o objeto           XMLHttpRequest. Conexões síncronas e assíncron...
Apresentação        Nome        E-mail        Curso e/ou Trabalho        Experiência com Programação        Experiênc...
Introdução             “Alguém ouviu falar em TV 2.0            quando as transmissões passaram a               ser colori...
Introdução      “Web 2.0 é a mudança para uma internet como         plataforma (...) a regra mais importante é      desenv...
Introdução        Fóruns        Grupos        Blogs        Wikis        Redes Sociais        Compras Coletivas      ...
Introdução: JQuery        Biblioteca JavaScript        “Write less. Do more.”        Coerência e Simetria: HTML e CSS  ...
Introdução: PHP        Veloz, simples e eficiente        Estruturada/ Orientada a Objetos        Tipagem Dinâmica      ...
HTML        Linguagem de Marcação (Tags)        Simples e Leve        Principais Tags:              Doctype           ...
HTML       <!DOCTYPE HTML>       <html>         <head>             <title>Título da Página</title>         </head>        ...
HTML  Contruir um formulário utilizando somente HTML e com as     seguintes características:       A página deve possuir...
CSS        Linguagem de Estilo        Formatação x Conteúdo        Controle e Adaptação de Layout        Seletores: Ta...
CSS: Inserindo num HTML        Nas tags do conteúdo:         <body style=“background-color:#123456”>                <h1 s...
CSS: Inserindo num HTML        Através da tag style dentro de head:                    <head>                          <t...
CSS: Inserindo num HTML  Link para um arquivo independente/externo:    <head>     <title>Título</titulo>          <style ...
CSS: Seletores (Tags)       body{         background-color:#aabbcc;       }       p{            font-family:” Georgia”;   ...
CSS: Seletores (Classes)       body{         background-color:#aabbcc;       }       p.texto_noticia{          font-family...
CSS: Seletores (Identificadores)       body{         background-color:#aabbcc;       }       #rodape{         font-family:...
CSS  Separar formatação e conteúdo da página do formulário     utilizando CSS.Wagner Silva # Web 2.0 com Ajax            ...
JavaScript        Linguagem de Script        Semelhante ao Java (~Conceito e Uso)        Controle sobre objetos numa pá...
JavaScript: Inserindo num HTML        Através da tag script:           <head>                    <script type=“text/javas...
JavaScript: Inserindo num HTML        Através da tag script:           <body>                    <script type=“text/javas...
JavaScript: Inserindo num HTML        Link para um arquivo independente/externo:           <head>                    <scr...
JavaScript: Inserindo num HTML  Eventos:     <body onload=“javascript: bemVindo();”>     <input type=“text” id=“txt_busca...
JavaScript        Adiconar as seguintes funcionalidades na página do           formulário:              Validação de CPF...
Web 2.0 com Ajax # Aula 01        Próxima Aula:              HTML DOM e JQuery.        E-mail: web2softeam@gmail.com   ...
Upcoming SlideShare
Loading in …5
×

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

872 views

Published on

Treinamento ministrado para turma iniciante em 2011

Aula 01

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
872
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Aula 01Wagner Silva
  2. 2. Agenda  Apresentação  Introdução  HTML  CSS  JavaScriptWagner Silva # Web 2.0 com Ajax Aula 01
  3. 3. Apresentação  Web 2.0 com Ajax  E-mail: web2softeam@gmail.com  Twitter: twitter.com/web2softeamWagner Silva # Web 2.0 com Ajax Aula 01
  4. 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. 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. 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. 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. 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 CursoWagner Silva # Web 2.0 com Ajax Aula 01
  9. 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’IagoWagner Silva # Web 2.0 com Ajax Aula 01
  10. 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’ReillyWagner Silva # Web 2.0 com Ajax Aula 01
  11. 11. Introdução  Fóruns  Grupos  Blogs  Wikis  Redes Sociais  Compras Coletivas  Computação em NuvemWagner Silva # Web 2.0 com Ajax Aula 01
  12. 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 MITWagner Silva # Web 2.0 com Ajax Aula 01
  13. 13. Introdução: PHP  Veloz, simples e eficiente  Estruturada/ Orientada a Objetos  Tipagem Dinâmica  Permite conexão com Banco de DadosWagner Silva # Web 2.0 com Ajax Aula 01
  14. 14. HTML  Linguagem de Marcação (Tags)  Simples e Leve  Principais Tags:  Doctype  HTML  Head  BodyWagner Silva # Web 2.0 com Ajax Aula 01
  15. 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. 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 CancelarWagner Silva # Web 2.0 com Ajax Aula 01
  17. 17. CSS  Linguagem de Estilo  Formatação x Conteúdo  Controle e Adaptação de Layout  Seletores: Tags, Classes e Identificadores  Pseudo-Classes  Pseudo-ElementosWagner Silva # Web 2.0 com Ajax Aula 01
  18. 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. 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. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 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. 25. JavaScript  Linguagem de Script  Semelhante ao Java (~Conceito e Uso)  Controle sobre objetos numa página  Tipagem dinâmica  Expressões RegularesWagner Silva # Web 2.0 com Ajax Aula 01
  26. 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. 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. 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. 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. 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. 31. Web 2.0 com Ajax # Aula 01  Próxima Aula:  HTML DOM e JQuery.  E-mail: web2softeam@gmail.com  Twitter: twitter.com/web2softeamWagner Silva # Web 2.0 com Ajax Aula 01

×