El diseñador web

El diseñador web

El diseñador web, es la piedra angular de un buen desarrollo web. Los buenos diseñadores son capaces de hacer que una página web retenga al visitante e incremente las visitas.

Pero, ¿Qué evolución han tenido los diseñadores web en los últimos tiempos?

El desarrollador, el diseñador web y el programador

El título nos recuerda un poco a la mítica película ‘El bueno, el feo y el malo’. Bromas aparte, atrás quedaron aquellos tiempos en que cada integrante de un proyecto se dedicaba únicamente a su trabajo.

Los diseñadores web, normalmente provenían del mundo del papel, donde realizaban sus bocetos que posteriormente trasladaban en bonitas composiciones de Photoshop. El problema es que no sabían trasladar sus obras a los framewoks con la consecuente carencia de usabilidad y limitaciones.

Lamentablemente otros diseñadores se dedicaban a mirar páginas de terceros. Las copiaban, a pesar de tener que utilizar más recursos de la cuenta. Como resultado, tenían páginas web con fallos en usabilidad, accesibilidad y muy lentas. Por desgracia, aún siguen quedando algunos diseñadores así.

Cierto es que en los comienzos del diseño web, no se tenían en cuenta muchos aspectos que hoy en día son imprescindibles: accesibilidad, posicionamiento seo, tasa de rebote, etc. Más tarde, con la fuerte influencia del posicionamiento orgánico en el listado de los resultados de los buscadores, se daría un giro drástico.

diseñador web, evolución

Nueva generación de diseñadores web y programadores

En la actualidad el nuevo diseñador web así como programadores conocen muy bien el entorno en el que trabajan. Programadores y desarrolladores, además de conocer perfectamente sus herramientas y lenguajes, tienen que conocer los principios básicos del diseño web.

Es fundamental que tanto diseñador como desarrollador conozcan en profundidad conceptos como:

  • Arquitectura de la información.
  • Usabilidad.
  • Accesibilidad.
  • Posicionamiento seo.
  • Seguridad.

Pues dichos principios deben ser tenidos en cuenta desde el principio del planteamiento de un nuevo proyecto.

No son conocimientos que se adquieran rápidamente, precisan de tiempo y amplia experiencia. Ser un experto en accesibilidad y/o posicionamiento seo requiere de mucha dedicación, formación y trabajo.

Trabajo de diseñador web

Como resultado de una buena aplicación de lo expuesto, tendremos la famosa UX (experiencia de usuario). Se trata de valorar como se sienten las personas al operar con una web (contentas, frustradas, etc). Es importante analizar el comportamiento de los usuarios, como acceden a la información, por donde abandonan y muchos más procesos.

¿Qué hace un diseñador web?

Ahora que sabemos cómo ha evolucionado el diseñador web, cabe resaltar qué función realiza hoy día.

Además de conocer los conceptos expuestos, un diseñador web tiene que conocer con exáctitud el código que emplea en cada proyecto. Dependiendo de la naturaleza de este o sus objetivos se deberá emlear un sistema u otro. En líneas generales para una web corporativa, tienda online o buscar presencia en intenet, el diseñador empleará PHP. Es el lenguaje por excelencia de la web, al tratarse de un sistema interpretado, sirve las páginas con mucha velocidad.

Seguramente, en muchos casos, el cliente contratará un diseñador para WordPress u otro gestor de contenidos. Si es así, igualmente, tiene que tener conocimienos del código, a pesar de que estos gestores facilitan mucho el desarrollo. Siempre será más fino a la hora de buscar resultados un experto en WordPress que conozca el código en profundidad, en lugar de un simple gestor de la herramienta.

Proceso para un diseño web perfecto

Lo primero de todo es acercar a cliente y diseñador con el fín de que este último se empape bien de la idea del proyecto.

Según la envergadura del proyecto, es posible que se dedique más de un día a mantener reuniones (las partes activas).

El siguiente paso, buscar ideas que aporten utilidad al diseño. Un buen comienzo es apoyarse en el diseño corporativo del logo o marca. Siempre que sea posible el cliente facilitará al diseñador la guía de estilo.

Una vez identificado el objetivo fundamental de la página web, el diseñador continuará con el tema de inicio.

Al tener presente el tema principal, las siguientes decisiones básicas serán fácilmente asimilables, colores para los fondos, tipografía, etc.

Además, es de mucha ayuda, tener lo antes posible un mapa completo de todas las páginas que conformarán el sitio web.

Según el diseño web elegido, se priorizará comenzar con la cabecera, cuerpo y pie. Si bien algunos diseñadores comienzan con subpáginas, la norma suele ser comenzar con la página de inicio.

Tanto diseñador como desarrollador y/o programador establecerán los criterios para mostrar la información. Esta es una parte muy importante, ya que condicionará la velocidad de trabajo.

En WebReunidos, tanto diseñadores como desarrolladores web, hemos pasado por un amplio proceso de aprendizaje. Siempre cerca de la actualidad y adaptándonos a lo evolución que va marcando organismos como el World Wide Web Consortium (W3C) y las Directiva del Parlamento Europeo y del Consejo Europeo en cada momento. Siempre con la mirada fija en la constante evolución de Google y sus algoritmos para SEO.

Conscientes del valor que tiene la experiencia y los conocimientos adquiridos, estamos encantados de aplicarlos a cada desarrollo y diseño web  con profesionalidad y entusiasmo.

Qué es la tasa de rebote y cómo mejorarla

Qué es la tasa de rebote y cómo mejorarla

La tasa de rebote, dos simples palabras que pueden significar el éxito o el malestar de una página web.

Evidentemente cuando diseñamos una página, todos queremos que el usuario pase el mayor tiempo posible en ella y, si además, encuentra lo que quiere mejor. Sabemos que al final dejará de ver la página, pero si queremos que su experiencia haya sido grata y vuelva o hable bien.

Pero antes de llegar a un contenido perfecto, respondamos a una pregunta.

Tasa de rebote

¿Qué es la tasa de rebote?

Definimos de manera genérica la tasa de rebote como el porcentaje de usuarios que abandonan una página web sin realizar ninguna acción en ella. Podría ser el caso de completar un simple formulario.

En general una tasa de rebote alta es un dato malo y al contrario, una tasa de rebote baja es un buen dato.

La tasa de rebote es uno de los factores que mide Google Analytics y en los que se basan otras herramientas de análisis.

¿Entonces es malo una tasa de rebote alta?

Todo depende del objetivo de la página, y repito, la página, no el sitio web. Tener una tasa de rebote alta en todo el sitio no es una información muy clara. Puede indicar que los usuarios se encuentran con la información que buscan y se marchan. Cuando se muestra la media, saber que tiene una tasa de rebote de más del 70% es relativamente inútil.

¿Por qué es inútil?, bien no sabemos realmente como llegó el usuario, que intención tenía, es más, podría tratarse según que web, a priori de un problema de SEO negativo por parte de la competencia. En fin, muchos son los factores, lo mejor en este caso es recurrir a Google Analytics para estudiar la realidad de cada página.

What is bounce rate

Como ya hemos dicho, al entrar en Google Analytics, encontramos un dato genérico que en la mayoría de casos no nos aporta solución al problema.

Es el momento de profundizar para encontrar conclusiones prácticas para cambiar la página o páginas afectadas.

La intención de búsqueda

Aquí está la clave, la intención de búsqueda es el motivo por el que un usuario llegó a tu sitio web y no a otro.

Si un usuario busca en Google mi piel se pone roja al salir de la ducha y acaba en una web donde se vende pintura, esa página no está trabajando bien el objetivo para la intención de búsqueda.

Ahora que sabemos esto, parece más sencillo el camino para arreglar la tasa de rebote. Si los usuarios buscan mi piel se pone roja y terminan en mi tienda de venta de cremas, entonces el objetivo está cumplido.

Esto significa que mi página o mejor dicho, el contenido de mi página es un incentivo para el visitante. El enlace ya puede provenir de Google, un blog o cualquier otra publicación.

Cómo puedo analizar la tasa de rebote de una forma práctica

Llegados a este punto de comprensión lo mejor será ir al grano.

Vamos a ir a Audiencia> Flujo de usuarios.

Tasa de rebote en Google Analytics

Añadimos un filtro para visualizar solo las sesiones con rebote.

Mejorar tasa de rebote

Una vez tengamos esto, vamos a ir pasando el cursor por las diferentes áreas y observaremos los porcentajes de visitas y su consiguiente abandono. Como ya hemos mencionado, es posible que el objetivo se cumpliese al visitar la página, pero si evaluamos que no es así, entonces tendremos que pensar que contenido falta y trabajar en ese sentido.

Soluciones prácticas para reducir la tasa de rebote

En la medida de lo posible comunica con el usuario y capta las necesidades, de esta forma adaptarás el contenido a esas necesidades.

Otro factor es trabajar la velocidad de carga de la página, si la espera es superior a 3 o 4 segundos es posible que el usuario abandone la sesión.

Optimiza imágenes, carga de scripts, compresión de archivos .css, etc.

Realiza las famosas ‘call to action’, incluye llamativos enlaces o banners a otras secciones.

Al final se trata de tener una arquitectura de la comunicación capaz de retener al usuario el tiempo significativo para su objetivo.

Si tu web tiene mucho tiempo, lo mismo es hora de realizar una renovación de imagen, confía en nuestros servicios de diseño web para orientar el desarrollo a posicionamiento SEO y mejorar la tasa de rebote.

El título de las páginas web

El título de las páginas web

Te contamos la importancia que tiene el título de las páginas web para usuarios y buscadores. Definimos el buen uso de la etiqueta HTML <title> en relación a estas áreas: Usabilidad web y posicionamiento SEO.

La etiqueta <title>, que la utilizaremos para dar un título a cada página web, está situada en la cabecera <head> del código:
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Documento sin título</title>
</head>

En relación a la usabilidad, la elección de un título apropiado es uno de los principales aspectos a tener en cuenta porque:

  • nos servirá para identificar una página web de otra.
  • tendremos un título identificativo para aquella página que queremos agregar a favoritos.
  • facilitará enormemente a nuestros visitantes tanto el uso de nuestra web como el saber dónde está y a qué contenidos podrá acceder -Servicios, Accesibilidad, Inicio, etc.-.

Respecto a los buscadores, al realizar una búsqueda, los motores de búsqueda nos muestra en sus resultados una relación de títulos, siendo por ello, la primera información que reciben los usuarios y, si se ha realizado buenas prácticas de posicionamiento SEO,  nuestro título lo podremos encontrar entre los primeros resultados de la búsqueda.

Así mismo, en relación a los navegadores web nos mostrará un título en la barra de herramientas del navegador

Cada una de las páginas web de nuestro proyecto deberá tener un título único e identificativo.

El título web

Qué es la etiqueta título o title

Para comenzar con qué es una etiqueta de título y por qué es importante para el SEO, comencemos con un ejemplo.

Digamos que soy un principiante en programación, y no tengo una idea clara de cómo crear un buscador en PHP para una web, así que recurro a Google y escribo mi pregunta, «buscador php»

Con mi pregunta, es probable que no esté buscando «como crear un buscador en PHP» o «programar un buscador». Claro, ambos títulos tienen una de las palabras clave «php» en ellos, pero pueden o no responder a mi pregunta directa.

Google, interpreta mi intención de búsqueda y presenta estos resultados:

título de una página web

El título de un sitio web, o meta etiqueta de título, es un elemento HTML que indica el contenido de una página web. El título de un sitio web es muy útil  para los usuarios así como para los motores de búsqueda.

El título de una página web forma parte de la descripción del contenido incluida en los SERP, condicionará en gran medida al usuario para que haga clic.

Qué longitud tiene que tener el título

Este es un dato para el que ciertamente los expertos no terminan de ponerse de acuerdo. Bueno, por lo menos en algo estamos de acuerdo, no tiene que ser corto.

Siga estas recomendaciones:

  1. Títulos concisos, pero no demasiado.
  2. Longitud entre 50 y 70 caracteres.
  3. Base el ancho en unos 600 píxeles.

Tenga en cuenta que si un título es demasiado largo, Google lo acortará, y perderá sentido.

el título de una página web

Errores comunes con el título de una página web

Una vez que ya sabemos la importancia del título de una página web de cara a buscadores e internautas, debemos evitar ciertos errores:

  • Ausencia de título
  • Títulos cortos o demasiado largos
  • Evitar palabras spam
  • Evitar títulos sensacionalistas sin relación con el contenido
Posicionamiento SEO gratis

Posicionamiento SEO gratis

Te vamos a enseñar 10 simples tareas básicas, de ‘posicionamiento seo gratis’, con las que Google te abrirá las puertas y no te va a generar errores al indexar una página web.

Posicionamietno SEO gratis

Quizá el título del artículo resulte un poco chocante, podríamos haberlo cambiado por ‘posicionamiento seo casero’,  ‘posicionamiento seo mínimo’, por no decir ‘que menos que hacer algo en SEO para que tu web tenga posibilidades de aparecer en Google’.

Y es que para los que trabajamos en este mundo es muy chirriante ver como aun hoy día existen muchas páginas web con errores básicos como las direcciones amigables o velocidades de carga lentas.

Este artículo no pretende ser el santo grial del posicionamiento, un experto en SEO sabe que se requiere de un bagaje largo en conocimiento y experiencia para poder moverse dentro del tejido competitivo de la red. Aquí encontrarás una guía práctica para dar visibilidad y así tener presencia en internet.

Cómo hacer posicionamiento seo gratis

Índice de contenidos

  1. Planifica estructura pensando en seo
  2. Alojamiento
  3. Instalación de WordPress
  4. Tema hijo
  5. Plantilla
  6. Contenido, texto e imágenes
  7. Planificador palabras clave y Google
  8. Usabilidad
  9. Accesibilidad
  10. Alta en google

Planifica estructura pensando en seo

Diseña la usabilidad web del sitio, de tal manera que la información sea accesible en uno o dos clics como máximo.

Piensa que el internauta es un usuario al volante de un vehículo que circula por una autovía y no puede detenerse a ver con exactitud los mensajes de los carteles. La información tiene que ser accesible de un vistazo, así se ofrecerá una toma de decisión rápida.

Posicionamiento SEO. Trabajos

Alojamiento

Si la usabilidad es fundamental para dar efectividad a la web, el tiempo con el que se muestra la información lo es aún más, ya sea texto, imágenes o vídeos.

La velocidad de carga está en relación a alojamiento web en tanto este disponga de tecnología actual, discos duros rápidos, tipo SSD, capacidad de memoria, sistema cache efectivo, etc.

Comprueba las características de tu alojamiento y si no son las adecuadas es hora de ir buscado otro proveedor para hosting.

Instalación de WordPress

Vamos a suponer que el posicionamiento se va a realizar sobre el popular y hoy día más extendido gestor de contenidos.

Si bien una instalación del cuore de WordPress es sencilla, hay que tener cuidado y considerar los aspectos de seguridad. Personalmente prefiero descargar la versión de la página oficial https://es.wordpress.org/ frente a las opciones que suelen dar los propios alojamientos para instalación, ¿por qué?, estos últimos suelen condicionar las opciones de instalación así como el propio escritorio de WordPress.

Otro punto importante dentro de la instalación es atender a la seguridad de la base de datos, no deje de visitar el enlace anterior.

Tema hijo

Este es sin duda el aspecto más importante a la hora de instalar WordPress, ¿qué es un tema hijo?, en su definición se dice que un tema hijo hereda la funcionalidad del padre, a groso modo con esto conseguimos poder personalizar un proyecto sin que afecte a la funcionalidad de WordPress así como a sus futuras actualizaciones.

Plantilla

Plantillas hay miles, el propio WordPress en su página oficial ofrece muchas totalmente gratis, si bien algunas están condicionadas en su funcionamiento.

La elección de una plantilla va a condicionar la evolución futura del proyecto así como la gestión de su contenido. Es importante elegir una plantilla que permita la adaptación a los constantes cambios de los buscadores, así como la adaptación a las nuevas tendencias en materia de diseño. Además hay que elegir una plantilla amigable a la hora de trabajar, de esta manera la subida de contenidos será cómoda y sencilla para usuarios sin experiencia.

Instalación WordPress para posicionamiento seo

Planificador de palabras clave y Google

Planifica las palabras clave que van a ser empleadas. El planificador de palabras clave de Google Adwords es un recurso fundamental para realizar un análisis de las principales keywords para nuestra web. Tienes la opción de segmentar palabras en relación a términos comunes, además tienes la localización de dichas búsquedas.

Podrás segmentar las keywords en base a una serie de términos comunes, así como la localización de dichas búsquedas y la tendencia.

Un método muy efectivo es construir para long tail, con lo que también se pueden encontrar similitudes.

Accesibilidad

Una página web accesible es una página que va a llegar a más público, además facilita la navegación a todos y de paso Google es algo que premia.

Hablar de accesibilidad web llevaría cientos de páginas, hay toda una organización alrededor como es el W3C, además cada país tiene su propia normativa.

Así que cuando diseñes, piensa si la información que ofreces podrá ser universal para todos. Ofrece alternativas con descripciones correctas para imágenes, subtítulos para vídeos, semántica, tipografía, etc. Si quieres ampliar información visita accesibilidad web AA y su importancia.

Alta en google

Una vez tenemos nuestro proyecto web, queda algo muy importante, comunicar a Google que tenemos una web preparada para ser indexada.

Una gestión completa en Google requiere de aprendizaje y experiencia además sobre todo mucho tiempo que dedicar.

Lo mínimo para tener visión es:

  • Abrir una cuenta en Google.
  • Verificar la propiedad del sitio web.
  • Enviar el Sitemap o catálogo de páginas así como el Robots.
  • Referenciar cada página.

Como ya se ha dicho anteriormente, este no es el santo grial de técnicas a aplicar, pero si quieres tener un mínimo de presencia te va a servir de gran ayuda, y lo mejor es que se trata de posicionamiento seo gratis.

Crear buscador php web sencillo

Crear buscador php web sencillo

Tutorial para crear un buscador PHP web muy sencillo con MySQL

Buscador PHP sencillo para MySQLUna de las utilidades más importantes que debe tener un desarrollo web cuando trabaja con bases de datos, es un buscador. En este artículo vamos a explicar cómo crear un buscador php web sencillo que nos permita localizar fácilmente un contenido.

Si bien un diseño web tiene que ser muy atrayente visualmente a la vez que usable y efeciente, este se va a completar con un buscador.

Lo más eficiente cuando se trabaja con PHP es utilizar la popular base de datos MySQL, para más información sobre qué motor de MySQL utilizar visita el artículo MyISAM vs InnoDB, descubrirás las principales diferencias y ventajas de un modelo u otro.

Además es cierto que hay muchas formas de gestionar la comunicación con la base de datos, podría ser con leguaje estructurado, con programación orientada a objetos, en un solo archivo, etc., para nuestro ejemplo vamos a definir la conexión y dos funciones en la misma página.

Si estás interesado en el mundo del desarrollo web no dejes de visitar nuestro área de Programación y desarrollo web profesional con todos los servicios disponibles. Ahora os dejo con este buscador que es de gran ayuda para todos, principiantes y desarrolladores.

La base de datos con la que trabajamos este buscador es la de provincias (de España).

<?php

// Primero definimos la conexión a la base de datos

define(‘HOST_DB’, ‘localhost’);

//Nombre del host, nomalmente localhost

define(‘USER_DB’, ‘root’);

//Usuario de la bbdd

define(‘PASS_DB’, »);

//Contraseña de la bbdd

define(‘NAME_DB’, ‘spainprov’);

//Nombre de la bbdd

?>

Formulario básico del buscador PHP web

Ahora toca definir un formulario donde poder realizar nuestras búsquedas o consultas.

<form id=»buscador» name=»buscador» method=»post» action=»<?php echo $_SERVER[‘PHP_SELF’] ?>»> <input id=»buscar» name=»buscar» type=»search» placeholder=»Buscar aquí…» autofocus > <input type=»submit» name=»buscador» class=»boton peque aceptar» value=»buscar»> </form>

Verificar la información recibida del formulario y seguimos los siguientes pasos:

  1. Primero controlamos que recibimos un post
  2. Eliminamos espacios en blanco a izquierda y derecha de la cadena a buscar
  3. Si el formulario de envió en blanco, lanzamos el aviso correspondiente
  4. Una vez nos aseguramos que se ha enviado una cadena para consultar, establecemos la conexión
  5. Montamos la consulta SQL, en nuestro ejemplo usamos un comparador LIKE para conseguir el máximo de información
  6. Si el existe un resultado, procedemos a almacenar la información necesaria
  7. Además si no hay datos, lanzamos el aviso correspondiente
  8. Finalmente cerramos la conexión y mostramos el contenido obtenido

Podéis ver el funcionamiento online del buscador web PHP, ver demo

Además puedes completar y mejorar el funcionamiento del buscador aplicando una función autocomplete que encontrarás en el tutorial Autocomplete PHP, MySQL y Jquery.

En definitiva y resumiendo mucho, este sería el código completo como resultado de nuestro tutorial buscador web PHP con MySQL.

Ten en cuenta que la conexión a base de datos puede cambiar en cualquier momento dependiendo de la versión que el servidor tenga de PHP, para más información consulta la web oficial de PHP.

Código fuente completo para desarrollar un buscador web PHP con MySQL

<?php

// AUTHOR: webreunidos.es

// Primero definimos la conexión a la base de datos

define(‘HOST_DB’, ‘localhost’); //Nombre del host, nomalmente localhost

define(‘USER_DB’, ‘root’);

//Usuario de la bbdd

define(‘PASS_DB’, »);

//Contraseña de la bbdd

define(‘NAME_DB’, ‘spainprov’); //Nombre de la bbdd

// Definimos la conexión

function conectar(){

global $conexion;

//Definición global para poder utilizar en todo el contexto

$conexion = mysql_connect(HOST_DB, USER_DB, PASS_DB) or die (‘NO SE HA PODIDO CONECTAR AL MOTOR DE LA BASE DE DATOS’);

mysql_select_db(NAME_DB) or die (‘NO SE ENCUENTRA LA BASE DE DATOS ‘ . NAME_DB);

}

function desconectar(){

global $conexion; mysql_close($conexion);

}

//Variable que contendrá el resultado de la búsqueda

$texto = »;

//Variable que contendrá el número de resgistros encontrados

$registros = »;

if($_POST){

$busqueda = trim($_POST[‘buscar’]);

$entero = 0;

if (empty($busqueda)){

$texto = ‘Búsqueda sin resultados’;

}else{

// Si hay información para buscar, abrimos la conexión

conectar();

mysql_set_charset(‘utf8’);

// mostramos la información en utf-8

//Contulta para la base de datos, se utiliza un comparador LIKE para acceder a todo lo que contenga la cadena a buscar

$sql = «SELECT * FROM prov_tab WHERE provincia LIKE ‘%» .$busqueda. «%’ ORDER BY provincia»;

$resultado = mysql_query($sql); //Ejecución de la consulta

//Si hay resultados…

if (mysql_num_rows($resultado) > 0){

// Se recoge el número de resultados

$registros = ‘<p>HEMOS ENCONTRADO ‘ . mysql_num_rows($resultado) . ‘ registros </p>’;

// Se almacenan las cadenas de resultado

while($fila = mysql_fetch_assoc($resultado)){

$texto .= $fila[‘provincia’] . ‘<br />’;

}

}else{ $texto = «NO HAY RESULTADOS EN LA BBDD»;

}

// Cerramos la conexión (por seguridad, no dejar conexiones abiertas) mysql_close($conexion);

}

}

?>

<!DOCTYPE html>

<html lang=»es-ES»>

<head>

<meta charset=’utf-8′>

</head>

<body>

<h1>Ejemplo de buscador: by <a href=»https://webreunidos.es» title=»Más tutoriales en nuestra web» target=»_self»>webreunidos.es</a></h1>

<form id=»buscador» name=»buscador» method=»post» action=»<?php echo $_SERVER[‘PHP_SELF’] ?>»>

<input id=»buscar» name=»buscar» type=»search» placeholder=»Buscar aquí…» autofocus >

<input type=»submit» name=»buscador» class=»boton peque aceptar» value=»buscar»>

</form>

<?php

// Resultado, número de registros y contenido.

echo $registros; echo $texto;

?>

</body>

</html>

Principios básicos fundamentales del Diseño Web

Principios básicos fundamentales del Diseño Web

Al igual que la frase «la belleza está en el ojo del espectador», la eficacia de un diseño web será  juzgada por los usuarios de la página web y no por los propietarios. Hay muchos factores que afectan a la usabilidad de un sitio web, y no se trata sólo de la forma (lo bien que se ve), sino también el funcionamiento, ¿es fácil de usar?, esta respuesta la encontramos por los principios básicos fundamentales del diseño web.

Introducción

Los sitios web que no están bien diseñados tienden a funcionar mal y tienen métricas de Google Analytics pésimas (por ejemplo, altas tasas de rebote, bajo tiempo en el lugar, pocas visitas por página y bajas conversiones).

¿cómo se hace un buen diseño web?

A continuación exponemos un decálogo muy resumido con los principios básicos de diseño web que harán que tu proyecto sea estéticamente agradable, fácil de usar, atractivo y eficaz.

El propósitoPrincipios básicos fundamentales del diseño web

Un buen diseño web siempre responde a las necesidades del usuario. Hay que conocer muy bien que interacción realizarán los visitantes, por ejemplo en busca de información, entretenimiento, algún tipo de interacción especial, o para realizar transacciones con tu  negocio. Cada página de tu sitio web debe tener un propósito muy claro, y así satisfacer una necesidad específica para sus usuarios de la manera más eficaz posible.

La comunicación

Los internautas tienden a querer la información de forma rápida, por lo que es importante comunicar con claridad, y hacer que su información sea fácil de leer y digerir. Algunas tácticas eficaces que incluir en tu diseño web son: organizar la información usando títulos y subtítulos, utilizando viñetas en lugar de oraciones largas con mucho texto, y por favor, suprimir la paja con la que hacer ratio de texto.

Que tipografía aplicar

En general, las fuentes Sans Serif como Arial y Verdana son más fáciles de leer en línea (tipos de letra Sans Serif son fuentes de apariencia contemporánea sin acabados decorativos). El tamaño de letra ideal para leer fácilmente en línea es entre 14px y 16px y se adhieren a un máximo de 3 tipos de letra en un máximo de 3 tamaños de punto para mantener tu diseño aerodinámico.

Uso de colores

Una paleta de colores bien pensada puede recorrer un largo camino para mejorar la experiencia del usuario. Colores complementarios crean el equilibrio y la armonía. El uso de colores contrastantes para el texto y el fondo hará que la lectura más fácil en el ojo, además cumpliremos objetivos de cara a la accesibilidad web. Colores vibrantes crean emoción y deben utilizarse con moderación (por ejemplo para los botones y acciones). Por último, pero no menos importante, el espacio en blanco y espacio negativo es muy eficaz para dar a tu sitio web un aspecto moderno y ordenado.

Uso de imágenes

Una imagen vale más que mil palabras, y elegir las imágenes correctas para tu sitio web puede ayudar con el posicionamiento de marca y conectar con su público objetivo. Si no tienes fotos profesionales de alta calidad en la mano, considera la compra de fotos, hay muchas empresas que tienen miles de fotos en stock, a que aparten la mirada de tu sitio web. Considera también inclusión de infografías, videos y gráficos, verás cómo éstos pueden ser mucho más eficaces en la comunicación que incluso el fragmento de texto mejor escrito.

Muy importante es realizar un correcto tratamiento de las imágenes a subir. Si bien buscamos buena calidad, esta hay que compensarla con una velocidad de carga efectiva. No solo hay que confiar la carga a un plugin que nos auto convierta la imagen a un formato y peso determinado, es fundamental dedicar tiempo a una revisión manual de cada imagen.

Usabilidad o Navegación

Se trata de analizar lo fácil que es para la gente tomar acción en tu sitio web y comprobar cómo se mueven. Algunas tácticas para la navegación efectiva incluyen una jerarquía de página lógica, usando migas de pan, el diseño de los botones que facilite el encuentro con el clic, y aplicar la ‘regla de los tres clic «, que significa que los usuarios podrán encontrar la información que están buscando dentro de tres clics como máximo.

Diseña basándote en el uso de ​​cuadrícula

Colocar contenido al azar en tu página web puede terminar con un aspecto desordenado que además es desordenado. Diseños basados ​​en cuadrícula organizan el contenido en secciones, columnas y cajas que se alinean y proporcionan armonía y equilibrio, lo que conduce a un diseño con un aspecto optimizado y que además proporciona confianza al visitante.

El patrón de diseño «F»

Estudios de seguimiento de los ojos han identificado que la gente explora las pantallas de ordenador en forma de «F». La mayor parte de lo que la gente ve es en la parte superior e izquierda de la pantalla y el lado derecho de la pantalla se ve raramente. En lugar de tratar de forzar el flujo visual del espectador, sitios web diseñados con eficacia trabajarán con el comportamiento natural de un lector y mostrarán la información en orden de importancia (de izquierda a derecha, y de arriba abajo).

El tiempo de carga

Todo el mundo desprecia un sitio web que tarda mucho tiempo en cargar. Sigue los consejos de los expertos para que los tiempos de carga de tus páginas sean más eficaces, estos se ven afectados desde por el tipo de imágenes, procesos, consultas o interacciones con las bases de datos y mucho más hasta por el servicio del alojamiento contratado (pilar de tu sitio web).

Para que la página responda con eficacia es importante tener un buen mantenimiento web constante. De esta manera aseguramos siempre el funcionamiento y tendremos actualizados nuestros sistemas de caché para la optimización del tiempo de carga.

Diseña para que sea amigable a móviles  Diseño web móvil

Es ya un lugar común para sitios web de acceso desde múltiples dispositivos con múltiples tamaños de pantalla, por lo que es importante tener en cuenta si tu sitio web es amigable a móviles. Si tu sitio web no tiene versión para móvil, puedes reconstruirlo en un diseño adaptable (esto significa que tu sitio web se ajustará a diferentes anchos de pantalla) o se puede construir un sitio móvil dedicado (un sitio web independiente optimizado específicamente para los usuarios de móviles). Otra técnica muy recomendada es ofrecer la versión móvil a través de técnicas CSS.

Mantenimiento web

Mantenimiento web

Mantenimiento web y su importancia

Cuando damos por finalizado el proceso de diseño y creación de un nuevo sitio web no debemos relajarnos porque en ese preciso momento comienza una nueva etapa que resulta crucial para el funcionamiento de tu web: el mantenimiento web.

Cuando hablamos de mantenimiento web no solo hablamos del mantenimiento y actualización del contenido (texto, imágenes, vídeos, enlaces rotos, etc) sino que también hablamos del mantenimiento de código HTML o CSS.

Mantenimiento web, imagenMantenimiento código HTML, CSS

La revisión del correcto funcionamiento de tu página web pasa por analizar y controlar la parte de código, es un factor muy importante del que cuidan los webmasters.

En algunas ocasiones, resulta necesario modificar alguna configuración a nivel de código, revisarlo y analizarlo para detectar problemas de seguridad e incluso configurar a nivel de servidor para mejorar algún aspecto interno, como puede ser el tiempo de carga.

Además, revisar periódicamente el conjunto de archivos contenidos en tu página web y las bases de datos que lo conforman también resulta especialmente importante a la hora de detectar cualquier anomalía.

Actualización de plugins en WordPress

En el caso de las páginas web creadas a partir de la plataforma WordPress, la más popular en la actualidad, el mantenimiento web pasa necesariamente por la actualización de los plugins, plantillas y de la versión WordPress que se actualiza cada cierto tiempo. Este tipo de actualizaciones previenen brechas de seguridad y vulnerabilidades que pueden poner en peligro tu sitio web y, además, suelen incluir mejoras reales respecto de versiones anteriores.

Algunos de los plugins que destacan sobre el resto y que resulta primordial mantener actualizados son aquellos que tienen como función mejorar el SEO de nuestros contenidos. Los más conocidos son SEO by Yoast y All in One SEO Pack.

Ventajas del mantenimiento de contenidos web

  • Puedes eliminar los enlaces rotos que resultan tan molestos para el lector.
  • Puedes mantener temas actualizados. Si escribiste sobre ellos en el pasado y se produce una novedad normativa o similar, lo actualizas y lo adaptas para que el posicionamiento se vea afectado y puedas atraer nuevas visitas hacia un artículo antiguo.

En definitiva, el mantenimiento de contenidos web es muy importante para mantener el posicionamiento web e incluso para mejorarlo ante determinadas novedades.

Mantenimiento web: las claves de su eficiencia

En definitiva, y resumiendo todos los temas tratados, un mantenimiento web de excelencia debe pasar necesariamente por el control y análisis estricto de la web. Para ello, es necesario:

  • Realizar copias de seguridad que nos servirán en el caso de que se produzca algún fallo. Es muy importante conservar todo el contenido web.
  • Actualizar y controlar todos los componentes de tu web: plugins y plantilla, sobre todo.
  • Analizar el funcionamiento general de la web: número de visitas, tiempo de carga, anormalidades en posicionamiento, etc.
  • Mantener actualizados los contenidos. Por ejemplo, si aparece una nueva normativa de la que has hablado anteriormente y se producen novedades respecto de lo que escribiste en su día no está de más incluirlo en tu artículo.

En este punto también es de vital importancia analizar los enlaces salientes para comprobar que no existan enlaces rotos a páginas web que ya no existen.

Realizar un mantenimiento web de código y un mantenimiento web de contenidos es una tarea que todo webmaster debe implementar pero, a veces, por falta de conocimientos o experiencia, no se lleva a cabo y terminan apareciendo los primeros problemas. Si es tu caso, consulta con un especialista y déjate aconsejar para que tu página web no deje de funcionar correctamente en ningún momento.

Asociación Europea de Economía y Competitividad (AEDEEC)

Asociación Europea de Economía y Competitividad (AEDEEC)

La Asociación Europea de Economía y Competitividad (AEDEEC) ha premiado a WebReunidos desarrollo y diseño S.L. con La Medalla de Oro al Mérito en el Trabajo, en reconocimiento a su trayectoria profesional en el sector del diseño de páginas web, marketing online y posicionamiento Web.

La ceremonia de imposición de medallas tuvo lugar, en una Cena de Gala celebrada en el Hotel NH Collection Eurobuilding de Madrid.

Una de las mejores empresas de diseño web en España

El presente galardón reconoce a WebReunidos como una de las mejores empresas de diseño web en España. El premio concedido supone un reconocimietno especial a la gestión realizada.

WebReunidos es una empresa que apuesta por la calidad del trabajo así como de la formación integral de sus componentes.

Las fundadoras de la empresa, reciben premio

Medalla de Oro al Mérito en el Trabajo

La AEDEEC reconoce con dicho galardón ‘el éxito de las empresas con una trayectoria ejemplar a nivel nacional y/o europeo y que realizan prácticas e iniciativas que apoyan el espíritu y conciencia empresarial. Además de la concesión del galardón, la asociación hace entrega de un certificado y un sello de calidad que refleja la ética, profesionalidad y resultados de la empresa.’

El solemne evento fue conducido por la periodista Ana García Lozano y el galardón fue impuesto por el Vicepresidente de la Asociación D. José Luis Barceló Mezquita (El Mundo Financiero).

Además, dio la coincidencia de que este año ha sido nombrado como Consejero de Honor de la Asociación Europea de Economía y Competitividad a D. Kike Sarasola, por su brillante trayectoria como Empresario y Fundador de la cadena hotelera Room-Mate Hoteles.

Incluimos a continuación palabras de agradecimiento de WebReunidosUna de las CEO durante la gala

“En primer lugar dar las gracias a la prestigiosa Asociación Europea de Economía y Competitiva por este galardón del que nos acaban de hacer entrega.

Para WebReunidos, como pequeña empresa que somos, nos honra este reconocimiento a la labor que venimos realizando desde que iniciamos este proyecto, y nos anima a seguir en esta línea.

Bajo nuestro lema ‘tu éxito, nuestro objetivo’, lo que pretendemos es que tanto empresas como profesionales que contratan nuestros servicios, tengan su mejor presencia en internet.

Porque entendemos, que la mejor tarjeta de presentación de una empresa, y más hoy en día, es su marca digital, su posición en internet a través de su web  o redes sociales.

Estamos en la era de las tecnologías, en la era de Internet, en donde si no estás no existes. Por ello, creemos que es muy importante tener de una página web dinámica, accesible, posicionada y con un diseño atractivo. Ese es nuestro trabajo, a lo que nos dedicamos con empeño y tesón.

Y ya, por último, y no por ello menos importante, agradecer a nuestro personal  y colaboradores su profesionalidad, dedicación y entrega en el desarrollo de sus tareas y proyectos. Y, sobre todo, a nuestros clientes por la confianza depositada en nosotros a lo largo de este tiempo.

Muchas gracias.”

Mª Carmen Hernández – Belén Recuero

Socias Fundadoras WebReunidos S.L.

Certificado AEDEEC

Cómo hacer una página web popular

Cómo hacer una página web popular

Muchas son las preguntas y dudas que surgen cuando un emprendedor decide tener presencia en internet. Por supuesto lo primero que piensa es: ‘necesito una página web’. Pero, ¿cómo hacer una página web popular?, ¿qué tiene que tener un sitio web para ser exitoso?

Vamos a dar respuesta de forma muy concisa a esta pregunta. Nos vamos a apoyar en 5 factores como pilares principales de una buena web.

Cómo hacer una web popular

5 Factores para una página web exitosa

SEO

Lo situamos en primer lugar, ya que en internet como ya es popularmente conocido, ‘si no apareces no existes‘. Y hoy por hoy, la existencia pasa por aparecer en los primeros puestos de Google. Si bien es imposible tener todo el proyecto en las primeras posiciones, por lo menos tenemos que tener algunas páginas.

Así que es importante encontrar a un desarrollador que programe desde la estructura pensando en posicionamiento SEO. Así es como se ahorrarán esfuerzos y costes en el futuro.

Como base del posicionamiento web hay que tener muy claro que lo primero que tiene que dar una respuesta optima es el alojamiento web o hosting.

Responsive Web Design (RWD)

Al igual que se busca presencia en los resultados de Google, es deseable llegar al máximo público. Cada vez más los internautas usan distintos dispositivos móviles.

Un diseño web optimizado debe responder a las exigencias de cada dispositivo además de evolucionar la adaptación a las futuras demandas.

Es muy importante elegir un sistema que facilite la evolución según avanza la tecnología.Web exitosa. Imagen

Accesibilidad

Al igual que en SEO es recomendable que tanto desarrollador como diseñador tengan amplios conocimientos en accesibilidad. Al igual que queremos tener presencia en buscadores y que nuestra web se muestre en dispositivos móviles, es imprescindible llegar a todo el público y ahí es donde tenemos que prestar atención a la accesiblidad.

Como ya hemos dicho en otras ocasiones, una web accesible tiene unos tiempos de carga muy buenos y su estructura a nivel lógico y de información va a ser impecable.

Es deseable que una web cumpla con los requisitos de accesibilidad AA.

Usabilidad

La usabilidad tiene que ser tenida en cuenta como parte de la experiencia que el usuario va  tener a la hora de visitar una página web.

Se tiene que facilitar la navegación, tiempos de carga rápidos, llegar a la información rápidamente, para lo cual la profundidad de navegación tiene que ser muy reducida.

Aquí además el contenido juega un papel muy importante, al igual que en SEO, tiene que ser sencillo y práctico.

Atractivo

Por supuesto, por mucho que cumpla con los anteriores requisitos, una web tiene que ser atractiva. Como dice nuestro lema: ‘diseños que atraen’, una web construida con gusto y elegancia reportará tiempos de visita óptimos.

Aquí es donde es importante contar con la pericia y experiencia de un buen diseñador capaz de hacer una página web popular.

Herramienta AMP de Google

Herramienta AMP de Google

Se ha lanzado la herramienta AMP de Google con su actualización más novedosa desde el año 2016. Un gran empujón para la herramienta de pruebas de páginas en versión AMP (Acelerated Mobile Pages). El acceso sigue siendo en la url habitual para validar página AMP, también se pueden probar los resultados de búsqueda directamente.

Formulario de validación de la herramienta AMP de Google. Imagen

INDEXACIÓN DE PÁGINAS AMP

Tras la ejecución de una dirección URL en versión AMP en el formulario de la herramienta, se mostrarán los resultados. Lo mejor es que ahora se puede enviar la versión AMP directamente a la indexación de Google. Asegúrese antes de enviar que lógicamente todo está correcto. La vista previa de los resultados de búsqueda está disponible y nos da una visión real del resultado.

Resultados de validación AMP. Imagen

Ni que decir tiene que la herramienta AMP de Google, no solo está para analizar las urls propias. Así que si quieres espiar a la competencia y ver cómo es su código fuente, es una oportunidad muy buena.versión AMP. Imagen

Si estás interesado en implementar el sistema AMP en un blog, aquí te presentamos un tutorial muy sencillo de como instalar versión AMP en WordPress.