Comunidad de diseño web y desarrollo en internet online

Content Marketing, cuando la estrategia es el contenido

El Content Marketing consiste en crear, distribuir y compartir contenido relevante para tus usuarios. La motivación consiste en tener mas engagement con los usuarios, es decir, si publicas algo interesante y útil los usuarios regresarán a tu sitio y comenzarán a confiar en tu marca y tendrás mejores tazas de fidelidad.

En Content Marketing no se crea contenido con fines publicitarios, es decir no es otro comercial más sobre los servicios que ofrece una marca. Por el contrario consiste en ofrecer información de calidad que transforme al usuario en un comprador más inteligente. Por ejemplo si tu marca ofrece servicios de educación online, puedes publicar artículos sobre tecnologías del momento, puedes publicar videotutoriales cortos comparando tecnologías, de esa forma empezarás a fidelizar a tus usuarios.

Suena muy bonito, pero.. vamos seguro que tu compañía ya tenía un blog….



El verdadero poder de Internet para las marcas


Con el auge de las redes sociales muchas compañías entendieron que los comerciales emitidos durante el horario de la novela más popular de la noche dejaron de ser efectivos. De modo que decidieron incursionar con cantidades enormes de dinero en campañas online en Facebook, Twitter, etc.

Esta transición se convierte en un problema para las compañías pues: no saben cómo hacer campañas online, y tampoco saben cómo medirlas. Es en este mundo oscuro que nace la figura del Community Manager.

El Community Manager es un rol que pretende gestionar las campañas online, crearlas y medirlas. Su mision consiste basicamente en hacer que los usuarios interactúen con las campañas online, y en reportar qué tan exitosa es una campaña.

El problema del Community Manager es la forma en la que mide las campañas: número de retweets, número de seguidores y número de likes. Para el Community Manager una campaña exitosa es lo mismo que: muchos likes, muchos retweets y especialmente muchos nuevos seguidores.

Lo anterior resultó en muchos Community Managers buscando maximizar el numero de likes y seguidores, la mayoría por medio de estrategias sucias. ¿Por qué está mal querer maximizar el número de likes y seguidores? En realidad es un buen objetivo querer maximizar el numero de likes y seguidores, pero de una manera orgánica.

Segmenta los gustos de tus usuarios con el poder de las redes sociales


El poder que Twitter y Facebook ofrecen a las marcas no es exactamente poder llegarle a millones de usuarios, eso es posible poniendo un anuncio en la tv o en estaciones de metro. El verdadero poder está en ofrecer a las marcas la oportunidad de conocer a sus clientes/leads/usuarios detalladamente.

Si se obtienen seguidores y likes inorgánicos se crea ruido que no permite a una marca establecer perfiles de sus clientes.



Mediante los perfiles de Facebook y Twitter una marca puede establecer un perfil detallado sobre sus clientes. Por ejemplo una compañía podría saber que sus clientes usualmente twittean sobre Dr. Who en la noche y habitan en latinoamérica, por eso tal vez una campaña con la imagen del Dr who podría ser mas exitosa que una con Superman.

Es una gran historia, pero ¿dónde encaja el Content Marketing?


Es simple y poderoso:Tu eres lo que lees! Tu eres el contenido que consumes. Si puedes entender qué contenido es el que consume tu audiencia puedes crear un perfil personalizado de cada cliente, es más, podrías establecer qué contenido es el mas relevante para ellos.

Veamos un ejemplo: si DirectTV sabe que eres fanático del fútbol en el momento en que llames a cancelar te puede tentar con un año gratis de partidos de fútbol gratis si te quedas, pero si es tu abuela la que llama lo mejor sería ofrecerle el paquete de novelas gratis durante 6 meses.

Con Twitter y Facebook puedo entender a mi audiencia


Estoy de acuerdo, pero imagina combinar Twitter y Facebook con Content Marketing.

OnePoll reveló el año pasado que 1 de cada 4 mujeres y 1 de cada 5 hombres miente sobre su vida en las redes sociales para no parecer aburridos. Las mentiras más comunes incluyen: fiestas, vacaciones y compras. Por el contrario sólo consumimos contenido que realmente nos interesa. Por ejemplo no compartirías en facebook que estás buscando una cura para el terrible y asqueroso hongo que tienes el pie, pero seguro sí consumirás contenido sobre cómo deshacerte de él.

¿Qué ofrece el Content Marketing?


Trabajo para una compañía la cual usa procesamiento de lenguaje natural y Content Marketing para ayudar a las marcas a que entiendan a sus usuarios mediante la interacción con contenido. Por medio de la combinacion lenguaje natural mas Content Marketing las marcas pueden:

  • Ofrecer personalización: es decir contenido que se ajusta a cada usuario. La personalización tiene un gran efecto en el engagement
  • Entender con detalle las preferencias de cada usuario
  • Segmentar usuarios por gustos, edades, regiones geográficas


El Marketing de Contenido puede ayudar a dirigir la estrategia de marketing, entender mejor a tus usuarios, a crear más engagement y finalmente, más conversiones. Además ofrece indicadores que permiten entender y dirigir una estrategia de Marketing Online.

Diseño Responsive con Media Queries y “em” ¡Muerte a los Píxeles!

Ya hemos hablado acerca de las medidas relativas y las absolutas en el diseño Web. También acerca de cómo usar el Viewport correcto para layouts en responsive. Pero parece que estas buenas prácticas se nos diluyen cuando tenemos que hablar de layouts responsive y de qué medidas usamos todavía para los cambios en los breakpoints. Hablamos de medidas relativas pero configuramos Media Queries en píxeles.

Media Queries relativos al mercado de los dispositivos


Actualmente hay un set de Media Queries en las que se trata de “identificar” el comportamiento del layout de acuerdo a las resoluciones de las pantallas más usadas. ¿Es esto correcto en un mercado donde la vorágine tecnológica nos estampa todos los días nuevos dispositivos y como resultado, nuevas pantallas y resoluciones?



¿Cuándo realmente debo generar un breakpoint con nuevos comportamientos en mi layout?
Stephen Hay responde a esto algo muy particular:

@stephenhay :

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!

“Comienza con la pantalla más pequeña, luego expándela hasta que luzca como la mi*rda. Tiempo de hacer un breakpoint!"


Esto realmente nos deja a los diseñadores un poco con el síndrome de la hoja en blanco. Esta manera de pensar en el diseño corresponde a estar 100% convencidos de que la web es fluída y que los diseños estarán en un constante cambio. Ya no hay más pixel perfect y debemos dejar de pensar que media querie sirve para setear solamente los anchos de los elementos, sino también los márgenes, estilos y hasta comportamiento, como por ejemplo cuándo usamos un ícono responsive o no.

Ok, pero qué uso para Media Queries, "rem" o "em"?


Hace poco hablábamos de las medidas relativas "em" y "rem" y sus diferencias y de cómo la unidad de medida "rem" era tan práctica de usar. Prestando atención en algunos ejemplos de Media Queries relativas me fijé que todas correspondían al par 100% = 1em teniendo como premisa que los navegadores en esas medidas dan un resultado de 16px a 14px de base. Lo que concluye en dos cosas:

Usa "em" para Media Queries, no "rem"


¿Porqué? porque el valor que obtiene "em" en Media Queries es relativo al user agent, no al estilo CSS. Por lo que si usas "rem", que debe tener una base definida en el CSS, nunca tomará esa base definida, sino que siempre tomará la medida 16px o 14px según el navegador.

En la especificación de la W3, sección 6:

W3 :

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.




Esto significa que las medidas relativas se basan en el valor inicial, por ejemplo 1em toma su valor inicial de 16px. "rem" no nos sirve porque su valor lo debemos declarar, y según la definición Media Queries ignora los valores declarados. Puede ser que el Media Querie en "rem" funcione pero siempre tomará el valor inicial por defecto (16px), por lo que es mejor usar "em".

Esto nos lleva a la segunda cuestión:

No podemos controlar todo


Como diseñadores, o frontends, debemos librarnos a estas premisas, y sabes qué cosas podemos controlar y que cosas no. Muchas veces será el usuario el que termine de realizar ese control final al optar por visualizar el sitio de la manera en la que más sencillo será para él. Pero hay algo seguro, debemos dejar de pensar en píxel perfect cuando diseñamos para Web, y saber que los diseños estarán en constante movimiento literalmente, y es por eso que siempre debemos priorizar el contenido.

Pasar de píxeles a "em" con ish. 2.0


Hay varios conversores, pero está herramienta, ish. 2.0 es muy simpática. Establece las medidas en small, medium, large y full. Tiene una función, HAY! que sirve para generar los breakpoints de tu sitio, dándote la información del valor en píxels y "em". También podés agrandar o achicar manualmente o darle al botón Random. En Disco te muestra en modo random todos los breakpoints que puede haber en el sitio. Es muy útil! podés usarla como demo web o descargar la aplicación en Github.



Si nos fijamos, las medidas no están en tamaños respecto a dispositivos, si no a tamaños: chico, mediano, grande, extra grande, full o completa. Una manera distinta de pensar la aplicación de Media Queries.

¿Creen que esto es más funcional que usar Media Queries en píxeles?

El problema de optimizar gráficos 3D en videojuegos. Low Poly sí o no?

En el mundo del modelado 3D hablar de Low Poly hoy en día puede tener dos contextos diferentes que llevan a la confusión.

El modelado en Low Poly existe desde siempre, los primero modelos 3D en la industria de los videojuegos, eran Low Poly, la dimensión en píxeles de las texturas eran pequeñas, debido a que no se le podía exigir mucho al motor de gráficos de las consolas de esa época, que tenían la tarea de renderizar en tiempo real.



El Low Poly para la optimización de recursos 3D, hoy en día sigue vigente.

En el otro lado de la moneda, Low Poly es un estilo y una tendencia gráfica, que si bien tiene unos cuantos años, aun está en pleno boom. A pesar de que la tecnología de hoy nos permite hacer modelados orgánicos de alto poligonaje, también es una opción evocar un poco a lo retro, a lo simple (visualmente hablando), a romper estándares de estética.

En este estilo se trata de representar mucho con pocos recursos. En el contexto del modelado 3D esto se traduce en: poca geometría y texturas simples que es igual a un look Cartoonesco, y bastante cool.

Low Poly para la optimización de recursos 3D


Citando a la consola Nintendo 64, en cualquier título encontramos modelos 3D hechos en Low Poly para la optimización de recursos. Se hacía un esfuerzo enorme para que los modelos no luzcan tan geométricos, todas las texturas estaban pre-renderizadas, entre otras técnicas, ya que no se le podía exigir mucho al motor de gráficos de esta consola. Aun así, ¿nunca intentaron contar de cuántos triángulos estaba hecho Link en The Legend of Zelda - The Ocarine of Time?

Incluso en el remake de Nintendo 3Ds de esta entrega, es evidente que se intentó fidelizar el viejo estilo, pero seguro consideraron "pecado" dejar tantos triángulos evidentes.



Hoy en día en el contexto de Low Poly para la optimización de recursos podemos hablar de personajes de un videojuego con un total de 10,000 polígonos o mucho más y tamaños de texturas de 1024x1024 por que el avance tecnológico lo ha hecho posible. Claro, esto si pensamos trabajar el arte gráfico de un videojuego de última generación.

Técnicas de modelado 3D y optimización versus tecnología


Gracias al surgimiento de nuevas tecnologías en cuanto al modelado 3D (WebGl, Augmented Reality) siguen siendo de mucha importancia técnicas como la retopologización, crear mapas de normales, pre-renderizar texturas y por encima de todo, modelado 3D, donde un total de 5000 polígonos por objeto y una textura de 1000x1000 sea una exageración.

Esto es debido a que el motor de gráficos de esta tecnología (en el caso de WebGL es el navegador mismo) no tiene la potencia que posee una consola de última generación. En mi experiencia, introducir un modelo de más 5000 polígonos y cuatro texturas de 1000x1000 dentro de un móvil es pedirle a la aplicación que se cierre, o incluso que se niegue a abrir.

Esto es Low Poly para la optimización de recursos:
  • Modelo: 502 polígonos.
  • Textura: 128x128px.




El Low Poly como estilo en la ilustración 2D y animación en 3D


El surgimiento de este estilo, me atrevo a relacionarlo directamente con el Flat Design. Este estilo también busca optimizar recursos, y ahora ya dejó de ser pecado dejar triángulos evidentes. Este recurso se ha convertido en el estilo por excelencia y usarlo es muy cool.



Sin embargo, al igual que el Flat Design, este estilo no es recomendable para todo, ni deberíamos usarlo sólo por que esté de moda, el contexto del proyecto que emprendamos nos dirá si es factible usarlo o no.



En mi opinión personal, se ha sobreexplotado este estilo, hay artistas que buscan que el modelo luzca muy geométrico, que los triángulos sean muy evidentes, y es tanto este empeño que, se olvidan de parte de la esencia del Low Poly: optimizar recursos. Se olvidan del nombre "LOW POLY", y hacen todo lo contrario, generan "muchos polígonos que tengan una apariencia geométrica".



No voy a negar que este último ejemplo también es muy cool (de hecho es obra de mis artistas favoritos: Nick Campbell "the gorilla"), sólo opino que es un error catalogarlo como Low Poly.

Híbridos, óptimos o completamente inadecuados?


Podemos concluir en que un modelo será Low Poly o no, dependiendo de la plataforma en que utilicemos el modelo: una animación en video, un personaje para un juego de video, un personaje para ser implementado en webGl, por mencionar algunos ejemplos.

Pero aun así podemos debatir con la siguiente imagen:


¿Es Low Poly como el título de la obra dice? En mi opinión me parece demasiado más de 2000 polígonos sólo para una lámpara. ¿Cuántas lámparas habrá en la escena? Es un elemento que se repetirá al menos cuatro veces, mas la cantidad de polígonos de cada objeto en esta escena: si la lámpara tiene más de 2000, ¿cuántos tendrá un auto? ¿cuántos un personaje? Por nivel de jerarquía, seguro serán muchos más.

Al menos que este ítem sea utilizado en algún juego de Play Station 4, tal vez no tengan validez mis cuestiones. Tal vez es sólo envidia mía por que la artista posiblemente trabaje para RockStar Games.

We need hablar bien en el mundo tech

El spanglish, ese hijo bastardo de la cultura de los inmigrantes latinos a Estados Unidos, ya se abre paso en el mundo como una lengua, que quizás en algunos años empiece a ser tomada más en serio por lingüistas y defensores a ultranza del español y es muy usado en el mundo de las startups latinas.

El mundo del emprendimiento no es ajeno a estos avatares del idioma y también ha creado algunos pequeños demonios idiomáticos a cuyo uso me opongo rotundamente y que hoy quisiera denunciar.



El léxico de la atención al cliente


Todos los ámbitos de desempeño humano desarrollan sus léxicos. También sus chistes privados, sus propias expresiones. El mundo tecnológico no está excluido de esta particularidad.

También es muy probable que cada profesión, ocupación u oficio desarrolle sus propias deformaciones del idioma, por ejemplo en los call centers los encargados ya no verifican nuestra información sino que “validan nuestros datos”, a un asunto cualquiera se le dice por defecto “tema” y a su tratamiento “manejo”. Manejaremos el tema de la validación de sus datos puede ser una expresión tan corriente como poco agradable en el contexto de la atención al cliente.



¿Cuáles son esas palabras horribles que se usan en el mundo tecnológico y que debemos evitar, por ser un atentado contra nuestro hermoso español?

Espero que prefieras entrar y no accesar


:

Anoche casi no puedo accesar a mi apartamento porque dejé tiradas las llaves”.


¿Esta te parece una expresión normal o intuyes alguna maldita anomalía en ella? Por favor, di acceder o entrar, nunca accesar. ¿Por qué? sencillamente el verbo accesar no existe en español, es una castellanización (como ha pasado con muchos otros verbos) del inglés To access, que significa “tener acceso”.

Uno no accesa un servicio web, ni mucho menos diría corrientemente que “accedió” o “accesó” a su apartamento luego de encontrar las llaves para señalar la acción de entrar al lugar en donde vive.



Por favor, ya mismo oprime enter para ponerte en el modo de uso del bonito y simple verbo entrar. Mejor dicho: accesa :shock: al uso del verbo entrar, para que me entiendas. Repite después de mí: "Entré a mi apartamento. Entré a Facebook. Entré a una bonita tienda de discos". ¿Viste? Suena simplemente hermoso :D

Estar ubicado en, no estar basado en


En el mundo startup latino es común la pregunta ¿en dónde está basada tu empresa? De nuevo acudimos a la versión deformada en español de la expresión inglesa “based in”, que en español significaría algo como "estar ubicado en".

En español la expresión “estar basado en” refiere a los fundamentos de una explicación, a las ideas a partir de las cuáles surgieron empresas, libros, aplicaciones web, nuevas ideas acerca del universo. Por ejemplo:

Aleyda :

Las ideas de Galileo se basaron en el redescubrimiento del diálogo platónico Timeo, en el que se planteaba un sistema del mundo en el que el sol, y no la tierra, era el centro del universo conocido


Nunca vayas a decir por favor que "Galileo estaba basado en Florencia”. Es mucho más simple y comprensible decir que Galileo vivió en Florencia.

¿Eres empresario, emprendedor o emprendedurista?


Sesquipedalismo es una palabra extraña para describir un comportamiento no menos extraño: la costumbre de alargar las palabras con terminaciones “raras” o de decir lo mismo con un mayor número de palabras para aparentar sofisticación al hablar.

¿Quieres un ejemplo? si para decir que María tiene gripa usas la expresión “María en este momento afronta un delicado proceso gripal” estás incurriendo en esta rareza idiomática. ¿No es más sencillo decir que ella tiene gripa y punto?

Con esta explicación en mente grábate que la palabra emprendedurismo no existe. En español tenemos la palabra emprendedor para referirnos a quien funda una empresa y todavía una más sencilla y agradable para referirse a estas mismas personas: empresarios.



Dar a las palabras una apariencia sofisticada no te hace grande. Y recuerda: lo bueno, si breve, dos veces bueno. Esta fue la lección más importante que aprendí en la universidad.

Diseño adaptativo, o Responsive design: nunca Diseño responsivo


Aunque la palabra responsivo sí existe en el español (es decir, aparece en el DRAE), no es, ni de lejos, lo mismo que significa la inglesa responsive.

Lo que quiere designarse con la expresión responsive design es la capacidad de un diseño web para adaptarse a los diversos tamaños de pantalla existente. ¿Por qué no simplemente decir diseño adaptativo? o, si te suena raro (como a mí) entonces escribe y usa responsive design, pero no hagas esas extrañas mezclas que solo le salen bien a la comida fusión. Y no siempre :P

Aplicación, no aplicativo


No entiendo bien por qué en los últimos meses los periodistas y empresarios del mundo tecnológico han decidido usar la deformación “aplicativo” al referirse a una aplicación, designada casi siempre en inglés o en el contexto del trabajo en tecnología como una app. ¿Es que acaso suena más sofisticado decir aplicativo? Aunque algunos creen que “aplicación” y “aplicativo” significan exactamente lo mismo, DRAE es tremendamente esclarecedor al respecto:

  • aplicativo, va.
    1. adj. Que sirve para aplicar algo. O sea como un copito para limpiar tus orejas o un paño para ponerte crema encima.

  • aplicación.
    4. f. Inform. Programa preparado para una utilización específica, como el pago de nóminas, formación de un banco de términos léxicos, etc.


Para cerrar te dejo este poema, que describe muy bien lo idiota que te ves cada vez que intentas parecer sofisticado al hablar. Y recuerda una regla simple de la vida: casi siempre menos es más.

Poemática enfisemática

En cierta prosa hinchada y mema,
tan pesada como enfática,
nunca se trata del problema
sino de la problemática.

La esdrujulación por sistema
que suena tan antipática
me acaba de inspirar un tema.
Perdón, iba a decir temática.

Tal vez de elegancia suprema,
en esta sucesora de Ática,
es que en vez de entrar al cinema
ingresamos a cinemática.

O que siguiendo el mismo esquema
una criada aristocrática
no sahúme ya con alhucema
sino con alhucemática.

O si el que recorta la grama
con su podadora automática
le propone de golpe al ama
arreglarle su gramática.

O si en la Bolsa el accionista,
al mirar la demanda apática,
le pregunta al comisionista:
¿Hoy está cómo? ¿Cómo estática?

Mujer, para quien mi cartera
tiene atracción carismática,
la plata del diario quisiera
yo dártela en forma de plática.

Hernando Martínez Rueda


Si quieres denunciar el mal uso de alguna otra palabra puedes hacerlo en la sección para comentar.

Conoce las ventajas de Universal Analytics y actualiza ya

Hace aproximadamente un mes, Google Analytics nos empezó a avisar a todos los que tenemos cuentas de Analytics con código de tracking antiguo (ga.js) que ya podemos actualizar a Analytics.js o código Universal de Analytics para aprovechar las nuevas capacidades que tiene. Si recordamos, antes no podíamos tener remarketing y algunas funciones en Analytics.js, y Google lo sabía, así que mejoraron su versión y mandaron la actualización a todos los usuarios con nuevas funcionalidades.

Conoce las novedades, y por qué es conveniente actualizar el código de seguimiento de Google Analytics.



Para actualizar tu código de seguimiento, debes iniciar un proceso de transferencia que modificará tus reportes de toda la vida al nuevo lenguaje de Analytics.js, luego te pedirá cambiar el código de seguimiento de tu página web.

Ahora sí, Remarketing


El remarketing puede ser activado desde Google AdWords o Analytics, a opinión personal, es mejor utilizarlos desde Analytics y conectar tu cuenta de AdWords para mantener ambas herramientas sincronizadas.

Integración con Tag Manager


Ahora podrás plantar el código de Google Tag Manager en todas tus páginas, y administrar desde esta herramienta otros códigos de seguimiento como AdRoll y Analytics.js, esto es muy recomendable ya que maneja versiones de etiquetas que te permiten tener un historial al estilo de github.

Reportes modulares con Dimensiones Personalizadas


Podrás plantar código de Analytics.js que define a una página como una dimensión y poder hacer seguimiento de ésta como si fuera una dimensión normal de Google Analytics, importante para hacer más modulares nuestros reportes.

Datos más exactos con Sesiones, no visitas


Antes, Google Analytics nos mostraba los reportes por “visitas” en una página y “visitas únicas”, ahora Google se va a personas reales y nace el concepto de Sesiones, puedes configurar el tiempo en que dura una sesión que está en 30 minutos por defecto. Ahora el reporte se dividirá por cuántas sesiones tuvo el domino, o cuantas páginas en promedio visita una sesión.



El cambio en este caso es importante, porque las visitas nos mentían, nos decían que podíamos tener 100 visitas, pero pudieron generarse en una misma sesión, en este caso nos acercamos más a la cantidad de usuarios que nos ven, qué tanto impacto tenemos sobre ellos y lo más importante, si el contenido de mi página tiene relevancia para el usuario.



Estas son las actualizaciones más importantes de este código, además, cuando vas a iniciar la transferencia de ga.js a Analytics.js, Google te asegura que todo lo que tenías con ga.js será compatible con Analytics.js y no perderás ninguna información, pero si utilizas Tag Manager, debes tener cuidado, pues el código en este caso sí cambia.

La era del diseñador Frontend y el fin del PSD intocable

Algunos quieren matar a Photoshop o a los diseñadores que lo usan. No, esperen. Algunos quieren matar a los diseñadores y a los procesos de diseño. Esto es cierto y muy tímidamente comienzan a surgir términos como “la era post-PSD” e inclusive hay un “NoPSD movement”, really, donde comienzan a reverse las nuevas dinámicas de trabajo entre frontends y backends.

Estas nuevas tendencias en realidad lo que pretenden es proponer mejores flujos de trabajo entre diseñadores-developers-cliente y dar una solución práctica a la forma cómo enfrentamos desde la interactividad algunas tendencias como el diseño responsive en la web.



¿Deben cambiar los procesos de diseño?


Me gusta mucho ver cómo trabajan los equipos de developers. No debe haber gente más práctica en el mundo que una persona que sabe programar y trabajar con un equipo de desarrollo con un mismo fin.

Uno de los fundamentos de estas crecidas voces de devs que están en el área de diseño de software es que la diversidad tecnológica nos presenta un conflicto de diseño ante tantas resoluciones. Esto representa un gran problema de frente al cliente quien podría acabar con archivos con 100 tipos de diseños con diferentes vistas de un mockup.

Todo esto me hace pensar si realmente los diseñadores nos dimos cuenta de cuánto han avanzado en ciertas prácticas algunas áreas y si nosotros hemos hecho lo mismo con las nuestras.

Continuous design y la Era Post-PSD


La propuesta del “Continuous design” es la de diseñar con código la base mínima del producto en atención a las necesidades de programación que lleva detrás, para poder tener en poco tiempo un producto visible en la vida real, sin bocetos estáticos, y para ir generando el diseño con base en los requerimientos del cliente. Es un proceso de diseño ágil que desde el comienzo tiene en claro que el diseño va a ir creciendo y mutando sobre una misma idea. La idea al fondo de esta metodología es que, si hay que cambiar el diseño en el camino, que cambie y que no por eso el diseño base sea obsoleto.

:

Build the smallest thing you can as a base. Know you’ll change it. Build it out over time. Stop when you’ve done enough. Fuente.


Cuando trabajamos para la web generalmente este proceso es inverso. Si participamos en equipos grandes hay metodologías que ayudan a organizar las etapas del diseño y la arquitectura de contenido de un proyecto web o móvil; en estos se genera, con equipos interdisciplinarios, la base del iceberg del proyecto, mediante estudios de casos análogos, se establecen las partes de la arquitectura de usuario, se trabaja en el cardsorting y el mapa de contenidos, wireframes, etc. hasta llegar al diseño final que luego recibirá el equipo de desarrollo para volverlo realidad.

Darcy Vergara en su Curso de UX online nos dió un excelente punto de vista ante este panorama:

darcy :

Cuando se añaden elementos de experiencia de usuario al diseño estamos haciendo mucho más énfasis en la experiencia que en el producto. Diseñar con este enfoque hace la diferencia entre productos que la gente tolera y productos que la gente ama.


¿Por qué el debate se centra en una herramienta?


¿Las herramientas ayudan con los procesos creativos o están para sepultarnos en una cueva de archivos obsoletos?

Las herramientas, si están bien utilizadas, no deberían formar parte de la discusión, sobre todo en ambientes creativos en los que las ideas más rentables pueden estar escritas en una servilleta de papel a modo de wireframe.



Hay herramientas que ayudan, o que están tan incorporadas al trabajo del diseñador que colaboran a que el canal del proceso creativo no tenga interferencias. Podemos hacer lo mismo en Photoshop que en Gimp.

El movimiento anti-PSD, menos Photoshop y más Frontend


La crítica principal a la herramienta de Adobe es que los diseñadores entregamos una pintura en la pared en vez de un producto en el que se pueda ver la interactividad en los dispositivos y con el usuario; además, es mucho más endulzante para el cliente ver que en una primera instancia el producto está sobre rieles.

Según esta tendencia anti-PSD la meta es lograr que el diseñador se tire de cabeza a diseñar usando código, como una manera de hacerlo más partícipe en el proceso de desarrollo y así evitar entregar el trabajo en un archivo psd con simulación de interacciones escondidas en capas invisibles en photoshop.

:

Just like the NoSQL movement was about using alternative data stores to support better data-modelling, the NoPSD movement is about alternatives that better support the real movement: Continuous Design.


La propuesta es que el diseñador se vuelva cada vez más Frontend y adopte herramientas más simples e interactivas, que generen resultados más rápidos, y de alto impacto en una primera instancia de trabajo.

La tendencia está en la nube


La tendencia en el trabajo de diseño web está cada vez más inclinada a las herramientas móviles y en la nube. Adobe lo entendió muy bien y por eso su último producto se llama Creative Cloud, además de haber adquirido la plataforma Behance, en la que podemos subir nuestro diseño directamente desde Photoshop a nuestra propia galería en una de las redes sociales más importantes de la escena profesional de creativos.

¿Es esto suficiente? Adobe ha hecho un gran esfuerzo por no quedarse atrás en la carrera al estrellato online, pero todavía no ha logrado una herramienta exclusiva para utilizarla en procesos de diseño web. Fireworks era una de las herramientas más potables y la enterraron, y ahora Sketch le está ganando el terreno en el ámbito de los diseñadores de interfaces pero es de pago y para Mac por lo que todavía no ha tomado fuerza en los países de Latinoamérica.

La aparición de herramientas online tan fáciles de manipular, con las que podemos generar un template responsive de la nada, con frameworks integrados en javascript (hola layoutit.com) es hoy mucho más atractivo para las primeras instancias de diseño que las “pinturas” de una interfaz estática en Photoshop.

La fuerza de los frameworks se apodera del diseño


Los frameworks, que antes sólo eran terreno de los programadores, están ahora avanzando en el cielo de los diseñadores. Hoy contamos con herramientas para diseño como 960 Grid System, Foundation, Bootstrap, Holder.js, así como también podemos comenzar nuestros diseños a partir de prototipos already responsive y crear wireframes y mapas de contenido online con herramientas sencillas y gratuitas.

Abracémonos diseñadores y programadores


Volvámonos un poco más hippies y menos metaleros, y tratemos de no hacer una guerra anti-cosas, sino entendamos qué es lo mejor para poder trabajar en el jardín de la felicidad. No seamos reacios a adoptar nuevos caminos, procesos y tecnologías si eso va a mejorar nuestras experiencias de trabajo, pero tampoco seamos tan extremistas como para tirar por la borda tantos años de experiencias y productos exitosos que se han logrado solamente con tener una buena dinámica entre los equipos de diseñadores y programadores que han dejado a los clientes más que felices. Herramientas aparte, no debemos dejar de mirar el horizonte de lo que importa: generar productos multiplataforma, basados en usabilidad y contenido.

Mejorando.la y Cristalab estarán en el FLISol Bogotá

Como es tradición de ya hace 10 años, el pasado 26 de Abril se celebró el FLISoL (Festival Latinoamericano de Instalación de Software Libre) en la mayoría de latinoamérica, un festival que solo puedes vivir de manera presencial con el objetivo de llevar el software libre a todas las personas.

El sábado 10 de mayo se celebrará en la ciudad de Bogotá con el apoyo de la Alta Consejería Distrital de las TIC, la Secretaría de Gobierno y el Instituto Distrital de Recreación y Deporte, entidades comprometidas con fortalecer de manera pública el software libre en Bogotá.



La idea del FLISoL será instalar software libre a todo el público que pueda llevar su máquina al IDRD en la ciudad de Bogotá, desde distribuciones de GNU/Linux hasta alternativas de programas como LibreOffice, Firefox, GIMP y muchos más, en paralelo se realizarán conferencias y talleres sobre este movimiento.

Este evento será 100% presencial, pues la iniciativa es crear lazos y promover la migración de usuarios al software libre, al igual que promover soluciones de bajo coste pero potenciales a pequeñas y medianas empresas.

Habrá una interesante rueda de conferencias sobre temas como seguridad en bitcoins, plataformas de educación virtual, Scratch, Wearable Electronics, Linux para niños, y por supuesto Mejorando.la y Cristalab.com estarán presentes con una conferencia de @yograterol: "OpenStack, Infraestructura como un Servicio".

Inscríbete ya en este gran evento y nos vemos el 10 de mayo en el IDRD.

Más información en flisolbogota.org

Ataques hacker modernos a los que toda web está expuesta

En la actualidad la mayoría de la información se mueve en internet, esto ha hecho posible el avance y crecimiento de las empresas, pero entre más atractiva sea la empresa (negocio) más vulnerable es ésta de ser atacada, porque así como hemos avanzado hacia grandes cambios, la gente maliciosa también lo ha hecho, y estos siempre están en busca de errores que explotar para penetrar los sistemas y robar información. Ya todos conocemos los peligros que podemos atravesar con el agujero de seguridad Heartbleed por ejemplo.

Las intrusiones a los sistemas son cualquier tipo de penetración no autorizada. Por más inofensiva que sea, si no se tiene autorización, se está penetrando el sistema. Estas intrusiones pueden ser pasivas o activas, dependiendo de la intención del atacante. Estos ataques son más comunes de lo que se piensa, y así no tengas una súper organización estás propenso a ser atacado; empezando por el spam que se recibe a diario en las cuentas de correo, aunque ya son muy inofensivos y la mayoría de los usuarios no caen en este tipo de correos esto es un ataque masivo y diario a usuarios reales, así que aunque no seas el dueño de una organización no estas exento a ser atacado por los “cyber-ninjas”.

Cyber-ninjas versus hackers


Estos “cyber-ninjas” son también llamados hackers esto es equivocado; los hackers son quienes contribuyen y hacen que la red funcione, estos son gurús en temas informáticos y sus aportes contribuyen al diseño, desarrollo, y aplicación de sistemas operativos, creación de antivirus y pruebas de fallas de seguridad; a los hackers les debemos agradecer por los avances de los sistemas operativos y por protegernos de los verdaderos “cyber-ninjas”.



Crackers, los delincuentes del ciberespacio


El término correcto con el que debemos referirnos a los delincuentes del ciberespacio es crackers; estos suelen ser expertos en programación de software y sistemas operativos, que con el tiempo aprenden a determinar la progresión de las debilidades de un sistema operativo, para así encontrar puertas traseras por donde penetrar en el sistema.

Estos delincuentes se dedican a robar datos, contraseñas y accesos que les permitan irrumpir en los sistemas. Muchos de estos crackers roban datos con el fin de conseguir dinero (por esta razón los sitios de e-comerce son los sitios más atacados), aunque en algunos casos lo hacen por venganza (como los ex empleados de empresas) y otras veces lo hacen con fines políticos.

Los crackers están armados con infinidad de herramientas que les ayudan a penetrar los sistemas, y no solo eso, tienen el apoyo de comunidades enteras de crackers donde se comparten datos y bugs de sistemas operativos, así se distribuyen la información entre todos, haciendo estos ataques más constantes. Entre las herramientas más utilizadas se encuentran:

  • Wireless Sniffers: son rastreadores de las redes inalámbricas, por medio de los cuales pueden desviar la información que está siento transmitida en las señales.
  • Packet Sniffers: Les permiten reconocer los tipos de paquetes que viajan dentro de la red, y capturar los que necesitan.
  • Port Scanners: Esta herramienta es muy común y su principal utilidad es buscar puertas abiertas o sin ninguna clase de seguridad para atacar los sistemas.
  • Password Crackers: Son algoritmos de fuerza bruta que atacan cualquier tipo de encriptación para descubrir contraseñas de acceso.


Todas estas herramientas son de muy fácil acceso, el truco está en saber utilizarlas para no dejar rastros del delito y si es posible que no se enteren de su presencia en la red; es por esto que se debe estar muy pendiente de síntomas de un ataque por más pequeños que parezcan, como cuando se detectan muchos intentos fallidos de acceso. Un usuario común se puede equivocar como mucho unas tres veces en introducir la contraseña, más de eso se debe sospechar de un ataque de fuerza bruta al acceso del sistema; también el que muchos paquetes estén dañados no es común en la red y no se deben dejar pasar; hasta comportamientos inesperados del sistema como reinicios, cambios de horas en el sistema, etc. Todo esto se debe investigar, ya que es mejor prevenir cualquier ataque inesperado.

Cómo prevenir ataques en el sistema


Para evitar estas intrusiones en el sistema se debe estar en constante revisión, ya que cada vez que reparas un fallo los crackers intentan abrir dos más para penetrar.

Para evitar esto se debe educar al recurso humano y administrar adecuadamente el físico, empezando por:
  • Implantar políticas de seguridad en los accesos al sistema y lo que se hace en ellos.
  • Test de riesgos, es decir atacarse a sí mismos para descubrir vulnerabilidades,
  • Hacer auditorias de la información y el comportamiento del sistema y sus usuarios,
  • Tener actualizado el plan de recuperación para después de cualquier ataque.


Control, control, y más control


La educación de los usuarios es la tarea más importante, ya que la ignorancia de muchos usuarios es el principal bug de entrada a la organización; por eso se hace primordial el control de accesos, verificar quiénes son y qué tipo de autorización tienen. Esto implica clasificar la información que cada tipo de usuario va a conocer, verificar qué es lo que hacen los usuarios cuando están dentro del sistema y cuál es su medio para conectarse.

Prevenir penetraciones a los sistemas no es una tarea fácil, ya que todos los días los “cyber-ninjas” encuentran una nueva forma de atacar los sistemas; así que se debe ser ágil para reconocer los avances de la tecnología y estar informado de las vulnerabilidades que traen consigo, y así estar preparados para evitar cualquier ataque que se pueda presentar en el futuro, así ahora todo esté funcionando bien.

Rockstar Guitarrista Frontend: La historia de un músico emprendedor

Esta es la historia de Andrés Ospina, el guitarrista que empezó personalizando los perfiles de sus amigos en Hi5 y que, después de tomar el curso de Frontend en Mejorando.la, decidió empezar a diseñar una landing page para promocionar su emprendimiento, Clasesdeguitarra.co.



Andrés estudió música durante varios años en una reconocida academia de Bogotá, en donde empezó a colaborar con sus conocidos de bandas musicales para ayudarles a dar identidad a sus perfiles sociales en hi5, que por aquel entonces y en lo sucesivo, se popularizó como un sitio para promocionar artistas emergentes.



Por esa misma época quiso, en compañía de algunos amigos, crear y promocionar un evento musical bianual, del mismo corte del popular Festival Iberoamericano de Bogotá.

Entonces empezó con la elaboración de un plan de negocios, la búsqueda de capital y la "ejecución" de todos los “grandes desafíos” del mainstream del emprendimiento en América Latina, pero al cabo de dos años de trabajo concluyó que Necesitábamos mucha plata, no sabíamos vender patrocinios e hicimos todas las estupideces posibles en ese camino.

Una historia que parece repetirse en muchos emprendimientos que se dedican a estructurar ambiciosos planes de negocio, para convencer a posibles inversionistas y que a la postre inmovilizan a la gente, haciéndoles creer que empezar una empresa es un asunto súper complejo.

La epifanía de la propiedad clear


Lo que parecía hasta ahora una historia dolorosa se transformó en una historia aparentemente esperanzadora.

Un día cualquiera, hace unos tres años, Andrés se encontró con el programa de Christian y Freddy, Mejorando.la Web, y se interesó por las temáticas de trabajo web que desarrollaban, muy enfocadas a lo práctico, entonces se inscribió a un curso presencial de Frontend, dictado por Freddy Vega y Joan Piedra:

Andrés :

En aquel entonces yo apenas tocaba la guitarra, tenía una relación sentimental que me exigía mucho en términos de dinero y pensé que necesitaba ganarme más plata. Se me ocurrió hacer un flyer, con anuncios de Google, de muy baja calidad para ser sincero. Adicionalmente un amigo me enseñaba algunos fundamentos de CSS. Al tomar el curso descubrí la propiedad clear y fue una verdadera revelación.




De músico a creador de landing pages


Con los conocimientos que adquirió en el curso decidió hacer una nueva versión de su sitio, y después de asistir a la Miniconferencia de UX de Mejorando.la descubrió la herramienta Sketch por recomendación de uno de los profesores, entonces compró la licencia y en tres días hizo la primera versión de Clasesdeguitarra.com.


Primera versión del landing.


¿Lecciones online de guitarra?


El sitio por ahora te ayuda a buscar un profesor de guitarra que te dé lecciones personalizadas, enfocadas a lo que te gustaría aprender y no tener que esperar, como en una academia, a que pasen muchas lecciones antes de que puedas empezar a interpretar lo que te gusta. La idea es que vayas aprendiendo con lo que te gusta y no con lo que te toca.

A futuro pretenden ofrecer lecciones personalizadas online a nichos cada vez más específicos, a través de un formato "hangout" que conecte a unos pocos interesados en desarrollar un aspecto técnico muy puntual, aunque es necesario aceptar algunas limitaciones, como por ejemplo lecciones para aprender a afinar una guitarra, que siempre requerirán de la presencialidad.

Al preguntarle a Andrés si cree que esta clase de aprendizaje reemplazará a futuro a la educación tradicional respondió “Sí, siento que hay cosas de la academia que no voy a usar nunca, que son simplemente requisitos y que es necesario empezar por lo que a uno le gusta".

La autora de este post no está tan convencida de este planteamiento, pero sin duda sitios como Clasesdeguitarra.co son una buena muestra de que a hacer se aprende haciendo, que hay que tomar riesgos y aprovechar todas las herramientas que nos ofrece Internet para ser gestores de nuestras ideas, sin tener que esperar una eternidad o la aparición de un inversionista con rolex de plástico que nos las financie.

No importa lo que hagas, hoy todo pasa por la Web


Este proceso que ha seguido Andrés es una buena muestra de que cada vez más los profesionales de todas las áreas están llamados a desarrollar habilidades para el trabajo en la Web, que aprender código, técnicas de mercadeo, conceptos de experiencia de usuario, entre otros, son asuntos que hoy en día todos deberían saber y que se consideran hoy en día como áreas en las que es imperativo“alfabetizarse”. Prueba de ello es este músico que con algunos cursos online ha logrado echar adelante su idea de negocio.

Internet entera en riesgo por el bug Heartbleed de SSL

Google y la firma de seguridad Codenomicon han reportado un agujero de seguridad para el software OpenSSL que puede afectar a más de la mitad de los servidores del planeta. El error tiene el código CVE-2014-0160.



Qué es Heartbleed


Este es el nombre que ha recibido el agujero de seguridad, que permite que atacantes puedan robar información cifrada a través del protocolo SSL/TLS en condiciones normales. El error fue introducido en el código de OpenSSL en Diciembre de 2011.

Como bien sabemos SSL/TLS es el protocolo que la mayoría de los sitios utilizan para proteger la comunicación entre el cliente y el servidor, y se utiliza en la mayoría de los servicios como redes sociales, buscadores, correo electrónicos, entre otros.

Versiones de OpenSSL en riesgo


  • OpenSSL 1.0.1 hasta 1.0.1f son vulnerables.
  • OpenSSL 1.0.1g no es vulnerable
  • OpenSSL 1.0.0 no es vulnerable
  • OpenSSL 0.9.8 no es vulnerable


Cómo resolver la vulnerabilidad


La mayoría de las distribuciones Linux ya tienen listos los paquetes con el parche del bug.



Sistemas que deben hacer un update del paquete de OpenSSL


Sistemas basados en RHEL:

Código :

# yum update openssl


Sistemas basados en Debian:

Código :

# apt-get upgrade


Como último paso, es obligatorio el reinicio de todos los servicios que utilicen OpenSSL como el servidor web, de correo, base de datos y proxy.

Sitio web del bug: http://heartbleed.com/

« Ver más nuevos 1 2 3 4 5 6 ... 113 Ver más viejos »