Fundamentos da Web

Fundamentos da Web

Turmas

Introdução

Fundamentos da Web é uma disciplina voltada para a construção de interfaces digitais, como sites e aplicativos para a web. O curso envolve trabalhos relacionados ao leiaute e projeto de páginas, bem como a produção e estruturação de conteúdos. Os designers web são profissionais que utilizam linguagens de marcação para estruturar conteúdos e recursos tecnológicos para estilização. No nosso curso, aprenderemos a trabalhar com as linguagens de marcação XML e HTML5 e a tecnologia de estilização de páginas CSS3. Segundo o consórcio W3C, a tecnologia padrão para a estruturação de páginas é o HTML5, enquanto a configuração da parte visual dos sites fica a cargo do CSS. Também teremos uma introdução a linguagens de programação client-side.

Objetivos

  • Apresentação da arquitetura da Internet e da Web
  • Análise de problemas e formulação de páginas Web por meio de linguagem de marcação
  • Análise de problemas e estilização de páginas por meio de folhas de estilo
  • Compreensão e aplicação de boas práticas de projetos de interfaces web
  • Compreensão e aplicação de boas práticas de projetos de acessibilidade
  • Compreensão e formulação de programas client-side para tratamento de eventos e validação de dados
  • Compreensão e aplicação de conceitos relacionados a arquitetura REST e o protocolo HTTP
  • Análise de problemas e formulação de algoritmos para requisições assíncronas por meio de linguagens de script
  • Análise e escolha de frameworks para aumento de produtividade em desenvolvimento de páginas web

Fontes Recomendadas

Os alunos devem acompanhar os materiais de apoio disponibilizados pelos canais oficiais do CEFET, sobretudo o MS Teams. Há uma farta literatura sobre a disciplina, tais como W3Schools, RocketSeat e outros tantos canais recomendados durante as aulas.

Dicas

Encontre dicas de tecnologias web aqui.

Materiais de Aula

Aulas

1. Introdução a Internet

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.

2. Linguagens de Marcação

Linguagens de marcação e dados semi-estruturados; HTML - marcações e sintaxe básica. Aprenda sobre marcações de texto e listas. Como os clientes web interpretam páginas web? De que formas tornar o carregamento mais eficiente?

3. HTML - Links, Imagens e Listas

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.

4. HTML - Tabelas

Organize dados tabulares utilizando marcações para tabelas. O que são frames e como utilizá-los para mashups.

5. Diagramação de Sites e HTML Semântico

Nesta aula, discutimos 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 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!

6. Formulários

Nesta aula, são apresentados os recursos para o envio de dados da página HTML para um servidor. Os formulários possuem diferentes elementos de dados, com diferentes propósitos.

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

8. JavaScript

O Javascript é uma linguagem multiparadigma, leve e poderosíssima e que vem ganhando mais adeptos a cada dia.

9. EcmaScript 6

Nesta aula discutiremos os tipos de dados em ECMAScript e as principais facilidades para sua manipulação.

10. Manipulação do DOM

Aprenda a manipular páginas Web dinamicamente através de scripts. Trate eventos e valide formulários.

11. AJAX

Aprenda a fazer requisições HTTP de forma assíncrona com a Fetch API. Para isto, discutiremos as Promisses em Javascript.

12. Local Storage

Nesta aula, veremos como armazenar dados no Cliente usando uma API.

13. Interface de dispositivos móveis

Aprenda sobre viewport e os recursos de media query. Projeto de interfaces baseados em grids.

14. Frameworks de CSS e o Bootstrap

Buscando componentes de terceiros para agilizar projetos.

15. User Experience - UX

De que formas podemos conceber projetos de interfaces mais inclusivos e atraentes aos nossos clientes?

16. JQuery

Old but gold!