GUÍA PARA LA CREACIÓN DE PÁGINAS WEBPlanificación inicial del sitio webDiseñar o rediseñar un sitio web que ya existe, es ...
CÉSAR SALAZAR RUIZEl definir con anticipación las tecnologías a utilizar, permite que en adelante se tomen las decisionesa...
GUÍA PARA LA CREACIÓN DE PÁGINAS WEB   -   Información sobre la experiencia de usuario y grado de satisfacción en el uso d...
CÉSAR SALAZAR RUIZArquitectura de un sitio webLa arquitectura de un sitio web tiene tres componentes principales: un servi...
GUÍA PARA LA CREACIÓN DE PÁGINAS WEBtendrá un costo más para el proyecto, esto es lo que se denomina “tecnologías propieta...
CÉSAR SALAZAR RUIZIdentificar Requerimientos FuncionalesEn la búsqueda e identificación del contenido del sitio web, tambi...
GUÍA PARA LA CREACIÓN DE PÁGINAS WEBidentificará todos sus contenidos. Con las agrupaciones hechas, se puede hacer el diag...
CÉSAR SALAZAR RUIZEn este paso se puede discutir cual será la oferta de elementos de información e interacción que elusuar...
GUÍA PARA LA CREACIÓN DE PÁGINAS WEB   •   Niveles: Se debe intentar que el usuario esté siempre a menos de tres clicks de...
CÉSAR SALAZAR RUIZLos wireframes especifican la arquitectura y organización de los contenidos y navegación de cada páginao...
GUÍA PARA LA CREACIÓN DE PÁGINAS WEB   Programación Front-end: Es la programación relacionada con el interfaz de usuario....
Upcoming SlideShare
Loading in …5
×

Guía para la creación de páginas web

1,192 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,192
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Guía para la creación de páginas web

  1. 1. GUÍA PARA LA CREACIÓN DE PÁGINAS WEBPlanificación inicial del sitio webDiseñar o rediseñar un sitio web que ya existe, es recomendable comenzar con una serie de preguntasque permiten aclarar y definir las expectativas que se tienen del proyecto a generar.Esas preguntas son:¿Para qué necesita el sitio web la organización?¿Para qué necesita el sitio web la audiencia a la que se dirige?¿Qué información de la organización es útil para la audiencia?¿Qué imagen de la organización quiero proyectar en mi audiencia?¿Qué servicios interactivos entregaré a través del Sitio Web?¿Quiénes pueden ayudarme a realizar el proyecto?Respondiendo a estas preguntas será posible el determinar los elementos siguientes:Objetivo: Definen la finalidad del proyecto, deben de ser generales y específicas, para así detallar lasmetas a lograr.Audiencia: A quién se dirigirá el sitio.Tecnología: Que servicios se usarán y la tecnología que sustentará a éstos.La claridad de estos elementos permite definir bien el proyecto, así como atraer al usuario deseadomediante la aplicación correcta de las tecnologías.Definición de objetivosCon objetivos definidos, se puede tener certeza de la eficacia de las acciones desarrolladas. Luego detener claro un objetivo general, se deben de fijar los objetivos generales. La claridad en ellos permitirá queel equipo tenga claridad del camino del proyecto. El observar la misión y la visión de la organizaciónayuda a la definición del proyecto.El objetivo del proyecto se debe de listar y limitarse a no más de 5 proposiciones. Así al no ser tantos sepuede garantizar el cumplimiento de ellos y al no ser pocos se deja en claro que no es un proyectopoco ambicioso.Tipos de objetivos asociados a una estrategia general de marketing online: - Vender: Por medio del internet se pueden incrementar las ventas, vender directamente o bien, general contactos para cerrar ventas fuera del medio digital. - Servir: Ofrecer servicios en línea a los clientes antes y después de las ventas. - Hablar: Utilizar el internet para conocer más al cliente. - Ahorrar: Se reducen costos de servicios debido a los procesos automáticos. - Impactar: Difundir la marca por medio del internet.El uso de alguno de ellos no implica que se excluyan a todos los demás.Definición de Servicios Interactivos
  2. 2. CÉSAR SALAZAR RUIZEl definir con anticipación las tecnologías a utilizar, permite que en adelante se tomen las decisionesadecuadas, para así dirigirse adecuadamente hacia los objetivos. Se debe tener una noción de cómoqueremos que los usuarios interactúen con nuestro sitio, para así las tecnologías puedan aplicar esasfuncionalidades.Algunas de las tareas que se deben de realizar para saber que decisiones tomar en cuanto a lasfuncionalidades:Evaluar los servicios que se ofrecen actualmente a los clientes: Permitirá saber cuales son las áreasorganizativas clave y como operan y de ellas obtener procedimientos de trabajo que tendrá la atenciónde los usuarios del sitio web.Identificar unidades gestoras de información: Ayudará a coordinar internamente el sitio web y lasoperaciones virtuales, para relacionarlo con la actividad física de la organización.Analizar procesos y elaborar diagramas de flujo: De manera visible y documentada se podrá saber comose opera y así ver que partes del proceso pueden ser funcionales para el sitio web.Identificar contenidos y procesos que puedan ser publicados: Permitirá conocer los recursos inciales conlos cuales se operará el sitio web.Definición de audienciaEs importante conocer quienes serán los usuarios, que es lo que buscan y también necesitan y esperan,cual es la experiencia que tienen, que tanto conocen de tecnología, cuales son las limitantes que puedantener, etc.Esto debido a que no todas las páginas están diseñadas para el mismo tipo de audiencia, entonces cadauna requiere de un diseño específico.¿Cómo se llega a establecer la Audiencia?Para esto se debe de realizar un estudio de mercado, para ello existen agencias especializadas, para quese realicen encuestas, entrevistas, etc. En caso de que no se cuente con un gran presupuesto para larealización de una encuesta mínimo nosotros mismos debemos de preguntarnos para quién es queestamos diseñando, quién es el usuario final. También es aconsejable que para tener conocimiento de laaudiencia, se realice una entrevista con la organización y siendo aún mas específicos con el área demarketing o área de clientes.EncuestasEste es un método económico para tener conocimiento de los clientes así como de los usuarios. Lasencuestas se pueden realizar incluso en línea, pero de no ser así se deben de realizar en las ubicacionesfísicas de la organización (oficinas, tiendas…). Se debe de ofrecer algún tipo de recompensa o premio alusuario o cliente, quien realice nuestra encuesta, para que la realice de buena manera, teniendo en cuentaque la información que se obtenga va a ser muy valiosa.Con las encuestas estos son algunos de los datos que se pueden obtener: - Datos demográficos: Sexo, edad, donde viven, etc.
  3. 3. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB - Información sobre la experiencia de usuario y grado de satisfacción en el uso del Sitio Web actual: diseño, usabilidad, navegación, etc. - Información sobre funcionalidades /servicios /contenidos a incorporar en el Sitio Web.Arquetipos de usuarios (personas)Una “persona” es un arquetipo de un usuario potencial, hacer un diseño para un el, con objetivosconocidos, ayuda a satisfacer las necesidades de la audiencia que se representa en ese arquetipo. Suidentidad es inventada mientras que la información relacionada a sus necesidades, motivaciones, actitudesy comportamientos debe de ser real. Una persona se define a través de las entrevistas. Los personajes seadaptan a contextos con situaciones de uso que sean concretas.Con esto se está creando una empatía en el equipo del proyecto con el usuario final, permitiendo eltomar fácilmente decisiones conforme a los usuarios consultados y no en base a suposiciones. Lospersonajes creados deben de representar a la mayoría de la audiencia.Comúnmente la información de los usuarios se presenta de forma narrativa. La ficha de los personajesincluye una fotografía (para humanizarlo) palabras claves y hasta representaciones gráficas que permitensintetizar visualmente su perfil.Escenarios de UsoEn base a la posible audiencia, se debe de imaginar cuáles son los contenidos que ellos vendrán a buscaral sitio web. “Estudiar escenarios de uso” hace referencia al uso real del sitio web en determinadassituaciones, esto en base a usuarios ya existentes. Hacer el estudio con casos reales puede establecercomo los usuarios van a usar el sitio web. Así, con estas revisiones se ratifica o modifica lo que se hayadefinido de contenido previamente. En ocasiones los primeros estudios son hechos por personas queson parte de la misma empresa, entonces ellos dan por obvias algunas cuestiones que para los usuariosno lo son.Definición de la Infraestructura TecnológicaEn este paso se definen que tecnologías van a sustentar el desarrollo, funcionamiento y mantenimiento delsitio web.Esto se hace en dos niveles: - Hardware: Son los elementos físicos del sistema, aquí el primer elemento será el servidor en donde quedará alojado el sitio web y los elementos de la infraestructura web. - Software: Son los programas y aplicaciones que se ejecutarán y realizarán las funciones y tareas del sitio web que se ofrecen a los usuarios.El software y hardware necesarios van a variar y esto dependerá de que tan complejas sean las funcionesy servicios que se incorporen al sistema.
  4. 4. CÉSAR SALAZAR RUIZArquitectura de un sitio webLa arquitectura de un sitio web tiene tres componentes principales: un servidor web, una conexión dered y uno o más clientes (navegadores).El sitio web es el que ofrece es quien se encarga de la distribución de las páginas de información que losclientes solicitan (navegadores), esto mediante una conexión de red y el uso del protocolo de http.La información que se muestra se encuentra almacenada en archivos de html, que se encuentraalmacenada en una base de datos, las páginas son creadas dinámicamente, los sitios web que crean esteesquema se denominan sitios dinámicos.Las plataformas tecnológicas más estandarizadas en la actualidad sobre las que se desarrollan la mayoríade los sitios web son los siguientes: - Arquitectura “Open Source”: Servidor Web Apache - Lenguaje de programación de aplicaciones: PHP - Bases de datos: MySQL Arquitectura Microsoft: - Servidor Microsoft IIS - Lenguaje de programación de aplicaciones: ASP.NET. - Bases de datos: Microsoft SQL / MySQL Arquitectura Java: - Servidor Web Tomcat. - Lenguaje de programación aplicaciones: JSP. - Bases de datos: soporta sistemas de varios fabricantes: Oracle, Microsoft SQL, etc.Para cubrir estas necesidades se recurre a la contratación de empresas especializadas en servicios dealojamiento, a través de las cuales por una cuota mensual, incluyen una infraestructura y mantenimientooperativo del sistema y de la conexión a la red, una gran ventaja es que las empresas de alojamientoofrecen una amplia variedad de servicios y configuraciones de hardware y software.En caso de que la organización quiera tener su propia base de datos, se tendrá que tomar en cuentaotras cuestiones. Como el que ciertos componentes a utilizar requieren de licencias para su uso y esto
  5. 5. GUÍA PARA LA CREACIÓN DE PÁGINAS WEBtendrá un costo más para el proyecto, esto es lo que se denomina “tecnologías propietarias”, por elloantes de seleccionar la plataforma, se deben de considerar los requerimientos del proyecto, además delcoste que tendrá. La selección de la plataforma a utilizar debe de venir de preferencia indicada por eldepartamento de informática de la empresa para así mantener una infraestructura informática estándar paratodos los sistemas que den soporte al negocio además del sitio web.Definición del sitio webArquitectura de la informaciónEs el conjunto de métodos y herramientas que permiten organizar los contenidos, para que seanencontrados por los usuarios de manera simple y directa.Los siguientes elementos constituyen la metodología de la arquitectura de la información, para así poderlograr las metas de organización y visibilidad de los contenidos:  Definición de Contenidos del Sitio  Definición de la Estructura del Sitio  Definición de los Sistemas de Navegación  Definición del Diseño VisualDefinición de contenidos del sitioUna vez conocidos los objetivos del sitio como la audiencia a la que irá dirigido, deben de decidir quecontenidos irán en el sitio web a desarrollar.InventarioLa primer realizar dentro de la arquitectura de información es analizar e inventariar el contenido que le sitioweb ofrecerá a sus usuarios. Primero se debe de conocer cuál es el contenido del que se dispone, quévolumen tiene, de qué naturaleza es y que contenidos son los más relevantes. Es hacer un listado de todala información contenida en el sitio web, junto a datos que la van a describir desde varias aproximacionescomo: tipo de audiencia a la que se dirige área organizativa propietaria del contenido para sumantenimiento y actualización, tipo de plantilla de página que contendrá la información, etc.Si el sitio web ya existe, entonces se estará hablando de un rediseño y en este caso se debe de analizar lainformación que ya se encuentra en el, dentro del análisis se deberá de ver cuáles son los contenidos sonvisitados con mayor frecuencia. Así se sabrá cuales son más relevantes para los usuarios, y entonces cualesson los que conviene eliminar o modificar.
  6. 6. CÉSAR SALAZAR RUIZIdentificar Requerimientos FuncionalesEn la búsqueda e identificación del contenido del sitio web, también se debe de trabajar en lo que sebusca que el sitio “haga”, con esto se hace referencia a como se desea que el sitio web interactúe, comoformularios de solicitud de información, procesos de registro y suscripción, etc.ClasificaciónEs la tarea principal en el diseño de arquitecturas de información es la clasificación de los contenidos. Porclasificación se entiende en crear grupos de contenidos similares y darle nombre a esos grupos, es decirrotularlos o darles etiqueta.Los tres esquemas principales de clasificación:  Clasificación orientada a la audiencia: Si el sitio web tiene una audiencia definida y segmentable, y cada uno de esos usuarios tiene necesidades diferenciadas, esta es la clasificación útil. Aquí los contenidos se categorizan en función de sus usuarios. Es recomendable cuando todos los contenidos pueden clasificarse en al menos en uno de los perfiles y las necesidades informativas son diferentes entre sí.  Clasificación orientada a la tarea: si lo que estamos categorizando no son contenidos informativos, sino funcionalidades del sitio o aplicación web, o información de cómo utilizar estas funcionalidades, las categorías deben estar orientadas a la acción y rotuladas en forma verbal.  Clasificación temática: Los contenidos son clasificados por su similitud semántica, bajo rótulos o categorías mediante sustantivos. Por ser una clasificación subjetiva puede que el usuario no reconozca el significado o sea incapaz de predecir el contenido que está representado en el rótulo. Para minimizar este problema se utiliza una técnica denominada Card Sorting o Agrupación de Tarjetas.Card SortingFacilita el acceso y la navegación a través de la ingente cantidad de información por medio de la ingentecantidad de información que puede hospedarse en un sitio web, así se reduce la duda y desubicaciónque pueden generar ciertos conceptos que son poco significativos o inconsistentes dentro de un sitioweb. Mediante estas pruebas se genera una estructura general para la información que contendrá el sitioweb.Se hacen tarjetas en las cuales se escriben las principales áreas de contenido que ya se deben de teneridentificadas. Luego estas cartas se ponen sobre una mesa y se van agrupando hasta que se formanconjuntos de elementos coherentes entre ellos y cada uno de los conjuntos recibe un nombre, el cual
  7. 7. GUÍA PARA LA CREACIÓN DE PÁGINAS WEBidentificará todos sus contenidos. Con las agrupaciones hechas, se puede hacer el diagrama de árbol decontenidos y así se podrá hacer el sistema de navegación.Luego de hacer el etiquetado, se hacen comprobaciones de la validez de los nombre elegidos,mostrándolos a personas de diversos orígenes y que tengan conocimiento de la organización y tambiéna quienes no tengan conocimiento de ella:  ¿Qué significa este nombre?  ¿Qué tipos de contenidos esperaría encontrar en esta área?De acuerdo a las respuestas obtenidas se sabrá si los nombres que se han asignado son adecuados o no,de no ser así, habrá que introducir modificaciones.Análisis de Sitios Similares (benchmarking)Finalmente se realiza una búsqueda de otros sitios web de que sean similares a la organización con la quese está trabajando, para ver de qué manera ellos resolvieron los mismos problemas que nosotrostengamos.Así esta actividad dará la posibilidad de llegar a las buenas prácticas, para adaptarlas a las necesidades denuestro sitio, para que estemos seguros de métodos de funcionamiento y despliegue de contenidos quesean coherentes con los objetivos que nos hayamos planteado al principio. Los análisis competitivos sehacen a base de dos dimensiones básicas que son número de competidores y criterios de comparación.Definición de la estructura del sitioLuego de la identificación y clasificación de contenidos, se pasará hacia las definiciones relacionadas conla forma que tomará el sitio web que se está trabajando. Esto implica el trabajo en tres áreas concretas, enestas es en donde el sitio se definirá su estructura, el árbol de contenidos y sistemas de navegación queofrecerá a los usuarios para naveguen en sus contenidos.Es importante tener en cuenta cuales son las diferencias entre estructura y diseño: -Estructura: Es la forma que tendrá el sitio web en términos generales con sus secciones, funcionalidades y sistemas de navegación. En el no se consideran los elementos gráficos. - Diseño: Hace referencia a la solución gráficaEntonces, cuando nos referimos de la estructura hablamos de la experiencia que tendrá el usuario cuandoentré al sitio. De esta manera podremos determinar donde estarán ubicados los servicios interactivos(buscador, áreas de contenidos, formulario, etc.)
  8. 8. CÉSAR SALAZAR RUIZEn este paso se puede discutir cual será la oferta de elementos de información e interacción que elusuario tendrá, debido a la falta de elementos de diseño, se puede discutir acerca de la estructura y queésta se desarrolle en términos concretos, de manera independiente a cuestiones estéticas que puedenretrasar la aprobación de esta etapa.Creación de la estructuraLa estructuración es una forma de clasificar la información, en ella los contenidos quedan relacionados poragrupación. Con la estructuración se articulan relaciones, que pueden ser de contenidos o categorías decontenidos, normalmente en forma de enlaces y vínculos hipertextuales. La estructura del sitio web serefiere a las conexiones y las relaciones entre páginas, su topología.La estructuración de un sitio web se puede dar de manera diversa, incluir dentro de ellas diferentesestructuras y a su vez contener subestructuras.Éstas son las estructuras más comunes:Estructura secuencial: Las páginas se encuentran interrelacionadas de forma lineal. Es recomendablecuando es necesario que el usuario complete cada uno de los pasos ordenadamente (carrito de compra,registro como usuario, etc.)Estructura hipertextual: El hipertexto es la base sobre la que se asienta la Web. Las páginas se enlazan porsimilitud o relación directa entre los contenidos, permitiendo al usuario que se encuentra visualizando unapágina saltar hacia otras que le puedan interesar por contener información relacionada.Estructura jerárquica: Las páginas se estructuran definiendo relaciones jerárquicas entre ellas. Es la estructurade información más común en sitios web. Las estructuras jerárquicas se utilizan junto a las hipertextuales,permitiendo al usuario una vez llegado a una página de una rama saltar hacia páginas de otras ramas perorelacionadas temáticamente con la página actual.Mapa del SitioEs el proceso de crear un árbol de contenido en el que se muestre de manera práctica cuántas seccionestendrá el sitio en desarrollo y cuántos niveles dentro de cada uno.Exactamente es generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonasprincipales, secundarias y contenidos finales que se irán incorporando.Se debe evitar a toda costa que el árbol de contenidos represente la estructura de la organización, dadoque ésta es conocida y comprendida internamente.Consejos para la creación del árbol: • Secciones: deben de ser las menos posibles, para concentrar las acciones del usuario en pocas áreas, cada una de las áreas que requerirá de mantenimiento posterior en contenidos, gráfica y funcionalidad, lo que encarecerá el costo final de operación del sitio.
  9. 9. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB • Niveles: Se debe intentar que el usuario esté siempre a menos de tres clicks del contenido que anda buscando. Por ello no se debería crear más de tres niveles de acceso. • Contenidos relacionados: Se debe considerar que habrá funcionalidades que estén presentes en todo el sitio. Entre ellas: buscador, preguntas frecuentes y formularios de contacto. Este tipo de elementos deben de quedar fuera del árbol y deben flotar sobre él.Definición de los Sistemas de NavegaciónUna vez hechos los árboles de contenido se deben de generar los sistemas de acceso a esos contenidosen el sitio web. Por medio de ellos, los usuarios podrán avanzar por sus diferentes áreas, sin perderse.En la estructura arquetípica de los sitios web podemos identificar diferentes sistemas de navegación: • Sistemas de navegación global: Son aquellos conjuntos de enlaces que estructuran el contenido del sitio web en diferentes secciones principales. Orientan al usuario acerca de donde se encuentra y qué otras secciones principales puede ver. • Sistemas de navegación local: Ofrecer el acceso a las sub-secciones del sitio web. A veces incluyen la clasificación de los productos o contenidos del sitio web. • Sistemas de navegación contextual: Están integrados en el propio contenido, en apartados o bloques de tipo “enlaces relacionados”, “noticias relacionadas”, es decir son aquellos sistemas que permiten la navegación transversal.Características de los Sistemas de NavegaciónUn sistema de navegación debe de contar con las siguientes características: • Consistente: Debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las páginas. • Uniforme: Debe utilizar términos similares para que el usuario confíe en que sus opciones llevan siempre hacia los mismos lugares. • Visible: Debe distinguirse claramente dentro del sitio, para que el usuario cuente con él, como si se tratara de una guía permanente en el área en que se encuentre del sitio. Todas las páginas del sitio deben de contar con el sistema de navegación.Definición del diseño visualLuego de realizar la estructura, se avanza hacia la generación del diseño visual de las pantallas del sitio,aquí se dará uso a la documentación que se han idogenerando. Se trabajará en cuatro etapas sucesivas e incrementales.1.Diseño de las Estructuras de Páginas: Wireframes
  10. 10. CÉSAR SALAZAR RUIZLos wireframes especifican la arquitectura y organización de los contenidos y navegación de cada páginao grupos de páginas. Vinculan la estructura subyacente del sitio web y su aspecto visual dando respuestaa cuestiones como la forma y presentación de los sistemas de navegación y búsqueda, la ubicación delos rótulos y la ordenación de los contenidos en una perspectiva espacial.2. Diseño de interacciónEs la actividad y resultado de definir el comportamiento interactivo del sitio web. Son las acciones que seofrecerán al usuario en cada momento, y cómo responderá la aplicación a las acciones que realice.Diagramas de flujoMediante ellos se representan gráficamente las posibilidades de acción que tiene un usuario enfrentado atomar una decisión en un Sitio Web. Los diagramas de flujo representan estructuras, los wireframesrepresentan pantallas y los diagramas de flujo representan lo que hace el usuario.3. Bocetos de DiseñoAquí se generan los dibujos digitales que tomarán la forma que tendrán en las páginas principales del sitioque se desarrolla tales como portada, portada de sección y página de despliegue de contenidos. En estaetapa se trabaja en software gráfico para facilitar el proceso de corrección.4. Borradores de PáginaSe toman los bocetos de diseño que hayan sido aprobados y se genera un prototipo mediante elPara poder comprobar directamente la forma en que se desempeñan, cuando se les aplica la tecnologíaHTML de construcción de páginas web.Se usará el diseño de pantalla que se ha creado, contando con enlaces reales que permitan ver la formade usar sus atributos y revisar la forma en que se despliegan las páginas que se van a desarrollar.Construcción del Sitio WebMaquetación HTMLEn esta etapa corresponderá a la construcción del sitio y consiste en generar todo el sitio en tecnologíaHTML con los elementos gráficos, imágenes y contenidos reales.En un sitio dinámico, en esta etapa se generan las plantillas HTML que utilizarán los desarrolladores desoftware para introducir la programación que generará los contenidos de cada página.ProgramaciónSe ha popularizado un tipo de software llamado Gestor de Contenidos CMS en inglés. Es un programa degestión preparado para manejar grandes cantidades de información y explotarla de manera organizadaaplicando procesos de edición, publicación y actualización de contenidos. Permiten también manejar laestructura de la web permitiendo la optimización de las tareas de mantenimiento y actualización del sitioweb.Se dividen en dos partes:
  11. 11. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB Programación Front-end: Es la programación relacionada con el interfaz de usuario. Se programan las plantillas HTML y se definen las áreas de contendido de cada una de ellas de modo que posteriormente se pueda cargar la información que corresponda a cada área. Programación Back-end: se refiere a la programación y configuración del sistema de administración y las bases de datos que soportarán la carga y publicación de los contenidos del Sitio Web.

×