✅ Con esta web doodom editable, cualquier bloque de texto se puede modificar directamente en el navegador. Es responsive, con secciones de hero, dominios, seguridad y pie de página.
Visita la versión completa y editable de la página, con un botón para guardar los cambios en un archivo .html directamente desde el navegador. Así podrás modificar los textos en vivo y luego descargar tu versión personalizada.
✅ Con esta página puedes:
Editar cualquier texto directamente en el navegador.
Pulsar el botón “Guardar cambios en HTML” para descargar tu versión personalizada.
Una página web editable es un documento HTML diseñado para que el contenido pueda modificarse directamente desde el navegador, sin necesidad de abrir un editor externo ni tocar el código fuente.
Características principales
Uso de contenteditable="true" Este atributo convierte cualquier bloque de texto (títulos, párrafos, listas, botones) en un campo editable. Basta con hacer clic y escribir.
Edición en vivo Los cambios se realizan directamente en la página que estás viendo, como si fuese un procesador de texto online.
No requiere servidor ni base de datos Es un archivo HTML estático que se abre en el navegador y se modifica allí mismo.
Posibilidad de guardar cambios Con un pequeño script en JavaScript, se puede descargar la versión editada como un nuevo archivo .html.
Código HTML, centrándonos en dos aspectos clave que mencionas: modo oscuro y elementos responsive.
🌑 Modo oscuro
Variables CSS (:root)
Se definen variables de color por defecto:css:root { --bg-color: #ffffff; --text-color: #000000; --header-bg: #f0f0f0; } Esto permite reutilizar los mismos valores en todo el CSS, y cambiarlos fácilmente.
Clase dark-mode en <body>
Cuando el body tiene la clase .dark-mode, las variables cambian:cssbody.dark-mode { --bg-color: #121212; --text-color: #ffffff; --header-bg: #1f1f1f; } Así, el fondo pasa a ser oscuro, el texto blanco y la cabecera gris oscuro.
Uso de variables en estilos
El body y el header usan var(--bg-color) y var(--text-color).
Esto hace que al cambiar las variables, toda la página se adapte automáticamente.
JavaScript para alternar
El checkbox con id darkMode activa/desactiva la clase .dark-mode en el body:jsconst toggle = document.getElementById('darkMode'); toggle.addEventListener('change', () => { document.body.classList.toggle('dark-mode'); });
Resultado: al marcar la casilla, se activa el modo oscuro; al desmarcarla, vuelve al modo claro.
📱 Elementos responsive
Contenedor flexible (.container)
Se usa display: flex; flex-wrap: wrap; para organizar columnas.
Cada .column tiene flex: 1 y min-width: 300px, lo que asegura que se repartan el espacio pero nunca sean demasiado estrechas.
Imágenes adaptables
Las imágenes tienen max-width: 100%; height: auto;, lo que garantiza que se escalen proporcionalmente y nunca se desborden del contenedor.
Media query (@media)
Cuando la pantalla es menor de 768px, el contenedor cambia a disposición vertical:css@media (max-width: 768px) { .container { flex-direction: column; } }
Esto convierte las columnas en bloques apilados, perfectos para móviles.
📌 Conclusión
Modo oscuro: se logra con variables CSS y un toggle que añade/quita la clase .dark-mode al body.
Responsive: se consigue con flexbox, imágenes fluidas y una media query que reorganiza las columnas en pantallas pequeñas.
El resultado es una página que:
Cambia entre modo claro y oscuro con un clic.
Se adapta automáticamente a escritorio, tablet y móvil.
Mantiene un estilo narrativo de terror con buena usabilidad.
Este es el código simplificado de una página web con Modo Oscuro. Es un ejemplo muy simple de cómo una página HTML básica puede incorporar un modo oscuro con un interruptor.
📄 Código HTML con modo oscuro
html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página con Modo Oscuro</title>
<style>
/* Variables de color por defecto (modo claro) */
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
/* Variables cuando el body tiene la clase dark-mode */
body.dark-mode {
--bg-color: #121212;
--text-color: #ffffff;
}
/* Estilos generales usando variables */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
header {
padding: 1rem;
text-align: center;
border-bottom: 1px solid #ccc;
}
.toggle-container {
text-align: center;
margin: 1rem;
}
</style>
</head>
<body>
<header>
<h1>Mi Página con Modo Oscuro</h1>
</header>
<div class="toggle-container">
<label for="darkMode">🌙 Activar modo oscuro</label>
<input type="checkbox" id="darkMode">
</div>
<main>
<p>
Este es un ejemplo de página sencilla que puede alternar entre modo claro y modo oscuro.
</p>
</main>
<script>
// Capturamos el checkbox
const toggle = document.getElementById('darkMode');
// Escuchamos el cambio de estado
toggle.addEventListener('change', () => {
document.body.classList.toggle('dark-mode');
});
</script>
</body>
</html>
🔎 Explicación rápida
Variables CSS (:root): definen colores base para fondo y texto.
Clase .dark-mode: cambia esas variables cuando se activa.
JavaScript: al marcar el checkbox, se añade o quita la clase .dark-mode en <body>.
Transiciones: el cambio de colores es suave gracias a transition.
📌 Con este código, cualquier página HTML sencilla puede convertirse en una web con modo oscuro activable.
Porqué y cuál es el motivo por el que no se visualiza el favicon en Safari. Técnica HTML.
Safari puede no mostrar el favicon por incompatibilidad de formato, caché obsoleta o falta de etiquetas específicas como mask-icon para pestañas ancladas.
🧭 Principales razones por las que el favicon no aparece en Safari
1. Formato incompatible
Safari no admite favicons en formato SVG para pestañas normales.
Usa .ico o .png en su lugar:html<link rel="icon" href="/favicon.png" type="image/png">
2. Falta de etiqueta mask-icon para pestañas ancladas
Safari usa una etiqueta especial para mostrar íconos en pestañas ancladas:
Sí, agregar un favicon es muy importante para cualquier sitio web. Aunque es pequeño, cumple funciones clave que mejoran la experiencia del usuario y la identidad de tu marca:
✅ ¿Por qué es importante el favicon?
1. Identidad visual
Refuerza tu marca en la pestaña del navegador, marcadores y accesos directos.
Ayuda a los visitantes a reconocer tu sitio rápidamente entre muchas pestañas abiertas.
2. Profesionalismo
Un sitio sin favicon puede parecer incompleto o poco cuidado.
Los navegadores modernos esperan encontrarlo; su ausencia puede generar advertencias en herramientas de auditoría como Lighthouse.
3. Accesos directos y apps
En móviles, el favicon se usa como ícono si el usuario guarda tu sitio en la pantalla de inicio.
También se usa en resultados de búsqueda y pestañas ancladas (especialmente en Safari).
4. Compatibilidad multiplataforma
Favicons bien configurados se ven en:
Chrome, Firefox, Safari, Edge
Android, iOS
Escritorio y móvil
🛠 ¿Cómo agregarlo correctamente?
Coloca el archivo favicon.ico en la raíz del sitio
¡Vamos a darle vida a tu sitio web personal! 🌟 Aquí tienes un tema web completo en HTML y PHP con:
📸 Galería de fotos
🧑 Foto de perfil
🌌 Fondo animado
🎥 Sección de videos
📬 Formulario de contacto funcional
Todo integrado en un solo archivo index.php para facilitar su implementación.
Sitio web llamativo y funcional
Este es el código que tienes que introducir en un archivo llamado index.php. Puedes crear el archivo en tu ordenador e introducir el código completo ha continuación. No es necesaria ninguna otra acción.
Para que puedas recibir mensajes deberás sustituir el código PHP del correo electrónico, por tu propio correo. Busca la siguiente línea en el código PHP, y modifica solo lo siguiente: tu-correo@ejemplo.com, por tu dirección de correo electrónico. Por ejemplo: javier2030@gmail.com
$destinatario = "tu-correo@ejemplo.com";
Sube el código a un alojamiento web con PHP, y tendrás una página personal que podrás ir modificando a tu gusto.
A continuación, te presento un ejemplo de página web HTML con una imagen animada y un menú de navegación responsive. He incluido comentarios en el código para que sea más fácil de entender:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página con Imagen Animada y Menú Responsive</title>
<style>
/* Estilos generales */
body {
font-family: sans-serif;
margin: 0; /* Elimina márgenes predeterminados */
}
/* Estilos del encabezado y menú */
header {
background-color: #333;
color: white;
padding: 10px 0;
position: sticky; /* Mantiene el encabezado fijo en la parte superior */
top: 0;
z-index: 100; /* Asegura que el encabezado esté por encima de otros elementos */
}
nav {
display: flex;
justify-content: space-around; /* Distribuye los elementos del menú */
align-items: center;
max-width: 960px; /* Limita el ancho del menú en pantallas grandes */
margin: 0 auto;/*Centra el menú*/
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
/*Estilos para el menú hamburguesa (para pantallas pequeñas)*/
.menu-toggle {
display: none; /*Oculto por defecto*/
cursor: pointer;
font-size: 24px;
}
/* Estilos para la imagen animada */
.imagen-animada {
width: 200px;
height: 200px;
margin: 20px auto; /* Centra la imagen */
background-image: url("imagen.gif"); /* Reemplaza con la ruta de tu imagen/gif */
background-size: cover;
animation: rotar 4s linear infinite; /* Ajusta la duración y función de temporización */
}
@keyframes rotar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Media query para responsive design */
@media (max-width: 768px) { /* Ajusta el valor según necesites */
nav {
flex-direction: column; /* Los enlaces se apilan verticalmente */
align-items: flex-start; /* Alinea a la izquierda */
display: none;
}
nav.active{
display: flex;
}
.menu-toggle{
display: block; /*Muestro el menú hamburguesa*/
position: absolute; /*Posiciono el menu hamburguesa*/
top: 10px;
right: 10px;
}
nav a{
width: 100%;
text-align: center;
border-bottom: 1px solid white;
}
}
/* Estilos del contenido principal */
main {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<div class="menu-toggle">☰</div>
<nav id="menu">
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
</header>
<main>
<h1>Bienvenido a mi página</h1>
<div class="imagen-animada"></div>
<p>Este es un ejemplo de página web con una imagen animada y un menú de navegación responsive.</p>
</main>
<script>
document.querySelector('.menu-toggle').addEventListener('click', () =>{
document.getElementById('menu').classList.toggle('active');
});
</script>
</body>
</html>
Explicación y mejoras:
meta viewport: Esencial para el responsive design. Asegura que la página se adapte a diferentes tamaños de pantalla.
header, nav, main: Se utilizan elementos semánticos para estructurar el contenido.
flexbox: Se utiliza flexbox para el diseño del menú, lo que facilita la creación de menús responsive.
Media Query: La regla @media (max-width: 768px) aplica estilos diferentes cuando la pantalla tiene un ancho máximo de 768 píxeles (un tamaño común para tablets). Puedes ajustar este valor según tus necesidades.
Menú hamburguesa: Se añade un icono de «hamburguesa» (☰) que aparece en pantallas pequeñas y sirve para desplegar/ocultar el menú.
position: sticky: El encabezado se mantiene fijo en la parte superior al hacer scroll.
z-index: Se usa z-index para asegurar que el encabezado se superponga al resto del contenido.
Imagen animada: Se utiliza background-image y @keyframes para animar la imagen. Asegúrate de reemplazar "imagen.gif" con la ruta correcta a tu archivo GIF o imagen.
Javascript para el menú hamburguesa: He añadido un pequeño script en Javascript para que al hacer click en el menú hamburguesa se muestre o se oculte el menú.
Para usar este código:
Guarda el código como un archivo .html (por ejemplo, index.html).
Crea un archivo GIF o usa una imagen existente y colócalo en la misma carpeta que el archivo HTML. Asegúrate de cambiar la ruta en background-image: url("imagen.gif");.
Abre el archivo index.html en tu navegador.
Este ejemplo te proporciona una base sólida para crear tu propia página web con una imagen animada y un menú responsive. Puedes personalizar los estilos, añadir más contenido y funcionalidades según tus necesidades. Recuerda que para que la animación funcione, la imagen que uses debe ser un .gif o un formato que soporte animación como .apng o .webp animado. Si usas un formato estático como .jpg o .png la animación no funcionará. Si tienes más preguntas, no dudes en consultarme.
Agregar al código anterior un menú hamburguesa responsive.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página con Imagen Animada y Menú Responsive</title>
<style>
/* Estilos generales */
body {
font-family: sans-serif;
margin: 0;
}
/* Estilos del encabezado */
header {
background-color: #333;
color: white;
padding: 10px 0;
position: sticky;
top: 0;
z-index: 100;
display: flex; /* Usamos flexbox para alinear el menú y el toggle */
justify-content: space-between; /* Espacio entre elementos */
align-items: center; /* Centrar verticalmente */
padding: 10px 20px; /* Añadimos padding lateral */
}
/* Estilos del menú */
nav {
display: flex;
/* justify-content: space-around; Ya no es necesario aquí*/
align-items: center;
max-width: 960px;
margin: 0 auto;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
/* Estilos del menú hamburguesa */
.menu-toggle {
display: none;
cursor: pointer;
font-size: 24px;
}
.bar{
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
}
/* Estilos de la imagen animada */
.imagen-animada {
width: 200px;
height: 200px;
margin: 20px auto;
background-image: url("imagen.gif"); /* Reemplazar */
background-size: cover;
animation: rotar 4s linear infinite;
}
@keyframes rotar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Media query para responsive */
@media (max-width: 768px) {
nav {
display: none; /* Ocultamos el menú en pantallas pequeñas */
flex-direction: column;
width: 100%; /*Ocupa todo el ancho*/
background-color: #333; /*Le agregamos un color de fondo para cuando se despliega*/
position: absolute; /*Para que se ponga debajo del header*/
top: 52px; /*Para que se muestre justo debajo del header*/
left: 0;
}
nav.active { /* Estilo para cuando el menú está activo */
display: flex;
}
.menu-toggle {
display: block; /* Mostramos el menú hamburguesa */
}
.menu-toggle.active .bar:nth-child(2){
opacity: 0;
}
.menu-toggle.active .bar:nth-child(1){
transform: translateY(8px) rotate(45deg);
}
.menu-toggle.active .bar:nth-child(3){
transform: translateY(-8px) rotate(-45deg);
}
nav a {
width: 100%; /*Para que los links ocupen todo el ancho*/
text-align: center; /*Centramos el texto*/
padding: 10px;
border-bottom: 1px solid white;
}
}
/* Estilos del contenido principal */
main {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<nav id="menu">
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
</header>
<main>
<h1>Bienvenido a mi página</h1>
<div class="imagen-animada"></div>
<p>Este es un ejemplo de página web con una imagen animada y un menú de navegación responsive.</p>
</main>
<script>
const menuToggle = document.getElementById('mobile-menu');
const nav = document.getElementById('menu');
menuToggle.addEventListener('click', () => {
nav.classList.toggle('active');
menuToggle.classList.toggle('active'); //Toggle para la animación del menu hamburguesa
});
</script>
</body>
</html>
Cambios y explicaciones importantes:
Estructura del menú hamburguesa: Ahora el menú hamburguesa está compuesto por 3 spans con la clase bar, esto nos permite animar las líneas del menú cuando este se abre o se cierra, dandole un aspecto mucho mas visual.
Flexbox en el header: Se añade display: flex al header para controlar mejor la posición del menú y el botón de hamburguesa. Usamos justify-content: space-between para separarlos a los extremos y align-items: center para alinearlos verticalmente.
Media Query Refinada: Se han ajustado los estilos dentro de la media query para que el menú se comporte correctamente en pantallas pequeñas.
Javascript mejorado: El Javascript ahora utiliza classList.toggle('active') para alternar la clase activetanto en el menú como en el menu hamburguesa. Esto facilita la gestión del estado del menú y es una mejor práctica. También se usa const para declarar las variables que no se van a modificar.
Animación del menú hamburguesa: Se agregaron estilos para que el menú hamburguesa se transforme en una «x» cuando este se abre, esto se logra ocultando la barra de en medio y rotando las barras superior e inferior.
Con estas mejoras, el menú hamburguesa funciona de manera más robusta y ofrece una mejor experiencia de usuario. Ahora, al hacer clic en el icono de hamburguesa en pantallas pequeñas, el menú se despliega suavemente y el icono se transforma en una «x», y al volver a hacer clic, el menú se oculta y el icono vuelve a su forma original. Recuerda reemplazar "imagen.gif" con la ruta de tu imagen.
Añade el código html para el pie de página con el copyright en php.
Añadir un pie de página con copyright en PHP es sencillo y te permite actualizar automáticamente el año. Aquí te presento cómo integrarlo en el código HTML que hemos estado trabajando, y te explico las diferentes maneras de hacerlo, incluyendo una opción para mostrar un rango de años si es necesario:
Estilos CSS: Se han añadido estilos CSS para dar formato al pie de página, incluyendo color de fondo, padding, centrado del texto y un margen superior para separarlo del contenido principal. Se usa flexbox para centrar el contenido del footer y para mostrar las opciones del nav uno al lado del otro. También se agrego un media query para que el footer sea responsive, apilando los elementos verticalmente en pantallas pequeñas.
Contenido Adicional en el Footer: Se agregó un nav para mostrar links al aviso legal o a la politica de privacidad.
Otras opciones y consideraciones:
Rango de años: Si el sitio web se creó en un año anterior al actual, es común mostrar un rango de años:
Este código mostrará «2020» si el año actual es 2020, y «2020 – 2024» si el año actual es 2024.
Archivo separado (recomendado para proyectos más grandes): Para una mejor organización, puedes crear un archivo separado para el pie de página (ej. footer.php) y luego incluirlo en tu archivo principal con <?php include 'footer.php'; ?>.
Esta última opción es la más limpia y mantenible, especialmente si tienes un sitio web con varias páginas. Recuerda que para que el código PHP se ejecute, tu archivo principal debe tener la extensión .php (ej. index.php). Con estas mejoras, tu pie de página estará completo, dinámico y bien estructurado.
Abre el Código Completo de la Página Web de la Demo
