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 ⁹⁹</span>

<span class="price" itemprop="price">$ 449 ⁹⁹</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>

<a href=”http://reputacion”>Ver reputación</a>

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

chico@mercadolibre.comchicoui@googlegroups.com@chicouihttp://chico-ui.com.ar

MercadoLibreChico Teama ustedes!todos los que me conocen...

Gracias!