SITIOS WEB
1. Elementos en cuanto a estructura
1. Elementos de una Página Web
Una página web es una colección de elementos interrelacionados que se presentan en un navegador web. Estos elementos se dividen en distintas partes, cada una con una función específica en la estructura y diseño de la página.
Generalmente, si hablamos de las partes de una página web, nos referimos a su estructura, aunque se suele hablar en función de su contenido.
En la estructura de una página web tenemos tres partes diferenciadas: cabecera, cuerpo y pie de página. O, por sus términos en inglés: header, body y footer.
1.1 Cabecera o header
1. Cabecera o header
La cabecera es la parte superior de la página web. Aquí suele incluirse la información básica de la empresa o marca y es consistente en todo el sitio, es decir, se repite en cada página de la web por la que se navega. Si hablamos en lenguaje HTML, todo el contenido de la cabecera aparece entre las siguientes etiquetas: <header>Contenido de la cabecera</header>
Los elementos que se incluyen en la cabecera son:
Título o logotipo
Es una representación visual de la identidad de una empresa o página web. Suele ubicarse en la esquina superior izquierda del encabezado y se utiliza para crear reconocimiento de marca. Es importante que el header incluya un título o logotipo que identifique claramente el sitio y que sea fácilmente reconocible por las personas. El título o logotipo deben aparecer en un lugar destacado del header para que sea fácilmente visible.
Junto al logotipo, es común encontrar el nombre de la web o empresa. Proporciona claridad sobre qué página web están visitando los usuarios y les ayuda a identificar rápidamente si están en el lugar correcto.
Menú de navegación
Este elemento permite a los visitantes desplazarse por diferentes secciones o páginas de la página web. Por lo general, se encuentra en el encabezado para facilitar su acceso y garantizar una navegación fluida.
Es fundamental que el header incluya un menú de navegación que permita a los usuarios acceder a las diferentes secciones o páginas del sitio. La navegación suele estar organizada en una barra horizontal y puede incluir submenús con enlaces a páginas específicas. Para que las personas accedan a las diferentes partes del sitio de forma rápida y sencilla, es importante que el menú de navegación cumpla con ciertos requisitos.
- Organización: Es importante que el menú de navegación esté bien organizado y sea fácil de entender para los usuarios. Las opciones del menú deben estar jerarquizadas de forma lógica y deben incluir submenús para acceder a páginas específicas.
- Enlaces claros: Es importante que las opciones del menú tengan enlaces claros y fáciles de seguir para que los usuarios puedan acceder a las páginas o secciones del sitio de forma rápida y sencilla. Los enlaces deben ser fácilmente identificables y no deben llevar a páginas que no estén disponibles o que hayan sido eliminadas.
Las secciones que debe tener un menú de navegación están estrechamente relacionadas con los elementos contenidos en la página web como lo son:
En algunos casos, especialmente en webs de gran tamaño o con mucho contenido, se puede incluir una barra de búsqueda en el encabezado. Esto permite a los usuarios buscar contenido específico de manera rápida y eficiente.
Optimización para móviles
Cada vez son más los usuarios que acceden a Internet a través de dispositivos móviles, por lo que es fundamental que el header esté optimizado para estos dispositivos.
1.2 Cuerpo o body
2. Cuerpo o body
Esta es la parte de la web que alberga el contenido principal de la página. La sección body contiene texto y elementos que se muestran directamente en la página web, también conocida como la ventana de visualización del navegador. El propósito de la sección body es configurar los contenidos de la página web.
En HTML puedes identificar rápidamente este contenido, ya que se encuentra dentro de las siguientes etiquetas: <body>Contenido del cuerpo</body>
El contenido principal puede incluir texto, imágenes, vídeos, audios y otros elementos multimedia.
Para que el cuerpo de una página web sea efectivo y cumpla su objetivo, es importante que:
- Sea de calidad y relevante,
- Incluya palabras clave de forma natural,
- Tenga un diseño atractivo y coherente,
- Incorpore imágenes y vídeos de alta calidad,
- Esté optimizado para móviles.
La barra lateral
Esta es una sección opcional que suele aparecer a uno de los lados de la página y que puede incluir distintos elementos como enlaces a otras páginas o secciones del sitio, anuncios, formularios de contacto y otros. Aunque no es un elemento obligatorio, puede ser muy útil para mejorar la usabilidad y la accesibilidad del sitio.
1.3 Pie de página o footer
3. Pie de página o footer
El pie de página o footer es la parte inferior de una página web. Al igual que la cabecera, se repite y es consistente en cada página. En el footer podemos encontrar los siguientes elementos:
- Menú simplificado
- Información de contacto
- Botones de redes sociales
- Logo de la empresa
- Enlace a la política de privacidad
En HTML el pie de página se encuentra entre estas etiquetas: <footer>El contenido del pie de página</footer>
Es importante que el footer cumpla con ciertos requisitos para que sea funcional.
Información de contacto
Es importante que incluya un formulario de contacto, una dirección de correo electrónico o un número de teléfono para que las personas puedan ponerse en contacto con el sitio de forma rápida y sencilla.
Redes sociales
Es común que se incorporen enlaces a las redes sociales para que los visitantes puedan seguir la actividad del sitio y compartir el contenido.
Boletín de noticias:
Es importante contar con un formulario de suscripción al boletín de noticias del sitio para que quienes lo deseen reciban actualizaciones y notificaciones por correo electrónico.
Anuncios
Incluir anuncios para promocionar productos o servicios del sitio o de terceros es viable, tomando en cuenta que sean relevantes y no sobrecarguen el footer.
Acceso a políticas de privacidad
Es fundamental que el footer incluya enlaces a las políticas de privacidad y términos de uso del sitio para que cada internauta pueda conocer las condiciones de uso y protección de datos del sitio.
2. Elementos en cuanto a su contenido
4. Elementos en cuanto a su contenido
En cuanto a su contenido, las páginas web contienen una serie de componentes y elementos multimedia para su visualización en un navegador de manera local o en Internet.
2.1 Inicio o home
2.1 Inicio o home
La página principal, de inicio o homepage es la más importante de todas. Aquí se incluye la información más relevante de una empresa.
En la página de inicio se encuentra:
CTA o llamada a la acción
Imprescindibles para lograr que los visitantes realicen la acción sugerida: comprar/suscribirse…
Resumen de tus productos y servicios
Se suele mencionar productos mediante una buena imagen o un eslogan, con el objetivo de que los visitantes en solo 3 segundos conozcan el contenido.
Ofertas
La página de inicio suele ser la parte de la web más adecuada para anunciar ofertas importantes y destacarlas.
Indicadores de éxito
Número de clientes, de empleados, países en los que opera la empresa, años de experiencia… Todo vale para mostrar lo mejor.
Testimonios o colaboraciones
Es muy habitual encontrar testimonios, reseñas de Google o experiencias de trabajos anteriores.
2.2 Quienes somos
2.2 Quienes somos
Hablar sobre el propietario o la empresa en el Sitio Web proporciona confianza a los visitantes. Resaltar las acciones que realiza el negocio puede incidir en la percepción de los clientes.
2.2 Productos y servicios
2.2 Productos y servicios
Cuando se crea el contenido de una web, lo ideal es que la información más detallada de los productos para la venta o los servicios que se ofrecen se incluyan en una página específica. En esta parte de la página web se debe incluir todo lo relacionado con los productos o servicios: ventajas de los productos, principales características, a quién están dirigidos, el precio, gastos de envío…
2.3 Blog
2.3 Blog
Si hay una parte fundamental en cualquier tipo de página web, esa es la sección del blog. Crear un blog puede hacer que el negocio obtenga mejores resultados.
Contar con un blog es una estrategia de contenidos y una pieza clave para mejorar el posicionamiento orgánico en Internet y ganar visitas en el sitio.
Los elementos web más comunes de un blog son:
Buscador
Se hace necesario contar con un buscador para que los usuarios del Sitio Web puedan encontrar con facilidad información que necesiten.
Formulario de suscripción
Incluir una caja de suscripción en un blog es una forma de generar leads de calidad. Aunque no sean clientes, es importante contar con su cuenta de correo electrónico para enviarle el contenido publicado y publicitario y, poco a poco, acercarlos al proceso de compra.
Categorías y etiquetas
Es recomendable incluir en la página web una sección con las categorías y etiquetas de los contenidos. Es una buena forma de estructurar el contenido y mejorar la usabilidad del Sitio Web.
2.4 Política de privacidad
2.4 Política de privacidad
Uno de los requisitos básicos es proporcionar a los usuarios toda la información relacionada con el procesamiento de los datos que se recopilan a través del sitio web. Generalmente se ubica en el pie de página o footer, así como en los avisos de cookies o cuando se incluye algún formulario de registro o suscripción.
2.5 Contacto
2.5 Contacto
Un Sitio Web no sirve únicamente para vender. Tener un negocio con un Sitio Web ayudará a ganar visibilidad y mostrar a clientes potenciales información de contacto es fundamental para seguir creciendo. El teléfono, la dirección y los horarios son tres elementos básicos que deben estar sí o sí en todas las páginas de contacto y, como no, también en la cabecera y en el footer. Pero, además de ello es muy recomendable incluir los siguientes elementos:
Formulario de contacto
Proporcionar a los visitantes del Sitio Web les da la posibilidad de contactar a la empresa las 24 horas del día y esto transmite muy buena imagen.
Dirección de correo profesional
Aunque cada vez es más habitual encontrar emails de tipo @gmail.com - @outtlouk.com, crear direcciones de correo personalizadas con un nombre de dominio transmite profesionalismo.
2.6 Otros elementos
2.6 Elementos de diseño
El éxito o fracaso de un sitio web de una empresa se basa en la forma en que está hecho; Su diseño web, su velocidad, su estructura, contenidos. El diseño juega un papel fundamental, ya que se deben tomar en cuenta distintos elementos y factores internos y externos.
Diseño web creativo, ordenado y fácil de navegar
Entre los elementos de un sitio web exitoso está un diseño amigable y fácil de navegar, esto permitirá que el usuario se sienta cómodo y permanezca más tiempo en el sitio.
Secciones y páginas internas bien definidas
Antes de crear un sitio web, se debe definir las secciones y páginas internas. Esto evitará que al momento de diseñarlo haya improvisación y crear estructuras que sean confusas para los visitantes. Es importante tomar en cuenta la estructura:
- Inicio o home: Es la portada del sitio web, debe explicar claramente lo que sé que ofrece.
- Quiénes Somos: Hablar de empresa para darla a conocer y resaltar las acciones que ayuda a los clientes.
- Productos y servicios: Listado, descripción y precio de productos o servicios (la publicación del precio es a consideración).
- Contacto: Teléfono, celular, WhatsApp, email, dirección, ubicación en Google Maps.
- Promociones: En esta página se puede subir ofertas especiales y actualizarla continuamente para promocionarla por redes sociales.
Logotipo de la empresa visible y en buena calidad
El logotipo es un elemento que nunca debe ser subestimado, al final es la imagen de la empresa.
Menús ordenados, de rápido acceso y fácil de entender
Los menús ayudan a tener un sitio ordenado y permite que los visitantes accedan rápidamente a la información que están buscando. Lo ideal es que esté siempre visible y que el acceso sea rápido. Este punto va muy ligado con la usabilidad.
- Un menú debe permitir a los visitantes acceder a los contenidos más importantes en corto tiempo.
- Los expertos recomiendan que en el menú principal se coloquen un máximo de 7 elementos. Mostrar más elementos es mejor hacerlo en menús desplegables o secundarios.
- Las secciones de la web deben ser accesibles desde las páginas internas, por eso debes colocar el menú visible en todas tus páginas.
Textos que comuniquen eficazmente
El objetivo general es crear un sitio web que dé confianza a los visitantes y para ello requieres de lenguaje sencillo y claro.
Tres principios fundamentales ayudan a optimizar el uso del llamado “lenguaje visible”.
- Organizar: Proporciona al usuario una estructura conceptual clara y consistente.
- Economizar: Hacer lo máximo con la menor cantidad de señales y elementos visuales. Sus cuatro bases son: simplicidad, claridad, distinción y énfasis.
- Comunicar: El sitio debe equilibrar; la legibilidad, la tipografía, los simbolismos, múltiples puntos de vista y el color o la textura con el fin de comunicarse con éxito.
Imágenes que complementen el mensaje
Las imágenes deben ser originales y complementar el mensaje con el texto. Proyectar bien un mensaje utilizando gráficos que respalden algún dato, aportan valor a los visitantes. Las imágenes originales son un factor que ayudan a la optimización del sitio web y esto podría beneficiarlo en posicionamiento en Google (Ranking).
Hipervínculos direccionados correctamente
Los hipervínculos son enlaces (links) que sirven para mejorar la navegación dentro de la página. Normalmente se realizan entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen. Por ello, es importante que sean dirigidos a las páginas que los usuarios pretenden visitar.
Datos de contacto visibles y de fácil acceso
Un sitio web debe tener una sección clara y visible con los datos de contacto.
Botones que dirijan a las Redes Sociales de la marca
Generalmente, las personas quieren conocer más sobre un producto o servicio recurren al sitio web y las redes sociales. Por ello, es conveniente colocar botones de las redes sociales, así la interacción con los posibles clientes aumentará y tal vez aumenten los seguidores.
Formulario de contacto visible y claro
Los formularios de contactos son vías de comunicación entre los administradores del sitio y los usuarios. Deben estar bien programados y responder lo más rápido posible a las dudas o inquietudes que lleguen a través de estos canales.
Poderosas Llamadas a la Acción que conviertan visitantes en clientes
Las llamadas a la acción son de los elementos de un sitio web más efectivos para incentivar al usuario. Incluir llamadas a la acción que sean claras y fáciles de seguir es la manera más adecuada de orientar a los visitantes para llegar a su objetivo y de los propietarios del Sitio Web. Algunos ejemplos pueden ser “Clic aquí para registrarte”, “Compra AQUÍ tu producto”, “Clic aquí para consultarnos”.
Mapa de la ubicación del sitio
Incluir la dirección física de la empresa en el sitio web, permitirá agregar directamente Google Maps. Estos mapas son bastante útiles en cualquier dispositivo, especialmente para dispositivos móviles, ya que cuentan con diversas aplicaciones GPS que les indica cómo llegar al lugar indicado.
Términos de Uso y Aviso de Privacidad
Dentro de las partes que debe contener una página web están las páginas legales o que por disposición legal se deben tener.
Herramienta para conocer las estadísticas del sitio web
Conocer cuánto tráfico diario tiene el sitio, el tipo de contenido más leído, el que menos leen y todo tipo de datos estadísticos, proporciona información valiosa determinante para la empresa. Google Analytics es las herramientas más utilizadas.
Hospedaje Web seguro y confiable
El hospedaje web es el espacio en un disco duro donde se almacena todos los archivos del Sitio Web y permite que sea visible en internet. Contratar el mejor hosting es fundamental para garantizar un flujo continuo en Internet.
Nombre de Dominio sencillo y fácil de recordar
El nombre de dominio es fundamental y puede considerarse como uno de los aspectos más importantes de tener presencia en Internet. Un buen nombre de dominio puede dar ventajas significativas a la hora de comercializar en el Sitio Web. Lo recomendable es que la dirección o nombre de dominio describa la actividad o giro del negocio.
Algunos tips para elegir el dominio más adecuado:
- Que sea fácil de escribir: Usar un lenguaje coloquial (k en lugar de que) o palabras con varias maneras de escribirse (express o xpress), es posible que sea más difícil para los clientes encontrar el sitio.
- Que sea breve: Si el nombre de dominio es largo y complejo, existe el riesgo que los usuarios lo escriban mal. Corto y sencillo es lo mejor.
- Usar palabras clave: Las palabras clave que describan a la empresa y los servicios que ofrece. Ejemplo: Una empresa que cambia vidrios, puedes elegir www.reparaciondevidrios.com.
- Apunta a tu área: Si la empresa es local, debe considerarse incluir el lugar. Ejemplo: www.reparovidriosenpanama.com.
- Evite usar números y guiones: Los números y guiones suelen ser confusos.
- Hágalo memorable: Hay millones de nombres de dominio registrados, así que tener un dominio que sea llamativo y fácil de recordar es esencial.
3. Teorías del diseño web
3. Teorías del diseño web
Saber cuáles son las teorías del diseño web y cómo aplicarlas es clave para obtener el mejor resultado posible al implementar un Sitio Web.
Diseño centrado en el usuario
Este enfoque se basa en comprender las necesidades, preferencias y comportamientos de los usuarios para crear una experiencia web intuitiva y satisfactoria.
Diseño minimalista
Esta teoría promueve la simplicidad y la eliminación de elementos innecesarios para lograr una estética limpia y un enfoque claro en el contenido principal.
Diseño de la jerarquía visual
Se enfoca en el uso de elementos visuales, como tamaño, color y contraste, para guiar la atención del usuario y destacar la información más importante.
Diseño responsive
Considera la adaptabilidad de la página web a diferentes dispositivos y tamaños de pantalla, asegurando una experiencia óptima en cualquier dispositivo.
Diseño de la tipografía
Se centra en la elección y el uso adecuado de fuentes para mejorar la legibilidad y transmitir la personalidad de la marca.
Diseño de la experiencia del usuario (UX):
Se concentra en el diseño de interacciones y la facilidad de uso de la página web, priorizando la satisfacción y la eficiencia del usuario.
4. Tipología de páginas web
4. Tipos de Sitios Web
Existe una tipología de Sitios Web según el objetivo que se quiere perseguir. No es lo mismo una empresa que solo tiene necesidad de estar presente en Internet para que los usuarios puedan conectar con ella, que un negocio que vende online a todas partes del mundo. Los objetivos son muy diferentes, lo que varía su contenido. Teniendo esto de referencia, se pueden mencionar los siguientes tipos de Sitios Web:
Sitios web estáticos
Son aquellos en las que el contenido que se muestra es informativo y no suele cambiar. El usuario no puede apenas influir en ella. Es un tipo de Sitio Web muy básico, y que en muchos casos no tiene ni siquiera una base de datos. Si la intención es programarlo desde cero, con HTML y CSS es suficiente, aunque con cualquier CMS abierto se puede hacer sin problema.
Un ejemplo de este tipo de sitios puede ser un currículum en línea o un sitio de empresa básico con información de contacto y servicios.
Sitios web dinámicos
Los sitios dinámicos añaden movimiento: son interactivos y versátiles. Todo el contenido se puede modificar en función de las necesidades de la empresa y de los usuarios que la visitan, por lo que se puede cambiar su contenido (textos, imágenes, vídeo...). Este tipo de sitios permite incluir elementos o aplicaciones con las que el usuario puede interactuar, como un calendario, una encuesta, un sistema de comentarios, una reserva… A diferencia de los sitios estáticos, es necesario implementar una base de datos y utilizar un lenguaje de programación que trabaje del lado del servidor web.
Blogs
Este tipo de sitio nace con un objetivo muy claro: mostrar información de valor actualizada a los usuarios. Se podría ver como un periódico o revista en internet en el que se van publicando noticias regularmente. Es posible encontrar blogs dentro de otros tipos de sitios web como una sección más; En otras ocasiones, es posible que el blog sea el sitio completo.
Webs corporativas
Dentro de las webs empresariales, la web corporativa suele ser una de las opciones más escogidas. En esta web la empresa vuelca toda la información que quiere transmitir al usuario. Un buen símil sería una fotografía a tiempo real de lo que es la empresa y todo lo que puede ofrecer.
El objetivo que persiguen este tipo de webs es el branding de la marca y mostrar al usuario todo lo que ofrecen (productos o servicios), así como su misión, visión y valores. Esta vendría siendo una carta de presentación al mundo a través de Internet.
Landing pages
Las landing pages o páginas de aterrizaje son cada vez más comunes dentro de las estrategias de marketing. Son webs muy sencillas, de una sola página, en la que se encuentra información para comprar un producto (si es una landing page de venta) o información para recibir un recurso o acceder a una newsletter (si es una landing page de captación).
El objetivo de estas páginas es dirigir las campañas de atracción de tráfico a un espacio web concreto donde únicamente se habla de dicho producto/servicio o recurso para maximizar el número de solicitudes de compra, descarga o peticiones de información relacionadas con ello.
Tiendas online
Las tiendas online o ecommerce se encuentran frecuentemente en Internet, centradas en vender productos o servicios a los usuarios de internet sin necesidad de tienda física.
A raíz de la pandemia actual las ventas online se han disparado, lo que ha hecho posible que muchas empresas se planteen migrar sus webs más tradicionales hacia una tienda online.
Redes sociales
Desde una perspectiva social, de comunicación e interacción, las redes sociales son otro tipo de Sitios Web. ¿El objetivo? Crear conexiones entre personas o entre empresas y usuarios.
Foros
Los foros son muy comunes para concentrar opiniones de los usuarios sobre un tema concreto, lo que hace que sean considerados «nichos». Existen foros de muchos tipos: de bodas, de coches, de maternidad y paternidad, educativos, de negocios.
Portales de noticias
Los portales de noticias son Sitios Web de los periódicos y diarios de toda la vida. Con el lema de renovarse o morir, los medios de comunicación tradicionales se han reinventado con el fin de ofrecer casi la misma información a sus lectores en la edición impresa y en la edición online.
Plataformas de vídeos
Existen portales en los que únicamente se encuentran vídeos y un claro ejemplo de ello es YouTube.
5. Elementos para su publicación
4. Elementos para la publicación de un Sitio Web
Posterior al diseño de un Sitio Web es necesario publicarlo. Para lanzar a Internet un Sitio Web es necesario:
Registrar un dominio
Es necesario contar con un nombre de dominio que identifique al Sitio Web.
Alojamiento Web
Para alojar los archivos del Sitio Web se requiere un espacio en un servidor que albergue todo el contenido generado.
Posicionamiento Web (SEO)
Es necesario implementar estrategias de optimización para buscadores para mejorar la visibilidad en los resultados de búsqueda de los usuarios.
Análisis y seguimiento
Utilizar herramientas de análisis web para medir el rendimiento del Sitio Web y tomar decisiones más acertadas.
Seguridad
Es necesario proteger el Sitio Web contra amenazas potenciales mediante la instalación de certificados SSL y la implementación de medidas de seguridad.
certificados SSL
¿Qué es un certificado SSL?
Bibliografía
Derechos de Autor
Derechos de Autor
Este Objeto de Aprendizaje se distribuye con fines exclusivamente educativos. El mismo ha sido elaborado por el profesor César A. Delgado B.
Este contenido ha sido extraído de varios Sitios Web con información relevante. Los mismos han sido incluidos en la bibliografía. Cualquier contravención sobre el contenido y las imágenes, serán reemplazados a solicitud de la parte interesada.
Sitio Web: elprofecesard.com
Plataforma: campus.moocspanama.com
Redes Sociales:
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.
Es responsabilidad de cada persona el uso de la información proporcionada y cumplir con los Derechos de Autor.
Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0