Páginas

Presentación electronica

Pantalla completa

Sitios web

Un sitio web es un conjunto de páginas web relacionadas entre sí. Se entiende por página web tanto el fichero que contiene el código HTML como todos los recursos que se emplean en la página (imágenes, sonidos, código JavaScript, etc.).

A menudo, la página inicial es la más vistosa del sitio web, ya que tiene el objetivo de atraer y atrapar al visitante. La mayoría de las páginas iniciales poseen las siguientes características:

Poco texto, pero muchas imágenes, gráficos animados, sonidos o incluso vídeos.

Algunas pasan (saltan) automáticamente a la página principal, pero en otras el usuario tiene que pulsar en un enlace para cargar la página principal.

Además de usarse como tarjeta de presentación, la página inicial también se puede emplear para disminuir el tiempo necesario para cargar las páginas posteriores. Mientras el usuario está visualizando la página inicial, las imágenes que se emplearán en las siguientes páginas se pueden cargar en la memoria caché del navegador mediante un proceso en segundo plano del que el usuario no es consciente.

La página principal, conocida como home page, root page, entry page, front page o main page en inglés, es la página que funciona como índice o tabla de contenidos del sitio web. A través de esta página, el resto de documentos del sitio web es accesible de una forma directa o indirecta. Por tanto, la página principal tiene la función de guiar y dirigir al usuario a otras páginas del sitio web. La página principal tiene que ser clara y no crear confusión con infinidad de opciones (si las opciones son abundantes significa que la clasificación de la información no ha sido la correcta).

Posiblemente, el aspecto más importante (y al mismo tiempo uno de los más descuidados) de un sitio web sea su contenido (y por extensión, sus servicios): un sitio web con un buen diseño pero con un pobre contenido es poco probable que triunfe, sin embargo, un sitio web con un pobre diseño pero con un buen contenido sí que puede triunfar (por ejemplo, los buscadores Yahoo o Google o la tienda Amazon no destacan por su diseño, pero han triunfando en Internet gracias a su contenido o a los servicios que ofrecen).

El contenido de un sitio web se suele organizar en una serie de secciones que facilitan su búsqueda y localización. En general, los contenidos se pueden clasificar en dos tipos: comunes y específicos.

Los contenidos comunes son aquellos que se pueden encontrar en la mayoría de los sitios web pertenecientes a una misma categoría. Por ejemplo:

Grandes compañías:

• Quienes somos?

• Información de contacto.

• Historia de la compañía.

• Objetivos.

• Cartera de clientes.

• Productos o servicios.

• . . .

Periódicos:

• Editorial.

• Noticias internacionales.

• Noticias nacionales.

• Deportes.

• . . .

Centros educativos:

• Personal.

• Profesores.

• Estudiantes.

• Planes de estudio.

• . . .

Portal genérico:

• Noticias.

• Canales.

• Correo.

• Chat.

• . . .

Página web estática

Son aquellas páginas que muestran información permanente utilizando código HTML, no cuentan con las funcionalidades básicas para editar el contenido a través de una cuenta de administrador y un editor de texto.

Las partes básicas de una página estática

Cabecera de pagina. Se ubica en la parte superior y se repite en todas las páginas internas. La información que debe de presentar es: Logotipo, eslogan y menú. También puede incluir otros elementos como enlaces a redes sociales, dirección, teléfonos entre otros. Pie de pagina. Al igual que la cabecera de página, se repite en todas las páginas internas. La información que presenta es: Empresa o persona que ha desarrollado la página, año de publicación, menú en forma de texto simple y dirección de contacto, incluyendo número de teléfono o correo electrónico.

Página de Acerca de nosotros. La página de Acerca de nosotros sirve para describir tanto a la institución o empresa como el objetivo de la página, en el caso de una página estática el objetivo es proporcionar información a los clientes que la visitan. En esta página también se debe de incluir la misión y la visión de la empresa o institución, esto se puede hacer a través de un submenu utilizando páginas nuevas, o se puede incluir como texto en una sola página.

Página de Contacto. Esta página debe de presentar la información de contacto, esto es dirección, teléfono, correo, horario de atención, enlaces a redes sociales (Facebook, Twitter, Google +, LinkedIn, Moodle, Ustream, entre otros). Las páginas de contacto también deben de incluir un formulario de contacto, este formulario permite a los usuarios escribir su nombre, correo electrónico, teléfono entre otros datos para poder enviar una pregunta. La persona propietaria de la página web recibirá un correo electrónico con los datos del cliente, junto a su pregunta.

Diseño de pagina. De acuerdo a la empresa o institución, la página mostrar otras páginas de información. Estas páginas deben de tener el mismo diseño el cual será realizado por un diseñador gráfico o bien, por un programador con experiencia.

Los elementos que se deben de diseñar en una página

Texto. Se debe de tener en cuenta el tamaño, tipo de letra y color de texto para cada sección de la página: Titulo, contenido, enlaces de texto, eslogan, nombre de la empresa, institución o página, listas, subrayado, frases, entre otros.

Menú. Son una parte importante en la página, se debe de diseñar el modo en que se presentaran los menús y submenús, si serán desplegables y que efectos utilizaran, como por ejemplo como deben de responder a las distintas acciones de los usuarios.

• Cabecera de página.
• Pie de Página.
• Cuerpo o contenido.
• Tablas.
• Campos de texto en un formulario web.
• Botones, enlaces.

Imágenes. Las imágenes se pueden presentar todas con un formado estándar, por ejemplo un borde blanco y con las esquinas redondeadas.

Página web dinámica

Son aplicaciones web que funcionan con lenguajes de programación como PHP, Java JSP, ASPX.NET, Python, Rubí (entre otros). Estos lenguajes de programación lo que hacen es procesar la información que reciben de parte de los usuarios y devuelven el resultado en HTML, de esta manera el usuario final no puede ver que operaciones se realizan en el lado del servidor porque lo único que observara es el resultado grafico que presentan los navegadores web.

Las páginas dinámicas hacen uso de distintos tipos de bases de datos, como MySql, SQL Server, PostgreSQL, Oracle (entre otras). Las bases de datos sirven para guardar la información que el usuario utiliza, esta información puede ser los datos de perfil, compras realizadas, saldo disponible, fotos que ha subido, comentarios, publicaciones y más.

Tipos de páginas web dinámicas

Algunas aplicaciones que se pueden mencionar dentro de las páginas web dinámicas, son las siguientes.

• Aplicaciones para llenar formularios y ver respuestas (Formularios de google).

• Chats en línea para dar soporte a usuarios (Sistema de soporte de ESET Guatemala).

• Sistemas de compra de productos, tiendas virtuales (Ebay, Amazon).

• Redes sociales, para publicar fotos, videos, comentarios (Facebook, Twitter, Youtube).

• Páginas de información y publicación de noticias (WordPress, blogspot).

Los elementos de una página estática están incluidos en una página web dinámica, la diferencia es que la página dinámica agrega funcionalidades para poder administrar y editar la información que se presenta al usuario final.

Elementos de una página dinámica

A continuación se listan algunos elementos de una página web de información, estas páginas son aquellas que tienen como objetivo informar al usuario las diferentes actividades que se realizan a través de noticias.

Categorías. Cada noticia que se publica debe de estar bajo una categoría. Por ejemplo, una presentación sobre el medio ambiente no puede estar bajo la misma categoría de una noticia para dar a conocer los estudiantes que se han graduado.

Paginas. Las páginas dinámicas deben de contar con las mismas páginas de una web estática, por ejemplo página de contacto, acerca de nosotros, misión, visión, equipo de trabajo y más.

Palabras clave (etiquetas). Cada noticia publicada debe de contener una serie de palabras clave, las palabras clave sirven a los buscadores de internet para indexar la información y establecer que palabras clave contiene el artículo publicado. Una forma de obtener beneficio de estas etiquetas es crear una nube de etiquetas, que funcionaran como una categoría, es decir que cuando el usuario seleccione una etiqueta o palabra clave, el sistema deberá de mostrar todas las publicaciones que han sido marcadas con la etiqueta seleccionada.

Archivo. Es una sección que permite al usuario tener acceso al historial de publicaciones por fecha, es decir por año, por mes o por día. Esta sección tiene distintas formas de presentación, porque puede ser una lista simple por año que liste los meses junto a un número que muestra la cantidad de publicaciones creadas en ese mes. También se puede crear un calendario, de acuerdo al mes se mostraran los días y se marcara con texto en negrita aquellos días en el cual se realizaron publicaciones.

Galería de imágenes. Sirven para presentar un resumen grafico de las últimas noticias. Por ejemplo, una empresa o institución que ha realizado presentaciones en distintos países deberá de utilizar una galería de imágenes para mostrar un pequeño resumen que tendrá un enlace de texto (hipervínculo) hacia la publicación que describe la actividad.

Imagen destacada. Cada publicación realizada, debe de contar con la opción de agregar una imagen destacada. Esta imagen destacada es utilizada en la sección de noticias, para mostrar un resumen, imagen destacada e hipervínculo hacia la página de la noticia. En esta página de noticia, la imagen destacada debe demostrarse en la parte superior.

Enlaces recomendados. Es una lista de hipervínculos que se le presenta al usuario que visita la web para poder conocer otras páginas web. Los enlaces recomendados son publicados por los propietarios de la página dinámica, con el objetivo de que los usuarios que visitan la página den clic en dichos enlaces.

Formulario de búsqueda. Las páginas que publican constantemente noticias, generan bastante contenido. Por este motivo la página dinámica debe de contar con un formulario de búsqueda, que liste las publicaciones que coinciden con las palabras clave escritas, de esta manera el acceso a la información será de una manera más simple.

Estructura de una Página Web

A pesar de la gran variedad de páginas Web que encontramos en Internet, hay elementos comunes que se repiten en casi todas ellas:

Partes de una Pagina Web

Cabecera

En la cabecera, también llamado header, solemos encontrar el Logo o nombre de la empresa y el menú de navegación. El menú de navegación indicará al usuario a que sección de la página Web dirigirse. Por eso es importante que esté siempre visible. Ya sea de forma extendida cuando navegamos a pantalla completa o de forma contraída como aparece en los dispositivos móviles. Es interesante que el menú contenga un buscador para que el usuario pueda encontrar rápidamente un contenido si la web es muy extensa. También es habitual encontrar sliders en la cabecera que viene a ser un pase de fotos de buena calidad y que representen y trnasmitan la actividad de la empresa, ya que será lo primero que se vea en la página Web. Es una buena idea que estas imágenes vayan acompañados de texto que ayude al usuario a conocer mejor aún el contenido de la Web que esta visitando.

Cuerpo

En el cuerpo de la página Web, lo que se conoce como main content, iría el contenido principal de la Web. El cuerpo puede estar estructurado a una o varias columnas. Según mejor nos encaje en función de nuestro contenido. A veces vemos el cuerpo dividido en dos columnas. Una ocupando la mayor parte del ancho, unas 3/4 partes aproximadamente que es donde iría el contenido más relevante. Y otra parte ocupando el resto de ancho, 1/4 parte aproximadamente. A esta parte se la llama sidebar. En esta zona encontramos espacios para publicidad, Redes Sociales… Este tipo de distribución de columnas es muy habitual en Blogs.

Pie

En el pie de página, también conocido como footer es la zona que cierra nuestras páginas y donde encontramos generalmente la información legal (Política de Privacidad, Cookies y Condiciones de uso), información de contacto: teléfonos, dirección de la empresa, vínculos a Redes Sociales, etc.

Esquema de una Página Web

A parte de la estructura de una web, tenemos el esquema de la página web, es decir, como se distribuye el contenido a lo largo de sus secciones. Es fundamental, si se busca el objetivo de Posicionar la web en los Buscadores, que se estudie muy bien la arquitectura de la web. No obstante, los apartados más habituales de una página web para una Pyme son:

Inicio o Home

La página de Inicio o Home, es una de las secciones más importantes, ya que suele ser la página donde suelen aterrizar la mayor parte de nuestras visitas. Una buena página de Inicio, puede determinar que el usuario permanezca más o menos tiempo o que la abandone de inmediato. Hay estudios que señalan que un usuario permanece unos pocos segundos en una web y si no ve nada interesante en ese periodo de tiempo abandonará la página. De ahí la importancia de este elemento. Cuando hablamos de buena página de Inicio, nos referimos, entre otras cosas, a un buen diseño con el contenido bien estructurado, tiempos de carga rápido y por supuesto, que sea un diseño web Responsive, ya que a día de hoy el uso de los móviles o tablets para navegar por Internet se ha incrementado notablemente. Una estadística que seguramente vaya en aumento en los próximos años.

Productos y Servicios

El contenido principal de la web suele centrarse a modo de catálogo en productos clasificados por categorías, familias, etc… y a veces contar con una Tienda Online, que nos permite adquirir los productos al momento. Al igual que los servicios, que se suele desglosar con una clasificación que facilite el entendimiento al cliente potencial para dirigir su atención a la sección que más le interese.

Blog

En algunos casos, es interesante contar con un Blog en la web. Su misión es tener informado a nuestros usuarios con contenidos relacionados con la empresa y a la vez, poder captar un tráfico de Long Tail. Además, sirve de vínculo entre nuestra web y las redes sociales, para poder atraer visitas desde esos medios.

Contacto

Unos de los objetivos que suele perseguir la web de una empresa, es conseguir nuevos clientes, por ello es importante que el usuario que entra a nuestra página web pueda contactar con nosotros fácilmente. Para ello podemos ofrecer al usuario botones y enlaces a lo largo de nuestra web, que le lleven a nuestra página de contacto. La página de contacto debe contener un formulario sencillo en el que el usuario rellene sólo los campos necesarios e imprescindibles. Que el usuario rellene más campos de lo habitual, podría significar que el usuario optara por no rellenar dicho formulario. También es habitual que encontremos un mapa indicando la ubicación de nuestra empresa.