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.

Herramientas indispensables para diseño web Drupal gratuitas

¿Cuantas veces hemos nos ha gustado un color de una imagen, fuente, fondo, elemento web y hemos tenido que hacer una captura de pantalla, abrir el programa de turno, pulsar el cuentagotas y obtener finalmente el color deseado?
Colorzilla es una extensión para desarrolladores web y diseñadores gráficos con tareas relacionadas con el color, tanto de nivel básico como avanzado.Esta extensión nos será de gran ayuda por sus herramientas como selector de color, cuentagotas y muchas más herramientas de color avanzadas adicionales.

Image

Características:

• Cuentagotas: obtiene el color de cualquier píxel de la página.
• Selector de color avanzado: parecido a los que tienes en Photoshop o Paint shop pro.
• Analizador de color de la pagina web: analiza los elementos dom en cualquier página web.
• Generador de degradado css: permite crear degradados a tu gusto o algunos ya predefinidos y te muestra el código correspondiente en css. También te permite modificar la orientación e incluso el tamaño.
• Palette viewer: contiene 7 paletas preinstaladas para ayudarte a tener una idea más clara.
• Historial de color de los colores elegidos anteriormente.
• Muestra información del elemento como la clase, el nombre del elemento, la id, el tamaño, etc.
• Recuadra cada elemento con un marco para indicar de donde se obtiene el color al pasar el cursor.
• Permite manipular los colores por sus componentes Rojo/Verde/Azul o Tono/Saturaciones/Valor.
• Copia automáticamente los colores generados o mostrados al cortapapeles en CSS RGB, Hex y otros formatos.
• Macros para muestrear los colores de la página con el teclado.
• Permite obtener el color de elementos dinámicos como enlaces flotantes, etc, volviendo a muestrear el ultimo píxel muestreado.
• Selección de color en un solo clic: al hacer clic en el icono principal de la barra de herramientas de ColorZilla estará listo para elegir el color del píxel que desee. (actualmente solo en Windows).
• Permite elegir colores de objetos flash.
• Permite elegir colores a cualquier nivel de zoom.
• Permite obtener el color medio de áreas de pixeles (15 x 15 px, 120x120px, etc).

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

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

Cuantas veces trabajando en nuestro día a día, nos llevamos las manos a la cabeza al ver un conflicto en GIT? demasiadas. Por eso, que PhpStorm tenga una herramienta para resolver conflictos de GIT, tan visual y tan sencilla es lo que mas nos puede ayudar en este caso. 

Para ver como resolver conflictos de git con PhpStorm, he creado el siguiente caso: En mi rama local de Develop he querido fusionar ( merge) una rama que contenía  dos conflictos por tanto la fusión falló. 

Image

En el Fallo me ha dado los archivos exactos que generan conflicto y sus rutas, asique me dirijo al árbol de la izquierda y busco uno de esos archivos que tienen el conflicto. 

Pulsamos encima de el con el botón derecho y bajamos hasta GIT y despues Resolve Conflicts. 

Image

Se nos abrirá una ventana con todos los archivos que tienen conflictos y a la derecha tenemos 3 opciones: 

Accept Yours: Con esta opción aceptaras todos los cambios que estén en la rama local, descartando los de la rama remota. 

Accept Theirs: Con esta opción aceptaras todos los cambios que estén en la rama remota que has querido fusionar, descartando los locales. 

Merge: Con esta opción abrimos la zona de edición manual

Image

En la zona de edición manual se nos abre una ventana con tres columnas

Image

En la columna de la Izquierda te abre el archivo con los cambios de la rama develop (locales).

En la columna de la derecha te abre el mismo archivo pero con los cambios que hay en la rama remota que has intentado fusionar (ED-75). 

Y en el centro el resultado de como quedará el archivo una vez vayamos seleccionando que cambios, de cada lado, queremos. Para ello nos ayudamos de las flechas que hay al lado de los cambios. 

Hemos visto como resolver conflictos de git con PhpStorm. 

Si necesitas mas ayuda con PhpStorm, visita este enlace