Terceiro Trimestre 1º Ano
Pensamento Computacional

Prioridade Curso do Alura    -      Depois atividades no Scratch e sugestoes de tutoriais do professor

Curso 01  - Catálogo de Filmes Editor P5 JS

Aulas Curso Alura: https://cursos.alura.com.br/course/funcoes-recomendador-filmes-javascript

Editor P5JS:  Site de programação:   https://editor.p5js.org/          

Filmow:    https://filmow.com/

Curso 02 -  Editor VS Code

Aulas Curso Alura: https://cursos.alura.com.br/course/pagina-web-catalogo-videos-html-css

VS Code - https://vscode.dev/?vscode-lang=pt-br   On line  mas também é possível baixar o programa no computador Desktop e Notebook

O que é o VS Code?
VS Code  Introdução  Tutorial
O que é Git e GitHub?


Aula 41


*Listar seus filmes favoritos em código**. Nessa aula você começou a escrever uma lista de filmes favoritos no arquivo `sketch.js`, usando comentários (`//`) para não interferir no código funcional. *Categorizar filmes por classificação indicativa** buscando a classificação indicativa dos filmes em sites como o Filmow e adicionando essa informação aos seus comentários, ajudando a categorizar os filmes por idade apropriada. *Enriquecer a lista com gêneros de filmes**, além da classificação indicativa, você adicionou o gênero de cada filme à sua lista, o que ajuda a dar uma visão mais completa sobre cada título. * Utilizar recursos online para pesquisa** utilizando o site Filmow para encontrar informações detalhadas sobre seus filmes favoritos, coletando dados e informações sobre seus filmes favoritos!

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


Aula 42

*Listar seus filmes favoritos em código**. Nessa aula você começou a escrever uma lista de filmes favoritos no arquivo `sketch.js`, usando comentários (`//`) para não interferir no código funcional. *Categorizar filmes por classificação indicativa** buscando a classificação indicativa dos filmes em sites como o Filmow e adicionando essa informação aos seus comentários, ajudando a categorizar os filmes por idade apropriada. *Enriquecer a lista com gêneros de filmes**, além da classificação indicativa, você adicionou o gênero de cada filme à sua lista, o que ajuda a dar uma visão mais completa sobre cada título. * Utilizar recursos online para pesquisa** utilizando o site Filmow para encontrar informações detalhadas sobre seus filmes favoritos, coletando dados e informações sobre seus filmes favoritos!

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


Aula 43

*Criar uma função separada (`geraRecomendacao`)** que permite a fácil expansão do si stema de recomendação, demonstrando a importância de funções na organização do código; *Aplicar a lógica condicional** para recomendar filmes com base na idade do usuário; *Criar um campo de entrada de texto na interface do usuário, permitindo a interação direta com o programa; *Desenvolver parte do nosso fluxograma** para recomendar diferentes filmes para diferentes faixas etárias.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link



Aula 44

*Utilizar dados do checkbox** ao integrar uma caixa de seleção (*checkbox*) para entender se a pessoa gosta ou não de fantasia. Com isso, aprendemos a manejar entradas de sim (*checkbox* marcado) ou não (*checkbox* não marcado) no código. *Utilizar elementos de interface gráfica** com a criação de uma caixa de seleção para interação do usuário demonstrou como adicionar e utilizar elementos de interface gráfica no p5.js. *Conectar elementos de interface com lógica de programação**, como a idade e o interesse por fantasia, com a lógica de programação para gerar recomendações de filmes. *Expandir a função `geraRecomendacao` para cobrir mais idades e preferências, tornando o recomendador mais parecido com o que planejamos.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


45

*Aprimorar a lógica do recomendador** refinando a função `geraRecomendacao` para analisar a idade e a preferência por gêneros de filmes, fornecendo recomendações personalizadas; *Melhorar a apresentação do resultado**, utilizando as funções do P5.js como `textAlign()` e `textSize()` para centralizar e aumentar o tamanho do texto de recomendação; *Tornar a interface mais intuitiva** adicionando etiquetas aos campos de entrada usando `createSpan()`, melhorando a clareza e a usabilidade do recomendador.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


46

*Estilizar a página com CSS**, ajustando a margem da página para criar espaço entre os elementos e as bordas da tela, e alterou a cor de fundo para um azul claro. *Adicionar elementos com JavaScript** como títulos, caixas de texto e checkboxes, e como isso contribui para a interatividade e funcionalidade do recomendador.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


47

*Refinar a função `geraRecomendacao`** para incluir uma condição adicional, permitindo que o recomendador identifique e sugira o filme "Ladrões de bicicleta" para usuários de 12 ou 13 anos. Isso foi feito incorporando um `if` adicional na lógica da função. *Ampliar o recomendador** para considerar não apenas o gosto por filmes de fantasia, mas também por aventuras, através da adição de uma nova variável chamada `gostaDeAventura`, assim como a criação de uma nova caixa de seleção. *Modificar a estrutura da função `geraRecomendacao`** para aceitar o novo parâmetro `gostaDeAventura`, e usar o operador lógico `||` para combinar condições, mostrando como podemos recomendar "Homem-Aranha: no Aranhaverso" para aqueles que gostam de fantasia ou aventura na faixa etária especificada.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


48

*Refletir sobre a possibilidade de reutilizar o que fizemos durante as aulas para criação de outros projetos com temas diferentes. *Estruturar e visualizar processos de decisão através do desenvolvimento de fluxogramas, melhorando a compreensão de como nossas escolhas são feitas. *Pensar sobre a possibilidade de expansão de fluxogramas para cobrir cenários mais complexos, introduzindo novos conceitos e condições que refletem processos de pensamento mais detalhados.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


49

* Iniciar o seu projeto, criando sua pasta e o arquivo `index.html`; * Estruturar uma página HTML, criando as tags principais de conteúdo; * Organizar os textos da página, utilizando as tags `header`, `h1` e `p` para inserir cabeçalho, título e parágrafo, respectivamente; * Embutir um vídeo do YouTube, utilizando seu código HTML embedado.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


50

*Criar a estrutura do arquivo `styles.css`, aplicando propriedades como `background-color` e `color` para inserir a cor de fundo e cor da fonte da página; *Criar um título para a aba da página, utilizando a tag `

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


51

* Customizar o arquivo index.html através do arquivo style.css; * Adicionar bordas aos elementos, utilizando a propriedade CSS `border` para definir sua espessura, tipo e cor; * Implementar modificações na página como alteração de cor e tamanho de fonte; * Ajustar o tamanho do texto no cabeçalho para destacar títulos importantes.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


52

* Conhecer e aplicar diferentes espaçamentos entre os elementos, utilizando `margin` para espaçamentos externos e `padding` para espaçamentos internos; * Realizar modificações no visual da página como alteração do tamanho da fonte ( `font-size`) e disposição dos elementos (`display`); * Criar classes para customizar elementos específicos da página e melhorar a legibilidade do código, utilizando o atributo `class` no HTML e o seletor `.` no CSS.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


53

* Explorar uma biblioteca de fontes, escolhendo o estilo de texto da sua preferência; * Copiar o código de fontes externas, implementando-o no seu projeto de acordo com os arquivos correspondentes; * Aplicar estilos de texto diferentes utilizando uma mídia externa (site) para aperfeiçoar o visual da página;

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


54

* Criar uma nova seção referente à uma fila de vídeos; * Escolher vídeos favoritos para inserir no seu projeto; * Gerar o link da *thumbnail*, através de uma estrutura padrão; * Corrigir a disposição dos vídeos na página, delimitando uma expansão horizontal com a propriedade `overflow`; * Ajustar propriedades CSS de espaçamento, como `gap`, para inserir um espaço entre os elementos.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


55

* Criar o efeito “apagado”, através da propriedade `opacity`; * Utilizar o seletor `:hover`, para capturar a interação do mouse com o elemento; * Aplicar efeitos de borda e opacidade, quando o mouse passa por cima do elemento; * Corrigir o espaçamento da página, inserindo uma margem inferior para o conteúdo; * Dar os ajustes finais no seu código, finalizando a criação do seu projeto.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


56

* Compartilhar o código desenvolvido, adicionando os arquivos em um repositório no GitHub; * Publicar o projeto, utilizando GitHub Pages para torná-lo visível na web; * Fazer alterações (*commits*) no código e atualizar o repositório no GitHub; * Finalizar o projeto de catálogo de filmes.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


57

*Criar uma história para sua aventura: Desenvolvendo uma narrativa base, como a descoberta de uma carta sobre uma cidade perdida. *Desenhar um fluxograma: Organizando as etapas da aventura de forma visual e estruturada. *Definir os passos da aventura: Estabelecendo cada tela ou escolha na história, começando pelo "Passo 0". *Criar caminhos com decisões: Oferecendo opções de botões que levam a novos passos na aventura. *Planejar a narrativa interativa: Garantindo que cada escolha leve a novos desenvolvimentos na história.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


58

* Criar a estrutura básica do HTML: Gerar e modificar a estrutura inicial do HTML, incluindo o idioma e o título. *Adicionar conteúdo principal: Inserir

para o conteúdo principal, com

, parágrafo e botões. *Personalizar botões: Criar botões com classes e atributos personalizados para indicar o próximo passo. *Adicionar múltiplas telas: Duplicar e ajustar

s para criar várias telas de aventura, conforme o fluxograma.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


59

* Adicionar um link para o arquivo CSS: Incorporar o arquivo style.css no index.html para aplicar estilos. *Escolher uma fonte do Google Fonts: Selecionar e aplicar a fonte "Bai Jamjuree" no site. *Modificar o fundo e a cor do texto: Alterar o fundo para verde e a cor do texto para branco no CSS. *Centralizar o conteúdo na página: Usar Flexbox no CSS para centralizar o conteúdo. *Estilizar botões: Aplicar cores e fontes aos botões para melhorar a aparência do site.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


60

* Adicionar a classe "ativo" no HTML para marcar o passo atual no projeto. *Selecionar e manipular botões com JavaScript usando `querySelectorAll()` e `forEach()`. *Atualizar o estado "ativo" dinamicamente removendo e adicionando a classe "ativo" para mostrar o próximo passo. *Conectar o script JavaScript ao HTML e preparar para ajustes futuros no CSS.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


61

*Esconder e mostrar perguntas usando `display: none` e `display: block` no CSS. *Testar os botões para garantir que as perguntas avançam corretamente. * Inserir uma imagem na

inicial e renomeá-la para um nome adequado.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


62

* Configurar o CSS para mostrar

s ao clicar em botões, melhorando a interatividade. * Usar `max-width` no CSS para evitar que as imagens ocupem muito espaço. *`Aplicar text-align` center na tag `

` para centralizar elementos. *Inserir uma nova `div` com texto e botões, configurando o `data-proximo` para navegação correta.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


63

* Adicionar todas as etapas da aventura no arquivo index.html, completando a estrutura HTML. *Incluir imagens nos passos finais para melhorar a visualização e organizar essas imagens em uma pasta específica. *Criar uma pasta "img" para armazenar as imagens e ajustar os caminhos no HTML para garantir que apareçam corretamente.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


64

* Testar o projeto clicando nos botões para garantir que tudo funciona corretamente. *ajustar nomes de arquivos de imagem incorretos no HTML. *Criar e Configurar um Repositório no GitHub. Fazer login, criar um repositório e carregar os arquivos. *Publicar o Projeto no GitHub Page configurando o GitHub Pages para que o site fique acessível online.

Vídeoaula: Link

Slides/Encaminhamentos: Link

Exercícios: Link

Outros: Link


Mostrando 24 registros