Comenzar con FLUX®

Frontend

Ya tienes la instalación hecha. Ahora te explicaremos y analizaremos el código.

Existe un archivo index.html que podrás utilizar como template para comenzar tu proyecto One Page. Este archivo contiene una estructura básica que separa todo el contenido de FLUX® del contenido que creas tu.

Hechemosle un vistaso a esta imagen.

Head

En el head están los estilos de FLUX®, que podemos encontrarlos como "flux.css" y "content-tools.css" (este último es una adaptación de Content Tools) y luego por debajo aparece la llamada al archivo "demo.css" que deberías reemplazarlo por tu hoja de estilo (Ej: mystyles.css).

Flux Core

En esta sección es donde ocurren las interacciones y parte del funcionamiento de FLUX®. Aquí no hay que modificar absolutamente nada ya que puede dejar de funcionar la herramienta. El cuadro de login, el panel de edición y algunos botones y ayudas aparecen en esta sección.

Flux Content

Aquí es donde incluiremos todo el contenido de nuestro front. Todos los tags que creemos, deberán estar dentro del <main role="main" class="fx-content"> my content </main>

Casi no hay límites en cuanto al tipo de contenido que podamos incluir dentro de esta estructura. Basicamente aquí irá nuestra página completa.

Flux editable box

Por el momento, la edición solo está disponible para contenido de tipo texto. Para indicar que un texto es editable, debemos encerrar el contenido dentro de un <div id="title-xxxx" data-editable data-name="title-xxxx"> my texts </div> en dónde xxxx debe ser reemplazado por un string descriptivo de la sección, deben coincidir y no ser repetidos en otro lugar del html (Ej: id="title-business" y data-name="title-business" ).

Flux Scripts

Para que FLUX® funcione, es necesario la inclusión de determinados archivos javascripts que deben estar minuciosamente ordenados. Esta sección también es crucial para el funcionamiento de la herramienta. Por lo tanto, no debe modificarse.

Si quieres agregar tus propios scripts, debes hacerlo inmediatemente antes de estas llamadas a los archivos javascript de FLUX®, tal como se ve en la imagen.

Log in

Lanzando el cuadro de login

Para acceder al editor online, primero necesitarás algunos tips para que aparezca el cuadro de login con el campo "usuario" y "contraseña".

Para acceder al cuadro de login desde la url, tienes que agregar "#admin" al final de la misma, de manera que tu dirección url se lea de la siguiente forma: www.mysite.com#admin.

Si quieres acceder al cuadro de login mediante un botón, deberás previamente crear el mismo y agregarle la clase "js-fx-logintrigger__button". Un ejemplo sería <a href="#" class="js-fx-logintrigger__button">Log in</a>.

Configurar usuario y contraseña

Por defecto, el usuario y contraseña de un FLUX® es usuario: demo y contraseña: demo. Para cambiar estos parámetros, es necesario editar y ejecutar un archivo .php que está ubicado en "mysite/php/createLogin.php". El archivo contiene las siguientes lineas:

<?php
    $user = isset($_POST['user'])?$_POST['user']:"admin";
    $pass = isset($_POST['pass'])?$_POST['pass']:"admin";
    file_put_contents("users.txt", md5($user."/".$pass));
?>

Como puedes ver, el usuario y la contraseña es "admin". Editando este archivo y luego ejecutandolo en el navegador (Ej: localhost/myproject/php/createLogin.php) puedes tener tus datos de acceso actualizados.

Nota:

Al ejecutar el archivo .php se crea un archivo "users.txt" con los datos de acceso en md5, por lo tanto, cuando subas tu sitio al server, puedes borrar el archivo createLogin.php para evitar robo de datos.