Escolar Documentos
Profissional Documentos
Cultura Documentos
2
SOBRE MIM – FORMAÇÃO ACADÊMICA
3
SOBRE MIM – FORMAÇÃO ACADÊMICA
◼Doutorado em Ciência da Saúde – PPGCS/UFS – Em andamento
◼ Aplicativo para auxílio no diagnóstico de neuropatias periféricas
utilizando Membrana polimérica contendo indicador colorimétrico
◼ Orientador Prof. Dr. Adriano Antunes
4
SOBRE MIM – EXPERIÊNCIA PROFISSIONAL
5
SOBRE MIM – CONTATO
◼ Email: andr.frades@professores.estacio.br
◼ Linkeidn: https://www.linkedin.com/in/andr%C3%A9-teixeira-
601324bb
6
SOBRE A TURMA
◼ Nome
◼ Ocupação
◼ Experiência em Dev. Web?
7
Sobre a Disciplina
◼ Código e Nome da Disciplina: ARA0062 - DESENV. WEB EM
HTML5, CSS, JAVASCRIPT E PHP - Período 2023.2.
9
Sobre a Disciplina
▪ 3. LINGUAGEM JAVASCRIPT
▪ 3.1 APRESENTAÇÃO DO CONCEITO DE PROGRAMAÇÃO CLIENTSIDE VERSUS SERVERSIDE
▪ 3.2 ESTRUTURAS DE DECISÃO (IF; CASE)
▪ 3.3 ESTRUTURA DE REPETIÇÃO (WHILE; DO\WHILE; FOR)
▪ 3.4 VETOR (ARRAY) (CRIAÇÃO DE VETOR VAZIO; ACESSO A ELEMENTOS; REMOVENDO ELEMENTOS)
▪ 4. PROGRAMAÇÃO DE PÁGINAS DINÂMICAS COM AJAX & PHP
▪ 4.1 AJAX
▪ 4.2 JSON
▪ 4.3 PHP
▪ 5. CRIAÇÃO DE UM CRUD
▪ 5.1 INTEGRANDO O DOCTRINE COM O ZEND FRAMEWORK
▪ 5.2 CRIANDO A AÇÃO INCLUIR
▪ 5.3 CRIANDO A AÇÃO CONSULTA
▪ 5.4 CRIANDO A AÇÃO EDITAR
▪ 5.5 CRIANDO A AÇÃO EXCLUIR
10
Sobre a Disciplina
▪ Objetivos:
▪ Estruturar páginas web, utilizando a linguagem DE MARCAÇÃO DE
HYPERTEXTO (HTML 5), para a formação de um arcabouço sobre o qual
serão construídas funcionalidades dinâmicas;
11
Sobre a Disciplina
▪ Objetivos:
▪ Empregar programabilidade em páginas web, utilizando linguagem Javascript,
mais usada no mercado, para o desenvolvimento de um sistema web com
funcionalidades dinâmicas;
12
Sobre a Disciplina
◼ Avaliação:
◼ O processo de avaliação oficial se dá através de NOTA FINAL ÚNICA,
estabelecida ao fim do semestre.
◼ Atividade 1: 4 pontos, onde os alunos vão demonstrar as primeiras páginas e
formato do projeto.
◼ Atividade 2: 3,5 pontos, onde os alunos vão demonstrar as todas páginas do
projeto com estilos e scripts.
◼ Atividade 3: (vinculada ao crédito digital): 2,5 pontos apresentação final do
sistema.
13
Sobre a Disciplina
14
Sobre a Disciplina
◼ Aprovação:
◼ Atingir resultado igual ou superior a 6,0;
◼ Frequentar, no mínimo, 75% das aulas ministradas.
◼ Toda aula tem uma prática no final, a chamada só será feita após ela!
15
Sobre a Disciplina - Plano de aulas (3002 - Terça)
◼ 08/08 - 1. Apresentação e Introdução. ◼ 03/10 - Entrega Atividade 1.
◼ 15/08 - 2. Listas e Tabelas. ◼ 10/10 – 9. Javascript (vetores).
◼ 22/08 - 3. Formulários. ◼ 17/10 - 10. AJAX e JSON.
◼ 29/08 – 4. CSS, sintaxe e elementos. ◼ 24/10 - 11. PHP pt1.
◼ 05/09 – 5. CSS, formas de inclusão. ◼ 31/11 - 12. PHP pt2.
◼ 12/09 - 6. CSS, responsividade. (Data ◼ 07/11 - Entrega Atividade 2.
alteração grupos).
◼ 14/11 – Aula para Ajustes Finais.
◼ 19/09 - 7. Javascript. ◼ 21/11 - Entrega Atividade 3.
◼ 28/11 - Feedback.
◼ 26/09 - 8. Javascript (decisão e
◼ 05/12 – Encerramento Disciplina.
repetição).
19
Sobre a Disciplina
◼ Bibliografia Complementar:
◼ FLANAGAN, David. JavaScript: O Guia Definitivo. 6ª Ed. Porto Alegre: Bookman, 2014. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788565837484/
◼ FONSECA, Cleber C. Programação para Internet Rica. Rio de Janeiro: SESES, 2016. Disponível em:
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A57D14236B33417A19E0A7
7D6
◼ HAROLD, Elliotte R. Refatorando HTML Como Melhorar o Projeto de Aplicações Web Existentes. Porto
Alegre: Bookman, 2010. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788577806706/
◼ MILETTO, Evandro M.; BERTAGNOLLI, Silvia C. Desenvolvimento de Software II: Introdução ao
Desenvolvimento Web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788582601969/
◼ SOARES, Walace. PHP 5 Conceitos, Programação e Integração com Banco de Dados. 7ª Ed. São Paulo:
Érica, 2013. Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788536505633/
20
Agenda da Aula
◼ Objetivo:
◼ Estruturar páginas web, utilizando a linguagem de marcação de hypertexto
HTML 5, visando a construção de funcionalidades dinâmicas.
◼ Tópicos:
◼ Filosofia por trás do HTML5 (HTML 5; CSS; JAVASCRIPT).
◼ O que é e quais são os atributos de uma tag.
21
Internet
▪ O que é internet?
22
Internet
23
Internet
24
Internet
25
Internet
26
Internet
27
Internet
◼ Uma página na web hoje é uma das ferramentas, isso se não for a ferramenta, mais
importante e mais valiosa que existe.
28
Internet
29
HTML
30
HTML
◼ "Hipertexto" refere-se aos links que conectam páginas da Web entre si, seja
dentro de um único site ou entre sites.
31
HTML
◼ Por exemplo, a tag <title> pode ser escrita como <Title>, <TITLE> ou de qualquer
outra forma.
32
Estrutura Básica Tags HTML
33
Estrutura Básica Tags HTML
34
Estrutura Básica Tags HTML
◼ O DOCTYPE é uma instrução especial. Ela indica para o navegador qual versão do
HTML deve ser utilizada para renderizar a página.
35
Estrutura Básica Tags HTML
◼ HTML5:
◼ Um dos seus principais objetivos é facilitar a manipulação dos elementos.
◼ Fornece ferramentas para o CSS e o Javascript fazerem seu trabalho da melhor
possível de forma que um web site ou aplicação continue leve e funcional.
◼ Algumas tags foram modificadas, outras criadas e algumas descontinuadas.
36
Estrutura Básica Tags HTML
◼ A tag <head> contém informações sobre nosso documento que são de interesse
somente do navegador, e não dos visitantes do nosso site.
37
Atributos de Tags HTML
◼ Exemplos:
<p id="nome">
<a href="http://www.google.com/">Google</a>
38
Atributos de Tags HTML
◼ Um bom exemplo de atributo é o id, que serve para identificar, de maneira única,
um elemento dentro de um documento HTML.
◼ Exemplos:
<p id="nome">
<p id=“descrição">
◼ Cada tag tem atributos específicos, que podem ser aplicados ou não a ela,
exemplo não posso colocar href num tag title.
◼ A tag <a> define um hyperlink, que é usado para ligar de uma página para outra.
◼ O atributo mais importante de ambas é o href, a referência que está sendo feita.
<a href="https://www.google.com">
<a href="#section2">Go to Section 2</a>
<link rel="stylesheet" href="styles.css">
41
Tags HTML para o “body”
◼ A Tag <nav> representa uma seção de uma página que aponta para outras páginas
ou para outras áreas da página, ou seja, uma seção com links de navegação.
◼ Um documento pode ter vários elementos <nav>, por exemplo, um para navegação no
site e outro para navegação dentro da página.
42
Atividade
43
Atividade
44
Separação de Grupos - Projeto
45
Referências
46
Leitura Específica e Aprenda +
◼ TERUEL, Evandro C. HTML 5 Guia Prático. 2ª Ed. São Paulo: Érica, 2014. Páginas 16 a 24. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536519296/
◼ MILETTO, Evandro M.; BERTAGNOLLI, Silvia C. Desenvolvimento de Software II: Introdução ao
Desenvolvimento Web com HTML, CSS, JavaScript e PHP. 1ª Ed. Porto Alegre: Bookman, 2014. Páginas
62 e 63. Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788582601969/
47
Próxima Aula
48