heramientas paginas web

Mere som dette

Paint

af Camila López

METODOLOGÍA RAD

af ANTONIO SOLIS MENDOZA

Ambientes Virtuales de Aprendizaje

af Liliana Murillo

Napoleón Bonaparte

af Mafe Cruz

heramientas paginas web

Stylebot

s una extensión para tu navegador con la que podrás modificar visualmente cualquier web a tu antojo, y luego sacar el código CSS de dicha modificación. De este modo, luego solo tendrás copiar dicho código que se ha generado y pegarlo en la hoja de estilos de tu página web.

Page Ruler

Si tus imágenes las vas a mostrar en unas dimensiones de 800x500px y las subes a 1600x1000px, estás haciendo trabajar más al navegador y a la vez que aumentas el peso de las imágenes. Esto hace que tu web cargue de forma más lenta afectando a la experiencia de usuario y, por tanto, empeorando tu posicionamiento SEO. Para que esto no ocurra, lo mejor es medir cada imagen antes de subirla. Por ejemplo, si tenemos un blog y queremos saber cuál es el espacio destinado a las imágenes de cabecera de nuestras entradas, con Page Ruler podremos saber exactamente las dimensiones y ahorrarnos unos cuantos kb por el camino.

WhatFont

WhatFont es una extensión de Google Chrome que te permitirá seleccionar un texto y saber qué tipografía está utilizando el autor. Tan simple como activar la extensión y hacer clic en un texto.

Google Fonts

¿Y cuál es la mejor herramienta para ello? Sin duda alguna, Google Fonts. Se trata de una de las mayores bases de tipografías gratuitas del mundo en la que podrás encontrar fuentes de cualquier estilo: Monospace, Handwriting, Display, Sans Serif y Serif. No importa qué estilo quieras darle a tu página web, con Google Fonts siempre encontrarás una tipografía que se adapte a ello. Para Aula CM, esta son las mejores Google Fonts que te servirán para mejorar el diseño de tu web.

Colorzilla

ColorZilla es una extensión para navegadores como Google Chrome y Mozilla Firefox muy sencilla de utilizar. Basta con que selecciones el cuentagotas que aparece al lado de la barra de direcciones y pases el ratón por encima del elemento del que quieres averiguar el color. Cuando lo tengas, ya solo tienes que copiar el código y llevártelo a los elementos de tu web que quieras colorear.

MockFlow

Pero MockFlow no solo sirve para crear bocetos de cara al cliente, también es muy útil cuando quieres reestructurar los contenidos y páginas de tu sitio web. Antes de ponerte a cambiar las cosas sin estrategia, lo mejor es construir un pequeño borrador para optimizar la estructura y potenciar las conversiones de tu web.

Iconfinder

Se trata de una base de iconos enorme en la que podrás encontrar todos los iconos del mundo en varios formatos y colores. Y lo mejor de todo es que dispone de un buscador que te permitirá filtrar los iconos por el estilo o la tipología. De tipo flat, 3d, handdrawn, de tipo cartoon, etc.

Tinypng

Es muy sencilla de utilizar, ya que solo hay que arrastrar las imágenes al recuadro que aparece en pantalla y Tinypng las optimizará automáticamente. Sin duda, toda una ventaja que tus usuarios y Google agradecerán.

Canva

Para realizar buenas imágenes para tus artículos no hace falta utilizar herramientas como Adobe Illustrator o ser experto en diseño gráfico. Existe una herramienta muy útil a la hora de crear contenidos para tu web o blog, que es gratuita y online. Se llama Canva.

Pixabay

No importa que tengas una buena estructura y unos colores muy bien elegidos, si las imágenes que has escogido no van en consonancia con el resto de la web o su calidad es mala, la impresión que se llevarán los usuarios será la de una web amateur.