Chico-UI en escuela DaVinci

2. Agenda Proyecto Instalación y uso Familias y componentes Diseño Citas Preguntas?

3. Natan Santolo [email_address] twitter.com/natos Sr Frontender

5. “ son un montón de ninjas chiquitos que te parten la cabeza”

7. Brief Herramienta para desarrollo de Frontend Desarrollado en HTML, CSS, JS y PHP Componentes reutilizables y configurables Código abierto

8. Proyecto

9. Objetivos Proveer una solución de Frontend para agilizar y unificar la producción Normalizar la identidad y la interacción de los componentes A largo plazo, lograr consistencia en los productos de MercadoLibre

11. Equipo Tres recursos fulltime Entregables todas las semanas Filosofía ágil Open sourced

13. Diseño

14. Máximas para tomar desiciones Simplicidad (sintaxis js) Re-utilización (snippets, css) Estandarización (json, {argumentos}) Automatización (tests, packer) Código funcionando (todos los viernes) Escalar después (validator)

15. Buenas prácticas JavaScript no obstrusivo Pruebas unitarias (casi TDD) Progressive Enhancement & Gracefull Degradation Optimización de sprites (con data URI) Minificación y compresión de recursos

16. Patrones y herramientas Namespaces (window.ui, ui.foo) Closures and Callbacks Instances Map (en el DOM) Parasitic Inheritance Power Constructor (by Douglas Crockford) Public Objects: Exponen métodos y propiedades Packer-o-matic

17. Packer-o-matic Unifica en un archivo cada tipo de recurso Componentes a demanda ?get= Minifica el código vs Modo debug Próximamente: Ofuscación de código

18. Estructura

19. jQuery Componentes Core JS Core CSS

20. jQuery Componentes Oye Chico! Core JS Core CSS

21. Core CSS Reset Layout general Sprite general Tipografías Próximamente: Sistema de grillas Skinning (ML, MP, MS, ...)

22. Core JS Inicia el SDK Crea componentes Obtiene recursos necesarios Provee herramientas internas (ui.utils) Sintaxis jQuery ;) Ej: $( query ).component( config );

23. Componentes Unidad funcional y visual mínima empaquetada Constan de 3 partes: Estructura: esqueleto de contenido (HTML) !Important Presentación: estilos visuales (CSS) Funcionalidad: comportamiento (JS) Son configurables ;)

24. Instalación y uso

25. Dependencias jQuery Browser sniffing (IE conditional classes on <html>) Script para PNGs transparentes

26. Instalación Incluir dependencias (jQuery, Browser sniffing, PNGfix) Incluir los recursos de Chico-UI (JS y CSS) HTML snippets Configurar componentes

27. <!doctype html>       <html lang="es" class="no-js">  <head> <meta charset="utf-8"> <title>Chico UI</title> <link rel="stylesheet" type="text/css" href=" chico.css "> <script src=" libs/js/j query-1.4.4.js "></scrip t> <script src="chico.js"></script> </head>

34. Paso a paso Incluir dependencias (jQuery, Browser sniffing, PNGfix) Incluir los recursos de Chico-UI (JS y CSS) HTML snippets Configurar componentes

35. $(“.rep”).layer({ content: { type: “param”, data: “<h2>Reputación</h2>” }, callbacks: { show: function(){ // El layer esta prendido } } });

36. $(“.rep”).layer({ content: { type: “param”, data: “<h2>Reputación</h2>” } , callbacks: { show: function(){ // El layer esta prendido } } });

37. $(“.rep”).layer({ content: { type: “param”, data: “<h2>Reputación</h2>” }, callbacks: { show: function(){ // El layer esta prendido } } });

38. var layer = $(“.rep”).layer({ content: { type: “param”, data: “<h2>Reputación</h2>” }, callbacks: { show: function(){ // El layer esta prendido } } });

39. var layer = $(“.rep”).layer({ content: { type: “param”, data: “<h2>Reputación</h2>” }, callbacks: { show: function(){ // El layer esta prendido } } }); { uid: 0, type: “ui.layer”, element: HTMLElement, show(), hide() } layer.show()

40. Familias

42. Familias Controllers Floats Navs Slider

43. Controllers Tab Navigator Validator

44. Floats Tooltip Helper Contextual Layer Modal Window

45. Modal config content type: param | DOM | ajax [ data ] : string [ callbacks ] [ show ] : function [ hide ] : function

46. Layer config [ event ] : “click” content type: param | DOM | ajax data: string [ callbacks ] [ show ] : function [ hide ] : function

47. Navs Dropdown Tab

48. Slider Carousel

49. Citas

50. “ es una luz en el fondo del tunel, en la busqueda de consistencia entre las UI`s de Meli” - Tato

51. “ agiliza muchísimo los tiempos de implementación, optimizando los tiempos de diseñadores y programadores, ahorrando tambien tiempo con definiciones que ya están resueltas en chico” - Diego

52. “ Con Chico Ui pude dedicarle más tiempo al diseño del los productos y no tener que preocuparme por el funcionamiento e interacción de componentes ya estandarizados y que sabemos que funcionan” - Fer

53. “ Chico UI es un proyecto opensource que agrupa los componentes que se utilizan dentro en ML.” - Guille

54. “ es una herramienta que simplifica el proceso de implementacion de una interfaz, agregando funcionalidad” - Lean

55. “ paquetito de codigo que me deja implementar componentes con solo un par de lineas en mi html” - Nati

56. “ unos hiper nionios haciendo algo copado para ml” - Jess

57. Gracias!!! Chico-UI Team : Guille, Lean y Naty! GMP Team ! User Experience Team ! Damian y Michel... A mi mamá y a mi papá, obvio...

Chico-UI en escuela DaVinci

Related slideshows

More Related Content

Chico-UI en escuela DaVinci