css3 calc y caniuse.com

"Yo he comido ratas en el desierto" bueno no, pero si que he aprendido CSS por las bravas, cometiendo muchos errores, porque cuando yo empecé apenas había web especializadas, y nadie de mi entorno tenía la menor idea.

Bueno, pues por aquel entonces eché mucho de menos un atributo CSS3 nuevo llamado "Calc" que lamentablemente sólo soporta el 37% de los navegadores.

¿Que es calc? pues puedes hacer cálculos simples en css ¿alguna vez queríais poner el ancho del 80% y que el margin, padding y border se quite de ahí? Yo muchas veces (normalmente le añadía uno o dos divs para tener estas cosas pero así es mejor).

Pues imagina esto


#cuerpo {
margin:0 10px;
padding:0 15px;
border-left:1px red solid;
border-right:1px red solid;

width:calc(80% -2*10px - 2*15px -2px)
-moz-width:calc(80% -2*10px - 2*15px -2px)
-webkit-width:calc(80% -2*10px - 2*15px -2px)
-o-width:calc(80% -2*10px - 2*15px -2px)

}

si, los prefijos son un rollo ¿puedo usar Calc? pues me he dado cuenta de que en realidad no.
Gracias a mi recién descubierta página web caniuse.com (puedousar.com en español) te mide quien soporta estas características.
http://caniuse.com/calc (32%)
http://caniuse.com/svg (imágenes svg) (73%)

Herramientas muy útiles ambas espero que os sirvan.

IE9.js y IE tester, la eterna condena

Anuncio de Microsoft diciendo que IE6 es como leche podrida
(Pulsa la imagen para ampliar)

IE6 es el probablemente el programa que más odio de todos los habidos y por haber. El IE6 no coge imágenes con transparencia como sus hermanos mayores, no usa selectores css 2.1 (superútiles para no tener que estar reescribiendo código continuamente), malinterpreta los standares web y es en general una pesadilla.

Para que os hagáis una idea yo maqueto páginas web, y el 65% del tiempo que uso maquetando se lo lleva internet explorer (si, también el IE7, y el 8, a ver si sacan el legendario 9). Si un día voy a vuestra casa y lo usáis os escupiré a la cara. Usad Chrome o Firefox y tengamos la fiesta en paz.

Mientras muchas las empresas medianas/pequeñas siguen diciendo que hay que ofrecer compatibilidad a esta mierda con 10 años de antigüedad, Google, Microsoft y Apple empiezan a cerrar sus puertas al viejo IE6 con carteles de "puede ser que veas bien la página, cambiar de navegador patán". Así sigue esta condena desarrollador/patán como cliente.

Para los desarrolladores aconsejo usar los comentarios condicionales (que sólo leera IE) y pongan esto para que puedan usar selectores css 3, 2.1 en IE y PNG transparentes (sin repetición y sin posicionamiento como fondo) en IE6.

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Seguramente necesiten esto también para hacer cosas específicas para IE6 (la hoja de estilo ie6.css la tendréis que hacer vosotros a vuestro gusto)

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

Y luego llega la hora de probar, el IE6 standalone ya no va en Windows 7, no puedes depender de los pantallazos de páginas online para ver los comportamientos, así que usad el "IE tester", un programa que te emula varios IE antiguos de forma decente (que no perfecta).

 

 

 

La epopeya del DNIe

El Dni electrónico (DNIe) nos permite, supuestamente, hacer ciertos trátmites online gracias al lector apropiado. Y digo "supuestamente" porque en la práctica "instalar/configurar el lector de tarjetas" que nos regaló el gobierno en su momento era misión imposible hasta para mí (4 horas sin resultado).

Ya sabéis como funciona el estado, si hay una curva en la carretera donde muere mucha gente con el coche lo "arregla" poniendo un cartel de "curva peligrosa", si sigue muriendo gente "prohibido circular a más de 40" y si aún así sigue muriendo gente "prohibido circular". Es más barato que la gente vaya a pie (y unas míseras señales) que arreglar la carretera.

De la misma forma han arreglado este problema, no han hecho un software que configure el lector automáticamente, eso sería ciencia ficción, pero si han hecho una página que te guia paso a paso en Windows (incluye el 7), Linux o Mac. También incluyen una guía para hacerlo en Firefox (gracias a Dios). Yo he comprobado mis puntos del carnet y alguna cosa de ayuntamiento, pero en la página de autónomos no ha habido manera, me sigue pidiendo IE6 y java de hace 4 años. Es una bofetada en la boca para que veas que sigues viviendo en el cu** de europa.

MultipleIEs: Hay que joderse!

Debido a un patán endogámico de la taberna que insiste en su torpeza y en no desprenderse de Internet Explorer 6 me veo obligado a escribir la forma de instalar, reinstalar y configurar diferentes IE en tu equipo. Con lo que yo lo odio.

No os engañéis el Firefox es, a día de hoy, el explorador de internet más usado (45.5%) y entiendo contemplar otros exploradores como IE6 (18.5%) e IE7(25.7%) pero vais de culo si créeis que me voy a instalar Chrome, Safari, Opera, etc... que juntos no llegan al 10%. Si uno llega al 15 que me envíe un mensaje.

Un desarrollador web no puede tener sólo un explorador de internet, debe tener los más usados para comprobar que su página funcionará (seguro que no) en el ordenador del cliente o visitante. Es una mierda de mucho calibre porque no puedes obligar a los patanes con IE6 a actualizarse. Por esos patanes que no saben que versión de IE tienen, por esos patanes que deducen cual es su mano izquierda por su reloj, son los que obligan a medio planeta a lidiar con el antiquísimo y paupérrimo IE6. En la mayoría de los casos se hacen sacrificios, hacks, chapuzas, 20 hojas de estilo distintas, programación y demás.

Bueno, bueno, dejaré el papel de plañidera desarrollador para otro momento. Lo primero 3 consejos para los diseñadores web que juegan a la ruleta rusa cuando no pueden más con el internet explorer:

1. Utilizad Comentarios Condicionales para meterle código o estilos css a vuestra página. Aquí tenéis un artículo explicativo de la magnífica web de diseñorama.


2. Usar el paso 1 para meterle la librería Dean de javascript para IE6 (patrocinado por google) y que se comporte más acorde con los estándares web. Ver este artículo de cómo se hace


3. Instalad el Web developer toolbar de microsoft. Os ahorrará tener que estar buscando que estilo ha roto que cosa.

La solución más fácil para tener todos los IE que quieras es instalar el MultipleIEs, un magnífico programa de tredosoft que te permite remontarte hasta el IE3 si es que estás interesado en diseñar una página y viajar atrás en el tiempo. Peros: Las versiones están en inglés y no dispones de Web Developer Toolbar.

La mejor solución: Si tienes XP SP2 (si tienes el sp3 es demasiado engorroso) desinstalas el IE7 (si lo actualizaste), instalas el Web developer toolbar en tu ie6, y te bajas el IE7 standalone también de tredosoft. ¿Porqué esto es mejor? pues porque el IE7 es malo pero cumple unos cuantos standares por lo que es mejor tener Web Developer Toolbar en el desastroso IE6.

IEnetrenderer: No vayas al ordenador del vecino

El 99% de los clientes de páginas web son unos grandísimos patánes. Es curioso que cuando uno va a comprar un coche elige el modelo, el color y los accesorios pero no le dice al fabricante cómo tiene que hacer el coche, pues eso no pasa en las páginas webs. El cliente patán le pide al diseñador que ponga lo que el llama logotipo (un círculo hecho con Word) como imagen corporativa y al programador que al pulsar un botón se ponga el primero en google y le de las direcciones de todos los clientes importantes que le harán millonario. En definidas cuentas, habría que santificar a la mayoría de desarrolladores.

Frases y respuestas habituales:

No se me ve nada - ¿Ha probado a conectar a internet?
La imagen de cabecera y el menú salen roto - ¿Tiene flash instalado? Cuando pueda ver un video de youtube podrá ver sus imágenes
Me va muy lento - Quite Emule

El mayor problema viene cuando el tipo corre windows 95 y firefox 2.0. Entonces ¿que haces? ¿te vas al ordenador del vecino que lo tiene la misma configuración? No hace falta, Estas páginas web puedes darle una dirección de internet y te da unas imágenes de como se vería en diferentes exploradores de internet.

1. IEnetrenderer: Bueno, casi sin esperas y además te hace la imagen de diferencia de, el problema es que sólo es para internet explorer no puedes ver en safari, ni firefox, ni opera, etc...


2. Browsershots: Completísimo, tiene casi todos los exploradores pero tienes esperar para tus imágenes (unos minutos, depende de la demanda). Existe una versión de pago (como en todo) que te quita las esperas.

Aquí tenéis como se vería en el próximamente Internet Explorer 8 nomaspatanes.com: