HTML y algunas de sus características tipo "huevos de pascua" 🖥🥚
Por Enio...
HTML... Las siglas de un lenguaje del futuro y del presente del que ya hemos hablado en alguna ocasión, sobre todo porque es muy relevante en el contexto del blogging, donde los editores necesitan acceder al código fuente de sus posts para maquetarlos y formatearlos. Tanto si eres un usuario técnico como si no, en el caso de que no tengas claro qué tipo de lenguaje es HTML, echa un vistazo al siguiente meme.
⬆️ ¡No, HTML no es un lenguaje de programación!
Aunque esté relacionado con esta área, HTML es más bien un lenguaje de marcado, esto es, sirve para estructurar y formatear contenido, como el de las páginas web y los artículos de blogs como este. El trabajo de programación, por otra parte, se deja a otros lenguajes, como Javascript.
HTML es un lenguaje informático muy sencillo de aprender para casi todos, pero la gran mayoría de sus características son poco aprovechadas, lo que abarca muchísimas que son totalmente desconocidas incluso para los versados. Se me ocurre que están por allí, esperando ser descubiertas, como si se trataran de huevos de pascua.
☝️ Por si no lo sabías... ➡️ en el contexto de la informática y la programación, los huevos de pascua son mensajes o comportamientos ocultos que se han dejado en un producto por distintos motivos, como para provocar curiosidad, hacer de marca personal o como simple detalle artístico.
Y no necesariamente se trata de etiquetas incorporadas en las actualizaciones más recientes que podríamos consultar en artículos semanales, sino etiquetas que han estado allí durante mucho tiempo. Es por ello que en este post compartiré tres características de HTML que probablemente resulten desconocidas, incluso para mí en algún momento.
Comprobar la ortografía
En ocasiones nos parecerá conveniente asegurarnos de la precisión ortográfica de la información textual que el usuario envíe, por lo que HTML dispone de un método para ello mediante el atributo spellcheck, el cual permite solicitar al navegador web que haga la comprobación ortográfica al tiempo que el usuario teclea, señalándole los errores con el típico subrayado rojo.
Evidentemente, este atributo puede ser usado con los elementos de entrada textual, tales como los input de texto (text, search, email, url, etc.), así como los textarea y elementos que soporten el atributo contenteditable.
El siguiente snippet muestra un ejemplo de cómo usarlo.
<input type="text" spellcheck="true" placeholder="Escribe tu resumen">
<p contenteditable="true" spellcheck="true">
Escribe el extenso aquí
</p>
En este ejemplo, los elementos input text y p (párrafo), son editables y se les ha activado la propiedad de verificación ortográfica (spellcheck="true").
Sin embargo, es una buena práctica usar este atributo de manera global, una potente capacidad que permite heredar el atributo entre las etiquetas hijas, generalizando su aplicación. Una buena manera de llevarlo a cabo es usándolo una capa superior de div, lo que hará posible la verificación ortográfica de todos los elementos de texto anidados.
Por supuesto, el funcionamiento de la propiedad dependerá de si el navegador web está configurado para interpretarla, algo que normalmente los navegadores hacen por defecto, pero que puede ser desactivada por el usuario.
Incorporar atajos de teclado
Una propiedad tremendamente subutilizada, como también lo suele ser el propio teclado por parte de los usuarios promedio de computadoras. Este dispositivo, cuando se sabe aprovechar, puede facilitar y agilizar grandemente el uso del computador. Ello lo sabían los creadores del estándar 4 de HTML, pues es desde ese entonces que está incorporada esta capacidad en el lenguaje, pensada para aprovechar el teclado durante la experiencia de navegación web.
Para implementarla se usa el atributo global accesskey. Un ejemplo de ello puede ser el siguiente snippet.
<button accesskey="p" onclick="alert('¡Hallaste un huevo de pascua!')">
Prueba suerte
</button>
Con ello hemos creado un botón (que podría añadirse a una hilera de botones, por ejemplo) que simplemente muestra un mensaje de éxito ("Hallaste un huevo de pascua"). La idea es que si el usuario acierta la tecla asignada para este evento, pasará lo mismo que hacer clic en ese botón.
Para que el comportamiento de acesskey se dispare, es necesario 1) conocer el valor especificado para esa propiedad (que debe ser un caracter imprimible, que incluye aquellos caracteres acentuados) y 2) la combinación de teclas predeterminadas por el navegador para activar esta propiedad. En el caso de Firefox, la combinación es Alt + Mayúscula + caracter-especificado. En otros navegadores web la combinación puede ser distinta e incluso puede variar dependiendo del sistema operativo.
Quizá la única desventaja del uso de esta propiedad tenga que ver con el soporte a los comandos de accesibilidad, los cuales podrían entrar en conflicto con estos atajos definidos con accesskey. Sin embargo, la opción está allí y puede ser de algún modo bien implementada y aprovechada.
Ocultación semántica
A la hora de ocultar elementos de contenido en la programación web, se dispone de varios métodos en CSS y Javascript, configurando o manipulando las propiedades como visibility: hidden, display: none, opacity: 0, height: 0, width: 0, text-index: -999px, entre otras.
Todos estos métodos tienen su alcance y utilidad y no son mutuamente excluyentes. De hecho, el atributo HTML hidden es otro método existente para ocultar elementos y es también relativamente desconocido y subutilizado.
<div hidden>...</div>El funcionamiento de este atributo es casi idéntico al de la regla CSS display: none, esto es, todo aquel elemento al que le sea aplicado no se renderizará. Permanecerá oculto sea cual sea la pantalla o terminal de salida, llámese navegador web, proyectores, screenreaders, etc. Sin embargo, esto no detiene los otros efectos de los elementos, pues los scripts y los forms bajo este atributo, por ejemplo, seguirán funcionando.
La ventaja (y diferencia) de hidden sobre display: none es que el primero no puede ser sobreescrito por el segundo, de modo que la manipulación del CSS no afectará el renderizado del elemento con esta propiedad.
En definitivas cuentas, desde la comprobación otográfica hasta la creación de atajos de teclado, aún hay muchas más características interesantes y poco exploradas del rico lenguaje de marcado de hipertexto por excelencia: HTML.
ALGUNAS REFERENCIAS
- AccessKey según w3schools.
- SpellCheck según w3schools.
- A menos que se indique lo contrario, las imágenes son del autor o son de dominio público.
Si estás interesado en más temas sobre Ciencia, Tecnología, Ingeniería y Matemáticas (STEM, siglas en inglés), consulta las etiquetas #STEM-Espanol y #STEMSocial, donde puedes encontrar más contenido de calidad y también hacer tus aportes. Puedes unirte al servidor de Discord de STEM-Espanol para participar aún más en nuestra comunidad y consultar los reportes semanales publicados por @STEM-Espanol.
NOTAS ACLARATORIAS
Hola estimado @eniolw el recurso didáctico que has empleado "imagen meme" fue contundente y divertido. El lenguaje utilizado en informática para una persona ajena a este tipo de conocimiento puede resultar confuso e incluso frustrante, pero esta publicación y otras que he visto en tu blog, me han ayudado en lo personal, a mejorar la escritura de mis post. Gracias por compartir esta información. Saludos.
Me alegra que te haya gustado y servido este y otros de mis trabajos. Muchas gracias por valorar y comentar, Wilmer!
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider supporting our funding proposal, approving our witness (@stem.witness) or delegating to the @stemsocial account (for some ROI).
Please consider using the STEMsocial app app and including @stemsocial as a beneficiary to get a stronger support.
Thanks!
Congratulations @eniolw! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :
Your next target is to reach 2000 comments.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCheck out the last post from @hivebuzz:
Hola @eniolw.
Muy importante el lenguaje HTML para maquetar nuestros post. De seguro que se pueden aprender cosas nuevas acerca del HTML que nos ayuden a mejorar la estética de nuestros post. Saludos y gracias por compartir.
Así es. Gracias a ti por leer y valorar!