HTML

Leer más » Comentar

Navegar dentro de una misma página HTML

AnclaAunque la navegación dentro de un mismo documento web es algo que lleva mucho tiempo funcionando dentro de las tecnologías web, a día de hoy, a vuelto a estar de moda gracias a los themes que aprovechan la navegación vertical sin cambio de URL. ¿Cómo funciona esta forma de navegar? Creo que todos conocéis la siguiente forma: read more

Leer más » 1 Comentario

Lo mejor de mi RSS del 25 al 31 de agosto

Y llegó septiembre, bueno realmente mañana llega, pero esta semana será la vuelta de muchos (la mía ya fue la anterior) a la rutina y al día a día. La próxima gran parada será Navidades pero mientras tanto, para animaros nada mejor que leer noticias de interés sobre tecnologías libres:

Aunque soy profesional, fanático y usuario WordPress desde hace mucho en su día lo fui de Drupal y también hay que conocerlo para poder hablar con juicio, nada mejor que saber instalarlo para empezar a probarlo: Cómo instalar Drupal en Ubuntu 14.04 – Ubunlog El email marketing es importante (en el mundo del marketing online de hecho es quizás el método con más índice de conversión) y nada mejor que tener unas buenas plantillas para poder conseguir un aspecto genial en diferentes dispositivos: Plantillas para emails transaccionales en HTML – Kabytes Porque se puede hacer mucho con muy poco (en el caso de Linux) es increíble lo que puede llegar a “caber” en sólo 300MB de distribución: 

Porteus: impresionante distribución Linux portable (-300 mb) – Desde Linux read more

Leer más » 1 Comentario

wp_kses() o cómo limpiar cadenas HTML en WordPress para evitar ataques XSS

Cuando desarrollo plugins y themes para WordPress en CODECTION siempre procuro mirar por la seguridad, “sanitizando” variables tanto para evitar ataques vía inyección SQL como para evitar ataques XSS. Es muy frecuente, que si recibes peticiones y luego las devuelves por pantalla, las variables que manejes, si las maneja el usuario de alguna manera, puedan terminar siendo el origen de una ataque XSS.

Algo tan sencillo como pasar una etiqueta script o iframe en un sitio conveniente y además de un ataque XSS, eres una fuente de phising para el resto de la red. Por fortuna, WordPress facilita mucho la vida al desarrollador al respecto y para evitar este tipo de ataques nos ofrece una función que además es extensible en su funcionamiento vía parámetros.

La función en cuestión es wp_kses() y aunque es similar a strip_tags(), una función nativa de PHP, suele recomendarse para cuestiones de seguridad.

wp_kses-vs-strip_tags

¿Para qué usamos wp_kses?

Básicamente deciros que sirve para limpiar una cadena de elementos HTML indeseados (imaginad otros usos que no sea el de seguridad, se me viene a la cabeza un uso de “limpieza” de una cadena proveniente de Microsft Word o LibreOffice Write).

Tiene esta forma:

wp_kses($string, $allowed_html, $allowed_protocols);

Y los parámetros que recibe indican exactamente:

  • $string: cadena a filtrar
  • $allowed_html: etiquetas HTML que se permitirán y que no se limpiaran
  • $allowed_protocols: protocolos permitidos, por defecto vienen unos pocos y siempre se asegura que no va a permitirse etiquetas ni invocaciones a ficheros JavaScript

La función devolverá el código HTML totalmente limpiado.

El segundo parámetro es interesante, porque podemos definir también qué atributos pasarán de cada etiqueta, un ejemplo curioso:

array(
    'a' => array(
        'href' => array(),
        'title' => array()
    ),
    'br' => array(),
    'em' => array(),
    'strong' => array(),
);

Ejemplo

El ejemplo es original de Simon Wheatly. Tenemos de entrada:

Wisi <a href=”#” style=”color: red;”>defui nunc</a> dignissim <strong class=”weird”>transverbero ideo vel</strong> utinam blandit, iaceo meus epulae enim amet nibh sed brevitas. Pala consequat <script type=”text/javascript” src=”http://example.com/certainly/do/not/want/this.js”></script> capio sino regula typicus <small>luptatum</small> olim ullamcorper uxor in verto.

Vamos a dejar sólo:

  • La etiqueta ‘a’ y sus atributos ‘href’, ‘title’ y ‘target’
  • Y las etiquetas ’em’ y ‘strong’ => array()

El código sería este:

$entrada = 'Wisi <a href="#" style="color: red;">defui nunc</a> dignissim <strong class="weird">transverbero ideo vel</strong> utinam blandit, iaceo meus epulae enim amet nibh sed brevitas. Pala consequat <script type="text/javascript" src="http://example.com/certainly/do/not/want/this.js"></script> capio sino regula typicus <small>luptatum</small> olim ullamcorper uxor in verto.'; $etiquetas_permitidas = array( 'a' => array( 'href' => array(), 'title' => array(), 'target' => array() ), 'em' => array(), 'strong' => array(), ); $salida= wp_kses( $entrada, $etiquetas_permitidas ); echo $salida; read more

Leer más » 1 Comentario

Lo mejor de mi RSS del 7 al 13 de julio de 2014

Metidos más que de lleno en el verano y con unas temperaturas cada vez más altas llega este resumen semanal de actividad en la blogosfera linuxera y del software libre, principalmente en español aunque los que me seguís ya sabréis que algún enlace en inglés puede caer. Estamos ya a lunes, en esta ocasión no he sido tan puntual como suelo ser todos los domingos pero es parte del verano que los fines de semana, lo sean más aún. Sin más vueltas, los enlaces:

Cuando nació JavaScript nadie pensó (o quizás sí, quién sabe si alguien fue realmente visionario) que llegara a convertirse en un lenguaje del lado del servidor, y a día de hoy lo es:

¿Cómo funciona Node.js? – Genbeta Dev read more

Leer más » 1 Comentario

Manejo básico del búfer en PHP

Logo PHPSiempre que manejamos PHP, existe la problemática de mezclar la vista y funcionalidad. Este problema se da a varios niveles y es más complejo y da más quebraderos de cabeza cuanto más se enrevesan código y funcionalidad, el caso típico es cuando guardamos parte de la vista en una cadena y la devolvemos o la imprimimos. Al meter la vista dentro de la cadena, el código se vuelve poco legible y además hay ocasiones en las que este métodos llega a ser inoperable. read more

Leer más » 1 Comentario

Arreglando anchura y visualización en el jQuery UI Multiselect widget

Cuando estás desarrollando interfaces web, el uso de listas <select> es algo básico. En algunos casos no sólo hace falta elegir un valor, por ejemplo, ¿cuál es tu país de nacimiento? Sino que hace falta elegir más de uno de forma simultánea, las llamadas listas <select> con el atributo múltiple. Un ejemplo que se me ocurre es: ¿qué categorías quieres elegir de esta lista?

jQuery UI Multiselect widget

El interfaz estándar para estos casos es bastante “feo” y poco usable. Por eso mismo hay multitud de alternativas para mejorarlo y una que uso frecuentemente es jQuery UI Widget Multiselect. Si entráis en el enlace veréis que tiene características muy interesantes y es una buena alterantiva a Chosen (la que usa WooCommerce internamente), otra herramienta similar que también uso muy a menudo. read more

Leer más » 2 Comentarios

Imitar target=”_blank” en JavaScript

Cuando trabajamos con JavaScript, en ocasiones imitamos el comportamiento de la etiqueta <a href=””> de anchor, de HTML, con un location.href = url. Sin embargo, cuando queremos que el enlace destino se abra en una pantalla aparte, haciendo uso de la expresión:

<a href="URL" target="_blank">el texto del enlace</a>

No podemos usar ese método, sino este que muestro a continuación:

Leer más » 8 Comentarios

Alinear imágenes correctamente en una grilla sin usar tablas con HTML y CSS

Es bien posible que en más de una ocasión hayáis tenido que colocar imágenes una detrás de otra formando filas y columnas. Algo como lo que muestro a continuación:

Grilla de imágenes

¿Cuál es el problema? Si lo hacéis a mano directamente con HTML y CSS sin usar una galería o un framework que te la cree correctamente, os habréis peleado para dejarlas perfectamente alineadas.

Leer más » 5 Comentarios

Codificar dirección de correo electrónico (email) para evitar spam

Cuando colocamos una dirección de correo en un sitio público y que puede ser leído por los spam bot (robots generadores de spam) nos arriesgamos justo a eso, a sufrir las consecuencias de entrar en sus listas y de esta forma coparnos la bandeja de correo no deseado.

Spam

Una solución es dejar de usar enlaces en sitios web del tipo mailto y colocar una imagen con la dirección. El problema de esta solución es que pierde interactividad, no podemos hacer clic directamente.

Una solución es transformar los caracteres en entidades HTML: el bot no lo reconoce tan fácilmente (tiene que estar programado para eso), pero la funcionalidad para nosotros sigue siendo la misma.

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

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

Activar compresión GZIP en servidores Apache para aumentar la velocidad de nuestros sitios web

Logo servidor web ApacheA día de hoy, prácticamente todos nuestros potenciales usuarios soportarán a través de sus navegadores páginas web servidas de forma comprimida. ¿Por qué es importante comprimir el código HTML resultante que enviamos? Para mejorar el rendimiento del sitio.

Ya hemos comentado otros métodos que tenemos a nuestro alcance para optimizar la velocidad de nuestro sitio como el uso de Minify, en concreto hablamos en el caso particular de WordPress y su plugin WP-Minify.

Hoy os traemos una optimización de la parte del servidor. La idea es enviar comprimido las partes que mejor ratio de compresión obtienen. La estructura central de una página, sea cual sea la tecnología del lado del servidor que usemos (PHP, Python, Ruby, etc) va a ser siempre código HTML. Este código al comprimirse reducirá su peso enormemente, en unas ratios que fácilmente llegan y superan al 90%. Igual ocurre con otros ficheros tipo texto: CSS y JavaScript por ejemplo.

Otro tipo de contenido que servimos desde nuestro sitio no obtiene ratios tan favorable y es hasta contraproducente comprimirlo por el coste en recursos que se tiene para luego no obtener un beneficio. Hablo de imágenes, ficheros PDF, contenido multimedia…

Por lo tanto, veamos rápidamente cómo activar la compresión usando gzip en nuestro servidor Apache y a la vez configurarlo, de forma que tengamos el rendimiento óptimo.

Leer más » 15 Comentarios