Comparte en Tuenti tus artículos de WordPress

Sumolari — Tue, 24 Aug 2010 08:17:25 +0000

Hace algunos días Tuenti anunció un botón para compartir páginas web en la red social. La pega es que este botón no es tan automático como el de Twitter, y requiere algo más de esfuerzo añadirlo en nuestras páginas web, aunque no es para nada complicado. El botón es básicamente un enlace que contiene una imagen, creado con el siguiente código HTML:

La URL del enlace apunta a la página de compartir de Tuenti, donde [URL_DE_NUESTRO_ARTICULO] debe ser reemplazado por la URL de nuestro artículo codificada, o bien mediante la función Javascript encodeURIComponent() o bien mediante la función PHP urlencode().

La imagen del botón podemos elegirla nosotros, lo recomendable es usar algunas de las que ofrece Tuenti para no confundir a los usuarios, aunque también podemos crear las nuestras. Por último, los desarrolladores de Tuenti recomiendan que el enlace se abra en una nueva ventana, aunque quizás sería mejor abrir la ventana dentro de una ventana modal en nuestro propio blog, para así evitar tener que abrir una nueva pestaña.

Para añadir el botón de compartir a todos nuestros artículos basta con editar el archivo single.php de nuestro theme de WordPress y añadir en el lugar que queramos mostrar el enlace:

El código simplemente muestra el enlace con el permalink del artículo cofidicado. La URL de la imagen que aparece en el código anterior es la misma que aparece en la página de desarrolladores de Tuenti, así que podéis usar esa o cambiarla por otra. No os recomiendo usar la que hay en el código de ejemplo porque tal vez la ruta a esa imagen cambien en algún tiempo y entonces os dejen de funcionar los botones de compartir.

También podéis añadir el botón a vuestras páginas, no sólo a los artículos, mediante el mismo código.

Ya podemos añadir el botón oficial de Twitter

Sumolari — Fri, 13 Aug 2010 07:50:46 +0000

Desde ayer está disponible el nuevo botón de Twitter, que permite compartir enlaces a través de Twitter. La principal ventaja es que nos permite llevar la cuenta de cuántas veces se ha compartido el enlace, además de que tras enviar el Tweet el usuario verá un lista de usuarios sugeridos para seguir, lista de usuarios que definiremos nosotros a la hora de crear el botón.

No es nada complicado implementar el botón, básicamente tenemos que ir a la página del botón de Twitter (aunque podemos crear nuestros propios botones a través de la API, pero es más complicado) y elegir entre uno de los tres aspectos que nos ofrecen. Podemos especificar el texto del Tweet o dejar que sea el título de la página que se va a compartir, al igual que podemos especificar la URL del enlace o dejar que sea la URL de la página. También podemos definir el idioma del botón. A continuación nos piden que especifiquemos una serie de cuentas que se sugerirán al usuario, la idea es que sean las cuentas de aquellos que contribuyen publicando contenidos en la página web. Finalmente veremos un código HTML, basta con copiarlo y pegarlo en la página que queramos para mostrar el botón.

Por último os dejo el vídeo de presentación del botón.

Haz clic aquí para ver el vídeo

Ventajas de usar CSS

Sumolari — Fri, 16 Jul 2010 09:27:44 +0000

Muchas veces se dice que no siempre el camino fácil es el mejor. Esto se puede aplicar a muchas cosas, y el CSS (Cascading Style Sheets) no iba a ser menos. Seguramente si acabáis de entrar en el mundo del diseño web os habréis sentido tentados a usar tablas (

) en lugar de capas (

) y a usar el atributo style en lugar de archivos CSS. A continuación voy a exponer mis 10 razones por las cuales es mejor usar CSS que no hacerlo.

Reutilizar código

Pongamos por caso que estamos escribiendo un blog y que tenemos hecho ya el diseño. Ahora insertamos una imagen y queremos darle un borde gris para que encaje al a perfección con nuestro diseño. ¿Qué hacemos: modificar el CSS de nuestro diseño o utilizar el atributo style? Es tarde, estamos cansados y al día siguiente tenemos que madrugar, así que tomamos la vía rápida y utilizamos style. Un par de semanas después no encontramos en la misma situación y hacemos lo mismo, y según avanza el tiempo cada vez se dan más ocasiones como ésta. Quizás aplicar un simple borde no sea nada del otro mundo, pero si en lugar de eso también aplicamos un margen, un relleno y un color de fondo, estamos duplicando un montón de código que no tendríamos por que repetir.

Separar el contenido del diseño

Supongamos que hemos hecho lo que comentaba en el punto anterior y que tenemos un montón de etiquetas con estilos heredados del atributo style. ¿Qué sucedería si cambiamos el diseño de la web? Pensemos en un blog con WordPress y en la cantidad de themes que hay disponibles. Quizá dentro de tres o cuatro meses queramos cambiar el diseño por uno nuevo, y al aplicarlo no encontraríamos con una desagradable sorpresa: los elementos que tienen estilos en la etiqueta style se ven como en el diseño anterior y quedan mal en el nuevo diseño. Ahora tendríamos que ir buscando uno a uno cada elemento que al que le hemos añadido estilos de este modo para cambiarlos por unos que queden mejor. Menuda faena, ¿no os parece?

Rediseñar de forma más rápida

Pensemos ahora que hemos sido nosotros los que hemos creado el diseño, y que lo hemos hecho utilizando el atributo style. Si nuestra web es dinámica, tan sólo tendremos que modificar algunos archivos, pero si la hemos hecho con archivos HTML sueltos, sin una Base de Datos que almacene el contenido, tendremos que modificar tantos archivos como contenido hayamos creado. Quizás 10 páginas no son muchas, pero por ejemplo este blog tiene ya más de 650 artículos, que serían más de 650 archivos a modificar… no quiero ni imaginármelo.

Tener un código limpio

Algunas de las cosas que nos pueden parecer extrañas al entrar en el mundo del código (sea el que sea) es que se tabula con muchísima frecuencia el código. ¿A qué se debe? A mejorar la legibilidad del mismo. Puede que tras hacer un diseño o crear un programa recordemos a la perfección en qué línea estaba cada cosa y dónde comenzaba y acababa cada etiqueta (o condición, o bucle o…). ¿Nos acordaremos dentro de dos meses? ¿Y dentro de dos años? ¿Y aquellos que sólo miren el código para aprender podrán entender algo? Tener un código limpio es muy importante para poder mantener un proyecto, sea código CSS, PHP, C++… Tabular el código es una forma de mantenerlo limpio, y añadir estilos con el atributo style es una forma de ensuciarlo.

Mirad el siguiente código:

Hola mundo

Y ahora mirad este otro:

Hola mundo

En ambos el contenido que se muestra es el mismo. ¿En cuál os ha costado más encontrar la frase que verá el visitante? Este es un ejemplo de a lo que me refiero con limpieza de código.

Selectores más avanzados

Hasta ahora todo lo que habíamos visto que nos permitía hacer CSS también podíamos hacerlo con el atributo style, pero no es así, CSS nos permite hacer más cosas. Pensemos por ejemplo en que queremos que un link cambie de color al pasar el cursor sobre él. Con CSS lo tenemos realmente fácil:

a:hover { color:#CCC; }

Sin embargo hacer esto con el atributo style no es posible. Puede que cambiar el color de un enlace no os parezca demasiado útil, pero imaginad ahora que queréis hacer un menú desplegable sin usar Javascript. Con CSS es realmente fácil de hacer, pero ¿y con el atributo style? Simplemente no se puede hacer.

Selectores “a secas”

Ahora pongamos el caso de que queremos usar Javascript para añadir algún efecto o para hacer que al hacer clic sobre cierto elemento se muestre otro elemento oculto. Usando el atributo ID o class de cualquier etiqueta HTML podemos detectar con Javascript no intrusivo cuándo se hace clic, sin embargo si no usamos estos atributos no podemos detectar cuándo se pulsa cierto elemento sin recurrir a métodos no recomendados para la accesbilida del sitio web. Además, tanto al atributo ID como el atributo class se pueden usar para darles estilos a los elementos de la web, así que ganamos en Javascript no intrusivo y en CSS.

Carga más rápida

Toda esta limpieza y reutilización de código contribuyen a que la página cargue más rápido, ya que hay un total de menos código, los archivos tienen un menor tamaño y la descarga de los mismos dura menos tiempo. Además al reducir el tamaño también reducimos el ancho de banda que consume cada visita, con lo cual también podemos ahorrar algo más en temas de alojamiento y servidor.

Un diseño para cada ocasión

Otra ventaja del CSS es que podemos cambiar el archivo por otro y modificar totalmente el aspecto de la web sin tocar el contenido. El mejor ejemplo de esto mismo es CSS Zen Garden, una página que tiene siempre el mismo código HTML y que sólo cambia el archvo CSS que se carga. Quizá parezca una tontería, pero en muchas ocasiones es necesario cargar un archivo CSS específico para cierto navegador o un archivos CSS diferente para dispositivos móbiles o para una versión para imprimir.

Las tablas para tabular

Y aquí es donde entran las tablas. Sin duda es muy fácil convertir una tabla en un rectángulo con esquinas curvas o un diseño a tres columnas, pero ¿se crearon para eso? No, el objetivo de las tablas es mostrar contenido tabulado, tarea que desempeñan la mar de bien. Pensemos que usamos tablas para el diseño de un blog en tres columnas. Ponemos una sidebar a cada lado y el contenido del blog en la columna central. Ahora imaginemos que queremos las dos sidebars a la derecha o ambas a la izquierda. Habría que modificar sí o sí el código HTML ya que no hay forma de alterar la posición de las columnas mediante CSS. Sin embargo usando capas (div) y CSS se podrían hacer las tres columnas sin problemas y más adelante cambiar su disposición modificando sólo el código CSS. Pensemos de nuevo en CSS Zen Garden. Si usara tablas, sería imposible que cambiase tanto la disposición del contenido al modificar el CSS.

Y a todo esto, ¿qué pasa con los estándares?

No es mi intención hablar de los estándares en este artículo, pero algo comentaré. Actualmente seguir los estándares y comprobar que el código es válido tiene algunas ventajas. La primera es que te ahorras posibles problemas al dejar etiquetas sin cerrar o al olvidar alguna comillas (“) o similares. Algunos navegadores pueden mostrar correctamente un diseño con este tipo de errores mientras que otros no. Siguiendo los estándares te ahorras estos problemas. Además los estándares te ofrecen un buen punto de partida para que el diseño se vea correctamente en cualquier navegador. Está claro que todo acaba dependiendo del motor de renderizado del navegador, pero si el navegador en cuestión utiliza un buen motor de renderizado, la página se verá perfectamente, mientras que si se recurre a código no estándar y que sólo funciona en determinado navegador, el página no se verá correctamente en todos lo demás. Los estándares no limitan lo que podemos hacer, simplemente nos proponen (ya que no es obligatorio, sino recomendable) un modo de hacerlo para que todos lo hagamos igual y los navegadores sean capaces de mostrar correctamente todo el contenido. Siempre debe haber un estándar, sino, cada navegador interpretaría el código de una forma diferente (algo que lamentablemente, a pesar de los estándares, sucede). ¿A que a nadie se le ocurriría utilizar la etiqueta como

o como

? ¿Entonces por qué aún hay quién utiliza la etiqueta

como

? ¿Qué debe interpretar el navegador: esa tabla es sólo para estructura del contenido o es (como dice el estándar) para mostrar contenido tabulado?

Muestra una alerta a los usuarios de Internet Explorer

Sumolari — Mon, 28 Sep 2009 16:20:32 +0000

A raíz de un comentario de JaimePG se me ha ocurrido volver a tratar un tema del que ya hablé hace casi un año: Detectar a Internet Explorer. Aunque el tema quedó bastante claro, esta vez haré un recopilatorio de dos métodos para mostrar un cartel a los usuarios de Internet Explorer.

En todos los modos partiremos de un código CSS preestablecido (que deberéis añadir a vuestro CSS):

#usuarios-ie {
width:100%;
font-family:Verdana, Geneva, sans-serif;
background: #FFFFDE;
border-bottom:1px solid #666;
color:#000;
position:fixed;
top:0px;
left:0px;
z-index:999999;
}

#usuarios-ie p { font-size: 13px; margin: 0; padding:2px 10px; }
#usuarios-ie a  {text-decoration: underline; font-weight: bold; color: #D64411; }

Y también partiremos del mismo código HTML cada vez:

El navegador que estás utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a Firefox, Opera, Safari o Google Chrome

Usando HTML

Este método es el más fácil de implementar y consiste en utilizar un estilo CSS especial para Internet Explorer que muestre el cartel de aviso. Básicamente usaremos un comentario condicional que sólo analiza Internet Explorer y que nos permite distinguir cada versión de Internet Explorer. Este comentario, al ser código HTML, nos funcionará en cualquier servidor, sin necesidad de que tenga instalado PHP.

La estructura del comentario condicional es la siguiente:

Como podréis imaginar, situaremos el código entre los comentarios condicionales, dependiendo de a quién queramos mostrarle el cartel. Si por ejemplo nos basta con IE6 y anteriores, usaremos el siguiente código:

Atención: Este método funciona debido a que el motor de renderizado de Internet Explorer (Trident) analiza estos comentarios, así que este método no funcionará alterando el User Agent del navegador con el que accedemos.

Usando PHP

Ahora sí que usaremos PHP, y por tanto necesitaremos un servidor capaz de ejecutarlo para poder detectar a Internet Explorer. Lo que haremos será leyendo el User Agent del navegador buscaremos la cadena identificatoria de Internet Explorer y si la encontramos, le daremos true al valor de la variable $ie.

Con este método podemos llegar a falsos positivos, ya que si el navegador con el que accedemos a la página tiene el User Agent cambiado por el de Internet Explorer, lo detectaremos como si de él se tratase.

El código PHP que usaremos será:

$user_agent = $_SERVER['HTTP_USER_AGENT'];

$posicion = strrpos($user_agent, "MSIE");

if ($posicion === false) {
$ie = false;
} else {
$ie = true;
}

Ahora basta con comprobar si $ie es true o false y actuar en consecuencia. El código necesario para hacerlo sería:


El navegador que estás utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a Firefox, Opera, Safari o Google Chrome

Con este código estaríamos detectando a Internet Explorer, sea cual sea su versión. Si queremos buscar una única versión, basta con modificar la cadena MSIE, por ejemplo, para buscar a IE6, utilizaríamos MSIE 6 en lugar de MSIE.

Lo malo de este método es que no podemos detectar a Internet Explorer 6 o inferiores, tan sólo a IE6 (o IE7, o IE8, etc).

Yo por mi parte a partir de ahora mostraré un cartel de aviso a los usuarios de Internet Explorer 6 o inferior en el blog, lo siento por los usuarios de IE6, pero hay alternativas mejores, multiplataforma y gratuitas, así que no veo motivo alguno para no cambiarse.

Sumolari.com » html