1.2 Elementos de un Sitio Web

1.2 Elementos de un Sitio Web

El diseño Web puede ser fascinante.

Crear sitios Web atractivos y profesionales es el sueño de millones de diseñadores de todo el mundo que utilizan las tecnologías de Internet.

Un sitio Web debe ser sobre todo accesible y agradable.

La organización inicial es muy importante para poder utilizar eficazmente las herramientas y tomar decisiones oportunas.

Vamos a iniciar con la concepción del diseño Web, a explicar las estrategias de diseño y a cómo organizar las ideas.

El comprender el proyecto desde ésta etapa, permite un ahorro significativo de recursos en el momento de la implementación.

Las páginas Web

Posiblemente el término página Web sea el más utilizado en Internet, precisamente porque cuando navega por la red lo hace en busca de páginas Web.

Las páginas Web son el soporte de la información en la Web.

Los componentes de una página web son imágenes, textos y otros contenidos multimedia y están enlazadas de manera que el usuario puede navegar de una página a otra utilizando hipervínculos, un concepto de interactividad surgido con el fenómeno Internet.

NOTA:

Las partes que forman a una página Web son conjunto de textos, imágenes, audio, video y otros contenidos.

Los Sitios Web

Un sitio Web es una localización en la Web que contiene varias páginas Web organizadas jerárquicamente.

Cada sitio tiene una página de inicio que corresponde a la página principal, llamada en inglés Home Page.

Es la primera página que se visualiza cuando se accede a un sitio tecleando el nombre del dominio en la barra del navegador.

Un sitio tiene generalmente más de una página Web y su objetivo principal es ofrecer la información que necesitan los usuarios y proporcionársela de manera que puedan asignarla fácilmente.

NOTA:
En ocasiones se utiliza el término página Web para referirse a un sitio Web. Un sitio Web es un conjunto de páginas Web. Las páginas Web constituyen archivos únicos con un nombre asignado.

Elementos que componen una página Web

¿Cómo esta compuesta una página Web?

¿Que información debe tener una página Web?

Las principales características que constituyen una página en Internet son:

Texto

El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la Web fundamentalmente en busca de información expresada en texto.

NOTA:
Los textos han convertido el inglés en el idioma universal de la red. En su objetivo por alcanzar la mayor audiencia posible, muchos sitios ofrecen su información y sus servicios en su idioma natal y en otros idiomas, fundamentalmente en inglés.

Imágenes

Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por lo tanto, los tiempos de descarga, las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal.

Espacio Web

 Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor.

Un nombre de dominio

 Es la primera parte de una dirección Web que identifica al servidor que almacena y sirve su sitio.

Hipervínculos

Por sí misma, una página Web no puede hacer mucho. La magia de verdad comienza cuando relaciona varias página mediante enlaces.

Video

Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de video se hacen más cercanos a los usuarios.

Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.

Animaciones en Flash

 Es una imagen animada, fácil de crear y sobre todo que ocupa poca memoria. Tiene diferentes usos, desde la creación de dibujos animados hasta el despliegue de dibujos interactivos.

Sonidos

Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales móviles como el iPhone ha potencializado este elemento.

Además de incorporar sonido a las páginas Web puede descargar de ellas archivos de audio para sus dispositivos móviles.

El formato MP3 es el más conocido y más usado por su calidad y nivel de compresión.

Otros elementos

Otros elementos bastante comunes son:

Banner: Una imagen fija o animada utilizada generalmente para publicidad.

Marcos: También llamados frames, son una especie de recuadro independiente en el que puede cargar una página Web.

De esta forma es posible dividir una página Web en diferentes partes o ventanas, cada una con sus propios bordes y barras de desplazamiento, cargando dentro de cada una de ellas una página web externa independiente.

Los marcos se usaron mucho en un momento determinado, pero además de crear algunos inconvenientes en el diseño, es una opción que no recomiendo ya que los motores de búsqueda no indexan correctamente los sitios realizados con marcos.

Actualmente se pueden obtener los mismos resultados con CSS.

Formulario: Zona para introducir datos o comentarios. Una plantilla o página con espacios vacíos para llenarse con alguna finalidad.

También se utiliza para referirse al conjunto de campos solicitados por un determinado programa, los cuales se almacenan para su manipulación y uso posterior.

El diseño Web

La Web se ha convertido en el medio de comunicación más importante del mundo gracias a su facilidad para ofrecer información con una rapidez nunca antes alcanzada por ningún otro medio.

Esta información puede ser consumida por cualquiera que tenga una conexión a Internet desde cualquier parte del mundo.

El desarrollo Web es una mezcla de tecnología, contenidos, arquitectura del sitio, diseño e interactividad.

El éxito de un sitio depende de la forma en que se combinan estos cinco factores que determinan en gran medida la rapidez con que se genera y ofrece la información, y por supuesto el éxito de un sitio.

Antes de analizar estos factores independientemente, debe considerar que ellos deben garantizar que el sitio sea fácil de mantener, flexible para cambiar de tamaño y realizar actualizaciones, atractivo y visualmente para los usuarios, interesante para su audiencia, práctico para realizar descargas rápidas y búsquedas efectivas; también sólidos técnicamente, sin vínculos rotos, ni comportamientos inadecuados.

En el contenido Web influyen la presentación, los conceptos de diseño y algunas estrategias comunes del trabajo en Internet.

Los elementos visuales como el calor, el diseño de tipografía y las imágenes, conforman la personalidad de un sitio y generan un impacto emocional que determina que el sitio sea atractivo.

Aunque el objetivo final de todo diseñador sea transmitir un mensaje a una audiencia determinada, ser un buen diseñador gráfico no significa necesariamente ser un buen diseñador para la Web.

Cualquiera independientemente de su nivel artístico, puede conseguir un diseño funcional con buena apariencia.

Un poco de experiencia y conocimiento de algunos principios básicos de diseño más cierto grado de inspiración, originalidad y buen gusto harán que tenga parte de la batalla ganada. 

Observe los detalles de su entorno, la naturaleza el arte y sobre todo el trabajo de otros creadores que hay en la Web.

Parece muy elemental, pero muchos olvidan las principales fuentes más asequibles de enriquecimiento estético.

Elementos del diseño web, estilos y tendencias

En la actualidad una página web o un blog es parte importante de la imagen de un individuo, empresa o institución, es una de sus partes visibles. De su apariencia y estilo depende la imagen que proyecta, así los visitantes se hacen una idea o concepto sobre la organización o el personaje a quien pertenece el sitio.

1.- Contenido:
La página no debe ser atractiva solamente en su parte visual, debe tener un contenido interesante que atraiga lectores.
Ninguna página puede considerarse exitosa si no cuenta con un contenido apropiado y actualizado frecuentemente. El contenido da la posibilidad real de aumentar el número de visitas y hacer que los viejos visitantes consulten la pagina a menudo (porque encuentran siempre algo nuevo).
2.- Imágenes:
Deben usarse buenas fotografías, preferiblemente tomadas por un profesional. Es importante presentar imágenes que no estén pixeladas (baja resolución) o desenfocadas, esto da una idea sobre la calidad misma del sitio.
También se pueden utilizar ilustraciones sencillas (imágenes vectoriales).
3.- Tipografía:
Es importante utilizar fuentes llamativas pero que conserven una fácil legibilidad. La tipografía debe llamar la atención del usuario pero debe conservar la línea de diseño del sitio.
También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del texto.

4.- Botones e iconos:
Utilizar botones prácticos y representativos, así como iconos grandes y vistosos aumenta la facilidad de navegación en la página y se dan una guía clara a los usuarios, no es necesario colocar accesorios que no van a brindar un valor real, por ejemplo un reloj para clientes que se encuentran en el mismo uso horario.
5.- Animaciones y movimiento:
Para generar una sensación de dinamismo, es bueno utilizar elementos animados. Pero es importante no excederse con los elementos móviles, la cuota del 20% del total de la pagina es suficiente, porque pueden causar saturación, distraer la atención de las cosas importantes que se quieren decir y por ultimo sacar al usuario del sitio.
6.- Fondos claros y sencillos:
Los fondos claros o totalmente blancos facilitan la visualización, también dan un aspecto despejado a la página resaltando las imágenes, existe la tendencia a utilizar fondos negros para lecturas largas, para no cansar al lector con la luz del monitor.
7.- Enlaces a redes:
Es de gran ayuda para los usuarios incluir enlaces a redes sociales con las cuales se tiene familiaridad y se interactúa con regularidad, también a sitios de interés. Esto con el fin de generar comunidad y crear lazos de mutuo intercambio con sitios que pueden apalancar la oferta, como proveedores y clientes actuales.
8.-Sobriedad:
Una página debe permitir una fácil visualización de los contenidos (videos, imágenes, textos), saturar al cibernauta es contraproducente, si la información o contenido tarda en ser cargado es una visita menos y un potencial cliente o negocio que no conoció la oferta que se propone, tener un diseño sencillo con botones o enlaces en el lugar adecuado, genera un fácil reconocimiento y navegación que en posteriores visitas se traduce en una identificación con los usuarios.
Cada día nacen muchas páginas, por lo tanto cada vez existen más opciones en la red, no olvide que un sistema de contenido dinámico atrae y que es necesario actualizar la información de acuerdo al ritmo que determine la organización, no se recomienda actualizaciones con más de un mes calendario.

La página web y su constitución Lo que define el diseño de una página web es la forma de organizar los elementos que la componen. Hay miles de formas diferentes, pero son pocas las que funcionan y adquieren el sentido que necesitamos para nuestro trabajo.

Podemos recurrir a estructuras como Bootstrap o 960grid para tener un apoyo importante. Hoy en día hay muchos frameworks con los cuales podemos basarnos a la hora de diseñar un nuevo proyecto.
Básicamente, los sitios web se componen y estructuran de la siguiente manera:

Contenedor

Esto es lo que definimos en la regla Body o en algun div de nuestra estructura. Dentro de este contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.
Este contenedor puede tener un ancho fijo; el ancho será igual para todos los navegadores y dispositivos, o uno fluido que se adaptará al ancho de nuestra ventana. Si usamos web responsive, podemos manejarlo con CSS sin problemas.

Logotipo

Acá es dónde debemos dejar la imagen de la empresa, que identificará la marca en todo el sitio. Puede ser el logotipo de la empresa o el nombre. Al estar arriba acompañara la navegación por todo el sitio ayudando al reconocimiento de la marca.

Navegación

Que importante es la navegación y el menú que la contiene. La forma más aceptada y fácil, es el menú horizontal, que siempre tiene a mano lo más importante del sitio web.
Los menús verticales pueden usarse como complementos o sub menús, de los horizontales, y siempre cerca de la línea horizontal del menú principal y deben ser visibles en el primer pantallazo, al entrar.

Contenido

Lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e interesado. Si el contenido es malo o poco interesante, abandonará la página en pocos segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. El mejor lugar debe ser para los contenidos. Para Google, el contenido es el rey.

Footer

Localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir información de redes sociales, direcciones, noticias.

Espacio Negativo

Esto es tan importante como el espacio positivo. También llamado espacio blanco, es todo lo que no tiene información de ningún tipo, pero que cumple un rol importantísimo para la web; nos ayuda a tener espacios de respiración, a equilibrar y dar balance a todo el diseño. Si eres novato, o tu cliente es ignorante en la materia, tratará de llenar esos espacios, con la consiguiente saturación de contenidos, dejando una web ilegible e innavegable.
Para dotar de mayor utilidad e interacción a un sitio Web, disponemos de ciertos elementos dinámicos. Algunos de ellos permiten al administrador de la Web modificar el contenido del sitio y otros permiten a los usuarios opinar y comunicarse.

Gestor de noticias: Este elemento dinámico permite al administrador de contenido de un sitio Web cambiar y actualizar noticias en el mismo de una forma fácil y sin ningún conocimiento técnico. Todo ello protegido por usuario y contraseña.

Gestor de contenido: Esta herramienta permite al administrador del sitio Web modificar el contenido de los apartados preparados para ello, de forma fácil y sin conocimientos técnicos, mediante un panel de administración seguro protegido por contraseña.

Foro de discusión: Este elemento, muy conocido actualmente, permite crear temas de debate, en los que los usuarios van a poder crear sus canales temáticos y formular sus preguntas. Otros usuarios podrán contestar a las cuestiones publicadas creando todo un foro social. Todo ello moderado por un administrador desde un panel de administración protegido por contraseña y sin necesidad de poseer conocimientos técnicos.

Salas de chat: Probablemente este elemento haya supuesto la mayor revolución de Internet en este siglo. Las salas de chat permiten mantener conversaciones entre usuarios en tiempo real, creando salas privadas y salas públicas en las que cualquiera puede participar.

Plataforma SMS: Hoy en día, casi todo el mundo dispone de teléfono móvil; debido a ello, está en auge la comunicación por mensaje corto (SMS). Con este elemento dinámico, podremos enviar mensajes a los móviles de nuestros usuarios con un contenido totalmente automatizado y personalizado. ¿Se imagina felicitar a sus clientes por su cumpleaños de forma automática mediante un mensaje a su móvil?

1. Diseño claro y conciso Lo primero que nota un usuario al entrar a una página Web es los colores, las imágenes y la posición de los elementos, es decir el diseño no el contenido. El diseño debe ser claro, simple y limpio, fácil de procesar por nuestra vista.
2. Colores acordes con el Logotipo y la imagen que quiera transmitir la empresa, los colores son un gran medio para transmitir emociones y estados de ánimos. Hay colores que nos transmiten seriedad y otros diversión (piensen en IBM vs McDonalds que colores le vienen a la mente), no es raro ver páginas web de empresas donde los colores de la página no tienen nada que ver con el logotipo o con el mensaje que transmiten y no se complementan sino que simplemente son los colores que mejor le parecieron al que diseñó la página, esto causa un impacto en el usuario y puede estar transmitiéndole el mensaje equivocado acerca de su empresa, productos y servicios.
3. Diseño uniforme entre las páginas, es importante que el usuario a medida que navegue entre las páginas de su empresa sienta que siempre está dentro de la misma página, a veces ocurre que no se mantiene ningún elemento en común entre las páginas, ya sea el color, menús, forma, y de repente cuando pasas de una página a otra sientes que estás en otro sitio, esto es muy perjudicial para la experiencia del usuario y puede ocasionar que no relacionen lo que presente en la página con su empresa o simplemente se vayan por sentirse perdidos o confundidos.
4. Espacio en blanco, el espacio en blanco ha sido despreciado por muchos diseñadores pero es un elemento clave para que un buen diseño, permite que el usuario preste más atención a los distintos elementos y sea más fácil la navegación, un ejemplo claro del uso del espacio blanco es la página de Apple. Recuerda que a veces menos es más.
5. No sobre utilizar animaciones y efectos, sólo se tienen de 5 a 8 segundos para captar la atención del usuario si su página tarda más de eso en cargar es muy difícil que los usuarios se queden, asegúrese de no tener más de 2 animaciones en flash en su sitio (1 es lo recomendado), y que se carguen una vez que toda la página esté cargada, así el usuario podrá ver la información rápidamente.
6. NO hacer sitios 100% en Flash, aunque los sitios en Flash son muy llamativos, no son muy útiles, primero suelen ser lentos para cargar y segundo el contenido no puede ser visto por los buscadores como Google y Yahoo, por lo que dificilmente su página aparecerá en las primeras páginas de búsquedas de estos. Recuerde que una página Web se trata de darle información al usuario no de entretenerlo o poner los efectos más llamativos. Si un diseñador le ofrece hacer un sitio 100% en Flash no confíe en que sabe lo que hace.
7. Cuide la programación y cumpla con los estándares, como en toda industria los estándares son importantes en páginas Web los estándares lo rige la WC3, es lo que permite que su página se vea más o menos igual en todos los navegadores y además le permite un diseño más rápido, fácil de actualizar y amigable con los buscadores lo que le traerá más visitas y potenciales clientes. Muchas veces este aspecto es pasado por alto y a la larga no trae más que problemas.
8. Asegúrese de tener un buen título en sus páginas y cuide las palabras claves, una página que en el título que aparece arriba en el navegador diga Sin Titulo o Untitled es una página descuidada, los títulos de las páginas y las palabras claves son fundamentales para que su página Web pueda ser encontrada.
9. Contenido, contenido, contenido, este es uno de los aspectos más difíciles de una página Web, el contenido es lo que trae visitas, es lo que hace que nuestra página suba en las posiciones de los navegadores, y es lo que hace que sus usuarios y clientes lo encuentren y vuelvan, el mundo de hoy se mueve es por la información y dar información a los usuarios acerca de no sólo sus productos sino de su industria hará que se fidelicen y pasen su página, productos y servicios de boca en boca, no hay campaña publicitaria que pueda vencer esa clase de publicidad. La mayoría de los clientes que he tenido es difícil de convencerlos de que generen contenido pero al ver la gran herramienta que es a largo plazo quedan convencidos. Si lleva tiempo y esfuerzo pero si es dirigida correctamente paga con beneficios.
10. Comparta e interactúe con sus usuarios, el impacto que han tenido las redes sociales en nuestro día a día es innegable y es necesario llevar a las empresas a ese mundo, el interactuar con sus usuarios saber que piensan de sus productos, escuchar sus necesidades, es uno de las herramientas más poderosas que se puedan tener. Utilice Twitter, Facebook, Linkedin en su empresa y hágalos parte de su página Web.

Estos son los primeros 10 consejos en el diseño de páginas Web corporativas que sirven tanto para pequeñas y medianas empresas como grandes corporaciones.
Si ya tiene su página Web vea si cumple con estos requerimientos, los cambios no tienen que ser radicales ni inmediatos puede ser un proceso paso a paso, una página Web es un organismo viviente que debe ir cambiando con el tiempo y adaptándose a los tiempos.
Otro que no puede faltar es que siempre confíe en un profesional, ya sea un diseñador gráfico que se especialice en páginas Web o una empresa como nosotros. Puede sonar a propaganda y puede que lo sea pero así como ud no le daría a construir su casa a cualquiera no lo haga tampoco con su página Web

Carritos de compra y puntos de venta

Un sitio de comercio electrónico no necesita un carrito de compras para procesar transacciones, sin embargo, muchos propietarios de sitios web ponen carritos de compra e iconos de venta a sus sitios. Los visitantes del sitio pueden elegir artículos para comprar, y tienen la opción de "ponerlos en sus carritos". Detrás de la escena, el software almacena los elementos del cliente en una base de datos o lista y recuerda los artículos. Antes de la construir un sitio de comercio electrónico, busca imágenes de carrito de compra en la web o crea las tuyas propias. Otros fabricantes ofrecen soluciones avanzadas para carritos de compras, que mejoran la experiencia de compra del visitante del sitio.

Tecnología segura de compra

Los sitios de comercio electrónico suelen utilizar una tecnología web llamada Secure Sockets Layers para encriptar los datos sensibles a medida que viaja entre el navegador del comprador y el servidor web del sitio. Si la dirección URL en la barra de direcciones de tu navegador comienza con "https" en lugar de "http", la página web utiliza SSL. Los sitios también presentan pequeños anuncios o imágenes que garantizan a la gente que sus tarjetas de crédito y cualquier otra información está segura, ya que el sitio usa SSL. Los desarrolladores web hacen la compra más segura mediante el uso de métodos de codificación que impiden que la información privada aparezca en la barra de direcciones del navegador cuando la gente envía formularios en los sitios de comercio electrónico.

Certificados SSL

Los cibercriminales tienen la capacidad de interceptar la información a medida que viaja a través de Internet. Una forma de hacerlo es crear un sitio que se hace pasar por otro. Cuando las víctimas introducen la información de su tarjeta de crédito o cualquier otra información en uno de estos sitios falsos, los delincuentes la roban. Los certificados SSL son componentes cruciales de sitios de comercio electrónico seguro, ya que demuestran que los sitios son auténticos. Los bavegadores web y el software manejan los detalles técnicos, todo lo que tienes que hacer es adquirir un certificado SSL por parte de una empresa que los comercializa. Elige un proveedor con buena reputación, informado y dispuesto a ayudarte a añadir el certificado SSL al sitio web de tu negocio, si necesitas ayuda.

Pagos seguros

En los inicios de la informática, las empresas que vendían productos a través de anuncios de revistas, normalmente recibían el pago cuando los clientes enviaban los cheques a través del Servicio Postal de los Estados Unidos. La mayoría de los consumidores conocedores de la tecnología de hoy en día esperan que los sitios de comercio electrónico acepten el pago de inmediato. Puedes encontrar bancos, compañías de tarjetas de crédito, y sitios online que configuran cuentas de comercio para ti, y darle a tu sitio la posibilidad de aceptar pagos con tarjetas de crédito en línea.

Información de producto

Sin catálogos de productos conteniendo la información de los productos, las tiendas virtuales no tienen nada que vender. Al construir un sitio web de comercio electrónico, debes crear un catálogo de productos de gran riqueza gráfica que muestre imágenes y videos, o un escaparate simple que presente los productos en una lista o tabla. Las empresas normalmente almacenan información del producto en una base de datos, junto con descripciones de los productos y precios para ayudar a los consumidores a tomar sus decisiones de compra.

Referencias

Carlos Jaimez. (2001). Programación de Web Dinámico. Mexico: Dewey.
 Salvador Vega y León. (2001). El lenguaje JavaScript . Mexico: Akal.