Cómo ganarte la vida en el mundo interactivo

Luego de pasar varios meses sin ninguna publicación y comprender muy bien la misión y vision de mozilla, he decidido compartirles el siguiente articulo de un gran personaje que admiro mucho, su nombre es Juan Andres Nuñez, un apasionado del desarrollo de software, particularmente orientado más al desarrollo web.

En el presente articulo nos cuenta basado en su experiencia como iniciarse en este bello y hermoso mundo interactivo, sin mas que contarles, comencemos.

Si no estás a gusto con situación profesional o no te ves en el futuro haciendo lo que haces ahora, estás de enhorabuena: este es el mejor momento de la historia para dar el salto hacia algo mejor. Me explico.

Nunca antes el ser humano ha tenido a su disposición tantísima cantidad de información. Sólo con el material libre que existe en Internet puedes llegar a un cierto nivel de maestría en cualquier disciplina.

Estamos en el siglo XXI. Quien permanece ignorante, es porque quiere.

Si como decía estás descontento con tu situación actual, quiero proponerte que aproveches los recursos que todos tenemos a nuestro alcance para que pases de lo que sea que estés haciendo ahora al mundo interactivo digital. No, no es una locura.

Llevo muchos años viviendo del mundo digital y por mi propia experiencia y la de mis alumno/as, te aseguro que el cambio es posible. Eres bienvenido/a aquí.

No importa tu edad ni a lo que te dediques actualmente. Tampoco importa tu titulación académica (hoy menos que nunca). Los requisitos técnicos son minúsculos: cierta cultura de Internet (manejar Facebook). Sin embargo, los requisitos mentales son bastante elevados: nunca dejar de estudiar/aprender y vivir constantemente fuera de tu zona de confort.

En este artículo voy a explicarte cómo pasar de tu situación/ocupación actual a mundo del desarrollo interactivo digital, de forma controlada y gradual.

Obviamente, este paso no es para todo el mundo por las razones arriba expuestas, pero, si estás buscando un cambio —a mejor— y no te asusta aprender cosas nuevas, este es tu momento.

Las ventajas

Para tratar de motivarte voy a enumerar algunas de las muchas ventajas que tiene una profesión relacionada con la industria interactiva.

Independencia

Gran parte de los desarrolladores y profesionales del mundo interactivo son algo así como nómadas digitales. Tanto si se encuentran trabajando en alguna empresa o si son freelance, tienen cierta libertad de trabajar desde donde quieran.

En el primer caso porque las empresas (suelen ser startups) que los emplean son jóvenes y por lo tanto bastante punteras en cuanto a cultura empresarial. Entienden los beneficios del trabajo remoto y ceden al empleado parte del control y la incitativa porque saben que eso repercute directamente en la calidad del trabajo. Muchas de estas empresas tienen flexibilidad de horarios e incluso días remotos donde los empleados puede trabajar desde casa o desde donde deseen.

En el segundo caso porque como tu propio jefe puedes decidir desde donde quieres trabajar. Ya sea desde el salón de tu casa o desde un coffe-shop cercano.

Economía

Si alguna vez has visto gráficos de los sueldos de los desarrolladores interactivos, tampoco te lo creas literalmente. Esas cifras corresponden a otros países, no al nuestro. Aún así, es de sobra conocido que la profesión de desarrollador Web (y sobre todo App) no está tan comodizada como otras, por lo que el factor económico es un punto a favor.

Dicho de otra forma: si eres proactivo vas a poder ganar más. Bastante más.

Poca/nula inversión material

En cuanto al equipamiento que necesitas, es muy sencillo:

  • Ordenador. Considera seriamente un portátil (te recomiendo Dell o Lenovo). Mejor aún si es un Mac, en serio.
  • Conexión a Internet. Ya sea doméstica, el 4G de tu móvil o la WiFi pública del Starbucks.
  • Auriculares. Si disponen de cancelación de sonido, mejor aún.
  • Curiosidad y ganas de aprender.
  • Nivel básico de inglés leído. No nos engañemos, puede ser que la información básica esté traducida, pero pronto te darás cuenta de que lo más valioso siempre está en inglés.

Altísima demanda de profesionales

No es ningún secreto que —al menos actualmente— hay una gran demanda de profesionales del entorno digital, tanto en nuestro país como en el extranjero.

Es complicado que a medio plazo esta demanda se reduzca, más bien todo apunta a lo contrario.

La mejor de todas las ventajas: La libertad

Para mi, la ventaja más importante es la libertad que te ofrece trabajar en esta industria y disfrutar de una cierta independencia. Muy por encima (a años luz) del aspecto económico.

Los profesionales del mundo interactivo digital, por el tipo de industria, por el tipo de profesional y por el tipo de proyectos, suelen estar menos expuestos a situaciones, personas y clientes tóxicos.

Todos conocemos casos —demasiados— así que no añadiré nada más. En el caso de que seas tu propio jefe y tengas autonomía total, tienes la libertad de seleccionar clientes, proyectos, etc. No soy capaz de expresar con palabras lo importante que es esto para mi.

El inicio de tu nueva profesión

Ahora que conoces algunas de las ventajas es hora de crear un pequeño plan para asentarte en este mundo interactivo digital.

Lo primero que hay que hacer es elegir una profesión dentro de la industria.

Mi consejo, el 99% de las veces, es que te internes en el mundo del desarrollo interactivo, más concretamente el front-end. Es decir, crear Webs y Apps que se centren en la parte de la experiencia de usuario, el cliente.

Recalco que este es únicamente mi consejo. Lo doy porque yo mismo me dedico al desarrollo Web y App; es mi terreno.

Si el aspecto más técnico no es lo tuyo —¿seguro?— tienes muchas otras posibilidades dentro del mundo interactivo. Puedes decantarte por el diseño Web y los interfaces, los principios de UX, el posicionamiento y el análisis del contenido, el marketing estrategias digitales y un largo etcétera.

Aunque el resto de esta entrada está enfocado en convertirte en desarrollador front-end, todos los principios, ventajas y puntos descritos se aplican a cualquier campo dentro del mundo interactivo-digital.

Cómo convertirte en desarrollador front-end

Si alguna vez has intentado aprender alguna tecnología Web por tu cuenta es muy posible que hayas llegado a conclusión de que todo este mundo es confuso y difícil de entender. No es cierto.

Como en cualquier otro aspecto de nuestra vida todo depende de cómo te organices. Si no tienes un método para aprender y sencillamente vas consumiendo un vídeo por aquí y un tutorial por allá, las piezas del puzzle tardarán mucho más tiempo en hacer click en tu cabeza.

Hay dos factores importantísimos a la hora de iniciarse en el mundo front-end.

1- Método.
2- Consistencia.

Método

Es muy sencillo. Si no tienes un método irás deambulando en círculos durante mucho tiempo solo para, ocasionalmente, encontrar la salida al laberinto.

Debes tener un plan y este plan debe decirte qué debes hacer en orden secuencial: primero 1, luego 2, luego 3… luego N.

Ten en cuenta que como decía al inicio este plan nunca finaliza, siempre tendrás que seguir aprendiendo. Lo único que cambia son las paradas, las estaciones intermedias entre cada punto.

Yo te voy a ayudar guiándote en los primeros pasos de tu plan. A partir de ahí, tendrás que ir solo/a.

Consistencia

Por otro lado, por mucho plan y método que tengas si no eres consistente y dedicas tiempo de calidad (concentración) cada día, vas a perder el tiempo.

Los conceptos —sobre todo al inicio— del desarrollo Web y App en general son muy ajenos y tu mente tardará un poco en hacerse a ellos. Es indispensable que todos los días dediques tiempo, repases, hagas ejercicios y pienses en lo que estás aprendiendo.

Al principio —esto lo veo cada día en mis alumnos— te replantearás el hecho de querer aprender algo así. No entenderás nada y creerás que nunca lo vas a hacer, que esto no es para ti. Tranquilo/a, todos hemos pasado por ahí, no pasa nada. Lo importante es seguir adelante, no abandonar.

Llegará un momento en el que comenzarás a entenderlo todo en su conjunto. Todos los conceptos —que creías inconexos— que has ido añadiendo a tu memoria comenzarán a unirse en armonía.

Es una sensación muy adictiva y el inicio de una pequeña obsesión por seguir aprendiendo, parte indispensable de cualquier desarrollador interactivo. Quieres más.

El método

Al inicio de este artículo comentaba que hay una avalancha de información libre sobre cada tema imaginable. Esto es una ventaja pero también un inconveniente en situaciones como la tuya —estás empezando— ya que puedes no saber qué elegir.

No te preocupes, yo voy a hacer de filtro inicial para detallarte a continuación un pequeño plan para que comiences con lo más básico, lo esencial.

Este el plan que me hubiera gustado tener a mi cuando comencé. De alguna forma, me estoy hablando a mi mismo, hace quince años.

Antes de comenzar es importante que entiendas que no voy a ofrecerte muchas opciones para cada concepto que debes aprender. En este momento no las necesitas. Voy a indicarte lo que para mi es el mejor de los recursos, siempre 100% gratuito.

En algunos casos también te podré en enlace a mi propio material ya que cada día creo un nuevo vídeo para que alguien sin ninguna experiencia pueda convertirse en desarrollador front-end. Espero que no te importe.

Aprende los fundamentos

Si tuviera que elegir el mensaje con el te quedaras tras leer esta entrada, seria este:

Lo importante son los fundamentos, el resto son modas o tendencias pasajeras.

Dedica tiempo a lo fundamental y, cuando realmente lo domines o te sientas cómodo/a, pasa a otros conceptos periféricos pero que se asientan sobre los principales. Lo fundamental nunca pasa de moda, nunca se queda obsoleto.

A medida que progreses te darás cuenta de que hay muchísimas opciones para cada aspecto del desarrollo interactivo. Hay un montón de pre-post compiladores CSS, un montón de frameworks MVC, MV*, MVVM, testing, transpiler… ¯_(ツ)_/¯.

Te preguntarás qué diablos es todo esto y por donde empezar. No dejes que la naturaleza de esta industria de paralice, recuerda siempre: lo importante son los fundamentos.

Una vez te sientas cómodo/a con las bases será más sencillo comenzar a explorar otros territorios periféricos.

HTML y CSS

HTML

es el lenguaje que modela y configura la estructura de la Web. Por ejemplo, los párrafos de este artículo se asientan sobre elementos HTML. Lo mismo ocurre con las imágenes, vídeos, audios, etc.

Es vital que entiendas cómo está construida la Web y sepas manejar sus entresijos.

CSS

Si HTML aporta la estructura de la Web, CSS añade el estilo y la presentación. Los colores de los textos, el color de fondo de página, el margen de algunos elementos y el alineamiento de algunos otros, son regidos por CSS.

Como desarrollador front-end dedicarás mucho tiempo ya no sólo a aprender los fundamentos sino a estar al día con las últimas tendencias CSS (pre y post procesadores, estilos de composición, etc).

Cómo iniciarse

JavaScript

HTML y CSS aportan estructura y estilo respectivamente, pero por muy bien estructurada que esté tu aplicación, deberás añadir algún tipo de interacción (ejemplo: si el usuario hace click aquí, se despliega ese imagen saliendo desde la derecha).

Esa lógica -y muchiiisimo más— se añade con JavaScript, que es el lenguaje de la Web y requisito indispensable para optar a cualquier puesto de desarrollo interactivo.

Una vez domines el lenguaje madre podrás saltar de forma controlada a cualquiera de la miríada de herramientas satélite que orbitan alrededor de JavaScript. Son en el ecosistema front-end.

Cómo iniciarse

Git

A medida que vayas desarrollando proyectos y estos crezcan de tamaño, querrás utilizar un sistema de control versiones. Se trata de una herramienta que te permite guardar instantáneas de tus proyectos en un momento dado y poder volver a ellas cuando quieras. Algo así como una máquina del tiempo.

Un sistema control de versiones (VCS) se volverá más imprescindible aún cuando trabajes con otros/as personas.

Hoy en día GIT es el rey en cuanto a popularidad en este campo y debes aprenderlo desde el inicio. Más tarde me lo agradecerás.

Crea y comparte

Ya tienes un plan inicial para comenzar con los tres pilares del desarrollo front-end: HTML, CSS y JavaScript. Ahora, lo más importante es que practiques y crees cosas con tus nuevas habilidades.

Tienes que poner en uso todo lo que aprendas, tienes que hacer ejercicios por tu cuenta, pequeños proyectos, lo que sea, pero tienes que acostumbrarte a utilizar de forma creativa todo lo que absorbas.

Te recomiendo que compartas lo que aprendes en forma de demostración. Existen muchas herramientas para hacerlo, la más famosa probablemente sea CodePen. Es en esencia un playground donde puedes compartir con los demás tus experimentos con HTML, CSS y JavaScript.

No tengas miedo de compartir. No pienses que con tu nivel actual a nadie le puede interesar lo que tengas que mostrar.

Siempre habrá alguien que esté por detrás de ti al que tu experiencia le sirva.

Otro lugar común donde mostrar el resultado creativo de tus habilidades es GitHub. Es el lugar estándar donde todos los desarrolladores y profesionales técnicos comparten su código; el lugar perfecto para aprender de los demás (Open Source Education) y para exponerte y buscar ayuda.

Cuando llegue el momento y tus conocimientos sean suficientes, crea tu presencia en Internet. Añade tus experimentos, publica entradas con tus opiniones, haz pública tu propia visión y las dificultades que estás encontrando en tu viaje y cómo las has superado. Te aseguro que siempre habrá un público al que le interese lo que tienes que decir.

Al principio, no tendrás proyectos ni trabajos que mostrar. No pasa nada, créalos tu. Busca en algún negocio local o familiar algún problema que solucionar y finge que es un proyecto de verdad, aplica tu solución y compártelo.

El tipo de proyectos que expongas serán el tipo de proyectos que atraigas.

Al cliente le da igual si es un caso real o no, lo único que le interesa es la solución y el método profesional que ha sido aplicado. No te engañes, si eres constante más tarde o más temprano serás visto/a.

Nunca dejes de aprender

Con el plan y el rush de adrenalina y endorfinas típico de comenzar algo nuevo, te será sencillo dar los primeros pasos. De todas formas no cometas el error de centrarte únicamente en la motivación.

Has decidido dedicarte a esta industria y el único requisito es estar constantemente aprendiendo, ¿lo recuerdas?. Haz tuyo/a el compromiso de nunca dejar de aprender. La acción llama a más acción.

El movimiento y la percepción personal del avance genera motivación, pero debes dar siempre el primer paso. Actúa. No lo olvides.

Invierte en ti mismo

A riesgo de parecer presuntuoso no puedo dejar de recomendarte la formación en persona, si entra dentro de tus posibilidades.

En el mundo interactivo todo es digital, parece que el contacto humano se ha reducido a la mínima expresión e incluso que no es necesario. Nada más lejos de la realidad. Nada, repito, NADA es comparable a la formación en persona.

Si vives en Valencia y alrededores te recomiendo que valores asistir al master en el que soy profesor de desarrollo Web y App. Se imparte todos los años en la Escuela Superior de Arte y Tecnología. Es una formación completamente enfocada al mundo Web y digital.

Ni se te ocurra dejar tu trabajo actual

Por mucho que veas claro que este es el camino que quieres tomar, no creo que sea buena idea que dejes tu trabajo actual. Lo comento únicamente por si lo estás barajando.

Mi consejo es que uses tu trabajo normal como fuente que cubra tus necesidades y gastos, para dedicar el resto de tiempo a formarte en este nuevo camino.

En otras palabras, tus ingresos no pueden depender de esta nueva profesión en la que recién estás comenzando.

De ser así con toda seguridad acabarás aceptando cualquier proyecto de cualquier cliente y, créeme, te arrepentirás después.

Si tus facturas están cubiertas por tu ocupación de día, podrás ser selectivo y elegir en libertad las oportunidades y clientes con los que resuenes y respeten tu trabajo y método.

Síndrome del impostor

No puedo dejar pasar esta oportunidad sin hablarte de uno de los problemas recurrentes de cualquier profesional del mundo interactivo. ¿Recuerdas que al principio de esta entrada te comentaba que nunca estarías en tu zona de confort?. Bien, el motivo principal es que, como siempre estarás aprendiendo algo nuevo, tu zona de confort no cubre tu area de conocimiento.

Hay un lapso de tiempo entre comenzar a aprender algo y lograr confianza en lo que se está aprendiendo. Cuando esa confianza empieza a llegar, suele ser el momento de ir más allá y comenzar de nuevo. Shit happens.

Psicológicamente, este fenómeno se cristaliza en un síndrome bastante incómodo llamado síndrome del impostor. Te hará sentir es que estás fingiendo, que realmente eres un fraude y que, más tarde o más temprano, todos se darán cuenta.

Debes entender que el síndrome del impostor es una característica humana, no darle mayor importancia y continuar con tu vida. Todos tenemos algo valioso que aportar. Tú no eres la excepción.

Estoy aquí para ayudarte

Estoy seguro (más que nada porque lo he comprobado en mi mismo y en mis alumnos/as) de que cualquiera puede poner un punto de inflexión en su vida y mejorar tanto a nivel profesional como personal. Es, sencillamente, que yo lo he logrado a través del mundo digital. Quiero que tu también lo logres.

Si has tomado la decisión de comenzar, por favor, no abandones. Por muy duro que parezca, por muy ajeno que pueda resultar, tú puedes conseguirlo.

Si yo lo he logrado tu también puedes, es sólo cuestión de paciencia, compromiso y tenacidad.

Si necesitas mi ayuda puedes contactar conmigo cuando quieras. Estoy aquí para ayudarte.

Construye La Realidad Virtual en La Web Con A-Frame

Post traducido del blog de Mozilla Hacks, lee el original aquí

El equipo de WebVR de Mozilla (MozVR) estableció hace más de un año la pregunta:“¿Qué aspecto tendría la Realidad Virtual (VR) en la Web?” Hoy hacemos clic en los enlaces para saltar de página en página, un día caminaremos a través de portales para saltar de mundo en mundo. Lamentablemente, hay sólo un puñado de desarrolladores de WebGL en el mundo que sabe cómo crear experiencias 3D interactivos. Pero hay potencialmente millones de desarrolladores web, diseñadores y artistas 3D con deseo de una herramienta para crear contenido de Realidad Virtual fácilmente como construir una página web.

Recientemente hemos publicado un framework de código abierto llamado A-Frame para crear fácilmente experiencias 3D y realidad virtual en la web. A-Frame pone la creación de contenidos de VR en nuestras manos por lo que nos permite crear escenas con declarativa HTML que simplemente funciona en desktop, Oculus Rift y smartphones. Podemos manipular escenas con JavaScript básico tal como lo haría con los elementos HTML ordinarios, y podemos continuar usando nuestras bibliotecas y frameworks JavaScript favoritos (por ejemplo, d3, React). Una escena básica en A-Frame se ve algo como:

//codepen.io/mozvr/embed/jqERjQ/?height=265&theme-id=0&default-tab=html,result&embed-version=2

En esta escena:

  • Tenemos algunas geometrías básicas con <a-cube>, <a-cylinder>, <a-sphere>.
  • Tenemos una imagen de la Web, usando<a-image>.
  • Tenemos una foto de 360 grados usando <a-sky> para el fondo.
  • Podemos movernos alrededor con las teclas WASD y mirar alrededor con arrastrar el ratón.

Para entrar en la realidad virtual, pulsamos el icono de las Gafas. Esta escena se puede ver en un Oculus Rift en una desktop o en un smartphone usando un soporte de Google Cardboard. O también puede funcionar como una escena 3D normal. Más información sobre la introducción de VR. La sintaxis anterior debe parecer familiar a casi todos; cada elemento debajo de <a-scene> representa un objeto 3D, y podemos modificar estos objetos usando atributos HTML. Bajo este marcado simple, sin embargo, se encuentra un framework 3D flexible y extensible.

three.js + Sistema de Entidades y Componentes

Bajo la cubierta, A-Frame es un framework three.js que trae el modelo sistema de entidades y componentes (ECS) para el DOM. A-Frame esta construido como una capa de abstracción sobre three.js y es lo suficientemente extensible como para hacer casi cualquier cosa que three.js puede hacer.

El modelo ECS es un patrón de uso general en el desarrollo de juegos que favorece dimensionabilidad sobre herencia. Desde que A-Frame pretende acercar experiencias 3D altamente interactivas para la Web, éste adopta los patrones existentes de la industria de los videojuegos. En ECS, cada objeto en la escena es una entidad, que es un contenedor general que por sí mismo no hace nada. Los componentes son módulos reusables que están conectados a una entidad con el fin de conectar la apariencia, comportamiento, y/o funcionalidad.

Para dar un simple ejemplo abstracto, podríamos tener los componentes color, neumáticos y motor. Podemos componer entidades configurando, mezclando y conectando los componentes reutilizables:

  • Una entidad auto azul se compone por el componente color a azul, el componente neumático con el número establecido a cuatro, y asociando el componente motor.
  • Una entidad bicicleta roja se compone por el componente color a rojo, el componente neumático con el número establecido a dos, y no asociando el componente motor.
  • Una entidad barco amarillo se compone por el componente color a amarillo, el componente neumático con el número fijado a cero, y asociando el componente motor.

Representación abstracta del patrón del sistema de entidades y componentes por Ruben Mueller de The VR Jump.

En A-Frame:

  • Una entidad está representada por <a-entity>. Es el bloque de construcción básico que comprende todo dentro de una escena.
  • Un componente está representado por un atributo HTML (por ejemplo<a-entity engine>).
  • las propiedades de un componente se pasan a través de una cadena en un atributo HTML donde se analiza más adelante.
  • Si un componente tiene una única propiedad para definir, entonces se parece a un atributo HTML normal (e.g. <a-entity visible="false">).
  • Si un componente tiene más de una propiedad para definir, entonces las propiedades pasan a través de una sintaxis similar a los estilos CSS en línea (por ejemplo,<a-entity engine="cylinders: 4; horsepower: 158; mass: 200">).

Tomando <a-cube> por ejemplo, nosotros podemos descomponerlo en los componentes geometría (forma) y material (aspecto):

<!-- Forma actual de <a-cube> -->
<a-entity 
    geometry="primitive: box; depth: 2; height: 10; width: 4"
    material="color: #FFF; src: url(texture.png)">

Los desarrolladores pueden escribir componentes para hacer casi cualquier cosa y compartir con otros desarrolladores de plug-and-play. Vamos a configurar y asociar más componentes para formar una entidad más compleja:

En un patrón de ECS, casi toda la lógica y el comportamiento deben ser encapsulados dentro de los componentes para fomentar la modularidad y la reutilización.

Construyendo una Escena Interactiva

Veamos un ejemplo de construcción de una escena donde el flujo de trabajo gira en torno a los componentes de la escritura. Construiremos una escena interactiva en la que podemos disparar rayos láser a los enemigos que nos rodean. Podemos utilizar los componentes estándar que se suministran con A-Frame, o usar componentes que los desarrolladores de A-Frame han publicado para el ecosistema. Mejor aún, podemos escribir nuestros propios componentes para hacer lo que queramos!

Si quieres seguir, hay varias formas de codificar con A-Frame:

Vamos a comenzar añadiendo un objetivo enemigo:

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”wGBLeB” data-default-tab=”html,result” data-user=”mozvr” data-embed-version=”2″ class=”codepen”>See the Pen <a href=”http://codepen.io/mozvr/pen/wGBLeB/”>Laser Shooter – Step 1</a> by mozvr (<a href=”http://codepen.io/mozvr”>@mozvr</a&gt;) on <a href=”http://codepen.io”>CodePen</a&gt;.</p>
//assets.codepen.io/assets/embed/ei.js

Esto crea una escena estática básica donde el enemigo te mira fijamente incluso a medida que se mueve alrededor. Podemos utilizar los componentes A-Frame del ecosistema para hacer algunas cosas interesantes.

Uso de componentes

El repositorio awesome-aframe es un lugar excelente para encontrar componentes que la comunidad ha creado para habilitar nuevas características. Muchos de estos componentes se inician desde el Component Boilerplate y debe proporcionar estructuras en la carpeta dist/ de sus repositorios. Tomemos el diseño del componente, por ejemplo. Podemos agarrar la construcción, colocarlo en nuestra escena e inmediatamente podrá utilizarse un sistema de diseño 3D para colocar automáticamente las entidades. En lugar de tener un enemigo, vamos a tener diez enemigos colocados en un círculo alrededor del jugador:

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”JXoQBm” data-default-tab=”html,result” data-user=”mozvr” data-embed-version=”2″ class=”codepen”>See the Pen <a href=”http://codepen.io/mozvr/pen/JXoQBm/”>Laser Shooter – Step 3</a> by mozvr (<a href=”http://codepen.io/mozvr”>@mozvr</a&gt;) on <a href=”http://codepen.io”>CodePen</a&gt;.</p>
//assets.codepen.io/assets/embed/ei.js

Es desordenado en el marcado tener la entidad enemiga duplicada diez veces. Podemos colocarlo en la plantilla del componente para limpiar eso. También podemos utilizar elsistema de animación de A-Frame para tener enemigos de marchando en un círculo alrededor de nosotros.

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”bpNPjp” data-default-tab=”html,result” data-user=”mozvr” data-embed-version=”2″ class=”codepen”>See the Pen <a href=”http://codepen.io/mozvr/pen/bpNPjp/”>Laser Shooter – Step 2</a> by mozvr (<a href=”http://codepen.io/mozvr”>@mozvr</a&gt;) on <a href=”http://codepen.io”>CodePen</a&gt;.</p>
//assets.codepen.io/assets/embed/ei.js

Escribiendo componentes

Los desarrolladores confortables con JavaScript y three.js puede escribir componentes para añadir apariencia, comportamiento y funcionalidad a las entidades. Como hemos visto, estos componentes pueden ser reutilizados y se comparten con la comunidad. No todos los componentes tienen que ser compartidos; pueden ser ad-hoc o one-off.

Los componentes consisten en datos que son definidos por el esquema y se pueden pasar a través de HTML, y los métodos del ciclo de vida, que definen cómo se utilizan los datos para modificar la entidad a la que está asociado. Los métodos de ciclo de vida por lo general interactúan con three.js, el DOM y las APIs de A-Frame. Mi anterior post del blog sobre Cómo escribir un componente de VR entra en más detalle sobre el uso de la API del componente para registrar un componente.

Para la escena, queremos ser capaces de disparar rayos láser a los enemigos para hacerlos desaparecer. Vamos a necesitar componentes para crear láseres al hacer clic, para generar clics, para impulsar los láseres, y para verificar si un láser golpea a un enemigo.

Componente spawner

Vamos a empezar por ser capaces de crear láseres. Queremos ser capaces de generar una entidad láser que comienza en la posición actual del jugador. Vamos a crear un componente spawner que escuchará un evento en la entidad, y cuando se emite este caso, vamos a generar una entidad con un mixin predefinido de componentes:

AFRAME.registerComponent('spawner', {
  schema: {
    on: { default: 'click' },
    mixin: { default: '' }
  },

  /**
   * Add event listener to entity that when emitted, spawns the entity.
   */
  update: function (oldData) {
    this.el.addEventListener(this.data.on, this.spawn.bind(this));
  },

  /**
   * Spawn new entity with a mixin of componnets at the entity's current position.
   */
  spawn: function () {
    var el = this.el;
    var entity = document.createElement('a-entity');
    var matrixWorld = el.object3D.matrixWorld;
    var position = new THREE.Vector3();
    var rotation = el.getAttribute('rotation');
    var entityRotation;

    position.setFromMatrixPosition(matrixWorld);
    entity.setAttribute('position', position);

    // Have the spawned entity face the same direction as the entity.
    // Allow the entity to further modify the inherited rotation.
    position.setFromMatrixPosition(matrixWorld);
    entity.setAttribute('position', position);
    entity.setAttribute('mixin', this.data.mixin);
    entity.addEventListener('loaded', function () {
      entityRotation = entity.getComputedAttribute('rotation');
      entity.setAttribute('rotation', {
        x: entityRotation.x + rotation.x,
        y: entityRotation.y + rotation.y,
        z: entityRotation.z + rotation.z
      });
    });
    el.sceneEl.appendChild(entity);
  }
});

Componente click-listener

Ahora necesitamos una manera de generar un evento de clic sobre la entidad del jugador con el fin de generar el láser. Sólo podríamos escribir un controlador de eventos JavaScript en una secuencia de contenidos, pero es más reutilizable el escribir un componente que puede permitir a cualquier entidad escuchar clics:

AFRAME.registerComponent('click-listener', {
  // When the window is clicked, emit a click event from the entity.
  init: function () {
    var el = this.el;
    window.addEventListener('click', function () {
      el.emit('click', null, false);
    });
  }
});

Desde el HTML, podemos definir el mixin del láser y fijar los componentes spawner y click-listener al jugador. Cuando hagamos clic, el componente spawner generará un laser de partida frente a la cámara:

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”jqEjvB” data-default-tab=”html,result” data-user=”mozvr” data-embed-version=”2″ class=”codepen”>See the Pen <a href=”http://codepen.io/mozvr/pen/jqEjvB/”>Laser Shooter – Step 4</a> by mozvr (<a href=”http://codepen.io/mozvr”>@mozvr</a&gt;) on <a href=”http://codepen.io”>CodePen</a&gt;.</p>
//assets.codepen.io/assets/embed/ei.js

 

Componente projectile

Ahora los láseres se generan en frente de nosotros cuando hacemos clic, pero necesitamos disparar y viajar. En el componente spawner, tuvimos el punto láser en la rotación de la cámara, y hemos rotado 90 grados alrededor del eje X para alinearlo correctamente. Podemos añadir un componente projectile para que el láser viaje directamente en la dirección de enfrente (su eje Y local en este caso):

AFRAME.registerComponent('projectile', {
  schema: {
    speed: { default: -0.4 }
  },

  tick: function () {
    this.el.object3D.translateY(this.data.speed);
  }
});

Luego conecte el componente projectile al mixin del láser:

<a-assets>
  <!-- Attach projectile behavior. -->
  <a-mixin id="laser" geometry="primitive: cylinder; radius: 0.05; translate: 0 -2 0"
    material="color: green; metalness: 0.2; opacity: 0.4; roughness: 0.3"
    projectile="speed: -0.5"></a-mixin>
</a-assets>

El laser ahora se disparará como un proyectil al hacer clic:

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”YqPmzK” data-default-tab=”html,result” data-user=”mozvr” data-embed-version=”2″ class=”codepen”>See the Pen <a href=”http://codepen.io/mozvr/pen/YqPmzK/”>Laser Shooter – Step 5</a> by mozvr (<a href=”http://codepen.io/mozvr”>@mozvr</a&gt;) on <a href=”http://codepen.io”>CodePen</a&gt;.</p>
//assets.codepen.io/assets/embed/ei.js

Componente collider

El último paso es añadir un componente collider, así podemos detectar cuando el láser golpea una entidad. Esto lo podemos hacer usando Raycaster de three.js, dibujando una raya (línea) de un extremo del láser al otro, luego comprobar continuamente si uno de los enemigos están intersectando el rayo. Si un enemigo se intersecta con nuestra línea, entonces se está en contacto con el láser, y usamos un evento para decirle al enemigo que fue golpeado:

AFRAME.registerComponent('collider', {
  schema: {
    target: { default: '' }
  },

  /**
   * Calculate targets.
   */
  init: function () {
    var targetEls = this.el.sceneEl.querySelectorAll(this.data.target);
    this.targets = [];
    for (var i = 0; i < targetEls.length; i++) {
      this.targets.push(targetEls[i].object3D);
    }
    this.el.object3D.updateMatrixWorld();
  },

  /**
   * Check for collisions (for cylinder).
   */
  tick: function (t) {
    var collisionResults;
    var directionVector;
    var el = this.el;
    var sceneEl = el.sceneEl;
    var mesh = el.getObject3D('mesh');
    var object3D = el.object3D;
    var raycaster;
    var vertices = mesh.geometry.vertices;
    var bottomVertex = vertices[0].clone();
    var topVertex = vertices[vertices.length - 1].clone();

    // Calculate absolute positions of start and end of entity.
    bottomVertex.applyMatrix4(object3D.matrixWorld);
    topVertex.applyMatrix4(object3D.matrixWorld);

    // Direction vector from start to end of entity.
    directionVector = topVertex.clone().sub(bottomVertex).normalize();

    // Raycast for collision.
    raycaster = new THREE.Raycaster(bottomVertex, directionVector, 1);
    collisionResults = raycaster.intersectObjects(this.targets, true);
    collisionResults.forEach(function (target) {
      // Tell collided entity about the collision.
      target.object.el.emit('collider-hit', {target: el});
    });
  }
});

A continuación, asignamos una clase a los enemigos para designarlos como blancos, asociando animaciones que se activan al colisionar para hacerlas desaparecer, y finalmente asociar el componente collider al láser que se dirige a los enemigos:

<a-assets>
  <img id="enemy-sprite" src="img/enemy.png">

  id="enemies" type="text/x-nunjucks-template">
    a-entity layout="type: circle; radius: 5">
      a-animation attribute="rotation" dur="8000" easing="linear" repeat="indefinite" 
                   to="0 360 0">/a-animation>

      { % for x in range(num) %}
        <!-- Attach enemy class. -->
        a-image class="enemy" look-at="#player" src="#enemy-sprite" transparent="true">
          <!-- Attach collision handler animations. -->
          a-animation attribute="opacity" begin="collider-hit" dur="400" ease="linear" 
                       from="1" to="0">/a-animation>
          a-animation attribute="scale" begin="collider-hit" dur="400" ease="linear" 
                       to="0 0 0">/a-animation>
        /a-image>
      { % endfor %}

    /a-entity>
  

  <!-- Attach collider that targets enemies. -->
  <a-mixin id="laser" geometry="primitive: cylinder; radius: 0.05; translate: 0 -2 0"
           material="color: green; metalness: 0.2; opacity: 0.4; roughness: 0.3"
           projectile="speed: -0.5" collider="target: .enemy"></a-mixin>
</a-assets>

Y ahí tenemos una escena interactiva básica completa en A-Frame que puede verse en VR. Empaquetamos potencia en componentes que nos permiten construir de forma declarativa escenas sin perder el control o la flexibilidad. El resultado: un rudimentario juego FPS que soporta la RV en última instancia, con sólo 30 líneas de código HTML:

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”reaXNr” data-default-tab=”html,result” data-user=”mozvr” data-embed-version=”2″ class=”codepen”>See the Pen <a href=”http://codepen.io/mozvr/pen/reaXNr/”>Laser Shooter – Final</a> by mozvr (<a href=”http://codepen.io/mozvr”>@mozvr</a&gt;) on <a href=”http://codepen.io”>CodePen</a&gt;.</p>
//assets.codepen.io/assets/embed/ei.js

Comunidad

La comunidad ha construido algunas grandes cosas con sólo la versión inicial de A-Frame. Echa un vistazo a lo que se ha compartido en Made With A-Frame y Awesome A-Frame.

Estamos todo el rato en el Slack de A-Frame, que actualmente cuenta con casi 350 personas. Juega con A-Frame y ven a decirnos lo que piensas! La realidad virtual está llegando, y no te la querrás perder.

Firefox Hello

Tan fácil como decir hola

Así comienza el landing page de mozilla con su más reciente proyecto “Firefox Hello”. Conocé Firefox Hello, la forma más fácil de conectarte gratuitamente por video con quien quieras, donde quieras.

Algunas Caracteristicas de este nuevo proyecto:

Todo lo que necesitas es tener actualizado tu Firefox a la version 35.

Si tenés la última versión de Firefox, ya tenés Hello. No necesitás una cuenta, ni registrarte ni descargar nada más. Simplemente empezá una conversación, mandale el enlace a un amigo y decile que haga clic. Simple.

Invitá a quien quieras, donde quieras

Hello es muy fácil de usar y tus amigos o familiares no necesitan tener Firefox para unirse a la conversación. Si tienen un navegador compatible, ya están listos para unirse.

Seguro, confiable y protegido

Como Hello está incluído en Firefox, podés quedarte tranquilo que tus conversaciones e información se mantendrán privadas y seguras. Esa es parte de nuestra misión, y está detrás de todo lo que hacemos.

Mas informacion de Firefox Hello click AQUI

Y lo ultimo que nos resta decirte es que lo pruebes y deja tus comentario acerca de la experiencia de Firefox Hello y como podemos mejorar. Hasta la próxima!

Te dejamos un video demo de como más personas han probado Firefox Hello

Libros: Firefox OS

Hola amigos! el día de hoy les quiero hablar sobre dos libros en formato PDF que estan geniales son muy pro, en el ambito del desarrollo de aplicaciones de Firefox OS.

En este post les hablare de dos libros, el primero libro se titutla:Quick Guide For Firefox OS App Development y el segundo Building Games for Firefox OS.

Quick Guide For Firefox OS App Development

Quick Guide For Firefox OS App Development cover page

Este genial pdf nos habla sobre el proceso sencillo de como desarrollar nuestras aplicaciones para Firefox OS, utilizando una metodologia de Workshop, porque a medida que lees el libro el autor nos enseña el desarrollo de aplicaciones con un ejemplo. En pocas palabras desarrollas una aplicaciones mientras vas aprendiendo lo esencial para el desarrollo de apps para Firefox OS.

Building Games for Firefox OS

Building Games for Firefox OS cover page

En primere lugar este segundo y maravilloso libro es del mismo autor que el anterior, a diferencia que en este segundo libro Garzia nos enseña como desarrollar una app de juego para Firefox OS. Basicamente el esquema de enseñanza es la misma, el autor va desarrollando paso a paso un juego y nosotros vamos aprendiendo lo esencial de como podemos desarrollar un juego para la plataforma Firefox OS!. Genial no?

Con lo que te acabo de contar de seguro quieres desacargarlos y empezar a desarrollar aplicaciones para Firefox OS, así que te voy a regalar los enlaces para que los puedas desacargar de forma gratuita!

Enlaces de descarga:

Quick Guide For Firefox OS App Development ==> Descargar

Building Games for Firefox OS ==> Descargar

Si deseas descargar los dos libros en una sola descarga click AQUÍ

Disfrutalos! Si tienes alguna duda o sugerencia escribela en los comentarios, hasta la próxima!

Firefox comenzará a mostrar publicidad en las nuevas pestañas

Mozilla acaba de anunciar que empezará a mostrar publicidad en el navegador web Firefox, la cual podrá ser vista cuando el usuario abra una nueva pestaña y será colocada en reemplazo de alguna de las capturas que contienen los sitios más visitados. Así, por primera vez los avisos serán empujados directamente desde el programa y no mientras se explora la red.

Dicha funcionalidad llegará bajo el nombre de Enhanced Tiles, las cuales según la compañía son “pestañas mejoradas” que permiten descubrir nuevo contenido y hacen del espacio algo más interesante que de costumbre. Pero en rigor, se trata de publicidad que será mostrada paulatinamente a partir de hoy y que tiene como primeros clientes a ciertas campañas anti-tabaco y a la película Citizenfour (que relata la historia de Edward Snowden).

Pero conforme avance el tiempo se irán integrando otras marcas, las cuales según Mozilla deben cumplir con la filosofía de la empresa. Y para escoger qué mostrar al usuario, el navegador web se basará en el historial de navegación personal. De ahí en adelante, Firefox coleccionará datos del país de procedencia del usuario, la frecuencia con que se imprime publicidad en su navegador y si es que ha realizado click en alguno de ellos, todo esto a modo de mejorar la experiencia a futuro.

Claro está, nada llegará sin el consentimiento de cada uno de nosotros. Porque además de poder escoger si compartimos datos con Mozilla, será posible desactivar la publicidad en Firefox a través de una simple configuración, la cual requiere apagar estas “pestañas mejoradas” y está a sólo un par de clics de distancia. Si no se desactiva, se verá así:

Fuente tomada de: FayerWayer

Tour Mozilla Honduras en UNITEC

La comunidad de Mozilla Honduras presenta su primera parada de nuestra actividad denominada “Tours Mozilla Honduras” que se enfoca en realizar una serie de charlas en todas las universidades posibles de nuestro pais, con el objetivo de dar a conocer la comunidad existente de mozilla, hablar sobre los proyectos y productos que mozilla ha desarrollado en estos ultimos 10 años. también se pretende dar una panorámica y servir de guia a los futuros voluntarios que se animen a colaborar con mozilla.

Nuestra primera parada será en la Universidad Tecnologíca (UNITEC), en el campus de Tegucigalpa capital de Honduras. Afiche-UNITEC.fw

Si deseas ver la agenda de las charlas durante estas dos horas puedes visualizarla AQUÍ

Firefox Developer Edition!!

Así es!, mozilla ya lanzó una nueva variante de su navegador pero enfocada específicamente para los desarrolladores. Y lo bueno es que ya podemos probar Firefox Developer Edition.

FXDeveloper

Ya lo puedes instalar en tu Mac OX, Linux y windows!, te contamos algunas caracteristicas de esta version de Firefox para los developer’s!!!

Diseñado para desarrolladores.

Como el único navegador hecho solo para desarrolladores, Firefox Developer Edition fue creado con tu ritmo de trabajo en mente. Crear, probar, escalar y mucho más desde un solo lugar, por primera vez.

Depura cualquier navegador.

Inspecciona y depura tus apps en cualquier navegador o dispositivo con Valence – una potente extensión preinstalada que solo encontrarás en Firefox Developer Edition.

Programación a nivel de pixeles.

Apunta a determinados tamaños de pantalla con la vista de diseño flexible y modifica tu CSS al vuelo con el Editor de estilo integrado para una programación perfecta a nivel de pixeles.

Si deseas aprender mas de esta version para desarrolladores te invitamos a que accedas al siguiente link oficial: https://www.mozilla.org/es-CL/firefox/developer/