¿Cómo ocultar mouse pasado un tiempo JavaScript?

Imagen
Hola hoy les traigo un efecto que nos puede servir en alguna ocasión para algún proyecto y ese es ocultar el cursor del mouse pasado x tiempo Las tecnologías que usaremos son: HTML: para crear la estrucura y los elementos necesarios CSS: utilizaremos la propiedad cursor para cambiar el cursor JavaScript: manejaremos todo lo necesario para realizar este proyecto usaremos ,setTimeout ,manejo de eventos addEventListener entre otros ¿Para qué nos puede servir esto? Pues en primer lugar y para lo que yo lo he usado es para crear mis reproductores personalizados de HTML5, después de un tiempo de inactividad del mouse se oculta el cursor logrando ver solo la pantalla, hay otras funcionalidades que les puedes dar y puedes usarlo para lo que realmente desees no solo ocultar el cursor pero en esta ocasión he decidido usar este ejemplo <div id="contenido"> </div> <style> /* le damos un estilo a nuestro div */ #contenido{

Comenzando con HTML tutorial basico


Hola hoy les traigo digamos los conceptos más básicos para empezar con HTML, la verdad es  muy sencillo y te puede parecer algo abstracto en un principio pero hay que decir que nos brinda muchas posibilidades al ser prácticamente el lenguaje base por así decirlo de las páginas webs que crearemos en conjunto con otros más pero primero lo primero.

Debemos saber que las páginas webs tienen extensión html muy lógico por el lenguaje ya es un punto a favor pero como empezamos el proyecto y mostramos algo en pantalla.
Para empezar sigamos estos pasos:

1. Crear un nuevo documento de texto (click derecho nuevo >documento de texto)




2. Debemos cambiar la extensión de este archivo que está en .txt a .html 

*Nos podemos dar cuenta en la siguiente imagen como al cambiar la extensión cambia el icono
   
        
3. Abrir este nuevo archivo con algún editor de textos (ojo no puede tener formato el texto estamos hablando del Word o programas parecidos esos no funcionaran) podríamos usar el Bloc de notas  de Windows  u otro editor que no le de estilo al texto notepad++ Visual Studio Code entre otras muchas más tu escoges. 

 *Abrimos el documento que creamos con extensión html en un editor de texto para este ejemplo usamos el bloc de notas ya que es un programa que viene de forma predeterminada 

Explicación por si no entendiste lo que paso anteriormente 

En el paso uno creamos un archivo de extensión .txt , luego en el paso 2 cambiamos esa extensión .txt a .html, deben tener en cuenta que si en sus ordenadores no se ve la extensión tendrán que habilitarlo para que se vea van a view o ver en español  y hay una opción para ver las extensiones la marcan y listo luego renombramos y nos permite cambiar la extensión .Ahora en el tercer paso debemos abrir ese archivo que creamos con extensión html abrimos el editor de texto y  arrastramos  el archivo hacia el editor o click derecho abrir con y seleccionamos el editor de texto ,listo ya tenemos nuestro entorno desarrollo.
Como sabemos que esto está funcionando pues probemos:
Escribiremos en el editor de texto cualquier texto, letra, palabra o lo que queramos en mi caso pondré Hola Mundo guardare en archivo> guardar  y si abrimos el archivo dándole doble clic notaremos el texto en el navegador Hola Mundo.  

Escribimos cualquier texto en el editor en mi caso Hola Mundo 

Luego Guardamos

Resultado




Si habéis llegado hasta aquí y les ha funcionado todo bien sino algo habéis hecho mal me pueden preguntar cualquier duda en los comentarios sino podemos seguir hacia la estructura básica de HTML.
HTML está formado por etiquetas una de inicio y una de cierre para el inicio se usa <elemento> y la de cierre  </elemento> eso va  a ser así para todos los elementos que usemos ahora veamos que son los elementos bueno empecemos por cómo está estructurado un documento HTML básico mirad
<html>
<head>
<title>Aquí va el título del texto </title>
</head>

<body>
Hola Mundo
</body>
</html>
Codigo en el editor de texto 

Resultado en nuestro navegador




 html nos sirve para identificar que estaremos creando una página HTML entre esas etiquetas ira todo nuestro contenido html.

head si sabemos un poco de inglés básico sabemos que significa cabeza así que  en este se va a ubicar la cabeza de nuestra página( aquí se encontrara la información general del documento exceptuando algunos iconos y el titulo esta información es invisible para el usuario ejemplo de etiquetas que colocaremos en esta etiqueta son las llamadas a archivos CSS JavaScript, keywords (palabras claves) ,etc  ).

title es el título de la página se pone dentro de las dos etiquetas.

body es el cuerpo  de la página por lo general en esa sección desarrollaremos nuestra página.


Estas no son los únicos elementos de HTML existe una gran variedad de elementos a los que se le pueden aplicar atributos pero eso en otro momento.

Bueno esa es la estructura más básica de un documento  html si tienen alguna duda házmelo saber en los comentarios, si deseas que hable de algún tema de programación web o algún tema en específico estaría agradecido de ayudaros hasta pronto Chao.

Si les gusto el contenido de este blog podréis encontrar información muy interesante en mi blog filowebs.blogspot.com que te puede servir  ayuda GRACIAS. 

Comentarios

Entradas más populares de este blog

Variables en JavaScript

¿Cómo ocultar mouse pasado un tiempo JavaScript?

Ejemplos Date con JavaScript