miércoles, 16 de diciembre de 2009

Google Chrome

Para todos los que hagáis web, sabéis que es importante probar los diseños en varios navegadores.

Aunque hace meses que salió y los registros de la W3C demuestran que tiene una importante cuota de mercado, el Google Chrome se define como la tercera opción.

El ranking de uso de navegadores quedaría así:
  1. Mozilla Firefox (todas las plataformas)
  2. Internet Explorer (sólo windows, suma de todas las versiones)
  3. Google Chrome (todas las plataformas)*
  4. Safari (Mac OS y Windows)
  5. Opera
El Safari ha tenido un importante crecimiento. Respecto a los datos de Noviembre de 2008, ha incrementado su distancia con el Opera en 1.1 puntos (el Opera se mantiene en un 2.4%).

[*] Será curioso ver las estadísticas para Chrome del mes de Diciembre. Es en diciembre cuando el navegador ha salido tal cual para Mac OS X (sin necesidad de que el usuario haga nada más que descargar e instalar).

EDIT: Antes de que nadie diga nada. Mis fuentes de estadísticas se basan en los logs de un sistema en el que se reconoce que es posible que las estadísticas no sean 100% fiables dado que el entorno es frecuentado por gente dispuesta a cambiar de navegador. Se reconoce que en otros lugares se recogen cuotas de uso de Internet Explorer superiores al 80% mientras que ellos recogen un porcentaje inferior al 50%. Aún así considero que las estadísticas (ver URL abajo) son un claro espejo de las tendencias en los entornos de usuarios medios y avanzados, con un mayor hábito en el uso de la tecnología. Es decir (siempre desde mi punto de vista personal) que son una muestra del grueso de los internautas habituales.

miércoles, 9 de diciembre de 2009

Crea tu propia tipografía manual...

Imprime la plantilla, la rellenas, la escaneas, la subes a la web y... listo!

URL: http://www.fontcapture.com/

martes, 24 de noviembre de 2009

Problemas con el CS4

Tengo dos problemillas por resolver...

1) Photoshop
A veces, se produce un desajuste entre el cursor de la herramienta y el efecto de la misma. Es decir, haces click en un punto con una herramienta en modo preciso (o el otro modo, da igual) y el efecto esperado ocurre unos cuantos pixels por debajo (unos 20, si he de dar una medida aproximada)
2) Flash CS4
El texto en la ventana de acciones se monta sobre si mismo. Es como si estuviera tocado el valor de separación entre caracteres.

De momento son los dos que he detectado en varios equipos. No ocurren siempre, pero tampoco han desaparecido con las actualizaciones. Ya os contaré.

EDIT: Este es el problema que tengo con el Photoshop en algunos equipos. Y con el ratón, no con la Wacom. http://forums.devshed.com/photoshop-help-88/photoshop-cs4-offset-brush-centrepoint-622768.html

lunes, 23 de noviembre de 2009

Web design Usability Checklist

Un interesante resumen...


EDIT: Hay un cuadradito azul que os llevará a otros dos interesantes artículos, uno sobre consideraciones previas y otro sobre optimización para buscadores.

viernes, 20 de noviembre de 2009

What The Font...

Identifica las fuentes a partir de versiones rasterizadas. No lo he probado, pero me lo han recomendado.

URL: http://new.myfonts.com/WhatTheFont/

sábado, 7 de noviembre de 2009

Más sobre el daltonismo y demás...

Más sobre el daltonismo (u otros problemas de visión) en el mundo del diseño. Esta vez una perspectiva desde el punto de vista del usuario final.

URL: http://critiquewall.com/2007/12/10/blindness?printable

jueves, 29 de octubre de 2009

Artículo sobre Daltonismo en la red

Un análisis de un caso práctico de importancia en cuanto a usabilidad.

domingo, 6 de septiembre de 2009

Diseño de iconos

Todos usamos ordenadores y estamos acostumbrados a ver iconos. Lo que pasa es que pocos son conscientes de la complejidad que puede llegar a tener un diseño de icono.

Es decir, hace unos añitos los iconos eran archivos especiales que contenian mapas de bits con una imagen pixelada (el tamaño dejaba poca libertad).

Pero hoy en día el diseño de iconos puede ser tan complejo y enriquecido como uno quiera. Como muestra, visitad esta página en la que se muestran algunos de los iconos de Apple. IMPRESIONANTES.

URL: http://www.cultofmac.com/icon-porn-feast-your-eyes-on-snow-leopards-beautiful-icons/15764

miércoles, 8 de julio de 2009

recomendaciones en Julio


Ya estan aqui de nuevo las recomendaciones mensuales de Booktique Libreria del Diseño, ademas de las recomendaciones podras encontrar muchos mas libros y objetos de diseño como las nuevas libretas y notepads de Pantone Universe.
Nos vemos por Booktique ;)
Descargar pdf Julio

martes, 23 de junio de 2009

UNIQLO y su calendario

La empresa japonesa de ropa "casual wear" ha hecho una súper página para su nueva presentación de colección.
La pagina consiste en un calendario meteorológico que te dice el tiempo que hace en tu ciudad a la vez que ves a cámara rápida imágenes de la vida en Japony y todo acompañado de una musiquita muy chula, también japonesa, por supuesto!
Esta superchulo y encima puedes incluirlo en tu blog o pagina web.
http://www.uniqlo.com/calendar/
Vamos que estos japos se lo curran muy bien para sorprendernos cada vez mas

jueves, 18 de junio de 2009

Objetivo: Medio Impreso

Varios tutoriales que tienen como objetivo el medio impreso...

URL: http://www.tutorial9.net/resources/40-top-notch-print-based-tutorials/

lunes, 15 de junio de 2009

jueves, 11 de junio de 2009

[Recopilación] Herramientas para el color

Como iba a añadir una tercera página relacionada con la gestión del color, he pensado en recopilar las últimas utilidades de este tipo que hemos añadido.

(haz click en las imágenes para ir a las webs)

La nueva en la lista es el ColorExplorer, que pinta muy bien para la gestión de colecciones de muestras. Hay que registrarse. Los usuarios gratuitos tienen un límite de almacenamiento de 10 paletas.

Una de las que ya vimos es Color Rotate. Hecha en Flash. Necesita registro, pero lo hace a través de cuentas de Google. Lo útil de esta es que nos muestra una perspectiva 3D de los colores que tengamos en la colección.


Y el primero que vimos es el Kuler de Adobe. También podéis registraros con una cuenta de Adobe y tiene la ventaja de contar con descargas de archivos de intercambio de paletas de Adobe.

las recomendaciones de Junio

Pues como habia dicho Jesús en un post anterior, cada mes traeré algo destacado de la tienda.
Y hoy toca como no... ¡¡Junio!!
Ahora ya no hay excusa para no saber que elegir... jejeje y los precios son muy asequibles comparando calidad/precio
DESCARGAR

Ya sabeis, en Booktique todo lo que necesitas para resfrescarte las ideas, ahora que llega el calorcillo del verano

Un saludo y nos vemos por Booktique!

Ah! Y hay exposicion de Kiko Alcazar ¡¡No te la pierdas!!

miércoles, 10 de junio de 2009

martes, 9 de junio de 2009

Web Design: Flash Sites

El otro día me hice con este libro de la línea ICONS de TASCHEN. La verdad es que soy más que reacio a utilizar el Flash en diseños web más que para cosas puntuales. La experiencia como usuario y como desarrollador me han llevado a esa conclusión.

El libro, en general, está bien. No es un libro de lectura, es un libro visual con el que deleitarse observando los diseños de una selección de webs hechas con Flash. Hasta aquí, cualquiera podría pensar "Qué tontería... pues abres el Google y te pones a mirar". La palabra clave es selección. Y es que estos proyectos no solo se muestran, sino que también tienen un pequeño comentario. Cierto es, que de una o dos líneas. Pero ese comentario sobre alguna funcionalidad o detalle suele ser bastante enriquecedor: cómo se modifican los contenidos, qué aspecto pesó más a la hora de desarrollarla, qué sección se destaca especialmente. Cierto es, también, que es mejor ir a la web (si es que existe todavía... sight) y revisarla en base a esos comentarios para obtener mejores resultados.

Lo mejor del libro, los dos casos de estudio que hay al principio del libro (¡¡lástima que sólo sean dos!!). De ellos he extraido ideas interesantes. Lo peor... pues el texto de introducción, que me puso de mala leche. ¿Porqué? Por lo de siempre. Flores y más flores al Flash, no podría ser de otra manera siendo el libro de lo que es. Y algunos aspectos me resultaron pedantes y demagógicos. Por ejemplo, cuando comenta que la usabilidad de un sitio se debe medir en base al tipo de usuarios a los que está enfocada. Y es verdad, pero la mayor parte de los sitios están enfocados a cuanto más público mejor.

El caso es que el sr. que escribe la introducción hace un comentario criticando a aquellos que piensan que si su madre no es capaz de utilizar un sitio web, es que no tiene la suficiente usabilidad. Con este comentario ya no estoy de acuerdo. Me parece que la madre de cualquiera es tan buena para probar la usabilidad de un sitio web como cualquier otra persona, siempre que la madre sepa lo que es un ordenador e Internet...

Cuando para afianzar su comentario dice que a ver si poniendo a la susodicha madre a los mandos de un Ferrari con cambio manual a ver cuantas veces se le cala y justificar así que no podemos decir que la pobre mujer no sabe conducir... demagogia.

Sigo pensando que por muy profesional que sea el público objetivo, no debemos desviarnos demasiado del principio KISS (Keep It Simple, Stupid). Y mi experiencia en el diseño de interfaces me lo ha demostrado. Para aclarar esto: el porcentaje de estudiantes de ingeniería superior de telecomunicaciones que no entiende una interfaz web que ha sido hecha para ser más simple que el mecanismo de un botijo, si bien no es elevado, es suficiente como para que los encargados de resolver las dudas no se olviden de que ahí fuera hay un mundo de gente que simplemente ve pero no mira.

La visión elitista de que sólo una mente especialmente creativa es capaz de entender un producto, me pone malo. Y eso si nos olvidamos de la accesibilidad, que por mucha mente creativa que tengamos si no tenemos el plug-in de Flash instalado con su versión correspondiente o superior...

Estoy de acuerdo con el sr. al que entrevistan en el caso 2:

...es imprescindible que los usuarios entiendan como está estructurado un sitio web y como funciona...

...no estoy de acuerdo con que el diseño de interfaces se haya detenido en algún momento a finales del milenio pasado, ni con que Jackob Nielsen sea el Moisés cibernético que escribió sus leyes definitivas...


En general, un producto interesante. Ya me haré con el tomo 2... :D

lunes, 8 de junio de 2009

domingo, 7 de junio de 2009

ColoRotate

Una nueva forma de visualizar la "distancia" entre colores...

URL: http://www.colorotate.org/

Patterns

Librería gratuita de patrones de tipo mosaico.

URL: http://www.patterncooler.com/

Herramienta online para generar patrones a partir de trozos de una imagen.

URL: http://repper.studioludens.com/

Diseño de una web en... ¿YouTube?

Curioso uso de las posibilidades de interactividad de YouTube para hacer una "web".


URL : http://www.youtube.com/watch?v=Elo7WeIydh8

Booktique: La librería del diseño


¡Ya está aquí! ¡Abrió hace dos semanas!

Nos ofrece una selección de productos de diversas marcas, principalmente libros y una selección de merchandising/artículos de regalo relacionados con el mundo del diseño (gráfico, modas, arquitectura, moviliario, decoración, cartelería...). También tiene un espacio dedicado a exposiciones.

URL: http://www.booktiquelibreria.com/

Ayer me pasé por allí y me hice con el libro Web Design: Flash Sites (Taschen) que ya comentaré en otro post. Además, le eché el ojo a un juego de tazas de café de Pantone.

Si todo va bien, en breve podréis contar con una doble nota mensual en la que Pablo nos recomendará un producto y nos informará de alguna destacable novedad. :D

sábado, 6 de junio de 2009

50 sitios web "a mano"

Recopilación de páginas web cuyos diseños se basan en ilustraciones.

URL: http://www.hongkiat.com/blog/60-beautiful-hand-drawn-web-design/

domingo, 17 de mayo de 2009

Comprobación de compatibilidad con navegadores

Archivo de navegadores viejos. Ideal para descargar e instalar en máquinas virtuales (Parallels Desktop, VMWare...) y comprobar si lo que estamos desarrollando funciona en otros navegadores.

URL: http://browsers.evolt.org/

viernes, 15 de mayo de 2009

Kuler

Adobe ofrece en esta web una posibilidad de selección de combinaciones de colores catalogadas.

URL: http://kuler.adobe.com/

domingo, 10 de mayo de 2009

Test de Creatividad

Genial campaña publicitaria de la escuela de arte y diseño panamericana.

URL: http://www.toxel.com/inspiration/2009/05/06/school-of-art-and-design-creativity-test/

jueves, 7 de mayo de 2009

Búsqueda de imágenes de Google

Han añadido una nueva opción. Ahora permite buscar las imágenes por color dominante...

Buscando "casas": rojas, amarillas, verdes...

domingo, 26 de abril de 2009

Pechakucha

Evento en que se exponen 20 diapositivas en 20 segundos cada una. Cada participante puede exponer el tema que desee. Los presentadores y gran parte de la audiencia vienen normalmente de los campos del diseño, arquitectura,fotografía y arte

URL: http://www.pechakuchavalencia.com/
URL: http://pechakuchavalencia.blogspot.com/

19 cosas que no hay que hacer en una página web

En inglés en el enlace. Comentadas y con ejemplos.

Resumen:
- Nunca cambiar el tamaño de la ventana del navegador automáticamente.
- No hacer que la web se cargue en un pop-up
- No preguntar si queremos cargar la web en formato feo pero rápido o bonito pero lento (siempre es mejor el rápido, por si no habíais caido...)
- No hacer páginas web completas en flash (siempre he dicho que es un concepto erróneo...)
- No intentes reinventar la navegación, usa los conceptos básicos de usabilidad
- Nunca hacer websites en base a un diseño para publicaciones impresas
- El contenido es el elemento primordial de una página web
- El sitio debe ser compatible con Firefox
- No poner texto que parpadee
- No usar FrontPage
- No poner pop-ups
- No poner texto animado
- No obligar a descargar fuentes para verla correctamente
- No poner introducciones en Flash
- No cargar música automáticamente
- Ofrecer la opción de apagar la música
- Los enlaces de texto son preferibles a los enlaces de imagen
- Pensar bien la organización de las secciones y evitar menús desplegables
- Si hace falta un sistema de búsqueda para encontrar las secciones, rediseña el mapa de la web


URL: http://www.josiahcole.com/2007/02/14/a-webmasters-19-commandments/

Fotografía Tilt-Shift

Tilt-Shift es una técnica fotográfica empleada para evitar la distorsión en la imagen provocada por el uso de las lentes convencionales al fotografiar áreas extensas.

Uno de los usos más curiosos de este método de captura de imágenes es la simulación de minuaturas.

URL: http://en.wikipedia.org/wiki/Tilt-shift_photography
URL: http://jalopnik.com/5226602/turning-cars-into-toys-tilt+shift-photography-magic

Nueva imprenta rápida

Se ha presentado en Londres un sistema de impresión que permite la selección de un libro entre una base de datos de 500.000 títulos y tenerlo impreso y encuadernado en 5 minutos.

Al parecer, por lo que leo en el artículo, dado que es capaz de imprimir un "facsimil de la edición manuscrita" de un libro, debe soportar la impresión de gráficos. No se si de color también... pero lo importante es que es un gran paso.

URL: http://www.elpais.com/articulo/cultura/cajero/automatico/libros/catapulta/Gutenberg/elpeputec/20090424elpepucul_6/Tes

El scroll del ratón como recurso narrativo

Se trata de una tira cómica en la que el uso del scroll del ratón es partícipe en el flujo narrativo. La verdad es que como técnica es curiosa, dado que a la hora de realizar muchas ilustraciones con fines publicitarios intentamos transmitir conceptos. A ver si a alguien le da ideas... :D

URL : http://raphaelb.canalblog.com/archives/2009/04/01/13217890.html

jueves, 23 de abril de 2009

Nuevo Sony Bravia


El anuncio es una pasada, pero si no tienes un dvd que soporte las 200 imágenes es tirar el dinero, la emisoras de tv emiten a 100 como muy y mucho, pero bueno, esto no le resta importancia al genial anuncio, que se lo han currado y si no me crees a mi cree al "Como se hizo"

miércoles, 1 de abril de 2009

Estrella Damm y Valencia

Con este anuncio Estrella Damm afianza su posición en Valencia, no solo como patrocinador del equipo de fútbol, sino con el carácter mediterráneo de la ciudad y su gente.

He de reconocer que cuando vi el anuncio me pareció mas un anuncio de promoción de la ciudad, como el que hicieron de "Increible pero cierta"

Vamos, que cada vez, por suerte, se lo curran más

martes, 31 de marzo de 2009

Otro comportamiento raro de Dreamweaver

Normalmente, el Dreamweaver no deja abrir más de una vez el mismo archivo. Pero hay una excepción que me andaba sacando de quicio.

Cuando abrimos una página con un frameset, y luego abrimos uno de los archivos que carga la misma, si que se abre dos veces el mismo archivo en Dreamweaver. Ejemplo:
  • Abrimos el archivo index.html para ver la descripción del frameset.
  • Abrimos uno de los archivos que se cargan en el frameset: menu.html (por ejemplo)
  • Modificamos ese archivo.
  • Vamos al browser.
  • Cargamos index.html para ver los cambios.
  • Volvemos a Dreamweaver y... ¡Sorpresa! Nos aparece una ventana que nos dice que el archivo menu.html ha sido modificado fuera de Dreamweaver, que si queremos actualizarlo.
Este mensaje no puede ser más que considerado erróneo. En primer lugar, porque el archivo menu.html NO ha sido modificado desde fuera de Dreamweaver. Ha sido modificado por Dreamweaver. Lo que pasa es que como hemos modificado la versión suelta, la otra que tenemos cargada (la del frameset) ve que ha sufrido cambios y se piensa que somos el mal y que tenemos abierto otro editor para modificarle los archivos que se supone que estamos modificando con el Dreamweaver.

Hasta que me he dado cuenta del problema, he odiado mucho... :D

miércoles, 25 de marzo de 2009

Sim Daltonism

Utilidad para la comprobación de colores. Simula en pantalla diversos trastornos visuales que pueden interferir enormemente en el entendimiento de las imágenes.

Muy útil para la comprobación de las interfaces gráficas en entornos web.

Lamentablemente, sólo para Mac OS X...

URL: http://michelf.com/projects/sim-daltonism/

Pero, para cualquier otro sistema, existe una herramienta similar online:

URL: http://colorfilter.wickline.org/

lunes, 23 de marzo de 2009

Tamaño seguro para páginas web

Interpretando los datos de las W3C al respecto...

URL: http://www.w3schools.com/browsers/browsers_display.asp

Podemos considerar seguro el diseñar para una resolución de pantalla de 1024x768. A pesar de que Dreamweaver nos dice que para dicha resolución de pantalla contamos con un área segura de 955x600 pixels, la explicación en la página de 960.gs de porqué utilizar un ancho de pantalla seguro de 960 pixels es bastante interesante. Flexibilidad.

960 es un número divisible entre 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480 (1 y 960 no cuentan...).

Dado que 600 es divisible entre 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 24, 30, 40, 60, 100, 120, 150, 200 y 300 (de nuevo no considero 1 ni 600...), parece razonable el mantener esta recomendación.

Así pues, podemos diseñar para un tamaño seguro de 960x600 pixels. Aunque, personalmente, las limitaciones verticales las utilizo en contadas ocasiones.

Framework CSS (y 3)

Vaaale... está muy feo eso de decir "he hecho" pero no enseñar nada. Pero es que estaba arreglándolo para que esté visible. Tenéis disponible la idea de Framework CSS en la siguiente dirección:

URL: http://www.mazcunan.es/microsites/grid

He hecho las explicaciones que he considerado oportunas, pero es posible que los más profanos en el tema no se enteren del todo. Si es el caso, estoy dispuesto a realizar una explicación personalizada con la condición de que el receptor de la misma la transcriba.

domingo, 22 de marzo de 2009

De vuelta con los Frameworks CSS

He estado mirando más detenidamente esto de los Frameworks... y la verdad que me he llevado una alegría y una decepción.

La decepción. El framework CSS (por ejemplo, el 960.gs) no es más que un montón de definiciones CSS que cubren todas las posibilidades que existen para hacer un layout en horizontal sobre 12 o 16 columnas. Por lo que si defines una página con 3 columnas, estás utilizando la hoja de estilo por debajo del 10%. Cierto es una gran perdida, ya que el archivo de texto sin procesar no es que incremente los costes de carga de la web...

Sin embargo, el uso de este tipo de sistemas puede facilitarle enormemente las cosas a un diseñador. Es práctico para hacer webs como churros.

La alegría. La mayor parde de las consideraciones que explican en los sitios son las mismas consideraciones que yo explico a mis alumnos de serie. Y algún punto de vista diferente me ha gustado. Por ejemplo, yo les digo que tienen que valorar un ancho de web dentro del rango aceptable valorando la versatilidad... que sea divisible entre 2, entre 3, entre 4... según necesidades. Por ejemplo, 960px es divisible entre un montón de números. Es una opción más que interesante a considerar.

En general, he pensado que el procedimiento para la creación del framework puede ser mecanizado. Y lo he mecanizado en un cuarto de hora. Ahora tengo una función PHP a la que le digo cual es el ancho que quiero y automáticamente le descuenta los margenes que le indico, el padding y los bordes. He hecho alguna chapucilla para que algunos casos de error sean indicados o incluso corregidos automáticamente. Y el caso es que el resultado es bastante parecido a archivo CSS del Framework que estaba mirando.

Así que le voy a dar unas cuantas vueltas y no descarto plantearlo como ejercicio en clase... la lastima es que el mecanizado que yo he hecho con PHP habrá que plantearselo a mano... (¬_¬u)

Frameworks CSS

Ayer me comentaron que existia uno de estos y hoy lo he investigado un poquito... Ahora bien ¿Qué son los frameworks CSS?.

Primero deberíais preguntaros que es un framework. Es fácil... ¡Wikipedia!

URL: http://es.wikipedia.org/wiki/Framework

Ahora que sabemos lo que es un framework... ¿Qué? ¿Que no lo has leido? Si es que hay que daroslo todo masticadito. Un framework viene a ser una colección de elementos definidos que nos facilitan aspectos comunes del trabajo.

Bien, sigamos. El tema de los frameworks CSS consiste, según veo, en definir una estructura base y elementos para cubrir todas las posibles combinaciones dentro del mismo. Por ejemplo, el 960 (que se llama así porque considera 960px de ancho para el entorno de trabajo) divide el espacio horizontal en un número determinado de columnas (12 o 16) en función de las necesidades que podamos tener luego. Y seguiramente usamos clases CSS predefinidas para definir elementos que tengan N columnas de ancho sobre los que metemos contenidos. Es decir, si tengo un modelo de 12 columnas (contenedor principal de la web), luego puedo insertar un elemento que tengo 8 columnas de ancho y que flote a la izquierda y otro que tenga 4 columnas de ancho y que flote a la derecha. Así obtenemos un sistema para representar información adaptado a un ancho estandar sin tener que pensar en pixels. La verdad es que parece cómodo, pero las restricciones son curiosas...

Por otra parte, me encanta encontrarme con estilos CSS que son parecidos a cosas que he desarrollado en algún momento por mi cuenta. :D

Os dejo los enlaces de dos de estos sistemas para el que tenga curiosidad.

URL: http://960.gs/
URL: http://www.blueprintcss.org/

martes, 17 de marzo de 2009

Campaña para desterrar al IE6

Uno de los mayores problemas del diseño web es hacer las webs compatibles con el IE6. Así que desde la revista .net se han propuesto acabar con el mismo. Han iniciado una campaña con este fin.

URL: http://www.bringdownie6.com/

viernes, 6 de marzo de 2009

Beej's Guide to Photography

Sólo conozco una guía de Beej, la de programación en red y me ha sido muy útil. He visto que tiene una de fotografía y no la he revisado, pero he visto que tiene algunas cosas muy interesantes. No os perdáis la sección "Toys" para ver unas simulaciones de parámetros fotográficos que son bastante descriptivas.

URL: http://beej.us/guide/bgp/

martes, 3 de marzo de 2009

Lighting 101

Manual de iluminación para fotografía gratuito en PDF.

URL: http://foto.microsiervos.com/libros/lighting-101-es-pdf.html

sábado, 28 de febrero de 2009

domingo, 22 de febrero de 2009

42 Revistas Online Gratuitas para Diseñadores

Parece bastante interesante... pero hay que perder mucho tiempo consultándolas una a una para poder o no recomendarlas. :D

URL: http://www.hongkiat.com/blog/42-free-online-magazines-for-designers/

viernes, 20 de febrero de 2009

Posicionamiento de capas con CSS

Un comentario acerca de posicionamiento de capas con CSS.

En primer lugar, hay cuatro tipos de posicionamientos de capas... cinco si contamos el modo heredado.

· Estático: Modo normal de posicionamiento de los elementos. Fluyen con la página.
· Fijo: Permanece en una posición fija en la pantalla, aunque movamos el navegador. (Tipo mosca de televisión)
· Relativo: Respeta su espacio orginal y se desplaza desde el mismo. Es decir. Si pongo un elemento X en la página y lo muevo con deplazamiento relativo, el resto de elementos que lo redean NO se verán afectados por este deplazamiento. (Nota: si se verían afectados por un cambio de tamaño o margen del mismo...)
· Absoluto: Se situa en una posición fija en relación a su punto de referencia. El resto de elementos no se ve afectados (en cuanto a posición) por este. (Nota: si lo mueves y lo pones encima de otras cosas, las tapará...)

Cuestiones a tener en cuenta.

Compatibilidad
Los posicionamientos relativo y absoluto pueden dar problemas en algunos navegadores.

Normalmente el problema está en el IE. El tema está en que si el IE6 daba problemas con algunas cosas y el IE7 es una aberración y el IE8 aún no está termiando... Pues los problemas heredados del IE6 nos afectan todavía.

Actualmente, el uso del IE6 ha bajado ligeramente del 20% en las estadísticas, pero sigue siendo muy alto. Así que no podemos ignorar los problemas.

FAQ

¿Puedo cambiar el punto de referencia de una capa absoluta o es siempre la esquina superior izquierda de la página?
Si. El punto de referencia es la esquina superior izquierda del elemento que contiene a la capa.

¿Como es esto de compatible?
Consultando la tabla siguiente...

URL: http://www.quirksmode.org/compatibility.html

Observamos que no hay compatibilidad del 100% con el tema del posicionamiento. Por otro lado, el Acid Test...

URL: http://en.wikipedia.org/wiki/Acid2

Nos viene a confirmar que el CSS 2 (el que incluye las opciones de posicionamiento) no es completamente compatible.

¿Entonces qué?
La solución viable pasa por hacer las pruebas en los diversos navegadores que consideremos como objetivo viable de nuestras páginas. Y evaluar los resultados. Hay que tener también en cuenta que una mala deficinión del documento HTML puede provocar problemas en la carga de algunas propiedades.

miércoles, 18 de febrero de 2009

Iconos para GUI

Os dejo dos enlaces de iconos para el desarrollo de GUIs (Graphic User Interface).

La primera es la de Mark James y seguro que habéis visto estos iconos en más de una aplicación...

URL: http://www.famfamfam.com

La segunda es esta...

URL: http://www.userinterfaceicons.com/

Alturas porcentuales con CSS

Ayer estuve jugando con CSS para intentar conseguir elementos del 100% de alto en relación a la página. Esto permite situar elementos con centrado vertical de forma segura. Estas especificaciones no funcionan de serie, hay que establecer el CSS correspondiente para que esto funciones. En concreto, hay que darle un valor de 100% de alto a las etiquetas BODY y HTML. ¿Cómo se hace esto?

html, body {
height: 100%
}

A partir de ese momento podemos establecer alturas porcentuales en las capas de la página de forma cómoda.

En cuanto a compatibilidad. Pues la verdad es que no la he revisado exhaustivamente, pero sería interesante hacerme con un banco de pruebas de compatibilidad... ya veremos. :D

Font Conference



You are INSANE! Nobody uses Microsoft Works!!

martes, 17 de febrero de 2009

Generador de animación de carga

En el siguiente enlace se pueden generar archivos GIF animados para los procesos de cargas de algunas aplicaciones. Se pueden utilizar, por ejemplo, para personalizar la carga del Thickbox.

URL: http://www.ajaxload.info/

El Magenta no es un color.

Al menos eso es lo que dicen en este artículo (en inglés)...

URL: http://www.biotele.com/magenta.html

Interesante, sobre todo, por el concepto Qualia:

Los qualia simbolizan el "gap" (hiato) explicativo que existe entre las cualidades subjetivas de nuestra percepción y el sistema físico que llamamos cerebro. Las propiedades de las experiencias sensoriales son, por definición, epistemológicamente no cognoscibles en la ausencia de la experiencia directa de ellas; como resultado, son también incomunicables. La existencia o ausencia de estas propiedades es un tópico calurosamente debatido en la filosofía de la mente contemporánea.

(Extraido de la Wikipedia en castellano).

Información más visual (hay gráficos explicativos) y más clara (en inglés) sobre esto...

URL: http://www.biotele.com/qualia.htm

sábado, 7 de febrero de 2009

jueves, 5 de febrero de 2009

Otro ejemplo de curriculum creativo

Simple y funcional. Claro. Aunque quizá poco explicito... Incluye la información básica.

URL: http://www.flickr.com/photos/7372907@N07/3191558047/sizes/o/

miércoles, 4 de febrero de 2009

Los 50 "mejores" sitios de 2008

La página Crazyleafdesign.com ha colgado una noticia con una selección de las 50 mejores páginas de 2008.

No acabo de estar de acuerdo con los screenshots de algunas de ellas, ya que en algunos casos parece que una bonita ilustración sea lo que define una página web. Pero habría que ver los tiempos de carga y demás. Es como con lo de los curriculums que vimos hace tiempo. No vale todo en todos los contextos. Aún así, aunque algunas de ellas no sean realmente "buenas páginas web", siguen siendo bonitas. :D

URL: http://www.crazyleafdesign.com/blog/most-beautiful-websites-of-2008/

domingo, 1 de febrero de 2009

Creación automáticas de páginas web

De todos es sabido que, cuando algún tipo de actividad presenta la más mínima dificultad, es tendencia del ser humano el buscar el camino más fácil y rápido para conseguirla.

No tendríamos que pensar demasiado para saber que cuando una persona quiere "hacer páginas web", el camino más corto y práctico es el del estudio de la tecnología y la constante aplicación de la misma. Pero claro, muchas veces alguien no quiere "hacer páginas web", sino hacer una página web.

No entro ahora en los problemas del tipo "contratar a un diseñador/desarrollador" es caro. Ni tampoco voy a hablar de si es necesario que el "diseñador/desarrollador" haya obtenido sus conocimientos por la via del estudio reglado y la práctica profesional, al margen de tener o no un papelito oficial que lo ratifique. Mi problema actual es mucho más sencillo.

He visto una página web en la que se leía "cree su página web sin conocimientos técnicos". Y la verdad es que no puedo estar más en desacuerdo. Si bien, mi ya conocida y radical opinión en contra de que los documentos HTML que incluyen como único contenidos un archivo SWF sean considerados eso que la gente llama "página web en Flash", no puedo aplicar el mismo razonamiento en este caso. Puesto que una página web que utiliza HTML, CSS, PHP y MySQL no puede ser negada como tal. No vamos a negar que el resultado sea una página web. Pero por donde no paso es porque por el proceso de abrir una página como esta que estás leyendo, un blog mediante un asistente, una persona haya creado una página web. No señor. Una persona habrá abierto y configurado un blog mediante un servicio de internet. Pero no habrá creado una página web. Ni aquí, ni en wordpress, ni en my space, ni en ningún otro sitio de características similares.

Es más, cuando alguien utiliza las opciones de configuración para personalizar el entorno hasta límites que hagan que este tipo de páginas no parezcan en absoluto lo que inicialmente eran, seguire en mis 13. Lo que se está haciendo es personalizar/configurar una página web.

Y encima, para hacerlo efectivamente, para mantener compatibilidad con el máximo de equipos, para que los tamaños sean adecuados, para insertar las imágenes en los formatos adecuados, para modificar los estilos... Para llegar al punto en el que la barrera entre el personalizador/configurador y el creador sean sólo aspectos técnicos del servicio dinámico (el motor de publicación y las bases de datos) es necesario tener conocimientos técnicos.

Así que eso de "cree su página web sin conocimientos técnicos" es realmente una de esas verdades imprecisas (por no decir mentiras...) y sujetas a la interpretación del profano que nos llevan a situaciones de desprestigio de los profesionales.

Utilidades para crear galerías web

Dos utilidades para crear galerías web.

El primero es el famoso, no por su nombre sino por lo común de su uso, ThickBox. Este permite hacer click en una imagen (normalmente un previo...) para cargar otra (normalemente una versión mayor de la misma... ) al máximo tamaño posible (sin exceder el tamaño de la imagen destino) en función del tamaño de la ventana de visualización. Notar que el redimensionado es dinámico sólo en el momento de hacer click. Una vez cargada la imagen grande, variar el tamaño de la ventana no varia el tamaño de la imagen. Este es su uso más frecuente, pero además permite generar bloques que compartan un navegador (siguiente/anterior) e incluir, además de imágenes, contenido HTML o incluso iFrames en el visor.

URL: http://jquery.com/demo/thickbox/

El otro es más limitado, pero visualmente mucho más jugoso. Se trata del TiltViewer, que mediante javascript (para lanzar y configurar) y Flash (motor del sistema) permite crear galerías tridimensionales (cojamos el último término con pinzas...) navegables de ilustraciones anotadas en su parte posterior. Además, podemos hacer que las imágenes estén enlazadas con un destino.

URL: http://www.airtightinteractive.com/projects/tiltviewer/

Diseños basados en tipografía.

En esta web (que añado a la lista de enlaces), han publicado 27 diseños que tienen en común el uso de recursos tipográficos como base del mismo. Muy interesante.

URL: http://www.weirdresources.com/2009/01/30/27-wonderful-typographic-posters-for-inspiration/

sábado, 31 de enero de 2009

Páginas de Error 404

Muchos hostings dan la posibilidad de diseñar las páginas de error. De entre ellas, una de las más comunes es la del error 404 (página no encontrada).

En esta web se recopilan algunas páginas de este tipo bastante originales.

URL : http://www.smashingmagazine.com/2009/01/29/404-error-pages-one-more-time/

miércoles, 28 de enero de 2009

Historia de los logos

Interesantísima web en la que se presenta la historia y evolución de logotipos.

URL: http://www.logoorange.com/logodesign-A.php

martes, 27 de enero de 2009

Notas sobre CSS

Aquí tenéis el conocido Zen Garden, que nos da una idea de qué se puede llegar a hacer con un buen uso del CSS.

URL: http://www.csszengarden.com/tr/espanol/

Y una interesante página con ejemplos CSS.

URL: http://www.cssblog.es/

Pero lo que yo buscaba era esto: capas con bordes redondeados sin usar imágenes. El CSS3 es lo que tendrá... :D

URL: http://shapeshed.com/examples/curved-boxes-in-css/#css3

Y, pasa los curiosos, información de CSS3

URL: http://css3.com/

Ejemplos de Curriculum Vitae creativos

Lo bueno que tiene buscar trabajo como creativo es que puedes permitirte este tipo de cosas...

URL: http://blogof.francescomugnai.com/2008/09/the-20-most-creative-resumes-ive-seen-in-a-long-time-pure-inspiration/

Ojo al parche, piratillas...

Mucho cuidado con lo que os descargáis de Internet!

Deberías saber que la mayoría de las veces que os descargáis un programa para Windows, la aplicación keygen que lo acompaña es bastante probable que instale algún tipo de troyano en vuestro equipo. Es no es nuevo...

Deberías saber también que algunas de las versiones de Adobe CS4 para Mac OS X que circulan por la red viene con un troyano de regalo. Un troyano NO es un virus, es un programa que permite a terceros conectarse a vuestro ordenador. Mediante un método sencillo y directo se hace con la clave de administrador de vuestro ordenador: preguntándola directamente. Desde ese momento, vuestro equipo es vulnerable a ser manipulado desde el exterior por un desconocido.

Así que cuidadín con lo que hacéis... el que avisa no es traidor.

Anatomía de un libro

Un curioso post en el que se analiza minuciosamente la anatomía de un libro. Es el más completo que he visto en la red.

URL : http://gregtork.wordpress.com/2009/01/27/anatomia-de-un-libro/

Ejemplos de tarjetas de visita

Recopilación de 30 ejemplos de tarjetas de visita de todo tipo. Algunas son realmente elaboradas, otras no pasan de ser una curiosidad creativa y tienen un uso práctico nulo.

URL: http://www.toxel.com/inspiration/2009/01/22/30-memorable-and-creative-business-cards/

Design for Coffee

Este es mi último (en el sentido de más reciente) intento de llevar un blog relacionado con el diseño gráfico, el desarrollo web y el software del mundo multimedia en general.

Antes utilizaba un blog para cada temática resultando en un montón de tiempo perdido y dispersando los contenidos. Ahora, espero que este nuevo experimento me ayude a recopilar la información de forma más intuitiva.

Here we go!