Fundamentos da Web - 2023.1

Avisos

Não esqueça de atualizar sua página pessoal.

Atividades

Todas as entregas devem ser feitas pelo site do aluno.

Nos campos de resposta, o aluno deve disponibilizar o link para sua atividade.

1. A Internet e a Web

   Nesta aula, abordamos o desenvolvimento das tecnologias da informação e da comunicação que fizeram da Internet o que conhecemos hoje. Discutindo a evolução da Internet, tecnologias relacionadas e protocolos mais usados. Então trataremos da Web - tecnologias, desafios e padrões web.

   Em seguida, apresentaremos as linguagens de marcação e dados semi-estruturados; Primeiro, introduzimos a linguagem XML, utilizada para estruturar dados de uma forma geral, para então abordarmos a linguagem HTML, utilizada para estruturar dados em páginas web. Para tais linguagens de marcação, discutimos a forma e sintaxe básica de cada uma delas.

   Tarefa

   Crie uma estrutura de dados para comportar um currículo utilizando XML.

   Material de apoio

   Slides de aula

   NÃO SE LIMITE A ESTUDAR PELAS TRANSPARÊNCIAS DE AULA. USE AS REFERÊNCIAS RECOMENDADAS NOS SLIDES E BUSQUE MAIS INFORMAÇÕES NOS SITES RECOMENDADOS DURANTE AS AULAS.

2. Fundamentos de HTML

   Iniciamos esta aula apresentando como os navegadores interpretam páginas web? Conhecer esse fluxo possibilita identificar de que formas tornar o carregamento mais eficiente.

   O passo seguinte é discutir a estrutura dos documentos HTML:
   html
   > head
   > body

   Temas da aula

   • doctype
   • Contêiner principal (html)
   • head: metadescritores e tags de configuração
   • body: a viewport
   • Tags de conteúdo: h1-h6, hr, p, pre, br, strong, em, mark, del, ins, sub, sup, q, blockquote, cite, abbr, address, code, time, span.

   Tarefa

   • Disponibilizar uma página index.html bem formatada, com informações sobre uma pessoa que te inspire.
   • Seu site deve ser validado na ferramenta https://validator.w3.org

   Material de apoio

   Slides de aula

   NÃO SE LIMITE A ESTUDAR PELAS TRANSPARÊNCIAS DE AULA. USE AS REFERÊNCIAS RECOMENDADAS NOS SLIDES E BUSQUE MAIS INFORMAÇÕES NOS SITES RECOMENDADOS DURANTE AS AULAS.

3. HTML - Links, Imagens, Listas e Tabelas

   Aprenda as marcações básicas para exibição de imagens e links. Aprenda sobre endereçamento de recursos. Tipos de listas e estruturação de itens. Organize dados tabulares utilizando marcações para tabelas. O que são iframes e como utilizá-los para mashups.

   Diagramação de Sites e HTML Semântico

   Também discutiremos como os conteúdos são estruturados e organizados nas páginas HTML. A abordagem inicial, trata do uso de marcações <div> para todo o trabalho. Com o avanço tecnológico e o uso cada vez mais frequente de Web crawlers e Web scrappers em busca de conteúdos em páginas, será que as divs são apropriadas? Como um desenvolvedor em busca de conteúdo fará para descobrir o significado dos dados estruturados em divs com ids em outros idiomas, por exemplo? Para resolver este e outros problemas, foram criados um conjunto de marcações novas, que possuem a mesma função das divs, porém deixam claro o significado do conteúdo inserido. Este é o assunto discutido nesta aula. Bons estudos!

   Exercícios de tags de conteúdo

   Enunciados aqui

   Atividade

   Juntos fizemos a diagramação de um site (consultoria James). O resultado no estado atual está disponível aqui.

   O site é assim. Diferente? Como discutimos, o HTML apenas estrutura a página web! A apresentação será apresentada em mais detalhes quando tratarmos de CSS.

   Git e GitHub

   Fizemos um laboratório para a criação de uma conta no Github e discutimos o funcionamento básico do Git. Finalmente, todos os alunos publicaram suas primeiras páginas web. A partir de agora, os exercícios deverão ser publicados nos Github pages dos alunos.

   Materiais de apoio

   Slides de imagens e agrupamento Slides de Diagramação Git e GitHub

4. Estilização de Páginas

   O CSS3 trouxe uma série de avanços que permitiram separar de vez as responsabilidades do HTML, CSS e JavaScript. A partir de recursos avançados de transição e transformação, já não são mais necessários scripts para fazer animações de elementos, ficando tudo a cargo do CSS. Além do mais, os seletores avançados do CSS3 facilitam a aplicação de propriedades de visualização sem a necessidade de criar várias classes para isto (melhorando a escrita do HTML). As pseudo-classes e pseudo-elementos auxiliam neste sentido.

   Desafio do dia

   Reproduza o site de acordo com o protótipo disponível em LINK
   Valendo 0,5ponto na média da P1.

   Materiais de apoio

   Slides de CSS Slides de Seletores avançados de CSS

5. Recursos de CSS3

   31/03/2023

   O CSS3 trouxe uma série de avanços que permitiram separar de vez as responsabilidades do HTML, CSS e JavaScript. A partir de recursos avançados de transição e transformação, já não são mais necessários scripts para fazer animações de elementos, ficando tudo a cargo do CSS. Além do mais, os seletores avançados do CSS3 facilitam a aplicação de propriedades de visualização sem a necessidade de criar várias classes para isto (melhorando a escrita do HTML). As pseudo-classes e pseudo-elementos auxiliam neste sentido.

   Desafio do dia

   Reproduza o site de acordo com o protótipo disponível em LINK

   Materiais de apoio

   Slides de CSS Slides de Seletores avançados de CSS

6. Prova 1

   14/04/2023

   Atividade avaliativa 01

7. Responsividade

   28/04/2023

   Discutimos como criar sites responsivos utilizando Media queries.

   Atividade do dia

   Implementar o site James Consultoria com as interfaces para celular e tablet LINK

   Introdução a JavaScript

   Discutimos as origens e influências da linguagem. Sintaxe e paradigmas suportados.

   Materiais de apoio

   Slides de CSS Slides de JavaScript

8. JavaScript - Escopo, Funções e Estruturas

   05/05/2023

   Discutimos como criar sites responsivos utilizando Media queries.

   Introdução a JavaScript

   Discutimos as origens e influências da linguagem. Sintaxe e paradigmas suportados.

   Atividades

   Site de Exemplo

9. JavaScript - Funções Assíncronas

   26/05/2023

   Atividades

   Jogo da Marmota

Produção dos Alunos

Grupos

Fontes Recomendadas

Os alunos devem acompanhar os materiais de apoio disponibilizados pelos canais - MS Teams e o site da disciplina.

Há diversas fontes sobre a disciplina, tais como W3Schools, Udemy e outros tantos canais recomendados durante as aulas.