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/

 

Anuncios

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.

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.

Arquitectura de la Información

La información lo es todo, y hay tanta información disponible en el mundo que acceder a una pieza en particular suele ser engorroso y demorado. La tecnología nos ha brindando la posibilidad de reunir y acceder a ella de una manera casi instantánea, la internet.
Hemos elaborado poderosos buscadores que exploran millones de  páginas web repletas de información, aveces encontramos lo que buscábamos y otras veces no, simplemente nos perdemos en el sitio y nos damos por vencidos. ¿Que podría garantizar que nuestra búsqueda no sea en vano? Allí es donde entra la Arquitectura de la información.

¿Que es la Arquitectura de la Información?

Es el arte y ciencia de organizar y catalogar información para optimizar la usabilidad y buscabilidad de un sitio web aplicando conceptos del diseño y arquitectura.

¿Cuál es su función?

Estructurar la información, organizarla y clasificarla para garantizar que el usuario encontrará fácilmente lo que está buscando, como en una biblioteca, donde los libros se encuentran dispuestos en base a cierta variable que facilita encontrar determinado tomo.
Las paginas webs grandes que tienen mucha información necesitan que toda la información sea accesible a los usuarios de una manera intuitiva, los arquitectos clasifican la información y mandan el resultado al departamento de diseño que luego elabora una interfaz que mejore la satisfacción del usuario y supla sus necesidades.

El Éxito de un Sitio Web

En el primer capítulo del libro “Information Architecture for the World Wide Web” el autor compara los sitios web con la arquitectura de los edificios, ambos son frecuentados diariamente por personas, y ellos causan un impacto consciente o inconsciente en ellas; la arquitectura, los ambientes y la accesibilidad son factores que nos hacen preferir ciertos sitios sobre otros.
Cuando un sitio nos desagrada y frustra es muy probable que el diseñador no haya construido el sitio basado en las necesidades y comodidad del usuario; por ejemplo un edificio de muchos pisos sin ascensor, una página web sin buscador, o un blog sin tags o categorías adecuadas.

Para crear un sitio web exitoso en necesario meterse en los zapatos del usuario, definir el público a quien está dirigido, sus gustos y necesidades,  y por último utilizar toda la experiencia que se tenga sobre la web para aplicarla al diseño del sitio.
Si es posible, el diseño debe abarcar y agradar a la mayor cantidad de usuarios, debe ser global como un hotel y cálido como la casa.

Preguntarle a diferentes tipos de personas que les gusta y que no sobre un diseño podría ser una base consistente para comenzar a construir el sitio, organizar la información y recursos gráficos que se usarán, definir las prioridades y objetivos del sitio.

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