Source: https://skatox.com/blog/category/todo-lo-relacionado-al-desarrollo-de-software/desarrollo-web/
Timestamp: 2016-09-27 15:29:22+00:00

Document:
Desarrollo web Categorías | El blog de Skatox El blog de SkatoxCompartiendo mis opiniones informáticas mas allá de los 140 caracteresHoy hace 7 años: Dar transparencia de Aero a Firefox en Windows Vista y SevenHoy hace 10 años: Mostrar la canción que se escucha en AMSN (Plugin Music) Resultados de la categoría: Desarrollo web Imágenes responsive en WordPressEscrito el 20 de junio de 2016 bajo Desarrollo y Programación, Planetas, Wordpress por Miguel UsecheEscribe el primer comentario ¿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 WordPressA 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.FacebookTwitterLinkedInGoogle Cómo instalar paquetes de bower y npm en Yii2Escrito el 25 de abril de 2016 bajo Desarrollo web, Desarrollo y Programación, Planetas por Miguel UsecheEscribe el primer comentario 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 composerAsumiendo que ya tienes instalado composer, solo debes instalar el complemento composer-asset-plugin mediante el siguiente comando:
¡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.FacebookTwitterLinkedInGoogleHace 5 años en esa fecha: Mi reacción ante el problema de Playstation NetworkHace 8 años en esa fecha: Propaganda del Flisol 2008 Pruebas de visualización de una página desde distintos dispositivosEscrito el 25 de enero de 2016 bajo Desarrollo web, Desarrollo y Programación, Planetas por Miguel UsecheEscribe el primer comentario 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. FacebookTwitterLinkedInGoogleHace 10 años en esa fecha: Ophcrack 2: Un LiveCD que crackea passwords de WindowsHace 11 años en esa fecha: Las metas de Microsoft Cómo ordenar de forma personalizada elementos en WoocommerceEscrito el 28 de diciembre de 2015 bajo Desarrollo web, Desarrollo y Programación, Planetas, Wordpress por Miguel UsecheEscribe el primer comentario En Woocommerce, puedes ordenar el listado de productos de varias formas en Ajustes -> Productos -> Ordenamiento de Productos por defecto, pero si en alguna parte del sitio necesitas crear tu propio listado a través de una consulta (generalmente mediante WP_Query) a la base de datos, lo mas probable es que desees mantener el orden establecido en ese apartado.La manera de mantener el orden, es extraer esa configuración inicial mediante el objeto global $wp_query, pues posee la información por defecto (o la modificada por el usuario) para realizar una consulta, así que accediendo a los atributos order, orderby y enviando ambos al la consulta, obtendrás el orden de la configuración inicial, tal como se muestra en el siguiente ejemplo:$args = array( 'posts_per_page' => -1, 'post_type' => array('product'), //Para consultar solo los productos 'product_cat' => $category, //Me traigo una categoria deseada 'order' => $wp_query->get('order'), //Trae el orden seleccionado en frontend 'orderby' => $wp_query->get('orderby') //Trae el atributo de orden seleccionado en el frontend ); $loop = new WP_Query( $args );Recuerda que debes previamente traer el objeto global $wp_query y luego con el resultado de la consulta, la puedes recorrer con los métodos normales de WordPress.FacebookTwitterLinkedInGoogleHace 5 años en esa fecha: Liberado jQuery Categories List 1.1 Cómo enviar los correos electrónicos predefinidos de WoocommerceEscrito el 14 de diciembre de 2015 bajo Desarrollo web, Desarrollo y Programación, Planetas, Wordpress por Miguel UsecheEscribe el primer comentario Woocommerce es una excelente herramienta para montar tu propia tienda en línea, es fácil de instalar y usar gracias que está construida sobre WordPress. Ademas es posible modificar todo su comportamiento mediante la instalación o construcción de plugins.Hace unas semanas construyendo un plugin para cambiar el flujo normal de los estados de una orden, me tocó enviar los correos predefinidos (nueva orden, orden procesada, etc) manualmente. Para mi sorpresa no encontré documentación sobre como hacerlo, y al leer el código fuente de la clase para enviar correos, me dí cuenta que posee estructura extraña porque utiliza muchos hooks y variables globales, así que me costó hacerlo.Envío de correosWoocommerce posee una clase llamada WC_Emails (no confundir con WC_Email que es abstracta para definir una plantilla de correo) cuya tarea es cargar todas las plantillas de correos definidas y posee métodos para enviar el correo. Pues simplemente se debe seleccionar una de las plantillas disponibles y ejecutar el método trigger con los parámetros requeridos para enviar el correo electrónico, es importante NO instanciar un objeto desde esta clase, pues al momento de crearse se instancia ciertas cosas de la plantilla y se ejecutan, ocasionando bugs como repetición del encabezado y ejecución múltiple de hooks.Por ello, solo debemos llamar a la función WC()->mailer() que siempre nos devuelve el objeto global de WC_Emails, seleccionamos la plantilla en el atributo emails, podemos personalizar el texto del sujeto o encabezado del correo y finalmente se ejecuta el método trigger con los parámetros del contenido del correo (los cuales varían en cada plantilla), tal como se puede observar en el siguiente ejemplo:
Las plantillas de correo disponibles por defecto (ya que puedes agregar tus propias plantillas) son:WC_Email_New_OrderWC_Email_Cancelled_OrderWC_Email_Customer_Processing_OrderWC_Email_Customer_Completed_OrderWC_Email_Customer_Refunded_OrderWC_Email_Customer_InvoiceWC_Email_Customer_NoteWC_Email_Customer_Reset_PasswordWC_Email_Customer_New_AccountEn caso de necesitar los parametros, simplemente chequeen los archivos con las clases. El nombre del archivo es la misma constante pero todo en minúsculas y cambiando piso por guiones, por ejemplo, WC_Email_Customer_Invoice está definido en el archivo wc-email-customer-invoice.php. Es fácil, aunque parezca lo contrario. Pero descubrir esta información me tomó tiempo al tener que chequear el código fuente de los correos en woocommerce, así que espero que les haya servido de gran ayuda y ahorra de tiempo.FacebookTwitterLinkedInGoogleHace 7 años en esa fecha: Amarok 2 disponible ahora en Windows 1 2 … 9 >> Este blog se distribuye bajo Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional. y fue creado utilizando tecnologías abiertas. Buscar ¡Hola! Soy desarrollador web,
voluntario en Mozilla (Hispano | Venezuela), promotor del
este blog. Seguir a @skatox Puedes contactarme o leer más sobre mi DonateIf you like this website or any of my work, consider to give a donation. Here in Venezuela it's hard to get USD currency to pay my hosting, domains. etc. Also you can donate me with Bitcoins: Archivos[-] 2016abrilenero[-] 2015diciembrenoviembreagostomayomarzofebrero[+] 2014octubreseptiembrejulio[+] 2013junioabrilenero[+] 2012noviembreabrilmarzoenero[+] 2011enero[+] 2010diciembrenoviembreagostojuliomayofebrero[+] 2009diciembreoctubreseptiembrejuliomayo[+] 2008septiembre[+] 2007marzoCategoríasApple/Mac(18)Desarrollo y Programación(74)[-]Base de datos(7)C++(4)Desarrollo web(45)[+]Wordpress(19)Java(9)Javascript(2)Netbeans(6)Eventos Informáticos(58)Gimp(1)Gnu/Linux(142)[+]Archlinux(17)Google(28)[+]Android(16)Hacking / Seguridad Informática(34)Informática(43)Internet(47)Libros(9)Microsoft/Windows(52)Mozilla / Firefox / Thunderbird(30)[+]Firefox OS(8)Musica Geek(26)Otras cosas(82)[+]Mi Página(29)Rubik(3)Videojuegos(79)[+]Playstation 3 ( PS3 )(29)PSP(3)Artículos recomendadosArtículo sobre la situación de Internet en Venezuela¿Como tener páginas web seguras?¿Por qué usar Cyanogenmod en mi teléfono Android?Mi opinión sobre la ley de videojuegos bélicos en VenezuelaPelículas y documentales recomendados sobre hacking, programación e Internet Blogroll GeekCassianetCodigeekEl Blog de LuisEl espacio que necesitabaEl rincon geekGespadasPanchosoftRichzendySYSADMITTatica Blogs No GeeksEl blog de AlexsQueso con Bocadillo Páginas AmigasPlaneta AndroidPlaneta Linux (Venezuela)Planeta VaSlibre Enlaces de mi sitio viejo¿Buscas las secciones de mi antiguo sitio?GNU/LinuxHumor GeekTutorialesDescargasEl Autor Etiquetas Si deseas vender publicidad en tu propio blog o página web, te recomiendo usar Seeding UP, buen servicio para monetizar tu página.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución