DESENV.

WEB EM HTML5, CSS, JAVASCRIPT E PHP

Apresentação e Introdução ao HTML

Prof. Me. André Teixeira De Frades

SOBRE MIM – FORMAÇÃO ACADÊMICA

◼Graduação em Sistemas de Informação – DCOMP/UFS – 2017

◼ PIBIC: E-Health Ciber: Avaliando a participação dos hospitais sul-
americanos no Ciberespaço (Orientadora Prof.ª Dr.ª Adicinéia).
◼ TCC: MóduloWeb para a Ferramenta de Apoio à Revisão e
ao Mapeamento Sistemáticos (FARMS) (Orientador Prof. Dr. Gilton).

2
SOBRE MIM – FORMAÇÃO ACADÊMICA

◼Mestrado em Ciência da Computação – PROCC/UFS – 2019

◼ Uma Arquitetura de Ecossistemas de Software para Hospitais
Universitários da Rede EBSERH
◼ Orientadora Prof.ª Dr.ª Adicinéia

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

◼ Estagiário suporte informática - CASSIND - Maio de 2014 até Abril de

2015.

◼ Professor do Curso Programação de Sistemas - Serviço Nacional de

Aprendizagem Comercial (SENAC SE) - 12/21 e 02/22.

◼Assistente Administrativo no Centro de Ciências Biológicas e da

Saúde da Universidade Federal de Sergipe. 2015 – Atual.

5
SOBRE MIM – CONTATO

◼ Email: andr.frades@professores.estacio.br

◼ Teams: pesquisar pelo e-mail ou nome completo.

◼ 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.

◼ Carga Horária Semestral: 80 horas.

◼ Carga Horária Semanal: 4 horas aulas práticas presenciais.

◼ Encontros: Terças, Quartas ou Quintas-feiras - 18:30 às 21:10
(intervalo 10 min às 20:10)

◼ Local: Bloco B, laboratório 115.

8
Sobre a Disciplina
◼ Ementa:
◼ 1. LINGUAGEM DE MARCAÇÃO DE HYPERTEXTO HTML
◼ 1.1 FILOSOFIA POR TRÁS DO HTML5 (O HTML 5; O CSS; O JAVASCRIPT)
◼ 1.2 O QUE É E QUAIS SÃO OS ATRIBUTOS DE UMA TAG
◼ 1.3 LISTAS E TABELAS
◼ 1.4 FORMULÁRIOS (VALIDAÇÃO FORMULÁRIO)
◼ 2. LINGUAGEM DE MARCAÇÃO E ESTILOS CSS
◼ 2.1 DEFINIÇÃO
◼ 2.2 SINTAXE & SELEÇÃO DE ELEMENTOS
◼ 2.3 FORMAS DE INCLUSÃO NO HTML (ESTILO INLINE, INCORPORADO, INTERNO E EXTERNO)
◼ 2.4 WEB RESPONSIVA E MOBILE FIRST

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;

▪ Aplicar características de estilo a páginas WEB, utilizando a linguagem de

marcação de estilos (CSS 3), para praticar técnicas de engenharia de
software como facilidade de compreensão, reutilização de código,
manutenibilidade e interoperabilidade;

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;

▪ Empregar programabilidade em páginas web, utilizando linguagem AJAX e PHP,

bastante comum em sistemas legado, para o desenvolvimento de um sistema
web com funcionalidades dinâmicas;

▪ Integrar um SGBD em sistema web, baseando se na linguagem PHP e na classe

PDO, para que o sistema seja capaz de lidar com massas de dados estruturados.

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

◼ As Atividade serão feitas

em GRUPO!
◼ Máximo de 5 pessoas.
◼ Nos dias de apresentação o grupo escolhe: ou todos apresentam ou professor
sorteia um do grupo para apresentar.

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).

Datas sujeitas a adequações! 16

Sobre a Disciplina - Plano de aulas (3003 - Quarta)
◼ 09/08 - 1. Apresentação e Introdução. ◼ 04/10 - Entrega Atividade 1.
◼ 16/08 - 2. Listas e Tabelas. ◼ 11/10 – 9. Javascript (vetores).
◼ 23/08 - 3. Formulários. ◼ 18/10 - 10. AJAX e JSON.
◼ 30/08 – 4. CSS, sintaxe e elementos. ◼ 25/10 - 11. PHP pt1.
◼ 06/09 – 5. CSS, formas de inclusão. ◼ 01/11 - 12. PHP pt2.
◼ 13/09 - 6. CSS, responsividade. (Data ◼ 08/11 - Entrega Atividade 2.
alteração grupos).
◼ 15/11 – Feriado.
◼ 20/09 - 7. Javascript. ◼ 22/11 - Entrega Atividade 3.
◼ 29/11 - Feedback.
◼ 27/09 - 8. Javascript (decisão e
◼ 06/12 – Encerramento Disciplina.
repetição).

Datas sujeitas a adequações! 17

Sobre a Disciplina - Plano de aulas (3001 - Quinta)
◼ 10/08 - 1. Apresentação e Introdução. ◼ 05/10 - 8. Javascript (decisão
e repetição).
◼ 17/08 - 2. Listas e Tabelas. ◼ 12/10 – Feriado.
◼ 24/08 - 3. Formulários. ◼ 19/10 - Entrega Atividade 1.
◼ 31/08 – 4. CSS, sintaxe e elementos. ◼ 26/10 - 9. Javascript (vetores).
◼ 07/09 – Feriado. ◼ 02/11 - Feriado.
◼ 14/09 - 5. CSS, formas de inclusão. ◼ 09/11 - 10. AJAX e JSON.
◼ 21/09 - 6. ◼ 16/11 – 11. PHP pt1.
CSS, responsividade. (Data alteração ◼ 23/11 - 12. PHP pt2.
grupos). ◼ 30/11 - Entrega Atividade 2.
◼ 28/09 - 7. Javascript. ◼ 07/12 – Entrega Atividade 3.

Datas sujeitas a adequações! 18

Sobre a Disciplina
◼ Bibliografia Básica:
◼ DEITEL, Paul J.; DEITEL, Harvey M. Ajax, Rich Internet Applications e
desenvolvimento Web para programadores. São Paulo: Pearson, 2008.
Disponível em: https://plataforma.bvirtual.com.br/Leitor/Publicacao/426/pdf
◼ PLOTZE, Rodrigo. Tecnologias WEB. Rio de Janeiro: SESES, 2015. Disponível em:
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/BF917AFA2
3354BB8A26985491F228012.
◼ TERUEL, Evandro C. HTML 5 Guia Prático. 2ª Ed. São Paulo: Érica, 2014.
Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536519296/.

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

◼ Internet se refere ao sistema de informação global que:

◼ (i) é logicamente ligado por um endereço único global baseado no Internet
Protocol (IP) ou suas subsequentes extensões;
◼ (ii) é capaz de suportar comunicações usando o Transmission Control
Protocol/Internet Protocol(TCP/IP) ou suas subsequentes extensões e/ou outros
protocolos compatíveis ao IP; e
◼ (iii) provê, usa ou torna acessível, tanto publicamente como privadamente,
serviços de mais alto nível produzidos na infraestrutura descrita”.
(COUNCIL, 1995).

23
Internet

◼ Rede de computadores dispersos por todo o planeta que trocam dados

e mensagens utilizando um protocolo comum, unindo usuários
particulares, entidades de pesquisa, órgãos culturais, institutos militares,
bibliotecas e empresas de toda envergadura.

24
Internet

◼ Acesso amplo a informações;

◼ Comunicação instantânea;
◼ Inclusão digital (pessoas e empresas);
◼ Suporte à diversas áreas:
◼ Saúde;
◼ Aviação;
◼ Agricultura;
◼ Entretinimento;
◼ Etc....

25
Internet

▪ Como seria o mundo sem internet?

26
Internet

◼ Como seria um mundo sem internet?

◼ Colapso rede financeira, crise global, fome.
◼ Comunicação à moda antiga.
◼ Crise nos transportes.
◼ Crise em área da saúde, meteorologia, logística e etc.

27
Internet

◼ O mundo de hoje não consegue ser pensado sem internet.

◼ É a ferramenta mais popular do mundo, pessoas de todas as idades e classes se

comunicam e interagem por ela.

◼ 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

◼ Mas como criamos uma página?

◼ Como podemos nos tornar parte desse universo de valor inestimável?

29
HTML

◼ HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais

básico da web, define o significado e a estrutura do conteúdo.

◼ Linguagem de programação ≠ Linguagem de marcação.

◼ Os documentos HTML são simples arquivos de texto que contêm “tags de

marcação” .

◼ Essas etiquetas definem os elementos da linguagem HTML e os seus conteúdos.

30
HTML

◼ Outras tecnologias além do HTML geralmente são usadas:

◼ Para descrever a aparência/apresentação (CSS);
◼ Ou a funcionalidade/comportamento (JavaScript).

◼ "Hipertexto" refere-se aos links que conectam páginas da Web entre si, seja
dentro de um único site ou entre sites.

◼ Ao carregar conteúdo na Internet e vinculá-lo a páginas participa-se da world wide

web (www), sistema criado para distribuir mundialmente essas informações
organizadas em hipertexto.

31
HTML

◼ Um elemento HTML é separado de outro texto em um documento por "tags", que

consistem no nome do elemento entre "<" e ">".

◼ O nome de um elemento dentro de uma tag não é case sensitive (sensível a

maiúsculas e minúsculas).

◼ 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.

◼ Utilizaremos <!DOCTYPE html>, que indica para o navegador a utilização da versão

mais recente do HTML - a versão 5, atualmente.

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.

◼ A especificação obriga a presença da tag de conteúdo <title> dentro do nosso

<head>

◼ Podemos configurar qual codificação que queremos utilizar em nosso documento

por meio da configuração de charset na tag <meta>

37
Atributos de Tags HTML

◼ Atributos servem para definir uma propriedade de um elemento HTML.

◼ Devem ser colocados sempre na tag de abertura, são compostas de um nome de
atributo, um sinal de igual (=) e um valor de atributo, cercado por aspas duplas (")
ou simples (‘).
◼ 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">
<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.

◼ Uma tag pode ter vários atributos.

39
Tags HTML para o “body”

◼ <h1> a <h6> Define do títulos de 1 até o cabeçalho 6

◼ <p> Para textos comuns pode ser usado parágrafo
◼ <br> Insere uma quebra de linha simples
◼ <hr> Define uma mudança de tema/tópico.
◼ <b> Define um texto em negrito
◼ <i> Define um texto em itálico
◼ <cite> Define uma citação
◼ <blockquote> Define uma citação longa

◼ .... E muitas e muitas outras...pesquisar!!!

◼ Sugestão: https://www.w3schools.com/
40
Tags HTML para o “body”

◼ A tag <a> define um hyperlink, que é usado para ligar de uma página para outra.

◼ A tag <link> define o relacionamento entre o documento atual e um recurso

externo. Usada com mais frequência para vincular CCS externos ou para adicionar
um favicon ao site.

◼ 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

◼ Treinar criação de primeiras páginas com tags apresentadas.

44
Separação de Grupos - Projeto

◼ Tema Geral do Projeto: Sistema de comércio eletrônico, incluindo as

funcionalidades de comunicação com o banco de dados.

45
Referências

◼ COUNCIL, Federal Networking (FNC). FNC Resolution: Definition of "Internet"

1995. Disponível em: https://www.nitrd.gov/historical/fnc/internet_res.pdf .
Acesso em 30 jul 2022.

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/

◼ Elementos HTML. Disponível em: https://developer.mozilla.org/ptBR/docs/Web/HTML/Element.

Acesso em 01 de julho de 2020. (Acesse com o Chrome, clique com o botão direto e selecione traduzir
para o português).
◼ HTML Table of Contents. Disponível em: https://html.spec.whatwg.org/#tocsemantics. Acesso em 01
de julho de 2020. (Acesse com o Chrome, clique com o botão direto e selecione traduzir para o
português).

47
Próxima Aula

◼ Listas e Tabelas HTML.

48