Web
Fundamentos de Desenvolvimento Web
Oi Turma!
Eu sou a professora Sionise e este é o material da disciplina Fundamentos de Desenvolvimento Web, ou como carinhosamente (preguiçosamente) gosto de chamar: Web. Esta disciplina tem como objetivo te capacitar na criação de um site (front-end[1]).
Abaixo disponibilizo todo material utilizado em nossas aulas, para que você pode revisar e complementar os conteúdos aprendidos em sala de aula. #partiuEstudar👩🏫
[1] Front-end é a frente do site, parte visual, aquilo que os usuários conseguem ver e interagir.
Apresentações e Dicas de Estudos
0 - Apresentações FDW.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.
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.
1 - Desenvolvimento Web.pptx📖Vamos entender os princípios do desenvolvimento web e as principais tecnologias na construção de um site.
📺O que é Front-end? Que tecnologias usam? Nessa entrevista 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.
📺Neste vídeo do Wilson Neto, é apresentado a base necessária para se entender sobre programação web, como funciona, onde roda cada código e quais as tecnologias envolvidas.
📺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)
📺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.
📺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á.
HTML Básico
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.
Diferenciar as tecnologias de desenvolvimento web.
2 - Ferramentas de Edição de Código.pptx📖Para a construção de um Web Site vamos precisar de algumas ferramentas, e nesta aula iremos ver quais ferramentas são essas, como usá-las e como instalar cada um em seu computador.
3 - HTML e suas Tags.pptx📖O HTML é a estrutura básica para o desenvolvimento de websites. Nesse slide iremos aprender algumas tags básicas de HTML.
📺Nesse vídeo, do Código Fonte TV, o universo do HTML é apresentado, vale a pena assistir e conhecer mais sobre essa tecnologia que iremos utilizar muito ao longo do curso.
📖O site da Caelum disponibiliza gratuitamente uma apostila de Desenvolvimento Web, o material é muito bom e recomendo que você leia a apostila online que está disponível em:
Tags do HTML
No roteiro anterior, aprendemos o que é o HTML, o que são tags e seus atributos. Neste roteiro vamos conhecer mais algumas tags do HTML. Ao final deste, você será capaz de:
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.
4 - HTML - Textos, Imagens e Links.pptx📖Neste slide te apresento as principais tags HTML que podemos utilizar para desenvolver um site.
📺Suzeli Damaceno apresenta nesse vídeo algumas dicas de como descrever uma imagem. Dicas úteis para você usar ao descrever as imagens do seu projeto, no atributo alt.
5 - HTML - Estrutura do Body e Navegação.pptx📖Vamos continuar nossa saga com o HTML, explorando agora tags que nos permitirão criar menus de navegação e listas.
📺Aperta o play e além de prestigiar essa linda e maravilhosa EduTube, aprenda a criar a estrutura de pastas de um projeto web, como escrever um código fonte no Visual Studio Code e conheça algumas tags HTML (Doctype, html, head e body).
Aproveita e já me segue no Youtube e dê like nos vídeos🤭
📺Neste vídeo, que é continuação do anterior, te mostro algumas tags filhas da tag <head> e que tem o objetivo de passar informações ao navegador e ferramentas de busca. Então aperta o play, pegue seu caderno e vamos estudar!
📺Neste 3º vídeo vamos conhecer algumas tags filhas da tag Body. Vamos aprender como estruturar semanticamente as tags dentro do Body com topo, conteúdo principal e rodapé. Te mostro ainda, como inserir uma imagem, um título, uma lista de itens e um menu de navegação.
📺Que tal ir além do conteúdo mínimo obrigatório e aprendermos um pouco mais sobre HTML? Nesse material extra você irá conhecer a tag <video> que insere um vídeo no seu HTML.
📺Outra tag de mídia que não estudamos, é a tag <audio>, que advinha? Incorpora um áudio dentro da sua página HTML.
📺Quer inserir um conteúdo que está em outro site, como por exemplo, um vídeo do Youtube? Pois então conheça a tag <iframe> e seus atributos.
formulários em html
Até agora todo o HTML que você aprendeu o ajudou a comunicar suas ideias a seus usuários. Neste capítulo, você aprenderá como criar formulários que permitam a comunicação entre seus usuários e você. Ao final desta unidade você será capaz de:
Compreender os elementos HTML de um formulário.
Criar um formulário de contato para um site.
6 - HTML - Formulários.pptx📖Nesta aula vamos aprender como criar formulários e seus diversos elementos, como caixa de texto, caixa de seleção, botões, etc.
📺Neste vídeo a Rafaella Ballerini ensina como criar um formulário HTML e como formatá-lo com o CSS. Nesse roteiro, nosso foco é apenas aprender o HTML, por isso veja o vídeo até o 14:37m que é apenas a parte HTML do formulário.
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.
📺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.
🎧De onde veio o CSS? Quais são as boas práticas? Que ferramentas estão na boca do povo? Uma conversa sobre a evolução e possibilidades do CSS.
Como conteúdo extra, sugiro que você coloque um fone de ouvido e escute esse episódio de Podcast do Hipsters Ponto Tech sobre o CSS.
7 - CSS - Seletores e Valores.pptx📖 Chegou a hora de embelezar estilizar os nossos sites, para isso iremos usar a CSS, tecnologia que iremos começar a conhecer nessa aula.
8 - CSS - Textos e Backgrounds.pptx📖Nesta aula iremos conhecer as principais propriedades e valores para formatação de textos e background das nossas páginas web.
9 - CSS - Textos.pptx📖Nessa aula vamos aprender as principais propriedades, e seus respectivos valores, para estilização dos textos.
9 - CSS - Caixas.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".
📺Você sabe o que é o modelo de caixas? Sabe para que serve o box model em HTML e CSS? Sabe utilizar as propriedades height, width, padding, margin, outline? Sabe a diferença entre caixas box-level e inline-level? Pois acompanhe este vídeo até o final para responder a estas e muitas outras perguntas.
16 - Modelo de Caixas.pdf📖Pra reforçar mais ainda esses conceitos de caixas em CSS, confere essa apostila do prof. Guanabará (autor do vídeo anterior).
11 - CSS - Flexbox e Grid.pptx📖Vamos explorar um pouco mais as maneiras de posicionar os elementos em página por meio do display flex.
🎮Clique na imagem e vá até um joguinho de sapos e vitórias-régias que te ajudarão a ficar fera nos conceitos de Flexbox.
12 - CSS - Posicionamento dos Elementos.pptx📖Vamos continuar nossos estudos de como podemos mudar o posicionamento dos elementos em uma página HTML, por meio de propriedades em CSS.
12 - CSS - Responsivo.pptx📖Podemos acessar um site por diferentes dispositivos, seja um computador desktop de tela grande ou mini celular, por isso é importante projetamos nosso layout para diferentes tamanhos de telas.
📝Atividade 2º Bimestre - Criação de Um Site Pessoal
Essa atividade é integrada com a disciplina IHC.
Publicando seu Site na Web
📖Você sabe como disponibilizar os projetos feitos em seu computador para que outras possam acessar? Então "bora" para mais uma aula para entendermos como podemos disponibilizar nosso site na internet.
📖Git e GitHub são algumas ferramentas bem interessantes que todo Dev ter conhecimento.
18 - Aprendendo Git e GitHub.pdf📖Complementando seus estudos sobre Hospedagem e GitHub, sugiro a leitura deste material criado pelo professor Gustavo Guanabara. Vale a pena a leitura!
📖📺🎮📝
📖📺🎮📝
📖📺🎮📝
📺
📖📺🎮📝
📺