HACER UN “MOCKUP” CON INKSCAPE Y JAVASCRIPT

<script src=”other pages” title=”hacer un mockup con inkscape y javascript”>

Un mockup es un prototipo (generalmente de la interfaz) de un sistema, que permite a los clientes ver, en cierto grado, la funcionalidad de la aplicación, antes de que se inicie el desarrollo. También sirve para definir los requerimientos del cliente cuando no están muy claros y evitar cosas indebidas como la tragedia del Barco de Vasa.

No voy a explicar que es ni como se trabaja con la herramienta Inkscape, mucho menos como y donde se descarga o se instala en las diferentes plataformas (¬¬’ busquen en Youtube o Googléenlo), que este blog va de Javascript ¡caramba! Lo que si voy a explicar es que cuando crean un objeto (¡y en Inkscape, todo es un objeto!) pueden añadirle interacciones:

¿los nombres les parecen familiares?

¿los nombres les parecen familiares?

Una vez guardada su imagen (en formato *.svg) pueden abrirla en el navegador de su preferencia (el mío es Mozilla Firefox). Dentro de los campos de entrada pueden ingresar código Javascript trocho y mocho como si nada, como si de un WYSIWYG se tratara…

Lo más simple, puede ser usar el evento onclick con la función window.alert() o la propiedad window.location.href del DOM para “simular” la navegación entre páginas (que vendrían a ser otras imágenes *svg u otros recursos), las posibilidades son [casi] infinitas y muy sencillas, eso sí.

Hacer un mockup como punto de partida para el desarrollo de aplicaciones no es trabajo en vano. Grandes corporaciones como Mozilla y Google se benefician de esta tecnología reduciendo el tiempo en un 20 y 30% en fases superiores del desarrollo web. Nada despreciable comparado con un desarrollo simple en el que pudiera existir cambio de requerimientos de último minuto. Dicha práctica debería ser penada 😛

Si te decides a usar herramientas automatizadas porque esta solución propuesta te parece muy charcha, puedes revisar este enlace. Mientras tanto, el Barco de Vasa sigue navegando en los mares de la incertidumbre… 😉

BTW: El crédito por esta información no es mío, sino de un post que conseguí por aquí.

</script>

Anuncios