REFERENCIAS:Blogtecnia
Glogster: Un sitio para crear ... glogs |
No sé si Glogster es una tontera o si realmente es algo que puede resultar útil, de todas maneras es interesante de ver porque está muy bien hecho y funciona de manera tan intuitiva que es muy complicado pretender explicarlo.
Lo cierto es que ingresando al sitio se nos permite crear una página donde podemos mezclar textos, imágenes, audios y videos de muchas maneras, subiendo los archivos o extrayéndolos de otros sitios e ir armando ... glogs ... es decir páginas individuales, públicas o privadas que pueden ser compartidas en cualquier red social o incrustadas en otro sitio.
Para probarlo, basta entrar en esta página y jugar un rato. Obviamente, si luego queremos guardarlo o publicarlo nos pedirán que nos registremos de manera gratuita, un proceso que es sencillo e inmediato.
Lo cierto es que ingresando al sitio se nos permite crear una página donde podemos mezclar textos, imágenes, audios y videos de muchas maneras, subiendo los archivos o extrayéndolos de otros sitios e ir armando ... glogs ... es decir páginas individuales, públicas o privadas que pueden ser compartidas en cualquier red social o incrustadas en otro sitio.
Para probarlo, basta entrar en esta página y jugar un rato. Obviamente, si luego queremos guardarlo o publicarlo nos pedirán que nos registremos de manera gratuita, un proceso que es sencillo e inmediato.
Como dije, todo es muy intuitivo y es imposible explicar todas las opciones que hay; en todo caso, lo único que puede aclararse es que para insertarlo en una web nos dan un código con un IFRAME como este:
<iframe src= "http://www.glogster.com/glog.php?glog_id=XXXXXXX&scale=100" width="960" height="1300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="overflow: hidden;"></iframe>Y, como se ve, eso lo mostrará en tamaño gigante (960x1300); para reducirlo, no sólo debemos reducir e valor de width y height sino también el valor del parámetro scale que indica un porcentaje (en este caso 100%). Así que, por ejemplo, para no hacer cuentas, lo ponemos todo a la mitad:
<iframe src= "http://www.glogster.com/glog.php?glog_id=XXXXXXX&scale=50" width="480" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="overflow: hidden;"></iframe>
Evitar que usen iframes de nuestro sitio |
En Blogger estamos acostumbrados a ver IFRAMEs, se usan en los comentarios y en muchos de los gadgets que agregamos. Es una técnica sencilla y como cualquier otra, tiene sus ventajas y desventajas.
Un IFRAME es una ventana a otro sitio, digamos que con ella, creamos un agujero en nuestra página y alli mostramos el contenido de otra página, algo que está en otra parte y sobre lo cual, por supuesto, no tenemos control. Esta etiqueta tiene algunos atributos que pueden usarse y casi como todas, acepta estilos CSS pero, todo eso, sólo afecta al marco de la ventana en si misma y no a su contenido.
Por supuesto, como todas las demás, no es una etiqueta ni mala ni buena pero, un problema que ha surgido en los últimos tiempos es que hay sitios que incrustan otros y lo hacen con el solo propósito de aprovecharse de su contenido. Es sencillo; creo un sitio en cualquier servidor gratuito que me permita hacer una página web, lo rodeo de publicidad, le pongo mi nombre y adentro meto otro sitio. Negocio redondo. Hasta en el mismo Blogger puedo hacerse algo así. Por ejemplo, podría crear un blog y meter el contenido de otro. No será muy elegante pero estamos hablando de robos y la elegancia pasa a ser un elemento intrascendente.
Aunque no lo parezca, esto ya se está haciendo común así que lo que debmos hacer, sin caer en la paranoía, es protegernos.
La solución es simple y la vamos a ver en muchos sitios de la web donde se trata este tema; un script que dice algo así:
if (top.location != self.location) { top.location = self.location; }
y que lo que hace es redireccionar cualquier sitio que coloque un IFRAME con nuestra URL y lo envie de vuelta a casa, es decir a nuestra página.
En el caso de Blogger se nos complica un poquito ya que el mismo Blogger usa IFRAMES para, por ejemplo, su Editor de Plantillas así que si pusieramos esto directamente, no lograríamos entrar en la edición HTML de la plantilla a menos que lo hagamos rápido. Para evitar eso, tomo el script normal y le agrego un par de línes extras que verificarán si estamos dentro del dominio de blogger y si es así no hará nada.
Debemos poner el script al inicio de la plantilla para que el redireccionamiento sea inmediato así que buscamos <head> y debajo, agregamos esto (con cuidado y probando que todo funcione correctamente).
ACTUALIZADO PARA QUE FUNCIONE EN EL NUEVO DISEÑO DE BLOGGER
Un IFRAME es una ventana a otro sitio, digamos que con ella, creamos un agujero en nuestra página y alli mostramos el contenido de otra página, algo que está en otra parte y sobre lo cual, por supuesto, no tenemos control. Esta etiqueta tiene algunos atributos que pueden usarse y casi como todas, acepta estilos CSS pero, todo eso, sólo afecta al marco de la ventana en si misma y no a su contenido.
Por supuesto, como todas las demás, no es una etiqueta ni mala ni buena pero, un problema que ha surgido en los últimos tiempos es que hay sitios que incrustan otros y lo hacen con el solo propósito de aprovecharse de su contenido. Es sencillo; creo un sitio en cualquier servidor gratuito que me permita hacer una página web, lo rodeo de publicidad, le pongo mi nombre y adentro meto otro sitio. Negocio redondo. Hasta en el mismo Blogger puedo hacerse algo así. Por ejemplo, podría crear un blog y meter el contenido de otro. No será muy elegante pero estamos hablando de robos y la elegancia pasa a ser un elemento intrascendente.
Aunque no lo parezca, esto ya se está haciendo común así que lo que debmos hacer, sin caer en la paranoía, es protegernos.
La solución es simple y la vamos a ver en muchos sitios de la web donde se trata este tema; un script que dice algo así:
if (top.location != self.location) { top.location = self.location; }
y que lo que hace es redireccionar cualquier sitio que coloque un IFRAME con nuestra URL y lo envie de vuelta a casa, es decir a nuestra página.
En el caso de Blogger se nos complica un poquito ya que el mismo Blogger usa IFRAMES para, por ejemplo, su Editor de Plantillas así que si pusieramos esto directamente, no lograríamos entrar en la edición HTML de la plantilla a menos que lo hagamos rápido. Para evitar eso, tomo el script normal y le agrego un par de línes extras que verificarán si estamos dentro del dominio de blogger y si es así no hará nada.
Debemos poner el script al inicio de la plantilla para que el redireccionamiento sea inmediato así que buscamos <head> y debajo, agregamos esto (con cuidado y probando que todo funcione correctamente).
ACTUALIZADO PARA QUE FUNCIONE EN EL NUEVO DISEÑO DE BLOGGER
<script type='text/javascript'>
//<![CDATA[
var laURL, blogger;
laURL= window.location.href;
blogger = laURL.indexOf("token=");
if(blogger==-1) {
if (top.location != self.location) { top.location = self.location; }
}
//]]>
</script>Vamos a un ejemplo. Otra vez me disfrazo de ladrón, creo un blog VP Iframe y allí coloco un IFRAME a otro sitio pero, ese otro sitio tiene el script agregado a su plantilla así que apenas se abra el primero, nos redireccionará al segundo.
La barra de navegación de Blogger |
El par de códigos includable e include son una de las mejores ideas que tiene Blogger. Con ellos podemos ahorrarnos trabajo a la hora de escribir cosas que se repiten. Un includable es una "subrutina" o una función, algo que se ejecutará cuando lo deseemos, llamándolo con include.
Es fácil de entender si vemos uno elemental como este:
Es fácil de entender si vemos uno elemental como este:
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> 
</a>
</span>
</b:if>
</b:includable>
Que lo que hace es agregar el ícono de edición donde lo querramos, para eso es que usamos esto:
<b:include data='post' name='postQuickEdit'/>En resumen, include "incluye" el código de un includable cuyo id es igual al atributo name; en este caso, postQuickEdit.
Todos los includables deben tener un ID y este, debe ser único pero no todos deben tener el atributo data que sólo es necesario si deseamos "transferirle" algún tipo de dato. Ese es el caso del llamado nextprev que agrega una "barra de navegación" al final de las entradas:
Todos los includables deben tener un ID y este, debe ser único pero no todos deben tener el atributo data que sólo es necesario si deseamos "transferirle" algún tipo de dato. Ese es el caso del llamado nextprev que agrega una "barra de navegación" al final de las entradas:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
.......
</div>
</b:includable>
Está al final de nuestra página pero, no es obligatorio que esté allí; podemos colocarlo arriba si movemos esta línea:
<b:include name='nextprev'/>
y la colocamos inmediatamente después de:
<b:includable id='main' var='top'>
Tampoco hay nada que nos impida colocar dos barras, una arriba y otra abajo de nuestra página y personalizarlas de tal modo que se muestren diferentes; por ejemplo:
<b:includable id='main' var='top'>
<div id='upper-blog-pager'><b:include name='nextprev'/></div>
.......
.......
.......
<div id='lower-blog-pager'><b:include name='nextprev'/></div>
</b:includable>
Les colocamos IDs diferentes por si queremos agregarles CSS. Por defecto las plantillas tienen estas definiciones de estilo:
#blog-pager-newer-link { float: left; }
#blog-pager-older-link { float: right; }
#blog-pager { text-align: center; }que colocan el texto Entradas antiguas a la derecha, Entradas más recientes a la izquierda y Página principal en el centro. Para modificar esos textos o para cambiarlos por imágenes, basta expandir la plantilla y buscar estos tres códigos:
<data:newerPageTitle/> es el texto Entradas más recientes
<data:olderPageTitle/> es el texto Entradas antiguas
<data:homeMsg/> es el texto Página principal
podemos borrarlos y poner un texto personal o cambiarlos por una imagen usando la etiqueta IMG.
<data:newerPageTitle/> es el texto Entradas más recientes
<data:olderPageTitle/> es el texto Entradas antiguas
<data:homeMsg/> es el texto Página principal
podemos borrarlos y poner un texto personal o cambiarlos por una imagen usando la etiqueta IMG.
Onbile: La versión móvil de tu blog |
Onbile es un servicio gratuito que nos permite crear una versión de nuestro sitio, que funcione en móviles.Usarlo es muy sencillo. Entramos al sitio y seguimos los pasos que nos indican. Básicamente, agregamos la dirección del blog y luego elegimos entre los diferentes diseños que además, podemos personalizar, agregando o eliminando secciones.
Una vez que nos decidimos, solicitamos el código que nos será confimado por mail.
Este código no es otra cosa que un script que agregaremos antes de </head>.
<script type='text/javascript' src='http://www.onbile.com/websites/000000000000000000000000000000'></script>y cuyo código es de una pocas líneas que simplemente, verifican el tipo de navegador de los visitantes y, en caso de ser un móvil, redirige nuestro sitio a un perfil público que es accesible desde cualquier sistema:
Perfil público: http://onbile.com/vagabundia
Perfil público: http://onbile.com/vagabundia
Click para ver el video.
Image Silider usando sólo CSS3 |
Deluxe Blog Tips nos muestra una forma de crear un slider de imágenes utilizando sólo CSS3. La idea es bastante simple pero, el problema es que no funcionará en ninguna versión de Internet Explorer ya que utiliza un selector que ese navegador aún no ha implementado. Del mismo modo, el resultado en Firefox no es tan interesante como lo es en Chrome, Safari y Opera ya que habrá que esperar a que salga la version 3.7 para que las transiciones se vean animadas.
Claro que todo esto no implica que no podamos jugar un rato y empezar a acostumbrarnos a lo que vendrá.
El slider lo creamos fácilmente:
Claro que todo esto no implica que no podamos jugar un rato y empezar a acostumbrarnos a lo que vendrá.
El slider lo creamos fácilmente:
<div id="elSlider">
<img id="imgSlider1" src="URL_imagen_1" />
<img id="imgSlider2" src="URL_imagen_2" />
<img id="imgSlider3" src="URL_imagen_3" />
</div>
<div id="numSlider">
<a href="#imgSlider1">1</a>
<a href="#imgSlider2">2</a>
<a href="#imgSlider3">3</a>
</div>
Y ahora, el CSS del demo:
<style>
#elSlider {
background-color: #000;
height: 350px;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 450px;
/* propiedades CSS3 */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 0 30px #666 inset;
-webkit-box-shadow: 0 0 30px #666 inset;
box-shadow: 0 0 30px #666 inset;
}
#elSlider img {
height: 300px;
left: -450px;
opacity: 0;
position: absolute;
top: 25px;
width: 400px;
z-index: 1;
/* propiedades CSS3 */
-moz-transition: all linear 500ms; /* Firefox 3.7 */
-webkit-transition: all linear 500ms; /* Safari y Chrome */
-o-transition: all linear 500ms; /* Opera */
transition: all linear 500ms; /* w3org */
}
#elSlider img:target {
left: 25px;
opacity: 1;
z-index: 9;
}
#elSlider img:first-child {
left: 25px;
opacity: 1;
}
#numSlider {
text-align: center;
}
#numSlider a {
background-color: #000;
border: 1px solid #444;
color: #FFF;
font-family: Century Gothic;
font-size: 24px;
font-weight: normal;
margin: 0 1px;
padding: 1px 10px 3px;
text-decoration: none;
/* propiedades CSS3 */
-moz-box-shadow: 0px 0px 20px #444 inset;
-webkit-box-shadow: 0px 0px 20px #444 inset;
box-shadow: 0px 0px 20px #444 inset;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#numSlider a:hover {
background-color: #222;
border: 1px solid #666;
}
</style>
Dos packs de íconos de deviantart |
El nuevo código para insertar videos de YouTube |
Google debe haber comprado alguna licencia para monopolizar la etiqueta IFRAME porque la usa por todos lados. Ahora, en YouTube API Blog anuncia que están experimentando con un nuevo código para insertar videos que, justamente, hace uso de esa etiqueta:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe>
Justifican el cambio explicando que con este nuevo código pueden verse los videos tanto con Flash como con los nuevos reproductores HTML5 dependiendo del navegador que se use y de las preferencias del usuario. Los navegadores compatibles son Firefox, Chrome, Opera, Internet Explorer 9, Safari y eventualmente, Internet Explorer con Google Chrome Frame instalado. Las preferencias debemos habilitarlas en nuestra cuenta, activando la versión beta de HTML5.
Por el momento, todo está muy verde pero, aparentemente, pasado el tiempo de pruebas, el nuevo código será el que nos ofrezcan por defecto.
En la práctica, por ahora podemos usar cualquiera de ellos sin notar grandes diferencias; basta saber que debemos colocar el ID del video a reproducir y establecer el tamaño modificando los atributos width y height.
Por el momento, todo está muy verde pero, aparentemente, pasado el tiempo de pruebas, el nuevo código será el que nos ofrezcan por defecto.
En la práctica, por ahora podemos usar cualquiera de ellos sin notar grandes diferencias; basta saber que debemos colocar el ID del video a reproducir y establecer el tamaño modificando los atributos width y height.
REFERENCIAS:Google Operating System
IE9.js: Solucionando algunas incompatibilidades |
Para quien utiilza alguno de los scripts de Dean Edwards que permiten agregar soporte para que Internet Explorer supere alguna de las limitaciones en la interpretación de ciertas propiedades CSS, ya hay una nueva versión disponible que ha agregado algunas funciones extras.
Hasta ahora, había dos versiones: IE7.js e IE8.js; ahora,se ha sumado IE9.js.
Cualquiera de ellas puede ser utilizada directamente desde los repositorios de Google Code así que no es necesario descargar los archivos. Para esta última versión, lo que deberíamos hacer es agregar lo siguiente antes de </head>:
<!--[if lt IE 9]>
<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js' type='text/javascript' />
<![endif]-->
No se trata de alguna clase de script milagroso, sólo sirve si nuestro diseño utiliza selectores ya que permite que IE interprete algunos de ellos:
::after, ::before, :active, :focus, :lang(), :checked, :disabled, :empty, :enabled, :first-of-type, :last-child, :last-of-type, :not(), :nth-child(), :nth-last-child(), :nth-last-of-type(), :nth-of-type(), :only-child, :only-of-type, :root, :target, etc
propiedades tales como:
border-spacing, box-sizing, content y opacity
y da soporte elemental para algunas etiquetas de HTML5:
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time y video.
Hasta ahora, había dos versiones: IE7.js e IE8.js; ahora,se ha sumado IE9.js.
Cualquiera de ellas puede ser utilizada directamente desde los repositorios de Google Code así que no es necesario descargar los archivos. Para esta última versión, lo que deberíamos hacer es agregar lo siguiente antes de </head>:
<!--[if lt IE 9]>
<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js' type='text/javascript' />
<![endif]-->
No se trata de alguna clase de script milagroso, sólo sirve si nuestro diseño utiliza selectores ya que permite que IE interprete algunos de ellos:
::after, ::before, :active, :focus, :lang(), :checked, :disabled, :empty, :enabled, :first-of-type, :last-child, :last-of-type, :not(), :nth-child(), :nth-last-child(), :nth-last-of-type(), :nth-of-type(), :only-child, :only-of-type, :root, :target, etc
propiedades tales como:
border-spacing, box-sizing, content y opacity
y da soporte elemental para algunas etiquetas de HTML5:
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time y video.
REFERENCIAS:Google Code
Rotaciones libres en cualquier navegador con CSS |
A medida que más sitios hablan del CSS3, algunos van descubriendo que ciertas caracterísiticas ya existian desde hace tiempo en los filtros de Internet Explorer. Sin duda, no son lo mismo pero algunas cosas pueden usarse con limitaciones y es bueno que los que crean tutoriales ejemplos los incorporen ya que sino, caemos en el error de creer que, o debemos limitarnos a lo que Internet Explorer decide u odiarlo porque no hace lo que quisiéramos que haga. Ninguna de las dos posturas es correcta, ese, como todos los demás navegadores, tienen bugs y tratan las propiedades de manera diferente así que, mejor nos acostumbramos a eso porque es algo que no va a cambiar jamás.
css3please.com es uno de esos tutoriales que ha comenzado a incorporar esos filtros y nos ayuda a utilizarlos, ya que nos permite ir viendo los resultados online y copiar el código necesario. Obviamente, no lo hará con todas las propiedades ya que no todas tienen un equivalente pero, es una buna forma de aprender.
La que me resultó más interesante es la rotación. Si bien en Internet Explorer hay un filtro para eso, está limitado a rotaciones simples de 90 grados o de 180 grados lo que hace que podamos "invertir" algo pero no "rotarlo" de manera libre:
css3please.com es uno de esos tutoriales que ha comenzado a incorporar esos filtros y nos ayuda a utilizarlos, ya que nos permite ir viendo los resultados online y copiar el código necesario. Obviamente, no lo hará con todas las propiedades ya que no todas tienen un equivalente pero, es una buna forma de aprender.
La que me resultó más interesante es la rotación. Si bien en Internet Explorer hay un filtro para eso, está limitado a rotaciones simples de 90 grados o de 180 grados lo que hace que podamos "invertir" algo pero no "rotarlo" de manera libre:
-webkit-transform: rotate(VALORdeg);
-moz-transform: rotate(VALORdeg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);
donde:
0 es no rotar
1 rota 90 grados
2 rota 180 grados
3 rota 270 grados (-90 grados)
 |  |  |  |
Gracias a otro filtro de IE llamado Matrix, también podemos rotar algo en ángulos diferentes. Es uno de esos filtros tan complejos que ni siquiera vale la pena entender si es que nos queremos limitar a hacer algo sencillo. Para eso está la página que nos ayuda con los datos y basta poner el ángulo para que nos de la respuesta.
Vamos a crear entonces un DIV con cualquier contenido y abusando un poco de algunas otras propiedades como las gradientes:
Vamos a crear entonces un DIV con cualquier contenido y abusando un poco de algunas otras propiedades como las gradientes:
div.rotar {
background-image: -moz-linear-gradient(100% 100% 90deg, #000, #662200);
background-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(#662200));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF662200');
border: 1px solid #FFF;
color: #FFF;
font-family: Verdana;
font-size: 24px;
margin: 0 auto;
padding: 20px;
text-align: center;
width: 250px;
}
<div class="rotar"> ....... </div>Lo que veríamos es esto:
Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!
Y ahora, lo rotamos 90 grados en un sentido:
.derecha90 {
-moz-transform: rotate(45deg); /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-webkit-transform: rotate(45deg); /* Safari y Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE */
}
<div class="rotar derecha90"> ....... </div>Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!
Y hacemos lo mismo en el otro sentido:
.izquierda90 {
-moz-transform: rotate(-45deg); /* Firefox */
-o-transform: rotate(-45deg); /* Opera */
-webkit-transform: rotate(-45deg); /* Safari y Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476); /* IE */
}
<div class="rotar izquierda90"> ....... </div>Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!
Agregar Activity Feed de Facebook a Blogger |
Activity Feed es otro de los plugins sociales de Facebbok que podemos agregar en nuestro blog.
Lo que mostrará son las últimas referencias encontradas a un determinado sitio y será visible sin importar si los visitantes estan o no están logueados; si no lo están, se agregará automáticamente un botón para entrar. De alguna manera, es una forma de chequear quienes han marcado alguna entrada con Me Gusta o enlazado nuestra página.
Para usarlo, colocamos el Dominio del sitio que queremos mostrar (por ejemlo, el de nuestro blog) y luego, como con todos los demás, seleccionamos ancho, alto y alguna de las opciones gráficas disponibles, la última de las cuales llamada Recommendations, tildamos o destildamos según nos interese que se muestre algo si es que no se encuentra nada del sitio que seleccionamos.
Es importante establecer el dominio exacto porque el plugin permite rastrear dominios, subdominios o incluso páginas individuales.
Una vez que decidimos todo eso y estamos satisfechos con el resultado que puede ser previsualizado constantemente, hacemos click en Get Code y allí se nos dan dos opciones: usar un IFRAME o un script. Si elegimos el primero de ellos, basta copiar y pegar el código donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML de la sidebar.
Si elegimos el script, debemos verificar si ya tenemos agregado el cargador genérico para todos los plugins; si no es así, agregamos lo siguiente justo después de <body>:
Lo que mostrará son las últimas referencias encontradas a un determinado sitio y será visible sin importar si los visitantes estan o no están logueados; si no lo están, se agregará automáticamente un botón para entrar. De alguna manera, es una forma de chequear quienes han marcado alguna entrada con Me Gusta o enlazado nuestra página.
Para usarlo, colocamos el Dominio del sitio que queremos mostrar (por ejemlo, el de nuestro blog) y luego, como con todos los demás, seleccionamos ancho, alto y alguna de las opciones gráficas disponibles, la última de las cuales llamada Recommendations, tildamos o destildamos según nos interese que se muestre algo si es que no se encuentra nada del sitio que seleccionamos.
Es importante establecer el dominio exacto porque el plugin permite rastrear dominios, subdominios o incluso páginas individuales.
Una vez que decidimos todo eso y estamos satisfechos con el resultado que puede ser previsualizado constantemente, hacemos click en Get Code y allí se nos dan dos opciones: usar un IFRAME o un script. Si elegimos el primero de ellos, basta copiar y pegar el código donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML de la sidebar.
Si elegimos el script, debemos verificar si ya tenemos agregado el cargador genérico para todos los plugins; si no es así, agregamos lo siguiente justo después de <body>:
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'PROFILE_ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>Donde reeemplazamos PROFILE_ID por el número que nos identifica en Facebook y que veremos en la URL de cualquiera de nuestras páginas.
Hecho eso, agregamos el plugin donde se nos de la gana y para eso, basta colocar el siguiente código básico:
Hecho eso, agregamos el plugin donde se nos de la gana y para eso, basta colocar el siguiente código básico:
<fb:activity site="URL_elegida"></fb:activity>o incluso, colocar las distintas opciones en el mismo código:
<fb:activity site="URL_elegida">" width="400" height="350" header="false" colorscheme="dark" font="tahoma" border_color="#FFF" recommendations="false"></fb:activity>Una variante de este plugin es el llamado Recommendations y la forma de insertarla es exactamente la misma.
<fb:recommendations site="URL_elegida"></fb:recommendations>
Ultimas entradas con miniaturas |
El gadget Lista de blogs es interesante porque es una de las formas más sencillas de mostrar el contenido de los feeds de cualquier sitio pero, también lo podemos usar para mostrar los nuestros, por ejemplo, las últimas entradas.Tiene una ventaja sobre otros sistemas: podemos mostrar miniaturas que se correspondan con las imágenes que haya en esas entradas pero tiene una limitación, sólo muestra una entrada por blog. Sin embargo, ya que los feeds son una dirección URL a la que podemos acceder agregándole algunos parámetros, podríamos utilizar esa facilidad para mostrar varias entradas del mismo sitio.
Los parámetros en cuestión son start-index max-results que son los mismos que se utilizan para agregar varios sitemaps. Lo empleamos agregándolos al final de la URL:
http://miblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1
hará que se lea una sola entrada, la última ya que por defecto, los feeds están ordenados cronológicamente. Del mismo modo:
http://miblog.blogspot.com/feeds/posts/default?start-index=2&max-results=1 mostrará la segunda
http://miblog.blogspot.com/feeds/posts/default?start-index=3&max-results=1 mostrará la tercera
y así sucesivamente.
Entonces, vamos a agregar un elemento Lista de Blogs e iremos poniendo las URLs de nuestro sitio, cambiando start-index. Pondremos tantos como se nos ocurra y marcaremos las opciones a gusto.
Si guardamos eso veremos el gadget con las últimas entradas de nuestro blog pero, aún así, podríamos intentar personalizarlo más ya que tiene propiedades definidas por defecto por el mismo Blogger y como el código es accesible, nada impide que lo cambiemos. Entonces, primero crearemos un elemento Lista de blogs, agregaremos las URLs, guardaremos y luego, en la parte de Edición HTML expandiremos la plantilla y veremos el widget que se llamará BlogList1, BlogList2 o algo similar, dependiendo de si ya tenemos agregado otro gadget del mismo tipo:
<b:widget id='BlogList1' locked='false' title='EL TITULO' type='BlogList'> <b:includable id='main'> ... borraremos todo lo que está acá y lo reemplazaremos ... </b:includable> </b:widget>
Ahora, borraré el contenido completo del includable y lo reemplazaré por otro donde he eliminado ciertas cosas y reemplazado las clases CSS para evitar conflictos:
<b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <div class='milista' expr:id='data:widget.instanceId + "_container"'> <!-- el gadget es una lista --> <ul expr:id='data:widget.instanceId + "_blogs"'> <b:loop values='data:items' var='item'> <!-- cada item de la lista corresponde a una entrada --> <li> <!-- inicio rectángulo de cada entrada --> <div class='UEcontenido'> <!-- la imagen flotará a la izquierda --> <div class='UEthumbnail'> <b:if cond='data:item.itemThumbnail'> <!-- si en el post hay una imagen, la usamos --> <img class='UEsithumb' expr:src='data:item.itemThumbnail.url'/> <b:else/> <!-- si no hay una imagen, ponemos una imagen personal --> <!-- acá debemos poner la dirección URL de la imagen a utilizar --> <img class='UEnothumb' src='URL_imagen_por_defecto'/> </b:if> </div> <!-- el titulo y enlace de la entrada --> <div class='UEtitulo'> <a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a> </div> <!-- el texto con el resumen de la entrada --> <div class='UEresumen'><data:item.itemSnippet/></div> </div> <!-- final rectángulo de cada entrada --> <div style='clear: both;'/> </li> </b:loop> </ul> </div> </div>
Por supuesto, si se comprende qué es cada parte, esto podría organizarse de cualquier otra forma; en este ejemplo, sólo faltaría agregar el CSS antes de </head>:
<style>
.milista ul { border-bottom: 1px dotted #555; list-style-type: none; margin: 0; padding: 0; }
.milista ul li { background-color: #000; border-top: 1px dotted #555; clear: both; list-style: none; }
.milista ul li:hover { background-color: #123; }
.milista .UEcontenido { padding: 5px; }
.milista .UEtitulo { line-height: 50px; height: 50px; }
.milista .UEtitulo a { color:#ABC; font-family: Tahoma; font-size: 13px; font-weight: bold; }
.milista .UEtitulo a:hover { color: #CDE; text-decoration: none; }
.milista .UEthumbnail { float: left; margin: 0 5px 0 0; }
.milista img { height: 50px; width: 50px; }
.milista .UEresumen { clear: both; color: #999; font-family: Tahoma; font-size: 10px; }
</style>
Las etiquetas META description duplicadas |
zona lerh preguntaba si era posible eliminar las etiquetas META de descripción duplicadas que es un error que veremos habitualmente cuando entramos en las Herramientas para Desarrolladores de Google y miramos Diagnósticos | Sugerencias en HTML.
¿Qué significa esto?
Las etiqueta META DESCRIPTION se utiliza para "describir" nuestro sitio, es un texto relativamente corto que intenta resumir el contenido del blog. Es lo que vemos en cualquier buscador debajo de cada enlace.
Las etiqueta META DESCRIPTION se utiliza para "describir" nuestro sitio, es un texto relativamente corto que intenta resumir el contenido del blog. Es lo que vemos en cualquier buscador debajo de cada enlace.
Lo que siempre se recomienda es que esa descripción no sea del blog en general sino que describa cada página, es decir, si estamos en una entrada que habla de aviones, que se refiera a eso y si la entrada habla de ositos de peluche, que diga otra cosa. Así, el home debería tener una descripciòn genérica y luego, cada página una descripción diferente.
En Blogger es imposible y aún en algún servicio avanzado esto no es automático y se requiere de algún tipo de código especial o plugin que, por ejemplo, resuma o genere un extracto de la entrada y la coloque en la descripción. Como eso debe hacerse con algún lenguaje que no sea JavaScript ya que los buscadores no leen textos generados de ese modo y ese es el único lenguaje al que tenemos acceso, estamos en problemas.
¿Será muy grave que las descripciones estén repetidas?
En realidad, si pero no, dependerá de nuestras intenciones; lo cierto es que a los buscadores no les gusta y por eso chillan y nos señalan el error. Obviamente, sería mejor que no se repitieran, aunque sea, para evitar esos chillidos.
Hay una manera un poco "burda" de lograr eso, agregándoles algún texto al que tengamos acceso desde el código de Blogger y uno que es muy fácil de usar es el título de las entradas que, en teoría, siempre es diferente. Aunque esta idea ya fue publicada, vuelvo a insistir con ella.
Ya que el título de las entradas es accesible en el head de nuestra plantilla porque se encuentra en data:blog.pageName, podríamos crear una serie de condiciones para filtrar nuestras páginas y así, en las entradas individuales, usar una descripción no-repetida:
En Blogger es imposible y aún en algún servicio avanzado esto no es automático y se requiere de algún tipo de código especial o plugin que, por ejemplo, resuma o genere un extracto de la entrada y la coloque en la descripción. Como eso debe hacerse con algún lenguaje que no sea JavaScript ya que los buscadores no leen textos generados de ese modo y ese es el único lenguaje al que tenemos acceso, estamos en problemas.
¿Será muy grave que las descripciones estén repetidas?
En realidad, si pero no, dependerá de nuestras intenciones; lo cierto es que a los buscadores no les gusta y por eso chillan y nos señalan el error. Obviamente, sería mejor que no se repitieran, aunque sea, para evitar esos chillidos.
Hay una manera un poco "burda" de lograr eso, agregándoles algún texto al que tengamos acceso desde el código de Blogger y uno que es muy fácil de usar es el título de las entradas que, en teoría, siempre es diferente. Aunque esta idea ya fue publicada, vuelvo a insistir con ella.
Ya que el título de las entradas es accesible en el head de nuestra plantilla porque se encuentra en data:blog.pageName, podríamos crear una serie de condiciones para filtrar nuestras páginas y así, en las entradas individuales, usar una descripción no-repetida:
<b:if cond='data:blog.pageType == "item"'>
<!-- esta es la descripción para una página individual -->
<meta expr:content='data:blog.pageName + " ... el texto de la descripción ... "' name='description' />
<b:else/>
<!-- esta es la descripción para el resto de las páginas -->
<meta content=' ... el texto de la descripción ... ' name='description' />
</b:if>;
Como dije antes, esto no es ninguna panacea ni lo ideal pero ... peor es nada.
Whirlpool |
Este es otro de los experimentos de dhteumeuleu y no puede ser explicado. Es una de esas cosas que uno hace porque sí, sin más razones que el placer de lograr que funcionen.
REFERENCIAS:dhteumeuleu.com
Flip con jQuery |
No sé muy bien si puede ser útil pero, este plugin de jQuery es divertido. Se llama Flip y lo que hace es animar un DIV cualquiera, mostrando diferentes textos que pueden tener algún tipo de formato elemental.
Si descargamos el ZIP veremos los archivos necesarios que son tres. Uno de ellos es jQuery mismo que si ya tenemos insertado no hace falta agregarlo, el segundo es la librería genérica de efecto jquery-ui y ambos, podemos cargarlos desde Google Ajax API, agregando esto antes de </head>:
Si descargamos el ZIP veremos los archivos necesarios que son tres. Uno de ellos es jQuery mismo que si ya tenemos insertado no hace falta agregarlo, el segundo es la librería genérica de efecto jquery-ui y ambos, podemos cargarlos desde Google Ajax API, agregando esto antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js' type='text/javascript'/>
Luego de eso, el plugin en si mismo que viene en dos versiones, una normal (jquery.flip.js) y otra minimizada (jquery.flip.min.js); podemos usar cualquiera de ellas y alojarlas en un servidor externo o ponerlas directamente en la plantilla:
<script type='text/javascript'>
//<![CDATA[
... y aquí copiamos y pegamos el contenido del archivo JS ...
//]]>
</script>
Hacemos que funcione cargando el plugin con algo similar a esto:
<script type='text/javascript'>
//<![CDATA[
$(function(){
$("#flipPad a").bind("click",function(){
var $this = $(this);
$("#flipbox").flip({
direction: $this.attr("rel"),
color: $this.attr("rev"),
content: $this.attr("title"),
onBefore: function(){$(".revert").show()}
})
return false;
});
});
//]]>
</script>
donde #flipbox será el ID del DIV a animar y donde pueden modificarse o agregarse opciones:
content es el texto a mostrar que en el ejemplo, colocaremos en el atributo title
direction indica el tipo de animación (tb, bt, lr, rl) y l ocolocaremos en el atributo rel
color es el color de fondo que colocaremos en el atributo rev
speed define la velocidad
Ahora, nos falta el HTML que ponemos donde nos guste:
content es el texto a mostrar que en el ejemplo, colocaremos en el atributo title
direction indica el tipo de animación (tb, bt, lr, rl) y l ocolocaremos en el atributo rel
color es el color de fondo que colocaremos en el atributo rev
speed define la velocidad
Ahora, nos falta el HTML que ponemos donde nos guste:
<div id="flipbox"> ... el texto a mostrar ... </div>Y a continuación, por ejemplo, unos botones para que cambie el contenido:
<div id="flipPad">
<a title=" el segundo texto " rev="#00BBCC" rel="rl" href="javascript:void(0);">left</a>
<a title=" el tercer texto " rev="#AABB00" rel="bt" href="javascript:void(0);">top</a>
<a title=" el cuarto texto " rev="#82BD2E" rel="tb" href="javascript:void(0);">bottom</a>
<a title=" el quinto texto " rev="#C8D97E" rel="lr" href="javascript:void(0);">right</a>
</div>
Eventualmente, el contenido puede tener alguna clase de formato y para agregarlo, debemos cambiar los caracteres < y > de la etiqueta por sus equivalentes < y >, por ejemplo:
title=" el tercer texto con <strong>negrita</strong>"
Pregunta repetida: ¿Dónde se coloca el CSS? |
Como se trata de páginas web, TODO va en alguna clase etiqueta.
En Blogger, hay una sección en todas las plantillas que es el lugar por defecto donde se incluyen las definiciones de estilo:
En Blogger, hay una sección en todas las plantillas que es el lugar por defecto donde se incluyen las definiciones de estilo:
<b:skin><![CDATA[
... aquí van las definiciones ...
]]></b:skin>
Esa no es una etiqueta HTML, <b:skin> </b:skin> es una etiqueta propia de Blogger mismo y no puede ser eliminada ni duplicada, siempre debe haber una (aunque esté vacía) y no puede haber otra.
En la practica, al mostrarse nuestro sitio, esa etiqueta se transforma en una etiquetea <style> </style>
Usar ese par es otra forma de agregar estilos y por lo general, lo colocamos antes de </head>:
En la practica, al mostrarse nuestro sitio, esa etiqueta se transforma en una etiquetea <style> </style>
Usar ese par es otra forma de agregar estilos y por lo general, lo colocamos antes de </head>:
<style type='text/css'>
... aquí van las definiciones ...
</style>
Si bien eso es lo "normal", no existen restricciones que impidan colocar esa etiqueta en cualquier otra parte, ya sea dentro de un elemento HTML, luego del <body> o incluso en una entrada pero, en este último caso debemos tener en cuenta que si está habilitada la opción de crear saltos de línea automáticos (es lo que ocurre por defecto), deberemos escribir todo en una sola línea:
<style type='text/css'> #algo { ... } #otro { ... } p.mascosas { ... } </style>Hay que tener en cuenta que los estilos se ejecutan en el mismo orden que se leen, de arriba hacia abajo y de derecha a izquierda. No entender esto, es algo que siempre provocará problemas:
<style>
/* aquí, el margen izquierdo será de 20 pixeles porque primero le decimos que todo sea cero y luego le decimos que sea veinte */
#algo {
margin: 0;
...
margin-left: 20px;
}
</style>
Es un detalle importante, no sólo para editar errores sino para "sobrescribir" propiedades que agregan servicios externos o el mismo Blogger; en este caso siempre conviene sobrescribirlos agregando nuestro propios estilos después de <body> y no antes.
Otra forma de agregar estilos es cargándolos desde un archivo externo; para eso, en la plantilla usamos la etiqueta link:
Otra forma de agregar estilos es cargándolos desde un archivo externo; para eso, en la plantilla usamos la etiqueta link:
<link rel="stylesheet" type="text/css" href="URL_archivo.css" />Mucho cuidado con eso. Verifiquen siempre que la dirección URL sea correcta y accesible. En Blogger no podemos alojar hojas de estilo así que usamos servicios externos pero, es bastante común que muchos de esos servicios sólo sean accesibles si estamos logueado en ellos porque tienen la opción de ser archivos públicos o privados. Es fácil verificarlo, salgan de sus cuentas y coloquen la URL en al barra de direcciones del navegador, luego, abran la URL. Si lo que se muestra es el contenido del archivo, todo está bien. Si se abre una advertencia o una página web, la URL es errónea así que no funcionará.
También es posible incluir hojas de estilo externas en una entrada pero allí, en lugar de usar la etiqueta link, conviene importarlas así:
<style type="text/css">@import url('URL_archivo.css');</style>Por último hay una forma adicional de agregar estilos que es lo que se conoce como inline, es decir, en una etiqueta en particular y para eso, usamos un atributo que también se llama style:
<div style=" ... aqui ponemos las propiedades ... "> ... </div>¿Detalles a tener en cuenta y errores comunes?
Todas las propiedades deben terminar con un punto y coma:
p {color: #FFF; text-align: center; }
Si una propiedad tiene varios valores o palabras claves, estos deben ser separados por un espacio:
background: transparent url() no-repeat left top;
Dentro de una etiqueta style o b:skin jamás deben usarse otras etiquetas así que si queremos poner comentarios, no se debe usar la sintaxis HTML. Esto es un error:
Todas las propiedades deben terminar con un punto y coma:
p {color: #FFF; text-align: center; }
Si una propiedad tiene varios valores o palabras claves, estos deben ser separados por un espacio:
background: transparent url() no-repeat left top;
Dentro de una etiqueta style o b:skin jamás deben usarse otras etiquetas así que si queremos poner comentarios, no se debe usar la sintaxis HTML. Esto es un error:
<style>
body {color: red;}
<!-- este es un comentario -->
div {float: left;}
</style>
Los comentarios simples dentro de las etiquetas style se escriben así:
<style>
body {color: red;}
/* este es un comentario */
div {float: left;}
</style>
En Blogger, es común que se malinterpreten las instrucciones de tal o cual truco y veo que muchos hacen cosas así:
<b:skin><![CDATA[
.......
<style>
... las propiedades de un truco ...
</style>
.......
]]></b:skin>
Es un error. SImplemente, eliminen las etiquetas en rojo y todo volverá a funcionar.
Usar @media para detectar resolución de la pantalla |
Estamos acostumbrados a que las propiedades CSS nos permiten controlar la forma en que se ve nuestro sitio, sin embargo, pese a que por lo general lo vemos a través de un monitor, esa no es la única forma de acceso. Obviamente, ahora, con los teléfonos móviles esto es evidente pero ya antes había otras formas tales como, por ejemplo, una impresora.
La regla llamada @media es la que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará: una pantalla, un papel impreso o incluso algunos navegadores de voz. Usando eso, es posible diferenciar lo que se muestre en uno o en otro. Con este ejemplo simple haríamos que la sidebar no se imprimiera:
La regla llamada @media es la que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará: una pantalla, un papel impreso o incluso algunos navegadores de voz. Usando eso, es posible diferenciar lo que se muestre en uno o en otro. Con este ejemplo simple haríamos que la sidebar no se imprimiera:
@media screen { /* pantalla */
#sidebar-wrapper { display: block; }
}
@media print { /* impresora */
#sidebar-wrapper { display: none; }
}El medio está definido por palabras: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv e incluso hay propiedades exclusivas para determinados medios pero, el tema que más me interesó de esto es lo que se muestra en un artículo de CSS-Tricks donde se hace referencia a una nueva serie de palabras claves que nos permitirían controlar la forma en que mostramos nuestro sitio según sea el tipo de resolución de pantalla que tenga el visitante.
Veamos la Plantilla Mínima de Blogger. Allí, el blog queda establecido con un ancho de 660 pixeles; es lo que dice la propiedad width de tres definiciones: #header-wrapper, #outer-wrapper y #footer. Está pensada para una resolución que era la "normal" en el 2006, es decir 800x600 pero, como el tiempo pasa inexorable, si bien sigue siendo un tamaño usado, la gran mayoría fue cambiando a resoluciones mayores y en algún momento, lo "normal" era 1024x768 por lo tanto lo que veíamos era el mismo blog pero grandes espacios vacios a los lados, es decir, el blog aparecía pequeño y perdido en una pantalla grande.
De allí que hubo muchos de nosotros que a fuerza de errores fuimos modificándolos para ampliarlos un poco aunque esto termina siendo una pelea imposible de ganar ya que las resoluciones siguen aumentando constantemente.
Claro que una solución es utilizar los llamados diseños fluidos que se adaptan automáticamente a la resolución aunque en lo personal, no me convencen demasiado. También es cierto que pueden usarse scripts que permiten utilizar distintas hojas de estilo e incluso que el usuario elija cuál utilizar.
Ahora, @media viene a agregar una posibilidad extra que sería bueno explorar aunque por el momento no está implementada en Internet Explroer pero si en el resto de los navegadores (más información).
Para ver un ejemplo vamos a usar la misma Plantilla Mínima de Blogger; la dejamos tal como está aunque en el ejemplo le he agregado una sidebar extra. Los anchos que definen el blog son estos:
#header-wrapper = width:660px;
#outer-wrapper = width: 660px;
#main-wrapper = width: 410px;
#sidebar-wrapper = width: 220px;
#footer = width:660px;
Así que vamos a agregarle definiciones al estilo, por ejemplo, luego de <b/skin> pondremos tres modelos diferentes de este modo:
Veamos la Plantilla Mínima de Blogger. Allí, el blog queda establecido con un ancho de 660 pixeles; es lo que dice la propiedad width de tres definiciones: #header-wrapper, #outer-wrapper y #footer. Está pensada para una resolución que era la "normal" en el 2006, es decir 800x600 pero, como el tiempo pasa inexorable, si bien sigue siendo un tamaño usado, la gran mayoría fue cambiando a resoluciones mayores y en algún momento, lo "normal" era 1024x768 por lo tanto lo que veíamos era el mismo blog pero grandes espacios vacios a los lados, es decir, el blog aparecía pequeño y perdido en una pantalla grande.
De allí que hubo muchos de nosotros que a fuerza de errores fuimos modificándolos para ampliarlos un poco aunque esto termina siendo una pelea imposible de ganar ya que las resoluciones siguen aumentando constantemente.
Claro que una solución es utilizar los llamados diseños fluidos que se adaptan automáticamente a la resolución aunque en lo personal, no me convencen demasiado. También es cierto que pueden usarse scripts que permiten utilizar distintas hojas de estilo e incluso que el usuario elija cuál utilizar.
Ahora, @media viene a agregar una posibilidad extra que sería bueno explorar aunque por el momento no está implementada en Internet Explroer pero si en el resto de los navegadores (más información).
Para ver un ejemplo vamos a usar la misma Plantilla Mínima de Blogger; la dejamos tal como está aunque en el ejemplo le he agregado una sidebar extra. Los anchos que definen el blog son estos:
#header-wrapper = width:660px;
#outer-wrapper = width: 660px;
#main-wrapper = width: 410px;
#sidebar-wrapper = width: 220px;
#footer = width:660px;
Así que vamos a agregarle definiciones al estilo, por ejemplo, luego de <b/skin> pondremos tres modelos diferentes de este modo:
<style>
/* esto funcionará si la resolución de pantalla está entre 300 y 800 pixeles de ancho */
@media (max-width: 800px) and (min-width: 300px) {
#header-wrapper { width:300px; }
#outer-wrapper { width: 300px; }
#main-wrapper { width: 300px; }
#footer { width:300px; }
/* no mostraremos ninguna sidebar */
#sidebar-wrapper { display:none; }
#sidebar-wrapper2 { display:none; }
....... cualquier otra variante .......
}
/* esto funcionará si la resolución mínima de la pantalla es de 1200 pixeles de ancho */
@media (min-width: 1200px) {
#header-wrapper { width:1000px; }
#outer-wrapper { width: 1000px; }
#main-wrapper { width: 670px; }
#sidebar-wrapper { width: 300px; }
#footer { width:1000px; }
/* no mostraremos la segunda sidebar */
#sidebar-wrapper2 { display:none; }
....... cualquier otra variante .......
}
/* esto funcionará si la resolución mínima de la pantalla es de 1600 pixeles de ancho */
@media (min-width: 1600px) {
#header-wrapper { width:1400px; }
#outer-wrapper { width: 1400px; }
#main-wrapper { width: 600px; }
#sidebar-wrapper { width: 350px; }
#footer { width:1400px; }
/* mostraremos la segunda sidebar */
#sidebar-wrapper2 { display:block; }
....... cualquier otra variante .......
}
</style>Usando max-width, min-width, max-height y min-height podemos definir las "condiciones" en las que nuestro sitio se verá, estableciendo anchos o cualquier otra propiedad general o particular.
A medida que amplien esa ventana, verán que el ancho cambia y una imagen en una sidebar se muestra de diferente tamaño. Incluso, si se llega a superar el ancho máximo, aparecerá la segunda sidebar que sino, permanece oculta; en el demo, también cambian el color de fondo, el tamaño de los textos y su color.
Hay otras palabras similares: min-device-width, max-device-width, min-device-height, max-device-height pero también muchas otras que amplian aún más las cosas.
device-aspect-ratio y orientation permiten distinguir el aspecto, por ejemplo:
@media (device-aspect-ratio: 16/9) { ... } /* para pantallas de tipo widescreen */
@media (orientation:portrait) { ... } /* para pantallas más altas que anchas */
@media (orientation:landscape) { ... } /* para pantallas más anchas que altas */
Lo mismo con la resolución de los colores:
@media (color) { ... } /* para monitores color */
@media (monochrome) { ... } /* para monitores blanco y negro */
@media (min-color-index: 256) { ... } /* para monitores con 256 colores */
Lo interesante de esto es que los cambios funcionan dinámicamente, es decir, no hay necesidad de recargar la página por lo menos, agregándolo directamente aunque también es posible hacerlo enlazando las hojas de estilo alternativas:
A medida que amplien esa ventana, verán que el ancho cambia y una imagen en una sidebar se muestra de diferente tamaño. Incluso, si se llega a superar el ancho máximo, aparecerá la segunda sidebar que sino, permanece oculta; en el demo, también cambian el color de fondo, el tamaño de los textos y su color.
Hay otras palabras similares: min-device-width, max-device-width, min-device-height, max-device-height pero también muchas otras que amplian aún más las cosas.
device-aspect-ratio y orientation permiten distinguir el aspecto, por ejemplo:
@media (device-aspect-ratio: 16/9) { ... } /* para pantallas de tipo widescreen */
@media (orientation:portrait) { ... } /* para pantallas más altas que anchas */
@media (orientation:landscape) { ... } /* para pantallas más anchas que altas */
Lo mismo con la resolución de los colores:
@media (color) { ... } /* para monitores color */
@media (monochrome) { ... } /* para monitores blanco y negro */
@media (min-color-index: 256) { ... } /* para monitores con 256 colores */
Lo interesante de esto es que los cambios funcionan dinámicamente, es decir, no hay necesidad de recargar la página por lo menos, agregándolo directamente aunque también es posible hacerlo enlazando las hojas de estilo alternativas:
<link type='text/css' rel='stylesheet' media='screen' href='URL_por_defecto.css' /> <link type='text/css' rel='stylesheet' media='screen and (max-width: 800px) and (min-width: 300px)' href='URL_pequeño.css' /> <link type='text/css' rel='stylesheet' media='screen and (min-width: 1200px)' href='URL_mediano.css' /> <link type='text/css' rel='stylesheet' media='screen and (min-width: 1600px)' href='URL_grande.css' />
El errático Feedburner |
Este no es un buen lugar para preguntar por qué Feedburner muestra una cantidad de suscriptores distinta cada dia. En realidad si esa cifra cambia levemente no hay problema, es normal y no hay que preocuparse, suele diminuir los fines de semana y luego se normaliza; son variaciones porcentuales pequeñas. Las dudas surgen cuando esas variaciones son grandes y digo que este no es un buen lugar para reguntar porque sufro del mismo síndrome: desaparecen por cientos y reaparecen por cientos sin razón aparente; tanto que se ha transformado en un dato poco fiable.
El blog de FeedBurner hace meses que reconoce el error pero no da respuestas:
El blog de FeedBurner hace meses que reconoce el error pero no da respuestas:
Los contadores de suscripción parecen reportar cantidades inferiores a las normales porque se contabilizan los datos de Google FeedFetcher. Ese error no afecta a las suscripciones en si mismas ya que los usuarios siguen recibiendolas de manera normal.
Actualmente, el número es calculado combinando los datos de Google Reader e iGoogle pero estamos cambiando el método utilizando las APIs de Google para que el resultado sea más fiable. Este post será actualizado cuando el cambio esté funcionando.
20 de mayo del 2010
¿Se puede hacer algo al respecto?
Que yo sepa, sólo esperar.
Que yo sepa, sólo esperar.
Plugins diversos para jQuery |
Sunday Morning es un script que permite agregar traducciones sencillas a treinta idiomas. Funciona en todas las versiones de Internet Explorer, Firefox, Safari y Chrome. El script podemos descargarlo desde acá y en la página del desarollador hay explicaciones y unos demos.
jQuery Tools es una colección de componentes compiladas en apenas 5KB. Posee funciones para crear pestañas, tooltips, agregar archivos de Flash, galerías y efectos diversos. El sitio está muy bien organizado y hay ejemplos diversos que podemos copiar y mucha documentación. Podemos descargarla completa o seleccionar las herramientas que queremos incluir.
MopSlider genera una ventana dentro de la cual es posible agregar cualquier contenido. En el ZIP de descarga hay demostraciones que también puden ser vistas online.
Algunas otras:
Algunas otras:
- CeeBox es otra ventana modal para mostrar imágenes, videos, iframes, flash, etc.
- prettyPhoto permite crear ventanas modales tanto para imágenes como para videos y archivos de Flash. La documentación no es amplia pero se entiende. en els itio disponen de otro script llamado prettyPopin que sirve para mostarr contendio simple o formularios.
- liScroll un script para generar textos con scroll de modo similar a como lo podemos hacer con la etiqueta MARQUEE.
- jQueryGlobe es un plugin muy simple para crear listas interactivas.
- TinySlider es un slideshow que permite agregar tanto imágenes como cualquier otro tipo de contenido.
- Notify Bar permite agregar barras informativas similares a las que se ven en Twitter cuando realizamos alguna acción.
- TinyTips agregar tootltips a cualquier elemento de nuestra página.
Otra galería de imágenes con CSS3 |
Esta es una galería relativamente sencilla donde sólo se usa CSS y funcionará bastante bien en los navegadores modernos, incluyendo IE8 aunque con ciertas diferencias ya que cada uno de ellos tiene sus propias características y aplica las nuevas propiedades como se le da la gana.
El HTML es mínimo, usamos una lista donde colocamos dos imágenes, una con la clase mini contiene la miniatura que es la visible por defecto y otra, con la clase pic contiene la imagen a mostrar:
El HTML es mínimo, usamos una lista donde colocamos dos imágenes, una con la clase mini contiene la miniatura que es la visible por defecto y otra, con la clase pic contiene la imagen a mostrar:
<div id="galeria">
<ul>
<li><img src="URL_miniatura1" class="mini" /><img src="URL_imagen1" class="pic"/></li>
<li><img src="URL_miniatura2" class="mini" /><img src="URL_imagen2" class="pic"/></li>
<li><img src="URL_miniatura3" class="mini" /><img src="URL_imagen3" class="pic"/></li>
.......
</ul>
</div>
Y ahora, el CSS que va antes de </head> y que deberíamos modificar para adaptarlo a nuestras necesidades:
<style>
#galeria { /* este es el div que contiene la galería */
background: #101921;
border: 10px solid #505961;
height: 300px;
position: relative;
width: 600px;
margin: 30px auto;
overflow: visible;
}
#galeria ul { /* la lista */
margin: 0;
padding: 0;
text-align: center;
}
#galeria ul li { /* cada item de la lista */
display: inline-table;
list-style: none;
padding: 10px;
vertical-align: middle;
}
#galeria ul li .pic { /* la imagen normal */
background-color: #000;
border: 2px solid #000;
left: 130px;
padding: 10px;
position: absolute;
top: 15px;
visibility:hidden;
-moz-box-shadow: 0 0 20px #ABC inset;
-webkit-box-shadow: 0 0 20px #ABC inset;
box-shadow: 0 0 20px #ABC inset;
}
#galeria ul li .mini:hover { /* efecto sobre las miniaturas */
cursor: pointer;
}
#galeria ul li:hover .pic { /* efecto sobre las imágenes */
visibility: visible;
}
</style>
REFERENCIAS:admixweb.com
Screenshots de tweets al instante |
Hay muchas formas de insertar tweets en un sitio web y esta es una de las más simples: convertirlos en imágenes sin necesidad de software adicional:
Simplemente vamos a la página del tweet, por ejemplo:
http://twitter.com/annoyingorange/status/16235293148cambiamos twitter.com por chen.vc:
http://chen.vc/annoyingorange/status/16235293148y eso es todo; si recargamos, nos mostrará una imagen:
http://chen.vc/cache/16235293148.jpg
que podemos guardar y usar donde se nos ocurra.
REFERENCIAS:labnol.org
Blogger, curvas y el silencio es malo para la salud |
A mi me molesta el silencio de Blogger. Esa manera en que NO comunica los cambios más allá de una entradita mínima en un blog en inglés donde no hay informacion detallada, donde no se responden preguntas y donde siempre leemos que están muy excitados aunque no sepamos muy bien si eso es por un problema hormonal o hay razones valederas para decir ¡ohhhhhh qué bueno!!!
Hace poco sacaron sus nuevas plantillas y lo anunciaron con bombos y platillos. En teoría, era una mejora pero, confieso que huí apenas miré el código porque imaginé que esas plantillas estaban hechas pura y exclusivamente para ser usadas así, tal como vienen y que esa era la única explicación razonable para tal exceso de códigos retorcidos. No creo estar demasiado equivocado aunque es obvio que aún así, pueden ser modificadas o personalizadas pero muchas veces, eso sólo será posible a costa de bastante esfuerzo.
Es evidente que Blogger apunta a que usemos esas plantillas, ahora, apenas creamos un blog, las opciones para seleccionar muestran esas plantillas y ninguna otra:
Hace poco sacaron sus nuevas plantillas y lo anunciaron con bombos y platillos. En teoría, era una mejora pero, confieso que huí apenas miré el código porque imaginé que esas plantillas estaban hechas pura y exclusivamente para ser usadas así, tal como vienen y que esa era la única explicación razonable para tal exceso de códigos retorcidos. No creo estar demasiado equivocado aunque es obvio que aún así, pueden ser modificadas o personalizadas pero muchas veces, eso sólo será posible a costa de bastante esfuerzo.
Es evidente que Blogger apunta a que usemos esas plantillas, ahora, apenas creamos un blog, las opciones para seleccionar muestran esas plantillas y ninguna otra:
Luego, si queremos utilizar algún modelo anterior, el enlace para acceder a esa opción está allá abajo, en la ventana de Diseño | Editar HTML, escondido, no vaya a ser que lo descubramos.
Moraleja, ahora Blogger tiene conviviendo tres sistemas de plantillas lo que hace que todo sea muy confuso para alguien que recién empieza.
Es obvio que como servicio, tiene el derecho de hacer y deshacer a su antojo, a agregar o quitar opciones, a promover sus productos e incluso, forzar su uso, es lo que hacen todas las empresas; ofrecen algo y ponen condiciones; los usuarios aceptamos o no aceptamos y no hay términos medios ni negociaciones posibles. Lo que no suena muy razonable es que esto no se haga de manera explícita o que no se informe debidamente de las características de cada producto. No les costaría nada tener algún siio con información detallada y, de esa manera, evitar malos entendidos. No sólo no les costaría nada sino que sería beneficioso porque Google, Blogger o cualquier empresa de este tipo se nutre de lo que los usuarios aportan gratuitamente.
Por supuesto, era inevitable que las nuevas plantillas trajeran problemas, que ciertas cosas no pudieran hacerse y que otras hubiera que modificarlas. Lo malo es que también han sumado confusiones y una de esas confusiones ha hecho que muchos pregunten por un mismo tema: "OHHHHHH en Internet Explorer se ven las curvas!!! ¿No era que en IE no existe esa posibilidad?"
Y la respuesta es siempre la misma: NO, en IE no hay propiedades CSS para hacer curvas (hasta que salga la versión 9) y SI, cuando se usan las plantillas nuevas se pueden usar curvas con CSS que se ven en todos los navegadores ¿Dónde está la trampa?
No es un tema de trampas, el tema se reduce a la existencia de un script que Blogger agrega sin decirnos nada y que, lamentablemente, no lo hace en todos los blogs pese a que, por lo visto, salvo excepciones, funciona perfectamente.
El código no se ve en las plantillas sino que es parte de la serie de etiquetas que se agregan junto con:
Es obvio que como servicio, tiene el derecho de hacer y deshacer a su antojo, a agregar o quitar opciones, a promover sus productos e incluso, forzar su uso, es lo que hacen todas las empresas; ofrecen algo y ponen condiciones; los usuarios aceptamos o no aceptamos y no hay términos medios ni negociaciones posibles. Lo que no suena muy razonable es que esto no se haga de manera explícita o que no se informe debidamente de las características de cada producto. No les costaría nada tener algún siio con información detallada y, de esa manera, evitar malos entendidos. No sólo no les costaría nada sino que sería beneficioso porque Google, Blogger o cualquier empresa de este tipo se nutre de lo que los usuarios aportan gratuitamente.
Por supuesto, era inevitable que las nuevas plantillas trajeran problemas, que ciertas cosas no pudieran hacerse y que otras hubiera que modificarlas. Lo malo es que también han sumado confusiones y una de esas confusiones ha hecho que muchos pregunten por un mismo tema: "OHHHHHH en Internet Explorer se ven las curvas!!! ¿No era que en IE no existe esa posibilidad?"
Y la respuesta es siempre la misma: NO, en IE no hay propiedades CSS para hacer curvas (hasta que salga la versión 9) y SI, cuando se usan las plantillas nuevas se pueden usar curvas con CSS que se ven en todos los navegadores ¿Dónde está la trampa?
No es un tema de trampas, el tema se reduce a la existencia de un script que Blogger agrega sin decirnos nada y que, lamentablemente, no lo hace en todos los blogs pese a que, por lo visto, salvo excepciones, funciona perfectamente.
El código no se ve en las plantillas sino que es parte de la serie de etiquetas que se agregan junto con:
<b:include data='blog' name='all-head-content'/>
y que dice esto:
<!--[if IE]> <script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/XXXXXXXXXX-ieretrofit.js"></script> <![endif]-->
donde ese XXXXXXXXXX es un número que parece variar en función de algo que desconozco:
http://www.blogger.com/static/v1/jsbin/4291056590-ieretrofit.js
http://www.blogger.com/static/v1/jsbin/3858476896-ieretrofit.js
http://www.blogger.com/static/v1/jsbin/2567459709-ieretrofit.js
El script existe, puede descargarse y analizarse, es más puede agregarse en algunas plantillas y eventualmente funcionará. Me pregunto ¿por qué no lo han publicitado si es algo bueno?
Lo que hace es simular por lo menos dos propiedades de CSS3 que IE no dispone: border-radius: y box-shadow; para eso, inventan propiedades con un nombre especial, las llaman -goog-ms-border-radius y -goog-ms-box-shadow. Por ejemplo:
http://www.blogger.com/static/v1/jsbin/4291056590-ieretrofit.js
http://www.blogger.com/static/v1/jsbin/3858476896-ieretrofit.js
http://www.blogger.com/static/v1/jsbin/2567459709-ieretrofit.js
El script existe, puede descargarse y analizarse, es más puede agregarse en algunas plantillas y eventualmente funcionará. Me pregunto ¿por qué no lo han publicitado si es algo bueno?
Lo que hace es simular por lo menos dos propiedades de CSS3 que IE no dispone: border-radius: y box-shadow; para eso, inventan propiedades con un nombre especial, las llaman -goog-ms-border-radius y -goog-ms-box-shadow. Por ejemplo:
-moz-border-radius: 10px; /* Mozilla */ -webkit-border-radius: 10px; /* Crhome */ -goog-ms-border-radius:10px; /* el invento para IE */ border-radius: 10px; /* la propiedad según la w3org */ -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; /* Mozilla */ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; /* Crhome */ -goog-ms-border-top-left-radius: 5px; -goog-ms-border-top-right-radius: 5px; /* el invento para IE */ border-top-left-radius: 5px; border-top-right-radius: 5px; /* la propiedad según la w3org */ -moz-box-shadow: 0 0 10px #FFFFFF; /* Mozilla */ -webkit-box-shadow: 0 0 10px #FFFFFF; /* Crhome */ -goog-ms-box-shadow: 0 0 10px #FFFFFF; /* el invento para IE */
¿Puede hacerse eso en una plantilla "normal"? Ahí las cosas se complican porque todo es cuestión de prueba y error.
¿Cuál es la diferencia entre una plantilla normal y una de las nuevas plantilas?: Las etiquetas del encabezado: DOCTYPE y HTML.
Lo que vemos normalmente dice esto:
¿Cuál es la diferencia entre una plantilla normal y una de las nuevas plantilas?: Las etiquetas del encabezado: DOCTYPE y HTML.
Lo que vemos normalmente dice esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Y las nuevas dicen esto:
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>EL DOCTYPE cambia para adecuarse al formato del HTML5 y en la etiqueta HTML se le agregan dos parámetros: b:version='2' y class='v2' que, obviamente, son los que llaman a este nuevo script.
Uno podría entonces suponer que bastaria agregar esos dos parámetros en nuestra plantilla común y es verdad pero eso no tiene consecuencias neutras ya que junto con el script, se incluirá una hoja de estilo.
Por defecto, Blogger nos agrega esta:
http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widget_css_bundle.css
y ahora, nos incluirá esta otra:
http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widget_css_2_bundle.css
que es "enorme" y que contiene definiciones genéricas que afectan los márgenes de muchos elementos del blog lo que puede desconfigurar nuestro diseño.
En resumen, cada cuál hará lo que le parezca conveniente y es posible experimentar con cualquiera de estas cosas e incluso usarlas, eso no es mayor problema. El tema, para mi, sigue siendo esta sensación de ser una nada cuando soy un usuario y como tal, creo que merezco alguna clase de consideración mínima. No es mucho lo que pido, sólo que me digan cuales son las reglas y que no me las estén cambiando a cada momento o lo que es peor, que las oculten y "andá a adivinar cuales son".
Uno podría entonces suponer que bastaria agregar esos dos parámetros en nuestra plantilla común y es verdad pero eso no tiene consecuencias neutras ya que junto con el script, se incluirá una hoja de estilo.
Por defecto, Blogger nos agrega esta:
http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widget_css_bundle.css
y ahora, nos incluirá esta otra:
http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widget_css_2_bundle.css
que es "enorme" y que contiene definiciones genéricas que afectan los márgenes de muchos elementos del blog lo que puede desconfigurar nuestro diseño.
En resumen, cada cuál hará lo que le parezca conveniente y es posible experimentar con cualquiera de estas cosas e incluso usarlas, eso no es mayor problema. El tema, para mi, sigue siendo esta sensación de ser una nada cuando soy un usuario y como tal, creo que merezco alguna clase de consideración mínima. No es mucho lo que pido, sólo que me digan cuales son las reglas y que no me las estén cambiando a cada momento o lo que es peor, que las oculten y "andá a adivinar cuales son".
Otro menú desplegable con CSS |
Este es un menú desplegable muy simple que usa algunas técnicas de CSS3 que lo hacen llamativo en algunos navegadores pero al que podemos modificar un poco para que funcione bien en cualquier navegador.
+Seleccione una opción del menú
Suscripción Feeds RSS
Vagabundia en Twitter
Suscripción por E-MailEl HTML no tiene muchos misterios; en un DIV con una clase a la que llamamos drop-menu, colocamos un SPAN que es lo que nos servirá para desplegar y contraer el menú que está en una lista ordenada:
<div class="drop-menu">
<span class="plus">+</span>Seleccione una opción del menú
<ul class="sub-menu">
<li><a href="URL1"><img src="URL_imagen1"/>Texto enlace 1</a></li>
<li><a href="URL2"><img src="URL_imagen2"/>Texto enlace 2</a></li>
<li><a href="URL3"><img src="URL_imagen2"/>Texto enlace 3</a></li>
</ul>
</div>
Como siempre, la clave está en el CSS y allí hay muchas variantes. Este sería el necesario para realizar el ejemplo:
.drop-menu {
background-color: #242F3A;
border: 1px solid #343F4A;
cursor: pointer;
display: block;
font-family: Tahoma;
font-size: 20px;
height: 25px;
letter-spacing: -1px;
margin: 0 auto;
max-height: 25px;
padding: 10px;
position: relative;
text-align: left;
width: 300px;
z-index: 1000;
}
.plus {
display: inline-block;
font-family: Georgia;
font-size: 22px;
font-weight: bold;
margin-right: 10px;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
}
.drop-menu:hover {}
.drop-menu:hover .sub-menu {
display: inline-block;
}
.drop-menu:hover .plus {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.sub-menu {
background-color: #242F3A;
background:image: -moz-linear-gradient(100% 100% 90deg, #000000, #242F3A);
background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#242F3A));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF242F3A', EndColorStr='#FF000000');
border: 1px solid #343F4A;
display: none;
border-top: none;
margin-left: -11px !important;
margin-top: 5px;
padding: 10px;
width: 300px;
}
.sub-menu li {
display: block;
font-size: 20px;
height: 22px;
list-style-type: none;
padding: 8px 0;
}
.sub-menu li img {
margin-right: 10px;
vertical-align: top;
}
.sub-menu li:hover {}
.sub-menu a {
color: #DDD;
font-size: 20px;
font-family: Tahoma
}
.sub-menu a:hover {
color: #ABC;
}REFERENCIAS:webstuffshare.com
¿Qué color es ese? |
What the Hex? es para jugar un rato y practicar ... o aceptar el desafío de adivinar qué significan esos códigos hexadecimales con que definimos los colores.
Claro que #000000 es negro y #FFFFFF es blanco pero ¿qué color representa el #D70C6D? ¿Será algún tono de amarillo, de rojo, de violeta?
Claro que #000000 es negro y #FFFFFF es blanco pero ¿qué color representa el #D70C6D? ¿Será algún tono de amarillo, de rojo, de violeta?
En la página del autor podemos intentarlo seleccionando la dificultad aunque no recomiendo usar el máximo a menos que tengamos tendencias masoquistas.
