DESENVOLVENDO CONCEITOS DE PROGRAMAÇÃO WEB COM

APLICAÇÕES WEB GAMIFICADAS

Autores:

Ricardo Alexandre Souza de Brito

Silva

Wendel Gabriel França Rocha da

Fonseca

Orientador:

Ubirajara Santos Nogueira

Co-Orientador:

Vanderley Gondim

PETROLINA
2025
SUMÁRIO

1. INTRODUÇÃO 3

2. OBJETIVOS 4

3. JUSTIFICATIVA 4

4. REVISÃO TEÓRICA 4

5. METODOLOGIA 6

6. METAS DO PROJETO 7

7. RESULTADOS ESPERADOS 7

8. CRONOGRAMA 8

9. REFERÊNCIAS 9
 3

1. INTRODUÇÃO

A internet, considerada uma das maiores revoluções tecnológicas da história, transformou a

maneira como as pessoas se comunicam, acessam informações e realizam transações. Suas
tecnologias subjacentes são responsáveis por conectar bilhões de dispositivos e indivíduos em
todo o mundo, promovendo uma era de conectividade sem [Link] Godoi e Araújo
(2019), "o avanço da tecnologia tem proporcionado cada vez mais praticidade e facilidade nas
tarefas do dia a dia. A Internet conecta pessoas em todas as partes do mundo, permitindo novas
formas de comunicação, fácil acesso à informação e entretenimento".Ferramentas como
navegadores, aplicativos online e plataformas de mídia social são possíveis graças à
programação web, que é uma base para o desenvolvimento dessas aplicações.

A programação web envolve o uso de linguagens e tecnologias como HTML, CSS, JavaScript e
PHP para criar interfaces e funcionalidades que tornem uma experiência online rica e interativa.
No entanto, aprender esses conceitos pode ser desafiador, especialmente para iniciantes que
enfrentam uma curva de aprendizado profunda. Nesse contexto, é essencial explorar abordagens
educacionais que tornem o aprendizado mais acessível, dinâmico e envolvente.

Segundo Lourega (2022), "os estudantes que dominam a programação não apenas são capazes
de criar soluções eficazes para desafios complexos, mas também aprendem a abordar problemas
de maneira estruturada e a desenvolver habilidades críticas de análise e depuração".

A sala de aula é um espaço privilegiado para implementar metodologias inovadoras, e a

programação web, com sua relevância crescente, apresenta uma oportunidade única para
desenvolver habilidades técnicas e cognitivas em alunos. Entre as metodologias educacionais
disponíveis, a gamificação se destaca para transformar o aprendizado em uma experiência
interativa e motivadora, a gamificação se destaca como uma estratégia inovadora e eficaz para
engajar e motivar alunos.

Segundo Berssanette e Francisco(2019), "dessa maneira, deve-se considerar que pelo menos
uma parte dos problemas relacionados ao aprendizado de programação pode ter como origem as
práticas docentes desenvolvidas durante o processo de ensino-aprendizagem, ou seja, as
dificuldades intrínsecas aos docentes".

Com isso, ao integrar elementos lúdicos, como desafios, recompensas e níveis progressivos, a
proposta busca facilitar o aprendizado de conceitos fundamentais, como HTML e CSS,
promovendo maior interação e retenção de conhecimento. Além de ensinar habilidades técnicas, o
projeto tem como objetivo estimular o pensamento lógico, o pensamento crítico e a criatividade
dos alunos.

Este projeto, baseado em metodologias ativas, busca integrar esses elementos ao ensino de
fundamentos da programação web. Tecnologias como HTML e CSS são ensinadas de forma
prática e lúdica, permitindo que os alunos compreendam e apliquem conceitos fundamentais
enquanto se envolvem em atividades que estimulam o pensamento lógico, a criatividade e a
colaboração.
 4

2. OBJETIVOS

Geral

Promover um ambiente de capacitação aos alunos do Instituto Federal Campus

Petrolina, da turma do Ensino Médio Técnico em Informática, por meio de aplicações
web gamificadas para desenvolver páginas web funcionais e responsivas, aplicando
conceitos fundamentais de HTML e CSS, além de introduzir a integração com
linguagens de servidor, como PHP, para a construção de aplicações web dinâmicas.

Específicos

● Compreender os fundamentos de HTML e CSS.

● Aprender técnicas de design responsivo.

● Fomentar a criatividade e a autonomia.

● Simular o ambiente de desenvolvimento profissional: Trabalhar com ferramentas como

VS Code, Git e plataformas de versionamento.

3. JUSTIFICATIVA

A implementação deste projeto é amplamente justificada pela necessidade de oferecer aos

alunos um suporte eficaz no ensino de desenvolvimento web, respondendo às crescentes
demandas do mercado e às tendências tecnológicas que moldam a área de tecnologia da
informação.

Segundo Helder (2023), o Brasil enfrentará um déficit de 530 mil profissionais de TI até 2025,
evidenciando um grande descompasso entre a oferta e a demanda de talentos na área. Este
cenário, agravado pela formação anual de apenas 53 mil profissionais contra uma demanda de
800 mil, segundo dados da Brasscom, destaca a urgência de qualificar novos profissionais. O
projeto, portanto, não apenas prepara os alunos para uma carreira promissora, mas também
contribui para mitigar o déficit de habilidades digitais no país, promovendo o desenvolvimento
econômico e social por meio do fortalecimento do setor tecnológico.
 5

4. REVISÃO TEÓRICA

A gamificação, entendida como o uso de elementos de jogos em contextos não relacionados a

jogos, tem ganhado relevância como metodologia ativa no ensino. Segundo Kapp (2012), a
gamificação vai além da simples atribuição de pontos ou recompensas, utilizando dinâmicas e
mecânicas de jogos para engajar, motivar e enriquecer o aprendizado. Diferente de jogos
tradicionais, essa abordagem é estruturada para atender necessidades humanas como desafio,
reconhecimento e pertencimento.

Berssanette e Francisco (2021) realizam uma revisão sistemática sobre metodologias ativas no
ensino de programação, destacando que práticas tradicionais, muitas vezes, não atendem às
necessidades dos estudantes. O trabalho aponta que dificuldades na aprendizagem podem estar
relacionadas a métodos docentes que não promovem a participação ativa dos alunos. Nesse
sentido, metodologias como a gamificação e a aprendizagem baseada em projetos (ABP) se
mostram alternativas promissoras para superar esses desafios.

A pesquisa presente no trabalho de Andrade e Sousa (2022) demonstra que a inclusão de

elementos de jogos, como pontuações e níveis progressivos, aumenta o engajamento dos
estudantes e contribui para a retenção de conhecimento. Esse estudo reforça a importância de
integrar mecânicas lúdicas ao processo educativo, sobretudo em disciplinas técnicas.

Galante et al. (2023) exploram a implementação de bootcamps e minicursos como estratégias

para introduzir a programação a iniciantes. O trabalho enfatiza o uso de ferramentas práticas,
como ambientes de desenvolvimento integrado e repositórios de versionamento (por exemplo, Git
e GitHub), para simular o ambiente profissional e estimular a colaboração entre os estudantes.
Essa abordagem é alinhada com a proposta do projeto de intervenção, que também prioriza a
utilização de tecnologias como o VS Code e o Git.

Por fim, o estudo de Helder (2023) apresenta dados alarmantes sobre o déficit de profissionais
qualificados em tecnologia no Brasil, destacando a importância de projetos educacionais que
incentivem a formação técnica. O autor enfatiza que a capacitação de estudantes no uso de
linguagens de programação, como HTML, CSS e PHP, é essencial para atender às demandas do
mercado e promover o desenvolvimento socioeconômico.
 6

5. METODOLOGIA

O projeto terá como público-alvo uma turma média de 35 alunos do Ensino Médio Técnico em
Informática. A primeira etapa será a aplicação de um formulário diagnóstico para avaliar o nível de
conhecimento prévio da turma, identificando dificuldades e facilidades em relação ao tema. Com
base nos resultados, será estruturado um plano de aulas adaptado às necessidades dos
estudantes, garantindo uma base sólida para todos.

Na sequência, a introdução aos fundamentos da programação começará com uma aula sobre
lógica de programação e algoritmos, preparando os alunos para o raciocínio lógico necessário à
área. Posteriormente, será realizado um treinamento para a configuração e uso da ferramenta
Visual Studio Code (VS Code), abrangendo instalação, organização do ambiente de
desenvolvimento e primeiros passos com projetos simples.

Com os fundamentos estabelecidos, os estudantes serão introduzidos ao HTML, que será

abordado em três aulas. Inicialmente, aprenderam a estrutura básica de uma página web e, em
seguida, aplicaram o conhecimento na criação de seu primeiro site. Para tornar o aprendizado
mais envolvente, a metodologia de gamificação será incorporada, com pontuações atribuídas às
atividades e destaques individuais, incentivando a prática contínua e a participação ativa.

Após o domínio do HTML, o foco será o CSS, que será ensinado em quatro aulas. Nesse módulo,
os alunos aprenderão a estilizar páginas, criar layouts responsivos e corrigir problemas de design.
Além disso, serão introduzidos ao uso de Git e GitHub, ferramentas fundamentais para
versionamento de código e colaboração em projetos. Trabalhando em equipes, os estudantes
aprenderão a importância da colaboração, enquanto utilizam essas ferramentas para registrar e
compartilhar o progresso de suas atividades.

Na etapa seguinte, os alunos serão introduzidos ao PHP, onde aprenderão a integrar a lógica de
programação com HTML e manipular dados em formulários. Durante essas aulas, será aplicada a
metodologia da Sala de Aula Invertida, incentivando o estudo prévio de conteúdos teóricos e
reservando o tempo de aula para atividades práticas, como resolução de problemas e
desenvolvimento de projetos em grupo.

O projeto será marcado pelo desenvolvimento de um projeto final, baseado na metodologia de

Aprendizagem Baseada em Projetos (ABP). Os alunos, organizados em equipes, irão criar um site
completo que resolvia um problema prático. Para estruturar e gerenciar as tarefas, será utilizado o
método Kanban, permitindo maior organização e controle do trabalho. O projeto final será
 7

submetido em repositórios GitHub, possibilitando uma avaliação técnica e colaborativa do

desempenho de cada aluno e equipe.

6. METAS DO PROJETO

● Capacitar os alunos a criar páginas web estruturadas com HTML, estilizadas com CSS e,

opcionalmente, implementar funcionalidades dinâmicas utilizando PHP.

● Incentivar os alunos a desenvolverem projetos originais, como portfólios online ou páginas

de destino, aplicando os conhecimentos adquiridos de forma criativa.

● Estimular o trabalho em equipe e o uso de ferramentas de versionamento, como Git, para

desenvolver habilidades de colaboração e gestão de projetos.

7. RESULTADOS ESPERADOS

● Os alunos deverão adquirir uma compreensão fundamental de HTML, CSS e,

opcionalmente, PHP, reconhecendo a importância dessas linguagens na construção de

páginas web.

● Espera-se que os alunos sejam capazes de criar projetos básicos, como uma página

pessoal ou um blog simples, aplicando os conceitos aprendidos de forma prática e

contextualizada.

● Espera-se que os alunos participem de atividades em grupo, desenvolvendo habilidades

de colaboração e comunicação, essenciais no ambiente profissional de tecnologia.

 8

8. CRONOGRAMA

Etapas Janeiro Fevereiro Março Abril Mai Junho Julho

o
Planejamento do projeto X X X
Escrita do projeto X X X
Execução do projeto X X X X
Aplicação de questionário X X
qualitativo com professor da
turma
Escrita do Artigo X
Mostra pedagógica X

9. REFERÊNCIAS

ANDRADE, Daniel Oliveira; SOUSA, João Vitor Silva de. Code Quest: um ambiente
interativo web para ensino de programação. 2022. Trabalho de Conclusão de Curso
(Graduação) – Universidade Federal do Estado do Rio de Janeiro, Centro de Ciências
Exatas e Tecnologia, Escola de Informática Aplicada, Rio de Janeiro, 2022. Acesso em:
18 jan. 2025.
BAGATINI, Daniela Duarte da Silva. Programa de Pós-Graduação em Informática na
Educação (PPGIE) da Universidade Federal do Rio Grande do Sul (UFRGS). Educ. rev.,
v. 36, 2020. Disponível em: [Link] Acesso em: 18 jan.
2025.

BERSSANETTE, J. H.; FRANCISCO, A. C. de . Metodologias Ativas de Aprendizagem no

Contexto de Ensino-Aprendizagem de Programação de Computadores: uma revisão
sistemática da literatura. Educitec - Revista de Estudos e Pesquisas sobre Ensino
Tecnológico, Manaus, Brasil, v. 7, p. e159821, 2021. DOI: 10.31417/educitec.v7.1598.
Disponível em: [Link]
1598. Acesso em: 18 jan. 2025.

BOTELHO JÚNIOR, Márcio. Plataforma web para conectar monitores e estudantes de

linguagem de programação. 2021. Trabalho de Conclusão de Curso (Graduação) –
Instituto Federal de Educação, Ciência e Tecnologia de São Paulo (IFSP), 2021. Acesso
em: 18 jan. 2025.
 9

ESTIVALET, Gustavo. PsychoWeb: programação para aplicação de experimentos

psicolinguísticos através da Web. 2020. Acesso em: 17 jan. 2025.
GALANTE, G.; BROCARDO, D. A.; GIACOMEL, D. M.; SATO, F. K.; LENSER, G.;
HIGUCHI, G. Y. L.; ALVES, G. A. D.; FAINO, J. C.; QUEVEDO, M. E. A.; PEREIRA, M. F.;
LEITE JUNIOR, W. M.; PACHICO, R. D. F.; ARAUJO, I. C. Impulsionando o Ensino de
Programação: Bootcamp Web e Minicurso para Calouros. Revista ComInG -
Communications and Innovations Gazette, [S. l.], v. 7, n. 1, p. 123–132, 2023. DOI:
10.5902/2448190485415. Disponível em:
[Link] Acesso em: 18 jan. 2025.
GODOI, M. G. de; ARAÚJO, L. S. A INTERNET DAS COISAS: evolução, impactos e
benefícios. Revista Interface Tecnológica, [S. l.], v. 16, n. 1, p. 19–30, 2019. Disponível
em: [Link] Acesso em: 18 jan.
2025.
HELDER, Darlan. Brasil terá déficit de 530 mil profissionais de tecnologia até 2025,
mostra estudo do Google. G1, 31 maio 2023. Disponível em:
[Link]
[Link]. Acesso em: 16 jan.
2025.
KAPP, Karl. The gamification of learning and instruction: game-based methods and
strategies for training and education. Pfeiffer, 2012. Disponível em:
[Link] Acesso em: 09 jan.
2025.

LOUREGA, Luciana Vescia et al. Conjunto estruturado de atividades didáticas para o

ensino introdutório de programação. 2022. Tese de Doutorado. Universidade Federal de
Santa Maria. Acesso em 16 jan. 2025.