Siempre he creído interesante el darle cierta animación a nuestros botones le den un plus gráfico, y hay, desde el enviar de manera automática un mail a alguien que se nos ha añadido en nuestra lista de lectores de nuestro RSS, y quizás un botón animado de agradecimiento puede ser también buena opción.
En esta ocasión haremos un ejercicio para crear un pequeño personaje desde el papel, pasando por Adobe illustrator, hasta llegar a la implementación en HTML y CSS. Al final, te dejamos las imágenes y el código en un archivo para que lo implementes en tu web si así deseas (Ver demo).
Vectores y la ilustración
Los vectores tienen grandes ventajas y las ultimas versiones de illustrator son sorprendentes, nuestro acabados serán muchos más que simples plastas de color.
No voy a negar que tener nociones de básicas de dibujo ayuda a poder hacer ilustraciones, pero definitivamente la web es un compendio muy amplio de imágenes para tomar ideas, para ver diferentes técnicas, para poder empezar nuestros proyectos, el dibujar ayuda, pero las buenas ideas siempre son mejores.
Bocetando y de ahí a illustrator
Empecemos por bocetar nuestro personaje, esto nos ayudara a tener una idea un poco más clara de como empezar. Como comento, puedes tomar ideas de ilustraciones que hayas visto y se te hagan interesantes.
Continuar leyendo →
Los directorios, cuando no cuentan con un index (index.html o index,php, etc), muestran todo su contenido, lo que puede traducirse en un agujero de seguridad o al menos, una perdida de la privacidad de dicho contenido. En la mayoría de los casos es muy difícil estar pendientes de que todos los directorios cuenten con un archivo index, pero con una línea de código en el archivo .htaccess de nuestro sitio, podemos olvidarnos de este detalle:
Options All -Indexes
Con esto, el servidor se encargará de servir una página en blanco, en lugar de la lista de archivos.
El criterio principal para seleccionar la estructura de links o permalinks de un sitio en WordPress suele ser la optimización para buscadores. Sin embargo, WordPress.org, advierten de otro criterio que vale la pena tomar en cuenta: El rendimiento.
Por razones de rendimiento, no es buena idea iniciar tu estructura de links con la categoría, etiqueta, autor o el nombre del post. La razón es que estos son campos de texto, y al usarlos al inicio de la estructura de links, a WordPress le toma más tiempo distinguir la URL de tus posts de la URL de tus páginas (las cuales usan texto en la URL), y para compensarlo, WordPress almacena una gran cantidad de información extra en la base de datos (tanta, que en sitios grandes puede causar problemas).
De este modo, es recomendable usar una estructura de enlaces que empiece con un campo numérico, como es el año o el ID del post.
De este modo, los permalinks tipo:
- /%postname%/
- /%category%/%postname%/
- /%tag%/%postname%/
Pueden tener beneficios SEO, pero no son buenos para el rendimiento de tu sitio web, sobre todo si cuenta ya con una buena cantidad de posts.
Entonces ¿cuál puede ser una buena alternativa? Siguiendo la recomendación de WordPress y pensando en el SEO:
- /%year%/%postname%/
- /%post_id%/%postname%/
- /%year%/%category%/%postname%/
- /%post_id%/%category%/%postname%/
Ya hay un ticket de soporte para que WordPress corrija este error, pero si la versión 3.0 no lo incorpora, mudar a estructura más óptima para el rendimiento será algo muy provecho para sitios con muchas artículos o alto tráfico.
Facebook agregó nuevos "plugins sociales" que se pueden incorporar en cualquier sitio web, entre otras cosas, un botón de "Me gusta" a cualquier anotación. Este botón esta presente en todas las anotaciones publicadas en Facebook y ahora, disponible para sitios externos.
¿Ventajas? La primera es conocer que contenidos le agradan más a tus lectores y la segunda, que al pulsar en el botón, el lector la esta compartiendo inmediatamente en su perfil de Facebook y sin usar recursos propios.
Funcionamiento
El botón es más bien un iframe al que se le pasan por parámetros las características del elemento. El código es más o menos como sigue:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblogandweb.com%2F&layout=button_count&show_faces=true&width=100&action=like&font=arial&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>
Los parámetros son:
- href – Con la URL a compartir.
- layout – Estilo del botón. Valores: standard o button_count
- show_faces – Muestra o no el avatar de quienes del gusta la anotación. Valores: true o false.
- width – Ancho del iframe.
- action – Texto del botón. Valores like o recommend.
- font – Fuente a utilizar.
- colorscheme – Esquema de colores. Valores: light, dark o evil.
Estos valores se pueden cambiar directo en el código o usar el formulario de personalización de Facebook, el resultado es el mismo.
Agregar botón "me gusta" a Blogger
Continuar leyendo →
