Atividade "Se Liga 01" - Fazer uma história no Scratch falando sobre a sua escola. Fazer no mínimo três cenários diferentes.
Enivar o link da história do executável do Scratch para o marcos.eduardo.ferreira@escola.pr.gov.br
Prioridade Curso do Alura - Depois atividades no Scratch e sugestoes de tutoriais do professor
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/
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?
Curso Alura: https://cursos.alura.com.br/course/algoritmos-criando-aventura-html-css-javascript/task/153073
O que é o VS Code?
VS Code Introdução Tutorial
O que é o P5 JS?
O que é Git e GitHub?
O que é o Figma?
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