ajt’tjtpgjT

 

Prettier Visual Studio Code

Formatear código de forma consistente puede ser un desafío, pero con la extensión «PRETTIER» haremos que sea posible mantener automáticamente la consistencia en toda la base de código que desarrollaremos.

Para trabajar con Prettier en Visual Studio, deberemos instalar la extensión. Para hacer esto, busque Prettier – Code Formatter en el panel de extensión.

Con la extensión Prettier instalada, ahora puede usarla para formatear su código. Para comenzar, vamos a explorar el uso del comando Format Document. Este comando hará que su código sea más consistente con el espaciado formateado, el ajuste de líneas y las comillas.

Para abrir la paleta de comandos, puede usar CTRL + SHIFT + P , en la paleta de comandos, busque format y seleccione Format Document.

Quizá se le pida elegir qué formato usar. Para hacerlo, haga clic en el botón Configure:

Seleccione Prettier – Code Formatter.

Hasta ahora, ha tenido que ejecutar manualmente un comando para formatear su código. Para automatizar este proceso, podemos elegir un ajuste en VS Code para que sus archivos se formateen automáticamente cuando se guarde.

Para hacer este ajuste, pulse CTRL + , para abrir el menú Settings. Una vez abierto el menú, busque Editor: Format On Save y asegúrese de que la opción está seleccionada

Una vez configurado esto, puede escribir su código de la forma habitual y se formateará automáticamente cuando guarde el archivo.

Para toda la configuración, esta es la página oficial:

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Peacock - Visual Studio Code

Cuando tenemos 2 o mas proyectos abiertos en visual studio nos podemos confundir porque no sabemos cual es el proyecto que estoy buscando en ese momento, por lo cual para hacer mas fácil ubicarlo instalamos la extensión «PEACOCK» que lo que hace es cambiarle el color almarco de trabajo, y así reconocerlo más fácilmente.

Para toda la configuración, esta es la página oficial:
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Material Icon Theme - Visual Studio Code

«Material Icon Theme» sirve para colocar iconos alusivos a las páginas creadas. Por ejemplo: si se crea una página HTML se coloca un icono alusivo a ella y así sucesivamente.

Para toda la configuración, esta es la página oficial: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Para instalarlo en Visual Studio ver el video de abajo:

Dobri Next - Visual Studio Code

Aunque Visual Studio Code ya viene con un tema o fondo de escritorio predeterminado, personalmente prefiero usar el complemento «Dobri Next» el cual viene con 23 colores de fondo  diferentes.

Para su instalación vea el video adjuntado debajo:

Instalación de Visual Studio Code

Para la descarga del archivo ejecutable «Visual Studio Code» debemos de ir al siguiente link:  https://code.visualstudio.com/  dentro de esta página oficial, empezaremos la descarga e instalación. Para mayor referencia puede ver el video insertado a continación:

Sitio Web

Un sitio web es un conjunto de páginas web que se encuentran relacionadas por el contenido y por un dominio en internet, y que constituyen una gran red de información.

Como ejemplo, actualmente muchas empresas tienen un sitio web que funciona como una tarjeta de presentación o bienvenida para el público. Dentro de este sitio web se encuentran diversas páginas web con funciones específicas que amplían la información de esta. De allí que no se deba confundir página web con sitio web.

¿Cómo funciona unaPágina Web?

Este artículo proporciona una vista simplificada de lo que sucede cuando ves una página web en un navegador web de tu computador o teléfono.

Los clientes y servidores

Las computadoras conectadas a la web se llaman clientes y servidores. Un diagrama simplificado de cómo interactúan se vería así:

Los clientes son dispositivos de los usuarios conectados a Internet (por ejemplo, tu ordenador conectado a la red Wi-Fi o el teléfono conectado a la red de telefonía móvil) y el software que se encuentra disponible y permite acceder a Internet en dichos dispositivos (normalmente, un navegador web como Firefox o Chrome).

Los servidores son computadores que almacenan páginas web, sitios o aplicaciones. Cuando un dispositivo cliente quiere acceder a una página web, una copia de la página web se descarga desde el servidor en el equipo cliente y se muestra en el navegador web del usuario.

Las otras partes de la caja de herramientas

El cliente y el servidor que describimos anteriormente, no cuentan toda la historia. Hay muchas otras partes involucradas y vamos a describirlas a continuación.

Por ahora, imaginemos que la web es un camino. En un extremo de la carretera, está el cliente, que es como tu casa. En el extremo opuesto del camino, está el servidor, que es una tienda en la que deseas comprar algo.

Además del cliente y el servidor, también tenemos que saludar a:

Tu conexión a Internet:  permite enviar y recibir datos en la web. Básicamente es el recorrido entre tu casa y la tienda.

TCP/IP: Protocolo de Control de Transmisión y Protocolo de Internet, son los protocolos de comunicación que definen cómo deben viajar los datos a través de la web. Esto es, los medios de transporte que te permiten hacer un pedido, ir a la tienda y comprar los productos. En nuestro ejemplo, podría ser un coche, una bicicleta o tus propios pies.

DNS: los servidores del Sistema de Nombres de Dominio (DNS, por sus siglas en inglés), son como una libreta de direcciones de sitios web. Cuando escribes una dirección web en el navegador, el navegador busca los DNS antes de recuperar el sitio web. El navegador necesita averiguar en qué servidor vive el sitio web y así enviar los mensajes HTTP al lugar correcto (ver más abajo). Esto es como buscar la dirección de la tienda para que puedas llegar a ella.

HTTP: el Protocolo de Transferencia de Hipertexto es un protocolo de aplicación que define un idioma para que los clientes y servidores se puedan comunicar. Esto es como el idioma que utilizas para ordenar tus compras.

Archivos componentes: un sitio web se compone de muchos archivos diferentes, que son como las diferentes partes de los productos que comprarás en la tienda. Estos archivos se dividen en dos tipos principales:
Archivos de código: los sitios web se construyen principalmente con HTML, CSS y JavaScript, aunque te encontrarás con otras tecnologías más adelante.

Recursos: este es un nombre colectivo para el resto de materiales que conforman un sitio web, como imágenes, música, video, documentos de Word, archivos PDF, etc.

Entonces, ¿qué sucede exactamente?

Cuando escribes una dirección web en el navegador (usando nuestra analogía para ir a la tienda):

El navegador va al servidor DNS y encuentra la dirección real del servidor donde el sitio web vive (encontrar la dirección de la tienda).
El navegador envía un mensaje de petición HTTP al servidor, pidiéndole que envíe una copia de la página web para el cliente (ir a la tienda y hacer un pedido). Este mensaje y todos los datos enviados entre el cliente y el servidor, se envían a través de tu conexión a Internet usando TCP/IP.
Siempre que el servidor apruebe la solicitud del cliente, el servidor enviará al cliente un mensaje «200 OK», que significa, «¡por supuesto que puedes ver ese sitio web! Aquí está.», y comenzará a enviar los archivos de la página web al navegador como una serie de pequeños trozos llamados paquetes de datos (la tienda te entrega tus productos y los llevas de regreso a casa).
El navegador reúne los pequeños trozos, forma un sitio web completo y te lo muestra (llegas a casa con tus nuevas compras).

Página web

La página web es la unidad informativa de la web, es decir, son documentos compuestos por textos, imágenes, audios o videos a los que se puede acceder a través de la word wilde web o www empleando un navegador.

Como ya se mencionó, la información de las páginas web está generalmente en formato HTML. Asimismo, contienen enlaces que las relacionan con otras páginas cuyos contenidos se relacionan.

Hipertexto

El hipertexto, por otro lado, es un conjunto estructurado de textos, gráficos, imágenes o sonidos unidos entre sí por enlaces o vínculos (links) y conexiones lógicas.

Actualmente, el hipertexto está siendo reemplazado por la hipermedia, que también es un conjunto estructurado de diversos medios (texto, imagen, sonido), pero usados conjunta y simultáneamente (multimedia) y unidos entre sí por enlaces y conexiones lógicas para la transmisión de información.