Una forma muy sencilla de detectar si un usuario está accediendo a nuestro site desde un teléfono móvil o desde otro dispositivo es utilizando la variable de php HTTP_USER_AGENT:

Detectar móvil con php:

Se puede utilizar también el código anterior para personalizar nuestro diseño mostrando una hoja de estilos CSS en cada uno de los teléfonos móviles, permitiendo la personalización de nuestra página para una versión de iOS, Android y una última mucho más ligera para otro tipo de dispositivos como pueden ser: los SO de Blackberry, Bada, Symbian, etc.

Muy relacionado con lo anterior está el siguiente artículo donde se explica cómo cargar estilos CSS según el dispositivo.

En muchas ocasiones hemos hablado y dado algunos consejos sobre estandarización web, como ya sabrás cada organismo tiene sus propias normas a la hora de desarrollar los estándares. Es importante que cualquier desarrollador web conozca las etapas por las que pasa un estándar W3C, al ser el que publica las especificaciones sobre las que se soporta la web.

Recurrimos de nuevo al libro “Estudio sobre Internet Explorer 9 y los nuevos estándares web” para ver el ciclo habitual de aprobación de un estándar en el W3C con sus respectivos niveles de madurez:

sEl ciclo habitual de aprobación de un estándar en el W3C comprende los siguientes niveles de madurez:

• Working Draft: los borradores de trabajo son una sucesión de versiones del estándar que van recogiendo las características del mismo, así como las modificaciones fruto del feedback obtenido de la comunidad tras cada versión; por tanto, en cada nueva publicación se acercan cada vez más a una versión completa.
• Existen varias etapas dentro de este nivel, desde la publicación del primer borrador hasta la emisión de sucesivos borradores Last Call, una vez que se ha cerrado el conjunto de características que se quiere incluir en el estándar.

• Candidate Recommendation: cuando W3C considera el documento maduro, se pasa a este nivel para ganar experiencia de implementación del mismo.

• Proposed Recommendation: tras comprobarse que la especificación se puede implementar (con al menos dos versiones independientes e interoperables) y maduro, se alcanza este nivel.

• W3C Recommendation: publicación del estándar como tal.

Se pone como ejemplo HTML5 y los diferentes estados por los que ha tenído y aún tiene que pasar: Working Draft,  Last Call y Candidate Recommendation… de la que se espera llegué en 2014, una vez que se haya terminado de desarrollar su suite de tests y haya al menos dos implementaciones interoperables entre sí.

Por supuesto que esto no significa que no se pueda trabajar con HTML5 hasta estas fechas, puesto que algunas partes del estándar son lo suficientemente maduras y han obtenido un grado de consenso, entre los fabricantes de navegadores, lo suficientemente alto como para poder empezar a construir aplicaciones web sobre ellas.

Como en la vida real, en el mundo de internet, el diseño es lo primero que entra por los ojos y antes de comenzar a leer o adentrarnos en el contenido de la página, en lo primero que nos fijamos, es en el esquema de colores. Cualquier artista, diseñador gráfico, o en definitiva, cualquier webmaster con gusto sabrá qué colores son convenientes en cada ocasión, colores claros y fondo blanco para facilitar la lectura, colores oscuros para sites que ofrezcan la posibilidad de ver películas o video o esquemas de colores definidos por temáticas, con los ejemplos más típicos: moda/ belleza – diferentes tonos de magenta, deportes / fútbol – escala de colores de verde, sites de temática de humor – contraste de tonos de colores vivos como el amarillo.

Para ayudarnos a elegir un buen esquema de colores para nuestra web existen varias herramientas como por ejemplo:

Color Palette Gallery

Una web donde encontrarás una galería con muchas combinaciones de colores, junto al nombre de los colores que las componen.

Color Scheme Designer

Esta herramienta nos da opción de elegir nosotros mismos la combinación, según el número de tonos o colores que deseamos para nuestro site, sin duda de gran utilidad.

Power PWChecker es un plugin en jQuery que se encarga de comprobar la calidad de las contraseñas escritas por los usuarios. Para llevarlo esto a cabo previamente requiere definir algunos parámetros como por ejemplo, la cantidad mínima y máxima de caracteres para que las contraseñas sean válidas y los dos avisos de contraseña correcta y concordancia entre dos contraseñas.

Para comenzar a utilizarlo añadimos las referencia a la librería jQuery, llamamos a los ficheros: pschecker.js y style.css

Añadimos el siguiente código HTML, con la clase "password-container" para los campos de contraseña y llamamos a la función de inicialización con los parámetros requeridos.

Este es un ejemplo de cómo utilizar un medidor de fuerza de contraseña:

Los tooltips de por sí, son feos y en muchos casos carecen de usabilidad, pero existen multitud de formas de darle diseño, una de ellas es por medio de jQuery.

Poshy Tip es un plugin gratuito jQuery utilizado para crear atractivos tooltips. Implementarlo en tu página no te costará apenas trabajo, ya que no requiere modificar la estructura HTML de tu site, ni añadir clases especiales, simplemente utiliza el atributo title.

Los tooltip ya están preparados con un diseño bastante agradable, pero como todo, es personalizable por medio de hojas de estilo.

Los siguiente son algunos ejemplos creados con Poshy Tip:

Para añadir a tu site sólo tienes descargar el plugin poshytip-1.1.zip subirlo a tu servidor, enlazarlo y añadir la siguiente llamada:

$('#demo-basic').poshytip();

El plugin permite multitud de configuraciones mediante parámetros, por ejemplo: ubicación del tooltip en relación al enlace, tooltip también al acceder a cajas de texto (input), retraso para que aparezca el tooltip, tooltip con varias imagenes dentro…

Desde Google, se ha comenzado a dar soporte a un nuevo atributo en fase de pruebas de tipo de autocompletado. Este permite a los desarrolladores web etiquetar texto de forma inequívoca y seleccionar campos con tipos de datos habituales como, por ejemplo, el nombre completo, la dirección o el DNI. Gracias a este atributo los webmasters pueden generar conversiones en sus sitios al marcar sus formularios para autocompletado sin necesidad de cambiar la interfaz del usuario ni el servidor.

La forma correcta de implementarlo sería la siguiente:

Añadir un atributo al elemento de introducción de datos, por ejemplo para el campo de dirección de e-mail puede tener un aspecto similar:

<input type=”text” name=”field1” x-autocompletetype=”email” />

Recordar que es una propuesta inicial por parte de Google, y está siendo implementada en su navegador Google Chrome para abrir un diálogo de cómo admitir de la mejor forma posible los formularios que se completan automáticamente en la especificación HTML5.

Para conseguir adaptar el puntero o cursor del ratón a cada situación nos bastará con añadir un estilo en nuestra hoja de CSS para forzar a nuestro navegador y que de este modo no se rija por las normas convencionales de los punteros, sino con lo indicado en la hoja de estilos.

Hay dos posibilidades de cambiar el cursor en nuestra web, para todo el documento o para partes del documento determinadas.

Cambiar el cursor del ratón a todo el do cumento:

<html>
<title>Cambiar el cursor del raton</title>
<head>
<style type="text/css">
<!--
body {cursor: crosshair}
-->
</style>
</head>
<body>
</body>
</html>

Cambiar el cursor del ratón a algunas partes dentro de un documento:

<html>
<title>Cambiar el cursor del raton</title>
<head>
</head>
<body>
<h1 style="cursor: pointer">pointer (mano)</h1>
<h1 style="cursor: move">move (cruz con flecha)</h1>
<h1 style="cursor: help">help (signo de pregunta)</h1>
<h1 style="cursor: default">default (flecha)</h1>
<h1 style="cursor: crosshair">crosshair (cruz)</h1>
<h1 style="cursor: text">text (I-beam)</h1>
<h1 style="cursor: wait">wait (reloj de arena)</h1>
<h1 style="cursor: nw-resize">nw-resize (flecha al noroeste)</h1>
<h1 style="cursor: ne-resize">ne-resize (flecha al noreste)</h1>
<h1 style="cursor: se-resize">se-resize (flecha hacia el sudeste)</h1>
<h1 style="cursor: sw-resize">ne-resize (flecha hacia el sudoeste)</h1>
<h1 style="cursor: n-resize">n-resize (flecha hacia arriba)</h1>
<h1 style="cursor: s-resize">s-resize (flecha hacia abajo)</h1>
<h1 style="cursor: e-resize">e-resize (flecha a la derecha)</h1>
<h1 style="cursor: w-resize">w-resize (flecha a la izquierda)</h1>
</body>
</html>

Recordar que también se puede personalizar el puntero del ratón mediante, una imagen o gif animado.

A continuación aprenderemos a realizar un sistema de alertas tipo Toast utilizando HTML y CSS.

Las transiciones CSS nos permiten alterar una propiedad de CSS durante un determinado periodo de tiempo.

#toast{
position: fixed;
top: 20px;
left: 50%;
width: 200px;
margin-left: -100px;
border: 1px solid #666;
background-color: #B1BCCF;
padding: 10px 0 ;
text-align:center;
opacity: .9;

/*The good stuff */
-webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */
-moz-transition: opacity 0.5s ease-out; /* FF4+ */
-ms-transition: opacity 0.5s ease-out; /* IE10? */
-o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */
transition: opacity 0.5s ease-out;

}

[browser css keyword]: [property to animate] [duration] [easing method]

Para finalizar, cambia el valor de la propiedad a la que has añadido un transform, y el navegador se encargará del resto. Por eso, para que el mensaje emergente se desvanezca, habrá que configurar la opacidad en 0.

Finalmente, un poco de Javascript:

function hideToast(){
    var alert = document.getElementById("toast");
    alert.style.opacity = 0;

}

Lo bueno del concepto, es que este tipo de notificaciones simplifican el proceso de la configuración de opciones. Normalmente, en otros entornos virtuales, simplemente se nos informa de que el cambio ha sido realizado y luego debemos volver manualmente a la pantalla principal de opciones.

En cambio, con estas alertas emergentes, recibes la confirmación a través de un sólo mensaje que a su vez, nos envía de regreso a la pantalla anterior.

Las transiciones CSS nos permiten alterar una propiedad de CSS durante un determinado periodo de tiempo.

Puedes ver un ejemplo de este tipo de alertas con estilo de notificaciones Toast de Android en Toast Demo.

$(document).ready(function() {

$(“a.topLink”).click(function() {
$(“html, body”).animate({
scrollTop: $($(this).attr(“href”)).offset().top + “px”
}, {
duration: 500,
easing: “swing”
});
return false;
});

});

Agregar también el enlace al final de la web.

<p><a href=”#anchor”>Subir arriba</a></p>

Se puede ver un ejemplo de su funcionamiento en jsbin y el código necesario en jQuery Smooth Scroll to #Anchor

Ahora HumaneJs nos presenta una solución mejorada para generar alertas y notificaciones en nuestra web por medio de un framework Javascript. Sus características principales son:

• Sencillez para incorporarlo en nuestro proyecto, ya que no necesita de ninguna librería para funcionar.
• Se utilizan animaciones CSS y cuando no son soportadas, animaciones Javascript.
• Se permiten varios parámetros de configuracion para los mensajes como: tiempo que tarda en desaparecer, desaparición por acción del usuario, cerrado por click y forzar la aparición de nuevas notificaciones.
• Se incluyen varios diseños para configurar su apariencia, además se permiten crear diseños personalizados por medio de Stylus.
• Soporte para los siguientes navegadores: Internet Explorer 7+, Firefox 3+, Chrome 9+, Safari 3+, Opera 10+ y en fase Beta: iOS y Android.