0

Curiosidades con CSS

Un cuadrado, dividido en cuatro partes
<div style="border-bottom: 50px solid lightblue; border-left: 50px solid red; border-right: 50px solid green; border-top: 50px solid yellow; height: 0;width: 0;"> </div>
Un triángulo.
<div style="border-bottom: 50px solid yellow; border-left: 30px solid #101921; border-right: 30px solid #101921; margin-bottom: 30px; width: 0;"> </div>
Un moño
<div style="border: 30px solid salmon; border-bottom: 15px solid #101921; border-top: 15px solid #101921; height: 0; width: 0;"> </div>

Una flecha.
Hacia allá
<style>
.right_arrow {position: relative; height: 50px; width: 250px;}
.right_arrow .body {background-color: SteelBlue; color:#FFF; line-height: 50px; text-align: center; height: 50px; width:100px;}
.right_arrow .arrow {border: 25px solid #101921; border-left: 10px solid SteelBlue; position:absolute; left:100px; top: 0; height: 0;}
</style>

<div class="right_arrow"><div class="body"> ... texto ... </div><div class="arrow"></div></div>
Y otra flecha.
Hacia el otro lado
<style>
.left_arrow {position: relative;}
.left_arrow .arrow {border: 25px solid #101921; border-right: 25px solid #CC0000; margin-left: -25px; overflow: hidden; width:0; height:0;}
.left_arrow .body {background-color: #CC0000; color: white; margin: -35px 0 0 25px; left:25px; text-align: center; top:15px; height:20px;}
</style>

<div class="left_arrow"><div class="arrow"></div><div class="body"> ... texto ... </div></div>

REFERENCIAS:Cult-f.net

0

Si veinte años no fueran nada


REFERENCIAS:arturogoga.com

0

Iconos RSS muy coloridos

Doce iconos RSS llenos de color en formato png y con unas medidas de 128px x 128px.

Como su creadora dice, están bajo licencia "haz lo que gustes con ellos y se feliz".

Para descargarlos pincháis sobre el que os guste con el botón derecho del ratón y "guardar como".

RSS1RSS2RSS3RSS4RSS5RSS6RSS7RSS8RSS9RSS10RSS11RSS12

0

Tumblr y Blogger (Parte 2)

Integrar Tumblr a Blogger o a cualquier otro sitio web es bastante sencillo, lo difícil va a ser explicarlo.

Como la característica principal de este servicio es crear entradas de diferente tipo (Text, Photo, Quote, Link, Chat, Audio, Video), las alternativas disponibles son muchas ya que esa diferencia de entradas no es abstracta, cada una de ellas tiene sus propias características y se pueden leer por separado o filtar para no mostrarlas parcial o totalmente.

Supongamos que una entrada es un video ¿Qué mostraríamos en nuestro blog? ¿El video en si mismo? ¿Un enlace? ¿Nada? ¿Mostraremos los textos con formato o sin formato? ¿Qué haremos con los audios? Es imposible generar scripts para todas las variantes así que, este modelo tendrá ciertos limites subjetivos:
  • los textos, las citas y los enlaces se mostarán sin formato
  • las imágenes, reducidas y sin los textos adicionales
  • el audio mostrará un reproductor pero no los textos
  • los videos no se mostrarán y serán reemplazados por un enlace
  • las entradas de conversaciones (Chat) serán ignoradas
  • se cargará una cantidad de entradas y se mostrará una por vez con la posibilidad de navegar entre ellas
Se basa en un modelo llamado tumblrBadge que utiliza JSON, y funciona de manera similar a lo que hacemos para leer Twitter.

Para implementarlo, debemos agregar un elemento HTML en la plantilla y allí, colocar el siguiente código:
<div id="contenedorTumblr"> </div>
Nada más; ese, será el DIV contenedor donde lo mostraremos.

El script lo vamos a colocar al final de la página, antes de </body> para que de este modo no interfiera con otros y que comience a cargar los datos cuando nuestra página ya esté visible.

<script type='text/javascript'>
//<![CDATA[

var listaTU=new Array();
var maxsTU=0;
var actualTU=0;

function tumblrCallback(obj) {

// --------------- datos a definir usuario ---------------
var usuario = "http://NOMBRE.tumblr.com/"; // la URL de Tumblr (colocar barra final)
var cuantosPosts = 10; // cantidad de posts a leer
// --------------- final datos a definir --------------------


var contarAux=0;
var tumblrs = obj;

for (var i=0; i<cuantosPosts; i++){
elPost= tumblrs.posts[i]; // leer cada uno de los posts

// algunos de los datos, los leeremos como textos planos eliminando los formatos
textoPlano = elPost["regular-body"] || elPost["photo-caption"] || elPost["quote-source"] || elPost["link-text"] || elPost["link-url"] || elPost["video-caption"] || elPost["audio-caption"] || "";

// filtramos los tipos de posts a mostrar
if (/regular|photo|quote|link|video|audio/.test(elPost.type)) {

// y en funcion del tipo de post, leemos el contenido
if (elPost.type === "photo") { // las fotos
photoURL = elPost["photo-url-250"];
contenido = '<div class=\"TumblrPhoto\" ><img src=\"' + photoURL + '\" /></div>'
} else if (elPost.type === "quote") { // las citas
contenido = '<div class=\"TumblrCita\"><span>' + elPost["quote-text"] + '</span>' + textoPlano + '</div>';
} else if (elPost.type === "link") { // los enlaces
contenido = '<div class=\"TumblrLink\"><a href="' + elPost["link-url"] + '">' + textoPlano + '</a></div>';
} else if (elPost.type === "video") { // los videos
contenido= '<div class=\"TumblrVideo\">VIDEO<span>' + textoPlano + '</span></div>';
} else if (elPost.type === "audio") { // los audios
contenido= '<div class=\"TumblrAudio\">' + elPost["audio-player"] + '</div>';
} else if (elPost.type === "regular") {
contenido = '<div class=\"TumblrRegular\">' + textoPlano + '</div>';
}

// creamos el codigo de salida
if (contenido) {
// en la parte superior, logo enlaces, feeds y navegacion
salida = '<table class=\"enlacesTumblr\" cellpadding=\"0\" cellspacing=\"0\"><tbody>';
salida += '<tr><td><a target=\"_blank\" href=\"' + usuario +'\"><img src=\"http://img145.imageshack.us/img145/2020/ttumblrs.png\" /> '; // LOGO TUMBLR
salida += '<a href=\"' + usuario + 'rss\" target=\"_blank\"><img src=\"http://img218.imageshack.us/img218/2353/trss.png\" /></a></td>'; // LOGO RSS
salida += '<td style=\"text-align:right;\"><span class=\"navegarTumblr\"><a href=\"javascript:navegaTU();\">siguiente</a></span></td></tr>';
salida += '</tbody></table>';
// luego, el contenido del post a mostrar
salida += contenido;
// por ultimo, el enlace directo a ese post
salida += '<div id=\"verTumblr\"><a target=\"_blank\" href=\"' + elPost.url + '\">ver post</a></div>';
// y lo guardamos en una lista
listaTU[contarAux] = salida;
contenido = "";
salida = "";
contarAux =contarAux +1;
}
}
}
// cuando terminamos de leer, mostramos el ultimo post publicado
maxsTU=contarAux;
document.getElementById('contenedorTumblr').innerHTML = listaTU[0];
}

function navegaTU() {
actualTU=actualTU+1;
if (actualTU==maxsTU) {
actualTU=0;
}
document.getElementById('contenedorTumblr').innerHTML = listaTU[actualTU];
}

//]]>
</script>
<script src='http://NOMBRE.tumblr.com/api/read/json?callback=tumblrCallback&amp;num=10' type='text/javascript'/>

Allí sólo debemos configurar dos datos:
// --------------- datos a definir usuario ---------------
var usuario = "http://NOMBRE.tumblr.com/"; // la URL de Tumblr (colocar barra final)
var cuantosPosts = 10; // cantidad de posts a leer
// --------------- final datos a definir --------------------
lo mismo haremos en el script final que es la llamada a JSON.

Un detalle (uno de tantos) que puede modificarse es cambiar el tamaño de las miniaturas de las entradas de tipo PHOTO:
// pueden ser 75, 100, 250, 400 o 500
photoURL = elPost["photo-url-250"];
Si quisieramos mostrar los videos y no el enlace a estos, deberíamos cambiar esto:
contenido= '<div class=\"TumblrVideo\">VIDEO<span>' + textoPlano  + '</span></div>';
por algo así:
contenido= '<div class="\TumblrVideo\">' + elPost["video-player"] + '</div>';
En el script hay dos imágenes ya alojadas en ImageShack, dos logos que pueden ser cambidos por cualquier otro. Tanto el script como las imágenes se encuentran contenidos en este archivo ZIP

Cada sector creado tiene un ID o una clase CSS para poder personalizar la salida así que podemos agregar el estilo antes de </head>.

<style>
#contenedorTumblr { /* el contenedor en si mismo */
font-size: 11px;
}
table.enlacesTumblr { /* la línea superior con enlaces */
margin: 5px 0;
padding: 0 10px;
width: 100%;
}
.navegarTumblr { /* enlace navegación entre tumblrs */
display: block;
text-align: right;
}
#verTumblr { /* la línea inferior */
margin-top: 5px;
text-align: right;
}
#verTumblr a {
margin: 5px 0;
padding: 0 10px;
text-align: right;
}
div.TumblrPhoto { /* un post de tipo PHOTO */
margin: 0 auto;
text-align: center;
}
div.TumblrCita { /* un post de tipo QUOTE */
margin: 0 auto;
text-align: right;
width: 90%;
}
div.TumblrCita span {
display: block;
font-style: italic;
text-align: center;
}
div.TumblrCita i {
font-style: normal;
font-weight: bold;
}
div.TumblrLink { /* un post de tipo LINK */
text-align: center;
}
div.TumblrVideo { /* un post de tipo VIDEO */
font-weight: bold;
text-align: center;
}
div.TumblrVideo span {
font-weight: normal;
}
div.TumblrAudio { /* un post de tipo AUDIO */
text-align:center;
}
div.TumblrRegular { /* un post de tipo REGULAR */
font-size: 11px;
}

</style>


0

Columnas en el Footer

Hace unos días veíamos una forma de dar utilidad al footer, le añadíamos opción para añadir gadgets y a modo decorativo una imagen de fondo. Adelantaba que si la idea era añadir varios gadgets lo mejor era crear divisiones de forma que el contenido quedara ordenado.


Para empezar lo que haremos será añadir las siguientes líneas de código justo antes de ]]></b:skin>

#footer-columna-contenedor {
clear:both;
}
.footer-columna {
padding: 10px;
}

Luego dejaremos el footer libre de gadgets si es que los tenemos, podemos hacer dos cosas arrastrarlos a la sidebar provisionalmente o copiar las líneas de código pertenecientes a cada gadget y pegarlas en el bloc de notas para más tarde volver a añadirlos.


Las líneas de código empiezan todas con b:widget más o menos así:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

Una vez dejamos el footer libre buscamos al final de la plantilla lo siguiente:

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

De no tener la opción de añadir gadgets sería algo así:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

En ambos casos lo que haremos será sustituir la línea en negrita por lo siguiente:

<div id='footer-columna-contenedor'>

<div id='footer-izquierdo' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer-centro' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer-derecho' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: none;'>

<b:section class='footer' id='col-bottom' preferred='yes'/>

</div>

<div style='clear:both;'/>

</div>

Miramos en vista previa para ver si es posible guardar los cambios y si es así guardamos.
En plantilla de diseño lo veremos de esta forma.


Ahora vamos a personalizar ese nuevo espacio.
Vamos otra vez justo antes de ]]></b:skin> y añadimos lo siguiente:

#col1{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col1 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}
#col2{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col2 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}
#col3{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col3 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}

Nos familiarizamos con los estilos intentando conocer a qué parte corresponde cada uno para poder personalizarlos.

Contenido
footer izquierdo col1
footer centro col2
footer derecho col3

Títulos
footer izquierdo col1 h2
footer centro col2 h2
footer derecho col3 h2

Con background estamos añadiendo color de fondo, en border añadimos estilos al borde y utilizamos color para el color del texto.

Guardamos los cambios y en plantilla de diseño añadimos esos gadgets que tenemos en espera o los que pensamos añadir.El resultado sería algo así.

Un poco triste y aburrido ¿verdad? vamos a darle un poco de vidilla pero primero le daremos color a ese fondo, buscamos las primeras líneas que añadimos y le damos color.

#footer-columna-contenedor {
background:#000;
clear:both;
}

Podemos eliminar el color de fondo y borde de los gadgets y añadir una imagen en su lugar.

#footer-columna-contenedor {
background-image:url('url-de-tu-imagen');
clear:both;
}

Se puede seguir jugando...






Más ejemplos de footer sencillos de crear.


0

Verificar que las URLs son correctas

La mayor parte de las veces, cuando me consultan sobre algún problema, el error es siempre el mismo, la dirección URL de algún archivo es errónea.

La URL de "algo" es eso que vemos en la barra de direcciones del navegador y en Blogger, siempre debe comenzar con http://

Sabiendo esto, debería ser sencillo verificar si la dirección que queremos usar es correcta o incorrecta, bastaría copiarla y pegarla en esa barra, pulsar Enter y ver dónde nos lleva.

Como el problema surge con archivos que queremos usar, lo que debemos ver es qué pasa cuando colocamos esa dirección. Por ejemplo, si se trata de imágenes, lo que deberíamos ver es la imagen en si misma, sola, sin nada más, en Firefox, incluso, el navegador nos mostrará su tamaño.


Supongamos que usamos ImageShack, subimos una imagen y al terminar, nos mostrará varias alternativas (en este momento se han simplificado bastante). De todas ellas, sólo una es la imagen en si, la que dice Direct link to image, la otra, Short link to image, nos abrirá una página.

http://img13.imageshack.us/img13/6812/esqueletob.gif
http://yfrog.com/0desqueletobg

Lo mismo ocurrirá con cualquier otro servicio. Por ejemplo, en Fileden, apenas la subimos, nos dará varias alternativas, una etiqueta, un enlace, etc,; también allí, el dato que nos importa es sólo uno: Direct URLs

http://www.fileden.com/files/2009/3/26/2379410/esqueleto.gif

En todos los servicios ocurrirá lo mismo; nos ofreceran varias opciones con distintos formatos y siempre, deberemos elegir la que indique un acceso directo al archivo aunque hay que tener en centa que, si bien hay muchísimos servicios que permiten alojar archivos, no todos permiten el uso directo de esos archivos (hotlink).

Si no son imágenes, verificarlo es igual de sencillo pero no siempre se nos mostrará el contenido en el navegador, dependerá de cuál usamos o  qué plugins, extensiones o configuración estemos usando. La regla general es, si el archivo se ve o si aparece la ventana para descargarlo, la URL es correcta en cambio si se abre una página web, la URL es incorrecta.

0

¿Corbatas? Corbatas


Sí. Está muy bien eso de la mini cámara espía en la corbata de la que habla SpamLoco pero, a decir verdad, prefiero algo un poco más informal:



Y, en todo caso, si quiero ponerme serio me compraría la corbata solar de la Iowa State University idea


REFERENCIAS:crookedbrains.net

0

"Volver arriba" con efecto deslizante usando Scriptaculous

Flecha Ir arriba
Se trata de colocar una flechita o icono que nos posibilite el volver a la parte superior del blog.
Ya vimos antes como colocar el "volver arriba" en cada entrada y lo que conseguiremos ahora, es esto mismo pero con un efecto deslizante muy elegante.
Podéis comprobar como funciona una vez aplicado, si pincháis en cualquiera de las flechitas que veis a la derecha en el post-footer (pie de entradas) de mi blog.

"Volver arriba" desde el pie de cada entrada (post-footer).

[1] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en algún efecto, no es necesario volver a incluirlo):
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

[2] Expandimos las plantillas de artilugios y localizamos más o menos esta línea (es donde yo lo he colocado en mi blog):
<p class='post-footer-line post-footer-line-1'>

En algunas plantillas podría mostrarse de esta manera:
<div class='post-footer-line post-footer-line-1'>

[3] Debajo de esa línea colocamos el código para la flechita:
<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img align='right' alt='Volver arriba' src='URL_DEL_ICONO_FLECHA' title='Volver arriba'/></a>

"Volver Arriba" desde la parte inferior derecha de la página

[1] Usaremos el mismo sistema que para incluir la flecha o el icono al pie de cada entrada, es decir, incluimos el código del paso [1] si no lo tenemos incluido de usos anteriores.

[2] Desde Edición HTML bajamos casi hasta el final del código de la plantilla y pegamos este código antes de </body>:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='URL_DE_LA_FLECHA_ICONO' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>

0

Tumblr y Blogger (Parte 1)

Hace mucho que existen los llamados tumblelogs a los que la Wikipedia define como "blogs menos estructurados". Me gustó la descripción: "un tumblelog también tiene algo de esbozo, de apunte, de idea. Son las semillas de futuros post en un blog convencional, una especie de cuaderno de notas breves y personales que no admite comentarios ni intromisiones a pesar de ser público."

Un poco más seriamente, Jason Kottke dice:

Un tumblelog es un flujo de conciencia improvisado, un poco al estilo de las listas de enlaces de los linklog pero con más cosas además de enlaces. Me recuerdan a un antiguo estilo de blogs, en la época en que la gente los hacía a mano, antes de que Movable Type obligara a poner los títulos de los posteos, las entradas de los blogs se convirtieran en pequeños artículos de revistas, y los posteos pertenecieran a una conversación distribuida a través de toda la blogosfera. Robot Wisdom y Bifurcated Rivets son dos weblogs de un estilo más antiguo, que se parecen mucho a estos tumblelogs con mínimos comentarios, muy poca charla entre blogs, el mínimo suspiro de un algo terminado y publicado, casi pura edición ... realmente sólo una forma de publicar rápidamente las "cosas" con las que te encuentras cada día en la web.

El servicio gratuito más conocido (no el único) es Tumblr.com y hace tiempo que lo vengo usando, desde que cambió a su nueva versión muy mejorada

Como todas estas cosas de la web, sólo son una herramienta, tan buena o tan mala, tan útil o tan inútil como cualquier otra. En todo caso, lo bueno de esto es saber que existen y que están a nuestra disposición, aunque sólo sea para divertirse un rato.

La mejor forma de conocer los detalles es leer la wiki en castellano pero, tal vez, mejor que eso es entrar, crear uno y mirar. Es simple, elegimos un nombre y hacemos click en Get Started. Nos pedirán un email, que elijamos una contraseña y la URL que usaremos que, por defecto, será la misma del nombre elegido. Click en el botón inferior y listo.


Voy a cerrar las ventanas que se abren y que me guian para configurar las cosas. Eso lo podemos hacer en cualquier otro momento. Allí estamos, entonces en un escritorio (dashboard) simple donde nos mostrará qué cosas podemos hacer y aquí está justamente, la diferencia entre un tumblelog y un blog. Arriba hay unos íconos con los diferentes modelos de entradas que podemos hacer:

  • Text: es la alternativa más amplia, permite colocar un título y un texto desde un editor interno. Admite formatos y códigos HTML. En el ejemplo, incluso he puesto un script.
  • Photo: sirve para publicar imágenes (JPG, GIF, PNG o BMP 10MB máximo), las subimos desde nuestra PC o indicamos alguna que ya esté en la web en cuyo caso, también se alojaraá allí así que no se crean problemas de hotlink. La imagen podemos transformarla en un enlace o bien agregarle textos (caption) con el editor.
  • Quote: se usa para mostrar "citas", textos que se muestran en un formato diferente previamente establecido.
  • Link: los enlaces son eso, direcciones de lugares que nos interesen a los cuales podemos agregar descripciones.
  • Chat: no es un chat en si sino una "conversación", un diálogo que, al igual que los anteriores, se es un texto con cierto formato pre-establecido.
  • Audio: lo usamos para agregar archivos MP3 (10MB máximo) desde nuestra PC o desde algún sitio en la web con una sola limitación, sólo podemos subir uno por día. El resultado será una entrada con un reproductor ya incorporado.
  • Video: el servicio está pensado para usar una cuenta de Vimeo y si queremos subir alguno (50MB máximo), debemos tener una cuenta allí pero también podemos insertar videos de casi cualquier otro servicio, colocando la URL y eventualmente, también podemos colocar el código HTML.
En todos los casos, si desplegamos Advanced Options, veremos algunas alternativas extras
  • Publishing Options nos permite definir si el post será publicado de inmediato, si será programado (pondremos una fecha), si lo queremos guardar como borrador o si lo queremos hacer privado.
  • Tag nos permite agregar etiquetas a las entradas.
  • Set a custom post URL nos permite modificar la URL de la entrada, si no lo hacemos, será un número.
Probablemente, luego de experimentar un poco con estas cosas, decidamos empezar a personalizar nuestro blogcito así que, primero que nada, vamos a lo general: Account | Preferences desde donde podemos modificar nuestros datos, sincronizarlo con Twitter y, sobre todo, definir el modo del editor de textos que puede ser rich text editor (el valor por defecto), plain text/HTML (escribimos HTML de manera directa) o Markdown que parece interesante ya que no cambia los códigos como los otros modos:


La clave de nuestro blog está en la opción Customize, desde allí podremos cambiarlo por completo.
  • Info nos da la posibilidad de colocar el título del blog y eventualmente una descripción; agregar una imagen que servirá como avatar e incluso, establecer un dominio propio
  • Feeds nos permite importar hasta cinco servicios (via RSS) para agregar sus contenidos de manera automática.
  • Advanced sirve para establecer ciertas opciones como la fecha, agregar CSS (dependiendo del tema en uso), establecer la cantidad de entradas por página, habilitar la vista de imágenes en alta resolución, definir si los enlaces se abrirán en una nueva ventana, crear feeds reducidos, permitir la creación de URLs personales, agregar nuestro sitio a diferentes directorios y buscadores, etc.

La parte de diseño se define con dos opciones; con Appearance cambiamos algunos detalles menores como los colores de fondo; con Theme podemos seleccionar la "plantilla" que vamos a utilizar que, puede ser cualquiera de las allí listadas pero también podemos buscar en la web y usar otra. Para esto, debemos hacer click en Use custom HTML y allí, pegar el contenido del tema que queremos utilizar que, por lo general, es el contenido de un archivo TXT.

¿Dónde buscamos temas? El mismo Tumblr tiene una página donde los usuarios pueden agregar los que hayan creado pero en la web hay cientos de ellos y basta hacer una búsqueda en Google para encontrarlos; un buen ejemplo puede verse en speckyboy.com.

Tal como ocurre con cualquier otro servicio, podemos cambiar el tema cuantas veces se nos ocurra e incluso, crearlo nosotros mismos o modificar alguno. Para esto, hay una página explicativa donde se muestra la sintaxis de las distintas instrucciones. Quien haya modificado una plantilla de Blogger, no tendrá demasiados problemas en entender la idea (será tan difícil como acá pero, bueno ...)

Así, sin más, nuestro blog está listo pero la flexibilidad del sistema nos permite múltiples agregados. Algunos emplos y herramientas:
Sencillez, rapidez, son las dos virtudes principales de este tipo de servicio pero, no son las únicas. Me gusta la idea de la integración con otros servicios y que sea abierto hasta el extremo de ser muy flexible, incluye feeds y tiene URLs accesibles a cualquiera sin necesidad de tener una cuenta (léase Facebook). No es una panacea pero funciona muy pero muy bien ¿Se nota que me gusta?

Como poseen un API público, no es nada complicado integrarlo a Blogger así que a eso nos dedicaremos en la próxima entrada aunque algo de eso puede en la sidebar de mi blog de pruebas

0

Texturas de tejido gratuitas


» Visto en DESIGNM.AG


0

Las fuentes de texto y sus unidades

Las unidades que utilizamos para establecer el tamaño de las fuentes de los textos de una página web siempre han despertado polémicas porque hay opiniones para todos los gustos. En resumen, las posibilidades se limitan a dos tipos básicos, absolutas y relativas.

Las absolutas tienen como referencia las impresoras: pt (puntos), pc (picas), in (inches/pulgadas), cm (centímetros) y mm (milímetros).

Las relativas tienen como referencia la resolución de la pantalla: px (pixeles) o bien al tamaño de otras fuentes definidas antes: % (porcentaje). em (em space), ex (x space); más una variante, palabras clave: xx-small | x-small | small | medium | large | x-large | xx-large que son relativas a la fuente definida por el navegador que usamos.

Algo con lo que la mayoría de los desarrolladores está de acuerdo es que el uso de puntos (pt) no es lo más recomendado ya que es una medida que sólo tiene sentido para imprimir, si bien hay una relación de puntos por pulgada eso no es válido en una pantalla y sólo es aplicable al papel.

Descartada entonces esa unidad y todas las absolutas que, en realidad, sólo deberían usarse cuando hablamos de impresoras; en una página web, deberíamos centramos en el uso de las llamadas relativas y entre ellas, sólo hay dos que permiten controlar los tamaños con cierta claridad: px y em ¿cuál usar?

Hay que entender que em es una medida relativa a otra fuente así que 1em, así sólo, no significa demasiado, estamos diciendo que el tamaño de algo es igual al tamaño de otra fuente ¿de cuál? de la que está definida por el el elemento contenedor y si no hay ninguna, la que use el navegador así que, si vamos a manejarnos con ellas, lo lógico es definir alguna con px, aunque sea, la del body:
body {
.......
font-size: 14px;
}
Ahora sí, hecho esto, podemos decir que una etiqueta tendrá una fuente que será igual, menor o mayor que esa:
h2 {font-size: 2em;} /* será del doble del tamaño que la definida en body */
small {font-size: 0.8em;} /* será un 80% más chica que la definida en body */
Esto del elemento contenedor y las herencias no es tan complicado como parece aunque a veces, se hace difícil de seguir el rastro (igual que en la vida real). Cuando una etiqueta está dentro de otra, la que la contiene es el elemento padre (parent) y la contenida es el elemento hijo (child):
<div id="bloque_1" style="font-size:20px;">
<div id="bloque_2">
<p> ... este texto tendra 20 pixeles de alto ... </p>
</div>
</div>
En ese caso, P es "hijo" del div bloque_2 y es "nieto" del div bloque_1; la herencia, hace que el tamaño del "abuelo" se traslade al "nieto" sonrisa

Un ejemplo concreto:
<style>
div#ejemplo {font-family:Arial; font-size: 14px;}
div#ejemplo big {font-size: 2em;}
div#ejemplo small {font-size: 0.8em;}
</style>

Este es el texto "normal" que tiene 14 pixeles.
Este es un título más grande
Y este un texto más pequeño

La unidad em es útil cuando hacemos referencia a un elemento "padre". Este método es el aconsejable cuando estamos interesados en mantener cierta compatibilidad con distintas plataformas y navegadores, las fuentes se "escalan" y basta cambiar el tamaño base para cambiar todo el sitio:
div#ejemplo {font-family:Arial; font-size: 18px;}

Este es el texto "normal" que ahora tiene 18 pixeles.
Este es un título más grande
Y este un texto más pequeño

El problema con esta unidad es que ese mismo beneficio es a su vez un contratiempo ya que se pierde cierto control. No veremos las cosas tal como las pensamos, el resultado, variará. Tal vez, un renglón se transforme en dos o un espacio de tamaño fijo sea demasiado grande o demasiado chico para el contenido.

Por el contrario, como px está relacionado con la resolución de la pantalla será más fácil de controlar aunque allí también habrá diferencias porque la misma fuente no se verá igual en distintos sistemas operativos.

Moraleja: no hay soluciones universales y cada uno deberá elegir la que crea más conveniente o le resulte más cómoda.

Por lo general, prefiero usar px y reservar em para casos especiales. Por ejemplo, si quiero crear un bloque de títulos donde establezco un tamaño de fuente en pixeles, es buena idea usar em para definir alturas y separaciones, de tal manera que, si cambiamos la fuente, las proporciones se mantienen.
<style>
.ejemplosTitulos {
background-color: #456;
border: 2px dotted #9AB;
color: #FFF;
font-family: 'Century Gothic','Times New Roman';
font-weight: normal;
height: 2em;
line-height: 2em;
margin: 0 auto;
text-align: center;
width: 400px;
}
</style>

<h5 class="ejemplosTitulos" style="font-size:18px;">El título de algo</h5>
<h5 class="ejemplosTitulos" style="font-size:36px;">El título de algo</h5>

El título de algo

El título de algo

El título de algo

El título de algo

0

Footer - Imagen y color

Los estilos del Footer en una plantilla de Blogger se muestran más o menos así:

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Si nos fijamos el ancho es el mismo que en outer-wrapper

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Comprobaremos que footer y outer-wrapper tienen la misma anchura (width) de no ser así adaptamos el footer a la misma medida de outer-wrapper. Una vez hacemos esa modificación vamos a añadir la opción de nuevos gadgets en el footer.

Nos situamos en plantilla Edición de HTMLy buscamos al final donde dice:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Esa parte la sustituimos por lo siguiente:

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'>
</b:section>
</div>



Con esa opción podemos añadir contenido cómodamente. Si en nuestra plantilla ya lo tenemos omitimos este paso y pasamos al siguiente que es añadir color a esa zona, eso nos dará una idea del espacio que está ocupando.
Buscamos los estilos que vienen a continuación y añadimos lo señalado en negrita.


#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background-color: #6D993A;
height:120px;
}


A ese espacio ya podemos añadirle contenido desde plantilla de diseño, si preferimos que en lugar de color nos muestre una imagen lo que haremos será sustituir donde dice background-color: #6D993A; por background-image:url('url-de-nuestra-imagen');
Si la imagen fuera muy alta lo solucionamos añadiendo height:120px; aumentando o disminuyendo altura según nuestra imagen.



Con este cambio el footer ya tiene otro aspecto y podemos añadir contenido.

Si queremos añadir gadgets lo ideal sería hacerlo en un footer con columnas por aquello de la distribución. Aún así podemos probar a añadir por ejemplo información del autor, los créditos de la plantilla o una pequeña información. Queda a gusto de cada uno...

Para un ejemplo de información y créditos añadiremos los estilos justo antes de ]]></b:skin>


.autor{
float: left;
line-height: 2em;
color:#fff;
padding-left: 20px;
padding-top: 75px;
font-family:Arial, Verdana, Sans-Serif;
font-weight: normal;
font-size:11px
}
.creditos {
float: right;
color: #fff;
line-height: 1.4em;
padding-top: 75px;
padding-right: 20px;
font-family:Arial, Verdana, Sans-Serif;
text-transform:uppercase;
font-weight: normal;
font-size:11px;
text-transform: none;
}

Guardamos los cambios y nos vamos a plantilla de diseño, en un gadget de HTML/JavaScript añadimos:

<div class="autor">
<p> <a href="url-del-blog" title="Texto al pasar el cursor">Gem@ BLOG (aquí tu nombre)</a> 2009 (año) </p>
</div>
<div class="creditos">
<p><a href="url-página-autor">texto enlace</a></p>
</div>

0

Google y el logo de cumpleaños de Morse

Samuel MorseSAMUEL MORSE (1791 – 1872)

El inventor y pintor estadounidense Samuel Finley Breese Morse, nació el 27 de abril de 1791 en Charlestown, Massachussets.

Inventó el telégrafo y el código que lleva su nombre.


Y este es el logo con el que Google celebra el aniversario de su nacimiento.
Logo Google

0

La pasión de Chagall