Estándares Web con Chico UI

Estándares web con Chico UIGet things done, quickly

Quién les hablaGuille PazFrontend developer@pazguilleMercadoLibre - UX team

Houston, tenemos un problema!

<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

ObjetivosAgilizarNormalizar y uniﬁcarLograr consistencia

HerramientaWidgets reutilizables y conﬁgurablesUsabilidad e interacciónEstándares webBuenas prácticas

Chico UI

Hacer las cosas bien!

Widgets / ComponentesHTML5CSS3JavaScript (jQuery / zepto)

$(selector).carousel(conf);

CSS Library

Chico Mesh

Inconsistentes!

... un tiempo después!

Estándares web

Hacen lo mismo!

Estándares WebHTMLCSSJavaScript APIsARIA / AccesibilidadMuchas más...

¿Por qué?Eﬁciencia del códigoFacilidad para mantenerloAccesibilidadSEOHacer una web mejor y útil

Marcado Semántico

Contenido

Precios

<hr />

<hr />

Carousel

“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

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 IntrusivoDiﬁcil de mantenerDiﬁcil hacer cambios en el HTMLNo se puede ser ágilProblemas de performance (render)

Render

JavaScript NO intrusivo!

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

Contenido + Presentacion +Comportamiento

Implementamos mejora progresivaPerformancePodemos reutilizar códigoFácil MantenerCompatibilidad entre dispositivosSomos ágiles!

Es una buena práctica!

Ejemplos

Carousel

Alguien puede pensar en la web!

HeadersBotonesListasMenúesIconosNotiﬁcaciones

Cuidemos la web!

Open Source Github Fork Pull Request!https://github.com/mercadolibre/chico/

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

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

http://localhost	26
http://www.linkedin.com	4
https://si0.twimg.com	2
http://beta.mural.ly	1
http://nodeslide.herokuapp.com	1
http://192.168.0.15	1

Estándares Web con Chico UI

by Guille Paz

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 35

Statistics

Estándares Web con Chico UI Presentation Transcript