Mixture, la herramienta que nos permite preprocesar estilos CSS, optimizar imágenes, obtener live previews y mucho mas!

Share on Pinterest
Comparte con tus amigos










Enviar

En esta ocasión os traigo un programa gratuito realmente interesante llamado Mixture, pensado para diseñadores y programadores.

Logo Mixture 

¿Qué es Mixture?

Es un entorno de desarrollo Front-End para Windows y Mac, cuyo objetivo es agilizar los procesos de configuración de nuestro sitio y así centrarnos en la construcción del mismo. Entre otras muchas cosas, nos permite generar de forma rápida prototipos, sitios estáticos, testeo, procesamiento de archivos css y js.

A continuación muestro la funcionalidad principal de Mixture.

Funcionalidad

-Plantillas reutilizables: Parecido a initializr, nos permite construir nuestro proyecto de una forma más rápida creándonos la estructura y archivos por defecto (dependerá del tipo de proyecto). Mixture nos ofrece distintas alternativas como Bootstrap, Foundation y Sassaprilla. Incluso nos permite añadir nuestras propias plantillas.

Boilerplates en Mixture

-Preprocesado: Automáticamente identifica los archivos css y js, los procesa y los hace más livianos (quitando saltos de línea, comentarios, etc), de forma que la carga del sitio web sea lo más rápida posible. También es capaz de optimizar las imágenes.

-Lenguaje: Utiliza un lenguaje llamado Liquid, que básicamente es HTML más otras etiquetas, se caracteriza por su simplicidad y potencial. Soporta Layouts, Inludes y mucho más. Aunque también es compatible con HTML y HAML.

-Herramientas: En la siguiente imagen se pueden ver las distintas herramientas que nos ofrece. Nos permite convertir nuestro proyecto en un HTML estático, publicarlo en Amazon s3, en GitHub o subirlo a través de FTP a nuestro hosting.

Mixture, la herramienta que todo diseñador web debe tener

Testeo en vivo: Característica muy útil, que nos ofrece la posibilidad de probar nuestra web localmente, hasta aquí nada nuevo, lo realmente interesante es que podemos conectar, a través de la dirección ip que nos indica el programa, cualquier dispositivo de nuestra red, Tablet , portátil, smartphone, de modo que si hacemos alguna acción en un dispositivo se actualizará en los demás, por ejemplo si en el portátil accedemos a la página de login, el resto de dispositivos conectados también lo hará.

En este vídeo podéis ver una demostración.

Otro aspecto bastante interesante es que los cambios en el código fuente, se reflejan automáticamente sin necesidad de refrescar la página.

Dispositivos moviles en Mixture

Modo Simple: Con mixture no sólo podemos trabajar con proyectos propios o creados con el programa, sino que podemos agregar nuestros propios proyectos, y así beneficiarnos de todo el potencial que nos ofrece. Destacar que Mixture puede trabajar con otros servidores como Wamp, por tanto nos podemos beneficiar de las características de Mixture y además de las propias de nuestro entorno de trabajo. Por ejemplo si tenemos un proyecto de wordpress podemos integrarlo en Mixture y beneficiarnos del testeo multi-dispositivo y del preprocesado.

Al añadir un proyecto propio nos aparece la siguiente ventana:

Creación de un proyecto en mixture

Primero  indicamos la ruta donde se encuentran los archivos css y js que queremos procesar. Seguidamente la rutas de salida de estos archivos y por último la dirección ip o nombre de dominio con el que accedemos a nuestra web. Por ejemplo si tenemos Wamp instalado, y nuestro proyecto se llama “my_project” debemos introducir “localhost/my_project”, o incluso podemos escribir el nombre de dominio de acceso, en el caso de que hayamos configurado un virtualhost.

Hasta aquí esta breve introducción de esta útil y práctica herramienta. Agradecer a Carlos Arturo, ya que fue él, el que me la recomendó.

Tutorial de Mixture:

Share on Pinterest
Comparte con tus amigos










Enviar

Enrique de la Torre

Twitter Google + Linkedin Acerca de

  • Jhoedram

    Gracias Enrique, esta buenísimo :D

  • Jhoedram

    ¿Como hago que Mixtiure minifique mis estilos.css a estilos.min.css?

    Espero puedan responderme, gracias.

    • Automáticamente los minifica, aunque primero tienes que haber establecido las rutas de tus archivos.
      Te recomiendo que veas el video, en el explicamos como se hace.

      • Carlos F Salas

        buen día carlos! a mi me sale el view locally deshabilitado, a que se debe esto??

  • Kevin Carrazco

    Muy bueno ! , sirve para ubuntu ?

  • esisamxa

    Me podrian decir como lo descargo?????? gracias de antemano

  • Hernan Lazaro

    muchas gracias por la información no he visto otra pagina así de información para desarrollo web. Muy útil de mucha ayuda.

  • Miguel

    Se podrían poner varios archivos less y que los procesara en un único archivo css?? A mi automáticamente por cada less me genera su css correspondiente. Saludos

  • Hola, quería preguntar como configuro el remote debug port 8081 para poder sincronizar con el celular también, gracias!

  • Snoopy diaz

    Justo era lo que necesitaba para minimizar mis ficheros .css y .js en etapa de producción para alcanzar una mayor optimización.

    Gracias Carlos Arturo y Enrríque. Saludos desde Rep. Dominicana.

  • Villar Ruben

    hola de donde puedo descargar el programa me interesa

  • Pablo Madeo

    Hola!
    La opción View Locally me aparece deshabilitada.
    Hay que configrar algo para que funcione??
    Gracias!

    • Max Saavedra

      me pasa lo mismo :/

  • Julio Rodriguez

    No me funciona Mixture a pesar de que les di las rutas. No me crea los archivos css .I los min.css. El mensaje que me da es “Error watching proyect directoy” mixture is unable to track file changes you ae running… no se si es que tengo que estar online para trabajar con mixture. En estos momentos estoy offline sin WiFi en estos momentos. GRACIAS si pueden ayudarme! !!

  • Tino

    Hola compañeros,

    algun link de descarga para mac y pc, la pagina oficial ya esta cerrada, gracias

  • Wilmer

    alguien tiene el instalador para que lo suba y pase el link, la pagina oficial quito todo soporte …esta muerta

  • Solo Softwares

    lastima que ya no alla soporte y no se pueda descargar por favor si hay alguien que lo comparta para windows se le agradece

    • Tino

      Hola compañeros, os recomiendo a todos que mireis el programa PREPROS, hace lo mismo que MIXTURE y tambien tiene soporte. Yo he cambiado todos los proyectos que tenia con MIXTURE a PREPROS simplemente arrastrandolos dentro del programa y el funcionamiento es similar.

  • Tino

    perdon, me equivoque al publicarlo, ahora lo publico en su sitio.

    Hola compañeros, os recomiendo a todos que mireis el programa PREPROS,
    hace lo mismo que MIXTURE y tambien tiene soporte. Yo he cambiado todos
    los proyectos que tenia con MIXTURE a PREPROS simplemente arrastrandolos
    dentro del programa y el funcionamiento es similar.

  • Hola amigos, ya no esta disponible la descarga, esta muerta la pagina, alguien sabe de donde se puede descargar la versión para windows?????

  • Camilo Andres Bogota Castro

    Yo estoy en interesado en utilizar la herramienta mixture porque ya no tengo que utilizar la consola de comandos y cuando lo voy a descargar me sale. De casualidad usted tiene el instalador de mixture me lo puede enviar a mi correo cbogotac@gmail.com por favor.

  • David E. Reva Medellín

    Estimado Carlos, ya no esta disponible Mixture. Gracias por la info.

  • blanco

    ahi se encuentra link de descarga Mixture_2530 para win/mac, por si lo buscan https://github.com/teammixture/mixture.io/issues/6
    link directo
    Mac: https://s3.amazonaws.com/mixture-mixed-app/mac/Mixture.zip
    Windows: https://s3.amazonaws.com/mixture-mixed-app/windows/Mixture.zip

    ahora revisando veo, podria haber problemas por las actualizacion que se hacían de sass, stylus, less, CoffeeScrip, etc, porque ya no hay soporte.
    http://docs.mixture.io/windows/changelog/

  • Lenin Morales Rivera

    A mi no me interesa mucho el soporte, porque si puedo realizar los cambios y desarrollar mi web, no veo la necesidad de los desarrolladores de este soft para usarlo correctamente


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso