Hoy traigo otro script de estudio a modo de code-kata. Se trata de una variante de juego de mesa en el que hay que formar palabras con dados de letras. Es decir, tenemos unos dados que toman letras aleatoriamente. Teniendo entonces N dados de 6 letras cada uno. A su vez, se forman palabras aleatoriamente del mismo tamaño que la cantidad de dados que tenemos.
Comienza el juego; tenemos que encontrar si combinando dichos dados podemos formar la palabra. Para dar la respuesta hay que decir en qué posición ponemos cada dado y en qué cara.
De nuevo tenemos varias formas de resolverlo. Podríamos combinar a lo bruto los dados, cara a cara, comprobando si la solución es posible. La forma mas rápida y eficiente es usando el algoritmo de vuelta atrás. Tenemos que explorar todas las posibles soluciones, recorriendo el árbol completo de posibles soluciones. La lógica para resolverlo es ir poniendo dado a dado, haciendo llamadas recursivas para construir el árbol.
Aquí dejo un pequeño code-kata sobre cómo generar todas las palabras posibles con ciertas condiciones hecho en PHP. Se aplica el algoritmo de vuelta atrás, ramificando y podando el árbol de soluciones. Se usa este algoritmo porque tenemos que encontrar todas las posibles soluciones al problema. Pero debemos de cortar cada posible ramificación lo antes posible, haciendo una vuelta atrás, para continuar explorando por la siguiente rama de posibles soluciones.
De nuevo, también podemos generar las palabras a lo bruto para después ir comprobando si cumplen las restricciones. Pero será más eficiente tanto en tiempo como en espacio con esta estrategia de programación. Será mejor ir generarando las palabras e ir comprobando mientras que se van construyendo. La estrategia consiste en ir añadiendo letra a letra e ir comprobando si la nueva letra añadida puede ser una solución.
Hoy vengo a compartir un algoritmo de programación para resolver el problema de calcular el elemento mayoritario de un vector. Podemos hacerlo a lo bruto, directamente calculando cuántas veces se repite cada elemento.
Pero aquí la historia está en aplicar la estrategia de programación divide y vencerás. Si un elemento es mayoritario en un vector de n elementos, entonces se repite por lo menos n/2+1 veces. La estrategia consiste en que si un elemento es mayoritario en una mitad del vector, entonces es candidato para ser mayoritario. El problema inicial se subdivide en subproblemas hacia abajo más sencillos de resolver, para luego combinar las soluciones hacia arriba hasta llegar a la solución.
Este post es una puesta al día sobre herramientas de desarrollo, el mobile-first, el responsive, y la accesibilidad en la web. Es una puesta al día con esta herramienta de desarrollo web para proyectos mobile-first. Hablo de Bootstrap, que como reza en su web, es muy popular desde hace años:
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Si tienes una plantilla contruída sobre Bootstrap, ya tienes una página preparada para todo tipo de dispositivos. Esta herramienta creada por Twitter es todo un referente desde hace años. Puede que tu web esté mejor o peor hecha, pero si tienes Bootstrap, ya tienes un buen punto de partida. Y una de las herramientas de mayor renombre. Así que si no lo has tenido en cuenta, ya es hora de cambiar el chip, y empezar a pensar de otra forma.
¿Qué es la Accesibilidad Web?
Si vamos al origen de la creación de la Web. No hablo de la creación de Internet, sino de la creación de la web. La web se creó en su origen para dar un acceso universal a la información. Normalmente se asocia la accesibilidad exclusivamente a las personas con alguna discapacidad, pero en la web, esto cobra un sentido más amplio. Aquí se añaden más variables, como pueden ser la resolución de pantalla, la capacidad de procesamiento, el software del navegador, el lenguaje del usuario, la velocidad de conexión, su ubicación geográfica, etc..
Es decir, que la Accesibilidad toma un concepto más amplio en la Web, que el que normalmente puede tomar fuera de Internet. Aquí entra en gran medida conceptos que repercuten directamente en el posicionamiento de la web, en la usabilidad. Entran conceptos que van a repercutir directamente en el éxito o fracaso, en mayor o menor medida, de los proyectos web.
Resumiendo, que sí que es muy importante la Accesibilidad Web, el diseño sensible al dispositivo y diseñar tu web pensando en los usuarios que nos visitan desde un móvil. Pensemos en que los robots de Google, o de cualquier otro buscador, necesitan que tu web sea accesible. Estos robots son entes ciegos, algunos tienen serias limitaciones de software, quizá no pueden ejecutar ciertas tecnologías como Javascript. Algo parecido a como puede pasar con los visitantes de un móvil de gama baja, con ordenadores antiguos, o con usuarios con velocidades de conexión lentas.
Muchas de estas restricciones las tenemos en los dispositivos móviles. Y si a esto le sumamos que cada día más personas andamos movilizados, ya tenemos un cóctel explosivo si es que todavía no nos hemos esforzado en esto.
Estado actual de las visitas desde móvil
No lo digo yo, sino que los creadores de la web, la WAI o el W3C llevan tiempo previniendo. Sino que Google lleva tiempo también dándole cada vez más importancia. Dejo aquí un par de ejemplos de cómo van aumentando las visitas desde dispositivos móviles. Primero mes a mes en un proyecto, quizá es por el verano que la gente usa más el móvil..
Aquí es donde tuve más curiosidad. ¿Sólo será por el verano? Así que miré que pasaba con respecto al año pasado..
Es un poco alarmante cómo van creciendo las visitas desde móvil, aunque ya ha sido anunciado a voces. Menos mal que tenemos el proyecto hecho con un diseño con Bootstrap 😉 A partir de aquí lo siguiente es ya pensar en que todos los visitantes son dispositivos móviles y exprimir nuestro proyecto haciendo los ajustes necesarios. Hazlo que seguro que merece la pena..
Haciendo unos ajustes en Bootstrap con SASS y LESS
Después de toda la teoría, más de un buen maquetador me había recomendado usar SASS y LESS. Así que ya voy a ir al grano para presentar estas tecnologías y cómo configurar un entorno de trabajo con Atom Editor y así ser más productivos en nuestro desarrollo mobile-first.
SASS y LESS son preprocesadores de hojas de estilo. Con estas tecnologías podemos simplificar la construcción de hojas de estilo CSS. Así, podemos añadir variables, funciones, anidar selectores de estilos.. siendo más productivos y teniendo un proyecto más mantenible a la larga. La idea es construir unos pocos ficheros, que se procesan, y generan el estilo resultante.
En Atom Editor tenemos dos auto-compiladores que funcionan muy bien, comprobado 😉 son el llamado sass-autocompile y el less-autocompile. No hay más que ir a la sección de instalación de paquetes de nuestro Atom Editor, buscar e instalar.
Como se puede ver en la imagen, se puede descargar una versión de Bootstrap preparada para usar SASS. Todos los ficheros tienen la extensión .scss porque son de SASS. Así que con un fichero styles.scss podemos reprocesar nuestro Bootstap para modificar el thema propio. En el momento en que se graba el fichero styles.scss, Atom Editor detectará que es un fichero .scss que procesar, y automáticamente generará el fichero styles.min.css listo para incluir en el HTML. En el fichero styles.scss de SASS, lo que tenemos es que, se modifican algunas cosas de los estilos de Bootstrap y a su vez se importan. Es decir, que todos los estilos estarán incluidos en una sola hoja de estilos, y finalmente el navegador sólo tendrá que descargarse un único fichero .css con todo unificado y comprimido.
Lo mismo funciona para LESS, es la misma idea, aunque la sintaxis es distinta. Algunos recomiendan SASS para los principiantes, pero realmente con la documentación a mano no veo ningún inconveniente a trabajar con LESS.
Unos enlaces relacionados
No debería de dejar enlaces, porque puede que te vayas de la web. Pero el objetivo de este post es echar un cable, así que ahí van xD
Poder definir variables, anidar estilos, etc.. le da mucha potencia a la maquetación. Si a esto le añadimos lo que comentaba al principio, pensando en los dispositivos móviles, podemos ajustar nuestra plantilla, para que sea lo más accesible desde cualquier tipo de dispositivo..
Es el gran dilema en el desarrollo de aplicaciones web. Te hablan sobre un proyecto; con unos requerimientos, unas especificaciones. Debes elegir con las premisas que te dan: presupuesto, tiempo de entrega, calidad, flexibilidad, mantenibilidad, practicidad.. ¿Existe ya una solución para el proyecto? ¿Se puede partir de un CMS y modificarlo? ¿Son demasiadas las modificaciones que se van a hacer al CMS? ¿Es viable partir de un framework de calidad? ¿Buscamos máxima calidad, o menor precio? ¿Hay muchos desarrolladores disponibles en el mercado para mantener el proyecto?
He recibido una consulta sobre cómo sacar el ciclo de ventas de Magento. Ya respondí, pero los cálculos no me salen exactos. Así que jugando, jugando.. he tratado de encontrar cómo Magento calcula el ciclo de ventas que vemos en el panel de control.
Como no me daba exacto, he recorrido después las facturas, que tampoco me daba exacto. Y después añadí el recorrido de los abonos. Con y sin impuestos, tampoco me daba la misma cifra. Balanceando facturas con abonos, con y sin impuestos, que es lo correctamente contable tampoco me salía la misma cifra, aunque se iba acercando.. Conclusión, que en una tarde recorriendo los pedidos, facturas y abonos, no salen los mismos cálculos que te muestra Magento en el panel de control. Pero aquí dejo la información para el que le pueda servir 😉 de todas formas, contablemente, lo correcto son contabilizar las facturas y abonos.
Una de las formas más interesantes de modificar el comportamiento de tu Magento es utilizar los eventos. Se ejecutan en cada click del navegador, cuando un visitante se registra, cuando se añade un producto al comparador, cuando se crea un pedido, cuando se visita una página, una categoría, un producto, cuando un visitante entra a su zona de usuario, edita sus datos, busca contenidos.. es ingente la cantidad de eventos. Es decir, que contínuamente se están disparando una tonelada de eventos mientras que se ejecuta Magento.
Cuando empiezas a programar nuevos comportamientos, puedes buscar en StackOverflow o Googleando. A ver cuál es el evento que necesitas. Con la esperanza de que alguien haya compartido ya algo sobre esto..
Hoy traigo un pequeño HOWTO de cómo balancear las visitas de un sitio web entre varios servidores, eligiendo exactamente qué visitas van a qué servidores. Se trata unas pocas directrices para configurar CloudFront y así redirigir las peticiones web.
Con esto puedes controlar qué subdirectorios, o que zonas de tu aplicación web se gestionan desde qué servidores. Balancear en función de la carga se puede hacer con un ELB (Elastic Load Balancer), pero estas configuraciones a nivel de CloudFront balancean las peticiones de forma permanente. Por ejemplo:
Hoy traigo de nuevo otro pequeño HOWTO. Esta vez se trata de una pequeña gran utilidad que viene en los repositorios de las distribuciones de Linux. Hablo de Jpegoptim, es una utilidad con la que puedes comprimir ficheros en el formato JPEG desde línea de comandos.
Seguro que habrá muchas herramientas que se hagan valer de esto, proporcionando una interfaz gráfica para lanzar el programa. Pero la línea de comandos es algo muy pontente. Sobretodo para entornos de servidor en donde no tienes entorno gráfico para administrar. O para programar tareas lanzando este comando.
Un poco de teoría
JPEG es un formato de compresión de imágenes con pérdida de calidad. ¿Esto qué quiere decir? Pues simplemente eso, que las imágenes se pueden comprimir permitiendo pérdida de la calidad en favor del tamaño final que queramos alcanzar. Esto no se puede hacer con todos los formatos de imagen.
Esta pérdida de calidad nos permitirá ajustarla a lo que necesitemos sacrificando todo lo que queramos hasta llegar a un tamaño adecuado. Cosa bastante necesaria cuando estamos trabajando en optimizar una web; ya que este es uno de los factores de puntuación de la calidad.
Otro punto a tener en cuenta para las imágenes en webs, es que queremos que sean progresivas. Por simplificar la teoría, esto hará las imágenes de forma que tengamos varias versiones cada vez de mejor calidad en una misma imagen. En una web que se está visualizando, comenzará a pintarse la versión más ligera en cuanto se descargue. Así sucesivamente, hasta llegar a la de mayor calidad. Esto tiene un impacto directo en el tiempo de la primera visualización de las imágenes de una web.
Instalación
En mi caso, como ando con las distribuciones Ubuntu basta con ejecutar lo siguiente desde un terminal:
find ./directorio/ -type f -name "*.jpg" -exec time jpegoptim --strip-all --all-progressive --max=90 {} \;
Con esto comprimirás todas las imágenes del directorio en cuestión sobreescribiendo las originales, haciéndolas progresivas si no lo son, y además, reduciéndolas a una calidad del 90%.
Sólo queda esperar y ver los resultados.
Tengo que decir que se usan comandos como find, time, combinado con jpegoptim que es el ejecutable que comprime. Ya dependiendo de lo que necesites recomiendo consultar la documentación oficial ejecutando lo siguiente:
Desenpolvando un poco temas de Java, hoy traigo un pequeño howto para guardar datos que tenemos representados en clases, en ficheros, sin complicarnos demasiado la vida. Es decir, a veces, necesitamos algo rápido para guardar en ficheros o para transmitir información por la red.
La clase Java, el objeto, debe implementar la interfaz Serializable, y así será fácilmente guardable como fichero de texto. Al hacer un objeto serializable, de forma automática se podrá convertir en una cadena de texto, con lo que podremos guardar este contenido fácilmente en un fichero, transmitirlo por la red, en una BD, etc.. ¡vamos a grano!
Siguiendo con el post anterior para ver en qué gastamos el espacio del disco duro. Hoy me he encontrado con una utilidad gráfica que nos sirve para lo mismo, pero más fácil porque sólo con el ratón podemos inspeccionar el estado del disco duro. Esta aplicación nos va a servir para nuestro ordenador personal o de trabajo si tenemos Ubuntu MATE, pero sólo nos servirá para un servidor si es que lo tenemos instalado con el entorno gráfico.
Se llama analizador de uso de disco de MATE y viene ya instalado por defecto. Así que no tenemos más que ir a Aplicaciones > Herramientas del sistema > Analizador de uso de disco de MATE. Veremos una pantalla tal y como la siguiente:
¿Qué hacemos si nuestro duro se esta llenando en un sistema GNU/Linux? Lo primero será encontrar qué ficheros, o más bien qué directorios, son los que más ocupan para ir borrando o moviendo lo ficheros.
Hoy traigo un pequeño HOWTO para encontrar en qué se nos va el espacio más rápido, desde línea de comandos. Si estás en un ordenador personal te ahorrará tiempo, y si estás en un servidor remoto no hay otra manera.
