[MÚSICA DE FONDO]
DAVID MALAN: Muy bien, esto es CS50 y vamos a iniciar
la lección 6 y como recordarán, hoy
comenzaremos la transición de este mundo de bajo nivel en C
y la programación de línea de comandos hacia un área que seguramente
les será un poco más conocida, el de la web, al igual que
todas las ideas que exploramos hasta ahora como funciones, bucles,
condiciones y otras más, que seguirán siendo relevantes.
Solo que utilizaremos una sintaxis ligeramente diferente y la interfaz
de usuario o UI será nuestro navegador, en vez
de la ventana de terminal en blanco y negro con una sola línea de texto,
pero, ¿cómo llegamos aquí?
Bueno, recordemos que hace poco vimos las estructuras
y que lo bueno de las estructuras en C, era que teníamos la habilidad
para personalizar nuestros datos y agrupar juntos
los datos relacionados, lo cual se volvió bastante poderoso
cuando llegó la hora de que foresics manipulara los archivos de mapa de bits
o los JPEG, y aunque esta estructura es mucho más complicada
que la de los estudiantes, a fin de cuentas
solo son datos individuales que, de algún modo, se relacionan entre sí
y al ponerlos en una estructura podemos manipularlos libremente,
así como copiarlos o guardarlos todos juntos como también hicimos.
Pero hace poco, presentamos una estructura un poco más elegante,
que en esencia es la misma idea.
Tiene una o más cosas adentro,
pero una de las cosas más poderosas
tenía esta estrella o asterisco, el cual nos dio un puntero o una ubicación,
pero lo que fue tan poderoso acerca de esta idea y de este símbolo
aparentemente simples, es que podemos hilar juntos en la memoria
de nuestra computadora cualquier tipo de estructuras que queramos.
No tienen que ser solo una entidad,
de alguna manera pueden vincularse con otras, y nosotros
también podemos mantener unidas estas estructuras, lo cual, desde luego,
fue una mejora simple en los inicios de nuestras estructuras de datos,
un arreglo o una lista, pero tan pronto
como tenemos punteros comenzamos a conectar las cosas
hasta que obtenemos algo como esto y ahora con la implementación
del diccionario podríamos explorar una lista vinculada, una tabla hash,
o intentarlo con algunas variaciones de por medio.
Por último, teníamos una imagen, que representaba
la memoria de nuestra computadora, vista desde un modo más descriptivo
y esto solo es relevante siempre que nuestra computadora utilice
de manera diferente, los distintos fragmentos de la memoria.
Todas nuestras llamadas a las funciones al final utilizan el stack.
Todos los usuarios de malloc y sus primos
al final utilizan el heap y luego, por supuesto, esto de aquí arriba
y ¿cuál fue el segmento de texto en el que no hicimos mucho énfasis?
¿De qué se trata el segmento de texto?
Texto, eres un voluntario.
Sí, ¿de qué trata el segmento de texto?
PÚBLICO: ¿son archivos de datos?
DAVID: Son archivos de datos, sí.
Específicamente, los ceros y los unos que conforman el programa.
Cuando compilamos un código fuente, como en hello.c, con ceros y unos,
estos, al final, se almacenan en este lugar de la memoria
mientras el programa se ejecuta,
a largo plazo se almacenarán en el disco o en el disco duro, o lo que haya dentro
de la computadora o el servidor, para preservar los archivos incluso cuando
se estos se apagan o nos alejamos del teclado,
pero en cuanto hagamos doble clic en un programa, la Mac o la PC,
ejecutemos ./ hello o algún comando como ese,
esos mismos ceros y unos se cargan en el RAM de la computadora,
la imagen que mostramos y ahí es donde viven mientras están en uso
por nuestra Mac, PC o el servidor que usemos,
pero hasta ahora, hemos ejecutado todos estos programas con algo como
./ hello o algún comando similar y los ejecutamos en la tan conocida
ventana de terminal.
Pero sin duda, estamos más familiarizados
con las aplicaciones gráficas de nuestros teléfonos modernos
y cada vez que visitamos un navegador web en el teléfono,
la computadora de escritorio o la laptop, seguimos interactuando con un programa,
lo que sucede es que el programa no solo se ejecuta en nuestra Mac o PC.
Nuestro navegador es como Chrome, Edge, Firefox, Safari
o el que sea que utilicemos.
Eso se ejecuta en nuestra Mac o PC, pero
nos comunicamos con un programa que está en otro lugar,
en alguna otra parte del Internet y esos programas se llaman servidores web.
Un servidor web es una parte del software, que alguna persona o personas escribieron
y su propósito en la vida es soportar las páginas web.
Cuando solicitamos la página de inicio de Facebook,
hay un servidor allí, un programa que alguien escribió
y que básicamente genera los ceros y unos que conforman la página de Facebook,
aunque esos ceros y unos no se escriben así
por los ingenieros de Facebook.
En realidad su escritura es más parecida a la del inglés,
un poco más familiar y ni siquiera es un código de programación como tal.
Es lo que se llama lenguaje de marcado, de eso y más hablaremos más adelante.
Ya pasamos de compilar nuestro código y ejecutarlo
en algo como esto, a hacerlo en un entorno basado en la web,
pero cuando ejecutamos nuestros programas en el IDE de CS50 aquí bajo,
en realidad usamos otra pieza del software
que llena la pantalla, el IDE de CS50 también conocido como
Cloud9, un programa que básicamente se ejecuta en algún lugar de la nube.
Haremos esta distinción y a través de ejemplos
la distinción entre estos diferentes tipos de software
comenzará a tener sentido, pero ¿dónde se ejecuta algo como el IDE de CS50?
¿Dónde se ejecuta Facebook. com?
¿Dónde se ejecuta Google.com?
Bueno, en 1998 Google.com se ejecutaba en esto.
Larry y Sergey fueron los creadores de la primera implementación de Google
y al parecer, de su primer estante de servidores.
Los servidores por lo general se almacenan en un estante como este,
por convención miden 19 pulgadas de ancho
y sirve para apilar las computadoras una sobre otra, sobre otra, sobre otra,
pero las cosas en Google eran muy rudimentarias en ese entonces
y ni siquiera había cajas de plástico o metal
alrededor de muchas de sus computadoras.
Al parecer, trataban de minimizar el enfriamiento, los costos y de amontonar
tanto hardware en ese espacio como pudieron,
por lo que vemos muchos cables y hardware
que sobresalen y esto ahora está en una exhibición en el oeste.
Por supuesto, mejoraron rápidamente, en solo una década o dos y este
es uno de los centros de datos de Facebook, que opera bajo la misma idea,
pero con servidores más elegantes, más bonitos y mucho mejor iluminados,
pero que al final del día, desempeñan exactamente el mismo papel.
Hay multitud de servidores en todo el mundo que solo están
sentados allí, esperando por nosotros en el Internet
para que solicitemos una página de inicio, un correo electrónico,
o cualquier otro tipo de información, para termine
enviándose desde el servidor al cliente.
Si alguna vez pensamos en las palabras, servidor y clientes,
la cual tal vez sea la menos utilizada de las dos,
pero la relación servidor-cliente, es como cuando vamos a un restaurante
y le pedimos al mesero o a la mesera algo de comer,
él o ella nos trae algo de vuelta y por lo tanto nos sirve,
la relación entre el cliente y la web es más o menos lo mismo.
Nosotros somos los clientes,
nuestros navegadores son los clientes y allá afuera
existen servidores como estos, que ofrecen contenido e información,
como Facebook.
Consideremos el modo en que todos estos datos llegan a nosotros,
actualmente, si deseamos visitar Facebook.com en nuestra laptop,
computadora de escritorio o teléfono sin usar la aplicación, seguramente solo
escribiremos Facebook.com y presionaremos Enter.
Si somos un mayores o literalmente viejos,
puede que escribamos todo así www.Facebook.com.
Ambas funcionan y existen razones técnicas relacionadas con el tema
del que hablamos hoy, pero ambos funcionan
porque Facebook configuró su sitio web
para que funcionara con cualquiera de esas direcciones.
Como un tema aparte, ¿por qué hay tantos sitios web con el prefijo "www"
si ambos funcionan?
¿por qué tenemos ambos?
Parece redundante el escribir "www"
si está implícito en Facebook.com.
Sí, ¿qué piensas?
PÚBLICO: ¿Qué el "www" es necesario?
DAVID: ¿Qué es necesario?
No, no es necesario.
No se necesita.
¿Sí?
PÚBLICO: ¿Es para identificar que es parte de la World Wide Web?
DAVID: Bueno, sí.
Es para identificar que es parte de la World Wide Web
y nadie dice la World Wide Web en estos días,
solo decimos la web, pero de vuelta a los tiempos y en mis tiempos,
para muchas personas no era obvio
lo que Facebook.com significaría, pese al hecho
de que antes no existía.
Y ahora había esta señal para el mundo
por la cual, empezaron los nombres de dominio con el prefijo "www"
para dejarle muy claro a los usuarios, ¡oh, este es un sitio web!
Esta es una de esas cosas del Internet o algo así
y en aquel entonces también hubo
diferentes servicios que actualmente cayeron en desuso,
como el FTP que era bastante popular y Gopher lo usamos
cuando estudié aquí y otras cosas similares.
De modo que, el "www" era un prefijo absurdo, que solo decía lo que es
pero ahora, nosotros los humanos sabemos que son el .com, .net y .edu,
pero esto está cambiando de nuevo, porque hay docenas,
de cientos de dominios de nivel superior.
Ya no es solo .com y .edu ahora hay otros.
Me refiero a que, hay cientos de estas cosas allá afuera
que incluso, podrían no ser tan evidentes hasta el día de hoy.
Por lo tanto, algunas personas, hacen todo el camino y escriben http: //
y luego la dirección que quieren visitar,
pero la mayoría de nosotros no lo hacemos, porque nuestros navegadores nos ayudan
y le ponen prefijo a eso y allí es donde nos enfocaremos hoy.
Esto es importante, porque se especifica
qué protocolo o lenguaje, qué convenciones debe seguir
nuestra laptop cuando se comunica con la dirección de ese servidor
y de hecho, si queremos que las comunicaciones sean seguras,
el punto es, si nosotros lo escribimos o el navegador lo hace por nosotros,
agrega una s allí, que denota seguro o encriptado a la Caesar y Vigenere
que vimos hace algunas semanas y técnicamente es probable que nuestro
navegador agregue una barra inclinada / aún
si no nos la muestra, pero indica que queremos ir a la raíz del servidor,
la página de inicio predeterminada, entre otras cosas.
En efecto, tal vez queramos algo más,
no solo el sitio web de Facebook, también queremos la página de Mark,
y en específico escribiríamos /zuck o cualquiera que sea el nombre de usuario.
Esta es una manera muy larga de decirlo,
pero escribimos o autocompletamos y damos por hecho
que esto tiene muchos significados y todos ellos
hacen posible a toda la web.
Pero ¿qué sucede con el http y qué es lo que significa?
El http es un protocolo,
es un conjunto de convenciones, que dictan cómo un cliente
de computadora, el navegador en la Mac o PC, habla con un servidor web,
y es un protocolo, en el sentido de que no es un lenguaje como tal.
Es un conjunto de convenciones y por lo tanto,
es una especie de costumbre humana absurda e incómoda.
Hola, soy David
PÚBLICO: Yo soy Kara.
DAVID: Kara, Kara y yo nos presentamos,
extendí mi mano y ella como que sabía instintivamente
que sería incómodo no estrecharme la mano o sacudirla
e intercambiamos cumplidos y nos saludamos.
Esta es una especie de convención humana tonta
porque socialmente, hemos acordado de antemano
cómo saludarnos de esa manera.
El http es más o menos lo mismo, pero en este caso
no hacemos algo físicamente,
enviamos un mensaje del cliente al servidor,
ponemos una especie de nota manuscrita en un sobre como este,
la direccionamos de alguna manera y se la enviamos a Kara con el Internet
o a Facebook.com, o a Google.com para que la reciban
y luego cuando Google, Facebook o Kara reciben esa nota,
la leen y ven lo que quiero, el servidor o el humano
responden de alguna manera.
¿qué pasa dentro de este sobre?
Bueno, cuando un navegador web,
como Chrome, Edge, Firefox o Safari hacen una solicitud
el mensaje que ponen dentro de uno de esos sobres, aunque de manera virtual,
es prácticamente este texto,
como si lo hubiera anotado en un trozo de papel GET / HTTP / 1.1
Host: www.facebook.com y luego el "..."
solo significa que allí hay otras cosas, pero básicamente son menos interesantes
por el momento.
Pero, ¿qué significa todo esto?
GET es un verbo y hace lo que significa.
Busca algo en el servidor.
HTTP / 1.1 indica la versión de HTTP que utilizo o la convención humana
que Kara y yo implementábamos allí,
el 1.1 es el que más se utiliza actualmente y luego el / otra vez,
es el identificador predeterminado para la página de inicio de un sitio web,
la página predeterminada que vemos cuando no escribimos algo
como /zuck o algún otro sufijo.
Host: Es lo que está en el exterior del sobre,
si envío un mensaje a www.Facebook.com,
dejo muy en claro dentro del sobre cuál es el servidor que debe recibir
esta solicitud, en caso de que haya varios sitios web ejecutándose
en el mismo servidor físico, lo cual es muy posible por razones económicas y de
desempeño, actualmente.
Por otra parte, si tratara de visitar la página de Mark Zuckerberg,
la solicitud en ese sobre se vería casi igual,
pero seré más preciso.
/ zuck en lugar de solo /
Sin embargo, si solicito algo de la página de inicio de Yale
la solicitud sería así: www.yale.edu, o de la página web de Harvard
la solicitud se vería así: www.harvard.edu y así sucesivamente.
Una vez Harvard, Yale o Facebook
recibieron la solicitud en ese sobre, lo abrieron y lo miraron,
¿cómo deciden de qué manera responder?
Bueno, al final del día, probablemente espero
que el servidor web me devuelva alguna, discúlpeme,
página web que me permita ver mis noticias en Facebook,
o quiero ver la página de búsqueda en Google,
o quiero ver la página principal de Harvard o la de Yale
o cualquier cosa que sea.
Probablemente haya mucha información empaquetada en ese sobre,
pero también hay una respuesta convencional
o estándar que se ve de esta manera,
por ejemplo, en la parte superior de la "carta" que regresa de Google
o de Facebook hay un mensaje como este:
Lo tengo,
también hablo HTTP versión 1.1,
todo está bien y 200.
Volveremos a eso en un segundo y luego
el tipo de contenido dentro del sobre,
si voy más profundo en esto, será
texto, pero más específicamente, será HTML y también
nos enfocaremos hoy en eso.
El HTML o Lenguaje de marcado de hipertexto.
Este será el lenguaje en el que se escribirán las páginas web.
Luego usualmente hay otras cosas y por acá abajo
están los contenidos reales de la página web de Yale, de Harvard o de Facebook,
pero hagámosle un acercamiento a esto por un momento.
200, seguramente nunca vimos o nos importó ver estos números antes,
pero si alguna vez utilizamos la web, solicitamos una página
y ¿vimos algún número que por alguna razón aún aparece en nuestra vida?
PÚBLICO AL UNÍSONO: El 404.
DAVID: Sí, el 404.
Es algo raro que muchos de nosotros en la sala
conocemos el 404 incluso si no necesariamente somos tecnófilos
y sabemos qué es el HTTP, pero en estos sobres que regresan
desde los servidores a veces no solo son 200 OK, sino que
diablos, lo escribí mal.
Esto sería mucho más real si dijera que no es esto.
No se encontró.
Dentro del sobre no se encuentra 404, que exactamente eso es lo que significa.
No se encontró el archivo que estábamos buscando.
Escribimos mal la URL, la página fue eliminada,
en algún lugar u otro, hubo algún tipo de error tipográfico,
en HTTP existen muchos códigos de estado
hay incluso más que estos, pero estos
son los que podríamos ver más frecuentemente.
El 200 OK significa que todo está bien,
el 404 significa no encontrado,
403 prohibido, que podría ser, si no inició sesión
o no se le permite acceder a alguna carpeta
o archivo en algún sitio web.
Esto es malo, y lo sabremos en las próximas semanas ya que
nosotros mismos implementaremos el código en un servidor.
500 error interno del servidor, deberá ser nuestro nuevo defecto de segmentación,
espero que no sea demasiado frecuente.
Significa que algo está mal en el código del servidor.
Esto pasó en el día de las bromas de Abril en 1998, creo, sí.
En ese día, algunos humanos decidieron que sería divertido anunciar al mundo
que hay otro código, el cual es 418 Soy una Tetera,
qué aparece de vez en cuando en el código, y luego está este
otro,
301 Permanentemente movido.
Es un tipo de sonido espeluznante, como si un sitio web solo
más o menos se fuera y se fuera a otro lado, pero es un mecanismo poderoso
de la siguiente manera.
Si hay un servidor dentro de uno de estos sobres
que contesta con una respuesta como esta, esto,
al menos, tiende a ser otra pieza información.
Si visito un sitio web como http://harvard.edu,
devolvería en la contestación del servidor web de Harvard
esta respuesta, 301 Permanentemente movido.
¿A dónde diablos fue Harvard?
Bueno, podemos ver la ubicación basada en esta otra línea
y todas estas cosas avanzando colectivamente
a lo que llamaremos encabezado HTTP.
Cada vez que veamos una palabra y un punto, eso es
un encabezado HTTP, con un nombre, y un valor, y el primero
es un poco anómalo porque no tiene punto,
pero ese es el único sin punto.
Entonces, ubicación, punto, http://www.harvard.edu.
Bueno, ¿qué es lo que pasa?
Bien, si visito la página principal de Harvard exactamente como sigue,
veamos lo que sucede.
Iré a http://harvard.edu, Enter.
Noten que hay muchas más cosas ocurriendo en la pantalla, gracias
a lo que se llama autocompletar, que es una función de Chrome o mi navegador.
No tiene nada que ver con el tema en cuestión.
Solo trato de que Chrome hoy sea útil, como también nuestra computadora,
y de repente, aunque traté de ir a http://hardvard.edu,
claramente, ¿dónde terminé?
HTTPS. Ellos agregaron la s de alguna manera, ¿qué más agregaron?
[VARIAS RESPUESTAS DEL PÚBLICO]
DAVID: Sí, la web.
Se añadió el prefijo www.
Todo esto no es tan importante para el usuario
como el que llegue a mi destino, pero la razón para esto es la siguiente.
A continuación, abriré, en el IDE,
una ventana de terminal y usaré un nuevo programa llamado cURL
para conectarme a la URL ://harvard.edu, Enter.
Me devuelve cosas que parecen misteriosas, en realidad eso es HTML,
regresaremos a esto en un momento
porque hay dos partes que nos devuelven los mensajes.
Están los encabezados y luego el contenido, nosotros vemos el contenido
y más sobre eso en un momento.
Quiero mirar un poco más arriba en la respuesta y solo
en los encabezados, y para hacer eso, nosotros solo sabemos esto porque leemos
la documentación.
Me refiero a que me muestre solo los encabezados que devuelve.
Ahora vemos que los encabezados regresan
y de hecho, obtuvimos un 301 Permanentemente movido,
existen otras cosas en las que realmente no nos enfocamos,
pero, en la parte inferior hay algo que tenemos
ubicado, que le dice al navegador ve a esta URL.
De acuerdo, haré eso.
Ahorraré tiempo, solo copiaré pegaré esto y escribiré curl -I, de esto,
Enter, y pretende ser un navegador que solicita esa página, pero ahora
¿A dónde están tratando de enviarme?
HTTPS.
Esto sugiere que por medio de algún mecanismo, algunos humanos en Harvard
decidieron uno, uh-uh.
No iremos a algo llamado hardvard.edu.
Deberíamos estar en www.hardvard.edu pero por cualquier razón
y también decidieron que si un usuario nos visita usando HTTP, que no está
encriptada, no es segura, nos forzarán a regresar
por medio de un canal seguro, hoy no nos detendremos en cómo se implementan,
pero es como en Caesar o Vigenere, donde había una manera de encriptar o codificar
información, los navegadores también pueden hacer eso
e implica usar HTTPS en lugar de solo HTTP.
Muy bien, visitaremos esto una vez más.
A continuación, resaltaré esa ubicación.
curl -I de esa dirección y ahora una cantidad abrumadora de información
que regresa, es por eso puse las eses, pero las cosas jugosas
están en la parte superior.
Ahora todo está 200 OK, y de hecho, si lo ejecuto sin -I
veo el contenido del sobre,
está como buscar adentrarse en el sobre,
ahora veo mucho más contenido, que colectivamente
compone la página principal de Harvard, y
podemos ver esto incluso en Chrome.
Otra vez, proseguiré con mi navegador, y si no hicimos esto antes,
podemos ir a nuestro menú View, Developer,
e ir a Developer Tools, como lo haremos en las siguientes series de problemas,
puedo ir aquí y ver un montón de funciones, y solo un par
de las que podríamos ver hoy.
Específicamente, haré clic en la pestaña Network.
Developer Tools en Chrome todavía me muestra la página de inicio,
pero de alguna manera le dedica parte de la pantalla
a estas herramientas especiales de desarrollador que hacen fácil entender
la creación de sitios web.
Con el tiempo, comenzaremos a usar esto nosotros mismos,
lo bueno de los dispositivos de escucha de red, es que podemos detectar o monitorear
todas las solicitudes que van y vienen entre el navegador
y el servidor en los llamados sobres.
Primero presionaré el pequeño símbolo Clear de aquí
para limpiar la pantalla.
Haré clic en Preserve log para poder ver lo que pasa
ahora seguiré adelante,
de hecho, seguiré adelante y haré lo siguiente.
http://harvard.edu, es el tipo de versión incorrecta que
espero el navegador arregle para mi
y presiono Enter.
Un montón de cosas vuelan por la pantalla
y, de hecho, si le hacemos un acercamiento a esto,
veremos que el visitar la página de inicio de Harvard
requiere de 85 sobres, que parecen ir y venir con fragmentos
de la página web y pronto veremos lo que son algunos de esos fragmentos,
pero no es solo un archivo el que regresa,
son montones de archivos,
tal vez imágenes, fuentes o también algunas otras cosas,
pero me desplazaré hacia arriba en esta salida,
también noten la historia que se contó aquí.
La primera solicitud, sobre la que puedo pasar el mouse y verla,
regresó con un 301, que ahora sabemos es Permanentemente movido
o una redirección
Luego, si paso el mouse sobre la segunda,
veremos que es una URL www un poco más precisa, pero aún con el HTTP,
así, eso fue redirigido y por último, si miramos la tercera línea de aquí,
este es el único que finalmente terminamos
y de hecho regresa 200, al igual que los montones de otros resultados posteriores
y veremos lo que esos 200 significan en realidad.
Podemos hacer esto un poco mejor
y tal vez sea apropiado que nuestros amigos lo hicieran en el futuro.
Volveré al IDE.
Para continuar, borraré esto y en vez de usar cURL en harvard.edu,
haré http://yale.edu y preguntaré,
¿cuál sería un mejor enfoque? conocemos los ingredientes, que
tenemos, sobre cómo funcionan las redirecciones.
¿Cómo mejoraría Harvard respecto a llevar al usuario a la dirección
en la que queremos que esté?
Sí.
PÚBLICO: ¿Al no forzar dos redireccionamientos?
DAVID: Sí, al no forzar dos redireccionamientos, ¿cierto?
Incluso si parte de este material es nuevo, hablamos
mucho sobre la corrección, el diseño y el estilo,
vimos un estilo desordenado en la pantalla y por ahora eso es todo,
después hablaremos más sobre eso.
Parece que es correcto porque funciona,
pero podría tener un mejor diseño
porque, ¿por qué hacemos una solicitud y luego otra
para arreglar la primera y luego hacemos una tercera
para arreglar la segunda?
¿Por qué no combinarlas?
Parece que alguien tuvo la misma intuición en el camino
así visitamos yale.edu, solo con el HTTP y sin el www,
ellos, de un solo golpe, nos redireccionan
al lugar correcto, en este caso.
Dicho esto, tal vez lo más apropiado sea que
en unos cuantos años, bueno, ahora hace algunos años,
puede que tratáramos de visitar esta dirección en particular
y esto es algo que solamente puedo hacer en Cambridge.
Si continúo, abro un nuevo navegador y voy a digamos http: //
safetyschool.org y presionamos Enter si nunca hemos estado.
¡Oh, que interesante!
[RISAS]
DAVID: Me disculpo con aquellos que nos sintonizan
en vivo desde New Haven.
¿cómo es posible que esto funcione?
Es una heurística muy simple.
Si en vez de seleccionar a Yale, Harvard o cualquier otra dirección,
pongo safetyschool.org, podemos concentrarnos en
lo que ocurre abajo del agua y parece que safetyschool.org se mudó definitivamente
a New Haven, pero es a través de este mecanismo muy simple que alguien
en el año 2000 registró este nombre de dominio,
y de hecho buscaba esto en la historia de anoche,
me divertí al descubrir que quien compró el dominio ha estado pagando por este
nombre durante 17 años para la broma anual, pero bien vale la pena,
pero creo que sería,
[RISAS]
DAVID: Pero ahora creo que esto es algo justo,
esto solo es justo, si también le echamos un vistazo a este otro,
si visitamos harvardsucks.org, también esta
redirigido, esta vez a www.
entonces sigamos este pequeño rastro cURL -I http://www.harvardsucks.org/
¡y este salió bien!.
Eso significa que algo vive en harvardsucks.org
y no redirige de manera ingeniosa hacia harvard.edu,
pero para presentar esto, permítanme presentarles
a un amiga nuestra, quien muy extrañamente hoy nos visita desde New
Heaven.
Hola Natalie.
¿Quieres venir y saludarnos por un momento?
Esta es Natalie, nuestra titular del curso junto con Benedict Brown,
Anushri y Staleos en New Haven.
¿Te gustaría saludarnos rápidamente?
Hola, hola a todos.
DAVID: Qué bueno tenerte hoy aquí y como sabes,
¿Quieres mencionar algo sobre lo que estamos a punto de ver aquí?
¿Sabes qué pasó algunos años después del 2004?
PÚBLICO: Ohh... hicimos... hicimos una travesura... básicamente.
DAVID: Bien, la descripción es perfecta.
Muchas gracias.
Saluden a Natalie.
Para continuar, reproduciré en tres minutos
algo que es difícil de justificar académicamente,
pero tal vez sea una de las mejores bromas que se hicieron alguna vez.
Para resumir, nuestros amigos, en el camino
se reunieron con otros, justo antes del partido Harvard contra Yale, que
ese año se efectuaría en Harvard
y trazaron un mapa con un software, una especie de sistema con cuadrículas
con el que alinearon todos los asientos en el estadio de Harvard,
y supusieron que cada persona ocupa cierta cantidad espacio,
luego usaron un software especial para averiguar
cómo podrían deletrear algo con el público, de una manera que
fuera legible para los oponentes, los Yalies, que estaban en el otro lado.
Si pudiéramos atenuar las luces para echarle un vistazo al pasado,
a los ayeres y al pequeño uso de este software.
[MÚSICA DE FONDO]
- Todos los lugares de arriba.
- Esto es por ti Yale.
Te amamos Yale.
- Estamos aquí para animar a Harvard.
- ¡Sí!
¡Vamos Harvard!
- ¡Vamos, Harvard!
- Toma la de arriba y pásala.
- No va a decir algo como Yale apesta, ¿verdad?
- No, dice, ¡Vamos Harvard!
- Somos geniales.
- ¿Ves esa cosa?
¡Miren, tienen las cartulinas!
¡Las van a usar!
¡En serio las van a usar!
¡No puedo [PITIDO] creerlo!
- ¿Señor, qué piensa de Yale?
- ¡No creo que sean buenos!
- Puede ser un completo desastre, no lo sé.
- ¿Ya todos tienen?
¿Ya todos tienen sus cosas?
- La probabilidad de que sea legible es muy pequeña.
¡Las van a usar!
- Es demasiado difícil.
- Mira, mira todas las cartulinas.
- Lo sé, pero es demasiado difícil.
- ¿De qué fraternidad son ustedes?
Esa no existe.
- ¿Ho-fo?
- Sí.
Ustedes no son de Harvard, ¿verdad?
- No, fo-ho.
¡Pforzheimer!
- Sí, pero él dijo ho-fo.
- Asegurémonos de que ya todos tengan.
- Bueno, creo que ella está borracha.
- ¿Ya se distribuyeron todas las tarjetas?
- ¡Casi todas!
[APLAUSOS]
[PORRAS]
- ¡Levanten sus cartulinas!
- ¡Lo [PITIDO] hicieron!
[CORO GRITANDO "¡APESTAN!"]
- ¡Lo [PITIDO] hicieron!
[CORO GRITANDO "¡APESTAN!"]
- ¿Señor, qué piensa de Yale?
- ¡Apestan!
- ¡Otra vez!
- ¡Oh! ¡Ahí van de nuevo!
[CORO GRITANDO "¡APESTAN!"]
[FINALIZA LA REPRODUCCIÓN]
DAVID: Muy bien, hablamos
sobre lo que sucede dentro de este sobre,
pero, ¿qué sucede afuera?
Cuando entregamos este sobre desde la laptop o el teléfono
al Internet, ¿cómo llega éste a su destino?
Bien, probablemente escuchamos del acrónimo IP, o protocolo de Internet
y que cada computadora, teléfono o laptop con Internet
en esta sala tienen una dirección única.
Esa dirección única se conoce como dirección IP y se parece mucho a la
de un edificio en el mundo real, como el Centro de Ciencias sería 1 Oxford
Calle Cambridge, Massachusetts 02138, EE.UU.
En el camino está el edificio de CS.
Calle Cambridge, Massachusetts 02138, EE.UU.
Esas largas cadenas identifican de manera única a los edificios
en el mundo, para el servicio de correo, entre otros
y es así como las direcciones IP identifican las computadoras en Internet,
aunque estas direcciones son mucho más concisas,
no son cadenas largas, sino números con cuatro partes
y cada uno de esos números de la dirección IP tiene un valor de 0 a 255.
Así, la dirección IP más baja es cero y la más grande
son todos hasta 255 con algunas restricciones.
No podemos usar todos esos números.
A modo de avance rápido, si el número más pequeño es 0
y el número más grande para cada sección de la dirección IP es 255,
¿Cuántos bits se usan para cada uno de esos cuatro números?
PÚBLICO: Son 8.
DAVID: Sí, son 8.
Recordemos que 8 bits son 2 veces 2 veces 2 veces 2 veces 2 veces
2 veces 2 veces 2, lo cual es 256 y en efecto tenemos 256 valores totales de 0
que llegan hasta 255.
Entonces, una dirección IP es 8 más 8 más 8 veces 8, o 32 bits en total,
o se completa el círculo con la semana cero, si tenemos 32 bits,
aproximadamente ¿cuál es el mayor número que podemos contar?
¿Cuánto es 2 a la potencia de 32?
Sí, son aproximadamente 4 mil millones.
En pocas palabras, lo que implica esta definición tan simple es que
en este modelo solo puede haber, cuatro mil millones de computadoras,
teléfonos, refrigeradores y dispositivos conectados al Internet, al mismo tiempo
y si lo hacen, todos necesitan una dirección IP que sea única.
Estuve diciendo una pequeña mentira blanca, en la que
técnicamente no todos tienen que ser únicos, porque existen
formas en las que podemos compartir las direcciones
además, actualmente hay direcciones aún más grandes, que no son de 32 sino de 128
bits, es tan grande este número que resulta inmenso y supongo impronunciable.
Ya nos adelantamos a este problema, pero en muchos lugares
empresas y proveedores de servicios de internet como Comcast y Verizon
al igual que campus como Harvard y Yale, tienden a seguir
patrones, como aquí en Harvard muchas de las direcciones IP comienzan con
140.247.algo.algo o 128.103.
Más adelante, en New Haven, gran parte de las direcciones
IP de allí comienzan con 130.132 o 128.36,
lo cual no es interesante para los humanos que usan estas direcciones
IP, pero es útil para los servidores o los dispositivos que
distribuyen estos sobres de un lugar a otro.
Actualmente, en nuestros hogares e incluso algunas veces en el campus,
también hay lo que se llama direcciones IP privadas, que
son números que funcionan dentro de estos rangos y que
son una solución para que cuando nos registremos en Verizon o en Comcast
en casa o nuestros padres lo hagan por el servicio de internet,
obtengamos una sola dirección IP del proveedor de servicios de Internet.
Es por lo que pagamos cada mes, pero es gracias a algo
llamado traducción de direcciones de red y a otras tecnologías,
podemos darle a todos nuestros hermanos, padres,
familiares o compañeros de cuarto, su propia y única dirección.
Es privada en el sentido de que nadie más en el mundo exterior
puede acceder a ella, a menos que se conecte.
Generalmente, esta es la razón por la que desde nuestro hogar entramos
a cualquier sitio web o servicio en Internet que queramos,
pero no podemos tener personas al azar
tratando de entrar a nuestra computadora portátil o a nuestro dispositivo en casa
porque hay un dispositivo, un enrutador en casa, que traduce direcciones privadas
en direcciones, que de otro modo, serían públicas, pero por ahora concluimos
que cada computadora en Internet tiene una dirección IP,
y si alguna vez han hurgado en su Mac, como en Preferencias del Sistema,
de hecho podemos verlo.
Acabo de sacar una captura de pantalla de un panel de control de red en Mac OS
y si miran más o menos en su propia Mac,
deberían ver que su dirección IP es algo
que varía completamente por persona y de manera geográfica,
pero verán su dirección IP ahí.
En Windows, al menos en Windows 10, pueden ver su dirección IP
en Configuración, como se resalta aquí.
Esta tiene una dirección muy diferente, pero eso es
porque esta persona estaba en una red diferente a la de todos nosotros.
Entonces, ¿de dónde vienen estas direcciones IP?
Bien, en el día alguien
llega a nuestra casa y configura nuestro Comcast o servicio de Internet de Verizon
y le gustaría ingresar estos números en su Mac o PC
luego irse, y usted tendría una computadora en Internet.
En estos días es mucho más dinámico.
No necesitamos que venga alguien.
Eso, ciertamente, no escala muy bien porque hay otros protocolos.
HTTP es este protocolo del que hablamos anteriormente sobre páginas web,
pero hay otros protocolos como el Protocolo de configuración de host dinámico, que
es un trabalenguas, pero significa que las Macs, PCs, teléfonos Android, iPhones
y similares, si hablan este protocolo, cuando
encienden sus teléfonos o inician la computadora portátil sabe
si tiene soporte para este protocolo, para anunciar en el Internet,
hello world.
Estoy despierto.
¿Cuál debería ser mi dirección IP?
Este tipo transmisión de mensaje, y si Harvard, Yale, Comcast
o Verizon o donde sea que estemos en el mundo
tiene un servidor DHCP cuyo propósito en la vida es solo escuchar esos hellos,
ese servidor debe responder usando el mismo protocolo con su
dirección IP, y se da cuenta de cuál nos da en función de la gama disponible
de números típicos.
Así es como obtendríamos esto, pero hay
otras cosas en estos paneles de control.
De hecho, si miramos un poco más abajo en Windows, también hay servidores DNS.
Sistema de nombres de dominio, (en inglés Domain Name System).
Otro acrónimo y un poco de trabalenguas, pero también puedes verlo en Mac OS/2
si se hace clic en Advanced y se echa un vistazo.
Aquí, por ejemplo, se menciona algo completamente diferente, un enrutador.
Así que hay muchas direcciones diferentes pasando aquí
y muchos servidores diferentes
Entonces, ¿cómo es que están todas juntas?
Bueno, DNS es interesante porque es
el que traduce los nombres de dominio a direcciones IP, ¿cierto?
Ninguno de nosotros probablemente visite http: // y luego un número, ¿cierto?
Visitamos facebook.com, google.com o similares,
eso se debe a que las computadoras saben cómo traducir una a la otra.
Si hago este comando, nslookup, para buscar el servidor de nombres
y luego escribo algo como google.com, le pregunto a la computadora,
en este caso, el IDE, ¿cuál es la dirección IP de google.com?
Como humano la conozco como google.com, pero Internet la conoce
por su dirección numérica única, y resulta que Google tiene varios,
esto es una mentira piadosa porque tienen miles,
pero los que le dicen a mi computadora que usen
son esta, esta o cualquiera de estas otras direcciones.
A continuación, veré qué sucede aquí.
Si destaco esa dirección y abro un navegador, voy a http: // y esa
dirección IP y presionamos Enter, observamos que pareció funcionar.
Bien, ¿cómo es eso?
Es un poco difícil verlo en Chrome, pero
proseguiremos a abrir la pestaña Inspect tab e iremos a la red al igual que antes.
Haré clic en Conservar registro para que guarde todo aquí,
y podría usar curl.
Curl era la versión más simple.
Ahora estoy usando la versión gráfica más familiar.
A continuación haré eso de nuevo e iré a http: //, esa dirección IP y presionaré
Enter.
Un montón de cosas volaron, incluso para la página de inicio de Google,
noten lo que sucedió.
En ese principio, ups,
si desplazo el cursor sobre ella, veo http: // y luego el número que
ingresé, pero es un 301 porque, ¿cuál fue la respuesta?
Podemos ver estas respuestas.
Haré clic en el código de estado aquí, o en la fila, ir a Encabezados
y noten aquí, si hacemos un acercamiento, veremos que Google
respondió con esta ubicación.
Alguien en Google acaba de decidir, bien.
Descifraron una de nuestras direcciones IP.
Eso es genial, pero no queremos que vean eso en la URL.
Es malo para nuestra marca.
No queremos que marquen como favorita una dirección IP
porque podría cambiar más adelante.
Usamos los mismos mecanismos que antes,
pero así es como podemos hacer la búsqueda y podemos ver lo mismo
para cualquier cantidad de sitios web.
Continuamos con nslookup de harvard.edu y recuperamos solo un par.
Si hago lo mismo en Yale, recuperaré diferentes direcciones IP.
Yale tiene aún más, en este caso, y por lo tanto este
es cómo averigua la computadora hacia dónde se enviarán los datos.
¿Qué ocurre con este sobre?
no son facebook.com, harvard.edu o yale.edu,
será una dirección como 1.2.3.4
o cualquiera que sea la dirección IP del servidor al que estoy tratando de enviar.
Ahora, desde luego, espero una respuesta del servidor.
Quiero recuperar mi fuente de noticias o quiero
recuperar la página principal de Harvard o Yale.
¿Qué más debería poner en este sobre virtual,
solo intuitivamente?
Sí.
PÚBLICO: ¿Su propia dirección IP?
DAVID: ¿Qué es eso?
PÚBLICO: Su propia dirección IP.
DAVID: Mi propia dirección IP, sí.
Como en el mundo humano, por si acaso algo
sale mal con la oficina de correos, pondría mi propia dirección, 5.6.7.8,
y podré eso en el sobre, por si algo sale mal o, mejor
si algo va bien y están listos para darme unos 200 OK,
volverían a mí porque saben de qué
de qué dirección vino esta cosa.
¿Quién es o qué es lo que hace todo este enrutamiento?
Bien, hay servidores en Internet que se denominan
enrutadores, también conocidos como portales, que es un sinónimo,
aquí es como un tipo de pintura artística de puntos
en todo el mundo, y hay cientos, miles, decenas de miles
de enrutadores
Lo más probable es que ustedes mismos en casa, si tuvieran acceso a Internet,
al tener uno de esos enrutadores, y su propósito en la vida,
de nuevo, es tomar datos de su hogar y enviarlos a Internet,
y cualquier respuesta que reciba, regresarla
a la laptop o escritorio o teléfono apropiado
o dispositivo inteligente que resulta estar en tu propia casa.
También podemos verlo.
A continuación, en CS50 IDE, intentaré con otro comando.
Continuaré y haré un rastreo de ruta,
es decir, rastrearé la ruta a yale.edu desde aquí,
o técnicamente desde el IDE.
Si presiono Enter, veremos algunas líneas de salida,
y si intentamos esto en casa, solo nos daremos cuenta
de que configuré, un poco diferente, mi IDE para simplificar la salida.
Al parecer, existen cinco pasos entre Cambridge
y New Haven, o técnicamente entre el IDE y New Haven,
¿Cuáles son cada uno de estos pasos?
Si continuamos esa versión de la historia, entre Yale y nosotros
al parecer, existen cinco enrutadores.
Hay cinco computadoras que tienen mucha RAM y CPU enormes
que pueden manejar mucho tráfico de Internet,
que descifran cómo obtener mi sobre desde este origen
a este enrutador, a este enrutador, a este enrutador, al enrutador anónimo,
hacia este.
A veces se configura a los enrutadores para no responder estas preguntas
de este programa que hace una ruta.
Ellos están al tanto de sí mismos, y de nosotros
y ven algunos números a la derecha de cada una de estas direcciones IP.
Adivinen, ¿qué representan cada uno de estos números?
¿Qué es eso?
No, está bien.
PÚBLICO: ¿Milisegundos?
DAVID: Milisegundos, sí.
¿Qué piensan que miden los milisegundos?
Hora de ir, o hora de alcanzar ese enrutador específico.
Entonces podemos inferir,
y este es el tipo de cosa increíble.
Para llevarme a New Haven toma como dos horas más,
pero para recibir un correo electrónico, para obtener un sobre con un mensaje
toma como 10.597 milisegundos para obtener datos de aquí hasta ahí,
y con suerte de regreso, si es una solicitud de una página.
Hagamos algo un poco más lejos.
Hagamos como stanford.edu, rastreando la ruta aquí,
y ya podemos ver que las cifras son un poco más altas,
y eso tiene sentido intuitivo que Stanford
está un poco más lejos que New Haven y tarda otros 41 milisegundos
para llegar.
Si voy más allá y leo como las noticias de una empresa
como cnn.co.jp, el dominio de nivel superior para muchos servidores en Japón,
podemos ver un repunte de cuántos milisegundos se necesitan,
y de hecho, hay algo curioso aquí.
¿Por qué toma mucho más tiempo llegar desde el enrutador número tres
al enrutador número cuatro?
PÚBLICO: El océano.
DAVID: El océano, sí.
Hay una gran masa de agua entre la costa oeste de los EE. UU. y la costa
de Japón, lo que probablemente explica por qué no entre tres y cuatro,
y todos los enrutadores posteriores están a muchos milisegundos de distancia.
Entonces estos no son acumulativos.
Medimos de manera constante de aquí para allá,
de aquí a un poco más lejos, de aquí a un poco más lejos.
Tiene sentido que una vez que cruces ese océano,
ese es el tipo de valor total que veremos,
es realmente fascinante.
Quiero decir, en todo el mundo hay
hoy en día no solo existen tecnologías inalámbricas, sino tecnologías de cable
y si tomamos solo unos segundos, podemos
ver esta visualización de tantos de los cables transoceánicos que tienen
fueron descargados por grandes barcos que llevan muchos, muchos bits de una
costa a otra.
[REPRODUCCIÓN DE VIDEO]
[MÚSICA DE FONDO]
[FINALIZA LA REPRODUCCIÓN]
Con todos esos cables capaces de transmitir datos en todo el mundo,
todavía hay un problema más.
Incluso si queremos hacer algo simple como
descargar una imagen de internet de un gato porque hay
diferentes tipos de servidores por ahí.
Aquí está mi computadora como mi laptop,
que ejecuta Mac OS o Windows.
Hay todos esos servidores en el centro de datos de Google,
en sus estantes, en los de Facebook y similares,
y entre todos esos servidores hay muchos enrutadores,
pero esos servidores en esos estantes en Google,
en Facebook, incluso en Harvard y Yale,
son servidores que pueden hacer muchas cosas porque técnicamente,
a pesar de tiende a hablarse de los servidores como dispositivos físicos,
un servidor es, como iniciamos hoy, solo un programa.
Es una pieza de software que alguien escribió que, cuando se ejecuta,
escucha las solicitudes en Internet y responde a ellas,
en general genera información, texto, o ceros y unos, o en algunos casos,
gatos.
Al recibir un sobre, ¿cómo es
que un servidor sabe si es una solicitud de una página web, un correo electrónico,
un mensaje de chat, un mensaje de voz o cualquier cantidad de otras cosas?
Resulta que, necesitamos una pieza más de información, al menos, en este sobre
que en el mundo se ha estandarizado
por medio de otro protocolo llamado TCP, Protocolo de control de transmisión, que
necesitamos, al menos, otra número de estos sobres,
y ese número corresponde al tipo de servicio
al que tratamos de acceder, o al tipo de datos
que tratamos de enviar o recibir.
Por ejemplo, 22 es para algo llamado SSH, Secure Shell.
Casi todos los directores de CS lo usan, pero en el mundo la mayoría de la gente
no porque es completamente una línea de comando
y nos permite conectarnos de manera segura a algún servidor remoto
sin usar algo como un navegador, pero todos en general usamos navegadores
y HTTP todo este tiempo tuvo un número único asociado
con esas solicitudes.
80 es el número y si visitamos alguna URL que inicie con https,
tiene el número especial, 443,
que hace años la gente decidió identificar de manera única codificada en la web
sus solicitudes de tráfico y respuestas.
Para correos se usa 587, o Protocolo simple de transferencia de correo.
Disculpen, 53 se usa para DNS.
Si alguna vez enviamos un mensaje a un servidor que diga
¿Cuál es la dirección IP de google.com?
Usamos el número 53 para identificar cualquier máquina o software que
responda ese tipo de pregunta, y podemos ver esto.
Si vuelvo a mi IDE y hago curl -I https://www.harvard.edu,
esto, por supuesto, antes funcionó y fue 200 OK,
también funcionará si digo con más precisión esta
solicitud al puerto TCP, o número 80 y,
diablos.
Oh, está mal porque cometí un error pedagógico fascinante.
¿Qué hice mal?
PÚBLICO: Https.
DAVID: Sí, aquí arruiné mis números.
Les dije https, pero quise decir http porque usé el puerto 80
o, por el contrario, si quiero hablar con el puerto seguro que se conoce,
quiero decir 443, y ese, de hecho, funciona,
puedo hacerlo otra vez incluso en Chrome.
Si en mi navegador escribo a http://yale.edu/80
ocurren las redirecciones, eso también funcionará.
Son navegadores que mantienen nuestras mentes enfocadas en el sitio web que
intentamos visitar y no distraernos en detalles técnicos como: 80
o diagonales, inclusive en http misma,
solo esconde eso de la barra de URL.
Todo está ahí.
Todo sucede, pero los humanos nos sentimos un poco más cómodos
con Internet con el paso de los años, Chrome y otros navegadores
comienzan a ocultar algunos detalles de implementación de bajo nivel.
Eso significa que, cuando quiero enviar una solicitud a un servidor web,
debo escribir: 80 en el sobre
para dejar claro que eso irá a un servidor web que emite
en el puerto 80 o tal vez 443, y luego, ¿saben qué?
Resulta que no nos detendremos demasiado en los detalles,
incluso mi Mac o su PC tienen su número de puerto para todas estas solicitudes,
¿verdad?
Sería bastante molesto si solo pudiéramos visitar un sitio web a la vez
o que usáramos Gmail o Skype, pero no ambos
al mismo tiempo, o Facebook Messenger o Google Chat, pero solo uno
al mismo tiempo.
Eso sería bastante restrictivo, en especial cuando
tenemos todo este poder computacional.
En el caso de que nuestra propia computadora,
cada vez que envía una solicitud por Internet,
elige un número aleatorio o pseudoaleatorio que identifica de manera única
la pieza de software en nuestra computadora que espera la respuesta.
Puede que este no sea el puerto 80.
Este será un número más grande como 1025,
o algún valor bastante grande, de hasta 65,000
o 32,000, que identifican de manera única el puerto en mi computadora.
Así es como nuestra computadora puede hacer varias cosas a la vez,
una vez que se obtiene la respuesta, estos valores se desocupan,
pero hay una pieza más.
Los gatos pueden ser de muy alta calidad y los videos, sin duda,
ocupan una gran cantidad de datos.
Los videos de Netflix, y cualquier transmisión de video, ocupan
una gran cantidad de información y
sería bastante molesto para nuestros vecinos si alguna vez
viéramos una película en Netflix, y tuviéramos
que hacer, al ver la película, que un vecino
también viera un video en su computadora.
Lo que las computadoras también hacen gracias a IP
y TCP es que, al usarlas en conjunto, ofrecen una función más.
Si quiero descargar una imagen de un gato,
y tenemos una bonita versión impresa aquí, estoy
seguramente no conseguiré el gato completo en un sobre.
Este gato, archivo de video o lo que sea
se dividirá en algunas piezas diferentes.
Y este mensaje podría cortarse o fragmentarse en cuatro partes.
Cada una de esas cuatro piezas, podría ir en cada uno de estos sobres
aquí, aquí, y luego aquí con el tercero y cuarto,
y lo que es agradable acerca de TCPIP es que
nos brinda al menos dos funciones.
Uno, IP garantiza que cada computadora en Internet que hable este protocolo
tenga una dirección.
IP controla la obtención de los datos de algún destino.
TCP, la otra mitad de esto, ofrece la garantía de
entrega de alta probabilidad, y que los datos realmente llegan ahí.
Porque como pudimos deducir, incluso de la animación de todos
los cables transatlánticos y todas las interconexiones entre enrutadores,
las cosas pueden salir mal, ¿cierto?
Los enrutadores pueden sobrecargarse.
Sus búferes pueden desbordarse, de tal manera que
no puede manejar todo el tráfico que entra, y de hecho,
si intentamos ver algún episodio de Game of Thrones en HBO
y no podemos acceder en algún momento o [INAUDIBLE] alguna herramienta como esa.
Si están sobrecargados, ¿qué significa eso?
Significa que el servidor, o los enrutadores entre nosotros y el servidor,
reciben tantos mugrosos sobres que no pueden mantener el ritmo
y no pueden manejarlos todos a la vez, y a veces los paquetes,
por así decirlo, desaparecen, tanto física como digitalmente,
y esto significa que se pierde un paquete.
Lo bueno de Internet es que cuando mi computadora
habla con el enrutador más cercano de Harvard que tendría buenas antenas
en una sala o en un punto de acceso, yo podría enviar un paquete aquí y aquí
y devolveríamos todo esto si pudiéramos
pero estos paquetes, como pueden ver, no necesariamente
necesitan viajar por el mismo [? camino?] porque, ¿cuál
es tu nombre?, en la segunda fila.
PÚBLICO: Monsi.
DAVID: Monsi.
Monsi se está un poco ocupada.
Entonces Kara, si pudieras encaminar a otra persona.
Este es el efecto que ocurre en Internet.
Si un enrutador, como Monsi, está un poco ocupada
y su atención está en otra parte o tiene demasiados paquetes con los que lidiar,
ella ni siquiera desaparecerán, pero tal vez
su camino será redirigido al de ella,
y eso es lo bueno de tener esta red encriptada en Internet.
Desafortunadamente, uno de esos paquetes puede desaparecer
y de hecho este es un ejemplo perfecto.
Si quieren lo soltamos, lo soltamos.
Oh-oh, ¡un paquete cayó!
Lo que TCP hace por nosotros es lo siguiente.
Una vez que esos sobres alcanzan con suerte a una persona específica,
OK, son los afortunados ganadores.
Quien quiera, quiere ... ¿cuántos tenemos?
¿Dos allí?
¿A dónde fue el tercero?
Está bien.
TCP puede manejar múltiples paquetes que se pierden.
PÚBLICO: Está por allí.
DAVID: Ah, entonces los paquetes a veces tampoco toman el camino más corto
en el Internet.
¿Qué pudo ocurrir?
Asumamos por el bien de la discusión
que esos paquetes llegaron a, por lo menos, alguien de nuestro público
aquí.
Él o ella, al recibirlos, también
vieron no solo la dirección de origen y la dirección de destino.
También habría alguna notación, como una línea de memo en el sobre que dice
1 de 4, 2 de 4, 3 de 4, 4 de 4, para que el destinatario pueda inferir
de esa pequeña pista si recibieron o no los 4 o solo,
como en este caso, un subconjunto de los mismos, y en ese caso,
suponiendo que la computadora habla TCP, solo diría,
hola David, reenvíame el paquete número 1 o el paquete número 3
o cualquiera que se haya perdido.
Todo esto sucede a velocidades vertiginosas.
10 milisegundos para hacer todo de ida y vuelta a New Haven,
incluso así de rápido en el campus, pero esos
son los principios básicos y los componentes básicos
que obtienen nuestros datos de un lugar a otro.
Algo interesante sucede
cuando profundizamos en este sobre y miramos los contenidos.
No solo el gato, como en este caso, sino el lenguaje HTML y algo más
llamado CSS, que usaremos en poco tiempo, pero pensé
podría ser divertido, especialmente en los talones de nuestra prueba forense,
echemos un vistazo a qué tipo de Hollywood presuntuoso
tiende a ser cuando nos presenta humanos con detalles técnicos
que ahora quizás tengamos un mejor ojo, además
de la antigua línea de "mejorar".
[REPRODUCCIÓN DE VIDEO]
- Es una dirección IPP4 de 32 bits.
- ¿IP como en internet?
- Red privada.
Es red privada.
[RISAS DE ESTUDIANTES]
- Ella es tan increíble.
- Oh, Charlie.
- Es una dirección espejo IPP de bits.
Podemos ver lo que hace en tiempo real.
[FINALIZA LA REPRODUCCIÓN]
DAVID: OK, lo mantendremos en esta pantalla
porque uno, o algunos de ustedes se rieron cuando vieron el IP falso
porque el número fue qué?
PÚBLICO: 275.
DAVID: 275, es demasiado alto y eso
podríamos perdonarlo, porque no queremos personas al azar que pausen
sus videos en Internet y luego intenten hackear u obtener acceso
a esa URL, aún es más divertido cuando se describe al hacker
que hace esto en la pantalla, como parte de su ataque.
Es como el código fuente en un lenguaje llamado Objective-C
para algún tipo de programa de dibujo, como se sugiere
mediante el uso de crayones en el código como una variable.
Hagamos una pausa, y cuando regresemos en cinco minutos, echaremos un vistazo
al mismo HTML.
Muy bien, regresamos, estamos a punto de aprender un nuevo lenguaje.
Aunque, esto podría parecer demasiado en una hora,
este es un lenguaje de marcado.
Este no es un lenguaje de programación, lo que
significa que no veremos bucles,
no veremos funciones,
no veremos condiciones, ni ningún tipo de lógica
que incorporamos en C, y en Scratch y, finalmente en
Python y JavaScript.
En cambio, veremos lo que llamamos etiquetas, piezas
de sintaxis similar al inglés, que solo le dicen al navegador qué hacer
y qué dejar de hacer.
Veremos las etiquetas que dicen: inicia haz que este texto se centre.
Detén haz que este texto se centre.
Inicia haz que el texto sea negrita.
Detén haz que este texto sea negrita.
Este tipo de instrucciones muy deliberadas
que expresaremos al usar algo parecido a un código,
pero que no nos da control lógico.
Como tal, existe un lenguaje bastante pequeño frente a nosotros
y mucho de lo que haremos cuando aprendamos HTML es solo
verificar una referencia en línea, o un ejemplo en línea, o mirar el código
fuente de páginas web reales, para descubrir cómo se hacen estas cosas
y hoy, nos enfocaremos en los fundamentos.
Tal vez, esta es una de las páginas web más simples que
podremos escribir en un lenguaje llamado HTML.
Es un lenguaje basado en texto.
Todas las etiquetas se asemejan a algunas palabras en inglés
y hay un patrón para el tipo de cosas que podremos escribir.
En primer lugar, si utilizamos la última versión de HTML, que
da la casualidad que es la versión 5, que ha estado aquí bastante tiempo,
iniciaremos cada página web con este conjuro misterioso en la parte superior
aquí.
[!DOCTYPE html]
o como se le llaman esas cosas.
corchetes cuadrados, es posible que no tuvieron muchas ocasiones para escribirlos
en su teclado, una vez que inicien pronto lo harán.
Después de eso, inician un patrón.
Inicia con , recorremos el camino, y al fondo será lo opuesto
de esa etiqueta.
Esta es una etiqueta de inicio, esta es una etiqueta final, o esta es de apertura,
esta es una etiqueta de cierre, que difiere con esta diagonal que está
dentro de la etiqueta.
Esto dice, hola navegador, ahí viene una página web.
Esto dice, hola navegador, eso es todo para la página web.
De nuevo, este tipo de mentalidad de inicio y fin.
Mientras tanto, dentro de la página web, se denota por la etiqueta de HTML,
que existen dos partes, un titular y un cuerpo.
El titular de una página web tiende a contener muy poco.
En general, es la barra de título en la pestaña
que los humanos vemos al visitar un sitio web,
y el cuerpo que es como el 95% de los contenidos
de la página, la ventana gráfica o la región rectangular
que abarca el contenido.
¿Cuál es ese elemento?
En el titular tenemos un título que
será "hola, título" solo porque sí y luego
en el cuerpo de la página web, esta página web,
será "hola, cuerpo",
eso es todo.
Eso es HTML.
Si guardamos este texto en un archivo, y lo abrimos en un navegador,
veremos una página web patética que dice hello title y hello body,
pero esa es una página web que usa las denominadas etiquetas de HTML.
Cualquier cosa dentro de esos corchetes cuadrados son etiquetas.
Puedo ver esto bastante claro incluso en mi Mac
y también pueden hacer esto en su PC.
Abrí TextEdit y lo configuré para que sea más sencillo que
el predeterminado, sé que hice una pequeña cosa por adelantado,
podríamos usar notepad en Windows o cualquier otro número de otros programas,
incluso Microsoft Word, si lo guardamos de la manera correcta, o Google Docs,
a continuación recrearé esto como <!DOCTYPE html>,
, y solo para recordar las cosas que hay que hacer,
Tendré que continuar con el inicio y el final
pensar y luego profundizar.
Proseguiré con y con aquí,
hago una sangría y por si acaso, una, dos, tres, cuatro sangrías,
siempre y cuando seamos consistentes, el navegador
estará perfectamente feliz, como nosotros.
hello, title después haré
y entonces: hello, body.
Eso es todo.
Acabo de escribir exactamente lo mismo que antes.
A continuación guardaré esto no como no hello.txt, o sin duda
no como hello.c, por convención será hello.html.
Presionaré Save.
Mac OS me advierte que esto es texto, no algo llamado HTML,
sé lo que hago y le diré que use HTML,
ahora tengo un archivo llamado hello.html, si voy a mi escritorio, aquí
está.
Si hago doble clic en él, es esa página web bastante simple
si revelo la pestaña, ahí está.
Hello, title en la pestaña superior de la página, y una vez que me deshago de eso
veo el cuerpo otra vez.
Eso es HTML, al menos, en términos de su estructura básica,
pero hay algunas otras funciones que también podemos aprovechar,
a continuación descifraremos esto.
Noten, en primer lugar, que existe esta simetría.
Lo que abre y lo que casi siempre cierra, se encuentra en el orden opuesto.
El titular aquí, el título aquí, y luego
seguido por el cuerpo, y el contenido en el mismo,
debido a que existe esta estructura, podemos
pensar acerca de esto, en relación con las últimas dos semanas
cuando hablamos de estructuras de datos
Yo sostendría que este HTML de la izquierda es
un algo de equivalente a este árbol a la derecha,
no pasamos mucho tiempo hablando de árboles,
e incluso los hicimos cuando usamos razones algorítmicas
como un árbol de búsqueda binaria que busca datos de manera bastante eficiente,
pero si lo pensamos, aquí está el documento que
dibujé con esta forma de alguna manera arbitraria
y tiene un hijo, como la página entera que dibuje,
que es la etiqueta HTML.
La etiqueta HTML tiene dos hijos, por así decirlo, para pedir prestado
de nuestro lenguaje las estructuras de datos.
El titular y el cuerpo de izquierda a derecha.
El titular tiene un niño llamado título, y el título tiene un hijo de algún tipo,
a pesar de eso, es solo texto sin formato.
No es otra etiqueta con corchetes cuadrados,
el cuerpo tiene su propio contenido aquí, hello, body.
Esa jerarquía y la sangría deliberada, que está ahí solo para nosotros
los humanos, el navegador no se preocupa por el espacio en blanco,
se presta a una implementación en la memoria,
y, en pocas palabras, cuando nuestro navegador recibe un sobre,
dentro de los que no son los titulares HTTP, fuera de los que
no son la dirección IP y el puerto TCP,
dentro del cual hay un archivo de texto que contiene HTML,
todo lo que el navegador carga ese archivo en la memoria,
lo lee de arriba a abajo, de izquierda a derecha y en esencia compila
una estructura de árbol en la memoria para que sepa cómo representarla
por debajo del agua, por así decirlo.
De hecho, hemos visto HTML a nuestro alrededor
incluso si nunca hemos mirado por debajo del agua, como decimos.
De hecho, si voy a me gusta harvard.edu y
las redirecciones ocurren de la manera habitual, inspeccionaré la página.
Esta es otra manera en Chrome, y en otros navegadores
para tener a las herramientas de desarrollador.
Podemos hacer clic o clic derecho en la página web y seleccionar Inspeccionar,
eso despliega su misma pestaña.
Antes, usamos el panel Network, pero si hago clic en Elements
podemos ver todo el HTML que compone la página de Harvard,
y se ve hermoso.
Está muy bien codificado por colores.
Tiene una sangría muy bonita.
Puedo sumergirme más profundo con todas estas flechas,
es posible que no fue así como lo hicieron los humanos
porque si hago clic derecho o clic en Control y selecciono View Page Source,
también es posible hacerlo en cualquier navegador,
aquí está el desastre que devolvió el servidor de Harvard.
Esto es HTML, y Dios mío, es mucho.
No veo ninguna sangría, para style0 aquí, pero está bien
porque es un navegador que lo lee.
En este caso no es humano. De manera similar,
si visitamos algo como yale.edu, seguimos adelante y abrimos su página
fuente, será abrumadora y mucho de eso,
pero podemos estar seguros de que, aunque estas páginas web se vean
sofisticadas, como Dios mío, nunca hemos escrito un programa C con
más de 500 líneas de código,
muchas de estas cosas se generan, y de hecho,
uno de los desafíos de pset7 y pset8 cuando exploremos la programación web
será no escribir cientos de líneas de HTML, que
adormecen la mente rápidamente, pero escribiremos algunas líneas de Python
o unas pocas líneas de JavaScript mediante programación, con bucles,
genera toda la estructura de su página web.
Si es parecido una página web de fotos con un álbum de Facebook,
Facebook no tiene personas que escriban miles de líneas de código HTML
cada vez que cargamos una foto.
Ellos tienen código en PHP o en otro lenguaje
que tiene un bucle for que itera sobre todas las fotos que subimos
y genera el mismo HTML, con diferente imagen para cada una de las fotos
que subimos, es ahí donde la programación web entra en juego.
No escribimos el código HTML, lo generamos
al escribir programas.
Hoy preparamos el escenario para esa capacidad
pero primero necesitamos un marco para hacer esto.
En lugar de usar mi Mac local, que
es un poco patético porque puedo abrir la página web pero nadie más en el mundo
puede acceder a ella, si lo hacemos de nuevo,
noten que si hago doble clic en hello.html y abro la barra de URL,
es claramente curioso que no está en Internet.
No es http, no es https, es file: //,
lo que significa que es un archivo en mi computadora local.
No estaría al alcance de ninguno de ustedes, porque desde luego
este usuario jharvard existe solo en mi laptop Mac local.
Afortunadamente, tenemos un IDE basado en web con el que poner cosas
en Internet, pero hay una trampa.
El IDE en sí es una aplicación web, ¿cierto?
Es un código que fue escrito por amigos en Amazon, al que agregamos ejecuciones
en un servidor en alguna parte y también en su navegador, veremos
más sobre eso cuando hablemos de JavaScript,
CS50 IDE ya tiene las URL https://cs50.io o https://ide.cs50.io
diagonal cualquiera que sea nuestro nombre de usuario.
Ya usamos el puerto 80 o quizás el 443 para el IDE.
¿Cómo diablos podríamos escribir páginas web en el IDE
y luego servirlos en Internet si el IDE
usa el puerto estándar?
Afortunadamente, podemos escribir en los sobres,
se intenta el acceso a nuestras páginas web, del número de puerto codificado TCP.
No tiene que ser 80, no tiene que ser 443.
Esos son solo los valores predeterminados.
Si quiero visitar páginas en mi IDE,
puedo ejecutar un servidor web en un número de puerto diferente,
como 8,080 por convención u 8,081, 8,082.
Es un número bastante grande que nadie más usa en algún sistema.
Veamos esto de la siguiente manera.
A continuación, crearé un archivo nuevo.
Lo llamaré hello.html y
entraré en ese archivo de texto, ups, que cerré.
Proseguiré a tomar el código que
usamos aquí, que está aquí, regresamos al IDE,
lo pegamos en el archivo de texto, haremos clic en Save, y ahora tengo en el IDE
un archivo llamado hello.html, si miro en el buscador de archivos
y miro en el lado izquierdo, además del código de muestra,
es hello.html, pero si hago doble clic en este archivo no es
muy útil porque abrirá el editor, que
no es otra página web.
Es el código fuente de mi página web.
Necesito ejecutar un programa para que
este archivo funcione como Facebook, Google, Harvard
y Yale lo hacen, haré esto al ejecutar http-server,
y le diré que en el puerto 8080.
En este programa particular, -p significa puerto
solo le diré, hey CS50 IDE, inicié un programa llamado httpserver
cuyo propósito en la vida es escuchar las solicitudes en Internet,
en ese número de puerto, y hace que funcione cualquier solicitud que ingrese.
Iré directo a presionar Enter.
Se Inicia httpserver.
Me dice: la URL larga que está disponible en.
Nuestra URL será un poco diferente con nuestro nombre de usuario,
y si abro esto en otra pestaña, a primera vista, es un poco misterioso.
Ahora veo el índice o los contenidos de mi directorio, y ahí hay
un secreto, .c9 para el directorio de Cloud9.
No lo borres ni lo cambies.
Eso tiene metadatos relacionados con el IDE.
Antes, descargué Source6, también pueden hacerlo desde el sitio web del curso,
pero hay hello.html, y aquí, en el lado izquierdo
verán algunos permisos que tienen un aspecto complejo.
Tiene que ver con quién puede leer y quién puede escribir sus archivos,
pero por hoy, todo lo que me importa es que el archivo exista.
Así que ahora, como usuario de Internet, iré aquí, haré clic en él,
¡y voilà!
Ahí está mi página web.
Noten que las URL son muy similares.
Aquí estoy en cs50.io y aquí estoy en cs50.io,
aunque sus nombres de usuario por supuesto serán diferentes,
pero el IDE se ejecuta en el puerto predeterminado 443.
Ahora estoy sirviendo temporalmente a mis archivos HTML
y utilizo el puerto 8080, simplemente porque es así
como un servidor puede hacer varias cosas y como puedo hacer
varias cosas en el servidor a la vez.
Entonces, hagamos algo además de eso.
Voy a presentar algunos fundamentos más que
puede ser útiles al escribir HTML y para continuar haremos lo siguiente.
Voy crear un nuevo archivo y lo llamaremos
paragraphs.html, luego nombraré esto como párrafos y abajo
tengo algunos párrafos de texto,
y realmente no sé lo que quiero decir, así que voy a buscar en Google
algo de texto latino estándar.
Oh, quiero unos tres párrafos de texto parecido al latín, y aquí vamos.
Hay un sitio web aleatorio que simplemente genera
texto de marcadores de posición en latín falso.
Entonces, lo pego
y ahí están mis tres párrafos.
Seré un poco amigable y ordenado y les pondré sangría,
para que al menos se vea un poco bien diseñado.
Guardaré el archivo y ahora volveré a la URL que tenía hace un momento.
Noten que ahora tengo dos archivos servidos por el programa de servidor HTTP.
Doy clic en... oh.
OK, Chrome piensa que la página está en latín.
[RISAS]
"Fútbol y miedo elemento de urbanización y planificación del tiempo".
"Mañana soss tiemblan antes como el...",
eso se parece al latín que aprendí hace años.
Bien, entonces, Mostrar original.
El punto no es enfocarse en el latín, sino en el error aparente.
Algo como, ¿qué no hace y creíste que haría hace un segundo?
PÚBLICO: No tiene sangría.
DAVID: Sí, no tiene sangría, ¿y tampoco tiene qué?
No hay separación.
Quiero decir, este es un gran párrafo en latín,
no son tres.
Bueno, esto ocurre simplemente porque un navegador hace lo que le dices que haga.
Ahora reduciré esta ventana y, como dato extra,
lo que ven aquí, todo este lío en la ventana de terminal inferior,
como HTTP Server se está ejecutando, registra todas las solicitudes HTTP
que vienen de los navegadores solo para que podamos depurar o diagnosticar,
pero vamos a ignorar eso por ahora
y dejar que se ejecute aquí, en segundo plano.
Pero si quiero párrafos, necesito ser un poco más quisquilloso
y decir, hey navegador, haz un párrafo con lo que llamamos etiqueta p
y luego pon una sangría, aunque claramente poner una sangría
no es importante,
es solo para mantener mi código limpio y ordenado.
Y luego digo, hey navegador, comienza un párrafo.
Aquí está el texto.
Y después, hey navegador, acaba el párrafo.
Lo mismo aquí.
Entonces, comenzaré un párrafo.
Luego detendré el párrafo.
Observen que el IDE está tratando de ser útil.
Esto no es útil.
Esto no es una contraseña, pero está intentando autocompletar mis pensamientos.
Eso está bien.
Simplemente voy a ignorarlo.
Ahora cerraré el párrafo y lo guardaré.
Es más detallado, pero cualquier cosa que haya en las etiquetas, el humano
no lo verá, hasta que recargue la página, con comando o control + R,
o hasta que haga clic en el icono de recarga,
lo que aparezca en su navegador.
Ahora tengo tres párrafos en latín.
Entonces aquí es algo más deliberado.
Y ahora todo está bien, pero la web es más interesante
cuando se pueden vincular cosas.
Veamos qué sucede.
Ahora crearé un nuevo archivo llamado, digamos, link.html.
Pegaré esto aquí y llamaremos al enlace link.
Ahora eliminaré todo esto para tener un marcador de posición
y puedo decir algo como "¡Hello, world!
My favorite school is...
y solo para ir a lo seguro, stanford.edu.
Guardo, vuelvo a cargar, hago clic en link.html y... nada.
Entonces parece un nombre de dominio y ciertamente lo es, y francamente
es probable que estemos condicionados por herramientas como Slack, Gmail y otras
como Facebook, que simplemente se dan cuenta de que, oh,
si algo se parece a un nombre de dominio, conviértalo en un enlace,
pero eso es porque alguien en Facebook o en Google sabe HTML
y sabe cómo usar las condiciones if y los elses y solo dice, oh,
si una cadena que el humano escribió parece el final de un nombre de dominio
en .edu, conviértelo en enlace.
¿Pero cómo lo conviertes en un enlace?
Podemos hacerlo manualmente.
Resulta que necesitan una etiqueta de anclaje abreviada como
y luego cierran la etiqueta de anclaje al final del texto
que quieran anclar al enlace, pero esto no es suficiente.
Necesito ser muy explícito en cuanto a dónde quiero que vaya este enlace,
y resulta que HTML también admite lo que llamamos atributos.
Entonces las etiquetas son esas cosas que están en corchetes angulares.
Los atributos también están dentro de esos corchetes angulares,
pero vienen después del nombre de la etiqueta y solo
modificarán el comportamiento de la etiqueta, y aquí cobra sentido
tener que modificarlo porque hace 20,
o 30 años, cuando se inventó el HTML, no creamos
una etiqueta que nos llevara a stanford.edu.
Creamos una etiqueta más genérica que nos anclaba a algún destino,
y ahora puedo poner www.stanford.edu, guardar el archivo,
y noten que es como decirle al navegador, hey, navegador,
aquí viene un enlace o hipervínculo al sitio web de Stanford,
y luego el final aquí dice, hey, navegador, eso es todo para el enlace,
y afortunadamente no es súper detallado.
No tiene que repetir el atributo al final.
Simplemente repite el nombre de la etiqueta, de lo contrario
tendríamos que escribir lo mismo una y otra vez.
Si ahora regreso y vuelvo a cargar la página con comando o control + R,
ahora se convierte en el familiar enlace subrayado en azul,
y si hago clic en él, primero noten que es súper pequeño.
podemos ver hacia dónde nos llevará el enlace,
y si hago clic ahí, veremos el sitio web de Stanford y listo.
Ya pudimos visitar la página también, pero hay una interesante nota al margen,
si quieren pensar en cosas llamadas ataques de phishing
pues francamente, Harvard y Yale, de vez en cuando,
les enviarán por correo advertencias como "tenga cuidado con este ataque de phishing".
P-H-I-S-H-I-N-G, o suplantación de identidad.
Es cuando las personas en Internet generalmente
les envían correos electrónicos o algún tipo de spam tratando de engañarlos
para guiarlos a un sitio web falso y obtener usuarios, contraseñas, tarjetas
de crédito y otras cosas, y honestamente, la mayoría de esos ataques de phishing
se reducen a este ejemplo de 10 líneas de HTML
porque nada me impide decir algo como "Hola, mundo!
Confirma tu contraseña en... "
y luego poner algo como paypal.com y después
puedo cambiar esto para que quede algo como davidsphishingsite.com,
lo cual afortunadamente no existe.
Durante un año fui a badplace.com y...
bueno, entonces...
[RISAS]
Y guardé el archivo, lo volví a cargar, y el enlace es de color azul,
pero antes de hacer clic en él, solo los usuarios más astutos
se molestarían en revisar la esquina inferior izquierda
para ver a dónde están a punto de ser llevados
e incluso la mayoría de los que estamos en esta sala, incluido yo,
no estamos tan paranoicos como para revisar constantemente
revisando ese tipo de cosas.
Las probabilidades son que, si recibo un correo electrónico como este,
¡Oh, Dios mío! Mis cuentas están comprometidas.
tengo que confirmar mi contraseña de PayPal para proteger mi dinero.
Es muy posible que sigan el enlace,
pero pueden ir a cualquier lugar que deseen a través de este bloque de estructura básica,
pero esta es solo una forma en la que pueden examinar
lo que sucede por debajo el agua, pero por supuesto que Internet
es más interesante que solo texto.
A continuación abriré un ejemplo que preparé
de antemano usando image.html y veremos otra etiqueta aquí.
Entonces tenemos otra oportunidad para usar un atributo
y otro que tampoco es necesariamente visible para el usuario.
Entonces aquí hay una etiqueta de imagen.
Los humanos decidieron hace años que serían breves,
Usan img> para imagen, al igual a> para ancla.
La fuente, src, va a ser este archivo, dan.jpeg,
que descargué por adelantado en la URL de arriba,
y esto es gris en el IDE de CS50 porque es la sintaxis que lo resalta
igual que en C. Esto es un comentario en HTML.
Entonces, si quieren crear notas para ustedes o para los espectadores,
alguna frase o cita como esta,
pueden usar un comentario HTML poniendo ! // // > y luego escriben
entre los símbolos lo que quieran, en la mayoría de los casos.
Así que al igual que en C, tenemos el símbolo //.
Entonces, aquí está la fuente de esta imagen y esto
es como su explicación alternativa, alt. ¿Por qué podría ser convincente?
Quiero mostrar la imagen a un usuario.
¿Sí?
PÚBLICO: ¿Es como si pasaran el ratón sobre ella,
ellos pueden ver lo que está sucediendo.
DAVID: Sí, es un par de razones.
Si pasan el mouse sobre la imagen, podrán ver un texto descriptivo.
Es como el Guapo Dan, como la mascota de Yale.
Si el usuario tiene problemas para ver o está ciego,
es posible que necesite un lector de pantalla que le diga
lo que hay en ella, y no es obvio
de buenas a primeras lo que dan.jpeg puede ser,
pero si se cuenta con este texto alternativo, una computadora
puede recitar verbalmente Handsome Dan, lo cual
estimularía la memoria de la persona sobre lo que está en la pantalla.
O si tienen una conexión a Internet verdaderamente lenta,
a veces verán un marcador de posición para una imagen
que les dirá de qué trata la imagen antes de que esta se descargue.
Entonces, si somos conscientes de este tipo de cosas,
básicamente dará como resultado que sus sitios web sean más accesibles,
y de hecho si ahora voy a mi directorio src6
donde tenemos aún más ejemplos a nuestra disposición y vamos a la Imagen 6,
aquí está la foto del año pasado del adorable Guapo Dan.
Entonces aquí hay una etiqueta de imagen.
Ahora, podemos hacer maravillas con la anidación.
Esto no es tan interesante porque no va a ninguna parte,
pero podría combinar estas ideas.
Podría poner href = http://www.yale.edu o, si no quiero que el usuario
sufra molestias por ser redirigido, podría, de manera preventiva,
volverlo seguro, porque sé que Yale lo permite por adelantado,
y puedo anidar etiquetas como esta.
Ahora si voy aquí y vuelvo a cargar, todavía se ve igual,
pero note que mi cursor cambia como un puntero, y si de verdad hago clic en eso,
ahora la imagen conduce al sitio web de Yale, pero he descuidado algo,
Uno de estos no es como el otro.
¿Qué detalle me faltó mencionar?
Sí
PÚBLICO: el archivo de imagen se cierra dentro de sí mismo.
DAVID: Sí, la etiqueta de la imagen se cierra en sí misma,
entonces hay algunas anomalías de este tipo dentro de HTML,
donde realmente no hay una noción de "empezar a hacer algo
y luego, después de un tiempo, dejar de hacer algo.
Al igual, una imagen está allí o no lo está.
Conceptualmente no se puede poner algo en medio
y entonces algunas de estas etiquetas en HTML son lo que se llama vacías.
Ya que no deben tener nada después de la apertura de la etiqueta
o antes del cierre de la etiqueta.
Entonces, si quisieran ser más precisos podrían decir lo siguiente,
pero no deberían poner nada donde está mi cursor ahora
porque no tendría sentido tratar de poner algo dentro de una imagen,
pero es un poco aburrido dar tantos detalles innecesarios.
Podemos simplemente poner la diagonal ahí y, técnicamente, en HTML5
ni siquiera se necesita la diagonal en este caso, pero al menos de este modo,
y creo que para fines pedagógicos, hacerlo, incluso para etiquetas vacías,
ya que asegura y lo hace más claro visualmente, cuando las etiquetas
están equilibradas.
Esa es la única anomalía allí y luego
hay muchos otras que podemos mandar a volar rápidamente.
Entonces, si vuelvo a nuestros ejemplos, aquí preparé los encabezados.html.
Entonces, si quieren hacer algo como esto, si están
escribiendo un libro o un sitio web que tiene capítulos, secciones,
subsecciones y demás, HTML permite
formatear fácilmente cosas grandes y en negritas, o más pequeñas y en negritas,
o aún más pequeñas y en negritas y así, mediante las etiquetas h1 a h6.
Entonces, si voy a los encabezados, así es como hice esta página web.
Simplemente abro y cierro h1, h2, h3, h4, y eso es todo.
Entonces, cada vez que lean algún texto en línea,
lo más probable es que haya una o más etiquetas de formato en la página.
Si vemos otro ejemplo, aquí tenemos algo como list.html.
Las listas son frecuentes en Internet, no van a creer la número tres,
así es como pueden hacer algo en una lista con viñetas, marcando
tres palabras, foo, bar y baz
y el HTML para esto, si abro list.html,
simplemente se ve un poco más detallado ya que necesitamos un elemento padre,
por así decirlo, si tomamos prestada nuestra terminología de árboles,
pero aquí tenemos una lista desordenada, o ul, la cual
tiene uno o más elementos en la lista, o li, cada uno de los cuales
abre y cierra foo, bar y baz.
Y si los quiero numerados, también puedo
cambiar listas desordenadas a ordenadas, ol, volver a cargar y el navegador
se dará cuenta de la numeración, lo cual es bueno si tienen muchos datos
y no quieren lidiar con el hecho de explicarlos ustedes mismos.
Mientras tanto, podemos avanzar uno o dos pasos antes de
llegar a algo funcional.
Aquí tengo una de los más complicadas,
pero también le dice al navegador qué hacer.
Entonces, antes de ver el resultado dice: hey navegador, aquí viene una tabla,
con datos en forma de tabla.
Filas y columnas como Excel o Google Spreadsheets.
Hey navegador, aquí viene una fila de la tabla, o tr.
Hola navegador, dentro de esa fila, aquí viene una tabla de datos, también
conocida como celda o columna.
Aquí viene otra celda.
Entonces son una, dos, tres celdas seguidas.
Hola navegador, aquí vienen tres celdas más.
Hola navegador, aquí vienen tres celdas más y si
lo traducimos en el navegador, veremos el diseño de un teclado
de teléfono de la vieja escuela.
No es muy bonito, no está muy bien formateado,
pero si nos acercamos, veremos que está alineado en filas y columnas
como ya lo insinué antes, pero todo es muy decepcionante.
Por ejemplo, Google es genial porque puedes entrar
y buscar gatos y encontrar muchos gatos en Internet,
pero, ¿cómo funciona realmente?
Entonces, aw, hay malas noticias hoy.
OK, entonces, vamos a acercarnos a este.
OK, tratemos de enfocarnos en la pedagogía
de los gatos de la siguiente manera.
Trataré de enfocarme en la URL, que es algo larga y compleja,
pero me desharé de cualquier cosa que parezca confusa
o que no entienda.
No tengo idea de lo que significa source, así que me desharé de ello.
No tengo idea de lo que el resto significa,
así que voy a deshacerme de ello y trataré de depurar... dar por hecho,
con algo de previsión porque ya sabía cómo funcionaba Google aquí,
cambié la URL a algo mucho, mucho, mucho más simple.
Gatos, en www.google.com/search?q=cats.
Parece que, de una forma o de otra, el comportamiento de Google
está controlado por la información que se transmite en la URL,
y no solo porque estoy buscando,
es porque estoy buscando gatos.
Entonces, por capricho, voy a buscar perros, doy clic
en Enter y algunas cosas cambian.
Todas estas imágenes de perros aparecen a la derecha.
Tenemos aquí el texto previamente introducido y
podemos buscar cualquier cantidad de cosas,
como la broma de Harvard-Yale 2004, doy Enter,
y ahí tienen un artículo de Wikipedia sobre el video que vimos antes.
Entonces parece que podemos parametrizar el comportamiento de Google
solo con entender cómo funciona esta URL.
Por lo tanto, aquí está la ruta que solicitamos,
el archivo, carpeta o lo que sea eso.
Un signo de interrogación que dice, hey navegador, o hey servidor,
más bien, aquí van algunos parámetros HTTP.
Algunas entradas de un ser humano que completó un formulario o que aparentemente
está hackeando la barra de la URL y luego sigue el nombre del parámetro,
después de q, que significa "query" o consulta. Eso lo decidieron Larry y Sergey
hace años para su cuadro de búsqueda, un signo igual,
y luego cualquier cosa que escriba el humano.
Ahora, rápidamente se puso un poco raro aquí.
Ahora vemos un %20.
Esa es la forma en que la web codifica un espacio
de modo que no sea un espacio físico, sino una cadena contigua.
Entonces, es solo una cadena contigua para que el servidor la mire o la lea,
¿y por qué esto es útil?
Bueno, puedo aprovechar esta información
e implementar mi propio Google con bastante facilidad.
A continuación entraré en search.html, uno de los otros ejemplos que preparé,
y verán otra etiqueta junta.
Dentro del cuerpo de esta página hay una etiqueta de formulario HTML,
y la etiqueta del formulario toma un par de atributos que conozco.
Uno es la acción, que es la URL a la que
deseo enviar la información del formulario, y el otro
es el método que quiero usar
Ahora está en minúsculas de modo inconsistente, solo porque sí,
pero ya vimos ese verbo antes.
¿En dónde?
¿Dónde vimos este verbo antes?
Sería como el mensaje un tanto esotérico que iba, supuestamente,
dentro de uno de estos sobres cuando dijimos GET en mayúsculas /http1.1
y así sucesivamente.
Entonces parece que si, como desarrolladores web, quieren crear
un formulario HTML con cuadros de texto, casillas de verificación y menús
desplegables, y que envíe su información cuando el usuario haga clic en Enter
o en un botón a esta dirección, y quieren que vaya dentro de un
sobre virtual usando el verbo GET, solo decimos method=GET.
Y luego, aquí abajo, parece que tengo dos entradas, donde uno de sus nombres
es q, cuyo tipo es un cuadro de texto, y el otro
es un tipo de envío cualquiera, cuyo valor sea la búsqueda.
Solo sabrían lo que significan estas cosas si las ven en una demostración
o en alguna referencia en línea, pero si hacemos esto para ver los resultados
tenemos una súper simple...
Le haré un acercamiento...
una versión muy, muy simple de Google, ¿verdad?
Ni siquiera tiene el logotipo, pero afirmo que tiene toda la funcionalidad
vean lo que sucede si escribo, por ejemplo, gritos, pájaros y doy clic,
Buscar.
Dios mío, implementé Google con solo 15 líneas de código,
pero no es así realmente, ¿verdad?
Parece que he implementado la interfaz de Google,
en la cual tuve que buscar en Google estas cosas por adelantado
OK, estas son historias muy tristes.
[RISAS]
DAVID: Bien, entonces el punto es, el punto... vean acá, vean acá.
El punto es que la URL es lo que generé.
Entonces, usando esas etiquetas HTML junto con la cooperación del ser humano
y haciendo clic en un botón, entonces
genero esta URL, alejo al usuario del IDE,
hacia google.com, donde Google maneja la parte final,
hice todo el trabajo duro, revisé su base de datos,
renderize el HTML, hice la interfaz,
la interfaz de usuario mediante la cual se interactúa con la búsqueda del motor
de búsquedas de Google.
Y todo se reduce solamente a estos heurísticos básicos,
pero claro, este es un motor de búsqueda bastante horrible, ¿verdad?
Un cuadro de texto en blanco y negro, un botón gris y eso es todo.
Incluso Google, aunque es sencillo, tiene algo de color y estilo
y las cosas se enfocan y se espacian de manera diferente.
Así que esto es todo un arte, y de hecho
ser un diseñador web es toda una profesión
es más, dentro de esta área conocerán a algunas personas que son
muy buenas en diseño front-end,
hay otras muy malas en eso
y yo estoy entre las peores.
Mis páginas web también se ven como el cuadro de búsqueda de hace un momento,
pero algunas personas prefieren las cosas no gráficas, el back-end, lo relacionado
con las bases de datos, y uno de los puntos de partida en las próximas semanas
será que decidan por sí mismos si les gusta algo de esto
ciertamente, pero también cuáles son sus preferencias.
Y es posible que escuchen frecuentemente los términos del área,
como desarrollador front-end y desarrollador back-end.
Eso significa que trabajan en lo que el usuario ve en su navegador o aplicación
o que trabajan en el back-end, es decir, en cosas de las bases de datos
que son realmente importantes y en ocasiones bastante difíciles,
pero con las cuales el usuario no interactúa directamente.
O también hay desarrolladores full-stack, y eso significa que
hacen todo lo anterior, en lo cual todos ustedes, los que están en CS50,
se convertirán después de recibir uno o más semestres de formación.
Entonces, ¿cómo comenzamos para hacer las cosas más bonitas?
Bueno, resulta que HTML, en su mayor parte, es solo un lenguaje de marcado.
Sirve para estructurar una página web y etiquetar cosas semánticamente,
y con etiquetar cosas semánticamente, me refiero
a decir algo como, hey navegador, aquí está el encabezado de mi página
y eso, semánticamente, es un concepto.
Hey navegador, aquí está el cuerpo de mi página, y eso también
es un concepto, semánticamente.
No dije nada sobre el diseño en negrita o el tamaño de letra o los colores,
o todo eso que es importante para tener una buena experiencia de usuario, o UX,
pero eso se puede desacoplar de HTML, y de hecho,
uno de los desafíos, a medida que se aprende HTML por primera vez,
es tratar de abrirse camino a través de varios recursos en línea y referencias
que también combinarán a veces estas ideas.
Hoy nos enfocaremos, no solo en corrección o en hacer que las cosas funcionen,
sino también en el diseño.
Por ejemplo, aquí se tiene una página web súper simple
para alguien llamado John Harvard, la cual tiene
encabezado, parte principal, pie de página y el encabezado es distinto de un titular.
Está pésimamente nombrado aquí.
El titular de una página web es la barra de pestañas y otras cosas que hay arriba,
pero semánticamente podemos tener una página con tres partes iguales.
El encabezado, que es en sí como el título en el cuerpo de la página,
la parte principal donde están los contenidos
y luego un pie de página como un símbolo de copyright o algo así.
Entonces esta podría ser la división general de una página,
pero fíjense que le he puesto un estilo algo diferente.
Ahora abriré esto en un navegador, tal como lo hice hace un momento
y voy a ir a, perdón, voy a revisar todo mi historial de Internet.
Vamos a abrir esto tal como lo hicimos antes en esta URL
para que después podamos abrir CSS0.html.
Noten que, oh, esto ya es ligeramente mejor que las páginas
que vimos antes porque está centrado, lo cual ya es un avance
de todo lo anterior.
La primera línea es un poco más grande.
La segunda línea es mediana y la línea inferior es la más pequeña.
Aquí hay un poco de estilo, pero no tanto.
Entonces, ¿cómo hice esto?
Bueno, echen un vistazo a este código.
Le agregué un atributo de estilo a varias de mis etiquetas.
Así que el encabezado, la principal y el pie de página
no tienen un estilo específico.
Son solo una manera de decirle al navegador que
es lo importante para el título,
esto es lo importante para la parte principal,
esto es lo importante para el pie de página,
pero la estilización o la estética provienen de este texto amarillo,
gracias a la sintaxis IDE que lo resalta,
y observen que este texto sigue un patrón diferente.
Hasta ahora, hemos utilizado corchetes angulares, palabras,
signos de igual y citas.
Ahora dentro de esas citas también tenemos otro patrón
cuando utilizamos este segundo lenguaje, el CSS.
fontsize: large es la estilización para el contenido de este elemento en particular.
La alineación del texto debe estar centrada.
Estas son dos propiedades de CSS.
CSS, hojas de estilo en cascada, en un momento veremos qué significa eso,
pero así es como se configura el estilo de estos elementos,
y ciertamente, por eso uno es un poco más grande y luego un poco más pequeño
y luego aún más pequeño porque, fíjense, que puse fontsize:large, fontsize:medium,
fontsize:small.
Eso está bien, pero como ya lo hemos hecho, vamos a mejorarlo iterativamente.
Incluso si nunca antes han visto HTML o CSS,
hay un pobre intento de diseño en este simple ejemplo.
¿Qué creen que está mal o que parece algo de copiar y pegar?
Sí
PÚBLICO: Todos están centrados [INAUDIBLE].
DAVID: Sí, todos están centrados
y me gusta copiar y pegar esa propiedad CSS, su valor par clave
su nombre y su valor, una y otra
y otra vez, pero recuerden la jerarquía de HTML
y el DOM, Document Object Model, el árbol que dibujamos hace un momento.
Todos estos elementos, encabezado, principal y pie de página,
tienen un elemento padre llamado ¿cómo?
PÚBLICO: Cuerpo.
DAVID: Sí, cuerpo.
Entonces, un nivel más alto, que tiene una sangría como esta,
o en el árbol está más arriba, en ese dibujo de árbol familiar, todos
son hijos del cuerpo
¿Por qué no me limito a mover o factorizar el centro de alineación del texto
en los elementos de arriba?
Y aquí se encuentra la cascada de CSS.
Las hojas de estilo en cascada significan que si tienen una propiedad aquí,
caerá en cascada a todos los niños y descendientes que estén debajo de ella,
y significa otra cosa también.
Que incluso pueden anular estas propiedades de alguna manera,
pero veremos eso muy pronto.
Entonces, si a continuación abro CSS1.html,
noten que hice exactamente esa mejora.
El código ahora está un poco más ajustado.
Tiene menos caracteres, es más fácil de mantener
porque ahora si quiero cambiarlo a izquierda o derecha o al centro,
Lo cambio en un lugar, no en tres.
Esto es consistente con algunos de nuestros consejos de diseño en C
y, de hecho, si visito la página de CSS1.html se ve igual,
pero tiene mejor diseño por debajo del agua.
Pero podemos mejorarlo aún más.
Si abro CSS2.html, observen que hice lo siguiente.
Me gusta mucho este diseño porque es aún más breve.
Ya no estoy usando el atributo de estilo.
Estoy usando un atributo diferente llamado clase,
y la clase es una especie de manera para definir,
al igual que una estructura en C permite definir sus propios tipos de datos,
una clase en CSS permite definir un nombre para un conjunto completo de propiedades,
entonces, acabo de decir vamos a llamar a esta clase grande, mediano y pequeño,
y no sé lo que eso significa, francamente
debería trabajar con un amigo que sea mucho mejor en diseño
de lo que soy y dejar que defina por mí estos significados.
Voy a etiquetar semánticamente las cosas de la siguiente forma,
pero si nos desplazamos por el archivo, verán que por ahora no tengo tal amigo,
así que lo implementé yo mismo, y aquí está, por primera vez,
otra cosa en el titular de la página.
Por el momento obtuvimos el título, pero resulta
que podemos tener una etiqueta de estilo.
No solo un atributo, sino una etiqueta de estilo dentro de la cual,
es un poco complejo a primera vista, pero claramente aquí hay un patrón.
Tiene todas esas propiedades, pero la nueva sintaxis aquí
es que si queremos definir una palabra llamada centrado,
ponemos un punto y luego la palabra "centered".
Si queremos la palabra grande, ponemos .large.
Por lo tanto, es similar aunque no es lo mismo que typedef en C,
pero ponemos .center, .large, .medium, .small.
Usaremos nuestras viejas llaves curvas, que solo veremos en CSS,
y esto solo define una o más propiedades
que se asociarán con esa nueva palabra clave.
Entonces, si nos desplazamos hacia abajo hasta el final,
Verán que centré el cuerpo.
Hice grande el encabezado, mediana la principal, y pequeño el pie de página,
y el resultado será exactamente el mismo.
Es muy decepcionante, pero una vez más, es ligeramente un mejor diseño
porque ahora estamos a solo un paso de mejorarlo realmente .
Si finalmente consiguiera a ese amigo,
no sería muy fácil la colaboración, definitivamente.
si ambos trabajáramos en el mismo archivo y, además,
pareciera innecesario introducir estas semánticas.
¿Por qué debo tener etiquetas como encabezado, principal y pie de página
y clases llamadas grandes, medianas, pequeñas y centradas?
¿Por qué no aprovecho los nombres de estas etiquetas?
Y aquí es donde HTML puede ser bastante poderoso.
Noten que simplifiqué arriba algunos de mis CSS.
Quité el punto que equivalía a typedef,
como, dame algo que se llama grande, dame algo que se llama mediano.
Ahora solo digo una palabra, ¿pero esas palabras son idénticas a qué?
AUDIENCIA: A las etiquetas.
DAVID: A las etiquetas en sí.
Etiquetas preexistentes, si las menciono por su nombre sin un punto,
lo cual me da un nuevo nombre.
Solo menciono el cuerpo, el encabezado, la principal y el pie de página,
y luego, dentro de las llaves, defino mis propiedades,
ahora puedo estilizar las etiquetas tal como existen en mi página,
y esto ahora parece un HTML verdaderamente legible y actualizable.
Aquí no hay ninguna estética asociada con el lenguaje de marcado,
más bien hay nombres de etiquetas útiles que vienen con HTML,
no podemos simplemente hacer nuestras propias etiquetas.
En cierto modo están en la documentación, pero ahora son mucho más legibles
y esto puede verse diferente en nuestros teléfonos o en la computadora portátil,
pero mi amigo, que es bueno en estilización, puede descubrir
cómo dar estilo a todas estas cosas, y lo que es mejor aún, ni siquiera
necesita mi archivo.
Fíjense que el quinto ejemplo es para la página.
Nos deshicimos de la etiqueta de estilo grande y la reemplazamos, ¿con qué?
PÚBLICO: Href, ¿con un enlace?
DAVID: Sí, con el enlace href, que es un nombre horrible, horrible,
porque no es como un enlace en la página y su hiperreferencia
ya se usó para un enlace en una página, pero esto es con lo que estamos atrapados.
Esto solo dice, hola, navegador, incluye este archivo CSS
que está en algún otro lugar del servidor.
El nombre de este archivo, arbitrariamente, es CSS4.css
porque es nuestro quinto ejemplo aquí, en el índice cero.
La relación de ese archivo con esta página
es que es una hoja de estilos, solo una lista de estéticas o propiedades
que deberían caracterizar su diseño y, de hecho, si abro CSS4.css,
acabo de copiar y pegar todo allí,
pero en principio esto es bueno, aunque solo estamos
creando trabajo para nosotros hoy, porque ahora
puedo compartir este archivo con otra persona
quién puede trabajar en ello por su propia cuenta.
Entonces podemos fusionar nuestro trabajo, porque el mío está en el archivo HTML
y su trabajo está en el archivo CSS.
Mejor aún, si estamos haciendo un sitio web completo que tiene 12 páginas o 100,
consideren lo siguiente.
Al igual que en un archivo de encabezado en C, puedo incluir bitmap.h
en todo tipo de programas.
Del mismo modo, puedo incluir CS4.css en todas mis páginas web.
Entonces, si quiero cambiar el tamaño de la fuente o el diseño
o lo que sea en todo mi sitio web, todo a la vez, lo cambio en un solo lugar
y no en cada maldita página web que podría haber sido creada por mí o por
alguien más, así que solo hay que mantener eso también,
pero podemos hacerlo aún mejor, porque incluso el CSS que vemos aquí
es muy bueno, y lo que es realmente agradable
es que si vamos a bootstrap, dejen que Google me diga adónde ir,
estamos a salvo.
OK, entonces Bootstrap es una biblioteca, anteriormente era de Twitter, ahora
es de una comunidad mucho más grande, es un montón de bibliotecas de CSS.
Entonces, al igual que en C, tenemos código y funciones que otros escribieron.
Así, en el mundo del desarrollo web tenemos
código que otras personas escribieron y lo usamos para JavaScript y Python,
pero incluso para la estética hay sitios como Bootstrap
y otras cosas populares que nos permiten hacer que nuestros sitios sean más bonitos
y construirlos más rápido sin tener que reinventar la rueda.
Entonces, por ejemplo, si bajo a Content y luego voy a Typography
y echo un vistazo aquí, verán algo como h1, h2 y h3,
pero si quieren cosas aún más grandes que eso, hay un encabezado de pantalla.
Tenemos esta versión elegante, que tiene un encabezado de visualización elegante
con algo de texto secundario difuminado.
Es bastante secundario, pero no tengo que descubrir cómo hacerlo ahora mismo.
Si realmente quiero tener tablas, puedo hacer tablas mucho más bonitas
de lo que hice con mi pequeño teléfono de la vieja escuela hace un rato.
Como si pudiera hacer cosas de diferentes colores.
Puedo sombrear las columnas así y puedo hacer cosas aún más elegantes.
Si a continuación abro una página web y voy
a nuestro gran tablero para obtener speller.cs50.net,
verán que esta es una tabla bastante buena.
Ciertamente mucho mejor que la anterior, pero eso
se debe a que estamos usando la biblioteca de Bootstrap,
y aún más convincente que la estética,
supongamos que visitan speller.cs50.net en su teléfono,
comienza a ponerse bastante feo una vez que la ventana se hace más pequeña,
pero noten que las cosas simplemente pueden desaparecer como por arte de magia
cuando estamos en un dispositivo móvil o, en este caso,
cuando simulamos que utilizamos una ventana de navegador más pequeña.
Entonces, si usamos CSS y el poder estético que brinda,
también podemos cambiar dinámicamente nuestros archivos para que se procesen
de forma diferente en diferentes dispositivos, y finalmente abriré, por ejemplo,
esto en Componentes.
Aquí es donde se pone realmente jugoso el asunto.
Si desean alertas sofisticadas para gritar al usuario o decir que todo está bien,
se obtienen lindas cajas de colores como esta.
Los formularios son mucho más bonitos.
Es decir, ya se parece mucho más a la web que ustedes y yo usamos
y no al desorden que creé hace un momento
y para no hacer más larga la historia, al igual que en C, es muy
fácil incluir estas cosas en nuestro propio sitio, así que podemos hacerlo.
A continuación abriré form0.html, y esto es
una aproximación de la primera aplicación web que hice
en 1997, mucho antes de que aplicación web fuera una frase.
Yo había tomado CS50 y CS51.
No había aprendido nada sobre la web en ese momento.
Podría decir que me lo enseñe a mí mismo y aprendí
de algunos amigos y lo primero que hice fue
construir un sitio web interactivo en el cual los primeros años podrían registrarse
para los deportes intramuros pues ese año, en 1996, se hacía en papel.
Cruzaban el patio hacia Wigglesworth, uno de los dormitorios,
deslizaban una hoja de papel, al estilo antiguo, por debajo de la puerta
y ya estaban registrados para un deporte.
Podíamos hacerlo mejor, incluso en 1997, y lo hicimos con la web,
y así, este formulario0 de esos tiempos se veía un poco feo como este,
pero tenía un cuadro de texto donde podían escribir su nombre
y luego estaba el dormitorio donde podían seleccionar a Matthew.
Entonces podía poner David Malan, Matthews y luego hacer clic en Registrar,
pero aún no tenemos la capacidad de hacer backbends.
Así que este formulario no irá hoy a ninguna parte, pero al menos
obtuvieron este tipo de estética, una especie de estética de 1997.
Pero si vemos este otro ejemplo, form1.html,
se ve muy bonito, bastante mejor ahora.
Tal vez un poco grande en retrospectiva, si vemos la fuente en la pantalla,
pero todo lo que he hecho ahora es usar esta biblioteca de Bootstrap.
Observen que es un poco difícil de ver en el proyector,
pero todo está muy bien delineado.
Tiene un texto de ejemplo de Mark Zuckerberg que
podemos ignorar si escribimos nuestra propia dirección de correo electrónico.
Tenemos una caja de aspecto más bonito, un botón de aspecto más bonito, y eso es
porque si abrimos, como lo hago aquí abajo,
form1.html, observen que, además de mi HTML,
y además de un par de otras cosas que agregué
a fin de que sea más amigable para dispositivos móviles en particular,
también añadí esto.
Leí la documentación en getbootstrap.com
y agregué la biblioteca de Bootstrap a mi propio código
para tener acceso a sus características reales,
y luego... esto luce un poco abrumador a primera vista,
pero simplemente seguí las instrucciones.
Hay algo llamado div en HTML que hace una división de la página.
Significa que me da esta región rectangular invisible.
La clase I asociada con ello se llama grupo de formulario.
Y yo no inventé esta palabra,
viene desde Bootstrap.
Yo solo hice lo que me dijeron que hiciera.
Luego tengo una etiqueta que vuelve las cosas más accesibles
y podemos hacer clic en diferentes lugares.
Tengo otra clase aquí, pero para no hacer más larga la historia,
solo leo la documentación porque sé cuáles etiquetas son,
Sé cuáles son los atributos.
Ahora sé un poco de CSS, sé cómo funciona HTTP,
y tengo suficientes elementos básicos para trabajar en esto yo mismo.
Entonces esto es CSS y hay un último detalle que pensé que nos mostraría.
En todos estos ejemplos de John Harvard que vimos hace un momento,
teníamos algo así en la parte inferior.
Este signo ©
¿Cuál era esa representación, si la distinguen, en la página web?
PÚBLICO: Copyright.
DAVID: Sí, el símbolo de copyright.
En mi teclado de los Estados Unidos no hay ningún símbolo de copyright.
Entonces necesitamos una especie de patrón de caracteres
con los cuales podamos representar a los de HTML.
Así como tenemos / n y otros caracteres especiales de escape en C,
también tenemos los que se llaman entidades HTML en HTML, lo cual sabrían
si leen la documentación, pero ese es el símbolo de copyright,
y pensé que era bastante oportuno destacarlo porque ayer
o esta mañana, Apple anunció que en la nueva versión de iOS que
pronto podrán descargar, agregaron aún más tontos emojis al conjunto de
caracteres para los Emojis.
Ciertamente están de moda en estos días
y no solo vemos ahora una manera de representar caracteres especiales
que de otra manera no podríamos escribir usando HTML, pues resulta
que los emojis son solo chars, caracteres,
pero no son de 8 bits.
Recuerden que C, tal como hemos estado usando,
utiliza ASCII, que solo utiliza 7 u 8 bits en total y los emojis, Dios mío.
Hay muchos ahora y necesitamos más que 8 bits
para representarlos, así nació algo llamado Unicode.
Bueno, esa no es la razón por la que Unicode fue inventado,
pero es para lo que se utiliza, porque estos emojis simplemente son
caracteres ASCII pero con múltiples bytes, generalmente dos bytes,
tal vez tres bytes, y de hecho, si visitan unicode.org,
verán que el número en hex 1F600 representa a la carita sonriente,
lo cual se implementa de diferente manera por distintas empresas
en diferentes dispositivos, pero si lo cierro aquí,
abro este mismo archivo y lo cambio a 1F600 en hexadecimal, 1-F-6-0-0, guardar,
y vuelvo a mi navegador y luego vuelvo a CSS0,
ahora tenemos una página web muy feliz.
Y eso es todo por hoy.
Me quedaré para responder preguntas, nos vemos la próxima vez.