Cosas que no se debe hacer al desarrollar un sitio web
Bastante bueno el resumen, un poco crudo a veces. Podría decir que estoy de acuerdo con la mayoría de afirmaciones. Incluyo comentarios breves.
Tomado de http://www.microsiervos.com/ y http://www.josiahcole.com/
- Nunca cambies el tamaño de la ventana del navegador del usuario automáticamente, es molesto, irrespetuoso y típico de los sitos de spam. (Muy cierto!)
- Mal si tu página es de las que primero carga una página señuelo y ésta “lanza” un popup con la página real. Error muy habitual de los sitios hechos en Flash.
- Tampoco está bien preguntar al usuario si quiere ver una caca de página directamente o prefiere entrar a un sitio guay lleno de colorines y animaciones pero para el cual necesita aditamentos especiales y esperar un rato a que cargue.
- Si todo tu sitio está hecho en Flash despide al desarrollador de la página y hazla otra vez; si la has hecho tú colócala en el apartado “sitios inútiles que he hecho” de tu portfolio y hazla otra vez.
- No pretendas reinventar la navegación de los sitios web.
- El contenido es el rey: si tu página web no tiene suficiente contenido o ningún texto real que no esté en una imagen contrata a un copy y despide a tu webmaster ahora.
- Nada de texto parpadeando [<blink>, los navegadores con clase como Safari ya ni la interpretan], nada de usar FrontPage, nada de popups ni en enlaces ni automáticos, nada de texto en scroll, nada de intros en Flash. (También muy cierto, en especial el uso de Frontpage y blinks -esto creo que lo usé una vez en 1996-)
- Si la página contiene música asegurate de que el usuario puede detenerla o apagarla y mejor si no se inicia automáticamente —lo mismo para el vídeo.
- Los menús de navegación mejor en texto que en imágenes. (No necesariamente)
- Un flujo de navegación bien pensado con subsecciones siempre es mejor que utilizar menús desplegables.
- Si la única forma de encontrar la información importante de tu sitio web es utilizando el buscador, despide al tío que hizo el flujo de navegación —y que seguramente utilizó menús desplegables.
- Cuida el tiempo que necesita la página para cargarse.
- Si pretendes hacer pasar al usuario por alguna ruta predeterminada para llevarle a alguna página concreta o a la versión demo de tu producto es hora de que te compres una granja de hormigas para aliviar tus deseos de usurpador de voluntades con alguna especie que lo permita.
- Si vas a poner vídeo olvidate de pedirle a los usuarios que elija distintos anchos de banda y formatos de video perdedores como RealPlayer, Windows Media Player, Quicktime,… Utiliza un reproductor de vídeo en formato Flash como hacen YouTube y similares —si, Flash ganó esta única batalla hace tiempo.
- No utilices técnicas y tecnologías nuevas en tu sitio web simplemente porque puedes o porque son novedosas. Las tecnologías nuevas son chulas, pero utilizalas sólo si realmente mejoran de algún modo la vida a tus lectores / clientes / usuarios.
Redefiniendo el elemento “Button”
Muy buen artículo de Kevin Hale acerca del uso y redefinición del tan utilizado elemento "Button", pieza fundamental de cualquier formulario en línea.
What we need is something better—something more flexible and meant for designers. Lucky for us, the solution already exists and all it needs is a little love. My friends, let me introduce you to my little friend : the <button> element.
ClickHeat: Mapa de clics realizados en un sitio
Click heat es un script que genera un mapa visual para conocer las zonas de clic más frecuentes dentro de un sitio.
ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones.
Web y descarga: http://www.labsmedia.com/
Código útil para tus proyectos! (Parte 1)
Aquí una colección de código muy útiles para el desarrollo de sitios. En su mayoría, por no decir que todos, gratis y listos para descargar!
Un buen ejemplo listo para usar, de un formulario con todos los campos que se puedan necesitar. Hecho con CSS y semánticamente correcto.
Web: http://nidahas.com/sandbox/form_template.html
Buena colección de scripts de calendarios basados en Javascript y CSS!
Este sitio ofrece también varios ejemplos de código abierto para descargar.
Galería de imágenes con Javascript: Esta galería crea una presentación con efecto de cross fade entre imágenes/fotos de un mismo tamaño.
Web: Descargar código | Demo
Crossfader de contenido: Este código permite hacer un crossfade entre contenidos de información (sets) usando javascript, CSS y Script.aculo.us.
Web: http://mikeomatic.net/ | Demo
Creador de Preloaders de Ajax: Muy útil herramienta para crear vistosos preloaders de Ajax. Ingresando parámetros basicos, genera un archivo GIF para descargar.
Web: http://www.ajaxload.info/
Tooltip para formularios: El título lo describe todo. Este código crea un "tooltip" cuando se ubica el mouse sobre un campo específico del formulario.
Web: Info y descarga | Demo
Con este script puedes crear un Agregador de RSS similar al iGoogle (o Google Home), que es tu página de partida en la cual puedes incluir los RSS de tus sitios preferidos. Tiene la capacidad de hacer "drag and drop" de las cajas creadas utilizando AJAX.
Web: Info y descarga | Demo | Más scripts de drag and drop
Crea Encuestas con AJAX (Ajax Poller): Crea e incluye fácilmente encuestas en tu sitio. requiere base de datos.
Web: Info y descarga | Demo
Layout o matic: Creador automático de layouts de sitios. Ingresa las variables necesarias en un pequeño formulario para poder descargar y previsualizar el layout generado.
ESWAT: Project Framework: Es un kit que contiene a manera de plantilla, la estructura de un sitio típico, así como los directorios de diseño y desarrollo en un estructura lógica y muy útil. También contiene scripts predefinidos.
Web: http://eswat.ca/
Ajax Uploader: Script para subir archivos a un servidor, utilizando Perl, PHP y AJAX. Se puede customizar el "look" del script.
Web: Información | Descarga
CSS: La guÃa referencial resumida
Interesante recurso que contiene algunas propiedades básicas del CSS compiladas en un solo documento.
Iconiza.com: Diseño personalizado de iconos
Después de un par de semanas de diseño y desarrollo, puse en línea un pequeño servicio de diseño personalizado de iconos gráficos. El sitio está actualmente en inglés, pero espero poder subirlo en otros idiomas más adelante.
El concepto es relativamente simple, si necesitas iconos para una aplicación desktop, web o también para Windows, los solicitas mediante un formulario de contacto con las características que requieras.
Los iconos son diseñados de manera personalizada. El pago es a través de Paypal y se puede elegir entre varios formatos y tamaños.
Visítalo!
www.iconiza.com
Modelo para Armar Diseño Gráfico 2007 (DÃa 2)
Empezamos el segundo día con mucho ánimo, listos para revisar el resto del temario y conocer finalmente "La verdad del Diseño" (no esperen encontrarlo aquí… no hubo tal, pero fue una nota graciosa durante el evento).
Varios temas claves fueron develados en este segundo y último día de Seminario. Empezamos por conocer los diferentes procesos del diseño.
"Mirar no es recibir, sino ordenar lo visible, organizar la experiencia" (Regis Debray)
El diseño debería pensarse como un espacio de experiencia, un espacio visual. Diseñar es ordenar ese espacio visual.
En cada decisión se establece una posible relación de sentido.
Mónica profundizó mucho en el concepto de "El viaje de Interpretación".
Otro tema clave y cubierto en profundidad con ejemplos visuales en la presentación, es el que tiene que ver con la "Tipografía".
La tipografía cumple una doble función: imagen - texto. Puede considerarse la base que sustenta cualquier pieza de diseño en lo visual y comunicativo. No debería ser relegada como el último elemento a ubicar en el proceso de creación de un diseño.
"Quien no sabe usar la tipografía, no sabe diseñar"
Seguramente una afirmación que sacudió un poco los conceptos e ideologías relacionadas con el diseño en más de un asistente en la sala. Muy cierto y a su vez perfectamente sustentado con el material visual que tuvimos la oportunidad de ver en la presentación de Mónica.
Vimos además la "Definición de la Tipografía". Un conjunto enorme de definiciones individuales que ocuparon completamente el espacio de una de las diapositivas de la presentación.
El "Rol del diseño en la construcción de la imagen local" fue otro tema interesantísimo y muy "de moda" en los países en desarrollo, quienes, pueden encontrar en la marca (país) una herramienta poderosa para fomentar su desarrollo economico en varios ámbitos, cultural, social, turístico, etc. (según Simon Anholt").
Entre otros temas, se destacó la importancia de las "Redes" en el desarrollo de sociedades, comunidades y más allá. El diseño constituye una vez más en una herramienta clave para impulsar estas redes.
En lo personal estoy muy satisfecho en haber podido asistir a este seminario, que honestamente sobrepasó mis expectativas ampliamente. Recomiendo también a todos los que lean este artículo y que de alguna manera tengan la oportunidad de asistir a un seminario, charla o taller de Mónica Pujol, que lo hagan. Una buena dosis de sentido del humor acompañó las complejas explicaciones de varios temas del seminario, el cual sin duda dejó satisfechos, así como lleno de expectativa y curiosidad por aplicar el contenido 16 horas de seminario, a los que asistimos.
Digital Graphic, representados por un grupo muy dinámico y atento dentro del evento, también pusieron su parte en mejorar la experiencia.
Esperamos entonces el siguiente seminario, que ya anunciaron que tendrá como tema, el nuevo paquete de programas de Adobe.
Modelo para Armar Diseño Gráfico 2007 (DÃa 1)
.gif)
"Hay comunicación porque hay equívoco"
Fue una de las primeras frases con las que Mónica Pujol inició el primer día de Seminario, Modelo para Armar Diseño Gráfico 2007. Con un salón prácticamente lleno, buena disposición y todo el día por delante, nos adentramos en los conceptos teóricos y prácticos más profundos del diseño gráfico, la comunicación y los modelos (herramientas) que existen para desarrollarlos.
Esta primera frase se refiere al hecho de que el diseño realizado por alguien, seguramente (como Mónica enfáticamente lo expuso) no será entendido por otras personas tal cual se lo intentó plantear.
Esto crea un interesante mundo en el cual los diseñadores (comunicadores) encuentran las oportunidades para realizar y exponer sus diseños a su audiencia, intentando con los medios y herramientas disponibles, lograr el éxito comunicacional de su trabajo.
Esto nos llevó a la
Primera Máxima del Diseño: "No hay un sólo modo de diseñar".
El concepto, o más bien, el campo del diseño es muy amplio y va más allá de una disciplina. Es el campo de la comunicación.
Inmediatamente nos encontramos con la
Segunda Máxima del Diseño: "En relación con qué?".
Este enunciado es importantísimo, porque la percepción de un diseño y lo que finalmente comunicará al que lo recepta, dependerá del contexto en el que se desenvuelva la pieza. El contexto también será una función del tiempo en el que se encuentre esta.
Vimos los diferentes momentos históricos del diseño, su evolución a través de las épocas y las tendencias e influencias que cada una de ellas sufrió, basados en su contexto temporal.
Revisamos varios modelos planteados por diferentes autores, los cuales son verdaderas herramientas para concebir, desarrollar y comunicar con el diseño.
Se habló sobre el diseño de la Experiencia para el usuario, así como el poder que tiene la imagen de establecer relaciones entre objetos y contenidos.
Microsoft, como auspiciante del evento, también tuvo un espacio dentro del seminario para mostrarnos la nueva línea de productos orientados a diseño web: Microsoft Expression. Bueno, como usuario de toda la vida de productos de Adobe y la ex Macromedia, quizá lograr un salto a un nuevo set de herramientas será un poco tedioso. En todo caso… testearemos!.
En escencia, un día muy completo, que apenas resumí muy brevemente en este artículo. Mañana será otro día de seminario.
14 rules for fast web pages
Steve Souders of Yahoo’s "Exceptional Performance Team" gave an insanely great presentation at Web 2.0 about optimizing website performance by focusing on front end issues.
This is a big presentation, with a lot of data in it (a whole book’s worth apparently), but half way through he boils it down into 14 rules for faster front end performance:
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put CSS at the top
- Move JS to the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Turn off ETags
- Make AJAX cacheable and small
Web 2.0 Awards 2007

Website: http://www.seomoz.org/web2.0
Google Analytics: Reloaded!
El servicio de Google Analytics, que era de por si excelente, mejoró significativamente con el más reciente "update" que los ingenieros de Google han incorporado.
La interface ha sido renovada para darle más claridad a la información que se presenta, opciones de personalización del "dashboard", opciones de exportación y envío de reportes a e-mail, entre muchas otras, hacen de esta herramienta un imprescindible para todos los niveles de planeación, diseño y desarrollo de sitios web.
What is new?
In the new version, your reports have been redesigned for clarity, greater visibility of important metrics, and ease of use. Here are just a few of the features you’ll notice:
- Email and export reports: Schedule or send ad-hoc personalized report emails and export reports in PDF format.
- Custom Dashboard: No more digging through reports. Put all the information you need on a custom dashboard that you can email to others.
- Trend and Over-time Graph: Compare time periods and select date ranges without losing sight of long term trends.
- Contextual help tips: Context sensitive Help and Conversion University tips are available from every report.
The following resources are available to help you get the most from the new Google Analytics interface:
- Report Finder Tool: will help you see where data from the previous interface is located within the new version (it is also linked to from within your reports on the left navigation menu): http://www.google.com/support
/googleanalytics/bin/static.py ?page=v1v2map.cs - Product tour: http://services.google.com
/analytics/tour/index_en-US .html - FAQs for more details about the new version: http://www.google.com/support
/googleanalytics/bin/static.py ?page=FAQ.cs - Help Center: includes articles related to the new version: http://www.google.com/support
/googleanalytics/ - Support: if you encounter any issues with the new version that you can’t resolve with the help center, you can contact our support team through the Contact Us link at the bottom of the help center web page, or receive higher-touch support through a Google Analytics Authorized Consultant. Find one here: http://www.google.com/analytics
/support_partner_provided.html - Analytics Help Forum: If you would like to discuss the new version or get tips from experienced users, please visit the Analytics Help Forum in English within Google Groups at: http://groups.google.com/group
/analytics-help
Artículo relacionado: 27 características de Google Analytics (Lo vi en Andufo)
Tutorial: Crea botones atractivos en CSS
Gracias a Guillermo me enteré de este interesante sitio, donde se detalla en un tutorial, como crear botones (con interactividad en el evento onClick) con poco CSS y un par de imágenes.
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.
Tutorial: http://www.oscaralexander.com/
Menus de navegación en CSS para descargar. Gratis!
Listado de varios diseños de menus de navegación creados en CSS para descargar (incluyen archivos CSS, PSD y HTML). La mayoría de ellos gratis!
Vert-one
Saturday
Dolphin
Listado completo: http://www.13styles.com/
¿Qué opinan mis lectores?
Tras buscar un plugin adecuado para encuestas, me topé con este: http://blog.jalenack.com/archives/democracy/, que es el que estaré usando en las encuestas a partir de hoy!.
Los dejo entonces con la primera!
¿Qué contenido te interesarÃa ver más en este blog?
Silvertab: Administrador de Contenido Open Source
Powerful enough for any website or intranet design and simple enough for your Mum to use
Es la frase con la que se "define" este CMS, Silverstripe, similar a Joomla o Mambo, incursionan en el mundo de los manejadores de contenido de código abierto con propuestas interesantes.

Algunas características:
- Simple. Intuitive and user-friendly
- Flexible. MVC framework
- Scalable. From 1 page to a million
- Fast. As responsive as a desktop app thanks to native Ajax support
- Standards Compliant. Fully XHTML compliant
- Modular. Easy to extend
- Template Freedom. No restrictions on the look and feel of your site
- Open source. It’s free in every sense of the word!
- Cross platform (Windows/Linux/Mac) and easy to install (PHP based)
Sitio Web: http://www.silverstripe.com/
Download: http://www.silverstripe.com/downloads/
Populares
- Notas acerca de HTML y su correcta visualización en e-mails



(4 / 4) - BitNami: Aplicaciones web empaquetadas y listas para instalar!



(4 / 4) - Tips y trucos de CSS (muy útiles)



(4 / 4) - Más fuentes y tipografÃas para descargar (Gratis!)



(4 / 4) - Layouts en CSS de 3 columnas fijas



(4 / 4) - Stemplate: Templates de elementos web



(3.86 / 4) - La importancia de los Meta Tags



(3.8 / 4) - Tutorial: Perfila imágenes con un par de clics



(3.8 / 4)
Comentarios Recientes
May 3, 2008 | kenneth
en: Crea tu propio logo Web 2.0April 23, 2008 | AlvaroG
en: Mega listado de generadores "web 2.0" en lÃneaApril 11, 2008 | Luigi Salas
en: Web 2.0 quiz!April 9, 2008 | piko ctm
en: Conceptos de Arquitectura de la InformaciónApril 9, 2008 | ALE
en: Más fuentes y tipografÃas para descargar (Gratis!)
Artículos Anteriores
- Project Gmail Grimace: Hagamos que Google nos escuche
- PrestaShop: Tu negocio en internet, fácil y gratis!
- FreeVectors.net: GalerÃa vectorial gratis!
- Excelente listado de tutoriales de Adobe Photoshop!
- 10 malententidos sobre la usabilidad
- 56 tutoriales de Flash!
- Buen tutorial de Fireworks para poner brillo a los elementos
- 22 sitios útiles para crear layouts en CSS

May 30th, 2007

(4 votos, promedio: 3.25 de 4)


