Saltar al contenido

Categoría: Desarrollo web

Aprende HTML con este vídeo de Metal

Si le preguntas a un desarrollador web cómo puedes iniciarte el mundo del desarrollo web. La respuesta mas común es aprende HTML. Navegando en Reddit encontré este genial vídeo, que explica las bases de las etiquetas HTML a través de una canción de Metal.

Así que si eres fanático del género musical del metal, aumenta el volumen de tus cornetas y disfruta de este grandioso video sobre metal ya aprende HTML al mimo tiempo.

¡Aprende HTML con este vídeo y conviértete en un desarrollador web metalero!

Deja un comentario

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.

Deja un comentario

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.

Deja un comentario

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/librerí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.

Deja un comentario