Google Wave

En la última edición de Google I/O la noticia estrella fue el próximo lanzamiento de Google Wave en un paso más para revolucionar las comunicaciones en Internet.

Pero que es Google Wave?

Tiene el objetivo de convertirse en un nuevo modelo para que las personas interactúen en línea. La nueva herramienta permitirá a los usuarios comunicarse y trabajar juntos a través de texto, fotos, vídeos, mapas y más.

Según los primeros comunicados de Google el pasado 28 de mayo de 2009, el usuario podrá crear una 'ola' ('wave') y en ella podrá añadir contactos. Cualquier persona dentro de esa 'ola' puede ir añadiendo texto, fotos, gadgets, feeds de medios de comunicación, etc, y de esta manera ir interactuando unos con otros.

Captura de pantalla de Google Wave.

Vídeo presentación.

facebook

La red social facebook ha cumplido su 5º aniversario.

• 15 millones de usuarios actualizan su estatus cada día.
• 120 es el promedio de amigos por usuario.
• 3,5 millones de usuarios se hacen fan de una página al día.
• 850 millones de fotos se suben al mes.
  

Abrir links en ventana aparte

Los que soléis visitarme os habréis fijado que me gustan las cosas como mas sencillas y fáciles mejor, y si puedo explicarlo brevemente mejor todavía.

Ana, a través de mi correo me preguntaba como podía hacer que los enlaces que iba colocando en su blog se abrieran en ventanas nuevas.

Si vosotros no tenéis constumbre de hacerlo pensad que es una muy buena opción para no tener que clicar cada vez el botón de retroceso y lo mas importante, con esta opción evitamos que nuestro visitantes abandonen nuestro blog cada vez que clican en un enlace.

Esto se consigue aplicando la etiqueta: target=”_blank”

La manera de usar esta etiqueta es colocándola en cada link, después de la url de referencia.
Por ejemplo, si quiero poner un acceso a mi otro blog, partiendo de su url http://buscadorblog.blogspot.com lo haremos de la siguiente forma:

<a href=”url del enlace” target="_blank">Titulo del link</a>

Ahora pondremos nuestros datos, sustituimos “url” y ponemos el Título, para que quede así:

<a expr:ref.=”http:buscadorblog.blogspot.com” target="_blank">Zapping... Buscador blog</a>

El resultado final seria este, clica en el enlace para ver el efecto:

Zapping... Buscador blog

Mostrar todas las entradas

Hoy al no disponer de tiempo para nada os propongo un breve muy breve. Si queréis mostrar en vuestro blog mediante un enlace o botón todas las entradas que tenéis publicadas en el blog en una única pantalla, solo tenéis que escribir:

http://nombretublog.blogspot.com/search?max-results=1000

Donde pone nombredetublog tenéis que poner el nombre de vuestro blog, en el caso de tener mas de 1000 entradas variar este dato.

El resultado de todas las entradas de mi blog mediante un enlace seria este:

Aquí el enlace:
<a href=" http://tirandodeblog.blogspot.com/search?max-results=1000">Mostrar todo el contenido del blog</a>

Y el resultado obtenido lo veréis haciendo click en el siguiente enlace:
Mostrar todo el contenido del blog

Estilo Pullquote

...hoy aprenderemos como poner a nuestro texto el estilo pullquote...

Según nos dice wikipedia: Pullquote es una cita o extracto de un artículo que se coloca en un mayor tamaño de letra en la misma página, que sirve para destacar y conducir a los lectores en un artículo y o bien para destacar un tema clave. El efecto es similar a los cuadraditos en prensa escrita, que destacan parte de un artículo.

Para aplicar el estilo pullquote como el ejemplo del parrafo anterior, de una forma muy sencilla en nuestro texto, solo tenemos que copiar y pegar el siguiente Código HTML en el editor de texto:

<div style="float:right;height:6em;width:150px;margin-top:10px;margin-bottom:10px;margin-left:10px;line-height:18px;text-align: right;">

<span >...hoy</span> aprenderemos como poner<b> a nuestro texto</b> el estilo<span > pullquote...</span>

</div><p style="text-align: justify;">

Según nos dice wikipedia: Pullquote es una cita o extracto de un artículo que se coloca en un mayor tamaño de letra en la misma página, que sirve para destacar y conducir a los lectores en un artículo y o bien para destacar un tema clave. El efecto es similar a los cuadraditos en prensa escrita, que destacan parte de un artículo.</p>

<div style="clear:both;"></div>

Como veis en el código anterior podéis modificar a vuestro antojo, las fuentes, el tamaño y color de los caracteres.

Añadir color de fondo a las Entradas o Post

Si queréis dar un toque mas personal y cálido a vuestras entradas poniendo un color de fondo, de forma que quede parecido a estas líneas, es tan fácil como añadirle una tabla de color a nuestro post.

Para conseguirlo lo haremos de la siguiente forma:
Nos dirigimos a “Creación de entrada” y en "Edición de HTML" pegamos el siguiente código:

<table bgcolor="#99c9ff"><tbody><tr><td>NUESTRO TEXTO</td></tr></tbody></table>

Si lo que queremos es dar siempre el mismo efecto a todas nuestras entradas pegaremos el código en “Configuración”, “Formato”, “Plantilla de entrada”.

Recordad que el código del color (#99C9FF) podéis modificarlo por el que mas os guste.

Listas

Una utilidad que podemos necesitar cuando nos interesa crear listas de enlaces o de datos por ejemplo para nuestra sidebar, son las listas de código HTML, podemos obtener dichas listas de la siguiente forma:

Ordenadas numéricamente.
Lista sin numeración.

Para crear una lista numerada lo haríamos de la siguiente forma:

<ul>
<li> Inicio
<li> Cosas
<li> Opiniones
<li> Fotos
</ul>

Quedando de la siguiente forma:

• Inicio
• Cosas
• Opiniones
• Fotos
  

Si lo que deseamos es una lista numerada lo que tendríamos que poner es lo siguiente:

<ol>
<li> Inicio
<li> Cosas
<li> Opiniones
<li> Fotos
</ol>

Y ahora quedaría así:

1. Inicio
2. Cosas
3. Opiniones
4. Fotos
   

Claro esta que podéis utilizar el mismo código HTML para crear listas de enlaces y crear un menú sencillo.

Text transform

Seguramente en mas de una ocasión os habréis dado cuenta que por ejemplo al poner el título en un post no aparece tal y como lo hemos escrito, por ejemplo ponéis “Título” y al publicarlo aparece “TÍTULO” de igual forma puede suceder que os aparezca todo en minúsculas, o que el inicio de cada palabra venga en mayusculas.

Partiendo de una entrada en el blog de Gema donde nos explica como solucionar este problema.
Vemos que los datos que aparecen son por la propiedad text-transform, la cual aparece añadida en la CSS de nuestra plantilla.

¿Que significa cada propiedad?
Capitalize: Todas Las Palabras Del Texto Empiezan De Esta Forma.
Uppercase: TODO EL TEXTO APARECE EN MAYÚSCULAS.
Lowercase: todo el texto aparece en minúsculas.
None: El texto aparece tal y como lo hemos escrito.

Si queremos controlar la propiedad text-transform de nuestro blog, en primer lugar tenemos que localizar que parte de nuestra plantilla queremos modificar.

Todo el Blog: body {
Título del blog: #header h1 {
Descripción del título: #header.description {
Entradas: .post {
Sidebar: .sidebar {
Pie de las entradas: .post footer {
Comentarios: #comments {
Y también en los enlaces, una vez ubicado body { a continuación
a:link es el enlace tal y como se ve
a:visited es el enlace visitado
a:active es cuando pulsamos en el
a:hover es cuando nos situamos encima con el cursor

Fuente:

Simulacro de modificación web

Visitando el blog de Pizcos he dado con un truco muy simple pero que alguna vez nos puede ser de gran utilidad.
La propuesta que nos hace Pizcos en su blog es para cuando queremos reubicar los elementos de nuestros blogs, modificar textos, títulos o cualquier cosa que aparezca en pantalla.

El truco que nos propone es para que podamos hacernos una idea de como quedarían nuestras modificaciones, sin correr ningún peligro de que se perdiera alguna cosa o elemento.

¿Como lo haremos? Pondremos en pantalla la pagina que queremos editar y en nuestro navegador escribiremos el siguiente codigo:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Seguidamente veréis como podéis mover todos los elementos, pues nos permite usar el efecto drag and drop y si pulsamos dos veces editaremos el texto que queramos. Los cambios que efectuemos no los podremos guardar pero como bien nos cuenta seguro que pasamos un buen rato modificando cualquier pagina.

Recuerda que el efecto sirve para editar cualquier pagina web, y que los cambios solo los apreciaremos en nuestro navegador.

Ocultar la barra de blogger

En una entrada anterior titulada "Eliminar la barra de blogger" en realidad la ocultamos para no ser visible al visitante.

Hoy os propongo otra opción para ocultarla y que al pasar el ratón por la zona donde está situada esta se active y aparezca.

Para hacerlo haremos lo siguiente:

• Acceder a "Panel", ir a "Diseño" y seleccionar “Edición de HTML”.
• Buscamos el código body{.
• Pegaremos el siguiente código justamente encima:
  

 #navbar-iframe {

opacity:0.0;

filter:alpha(Opacity=0)

}

#navbar-iframe:hover {

opacity:1.0;

filter:alpha(Opacity=100,FinishedOpacity=100)

}

 

Ventana para enlaces o para texto 2

Atendiendo una nueva petición seguiremos retocando nuestra "ventana" que hemos creado para incluir códigos o texto partiendo de:
<textarea>Aquí va lo que quieras</textarea>
Aquí va lo que quieras
Para dar tamaño una forma fácil de hacerlo (otras formas mas complejas necesitas tocar la plantilla) es con los atributos columnas "cols" y filas "rows" y lo haremos de la siguiente forma:
<textarea name="ventana" rows="5" cols="40">Aquí va lo que quieras</textarea>
Aquí va lo que quieras
Si vamos modificando los valores iremos variando el tamaño de nuestra "ventana".

Aprovechando el tema, tambien podemos dar color de fondo a nuestra caja o ventana y lo haremos utilizando el atributo style="background-color:#C3D9FF;" de la siguiente forma:
<textarea name="ventana" rows="5" cols="40" style="background-color:#C3D9FF;">Aquí va lo que quieras</textarea>
Aquí va lo que quieras
Podeis modificar el código del color a vuestro gusto.

Logicamente podríamos hacer mas variaciones modificando los códigos.
Espero encontreis alguna utilidad, todo tuyo toledo1993.

Crear ventana para enlaces o para texto

Con este título he querido ilustrar esta entrada, se trata de crear una "ventana" para poner cualquier texto o enlace, y lo haremos con la etiqueta <textarea> de la siguiente forma:

<textarea> Aquí pondremos el texto o lo que nos interese </textarea>

Y quedaria de la siguiente forma:

Aquí pondremos el texto o lo que nos interese

Espero te sirva toledo 1993, ya sabes que para lo que necesites...

Vinculos en las imagenes de blogger

Al no tener mucho tiempo libre últimamente, voy de breve en breve, pero suelen ser muy útiles para quien no conoce las funciones que nos ofrece Blogger.

Recientemente Blogger ha habilitado la opción de poner un vinculo en cualquier imagen que deseemos subir a nuestro blog. Para ello iremos a nuestra plantilla, “Diseño”, “Añadir un elemento de página” y escoger “Imagen”:

Cuando tenemos la imagen ubicada en nuestro ordenador, nos disponemos a subirla:Nos permite titular la imagen, ponerle un pie de foto y donde dice "Enlace" pondriamos la URL de la página que queremos enlazar con nuestra imagen, si marcamos "Reducir hasta ajustar" la imagen será ajustada a nuestra sidebar. Seguidamente guardamos cambios y listos.

Buscar en tu plantilla

¿Sabias que para buscar cualquier código en tu plantilla puedes hacerlo con el buscador que lleva incorporado Blogger?

Es tan fácil como apretar las teclas "Ctrl" + "F", en el interior del cuadro de busqueda escribimos el código que estamos buscando y este nos lleva directamente a él.

Seguiremos con estos consejos breves.

Actualización 07/02/2009:

Actualmente el cuadro de busqueda aparece en otro formato al final de la página.