Cosas que no se debe hacer al desarrollar un sitio web

 2 Comentarios   Accesibilidad y Usabilidad, Estándares, Diseño Web, Browsers, Internet, Curiosidades   May 30th, 2007   Enviar por e-mail
3 Votes | Average: 2 out of 43 Votes | Average: 2 out of 43 Votes | Average: 2 out of 43 Votes | Average: 2 out of 4 (3 votos, promedio: 2 de 4)
Loading ... Loading ...

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/

  1. 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!)
  2. 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.
  3. 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.
  4. 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.
  5. No pretendas reinventar la navegación de los sitios web.
  6. 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.
  7. 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-)
  8. 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.
  9. Los menús de navegación mejor en texto que en imágenes. (No necesariamente)
  10. Un flujo de navegación bien pensado con subsecciones siempre es mejor que utilizar menús desplegables.
  11. 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.
  12. Cuida el tiempo que necesita la página para cargarse.
  13. 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.
  14. 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.
  15. 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”

 0 Comentarios   HTML y CSS, Diseño Web, Tips Avanzados   May 29th, 2007   Enviar por e-mail
 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 (No hay votos)
Loading ... Loading ...

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.

Web: http://particletree.com/

ClickHeat: Mapa de clics realizados en un sitio

 0 Comentarios   Herramientas, Internet, Curiosidades   May 28th, 2007   Enviar por e-mail
1 Votes | Average: 3 out of 41 Votes | Average: 3 out of 41 Votes | Average: 3 out of 41 Votes | Average: 3 out of 4 (1 votos, promedio: 3 de 4)
Loading ... Loading ...

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)

 4 Comentarios   HTML y CSS, Accesibilidad y Usabilidad, Diseño Web, Herramientas, Tips Avanzados, Programación   May 23rd, 2007   Enviar por e-mail
4 Votes | Average: 3.25 out of 44 Votes | Average: 3.25 out of 44 Votes | Average: 3.25 out of 44 Votes | Average: 3.25 out of 4 (4 votos, promedio: 3.25 de 4)
Loading ... Loading ...

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.

Web: http://dhtmlsite.com/

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.

Web: http://www.inknoise.com/

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

 0 Comentarios   HTML y CSS, Estándares   May 23rd, 2007   Enviar por e-mail
 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 (No hay votos)
Loading ... Loading ...

CSSInteresante recurso que contiene algunas propiedades básicas del CSS compiladas en un solo documento.

Web: http://lesliefranke.com/

Iconiza.com: Diseño personalizado de iconos

 5 Comentarios   Personal, Diseño Web, Diseño Gráfico, Iconos, Eventos   May 21st, 2007   Enviar por e-mail
2 Votes | Average: 2.5 out of 42 Votes | Average: 2.5 out of 42 Votes | Average: 2.5 out of 42 Votes | Average: 2.5 out of 4 (2 votos, promedio: 2.5 de 4)
Loading ... Loading ...

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)

 0 Comentarios   Herramientas, Diseño Gráfico, Eventos   May 19th, 2007   Enviar por e-mail
2 Votes | Average: 3.5 out of 42 Votes | Average: 3.5 out of 42 Votes | Average: 3.5 out of 42 Votes | Average: 3.5 out of 4 (2 votos, promedio: 3.5 de 4)
Loading ... Loading ...

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)

 1 Comentario   Herramientas, Diseño Gráfico, Eventos   May 18th, 2007   Enviar por e-mail
 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 (No hay votos)
Loading ... Loading ...

"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

 0 Comentarios   HTML y CSS, Accesibilidad y Usabilidad, Estándares, Diseño Web, Herramientas, Programación   May 11th, 2007   Enviar por e-mail
3 Votes | Average: 3.67 out of 43 Votes | Average: 3.67 out of 43 Votes | Average: 3.67 out of 43 Votes | Average: 3.67 out of 4 (3 votos, promedio: 3.67 de 4)
Loading ... Loading ...

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:

  1. Make fewer HTTP requests
  2. Use a CDN
  3. Add an Expires header
  4. Gzip components
  5. Put CSS at the top
  6. Move JS to the bottom
  7. Avoid CSS expressions
  8. Make JS and CSS external
  9. Reduce DNS lookups
  10. Minify JS
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Turn off ETags
  14. Make AJAX cacheable and small

Via: http://www.skrenta.com/

Web 2.0 Awards 2007

 1 Comentario   Diseño Web, Eventos, Internet   May 10th, 2007   Enviar por e-mail
 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 (No hay votos)
Loading ... Loading ...

Category 1st Place 2nd Place 3rd Place
Blog Guides Technorati Bloglines Findory
Bookmarking Ma.gnolia Furl Clipmarks
Books Lulu Biblio Library Thing
Business Squidoo Instant Bull Shopify
City Guides & Reviews Yelp Judy’s Book Yahoo! Local
Classifieds and Directories Craigslist Oodle vFlyer
Collaborative Writing and Word Processing Google Docs and Spreadsheets Writeboard ThinkFree
Communication Meebo Campfire MailEmotion
Content Aggregation and Management Wufoo ProjectStat.us EditGrid
Digital Storage and Remote Access Omnidrive Esnips TotoExpress
Events Upcoming Eventful Confabb
Feed Management FeedBurner Attensa BlogBridge
Fun Stuff Cocktail Builder One Sentence Fuzzmail
Games Arcaplay Games2Web Guess-The-Google
Health PEERtrainer Medstory Healia
Hosted Wikis Wetpaint PBwiki Stikipad
Lists and Polls 43 Things Statsaholic Listdump
Mapping Google Maps Wayfaring Frappr
Marketing Intellicontact Conduit PlugIM
Mashups Ning Boxxet Coverpop
Mobile Technology Twitter Plusmo JuiceCaster
Music Pandora Last.fm Discrevolt
Online Desktop Goowy Desktoptwo EyeOS
Organization Google Apps Zoho Backpack
Philanthropy Care2 Donor Choose Be Green Now
Photos and Digital Images Flickr Picasa Picnik
Podcast Services Odeo PodShow PodOmatic
Professional Networking LinkedIn Spoke Xing
Questions and Advice Yahoo! Answers Minti Say-So
Real Estate Zillow HousingMaps iiProperty
Retail Threadless Etsy WipBox
Search Rollyo Swicki Pipl
Social Networking Facebook Mingle2 Imbee
Social News Digg Reddit Newsvine
Social Tagging Del.icio.us StumbleUpon BlinkList
Start Pages Netvibes PageFlakes Personalized Google
Travel Farecast Kayak RealTravel
Video YouTube Dailymotion Metacafe
Visual Arts ColorBlender Swivel The Broth
Web Development and Design CakePHP Prototype Javascript Framework Yahoo! UI
Widgets YourMinis SpringWidgets Flock

Website: http://www.seomoz.org/web2.0

Google Analytics: Reloaded!

 2 Comentarios   Diseño Web, Herramientas, Google, Internet   May 9th, 2007   Enviar por e-mail
2 Votes | Average: 3.5 out of 42 Votes | Average: 3.5 out of 42 Votes | Average: 3.5 out of 42 Votes | Average: 3.5 out of 4 (2 votos, promedio: 3.5 de 4)
Loading ... Loading ...

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:

Artículo relacionado: 27 características de Google Analytics  (Lo vi en Andufo)

Tutorial: Crea botones atractivos en CSS

 0 Comentarios   HTML y CSS, Diseño Web, Tips Avanzados   May 8th, 2007   Enviar por e-mail
 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 (No hay votos)
Loading ... Loading ...

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!

 1 Comentario   HTML y CSS, Estándares, Diseño Web, Templates   May 7th, 2007   Enviar por e-mail
 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 (No hay votos)
Loading ... Loading ...

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!

13styles css vert-one menu

Vert-one

13styles css saturday menu

Saturday

13styles css dolphin menu

Dolphin

Listado completo: http://www.13styles.com/

¿Qué opinan mis lectores?

 3 Comentarios   Curiosidades, Encuestas   May 4th, 2007   Enviar por e-mail
 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 Votes | Average: 0 out of 4 (No hay votos)
Loading ... Loading ...

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?

  • Agregar Respuesta
Ver Resultados

Silvertab: Administrador de Contenido Open Source

 3 Comentarios   HTML y CSS, Herramientas, Internet, Programación, CMS   May 4th, 2007   Enviar por e-mail
1 Votes | Average: 3 out of 41 Votes | Average: 3 out of 41 Votes | Average: 3 out of 41 Votes | Average: 3 out of 4 (1 votos, promedio: 3 de 4)
Loading ... Loading ...

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/

Siguiente página »

Populares


Comentarios Recientes


Artículos Anteriores