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.

Una circunstancia que podemos encontrar es que cuando intentemos ejecutar un programa que requiera una versión específica de php, nos dé error porque la versión no es la adecuada, por eso necesitamos saber configurar la  versión correcta de PHP en Apache.

En relación con la instalación de Drupal, las más recientes versiones pueden o son recomendables, gestionarlas con el gestor de paquetes Composer. Composer es un gestor de paquetes php que facilita la gestión de dependencias y librerías.

La versión más reciente de Composer, en el momento de escribir este artículo la 2.1.3, requiere trabajar en un entorno con php 7.3 o superior.

Poniéndonos en un caso práctico, supongamos que hemos instalado Drupal en un servidor Debian 9, lanzamos la url de instalación y nos presenta el siguiente mensaje.

Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 7.3.0".

Podemos comprobar la versión que tenemos en php con el comando php --version.
 

root@gondor-01:/var/www/html/midrupal/web# php --version
PHP 8.0.8 (cli) (built: Jul  1 2021 16:10:07) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.8, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.8, Copyright (c), by Zend Technologies

Curiosamente podemos observar que nos indica que la versión que tenemos instalada en la 8.0.8, con lo cual, teóricamente debería dejarnos funcionar pero no es el caso.

Realmente no quiere decir que sea la versión que Apache está utilizando. Para ver qué versión está utilizando el apache, creamos un fichero php que podemos llamar miversionphp.php en el mismo directorio con el código:

<?php

phpinfo();

?>

Lanzamos la url llamando al fichero que hemos creado para que no se active el index.php y veremos un cuadro con multitud de información pero la que nos interesa es la siguiente:

Image

Realmente Apache está utilizando otra versión que tenemos instalada porque está activo el módulo de la versión 7.0. Para cambiar la versión del módulo, tenemos que deshabilitar el anterior y habilitar la versión correcta.

En Debian, para poder ejecutar los comandos de activación o desactivación de módulos de apache, tenemos que poner toda la ruta, por ello, para desactivar la versión de php7.0, escribimos:

root@gondor-01:/var/www/html/midrupal/web# /usr/sbin/a2dismod 7.0

Y activamos el módulo de php7.3:

root@gondor-01:/var/www/html/midrupal/web# /usr/sbin/a2enmod 7.3

En principio no debemos asustarnos por los mensajes de respuesta ya que son warnings que nos advierten de posibles incompatibilidades entre módulos. Realmente nos deja activado el módulo de php7.3 para el Apache. Sólo nos queda como indica en la última linea, reiniciar el apache2.

Actualizamos la página y ya aparece la versión correcta:

Image

Podemos volver a lanzar la url de instalación de Drupal. 

Esto ha sido Versión correcta de PHP en Apache, como configurarlo.

Si necesitas más ayuda, visita el blog