Presentación realizada en el #webcat Barcelona de Enero del 2012 Autor: Juan Peist (@jimi75)

1. Graceful Degradation Wikipedia: Fault-tolerance or graceful degradation is the property that enables a system (often computer-based) to continue operating properly in the event of the failure of some of its components.

2. Ejemplos Vivos (casi)

3. Bien

4. Mal

5. Rules 1. Content First Please!!! (Siempre) 1. Content First Please!!! (Again!) 2. Diseño sólido y extensible (what?) El diseñador no tiene que trabajar más, tiene que trabajar bien 3. La mejor (no la más nueva) tecnología disponible 4. Nunca olvidar al usuario

6. Ejemplos

7. Ejemplos

8. La parte fácil: La técnica .object { background: url(img.png) left top #ccc; background : url(img.png) left top, url(img.png) left bottom rgba(0, 0, 0, .3) } Sin necesidad de checkear capacidades del browser (Modernizr, etc)

9. Problems & Tricks: Blanco sobre blanco con sombra... body { background: white; } .object { background: white; box-shadow: 1px 1px 0px rgba(0, 0, 0, .1); } //--> .object { border: 1px solid grey; border : 0 solid rgba(0, 0, 0, .1); box-shadow: 1px 1px 0px rgba(0, 0, 0, .1); background: white; }

10. La parte difícil

11. VENDERLO!!!

12. RAZóN I $

13. RAZóN II €

14. RAZóN III £

15. Beneficios 1. Menos trafico (kb) 2. Menos peticiones 3. Menos tiempo de desarrollo 4. Menos trabajo de mantenimiento 5. Más tiempo para otros desarrollos 6. Presentaciones más Top! 7. Sensación de “update” para old/new users Etc, etc

16. Presentación online www.john.cat/gd /gd.zip Mail: [email_address] Twitter: jimi75