Herramientas indispensables para diseño web Page ruler, tu regla para medir pixeles en la pantalla del ordenador

Herramientas indispensables para diseño web Page ruler. Muchas veces queremos saber cuanto mide un elemento de una pagina web, proyecto etc. Como por ejemplo una imagen

Muchas extensiones de navegador te permiten medir en pantalla mediante una sencilla regla y averiguar rápidamente cuanto mide en píxeles un elemento web. La extensión más utilizada se llama Pageruler que crea una regla para obtener dimensiones y posicionamiento de píxeles, y además mide elementos en cualquier página web.

¿Qué es Page ruler?

Page Ruler es una extensión gratuita para navegadores  web Firefox y Chrome que muestra en pixeles la medida de los elementos medidos.

Características

•    Dibuja una regla en cualquier página y permite ver el ancho, la altura y la posición superior, inferior, izquierda y derecha.
•    Arrastra los bordes de la regla para cambiar su tamaño.
•    Usa las teclas de flecha para mover y cambiar el tamaño de la regla.
•    Muestra guías que se extienden desde los bordes de la regla.
•    Actualiza manualmente el tamaño y la posición de la regla desde la barra de herramientas para realizar cambios de precisión.
•    Habilita el “Modo de elemento” para delinear elementos en la página mientras mueves el ratón sobre ellos.
•    Navega a través de elementos de padres, hijos y hermanos de cualquier elemento medido.

Cómo utilizar la extensión Page ruler

Empezamos instalando la extensión en tu navegador y después haz clic en el icono que está al lado de la barra de direcciones.

Image

 
A continuación  puedes usar la medición libre arrastrando el ratón por la pantalla.

También puedes utilizar el modo de detección del elemento en la parte superior izquierda para que detecte automáticamente cuánto mide, por ejemplo un campo de registro de un formulario.

Image

Y estas son las caracteristicas y virtudes de Page ruler como herramienta indispensable para el diseño web Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Herramientas indispensables para diseño web WhatFont

Herramientas indispensables para diseño web WhatFont, la forma más fácil de identificar fuentes en páginas web.

Cuantas veces has querido saber que fuente esta utilizando una pagina web, una publicación, un post. Que tamaño de letra tiene un encabezado. Que grueso de letra tiene un título. WhatFont es una extensión de Chrome que nos ayuda con esta función de una forma muy rápida y sencilla.

Image

Tan solo con un clic nos proporcionara toda la información que necesitamos sobre esa fuente.

Primero nos muestra de forma abreviada el nombre de la fuente y su grosor en la primera línea de la ventana informativa. A continuación, nos mostrara la familia completa de la fuente, el estilo, el grosor, el tamaño en pixeles, la altura de la línea en pixeles, el color en código hexadecimal y un ejemplo de todas las letras en mayúsculas y minúsculas de la misma.

Image

Puedes darle clic a otra fuente y abrirá otro pequeño pop-up con la información de esta ultima sin perder el pop-up de la fuente anterior. Como puedes comprobar es sencillísimo conocer las fuentes que utiliza una pagina web utilizando la extensión para Chrome WhatFont.

Existen muchas otras extensiones similares, Firebug y Webkit Inspector son bastante fáciles de usar para los desarrolladores. Sin embargo, para otros, esto no debería ser necesario.. Además, si conoces CSS no te hará falta WhatFont. Pero incluso en este caso te ayudara a ahorrar tiempo en tus proyectos.

Es así de simple y elegante.

Para usar whatfont es tan sencillo como buscar la aplicación en las extensiones para Chrome en la barra de tareas de tu buscador, añadirla a Chrome y fijarla en la barra de extensiones.
También puedes pulsar aquí para ir directamente a la ventada de descarga.

Y estas son las caracteristicas y virtudes de WhatFont como herramienta indispensable para el diseño web Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Instalar y configurar slick carousel Si alguna vez habeis tenido que desarrollar una web, seguro que os han pedido algun slider con fotos y/o videos. Para mi gusto, la mejor opción para ello es usar slick carousel, puesto que me permite integrarlo con views y configurarlo a mi gusto.

Aunque pudiera parecer complicado, instalarlo y configurarlo es realmente sencillo, veamos como.

1.Instalar y Configurar Slick
Instalar los módulos:

• Slick: https://www.drupal.org/project/slick

Nota: cuando se instala el módulo Slick, se instala también Slick UI.

• Slick View: https://www.drupal.org/project/slick_views

Una vez instalados ir a Ampliar > List> Slick UI > configurar

Image

Ahora hay que crear un conjunto de opciones de Slick

Image

A modo de ejemplo se va a llamar: Store_Slick

Image

En el menú lateral izquierdo ir a la opción Configuración

Image

Seleccionar las siguientes opciones y guardar.

• Accesibility
• Arrows
• Dots
• Infinity
• Swipe
• Touch move
• Use CSS
• Use CSS Transforms
• jQuery easing: Linear
• Wait for animate

2.Añadir el nuevo conjunto de opciones a una vista
Dentro de la vista creada ir al apartado FORMATO > Formato.

En esta ventana se selecciona el estilo que va a tener o como se va a ver la información de la vista, y es aquí donde debe aparecer la opción Slick Carousel (si se han instalado correctamente los módulos).

Image

Lo siguiente que se tiene que hacer es configurar las opciones de estilo. Para ello:

• Seleccionar la casilla Vanilla Slick.
• En Optionset main, justo debajo de la anterior, seleccionar Store_Slick (ó como se haya llamado al conjunto de opciones de Slick anteriormente).
• En Skin main, a la derecha de la anterior, seleccionar Classic
• Y por último, elegir el número (X) de elementos que por defecto se van a mostrar en el, independientemente del número total que el carrusel muestre. Para seguir con el ejemplo,  van a ser tres elementos los que se verán por defecto
  • Grid large 3
  • Grid medium 3
  • Grid small 3

El resultado será el siguiente:

Image

Y esto ha sido Instalar y configurar slick carousel, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

Drupal views Contiene cualquier palabra no funciona como cabe esperar, pues busca cualquier palabra que "contenga", no palabras enteras. 

Por su puesto esto es solo una solución temporal para poder filtrar por contiene cualquier palabra. No es un arreglo definitivo, pues lo que vamos a hacer es un filtro nuevo para filtrar los resultados de la vista antes de que estos se impriman. 

Antes de nada, os muestro como hace Drupal actualmente una consulta de "contiene" y otra de "contiene cualquier palabra". 

Como veis, envía en ambas ocasiones la consulta de la misma manera "LIKE %Palabra%". 

En este caso hemos buscado "CID" y nos ha devuelto todos los registros cuyo nombre contiene Cid, cuando buscábamos saber solo quienes se apellida o llaman CID.

Comenzamos con nuestro filtro de "contiene cualquier palabra" .

En primer lugar debemos saber el nombre de sistema del filtro expuesto que queremos modificar su comportamiento:

Para ello nos dirigimos al filtro expuesto y copiamos el identificador de filtro.

Con esto podemos crear un pequeño modulo muy sencillo con un hook de las vistas

HOOK_word_views_pre_render(ViewExecutable $view):

Primero obtenemos los resultados de la vista actual en el $view->exposed_data;

Después guardamos el valor de lo que se buscó para volver a filtrarlo más adelante. (Variable $texto) 

En $view->exposed_data;, obtenemos rows con sus keys y cada una de ellas todos los valores de los users. 

Así que vamos a almacenar esas Keys para mas adelante saber que row quiero eliminar.

Hacemos una nueva consulta sobre los users obtenidos con el texto bien filtrado (con espacios al principio, final y ambos) : 

->condition('field_nombre_completo', $texto . ' %', 'LIKE')

->condition('field_nombre_completo', '% ' . $texto . ' %', 'LIKE')

->condition('field_nombre_completo', '% ' . $texto, 'LIKE');

por ultimo comparamos los users de esta ultima consulta con los de la primera y eliminamos del resultado de la vista los rows que contengan a esos usuarios ( sabemos su Key).

use Drupal\views\ViewExecutable;


/**
 * Implements hook_views_pre_render().
 */
function contain_word_views_pre_render(ViewExecutable $view)
{
    $filtroexpuesto = $view->exposed_data;

    if (!empty($filtroexpuesto['field_nombre_completo_value'])) { //Comprobamos si se filtró por este campo
        $textos = $filtroexpuesto['field_nombre_completo_value'];  // Guardamos el valor del filtro que se hizo
        $palabras = explode(" ", $textos); //separamos las palabras por espacios
        $uid = [];

        foreach ($view->result as $key => $item) {  // Recorremos los Rows del resultado
            $user = $item->_entity;
            $uid['uid'][(int)$user->id()] = $key; // Almacenamos su Key
            $uid['values'][] = (int)$user->id();
        }
        if(!empty($uid['values'])){
            foreach ($palabras as $palabra) {  // Recorremos los Rows del resultado
                $texto = $palabra;
                $query = \Drupal::entityQuery('user')
                    ->condition('uid', $uid['values'], 'IN');
                $group = $query->orConditionGroup()
                    ->condition('field_nombre_completo', $texto . ' %', 'LIKE')
                    ->condition('field_nombre_completo', '% ' . $texto . ' %', 'LIKE')
                    ->condition('field_nombre_completo', '% ' . $texto, 'LIKE');
                $uidfilter = $query->condition($group)->execute();  // Hacemos de nuevo el filtro sobre estos usuarios
                // con el texto filtrado por "contiene cualquier palabra"

                $uids_eliminar = array_diff($uid['values'], $uidfilter); // Guardamos las ids a eliminar

                foreach ($uids_eliminar as $item) { // Recorremos de nuevo
                    // y eliinamos los rows que no coinciden con la segunda consulta
                    $key = $uid['uid'][$item];
                    unset ($view->result[$key]);
                }
            }
        }

    }
}

Si necesitas más ayuda con cualquier tema, prueba nuestro buscador para encontrar tu solución rápidamente.

Espero que te haya servido.

Esto ha sido Drupal views Contiene cualquier palabra = No filtra bien