Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Facelets
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

Material design aplicado a la web

Download to read offline

Ponencia en el Lima Dev Fest 2015 sobre Material Design aplicado a la web usando distintos stacks front-end.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Material design aplicado a la web

  1. 1. Material Design Aplicado a la web
  2. 2. Dime en qué desarrollas y te diré que usar...
  3. 3. Ya sabes hago mi markup con HTML5 pero cuando puedo uso Jade o Haml para evitar la fatiga. Mis estilos siguen los estándares del CSS3 pero cuando me siento productivo uso el rico Sass ó Less. Oie zih! Para mis scripts hago maravillas con solo jQuery pero para perder peso a veces me rindo ante Zepto, aunque hay días que me despierto iluminado y le doy puro Vanilla. ¿Que alternativas tengo? Pues más que todo hago websites...
  4. 4. Materialize por un lado, a casi 1 año de de su primer release allá por noviembre del 2014, con +13k de ⭐ en Github, trae todos los conceptos de Material Design usando sólo CSS/Sass y algo Javascript. Tiene una comunidad bastante activa y su uso es bastante simple, así que si de casualidad eres un dev backend y te estás aventurando al frontend y por el momento cuentas con las nociones básicas de frontend podrías usarlo sin problemas ;) En ese caso te podría interesar...
  5. 5. ¡Pero no es “by Google”! ¡Queremos algo oficial!
  6. 6. También existe Material Design Lite. Lanzada por el propio equipo de Google hace poco menos de un año (junio 2015) incorpora todo la especificación de Material Design usando sólo CSS y Vanilla Javascript, en otras palabras no depende de ningún framework o biblioteca. Así que si vives obsesionado con el peso, odias que cada biblioteca o framework que uses dependa del amado/odiado jQuery y no confías en nadie más que en San Google, ¡MDL es lo que buscas! Ok estás de suerte...
  7. 7. Creo firmemente que la web es la plataforma del mañana, que digo del mañana, ¡de hoy!, y pues jQuery me queda corto cuando busco más interactividad y sobre todo cuando tengo que escalar y dar mantenimiento, incluso luego de estructurar asi bien cool mis archivos y usar todos los patrones que sé. Así que cuando me toca desarrollar un web app me decido por un framework o librería que me de buena base, y sería bien cool que hayan componentes listos para usar que incorporen Material Design. Oye pero también desarrollo web apps!
  8. 8. Material ya es tendencia así que dependiendo de la tech que uses es probable ya se haya implementado algo que incorpore la especificación. En el caso seas hincha acérrimo del escudo con la “A” y cuando alguien te muestra algo cool en la web, tú dices “esto lo hago yo en 2 patadas usando Angular con ui-router, restangular y un par de controllers”. ¡Buenas noticias! Angular Material implementa Material Design en una serie de componentes reusables mantenidos internamente equipos de Google. Ah pues hubieras empezado por ahí <md-button> Flat Button </md-button> <md-button class="md-raised"> Raised Button </md- button> <md-button md-no-ink class="md-raised"> Raised Button (noink) </md-button> <md-button ng-disabled="true"> Disabled Button </md- button> <md-button> <md-icon md-svg-src="your/icon.svg"></md-icon> Register Now </md-button> <md-button class="md-fab" aria-label="FAB"> <md-icon md-svg-src="your/icon.svg"></md-icon> </md-button>
  9. 9. Te enamoraste de los web components y has seguido a Polymer desde antes que esté listo para producción, entonces lo más probable es que ya estés al tanto de la colección de Paper elements para Polymer. Esta colección la puedes usar junto con la colección de core elements de Polymer. Suculento. ¿Los componentes web son lo tuyo? <paper-button>Flat button</paper-button> <paper-button raised>Raised button</paper-button> <paper-button noink>No ripple effect</paper-button> <paper-button> <core-icon icon="favorite"></core-icon> Custom button content </paper-button> <paper-fab src="star.png"></paper-fab>
  10. 10. ¡Y para los que usamos otros frameworks o librerías! ¡Que no todo es Google hombre!
  11. 11. Puede que seas de los que le agarró un cariño cariño especial a la ardilla miope y te gusten los bigotes hipster de handlebars. Descuida amigx dev apasionado por Ember ¡hay una opción para ti! Ember Paper es una librería para Ember (obvio) que encapsula toda la especificación de Material Design en componentes ember. ¿Ahora si nos entendemos? Descuida hay para todos los gustos... {{#paper-button}}Flat Button{{/paper-button}} {{#paper-button raised=true}}Raised Button{{/paper-button}} {{#paper-button noink=true raised=true}}Raised Button (noink) {{/paper-button}} {{#paper-button disabled=true}}Disabled Button{{/paper-button}} {{#paper-button icon-button=true}}{{paper-icon icon="more-vert"}} {{/paper-button}}
  12. 12. ¿Eres de los que buscan velocidad, odian el two way data binding y el virtual DOM les parece lo más cool no inventado por Google? Ok chicx React, no te preocupes que Material Design está disponible para tí encapsulado en React components gracias a Material-UI, eso sí, sería bueno que además tengas base usando browserify o webpack dado que sólo está disponible vía npm. Si no sabes de lo que hablo, no seas tan pulpín y ponte a googlear, que no todo en la vida es bower. Facebook te gusta más que Google. Ok, no hay roche. <FlatButton label="Flat Button" /> <RaisedButton label="Raised Button" /> <FlatButton disabled={true} label="Disabled Button" /> <RaisedButton label="Github"> <FontIcon className="muidocs-icon-custom-github"/> </RaisedButton> <FloatingActionButton> <FontIcon className="muidocs-icon-action-grade" /> </FloatingActionButton>
  13. 13. No digas más.
  14. 14. Materializa la web como ven hay muchas alternativas
  15. 15. “The challenge when choosing a JS framework is to jump on the right train at the right moment” - CommitStrip.com
  16. 16. Material Design no nació sólo como una guía de diseño para Android, lo puedes usar hoy en la web.
  17. 17. Gracias Eysenck Gómez @eyscode eyscode@gmail.com eysenck@kodevian.com www.kodevian.com
  • YordanoMoralesJimene

    Sep. 18, 2017
  • exonhv

    May. 25, 2017
  • adjmedina1

    Feb. 19, 2017

Ponencia en el Lima Dev Fest 2015 sobre Material Design aplicado a la web usando distintos stacks front-end.

Views

Total views

773

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

28

Shares

0

Comments

0

Likes

3

×