Trabajando con Netbeans. HTML5, CSS3, y Javascript

Aunque la mayoría de vosotros está acostumbrado a trabajar con grandes IDEs cuando tiene que programar Java, PHP, o algún otro lenguaje de servidor, también es cierto, que cuando nos toca escribir HTML,CSS o Javascript, nos encontramos con que nuestro maravilloso IDE se queda corto, es demasiado pesado, o no es lo suficientemente cómodo, porque no nos permite visualizar los resultados inmediatamente. En este articulo vamos a presentar como suavizar el problema para los usuarios de NetBeans.

Si tenemos que desarrollar con NetBeans, y necesitamos escribir HTML, CSS y/o Javascript, os invitamos a que añadáis unos detallitos a vuestro entorno de trabajo; con ello conseguiréis mejorar vuestro  potente editor, y darle posibilidades de ejecución inmediata.

Lo primero que deberemos hacer es instalar,si no lo teneis ya, el navegador Google Chrome, y a continuación, descarguéis e instaléis desde la tienda Chrome el conector NetBeans

Conector Netbeans

En unos momentos, terminará la instalación.

Ahora, ya podemos abrir NetBeans y crear un proyecto nuevo, con HTML5:

Crear nuevo proyecto en NetBeans

Crear proyecto HTML5 en NetBeans

Nuevo proyecto en NetBeans

En este momento, no nos preocupa ni el nombre del proyecto, ni su ubicación, por lo que podemos confirmar directamente con “Finish”, para que se cree.

Automáticamente, nos aparecerà nuestra pantalla de trabajo con el fichero index abierto. Deberemos comprobar que tengamos seleccionado como navegador Chrome:

Comprobando navegador seleccionado

Si ahora damos la orden de ejecución de la página:

Netbeans-Ejecutar

veréis abrirse el navegador, con vuestra pagina. A partir de ese momento

Empezando un proyecto

Llegado este punto, supongo que os gustará ver las posibilidades, en un pequeño proyecto.

Siguiendo los pasos de antes, creamos un nuevo proyecto HTML5, pero ahora le asignamos un nombre y utilizamos la tecla “Next”

Creando proyecto html5 en netbeans

En la siguiente pantalla, de momento seguimos indicando que no queremos utilizar Templates, y pulsamos en “Next”

Creando proyecto html5 en NetBeans

Y ya en la última pantalla, seleccionaremos las librerías JavaScript que queremos utilizar:

Netbeans. Nuevo proyecto HTML5. Asignando librerias

Hemos escogido jQuery y jQueryui. Hubierais podido seleccionar una version concreta, o si preferís la version reducida.

Al pulsar en “Finish”, se creará el proyecto, con las librerías incorporadas, aunque vuestra pagina index no las utilice. La estructura quedará así:

Estructura de un proyecto HTML5 con js, en netbeans

 

Si ahora comprobáis que tenéis seleccionado Chrome y pulsáis en ejecutar

2015-11-18_13h15_08

se abrirá en navegador con vuestra pagina:

Chrome llamado desde NetBeans

Hasta ahí, es lo mismo que teníamos antes, pero… si pulsáis en el icono que os incorporo Netbeans:

Tabla de tamaños

Tenéis la posibilidad de ajustar vuestro navegador al tamaño del proyecto de destino, o a cualquier otro tamaño que necesitéis.

Vamos a empezar a tocar el código; lo primero que haremos es incorporar las referencias a las rutinas javascript a nuestra pagina, para ello, nos basta arrastrar el fichero correspondiente al lugar en donde deseamos que se cree la referencia:

Creando referencias al las librerias javascript

y sigamos añadiendo código. Os propongo que añadáis los textos encuadrados, aunque estad atento a la facilidad de autocompletación que os irá ayudando, o al cierre automatico de tag. Cuando no os aparezca el autocompletado, ya sabéis, pulsamos Ctrl + Espacio.

Deberiais avanzar hasta que os quedara asi:

2015-11-18_16h22_04

Podemos ver ahora otra ayuda de NetBeans. Colocar el cursor en el punto donde está en la imagen anterior y pulsar “Alt + Insert

NetBeans. Atajo Alt+Insert

Si, darle “Intro” y os aparece un cuadro de diálogo para generar el texto favorito para simular áreas de texto.

2015-11-18_17h24_10

Para nuestro ejemplo, he pedido que genere tres DIVs, y si no lo habéis probado ya, cada vez que salvéis el trabajo pulsando p.ej: Ctrl+s, vereis los cambios reflejados en vuestro navegador….

2015-11-18_16h44_11

Si miramos nuestro editor, podemos ver alguna cosa interesante:

2015-11-18_17h26_14

1 – En nuestra area de trabajo, podemos utilizar los símbolos (-) que aparecen a la izquierda para ocultar aquellas zonas que no necesitamos ver

2 – Mientras que en el navegador de DOM podemos observar la estructura de toda nuestra pagina y posicionarnos en cualquier punto con un simple Doble-click

Podemos añadir ahora una cabecera para cada div, mas o menos así:

2015-11-18_17h30_47

Observad también que en el “head” hemos añadido un pequeño script:

<script type="text/javascript"> 
            $(document).ready(function () { 
               $("#lista").accordion({
                     autoHeight: false 
               }); 
           });

Lo que hace es asignar al grupo definido bajo “lista” el comportamiento de acordeón, osea que uno solo de sus miembros estará abierto.

Se trata de una de las posibilidades que nos da jQueryui.

Y si ahora salvais vuestro trabajo, vereis en el navegador un comportamiento bastante mas elegante

2015-11-18_17h37_56

Cuando pulsais en uno de los títulos cerrados, automáticamente se abre para mostrar su texto, y cierra el que ya estaba abierto.

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en CSS, HTML5, Javascript y etiquetada . Guarda el enlace permanente.

Deja un comentario