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

26 respuestas a “Mixture, la herramienta que todo diseñador web debe usar”

  1. Jhoedram dice:

    Gracias Enrique, esta buenísimo :D

  2. Jhoedram dice:

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

    Espero puedan responderme, gracias.

  3. Kevin Carrazco dice:

    Muy bueno ! , sirve para ubuntu ?

  4. esisamxa dice:

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

  5. Hernan Lazaro dice:

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

  6. Miguel dice:

    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

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

  8. Snoopy diaz dice:

    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.

  9. Villar Ruben dice:

    hola de donde puedo descargar el programa me interesa

  10. Pablo Madeo dice:

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

  11. Julio Rodriguez dice:

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

  12. Tino dice:

    Hola compañeros,

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

  13. Wilmer dice:

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

  14. Solo Softwares dice:

    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 dice:

      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.

  15. Tino dice:

    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.

  16. Andy Urbina dice:

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

  17. Camilo Andres Bogota Castro dice:

    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.

  18. David E. Reva Medellín dice:

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

  19. blanco dice:

    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/

  20. Lenin Morales Rivera dice:

    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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso