CSS

Definición:

Conjunto de estilos auxiliares al codigo HTML que configuran la apariencia de una pagina; comprende fuentes, colores y composicion. Acronimo de Hojas de Estilo en Cascada (Cascading Style Sheets). Es distinto de plantillas o temas.

Fuente: http://buxara.wordpress.com/glosarios/glosario-blogs/

Sintaxis:

http://www.desarrolloweb.com/articulos/185.php

http://www.w3schools.com/css/css_syntax.asp

Ejemplos:

http://www.w3schools.com/css/css_examples.asp

Referencias:

http://www.csselite.com/

http://www.awwwards.com/

http://cssgallery.com/

Tutoriales:

http://www.w3schools.com/css/

http://www.cssbasics.com/

http://sixrevisions.com/css/20_websites_learn_master_css/

 

HTML

Definición:

HTML (lenguaje de hipertexto basado en marcas): Formato que se usa en las páginas web. El estándar HTML establece marcas (tags) o códigos utilizados para definir las propiedades del texto, tipos de letra, estilos, imágenes y otros elementos que forman parte de una página web.

Fuente: http://support.mozilla.org/es/kb/Glosario

Sintaxis:

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrá que presentar el texto y otros elementos en la página.

La etiqueta presenta frecuentemente dos partes:

Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo:

Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:

<b>Esto esta en negrita</b>

Fuente: http://www.desarrolloweb.com/articulos/535.php

Ejemplos:

http://htmldog.com/examples/

Sitios de Referencia:

http://html5gallery.com/

http://htmldog.com/reference/htmltags/

http://www.htmlgoodies.com/beyond/reference/article.php/3472851/Quick-HTML-Reference.htm

Tutoriales:

http://htmldog.com/guides/htmlbeginner/gettingstarted/

Mapa de Navegación

Como parte de la clase hemos elaborado un mapa de navegación de http://www.matchpuppy.com/, una web social que permite registrar mascotas y organizar eventos.

Layout

Definición:

Un layout es un boceto donde indicamos la organización de los diferentes elementos que componen una página web, es decir, su estructura.

¿Para que sirve?

Ayuda a maquetar, definir las jerarquías y posiciones del contenido de una web durante la fase de diseño;  permite tener una pre-visualización de una web que permite optimizar el diseño de la misma.

¿Porqué es importante diseñar un buen layout?

Un buen layout hace a la página web atractiva al ojo del usuario y también facilita su acceso al diferente contenido de la página. Es importante en cuanto si se busca en la navegación una experiencia amigable para el usuario.

Cosas a tener en cuenta al diseñar un layout:

  • La resolución usada por los usuarios.
  • Las partes mas importantes del sitio.
  • Las expectativas de los usuarios con el sitio.
  • El esquema de color del sitio.
  • El navegador que usa el visitante.

Fuente: http://www.123webguru.com/web_news/importance561.html

Para profundizar:

http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples

http://almacenplantillasweb.es/2011/04/la-creciente-importancia-de-los-disenos-web-flexibles/

http://stylizedweb.com/2011/09/28/fundamentals-of-web-design-layout-part-1/

Top 5: Mejores y Peores Paginas Webs

5 PEORES

Aqui va mi lista de las cinco peores paginas web que conozco.

chiptune.com

Esta pagina tiene un mezcla peligrosa de arquitectura, se mezcla una jerarquía confusa y extensa con una estructura metafórica ambigua; esta mezcla termina en una confusión sin límites.

Esta pagina web es bastante impresionante, no solo su estilo gráfico es pésimo, sino que no existe ningún tipo de trabajo de arquitectura de la información. No hay un sistema de exploración ni de búsqueda.

spartanmma.com.co

Esta pagina presenta problemas en el esquema de organización, las categorías no son excluyentes, no hay una jerarquía adecuada. No falta mencionar los enlaces vacíos.

artie.com

Esta pagina web presenta problemas en el esquema de organización, tiene listas engorrosas y el panel de navegación es apenas detectable visualmente.

Esta pagina usa un intrincado esquema de organización por metáfora, es completamente ambiguo, las imágenes no tienen relación alguna con la información a la que dirigen y hacen perder al usuario en una “exploración” engorrosa.

5 Mejores

Ebay es una pagina que goza de una arquitectura bien diseñada,  pese a toda la información que contiene la pag, la exploración y búsqueda funcionan perfectamente.

The PirateBay es una pagina que posee una gran cantidad de torrents, el sistema de búsqueda es muy efectivo y está muy bien complementado con un explorador por categorías.

La pagina del tiempo posee un diseño bien logrado, los diferentes tipos de navegación y estructuras de organización están presentes en toda la páginas.

La tienda de Steam tiene un poderoso esquema de organización, está bien organizada en cuanto a jerarquía y el motor de búsqueda no se queda atrás.

gmail.com

Gmail presenta un potente esquema de organización cronológico altamente personalizable. Además permite organizar los correos en categorías. Posee un motor de búsqueda interno muy eficiente.

¿Soy un Arquitecto de la Información?

Si me peguntaran eso respondería inmediatamente con un rotundo”No”. ¿Quisiera serlo? Tampoco.

Es cierto que me encanta organizar cosas, me fascina conectar conceptos y ver las cosas de una manera global donde cada pieza de información tiene sentido dentro del todo; de alguna manera mi cerebro me obliga a ser así y me recompensa por ello. Pero definitivamente no me veo como un arquitecto de la información, me gusta untarme las manos de diseño, me siento cómodo donde estoy y me es mas interesante diseñar una composición y bocetar hasta que sea agradable a conectar círculos y relacionar cajas. De alguna manera lo hago y disfruto, pero definitivamente no es mi nicho.

Esquemas de Organización

Esquema Alfabético

 

En esta sitio hay un listado de las películas online ordenado alfabéticamente. El esquema funcionaría correctamente solo si el usuario conoce de antemano el titulo de la película que desea ver, de no ser así la exploración del listado sería engorrosa.

 

Esquema Cronológico

Gmal posee una bandeja de entrada de correos organizada con un esquema cronológico, funciona muy bien y es altamente personalizable.

 

Esquema Geográfico

El sitio de CNN en español constan de un esquema de organización geográfico, clasifica las noticias según su origen. El esquema funciona ya que facilita al usuario el acceso a noticias que lo pueden afectar directamente.

Por Categoría

Esta pagina de fuentes tiene un esquema por categoría, permite al usuario encontrar fuentes dentro de grupos definidos que contienen ciertas características en común.

Por Tarea

El esquema por tarea presente en este editor de vectores online agrupa en torno a una tarea o funcionalidad diferentes opciones y herramientas presentes en el programa. El esquema funciona correctamente ya que facilita al usuario el desarrollo de las tareas que desee ejecutar.

Por Metáfora

 

Este sitio tiene un esquema de organización por metáfora, usa una serie de íconos que nos llevan a ciertas funcionalidades o información de interés del usuario. En lo personal, no tuve problemas en la interpretación de los símbolos así que considero que el esquema está bien aplicado.

Para un Público Específico

 

Alt1040 es un blog dirigido al sector informático, motoFull al automotriz y así con los demás. Estos blog están organizados para públicos específicos, y esta división garantiza hasta cierto punto que el usuario encontrará en ellos información relevante.

Calificando Infografías

Datos Curiosos del Sueño

Puntaje: 70/100

Es una infografía con buen contenido, los datos que posee son relevantes e interesantes. Respeta una retícula rectangular y tiene una composición balanceada y con puntas romas que van bien con el tema del sueño. El color está bien manejado, se usa el contraste para enfocar la vista en el contenido y facilitar la lectura.Posee ilustraciones que decoran la composición, pero no tiene elementos que ayuden a la interpretación visual de la información.
Falta la fuente.

Juegos Olímpicos

Puntaje: 95/100

Esta infografía destaca por su acabado limpio, estilo y uso del color, está dispuesta verticalmente en una retícula rectangular rígida y delimitada. El contenido es relevante e interesante, está categorizado adecuadamente y es respaldado por una exquisita iconografía y señalización.  Está respaldada por elementos gráficos-estadísticos de ayuda que transmiten la información exacta de una manera muy agradable para el lector.

Hollywood

Puntaje: 65/100

La infografía cuenta con información relevante y presenta una interesante comparación entre Hollywood y Bollywood que está demarcada a lo largo de ella. Las ilustraciones usadas son adecuadas y de un estilo atractivo. Respeta una retícula rectangular vertical demasiado rígida y repetitiva en las diferentes categorías. El color utilizado es demasiado oscuro y no facilita la lactura. La información está respaldada por lamentos gráficos confusos. Faltan las fuentes.

Halloween

Puntaje: 70/100

Esta infografía está hecha con amor, posee una rica variedad de personajes e ilustraciones que refuerzan la información presentada. Pese a eso, la información es interesante y adecuada, pero no presenta ningún trabajo de organización. La composición tiene un aire a su alrededor, pero en su estructura interna no cuenta con ningún tipo de retículación y presenta un desbalance en los elementos. Se podría hacer una elección mas variada de tipografías.

Skateboard

Puntaje: 75/100

Esta infografía  posee elementos tridimensionales muy interesantes y destacables.La información presentada es interesante pero es muy pobre y no va exactamente con el título. El uso del color es adecuado. Faltan las fuentes.

Ultimate Frisbee

Puntaje 60/100

La infografía presenta un elemento isométrico bien elaborado que respada la información. El uso del color es acertado, la composición de las siluetas forma es agradable y da movimiento a la infografía. El acabado gráfico no es adecuado, el cuadro de las posiciones es confuso y requiere una mejore explicación. Faltan las fuentes.

Sobrevive a los Robots

Puntaje 85/100

Esta infografía es desacable por el trabajo de ilustración y textuización, posee una gran variedad de personajes que contexualizan y le dan carácter a la composición. No hay un trabajo reticular ni jerarquía en la información. Parte de la iconografía es confusa y la tipografía podría ser mas variada y acorde con el contexto.

StarBucks Cafe

Puntaje: 85/100

Esta infografía presenta un elaborado trabajo de ilustración, cada elemento está detalla de forma exquisita, el manejo de color es adecuado y va con la compañía. Está realizada en una retícula en forma de rejilla, sin duda es ideal para el tipo de información que presenta. Acerca de la información,  una cosa son los productos que se venden en SrarBucks y otra la historia o datos de dicha compañía. Faltan las fuentes.

Pokemón

Puntaje: 65/100

La infografía es acertada en color y look and feel, se queda un poco corta en el detalle vectorial del algunos elementos y la ausencia de una retícula definida. La información presentada es relevante y hay iconografía y ayudas visuales acertadas. Recomendaría mas cuidado con el uso de la tipografía. Faltan las fuentes.

Nemo

Puntaje: 92/100

Esta infografía es muy bonita visualmente, pese a no tener retícula, la composición es armónica y balanceada. La ilustración de personajes y el detalle de los elementos es muy bueno, el color muy acertado y la información posee elementos gráficos e icónicos que fortalecen el mensaje. Aún así, la información no está organizada y no hay una navegabilidad suave en la composición;  carece de una jerarquía relevante.

 

 

Enter your email address to follow this blog and receive notifications of new posts by email.

Únete a otros 4 seguidores

Viz-me

One visualization at a time

Quite Alone

"To awaken quite alone in a strange town is one of the pleasantest sensations in the world" – Freya Stark

Global Art Junkie

A curated serving of the visual arts

Inkjot

little pictures I like to draw