Personalmente no soy muy partidaria de usar hacks en las hojas de estilo para solucionar las deficiencias de uno u otro navegador, aún así comprendo que hay circunstancias en las que se hace necesario y siempre viene bien tener el conocimiento por si llegase ese momento.
Paul Irish nos ha ahorrado mucho trabajo haciendo una recopilación de hacks que podremos emplear para los diversos navegadores disponibles. Aquí os la dejo, con los comentarios traducidos:
/***** Hacks con selectores ******/
/* IE 6 y anteriores */
* html #uno { color: red }
/* IE 7 y anteriores */
*:first-child+html #dos { color: red }
/* IE 7 y navegadores modernos */
html>body #tres { color: red }
/* Navegadores modernos (IE 7 no) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 y anteriores */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** Hacks con Atributos ******/
/* ie6 y anteriores */
#once { _color:blue }
/* ie7 y anteriores */
#doce { *color: blue } /* or #color:blue */
/* 'Navegadores Modernos' incluye IE8, estés o no de acuerdo.. 
*/Paul además nos ha dejado una página de prueba con todos los hacks y un enlace a browsershots donde podréis comprobar como funcionan en los diversos navegadores.
Ya hay muchos plugins y scripts con y sin jQuery para crear sistemas de pestañas y sliders con javascript, no obstante este me ha llamado la atención por la sencillez de uso y los efectos que incluye.
tabSwitch es completamente personalizable con CSS y requiere muy poco código para empezar a funcionar, además el código es muy sencillo y está bastante bien explicado para que no te cueste nada adaptarlo a tus necesidades.
El HTML debería ser algo como esto:
<div id="tabSwDisplay">
<div class="SlideTab" id="Tab0">
...
</div>
<div class="SlideTab" id="Tab1">
...
</div>
<div class="SlideTab" id="Tab2">
...
</div>
<div class="SlideTab" id="Tab3">
...
</div>
<div class="SlideTab" id="Tab4">
...
</div>
</div>
Y el javascript:
//Con este código creamos la pestaña
$('.SlideTab').tabSwitch('create', {type: 'slide', height: 300, width: 440});
//Este código sirve para movernos adelante y atrás entre las pestañas
$('.SlideTab').tabSwitch('moveStep',{step: parseInt($(this).attr('rel'))});
//Este para movernos a una determinada pestaña en base al atributo rel
$('.SlideTab').tabSwitch('moveTo',{index : $(this).attr('rel') });Veo en Anieto2k un enlace a otro “metodo infalible” para erradicar el Internet Explorer 6 y no salgo de mi asombro.
IE 6 Update es un plugin desarrollado con jQuery que se basa en, ni más ni menos, hacerse pasar por uno de esos avisos propios del navegador y hacer creer al usuario que debe descargarse una actualización del navegador para poder visitar el sitio.
A pesar de que la idea de hacer desaparecer el IE6 de la faz de la tierra me parece buena, tratar de engañar a los usuarios para que se actualicen no me parece que sea el camino a seguir.
Básicamente, estamos timando al usuario. Eso no es un aviso de sistema, ni mucho menos, somos nosotros usando un aviso de sistema para que hagan lo que queremos. A nadie nos gusta que nos engañen ¿Verdad? A mi me recuerda sospechosamente a esos anuncios de antivirus fraudulentos que te lanzan lo que parece una ventana de diálogo del sistema operativo para que pulses sobre su banner sin darte cuenta de lo que es.
Si queremos notificar a nuestros usuarios para que se actualicen estoy segura que hay métodos mejores, desde incluir un par de líneas de texto redactadas con cortesía mediante un comentario condicional para usuarios de IE6 hasta poner un banner de esos de “Usa Firefox”. Lo que sea siempre que no interfiera en las actividades del usuario (como los scripts que bloquean a usuarios de IE6) ni le engañe para que haga cosas que no sabe si quiere hacer (como este caso). Prefiero la aproximación de educar y dejar escoger que la de obligar e imponer.
En mi caso, como ya os he dicho mil veces, este sitio en Internet Explorer 6 se ve, feo pero se ve, no le falta nada esencial pero no está optimizado. Ese es mi acercamiento a dejar de dar soporte a IE6, siempre que se pueda claro.
Para mí el fin no justifica los medios ¿y para vosotros?
Hala, una más para la lista de galerías de sitios. Esta vez es una galería de sitios que usan jQuery, por lo menos es original.
En Use jQuery la idea es recopilar sitios que usan esta librería javascript y mostrarnos cómo lo hacen. Para ello se incluyen las líneas de código correspondientes al trabajo con jQuery para que podamos ver como programan otros, aprender de ellos, de sus errores y aciertos.
El sitio viene acompañado de un blog con tutoriales y experimentos.
Use jQuery: http://usejquery.com/
Blog: http://thisblog.usejquery.com/
Vía Xyberneticos
Cuando vi la noticia sobre esta aplicación tuve que revisarla varias veces porque pensaba que era una broma del April’s Fools (ya sabéis, el dia de los inocentes anglosajón).
ie6fixer es una aplicación web que ojalá pronto sea innecesaria cuya finalidad es generar los correspondientes hacks para que tus hojas de estilo sean 100% compatibles con Internet Explorer 6.
Para trabajar con la aplicación simplemente copiaremos y pegaremos el código de nuestras hojas de estilo y escogeremos si queremos crear una hoja específica para ie6 que introduciremos mediante comentarios condicionales (opción recomendada) o si lo que preferimos es introducir hacks en nuestra hoja.
ie6fixer: http://www.onderhond.com/tools/ie6fixer/
Vía anieto2k
Vale, el título me ha quedado un poco críptico pero básicamente la idea es que, al igual que personalizamos nuestras páginas de error 404, podamos mostrar a nuestros usuarios un icono personalizado que sustituya a esa fea X roja que suele aparecer en el navegador cuando una imagen no se encuentra disponible.
David Walsh ha creado un sencillo script con Mootools que nos permitirá darle a nuestros sitios un toque más de refinamiento, incluso cuando se produzcan errores tan molestos como que se corrompa una imagen, desaparezca del disco duro donde se encuentra o, simplemente, hayamos metido la pata al llamarla.
Use Custom Missing Image Graphics Using MooTools
Demo: http://davidwalsh.name/dw-content/image-error-moo.php
Mantener las hojas de estilo ordenadas, que sigan una cierta lógica, es una de esas buenas costumbres que todos deberíamos cultivar.
No obstante, cuando heredamos código de otros desarrolladores o, incluso, cuando trabajamos con prisas o sin prestar suficiente atención, podemos encontrarnos con auténticos desastres.
Styleneat es una cómoda aplicación online que promete dejar tus hojas de estilo limpitas como una patena. Para ello sólo tendrás que cargar tus estilos de una de las tres formas disponibles (pegar directamente el código, subir el fichero css o importarlo desde una dirección web).
Una vez cargado el código podrás seleccionar unas cuantas opciones para formatearlo: organizar las propiedades alfabéticamente, organizar selectores alfabéticamente (con cuidado, según pone la propia web, así que supongo que podría salir mal), importar y organizar el código de hojas de estilo enlazadas (@import) y si queremos formatear nuestras reglas de estilo en una sola línea o en varias. Por último, existe una casilla etiquetada “safe organize” que supongo prevendrá a la aplicación realizar acciones que pudieran “romper” nuestras hojas de estilo.
Supongo que os resultará práctico para poder presumir de tener unas hojas de estilo perfectamente ordenadas y limpias.
Styleneat: http://www.styleneat.com/
Vía Wwwhat’s new?
En esto de la web, el tamaño importa y, por lo general, a más pequeño mejor.
TinyJS es un sitio web dedicado a recopilar scripts que, a pesar de tener un tamaño casi ridículo, son potentes y prácticos.
Los scripts se dividen en categorías por librería: jQuery, YUI y MooTools.
Tiny.js: http://tinyjs.com/
Vía Intenta
Tiene razón Carlos y parece que tengo algo en contra de Mootools. Ante todo decir que no, no tengo nada personal contra esta librería, me parece realmente buena y os animo a probarla. El único problema que tengo es que jQuery colma mis necesidades tan eficazmente que no me quedan ojos para otros.
Aún así, como sé que muchos preferis Mootools voy a enmendar mi error y voy a empezar a daros el protagonismo que merecéis, para empezar hoy os traigo una recopilación estupenda: Best Ever 65 mooTools Plugins and Demos, is it Better than jQuery?
Ahí tenéis de todo, sistemas de pestañas, slideshows, drop downs, autocompletado para formularios etc.
Sin duda, con todo este material, los que no hemos usado mucho la librería podremos probarla a fondo y, los que la usáis habitualmente para vuestros desarrollos tendréis unas cuantas herramientas a mano.
Somos muchos los que alguna vez nos hemos visto tentados a ofrecer nuestro sitio en varios idiomas, no obstante la falta de tiempo o conocimientos puede habernos frenado.
A pesar de que no soy muy amiga de las traducciones automáticas, lo cierto es que cada vez son más frecuentes y para algunos pueden ser un buen recurso (preferiblemente avisando a los lectores de que se trata de una traducción generada por un script para que no se escandalicen demasiado si aparecen verdaderas burradas).
Si te has decidido a usar uno de estos scripts seguro que te gusta Sunday Morning, un script realizado con jQuery que te permite incluir de forma elegante y sencilla las capacidades de Google Translate en tu web.
Sunday Morning te permite trabajar de diversas formas: incluyendo un menú con las opciones de idioma, traduciendo palabra por palabra, permitiendo que tus usuarios introduzcan texto para traducir o mediante un bookmarklet con el que acceder a versiones traducidas de cualquier sitio web.
Sin duda, la calidad de las traducciones depende mucho de Google Translate pero por lo menos la forma de presentarselas a nuestros usuarios mejorará mucho respecto a otras soluciones.
Sunday Morning: http://sundaymorning.jaysalvat.com/
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
