miércoles, 8 de mayo de 2013

EL DISEÑO WEB USABILIDAD, INTERACTIVIDAD, NAVEGABILIDAD, ARQUITECTURA DE LA INFORMACIÓN Y LA INTERACCIÓN DE MEDIOS


Hoy comentaré un tema muy interesante si nos hemos incursionado como profesionales en una de las actividades que quizás parezca de moda pero que data desde los principios de la creación de la Internet, el WWW y el lenguaje HTML y se trata del “Diseño Web”; también para aquellos lectores que quieren ampliar su conocimiento en este tema se los recomiendo.

Diseño Web

Esta actividad no solo busca la creación de páginas o sitios web sino que engloba algunos factores importantes como la planificación, diseño e implementación de ellos, algunos pueden pensar que solo es una aplicación del diseño pero va mas allá de eso ya que requiere que tangamos en cuenta la usabilidad, interactividad, navegabilidad, arquitectura de la información y la interacción de medios como el texto, imagen, enlaces, audio y vídeo en la cual hare énfasis en este artículo pero si quisiera mencionar que esta define básicamente tres importantes etapas que son:
  1. Diseño Visual de la Información.
  2. Estructura y relación jerárquica de las páginas del sitio web.
  3. Posicionamiento en buscadores o SEO.
Jakob Nielsen 

Pero yo me quiero enfocar en los factores mencionados anteriormente, y quiero empezar por la usabilidad que hace connotación a la facilidad con que las personas pueden usar una herramienta y es un término que pulula en la informática y la tecnología, Jakob Nielsen (una de las personas más respetadas en el ámbito mundial sobre usabilidad en la web e ingeniero de interfaces) definió la usabilidad como"el atributo de calidad que mide lo fáciles que son de usar las interfaces Web", yo la quiero definir como la experiencia del usuario al interactuar con un sitio web; uno de los criterios que ayudan a tener alta usabilidad es por ejemplo no agobiar al usuario en la primera entrada o página de inicio (Home) y centrar nuestro diseño en lo que el usuario utiliza, aquello que realmente le interesa. Otro aspecto es aplicar las "Leyes de la Gestalt" que son leyes tradicionales del diseño que podemos aplicarlas al diseño en línea que versa sobre el fondo y figura, proximidad, similitud, contraste, entre otras.

La Interactividad es usado ampliamente en informática, en diseño multimedia entre otras actividades, básicamente siempre se ha considerado a ella como un proceso de comunicación, pero específicamente trata la interacción a modo de diálogo entre computador y usuario a travez de algún programa, a los sitios web se los considera un aplicativo web, solo como detalle la comunicación humana es el mejor ejemplo básico de interactividad.

La navegabilidad web es la facilidad con la que un usuario puede desplazarse por todas las páginas que componen un sitio web, por eso aquí se deben implementar una serie de estrategias de navegación, siempre recomiendo a mis estudiantes las famosas preguntas a responder ¿Dónde estoy? ¿Dónde he estado? Y ¿Dónde puedo ir? Según las respuestas nos podemos dar una idea de cuan navegable es nuestro sitio web.

La arquitectura de la información quizás es uno de los factores mas complejos de entender desde el punto de vista técnico puedo decir que se trata de una disciplina y arte que estudia el análisis, organización, disposición y estructuración de la información, nos enseña que debemos preocuparnos de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos, para el caso de sitios web siempre se ha hablado de tres aspectos el primero es el diseño estructural en entornos de información compartida, el segundo el arte y la ciencia de organizar y rotular sitios web y por el último en las comunidades emergentes digitales aplicar los principios del diseño y la arquitectura, puedo decir en resumidas cuentas que lo que se busca es facilitar al máximo los procesos de comprensión y asimilación de la información.

Por último es la interacción de medios trata el uso de texto o hipertexto, imagen, enlaces, audio y vídeo como factores multimedia dentro de cada aplicación web para enriquecer los recursos con los que queremos comunicar el mensaje a nuestro usuario. Quisiera concluir que un correcto diseño web involucra conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, hacer un uso correcto de los estándares establecidos por la W3C además de lo referente a la web semántica o conocida como web 3.0.

Para finalizar quiero compartir una exposición en video en mi canal de youtube con mayor detalle sobre el diseño web.

 

Fuente: Usability Engineering (1993) (ISBN 0-12-518406-9), Designing Web Usability: The Practice of Simplicity (1999) (ISBN 1-56205-810-X), Wikipedia.org, http://blog.planesdigitales.com e Información Personal.

lunes, 6 de mayo de 2013

LA HISTORIA DEL HTML - HYPERTEXT MARKUP LANGUAGE DESDE HTML 1.0 A HTML5

HTML
Hoy comentare sobre un lenguaje tan popular e importante en el diseño de páginas web, y se trata del conocido HTML, que debo aclarar no se trata de un lenguaje de programación ni mucho menos para hacer aplicaciones de escritorio como los lenguajes tradiciones C, C++, VB.NET, Java entre otros y la razón es muy simple HTML carece de estructuras condicionales, ciclos, uso de variables ni nada que se le parezca. Recuerdo que en alguna lectura del internet se mencionaba que el primer documento donde se hacía público su descripción o sintaxis publicada por el conocido “padre del internet” , Tim Berners-Lee fue en 1991 y se llamó “HTML Tags” donde la palabra TAG hace referencia a etiqueta o marca, donde un TAG puede tener atributos o propiedades; técnicamente una etiqueta es una palabra encerrada entre los símbolos “< > menor y mayor que”, por ejemplo la marca <body>, <html>, <title>, <font> entre muchas otras, también estas marcas deben cerrarse anteponiendo antes del menor que “<” un símbolo de slash “/” a manera de ejemplo en la marca </body>.


Pero estos hechos no fueron aislados porque desde 1989 ya existían 2 formas que permitían vincular documentos electrónicos, por un lado los hipervínculos o también denominados enlaces y por otro un poderoso lenguaje de etiquetas denominado SGML por sus siglas Standard Generalized Markup Language o "Estándar de Lenguaje de Marcado Generalizado", además ya desde 1.990, Berners Lee comienza y define por fin el HTML como un subconjunto del conocido SGML como lo he mencionado anteriormente; pero lo grandioso es que a la par crea algo más importante para el crecimiento del internet el World Wide Web o WWW. Para 1.991, Lee crea el primer navegador web denominado ViolaWWW, que funcionaba en modo texto y sobre un sistema operativo UNIX.

ViolaWWW es considerado como el primer navegador gráfico de la historia, precursor del popular navegador Mosaic que saldría al mercado en el año de 1.993, y que posteriormente se convertiría en el primer referente clásico de la tecnología World Wide Web. Como lo mencione al principio HTML no es un lenguaje de programación sino un lenguaje de marcado hipertextual que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes en el diseño de las páginas web, una forma que el lector puede comprobar el uso de este lenguaje en el diseño de las páginas web de internet es con su navegador, usando la opción “ver código fuente” al dar clic secundario, se vera el código HTML y probablemente con él otros lenguajes como Java script. Berners-Lee y Dan Connolly presentaron un boceto de Hypertext Markup Language, el cual incluía una Definición de Tipo de Documento SGML para definir la gramática, este documento describe 22 elementos que incluyen el diseño inicial y la simplicidad del HTML, puedo afirmar que cerca de 13 de estos elementos todavía existen en HTML4.
Mosaic  

Unos de los navegadores en usar el lenguaje fue Mosaic considerado el primer navegador gráfico disponible para visualizar páginas web; fue muy importante la implementación de inserción de imágenes en Mosaic, este fue creado en el NCSA en enero de 1993 por Marc Andreessen, lo rescatable era que HTML en este navegador estaba basado en estándares para ser un prototipo o boceto, pero realmente al HTML se lo reconoce desde 1993 cuando la Internet Engineering Task Force o IETF lo establece y a su vez lo reconoce formalmente, debo citar que este organismo internacional tiene como objetivos el contribuir a la ingeniería de Internet, actuando en diversas áreas. Fue creada en EE.UU. en 1986, además es mundialmente conocida por ser la entidad que regula las propuestas y los estándares de Internet. Personalmente mis comienzos con HTML datan del año 1.999 cuando tome una materia llamada Seminario II en mi carrera de Licenciatura en Informática, y mi profesor nos enseño este lenguaje codificándolo en el bloc de notas, así que aprendí como los “Grandes Gurús” sin ayudas de sintaxis o sugerencias de código, hoy en día Adobe Dreamweaver es la herramienta por excelencia en el diseño y mantenimiento de páginas y sitios web, y el hecho de la maquetación visual, pero debo aclarar que ello no significa que el lenguaje HTML no está presente, porque Dreamweaver va trascribiendo en código lo que vamos maquetando visualmente , esto es a lo que llamamos un editor WYSIWYG que significa “What You See Is What You Get” que quiere decir "lo que ves es lo que obtienes". Un tema que siempre es recurrente en la mente de los desarrolladores y diseñadores de páginas web son las versiones de este lenguaje, para aclararlo lo voy a presentar cronológicamente a continuación:
  1. 1990, a principios de este año se define por fin el HTML 1.0 como un subconjunto del conocido SGML.
  2. 1993, a finales de este año se presenta la especificación formal de HTML+ o HTML 2.0 se le dio, por lo tanto, el número de versión 2 para distinguirla de las propuestas no oficiales previas.
  3. 1995, marzo se presenta el borrador del estándar HTML 3.0 fue propuesto por el recién formado W3C en marzo de 1995.
  4. 1996, HTML 3.1 nunca llegó a ser propuesto oficialmente, y el estándar siguiente fue el HTML 3.2 que se usa desde principios de este año.
  5. 1997, el W3C publica una recomendación del HTML denominada HTML 4.0
  6. 1999, el W3c publica HTML4.01 con mejores es aspectos multimedia.
  7. 2011, aunque se empezó desde el 2006, el W3C se interesó en el desarrollo de HTML5, y en 2007 se une al grupo WHATWG y trabaja en conjunto en el nuevo lenguaje donde se elimina y agregan etiquetas importantes para video, audio y canvas, termina siendo publicado 2011.
A continuación les dejo un sencillo ejemplo de una página en este lenguaje, basta copiarlo y pegarlo en el bloc de notas para luego grabarlo con cualquier nombre pero con la extensión “.html”.

 <html> 
<head> <title>Pagina 1</title>
 </head> 
<body> <p>Mi primera Página</p> 
 </body> 
</html>.

HTML5

Con ello espero haber aclarado algunas dudas sobre este lenguaje tan importante hoy en día para el diseño y maquetado de las páginas web que todo buen “Web Designer” debe conocer, así mismo las diferentes versiones aunque no he citado las diferentes características nuevas en cada una de ellas, lo dejaremos para otro artículo. También al finalizar quiero compartir con ustedes un video donde expongo información de HTML5 y XHTML5, algunas caracteristicas e implementaciones importantes.

  Fuente: Wikipedia.org, Información Personal y HTML, XHTML and CSS por Steven M. Schafer 5ta edición.