Visual Studio Code: diseñando páginas web

Visual Studio Code: diseñando páginas web

by laraya78
Photo by hitesh choudhary on Pexels.com

Últimamente es muy común encontrar demos y ejemplos de ejercicios donde se utiliza la herramienta Visual Studio Code como editor de código fuente.

Se ha preguntado ¿qué es Visual Studio Code? Pues se trata de un editor de código liviano, gratuito y de código abierto (openSource) que corre en el escritorio y es multiplataforma: Windows, macOS y Linux. Ofrece la capacidad de predecir instrucciones que se están por escribir (llamado intellisense), para una variedad de lenguajes tales como Java, C, C#, C++, Python, PowerShell, HTML, XML y JSON entre otros más. También ofrece la habilidad de agregar “plugins” para poder trabajar directamente en la nube de Microsoft Azure. Dependiendo del tipo de archivo que se esté editando, la interfaz gráfica asigna un icono que va caracterizando cada clase de archivo. En adelante de este texto se abreviara como VSCode.

En esta publicación vamos a utilizar VSCode para crear una página HTML que pueda servir de entrada a un sitio web, así como también vamos a ir agregando páginas que complementen un pequeño sitio que pueda servir de base para posteriormente, en otra publicación, realizar el procedimiento para hospedarlo como un sitio web en Azure.

Si no tiene instalado el editor y desea realizar pruebas y hacer este ejercicio, puede descargar la herramienta por medio del siguiente enlace: https://code.visualstudio.com/download

Suponiendo que ya se tiene instalado el editor de VSCode, vamos a instalar una extensión que se llama “LiveServer”, la cual permite iniciar un servidor local de desarrollo para poder ir viendo el desarrollo de la página web que vamos a crear.

Para habilitarlo, en el panel de la izquierda, busque la opción de “Extensions” y digite en la barra “Live Server”. Esto va a desplegar la opción y debe seleccionar “Install”.

Figura No.1: En Extensions, buscar la extensión “Live Server” e instalar

Posteriormente, debemos crear una carpeta en el sistema de archivos donde vamos a ir guardando elementos que vamos a crear. En el menú principal, puede seleccionar “File/Open File…” y buscar el repositorio que creo en el sistema de archivos local de su computadora. En este caso se creó “PORTAFOLIO”.

Ubicándose en la carpeta, seleccione de las opciones al lado del nombre del directorio, el primer botón denominado “New File” y digite el nombre del archivo como “index.html”. Note como el editor va reconociendo el tipo de archivo en base a la extensión que se le asigna al mismo.

Figura No.2: Crear carpeta para guardar archivos

Como se muestra en la siguiente imagen, una vez creado el archivo, vamos a utilizar marcado (o tags) HTML para ir dando forma a la página. Se usa el tag <html> y <body> para crear el documento y de momento solo vamos a desplegar un texto que dice “Mi Sitio Web”.

Figura No.3: Código del HTML para la página index

El código HTML es el siguiente:

<html>
    <body>
        Mi Sitio Web
    </body>
</html>

Para visualizar la página web que acabamos de crear, nos posicionamos sobre el nombre del archivo bajo el folder de PORTAFOLIO del lado derecho y seleccionamos el archivo “index.html”, presionamos clic derecho para seleccionar “Open with Live Server”.

Figura No.3: Ejecutar la página en el explorador predeterminado de internet con Live Server

Esto nos permitirá visualizar la página que acabamos de crear, la cual se mira de la siguiente manera:

Figura No.4: Visualización en el explorador de la página index.html

¡Excelente! Ciertamente ya con estos pasos creamos una página web de inicio la cuál es estática y básica. Podemos agregar algunos elementos adicionales para darle un formato más llamativo. Se pueden agregar imágenes en la carpeta del sistema de archivos donde se están guardando los archivos y VSCode las va a reconocer automáticamente. También, utilizando el elemento HREF en el cuerpo de la página HTML, podemos agregar navegación al sitio hacia otra página web.

Para esto, vamos a crear una página web del “Acerca de” para darle más contenido al sitio. Nos posicionamos nuevamente al lado de “PORTAFOLIO” en el menú y seleccionados nuevo archivo. También se agregó una imagen en la carpeta para ser utilizada posteriormente por la página “index.html”. Nótese como en el menú del lado izquierdo la herramienta ya reconoce la imagen con el icono respectivo en color morado tal y como se muestra a continuación:

Figura No.5: Seleccionar “New File” y nombrarla como about.html. Nótese que ya el editor reconoce imágenes en la carpeta

Acá se encuentra el código HTML actualizado para navegar hacia la página de “about.html” que acabamos de agregar, posteriormente le vamos a dar contenido.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aprendiendo todos los días </title>
  </head>
  <body style="background-color:#e3e7eb;">
    
    <A HREF="about.html">ACERCA DEL SITIO</A>

    <h1>Web y Azure: Construyendo Conocimiento</h1>
    <p>Hoy aprendemos a hospedar un sitio web estático usando Azure Blog Storage.</p>
    <p>Nos puede servir para fines informativos y dar a conocer proyectos en la web.</p>
    
    <table width="550px" height="100%" border="1">
        <tr>        
        <td>
            <img src="5480577948_62eca45201_w.jpg" alt="Aprendiendo">
        </td>        
        <td>
        Este texto se encuentra ubicado al lado de la imagen.
       </td>        
        </tr>        
        </table>
  </body>
</html>

La página con el código anterior cambia y se visualiza de la siguiente manera:

Figura No.6: Agregando texto, imagen, acerca de y una tabla a index.html

En cuanto a la página del acerca de, de forma sencilla se puede crear con el siguiente código HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Acerca de</title>
  </head>
  <body style="background-color:#e3e7eb;">    
    <A HREF="index.html">REGRESAR AL INICIO</A>    
    <h1>Acerca de...</h1>
    <p>Aquí se coloca información acerca de la razón de ser del sitio web.</p>
    <p>Puede incluir información relevante de la persona, el negocio o la organización tal como:</p>
        <ul>
            <li> ¿Comó se llaman?</li>
            <li> ¿Quiénes son?</li>
            <li> ¿Qué hacen? </li>
            <li> ¿Comó se pueden contactar? </li>
        </ul>
  </body>
</html>

Y se visualizaría así:

Figura No.7: Página enlazada del about.html

Es recomendable agregar una página para manejo de errores en el sitio. En este caso se puede crear página “404.html” para darle tratamiento a posibles errores que se den el sitio por páginas no encontradas. Este sería un diseño propuesto para dicha página web:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Not Found</title>
  </head>
  <body style="background-color:#e3e7eb;">    
    <h1>Página no encontrada</h1>
    <p>Se dio un error y la página no fue encontrada.</p>
    <A HREF="index.html">Regrese al sitio inicial</A>      
  </body>
</html>

Las páginas se pueden continuar extendiendo y darle diseños más sofisticadas según el gusto, lo importante acá es conocer como el editor de VSCode es una herramienta versátil que también se puede utilizar tanto para editar distintos lenguajes de programación, código para Microsoft Azure, y hasta para generar y ejecutar código HTML.

Mas adelante se mostrará cómo se puede hospedar las páginas que recién creamos mediante Microsoft Azure utilizando Azure Blog Storage, una opción muy económica para dar a conocer su sitio web.

Los archivos utilizados los puede obtener en el repositorio de GitHub de ledadataanalitica.data.blog.

One thought on “Visual Studio Code: diseñando páginas web”

  1. Pingback: Azure Blob Storage: ¿Requiere hospedaje web de bajo costo?  – LEDA Data Analítica

Leave a comment