Páginas de error 404

La persona (usuario) que navega por la web (www) utiliza un ordenador (cliente) desde el que hace peticiones de páginas o documentos a otro ordenador (servidor).

Cliente y servidor se “entienden” porque comparten un mismo protocolo (http). Cuando el cliente pide una página concreta al servidor y el servidor no la encuentra (no ha existido, se ha borrado, se ha movido) el servidor comunica al cliente un error 404.

Los enlaces rotos impiden que usuarios y robots continúen su navegación. Son errores muy graves (y todos los cometemos). Un enlace roto no tiene respuesta del servidor y el usuario espera a que el navegador acabe de “resolver la dirección” hasta que el servidor lanza un time out (¡campana y se acabó!, ¿recuerdas?). Un enlace roto genera frustración y desconfianza en el usuario.

Para evitar los enlaces rotos hay que dejar preparada una página 404 que rápidamente comunique al usuario o robot que esa página no existe (puede haberse movido, es decir cambiado de URL).

Como no deja de ser una picia, el responsable de la web y o marketing intentan que el error 404 tenga cierto pase haciendo que la página sea más mona y agrade al usuario

Otras páginas de error del servidor

A continuación os detallamos los mensajes de error más habituales. Iremos completando este artículo a medida que nos los vayamos encontrando por el camino:

// Unexpected error
Sorry, an unexpected error occurred. Please reload the page and try again or go back.

// Error 401 Authorization Required
This server could not verify that you are authorized to access the document requested. Either you supplied the wrong credentials (e.g., bad password), or your browser doesn’t understand how to supply the credentials required.

Go back or send a message to administrator.

// Error 403 Forbidden
You don’t have permission to access < requested_url > on this server.

Go back or send a message to administrator.

// Error 404 Page/ File not found
The page/file you’ve requested has been moved or taken off the site.

Go back or send a message to administrator.

// Error 414 
The requested URL/search… is too large to process.

That’s all we know

// Error 500 Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.

Go back or send a message to administrator.

//Error 503 Service Temporarily Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

Go back or send a message to administrator.

Aquí os dejo algunas páginas de error de los más famosos servidores (hay también un error 414). Si tienes alguna más envíanosla para que la publiquemos. Gracias.

Anuncios

Diferencias entre diseño líquido y diseño responsive

Ejemplo responsive design

Cada día accedemos más a internet a través de teléfonos y tabletas. Cuando analizamos las métricas de nuestros clientes del sector de la hostelería nos encuentramos (mayo 2012) que aproximadamente el 40% de las visitas a sus webs se realizan a través de teléfonos móviles. En clientes más tradicionales observamos (octubre 2012) incrementos mensuales del 19% en el acceso a su web con dispositivos móviles.

En España el 56% de los teléfonos móviles son smartphones (somos el segundo país del mundo con un porcentaje tan alto). En 2015 seremos uno de los primeros países del mundo en donde habrá más accesos a internet desde dispositivos móviles (smartphones y tablets) que desde ordenadores de escritorio. Adaptar nuestras webs a las pantallas de los dispositivos móviles resulta ya más que necesario.

Diseño líquido o fluido (liquid or fluid layout). Una web tiene diseño líquido o fluido cuando su tamaño se ajusta a la dimensión horizontal de la pantalla de forma automática y sin necesidad de una barra de desplazamiento horizontal (scroll). El diseño se expande al ancho disponible de la pantalla porque el tamaño de los distintos elementos (div) es un porcentaje del total disponible (100%) de la pantalla.

El problema surge en pantallas muy grandes como por ejemplo una TV Full HD de 1.920 x 1080 px porque el diseño se desajusta y aparecen grandes espacios en blanco. Pero también sufren problemas las pantallas con resoluciones inferiores a 1.024 px de ancho (tablets en posición portrait y móviles en posición landscape) porque las imágenes se miniaturizan y los textos se vuelven ilegibles. Si para evitar estos problemas se fija un ancho mínimo aparecen las barras de scroll de desplazamiento horizontal.

Retícula de diseño líquido o fluido
Como muestra la imagen, para obviar estos problemas los diseñadores crean versiones de layouts según la pantalla donde se vaya a visualizar la web: pantalla de televisión, ordenador de escritorio, tablet, móvil.

  • Layout con un ancho mínimo de 1.420 px para pantallas Full HD TV hasta 1.980 px
  • Layout con un ancho mínimo de 1.236 px y un máximo de 1.420 px para ordenadores de escritorio con una alta resolución de pantalla (por ejemplo un iMac)
  • Layout con un ancho mínimo de 986 px y un máximo de 1.235 px para ordenadores de escritorio normales
  • Layout para tablets con un ancho mínimo de 720 px en posicion vertical (portrait) y un máximo de 985 px para tablets en posición horizontal (landscape)

El principal problema de un diseño líquido es el mantenimiento de diferentes versiones de CSS. En una web con 16 páginas es más o menos fácil. Pero un site de ecommerce con más de 5.600 referencias vivas en permanente actualización (alta y baja de productos, versiones de color, tamaño, etc) es realmente un suplicio.

Diseño responsive. Se basa en la retícula (normalmente de 960 px de ancho) que se divide en un número igual de columnas ya sean pares o impares. Estas columnas pueden ser también elásticas (un porcentaje del ancho total) que hacen un ajuste aún más fino al dispositivo. La hoja de estilos CSS3 define por medio de media queries en qué pantalla se visualizará la página en función de una serie de parámetros como:

  • Ancho y alto de la ventana del navegador (width, high)
  • Orientación del dispositivo (puede ser portrait o landscape, es decir vertical u horizontal)
  • Aspect-ratio (proporción entre el ancho y el alto de la pantalla por ejemplo 16:9)
  • Grid (número de columnas que muestra)
  • Resolución del dispositivo (densidad de píxeles que muestra la pantalla)
  • Color (número de colores que representa la pantalla)
  • Hay cuatro parámetros mas (monochrome, device aspect-ratio, color-index, scan) que ayudan a definir con mayor exactitud el dispositivo

Responsive grid
Responsive web designEn función del ancho de la pantalla del dispositivo los bloques div se ordenan y jerarquizan, de tal manera que los elementos que estamos viendo en la imagen superior se verían en un dispositivo móvil en una columna ordenada en la que todos los elementos tendrían el mismo ancho.

 

Las ventajas del diseño responsive son:

  • Con una misma web (un sólo HTML y CSS) se cubren todas las resoluciones de pantalla
  • Se reducen los costes de creación y mantenimiento de una web, se acorta el desarrollo
  • Optimización SEO, sólo hay una URL, se ahorran las redirecciones a otros layouts (mobile.dominio.com)
  • Todos los usuarios disfrutan del mismo contenido (suele ser frustrante obtener versiones light de las webs)

De esta manera el diseño responsive nos proporciona una visualización controlada de la página, muy similar a la que nos ofrece el diseño de ancho fijo.

Hemos escrito otro artículo en el que si te interesa el tema podrás ampliar información sobre el diseño responsive.