Desactivar warning validación XSD en PHP

Si estás tratando de validar documentos XML en PHP muy probablemente estés usando la clase DOMDocument. Esta clase que nos permite crear una estructura de árbol de nodos de un documento XML, permite realizar una validación con un archivo XSD usando el método schemaValidate. Este método, además de retornar un valor booleano con el resultado de la validación, puede arrojar warnings no capturables por nuestro bloque try/catch.

Una solución sería establacer tu propio manejador de warnings y errores en el proyecto, cosa de la que no voy a hablar en esta entrada pero que puedes ver como realizar en los comentarios de usuarios en php.net sobre la funcion set_error_handler. En su lugar, lo que quiero enseñar es como desactivar estos warnings y errores que arroja el uso de DOMDocument:

Internamente PHP usa la libreria libxml para la manipulación de documentos XML. En el caso de detección de errores, por ejemplo, si trabajamos con un xml mal formado o si la validación XSD detecta nodos incorrectos, además de arrojar warnings la librería guarda una cola de errores detectados. Lo que vamos a hacer es decirle a libxml que no arroje warnings y que vamos a ser nosotros los que gestionemos esos errores a través de la cola que libxml crea. En este ejemplo, voy a desactivar el lanzamiento de errores y voy a lanzar una excepción con el primero de la cola de libxml (si existiese alguno trás trabajar con DOMDocument):

$previousState = libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->loadXML($message, LIBXML_NOBLANKS);
$dom->schemaValidate('validator.xsd');
$arrayErrors = libxml_get_errors();
libxml_clear_errors();


if (!empty($arrayErrors)) {
throw new Exception($arrayErrors[0]->message , 404);
}
libxml_use_internal_errors($previousState);

En este caso, $previousState va a aguardar el estado en el que se encontraba la activación de errores antes de mi uso, ya que esta cola puede ser compartida. Una vez finalizado nuestro tratamiento volvemos a poner el estado previo. La función libxml_use_internal_errors nos permite desactivar o activar el lanzamiento de errores (true o false) y tras instanciar la creación del documento DOM y su validación XSD, consultamos la cola de errores generados con la función libxml_get_errors, almacenando su contenido en el array $arrayErrors y vaciando la cola original de libxml con la función libxml_clear_errors (es conveniente realizar siempre este borrado para evitar problemas de memoria). Finalmente comprobamos que nuestro array no está vacío y en ese caso arrojamos la excepción.

Y eso es todo. Tan sólo añadir que disponemos también de la función libxml_get_last_error, que nos devolvería directamente el último error detectado de la cola de errores.

 

jQuery Custom Events (eventos personalizados)

En jQuery podemos crear eventos propios y asociarles a estos una funcionalidad. En cualquier momento de nuestro código podremos lanzar estos eventos asignados a objetos de nuestro DOM.

Para asignar eventos propios usaremos la función de jQuery .on() de la forma:

l_obj_selector.on("processing", function (e) { ... });

dentro de la función podremos añadir argumentos de entrada para poder parametrizar nuestros eventos y tomar distintas decisiones en el código asignado:

l_obj_selector.on("processing", function (e, a_b_processing, a_b_show, a_b_done) { ... });

Para lanzar estos eventos haremos uso de la función trigger() de jQuery sobre un determinado selector indicando el nombre del evento y los parámetros opcionales a la función que se ejecutará;

l_obj_mi_selector.trigger("processing", [ true, $("#item_1").attr("data-show") == 1, false ]);

Cambiar orden de columnas con Bootstrap

El otro día un compañero de mi equipo de trabajo tuvo problemas a la hora de hacer una maquetación. Quería tener dos columnas y hacer que en modo XS de Bootstrap cambiaran de orden. Tras varios intentos me puse con él y le explique como hacerlo y el motivo de su “lio”.

Por intuición uno piensa que las clases de Bootstrap permiten cambiar el orden desde el modo en el que lo configures (xs, sm, md o lg) hacia “abajo” (modo móvil), con lo que su código inicial era:

<div class="col-sm-4 col-xs-push-12">column 1</div>
<div class="col-sm-8 col-xs-pull-12">column 2</div>

Código incorrecto, ya que es en nuestro HTML donde debemos hacer el cambio de orden para que nuestras columnas se cambien en modo xs y aplicar las clases de ordenación en los modos “superiores”:

<div class="col-sm-4 col-sm-push-8">column 2</div>
<div class="col-sm-8 col-sm-pull-4">column 1</div>

Anuncio AdSense responsivo. Cambiar posición a horizontal, vertical o rectangular.

Para poder hacer que los anuncios integrados con Google AdSense de nuestro sitio sean responsivos (adaptables a dispositivos móviles) debemos regenerar el código del bloque de anuncio desde Google AdSense indicando Bloque de anuncio adaptable en el desplegable Tamaño de anuncio. De igual manera seleccionaremos Tamaño óptimo en el desplegable Modo.

Esto hará que el anuncio se adapte automáticamente a su contenedor independientemente del dispositivo que se utilice para navegar por nuestra página web.

Pero hay un pequeño problema: el anuncio puede tomar forma horizontal, vertical o rectangular de forma automática y puede ocurrir que aunque tengamos un anuncio responsivo, éste nos descuadre nuestra maquetación web. Para evitar este problema podemos forzar la forma de nuestro anuncio editando el código que nos genera Google AdSense:



<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="auto"></ins>

El valor auto del atributo personalizado data-ad-format es el que indica a Google que puede usar cualquier forma de anuncio (vertical, horizontal o rectangular). Por tanto, cambiando el valor de este atributo forzaremos a que siempre se utilice la misma forma de anuncio, dependiendo del formato que queramos cambiaremos su valor a:



data-ad-format="horizontal"

data-ad-format="vertical"

data-ad-format="rectangle"

Carrusel Bootstrap con Font Awesome

Como sabrás, Bootstrap importa la librería de fuentes Glyphicons para el uso de iconos en la maquetación. Son dos de estos iconos los que utiliza internamente en la construcción del componente Carousel para los controles de cambio de imagen.

En mi caso prefiero importar la librería Font Awesome y evitar Glyphicons, lo que me ha obligado a sustituir estos iconos de control. Al principio pensaba encontrarme todo hecho simplemente sustituyendo las clases de los iconos, pero viendo el resultado es necesario incorporar algo de CSS (o LESS ¿todavía no conoces LESS?) para que el resultado quede responsivo y los iconos perfectamente alineados. Explico como hacerlo correctamente.

Primero en nuestro html hay que sustituir los iconos de control del carrusel por algunos equivalentes en Font Awesome, en mi caso he pasado de:

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
</a>

a:

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="fa fa-chevron-right"></span>
</a>

Esto hará tus iconos font-awesome visibles en el carrusel, pero no estarán correctamente alineados, para ello destripé las librerías LESS de Bootstrap para ver los estilos propios de esos iconos y añadí el siguiente código CSS a mi hoja de estilos):

.fa-chevron-left, .fa-chevron-right {
     position: absolute;
     top: 50%;
     z-index: 5;
     display: inline-block;
}

.fa-chevron-left {
     left: 50%;
}

.fa-chevron-right {
     right: 50%;
}

@media screen and (min-width: 768px) {

     .fa-chevron-left, .fa-chevron-right {
          width: 30px;
          height: 30px;
          margin-top: -15px;
          margin-left: -15px;
          font-size: 30px;
     }

}

Con esto tendríamos nuestro carrusel Bootstrap con iconos de Font Awesome. Recomiendo usar selectores de ID en el código CSS que os he puesto para que estos estilos sólo afecten a los iconos que se encuentren dentro del carrusel y no en todos los de nuestra web, aquí los he omitido por no entretenerme demasiado🙂

Unsplash – fotografias sin licencia en alta resolución

Unsplash es una página web donde recopilan continuamente fotografías en alta resolución libre de licencia o royalties, de manera que podemos usarlas libremente con o sin modificaciones en nuestros proyectos.

La calidad de las fotos es increiblemente buena y cada 10 dias actualizan el website para añadir más recursos fotográficos.

Como ellos mismos anuncian… do whatever you want gracias a Unsplash

Hover.css: libreria CSS para animaciones y transiciones

Hover.CSS es una librería de efectos CSS3 con la que podremos crear animaciones en nuestros elementos de interfaz (botones,textos, enlaces, imágenes…), todo ello simplemente aplicando clases predefinidas al elemento que se desea animar.

Si eres curioso y no terminas de entender como se crean animaciones y efectos en CSS3 te aseguro que si analizas el código de esta librería resolverás muchas dudas (al menos en mi caso así fue). 

Página oficial de Hover.CSS