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

[+/-]
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.

[+/-]
Añadir miniposts en el Blog

Seguro que ya haz visto alguna vez minimo, el tipico mensaje de 'Leer Mas', que muestra solo la primer parte del post. Pero ¿cómo hacerle para mostrar un resumen de verdad, es decir, algún tipo de doble entrada y que el segundo minipost se muestre solo la página de la entrada y el primer minipost en las demás?


Solo es cuestión de añadir en la entrada dos etiquetas clave, de las cuales, la primera encerrará al primer minipost(resumen), y la segunda, encerrará al segundo minipost(entrada real).

Y es que, en algunas ocasiones publicamos entradas grandísimas que nos ahorraría un poco de espacio en las páginas de búsqueda, principal o en las de etiquetas, si agregáramos un resumen mas atrayente que solo la primer parte de la entrada.

Por que, supongamos que publiqué una entrada gigante de las Chivas de Guadalajara, digamos que es un resumen del encuentro, y esta grandísimo. Ahora lo publico y tengo que ocultar una parte, pero si en vez de esa primer parte muestro otro resumen mas atrayente, es decir algo como "Las Chivas rayadas de Guadalajara acaban de golear al América, entra aquí para ver el resumen del partidaso!!" y lógico que en la página de la entrada no vas a mostrar eso, por que se supone que ya vas a haber entrado. No ahí se mostrará ya la entrada del resumen del partido.

Se supone que para esas situaciones fue diseñado este Hack, disfrutenlo que fue un poco molesto de desarrollar. Funcionará de la siguientes maneras:

Para publicar la entrada con los dos minipost, es decir, que se muestren entradas diferentes en las páginas del blog, que en la página de la entrada. En la entrada debes agregar lo siguiente:
<span class='resumen'>Aqui solo estaría el resumen, que este solo se mostrara en las páginas que no sean la página de la entrada</span>
<span class='fullpost'>Esta sería la entrada que se muestre en la página de la entrada</span>
Lo cual dará como resultado en la página de la entrada:

entrada con resumen y fullpost

Y en las demás páginas se mostrará otro contenido que atraiga a tus lectores:

entrada con resumen y fullpost en principal



Además si ya habías aplicado el truco del 'Leer mas', esto no afectará a las entradas con el truco, incluso puedes utilizarlo en las entradas que quieras de la siguiente manera:
Aquí estaría el resumen normal, el que todo mundo conoce, el que se muestra en la página principal del blog y también en la página de la entrada <span class='fullpost'> Aquí estaría la entrada completa</span> 
En la página de la entrada se mostrará todo el contenido:

entrada con fullpost

Y en las demás páginas solo la primer parte de la entrada:

entrada con fullpost en principal



Y si decidieras publicas una entrada sin ningun hack, la entrada se publicará tal cual es, sin el enlace de 'Leer mas':
Aqui solo estará la entrada normal
Y la entrada se mostrará de la misma manera en la página del post y en las demás:

Entrada limpia



[1] Para agregar el Hack, solo debes entrar en Diseño>Edicion HTML>expandir las plantillas de artilugios y agregar el siguiente código antes de la etiqueta </head>:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>.resumen{display:none;}</style>
<b:else/>
<style type='text/css'>.fullpost{display:none;}</style>
<script type='text/javascript'>
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'resumen') {
found = 1;
}
if (spans[i].className == 'fullpost') {
if (found == 1) {
spans[i].style.display = 'none';
}
else {
spans[i].style.display = '';
found = 1;
}
}
if (spans[i].className == 'leermas') {
if (found == 0) {
spans[i].style.display = 'none';
}
}
}
}
</script>
</b:if>


[2] Y sustituir <p><data:post.body/></p> o si no <data:post.body/>, por lo siguiente:
<div expr:id='&quot;post-&quot; + data:post.id'>
<data:post.body/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='leermas' id='leermas'><a expr:href='data:post.url'>...Leer entrada</a></span>
<script type='text/javascript'>
checkFull(&quot;post-<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

/!\ Es importante que si ya utilizas el truco del 'Leer mas' o algo por el estilo, lo quites del blog antes de agregar este otro!!.

[+/-]
Nuevo editor de entradas en Blogger

Hace unos momentos estaba revisando blogger in draft y me encontré con el nuevo editor de entradas en Blogger, es un editor que desde hace un rato se estaba cocinando en Blogger, pero parece que va bien.

Aqui les dejo algunas capturas de las nuevas funcionalidades:

Nuevo editor en Blogger


Entre las nuevas funcionalidades esta el triangulo que esta en la esquina inferior derecha, con el que puedes modificar la altura del area de texto.

Fecha y Hora de la entrada, en este estan dos opciones, la primera es para publicar la entrada con la fecha actual y la otra es para publicarla con otra fecha.

Configuracion para editar HTML, con esta herramienta es posible incluir texto con saltos de linea sin necesidad de codificarlo. Pero también a la hora de insertar tablas es mejor ignorar los saltos de linea, ya que podría tomar mucha altura.

Configuracion de composición, se utiliza para mostrar el HTML escrito, es decir, sin compilarlo o para compilarlo.

También cambio la forma de visualizar la vista previa de la entrada, con un elemento flotante en la misma página:

Nuevo editor en Blogger

[+/-]
Mensaje de suscripción en página de cada etiqueta II

Hace un poco publiqué una manera de agregar un mensaje de suscripción en la página de cada etiqueta, junto con las entradas de la misma etiqueta, que se conseguía con un gadget, que yo mismo desarrollé. Pero a ese gadget se le pueden aplicar varias mejoras, como agregarle un fondo al mensaje, distinto con la etiqueta especificada, para conseguir el siguiente efecto:

Etiqueta 'Azul'
Etiqueta 'Rojo'

El código Blogger, es el siguiente:
<b:widget id='Label101' locked='false' title='Feed de etiquetas' type='Label'>
<b:includable id='main'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<b:if cond='data:label.name == "rojo"'>
<style type='text/css'>
.feedEtiqueta {background:red;}
</style>
</b:if>
<b:if cond='data:label.name == "azul"'>
<style type='text/css'>
.feedEtiqueta {background:blue;}
</style>
</b:if>
<span class='feedEtiqueta'>Tal vez te interese suscribirte a "<a expr:alt='"Suscribirse a " + data:label.name' expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name' expr:title='"Suscribirse a " + data:label.name'><data:label.name/> <img src='http://lh4.ggpht.com/_6CFlQEBRtLc/Sd5VV0eiB2I/AAAAAAAAB9Q/kxC1Ee_35EI/SynIco.png' style='border:0px'/></a>", para recibir entradas de "<data:label.name/>" actualizadas<br/> <b>URL:</b> <data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/></span>
</b:if>
</b:loop>
</b:includable>
</b:widget>

El texto en color:

rojo.- es el nombre de la etiqueta en la que quieres aplicar el efecto.
verde.- es donde debes colocar el estilo CSS, que se aplicará.

Lo que realiza este otro gadget, es que al entrar en la página de la etiqueta, revisa si es la que esta definida(en el ejemplo anterior: color rojo) y si es esa aplica el etilo definido(en el ejemplo anterior: color verde) en el mensaje, se puede cambiar el color de fondo, cambiar el color de letra, poner una imagen de fondo o lo que necesites.
[1] Para agregar el gadget necesitas entrar en Edicion HTML en la pestaña diseño de tu blog.
[2] Y agregar el código despues de cualquier etiqueta </b:widget> que veas. Luego podrás moverlo en Diseño
[3] Luego para modificar el estilo del gadget(lo que no cambiara) en CSS será algo asi como esto:
.feedEtiqueta {
border:1px dashed black;
display:block;
margin:0 auto 0 auto;
padding:5px;
width:500px;
}

Suerte!!

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

|✔| También puedes optar por aprender CSS y en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-]
Administracion personal del Blog

Para los que ocultamos la navbar de Blogger, o al menos a mi, se hace muy tedioso el tener que ingresar a Blogger y después darle en edición de entradas, en especial si no esta activado el icono editor rápido de entradas. Pero gracias a una clase de CSS, predefinida por el mismo Blogger, esta tarea se simplifica y nos ahorra un poco de tiempo.

Lo primero a hacer, es obtener el id de el blog. Lo cual se consigue entrando a crear una entrada, en donde la barra de direcciones se contendrá algo parecido a esto:

Obtener el Id de nuestro blog

Una vez que conoces el ID del blog, deberás sustituir el texto en rojo del siguiente código por el ID de tu blog:
<div id='Admin-Blog'
<span class='item-control blog-admin'>
<a href='http://draft.blogger.com/home'>Blogger Draft</a> |
<a href='http://draft.blogger.com/post-create.g?blogID=XXXXXXXXXXXXXXXXXX'>Crear entrada</a> |
<a href='http://draft.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXX'>Edición de entradas</a> |
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXXXXXXXXXX'>Configuración</a> |
<a href='http://draft.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXXXX'>Diseño</a>
<br/>
<a href='http://www.blogger.com/home'>Blogger</a> |
<a href='http://www.blogger.com/post-create.g?blogID=XXXXXXXXXXXXXXXXXX'>Crear entrada</a> |
<a href='http://www.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXX'>Edicion Entradas</a> |
<a href='http://www.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXXXXXXXXXX'>Configuración</a> |
<a href='http://www.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXXXX'>Diseño</a>
</span>
</div>
Este código se agrega en un gadget HTML, pero no te preocupes nadie lo verá, solamente tu y eso solamente cuando estés logueado en Blogger.

De hecho lo que tenga las clases 'item-control blog-admin', solo podrá ser visto por los administradores del blog. Algún código en prueba o lo que se te ocurra.

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