FlórezDMI

Permalink

Acerca de CSS

Las siglas CSS provienen del inglés Cascading Style Sheets (Hojas de Estilo en Cascadas), hacen referencia a un lenguaje estructurado en HTML ó XML.

CSS tiene como propósito separar la estructura de un documento en su presentación.

Este lenguaje nos ofrece tres alternativas para aplicar estilos en una página web:

  • Hoja de estilo externa: está almacenada en un archivo diferente al archivo donde se almacena el código HTML del sitio Web. Esta es la manera más adecuada y oportuna, porque separa las reglas de formateo de HTML de la estructura básica de la página.
  • Hoja de estilo interna: está incrustada en el documento HTML. Con esta alternativa se podrá separar la información del estilo del código HTML. Su aplicación se presenta cuando se quiere crear una característica a una página Web en un simple fichero.
  • Estilo en línea: sirve para insertar información de estilo directamente a una etiqueta HTML. Este estilo generalmente se aplica cuando se necesita realizar un formateo con prisa. Un ejemplo sencillo es la maquetación de correos electrónicos en HTML. Este estilo es el menos adecuado de implementar, debido a que se convierte en un proceso largo y tedioso, además de complejo y enredado.

Unas de las ventajas de usar CSS son la agilidad de actualizar un sitio web, la adaptación clara y versátil en los distintos navegadores web, poder presentar varias hojas de estilo (para computadores, para móviles, tabletas, etc) y reducir el tamaño del documento HTML.

El hecho de que CSS ha reemplazado el uso de tablas, trae como consecuencia negativa la diagramación de páginas complejas en arquitectura e información, debido a que el uso de tablas propicia ventajas en diagramación.

    Permalink
    Permalink
    Permalink

    HTML vs. Flash

    La constante disputa de conceptos sobre “cuál” es mejor, si HTML ó Flash, nos lleva a complejos usos argumentativos, hasta que la disputa se devuelve al comienzo del debate. Es como discutir sobre religión ó política, nadie al final le dará la razón al otro, y hasta, en muchos casos, termina en disgustos. Guerras han nacido por consecuencia de estas discusiones bizantinas.

    Como yo no quería, pero supongo que es necesario escribirlo, comenzaré a enunciar ciertas diferencias entre HTML y Flash.

    Los sitios Flash presentan una versatilidad muy eficaz para presentar y cargar imagen, sonido y vídeo. Probablemente es su mayor fortaleza, porque HTML no ofrece herramientas que puedan ser comparadas con Flash para el manejo multimedia.

    En cuanto a fuentes, Flash las puede “incrustar”, por lo tanto no tendremos problema en ningún navegador, y se tendrá la libertad de usar e incluír fuentes sin problema alguno. A diferencia de HTML, que no posee esta característica de incrustar fuentes.

    Ahora, hablando económicamente, hay una gran desventaja, y es el costo de licencia de software. La de Flash es exponencialmente más costosa que la de HTML. Una licencia de Flash puede costar alrededor de los 400 dólares, en cuanto una composición en HTML puede ser programada en el bloc de notas.

    Por otro lado, la estructura de Flash no permite de manera eficiente que los buscadores tengan acceso al sitio web para poderlos posicionar en los motores de búsqueda y sus resultados.

    Muchas veces las páginas Flash son muy pesadas, ya que demoran mucho en cargar, ó no pueden ser soportadas en ciertos ordenadores. Hay que tener en cuenta ese detalle.

    Y vale señalar el rechazo de Steve Jobs a Flash. Éstos sitios no podrás apreciarse en dispositivos como el iPod, iPad, iPhone, etc. Grave situación, debido al gran crecimiento de ésta empresa en el mundo de la tecnología, virtualidad e internet.

    Per bueno, tanta diferencia no hace más que desmechar mucho el tema. Es mejor aprender en unidad, de manera integral. Por eso es mejor decir que ninguno es mejor que el otro, sino que por el hecho de ser tan distintos, deberían ser aprovechados en conjunto para la composición web, y entrar en el concepto de integralidad y no basarse en parcialidades.

    Permalink

    Tipología Web

    La web es un mundo lleno de todo tipo de variedades. Así como podemos clasificar a los seres vivos en animales, plantas, vertebrados, invertebrados, mamíferos, insectos, anfibios, etc, etc. Así mismo podríamos clasificar ó extraer una tipología de los sitios web.

    En primer lugar podríamos distinguir a los buscadores, que nacieron casi a la par con la red, ante una importante necesidad de encontrar un sitio web ó información, debido a la constante creciente de creación de sitios web. El ejemplo más sencillo y práctico es Google, que, desde su creación, se ha ido convirtiendo de un buscador hacia un monopólico mundo de servicios. Está establecido que un buscador es un sitio de paso, y no un sitio en donde se puede estar interesado por el cual navegar.

    En segundo lugar encontramos los blogs, que son sitios donde se transmite información de manera sencilla e independiente, sin ningún tipo de intermediario. Éstos son de gran importancia, porque estimularon un ismo denominado Periodismo Ciudadano, en donde las personas sin conocimiento alguno de programación web, tuvo acceso rápido y eficaz de comunicar información libre con toda la red.

    Luego encontraríamos los entornos sociales denominados foros y wikis, que son medios por los cuales ciertos grupos de individuos con características en común, interactúan en un entorno colaborativo.

    Por otro lado, las web corporativas son una constante en la red y sociedad. Es normal que todas las organizaciones quieran estar presentes en el mundo virtual. Desde la perspectiva empresarial, tener una página web, es una ventaja que abre oportunidades y expandir presencia y prestigio. Las ventajas son, por ejemplo, la prestación de servicio las 24 horas del día (y su disponibilidad de información al usuario y comunicación), además de permitir relación eficaz con proveedores, clientes y trabajadores desde un mismo medio.

    Hay otro tipo de web que tiene relación con las corporativas: los catálogos. Si ante una aparente web corporativa se infiere que la mayoría de información estructurada se dirige hacia la presentación de los productos de la organización, estaríamos navegando en un catálogo. Todo esto lo podemos notar si en el home page del sitio se encuentran enlaces directos a las principales categorías de los productos que ofrece la empresa, y cada categoría tiene una presentación y ofrecimiento de información detallada y directa.

    Hay catálogos que tienen como característica presentar los productos de una manera distinta: imponer la estética y exaltación en vez de los componentes técnicos que van de la mano con los productos. Estos se denominan escaparates. Los sitios de diseñadores de moda, diseñadores industriales, etc. podrían ser ejemplo de webs de escaparate.

    Además de catálogos y escaparates, existe una categoría más completa, que son los comercios electrónicos. Este tipo de web es la que tiene características de catálogos ó escaparates, pero que además tiene la de compra online. Es una conexión directa del mundo virtual y el real.

    Todos conocemos la red como un mundo público y de libre navegación, pero hay una categoría que rompe con éstas barreras de libertad, y son las intranet y extranet. En muchas empresas se crean intranets dedicadas para los trabajadores, y extranets para proveedores & otros. Éstas categorías tienen acceso netamente restringido y privado.

    Por otro lado están los medios de comunicación, que son los encargados de ofrecer información actualizada al usuario. A diferencia de los blogs, éstos medios sí tienen intermediarios y no es independiente. Su esquema y estructura, debido a la cantidad enorme de información que maneja, varía mucho y cada vez busca vías novedosas de organizar la información.

    En última isntancia se encuentran las aplicaciones web. Son una mezcla de programas que usualmente no se encuentran ofrecidas en la red, pero que ésta vez si se encuentran y se puede interactuar con ellas en tiempo real. Éstas aplicaciones son construídas mediante tecnologías no-convencionales.

    Permalink
    Permalink

    Análisis Web

    Primer sitio web: R2Post

    • Elementos de navegación: el usuario, definitivamente no se pierde en el sitio. Una razón puede ser por las propiedades directas y singulares de la información de este sitio (es un sitio web personal, por lo tanto, no hay mucha información). Hay una uniformidad en el diseño que permite al usuario distinguir e identificar claramente la amplitud del sitio sin ningún problema. En la esquina superior izquierda se aprecia el logo de la web. No presenta breadcrumbs. No hay redundancia en el sitio, debido a la poca información que ofrece y poca profundidad que la estructura. No tiene mapa de sitio (de hecho, no es necesario, en este caso, que lo tenga).
    • Componentes problemáticos: no tiene cajas de selección, marcos, banners ni menús desplegables. El uso de imágenes minimizadas es adecuado, en la navegación del portafolio del individuo.
    • Enlace - forma y función: no presenta hipertextualidad u otro tipo de enlaces.

    Segundo sitio web: Industrial Light & Magic

    • Elementos de navegación:al nevegar por este interesante y exclusivo sitio web, es difícil encontrar una situación de extraviarse en medio de la información que ofrece. La coherencia que, mezclada con la jerarquía, dispone el sitio presenta una armonía totalmente sostenible, porque al comienzo el sitio ofrece dos opciones globales de navegación: ABOUT ILM y OUR WORK. Esto genera un aprendizaje previo al usuario de todo lo que podrá observar en el sitio. La jerarquía visual es notable cuando se da clic en uno de esas dos opciones iniciales, porque de ahí se desplega toda la información que corresponde a navegación local. Como en este sitio todo se abre en la misma parte, no tiene problemas de redundancia. No tiene mapa de sitio.
    • Componentes problemáticos: los menús desplegables funcionan a la perfección. Además, tienen una función para que el usuario no se pierda en el sitio: cuando se da clic en OUR WORK, se cierra todo lo que se ha desplegado en ABOUT ILM, y viceversa. El marco de la parte superior (A-Z) puede que pase, en algunas ocasiones, desapercibido. No presenta algún tipo de banner. Las imágenes minimizadas, con ayuda de interacción y animación, es un elemento que funciona también a la perfección (ejemplo: en OUR WORK, dando clic a las carteleras de películas).
    • Enlace - forma y función: los enlaces cumplen con toda su función con el valor agregado de que no tienen que resaltar en el sitio web para que puedan ser percibidos por el usuario. Por ejemplo, en OUR WORK>IN PRODUCTION, se aprecian los enlaces de VIEW MORE, que nos ofrecen dirigirnos a un sitio donde hay más información relacionada con la que no cuentan en ese espacio. Enlaces sobrios y bien diseñados.

    Tercer sitio web: Lucas Films

    • Elementos de navegación: considero que hay una cierta división de diseño y percepción de navegación cuando se empieza a interactuar con este sitio web. Al dar clic en INSIDE LUCASFILMS, FILMOGRAPHY ó DIVISIONS, de innmediato lo redirigen a una página con estéticas, fuentes tipográficas, colores y estructuras marcadamente distintas al inicial. Puede que aquí haya problemas de navegación, y el usuario se sienta que lo han dirigido a otra página (en realidad sigue siendo la misma), y por lo tanto, se sienta perdido. Sin embargo, luego de encontrarse en la segunda pantalla, no creo que el usuario se sienta perdido (al navegar ya dentro de esta “nueva” estructura), porque dentro de su contexto, la información está muy bien estructurada. Por otro lado, la jerarquización de la información está muy bien estructurada (estructura marcada en las barras de navegación sobrios). No presenta mapa de sitio.
    • Componentes problemáticos: el uso de imágenes es apropiado, ya que tienen función de navegación en el sitio. Por ejemplo, en INSIDE LUCASFILMS>CAMPUSES, las imágenes tienen una función de distinción geográfica, que permite al usuario identificar y tener acceso a información geográfica mediante su percepción espacial y geográfica.

    • Enlace - forma y función: los enlaces en este sitio web son comunes y corriente. No hay elementos que los haga distintos y atractivos. Por el contrario, no se ven bien, y resaltan mucho en la página. Sin embargo, cumplen su función de redirigir a otras páginas, siendo cortos y sobrios. Ejemplo: INSIDE LUCASFILMS>FREQUENTLY ASKED QUESTIONS.

    Cuarto sitio web: Star Wars

    • Elementos de navegación: la sobreinformación es el peor enemigo de este sitio. Nada más un fanático de Star Wars se aguanta toda esa información. A pesar de que la información esté bien estructurada, y que se organice por tópicos y por público, presenta varios niveles en que no hay estabilidad. Por ejemplo: la barra de navegación superior tiene los mismos temas que la estructura inferior de la página Recent News. Aquí hay una confusión, ¿la página es de Star Wars, ó de Noticias recientes de Star Wars? Por otro lado, la jerarquía visual no es muy clara, debido a la sobreinformación, adicionando que no hay coherencia en el diseño (solamente es navegar por las distintas partes del sitio, y observar que todas presentan un diseño distinto en cuanto a tamaños, imágenes, estructura visual, etc). Para rescatar, la redundancia presenta balance de diseño, no hay problemas. No presenta mapa de sitio.
    • Componentes problemáticos: las cajas de selección tienen uso totalmente adecuado: uso de búsqueda interna. Ejemplo: Clone Wars>Episode Guides. Los menús desplegables en la barras de navegación superior están bien diseñados, las áreas sensibles son perfectas, y al interacción con el mouse es óptima, además que tienen animación de volumen y profundidad al pasar el mouse por encima, eso ayuda a que el usuario se mantenga entretenido y le coja cariño al sitio.
    • Enlace - forma y función: como es una página con sobredosis de información, hay abundantes enlaces y sistemas de hipertexto. Viendolo así, se podría llegar a la conclusión que hay un problema, pero no. Antes con tanta información, lograron un sistema de hipertextualidad bien diseñado, donde el usuario identifica rápidamente todo lo que es un enlace y éste enlace hace parte de la página (es decir, no presenta características ajenas a los detalles generales del sitio web).

    Quinto sitio web: designlabCPH

    • Elementos de navegación: este sitio de diseño web tiene una estructura distinta, sobria y amigable con el usuario. Como tiene a favor la poca profundidad y amplitud de navegación, permite que el usuario nunca se pierda (ó si lo haga, pero nada más en casos extremos ó ajenos en donde el arquitecto y diseñador les queda imposible intermediar, como por ejemplo, la barrera idiomática). La coherencia en diseño es excelente, tiene elementos que fomentan la empatía con el usuario, tales como las animaciónes de interacción con el mouse, y los mensajes jocosos al posar el mouse sobre los ditintos temas del menú de navegació global. La jerarquía visual es clara, al no haber mucha información por organizar. No presenta mapa de sitio.
    • Componentes problemáticos: las imágenes minimizadas son elementales en la sección de Work (debido a que es un artista visual).
    • Enlace - forma y función: no presenta enlaces ó hipertextualidad.
    Permalink

    Introducción a la arquitectura de la información

    En el diseño de páginas web, el principal aspecto a tener en cuenta es la necesidad. El usuario, en medio de su necesidad, es el que reta al arquitecto de la información a que haga un trabajo que satisfaga todas las necesidades.

    Ahora, es por eso que el diseñador debe ser una persona sensible y detallista de su público y entorno. Este análisis de carácter social es esencial para que el usuario, posteriormente, no tenga problema alguno a la hora de interactuar con el trabajo diseñado por el arquitecto.

    Cuando el arquitecto vaya a hacer su trabajo, encontrará varios puntos a su favor, y otros en su contra, los cuales son:

    En contra

    El usuario muchas veces se pierde en el sitio web. Este es, tal vez, el principal problema a tratar y solucionar. Eso es causado, muchas veces, por el exceso de información dentro del sitio. La consecuencia a este problema: el usuario dejará de visitar el sitio.

    Otro problema que se encuentra es que muchas veces el diseñador diseña para sí mismo. Si ocurre esto, es muy probable que al usuario no le guste el sitio, y por lo tanto rechace el trabajo (así sea un excelente trabajo de diseño, pero por eso es necesario el análisis establecido al comienzo del escrito).

    A favor

    Lo más placentero con que un arquitecto de la información se puede cruzar, es con un trabajo novedoso, que rompa esquemas, y que satisfaga a todo tipo de cliente (incluído él mismo). No hay nada mejor que alimentar el ego de diseñador que cada uno llevamos dentro.

    También es importante dirigirse a la singularización. Cuando la satisfacción del usuario se convierte en algo único para él, ya se podrá tener por seguro que se ha tenido éxito. La clave es seducir con pequeñas cosas al usuario.

    Permalink

    Análisis infografías del curso 2011-2

    Alvaro José Solís:

    • Descripción: ajedrez.
    • Bueno: uso impecable de la técnica del 3D. Información clara y concisa. Elegante, de acuerdo con el tema.
    • No bueno: el cuadro gris de fondo(el que corta AC con DC) interrumpe la armonía y seriedad de toda la composición. Pudo haber usado otro elemento para mostrar ese pequeño detalle de separar el AC del DC, y no usar un elemento gigante que se apropie de toda la composición infográfica.

    Diego Barbosa:

    • Descripción: circol del Sol.
    • Bueno: distribución de la información.
    • No bueno: correspondencia tema-grafismo, es decir, no parece una infografía sobre el circo del sol, le falta más alegría.

    Hernan Darío Belalcázar:

    • 27/08/2011: por el momento no tiene posteada la infografía.

    Kyven Herrán:

    • Descripción: Cómo conquistar una mujer. Uso de gráficos para acompañar la información textual. Estos gráficos no aportan más información que la que nos ofrece el texto. Los temas están distribuídos por toda la composición gráfica.
    • Bueno: distribución de la información entre toda la composición.
    • No bueno: ortografía. Uso inadecuado del texto (tamaño, párrafos, líneas, etc).

    Nathalia Mejía:

    • Descripción: película de Tim Burton Corpse Bride. Creación ambiente de acuerdo al tema (oscuro, expresionista, etc).
    • Bueno: marco que agrupa la información.
    • No bueno: mucho texto. El título no contrasta bien, y tampoco llama la atención.

    Miguel Angel Mora:

    • Descripción: juego Gears of War. Descripción de personajes y enemigos.
    • Bueno: nivel de texto adecuado. Imágenes, digramación, etc.
    • No bueno: sería mejor si hubiera algo más de información, no solamente quedarse en los personajes. No escribió bien el título del juego en la parte inferior, dice “GARS” en vez de “GEARS”.

    Ginna Motato:

    • Descripción: deporte del tiro con arco.
    • Bueno: totalmente completa la información. Bien diagramado, y da gusto acceder a ver la información y aprender sobre el tema.
    • No bueno: demasiado serio. Faltan elementos que le den algo de alegría a la infografía.

    Cesar Noreña:

    • Por el momento no tiene posteada la infografía.

    David Obando:

    • Descripción: proceso para llegar a una producción 3D.
    • Bueno: excelente metáfora para describir el proceso. Gráficos.
    • No bueno: ortografía.

    Diana Orejuela:

    • Descripcion: infografía sobre el surf.
    • Bueno: información completa. Si uno la ve toda, queda con buenos conocimientos acerca de este interesante deporte.
    • No bueno: diagramación. Los textos se montan en las imágenes. No hay armonía entre estos dos elementos.

    Daniel Otero:

    • Descripcion: infografía sobre Mortal Kombat.
    • Bueno: sencilla, fácil de entender. Buena diagramación.
    • No bueno: se pudo haber ido más allá de los esquemas y parámetros establecidos en la infografía con algún elemento distinto

    Juan David Oviedo:

    • Descripcion: infografía sobre Paintball.
    • Bueno: bueno la elaboración de la pistola en 3D. Además tiene el plus de seguir usando 3D para otros elementos gráficos.
    • No bueno: no hay aplicación de márgenes. Todo el texto agrupado en un párrafo gigante.  El texto se monta en los elementos gráficos, no hay límites.

    Andrés Quevedo:

    • Descripcion: infografía sobre el desastre nuclear de Chernóbil.
    • Bueno: sencilla. Buena diagramación.
    • No bueno: pudo haber introducido algo más de información. No solamente usar gráficos, sino ayudarse de texto también.

    Tatiana Quiñones:

    • Descripcion: infografía sobre pop-art.
    • Bueno: ambientación y relación con el tema (correspondencia).
    • No bueno: ortografía. Poca información.

    Felipe Quiros:

    • Descripcion: infografía sobre los procesos de funcionamiento del Messenger.
    • Bueno:sencilla, fácil de entender. Color.
    • No bueno: ortografía. Fuente.

    Francisco Salcedo

    • Descripcion: infografúa sobre película El Padrino.
    • Bueno: diagramación, diseño sobrio.
    • No bueno: pudo haber mejor contraste entre fondo-diagrama.

    Julian Torres:

    • Descripcion: infografía sobre iOS vs. Android.
    • Bueno: información muy completa, abarca todos los temas de interés. Valor añadido del tema del 3D.
    • No bueno: pudo haber sido más dinámico.

    Jose Vásquez:

    • Descripcion: infografía sobre arma Glock-17.
    • Bueno: esquema sencillo pero novedoso, se sale de los esquemas comunes.
    • No bueno: no se entiende fácilmente dónde inicia el proceso.

    Juan David Tello:

    • Descripcion: infografía sobre Blanca Nieves.
    • Bueno: muy completa, gráficos agradables y conformes al tema.
    • No bueno: la información depronto no está muy bien distribuída, por ejemplo, la información del castillo pudo haber sido mejor que estuviera junto a los demás cuadros de la izquierda.
    Permalink Infografía diseñada y realizada para el curso de Arquitectura de la Información.