Hace pocos días que ha sido lazanda la esperada versión 1.4 de jQuery. De hecho todavía no está disponible en la web oficial, aunque se puede descargar de jquery14.com o de los siguentes enlaces:

• jQuery 1.4 optimizado (23kb)
• jQuery 1.4 estándar(154kb)
• Alojada en Google: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
• jQuery 1.4 Documentación

jQuery es probablemente el framework JavaScript más popular de la web, por lo que el equipo de jQuery necesita ser muy cauto respecto a los cambios en las nuevas versiones.

207 errores han sido corregidos, ahora consigue un 100% de compatibilidad en todas las pruebas en IE6, IE7, IE8, Firefox 2, Firefox 3, Firefox 3.5, Safari 3.2, Safari 4, Opera 10.10, y Chrome. Se han añadido un número considerable de nuevos métodos y dos nuevos eventos: focusIn y focusOut.

También se han publicado una serie de posibles incompatibilidades que pueden aparecer al actualizar este framework, podemos verlas aquí.

Hace tiempo que contamos las mejoras que traerían las futuras versiones de Firefox.Sin embargo la wiki de Mozilla ha informado que se han retrasado las fechas de lanzamiento de las versiones 3.6 y 4.0. y se ha cancelado la versión 3.7.

Con estos retrasos, el lanzamiento de la versión 3.6 queda fijado para el primer trimestre del 2010 y la versión 4.0 quedaría relegada para finales del 2010 o incluso el 2011

A pesar de todo, desde Mozilla se ha decidido añadir muchas de las nuevas funcionalidades previstas para estas versiones junto a las actualizaciones de seguridad. De esta manera, podremos disfrutar mucho antes de lo previsto de algunas nuevas características y mejoras que incluirán las futuras versiones. Parece ser que Mozilla quiere darse prisa para no quedarse atrás respecto a los navegadores de la competencia, que disfrutan de un rápido desarrollo.

Una de las funcionalidades más interesantes, que podría llegar este mismo trimestre, son los llamados plugins en procesos independientes, que permitirán que los complementos se ejecuten cada uno en su proceso independiente y de esta manera no sobrecargar demasiado el proceso general del navegador. Así se podrá evitar perder todos los complementos en caso de un fallo general de la aplicación.

Todos los desarrolladores sabemos de la existencia y desarrollamos para navegadores muy comunes y ampliamente utilizados como son Firefox, Safari, Chrome, Opera o Internet Explorer. Entre ellos se está recrudeciendo la lucha por ganar cuota de mercado. Esta lucha es tan fuerte que es improbable que alguno de ellos alguna vez sea el ganador absoluto y se repita la situación de monopolio que tuvo Microsoft hace no tanto tiempo.

Pero hay otros navegadores en la sombra. No tan populares, no tan potentes y no tan avanzados como los mencionados anteriormente, pero sin duda con utilidades interesantes que aportar. Algunos son utilizados por una minoría de usuarios avanzados aquí en España, pero son más conocidos en sus países de desarrollo, otros son celebridades para sistemas operativos minoritarios.

En esta serie de artículos, veremos unos cuantos navegadores minoritarios que por unas razones u otras, no son conocidos ni por el gran público, ni en su mayor parte por nosotros los desarrolladores.

Swiftfox

Se trata de un clon de Firefox para Linux, pero mucho más ligero y rápido , (swift significa velóz, rápido). Además está optimizado para ciertos procesadores tanto de 32 como de 64 bits.

La interfaz de usuario es similar a Firefox, pero más minimalista y fácil de usar. Un detalle importante, Swiftfox no puede ejecutarse mientras Firefox esté en uso, y viceversa. La mayoría de las demás características están, en línea de lo que Firefox puede ofrecer. Si te gusta Firefox, pero quieren algo más rápido y más ligero, entonces Swiftfox puede interesarte.

• Versión actual : 3.5.6
• Sistemas operativos compatibles: Linux
• Página web: http://getswiftfox.com/index.htm

Maxthon (anteriormente MyIE2)

Es un navegador para Windows basado en el motor de Internet Explorer (Trident). Pone énfasis en la seguridad. A este respecto, lleva incorporado un potente filtro de popups, spyware, malware, virus y un bloqueador de publicidad para eliminar el contenido presente de la publicidad integrada en las páginas.

Es completamente configurable, (desde las teclas de acceso rápido y barras de herramientas hasta los gestos de ratón). Además el navegador lleva integradas herramientas tan interesantes como un capturador de pantalla, un lector de feedy un servicio en línea de favoritos.

Según su página oficial, utiliza un promedio de 65% menos de consumo de memoria RAM que Explorer 7,cuando ambos exploradores tienen abierto el mismo número de páginas.

• Versión actual: 2.5.11 (la versión clásica también está disponible: 1.6.5)
• Sistemas operativos compatibles: Windows
• Página web: http://maxthon.com/index.htm

Stainless (en desarrollo)

Basado en la filosofía multiproceso de Google Chrome, este navegador para Leopard, puede gestionar mediante procesos independientes las pestañas abiertas.

Entre otras funcionalidades, lo más interesante es la función parallel sessions, que es la posibilidad de abrir otra pestaña con otra sesión de navegación. También han añadido una barra de direcciones con auto completado y sugerencias. Otra funcionalidad interesante es la posibilidad de modificar la apariencia visual del navegador mediante temas, aunque de momento sólo han habilitado la API.

El navegador consume muy pocos recursos y ocupa poco espacio en disco, pero todavía no ofrece soporte a 64bits. Como es una beta, es de esperar que para la versión 1.0. todavía pueda mejorar en muchos aspectos.

• Versión actual: 0.7.5
• Sistemas operativos compatibles: MACOS X Leopard and Snow Leopard.
• Página web: http://www.Stainlessapp.com/

Sleipnir

Sleipnir es un navegador muy popular en Japón, con una cuota de mercado del 6%. Se trata de un navegador profundamente personalizable y muy versátil. Ofrece multitud de opciones al usuario y temas para cambiar la apariencia de forma radical. Además mantiene una buena velocidad y el rendimiento a pesar de las personalizaciones y cuenta con gran cantidad de plugins que amplían sus funcionalidades.

Hace hincapié en la seguridad y facilidad de uso, y permite la navegación por pestañas. Lo más interesante, es la posibilidad de elegir el motor de renderizado para la visualización de nuestras páginas. Podemos elegir entre Gecko, de Firefox, o el Trident de Internet Explorer. Incluso los podemos usar a la vez en dos pestañas diferentes.

• Versión actual: 2.9.2
• Sistemas operativos compatibles: Windows 98 y posteriores
• Página web: http://www.fenrir-inc.com/us/sleipnir/

fuente http://sixrevisions.com

Todos sabemos que las etiquetas en HTML pueden tener atributos tales como alt, title, href etc… Aparte de para lo obvio estos atributos nos pueden servir para dar especificidad a nuestros selectores CSS. Los llamados selectores de atributo, son unos selectores avanzados y escasamente conocidos, capaces de identificar estos atributos de un elemento y pasarles un estilo. Con ellos nos podríamos librar de por ejemplo, poner clases e identificadores a muchas etiquetas HTML.

Existen un número reducido de selectores de atributo en CSS2, pero éstos se han ampliado para la próxima versión de CSS3. En este artículo veremos cuantos tipos de selectores de atributo hay y la mejor manera de utilizarlos.

Selectores por atributos en CSS2 (no funcionan en ie6)

• etiqueta[atributo]: Los estilos se aplicarán a todas las etiquetas que tengan ese atributo.

  
  CSS
  
  abbr[title] {color: #666;border-bottom: 1px dotted #666;}
  

• etiqueta[atributo=valor]: Se aplicará a los estilos de todos las etiquetas que tengan ese atributo con ese valor.

  
  Nombre
  
  
  
  input[type="text"] {width: 200px;}
  

• etiqueta[atributo~=valor]: El estilo se aplicará a las etiquetas que tengan ese atributo y que uno de sus valores separados por espacios sea el valor:

  
  Descargar
  El selector de atributo no se aplicará en este enlace
  
  a[title~=PDF]{background:url(img/pdf.gif) no-repeat center right}
  

• etiqueta[atributo|=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo y que sea igual a valor o a valor seguido de un guíon. Este tipo de selector es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

  
  Windows
  
  *[lang|="es"] { color : red }
  

Selectores de atributos en CSS3 (no funcionan en ie6)

Los navegadores Standard, ya incluyen soporte para varios o casi todos los selectores de CSS3, por lo tanto los selectores que veremos a continuación funcionaran correctamente en Opera, Safari, firefox y Chrome. Según la Microsoft Developer Network de Microsoft, estos selectores son compatibles en Internet Explorer 7 y 8.

A este respecto, existe una herramienta muy útil llamada CSS Selectors test que permite comprobar los selectores que soporta el navegador con el que se hace la prueba.

• elemento[atributo^="valor"]: Se seleccionan todos los elementos que tienen este atributo y cuyo valor comienza por la cadena de texto indicada.

  
  este enlace tendrá un color gris
  El selector de atributo no se aplicará en este enlace 
  
  a[href^=http://] {color:#ccc}
  

• elemento[atributo$="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada. Este selector es muy útil para agregar un icono diferente al lado de cada tipo de archivo que tu sitio web enlace. De este modo, los usuarios de tu sitio sabrán cuándo obtendrá una imagen, un archivo PDF o un documento de Word, aumentando así la usabilidad de tu web.

  /*CSS*/
  a[href$=".jpg"] {background: url(jpeg.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
  a[href$=".pdf"] {background: url(pdf.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
  a[href$=".doc"] {background: url(word.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
  a[href$=".swf"] {background: url(flash.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
  

• elemento[atributo*="valor"]: Se aplica a todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.

  
  El selector de atributo no se aplicará en este párrafo 
  Este párrafo tendrá un tamaño de fuente de 1.2em y negrita
   El selector de atributo no se aplicará en este párrafo
  
  
  p[title*="ont"] {font-size:1.2em; font-weight:bold}
  

Todos sabemos que la propiedad de CSS font-face funciona en los navegadores como Firefox y Opera entre otros. Pero nunca conseguíamos adaptarlo correctamente para Internet Explorer. Explicamos brevemente como conseguir que funcione sin problemas.

Antes de nada, debemos convertir la fuente al formato embebido eot. Este formato es el que usaremos para Internet Explorer, para el resto de navegadores se deja el formato estandar ttf.

Ya obtenidos ambos formatos de la fuente que queremos aplicar en nuestra Web, pasamos a la hoja de estilos. Tenemos que introducir las siguientes líneas de CSS, donde se define el nombre de la fuente y la ruta donde se encuentra dicha fuente.

Navegadores Comunes (Firefox, Opera, Safari, Chrome)

@font-face{
font-family:'20th Century Font';
src: url('../font/20thfont.ttf') format('truetype');
}

Internet Explorer

@font-face{
font-family:'20th Century Font';
src: url('../font/20thfont.eot');
}

Una vez que se haya escrito estas líneas en la hoja de estilos de nuestra Web, ya podemos usar dicha fuente en cualquier elemento HTML, por ejemplo:

#menu ul li a{color:#000;font-family:"20th Century Font";}

Para convertir las fuentes a los diferentes formatos, podéis usar la aplicación Microsoft WEFT. Bueno espero que os sirva de ayuda. He de advertir que no todas las fuentes suavizan de forma nítida en todos los navegadores, pero es el único método y el más preciso para conseguir visualizar las fuentes.

Cuando marcamos el contenido de nuestras páginas, muchas veces tenemos que hacer referencia a textos que pueden ser tanto ajenos como propios. En ambos casos, haremos uso de las citas.

La mayoría de las veces, se tiende a encerrar el texto de la cita en un párrafo y separarlo con comillas del resto del texto. Esto tiene la desventaja de que los buscadores no interpretarán correctamente nuestro contenido. Sin embargo, HTML nos ofrece varias etiquetas con las que podemos enriquecer semánticamente a nuestro código. ¿Que etiquetas son y cuándo haremos uso de cada una de ellas?

Etiqueta <blockquote>

Sirve para englobar una cita de gran tamaño. El contenido de un blockquote puede incluir elementos de bloque tales como encabezados, listas, párrafos…etc. Puede resaltar la parte más interesante de nuestros textos y de esta manera fijar la atención de los usuarios donde más nos interese que lean.

También puede citar contenido externo. En este caso existe un atributo opcional cite que especifica la procedencia de la cita.

Ejemplo:

<blockquote title="Abre en nueva ventana" lang="en"
cite="http://www.smashingmagazine.com">Smashin magazine</blockquote>

Problemas con los blockquote

Si vas a utilizar blockquote para resaltar contenido de tu texto, va a ver un pequeño problema de accesibilidad. Para nosotros se trata de un texto visualmente destacado, pero para un lector de pantalla simplemente, es un texto duplicado. Por ello es conveniente proporcionar una información extra para los usuarios que se tropiecen con este problema.

Una solución puede ser ofrecer un mensaje oculto por CSS que diga algo así como “Inicio de texto destacado” antes de la cita y “Fin del texto destacado” al finalizar la misma.

Etiqueta <Q>

Se trata de un elemento de línea que sirve para citaciones pequeñas. Los navegadores interpretan esta etiqueta como un entrecomillado.

Ejemplo:

Pablo dijoHola Pero Laura dijo Adiós

Aunque la etiqueta <q> cada vez se utiliza menos, tiene algunas propiedades muy útiles. Por ejemplo, puedes especificar el aspecto de las comillas a través de CSS de la siguiente manera:

/*CSS*/
Q {}
Q { quotes: '»' '«'   }
Q { quotes: '„' '“' }

Debido a algunos problemas con la codificación (sobre todo en Internet Explorer), puede ser útil dar a las comillas valores numéricos. De acuerdo a el web standard puedes incluso especificar el aspecto de las comillas, dependiendo del idioma del navegador del usuario. Este es el ejemplo del W3C:

/*CSS*/
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»'   '«' '\2039' '\203A' }

Etiqueta <cite>

Sirve para marcar al autor de una cita.

Ejemplo:

Y dijo Bob pienso luego existo.

Atributos de las etiquetas

A parte de los atributos ya conocidos como id, class o title recalcaría los dos siguientes que son opcionales y se aplican tanto a <q> como a <blockquote>:

• cite: Contiene la URL origen de la que se ha extraído la cita (En el caso que se trate de un documento online).
• lang: Contiene el código del idioma en el que se encuentra la cita. Por ejemplo: ‘en’, ‘es’, ‘de’,…

En resumen

Por lo tanto, utilizaremos la etiqueta <blockquote> para citas grandes o destacado de texto propio, para citas pequeñas utilizaremos la etiqueta <q> y para referenciar a otras fuentes la etiqueta <cite> es lo más adecuado.

Fuente Smashing magazine

A día de hoy, Google Chrome ya es el tercer navegador más usado en la web, según datos de Net Applications. Esta empresa rastrea los hábitos de uso de navegadores web de más de 160 millones de usuarios cada mes, monitoreando más de 40 mil sitios web, por lo que se pueden considerar datos más o menos fiables.

Después del lanzamiento oficial de las versiones beta para Mac y Linux, el navegador aumentó su cuota de mercado a 4,4% (un aumento de 0,4%) en la semana del 6 al 12 de diciembre, superando a Safari que tiene una cuota del 4,37%.

Según la misma fuente, Mozilla es el segundo navegador más usado, con un 24,7 por ciento, mientras que el jefe sigue siendo Internet Explorer de Microsoft, presente en más de 63 de cada 100 ordenadores.

w3schools nos ofrece una curiosa forma de mostrar la evolución de usuarios que han tenido los distintos navegadores desde 2002, donde se aprecia perfectamente como la “mancha azul” poco a poco va perdiendo terreno.

Estadísticas históricas de los navegadores

Los chicos de mobiforge nos ofrecen de forma gratuita la una dotMobi Guía de Desarrollo Web Móvil. No es una guía muy reciente, pero básicamente contiene casi todos los puntos para cualquiera Web para Móvil.

La guía se ha realizado basandose en el documento de Mobile Web Initiative de W3C Mobile Web Best Practices 1.0, pero lo lleva más lejos. Es muy importante tener la base de estas mejores prácticas y hacerlo más accesible. Con esto en mente, la guía comienza describiendo el panorama web móvil en detalle, y la importancia del contexto móvil.

Hay ejemplos de código y un montón de información útil. Describe las técnicas reales para crear un sitio apto para móviles y la forma de publicarlo. Esta guía está diseñada para los desarrolladores que ya están familiarizados con el desarrollo web en general, pero que ahora quieren probar suerte en el móvil. Por ahora, la guía no incluye las técnicas más avanzadas tales como la adaptación, pero eso se verá en la parte II.

Descargar Guía de Desarrollo Web Móvil