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.

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>

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.