La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

La Tecnología SVG Autor: ABEL RIONDA RODRÍGUEZ NOVIEMBRE 2006 Escuela Politécnica Superior de Ingeniería de Gijón.

Presentaciones similares


Presentación del tema: "La Tecnología SVG Autor: ABEL RIONDA RODRÍGUEZ NOVIEMBRE 2006 Escuela Politécnica Superior de Ingeniería de Gijón."— Transcripción de la presentación:

1 La Tecnología SVG Autor: ABEL RIONDA RODRÍGUEZ NOVIEMBRE 2006 Escuela Politécnica Superior de Ingeniería de Gijón

2 Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones ÍNDICE

3 INTRODUCCIÓN Estudiar las características básicas de este lenguaje así como sus aplicaciones Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones

4 CARACTERÍSTICAS BÁSICAS (I) Estructura de un documento SVG Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Naturaleza XML -Modelo de renderizado -Reutilización de código mediante y

5 CARACTERÍSTICAS BÁSICAS (II) Sistemas de coordenadas Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Unidades: px,pt,in,com,mm,en,em,% -Importancia del atributo viewBox

6 CARACTERÍSTICAS BÁSICAS (III) Transformaciones Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Atributo transform -Escalado, translación, rotación y skew -Utilización de etiqueta -Posibilidad de aplicar una matriz de transformación -Más complejo -Las nuevas coordenadas se calculan como

7 CARACTERÍSTICAS BÁSICAS (IV) Elementos geométricos Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones - -. Curvas de bezier cuadráticas, cúbicas, arcos elípticos… - Elementos de texto Estilos -Posibilidad de aplicar estilos CSS a SVG -Atributos importantes: fill y stroke

8 CARACTERÍSTICAS BÁSICAS (V) Estilos (continuación) Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Atributo style embebido -Bloque style en el propio documento -Referencia a un documento CSS

9 CARACTERÍSTICAS BÁSICAS (VI) Efectos Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Gradientes -Para los atributos fill y stroke - -Filtros - -Efectos de brillo, color, iluminación, efectos morfológicos… -Clipping Path -

10 CARACTERÍSTICAS AVANZADAS (I) Interactividad Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Javascript -Tipos: -Eventos a través del ratón: onmouseout, onmouseover,onmousemove,onclick… -Eventos de interfaz: onfocusin, onfocusout, activate -Eventos de teclado: onkeydown,onkeyup,onkeypress -Eventos de estado: onSVGLoad,onSVGUnload,onSVGError -Scripts embebidos o externos: -Ejemplo

11 CARACTERÍSTICAS AVANZADAS (II) Animación Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -SMIL -Tipos: -Animación de transformaciones (escalado, rotación..): -Animación de color: -Animación a través de un Path: -Animación de valores numéricos ( ) y no numéricos -Atributos destacables:begin,end,from,to,dur,calcMode,fill,repeatDur… -Ejemplo

12 CARACTERÍSTICAS AVANZADAS (III) Accesibilidad Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Etiquetas y Hiperenlaces -XLINK

13 CARACTERÍSTICAS AVANZADAS (IV) Metadatos Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Etiquetas -Importancia en la búsqueda semántica -Basados en RDF o DublinCore

14 PERFILES SVG (I) Perfiles Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -SVG Full Orientado a dispositivos de escritorio -SVG Basic Orientado a PDAs -SVG Tiny Orientado a móviles

15 APLICACIONES DE SVG (I) Aplicaciones SIG Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Uso de AJAX -getURL() o XMLHTTPRequest() -Ejemplo Representación estadística -Librería de gráficos SVG -Características: Varios tipos de gráficos: barras, líneas,sectorial,dispersión.. Generación en diversos perfiles y exportación a otros formatos Opciones de interactividad,Animación,Scroll y Zoom Configuración de la presentación: disposición de elementos,opciones de ejes, rejilla…

16 APLICACIONES DE SVG (II) Representación estadística (continuación) Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -CCPP/WURFL Aplicaciones multidispositivo

17 SOPORTE ACTUAL (I) Navegadores con soporte nativo Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Mozilla Firefox 2.0 -Opera (desde la versión 8) -Amaya -NetFront Plugins disponibles -Adobe (multiplataforma) -SdVG:Desarrollado por BitFlash para móviles Otras herramientas -Librerías Java: -Batik -Tinyline -Editores: -Inkscape

18 CONCLUSIONES ¿Futuro de SVG? Introducción Características básicas Características avanzadas Perfiles Aplicaciones de SVG Soporte actual Conclusiones -Nuevos navegadores con soporte nativo -Más aplicaciones en SVG -Adobe ha anunciado el abandono del soporte del plugin SVG


Descargar ppt "La Tecnología SVG Autor: ABEL RIONDA RODRÍGUEZ NOVIEMBRE 2006 Escuela Politécnica Superior de Ingeniería de Gijón."

Presentaciones similares


Anuncios Google