# data[].attributes.body
DEFINICIÓN
Página electrónica o página digital accesible desde cualquier navegador con acceso a internet, y que puede incluir audio, vídeo, texto y sus diferentes combinaciones.
TIPOS

Páginas Web estáticas: Operan mediante la descarga de un fichero programado en código HTML,  no se utilizan bases de datos ni se requiere programación.

Páginas Web dinámicas: Se generan en el momento mismo del acceso del usuario,su contenido es fácilmente y frecuentemente modificado.

# data[].attributes.body
CONCEPTO
Conjunto de páginas web que están conectadas entre sí y se encuentran alojadas en un servidor web y que son accesibles para cualquier persona con conexión a internet.

TIPOS DE SITIO WEB

Institucionales:  se crean alrededor de una marca o una institución pública o privada.

Portales de noticias:  difunden las novedades más importantes de una ciudad, un país o el mundo en tiempo real.

Buscadores: poderosas herramientas para navegar en internet, ya que nos ayudan a encontrar términos o palabras clave en cuestión de segundos.

Redes sociales:  lugares donde interactúan personas y marcas que tienen algún tipo de vínculo comercial, laboral o personal.

Tiendas online: tienen como objetivo vender en internet y generar ganancias a sus propietarios.

Marketplaces:  sitio web que conecta a compradores con vendedores.

Blogs: las marcas lo utilizan para difundir información relacionada con su negocio con fines comerciales.

Foros: para conectar con profesionales, debatir un problema, etc.

Micrositios: páginas dedicadas a profundizar sobre un tema concreto de una empresa o una organización.

Portafolios:  páginas ideales para mostrar el trabajo que realiza un profesional.

Landing pages: páginas de destino tienen como objetivo llevar a los usuarios a la conversión, ya sea que se registren en un formulario, realicen una compra o se suscriban a un newsletter.

# data[].attributes.body
Un dominio web es el nombre único que recibe un sitio web en internet. Este nombre identifica a una página web concreta sin que puedan existir dos o más sitios web que compartan el mismo nombre de dominio.

TIPOS:

TLDs: Dominios de nivel superior

Los niveles del dominio se separan por puntos y se empiezan a contar de derecha a izquierda, y hay que diferenciar el nombre de dominio de las extensiones.

gTLD: Dominio de nivel superior genérico

Los gTLDs son los dominios de nivel superior genéricos, y en este grupo podemos encontrar las extensiones más conocidas y comunes que se pueden registrar como .com, .net, .org, etc.

ccTLD: Dominio de nivel superior de código país

Los dominios ccTLDs son los dominios de nivel superior territoriales, y están orientados a un espacio geográfico en particular. Algunos de ellos son el .es, .fr, .jp, etc.

sTLD: Los dominios sTLDs o dominios de nivel superior patrocinados son dominios orientados a una organización o sector particular. Este tipo de dominios no están gestionados por la ICANN, sino que su gestión ha sido cedida a organizaciones privadas.

# data[].attributes.body
URL es la dirección única y específica que se asigna a cada uno de los recursos que hay en Internet (sitios web, páginas web, textos, fotos, vídeo…) para que puedan ser localizados por el navegador y visualizados por el usuario. Por tanto, se trata de un conjunto de caracteres identificativos que poseen todos los documentos en la World Wide Web (WWW).

PARTES

Protocolo de red. Http, Https, mailto y ftp son los principales protocolos web que encabezan una URL, indicando a la máquina qué tipo de conexión debe realizar y cuál es el lenguaje específico que se hablará con la computadora o la red de computadoras que brindarán la información al usuario.

Servicio. Www, www2, etc., se trata de los posibles servicios de soporte de información on-line, de los cuales la World Wide Web es la más popular.

Dominio, tipo de dominio y país. Se trata del “nombre” de la empresa que brinda la información, o del proyecto o red o la computadora en donde se encuentran, es decir, el nombre específico de quien tiene lo que buscamos; además el tipo de servicio que presta: comercial (.com), educativo (.edu), etc., y el país al que pertenece: Argentina (.ar), Brasil (.br), Italia (.it), etc.

Ruta y nombre del archivo. Las carpetas y directorios en los que se ubica el recurso específico dentro del computador servidor (que brinda la información).

# data[].attributes.body
Un hosting es un servicio de alojamiento para páginas web bajo un servidor. Nos permite publicar un sitio web en Internet. El hosting tiene como función alojar tu página web para que cualquier persona pueda visitarla, además de ofrecer también la posibilidad de gestionar un correo electrónico.

TIPOS

Hosting compartido: Un mismo servidor físico contiene las páginas web o cuentas de hosting de un numero determinado de usuarios.

Hosting VPS: En este tipo de hosting los sitios web alojados pueden compartir un mismo servidor, pero a diferencia del hosting compartido, en el hosting VPS los sitios no comparten los recursos del servidor.

Hosting elástico: El hosting elástico es un tipo de alojamiento que cuenta con las ventajas de un hosting compartido y además las de un hosting VPS.

Hosting Cloud:  Se trata de un tipo de alojamiento que almacena la información de la página web en varios servidores trabajando de forma conjunta y conectados a una misma red.

Servidor dedicado: Este tipo de hosting web ofrece un servidor dedicado para cada cliente.

# data[].attributes.body
Facilita la accesibilidad para el usuario, haciéndolo práctico, intuitivo y agradable.

# data[].attributes.body
El encabezado (también conocido por su nombre en inglés, header) es la parte superior de una página web.

# data[].attributes.body
El menú de navegación es uno de los elementos esenciales en una página web, ya que ayuda a que cualquier visitante pueda explorarla completamente.

# data[].attributes.body
Son aquellos atajos con los que ayudas a tus visitantes a realizar las acciones que deseas, por ejemplo: pedir informes, conocer más acerca de tu producto, descargar una guía, entre otros.

# data[].attributes.body
La imagen destacada o hero section es la zona que está debajo del encabezado; prácticamente están conectadas.

# data[].attributes.body
Ayuda a los usuarios a encontrar lo que necesitan.

# data[].attributes.body
Ayudan a recabar información que sea útil para futuras actualizaciones de la página web.

# data[].attributes.body
Es una herramienta para atraer la atención de los clientes e informarles de manera rápida y dinámica un tema en específico

# data[].attributes.body
Representa el logotipo de la marca.

# data[].attributes.body
En esta sección se incluyen datos que proporcionen más información al visitante acerca de tu negocio

# data[].attributes.body
El pie de página es el elemento final de una página web (y es ahí donde suele aparecer la información de contacto). En este espacio pueden concentrarse diferentes datos útiles, como los enlaces.

# data[].attributes.body
Los estándares Web para el diseño son unas especificaciones/recomendaciones realizadas por el World Wide Web Consortium (W3C) para asegurarse que los diseñadores/desarrolladores Web y los fabricantes de navegadores utilizan el mismo lenguaje tecnológico.

# data[].attributes.body
- HTML (HyperText Markup Language), define la estructura de los documentos.                                                                              - XML (eXtensible Markup Language), sirve de base para un gran número de tecnologías.
- CSS (Cascading Style Sheets), permite asignar estilos.          -Javascript, permite el dinamismo y funcionalidad.

# data[].attributes.body
Para crear una página web se necesita un documento HTML utilizando tres elementos o tags principales que cualquier sitio Web usa: html, head y body.

# data[].attributes.body
<html>: Envuelve todo el contenido de la página (excepto la DTD)                                                   <head>: Encabezado.Puede incluir información opcional sobre la página Web (titulo,palabras clave de búsqueda opcionales y una hoja de estilo opcional).                                   <body>: Alberga lo que queremos que aparezca en el área de navegación del navegador..

# data[].attributes.body
Es una palabra o frase con que se le da nombre al tema o materia que se desarrollará.

# data[].attributes.body
El párrafo es la mínima unidad de redacción que explica y desarrolla el significado de una idea. Un párrafo generalmente, tiene diversas oraciones, todas ellas contienen la misma palabra clave o idea clave que controla la información en el resto del párrafo.

# data[].attributes.body
Es la representación visual de un objeto, una persona, un animal o cualquier otra cosa plausible de ser captada por el ojo humano.

# data[].attributes.body
Un hipervínculo, es una conexión directa entre dos espacios virtuales en el mundo digital.Un hipervínculo, es una conexión directa entre dos espacios virtuales en el mundo digital

# data[].attributes.body
Es un sistema de grabación y reproducción de imágenes, que pueden estar acompañadas de sonidos y que se realiza a través de una cinta magnética.

# data[].attributes.body
La maquetación web es el proceso de planificar, organizar y definir las secciones de una web.

Es decir, asegurarse de que las imágenes, los videos, los textos  como todo lo que quieras añadir a una página web estén estructurados para definir una buena experiencia del usuario.

En la actualidad, la maquetación web va en punto más allá de la estética para definir la funcionalidad general de una página web, tomando en cuenta la arquitectura de la información.
Esto también incluye aplicaciones móviles y el diseño de interfaz de usuario.

# data[].attributes.attachment_link.readable_text
Las primeras webs surgieron en el año 1992. Se trataban de páginas estáticas, y que sólo podían ser accesibles para ser modificadas a través de código html. En estas webs primaban los colores, las imágenes. Se pretendía que fuesen vistosas, pero no se preocupaban por la usabilidad y la accesibilidad.

Muchas de esas páginas iniciales tenían música y animaciones que llegaban a resultar molestas. En el año 1997 aparece Flash como programa pionero en la creación de webs, y estas empiezan a desarrollarse con esta tecnología que se caracteriza por el aumento de animaciones, la lentitud de carga y las visitas escasas.

Desde el año 2002, los primeros blogs hacen su aparición, así como algunas redes sociales con éxito. También se empiezan a utilizar otro tipo de herramientas para la creación de páginas webs que ya no buscan ser tan vistosas sino ir mejorando la usabilidad de los usuarios.

Uno de los sistemas de gestión de contenidos (CMS) más utilizados es WordPress. Los usuarios buscan una mejora en el copywriting, en la usabilidad, y en evitar animaciones tediosas que impidan que la web ralentice.

Estas son las más características:

Página web estática: Se tratan de páginas en las que no se puede cambiar el contenido. Aparece una información permanente, y el usuario no puede interactuar.

Página web dinámica: Los usuarios pueden crear y colaborar en el contenido. Suponen todo lo contrario a las anteriores. En estas podemos destacar: blogs, foros, tiendas online...

Blogs: Se tratan de portales donde un autor suele publicar artículos informativos relacionados con una temática en concreto. Los blogs son muy populares en la actualidad ya que sirven para aportar valor a la audiencia y demostrar la especialización de los profesionales que los escriben.

Tiendas online: Se trata de páginas orientadas a la compra-venta de objetos. Muchas plataformas físicas han descubierto el potencial de internet y gestionan sus propias tiendas online para que se puedan comprar productos desde cualquier parte del mundo.

Buscadores: Son páginas para que los usuarios puedan buscar contenido de interés sobre un tema en concreto.

Desde principios del siglo XXI, las páginas webs se han convertido en una auténtica revolución. Si cuando surgieron en 1992 era pocos los negocios que disponían de ellas, conforme han pasado los años la mayoría de empresas tienen páginas corporativas para mostrar sus productos y servicios.

En ellas llegan a ofrecer incluso ventas de estos servicios, y añaden un blog para demostrar lo especialistas que son en determinadas materias. Consecuentemente, intentan que los potenciales clientes reparen en su buen hacer para aumentar sus ventas.

Las páginas webs, junto con las redes sociales son un gran escaparate para las marcas y sus productos.

# data[].attributes.attachment_link.title
Página web - Definición, qué es y concepto | Economipedia

# data[].attributes.attachment_link.description
Una página web es un documento accesible desde cualquier navegador con acceso a internet, y que puede incluir audio, vídeo, texto y sus diferentes combinaciones. Las primeras webs surgieron en el año 1992. Se trataban de páginas estáticas, y que sólo podían ser accesibles para ser modificadas a través de código html.

# data[].attributes.headline
Perez Valerio (2022). "¿Qué es la maquetación de una página web?". Documento en línea recuperado de: 

# data[].attributes.subject
Perez Valerio (2022). "¿Qué es la maquetación de una página web?". Documento en línea recuperado de: 

# data[].attributes.attachment_link.readable_text
La maquetación web es el proceso de planificar, organizar y definir las secciones de una web.

Es decir, asegurarse de que las imágenes, los videos, los textos como todo lo que quieras añadir a una página web estén estructurados para definir una buena Experiencia de usuario .

En la actualidad, la maquetación web va en punto más allá de la estética para definir la funcionalidad general de una página web, tomando en cuenta la arquitectura de la información.
Esto también incluye aplicaciones móviles y el diseño de interfaz de usuario.

¿La importancia de la maquetación web?

Una maquetación con buena arquitectura puede mantener a los usuarios en el sitio web esto se debe a tener definidas las secciones para que el usuario pueda receptar la información fácilmente e intuitiva. Recordemos que un mal diseño que no está bien definido puede hacer que los usuario abandonen la página web por qué es difícil encontrar información.

¿Qué pasa si te comentamos que un buen diseño y maquetación web pueden hacer que los usuario se queden por más tiempo? Así es, hay una conexión entre la maquetación web y la participación de los usuarios en un sitio web.

Podemos definir una buena página web por el tráfico orgánico que se genera al saber cuántos usuarios se quedan en el sitio web, el número de visitas y con qué frecuencia es visitado. ¡Ese es el alcance de una maquetación web!
Quieres conocer cómo medir tus estadísticas de tu sitio web te recomiendo el sig. blog,Herramientas para medir el rendimiento de tu web .

Ya que hablamos de manera general sobre la importancia de la maquetación web, continuemos en conocer los tipos de maquetación web.

Tipos de maquetación web

En la actualidad con tantos lenguajes de programación, es probable que no conozcas los tipos de maquetación web que se puede usar en una página web.

Maquetación web fija

Se considera como una maquetación más flexible al momento de diseñar una página web, nos permite ver cómo aparecerá el sitio web online en múltiples navegadores.

Se puede decir que se ha vuelto popular entre sitios web que prefieren la previsualización sobre la optimización del diseño.

Maquetación web elástica

Es uno de los tipos de maquetación web más utilizados para definir secciones de diseño y estructuras de los elementos de una página web, esto es debido a la forma en que se flexiona el contenido en una web para adaptarse al contenido, es decir que imágenes, textos etc. puedan verse adaptadas a la medida de tu pantalla.

Por tal motivo es muy aceptado dentro de la comunidad de diseño y maquetación por su capacidad para escalar contenido, tamaños de textos, imágenes etc.

Maquetación web escalado

Nos permite ajustar la orientación de una página web, en especial a dispositivos móviles.

Esto depende de la forma en que se sostenga el dispositivo, está maquetación web tiene la dependencia de modificar la orientación visual (Cambiando los espacios que se definen en el contenido) podemos notarlo en los espacios de los costados se van haciendo más pequeño si el dispositivo es pequeño.

Antes no se hubiera pensado en la orientación de una página web, pero los tiempos han cambiado, los diseños de escalado en dispositivos móviles es una implementación que debe tener un sitio completo dando una buena experiencia de usuario.

Estructura de una maquetación web

Una forma de ver las secciones que componen un sitio web, y el seguimiento que tendrá al definirse son las estructuras que la componen, por ello es importante que se tenga claro aquella estructura que nos permita ejecutar la maquetación web.

Una página web tiene una estructura básica conformada por:

Conclusión

La maquetación es uno de los procesos que tienen que asegurarse de seguir el diseño elaborado para ello se tiene que componer de un buen equipo de desarrollador web .

El d iseñador UI/UX se encarga de diseñar las secciones, vistas, contenidos, posición de textos etc. para luego ser encargado por el Frontend Developer para empezar a maquetar, siguiendo los puntos que se ha comentado sobre los tipos de maquetación adaptación de dispositivos, secciones de contenido, flexibilidad en los navegadores etc.

En la actualidad es indispensable tener un buen diseño adaptado a la información que se requiera, ya sea un sitio de ventas online, carros, servicios etc. Tiene que tener una vista agradable e información precisa para el usuario y no tenga que perderse en secciones, además de contar con adaptabilidad en cualquier dispositivo ya sea en laptops como teléfonos.

# data[].attributes.attachment_link.title
¿Qué es la maquetación de una página web?

# data[].attributes.attachment_link.description
La maquetación web es el proceso de planificar, organizar y definir las secciones de una web. Es decir, asegurarse de que las imágenes, los videos, los textos como todo lo que quieras añadir a una página web estén estructurados para definir una buena Experiencia de usuario .

# data[].attributes.headline
Pérez Porto, J., Merino, M. (9 de marzo de 2010). Definición de título - Qué es, Significado y Concepto. Definicion.de. Última actualización el 9 de enero de 2023. Recuperado el 20 de febrero de 2023 de:

# data[].attributes.subject
Pérez Porto, J., Merino, M. (9 de marzo de 2010). Definición de título - Qué es, Significado y Concepto. Definicion.de. Última actualización el 9 de enero de 2023. Recuperado el 20 de febrero de 2023 de:

# data[].attributes.attachment_link.readable_text
Del latín titŭlus, un título es un término o una expresión que comunica la denominación o la temática de una obra, ya sea un libro, un disco, una película, etc. Por ejemplo: ""El símbolo perdido" es el título de la última novela de Dan Brown", "El artista trabaja en un nuevo disco del que aún no se conoce su título", "El título del programa televisivo tuvo que ser modificado tras una acusación de plagio".

En materia cinematográfica podemos matizar que, además de ese título que es el que da "nombre" a la película en sí, también existen lo que se conocen como títulos de crédito. Este término viene a expresarse la lista o relación de todas las personas que han trabajado en la realización de la misma. Es habitual que aquella aparezca en pantalla una vez ha finalizado el metraje.

El título como reconocimiento

Un título también es el reconocimiento o el aval dado a una persona por sus conocimientos, su ascendencia u otra particularidad. El título académico es otorgado por una entidad educativa tras completar con éxito una carrera o curso: "Mi padre tiene el título de Abogado", "Mi sueño es conseguir el título en Psicología y ejercer en un barrio pobre para ayudar a la gente".

De esta manera, podemos determinar y enlazar otro significado que posee el término que estamos abordando. Y es que en concreto aquel se utiliza para referirse a todo aquel documento o instrumento que acredita que una persona en concreto está capacitada para poder desempeñar un puesto de trabajo o una profesión.

Un título nobiliario, en cambio, es una distinción legal que se entrega a los nobles. En la Edad Media, estos títulos representaban la esencia de la estructura social y política, mientras que actualmente sólo se mantienen con fines simbólicos. Gran Bretaña, España, Dinamarca, Mónaco y Suecia son algunos de los países que reconocen títulos nobiliarios.

Puede servirte: Ascendencia

Ver también: Google

Sigue en: Copa

# data[].attributes.attachment_link.description
Del latín titŭlus, un título es un término o una expresión que comunica la denominación o la temática de una obra, ya sea un libro, un disco, una película, etc.

# data[].attributes.attachment_link.readable_text
Los sitios web son espacios virtuales que contienen toda la información que una persona o empresa quiere difundir a través de internet. Se componen, a su vez, de páginas que suelen estar enlazadas a un menú general y su contenido aborda tópicos relacionados al tema central que el creador del sitio desea comunicar.
A partir de esta definición tan general es posible catalogar distintos tipos de sitios web. En este artículo encontrarás la descripción y algunos ejemplos de cada uno para que conozcas las opciones a tu disposición y, si así lo deseas, crear tu propio sitio web paso a paso. ¡Comencemos! 💻

¿Qué es un sitio web?

Un sitio web es un espacio virtual que contiene toda la información que una persona o empresa quiere difundir a través de internet.

Los sitios web están compuestos por páginas que suelen estar enlazadas a un menú general y su contenido gira en torno a un tema central.

Google, El Universal, Instagram y la página del SAT son ejemplos de sitios web que visitamos frecuentemente.

Ahora bien, si nos detenemos a pensar en el contenido de cada uno y la razón por la que los navegamos, podemos concluir que las páginas web pueden ser buscadores, portales de noticias, redes sociales y sitios institucionales.

Hasta ahora, todo parece bastante claro, pero ¿por qué a esos sitios los llamamos páginas web?, ¿hay alguna diferencia? Técnicamente sí, veámoslo a detalle.

¿Cuál es la diferencia entre un sitio web y una página web?

Una página web es un documento electrónico donde podemos encontrar texto, videos, imágenes, entre otros elementos audiovisuales, mientras que un sitio web es la colección de esas páginas relacionadas entre sí.

Entonces, mientras lees este contenido estás accediendo a la página web con la siguiente URL: www.tiendanube.com/blog/mx/sitios-web y, a su vez, esta página pertenece al sitio web llamado www.tiendanube.com/blog/mx/

Si sigues navegando en el sitio web del blog de Tiendanube, vas a encontrar otras páginas como la home o la Guía para vender por Instagram.

Como ves, hay una diferencia técnica, sin embargo, en la cotidianidad solemos referirnos al sitio web y a la página web como sinónimos.

¿Aún tienes dudas? Aprende más sobre para qué sirve una página web y cómo te puede ayudar dando clic en el enlace.

Tipos de sitios web

Existen distintos tipos de sitios web que podemos encontrar en internet. A continuación describiremos los más conocidos:

1. Institucionales

2. Portales de noticias

3. Buscadores

4. Redes sociales

5. Tiendas online

6. Marketplaces

7. Blogs

8. Foros

9. Micrositios

10. Portafolios

11. Landing pages

1. Institucionales

Son aquellos que s e crean alrededor de una marca o una institución pública o privada. Contienen información sobre su estructura, misión, visión, valores, servicios y formas de contacto.

Ejemplo de sitio web institucional

Este es el sitio institucional de Tiendanube, la plataforma de ecommerce líder en Latinoamérica. Entre otras cosas, la web contiene información sobre el servicio que presta la empresa (funcionalidades, precios de los planes, etc.), sus beneficios y quiénes conforman el equipo.

2. Portales de noticias

Se caracterizan por difundir las novedades más importantes de una ciudad, un país o el mundo en tiempo real. También podemos encontrar reportajes periodísticos con información relevante, indistintamente del momento en el que ocurrieron.

La estructura de los portales de noticias va a depender de los tópicos que aborde el medio de comunicación. En ese sentido, esta clase de páginas pueden tener secciones sobre economía, deportes, farándula, política, tecnología, entre otras.

Ejemplo de portal de noticias

BBC Mundo es un portal de noticias que pertenece a la Corporación Británica de Radiodifusión. Cuenta con una red de más de 250 corresponsales en territorio británico y en más de 100 ciudades capitales del mundo.

Además de artículos periodísticos, este sitio web de noticias se caracteriza por difundir una gran cantidad de videos.

3. Buscadores

Son poderosas herramientas para navegar en internet, ya que nos ayudan a encontrar términos o palabras clave en cuestión de segundos. Su estructura suele ser bastante simple: un rectángulo en blanco con una lupa a la izquierda.

Ejemplo de buscadores

Google es el sitio web más visitado y el buscador más usado en el mundo: posee el 92% de las búsquedas que se realizan en internet. ¿Te imaginas de qué volumen estamos hablando? 5,600 millones de búsquedas al día, según datos de Hubspot.

4. Redes sociales

Las redes sociales son lugares donde interactúan personas y marcas que tienen algún tipo de vínculo comercial, laboral o personal. Estas plataformas permiten a los individuos participar de una o varias comunidades.

La estructura de estas páginas varía en función del objetivo de cada red social: por ejemplo, en TikTok vemos 100% videos, mientras que en Twitter predomina el texto y la imagen. Aunque nunca hay que dejar fuera las canciones de TikTok, pues también son parte de dicha mezcla de contenido.

Ejemplo de redes sociales

Facebook es la red social más usada en el mundo: cuenta con más de 2,895 millones de usuarios y es elegida sobre todo por los llamados millennials y la generación X.

💡¿Sabías que puedes crear una página en Facebook para vender? Dale clic al enlace para saber cómo hacerlo en cinco pasos fáciles. 😉

5. Tiendas online

También son conocidos como ecommerce o páginas web de venta online. Tienen como objetivo vender en internet y generar ganancias a sus propietarios.

Se componen de un carrito de compras y fichas de productos o servicios, que hacen posible la transacción comercial. Asimismo, requieren de integraciones con medios de pago y de envío para ofrecer una experiencia de compra completa.

Ejemplo de tienda online

MelónLimón es una marca de ropa mexicana creada en el 2012 que se dedica a la venta de productos para la playa. En su tienda puedes encontrar diseños increíbles de trajes de baño, accesorios, pareos y mucho más.

💡 Tip: si como MelónLimón estás buscando inspiración para tu propia página web, checa estos veinte ejemplos de tiendas en línea creadas con Tiendanube. ¡Te encantarán! 💙

6. Marketplaces

Un marketplace es un sitio web que conecta a compradores con vendedores. Se suele gestionar a través de un tercero y sirve como plataforma de difusión para miles de negocios y vendedores particulares.

En términos generales, es como un gran shopping o centro comercial en el que puedes encontrar diversas marcas, productos y precios.

Ejemplo de marketplace

Mercado Libre nació en Argentina en 1999 y supo posicionarse al grado de ser uno de los marketplace más valiosos en Latinoamérica.

En este tipo de sitio web las personas escriben el nombre del producto o servicio en el buscador y aparecen múltiples opciones de diversos vendedores. En esta estructura, los filtros (como ciudad y rango de precio) son protagonistas.

7. Blogs

La creación de los blogs se remonta a la década de 1990. Inicialmente estos portales se usaban para compartir los pensamientos, sentimientos, opiniones o experiencias de las personas.

Hoy en día, aunque hay blogs que conservan ese espíritu inicial, las marcas lo utilizan para difundir información relacionada con su negocio con fines comerciales.

Ejemplo de blog

El blog de Tiendanube tiene como objetivo informar a la comunidad emprendedora sobre las novedades en ecommerce y marketing digital. Para ello, se distribuyen los contenidos en diversas secciones, tales como Negocio, Tienda Online, Marketing Digital y mucho más.

8. Foros

Si quieres conectarte con profesionales de tu rubro, debatir un problema que tienes con tu pareja o incluso leer las opiniones de otras personas acerca de un tema en particular, un foro es el sitio web ideal.

Estos espacios son una buena opción para compartir tu conocimiento, porque este se construye de manera colaborativa y se puede actualizar en cualquier momento.

Ejemplo de foro

Reddit es un gran repositorio de conocimiento, memes y debates con personas de cualquier parte del mundo. Puedes crear salas para que sus participantes hablen de un tema asignado y los usuarios son los que añaden el contenido.

9. Micrositios

Son páginas dedicadas a profundizar sobre un tema concreto de una empresa o una organización. Se crean de forma independiente a la web principal porque, por lo general, la cantidad y especificidad de la información así lo demanda.

Ejemplo de micrositios

¿Recuerdas el incidente de la Línea 12 del Metro en la Ciudad de México? El portal del Metro lanzó un micrositio específico para hablar sobre cuestiones relacionadas al evento. En este tipo de sitio web puedes encontrar detalles sobre los peritajes, la rehabilitación y el reforzamiento de la Línea, así como información sobre atención a las víctimas del accidente.

10. Portafolios

Son páginas ideales para mostrar el trabajo que realiza un profesional. Es una especie de currículum presentado de una forma más atractiva y completa.

Ejemplo de portafolio

En la imagen se muestra el portafolio de Flavia Zorrilla, una ilustradora mexicana que decidió presentar sus trabajos en este formato.

La artista aprovecha el sitio web para compartir una sección con información personal y una página de contacto para captar nuevos clientes interesados en su trabajo o en su curso de Domestika.

11. Landing pages

Las landing pages o páginas de destino tienen como objetivo llevar a los usuarios a la conversión, ya sea que se registren en un formulario, realicen una compra o se suscriban a un newsletter.

Son utilizadas comúnmente en las campañas de publicidad online y se caracterizan por la austeridad de elementos, así como la nula presencia de enlaces o puntos de fuga, ya que pueden provocar la distracción y la salida de los usuarios de la landing page.

Ejemplo de landing page

Esta landing page especial para emprendedores que desean comenzar su negocio de dropshipping contiene la información específica sobre las ventajas de iniciar una empresa con este modelo en particular, así como opiniones de usuarios y preguntas frecuentes que podría tener un usuario que desea iniciar su emprendimiento en Tiendanube.

¿Necesitas más inspiración? Dando clic en el siguiente enlace encontrarás más ejemplos de páginas web sencillas, únicas y geniales.

Cómo crear un sitio web

Luego de repasar los tipos de sitios web más conocidos, hablemos sobre cuáles son los 7 pasos que tienes que seguir para crear el tuyo.

1. Establecer el propósito de tu sitio

2. Obtener un dominio

3. Contar con un hosting

4. Elegir una plataforma

5. Definir una estructura

6. Crear el contenido

7. Publicar y monitorear

Permíteme ahondar sobre cada uno de estos puntos a continuación.

1. Establecer el propósito de tu sitio

Es decir, definir si va a ser un espacio virtual informativo, comercial, institucional o una mezcla de varios.

2. Obtener un dominio

Se refiere al nombre a través del cual tus potenciales clientes accederán a tu sitio. Concretamente, es la URL que ingresarás en el navegador. Acá te contamos todo lo que debes saber sobre tener un dominio propio.

3. Contar con un hosting

Es el lugar donde se aloja tu página web. Lee más detalles sobre qué es un hosting.

4. Elegir una plataforma

La elección va a depender de tu nivel de conocimientos técnicos, así como de tus recursos de tiempo y dinero. Más adelante te compartimos algunas opciones.

5. Definir una estructura

Esto quiere decir que tienes que establecer cuáles van a ser las páginas principales de tu sitio web: Inicio, Quiénes Somos, Contacto, Preguntas Frecuentes, etc.

6. Crear el contenido

Si quieres hacer un blog, tienes que escribir los primeros artículos que vas a publicar. Si se trata de un sitio institucional, es elemental crear una página que hable de la historia de tu empresa y, si es una tienda online, te recomendamos redactar excelentes descripciones de tus productos.

7. Publicar y monitorear

Luego de divulgar tu sitio web, deberás de revisar constantemente las estadísticas para identificar puntos de mejora y hacer los ajustes necesarios para aumentar el tráfico. Aquí te contamos más sobre cómo lograrlo.

💡 Tip: si aún te quedan dudas sobre cada paso, en esta guía para crear una página web puedes encontrar más información sobre cada punto y cómo hacerlo como todo un experto. ¡Guárdala en tus favoritos!

¿Es posible crear un sitio web gratis?

¡Sí se puede! Existen opciones para crear un sitio web gratis como Tiendanube que te ofrece un periodo de prueba gratis para crear una tienda online y empezar a vender por internet. También WordPress tiene una versión gratuita si quieres hacer un blog o una página institucional.

También existe la opción de hacer un desarrollo propio, pero esta alternativa solo es viable si tienes conocimientos técnicos necesarios para programar un sitio web. 🤔

Indistintamente de la alternativa que elijas, es fundamental que contemples el tiempo que vas a invertir, pues ese también es un recurso a considerar.

3 plataformas para crear sitios web increíbles

Dependiendo del tipo de sitio web que quieras crear, puedes usar alguna de estas opciones:

Es una plataforma de ecommerce diseñada para crear tiendas online a través de las cuales es posible vender productos y servicios por internet. Entre las ventajas de Tiendanube podemos mencionar que:

Es fácil de configurar, no necesitas tener conocimientos técnicos avanzados.

Puedes iniciar con una prueba gratis.

Es posible integrar distintos métodos de pago y envío.

Permite vender a todo el país ¡y de manera internacional!

Te permite integrarla a Instagram y Facebook y vender a través de redes sociales.

Brinda un excelente soporte a sus clientes.

En este video puedes ver cómo puedes crearla muy fácilmente en cinco pasos. ¡Échale un vistazo!

WordPress

Es un sistema de gestión de contenidos web (CMS o content management system), ideal para crear blogs o páginas institucionales. Algunas ventajas de usar WordPress son:

Es una plataforma intuitiva y fácil de usar.

Se puede personalizar con plugins.

Está preparado para SEO, es decir, para que motores de búsqueda como Google lo indexen correctamente y lo tomen en cuenta en el posicionamiento.

💡 Tip: si quieres crear un sitio web confiable te sugiero que profundices sobre los elementos que deberás tomar en cuenta para lograrlo. Aquí puedes encontrar más información sobre este tema.

Behance

Es una plataforma de Adobe que sirve para exhibir trabajos creativos o portafolios. Entre sus principales ventajas podemos destacar lo siguiente:

Es gratuita.

Puedes conectarte con miles de colegas y crear tu propia comunidad.

Cuenta con una sección de empleos a los que te puedes postular.

Si tu plan es crear un sitio web en este 2023, esperamos que esta guía te haya ayudado a dar el primer paso.

En caso de que tu proyecto sea vender online, recuerda que puedes probar Tiendanube gratis para conocer la plataforma y profesionalizar tu marca. ¡Muéstrale al mundo lo que eres capaz de hacer!

# data[].attributes.attachment_link.title
Sitios web: tipos, ejemplos y cómo crearlos fácilmente

# data[].attributes.attachment_link.description
Los sitios web son espacios virtuales que contienen toda la información que una persona o empresa quiere difundir a través de internet. Se componen, a su vez, de páginas que suelen estar enlazadas a un menú general y su contenido aborda tópicos relacionados al tema central que el creador del sitio desea comunicar.

# data[].attributes.attachment_link.readable_text
gTLD: Dominio de nivel superior genérico

Los gTLDs son los dominios de nivel superior genéricos, y en este grupo podemos encontrar las extensiones más conocidas y comunes que se pueden registrar como .com, .net, .org, etc.

Las extensiones de los gTLDs en sus inicios iban dirigidas a la creación de un tipo de web en concreto, por ejemplo los .org para organizaciones, .net para empresas tecnológicas, o los .edu para organizaciones educacionales. Esta orientación hoy día tiene un carácter más anecdótico, ya que se ha generalizado el uso de extensiones como .com para todo tipo de proyectos y solo en algunos casos se mantiene la relación entre la extensión y su objetivo original.

En 2011 la ICANN comenzó a permitir nuevas extensiones de dominio con las que, por ejemplo, ciertas empresas y organizaciones consiguieron su propia extensión de dominio como .google, .oracle, .abogado, .academy, etc.

También se crearon nuevos gTLDs dirigidos a zonas geográficas muy específicas (GeoTLD) como .paris, .berlin, o .barcelona; o a sectores específicos como .shop o .online.

# data[].attributes.attachment_link.title
¿Qué es un Dominio y cómo funciona? - Webempresa

# data[].attributes.attachment_link.description
Los gTLDs son los dominios de nivel superior genéricos, y en este grupo podemos encontrar las extensiones más conocidas y comunes que se pueden registrar como .com, .net, .org, etc. Las extensiones de los gTLDs en sus inicios iban dirigidas a la creación de un tipo de web en concreto, por ejemplo los .org para organizaciones, .net para empresas tecnológicas, o los .edu para organizaciones educacionales.

# data[].attributes.attachment_link.readable_text
El mundo del diseño web es realmente extenso, y conocer cada mínimo detalle conlleva tiempo. Si vas a construir un sitio web desde cero por ti mismo o planeas pedirle a un profesional que lo haga, conocer lo básico te permitirá tener una comunicación efectiva y analizar la eficacia del producto final.

Por eso, lo primero es conocer los elementos de una página web. Si sabes lo que no puede faltar en una, el resto será más sencillo.

10 elementos de una página web

1. Encabezado

2. Menú de navegación

3. CTA

4. Imagen destacada

5. Buscador

6. Formulario

7. Video

8. Icono de URL

9. Información de contacto

10. Pie de página

1. Encabezado

El encabezado (también conocido como reader por su nombre en inglés) es la parte superior de una página web. Es una de las áreas más importantes, pues es lo primero que un usuario ve al visitar tu sitio. Por ello los elementos que lo componen deben pensarse bien.

En primer lugar, el encabezado de una página web debe brindar a simple vista la forma de navegar y un resumen muy rápido de quién es tu marca y su identidad. No olvides incluir los siguientes elementos:

Logotipo de tu marca

CTA, que puede variar en intención, por ejemplo:

Para conocer más sobre un producto

Para ir a la versión de prueba de un producto

Para dirigir al carrito de compras

Menú (con sus respectivas categorías)

Enlaces a redes sociales

Algunas herramientas en línea te pueden ayudar a definir una identidad gráfica para tu marca, así como a crear un logotipo para tu sitio web. No olvides la importancia que tiene crear una imagen empresarial fácil de recordar.

Considera que estos elementos deben distribuirse eficazmente. Determina cuáles brindarían una mejor presentación, con el propósito de que los visitantes cumplan los objetivos que esperas. Recuerda que tu sitio web tiene una intención y tú debes ayudar a los usuarios a comprenderla.

Ejemplo de encabezado como elemento de una página web
Imagen de ADO
Como puedes ver, la distribución del encabezado de esta empresa de transportes está muy bien diseñada. Por ejemplo, si el usuario necesita orientación acerca de sus viajes, tiene a la mano la sección de ayuda. Si lo que desea es entrar en su cuenta, aparece la opción destacada; también puede ver las promociones disponibles, los lugares desde donde salen los autobuses y el historial de viajes. Es bastante información, pero no se ve saturada.

2. Menú de navegación

El menú de navegación es uno de los elementos esenciales en una página web, ya que su intención es que cualquier visitante pueda explorarla completamente. Cuanto más fácil y rápido de leer sea el menú, mejor experiencia tendrá el usuario. Además, este detalle permite que los motores de búsqueda lo comprendan rápidamente, lo cual mejora el SEO de tu sitio.

En cuanto al diseño, te recomendamos que tu menú navegación se mantenga en una sola línea, para que sea más rápido su entendimiento. Lo ideal es que mantengas entre 3 o 6 opciones máximo para no perder la atención del usuario. Prioriza qué opciones serían las más importantes para quien te visite.

Procura usar palabras precisas y breves para tu menú. Por ejemplo, que en lugar de decir "Nuestros servicios" solo diga "Servicios", etc. Así, usas el espacio de la línea de manera más estratégica. Si requieres ser más específico apóyate en los menús desplegables, los cuales te ayudarán a incluir más opciones.

Adicionalmente, es importante tener en cuenta que el único caso donde no debes poner un menú de navegación es en una landing page, pues el objetivo es que tus usuarios no abandonen tu landing y se queden navegando en el sitio y, posteriormente, se conviertan en clientes.

Ejemplo de menú como elemento de una página web

Como puedes ver, este menú es bastante sencillo, pero cuenta con los elementos más importantes para que el usuario pueda informarse más acerca del producto que le interesa. Si quisiera ver en detalle qué productos o soluciones ofrece Monday, tan solo tienes que desplegar el menú y encontrar la opción deseada:
Imágenes de Monday
3. CTA

Las llamadas a la acción, conocidas como "CTA" por sus siglas en inglés, son un elemento que no pueden faltar en tu página web. Son aquellos atajos con los que ayudas a tus visitantes a realizar las acciones que deseas, por ejemplo: pedir informes, conocer más acerca de tu producto, descargar una guía, entre otros.

Lo mejor de este elemento es que puedes usarlo de varias maneras y con diferentes intenciones. Incluso hay CTA bastante creativos. La idea es que estas frases cortas le indiquen al usuario que al dar clic recibirán o verán algo a cambio. Para generar un CTA más efectivo ten en cuenta lo siguiente:

Texto conciso. No importa que tu CTA sea más largo de lo normal siempre y cuando dé una orden clara, por ejemplo: "Comienza una prueba gratuita" o "Descarga nuestra guía de diseño y programación web". El punto es que quien lo lea sepa hacia dónde será dirigido.

Ubicación. El CTA es un elemento pequeño que bien podría colocarse en cualquier parte de tu página web, pero hay ubicaciones estratégicas que los hacen poseer mayor sentido: pueden estar al final de un texto o de cada bloque de tu página. También es una buena idea colocarlos en el encabezado en caso de que requieras que las personas te contacten fácilmente.

Diseño. El CTA puede parecer inofensivo, pero su poder es inmenso. Por lo tanto, asegúrate de que tenga un tamaño y color adecuados. No olvides optimizarlo para que sea visible y funcional en cualquier dispositivo móvil y para que conserve la paleta o rueda de colores de tu marca.

Ejemplo de CTA como elemento de una página web
Imagen de Fermatta
Como lo mencionamos, los CTA que conformen tu página web pueden ser tan simples o creativos como tú lo consideres. Fermatta, al ser una institución educativa, mantiene un CTA claro y simple que guía a sus visitantes a pedir más información sobre sus planes educativos.

4. Imagen destacada

La imagen destacada o hero section es la zona que está debajo del encabezado. Esto hace que prácticamente estén conectados. Mientras que el encabezado te brinda una información de contacto y navegación directa del sitio web, la imagen destacada complementa la vista con elementos altamente atractivos.

Esta parte de una página web se compone de los siguientes elementos:

Imágenes o videos atractivos

Texto que enganche al usuario

Podría decirse que esta zona de la página web debe ser muy llamativa para captar la atención al instante. Esto no significa sobrecargarla y poner fuegos artificiales para que los visitantes se cautiven; puedes hacer mucho con pocos elementos, siempre y cuando sean relevantes, y vayan de acuerdo con tu marca y el mensaje que quieres transmitir.

Ejemplos de imagen destacada como elemento de una página web
Imagen de Purina
Sin duda esta sección muestra lo que representa la marca: la unión, la familia y la importancia de mantener sanas a las mascotas. Cuenta justamente con los dos elementos que te compartimos anteriormente: un texto directo compuesto por tipografías diferentes, lo que crea un buen equilibrio y dinamismo, así como una imagen grande, atractiva y relevante del producto.

Como elemento adicional puedes agregar un CTA que redireccione a los usuarios a la intención que tengas planeada. Por ejemplo, si se tratara del sitio web de un software, podrías incluir en esta sección un CTA para descargar algunos recursos gratis o hacer una prueba gratuita.

Esta sección también puede contener un elemento de tipo slider donde, en lugar de una imagen estática, se presente una serie de imágenes en galería. Este elemento suele utilizarse en el diseño web actual, pues luce muy atractivo y ahorra espacio en la página principal.

Dentro del slider puedes incluir imágenes, texto y un CTA que te dirija hacia la sección presentada. Te compartimos un ejemplo:
Imagen de Papa Johns
La hero section de esta página web se compone por un slider, donde los usuarios pueden conocer un poco más de los servicios y novedades que ofrece esta cadena de comida rápida. Los puntos debajo de la imagen indican que hay más imágenes y los visitantes pueden usarlas para desplazarse. Además, el CTA invita a los usuarios a hacer su pedido en línea.

5. Buscador

El buscador es un elemento de una página web que muchas veces no recibe la importancia que merece. Algunos sitios web no cuentan con este recurso, lo que vuelve agobiante explorar los contenidos o buscar un tema en específico.

No le restes relevancia al buscador dentro de tu página web; en realidad, ayuda a tus visitantes a encontrar lo que necesitan. Este elemento brinda usabilidad y conveniencia, a la vez que logra retener a la persona que visita tu sitio.

El cuadro de búsqueda puede ser muy simple y añadirse en un lugar estratégico de tu página; por ejemplo, en el encabezado o en las columnas laterales. Según sea la intención de tu tipo de servicio, puedes crear un buscador más robusto, con opciones múltiples y un diseño más atractivo.

Ejemplos de buscador como elemento de una página web

Este elemento es muy útil, sobre todo en blogs, pues los usuarios pueden buscar fácilmente la categoría o tema en el cual están interesados. Por ejemplo, nosotros añadimos el buscador justamente en la sección de encabezado; de esta manera, puedes encontrar fácilmente un tema, entrada o recurso.

Este elemento puede ser tan robusto como tu servicio o producto lo demande. Por ejemplo, el buscador de Airbnb es una pieza clave para el servicio que ofrece; está compuesto por varias categorías esenciales para brindar un servicio más personalizado a los visitantes.
Imagen de Airbnb
6. Formulario

Estrategias como el inbound marketing nos han dejado en claro la importancia de contar con un formulario en una página web. Este recurso es un elemento clave para obtener más datos de los visitantes y comenzar una estrategia de conversión.

La ventaja de crear formularios online es que pueden ser tan extensos como tú lo desees, sobre todo si tu sector o industria requiere datos específicos para realizar una cotización o dar más información acerca de un servicio.

Ejemplo de formulario como elemento de una página web
Imagen de Mundi
El formulario de Mundi es bastante sencillo, lo cual facilita a los interesados dejar información esencial sin sentirse agobiados al tener que llenar miles de casillas.

Lo mejor de todo es que aparece al final de su sitio, por lo que no interrumpe la navegación del usuario y no tiene que redireccionarlo a una página diferente. También es específico y responde a las necesidades y deseos del usuario, ya que tienen la opción de elegir el tema por el que se ha puesto en contacto.

7. Video

Si bien un video no es un elemento obligatorio en una página web, sí se ha vuelto en una pieza esencial para aumentar tu retención. Los usuarios gastan un 88 % más de tiempo en una web que tiene contenido en video con respecto a una que no tiene.

Además, los videos se han convertido también en una buena herramienta para atraer la atención de los clientes e informarles de manera rápida y dinámica sobre un tema en específico o, incluso, decirles quién es tu marca.

Este elemento puede integrarse en cualquier parte de la estructura de tu página web. Muchas marcas han optado por incluirlo en la sección de imagen destacada o en la parte central. El video puede ser largo o corto; esto dependerá de lo que quieras mostrar.

Ejemplo de video como elemento de una página web
Imagen de Apple
En la página web de Apple puedes encontrar videos y animaciones de pantalla completa que se integran a la perfección al sitio para destacar las características de sus productos. Ese elemento por sí mismo contiene un CTA que invita a los usuarios a ver el video completo del proceso. Y es interactivo, ya que avanza conforme el usuario se desplaza dentro del sitio. Si el visitante hace clic en alguno de los elementos mostrados en el video, es redireccionado a una página donde puede consultar más sobre la funcionalidad o el producto.
Imagen de Apple
8. Icono de URL

El icono de URL, también conocido como favicon, es un elemento que brinda detalles de cualquier sitio web, refuerza la marca y permite a los usuarios tener una conexión visual más rápida. Este elemento aparece en el navegador y en la pestaña de marcador como un pequeño icono de la marca. Agregarlo contribuye a la usabilidad web.

Ejemplo de icono de URL como elemento de una página web
Imagen de Behance
El icono de URL de Behance es bastante efectivo, pues representa perfectamente el logotipo de la marca. Sus colores y forma se comprenden fácilmente y brindan un refuerzo visual fascinante. Si quieres replicar su estrategia, puedes crear un favicono ideal para tu sitio web con algunos simples pasos. Ten por seguro que esto hará que tu marca permanezca en la mente de tus visitantes.

9. Información de contacto

La información de contacto es un elemento que suele colocarse en la parte final, en el pie de página. En esta sección se incluyen datos que proporcionan más información al visitante acerca de tu negocio, por ejemplo: dirección, número de contacto, redes sociales o incluso un mapa con la ubicación exacta.

Este elemento es estratégico para aminorar las preguntas que pueda realizarte un usuario en caso de que quiera visitar tu sucursal física o explorar tus redes sociales. Puedes poner cuanta información consideres necesaria. Solo te recomendamos hacerlo de forma breve y explícita para evitar confundir al usuario.

Ejemplo de información de contacto como elemento de una página web
Imagen de Belmont Village
En esta página web puedes ver una información de contacto muy clara. Muestra los iconos de redes sociales e invita a los usuarios a conocer las instalaciones al facilitar la dirección y los números a los cuales pueden comunicarse.

10. Pie de página

El pie de página es el elemento final de una página web (y es ahí donde suele aparecer la información de contacto). En este espacio pueden concentrarse diferentes datos útiles, como los enlaces. Algunos de los elementos que más se incluyen en el pie de página son:

Nombre y logotipo de la marca

Enlaces a redes sociales

Enlace a página de soporte al usuario

Enlace a la página de preguntas frecuentes

Enlace a la página "Acerca de"

Términos y condiciones

Dirección de la empresa o mapa

Al igual que el encabezado, el pie de página debe contener información útil y no debe estar saturado ni ser complicada su navegación.

Ejemplo de pie de página como elemento de una página web
Imagen de Lilian Cázares
El pie de página del sitio web de Lilian Cázares, experta en marketing musical, contiene puntos estratégicos como un pequeño formulario de suscripción para que los visitantes interesados reciban más información del tema y enlaces a sus redes sociales, política de privacidad, términos y condiciones, y la política de cookies.

El pie de página es directo y fácil de explorar, y le otorga un gran cierre a su web.

Ahora que ya conoces los elementos de una página web, ¿estás listo para hacer la tuya? Recuerda que tanto el sitio web como las páginas que lo componen deben representar muy bien la esencia de tu marca y ser explícitos de lo que eres y ofreces.

Si no eres un experto en diseño web, ¡no te desesperes! El CMS de HubSpot te permite construir un sito web de manera fácil e intuitiva. Con sus plantillas predeterminadas, no olvidarás incluir ninguno de los elementos de una página web.

Entre sus características principales puedes encontrar: recomendaciones de SEO, temas para sitio web, CRM integrado, editor de arrastrar y soltar, pruebas adaptativas e informes de atribución de contactos. Así, podrás tener un sitio web funcional y listo para vender, sin tanto esfuerzo. Algo que se verá así:

Apóyate en CMS Hub para desarrollar un sitio web óptimo y eficiente que tus visitantes apreciarán.

# data[].attributes.attachment_link.title
Los 10 elementos de una página web eficaz

# data[].attributes.attachment_link.description
Conoce los elementos de una página web de la mano de nuestra explicación y ejemplos.

# data[].attributes.attachment_link.readable_text
Un documento web (o página web) es, como hemos apuntado en la introducción, un conjunto de tags HTML que se escriben en un editor de texto plano (sin formato) y se ejecutan en un navegador web.

Estructura básica de la primera página Web en HTML

Cómo crear una página Web

Para crear una página web se necesita un documento HTML utilizando tres elementos o tags principales que cualquier sitio Web usa: html, head y body.

Para crear un verdadero documento HTML comenzará con tres elementos contenedores:

Estos tres se combinan para describir la estructura básica de la página:

<html>: Este elemento envuelve todo el contenido de la página (excepto la DTD)

<head>: Este elemento designa la parte de encabezado del documento. Puede incluir información opcional sobre la página Web, como puede ser el título (el navegador lo muestra en la barra de título), palabras clave de búsqueda opcionales y una hoja de estilo opcional.

<body>: Este elemento alberga el contenido de su página Web, es decir, aquello que queremos que aparezca en el área de navegación del navegador..

Sólo hay una manera correcta de combinar estos tres elementos. He aquí su colocación exacta, con el doctype al comienzo de la página:

Toda página Web utiliza esta estructura básica. Los puntos suspensivos (...) muestran dónde insertaría la información adicional.

Una vez colocado el esqueleto XHTML, debe añadir dos conectores más a la mezcla.

Toda página Web requiere un elemento <title> en la sección del encabezado. A continuación, deberá crear un contenedor para el texto en la sección del cuerpo de texto (<body>).

Un elemento contenedor de texto multiuso es <p>, que representa un párrafo. Veamos con más detalle los elementos que hay que agregar:

<title>: Establece el título de la página Web, el cual tiene varias funciones. Primero, los navegadores lo muestran en la parte superior de la ventana. Segundo, cuando un visitante crea un marcador para la página, el navegador emplea el título para etiquetarlo en el menú Marcadores (o favoritos). tercero, cuando la página aparece en una búsqueda Web, el motor de búsqueda suele enseñar este título como primera línea en los resultados, seguido de un fragmento del contenido de la página.

<p>: Indica un párrafo. Los navegadores no los sangran pero añaden un pequeño espacio entre varios consecutivos para mantenerlos separados.

He aquí la página con estos dos nuevos ingredientes:

 <!DOCTYPE html> <html> <head> <title> Bienvenido a mi sitio Web </title> </head> <body> <p></p> </body> </html>

Si abre este documento en un navegador Web, verá que la página está vacía, pero ahora aparece el título.

Cuando un navegador muestra una página Web, el título se presenta en la parte superior de la ventana, con el texto al final. Si el suyo utiliza la navegación por pestañas, el título también aparece en ellas.

Tal y como está ahora, este documento HTML es una buena plantilla para futuras páginas. La estructura básica está en su lugar; simplemente necesita cambiar el título y añadir algo de texto.

Lo primero que tenemos que saber es que en toda página web existen dos partes claramente diferenciadas: la cabecera, o head, y el cuerpo, o body.

Vamos hacer es crear una carpeta, dentro de "Mis documentos", para almacenar los ficheros de prueba que vayamos a usar.

A esta carpeta la llamaremos pruebas-html en el resto de los ejercicios. Con la carpeta abierta, haga doble clic sobre el ícono que representa al bloc de notas.

Se le abrirá un documento en blanco.

Escriba el siguiente texto:

 <!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> </body> </html>

Cuando lo tenga escrito, guárdelo en la carpeta con el nombre plantilla.html.

Es vital que la extensión sea .html, ya que sólo por la extensión el sistema operativo reconoce este archivo como un documento web, y no como un simple y archivo de texto.

El nombre del archivo deberá escribirse como está, en minúsculas y sin espacios ni caracteres especiales.

Los únicos signos de puntuación admitidos son el punto (sólo uno), que lo usaremos para separar el nombre de la extensión y el guión bajo.

El nombre podrá contener letras y números, pero deberá empezar por una letra. Así mismo, nos abstendremos de meter en el nombre de un archivo letras acentuadas, eñes, cedillas, o cualquier otro carácter de algún alfabeto local.

Únicamente se admiten los caracteres del alfabeto internacional (ingles).

Observe los siguientes ejemplos:

página1.htm es incorrecto, pues tiene una letra acentuada.

Pagina 1.htm es incorrecto, pues tiene un espacio en blanco y una mayúscula

cañas.htm es incorrecto, pues tiene una eñe.

pagina/1.htm es incorrecto, pues tiene un carácter no permitido (la barra)

pagina1-htm es incorrecto, porque la extensión no está separada del nombre por un punto y porque emplea un carácter no permitido. (el guión normal).

pagina.1.htm es incorrecto, porque hay más de un punto. Sólo debe usarse uno, para separar el nombre de la extensión.

pagina1.htm es correcto

pagina_1.html es correcto

pagina-1.html es correcto

Puede que todas estas precauciones le parezcan excesivas ahora. La mayoría de ellas son realmente innecesarias en Windows, pero no olvide que está trabajando en la Red.

Los servidores web son mucho más sensibles a determinados aspectos del nombre de los ficheros que su máquina local.

Otra norma importante es que los archivos llevan una extensión, pero las carpetas en las que las guardamos no. Así pues, en el nombre de una carpeta nunca incluiremos puntos.

Una vez que haya guardado su código en su carpeta con el nombre adecuado, cierre el bloc de notas. En su carpeta, además del bloc de notas, verá el ícono que representa al archivo que acaba de grabar.

Observe que el ícono recuerda al de Explorer o Google Chrome (suponiendo que alguno de ellos sea su navegador por defecto).

Esto es así porque al haber guardado el fichero con la extensión .htm el sistema operativo reconoce este fichero como documento web (también llamado documento html).

Si graba incorrectamente la extensión, el ícono será diferente y no podrá usar su archivo como documento web.

Para ejecutar la página que acaba de crear, haga doble clic sobre el ícono. Automáticamente, se abrirá el navegador y se cargará la página. La ruta completa de acceso y el nombre del fichero aparecerán en la barra de dirección.

Ahora veamos en detalle cuál es el código de esta página que hemos creado y qué es lo que hace.

En primer lugar, encontramos el tag <html>. Este tag se emplea siempre para iniciar el código html.

Es la forma de decirle al navegador que en este punto empieza el código. Por esta razón se pone esta línea siempre como la primera del código.

No incluiremos ningún tag antes de este, con excepción del DOCTYPE. Por el contrario, al final del código tenemos el tag </html> , que le indica al navegador que el código finaliza en ese punto.

No deberemos incluir ningún tag ni nada más después de esta línea. Observe que el tag de finalización es igual al de inicio, pero incluyendo la barra inclinada al principio.

Dentro del código html encontraremos claramente diferenciados los dos bloques que mencionamos antes: el head (cabecera) y el body (cuerpo de la página).

Veamos el código de la cabecera:

 <!DOCTYPE html> <head> <title>Título de la página</title> </head>

Al igual que el código general, la cabecera tiene un principio indicado por <head> y un final indicado por </head>.

Todo lo que queramos incluir en la cabecera irá colocado entre estas dos líneas.

Como decíamos antes, en la cabecera incluiremos algunos datos generales de configuración de la página. En esta plantilla sólo hemos incluido el título de la página.

El título de la página se incluye entre los tags <title> y </title>, que indican, respectivamente, el comienzo y final de dicho título.

El título es un literal (una cadena de texto) que aparecerá en la barra de título del navegador en tiempo de ejecución (cuando se ejecute la página), tal como muestra el detalle de la figura siguiente:

Quiero recalcar que este título es solamente eso: un texto libre para que aparezca en la página y no tiene nada que ver con el nombre que le dimos al fichero.

Una vez completado el head, pasamos a la segunda sección de toda la página web: el body o cuerpo.

El body incluye, tal como lo mencionaba anteriormente, todo lo que queramos visualizar en el área de navegación.

Se inicia con el tag <body> y se finaliza con el tag </body>. Como vemos en el archivo que hemos creado, de momento no hemos incluido nada.

Por esta razón, al ejecutar la página, se ve el área de navegación vacía. Dentro del body iremos metiendo código e iremos visualizando los resultados.

Lo primero que vamos hacer es incluir texto en la página para que se muestre en el área de navegación.

Para ello, cierre el navegador y, dentro de la carpeta en la que está trabajando, arrastre el ícono de plantilla.html sobre el bloc de notas. De esta forma, se abrirá el bloc de notas y cargará el código fuente que había tecleado anteriormente.

En la zona del código reservada para body de la página entre las líneas <body> y </body> teclee lo siguiente:
Esto es una línea de texto.
Por lo tanto, su código quedará como sigue:

 <!DOCTYPE html> <html> <head> <title> Título de la página </title> </head> <body> Esto es una línea de texto </body> </html>

A continuación haga clic en el menú ARCHIVO y, dentro de éste, elija la opción GUARDAR COMO ... asegúrese de guardarlo en su carpeta.

Como nombre de fichero ponga texto-simple.html. Una vez guardado, cierre el bloc de notas y ejecute el fichero haciendo doble clic sobre su ícono.

El resultado en la pantalla será como el que se muestra:

Como ve para mostrar un texto en el área de navegación, basta con incluir dicho texto dentro del cuerpo de la página.

En el próximo artículo vamos a aprender muchas cosas acerca del texto: su presentación, su color, etc.

# data[].attributes.attachment_link.title
Estructura básica de una página Web - html, head y body

# data[].attributes.attachment_link.description
Un documento web (o página web) es, como hemos apuntado en la introducción, un conjunto de tags HTML que se escriben en un editor de texto plano (sin formato) y se ejecutan en un navegador web. Para crear una página web se necesita un documento HTML utilizando tres elementos o tags principales que cualquier sitio Web usa: html, head y body.

# data[].attributes.attachment_link.readable_text
Te explicamos qué es una URL, para qué sirve y cómo funciona. Además, las partes de una URL y sus características principales.

¿Qué es una URL?

Se conoce en informática como URL(siglas del inglés: Uniform Resource Locator, es decir, Localizador Uniforme de Recursos) a la secuencia estándar de caracteres que identifica y permite localizar y recuperar una información determinada en la Internet. Eso que escribimos en la casilla del navegador o explorador para visitar una página web determinada, comúnmente referido como "dirección", es justamente su URL.

Así como en la vida real cada casa o negocio tiene una dirección postal necesaria para enviarle algo por correo, en Internet cada recurso (imagen, video, texto, audio o página web) posee una dirección asociada, que es necesario tener para tener acceso a la información.

Por ende, cuando visitamos una página web, introducimos su dirección y la recibimos en el navegador. Pero dentro de ella, cada fotografía, texto o recurso de algún tipo tiene también una URL asociada, con la cual se lo puede recuperar para llevar a cabo el "ensamblado" de la página web como un todo.

Además, al hacer clic en un determinado hipervínculo, éste nos llevará a otra dirección URL, ya sea de una nueva página web o simplemente para ver en solitario alguno de los recursos de la anterior.

Por ejemplo, el buscador más popular en la web, " Google", responde a la URL https://www.google.com en general, pero sus versiones nacionales personalizadas poseen direcciones levemente distintas: https://www.google.com.ar (Argentina),
https://www.google.com.ve (Venezuela), https://www.google.com.br (Brasil).

Ver además: ISP

¿Para qué sirve una URL?

Como se ha dicho, una URL es una dirección específica dentro del océano informativo de la Internet. Sirve para localizar distintos datos e informaciones que son necesarios para la experiencia de navegación on-line, es decir, para construir las páginas Web y para brindar acceso puntual al usuario a cada cosa que desea visitar dentro de la red.

Así, introducir la URL de una imagen nos llevará a ella; la de un archivo específico nos llevará a descargarlo, y la de un programa on-line a ejecutarlo, todo dentro de las capacidades y especificaciones del explorador web que estemos utilizando para ello.

Características de una URL

Las direcciones URL tienen las presentas características:

Exactitud. Las URL deben escribirse con precisión para que arrojen el resultado esperado. Cualquier error en la cadena impedirá recobrar la información deseada.

Secuencia. Las URL son una secuencia de detalles ordenados, que deben introducirse en secuencia precisa, como una dirección postal.

Unicidad. Cada URL es única para un recurso o página de la Red, no existen dos iguales ni dos diferentes que conduzcan al mismo exacto elemento (aunque puede haber muchas versiones de un mismo elemento, supongamos, una fotografía, o puede haber muchas páginas usando una misma dirección URL para recuperarla).

Partes de una URL

Cada URL se compone de una secuencia de partes, que aluden a información específica sobre la ubicación del recurso, y que pueden verse por separado:

Protocolo de red. Http, Https, mailto y ftp son los principales protocolos web que encabezan una URL, indicando a la máquina qué tipo de conexión debe realizar y cuál es el lenguaje específico que se hablará con la computadora o la red de computadoras que brindarán la información al usuario.

Servicio. Www, www2, etc., se trata de los posibles servicios de soporte de información on-line, de los cuales la World Wide Web es la más popular.

Dominio, tipo de dominio y país. Se trata del "nombre" de la empresa que brinda la información, o del proyecto o red o la computadora en donde se encuentran, es decir, el nombre específico de quien tiene lo que buscamos; además el tipo de servicio que presta: comercial (.com), educativo (.edu), etc., y el país al que pertenece: Argentina (.ar), Brasil (.br), Italia (.it), etc.

Ruta y nombre del archivo. Las carpetas y directorios en los que se ubica el recurso específico dentro del computador servidor (que brinda la información).

Cronología URL - sitio web

La mayoría de los exploradores conservan una cronología o historial de las URL visitadas, como un registro de las direcciones a las que se acudió para solicitar información. Estos datos suelen ser sensibles y estar protegidos por mecanismos de seguridad, ya que intereses inescrupulosos en la red podrían acceder a ellos y recabar información personal sobre los hábitos de navegación del usuario, violando así su privacidad.

Última edición: 15 de julio de 2020. Cómo citar: "URL". Autor: María Estela Raffino. De: Argentina. Para: Concepto.de. Disponible en: https://concepto.de/url/. Consultado: 26 de septiembre de 2020.

# data[].attributes.attachment_link.title
URL - Concepto, usos, partes y características

# data[].attributes.attachment_link.description
Te explicamos qué es una URL, para qué sirve y cómo funciona. Además, las partes de una URL y sus características principales. Se conoce en informática como URL(siglas del inglés: Uniform Resource Locator, es decir, Localizador Uniforme de Recursos) a la secuencia estándar de caracteres que identifica y permite localizar y recuperar una información determinada en la Internet.

# data[].attributes.attachment_link.readable_text
¿Sabe qué son los estándares web?, ¿sabe para qué sirven y por qué deben utilizarse?

Hace unos años, el desarrollo de páginas web era caótico, había que realizar una versión de cada página web para prácticamente cada navegador.

Para dar solución a este problema, el W3C lanzó una iniciativa en 1997 para lograr la accesibilidad web (Web Accessibility Initiative o WAI) y que se siguieran una serie de estándares o normas.

A raíz de entonces se fueron desarrollando diferentes estándares logrando que cada página web se vea correctamente independientemente del navegador o dispositivo.

Si desea saber qué son los estándares web y por qué se deben utilizar siga leyendo este artículo.

Podemos pensar en la red mundial (Internet) como un ecosistema de información.

Las personas crean contenido que alimenta a la web. Este contenido se visualiza a través de un navegador que permite a las personas acceder a dicha información.

Antes de los estándares web, no existían reglas sobre cómo se debe crear el contenido, ni requisitos en términos de cómo un navegador debe entregar esa información a las personas que lo solicitan.

Los programadores en los años 90 a menudo tenían que hacer varias versiones de cada sitio web para que fuera compatible con cada uno de los navegadores disponibles en ese momento.

¿Qué son los estándares web?

Los estándares web se introdujeron para proteger el ecosistema web, para mantenerlo abierto, gratuito y accesible para todos.

Se perseguía poner la web en una burbuja protectora y no tener que construir sitios web adaptables a navegadores específicos.

Cuando se introdujeron los estándares, se alentó a los creadores de navegadores a adherirse a una forma estandarizada de hacer las cosas, lo que resultó en una compatibilidad cruzada cada vez más fácil para los creadores de contenido y ya no hubo necesidad de crear múltiples versiones del mismo sitio web.

Algunos de los estándares Web más conocidos y ampliamente utilizados son:

HTML (HyperText Markup Language), para definir la estructura de los documentos.

XML (eXtensible Markup Language), que sirve de base para un gran número de tecnologías.

CSS (Cascading Style Sheets), que permite asignar estilos para la representación de los documentos.

Javascript, que permite otorgar dinamismo y funcionalidad.

¿Cómo se crean los estándares web?

La creación de un estándar Web requiere un proceso controlado, que consta de varias etapas que aseguran la calidad de la especificación.

Este proceso permite la intervención de todos los usuarios de las tecnologías, con el objetivo de que puedan aportar su conocimiento y opiniones para la mejora de los documentos.

Tras este proceso, elaborado por especialistas en la materia, se obtienen unos estándares de calidad.

Al estar disponible para todo el mundo, las especificaciones se depuran exhaustivamente antes de ser consideradas como recomendación o estándar.

¿Por qué necesitamos estándares web?

Conociendo un poco sobre la historia de los estándares y por qué se introdujeron, podemos comenzar a ver los beneficios de tener estándares para el desarrollo web.

Las ventajas de seguir los estándares web establecidos son:

Mantener la web gratis y accesible para todos

Ayudar a simplificar el código fuente

Reducción del tiempo de desarrollo y mantenimiento

Hacer de la web un lugar más accesible

Permitir compatibilidad y validación hacia atrás

Ayudar a mantener un mejor seo (optimización de motores de búsqueda)

Crear un grupo de conocimiento común

¿Qué es el W3C?

El World Wide Web Consortium (W3C), es una comunidad internacional donde las organizaciones miembro trabajan conjuntamente para desarrollar estándares web.

Este consorcio promueve el uso de estándares para reducir el coste y la complejidad del desarrollo, así como para incrementar la accesibilidad y viabilidad de cualquier documento publicado en la web.

Los navegadores actuales (Google Chrome, Mozilla Firefox, Microsoft Edge, Opera o Safari) poseen un serio compromiso con los estándares web.

Sin embargo, siguen existiendo diferentes interpretaciones que implican diferentes comportamientos frente a una misma especificación.

Uso habitual de los estándares web

Cuando se describe que un sitio o página web cumple con ciertos estándares web, usualmente quiere decir que la página tiene partes de código HTML, CSS, XML y JavaScript válido o casi válido. La parte HTML debe cumplir también ciertas guías de accesibilidad y semántica.

Algunas de las publicaciones fundamentales a seguir para un uso correcto de los estándares web son:

Recomendaciones para lenguajes de marcado, como el lenguaje de marcas de hipertexto (HTML), lenguaje extensible de marcado de hipertexto (XHTML), Scalable Vector Graphics (SVG), y XForms, de W3C.

Recomendaciones para hojas de estilo, especialmente hojas de estilo en cascada (CSS), de W3C.

Estándares para ECMAScript, más comúnmente JavaScript, de Ecma International.

Recomendaciones para Document Object Models (DOM), de W3C.

Nombres y direcciones de página correctamente formados y demás recursos referenciados de sus (URIs), basado en RFC 2396, de IETF8

El uso apropiado de los protocolos HTTP y MIME para desplegar la página, regresar datos pedir otros recursos referenciados a ésta, basado en RFC 2616, de IETF9

El trabajo de la organización W3C hacia una web semántica está actualmente enfocado por publicaciones relacionadas al Marco de Descripción de Recursos (RDF), Gleaning Resource Descriptions from Dialects of Languages (GRDDL) y Web Ontology Language (OWL).

Validadores online

Como para otros estándares, el W3C ofrece herramientas gratuitas de validación que son muy útiles para comprobar que la forma de utilizar estos lenguajes (sintaxis) es correcta y no contiene errores:

Validador de HTML. Herramienta en línea que permite comprobar si el código HTML de nuestro sitio, o de una página de nuestro sitio, es correcto.

Esta validación, que certifica la corrección del código, nos garantiza que este podrá ser visto sin problemas en cualquier navegador o dispositivo.

Validador de CSS. Aplicación en línea que valida la sintaxis de las hojas de estilo en cascada (CSS) que estemos utilizando en nuestro sitio.

Nos ofrece un informe detallado de los errores que pueda tener, lo que facilita la corrección de los mismos.

Sigamos las normas

Como casi todo en la vida, seguir una serie de pautas, normas o estándares ayuda a la realización de forma correcta de dicha tarea.

En el apartado del desarrollo web se sigue la misma pauta y como se ha visto, seguir los estándares web establecidos hará que nuestros sitios web sean correctos y totalmente accesibles.

En la página web de W3C se pueden consultar todos los estándares web establecidos hasta la fecha además de multitud de artículos y noticias referentes a dicho tema.

Si le ha interesado el artículo y desea leer más escritos por mí puede hacerlo aquí.

# data[].attributes.attachment_link.title
¿Qué son los estándares web y por qué se deben utilizar?

# data[].attributes.attachment_link.description
¿Sabe qué son los estándares web?, ¿sabe para qué sirven y por qué deben utilizarse? Hace unos años, el desarrollo de páginas web era caótico, había que realizar una versión de cada página web para prácticamente cada navegador.

# data[].attributes.attachment_link.readable_text
La página web desde la que estás accediendo en tu navegador ahora mismo para leer este artículo está alojada bajo un hosting. Todas las páginas web a las que accedemos en Internet desde nuestro ordenador o nuestro smartphone se encuentran alojadas bajo servidores conectados a la red de redes.

El hosting es el servicio que vamos a necesitar contratar si queremos publicar nuestro sitio web y comenzar a ganar presencia online con nuestro proyecto. Contar con una página web nos otorga mucha visibilidad y favorece el diálogo con nuestros clientes. Además nos permite llegar a una potencial audiencia de millones de personas. ¡No existen puertas cerradas!

En el artículo de hoy quiero ayudarte a comprender mejor qué es exactamente un servicio de hosting, cómo funciona y todos los tipos que existen. Conocerlo en profundidad te ayudará a escoger el mejor alojamiento para tu web. Además, al final del artículo os recomendaré el proveedor que yo mismo utilizo para Imborrable, y con el que llevo años trabajando muy contento: .

Índice de contenido

1. ¿Qué es el hosting?

2. ¿Son lo mismo hosting y dominio?

3. ¿Cómo funciona este servicio?

4. ¿Qué debe ofrecernos un proveedor de hosting?

5. ¿Qué tipos de hosting existen?

6. Loading, el proveedor que yo recomiendo

¿Qué es el hosting?

Un hosting es un servicio de alojamiento para páginas web bajo un servidor. Nos permite publicar un sitio web en Internet. El hosting tiene como función alojar tu página web para que cualquier persona pueda visitarla, además de ofrecer también la posibilidad de gestionar un correo electrónico.

¿Son lo mismo hosting y dominio?

El dominio nos permite garantizar que cualquier persona puede visitar nuestra página web. Tan sólo necesitará escribirlo en la barra de direcciones de su navegador.

No, no son lo mismo. Si queremos subir nuestra página web a Internet, además de contratar un servicio de alojamiento web, también vamos a necesitar comprar un nombre de dominio. Este dominio lo podremos asociar después a la dirección IP física del servidor donde se encuentra alojada nuestra web desde el apartado de gestión del hosting.

¿Cómo funciona este servicio?

Para que una página web pueda ser visitada, es importante que esté almacenada bajo un servidor web. Un servidor es un equipo de alto rendimiento mucho más potente que un ordenador personal. Cuando hablamos del servidor hablamos del hardware o del equipo físico. Se mantiene conectado a Internet las 24 horas del día para garantizar que los contenidos que almacena pueden consultarse en cualquier momento y desde cualquier lugar.

Cuando nos registramos en un servicio de alojamiento web, procedemos a alquilar un pequeño espacio en el servidor, desde donde podremos almacenar toda nuestra página web. El servicio de hosting puede funcionar de forma muy similar a una suscripción de iCloud o Dropbox. Necesitaremos abonar una cuota mensual a nuestro proveedor para poder reservar y garantizar el espacio donde se aloja nuestra página en el servidor web.

Tu proveedor de hosting es el responsable de mantener el servidor web activo y en funcionamiento, además de protegerlo de cualquier posible ataque.

Si necesitamos crear una página web, lo primero que debemos hacer es encontrar una empresa de hosting que nos pueda proporcionar espacio en el servidor y una atención al cliente profesional. El proveedor te ayudará a subir todos los archivos que conforman tu página web gracias al uso de una plataforma o gestor.

Además ligará este espacio en el servidor a través de la dirección IP con tu dominio. De esta forma, cada vez que alguien escriba en su navegador nuestro nombre de dominio, el servidor del hosting mostrará la página web transfiriendo todos los archivos necesarios al navegador del visitante. Por eso es importante que como futuros clientes escojamos siempre el plan de alojamiento que mejor se adapte a lo que necesitamos.

Es muy probable que tu página web vaya creciendo con el tiempo, y por tanto necesitaremos cada vez más espacio dentro del servidor. Por eso existen siempre varios planes de hosting, que pueden adaptarse a las necesidades de cada caso en particular.

¿Qué debe ofrecernos un proveedor de hosting?

Un proveedor especializado en hosting, además de alquilarnos un espacio dentro del servidor, también puede llegar a ofrecer otros servicios complementarios y relacionados con el alojamiento web.

Estos son los servicios más básicos con los que cualquier proveedor debería ayudarte siempre:

Correo electrónico: Tu proveedor de hosting debe contar también con un gestor de correo electrónico, para que puedas ligar una cuenta oficial de email con el nombre de tu dominio. Si eres un freelance o un diseñador gráfico , evita trabajar con cuentas de correo terminadas en @gmail o @hotmail y apuesta por una cuenta propia con tu dominio. Este gesto que separa a los profesionales de los aficionados.

Certificado SSL: El certificado SSL (Secure Sockets Layer o capa de conexión segura) es un estándar de seguridad global. Permite la transferencia segura de datos cifrados a través de un navegador y un servidor web. Cualquier página web, pero especialmente las e-commerce , deben contar con un certificado SSL que se renueva de forma anual. Habla con tu proveedor de hosting si aún no cuentas con uno.

Copias de seguridad automáticas: Realizar copias de seguridad todos los días o cada ciertas horas puede evitarnos un susto, si de imprevisto nuestro servidor web recibe un ataque o surge algún problema en el mantenimiento.

Herramientas para programación web: Cualquier proveedor debe ofrecer vías y alternativas para facilitar el acceso y la programación del espacio reservado para nuestra página web.

¿Qué tipos de hosting existen?

La mayor parte de los proveedores de hosting pueden llegar a ofrecer diferentes tipos de almacenamiento web en función de las necesidades de los clientes. No necesitará el mismo espacio quien necesite crear un portfolio online , un blog o una con miles de referencias. Recuerda, lo mejor es comenzar poco a poco, e ir contratando el hosting siempre acorde a las necesidades de nuestra página web.

Existen un total de 5 tipos diferentes de hosting, o 5 formas distintas de almacenar tu página web en el servidor. Las más importantes son el hosting compartido, el hosting VPS y los servidores dedicados.

I. Hosting compartido

Es el tipo de alojamiento web más utilizado. Un mismo servidor físico contiene las páginas web o cuentas de hosting de un numero determinado de usuarios. Todos sus sitios web comparten los mismos recursos del servidor, como el procesador CPU o la memoria RAM. En el tipo de hosting compartido un comportamiento determinado de un sitio web puede acabar afectando al rendimiento del resto.

II. Hosting VPS

Las siglas VPS se corresponden con Virtual Private Server o servidor privado virtual. En este tipo de hosting los sitios web alojados pueden compartir un mismo servidor, pero a diferencia del hosting compartido, en el hosting VPS los sitios no comparten los recursos del servidor.

III. Hosting elástico

El hosting elástico es un tipo de alojamiento que cuenta con las ventajas de un hosting compartido y además las de un hosting VPS. Con este servicio vamos a compartir el servidor con más usuarios, pero siempre contando con algunos recursos, como pasa con el servicio VPS.

IV. Hosting Cloud

El denominado hosting en la nube. Se trata de un tipo de alojamiento que almacena la información de la página web en varios servidores trabajando de forma conjunta y conectados a una misma red. De ahí el nombre Cloud.

Este tipo de hosting es más requerido por páginas web que puedan contar con altos picos de tráfico en diferentes momentos. El servicio cloud les permite contar con varios recursos disponibles a medida que ocurren esas variaciones en el tráfico de la página.

V. Servidor dedicado

Este tipo de hosting web ofrece un servidor dedicado para cada cliente. Un equipo físico para cada cuenta de usuario. No se comparte el servidor con ningún otro sitio web ajeno al usuario. El servidor y todos sus recursos al completo están destinados a una única cuenta.

Loading, el proveedor que yo recomiendo

Cuando hablamos de un proyecto personal o profesional, para mi es fundamental contar con un proveedor de confianza. Una empresa seria, que empatice contigo y entienda la importancia de tu proyecto. Como he tenido una experiencia muy positiva con Loading, no dudo siempre en recomendarlo. Llevo más de 8 años con ellos y me han ayudado en innumerables ocasiones. Os cuento un poco más acerca de esta empresa y todo lo que puede ofreceros.

Loading es una empresa especializada en hosting y servicios web, que fue creada en 2002. El 100% de su capital es español y sus oficinas se encuentran en Orihuela (Alicante).

Personalmente os garantizo que el trato de atención al cliente es muy cercano. Hablas con personas reales, no IAs ni contestadores automáticos. Si estás buscando contratar un hosting, que sepas que con Loading no necesitarás contar con conocimientos de programación para poder realizar tareas rutinarias que te faciliten administrar tu sitio web.

Además puedes solicitar que se deje preinstalado a la hora de contratar tu hosting. Lo que puede salvarnos mucho tiempo.

Loading, como cualquier proveedor serio de hosting, realiza copias de seguridad de tu página web todos los días y cuentan con el mejor soporte técnico. Además, ya sus planes vienen ya con discos SSD de máxima velocidad. Algo que se nota en el rendimiento web, contribuyendo a que tu página cargue más rápido.

También si ya cuentas con tu página web en otro servicio de hosting, con Loading puedes migrar tu tienda muy fácilmente. ¡Ellos se ocupan de todo!

Si te lo estás pensando, anímate y prueba. Loading cuenta con una garantía de satisfacción de 30 días.

¡Gracias por leerme! Espero que este artículo te haya ayudado a despejar cualquier duda que tuvieses respecto al servicio de hosting.

# data[].attributes.attachment_link.title
Hosting: Qué es y cómo funciona este servicio - Imborrable

# data[].attributes.attachment_link.description
La página web desde la que estás accediendo en tu navegador ahora mismo para leer este artículo está alojada bajo un hosting. Todas las páginas web a las que accedemos en Internet desde nuestro ordenador o nuestro smartphone se encuentran alojadas bajo servidores conectados a la red de redes.

# data[].attributes.body
Es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc.) de las distintas etiquetas que forman una página *.HTML.

# data[].attributes.attachment_link.readable_text
Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman una página *.HTML.

Su principal ventaja es definir un mismo aspecto para todas las páginas de un sitio web. Se crea una hoja de estilo y se vinculan todas las páginas del sitio web a este archivo. Cualquier cambio efectuado en la hoja de estilo afecta instantáneamente al formato de todas las páginas vinculadas a la misma.

Cuando desde el editor HTML visual se asocia un formato a un fragmento de texto o bien se convierte en un enlace lo que realmente se está haciendo es situar ese texto entre etiquetas HTML para que el navegador lo interprete y visualice adecuadamente.

Ejemplo: Si desde Kompozer seleccionas el texto titular de una página web y a continuación despliegas la lista de formatos para seleccionar Título 1 (de forma similar a lo propuesto en las actividades anteriores de este curso), realmente el fragmento de texto se ha "etiquetado" como <h1> Texto seleccionado ... </h1>. Si hubieramos elegido Título 2 se habría etiquetado con <h2> ... </h2>, etc.

Algunas etiquetas HTML son:

<body> ... </body> . Contienen todos los caracteres que forman la página web.

<h1> ... </h1>, ..., <h6> ...</h6>. Permiten definir títulos de distintos tamaños (hasta 6).

<p> ... </p>. Contienen el texto de un párrafo.

<a href="http://...">Texto del enlace</a>. Se utiliza para crear enlaces.

Existen muchas más etiquetas pero en esta práctica sólo vamos a modificar el formato (color, tipo, tamaño, efecto, etc) de los textos etiquetados con las que se citan.
En esta práctica vamos a crear una hoja de estilo y se vinculará a una página.

# data[].attributes.attachment_link.description
Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman una página *.HTML.

# data[].attributes.body
El tamaño se regula a través de la propiedad font-size. Podemos utilizar cualquiera de las unidades de tamaño, pero lo más frecuente es utilizar px (pixels), o porcentajes % o em, estas dos últimas son tamaños relativos al tamaño de la fuente del elemento que está por encima.

# data[].attributes.body
El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede expresar de varias formas:

1. Un número hexadecimal. Por ejemplo color: #0000FF;, o color: 0x800080;.

2. Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255); .

3. Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);.

4. Un nombre. Algunos colores se pueden expresar con su nombre en inglés. Por ejemplo color: green; o color: DarkGreen;.

# data[].attributes.body
Podemos elegir la fuente (o tipo de letra) a través del atributo font-family. Podemos indicar cualquier fuente que queramos, teniendo en cuenta que si incluye espacios, debe de ir entre comillas dobles. Por ejemplo font-family: arial; o font-family: "Times New Roman";.

# data[].attributes.body
Constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseño de texto y gráficos en una página HTML

# data[].attributes.body
Permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc.)

# data[].attributes.body
Los elementos de encabezado implementan seis niveles de encabezado del documento, <h1> es el más importante, y <h6>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta.

# data[].attributes.body
El párrafo es un elemento base en la edición de texto. La etiqueta para un párrafo es <p>.

Este atributo deja un espacio vacío encima y debajo del texto para evidenciarlo, así tanto el navegador como el usuario lo podrá distinguir como tal.

# data[].attributes.body
Las imágenes son muy importantes en una página web. Por lo tanto es conveniente utilizarlas de manera correcta. Inserta imágenes usando la etiqueta <img/>.

# data[].attributes.body
Un archivo de vídeo puede ser insertado en una página web de dos maneras. La primera sería usando la etiqueta <embed>. Esta etiqueta no necesita una etiqueta de apertura/cierre. Funciona, la mayoría de veces, como funciona una etiqueta para fotos

# data[].attributes.body
Es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web. Abarca diferentes aspectos como el diseño gráfico web, diseño de interfaz y la experiencia de usuario, además de la navegabilidad, interactividad, usabilidad, arquitectura de la información e interacción de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda.

# data[].attributes.body
Equilibrio: El equilibrio visual significa asegurarse de que ninguno de los elementos de una misma composición sea demasiado predominante.

Contraste: El contraste se refiere a la disposición de elementos opuestos de manera que se destaquen sus diferencias: oscuro y claro, suave y áspero, grande y pequeño.

Énfasis: Este principio destaca que no todos los elementos de un sitio web son iguales. Si hay algo en tu página web que los visitantes deben notar primero —ya sea tu logo, una llamada a la acción o una imagen—

Movimiento: Aplicado al diseño web, el movimiento es lo que guía a los visitantes de un elemento a otro.

Ritmo: El ritmo se refiere a la repetición de elementos para crear coherencia, cohesión o para potenciar un determinado mensaje.

Jerarquía: El contenido más importante debe colocarse en un lugar destacado donde los visitantes lo vean inmediatamente e interactúen con él.

Espacios en blanco: Dará a los elementos visuales de una página web espacio para respirar.

Unidad: La unidad es el resultado final de añadir todos los elementos individuales a tu sitio, el cual debería ser una composición armoniosa, idealmente.

# data[].attributes.headline
Danae Salinas (2022). "Diseño web: qué es y cómo hacerlo bien". Documento en línea recuperado de: 

# data[].attributes.subject
Danae Salinas (2022). "Diseño web: qué es y cómo hacerlo bien". Documento en línea recuperado de: 

# data[].attributes.attachment_link.provider_name
Blog de Wix | Diseño Web, Fotografía y Tips de Negocios

# data[].attributes.attachment_link.title
Qué es el diseño web: todo lo que necesitas saber

# data[].attributes.attachment_link.description
Actualizado en Diciembre 2023 El diseño web ha recorrido un largo camino desde la primera publicación de una página web en 1991. Con más de mil millones de sitios web activos en Internet hoy en día, está claro que esta industria está aquí para quedarse. Dicho esto, la página web es uno de los activo…

# data[].attributes.body
La usabilidad web es el grado de facilidad de uso que tiene una página web para los visitantes que entran e interactúan con ella.
Una web con una buena usabilidad es aquella que permite a los usuarios una interacción sencilla, intuitiva, agradable y segura.