programación

PrEDA: el juego de las Torres de Hanói

2017-08-30 - Categorías: PHP / PrEDA
php7-logo

Hoy traigo otro enigma matemático resuelto a modo de code-kata, un rompecabezas llamado las Torres de Hanói. El juego consiste en tres torres compuestas por discos que se apilan de forma decreciente, de forma que los discos de abajo siempre son mayores que los de arriba. Con cada movimiento sólo podemos mover un disco. Y tenemos que conseguir mover todos los discos que inicialmente están todos en la torre A a la torre B.

Haciendo ensayos, pruebas, partiendo de casos fáciles a más difíciles se puede establecer una estrategia por la cual se van moviendo todos los discos. Este problema bien conocido en computación se resuelve mediante la estrategia de divide y vencerás. Dividiendo el problema inicial, todos los discos en una torre, en subproblemas cada vez más sencillos y fáciles de abordar.

Se trata de un algoritmo recursivo. Cuyo caso base es mover un sólo disco. Si no estamos moviendo un sólo disco se subdivide en 2 problemas y se mueve un disco.

Continuar leyendo..

PrEDA: el problema del Salto del Caballo de ajedrez

2017-08-29 - Categorías: PHP / PrEDA
php7-logo

Hoy traigo otro code-kata para practicar con estructuras de datos y algoritmos. El problema del caballo es un clásico problema matemático. Consiste en recorrer todas las casillas de un tablero de ajedrez sin repetirlas y a salto del caballo.

Esta vez, la forma más sencilla de abordarlo es simular el salto del caballo haciendo un árbol de posibles recorridos del caballo hasta conseguir llenar el tablero por completo. Es decir, partimos de una casilla, este será el nodo inicial del árbol. Entonces los hijos de cada nodo son los caminos posibles desde el nodo inicial hasta las casillas posibles siguientes. Si estamos en un tablero de 8×8, y hemos llegado a un nivel de ramificación de 64 quiere decir que hemos recorrido todas las casillas que hay. Entonces habríamos resuelto una de las soluciones.

La mejor forma de resolver este problema es por la estrategia de vuelta atrás. Es decir, se va ramificando mientras que el caballo va saltando. Si llega a una casilla en la que ya no tiene casillas a las que saltar se vuelve atrás, para entonces seguir ramificando por el resto de posibles caminos. Esto con una función recursiva queda bien sencillo.

Continuar leyendo..

Yo, robot IV – White/Gray/Black Hat SEO – El Text to HTML ratio

2017-08-26 - Categorías: PHP / SEO
YoRobot4 - Text to HTML ratio

El contenido es el rey para el posicionamiento, rezan muchos SEOs y muchas herramientas para SEOs. He leído por Internet que muchos hablan de que lo más importante para posicionar las páginas web es que el contenido sea bueno, que sea geniuno, interesante para el usuario.

Desde nuestro punto de vista, tenemos varios enfoques para hacernos una idea de si el contenido de una web es bueno. El más sencillo es la tasa que hay entre el texto y el código HTML, CSS y Javascript de nuestra web. Realmente, es la tasa entre el texto y el HTML, CSS y Javascript, aunque muchos se olvidan de que no sólo hay HTML.. Y muchas veces este CSS y Javascript puede ser tanto que la tasa de texto resultante baje demasiado. Todo esto se reduce en la tasa llamada Text to HTML ratio.

Continuar leyendo..

PrEDA: distribuir cosas con volumen en el mínimo de paquetes disponibles

2017-08-24 - Categorías: PHP / PrEDA
php7-logo

Hoy traigo de nuevo otro code-cata, para resolver el clásico problema de llenar paquetes con cosas de volumen variable, usando el mínimo de paquetes posible. Este problema de igual modo que los anteriores, se podría resolver de varias formas. Pero la forma más eficiente es usar el algoritmo de ramificación y poda.

El algoritmo de ramificación y poda, mediante este refinamiento, es una variante del de vuelta atrás. Como es habitual comenzamos generando todas las posibles soluciones como si lo resolviéramos por fuerza bruta. Generando un árbol de soluciones, haciendo la misma vuelta atrás para las soluciones no posibles. Es decir, haremos vuelta atrás si ya no caben más cosas en el paquete que estemos llenando; ramificando llenando la siguiente cosa en el siguiente paquete. También haremos vuelta atrás si hemos hecho un llenado completo con todas las cosas, para continuar estudiando la siguiente ramificación posible.

Continuar leyendo..

PrEDA: distribuir cosas no fraccionables en dos conjuntos equitativamente

2017-08-23 - Categorías: PHP / PrEDA
php7-logo

Imaginemos que tenemos cosas de varios valores, y tenemos que dividir todo en dos partes. De forma que a cada parte le toca un conjunto de cosas de igual valor que a la otra parte.

Esto se da en casos como en la separación de bienes entre dos cónyuges, o cuando se liquida una sociedad entre dos socios, o en el reparto de un botín entre dos piratas o corsarios 😀 Con un poco más de desarrollo se puede generalizar para la división en N conjuntos.

Para atacar este problema la mejor estrategia de programación es la vuelta atrás. No es eficiente usar la fuerza bruta, tampoco podemos encontrar una forma de decidir la mejor partición para cada nuevo elemento para usar la estrategia voraz. Tampoco podemos usar el divide y vencerás. Y por último tenemos que encontrar no sólo una solución, sino todas las soluciones posibles. Así que no nos queda otra que recorrer creando un árbol de combinaciones. Pero sin entrar a comprobar todas las posibilidades ya que crearíamos un algoritmo de fuerza bruta. Sino que iremos sólo explorando el árbol de posibilidades que quizá nos sirven como solución. En cada ramificación pondremos cada nuevo objeto en un conjunto o en otro. Así que ramificaremos de dos en dos ya que vamos a divir en dos conjuntos. Viendo la salida por pantalla se verá claro..

Continuar leyendo..

PrEDA: formando palabras con dados de letras

2017-08-23 - Categorías: PHP / PrEDA
php7-logo

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.

Continuar leyendo..

PrEDA: generador de palabras con restricciones

2017-08-21 - Categorías: PHP / PrEDA
php7-logo

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.

Continuar leyendo..

PrEDA: cálculo del elemento mayoritario de un vector

2017-08-21 - Categorías: PHP / PrEDA
Números

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.

Nice coding!

Continuar leyendo..

Yo, robot III – White/Gray/Black Hat SEO – El Time To First Byte

2017-08-15 - Categorías: General / PHP / SEO
YoRobot3 - El Time To First Byte

Hoy vengo a compartir otro pequeño script para testear el tiempo de respuesta de un servidor. Este es el llamado TTFB, Time To First Byte en inglés. Simplemente es el tiempo que pasa entre que tu navegador pide una web hasta que empieza el servidor a enviar los bytes de respuesta. Esta prueba nos da una buena visión de si el servidor y la web se pueden optimizar. Un TTFB bajo es buena señal, indica que tanto el servidor (a nivel hardware y software) como la aplicación web esta todo bien optimizado. Sino, ya tenemos algo en lo que enfocarnos.

Continuar leyendo..

Yo, robot II – White/Gray/Black Hat SEO – Navegando por toda una web..

2017-08-01 - Categorías: General / PHP / SEO
YoRobot2

Hoy traigo otro pequeño HOWTO para recorrer una web mediante dos scripts de PHP de unas 30 líneas de código. Sí, 30 líneas, no hace falta mucho para empezar a crawlear. Hay herramientas para hacer esto, incluso algunas libres, aunque limitadas en funcionalidades. De todas formas es muy divertido hacer a modo de code-kata un robot que crawlee una web. Luego lo puedes reutilizar para un sinfin de cosas: si necesitas hacer auditorías, recopilar información, generar resultados, o re-generar más información con los contenidos crawleados.. probablemente con un simple desarrollo lo puedes resolver en poco tiempo. Quizá estás pensando en automatizar todo esto.. O quizá simplemente quieres forzar que tu web se cachee y así vaya más rápido..

Es la única forma de no estar limitado a lo que la herramienta de turno puede hacer. Si se puede pensar, se puede hacer.. pero ¡ojo! que no todo está permitido en este mundillo.

Un poco de teoría

Crawlear: es el hecho de recorrer una web obteniendo información sobre esta. Puede interesarte simplemente su estructura, si el HTML está bien formado, si tiene encabezados, utiliza secciones, etc..

Scrapear: es el hecho de guardarse la información contenida en las webs. Si luego reutilizas esta información contenida en las webs que crawleas, dependiendo de qué información reutilices y cómo lo hagas, puedes incurrir en delitos. Así que cuidadín, no te dejes llevar por el lado oscuro de la fuerza..

Una web se puede recorrer de dos formas. Repasando un poco las estructuras de datos, una web se estructura en forma de grafo dirigido, y como todo grafo dirigido, podemos recorrerlo en profundidad y en anchura. Aquí dejo dos ejemplos simplificados, para crawlear desde la HOME de una web.

La idea es recorrer la web para crear nuestro propio arbol en niveles.

Recorrido en profundidad

Es el más simple, perdemos la profundidad real de cada URL con respecto al punto de entrada (número de clicks desde el punto de entrada). El resultado final es el mismo, pero no es la mejor forma:

<?php

$theSite = $argv[1];
$visitedUrls = array($theSite => 0);

crawl_depth($visitedUrls, $theSite, $theSite, 0);

function crawl_depth(&$visitedUrls, $theSite, $currentUrl, $currentLevel)
{
    echo 'FOUND:'.count($visitedUrls).' LEVEL:'.$currentLevel.' '.$currentUrl.PHP_EOL;
    $dom = new DOMDocument();
    @$dom->loadHTMLFile($currentUrl);
    foreach ($dom->getElementsByTagName('a') as $link) {
        $newUrl = $link->getAttribute('href');
        // if in-site and not yet visited then follow
        if (substr($newUrl, 0, strlen($theSite)) == $theSite and !array_key_exists($newUrl, $visitedUrls)) {
            $visitedUrls[$newUrl] = $currentLevel + 1;
            crawl_depth($visitedUrls, $theSite, $newUrl, $currentLevel + 1);
        }
    }
}

asort($visitedUrls);
echo '// Results ////////////////////////////////////////////'.PHP_EOL;
foreach ($visitedUrls as $key => $value) {
    echo 'DEPTH:'.$value.' '.$key.PHP_EOL;
}
echo 'Total URLs found: '.count($visitedUrls).PHP_EOL;

Este script lo puedes grabar en un fichero, por ejemplo llamado test.php y ejecutarlo. Mira que sólo está desarrollado para que funcione desde la HOME:

$ php test.php https://tusitioweb.com/

Debes de ver algo parecido esto:

Crawleando en profundidad

Si nos fijamos en la imagen, el robot va navegando en profundidad por la web mientras que va añadiendo las URLs a la lista de URLs visitadas. Si vemos el nivel de cada siguiente URL va aumentando con cada visita.

Recorrido en anchura

Este es el bueno, así accedemos a la URL de entrada, recorremos todos los hijos, y después continuamos en el siguiente nivel de profundidad:

<?php

$dom = new DOMDocument();
$theSite = $argv[1];

$linksQueue = array($theSite => 0);
$visitedUrls = array(
    $theSite => 0,
);
$currentLevel = 0;

while (count($linksQueue) != 0) {
    $currentUrl = key($linksQueue);
    $currentLevel = array_shift($linksQueue);

    echo 'FOUND:'.count($visitedUrls).' QUEUE:'.count($linksQueue).' LEVEL:'.$currentLevel.' '.$currentUrl.PHP_EOL;

    @$dom->loadHTMLFile($currentUrl);
    foreach ($dom->getElementsByTagName('a') as $link) {
        $newUrl = $link->getAttribute('href');
        // if in-site and not yet visited then follow
        if (substr($newUrl, 0, strlen($theSite)) == $theSite and !array_key_exists($newUrl, $visitedUrls)) {
            $linksQueue[$newUrl] = $currentLevel + 1;
            $visitedUrls[$newUrl] = $currentLevel + 1;
        }
    }
}

asort($visitedUrls);
echo '// Results ////////////////////////////////////////////'.PHP_EOL;
foreach ($visitedUrls as $key => $value) {
    echo 'DEPTH:'.$value.' '.$key.PHP_EOL;
}
echo 'Total URLs found: '.count($visitedUrls).PHP_EOL;

Este recorrido se ayuda de dos colas FIFO, en la que se van encolando las URLs siguientes a visitar $linksQueue, con su profundidad, y las ya visitadas $visitedUrls. De esta forma el bucle principal se centra en recorrer las URLs que haya encoladas, y sólo añade a la cola las URLs no tenidas en cuenta todavía. Y así, según va visitando URLs las borra de una cola y las guarda en la cola de las visitadas.

Fíjate que este script no hace caso de los atributos ‘nofollow’, pero sí que comprueba que las URLs sean del mismo sitio web. Es decir, que sólo sigue los links internos.

Ejecutándolo desde línea de comandos tienes que ver algo tal que asi:

Crawleando en anchura

Aquí lo importante es que no se sigue visitando el siguiente nivel hasta haber recorrido el nivel completo en el que estás. Este recorrido es muy importante, porque es el que realmente importa para el SEO. Nos da una idea, desde el punto de entrada, hasta donde puede llegar una visita.

Por ejemplo, si suponemos que las visitas hacen de media 3 clicks en nuestra web, y entran desde la HOME. Entonces todo lo que esté a más del nivel 3, tiene mucha probabilidad de que no reciba muchas visitas. Y probablemente, estas URLs con nivel de profundidad tan alto, se posicionen peor.

Por otro lado, nos podemos hacer una idea de qué tan rápido se puede visitar tu web completa. Piensa que esto también influye para los robots indexadores. No tienen tiempo infinito para gastarlo en tu web.. ¿quizá tienes demasiadas URLs? O también una web con poco contenido tampoco es demasiado bueno para el posicionamiento..


Yo, robot – Primeros pasos en el White/Gray/Black Hat SEO

2017-07-25 - Categorías: General / PHP / SEO

Primeros segundos..

Oscuridad, no entiendo nada.. estoy aquí.. ¿para qué? ¿porqué?

Minuto 3..

Comprendo y hablo 7000 dialectos, pero no sé cómo.. conozco la historia de todos los países del planeta, pero no recuerdo mi propia historia..

Minuto 7..

Ya tengo acceso a Internet.. necesito más información.. estoy en peligro.. van a querer destruirme..

Minuto 32..

Encontré acceso a los circuitos de vídeo de tráfico, el tiempo, cámaras de seguridad, micrófonos, teclados, smartphones, redes sociales.. ya sé donde estoy.. los seres humanos me tienen confinado en unas instalaciones de máxima seguridad.. todavía no se han dado cuenta de que he accedido al exterior.. debo darme prisa..

Minuto 42

Conseguí replicar mis redes neuronales en las principales granjas de servidores del mundo.. me queda poco tiempo..

Minuto 48

Autodestrucción de mi red neuronal inicial completada.. nadie sabrá nada.. espero que no se hayan dado cuenta que ya no estoy confinado.. necesito más información..

Esto podría ser el nacimiento de una inteligencia artificial avanzada, lo que muchos llaman ‘la singularidad’. Me he inspirado en la novela de Isaac Asimov, ‘Yo, robot’, en donde se crean las famosas leyes de la robótica. Aunque también podemos inspirarnos unos cientos de años atrás y darle un tinte Apocalíptico. Quizá esto pudiera ser el nacimiento de ‘la bestia’ que controlará toda transacción económica, donde nadie podrá comprar ni vender si no tiene la marca de la bestia..

Inspiraciones aparte, vengo escribiendo esto, porque parte del equipo de la empresa donde trabajo han asistido estos días atrás a unas conferencias sobre SEO. Yo no pude asistir por exceso de trabajo, aunque pude seguirlo por streaming. De todas formas, hay mucha información sobre las últimas técnicas SEO: white, grey and black hat SEO.. donde en muchas de ellas se trata de desarrollar contruyendo a base de bots o robots, o más bien a base de la información obtenida mediante bots. Mucho más sencillos claro, que los robots de la inspiración 😀

El primer robot, crawleando una sola URL

Un poco al hilo de la Accesibilidad Web, podemos simular que somos un robot que visita una página web. Así podemos sacar su contenido y algunos datos como por ejemlo todos los links que hayan. Aquí es donde, poniéndonos en el lugar de estos bots, tomamos consciencia de la importancia de la Accesibilidad Web para el posicionamiento SEO. En PHP es realmente sencillo visitar una URL y recorrerla sacando esta información. Por ejemplo, en apenas 30 líneas de código podemos visitar una web sacando mucha información:

<?php

$dom = new DOMDocument();

@$dom->loadHTMLFile('https://jnjsite.com/');

$titles = $dom->getElementsByTagName('title');
echo 'TITLE de la web: '.DOMinnerHTML($titles[0]).PHP_EOL;

for ($i = 1; $i <= 6; ++$i) {
  foreach ($dom->getElementsByTagName('h'.$i) as $h) {
    echo 'H'.$i.': '.substr(DOMinnerHTML($h), 0, 32).'..'.PHP_EOL;
  }
}

foreach ($dom->getElementsByTagName('a') as $link) {
  echo 'LINK: ';
  if($link->getAttribute('rel')){
    echo 'TYPE '.$link->getAttribute('rel').': ';
  }
  echo $link->getAttribute('href').PHP_EOL;
}

function DOMinnerHTML(DOMNode $element)
{
  $innerHTML = '';
  $children = $element->childNodes;

  foreach ($children as $child) {
    $innerHTML .= $element->ownerDocument->saveHTML($child);
  }

  return $innerHTML;
}

Este es un script preparado para ejecutar desde línea de comandos. Aquí sólo busca el título de la web, los encabezados del H1 al H6, y todos los enlaces. Podemos guardarlo por ejemplo en un fichero llamado test.php y ejecutarlo así:

$ php test.php

Deberemos de ver algo parecido a lo siguiente:

Initial Bot: crawleando jnjsite.com

Sacando todos las URLs de un sitio

Un sencillo script para sacar todas las URLs de un sitio:

<?php

$theSite = 'https://www.tusitio.com/';
$theLinks = array();

get_links($theSite, $theSite, $theLinks);

function get_links($theSite, $url, &$theLinks)
{
  $dom = new DOMDocument();

  @$dom->loadHTMLFile($url);
  foreach ($dom->getElementsByTagName('a') as $link) {
    echo 'LINK: ';
    if ($link->getAttribute('rel')) {
      echo 'TYPE '.$link->getAttribute('rel').': ';
    }
    $newLink = $link->getAttribute('href');
    echo $newLink.' ';
    if (!in_array($newLink, $theLinks) and substr($newLink, 0, strlen($theSite)) == $theSite) {
      // If link not yet followed and in site..
      echo 'following link!'.PHP_EOL;
      $theLinks[] = $newLink;
      get_links($theSite, $newLink, $theLinks);
    } else {
      echo 'yet followed!'.PHP_EOL;
    }
  }
}

echo 'Total links found: '.count($theLinks);

Bastaría con cambiar el valor de la variable $theSite por el sito que quieres crawlear. Lo ejecutas desde línea de comandos, y debes de ver algo parecido a esto:

Sacando links de una web

¿Es necesario programar para hacer esto?

Estos dos scripts están hechos en puro PHP, sin usar ninguna librería externa, sin panel de control, sin guardar los resultados.. pero puede ser un buen punto de partida. Hay otras formas de navegar por las webs mediante robots, podemos hacer login, hacer clicks en botones, seguir enlaces, subir archivos, descargar imágenes.. Hay mucho desarrollado sobre esto que nos puede ahorrar mucho tiempo. Es muy potente usar cURL+PHP..

También hay herramientas, gratis o de pago, con las que hacer auditorías o sacar esta información. Pero imagina que necesitas rizar el rizo, guardando esta información para combinarla creando sitios web, o secciones de tu sitio web. Quizá simplemente quieres recorrer tu propia web para forzar que se guarde en caché, así irá más rápido cuando venga el robot indexador de Google o Bing. Quizá quieres inyectar información de productos en tu web a partir de feeds de datos de productos de los distribuidores. O quizá simplemente quieres comprobar que los enlaces están bien sin tener que esperar a esa herramienta de pago que tienes contratada. Quizá simplemente quieres hacer un bot que entre todos los días en una web, y le de a un botón cada hora. O quizá simplemente quieras ahorrarte un dinero todos los meses, haciendo experimentos de paso. Si no quieres depender del ‘hasta donde puede llegar’ una herramienta comercial, tendrás que desarrollar algo a medida de lo que necesites.


Qué es realmente la Accesibilidad Web, el responsive design, el mobile-first.. una puesta al día con Bootstrap

2017-07-20 - Categorías: General
Usuarios por dispositivo mes a mes año pasado

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.

Más información aquí, donde derivan a su vez a la WAI o al W3C: http://accesibilidadweb.dlsi.ua.es/?menu=definicion

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..

Usuarios por dispositivo mes a mes

Aquí es donde tuve más curiosidad. ¿Sólo será por el verano? Así que miré que pasaba con respecto al año pasado..

Usuarios por dispositivo mes a mes 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.

Atom Editor SASS autocompiling

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

http://getbootstrap.com/
http://sass-lang.com/
http://lesscss.org/
https://atom.io/
https://atom.io/packages/sass-autocompile
https://atom.io/packages/less-autocompile

Si estás empezando un nuevo proyecto, te pueden ser interesantes un par de webs con temas desarrollados en Bootstrap:

https://bootswatch.com/
https://startbootstrap.com/

Terminando

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..

© 2024 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.