LinuxParty

Hace unos días publiqué, por fin, un libro que recopila varios artículos sobre programación que escribí con unos amigos. Todo el texto es Creative Commons y se puede leer y descargar en formato HTML, ePub, PDF y el original AsciiDoc vía GitHub.

Existen miles de herramientas distintas sobre como mejorar una web o algunos parámetros de la misma, algunas que analizan aspectos técnicos, otras que analizan el SEO y lo social que es tu web y otras que te ayudan a mejorar tu diseño.

Puede que estas herramientas te muestren fallos o cosas que mejorar de tu web que ni te habías parado a pensar, como mil errores de validación, meta-tags mal hechas o en blanco, lo bien o mal que se adapta tu web a distintos tamaños de pantalla, la popularidad en las redes sociales… y hoy domingo os traigo un puñado de ellas para el que no tenga nada mejor que hacer (y gratuitas).

¿Por qué los jóvenes desarrolladores se imaginan que los programadores más viejos no pueden programar en un entorno moderno? Muchos de nosotros de una "cierta edad" nos enfrentamos a un entorno de trabajo TI hostil para los trabajadores mayores. Últimamente, Steven Vaughan-Nichols ha estado notando que el viejo meme acerca de cómo el abuelo no puede entender iPhones, Linux, o la nube se muestran con más frecuencia aún, y es cada vez más irrelevante. La verdad es que muchos desarrolladores de más edad son tan buenos como los jóvenes programadores, y cita un montón de ejemplos de todavía relevantes por geeks que lo demuestran. Y escribe él, "Tristemente, mientras que se debería haber puesto fin a la idea de que las horas largas son un hecho de la vida de los TI, este remanente de nuestra fábrica pasada persiste tanto en la alta tecnología como en otras industrias. Pero lo que realmente importa es el productivo y no quién lo hace.

La empresa Zend ha integrado su proyecto (que nos permite crear aplicaciones para Android e iOS con PHP, gracias a su Zend Strudio) y el proyecto Apache Cordova (que nos permite desarrollar aplicaciones multiplataforma con HTML, CSS y JavaScript).

Con esta plataforma se abren muchas puertas para el desarrollo, permitiendo a muchos programadores web lanzarse al mundo móvil sin morir en el intento y sin estar perdiendo el tiempo aprendiendo nuevos lenguajes de programación y cogiendo un mínimo de experiencia en ellos (este SDK nos da todo lo necesario para interactuar con el móvil, por lo que no hay una gran dificultad en hacer aplicaciones complejas).

Los teclados virtuales siguen siendo útiles en muchos escenarios: pantallas táctiles, kioscos, terminales de autoservicio, formularios especiales o proyectos donde queremos ofrecer una forma alternativa de entrada de texto sin depender del teclado físico.

En este tutorial vamos a crear un teclado virtual funcional con jQuery, manteniendo el enfoque didáctico en esta librería, pero usando una forma de trabajo más clara y actual. El objetivo será construir un teclado en pantalla que permita escribir en un campo de texto, borrar caracteres y activar mayúsculas mediante la tecla Shift.

La idea no es solo que funcione, sino que también sirva como base para ampliarlo más adelante.

En este tutorial vamos a crear un teclado virtual completamente funcional usando jQuery, ideal para:

• Formularios en pantallas táctiles
• Sistemas POS o kioscos
• Interfaces donde queremos evitar el uso del teclado físico

Aunque hoy existen alternativas modernas, jQuery sigue siendo útil para proyectos rápidos, mantenimiento de código legacy o aprendizaje práctico del DOM.

🎯 Resultado final

Al finalizar tendrás:

• Un teclado en pantalla
• Soporte para escribir en un input
• Tecla Shift
• Tecla Backspace
• Compatible con clic y pantallas táctiles

🧱 1. Estructura HTML

Primero creamos el input y el teclado:

<input type="text" id="text-input" placeholder="Escribe aquí...">

<ul id="keyboard">
    <li class="key" data-key="1">1</li>
    <li class="key" data-key="2">2</li>
    <li class="key" data-key="3">3</li>

    <li class="key" data-key="q">q</li>
    <li class="key" data-key="w">w</li>
    <li class="key" data-key="e">e</li>

    <li class="key special" data-key="shift">Shift</li>
    <li class="key" data-key="a">a</li>
    <li class="key" data-key="s">s</li>

    <li class="key special" data-key="backspace">←</li>
</ul>

👉 Usamos data-key para almacenar el valor de cada tecla (más limpio y escalable).

🎨 2. Estilos CSS básicos

#keyboard {
    list-style: none;
    padding: 0;
    max-width: 400px;
}

.key {
    display: inline-block;
    padding: 10px;
    margin: 5px;
    background: #eee;
    border-radius: 5px;
    cursor: pointer;
}

.key:hover {
    background: #ddd;
}

.special {
    background: #ccc;
}

👉 Puedes mejorar esto con Grid si quieres una distribución más profesional.

⚙️ 3. Lógica con jQuery

Incluimos jQuery actualizado:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Ahora la lógica principal:

$(function() {

    let shiftOn = false;
    const $input = $("#text-input");

    $(".key").on("click touchstart", function() {

        let key = $(this).data("key");

        // SHIFT
        if (key === "shift") {
            shiftOn = !shiftOn;
            return;
        }

        // BACKSPACE
        if (key === "backspace") {
            let current = $input.val();
            $input.val(current.slice(0, -1));
            return;
        }

        // MAYÚSCULAS
        if (shiftOn) {
            key = key.toUpperCase();
        }

        // AÑADIR TEXTO
        $input.val($input.val() + key);

    });

});

🧠 4. Explicación rápida

•  $(function(){}) → ejecuta cuando el DOM está listo
  .on("click touchstart") → funciona en PC y móviles
  data("key") → obtiene el valor de la tecla
  shiftOn → controla mayúsculas
  .val() → lee/escribe en el input
  

➕ 5. Mejoras opcionales

Puedes ampliar fácilmente:

✔ Añadir más teclas

Solo añade más <li> con data-key.

✔ Tecla Enter

<li class="key special" data-key="enter">Enter</li>

if (key === "enter") {
    alert("Enviar formulario");
    return;
}

✔ Desactivar Shift tras usarlo

if (shiftOn) {
    key = key.toUpperCase();
    shiftOn = false;
}

✔ Añadir animaciones

.key:active {
    transform: scale(0.95);
}

📱 6. Compatibilidad móvil

Gracias a:

.on("click touchstart")

👉 El teclado funciona en:

• Móviles
• Tablets
• Pantallas táctiles

⚠️ 7. Buenas prácticas con jQuery hoy

Aunque jQuery sigue siendo útil:

👉 Úsalo cuando:

• Mantienes proyectos antiguos
• Necesitas rapidez
• El entorno ya lo utiliza

👉 Evítalo cuando:

• Empiezas proyectos modernos grandes
• Usas frameworks como React o Vue

💡 Conclusión

Has creado un teclado virtual funcional con jQuery moderno, aplicando buenas prácticas actuales:

✔ Código limpio
✔ Eventos modernos (.on)
✔ Uso de data-*
✔ Compatible con móviles

Código fuente completo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teclado virtual con jQuery</title>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f4f4f4;
            margin: 0;
            padding: 30px;
        }

        .contenedor {
            max-width: 900px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

        h1 {
            margin-top: 0;
            color: #222;
        }

        p {
            color: #444;
            line-height: 1.6;
        }

        .zona-input {
            margin-bottom: 25px;
        }

        #text-input {
            width: 100%;
            box-sizing: border-box;
            padding: 14px;
            font-size: 18px;
            border: 1px solid #ccc;
            border-radius: 8px;
            outline: none;
        }

        #text-input:focus {
            border-color: #888;
        }

        #keyboard {
            display: flex;
            flex-direction: column;
            gap: 10px;
            user-select: none;
        }

        .fila {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .key {
            min-width: 50px;
            padding: 12px 14px;
            text-align: center;
            background: #e9e9e9;
            border: 1px solid #cfcfcf;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.1s ease;
            font-size: 16px;
        }

        .key:hover {
            background: #dddddd;
        }

        .key:active {
            transform: scale(0.96);
        }

        .key.special {
            background: #d8d8d8;
            font-weight: bold;
        }

        .key.space {
            flex: 1;
        }

        .key.active-shift {
            background: #bfcde0;
            border-color: #94afd0;
        }

        .nota {
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }

        @media (max-width: 600px) {
            .key {
                min-width: 42px;
                padding: 10px 12px;
                font-size: 14px;
            }

            #text-input {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>

    <div class="contenedor">
        <h1>Teclado virtual con jQuery</h1>

        <p>
            Este ejemplo muestra cómo crear un teclado virtual funcional usando jQuery.
            Podrás escribir en el campo de texto, activar mayúsculas con Shift y borrar con Backspace.
        </p>

        <div class="zona-input">
            <input type="text" id="text-input" placeholder="Escribe aquí...">
        </div>

        <div id="keyboard">
            <div class="fila">
                <div class="key" data-key="1">1</div>
                <div class="key" data-key="2">2</div>
                <div class="key" data-key="3">3</div>
                <div class="key" data-key="4">4</div>
                <div class="key" data-key="5">5</div>
                <div class="key" data-key="6">6</div>
                <div class="key" data-key="7">7</div>
                <div class="key" data-key="8">8</div>
                <div class="key" data-key="9">9</div>
                <div class="key" data-key="0">0</div>
            </div>

            <div class="fila">
                <div class="key" data-key="q">q</div>
                <div class="key" data-key="w">w</div>
                <div class="key" data-key="e">e</div>
                <div class="key" data-key="r">r</div>
                <div class="key" data-key="t">t</div>
                <div class="key" data-key="y">y</div>
                <div class="key" data-key="u">u</div>
                <div class="key" data-key="i">i</div>
                <div class="key" data-key="o">o</div>
                <div class="key" data-key="p">p</div>
            </div>

            <div class="fila">
                <div class="key" data-key="a">a</div>
                <div class="key" data-key="s">s</div>
                <div class="key" data-key="d">d</div>
                <div class="key" data-key="f">f</div>
                <div class="key" data-key="g">g</div>
                <div class="key" data-key="h">h</div>
                <div class="key" data-key="j">j</div>
                <div class="key" data-key="k">k</div>
                <div class="key" data-key="l">l</div>
                <div class="key" data-key="ñ">ñ</div>
            </div>

            <div class="fila">
                <div class="key special" data-key="shift">Shift</div>
                <div class="key" data-key="z">z</div>
                <div class="key" data-key="x">x</div>
                <div class="key" data-key="c">c</div>
                <div class="key" data-key="v">v</div>
                <div class="key" data-key="b">b</div>
                <div class="key" data-key="n">n</div>
                <div class="key" data-key="m">m</div>
                <div class="key special" data-key="backspace">⌫</div>
            </div>

            <div class="fila">
                <div class="key" data-key=".">.</div>
                <div class="key" data-key=",">,</div>
                <div class="key" data-key="-">-</div>
                <div class="key space" data-key=" ">Espacio</div>
                <div class="key special" data-key="clear">Limpiar</div>
            </div>
        </div>

        <p class="nota">
            Consejo: este ejemplo es una buena base para ampliarlo con más teclas, diseño visual avanzado o validaciones.
        </p>
    </div>

    <script>
        $(function () {
            let shiftOn = false;
            const $input = $("#text-input");
            const $shiftKey = $('.key[data-key="shift"]');

            function insertarTexto(texto) {
                $input.val($input.val() + texto);
                $input.focus();
            }

            function borrarUltimoCaracter() {
                const valorActual = $input.val();
                $input.val(valorActual.slice(0, -1));
                $input.focus();
            }

            function actualizarEstadoShift() {
                if (shiftOn) {
                    $shiftKey.addClass("active-shift");
                } else {
                    $shiftKey.removeClass("active-shift");
                }
            }

            $(".key").on("click touchstart", function (e) {
                e.preventDefault();

                let key = $(this).data("key");

                if (key === "shift") {
                    shiftOn = !shiftOn;
                    actualizarEstadoShift();
                    return;
                }

                if (key === "backspace") {
                    borrarUltimoCaracter();
                    return;
                }

                if (key === "clear") {
                    $input.val("");
                    $input.focus();
                    return;
                }

                if (typeof key === "string" && shiftOn) {
                    key = key.toUpperCase();
                }

                insertarTexto(key);

                if (shiftOn) {
                    shiftOn = false;
                    actualizarEstadoShift();
                }
            });
        });
    </script>

</body>
</html>

Entre los gestores de contenidos web en software libre que podemos encontrar, sin duda alguna WordPress es uno de los más utilizados entre los usuarios, por ejemplo, a la hora de poner en marcha un blog gracias a su sencillo despliegue, su fácil gestión y, sobre todo, su flexibilidad. WordPress, realmente, no requiere que seamos expertos desarrolladores para poder ampliar las funcionalidades de nuestro sitio web o lo personalicemos puesto que podremos utilizar (y hay bastantes opciones) plugins, plantillas y widgets para conseguir un sitio web único y adaptado a nuestras necesidades.

Vanity, un interesante y completo kit de plugins jQuery listos para usar, que viene a cubrir las que probablemente son las funcionalidades más básicas de cualquier sitio web.

Vanity está compuesto por 7 plugins ligeros y fáciles de implementar, cada uno desarrollado para cubrir una característica específica:

Cuando desarrollamos para la web por lo general estamos sometidos a fechas de entrega que debemos cumplir de manera puntual y en ocasiones ocupamos la mayor parte del tiempo en la programación de las características y funcionalidades del sitio o aplicación web, dejando el diseño para el último momento. Teniendo esto en cuenta, siempre debemos buscar la manera de trabajar inteligentemente, aprovechando todas y cada una de las herramientas disponibles para ahorrar tiempo y dinero, sin sacrificar la apariencia final del proyecto.

Git es uno de los sistemas de control de versiones más populares y del que más estamos oyendo hablar últimamente. Gracias a su potencia y versatilidad muchos grandes proyectos de software libre están migrando sus repositorios a Git. Cada vez más es más importante saber usar Git, tanto a nivel personal como laboral. Parte del éxito de este sistema de repositorios es GitHub y no dejan de evangelizar, más si cabe, a todos los desarrolladores que quieran aprender a usar Git con un curso interactivo de unos 15 minutos donde podrás a empezar a soltarte.