FANDOM


Poniendo en funcionamiento la UIEditar

Mozilla ha liberado todo Gaia (que como ya comentamos es la última capa del sistema, la que sirve la interfaz) y tiene disponible en sus entrañas toda la UI que pondremos en funcionamiento.Editar

1

Prueba de diseño

Se puede conseguir desde GitHub (está distribuido en dos carpetas:style para los estilos que están terminados y style_unestablecon todo el CSS que puede sufrir cambios, está incompleto o mal documentado) y debemos de descargar los bloques de la UI que queramos usar, o mejor descargar todos los estilos y añadir los que nos hagan falta.
Editar

Podemos probar el ejemplo funcionando y podemos instalarlo en Firefox OS o si tenemos Firefox en Android (que tras instalar unaapp nos crea un acceso directo en el escritorio del móvil o tablet).Editar

ComponentesEditar

Tenemos que tener en cuenta que los componentes solo incorporan el diseño básico, debemos de controlar nosotros cuando aparecen y desaparecen y las transiciones entre elementos.Editar

Estos componentes se pueden llamar desde la propia página o importándolo desde las hojas de estilos (esta es la opción que expone Mozilla). La siguiente lista está compuesta por todos los componentes que podemos añadir en nuestro archivo CSS si todos los componentes que hemos descargado desde GitHub están en la carpeta “resources”.Editar

 

@import url(resources/action_menu.css);     /* menús de acciones */

@import url(resources/buttons.css);         /* botones */

@import url(resources/confirm.css);         /* panel de confirmación */

@import url(resources/headers.css);         /* cabeceras */

@import url(resources/status.css);          /* panel de alerta de estado */

@import url(resources/switches.css);        /* int
erruptores, radio y checkbox */   


 
2

componentes

               ===Menú de acciones===

El menú de acciones muestra una lista simple, que se debe de mostrar tras un evento desde la interfaz principal y desde este escogeríamos alguna opción de la lista de lEditar

a que disponemos.Editar

3

Podemos añadir las opciones que queramos añadiendo nuevos<button> Editar

automáticamente el último aparecerá como un botón más destacado, que está pensado para Editar

cancelar la acción. También tiene un bloque para el título.Editar

<form role="dialog" data-type="action" id="sample-menu">

  <header id="sample-title"> Título </header> 

  <menu>

    <button > Acción </button>

    '<button disabled'> Acción </button>

    <button > Acción </button>

    <button > Cancelar </button>

  </menu>

</form>


Botones  Esta UI nos proporciona tres tipos de botones: el estándar, el de la acción recomendada y el de alerta o peligroso (gris, azul y rojo respectivamente). Que pueden ser añadidos en cualquier lugar y reaccionan al pasar por encima y varían también al estar deshabilitados.====También se pueden crear listas de botones compactas, que redondea las esquinas del primer y último elemento automáticamente.====

En la prueba de la UI los botones son los protagonistas, con un interruptor podemos mostrarlos u ocultarlos y con un checkbox podemos deshabilitarlos.Editar

 


<button> Normal </button>

<button class="recommend">Recomendado</button>

<button class="danger">Peligroso</button>



<ul class="compact">

 
  • <button> Acción 1 </button></li>  
  • <button> Acción 2 </button></li>  
  • <button> Acción 3 </button></li>  
  • <button> Acción 4 </button></li> ' </ul>'  

    4










    Confirmacion.Editar

    Es un panel similar al del menú de acciones, pero incorpora dos botones en la parte inferior de la pantalla donde nos permite elegir entre continuar la acción o cancelarla, y nos permite añadir un cuadro de texto. Editar

    Podemos añadir distintos títulos, imágenes y bloques a nuestro antojo, como en la imagen lateral..Editar

    Este bloque de la UI no lo he puesto en funcionamiento porque no actuaba del todo correctamente al añadir textos o imágenes.


    <form role="dialog" data-type="confirm">  
    <section>
    
    
       

    </span>Confirmación</h1>    

    </span>¿Quieres borrar el contacto?</p>   </section>   <menu>     <button>Cancelar</button>                     <button class="danger">Borrar</button>      </menu> </form>

    5










    Cabecera.Editar

    Las cabeceras son totalmente personalizables, son el punto fuerte de la UI, tienen tres temas que podemos cambiar y la parte importante está en el botón de la esquina superior izquierda, que es con el que en todo el sistema operativo se retrocede o se accede a los menús.

    Podemos añadir varios botones o textos, sin contar el título tenemos tres botones que pueden llevar a otras acciones (uno en la izquierda y otros dos en la derecha) y además podemos añadir una subcabecera.

    Disponemos del tema naranja por defecto, el tema oscuro (class="skin-dark") y el tema org

    6

    anicque es grisáceo (class="skin-organic").

    En la app de demostración de la UI si pulsamos el botón de menú (el botón superior izquierdo) nos sale un menú de acciones para cambiar el color de la cabecera.

    <section role="region">

      <header>
    
        <a href="#"><span class="icon icon-back">Atrás</a></span> 
    
        <menu type="toolbar">
    
          <button><span class="icon icon-edit">Editar</button></span> 
    
        </menu>
    
        <h1>Aplicación</h1> 
    
      </header>
    
      <header>
    
    
       

    </span>Muy bonita</h2>   </header> </section>  ===Interruptores.===

    En este bloque tenemos varios elementos, los input de tipo radioy checkbox y en dos colores: azul y rojo, este último para advertir de una acción peligrosa.Editar

    Los radio son simplemente circulares y se rellenan al estar activos, mientras que los checkbox nos permiten usarlos circulares con un tick en el centro al estar activos o como si fuesen un interruptor.

    
    <label>
    
      <input type="checkbox">
    
      
    
    </label>
    
    
    
    <label class="danger">
    
      <input type="checkbox">
    
      
    
    </label>
    
    
    
    <label>
    
      <input type="radio">
    
      
    
    </label>
    
    
    
    <label class="danger">
    
      <input type="radio">
    
      
    
    </label>
    
    
    
    <label>
    
      <input type="checkbox" data-type="switch">
    
      
    
    </label>
    
    

     Maselementos de la UILa UI tiene unos cuantos elementos más a nuestra disposición pero no todos funcionan como deberían o directamente algunos no están documentados, aunque en el sistema operativo están implementados y funcionan perfectamente.Alternativas a la UILa existencia de este pack para la interfaz de usuario no nos obliga a tenerlo que usar, podemos hacer cualquier diseño, aunque es recomendable hacerlo adaptable, pero no tenemos ninguna limitación, admite toda la tecnología de HTML5 y CSS3 y tiene un rendimiento bastante bueno, mejor en el renderizado que en la ejecución de grandes scripts.<p style="margin:15pt0cm0.0001pt;text-align:justify;line-height:18pt;">Por poner un ejemplo del rendimiento, en renderizado se come, literalmente, el Geeksphone Keon (el móvil con Firefox OS de gama baja, de 90 euros) a mi Galaxy S+, con un experimento donde hay rotaciones 3D de CSS3 en movimiento.
    En cuanto a una prueba rápida con Octane si sale perdiendo el Geeksphone con una puntuación de 240 contra 430, aún así el funcionamiento está fenomenal y la estabilidad bastante buena, aunque aún hay que pulirlo (es normal en una prerelease).
    </p>

    <p style="margin:15pt0cm0.0001pt;text-align:justify;line-height:18pt;"></p>

    Artículos en la categoría «Diseño y Desarrollo»

    Esta categoría incluye solamente la siguiente página.