Fundamentos da Web - 2023.2

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

   Materiais de apoio

   Slides de CSS Slides de Bordas e Dimensões

5. Recursos de CSS3

   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. Formulários HTML 5

   As marcações de formulário viabilizam o envio de dados para servidores. No HTML 5, novos tipos de entradas de dados foram disponibilizados para aprimorar a experiência do usuário.

   Materiais de apoio

   Slides de Formulários

7. Responsividade

   Discutimos como criar sites responsivos utilizando Media queries.

   Atividade do dia

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

   Materiais de apoio

   Slides de CSS Slides de JavaScript

8. Prova 1

   28/09/2023

   Atividade avaliativa 01

9. Metodologias CSS

   Discutimos as abordagens para organização e componentização de CSS para melhorar a manutenibilidade e reutilização de componentes visuais.

   Materiais de apoio

   Slides de Metodologias CSS

10. Introdução a JavaScript

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

    Materiais de apoio

    Slides de JavaScript

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

    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

12. 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.