Instalar Framework7

Framework7 es un framework que nos permite desarrollar aplicaciones moviles hibridas con HTML, CSS y JavaScript. Es un framework muy completo y además tiene dos “modos” modo material design para Android y modo “IOS” para aplicaciones para móviles y tables de Apple. Si eres desarrollador web te será facil hacer aplicaciones con Framework7.

Veamos como instalar Framework7.

En primer lugar tenemos que tener instalado node.js, lo descargamos desde su web oficial y lanzamos el instalador hasta que acabe de instalarse.

Después instalaremos bower en nuestro node. Para ello ejecutamos el siguiente comando:

npm install -g bower

Puedes saber más sobre bower en este post.

Ahora entramos en el directorio en el que queramos tener framework7 y lanzamos el comando

bower install framework7

Ahora se bajará framework7 y ya podremos empezar a trabajar con él. Solamente tendriamos que hacer un fichero html con una estructura básica y le incluiremos los ficheros js y css de framework7 y ya podriamos empezar a hacer cosas. Ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Path to Framework7 Library CSS, iOS Theme -->
    <link rel="stylesheet" href="bower_components/Framework7/dist/css/framework7.material.min.css">
    <!-- Path to Framework7 color related styles, iOS Theme -->
    <link rel="stylesheet" href="bower_components/Framework7/dist/css/framework7.material.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="css/my-app.css">
  </head>
  <body>
    <!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>
    <!-- Views -->
    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center sliding">Awesome App</div>
          </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, "data-page" contains page name -->
          <div data-page="index" class="page">
            <!-- Scrollable page content -->
            <div class="page-content">
              <p>Page content goes here</p>
              <!-- Link to another page -->
              <a href="about.html">About app</a>
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner">
            <!-- Toolbar links -->
            <a href="about.html" class="link">Acerca de</a>
            <a  href="form.html" class="link">Formulario</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="bower_components/Framework7/dist/js/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="js/my-app.js"></script>
  </body>
</html> 

Más información:
http://www.idangero.us/framework7/get-started/#.VoqAmfnhDDc

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

2 Comentarios

  1. hola buen dia, tengo una duda este framework tiene acceso a la camara de los devices? he buscado info pero no encuentro nada, muchas gracias de antemano

    Responder
    • El acceso cámara lo tienes con phonegap, este framework es para construir la interfaz y la parte visual de la app.

      Responder

Poner un comentario

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