www.argonavis.com.br

X500 - SVG - Scalable Vector Graphics

SVG é um padrão aberto especificado pelo World Wide Web Consortium (W3C), o mesmo consórcio responsável pelos padrões HTML, CSS, XML, XSL, PNG, DOM, dentre outros. É uma linguagem para desenvolver gráficos vetoriais em duas dimensões comparável na Web ao formato Flash. Atualmente é gerado por softwares populares como Adobe Ilustrator, Corel Draw, Inkscape, mas o poder do SVG está na possibilidade de utilizá-lo para criar animações e interagir com HTML, CSS, DOM e JavaScript para construir sites altamente interativos. Para isto é preciso conhecer e editar o código. SVG tem se tornado cada vez mais popular com o advento de browsers e plataformas que o suportam, sendo o único formato Web vetorial suportado no iPad e iPhone (já que Flash não está presente nessas plataformas), e com suporte cada vez maior dos principais fabricantes da Web.

Este curso foi construído para ensinar como construir gráficos em SVG usando XML com base nas ultimas especificacoes. Ao final do curso o aluno será capaz de criar gráficos e animações usando SVG, ou abrir arquivos SVG gerados em softwares como Ilustrator, Inkscape ou Corel Draw e editá-los, acrescentar scripts e recursos de animação, ou ainda incluir o SVG em linguagens de template (como XSLT) para gerar SVG com dados dinâmicos. O curso é prático, com demonstrações, exemplos e exercícios em cada módulo, que exploram os recursos apresentados.

O curso pode ser contratado em varios formatos. O curso basico cobrindo os principais recursos da especificacao suportados nos visualizadores atuais dura 24 horas. Os modulos de transfrormacao XSLT e programacao DOM avancada sao oferecidos separadamente, para publicos que tiverem interesse e pre-requisitos.

A maior parte dos exemplos apresentados rodam de forma nativa (sem plugin) nos seguintes browsers:

• Google Chrome 4
• Apple Safari 5
• Opera 10.6
• Firefox 4
• Internet Explorer 9

Está disponível para download a apostila deste curso (slides em PDF): um tutorial completo de SVG. Veja também alguns gráficos SVG usados em exemplos, demonstrações e exercícios deste curso. A aplicação experimental Orbitas neste site foi desenvolvida com XSLT e SVG.

Objetivos

Ao final deste curso, o aluno terá o conhecimento necessário para:

• criar gráficos SVG usando um editor de textos
• organizar de forma eficiente a estrutura de um gráfico SVG
• desenhar figuras básicas, curvas, arcos e caminhos arbitrários
• desenhar, formatar e alinhar texto, em caminhos retos ou curvos
• incluir imagens PNG, GIF e JPEG
• aplicar filtros, gradientes, padrões e máscaras
• realizar transformação de coordenadas para girar, alterar o tamanho, cisalhar e deslocar objetos
• animar atributos de objetos para fazê-los mover pelo espaço, mudar de cor, girar, crescer, deformar
• fazer objetos responderem a eventos provocados pelo usuário
• acessar objetos usando o Document Object Model através de JavaScript, para criar gráficos interativos, animados e dinâmicos
• apresentar alternativas ao SVG em browsers que nao suportam SVG atraves da geracao de imagens alternativas, ou via bibliotecas JavaScript
• como aplicar estilos CSS ao mesmo tempo em SVG e HTML
• como incluir gráficos SVG em páginas Web, PDF e HTML5
• gerar dinamicamente gráficos SVG usando dados extraídos de XML com transformação via templates XSLT (opcional)
• construir gráficos SVG que possam ser carregados em uma página como um componente (similar ao uso de Flash), permitindo grande interatividade e comunicação com formulários HTML e JavaScript (opcional).

Pré-requisitos

Saber usar XML; ter conhecimentos elementares de HTML, JavaScript e CSS; conhecimento de XSLT é desejável.

Carga-horária (adaptável)

(24, 32 ou 40 horas):

• módulos 1 a 9: 24 horas
• módulo 10: 8 horas
• módulo 11: 8 horas

Público-alvo

Web-designers, programadores, artistas gráficos.

Este curso está disponível para turmas (grupos) fechados de até 12 alunos, ou a escolas que tenham interesse em realizar parceria para oferecer turmas abertas.

Material didatico

Slides usados em aula, apostila com referências, e arquivos de exemplos e exercicios.

Como em vários outros cursos da Argo Navis, slides usados no curso estão disponíveis para download e podem ser usados como um tutorial. A versão disponibilizada aqui foi criada em 2003, atualizada e expandida em 2010. Clique no capítulo desejado no programa do curso, ou baixe o material inteiro em um único PDF.

Programa básico (24h)

0. O que é SVG: ferramentas, suporte e plataformas
1. Cores de preenchimento, estilos e traços
2. Figuras básicas: retângulos, círculos, elipses, polígonos e linhas
3. Estrutura do documento: grupos, símbolos e marcadores
4. Caminhos, curvas Bézier e arcos
5. Texto, fontes e efeitos com texto
6. Filtros e efeitos gráficos com filter, gradient, pattern, clipping, masks
7. Viewbox e transformação de coordenadas
8. Manipulação de componentes SVG com JavaScript e DOM
9. Animação SVG com SMIL

Módulos opcionais

10. Geração de SVG com XSLT: mostra como gerar gráficos SVG extraindo dados de páginas Web, bancos de dados ou arquivos XML, com a geração dinâmica de gráficos de barra, gráficos de torta e animações. A maior parte do módulo (75%) é dedicado a demonstrações e exercícios. Pré-requisito: desejável conhecimentos básicos de XSLT e XPath (este módulo faz uma breve revisão de XPath e XSLT).
11. Programação e componentes com SVG DOM e JavaScript: este módulo aprofunda o que foi explorado no capítulo 8 e mostra como construir componentes SVG muito interativos que podem ser reusados em páginas e configurados via parâmetros, usando JavaScript e CSS. Pré-requisito: conhecimento prático de HTML, CSS e JavaScript.