// <![CDATA[ function styleCode() { if (typeof disableStyleCode != 'undefined') { return; } var a = false; $('code').each(function() { if (!$(this).hasClass('prettyprint')) { $(this).addClass('prettyprint'); a = true; } }); if (a) { prettyPrint(); } } $(function() {styleCode();}); // ]]>
Cada vez más personas utilizan computadoras fabricadas por Apple y muchos de sus usuarios no saben que cuentan con una 'terminal'. Esta herramienta para interactuar con el sistema operativo tiene sus orígenes y espíritu en UNIX, por lo que es sumamente poderosa si la aprendes a utilizar.
¿La termi-qué?
A veces también llamada consola, dentro de tu Mac está en Aplicaciones-> Utilidades-> Terminal. Si usas spotlight (CMD + barra espaciadora) basta con que teclees 'terminal'.
¿Para qué me sirve?
Básicamente sirve para darle instrucciones a tu computadora. Un ejemplo sencillo es creando una carpeta con el comando 'mkdir' en vez de usar el menú del Finder o dando clicks en la pantalla con tu mouse.
¿Y por qué molestarse en aprender a usarla?
Generalmente un programador te daría una cátedra de todas las maravillas que puedes hacer con ella. Nosotros te comentamos que con sólo saber que existe, te conviertes en parte de un exclusivo segmento de 4% de los usuarios de Mac, y puedes hacer cosas cool e impresionar a algunos de tus amigos (e impresionarte a ti mismo en el proceso).
Así que abre tu terminal! Acá te damos 5 sencillos comandos para que le pierdas el miedo.
1. Haz hablar a tu Mac
Sólo teclea 'say Hola' y ¡escucha hablar a tu Mac! Intenta con una frase más larga o con el nombre de alguno de tus compañeros como:
2. Abre Finder
Si escribes
open .
Te abrirá una ventana de finder desde la carpeta en la que lo ejecutaste.
3. Apaga tu computadora
¿Y esto para qué? Si no lo encuentras últil pruébalo sólo por diversión, teclea:
sudo shutdown now
Te va a pedir tu password, así que introdúcelo después.
4. Cambia el formato de tus capturas de pantalla
Por defecto cuando tomas un screenshot se generan en formato PNG. Si quieres que los archivos sean más ligeros, aunque de menor calidad, puedes pedirle a tu computadora que los genere en JPG. Para esto teclea:
defaults write com.apple.screencapture type JPG
Ahora usa la secuencia habitual de CMD+Shift+3 y revisa el tamaño y calidad de la foto. Siempre puedes regresar al formato original escribiendo:
defaults write com.apple.screencapture type PNG
5. Distráete con emacs
Si no sabes que es esto, no te preocupes ¡te vas a divertir! Sólo un par de tips antes de usarlo:
1. Para salir en cualquier momento, tienes que teclear Control+x y después Control+c
2. Si todo falla cierra la ventana de la terminal
¿Listo? Teclea:
emacs
Y una vez en el menú presiona la tecla Esc, después teclea la tecla 'x'. Ahora prueba escribiendo alguno de los siguientes programas:
- tetris
- pong
- doctor
¿Te pareció divertido, frustrante, o quizá útil? Déjanos tus comentarios!
¿Te ha pasado que estás listo para empezar el proyecto nuevo que tu cliente quiere pero... todavía no se decide? Tal vez ya platicaste con él varias veces, le diste tu opinión, pero sigue indeciso y evaluando si será una buena idea, y encima quiere que se le añada otra característica más sin que se incremente el precio.
Acá te damos cuatro consejos para que cierres el proyecto y así sepas si vas a cobrar o no, dejando de perder tiempo, energías y enfoque.
1. Haz una cita
Ninguno de los siguientes puntos sirve si no puedes hacer que tu cliente comprometa un tiempo para verte. Si ya has intentado hablar mucho con él y ya está en modo esquivarte-y-no-contestarte, márcale desde otro número. Puedes comentarle que se te acaba de ocurrir algo y no le vas a robar más de cinco minutos; incluso puedes sugerir alcanzarlo en su hora de comida.
2. Prepara la propuesta
El objetivo es que lleves algo que tu cliente pueda firmar o rubricar. Nuestra sugerencia son impresiones de pantalla de la app o el proyecto. Si puedes imprimir a color y en papel grueso, todo se ve y se siente más profesional.
Otras opciones son generar una carta de aceptación (un acuerdo con los puntos que se desarrollarán), o si han mencionado o manejado contratos anteriormente, llevar uno impreso.
3. El cierre ascendente
Una vez que estés con tu cliente, tu trabajo es hacer que responda al menos cinco 'sí' a preguntas que le hagas. Éstas pueden ser obvias, pero el objetivo es mantenerlo en una actitud abierta y receptiva. Ej:
¿Te gustaría realizar el proyecto?
¿Te gustaría que más personas conocieran tu marca?
¿Crees que tus clientes se puedan beneficiar de esto?
¿Te gustaría ganar más likes/followers/clientes?
¿Te gustaría incursionar en el mundo de campañas digitales?
4. El cierre de la muerte súbita
Se breve y acota el proyecto. Si el alcance es muy largo, vete por partes y propón iniciar con unas características esenciales (quizá las primeras dos pantallas). Llega a un acuerdo sobre el punto de entrada, e invítalo a empezar.
La forma más efectiva de hacerlo es obteniendo su firma. Puedes pensar que esto resultará incómodo, pero no lo es, es una práctica común y lo más probable es que sólo te falte un poco de seguridad en ti mismo.
¡Así que prepárate para lo más importante! Saca tu propuesta y ponla sobre la mesa. Puede ser en la pantalla o en el punto que están tratando y con un bolígrafo pon tus iniciales en una esquina (el término para esto es rubricar). Esto significa que estás de acuerdo, y ahora esperas que él esté en acuerdo.
IMPORTANTE: Después de que tú firmas, no hables ni menciones nada. Te tienes que mantener callado. Tú ya hiciste tu parte y es su turno. Puede tardarse 5 minutos dándole vueltas a las hojas, leyendo los puntos, etc, etc, pero tú te debes mantener callado y de ser posible sonriendo y relajado.
Ahora, sólo hay dos resultados posibles:
a) Tu cliente firma
¡Bien! Tu trabajo ahora es seguir avanzando y obtener más firmas en más pantallas o en más puntos a desarrollar. Al llegar al acuerdo final, fija una cita inmediatamente para la próxima semana para revisar el progreso. En caso de que no hayan acordado una forma o fecha de pago, proponlo como tema a tratar en la siguiente junta.
b) Tu cliente pone excusas
¡Suerte para la próxima! Puedes dejarlo hablar y que te diga todo lo que quiera. Lo importante es que le hagas ver claramente que:
No está listo para empezar
No tiene claro lo que quiere
No seguirás invirtiendo tiempo en el proyecto
Es momento de guardar tu propuesta y prepararte para la retirada. Será tu decisión dejarle abierto que te llame en caso de que quiera continuar en un futuro.
¿Qué te parece? ¿Estás listo para cerrar ese proyecto que te ha dado dolores de cabeza? Quizá te hayan funcionado también otras técnicas, así que te invitamos a que nos las compartas y las comentemos.
Díganme si esto les resulta familiar: estas navegando tranquilamente en tu casa, a lo mejor viendo las fotos vergonzosas de la última noche de borrachera de tus amigos, o tal vez buscando donde descargar o ver el más reciente episodio de la última temporada de aquella serie a la que ya eres adicto, cuando de repente escuchas un sonido familiar "plop". De inmediato y casi por reflejo cambias a la ventana donde tienes el chat de Facebook, has recibido un nuevo mensaje. Se trata de ese excompañero de la secundaria/de tu trabajo anterior/de tu grupo de los scouts, al que no has visto desde hace X años, con el que no has vuelto hablar nunca, pero que tienes en tu lista de amigos por una extraña convención social de hoy en día: te mandó request hace años y lo aceptaste para no verte "mala onda". Lo saludas de vuelta y después de un breve intercambio de frases cordiales, te pidé un favor (¡lo sabías!): "mi perro/sobrino/novia está participando en un concurso, ¿le puedes dar Like a su foto?".....¡EL HORROR!
Facebook y sus cambios
Facebook actualizó la semana pasada sus términos de uso para promociones y concursos en su plataforma y para sorpresa de muchos de nosotros, el "Like" ya puede usarse como mecanismo de votación. ¿Qué significa esto? Significa que muchas marcar van a seguir organizando concursos con la dinámica "dale Like a la foto de mi perrita chihuahua disfrazada de princesa" y que ahora no hay forma de reportar esta pésima práctica. ¿Qué más cambiaron? Bueno por fortuna el etiquetar personas en una foto en la que no aparecen, como dinámica de un concurso, ahora está prohibido por los términos de uso. Si quieren conocer a detalle los cambios a los términos de uso, pueden revisarlo en el blog oficial de Facebook.
¿Por qué no hacer concursos con el "Like"?
En In2Teck siempre hemos recomendado a clientes y amigos NO hacer esto por las siguientes razones:
1. Los "Like" que recibe el contenido en tu fan page no son del todo reales, no vienen de un interés genuino por tu marca.
2. No tienes estadísticas certeras acerca de quienes participaron en tu concurso ni tampoco una forma fácil de contactarlos (no puedes hacer minería de datos).
3. No tienes mucho control sobre la dinámica y el comportamiento de tu concurso, a lo más puedes borrar fotos o publicaciones y ya.
4. No le das nada de valor a tus fans, osea, está de hueva.
Quiero organizar un concurso para mi marca ¿Qué es lo recomendable?
Crear apps para tus concursos y promociones, al hacerlo obtienes los siguientes beneficios:
1. Tienes control absoluto sobre el concurso. Tu creas las reglas, tu creas la mecánica y puedes recompensar a los verdaderos fans de tu marca, dejando fuera a los malditos cazapremios.
2. Puedes echar a volar tu imaginación y ser tan creativo como quieras.
3. Contarás con métricas específicas de los usuarios que están participando.
Hay muchos ejemplos y casos de éxito que puedes revisar para darte idea de lo que puedes hacer para tu marca. Nosotros te compartimos uno de los nuestros: #GDLESTRADICIONAL, un concurso de fotografía organizado por Jose Cuervo Tradicional y que incluso ganó un premio IAB Conecta este año.
// <![CDATA[ function styleCode() { if (typeof disableStyleCode != 'undefined') { return; } var a = false; $('code').each(function() { if (!$(this).hasClass('prettyprint')) { $(this).addClass('prettyprint'); a = true; } }); if (a) { prettyPrint(); } } $(function() {styleCode();}); // ]]>
Quizá estás por finalizar esa aplicación web que interactúa con Facebook... ¿y te diste cuenta que necesitas HTTPS para entregar la versión final? Encima de todo ¿tienes que entregarla en unas horas?
¡Pare de sufrir! Ya no es necesario gastar millones ni esperar días para que te autorice o te valide una autoridad certificadora. A continuación te decimos como.
Importante: Si no eres geek o una persona con conocimientos tan técnicos, ¡no te abrumes siguiendo los pasos! Mejor contáctanos y déjanos ayudarte.
La siguiente solución está basada en un caso real. Era domingo y teníamos que liberar el lunes. Todo el hosting estaba controlado por el cliente y no teníamos acceso a soporte. Para efecto práctico, utilizamos el servicio y una promoción de Godaddy de $5.99 USD y nos tardamos menos de 30 minutos en la configuración.
Es crucial aclarar que no es necesario que tu hosting esté con Godaddy. Puede estar en cualquier otro servicio, sólo necesitas tener acceso a él via SSH para poder hacer unas operaciones más adelante.
Los pasos son los siguientes:
1. Adquiere el certificado
2. Inicia la configuración
Ve a tus productos, expande 'certificados ssl' y da click en 'iniciar'.
En el panel, selecciona que será alojado en un servidor third party.
Te aparecerá ahora ingresar la solicitud para la firma del certificado. Esto se tiene que generar desde tu servidor donde está alojada la aplicación. Deja en pausa este paso e ingresa a tu servidor (normalmente vía SSH).
Crea un directorio donde lo vayas a salvar (más adelante se mencionará en la configuración como /usuario/certs), y dentro de él, ejecuta el siguiente comando:
Abre el csr en un editor de terminal como nano o vi, cópialo, y continúa el proceso de solicitud web:
vi dominio.csr
Ahora, para comprobar que eres dueño del dominio puedes seleccionar entre dos opciones. La que utilizamos en este caso, y es ideal si no tienes acceso a la configuración DNS, es la de una web control page.
4. Verifica tu dominio
Ingresa a tu panel de certificados, y en los filtros selecciona 'pending requests'. Ahí, en el área de progreso, selecciona 'what's the hold up?' y descárgate el HTML que te indican.
Vía ftp o scp, sube el archivo que acabas de descargar a la carpeta pública donde se encuentran los otros HTMLs de tu servidor.
Confirma que el archivo esté mostrándose. Normalmente es una dirección tipo http://hosting.com/archivo.html. Si no está mostrándose, reinicia tu apache o servicio web. Si está listo, ve a tu panel de certificados, y en el área de 'what's the hold up?' da click en 'verify your domain'.
5. Instala el certificado
Estás listo para bajar el certificado de tu panel. Generalmente viene en un ZIP, así que extráelo y sube a tu servidor el archivo de nombre similar a 'dominio.com.crt'.
Ahora sólo nos falta habilitar HTTPS. Este paso depende completamente de que servidor web tengas. El más común es Apache, y basta con agregar unas líneas de configuración. En nuestro caso, agregamos lo siguiente a '/etc/apache2/apache2.conf'. Asegúrate de reiniciar tu servidor una vez que hayas realizado este cambio.
Si al reiniciar tu servidor, este falla con un mensaje como: Invalid command 'SSLEngine', necesitas instalar el módulo SSL. Esto lo haces instalándolo desde la consola con:
sudo a2enmod
(...)
Which module(s) do you want to enable (wildcards ok)?
ssl
Ahora sí, ¡hemos terminado!
En realidad nosotros quedamos sorprendidos de que con solo 6 dólares y 20 minutos de nuestro tiempo pudimos habilitar navegación segura en nuestra aplicación web. ¿Qué te pareció? Por favor haznos saber si crees tener una mejor alternativa, en In2Teck siempre estamos abiertos a evaluar otras opciones :)
Hoy en día es una gran época para ser desarrollador: tutoriales y cursos gratuitos por todos lados, miles de APIs a nuestra disposición, servicios poderosos y populares que nos dan su bendición para usar su tecnología para nuestros propios productos. ¿Tienes un bug inexplicable? Busca en Stack Overflow. ¿Quieres acceso a una de las bases de datos más grandes de usuarios? Conéctalo con Facebook. ¿Servicios de telefonía y mensajería? Prueba Twilio. ¿Viralidad instantánea? Twitter, Tumblr, etc. Sí, realmente es una gran época para ser desarrollador.
El Horror
La semana pasada fue una de esas semanas de terror, en la que servicios y plataformas como Facebook Developers, Asana, Github y finalmente Gmail estuvieron caídos por horas, causando estragos entre todos los que dependemos de ellos y los usamos. En el caso particular de Facebook Developers, así vivimos nosotros la tarde del Martes 13 (¿coincidencia?) de Agosto de 2013:
5:55 pm
Mientras verificaba las pruebas finales de nuestra nueva Facebook App, recibí una notificación dentro del mismo Facebook con el siguiente mensaje: "Su cuenta de desarrollo ha sido bloqueada". Mi primera reacción: "Ok, vamos a ver de qué se trata"
5:57 pm
Le doy clic a la notificación y el único detalle que hay es "Usted no puede crear nuevas aplicaciones". ¿Crear nuevas apps de Facebook? Bueno, no debe de ser tan grave porque ya tengo mis apps creadas desde hace tiempo. Pero por si acaso, decidí entrar a Developers Facebook a revisar que todo estuviera en orden.
6:00 pm
"OMFG ¿DÓNDE ESTÁN MIS APPS? ¿DÓNDE?" La sección de Apps se encontraba totalmente vacía, sin ningún aviso, ni mensaje de error, ni nada de nada. "Ok, tranquilo Diego, tu equipo también tiene acceso a las apps y ellos seguramente no están bloqueados"
6:05 pm
"¿También recibiste la notificación de que estas bloqueado?", "Me llegó un aviso pero ni vi que era", "Umm no, no me aparecen las apps"
6:12 pm
No solo el equipo completo estábamos bloqueados, sino que de las cinco aplicaciones en producción (una de ellas a un día de su lanzamiento), solamente una estaba funcionando. Las demás habían dejado de funcionar y regresaban errores diciendo "la app no existe". Cuando tienes en producción una app móvil con más de 80 mil descargas, el producto estrella de tu cliente estrella, no quieres estar en una situación como esta. Ahora sí, el pánico se empezaba a apoderar de mí.
6:20 pm
Dentro de Developers Facebook, en la sección de Platform Status no aparecía ningún error. ¿Entonces solo nosotros fuimos bloqueados? ¿Qué hicimos para merecer este castigo?
6:33 pm
Una nueva notificación: "Usted ya no está bloqueado". ¿Fin de la pesadilla? No, las apps seguían deshabilitadas y no teníamos acceso a ellas.
7:00 pm
Un bug reportado en Facebook Developers nos hizo saber que no estábamos solos, que no era culpa de nosotros los desarrolladores. Alguien dentro de Facebook metió la pata y en grande: millones de apps deshabilitadas, cientos de miles de cuentas bloqueadas. Dentro del bug, Facebook anunciaba que ya se había solucionado, pero los usuarios seguían posteando que no era así, que la falla persistía.
7:07 pm
Facebook actualiza el estatus de sus servicios: "La falla sigue pero estamos trabajando en resolverlo". La tranquilidad volvía poco a poco, se trataba de un error en Facebook, no habíamos hecho nada malo o indebido, en unos minutos todo estaría bien. Era momento de juntar la evidencia y avisarle a los clientes lo que estaba ocurriendo.
10:50 pm
Casi cuatro horas y media después, finalmente se solucionó el problema y el mundo de las apps de Facebook volvía a ser perfecto. A nosotros nos afectó únicamente en disponibilidad de nuestras apps, pero seguramente en algún lado alguien había perdido dinero, MUCHO dinero (Farmville, The Sims o alguna de esas apps millonarias).
La Moraleja
Hubo una falla en Facebook que afectó a millones, ¿es razón para descartar su plataforma? ¿organizamos un boicot en su contra y juramos nunca más usar sus productos? La respuesta es NO. Fue un error humano, le pudo pasar a cualquiera y seguramente pasará nuevamente. ¿Qué podemos hacer ante una situación así? Nosotros recomendamos lo siguiente:
1. Conserva la calma. Tus clientes y usuarios han puesto su confianza en ti, tú eres el experto tecnológico. Si eres el primero en entrar en pánico ¿cómo crees que reaccionarán ellos? No lo olvides, mantén siempre la calma.
2. Investiga. Esta es la mejor época para ser un desarrollador, ¿recuerdas? Hay muchísima información que puedes encontrar rápidamente para saber si se trata de una falla general (le está sucediendo a otros también) o si es una falla aislada (eres el único con ese problema). Para el caso particular de los servicios y apps de Facebook, no olvides que en Developers Facebook puedes consultar el estatus de la plataforma y la base de datos de bugs en todo momento.
3. Pide ayuda y/o repórtalo. Sin importar el tipo de falla, siempre encontrarás a alguien dispuesto a ayudarte, es lo maravilloso de las comunidades de desarrollo. Si estas usando un servicio de un tercero (Facebook, Twitter, Google, etc.), seguramente hay un foro de discusión y una opción para reportar la falla.
4. Mantén informado a tus usuarios y clientes. Una rápida llamada telefónica a tus clientes explicándoles la situación los tendrá tranquilos y hacerlo habla bien de tu trabajo. Siempre será mejor que se enteren de la falla por ti que por las quejas de usuarios furiosos. Si tus apps o servicios son públicos, no olvides avisarle a los usuarios por medio de los canales que utilices (correo, blog, redes sociales).
5. Si la falla está de tu lado, arréglala.
Sigan estos sencillos pasos y todo saldrá bien, evitarán una crisis con sus clientes y usuarios (claro que siempre hay trolls) y podrán dormir tranquilos por la noche.
En esta edición de Campus Party 2013, Luis Antonio Gómez (fundador de html5fácil), dio una plática que nos pareció interesantísima sobre los hacks que se han hecho sobre HTML5 para hacerlo más compatible y fácil de adaptar.
Durante aproximadamente 35 minutos, nos mencionó y explicó un montón de librerías que definitivamente hacen tu vida web más fácil. Independientemente de si eres novato o experto, vale la pena que le eches un ojo.
La lista es extensa, son 27 opciones que pueden mejorar de manera contundente la experiencia web que está ofreciendo tu sitio o aplicación web. Algunas ya las conocía por lo que añadiré una opinión personal, pero creo que no hay mejor manera de conocerlas que yendo a su sitio, descargándolas y probándolas. Happy coding!
Librerías:
1. jQuery. Fundamental. Simplifica nuestra interacción con documentos HTML.
2. HTML5 Shiv. Provee soporte de elementos HTML5 con navegadores viejos.
3. CSS3 PIE. Soporta características decorativas de CSS3 en IE 6-9.
4. Modernizr. Recomendadísima. Detecta las capacidades HTML5/CSS3 del navegador, e intenta emular la funcionalidad faltante.
5. Prefix-free. Simplemente maravillosa. Te ayuda a simplificar tu CSS para que sea compatible con la mayor posibilidad de navegadores sin escribir prefijos como -moz o -webkit.
6. Google web fonts. Desconocidas para mí como programador, pero famosísimas en el mundo del diseño web. Una excelente opción fácil de usar para darle variedad a las aburridas tipografías clásicas de la web.
7. Responsive.js. Ayuda a hacer tu sitio responsivo, que es la capacidad de que se 'adapte' a navegadores en varias resoluciones (móviles, tabletas, computadoras de escritorio).
8. Normalize.css. Necesaria. Resetea los estilos por defecto (como márgenes) para que tu sitio se vea igual en varios navegadores.
9. Mediaelement.js. Permite manejar audio y video como HTML5, utilizando FLASH en caso de que el navegador no lo soporte.
10. Cuepoint. Fácil interacción para mostrar subtítulos en momentos clave de videos HTML5.
11. Raphaël.js. Simplifica el trabajo de creación y manipulación de gráficas vectoriales y canvas.
12. Kinetic.js. Muy popular en el desarrollo de juegos nuevos en 2D y 3D usando canvas.
13. Turn.js. Proporciona el efecto de 'hojear libros'.
14. WYSIHTML5. Aproximación novedosa de editor de texto enriquecido.
15. Storage.js. Permite almacenar información en el cliente, retrocompatible con IE6 y Firefox 2.
16. Skrollr. Librería para implementar el famoso efecto parallax.
17. Parallel.js. Ofrece procesamiento en paralelo en el navegador del cliente a través de web-workers.
18. Socket.io. Publicación y suscripción de eventos en tiempo real en la web, retrocompatible via websockets.
19. Faye. Similar a socket.io, utilizando el protocolo Bayeux. Más fácil de utilizar en el inicio de un proyecto, pero se vuelve tedioso si este crece mucho.
Plataformas:
20. Phonegap. Permite crear apps móviles utilizando tecnologías web. Altamente recomendado para cubrir funcionalidad que no es demandante de características específicas en hardware como gráficos (juegos).
21. Visual Studio 2013. Desarrollo web para Windows 8. Se rumora que está bien hecho y vale la pena si eres Microsoft fanboy.
22. Firefox OS. Sistema operativo diseñado para soportar aplicaciones en HTML5 que permitan controlar hardware directamente utilizando Javascript.
Para escribir más rápido, precompiladores y metalenguajes:
23. Emmet. Muy de moda y eficiente si quieres codear HTML rápido e impresionar a terceros.
24. SASS. Poderosa extensión de CSS3. Utilizada por default en Ruby on Rails.
25. LESS. Parecido a SASS, extensión extremadamente popular de CSS3.
26. Stylus. Otra extensión para CSS3, deja el código bastante limpio y entendible, súper útil especialmente al anidar estilos. Require instalación de node.js.
27. Coffeescript. Metalenguaje sobre Javascript. Se ve bonito y simplifica grandemente escribir código. La mayoría de los programadores profesionales o de vieja escuela de Javascript lo odian.
¡Wow! Con esto finalizamos la lista, aunque hay muchos más hacks que no se mencionaron. ¿Cuál crees que hizo falta? ¿Recomendarías o prevendrías el uso de alguna en particular?
¿Cuál es la mejor opción para insertar video en mi página web?
// <![CDATA[ function styleCode() { if (typeof disableStyleCode != 'undefined') { return; } var a = false; $('code').each(function() { if (!$(this).hasClass('prettyprint')) { $(this).addClass('prettyprint'); a = true; } }); if (a) { prettyPrint(); } } $(function() {styleCode();}); // ]]>
Actualmente el video en internet es un factor que cada vez cobra mayor importancia. Los grandes jugadores como Google, Microsoft y Apple tienen voz y productos que todos usamos para reproducirlos. Así que, si estamos construyendo o tenemos un sitio web y deseamos incluir un video, es normal tener las siguientes preguntas:
¿En qué formato debe estar?
¿Lo hosteo yo, o lo subo a la nube?
¿Se verá en cualquier navegador?
¿Abrirá en mi móvil?
En nuestra experiencia, recomendamos tres aproximaciones profesionales: usar la etiqueta 'video' de HTML5, Vimeo o Youtube. Cada una de éstas considera distintos beneficios que explicamos a continuación.
1. HTML5
Esta es la opción más limpia, elegante y correcta para insertar video a través de código. El futuro del contenido grabado en internet tenderá a seguir este estándar.
Al implementarla bien nos permite: visualizar el contenido en todos los navegadores web -incluyendo móviles- evitando al 100% plugins de Flash, añadir soporte multilenguaje de manera sencilla y ligera en archivos SRT, y manipular nuestro video con Javascript sin APIs externos.
Para seguir esta aproximación es necesario contar con nuestro video en dos formatos: mp4 y webm. El formato mp4 es apoyado por Microsoft y Apple así que funciona sin problemas en Safari y versiones actuales de Internet Explorer. El formato webm es apoyado por Google y es soportado por Chrome y Firefox.
Recomendada para: Usuarios serios de internet, que buscan control total en su página y que no tienen prejuicios contra HTML5.
No recomendada para: Personas que no tienen el control o conocimiento de como obtener un archivo mp4 o webm. Si su hosting es una solución barata o desconocida que no permita al usuario descargar a buena velocidad el video.
Tips de implementación
Añade las dos fuentes y especifica los codecs de video y audio adecuados. Ej:
En algunos servicios de hosting, Firefox no reproduce el video webm si no incluyes un archivo .htaccess con lo siguiente:
AddType video/webm .webm
2. Vimeo
Su versión gratuita te permite subir un video en HD a la semana y es una excelente empresa que va en crecimiento. Esta fue la opción que escogimos para nuestro sitio web. Personalmente me encanta estéticamente, es simple y te permite configurar una carátula y las opciones a mostrar.
A nivel código, puedes incluirla en tu página a través de un iframe, esto básicamente permite desplegar el video en cualquier navegador automáticamente. Si buscas controlar el video por Javascript, ya existe un API bastante decente.
Recomendada para: Gente que le gusta apostarle a algo un poco diferente. Buena opción si no te gusta complicarte la vida y quieres mostrar un par de videos de buena calidad.
No recomendada para: Personas que quieren subir muchos videos a menos que tengan dinero para pagar por espacio. Tampoco lo recomendamos para personas que quieren hacer canales sociales, o que esperan que su contenido tenga la oportunidad de volverse viral en automático.
3. Youtube
Sin lugar a dudas el gigante de los videos en internet. Tiene API avanzado, espacio ilimitado y millones de millones de usuarios que pueden encontrarse con tu video.
Recomendado para: Personas que buscan actualizar su página con videos nuevos frecuentemente. Uso obligado si el contenido es gracioso, de música, o si es creado por gente que está llevando en paralelo una estrategia de marketing digital para la marca.
No recomendado para: Usuarios que no quieran que antes del video aparezca un comercial. Google haters.
Durante el rediseño de nuestra nueva página web, incluimos el tradicional formulario de contacto. Normalmente este es un problema de programación aburrido, por lo que me tomé un minuto para investigar qué servicio cool existía para enviar esa información.
Utilizar el envío por correo electrónico es lo más inmediato, pero quería evitar también la configuración de SMTP que generalmente es tediosa y más cuando se tiene el sitio en un hosting económico y compartido con apenas soporte para PHP y algunas librerías.
Así que me encontré con Mailgun. Lo primero que me llamó la atención es que fuera impulsado por Rackspace, que hemos utilizado anteriormente como servicio de hosting y lo hemos encontrado de buen valor.
El registro y la integración en con PHP fue inmediata. Sólo al principio no funcionó, pues al seguir el API en su documentación no encontramos ningún lugar donde se dijera explícitamente que teníamos que incluir nuestro domain name (en este caso in2teck.mailgun.org) en su API URL.
Al final basta con reemplazar un par de cosas en el código:
¡Y ya está! Sencillo de usar y en la versión gratis te da hasta 200 mensajes al día. Tiene opciones más avanzadas que no hemos explorado, pero en caso de necesitarlo gustosamente nos echaremos un clavado.
Lo único "molesto" es que Google ya es skynet, y ahora me salen anuncios de Mailgun en todas partes :S
Si mi app ya sirve en el simulador ¿qué me falta probar?
Muchas veces nuestra aplicación ya funciona en un ambiente controlado pero nos enfrentamos a varios escenarios que no teníamos contemplados cuando la pasamos a nuestro móvil o cuando publicamos nuestra aplicación.
Aquí un par de tips que muchas veces son obvios pero generalmente pasamos por alto, y nos pueden ahorrar mucho tiempo y dinero:
¿Qué más puedo verificar antes de probarla en dispositivos móviles?
Normalmente pasamos por alto pruebas con volúmenes reales de información. Insertamos un par de usuarios con unas cuantas entradas en catálogos y pensamos que ya está todo. Resulta muy útil insertar y cargar información que simule la operación de un usuario después de unos meses de uso. Esto puede variar, sin embargo el prinicipio para nuestra prueba debe considerar desde una correcta visualización y filtrado de la información, hasta un tiempo de respuesta adecuado. Si la interacción ya parece lenta en el simulador nos espera una mala experiencia en el dispositivo real.
¿Qué debo probar antes de salir a producción?
El factor más importante que hemos visto ignorado es probar la aplicación sin WiFi, directamente con 3G. Depende mucho del requerimiento y de la aplicación, pero es muy buena práctica poder ofrecer servicios (aunque sean parciales) utilizando plan de datos. Cuando una aplicación no pasa de la primeras pantallas debido a que el volúmen de información que necesita para arrancar ya representa problemas de conexión, es un buen momento de replantear el flujo de interacción. A menos que sea un juego, la mayoría de los usuarios no utiliza su smartphone con WiFi para acceder a servicios que presenten una fuerte demanda en transferencia de información.
No hay una fórmula establecida. Sin embargo, phonegap es una excelente herramienta para crear aplicaciones informativas o de interacción simple. Para desarrollar cálculos complejos, videojuegos con gráficos avanzados o interacción sensible con usuarios, el desarrollo nativo es una mejor idea.
¿Cómo manejar información cambiante dentro de la app?
Depende mucho del peso (cantidad) de la información y la frecuencia de cambio, pero principalmente hay dos aproximaciones: a) cargar dinámicamente la información y b) subir la información como parte de la aplicación en una nueva versión.
a) Si aplica, la mejor aproximación es cerciorarnos que sólo los datos nuevos seleccionados por el usuario se puedan actualizar dentro de la app y conservar ahí (por módulos). Hay que evitar descargar todos los datos, todas las veces que se utilice la aplicación, para todos los usuarios. Si el caso de uso corresponde a este último ejemplo, es mejor utilizar la segunda opción.
b) Esto corresponde a actualizar y añadir a la aplicación toda la información para que esté precargada. Una vez integrados todos los cambios, se puede liberar una siguiente versión. Esta aproximación no es recomendable cuando los cambios de información se planeen frecuentemente (más de una vez por mes). Tampoco es recomendable si el contenido es demasiado pesado y no es visible para cualquier usuario. Esto podría derivar en un usuario utilizando 5 mb de contenido útil pero con más de 20 mb descargados.
¿Qué hacer para soportar las mayores resoluciones posibles?
Crear un diseño adaptativo (elástico) con porcentajes y unidades ‘em’ en las hojas de estilo es el primer paso fundamental. Una vez establecida esta base, los media queries nos pueden ayudar a pulir la apariencia de alguna resolución específica como resoluciones para tablets. Es muy importante no abusar de los media queries, creando uno para cada resolución soportada o nueva, ya que el mantenimiento se puede convertir muy costoso.
Felicidades a Jovanna Noriega, ganadora de una Kawasaki Ninja a través de la aplicación de Chutapoints, desarrollada por In2Teck patrocinada por MedioTiempo y BetCima.
By being overly driven by data you can run into key issues and lose sight of the fact that emphasizing too much on quantitative metrics are just a small piece of the decision process.
