Enjoy A New Student Discount All 55,000 Courses on sale for Only $12.99

Ends in 05h 23m 49s

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

Estencion netbeans para chrome

En unos momentos, terminará la instalación.

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

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:

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

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»

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

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

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í:

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

se abrirá en navegador con vuestra pagina:

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

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:

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:

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

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

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….

Si miramos nuestro editor, podemos ver alguna cosa interesante:

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í:

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

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

4 comentarios

Deja un comentario

/*Si te ha gustado el artículo
no dudes en compartirlo*/

Facebook
Twitter
LinkedIn

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies

Ver mi IP

Ver ip de mi máquina
tipo valor
Ip: 34.203.221.104
Proxy: 34.203.221.104
Remote host: ec2-34-203-221-104.compute-1.amazonaws.com
Remote port: 15478
** 34.203.221.104