martinpulido.com - Blog sobre programacion front, xhtml, css, estándares y accesibilidad web.

Eso es lo que más de una vez nos hemos preguntado todos los desarrolladores web. Pues Alexis Deveria no solo se lo ha preguntado, sino que ha hecho una mini-aplicación online en la que resume cuándo podremos usar cada una de esas propiedades tan deseadas en los diferentes navegadores.

Selectores CSS3

	Internet Explorer	Firefox	Safari	Chrome	Opera
Pasado	6.0	2.0	3.1	0.2	9.0
Presente	7.0	3.0	3.2	1.0	9.6
Futuro Cercano (2009)	8.0	3.5	4.0	1.*	10.0
Futuro (2010 o más tarde)	9.0	4.0	4.*	2.0	10.*
Conclusion: No está listo. Esperando a que se deje de utilizar Internet Explorer 8

Canvas

	Internet Explorer	Firefox	Safari	Chrome	Opera
Pasado	6.0	2.0	3.1	0.2	9.0
Presente	7.0	3.0	3.2	1.0	9.6
Futuro cercano (2009)	8.0	3.5	4.0	1.*	10.0
Futuro (2010 o más tarde)	9.0	4.0	4.*	2.0	10.*
Conclusion: No está listo. Esperando a que se deje de utilizar Internet Explorer 8

SVG

	Internet Explorer	Firefox	Safari	Chrome	Opera
Pasado	6.0	2.0	3.1	0.2	9.0
Presente	7.0	3.0	3.2	1.0	9.6
Futuro Cercano (2009)	8.0	3.5	4.0	1.*	10.0
Futuro (2010 o más tarde)	9.0	4.0	4.*	2.0	10.*
Conclusion: No está listo. Esperando a que se deje de utilizar Internet Explorer 8

@font-face

Lo curioso es que de la futura propiedad CSS @font-face tenemos dos posibles soluciones. Por un lado tenemos el borrador en el que está trabajando la W3C y por el otro la solución que ha propuesto Microsoft que consiste en que el archivo de tipografía sea EOT.

@font-face

	Internet Explorer	Firefox	Safari	Chrome	Opera
Pasado	6.0	2.0	3.1	0.2	9.0
Presente	7.0	3.0	3.2	1.0	9.6
Futuro Cercano (2009)	8.0	3.5	4.0	1.*	10.0
Futuro (2010 o más tarde)	9.0	4.0	4.*	2.0	10.*
Conclusion: No está listo. Esperando a que se deje de utilizar Chrome 1

Nota: Internet Explorer solo soporta tipografías EOT

Tipografias OpenType para ser utilizadas en @font-face

	Internet Explorer	Firefox	Safari	Chrome	Opera
Pasado	6.0	2.0	3.1	0.2	9.0
Presente	7.0	3.0	3.2	1.0	9.6
Futuro Cercano (2009)	8.0	3.5	4.0	1.*	10.0
Futuro (2010 o más tarde)	9.0	4.0	4.*	2.0	10.*
Conclusion: No está listo. Esperando a que se deje de utilizar Firefox 3.5, Safari 4.0, Chrome 1.*, Opera 10.0.

Nota: Propuesta por Microsoft, está siendo considerada por la W3C.

Leyenda

Soportado

No soportado

Parcialmente soportado

Soporte desconocido

Artículo Original: Mini-aplicación online resumen de futuras propiedades y fecha de implantación por navegadores
Vía: W3C LinkedIn Group

A la hora del desarrollo web muchas veces tenemos que hacer referencia a textos o palabras ya dichas por alguien. Algo que suele ser bastante normal el portales con noticias de actualidad, entrevistas o -sin irnos más lejos- en nuestros blogs.

La mayoria de las veces, seguramente por desconocimiento, se tiende a encerrar el texto de la cita en un párrafo y separarlo con estilos del resto del contenido. Sin embargo, HTML nos ofrece tres etiquetas con las que podemos dar un significado más correcto y semántico a nuestras citas.

Tipos de etiquetas

Etiqueta <cite>

• Muestra el texto en cursiva
• No hace saltos de línea ni anterior ni posterior
• El contenido de la cita permanece en la misma línea que el texto anterior y posterior.

Etiqueta <q>

• No hace saltos de línea ni anterior ni posterior
• El contenido de la cita permanece en la misma línea que el texto anterior y posterior.
• Encierra el contenido entre comillas dobles

Etiqueta <blockquote>

• Hace saltos de línea tanto anterior como posterior
• Establece un padding y un margin al contenido de la cita

Uso de las etiquetas

De acuerdo, tenemos tres formas de citar contenido en nuestro HTML, pero ¿cuándo hacemos uso de cada una de ellas?.

Es muy sencillo. Si la cita en cuestión no es demasiado larga -alrededor de una línea- lo que es más semántico es utilizar el tag <q> dejando el tag <blockquote> para cuando se trate de un bloque de texto. Y en el caso de <cite> la utilizaremos cuando estemos haciendo referencia a otras fuentes.

Ejemplo de la etiqueta <q>

Como dice el refrán:<q>Quien a buen árbol se arrima, buena sombra le cobija</q>

Ejemplo de la etiqueta <blockquote>

Miguel de Cervantes escribió en El Quijote:
<blockquote>


    En un lugar de la Mancha,
    de cuyo nombre no quiero acordarme,
    no ha mucho tiempo que vivía un hidalgo
    de los de lanza en astillero, adarga antigua,
    rocín flaco y galgo corredor.
  


    Una olla de algo más vaca que carnero,
    salpicón las más noches,
    duelos y quebrantos los sábados,
    lantejas los viernes,
    algún palomino de añadidura los domingos,
    consumían las tres partes de su hacienda.
  

</blockquote>

Ejemplo de la etiqueta <cite>

Como dijo <cite>Jack, El Destripador</cite>: <q>Vayamos por partes</q>

Atributos de las etiquetas

A parte de los atributos ya conocidos que puedan llevar como id, class, title recalcaría los dos siguientes que son opcionales y aplicarían 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. Ej: ‘en’, ‘es’, ‘de’,…

Uso de los atributos cite y lang

<blockquote lang="en" cite="http://www.mycom.com/tolkien/twotowers.html">
  <p>They went in single file, running like hounds on a strong scent,
  and an eager light was in their eyes. Nearly due west the broad
  swath of the marching Orcs tramped its ugly slot; the sweet grass
  of Rohan had been bruised and blackened as they passed.</p>
</blockquote>

jQuery cumple 3 años y para celebrarlo se ha lanzado una nueva versión del framework que trae algunas características interesantes:

• Sizzle: Un nuevo motor de selección CSS.
• Eventos en vivo.
• Revisión de los eventos: Se han readaptado completamente para facilitar el manejo de los mismos.
• Reescritura de inyección de HTML: Añade HTML rápido como un rayo
• Reescritura del método .offset(): Cálculo de la posición mucho más rápido.
• Fuera Browser Sniffing

En los próximos artículos intentaremos echar un vistazo a estas nuevas características y a las mejoras con respecto a las versiones anteriores.

En Tanta Comunicacion hemos lanzado el primer número de nuestra newsletter: MORe.

En ella, a modo de resumen, trataremos de destacar aquello que creemos que es lo más interesante que se mueve en torno a la web.

En este primer número me gustaría destacar, particularmente:

• Normas para un buen posicionamiento
• Cómo aprovechar los profesionales de márketing online el cómo somos las personas.
• Tanta, finalista de los premios TAW con el proyecto de Acciona

Esto es solo una pequeña muestra. Si os interesa os podéis subscribir directamente en el blog.

Hoy me he dado cuenta de algo que se me escapaba, el nombre de variable que contiene los mensajes errores personalizados debe ser exactamente igual que el método que extendemos.

Me explico:

Por cuestiones de proyecto, los select cuando no tienen un valor seleccionable correcto, tienen como atributo value “-1“. Esto hacía que a pesar que incluyésemos la clase ‘required’ en el elemento, como el objeto validator comprueba si el valor es distinto de blanco para situarlo como correcto, no nos validaba correctamente.

Ante esto la solución era extender la clase validator creando un nuevo método al que llamamos requiredselect y aplicárselo a los select.

jQuery.validator.addMethod("requiredselect",function(value,element){
 var chk=false;
 if(value!="-1"){chk=true};
 return this.optional(element) || chk;
},jQuery.validator.messages.required);

Como véis, queremos que nuestro mensaje de error sea el de ‘required’. El problema viene cuando hemos definido -bien dentro del archivo de nuestro formulario, bien en un js aparte- esta variable required con un mensaje del tipo ‘Este campo es obligatorio’. El objeto validator no nos toma este mensaje personalizado, sino que establece el que tenga definido por defecto (inglés).

Viendo además que si cambiabas la variable de error, utilizando la de otra validación extendida, nos devolvía un error que no había un mensaje definido caí en la cuenta entonces que la variable de mensaje debía ser exactamente igual que el nombre del método.

jQuery.validator.addMethod("requiredselect",function(value,element){
 var chk=false;
 if(value!="-1"){chk=true};
 return this.optional(element) || chk;
},jQuery.validator.messages.requiredselect);

Y nuestro mensaje personalizado:

jQuery.extend(jQuery.validator.messages, {
 required: "Este campo es obligatorio.",
 requiredselect:"Este campo es obligatorio.",
 ...
});