What comes next is the future: Documental sobre la web

What Comes Next Is the Future es un documental sobre la web creado por Matt Griffin. El cual relata la historia de la web: las fases por las cuales ha pasado, como está actualmente y hacia donde se dirige, contada por la gente que la construyó.

El contenido del documental

Si eres desarrollador web o deseas convertirte en uno, no debes dejar de ver este documental. Lo que mas me gustó es la participación de personas muy importantes en el mundo de la web como: Tim Berners Lee, Ethan Marcotte, Eric Meyer, John Resig, Jessica Ivins, entre otros. Pues estas escuchando la historia por quienes realmente lo hicieron y se expresan con un cierto sentimiento que le da mejor calidad a la historia.

What Comes Next Is the Future

What Comes Next Is the Future es un buen documental para todo desarrollador web

El documental tiene una duración de 1 hora, abarca desde la creación de la web, cuando todos creábamos sitios con tablas, el nacimiento de CSS, la hegemonía de flash, la aparición de los dispositivos móviles y como afectó a los sitios web. Me gustó porque muestran la historia de la web desde un punto de vista de los desarrolladores, a diferencia de otros documentales donde lo hacen desde el punto de vista del usuario. En mi caso, que llevo haciendo páginas desde 1999, el documental me recordó como se hacían muchas cosas en el pasado y como algunas tecnologías nacieron para solventar problemas del pasado.

Cómo ver What comes next is the future

Lo mejor es que el documental está disponible de forma gratuita en la web, lamentablemente por ahora no tiene sub-títulos en español (sería bueno que alguien se animara a realizarlos). Así que reserva una hora para que veas What Comes next is the future a continuación.

Recuerda que si te gustó, comparte esta información con tus amigos para que conozcan mas sobre la plataforma web.

Todo el software está roto

Alejandro Crosa nos trae una charla llamada Todo el software está roto, donde nos comparte sus experiencias en el proceso de desarrollo de software en grandes empresas con miles de clientes, donde ocurren todo tipo de cosas (creo que todos los hemos vivido en nuestro trabajo pero a menos escala). Por ejemplo, en organizaciones como LinkedIn con mas de 200 millones de usuarios, cosas de que solo pueden pasar una vez en un millón, pues le ocurren a 200 usuarios y pues es una cifra significante, o cuando centésimas de segundo de carga por millones de visitas realmente importa.

En fin, te recomiendo ver esta charla que está en español para que disfrutes esas experiencias de Alejandro y notemos como esas empresas comenten errores, como cualquier otra organización.

¿Tienes una experiencia similar? Coméntanos.

Hace 7 años en esa fecha: Plugins recomendados para Firefox

Hace 10 años en esa fecha: Video Explicativo de Web 2.0

Imágenes responsive en WordPress

¿Que son las imágenes responsive?

Las imágenes reponsive son aquellas imágenes que automáticamente carga la mejor versión para la resolución de tu equipo, esto permite con una misma etiqueta HTML cargar una imagen de alta resolución para una computadora con pantalla HiDPI (Retina Display) y una imagen de baja resolución para un dispositivo móvil con una pantalla de baja calidad. (Si quieres leer mas documentación te recomiendo leer la entrada de <img> en MDN).

El código HTML necesario es como cualquier <img> para dar compatibilidad a las páginas existentes, pero adicionalmente se agrega un atributo srcset para poder especificar la imagen correspondiente a cada resolución y también se agrega el atributo sizes para definir las reglas de cuando usar cada imagen.

Cómo generar el código en WordPress

A partir de WordPress 4.4 ahora podemos contar imágenes responsive de forma automática, usando las funciones de este CMS obtendrás el código HTML para crear imágenes adaptables, pero probablemente si tienes algún código donde generabas las etiquetas de estas imágenes manualmente, necesitaras llamar a varias funcionales para hacerlo.

A continuación te explicare cómo es el proceso, el primer paso es obtener los valores de los atributos src y srcset, en este caso pasamos full como tamaño para obtener la imagen en su mayor resolución:

$img_src = wp_get_attachment_image_url( $attach_id, 'full' );
$img_srcset =  wp_get_attachment_image_srcset( $attach_id, 'full' );

Generamos la etiqueta sizes para los tipos de imágenes que queremos mostrar:

$wp_sizes   = array('full', 'large', 'medium', 'thumbnail');
$img_sizes  = '';

foreach ( $wp_sizes as $wp_size ) {
   $img_sizes .=  wp_calculate_image_sizes( $wp_size,  $img_src, null,  $attach_id );
}

Luego podemos generar el HTML de la etiqueta img:

$img = sprintf('<img src="%s" srcset="%s" sizes="%s" alt="%s" >',
   esc_url( $img_src ), esc_attr( $img_srcset ), esc_attr($img_sizes), $img_alt
);

Listo, ya tendrás una etiqueta de imagen responsiva donde dependiendo de la resolución del dispositivo, se cambiará la imagen por una de mayor o menor de resolución (dependiendo del dispositivo). Cabe destacar que esta funcionalidad funciona con todo navegador moderno exceptuando…por supuesto…Internet Explorer.

Cómo instalar paquetes de bower y npm en Yii2

Actualmente cuando trabajas en el frontend (la parte visual) de una página web utilizas código Javascript para realizar ciertas acciones tales como: animaciones, validaciones, interacciones, etc. Y con el auge de popularidad de este lenguaje, existen muchas librerías y complementos que facilitan el desarrollo. Por eso, hoy en día es normal que si realizas una aplicación en Yii2, utilizarás componentes visuales para manejar calendarios, validaciones de correo, manejo de modales, etc.

A pesar de existir una cantidad notable de extensiones de Yii2 para instalar complementos adicionales, no se puede comparar a la calidad y cantidad de librerías y frameworks disponible en npm y bower. Además, si eres un programador de Javascript, estarás acostumbrado(a) estas herramientas y te sentirás limitado en Yii2. Sin embargo, existe una forma de instalar software de npm/bower en tu aplicación utilizando composer, de esta manera puedes gestionar tus dependencias de Javascript y PHP en una sola herramienta.

Instalación del plugin de composer

Asumiendo que ya tienes instalado composer, solo debes instalar el complemento composer-asset-plugin mediante el siguiente comando:


php composer.phar global require "fxp/composer-asset-plugin:~1.1.1"

Agregando dependencias en tu aplicación de Yii2

Una vez instalado el complemento, para instalar los paquetes debes agregar al nombre del paquete original el prefijo npm-asset/ o bower-asset/ dependiendo del caso. De esta forma, si quieres instalar combodate debes colocar como nombre bower-asset/combodate. Luego con hacer php composer.phar update instalarás las dependencias requeridas en la carpeta /vendors.

Ejemplo para instalar un paquete de npm:


{
  "require": {
    "npm-asset/el-paquete-npm": "dev-master"
  }
}

Para instalar un paquete de Bower:


{
  "require": {
    "bower-asset/el-paquete-de-bower": "dev-master"
  }
}

¡Y listo! una vez que tienes las dependencias, puedes incluirlas en tu plantilla de vista o crear un Assets, la opción recomendada de Yii2 para el manejo de archivos/liberías externas, pues te permite definir dependencias y en que momento cargarlas, para optimizar la carga de tu sitio web.

Espero que te sirva esta guía y puedas disfrutar de todo el poder de Javascript para aplicarla en las vistas de tu aplicación realizada en Yii2, un gran framework de PHP.

Hace 5 años en esa fecha: Mi reacción ante el problema de Playstation Network

Hace 8 años en esa fecha: Propaganda del Flisol 2008

Pruebas de visualización de una página desde distintos dispositivos

Uno de los mayores problemas para los desarrolladores web es la diferente interpretación de los estándares web por parte de los navegadores, ocasionando que un sitio web se vea de forma distinta en diferentes navegadores. Ademas, con el surgimiento de dispositivos móviles en los últimos años,  ahora también se deben hacer pruebas de las páginas bajo distintas resoluciones para abarcar mas usuarios.

Aunque puede consumir mucho tiempo navegar desde distintos dispositivos y sistemas operativos para hacer las pruebas, existen herramientas para automatizar este proceso. Una que me gustó fue Remote Preview, una aplicación web que al definir una URL en un panel central, envía el navegador web de todos los dispositivos a esa dirección, permitiéndote ver como es la página en cada dispositivo, ademas, cada 1100ms chequea la URL, por lo que si la cambias, automáticamente todos los dispositivos visitan el sitio. Esto permite ahorrar el tiempo de navegación desde cada dispositivo y permite identificar rápidamente, problemas de compatibilidad entre resoluciones o plataformas.

Para entender mejor esta herramienta, les dejo un video donde pruebo como se ve mi blog en distintos navegadores y plataformas móviles:

Así que si desarrollas un sitio web, no dejes de usar esta herramienta para comprobar que el sitio se ve bien desde tu teléfono, tableta, computadora, desde los navegadores de escritorio, sistema operativo y otros. Mientras mas compatibilidad brindes a dispositivos, mas usuarios podrán leer tu contenido y recibir mas visitas.

 

Hace 10 años en esa fecha: Ophcrack 2: Un LiveCD que crackea passwords de Windows

Hace 11 años en esa fecha: Las metas de Microsoft