Estándares Web con Chico UI

2,351
-1

Published on

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.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,351
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Estándares Web con Chico UI

  1. 1. Estándares web con Chico UIGet things done, quickly
  2. 2. Quién les hablaGuille PazFrontend developer@pazguilleMercadoLibre - UX team
  3. 3. Houston, tenemos un problema!
  4. 4. <img src=”home_paises.gif” width=”646” height=”122” border=”0” usemap=”#paisesMap”/>
  5. 5. <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>
  6. 6. <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>
  7. 7. PSN / Xbox live/ Steam Data
  8. 8. ObjetivosAgilizarNormalizar y unificarLograr consistencia
  9. 9. HerramientaWidgets reutilizables y configurablesUsabilidad e interacciónEstándares webBuenas prácticas
  10. 10. Chico UI
  11. 11. Hacer las cosas bien!
  12. 12. Widgets / ComponentesHTML5CSS3JavaScript (jQuery / zepto)
  13. 13. $(selector).carousel(conf);
  14. 14. CSS Library
  15. 15. Chico Mesh
  16. 16. Inconsistentes!
  17. 17. !==
  18. 18. <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>
  19. 19. ... un tiempo después!
  20. 20. Estándares web
  21. 21. Hacen lo mismo!
  22. 22. Estándares WebHTMLCSSJavaScript APIsARIA / AccesibilidadMuchas más...
  23. 23. ¿Por qué?Eficiencia del códigoFacilidad para mantenerloAccesibilidadSEOHacer una web mejor y útil
  24. 24. Marcado Semántico
  25. 25. Contenido
  26. 26. Precios
  27. 27. <span class="price">$ 449 <span class="decimal">99</span></span>
  28. 28. <span class="price">$ 449 <span class="decimal">99</span></span>
  29. 29. <span class="price">$ 449 <span class="decimal">99</span></span>
  30. 30. <span class="price">$ 449 <sup>99</sup></span>
  31. 31. <span class="price" itemprop="price">$ 449 <sup>99</sup></span>
  32. 32. <hr />
  33. 33. <div class="dashedgreyline"></div>
  34. 34. <hr />
  35. 35. Carousel
  36. 36. <table class=”tableBox”> <tr> <td>...</td> </tr> <tr> <td>...</td> </tr> <tr> <td>...</td> </tr></table>
  37. 37. <div class=”ch-carousel”> <ul> <li>...</li> <li>...</li> <li>...</li> </ul></div>
  38. 38. “No hay que usar más tablas...”
  39. 39. “No hay que usar más tablas...”“...para armar diseños”
  40. 40. Tablas + divitis
  41. 41. Si, todos reaccionamos asi!
  42. 42. <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>
  43. 43. JavaScript, no lastimes la semántica
  44. 44. Zoom
  45. 45. Zoom
  46. 46. <a href="javascript:showVisor()"> <img src="http://mini-imagen.jpg"></a>
  47. 47. <a href="imagen.jpg"> <img src="http://mini-imagen.jpg"></a>
  48. 48. El <p> que se creía <a>
  49. 49. <p id=”rep”>Ver reputación</p><script> $(“#rep”).bind(“click”, function () { window.location = “http://reputacion”; });</script>
  50. 50. <a href=”http://reputacion”>Ver reputación</a>
  51. 51. JavaScript IntrusivoDificil de mantenerDificil hacer cambios en el HTMLNo se puede ser ágilProblemas de performance (render)
  52. 52. Render
  53. 53. JavaScript NO intrusivo!
  54. 54. SEO
  55. 55. Microdatos
  56. 56. EventosOrganizacionesPersonasProductosy otros...
  57. 57. <section itemscope itemtype="http://schema.org/Product"> <h1 itemprop="name">Apple Iphone 4g</h1> <img itemprop="image" src="producto.jpg"></section>
  58. 58. Accesibilidad
  59. 59. WAI-ARIA
  60. 60. roles, propiedades y estadoscontenido dinmámico (ajax, js)Estructura del documentoparte de HTML5
  61. 61. <div class=”ch-layer” role=”tooltip”>...</div>
  62. 62. <div class=”ch-modal” role=”dialog”>...</div>
  63. 63. <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>
  64. 64. Contenido + Presentacion +Comportamiento
  65. 65. Implementamos mejora progresivaPerformancePodemos reutilizar códigoFácil MantenerCompatibilidad entre dispositivosSomos ágiles!
  66. 66. Es una buena práctica!
  67. 67. Ejemplos
  68. 68. Carousel
  69. 69. Layer
  70. 70. Alguien puede pensar en la web!
  71. 71. HeadersBotonesListasMenúesIconosNotificaciones
  72. 72. Cuidemos la web!
  73. 73. Open Source Github Fork Pull Request!https://github.com/mercadolibre/chico/
  74. 74. Demo
  75. 75. chico@mercadolibre.comchicoui@googlegroups.com@chicouihttp://chico-ui.com.ar
  76. 76. Gracias!MercadoLibreChico Teama ustedes!todos los que me conocen...

×