✅ 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.
El IBAN (International Bank Account Number) es el identificador internacional de una cuenta bancaria. Su cálculo se basa en un algoritmo matemático normalizado que determina los dígitos de control mediante la operación módulo 97.
Con la calculadora de DooDom puedes realizar esta operación directamente desde la página de la herramienta.
En España, el IBAN consta de 24 caracteres: el código de país (ES), dos dígitos de control y los 20 dígitos del Código Cuenta Cliente (CCC).
1. Partimos del número de cuenta
Tomamos como ejemplo un CCC español de 20 dígitos:
2100 0418 45 0200051332
2. Añadimos el código de país y dos ceros
Para calcular los dígitos de control del IBAN, colocamos el CCC seguido de ES00:
21000418450200051332ES00
3. Convertimos las letras en números
Según el estándar IBAN, las letras se sustituyen por valores numéricos: A = 10, B = 11, y así sucesivamente hasta Z = 35. Por tanto, E = 14 y S = 28.
La secuencia numérica resultante es:
21000418450200051332142800
4. Aplicamos el módulo 97
Calculamos el resto de dividir el número obtenido entre 97. Los dígitos de control se obtienen restando ese resto a 98:
Dígitos de control = 98 − (número módulo 97)
El cálculo puede realizarse por bloques para evitar manejar una cifra excesivamente grande en una sola operación.
5. Formamos el IBAN final
Colocamos el código de país, los dos dígitos de control calculados y el CCC original. El resultado se puede presentar en grupos de cuatro caracteres para facilitar su lectura.
ESXX 2100 0418 4502 0005 1332
XX representa los dígitos de control que deben calcularse. El ejemplo es esquemático y no debe utilizarse como un IBAN válido.
Calculadora de IBAN de DooDom
Utiliza la herramienta integrada para acceder a la calculadora sin salir de esta página. Si el contenido no se muestra correctamente, puedes abrirla directamente en una pestaña nueva.
Entrada: el usuario introduce su número de cuenta en los campos de la herramienta.
Cálculo: se aplican las reglas del estándar IBAN y el algoritmo de los dígitos de control.
Resultado: se obtiene el IBAN calculado y se presenta en un formato legible.
Privacidad de los datos
La privacidad depende de cómo esté implementada la calculadora. La integración mediante un iframe muestra otra página dentro de esta, pero no garantiza por sí sola que los datos introducidos se procesen exclusivamente en el navegador o que nunca se transmitan a un servidor.
Conclusión
El cálculo del IBAN se basa en un algoritmo matemático normalizado. La herramienta de DooDom permite realizar esta operación de forma cómoda desde una página integrada, sin necesidad de utilizar una imagen estática.
El modo oscuro es una opción de diseño que cambia los fondos claros de una página web por tonos oscuros y adapta los colores del texto para facilitar su lectura. Se ha popularizado en ordenadores, teléfonos móviles y aplicaciones, especialmente en entornos con poca iluminación.
En este artículo descubrirás cómo funciona, cuáles son sus ventajas y qué aspectos conviene tener en cuenta para incorporarlo correctamente a una página web.
¿Qué es el modo oscuro en una página web?
El modo oscuro, también conocido como dark mode, es una configuración visual que utiliza fondos negros, grises o azulados en lugar de fondos blancos. El texto y los elementos de navegación cambian de color para mantener un contraste adecuado.
Puede aplicarse a toda una página web, a determinadas secciones o a componentes específicos, como menús, formularios y paneles de configuración.
Demostración de una página web
Explora la siguiente demostración para observar una propuesta de diseño web con una apariencia oscura.
Una interfaz oscura puede resultar más cómoda para algunas personas cuando utilizan pantallas en habitaciones con poca luz. La comodidad depende de la iluminación ambiental, el brillo de la pantalla y las preferencias individuales.
2. Ahorro energético en determinadas pantallas
En pantallas OLED, los píxeles oscuros consumen generalmente menos energía que los brillantes. El ahorro real depende de la pantalla, del contenido mostrado y del dispositivo. En pantallas LCD, la diferencia suele ser menor.
3. Una apariencia visual diferente
Los fondos oscuros pueden aportar una estética moderna y destacar fotografías, vídeos, gráficos y elementos de interfaz, siempre que se mantenga una jerarquía visual clara.
4. Preferencias personales
Ofrecer una alternativa oscura permite que cada visitante elija la presentación que mejor se adapte a sus hábitos de lectura y a las condiciones en las que navega.
Cómo implementar el modo oscuro
Existen varias formas de incorporar esta función a un sitio web. La elección depende del diseño, del sistema de gestión de contenidos y de las necesidades de los visitantes.
Mediante CSS
Las hojas de estilo permiten definir una paleta alternativa para fondos, textos, bordes, menús y formularios. Es importante revisar todos los componentes para evitar que algunos elementos pierdan legibilidad.
Mediante las preferencias del dispositivo
La característica CSS prefers-color-scheme permite adaptar el diseño a la preferencia clara u oscura que tenga configurada el usuario en su sistema operativo o navegador.
Mediante un selector manual
También puede añadirse un control que permita alternar entre modo claro y oscuro. Para ofrecer una experiencia consistente, el sitio debe gestionar correctamente la selección y comprobar que el estado del control se comunica a las tecnologías de asistencia.
Accesibilidad y buenas prácticas
Un modo oscuro bien diseñado no consiste simplemente en invertir todos los colores. Para ofrecer una experiencia de calidad, conviene aplicar estas recomendaciones:
Contraste suficiente: el texto debe distinguirse claramente del fondo.
Lectura cómoda: utiliza tamaños de letra apropiados y evita párrafos excesivamente largos.
Enlaces visibles: no dependas exclusivamente del color para diferenciarlos del texto normal.
Imágenes y logotipos: comprueba que sigan siendo visibles sobre fondos oscuros.
Formularios y controles: adapta botones, campos, menús desplegables y estados de foco.
Elección del visitante: cuando sea posible, permite alternar entre los dos modos sin perder el contexto de navegación.
¿Es recomendable utilizarlo en todas las webs?
No necesariamente. El modo oscuro puede ser una buena opción para sitios tecnológicos, plataformas de vídeo, herramientas de trabajo y páginas que se utilizan frecuentemente en ambientes poco iluminados. Sin embargo, una interfaz clara puede funcionar mejor en determinados contextos editoriales, educativos o comerciales.
La decisión debe basarse en el tipo de contenido, la identidad visual del sitio y las necesidades de sus visitantes. Si se ofrece como alternativa, ambos modos deben mantener una navegación coherente y accesible.
Conclusión: el modo oscuro amplía las posibilidades de diseño y personalización de una página web. Sus ventajas dependen del dispositivo y del entorno, por lo que la prioridad debe ser mantener la legibilidad, el contraste y una experiencia de navegación accesible.
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:
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; /* 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
Este sitio utiliza solo cookies propias necesarias para su funcionamiento
y para recordar tus preferencias de consentimiento. No empleamos cookies
de publicidad ni de seguimiento.
