Artículos para la categoría <<XHTML>>

Por fin en Twitter han decidido lanzar un botón para poder twittear las noticias o post de las páginas que lo incorporen. Ya no tendremos que usar aplicaciones de terceros como Tweetme o implementaciones propias para que los usuarios de nuestras páginas puedan compartir la información que les parezca destacable.

El botón Tweet acortará la dirección de la página que vamos a compartir, gracias al servicio t.co, e incluirá el título de la página referida.

En el blog de Promineo Studios hemos introducido éste botón para que los usuarios puedan twittear de manera más cómoda. Puedes ver el nuevo botón en la parte inferior de éste artículo.

Para el que lo quiera implementar en su web es copiar y pegar el código que proporciona Twitter en la página del botón tweet.

La diseñadores web han lidiado desde siempre con la lacra de no tener la suficiente libertad a la hora de elegir las tipografías de una página web. Se limitaban a optar por fuentes estándar, como arial, trebuchet, times... o a usar apaños con javascript o flash para incluir alguna tipografía que los sistemas no tenían por defecto.

Con CSS3 llegó @font-face, una propiedad muy útil para definir en una página web fuentes que el usuario no tenga instaladas en su sistema. Si bien CSS3, y por consiguiente @font-face, sólo está implementada en los navegadores más modernos (Safari 3+ y 4+, Firefox 3.5, e Internet Explorer 7+). Desde mi punto de vista no es una solución a corto plazo, pero sin duda se terminará implantando cuando la mayoría de usuarios cuenten con versiones actualizadas de sus navegadores.

Google al rescate

Ayer Google presentó su directorio de fuentes libres que podremos definir en cualquiera de nuestras web. La cantidad de fuentes aún es limitada, pero con total seguridad que ira creciendo con el tiempo. Qué tal si vemos su uso:

Comenzaré con la manera más limpia de utilizar Google Font. Abrimos nuestra hoja de estilos e introducimos un par de líneas para importar y definir la fuente "Reenie Beanie":

@import url('http://fonts.googleapis.com/css?family=Reenie+Beanie');
 
h1 {
font-family: 'Reenie Beanie', "Trebuchet MS", Tahoma, Arial;
}
 

La otra manera, que considero menos limpia y elegante, es introduciendo una línea en nuestro documento HTML y definir la fuente en nuestro CSS.

link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css" /
h1 {
font-family: 'Reenie Beanie', "Trebuchet MS", Tahoma, Arial;
}

Para usar otra fuente debemos sustituir el valor del parámetro “family” de la url de importación, Reenie+Benie en éste ejemplo, por el de la fuente que vamos a usar y posteriormente definirla. Por supuesto puedes usar fuentes en cualquier otra etiqueta, clase o identificador.

Mi blog personal puede servir de ejemplo. He usado esta técnica para mejorar el formato de los texto. yonerocha.net

Actualización: He leído en unijimpe que podemos importar varias tipografías en una misma llamada de la API, separando el nombre de cada fuente con "|".

Ejemplo: http://fonts.googleapis.com/css?family=Lobster|Cantarell

Un diseñador web, por desgracia, no le basta con que su código CSS y HTML sea válido. Gracias al mal hacer de Microsoft con su navegador Internet Explorer debe perder muchísimas horas parcheando su código para que éste se vea de igual manera en navegadores que si respetan los estándares web (Safari, Firefox, Chrome...) como en los chapuceros IE de Microsoft.

Evidentemente, debemos tener instaladas las versiones más utilizadas de IE para poder probar nuestros diseños web. El problema es que no puedes tener varias versiones instaladas en la misma máquina, no por defecto. La solución viene de la mano de un paquete de software en el que vamos a encontrar cada una de las versiones del dichoso navegador, Internet Explorer Collection.

Internet Explorer Collection contiene las siguientes versiones de IE:

  • Internet Explorer 1.0 (4.40.308)

  • Internet Explorer 1.5 (0.1.0.10)

  • Internet Explorer 2.01 (2.01.046)

  • Internet Explorer 3.0 (3.0.1152)

  • Internet Explorer 3.01 (3.01.2723)

  • Internet Explorer 3.03 (3.03.2925)

  • Internet Explorer 4.01 (4.72.3110.0)

  • Internet Explorer 5.01 (5.00.3314.2100)

  • Internet Explorer 5.5 (5.51.4807.2300)

  • Internet Explorer 6.0 (6.00.2800.1106)

  • Internet Explorer 6.0 (6.00.2900.2180)

  • Internet Explorer 7.0 (7.00.5730.13)

  • Internet Explorer 8.0 (8.00.6001.18702)

La respuesta tiene nombre propio, slccount. Un pequeño programa para GNU/Linux que, como casi siempre, podemos descargar desde los repositorios de Ubuntu. Para eso tenemos que escribir el siguiente comando en la consola:

sudo apt-get install sloccount

Una vez instalado sólo debemos llamar a sloccount pasando la ruta de nuestro proyecto, yo lo he usado en puskasCMS que está escrito en PHP5, pero se puede usar con otros muchos lenguajes de programación.

sloccount /ruta_del_código_fuente

Además, nos proporciona una estimación económica de nuestro proyecto, eso sí, un tanto desorbitada desde mi punto de vista.

Total Physical Source Lines of Code (SLOC) = 57.868

Development Effort Estimate, Person-Years (Person-Months) = 14,18 (170.13)

Estimated Average Number of Developers (Effort/Schedule) = 9,66

Total Estimated Cost to Develop = $ 1.915.147 (average salary = $56.286/year)

¡Mi gestor de contenidos tiene casi 60.000 líneas de código! Tengo que hacer más vida social...

 
  •  1 
  • 2
Recibe los últimos artículos en tu email
  • bloglines
  • Google
  • Netvibes
  • MyYahoo
  • MyMsn
Artículos Destacados
Autores
Categorías
Archivo

2009 - PromineoStudios - Todos los derechos Reservados

Diseño con estándares web - XHTML CSS - Versión anterior del sitio