Archivo para la categoría ‘XML/CSS’

Aprender web es como montar bicicleta

Escrito por Tzek el 07/06/08
Clasificado en: Diseño Web, Métodos y proceso de diseño, Profesión, Reflexión, Tertulias, XML/CSS

Dado el post anterior que me dejó reflexionando, sobre cómo aprender a diseñar páginas web, comento con un colega: 

No estoy seguro si comenzar un curso de diseño web deba incluir manejo de tablas. Sino empezar directo con CSS.

Es como aprender a montar bicicleta. Puedes aprender con “rueditas” o sin ellas. Al final es lo mismo, acabas sabiendo como montar bicicleta.

Nota contextual: El “pecsi” tiene que ver con la premisa de que a los diseñadores les cuesta trabajo aprender “código”… Jum. ¿Quién habrá inventado y diseminado esta idea?

Razones para no maquetar web en Photoshop

Escrito por Tzek el 04/06/08
Clasificado en: Desde la web, Diseño Web, Diseño de Información, Diseño de Interfaces, Métodos y proceso de diseño, Profesión, Tecnología, XML/CSS

Casi me voy de espaldas cuando leí el título que puso Elías en Isopixel: Razones por las que NO hacer un mockup con photoshop para un trabajo web. De la traducción libre que está en blog tomé los siguientes puntos:

1. Photoshop limita completamente el trabajo, no se pueden incluir enlaces, áreas “clicables” o menús. Con el papel pasa lo mismo. Lo ideal es [añadido por mi] primero hacer un planteamiento muy básico sobre el papel [/añadido por mi] y luego pasarlo a CSS/XHTML, donde representaremos lo que se hizo en papel más resto de funciones básicas como navegación, enlaces etc.

  • Si estamos hablando de una maqueta o mockup, ya desde el papel y lápiz, es buena herramienta. La idea está en maquetar el sitio, hacer una disposición de los elementos, es el pensar cómo quedarían. Justo cómo ha mencionado un alumno de Javier Cañada dentro del programa Vostok. Lo que sí, viendo una maqueta como prototipo de baja fidelidad, en Photshop es posible concentrarse en los detalles visuales, esto es, enfocarse mucho en la forma. Aunque es tardado, su ventaja podría ser el dar una mayor calidad final en el prototipo a diferencia de tomar lápiz y papel. No hay que olvidar que en el prototipeo lo relevante es obtener, de ser posible, resultados sobre aspectos de usabilidad; ahí el photoshop es un arma de dos filos, es más fácil para este caso optar por lápiz y papel o un wireframe simple. No importa si se puede “cliquear”.

2. Photoshop proporciona muchas herramientas para conseguir detalles y justamente buscamos lo contrario, no queremos dar detalles concretos, solamente lo esencial. El programa nos distraerá en cosas que ahora no tocan hacer.

  • Efectivamente, pero justo se repite mi apreciación en el primer punto. ¿Qué tipo de calidad se requiere en el prototipo y con qué propósito se está realizando? Un detalle curioso es que si el proyecto lo amerita, un prototipo simple con CSS no puede competir con uno visualmente más preciso (de preferencia con una versión más simple en papel o wireframe ya evaluada).

3. La fuente de un sitio forma parte imprescindible y es muy probable que necesites cambiarla varias veces. Photoshop hace más complicado este proceso: abrir el .psd, seleccionar la fuente del lugar concreto que queremos cambiar, cambiarla, exportar a .png .jpg para poder enseñar los cambios a, por ejemplo, un cliente etc. Además de queen photoshop las letras NUNCA se comportan igual que en la web, a pesar de darle la misma fuente con las mismas características en el programa se ve de una forma y en la web de otra [añadido por mi] (nunca entendí porque pasa esto) [/añadido por mi].

  • Con respecto a la fuente, es claro que no todos los textos pueden ser arbitrarios, esto es, utilizar la fuente que quiera y luego pasarlo a imagen. Vale para ciertos encabezados y es obvio que hay que tomar en cuenta qué tanta sustitución con imagen habrá de hacerse en los textos y por qué sería conveniente tomar este tipo de decisiones. Para los textos “comunes”, esas cosas no se pueden probar mejor que con texto “en vivo”, que se está viendo en el browser y eso sí tiene que hacerse con CSS (referente a familia tipográfica, puntaje, interlineado y variantes).

4. Photoshop se enfoca en la producción y no en la productividad. En este primer paso se busca conseguir los puntos esenciales para crear un sitio accesible, claro etc. Luego nos preocuparemos de darle un aspecto “bonito”.

  • Eso no lo voy a negar. Si se maqueta en photoshop, cuestiones accesibilidad, navegación y usabilidad tienen que tenerse en la cabeza “en segundo plano” (como en cómputo, un proceso corriendo ahí atrás) mientras se diseña. Esto implica que no importa tanto la herramienta (photoshop o lápiz de papel) sino la integración de los conocimientos sobre diseño visual, diseño web, diseño de información, arquitectura de información, accesibilidad y usabilidad. Insisto, ¿para qué va a servir el prototipo o maqueta en cuestión?

5. Perderemos tiempo en pasar el mockup de photoshop a css/html.

  • Otra gran verdad. Llego a una conclusión rápida que este es un vicio, el cual tengo y esto casi seguro que tienen muchos que empezaron con esto de la web en los 90s cuando el ensamble de las interfaces venía en forma de tablas. Lo que creo que este punto puede ser evidente dependiendo de tu forma de “aprender web”; si desde el principio rompes con la maquetación en photoshop y te acostumbras a hacer “drafts” a partir de una lógica-de-ensamble vía CSS/HTML, entonces tu perspectiva/proceso sobre cómo ir diseñando, definitivamente cambia. La estructura mental para esta tarea cambia. Al comenzar a hacer la “integración” que menciono arriba con una maqueta hecha en photoshop, los tropiezos te enseñan a discernir cuáles áreas “no deben o tienen por qué tocarse”. Pero sí es interesante ver como el cambio en el paradigma de diseño web en cosas que a gente más reciente en estos rollos (post-liberación-de-las-tablas) hace que tengan soluciones creativas que pueden pasar por obvias para ellos.

6. Con html/css podremos seguir un flujo de trabajo mucho más productivo: Hacemos el cambio, guardamos y refrescamos.

  • Esto está relacionado con el punto anterior. En ese sentido, estoy de acuerdo. Aunque una vez pasada la migración de photoshop, esas áreas “intocables” tienen que trabajarse siempre como se plantea en este punto.

7. Photoshop es poco práctico, aunque lo manejes desde hace mucho tiempo, es complicado hacer las cosas de forma simple.

  • Si es el caso de un prototipo visualmente complejo, es tardado, pero no creo que ese sea el punto general de estos siete, sino identificar quién implica a quién, si photoshop luego CSS/XHTML o primero CSS/XHTML luego CSS. Sí son dos formas de pensar/diseñar diferentes. Y también hay que recordar el contexto, el usuario y el cliente. Mis comentarios van enfocados a sitios web “usables” por no decir cuasiplanos visualmente, no tanto a esos “interactivos” ganadores de premios y llenos de factores de diseño emocional y metáforas navegacionales rebuscadas. De una u otra forma, concuerdo en que hay que obtener un equilibrio.

Y la razón por la que casi me voy de espaldas, es porque, usualmente tengo que “concretar visualmente” una maqueta en photoshop, justo como estoy diseñando algo de web en estos días. Aunque, admito que en momentos de frustración, sobre todo por el trabajo “talachero” de pasar de PSD al ensamble CSS/XHTML donde a veces suele suceder que no queda justo como “habías pensado”. Un debate interesante el asunto.

PD. Ya está el foro de discusión en Isopixel al respecto.

Actualización.

CyberGus nos comparte también su opinión sobre este tema, con comentarios bien enfocados. 

Chuleta de conceptos básicos de CSS

Escrito por Tzek el 22/05/08
Clasificado en: Desde la web, Diseño Web, XML/CSS

Directo desde Ateneu Popular, Guepmascle, nos ofrece una cheat sheet o chuleta de conceptos básicos de CSS. Recomendable cuando se está empezando con esto de los CSS.

Acceder en: 
http://www.ateneupopular.com/2008/05/22/chuleta-css-conceptos-basicos

Guía de Derechos de Autor

Escrito por Tzek el 31/01/08
Clasificado en: Diseño Gráfico, Diseño Web, Diseño de Información, Profesión, XML/CSS

De lo último que he tenido de chamba está darle formato a una guía para los usuarios de bibliotecas y centros de información llamada “¿Respetas los derechos de autor?” tanto para impresión como para pantalla.

 Página web de la guía sobre derechos de autor del grupo Amigos

 La parte impresa.

Primero me tocó darle forma a la versión impresa… el diseño editorial había que enfocarlo más en la forma conveniente que en una reestructuración del contenido (el texto y cómo estaba organizado). De ahí que se tomara una paleta viva/vibrante con tonalidades naranja-amarillo-rojo-fucsia. Esto con el fin de dar origen a una mano (la identidad, el autor) impregnada del derecho de autor (el copyright)… Una idea muy simple quizá, pero quería probar que tan bien podría quedar… claro que a la bolita “copyright” número 50, yo ya estaba hasta la mauser… supongo que debe haber una forma óptima para hacerla.

Mano de Copyright para derechos de autor 

 Luego había que cubrir este rollo de lo no cuadrado, lo llamativo para los jóvenes usuarios; ergo, poner cosas “chuecas” (uta.. que creativisisisimo wey). Y eso dió pie un tetráptico (mucho espacio, mucho lujo) implicado en gran parte porque las dos guías en sí son diagramas de flujo por lo que requerían de un buen tamaño para leerse con facilidad.

Guía de Derechos de Autor al frente 

 guía de Derechos de Autor parte trasera

 Y ya. En teoría, pronto encontrará su guía de derechos de autor en su tiendita de la esquina o en su biblioteca más cercana (claro, mientras esté dentro de la sociedad de cooperación interbibliotecaria Amigos).

La parte web o mejor dicho, cómo IE puede fastidiarte tus diseños. 

Una desventaja de trabajar en Mac es que se te olvida (si no usas Firefox) que existe IE y otros exploradores además del Safari. Por cierto, ¿por qué los usuarios de Windows no usan Safari en vez de ponerle un skin a su FireFox?

Bueno, soy culpable… admito que debo tener más en cuenta a mis usuarios (con IE 6 y 7). Así que ya no puedo decirme más “luego lo ajusto a IE 6 y 7 y ya está” porque no es tan simple. 

Aunque la versión web de la guía la quise hacer simple, quería que tenga un punch visual (ya saben: colorcitos, sombras y cosas flotando).  Pero claro, IE me dió un lapo en la cabeza cuando quise poner PNGs a 24 bits flotando unos sobre otros y más si haces un remplazo de texto por imagenes. El IE, con su problema de flotamiento, “mueve” las cosas si aplicas el filtro a un PNG de 24 bits  y por ende, se te desactivan bloques que funcionarían como vínculos (da la sensación de que se “bloquean” los “botones”).

Hablando de 24 bits, me ganó la ignorancia porque hasta el momento no me “junciona” aplicarle bien el filtro para la transparencia desde la etiqueta IMG… así que la “manita” del header (ver imagen de abajo) no tuve más remedio que ponerla como fondo de un DIV hueco.

Otra página web de la guía sobre derechos de autor del grupo Amigos

Al final cedí y puse el menú como una lista simple. Si usas Safari verás el sombreado del texto vía CSS, pero hasta ahí.

Asumiendo el perfil de usuario, preferí colocar botones de imágenes en forma directa para descargar los diagramas de flujo; también activé vínculos en las imágenes.

Otra vez experimenté lo desesperante que puede ser IE, y no sólo el 6 por no aceptar PNGs de 24 bits, sino también el 7… Al final, como se dice por aquí, Microsoft “tiene el sarten por el mano”. En este caso, muchos de los usuarios verían esta guía bajo IE 6 (sí!!!, la versión 6!!!). Lo que me dejó pensando es si usar algo “menos imagen” y “más estándar actual” en lo futuro que haga de web. 

Si el IE no tuviera estas broncas (puesto que FireFox y Safari se ven prácticamente igual), no puede quitarse la cosquillita exploratoria de los PNGs con transparencia y los DIVs flotando y encimándose por doquier… pero ni pecs… el usuario es primero.

 

CMSer o no CMSer…ese es el dilema.

Escrito por Tzek el 13/07/07
Clasificado en: Diseño Web, Diseño de Información, Diseño de Interacción, Diseño de Interfaces, Profesión, Tecnología, XML/CSS

Este psot va dedicado a mis alumnas(as) que me pidieron info acerca de esto. Si se están tomando una cervecita en la playa por ser vacaciones, pues que sea al menos una a mi salud :)

Logos de CMS

¿Cómo está el asunto?

¿Hacer a mano las cosas o usar un sistema de administración de contenido (CMS)? Un CMS es una aplicación web, que como su nombre lo dice, te permite administrar contenido (como este blog, por ejemplo). En otras palabras, en vez de hacer la edición y actualización “a mano” de un sitio (por ejemplo), con el CMS solo vas agregando la nueva información tan simplemente como estoy ahora escribiendo este post… la “subida” de la info, el manejo de la base de datos para la info (texto, categorías, imágenes), la calendarización y otras cosas, eso te lo hace el CMS.

CMS, CSS, PHP, XML… Uff!!!

Yo soy nuevo en cuestión del blog, así que no puedo decirte cuál es mejor y por qué. Este blog está bajo uno llamado WordPress. Cuando intenté empezar con este asunto de los blogs, había considerado MovableType. Luego, Arturo, un diseñador gráfico de Hidalgo, me comentó sobre Joomla! y luego Larissa, diseñadora también, me presentó uno llamado Drupal. Por cierto, ambos me recalcaron que vieron mucho potencial al “facilitar” el manejo de información para sitios web, su navegación e interfaz.

En mi caso, y casi casi lo cuento desde una mecedora, soy de la vieja guardia. Empecé a hacer diseño web cuando creía que Jakob Nielsen había escrito la biblia de contenido en la Web y me consideraba todo un cowboy en el manejo de las tablas para layout y todo un as de los websafe colors… pero el tiempo pasó y cual dinosaurio, estaba a punto de convertirme en petróleo…

Escuchar más sobre CMS

En café internet hay este podcast donde platican sobre los CMS. Lo recomiendo a todos los diseñadores.
Acceso en: http://www.frecuenciacero.com.mx/cafeinternet

Estar in… Poner el portafolio bajo CMS

Oir de tantas “chunches” para hacer web me hizo entender la realidad de la web: uno nunca debe dejar de aprender si te interesa este biz. Como había escrito antes, el paso más complicado fue el cambio de casette y más que verme trendy y creerme usable por no usar tablas, necesitaba continuar artesanalmente construyendo mi portafolio personal para lograr ese cambio.

Recomiendo visitar estos dos portafolios realizados con CMS (creo que bajo Movabletype y el otro bajo Wordpress)
Mark McKay en http://mark.com.mx y el de
Seth Paxton en http://seth.com.mx

Nuevo portafolio: Tzek a un año…

Escrito por Tzek el 03/07/07
Clasificado en: Diseño Web, Métodos y proceso de diseño, Profesión, XML/CSS

1er Aniversario Tzek

Hace un año que me animé a conseguir alojamiento y tener un dominio desde OmiConcibeIdeas, mi viejo portafolio cuando estudiaba en el CIMAT…

Para festejar (1. vaya manera, 2. si no me autofestejo, pues quién… verdad?) ya era hora de darle una chamba de albañilería a Tzek Design. Este es el index resultante:

Página de Inicio nueva en Tzek Design

Aunque ya me he quitado el casette de las tablas de la cabeza, si que he sudado la gota gorda (tanto tiempo sentado) con este nuevo portafolio (super artesanal… todo “a pata”). El trauma de siempre, el ajuste de Internet Explorer (IE) porque no renderea bien las hojas de estilo… En Diseñorama hay un artículo muy bueno sobre condicionales para IE.

(Por cierto, si no han leído Diseñorama, de lo que se están perdiendo… Es como Verlee pero orgullosamente mexicana).

Ventanas Pop Up

Pero necio de que quería unas ventanitas pop-up tipo nuevo sitio de mac, estuve busque y busque un script que jalara bien para lo que quería… Esta es la dirección donde encontré por fin lo que necesitaba… Si, si.. ya sé… si mis compañeros computólogos me dicen que por qué no lo hice desde cero, pues prueba que estoy oxidado en JavaScript. Jejeje…

El diseño gráfico es muy minimalista y está inspirado en el papel, en particular la cartulina opalina y los suajes. La idea es ajustarse al manejo de aire compositivo, jerarquía tipográfica (croma, familia y peso) y contrastar fuertemente cuando se ocupe. La navegación fue reducida notablemente (ya checaré en Google Analytics si me funciona bien o no). Era importante hacerlo muy “petit”, considerando como resolución más baja 800×600 aunque con scroll vertical necesario, aunque en realidad va para 1024×768 como mínima conveniencia.

Portafolio de Diseño de Información

La “interacción” fuerte es un programita bajo AJAX tipo slider, el cual se llama Smooth SlideShow y funciona muy bien. Es genial, justo lo que necesitaba… ahí si no lo niego, está cabrón, estoy cero en AJAX (ya por definición de JavaScript) por lo que modifiqué el archivo de código y CSS para ajustarlo al estilo gráfico del portafolio, pero al final conseguí mi slideshow inspirado en flickr y componentes para CMS que he visto en la red.

Ilustrciones

Una de las cosas que más me entretuvo y gustó hacer sin duda fueron las ilustraciones. No tengo painter, ni una Wacom… ahí le fui dando con el mouse.

Pues así fue. Un año más… es hora de soplar las velitas del pastel.

Por qué diseñar con tablas es estúpido: el artículo

Escrito por Tzek el 31/05/07
Clasificado en: Diseño Web, Diseño de Interfaces, Profesión, Tertulias, XML/CSS

Yo que era un evangelizador del layout por tablas en los 90’s, os ruego…

Tengo un amigo computólogo, un colega de la fac dondé estudié que también tiene aptitudes y corazón para el diseño gráfico. De hecho creo que había muchos computólogos con alma de diseñadores en la facultad de matemáticas…

En fin, buscando información últil sobre temas de diseño, donde pudiera dar forma a sus ideas diseñísticas fuera de su mente, encontrñe este artículo super divertido y muy completo de diseño web vía CSS y marcado semántico. Muy a la web 2.0. Si quieres estar fashion, te recomiendo que lo leas:

Porqué el diseñar con tablas es estúpido:
problemas definidos, soluciones ofrecidas