Formateando códigos con Pretiffy

JMiur [E]

Google Code Pretiffy es un profecto alojado en Google Codes que permite que formateemos códigos.

A diferencia de muchos otros sistemas que requieren que usemos un servidor propio o PHP, este funciona en cualquier página web y para eso, basta agregar un script y el CSS que podemos descargar desde el mismo sitio del desarrollador.

Soporta muchos lenguajes: C/C++, Java, Python, Ruby, PHP, VisualBasic, SQL, HTML, XML, CSS, JavaScript, etc. La lista completa con ejemplos puede ser revisada en esta página y lo más interesante es que la detección es automática, es decir, no es necesario especificar el idioma.

Todo lo que debemos hacer es agregar ambos archivos antes de </head>:

<style  type="text/css" src="URL_prettify.css"></style>
<script type="text/javascript" src="URL_prettify.js"></script>

Y luego, agregar la llamada a la función, ya sea en la etiqueta BODY:

<body onload="prettyPrint()">

o con un script:

<script type="text/javascript"> window.onload = prettyPrint(); </script>

De aquí en adelante, lo usamos agregando la clase prettyprint a cualquier etiqueta PRE o CODE:

<pre class="prettyprint">
.......
</pre>

Lo mejor, para personalizar el script es agregar el CSS directamente en la plantilla y editarlo, cambiando los colores y otros formatos para adecuarlo a nuestro sitio.

Las definiciones elementales son estas:

pre.prettyprint {
/* 
esto define el rectángulo de la etiqueta y es donde podemos estabelcer colores de fondo, bordes, márgenes,
así como ambiñén las fuentes de los textos y sus tamaños
creo que también debería incluir:
white-space:pre-wrap;
para evitar que las líneas excedan el ancho disponible
*/
}

/* todas las demás, son los colores de las diferentes partes y habrá que descubirlas por ejemplo: */
.pln {color: #000} /* el color base */
.str {color: #080}
.kwd {color: #008}  /* las funciones */
.com {color: #800} /* los comentarios */
.typ {color: #606}
.lit {color: #066} /* los datos */
.pun {color: #660} /* los símbolos */
.tag {color: #008} /* las etiquetas */
.atn {color: #606} /* los atributos */
.atv {color: #080} /* los valores de los atributos */
.dec {color: #606}

Roundabout con JQuery

Sombras nada más ... entre Firefox e IE

Lentamente, los navegadores van incorporando opciones de diseño aunque, claro está, cada uno lo hace a su modo y con sus propia sintaxis; pequeño detalle que ... nos vuelve locos.

Las sombras son una de esas opciones y ni la w3.org tiene claro que hacer con ellas y ha sido removida temporalmente de las especificaciones del futuro CSS3. Se soponía que uno podría aplicarlas de manera similar a esto:

box-shadow: 5px 5px 5px #AABBCC;

Pero, pese a que box-shadow aún no funciona, algunos navegadores siguen teniendo la posibilidad de agregar sombras, no solo a los textos usando la propiedad text-shadow, sino también a bloques, es decir, a etiquetas como DIV, P o incluso IMG y si bien se recomienda que esos bloques estén dimensionados con width o height, sólo es necesario en versiones de Internet Explorer anteriores a la 8.

box-shadow: 5px 5px 5px #ABC;

en Internet Explorer 8 (ver detalles):

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";

en Internet Explorer en general (ver detalles):

filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);

Este es un texto dentro de un DIV

Bueno, eso del mismo resultado es un decir porque en IE las sombras se muestran "duras" más estáticas pero, algo es algo.

Para aplicar el efecto, he declarado una clase y la he agregado a un DIV:

<style>
.sombra {
/* propiedades normales */
border-radius: 10px;
background-color: #456;
color: #DEF;
font-size: 24px;
height: 30px;
margin: 20px auto;
padding: 10px;
text-align: center;
width: 400px;
/* propiedades de la sombra */
box-shadow: 5px 5px 5px #ABC;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);
}
</style>

<div class="sombra"> Este es un texto dentro de un DIV </div>

De manera similar, prodría aplicarse a un elemento más complejo:

Esta es una imagen dentro de un DIV

La sintaxis para Firefox y todos los navegadores basados en Gecko es la siguiente (los que usan WebKit son similares, sólo cambia el nombre de la propiedad):

box-shadow: offsetX offsetY blurRadius spreadRadius colorRGB;

offsetX offsetY indican la distancia horizontal y vertical del comienzo de la sombra; valores positivos colocan la sombra debajo; valores negativos, colocan la sombra arriba:

box-shadow y box-shadow
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

blurRadius indica el efecto blur o esfumado, cuanto más alto sea, más se esfuma y, por defecto es 0:

blurRadius 1	blurRadius 10	blurRadius 50
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

spreadRadius es el tamaño de esa sombra, su ancho y su alto; un valor de 0 hace que sea tan grande como el elemento:

spreadRadius 5	spreadRadius 10	spreadRadius 20
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

Hay un dato extra que podemos incluir: la palabra inset que hará que la sombra, en lugar de estar afuera, esté adentro. Un ejemplo:

box-shadow: -110px 2px 30px 1px #AABBCC inset;

Este es un texto dentro de un DIV

Para tener esa sombra en ambos ángulos, agregamos otra definición, separándola con una coma. De este modo:

box-shadow: 5px 5px 5px #ABC, -5px -5px 5px #ABC;

Este es un texto dentro de un DIV

La propiedad puede ser combinada con cualquier otra (bordes, fondos, curvas) y generar cualquier tipo de efecto extraño:

box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

Este es un texto dentro de un DIV

En Internet Explorer lo que se usa es uno de los tantos filtros disponibles, la propiedad básica es filter aunque en IE8 se habla de -ms-filter, en realidad, ambas son la misma; la única diferencia es que en un caso, los valores se colocan entre comillas y en el otro, no:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(propiedades)"; 
filter: progid:DXImageTransform.Microsoft.Shadow(propiedades);

Cada una de esas propiedades se separa con una coma y hay disponibles cuatro:

color indica el color de la sombra en formato RGB
direction establece la direccion (un ángulo) de la sombra y es un valor en grados (por defecto 225)
enabled puede ser false o true y habilita o deshabilita la sombra
strength es el tamaño de la sombra, cuánto se extenderá y su valor máximo es 255

filter: sólo en Internet Explorer
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

Las sombras pueden agregarse y quitarse a voluntad, por eso podríamos crear alguna clase de efecto hover. Las quitamos con:

box-shadow:  none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);

Al colocar el cursor encima, se mostrará una sombra ...

<style>
.sombra {
box-shadow: none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);
}
.sombra:hover {
box-shadow: 5px 5px 5px #AABBCC;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
}
</style>

<div class="sombra"> ............... </div>

Algunas particularidades de los objetos de Flash

Los objetos de Flash que insertamose en una web tienen sus mañas. Si bien puede utilizarse CSS para personalizarlos, no todas las propiedades son aceptadas y otras son ignoradas o no tienen ningún efecto.

El objeto más usual, el que todos hemos agregado alguna vez es el reproductor de YouTube y, por lo general, copiamos y pegamos el código que nos da el mismo servicio aunque ese código no contenga más que algunos de los parámetros disponibles:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/RY_NQZyBc3g&hl=es_ES&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RY_NQZyBc3g&hl=es_ES&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Esos parámetros extras son explicados por el mismo YouTube:

rel 0 | 1 mostrar/ocultar los videos relacionados
autoplay 0 | 1 habilitar/deshabilitar la autoejecución
loop 0 | 1 habilitar/deshabilitar la reproducción infinita
disablekb 0 | 1 habilitar/deshabilitar el uso del teclado

aunque algunos no son enumerados.

fs 0 | 1 habilitar/deshabilitar la pantalla completa
showsearch 0 | 1 mostrar/ocultar la barra de búsqueda
showinfo 0 | 1 mostrar/ocultar el titulo y la valoración
iv_load_policy 1 | 2 | 3 mostrar/ocultar las anotaciones (usar 3 para ocultarlas)

Veamos uno de los parámetros que tienen sus complciacione: autoplay. Para usarlo, basta agregar &autoplay=1 a la URL:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/RY_NQZyBc3g&hl=es_ES&fs=1&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RY_NQZyBc3g&hl=es_ES&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Lo mismo ocurre si, en lugar de usar el código de YouTube, usamos un código válido:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/RY_NQZyBc3g&autoplay=1"><param name="movie" value="http://www.youtube.com/v/RY_NQZyBc3g&autoplay=1" /><param name="allowfullscreen" value="true"/></object>

Ahora bien, muchas veces, lo que hacemos es mantener el video oculto y mostrarlo al hacer click en un enlace ¿Qué pasará entonces si tenemos el autoplay activado?

Al hacer click en el ícono, el video comenzará a reproducirse. Bien, es lo que queríamos. Ahora, haremos click otra vez en el ícono para ocultarlo ... y aquí vienen las diferencias y algo con lo que hay que tener cuidado. En Internet Explorer, el video continuará ejecutándose pero, en el resto de los navegadores, no. En IE, podríamos seguir haciendo click en el ícono una y otra vez para ver y ocultar el video sin que este se interrumpa pero, en otros navegadores, cada vez que desplegamos el video, este comienza desde el inicio y si lo ocultamos, se detiene.

Esto es así porque tanto en Firefox, como en Opera como en Chrome, si el video o el DIV que lo contiene está oculto con la etiqueta display:none; este, no se ejecuta, tenga o no tenga autoplay.

Este detalle es muy importante y algo similar ocurrirá si se trata de un archivo SWF ya que, por defecto, estos se autoejecutan pero, en Internet Explorer, esto ocurre tanto si están visibles como si están ocultos.

Una particularidad más para tratar de responder a algunas preguntas repetidas.

Los objetos de Flash se posicionan por encima de cualquier otro y eso provoca que en ciertos casos, algo que debería estar "arriba" quede oculto por el video mismo; suele ocurrir con ciertas ventanas modales y un ejemplo más simple lo podemos ver si hay algún tipo de elemento fijo en la página.

Si hay una entrada donde el header es fijo (position:fixed;) y la página es larga. Allí, vemos un video que tiene el código tal cual nos lo da YouTube. Si nos desplazamos hacia abajo, veremos que el video se superpone al header en lugar de pasar por debajo como lo hace el resto de la página.

Para corregir este problema, lo que debemos hacer es agregarles un parámetros que, a mi juicio es un parámetro que debe estar siempre:

<param name="wmode" value="transparent" />

De esta forma, tal como se ve en el segundo video, este seguirá las mismas reglas que el resto de los elementos de la página.

¿Y cómo centrarlos?

Hay dos metodos; podemos poner el código en un DIV y centrarlo:

<div style="text-align: center;"> ....... aqui el código del objeto ....... </div>

o bien colocar estilo en la misma etiqueta OBJECT si es que optamos por un código que no use la etiqueta EMBED:

<object style="display:block; margin:0 auto;" width="480" height="385" type="application/x-shockwave-flash" data="http://www.youtube.com/v/RY_NQZyBc3g&hl=es&fs=1&rel=0&autoplay=0&showsearch=0&showinfo=0"><param name="movie" value="http://www.youtube.com/v/RY_NQZyBc3g&hl=es&fs=1&rel=0&autoplay=0&showsearch=0&showinfo=0" /><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true"/></object>