Código HTML básico de una aplicación

Las aplicaciones de Sencha Touch se crean como un documento HTML5 que contiene referencias a los recursos de JavaScript y CSS. Nuestro fichero index.html debe de contener como mínimo el siguiente código:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Mi aplicación</title>
    <script id="microloader" type="text/javascript" 
        src=".sencha/app/microloader/development.js"></script>
</head>
<body>
</body>
</html>

A continuación analizaremos por separado cada una de las partes de este código:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
  ...
</html>

La primera línea nos indica que este es un documento del tipo HTML5. Las etiquetas de <html> y </html> indican el inicio y final del documento HTML y deben de contener en su interior todo el resto del código.

<head>
  <meta charset="UTF-8">
  <title>Mi aplicación</title>
  ...
</head>
<body>
</body>

Todo documento HTML (y HTML5 también) debe de contener primero una sección de cabecera (<head>) y a continuación una sección con el contenido principal o cuerpo del documento (<body>). En este caso el cuerpo del documento (<body>) se encuentra vacío. Esto se debe a que la librería Sencha Touch crea todo el contenido de la Web, incluidos todos los elementos de la interfaz, mediante código JavaScript.

La cabecera del documento (<head>) debe de contener como mínimo los metadatos acerca del tipo de contenido, el conjunto de caracteres usados, y un título que mostrará el navegador en la parte superior de la ventana. Además debe de contener un enlace a la librería de javascript de carga de Sencha Touch:

<script id="microloader" type="text/javascript" 
        src=".sencha/app/microloader/development.js"></script>

La etiqueta <script></script> se utiliza para cargar código JavaScript en nuestra página Web. En este caso se carga únicamente el fichero development.js, el cual se encarga de cargar todo lo necesario para iniciar nuestra aplicación: ficheros con hojas de estilo, librerías de Sencha Touch de JavaScript y el fichero app.js con el código de nuestra aplicación.

El fichero development.js comprueba el dispositivo y navegador en el que se ha cargado la aplicación y configura las hojas de estilo, javascripts y otros parámetros para que la aplicación se adapte lo mejor posible al mismo.

Este fichero se utiliza para entornos de desarrollo, pero para producción o testing tendremos que compilar la aplicación mediante Sencha Cmd o generar nuestra propia compilación. En futuras secciones se tratará más en profundidad este tema.

Ahora ya tenemos cargadas las librerías de Sencha Touch y el código de nuestra aplicación para empezar a trabajar. De momento, si lo visualizamos en un navegador solo veremos una página en blanco ya que el código de nuestra aplicación (app.js) de momento está vacío.

PreviousNuestra primera aplicación NextCompilar un proyecto

Last updated 5 years ago

Was this helpful?

<!DOCTYPE HTML> <html manifest="" lang="en-US"> <head> <meta charset="UTF-8"> <title>Mi aplicación</title> <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script> </head> <body> </body> </html>