>

Herramientas imprescindibles para editar páginas webs

Los clientes de PRODISNET suelen ser PYMES  o Micro-PYMES  y cuando entregamos un proyecto web surge la duda de quien mantendrá su contenido.

Una empresa de este tamaño no puede permitirse subcontratar este tema y por ello casi siempre impartimos cursos de WordPress y Joomla para que personal de estas compañías pueda realizar las tareas diarias de modificación y actualización de contenido.

Para mantener el contenido de cualquier web son necesarias una serie de herramientas y utilidades que en PRODISNET utilizamos cada dia. Este artículo pretende ayudar a los gestores de contenido web a elegir las mejores herramientas para facilitar su trabajo. Toda la información está en internet, lo sabemos, pero aquí solo pretendemos agruparla y clasificarla para facilitar su búsqueda a aquellas personas a las que «les cae»  la tarea o «el marrón» de mantener la web.

Herramientas y utilidades web

Webs de referencia

W3 School, documentación sobre CSS, HTML, JavaScript, etc.

  Enlace web

Unsplash, un increible banco de imágenes completamente free para uso particular o comercial con la única condición de hacer referencia a su autor, ¡que menos después de haber hecho una buena fotografía, tratarla y subirla a esta web!.

  Enlace web

CSS Font Stack. Aquellos que precisan un control total sobre la tipografía de una web tienen en CSS Font Stack una sencilla herramienta para generar todos los códigos CSS que definen un elemento, h1, h2, h3, p, etc.

Su uso es simple: eliges el tamaño (size), peso (weight), estilo (style), variantes (variant) y la altura de la línea (line height) ya solo tienes que copiar el código CSS y añadirlo a tu plantilla.

Ejemplo:

  p {font-family: Ubuntu;font-size: 14px;font-style: normal;font-variant: normal;font-weight: 700;line-height: 23.8px;}

En WordPress:   Apariencia -> Personalizar -> CSS Adicional

En Joomla: Extensiones -> Plantillas -> Detalles y archivos de plantilla -> css

Nota: En función del diseño de la plantilla o de algún complemento instalado  puede que tengas que poner  !important;   al final de cada atributo para asegurarte que ese es el valor que se cargará en último lugar y sobreescribirá cualquier otro valor predefinido.

Ejemplo:

h1{
font-size: 16px  !important;
}

Enlace web

Herramientas gráficas

Gimp, un editar gráfico imprescindible y 100% gratuito.

  Enlace web

InkScape, programa de diseño gráfico gratuito con una versatilidad y posibilidades que se acercan mucho a otros programas de pago como Corel Draw. Si eres ilustrador, diseñador o maquetador de webs debes al menos probarlo.

  Enlace web

Adobe Color CC, si eres de los que tienen problemas a la hora de elegir la paleta de colores de tu web esta herramienta te sacará de apuros. Creada por Adobe nos permite elegir un conjunto de colores para un proyecto web, por ejemplo primario, secundario y terciario basándonos en varios tipos de armonias: análogos, triadas, complementarios, etc.

  Enlace web

Utilidades para navegadores

ColorZilla, para los que trabajamos con Mozilla Firefox este complemento que se integra en el navegador nos permite tomar muestra de un color de una web y ver los códigos RGB y HTML correspondientes al color. También incluye su propia paleta de colores, analizador web de colores, generador de código CSS y muchas otras utilidades.

Enlace web para Mozilla | Enlace web para Chrome

 

Ruler, como medir en pixels una imagen web, un hueco entre dos párrafos o simplemente ver si algo está alineado. Herramienta simple y sencilla que se instalará como complemento en Mozilla Firefox.

Enlace web

Page Ruler, si trabajas con Chrome esta es tu herramienta para medir áreas de una web.

Enlace web

ColorZilla y Ruler para Mozilla

ColorZilla y Ruler para Mozilla