Estándares Web con Chico UI

Estándares Web con Chico UI

MercadoLibre es una plataforma de e-commerce de gran escala con un alto tráfico. Todo los equipos de diseño y desarrollo deben estar atentos, ser rápidos y consistentes entre sí. A partir de este contexto, Chico UI fue creado, siguiendo los estándares web con el objetivos de satisfacer la necesidades de los equipos. Chico UI es open source y busca ayudar a las personas que desean trabajar con la plataforma.

F8a70e01eddbadc5e4f9876ff34494fa?s=128

Guille Paz

May 20, 2012
Tweet

Transcript

  1. None
  2. Estándares web con Chico UI Get things done, quickly

  3. Quién les habla Guille Paz Frontend developer @pazguille MercadoLibre -

    UX team
  4. None
  5. None
  6. None
  7. None
  8. None
  9. Houston, tenemos un problema!

  10. None
  11. None
  12. None
  13. <img src=”home_paises.gif” width=”646” height=”122” border=”0” usemap=”#paisesMap”/>

  14. <map name=”paisesMap”> <area shape=”rect” coords=”549, 63,600,95” href=”http://www.mercadolibre.com.ar”/> <area shape=”rect” coords=”266,

    62,296,95” href=”http://www.mercadolivre.com.br”/> <area shape=”rect” coords=”494, 64,537,95” href=”http://www.mercadolibre.com.co”/> <area shape=”rect” coords=”444, 63,418,95” href=”http://www.mercadolibre.cl”/> ... ... </map>
  15. <ul> <li class="argentina"> <a href="mercadolibre.com.ar">Argentina</a> </li> <li class="brasil"> <a href="mercadolivre.com.br">Brasil</a>

    </li> <li class="colombia"> <a href="mercadolibre.com.co">Colombia</a> </li> <li class="costarica"> <a href="mercadolibre.co.cr">Costa Rica</a> </li> <li class="chile"> <a href="mercadolibre.cl">Chile</a> </li> ... ... </ul>
  16. PSN / Xbox live/ Steam Data

  17. Objetivos Agilizar Normalizar y unificar Lograr consistencia

  18. Herramienta Widgets reutilizables y configurables Usabilidad e interacción Estándares web

    Buenas prácticas
  19. Chico UI

  20. Hacer las cosas bien!

  21. Widgets / Componentes HTML5 CSS3 JavaScript (jQuery / zepto)

  22. $(selector).carousel(conf);

  23. CSS Library

  24. Chico Mesh

  25. Inconsistentes!

  26. None
  27. None
  28. None
  29. !==

  30. !== <div class=”menu”> <a href=”/”>...</a> <div class=”sub”> <p>...</p> <div class=”buscador”>...</div>

    </div> </div> <div id=”contmenu” class=”under”> <div class=”menu”>...</div> <div class=”borra”></div> <div class=”float_izq”>...</div> <div class=”menu”>...</div> </div>
  31. ... un tiempo después!

  32. None
  33. None
  34. None
  35. Estándares web

  36. None
  37. Hacen lo mismo!

  38. Estándares Web HTML CSS JavaScript APIs ARIA / Accesibilidad Muchas

    más...
  39. ¿Por qué? Eficiencia del código Facilidad para mantenerlo Accesibilidad SEO

    Hacer una web mejor y útil
  40. None
  41. Marcado Semántico

  42. Contenido

  43. None
  44. None
  45. Precios

  46. None
  47. None
  48. None
  49. <span class="price">$ 449 <span class="decimal">99</span> </span>

  50. <span class="price">$ 449 <span class="decimal">99</span> </span>

  51. None
  52. None
  53. <span class="price">$ 449 <span class="decimal">99</span> </span>

  54. <span class="price">$ 449 <sup>99</sup> </span>

  55. <span class="price" itemprop="price">$ 449 <sup>99</sup> </span>

  56. <hr />

  57. None
  58. <div class="dashedgreyline"></div>

  59. None
  60. <hr />

  61. Carousel

  62. <table class=”tableBox”> <tr> <td>...</td> </tr> <tr> <td>...</td> </tr> <tr> <td>...</td>

    </tr> </table>
  63. <div class=”ch-carousel”> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </div>

  64. “No hay que usar más tablas...”

  65. “No hay que usar más tablas...” “...para armar diseños”

  66. Tablas + divitis

  67. None
  68. None
  69. None
  70. Si, todos reaccionamos asi!

  71. <table> <tbody> <tr> <th class="title">Total de operaciones</th> <td><span class="meter ">2679</span></td>

    </tr> <tr> <td class="title">Concretadas</td> <td><span class="meter ">94%</span></td> </tr> <tr> <td class="title">Canceladas</td> <td><span class="meter ">6%</span></td> </tr> <tr> <th class="title">Calificaciones positivas</th> <td><span class="meter last">99%</span></td> </tr> </tbody> </table>
  72. None
  73. JavaScript, no lastimes la semántica

  74. Zoom

  75. Zoom

  76. None
  77. <a href="javascript:showVisor()"> <img src="http://mini-imagen.jpg"> </a>

  78. None
  79. <a href="imagen.jpg"> <img src="http://mini-imagen.jpg"> </a>

  80. El <p> que se creía <a>

  81. <p id=”rep”>Ver reputación</p> <script> $(“#rep”).bind(“click”, function () { window.location =

    “http://reputacion”; }); </script>
  82. None
  83. <a href=”http://reputacion”>Ver reputación</a>

  84. JavaScript Intrusivo Dificil de mantener Dificil hacer cambios en el

    HTML No se puede ser ágil Problemas de performance (render)
  85. Render

  86. None
  87. JavaScript NO intrusivo!

  88. SEO

  89. Microdatos

  90. Eventos Organizaciones Personas Productos y otros...

  91. <section itemscope itemtype="http://schema.org/Product"> <h1 itemprop="name">Apple Iphone 4g</h1> <img itemprop="image" src="producto.jpg">

    </section>
  92. Accesibilidad

  93. WAI-ARIA

  94. roles, propiedades y estados contenido dinmámico (ajax, js) Estructura del

    documento parte de HTML5
  95. <div class=”ch-layer” role=”tooltip”>...</div>

  96. <div class=”ch-modal” role=”dialog”>...</div>

  97. <div id="example"> <ul role=”tablist”> <li> <a href="#tab1" role=”tab” aria-controls=”tab1”>Tab 1</a>

    </li> </ul> <div role=”presentation”> <div id="tab1" role=”tabpanel”>Tab 1</div> </div> </div>
  98. Contenido + Presentacion + Comportamiento

  99. None
  100. Implementamos mejora progresiva Performance Podemos reutilizar código Fácil Mantener Compatibilidad

    entre dispositivos Somos ágiles!
  101. Es una buena práctica!

  102. Ejemplos

  103. Carousel

  104. None
  105. None
  106. None
  107. Layer

  108. None
  109. None
  110. Alguien puede pensar en la web!

  111. None
  112. None
  113. None
  114. Headers Botones Listas Menúes Iconos Notificaciones

  115. None
  116. Cuidemos la web!

  117. Open Source Github Fork Pull Request! https://github.com/mercadolibre/chico/

  118. Demo

  119. chico@mercadolibre.com chicoui@googlegroups.com @chicoui http://chico-ui.com.ar

  120. MercadoLibre Chico Team a ustedes! todos los que me conocen...

    Gracias!