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.

Transcript

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