Este documento resume una presentación sobre la implementación de estándares web y componentes reutilizables en MercadoLibre. La presentación destaca la necesidad de agilizar el desarrollo web mediante el uso de widgets configurables, estandarización, y buenas prácticas de desarrollo como marcado semántico y accesibilidad. Se introduce la librería Chico UI de MercadoLibre, la cual provee componentes reutilizables como carruseles y capas para lograr consistencia en la interfaz.

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

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

9. Houston, tenemos un
problema!

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!

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!

35. Estándares web

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

41. Marcado Semántico

42. Contenido

45. Precios

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

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

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

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

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

56. <hr />

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

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

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>

73. JavaScript, no lastimes la
semántica

74. Zoom

75. Zoom

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

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>

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

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

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

107. Layer

110. Alguien puede pensar
en la web!

114. Headers
Botones
Listas
Menúes
Iconos
Notificaciones

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. Gracias!
MercadoLibre
Chico Team
a ustedes!
todos los que me conocen...