O documento apresenta o plano de ensino da disciplina Desenvolvimento de Aplicações para Web ministrada pelo professor André Costa. Ele descreve as informações sobre o professor, o cronograma da disciplina disponível na plataforma Gamifica, a nova metodologia de ensino utilizando a plataforma Gamifica e o sistema de avaliação e bônus com base na pontuação obtida nessa plataforma.

1. Apresentação da Disciplina
Desenvolvimento de Aplicações para Web
Prof. MSc. André Costa - andre.costa@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
(Está no Blackboard)

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 ou Vídeos
• Material de Apoio
• Desafios valendo pontos 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
• AV 1:
• Avaliação HTML (em papel) – 8,0
• Gamifica – 2,0
• Quem atingir a meta de 60 pontos até a AV1 ganhará 2 pontos na média
• Quem ficar entre 40 e 59 pontos até a AV1 ganhará 1 ponto na média
• Quem ficar com menos de 40 pontos até a AV1 não ganhará ponto
• Quem ficar em primeiro no ranking até a AV1 ganhará 1 ponto extra
• Essa meta pode mudar, conferir no ambiente.

10. NOTAS
• AV 2:
• Avaliação PHP (computador) – 4,0
• Trabalho (Desenvolver um Sistema) – 4,0
• Gamifica – 2,0
• Quem atingir a meta de 70 pontos até a AV2 ganhará 2 pontos na média
• Quem ficar entre 45 e 69 pontos até a AV2 ganhará 1 ponto na média
• Quem ficar com menos de 40 pontos até a AV2 não ganhará ponto
• Quem ficar em primeiro no ranking até a AV2 ganhará 1 ponto extra
• A pontuação da Meta 1 é zerada
• Essa meta pode mudar, conferir no ambiente.

11. Desenvolvimento Web

12. DESENVOLVIMENTO WEB

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

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. CONTEÚDO COMPLEMENTAR
• Fazer o curso de HTML da W3Schools
• www.w3schools.com/html

26. HTML – Introdução, Estrutura e Tags
Desenvolvimento de Aplicações para Web
Prof. MSc. André Costa - andre.costa@unifacs.br

27. HTML – Introdução

28. HTML – Introdução
• 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 - Introdução
• Lançado o HTML 3.2 em 1996 em mantido pela W3C (World Wide Web
Consortium)
• 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 - Introdução
Tim Berners-Lee

31. HTML - Introdução
HTML Cross Browser

32. HTML - Introdução
Exemplo de Incompatibilidade

33. HTML - Introdução

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
Título do Conteúdo
<h1>Título 1</h1>
<h2>Título 2</h2>
…
<h6>Título 6</h6>

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

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

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

43. HTML - Tags
Impressão de Linha
texto texto <hr> texto texto

44. HTML - Tags
Centralização
<center>texto centralizado</center>

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

46. HTML - Tags
Lista Não Ordenada
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

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

48. HTML - Tags
Imagem
<img src=“nome_figura.jpg” >

49. HTML - Tags
Link (Âncora)
<a href=“pagina.html” target=”_blank”>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.

51. Prof. MSc. André Costa
andre.costa@unifacs.br