Ejercicio: Configuración de la estructura de la aplicación web

  • 5 minutos

Hay diferentes maneras de crear y administrar proyectos de sitio web. Algunas de estas diferencias dependen de las herramientas específicas que tenga y de las preferencias de la organización. Al crear un sitio web, es habitual que la estructura del proyecto cambie con el tiempo a medida que se vuelve más complicado. Los proyectos de gran tamaño suelen requerir un mayor grado de cuidado y atención para que muchos usuarios puedan mantenerlo todo organizado. La clave está en mantener la apariencia de organización, y hay estrategias comunes que ayudan a que así sea.

En esta unidad, crea una estructura de proyecto pequeña con Visual Studio Code. El proyecto tiene tres archivos: un archivo HTML, un archivo CSS y un archivo de JavaScript. También agrega una extensión de Visual Studio Code para simplificar la ejecución del sitio web en el explorador.

Creación de una carpeta nueva para su sitio web

  1. Abra Visual Studio Code.

    Al abrir Visual Studio Code, se abre la página de Bienvenida. Tenga en cuenta que puede crear un archivo o abrir una carpeta en la lista Inicio.

    Screenshot of the Visual Studio Code Get Started page.

    Si la página principal no aparece, puede mostrarla seleccionando Ayuda > Bienvenido en el menú. (También puede mostrar la página principal abriendo la Paleta de comandos con el método abreviado de teclado Mayús+Ctrl+P en un equipo con Windows o Mayús+Cmd+P en macOS, o seleccionando Ver > Paleta de comandos en el menú Visual Studio Code. Cuando se muestre la Paleta de comandos, escriba >Ayuda: principal en el campo de búsqueda para abrir la página principal).

  2. Seleccione Abrir carpeta en la lista Inicio de la página principal o seleccione Archivo > Abrir carpeta en el menú de Visual Studio Code.

    Screenshot of the Windows operating system Open Folder dialog.

    Cuando se abre una carpeta, el sistema operativo tiene la opción de menú Nueva carpeta para crear una nueva.

  3. Vaya a la ubicación donde desea crear la nueva carpeta para el sitio web y seleccione Nueva carpeta.

  4. Asigne a la carpeta el nombre simple-website y seleccione Seleccionar carpeta.

    Importante

    Si aparece el cuadro de diálogo Visual Studio Code, seleccione Confiar en los autores de todos los archivos de la carpeta principal...; se trata de la característica de Workspace Trust que permite decidir si las carpetas del proyecto deben permitir o restringir la ejecución automática de código. Acaba de crear la carpeta, por lo que es segura.

Creación de algunos archivos

  1. Cree un archivo; para ello, seleccione Archivo > Nuevo archivo en el menú o use Control+N en Windows o Comando+N en macOS.

  2. Guarde el archivo mediante Control+S en Windows o Comando+S en macOS.

  3. Escriba index.html como nombre de archivo y, a continuación, seleccione Guardar.

  4. Repita los pasos anteriores para crear dos archivos más, main.css y app.js. Cuando haya terminado, la carpeta de proyecto simple-website en el explorador de código de Visual Studio Code debe contener los siguientes archivos:

    • index.html
    • main.css
    • app.js

    Screenshot of your files in the Visual Studio Code Explorer view.

Puede crear un sitio web incluyendo todo el código HTML, los estilos CSS y el código JavaScript en un único archivo. Sin embargo, en este ejercicio está usando un archivo HTML para el contenido, un archivo CSS para los estilos y un archivo JavaScript para la interactividad.

La configuración de tres archivos ayuda a mantener organizado el proyecto del sitio web. La separación de contenido, estilos y lógica es un ejemplo de mejora progresiva. Si JavaScript no está habilitado o no es compatible con los clientes, HTML y CSS seguirán funcionando. Sin embargo, si CSS no es compatible con los clientes, al menos su contenido HTML aparecerá.

Instalación de extensiones o paquetes

Puede ampliar la funcionalidad de Visual Studio Code mediante el marketplace de extensiones. Tenga en cuenta que estas extensiones son recursos desarrollados por la comunidad y que suele haber varias soluciones para el mismo tipo de característica. Puede instalar las extensiones de forma individual en el editor, o bien varias al mismo tiempo con la línea de comandos.

Para el desarrollo web, todo lo que necesita ahora es open in browser. Esta extensión lo ayuda a abrir rápidamente el sitio web en el explorador predeterminado, en lugar de copiar y pegar la dirección URL del archivo en el explorador.

Para instalar esta extensión, siga estos pasos:

  1. Seleccione el icono Extensiones en la barra de actividad vertical (panel izquierdo).

  2. Escriba "open in" en el cuadro de búsqueda y, a continuación, seleccione la extensión open in browser publicada por TechER.

  3. Seleccione Instalar para que Visual Studio Code instale la extensión.

    Screenshot showing the Visual Studio Code extension sidebar with the words 'open in' in the search field and a list of matching extensions.

  4. Vuelva al Explorador; para ello, haga clic en el icono superior de la barra de actividad o use Control+Maýus-E en Windows o Comando+Maýus-E en macOS.

Bien hecho. El proceso de instalación y configuración tarda un poco más, pero solo debe realizarse una vez. Ahora ya está listo para crear un sitio web.