Flux es un editor de sitios web WYSIWYG para Mac. Ahora, antes de maldecir lo mucho que odias a los WYSIWYG, debes saber que Flux es diferente y al mismo tiempo es lo suficientemente poderoso y flexible para que lo utilicen los desarrolladores web profesionales.
Hoy te presentaré a Flux creando una página web súper simple desde cero (sin plantillas molestas). En el camino, veremos cómo se ve un flujo de trabajo típico y por qué podría ser el mejor editor de web visual que haya usado.
¿Por qué es diferente el flujo?
Cuando pienso en un editor de sitios web WYSIWYG, me vienen a la mente dos aplicaciones populares. El primero es Dreamweaver. Dreamweaver es una aplicación ridículamente poderosa, pero tiene una curva de aprendizaje bastante alta. Es simplemente una aplicación enorme que puede no valer la pena para muchos diseñadores que ya están cómodos en la codificación a mano.
La segunda aplicación que me viene a la mente es iWeb. iWeb es divertido por unas pocas horas, pero una vez que te das cuenta de lo estricto que es el sistema de plantillas, la idea de usarlo para el diseño web profesional desaparece. Incluso su rival mucho más superior, RapidWeaver, todavía parece empujar más hacia los diseños preestablecidos y parece estar orientado a los principiantes en desarrollo web.
Así que Dreamweaver es para profesionales, pero tiene una curva de aprendizaje empinada e iWeb es para laicos y tiene una curva de aprendizaje casi nula (y, en consecuencia, cero flexibilidad). ¿Dónde está el medio feliz? Entrar en flujo
Flux es una aplicación de diseño web visual para personas que odian las aplicaciones de diseño web visual. El flujo de trabajo se ha diseñado cuidadosamente para reflejar la forma en que codifica los sitios a mano. La mejor parte: es completamente flexible. Hay algunas plantillas incluidas, pero nunca las molesté realmente porque Flux facilita el diseño desde cero, como lo haría si escribiera el código manualmente.
Basta de hablar, veamos a Flux en acción.
Lo que estamos construyendo
Como quiero que sea una introducción muy básica, mantendremos el diseño super simple. Si recibo suficientes solicitudes en los comentarios, puedo escribir otro tutorial más avanzado y avanzado, pero por ahora nos quedaremos con un sitio básico de una página con muy poco.
Bastante simple verdad? Casi parece una de las plantillas cursis que vienen con este tipo de aplicaciones, pero como dije anteriormente, estaremos construyendo esto desde cero.
Paso 1: Crear un nuevo proyecto
Crear un nuevo proyecto en Flux es un procedimiento indoloro. Todo lo que hace es ir a Archivo> Nuevo y ya está en camino. Le preguntará dónde desea colocar los archivos y si desea que Flux cree automáticamente una estructura de sitio básica para usted. Esto incluye lo siguiente: index.html, main.css y una carpeta de imágenes. En este caso, ese es exactamente el formato que quiero usar, así que elegí dejar que me lo configurara. Si tiene un sistema diferente que le guste más, puede hacerlo manualmente.
Cuando haga doble clic en el archivo HTML, accederá a la interfaz principal de Flux. Como puedes ver, hay mucho que hacer aquí. De hecho, podríamos pasar todo el tutorial simplemente discutiendo cada botón y función. Sin embargo, para hacer las cosas menos aburridas, iremos directamente al edificio e introduciremos las características a medida que aparezcan. Definitivamente recomiendo que descargues la demo y hurgues en la interfaz para familiarizarte con ella.
Paso 1: peinar el cuerpo
Si hace clic en el área del lienzo vacío grande, debería ver un cuadro que se resalta con la palabra? Cuerpo? en la parte superior izquierda. Esta es la estructura del cuerpo vacío de su HTML. Lo primero que querremos hacer para nuestro sitio es agregar un fondo a este elemento.
Para hacer esto, haga clic en el botón Inspector en la parte superior (parece un par de binoculares). Esto mostrará lo que en mi opinión, el corazón de la aplicación. Aquí creará estilos y definirá la apariencia de cada elemento que cree dentro de Flux. La salida del Inspector es CSS y todos los controles internos están etiquetados con las propiedades CSS con las que está acostumbrado a trabajar.
Añadiendo un color de fondo
Si estuviéramos codificando este sitio a mano, el primer paso podría ser designar un color de fondo para el cuerpo. En realidad, usaremos una imagen de repetición en el siguiente paso, pero queremos asegurarnos de que el fondo se vea bien, incluso si la imagen no se carga.
Con el cuerpo seleccionado, iremos a la? Rellenar? Sección a la izquierda del inspector. Desde aquí, aplicar un color de fondo es tan simple como hacer clic en la propiedad CSS apropiada y escribir nuestro color; en este caso # 1f1f21.
Añadiendo una imagen de fondo
Para agregar una imagen de fondo, básicamente tomamos los mismos pasos exactos y simplemente navegamos al archivo adecuado en la carpeta de imágenes. Utilicé un impresionante fondo gratuito de Premium Pixels.
Paso 2: Agregar un contenedor
Para agregar un contenedor a un sitio, normalmente solo tirarías un div, y así es exactamente como funcionan las cosas en Flux. Haga clic en el? Contenedor? botón en la parte superior y bajar a? Div Div.? Asegúrese de que cuando realice este paso, haya seleccionado el elemento de cuerpo. En Flux, siempre desea seleccionar el objeto principal que desee al crear un nuevo elemento. Esto asegura que se inserta en la parte correcta de su HTML.
Esto debería crear una pequeña caja vacía con guías en tu lienzo.
Al igual que hicimos antes, seleccione el elemento y abra el inspector. En "Posición y tamaño", establezca el ancho en 700 px y la altura en 810 px. Asegúrese de borrar los valores predeterminados para? Top? ¿E izquierda? mientras estás en ello.
Centrado automático de un elemento
Ahora, si eres un desarrollador web, ya sabes exactamente cómo centrar esta división: establece los márgenes en automático. Puede entrar y hacer esto manualmente o simplemente hacer clic en el engranaje pequeño en la parte superior derecha del Inspector y bajar a "Auto Center".
Añadiendo una sombra
En este punto, debe tener el marco básico para el sitio.
Solo por diversión, quiero mostrar algunas de las características de Webkit CSS3 integradas en Flex. Si haces clic en? Webkit? en el inspector, verás un puñado de propiedades CSS divertidas: box-shadow, box-reflect, webkit transitions, etc. Desafortunadamente, no hay ningún equivalente de Mozilla, pero siempre puedes colocarlas en el código manualmente.
Para agregar una sombra a nuestro contenedor, simplemente haga clic en la propiedad y ajuste la configuración.
Estilos en linea?
Los observadores interesados probablemente ya se han dado cuenta de que los estilos que hemos estado creando están configurados para "en línea". Esta es una de las peculiaridades del flujo de trabajo de Flux. Por alguna razón extraña y desconocida, todos sus estilos están configurados en línea de forma predeterminada. En realidad, es un poco más fácil configurar los elementos en Flux cuando están configurados en línea, por lo que el sitio web de Flux recomienda que primero configure un elemento de la forma que lo desea de la manera que tenemos arriba, luego convierta los estilos en algo que aparecerá. en la hoja de estilo externa.
No temas, este es un proceso rápido y sin dolor. Seleccione el objeto que desea convertir, haga clic derecho en él y seleccione "Crear estilo con". ? opción. Esto abrirá el siguiente cuadro de diálogo que le permitirá asignar una ID o una Clase al objeto.
Hacer esto creará un pequeño ícono a la izquierda con la ID que acabamos de aplicar. Esta área es básicamente un esquema de nuestro archivo CSS. Ahora, cuando desee cambiar las propiedades de ese contenedor, haga doble clic en el icono que se encuentra aquí para iniciar el inspector.
Paso 3: El encabezado
Los pasos que acabamos de aprender establecen el flujo de trabajo para crear todo el contenido en nuestra página. Para agregar el nombre de la compañía a nuestro encabezado, creamos otra Div Divida, pero esta vez hacemos doble clic dentro de ella para escribir dentro de ella (esto esencialmente crea una etiqueta? P?). Una vez que escriba lo que desea, puede aplicar estilo al texto como lo desee. Como puede ver a continuación, he agregado configuraciones para color, familia de fuentes, transformación de texto, alineación de texto y tamaño de fuente.
A continuación, haga lo mismo para el texto debajo del título.
Eso debería darle un buen encabezado tipográfico para su página. Recuerda convertir ambos elementos a estilos externos como lo hicimos antes.
Paso 4: La Imagen
Ahora estamos listos para lanzar en nuestra gran imagen. Usaré una foto que tomé yo mismo, pero puedes hacer lo que quieras.
Para comenzar, seleccione el contenedor y cree un div que tenga 700px de ancho y tan alto como lo necesite. A continuación, establezca el fondo del div a su imagen y el fondo a no-repetir. Con la división de imagen seleccionada, puede usar las teclas de flecha para moverla hacia arriba o hacia abajo para moverla a su posición, después de todo esto es un WYSIWYG!
Paso 5: Terminando el texto
En este punto, el tutorial sería bastante redundante si entráramos en demasiados detalles. Realmente no queda mucho por hacer más allá de crear unos cuantos divs más, rellenándolos con texto y diseñándolos como lo hicimos anteriormente. Me quedé con el tema de la fuente de Georgia que había estado usando y acabo de hacer que mi titular fuera más grande que el texto del párrafo.
Una cosa a tener en cuenta es que para crear un enlace, simplemente seleccione un elemento o bloque de texto y vaya a Editar> Enlace rápido. Con eso, la página debería estar terminada!
¿Qué pasa con el código?
Si queremos ver y editar el código en cualquier momento, simplemente presione Comando-3 para abrir el visor de códigos.
Flux escupe un código limpio que se integra completamente con el proceso de desarrollo. Puede hacer tanto o tan poco como desee con la interfaz WYSIWYG y hacer el resto a mano. Dado que Flux utiliza solo archivos HTML y CSS antiguos, incluso puede trabajar en el sitio en su editor de código favorito mientras construye Flux. El flujo de trabajo es completamente abierto, por lo que si en algún momento solo desea hacer algo como siempre lo ha hecho, ¡es libre de hacerlo!
¿Qué más hace el flujo?
Este tutorial no ha arañado la superficie de lo que Flux puede hacer. Aquí hay algunas otras características para emocionarse:
- Módulos de diseño incorporados para prototipado rápido
- Vista del navegador en vivo
- JavaScript, PHP y todo ese jazz.
- Soporte de WordPress Theme
- Fragmentos de código reutilizables
- Paleta de historia
- Widget palette - Crea galerías fáciles y efectos jQuery
- Soporte HTML5
- Soporte de API de fuente de Google
- Toneladas más que ni siquiera sé todavía!
Pensamientos de cierre
La primera vez que usé Flux fue hace un par de versiones (Flux está ahora en su tercera versión), y me encantó la idea, pero no me enloqueció la ejecución. Se sentía un poco de buggy (todo lo que está arreglado ahora) y realmente no parecía tan fácil simplemente recogerlo y correr con él.
Sin embargo, ese encuentro fue bastante breve y siempre he querido volver atrás y realmente darle una oportunidad. He jugado con Flux durante los últimos dos días y tengo que decir que, una vez que me tomé el tiempo de averiguar el flujo de trabajo adecuado, trabajar con Flux fue un sueño. Definitivamente toma un poco de tiempo descubrir todas las peculiaridades, pero una vez que lo haces, no se comen nada en absoluto y se sienten muy naturales.
Por lo menos, Flux es increíble para la creación de prototipos. Los aficionados al diseño en el navegador en lugar de Photoshop verán cómo se aborda la mayoría de sus preocupaciones aquí, ya que se verá obligado a diseñar utilizando las propiedades de CSS reales y el posicionamiento en lugar de los efectos de Photoshop. Mi parte favorita de la aplicación es que no lo acorrala para usarla en todo el proceso. No hay ningún archivo de proyecto de Flux de qué preocuparse, solo los archivos que normalmente usaría para crear un sitio. Esto significa que puede cambiar a una aplicación diferente o incluso pasar el proyecto a un colega o cliente que no necesite Flux o necesite saber que lo usó.
Si eres un desarrollador que codifica a mano que a menudo sueña con un WYSIWYG que no apesta y realmente puede conectarse a la forma en que trabajas actualmente, te recomiendo que le des una oportunidad a Flux.Puede ser un poco frustrante al principio, pero tómate el tiempo de hacerlo y averigua cómo usar la aplicación de manera correcta y apostaré a que podrías pensar que es el mejor WYSIWYG que hayas usado.