• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Estándares Web con Chico UI
 

Estándares Web con Chico UI

on

  • 2,299 views

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 ...

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.

Statistics

Views

Total Views
2,299
Views on SlideShare
2,258
Embed Views
41

Actions

Likes
2
Downloads
9
Comments
0

6 Embeds 41

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Estándares Web con Chico UI Estándares Web con Chico UI Presentation Transcript

    • Estándares web con Chico UIGet things done, quickly
    • Quién les hablaGuille PazFrontend developer@pazguilleMercadoLibre - 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
    • ObjetivosAgilizarNormalizar y unificarLograr consistencia
    • HerramientaWidgets reutilizables y configurablesUsabilidad 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!
    • !==
    • <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 WebHTMLCSSJavaScript 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>
    • <a href=”http://reputacion”>Ver reputación</a>
    • JavaScript IntrusivoDificil 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 Source Github Fork Pull Request!https://github.com/mercadolibre/chico/
    • Demo
    • chico@mercadolibre.comchicoui@googlegroups.com@chicouihttp://chico-ui.com.ar
    • Gracias!MercadoLibreChico Teama ustedes!todos los que me conocen...