Calendario 2018 argentina

https://www.opendesktop.org/p/1205772/

Calendario 2018 con feriados para Argentina, y calendario en formato tabla para imprimir en A4.

En formato SVG y en PDF

Ver Calendario 2019 >>>

 

Cerrando el año con Vamox Icons 2.1

Vamox Argentum in Vamox 2.1

 

 

Despedimos el 2017 haciendo oficial la versión 2.1 que incluye un nuevo color gris claro "Argentum", ideal para temas GTK oscuros.

We close 2017 merging version 210 as the main version, which includes a new color "Argentum" a light grey ideal for dark GTK themes

https://www.opendesktop.org/p/1012492/

Donar / Donate

Ya sea descargando Vamox desde OpenDesktop o a través del botón de PayPal a la derecha del blog, está ayudando a mantener Vamox y los proyectos derivados

Downloading Vamox from OpenDesktop or using the PayPal button you are helping to keep Vamox and the derivative projects:

Vamox icons

Hay varias mejoras en camino y una variante de color nueva, que se han postergado para atender trabajos comerciales. Tengo otras ideas para completar el proyecto, pero eso es para un post separado.

We have several improvements on the ways and a new color, delayed to do work for clientes. I have a couple of ideas to complete the project, but I have to make a post for that.

DGSL / SLAD

Crear tutoriales sobre herramientas libres y mantener el listado de software libre para diseño actualizado. Además algunos contenidos se adaptan al Laboratorio de SL de la UNLP

Right now I'm making several tutorials and lists of resources, mainly in spanish. It can be translated if requested.

JessyInk doc

El proyecto jessyink necesita programadores para mejorar algunas funciones, pero también necesita más usuarios. Yo no soy programador, pero puedo aportar al proyecto mejorando la documentación. Mi guia es más completa que el contenido oficial, y aún falta listar todas las funciones del plugin.

The Jessyink Projecto need more programmers to fix and add some functions, but also needs more users. I'm not a programmer, but at least I can help creating better documentation. My Guide is more complete than the oficcial info (I need to translate to it english) and still lacks listing all the features of the plugin.

Proyecto 100 marplatenses dicen para MdPdataFEST 2017

Este fin de semana estuve en el hackatón MdP data Fest (en realidad también ayudé con el diseño de logo del evento y otras piezas de comunicación). Mi idea fue usar mis conocimientos de Inkscape y Jessyink para convertir los datos que estaban en papel (o en PDF) en un material de consulta interactivo que se pueda ver online o descargar.

Yo durante la semana anterior habia estado trabajando un poco en el funcionamiento, pero el día del evento recibí la ayuda de varias personas, especialmente Silvana Trapani que me ayudó a cruzar información importante sobre el agua y las inundaciones.

Como este hackatón tenía un premio en $$$, trabajé para intentar ganarlo y poder usar ese premio para financiar la creación de templates y mejor documentación sobre Jessyink. Pero como no gané tengo que seguir busando interesados: usuarios de inkscape por un lado que lo empiecen a probar y reportar bugs, programadores Python y Javascript que aporten código al proyecto (en Launchpad), donde yo pude reportar bugs, o en Inkscape, donde me rechazaron al intentar sumarme.

Ver 100 marplatenses dicen online

Version para ver en pantalla completa

100 maplatenses en Github

Algunas capturas de ejemplo:

Charla "PowerPoint vas a morir wiii"

Dado que el evento BarCamp donde pensaba presentarla está agotado, la comparto, espero que les sea útil.

Durante estos meses he ido a varios eventos, buscando información y asesoramiento para mis proyectos, y he visto toda clase de presentaciones sin ningún criterio estético, y en alguno casos poca organización del contenido.

Investigando un poco he encontrado personas que se oponen conceptualmente al uso de PowerPoint, y articulos que lo defienden.

Si bien considero que hacer un buen acompañamiento audiovisual está dentro de la competencia del diseñador, es difícil que alguien delegue el trabajo en un profesional. Pero si puedo hacer un trabajo de consultoría o workshop en el tema.



Descarga directa

http://vmodiseño.com.ar/charla-bc.pdf

en issuu

Mapa de licencias y Proyecto Vamox en Acamica Tour MDQ

Quienes ya han visto algunas charlas mías anteriores habrán visto que hice un gráfico para explicar Copyright y Copyleft, y hacía tiempo que tenía en la cabeza hacer una versión más artística, levemente inspirada en el mapa del Señor de los Anillos de Tolkien.

Mi idea es que esta sea la primer versión, todo comentario, corrección y critica será bienvenido para hacer una versión mejor, una ilustración que valga la pena imprimir como poster.

Descarga:

https://www.dropbox.com/s/8omp2izls6cxg9b/mapa.svg?dl=0

https://www.mediafire.com/file/21p0vh6pq2f7poq/mapa.svg

Ver mapa interactivo online:

vmodiseño.com.ar/mapa.svg

 

 

Además preparé una charla en la que sinteticé el proceso de desarrollo de Vamox, desde 2006 en adelante, y las dificultades que hemos tenido en el camino. Personalmente me ha servido para pensar como mantener el proyecto activo, siendo coherente al manifiesto que escribimos hace 10 años, pero no encerrarme, pensar en que temas le interesa a la gente que no es un fundamentalista del Software Libre, pero con gusto usa soluciones libres cuando sirven.

Descarga:

https://www.dropbox.com/s/n5z9mc6qmcp9i74/charla1310.svg?dl=0

https://www.mediafire.com/file/undefined/charla1310.svg

Ver charla online:

http://vmodiseño.com.ar/charla1310.svg

[Tutorial] Inkscape + JessyInk = presentaciones dinamicas

 

 versión en video (lista de reproducción)

Versión en texto

Manual en PDF, ejemplos y componentes

Introducción

Esta es una guía para explicar como utilizar las funciones de JessyInk, es necesario tener un poco de experiencia usando Inkscape

Que es inkscape?

Un programa de ilustración vectorial, que utiliza como formato nativo el Standard Vector Graphic (SVG) que es norma ISO y es posible verlo en un navegador web.

Que es JessyInk?

Una extensión para inkscape que agrega código javascript al archivo SVG. Le agrega funcionalidades que lo convierten en una presentación, similar a Prezi o Sozi (también disponible en inkscape), Cada capa se convierte en una página, y también se puede agregar movimiento de cámara similar a Prezi.

NOTA: Inkscape 0.92.2 corrige el problema de las vistas en el navegador Chrome, si usa una versión anterior es necesario editar el archivo SVG con un editor de texto y agregar un código al final del archivo.

 

Definiciones básicas

En el menú extensiones de inkscape podemos ver un item JessyInk, y dentro algunos items:

Instalar/Actualizar: Instalar el código de JessyInk en el archivo SVG

Efectos: Animación que tiene un objeto o grupo de objetos.

Combinaciones de tecla: Ver / modificar los atajos de teclado.

Transiciones: Efecto de transición entre una página y la siguiente.

Gestos de ratón: Ver / modificar los controles para modificar la presentación con el mouse. Es importante desactivarlo si se van a hacer presentaciones con enlaces, pero es muy práctico para controlar la presentación con un mouse inalambrico como si fuera un control remoto.

Auto textos: Campos dinámicos de texto como el número de página.

Diapositiva maestra: una hoja hoja cuyo contenido se repite en todas las páginas de la presentación.

Resumen: información del archivo.

Desinstalar/eliminar: Eliminar el código de JessyInk para que vuelva a ser un documento con capas.

Video: herramienta para incrustar videos en la presentación.

Vista: define el movimiento de la cámara a través de objetos que definen la posición, rotación y tamaño.

Funcionalidades

Modo Dispositiva

Por defecto, es el modo de navegación de la presentación. Es posible avanzar la presentación con las flechas o la barra espaciadora, Las teclas de inicio y fin irán a la primera y última página.

Modo dibujo (tecla d)

Es un modo que permite dibujar sobre la presentación, como para hacer notas, aclaraciones, o usarlo como un pizarrón digital.

Modo indice (tecla i)

Sirve para ver varias páginas a la vez, seleccion con el teclado o mouse a cual queremos ir.

Control a través del mouse

Puede ser más cómodo maneja la presentación con el click del mouse o con la rueda de scroll (en este último las vistas no tienen animación).

Ventajas

• Libertad de dibujo de Inkscape, sin tener que exportar a otro programa.
• Cómodo para convertir otros diseños en presentaciones.
• Cada capa se convierte en una página, y se puede hacer vistas (movimiento de cámara)
• Es posible generar enlaces internos y links externos.
• Es posible controlarla con teclado o mouse.
• Modo dibujo para usarlo como pizzarón digital.

Desventajas

• Es más complejo que usar Impress.
• Efectos de transiciones simples.
• Los cuadros de texto con formato no funcionan en algunos navegadores.
• No tenemos ninguna referencia visual cuando ponemos una vista o efecto.

• El visor de video no funciona bien en Chrome (Corregido en inkscape 0.92.2)  

Crear presentaciones

Pasos previos

Instalar jessyInk en el archivo SVG

Menú extensiones / JessyInk / Instalar-actualizar...

Click en Aplicar.

Preparar el documento

Cambie el formato de la presentación para que se vea bien a pantalla completa.

Menú  Archivo / Propiedades del documento

En el tamaño elija un formato 4:3 o 16:9 dependiendo de la resolución en la que se proyectará.

Agregar metadatos

Archivo / Metadatos del documento

Al verlo en un navegador, es posible cambiar el titulo de la presentación, y agregar campos que ayuden a indexar la presentación en ellos buscadores web.

Diseño básico

La ventaja de usar Inkscape es la libertad para generar gráficos y textos. Podemos usar una grilla y guias para organizar y mantener el estilo.

Es posible organizar toda la presentación en una sola capa, cambiando la posición de la cámara, en diferentes páginas, o una combinación de ambos.

Se le puede poner cualquier nombre a las capas, personalmente prefiero poner algo fácil de escribir porque después hay que escribir el nombre de las capas para agregar transiciones. Además prefiero numerarlas empezando por el número 0, para tener una referencia cuando quiera agrear links entre páginas.

Vistas

Una de las funcionalidades que más deseadas de Jessyink es poder hacer zoom y rotación sobre la presentación, que al ser vectorial no pierde calidad. Para lograrlo se le asigna a un grupo de objeto el rol de vista, que durante la presentación es invisible. Personalmente uso rectángulos en proporción 16:9 para tener control sobre la vista.

Además es posible asignar la vista a un grupo de objetos, cosa que es útil para generar un grupo con un número que sor sirva para ver el orden.
Por defecto la vista 0 es la vista de la página completa.

Efectos

Es posible hacer que un grupo de objetos sea invisible y que luego aparezca o viceversa. En conjunto con las vistas se puede utilizar para diferentes efectos como mostrar textos al hacer zoom a un detalle o hacer desaparecer objetos al alejarse.

No tenemos muchas opciones, pero son bastante prácticas:

• Ninguno: no hay efecto, siempre es visible. Sirve para sacarle un efecto a un grupo.
• Aparecer: visible de manera instantánea.
• Desvanecer:  fade-in o fade-out al que podemos asignar la duración
• Saltar: el grupo de objetos se mueve hasta su posición.

Transiciones (entre páginas)

Entre página y página es posible definiar la transición de entrada y salida. Las opciones disponibles son las mismas que en efectos.
La diferencia es que es necesario indicar el nombre de la capa, por eso prefiero mantener nombres simples en el que solo cambie el número.

Control por teclado / mouse

Por defecto se activan controles para manejar la presentación, cambiar de modos y otras funcionalidades.

Agregar links

En inkscape es posible crear enlaces que funcionan al ver el SVG en un navegador web. En combinación con jessyInk se convierte es una poderosa herramienta para generar contenido interactivo y evitar la navegación lineal que es uno de los problemas que tienen los slides convencionales.

Importante: desactive los controles por mouse, sino al hacer click va a cambiar de hoja en vez de abrir el link

Agregar enlaces a sitios externos

Para crear un enlace cree un rectangulo para definir el tamaño del botón (puede hacerlo transparente si quiere) use tengo o un diseño para identificarlo, cree un grupo (Ctrl-G).

Seleccione ese grupo, haga click derecho del mouse y seleccione  “Crear enlace”.

Nuevamente botón derecho, propiedades del enlace. Eso nos va a abrir un panel lateral con los parámetros del enlace:

Los nombres de los campos les van a sonar conocidos a quienes trabajen en diseño web:

• href: la dirección web “http://...”
• Objetivo: Si queremos que el enlace se abra en otra ventana, hay que poner “_blank”
• Titulo: Descripción que queremos que aparezca cuando pasamos el mouse sobre el enlace.

Enlace entre páginas del documento

Se crea un enlace de la misma manera que en el paso anterior, pero en href debe poner

• javascript:slideSetActiveSlide(0)

Donde “0” debe ser reemplazado por el número de la página.

(la numeración de las páginas empiezan en 0, así que la segunda es 1, etc)

Enlace a la vista siguiente

Se puede hacer un botón para avanzar a la vista siguiente. Esto es útil para que las presentaciones funcionen en dispositivos móviles si desactivamos el mouse (o tap) para pasar la presentación.

Creamos un grupo, lo convertimos en enlace y en el campo href:

• javascript:javascript:dispatchEffects(1)

GIF

Es posible incrustar o enlazar un .gif animado de la misma manera que una imagen, y la reproducción es automática.

Video

El applet de video permite poner un clip en un formato que soporte nuestro navegador web, como por ejemplo OGG. Cuando el SVG en un navegador, le agrega los controles propios del browser, hacer click derecho para más opciones, etc. En este momento el video funciona bien en Firefox, pero con problemas en Chrome.


Extensiones / Jessyink / Video...

Al agregar un objeto video, aparece un grupo de objetos: un cuadro gris y un campo de texto. El primero debe ajustarse al tamaño del clip y el segundo la dirección al archivo.

Para seleccionar objetos que están dentro de un grupo, use la tecla “Ctrl” + click izquierdo. En el caso del rectángulo gris, puede usar los parámetros del objetos rectánculo para cambiar la ubicación y tamaño, para que tenga la misma proporción que el video.

El cuadro de texto donde está la ubicación se debe cambiar por la dirección donde está el video.ogv. Si es en la misma carpeta sería "vid.ogv", si está en una subcarpeta "videos/vid.ogv", etc.

Página maestra

Podemos definir una capa para que quede se repita en el fondo de las demás páginas.

Funciones extras

(Requiere saber algo de código XML / CSS) Como se trata de un archivo SVG, hay algunos cambios que se pueden hacer editando el código XML, cosa que no es demasiado difícil si saben algo de diseño web.

Corregir bug de las vistas en Chrome

Un cambio en el que el motor Webkit maneja ciertos elementos, hizo que las vistas en Jessyink se vieran mal. Si hizo la presentación con una versión de Inkscape anterior a 0.92.2 y las vistas no funcionan, es necesario editar el archivo SVG, agregando el siguiente código:

/** `SVGElement.getTransformToElement` polyfill

*/

SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) {

return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());

};

Linkear tipografías

El problema que tienen las presentaciones de Inkscape + JessyInk es que usan las fuentes tipográficas que estén en el sistema, si el que lo ve no las tiene instaladas puede tener problemas con algunos textos.

La solución más convencional es convertir todos los textos a trayectos, pero eso tiene dos problemas: el archivo es mucho más pesado y el texto no se puede editar.

La solución que encontré es linkear las fuentes con un poco de código CSS, insertado entre las definiciones básica del archivo

y las definiciones de degradados


En este caso usé la fuente Roboto. También podría haberlo linkeado con Google Fonts, pero de esta manera la presentación funciona completamente offline.

Imágenes con enlaces relativos

Cuando uno agrega una imagen a la presentación y la linkea, el enlace es absoluto, es decir en linux va a ser “home/usuario/carpeta/archivo”, o en windows “C: /capeta/...”

Si la presentación solo se va a ver en su máquina, no va a tener problema, pero si quiere ponerla en la web es necesario que los enlaces sean relativos al SVG, por ejemplo si pongo la imagen en una subcarpeta, el enlace sería “images/imagen.jpg”.

Personalmente uso el editor web Geany, pero se puede usar cualquier editor de texto que tenga la función de buscar y reemplazar, para cambiar los enlaces absolutos a relativos, y que la presentación funcione en otras máquinas y online.

Advertencia: Cuando abra el SVG con inkscape es posible que vuelva a cambiar las direcciones de las imágenes.
Links

Descargar rama 2.1 beta de Vamox de Github

Estoy haciendo una nueva rama en Github para probar el nuevo tema gris. Es decir que si entran a la página del proyecto pueden ver que la versión 2.0.3 es la rama master y la pueden descargar haciendo click en el botón Clone or download

La nueva versión de Vamox, versión 2.1 o v 210 es una "branch" separada y pueden ir a ella presionando master y eligiéndola de la lista.

Ahora pueden ver que en la rama v.210  está el nuevo tema "Argentum" y puede ir a "Clone or download" y descargarlo.

Un tema gris?

Una vez lanzado el tema Jacarandá, realmente no sabía cual sería el siguiente paso. MI idea era hacer un color usando el azul del borde, pero me hicieron una pregunta si iba a hacer un tema gris. Creo que quedaría bien para continuar el tema es hacer un tema plateado, especialmente por que nombre de mi país surge por la obsesión por la búsqueda del preciado metal.

Wallpaper Jcarandá

Wallpaper Jacarandá (1920 x 1080)

Foto propia, diponible en DeviantArt

10 años de Vamox

Este año se cumplen 10 años del comienzo de este blog y siempre fue mi intención festejarlo de alguna manera.

Durante el año pasado y parte de este no hubo muchas publicaciones, pero yo estuve trabajando, tratando de armar cursos o talleres, algún espacio fisico que estuviera interesado en el tema.

Por otro lado empezar a conocer algo de GIT como para mantener el proyecto de iconos online, y usamos para crear un tema nuevo de iconos.

En este proceso nos encontramos con cambios como lo que solía ser Gnome-look ahora se llama Open Desktop, con nuevos diseños, y por lo visto durante un tiempo no habia links de descarga.

Y reorganizar los links de descargas llevó a modificar el tema de este blog, para hacer un menú que lleven a páginas con enlaces a los tutoriales y recursos de una manera más organizada. Todavía está en proceso, como también estamos tratando de traducir algo de información a inglés.

Últimos cambios de la version 2.0.3

Viendo que correcciones se podian hacer en el tema Jacarandá, noté que los iconos de batería tenian que ser más claros, sin perder la diferenciación con el icono de Wi-Fi.

En el uso diario no era demasiado claro que indicaba la aguja, cual era el final de la escala y dividir el color que presentaba la bateria restante no ayudaba.

Así que hice los iconos color y los symbolic, manteniendo la posición del icono que representa cuando se está cargando, pero moviendo la luz de alerta y poniendo el semicirculo que representa la carga a la izquierda.
ma

Por otro ladola noticia es que la versión 2.0.3 ya es la versión oficial del tema, y cambios que sugieran o correcciones quedaran para la 2.0.4 o 2.1

Vamox Wiki on Github

I can't translate every article to English, but I will try to write about the development of the icon system on a Wini in Github.

https://github.com/DaFeBa/vamox-icons/wiki

 No voy a traducir todos los articulos a inglés, pero voy a intentar escribir sobre el desarrollo de los iconos Vamox en la Wiki en Github.

Guia básica de inkscape

Slides para ayudar a quienes quieran empezar a usar Inkscape. Además la presentación está en formato SVG, así que la pueden ver en cualquier navegador. (hecho con Inkscape + Jessink)

Descarga archivo SVG:

https://www.mediafire.com/file/u21o7fls3sghmh4/inkscape-cheatsheet.zip

https://www.dropbox.com/s/xc2kf0lsujomsha/inkscape-cheatsheet.zip?dl=0

Algunas mejoras de iconos

Revisando los iconos, noté que el icono para "clear" era confuso respecto al icono para eliminar archivo, y que no tenía la misma coherencia que tenia por ejemplo los iconos para zoom o los botones de la ventana.

Por otro lado el icono "Programación" en las categorías del menú, la idea es tratar de usar referencias a objetos reales, pero creo que hacer referencia a la simbología de la programación es más claro.

cambiando colores en lote en SVG

Hacer una variante de color editando cada archivo sería una tarea tortuosa. Pero como el formato SVG está basado en XML, es posible editarlo con un editor de texto.

 

Usando Geany se pueden abrir multiples archivos SVG, y después realizar una operación de reemplazo de texto. En este caso la mayoría de los iconos usan el mismo degradado, al cambiar 2 valores "#RRGGBB"  cambian la mayoría de los iconos, y solo unos pocos iconos se tienen que editar de manera manual.

Vamox icons 2.0.2

Vamox icon 2.0.2

mate (green), ceibo (red) & celeste (light-blue)

Download:
 
https://www.mediafire.com/file/s6qqbdl4mc9yu8c/vamox-icons-202.tar.gz

https://www.dropbox.com/s/gra1ur4uygzq7oe/vamox-icons-202.tar.gz?dl=0



 

Changes:

• Border fixed in next.
• New Dev category.
• Start-here: Vamox icon as default, in places there are alternatives icons.
• system Logout different from exit program.

Roadmap

This is the first step to update / fix the current theme before creating a new colour: the "Jacarandá" A tree with lavender-like flowers in the spring

Esta es la primera actualización del tema actual, antes de crear un nuevo color: El color Jacarandá, un árbol con flores de color simil lavanda durante la primavera.

Vamox en Github

https://github.com/DaFeBa/vamox-icons

Estoy en el proceso de aprender más de Git , para mantener de mejor manera Vamox y permitir que otros puedan colaborar, reportar o sugerir mejoras.


Y como ven, trataré de ser bilingüe
___________________________________________________________


I'm in the process of learning more about Git , to update Vamox and be open to collaborator, specially those who can report or suggest fixes.

And as you can read,  I will try to be bilingual