{"id":11423,"date":"2022-03-22T11:54:00","date_gmt":"2022-03-22T11:54:00","guid":{"rendered":"https:\/\/wcanvas.com\/?post_type=blogs&p=11423"},"modified":"2024-12-23T21:58:32","modified_gmt":"2024-12-23T21:58:32","slug":"tecnologia-sitio-web","status":"publish","type":"blogs","link":"https:\/\/wcanvas.com\/es\/blog\/tecnologia-sitio-web\/","title":{"rendered":"\u00bfQu\u00e9 tecnolog\u00eda utiliza un sitio web?"},"content":{"rendered":"\n
Un sitio web es un programa de software que corre en una computadora. Est\u00e1 conectado las 24 horas del d\u00eda a internet, y otros usuarios pueden acceder a \u00e9l escribiendo una URL espec\u00edfica en su navegador. Por ejemplo, cuando escrib\u00eds google.com, te est\u00e1s conectando a otra computadora e interactuando con ella. Pod\u00e9s ver informaci\u00f3n, ingresar datos y recuperar material espec\u00edfico.<\/p>\n\n\n\n
No necesit\u00e1s entender t\u00e9cnicamente c\u00f3mo funcionan los sitios web para usarlos. Pero si alguna vez te preguntaste qu\u00e9 hay detr\u00e1s de escena que los hace funcionar, te conviene seguir leyendo \ud83d\ude42 Diferentes tipos de sitios web<\/p>\n\n\n\n
Internet est\u00e1 lleno de millones de sitios web que cubren diferentes necesidades. El front end se ejecuta en tu navegador local. Es todo lo que ves en un sitio web: todo lo que aparece en tu pantalla.<\/p>\n\n\n\n
El tipo m\u00e1s b\u00e1sico de front-end que pod\u00e9s tener es un archivo HTML simple. Este archivo define la estructura del sitio web; determina qu\u00e9 es un t\u00edtulo, qu\u00e9 es un p\u00e1rrafo y qu\u00e9 es una imagen. A trav\u00e9s de diferentes etiquetas, pod\u00e9s dictar c\u00f3mo se categoriza cada contenido, y es mediante estas etiquetas que los motores de b\u00fasqueda como Google leen el contenido del sitio web para entenderlo y priorizarlo correctamente.<\/p>\n\n\n\n
Diferentes tipos de sitios web<\/h2>\n\n\n\n
Internet est\u00e1 lleno de millones de sitios web que cubren diferentes necesidades.<\/p>\n\n\n\n
Sitios Web Est\u00e1ticos<\/h3>\n\n\n\n
Los m\u00e1s b\u00e1sicos son sitios informativos con contenido est\u00e1tico. Son sitios web con los que no pod\u00e9s interactuar; solo le\u00e9s informaci\u00f3n y naveg\u00e1s por diferentes p\u00e1ginas.<\/p>\n\n\n\n
Sitios web Interactivos<\/h3>\n\n\n\n
Un sitio web interactivo, por otro lado, es aquel en el que el usuario puede ingresar y recuperar datos din\u00e1micamente. Por ejemplo, Facebook, Amazon, Twitter y la mayor\u00eda de los sitios de redes sociales. Pod\u00e9s crear una cuenta, ingresar tus \u201cpublicaciones\u201d e interactuar con otros usuarios.<\/p>\n\n\n\n
Anatom\u00eda de un sitio web<\/h2>\n\n\n\n<\/figure>\n\n\n\n
Front-End: programaci\u00f3n del lado del cliente<\/h3>\n\n\n\n
El front end se ejecuta en tu navegador local. Es todo lo que ves en un sitio web: todo lo que aparece en tu pantalla. El tipo m\u00e1s b\u00e1sico de front-end que pod\u00e9s tener es un archivo HTML simple. Este archivo define la estructura del sitio web; determina qu\u00e9 es un t\u00edtulo, qu\u00e9 es un p\u00e1rrafo y qu\u00e9 es una imagen. A trav\u00e9s de diferentes etiquetas, pod\u00e9s dictar c\u00f3mo se categoriza cada contenido, y es mediante estas etiquetas que los motores de b\u00fasqueda como Google leen el contenido del sitio web para entenderlo y priorizarlo correctamente.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Un sitio web de HTML simple se ver\u00eda horrible, ser\u00eda solo texto sin estilos. Ah\u00ed es donde entra en juego el CSS (Hoja de Estilos en Cascada). CSS es lo que usamos para agregar estilos al HTML: determina la fuente y el tama\u00f1o de los t\u00edtulos y textos, define el color de fondo, y organiza el contenido en la p\u00e1gina para que se vea est\u00e9tico.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Usando HTML y CSS pod\u00e9s crear un sitio web est\u00e1tico con contenido fijo. Pero la mayor\u00eda de los sitios web hoy en d\u00eda son din\u00e1micos y para eso necesitan un lenguaje de programaci\u00f3n adicional: JavaScript.<\/p>\n\n\n\n
Si quer\u00e9s ir un paso m\u00e1s all\u00e1 y crear un sitio web din\u00e1mico, pod\u00e9s usar JavaScript (no confundir con JAVA) para agregar funcionalidades extra y permitir que los visitantes interact\u00faen con el sitio. Con JavaScript, un sitio puede ser mejorado con micro-animaciones cuando se hace clic en un bot\u00f3n, pero tambi\u00e9n permite a los usuarios enviar formularios o crear perfiles y chatear con otros (con la ayuda del back-end o una API, m\u00e1s detalles sobre esto m\u00e1s adelante).<\/p>\n\n\n\n
Actualmente, hay un mont\u00f3n de bibliotecas y frameworks de JavaScript: ReactJS, Angular, VueJS, y muchos m\u00e1s. Todos estos se basan en JavaScript y facilitan la vida a los desarrolladores al crear aplicaciones y sitios web front-end.<\/p>\n\n\n\n
Back-end: programaci\u00f3n del lado del servidor<\/h3>\n\n\n\n
El back end, por el contrario, es el software que corre en el servidor (una computadora conectada a internet de forma permanente). Combinado con el front end, juntos conforman el sitio web.<\/p>\n\n\n\n
Por ejemplo, cada vez que un usuario crea una nueva publicaci\u00f3n, los programas del back-end reciben esta solicitud del front end y ejecutan una funci\u00f3n para conectarse a la base de datos y guardar esta nueva publicaci\u00f3n en ella. <\/p>\n\n\n\n
Sin el back end para ejecutar esta funci\u00f3n, la publicaci\u00f3n solo vivir\u00eda en el navegador local del usuario y se perder\u00eda cada vez que se recarga la p\u00e1gina.\u00a0<\/p>\n\n\n\n
Todo esto sucede en un programa que corre en el servidor. Podr\u00eda ser JavaScript -Node JS est\u00e1 particularmente en tendencia ahora- pero hay muchos otros lenguajes, como PHP, C#, Python o Ruby.<\/p>\n\n\n\n
Base de datos: almacenamiento de datos<\/h3>\n\n\n\n
El back end puede ejecutar funciones y hacer muchas cosas, pero sin una base de datos para almacenar la informaci\u00f3n, se quedar\u00eda corto.\u00a0<\/p>\n\n\n\n
La base de datos es donde se almacena toda la informaci\u00f3n. Para hacer una analog\u00eda, pod\u00e9s pensar en una base de datos como una enorme hoja de c\u00e1lculo donde almacen\u00e1s diferentes tipos de informaci\u00f3n: datos de inicio de sesi\u00f3n, usuarios y contrase\u00f1as, publicaciones de blogs o productos de un mercado en l\u00ednea.<\/p>\n\n\n\n
Entonces, cuando inici\u00e1s sesi\u00f3n o busc\u00e1s informaci\u00f3n sobre un usuario o producto, el back end consigue esos datos de la base de datos y los traslada al front end, que muestra esa informaci\u00f3n al usuario.<\/p>\n\n\n\n
Algunas de las bases de datos m\u00e1s comunes son MySQL, MongoDB y SQL, y tambi\u00e9n hay enormes bases de datos administradas por Oracle y Microsoft.<\/p>\n\n\n\n
Hosting: donde vive el sitio web<\/h3>\n\n\n\n
Como se mencion\u00f3 antes, un sitio web es un programa de software que vive en una computadora que est\u00e1 permanentemente conectada a internet. Si el servidor se apaga o pierde la conexi\u00f3n a internet, el sitio web estar\u00e1 fuera de servicio. <\/p>\n\n\n\n
En teor\u00eda, pod\u00e9s ejecutar un sitio web usando tu computadora de casa. Necesitar\u00e1s configurar diferentes servicios y asegurarte de que est\u00e9 ininterrumpidamente conectada a internet y nunca se apague o quede congelada.<\/p>\n\n\n\n
Es una tarea complicada y que consume mucho tiempo, por suerte los proveedores de hosting ofrecen servicios que facilitan este proceso. Los proveedores de servicios de hosting tienen enormes almacenes (centros de datos) con toneladas de racks de computadoras que est\u00e1n invariable y permanentemente conectadas a internet. Alquilan estas computadoras a sus clientes, ahorr\u00e1ndoles problemas de energ\u00eda, actualizaciones, conexiones a internet y similares.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Pod\u00e9s alquilar una parte de una computadora por tan solo USD 3 al mes y ejecutar un sitio web est\u00e1tico sin demasiados problemas. Sin embargo, para sitios web interactivos con millones de usuarios, el precio puede escalar r\u00e1pidamente y llegar a miles de d\u00f3lares en poco tiempo. Pero si necesit\u00e1s pagar mucho por el hosting probablemente est\u00e9s recibiendo mucho tr\u00e1fico, y no deber\u00edas tener problema en encontrar la manera de monetizar eso ;).<\/p>\n\n\n\n
Dependiendo de tus necesidades, ten\u00e9s diferentes proveedores de hosting. Var\u00edan desde los m\u00e1s f\u00e1ciles de configurar y usar (GoDaddy, BlueHost, HostGator) hasta los m\u00e1s flexibles pero dif\u00edciles de usar, como Amazon Web Services (AWS), Google Cloud y Microsoft Azure.<\/p>\n\n\n\n
\u00bfQu\u00e9 otros stacks tecnol\u00f3gicos has escuchado?<\/h2>\n\n\n\n
Esperamos que esta gu\u00eda para principiantes te ayude a comenzar a entender c\u00f3mo funcionan los sitios web. As\u00ed, la pr\u00f3xima vez que busques a un amigo en Facebook o un video musical en YouTube, recuerdes las diferentes partes que hacen que tu solicitud se convierta m\u00e1gicamente en el perfil de tu amigo o en ese incre\u00edble video musical.<\/p>\n\n\n\n
Hay muchos otros componentes que explican el funcionamiento de los sitios web. \u00a1Dejanos saber si has escuchado de otros stacks tecnol\u00f3gicos que te gustar\u00eda que expliquemos en nuestro pr\u00f3ximo post de blog!<\/p>\n\n\n\n
![\"Codificaci\u00f3n\"](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/10\/image.jpg\" "\\"Codificaci\u00f3n\\"")
<\/figure>\n\n\n\n![\"C\u00f3digo\"](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/10\/image1.jpg\" "\\"C\u00f3digo\\"")
<\/figure>\n\n\n\n![\"servidor\"](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/Imagen-5-1-1024x536-1.jpg\")
<\/figure>\n\n\n\n