|

Formularios CSS

ByLuis

Algo que parece de lo más sencillo a veces nos puede llevar más tiempo del que pensamos, el desarrollo de formularios, si queremos que sea bueno, puede ser muy variado, por eso os pasamos una recopilación de distintas implementaciones de formularios que hemos encontrado.
En ellos podrás encontrar desde el uso de fieldset y legend, maquetación sin el uso de tablas, división en grupos de datos, formularios dinámicos dependientes de selección de opciones previas y muchos otros más.
CSS-Based Forms: Modern Solutions
Vía / dzone

10 signos de una aplicación web insegura

ByLuis

Interesante lista de puntos que pueden evidenciar que nuestra aplicación web tiene problemas de seguridad:

Top 10 Signs You Have an Insecure Web App

Vía / dzone

Diferencias entre un buen diseñador y un gran diseñador

ByLuis

Estando a la espera de que nos cuenten las diferencias entre un mal diseñador y un buen diseñador, que sería algo que necesitamos algunos, nos quedamos con un buen artículo que nos explica las diferencias entre un buen diseñador y un gran diseñador.

Se trata del típico post que todo el mundo referencia y que uno se da cuenta que se entera de las cosas el último, por eso voy a referenciar donde lo he visto originalmente, donde lo he leido en español y por su puesto el original.

Entre las cosas que más me han gustado destaco lo siguiente:

Mientras un buen diseñador dispone de ciertos elementos y los organiza de manera estética, un gran diseñador se preocupa además porque el mensaje que expresa su diseño llegue a destino.

…los artistas crean problemas, los diseñadores los solucionan. Pero un gran diseñador se adelanta a un problema potencial, tiene visión.

La conclusión a estas ideas nos lleva nuevamente a la razón de ser del trabajo de diseño, que es justamnente lo que diferencia además a un diseñador de un artista: las necesidades y problemas que atiende el diseño suelen ser -por lo general- ajenas al diseñador. El diseñador no es más que un instrumento comunicativo en esencia.

Nine skills that separate good and great designers

9 habilidades que separan buenos y grandes diseñadores

Vía / Criterion

|

170 cheat sheets para desarrolladores web

ByLuis

Ya hace tiempo hablamos de un directorio donde podíamos encontrar 30 cheat sheets, en este caso se trata de 170, que nos ayudarán en nuestro desarrollo web.
Aunque no todas son de desarrollo web, si la mayoría. Organizada por categorías, podemos encontrar ‘chuletas’ sobre: ActionScript, Ajax, Apache, ASCII, ASP, C#, CSS, CVS, Firefox, Google, HTML, Java, Javascript, LaTeX, microformatos, MySQL, Oracle, Perl, Photoshop/Gimp, PHP, Python, expresiones regulares, Ruby, Linux, blogs, Windows y XMLs.
Yo ya le he dado a imprimir unas cuantas que me van a venir muy bien.
Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby
Vía / Digg

|

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.

|

‘Bocadillos’ en tu web

ByLuis

Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.
bubble.png

Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librería prototype, la css e incluir la siguiente línea para que funcione:

<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>

Yo como unica pega, intentaría hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.

Bubble

Vía / Fresqui

Concurso: enseña a realizar una página Web

ByLuis

mdw.pngEn Maestros del Web han lanzado un concurso en el que se pide enseñar a realizar una página web. En Sentido Web nos gustan todo este tipo de iniciativas, sobre todo cuando se trata de ayudar a otros a aprender lo necesario para introducirse en el mundo del desarrollo web.

Además, me han pedido que forme parte del jurado, lo cual, a parte de un honor, es una oportunidad de aprender de los concursantes que no pienso desaprovechar.

Bases:

Necesitamos que desarrolles una página web y la publiques en cualquier espacio a tu disposición. En donde debes explicar a los internautas los pasos necesarios para crear su página web. Puedes utilizar cualquier recurso: textos, audios, vídeos y animaciones, estructurados, en un sitio web. Los contenidos deben estar en idioma español.

El material debe ser inédito, de la autoría del participante y ceder los derechos de reproducción por medio de una licencia Creative Commons de Reconocimiento 2.5 (lo que significa que todo el mundo podrá difundir tu creación una vez se mantenga tu crédito correspondiente).

A quién va dirigido:

Toda aquella persona que tenga conocimiento de publicación de contenidos en la web.

Fechas importantes:

30 de noviembre 2006 – último día de recepción de trabajos.
11 de diciembre – presentación de los 10 mejores trabajos.
15 de diciembre – anuncio del ganador.

Premio:

Un iPod de 30GB en tu color favorito.

Procedimiento:

Para participar necesitarás estar inscrito en forosdelweb.com para que tengamos tus datos. Deja un mensaje en el tema de Inscripción al concurso para confirmar tu participación.

La dirección URL del proyecto deberá ser enviada por correo a concurso(AT)maestrosdelweb.com antes del 30 de noviembre. Deberás incluir tu nombre de usuario de forosdelweb.com y una breve descripción del proyecto.

Vía / Maestros del Web

|

Incluye sonido en tu web

ByLuis

Creo que no es necesario decir que cualquier exceso es malo, y que tampoco hay que demonizar ni al Flash ni al sonido en una web (esto me cuesta decirlo, pero es cierto). Pero en el caso de que queramos incluir sonido a nuestra página web y controlarlo mediante Javascript, si nos puede ser útil esta librería.

Se trata de Javascript Sound Kit, una clase Javascript que envuelve a un objeto ActionScript, en el cual se carga el sonido, que puede ser controlado por Javascript. Su uso parece bastante sencillo:

var mysound = new Sound();
mysound.loadSound("sonido.mp3", true);
mysound.setVolume(30);

Para aquellos que quieran criticar el uso ya sea de Flash o de sonido en la web (tienen todo mi apoyo), quizás les interese un ejemplo en el que puede ser útil, cuando tengo abierto GMail todo el rato, me avisa si llega un mensaje nuevo mediante un bip. Claro, que no lo necesito porque en Firefox tengo instalada una extensión que ya hace eso, pero no todo el mundo usa Firefox y no todo el mundo que usa Firefox tiene instalada la extensión para GMail.

Javascript Sound Kit

Vía / menéame

10 cosas que debe tener tu web

ByLuis

Lo mejor de la experiencia es que vamos aprendiendo de ella, y vamos mejorando, aunque no siempre es así y siempre nos vienen bien unos cuantos consejos sobre el desarrollo web.

  • Hazlo sencillo, las características que añadas, que sean para mejorar, no para distraer. Cuánto más fácil mejor para el usuario, mejor para tí.
  • Tu diseño y contenido son realmente importantes. Empieza con el diseño, maquétalo, desarróllalo y luego intenta que tu contenido sea lo que más haga que la gente se quede, pero con un buen diseño.
  • Ábrete lo máximo, comparte tus contenidos, crea una API para que otros puedan usarte, usa feeds.
  • Testea. Si, es lo más aburrido, lo de “beta” que está tan de moda ahora, no es solo algo de diseño, es una necesidad.
  • Empieza con lo básico y ve añadiendo funcionalidades de forma rápida y constante.
  • Persevera, no te dejes convencer de que no se puede hacer, si crees en el proyecto, sigue adelante.
  • No reinventes la rueda, sigue estándares, reutiliza herramientas y código en tus proyectos.
  • Planifica tu aplicación web para que admita escalabilidad y para que pueda crecer.
  • No pierdas de vista los microformatos, Adobe Apollo para la creación de aplicaciones de internet, Whobar para manejar identidades digitales y Akismet para luchar contra el spam.
  • Fíjate en la tendencia del contenido y el software social generado por los usuarios.

10 Things That Will Make Or Break Your Website

Snipplr: trozos de código

ByLuis

snipplr.pngA todos nos pasa que nos gusta reutilizar (copy/paste) aquellas trozos de código (snippet) que hemos creado en algún proyecto anterior y que no nos apetece volver a pensar cómo hacerlo. En vez de tener que buscar entre todo el código que tenemos y pasarse todo el tiempo diciendo “recuerdo haber hecho esto en tal sitio”, podemos usar Snipplr para guardar nuestros propios snippets o para usar los que comparten otros usuarios, organizados por lenguaje de programación y por tags.
Snipplr
Vía / Criterion