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.
Autocomplete PHP, MySQL y Jquery.

Autocomplete PHP, MySQL y Jquery.

Este artículo es la continuación de ‘Tutorial para crear un buscador PHP para web muy sencillo’, debido en gran parte al gran número de peticiones donde nos preguntan cómo poder enriquecer dicho buscador con una función autocomplete en PHP, MySQL y Jquery.

Cierto es que los sistemas de autocompletado están presentes en la mayoría de INPUTS o cajas de entrada, además facilitan al usuario la gestión a realizar contribuyendo a una buena experiencia de usuario (usabilidad).

Ahora bien, es importante desarrollar sistemas rápidos y eficaces, éstos no deben de consumir demasiados recursos con el fin de evitar al usuario molestos tiempos de espera mientras los sistemas de autocompletado se resuelven.

Por un lado, recomendamos elegir la arquitectura adecuada para BBDD de MySQL y por otro minimizar los accesos a la BBDD, con esto ganaremos mucha velocidad.

Cómo en nuestro anterior artículo dedicado al buscador, vamos a seguir utilizando la base de datos de provincias de España y en esta ocasión nos vamos a apoyar en la potencia que nos ofrece la universal galería de Jquery, como dice su lema: ‘escribe menos, haz más’.

El código fuente está comentado con el fín de facilitar su uso. Puedes ver el funcionamiento en la siguiente demo.

Autocomplete PHP

Pasos para autocomplete PHP con MySQL y Jquery

1. CONEXIÓN CON LA BASE DE DATOS MYSQL

Al inicio del programa definimos la conexión para la base de datos, a diferencia de nuestro anterior post, aquí vamos a conectar siguiendo la directiva de la nueva versión de PHP 7

<?php

// Primero definimos la conexión a la base de datos, para que se fácil cambiar los parámetros si procede.
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

?>

2. FUNCIONES CONTECTAR Y DESCONECTAR

Una vez más, para facilitar las futuras acciones, defino las funciones para abrir o cerrar conexión con la BBDD, aunque para el ejemplo puede resultar escesivo, es una muy buena práctica para contribuir siempre a la seguridad.

<?php

// Definimos la conexión (versión PHP 7)
function conectar(){
    global $conexion;  //Definición global para poder utilizar en todo el contexto
    $conexion = mysqli_connect(HOST_DB, USER_DB, PASS_DB, NAME_DB)
    or die ('NO SE HA PODIDO CONECTAR AL MOTOR DE LA BASE DE DATOS');
    mysqli_select_db($conexion, NAME_DB)
    or die ('NO SE ENCUENTRA LA BASE DE DATOS ' . NAME_DB);
}
function desconectar(){
    global $conexion;
    mysqli_close($conexion);
}

?>

3. CREO UNA FUNCIÓN PARA REALIZAR LA BÚSQUEDA

En nuestro caso queremos completar o mejor dicho autocompletar la caja de búsqueda con las provincias a medida que vayamos tecleando, si se necesitasen usar otras tablas para otros campos o realizar un futuro cambio, tan solo tendríamos que volver a esta función y actualizarla.

<?php
function opciones() {
	global $conexion;
      //Variable que contendrá el resultado de la búsqueda
	  $texto = '';

	  conectar();
      mysqli_set_charset($conexion, 'utf8');  // para indicar a la bbdd que vamos a mostrar la info en utf8
	  
	  //Contulta para recoger la información de todas las provincias
	  $sql = "SELECT * FROM provincia ORDER BY provincia";
	  
	  $resultado = mysqli_query($conexion, $sql); //Ejecución de la consulta
      //Si hay resultados...
	  if (mysqli_num_rows($resultado) > 0){ 

		 while($fila = mysqli_fetch_assoc($resultado)){ 
		      // se recoge la información según la vamos a pasar a la variable de javascript
              $texto .= '"' . $fila['Provincia'] . '",';
			 }
	  
	  }else{
			   $texto = "NO HAY RESULTADOS EN LA BBDD";	
	  }
	  // Después de trabajar con la bbdd, cerramos la conexión (por seguridad, no hay que dejar conexiones abiertas)
	  mysqli_close($conexion);
      
	  return $texto;
}
?>

4. INICIAMOS EL TEXTO PARA  AUTOCOMPLETAR

Pasamos el resultado de la búsqueda que realizamos sobre el texto que nos interesa a una variable ‘llamando a la función opciones()’, en nuestro caso vamos a pasar las provincias que contiene nuestra tabla y le vamos a dar un formato válido para que se pueda utilizar en la parte de javaScript, quedando así: «Albacete», «Álava», …

$opciones = opciones();

5. MONTAMOS LA PARTE HTML

Definimos la cabecera con las llamadas a los correspondientes scripts y css.

<!doctype html>
<html>
<head>
<meta charset=»utf-8″>
<title>Buscador web php autocompletado – WebReunidos</title>

// Parte correspondiente a Jquery

<link rel=»stylesheet» href=»//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css»>
<script src=»https://code.jquery.com/jquery-1.12.4.js»></script>
<script src=»https://code.jquery.com/ui/1.12.0/jquery-ui.js»></script>
<script>
$( function() {

// Variable que recoge el resultado de la consulta sobre la tabla Provincias, Jquery trabajará sobre este resultado para dinamizar el funcionamiento.
var availableTags = [<?php echo $opciones ?>];
$( «#buscador» ).autocomplete({
source: availableTags
});
} );
</script>
</head>

6. CUERPO DEL HTML

Por último incluimos el INPUT que va a realizar el trabajo para que sea autocomplete PHP.

<body>

<div class=»ui-widget»>
<label for=»buscador»>Buscador : </label>
<input id=»buscador»>
</div>

</body>
</html>

Con este código ya estamos en condiciones de optimizar el funcionamiento de nuestro buscador php, tal y como decíamos al principio de este artículo que esperamos os sea de mucha utilidad.

Usabilidad web

Usabilidad web

USABILIDAD WEB: PAUTAS GENERALES

Dentro de la usabilidad web y como indicábamos anteriormente: qué es y para qué, cuando vayamos a diseñar y/o programar nuestra página web, debemos pensar fundamentalmente en la satisfacción de nuestros visitantes al lograr realizar lo que ellos desean hacer de forma fácil y sin gran esfuerzo en aprender a moverse por nuestra web.

Para conseguir lo indicado, es bueno seguir, tener en cuenta, una serie de pautas o consejos básicos sobre usabilidad:

  • Debemos facilitar una la lectura rápida de los contenidos

Creo que este concepto lo veremos más claro si echamos un vistazo tanto a un periódico en formato papel como a uno en formato digital – El Mundo, El País, Europa Press -.

Como podemos comprobar, se nos ha facilitado la lectura con las siguientes técnicas:
a) Haciendo uso  de los diferentes niveles de títulos -<h2>Sarkozy reúne a la cúpula de las fuerzas de seguridad tras las críticas a la investigación</h2>, así como del uso de párrafos <p>, listas <ul>, negrita <strong>, etc.,  se obtiene una visulización del contenido que falcilita su lectura rápida y al mismo tiempo su jerarquía.

b) Se ha procedido a agrupar bajo un mismo título cosas/elementos que están mutuamente relacionados.
En la noticia sobre el Masters 1000 de Miami se ha agrupado texto y foto -lectura rápida- así como los enlaces para ver más información sobre la noticia o ampliar información.

  • Debemos hacer uso de las convenciones definidas

En las páginas web, así como en los periódicos,  con el tiempo se han ido creando una serie de normas no escritas/convenciones que facilitan que el usuario, independientemente del periódico o web que visite, sepa moverse por la web y que es preciso tener en cuenta.
Estas son :

a) Los enlaces. Si lo convencional es que el texto de enlace a otros contenidos vaya subrrayado, con el paso del tiempo, ésta convención se ha modificado al hecho de que dicho subrrayado aparezca cuando se sitúa el puntero del ratón encima del texto enlace -a:hover-.

b) Barras de desplazamiento. Se desaconseja las barras de desplazamiento horizontal -más ahora que estamos pasando de las pantallas de 4:3 a las panorámicas de 16:9-. No es recomendable añadir barras de desplazamineto vertical. Se debe utlizar las que ya de por sí nos proporcionan los navegadores. Poner más barras, sólo puede confundir o crear ‘ruido’ en la página.

c) Marcos/Frame y barras. Dos son las razones que desaconsejan el uso tanto de marcos/frames como de sus barras de desplazamineto asociadas. Una, ya se ha indicado en el punto anterior, aparte de que con una lectura rápida lo más probable que esa nueva barra pase desapercibida; otra, el hecho de que cada día está más en desuso los frames por un uso más normalizado de los div -ni qué decir tiene cuando se implemente el HTML 5-.

No solo hay mantenerse al día con los estandares web, sino también con las normas, pautas o convenciones sobre uso de la usabilidad web.

Accesibilidad web AA y su importancia

Accesibilidad web AA y su importancia

Accesibilidad web

Según el W3C, el nivel de accesibilidad web AA, sería el resultado de tener una web validada correctamente para que sea visible por personas con discapacidad, es decir, una web accesible y usable por la mayoría de usuarios.

¿Por qué la accesibilidad es importante?

Hablar de accesibilidad web no es nada nuevo, desde hace muchos años se trabaja para ofrecer una información accesible a todos y para todos, si bien ahora parece estar más en boca de todos y por fin ya muchos la relacionan con una buena experiencia de Internet.

Las primeras preguntas que surgen cuando se trata o consulta un sitio web, pueden ser, ¿es el sitio web accesible a las personas con discapacidad?, ¿Es compatible con los navegadores que no sean Internet Explorer?, ¿Cumple con los estándares recomendados?

Accesibilidad web AA¿Qué es la accesibilidad?

Tradicionalmente, es un término que se asocia más con el pensamiento arquitectónico y sus barreras, en lugar de usabilidad accesible para sitios web. Al igual que existe una legislación, que determina las normas mínimas para los nuevos edificios, para los sitios web accesibles hay una serie de normativas y consorcios que definen como hay que desarrollar las páginas web para que sean accesibles.

Hoy en día los nuevos edificios tienen rampas para sillas de ruedas, ascensores y plazas de aparcamiento accesibles a personas con discapacidad, lo que permite tener acceso a un edificio, movilidad, comunicación, etc. Bien, con los nuevos sitios web accesibles, todos los usuarios pueden visitar la web y acceder a su contenido sin limitaciones.

El director del W3C e inventor de la World Wide Web Tim Berners-Lee, define el término en cuestión como «el acceso de todas las personas, independientemente de su discapacidad.»

A pesar de que la World Wide Web está creciendo continuamente, muchos usuarios:

  • No cuentan con los últimos navegadores web y ciertos programas.
  • Utilizan navegadores de voz o ojos ocupados / manos ocupadas, como la gente en los coches.
  • El acceso a internet es con módems lentos, o residen en zonas rurales o remotas con acceso limitado a Internet.
  • Navegan si visualizar gráficos, utilizando navegadores de que son solamente para texto.

En definitiva hay una lista muy variada de condiciones que hay que tener en cuenta a la hora de llegar con el contenido a todos los internautas.

Ademas, los usuarios contentos pueden convertirse en usuarios leales, continuar utilizando el sitio web, e incluso recomendarlo a otros.

Los beneficios de accesibilidad son muchos

  • Aumentar el número de visitas
  • Mejorar la eficacia del sitio web
  • Aumentar y recuperar la reputación
  • Mejorar el posicionamiento SEO
  • Aumentar la rapidez de carga de una página
  • Gusta a los motores de búsqueda
  • Mejora la experiencia de usabilidad del visitante
  • Apoyo a la web semántica
  • Optimización del ancho de banda y recursos de cara al servidor

Es ideal contar con personal cualificado y experiencia en el sector a la hora de desarrollar un sitio web 100% accesible, para ello se verán las cosas desde el punto de vista de las personas que tienen discapacidades.

En su próximo proyecto tenga en cuenta utilizar los estándares web y sus recomendaciones.

El título de las páginas web

Queremos explicar en este post la importancia que tiene el buen uso de la etiqueta HTML <title> en relación a estas áreas: Usabilidad 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.

Usabilidad web: qué es y para qué

Usabilidad web, una buena experiencia

La usabilidad web es uno de los principales puntos a tener en cuenta cuando vayamos a diseñar nuestro sitio web. Pero qué es eso de la usabilidad web. Qué es lo que se quiere decir con dicho término. Por qué es preciso lo que tenga en cuenta.

Cuando consigo que mi página web pueda ser utilizada de forma fácil, estoy aplicando principios de usabilidad web. Sí, así de sencillo es. Otra cosa es realizarlo o llevarlo a cabo.

Que mi página web pueda ser utilizada de forma fácil… bien,  esto… Qué entendemos por ‘ser utilizada de forma fácil’. Pues, que al usuario no le cueste aprender la forma de cómo debe usar/utilizar mi sitio web. Que cada vez que visite mi página web, el usuario quede satisfecho porque ha podido encontrar los contenidos que buscaba,  y que al realizarlo no ha tardado mucho tiempo. Sí, nuestro sitio web será usable cuando éste proporcione al usuario una satisfacción por encontrar aquello que él pretende localizar en el menor tiempo posible.

Una de las mejores técnicas para realizar sitios web accesibles es aplicar el sentido común, sí precisamente ese que en la mayoría de las veces es el menos común de los sentidos. Póngase en la situación de la persona o las personas que va a visitar su página y quiere/n encontrar o realizar algo en ella: son mayores o jóvenes,  son usuarios asiduos o noveles,  qué es lo que van realizar en nuestra página, localizar servicios, comprar, etc.

Para no caer en los errores más comunes al abordar el diseño de una sitio web, incluyo enlace a las recomendaciones de Jacob Nielsen, uno de los ‘gurus’ sobre accesibilidad web a tener en cuenta.

Ya sabemos los que es la usabilidad web, pero por qué es preciso tenerla en cuenta, es decir, qué beneficios nos aportará. El tiempo que invierta en usabilidad, cómo se reinvierte en mi proyecto.

Bien, creo que el planteamiento debería ser el siguiente: Cuando abro un negocio, lo hago en aquella zona donde van a estar mis potenciales visitantes y a ser posible con un escaparate y cartel que capte lo más posible la atención de las personas que pasen delante de él. Pues, en internet es lo mismo, creo un sitio web para dar a conocer mi negocio en la red, pero al mismo tiempo de la misma forma que no pongo trabas a mis visitantes de mi tienda fija tampoco lo hago en mi tienda en internet, y por ello haré que ésta sea fácil de utilizar y satisfaga eficaz y eficientemente los intereses de mis visitantes.

Los beneficios que nos proporcionará la usabilidad de nuestro sitio web son:

.- mejorar la competencia con otras web del sector al ser más fáciles de utilizar,

.- buena imagen en la red por su utilidad,

.- y ahorro de costes por el aumento de visitas a nuestro sitio.

Por concretar, un sitio web debe ser  fácil de utilizar y, al mismo tiempo, debe satisfacer las expectativas del visitante de encontrar aquello que busca de forma efectiva y eficiente.

Cuando diseñe piense en el usuario, no se lo ponga difícil, estructure los contenidos pensando en las tareas que él va a realizar, el estilo al escribir para la web debe ser distinto, los usuario ojean, no se detienen con grandes textos. En su próximo proyecto piense en usabilidad web.