LinuxParty

El primer estudio clínico aplicado (SAV CT 01) iniciado en Marzo del 2012, con una cadena genéticamente modificada de virus muertos de la vacuna (SAV001-H) para evaluar la seguridad y tolerabilidad ha pasado la primera prueba. Este estudio es un ensayo clínico aleatorizado, controlado con placebo de virus muertos del VIH-1para  la vacuna (SAV001-H) después de inyección intramuscular (IM) hombres y mujeres infectados, de entre 18-50 años de edad, se han inscrito en este estudio y aleatorizados en dos grupos de tratamiento para administrar la vacuna del VIH-1 (SAV001-H) o placebo.

Los problemas surgidos en el desarrollo de Fedora 18 han obligado a retrasar hasta el 8 de enero de 2013 el lanzamiento de la versión final de esta popular distro de Linux. En un principio, estaba previsto que la versión final de Fedora 18 hubiera salido al mercado el pasado 6 de noviembre, pero finalmente se ha retrasado dos meses su llegada.

En cuanto a la versión Beta, si no hay cambios de última hora debería estar lista el próximo 27 de noviembre. Los retrasos han sido originados por culpa de los numerosos fallos detectados en el sistema operativo, que afectan en su mayoría a Anaconda, la herramienta empleada para instalar Fedora 18.

La empresa de seguridad informática BitDefender ha llevado a cabo un minucioso test al sistema operativo de Microsoft, enfrentándolo contra las principales amenazas de malware presentes en internet. En total, se emplearon las 385 muestras de malware más populares del mercado en los últimos seis meses, y los resultados mostraron que solo 61 de ellas acabaron infectando al sistema operativo.

Windows Live Messenger se cerrará en marzo de 2013, después de casi 13 años de servicio, por lo que Microsoft centrará sus esfuerzos en Skype, su reciente adquisición de $ 8.500 millones. Ninguna palabra sobre si los usuarios podrán transferir sus cuentas a WLM Skype. Según la firma Internet análisis, WLM todavía tenía más del doble del número de instalaciones de mensajería instantánea que Skype al inicio de este año y fue el segundo en popularidad tras Yahoo Messenger. Pero además el informe sugiere que la audiencia de WLM en EE.UU. había caído a 8,3 millones de usuarios únicos, lo que representa una caída del 48% año a año. Por el contrario, el número de personas que utilizaron Skype para enviar mensajes instantáneos entre sí creció durante el mismo período.

¿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).

Una de las cosas que nos trajo HTML5 fue el almacenamiento de datos de forma offline, gracias a un conjunto de tecnologías como IndexedDB que nos permite administrar una base de datos en la mayoría de los navegadores de una forma más avanzada de lo que antiguamente nos ofrecían las cookies.

IndexedDB no es una base de datos relacional (con sus tablas, columnas…) sino que se podría llamar un “almacén de objetos“ (literalmente) ya que dentro de la base de datos que usemos en nuestra aplicación web creamos almacenes y en su interior añadimos objetos (como el siguiente):

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>

Estaba cansado de escribir mi contraseña en mi viejo ordenador de casa cada vez que lo encendía (que lo utilizo para ver la tele, mientras escribo vuestros artículos en el portatil). Especialmente, quiero encender y dejar de hacer otras cosas. Entonces, no es necesario perder tiempo en esperar a que introduzca la contraseña. Después de hacer bastantes búsquedas en línea y tratar (tras muchos reinicios) de que funcionase, di con la siguiente forma de habilitar el inicio de sesión automático para GNOME. Y funciona igual si quiero permitir inicio de sesión automático para el escritorio KDE, y cualquier otro LXDE, XFCE, etc.