domingo, 30 de septiembre de 2012

Hojas de otoño cayendo en el blog


Para los que vivimos en el hemisferio norte ya es otoño desde hace algunos días, y algunos me han preguntado por algún truquillo que haga caer hojas en el blog. Este script de MaxxBlade que aunque originalmente tiene otro fin, puede usarse para hacer que caigan imágenes de hojas en el blog, sin embargo, aunque en todos los navegadores que probé funcionó bien, es posible que en Internet Explorer no funcione, pero eso ya no nos extraña ¿verdad?

Un ejemplo se puede ver en este blog de pruebas.

Para poner estas hojas cayendo en el blog entra en la Edición HTML de la plantilla y antes de </head> pega lo siguiente:
<script>
//<![CDATA[
// Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=15, waft=100, fallSpeed=5, wind=-1;

newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsANkVVVsqpHYDcQ6ZWndoo4FkRNB_kzt-WXI5pA5Q0zqQsbR6Y9gnqX-wiIuNeCQsrxB4RK3P6_9dGvOmaww6gb087pJTJ7tRkRsEJjJvkwfS6u03hZjpGkdz90F4rzxP3X0vMcTdgXA/s100/hoja1.png",29,15);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ7PM_3h9s1Vxiwr22zsbJtrSpIwvwNsNGqiw_l6nWr7GF0S4rW-o1r919VS3y9r0yB6vXVa7OQ8pnjNroxe8-xdp39Z8F-NntJk6zG3IQmN8tEEZdnGdF__WDEejj2rtrO62-vpT9GN8/s100/hoja2.png",27,23);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVW6nLJCakDvDkvn5hOJ3wLMFX9OApXu7WqiAMi7Zss5FlVRt4PUaVBCBZQO85esueWNf1ob3jbTZHbHKuAf_8olnjjAIEhxq9Zsz1aD_orkUZsmKEtvu_2EEAjgcNDaijy2GOWBmzh_A/s100/hoja3.png",46,15);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDzpE3YlBoYt_rXX53F8fFzmuNLUK-vgfAUqw7YQNe3FHYLxME20IHS29n3BhinfzgzV_JtuR2IvSZZwCP5yCwBXqX8_oKWIw98FnMmJpjFC0lHALL2J1hRPqXsyxcg3ttRopsLhgF6f4/s100/hoja4.png",36,33);
function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:9;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
window.onresize=winSize;fall();
//]]>
</script>
En la parte marcada con color amarillo verás unas opciones:
var numObjs=15, es la cantidad de hojas que aparecerán.
waft=100, es qué tantos pixeles se mueven a los lados cuando caen
fallSpeed=5, es la velocidad, y
wind=-1; es la dirección del viento, puede ser un valor negativo como está, 0 para que no tengan dirección, o un valor positivo (por ejemplo 1). Si es un valor negativo caerán a la izquierda, si es un valor positivo caerán a la derecha.

Con tan sólo eso tu blog tendrá una decoración muy acorde a esta temporada.

Autor | MaxxBlade

Una curiosidad: Logos de GMail con CSS3

Es probable que a nadie se le ocurra usar algo como esto pero, no deja de ser una curiosidad y bien armada.

Digo que sería raro que alguien quisiera utilizarlo porque está armado exclusivamente con CSS3, no se vería en todos los navegadores y la cantidad de reglas es ... bueno, muchas.

.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0/0 serif;}
.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}
.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}
.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}
.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}
.gmail-logo:hover{background:#313131;border-color:#313131;}
.gmail-logo:hover .gmail-box:before{border-color:#313131;}
.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}


Sólo son ejemplos que muestran la versatilidad de estas nuevas propiedades y además, en este caso, Irham Kendeni, que es su desarrollador, se ha esmerado en darnos as explicaciones paso a paso lo que permite tratar de entender la idea y de ese modo, poder aplicar esas cosas ara resolver nuestras propias necesidades que, seguramente, serán mucho más modestas.

Y si alguno cree que eso fue excesivo, es porque no vieron este otro:

     

Dile adiós a los prefijos en CSS3 con Prefix Free


prefix free

¿Qué son los prefijos?


Los insoportables prefijos son usados con el fin de disponer ciertas funcionalidades en CSS3 para distintos navegadores, anteponiéndolos de esta manera en nuestros atributos CSS3:

#elemento {
width: 500px;
height: 500px;

border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;

box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
-o-box-shadow: 0 0 10px #000000;
-moz-box-shadow: 0 0 10px #000000;
-ms-box-shadow: 0 0 10px #000000;
}

Los prefijos utilizados representan a distintos navegadores.
  • -webkit- representa a navegadores basados en webkit como Chrome y Safari.
  • -o- representa al navegador Opera.
  • -moz- representa a navegadores basados en Gecko, como Firefox.
  • -ms- representa al navegador poco usado "Internet Explorer".

Con solo agregar un prefijo a tal condición se aplicara al navegador deseado. Aunque se puede ocupar de una forma ingeniosa para lograr algo selectivo en aplicar el CSS3 en distintos navegadores. También evitaras malgastar tiempo, y ocuparlo en otra cosa más importante.

Pero por suerte tenemos una muy buena herramienta llamada Prefix Free para agregar todo los prefijos automáticamente, convirtiendo nuestro código CSS en algo mas cálido, e incluso mas fácil de entender, así evitando errores y también la pérdida de tiempo en nuestros proyectos, quedando nuestro código CSS de esta manera:

#elemento {
width: 500px;
height: 500px;

border-radius: 50%;

box-shadow: 0 0 10px #000000;

}


¿Cómo usar Prefix Free?

Utilizar Prefix Free es  bastante sencillo simplemente debemos descargar desde su pagina el script oficial agregándolo antes de </head> de esta manera:




Usamos vista previa y si todo esta bien, presionamos guardar. Ya de esta manera el script hará su trabajo y podrán ocupar todo sus atributos CSS3 sin prefijos, el script también lo pueden subir a sus propios repositorios si lo desean.

¡Compatibilidad!

Prefix Free es compatible con navegadores de escritorio como IE9+, Opera 10, Firefox 3.5+, Safari 4+ y Chrome. Para navegadores mobiles: Mobile Safari, Android Browser, Chrome y Opera Mobile.

¡Algunos inconvenientes!
  • No funciona con estilos importados (@import).
  • No funciona con archivos locales en Chrome y Opera.
  • No funciona con estilos inline.
  • No funciona con hojas de estilos de otros dominios.

Espero que les sea de gran utilidad queridos lectores. Un gran abrazo :)

sábado, 29 de septiembre de 2012

Internet: Una historia de amores y odios




SEO, posicionamiento de contenido o experiencia de usuario


Siempre se ha hablado sobre SEO, algo menos sobre SEM y desde el auge de las redes sociales hablamos de SMO, pero muchos usan el termino "posicionamiento de contenido" refiriéndose exclusivamente al SEO y para mi no es correcta esta acepción.

Tal vez influenciados por los años en los que sin SEO era difícil posicionar correctamente, seguimos alimentando ese término englobando cualquier acción que nos ayude a posicionar una página. Pero las cosas evolucionan y hoy debemos hablar de posicionamiento en general, evidentemente de contenido por que la red básicamente se compone del mismo ya sea escrito o visual.

Al fin y al cabo siempre se ha tratado de ganar visibilidad, para ello uno debe ir donde se encuentra el mayor numero de usuarios posible, hace unos años estos usuarios estaban en Yahoo luego en Google. Debías aparecer bien posicionado si querías que te leyeran, pero eso ha cambiado, ahora los usuarios están por otros sitios como Facebook, Twitter, etc y se debe llegar a ellos con el mismo interés que se intentaba alcanzar los primeros lugares en las búsquedas. La red ya no gira completamente en torno a Google pese a sus esfuerzos por que sea así.

Actualmente posicionar contenido es mucho mas complejo que aplicar SEO a tus contenidos, todo influye, desde la correcta elección de un diseño, la carga de una pagina, la búsqueda de contenidos interesantes, su redacción, su difusión, la creación de una comunidad entorno a el, elegir correctamente el centro sobre la cual girara tu comunidad ya sea un blog, un sitio web, una pagina de Facebook o Google Plus, la adecuación del mismo según sean los dispositivos de accesos a ese contenido, en definitiva hoy en día un posicionador de contenido debe manejar múltiples factores que van mas allá de de optimizar un sitio para buscadores, va mas allá de la creación de una comunidad, etc.

Hoy en día se habla mucho de la aparición de nuevos perfiles laborales gracias a la red y dentro de esos perfiles no acabo de ver que se le de importancia al profesional que te ayude a un posicionamiento global. Ya hay grandes voces que mas que hablar de posicionamiento de contenidos lo amplían a la experiencia de usuarios, ese termino relacionado con usabilidades de sitios esta ampliándose y creo que tienen razón.

La experiencia del usuario ya no solo debe abarcar una navegación agradable por sitios, debe contemplarse como el objetivo a cumplir para logar tus objetivos cuando estas en la red. En una Internet masificada, distinguirse es difícil, todo es contenido, toneladas de contenidos, fijar tu objetivo en proporcionar experiencias agradables a tus lectores basándote en todo el conjunto de cosas necesarias para posicionarte, SEO, SMO, SEM, redacciones, usabilidades, comunidades, etc es lo que definitivamente te ayudara a ganar visibilidad.

Son necesarios perfiles globales que sepan canalizar todos estos, hasta ahora, esfuerzos o estrategias individuales, la red actual esta basada en el usuario y sus interacciones y aunarlos debe ser el fin...




viernes, 28 de septiembre de 2012

Usar dos imágenes de fondo con CSS3

Tras un tiempo en que estamos publicando menos (nos hemos tomado un descanso que necesitábamos) volvemos, poco a poco, a nuestro ritmo habitual...



Durante este tiempo hemos desarrollado algunos sitios webs nuevos, en uno de ellos hemos usado dos imágenes y degradado para el fondo del body. Esta posibilidad que nos ofrece CSS3 nos abre muchas puertas para el diseño web. En este caso se trataba de imitar un efecto de nueces cayendo y que se amontonaban en la parte de abajo del sitio. Como sabéis cada página, según sea su contenido, tiene diferentes longitudes y mantener esas nueces apiladas en el fondo nos obliga a usar dos imágenes.

Esto podemos conseguirlo solo con CSS añadiendo
body {
background-color: #000;
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -webkit-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -moz-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -ms-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -o-linear-gradient(top, #000, #fff);

Con este CSS logramos insertar dos imágenes sobre un degradado de fondo. Usamos márgenes negativos y porcentajes para que se sitúen donde queremos y sea adaptable la posición a la pantalla. Evidentemente solo disponible para navegadores que implementan estas características de CSS3.

Podéis verlo funcionando en Walnuters(aún en fase beta).

jueves, 27 de septiembre de 2012

CSSload: Gráficos de carga con CSS

CSSload es un sitio donde podemos generar "imágenes" de carga que no son imágenes sino gráficos creados con CSS, aprovechando de ese modo, las facilidades que nos dan estas nuevas propiedades que nos permiten animar casi cualquier cosa y que funcionan en Firefox, Chrome, Safari y otros navegadores modernos.

No hay mucho que explicar. Basta entrar en la página y seleccionar alguno de los modelos disponibles y luego, establecer los parámetros de color y velocidad. Todos los cambios pueden ser previsualizados y una vez que nos hemos decidido, el botón Get code nos mostrará el código necesario para insertarlo en cualquier página web.


Ese código contiene dos partes, el estilo que es todo lo que está entre <style> </style> que podemos agregarlo en una entrada o en la misma plantilla y el HTML que son una serie de DIVs que deberemos ubicar allí donde quisiéramos mostrarlo.

Como no requiere librerías de ningún tipo y no usa JavaScript, podemos modificarlo a gusto y a mi entender, es una buena manera de aprender cómo funcionan estas cosas que a simple vista, son raras.

Ver/Ocultar otro ejemplo:

Vota por iniciaBlog en Bitácoras 2012


Los premios Bitácoras se están haciendo sentir y los mejores bloggers se están disponiendo a mostrar lo mejor de sus blogs para ganar un lugar en esta escala de triunfadores.


iniciablog, bitacoras, iniciablog.com


A los que usuarios que aún no estén participando se les invita a inscribir su blog en una de las 20 categorías. Puedes visitar el FAQ en donde se detallan cada una de las preguntas más frecuentes esta participación.

Vota por iniciaBlog para llegar a su objetivo:

A pesar de que Ayuda Bloggers no estará presente en esta maravillosa participación, estamos apoyando a iniciaBlog, quien por segunda vez consecutiva se ha presentado en la categoría Mejor Blog Personal.

Así que ya sabes, para dar tu voto a iniciaBlog puedes hacerlo mediante este enlace, si deseas ver la posición de iniciaBlog en la categoría Mejor Blog Personal puedes visitarla desde acá (Posición 41 en Jueves, 27 de Septiembre de 2012).

Te agradecemos también si ayudas a difundir este artículo:



Enlace: iniciaBlog en los Premios Bitácoras 2012.


martes, 25 de septiembre de 2012

Muchos feeds y un solo script para mostrarlos (2)

Tengo muchas direcciones de feeds y ahora, lo que quiero hacer es mostrarlos pero sin tener que escribir códigos especiales para cada uno de ellos y además quiero que se vean en un mismo lugar así que me aprovecho de jQuery y modifico un poco el script que se mostraba en esta entrada.

Allí, agregaré un par de funciones extras, una, llamada FEED_eliminartags() para que los contenidos puedan ser "recortados" y verlos como sumarios y otra para detectar la primera imagen que tengan FEED_primerimagen(); ambas cosas, son similares a cualquier otra función que interprete json que es el formato en que leeremos los feeds.

Agrego las funciones antes de </head>

<script type='text/javascript'>
//<![CDATA[
function FEED_primerimagen(cual) {
var t = "", s, a, b, c, d;
s = cual;
a = s.indexOf("<img");b = s.indexOf("src=\"",a);c = s.indexOf("\"",b+5);d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {t = d;}
return t;
}

function FEED_eliminartags(cual,longitud){
var r = cual.split("<");
for(var i=0;i<r.length;i++){
if(r[i].indexOf(">")!=-1){
r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
}
}
r = r.join("");
var sss = "", p;
var r2 = r.split(" ");
for(var i=0;i<r2.length;i++){
p = sss + r2[i] + " "
if(p.length>=longitud) {break;}
sss = p;
}
sss = $.trim(sss);
if(sss) {sss += " …" }
return sss
}

(function ($) {
$.fn.FeedEk = function (lasopciones) {
var opciones = {url: '', clase: '', cantidad: 3, lenres: 120};
if (lasopciones) {$.extend(opciones, lasopciones)}
var elID = $(this).attr('id');
if (opciones.url == null || opciones.url == '') {
$('#' + elID).empty();
return
}
$.ajax({
url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + opciones.cantidad + '&output=json&q=' + encodeURIComponent(opciones.url) + '&callback=?',
dataType: 'json',
success: function (data) {
$('#' + elID).empty();
$.each(data.responseData.feed.entries, function (i, entry) {
var laimagen = FEED_primerimagen(entry.content);
var contenido = FEED_eliminartags(entry.content,opciones.lenres);
var salida = "<div class='ItemFeed "+opciones.clase+"'>";
salida += "<div class='ItemTitle'><a href='" + entry.link + "' target='_blank' >" + entry.title + "</a></div>";
salida += "<div class='ItemContent'>";
if(laimagen){
salida += "<img src='"+ laimagen +"' />";
}
if(contenido){
salida += "<p>" + contenido + "</p>";
}
salida += "</div>";
salida += "</div>";
$('#' + elID).append(salida);
})
}
})
}
})(jQuery);
//]]>
</script>

Y en un elemento HTML, entrada, página estática o donde quiera que se muestren, el HTML que no es otra cosa que un DIV vacío y una serie de enlaces:
<div id="divRss"></div>

<div id="fenlaces">
<a href="#" rel="1" class="ftwitter"> Twitter usuario </a>
<a href="#" rel="2" class="ftwitter"> Twitter favoritos </a>
<a href="#" rel="3" class="ftwitter"> Twitter menciones </a>
<a href="#" rel="4" class="fyoutube"> YouTube usuario </a>
<!-- coloco todos los enlaces que quiera -->
<a href="#" rel="14" class="fstumble"> StumbleUpon blog </a>
</div>
Ahora, faltaría definir una lista de direcciones urls con los distintos feeds; uso un array o cualquier otro sistema:
<script type="text/javascript">
var lista_feeds=new Array();
lista_feeds[0] = "";
lista_feeds[1] = "https://twitter.com/statuses/user_timeline/usuario.rss";
lista_feeds[2] = "https://api.twitter.com/1/favorites/usuario.rss";
lista_feeds[3] = "http://search.twitter.com/search.rss?q=to:@usuario";
lista_feeds[4] = "https://gdata.youtube.com/feeds/api/users/usuario/uploads";
// ....... sigo agregando las direcciones que quiera usar
lista_feeds[14] = "http://www.stumbleupon.com/rss/stumbler/nombre/likes";

// y el evento de jQuery apra detectar el click en esos enlaces
$('#fenlaces a').live('click', function(e) {
e.preventDefault(); // evito qe se ejecuta el href del enlace
var url = lista_feeds[$(this).attr('rel')]; // leo el número de orden de la lista (1, 2, 3, 4, etc)
var clase = $(this).attr('class'); // leo la clase de ese enlace
// y ejecuto la función para leer los feeds
// donde cantidad es el número de entradas a leer y lenres es la longitud máxima
$('#divRss').FeedEk({url:url, clase:clase, cantidad: 3, lenres:200 });
});

// y por defecto, muestro el primero de la lista
$(document).ready(function() {
$('#fenlaces a').first().click();
});
</script>
Por último, como siempre, el CSS que es lo que termina de personalizar las cosas:
<style>
#divRss { /* el contenedor */
background-color: #EEE;
border: 1px solid #000;
margin: 0 auto;
outline: 3px solid #ABC;
padding: 10px;
width: 350px;
}
#divRss .ItemFeed { /* cada entrada */
border-bottom: 1px dotted #000;
color: #666;
padding: 5px 0;
}
#divRss .ItemFeed:last-child {border: none;}
/* y los detalles (título, contenido e imagen)
#divRss .ItemTitle { }
#divRss .ItemTitle a { }
#divRss .ItemContent { }
#divRss .ItemContent p { }
#divRss .ItemContent img {height: auto; width: 100%;}
</style>
Como los datos que nos muestran esos feeds pueden ser variables, la clase que se envia a la función, permite que los mostremos con alguna diferencia; por ejemplo:
#divRss .ItemFeed.ftwitter { }
#divRss .ItemFeed.fyoutube { }
#divRss .ItemFeed.fyoutube .ItemTitle { }
#divRss .ItemFeed.fstumble img { }


lunes, 24 de septiembre de 2012

Muchos feeds y un solo script para mostrarlos (1)

Hace ya unos cuantos días, en labnol.org publicaban un artículo donde enumeraba una larga serie de direcciones de feeds a los que podía accederse o leer su contenido; feeds de distintos servicios que, como casi todos ellos, son públicos y por lo tanto, podemos mostrarlos.

Para hacer eso, como los feeds suelen tener formatos diferentes, un método efectivo es usar la idea que se mostraba en esta entrada que no es otra cosa que un pequeño script que utiliza jQuery para enviar esa dirección de feeds a un API de Google que nos devuelve siempre un formato único; de tal modo, podremos emplearlo sin tener que tener en cuenta esas diferencias o andar averiguando en que etiquetas están los distintos datos.

Es cierto que el API no es muy flexible pero, lo que nos devuelve es más que suficiente para armar un gadget que nos permita mostrar una lista de feeds de distinto tipo en en el mismo espacio.

Empezamos con algunas de las direcciones de la lista de feeds:

las últimas actualizaciones de Twitter:
https://twitter.com/statuses/user_timeline/usuario.rss
los favoritos de Twitter:
https://api.twitter.com/1/favorites/usuario.rss
las menciones de Twitter:
http://search.twitter.com/search.rss?q=to:@usuario
cualquier búsqueda o hashtags) de Twitter:
http://search.twitter.com/search.rss?q=palabra
los últimos videos subidos a YouTube:
https://gdata.youtube.com/feeds/api/users/usuario/uploads
videos de YouTube con cierta etiqueta:
https://gdata.youtube.com/feeds/api/videos/-/etiqueta
cualquier búsqueda en YouTube:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=relevance
lo mismo pero ordenadas por fecha:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=published
lo mismo pero ordenadas según visitas:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=viewCount
últimas actualizaciones de una página de Facebook:
https://www.facebook.com/feeds/page.php?format=atom10&id=ID_pagina
imágenes subidas a Pinterest:
http://pinterest.com/usuario/feed.rss
imágenes subidas a Flickr:
http://api.flickr.com/services/feeds/photos_public.gne?id=ID_usuario
imágenes de Flickr con cierta etiqueta:
http://api.flickr.com/services/feeds/photos_public.gne?tags=etiqueta
imágenes de Instagram con cierta etiqueta:
http://instagr.am/tags/etiqueta/feed/recent.rss
cualquier búsqueda de Picasa:
http://photos.googleapis.com/data/feed/base/all?alt=rss&kind=photo&q=palabra
últimas entradas en Tumblr:
http://nombre.tumblr.com/rss
últimas entradas en WordPress.com:
http://nombre.wordpress.com/feed/
últimas actualizaciones en StumbleUpon:
http://www.stumbleupon.com/rss/stumbler/usuario/likes

En todos los casos, lo que debe hacerse es cambiar el dato en amarillo por el que corresponda, ya sea nuestro nombre de usuario, ID, etiqueta o palabra a buscar.

Y lo que faltaría es ver cómo se podrían usar ...

SCM Music Player » otro reproductor de música para tu blog

En un post anterior habíamos visto como agregar un reproductor de música llamado Mixpod a nuestro blog.
Hoy vamos a ver cómo agregar otro reproductor de música llamado SCM Music Player a nuestro blog.

( DEMO)
Blog de pruebas

1.§ De la solapa Choose skin escogemos un color para el reproductor; si queremos, podemos cargar una hoja de estilos, en la parte donde dice Custom skin CSS.

2.§ En la solapa Edit Playlist vamos a agregar las canciones; podemos agregar de dos formas : haciendo una lista de canciones de forma manual (Manual Playlist) o colocando la URL de un feed (RSS Podcast).

Para hacer las lista manual, colocaremos el título de la canción en el lado izquierdo (donde dice Song Title); donde dice Song URL, pegaremos la URL de la canción. Podemos colocar una canción que hayamos alojado en algún sitio o colocar la URL de un video de YouTube.

3.§ En la solapa Configure Settings, vamos a configurar algunos parámetros de nuestro resproductor: si deseamos que el reproductor funcione al momento de entrar al blog (autostart); si queremos que las canciones se reproduzcan de manera aleatoria (Shuffle Playback); podemos configurar el volumen que tendrá el reproductor por defecto(Default Volume); podemos escoger el lugar en el que se ubicará el reproductor (Placement of Player Bar) y podemos escoger si queremos que la lista de canciones se vea por defecto (Show Playlist by Default).

4.§ Una vez configurado todo, damos click a Done. Copiamos el código generado y vamos a nuestro blog.

5.§ El código podemos colocarlo en dos lugares : en la misma plantilla o a través de un gadget.

6.§ Si queremos agregar el reproductor a través de la plantilla, vamos a Plantilla - Edición de HTML - Continuar. Con la ayuda de CTRL+F buscamos </body> y encima pegaremos el código generado; damos click a Guardar plantilla.

7.§ La otra forma de agregar el reproductor a nuestro blog es mediante un gadget. Para ello nos vamos a Diseño - Añadir un gadget - HTML/Javascript. Pegamos el código en el gadgte y listo.

8.§ Si te quedó alguna duda puedes ver el siguiente video o dejarme un comentario.


SCM Music Player

sábado, 22 de septiembre de 2012

Instant WordPress: Una instalación portable

Instant WordPress es un programa que nos permite instalar WordPress en nuestra PC sin necesidad de software extra.

Una vez descargado el ejecutable, hacemos doble click en él, seleccionamos la carpeta o unidad USB donde queramos instalarlo y nada más; funcionará de modo independiente como cualquier otro programa portable.

Incluye WordPress 3.2, Apache 2.2.15, PHP 5, MySQL 5 y una serie de posts y páginas demo donde pueden probarse plugins o temas.


En el sitio del desarrollador hay una abundante documentación (en ingles) que puede ayudar a quien quiera jugar un poco y ver de que se trata uno de los sistemas de blogs más utilizados en el mundo.




REFERENCIAS:blogtecnia.com

Tips para acelerar la carga de tu blog

Esta es mi primera entrada en Ayuda Bloggers, y en esta ocasión decidí compartir algunos consejos que me han servido bastante para acelerar la velocidad de mi blog, pueden comprobar que tan veloz es mi blog para que vean lo efectivos que son estos tips.
Acelerar carga
Usar los scripts solamente cuando sean necesarios:
Primero hablaré del uso de condicionantes, las usamos para cargar cierto contenido en ciertas ocasiones, es decir que se cargue un script en las entradas y solo en las entradas. Esto es de inmensa utilidad ya que no cargaremos código innecesario en nuestra plantilla. Les mostrare un ejemplo con un script que solamente usaríamos en las entradas, que seria los post relacionados o entradas relacionadas.

Forma incorrecta

<script type='text/javascript'>
var defaultnoimage=&quot;&quot;;
var maxresults=4;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artículos Relacionados&quot;;
</script>
<script src='http:/javascript.com/related-post.js' type='text/javascript'/>

Forma correcta

<b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Condicionante para que el script cargue únicamente en las entradas -->
<script type='text/javascript'>
var defaultnoimage=&quot;&quot;;
var maxresults=4;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artículos Relacionados&quot;;
</script>
<script src='http:/javascript.com/related-post.js' type='text/javascript'/>
</b:if>
Con esa condicionante le estamos indicando a Blogger que queremos hacer funcionar ese script sólo en las entradas individuales, y por lo tanto el script no se carga en ninguna otra parte del blog.
Disminuir las peticiones HTML con 1 sólo archivo .JS:
Vamos con el segundo truco que también es muy importante: Se trata de combinar los scripts (Gracias a EmilioCobos.net por el dato), con esto logramos reducir peticiones http y por lo tanto aumentar la velocidad de carga.

Forma incorrecta

Scripts

Forma correcta

Scripts combinados
Hemos metido todos los scripts en un uno solo, pero tengan cuidado ya que algunos scripts no servirán si los combinamos, recomiendo que primero prueben los scripts en un blog de pruebas. Con esto hemos logrado que se descarguen menos archivos cuando entremos en nuestro blog y así disminuimos significativamente la carga del blog.
Elije un buen servidor para tus archivos .JS:
Por ultimo pero no menos importante, no uses servidores como Dropbox, El motivo: Dropbox es un buen sitio para alojar scripts, es bastante cómodo editar los scripts en tu escritorio y que se suban automáticamente, pero Dropbox tarda un poco cargando los archivos.

Archivo cargado desde Dropbox

Dropbox

Archivo cargado desde host externo

nixiweb
Como verán mientras que en Dropbox se tarda mas de un segundo cargando un archivo, en Nixiweb (Es la que uso yo), se tarda milésimas... Pueden usar medidores de carga para que vean como les fue ;)

viernes, 21 de septiembre de 2012

Descargar las plantillas de diseño de Blogger (Mínima, Rounders, Thisaway, etc.)

Desde que la nueva interfaz se lanzó primeramente a modo de prueba me fijé que no incluían las plantillas de diseño del 2006, ya saben, la plantilla Mínima, Rounders, Thisaway, Son of Moto, etc. Pensé que como la interfaz estaba en desarrollo sería cuestión de tiempo para que las agregaran, sin embargo ahora que la nueva interfaz ya es por defecto (y obligación) para todos los usuarios de Blogger veo que siguen sin incluirse esas plantillas.

En su momento hice un respaldo de todas esas plantilla temiendo que justamente no las fueran a incluir más y nos tuviéramos que privar de ellas. Ignoro si más adelante vayan a agregarlas a esa interfaz, pero entre si eso sucede o no, les dejo la descarga de cada una de estas plantillas por si alguien las necesita.

Estas plantillas las guardé desde octubre del 2011 así que seguro no tienen todos los códigos que Blogger continuamente va añadiendo, pero al instalarlas deberán agregarse esos datos de forma automática.

Para descargar cada una de ellas sólo selecciona el nombre de la plantilla que deseas.


  • Mínima
  • Mínima Dark
  • Mínima Blue
  • Mínima Ochre
  • Denim
  • Stretch Denim
  • Washed Denim
  • Stretch Denim Light
  • Rounders
  • Rounders 2
  • Rounders 3
  • Rounders 4
  • Mínima Lefty
  • Mínima Stretch
  • Mínima Lefty Stretch
  • Herbert
  • JellyFish
  • Harbor
  • Scribe
  • Dots
  • Dots Dark
  • No. 897
  • No. 565
  • Thisaway
  • Thisaway Blue
  • Thisaway Green
  • Thisaway Rose
  • Son of Moto
  • Mr. Moto
  • Ms. Moto
  • Snapshot
  • Snapshot Sable
  • Snapshot Tequila
  • TicTac
  • TicTac Blue
  • Tekka
  • Sand Dollar
  • Simple II
Recuerda que, para subir una plantilla en la nueva interfaz debes ir a la sección Plantilla, y en la parte superior derecha verás un botón que dice Crear copia de seguridad/Restablecer. Dando click ahí podrás subir tu plantilla en formato XML.