GUÍA PROGRAMACION PARA DISEÑO
Ing. Mg Lewins Baena Rodríguez
Ejercicio: Configuración de la estructura de la
aplicación web
Al crear un sitio web, es habitual que la estructura del proyecto cambie con el tiempo
a medida que se vuelve más complicado. La clave consiste en mantener la apariencia
de organización, y existen estrategias comunes que ayudan a que así sea. Los proyectos
de gran tamaño suelen requerir un mayor grado de cuidado y atención para que
muchos usuarios puedan mantenerlo todo organizado.
En esta unidad, creará una estructura de proyecto pequeña con Visual Studio Code. El
proyecto tendrá tres archivos: un archivo HTML, un archivo CSS y un archivo
JavaScript. También agregará 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.
GUÍA PROGRAMACION PARA DISEÑO
Ing. Mg Lewins Baena Rodríguez
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.
Al abrir una carpeta, el sistema operativo tiene una opción de menú para crear
una Nueva carpeta.
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 [Link] como nombre de archivo y, a continuación,
seleccione Guardar.
4. Repita los pasos anteriores para crear dos archivos más, [Link] y [Link].
Cuando haya terminado, en el explorador de Visual Studio Code, verá que la carpeta
del proyecto simple-website contiene el siguiente archivo, que incluye el sitio web:
[Link]
[Link]
[Link]
GUÍA PROGRAMACION PARA DISEÑO
Ing. Mg Lewins Baena Rodríguez
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.
GUÍA PROGRAMACION PARA DISEÑO
Ing. Mg Lewins Baena Rodríguez
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 "abrir en" en el cuadro de búsqueda y, a continuación, seleccione la
extensión abrir en el explorador publicada por TechER.
3. Seleccione Instalar, y Visual Studio Code instalará la extensión.
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.
