Interfaz:
Diseñen pensando en el sustrato: dispositivo y sus capacidades/limitaciones, resolución de pantalla, tamaño del browser (incluyan las barritas esas que se agregan como add-on de Yahoo, Google, Facebook, Hotmail, Favoritos, etc.) e incluso orientación (si es mobile, involucra rotación de la pantalla). Hoy en día ya no consideramos la cantidad de colores, pero sí en el formato de la pantalla.
Accesibilidad:
La accesibilidad no sólo se refiere a la discapacidad del usuario (ceguera, dislexia, daltonismo) sino que se incluye a su incapacidad tecnológica (computador antiguo/lento, browser anticuado e incapaz de ser actualizado, etc). Para esto, el diseñador debe considerar el fallback (o graceful degradation) para que este usuario pueda realizar la tarea que está destinado en tu sitio web, pero claro no con la misma experiencia por la cual fue diseñada.
Funcionalidad:
¿Va a ser en Flash o en HTML? ¿Utilizaremos Javascript (no es necesario que sepas programar, pero sí cómo funciona y bajo qué límites)? ¿Estará bajo algún CMS (para sacarle más provecho a sus funcionalidades)? Es bueno tener esto claro desde antes mismo de poner manos a la obra. Una buena conversa con el desarrollador ayuda mucho, y seguro aprenderás algo nuevo.
Experiencia:
Al contrario del diseño impreso, en web el diseño no es plano sino que tiene profundidad. No me refiero al burdo 3D, sino que a la interacción que existe de tu interfaz con el usuario. Es vital considerar la experiencia con la cual el usuario interactuará, y esto va muy ligado con la interfaz y funcionalidad. Es imperativo -y veo a diario una gran falta- tener claro el diseño de los elementos clickeables: enlaces, botones, mouseovers y si aparecen con fadeInOut o con slideInOut, etc.
Flujo:
Si trabajas con un arquitecto de información éste te deberá proveer de todo el flujo a ser diseñado y construído, pero sino debes tomarte un tiempo más de lo habitual para planificar antes el flujo completo que existirá en tu sitio y diseñarlo. Aquí incluyo el diseño de los preloaders, de las validaciones de los campos de formularios, de los mensajes de error, de éxito, si hay envío de correos de confirmación se deben diseñar también etc; se deben considerar todas las pantallas existentes en la navegación.
Orden:
Trabajar en equipo es trabajar en sincronía: así como en el atletismo, en web trabajamos en posta y ésta debe pasarse de la manera más ordenada posible para que todos podamos llegar a la meta a tiempo. Si vas a entregar un PSD/PNG en capas, que éstas estén ordenadas con su nombre descriptivo y ojalá en carpetas. Si entregas 1 archivo con todo el proyecto, que esté en un peso considerable (acoplando/combinando capas que sepas que no se van a utilizar separadas), entregando la tipografía si ésta no es web-safe, y ordenando las diferentes pantallas del proyecto en sus respectivas carpetas. Se agradece mucho, pero mucho esta consideración.
Palabras finales: profesionalícense. Vayan más allá de lo que hacen actualmente, y que creen que deben hacer. Siento que el mercado ve a los diseñadores como burdos ‘dibujantes‘, pero en actitudes veo que son los mismos diseñadores quienes hacen esa imagen, no toman en serio y no son serios con su trabajo; por supuesto no generalizo pero hay una gran masa que actúa como lo lleva la corriente, y no son los generadores de esa energía. Puedes incluso llegar a pensar "pero si no me pagan para eso", pero lograrás un punto donde puedes negociar mejor tu valor en la empresa o por el trabajo realizado.
Espero haya aportado mi grano de arena, para una mejor profesión.
]]>
Google Chrome Frame es un plugin open source que trae la rapidez y versatilidad de Webkit (el motor por detrás de Chrome y Safari) directo a IE6. Con esto, podrás fácilmente utilizar todo lo que siempre quisiste sin preocuparte de este malogrado browser, incluyendo CSS3, HTML5 y Javascript.
Lo bueno es que utilizarlo es pan comido: basta con agregar una etiqueta dentro del <head></head> en todas tus páginas que detecta si el usuario -que utiliza IE6- tiene o no ya instalado Google Frame: si no lo tiene, lo redirecciona a una página para su instalación; si el usuario ya lo tiene instalado, comienza automáticamente a instalarse:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Alternativamente, tambien puedes utilizar un script que realiza la misma detección:
<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>
CFInstall.check({
destination: "http://www.misitio.com"
});</script>
<![endif]-->
Esto incluye un <iframe> en el sitio donde le indica al usuario las instrucciones para instalar Google Frame. Una vez instalado, el usuario es redireccionado a lo que hayas declarado en destination.
¿Y cómo funciona?
La primera vez que lo instalé en un PC con WinXP e IE6, realmente me sorprendió. Lo que hace es colocar un marco por sobre el browser mismo, sin que se note que es algo ajeno al navegador. Este marco funciona con todos los botones que por defecto el usuario típico de IE6 está ya acostumbrado (y los que son algunas de las razones por las que no se actualizan nunca). Se ve como IE6, pero su motor es Webkit, lo que más nos interesa. Atrévanse a utilizarlo en sus proyectos, y ojalá puedan tener más tiempo y libertad para crear y menos para arreglar defectos.
Links:
]]>Scrum es una metodología ágil de manejo de proyectos digitales (generalmente software). Puede ser tomado como un proceso, lo que hace más interesante aún esta metodología. Algunos incluso se atreven a mencionarlo como capaz de ser utilizado en el desarrollo de cualquier producto; pero lo que más interesa es la capacidad de entregar un producto con un conjunto de funcionalidades específicas a cada iteración.
Algunas de sus características son:
- Es ágil ya que funciona con cortas iteraciones de tareas pre-definidas.
- Scrum no controla tiempos, sino que tareas de desarrollo.
- Envuelve prácticas ya existentes, por lo que su implementación no confiere un cambio radical en la manera de trabajar.
- Es basado en el trabajo en equipo.
- Al ser ágil, se incrementan en cada iteración funcionalidades y se adapta rapidamente a los cambios que éstos pueden sufrir.
- Aumenta la cooperación entre los integrantes del equipo y su comunicación.
- Scrum es una manera de detectar causas de conflictos y errores en la entrega de productos.
- Maximiza la productividad.
- Es escalable desde simples proyectos hasta organizaciones enteras.
- Puede ser implementado al inicio del proyecto, a la mitad o cuando esté con problemas y retrasos en su entrega.
Scrum es un set de prácticas y reglas interrelacionadas que optimizan el desarrollo, reduce la sobrecarga organizacional y sincroniza los requerimientos con prototipos iterativos. Basado en teorías de control de procesos modernas, Scrum permite que un desarrollo sea mejor abordado teniendo en cuenta los recursos disponibles y tiempos predefinidos.
Parece milagroso, pero no es la solución a nuestros problemas. Por mi experiencia, necesitas que se junten algunos factores para que puedas implementar Scrum en un proyecto con éxito:
- Un pequeño tiempo (hasta 2 dias) de implementación y/o adaptación.
- Un equipo ordenado y acostumbrado a cambios a mitad de un proceso.
- Un jefe de proyecto que sepa lo que está haciendo.
- Un cliente que acepte la propuesta de que es un cambio que será para mejor.
Bueno, y ¿cómo se utiliza?
La clave del éxito de Scrum está en el uso de medidas que maximizen la flexibilidad y riesgo mientras mantienes el control. La mayoría de los proyectos tratan de evitar riesgos, aunque ésta sea una parte inherente del desarrollo web y de software.
Manten tus amigos cerca, y tus enemigos más cerca aún
Las variables de un desarrollo son: riesgo, funcionalidad, costo, tiempo y calidad, las que pueden ser estimadas al inicio mismo del proyecto. Cada variable comenzará a cambiar en el momento en que el proyecto comience, y pueden ser aumentadas o disminuidas de acuerdo al avance del desarrollo (aumenta funcionalidad por mayor tiempo y costo, por ejemplo).
El uso de controles es la espina dorsal de Scrum, y sirve para establecer, mantener y monitorear parámetros claves. Estos controles se tornan críticos cuando te encuentras con incertidumbres, comportamiento impredecible y el amargo caos (sabemos que siempre existen…). Los controles utilizados en Scrum son:
- Backlog (cartera)
- Una identificación de todos los requerimientos que deben cumplirse al final del desarrollo.
- Objetos / Componentes
- Contenedor de reutilizables
- Paquetes
- Grupo de objetos dentro del cual se desarrollará un ítem del backlog.
- Problemas
- Que deben ser resueltos por un miembro del equipo al implementar un ítem del backlog.
- Temas
- Que deben ser resueltos antes que un ítem del backlog sea asignado a un paquete.
- Soluciones
- A un tema ó problema.
- Cambios
- De actividades que son realizadas para solucionar un problema.
- Riesgos
- Asociados a un problema, tema ó ítem del backlog.
Estos controles son medidos y contínuamente mantenidos. Los mayores controles son backlog y riesgos; mientras backlog comenzará siendo grande, aumentará más aún cuando culmine la etapa de planificación pero disminuirá considerablemente mientras el proyecto avance y se vayan quemando cada uno de sus requerimientos. Riesgos por su parte irá en aumento a medida que se sumen temas y problemas, pero debe disminuir cuando se acerque la entrega del proyecto.
La clave: los Sprint
Un sprint es un conjunto de actividades de desarrollo en un tiempo pre-definido que conducen en un ejecutable demostrable. El intervalo entre cada sprint está basado en la complejidad del producto, evaluación de los riesgos y el grado de control deseado. Dentro del desarrollo del proyecto existirán varios sprint; inicialmente sus duraciones serán largas (hasta 6 semanas) pero deben acortarse a medida que avanzan (1 semana). Al final de cada sprint, el Scrum Master (quien maneja y aplica la metodología) puede cambiar backlog y riesgo en respuesta a eventos externos al proyecto (nuevas tecnologías, competitividades, fallos en herramientas, etc.) lo que se traduce en productos cada vez más acabados y cuya funcionalidad se va incrementando en cada sprint.
En un equipo de trabajo pueden haber muchos sprints trabajando en diferentes funcionalidades de un mismo producto; se recomiendan equipos de sprint que incluyan: desarrolladores, especialista en QA y un encargado de la documentación. Cada equipo debe trabajar en sus paquetes asignados para resolver los problemas al implementar backlogs. La idea es que al final de cada sprint el equipo entregue un código ejecutable y demostrable.
Se recomienda crear una reunión diaria (Scrum Meeting) donde se discuten los avances, problemas y posibles soluciones por parte de cada miembro del equipo; así todos estarán al tanto de lo que cada uno está haciendo y pueden aportar con soluciones. Esta reunión no debe durar más de 15 minutos y ojalá se haga al inicio de la jornada laboral.
Finalmente, el cierre
Cuando todos los factores determinados en el backlog están terminados y los problemas fueron completados, el encargado puede determinar que el proyecto está cerrado. Lo interesante en Scrum es que se asume que un producto nunca está completo y que constantemente se puede mejorar en cuanto a funcionalidades. A partir que aquí, se permite generar un nuevo ciclo y recomenzar Scrum.
Y ¿Cómo lo aplico?
Primero, debes documentarte bastante y entender bien lo que involucra implementar una nueva metodología de trabajo dentro de un equipo ya consolidado. Recuerda que manejar personas suele ser complicado y debes tener un proyecto algo liviano para hacer un primer intento. En una empresa de desarrollo de software o de TI no debería ser complicado, pero implementarlo en una agencia multimedia puede llegar a ser doloroso y con una alta tasa de fracaso, debido al ritmo vertiginoso con que se trabaja y la poca posibilidad de manejar proyectos individuales por vez (si entra un nuevo cliente, se debe tomarlo con la misma gente que ya está trabajando en otros proyectos con sprints ya definidos). En ese caso, el Scrum Master debe saber manejar muy bien multiples proyectos simultaneamente y tratar en lo posible de mantener el orden con el cliente.
No deja de ser un buen desafío, es cosa de atreverse.
]]>Es casi imposible crear una interfaz que encaje con todos los usuarios; pero aún así, es importante entregarles una variedad de opciones que les permita ejecutarlas mismas tareas de diferentes maneras, y de la que más le acomode. Después de todo, nuestra misión es no hacerle perder su tiempo con nuestros errores.
Y ¿cómo se comporta un usuario? No tengo una respuesta a esto; son muchas las variantes. Cada usuario es particular e impredecible en su comportamiento frente a un monitor, pero sí existen similitudes en lo que esperan cuando se les presenta una interfaz web:
- Quiere estar entretenido: el usuario navega por internet buscando algo interesante para sí mismo: información, juegos, pornografía, etc. Para entretenerlo, necesitas captar la atención y dirigirla hacia el objetivo de tu proyecto web. Cuando se dicta una charla, se considera que el mensaje está compuesto por un 60% de lenguaje corporal, 10% el contenido y 30% el tono de la voz. Extrapolando esto a un proyecto web, podríamos llegar a consolidarlo en un 60% de diseño, 10% de contenido y 30% del estilo en que ese contenido está redactado. ¿Conclusión? Puedes entretener al usuario con sólo presentarle lo que busca con un lenguaje acorde, mínimo.
- Quiere descubrir cosas: no necesariamente debes pensar que tus usuarios son estúpidos y que debes darle todo fácil; a ellos les gusta sentirse inteligentes y curiosear entre enlaces y conocer sus consecuencias; por algo las ventanas modales y los efectos que nos ofrecen las librerías Javascript se han hecho tan populares.
- No tiene tiempo de aprender cosas muy complicadas: bueno, tienes que hacer un balance entre no entregarles todo muy fácil, pero tampoco demasiado complicadas; siempre deberías guiar al usuario si le presentas nuevas interfaces o si tratas de innovar en alguna existente. Evita formularios complejos y con muchos pasos ya que la paciencia del usuario tiene límite.
Finalmentes ¿cómo obtener simplicidad? Claramente, no es un trabajo fácil. Sin embargo, existen ejercicios para llegar a ello:
- Enfócate en conocer tus usuarios, la audiencia que esperas lograr con tu sitio web, construir para ellos y reducir elementos innecesarios teniéndolos en cuenta.
- Creando diseños, interfaces e interacciones que logren seducir a tus usuarios en un nivel sensorial (estimulando sus emociones de alguna manera), obtendrás visitantes satisfechos y seguro volverán por más.
- Consistencia, consistencia, consistencia. ¿Mencioné consistencia? ¡Consistencia! Agrupa elementos visualmente, haz que el comportamiento sea similar a lo que el usuario espera. Por ejemplo, si defines que el estilo de tus enlaces serán subrrayados (text-decoration: underline), haz que todos los enlaces sean iguales, y no hagas que algunos no tengan subrrayados o en itálica; sólo lograrás confundir a tus usuarios.
Existe una paradoja que define muy bien lo dificil de dominar esta disciplina:
Es más simple crear una interfaz compleja porque es más complejo simplificarla.
La simplicidad toma tiempo, pero tiene su valor en los resultados.
K.I.S.S. es el acrónimo para Keep It Simple, Stupid, una manera cortés de decir Manténlo Simple, Estúpido.
]]>
¡Ah, pero no es soportado por IE6!
Mmm súper bueno, pero IE6 no lo permite…
Mejor eso no, no se va a ver en IE6…
Paralelo a esa conciencia de la que les mencionaba, han surgido corrientes más duras que mantienen proyectos que pretenden enterrar IE6 de la faz del mundo, y hasta le han dado fechas a su obituario. Mediante banners ó scripts (me incluyo con killIE), se pretende hacer notar al usuario de IE6 que hay mejores opciones; porque precisamente esa es la principal razón de porqué IE6 aún es un browser a considerar: la gran mayoría de sus usuarios no saben que existen otros, ya que fue el navegador por defecto que venía instalado en sus PC’s. Esa ignorancia nos ha afectado, y es nuestro deber hacerles ver que existen otras opciones mucho mejores, que pueden afectar su experiencia de navegación.
Personalmente he tomado una desición y postura hace un poco más de 1 año respecto a este tema: Les explico a los clientes las razones, les doy los argumentos necesarios, pruebas, estudios, estadísticas a la fecha para justificar que ya no ofrezco soporte para Internet Explorer 6.
¿Locura, no? Pues me explico.
- Ya no me limito para crear nuevas experiencias a través del diseño. Por ejemplo, utilizo PNG’s transparentes, aunque agrego un PNGfix por deferencia sólo para usuarios de ese browser.
- No me limito con las pseudo-class y selectores avanzados. los estilos degradarán bien, pero no como se verá en mejores browsers.
- Como he adquirido a través del tiempo la experiencia y la virtud de maquetar sitios cross-browser casi sin diferencias, no utilizo hacks ni comentarios condicionales.
- Utilizo librerías JS para efectos varios, pero no puedo hacer que se comporte igual como se ve en Firefox ó Safari; IE6 simplemente no puede con algunos efectos y animaciones.
Como pueden haber entendido, el sitio se verá bien tanto en IE6 como en los browsers modernos (no hay esfuerzo extra en eso), pero no tan bien y no como quisiera; ése es el soporte que ya no ofrezco y esa es mi lucha por educar al cliente y al usuario de ello.
Espero cada uno pueda dar lo suyo para que podamos evolucionar a mejores tecnologías, donde con menos esfuerzos en solucionar problemas podamos poner más energía en entregar satisfacciones. ¡HTML5 se viene, le tengo fe!
Links:
]]>OK, es importante, pero: ¿Porqué es tan importante?- se preguntarán. Porque nuestro oficio está estrechamente relacionado con la interacción humano-computador (HCI), y de esa interacción surgen varios dilemas con los cuales no estamos acostumbrados por naturaleza. Piensen que estamos interactuando con una máquina, y esa máquina responde a nuestros estímulos (mover un mouse por ejemplo gatilla que el cursor se mueve por la pantalla). Pero esa máquina nos entrega una respuesta ‘inteligente’ a nuestro estímulo, lo que puede interpretarse como una reacción natural, pero no lo es ya que fue programada por alguien similar a nosotros para ello. Esa reacción fue adquirida por nosotros a través del tiempo, y la actual generación joven tiene a Internet y a estas interfaces ya propias, y no conocen otro mundo sin ellas.
Actualmente la psicología cognitiva es utilizada para entender y predecir el comportamiento de los usuarios ante un rediseño o una innovación. En un sitio web donde su rediseño puede afectar a miles de usuarios, esta rama de la psicología es fundamental. Aunque las desiciones y conclusiones que se tomen de aquí no son absolutas -nunca lo son cuando se estudia al ser humano; somo seres impredecibles- sí es posible amortiguar errores y que éste no sea catastrófico o hacer perder millones en inversión. Recuerdo el caso de Yahoo! cuando rediseñó su actual web, algo que aún le repercute y del cual Google está muy agradecido, y el más reciente rediseño de Facebook queriendo acercarse más al modelo de Twitter, causando un rechazo importante de sus usuarios expresado en su misma plataforma.
Pero no basta con saber cómo piensa el usuario que se enfrenta a una interfaz; también debes conocer a fondo las herramientas disponibles para sacar el máximo provecho a la información y a la interacción del usuario con ella. No es lo mismo una galería de fotos normal que una que utiliza alguna caja modal para mostrar la imagen en mayor calidad, pero ¿realmente la necesitas? ¿y la accesibilidad? ¿qué sucede si el usuario tiene javascript deshabilitado? Estas son preguntas mínimas que deberías hacerte si quieres poner al usuario frente a tu cliente.
… continuará
]]>
Esta es una joya… nunca, pero NUNCA había visto un <div> dentro de la etiqueta <title>… ¡Al parecer pretendían implementar los estándares desde el comienzo del código HTML! Quedé anonadado…
]]>Hace mucho que debería haber escrito algo sobre este tema, pero esta espera ha sido mejor ya que he podido profundizar mi opinión al respecto. La última vez que recuerdo que un término inventado se haya tergiversado tanto y aún así puesto tan de moda fue comenzando el milenio, con AJAX que aún vende como pan caliente. Pero ahora me he llegado a asustar del mal entendido que abunda en el sector, y cómo gente relacionada con el marketing venden productos y aplicaciones como 2.0 y que no tienen nada que ver con el concepto original del mismo. Mucha de la culpa la tenemos nosotros quienes nunca definimos bien su significado ó los alcances del concepto.
Primero, me gustaría listar algunas ideas de lo que NO es la Web 2.0:
- Web 2.0 NO es AJAX, jQuery, Mootools, script.aculo.us ó Dojo; estos elementos soportan una nueva manera de mostrar el contenido de la Web, no la hacen
- Web 2.0 NO es RSS, pero sí cómo ésta ayuda a la llegada de la información más rápida y limpia al usuario que la pide
- Web 2.0 NO se trata de tecnología
- Web 2.0 NO se trata de programación
- Web 2.0 NO son elementos gradientes, que parezcan plástico o con reflejos; por lo tanto NO se trata de diseño
- Web 2.0 NO es Orkut, Facebook, MySpace, MSN y demases. Medios sociales han existido desde las BBS donde se compartían archivos; ICQ, IRC…
Este término fue acuñado por Tim O’Reilly y su equipo sólo para denonimar al conjunto de charlas (Web 2.0 Conference) que estaban dando a inicios del 2004; por lo tanto se ha concluído que es un término meramente comercial para fundar la web, para ayudar a que la internet fuera nuevamente rentable luego del burbujazo de las .com del 2001. Pero quiero ir más allá de eso. Me gustaría mostrar y explicar el fundamento real de la era anterior, la denominada Web 1.0 y la en superación, Web 2.0 para una pronta Web 3.0.
Es todo sobre información
Compartir información, aumentar el conocimiento a través del colectivismo, agregar valor singular mediante acciones comunitarias. Eso resume lo que significa realmente Web 2.0. Se trata de aumentar el conocimiento, el valor real de la información a través de lo que cada uno de nosotros, usuarios, podemos aportar.
Es el trabajo que se ha hecho con Wikipedia, la controvertida enciclopedia más completa y actualizada en la historia de la humanidad. Es lo que cada uno de los usuarios aportan para aumentar esta información, mediante la experticia de cada uno de ellos.
Es lo que se hace con del.icio.us, donde cada uno aporta lo que le interesa mediante links y se comparte a través de las etiquetas (tags)que se agregan a cada una de ellas. Ya no tienes tus bookmarks para tí sólo en tu browser; ahora los compartes para aumentar el conocimiento colectivo a través de tus intereses.
Son los comentarios de los weblogs, donde se construyen contenidos mucho más interesantes a partir de las opiniones de los lectores (muchas veces me entretengo más leyendo los comentarios que los propios artículos).
Es dejar que la web la construya el usuario, y no el editor frívolo detrás de una pantalla y que mediante el teclado ingresa texto que es inequívoco e irrestricto, lo que sería una definición simplificada de Web 1.0.
Ya por el otro lado, tenemos la hipotética Web 3.0, ó Web Semántica, donde la información es procesada mediante metadatos por máquinas (webservices) que entienden y satisfacen los requerimientos de los usuarios y de otras máquinas que usan contenido web; deriva de la visión romántica de Tim Berners-Lee de una web universal de intercambio de información, datos y conocimiento. Pero nuevamente, son ideales que poco a poco van tomando forma.
Por supuesto que el tema da para mucho más, pero con esto dejo zanjado las ideas que se están malinterpretando en el medio. Finalmente cada uno es quien los maneja como quiere, pero cada uno también es responsable de lo que crea. Y todos sabemos lo que sucede cuándo se especula mucho sin argumentos que lo fundamenten… los cimientos terminan por ceder.
Links:
]]>No desarrolles para la mayoría; no siempre tienen la razón y usualmente no saben lo que quieren.
Aunque 60% de los usuarios utilicen Internet Explorer 6, eso no indica que debemos desarrollar aplicaciones que funcionen sólo en IE6; si todos saltan a un pozo ¿tú te lanzarías también?
Usa siempre un reseter CSS.
Si tienes de 1 a 5 páginas simples y con formularios simples, basta con el reseter universal:
* {
margin: 0;
padding: 0;
}
Pero si tu proyecto es mayor, utiliza uno más completo.
Mantén siempre la simplicidad en todo ámbito; tanto del diseño como del código fuente.
Tatúatelo: Menos es más y aprovecha de medicarte contra la divitis y la classitis, y toda clase de abuso reiterativo innecesario en el codigo fuente. Estudia bien las herencias de estilos, la especificidad y cómo ordenar tu código fuente.
Diseña siempre pensando en el usuario y que éste tenga la mejor experiencia posible dentro de tu proyecto web.
"Me gusta diseñar experiencias, provocar emociones y quizás cambiar comportamientos al momento de utilizar la web; que ésta no sea una herramienta, sino una verdadera experiencia (como surfear para un surfista, esquiar para un esquiador, cocinar para un chef…)"- yo mismo.
Siempre separa el contenido y estructura (HTML) del estilo gráfico (CSS) y el funcionamiento (Javascript); cada uno en su propio documento.
Trata de linkear los estilos desde una hoja externa:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
y los JS:
<script type="text/javascript" src="utils.js"></script>
Nunca, pero nunca uses una etiqueta vacía sólo porque no puedes resolverlo de otra manera.
Si te encuentras entrampado y no hay caso de solucionar tal o cual problema, tómate unos minutos de descanso, sal al aire libre por un momento y luego vuelve con la cabeza más fría. También es buen recurso compartirlo con otras personas aver qué otros puntos de vista tienen sobre la misma situación pero ¡no más <div></div>!
No te asustes en hacer un sitio pesado, con imágenes PNG en alta calidad y con un elegante preloader que indique cuánto falta para la precarga, pero ¡HAZ QUE VALGA LA PENA!
Actualmente la velocidad promedio de las conexiones permiten bastantes más lujos que antes. No te reprimas de usar PNG’s transparentes de más de 100kb, pero con tal de que tengan un real uso práctico y estético.
Esfuérzate para que tu diseño y desarrollo cumpla por lo menos con niveles básicos de usabilidad, accesibilidad y degradabilidad.
Accesibilidad: Facilidad con la que algo puede ser usado, visitado o accedido por todos los usuarios. La accesibilidad web indica la capacidad de acceso a la web y sus contenidos por todas las personas, independiente de las limitaciones propias del usuario (discapacidad).
Usabilidad: en palabras de Jakob Nielsen: "atributo de calidad que mide lo fácil de usar una interfaz web".
Degradabilidad: principio en el cual un desarrollo realizado en determinado tiempo y para determinado medio se comporte de manera similar en ambientes paralelos o menos actualizados, vale decir: tu sitio hermoso y bien construido debiera comportarse similar si un browser no soporta estilos CSS ni Javascript o en un celular, por ejemplo. No se verá igual, pero debiera comportarse similar.
Fíjate y cuida de los detalles; lo que unos ven como pequeñeces, para otros son sutilezas que te diferenciarán del resto.
- quedó bastante claro creo-
Todas las reglas están para ser rotas, menos las 9 anteriores.
El análisis heurístico de Nielsen, la regla de primera lectura en pantalla, la lectura en ‘Z‘, que el logo debe ir SIEMPRE en el rincón superior derecho del diseño… ¡Patrañas! Debes tener la capacidad de innovar y poder mantener la cautividad y atención del usuario principalmente mediante el diseño. Si crees que el menú principal debiera ir a la derecha de la pantalla, diséñalo para que la atención del usuario se dirija a ese lado y justifícalo. Si siguiéramos esas reglas siempre, nunca habrían innovaciones tales como AJAX, ventanas modales, validaciones de formularios por blur entre otros. ¡Atrévanse!
Aún se ve un poco vacía y la iré poblando a medida que encuentre elementos que atraigan; así que espero vaya creciendo bastante con el tiempo. Creo que será una buena fuente de inspiración a todos quienes buscan destacarse en el ámbito gráfico, así como es la intención de Lo ví y me gustó.
]]>