DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
APRESENTAÇAO E INTRODUÇÃO
andre.costa@pro.unifacs.br
ANDRÉ COSTA
•  Mestre em Modelagem Computacional e Tecnologia
Industrial
•  MBA em Gestão da Informação e Projetos de Business
Intelligence
•  Bacharel em Sistemas da Informação
•  Cursos de Gestão de Projetos
•  Coordenador da Equipe de Desenvolvimento do ITED/
SENAI-BA
•  Professor Universitário (Todos os cursos de TI)
www.andrecosta.info
A TURMA
E vocês? Qual o perfil da turma?
HORÁRIO
Com ou sem intervalo?
PLANO DE ENSINO
Apresentação do Plano de Ensino
PLANO DE ENSINO
Apresentação do Cronograma
Disponível no Gamifica*
NOVA METODOLOGIA
Utilização de uma nova “plataforma”:
GAMIFICA
http://andrecosta.info/gamifica
GAMIFICA
•  Aulas disponíveis no ambiente
– Slides
– Material de Apoio
– Desafios valendo ponto na plataforma
– Enviar desafio até a véspera da aula
– Conferir arquivo enviado
•  Quem atingir a pontuação mínima ganha
ponto na disciplina
NOTAS
•  NOTA 1:
– Avaliação HTML (em papel) – 8,0
– Gamifica – 2,0
•  Quem atingir a meta de 60 pontos até o dia da
avaliação HTML ganhará 2 pontos na média
•  Quem ficar entre 40 e 59 pontos até o dia da
avaliação HTML ganhará 1 ponto na média
•  Quem ficar com menos de 40 pontos não ganhará
ponto
NOTAS
•  NOTA 2:
– Avaliação PHP (computador) – 5,0
– Trabalho (Desenvolver um Sistema) – 3,0
– Gamifica – 2,0
•  Quem atingir uma nova meta de 70 pontos até o
dia da avaliação PHP ganhará 2 ponto na média
•  Quem ficar entre 45 e 69 pontos até o dia da
avaliação PHP ganhará 1 ponto na média
•  Os 2 primeiros colocados (somando as duas
metas) ganharão 1 ponto extra
Desenvolvimento Web
DESENVOLVIMENTO WEB
SERVIDOR WEB
Instalação do XAMPP
PHP + MySQL
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
ATIVIDADE
•  Fazer o curso de HTML da W3Schools
– www.w3schools.com/html
•  Fazer o seu currículo em HTML
– Utilizar título, lista, imagem, link e tentar
utilizar tabela
DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
HTML – Introdução, Estrutura e Tags
andre.costa@pro.unifacs.br
HTML	-	História
HTML	-	História	
•  HTML - HyperText Markup Language
–  Não é uma linguagem de programação
–  É uma linguagem de marcação
•  Criado pelo Físico Tim Berners-Lee em
1980
•  Tornou-se pública em 1991
•  Lançado o HTML 2.0 em 1994
HTML	-	História	
•  Lançado	o	HTML	3.2	em	1996	em	man.do	
pela	W3C	(World	Wide	Web	Consor.um)	
•  Lançado	o	HTML	4.0	em	1997	e	lançado	uma	
errata	em	1999	com	o	HTML	4.01	
•  Lançado	em	2008	o	HTML	5
HTML	-	História	
Tim Berners-Lee
HTML	-	História	
HTML	Cross	Browser
HTML	-	História	
Exemplo	de	Incompa.bilidade
HTML	-	História
HTML	-	Estrutura
HTML	-	Estrutura	
<tag	atributo=“valor”>conteúdo</tag>	
ou	
<tag	atributo=“valor”	>	
	
CERTO:	
<tag_1><tag_2>texto</tag_2></tag_1>	
ERRADO	
<tag_1><tag_2>texto</tag_1></tag_2>
HTML	-	Estrutura
HTML	-	Estrutura
HTML	-	Tags
HTML	-	Tags	
<h1>Título	1</h1>	
<h2>Título	2</h2>	
													…	
<h6>Título	6</h6>
HTML	-	Tags	
<p>Parágrafo	1</p>	
<p>Parágrafo	2</p>
HTML	-	Tags	
<p>Parágrafo	com	<b>Negrito</b>,	<i>Itálico</i>	
e	<u>sublinhado</u>.</p>
HTML	-	Tags	
<p>Parágrafo	com	<br><b>Negrito</b>,	<br><i>Itálico</i>	e	
<br><u>sublinhado</u>.</p>
HTML	-	Tags	
•  texto	texto	<hr>	texto	texto
HTML	-	Tags	
•  <center>texto	centralizado</center>
HTML	-	Tags	
•  <fieldset>	
						<legend>Legenda</legend>	
						texto	
					</fieldset>
HTML	-	Tags	
•  <ul>	
						<li>Item	1</li>	
						<li>Item	2</li>	
					</ul>
HTML	-	Tags	
•  <ol>	
						<li>Item	1</li>	
						<li>Item	2</li>	
					</ol>
HTML	-	Tags	
•  <img		src=“figura_teste.gif”	>
HTML	-	Tags	
•  <a	href=“pagina.html”>Link	para	Página</a>
HTML	-	Tags	
Mão	na	massa!		
	
Desenvolva	em	HTML	a	página	de	uma	banda	
contendo:	Foto,	discografia,	história	e	vídeo.

Apresentação + html (tags)