TCC3

SERVIÇO PÚBLICO FEDERAL
UNIVERSIDADE FEDERAL DO SUL E SUDESTE DO PARÁ

INSTITUTO DE CIÊNCIAS EXATAS (ICE)
CURSO DE LICENCIATURA EM FÍSICA INTERVALAR
GEAN LUCAS DA CONCEIÇÃO SOUZA
FERRAMENTAS TECNOLÓGICAS NO ENSINO DA FÍSICA: HTML5, CSS

E JAVASCRIPT NA CINEMÁTICA.
Marabá – Pa
2017
FERRAMENTAS TECNOLÓGICAS NO ENSINO DA FÍSICA: HTML5, CSS

E JAVASCRIPT NA CINEMÁTICA
Trabalho de conclusão de curso apresentado à Universidade

Federal do Sul e sudeste do Pará, como requisito parcial para
obtenção do Grau de Licenciado Pleno em Física, sob
orientação do Prof. Dr. Tiago Carvalho Martins.
Marabá – Pa
2017
FERRAMENTAS TECNOLÓGICAS NO ENSINO DA FÍSICA: HTML5, CSS E

JAVASCRIPT NA CINEMÁTICA
Data de aprovação: / /
Conceito:
BANCA EXAMINADORA:
Prof. Dr. Tiago Carvalho Martins
Prof. Dr. Narciso das Neves Soares

(examinador)
Prof(a). Dra. Maria Liduína das Chagas

(examinador)
Marabá – Pa
2017
DEDICATÓRIA
“Dedico este trabalho aos meus pais, minha esposa, amigos

de curso e professores que me ajudaram e apoiaram em todos
os momentos difíceis até aqui.”
AGRADECIMENTOS
Agradeço a Deus por me guiar e sustentar diante das dificuldades.

Aos meus pais por me permitirem ter este momento mesmo diante das adversidades presentes. A
minha esposa Glauciane que esteve, praticamente, todo o tempo ao meu lado vivendo as
dificuldades e me incentivando a continuar.
Aos meus amigos Maurício, Roberta, Ruan e Rafael pelos momentos difíceis, e várias horas de
estudo, superados durante todo o curso.
Ao meu orientador Prof. Tiago Carvalho Martins que dedicou seu tempo e conhecimento para
tornar este trabalho possível.
A todos que direta ou indiretamente fizeram parte da minha formação, o meu muito obrigado.
1
RESUMO
Invariavelmente, desde a antiguidade o ser humano busca mecanismos para se adaptar ao

meio em que vive, construindo, inovando e criando a partir do que ele encontra na natureza,
esse processo é contínuo e evolutivo, partindo deste princípio este conteúdo busca analisar,
destacar e exemplificar uma destas ferramentas, a internet, estudando sua estrutura de
linguagem e aplicando ao ensino da física. Desse modo, este trabalho, de maneira
introdutória, descreve as principais característica de html, css e javascript, seus elementos e
suas aplicações práticas (visuais), pois os mesmos são responsáveis pela comunicação na
rede. Ao final, percebemos que o ensino da cinemática é bem mais dinâmico e atraente ao
estudante através de HTML (Linguagem de Marcação de Hipertexto), pois o mesmo nos
permite demonstrar, teoricamente, o conteúdo e ainda vai além, através de simulações e
interatividades que javascript nos permite elaborar. É um meio de fácil compreensão e pode
contribuir ainda mais para evolução do ensino didático em geral, é uma linguagem que
transcende a sala de aula, e permite o acesso a qualquer instante para o qualquer pessoa.
Tornando assim uma importante ferramenta para aproximar o conhecimento ao leitor e
estudante, demonstrando mais um avanço para o ensino e aprendizado.
Palavras-chave: Internet, html, css, javascript, mecânica, cinemática.

2
ABSTRACT
Invariably, since antiquity the human being seeks mechanisms to adapt to the environment in
which he lives, building, innovating and creating from what he finds in nature, this process is
continuous and evolutionary, starting from this principle this content seeks to analyze,
highlight and To exemplify one of these tools, the internet, studying its language structure and
applying to the teaching of physics. In this way, this work, in an introductory way, describes
the main characteristic of HTML, css and JavaScript, its elements and its practical (visual)
applications, since they are responsible for the communication in the network. In the end, we
realize that the teaching of kinematics is much more dynamic and attractive to the student
through the HTML, because it allows us to theoretically demonstrate the content and even
goes beyond, through simulations and interactivities that JavaScript allows us to elaborate. It
is a medium that is easy to understand and can contribute even more to the evolution of
didactic education in general, it is a language that transcends the classroom, and allows access
at any moment to anyone. Thus making an important tool to bring knowledge to the reader
and student, demonstrating another advance for teaching and learning.
Keywords: internet, HTML, css, JavaScript, mechanics, kinematics.

3
LISTA DE FIGURAS
Figura 1: Exemplo URL do documento....................................................................................13

Figura 2: Exemplo de cabeçalho...............................................................................................14
Figura 3: Exemplo de estilo de parágrafo.................................................................................15
Figura 4: Exemplo estilo de parágrafo......................................................................................17
Figura 5: Exemplo Canvas........................................................................................................19
Figura 6: Demonstração de queda livre....................................................................................26
Figura 7: Basquete....................................................................................................................28
Figura 8: Solução......................................................................................................................29
Figura 9: Semáforo....................................................................................................................30
Figura 10: Lançamento.............................................................................................................31
Figura 11: Solução....................................................................................................................31
4
LISTA DE GRÁFICOS
Gráfico 1: Velocidade em função do tempo…………………………………………………..24
Gráfico 2: Posição em relação ao tempo………………………………...……………………25
Gráfico 3: Aceleração em função do tempo………………………....………..………………25
Gráfico 4: Lançamento oblíquo………………………………………………………………27

5
LISTA DE TABELAS
Tabela 1: Versões – HTML.......................................................................................................15

Tabela 2: Propriedades – CSS...................................................................................................16
Tabela 3: Equivalência de Unidades de Velocidade..................................................................20
6
LISTA DE ABREVIATURAS E SIGLAS
TIC – Tecnologias de informação e comunicação
IBGE – Instituto Brasileiro de Pesquisa e Estatística
Cgi.br – Comitê Gestor da Internet no Brasil
Cetic.br – Centro Regional de Estatuto para o Desenvolvimento da Sociedade da Informação
Nic.br – Núcleo de informação e Coordenação do ponto
HTML – Linguagem de Marcação de Hipertexto
SVG – Scalable Vector Graphics/ Gráficos vetoriais escaláveis
CSS – Cascating Style Sheets
WWW – World Wide Web
SGML – Standard Generalized Markup Language
MRU – Movimento Retilíneo Uniforme
MRUV – Movimento Retilíneo Uniformemente Variado

7
SUMÁRIO
1. INTRODUÇÃO.....................................................................................................................9
2. OBJETIVOS........................................................................................................................10
2.1. OBJETIVO GERAL..........................................................................................................10
2.2. OBJETIVOS ESPECÍFICOS.............................................................................................10
3. TECNOLOGIAS PARA O ENSINO DA FÍSICA: INTERNET, HTML5, CSS E
JAVASCRIPT...........................................................................................................................10
3.1. INTERNET........................................................................................................................10
3.1.1. Internet e o ensino...........................................................................................................11
3.2. HTML.................................................................................................................................11
3.2.1. Definição.........................................................................................................................11
3.2.2. Noções de HTML..........................................................................................................12
3.2.3. Criando documentos em HTML..................................................................................12
3.2.4. Elementos básicos..........................................................................................................12
3.2.5. Título (<TITLE>…</TITLE>)....................................................................................13
3.2.7. Parágrafo (<p> … </p>)...............................................................................................14
3.4. CSS.....................................................................................................................................16
3.4.1 Grupos de propriedades CSS........................................................................................17
3.4.2. Diferenças entre CSS e HTML....................................................................................17
3.5. JAVASCRIPT.....................................................................................................................18
3.5.1. <Canvas>.......................................................................................................................18
3.5.2. Funções javascript.........................................................................................................19
3.5.3. If...else.............................................................................................................................20
3.5.4. Swicth.............................................................................................................................20
3.5.5. Executando o código javascript...................................................................................21
3.5.6. Relação HTML, CSS e Javascript...............................................................................21
4. ROTEIRO DESCRITIVO: AULA DE CINEMÁTICA..................................................21
4.1. MECÂNICA......................................................................................................................21
4.2. CINEMÁTICA...................................................................................................................21
4.2.1. Sistema de referência....................................................................................................22
4.2.2. Movimento e repouso....................................................................................................22
4.2.3. Velocidade......................................................................................................................22
8
4.2.3.1. Unidades de equivalências de velocidade.................................................................22

4.2.4. Aceleração......................................................................................................................23
4.2.4.1. Unidade de aceleração...............................................................................................23
4.2.6. Movimento retilíneo uniformemente variado (MRUV).............................................24
4.2.6.1. Relações e gráficos para MRUV...............................................................................24
4.2.7. Queda livre.....................................................................................................................25
4.2.8. Lançamento vertical para cima...................................................................................26
4.2.9. Lançamento oblíquo.....................................................................................................26
5. QUESTÕES INTERATIVAS.............................................................................................27
5.1 PROBLEMA 1....................................................................................................................27
5.2 PROBLEMA 2....................................................................................................................29
5.3. PROBLEMA 3...................................................................................................................30
6. CONSIDERAÇÕES FINAIS.............................................................................................32
APÊNDICE – CONTEÚDO INTERATIVO............................................................................32
Apêndice A................................................................................................................................32
Apêndice B...............................................................................................................................41
Apêndice C................................................................................................................................44
REFERÊNCIAS......................................................................................................................47
9
1. INTRODUÇÃO
Desde os primórdios o ser humano tem buscado novas ferramentas para evoluir e tornar
acessível seu conhecimento de mundo, desde a descoberta do fogo e utilização do mesmo,
percebemos que somos seres evolutivos e insaciáveis quanto a conhecer o que nos cerca. A
tecnologia, como uma destas ferramentas, traz consigo o encontro da ciência com a
engenharia, buscando métodos e mecanismos que contribuam para este avanço constante e
inexorável.
Segundo Chaves, O C Eduardo, em seu artigo “A tecnologia e a Educação”,
Há muitas formas de compreender a tecnologia. Para alguns ela é fruto

do conhecimento científico especializado. É, porém, preferível
compreendê-la da forma mais ampla possível, como qualquer artefato,
método ou técnica criado pelo homem para tornar seu trabalho mais
leve, sua locomoção e sua comunicação mais fáceis, ou simplesmente
sua vida mais satisfatória, agradável e divertida. Neste sentido amplo,
a tecnologia não é algo novo — na verdade, é quase tão velha quanto
o próprio homem, visto como homem criador (homo creator).
(Chaves, 1999, pág. 1).
Sabe-se que nem todas as ferramentas tecnológicas inventadas são aferidas à educação,
algumas pouco, ou de nenhum modo, se aproximam de tal conceito. Entretanto, nunca antes
se teve o conhecimento tão próximo e acessível, ferramentas como computadores, tabletes,
celulares e internet permitem a qualquer pessoa dotada de um pouco de curiosidade a
possibilidade de conhecer e entender o mundo que o cerca.
De maneira sucinta, percebe-se que a tecnologia é evolutiva e imprescindível ao ser humano,

tornando-o mais capaz de compreender e desenvolver técnicas para aprimorar seu
conhecimento, elevando assim o patamar da ciência e suas tecnologias.
Este trabalho estenderá os conceitos e princípios básicos para que possamos relacionar este
avanço e trazê-lo como ferramenta imprescindível para o ensino, buscando demonstrar, em
detalhes, algumas ferramentas utilizadas hoje em dia para aproximar o conteúdo para cada
pessoa, de maneira simples, acessível e compreensível.
10
2. OBJETIVOS
2.1. OBJETIVO GERAL
Compreender a importância das ferramentas tecnológicas para o ensino, demonstrando a
estrutura básica de HTML, CSS e javascript. Posteriormente, demonstrar uma aula abordando
o estudo da cinemática e seus elementos.
2.2. OBJETIVOS ESPECÍFICOS

• Compreender, de maneira sucinta, o avanço das ferramentas tecnológicas.
• Demonstrar dados estatísticos que comprovem o avanço dessas tecnologias.
• Compreender a importância da internet como ferramenta de ensino atualmente.
• Entender sobre HTML, seus elementos básicos e sua estrutura básica.
• Compreender a linguagem CSS e Javascript e suas estruturas
• Demonstrar uma aula sobre mecânica, em especial cinemática e alguns de seus

elementos.
• Analisar exercícios que comprovem o estudo elaborado e abordado neste trabalho.
3. TECNOLOGIAS PARA O ENSINO DA FÍSICA: INTERNET, HTML5, CSS E

JAVASCRIPT.
3.1. INTERNET
Conhecida como rede mundial de computadores, a internet foi criada em meio a guerra fria
para fins militares, serviu como umas das formas das forças armadas do governo norte-
americano de ter, e manter, comunicações em caso de ataques inimigos que, eventualmente,
pudessem destruir os meios convencionais de comunicação.
Com o passar dos anos, necessariamente nas décadas de 1970 e 1980, a internet tornou-se um
importante meio de comunicação acadêmico, servindo a professores e universitários dos
EUA, onde eles trocavam ideias, mensagens e arquivos nesse novo meio de comunicação. O
avanço tornou-se ainda mais vertiginoso quando, na década de 1990, o engenheiro inglês Tim
Bernes-Lee desenvolveu o www (World Wide Web), permitindo assim o a utilização de uma
interface gráfica mais dinâmica e visualmente mais interessante, e principalmente mais
acessível a população em geral.
11
A partir daí, a década de 1990, tornou-se a era da disseminação da internet. Desde então,
surgiram novas ferramentas para facilitar o acesso em meio a essa plataforma, como os
browsers (navegadores), e, que, nos dias atuais, tornaram-se compatíveis com outras
tecnologias, como, por exemplo, smartphones, TVs e tablets. A internet passou a ser utilizada
por todas as classes sociais, independente de idade, cor ou gênero, como meio de
disseminação de conhecimento e materiais de estudo, ou meio de interação social com o
advento das redes sociais.
No Brasil, pesquisas feitas pelo (Cgi.br), (Cetic.br), (Pnad 2014 – IBGE) e (Nic.br) revelam
que 58% da população brasileira utiliza internet, resultando em mais de 102 milhões de
internautas, e mais, em 2014, 77,9% da população brasileira (acima de 9 anos) acessaram
internet através de um smartphone. De acordo com a pesquisa, o telefone celular é o
dispositivo mais utilizado nos domicílios para acessar internet (89% - dados da TIC, 2015),
seguida por computador de mesa (40%), notebook (39%), tablet (19%), televisão (13%) e
videogame (8%).
3.1.1. Internet e o ensino

Existem hoje vários meios de interação através da internet, o ensino de conteúdos escolares e
acadêmicos nunca antes foi tão acessível a cada estudante. Universidades, escolas, professores
e, até mesmos alunos divulgam todos os dias vários conteúdos de estudo, através de uma
linguagem didática e compreensível na internet, através de vídeos, textos, aplicativos, e etc.
Com relação aos estudantes, dados da TIC – 2014, mostram que o celular era um bem pessoal
para 93,4% dos estudantes da rede privada de ensino e para 66,8% dos da rede pública, que
representavam 74,3% dos estudantes brasileiros em 2014. Esses dados, comprovam que os
celulares, assim como tablets, através da internet, promovem um novo mecanismo de
interação e estudo.
3.2. HTML
3.2.1. Definição
Criado a partir da junção dos padrões Hytime (Hypermedia/Time-based Doumnt Structuring
Language) e SGML (Standard Generalized Markup Language), o HTML (HyperText Markup
Language), linguagem utilizada para criar páginas na Web, define como determinado
elemento deverá ser visualizado em um browser (programa de navegação), não é portanto
uma linguagem de programação, mas sim uma linguagem de formatação e exibição de textos,
12
imagens, vídeos, áudios e animações através de “comandos” popularmente conhecidos como

TAGs.
3.2.2. Noções de HTML

O HTML é embasado no conceito de hipertexto – são conjuntos de elementos – ou nós
ligados por conexões. Tais elementos podem ser, imagens, palavras, áudios, vídeos, tabelas,
etc. Portanto, estes elementos juntos formam uma grande rede de informação. É importante
frisar que estes elementos não são distribuídos de maneira linear, como textos de um livro, a
conexão de hipertexto é algo imprevisto que permite a comunicação de dados, relacionando as
informações dadas.
Entre os anos de 1993 e 1995, mais três versões para HTML foram propostas, sendo HTML+,
HTML2.0 e HTML3.0, com o intuito de trazer mudanças para aprimorar as possibilidades de
linguagem. Desde o começo o HTML foi criado para ser uma linguagem aquém de
plataformas, browsers e os demais meios de acesso. Assim sendo, você cria apenas um código
HTML e este código pode ser lido por vários meios, não contendo, dessa forma, versões
diferentes para diversos dispositivos.
3.2.3. Criando documentos em HTML

Antes de criar um documento HTML, deve-se compreender antes as Tags, que são os
comandos que são utilizados para exibir imagens, textos, vídeos e etc, em uma página de web.
3.2.4. Elementos básicos

Estes são alguns elementos básicos para um documento em HTML:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Título da página</TITLE>
</HEAD>
<BODY>
Corpo do texto
</BODY>
</HTML>
13
Observe o significado de cada comando:
➔ <!DOCTYPE HTML>: Indica para o browser e para outros meios qual a especificação
do código utilizar. O Doctype deve ser a primeira linha de código do documento antes
da Tag HTML.
➔ <HTML> … </HTML>: Indicam o início e o fim do documento, todas as demais tags

devem estar entre esses dois comandos.
➔ <HEAD> … </HEAD>: Abalizam a parte de cabeçalho do documento e nelas estão

compreendidas as informações de configuração da página, ou seja, é onde fica a parte
inteligente da página, os metadados, que são informações sobre a página e conteúdos
ali publicados.
➔ <TITLE> … </TITLE>: Informam o título do documento, que estará visível na barra

superior do browser.
➔ <BODY> … </BODY>: indica o corpo do documento.
3.2.5. Título (<TITLE>…</TITLE>)

Identifica o texto que deverá ser exibido na barra de títulos da página. A partir do momento
em que o usuário entra em um mecanismo de busca como mozila, chrome, opera e etc,
procurando um tema específico, o conteúdo da barra <TITLE> dessa página será a primeira
coisa a ser examinada. Daí a importância de um título que expresse bem o conteúdo da
página. E, caso a página não possua o marcador <TITLE>, ou nele não contenha nada, o
browser assumirá o nome do arquivo.
Exemplo:
<TITLE> Primeiro arquivo HTML</TITLE>
Como fica no Browser:
Figura 1: Exemplo URL do documento.
Fonte: Elaborado pelo autor

14
3.2.6. Cabeçalho (<HEAD>…</HEAD>)
O elemento Head contém a informação geral do documento, conhecido como metadados, ou

meta informação. Meta significa “informação sobre”. O atributo HEADER é o align, ela
indica a orientação/alinhamento do cabeçalho, esquerda (padrão), centralizado, a direita ou
justificado, usando sempre as siglas inglesas, respectivamente, “left”, “center”, “right” e
“justify”.
Exemplo:
<HTML>
<HEAD>
Documento de texto
</HEAD>
Figura 2: Exemplo de cabeçalho
3.2.7. Parágrafo (<p> … </p>)

Para escrever parágrafo em HTML, escreve-se entre as tags <p> … </p> para delimitar ao
browser que o comando representa um parágrafo. Nesta tag também é possível definir o estilo
da fonte, a cor e o alinhamento da mesma, utilizando os comandos style=“color: red; font-
size:300%; text-align: center;”.
Exemplo:
<p style= “color: red; font-size:300%; text-align: center;”>

Estilo do parágrafo </p>
Como fica no browser:

15
Figura 3: Exemplo de estilo de parágrafo

3.3. HTML5
Html5 é uma versão mais recente para HTML4, com algumas correções em relação as versões
anteriores, alguns dos elementos mais interessantes são:
• Elementos semânticos: <header>, <footer>, <article> e <section>.
• Atributos de elementos de formulário: número, data, hora, calendário e gama.
• Elementos gráficos: <svg> e <canvas>.
• Mais tags para substituir scripts.
• Redução de plugins externos
• Elementos multimídia: <áudio> e <vídeo>.
Possui também uma nova API (Interfaces de Programação de Aplicativos), sendo algumas
mais interessantes como: Geolocalização HTML, HTML arrastar e soltar, armazenamento
local HTML e cache de aplicativos HTML.
Com relação a interação, HTML5 se destaca ainda mais que seus antecessores, uma das
características que contribuem para tal façanha é o fato dessa nova versão permitir
diretamente na execução de seus códigos elementos em JavaScript, SVG e Canvas, com isso a
página deixa de ser meramente um book online de leitura, para um ambiente de interação.
Uma outra característica muito importante que HTML5 desempenha é a possibilidade de

criação de apps para diferentes plataformas de mobilidade – IOS, Android e windows. E
levando em conta a mobilidade, essa linguagem também têm uma ótima dinâmica e adaptação
aos aparelhos smartphones, deixando assim de ser apenas uma forma mais sofisticada e
interessante de interagir, para também ser uma ferramenta crucial nos dias atuais.
Veja abaixo a tabela demonstrando a evolução, ao longo dos anos, das versões HTML. Dados
w3schools,
16
Tabela 1: Versões – HTML
Ano Versão
1989 Tim Berners-Lee inventou www
1991 Tim Berners-Lee inventou HTML
1993 Dave Raggett escreveu HTML+
1995 Grupo de trabalho HTML definido HTML 2.0
1997 W3C recomenda: HTML 3.2
1999 W3C recomenda: HTML 4.01
2000 W3C recomenda: XHTML 1.0
2008 WHATWG HTML5 primeiro rascunho público
2012 Padrão WHATWG HTML5
2014 W3C recomenda HTML5
2016 W3C recomenda HTML 5.1
Fonte: w3school/cssref
3.4. CSS
Css é uma abreviatura para Cascading Styles Sheets – Folha de Estilo em Cascata. Em
definição, uma folha de estilos é um conjunto que informa a um programa, responsável pela
formatação de um documento, como organizar e uma página, dispor o texto, e algumas outras
peculiaridades. Em suma, Css é uma linguagem que descreve o estilo de um documento
HTML, ela descreve como os elementos deverão ser exibidos.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgreen;}
h1 { color: black; text-align: center;}
p{ font-family: Arial; font-size: 20px;}
</style>
</head>
17
<body>
<h1>Meu Primeiro Exemplo CSS</h1>
<p>Este é o Parágrafo.</p>
</body>
</html>
Figura 4: Exemplo estilo de parágrafo

O CSS é uma incrível ferramenta para construção de layouts de websites. Permite a projeção
de sites como uma técnica bem mais apurada, e reduz consideravelmente o tempo de trabalho.
Lembrando que se faz necessário noções básicas sobre HTML.
3.4.1 Grupos de propriedades CSS

Tabela 2: Propriedades – CSS
Cor Texto Mesa Transição
Fundo de Fronteiras Decoração de texto Lista de contadores Interface de usuário
Caixa Básica Fontes Animação Multicoluna
Efeitos de filtro Mascaramento Discurso Tabela
Caixa flexível Modo de escrita Transformar Mídia paginada
Fonte: w3schools/cssref
Estas são algumas propriedades Css, cada grupo citado acima têm em si um outro subgrupo
de características, por exemplo, a propriedade tabela possui algumas características como
border-collapse, border-spacing, caption-side, empty-cells e table-layout, onde cada comando
desse influenciará na aparência do documento no browser.
3.4.2. Diferenças entre CSS e HTML

Quando Tim Bernes-Lee criou a World Wide Web, a linguagem HTML era utilizada apenas
para estruturar textos, ou seja, o autor poderia editar seu documento utilizando as tags, como
18
já foi explicado. Com o tempo, com o vertiginoso avanço da web, os designers começaram a
ter a necessidade de ter mecanismos para editar layouts de páginas, de maneira mais prática, e
que poupassem mais tempo, daí a importância de CSS, pois o mesmo é utilizado para
formatar conteúdos já estruturados.
Sendo assim, o CSS dispõe de um mecanismo mais simples e amplos para aparência do
documento, e ao mesmo tempo essa separação de estilos de apresentação de marcação dos
conteúdos permite a manutenção dos sites de maneira mais fácil.
3.5. JAVASCRIPT
JavaScript é uma das linguagens mais clássicas utilizadas na internet, criada pela Netscape em
1995, ela pode ser introduzida em diferentes ambientes, não se limitando apenas aos
navegadores de internet. É uma linguagem simples e leve, e, apesar de não ser muito útil
como uma linguagem independente, ela é facilmente inserida a outros produtos e aplicações,
como browsers da web. Ela consegue interagir com, praticamente, a maioria dos elementos de
um documento HTML, trabalhando com variáveis, gerando resultados, aletrando a aparência
de elementos e o mais interessante, sem a necessidade de recarregamento da página.
Com relação a semelhança com a palavra Java, apesar de possuir alguns pontos em comum,
inclusive o nome, JavaScript e Java não são a mesma coisa, muito menos uma palavra deriva
da outra. JavaScript possui uma flexibilidade maior com relação ao Java, não sendo
necessário, ao programador, declarar uma variável antes de utilizá-la ou de inserir novas
propriedades e métodos a um objeto a qualquer momento.
Javascript suporta elementos de sintaxe de programação estruturada da linguagem C, como

por exemplo, if, while e swicth.
A princípio a função de javascript é escrever funções que são inseridas em páginas HTML e
que interagem com o modelo de objeto de documentos da página, alguns exemplos são abrir
uma nova janela com controle programático sobre seu tamanho, atributos e posição, mudar
imagens a medida que movimenta-se o mouse sobre elas entre outros.
3.5.1. <Canvas>
É um tipo de elemento que pode ser utilizado para desenhar utilizando uma linguagem de
“script”(comumente javascript). Este por exemplo pode ser utilizado para desenhar gráficos,
editar fotos e algumas animações.
19
Canvas foi incrementado a princípio pela Apple para Mac OS X Dashboard e posteriormente
implementado nos browsers safari e google chrome. Utilizar este elemento não é tão difícil,
partindo do princípio de que a pessoa possua algum conhecimento básico sobre html e
javascript. Em alguns navegadores antigos a tag <canvas> não é suportada, o tamanho padrão
de um canvas é de 300px.150px (largura.altura), entretanto, pode-se customizar-se utilizando
propriedades CSS widht e heigth.
Exemplo
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3;">
O seu navegador não suporta tag canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Times New Roman";
ctx.strokeText("Física",20,70);
</script>
</body>
</html>
O resultado será esse
Figura 5: Exemplo Canvas
3.5.2. Funções javascript

Uma função JavaScript é definida como função de palavra-chave, seguido por um nome,
seguido de parênteses (). Observe o exemplo abaixo,
20
Function name (parameter1, parameter2, parameter3, parameter4) {code to be executed}

3.5.3. If...else
O comando If executa uma instrução caso uma condição explicita seja verdadeira. E a
instrução else se a mesma condição for falsa.
Sintaxe
if (condition) {
block of code to be executed if the condition is true
}
Exemplo
Diga “boa noite” se a hora for maior que 18:00.
<!DOCTYPE html>
<html>
<body>
<p>Display "Boa noite!" se a hora for maior que 18:00:</p>
<p id="demo">Boa noite!</p>
<script>
if (new Date().getHours() > 18) {
document.getElementById("demo").innerHTML = "boa noite!";
}
</script>
</body>
</html>
O resultado será
Boa noite
3.5.4. Swicth
A instrução, ou comando, swicth é utilizado para executar diferentes ações com base em
condições diferentes. Sendo assim, é possível disparar determinadas ações a partir do valor de
uma variável.
21
Observe
swicth (expression) {
case n:
code block
break;
case n:
code block
default:
code block
}
3.5.5. Executando o código javascript

É possível perceber a presença de JavaScript no código de uma página da web, quando há a
presença das tags <SCRIPT> … </SCRIPT>, pois é entre elas que as funções do JavaScript
farão efeito no interior da página.
3.5.6. Relação HTML, CSS e Javascript

Observe abaixo, em suma, a caracterização dessas três premissas básicas:
I. HTML serve para definir o conteúdo de páginas da web.
II. CSS é utilizada para especificar o layout das páginas da web.
III. JavasScript é utilizada para programar o comportamento de páginas da web.
4. ROTEIRO DESCRITIVO: AULA DE CINEMÁTICA
4.1. MECÂNICA
A mecânica é a área da física responsável por estudar, descrever e analisar o movimento dos
objetos e partículas. Por motivos de organização do conhecimento, a mecânica é dividida em
duas sub-áreas: a cinemática e a dinâmica, aqui, irei me ater ao ensino da cinemática.
4.2. CINEMÁTICA
A cinemática é a parte, integrante, da mecânica incumbida de estudar o movimento dos
corpos, definindo a posição, velocidade e aceleração do mesmo em dado instante.
22
4.2.1. Sistema de referência

Ao analisarmos e definirmos que um corpo está em movimento, notamos que este corpo altera
sua posição com o passar do tempo. Entretanto, é correto afirmar que o conceito de
movimento é relativo e depende do referencial, um objeto pode mover-se em relação a um
outro, porém, ao mesmo tempo, também pode estar em repouso em relação a um terceiro
objeto.
4.2.2. Movimento e repouso

Um objeto pode ser dito que está em movimento quando o mesmo varia sua posição no
decorrer do tempo. Assim sendo, um ponto material é considerado em movimento quando, em
relação a um dado referencial, sua posição se altera com o passar do tempo. Se sua posição
não mudar, dizemos que o objeto está em um estado de inércia, ou repouso.
4.2.3. Velocidade
Quando um corpo está em movimento em algum sistema, dizemos que o mesmo possui
velocidade. Imagine que, em determinado intervalo de tempo Δ t , o objeto móvel percorra
um espaço Δ s . A razão entre o espaço percorrido, Δ s , e o intervalo de tempo gasto para
percorrê-lo é a velocidade média nesse intervalo de tempo, ou seja,
Δ s−s0
V m = Δs =
t t−t 0
Quanto maior for a velocidade do objeto, mais rápido ele estará.
4.2.3.1. Unidades de equivalências de velocidade

Tabela 3: Equivalência de Unidades de Velocidade
Unidade m/s m/min km/h pés/s pés/min milhas/h nós
m/s 1 60 3.60 3.281 196.85 2.237 1.943
m/min 0.01667 1 0.050 0.05468 3.281 0.03728 0.03238
km/h 0.02778 16.67 1 0.9113 54.68 0.6214 0.5396
Pés/s 0.3048 18.288 1.097 1 60 0.6818 0.5921
Pés/min 0.0051 0.30248 0.01687 0.0183 1 0.01136 0.00987
Milhas/h 0.4470 26.42 1.609 1.467 88 1 0.8684

23
nós 0.5148 30.887 1.8532 1.6889 101.333 1.1515 1
Fonte: Newtoncbraga
As unidades de medida de velocidade mais usadas são km/h (quilômetros por hora), m/s
(metros por segundo) e m/h (metros por hora). No SI (sistema internacional), a velocidade é
medida em metros por segundo.
4.2.4. Aceleração
Se um objeto varia sua velocidade, pode-se afirmar que o mesmo está dotado de aceleração.
Se num intervalo de tempo Δ t , houve uma variação de velocidade (chamada aqui de
Δ v ), definimos a aceleração média ( am ) nesse intervalo como a relação
Δ
am = Δv
t
4.2.4.1. Unidade de aceleração

Segundo o SI, a unidade de medida da aceleração é m/s². Um exemplo, é a aceleração da
gravidade que equivale a aproximadamente 9,8 m/s².
4.2.5. Movimento retilíneo e MRU
O movimento é dito retilíneo quando se dá ao longo de uma reta em relação a um sistema de

referência. Ou seja, quando sua trajetória é uma reta. O movimento é considerado retilíneo e
uniforme (MRU) quando a aceleração ao longo da reta é nula.
a=0
Como sua aceleração é nula, sua velocidade será constante
V =V 0
Portanto, o movimento retilíneo uniforme acontece quando um objeto se movimenta com

velocidade constante numa trajetória retilínea. Escrevendo a equação para a posição da
partícula, em função do tempo, temos
S=S 0+V 0 t
Onde S é a posição inicial da partícula (no tempo t=0 ).

24
4.2.6. Movimento retilíneo uniformemente variado (MRUV)

Temos aqui um conceito um pouco diferente, em que vem a diferenciar o MRU de MRUV,
onde a aceleração, a partir de agora, será diferente de zero ( a≠0 ), ou seja, a velocidade
não será mais constante.
a=Δ v /Δt
4.2.6.1. Relações e gráficos para MRUV

Função horária da velocidade em função do tempo
Gráfico 1: Velocidade em função do tempo
v =v 0 +a t
Função horária da posição em relação ao tempo
1
S=S 0+ v 0 t+ at
2
Gráfico 2: Posição em relação ao tempo

25
No gráfico abaixo temos um objeto deslocando-se em linha reta sobre um plano horizontal.
Onde sua aceleração escalar (a) está em função do tempo (s).
Gráfico 3: aceleração em função do tempo
4.2.7. Queda livre

Queda livre é um movimento vertical, onde um objeto, de massa m, é abandonado no vácuo
ou em uma região em que a resistência do ar seja desprezível, e cai com a aceleração igual a
9,8 m/s². O movimento de queda livre é um MRUV, e com aceleração constante, durante a
queda o movimento é acelerado e o módulo da velocidade aumenta, ou seja, a aceleração é
positiva.
Figura 6: Demonstração de queda livre
Equação horária do espaço para queda livre
1
s= . g t 2
2
Onde: g é a aceleração da gravidade; t corresponde ao tempo e s a altura.

26
Equação horária para a velocidade na queda livre
v =g . t
Onde: v corresponde a velocidade
Equação de Torricelli para queda livre
v 2=2 g Δ s
Quando um objeto é lançado para cima ou para baixo, com uma velocidade inicial ≠ 0,
chamamos o movimento de lançamento vertical, que também é um movimento
uniformemente variado, assim como o de queda livre.
4.2.8. Lançamento vertical para cima

Temos para análise o lançamento vertical para cima, em que um objeto é lançado até que
alcance uma altura máxima, o movimento será acelerado negativamente, e nesse instante sua
velocidade escalar diminuirá até que se anule nesse ponto.
4.2.9. Lançamento oblíquo

Um lançamento, ou movimento, oblíquo acontece parte verticalmente e outra parte
horizontalmente, é um movimento com um ângulo acima da horizontal, onde adotamos as
duas dimensões X e Y.
Gráfico 4: Lançamento oblíquo
Neste movimento a velocidade inicial V 0 , pode ser decomposta em uma velocidade inicial
vertical dada por
V 0 y =V 0 . sen θ
E por uma velocidade inicial na horizontal dada por

27
V 0 x =V 0 . cos θ
No sentido vertical existe aceleração constante e igual à aceleração da gravidade, ou seja,

nesta direção temos um MUV.
Na direção horizontal não se têm aceleração, portanto temos a velocidade nesta componente
constante e igual a zero.
Na direção da componente x temos:
V x =V 0 x =V 0 .cos θ=constante
Função horária para x
V x =V x . t=V 0 . cos θ .t
Na componente vertical (MUV) temos;
V y =V 0 y−g t
Função para velocidade
V y =V 0 . sen θ−g t
Função horária para y
g t2
S y =V 0 sen θ. t−
2
Observação: Nos dados acima, a resistência do ar oi desprezada.
5. QUESTÕES INTERATIVAS
Este capítulo demonstrará de maneira prática e sucinta a forma interativa de javascript em
HTML, demonstrando com algumas questões como se torna possível utilizar esta linguagem
como uma ferramenta de apoio para o educador.
Todas as questões foram criadas de acordo com o conteúdo abordado até aqui, ou seja,
relacionadas a cinemática. Estes exercícios servem de apoio para o aluno, que poderá além de
conhecer a parte teórica, perceber a parte prática e interativa do conteúdo, além de poder
solucionar os exercícios.
5.1 PROBLEMA 1
Observe a figura 7
28
Figura 7: Basquete

Nesta situação, temos um jogador na posição x, para movê-lo para direita utiliza-se o
comando case13, que corresponde a seta com sinal de direita do teclado do computador,
temos uma velocidade inicial de 5 m/s que pode variar para maior conforme se pressionar a
tecla w e menor com a tecla Q do teclado, e o ângulo β, que pode ser ajustado com as teclas
para baixo e para cima do teclado.
O objetivo central deste exercício é encontrar a distância e a velocidade para que a bola atinja
o alvo.
Dada a equação
d
t=
V 0 cos β
Onde t é o tempo, d a distância, V 0 a velocidade inicial do lançamento e cosβ o ângulo, o

aluno poderá calcular e encontrar o tempo que a bola deverá percorrer até acertar a cesta.
Dada a função horária para a distância
v 2 sen (2β)
d=
2g √ 2g h
.[1+ 1− 2 2 ]
V 0 sen β
O aluno poderá encontrar a distância, em metros, para que o jogador acerte a cesta de acordo
com os dados estabelecidos.
29
Figura 8: Solução
Observe o exemplo da figura 8, para que a bola acerte o alvo a uma distância de 6 m, com um
ângulo β de 45º, é necessária uma velocidade inicial de 8,7 m/s, com estes dados o alvo será
atingido em um tempo de 0,98 s.
5.2 PROBLEMA 2
A extremidade esquerda da linha vermelha é o ponto em que um caminhoneiro inicia a
frenagem. Mesmo utilizando a máxima frenagem possível, o caminhão parou exatamente em
uma posição na eminência de ultrapassar o sinal vermelho. Qual módulo da desaceleração a,
se no momento da frenagem, o caminhão estava a 62,18 km/h?
30
Figura 9: Semáforo

Como pode ser observado na figura 9, temos uma simulação onde se pede o módulo da
desaceleração de um caminhão quando sua velocidade for de 62.18 km/h. No canto superior
esquerdo da figura é possível ver uma caixa, criada com o código <button
onclick="Verificar()">Verificar</button><br> onde o aluno informará um valor para que o
caminhão não ultrapasse o sinal vermelho, se o valor estiver incorreto será gerado um alerta
em forma de caixa de diálogo dizendo “você ultrapassou o sinal vermelho”.
Utilize a equação abaixo para encontrar a aceleração.
V 20
a=
2.d
Caso o valor informado esteja correto, o caminhão percorrerá a distância e começará a

desacelerá no ponto indicado ate sua velocidade for zero.
5.3. PROBLEMA 3
A extremidade esquerda da linha branca acima é o ponto em que um paraquedista inicia o
lançamento. Qual a velocidade inicial do lançamento V0 para que o paraquedista atinja o
círculo vermelho sobre o prédio?
Observe a figura 10
31
Figura 10: Lançamento

Utilize a equação abaixo
d
V 0=
√2. h
g
Figura 11: Solução

Neste caso a velocidade inicial para que o paraquedista caísse exatamente sobre o alvo seria
de 42.91 m/s.
32
6. CONSIDERAÇÕES FINAIS
O objetivo deste trabalho foi elaborar um material didático para uma nova abordagem no
ensino da cinemática, considerando as ferramentas disponíveis, no caso, através do HTML,
que utiliza alguns meios para edição, como o CSS e Javascript. O mesmo foi desenvolvido, de
maneira que o leitor pudesse compreender a estrutura básica de um documento HTML, desde
a criação até a elaboração de edições.
Após demonstrar a estrutura de um documento em HTML, foi elaborado o roteiro de uma

aula sobre cinemática, onde se é possível notar e descrever o movimento dos objetos e
partículas.
No último capítulo foi elaborado um conteúdo interativo, onde foram feitas 3 questões acerca
do material descrito, demonstrando assim a parte interativa da estrutura aula em .
Ao final chega-se a conclusão de que o avanço tecnológico implica no aproveitamento de

novas ferramentas, como este trabalho demonstra é possível explorar o conteúdo ministrado
em aula de maneira interativa, além do que, o mesmo pode ser acessado tanto de um
computador, como de um smartphone, possibilitando assim a interação e questionamento
maior por parte do aluno.
APÊNDICE – CONTEÚDO INTERATIVO

Apêndice A
Abaixo estão demonstrados os códigos das três questões interativas.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Questão basquete</title>
</head>
<body>
<canvas id="fundo" width="1085" height="531" style="background-image:
url('fundo1.png')">
Se você visualizar esse texto, seu browser não suporta a tag canvas.
</canvas>
33
<script>
var canvas;//o elemento canvas sobre o qual desenharemos
var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D)
var cesta = new Image();
var jogador = new Image();
var bola = new Image();
var xjogador = 0;
var dist = 7.9;
var h = 1.65;
var H = 1.9;
var distcorreto;
var beta = 45;
var theta = (30.0/180.0)*3.1415926;
var fx=5.0*Math.sqrt(2.0)/2.0;
var fy=5.0*Math.sqrt(2.0)/2.0;
var v0 = Math.sqrt(fx*fx+fy*fy);
var alpha = Math.atan(fy/fx)-theta;
var xx=xjogador+150;
var yy=330;
var xb = xx+parseFloat(fx)*17.6;
var yb = yy-parseFloat(fy)*17.6;
var fator = 0.2;
var xc = xb - fator*Math.sqrt(fx*fx+fy*fy)*17.6*Math.cos(alpha);
var yc = yb + fator*Math.sqrt(fx*fx+fy*fy)*17.6*Math.sin(alpha);
var xa = xx;
var ya = yy;
var xe = (xb*(1-fator*Math.cos(theta))+fator*xa*Math.cos(theta))*2-xc;
var ye = (yb*(1-fator*Math.cos(theta))+fator*ya*Math.cos(theta))*2-yc;
var tempo = 0;
var tempovertical;
var tempohorizontal;
var flagTempo = false;
34
function KeyDown(evt){
if (tempo==0){
switch (evt.keyCode) {
case 39:{ /*seta para direita*/
if (xjogador<600){
xjogador++;
dist-=0.01;
xx=xjogador+150;
yy=330;
xb = xx+parseFloat(fx)*17.6;
yb = yy-parseFloat(fy)*17.6;
xc = xb - fator*Math.sqrt(fx*fx+fy*fy)*17.6*Math.cos(alpha);
yc = yb + fator*Math.sqrt(fx*fx+fy*fy)*17.6*Math.sin(alpha);
xa = xx;
ya = yy;
xe = (xb*(1-fator*Math.cos(theta))+fator*xa*Math.cos(theta))*2-xc;
ye = (yb*(1-fator*Math.cos(theta))+fator*ya*Math.cos(theta))*2-yc;
}
break;
}
case 37: {/*seta para esquerda*/
if (xjogador>0){
xjogador--;
dist+=0.01;
xx=xjogador+150;
yy=330;
xa = xx;
ya = yy;
35
}
break;
}
case 38: {/*seta para cima*/
if (beta<90){
beta++;
v0=Math.sqrt(fx*fx+fy*fy);
fx=v0*Math.cos((beta/180.0)*Math.PI);
fy=v0*Math.sin((beta/180.0)*Math.PI);
alpha = Math.atan(fy/fx)-theta;
xx=xjogador+150;
yy=330;
xa = xx;
ya = yy;
}
break;
}
case 40: {/*seta para baixo*/
if (beta>0){
beta--;
xx=xjogador+150;
yy=330;
36
xa = xx;
ya = yy;
}
break;
}
case 87: {
if (v0<20.0){
v0+=0.1;
xx=xjogador+150;
yy=330;
xa = xx;
ya = yy;
}
break;
}
case 81: {
if (v0>3.0){
v0-=0.1;
37
xx=xjogador+150;
yy=330;
xa = xx;
ya = yy;
} break;
}
case 13: {
flagTempo=true;
break;
}
}
}
}
function Iniciar() {
return setInterval(Atualizar, 1);
}
function Atualizar(){
tempovertical=v0*Math.sin(beta*(Math.PI/180.0))/9.8*(1.0+Math.sqrt(1.0+2.0*9.8*H/v0/v0/
Math.sin(beta*(Math.PI/180.0))/Math.sin(beta*(Math.PI/180.0))));
tempohorizontal=dist/v0/Math.cos((beta/180.0)*Math.PI);
if ((flagTempo)&&(tempo/1000.0<tempohorizontal)&&(tempo/1000.0<tempovertical)){
tempo+=1;
}
if ((tempo/1000.0>tempohorizontal)||(tempo/1000.0>tempovertical)){
if (distcorreto*0==0){
38
alert("A distância correta é igual a "+distcorreto);

} else {
alert("Modifique a velocidade inicial ou o ângulo!");
}
}
distcorreto = v0*v0*Math.sin(2.0*beta*(Math.PI/180.0))/2.0/9.8*(1.0+Math.sqrt(1.0-
2.0*9.8*h/v0/v0/Math.sin(beta*(Math.PI/180.0))/Math.sin(beta*(Math.PI/180.0))));
canvas = document.getElementById("fundo");
ctx = canvas.getContext("2d");
fundo.style.background = "url('fundo1.png') no-repeat";
ctx.beginPath();
ctx.clearRect(0, 0, 1085, 531);
ctx.closePath();
ctx.fill();
bola.src = "bola.png";
if (tempo==0){
xbola0 = xjogador+133;
}
xbola = xbola0 + v0*790.0/7.9*Math.cos((beta/180.0)*Math.PI)*tempo/1000.0;
ybola = 305 - v0*790.0/7.9*Math.sin((beta/180.0)*Math.PI)*tempo/1000.0 +
9.8*790.0/7.9/2.0*(tempo/1000.0)*(tempo/1000.0);
ctx.drawImage(bola, xbola, ybola , 38, 38);
cesta.src = "cesta.png";
ctx.drawImage(cesta, 700, 61, 397, 500);
jogador.src = "jogador1.png";
ctx.drawImage(jogador, xjogador+30, 250, 1.1*238, 1.1*300);
ctx.beginPath();
ctx.moveTo(xjogador+150,330);
ctx.lineTo(940,330);
ctx.strokeStyle = '#ff0000';
ctx.fillStyle = '#ff0000';
ctx.font = "bold 25px Arial";
if ((Math.round(dist*100))%100>9){
39
ctx.fillText("d = "+ (Math.round(dist*100)-(Math.round(dist*100))%100)/100 +","+

((Math.round(dist*100))%100)+" m", xjogador/2+545, 360);
} else {
ctx.fillText("d = "+ (Math.round(dist*100)-(Math.round(dist*100))%100)/100 +",0"+
(Math.round(dist*100))%100+" m", xjogador/2+545, 360);
}
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1000,330);
if ((Math.round(h*100))%100>9){
ctx.fillText("h="+ (Math.round(h*100)-(Math.round(h*100))%100)/100 +","+
((Math.round(h*100))%100)+"m", 980, 160);
} else {
ctx.fillText("h="+ (Math.round(h*100)-(Math.round(h*100))%100)/100 +",0"+
(Math.round(h*100))%100+"m", 980, 160);
}
ctx.stroke();
ctx.beginPath();
if ((Math.round(H*100))%100>9){
ctx.fillText("H="+ (Math.round(H*100)-(Math.round(H*100))%100)/100 +","+
((Math.round(H*100))%100)+"m", 800, 500);
} else {
ctx.fillText("H="+ (Math.round(H*100)-(Math.round(H*100))%100)/100 +",0"+
(Math.round(H*100))%100+"m", 800, 500);
}
40
ctx.stroke();
ctx.strokeStyle="#0000FF";
ctx.beginPath();
ctx.moveTo(xx,yy);
ctx.lineTo(xx+parseFloat(fx)*17.6,yy-parseFloat(fy)*17.6);
ctx.moveTo(xc,yc);
ctx.moveTo(xe,ye);
ctx.lineWidth=8;
ctx.stroke();
ctx.strokeStyle="#CFB53B";
ctx.beginPath();
ctx.arc(xa,ya,fx*17.6*0.5,0.0,2.0*Math.PI-Math.atan(fy/fx),true);
ctx.stroke();
ctx.strokeStyle = '#CFB53B';
ctx.fillStyle = '#CFB53B';
ctx.fillText("\u03B2 ="+beta+"\u00B0",
xjogador+300, 310);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = '#0000ff';
ctx.fillStyle = '#0000ff';
ctx.fillText("v"+"\u2080"+"= "+ (Math.round(v0*10)-(Math.round(v0*10))%10)/10 +","+
((Math.round(v0*10))%10)+" m/s", xjogador, 280);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = '#000000';
ctx.fillStyle = '#000000';
ctx.fillText("tempo = "+(tempo/1000.0).toFixed(2)+" s", 100, 150);
ctx.stroke();
41
}
window.addEventListener('keydown', KeyDown);
Iniciar();
/script>
</body>
</html>
Apêndice B
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Questão Semáforo</title>
</head>
<body>
<h3 style="color:green; display:inline;">
a = <input type="number" id="aesc" value="200" min="33" max="400" step="1"> m/s^2
</h3>
<button onclick="Verificar()">Verificar</button><br>
url('fundo1.png')">
</canvas>
<script>
var semaforo = new Image();
var caminhao = new Image();
var xfrenagem = Math.random() * (600 - 200) + 200;
var dist = (880-xfrenagem)*0.01;
var v0 = Math.random() * (20 - 10) + 10;
var a = v0*v0/2.0/dist;
var flagAcertou = false;
42
var flagErrou = false;

var xcaminhao = -350;
var tempo = 0;
var tempo1, tempo2;
return setInterval(Atualizar,1);
}
function Verificar(){
var aesc = parseFloat(document.getElementById("aesc").value);
if (Math.abs(a-aesc).toFixed(1)==0){
flagAcertou=true;
} else {
flagErrou=true;
}
}
ctx.beginPath();
ctx.clearRect(0, 0, 1085, 531);
ctx.closePath();
ctx.fill();
tempo1=(xfrenagem-150.0)/100.0/v0;
tempo2=v0/a;
if (tempo/1000.0<tempo1){
semaforo.src="verde.png";
} else if (tempo/1000.0<tempo1+tempo2/2.0){
semaforo.src="amarelo.png";
} else {
semaforo.src="vermelho.png";
}
ctx.drawImage(semaforo,880,2,190,200);
43
caminhao.src="caminhao.png";
if (flagAcertou){
tempo++;
if (xcaminhao+500<880){
if (tempo/1000.0<tempo1){
xcaminhao = -350 + v0*(tempo/1000.0)*100;
} else {
if ((tempo/1000.0-tempo1)<tempo2){
xcaminhao = xfrenagem-500 + v0*(tempo/1000.0-tempo1)*100.0 -
a/2.0*(tempo/1000.0-tempo1)*(tempo/1000.0-tempo1)*100.0;
}
}
}
}
ctx.drawImage(caminhao,xcaminhao,300,500,200);
ctx.beginPath();
ctx.lineWidth=8;
ctx.moveTo(xfrenagem,250);
((Math.round(dist*100))%100)+" m", xfrenagem+dist/2, 220);
} else {
ctx.fillText("d = "+ (Math.round(dist*100)-(Math.round(dist*100))%100)/100
+",0"+ (Math.round(dist*100))%100+" m", xfrenagem+dist/2, 220);
}
ctx.stroke();
if (!(flagAcertou)){
ctx.fillText("A extremidade esquerda da linha", xfrenagem, 300);
ctx.fillText("vermelha acima é o ponto em que", xfrenagem, 325);
ctx.fillText("um caminhoneiro inicia a frenagem.", xfrenagem, 350);
44
ctx.fillText("Mesmo utilizando a máxima frenagem", xfrenagem, 375);

ctx.fillText("possível, o caminhão parou exatamente", xfrenagem, 400);
ctx.fillText("em uma posição na iminência de ", xfrenagem, 425);
ctx.fillText("ultrapassar o sinal vermelho. ", xfrenagem, 450);
ctx.fillText("Qual o módulo da desaceleração a, ", xfrenagem, 475);
ctx.fillText("se no momento da frenagem, o caminhão ", xfrenagem, 500);
ctx.fillText("estava a "+(v0*3.6).toFixed(2)+"Km/h?", xfrenagem, 525);
ctx.stroke();
}
if (flagErrou){
alert("Você ultrapassou o sinal vermelho :(");
flagErrou=false;
}
}
Iniciar();
</script>
</body>
</html>
Apêndice C
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Questão Semáforo</title>
</head>
<body>
<h3 style="color:green; display:inline;">
v0 = <input type="number" id="aesc" value="5.0" min="0.0" max="10.0" step="0.1">
m/s
</h3>
<button onclick="Verificar()">Verificar</button><br>
45

url('fundo1.png')">
</canvas>
<script>
var paraquedista = new Image();
var aviao = new Image();
var retangulo = new Image();
var xlancamento = Math.random() * (600 - 200) + 200;
var dist = (880-xlancamento)*0.1;
var h = 8;
var v0 = dist/Math.sqrt(2.0*h/9.8);
var flagAcertou = false;
var flagErrou = false;
var xaviao = -350;
var xparaquedista=0;
var tempo = 0;
var tempo1 = 0;
return setInterval(Atualizar,1);
}
function Verificar(){
var aesc = parseFloat(document.getElementById("aesc").value);
if (Math.abs(v0-aesc).toFixed(1)==0){
flagAcertou=true;
} else {
flagErrou=true;
}
}
46
ctx.beginPath();
ctx.clearRect(0, 0, 1085, 531);
ctx.closePath();
ctx.fill();
aviao.src="aviao.png";
if (flagAcertou){
tempo++;
xaviao = -350 + v0*(tempo/1000.0)*10;
}
ctx.drawImage(aviao,xaviao,0,500,200);
if (xaviao+500>xlancamento){
if (xparaquedista<780){
tempo1++;
xparaquedista=xaviao+500;
}
paraquedista.src="paraquedista.png";
}
ctx.drawImage(paraquedista,xparaquedista-
25,100+9.8/2.0*(tempo1/1000.0)*(tempo1/1000.0)*10.0,50,50);
ctx.beginPath();
ctx.lineWidth=8;
ctx.moveTo(xlancamento,180);
ctx.fillText("h = "+ (Math.round(h*100)-(Math.round(h*100))%100)/100 +","+
((Math.round(h*100))%100)+" m", 820, 150);
ctx.strokeStyle = '#ffffff';
ctx.fillStyle = '#ffffff';
47

((Math.round(dist*100))%100)+" m", xlancamento+dist/2, 150);
} else {
ctx.fillText("d = "+ (Math.round(dist*100)-(Math.round(dist*100))%100)/100
+",0"+ (Math.round(dist*100))%100+" m", xlancamento+dist/2, 150);
}
ctx.stroke();
if (!(flagAcertou)){
retangulo.src="retangulo.png";
ctx.drawImage(retangulo,xlancamento,280,500,160);
ctx.fillText("A extremidade esquerda da linha", xlancamento, 300);
ctx.fillText("branca acima é o ponto em que", xlancamento, 325);
ctx.fillText("um paraquedista inicia o lançamento.", xlancamento, 350);
ctx.fillText("Qual a velocidade inicial v0", xlancamento, 375);
ctx.fillText("para que o paraquedista atinja", xlancamento, 400);
ctx.fillText("o círculo vermelho sobre o prédio? ", xlancamento, 425);
ctx.stroke();
}
if (flagErrou){
alert("O paraquedista caiu fora do alvo :'(");
flagErrou=false;
}
}
Iniciar();
</script>
</body>
</html>
REFERÊNCIAS
[1] HAVERBEKE, M. Eloquent JavaScript, 2nd Ed.: A Modern Introduction to
Programming. No Starch Press, 2014. ISBN 9781593275846. Disponível em:
<https://books.google.com.br/books?id=mDzDBQAAQBAJ>
[2] HEWITT, P. Física Conceitual – 12.Ed: [s.n.], 2015. ISBN 9788582603413. Disponível
em:<https://books.google.com.br/books?id=QgKbCgAAQBAJ>
48
[3] SOUZA, Roque Fernando Marcos, Canvas HTML5, 2014. ISBN978857456843.

Disponível em:<https://books.google.com.br/books?id=KFUkBAAAQBAJ>

TCC3

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

TCC3

Enviado por

Direitos autorais:

Formatos disponíveis

SERVIÇO PÚBLICO FEDERAL

UNIVERSIDADE FEDERAL DO SUL E SUDESTE DO PARÁ

GEAN LUCAS DA CONCEIÇÃO SOUZA

FERRAMENTAS TECNOLÓGICAS NO ENSINO DA FÍSICA: HTML5, CSS

FERRAMENTAS TECNOLÓGICAS NO ENSINO DA FÍSICA: HTML5, CSS

Trabalho de conclusão de curso apresentado à Universidade

FERRAMENTAS TECNOLÓGICAS NO ENSINO DA FÍSICA: HTML5, CSS E

Prof. Dr. Tiago Carvalho Martins

Prof. Dr. Narciso das Neves Soares

Prof(a). Dra. Maria Liduína das Chagas

“Dedico este trabalho aos meus pais, minha esposa, amigos

Agradeço a Deus por me guiar e sustentar diante das dificuldades.

Invariavelmente, desde a antiguidade o ser humano busca mecanismos para se adaptar ao

Palavras-chave: Internet, html, css, javascript, mecânica, cinemática.

Keywords: internet, HTML, css, JavaScript, mechanics, kinematics.

Figura 1: Exemplo URL do documento....................................................................................13

Gráfico 2: Posição em relação ao tempo………………………………...……………………25

Gráfico 3: Aceleração em função do tempo………………………....………..………………25

Gráfico 4: Lançamento oblíquo………………………………………………………………27

Tabela 1: Versões – HTML.......................................................................................................15

LISTA DE ABREVIATURAS E SIGLAS

TIC – Tecnologias de informação e comunicação

IBGE – Instituto Brasileiro de Pesquisa e Estatística

Cgi.br – Comitê Gestor da Internet no Brasil

Cetic.br – Centro Regional de Estatuto para o Desenvolvimento da Sociedade da Informação

Nic.br – Núcleo de informação e Coordenação do ponto

HTML – Linguagem de Marcação de Hipertexto

SVG – Scalable Vector Graphics/ Gráficos vetoriais escaláveis

CSS – Cascating Style Sheets

WWW – World Wide Web

SGML – Standard Generalized Markup Language

MRU – Movimento Retilíneo Uniforme

MRUV – Movimento Retilíneo Uniformemente Variado

4.2.3.1. Unidades de equivalências de velocidade.................................................................22

Segundo Chaves, O C Eduardo, em seu artigo “A tecnologia e a Educação”,

Há muitas formas de compreender a tecnologia. Para alguns ela é fruto

De maneira sucinta, percebe-se que a tecnologia é evolutiva e imprescindível ao ser humano,

2.2. OBJETIVOS ESPECÍFICOS

• Demonstrar dados estatísticos que comprovem o avanço dessas tecnologias.

• Compreender a importância da internet como ferramenta de ensino atualmente.

• Entender sobre HTML, seus elementos básicos e sua estrutura básica.

• Compreender a linguagem CSS e Javascript e suas estruturas

• Demonstrar uma aula sobre mecânica, em especial cinemática e alguns de seus

• Analisar exercícios que comprovem o estudo elaborado e abordado neste trabalho.

3. TECNOLOGIAS PARA O ENSINO DA FÍSICA: INTERNET, HTML5, CSS E

3.1.1. Internet e o ensino

imagens, vídeos, áudios e animações através de “comandos” popularmente conhecidos como

3.2.2. Noções de HTML

3.2.3. Criando documentos em HTML

3.2.4. Elementos básicos

Observe o significado de cada comando:

➔ <HTML> … </HTML>: Indicam o início e o fim do documento, todas as demais tags

➔ <HEAD> … </HEAD>: Abalizam a parte de cabeçalho do documento e nelas estão

➔ <TITLE> … </TITLE>: Informam o título do documento, que estará visível na barra

➔ <BODY> … </BODY>: indica o corpo do documento.

3.2.5. Título (<TITLE>…</TITLE>)

<TITLE> Primeiro arquivo HTML</TITLE>

Como fica no Browser:

Figura 1: Exemplo URL do documento.

Fonte: Elaborado pelo autor

3.2.6. Cabeçalho (<HEAD>…</HEAD>)

O elemento Head contém a informação geral do documento, conhecido como metadados, ou

Como fica no Browser:

Figura 2: Exemplo de cabeçalho