Lo mejor de mi RSS del 1 al 7 de junio de 2015: temas WordPress, jQuery, plugins, tipados y permisos

Con el verano ya encima, aunque no en lo astronómico, sí en lo climático, os traigo este resumen semanal de enlaces interesantes que viene un día más tarde de lo normal, lunes en vez de domingo. Como veréis hay cantidad de enlaces así que comenzamos:

¿Sabes cambiar el aspecto gráfico de tu portal web con WordPress? Hablamos de temas (o themes) en el curso de WordPress de Codection: Elegimos el aspecto gráfico de nuestra web, instalamos un tema del repositorio – Curso WordPress de Codection Parece algo básico pero es un tema que todavía suscita muchas dudas: Cómo funcionan los permisos de archivos en Linux (I) – Ubunlog Conceptos básicos de programación que todos los que nos dedicamos al desarrollo tenemos que tener en cuenta: 

Tipado fuerte y débil, dinámico y estático – Diario de prorgamación read more

Leer más » Comentar

Localizar calendario datepicker de jQuery UI: formato de fecha y nombres de los meses

Cuando hacemos desarrollos web para proyectos con algún apartado de gestión basado en formularios, lo más normal, es que terminemos teniendo que introducir fechas. Las fechas son un tanto problemáticas, tanto por su posterior manejo, como por su introducción por parte del usuario. ¿Por qué? Por dos razones:

  • Hay que introducirlas en un determinado formato, en español es primero el día, luego el mes y luego el año, todo separado por barras “tipo Unix”. Podemos hablar de diferentes formatos, depende del país y la cultura y podemos hablar también de fechas incluyendo el día de la semana o incluso el nombre del mes con letras.
  • Es más fácil y más gráfico hacer clic sobre un día en un calendario que escribir la secuencia a mano.

Una buena solución suele ser manejar un calendario que salga directamente sobre el campo de texto como este que os muestro a continuación: read more

Leer más » 3 Comentarios

Agrupar misma regla CSS para varios elementos

Cuando estás creando reglas CSS, es muy frecuente que diseñes reglas para cada elemento o grupo de elemento definiendo clases. Es correcto agrupar elementos en grupos mediante las clases, sin embargo, también es correcto definir una sola regla CSS para varios identificadores y clases o partes de reglas que son comunes a varias.

Esto es correcto pero es menos usado y conocido y de ahí la entrada de hoy.

¿Por qué conviene hacerlo?

Básicamente por simplidad y velocidad. Velocidad en dos aspectos, por un lado, por tiempo de transmisión (menos tamaño del fichero CSS resultante), por otro lado, por tiempo de interpretación (menos reglas que interpretar y menos reglas sobre las que buscar al renderizar).

¿Cómo se hace?

Probablemente ya lo sepáis pero merece la pena volver a comentar la sintaxis. Tened en cuenta que ciertos framework como jQuery también hacen uso de la misma sintaxis y puede seros útil.

Veamos un ejemplo esclarecedor:

Leer más » 1 Comentario

Controlando el evento resize en JavaScript

Si trabajamos con diseños web responsive, muy probablemente hagas algún tipo de acción con JavaScript para detectar el evento resize. Este evento, como indica su nombre en inglés, indica que la web ha sufrido un cambio de tamaño. Si en lugar de trabajar con JavaScript directamente sois como yo, usuarios de jQuery el ejemplo típico sería el siguiente:

$(window).resize(function() {
  alert("El tamanno ha cambiado!");
});

¿Qué problema nos surgirá tras usar este código tal cual, dependiendo del navegador llegaremos a obtener respuestas diferentes. En Google Chrome he comprobado, por ejemplo, que en cada redimensionamiento en lugar de saltar un sólo evento se disparaban cuatro: uno con el tamaño antiguo, tres con el nuevo. En Firefox el comportamiento por lo visto también puede ser errático (o parecernos para nuestros propósitos).

Leer más » 4 Comentarios

Limitar el número de palabras o caracteres en el editor de WordPress

No suele ser lo normal, porque lo más frecuente es que quieras limitar el tamaño del extracto (excerpt) pero en ocasiones puede dársenos el caso de que necesitemos para un cliente limitar el tamaño del contenido de nuestra entrada. Probablemente estemos hablando de un custom post type y a veces tendremos que limitar en función al número de palabras y otras veces, en función al número de caracteres.

El código es el siguiente y deberá ir insertado en vuestro fichero functions.php del tema que estéis usando:

add_action( 'admin_print_footer_scripts', 'check_textarea_length' );

function check_textarea_length() {
	?>

Leer más » 1 Comentario

[Usabilidad] Click sobre label cuando trabajamos con input en desarrollo web

Cuando trabajamos desarrollando interfaces web, al igual que ocurre con cualquier otro diseño de interfaz, una de las labores básica es aumentar la usabilidad. Hay que hacer fácil y natural el funcionamiento.

Si tenemos un formulario, con una lista con botones de tipo radio o checkbox y al lado una serie de etiquetas label como aparece en la imagen:

Lista con input

  • Es incómodo tener que presionar el control…
  • … pudiendo presionar cualquier parte de la etiqueta para que se active el control

Hacer esto a mano, elemento a elemento, además de tedioso no es nada práctico, pero jQuery nos proporciona un método para hacerlo de una sola vez:

Leer más » 5 Comentarios

5 consejos para usar jQuery con WordPress

A día de hoy pocos trabajan directamente con JavaScript para manejar la parte del cliente, se suelen usar frameworks que facilitan el trabajo y sin lugar a dudas, la referencia es jQuery. Cuando desarrollamos temas en WordPress (y plugins), por lo tanto, será bien probable que necesitemos de jQuery. Hay muchas formas de usarlo, pero vamos a explicar una serie de buenos métodos para evitar complicaciones.

Este texto es una traducción, adaptación y mejora del original en inglés: 5 tips for using jQuery with WordPress de Eric Martin.

1. Utiliza wp_enqueue_script()

Cuando manejamos jQuery a secas, sin WordPress, usamos directamente la etiqueta <script> y llamamos a nuestro fichero, ya esté en local o en un CDN. Sin embargo, en WordPress las cosas cambian, aunque pueda funcionar, no debemos hacerlo.

Para ello tenemos una función específica: wp_enqueue_script y podemos unir la carga de jQuery a una acción en concreto. Al igual que esta función existe otra para cargar estilos: wp_enqueue_style.

Leer más » 1 Comentario

Comprobar si un botón radio está seleccionado y cuál seleccionado dentro de un grupo con jQuery

Comprobar si un botón radio está seleccionado con jQuery

Será tan simple como hacer un selector que nos lleve al elemento, vamos a usar el identificador directamente para el ejemplo, y usar la función is() con el argumento checked. Veamos:

$('#mielemento').is(':checked');

Devolverá true o false. Es útil para obtener datos en un formulario.

¿Qué elemento radio está seleccionado dentro de un grupo?

Si lo que queremos es seleccionar directamente al elemento dentro de un grupo que está elegido haremos lo siguiente:

$("input[name='grupo']:checked").val();

Esta sentencia nos devolverá qué elemento dentro del grupo está seleccionado. Recordad que para agrupar botones de este tipo, en HTML usamos el atributo name.

Ejemplo de uso

Os dejo un ejemplo de cómo se manejan los botones radio en HTML que siempre viene bien recordarlo:

Leer más » 4 Comentarios

Buscar un elemento por su contenido con jQuery

Los selectores de jQuery son una herramienta potente y flexible como pocas en el desarrollo web. Su sintaxis basada en CSS facilita enormemente la labor, hacer todo a base de document.getElementById es muy duro. Sin embargo hay veces que queremos elegir elementos no por su identificador, ni por su clase, ni por su nombre, ni siquiera por un atributo que hayamos rellenado aparte, sino por su contenido.

Para esta labor tenemos el selector :contains. Veamos ejemplos que es la mejor forma de aprender su uso. Tened en cuenta sólo una cosa, :contains nos devolverá todos los elementos cuyo texto interno contiene en alguna parte la cadena que le pasemos. Otro detalle a tener en cuenta: sí es sensible a mayúsculas.

Veamos:

  • $(‘:contains(“Mi texto”)’): reconocerá cualquier elemento del texto que incluya en alguna parte “Mi texto”, respetando mayúsculas y minúsculas.
Leer más » 2 Comentarios

Lo mejor de mi timeline del 12 al 18 de mayo

  • @lopstcom Configurar un servidor de monitoreo de servidores con Cacti
  • @fjcarazo 7 consejos para hacer buen responsive design
  • @fjcarazo El juego de la serpiente con jQuery
  • @reddeautores Volumetter, controlando el volumen desde el teclado
  • @YJesus Mymail-Crypt para Gmail – GPG encryption (Chrome)
  • @elandroidelibre Android y Ubuntu en un USB de 8 centímetros
  • @usemoslinux Dónde se encuentran los archivos de registro (logs) en Linux
  • @meneame_net El 5% de los PC tendrán instalado Ubuntu el próximo año
  • read more

    Leer más » 1 Comentario

    Desactivar autocompletado en formularios HTML

    Cuando estamos trabajando con formularios en la web, es muy común que por comodidad del usuario, el navegador incorpore algunos datos que son repetitivos entre ellos: nombre, apellidos, dirección de correo electrónico, etc. La idea es facilitarle la vida al usuario y hacer más rápido el uso del formulario.

    Sin embargo, en ocasiones, desearemos que no se produzca dicho autocompletado. Por ejemplo, la web de un banco, un nombre de usuario en una plataforma, o algo susceptible de ser usado de forma malintencionada.

    Para desactivar el autocompletado, disponemos del atributo autocomplete. Veamos un ejemplo de uso, lo incorporamos directamente en el formulario:

    <form autocomplete="off">

    O más concretamente al input en cuestión si queremos afinar en cada entrada de texto:

    <input autocomplete="off">

    Sin embargo hay un problema: no valida en los test del W3C. Para solventarlo, tenemos varios métodos, el más sencillo es el siguiente que lo he implementado usando jQuery:

    Leer más » 5 Comentarios

    Manejo de listas select con jQuery (ComboBox/DropDownList)

    jQuery es un framework cuyo uso se hace casi inevitable para todos aquellos que usamos de forma intensiva JavaScript. El manejo de las listas de elementos en un sitio web, con la etiqueta <select>, es algo básico en el manejo de datos presentados en formularios.

    De cara a validar, gestionar, editar, insertar… es decir, hacer todo tipo de operaciones con los datos en el cliente, necesitamos de JavaScript pero su uso es tedioso. jQuery lo hace simple e inmediato. Veamos el caso concreto del manejo del <select>.

    Veamos, tenemos el siguiente listado en un sitio, vemos el código directamente en HTML:

    <select id="miselect">
     <option value="1">Ubuntu</option>
     <option value="2">Fedora</option>
     <option value="3">Red Hat</option>
     <option value="4">Debian</option>
    </select>

    Para cada elemento tenemos dos datos:

    • El texto que se muestra: suele ser algo visible para el humano, un nombre de distribución en este caso
    • El valor: suele ser un identificador único, en este caso es una referencia ficticia a una tabla de distribuciones

    Comencemos a tratarlo.

    Seleccionar el elemento

    La sintaxis de los selectores de jQuery está basada en la de CSS. En este caso elegir el <select> dentro del DOM del documento sería como sigue:

    $("#miselect")

    Obtener el valor del ítem seleccionado

    Sobre el selector aplicamos la función val():

    Leer más » 35 Comentarios

    Lo mejor de mi timeline del 17 al 23 de marzo

  • @tuXapuntes Spotify de forma nativa en GNU/Linux
  • @Korso10 Mini servidores en drones, gran idea de The Pirate Bay
  • @fjcarazo Subir archivos con previsualización [jQuery]
  • @iRajneekant Apple contra Nokia, RIM y Motorola por la “poco útil” Nano-SIM
  • @ahornero ¿Qué multimonitor en U12.04?
  • @pazsegura Check-in box, se deja ver por todos sitios
  • @emslinux Disponible en Google Play Angry Birds Space.
  • read more

    Leer más » 1 Comentario

    Parámetros opcionales en funciones de JavaScript

    El desarrollo web siempre tiene dos interacciones: la que se produce en el lado del servidor y la que se produce en el lado del cliente. Esta segunda cada vez tiene más relevancia para conseguir una mejor experiencia del usuario y JavaScript es el responsable de ésto.

    JavaScript es una de esas tecnologías que se pensó para abordar pequeños problemas, pero que por cuestiones de compatibilidad y aceleración tecnológica, se ha convertido en una tecnología versátil a la vez que necesaria para poder afrontar las exigencias de la actualidad.

    En lenguajes como PHP, podemos hacer uso de parámetros opcionales (aquí explicaba su uso al hablar de cómo podíamos imitar la sobrecarga de funciones en el curso de PHP orientado a objetos), por ejemplo:

    function crearPersona($nombre = "")

    Y sus respectivas llamadas:

    crearPersona("Javier");
    crearPersona();

    Sin embargo, en JavaScript no tenemos esta posibilidad, aunque al igual que ocurría con la sobrecarga de funciones en PHP, podemos imitarlo. Veamos cómo.

    Leer más » 4 Comentarios