Blog @pedropablo » Blog http://blog.pdropablo.net bla, bla, blaaaah... Thu, 31 Mar 2011 20:58:42 +0000 en hourly 1 http://wordpress.org/?v=3.3 Crear y utilizar Favicon para tu web http://blog.pdropablo.net/2010/05/crear-y-utilizar-favicon-para-tu-web.html http://blog.pdropablo.net/2010/05/crear-y-utilizar-favicon-para-tu-web.html#comments Mon, 24 May 2010 20:04:42 +0000 pedropablo http://blog.pdropablo.net/?p=225 Favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es aquella pequeña imagen que aparece en algunos navegadores junto a la dirección de una página web. Los navegadores gráficos suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente.

Ejemplo:


Vista del favicon de mi blog en la barra de dirección, en favoritos, y en la pestaña.



Características

  • Dimensiones 16×16px
  • 16 colores (4 bits)
  • Formato .ico

En algunos navegadores puedes usar iconos de mayor tamaño y más colores, también otros formatos como .gif o .png, pero si quieres que tu icono funcione correctamente en cualquier navegador, utiliza el tamaño de 16×16px con 16 colores y en formato .ico.


Como hacer uno para tu web
Hay varias páginas web que te generan ya el favicon en formato .ico, y una de ellas, que fue la que yo utilizé es: http://www.favicon.cc/

Puedes hacerlo de dos formas:

  1. Tú mismo puedes dibujarte el favicon a tu gusto y te va mostrando como quedaría en la barra de direcciones y pestaña.


    Vista de como va quedando el favicon dibujado.

  2. La otra opción es subir una imagen y te generará el favicon, puedes dejar que ajuste automáticamente el favicon o que sea la misma imagen reducida a 16×16px de tamaño.


    Formulario de la imagen que subirás para generar el favicon.

Generadores de Favicon online:


Integrar en nuestra web
Subimos el favicon al servidor y copiamos la ruta, por ejemplo: http://blog.pdropablo.net/favicon.ico

Modificar el HTML y ponemos el siguiente código dentro de la etiquetas <head> y </head>:

<link rel="shortcut icon" href="http://blog.pdropablo.net/favicon.ico" />

Recordad cambiar mi ruta de ejemplo por la vuestra, y recomiendo que siempre salga la ruta de la web: http://www.tuweb.com/favicon.ico, así no tendrás problema de que te desaparezca el favicon en alguna página de tu web.


Y listo, ya tendríamos nuestro favicon instalado en nuestra página web :D

]]> http://blog.pdropablo.net/2010/05/crear-y-utilizar-favicon-para-tu-web.html/feed 2 Estrenando nombre y favicon http://blog.pdropablo.net/2010/05/estrenando-nombre-y-favicon.html http://blog.pdropablo.net/2010/05/estrenando-nombre-y-favicon.html#comments Tue, 18 May 2010 11:42:13 +0000 pedropablo http://blog.pdropablo.net/?p=226 Desde hace una semana he cambiado el nombre a ‘Blog @pedropablo‘ y no ‘pedro pablo‘ como se llamaba antes. ¿Por qué? No lo sé, creo que queda mejor jajaja, y lo de la arroba (@), pues porque como el twitter está de moda y tengo cuenta, pues de ahí la arroba.

También he cambiado el Favicon*:
* Un favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página

Así se ve en la barra de direcciones

Así se ve en la pestaña

En el próximo post explicaré que es un Favicon, su función y de como se puede crear uno para tu web.

]]> http://blog.pdropablo.net/2010/05/estrenando-nombre-y-favicon.html/feed 6 El botón Me gusta de Facebook http://blog.pdropablo.net/2010/05/el-boton-me-gusta-de-facebook.html http://blog.pdropablo.net/2010/05/el-boton-me-gusta-de-facebook.html#comments Mon, 10 May 2010 21:30:28 +0000 pedropablo http://blog.pdropablo.net/?p=222 Facebook agregó plugins sociales que se pueden incorporar en cualquier sitio web, uno de ellos el botón “Me gusta“. Este botón está presente en todas las anotaciones publicadas en Facebook y ahora disponible para sitios externos. Al pulsar el botón el lector lo comparte inmediatamente en su perfil de Facebook.

Los parámetros son:

  • href – Es la dirección a compartir. (ej: http://blog.pdropablo.net/)
  • layout – Estilo del botón. Valores: standard o button_count
  • show_faces – Muestra el avatar de a quiénes le gusta. Valores: true o false.
  • width – Ancho del iframe.
  • action – Texto del botón. Valores like o recommend. (Me gusta o Recomendar)
  • font – Tipo de fuente a utilizar.
  • colorscheme – Esquema de colores. Valores: light o dark.


Resultados

layout: standard layout: button_count (colorscheme: dark)
   

Estos valores se pueden cambiar directament en el código o usar el formulario de Facebook, creo que es más cómodo, el resultado es el mismo.


Integración


Cualquier web

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php print 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" height="80" style="border:none;overflow:hidden;width:450px;height:80px;"></iframe>

Para que sea fija basta con cambiar el parámetro href y poner la url (dirección) que desea.


WordPress
Abrimos el archivo single.php del theme. Nos ubicamos en el lugar donde se pretende aparezca el botón, en el footer del post o abajo del título. Y agregamos el código:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php print urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" height="80" style="border:none;overflow:hidden;width:450px;height:80px;"></iframe>


Blogger
Home → Diseño → Edición de HTML → Expandir plantillas de artilugios
El lugar tradicional para hacerlo en el post-footer, es decir, al pie de cada entrada, entonces, se busca el código: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light"' scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>
</b:if>

El código lo pueden modificar con los parámetros a su gusto.
[joder, esto suena a pedir algo a la carta jajaja :P ]

]]> http://blog.pdropablo.net/2010/05/el-boton-me-gusta-de-facebook.html/feed 29 Malditos Bots Spammers http://blog.pdropablo.net/2010/01/malditos-bots-spammers.html http://blog.pdropablo.net/2010/01/malditos-bots-spammers.html#comments Wed, 27 Jan 2010 10:06:57 +0000 pedropablo http://blog.pdropablo.net/?p=133 Hoy entro y me encuentro todos los post con un comentario de bots spammers.

Captura de pantalla

Esto pasa por desactivar el anti-spam, pensaba que no iba a pasarme, pero vamos que sí, que se meten por todo los cabroncetes, así que he vuelto a activar el plugin SI CAPTCHA Anti-Spam.

]]> http://blog.pdropablo.net/2010/01/malditos-bots-spammers.html/feed 5 Design 2010 http://blog.pdropablo.net/2010/01/design-2010.html http://blog.pdropablo.net/2010/01/design-2010.html#comments Mon, 25 Jan 2010 14:47:01 +0000 pedropablo http://blog.pdropablo.net/?p=132 Estrenando diseño nuevo para este año 2010 !!!

Me encanta Design Disease, sus diseños me atraen muchísimo, sino basta ver este último diseño, es el que yo utilizo actualmente pero como siempre dándole todo sus créditos y haciendo mis pequeñas modificaciones a mi gusto, todo gracias a que da licencia para moder hacerlo.

En realidad el theme no viene así, pues como dije me gusta modificarlo a mí gusto, aquí el original.

Cambios..

  • Menu, en la cabecera de la web, grande que se vea bien, con las mismas secciones.
  • Sidebar, una pequeña introducción de que va el blog, redes sociales dónde encontrarme, últimos comentarios, tags, y las páginas web que suelo mirar.
  • Footer, pues esto es lo más que me gusta, ahí he puesto los últimos tweets, los enlaces que guardo en mi del.icio.us, y las últimas imágenes que pongo en mi flickr, pero me gusta todo el diseño en general!!! jeje
  • Post, cuando se lee un post en los comentarios he puesto de orden de primero a último, ordenado con número y la opción de responder a un comentario, esta última función no hace que al contestar se ponga debajo del comentario que respondes, solo marca el nombre del usuario, así no has de escribirlo.

Y poca cosa más.. espero que sea de vuestro agrado :D

]]> http://blog.pdropablo.net/2010/01/design-2010.html/feed 3 Mi retorno a bloguear http://blog.pdropablo.net/2009/10/mi-retorno-a-bloguear.html http://blog.pdropablo.net/2009/10/mi-retorno-a-bloguear.html#comments Mon, 05 Oct 2009 08:44:13 +0000 pedropablo http://blog.pdropablo.net/?p=7 No sé que escribir… jaja, que putada!

Hola, me llamo Pedro Pablo, sobre este blog…
Dígamos que hablaré de todo lo que se me pase por la cabeza, de poner escritos tontos, chistes, vídeos, canciones, noticias a relatos personales y cosas de mi vida cotidiana. Siendo sincero no espero tener ningún público, pero si continúas entrando es porque te interesa algo de lo que escribiré :)

Esa es la introducción que he puesto en la lado derecho de la web, y sobre eso irá relacionado este blog.

En mis versiones anteriores de mis blogs, siempre he sido yo quién los ha programado interiormente, y de diseño míos con ides de otros, jaja, hay qu ser realista, pero siempre estaba cambiando cosas y había cosillas que quería mejorar y no paraba, pero me cansé de ello, por eso he dedicido utilizar WordPress, sencillo, con plugins que dispone que siempre se adaptan a ti.

Te apetece tener un blog?????? Pues tienes la web de wordpress o si quieres ponerlo en tu propio servidor te lo descargas y lo instalas.

Los plugins que utilizo son:

  • Audio Player – es un reproductor flash de audio.
  • del.icio.us – es un widget que muestra los links guardados en del.icio.us (en la derecha se puede visualizar funcionando).
  • flickrRSS – obtener las últimas imágenes posteadas en tu cuenta de Flickr.
  • Google XML Sitemaps – informador a los robots rastreadores de webs, informa de las páginas que tenemos, en este caso escritos.
  • Lightbox 2 – utilzo este plugin para la sección de Imágenes, abre un la imagen sin tener que abrir otra pestaña/página.
  • MobilePress – por si te visitan vía móvil, jeje.
  • SI Captcha Anti-Spam – es un anti-spam, que en el formulario de comentar se añade una imagen aleatoria con letras y números, los cuáles hay que escribir en un campo para poder enviar el comentario.
  • Tweet – si tienes cuenta en twitter este plugin te ayuda a no tener que enlazar algun perfil o busqueda en twitter, basta con poner @<nombre> y te autoenlaza al perfil de ese twittero, y lo mismo para la busqueda #<búsqueda> (ejemplo: @pedropablo es mi perfil, y #Mallorca la isla dónde resido, jeje)
  • Tweet Blender – muestra tus últimas anotaciones de tu perfilen twitter (se puede ver en el lado derecho funcionando).
  • Twitter Poster – automáticamente tras escribir un post, postea en twitter un enlace hacia tu blog.

Estoy utilizando el tema Compositio creado por Design Disease (me encanta el diseño de su web!!), con algunas pequeñas modificaciones hechas por mí.

Ya están disponibles todas las secciones activas, la última ha sido la galería de imágenes, la cual coge las imágenes que tengo compartidas en Flickr y las pongo en la web utilizando el plugin Lightbox 2, para no tener que ir hasta Flickr para ver la imagen, eso sí, quién quiera comentar trendrá que ir hasta mi cuenta de Flickr y buscar la foto para comentarla.

Creo que ya puedo dar por OK el blog, apartir de ahora a escribir… jeje.

Saludos :D

]]> http://blog.pdropablo.net/2009/10/mi-retorno-a-bloguear.html/feed 3