HTML5 Avanzado Volumen 2

VIE, 5 / MAR / 2021
Tapa ebook HTML 5 Avanzado volumen 2

Para empezar

Esta es la segunda entrega de HTML5 Avanzado, se trata de una colección de 3 ebook en la que encontrarás todo lo que necesitas saber para conocer el lenguaje HTML en profundidad, desde su sintaxis y etiquetas más usadas hasta los aspectos menos conocidos del estándar. La colección es exclusiva de RedUSERS PREMIUM y puedes accederla en los siguientes links: HTML5 AVZ v1; HTML5 AVZ v2 y HTML5 AVZ v3. A continuación, los primeros temas correspondientes al Vol. 2

Eventos HTML

Al trabajar con HTML, lo más común es intercalar el desarrollo con otras tecnologías, como JavaScript, CSS, y también lenguajes del lado del servidor, como, por ejemplo, Java, PHP, C#, Python, por mencionar algunos.

Primeros pasos

En todo proyecto web, será necesario que el desarrollador conozca cómo conectar la interfaz gráfica con los lenguajes de programación que se vayan a utilizar, ya sea JavaScript en el cliente o algún lenguaje del servidor, que envíe cambios del estado de los componentes y que se puedan seleccionar con facilidad.

Lo más habitual es que, por medio de JavaScript, los elementos cambien algo en su estado al suceder cierta acción, por lo que HTML provee de una serie de atributos, conocidos como eventos, que permiten definir qué ocurrirá en caso de que suceda determinado evento. Los eventos pueden ser muy variados y tener relación con las acciones que un usuario realiza en la página web, como hacer clic, arrastrar un elemento, escribir, imprimir la página, redimensionar la ventana, pausar o reproducir un video, abrir otra ventana, y muchísimas otras acciones más.

Todos estos eventos pueden ser capturados por el desarrollador, y mediante código, es posible indicar qué comportamiento tendrá el sitio web tras producirse un evento desencadenado por el usuario.

Por otro lado, existen otros eventos, más relacionados con el servidor o los servidores que proveen información, y el lenguaje HTML también posee muchos selectores de eventos para estas situaciones, por ejemplo, cuando un documento carga, cuando un elemento multimedia comienza a solicitarse y cargarse en el navegador, cuando se producen modificaciones en el sitio o se recarga, cuando se cierra el sitio, antes de que se cargue el documento, y más.

Cada una de estas situaciones puede disparar una acción determinada, creada por medio de código, por parte del desarrollador. Para ello, es necesario conocer de qué eventos se dispone y la manera de utilizarlos. Antes de continuar, es importante aclarar que, cuando se hable de etiquetas HTML, sea la que sea, se las nombrará como etiquetas HTML o componentes, para respetar la nomenclatura utilizada por la mayoría de los frameworks populares del front end.

Varios frameworks del front end permiten crear etiquetas personalizadas.

Cuando se utilizan entornos de trabajo, como Angular, o librerías, como React, es posible crear etiquetas propias, denominadas componentes, que pueden reutilizarse en varias partes de una aplicación. Dentro de ellas, se coloca la lógica necesaria para manipular distintos eventos, como un usuario que hace clic, abre o cierra el sitio, carga o reproduce un elemento multimedia, entre otros.

Quizás el evento más utilizado sea onclick, que permite capturar cuando el usuario realiza clic sobre un componente de un sitio, y puede realizar cualquier tipo de función en JavaScript, por ejemplo, cambiar estilos, ocultar el elemento, lanzar un evento, o cualquier otra lógica que se defina dentro de una función.

Las funciones son porciones de código que se definen una vez y se ejecutan cada vez que son llamadas, algo común en los eventos. Para aprender más puedes leer el ebook Java Script.Para empezar, lo primero que necesitarás saber es cómo se captura un evento HTML, lo cual veremos a continuación. Crea un nuevo documento HTML y coloca en su interior las etiquetas básicas de estructura:

Dentro del body, incluye una nueva etiqueta <div>, y en su interior, anida una etiqueta <p>. Una vez hecho esto, coloca un atributo id a la etiqueta <p> y algo de texto de prueba en su interior.Por último, colócale el evento onclick de la siguiente manera:

De este modo, lo que en realidad estás indicando es que, al realizar clic en el componente <p>, se llamará a algún código, definido en alguna parte del documento (Figura siguiente).

Primero será necesario darle un nombre a ese código, por ejemplo, mi_funcion(); hay que declararlo dentro de las etiquetas HTML <script></script> o en un documento JavaScript externo. Si conoces un poco sobre la sintaxis de JavaScript, sabrás que el nombre que le has dado a la función es algo similar a un identificador, y que los paréntesis indican que no es necesario ningún atributo. No es preciso que comprendas a la perfección JavaScript para entender estos ejemplos, pero sería importante que lo aprendas para desarrollar un sitio completo.

Librerías como JQuery permiten acceder a eventos como el clic, lo que simplifi ca el código HTML y JavaScript.

 Ahora hay que colocar ese nombre de la función dentro de las comillas del evento onclick, y luego, darle algún tipo de comportamiento dentro de las etiquetas <script>:

Para entender este código, hay que repasarlo línea a línea. El evento onclick está preparado para buscar dentro del documento una función o bloque de código llamado mi_funcion(), ya que así se lo has indicado dentro del evento. Luego, más abajo, se abren las etiquetas <script>, y allí se declara el comportamiento de la función.

Dentro de las etiquetas <script> se coloca la cabecera o firma del método o función (ambos nombres son adecuados), y entre las llaves, se declara el comportamiento. En este caso, primero se llama al objeto documento, indicando que se va a realizar algo en él; luego, un punto para llamar a su método getElementById() y se selecciona el párrafo mediante el atributo id.

A continuación, nuevamente se usa un punto para llamar a un método que cambiará el estilo del elemento HTML, en este caso, el color de fondo, y se le indica que este ahora será grey, es decir, gris.

Si abres este documento en un navegador, verás el texto que has creado, y si haces clic encima, el color de fondo cambiará a gris. Cuando recargas el documento, ves cómo vuelve a ser blanco por defecto. Puedes intentar cambiar los colores de fondo, tanto el inicial como el que cambia el código JavaScript, o utilizar notación RGB, hexadecimal o HSL, en vez de solo el nombre del color, para lograr mayor combinación. Además, es posible definir otras reglas CSS para cambiar, el color del texto, los márgenes o la fuente:

Por otra parte, es muy habitual que este tipo de comportamiento se defina en botones, para cambiar las propiedades CSS desde diferentes eventos en distintos botones, o también crear nuevos elementos, ocultarlos o mostrarlos.

JQuery es de fácil instalación, y puede incluirse en el desarrollo desdesu sitio https://jquery.com.

 Botones de acción

Una de las maneras más frecuentes de manipular eventos en páginas web es mediante la creación de botones que llamen al código JavaScript. En caso de que el usuario haga clic en ellos, espera que cierta acción ocurra. Define en tu documento un botón HTML y colócale el evento onclick:

Bootstrap ofrece una amplia variedad de estilos de botones con poco código HTML.

 Luego, dale al evento el nombre mostrar(), sin olvidar los paréntesis que se abren y se cierran, y luego, dentro de las etiquetas HTML <script>, crea el método de la siguiente manera:

Así se creó el método o función en JavaScript y quedó ligado correctamente al botón. Sin embargo, si abres el documento y haces clic sobre el botón, no sucederá nada, ya que no se ha definido ningún código en su interior. Dentro del método JavaScript, puede colocarse cualquier tipo de código, en este caso, esta función se encargará de crear algo de texto y mostrarlo debajo del botón. Dentro del método, incluye el siguiente código:

De este modo, se captura el componente con el identifi cador párrafo, que aún no se ha creado, y se guarda en una variable, llamada párrafo. Luego, se utiliza el método de JavaScript innerHTML para agregarle algo de texto al párrafo.Es interesante señalar que la función innerHTML permite sumar texto a un componente pero, además, permite agregar código HTML, como en este ejemplo. Lo primero que se está agregando es un salto de línea, para que el texto no aparezca uno junto al otro cada vez que se llame a la función a través del evento, por medio de la etiqueta HTML <br />.Ahora, solo falta crear un contenedor abajo del botón, que almacenará el texto a ser creado. Para hacerlo, debes crear una etiqueta <div> debajo del botón y colocarle como atributo id el valor párrafo.Si la tarea es solamente cambiar el texto de algún elemento, lo más sencillo sería que, en vez de crear funciones de JavaScript, coloques el código dentro del evento HTML. Para lograrlo, crea un nuevo botón por debajo del que ya generaste y colócale el evento onclick:

Dentro del evento onclick, puedes colocar la acción que el clic del usuario debe desencadenar, por ejemplo:

Como puedes ver, para casos en los que solo tienes que cambiar algo sencillo, como el texto en un botón o en otro tipo de componente, es posible colocar el código dentro del mismo evento HTML, aunque por lo general, se recomienda separar más la lógica y el código JavaScript del HTML, para mantener un mejor orden.

Además del evento onclick, existen muchísimos otros. Por ejemplo, onmouseover es un evento que se dispara cada vez que el usuario pasa el mouse por encima del componente HTML. Para ver esto, puedes editar el botón con identificador botón_1, simplemente cambiando el evento onclick por onmouseover; al guardar y abrir el documento en el navegador, verás que ahora no es necesario hacer clic para ver el texto, sino que, al pasar el mouse por encima, se va creando el texto una y otra vez.

React es una herramienta útil para crear interfaces modulares y con componentes reutilizables.

Se puede lograr un ejemplo un poco más elaborado para que, cada vez que el usuario coloca el mouse sobre un elemento, aparezca un texto, pero al quitarlo, este se vaya.

Para lograrlo, tendrás que hacer uso del evento onmouseout, el cual se comporta de forma parecida al anterior, pero en vez de dispararse cuando el usuario coloca el mouse encima, se desencadena cuando el usuario corre el mouse fuera del componente.

Crea una etiqueta HTML de título, en alguna parte del documento o en un documento nuevo, y colócale los eventos onmouseover y onmouseout. Luego, crea otra etiqueta por debajo de la primera, de tipo <div>, con un identificador:

Ahora este componente <h2> tiene listos dos eventos, pero no están apuntando a ninguna función de JavaScript, por lo que nada sucederá si se coloca el mouse encima. Entonces, es necesario crearlas:

Y también, hacer que cada evento apunte a estas funciones, colocando su nombre o fi rma dentro del evento, en la etiqueta HTML:

Ahora solo resta crear el código JavaScript, que es muy similar al que ya has creado en los ejemplos anteriores. Dentro de la función mostrarTexto, se creará un texto por debajo del título, y con la función ocultarTexto, se lo esconderá. Esto se puede lograr fácilmente con JavaScript de la siguiente forma:

La primera función realiza una tarea similar a la que indicaste en el botón del ejemplo anterior; simplemente, crea algo de texto cuando el mouse pasa por encima del componente. La segunda, en vez de agregar texto, cambia el contenido por un espacio vacío, por lo cual desaparece.

JavaScript ofrece muchísimos métodos para obtener información del navegador.

Hay muchísimos otros eventos, relacionados no solo con el mouse, sino también con el teclado, con la carga del documento y con el uso del portapapeles, por mencionar solo algunos. Si deseas realizar algún tipo de acción cuando un usuario copia o corta un elemento de tu página, puedes recurrir a los eventos oncopy, oncut y onpaste. Estos son disparados cuando un usuario copia, corta o pega un elemento del documento, respectivamente. Por ejemplo, puedes lanzar una alerta cuando algunas de estas situaciones sucedan, invitando al usuario a citar la fuente desde la cual copió el contenido:

Primero, dentro de la etiqueta HTML <body> se coloca el evento oncopy, para que este se lance cada vez que el usuario copie algo dentro de cualquier parte del documento, sin importar de qué elemento se trate, dado que todos los elementos visuales se anidan dentro del <body>.

Luego, se crea una etiqueta <script> y, en ella, la función JavaScript que, en este caso, solo lanza una alerta.Las alertas son pequeños carteles que poseen los navegadores; pueden activarse con JavaScript, y en su interior puede colocarse un texto o botones para realizar alguna pregunta al visitante. Solo tienes que usar el método alert() y colocar dentro de los paréntesis el texto que quieres mostrar, de la siguiente manera:

Ahora, cuando el usuario realice una copia de cualquier elemento del sitio, se lanzará una alerta recordándole que debe citar la fuente desde la cual lo está copiando. Si deseas que este evento se dispare cuando se intente cortar o pegar, tienes que cambiar o sumar los eventos oncut y onpaste

Aprende más sobre HTML5, leyendo la edición completa de este ebook en RedUSERS PREMIUM


Cada mes, lanzamos 2 ebooks USERS, en ellos tratamos en profundidad el tema abordado. En cada ebook, nuestros EXPERTOS vuelcan todos sus conocimientos con el objetivo de brindar una experiencia de capacitación satisfactoria para nuestros lectores.


Lee lo que quieras, donde vayas, por una mínima cuota mensual: SUSCRIBETE!


¡Comparte esta noticia!