El pasado 25 de Octubre de 2011 tuve el honor de presentar las primeras Jornadas de Adobe en la Universidad de Alicante.

Miguel Cazorla y yo organizamos unas conferencias para potenciar las tecnologías de Adobe a través del DCCIA (Departamento de Ciencia de la Computación e Inteligencia). En esta ocasión tuvimos la suerte de contar con ponentes de altísimo nivel, sin duda de lo mejor del panorama nacional: Jorge Monchón, Ignacio Lledó y Raúl Jimenez.

Aquí os mostramos un resumen de las conferencias y sus videos (gracias a Carlos Guillén por las grabaciones y el trabajo de edición del streaming)

Acabados y texturas en retratos en Photoshop

Ignacio Lledó
Spanish Photoshop Adobe User Group

Nacho es Adobe Certified Instructor Photoshop CS5, Adobe Certified Expert Photoshop, manager de Adobe User Group entre otros. Es el profesor con más cursos en video2brain, cursos de formación online!

Fue una conferencia alucinante donde nos mostró trucos interesantes: retratos, retoques en la piel, modificar cuellos, color de ojos, poner abdominales, hacer caricaturas, arrugas en la piel, simetrias y perfección…
Personalmente me impactó la sencillez con lo que hacía cada ejemplo y los maravillosos resultados.

AfterEffects 5.5 te hace súper-productivo

Jorge Monchon
Adobe User Group AdobeLaBo

Genial conferencia de Jorge Monchón instructor de AfterEffects, Adobe Certified Expert en After Effects desde el 2001, Adobe Certified Instructor de Premiere y After Effects desde el 2005. Entre sus éxitos dirigió la postproducción del “Enigma del chico croqueta” de Pablo Llorens que obtuvo el Goya 2005 al mejor corto de animación. También es profesor de After Effects en video2brain.

Durante la conferencia se vieron ejemplos tan interesantes como estabilizadores de imágenes, correcciones selectivas, herramientas de deformación y animación de imágenes simulando planos 3D

Una conferencia llena de humor y muy amena. Como él dice: “After y yo nos conocimos una tarde… al principio no quería tener relaciones conmigo pero hace 15 años saltó la chispa!”

Flex Hero

Raúl Jimenez
Spanish Mobile & Devices Adobe User Group

Mi gran amigo Raúl, desarrollador de ActionScript con muchos años de experiencia, es Adobe Certified Expert y Adobe Certified Instructor en Flash Lite 3 y Manager del Spanish Mobile and Devices Adobe User Group.

Nos deleitó con una conferencia sobre Flex Hero. Nos explicó en qué consiste Flex Hero (framework de desarrollo rápido para mobile), qué podemos hacer con él y nos enseñó un muy buen ejemplo de un lector RSS con online y offline y geolocalización así como todas sus características.

Muchas gracias a todos los ponentes por participar en estas Jornadas, ha sido un honor contar con todos vosotros

Después de las Jornadas de Emprendedores en Informática de la Universidad de Alicante desde la misma Escuela Politécnica se nos invitó a redactar un artículo para su Revista Digital (en el número 7) sobre nuestra experiencia como emprendedores.

Este artículo es una retrospectiva de la andadura de nitsnets | studios desde sus humildes inicios allá por 2005 hasta el presente, incluyendo eventos y proyectos clave como la creación de este mismo blog que estáis leyendo ahora mismo .

Muchas gracias a Carlos Guillén por su constante trabajo en la comunicación y hacer posible este tipo de publicaciones. De nuevo agradecer también a mi buen amigo Miguel Cazorla la invitación a las conferencias, a partir de las cuales surgió este articulo.

Se pueden ver los videos en el post anterior: Jornadas de emprendedores en Informática en la Universidad de Alicante

De la UA a la nube con una buena tripulación. La aventura de nitsnets | studios

En el año 2001 el Campus de la Universidad de Alicante, con su estructura y sus amplios espacios peatonales, ya era uno de los mejores de Europa. Llegamos a la EPS con mucha ilusión. Eran tiempos de 32 MB de RAM, de módems chirriantes y de clamar por una “tarifa plana” barata. Parece que el emprendedor se lleva dentro porque ya entonces realizaba pequeños proyectos web convirtiéndome sin darme cuenta en free lance.

En la carrera descubrimos los lenguajes de programación, las bases de datos y todo un mundo que abría grandes posibilidades. En la aventura de emprender la elección de la tecnología es esencial. ¡Nosotros elegimos el mundo online!

El impulso creativo y la necesidad de encarar mayores proyectos me llevaron a empezar mi aventura desde el vivero de empresas de la UA. No era un garaje, pero se le parecía mucho. Hemos usado todos los medios que la Universidad pone a nuestro servicio: realizamos el plan de empresa en una asignatura de Empresariales, acogimos alumnos en prácticas de la Universidad incluido yo mismo , contratamos a otros con el programa GIPE, ganamos premios diversos, participamos en proyectos de investigación de robótica… Hasta el punto de formar parte del profesorado dando cursos de Flash y participando en la creación y docencia del Master Proweb del Departamento de Ciencia de la Computación e Inteligencia Artificial siempre de la mano de Miguel Cazorla, a quien agradezco que siempre creyera en mi. Los recursos de la UA, bien aprovechados, dan para mucho y no podemos estar más agradecido. Tks!
El otro gran descubrimiento de la facultad fueron los amigos y contactos, determinantes luego para formar un equipo. Prácticamente toda la plantilla actual se han formado como ingenieros en la Universidad de Alicante. Rodearse del mejor equipo humano es fundamental al emprender.

Con todo esto y con los ingredientes indispensables de ilusión, pasión por lo que haces, disfrutar con tu trabajo y la confianza de salir adelante empezamos nuestro camino.

Había que dar el paso y en agosto de 2005 se constituyó como empresa
nitsnets | studios con una oficina en el centro de Alicante. Las cosas no fueron fáciles, había desconocimiento, poca orientación, poco apoyo, ninguna ayuda oficial y muchas dificultades que hubo que enfrentar con mucho esfuerzo, mucha voluntad, mucho trabajo y mucho trabajo. Un socio inversor para empezar, un socio tecnológico y familiares y amigos lo hicieron posible. Destacamos la importancia de conservar una mayoría para el control de tu sueño y tener un socio de confianza como compañero de fatigas, mano derecha y hombro en que apoyarse. Gracias Josh.

Empezaron a llegar clientes, luego buenos clientes, y empezamos a facturar. Software y webs, programación y diseño. Desde el principio optamos por conjugar buena programación con buen diseño (engineering design) y mantener una atención cercana y directa con los clientes. Eran nuestras señas de identidad y lo siguen siendo: invertir en calidad. Trabajamos para la Diputación, empresas y ayuntamientos. Incluso cumplimos el primer sueño al conocer y trabajar para Next Limit. Fuimos subiendo escalones colaborando como partner con el grupo Bassat Ogilvy y otras agencias de publicidad. La empresa creció con más proyectos, más nivel y más empleados.

Además de los servicios de consultoría, desarrollando proyectos para clientes, tuvimos clara la idea desde el principio de realizar productos estandarizados vía web y ya en 2007 lanzamos el gestor de prensa online gopress, con el que fuimos de los primeros en España en la creación de aplicaciones que se ejecutaban completamente en la red, lo que ahora conocemos como cloud computing.
Y luego más trabajar y trabajar. Aumentaban los clientes pero llegaba la crisis y sufrimos por los plazos, por los cobros, por la falta de financiación y duras dificultades. No ha sido fácil pero nos hemos consolidado como empresa de servicios gracias a nuestra filosofía.

Imposible citar todos los proyectos, algunos de los que nos sentimos especialmente orgullosos son www.elchecf.es, Volvo Ocean Race www.alicantepuertodesalida.com y el FWA que premia cada día a la mejor web en flash del mundo www.blackthinking.com en colaboración con varias de las mejores empresas del país en su medio, otro sueño cumplido. Especializados en gestores de contenidos usables cms, la innovación y la experiencia nos permiten asesorar y desarrollar nuevos negocios completos basados en la web, como redes sociales verticales www.nosplay.com, www.openart.com, complejos ecommerce internacionales y desarrollos tecnológicos para startups.

Hemos crecido en facturación y plantilla. Más de 50 ingenieros de la UA han pasado por nitsnets dando vida a su formación y descubriendo que sabían lo que no sabían que sabían. Hemos establecido lazos con la comunidad de desarrolladores compartiendo conocimientos, experiencias y amistad, entendiendo la importancia de las relaciones humanas entre emprendedores. Algunas de estas experiencias se comentan en nuestro blog lostiemposcambian.com

Encaramos el futuro con nuevos planes de lo que hemos llamado industrialización de la web, orientándonos definitivamente al desarrollo de productos en la nube, Software as a Service SaaS. Si algo hemos aprendido es que una empresa de servicios a medida tiene un potencial de crecimiento lineal y la oferta de productos puede serlo exponencial. Lo que conlleva mayor riesgo y una nueva apasionante aventura mucho más gratificante al seguir emprendiendo día a día.

No cabe más en este post casi tuitero. Muchas personas, momentos, problemas y alegrías quedan en el tintero. Personalmente el ser emprendedor me ha dado mucho y me ha quitado mucho. Agradezco los apoyos recibidos, la confianza de los clientes y el inmenso trabajo de los miembros de mi equipo. Espero que mi experiencia sirva a los nuevos compañeros de la EPS y que cada uno encuentro su camino emprendedor. Un abrazo!

Elad Rodríguez
CEO de nitsnets | studios

El pasado Octubre de 2011 se realizaron las primeras Jornadas de emprendedores en Informática, donde nos reunimos emprendedores alicantinos salidos de la mismísima Universidad de Alicante. Tuvimos el honor de ser invitados a dar una conferencia sobre nuestros inicios, fue incluso nostálgico

Gracias a Miguel Cazorla por ayudarnos siempre e invitarnos una vez más a esta nueva colaboración.

Video de la conferencia de Elad Rodríguez – nitsnets | studios

A través del servicio de streaming de la Politécnica de la Universidad podemos ver las conferencias.
Puedes visualizar la conferencia aquí

Presentación de la conferencia

Esta es la presentación que realizamos para la conferencia. Para su creación utilizamos el maravilloso presentador online prezi

Artículo de la conferencia

También se puede ver el artículo que escribimos para la revista de la Escuela Politécnica Superior sobre estas conferencias en el post: De la UA a la nube con una buena tripulación. La aventura de nitsnets | studios

Otras interesantes conferencias de emprendedores alicantinos

También se pueden ver el resto de conferencias de otros emprendedores alicantinos, muchos de ellos amigos:

• Andrés Torrubia con Fixr.com y Trimedia
• David Gil de trestristestigres
• Prompsit
• José Luis Sánchez de Alanit
• David Cremades de Adoramedia
• José Luis Pérez de Guiomatic
• Emilio Bravo y José Luis Ramírez de i2e
• Rafael Castillo y Javier Frades de Grupo Enfoca

Ver todas las conferencias

Gracias a la genial as3isolib podemos crear entornos isométricos con ActionScript 3 en Flash o Flex. La Perspectiva Isométrica – conocida por todos gracias a videojuegos clásico como Los Sims – pese a no ser un 3d real, es una manera muy efectiva de representar un mundo en tres dimensiones, lo cual es una herramienta muy útil para videojuegos o representaciones.

Durante este post vamos a aprender los inicios de crear un entorno isométrico con esta librería mediante un ejemplo práctico

Perspectiva isométrica del videojuego Los Sims

as3isolib

as3isolib, una librería open-source para ActionScript 3 desarrollada para (en palabras de su autor) “asistir en la creación de contenido en proyección isométrica”. Aunque está en desarrollo la nueva versión (v2) de la librería con bastantes jugosas novedades, por lo visto ésta dejará de ser open-source. En este ejemplo hemos utilizado la versión estable actual (v1) totalmente gratuita.

Ejemplo en funcionamiento: Añade elementos, selecciona, draguea y rota

Vamos a ver paso a paso cómo hemos construido este ejemplo. El código es relativamente simple pero contiene ciertos elementos de complejidad debidos al uso de la librería, como por ejemplo creación de elementos gráficos en isométrico a partir de assets (imágenes), y posteriormente aplicarles efectos y manipularlos utilizando coordenadas isométricas.

Elementos Gráficos: IsoSimpleAsset

Por comodidad y para una mejor encapsulación del código, en este ejemplo hemos creado una clase IsoSilla que heredará de una clase IsoSimpleAsset que a su vez extienda sobre IsoSprite, que es la clase base de los elementos gráficos en as3isolib. Esta clase IsoSimpleAsset será la base de todos nuestros elementos, si quisiéramos tener otros elementos cualquiera distintos por ejemplo mesas o más mobiliario con comportamiento similar pero cuyo aspecto gráfico sea diferente tan sólo tendríamos que crear nuevas clases que extiendan sobre ésta.

import as3isolib.display.IsoSprite;

public class IsoSimpleAsset extends IsoSprite

Para el aspecto de nuestro elemento gráfico tenemos que fijarnos en la propiedad sprites de IsoSprite, teniendo en cuenta que es un Array con lo cual tenemos que asignarle un objeto del tipo Array. Dentro de este array incluiremos todos los DisplayObject que queramos que conformen su aspecto gráfico. Normalmente, tan sólo será un elemento, en nuestro caso el dibujo de la silla en una orientación concreta. Por ejemplo:

//mc con los elementos gráficos
var mcDibujo:MovieClip;

//miAsset es un objeto de la case IsoSimpleAsset
//que hereda de IsoSprite
miAsset.sprites = new Array(mcDibujo);

Para conformar la ilusión de que rotamos la silla girando en perspectiva isométrica, simplemente reasignamos esta propiedad sprites a otro dibujo de la silla en otra orientación. Es muy importante el posicionamiento de los elementos gráficos para el correcto funcionamiento del motor de profundidades de as3isolib. Los gráficos deben de posicionarse de forma que el punto de origen del MovieClip se sitúe sobre la esquina superior de una “base” imaginaria en isométrico sobre la que se sitúa el elemento. En este tutorial de la propia web de as3isolib se explica más detalladamente. Por ejemplo, en el caso de las cuatro vistas que van a formar los sprites gráficos de nuestra silla, fijaos en el origen de coordenadas de cada uno de los MovieClips:

Para marcar el elemento seleccionado hemos utilizado simplemente uno de los filtros nativos de Flash, un GlowFilter. Para añadir este efecto a nuestro elemento isométrco debemos ir a la propiedad container de IsoSprite, que es un objeto del tipo Sprite de toda la vidaque contiene todos sus elementos gráficos. Al igual que la propiedad sprites, los filtros se almacenan en un Array para poder aplicar más de un filtro sobre el elemento gráfico. Para desactivar el brillo simplemente le asignamos null o un array vacío .

//Brillo verde
var glow:GlowFilter =
      new GlowFilter(0x00FF00, 1, 5, 5, 5);

//activamos glow
miSimpleIsoAsset.container.filters = new Array(glow);

//desactivamos glow
miSimpleIsoAsset.container.filters = null;

En nuestro ejemplo, hemos encapsulado estos comportamientos en métodos dentro de la clase IsoSimpleAsset, podéis ver el código entero de la clase si descargáis el código fuente del ejemplo.

public function select():void
{
	//...
}

public function unselect():void
{
	//...
}

public function changeView():void
{
	//...
}

La Escena Isométrica

Para “inicializar” el motor isométrico, creamos una variable del tipo IsoView que será la vista que controle todo nuestros elementos isométricos. Esta variable hereda de DisplayObject, con lo que se añade mediante addChild a nuestra escena principal. Sobre la vista añadimos una escena IsoScene, que será la que contenga los elementos isométricos en sí. Para que se muestren los elementos isométricos la escena debe renderizarlos mediante el método render, puesto que normalmente nuestra escena no es estática este método conviene situarlo dentro de un EnterFrame para que se ejecute continuamente.

private var viewPort:IsoView;
private var scene:IsoScene;

private function setIso():void
{
	//creamos vista y la configuramos
	viewPort = new IsoView();
	viewPort.showBorder=false;
	viewPort.setSize(539, 400);
	addChild(viewPort);

	//creamos escena
	scene = new IsoScene();
	//y la añadimos a la vista
	viewPort.addScene(scene);

	//creamos un grid y lo añadimos a la escena
	//para referencia
	var grid:IsoGrid = new IsoGrid();
	grid.setGridSize(5,5,0);
	grid.cellSize = 35;
	grid.showOrigin=true;
	grid.stroke = new Stroke(1,0x999999,1);
	scene.addChild(grid);

	//enterframe principal
	addEventListener(
		Event.ENTER_FRAME,
		enterFrame_handler);
}

private function enterFrame_handler(e:Event):void
{
	//renderizamos escena
	scene.render();
}

Añadimos elementos isométrico a la escena simplemente con addChild, por ejemplo en nuestro caso queremos que el manejador del evento CLICK del botón añada un elemento silla a la escena, y a continuación lo seleccione para que quede marcado:

public function add_click_handler(e:MouseEvent):void
{
	var o:IsoSimpleAsset = new IsoSilla();

	addObject(o);
	selectObject(o);
}

public function addObject(o:IsoSimpleAsset):void
{
	//añadimos elemento a la escena
	scene.addChild(o);

	//lo vamos a situar sobre el grid
	//en el centro de la pantalla
	o.moveTo(170,170,100);

	//añadimos interactividad
	o.addEventListener(
		MouseEvent.MOUSE_DOWN,
		pickup_handler);
}

private var selectedObject:IsoSimpleAsset=null;
public function selectObject(o:IsoSimpleAsset):void
{
	if(selectedObject!=null)
		selectedObject.unselect();

		o.select();
		selectedObject = o;

}

Para dragear el objeto isométrico, la clave es el método localToIso de la clase IsoView que convierte las coordenadas locales de Flash a coordenadas isométricas. Este método recibe como parámetro (y posteriormente devuelve) un objeto de la case Pt, que no es más que un punto con tres coordenadas x, y, z necesarias para simular las 3 dimensiones de la vista isométrica.

/**
 * DRAG OBJECT
 */

private var dragPt:Pt;
private var dragObject:IsoSimpleAsset;

private function pickup_handler(e:Event):void
{

	//almacenamos el elemento
	dragObject = IsoSimpleAsset(e.target);

 	//marcamos el elemento como seleccionado
	selectObject(dragObject);

	//almacenamos el punto
	//en coordenadas isométricas
	dragPt = viewPort.localToIso( new Pt(stage.mouseX, stage.mouseY) );

	//ajustamos punto
	//según la posición del elemento
	dragPt.x -= dragObject.x;
	dragPt.y -= dragObject.y;
	dragPt.z -= dragObject.z;

	//cleanup listener
	dragObject.removeEventListener(MouseEvent.MOUSE_DOWN, pickup_handler);

	//añadimos listeners necesarios
        //mouse up en el stage "por si"
	stage.addEventListener(MouseEvent.MOUSE_UP, drop_handler);
	//al mover el mouse
	viewPort.addEventListener(MouseEvent.MOUSE_MOVE, drag_handler);

}

private function drop_handler(e:Event):void
{
	//clean up events
	stage.removeEventListener(MouseEvent.MOUSE_UP, drop_handler);
	viewPort.removeEventListener(MouseEvent.MOUSE_MOVE, drag_handler);

	//resetear drag
	dragObject.addEventListener(MouseEvent.MOUSE_DOWN, pickup_handler);

}

private function drag_handler(e:MouseEvent):void
{
        //convertimos coordenadas del mouse a isométricas
	var pt:Pt = viewPort.localToIso( new Pt(stage.mouseX, stage.mouseY) );

        //calcular punto al que nos hemos desplazado
	var x_to:Number = Math.round(pt.x - dragPt.x);
	var y_to:Number = Math.round(pt.y - dragPt.y);

	//mover elemento
	dragObject.moveTo(x_to, y_to, dragObject.z);

}

/**
 * END DRAG
 */

Para seguir profundizando en esta librería podemos ver un ejemplo bastante similar (en inglés) en active tuts+, aunque está un poco outdated. También por supuesto todos los tutoriales “oficiales” en la propia página de la librería que aunque son muy básicos, son bastante completos y detallados, y pueden servir como para servir de punto de partida para cualquier proyecto que queramos hacer en isométrico.

Utilizado en: Helados Alacant. Heladería IsoBuilder

Éstos fueron los inicios de nuestro último proyecto para la conocida marca de helados Helados Alacant. El motor de elementos y mobiliario está basado en este código que os hemos presentado.