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

Post aleatorio






IconTexto. Más iconos gratuitos.

29/10/2009
Roudy nos pasa un enlace interesante, donde podemos encontrar varios packs de iconos libres muy bien diseñados.

Hay distintas colecciones temáticas: ecológicos (Green), 2.0 atravesando el fondo (Web 2.0 Inside), usuarios (Web 2.0 User), carpetitas (Aurora Folders), latas de bebida (Drink), iconos de búsqueda (Searh), redes sociales (WebDev Social Bookmark), cómo no... emoticonos (Emoticons), soldaditos (Elite Soldiers) y unos cuantos más.

Todas las colecciones incluyen su licencia de uso, que generalmente está sólo restringido para uso comercial.


Modificaciones al sistema de sumarios 2

26/10/2009
Al hilo de esto de poner un enlace en las miniaturas de los sumarios, se me ocurrió que quizás habría otra manera de mostrar esa imagen sin que fuera necesario redimensionar con la consecuente deformación de las imágenes no cuadradas. Estuve haciendo pruebas con la propiedad CLIP de CSS, pero no conseguí un resultado satisfactorio, así que ideé una nueva chapucilla.

Se trataría de mostrar sólo una sección de la imagen original del post, del alto x ancho que hayamos designado, utilizando un OVERFLOW:HIDDEN. Cómo de esta forma siempre sale la parte superior-izquierda, le añadimos un desplazamiento aprovechando POSITION y por último, marcamos un mínimo para las imágenes más pequeñas. Por cierto, para el caso de las imágenes con medidas menores de los mínimos establecidos, la distorsión seguirá produciéndose, pero al menos dejamos la mayoría con un aspecto mejor.

Como la opción del script que muestra la imagen centrada encima del texto, creo que no la usa nadie, también he reducido el código eliminando esa opción. El tamaño de la miniatura tampoco se controla ya desde el script, sino que lo hará la parte del estilo. De esta manera, para implantar un sistema de sumarios con imagen flotante, enlace en la imagen y miniatura (realmente una parte de la imagen) no distorsionada, tendremos que utilizar este código en lugar del anterior.

Primera parte a colocar antes del </head>. Si ya teníais este hack, ahora se trata de sustituir.

<!-- SUMARIOS AUTOMATICOS 2 -->
<style type='text/css'>
.miniaturas {
position:relative;
float:right;
width:100px; /* Ancho del contenedor de la imagen */
height:100px; /* Alto del contenedor de la imagen */
margin:0px 0px 0px 10px;
border:1px solid #aaaaaa;
overflow:hidden;
}
.recorte {
position:absolute;
top:-20%; /* Desplazamiento vertical para comenzar recorte */
left:-20%; /* Desplazamiento horizontal para comenzar recorte */
}
.recorte img {
min-width:120px; /* Ancho mínimo a mostrar. WIDTH + LEFT */
min-height:120px; /* Alto mínimo a mostrar. HEIGHT + TOP */
}
</style>
<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;
if(img.length>=1) {
imgtag = '<div class="miniaturas"><div class="recorte"><img style="background:none;" src="'+img[0].src+'" alt=""/></div></div>';
summ = sumario_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
sumario_noimg = 340;
sumario_img = 250;
//]]>
</script>

Las dos últimas variables sirven para indicar el número de caracteres a mostrar en el sumario:
sumario_noimg: Número de caracteres a mostrar para post sin imágenes.
sumario_img: Idem para post con imágenes.

La segunda parte, la llamada al script es idéntica a la que hacíamos anteriormente, por lo que no habrá que modificarla. Si todavía no la teniais, se trata de cambiar <data:post.body> por todo esto:

<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>

Los cambios se pueden apreciar desde Vista previa para ver si está todo correcto antes de Guardar.

Si quereis compaginar esta modificación con la que vimos ayer de incluir un enlace en la imagen, sólo teneis que incorporar lo que allí se explica.


Modificaciones al sistema de sumarios

25/10/2009
Hay varias formas de crear sumarios y esta entrada hace referencia al último que se explicó aquí: Post en forma de sumarios (leer más) en dos pasos

Aitor nos preguntaba hace unos días cómo hacer para que la imagen del sumario fuera a su vez un enlace al post, al igual que pasa con el título. Esto es especialmente útil para blogs como el suyo en el que los sumarios no tienen texto y sólo tienen una imagen.

Para este caso, tendremos que localizar de entre el código que se facilitó la otra vez esta parte y en ella incorporar lo que se ha marcado en verde.

function createSummaryAndThumb(pID,enlacetitulo){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<a style="background:none;" href="'+enlacetitulo+'"><img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/></a>';
summ = sumario_img;
}
else {
imgtag = '<a style="background:none;" href="'+enlacetitulo+'"><img class="centrar-imagen" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></a></div>';
summ = summary_img;
}
}

Además, en la llamada al script habrá que incorporar el dato de la URL del post a enlazar...

<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;,&quot;<data:post.url/>&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>

Una vez más, lo que está en verde es lo que se ha incorporado nuevo.

Ya tenemos enlace en nuestra miniatura.


Gracias

23/10/2009


Actualización: Fuera de casa, sin bluetooth, con poco tiempo y una puñetera conexión GPRS a 5Kb -o poco más- a duras penas pude crear esta mañana esta entrada para meter al menos una imagen y el mensaje principal que ahora reitero: Gracias.

Ahora, más o menos en las mismas circunstancias, pero con algo más de tiempo, ya puedo añadir que lo de ayer estuvo genial. Y no sólo por los premios que evidentemente son un gran halago, sino especialmente por la experiencia que este tipo de cosas suponen. Resultó muy curioso conocer a tanta gente de la que has leído cosas, con las que incluso has competido y que nunca llegas a ponerle cara del todo ni a conocer como es debido. Afortunadamente, eso ha cambiado un poco.

Ya puedo confirmar que los componentes del equipo de Deprisa Deprisa, a los que reconocí por su representante en la entrevista de 20minutos, El Bardo, son unos tíos/tías geniales; que Hasta los Cojones -el otro al que yo reconocí porque a partir de aquí ya fue todo al contrario- no es tan malo y borde como parece; que efectivamente, Abacab es más largo que un día sin pan... doy fé; que Anómalo hace honor a su nick también en persona; que los enviados por La Aldea Irreductible y Crónicas de una Cámara a la gala son unos dignos representantes de sus respectivos mandatarios y unos tíos muy elegantes; que Mariano Zurdo es clavadito a su avatar... ¿o quizás es al revés?; que Chary Serrano existe y es también una persona de carne y hueso; que Juan Duque (Luz de Gas Radioblog) habla igual en directo que en diferido y que sobre todo, tiene mucho aguante y no se cabrea demasiado cuando tiene problemas técnicos que le impiden retransmitir como a él le gustaría; que las cucarachas son lo más irreverente que existe, pero tienen una habilidad especial para comer canapés a dos carrillos a través de una máscara; que Banaka-Banaka es alguien muy simpático, de muy al sur, pasando frío en el norte...

En fin, seguro que hablé con más gente de la que recuerdo y cito, pero teneis que perdonarme todos aquellos que seguro me he dejado en el tintero. Ayer estaba flotando y hoy todavía no he aterrizado del todo. Todo un lujo conoceros. Mis saludos a todos.

Más actualizaciones: Subsanando olvidos -en lo posible- también pude cruzar unas palabras con:
Balovega
Diario de una chica con síndrome de Down
Cabreada
Reina
...


Las no-claves para tener un buen blog

21/10/2009
Partiendo de la base de que una web necesita a partes casi iguales de un buen contenido y de un buen continente ¿podemos establecer unos parámetros de referencia para hacer un buen blog? ¿cómo podemos saber a priori cuáles son los buenos contenidos y cuáles los mejores diseños?

Hay cientos de sitios que ofrecen consejos y recomendaciones sobre cómo se debe escribir, cuales son los mejores diseños, qué tipografías son las mejores, que estilo utilizar, estrategias para conseguir visitas... Lo que no entiendo es por qué si las claves para el... llamemosle éxito, están ahí, son claras y son conocidas por todo el mundo, no todos las aplican inmediatamente y comienzan a recoger frutos en forma de popularidad, visitas, distinciones o lo que sea.

Quizás sí que lo hacen y lo que ocurre realmente es que dichas claves no lo son tanto. Quizás no hay recetas para la magia, para la chispa, para la CREATIVIDAD, para la originalidad... Cuando Manuel Jalón Corominas y Enric Bernat decidieron ponerle un palo a algo que hasta ese momento no lo tenía, demostraron tener el don de la genialidad. Si ahora yo uso un palo para otros fines distintos de los habituales, probablemente sólo sería un friki más o un oportunista. Si todos hacemos lo mismo, lo que antes había sido original ahora deja de serlo y se convierte en una medianía o incluso en una mediocridad. Esta frase me la apunto...

Es de perogrullo pero hoy día, la coincidencia con el gusto de la mayoría es muy importante. Si algo le gusta a la mayoría está bien, si le gusta a casi todos es una obra maestra; si no le gusta a casi nadie entonces es un bodrio... pero subrayo lo de hoy día. Hay una cosa que se llama MODA y que en mayor o menor medida, seguimos muchos. Actualmente se lleva el estilo 2.0 para webs: fondos muy claros con líneas casi invisibles para delimitar cajas, texturas muy suaves, fuente Georgia, Helvética o similar, bordes redondeados, links sin subrayado, iconos cristal, 3D,... pero ¿era esto lo que se llevaba hace por ejemplo 5 años? ¿es esto lo que se llevará dentro de otros 5? ¿por qué lo que ahora está bien, en el futuro seguro que será una antigualla? Probablemente sólo por definición de la propia palabra.

Pero ¿qué ocurre con los primeros que empiezan a marcar la moda del futuro? Pues que les pasa lo que a Van Gogh. Creo que Van Gogh vendió un solo cuadro en su vida y que no se comenzó a apreciar su obra con fuerza hasta 11 años después de su muerte. ¿Qué hizo que algo que no gustaba comenzara a ser tan reconocido? Pues principalmente al empeño de su cuñada que resultó ser su única heredera y que hizo una gran tarea de PROMOCION. Tras una exposición de renombre en París, la cotización de los cuadros del maestro pelirrojo comenzó a subir exponencialmente, afortunadamente -y nunca mejor dicho- para ella.

Nos dejamos llevar fácilmente por los poderosos, por los que ya han demostrado su valía, por lo popular, por los distintos gurús que existen en todos los ámbitos. La imagen de la derecha la podría haber dibujado perfectamente un niño y no pasaría nada; la podría haber pintado yo y me mandarían a una academia de dibujo a perfeccionar mi estilo; pero la realidad es que es de Miró y eso ya es una señal inequívoca de que tiene que ser buena ¿no? A ver qué crítico se atreve a decir que eso lo podría hacer mucha gente y que no tiene demasiado mérito. Una vez que me hayais disculpado por el ejemplo, de forma parecida, las personas y los medios con más INFLUENCIA pueden ensalzar o hundir totalmente en la miseria cualquier trabajo ajeno.

Por último y como con otras tantas cosas, ciertos asuntos requieren de una importante dosis de SUERTE. Pero bien entendido que la suerte hay que buscarla. Encontrar un trébol de cuatro hojas y además rojo, sólo contemplando el paisaje a ver si aparece alguno por casualidad, es directamente imposible. Si plantas algunas semillas, las riegas, las abonas, estudias algo de genética vegetal, realizas cruces con otras especies, compartes ideas con otros, etc., seguramente la probabilidad de tener suerte y encontrar uno, aumentará muchos enteros.


Una pregunta que me hacen mucho es ¿qué plantilla (diseño) es la mejor? Las menos ¿cómo puedo mejorar el contenido de mi blog? La opinión y el gusto por las cosas es algo tan subjetivo que lo que para uno es perfecto, para otro es sencillamente un gran desastre. Por tanto, la respuesta es que no tengo ni idea.

Sin embargo, como supongo que es posible que después de todo este taco, sigas buscando respuestas, ofrezco unos apuntes para la reflexión. Posibles planteamientos a la hora de crear un blog desde el punto de vista del continente y del contenido. Se puede...
  • construir/escribir algo que le guste al autor
  • construir/escribir algo que el autor sepa
  • construir/escribir algo que le guste a otros
  • construir/escribir algo que el autor piensa que le gusta a otros
  • construir/escribir algo que otros dicen que es lo que se debe
Personalmente me quedo con las dos primeras y si es posible, simultaneándolas. Si el contenido está basado en algo que desconoces y/o que no es de tu total agrado, lo de escribir en un blog o es tu trabajo o seguramente pasará a la historia en poco tiempo. Proponerse hacer un sitio con un diseño espectacular cuando no se tienen los más mínimos conocimientos o cuando a uno mismo no le gusta, también está probablemente abocado al fracaso.

Si entramos en el terreno profesional, la cosa cambia bastante. Cualquier gerente de un medio digital se tiene que preocupar más por lo que le gusta a otros que por lo que le gusta a él mismo. Tampoco debería ser un obstáculo su nivel personal de conocimientos, porque se le suponen medios económicos, documentales y técnicos, aunque sean ajenos, para resolver esa parte.

Cuando alguien escribe un libro, dudo mucho de que al hacerlo sepa con certeza que va a ser un futuro boom editorial. Seguro que ese autor lo redacta con todo su cariño, siguiendo las pautas conocidas de éxito y el mayor de sus esmeros, pero queda a la decisión del público que esa obra sea considerada como maestra o como fiasco. Cuestión de números: la mayoría debería tener la razón... aunque una minoría presuntamente cualificada, los críticos, también podrían tenerla.


Aviso fijo al final de cada entrada.

19/10/2009
Con esto de los concursos (20blogs, Bitácoras), ya sois más de uno y más de tres, los que me habéis preguntado cómo poner un texto fijo, imagen o lo que sea, tras el contenido de cada post. La idea es que tras leer vuestra entrada, el visitante lea también algo tipo: "Si te ha gustado, Menéame", "¿Te ha parecido interesante esta entrada? Pues...", "Te mola > Vótame", etc.

Para conseguir esto tenemos que realizar dos tareas:

1. Lo primero es preparar el mensaje o aviso. Si es un texto, será suficiente con hacer un DIV con una etiqueta de estilo y el texto-enlace dentro. Por ejemplo:
Si no se ha entendido vuelve a empezar. ¿O.K.?

<div style='width:370px;text-align:center;padding:5px;margin:15px auto;color:#5882AA;background:#cccccc'><img src='URL_IMAGEN' style='float:right;margin:0px 0px 3px 3px;'/>TEXTO <a href='URL_DESTINO' style='text-decoration:underline;'>ENLACE</a>. MAS TEXTO</div>

Dentro del primer STYLE irán los atributos del bloque (DIV). En el segundo, los de la imagen que acompaña al texto. Esta imagen se puede poner o no, al gusto.

Otra opción más simple es colocar directamente sólo una imagen sin texto, pero con un enlace:


<div align='center'><a href='URL_DESTINO'><img style='margin:0px auto;text-align.center;cursor: pointer;' src='URL_IMAGEN' /></a></div>


¿Hay más opciones...? Sí, pero esas ya os las dejo como deberes para casa :)

2. Una vez diseñado vuestro aviso, la segunda parte es colocarlo en su sitio, pero esto es quizás lo más fácil. Simplemente teneis que localizar (artilugios expandidos) la variable DATA:POST.BODY y justo detrás incluir el código que habeis preparado antes.

Si teneis puesto el truco del estilo revista, leer más o similares, lo más seguro es que tengais una parte de código que incluye una condición para mostrar un aspecto u otro según estemos en páginas de entradas o en otras. En este caso, habrá dos DATA:POST.BODY. Aquel que sea para entradas individuales (ITEM), será la referencia correcta.


Probando fuentes

16/10/2009
No es que se me ocurran muchas aplicaciones para este código, pero siempre puede de ser de utilidad para alguien. Se trata de unos botones que mediante instrucciones JavaScript de estilo, permiten que el lector de una web vea que aspecto tendría la página que está visitando, con los distintos tipos de fuentes considerados estándar.

Tipografías estándar son las que tienen instaladas una mayoría considerable de los ordenadores y en una información más exacta, las que nos relaciona Cosas Sencillas. Cada uno puede ver en una página web, sólo las tipografías que tiene instaladas en su propia máquina. O sea, que si pones una fabulosa fuente en tu espacio, tan buena como poco común, lo más seguro es que tú y sólo tú la veas como es debido. El resto verán unas letras distintas, las que estén definidas por defecto. Como podeis comprobar en el anterior enlace, incluso hay algunas fuentes "estándar", que vienen con Windows y no con Apple, otras para la versión Vista...

Realmente no hay una fuente que valga para todos los equipos, arquitecturas y sistemas operativos y por eso es conveniente saber cómo funciona el selector font-family. El valor de esta propiedad debería ser en un principio el nombre de la fuente deseada, pero por lo anteriormente explicado, es conveniente montar una relación de fuentes que el navegador irá intentando leer en el orden en que se escriban, hasta encontrar una que el usuario efectivamente tenga:

p {
font-family: Cambria, "Times New Roman", Times, Serif;
}

Hay dos tipos de nombres de tipografías, el que hace referencia a la fuente en sí y el de las familias genéricas. Poner una familia genérica sirve para el caso de que todas las anteriores fallen. Las posibilidades son serif, sans-serif, cursive, fantasy y monospace.

Una observación. La relación de fuentes debe ir separadas por comas y los nombres de fuentes que contienen espacios en blanco, deben ir entrecomillados si se utiliza con STYLE en HTML.

Y ahora el código por si quereis poner unos botones de este tipo:

<style type="text/css">.botones ul {list-style:none; float:right;margin:0px 0px 0px 10px;text-indent:0px;} .botones li {width:130px;padding:2px;margin:0px 0px 2px 0px;background:#990000;color:#ffffff;text-align:center;border:1px solid #000000;text-indent:0px; } .botones li:hover {background:#cc00000} .botones li a {width:130px;background-image:none;text-indent:0px;color:#ffffff;display:block;} .botones li a:hover {width:130px !important;background:#cc0000;} </style><div class="botones"><ul><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Arial';">Arial</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Arial Black';">Arial Black</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Comic Sans MS';">Comic Sans MS</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Courier New';">Courier New</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Georgia';">Georgia</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Helvetica';">Helvetica</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Impact';">Impact</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Lucida Sans';">Lucida Sans</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Times New Roman';">Times New Roman</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Trebuchet MS';">Trebuchet MS</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Verdana';">Verdana</a></li></ul></div>

Añadiendo nuevos elementos a la lista, podeis incluir otras fuentes que considereis oportuno probar con este sistema. El código está preparado para colocar en una entrada o un gadget añadido desde Elementos de página, pero lo más importante es que escojais el nombre de un CONTENEDOR (#) lo más genérico posible para que se pueda cambiar el tipo de letra de toda la página y no sólo una parte de ella. Esto ya va en función de cada plantilla. Si no estais muy seguros podeis hacer pruebas con OUTER-WRAPPER o MAIN-WRAPPER que suelen ser muy comunes en las plantillas Blogger.

Hay sistemas para forzar que el usuario vea la fuente que el programador desea a pesar de que el primero no la tenga, pero no están exentos de inconvenientes. Uno es convertir el texto en imágenes que diseñaremos con nuestras propias fuentes y colocar dichas imágenes en su lugar, pero como podeis imaginar, es pesado de hacer, no es bueno para la correcta indexación de las páginas y además ralentizará la carga de la misma. Otros sistemas basados en scripts sIFR, nos liberan de la tarea de conversión, pero no elimina todos los inconvenientes.

De momento, el futuro está en la generalización de @font-face de CSS3 para todos los navegadores, que es la forma más sencilla y práctica de conseguir utilizar tipografías no-estándar, ya que este atributo permite indicar la dirección de una fuente en la hoja de estilo y esta se descargará automáticamente en el ordenador del usuario.


Hacer este artilugio se me ha ocurrido al hilo de la polémica sobre Oloblogger, que ha provocado mi curiosidad y me ha hecho leer mucho sobre el tema del uso de la tipografía Comics Sans. Tanto que estoy planteándome cambiarla. El caso es que parece que esta tipografía si bien es una de las más utilizadas, también es la más odiada dentro del mundo del diseño web. O sea, a los usuarios de procesadores de texto y a los aficionados a desarrollar webs parece que les encanta, pero los profesionales no la quieren ni ver.

Existe incluso una Organización Contra el Abuso de la Comic Sans (castellano) y otra página que directamente propone el banneo de esta tipografía de nuestras vidas (inglés). Chistes, más chistes y artículos ingeniosos a cuento de la Comic, además de la historia sobre su origen. Todo para reforzar la idea de que no es una tipografía al uso.

En Blogoff nos dan 5 razones de peso para no utilizarla, todas válidas pero de las cuales me parecen muy convincentes dos: ¿Si mucha gente la odia, por qué espantar lectores por una cosa tan simple de cambiar? ¿Original la fuente más usada en el mundo? Parece que algo de razón, sí que tienen.

No es la primera vez que alguien me llama la atención con la tipografía y aunque por otra parte parece que no debe ser demasiado molesta (finalista por decisión del jurado en 20blogs y tercero provisionalmente en la categoría en Bitácoras * ) me he propuesto dar gusto a los lectores y a los no lectores de este espacio -ya veremos si no me arrepiento- y aprovechando el artilugio de hoy, abro una encuesta para saber vuestra opinión. Sólo teneis que haceros una idea pinchando en los distintos botones de arriba y luego seleccionar en la encuesta de abajo aquellas tipografías que más os gusten PARA ESTE BLOG de entre las propuestas. Se pueden seleccionar varias de ellas. Prometo al menos estudiarlo.



Una curiosidad: Una tabla periódica con las mejores tipografías, donde por supuesto, no está la Comic.

(*) ¡No sabía cómo contarlo! Por eso está ahí metido con calzador :)


Splash screen... o algo parecido

13/10/2009
No tenía ni idea de que se llamaba así, pero a resultas de una pregunta, he podido descubrir que un Splash Screen es una pantalla, generalmente una imagen, que aparece mientras se carga un programa, un sistema operativo, una aplicación de instalación... Vamos, la pantallita que muestra nuestro sistema operativo cuando arrancamos el ordenador desde que se cargan los datos básicos de hardware, hasta que comienza a cargar el escritorio, por ejemplo. Algunos les llaman quitamiedos, porque sirven para evitar la sensación de que el ordenador se ha quedado colgado en el caso de que la cosa se demore. Suelen llevar una señal de avance de la carga.

Para los que quieran sencillamente eso, algo que salga mientras vuestra página carga, os remito a la entrada sobre cómo crear un aviso para la carga de una página y que precisamente mostrará en el blog una capa superpuesta, que desaparece cuando termina completamente la carga de todo su contenido. La capa puede tener cómo se explica allí un gif animado, una imagen fija, pero también otro tipo de elementos y sólo con ampliar su tamaño, obtendremos una cosa similar a un splash screen.

Sin embargo hay otra posibilidad, que es mostrar algo que desaparezca tras cumplir su misión (pasado un tiempo realmente). Si es eso lo que quereis, entonces continuad aquí que vamos a tratar de explicar cómo se hace.

En primer lugar generamos un script, que precisamente lo que hace es ocultar determinada capa identificada mediante su nombre, transcurrido determinado tiempo. Para ello, antes del </head> pegamos lo siguiente:

<script type='text/javascript'>window.setTimeout('document.getElementById (&quot;ID_CAPA&quot;).style.visibility=&quot;hidden&quot;',10000)</script>

ID_CAPA será el nombre que le pondremos después al DIV que contendrá aquello que queremos que se vea con este sistema. La última cifra (10000) es el tiempo en milisegundos que tardará en aplicarse la instrucción contenida dentro del setTimeout y que en este caso consiste en ponerle un valor HIDDEN a la capa para que deje de verse. Dicho al revés, pasados 10 segundos, la capa que ahora después crearemos, desaparecerá.

Ahora el bloque que queremos mostrar. En primer lugar, tiene que tener el mismo nombre (ID_CAPA) que pusiéramos en el script. El lugar dónde debe ir ubicado es justo después del <body>

<div id='ID_CAPA' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:750;height:592px;margin-top:-296px;margin-left:-375px;border:5px solid #990000;'><a href='javascript:void(0);' onclick='this.style.visibility=&quot;hidden&quot;'><img style='border:0px;' src='URL_IMAGEN' /></a></div>

Configuración:
Hay que cambiar, para adaptarlo a vuestras necesidades, el ancho y el alto del bloque (WIDTH-HEIGHT). Los márgenes (MARGIN-LEFT MARGIN-TOP) tienen que tener justo la mitad de pixels que las correspondientes medidas de ancho y alto, para que el resultado se vea totalmente centrado. El borde (BORDER) se puede cambiar o incluso anular. También se puede incorporar un color o un imagen de fondo (BACKGROUND), incluyendo un PADDING para que no se solape por completo. Como estamos ante un DIV que va a funcionar de forma independiente al resto de la página, podeis poner el estilo que querais.

El enlace que está alrededor de la imagen del ejemplo (javascript:void(0);), sirve para que el usuario pueda hacer desaparecer la imagen antes de transcurrido el tiempo programado, con sólo pinchar en ella. Para que se pueda cerrar sólo desde un punto determinado del bloque, habría que quitar el enlace de la imagen y generar un nuevo DIV dentro del principal con una instrucción javascript algo distinta:

<div id='ID_CAPA' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:750;height:592px;margin-top:-296px;margin-left:-375px;border:5px solid #990000;'><div style='position:absolute;top:-25px;right:0px;background:#990000;color:#ffffff;padding:1px;'><a href='javascript:void(0);' onclick='document.getElementById (&quot;ID_CAPA&quot;).style.visibility=&quot;hidden&quot;'>[X]</a></div><img style='border:0px;' src='URL_IMAGEN' /></div>

Con respecto a su contenido, es necesario especificar la direción de la imagen que se quiere mostrar o, si se prefiere, cambiar la imagen por un texto u otra cosa. Por ejemplo, se podría mostrar una animación flash o un vídeo de YouTube -qué viene a ser lo mismo para este caso- cambiando todo el tag IMG por un objeto embebido. Ejemplo con contenido para copiar y pegar y una demo de cómo quedaría:

<div id='ID_CAPA' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:750;height:592px;margin-top:-296px;margin-left:-375px;border:5px solid #990000;'><a href='javascript:void(0);' onclick='this.style.visibility=&quot;hidden&quot;'><embed height='592' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='high' src='http://www.youtube.com/v/_kocZ-j-o3I&amp;hl=es&amp;autoplay=1' type='application/x-shockwave-flash' width='750'/></a></div>

En este último caso, en función de la duración del vídeo, ajustaremos el valor del tiempo del primer script que instalamos (10000), hasta una cifra que nos permita ver la secuencia completa. Para estos menesteres, parece adecuado incluir al enlace del fichero flash, un &autoplay=1, cómo se ha hecho en este último ejemplo, que hará que el vídeo comience a reproducir solo. Si esperamos a que el usuario le de al play y por otro lado, nosotros programamos el tiempo justo, lo más seguro es que el elemento desaparezca antes de terminar. Sin embargo, si ponemos tiempo de más y el usuario le da desde el principio, el aburrimiento/desesperación puede ser máximo. Por cierto, mucho ojito con poner cosas del estilo de esta película.

Una pega de este sistema usando elementos multimedia, es que el script sólo oculta el contenido, por lo cual, si este tiene sonido y es cerrado por el usuario antes de tiempo, el audio seguirá oyéndose hasta que no termine del todo.

Este código se puede colocar en una entrada, para que el pantallazo se vea sólo cuando se accede a ella. Para ello habría que cambiar las comillas simples por dobles y los &quot; por comillas sencillas, amen de redactarlo todo seguido, sin saltos de línea. (ejemplo)

Cuidado con los posicionamientos. Si no hay ninguna instrucción POSITION en vuestra plantilla, el bloque se colocará en referencia al BODY tanto si lo ponemos en la plantilla como si lo ponemos en un post y servirá todo el código explicado hasta el momento. Por contra, si nuestra plantilla incluye algún atributo POSITION y para el caso de colocarlo en un post, habrá que ajustar los parámetros porque el bloque se colocará con respecto al contenedor de las entradas y no con respecto al BODY.

Este truco se puede usar como pantalla de presentación, para dar un aviso, para mostrar un contenido destacado, una lista de enlaces,... lo que vuestra imaginación os diga. Se admiten sugerencias de uso.


Plantilla. Oldbook

10/10/2009
No es que tenga pensado reconvertirme y comenzar a ofrecer plantillas propias, no. Lo que ocurre es que alguien me planteó si sería posible poner un post al lado de otro, en lugar de que se muestren apilados (lo normal) y no me pude resistir a intentarlo. Luego me fuí liando, liando, liando... y al final salió esto, una plantilla completa muy en la línea Oloblogger. O sea, oscura, recargada, algo gótica, algo gore, algo grunge, llena de cachivaches y en fin, todo lo contrario del estilo 2.0.

Click para ampliar

Lo que veis en la captura es el aspecto de un post individual (item): Entrada a la izquierda y comentarios a la derecha. En la página Inicio y en la navegación por fechas o por etiquetas, los posts se muestran ocupando ambas páginas, uno a cada lado... lo que en un principio os comentaba.

Los posts de la demo explican sus características así como los pequeños ajustes que hay que hacer en la configuración general del blog (por ejemplo, número par de entradas por página). También tiene un catálogo de las imágenes utilizadas por si quereis almacenarlas vosotros mismos y no quereis correr si un día se pierde el hosting original.

En la propia demo hay un botón para descargar la plantilla completa. Para los mañosos, desde ya advierto que este tipo de plantillas no permiten muchas modificaciones, debido a su gran componente gráfico. No obstante, por lo peculiar de su diseño, probablemente no haya que tocar mucho: o te gusta así o casi mejor que escojas otro template.

Pensando en los que les gusta poner muchos cacharritos, como no tiene barra lateral, he incorporado secciones arriba y abajo del cuerpo de las entradas para poder poner lo que se quiera.

¡Que la disfruteis!


Barra de herramientas Wibiya

07/10/2009
...o cómo meter un montón de cacharritos en muy poco espacio, de una manera sencilla.

Esto es en pocas palabras Wibiya Tools Bar. Se trata de una versión Beta y sólo funciona por invitación, aunque esta seguramente te llegará en muy pocos días con sólo solicitarla.

Demo en versión Dark Red en la parte inferior de este blog de pruebas.

La barra es muy fácil de instalar pues basta con poner una línea de código para que se ejecute la llamada al script que desarrolla todo. La configuración es bastante amplia pero también fácil. Podremos elegir el aspecto y -lo más interesante- los gadgets que queremos que incorpore la barra: cuadro de búsqueda interna/externa, traducción, entradas recientes, suscripción a feed, galería de imágenes, enlaces a Facebook (sólo a este servicio, se ve que llevan comisión), botón "compartir" para mandar a las más conocidas redes sociales, una especie de bloc de notas para avisos a tus lectores, un cuadro para Twitter... y supongo que le irán colgando más cosas, pero también supongo que eso será cuando empiecen a cobrar por el servicio ;)

Como está en inglés, un pequeño tutorial para instalar el artilugio:

0. Accedemos a la dirección de Wibiya y pinchamos en Get It Now. En la pantalla que aparece y en el lado derecho introducimos nombre, dirección de correo y la dirección de nuestra página. Eso es sólo para pedir una invitación. Al cabo de unos días, recibiremos un correo con un link y una clave para poder acceder. A mí me tardó menos de 24 horas. Cuando lo tengamos nos vamos al lado izquierdo e introducimos nuestro correo y la clave que nos mandan.


1. Una vez que hayamos podido entrar, iremos al primer paso Create an Account, en el que indicaremos el nombre de nuestro sitio, la dirección y el idioma. A la derecha una cuenta de correo y un password. Con el captcha resuelto, pinchamos en Next para seguir.


2. Ahora elegimos el diseño que más nos cuadre en cuanto a color y a la derecha si queremos que muestre el icono de nuestro sitio, otro personalizado que podremos subir desde ahí mismo o un icono de Wibiya. Sale una previsualización abajo para que no nos lo tengamos que imaginar. Next de nuevo.

3. Cómo decía antes, ahora lo más interesante: una selección de gadgets para escoger aquellos que queremos poner. Con ir marcando/desmarcando es suficiente. Eso sí, aquí ya necesitais un traductor los que no sepais inglés o dejaros llevar por vuestra intuición... o por los iconos. También podeis ir viendo cómo queda. Next.


Ahora, adicionalmente y en función de los artilugios elegidos, puede que se os pregunten detalles cómo vuestra cuenta de Flickr o vuestro usuario de Twitter, necesarios para personalizar la barra con vuestros propios datos.

4. Ya tenemos creada nuestra barra y ahora sólo nos falta seleccionar la plataforma dónde la usaremos. Seleccionándola entre las distintas opciones, a la derecha nos darán las intrucciones necesarias para poderla instalar. En el caso de Blogger, si estais logueados en vuestro blog, directamente aparece una aplicación para instalarlo en vuestra barra lateral con sólo aceptar. No importa el lugar dónde se coloque; la barra siempre estará en la parte inferior. Por cierto, es plegable (botón a la derecha del todo).


Antes de hacerlo, podeis ver el contenido del código y comprobareis que sólo es este:
<script src="http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=XXXXX" type="text/javascript"></script>

La identificación (XXXXX) es única por cuenta y eso os permitirá cambiar posteriormente cualquier cosa desde la web de Wibiya, sin tocar nada en vuestro blog. Los cambios son visibles enseguida sólo refrescando.

Para desinstalarla si os aburrís o simplemente porque no os convence, es suficiente con eliminar el gadget que se incorporó en su momento.


Proteger un contenido... pero poco

04/10/2009
Como respuesta a una consulta, a continuación se explica cómo proteger parte del contenido de una página o incluso una página entera. Que quede claro antes de empezar, que el nivel de seguridad de estos sistemas es cero. Cualquiera con unos pocos conocimientos podría averiguar la contraseña sin ningún problema. Por tanto, sólo debería usarse como divertimento o para datos sobre los que no preocupe su difusión. Los únicos sistemas seguros (casi) del todo son los que utilizan bases de datos para almacenar los idem, pero hoy por hoy, la mayoría de nosotros no tenemos acceso a manejar dichas bases de datos.

Una primera opción sería introducir este script en nuestra plantilla, antes del </head>:

<!-- Ocultar y mostrar con password -->
<style type='text/css'>
.ver {display:block;}
.ocultar {display:none;}
</style>
<script type='text/javascript'>
function desplegar(identificacion){
var menu = document.getElementById(identificacion);
if(document.formclave.clave.value == &#39;PASSWORD&#39;)
{if(menu.className == &quot;ocultar&quot;)
{menu.className = &quot;ver&quot;;}
else {window.alert(&quot;Ya está todo el contenido a la vista&quot;);}
}
else {window.alert(&quot;Contraseña errónea&quot;);}
}
</script>

A continuación sólo sería necesario introducir esta estructura de código en una entrada para que una parte de su contenido quede oculto hasta que se introduzca la contraseña correcta (en mayúsculas lo que habría que personalizar):

Para acceder a la información, introduzca la contraseña:
<form name="formclave"><input type="text" name="clave"><input type="button" value="Enviar" name="enviar" onclick="desplegar(IDENTIFICATIVO_UNICO)"></form>
<div class="ocultar" id="IDENTIFICATIVO_UNICO">AQUI EL CONTENIDO OCULTO DE LA PAGINA</div>

El script y su estilo sólo hace falta instalarlo una vez. Luego, cada vez que se quiera proteger una parte de contenido, habrá que incluir esta segunda parte de código. Hay que tener cuidado con que los pares IDENTIFICATIVO_UNICO sean iguales entre sí pero distintos con respecto a otros pares.

Para cambiar la contraseña sólo habría que cambiarla en el script (PASSWORD) y esto ya os da una pista de lo fácil que sería ver el código fuente y averiguar la susodicha, pero el caso es que ni eso haría falta: Botón derecho, ver código fuente y buscar la información oculta bastaría para verla sin preocuparnos de buscar la contraseña. Probemos aquí el sistema con la palabra "hola"


Introduzca la clave

ESTE ES EL CONTENIDO OCULTO DE ESTA PAGINA


Si preferís no trastear la plantilla porque sólo utilizareis esto para ocasiones puntuales, también se puede poner directamente el código en la entrada. En este caso, hay que hacer unas pequeñas modificaciones con las comillas y escribir toda la parte de estilo y script en la misma línea, sin saltos de línea, tal que así:

<style type="text/css">.ver {display:block;}.ocultar {display:none;}</style>
<script type="text/javascript">function desplegar(identificacion){var menu = document.getElementById(identificacion);if(document.formclave.clave.value == "PASSWORD"){if(menu.className == "ocultar"){menu.className = "ver";}else {window.alert("Ya está todo el contenido a la vista");}}else {window.alert("Contraseña errónea");}}</script>

<div align="center">Introduzca la clave
<form name="formclave"><input name="clave" type="text"><input value="Enviar" name="enviar" onclick="desplegar(IDENTIFICATIVO_UNICO)" type="button"></form></div>

<div class="ocultar" id="IDENTIFICATIVO_UNICO" align="center">ESTE ES EL CONTENIDO OCULTO DE ESTA PAGINA</div>


Ahora otra variante sin contraseña escrita en ningún sitio y sin poder ver el contenido en la página en la que se está. Tiene el inconveniente de que la información es pública para todo aquel que conozca la dirección de la página, ya que precisamente la contraseña es la dirección de dicha página o mejor dicho, una parte de esa dirección.

En este caso, lo primero que tenemos que hacer es crear la página y publicarla (la palabra lo dice, será pública). En Blogger, para que no nos salga de las primeras, deberíamos ponerle una fecha atrasada. Para que se vaya lo más lejos posible, mirad vuestra primera entrada y ponerle esa misma fecha.

Ahora comprobamos la direccion de la página. En Blogger la cosa será algo así:
http://NOMBREBLOG.blogspot.com/AÑO/MES/PALABRA1-PALABRA2-PALABRA3-PALABRA4.html

Elegimos de esa dirección la palabra que más nos guste y que será la que sirva de contraseña. Para el ejemplo cogeremos PALABRA3. Ahora se trata de escribir en el sitio oportuno la dirección entrecomillada, pero sustituyendo esa para de la dirección (contenido) por la variable que captura el formulario. Se reproduce el código en formato entrada:

<script type="text/javascript">function acceder(){window.location = "http://NOMBREBLOG.blogspot.com/AÑO/MES/PALABRA1-PALABRA2-" + document.formclave.clave.value + "-PALABRA4.html";}</script>
<div align="center">Introduzca la clave
<form name="formclave"><input name="clave" type="text"><input value="Enviar" name="enviar" onclick="acceder();" type="button"></form></div>

Una prueba para este otro sistema (password="contenido"):

Introduzca la clave

Se puede coger una sola palabra o cualquier otro trozo. Podría ser incluso toda la parte final (palabra1-palabra2-palabra3-palabra4), pero siempre sustituyendo la parte que sirve como contraseña por document.formclave.clave.value.


Novedades legales y de cortesía.

02/10/2009
Sobre este blogAlgún avezado lector ya se habrá percatado a estas alturas, de que tenemos un par de nuevos apartados fijos en el blog. (de hecho me consta que algunos ya lo han hecho). Amen de los "históricos" Indice y Enlazar, ahora se han incorporado Aviso legal-Política de privacidad y ¿Esto qué es?

El primero intenta cumplir con la legalidad vigente, reflejando las condiciones de uso, la forma en que recogemos, guardamos o utilizamos la información que recabamos a través de los diferentes servicios que se ofrecen y/o páginas disponibles en este sitio, la licencia del contenido y la forma de contacto con el administrador. ¿Que no os preocupa este tema? A mí tampoco mucho, la verdad. Pero si se pueden hacer las cosas bien, ¿por qué no hacerlo?

Cuestiones legalesEl segundo es el típico About, que cuenta de qué va este blog y que creo que era una asignatura pendiente que tenía con los usuarios del mismo. En él se explica cómo surgió este blog, qué pretende ser actualmente y además, unas recomendaciones para mejorar en lo posible su óptimo desarrollo.

Espero que le echeis un vistazo a ambos.

Más información: Ley de Servicios de la Sociedad de la Información (LSSI). Preguntas frecuentes. Ministerio de Industria, Turismo y Comercio. Gobierno de España.

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