Desenhando na Web com CSS, Canvas e SVG

16h

Descrição

Os recursos gráficos da Web são fundamentais para construir sites leves, eficientes e responsivos. Também são a base de diversas bibliotecas de visualização de dados, jogos e animações, em 2D e 3D.

Este minicurso apresenta os principais recursos e conceitos fundamentais das tecnologias padrão do W3C dedicadas a gráficos vetoriais: HTML5 Canvas e SVG, que embora alcancem os mesmos resultados visuais, têm estratégias e propósitos diferentes. Também são explorados os recursos visuais e de animação do CSS, que podem ser aplicados a HTML e SVG, e introduzidas bibliotecas de visualização de dados que geram gráficos com SVG e Canvas como D3.js, Chart.js e P5.js.

Este é um curso 100% prático. O aluno irá usar durante o curso os principais recursos gráficos do Canvas e SVG para desenhar na Web desde figuras simples, como formas básicas, sombras, cores, gradientes, até figuras complexas como gráficos interativos e mapas.

Ao final do curso o aluno deverá ser capaz de:

  • Descrever a diferença entre gráficos vetoriais e imagens
  • Usar CSS para aplicar cores, fontes, gradientes, padrões, sombras, bordas e transparência em objetos HTML e SVG
  • Criar gráficos vetoriais usando HTML5 Canvas e SVG
  • Usar HTML DOM para acessar e manipular objetos Canvas e elementos gráficos do SVG
  • Capturar e tratar eventos em elementos SVG e Canvas
  • Carregar um arquivo de informações geográficas (GeoJSON) e desenhar um mapa numa página Web usando Canvas oun SVG
  • Construir um mini-jogo interativo na Web usando SVG ou Canvas
  • Conhecer e usar os recursos básicos de bibliotecas que geram SVG e Canvas

Os participantes devem ter conhecimentos elementares de HTML, CSS e JavaScript.

Programa resumido

  1. Introdução: gráficos vetoriais, HTML, DOM e CSS
  2. HTML5 Canvas
  3. SVG
  4. Aplicações práticas usando SVG e Canvas
  5. Bibliotecas de visualização de dados

Cursos relacionados