Intentando definir la Web 2.0

ByLuis

Interesante artículo que intenta definir qué es la Web 2.0 o cómo conseguir crear nuestra propio diseño 2.0, algo que puede ser muy abstracto. Unas cuantas características que se suelen encontrar en los sitios que definimos como Web 2.0:

  • Debe ser limpio, claro y debe usar un diseño en columnas.
  • El fondo debe ser blanco y muy claro, e incluso usar degradados de color claro al blanco.
  • Esquinas redondeadas, ya sea redondeando una sola esquina, redondeando esquinas alternas o redondeando todas menos una.
  • La letra debe ser grande, clara y preferiblemente Sans-Serif.
  • Imágenes con reflejos redondeados y uso de iconos.
  • Colores pasteles, fondos suaves y usando con cuidado los colores oscuros.

Design for 2.0

Vía / Vecindad Gráfica

Similar Posts

Lista de herramientas para generar datos de prueba

ByLuis

Una de los grandes problemas con los que nos podemos enfrentar a la hora de desarrollar una aplicación web es que el rendimiento en las etapas iniciales no es similar a cuando hay muchos datos y muchos usuarios concurrentes. Para los usuarios se pueden hacer pruebas de estrés, pero para el volumen de datos que debe manejar la base de datos hay que rellenar las tablas con datos de prueba. Para ello, este listado puede sernos bastante útil:

  • GenerateData: para mí uno de los mejores, y del que ya hablé hace tiempo.
  • DBMonster: para generar datos aleatorios en la base de datos. Muy completo pero algo más complejo.
  • CSV Data Generator: basado en Ruby genera ficheros CSV.
  • Datagenerator: este me ha gustado bastante, es sencillo y no por ello simple. Permite introducir datos en Mysql, Firebird, Interbase, MSSQL, Oracle, SQLite y PostgreSQL.

En el post original mencionan otros, pero no me han llegado a gustar.

Test (Sample) Data Generators

aSSL: SLL sin HTTPS

ByLuis

aSLL es una librería bajo licencia MIT que implementa una tecnología similar a SSL pero sin HTTPS.
aSSL permite al cliente negociar una clave secreta aleatoria de 128 bits con el servidor usando un algoritmo RSA. Una vez que la conexión se ha establecido, los datos se enviarán y recibirán usando el algoritmo AES.
aSSL está compuesto por algunos ficheros Javascript y componentes en el servidor. En un futuro habrá puertos para cada uno de los lenguajes web más importantes (PHP, Java, Perl, Python, TKL, …).
aSSL
Vía / WebAppers

|

Lista de herramientas para testeo de aplicaciones web

ByLuis

Hace unas semanas hablamos sobre aplicaciones para la gestión de errores, pero está claro que para gestionar los errores, primero hay que encontrarlos. Para ello nada mejor que herramientas de testing para nuestras aplicaciones web.

Apache JMeter

Aplicación 100% Java de la gente de Apache, que nos permite definir comportamientos para casos de test y medir su rendimiento. Válido para contenido estático y dinámico (ficheros, Servlets, scripts de Perl, objetos Java, bases de datos y queries, FTP, …). Puede simular una gran carga en el servidor, HTTP y FTP testing y bases de datos mediante JDBC, multithreading y con grandes facilidades para extender su funcionalidad mediante plugins.

testing1.png

Apache JMeter

Mercury LoadRunner

Ayuda a preveer costosos problemas de rendimiento, cuellos de botella antes de que una aplicación web sea actualizada o sacada a producción. Soporta un gran número de entornos como Web Services, .NET y J2EE. Se pueden obtener gráficas de rendimiento, saber si una actualización cumple con ciertos requerimientos prefijados e identifica y elimina cuellos de botellas encontrados en el ciclo de vida de la aplicación.

testing2.png

Mercury LoadRunner

OpenSTA

No se trata de una herramienta específica, pero si una colección de herramientas que usando en una arquitectura distribuida basada en CORBA, realiza testeos a aplicaciones webs. Se requiere conocimiento de HTTP y de la aplicación en la que se está trabajando, por lo que no es sencillo su uso. No cumple ninguna metodología de testing, sino que es un sistema flexible para realizar testings y obtener datos.

testing3.png

OpenSTA

Microsoft Web Application Stress Tool

Aplicación que está diseñada para realizar simulaciones realistas de varios navegadores accediendo a páginas de tu aplicación web. Puedes obtener información sobre rendimiento y estabilidad con un número pequeño de clientes.

testing4.png

Microsoft Web Application Stress Tool

Radview WebLOAD

Permite hacer pruebas de carga y estrés en tu aplicación web, medir el rendimiento y la escalabilidad. Simula el comportamiento de los usuarios y predice los requerimientos necesarios e informa sobre cuellos de botellas, límites y puntos débiles antes de que se saque a producción la aplicación, ahorrando así en costes de tiempos por inactividad, costes por ventas y evitando pérdidas de clientes.

testing5.png

Radview WebLOAD

JCrawler

Aplicación opensource para realizar test de estrés a aplicaciones web. Le pasas una URL y puedes realizar una navegación. Admite redirecciones HTTP y cookies. Es independiente de la plataforma, posee un modo consola y es sencillo de configurar.

testing6.png

JCrawler

WAPT

Herramienta para cargar y estresar una aplicación web, de fácil uso, consistente, que te permite analizar el rendimiento y encontrar cuellos de botellas según distintas configuraciones. Ofrece simulaciones precisas de la navegación realizada por un usuario, admite diferentes usuarios en un único test, válido para aplicaciones dinámicas y contenidos HTTP/SSL y devuelve detallados informes y datos sobre los tests realizados.

testing7.png

WAPT

Charles Web Debugging Proxy

Interesante proxy HTTP, monitor HTTP y reverse proxy, que permite al desarrollador ver todo el tráfico HTTP que existe entre su máquina e Internet. Muestra las peticiones, las respuestas y las cabeceras HTTP (junto a las cookies e información de caché). Realizado en Java, permite simular una conexión tipo modem para saber como se ve tu aplicación web mediante este tipo de conexión. De especial utilidad para los desarrolladores de Flash para ver el contenido de LoadVariables, LoadMovie y cargas de XML.

testing8.png

Charles Web Debugging Proxy

Gracias Alexdw

Supongo que hay muchas otras más, y os invito a que nos digáis cuales para añadirlas y así aumentar la lista.

10 ficheros que debería tener cualquier web

ByLuis

Cuando se realiza una web suelen ser necesarios una serie de ficheros que en algunas ocasiones no existen:

  • 404.html: para mostrar un mensaje de error que indique que la página visitada no existe, algo que ocurrirá más veces de las que pensamos.
  • about.html: una buena página about ofrece información de forma rápida sobre lo que el sitio hace, indicando por qué ha sido creada, qué deben tener en cuenta los usuarios, algunos enlaces de navegación. Eso sí, ante todo debe ser concisa y no muy extensa, porque entonces la gente no obtiene la información deseada.
  • contact.html: información sobre quién está detrás de la página y un medio para comunicarse con ellos, ya sea por internet u otros medios.
  • copyright.html: protege tus contenidos, ya sea con copyright o Creative Commons, pero que quede claro a quién le pertenece el contenido y que se puede hacer sobre él.
  • index.html: aunque tu página principal no sea esa, es conveniente que este fichero apunte a tu página principal. Si se es generoso también habría que hacerlo con el fichero index.htm e index.cgi.
  • index.rss: para aquellos que quieren leer la información que se ofrece de forma rápida mediante feeds.
  • privacy.html: si vas a obtener información de los usuarios, es necesario indicar qué se va a hacer con esta información y cómo se va a tratar.
  • robots.txt: para que los contenidos que deseas de tu web sean indexados automáticamente por los buscadores.
  • security.html: el uso no es siempre el mismo, pero si existen temas que conciernan a la seguridad es conveniente usarlo, por ejemplo si se usan datos sensibles de los usuarios o si existen procedimientos de seguidad.
  • sitemap: un lugar donde el usuario puede tener un vistazo de la estructura general de la web y así poder moverse con facilidad.

Web development tips: Ten (or a few more) files every Web site needs

|

Lógica de aplicación y plantillas mediante PHP

ByLuis

Cuando desarrollamos una aplicación web, algo muy importante es separar la lógica de la aplicación de la presentación. En el siguiente artículo, nos comentan como hacerlo mediante PHP y el sistema de plantillas Smarty.

Primero nos explica la direfencia entre la lógica de aplicación, la cual se encarga de las operaciones como acceso a base de datos, validación de formularios, de la lógica de plantillas, que es la que se preocupa únicamente de mostrar la información.

Dentro de la lógica de aplicación nos tenemos que ocupar de la inicialización y configuración de la lógica de plantillas:

<?php
$smarty = new Smarty();
$smarty->display('index.tpl');
?>

Y en la plantilla mostraremos la información:

<p>
Title: {$title|strtoupper}
Summary: {$summary|truncate}
</p>

Hay que tener cuidado de no cometer el error de en la plantilla modificar el formato del texto, por ejemplo quitarle espacios u otras cosas que corresponden a la lógica de aplicación.

Os recomiendo el artículo, porque viene muy claramente explicado, con ejemplos y nos puede ser de mucha ayuda.

Application logic versus template logic

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer