Subflash 2014

Publicado por Iván Gajate el 25 de agosto de 2014 en Desarrollo Web, Eventos | 5 comentarios »

Eah! ya hemos vuelto un año mas del Subflash 🙂
y qué bien lo hemos pasado oye…
ya vamos siendo una pequeña familia que se reúne año tras año para contarse sus penas, y este año Paquito (@fcomoreno) ha sido un anfitrión impresionante. Además de currarselo mucho con el alojamiento nos ha hecho una visita turística por Albacete, nos ha conseguido una visita guiada por el Museo de la Cuchillería de Albacete, que me ha molado un montón, hemos disfrutado de los riquísimos Miguelitos, barril del cerveza… vamos, mejor que en casa.

El viernes fuimos llegando poco a poco, y a media tarde ya habíamos ocupado la terraza del bar poniéndonos al día de nuestras cosas.

Luego por la noche vino la presentación formal, sin duda de los momentos mas divertidos del fin de semana. Aunque nos conocemos todos siempre gusta ver cómo va cambiando cada uno (cada año quedamos menos picando en la mina…)

Cenita y a nuestras cositas 😉

Virtualización con Mario Ezquerro:

Por la mañana llegó la primera charla a manos de Mario Ezqerro (@Mario_Ezquerro) quien cada año se mete en mas tinglados, y este año nos ha dado una charla sobre virtualización y los sistemas Cloud.

A mi me parece increíble cómo un buen administrador de sistemas puede tenerlo todo tan controlado. Chapeu!

En lo personal me quedo con la intención de probar el Google App Engine para hacer mis pruebecillas con NodeJS 🙂

 

Lo importante son las personas por Diego Rodríguez:

Luego vino Diego (@Arketipo) para echar por tierra su ponencia del año pasado y hacernos ver que se nos está yendo de las manos esto de medirlo todo y basarlo todo en tanta número y tanto Analytics, que al final lo importante es tocarnos la fibra sensible, que los trabajos nos lleguen a lo visceral y que nos hagan sentir algo, bueno o malo pero algo.

Diego siempre me sorprende. Al principio parece un elefante en una cacharrería 🙂 y poco a poco vas encontrando al buenazo que lleva dentro y las cosas tan interesantes que esconde tras sus ejemplos. Hay que rascar pero merece la pena 😀

Apps: del dicho al hecho hay un gran trecho:

Después de comer vinieron Valeria Matijas y Sebastián Gimenez para contarnos su experiencia a la hora de hacer su primera app Patchimals. Una app preciosa para que los niños aprendan las formas y los colores. Sin duda tienen la mejor beta tester en su hija 🙂

Hay que plantearse muchas cosas a la hora de plantearse una app. Si va a ser de pago o gratuita, si quieres cobrar cómo lo vas a hacer (cada mercado te deja hacerlo de una manera distinta), en qué mercados quieres estar, cómo quieres que te encuentren los usuarios, mantener los comentarios controlados, actualizaciones… no es un trabajo tan fácil como parece desde fuera. Y muchas de estas decisiones no se pueden cambiar después, el camino que elijas es el que tendrás que seguir.

 

Por la tarde nos fuimos a ver el Museo de la Cuchillería de Albacete, a mi me encantó 🙂

Después llegó la noche y la oscuridad lo llenó todo de misterio… 🙂

 

Captación vs Fidelización:

El domingo por la mañana Carlos Macías (@carlosmacias)  y Ricardo Velasco (@Ricardo_Bespoke) nos hablaron sobre lo importante de captar clientes, y luego fidelizarlos claro. Tuvimos muchos ejemplos de ello y se formó un debate interesantes entre todos. Que si cupones, que si descuentos, buen trato… al final en este Subflash ha quedado muy claro que lo imporante por encima de todo es el usuario y hay que tratarle bien. Y punto.

Luego nos hablaron de su proyecto El Buzón de Sugerencias, una herramienta precisamente para poner en contacto a clientes y empresas, o a trabajadores dentro de una empresa, y así tener la oportunidad de mejorar las cosas. Con regalito de un cupón para probar el servicio. Gracias!

 

Foto de rigor, y tras la comida, mermada por la gente que tenía un lago viaje de vuelta, nos despedimos de los que quedábamos por ahí y a esperar con cariño la próxima edición de Subflash.

Año tras año sigo sin explicarme muy bien cómo es posible este tipo de evento, sin duda es gracias a Marcos (@qinteractiva) y a los que le ayudan a montarlo todo.

A los patrocinadores, como CDmon y video2brain que año tras año están ahí apoyándonos para que esto siga adelante.

A los propios ponentes que nos dan códigos de descuento para sus productos.

La licencia de Adobe CC por parte de Txocografi.co

Las camisetas estupendas y ya habituales por parte de NitsNets, yo me acuerdo todo el año del Subflash cada vez que me las pongo 🙂

Los de Netereo han hecho unas mini camisetas para niños, preciosas.

El Hotel Universidad ha estado genial y se han portado muy bien con nosotros.

Y el sábado nos fuimos al bar Ruta 66 que nos regaló un barril de cerveza para nosotros solos! 😀

 

Ay… ya falta un día menos para el próximo Subflash… 😉

 

 

 

 

 

JS – Animar elementos con WOW

Publicado por Iván Gajate el 4 de julio de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

WOW es una librería JavaScript que sirve para hacer que ciertas partes de nuestro site vayan apareciendo según hacemos scroll. Es un efecto muy simple pero da un aspecto mucho mas dinámico a nuestro site con muy poco esfuerzo. Basta con poner una clase al elemento que queramos desvelar 🙂

https://github.com/matthieua/WOW

Un ejemplo con las animaciones que puede hacer http://mynameismatthieu.com/WOW/

CSS – Centrar Botones sin Anchura Fija

Publicado por Iván Gajate el 16 de junio de 2014 en css, Desarrollo Web | 1 comentario »

Una cosa muy común es querer centrar los botones de un menú en horizontal sin conocer sus dimensiones.
inline-block al rescate!! 😀
Inline block hace que los elementos se comporten como bloques de texto en línea, y por lo tanto se colocan en horizontal uno a la derecha del otro, y al centrar el contenedor, se centran los botones 🙂

http://jsfiddle.net/yporqueno/dYLxN/

<ul class="botonera">
    <li>Sección 1</li>
    <li>Sección 2</li>
    <li>Sección 3</li>
    <li>Sección 4</li>
</ul>
.botonera {
    text-align: center;
}
 
.botonera>li {
    display: inline-block;
}

Gracias Javi!! 😀

HTML – Botones de Twitter

Publicado por Iván Gajate el 14 de mayo de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Para insertar un botón de compartir en Twitter aquí están todos los ejemplos posibles

https://dev.twitter.com/docs/tweet-button

No hace falta que tenga el aspecto de botón de Twitter, basta con que pongamos un enalce a

Ejemplo de Twitter

<a href="https://twitter.com/intent/tweet?text=Nuestro texto con almohadillas y todo %23yporqueno" target="_blank">Tuitea tu código</a>

Hay que convertir las almohadillas (#) a %23

Audio Online Converter

Publicado por Iván Gajate el 29 de abril de 2014 en Desarrollo Web | Los comentarios están cerrados.

Esta herramienta online está muy bien para convertir entre formatos. Yo la uso por ejemplo para la versión ogg de los audio para html.

http://audio.online-convert.com/

JS – Internet Explorer Shim

Publicado por Iván Gajate el 26 de abril de 2014 en JavaScript | Los comentarios están cerrados.

Si nuestro código falla inexplicablemente en Internet Explorer 8 seguramente sea porque estamos llamando a alguna función que no existía por aquel entonces, como trim, indexOf, forEach
Para solucionarlo podemos incluir este js en nuestra página y todo volverá a funcionar como debería 🙂

https://github.com/es-shims/es5-shim/blob/master/es5-shim.js

CSS – Sidebar de la Misma Altura que el Contenido

Publicado por Iván Gajate el 23 de abril de 2014 en css | Los comentarios están cerrados.

Algo que parece muy sencillo es tener dos columnas con diferente altura y que ambas tengan la altura de la mas alta.

 

El ejemplo típico es un site con contenido dinámico y una barra lateral con un menú que queremos que tenga la misma altura que el contenido.

Como no podemos usar alturas fijas, podemos utilizar table-cell

 

.wrapper {
    display: table;
}
 
.left {
    display: table-cell;
    width: 50%;
    background-color: red;
}
 
.right {
    display: table-cell;
    width: 50%;
    background-color: green;
}

Ver el resultado

Gracias Antonio!! 🙂

JS – Convertir una fecha en un objeto Date

Publicado por Iván Gajate el 22 de abril de 2014 en JavaScript | Los comentarios están cerrados.

No todos los navegadores manejan igual las cadenas de fecha. Para evitar fallos, esto funciona en todos:)

 

var arr = "2010-03-15 10:30:00".split(/[- :]/);
var date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
 
console.log(date);  // Mon Mar 15 2010 10:30:00 GMT+0000 (GMT Standard Time)

Visto en Javascript date parsing on Iphone

JS – Detectar Capacidades de un Dispositivo

Publicado por Iván Gajate el 9 de abril de 2014 en JavaScript | Los comentarios están cerrados.

Estas son las detecciones que uso yo para saber si un dispositivo es un móvil, si es táctil y si tiene detección del giro. No son perfectas, pero en la mayoría de los casos me funcionan bien.

 

// Detecto si es un iPad o dispositivo con deteccion de movimiento
var isTouchable = ('ontouchstart' in window) || ('onmsgesturechange' in window);
var isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile/i.test(navigator.userAgent.toLowerCase());
var isOrientationDevice = (window.DeviceOrientationEvent != null) &amp;&amp; (typeof(window.DeviceOrientationEvent) === 'object');

Weinre – Depurar en remoto

Publicado por Iván Gajate el 27 de febrero de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Una de las cosas mas complicadas del desarrollo para dispositivos móviles es depurar nuestras aplicaciones. En escritorio es fácil porque tenemos muchas herramientas para ver el código y ver qué está pasando por detrás, pero en móvil solía ser muy complicado.

Una forma fantástica de hacerlo es con Weinre. Funciona sobre NodeJS y nos permite ver en nuestro ordenador, con un inspector igualito que el de Chrome lo que estamos visualizando en nuestro móvil.
Para usarlo tenemos que hacer 3 cosas:

  1. Instalar Weinre y ponerlo a funcionar.
  2. Incluir un archivo js en nuestra página.
  3. Abrir el panel de Weinre para inspeccionar nuestro dispositivo móvil.

 

Para instalarlo, una vez instalado NodeJS, solo tenemos que escribir esto en el terminal:

sudo npm -g install weinre

y se instalará sin más:

A continuación, para arrancarlo simplemente escribimos esto en el terminal, indicándole nuestra ip y el puerto por el que queremos acceder:

weinre --httpPort 8080 --boundHost 192.168.1.39

 

Esto hará que podamos acceder a él a través de http://192.168.1.39:8080, aunque si queremos podemos especificar la ip y otro puerto:

 

A continuación tenemos que incluir este archivo js en nuestro HTML (hay que acordarse luego de quitarlo, cuando terminemos nuestro proyecto)

<script type="text/javascript" src="http://192.168.1.39:8080/target/target-script-min.js"></script>

Ahora tendremos que abrir esta página desde nuestro móvil a través de nuestro localhost, con Mamp o el que utilicemos.

http://192.168.1.39/miproyecto/mipagina.html

 

Ya tenemos todo listo. Ahora para acceder al inspector entramos por ese puerto en un navegador

http://192.168.1.39:8080/

y veremos la página de acceso:

 

Si todo ha ido bien, veremos al menos un enlace en verde. Para depurar nuestro dispositivo hacemos click en el primer enlace. Ojo que hay que tener el móvil con el navegador activo y la página que queremos depurar visible.

La pestaña Elements me parece la mas interesante, pues nos permite ver y modificar el html y las css de nuestra página viendo el resultado directamente en nuestro móvil 🙂
Y la Consola, por supuesto, donde podemos hacer de todo!