domingo, 31 de julio de 2011

Oloblogger

Oloblogger


Actualizando el botón +1 y aprovechando para recomendar la página principal

Posted: 30 Jul 2011 07:00 AM PDT

Hace unos días, Vagabundia nos avisaba de que el script para instalar el botón +1 había sido actualizado. Esto no quiere decir que el anterior código haya dejado de funcionar y que irremediablemente tengamos que cambiarlo. No, simplemente que hay una nueva versión.

Las actualizaciones suelen ser para mejorar, pero como no me he puesto a ver el contenido del script de Google (ni lo voy a hacer), no sé exactamente en qué consisten las novedades. Sin embargo, lo que si se ve a simple vista es que el nuevo código incluye un parámetro que por su nombre, posiblemente haga que el script funcione de manera asíncrona.

Esto suele ser bastante bueno para reducir la velocidad de carga del blog, así que aunque J.Miur tenía en el momento de redactar el post una pequeña reserva sobre su funcionalidad, servidor lo ha instalado y puede acreditar que hasta la fecha ha funcionado sin problemas.


El nuevo código lo podéis encontrar en la misma página que ya comentamos en su momento (Plusone button) y para actualizarlo sólo hay que tener en cuenta que este tiene dos partes.

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>

<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
window.___gcfg = {lang: 'es'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Las primeras dos líneas son las que "pintan" el bótón allá dónde queráis. Si instaláis ahora el botón por primera vez, las tenéis que insertar dónde queráis que aparezca: en la barra lateral, en la cabecera de cada post, tras estos... Sin embargo, si ya teníais el botón, estas líneas no hay que tocarlas y se quedan tal y cómo estén.

Las siguientes son la llamada al script que maneja todo el sistema y estas son precisamente las que han cambiado. Otra vez, distinguimos entre páginas que tenían el botón y las que no.

Si no teníais el +1, sólo tenéis que buscar en vuestra plantilla el código del último botón que hayamos "pintado" (podemos situar varios sin problemas) e insertar esta segunda parte después. En un principio esta es la única restricción (situarlo después), pero para no calentarnos la cabeza ni dejarnos la vista, quizás lo más rápido es colocarlo justo antes de </body>. De esta manera, con seguridad que no nos equivocaremos.

Si ya tenías el botón, el procedimiento es el mismo, pero previamente tendrás que borrar la línea que llamaba al antiguo código. Esta:

<script type='text/javascript' src='http://apis.google.com/js/plusone.js'/>

Puede que la tengas un poco distinta si incluiste alguno de los parámetros para adaptar el lenguaje o cambiar el tamaño (SIZE: small, medium, standard o tall.


Y ya que estamos facilitando la recomendación de nuestras entradas ¿por qué no hacerlo directamente con nuestro blog entero?

En un principio, el script lo que registra es la dirección dónde se encuentra el botón, por lo que la dirección principal sólo se recomendará con el +1 si estamos en dicha página principal. Pero quizás alguno quiera que también se pueda hacer esto desde cualquier página. El ejemplo lo tenéis ahora mismo en este blog, en la barra de la derecha.

Pues esto es también muy fácil una vez que ya tenemos todo lo anterior. Sólo hay que añadir otra vez el código que siguiendo la expresión que estamos utilizando en esta entrada, "pinta" el botón, pero esta vez incluyéndole una referencia a la dirección de nuestra página inicio.

<g:plusone href='http://NOMBREBLOG.blogspot.com'/></g:plusone>

Sería lo marcado en verde, respetando los posibles atributos que tuviérais en su caso.


Por último, si estáis aburridos y queréis redondear la cosa, en Ciudad Blogger tenéis también explicado un sistema para que el botón +1 muestre un mensaje cuando se pulse.


miércoles, 27 de julio de 2011

Oloblogger

Oloblogger


Imágenes en enlaces de navegación sólo con CSS. Blogger.

Posted: 26 Jul 2011 07:00 AM PDT

Es verano y por tanto además de estar medio de vacaciones también estoy muy perezoso, así que me vais a disculpar el bajo nivel de publicación y que hoy os venga con una cosa sencillita.

Para ir directamente al grano, se trata de sustituir los enlaces que de manera automática salen en todos las plantillas con el rótulo "Entradas más recientes", "Entradas antiguas" y "Página principal" por imágenes y además, incluyendo un efecto rollover o hover.

Esto ya vimos cómo hacerlo alterando la parte HTML de la plantilla, pero en esta ocasión lo vamos a hacer sólo cambiando las propiedades de las clases CSS que administran este tipo de enlaces. La ventaja de hacerlo de esta manera y no de la otra, es que cuando Blogger tenga a bien cambiarnos subrepticiamente nuestro código, las modificaciones que hayamos hecho en nuestra plantilla no afectarán tanto a las novedades que nos incorporen.

En las plantillas de 2006, la referencia para insertar el nuevo código son estas líneas que se reproducen a continuación:

#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}

Puede ser que en lugar de $startSide y $endSide, os aparezcan left y right, pero esto es indiferente. Hay que tomar todo ese trozo y sustituirlo por este otro:

.blog-pager {
background: $(paging.background);
position: relative;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
a.home-link {
position:absolute;
left:50%;
margin:0px auto 0px -22px;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://lh5.googleusercontent.com/-p1c6dHi1FpE/TfONzGPVH4I/AAAAAAAAOFk/Cxc6C61vFRI/home.jpg);
}
a.home-link:hover {
background:url(https://lh3.googleusercontent.com/--_riVMv6s0g/TfOVhDPXkXI/AAAAAAAAOFs/FZC4ti1QK6U/homeneg.jpg);
}
#blog-pager-newer-link a {
float:left;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://lh3.googleusercontent.com/-suBXj3s0yOU/TfONzDZ3_eI/AAAAAAAAOFc/s_pRGf23IVA/flecha1.jpg);
}
#blog-pager-newer-link a:hover {
background:url(https://lh3.googleusercontent.com/-GFENOjY2rwo/TfOVhIjHMdI/AAAAAAAAOF0/1i8MbwFCUbU/flecha1neg.jpg);
}
#blog-pager-older-link a {
float:right;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://lh5.googleusercontent.com/-m7PjPnyacHY/TfONzMAlrbI/AAAAAAAAOFg/RoTlwqQqvKI/flecha2.jpg);
}
#blog-pager-older-link a:hover {
background:url(https://lh4.googleusercontent.com/-FxzfedowoA0/TfOVhCWQfkI/AAAAAAAAOFw/4YLOBH-G0vc/flecha2neg.jpg);
}

La base del truco consiste en asignar un fondo gráfico determinado a las clases que controlan cada uno de los tres tipos de enlaces (home-link, blog-pager-newer-link y blog-pager-older-link) y al mismo tiempo, mandar bien lejos el texto por defecto, con un sangrado negativo (text-indent). Esto hace que sólo sea el texto el que desaparezca, viéndose sin problemas la imagen de fondo. Es necesario que el ancho y el alto de cada clase se ajuste al tamaño de las imágenes a utilizar.

Los efectos hover son opcionales y para suprimirlos sólo habría que omitir las clases y sus propiedades, que terminan con esa pseudoclase (:hover).

Por supuesto, las imágenes de este ejemplo son sólo eso, un ejemplo y las podéis/debéis personalizar a vuestro gusto. Sólo habría que sustituir las direcciones propuestas por las vuestras y cambiar los anchos y altos por los que correspondan.

En plantillas del nuevo diseñador sólo encontraréis como referencia la clase .blog-pager. En ese caso, sólo añadís en ella la propiedad position:relative; y a continuación insertáis el resto de código anteriormente reproducido, antes de ]]></b:skin>


jueves, 21 de julio de 2011

Pasar Windows XP Home English a XP Profesional Español







EL


AGUA






Taringa

Pasar Windows XP Home English a XP Profesional Español


Hola gente, hoy vamos a aprender como cambiar Windows XP Home Edition Ingles al Xp Profesional Español. 


Si tu sistema operativo original se encuentra en inglés y a demás es una versión Home, te habras dado cuenta que el único paquete de lenguaje en español disponible en Microsoft es el multilingual user interface pack (MUI) destinado para las versiones Server y XP profesional y el language interface pack (LIP) esta disponible solo para la versión tablet edition, lo cual deja fuera a todas las versiones home. 


Lo primero que se debe hacer es "convertir a XP home en XP professional", oficialmente es imposible hacer esta migración sin tener que formatear y reinstalar todo el sistema operativo, pero existe un truco para hacerlo los pasos son los siguientes: 

1.- Tener permisos de administrador. 2.- Hacer clic en Start, Run, escribir Regedit y pulsar enter.3.- Navegar a la dirección HKEY_LOCAL_MACHINE/SYSTEM/ControlSet00X/Control/ProductOptions, donde ControlSet00X tenga el número más alto. (A veces es necesario cambiarlo en todos los ControlSet00x)
4.- Borrar la clave de registro con nombre ProductSuite.
5.- Crear un nuevo valor Dword con el nombre de brand.
6.- Poner cero a los valores de la entrada brand.
7.- Reiniciar el sistema operativo. 8.- Presionar F8 para mostrar el menú de inicio de Windows XP. 9.- Seleccionar la opción Last Known Good Configuration y presionar la tecla enter. 10.- Dar clic con el botón secundario del mouse a My PC y seleccionar propierties, solo para verificar que su XP Home es ahora un XP professional. 
Es en este punto donde ya se puede utilizar MUI para cambiar el lenguaje del sistema operativo, solo hay que descargarlo y seguir los pasos de instalación, cuando finalice la instalación ir a panel de control, configuración regional y de idioma, dar clic en la pestaña idioma y seleccionar español, cuando vuelva a reiniciar el sistema operativo, los menús aparecerán en español. 
Es necesario que tengas instalado el service pack 2 antes de cambiar el idioma de su sistema operativo. 
Lo primero que debemos hacer es descargar el MUI (Multilingual User Interface); ocupa 90.4MB, y dispone sólo el idioma español. Si quieren pasar a otros idiomas, el MUI puede llegar a ocupar hasta 1GB. 
Link MUI (Rapidshare) 

Link MUI (Mediafire) 
http://www.mediafire.com/file/o2zu5tmztnz/Windows%20XP%20Multilingual%20User%20Interface%20Pack.rar 

Link de actualizacion si no tenes Service Pack 2 instalado. 

Ahora ejecutamos el MUI y seleccionamos el idioma a instalar, obviemente spanish. 
Por último, luego de reiniciar la PC, vamos a la configuración regional de nuestro equipo, y dejamos todo en español. 
Espero que les sirva como me sirvio a mi. 
Un abrazo gente.























TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

jueves, 14 de julio de 2011

Oloblogger

Oloblogger


Chuleta para crear formas simples con CSS3

Posted: 13 Jul 2011 01:31 AM PDT

Las siguientes formas no son imágenes, sino CSS que incluye algunas de las últimas propiedades del estándar. Puedes probar a descargarlas, pero sólo para comprobar que efectivamente sólo tenemos ante nosotros fondos, bordes y unas pocas curvas.



Sabiendo que en una capa con ancho o alto igual a cero los bordes sí que se muestran del ancho con que se definan, que estos se solapan formando ángulos que pueden ser a su vez redondeados y como no, con un poco de lógica, se pueden construir estas y otras muchas más formas simples... o más complicadas.

La cosa funciona con un div vacío al cual le hemos asignado una ID. Previamente, a esa ID le hemos asignado una serie de propiedades CSS. Por ejemplo, lo que parece un banderín violeta (que me perdonen la señoras por mi incultura sobre los colores) se construiría con este código.

En la parte CSS de nuestra plantilla incluimos la ID bookmark-ribbon y sus propiedades:
#bookmark-ribbon {
width: 0;
height: 100px;
border-left:50px solid purple;
border-right: 50px solid purple;
border-bottom:35px solid transparent;
}

Y dónde queramos que aparezca la forma, se colocaría una capa como esta:
<div id="bookmark-ribbon"></div>

Experimentando un poco sobre este tipo de código, podéis comprobar mejor cómo funciona, pero por si acaso, en Land of Web han sido tan amables que han recopilado 36 de estas en una estupenda hoja de ayuda que incluye el código CSS ilustrado con la imagen que podremos formar ► CSS3 Simple Shapes – Cheat Sheet.

CSS3: Como es habitual, sólo disponible en los navegadores más modernos...


sábado, 9 de julio de 2011

Oloblogger

Oloblogger


¡Hala! Todos a jugar con la nueva interface de Blogger

Posted: 08 Jul 2011 01:00 AM PDT

Noticia breve.

Unos la tenían y otros no, pero desde anoche, todos los usuarios de Blogger pueden ya ver y trastear el nuevo escritorio. Así lo anunciaron desde su blog.

Pero ojo... No os volváis locos buscándolo en vuestro acceso normal (http://www.blogger.com), porque de momento está en el laboratorio, es decir en Blogger Draft, el banco de pruebas de todas las novedades de esta plataforma.


La primera tontería que me ha agradado mucho, ha sido la incorporación de un calendario en el apartado para programar entradas. Realmente cómodo, aunque tengo que añadir que al programar esta me dió un fallo y el feed envió un par de tweets con enlaces rotos, como si ya se hubiera publicado el post.


Un pasito más dentro del proceso de modernización y re-styling de todos los productos de Google.

Agradecemos el soplo a @Pizcos, que cazó el tweet al vuelo y habilmente lo pasó raudo y veloz ;)


Correo Vaishnava