Añadir un nuevo proyecto en NetBeans
Si aún no hemos configurado un proyecto en
NetBeans para nuestros trabajos, es lo primero que debemos hacer:
1.Crea una nueva carpeta llamada
spacestars dentro de la ruta
c:\xampp\htdocs\
Paso 1. Nueva carpeta
2. Accede a
File > New Project..., seleccionaremos
Categories: HTML5/Javascript y
Projects: HTML5/JS Application with Existing Sources y haz clic en
Next
Paso 2. Nuevo proyecto
3. Selecciona (botón
Browse...)
c:\xampp\htdocs\spacestars\ como
Site Root y
Source Folder y haz clic en
Finish.
Paso 3. Datos de proyecto
Ahora ya puedes acceder a tu proyecto, aunque estará vacío, desde el árbol de proyectos de la izquierda de
NetBeans.
Estructura de archivos y directorios
- Haciendo clic con el botón derecho en el nombre de tu proyecto, añade un nuevo archivo New > HTML File... con el nombre index.html
- Haciendo clic con el botón derecho en el nombre de tu proyecto, añade dos nuevos directorios New > Folder... con los nombres css y js.
- Pinchando en cada directorio con el botón derecho, añade dos nuevos archivos New > Cascading Style Sheet... y New > JavaScript File... con los nombres style.css y script.js, respectivamente.
En este momento, la estructura de árbol de directorios debería ser similar a la siguiente:
Estructura de archivos y directorios
Una vez creados todos los archivos y carpetas, solo necesitaríamos enlazarlos a nuestra página principal de proyecto. Para ello, el código de tu fichero
index.html debería ser como sigue:
<!DOCTYPE html>
<html>
<head>
<title>Space Stars</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>Space Stars</h1>
</body>
</html>
Comprobación de la plantilla
Para comprobar que hemos realizado correctamente todos los pasos, podemos acceder en cualquier navegador (preferiblemente Firefox o Chrome) a
http://localhost/spacestars/ y debería mostrarnos una página en blanco con nombre de pestaña y título
Space Stars. Además, si hacemos clic con el botón derecho en
Inspeccionar elemento... (o pulsamos F12) y accedemos a la sección
Consola, no deberíamos tener ningún error.
Si tienes algún error o no accedes a la página, comprueba que en el Panel de Administración de XAMPP has iniciado el módulo
Apache (con el botón
Start) y revisa bien el resto de pasos.
Las herramientas para Desarrolladores de Chrome y Firefox
Como hemos dicho, haciendo clic con el botón derecho en cualquier elemento de la página en
Inspeccionar elemento... (o pulsando F12) podemos acceder a una serie de vistas del navegador que nos van a facilitar el análisis y detección de errores en nuestro código HTML, CSS y JavaScript. Puedes encontrar un tutorial completo de opciones haciendo clic
AQUÍ o
AQUÍ.
jairogarcíarincón
