Christian Bonner's Blog » 2011 » julio

CSS3 Pie: Decoraciones para IE

admin — Tue, 05 Jul 2011 05:05:24 +0000

Una de las cosas que más me frustran en el desarrollo de páginas web es el no poder utilizar ciertas instrucciones de CSS 3 en Internet Explorer cuando en otros navegadores (Firefox, Chrome, Opera y Safari) sí se pueden desde hace ya un par de versiones. El proceso de adopción por parte de IE a estándares como HTML5 y CSS3 ha sido muy lento, ya que hasta hace poco el IE9 ya soporta algunas de estas coracterísticas, pero sus predecesores no.

Un mecanismo que nos permite solucionar algunos de estos problemas es CSS3 PIE. Esta herramienta permite utilizar en Internet Explorer 6-8 algunas de las capacidades de decoración de CSS3 tales como:

border-radius.
box-shadow.
linear-gradient.

Si quieres resolver este tipo de problemas, accede a http://css3pie.com/ y descarga el código fuente de este mecanismo.

HTML5 Boilerplate: más que una plantilla para desarrollo web

admin — Mon, 04 Jul 2011 20:15:08 +0000

En la actualidad la evolución del HTML nos permite cada vez más hacer más con menos, tener más posibilidades de Interfaces Ricas en Internet entre otras cosas. Desde hace tiempo me dí a la tarea de buscar en Internet una serie de recursos de la versión HTML 5 y encontré un excelente punto de referencia para construcción de sitios web con bastantes elementos interesantes, para que vean a qué me refiero, les paso la descripción de este proyecto:

HTML5 Boilerplate es un excelente punto de partida para construir sitios HTML/CSS/JS rápidos, robustos y de futuro.

Tras más de tres años en desarrollo iterativo, obtienes lo mejor de las mejores prácticas ya incorporadas en el proyecto: normalización entre navegadores, optimizaciones de rendimiento, incluso características opcionales como Ajax y Flash cross-domain. Un archivo de configuración de Apache .htaccess de arranque que configura las reglas de caché y prepara a su sitio para servir video HTML5, usar @font-face, y activa la compresión gzip.

Boilerplate no es un framework, ni tampoco sigue ninguna filosofía de desarrollo, son sólo algunos trucos para que puedas arrancar tu proyecto de una manera rápida y con buenos cimientos.

Yo en lo personal lo he utilizado y me ha dado muy buenos resultados!!!

Ref: http://html5boilerplate.com/

Tipografías en la Web

admin — Sun, 03 Jul 2011 18:11:42 +0000

Como es bien sabido por aquellos profesionales de la web, no todas las tipografías se pueden utilizar en las páginas web de manera predeterminada, ya que no se cuenta en todo los dispositivos o equipos de cómputo, la fuente instalada. Las tipografías predeterminadas para uso en web son:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Monaco
Lucida Grande
Palatino
Geneva
Times
Helvetica
Verdana

Esto en ocasiones es una gran limitante para muchos diseñadores, ya que no permite mostrar el mayor potencial gráfico a través de tipografías en las páginas web. Para solucionar esto, existen diferentes mecanismos, ya sea utilizando tipografías propietarias o de uso libre:

SIFR: Scalable Inman Flash Replacement o simplemente sIFR es una tecnología de código abierto que hace uso de Javascript y Adobe Flash que permite el reemplazo de elementos de texto en páginas web HTML con sus equivalentes en Flash. Este mecanismo permite utilizar cualquier tipografía, ya que le Licencia (EULA) permite que un archivo SWF pueda contener cualquiera de las tipografías disponibles en Adobe Flash.
FLIR:Facelift Image Replacement o FLIR es un script que genera de manera dinámica imágenes que reemplazan un texto en las páginas web. Para poder hacer uso de este script es necesario contar con la librería PHP GD. Por ser una imagen no viola la Licencia (EULA). Una desventaja que tiene es que no todas las tipografías cuentan con caracteres especiales cuando se convierten a imagen.
Cufón:Cufón es una alternativa que convierte tipografía a su representación equivalente en vectores almacenada en el formato JSON y se muestra en un contenedor (CANVAS) o VML utilizando Javascript. Una desventaja es que no todas las tipografías se pueden utilizar, ya que algunas requieren licencia. Adicionalmente, cuando uno tiene la licencia de una tipografía, es necesario encriptar los datos para evitar que puedan descargarla de manera ilegal.

Otras alternativas para su uso es a través de servicios gratuitos/de pago de tipografías tales como:

Google Fonts: Es un servicio gratuito para hacer uso de tipografías libres en páginas web.
Web Fonts.com: Es un servicio gratuito (con ciertas limitaciones) y de pago para hacer uso de un catálogo disponible de tipografías.
Font Spring: Es un servicio de pago para conseguir el kit de archivos necesarios para hacer uso de algunas de sus tipografías en nuestro sitio web.
Font Squirrel: Es un sitio que cuenta con un amplio catálogo de tipografías de uso libre y una herramienta para generar los archivos necesarios para hacer uso de esas tipografías en nuestra página web.

Pruebas en múltiples navegadores web: Parte 1

admin — Sun, 03 Jul 2011 16:56:12 +0000

En la actualidad es muy importante desarrollar páginas web que puedan ser vistas en los navegadores web, por lo cual se hace de vital importancia el uso de herramientas y aplicaciones que nos permitan lograr este objetivo.

El primer paso a tomar en cuenta es el uso de los navegadores web por parte de los usuarios y para esto se recomienda visitar sitios que nos permitan obtener datos estadísticos tales como:

El segundo paso es contar con las versiones más recientes de los navegadores más utilizados:

Es importante considerar también el uso y emulación navegadores web de dispositivos móviles como:

Firefox Mobile: Fennec. (emulador Firefox Mobile)
Opera Mobile. (emulador Opera Mobile)
Safari Mobile – Ya incluído en iOs. (kit de desarrollo/emulador de iOS – solo Mac OS X)
Dolphin. (kit de desarrollo/emulador de Android)

El tercer paso es contar con herramientas que permitan visualizar la página web en diferentes versiones de navegadores:

IETester (Windows): Es una herramienta gratuita que permite visualizar las páginas web en diferentes versiones de Internet Explorer: 6, 7, 8 y 9.
Multi-Safari (Mac Os X): Es un repositorio de diferentes versiones de Safari para la realización de pruebas.
Multi Firefox/Opera/Chrome: Esto es posible gracias a las aplicaciones portables, un recurso que nos permite hacer uso de determinado software sin necesidad de instalarlo.
Máquinas virtuales (Virtual PC, Virtual Box, VMWare, etc) : En algunas ocasiones es lo más recomendado cuando por alguna razón no podemos utilizar alguno de los recursos anteriores y que nos permite instalar algunas versiones de sistemas operativos en los cuales sí podemos hacer uso de navegadores anteriores o incluso otros sistemas operativos diferentes al que estamos utilizando en nuestro equipo de cómputo.

Plugins de Firefox para Webmasters

admin — Sun, 03 Jul 2011 07:14:54 +0000

Uno de los navegadores que mayor crecimiento hay tenido en los últimos años, ha sido Firefox. A mí en lo personal me gusta mucho y es mi favorito. Cuenta con bastantes plugins muy útiles para los que se dedican al desarrollo web y posicionamiento en buscadores.

Los plugins que no pueden faltar son:

Desarrollo Web

Posicionamiento en Buscadores

Por el momento son los plugins que recuerdo. Si me hace falta alguno, lo anexaré más adelante.

Algun plugin que recomienden para desarrollo o posicionamiento en buscadores?