Si eres programador y escribes código HTML o PHP, por ejemplo, o tienes un blog en WordPress, es muy posible que le saques mucho jugo a este artículo, porque vamos a ver cómo puedes aprovechar AutoHotkey para escribir código HTML, XML, PHP, JavaScript, etc. Vas a poder insertar código HTML con AutoHotkey y ganarás velocidad y minimizarás los errores al escribir código.
Va a ser un artículo muy práctico, con muchos ejemplos que puedes ver en el índice.
¿Empezamos?
Vamos a empezar con cosas sencillas de HTML y luego lo iremos complicando, ¿de acuerdo?
Por cierto, te recomiendo:
- Ir leyendo desde el principio para ir entendiendo las explicaciones del código de AutoHotkey.
- También puedes repasar otros artículos de la serie AutoHotkey.
- Descargarte la macro completa e ir probando cada punto.
1. Plantillas de páginas web
Empecemos con esta primera línea de AutoHotkey que escribe la platilla de una página web, la más sencilla que hay:
; Inserta el código de una página web mínima :*:<html::<html>{Enter}<body>{Enter}{Enter}</body>{Enter}</html>
Fíjate que obtendrías esto:
con solo escribir <html, o el atajo que más te guste…
El asterisco (*) ejecuta la acción sin esperar a que teclees un espacio u pulses otra tecla «separadora», como punto, la tecla INTRO, etc. De esta forma, todo va más rápido, pero lo puedes cambiar si quieres. En todo el artículo, tendrás este asterisco como parámetro. Además, casi todos los atajos empezarán con el signo menor que (<).
Seguimos…
Esta macro es equivalente a esta otra, en el sentido de que producen el mismo resultado:
; Inserta el código de una página web mínima :*:<html:: ( <html> <body> </body> </html> )
Solo tienes que elegir la forma que más te interesa y personalizarla para tu gusto.
Otro ejemplo más: esta macro de AutoHotkey escribiría el código de una página web con título, metadatos y el primer párrafo del contenido:
:*:<html::
(
<!DOCTYPE html>
<html>
<head>
<title>AutoHotkey para HTML</title>
<meta charset="UTF-8">
<meta name="description" content="AutoHotkey para HTML">
<meta name="keywords" content="AutoHotkey">
<meta name="author" content="Gonduana">
</head>
<body>
<p>CONTENIDO</p>
</body>
</html>
)
Con solo por escribir <html tendrías todo este código:
Seguimos avanzando…
⁂
2. Párrafos en HTML
¿Quieres insertar un párrafo HTML con AutoHotkey?
Pues con solo escribir <p: y se disparará esta macro:
; inserta un párrafo :*c:<p:: SendInput <p></p>{Left 4} return
Escribirá <p></p> y colocará el cursor justo entre las dos etiquetas, todo preparado para escribir el párrafo:
Rápido, ¿verdad?
Fíjate en el parámetro c. Lo que hace es que debemos escribir en minúsculas la letra pe del atajo <p. El motivo lo verás claro cuando llegues en la sección 9.a, cuando hablemos de insertar código PHP.
¿Qué hace la instrucción SendInput {Left 4}? Pues retrasar el cursor 4 posiciones, por eso el cursor aparecerá entre las 2 etiquetas, listo para seguir tecleando.
La línea con return indica el final de la macro y es necesaria.
Como ves, la idea es acelerar el proceso todo lo que se pueda.
⁂
3. Encabezados en HTML
¿Quieres insertar encabezados h1, h2, h3, etc.?
Por ejemplo, con solo escribir <h1 se ejecutará esta macro de AutoHotkey:
; inserta encabezado H1 :*:<h1:: SendInput <h1>Encabezado</h1>{left 5} SendInput {Shift down} SendInput {Left 10} SendInput {Shift up} return
Conseguirás el texto Encabezado resaltado entre etiquetas h1, para que puedas empezar a editar el encabezado:
- SendInput {Left 4} sitúa el cursor al principio de la segunda etiqueta, justo después de la palabra Encabezado.
- Después, SendInput {Shift down} mantiene pulsada la tecla Mayúsculas.
- SendInput {Left 10} hace que se desplace el cursor hacia la izquierda 10 posiciones, justo la longitud de la palabra Encabezado. Recuerda que la tecla Mayúsculas está pulsada, lo que equivale a que, en realidad, estarás seleccionando la palabra Encabezado.
- Finalmente, SendInput {Shift up} liberará la tecla Mayúsculas.
Se entiende, ¿verdad?
Si no es así, dale una vuelta más al código, porque no es complicado…
Por supuesto, podrías añadir una macro para escribir los encabezados h2, escribiendo esta vez <h2:
:*:<h2:: SendInput <h2>Encabezado</h2>{left 5} SendInput {Shift down} SendInput {Left 10} SendInput {Shift up} return
Sería lo mismo para h3, h4, etc…
⁂
4. Enlaces en HTML
¿Quieres insertar un enlace HTML con AutoHotkey?
Muy fácil: aquí tienes la macro que lo hace en un abrir y cerrar de ojos al escribir <a:
; inserta un enlace :*:<a:: SendInput <a href="http://www.xxxxxxxx.com">XXXXXXXXXX</a> SendInput {Left 4} SendInput {Shift down} SendInput {Left 10} SendInput {Shift up} return
Escribirá por ti el texto siguiente:
Y seleccionará el nombre del enlace con XXXXXXXX, para que puedas editarlo rápidamente, sin necesidad de mover el cursor.
Por supuesto, habría que editar el enlace en sí, xxxxxxxxxx.com.
⁂
5. Formato negrita, cursiva y subrayado
Ahora complicamos un poco el tema…
No mucho, no te preocupes.
¿Qué hacer si quieres aplicar algún formato, como negrita, a un texto ya escrito?
A continuación, veremos cómo insertar estos formatos HTML con AutoHotkey:
5.a Negrita
La siguiente macro de AutoHotkey se dispara con WINDOWS + n y aplica negrita al texto que tengas seleccionado:
; negrita #n:: ; Vacía el Portapapeles clipboard = ;CTRL+C = CONTROL+ C = copia el texto seleccionado SendInput ^c ClipWait SendRaw <b>%clipboard%</b> return
Recuerda que el signo de almohadilla (#) se corresponde con la tecla WINDOWS.
Lo que hace esta macro es copiar el texto seleccionado al Portapapeles, y luego escribir la etiqueta de apertura <b>, más el texto copiado antes, más la etiqueta de cierre </b>, que es justo lo que queríamos.
Nota: Si prefieres la etiqueta strong en lugar de la etiqueta b, solo tienes que modificar la macro.
En la última línea, usamos SendRaw en vez de la función SendInput. La diferencia es que SendRaw envía las teclas especificadas tal cual, mientras que SendInput puede darte algún efecto raro. Por ejemplo, SendInput + a enviaría la combinación CONTROL + a, puesto que el signo más (+) es la abreviatura de la tecla CONTROL.
Así pues, en todo este artículo usaremos SendRaw a discreción.
5.b Cursiva
Podrías tener tu macro para aplica cursiva con WINDOWS + i:
; cursiva #c:: clipboard = SendInput ^c ClipWait SendRaw <i>%clipboard%</i> return
Nota: Si en lugar de la etiqueta i prefieres la etiqueta em, puedes cambiar fácilmente la macro.
5.c Subrayado
Por último, el subrayado no es nada diferente a lo anterior, y lo aplicamos con WINDOWS + s:
; cursiva #s:: clipboard = SendInput ^c ClipWait SendRaw <u>%clipboard%</u> return
Esta idea de aplicar formatos de negrita, cursiva, etc. parte de la traductora Nora Díaz (@NoraDiazB).
⁂
6. Superíndice y subíndice
Con lo visto, hasta ahora, te animo a que pienses qué formatos son los que más empleas, porque la operativa es la misma.
Por ejemplo, escribir superíndices y subíndices es muy fácil con AutoHotkey. No son más que otros formatos de HTML.
Para formatear como superíndice el texto seleccionado, solo tienes que teclear WINDOWS + p:
; superíndice #p:: clipboard = SendInput ^c ClipWait SendRaw <sup>%clipboard%</sup> return
Para asignar el formato subíndice, solo tienes que teclear WINDOWS + b (o la combinación de teclas que quieras):
; subíndice #b:: ; Vacía el Portapapeles clipboard = SendInput ^c ClipWait SendRaw <sub>%clipboard%</sub> return
Es decir, que podrías aplicar estos formatos al texto 25 + x2 de esta forma en HTML:
Para que se muestre así en el navegador web:
25 + x2
⁂
7. Comentarios en HTML y XML
Los comentarios en HTML o XML van entre estas dos marcas de texto:
- <!--
- -->
Cualquier texto entremedias será tratado como un comentario y no se mostrará al usuario de la página web.
¿Quieres insertar un comentario en HTML con AutoHotkey?
También muy fácil con esta macro que se dispara escribiendo <!:
; comentarios en HTML, XML :*:<!:: SendRaw <!--Comentario--> SendInput {Left 3} SendInput {Shift down} SendInput {Left 10} SendInput {Shift up} return
Esta macro escribe el código necesario y selecciona la palabra Comentario para que la edites de forma rápida.
⁂
8. Comentarios multilínea en CSS, PHP, JavaScript
Para comentar una única línea en estos lenguajes, te basta colocar dos barras (//) al principio de la línea.
Pero si quieres un comentario que ocupe varias líneas, necesitarás colocarlo entre estas dos marcas:
- /*
- */
Si tecleas /* , insertarás un comentario de forma automática con esta macro:
; insertar comentario multilínea en CSS, PHP, JavaScript :*:/*:: SendInput /*{Enter}Comentario{Enter}*/ SendInput {Up}{End} SendInput {Shift down} SendInput {Left 10} SendInput {Shift up} return
De igual forma, la macro te selecciona la palabra Comentario para que puedas editarlo rápidamente:
⁂
9. Insertar código en una página web
Dentro del código HTML puede insertarse código de otros lenguajes de programación, como PHP o JavaScript.
Vamos a ver cómo insertarlos de una forma rápida:
9.a Código PHP
Si quieres insertar código PHP dentro de una página HTML, hay que rodearlo entre estas marcas:
- <?php
- ?>
Para acelerar el proceso, puedes emplear esta macro de AutoHotkey que se dispara con <PHP (en mayúsculas):
; inserta código PHP :*c:<PHP::<?php{Enter}{Enter}?>{Up}
Puedes ver que la instrucción {Up} deja el cursor preparado para empezar a escribir tu código PHP:
Fïjate que hemos usado el parámetro c para disparar esta macro con <PHP. El motivo es que no choque con <p, que la usamos antes para insertar un párrafo.
9.b Código JavaScript
También es posible insertar código JavaScript dentro de una página web.
Simplemente, teclea <java y se disparará esta macro de AutoHotkey:
; inserta código JavaScript :*:<java:: ( <script> // Este código JavaScript escribe «Hola, mundo» document.getElementById("demo").innerHTML = "¡Hola, mundo!"; </script> <noscript>Este navegador no admite JavaScript!</noscript> )
Que escribe una plantilla de código JavaScript, con comentario incluido:
⁂
10. Tablas en HTML
Si te gusta insertar tablas, algo que se echa de menos por ejemplo en el editor de WordPress, puedes crear tus propias macros de AutoHotkey para insertar tablas HTML.
Por ejemplo, si quieres una tabla de 3 filas y de 3 columnas, siendo la primera fila una cabecera, puedes teclear <tab33 para disparar esta macro:
; inserta una tabla de 3×3, cabecera incluida :*:<tab33:: ( <table style="width:100%"> <tr> <th>CabeceraXX</th> <th>CabeceraXX</th> <th>CabeceraXX</th> </tr> <tr> <td>XXXXXXXXXX</td> <td>XXXXXXXXXX</td> <td>XXXXXXXXXX</td> </tr> <tr> <td>XXXXXXXXXX</td> <td>XXXXXXXXXX</td> <td>XXXXXXXXXX</td> </tr> </table> )
La macro escribirá el código necesario para la plantilla de una tabla de 3×3.
Por supuesto, puedes tener otros atajos preparados, como una tabla de 2×2, con o sin cabecera.
En fin, tú decides lo que necesitas…
⁂
11. Vídeo de YouTube
Si tienes un blog y te gusta insertar vídeos de YouTube, quiero que sepas que hay varias formas de conseguirlo y que aquí te voy a contar una de ellas a base de un iframe.
Para ello, teclea <youtube para ejecutar la siguiente macro:
; inserta un vídeo de YouTube con un iframe :*:<youtube:: ( <iframe width="600" height="400" src="https://www.youtube.com/watch?v=VokOQSBPj58" frameborder="0" allowfullscreen="allowfullscreen"> </iframe> )
Tendrás el código necesario para insertar un vídeo alojado en YouTube:
Solo deberás cambiar la dirección correcta y, quizás, cambiar las dimensiones del vídeo.
Como ves, conseguimos agilizar el proceso de escritura de código.
⁂
12. Espacio duro
¿Quieres insertar en HTML un espacio duro igual que lo haces en Microsoft Word?
¡Muy fácil!
Pero, un momento: ¿cómo se escribe un espacio duro en Word?
Los espacios duros, también llamados espacios de no separación, se escriben en Word pulsando las teclas CONTROL + MAYÚS + ESPACIO.
También tienes que saber que un espacio duro en HTML es la entidad nbsp.
Si tienes todo esto en cuenta, puedes comprobar que la macro siguiente lo hará a la perfección:
; inserta un espacio duro igual que en Word CTRL+MAYUS+espacio ^+Space::SendInput
Es decir, cada vez que teclees la combinación de teclas CONTROL + MAYÚS + ESPACIO, AutoHotkey te escribirá .
Nota:
- el acento circunflejo ^ es la tecla CONTROL;
- el signo más + es la tecla MAYÚS;
- Space es la tecla ESPACIO.
Chulo, ¿verdad?
Lo más importante es que recuerdes que puedes insertar fácilmente entidades HTML con AutoHotkey.
⁂
13. Otras entidades de HTML
No tienes porqué conformarte con el espacio duro. ¡Hay muchas otras entidades HTML!
Por ejemplo, si quieres escribir los signos menor que (<) o mayor que (>) o el símbolo del euro, puedes recurrir a estas macros de AutoHotkey:
; inserta otras entidades comunes :*:<<::< :*:<>::> :*:€::€
Notas:
- El signo menor que (<) saldrá al escribir <<, que en realidad escribe <
- El signo mayor que (>) saldrá al escribir <>, que en realidad escribe >
- El símbolo del euro (€) saldrá al escribir <€, que en realidad escribe €
Puedes pensar en esos otros signos que te tanto cuesta escribir y diseñar la macro de AutoHotkey que los consiga.
¡Todo para programar rápido como el viento!
⁂
14. Aplicando estilos CSS
Esto es más complicado aún, pero nada imposible.
Toma aire, y lánzate a la de 1, a la de 2 y a la de 3…
Imagínate que en tu página web tienes unos estilos definidos de esta forma:
; insertar clase
/*texto con colores*/
textocolor {
font-family: "Arial", sans-serif;
}
textocolor.rojo {
color: red;
}
textocolor.verde {
color: green;
}
Básicamente lo que tienes aquí es una forma de asignar colores (rojo o verde) al texto seleccionado dentro de HTML, o de WordPress.
Si quieres aplicar el color rojo al texto que tienes seleccionado, teclea WINDOWS + 0:
; Asigna el color rojo #0:: clipboard = ;CTRL+C = CONTROL+ C = copia el texto seleccionado SendInput ^c ClipWait SendRaw <textocolor class="rojo">%clipboard%</textocolor> return
y escribirá el texto seleccionado entre las etiquetas <textocolor class="rojo"> y </textocolor> para que en tu web se vea así:
Color rojo
Podrías hacer lo mismo para el color verde, azul, etc. Solo tienes que decidir el atajo de AutoHotkey que disparará la macro y cuál es la clase definida en la hoja de estilos CSS de tu página web o blog.
⁂
15. XML
Tocaré solo de pasada algunas posibilidades de AutoHotkey para acelerar ti código en XML.
15.a Cabecera XML
Si eres de los que editas archivos XML, es posible que necesites esta pequeña macro de AutoHotkey para añadir la cabecera del archivo XML.
Teclea <xml para disparar esta macro de AutoHotkey:
; Inserta cabecera XML :*:<xml:: SendInput <?xml version="1.0" encoding="UTF-8" ?> return
15.b Estructuras CDATA en XML
Seguimos con XML.
Si necesitas escribir estructuras CDATA, puedes teclear simplemente <cdata:
:*:<cdata:: SendRaw <![CDATA[XXXXX]]> return
y AutoHotkey te escribirá automáticamente:
15.c Elementos y subelementos de XML
Para insertar un elemento de XML con sus subelementos, puede ser útil esta macro de AutoHotkey.
; inserta el elemento libro con título, autor, editorial y precio :*:<libro:: ( <libro> `<título>XXXX</título> `<autor>XXXX</autor> `<editorial>XXXX</editorial> `<precio>XXXX</precio> </libro> )
La macro trata el típico ejemplo de XML de un libro con su título, autor, nombre de la editorial y el precio:
Como puedes ver, solo tendrías que cambiar las XXXX.
Nota: para que te salga el sangrado tan bonito, necesitarás escribir los espacios que quieras seguidos por el acento grave (`). Si no pones esta tilde, no te saldrán los espacios a la izquierda de la sangría.
⁂
Conclusiones de insertar código HTML con AutoHotkey
Hemos visto multitud de ejemplos para poder programar rápidamente en HTML, XML, PHP, etc. gracias a AutoHotkey.
Puedes hacer muchas cosas, pero todo va encaminado a hacerte la vida más fácil, porque escribirás código más rápido y con menos errores.
Utilizo algunas de estas macros para este blog de Gonduana, así que te sugiero que pienses en las posibilidades de AutoHotkey para estos menesteres.
Ya sabes que te puedes descargar la macro completa para ir «jugando» con AutoHotkey.
⁂
Nada más, solo un par de recomendaciones si te interesa leer más sobre AutoHotkey o si quieres estar al tanto de los nuevos artículos de Gonduana:
- Lee los otros artículos de AutoHotkey de este mismo blog. Los tienes todos si filtras por «AutoHotkey» en la nube de etiquetas (columna derecha del blog).
- Suscríbete al boletín del blog, o sígueme en LinkedIn o Twitter (@jssprt). De esta manera, serás el primero en enterarte de la publicación de los artículos.
Muy buen artículo, Jesús.
Solo un apunte, que espero que te sirva de ayuda…
Si usas ClipWait y no especificas un tiempo de espera, si no hay texto seleccionado al pulsar la combinación de teclas, el script "esperará" de forma indefinida y se activará cuando copies algo. Para solucionarlo:
#n::
clipboard =
Send, ^c
ClipWait, 0
if ErrorLevel
return
SendRaw %clipboard%
return
A ver si ahora se ve bien el código… 🙂
#n::
clipboard =
Send, ^c
ClipWait, 0
if ErrorLevel
return
SendRaw <b>%clipboard%</b>
return
Muchas gracias por tu comentario.
Sí, es mejor emplear lo que dices ClipWait, 0 (que espera medio segundo, que es tiempo suficiente) y manejar el error con ErrorLevel.
Un saludo.
… Jesús Prieto …