Embedded Files
Desenvolvimento para Web I
Oi Turma! "Hello World!"
Este é o material da disciplina Desenvolvimento para Web I (Web1). Logo abaixo você encontrará todo material para seu estudo:
⏺️Apresentações e Dicas de Estudos
⏺️Apresentações e Dicas de Estudos
Nessa unidade vamos nos conhecer, explorar o conteúdo da disciplina, entender e acordar como serão a estrutura e dinâmica das aulas, bem como estabelecer em conjunto as metodologias e abordagens de estudo que serão utilizadas ao longo da disciplina, para alcançarmos nossas metas educacionais.
0 - Apresentações - IFPE CAF - Web1.pptx📖Sabe aquele primeiro dia de aula que o professor se apresenta, combina como serão as aulas e depois pede pra que cada aluno fale de si? Pois é, neste roteiro iremos fazer essas apresentações.
📖Antes de iniciarmos nossos estudos, te convido a clicar no link abaixo para aprender como se aprende. Leia atentamente as dicas, e depois aplique na sua rotina, adaptando conforme sua realidade.
Leia: DICAS DE ESTUDO.
Calendario_Academico_2025_2.pdf📖Esse é o calendário acadêmico do IFPE, salve, imprima se possível, e o use para criar o seu plano de estudo.
📝A1 - Perfil do Aluno
Nesta primeira atividade, você deverá preencher o formulário que inclui informações de contato obrigatórias, e as demais perguntas são totalmente voluntária! Seus dados ficarão armazenado numa planilha no Google Drive, acessível apenas por mim.
🗓️Entrega: 28/08/2025
🎖️Nota: 1.0 ponto.
🧩Dinâmica de Trabalho: Individual
1️⃣Introdução ao Desenvolvimento Web
1️⃣Introdução ao Desenvolvimento Web
Você sabe como funciona a Web? Como é feito um site? Quais tecnologias são utilizadas para fazer uma página web? Ao final deste roteiro você será capaz de:
Entender os princípios do desenvolvimento web.
Compreender as regras e boas práticas do desenvolvimento web.
Diferenciar as tecnologias de desenvolvimento web.
1 - Introdução ao Desenvolvimento Web.pptx📖Antes de começarmos a construir nossos primeiros programas, vamos entender os princípios do desenvolvimento web e as principais tecnologias na construção de um site.
📺Nesse vídeo da Alura são apresentados os conceitos de desenvolvedor(a) front-end, e os termos HTML, CSS e JavaScript. Aperta o play e assiste esse vídeo para reforçar esses conceitos que farão parte do seu dia-a-dia.
📺Do que a internet é realmente feita? E como ela funciona? A resposta a estas perguntas envolve a descoberta de como os cabos de internet ficam dispostos no mar, se o 5G é realmente o futuro e como balões na estratosfera estão ajudando as pessoas a se conectarem. (Vídeo legendado)
📺O Professor Gustavo Guanabara explica nesse vídeo o que é hospedagem e domínio, conceitos que iremos entender melhor e praticar na última etapa da nossa disciplina, mas que é bom que você entenda alguns conceitos desde já.
📺Neste vídeo, do canal Alura, é discutido como funciona a web e o que acontece por baixo dos panos dos browsers mais usados como Google Chrome, Safari, Firefox e outros.
2️⃣HTML
2️⃣HTML
Nessa unidade iremos estudar o HTML, o que essa tecnologia faz e como usá-la para criar nossas primeiras páginas web, também iremos estudar sobre as Tags HTML e sua estrutura e regras. O objetivo, é que ao final dessa unidade você seja capaz de:
Compreender o que é HTML e tags.
Conhecer a estrutura básica do HTML.
Entender as etapas básicas de criação de uma página HTML.
Criar a estrutura de um site básico.
Incluir listas, links, imagens e textos em uma página web.
Compreender os elementos HTML de um formulário.
Criar um formulário de contato para um site.
2 - HTML e Tags Básicas.pptx📖O HTML é a estrutura básica para o desenvolvimento de websites. Nesse slide iremos aprender algumas tags básicas de HTML que definem a estrutura de um site e passam informações aos navegadores e ferramentas de busca.
3 - HTML - Tags de Textos e Links.pptx📖Vamos explorar nessa aula algumas tags que nos permite trabalhar com textos e links.
4 - HTML - Tags de Midias.pptx📖Vamos combinar que uma página sem mídia fica muito sem graça né?! Nessa aula vamos conhecer algumas tags que nos permitem trabalhar com imagens, vídeos e áudio.
5 - HTML - Formulário.pptx📖Para finalizar nossa jornada no mundo do HTML, vamos conhecer as principais tags de formulários, que permite ao usuário interagir com o nosso sistema.
📺O professor Gustavo Guanabara tem um curso completinho de HTML e CSS, totalmente grátis no Youtube e que vale muito a pena você fazer o curso para complementar seus estudos.
📺Nesse vídeo, do Código Fonte TV, o universo do HTML é apresentado, vale a pena assistir e conhecer mais sobre essa tecnologia.
📺Suzeli Damaceno apresenta nesse vídeo algumas dicas de como descrever uma imagem. Dicas úteis para você usar no atributo alt e garantir a acessibilidade de um site.
📝A2 - Avaliação
Que tal jogarmos um bingo e ainda testarmos o conhecimento em HTML?
🗓️Avaliação da Unidade 1: 03/10/2025
🎖️Nota: 10.0 ponto.
🧩Dinâmica da Avaliação: Individual onde cada aluno irá responder as 20 perguntas sorteadas. Se tiver sorte, pode ainda bingar e levar uns docinhos pra casa 😊
💻Código Fonte do Bingo - 📖Livro que compartilhei a dinâmica do bingo
3️⃣CSS
3️⃣CSS
Quando escrevemos o HTML, marcamos o conteúdo da página com tags que melhor representam o significado daquele conteúdo. Porém, quando visualizamos no browser o que fizemos, não temos visualmente um site agradável e interessante. Isso porque toda a parte estética dos nossos sistemas Web são desenvolvidas com o CSS e o que vimos é apenas a formatação padrão dos navegadores. Nessa unidade iremos conhecer um pouco mais sobre o CSS e ao final desta unidade você será capaz de:
Criar um arquivo CSS externo e associá-lo ao HTML.
Conhecer e identificar os principais tipos de seletores existentes no CSS.
Inserir comentários no código fonte CSS.
Conhecer as propriedades e valores que formatam os principais elementos do HTML.
6 - CSS - Seletores e Valores.pptx📖 Chegou a hora de embelezar estilizar os nossos sites, para isso iremos usar o CSS, tecnologia que iremos começar a brincar nessa aula.
🎮Topa um desafio? Então clica na imagem acima e treine o conceito de seletores em CSS.
7 - CSS - Background.pptx📖 Vamos nessa aula iniciar nosso estudo sobre propriedades, compreender como podemos mudar o fundo das nossas páginas e como usar variáveis no CSS.
8 - CSS - Textos.pptx📖Chegou a hora de conhecer as propriedades e valores do CSS que nos permitem formatar textos em páginas web.
9 - CSS - Caixas e Display.pptx📖 Todos os elementos em HTML são vistos pelos navegadores como caixas umas dentre de outras. Nessa aula vamos entender o que são essas "caixas".
🎮Vamos jogar e aprender alguns conceitos de Flexbox?
📺Neste vídeo do Código Fonte TV o CSS é apresentado desde a sua história até as técnicas mais modernas utilizadas, atualmente, na versão 3.
📺Você sabe o que é o modelo de caixas? Para que serve o box model? Sabe utilizar as propriedades height, width, padding, margin, outline? Pois acompanhe este vídeo até o final para responder a estas e muitas outras perguntas.
📺Qual é a diferença entre block, inline, inline-block e flex no CSS? Dá o play e veja como cada um desses valores de display funciona e em quais situações você deve usar cada um deles para construir layouts modernos e responsivos.
📝A3 - 2ª Unidade -
Chegou a hora de você (eu disse você, não a IA) e construir seu próprio site. Acesse o formulário acima, leia a descrição detalhada da atividade, envie o link do projeto no GitHub e apresente presencialmente na próxima aula.
🗓️Entrega: 23/10/2025
🎖️Nota: 5 pontos.
🧩Dinâmica de Trabalho: Individual
10 - CSS - Animações.pptx📖O CSS nos permite criar algumas animações nos elementos HTML e nessa aula vamos aprender como aplicar isso.
4️⃣JavaScript
4️⃣JavaScript
Quando você concluir essa unidade você conseguirá:
Compreender os conceitos básicos da linguagem de programação JavaScript
Integrar código JS em páginas web, permitindo uma maior interação do usuário com um site
12 - JS - Introdução pra Devs.pptx📖Vamos começar a programar com a linguagem de programação JavaScript e conhecer alguns comandos básicos dessa linguagem.
13 - JS - Expressões Aritméticas e Lógicas.pptx📖Nessa aula vamos revisar alguns conceitos da Matemática e vamos aprender como construir programas que realizem cálculos aritméticos e cálculos lógicos.
8 - Estrutura de Seleção - JS.pptx📖Nessa aula vamos aprender que nem sempre o algoritmo tem uma estrutura sequencial, e no meio do caminho ele pode ter desvios.
10 - Estrutura de Repetição - JS.pptx📖Outra estrutura de controle que usaremos muito na programação são as Estrutura de Repetição que aprenderemos nessa aula.
Page updated
Report abuse