Netbeans: Crear proyectos HTML5 con plantillas y plugin

Desarrollar en HTML5 hoy es un estándar ya que funciona en un navegador o en dispositivos móviles mediante aplicaciones híbridas. Si la aplicación o sitio web funciona en Chrome, Firefox u otro navegador y está adaptada a resoluciones de pantalla de dispositivos móviles, por lo tanto sin muchos cambios tenemos también una aplicación móvil para Android o IOS.

Una de la herramientas gratuitas mas importantes para programar es Netbeans, ya que permite desarrollar sitios web tradicionales o aplicaciones móviles nativas o hibridas.

A continuación, deberemos instalar el plugin, para ello vamos a:

• Tools
• Plugin
• Pestaña Downloaded
• Hacemos clic en el botón Add Plugin
• Buscamos el archivo descargado que tendrá extensión nbm.

Una vez instalado ya podremos utilizar los componentes desde la paleta de Herramientas de HTML.

Crearemos un proyecto HTML5 para ver sus características y componentes.

Vamos a:

• File
• New Project
• Seleccionamos HTML5 Application, para crear un proyecto en blanco o vacio

En la próxima pantalla nos solicitara asignarle un nombre a nuestro proyecto y un directorio donde guardarlo, luego damos clic en el botón Siguiente. Aquí tendremos varias opciones por ejemplo: No utilizar platilla (No Site Template)

Seleccionar una plantilla (Select Template), le permite seleccionar de una plantilla que tengamos en algún directorio del ordenador o para especificar la ubicación de un archivo .zip de una plantilla en una url. Puede escribir la dirección URL del archivo .zip o haga clic en Examinar para especificar una ubicación en el sistema local. Cuando se crea un proyecto basado en una plantilla de sitio los archivos, las bibliotecas y la estructura del proyecto se copian al directorio del proyecto, por ejemplo una web de plantillas gratuitas.

Tomaremos la primer plantilla cuyo enlace al archivo zip es el siguiente:
http://cdn.freehtml5...imcreatives.zip

Seleccionamos la opción Select Template y copiamos el enlace en la caja de texto Template. Luego damos clic en Siguiente.

A continuación en la siguiente pantalla podremos añadir bibliotecas si necesitamos para nuestro desarrollo y Netbeans las adjuntará a nuestro proyecto.

Podemos observar que reconoció varias bibliotecas Javascript y además añadimos Jquery por nuestra cuenta.

A continuación hacemos un clic en Finalizar (Finish) y Netbeans se encargara de descomprimir la plantilla y ordenar todos los archivos del proyecto.

En la barra de herramientas, tenemos un selector desplegable para probar la aplicación en diferentes dispositivos como Navegadores, Dispositivos moviles, SmartTV y emuladores como Apache Cordoba para Android, para ello necesitamos tener instalado el Android SDK y el AVD Manager. El Administrador de AVD proporciona una interfaz gráfica de usuario en el que se pueden crear y gestionar dispositivos virtuales Android (AVDS), que son requeridos por el emulador de Android.

En este caso seleccionamos Firefox, luego hacemos clic en la flecha verde para ejecutar el proyecto y el resultado es la plantilla funcionando en forma local.

Otra manera de crear un proyecto con plantillas es poder utilizar plantillas del sitio web www.initializr.com. Initializr es un generador de plantillas HTML5 para ayudar a empezar con un nuevo proyecto basado en HTML5. Genera una plantilla personalizable con un código limpio y fácil de comprender, además incluye todos los elementos y componente básicos necesarios.

Desde Netbeans solo necesitamos seleccionar el tipo de plantilla que queremos utilizar y nos generara el código y la estructura del proyecto automáticamente.

Por ejemplo seleccionamos una plantilla de tipo Boostrap para un nuevo proyecto.

Hacemos clic en Siguiente y nuevamente nos permitirá seleccionar y añadir más bibliotecas Jquery si las necesitamos y luego damos clic en Finalizar.

Veremos como se ha creado la estructura del proyecto HTML5 y a la derecha veremos la paleta con los componentes del plugin instalado anteriormente.

Ejecutamos el proyecto como hicimos anteriormente o también presionando la tecla F6. El resultado sera una plantilla sencilla para comenzar nuestro proyecto.

A continuación probaremos la plantilla Responsive de Initializr con los mismos pasos anteriores y veremos el resultado al ejecutarlo en el navegador.

Si queremos testear nuestra aplicación en el navegador Google Chrome, deberemos instalar un plugin que conecta Netbeans con Chome.

Deberemos acceder a nuestra cuenta de Google con nuestro Gmail para poder autorizar la instalación del plugin en Google Chrome, luego podremos ejecutar y visualizar la aplicación sin problemas.

Una de las ventajas de utilizar Google Chrome es que haciendo clic derecho en la pantalla podremos acceder al Inspector de elementos y tendremos muchas utilidades para revisar nuestra aplicación, una de ellas simular la aplicación en diferentes dispositivos móviles y resoluciones.

Accediendo a travesde de este icono podremos simular nuestra aplicación en moviles y Laptop como Ipad, Iphone, LG, Samsumg, Notebook.

Por ejemplo simulamos nuestra aplicación ejecutándose en un Iphone 6 con una conexión Wifi de 30 Mbps

A continuación veamos los componentes de la paleta HTML5. Creemos un proyecto HTML5 en blanco o vacío. Añadimos la bilioteca Jquery 2.0.3 y creamos al estructura del proyectos. La paleta de componentes si no la tenemos en pantalla se habilita desde el menú Windows > Ide Tools Palette

En nuestro archivo index.html, dentro de la seccion de codigo

<body>

        <div>
          <!--  Arrastramos el componente Data List -->

           
        </div>

</body>

Arrastramos el componente Data List y lo soltamos,l veremos que se nos crear un bloque de codigo automaticamente a modo de ejemplo

  <body>
        <div>

            <label for="country_name">Country: </label>
<input id="country_name" name="country_name" type="text" list="country" />

<datalist id="country">
   <option value="Afghanistan">

   <option value="Albania">
   <option value="Algeria">

   <option value="Andorra">
   <option value="Angola">

</datalist>
           

        </div>
    </body>

Si ejecutamos nuestra aplicación veremos como funciona el desplegable, inclusive es permite filtro siendo sensitivo mientras escribimos nos ira filtrando automaticamente el listado que contenga el desplegable

Cambiemos el código generado por Netbeans y extraigamos los datos seleccionados el Data List, con Jquery haciendo referencia a los id de cada elemento

<body>

        <div>
            <label for="paises">Pais: </label>

<input id="paises" name="paises" type="text" list="pais" />
<datalist id="pais">

   <option value="Afghanistan">
   <option value="Albania">

   <option value="Algeria">
   <option value="Andorra">

   <option value="Angola">
</datalist>

            <a href="javascript:Verpais();">Ver Pais</a> 
        </div>


     <script> 

       function Verpais() { 
         var paisseleccionado = $('#paises').val(); 

         alert(paisseleccionado); 
       } 

     </script>                 
    </body>

Ejecutamos la aplicación y vemos que nos devuelve el resultado con el nombre del pais seleccionado:

También podemos enviar un DataList con un formulario y capturar el dato seleccionado y guardarlo en una base de datos

El componente required de la paleta nos permite añadir como Requerido un elemento dentro un formulario como por ejemplo el siguiente código con dos campos requeridos obligatorios:

  <body>

        <div>
         <form>

<label for="Nombre">Nombre: </label>
<input name="nombre" type="text" required />

<label for="Email">Email </label>
<input name="email" type="text" required />

<input type="submit" value="Submit"/>
</form>

        </div>

    </body>

Si ejecutamos este código podremos ver que el formulario no se podrá enviar si no se completan ambos campos.