Existen varias maneras de mostrar con un ejemplo la imagen de la Tierra en órbita en HTML, desde las más sencillas usando imágenes estáticas con animación CSS, hasta las más complejas utilizando bibliotecas 3D como Three.js. Aquí te presento dos ejemplos: uno sencillo con CSS y otro más avanzado con Three.js.
1. Usando CSS (animación 2D):
Este método es el más sencillo y eficiente para animaciones básicas. Usaremos una imagen de la Tierra y la haremos rotar.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tierra en Órbita (CSS)</title>
<style>
body {
background-color: #000; /* Fondo negro para simular el espacio */
overflow: hidden; /* Evita barras de scroll */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.orbita {
width: 400px; /* Ajusta el tamaño de la órbita */
height: 400px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2); /* Órbita tenue */
position: relative;
animation: orbitar 10s linear infinite; /* Animación de la órbita */
}
.tierra {
width: 100px; /* Ajusta el tamaño de la Tierra */
height: 100px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%); /* Centra verticalmente */
border-radius: 50%;
background-image: url('earth.jpg'); /* Reemplaza con la ruta de tu imagen de la Tierra */
background-size: cover;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* Brillo */
}
@keyframes orbitar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="orbita">
<div class="tierra"></div>
</div>
</body>
</html>
Explicación:
earth.jpg: Debes reemplazar esto con la ruta a una imagen de la Tierra. Puedes buscar imágenes de la Tierra en formato PNG o JPG, preferiblemente con fondo transparente si quieres un mejor efecto.
.orbita: Este div crea un círculo que representa la órbita. La animación orbitar lo rota.
.tierra: Este div contiene la imagen de la Tierra y se posiciona dentro de la órbita. El transform: translate(-50%, -50%); centra verticalmente la Tierra dentro de la órbita.
@keyframes orbitar: Define la animación de rotación. linear hace que la rotación sea a velocidad constante, infinite la repite continuamente.
2. Usando Three.js (animación 3D):
Este método ofrece un resultado mucho más realista, permitiendo la rotación 3D de la Tierra y otros efectos. Requiere incluir la biblioteca Three.js.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tierra en Órbita (Three.js)</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.SphereGeometry( 1, 32, 32 );
const texture = new THREE.TextureLoader().load( 'earth.jpg' ); // Reemplaza con tu imagen
const material = new THREE.MeshBasicMaterial( { map: texture } );
const earth = new THREE.Mesh( geometry, material );
scene.add( earth );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
earth.rotation.y += 0.005; // Velocidad de rotación
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
Explicación
Se incluye la biblioteca Three.js desde un CDN.
Se crea una escena, una cámara y un renderizador.
Se crea una esfera (la Tierra) y se le aplica una textura (tu imagen earth.jpg).
La función animate se encarga de renderizar la escena y rotar la Tierra continuamente.
Para usar este código:
Guarda una imagen de la Tierra: Busca una imagen adecuada y guárdala en el mismo directorio que tu archivo HTML, o proporciona la ruta correcta en el código.
Crea un archivo HTML: Copia el código HTML que prefieras (CSS o Three.js) y guárdalo como un archivo .html (por ejemplo, index.html).
Abre el archivo en tu navegador: Abre el archivo index.html con tu navegador web.
La versión con Three.js ofrece un resultado mucho más profesional y permite añadir más efectos como iluminación, nubes, etc. Sin embargo, requiere un poco más de conocimiento de JavaScript y la biblioteca Three.js.
Canvas HTML, utiliza el elemento <canvas> para dibujar gráficos a través de JavaScript. Canvas tiene varios métodos para dibujar rutas. Canvas es compatible con todos los navegadores principales.Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.
Atributos
width
La anchura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 300.
height
La altura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 150.
Sobre Accesibilidad
El elemento <canvas> es simplemente un bitman que no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta canvas no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.
A primera vista, un elemento <canvas> es parecido al elemento <img>, con la diferencia que este no tiene los atributossrcy alt. El elemento <canvas>tiene solo dos atributos – width y height. Ambos son opcionales y pueden ser definidos usando propiedades.
El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.
Contenido alternativo
El elemento <canvas> se diferencia de un tag <img> en que, como los elementos <video>, <audio> o <picture>, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento <canvas>, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.
EJEMPLOS DE CANVAS HTML
Métodos básicos de dibujo
El contexto 2D del canvas HTML ofrece una variedad de métodos para dibujar formas, líneas y texto. Aquí tienes algunos de los más utilizados:
fillRect(x, y, width, height): Dibuja un rectángulo relleno.
strokeRect (x, y, width, height): Dibuja solo el contorno de un rectángulo.
clearRect (x, y, width, height): Borra una sección del canvas.
Veamos un ejemplo fácil de JavaScript. Vamos a crear una página web HTML, con un enunciado que nos indique la hora actual.
JavaScript es un lenguaje de secuencias de comandos que te permite crear contenido de actualización dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás.
Siguiendo con el ejemplo, vamos a ver una pequeña introducción, donde podrás:
Primero descargar el código.
Comprobar el funcionamiento del script-reloj.
Y Ver las líneas de código HTML y JavaScript que lo componen.
Funciones de JavaScript
Los creadores de código, suelen utilizar este método cuando trabajan en proyectos de gran magnitud, ya que así mantienen el script organizado. Además, permite reutilizar el script en varias páginas HTML, algo que los desarrolladores valoran mucho. Puedes crear y modificar el código JavaScript utilizando un editor de texto.
¿Qué aplicaciones usan JavaScript?
Entre las aplicaciones más populares creadas con esta tecnología podemos encontrar a:
Visual Studio Code.
Atom.
WordPress, la Aplicación de Escritorio.
Slack, aplicación de Escritorio.
Github, aplicación de Escritorio.
Twitch, aplicación de Escritorio.
LightTable, Editor de Código Multiplataforma.
Hyper.
Pueden ver el código JavaScript, el ejemplo práctico de una página web HTML con JavaScript, en el que podrás ver la Hora actual en un encabezado de una página web. También tienen la posibilidad de descargar el código mediante un botón. Para ello hagan clic en el enlace que está justo debajo de este párrafo.
Las fuentes web CSS permiten a los diseñadores web usar fuentes que no están instaladas en el ordenador del usuario.
Cuando haya encontrado/comprado la fuente que desea usar, simplemente incluya el archivo de fuente en su servidor web y se cargará automáticamente cuando lo necesite.
Sus fuentes «propias» se definen dentro de la @font-faceregla CSS.
Diferentes formatos de fuente
Fuentes TrueType (TTF)
TrueType es un estándar de fuente desarrollado a fines de la década de 1980 por Apple y Microsoft. TrueType es el formato de fuente más común para los sistemas operativos Mac OS y Microsoft Windows.
Fuentes OpenType (OTF)
OpenType es un formato para fuentes de computadora escalables. Fue construido en TrueType y es una marca registrada de Microsoft. Las fuentes OpenType se usan comúnmente hoy en día en las principales plataformas informáticas.
El formato de fuente abierta web (WOFF)
WOFF es un formato de fuente para usar en páginas web. Fue desarrollado en 2009 y ahora es una recomendación delW3C. WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales. El objetivo es admitir la distribución de fuentes desde un servidor a un cliente a través de una red con restricciones de ancho de banda.
El formato de fuente abierta web (WOFF 2.0)
Fuente TrueType/OpenType que proporciona una mejor compresión que WOFF 1.0.
Fuentes SVG/Formas
Las fuentes SVG permiten usar SVG como glifos al mostrar texto. La especificación SVG 1.1 define un módulo de fuente que permite la creación de fuentes dentro de un documento SVG. También puede aplicar CSS a documentos SVG y la regla @font-face se puede aplicar al texto en documentos SVG.
Fuentes OpenType incrustadas (EOT)
Las fuentes EOT son una forma compacta de fuentes OpenType diseñadas por Microsoft para su uso como fuentes incrustadas en páginas web.
USAR UNA FUENTE DE TEXTO
En la@font-face regla; primero defina un nombre para la fuente (por ejemplo, myFirstFont) y luego apunte al archivo de fuente.
Sugerencia:utilice siempre letras minúsculas para la URL de la fuente. Las letras mayúsculas pueden dar resultados inesperados en IE.
Para usar la fuente para un elemento HTML, consulte el nombre de la fuente (myFirstFont) a través de la font-family propiedad:
Sois creadores de dibujos, descubre la Pizarra de Dibujo, y demuestra tus habilidades. Se trata de un lienzo negro para dibujar lo que quieras.
Es un script para dibujar con el ratón en el ordenador, y de forma táctil en otros dispositivos electrónicos. Se construye sin depender de ninguna librería externa (como pueda ser jQuery), solo Javascript Vainilla y la etiqueta Canvas. Crea tus dibujos a mano alzada, con esta Pizarra de Dibujo.
Haz clic dentro del cuadro para dibujar
Puedes ver también como funciona un Editor de Firma Digital más completo, en el siguiente enlace
La captura de la firma para documentos es ya una realidad en múltiples sectores: correos, paquetería, supermercados, notarías, etc. Con un módulo de firma digital, sus procesos de captura de firma quedan reducidos a un único trabajo: QUE EL CLIENTE FIRME LA TABLETA DE CAPTURA DE FIRMA.
HTML
Declaramos nuestra etiqueta canvas, donde se dibujarán las líneas.
Es importante que miCanvas.width y miCanvas.height tengan el mismo tamaño que los declarados en el CSS, sino la línea se saldrá del lienzo.
//======================================================================
// VARIABLES
//======================================================================
let miCanvas = document.querySelector('#pizarra');
let lineas = [];
let correccionX = 0;
let correccionY = 0;
let pintarLinea = false;
// Marca el nuevo punto
let nuevaPosicionX = 0;
let nuevaPosicionY = 0;
let posicion = miCanvas.getBoundingClientRect()
correccionX = posicion.x;
correccionY = posicion.y;
miCanvas.width = 1200;
miCanvas.height = 1200;
//======================================================================
// FUNCIONES
//======================================================================
/**
* Funcion que empieza a dibujar la linea
*/
function empezarDibujo() {
pintarLinea = true;
lineas.push([]);
};
/**
* Funcion que guarda la posicion de la nueva línea
*/
function guardarLinea() {
lineas[lineas.length - 1].push({
x: nuevaPosicionX,
y: nuevaPosicionY
});
}
/**
* Funcion dibuja la linea
*/
function dibujarLinea(event) {
event.preventDefault();
if (pintarLinea) {
let ctx = miCanvas.getContext('2d')
// Estilos de linea
ctx.lineJoin = ctx.lineCap = 'round';
ctx.lineWidth = 10;
// Color de la linea
ctx.strokeStyle = '#fff';
// Marca el nuevo punto
if (event.changedTouches == undefined) {
// Versión ratón
nuevaPosicionX = event.layerX;
nuevaPosicionY = event.layerY;
} else {
// Versión touch, pantalla tactil
nuevaPosicionX = event.changedTouches[0].pageX - correccionX;
nuevaPosicionY = event.changedTouches[0].pageY - correccionY;
}
// Guarda la linea
guardarLinea();
// Redibuja todas las lineas guardadas
ctx.beginPath();
lineas.forEach(function (segmento) {
ctx.moveTo(segmento[0].x, segmento[0].y);
segmento.forEach(function (punto, index) {
ctx.lineTo(punto.x, punto.y);
});
});
ctx.stroke();
}
}
/**
* Funcion que deja de dibujar la linea
*/
function pararDibujar () {
pintarLinea = false;
guardarLinea();
}
//======================================================================
// EVENTOS
//======================================================================
// Eventos raton
miCanvas.addEventListener('mousedown', empezarDibujo, false);
miCanvas.addEventListener('mousemove', dibujarLinea, false);
miCanvas.addEventListener('mouseup', pararDibujar, false);
// Eventos pantallas táctiles
miCanvas.addEventListener('touchstart', empezarDibujo, false);
miCanvas.addEventListener('touchmove', dibujarLinea, false);
Para llevar esta Pizarra de Dibujo a tu sitio web, haz clic en el enlace de abajo.
Las metaetiquetas HTML suministran información codificada a navegadores y motores de búsqueda sobre una página web. Las metaetiquetas tienen una estructura determinada. Primero se define un elemento y segundo se asigna un contenido. el esquema es el siguiente:
<meta name="Nombre del elemento" content="Contenido asignado"/>
Tipos de Metaetiquetas
Metaetiqueta Title
Como elemento obligado en el encabezado de la página web HTML, el título se sitúa por encima de todas las demás etiquetas en primer lugar. Los navegadores lo leen y aparece en la barra del título de una pestaña o una ventana como nombre estándar de la página en la lista de favoritos y en el historial del navegador.
Para una buena optimización la longitud máxima de caracteres no debe ser mayor de 50. También hay que insertar la palabra clave principal en la «metaetiqueta title»:
<title>Las Metaetiquetas HTML | NEOAL.COM</title>
Codificación de caracteres Utf-8
Es necesario definir la fuente indicando la etiqueta HTML correspondiente. Un ejemplo claro es la visualización en pantalla de la ñ o las tildes. Esta metaetiqueta es fundamental en el caso de que un navegador acceda a los archivos HTML directamente desde el disco duro y no los reciba por HTTP.
<meta charset="utf-8"/>
Metaetiqueta Lang
La metaetiqueta «lang» le indica al buscador el idioma en el que está escrita la página. El código «es» corresponde al idioma español, y el código «ES» corresponde al código de país (España).
<html lang="es-ES">
Metaetiqueta Viewport
HTML5 introdujo un método para permitir que los diseñadores web tomen el control de la ventana gráfica, a través de una metaetiqueta. Debe incluir la siguiente metaetiqueta de elemento de ventana gráfica en todas sus páginas web.
El elemento «width=device-width» establece el ancho de la página para seguir el ancho de la pantalla del dispositivo (que variará según el dispositivo. El elemento “initial-scale=1.0” establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Metaetiqueta Description
Como su propio nombre indica es una metaetiqueta en la que introduciremos una descripción de la página web. Esta información se muestra como snippet (un resumen en dos líneas del tema de una página que aparece bajo la URL). Realiza una función importante en el resultado de la elección de búsqueda del usuario. Esta metaetiqueta es considerada una de las más importantes.
La descripción no debe sobrepasar los 160 caracteres de longitud, ya que puede aparecer incompleta en la lista de resultados de búsqueda. El resumen debe ser preciso, y abordar los elementos claves del contenido de la página web.
<meta name="description" content="Las metaetiquetas de HTML codifican información para ser interpretada por el navegador y los buscadores."/>
Metaetiqueta Keywords
Esta metaetiqueta permite definir las palabras clave para el buscador. Hoy en día esta metaetiqueta ha perdido valor en relación con el SEO, fundamentalmente porque es ignorado por Google y su importancia ha sido minimizada en Bing y el resto de buscadores.
La elección de palabras clave debe evitar el uso abusivo, y centrarse en los términos más relevantes. Las palabras clave se separan por comas.
Esta metaetiqueta permite hacer referencia al diseñador de una página web y al propietario de los derechos del código fuente de una página HTML.
<meta name="author" content="Nombre del autor"/>
<meta name="copyright" content="Propietario del copyright"/>
Metaetiqueta Canonical
La etiqueta canónica sirve para indicarle a los buscadores cuál es la URL que quieres que aparezca en los resultados y así evitar problemas causados por enlaces idénticos o duplicados.
La función principal de esta metaetiqueta es proporcionar instrucciones de indexación a los (robots o googlebots). Con la siguiente metaetiqueta es posible introducir la indexación de una página, y su disponibilidad en la búsqueda.
También se puede establecer si los robots han de seguir los enlaces salientes o si han de ignorarlos. Esta información se encuentra entre los metadatos más relevantes para el SEO.
Index «index» permite al robot de búsqueda la indexación de una página HTML.
<meta name="robots" content="index"/>
Noindex «noindex» sirve para indicar que una página HTML sea excluida en el índice. Esta metaetiqueta prohíbe al buscador transferir contenidos de una página HTML a su base de datos.
<meta name="robots" content="noindex"/>
Robots «robots» se dirige a todos los buscadores. Follow «follow»: de forma predeterminada los motores de búsqueda recorren los enlaces que encuentran en una página HTML, a no ser que se les indique lo contrario. Esta información se puede incluir en las metaetiquetas.
<meta name="robots" content="follow"/>
Nofollow «nofollow» sirve para impedir que un robot de búsqueda alcance determinadas sub-páginas de un sitio o rastree los enlaces en otro dominio. El robot ignora los enlaces pero no el contenido de la página.
<meta name="robots" content="nofollow"/>
Metaetiqueta Equiv
La metaetiqueta con el atributo “http-equiv” puede contener información equivalente a los indicadores en el encabezado HTTP, la cual puede ser leída, por ejemplo, si el servidor no está configurado como corresponde. Los encabezados HTTP con el mismo nombre tienen prioridad frente a las metaetiquetas HTML.
Control de caché «cache-control» Las webs se suelen guardar en el caché del navegador para ser descargadas más rápido en el futuro. Para impedirlo usamos la metaetiqueta «cache-control» con el valor no-cache.
Las páginas web que tienen esta metaetiqueta se vuelven a cargar de nuevo desde el servidor cada vez que se accede a ellas. Esto puede hacer que el navegador vaya más lento, pero es muy conveniente para páginas que actualizan su contenido diariamente.
Expires. Es posible que no se quiera prohibir el almacenamiento temporal en caché de forma absoluta. En este caso se puede usar el atributo «http-equiv» para definir una fecha de expiración para los datos HTML. Así es posible asignar a las páginas HTML la fecha de caducidad.
<meta http-equiv="expires" content="tiempo de expiración en segundos"/>
También es posible definir períodos de tiempo o fechas concretas, siempre en formato internacional y según el GMT (Greenwich Mean Time)
<meta http-equiv="expires" content="Sat, 04 Feb 2025 00:00:00 GMT"/>
Refresh. Con la metaetiqueta «http-equiv» es posible configurar también una transferencia sencilla. Con este atributo también se define fecha de vencimiento. En este ejemplo, en 30 segundos se produce el reenvío a la página principal de NEOAL.COM.
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, y los anuncios se muestran sin utilizar
cookies.
