Lightbox es una aplicación desarrollada en JavaScript. Este script ha ganado popularidad y distribución gracias a su simplicidad y elegante estilo, además de su fácil implementación. Permite al usuario ver una versión original y ampliada de imágenes sin necesidad de ir a otra página, además de ofrecer una herramienta simple y profesional para el mostrado de imágenes en un sitio web.

Existen una gran variedad de clones de Lightbox que podemos ver de la mano de anieto2k.

Sin embargo aquí vamos a mostraros un ejemplo de un lightbox accesible, es decir una galería de imágenes usando JavaScript no intrusivo y un correcto marcado semántico.

Antes que anda debemos de disponer de 3 archivos para que nos funcione la galería de imágenes con LightBox; jquery.lightbox-0.5.css, jquery.js y jquery.lightbox-0.5.js. Estos 3 archivos, lógicamente debemos ponerlo en nuestro código HTML para poder hacer uso de ellos. Así cuando se llame a dicha función no falte nada. Además de los archivos os dejo las imágenes que se usan como elementos de navegación en lightbox. Para no descargar todos los archivos por separado. Os dejo un archivo zip con todos los ficheros que se usan en el ejemplo: Descargar ejemplo. A continuación explicamos detalladamente como implementar nuestra galería de imágenes:

HTML

Como podemos ver en el código HTML del ejemplo. Tenemos el enlace que apunta a la imagen con el atributo href. Si el JavaScript está activado, funcionará con el efecto de Lightbox, y en el caso de que no lo esté funcionara como un enlace a una imagen.

Para que el Lightbox funcione, debemos poner esta línea de JavaScript donde especificamos los enlaces. De esta manera llamará a la función y usará las imagenes que se encuentra dentro de los elementos de enlace:

JavaScript

Con lo explicado, tendríamos lo suficiente para tener nuestra propia galería de imágenes. Ya tenemos un HTML correcto, un Javascript no intrusivo y una alternativa a dicho JavaScript. El resultado final podemos apreciarlo en el siguiente enlace:

Ver ejemplo funcionando

¿Nunca te has preguntado porque los diferentes navegadores visualizan las mismas páginas de diferente manera?, esto es debido a los motores de renderizado.

¿Entoces que es un motor de renderizado?, pues es la parte de un navegador que toma el contenido marcado, (como XML o HTML), lo interpreta de manera visual y lo presenta visualmente a los usuarios. Todos los navegadores web incluyen algún motor de renderizado.

El termino motor de renderizado, (layout engine o rendering engine en ingles), se hizo popular cuanto Mozilla, desarrolló el suyo de manera libre y diferenciado del propio navegador, siendo posible de esta manera reutilizarlo para otros navegadores. Ahora veremos algunos de los motores más importantes.

Gecko

Gecko es un motor multiplataforma y libre originalmente desarrollado por Netscape. Actualmente su desarrollo es gestionado por la Fundación Mozilla.

Solía ser criticado por su enorme complejidad y uso de memoria. La mayor parte de estas debilidades se subsanaron en Firefox 3 con el nuevo motor Gecko 1.9 Con este motor se logró disminuir drásticamente el uso de memoria, incluso superando a Safari y Opera. Estos cambios permitieron a Gecko pasar el test Acid2 y soportar algunos elementos de CSS 3 (ya implementados en WebKit). Con la llegada de Firefox 3.1, se implementó Gecko 1.9.1 que incluía TraceMonkey, el nuevo intérprete JavaScript. Las futuras mejoras, harán que Gecko sigua siendo una opción muy sólida frente a WebKit.

Aquí podemos ver los pasos que realiza el motor de renderizado Gecko hasta mostrar la página web

KHTML/WebCore:

KHTML es el motor de renderizado HTML de código libre desarrollado para el navegador web de KDE: Konqueror. En el 2003 fue adoptado por Apple para su navegador Safari. KHTML se encuentra liberado bajo la licencia LGPL.

WebKit

WebKit es un motor de render HTML de código abierto, desarrollado por Apple sobre la base del código KHTML, para Konqueror. Se trata de un motor sumamente liviano, reconocido por tener un código compacto, simple, claro y riguroso por su respeto a los estándares HTML, además usar poca memoria para su funcionamiento.

Desde Google Chrome también lo adaptó, WebKit está ganando popularidad a pasos agigantados. Y es justamente esta creciente popularidad que, para algunos, comienza a poner en duda la relevancia de Mozilla Gecko como motor HTML.

Trident (también conocido como MSHTML)

El Motor de renderizado Trident de Microsoft es considerado por la mayoría de desarrolladores como el cáncer de Internet. Es el motor menos compatible con los estándares, lo que durante mucho tiempo ha supuesto que un gran número de páginas web no estén diseñadas para ser compatibles con los estándares, sino para ser compatibles con Explorer.

La versión 4.0 de Trident, que acompaña Internet Explorer 8, fue la primera versión en pasar el test Acid2 ,(casi 5 años después que safari), cuando todos los demás motores pasan sin problemas el test Acid3 .

Entonces la pregunta del millón es , si es tan malo, ¿porque se empecina Microsoft en seguir desarrollándolo? . Lo más lógico es que no hayan querido romper con todas las webs diseñadas para su navegador, por aquello de no dejar en la estacada a sus clientes más fieles.

Presto

Es el motor de código cerrado desarrollado por Opera Software para el navegador Opera. Fue introducido en la versión 7.0 de este navegador reemplazando al motor Elektra que se usó para las versiones 4, 5 y 6 de este navegador.

La versión 2.2 de Presto fue el primer motor en lograr pasar las pruebas Acid3Test al 100%. Esto hace que Opera 10 sea probablemente en el navegador con mejor soporte para los estándares web.

Comparativa

Por último enlazo una comparativa de velocidad entre navegadores realizada por SixRevisions.

Las etiquetas de cabecera (no confundirse con la etiqueta HTML <head>) se utilizan para jerarquizar, estructurar y dar coherencia al contenido de una página. Hay seis tamaños de etiquetas de cabecera, empezando con <h1>, la más importante, y terminando con <h6>, de menor importancia.

Las etiquetas <strong> y <em> sirven resaltar las palabras importantes dentro de nuestra web. Esto visualmente contribuye a mejorar la legibilidad de la misma y semánticamente sirve para señalar contenido con un peso específico mayor  dentro de nuestros textos.

Si son utilizadas correctamente, estas etiquetas ayudarán a que nuestras palabras clave, adquieran un peso mayor desde el punto de vista del buscador. Se trata pues de encontrar una buena estrategia para garantizar la eficacia de estas etiquetas. En este artículo veremos algunas de estas estrategias y hablaremos sobre el correcto uso de estas etiquetas.

Recuerda que el posicionamiento trata de dar la mayor visibilidad posible al contenido de nuestros sitios web. Todos estos consejos no son inútiles si tus contenidos no son atractivos ni interesantes para los usuarios. Antes de aplicar estas recomendaciones asegúrate de tener unos textos bien redactados y un nicho palabras clave competitivo. Sea cual sea la temática de tu página, intenta ofrecer siempre contenidos frescos y novedosos.

Consejos de posicionamiento

• Utilizar correctamente la estructura encabezados: define previamente cuáles son los puntos más importantes y los puntos secundarios del contenido de tu web. Seguidamente englóbalos en la etiqueta de cabecera que resulte más adecuada, tanto semánticamente con desde el punto de vista del posicionamiento. No utilices las etiquetas de cabecera cuando etiquetas como <em> y <strong> puedan ser más recomendables.
• Marca el contenido como cabecera cuando realmente tenga sentido hacerlo: crea una estructura de encabezados  que jerarquice la página correctamente y de esta menara ayude a los buscadores a rastrear el contenido de tu web. No utilices las cabeceras para dar formato visual al texto, para eso ya tenemos CSS
• Usa los encabezados con moderación: demasiadas encabezados pueden hacer que los usuarios encuentren difícil de entender el contenido. El uso excesivo de las etiquetas de cabecera puede ser contraproducente, porque se puede dispersar el peso de las palabras clave que realmente quieras posicionar.
• Ten en cuenta que: aunque las palabra marcadas con <strong> y con <em> adquieran un peso específico, este será probablemente mucho menor que si estuvieran marcadas como encabezados.
• Intenta no marcar demasiadas palabras con la etiqueta <h1>: de este modo no se debilitará el peso de las palabras clave. Introduce en esta etiqueta un contenido similar a la etiqueta <title> y asegúrate de que en ambas etiquetas estén presentes las keywrods que desees posicionar.
• La etiqueta <h2> se puede utilizar varias veces en una misma página: puesto que cumple la función de subtítulo. Por lo tanto podremos introducir en ella aquellas palabras clave secundarias que no hemos podido insertar en la <h1>.
• Utiliza CSS de manera adecuada: utilizar una hoja de estilo externa, tiene innumerables ventajas. Se puede reducir considerablemente el peso de nuestras páginas, aumentar la productividad al facilitar posteriores cambios de diseño y separar contenido de diseño, con lo que cumpliremos con los Web Standard. Pero utilizar CSS incorrectamente, puede provocar que se deteriore el posicionamiento de nuestro site. Si definimos por hoja de estilo los encabezados, las negritas o las cursivas y estas etiquetas no están en código, perdemos estas herramientas que nos ayudarán a posicionar mejor nuestro site.

Desde Maestros del Web, nos hacen saber de una herramienta innovadora para generar bocetos para tus diseños Web. La aplicación es muy sencilla e intuitiva, de una manera rápida podemos crear un boceto de la Web que vamos a diseñar.

La aplicación se llama Balsami Mockups. Con esta herramienta podemos enseñarle a un diseñador como queremos que sea la estructura de nuestra Web, ya el diseñador se encargará de todo lo demás. Podemos también compartir nuestros bocetos con otros que usen la misma aplicación, y así poder modificarlo dependiendo de nuestras expectativas en el diseño.

Os dejo un video demostrativo de la aplicación, así en unos minutos os podéis hacer una idea de como funciona y lo rápido y sencillo que resulta:

No sólo esta orientado al diseño Web, también a aplicaciones de escritorio, aplicaciones para Iphone, etc. La aplicación no es gratuita, pero podéis descargaros la versión de prueba que funciona al 100%. Con esta herramienta nos evitaremos gastar tinta y papel. Es muy práctico en este aspecto, ya que podemos mostrarlo al Diseñador o viceversa y compartir ideas. Finalmente os dejo el enlace de descarga de la aplicación Balsami Mockups:

Descargar Versión de prueba de Balsami Mockups

Fuente: Maestros del Web

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}