Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Cómo se ve un blog en distintos navegadores

29/01/2010
A los que no sabemos estarnos quietos y constantemente cambiamos cosillas en nuestro sitio web, nos trae de cabeza esto de la (in)compatibilidad. Por si alguien todavía no se había dado cuenta, nuestra web se puede ver preciosa de la muerte, por ejemplo en Internet Explorer, al tiempo que con Firefox resulta un auténtico desastre. Realmente este ejemplo no es muy bueno porque lo normal es que sea al revés... Pero en fin, seguimos.

Esto ocurre porque cada navegador interpreta el código como su correspondiente programador le dió a entender. De esta manera, una misma instrucción puede ofrecernos resultados distintos según el navegador que se use. El problema para nosotros, aficionados a la programación web, es que cuando creemos que nuestro diseño está perfecto y lo publicamos sin más comprobaciones, es fácil que que una cantidad de usuarios más o menos grande, vean algo sustancial cambiado porque usan un navegador distinto al nuestro.

Actualmente (datos de Dic 09), IE sigue siendo el navegador más usado, seguido por Firefox y Chrome. Imaginad ahora que nosotros hacemos nuestro diseño en Firefox pero que en IE no se ve bien. Según esto, es muy posible que el 63% de los internautas vean una patata en lugar de lo que nosotros queríamos mostrar. El texto de las entradas normalmente estará en su sitio, pero otras cosas como fechas, menús, gráficos de fondo... seguramente no.

Imagen de Market Share.

Para intentar solucionar esto, existen unos estándares web al modo de las normas ISO, que intentan homogeneizar la forma en que los distintos navegadores deberían interpretar los documentos web. Pero claro, estos estandares no son de uso obligado para los que diseñan los navegadores y aunque cada vez ocurre menos, pero de momento cada cual hace un poco lo que le da la gana.

Basándonos en los datos del gráfico anterior, podríamos tener la tentación de programar pensando sólo en Internet Explorer y así maximizar nuestra buena visibilidad. Pero sucede que este navegador que casualmente viene de serie con Windows, ha sido tradicionalmente el que más se alejaba de los estándares. Incluso entre sus propias versiones y especialmente entre la 5 y las posteriores, las diferencias son importantes.

Si bien es cierto que las nuevas versiones de navegadores que van saliendo, se van aproximando mucho al estándar, también hay que tener en cuenta que todavía hay demasiadas versiones antiguas pululando por ahí. Por cierto, si sois de los que teneis todavía IE5, actualizarlo... ¡por favor!

La recomendación general sería que utilizáramos el estándar lo máximo posible, ya que la tendencia es que cada vez se respete más y de esta manera, si nuestra página está bien formada ahora, probablemente en el futuro lo seguirá estando sin demasiados problemas.

Mientras llega una uniformidad más amplia, una solución sería molestarnos en tener al menos los navegadores que tiene el 80-90% de la gente y probar nuestra web en todos ellos antes de dar nuestras modificaciones por concluidas. Con IE6, IE7, FF3, Chrome y Safari, prácticamente conseguiremos que todo el mundo vea nuestro blog igual que nosotros. No cuesta demasiado tenerlos instalados y abrirlos sólo cuando queramos comprobar.

Para perezosos, existen algunas aplicaciones online que nos permiten ver cómo queda una página en distintas resoluciones y/o navegadores. Aunque me da la impresión de que no son 100% fiables, al menos nos sirven de guía:
  • Browser Shots: De los más completitos. Podemos seleccionar diversos navegadores entre una gran variedad. Algunos ni me sonaban. Explorer, Firefox, Opera, Safari, Konqueror, Mozilla, K-Meleon,... entre otros muchos.Normalmente hay que esperar un tiempo para ver los resultados.
  • Total Validator: También muy completo, se puede combinar el navegador con la resolución. Muestra resultados para los navegadores más habituales y además de Windows incluye Linux. El resultado te llegará (algo demorado) por correo. Se puede incluir en los resultados un validador de código y una comprobación de enlaces rotos.
  • Scapture: Para Linux y Firefox, Konqueror, Opera, Dillo y Lynx. Se puede combinar navegador y resolución. Tras un minuto aproximadamente, el resultado aparece en la pantalla desde dónde lanzamos la utilidad. Podemos seleccionar que se muestre el pie de la página e incluye una relación de todos los ficheros cargados.
  • Net Renderer: Este emulador sólo prueba las distintas versiones de IE y sin posibidad de configurar distintas resoluciones, pero el resultado se muestra de inmediato. Además, si se ve bien en IE5, probablemente se vea bien en todos los demás :D.
  • ViewLikeUs: Sólo para comprobar distintas resoluciones, incluidos navegadores iPhone y Wii. Rápido.
  • 640×480 Test Frame: Si no quereis deprimiros, este ni lo probeis. Casi todos tenemos los blogs preparados para un mínimo de 800x600 y meter todo eso en menos espacio no suele dar un buen resultado.
  • html2txt: O cómo se vería tu sitio en un navegador que incluyera sólo texto


Cufón. Usar fuentes no estándar.

27/01/2010
Cufón es una alternativa a sIFR, que es uno de los sistemas más extendidos para el reemplazo de fuentes. A diferencia de este, Cufón no usa flash, sino SVG (gráficos vectoriales) y es mediante un JavaScript, como se reemplazan los caracteres de la fuente original.

Como casi siempre, antes de seguir podeis ver una página de ejemplo para que considereis si os interesa aplicar este sistema en vuestra web.

Aún siendo algo farragosa, su instalación no es nada complicada. En primer lugar, hay que descargar el script que realiza la tarea de sustitución y subirlo a nuestro espacio. Luego, con esta aplicación online, hay que convertir la fuente deseada en otro fichero .js que contendrá las instrucciones necesarias para generar los SVG. Igualmente lo alojamos en nuestro sitio. Por último, generamos el código en la página usando las direcciones de los dos ficheros .js:

<html>
<head>
<script src="http://DIRECCION/cufon-yui.js" type="text/javascript"></script>
<script src="http://DIRECCION/Imposiblefont_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>Este texto se verá con la fuente Impossiblefont</h1>
</body>
</html>

En este ejemplo, se ha usado el tag H1 para sustituir sólo lo que se encuentre dentro de él. Si quereis que la sustitución se realice para toda la página, habrá que utilizar BODY. Si quereis que sea en un div concreto, tendreis que utilizar algún ID pre-existente o que incluyais ahora para estos efectos (#outer-wrapper, #main, #sidebar... etc.). Haced pruebas antes de decidiros por sustituir la página entera, porque este cacharrito demora bastante la carga de la página.

Por cierto que en IE (cómo no...), en ocasiones se visualiza el texto original antes de realizar la sustitución, lo que provoca un efecto que queda regular. Para atenuar -que no solucionar- esto, justo antes de </body> es conveniente insertar esta instrucción:

<script type="text/javascript"> Cufon.now(); </script>

No me he metido demasidado a fondo en todas las opciones, pero para generar el fichero de la fuente (variante vectorial) en la aplicación de cufon.shoqolate, al menos tenemos que tener en cuenta lo siguiente:

  • Regular typeface: Aquí es desde dónde subimos la fuente original. Los otros campos son para varianes de negrita, itálica y negrita+itálica que pudieran existir de la misma fuente.
  • The EULAs of these fonts allow Web Embedding (without Adobe Flash): Tenemos que seleccionar que estamos autorizados a usar la fuente original para que el programa nos permita hacer la conversión. En este sentido, recordar un par de alternativas donde podeis encontrar fuentes libres.
  • Include the following gliphs...: Aunque recomiendan marcar "All", eso hace mucho más pesado el fichero resultante. Con Basic Latin yo obtuve unos resultados muy aceptables. De todos modos, cualquiera de los tres siguientes (Latin-1 Supplement, Latin Extended-A y Latin Extended-B) deberían demorar menos la carga, cubriendo la gran mayoría de los casos. Comentar también aquí, que muchas fuentes son de origen no castellano, por lo que normalmente no tienen previstos los caracteres vocálicos acentuados... y casi nunca la ñ. Comprobadlo antes de poneros a hacer conversiones y os ahorrareis trabajo.
  • Scale the font to the following size: Cuanto mayor sea el número, mayor fidelidad de fuente incluso en caracteres de gran tamaño. Si no lo vais a utilizar para rótulos gigantes, mejor escogeis el valor mínimo (64). Esto reduce bastante el tamaño del script.
  • I acknowledge and accept these terms: Imprescindible aceptar los términos de uso par generar el fichero.
  • Por lo general, el resto de opciones que vienen por defecto se pueden dejar tal cual salen.

Más cosas... Puede que queramos utilizar varias fuentes sustitutivas. En este caso y como es lógico, en primer lugar todas ellas tienen que pasar por la previa transformación a SVG. Luego, la llamada a cufon.js cambia un poco:

<script src="http://DIRECCION/cufon-yui.js" type="text/javascript"></script>
<script src="http://DIRECCION/Imposiblefont_300.font.js" type="text/javascript"></script>
<script src="http://DIRECCION/Otrafont_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Imposiblefont' });
Cufon.replace('h2', { fontFamily: 'Otrafont' });
</script>

En este ejemplo, todo lo contenido entre etiquetas H1 se cambiará a la fuente Imposiblefont y lo que esté entre H2, a Otrafont. Se puede sustituir cualquier ID que utilicemos en nuestra plantilla, para lo cual ya habría que incluir la almohadilla:

...
Cufon.replace('#footer-wrapper', { fontFamily: 'Imposiblefont' });
Cufon.replace('#especial', { fontFamily: 'Otrafont' });
...

Problemas conocidos, consultas frecuentes y más detalles técnicos en GitHub y para dentro de unos días, un BPT para instalar todo esto en Blogger sin tener ni idea ;).

Actualización: BPT. Instalar Cufón en Blogger.


Leer más sin imágenes. Sólo texto.

25/01/2010
No sé si ya funciona bien el artilugio del nuevo editor Blogger, que sirve para crear resúmenes de posts con "leer más". Algunos me habeis comentado recientemente que todavía daba algún que otro problema, así que mientras se solucionan todos, se puede seguir usando el script que vimos anteriormente para este mismo fin.

Aquel código mostraba también una imagen en miniatura, pero por cuestión del propio diseño de cada cual, algunos necesitais que esta no se muestre. Es decir, que el "leer más" sea sólo para controlar la cantidad de caracteres a mostrar y de esta manera, la página Inicio y las de navegación (etiquetas, recientes/antiguas) sean sólo cómo los titulares de un periódico.

Esto es más fácil que lo anterior, porque lo que hay que hacer es precisamente quitar cosas del código original (el estilo para la imagen y las líneas que generaban la miniatura) y dejar sólo lo que nos interesa. Para instalar esto y que se queden vuestras entradas como en este ejemplo, hay que hacer lo siguiente:

Con Expandir plantillas de artilugios seleccionado, buscamos el </head> y justo antes pegamos este script (si lo teníamos ya, se trata de sustituir el anterior por este):

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
var summary = imgtag + '<div class="resumenes" >' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
sumario_noimg = 300;
//]]>
</script>


El valor 300 de la antepenúltima línea es el que determina el número de caracteres a mostrar. Podeis cambiarlo por el que os convenga.

En segundo y último lugar, buscamos data:post.body y se sustituye por esto otro (este es igual que en la anterior versión, por lo que no habrá que incluirlo si ya teníamos instalado este sistema de sumarios) :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;);</script>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>


¡Voila! Resúmenes sin imágenes.

En el script he incluido la clase resumenes, que en un principio no come pan. Si no haceis nada más, los resúmenes saldrán con el mismo estilo que las entradas normales. Sin embargo, si quereis darle un estilo especial, esa inserción en el script os permitirá hacerlo tan sólo añadiendo ese selector con las propiedades que querais, en en la parte CSS. El del ejemplo tiene este estilo:

.resumenes {
background:#e1e1e1;
border:3px double black;
padding:10px;
}


Páginas estáticas en Blogger.

24/01/2010
Una novedad de estos últimos días en Blogger, es la inclusión de una utilidad para crear páginas independientes (no posts), especialmente útiles para contenido que nos interese que siempre esté a la vista. Las entradas recientes van desplazando a las antiguas, pero una página del tipo "El autor", "Enlázanos", "Indice", "Aviso legal", etc. normalmente interesa que esté a mano.

Realmente, el nuevo invento no hace nada que no pudiéramos hacer antes con algo de código condicional en la plantilla, pero al menos ahora se nos facilita la tarea. Las páginas así creadas no mostrarán, por ejemplo, el pie de entradas (etiquetas, marcadores sociales, autor...) y por defecto no llevarán comentarios. Vamos, lo que viene a ser una página normal de una web que no sea una bitácora.

De momento, el servicio está disponible sólo en Blogger in draft, que es dónde se hacen los experimentos antes de lanzarlos al público en general. Esto quiere decir que puede no estar pulido del todo y prueba de ello es que cuando intenté realizar unas pruebas hace unos días, el servicio estaba fuera de idem:

Update (1/21 @ 22:04 PST): We've temporarily disabled creating & editing pages. You can still view the pages you've already created. We will re-enable ability to create and edit pages soon.

Blogger ha añadido a lo de crear páginas un pequeño gadget que lo que hace es mostrar una lista de los enlaces así creados a modo de menú. El menú se puede colocar arriba (horizontal) o en la barra lateral (vertical), pero no hay ningún inconveniente en crearlo nosotros mismos con cualquier otro sistema.

Como ya se ha hablado mucho de este tema y bien, os paso un par de enlaces de otros blogs dónde se ha explicado con pelos y señales, cómo funciona todo esto de las páginas.


Actualización 05/02/2010: Cómo nos hace saber Joel y José GDF, la nueva utilidad ya está disponible desde el panel de control general del Blogger sin necesidad de tener que entrar en Blogger in Draft. ¡Qué Dios reparta suerte! :D


Cambiar títulos de páginas

22/01/2010
Lo habitual en las plantillas de Blogger, es que el título de la página (el que saldrá luego en las pestañas de nuestro navegador y en los resultados de los buscadores), esté en la forma Nombre_blog: Titulo_post. Por ejemplo, para esta entrada sería Oloblogger: Cambiar títulos de páginas.

Este título de página lo genera la línea de código en rojo que podeis encontrar normalmente al principio de vuestra plantilla, entre las líneas que en la siguiente reproducción hemos marcado en gris:

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

blog.pageTitle es una de esas variables DATA que almacenan datos importantes y necesarios de los blogs Blogger. Esta en concreto guarda los títulos de las páginas individuales de cada entrada, en la forma indicada al principio, salvo para la página de inicio (home) y las de navegación (etiquetas y recientes/antiguos). Para estas últimas, almacena el nombre del blog.

De esta manera, para cambiar el aspecto de nuestros títulos, podemos cambiar la variable por otro texto que nos venga bien o todavía mejor, por una variable que tenga lo que nos interesa mostrar. Incluso se pueden combinar texto y variables.

Muchos sitios recomiendan que lo óptimo es mostrar el título en la forma inversa a como Blogger lo hace por defecto. Esto es, Titulo_post: Nombre_blog ó siguiendo con el ejemplo de este mismo post, Cambiar títulos de páginas: Oloblogger Para ello, tendríamos que sustituir la línea antes marcada por cualquiera de estas otras dos:

<title><data:blog.pageName/>: Nombre_blog</title>
...
<title><data:blog.pageName/>: <data:blog.title/></title>


blog.pageName, nos sirve para mostrar el nombre de cada página correspondiente a cada entrada (permalink), mientras que blog.title, será el nombre (título) de nuestro blog. Con ambos, obtenemos el efecto deseado.

La segunda opción es la más recomendable, en cuanto que toma el dato grabado en Blogger, del nombre del blog. Si lo hacemos así y alguna vez cambiamos el titulo del blog (no confundir con el de las entradas), los títulos de los posts se cambiarán automáticamente. Si lo hacemos de la primera manera, nos tendremos que acordar en el caso mencionado de cambiar también aquí, Nombre_blog por el nuevo nombre.

Evidentemente, podríamos usar sólo blog.pageName y olvidarnos del nombre del blog, pero como he comentado, parece que a efectos de posicionamiento y esas cosas, ambos datos son importantes.

Todavía nos queda un problema por solucionar y es que con este simple código, el título de la página de inicio y las páginas de navegación, nos aparecerían de manera un poco extraña con la URL. Para solucionar eso el código final debería contener una condición para diferenciar un caso u otro. Y este no es ni más ni menos que...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


Ahora, cuando se trate de una página individual de una entrada (item) se verá...
Cambiar titulos de paginas: Oloblogger
...y cuando no sea una página de este tipo (los otros casos antes comentados), sólo aparecerá
Oloblogger

Una vez queda claro que podemos construir el título de nuestras páginas con los elementos que queramos y en el orden que queramos, el último apunte que se me ocurre, es que se puede modificar también sin problemas el signo de puntuación (:) que separa las dos variables:

| \ ~ » ¦ ® >


Rótulo estilo flash

20/01/2010
Esta es una forma de colocar un rótulo en nuestra web, de manera que el texto aparezca poco a poco y además con un curioso efecto de reutilización de las letras comunes en las líneas sucesivas. Pinchando en la imagen podreis ver un ejemplo en movimiento. Precisamente, la animación es lo interesante.



Se trata de un script construido por dhteumeuleu en cuya web podreis ver un montón de ejemplos de diseños de alta calidad, hechos con sólo html y sobre todo, javascript.

La instalación es sencilla, porque es suficiente con añadir un gadget HTML/JavaScript y copiar allí el contenido de este fichero txt. Una vez grabado, el sitio más adecuado parece que es encima o debajo de las entradas y si os parece lo mismo, allí es dónde tendreis que mover el nuevo gadget después de creado.

El código resulta algo complicado para mis limitados conocimientos, pero algo he podido configurar.

En la primera parte (estilo, CSS) podeis definir en #frm, el alto, ancho y color de fondo del cuadro contenedor, así como el tipo de letra y su tamaño.

Para cambiar otras cosas, ya hay que bucear en la parte JavaScript, aunque casi todo lo interesante está prácticamente al final.

...
elapsedTime = new Date().getTime(); setTimeout(main, 32); } return { init : function (cont, t1, t2, c1, c2, c3) { frm = document.getElementById(cont); lineDelay = t1; charDelay = t2; colorText = c1; colorMatch = c2;
colorGhost = c3; loadLines(); main(); },

changeText : function () { document.getElementById("show").className = "";
document.getElementById("inputext").className = "hidden"; lineChar = []; animStack = []; colorStack = []; frm.innerHTML = ""; lineIndex = 0; elapsedTime = 0; loadLines(); frm.focus(); },show : function () {document.getElementById("show").className = "hidden"; document.getElementById("inputext").className = ""; document.getElementById("text").focus(); }}}(); onload = function () {
mtx.init("frm", 1500, 150, [255,255,255], [255,64,0], [44,44,44]);
...

El valor que lleva el setTimeout (32 en el trozo reproducido), marca el ritmo general de la animación. A mayor valor, más despacio.
1500: pausa de transición entre líneas. A mayor valor, más despacio.
150: pausa de transición entre caracteres. A mayor valor, más despacio.
255,255,255: color final de los caracteres en RGB (blanco en el ejemplo)
255,64,0: color de los caracteres "móviles" en RGB (naranja en el ejemplo)
44,44,44: color de los caracteres de las líneas anteriores en RGB (gris oscuro en el ejemplo)

Por último, dentro del TEXTAREA es dónde tiene que ir el texto a mostrar. Cada línea aquí se corresponderá con una línea del rótulo. No se pueden hacer muy largas porque no serán visibles y además el script no traga muy bien con ellas.

El script funciona en todos los casos, pero en algunas pruebas que he hecho con ciertas plantillas muy modificadas, lo hacía regular, así que si en vuestro caso pasa esto, no os volvais locos... ya encontraremos otra cosa que haga algo parecido.


Fondo de entradas transparente

18/01/2010
Este código sirve para hacer que el fondo de nuestros posts sea parcialmente transparente -translúcidos sería la palabra más exacta- de manera que dejen ver el fondo principal del blog a través de allos. Algo así como lo que podeis ver en este ejemplo.

La única dificultad está en encontrar cuál es el selector que forma los posts. Si ya estás familiarizado con tu plantilla sabrás cual es, si no, empieza por buscar .post que es la denominación más habitual.

Una vez localizado, se trata de insertar la propiedad que indica la opacidad de la capa. Cómo cada navegador usa una distinta, para cubrir el máximo posible de situaciones, utilizaremos todos los conocidos:

.post {
overflow:visible;
position:relative;
background:#cccccc;
margin:.5em 0 1.5em;
border:4px solid #990000;
padding:20px 30px 10px 30px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
-khtml-opacity: 0.7;
}

Las cinco últimas líneas son las que habría que insertar. Los parámetros de las dos primeras van desde 0 (transparencia total) a 100 (opacidad total). Las tres últimas van desde 0.0 hasta 1.0. Cambiando esos valores podremos conseguir una mayor o menor transparencia que la del ejemplo. Teneis que utilizar el mismo porcentaje para las cinco propiedades, porque si no, en cada navegador se vería de una manera distinta.

Igual que hemos hecho con las entradas, se puede hacer con la barra lateral, la cabecera, el pie... o con todos a la vez. Sólo hay que aplicarlo en la clase correspondiente de nuestro CSS.


Algo de formato para listas

14/01/2010
Una lista se forma con HTML de la siguiente manera:

<ul>
<li>Elemento1</li>
<li>Elemento2</li>
<li>Elemento3</li>
</ul>

UL y su cierre marcan el principio y el final de la lista, mientras que las etiquetas LI delimitan cada uno de sus elementos. Sabiendo esto, para darle estilo a una lista, es suficiente con crear las clases oportunas y luego aplicarlas a la parte HTML.

En Blogger, el estilo (CSS) va antes de ]]></b:skin> y ahí es dónde tendremos que insertar la nueva clase y tenerla preparada para cuando nos haga falta:

.listas ul {
list-style-type:circ;
list-style-image:url(http://4.bp.blogspot.com/_0eC4K-qZ7AM/S0t8kcPdevI/AAAAAAAAK_A/f_NPNBRfLOc/s400/icon_arrow.gif);
}

Luego, allá dónde tenemos la lista, simplemente la "encerramos" en un DIV con la clase definida:

<div class='listas'>
<ul>
<li>Elemento1</li>
<li>Elemento2</li>
<li>Elemento3</li>
</ul>
</div>

El resultado:
  • Elemento1
  • Elemento2
  • Elemento3

LIST-STYLE-IMAGE tiene prioridad sobre LIST-STYLE-TYPE, por lo que en este caso, se verá la imagen en lugar del circulito. Poner ambos es por tanto redundante, pero ¿qué pasa si no se carga nuestra flecha o lo que sea? Pues que entonces se vería el círculo y no se estropearía tanto el diseño, como sí pasaría en el caso de que no hubiéramos puesto ambos. Sólo por este motivo y también porque no cuesta mucho trabajo, yo siempre pondría ambos.

Otra forma de colocar cualquier dibujo en una lista, es anulando el símbolo por defecto y utilizando un imagen como fondo de cada elemento. No hay que olvidar, que luego habrá que ponerle la clase a la parte HTML de la lista mediante un DIV, tal y como hemos hecho en el ejemplo anterior. En este caso el estilo sería:

.listas2 ul {
list-style-type:none;
}
.listas2 ul li {
padding-left:16px;
background:url(http://1.bp.blogspot.com/_0eC4K-qZ7AM/S0uDePwrPSI/AAAAAAAAK_I/5AAkzVgGEi8/s400/play.gif) no-repeat left bottom;
}

  • Elemento1
  • Elemento2
  • Elemento3

Parece lo mismo, pero no lo es. Aunque el resultado final hace que lo parezca, antes el símbolo de la lista no formaba parte del elemento LI, pero con esta última forma de crearlo, sí. Esto nos permitirá para el caso de enlaces, darle un poco de interactividad con el uso de HOVER. Colocamos un dibujo y un color para los enlaces y otros distintos para el HOVER. Veámoslo:

.listas3 ul {
list-style-type:none;
}
.listas3 ul li {}
.listas3 ul li a {
text-decoration:none; color:#990000;
padding-left:18px;
background:url(http://4.bp.blogspot.com/_0eC4K-qZ7AM/S0uP4rCMcdI/AAAAAAAAK_Q/rNzyaljT-Q0/s400/cruz1.jpg) no-repeat 0px 0px;
}
.listas3 ul li a:hover {
text-decoration:none; color: #666666;
background:url(http://2.bp.blogspot.com/_0eC4K-qZ7AM/S0uP45BdeLI/AAAAAAAAK_Y/ykNM1EwnM04/s400/cruz2.jpg) no-repeat 0px 0px;
}


Conseguir un color de fondo para el HOVER del enlace no es complicado, pero sólo se destacaría la parte que ocupa el texto. Lo habitual es que no tengan la misma longitud, por lo que el resultado sería este.



Esto resulta como mínimo "extraño" y para solucionarlo, haremos que todos los LI (símbolo + enlace) tengan el mismo tamaño incluyendo un WIDTH y haciéndolo comportarse como un bloque (BLOCK). Si además completamos el PADDING y reposicionamos un poco las imágenes del BACKGROUND...

.listas4 ul {
list-style-type:none;
}
.listas4 ul li {}
.listas4 ul li a {
width:230px; display:block;
text-decoration:none;
color:#990000;
padding:2px 5px 2px 30px;
background:url(http://4.bp.blogspot.com/_0eC4K-qZ7AM/S0uP4rCMcdI/AAAAAAAAK_Q/rNzyaljT-Q0/s400/cruz1.jpg) no-repeat 4px 4px transparent;
}
.listas4 ul li a:hover {
text-decoration:none;
color: #ffffff; background:url(http://2.bp.blogspot.com/_0eC4K-qZ7AM/S0uP45BdeLI/AAAAAAAAK_Y/ykNM1EwnM04/s400/cruz2.jpg) no-repeat 4px 4px #990000;
}

...para obtener algo como esto...



¿Que tal si ahora probais a crear una clase para personalizar vuestra listas de categorías? En este caso tras crear la clase, como la parte HTML de la lista de las etiquetas ya se genera al instalar el gadget correspondiente, sólo habrá que localizar el sitio oportuno para colocar nuestro DIV con la clase creada. Este es en Blogger el principio del código del gadget de etiquetas y en verde está lo único que sería necesario insertar en esta parte:

<b:widget id='Label2' locked='false' title='Hover en listas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>

<div class='listas4'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
</div>


Un blog sin imágenes de plantilla. El caso Aspire.

12/01/2010
Jose de Deprisa-Deprisa me comentaba ayer que no se cargaba bien su plantilla Aspire. El problema radica en el sitio dónde se alojan las imágenes. Según parece estaba un poco fastidiado, por no decir jodido... bueno, lo dije.


La cosa es chunguilla, porque siendo una plantilla ya clásica, que está bastante bien y que tiene bastantes adeptos, su gran componente gráfico hace que esa falta de imágenes la deje bastante desangelada. Más o menos como ocurriría en la mayoría de casos (plantilla Mínima excluida, claro).


Sirva entonces el suceso para recordar que cuando os descargais una plantilla, es conveniente alojar en ficheros controlados por vosotros, todo aquello que en principio venga alojado en otro sitio... y con las imágenes suele pasar así casi siempre.

La manera de hacerlo es un poco pesada, pero nada complicada.

1. En primer lugar, teneis que acceder a la plantilla (con Artilugios Expandidos por si hay algo por ahí también) y buscar todo lo que termine en .jpg. Luego idem de lo mismo para .gif y por último, también para .png. Como para otras cosas, usar CTRL+F suele hacer más grata la tarea. En el caso concreto de la Aspire, sólo tiene los dos primeros formatos.

Según vayais encontrando imágenes, copiais la dirección y la poneis en la barra del navegador para acceder a ella. Por ejemplo en otra pestaña/ventana para no perder el hilo. Una vez que se vea la imagen, Botón Derecho > Guardar Imagen.

2. Cuando las tengais todas en vuestro disco duro, entonces toca subirlas a algún sitio. Mi recomendación para Blogger es que sea a una entrada en borrador o directamente a Picasa. (BPT: Subir una imagen a Blogger)

3. Una vez las tengais todas a buen recaudo, hay que copiar las nuevas direcciones e ir sustiyendo las originales por estas nuevas: Buscar, CRTL+C y CRTL+V, machacando la que hubiere. Los caracteres finales de la dirección son los que os permitirán relacionar imagen original/imagen nueva: body-bg.jpg, bg-repeat.jpg, left-bg.jpg...

Podeis darle a Vista Previa antes de Guardar para comprobar que todo esta bien. Una vez que esté todo funcionando correctamente, si las imágenes las habeis colocado en un post en borrador, podeis borrar tranquilamente este, siempre que NO seleccioneis también las casillas de verificación para eliminar las imágenes de su alojamiento.

Y ya que he hecho el trabajo, para aquel que las necesite, aquí teneis las imágenes de la plantilla Aspire en un fichero RAR o en uno ZIP. Con esto podreis ahorraros el paso 1 que es quizás el más pesado de los tres detallados.


ACTUALIZACION: Fenomenal trabajo de La Mujer Quijote, que ha recopilado en un nuevo fichero, sólo las imágenes necesarias; ni más ni menos. El fichero que teneis enlazado en el párrafo anterior, tiene imágenes que no hacen falta para la versión Blogger de Aspire, así como algunas otras imágenes con el nombre con variaciones.

De esta manera y para este caso concreto, la tarea se reduce a bajar el fichero y luego subir las imágenes que contiene a un post en borrador. Luego se trata de sustituir las imágenes originales por estas nuevas, buscando las sustitutas por el nombre de la original. Como se ha comentado más abajo, de las dos direcciones que genera Blogger al subir cada imagen, la buena es la del enlace (no la del SRC), previa sustitución del 1600-h que todas llevan por un simple 1600. (Más info sobre el almacenamiento de imágenes en Blogger).

Y este es el enlace al fichero de los Gráficos Aspire, gracias a La Mujer Quijote.


120 ejemplos de diseño de menús

11/01/2010
Más o menos esa es la traducción de este post de CSS Tea y lo cierto es que no los he contado para comprobar que están los 120 prometidos, pero lo que es seguro es que se pueden ver un montón de diseños de fantásticos menús horizontales.



Pinchando en cada imagen (tanto aquí como en el link de donde proceden), accedeis a la web que lo tiene instalado para verlos en funcionamiento.

Sirvan de muestra y para dar ideas sobre la cantidad de maneras en que se puede crear un menú... Pero no me pregunteis cómo se hace cada uno que no llego para tanto :D. Los mañosillos podeis ver el código fuente y haceros una idea, pero básicamente se trata de jugar con las imágenes.

Simplemente por ofrecer soluciones facilitas, hay algunos que se han construido mediante una imagen fija en o a continuacion de la cabecera y un mapeado que permite que cada zona vaya a un enlace distinto. Esta idea ya se desarrolló un poco más en el post Blogger. Cómo eliminar/sustituir la cabecera. Las palabras de enlace irían superpuestas como texto normal y, en algunos casos, con efecto hover de subrayado, fondo o similar (Ver Destacar los enlaces)

Otros de estos ejemplos tienen un efecto rollover mediante el cual se sustituye una imagen por otra, dando la sensación de moverse. En este caso, el texto también suele formar parte de la imagen. Para ello, primero hay que posicionar adecuadamente, un contenedor para las imágenes y dentro de él colocar el código que formará el rollover. El contenedor es posible que necesite de z-index para que se muestre dónde quereis. La imagen base puede estar en el propio fondo de la cabecera, tal y como se hace en este mismo blog (ver imagen)

Aparte de que no es tarea fácil construir el código de este tipo de menús, lo principal es contar con unos buenos gráficos de base, que normalmente tendreis que diseñar vosotros mismos por entero... o casi. Al menos habrá que saber manejarse con un editor de imágenes.

De muestra un boton... bueno varios.






El enlace lo conocimos gracias a Smark.


Enmarcar vídeos. Ejemplo del uso de POSITION.

08/01/2010
La forma de hacer una especie de marco a un vídeo, requiere diseñar en primer lugar la imagen que pretendemos que quede alrededor del vídeo. El tamaño exterior debe ser como máximo el que tenga nuestra columna de posts y en su interior, debería tener una zona de un color uniforme que será dónde solapemos el reproductor. El tamaño de esa zona, tiene que ser proporcional al tamaño del vídeo. ¡Ah! Y antes de seguir, donde digamos vídeo, bien puede ser una animación flash o cualquier otro objeto que se pueda embeber.

Lo que haremos será crear una capa con posición relativa, con el tamaño del dibujo diseñado y con este como fondo. RELATIVE sin más atributos, deja esta capa en su ubicación normal, pero es necesario para poder posicionar correctamente lo que queramos poner dentro de ella.

Después anidaremos otra capa con una posición absoluta para así poder ubicar el vídeo exactamente dónde nos convenga. Dentro de esta segunda capa, irá el código del objeto embebido. ABSOLUTE nos permitirá movernos dentro del la primera capa (la del fondo). La coordenada 0,0 será el vértice superior izquierdo de dicha capa.

Para una imagen de fondo como la primera de este post (400x400 px) que puede alojar un vídeo de 320x265 px, el código tendría esta forma (1):

<div style="display: block; position:relative; width:400px; height:400px; margin: 0px auto; text-align: center; background:url(URL_IMAGEN_FONDO);">

<div style="position:absolute; top:44px; left:39px;">
CODIGO OBJETO
</div>

</div>

Y el resultado sería este:


(1) Para una mayor claridad el código se ha separado con saltos de línea, pero para poder colocarlo en una entrada, tendría que redactarse todo seguido, sin saltos.

Habreis podido ver que en la capa donde insertamos el código del vídeo, utilizamos top y left, en unión de position:absolute, para poder posicionar el objeto justo dónde queremos.

Si es necesario cambiar el tamaño original del vídeo, habrá que hacerlo de forma proporcional para que quede lo mejor posible.


El uso de la propiedad POSITION nos permite incluso meter más de un vídeo en la misma carátula:

<div style="display: block; position:relative; width:500px; height:375px; margin: 0px auto; text-align: center; background:url(URL_IMAGEN_FONDO);">

<div style="position:absolute; top:191px; right:50px;">
CODIGO OBJETO
</div>

<div style="position:absolute; top:58px; right:12px;">
CODIGO OBJETO
</div>

<div style="position:absolute; top:48px; left:12px;">
CODIGO OBJETO
</div>

</div>



Si siempre vamos a utilizar el mismo marco, podemos incluso crear una clase para evitarnos redactar tanto código en todas las ocasiones. Por ejemplo, para una carátula de 500x947 px y vídeos de 425x344 px, necesitariamos crear estas dos id en nuestra parte CSS:

#marco {
display: block;
position: relative;
width: 500px;
height: 947px;
margin: 0px auto;
text-align: center;
background:url(URL_IMAGEN_FONDO);
}
#video {
position:absolute;
top:240px;
left:39px;
}

Y luego insertar este HTML en el post (o dónde corresponda):

<div id="marco"><div id="video">CODIGO OBJETO</div></div>




De igual manera que hemos hecho con los marcos y los vídeos, podemos hacer para situar cualquier elemento dentro de una capa (DIV) que tenga el atributo POSITION:RELATIVE;. Y esto último es tarea para practicar en casa :D


Lista de entradas al azar

04/01/2010
Ya hay una buena colección de entradas en este blog dedicadas a diferentes cacharritos que muestran cosas de forma aleatoria. Pero todavía nos quedaba uno pendiente. Se trata de un gadget javascript, que nos muestra un número de enlaces de texto predeterminado por nosotros, que apuntan a otras tantas entradas escogidas de forma aleatoria.

Estas que hay a continuación, son un ejemplo y refrescando podreis comprobar que cada vez salen unas entradas distintas:

La implantación es muy sencilla, como casi siempre.

Desde Elementos de Página añadimos un nuevo gadget tipo HTML/JavaScript y allí pegamos lo siguiente:

<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 10;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

Antes de Guardar, cambiamos NOMBRE_DE_TU_BLOG por el propio. Una vez salvado, ya podemos moverlo a otra posición de la barra lateral o a otra ubicación.

El valor de var maxEntries = 10; es el que determina el número de entradas a mostrar y por tanto, el que habria que cambiar para mostrar más o menos entradas.

Creando el ID random-posts y las clases para listas correspondientes, podremos personalizar la apariencia de salida. Esto ya habría que insertarlo en la plantilla, antes de b:/skin. Para ponerlo en el propio gadget, habría que hacerlo entre las etiquetas <style type="text/css"> y </style>

#random-posts {
/* Estilo general */
}
#random-posts ul {
/* Estilo general de la lista */
}
#random-posts ul li {
/* Estilo general de cada elemento de la lista*/
}

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba