8/7/2024

FUNDAMENTOS DE LA WEB – FULLSTACK – ANATOMÍA DE UNA WEB

CREACION DE LA WEB

En la organización europea para la investigación nuclear en suiza, Tim Berns Lee necesitaba
tener una comunicación entre todos los científicos que estaban trabajando y creó lo que sería
la triple w. WORLD WIDE WEB.

WWW tiene varios elementos claves:

HTML: hypertext markup language (lenguaje de marcas de hipertexto), utilizado para crear la
estructura de la web

HTTP: Hypertext transfer protocol, utilizado para las transferencias de información a través de
internet.

URL: Uniform Resource Locator, que se utilizan para identificar y acceder a ese recurso web.

ARPANET: red de computadoras creada por el Departamento de Defensa de los Estados Unidos
en la década de 1969. Precursor de internet. Se trabajaban los protocolos http de los cuales
podían enviar en las url toda la información que ingresaban en los html.

LINEA DE TIEMPO CON LOS AVANCES MÁS SOBRESALIENTES DE LA WEB

1969 nace ARPANET, la precursora de internet.

1989 Tim Berners Lee inventa la World Wide Web.

1993 se crea el primer navegador web, MOSAIC.

Mosaic desarrollado por Marc Andreessen y otros en el National Center for Supercomputing
Applications (NCSA). Un año después se funda Netscape Communications Corporation y
lanzaron Netscape Navigator. Esta fue la empresa que creó el lenguaje de programación.

Los primeros navegadores eran poco estéticos, en los 90 surgieron muchas paginas web que
eran solo de uso comercial, y mostraban información, no tenían ninguna interactividad, ni
registro de usuario, ni videos.

1996 nace GOOGLE.

1997 explosión de las puntocom.

A finales de los 90 un auge de las empresas por el punto com. Con eso empezaron a tener un
mayor alcance las URL a nivel mundial a través de internet, al principio se utilizaba mucho para
empresas de forma comercial y solo info estatica. Con esto empezó a revolucionarse la
comunicación global y de forma más instantánea.

Después surgieron ESTÁNDARES en el cual, Tim Berners lee formó parte de lo que hoy se
conoce como la doble v tres c, EL CONSORCIO DE LA TRIPLE DOBLE V.
2004 nace FACEBOOK.

2007 nace el IPHONE.

2015 nace ANDROID.

2020 la web móvil supera a la web de escritorio.

WEB DEL PASADO (1.0)

- paginas web estáticas

- diseño simple y poco atractivo.
- poca interactividad.
- conexión a internet lenta.
- acceso limitado a la información.
- era solo html básico para estructurar el contenido.

A partir del 2005 WEB DEL PRESENTE (2.0)

- páginas web dinámicas e interactivas.

- diseño responsive para diferentes dispositivos.
- contenido multimedia de alta calidad.
- conexión a internet rápida y accesible.
- acceso ilimitado a la información.

WEB DEL FUTURO (3.0)

- realidad virtual y aumentada

- inteligencia artificial y machine learning.
- interfaz hombre-maquina mas natural.
- Web 3.0:descentralizada y segura.

ESTANDARES DE LA WEB, consorcio del triple w. consorcio internacional que genera

estandares que aseguran crecimiento y desarrollo de las paginas web. Todo lo que
construimos a través del html, javascript todo esta regulado por este consorcio del triple
World Wide Web Consorcio.

PROTOCOLOS
https://www.google.com/ (todo esto compone la URL)

QUE ES UN PROTOCOLO: conjunto de reglas que permiten la comunicación entre dispositivos

en una red.

Los http son procotolos del navegador, de la URL

El más básico: HTTP, Hypertext transfer protocol. Función: transferir datos entre sitios web
pero no guardan ningún tipo de información sobre las transacciones. Funciona cuando
ingresamos a una web, el navegador envía una solicitud a un servidor que se aloja en algún
lado y el servidor les responde con la pagina web.

HTTPS, exactamente lo misma función, con diferencia de que es MÁS SEGURO.

Si en una pagina que ingresemos no tiene esta S, nos va a aparecer que la conexión no es
segura, y si es asi, es recomendable no acceder ningún dato.

Si queremos transferir un archivo, el cual se hace a través de otro tipo de protocolo, NO a

través de la URL, por ej el EMAIL, existe un protocolo que se llama FTP FILE TRANSFER
PROTOCOLO, protocolo de transferencia de archivos, con el cual enviamos archivos a un
servidor, o subimos archivos a una pagina (fotos a mercado libre xej)

SMTP, simple mail transfer protocol, protocolo que se utiliza para enviar correos electrónicos.

TCPIP TRANSMISSION CONTROL PROTOCOL / INTERNET PROTOCOL. Transmisión de datos a

través de internet. TCP: garantiza la entrega de los datos en el orden que se hayan enviado, sin
errores de entrega. IP: el que se encarga de encaminar los paquetes de datos, que nosotros
enviamos a través de la red. Es un protocolo del navegador.

DENOMINACIONES TÉCNICAS

DOMINIOS Y DNS

DOMINIO: nombre del sitio web.

El dominio de esta url sería: Google.com.ar

www : subdominio

Google: nombre del dominio

.com: dominio del nivel superior

DOMINIO DE NIVEL SUPERIOR (TOP LEVEL DOMINED):

.org .net .edu .gob .com

Dominios de nivel superior genéricos (usualmente vienen gratis con la compra de algun
dominio): .store .tech .online

COUNTRY CODE top level domined : .ar

El dominio se paga anual. Y aparte se tiene que pagar un hosting.

Hay gente que se dedica a evaluar sitios web y su seguridad (CYBER SEGURIDAD), pero cuando
compramos el hosting donde vamos a alojar nuestra pag y compramos el dominio, tenemos la
opción de comprar un certificado SSL, que es el que nos da la seguridad a nuestra página, y nos
habilita esa S en el https. Un hosting es un espacio en una computadora donde vamos a
guardar nuestra página para que se mantenga online todo el tiempo.

Si estoy en Argentina puedo comprar un dominio que en vez de que sea .ar, sea de EEUU u
otro país, pero tengo que alojar mi página en un ghosting de ese país.

Motor de búsqueda SEO: siempre aparecerán primeros las paginas que tengan .com en los
buscadores.

DNS domain name system (nombre del sistema del dominio): cuando ingresamos a la URL en
el navegador, el DNS resuelve el nombre del dominio en una direccion IP para localizarla en el
servidor correspondiente.

DIRECCION IP: identificador único para un dispositivo en la red.

Hay varios versiones de dirección IP, por ejemplo: 100.0.0.2. (versión 4)

Versión 6 : 2001:0db8:85ª3:0000:0000:Ba2e:0370:7334 (dir. Ip de nuestra computadora x ej)

QUE ES UN DESARROLLADOR FULLSTACK

Es un desarrollador todo terreno que tiene el conocimiento y la experiencia necesarias para
crear aplicaciones web utilizando un stack de tecnologías.

QUE ES UN STACK DE TECNOLOGIAS

Un grupo de herramientas tecnológicas que nos permite desarrollar, por ejemplo, una
aplicación web.

¿Cual es el stack que vamos a aprender? MERN

MONGO EXPRESS RIACK Y NOW

Estas tecnologías son muy populares y se encuentra mucha info en internet.

Con ellas vamos a poder crear aplicaciones web completas que tienen tanto lo visual (lo que ve
el usuario), como lo que no ve.

EN ESTE STACK:

FRONTEND trabaja con el lenguaje de programación JAVASCRIPT

BACKEND trabaja con el lenguaje de programación JAVASCRIPT

RAMAS DEL FULLSTACK

FRONTEND parte que interactúa con el usuario.

BACKEND parte que se conecta con la base de datos y el servidor.

(Se pide una información al servidor en la que este lo busca y te devuelve una respuesta)

TECNOLOGIAS FRONTEND

HTML lenguaje de marcas de hipertexto, con html vamos a crear la estructura de nuestra
aplicación (estética)

CSS hojas de estilo en cascada, crear los estilos de nuestras aplicaciones. Si quiero que un
botón tenga cierto color, o que una foto sea de cierto tamaño, lo haremos con CSS (estética).

JAVASCRIPT lenguaje de programación interpretado,la funcionalidad de nuestra

pagina/aplicaicon la vamos a dar con javascript

FRAMEWORK herramientas para optimizar el desarrollo. BUSTRAP framework de css. Es como

una caja de herramientas completa, si necesitamos un “martillo” no hay que costruirlo, ya está
en esta caja de herramientas. Esto nos va a dar herramientas para no tener que hacer todo
desde 0 con CSS.

También veremos una librería llamada RIACK, como un KIT DE HERRAMIENTAS QUE NOS
permite resolver un problema. RIACK nos va a permitir trabajar con javascript, que nuestras
aplicaciones sean más dinámicas y que podamos hacer cambios en tiempo real y que estos
cambios se vean.
BACKEND capa de acceso a datos de un software o cualquier dispositivo, que no es accesible
por el usuario común, además contiene la lógica de la aplicación que maneja dichos datos

Tenemos que aprender tecnologías para manejar javascript del lado del backend por ejemplo,
NOW que es un motor de ejecución. TambieN EXPRESS que es una librería de NOW en el que
vamos a aprender a levantar nuestro propio servidor y crearlo .

Si yo tengo ya un servidor, ¿pero donde guardo la información? Para eso necesito una base de
datos, para esa base de datos vamos a utilizar MONGO DB.

Dos tipos de bases de datos: BASE DE DATOS RELACIONALES, que utilizan lenguaje de
consulta estructurado para la manipulación de datos, ósea por filas, columnas, registros que se
almacenan en tablas.

BASE DE DATOS MONGO, no relacional: esquema dinamico, distinta estructura, no se requiere

en filas, es mucho más flexible y no tan rigida.

ANATOMÍA DE UNA PAGINA WEB. CONTAINER(body)

LOGO HEADER

NAVIGATION

MAIN CONTENT SIDEBAR

FOOTER

SECCIONES que nosotros programamos. El usuario va a ver el logo, una barra de navegación, el
inicio. El contenido principal (main content), que puede ser un texto que hable del servicio,
fotos. Puede tener un sidebar que generalmente hay publicidades, la columna de la derecha. Y
el footer que es el pied e la pagina, donde tiene información de contacto(email, redes
sociales).
El container es tooodo el contenedor. El header es la cabeza de nuestra aplicación,
encabezado, donde tendremos el logo de la empresa el menú.

Puede llegar a haber dos sidebar, de un lado “filtros”, como en paginas de mercado libre o
adidas, por ejemplo, zapatillas de mujer, de hombre etc, y del otro lado pueden ser publicidad.

Las redes sociales saben estar en la navegación y también en el footer.

El GIRO es la pantalla principal cuando apenas ingresamos a la página, puede ser video,
información.

Al CONTEINER se lo conoce como body, cuerpo de tu página.

Scrollear es usar la ruedita del mouse.