Teclados para programar 2022 y sus características

A continuación, tendrás al alcance de la mano ideales teclados para programar. Estos son:

1 – Razer BlackWidow V3 Pro

El Razer BlackWidow V3 Pro es un teclado sin cable que contiene las siguientes ventajas:

2 – Obinslab Anne Pro 2

El Obinslab Anne Pro 2 es una opción más compacta diseñada pensando en los programadores que deseen un teclado más pequeño, sin que esto altere su excelencia. Sus características más destacables son:

• Su batería es de 1900 mAh y esto le permite un aproximado de 8 horas sin cables.
• Posee un switche para encenderlo y apagarlo. Esto evitará que se desgaste la batería cuando no esté siendo utilizado.
• Por medio del Bluetooth LE 4.0 puedes utilizarlo de manera inalámbrica.
• Si deseas conectarlo lo puedes hacer por medio del cable USB-C.
• Dispone de varios switches Cherry MX, Gateron y Kailh.
• El Bluetooth le permite conectarse a 4 dispositivos al mismo tiempo.

Una de sus desventajas es que no posee teclas multimedia, ni teclas de flecha, ni fila de funciones. También su software es más complicado para su personalización.

3 – Razer BlackWidow Elite

El teclado Razer BlackWidow Elite pertenece a los que tienen con cables. Sus propiedades más relevantes son:

• Contiene switches mecánicos Razer. Estos permiten a los comandos accionarse rápidamente. Además, cuentan con laterales modernos proporcionándoles estabilidad y protección evitando la acumulación de polvo y de los líquidos que puedan derramarse.
• Su calidad al momento de escribir es magnífica.
• Teclas con un espacio adecuado entre ellas y excelente estabilidad.
• Cuenta con buena ergonomía, que está dada por 2 ajustes para inclinarlo y un reposamuñecas que se desmonta.
• Posee switches Razer Orange, estos le dan una excelente respuesta al tacto.
• También dispone de los switches Razer Green o Yellow.
• Retroiluminación RGB completa. Las teclas están iluminadas de forma individual. Además, todas ellas son macroprogramables.
• Contiene un software maravilloso y se personaliza muy fácilmente.

Su desventaja radica en que el software no se encuentra disponible para macOS ni Linux. Tampoco sus botones para bloquear los desplazamientos y las pausas sirven en macOS. Adquiérelo si sueñas con trabajar plácidamente.

4 – Corsair K100 RGB

El siguiente teclado es el Corsair K100 RGB. Los detalles que más lo distinguen son:

• Su diseño es refinado y se encuentra reforzado por un chasis fabricado en aluminio robusto.
• Retroiluminación RGB que tiene un toque muy dinámico creado por Corsair AXON Hyper-Processing. Permitiendo una velocidad 4 veces superior.
• Switches Cherry MX Speed RGB Silver. Sus respuestas son superrápidas, su distancia de acción de apenas 1,2 mm. Garantizan 100 millones de pulsaciones.
• Posee teclas macro destacadas y PBT doble capa.
• Excelente ergonomía proporcionada por el reposamuñecas acolchado y el ajuste de su inclinación.
• El software Cosair ICUE es fácil de personalizar.
• Retroiluminación RGB completa.
• Switches Cherry MX Speed crean sensibilidad y ligereza.

Sin embargo, la desventaja de estos switches es que no ofrecen respuestas y su recorrido previo es muy corto. Ciertas teclas no son funcionales en macOS. Sus ventajas son mayores y eso lo convierte en una fantástica elección.

5 – Kinesis Freestyle Edge RGB

Por último tenemos el Kinesis Freestyle Edge RGB. Es muy particular ya que puede dividirse en 2 partes. Sus características son:

• Su altura es de 1,6 cms. aproximadamente. Su anchura se puede ajustar entre 39 – 52 cms.
• El plug and play y el USB están disponibles para Windows y Linux.
• Una ergonomía fantástica proporcionada por la posibilidad de dividirlo en dos partes y colocarlas como desees. Además, su reposamuñecas es desmontable para las dos partes. Si lo deseas, podrás adquirir un “kit de elevación” que te permitirá inclinarlo a tu gusto.
• Sus teclas presentan buena estabilidad y son agradables para el tacto. Posee teclas de acceso inmediato para controlar los medios comunicacionales. Si quieres puedes reasignar cualquiera de las teclas. Sus teclas macro dedicadas son 8 están al lado izquierdo.
• Switches Cherry MX Brown que le ofrecen al usuario escribir ligeramente y sutileza en su respuesta. También están disponibles con Blue, Red o Speed Silver.

Entre sus desventajas se encuentra que no es posible usarse son cable. No posee ajuste de inclinación, para lograrlo debes comprar el “kit de elevación”. Está desprovisto de una conexión USB passthrough. Sin embargo, adquirirlo será muy satisfactorio.

La importancia de los teclados para programar 2022

En este mundo tecnológico en el que vivimos, los teclados para programar constituyen una herramienta fundamental para las personas dedicadas a estos procesos. Son necesarios diseños que contengan una excelente ergonomía para causar el mínimo esfuerzo para las manos, ofreciéndoles comodidad y fluidez en sus movimientos. Esto evita cometer errores y agiliza el trabajo.

Programar requiere de períodos largos de tiempo tecleando, creando, diseñando, modificando. Si tú eres un programador es indispensable que existan los instrumentos adecuados para que desarrolles tus aplicaciones, códigos, videojuegos de manera segura. Es decir, deben proveerte las condiciones perfectas para que, con el tiempo, no comiences a sufrir de dolencias físicas.

La entrada Teclados para programar 2022 | Los 5 mejores se publicó primero en Visto en la Red.

La función para traducciones con JQuery

A continuación os pego el código de la función para luego ir explicando que hace cada parte.

function onFlyTranslates(){
  var lang = $("html").attr("lang");

  var translates = [];
  translates["en"] = [];
  translates["fr"] = [];

  translates["en"] = {
    "Pago con Tarjeta":"Credit/debit card payment",
  }
  translates["fr"] = {
    "Pago con Tarjeta":"Paiement par carte",
  }

  var elements = [
    "#payment-option-1-container span",
  ]

  $.each(elements,function(i,v){
    $(v).each(function(i) {
    	var element = $(this);
    	$.each(translates[lang],function(key,val){
          if(element.html() == key){
              element.html(val);
          }
    	});
    });
  });

1.- Detectando el lenguaje actual

var lang = $("html").attr("lang");

Detecta el lenguaje definido en el atributo «lang» del elemento html y crea una variable lang con su valor. En este caso los posibles valores de lang son «en» y «fr».

2.- Creando los arrays de traducciones

var translates = [];
translates["en"] = [];
translates["fr"] = [];

Definimos un array llamado «translates» así cómo anidamos dentro de ese array otro array para cada idioma.

3.- Definiendo claves y traducciones

translates["en"] = {
  "Pago con Tarjeta":"Credit/debit card payment",
}
translates["fr"] = {
  "Pago con Tarjeta":"Paiement par carte",
}

Introducimos en cada array de idioma las traducciones con la sintaxis «texto_actual»:»traducción» si hay que traducir múltiples cadenas añadiremos más líneas separadas por comas.

4.- Definiendo los elementos a traducir

var elements = [
    "#payment-option-1-container span",
  ]

Creamos un array con los identificadores JQuery de los elementos que queremos traducir. En el ejemplo se está traduciendo el texto de un span que está dentro de una caja con el id «payment-option-1-container». Si hubiera más elementos a traducir solo hay que añadir más identificadores.

5.- Hacemos la magia de las traducciones con JQuery

  $.each(elements,function(i,v){//bucle 1
    $(v).each(function(i) { //bucle 2
    	var element = $(this);
    	$.each(translates[lang],function(key,val){//bucle 3
          if(element.html() == key){//comparamos clave con contenido
              element.html(val);
          }
    	});
    });
  });

Hacemos la magia! Funciona con un recorrido de tres bucles anidados. El primer bucle recorre todos los elementos definidos en el paso anterior que son los contenedores de los textos a traducir. Por cada uno de estos elementos lo busca en el código de nuestra web y recorre cada uno de ellos (si hubiera más de uno). Por cada uno de estos elementos del código (que concuerda con el identificador definido. Recorremos el array translates (definido en el paso 2 y 3) pasando como clave el valor del lenguaje actual (la variable lang definida en el paso 1). Por lo que estamos recorriendo los valores «texto_actual»:»traducción» del lenguaje actual definido por el atributo lang de la página. Una vez hecho esto comparamos la clave del array con el contenido y si concuerda lo remplazamos por el valor.

6.- Ejecutar nuestra función

$(document).ready(function(){
  onFlyTranslates();	
});

Y así ejecutamos nuestra función en el momento de la carga de la web.

Espero que esto os sirva cuando tengáis problemas para traducir un plugin de wordpress, modulo de prestashop o una template conflictiva. Así es cómo podemos hacer traducciones con JQuery.

Hasta la próxima!

La entrada Traducir un plugin de wordpress peleón – Traducciones con JQuery se publicó primero en Visto en la Red.

Un consejo

Cuando yo empecé en la programación todo me parecía muy abstracto, la solución para mi fue hacerme con una serie de libros (sí, libros físicos de los de antes) que me ayudaron a disponer de unos contenidos ordenados asequibles y tangibles. Por si alguien se encuentra ahora mismo en esta situación, para empezar con la programación web os recomiendo el libro «El gran libro de HTML5, CSS3 y JavaScript». Este libro os dará una base de conocimientos muy útil para desde aquí seguir creciendo.

Primero te quiero enseñar un código HTML5 completo para luego analizar las partes y poder entenderlo.

Ejemplo de código HTML5 de una página sencilla

<!DOCTYPE html>
<html lang="es">  
  <head>    
    <title>Título de la WEB</title>    
    <meta charset="UTF-8">
    <meta name="title" content="Título de la WEB">
    <meta name="description" content="Descripción de la WEB">    
    <link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>    
  </head>  
  <body>    
    <header>
      <h1>Título de la WEB</h1>      
    </header>    
    <nav>
      <a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
      <a href="http://dominio.com/seccion2.html">IR SECCIÓN 3</a>
    </nav>
    <section>      
      <article>
        <h2>CONTENIDO PRINCIPAL</h2>
        <p>Este es el contenido principal de mi web</p>
        <div>
          <p>Aquí tenéis una imagen.</p>
          <img src="http://dominio.com/imagen.jpg" alt="paisaje">          
        </div>
      </article>      
    </section>
    <aside>
      <h3>Banner de publicidad</h3>
      <a href="http://dominio-externo.com">
        <img src="http://dominio.com/banner-publicidad.png" alt="banner de publicidad">
      </a>
      <h3>Testimonios</h3>
      <p>Me gusta mucho esta página.</p>
    </aside>
    <footer>
      <h4>Avisos legales</h4>
      <a href="http://dominio.com/aviso-legal">Política de cookies</a>
      <h4>Redes sociales</h4>
      <a href="http://facebook.com/mi-pagina-de-facebook">Mi Facebook</a>
    </footer>
  </body>  
</html>

Anatomía del código HTML5 – Las partes y su significado.

DOCTYPE

<!DOCTYPE html>

La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.

HTML

<html></html>

Delimita el documento HTML.

Atributo a destacar

LANG

<html lang="es"></html>

Indica el lenguaje de contenido del código.

HEAD

<head></head>

El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.

META

<meta name="description" content="Descripción de la WEB"> 

Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.

Usos a destacar

META CHARSET

<meta charset="UTF-8">

Establece el tipo de codificación del documento.

META TITLE

<meta name="title" content="Título de la WEB">

Contiene el titulo que se mostrará en los buscadores.

META DESCRIPTION

<meta name="description" content="Descripción de la WEB">

Es el texto que se muestra bajo el título en los motores de búsqueda.

LINK

<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/> 

Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.

Atributo a destacar

HREF

Especifica la url donde se localiza la hoja de estilo.

BODY

<body></body>

La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc…

HEADER

<header></header>

El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco más.

NAV

<nav></nav>

Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web.

A

<a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>

Representa un enlace o hipervínculo.

Atributos a destacar.

HREF

Dirección URL hacia la que apunta el enlace.

H1, H2, H3, H4, H5, H6

<h1>Título de la WEB</h1>
<h2>CONTENIDO PRINCIPAL</h2>
<h3>Testimonios</h3>
<h4>Avisos legales</h4>

Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante.

SECTION

<section></section>

La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o encabezado.

ARTICLE

<article></article>

La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.

DIV

<div></div>

Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.

P

<p></p>

Entre las etiquetas P colocaremos un párrafo de texto.

IMG

<img src="http://dominio.com/imagen.jpg" alt="paisaje">

Esta etiqueta coloca una imagen en el documento mediante un enlace.

Atributos a destacar.

ALT

Representa el texto alternativo, muy importante para que los bucadores puedan obtener información de la imagen.

SRC

URL donde se encuentra la imagen.

ASIDE

<aside></aside>

Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como podrían ser banners de anuncios, citas o enlaces externos.

FOOTER

<footer></footer>

Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el copyright, etc.

Posible resultado de nuestro código HTML5

Aquí dejo la imagen que muestra el navegador tras asignarle algunos estilos. He añadido las etiquetas para que puedas orientarte bien.

Espero que te haya sido de utilidad, si es así, no dudes en comentar y compartir.

La entrada Estructura del código HTML5 – Anatomía de una página web. se publicó primero en Visto en la Red.

Soy un botón

Un consejo

Cuando yo empecé en la programación todo me parecía muy abstracto, la solución para mi fue hacerme con una serie de libros (sí, libros físicos de los de antes) que me ayudaron a disponer de unos contenidos ordenados asequibles y tangibles. Por si alguien se encuentra ahora mismo en esta situación, para empezar con la programación web os recomiendo el libro «El gran libro de HTML5, CSS3 y JavaScript». Este libro os dará una base de conocimientos muy útil para desde aquí seguir creciendo.

Los pasos para crear tus botones personalizados.

El código HTML5

Para crear nuestros botones personalizados lo primero que debemos hacer es teclear el código HTML5, el cual deberemos colocarlo allí donde queramos ubicar nuestro botón. Para ello podríamos utilizar dos elementos, el elemento <a> , o el elemento <input> ambos tipos son personalizables, pero el elemento <input> trae consigo estilos por defecto que pueden alterar nuestro botón en los diferentes navegadores y dispositivos. Por eso, para hacerlo más sencillo, utilizaremos el elemento <a> el cual también tiene estilo por defecto pero resulta mucho más manejable.

Código:

<a class="boton_personalizado" href="https://vistoenlared.es">Soy un botón</a>

Explicación:

En el atributo href, donde he colocado https://vistoenlared.es, debes sustituirlo por la ruta a la que quieres dirigir el botón.

En el atributo class donde he escrito boton_personalizado puedes escribir cualquier nombre que le quieras asignar a la clase.

Recuerda mantener las comillas «».

El código CSS3

Ahora que ya hemos creado nuestro botón, toca personalizar su aspecto a través del código CSS3. Este código debes pegarlo entre las etiquetas <head> y </head> de tu documento HTML. También puedes utilizar hojas css. Debemos tener en cuenta que deberemos crear la clase con el nombre que le hemos asignado al atributo class en nuestro código HTML5.

Código:

<style type="text/css">
  .boton_personalizado{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
</style>

Explicación:

Text-decoration se refiere a la decoración del texto, deberemos establecerlo en none a no ser que queramos tener el texto del botón subrayado.

Padding es la distancia entre el texto y el borde del botón. En este caso está establecido en pixeles.

Font-wheight se trata del grosor de las letras. Mientras más alto sea su número, más gruesas serán.

Font-size es el tamaño se la letra, en este caso, también en pixeles.

Color se refiere al color de la letra. Podremos personalizarlo fácilmente con un código HEX, RGB  o incluso RGBA.

Background-color es el color de fondo del botón.

Border-radius se trata del redondeado de los cantos de botón. Mientras más pixeles asignemos, más redondeados serán los bordes. Si, lo que queremos es un botón sin bordes redondeados, lo eliminaremos.

Border es del borde del botón. Podremos asignar un grosor en pixeles y un color.

El hover

Ahora falta definir qué ocurre cuando pasamos el ratón por encima de nuestro botón, esto lo haremos asignándole un hover a nuestra clase. Por lo que nuestro código CSS3 quedaría así.

Código:

<style type="text/css">
  .boton_personalizado{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
  .boton_personalizado:hover{
    color: #1883ba;
    background-color: #ffffff;
  }
</style>

Explicación:

Dentro del hover colocaremos todo aquello que queremos que se modifiquen al pasar el ratón por encima con los valores que queremos establecer.

Resultado:

Soy un botón

Aquí tienes algunos ejemplos más de botones

Botón 1

código html botón 1

<a href="" class="boton_1">Soy un botón</a>

código css botón 1

<style type="text/css">
  .boton_1{
    text-decoration: none;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: helvetica;
    font-weight: 300;
    font-size: 25px;
    font-style: italic;
    color: #006505;
    background-color: #82b085;
    border-radius: 15px;
    border: 3px double #006505;
  }
  .boton_1:hover{
    opacity: 0.6;
    text-decoration: none;
  }
</style>

Botón 2

>

código html botón 2

<a href="" class="boton_2">Soy un botón</a>

código css botón 2

<style type="text/css">
  .boton_2{
    text-decoration: none;
    padding: 40px;
    font-family: arial;
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 800;
    font-size: 25px;
    color: black;
    background-color: #9b0e0e;
  }
  .boton_2:hover{
    color: #9b0e0e;
    background-color: #bc6355;
    text-decoration: none;
  }
</style>

La entrada Crear botones personalizados con HTML5 y CSS3 se publicó primero en Visto en la Red.

En uno de nuestros proyectos para crear una tienda online, nos encontramos ante el dilema de si debíamos programar la tienda desde cero o utilizar uno de los CMS encarados al e-commerce. Todos los casos no son iguales y cada proyecto requiere un nivel de personalización diferente, es por eso, que hay ocasiones en las que Prestashop puede resultar la opción más inteligente. Pero ¿cuáles son las ventajas de Prestashop?

Pese a existir otras opciones a la hora escoger un CMS para crear una tienda online, Prestashop, en los últimos años, se ha convertido en la herramienta más utilizada para este cometido entre la pequeña y mediana empresa, y es que ha demostrado ser una opción flexible y de confianza. En este post no pretendo comparar Prestashop frente a los demás CMS encarados al e-commerce, sino elaborar una lista con las ventajas de Prestashop a nivel general y añadir un pequeño “pero” que, en mi opinión, todo aquel dispuesto a crear una tienda con Prestashop debería saber.

7 principales ventajas de Prestashop para crear una tienda online

La Instalación: Instalar Prestashop no es una tarea en absoluto complicada y no se requieren conocimientos informáticos avanzados. Si contamos con un buen Hosting la tarea resultará rápida, cómoda y amigable.

La Personalización: Prestashop cuenta con muchas opciones de personalización tanto para tu Front office como para tu Back Office. Los temas y plantillas te ayudarán a encontrar el diseño que más se ajuste a tu proyecto y podrás organizar tu Back Office de manera personalizada para rendir mejor en tu día a día.

La Adaptabilidad: Desde la versión 1.6 Prestashop lleva integrado Bootstrap para la compatibilidad con tablets y móviles. También deberemos asegurarnos de que la plantilla utilizada disponga de dicha compatibilidad.

La Comunidad: Prestashop cuenta con una amplia y activa comunidad. Es el lugar perfecto donde plantear dudas, buscar respuestas y compartir trucos y consejos con otros usuarios. Aquí el enlace a la comunidad de Prestashop.

Los Módulos: Aunque la mayoría de módulos de calidad son de pago, utilizándolos de la forma correcta podemos ampliar las posibilidades de personalización, adaptación, funcionalidad y rendimiento.

El Código Abierto: Prestashop es una plataforma de código abierto o Open Source, lo que significa que cualquier programador con conocimientos de html, php, css o javascript puede modificar y ampliar el código fuente de la aplicación para adaptarla a las necesidades.

El SEO: Los desarrolladores de Prestashop no han olvidado el SEO por lo que nos permitirá hacer hincapié en las claves más importantes del seo onpage para que tu e-commerce posicione mejor. Existen también muchísimos módulos que pueden ayudarnos en esta tarea.

El “pero”

Es cierto que Prestashop es una herramienta muy potente, que cumple bien su cometido y que en muchas ocasiones puede ahorrarnos mucho trabajo a los programadores. Como hemos visto anteriormente, son muchas las ventajas de Prestashop. Pero, en mi opinión, es indispensable la modificación y adaptación del código para lograr un resultado realmente profesional. Los negocios son todos diferentes y, pese a la flexibilidad a la hora de personalizar Prestashop y la gran cantidad de temas y módulos que existen, siempre se requerirán modificaciones por parte de un programador para acabar de pulir el proyecto y que tu sitio web sea un reflejo real, personalizado y profesional de tu modelo de negocio. Así, conseguirás que tu tienda online esté plenamente enfocada a tu usuario objetivo, mejorando la conversión y la rentabilidad. De otra manera, será el negocio el que deberá adaptarse a las limitaciones existentes en Prestashop. Por tanto, a nivel de consejo, si estás pensando en abrir una tienda online, has pensado en Pretashop, pero quieres una web 100% adecuada a tu usuario objetivo, busca el soporte de un profesional cualificado para adaptar, ampliar y mejorar el código de tu tienda y salva las limitaciones que te puedas encontrar.

La entrada 7 ventajas de Prestashop para crear una tienda online se publicó primero en Visto en la Red.