Plano de Curso

Perguntas? Leia o FAQ.

Objetivos da disciplina

O objetivo da disciplina é oferecer um contato inicial com os fundamentos da programação de frontends de aplicativos web. Ao final do curso, o estudante deve ser capaz de projetar e criar pequenos sites e páginas contendo aplicativos web simples, que usem diretamente as tecnologias fundamentais da web: HTML, CSS e JavaScript e as principais APIs do browser moderno.

DISCLAIMER: É importante destacar, contudo, que o foco do curso é apresentar as tecnologias fundamentais e, por isso, nenhum framework ou biblioteca (tais como React, Angular, Vue, Svelte, Alpine, Lit, jQuery, Bootstrap, etc) será usado e/ou apresentado na disciplina.

Metodologia

• usarei uma metodologia “inspirada” em PBL (Project Based Learning)
• criaremos, ao longo do semestre, um site: um portal para uma coordenação de curso da UFCG, com vários pequenos apps — trata-se de uma coordenação hipotética, mas se o prof. Fubica quiser comprar o produto ao final do curso, a gente pode discutir os valores e dividimos os lucros ;-)
• a exposição do conteúdo será dirigida pelas necessidades do site que vamos construir (ajustada por mim, claro, para as necessidades do que devemos cobrir de conteúdo)

Avaliação

• avaliação contínua com uma componente de auto-avaliação;

• a ideia é usar uma metodologia de avaliação baseada em dois elementos: ii) avaliação por participação; e ii) auto-avaliação;

• a avaliação por participação será baseada na sua presença às aulas (usarei quizzes para coletar a presença e ao mesmo tempo para verificar a compreensão dos conceitos), na sua participação na construção do site (via commits), nos exercícios, nos coding dojos, etc; a ideia é que a “mera participação efetiva” nas atividades já seja suficiente para acumular parte da nota necessária para ser aprovado com nota mínima;

• a auto-avaliação será feita através de mecanismos que vou proporcionar para que você mesmo faça uma auto-avaliação periódica de seu desempenho ao longo do curso;

Cronograma do conteúdo programático

IMPORTANTE. Este é o cronograma do último semestre em que a disciplina foi ofertada. Ainda será necessário fazer ajustes a este cronograma, para adaptá-lo à metodologia de PBL e à construção do site tema do curso.

1. Introdução à Web

• breve histórico da web
• a tríade de tecnologias: HTML, CSS e JavaScript
• páginas estáticas X aplicações: o browser como ambiente de execução

2. Introdução à sintaxe e semântica de HTML

• sintaxe básica/geral: arquivo html, elementos, atributos, etc;
• semântica: source code, DOM, visualização no canvas do browser
• elementos semânticos
• servidores de desenvolvimento
• servidores reais e publicação (deploy)
• cedo pra mostrar componentes (elementos pra forms)

3. Introdução à sintaxe e semântica de CSS

• sintaxe básica/geral: regras, seletores, properties, valores
• semântica: como afeta o DOM, como afeta a visualização
• o box model
• principais properties e seletores

4. Introdução a JavaScript

• javascript para programadores Java e Python
• o que é muito parecido e o que não é em: tipos de dados e controle de fluxo
• o melhor de JavaScript: funções (diferenças em sintaxe e semântica)
• regras de escopo em JavaScript

5. Orientação a Objetos em JavaScript

• classes em JavaScript
• warning: classes são meio fake em JS (só existem em nível sintático; internamente, JS usa OO por prototipagem)
• objetos importantes no browser: console, window, document e elementos do DOM (anteciparei o básico de cada uma dessas APIs)

6. Programação funcional com JavaScript

• funções como entidades de primeira classe em JavaScript
• funções de alta ordem: que recebem funções e/ou que retornam funções
• closures
• Arrays e suporte a map, filter e reduce (e outras funções de estilo funcional muito usadas na prática de JS)

7. Programação assíncrona (Parte 1)

• setTimeout e setInterval
• preemptive versus cooperative multitasking
• cuidados com cooperative multitasking e single threads (thread da aplicação é compartilhada com o serviço de renderização do browser)

8. Programação assíncrona (Parte 2)

• eventos, loop de eventos: pilha de execução versus fila de eventos
• promises (anteciparei a API Fetch como exemplo)
• await e async

9. APIs do Browser em mais detalhes

• o browser como ambiente de execução controlado via APIs
• overview das principais APIs existente
• APIs selecionadas que veremos em mais detalhe: Selection e Fetch

10. Runtimes de execução de JavaScript (browser vs node)

• diferenças entre o runtime e o engine
• os diferentes JS Engines existentes
• node e as peculiaridades de seu runtime

Bibliografia recomendada

Devido à abundância de material didático sobre o assunto, é importante oferecermos uma lista curada de leituras para o estudante. Os livros abaixo são os recomendados, muito embora em diferentes partes do curso, alguns livros sejam mais recomendados que outros (isso será feito ao longo do curso e sob demanda). No curso não haverá um livro-texto oficial a ser seguido. Além disso, muito material online de boa qualidade será recomendado. Seguem os livros que cobrem a maior parte do conteúdo.

• Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web, Tim Berners Lee, 2000
• JavaScript: The Good Parts: The Good Parts, 1st Edition, Douglas Crockford, 2008
• HTML and CSS: Design and Build Websites, Jon Ducket, 2011
• Head First HTML and CSS: A Learner’s Guide to Creating Standards-Based Web Pages, Elisabeth Robson and Eric Freeman, 2012
• Eloquent JavaScript: A Modern Introduction to Programming 3rd Edition, Marijn Haverbeke, 2019
• JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language, 7th Edition, David Flanagan, 2020
• Modern JavaScript for the Impatient 1st Edition, Cay S. Horstmann, 2020
• JavaScript Cookbook: Programming the Web, 3rd Edition, Adam D. Scott, 2021

O estudante também será orientado a consultar fontes oficiais da especificação das tecnologias web, mais especificamente, do consórcio web e outras fontes que costumam produzir e manter conteúdo de boa qualidade e atualizado. Seguem os principais sites.

• https://www.w3.org/
• https://spec.whatwg.org/
• https://developer.mozilla.org/
• https://developers.google.com/web
• https://wiki.csswg.org/
• https://css-tricks.com/
• https://www.ecma-international.org/technical-committees/tc39/
• https://github.com/tc39/ecma262/
• https://caniuse.com/

• Leia também o Plano de Curso
• Perguntas? Leia o FAQ.