DESENV.

WEB EM
HTML5, CSS,
JAVASCRIPT E PHP

Profº: Luiz Felipe Cirqueira dos Santos

 Sobre mim:
FORMAÇÃO ACADÊMICA:
GRADUAÇÃO EM SISTEMAS DE INFORMAÇÃO PELA UNIT;
PÓS-GRADUAÇÃO EM ARQUITETURA E INFRAESTRUTURA DE T.I PELA FAVENI;
PÓS-GRADUAÇÃO EM GESTÃO DE T.I PELA UNINTER;
MESTRANDO EM CIÊNCIA DA COMPUTAÇÃO PELA UFS.

Experiência:
Linkedin: https://www.linkedin.com/in/luiz-felipe-cirqueira-dos-santos-4662a2b9/
Github: https://github.com/luizfelipecirqueira

Contato: [email protected]
Ementa
Principais tópicos discutidos nesta
matéria
LINGUAGEM DE MARCAÇÃO DE HYPERTEXTO ­HTML;
LINGUAGEM DE MARCAÇÃO E ESTILOS ­CSS;
LINGUAGEM JAVASCRIPT;
PROGRAMAÇÃO DE PÁGINAS DINÂMICAS COM AJAX & PHP;
CRIAÇÃO DE UM CRUD.
 Objetivos Gerais

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;

­ plicar características de estilo a páginas WEB, utilizando a

A
linguagem de marcação de estilos (CSS3), para praticar técnicas
de engenharia de software como facilidade de compreensão,
reutilização de código, manutenibilidade e interoperabilidade;
 Objetivos Gerais
Empregar programabilidade em páginas web, utilizando
linguagem Javascript, mais usada no mercado, para o
desenvolvimento de um sistema web com funcionalidades
dinâmicas;

­ mpregar programabilidade em páginas web, utilizando

E
linguagem AJAX e PHP, bastante comum em sistemas legado,
para o desenvolvimento de um sistema web com funcionalidades
dinâmicas;
 Objetivos Gerais

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.
 Como serão as aulas?
A disciplina adotará o modelo de aprendizagem
baseada em problemas;

Realização da Atividade Prática Supervisionada, que

são atividades práticas realizadas em laboratórios,
bibliotecas e trabalhos individuais e/ou em grupo que
fazem parte do ecossistema de aprendizagem global e
local.
 Temas que iremos abordar:
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
 Temas que iremos abordar:
3. LINGUAGEM JAVASCRIPT
3.1 APRESENTAÇÃO DO CONCEITO DE PROGRAMAÇÃO CLIENT­SIDE
VERSUS SERVER-SIDE
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
 Temas que iremos abordar:
5. CRIAÇÃO DE UM CRUD (ATIVIDADE PRÁTICA
SUPERVISIONADA)
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
 Como será a avaliação?
O processo de avaliação oficial se dá através de NOTA FINAL ÚNICA,
estabelecida ao fim do semestre;
As avaliações poderão ser realizadas por meio de atividades teóricas
e/ou práticas, e realização de projetos ou trabalhos, representando
atividades acadêmicas de ensino, de acordo com as especificidades da
disciplina, permitindo desta forma avaliar a evolução do aluno no
desenvolvimento das competências e na construção do conhecimento
alvo da disciplina;
A soma de todos os instrumentos que possam vir a compor o grau final
da AV não poderá ultrapassar o grau máximo de 10 (dez) pontos.
 Para aprovação do aluno
Atingir resultado igual ou superior a 6,0;

Frequentar, no mínimo, 75% das aulas

ministradas.
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/B
F917AFA­2335­4BB8­A269­85491F228012
TERUEL, Evandro C. HTML 5 Guia Prático. 2a Ed. São Paulo: Érica,
2014. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536519296/
Bibliografia Complementar
FLANAGAN, David. JavaScript: O Guia Definitivo. 6a 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/846BB14A­57D1­ 4236­-
B334­17A19E0A77D6
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. 7a
Ed. São Paulo: Érica, 2013. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536505633/
LINGUAGEM DE MARCAÇÃO DE
HYPERTEXTO ­HTML
INTRODUÇÃO
Linguagem criada para criar e estruturar páginas na web;
Criada por Tim Berners-Lee, cientista da computação
britânico, em 1991;
Desenvolveu o HTML enquanto trabalhava no CERN
(Organização Europeia para a Pesquisa Nuclear);
O objetivo era facilitar a partilha de documentos e
informações entre pesquisadores.
Qual o Intuito da Criação?

Facilitar a Partilha de Informação;

Uniformizar a Formatação;
Acessibilidade.
Facilitar a Partilha de Informação

Permitir que documentos fossem

acessíveis e interligados através de
hyperlinks;
Criação de um sistema de
navegação entre diferentes páginas.
Uniformizar a Formatação

Padronização de imagens, textos e

demais conteúdos na web.
Acessibilidade

Tornar a informação acessível de

forma simples e eficiente;
Informação acessível a partir de
qualquer computador conectado à
internet.
Princípios do HTML

Simplicidade;
Interoperabilidade;
Flexibilidade;
Simplicidade

Projetado para ser fácil de aprender e

usar;
Sem necessidade de conhecimento
avançado em programação.
Interoperabilidade

Linguagem independente de
plataforma;
Pode ser utilizado em qualquer
plataforma e em qualquer navegador.
Flexibilidade

Permite a incorporação de diversas

mídias e tecnologias;
CSS para estilização;
Javascript para interatividade.
Estrutura Básica
TAG

Elemento de marcação;
Define o conteúdo e a estrutura de
uma página web;
Cada tag html descreve parte de um
conteúdo e como renderizá-lo.
TAG

Geralmente vem em pares;

Uma tag para abertura e uma para
fechamento;
Seus elementos ficam entre colchetes
angulares (<></>);
Principais Tags e atributos

<!DOCTYPE html> -> Declaração do tipo de

documento, referenciando que é um documento Html5;
<html> -> Raiz do documento html;
lang -> Atributo que especifica o idioma do conteúdo
do documento;
<head> -> Contêm metadados sobre o documento:
links para arquivos CSS, JS;
título.
Principais Tags e atributos
<title> -> título do documento;
<body> -> corpo do documento;
<header> -> conteiner para conteúdo introdutório;
<footer> -> rodapé do documento ou de uma seção;
<h1> a <h6> -> definir títulos e sub-títulos;
<nav> -> definição para links de navegação;
<ul> -> Lista não ordenada;
<ol> -> Lista ordenada;
<li> -> Define um item da lista;
Principais Tags e atributos

<a> -> definiçao de hiperlink;

href -> atributo para inclusão de url;
<main> -> Especifica o conteúdo principal do
documento;
<section> -> Define seções no documento;
id -> Atributo para identificador único de uma seção;
<p> -> tag para parágrafo;
Principais Tags e atributos

class -> Especifica uma ou mais classes, sendo

utilizado para aplicação de estilos CSS;
style -> Declaração de estilo inline;
src -> Especifica um caminho para um arquivo
externo;
alt -> Fornecimento de texto alternativo, usado em
imagens.
Exemplo 1 - Minha primeira página Html
Exemplo 2 - Listas ordenadas e não ordenadas
Exemplo 2 - Listas ordenadas e não ordenadas
Exemplo 3 - Blog de IA
Exemplo 3 - Blog de IA
Desafio 1 - Portifólio
Criar uma página de portifólio simples que
apresenta informações sobre você, seus projetos e
como entrar em contato.
Desafio 2 - Página de Receita
Criar uma página que apresenta uma receita
simples, com uma lista de ingredientes e instruções
de preparo.
Dúvidas