estándares web con chico ui
DESCRIPTION
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
Estándares web con Chico UIGet things done, quickly
Quién les habla
Guille Paz
Frontend developer
@pazguille
MercadoLibre - UX team
Houston, tenemos un problema!
<img src=”home_paises.gif” width=”646” height=”122” border=”0” usemap=”#paisesMap”/>
<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>
<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>
PSN / Xbox live/ Steam Data
Objetivos
AgilizarNormalizar y unificarLograr consistencia
HerramientaWidgets reutilizables y configurablesUsabilidad e interacciónEstándares webBuenas prácticas
Chico UI
Hacer las cosas bien!
Widgets / Componentes
HTML5CSS3JavaScript (jQuery / zepto)
$(selector).carousel(conf);
CSS Library
Chico Mesh
Inconsistentes!
!==
!==
<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>
... un tiempo después!
Estándares web
Hacen lo mismo!
Estándares Web
HTMLCSSJavaScript APIsARIA / AccesibilidadMuchas más...
¿Por qué?
Eficiencia del códigoFacilidad para mantenerloAccesibilidadSEOHacer una web mejor y útil
Marcado Semántico
Contenido
Precios
<span class="price">$ 449 <span class="decimal">99</span></span>
<span class="price">$ 449 <span class="decimal">99</span></span>
<span class="price">$ 449 <span class="decimal">99</span></span>
<span class="price">$ 449 <sup>99</sup></span>
<span class="price" itemprop="price">$ 449 <sup>99</sup></span>
<hr />
<div class="dashedgreyline"></div>
<hr />
Carousel
<table class=”tableBox”> <tr> <td>...</td> </tr> <tr> <td>...</td> </tr> <tr> <td>...</td> </tr></table>
<div class=”ch-carousel”> <ul> <li>...</li> <li>...</li> <li>...</li> </ul></div>
“No hay que usar más tablas...”
“No hay que usar más tablas...”
“...para armar diseños”
Tablas + divitis
Si, todos reaccionamos asi!
<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>
JavaScript, no lastimes la semántica
Zoom
Zoom
<a href="javascript:showVisor()"> <img src="http://mini-imagen.jpg"></a>
<a href="imagen.jpg"> <img src="http://mini-imagen.jpg"></a>
El <p> que se creía <a>
<p id=”rep”>Ver reputación</p><script> $(“#rep”).bind(“click”, function () { window.location = “http://reputacion”; });</script>
JavaScript Intrusivo
Dificil de mantenerDificil hacer cambios en el HTMLNo se puede ser ágilProblemas de performance (render)
Render
JavaScript NO intrusivo!
SEO
Microdatos
EventosOrganizacionesPersonasProductosy otros...
<section itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Apple Iphone 4g</h1>
<img itemprop="image" src="producto.jpg">
</section>
Accesibilidad
WAI-ARIA
roles, propiedades y estadoscontenido dinmámico (ajax, js)Estructura del documentoparte de HTML5
<div class=”ch-layer” role=”tooltip”>...</div>
<div class=”ch-modal” role=”dialog”>...</div>
<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>
Contenido +
Presentacion+
Comportamiento
Implementamos mejora progresivaPerformancePodemos reutilizar códigoFácil MantenerCompatibilidad entre dispositivosSomos ágiles!
Es una buena práctica!
Ejemplos
Carousel
Layer
Alguien puede pensar en la web!
HeadersBotonesListasMenúesIconosNotificaciones
Cuidemos la web!
Open SourceGithubForkPull Request!
https://github.com/mercadolibre/chico/
Demo
[email protected]@googlegroups.com@chicouihttp://chico-ui.com.ar
MercadoLibreChico Teama ustedes!todos los que me conocen...
Gracias!