jQuery 1.4 ya disponible

Publicado el por
1

logotipo de jQuery

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 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í.

Las futuras versiones de Firefox se retrasan

Publicado el por
1

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.

logotipo del navegador Firefox

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.

Navegadores desconocidos o poco utilizados – (parte 1)

Publicado el por
2

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.

pantalla del navegador Swiftfox

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.

Pantalla del navegador Maxthon

  • 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.

Pantalla del navegador Stainless

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.

Pantalla del navegador Sleipnir

fuente http://sixrevisions.com

Selectores de atributo, ¿Todavía nos los utilizas?

Publicado el por
5

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. 

    




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}

Font-face en CSS

Publicado el por
11

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.

Font Face

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.

Citando textos: <Blockquote> vs. <Q> vs. <Cite>

Publicado el por
4

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?

comillas

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:



El contenido de un blockquote elemento debe incluir elementos de bloque como encabezados, listas, párrafos o div's.

Este elemento también puede tener un atributo opcional citar que especifica la ubicación (en la forma de una URI), donde la cotización ha venido.

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.

parte de un artículo destacado

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

Chrome ya es el tercer navegador más utilizado

Publicado el por
1

Chrome

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

Guía de Desarrollo Web Móvil

Publicado el por
1

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.

Guía de Desarrollo Web 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

Manifiesto “En defensa de los derechos fundamentales en internet”

Publicado el por
Responder

Ante la inclusión en el Anteproyecto de Ley de Economía sostenible de modificaciones legislativas que afectan al libre ejercicio de las libertades de expresión, información y el derecho de acceso a la cultura a través de Internet, los periodistas, bloggers, usuarios, profesionales y creadores de Internet manifestamos nuestra firme oposición al proyecto, y declaramos que:

  1. Los derechos de autor no pueden situarse por encima de los derechos fundamentales de los ciudadanos, como el derecho a la privacidad, a la seguridad, a la presunción de inocencia, a la tutela judicial efectiva y a la libertad de expresión.
  2. La suspensión de derechos fundamentales es y debe seguir siendo competencia exclusiva del poder judicial. Ni un cierre sin sentencia. Este anteproyecto, en contra de lo establecido en el artículo 20.5 de la Constitución, pone en manos de un órgano no judicial -un organismo dependiente del ministerio de Cultura-, la potestad de impedir a los ciudadanos españoles el acceso a cualquier página web.
  3. La nueva legislación creará inseguridad jurídica en todo el sector tecnológico español, perjudicando uno de los pocos campos de desarrollo y futuro de nuestra economía, entorpeciendo la creación de empresas, introduciendo trabas a la libre competencia y ralentizando su proyección internacional.
  4. La nueva legislación propuesta amenaza a los nuevos creadores y entorpece la creación cultural. Con Internet y los sucesivos avances tecnológicos se ha democratizado extraordinariamente la creación y emisión de contenidos de todo tipo, que ya no provienen prevalentemente de las industrias culturales tradicionales, sino de multitud de fuentes diferentes.
  5. Los autores, como todos los trabajadores, tienen derecho a vivir de su trabajo con nuevas ideas creativas, modelos de negocio y actividades asociadas a sus creaciones. Intentar sostener con cambios legislativos a una industria obsoleta que no sabe adaptarse a este nuevo entorno no es ni justo ni realista. Si su modelo de negocio se basaba en el control de las copias de las obras y en Internet no es posible sin vulnerar derechos fundamentales, deberían buscar otro modelo.
  6. Consideramos que las industrias culturales necesitan para sobrevivir alternativas modernas, eficaces, creíbles y asequibles y que se adecuen a los nuevos usos sociales, en lugar de limitaciones tan desproporcionadas como ineficaces para el fin que dicen perseguir.
  7. Internet debe funcionar de forma libre y sin interferencias políticas auspiciadas por sectores que pretenden perpetuar obsoletos modelos de negocio e imposibilitar que el saber humano siga siendo libre.
  8. Exigimos que el Gobierno garantice por ley la neutralidad de la Red en España, ante cualquier presión que pueda producirse, como marco para el desarrollo de una economía sostenible y realista de cara al futuro.
  9. Proponemos una verdadera reforma del derecho de propiedad intelectual orientada a su fin: devolver a la sociedad el conocimiento, promover el dominio público y limitar los abusos de las entidades gestoras.
  10. En democracia las leyes y sus modificaciones deben aprobarse tras el oportuno debate público y habiendo consultado previamente a todas las partes implicadas. No es de recibo que se realicen cambios legislativos que afectan a derechos fundamentales en una ley no orgánica y que versa sobre otra materia.

Posicionamiento de Flash en buscadores – limitaciones y consejos

Publicado el por
3

Para complementar la información sobre flash publicada en nuestro anterior articulo, y aprovechando que en la última actualización del Blog para Webmasters de google se habla precisamente de este tema, voy a hablar un poco más en profundidad del posicionamiento de flash en buscadores.

Desde que el año pasado google anunciara una mejora en la capacidad de indexación de páginas desarrolladas con Flash, muchos usuarios han demandado respuestas sobre la relevancia para la búsqueda orgánica que esta mejora traería para sus páginas Flash. A través de su Blog para Webmasters, google ha ido respondiendo a varios interrogantes.

En este artículo, vamos a intentar describir el estado en que se encuentra la tecnología Flash respeto al posicionamiento en buscadores. También veremos lo que se puede y no se puede hacer con flash y te daremos algunas recomendaciones que podrán serte útiles si finalmente decides posicionar tu página desarrollada en Flash.

instalador del Adobe Flash Player

Limitaciones en la indexación de Flash

  • Los buscadores no son capaces de detectar algorítmicamente los textos en flash almacenados como gráficos. Estos textos incrustados pueden contener palabras claves importantes que serán ignoradas.
  • Aunque google da soporte a las técnicas comunes de JavaScript para incrustar Flash como SWFObject, no es capaz de ejecutar algunos tipos de JavaScript poco comunes. Así que si tu página web carga un archivo Flash por esta vía, es posible que no se pueda indexar.
  • Google por ahora no es capaz de rastrear lenguajes bidireccionales. Por lo tanto no es capaz de indexar contenido en hebreo o en árabe por ejemplo, (a nosotros poco nos afecta, pero no es malo saberlo).
  • Ten en cuenta que ningún buscador te garantizará que se indexe correctamente el contenido de tu Flash. Aunque google pueda indexar parte del contenido de tus SWF, puede que otros motores de búsqueda no lo hagan.

Lo que google puede hacer:

  • Indexa el contenido textual que aparece cuando un usuario interactúa con el archivo Flash, así como los enlaces tanto internos como externos.
  • Esto es una novedad muy importante, ahora google puede cargar archivos externos y asociar su contenido con el archivo principal. Por lo tanto ahora puede vincular un archivo XML con el SWF que lo ha cargado.
  • La versión de ActionScript no es relevante para indexar una web.
  • Si no quieres que los buscadores puedan rastrear tu archivo SWF o cualquiera de los recursos externos, utiliza la directiva robots.txt apropiada.

Recomendaciones

  • El título, la dirección URL y el pie de tu web se vuelven mucho más importantes que el resto de elementos. En una página construida en flash es más necesario conseguir enlaces de sitios con mucho peso, de otra manera será casi imposible aparecer arriba en los resultados de búsqueda.
  • Proporciona equivalentes basados en texto de estos archivos Flash, de esta manera permitirás a los buscadores rastrear mejor el contenido de tu web.
  • sIFR es una técnica que sustituye elementos de texto con equivalentes Flash. De este modo, el contenido y la navegación se muestran a través de un objeto Flash incrustado pero, al encontrarse el texto en el HTML puede ser leido por los motores de búsqueda.
  • Utiliza Flash sólo cuando sea estrictamente necesario. Utilizar HTML para mostrar el contenido y la navegación tiene innumerables ventajas. Tu sitio será más rápido, más posicionable, más accesible y por último más compatible con navegadores antiguos no estándar. Además permite a los usuarios marcar contenido como favorito y enviar enlaces directos por correo electrónico. Ten en cuenta que el coste económico de una web Flash indexable es bastante mayor que una página HTML.
  • Adobe tiene un centro SEO para Flash , (en ingles), donde podemos encontrar recursos y ejemplos, que puede ser una buena ayuda.