Diseño y Elaboración de Paginas Web: R.A.-1.1 Determina la estructura del sitio web con base en las necesidades del usuario.

I.- RECURSO O ACTIVIDAD

A. Identificación de elementos Web.

· Internet.
· World Wide Web.
· Navegadores Web.
· Protocolo HTTP.
· Protocolo FTP.
· W3C.
· CSS.

· Lenguajes del lado del usuario.

HTML.
JavaScript.
XHTML
XML

· Lenguajes del lado del servidor.

CGI
Perl
ASP
PHP
DHTML

B. Comprobación de uso de estándares en el

código de programación.

· Validación de HTML.

· Validación de CSS.

C. Determinación de la información del sitio.

· Definición del objetivo del sitio.

· Definición de la audiencia.

· Definición de contenidos.

D. Diseño de la estructura del sitio.

· Elaboración de mapas del sitio.

· Definición de los sistemas de navegación.

E. Determinación de elementos de los

sistemas de navegación.

· Definición del diseño visual.

· Diseño de las estructuras de las páginas.

· Bocetos de diseño.

· Borradores de página.

· Maqueta Web.
II.-CONTENIDO

A. Identificación de elementos Web.

Internet

Podemos definir a Internet como una "red de redes", es decir, una red que no sólo interconecta computadoras, sino que interconecta redes de computadoras entre sí. De esta manera, Internet sirve de enlace entre redes más pequeñas y permite ampliar su cobertura al hacerlas parte de una "red global".

WWW

En informática, la World Wide Web (WWW) o Red informática mundial^[1] es un sistema de distribución de información basado en hipertexto o hipermedios enlazados y accesibles a través de Internet.

Que son los navegadores

Los navegadores o clientes web son programas que permiten al usuario conectarse con servidores web de Internet para acceder, recuperar y vislumbrar documentos HTML.

Protocolo HTTP

Es un protocolo orientado a transacciones y sigue el esquema petición-respuesta entre un cliente y un servidor. Al cliente que efectúa la petición (un navegador web o un spider) se lo conoce como "user agent" (agente del usuario). A la información transmitida se la llama recurso y se la identifica mediante un localizador uniforme de recursos (URL). Los recursos pueden ser archivos, el resultado de la ejecución de un programa, una consulta a una base de datos, la traducción automática de un documento, etc.

Protocolo FTP

El protocolo FTP define la manera en que los datos deben ser transferidos a través de una red TCP/IP.

El objetivo del protocolo FTP es:

1. permitir que equipos remotos puedan compartir archivos

2. permitir la independencia entre los sistemas de archivo del equipo del cliente y del equipo del servidor

3. permitir una transferencia de datos eficaz

W3C

El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones Miembro [ingles], personal [ingles] a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares Web [ingles]. Liderado por el inventor de la Web Tim Berners-Lee [ingles] y el Director Ejecutivo (CEO) Jeffrey Jaffe [ingles], la misión del W3C es guiar la Web hacia su máximo potencial..

CSS

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Programación del lado del usuario

La Programación del lado del servidor es una tecnología que consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web para generar páginas HTML dinámicamente como respuesta.

Todo lo que suceda dentro del servidor es llamado procesamiento del lado del servidor, o server-side processing. Cuando tu aplicación necesita interactuar con el servidor (por ejemplo, para cargar o guardar datos), ésta realiza una petición del lado del cliente (client-side request) desde el navegador, a través de la red usando invocaciones remotas a métodos (remote procedure call, RPC). Mientras se está procesando una llamada RPC, tu servidor está ejecutando código del lado del servidor.

La utilización de las diferentes aplicaciones o servicios de Internet se lleva a cabo respondiendo al llamado modelo cliente-servidor.

Cuando se utiliza un servicio en Internet, como consultar una base de datos, transferir un archivo o participar en un foro de discusión, se establece un proceso en el que entran en juego dos partes. Por un lado, el usuario, quien ejecuta una aplicación en procesador local: el denominado programa cliente. Este programa cliente se encarga de ponerse en contacto con el procesador remoto para solicitar el servicio deseado. El procesador remoto por su parte responderá a lo solicitado mediante un programa que está ejecutando. Este último se denomina programa servidor. Los términos cliente y servidor se utilizan tanto para referirse a los programas que cumplen estas funciones, como a las computadoras donde son ejecutados esos programas.

El programa o los programas cliente que el usuario utiliza para acceder a los servicios de Internet realizan dos funciones distintas. Por una parte, se encargan de gestionar la comunicación con el computador servidor, de solicitar un servicio concreto y de recibir los datos enviados por éste; y por otra, es la herramienta que presenta al usuario los datos en pantalla y que le ofrece los comandos necesarios para utilizar las prestaciones que ofrece el servidor.

Cuando nosotros seleccionamos un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (una computadora que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él, por ejemplo: ASP, PHP, JSP.

Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan un pretratamiento.

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas.

Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.

Lenguajes del lado del Servidor.

CGI

Es el sistema más antiguo que existe para la programación de las páginas dinámicas de servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidor que los ejecuta.

Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C, C++, Visual Basic o Delphi pueden ser también empleados para construirlos.

Perl

Perl es un lenguaje de programación interpretado, al igual que muchos otros lenguajes de Internet como Javascript o ASP. Esto quiere decir que el código de los scripts en Perl no se compila sino que cada vez que se quiere ejecutar se lee el código y se pone en marcha interpretando lo que hay escrito. Además es extensible a partir de otros lenguajes, ya que desde Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. También desde otros lenguajes podremos ejecutar código Perl.

ASP

La tecnología ASP (Active Server Pages) está estrechamente relacionada con el modelo tecnológico de Microsoft. Intenta ser solución para un modelo de programación rápida ya que programar en ASP es como programar en Visual Basic, por supuesto con muchas limitaciones.

Este modelo tecnológico usa diversos componentes ya desarrollados como algunos controles ActiveX así como componentes del lado del servidor, tales como CDONTS, por ejemplo, que permite la interacción de los scripts con el servidor SMTP que integra IIS.

Se facilita la programación de sitios web mediante varios objetos integrados, como por ejemplo un objeto de sesión basada en cookies, que mantiene las variables mientras se pasa de página a página.

las versiones pre-.NET se denominan actualmente (desde 2002) como ASP clásico.

En ASP 3.0, hay siete objetos integrados disponibles para el programador: Application,ASPError, Request, Response, Server, Session y ObjectContext. Cada objeto tiene un grupo de funcionalidades frecuentemente usadas y útiles para crear páginas web dinámicas.

Desde 2002, el ASP clásico está siendo reemplazado por ASP. NET, que, entre otras cosas, reemplaza los lenguajes interpretados como VBScript o JScript por lenguajes compilados a código intermedio (llamado MSIL o Microsoft Intermediate Language) como Microsoft Visual Basic, C#, o cualquier otro lenguaje que soporte la plataforma .NET. El código MSIL se compila con posterioridad a código nativo.

PHP

PHP es un lenguaje interpretado de propósito general ampliamente usado y que está diseñado especialmente para desarrollo web y puede ser incrustado dentro de código HTML.

Generalmente se ejecuta en un servidor web, tomando el código en PHP como su entrada y creando páginas web como salida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno.

Aunque todo en su diseño está orientado a facilitar la creación de página web, es posible crear aplicaciones con una interfaz gráfica para el usuario, utilizando la extensión PHP-Qt o PHP-GTK.

También puede ser usado desde la línea de órdenes, de la misma manera como Perl o Python pueden hacerlo, a esta versión de PHP se la llama PHP CLI (Command Line Interface).

Cuando el cliente hace una petición al servidor para que le envíe una página web, el servidor ejecuta el intérprete de PHP. Éste procesa el script solicitado que generará el contenido de manera dinámica (por ejemplo obteniendo información de una base de datos). El resultado es enviado por el intérprete al servidor, quien a su vez se lo envía al cliente.

Mediante extensiones es también posible la generación de archivos PDF, Flash, así como imágenes en diferentes formatos. Permite la conexión a diferentes tipos de servidores de bases de datos tales como MySQL, Postgres, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite.

PHP también tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos, tales como UNIX (y de ese tipo, como Linux o Mac OS X) y Windows, y puede interactuar con los servidores de web más populares ya que existe en versión CGI, módulo para Apache, e ISAPI.

JSP

JSP es un acrónimo de Java Server Pages o Páginas de Servidor Java. Es, pues, una tecnología orientada a crear páginas web con programación en Java.

Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de múltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. Por tanto, las JSP podremos escribirlas con nuestro editor HTML/XML habitual.

DHTML

DHTML no es precisamente un lenguaje de programación. Más bien se trata de una nueva capacidad de la que disponen los navegadores modernos, por la cual se puede tener un mayor control sobre la página que antes.

Cualquier página que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero en este caso nos referimos más a efectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la página, se puede modificar su posición, dimensiones, color, etc.

DHTML nos da más control sobre la página, gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en páginas web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc.

Para realizar las acciones sobre la página, como modificar la apariencia de una capa, seguimos necesitando un lenguaje de programación del lado del cliente como Javascript o VBScript.

En la actualidad, DHTML también puede englobar la programación en el servidor.

B.- Comprobación de uso de estándares en el código de programación

¿QUE ES UN VALIDADOR?

Validación de html

Es un sistema basado en Internet y presentado en el propio sitio del W3C (http ://validator.w3.org/) y que permite detectar errores en la forma de utilizar el lenguaje HTML y XML en la construcción de un Sitio Web. Lo interesante del programa es que muestra en detalle los errores del código en la página que se pruebe, con lo cual se puede llegar a una directa corrección de los problemas que se hayan detectado.

La importancia de tener un código correctamente validado es que se asegura, a partir de esa certificación, que la página web puede ser vista sin problemas, desde cualquier programa visualizador que cumpla con los estándares internacionales en la materia.

Validación de css

Es un sistema basado en Internet y presentado en el propio sitio del W3C (http://jigsaw.w3.org/css-validator/) mediante el cual se puede validar la sintaxis de una Hoja de Estilo en Cascada (Cascade Style Sheet o CSS, en inglés), mediante la cual se describe la forma de presentar contenidos en una página web.

Este programa muestra en detalle los errores del CSS en la página que se pruebe, con lo cual se pueden aislar los problemas y hacer la corrección correspondiente. Cabe indicar que la ventaja de usar la tecnología CSS es que facilita la mantención de un sitio mediante la separación de la presentación (diseño) del contenido.
ir a www.w3c.es.para saber de los lineamientos que declara la w3c.

Veamos un ejemplo 1.1 para validar código html:
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>

Estructura básica de un documento HTML: Cabecera y cuerpo del documento

Tres son las tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.

<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.

<HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay que colocar nada del texto del documento.

<BODY>: Encierra el resto del documento, el contenido.

Pasa el ejemplo en un bloc de notas,RECUERDA pasar las etiquetas en minúsculas y verifica el código en el validador html sugerido por la página.

NOTA.-añade el siguiente código al inicio para que no se detecten errores e investiga el porque de este código y por que varia según la versión .

<!DOCTYPE html>

C. Determinación de la información del sitio.

Arquitectura de la información

Entre las metodologías más útiles que tendrán los profesionales encargados de desarrollar un Sitio Web, se contarán las que aparecen descritas dentro de la Arquitectura de la Información, que es el conjunto de métodos y herramientas que permiten organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa. La Arquitectura de Información estará cumpliendo sus objetivos cuando un usuario entre por primera vez al sitio y pueda reconocer a quién pertenece el Sitio Web; lo pueda entender en forma rápida y sin esfuerzo y encontrar la información ofrecida fácilmente. Adicionalmente eso entregará el beneficio de que quienes producen el sitio podrán ubicar la nueva información sin tener que crear nuevas estructuras y al mismo tiempo tendrán la libertad de incorporar nuevas iniciativas al sitio sin tener que partir de cero. Los elementos que se muestran a continuación constituyen la metodología de la Arquitectura de Información, mediante la cual es posible conseguir las metas de organización y visibilidad de los contenido. Cada una de ellas deberá ser explorada, desarrollada y documentada adecuadamente. El resultado de ello entregará información clave para la toma de decisiones técnicas, visuales y de contenido, todo ello con el objetivo de entregar una adecuada experiencia a los usuarios cuando naveguen dentro del sitio.

Definición de Objetivos

A través de esta etapa se busca definir cuáles serán los objetivos centrales que deberá tener el Sitio Web y establecer la forma de cumplirlos. Se recomienda comenzar por generar un objetivo central y luego definir varios objetivos secundarios; no obstante, es importante que estos objetivos sean explicitados adecuadamente al comienzo del desarrollo, con el fin de que todo el equipo de profesionales involucrados tengan claro el horizonte del proyecto. Para generar objetivos que sean válidos y comprensibles, se aconseja escribirlos a través de frases que se inicien con verbos que expresen las acciones a realizar. Por ejemplo: Recibir preguntas de los usuarios sobre las actividades de la institución o Presentar públicamente los informes más importantes de la institución. Una forma de llegar más concretamente a los objetivos, es revisar la visión y la misión de la organización, desde la cual se pueden obtener las claves que permitan definirlos. Los objetivos que se creen para el sitio deberán estar en concordancia con las necesidades y planificación que haya hecho la institución en sus planes anuales. Una de las primeras metas que se debe cumplir consiste en tener presencia en Internet, siguiendo en este sentido el Instructivo Presidencial de Gobierno Electrónico. No obstante, se debe entender como tal la entrega de información actualizada de la institución, más la proposición de alguna actividad interactiva, mediante el aprovechamiento del estado actual de la tecnología. Por ejemplo, ofrecer las respuestas de las principales Preguntas Frecuentes que se reciben en la institución o entregar la explicación detallada sobre los principales trámites, permiten cumplir con la idea de tener presencia, a través de una propuesta de contenido que ofrece un valor agregado a quienes ingresan al sitio. Idealmente el listado de objetivos del sitio debe estar acotado y no llegar a más de cinco proposiciones. Este número, si bien es arbitrario, se indica como una forma de señalar que los objetivos no pueden ser tantos como para impedir su cumplimiento; ni tan pocos como para que el sitio sea poco ambicioso. De cada uno de estos objetivos se pueden desprender tareas concretas que permitan avanzar en el cumplimiento de ellos.

Definición de Audiencia

Una vez que se ha terminado adecuadamente con la definición de los objetivos, se debe dar un siguiente paso, que es el de determinar las principales audiencias (públicos) hacia las cuales se orientará el sitio. Mientras existan brechas de acceso a internet en la población, el Sitio Web no podrá atender al mismo público y las mismas necesidades que resuelve de manera presencial en ventanilla, sin embargo, la conectividad a internet crece cada año y por este motivo, se deben tener en cuenta varias consideraciones para definir qué tipos de audiencia se atenderán desde las diferentes pantallas del sitio. A continuación se hacen algunas definiciones de audiencia, las que, sin importar las características del sitio, siempre deberán estar presentes, y por lo mismo, deben traducirse en acciones para poder atenderlas adecuadamente.
Por capacidad física: la audiencia del sitio incluirá personas con discapacidades físicas, por lo que una de las metas que debe tener todo sitio del Gobierno de Chile es permitir el acceso de ellos, a través del cumplimiento de las normas de Accesibilidad que se han recomendado como estándares internacionales. Para hacerlo se deben tomar las medidas correspondientes durante el proceso de desarrollo y diseño del sitio, se sugiere atender las recomendaciones mencionadas en las secciones Usabilidad y Accesibilidad.
Por capacidad técnica: la audiencia que llegue al sitio se dividirá de acuerdo a la experiencia técnica que tenga; por ello se deben plantear acceso simples mediante enlaces y otros más complejos, por ejemplo, mediante el uso de buscador. Es importante notar que en Chile desde hace algunos años se dobla la cantidad de personas que acceden a la Internet, por lo que cada año, al menos la mitad de la audiencia tiene poca o nula experiencia en el uso de Internet.
Por conocimiento de la institución: los usuarios del sitio se dividirán entre quienes conocen la institución y quienes no la conocen. Por lo anterior, los primeros siempre sabrán dónde buscar lo que necesitan usando la terminología, siglas y nombres de departamentos internos; los segundos, en tanto, no entenderán nada de la nomenclatura interna y les será muy difícil acceder a la información que se les ofrezca de esa manera.
Por necesidades de información: los usuarios del sitio también se dividirán entre quienes llegan a buscar contenidos determinados y quienes sólo llegan a ver si existe algo que les pueda servir en lo que estén realizando.
Por ubicación geográfica: dentro de la audiencia siempre habrá chilenos que ingresan al Sitio Web desde lugares diferentes a Santiago o incluso Chile, por lo que los contenidos deben responder también a esta diversidad. ¿Cómo se llega a establecer la Audiencia? Una de las formas más concretas de establecer la audiencia que tiene el sitio, es comenzar por investigar en la propia institución, para determinar a quiénes atienden sus diferentes reparticiones. Entrevistar especialmente a los funcionarios que atienden público (Oficina de Partes, Secretarias, Oficina de Información, Reclamos y Sugerencias (OIRS), Mesas de Ayuda, Centrales y Líneas telefónicas 600 y 3 800) es una fórmula que permitirá determinar con bastante exactitud qué está ocurriendo con la audiencia. Una vez que se ha hecho ese trabajo, es interesante hablar con usuarios que llegan a la institución y hacerles preguntas muy simples y directas: • ¿A qué vino a la institución? • ¿Tiene acceso a Internet? • ¿Propio o a través de Infocentros? • ¿Qué tipo de información en la Internet le habría evitado este viaje • ¿Qué le gustaría ver en el sitio Internet de esta institución? De las respuestas que se obtengan, se podrá hacer un muy buen resumen de tres elementos:• Tipos de usuario que se podrían atender a través de Internet • Expectativas de los usuarios respecto del sitio • Necesidad de información de la institución Estudiar Escenarios de Uso Otra de las metodologías más efectivas, al momento de trabajar en el tema de las audiencias, tiene que ver con la forma en que el equipo de desarrollo responda a dos preguntas: • ¿Cuáles son las audiencias previstas? Al responder esta pregunta, se busca determinar hacia quiénes se deberá enfocar el sitio y, con esta información, comenzar a tomar decisiones respecto de la forma de navegación, los servicios interactivos previstos y otros elementos de despliegue que tendrá el sitio. • ¿Por qué la gente vendrá a su sitio? La respuesta a esta pregunta busca determinar, en base a las audiencias posibles o previstas, pensar y buscar los tipos de contenidos que estos usuarios vendrán a buscar al sitio. En este sentido, la expresión Estudiar escenarios de uso, busca determinar situaciones de uso reales en el Sitio Web, basado en usuarios existentes que puedan llegar al sitio a buscar determinados tipos de información. Por ejemplo, si nuestro Sitio Web se refiere a cotizaciones previsionales, se puede aplicar el caso don Juan Pérez, agricultor de Paine, que quiere saber qué puede hacer para pagar las imposiciones de su AFP en su comuna. ¿Existe en el sitio una respuesta para él? ¿Si llegara al sitio y viera la portada que se ha diseñado, encontraría la respuesta a su pregunta? Al llegar a casos reales de uso del sitio, basado en las audiencias que se haya definido, es posible establecer con mucha mayor exactitud cómo esas personas (es decir casos reales) van a usar el sitio. Naturalmente, este tipo de revisiones permiten ratificar o modificar lo que se haya definido previamente como contenido del sitio, debido a que muchas veces la planificación inicial es hecha por personas que conocen la institución y dan por obvios muchos de los contenidos que para los usuarios normales no lo son tanto.

Definición de Contenidos del Sitio

Una vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder a hacer las definiciones más concretas que permitan decidir qué contenidos son los que va a tener el Sitio Web que se desarrolle. Para identificar contenidos, se deben utilizar como insumo los materiales que se hayan obtenido en la etapa de identificación de Objetivos y de Audiencias, ya que en ambos la búsqueda giró en torno a las necesidades que tenían los usuarios del sitio. Para cumplir con una norma general respecto de qué debería contener un sitio, se pueden anotar las siguientes, como las más importantes:
Acerca de la Institución: entregar la información completa referida a Autoridades, Organigrama, Normativa legal asociada, Oficinas, Horas de Atención, Teléfonos, etc. Productos / Servicios: destacar las actividades principales que el usuario puede hacer en la institución; puede incluir una guía de trámites que facilite las acciones de las personas que acudirán a la institución y que considere servicios interactivos para hacerlos desde el Sitio Web.
Novedades de la Institución: últimas actividades, noticias, nuevos servicios, tramites destacados, etc. Esta es una lista mínima que crecerá en la medida de las necesidades de entrega de información de la institución, lo importante es hacer énfasis en que el interés de los contenidos variará si se trata de un usuario interno como los funcionarios de la institución o externo como ciudadanos (usuarios). Por ejemplo, si miramos un Sitio Web desde el punto de vista del usuario externo de la institución, lo que más le interesará será la información referida a los trámites, seguida por la que informe acerca de cómo tomar contacto con la institución. Si la miramos desde el punto de vista del usuario interno, lo más importante será la información de Novedades, seguida por la de organigrama y presentación interna. Por lo mismo, es muy relevante que tanto los objetivos como la audiencia del sitio se hayan definido muy bien en forma previa, porque de lo contrario no habrá posibilidad de atender a ambos usuarios de manera adecuada.
Agrupar y Etiquetar el Contenido Con las definiciones hechas hasta ahora, llega el momento de poner en práctica las metodologías que permiten ordenar los contenidos, agrupándolos en conjuntos coherentes y dándoles nombres que los identifiquen. Probablemente la mejor técnica para hacerlo es hacer unas pequeñas tarjetas de papel, en las que se anotan las principales áreas de contenido que se hayan detectado y revisado en el paso anterior. Una vez hecho, las cartas se ponen sobre una mesa y se van agrupando, hasta formar conjuntos de elementos coherentes entre ellos. Luego, a cada conjunto se le pone un nombre (idealmente una sola palabra) que identifique a todos sus contenidos. Con esas agrupaciones hechas, ya tendremos los elementos adecuados para generar posteriormente el árbol de contenidos que, a su vez, permitirá hacer el sistema de navegación. Una vez que el proceso de Etiquetado ha concluido, es bueno hacer comprobaciones empíricas de la validez de los nombres escogidos. Para ello, se requiere que los elegidos sean mostrados a personas de diverso origen y que conozcan la institución, como también a quienes la desconozcan por entero. Ellos deben responder las siguientes preguntas: • ¿Qué significa este nombre? • ¿Qué tipos de contenidos esperaría encontrar en esta área? Con las respuestas obtenidas se podrá juzgar si los nombres que se han usado son los más adecuados o, bien, hay que introducir modificaciones. Por ejemplo, dentro de los nombres más usados para una de las secciones habituales de un Sitio Web como es la de información corporativa, se cuenta Acerca de, Sobre... , Quiénes Somos e Información Corporativa. Mas información sobre Card Sorting en Usability.gov (en inglés) Identificar Requerimientos Funcionales Junto con la búsqueda de las áreas de contenido que deberá tener el sitio, se debe trabajar también en la definición de lo que se busca que el sitio haga, es decir, los tipos de interacción que se busca incluir. Dentro de los servicios interactivos más frecuentes se cuentan las siguientes:
• Formulario de Contacto para envío de mensajes electrónicos
• Sistema de envío de una noticia por mail a un amigo
• Formato de impresión de los contenidos
• Mapa del Sitio Dentro de las funcionalidades de mayor complejidad, pero a las que todo sitio debería aspirar, se cuenta:
• Buscador interno del Sitio Web
• Área de acceso privado para usuarios registrados
• Sistema de envío de boletines de noticias del sitio a usuarios registrados Será importante que el sitio cuente con todos los servicios interactivos descritos como mínimos, para ofrecer una mejor experiencia al usuario que lo visita.

Análisis de Sitios Similares (Benchmark) El último elemento que se debe desarrollar en esta etapa es la búsqueda de otros sitios en Internet que sean similares a nuestra institución, con el fin de revisar de qué manera han resuelto los mismos problemas que deberemos atender. Esta actividad comparativa permitirá llegar a las buenas prácticas que es posible adaptar a las necesidades de nuestro sitio, con el fin de asegurarnos métodos de funcionamiento y despliegue de contenidos, que sean coherentes con los objetivos que se han planteado inicialmente. Es importante que se haga una pauta previa de comparación, con el fin de saber de antemano cuáles son los parámetros que se medirán y gracias a eso, optimizar la revisión que se haga (ver ejemplo de Pauta de Comparación de Sitios Web [RTF; 26Kb]).

D. Diseño de la estructura del sitio.

Definición de la Estructura del Sitio

Una vez que se ha hecho el trabajo de identificación de contenidos, se debe avanzar hacia las definiciones relacionadas con la forma que tendrá el sitio que se está desarrollando. Ello implicará trabajar en tres áreas concretas, a través de las cuales se definirá la estructura del sitio, el árbol de contenidos y los sistemas de navegación que se ofrecerá a los usuarios para que avancen a través de sus contenidos. Las tres áreas mencionadas se explican a continuación: Creación de la Estructura Se refiere al proceso de identificar la forma que tendrá el Sitio Web que se está desarrollando. En este sentido es importante hacer una diferencia entre estructura y diseño (que será explicada gráficamente más adelante en este capítulo).

Estructura: se refiere a la forma que tendrá el Sitio Web en términos generales con sus secciones, funcionalidades y sistemas de navegación. No considera ni incluye elementos gráficos (logotipos, viñetas, etc.).

Diseño: se refiere a la solución gráfica que se creará para el sitio, en la cual aparecen colores, logotipos, viñetas, y otros elementos de diseño que permiten identificar visualmente al sitio. Dado lo anterior, cuando hablamos de la estructura nos estamos refiriendo básicamente a cuál será la experiencia que tendrá un usuario cuando accede al sitio. De esta manera podremos determinar dónde estarán ubicados los servicios interactivos (buscador, sistemas de encuestas, áreas de contenidos). Gracias a la realización de esta etapa es posible discutir en términos muy prácticos cuál será la oferta de elementos de información e interacción que tendrá el usuario. Al no incluir elementos de diseño, se permite que la discusión sobre la estructura se desarrolle en aspectos concretos, sin que intervengan aún consideraciones estéticas que habitualmente atrasan la aprobación de esta etapa del desarrollo.

Mapas Permanentes del Sitio

Se refiere al proceso de crear un árbol de contenido en el que se muestre de manera práctica cuántas secciones tendrá el sitio en desarrollo y cuántos niveles habrá dentro de cada uno. Cuando se usa la idea de crear un árbol, se refiere exactamente a generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonas principales, secundarias y contenidos finales que se irán incorporando. En este sentido se debe evitar a toda costa que el árbol de contenidos represente la estructura de la organización, dado que ésta es conocida y comprendida internamente, pero constituye una barrera de entrada para usuarios externos. Si ellos llegan a buscar en una estructura de contenidos basada en la forma en que funciona la organización, primero deberán comprender cómo funciona la entidad para luego encontrar lo que les interesa. En este sentido se sugiere el uso de dos tipos de árboles posibles, Arbol Organizacional (Figura 1) y Arbol Funcional (Figura 2).

E. Determinación de elementos de los sistemas de navegación.

Una vez que se ha terminado el trabajo en la estructura, ya se cuenta con los insumos suficientes como para avanzar hacia la generación del diseño visual de las pantallas del sitio, momento en que se utilizarán todos los insumos que se han ido generando en las etapas anteriores.
Para ello la recomendación es trabajar en cuatro etapas sucesivas e incrementales, que se describen a continuación:

Diseño de las Estructuras de Páginas

Esta etapa considera la generación de dibujos o diagramas lineales (wireframes)
que describen los componentes de cada una de las pantallas del sitio, con el
objetivo de verificar la ubicación de cada uno de ellos.
El ideal es que se dibujen diagramas con todas las pantallas que tendrá el sitio,
ya que de esta manera será posible que diseñadores y desarrolladores tengan un
documento concreto de trabajo, a través del cual resuelvan todas las dudas de los
elementos que componen esta página. Si bien este trabajo es largo y puede
resultar tedioso, su ventaja es que ningún elemento en las páginas queda puesto
al azar sino que responde a necesidades puntuales que se han detectado y que se
resuelven por esta vía.
Lo ideal es que estos dibujos no contengan ningún elemento gráfico o visual
concreto (como logos, viñetas o fotos), sino que sólo incluyan líneas y bloques
que representen objetos de contenido. En este nivel de desarrollo conceptual de
la estructura de páginas, el uso de estos diagramas o wireframes permite centrar
la discusión sobre cada pantalla en la funcionalidad y no en temas más subjetivos

como colores o calidad de los elementos de diseño en la página.

objetivo sea describir con mayor claridad el sentido de las funcionalidades y

objetos presentes en el wireframe.

Un elemento que se debe considerar junto con estos dibujos de estructura, es
que en las pantallas que representen transacciones, se debe incluir un
diagrama de flujo sencillo, mediante el cual se ejemplifique cuáles son las
interacciones posibles y sus resultados. Naturalmente se deberá incluir las

pantallas correspondientes cuando sea adecuado.

Gracias a estos diagramas en combinación con las páginas, tanto diseñadores
como desarrolladores podrán tener claro cuál es el trabajo que deben realizar en
cada una de las áreas del sitio que se estén generando.

Bocetos de Diseño

Esta etapa consiste en la generación de dibujos digitales acabados de la forma
que tendrán las páginas principales del sitio que se desarrolla, considerando como

tales la Portada, Portada de Sección y Página de despliegue de contenidos.
Para desarrollar los elementos gráficos se utilizan como insumos los dibujos de
estructura que se han generado en la etapa anterior.
La idea es que en esta etapa se trabaje en software gráfico para facilitar el
proceso de corrección, ya que habitualmente habrá mucha interacción con los
usuarios.
Los elementos que se deben tener presentes en esta etapa, son los siguientes:
Imagen Corporativa de la institución:
se deben seguir los lineamientos de uso de colores, textos y otros elementos
definidos para la entidad.
Imagen Corporativa del Gobierno:
se deben seguir los lineamientos indicados por el Gobierno de Chile en este
aspecto.
• Criterios de Usabilidad:
se deben tener en cuenta los criterios de usabilidad, accesibilidad y la normativa

vigente.

Borradores de Página

Una vez que se ha aprobado la etapa anterior, se toman los bocetos de diseño
que hayan sido aprobados y se genera un prototipo (páginas clickeables)
mediante el cual se pueda comprobar directamente la forma en que se
desempeñan, cuando se les aplica la tecnología HTML de construcción de

páginas web.

Maqueta Web

Es la etapa final y consiste en generar todo el sitio en tecnología HTML utilizando
imágenes y contenidos reales .
En el caso de un sitio estático, esta etapa corresponderá a la construcción del
sitio. En el caso de un sitio dinámico, las páginas que se generen permitirán que
el diseñador genere las plantillas de trabajo y el desarrollador de software las
utilice como elementos para introducir la programación que sea necesaria para la
creación del sitio.
Es importante considerar que todas las tareas y actividades incluidas en esta
etapa pueden ser abordadas por un diseñador que tenga experiencia en diseño
web. Esto debe ser parte de los requerimientos solicitados a las empresas

proveedoras de este tipo de servicios.

II.-EVALUACIÓN

Con la información descrita anteriormente ,ahora te toca a ti ,Realiza la Actividad de Evaluación 1.1.1. Dónde: “Elabora la justificación y la estructura propuesta del sitio web acorde con los requerimientos del cliente”, en la que define:

 Objetivo del sitio.

 Audiencia.

 Contenidos.

 Mapa del sitio.

 Sistemas de Navegación.

 Borradores de páginas.

 Maqueta web.

También recuerda las competencias que desarrollaste a lo largo de los temas y que estan inmersas en tus actividades clase.

COMPETENCIAS GENÉRICAS

•Es sensible al arte y participa en la apreciación e interpretación de sus expresiones en distintos géneros.

•Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiados

•Participa y colabora de manera efectiva en equipos diversos