No todas las webs sirven para lo mismo. Una misma página puede clasificarse según su tecnología, su función o su contenido. Aquí las recorremos con ejemplos.
Empezar ↓Una consultora, un juego de fútbol, una empresa de alimentos, una constructora y una agencia de marketing. Se ven muy diferentes, pero todas se arman con las mismas piezas: header, menú, cuerpo y footer.
El sitio es el conjunto de páginas enlazadas bajo un mismo dominio. La página es cada documento individual, con su propia URL.
Ver diferenciaLo que pasa “por dentro”: si el contenido es fijo, si se genera desde un servidor y una base de datos, o si se comporta como una app.
ExplorarVender, informar, captar contactos, mostrar un portafolio, reservar una cita… El objetivo define la estructura, el contenido y las métricas.
Ver tiposCuando la web se instala en el celular aparecen nuevas decisiones: rendimiento, costo, tiendas de aplicaciones y acceso al hardware.
Comparar appsLas nativas ganan en experiencia y acceso al hardware; las web-apps, en precio, rapidez y actualización inmediata; las híbridas buscan el punto medio: parecen app y corren en varias plataformas.
Una página web es un documento escrito en HTML que se abre desde un navegador y puede contener texto, imágenes, video y enlaces. Varias páginas enlazadas bajo un mismo dominio forman un sitio.
Una sola pantalla o documento con su propia dirección (URL). Ejemplo: la página “Contacto” de una empresa.
El conjunto completo de páginas bajo un dominio, con navegación y estructura compartidas (menú, header, footer).
Sin importar el tipo, casi todas las páginas se organizan con los mismos bloques. Esta misma guía los usa: tiene header, slider, cuerpo y footer.
La franja superior: logo, identidad de la marca y acceso rápido al resto del sitio.
El mapa del sitio. Ordena el contenido y guía al usuario; entre más claro y corto, mejor.
La zona central con la información principal: textos, imágenes, videos, sliders y llamados a la acción.
Cierra la página: enlaces útiles, contacto, redes sociales e información legal.
Opcional. Muestra información complementaria o accesos rápidos junto al contenido.
Recogen datos del visitante: contacto, suscripción, registro o cotización.
El menú es lo que se ve; la estructura es cómo se organiza y se recorre la información dentro del sitio. Hay cuatro modelos principales.
Se avanza página por página en un orden fijo, como en un libro. No hay atajos: se sigue adelante o se regresa.
Va de lo general a lo específico: una página de inicio se divide en categorías y estas en subcategorías.
Desde una página central se llega a varias páginas independientes; para cambiar de sección hay que volver al centro.
Sin orden fijo: las páginas se enlazan libremente por la relación entre temas, mediante hipervínculos.
En la práctica los sitios mezclan modelos: una tienda es jerárquica en su catálogo, pero lineal en el pago.
Cómo está hecha la página y cómo entrega el contenido al usuario.
Muestra el mismo contenido a todos los visitantes. Se construye con HTML, CSS y algo de JavaScript; carga muy rápido y tiene pocos puntos de ataque, pero cada cambio se hace editando el código.
Genera el contenido en el momento, según quién la visita o qué hace. Usa lenguajes de servidor (PHP, Node, Python) y bases de datos. Más interactiva, pero requiere más recursos y mantenimiento.
Carga un único documento y luego JavaScript actualiza solo la parte que cambia mediante peticiones asíncronas. La navegación se siente fluida, como una app.
Una web que se puede instalar como app sin pasar por una tienda. Usa un manifest y un service worker para guardar caché, funcionar sin conexión y enviar notificaciones. Requiere HTTPS.
La responsive reorganiza el mismo diseño según el ancho de pantalla (media queries, grid, flexbox). La adaptativa entrega versiones distintas según el dispositivo detectado.
Se administra desde un panel donde se crean, editan y publican contenidos sin programar cada cambio. Incluye plantillas, plugins, usuarios con permisos y herramientas SEO.
Agrupa las páginas por el propósito que cumplen. Un mismo sitio puede combinar varios tipos (por ejemplo, una web corporativa con blog y tienda).
No hay tipos que coincidan. Prueba con otra palabra.
Su meta es ofrecer información actual o de consulta, actualizada con frecuencia y presentada con claridad.
Pensada para vender: catálogo con fichas, precios y disponibilidad, carrito, pasarela de pago segura (HTTPS) y políticas claras de envío y devolución.
La “tarjeta de presentación” de una organización: quiénes son, qué ofrecen, historia, valores y contacto. Diseño limpio e institucional; a menudo incluye blog o tienda.
Publica artículos ordenados del más reciente al más antiguo. Necesita constancia, atrae tráfico desde buscadores y permite interacción mediante comentarios.
Un “currículum visual”: lo visual domina sobre el texto. Diseñadores, fotógrafos, músicos o programadores muestran sus trabajos y facilitan el contacto.
Busca apoyo para una causa: donaciones, voluntarios o firmas. Usa imágenes, testimonios y llamados a la acción (CTA) muy visibles con formularios simples.
Permiten agendar citas o pedir cotizaciones: calendario, selección de servicio y, a veces, pago en línea. El proceso debe completarse en pocos pasos.
Página a la que llega el usuario tras hacer clic en un anuncio o correo. Tiene un solo objetivo: que haga una acción concreta (comprar, descargar, dejar sus datos).
El micrositio vive en una dirección aparte y se enfoca en un producto, campaña o evento. La one page reúne todo el contenido en una sola página dividida en secciones.
Devuelve resultados de toda la web a partir de palabras clave. Por eso las demás páginas trabajan su SEO: para aparecer en las primeras posiciones.
Conecta personas con intereses comunes. El contenido lo generan los propios usuarios y las marcas la usan para acercarse a su público.
Ofrece cursos en línea con video, lecturas y actividades; los estudiantes interactúan con docentes y compañeros, y a veces obtienen certificado.
Otra mirada: de qué trata la página o qué formato predomina en ella.
Cuando el proyecto pasa del navegador al celular, hay que elegir cómo se construye la app. Cada opción cambia el costo, el tiempo y lo que la app puede hacer.
Se programa para un sistema específico (Android o iOS) en su lenguaje propio y se descarga desde la tienda.
Un solo código (tecnologías web o frameworks como React Native, Flutter, Ionic) que se empaqueta para varias plataformas y se publica en las tiendas.
Una web diseñada para comportarse como programa: se usa desde el navegador, sin descargar ni instalar, y funciona en cualquier sistema operativo.
La evolución de la web app: se “instala” en la pantalla de inicio desde el navegador, funciona sin conexión, carga rápido y puede enviar notificaciones.
| Característica | Nativa | Híbrida | Web app |
|---|---|---|---|
| Interfaz | Propia de la plataforma | Basada en web o componentes nativos | Basada en web |
| Tiempo de desarrollo | Alto | Medio | Bajo |
| Costo | Alto | Medio | Bajo |
| Multiplataforma | ✖ | ✔ | ✔ |
| Rendimiento | Alto | Medio | Bajo–medio |
| Acceso al hardware | Completo | Alto | Limitado |
| Tiendas de apps | ✔ | ✔ | ✖ |
Nota: la tabla original de EMMA invierte la fila “Interfaz” (le asigna “basada en web” a la nativa). Aquí se corrigió.
💡 Toca el nombre de una columna para resaltarla.
Responde y la recomendación cambia al instante.
Cualquier tipo de página necesita dos cosas para estar en internet: un nombre para encontrarla y un lugar donde guardar sus archivos.
El nombre único con el que la gente encuentra el sitio (por ejemplo misitio.co). Evita tener que recordar la dirección IP, que es un número, y hace parte de la identidad de la marca.
El espacio en un servidor donde se guardan los archivos (HTML, CSS, imágenes, base de datos) y desde donde se entregan a cada visitante, las 24 horas.
El nombre del dominio en la barra del navegador.
Un servidor DNS funciona como directorio: traduce el nombre a una IP.
Con esa dirección numérica, la petición viaja al servidor correcto.
El servidor envía los archivos y el navegador arma la página.
El dominio es solo misitio.edu.co. El protocolo y la ruta hacen parte de la URL, pero no del dominio.
Escribe o pega una URL y mira cómo se descompone.
.com.org.net.shop.app.ai.co.mx.ar.es.br.edu.gov.museum.aero.name.pro.中国.рфNo se empieza por la tecnología, se empieza por el objetivo.
¿Vender, informar, captar contactos, enseñar, reservar? La meta decide la estructura y lo que vas a medir.
¿Desde qué dispositivo entra? ¿Android o iOS? ¿Tiene buena conexión? Eso inclina entre web, PWA o app.
Presupuesto, tiempo y equipo. Un CMS o una PWA salen más baratos que dos apps nativas.
HTTPS, diseño responsive, carga rápida, accesibilidad (WCAG) y SEO. Sin esto, cualquier tipo falla.
10 preguntas sobre todo lo que viste. Responde y presiona “Calificar”.