6

Todo el contenido del curso resumido con los apuntes que he tomado.

Al principio necesitaban poder hacer cálculos grandes y por ello buscaron la forma de crear un computadora, en los 40’s aparecieron las primeras máquinas programables las cuales las programaban mujeres.

Tarjetas perforadas

Ayudaban a guardar información como cálculos y censos, al inicio una persona debía hacer los huecos de las tarjetas y cada tarjeta era un código, los programas tenían muchas tarjetas.

Machine code

Primer lenguaje de programación con unos y ceros aunque era muy complejo y llevaba mucho tiempo hacer un programa en este lenguaje. Viendo este problema decidieron crear los lenguajes de programación, que de los más conocidos creados primero están C y C++, estos lenguajes tenían un compilador para que la máquina los entendiera.

Inputs y outputs

Entrada (Input) ⇒ Proceso ⇒ Salida (output)

Entradas: Teclado, micrófono, cámara web, mouse, etc.

Salidas: Monitor, parlantes, proyector, etc.

Proceso: Microprocesador.

Cálculos

Lo que la computadora hace son muchos cálculos y la ventaja es que los hace muy rápido.

Código Binario

Es un sistema de conteo como la notación decimal (0, 1, 2, 3, 4, 5, 6, 7, 8, 9), unidades, decenas, centenas, etc.

La computadora solo entiende en 0 y 1, el sistema binario funciona de la siguiente manera:

128, 64, 32, 16, 8, 4, 2, 1: Esta es la forma en que avanzan los número binarios.
1= 00000001
2= 00000010
3= 00000011
20= 00010100
255=11111111
70 = 01000110
Cada cero es el espacio de un número el primero de la derecha es el 1, si necesitamos el 1 para representar un número entonces colocamos 1 a la derecha, si necesitamos el 16 colocamos 1 en el 5 cero y así sucesivamente.

Bit & bytes

Un byte son 8 ceros y unos.
Un bit es un solo cero o uno.
Los transistores son los que permiten que las computadores entiendan los bits y bytes, los transistores tienen dos entradas on u off, true y false o 1 y 0.

¿Cómo representar letras, colores, música, etc?

Crearon el código ASCII, cada letra o caracter representa un número

¡Hola! = 161 72 111 108 97 33 = código ASCII

1010011 = 161
01001000 = 72
01101111 = 111 ⇒ Código Binario de 6 bytes o 48 bits
01101100 = 108
01100001 = 97
00100001 = 33

El código UNICODE tiene todos los alfabetos, números, caracteres y hasta emojis.

Colores con bits y bytes

1 pixel = 3 subpixeles rgb, cada color viene de 0 a 255.

Cada numero se convierte a binario y sí se forma el color de un pixel

R = 255 = 11111111
G = 87 = 1010111
B = 51 = 00110001

¿De dónde viene el internet?

El internet viene directamente de los cables los cuales están directamente en el mar.

Internet es una abreviación de Internetworking, y se creó en los años 70’s para referirse a los cables físicos y las computadoras que se conectan entre sí.

Nció de un proyecto de investigación academico llamado Advance Research Projects Agency NETwork (ARPANET), eran máquinas muy caras que utilizaron para conectar algunas universidades para compartir información. El primer mensaje que quisieron enviar fué “login” pero solo llegó “lo”. Por medio de los cables envían los códigos binarios para pasar la información.

Sacaron unos protocolos de información para que las personas los pudieran seguir y no se desordenara todo.

Protocolos de internet

  • TCO / IP: Transmission Control Protocol / Internet Protocol y hasta la fecha se siguen utilizan porque ayudan a generar peticiones

ARPANET estaba subsidiado por el gobierno y llegó un momento en el que decidieron abrirlo para el que quisiera comprar dicho servicio, a estos servicios de internet se les llama ISP (Internet Service Provider). El IP permite saber la dirección para poder hacer la comunicación a internet.

DNS (Domain Name System): Es el nombre de un IP, para poder recordarlo de una mejor manera. Los DNS al ingresar el nombre busca el IP con este nombre y lanza el IP address.

La historia de la web

El primer desarrollador web fue Tim Berners-Lee, creó la manera de ligar todo para globalizarla y linkearla con hipervínculos de forma gratuita todo esto fue generado por la computadora de next (empresa de Steve Jobs). ÉL escribió las tres tecnologías fundamentales de la web:

  • HTML: Hyper Text Markup Language. El lenguaje de marcado (formato) para la web.
  • URL: Uniform Resource Locator. Un tipo de “dirección” que es única y que se utiliza para identificar cada recurso en la web.
  • HTTP: Hypertext Transfer Protocol. Permite la recuperación de recursos vinculados de toda la web.

La primer página web: http://info.cern.ch/hypertext/WWW/TheProject.html

También construyó el primero servidor web y el primer navegador llamado World Wide Web browser.

W3C

World Wide Web Consortium: trabajan los estándares que se trabajan en la web, los avances y las nuevas tecnologías.

Navegadores Web

El primer navegador con gráficos y textos fue Mosaic. Gracias a Netscape salieron los navegadores y el lenguaje de programación JavaScript. Google Chrome entendía JavaScript y permite que la interacción y velocidad sea mejor.

Protocolo HTTP

Son reglas de comunicación en la web y también trabaja el IP. Existe el HTTP Request y HTTP Response. Existen los HTTP Methods:

Al pedir ingresar a un sitio estamos utilizando un GET, al enviar la información para un login estamos utilizando un POST, si vas a cambiar un estado en twitter es un PUT, si borras un fotografía es un DELETE.

HTTPS: Hypertext Transfer Protocol Secure
Genera una seguridad para que la conexión sea segura ya que la conexión va encriptada.

Estándares web

En la guerra de los navegadores cada navegador implementaba la tecnología que quería cada uno por su lado y esto generaba un problema al crear una página web porque tocaba hacer una página para cada navegador. Por lo tanto la W3C creó los estándares para que los navegadores los siguieran y fuera más fácil crear una página web.

Estos estándares son: HTML5, CSS3, JS:

Nuevo estándar llamado WebAssembly: Es un compilador.

La web moderna

Más de 4000 millones de dispositivos móviles conectados a Internet lo cual es más de la mitad de la humanidad. Antes las computadoras eran máquinas muy grandes y cada vez se están haciendo más pequeñas por lo tanto los sitios webs se deben adaptar a móviles.

Critical Rendering Path

DOM

Primero nosotros generamos un request a través de HTTP y este nos genera una respuesta (response) con los assets y realiza un Critical Rendering Path.

El DOM (Document Object Model) es un árbol que se genera con toda la información que viene en el proyecto y se genera un nodo similar a este:

Gracias al DOM se le puede generar interacción al HTML.

CSSOM (CSS Object Model)

Es muy similar al DOM pero este se encarga de todos los estilos y genera otro árbol con los estilos pero ligado al DOM

Render tree

Es la combinación entre el DOM y El CSSOM con esto el navegador puede saber qué puede hacer con los archivos, un ejemplo de esto es:

Y la computadora realiza todos los cálculos para poder generar los colores, letras, imágenes, etc. de la manera como se vio anteriormente.

Layout

Con el render tree el navegador crear el layout o maquetación de la página web, lo cual es muy similar a esto:

Pero todavía no se le coloca el contenido.

Paint

Cada elemento de HTML es como una caja y en esta etapa se pintan todas las cajas con el contenido necesario. Cuando una página se demora mucho en cargar en ocasiones es porque los desarrolladores no optimizaron bien la página.

JavaScript engine

Por buenas prácticas el JavaScript debe ir al final del documento HTML. Hay un motor de JavaScript que convierte el código de JavaScript en código de máquina para que el navegador sepa qué necesitamos que haga, el navegador es el intermediario de esta conversión. Y funciona de la siguiente manera:

En Platzi hay un curso de JavaScript engine que explica este ciclo de una manera más detallada.

Estos son mis apuntes que tomé durante el curso, incluyendo cosas que decía el profesor y mis persepciones. Si aquí no se ven bien las imágenes o los títulos puedes ir al siguiente link para ver mis notas en notion: https://www.notion.so/carlos1gomez/Introducci-n-a-la-Web-Historia-y-Funcionamiento-de-Internet-0835bd1b1eaa4049a77b4d32d41eb37d

Escribe tu comentario
+ 2