Tabla de caracteres Unicode

JMiur [E]

La codificación de caracteres es una opción que vemos en cualquier navegador y, por lo general, lo que dice es Unicode(UTF-8) que es un standard para mostrar caracteres de diferentes idiomas que no están disponibles en el juego de caracteres ASCII.

Cuando se usa Blogger, vemos que nuestra plantilla tiene una primera línea que define la codificación de caracteres de nuestro sitio:

<?xml version="1.0" encoding="UTF-8" ?>

y además, de manera automática, agrega esta otra:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

Con esto, ya podemos utilizar esos caracteres especiales que deben ser escritos como códigos. El mismo Blogger los utiliza para algunos de sus elementos; allí veremos cosas como   ▼ ◄ que no son otra cosa que esos códigos.

Hay muchísimos de ellos, tanto para los caracteres de los diferentes idiomas como para símbolos y en unicode.org pueden descargarse archivos PDF que los detallan uno por uno pero, esta es una breve tabla con alguno de ellos:

▲		▲	►		►	▼		▼
◄		◄	■		■	□		□
▣		▣	▤		▤	▥		▥
▦		▦	▧		▧	▨		▨
▩		▩	▪		▪	▫		▫
◊	&loz;	◊	○		○	●		●
☺		☺	☻		☻	☼		☼
Ä	Ä	Ä	ö	ö	ö	Ö	Ö	Ö
ä	ä	ä	ü	ü	ü	Ü	Ü	Ü
ß	ß	ß	€	€	€	¢	¢	¢
£	£	£	¥	¥	¥	¤	¤	¤
₪		₪	♀		♀	♂		♂
♠	&spades;	♠	♤		♤	♣	&clubs;	♣
♧		♧	♥	&hearts;	♥	♡		♡
♦	&diams;	♦	★		★	☆		☆
⌂		⌂	№		№	☎		☎
☏		☏	♨		♨	☜		☜
☞		☞	♩		♩	♪		♪
♫		♫	♬		♬	♭		♭
†		†	‡		‡	←	←	←
↑	↑	↑	→	→	→	↓	↓	↓
↔	↔	↔	↕		↕	↖		↖
↗		↗	↘		↘	↙		↙
			"	"	"	&	&	&
<	<	<	>	>	>	«	«	«
»	»	»	©	©	©	®	®	®
™	™	™	¿	¿	¿	¡	¡	¡
@		@	§	§	§	÷	÷	÷
+		+	-		-	Ω		Ω
±	±	±	×	×	×	√		√
¼	¼	¼	½	½	½	¾	¾	¾
⅓		⅓	⅔		⅔	⅛		⅛
⅜		⅜	⅝		⅝	⅞		⅞
%		%	‰		‰	¹	¹	¹
²	²	²	³	³	³

Mostrar datos de la entrada en la sidebar

Las entradas del blog, título, contenido, pie de página, etc, son agregadas con un widget; más complejo que cualquier otro de los que podemos incluir pero, widget al fin:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
.......
</b:widget>

Obviamente, hay uno solo y desde Diseño | Elementos de la Página no podemos agregar otros; ni siquiera aparece en la lista pero, nada impide que podamos hacerlo manualmente desde la Edición HTML.

¿Y para qué se nos ocurriría agregar otro widget con las entradas del blog? Pués porque sólo allí es donde podemos leer los datos de la entrada y, por ejemplo, de ese modo, podríamos mostrar algunos de ellos en cualquier parte de nuestra página y no necesariamente en el post-footer. Usando esta idea de quiterandom.com, los vamos a mostrar en la sidebar.

Primero que nada, vamos a Diseño | Edición HTML y sin expandir los artilugios para que sea más simple; buscaremos la sección de la sidebar que, por defecto, dirá algo así:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Inmediatamente debajo de eso, agregaremos el siguiente código que ha sido modificado del artículo original para evitar que Blogger nos agregue códigos innecesarios:

<b:widget id='Blog99' locked='false' title='Entradas del blog' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'>
<div class='meta'>
<div class='title'>Leyendo: &quot;<data:post.title/>&quot;.</div>
<div class='comments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/> <data:top.commentLabelPlural/>
</a>
</div>
<div class='labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</div>
<div class='date'>Publicado el <data:post.dateHeader/></div>
<!-- ....... cualquier otro dato que nos interese mostrar -->
</div>
</b:includable>
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
</b:widget>

Lo llamamos Blog99 pero cualquier nombre es admitido. Como se ve, hay muchos includables vacíos porque no los necesitamos pero, no podemos quitarlos ya que si lo hacemos, Blogger los agregará otra vez completos. Sólo necesitamos dos de ellos, los llamados main y post. En el primero, condicionamos todo nuestro nuevo widget para que funcione exclusivamente en páginas individuales y en el segundo, ponemos todo eso que nos interese mostrar. En ese ejemplo hay algunas posibilidades agregadas.

El resto es diseño gráfico. Para eso, agregamos un poco de estilo antes de </b:skin>. Por ejemplo:

/* este es el rectángulo donde mostraremos nuestro widget */
div.meta {
background-color: #141414;
border: 1px solid #333;
padding: 20px;
}
/* las diferentes partes del ejemplo */
div.meta div.title { /* el texto "Leyendo" y el título */ }
div.meta div.comments { /* la cantidad de comentarios */ }
div.meta div.labels { /* las etiquetas */ }
div.meta div.date {  /* la fecha de publicación */ }

La pseudo-clase nth-child

Burbujas con CSS

Algunos ejemplos de burbujas para contener textos, realizadas utilizando sólo CSS3, creados por Nicolas Gallagher. La página con demos tiene muchos más y el archivo de estilo que contiene las definiciones tiene muchos comentarios que las explican.

Duis quis urna nunc, sit amet tincidunt lectus.

.triangle-border {
  background: #FFF;
  border: 5px solid #5A8F00;
  color: #333;
  margin: 1em 0 3em;
  padding: 15px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.triangle-border:before {
  border: 20px solid transparent;
  border-top-color: #5A8F00;
  bottom: -40px;
  content: "\00a0";
  display: block;
  height: 0;
  left: 40px;
  position: absolute;
  width: 0;
}
.triangle-border:after {
  border: 13px solid transparent;
  border-top-color: #FFF;
  bottom: -26px;
  content: "\00a0";
  display: block;
  left: 47px;
  position: absolute;
  height: 0;
  width: 0;
}

.triangle-border.top:before {
  border: 20px solid transparent;
  border-bottom-color:#5A8F00;
  bottom: auto;
  left: auto;
  right: 40px;
  top: -40px;
}
.triangle-border.top:after {
  border: 13px solid transparent;
  border-bottom-color:#FFF;
  bottom: auto;
  left: auto;
  right:47px;
  top: -26px;
}

.triangle-border.left {
  margin-left: 30px;
}
.triangle-border.left:before {
  border-width: 15px 30px;
  border-style: solid;
  border-color: transparent #5A8F00 transparent transparent;
  bottom: auto;
  left: -60px;
  top: 10px;
}
.triangle-border.left:after {
  border-width: 9px 21px;
  border-style: solid;
  border-color: transparent #FFF transparent transparent;
  bottom: auto;
  left: -42px;
  top: 16px;
}

Nulla quis eros dolor, eget tincidunt velit. Nam ultrices magna vitae eros accumsan vestibulum. Morbi quis dui ac justo volutpat sagittis a eget sapien.


.example-right {
  background: #5A8F00;
  background: -moz-linear-gradient(top, #b8db29, #5A8F00);
  background: -o-linear-gradient(top, #b8db29, #5A8F00);
  background: linear-gradient(top, #b8db29, #5A8F00);
  border-radius: 10px;
  color: #FFF;
  margin: 0;
  padding: 15px 30px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.example-right + p {
  margin: 15px 0 2em 85px;
  font-style: italic;
}
.example-right:after {
  border-width: 0 20px 50px 0px;
  border-style: solid;
  border-color: transparent #5a8f00;
  bottom: -50px;
  content: "\00a0";
  display: block;
  left: 50px;
  height: 0;
  position: absolute;
  width: 0;
}

Aliquam scelerisque cursus ante, et lobortis orci elementum in. In commodo ipsum nec leo malesuada aliquet.

.oval-thought-border {
  background: #FFF;
  border:10px solid  #C81E2B;
  color: #333;
  margin: 1em auto 80px;
  padding: 70px 30px;
  position: relative;
  text-align:center;
  -webkit-border-top-left-radius: 240px 140px;
  -webkit-border-top-right-radius: 240px 140px;
  -webkit-border-bottom-right-radius: 240px 140px;
  -webkit-border-bottom-left-radius: 240px 140px;
  -moz-border-radius: 240px / 140px;
  border-radius: 240px / 140px;
}
.oval-thought-border:before {
  background: #FFF;
  border: 10px solid #C81E2B;
  bottom: -40px;
  content: "\00a0";
  height: 50px;
  position: absolute;
  right: 100px;
  width: 50px;
  z-index: 10;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
.oval-thought-border:after {
  background: #FFF;
  border: 10px solid #C81E2B;
  bottom: -60px;
  content: "\00a0";
  height: 25px;
  position: absolute;
  right: 50px;
  width: 25px;
  z-index: 10;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

Proximamente: Botones para compartir en Blogger

Si miran su plantilla de Blogger y la expanden, verán que en el Widget Blog hay un nuevo INCLUDABLE que, aparentemente, se ha agregado a todas, ya sean estas las originales o no.

El código que tiene es el siguiente:

<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span>
</a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.blogThisMsg + &quot;\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
</a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToFacebookMsg + &quot;\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
</a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToBuzzMsg + &quot;\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
</a>
</b:if>
</b:includable>

Aparentemente, lo que va ha hacer eso es agregar cinco íconos para compartir entradas con diferentes servicios; en este caso, enviarlas por e-mail, BlogThis, Twitter, Facebook y Google Buzz.

Por ahora, los enlaces no parecen estar funcionando y es probable que requiera que marquemos alguna opción en el widget ya que todo el código está condicionado. De todos modos, podemos espiar.

Le quitamos la condición y lo agregamos, por ejemplo, en el footer de los posts:

<b:include data='post' name='shareButtons'/>

Lo que veríamos seria esto:

Se adapta bien a cualquier color de fondo, es bastante discreto, tiene un efecto hover y al hacer click se abre el enlace en una nueva ventana pero, no vale la pena que lo hagan porque aún no enlaza nada. Habrá que esperar hasta que lo activen.