Uso de herramientas open source en la educacin

por James Lynn

Scalable Vector Graphics

SVG es un estndar abierto basado en formato XML para describir imgenes vectoriales en 2D, estticas, animadas e interactivas.

Un poco de historia sobre SVG

En 1998 Macromedia, HP, Autodesk, Visio Corp y Microsoft sometieron a la W3C el VML (Vector Markup Language) basado en XML para que fuera considerado como estndar en grficas en vectoriales para la web.

Por otra parte Adobe, IBM, Netscape y Sun Microsystems presentaron PGML (Precision Graphics Markup Language) a la W3C.

Un poco de historia sobre SVG

En febrero del ao 1999 la W3C public el primer borrador de la especificacin.

Un poco de historia sobre SVG

Microsoft implement VML en su navegador

Adobe lanz el plug-in SVG ViewerEsto le di la capacidad a los browsers de desplegar contenido SVG

Pretenda competir con FlashEl apoyo a este plug-in se descontinu
en enero de 2009.

Un poco de historia sobre SVG

Authoring tools de Adobe en esta pgina Illustrator CS2 y GoLive. Se nota que no se actualiza hace aos.

Por qu considerar SVG?

Archivos pequeos = fast download

Vectores = resolution independent

Las imgenes se construyen en el navegador

El usuario puede interactuar y modificar las imgenes de forma sencilla y prctica

Apoyo nativo a SMIL (Synchronized Media Integration Language) por lo cual es capaz de producir animaciones

Por qu considerar SVG?

Su lenguaje de scripting es JavaScript

Por ser XML facilita su conversin, importacin y exportacin desde y hacia otros formatos

Es un formato totalmente abierto

Podemos editarlo con cualquier editor de texto. No es necesario software especializado.

Apoyo entre los navegadores

Actualmente son los grandes en apoyo a SVG

Ambos browsers son ms rpidos que Firefox manejando grficas SVGDesde sus comienzo (2008) Chrome ha tenido la capacidad de desplegar SVG.

Haba que usar el Adobe SVG plug-in pero IE9 le da apoyo nativo a SVG pero no completo.

SVG mvil

SVG Tiny

SVG Basic

La meta es proveer la capacidad de crear una amplia gama de contenido grfico esttico, animado e interactivo para dispositivos mviles incluyendo laptops y computadoras.

SVG mvil

iPhone a travs de Safari

Cualquier celular o unidad mvil a travs de Opera

Qu necesito para trabajar?

Papel

Editor de texto

Navegador

Capacidades de SVG

Lneas

Paths

Figuras bsicasRectngulos

Elipses

Polgonos

Texto

Fill and Line color

Animacin

Fonts

Gradientes y Patrones

Clip, mscaras y montajes

Filtros / Efectos

Interactividad

Enlaces / Links

Scripting

SMIL (Synchronized Multimedia Integration Language)

JavaScript

Metadata

Software

Corel Draw

Adobe Illustrator

Adobe Acrobat

Inkscape
(su formato nativo es SVG)

GIMP

The GNOME Project

Google Docs

LibreOffice Writer

Microsoft Visio

OpenOffice Draw

Scribus

Xara Xtreme

Referencias

W3C
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

Wikipedia
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics http://en.wikipedia.org/wiki/SVG_animation

WordIQ
http://www.wordiq.com/definition/SVG

SVG Tutorial
http://www.itk.ilstu.edu/faculty/javila/svg/SVG_overview/origins.htm

SVG Authoring tools and editors
http://www.w3.org/Graphics/SVG/IG/wiki/Authoring_tools_and_editors

Referencias

Mozilla SVG Project
http://www.mozilla.org/projects/svg/

SVG-edit Editor Online de SVG
http://code.google.com/p/svg-edit/

SVG at Google and in Internet Explorer
The official Google Code Blog
http://googlecode.blogspot.com/2009/10/svg-at-google-and-in-internet-explorer.html

SVG Open
http://www.svgopen.org/2002/papers/robinson__csiro_svg_mobile/

SVG Logo Usos y poltica
http://www.w3.org/2009/08/svg-logos.html

Encuntrame
y sgueme

Blog: www.jameslynn.com

Twitter: @jameslynn

Facebook.com/JamesJLynn

Click to edit the title text format

Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline LevelSeventh Outline LevelEighth Outline LevelNinth Outline Level