O documento apresenta uma aula sobre desenvolvimento de aplicações web ministrada pelo professor André Costa. Ele introduz a plataforma Gamifica que será utilizada para disponibilizar material e desafios, e explica a dinâmica de avaliação com atribuição de pontos. Também é apresentado o plano de ensino com o cronograma das aulas.

1. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
APRESENTAÇAO E INTRODUÇÃO
andre.costa@pro.unifacs.br

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

3. A TURMA
E vocês? Qual o perfil da turma?

4. HORÁRIO
Com ou sem intervalo?

5. PLANO DE ENSINO
Apresentação do Plano de Ensino

6. PLANO DE ENSINO
Apresentação do Cronograma
Disponível no Gamifica*

7. NOVA METODOLOGIA
Utilização de uma nova “plataforma”:
GAMIFICA
http://andrecosta.info/gamifica

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

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

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

11. Desenvolvimento Web

12. DESENVOLVIMENTO WEB

13. SERVIDOR WEB
Instalação do XAMPP
PHP + MySQL

14. INSTALAÇÃO DO XAMPP

15. INSTALAÇÃO DO XAMPP

16. INSTALAÇÃO DO XAMPP

17. INSTALAÇÃO DO XAMPP

18. INSTALAÇÃO DO XAMPP

19. INSTALAÇÃO DO XAMPP

20. INSTALAÇÃO DO XAMPP

21. INSTALAÇÃO DO XAMPP

22. INSTALAÇÃO DO XAMPP

23. INSTALAÇÃO DO XAMPP

24. INSTALAÇÃO DO XAMPP

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

26. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
HTML – Introdução, Estrutura e Tags
andre.costa@pro.unifacs.br

27. HTML - História

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

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

30. HTML - História
Tim Berners-Lee

31. HTML - História
HTML Cross Browser

32. HTML - História
Exemplo de Incompa.bilidade

33. HTML - História

34. HTML - Estrutura

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

36. HTML - Estrutura

37. HTML - Estrutura

38. HTML - Tags

39. HTML - Tags
<h1>Título 1</h1>
<h2>Título 2</h2>
…
<h6>Título 6</h6>

40. HTML - Tags
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>

41. HTML - Tags
<p>Parágrafo com <b>Negrito</b>, <i>Itálico</i>
e <u>sublinhado</u>.</p>

42. HTML - Tags
<p>Parágrafo com <br><b>Negrito</b>, <br><i>Itálico</i> e
<br><u>sublinhado</u>.</p>

43. HTML - Tags
• texto texto <hr> texto texto

44. HTML - Tags
• <center>texto centralizado</center>

45. HTML - Tags
• <fieldset>
<legend>Legenda</legend>
texto
</fieldset>

46. HTML - Tags
• <ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

47. HTML - Tags
• <ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

48. HTML - Tags
• <img src=“figura_teste.gif” >

49. HTML - Tags
• <a href=“pagina.html”>Link para Página</a>

50. HTML - Tags
Mão na massa!
Desenvolva em HTML a página de uma banda
contendo: Foto, discografia, história e vídeo.