Últimamente tengo en duda la efectividad de los servidores donde alojamos nuestras webs, mas de una vez me he encontrado el servidor caído o funcionando muy lento, lo primero que pensaba cuando me daba cuenta de esto es que mi conexión a internet era lenta o que ese problema solo lo tenia yo y los demás usuarios en el mundo si podían acceder a la web, que iluso era.
Rápidamente me di cuenta de que era el servidor quien por momentos no daba servicio o era extremadamente lento, gracias a mon.itor.us, una fantástica herramienta online que monitoriza las webs que tu le indiques mandando pings periódicos desde distintos puntos geográficos. El intervalo de esos pings es configurable.
Mon.itor.us también tiene un sistema de alertas por email, sms y xml en el que te avisa en el momento que el servidor se caiga y deje de dar servicio, esto es muy útil para llamar por teléfono rápido al proveedor para que solucione el problema y no se pierdan clientes potenciales que puedan acceder a la web.
También puedes ver los datos obtenidos por los pings mandados en una gráfica y estudiar así la capacidad de nuestro servidor web.
Otra herramienta útil para monitorizar tiempos de acceso a la web desde distintos puntos geográficos es host-tracker
LiveValidation es una librería open source en javascript para crear una validación en el formulario, del lado de cliente, rápida, fácil y potente. Abarca de dos porciones principales. En primer lugar, provee a los desarrolladores un sistema rico de métodos de la validación, el cuál se puede también utilizar fuera del contexto de formulario. En segundo lugar, provee a los visitantes del sitio una validación de sus datos a tiempo real mientras ellos rellenan el formulario, ayudando a que introduzcan correctamente la información antes de mandar el formulario, construyendo los formularios fáciles, rápidos y menos tediosos para completar.
Descarga LiveValidation
Tags: formulario, Javascript, LiveValidation, validacion
Con jCrop, un plugin de jQuery, permite que los usuarios recorten fácilmente las imágenes que ellos suben a la web con las dimensiones exactas que ellos elijan. De una forma tan fácil e intuitiva que facilita al usuario hacer esta acción.
Primero se haría la carga de la imagen a traves de un formulario con upload y un procedimiento php:
php image upload form
Después el jCrop nos permite recorgar la imagen con las proporciones deseadas:
Recortamos la imagen con jCrop
Código
Vía Nettuts
Ubiquity es una extensión de Firefox y un experimento para conectar las webs con distintos lenguajes en un intento de buscar una nueva interface de usuario que haga esto posible. Consigue que las acciones que hacemos sobres los web sites sean mas rápidas y fáciles. Esta extensión de Firefox funciona en tanto en Windows, como Linux y Mac.
Con solo combinar dos teclas y usando un leguaje fácil de instrucciones en tu navegador, tu puedes traducir a muchos idiomas, añadir mapas de google a tu email, editar alguna pagina, operar en twitter o facebook, comprobar tu google calendar, buscar, consultar un termino en wikipedia, mirar o enviar emails, comprar en cualquier tienda virtual, postear tu blog, y muchas cosas mas. Todo sin dejar la página donde tu estás en ese momento.
Ubiquity
https://ubiquity.mozilla.com/
W3Optimizer fue creado por Jawahar Prasad, desarrollador de aplicaciones web indú.
Jawahar desarrollo está herramienta para su propio uso, para testear y validar sus propios proyectos webs, pero al final el autor decidió hacerla pública para ayudar a quienes desean ayuda para la optimización de sus sitios en buscadores.
Usando W3Optimizer no se garantizan un buen posicionamiento en los motores de búsqueda, sin embargo, podemos llegar a nuestros objetivos ayudándonos de esta herramienta.
Esta herramienta examina para optimizar:
- El nombre del fichero
- El título de la web
- Los metatags
- Los títulos de encabezado (H1, H2, etc)
- Las palabras clave
- Las palabras en el cuerpo
- Las palabras en negrita
- Las palabras prominentes
- Las palabras en los primeros 500 caracteres
- El texto alternativo de las imágenes
- Las palabras enlazadas
W3Optimizer
Tags: analisis,
herramienta,
optimizacion,
posicionamiento,
seo,
w3optimizer
La mayoría de la gente que maqueta no lo tiene en cuenta, pero es bastante importante tener en cuenta que el tamaño del texto de nuestros sitios web pueden crecer a voluntad del usuario. Y hay usuarios que tienen problemas de visión y pueden aumentar el texto del navegador al máximo.
Es importante maquetar la página para que también los usuarios que amplían al máximo el texto puedan leer toda la información sin problemas.
Hacer esto puede ser un poco lío porque hay que tener en cuenta algunos factores que se suman a otros tantos que ya llevábamos como los estándares y la compatibilidad entre navegadores, que no es poco.
- Lo primero es usar para el tamaño de texto siempre las unidades em. Definimos para el body un tamaño de texto estándar y si algún texto tiene un tamaño distinto lo haría en proporción al estándar. Así siembre va a guardar las proporciones exactas entre tamaños de textos distintos a la hora de que el texto amplíe.
- Es muy importante no usar nunca para los contenedores la propiedad height para fijar la altura de estos porque si tienen un alto fijo cuando crezca el texto va a bloquear y la maquetación debe de ser flexible para cuando crezca el texto.
- Un fallo común que ocurre cuando se amplia un texto es que cuando amplia este texto se superpone en zonas que tienen el mismo color del texto, y claro, ya no se puede leer ese texto superpuesto. La solución a esto es ponerle a los textos que tengan este problema un color de fondo igual al color del contenedor de este, para que cuando se superponga el color de fondo del texto también se superponga y se pueda seguir leyendo.
Básicamente siguiendo estos consejos el texto será legible para cuando el usuario lo amplíe al máximo y así estaremos mas cerca de la accesibilidad y usabilidad total.
Uno de los problemas de construir sitios web con contenidos dinámicos para clientes es que la mayoría de los clientes no terminan de entender la importancia de que todas las imágenes que pongan en la web deben llevar texto alternativo ALT para que tenga una correcta accesibilidad. Pues para revisar esto, si el sitio ha crecido demasiado como para revisarlo a mano, es utilizar una sencilla truco en la hoja de estilos CSS. Es el siguiente:
img {outline: 3px dashed red;}
img[alt] {outline-width: 0;}
Es sencillo, en la primera linea se asigna un borde dashed rojo a todas las imagnes, y en la segunda linea se le quita el borde a las imagenes que tengan texto alternativo ALT, con lo cual nos quedan con el borde las imagenes sin ALT.
Tags: alt,
css,
texto alternativo
Para mostrar un árbol de categorías con varios subniveles y accerlo correctamente accesible se debe construir de la seguiente forma:
Para obtener este resultado:
- oviperos
- aves
- palomo
- gorrion
- golondrina
- reptiles
- serpiente
- cocodrilo
- lagarto
- mamiferos
En un proyecto que realicé hace poco tuve que implementar un menú en forma de arbol de categorías, con distintos niveles de subcategorías y, como no, que fuera accesible.
La tabla donde se almacena los datos de cada familia tiene los siguientes campos:
- id_familia: INT primary key
- padre: INT indica el id de la familia padre. Será 0 cuando no tenga padre
- nivel: INT indica el nivel de profundidad en el arbol de categorías. Las familas con padre 0 tienen nivel 0.
- nombre_es: VARCHAR nombre de la familia
El código del ejemplo es el siguiente:
<?php
//se declara la variable global $nivel para tener una referencia fuera de la función recursiva que indique el nivel de profundidad de subfamilia actual
$nivel = "";
global $nivel;
///funcion recursiva que recorre el menu
function recorrer_menu_familias
($padre, $nivel_anterior){
//la consulta a la tabla familias busca los hijos del padre que entró como parametro a esta función
$sql="SELECT id_familia, padre, nivel, nombre_es FROM familias WHERE padre = $padre";
$result=mysql_query($sql);
while($row = mysql_fetch_array($result)){
if($GLOBALS['nivel']=="")
//si la goblal nivel está vacia es que acaba de empecar el ciclo recursivo
echo "<li>\n";
else{
//según la diferencia de nivel actual con el anterior guardada en $GLOBALS['nivel'] se cierran o abren etiquetas <Li>
$diferencia = $row['nivel'] - $GLOBALS['nivel'];
if($diferencia==0) echo "</li>\n<li>\n"; //no ha cambiado de nivel de subfamilia respecto al anterior
if($diferencia==1) echo "<ul>\n<li>\n"; //ha subido un nivel de subfamilia respecto al anterior
if($diferencia==-1) echo "</li>\n</ul>\n<li>\n"; //ha bajado un nivel de subfamilia respecto al anterior
if($diferencia < (-1)){
//baja varios niveles de subfamilia respecto al anterior
echo "</li>";
for($i=$diferencia;$i<0;$i++)
echo "</ul>\n</li>\n";
echo "<li>\n";
}
}
//crea el enlace
echo "<a href='?fam=".$row['id_familia']."'>".$row['nombre_es']."</a>";
//actualiza $GLOBALS['nivel'] al nivel actual
$GLOBALS['nivel'] = $row['nivel'];
//se llama a si mismo para comprovar quienes son los hijos de la familia actual
recorrer_menu_familias
($row['id_familia'],$row['nivel']);
}
}
//muestra menu
function muestra_menu_familias
(){
recorrer_menu_familias
(0, "");
echo "</li>\n";
for($i=0;$i==$GLOBALS['nivel'];$i++)
echo "</ul>\n</li>\n";
}
?>
<ul>
<?php muestra_menu_familias
(); ?></ul>
Y aplicando al resultado obtenido un buen aspecto con Treeview de jQuery http://docs.jquery.com/Plugins/Treeview da como resultado un arbol de categorías bastante elegante.
