Frameworks que siguen Material Design

Iniciado por Sauron · 17 mar 2015 · 19 respuestas · 15.881 visitas

1. SSauron17 mar 2015
   Desde mediados de 2014 Google sacó una guía de diseño, Material Design que puedes ver
   http://www.google.com/design/spec/material-design/introduction.html
   
   Y hasta hace poco no había llegado a ella. Me la descubrió @"oriol" y veo interesante apostar por este tipo de diseño, queda algo muy profesional y buscando plantillas he dado con dos frameworks que siguen el Material Design que son:
   https://github.com/FezVrasta/bootstrap-material-design
   http://materializecss.com/
   
   Añado dos framework más:
   https://www.muicss.com/ - Gracias @"jalandro"
   http://material-ui.com/
   
   Esto es como cuando llegó Bootstrap que revolucionó el frontend, pero ahora encima con unas guías para hacer un frontend aún más profesional :)
   
   Ya hay varios themes en Wordpress que siguen Material Design :)
   
   También está este recursos que te da una paleta de colores que combian bien
   http://www.materialpalette.com/
   
   Como me hacía falta este tipo de recursos, que ayudan a usuarios flojos en frontend como es mi caso a poder hacer cosas decentes :)
2. Ffxgod18 mar 2015#2

   Sauron escribió:Desde mediados de 2014 Google sacó una guía de diseño, Material Design que puedes ver
   /design/spec/material-design/introduction.html
   
   Y hasta hace poco no había llegado a ella. Me la descubrió @"oriol" y veo interesante apostar por este tipo de diseño, queda algo muy profesional y buscando plantillas he dado con dos frameworks que siguen el Material Design que son:
   https://github.com/FezVrasta/bootstrap-material-design
   /
   
   Esto es como cuando llegó Bootstrap que revolucionó el frontend, pero ahora encima con unas guías para hacer un frontend aún más profesional :)
   
   Ya hay varios themes en Wordpress que siguen Material Design :)
   
   También está este recursos que te da una paleta de colores que combian bien
   /
   
   Como me hacía falta este tipo de recursos, que ayudan a usuarios flojos en frontend como es mi caso a poder hacer cosas decentes :)

   
   
   Buen aporte nico!
   
   Le iba a echar un ojo pero ya de primeras en ingles me ha fastidiado jejej. Hay que ponerse con el ingles pero ya!
   
   A mi me pasa un poco como a ti, que fallo en eso. Pero al final utilizar este tipo de frameworks te pone en desventaja con otras webs, porque se lian a meter lineas al codigo y ralentizan la pagina muchas veces. No se si sera este el caso, pero madre mia... :D
3. Iiamcholo18 mar 2015#3
   Woow no conocia Materialize. Me ha gustado.
   Encontré Muicss http://www.muicss.com/ y es super ligero, la única pega es que está en desarrollo por lo que puede romperse algo a futuro.
4. SSauron18 mar 2015#4
   @"fxgod" es cierto que un framework empezando por bootstrap te mete unos KB de más, pero a día de hoy cada vez eso es menos problema (vamos ya por fibra jeje, hasta llego a mi casa que está perdida en medio de la huerta murciana xD). Además casi todos te permiten cargarlo desde un CDN por lo que las cargasn suelen ir mucho más rapido :), el que ha compartido @"jalandro" no pesa nada!! xD poco más de 10KB entre CSS y JS, aunque claro para mi gusto se queda corto en efectos y demás, pero es un buen ejemplo de que un framework no tiene porque pesar más de 100-200KB
5. Ffxgod18 mar 2015#5

   Sauron escribió:@"fxgod" es cierto que un framework empezando por bootstrap te mete unos KB de más, pero a día de hoy cada vez eso es menos problema (vamos ya por fibra jeje, hasta llego a mi casa que está perdida en medio de la huerta murciana xD). Además casi todos te permiten cargarlo desde un CDN por lo que las cargasn suelen ir mucho más rapido :), el que ha compartido @"jalandro" no pesa nada!! xD poco más de 10KB entre CSS y JS, aunque claro para mi gusto se queda corto en efectos y demás, pero es un buen ejemplo de que un framework no tiene porque pesar más de 100-200KB

   
   
   @sauron y yo que vivo a 15 km de madrid telefonica no quiere ponerme la fibra y tengo el cajetin desde hace dos meses en el poste de telefono que hay a 3 metros de mi puerta jeje.
   
   La verdad es que mola un monton, sobre todo me han gustado los detalles de este: http://materializecss.com/ El problema que veo es lo que dice @"jalandro" que parecen todos en fase de desarrollo y eso como que no queda muy profesional si dentro de poco lo dejan de actualizar. ¿no?
   
   Si os soy sincero, nunca los he usado.
6. SSauron18 mar 2015#6
   @"fxgod" pues yo tengo la fibra desde hace 3 meses y estoy muy contento, eso si el técnico tardo como 2 tardes completas en poder ponerlo xDDD, fue una odisea y vivo entre campos de limoneros, que digo yo si me monto un ecommerce de limones xDDD, más a mano no los puedo tener!!
   
   Por cierto @"fxgod" http://materializecss.com está en en varios idiomas entre ellos el español ;)
7. Ffxgod23 mar 2015#7

   Sauron escribió:@"fxgod" pues yo tengo la fibra desde hace 3 meses y estoy muy contento, eso si el técnico tardo como 2 tardes completas en poder ponerlo xDDD, fue una odisea y vivo entre campos de limoneros, que digo yo si me monto un ecommerce de limones xDDD, más a mano no los puedo tener!!
   
   Por cierto @"fxgod" está en en varios idiomas entre ellos el español ;)

   
   
   Gracias nico. Hace tiempo estuve probando montar micronichos y meganichos con plantillas html. La verdad es a nivel seo es algo inigualable. Con una optimizacion al 99 de pagespeed me subieron los micronichos entr 8-10 posiciones de golpe del cambio de WP a HTML. Ahi es na.
   
   Voy a hacer un experimento con un nuevo nicho pequeño que tengo con el de materialice, la plantilla basica y retocando yo a base de html (que soy bastante justete, tengo que ponerme ya! jeje)
   
   El maximo impedimento que me encontre la otra vez fue tener que ir pagina por pagina en html para meter el codigo de adense. Vosotros que le dais bien a codigo, sabeis si hay alguna forma de dejar "escrito un codigo" para que cuando yo lo decida meter se cargue en todas las paginas sin ir una por una? :)
8. SSauron23 mar 2015#8
   @"fxgod" tengo una aplicación web, que cree hace unos meses para crear micronichos en HTML optimizados y la verdad me gustaría ofrecerlo, pero para eso tendría que ponerlo bonito!! y la falta de tiempo y un poco de pereza jeje. Lo bueno es que con este programa no necesitas PHP ni MySQL, sólo le pones los datos del FTP y genera toda la página estática y se sube, carga rapidísimo y ya viene preparado para que este todo en un CSS y un JS :), por ahora sólo le tengo hecho un theme, así que va super optimizado y el servidor web sólo tiene que servir los ficheros!!
9. Ffxgod23 mar 2015#9
   Te refieres a pasar de un wp local a html online? He probado algunos plugin y los resultados son bastante malos porque utilizan como bien dices las css y js de los theme. Al final el tiempo de carga es el mismo.
   Si tienes algo así pero super optimizado eres un crack nico jejeje.
   
   De tus palabras deduzco que lo que preguntaba sobre la publi no es posible. No? Jejeje
10. SSauron24 mar 2015#10
    @"fxgod" lo que tengo montado es un gestor de contenidos pero que cuando tienes todos los artículos del micronicho montado, le das a crear y te generar todos los ficheros, y te incrusta la publicidad en ellos, si cambias la publicidad y vuelves a generar cambia en todos. No es un plugin de Wordpress, es un aplicación diferente, si quieres un día quedamos por Skype y te la enseño ;), aunque ahora mismo está un poco fea en cuanto a usabilidad, me gustaría ponerla más bonita y que use un sistema de optimización de imágenes buena como por ejemplo usar el API de Kraken.io
11. Ffxgod24 mar 2015#11

    Sauron escribió:@"fxgod" lo que tengo montado es un gestor de contenidos pero que cuando tienes todos los artículos del micronicho montado, le das a crear y te generar todos los ficheros, y te incrusta la publicidad en ellos, si cambias la publicidad y vuelves a generar cambia en todos. No es un plugin de Wordpress, es un aplicación diferente, si quieres un día quedamos por Skype y te la enseño ;), aunque ahora mismo está un poco fea en cuanto a usabilidad, me gustaría ponerla más bonita y que use un sistema de optimización de imágenes buena como por ejemplo usar el API de Kraken.io

    
    
    ¡Claro nico! Si gustas me molaria verlo, incluso si hace falta probarlo o algo asi podria echarte una mano a sacar posibles fallos.
    
    Mi ayuda siempre esta a la disposición del foro :)
12. Iiamcholo24 mar 2015#12

    fxgod escribió:Voy a hacer un experimento con un nuevo nicho pequeño que tengo con el de materialice, la plantilla basica y retocando yo a base de html (que soy bastante justete, tengo que ponerme ya! jeje)
    
    El maximo impedimento que me encontre la otra vez fue tener que ir pagina por pagina en html para meter el codigo de adense. Vosotros que le dais bien a codigo, sabeis si hay alguna forma de dejar "escrito un codigo" para que cuando yo lo decida meter se cargue en todas las paginas sin ir una por una? :)

    
    
    Lo que tú necesitas es un generador de páginas estáticas. Tener desarrollado o adaptar una plantilla existente (o nueva) para el generador. Luego, crear lo que importa: el contenido. Y la herramienta te va ha generar todo.
    
    Te dejo está página directorio donde hay muchos sistemas filtrados por lenguaje de programación.
    https://www.staticgen.com/
    
    Te recomiendo Jekyll, Middleman y le des una mirada a Hexo.
    Asegúrate también de buscar plugins para los sitemaps y SEO. :idea:
13. Ffxgod25 mar 2015#13

    jalandro escribió:

    fxgod escribió:Voy a hacer un experimento con un nuevo nicho pequeño que tengo con el de materialice, la plantilla basica y retocando yo a base de html (que soy bastante justete, tengo que ponerme ya! jeje)
    
    El maximo impedimento que me encontre la otra vez fue tener que ir pagina por pagina en html para meter el codigo de adense. Vosotros que le dais bien a codigo, sabeis si hay alguna forma de dejar "escrito un codigo" para que cuando yo lo decida meter se cargue en todas las paginas sin ir una por una? :)

    
    
    Lo que tú necesitas es un generador de páginas estáticas. Tener desarrollado o adaptar una plantilla existente (o nueva) para el generador. Luego, crear lo que importa: el contenido. Y la herramienta te va ha generar todo.
    
    Te dejo está página directorio donde hay muchos sistemas filtrados por lenguaje de programación.
    https://www.staticgen.com/
    
    Te recomiendo Jekyll, Middleman y le des una mirada a Hexo.
    Asegúrate también de buscar plugins para los sitemaps y SEO. :idea:

    
    
    Waiba! No sabia yo estas cositas jeje. Muchas gracias compi.
    
    La verdad es yo creo que me va a ser complicado meterme con todo eso porque son lenguajes de los que no tengo ni idea. De hecho es salirme de html (muy basico) y me pierdo jeje
    
    
    
    Me he lanzado a montar mi propia plantilla a partir de la suya de muestra con materializecss para practicar un poco y demás. Resultado:
    
    
    
    Si esto no ayuda a posicionar que venga dios y lo vea :D
14. SSauron25 mar 2015#14
    @"fxgod" lo de JS quedaría algo así
    
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
        <script>
          $(document).ready(function(){
            $('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
          });
        </script>

15. Iiamcholo25 mar 2015#15
    Miralo desde el lado costo-beneficio.
    Si bien perderas, digamos 1 día, en aprender una o dos herramientas, a la larga es mejor ya que no tienes que editar fichero x fichero. No sé, esta forma de trabajo me recuerda los finales de los 90's. :)
16. Ffxgod26 mar 2015#16

    Sauron escribió:@"fxgod" lo de JS quedaría algo así
    
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
        <script>
          $(document).ready(function(){
            $('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
          });
        </script>

    
    
    Gracias Nico! Ya lo habia conseguido y habia editado el mensaje. Pero debiste ver el anterior. En cualquier caso agradezco tu ayuda :)
    
    

    jalandro escribió:Miralo desde el lado costo-beneficio.
    Si bien perderas, digamos 1 día, en aprender una o dos herramientas, a la larga es mejor ya que no tienes que editar fichero x fichero. No sé, esta forma de trabajo me recuerda los finales de los 90's. :)

    
    
    jajaja. De hecho no es que lo parezca, es que lo es :D. Pero claro estamos hablando de montar sitios muy pequeños. Por ejemplo, no voy a montar un blog personal a mano :D.
    
    La idea es que con el html puedo optimizar hasta un punto que WP con tanto JS y CSS no puedo hacer (o al menos yo no se). Dudo que haya paginas en wordpress con tiempo de carga de 400ms con wp :D
    
    Creo que tienes razon en que es posible que una pequeña inversion de tiempo se recuperara facilmente. Pero me da la sensacion de que por el idioma que esta la documentacion y los lenguajes de los que hablan me vaya a costar solo un dia jeje.
    Ademas entendi que no vale cualquier plantilla html ¿no? Tienes que crear una con la estructura que requiera. :)
17. SSilvia7726 mar 2015#17
    pero el "idioma" entiendo que se refiere a sobre que lenguaje corre, no que necesites saber programar en ese lenguaje (aunque siempre se le saca mas parttido si lo conoces, claro). Wordpress corre sobre php y te digo yo que el 90% de los usuarios de wordpress no tienenj ni p... idea de php. Vamos, ni lo mas basico que es su existencia!!!
18. Iiamcholo26 mar 2015#18

    fxgod escribió:La idea es que con el html puedo optimizar hasta un punto que WP con tanto JS y CSS no puedo hacer (o al menos yo no se). Dudo que haya paginas en wordpress con tiempo de carga de 400ms con wp :D
    
    Creo que tienes razon en que es posible que una pequeña inversion de tiempo se recuperara facilmente. Pero me da la sensacion de que por el idioma que esta la documentacion y los lenguajes de los que hablan me vaya a costar solo un dia jeje.
    Ademas entendi que no vale cualquier plantilla html ¿no? Tienes que crear una con la estructura que requiera. :)

    
    
    Sí. Es cierto que cada sistema tiene o implementa su propio lenguaje de plantilla.
    Pero si sabes HTML no veo problema que lo acoples a su estructura.
    
    Si para ti es un problema el idioma (inglés) pues no te hagas líos, y continua con los sitios pequeños optimizados. Ya tendrás tiempo para mirarlo con más calma.
    
    Yo por ejemplo, utilizo estos sistemas para generar páginas simples o landing page. Es más, hace poco monte este sitio y acá tienes su código fuente (utilizando Jekyll mira los directorios _includes y _layouts). Incluso hay locos que implementan sus blogs con este tipo de sistemas. De hecho, yo voy a crear uno dentro de poco. :P
    
    Saludos
19. Ffxgod26 mar 2015#19

    Silvia77 escribió:pero el "idioma" entiendo que se refiere a sobre que lenguaje corre, no que necesites saber programar en ese lenguaje (aunque siempre se le saca mas parttido si lo conoces, claro). Wordpress corre sobre php y te digo yo que el 90% de los usuarios de wordpress no tienenj ni p... idea de php. Vamos, ni lo mas basico que es su existencia!!!

    
    
    Jaja. Puedo dar fe de eso. Yo ahora llevo unos meses que me estoy poniendo serio con la programación. Llevo el CSS bastante avanzado, HTML (que no es programacion lo domino) y despues ira el PHP (Se lo basico). Pero me consta que hay muchisima gente que no tiene ni idea de PHP.
    
    Es el problema de los gestores de contenido. Que cualquiera con un tutorial los puede instalar. Ahora... cuando hay problemas ya no es tan facil la cosa :D
    
    Por cierto, ayer me pase por tu blog y puse un comentario. No me lo has aprobado.. ya no pongo mas! jejejejje :dodgy:
    
    

    jalandro escribió:

    fxgod escribió:La idea es que con el html puedo optimizar hasta un punto que WP con tanto JS y CSS no puedo hacer (o al menos yo no se). Dudo que haya paginas en wordpress con tiempo de carga de 400ms con wp :D
    
    Creo que tienes razon en que es posible que una pequeña inversion de tiempo se recuperara facilmente. Pero me da la sensacion de que por el idioma que esta la documentacion y los lenguajes de los que hablan me vaya a costar solo un dia jeje.
    Ademas entendi que no vale cualquier plantilla html ¿no? Tienes que crear una con la estructura que requiera. :)

    
    
    Sí. Es cierto que cada sistema tiene o implementa su propio lenguaje de plantilla.
    Pero si sabes HTML no veo problema que lo acoples a su estructura.
    
    Si para ti es un problema el idioma (inglés) pues no te hagas líos, y continua con los sitios pequeños optimizados. Ya tendrás tiempo para mirarlo con más calma.
    
    Yo por ejemplo, utilizo estos sistemas para generar páginas simples o landing page. Es más, hace poco monte este sitio y acá tienes su código fuente (utilizando Jekyll mira los directorios _includes y _layouts). Incluso hay locos que implementan sus blogs con este tipo de sistemas. De hecho, yo voy a crear uno dentro de poco. :P
    
    Saludos

    
    
    Bueno hoy en dia el ingles tampoco es un problema con el google chrome jaja. El html lo domino, eso no es problema. Por lo que vi por encima, pensaba que habia que planificar una plantilla propia desde cero, no que podian adaptarse existentes. Por eso dije que no se si compensaba estar aprendiendo desde cero.
    
    Ahora bien, si comentas que solo hay que adaptar una existente a su estructura, en ese caso posiblemente si que me compense :)
20. SSilvia7726 mar 2015#20

    fxgod escribió:Por cierto, ayer me pase por tu blog y puse un comentario. No me lo has aprobado.. ya no pongo mas! jejejejje :dodgy:

    
    
    aun no habia pasado por el blog y no lo habia visto :P
    
    volviendo a los gestores de contenido (asi no me advierto a mi misma por offtopic xD ), yo me he encontrado con que mas de uno y mas de 2 utilizan smarty para las plantillas. No es que me guste en absoluto (lo odio!) pero lo digo para que lo añadas a la lista de lenguajes (bueno, creo que si nos ponemos puristas es un pseudo lenguaje) a investigar xD porque si te quieres meter a modificar hacer una platilla por ejemplo para flatpress... pues te lo vas a encontrar de bruces. Tambien lo he visto en los cms de comercio online y en alguno mas por ahi que me he instalado para ver como eran (es que cuando me aburro me dedico a instalar porquerias a ver qué hacen xD )

Este hilo pertenece al archivo del foro y ya no admite respuestas.