Categoría: Desarrollo web

Cómo poner superíndice al cuadrado ² y al cubo ³ en un editor de texto

Poner superíndices en un editor de texto es muy sencillo. Lo más normal en temática relacionada con la ingeniería y arquitectura es poner superíndices al cuadrado y al cubo, tenemos que hacer lo siguiente:

  • Superíndice al cuadrado, por ejemplo metros cuadrados (m²): Alt + 2 + 5 + 3
  • Superíndice al cubo, por ejemplo metros cúbicos (m³): Alt + 2 + 5 + 2

NOTA: Como me han informado la explicación es incompleta, para que funcione hay que tener activada la tecla BloqNum, y hay que utilizar los números que están a la derecha del Intro (no los de encima de las letras).

Cómo poner todos los elementos de un menú expandidos o con class expanded en Drupal 7

Si queremos poner todos los elementos o items de un menú expandidos, es decir, que con pasar el ratón por encima nos enseñen los subelementos contenidos en ese elemento del menú o que en código sea li class=»expanded» es muy sencillo. Tenemos que hacer lo siguiente:

      1. Vamos a Estructura > Menús > Menu principal (sirve para cualquier menú)
      2. En el Menú principal vemos su estructura de árbol con elementos padres e hijos
      3. Pulsamos en Editar en cualquier elemento padre
      4. Hacemos clic en el check «Mostrar expandido»
      5. Pulsamos en Guardar

Menú mostrar expandido

Esto lo podemos repetir con tus los elementos padre del menú que queramos.

Cómo poner una página o nodo como portada o home en Drupal 7

Si queremos poner una determinada página o un nodo como nuestro Home o Inicio de nuestra web con Drupal 7 es muy sencillo.

Si nuestra web en Drupal 7 la tenemos traducida al español seguimos los siguientes pasos:

  1. Vamos a Configuración, y ahí pulsamos en Información del sitio
  2. En Información del sitio vemos en el apartado Portada: Página inicial predeterminada
  3. En el espacio que nos da ponemos la url restante de nuestro nodo en cuestión
  4. Guardamos y vemos el Home o Inicio de nuestra web

Con estos 4 pasos hemos cambiado la página de portada de nuestra web.

Técnica Pomodoro para mejorar la productividad personal

Si te gustaría aprovechar mejor el tiempo seguro que estarás leyendo artículos, libros, etc para mejorar tu productividad personal. Una técnica que a algunas personas les funciona es la Técnica Pomodoro. Esta técnica se basa en la recompensa mental que obtenemos al cumplir unas tareas en un tiempo establecido relativamente corto como son 25 minutos. Entre cada sesión de trabajo tomamos una pausa corta (entre 5 y 10 minutos). Cuando completamos 4 sesiones seguidas tomamos un descanso más largo para relajarnos de entre, por ejemplo, 15 a 25 minutos.

Cronómetro técnica Pomodoro

Los cinco pasos para realizar la Técnica Pomodoro son los siguientes:

  1. Vemos que tarea o tareas podemos realizar en ese pomodoro concentrados al 100%
  2. Ponemos una cuenta atrás con un cronómetro o aplicación de 25 minutos
  3. Realizamos esa tarea o tareas eliminando la práctica totalidad de las interrupciones hasta que nos quedemos sin tiempo. Al finalizar marcamos una X , un visto bueno o un símbolo que nos ayude a contar cuantos pomodoros hemos realizado
  4. Descansamos 5 o 10 minutos
  5. Una vez completados 4 pomodoros tomamos una pausa más larga de 15 a 25 minutos.

Tenemos herramientas online que cronometran este tiempo quedando el contador de tiempo visible en la pestaña de nuestro navegador, por ejemplo:

 

Cómo utilizar con Conditional fields el operador lógico OR para campos referencia a término de taxonomías en Drupal 7

Cuando utilizamos el módulo Conditional fields con Drupal 7 queremos que unos campos aparezcan condicionados por, por ejemplo, los valores de otro campo. Cuando los valores de ese campo son términos de una taxonomía y queremos que algunos de estos términos afecten al primer campo (es decir, utilizar el operador lógico OR) tenemos utilizar el número tid de la taxonomía en la pestaña Manage dependencies.

Utilizando un ejemplo, imaginemos que tenemos un campo Nº de botellas que queremos que aparezca cuando en otro campo proveniente de una taxonomía que llamamos Producto tenemos los valores: Leche, Agua y Vino, pero no queremos que aparezca el campo Nº de botellas para el resto de los valores del campo Producto, por ejemplo para Chocolate, Pan, etc.

Cuando vamos a la pestaña «Manage Dependencies» dentro de nuestro Content Type o Tipo de Contenido (que está entre la pestaña Gestionar campos y Gestionar presentación) crearemos una nueva dependencia donde Dependent es el campo «Nº de botellas» y Dependee es «Producto» y dejamos igual lo que viene por defecto (The dependent field is visible when the dependee has value…) y pulsamos el botón «Add dependency». En Values input mode elegimos «Any of these values (OR)» y ponemos el tid de cada una de los términos de las taxonomías. Para saber este número vamos a la taxonomía y cuando estamos viendo los términos al poner el ratón sobre el enlace Editar veremos que tenemos una url así: nuestaweb/taxonomy/term/numero/edit, el tid de cada término sera el valor número en su url. Dejamos el resto igual y pulsamos en el botón «Guardar las opciones».

Cómo poner llamada o chat a un usuario o varios usuarios de Skype con HTML

Si queremos poner un enlace en una web para que puedan llamar o chatear a un usuario de Skype o varios usuarios es muy sencillo. Se utiliza skype: nombreskype y opciones adicionales, siendo nombreskype el skype id.

Tenemos las siguientes opciones:

  1. Si queremos que se pueda llamar a un usuario de skype pondremos lo siguiente:
    2. <a href="skype:nombreskype?call">Llamar a la cuenta de nombreskype</a>
  2. Chatear con el usuario de skype
    3. <a href="skype:nombreskype?chat">Chatear con la cuenta de nombreskype</a>
  3. Enviar un mensaje de voz al usuario de skype
    4. <a href="skype:nombreskype?voicemail">Enviar un mensaje de voz a la cuenta de nombreskype</a>
  4. Hacer una llamada a varios usuarios de skype a la vez
    5. <a href="skype:nombreskype;nombreskype2?call">Llamar a la cuenta de nombreskype y nombreskype2</a>
  5. Chatear con varios usuarios de skype a la vez
    6. <a href="skype:nombreskype;nombreskype2?call">Chatear con la cuenta de nombreskype y nombreskype2</a>

Cómo desactivar los sábados y domingos del calendario en datepicker de Jquery

Si queremos desactivar en el calendario los días del fin de semana, sábado y domingo, tenemos que incluir este script en el head de nuestro página web:

$(function() {
   $('#txtDate').datepicker({ 
       beforeShowDay: $.datepicker.noWeekends 
   });
});

Aplicando esté código tendríamos lo siguiente:

Jquery desactivar datepicker sabados y domingos

Aquí está todo el código completo para que funcione en un archivo html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
  <script>
  $(function() {
   $('#txtDate').datepicker({ 
       beforeShowDay: $.datepicker.noWeekends 
   });
});
</script>
</head>
<body>
Fecha: <input type='text' id='txtDate' />
</body>
</html>

Ver versión móvil de un sitio web con User Agent Switcher en Firefox

Si tenemos necesidad de probar como queda una web en los distintos dispositivos móviles podemos utilizar la extensión User Agent Switcher con Firefox: https://addons.mozilla.org/es/firefox/addon/user-agent-switcher/

Después de instalarla en la pestaña del menú herramientas tendremos una nueva extensión con el nombre «Default User Agent».

User Agent Switcher

Si vemos la portada de Mcdonalds en versión web en la que he estado trabajando:

Web Mcdonalds versión web

Si utilizamos ahora User Agent Switcher para seleccionar como se vería en un Iphone con IOS 4_2.1:

User Agent Switcher seleccionar Iphone

Y así quedaría la web en versión móvil en Firefox:

Mcdonalds versión móvil

Este es un ejemplo de como se vería la versión móvil de una web en Firefox. Igualmente tenemos la posibilidad de ver como quedaría en según un gran número de parametros: Según el navegador por IOS utilizada (Windows, Mac, Linux y Unix), según el móvil (Android, iOs, Linux, Maemo, Palm y Symbian) y cómo ven nuestra web los robot o spiders de Google, Yahoo, etc.

 

Cómo traducir el texto de un widget en WordPress utilizando qTranslate

Para traducir el texto de un widget de WordPress utilizando qTranslate tenemos que incluir delante del texto de cada idioma lo siguiente [:XX] siendo XX el idioma elegido (definido con 2 letras).

Por ejemplo, si queremos poner un texto en inglés y español hariamos lo siguiente:

[:en]My English Title[:sv]Mi título en español

Esto vale tanto para títulos como para contenidos de cualquier widget.