Hacker of the Web
Tus ideas en código!...y mas

[+/-]
FeedBurner publica tus posts en Twitter!!


FeedBurner se integra a Twitter

Una buena noticia para lo Bloggers, pues gracias a esta nueva característica Google publicará las nuevas actualizaciones de nuestros blogs en Twitter.

Con esta característica se ahorra el tener que publicar en Twitter los títulos de las entradas nuevas y ademas tener que acortar las URL's pues para eso Google puso a disposición un nuevo servicio llamado Google URL Shortener at goo.gl para acortar las url de nuestras entradas de manera totalmente automática, aunque solo esta disponible para servicios internos de Google y no al público en general.

[+/-]
Nuevas caracteristicas del buscador de Google

Universal Search en sugerencias de Google

Google ha implementado algunas características a su buscador, afirman en su blog oficial que han estado trabajando para satisfacer la necesidad de obtener información, lo mas rápido posible. Se dice que a los de Google les excita la velocidad, solo hay que revisar algunas de las nuevos proyectos de Google para darse cuenta.

Y para muestra tenemos la extensión de Google Chrome: Google Quick Scroll la cual permite que al buscar cualquier cosa en el buscador de Google y al hacer click en algún resultado ir directamente a la parte de la página donde se encuentra lo que busca el usuario.

[+/-]
Menu de Imagenes aleatorias II

Pues como todo va mejorando con el tiempo, o al menos eso parece, ya habíamos posteado como colocar imagenes aleatorias con un enlace en ellas, pero ahora es posible colocarles un titulo, es decir, que al pasar el mouse aparezca un tooltip con el titulo de la imagen o el titulo de la página a la que se dirige:

[+/-]
Enciclopedia del RSS; ¿Que es RSS?

Si eres de esos que aún no sabes que es la sindicación RSS, en esta página web encontrarás todo lo que necesitas saber acerca de esta tecnología. Cataloga toda la información y la información por secciones muy bien desglosado:
RSS explicado

[+/-]
Google Publica un DNS mas rapido

DNS de Google


Google sigue tratando la forma de hacerse con Internet, primero salio al aire que estaba en fase de desarrollo su protocolo de Internet SPDY:// que se dice podría reemplazar el actual protocolo HTTP://.

Y ahora publica un DNS que podría acelerar la conexión a Internet, un DNS es algun tipo de traductor que transforma las direcciones IP en nombres legibles y viceversa. Este sistema se integra en cualquier dispositivo capaz de conectarse a Internet.

[+/-]
SPDY de Google, podria ser que reemplace al HTTP

Chromium


Este nuevo proyecto de Google recién sacado a luz, promete ser el sustituto de http, pues es compatible con el anterior y puede ser que salga publicamente muy pronto.

[+/-]
Google Chrome por fin tiene página oficial de extensiones

Chrome Extensions

Google pone a disposición pública un sitio de descarga e instalación de extensiones para su navegador y centro de su sistema operativo Chrome. Hasta hoy Google solo había abierto la página para desarrolladores que desearan subir extensiones a dicha página.

[+/-]
Fondos Copados; 40mil de los mejores fondos HD

Fondos Copados

Una de las mejores paginas web, donde encontrarás imágenes para utilizar de WallPapers, pero son de libre uso, así que nadie nos impide usarlas en alguna página web xD!!

[+/-]
Menu de imágenes aleatorias

Ya habíamos publicado una especie de post donde explicaba como colocar un enlace aleatorio, en esta ocasión será ahora una imagen con enlace la que aparecerá aleatoriamente, podría ser de cualquier tema o tamaño.

[+/-]
Google Chrome OS; Primeras impresiones

Desde que anunció Google la próxima llegada de Google Chrome OS, habíamos estado esperado por saber como sería al menos en el aspecto. Y ahora Google da a conocer el código fuente de dicho sistema operativo, con el cual buscan revolucionar el termino de sistema operativo con la caracterización de Google: Fácil, Simple y Seguro.

[+/-]
Bing integra funcionalidades desde WolframAlpha

Bing el nuevo buscador de Microsoft busca de alguna manera, de arrebatar algunos usuarios de Google con la integración de Wolfram Alpha, reciente motor de búsqueda computacional semántico, ofreciendo resultados mas exactos, al menos en áreas como nutrición, salud, matemáticas y hechos históricos.

Bing integra funcionalidades de Wolfram Alpha

[+/-]
Youtube anade subtitulos automaticamente generados

Google sigue mejorando de manera imparable sus servicios y para muestra ha agregado algunas nuevas funcionalidades de idiomas a los videos alojados en YouTube:

[+/-]
TwitCritics; Calificador de Películas basado en Tweets

TwitCritics; Calificador de Películas basado en Tweets

Twitter es una herramienta realmente potente ya que puede utilizarse de la forma en que la imaginación llegue. Para muestra ahora tenemos la herramienta TwitCritics, que aprovecha el flujo de referencias buenas o malas, de películas que circulan en Twitter.

TwitCritics crea un índice de la popularidad de la película. Al hacer clic en una película le da una vista del cartel de la película, el rango actual, y una lista de los tweets más recientes relacionados con ella. Así esta herramienta logra obtener resultados en tiempo real.

Imagen individual de la pelicula

El sistema parece lo suficientemente exacto como para darle una visión sólida de la opinión pública sobre las películas actuales.


Tendrás una forma mas confiable para elegir bien, cual película veras en el cine o si gastaras bien tu dinero al comprar una?

[+/-]
Twitter en español

Twitter en español


Hasta hoy la red social de microblogging del momento Twitter, solo estaba disponible en los idiomas inglés y japonés, pero gracias a usuarios hispanoamericanos voluntarios que se dieron a la tarea de traducir la página ya esta disponible en español.

Según el blog oficial de la plataforma de microblogging, Twitter no se ha tardado ni un mes en completar su traducción al español, iniciada el 8 de octubre mismo día en que se dispuso una aplicación que permitía a voluntarios traducir el sitio en varios idiomas como español, francés, italiano y también alemán.

El Palacio de la Moncloa, sede del Gobierno español y residencia del presidente José Luis Rodríguez Zapatero, fue uno de los usuarios felicitados por Twitter por haber confiado en las posibilidades de este servicio antes de que fuera lanzado en español.


Así que si Twitter te gustaba en ingles, pero no podías configurarlo como te gusta por que no entendías inglés ahora ya esta en español!!

[+/-]
Buscador interno inteligente

Ahora toca el turno a un buscador interno inteligente. No es que sea inteligente y te diga lo que debes buscar. Si no que es parecido al funcionamiento de los buscadores de Google:



Como puedes ver si haces clic en la caja del buscador, esta se pone en blanco y si no escribes nada esta vuelve a su estado original. Esto se debe a un algoritmo en JavaScript que me di a la tarea de programar.

Si te interesa agregar a tu blog el buscador, puedes agregar el siguiente código a cualquier gadget o a la plantilla directamente:
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='b-query' maxlength='255' name='q' onblur='if(this.value==&quot;&quot;)this.value=&quot;Haga su busqueda&quot;;else;this.value=this.value' onfocus='if(this.value==&quot;Haga su busqueda&quot;)this.value=&quot;&quot;;else;this.value=this.value' size='15' type='text' value='Haga su busqueda'/>
<input class='blue' id='b-searchbtn' type='submit' value='Buscar'/>
</form>

Tambien puedes colocar en vez de un botón con texto una imagen:




Si te interesa agregar a tu blog el buscador, puedes ver la entrada completa!!

[+/-]
Nuevas barras de navegacion de Blogger

Muchísimos usuarios de Blogger la ocultan, ya sea por que no combina con los colores de nuestros diseños o por que se vea mas profesional. A los programadores de Blogger se les prendió el foco y nos traen dos nuevos colores de navbar:

Colores de navbar de Blogger

Estos colores son el Claro Transparente y el Oscuro Transparente.

Así esta barra podrá amoldarse perfectamente a cualquier color o imagen de fondo. La funcionalidad de ser semi-transparente funciona solo en los navegadores modernos, pues utiliza alpha-bending. Así que en navegadores como IE6 será una barra común y corriente.

Para habilitarla tendrás que entrar en la opción Diseño de tu blog y hacer clic en Editar del gadget "Barra de navegación" que casi siempre esta de color azul:

Editar la barra de navegación

Y elegir la que mas te guste.


Y si tenías la barra de navegación oculta, puedes volver a mostrarla, entrando en

[+/-]
Gadget unico de Comentarios recientes.

Comentarios recientes, es un gadget que utiliza el feed del blog en el que se instala para poder recopilar los comentarios. Y los formatea de manera que puedan mostrarse. Estas técnicas de autopromoción se utilizan mucho en las web/blogs ya que permiten al lector econtrar posts mas escondidos, pues con el tiempo se van olvidando o enterrando los primeros posts.

Comentarios recientes


Ahora me encontré que en SantyWeb tengo solo un post de mostrar comentarios recientes y también encontré otra manera de hacerlo mucho mas sencillo, es decir, solo agregando un gadget!!.

[+/-]
CSSTXT; Manipular el estilo de tus textos

CSSTXT

Herramienta que permite manipular de manera muy sencilla las diversas propiedades que tiene un texto por defecto en CSS. Esta forma de manipular estilos CSS es tan sencilla que cualquier persona puede lograr los efectos que quiera en cuestión de algunos minutos.

En la página dan los códigos fuente CSS que el usuario va creando conforme manipula los controles. Con lo que para colocar esos estilos solo habría que copiar lo siguiente:

[+/-]
Blogger: Mostrar entradas populares

Hace poco me preguntaron si conocía algún método para mostrar las entradas mas populares o mas comentadas de nuestro blog. A lo cual respondí que no, pero pronto desarrollaría una. Así que ahora les traigo un método bastante sencillo de usar y muy funcional.

Entradas expandibles

Utiliza el feed del blog para conseguir los datos necesarios, después los almacena en una matriz. Donde los ordena para posteriormente mostrarlas. Así que los pasos para agregar el gadget único son los siguientes:

[+/-]
Mostrar avatar del autor, en los comentarios

Hace poco que Blogger introdujo la opción de habilitar los avatares en los comentarios del Blog. Algo que muchísimos Bloggers habíamos estado esperando ansiosamente. Y la utilización es simple:
[1] Entra en el panel de Configuración de tu blog.
[2] Entra en sección de Comentarios.

Configuracion de comentarios


[3] Selecciona la opción si de Mostrar imágenes de prefil en los comentarios

Avatares


Solo revisa las entradas de tu blog, y tendrás los avatares de tus comentaristas junto a sus comentarios!!!

[4] Pero existe la mínima posibilidad de que no se muestren, y para eso necesitarás entrar en Diseño>Edicion de HTML>Expandir plantillas de artilugios
[5] Donde buscarás:

[+/-]
Resaltar comentarios del autor del Post

Comentarios

El poder resaltar los comentarios hechos por el autor del Blog, en si, no es una funcionalidad de Blogger. Pero se puede lograr manipulando algunas variables que maneja el sistema. Comenzaremos copiando el código que toda plantilla mínima debe tener en la parte de los comentarios, en Notepad o algún editor de texto plano:

[+/-]
Ahora nativo de Blogger: Leer mas

Es algo sumamente parecido a Leer mas solo en algunas entradas, pero ahora esta integrado en Blogger. Lo que significa que no necesitarás mas que colocar SOLO UNA etiqueta dentro del post para que sea visible un enlace hacia la entrada completa.

[+/-]
Optimización de Imágenes

La optimización de imágenes es muy importante a la hora de la carga de una página web, entre mas imágenes tengas en una página web no importando de que tamaño sean, tardará mas tiempo. Pues el navegador las irá mostrando de una en una junto con los scripts de la página y el código CSS.


Unica imagen


Y para reducir el número de imágenes existe un método en CSS para posicionar imágenes mediante coordenadas X y Y. Permitiendo colocar varias imágenes en una misma y poder mostrarlas por separado.

[+/-]
Mozilla Firefox 4.0 para el 2010

Mozilla version 4.0

Mozilla sigue dando de que hablar, hace unos días me enteré de que Mozilla esta trabajando en Firefox en su versión 4.0, que será muy similar a Chrome pues la barra de marcadores, de estado y la de menús serán excluidas de la interfase dando una navegación mas simple y sencilla.

[+/-]
Enlaces de navegacion con nombre de entrada

Aunque para algunos es muy poco para mi es un pequeño gran salto, pues hace un año que cree este blog sin saber absolutamente nada de los lenguajes web xD. Ahora soy todo un programador y hablando de desarrollar para es post numero 100, les comparto un hack, que si bien me resultó fácil desarrollarlo nunca lo he visto en otro blog de Blogger, así que disfrutenlo en este post número 100 xD!!

[1] Para añadirlo a tu blog, necesitas entrar en Diseño>Edicion HTML>Expandir plantillas de artilugios

[2] Despues buscar con Ctrl+F el siguiente texto:
<div class='blog-pager' id='blog-pager'>

Que es el que normalmente tienen las plantillas de Blogger, justo despues debes agregar el código Javascript:
        <!--  links con titulos -->
<script type='text/javascript'>
txtLink = function(lnk) {
var t = lnk.split(&quot;/&quot;);
t = t[5];
t = t.split(&quot;.html&quot;);
t = t[0];
t = t.replace(/-/g,&quot; &quot;);
t = (t.length &gt; 35) ? t.charAt(0).toUpperCase()+ t.substring(1,30) : t.charAt(0).toUpperCase()+ t.substring(1,t.length-2);
document.write(t + &#39;...&#39;);
}
</script>
<!-- terminan los links con titulos -->

[3] Despues de agregar el codigo, debes buscar esto otro:
<b:if cond='data:newerPageUrl'>

Donde verás algo como esto:
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
[....]
</a>
</span>
</b:if>

Que debes modificar de la siguiente manera:
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
[....]
<b:else/>
<script type='text/javascript'>txtLink(&#39;<data:newerPageUrl/>&#39;);</script>
</b:if>

</a>
</span>
</b:if>

[4] Por ultimo, necesitarás buscar esto:
<b:if cond='data:olderPageUrl'>

Que verás seguramente esto o algo por el estilo:
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
[....]
</a>
</span>
</b:if>

Que necesitarás modificar de la siguiente forma:
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
[....]
<b:else/>
<script type='text/javascript'>txtLink(&#39;<data:olderPageUrl/>&#39;);</script>
</b:if>

</a>
</span>
</b:if>

[+/-]
Padding y Margin en CSS

En el lenguaje CSS existen estos dos atributos para cada elemento html en una página web, y debido a que los funcionamientos de estos atributos es un tanto similar puede existir una alguna confusión a la hora de utilizarlos. Si bien esta claro que cada atributo crea un espacio alrededor del elemento pero cada uno lo hace a su manera.

[+/-]
Tipografia en CSS

Como ya antes había publicado, el uso de fuente va muy ligado a la página y al tema de la misma, siempre sin descuidar el tamaño de la fuente. Aquí veremos como implementar la fuente de tu elección en una página web mediante CSS.

Al definir una fuente en CSS, para un selector cualquiera, se utiliza la siguiente propiedad o atributo:

[+/-]
Tipografia y uso de fuentes

En esta ocasión tocaremos un punto muy importante tal vez tan importante como los colores a utilizar a la hora de diseñar una página web. Son los tipos de fuente o tipografía.

Las fuentes mas utilizadas en el Diseño de páginas web son:
Helvética
Trajan
Garamond
Futura
Bodoni
Bickham Script Pro
Frutiger

[+/-]
Screen Tweet; comparte tus videos en Twitter

Y seguimos, como en un proceso de recaudación, con otra herramienta que nace al rededor o en base a la red social que ha crecido en popularidad de manera sorprendente, incluso mas rápido de lo que lo hizo Google.

Sreen Tweet

Una muy sencilla, pero en muchas ocaciones muy util. Si te interesa entra aqui!!

[+/-]
Blogger cumple 10 años

Una de las plataformas mas importante de la blogósfera, Blogger. Cumplirá en el mes de agosto 10 años de ofrecer un servicio gratuito y totalmente personalizable, para compartir lo que quieras en un blog.

Blogger cumple 10 años

Algunos datos interesantes de Blogger:
  • Cada minuto de cada dia, son publicadas 250,000 palabras en Blogger.
  • Millones de personas en todo el mundo utilizan Blogger para publicar en su blog cada semana
  • Cerca de la tercera parte de los usuarios de Blogger, son de fuera de los Estados Unidos(en orden ascendente: Brasil, Turquía, España, Canadá, Reino Unido, etc.)
  • El tema mas popular entre los usuarios de Blogger, es el fútbol soccer.


Sin duda una gran herramienta, aunque a veces, nos saca de quicio a algunos Blogger. Pero de igual manera ojalá y que cumpla muchos años mas xD!!

Referencias:
Oficial Google Blog

[+/-]
El fondo en una página web

Sabemos que es un tanto difícil decidirse a la hora de escoger un fondo para tu página web, pues es parte fundamental y crucial para cada pagina y para los lectores de dicha página.

Aquí encontrarás lo que necesitas para poder elegir un excelente fondo para tu página o blog!!

[+/-]
Koogle; Un buscador para rabinos ultraortodoxos

Una compañía israelí ha desarrollado un motor de busqueda un poco particular, ya que filtra los resultados de imágenes de mujeres mostrando su cabello natural, pues en la religión judía no se permite, es por eso que utilizan mascaras en la cabeza.

Koogle

Al parecer Koogle cumple con las exigencias de los rabinos ortodoxos, los cuales prohibieron el uso de Internet a los judíos para asegurarse de que los creyentes eviten el material explícito sexual.

Mira que unusuales son los filtros con Koogle!!


Pues a quien no le ha pasado que al estar buscando alguna imagen y de repente se encuentran con otra cosa, incluso hasta con poca ropa. Esto ya no será ningún problema para los creyentes judíos que utilicen Koogle.

Otro filtro poco usual es que en compras a Israel, no permite comprar objetos que los rabinos no permiten tener en casa, como los equipos de televisión.

También el motor de búsqueda impide la carga de imágenes o compras en el Sabbath judío, el cual, impide cualquier tipo de trabajo o negocio.

Según se informa en la propia web, gracias a Koogle se puede navegar y "disfrutar sin temor de cualquier servicio proporcionado por Internet de la forma más adecuada a los valores religiosos". Y todo ello, según "los mandamientos de la Torah".

Referencias:
ElPeriodico.com
ElUniversal.com

[+/-]
Buscador de Google para microblogging

Si bien Google tiene un buscador para blogs este no es del todo útil, ya que la información que se encuentra en las búsquedas es poco actualizada y casi no aparecen blogs en dichas búsquedas.

Buscador de Microblogging

Según recientes publicaciones del blog oficial del gigante de Internet, esta preparando un buscador para microblogging, que tendrá bastantes mejoras del actual buscador de Twitter, por ejemplo, pues ordenará los resultados por relevancia, a diferencia del de Twitter, que ordena los resultados por fecha.

Por otro lado este nuevo motor de búsqueda ofrecerá resultados de todas las plataformas de microblogging (Jaiku, Plurk, Twitter, Identi.ca...)

Referencias:
GoogleSystem.blogspot.com
DownloadSquad.com

[+/-]
Mini-Refrigerador USB, para tus bebidas

Un nuevo y curioso gadget ha llegado y por nada mas y nada menos que por $19.90. Algo que seguramente nos ayudará al momento de tener heladas nuestras bebidas al estar en la PC.

Enfriador USB

Aunque no es recomendable utilizarse en laptops, pues utiliza la energia de la computadora para así poder enfriar la bebida.

Que vendrá después?

Referencias:
ThinkGeek.com

[+/-]
TwitPickr; Twitter y Flickr se unen en esta herramienta

El microblogging cada vez se hace mas popular entre la sociedad internauta, y como cualquier producto de la vida real, entre mas demanda mas producto o en este caso mas complementos.

TwitPickr

TwitPickr es una herramienta que permite conjugar dos grandes de las redes sociales, Twitter y Flickr, al publicar en Flickr las imágenes que ya hemos subido a TwitPic, con una gran facilidad.

Así que si utilizas constantemente estas dos aplicaciones sigue leyendo!!


El funcionamiento de la página es muy sencilla simplemente necesitas ingresar tu nombre de usuario, y después seleccionar las imágenes que quieras pasar a Flickr para lo que también necesitaras ingresar tus datos de usuario.

Sitio: http://twitpickr.wijndaele.com/

[+/-]
Microsoft venderá Windows 7 sin IE

Como ya todos sabrán, la Comisión Europea acusó a Microsoft por monopolio al incluir Internet Explorer en su sistema operativo, dicha práctica perjudica a la competencia limpia entre navegadores de Internet y que además socava la innovación tecnológica.

Windows 7

Ahora, al parecer, el gigante informático venderá su nuevo Windows 7 sin Internet Explorer. Después de que Microsoft diera la opción de poder desinstalar varios programas de su sistema
  • Windows Media Player
  • Windows Media Center
  • Windows DVD Maker
  • Internet Explorer 8
  • Windows Search
  • Handwriting Recognition
  • Windows Gadget Platform
  • Fax y Scan
  • XPS Viewer y Services
, por la misma acusación de monopolio.

Asegura la compañía que "Los fabricantes de ordenadores y los usuarios podrán instalarlo o no, como prefieran", al momento de recordar que su actual sistema Windows Vista, permite instalar "Libremente" cualquier otro explorador.

La Comisión Europea(CE), en un comunicado, había sugerido a Microsoft sugerir la instalación de algún explorador alternativo al Internet Explorer: "En lugar de eso, Microsoft aparentemente ha decidido ofrecer a los consumidores una versión de Windows sin ningún navegador. En lugar de más oferta, Microsoft parece haber decidido ofrecer menos", ha señala la CE.

Bruselas ha tenido desde hace algunos años una batalla con Microsoft, ya que no ha respetado algunas reglas de competencia, también por lo cual lo ha multado por alrededor de 1.676 millones de euros.

El sistema operativo será vendido sin Internet Explorer a partir del 22 de Octubre. Y de nuevo el usuario será quien mas pierda al no tener ningún explorador de Internet instalado en el sistema.

Referencias:
ElPais.com
BBC.co.uk
ADN.es
20minutos.es
expansion.com
NYTimes.com
ElMundo.es
Yahoo.com
DesarrolloWeb.com

[+/-]
Separar una etiqueta, manteniendola invisible

En un comentario reciente, me preguntaban como se puede hacer para dividir las entradas de una etiqueta individual de la demás, es decir, mostrar las entradas de una etiqueta fantasma que no aparezca en el gadget de etiquetas.

Lo primero que se me ocurrió es filtrar en el Archivo del Blog, las entradas con la etiqueta. Pero el dato de las etiquetas nunca apareció. Así que pensé que tal vez con un feed y un lector modificado se podrían mostrar todas las entradas de esa etiqueta y después ocultarla del gadget de etiquetas.

Por ejemplo, digamos que tengo una etiqueta de "colores", una de "marcadores" y una de "lapices". Entonces quiero que la etiqueta "marcadores" se muestren a parte de las demás etiquetas y también que cuando muestre las etiquetas no se vea la etiqueta "marcadores".

Entonces para solucionar el mostrar todas las entradas de cualquier etiqueta necesito agregar un gadget con este contenido en Javascript:
<script type='text/javascript'>
tagFeedRSS = function (json) {
var m = (m ? m : 999);
var f = "";
m = ( m &gt; json.feed.entry.length ? json.feed.entry.length : m);
for (var i=0;i&lt;m;i++) {
var n = json.feed.entry[i];
var l = n.link[4].href;
var t = n.title.$t.link(l).bold();
f = f + t + '<br/><br/>';
}
document.write(f);
}</script>
<script src='http://miblog.blogspot.com/feeds/posts/default/-/Etiqueta?alt=json-in-script&callback=tagFeedRSS&max-results=999' type='text/javascript'></script>
Unicamente debes sustituir el texto de otro color, con tus datos.

Y para esconder una etiqueta en el gadget de etiquetas solo necesito modificarlo como se explica en un post anterior: Ocultar etiquetas del gadget de Etiquetas

Con eso se solucionó el problema, para separar los posts!!

[+/-]
Gadget de Etiquetas expandibles

Supongamos que tienes una lista aburrida de etiquetas, que tal si en vez de mostrar el numero de entradas en esa etiquieta, mejor mostrar el titulo de las entradas en ella.

Etiquetas expandibles

Sería fantástico ¿no?. Además estos feeds no hace que tarde mas la página en cargar. Pues se cargan despues de cargar la página y van apareciendo etiqueta por etiqueta
Para quienes buscan auto-promocionar su blog, pues como dije en ocaciones anteriores la auto-promocion de un mismo blog es muy importante para retener visitas y hacer que los lectores encuentren información relevante para ellos.

Etiquetas expandibles

Se basa en un lector de Feeds especial para Blogger, que muestra solo los titulos de las entradas en cada etiqueta.

Además no hace que dure mas la página en cargar. Así que no se pierde nada en agregarlo. Al contrario se obtiene un mayor tiempo pero de visitas en el blog

[1] Primero debes ir a Diseño>Edicion HTML>Sin expandir plantillas de artilugios

[2] Antes de </head> o despues de <head> agrega el siguiente código javascript:
<script type='text/javascript'>tagsRSS = function (json) {
 var m = (m ? m : 999);
 var f = "",xz;
 m = ( m > json.feed.entry.length ? json.feed.entry.length : m);
 for (var i=0;i &lt; m;i++) {
   var n = json.feed.entry[i];
   var l=n.link;
   for(xz=0;xz &lt; l.length;xz++){
    if(n.link[xz].rel === "alternate"){
      l=l[xz].href;
      xz=l.length+10;
    }
   }
   var t = n.title.$t.link(l).bold();
   f = f + t + "<br/>";
 }
 document.open();
 document.write(f);
 document.close();
}</script>
[3] Por último agrega despues de alguna etiqueta similar a:
<b:widget id='XXXXX' locked='XXXXX' title='XXXXXX' type='XXXX' />
El siguiente código Blogger:
<b:widget id='Label101' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:loop values='data:labels' var='label'>
<div class='etiqueta'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#' expr:onclick='"if(document.getElementById(\"label_" + data:label.name + "\").style.display == \"none\"){document.getElementById(\"label_" + data:label.name + "\").style.display=\"\"}else{document.getElementById(\"label_" + data:label.name + "\").style.display=\"none\"};return false"'>[+/-]</a> <a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>) <br/>
<div class='etiquetas-expandibles' expr:id='"label_" + data:label.name' style='display:none;'>
<script expr:src='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=tagsRSS&amp;max-results=999"' type='text/javascript'> </script>
</div>
</div>
</b:loop>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


[4] Si quieres modificar el estilo de los titulos de las entradas utiliza el siguiente selector CSS:
/*      Etiquetas Explandibles
====================================== */
.etiquetas-expandibles {
}
Siempre salen innovaciones y mejoras para cada cosa, así que puede haber mas formas pero esta es una que les comparto, además yo mismo la desarrollé.

|✔| Puedes aprender CSS, en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-]
Ocultar etiquetas del gadget de etiquetas de Blogger

Ocultar etiquetas del gadget de etiquetas de Blogger, una utilidad que te podría servir. Tal vez hoy no, pero en un futuro. Un recurso con bastante futuro en Blogger. Algunas veces necesitamos mostrar u ocultar alguna etiqueta del gadget de etiquetas del blog, ya sea por cualquier razón. Basta con examinar y entender el gadget de Blogger para poder manipularlo.

Rapidamente explicaré como funciona la etiqueta "b:loop": esta etiqueta repite lo que esta dentro de ella según los parámetros:
<b:loop values='data:labels' var='label'>
<!-- Código que se repetirá -->
</b:loop>
Es decir, el contenido de esta se repetirá tantas veces como etiquetas tengas en tu blog.


Ahora utilizaremos la etiqueta de control "b:if" que colocaremos dentro del "b:loop", en la cual colocaremos la condición, que en este caso es literalmente algo asi como: "si el nombre de la etiqueta es diferente de "Etiqueta_1", mostrar etiqueta":
<b:if cond='data:label.name != "Etiqueta_1"'>
<!-- Código que mostrara las etiquetas -->
</b:if>
Tambien podemos modificar esa sentencia para que solo muetre una sola etiqueta:
<b:if cond='data:label.name == "Etiqueta_1"'>
<!-- Código que mostrara las etiquetas -->
</b:if>


Según lo anterior, para que el gadget de las etiquetas solo muestre las que queremos tendremos que corregirlo de la siguiente manera:
<b:widget id='Label101' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name != "Etiqueta_1"'>
<li class='etiqueta'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:if>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

En donde el texto color rojo.- Es la etiqueta del blog que estará actuando.

[+/-]
Mostrar entradas recientes de una sola etiqueta

Supongamos que tienes varias etiquetas de tu blog, pero tienes unas entradas con etiquetas que no quieres que aparezcan en las entradas recientes. Entonces le aplicas a las que quieres mostrar una etiqueta llamada "visible".

Después con este script solo muestras las entradas con la etiqueta "visible" mientras que las demás estará ocultas. Entérate como, y en 5 minutos tendrás un gadget que muestre las entradas recientes con tu etiqueta preferida!!
Para las páginas que necesitan mostrar las entradas recientes de un blog, pero en especifico de una sola etiqueta. Algunas veces queremos filtrar las entradas recientes por alguna etiqueta en especifico y con un sencillo Javascript se soluciona.

Aqui esta un ejemplo, mostrando solo las entradas con la etiqueta "Navegando" de este mismo blog:

Ejemplo


Funciona utilizando los feeds de cada etiqueta para mostrar esas entradas mientras que las demás estarán ocultas. Solo tienes que configurar el nombre de la etiqueta y añadirlo a tu blog, es en demasía sencillo.

Solo tienes que añadir un gadget HTML/Javascript con el contenido que elijas.

Para mostrar solo los titulos:
<script type="text/javascript">
feedRSS = function (json) {
var m = (m ? m : 999);
var f = "";
m = ( m > json.feed.entry.length ? json.feed.entry.length : m);
for (var i=0;i < m;i++) {
var n = json.feed.entry[i];
var l = n.link[4].href;
var t = n.title.$t.link(l).bold();
f = f + t + "<br/><br/>";
}
document.write(f);
}</script>
<script src='http://miblog.blogspot.com/feeds/posts/default/-/Etiqueta?alt=json-in-script&callback=feedRSS&max-results=999' type='text/javascript'></script>


Para mostrar los títulos con una parte de la entrada, en este post:

Otras formas de mostrar "Entradas recientes"

Se muestran varios scripts que nos ayudarán, solamente que para mostrar las entradas que tengan la etiqueta definida necesitas cambiar texto de la opcion que elijas en donde dice:
feeds/posts/default

por este otro:
feeds/posts/default/-/Etiqueta


No olvides reemplazar:
miblog.- Por el titulo(del url) de tu blog
Etiqueta.- Por la etiqueta

[+/-]
BING: ahora le toca a Microsoft, y renueva de buscador

Nuevo buscador de Microsoft 'Bing'De nuevo Microsoft tratando de aprovechar grandes ideas para "mejorarlas" y cobrar por ellas. Ahora busca hacerse de las búsquedas por Internet con su nuevo buscador semantico Bing. Entérate de sus características mas importantes aqui!!Como es de costumbre, y es que esa ha sido la historia de Microsoft. Siempre que algo tiene éxito la compañía del Magnate Bill Gates, toma la idea y trata de mejorarla con sus desarrolladores.

Si bien en algunos casos si ha mejorado algunos productos, en otros simplemente Microsoft pasa desaprecibido. En esta ocasión se trata de un buscador "Inteligente" bautizado con el nombre de Bing, el cual junto con otros como el Wolfram Alpha busca asustar al gigante de Internet, Google.

Página principal de Bing

El buscador web llegará el 3 de junio de forma completa a EE.UU. y en fase beta en Europa, que irá recibiendo todas las funciones en los próximos 18 meses. Pues parece que les urge sacarlo.

Algunas de las características mas importantes de este buscador, es que apuesta firmemente por el impacto visual, ya que tendrá de fondo una imagen que cambiará día con día. Otro aspecto del buscador es sin duda que podrá filtrar imágenes por su tamaño, color, proporción, estilo e incluso por rostro.


Presentación del Buscador (en ingles)

Con este nuevo proyecto de Microsoft tratará de posicionarse mejor en el porcentaje de búsquedas por Internet, ya que a como están las cosas mientras las empresas pagan con gusto por aparecer en las búsquedas patrocinadas de Google, Microsoft pierde dinero en su publicidad.

Según algunas página de estadísticas importantes, en lo que va del año Google tiene el monopolisante porcentaje de búsquedas de 81.38%, mientras en segundo lugar y muy lejos Yahoo! con un 9.61% dejando así en tercer lugar a MSN con un porcentaje de 2.92%. Algo que Microsoft quiere resolver con este buscador:

Ejemplo de búsqueda en Bing

Además con la integración de Ciao, Bing facilitará las compras por internet, debido a que permite entre varias cosas comparar precios y leer comentarios en formato de vídeo o texto acerca de diversos productos. Esta web de compras fue adquirida por Microsoft en Octubre de 2008

Mientras que el buscador actual de MSN, live.com, dejará de exisitir a los 45 días de haber publicado el buscador Bing. Dicha URL será redirigida a la del nuevo buscador.

Referencias:
ABC.es
Clarin.com
ElPais.com
NYTimes.com
NYTimes.com
Expansion.com
LaNacion.com.ar

[+/-]
Twitter prepara nuevo programa de television

Reveille y Brillstein Entertainment Partners, dos productoras de televisión estadounidense, anunciaron hoy que se ha firmado un acuerdo con twitter para lanzar un programa a la televisión abierta. Con el cual la audiencia pueda seguir a los famosos en tiempo real de lo que están haciendo.

titulo

Por lo antes dicho, es mas que claro que la idea es usar Twitter para poner a personas comunes tras la pista de famosos en un formato interactivo y competitivo.

"Twitter está transformando el modo en que la gente se comunica, especialmente los famosos y sus fanáticos", dijo el director ejecutivo de Reveille, Howard T. Owens, quien espera que el nuevo proyecto "lleve el potencial de Twitter a la televisión".

Aunque la información fue publicada, aún existen cosas que estas productoras se guardan. Lo que se sabe por el momento es que pondrán a lo mejor de lo mejor, pues ambas productoras afirman que es un proyecto inédito en TV y que seguro tendrá éxito.

"Capturará lo mejor acerca de Twitter," Reveille Productions Noé Oppenheim dijo, "y es un programa de televisión que obliga por derecho propio."

Aunque aún no se han dado a conocer algunos datos importantes de dicho lanzamiento de Twitter a la TV, como ¿cual será el formato del programa? o ¿cuando saldrá al aire?. Preguntas que la mayoría nos hacemos pues el hecho de que Twitter haga algo de esa magnitud lo hace un poco interesante, incluso para los que ni siquiera lo utilizan.

La red social de micro-bloggin fue fundada en 2006, y solo puedes postear 140 caracteres por entrada o tweet. Dicha red fue utilizada por Barack Obama durante su campaña politica para llegar a la presidencia de los Estados Unidos.

Fuentes:
ADN.es
ElPais.com
ElMundo.es
Clarin.com
BBC.co.uk

[+/-]
Almacenamiento 5D en DVD's, con capacidad de 1.6 TB

La tecnología en cuanto a almacenamiento de datos sigue evolucionando, desde que se creo el primer Disco Duro en 1956 con capacidad de 5Mb y con un peso de 1000kg.

Al cual después de 11 años evoluciono la forma de almacenar datos con el primer disquete de 8 pulgadas creado en 1967 con capacidad de 80kb. Más después y mucho mejor apareció el primer disco compacto en 1979 permitiendo almacenar hasta 780Mb.

Y después llegaría un disco de almacenamiento óptico de alta densidad o DVD el cual permitiría almacenar hasta 4.7Gb. Y por ultimo llegaría la Memoria USB en 1992 con máximas capacidades de 64Mb con mucho menor tamaño y durabilidad.

Grabacion en 5D

El punto es que un grupo de investigadores de la universidad Swinburne en Australia están investigando un método de grabación con partículas de oro de escala nanométrica en discos DVD.

Dicho método permitirá obtener un almacenamiento de hasta diez dimensiones de almacenamiento, es decir, que multiplicaría el almacenamiento normal actual de un DVD hasta 2500 veces. Lo cual sería una capacidad monstruosa de 12Tb.

Pero por el momento solo han logrado un almacenamiento de 3D, con lo cual aumentaron la capacidad de un DVD actual 300 veces, es decir, hablando en Terabyte 1.6Tb.

Anteriores investigaciones lograban un aumento con grabaciones basadas en color o polarización, pero esta es la primera que se logra con ambos métodos.

Mas Informacion:
Theinquirer.es
BCC
Wikipedia:
Disquete
Disco compacto
DVD
Memoria USB

[+/-]
Añadir dos o mas secciones en una misma linea

Supongamos que tienes un gadget de Adsense, pero ocupa mucho espacio, que tal si en vez de tener un solo gadget, agregas dos en el mismo espacio. Te ahorrarías un poco de espacio y al mismo tiempo ganarías mas anuncios y por lo cual mas clics en anuncios.

Para los usuarios de Blogger que quieren aprovechar al máximo cada espacio del blog, o simplemente por estética. Pero por otras razones también puede ser utilizado por usuarios de adsense.

[+/-]
Primer anuncio de Google por Television

De nuevo da de que hablar el gigante Google, pero parece que ya no solo es 'el gigante de Internet', si no que esta vez dio de que hablar por la publicación de un anuncio en televisión, con el cual da a conocer su navegador web Chrome. El 'spot' primero fue ganador de un concurso de popularidad, que tuvo lugar, claro, en YouTube.

Google Chorme


Y pues de si de innovar se trata, Google siempre levanta la mano, ya que tenia que intentar algo nuevo para meterse en la pelea de los navegadores mas importantes de Internet, y que mejor que atacar directamente en masas, con un medio tan eficiente como lo es la Televisión. Dicha pelea por el momento la protagonizan tres navegadores: Internet Explorer, que domina el mercado con un voluminoso 66%, Mozilla Firefox con un 22% y Safari con poco mas del 8%.



El pasado fin de semana fue emitido dicho 'spot' por primera vez en televisión estadounidense. El anuncio fue elaborado dentro de Google Japón, fue elegido después de ser el que mas visitas recibió en el Portal de intercambio de vídeos YouTube, que también es propiedad de Google. La cifra de visitas recibidas, desde que fue publicado en enero es, por alrededor de 2,200,000 de personas.

Elaborado mediante la técnica de 'stop motion'. En el cual se puede ver el logotipo de Google Chrome, como si fuera un juguete que empieza a rebotar a lo largo del anuncio y desapareciendo todas las piezas, hasta quedar una imagen como una ventana del navegador de Google.

Por el momento el anuncio se emitirá únicamente en EE UU. El movimiento demuestra la importancia. "Estamos buscando la forma de aumentar la popularidad de otros navegadores y de Chrome", ha explicado al Hollywood Reporter la directora de comunicaciones de Google, Ellen West.

Fuente:
http://www.cnnexpansion.com/

[+/-]
Cross-Browser(paginas compatibles con cualquier navegador) con IE8.js

Y es que, en lo que va del 2009, Mozilla Firefox que es un navegador gratuito y que también esta disponible para Windows, Mac y Linux. Ha incrementado su cuota de uso, frente al navegador con el que todos crecemos, Internet Explorer, y que para su uso y/o actualizar es necesario tener Windows original pero sigue teniendo la delantera.

Pero la situación no es comparar a estos dos navegadores, pues no podemos decir que Internet Explorer sea peor o mejor que Mozilla Firefox, cada navegador tiene sus pros y sus contras. A eso hay que añadirle que cada quien tiene sus preferencias y es de locos tratar de cambiarlas.


El hecho, es que los dos navegadores, son los mas utilizados en cuanto se refiere a recorrer los rincones de la Web, como lo muestra la siguiente tabla comparativa, de uso:

Microsoft Internet Explorer66.83%
Mozilla Firefox22.03%
Safari8.21%
Chrome1.26%
Opera0.70%
Netscape0.69%
Estadisticas por Market Share

Por lo tanto es de grandísima importancia ofrecer un sitio cross-browser, es decir, que sea compatible con al menos estos dos primeros.

Para esto existe una librería en Javascript, creada por el programador Inglés, Dean Edwards, quien tiene varios trabajos interesantes entre los que resaltan un compresor de javascript y una funcion de javascript llamada cssQuery() la cual es capaz de seleccionar un elemento de la página usando selectores CSS y sentencias DOM en cualquier navegador.

Pero por ahora hablaremos de IE8.js, el cual permitirá corregir diversas diferencias de Internet Explorer hacia los demás Navegadores, en cuanto a temas de CSS y HTML se refiere. Entre los mas destacados están el uso de la pseudoclase :hover en cualquier elemento de la página, transparencias en PNG(solo archivos con la terminación -trans.png) y otros selectores como:parent > child, adjacent + sibling, adjacent ~ sibling, :hover, :first-child, [attr], [attr="value"], [attr~="value"], [attr|="value"], [attr^="value"], [attr$="value"] y [attr*="value"]

Para agregarlo a tu página o Web/blog, puedes descargarlo directamente desde:
SantyWeb: IE8.js
Google Code: IE8.js

Después subirlo a un Web Hosting y enlazarlo en la cabecera con la URL del archivo, pero tambien puedes ahorrarte la subida de archivos y enlazarlo directamente desde Google Code de la siguiente manera:
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
Nota: si quieres subir el archivo puedes reemplazar la URL del archivo en el código anterior por el proveído en tu Web Hosting.

Fuente principal:
Google Code

[+/-]
Un buscador capaz de destronar Google?

Días atrás se presentó en Harvard el sistema Wolfram Alpha, que según su creador será capaz de responder preguntas simples, como qué temperatura hace en Córdoba o qué distancia hay de Santa Fe a Buenos Aires.

Nova Spivack, un experto de computación e Internet, afirmo que dicho sistema podrá ser de la misma importancia de Google si es que funciona: "Esto es verdaderamente impresionante y significante", exclamó. "Es factible que (el sistema) pueda ser tan importante para el internet(y para el mundo) como lo es Google", aunque en diferente proporcion, afirma el experto estadounidense.


Pero la verdadera inovacion en el buscador, es su habilidad de trabajar con datos en el mismo momento, es decir, de acuerdo con su inventor británico, Dr. Stephen Wolfram. Si preguntas en el buscador cual es la diferencia entre la altura del Monte Everest con la longitud de la Golden Gate Bridge, el buscador te lo dirá. O preguntar cual era la temperatura en Londres el día del asesinato de Jhon F. Kennedy, el sistema buscará la información y la proveerá. Si deseas saber cuando será el próximo eclipse solar en Chicago, o la exacta ubicación actual de la Estación Espacial Internacional, que puede trabajar en ello.

"He querido hacer del conocimiento que hemos acumulado en nuestra civilización computables", dijo la semana pasada. "Yo no estaba seguro de que fuera posible. Estoy un poco sorprendido, todo salió tan bien."

Dr. Wolfram, que se educó en Eton y había terminado su doctorado en física de partículas por el momento en que fue de 20, agregó que la puesta en marcha de Wolfram Alfa a finales de este mes sería sólo el comienzo del proyecto.

"Entenderás de que estas hablando", dijo. "Estamos apenas en el comienzo. Pienso que tendremos un razonable 90 por ciento de los estantes en una típica biblioteca de referencias"

¿Qué dicen los expertos?

"Para aquellos como nosotros, cansados de cientos de páginas de resultados que realmente no tienen mucho que ver con lo que estamos tratando de averiguar, Wolfram Alfa puede ser lo que hemos estado esperando".
Michael W. Jones, Tech.blorge.com

"Es como conectar una línea eléctrica en el cerebro."
Matt Marshall, Venturebeat.com

"Esto es como un Santo Grial ... la capacidad de mirar dentro de las fuentes de datos que no pueden ser rastreados con facilidad y dar respuesta de ellos."
Danny Sullivan, editor en jefe de searchengineland.com

"Solo espero que funcione como lo describen, para que así de una buena vez Google tenga algo de competencia digna de el"
SäNTÿ, santyweb.blogspot.com

Hechos mas importantes en la Red Mundial
1969: El Internet ha sido creada por los EE.UU. Departamento de Defensa con la creación de redes de computadoras en la UCLA y el Instituto de Investigación de Stanford.

1979: La Oficina de Correos británica utiliza la tecnología para crear la primera internacional de redes informáticas.

1980: Bill Gates cierra la negociacion de poner un sistema operativo de Microsoft en los ordenadores de IBM allana el camino para casi universal ordenador propiedad.

1984: Apple lanza el primer éxito de 'moderno' ordenador utilizando la interfaz gráfica para representar los archivos y carpetas, menús desplegables y, sobre todo, el control del ratón.

1989: Tim Berners-Lee crea la World Wide Web - la utilización de los navegadores, páginas y enlaces para que la comunicación en Internet simple.

1996: Google comienza como un proyecto de investigación en la Universidad de Stanford. La compañía es fundada oficialmente dos años más tarde por Sergey Brin y Larry Page.

2009: El Dr. Stephen Wolfram Wolfram lanza Alpha.


Pagina oficial:
http://www.wolframalpha.com/

[+/-]
Manual avanzado de CSS

Ya antes habíamos explicado un poco y básicamente, lo que es el CSS, los elementos que componen el lenguaje, así como también los diferentes tipos de selectores y algunas otras cosas. Algo meramente básico, pero en esta ocasión explicaremos algunas funcionalidades mas avanzadas.


Jerarquía.

La jerarquía es uno de los conceptos básicos que necesitamos para poder manejar CSS en su máxima expresión ya que con la jerarquía podremos añadir estilo solo a las etiquetas deseadas, aunque no es mas que el orden de las etiquetas HTML.

Por ejemplo, Si una etiqueta 'div' que será nuestro contenedor, tiene dentro una etiqueta 'p', la jerarquía para definir un estilo a la etiqueta 'p' sería de la siguiente manera:

En HTML:
<div>
<p>
texto
</p>
</div>

En CSS:
body div p {
background:url(imagen.jpg);
}
Pero si hubiera una etiqueta 'p' dentro de la etiqueta 'p', y quisieramos agregarle estilo solo a ella sería:

En HTML:
<div>
<p>
<p>
texto
</p>
</p>
</div>

En CSS:
body div p p {
background:url(imagen.jpg);
}
Cabe rescatar que en la jerarquía se puede identificar aún mas específicamente algún elemento de la página, agregándole un selector dentro de la misma, por ejemplo:

En HTML:
<div id='contenedor'>
<p class='texto'>
<p>
texto
</p>
</p>
</div>

En CSS:
body div#contenedor p.texto p {
background:url(imagen.jpg);
}


Herencia de estilos.

En CSS, cuando aplicamos estilo a alguna etiqueta, las etiquetas que están dentro, heredarán algunas propiedades. Por ejemplo, si definimos un tipo de fuente a la etiqueta <body style='font-family:georgia;'>, ese tipo de letra será heredado por las demás etiquetas(donde no se sobrescriba).

Estas propiedades hereditarias, son las que modifican la presentación de la letra, es decir, el color de la letra, tipo de letra, tamaño de letra. Mientras que otras como el color de fondo o el borde, no se heredan automáticamente, por lo cual, si se quiere que hereden, habrá la necesidad de llamar a inherit en cada una. Por ejemplo:

Si en HTML tuvieramos:
<div id='barra-lateral'>
<h2>Titulo</h2>
<p>Texto</p>
</div>

Y definiéramos en CSS el estilo de la etiqueta 'div':
#barra-lateral {
font-family:Georgia;
font-size:18px;
color:#CCCC00;
text-align:right;
border:1px dotted #00CCCC;
}
Las propiedades que modifican la presentación de la letra, serán heredadas a los elementos dentro del 'div', pero las demás no serán heredadas, como el borde. Donde si queremos heredar el borde necesitamos agregar en CSS lo siguiente:
#barra-lateral p {
border:inherit;
}
Así la etiqueta HTML 'div' heredará el tipo de borde en la etiqueta 'p'

Pero aún así se hereden algunas propiedades, podremos sobrescribirlas con CSS, por ejemplo:

En el ejemplo anterior, si queremos que la etiqueta 'p' tenga otro tipo de letra, simplemente, se sobrescriben las propiedades a cambiar:
#barra-lateral p{
font-family:Arial;
}
En este ejemplo, la etiqueta 'p' heredará todas las propiedades excepto el borde y el tipo de letra.

Clases

Cuando encontramos el estilo adecuado para una etiqueta de nuestra página web, y queremos que algunas etiquetas compartan el mismo estilo, lo mas normal es querer copiar el estilo en cada una de ellas. Pero en CSS podemos crearnos una clase, que contendrá el estilo. Y después de crear y definir el estilo en la clase, es cosa de aplicarla en donde queramos de la siguiente manera:

En HTML:
<div style='font-family:Georgia;  font-size:18px;  color:#CCCC00;  text-align:right;  border:1px dotted #00CCCC;'></div>
<h2 style='font-family:Georgia; font-size:18px; color:#CCCC00; text-align:right; border:1px dotted #00CCCC;'>Titulo</h2>
<p style='font-family:Arial; font-size:12px; color:#CCCC00; text-align:justify; border:1px ridge #00CCCC;'>Texto</p>

Lo mas adecuado sería definir una clase en CSS:
.clase1 {
font-family:Georgia;
font-size:18px;
color:#CCCC00;
text-align:right;
border:1px dotted #00CCCC;
}
.clase2 {
font-family:Arial;
font-size:18px;
color:#CCCC00;
text-align:right;
border:1px dotted #00CCCC;
}
Y despues aplicarlas de la siguiente manera en HTML:
<div class='clase1'></div>
<h2 class='clase1'>Titulo</h2>
<p class='clase2'>Texto</p>
Otra cosa que debes conocer es que puedes aplicar la clase en las etiquetas que quieras y que puedes aplicar dos clases en un mismo elemento:

En HTML:
<div class='clase1 clase2'></div>
<p class='clase3'>
texto
</p>

Pseudoclases

Las pseudoclases ya estan predefinidas y se activan por si solas, es decir si a un elemento HTML, le agregamos la pseudoclase :hover el estilo que definamos se activará al pasar el mouse sobre el elemento. Por ejemplo:

En HTML:
<div>
<p>
texto
</p>
</div>

En CSS:
div:hover {
background:url(imagen.jpg);
}
Solo tres de las cinco pseudoclases pueden agregarse a cualquier tipo de selector, es decir:

En HTML:
<div id='cont'>
<h2>Titulo</h2>
<p class='texto'>
texto
</p>
</div>

En CSS:
h2:hover {
text-align:right;
}
#cont:hover {
background:red;
}
.text:hover {
color:blue;
}
Existen cinco pseudoclases en CSS, pero solo tres se pueden agregar a cualquier elemento:
:active seleccionado con el ratón
:hover con el puntero del ratón encima, pero no seleccionado
:focus con el foco del sistema

Y las otras son exclusivas de los enlaces:
:link enlace que no ha sido explorado por el usuario.
:visited se refiere a los enlaces ya visitados.

Con esto finalizamos este manual avanzado de CSS, espero que te resultara interesante y al haber comprendido lo anterior estas listo para comenzar a separar de manera mas eficiente el código HTML de la presentación o del código CSS. Si encuentras alguna anomalía o duda, hazlo saber dejando un comentario.

[+/-]
Otras formas de mostrar "Entradas recientes"

Existen varias formas de mostrar las entradas mas recientes de nuestro mismo blog o incluso de cualquier otro blog, de manera que puedes elegir entre las mas sencillas hasta las mas complejas. Como lo puede ser añadir un Gadget de feed directamente hasta un script que muestre parte de la entrada y hasta la fecha de la entrada.

Puedes usarlo para auto-promocionar el blog, esa técnica es muy utilizada para que los lectores puedan encontrar fácilmente lo que buscan o interesarse por las demás entradas de nuestro blog.

Ejemplo

Había tenido bastante tiempo estudiando los feeds del blog, de hecho yo mismo desarrollé la mayoría de los siguientes scripts. Solo el último fue desarrollado por Hans de Beautiful Beta

Los gadgets funcionan recogiendo las entradas por medio del feed del blog, al recoger las entradas simplemente les da un poco de formato, es decir los textos en negrita, el titulo y etc...


Simples

Este es el código del ejemplo, el mas pequeño y con mas funcionalidad que cualquier otro gadget en proporcion al código, lo que le quita capacidad de personalización pero al fin y al cabo cumple bien su función que es mostrar las entradas mas recientes.

Mostrar código
<div id='howentrrec'>
<script type='text/javascript'>
entradasrec = function (json) {
var m = 3;
var mltr = 100;
var f = '';
for (var i=0;i < m;i++) {
var n = json.feed.entry[i];
var l = n.link[4].href;
var r = '[...]'.link(l);
var e = n.summary.$t.substring(0, mltr);
var t = n.title.$t.link(l).bold();
f = f + t + '<br/>';
f = f + e + r +'<br/><br/>';
}
document.write(f);
}</script>
<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrec' type='text/javascript'></script>
</div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada


Con metodos DOM

Es similar al anterior solo que este script tiene mas capacidad de personalización, es decir, puedes cambiar fácilmente los colores, la letra, el fondo. Utiliza métodos DOM para agregar el código al contenedor.

Mostrar código

<div id='howentrrec'><script type='text/javascript'>
entradasrecientesDOM = function(json) {
var m = 3;
var mltr = 100;
var contenedor = document.createElement('div');
contenedor.setAttribute('class','howentradasrecientes');
for (var i=0;i < m;i++) {
var contenedorPost = document.createElement('div');
contenedorPost.setAttribute('class','howpostreciente')
var post = json.feed.entry[i];
var link = post.link[4].href;
var readMore = document.createTextNode('[...]');
var entrada = post.summary.$t.substring(0, mltr);
entrada = document.createTextNode(entrada);
var titulo = document.createElement('a');
titulo.setAttribute('href',link);
titulo.setAttribute('style','font-weight:bold;');
var txtTitulo = post.title.$t;
txtTitulo = document.createTextNode(txtTitulo);
titulo.appendChild(txtTitulo);
var salto = document.createElement('br');
var salto_ = document.createElement('br');
contenedorPost.appendChild(titulo);
contenedorPost.appendChild(salto);
contenedorPost.appendChild(entrada);
contenedorPost.appendChild(readMore);
contenedorPost.appendChild(salto_);
contenedor.appendChild(contenedorPost);
}
document.getElementById('howentrrec').appendChild(contenedor);
}
</script>

<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrecientesDOM' type='text/javascript'></script></div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Para modificar el estilo puedes utilizar los siguientes selectores
Para modificar el contenedor de las entradas
.howentradasrecientes {}
Estilo de cada entrada
.howpostreciente {}

Estilo del titulo de cada entrada
.howpostreciente a {}

Normales

Código mucho mas similar al simple, pero este tiene algunos arreglos que lo hacen mas fácil de personalizar incluso que al anterior. Utiliza el metodo innerHTML acelerando así la injección de código.

Mostrar código

<div id='howentrrec'><script type='text/javascript'>
entradasrecientes = function (json) {
var id = 'howentrrec';
var c = (document.getElementById(id)?document.getElementById(id):document.All[id]);
var m = 3;
var mltr = 100;
var f = "";
for (var i=0;i < m;i++) {
var n = json.feed.entry[i];
var l = n.link[4].href;
var r = '[...]'.link(l);
var e = n.summary.$t.substring(0, mltr);
var t = n.title.$t.link(l).bold();
f = f + '<div class="howpostreciente">' + t + '<br/>';
f = f + '<div class="howposttext">' + e + '</div>' + r +'<br/><br/></div>';
}
c.innerHTML = f;
}
</script>

<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrecientes' type='text/javascript'></script></div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Para modificar el estilo puedes utilizar los siguientes selectores
Estilo del contenedor#howentrrec {}
Estilo de cada entrada
.howpostreciente {}
Estilo del titulo de cada entrada
.howpostreciente a{}
Estilo del texto de cada entrada
.howposttext {}


Mas coplejas

Este script realizado por Hans, es uno de los mas complejos en el área. Pues tiene la funcionalidad de mostrar parte de la entrada así como la fecha en que fue publicada.

Mostrar código

<script type="text/javascript">
function showrecentposts(json) {

for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = '(leer mas)';
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = 'Ene';
monthnames[2] = 'Feb';
monthnames[3] = 'Mar';
monthnames[4] = 'Abr';
monthnames[5] = 'May';
monthnames[6] = 'Jun';
monthnames[7] = 'Jul';
monthnames[8] = 'Ago';
monthnames[9] = 'Sep';
monthnames[10] = 'Oct';
monthnames[11] = 'Nov';
monthnames[12] = 'Dic';
if ('content' in entry) {
var postcontent = entry.content.$t;}
else
if ('summary' in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = '';
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, '');
if (!standardstyling) document.write('<div class='bbrecpost'>');
if (standardstyling) document.write('<br/>');
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(' ');
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style='font-size:80%;'><a href='http://beautifulbeta.blogspot.com'></a></span>');
if (!standardstyling) document.write('</div>');

}
</script>

<script type="text/javascript">
//Numero de entradas que mostrará
var numposts = 10;
//Numero de caracteres por entrada
var numchars = 50;
//Mostrar fecha(true o false)
var showpostdate = false;
//Mostrar el (leer mas)...(true o false)
var showpostsummary = true;
//Mostrar entradas con el estilo predeterminado
var standardstyling = false;
</script>

<script type="text/javascript" src="http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>



Para añadir las entradas recientes que elegiste, simplemente debes agregar los códigos en un gadget HTML/javascript.

Personalmente yo utilizo este tipo de gadgets, pues cuando los usuarios están navegando en una entrada, se muestran las cinco(o las que quieras) entradas mas recientes a lado de la entrada. Así cada que cambien de entrada verán mas entradas y navegarán mas por el blog.

|✔| Puedes aprender CSS, en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.


Entradas más recientes Entradas antiguas Página Principal
Arriba