Curso: 2025.2 - PROGRAMAÇÃO PARA INTERNET I - Turma 01

  • Geral

    Disciplina: Programação Para Internet I (PPI 1)

    Nesta unidade, estudaremos os fundamentos da programação para Web, explorando:
    ✅ HTML (estruturação de páginas)
    ✅ CSS (estilização e layout responsivo)
    ✅ JavaScript (interatividade no cliente)
    Além disso, abordaremos conceitos de arquitetura cliente-servidor e protocolo HTTP, essenciais para a comunicação entre navegador e servidor.

     Carga Horária 

    🕐Total 80 horas

    • 48 horas presenciais
    • 32 horas EAD (realizadas ao longo do período com atividades no AVA)
     Período das Aulas Presenciais

    📅
    🗓️ Aulas Presenciais:

    • Terças-feiras (Lab 4) e Quartas-feiras (Lab 6)
    • Das 18h30 às 22h30
    • Local: IFSC Campus Gaspar - Laboratório de 
    CanalInformação
    E-mail romulo.beninca@ifsc.edu.br
    WhatsApp (44) 98801-0521

    Horário de Atendimento

    🕑 Sextas-feiras das 14h às 15h
    📲 Outros horários: via agendamento por e-mail ou WhatsApp.
    💡 "Se precisar de ajuda, entre em contato quando quiser, agende horarios!"

    Leia o Plano de Ensino e e fique atento à carga horária da disciplina assim como seu método de avaliação!

    • Plano de ensino
    1
    2
    3
    Materiais e Atividades
    1
    2
    3
    4
    5
    6

  • Tópico 1 - Plano de Ensino

    O Plano de ensino da Unidade Curricular (PUC)  contempla explicações sobre o planejamento do módulo como organização dos conteúdos,  metodologias que serão utilizadas para ensino, métodos avaliativos que serão utilizados bem como proposta de recuperação e explicações de como devem ocorres todas essas atividades. 

    Distribuição Carga Horária:

    • Total Presencial: 48 horas
    • Total EAD: 32 horas

     

    SemanaDiaModalidadeConteúdo / AtividadeCH
    1 Presencial

    ✅ Apresentação do Plano de Ensino + História da Web e História da Internet.
    ✅ Arquitetura Cliente-Servidor + Protocolo HTTP +HTTP Status codes.
    ✅ HTML : estrutura básica HTML,  comentários em html, atributos , head, body, html , p , hr
    ✅ Incorporação de estilização com CSS : estrutura regra, comentário

    		 4h
    Presencial

    ✅ Git e Controle de Versão: conceitos de versionamento, commits, branches
    ✅ Serviços remotos: GitHub, GitLab, Bitbucket
    ✅ Publicação com GitHub Pages
    ✅ HTML Avançado: listas (<ul>, <ol>), tabelas (<table>, <tr>, <td>), formulários (<form>, <input>, <textarea>, <button>, label, select, option)
    ✅ CSS Prático: propriedades border, width, height, margin, padding, color, background-*, opacity, border-radius, font-*, text-transform
    ✅ Prática guiada: montagem de páginas simples integrando HTML e CSS

    		 4h
    EAD

    📚 Atividade prática no AVA(Ambiente Virtual de Aprendizagem):Formulários simples + validação básica (HTML)

    		 4h
    2 T) — Sem aula devido ao feriado municipal 0h
    Presencial ✅ CSS Seletores:
    ✔️ Básicos: elemento, .classe, #id
    ✔️ Hierárquicos: descendente (ul li), filho direto (div > p), irmãos (h2 + p, h2 ~ p)
    ✅ Propriedades de Texto: font-family, font-size, font-weight, line-height, text-align, text-transform, letter-spacing
    ✅ Cores e Fundos: color, background-color, background-image
    ✅ Prática: estilização de menus e áreas de conteúdo    		 4h
    EAD 📚 Exercício prático: Criar layout responsivo com Flexbox + Grid no AVA 4h
    3 Presencial ✅Projeto Prático de Layout Completo:
    ✔️ Integração de Flexbox e Grid para páginas complexas
    ✔️ Adição de responsividade com @media
    ✔️ Uso de unidades flexíveis (em, %, vh, vw)
    ✅ Revisão de Estilização: boas práticas de semântica e acessibilidade (uso correto de tags e contrastes de cor)    		 4h
    Presencial

    ✅ Revisão sobre Flexbox , e apresentação grid layout

    ✔️ Adição de responsividade com @media
    ✔️ Uso de unidades flexíveis (em, %, vh, vw)

    		 4h
    EAD 📚 Revisão + Atividades de reforço (Recuperação parcial, se necessário) 4h
    4 Presencial

    ✅ Introdução ao JavaScript (JS):

    ✔️ Ambiente de execução no navegador (window, console, alert)
    ✔️ Sintaxe básica: variáveis (let, const), tipos primitivos
    ✔️ Operadores matemáticos e lógicos
    ✔️ Estruturas de controle (if/else, switch)

    ✅ Manipulação do DOM com JS:
    ✔️ Seletores de elementos (getElementById, querySelector)
    ✔️ Manipulação de conteúdo (innerHTML, textContent)
    ✔️ Manipulação de atributos e classes (setAttribute, classList.add)
    ✔️ Eventos (addEventListener para click, submit, etc.)
    ✅ Prática guiada: manipulação de formulários (validação simples com JS)

    		 4h
    Presencial

    ✅ Avaliação Parcial 1: HTML + CSS (Prova prática)
    ✅ Feedback e revisão

    		 4h
    EAD 📚 Atividade prática no AVA: Criar scripts JS manipulando formulários e eventos 4h
    5 Presencial ✅ JavaScript Avançado:
    ✔️ Laços (for, while, forEach)
    ✔️ Arrays e objetos simples
    ✔️ Criação e chamada de funções personalizadas
    ✔️ Escopo e boas práticas (uso de const e let, evitar var)
    ✔️ Modularização básica    		 4h
    4h
    EAD 📚 Atividade prática no AVA: Criar uma landing page com Bootstrap e JS 4h
    6 27/11 Presencial ✅ Desenvolvimento de Projeto Final:
    ✔️ Orientação prática: validação do escopo, layout, interatividade
    ✔️ Aplicação dos conceitos aprendidos (HTML + CSS + JS + Bootstrap)
    ✔️ Revisão de acessibilidade e responsividade    		 4h
    04/12 Presencial ✅ Apresentação dos Projetos + Avaliação Parcial 2:
    ✔️ Defesa e arguição dos projetos desenvolvidos
    ✔️ Feedback individualizado
    ✅ Orientação para Recuperação Final, se necessário    		 4h
    EAD 📚 Atividades de recuperação (Reentrega do projeto ou nova avaliação prática) 4h

    Avaliações:

    • Avaliação 1 (HTML + CSS): prova prática (peso 1)
    • Avaliação 2 (Projeto com JS + Bootstrap): apresentação/arguição (peso 1)
    • Atividades e Listas no AVA: exercícios e atividades práticas (peso 1)

    Nota final:

     Média Final = (Avaliação 1+ Avaliação 2 + (Média das atividades e listas)

    • Tópico 2

      Conteúdos aborados na UC:

      Objetivos:

      • Compreender os conceitos relacionados ao desenvolvimento de interfaces Web.

      • Criar páginas web utilizando linguagens de marcação de hipertexto e de descrição de estilo.

      • Aprender a desenvolver páginas Web dinâmicas por meio de scripts executados no navegador, de forma a agilizar a animação e aprimorar a interatividade com a interface.

      Conteúdos:

                    1. Conceitos de aplicações web;

                    2. Linguagens de marcação: HTML, CSS;

                    3. Linguagem de script;

                    4. Arquitetura cliente/servidor;

                    5. Frameworks para desenvolvimento front-end;

      Bibliografia Básica:

                  RESIG, John. Segredos do Ninja JavaScript. São Paulo: Novatec, 2013.

                    SANDERS, Bill. Smashing HTML5: técnicas para a nova geração da web. Tradução de Mariana Bandarra. Porto Alegre: Bookman, 2012.

      Bibliografia Complementar:

              FLANAGAN, David. JavaScript: o guia definitivo. Tradução de João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

              MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programação para web. 2. ed., 5. reimpr. São Paulo: Érica, 2012.

              MELO, Alexandre Altair de; LUCKOW, Décio Heinzelmann. Programação Java para a web. 2. ed. São Paulo: Novatec, 2015.

              SILVA, Maurício Samy. Construindo sites com CSS e (X) HTML: sites controlados por folhas de estilo em cascata. São Paulo: Novatec, 2008.

              SILVA, Maurício Samy. HTML 5: a linguagem de marcação que revolucionou a web. 2. ed. São Paulo: Novatec, 2011.


      • Avaliação e notas

        Nossa avaliação se baseia na pesquisa como princípio educativo, incentivando a compreensão, análise e domínio dos conteúdos conforme PPC. Utilizamos métodos variados, incluindo observação diária, trabalhos de pesquisa, testes, arguições e execução de projetos.

        As atividades em grupo exigem apresentação e defesa do trabalho, reforçando habilidades de comunicação e colaboração. O plágio é severamente penalizado, em sintonia com a integridade acadêmica preconizada pelo PDI.

        A entrega de trabalhos em formatos especificados e a utilização de terminologia correta, valorizando o profissionalismo e a precisão na comunicação. Todas as atividades possuem possibilidade de recuperação, demonstrando nosso compromisso com a inclusão e o sucesso de todos os alunos.

        Com base nesses princípios define-se os seguistes procedimentos para avaliação de aprendizagem nesta unidade. 

        As atividades  em sala e ou na plataforma moodle com especificações na própria atividades e também no plano de ensino, tendo como intervalo valores inteiros de 0 a 10 e podendo se utilizar das seguintes formas de avaliação. 

        • Conforme previsto na RDP as avaliações desta unidade podem constar:

        I - observação diária dos alunos pelos professores, em suas diversas atividades;
        II - trabalhos de pesquisa individual ou coletiva;
        III - testes e provas escritos, com ou sem consulta;
        IV - entrevistas e arguições;
        V - resoluções de exercícios;
        VI - planejamento ou execução de experimentos ou projetos;
        VII - relatórios referentes aos trabalhos, experimentos ou visitas técnicas;
        VIII - atividades práticas referentes àquela formação;
        IX - realização de eventos ou atividades abertas à comunidade;
        X - autoavaliação descritiva e avaliação pelos colegas da classe;
        XI - demais instrumentos que a prática pedagógica indicar.

        •  Intervalo das notas:As notas das atividades, bem como os cálculos seguiram o previsto na RDP sendo notas inteiras no intervalo de [0 a 10], ou seja sem qualquer parte fracionária. Por exemplo, 5,3 será 5, assim como 5,8 será 5. (Definido como RDP do IFSC). 

        • Atividades e avaliações:Todas atividades da unidade tem os critérios definidos no plano de ensino, podendo adicionamento ou sobrepor estes por meio de instruções descritas na própria atividade.

        • Atividade em grupo: Todos discentes do grupo devem entregar a atividade. Nestes caso pode ser solicitado aos integrantes apresentação com arguição para evidenciar domínio e compreensão sendo a nota atribuída ao domínio e compreensão.

        • Plagio:Cópias, plágios : Cópias ou plagio de trabalhos terão nota 0 (Zero). 

        • Algumas atividades poderão ser entregues por meio de link de repositórios, neste caso cabe ao discente garantir o acesso ou publicidade dos artefatos. Nesses casos o commit mais recente a data limite de entrega será considerado.

        • Atividades ou trabalhos entregues fora do formato especificado, quando tal for requisitado, receberão nota zero.

        • Nas atividades em que um modelo ou formato de entrega for especificado, este deve ser seguido. Caso haja divergência do formato especificado, a atividade receberá nota zero(0). Por exemplo, se o formato de entrega for .zip e um .rar for entregue, a nota atribuída será zero (0).

        • A utilização de terminologia correta será avaliada em qualquer tipo de atividade. Portanto, pode ser atribuída nota zero ou parcial para questões respondidas de maneira completa ou parcial que não apresentem a terminologia correta da área.

        • Todas as atividades desta unidade estão sujeitas à apresentação para que o docente possa identificar o real grau de conhecimento do aluno sobre a atividade. Dependendo da apresentação, a nota pode ser alterada. Em caso de necessidade de apresentação de qualquer atividade, o docente informará o discente através da ferramenta institucional.

        • Nas atividades entregues após a data definida receberão nota zero, exceto em casos onde sejam apresentadas justificativas legais previstas nos regulamentos institucionais.

        • Todas as atividades desta unidade estão sujeitas à apresentação  com arguição pelo docente, para que o docente possa identificar o real grau de conhecimento, domínio e compreensão  do aluno sobre a atividade e conteúdo.

        • Atividades que forem solicitadas, ou descritas com necessidade de apresentação é a nota pode ser alterada. Em caso de necessidade de apresentação de qualquer atividade, o docente informará o discente através da ferramenta institucional.A utilização de terminologia correta será avaliada em qualquer tipo de atividade. Portanto, pode ser atribuída nota zero ou parcial para questões respondidas de maneira completa ou parcial que não apresentem a terminologia correta da área.

        • Nas atividades em que um modelo ou formato de entrega for especificado, este deve ser seguido. Caso haja divergência do formato especificado, a atividade receberá nota zero(0). Por exemplo, se o formato de entrega for .zip e um .rar for entregue, a nota atribuída será zero (0).

        • Divergências em notas, ou correções devem ser comunicados ao docente para analise. Caso o discente descorde deve solicitar re-avaliação conforme RDP. 

        • Apresentação de atividades: As atividades que demandarem apresentação com arguição, a mera entrega dos artefatos sem apresentação com arguição tem nota zero (0). Nessas apresentações a nota é atribuída de acordo com conhecimento e domínio de manipulação dos artefatos identificados pelas respostas as arguições. Caso discente necessite de responder por escrito ou fazer adaptações deve comunicar ao professor. 

        Recuperação: Todas atividades terão oportunidade de recuperação. 

        Nota final: = (Avaliação 1+ Avaliação 2 + (Média das Atividades Propostas))

        As avaliações e atividades propostas poderão ser combinações das modalidades previstas para avaliação na RDP como avaliação escrita, observação em sala.


        • 1 - Introdução a web arquitetura cliente servidor e HTML Básico

          Introdução da história da web com foco na arquitetura cliente servidor e tecnologias HTTP, HTML, CSS e JS.
          Objetivos: 

          • Contexto do surgimento da web e internet
          • Tecnologias  utilizadas na web : arquitetura cliente servidor, protocolo HTTP, HTML, CSS e JavaScript. 
          • Estrutura básica  do HTML

        • 2 - CSS introdução Seletores , regras e propriedades básicas

          • url icon
            URL
            Slide - CSS URL
          • url icon
            URL
            Lista CSS URL
          • assign icon
            Tarefa
            CSS Atividade Tarefa

            • Seletores de Tipo (Tag): Seleciona todos os elementos que correspondem a uma determinada tag HTML. Exemplo: p { color: red; }.

            • Seletores de Classe: Utilizados para selecionar elementos com uma classe específica. Exemplo: .minha-classe { font-size: 16px; }.

            • Seletores de ID: Seleciona um elemento com um ID específico. Exemplo: #meu-id { border: 1px solid black; }.

            • Seletores de Atributo: Selecionam elementos com base em seus atributos. Exemplo: input[type="text"] { width: 100%; }.

            • Seletores Descendentes: Seleciona todos os elementos que são descendentes de um elemento específico. Exemplo: div p { color: green; }.

            • Seletores Filhos: Seleciona todos os elementos que são filhos diretos de um elemento específico. Exemplo: div > p { color: blue; }.

            • Seletores Irmãos Adjacentes: Seleciona o próximo elemento irmão de um elemento específico. Exemplo: h2 + p { margin-top: 0; }.

            • Seletores Irmãos Gerais: Seleciona todos os elementos irmãos de um elemento específico. Exemplo: h2 ~ p { margin-top: 0; }.

            • Seletores de Pseudo-classes: Permitem estilizar elementos em um estado particular, como hover ou focus. Exemplo: a:hover { text-decoration: underline; }.

            • Seletores de Pseudo-elementos: Usados para estilizar partes de um elemento. Exemplo: p::first-letter { font-size: 200%; }.

            • Seletores Universais: Seleciona todos os elementos em um documento. Exemplo: * { margin: 0; padding: 0; }.

            • Seletores de Combinação: Combina diferentes seletores para criar regras mais específicas. Exemplo: p.classe1#id1 { color: red; }



        • 3 - CSS posicionamento , CSS1 , 2 e 3

            1. Início do HTML (anos 90):

              • No começo, o HTML era principalmente usado para estruturar conteúdo. As opções de estilização eram limitadas, e os elementos eram posicionados em ordem sequencial, de cima para baixo, conforme apareciam no código fonte.

            2. CSS1 (1996):

              • O CSS (Cascading Style Sheets) foi introduzido para dar mais controle sobre a aparência dos elementos HTML.
              • A propriedade float foi introduzida, permitindo que elementos, como imagens, fossem "flutuados" à esquerda ou à direita, fazendo com que o texto fluísse ao redor deles.

            3. CSS2 (1998):

              • Introdução das propriedades de position, incluindo static (o padrão), relative, absolute e fixed. Isso permitiu aos desenvolvedores posicionarem os elementos com maior precisão na página.
              • O z-index também foi introduzido, permitindo o controle da sobreposição de elementos.

            4. CSS2.1 (2004-2011):

              • Esta foi uma revisão do CSS2, que corrigiu muitos problemas e inconsistências. Muitas das técnicas de posicionamento de CSS2 foram mantidas e aprimoradas.

            5. Flexbox (apresentado em 2009, com adoção mais ampla em meados da década de 2010):   https://www.w3.org/TR/css-flexbox/

              • Oferece uma maneira mais eficiente e previsível de alinhar, distribuir e organizar elementos em layouts complexos e quando as dimensões dos seus itens são desconhecidas ou dinâmicas.

            6. CSS Grid (introduzido em 2017):

              • Fornece uma abordagem bidimensional para layouts, permitindo o controle tanto nas colunas quanto nas linhas, tornando-se uma ferramenta poderosa para construção de layouts complexos.

            7. Position: sticky (introduzido em torno de 2014-2017, dependendo do navegador):

              • Um híbrido entre relative e fixed position. Um elemento sticky alterna entre relative e fixed, dependendo da rolagem do viewport.

          • page icon
            Página
            Notas de Aula sobre Transições e Animações com CSS Página
          • page icon
            Página
            Notas de Aula sobre Media Screen Página
          • url icon
            URL
            Slide - Flexbox URL
          • url icon
            URL
            Flexbos Infográfico URL
          • url icon
            URL
            Grid layout Infográfico URL

          • Estratégias gamificadas para ensino de posicionamento

            https://flukeout.github.io/   - Seletores CSS

            https://flexboxfroggy.com/  - Flexbox CSS

            http://www.flexboxdefense.com/ Flexbox CSS

            https://codingfantasy.com/ Flexbox CSS

            https://cssgridgarden.com/  Grid Layut CSS

          • url icon
            URL
            Lista positions, flex , grid e animações URL
          • assign icon
            Tarefa
            Lista positions flex grid e animações Tarefa

          • Responsive Layout @Media

        • 4 - Avaliação 1

        • Java Script

          • Java Script

            O conteúdo a ser abordado estará disponível no ambiente virtual de aprendizagem Moodle, incluindo vídeo-aulas, textos e uma lista de exercícios.

            Segue o roteiro detalhado da aula, que inclui exemplos e atividades práticas, disponivel no moodle apartir das 15:h

            1. Introdução e história do JavaScript (JS)

              • Contextualização e importância do JavaScript no desenvolvimento web
              • Evolução e principais versões do JavaScript

            2. Funcionamento do JavaScript e Árvore DOM (Document Object Model)

              • Como o navegador interpreta e executa o JavaScript
              • O que é a Árvore DOM e como ela é estruturada
              • Exemplo: manipulação de elementos HTML com JavaScript e DOM

            3. Variáveis e Tipos de Dados

              • Declaração e atribuição de variáveis
              • Tipos de dados em JavaScript (string, number, boolean, etc.)
              • Exemplo: manipulação de variáveis e tipos de dados

            4. Sintaxe básica, estruturas de seleção e repetição

              • Estruturas condicionais (if, else, switch)
              • Laços de repetição (for, while, do-while)
              • Exemplo: aplicação das estruturas de seleção e repetição em um código JavaScript

            5. Eventos do navegador

              • O que são eventos e como eles funcionam no JavaScript
              • Principais eventos do navegador (click, keyup, mouseover, etc.)
              • Exemplo: implementação de eventos em uma página web

            6. Atividades

              • Exercícios práticos relacionados aos tópicos abordados na aula
              • Discussão de soluções e esclarecimento de dúvidas

            https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

          • resource icon
            Arquivo
            Roiterio AulaJS Arquivo

          • Material no Notion :https://www.notion.so/Java-Script-66e6e4ba4e2b441492e73284a6e627c6?showMoveTo=true

          • Elementos disponiveis para JS no navegador:

            NomeTipoDescrição
            window Objeto Objeto global que representa a janela do navegador. Todos os outros (como alert, document, console, etc.) estão dentro dele.
            document Objeto Representa a página carregada. Permite acessar e modificar elementos HTML.
            console Objeto Usado para registrar mensagens e informações no console do navegador.
            alert() Função Exibe uma caixa de diálogo com uma mensagem.
            prompt() Função Exibe uma caixa para o usuário digitar um valor.
            confirm() Função Exibe uma caixa com "OK" e "Cancelar", retornando true ou false.
            location Objeto Fornece informações sobre a URL atual e permite redirecionar para outra página.
            navigator Objeto Fornece informações sobre o navegador do usuário, como nome, versão, idioma, etc.
            screen Objeto Contém informações sobre a resolução da tela do dispositivo.
            history Objeto Permite acessar e navegar pelo histórico de páginas visitadas.
            setTimeout() Função Executa uma função após um tempo de espera.
            setInterval() Função Executa uma função repetidamente em intervalos regulares.
            fetch() Função Realiza requisições HTTP assíncronas (comum em AJAX moderno).
          • url icon
            URL
            Lista JS URL
          • assign icon
            Tarefa
            Lista JS 01 Tarefa

        • Avaliação 2 - Projetos JS HTML CSS API