1
00:00:00,000 --> 00:00:05,679
Hoy vamos a meternos de lleno en ese viaje tan fascinante que transforma una simple idea,

2
00:00:05,879 --> 00:00:11,320
una pequeña chispa, en esa página web que vemos y usamos en nuestras pantallas todos los días.

3
00:00:11,880 --> 00:00:14,539
Es una pregunta que seguro que más de una persona se ha hecho.

4
00:00:14,900 --> 00:00:19,100
Porque, a ver, detrás de cada clic que hacemos, de cada página que carga, hay todo un mundo.

5
00:00:19,519 --> 00:00:21,699
Un universo invisible de código, de diseño.

6
00:00:22,079 --> 00:00:23,699
Pero, ¿qué se esconde ahí de verdad?

7
00:00:24,039 --> 00:00:25,239
Pues vengo, vamos a descubrirlo.

8
00:00:25,719 --> 00:00:27,899
Vale, pues este va a ser nuestro recorrido de hoy.

9
00:00:28,140 --> 00:00:30,739
Primero, veremos la anatomía de una web, su esqueleto.

10
00:00:31,120 --> 00:00:33,520
Después, los tres lenguajes que son la clave de todo.

11
00:00:33,939 --> 00:00:36,840
Echaremos un vistazo a cómo se puede construir una web sin saber código,

12
00:00:37,259 --> 00:00:40,060
dónde vive en Internet, cómo hace Google para encontrarla

13
00:00:40,060 --> 00:00:43,119
y, por último, algo fundamental, por qué hay que cuidarla.

14
00:00:43,740 --> 00:00:46,039
Vamos a empezar por el principio, por los cimientos.

15
00:00:46,600 --> 00:00:50,939
Para entenderlo todo mucho mejor, vamos a imaginar que una página web es como una casa.

16
00:00:50,939 --> 00:00:54,020
Y claro, antes de poner un solo ladrillo, ¿qué hace falta?

17
00:00:54,420 --> 00:00:56,840
Pues un plano, ¿verdad? Una estructura bien definida.

18
00:00:56,840 --> 00:01:01,859
Y aquí una distinción importante, porque a menudo se confunden estos dos términos

19
00:01:01,859 --> 00:01:06,219
Un sitio web sería la casa entera con todas sus habitaciones y pasillos

20
00:01:06,219 --> 00:01:10,079
Y una página web es, pues eso, solo una de esas habitaciones

21
00:01:10,079 --> 00:01:12,840
Son dos cosas distintas, pero que obviamente van de la mano

22
00:01:12,840 --> 00:01:17,219
Y si nos fijamos bien, aunque cada web nos parezca un mundo diferente

23
00:01:17,219 --> 00:01:21,659
La gran mayoría, por no decir todas, comparten el mismo esqueleto universal

24
00:01:21,659 --> 00:01:26,459
Una estructura básica dividida en tres partes, que sirve para organizarlo todo

25
00:01:26,459 --> 00:01:48,680
Es muy sencillo. Mirad, arriba del todo está la cabecera, que es donde solemos encontrar el logo, el menú para navegar, lo primero que vemos. Luego, en medio, está el cuerpo, que es la chicha, el contenido principal, que cambia de una página a otra. Y abajo del todo, el pie de página, donde se suele poner la información de contacto, los enlaces a redes sociales, los avisos legales, esas cosas.

26
00:01:48,680 --> 00:01:53,500
Vale, ya tenemos el plano, la estructura. ¿Y ahora qué? Pues ahora tocan los materiales de

27
00:01:53,500 --> 00:01:57,579
construcción. Siguiendo con la metáfora de la casa, los lenguajes de programación serían los

28
00:01:57,579 --> 00:02:02,099
ladrillos, la pintura, los cables… Y hay tres que son absolutamente esenciales.

29
00:02:02,519 --> 00:02:08,939
El primero es el HTML. Este es, literalmente, el esqueleto, los huesos de la casa. No se preocupa

30
00:02:08,939 --> 00:02:14,120
de si queda bonito o feo, solo de la estructura pula y dura. Le dice al navegador, oye, esto es

31
00:02:14,120 --> 00:02:19,199
un titular, esto de aquí es un párrafo y aquí ponme una imagen. Es el armazón que lo sujeta

32
00:02:19,199 --> 00:02:25,360
absolutamente todo. Después entra en juego el CSS. Si el HTML son los ladrillos y las paredes,

33
00:02:25,659 --> 00:02:31,000
el CSS es el equipo de decoración y de interiorismo. Es el que llega y dice, vamos a pintar esta pared

34
00:02:31,000 --> 00:02:36,060
de azul, este texto va a tener esta tipografía y dejemos un poco más de espacio aquí. Vaya,

35
00:02:36,259 --> 00:02:41,639
que es el que se encarga de que todo tenga buen aspecto. Y por último tenemos a JavaScript. Esto

36
00:02:41,639 --> 00:02:46,939
es la magia, la electricidad de la casa. Es lo que hace que las cosas pasen, que cuando pulsas un

37
00:02:46,939 --> 00:02:52,039
botón ocurra algo, que amarezca una animación, que un mapa se mueva. En definitiva, le da vida,

38
00:02:52,280 --> 00:02:57,319
le da interactividad a la página. O sea que la clave está en cómo trabajan juntos estos tres.

39
00:02:57,780 --> 00:03:03,199
Hay que pensar que con HTML y CSS por sí solos lo que tenemos es algo estático, como si fuera una

40
00:03:03,199 --> 00:03:08,379
foto o un folleto de papel. Puede ser muy bonito, sí, pero no se puede interactuar con él. Es

41
00:03:08,379 --> 00:03:13,599
JavaScript el que lo convierte en algo vivo, en una experiencia dinámica. Pero bueno, todo esto

42
00:03:13,599 --> 00:03:18,639
suena a que hay que ser un experto programador, ¿no? Pues la buena noticia es que hoy en día ya

43
00:03:18,639 --> 00:03:23,039
no necesariamente. Han surgido un montón de herramientas, como si fueran herramientas

44
00:03:23,039 --> 00:03:28,580
eléctricas de última generación, que nos lo ponen todo mucho más fácil. Por un lado están los CMS,

45
00:03:29,080 --> 00:03:34,300
los sistemas de gestión de contenidos. El más famoso es WordPress, seguro que suena. Esto es

46
00:03:34,300 --> 00:03:38,460
como comprar una casa prefabricada. Ya tienes la estructura base y solo hay que preocuparse

47
00:03:38,460 --> 00:03:42,599
de decorarla y llenarla con el contenido, sin tener que tocar ni una sola línea de

48
00:03:42,599 --> 00:03:47,439
código. Y luego están los editores Wysi Wysi G. Un nombre un poco raro que viene del

49
00:03:47,439 --> 00:03:52,020
inglés de What you see is what you get, que significa lo que ves es lo que obtienes. Y

50
00:03:52,020 --> 00:03:55,879
es exactamente eso. Con estas herramientas se van arrastrando y soltando elementos en

51
00:03:55,879 --> 00:04:00,439
la pantalla y se ve cómo va a quedar al momento. Es súper intuitivo, casi como si estuviéramos

52
00:04:00,439 --> 00:04:06,099
maquetando una revista. Perfecto, ya tenemos la casa construida, sea con código o con estas

53
00:04:06,099 --> 00:04:10,840
herramientas. Pero claro, una casa no puede flotar en el aire. Necesita un terreno donde

54
00:04:10,840 --> 00:04:15,280
estar y, por supuesto, una dirección para que la gente sepa cómo llegar. Pues en el mundo de

55
00:04:15,280 --> 00:04:20,540
Internet ese terreno es el hosting. Es un servicio que se contrata para guardar todos los archivos de

56
00:04:20,540 --> 00:04:26,019
la web en un ordenador siempre conectado. Y la dirección es el nombre de dominio, el famoso

57
00:04:26,019 --> 00:04:34,620
www.loquesea.com. Son las dos piezas imprescindibles. Sin terreno y sin dirección, la casa es invisible

58
00:04:34,620 --> 00:04:39,180
larga. Claro, porque se puede tener la casa más espectacular del mundo, con la dirección

59
00:04:39,180 --> 00:04:44,220
más chula. Pero, si no aparece en el mapa, ¿cómo la van a encontrar? Y hoy en día

60
00:04:44,220 --> 00:04:47,680
el gran mapa de Internet es, básicamente, Google.

61
00:04:48,199 --> 00:04:53,339
El trabajo de Google, simplificándolo mucho, tiene tres fases. Primero, sus arañas o bots

62
00:04:53,339 --> 00:04:56,240
no paran de recorrer Internet para descubrir páginas nuevas.

63
00:04:56,600 --> 00:04:57,899
A eso se le llama rastreo.

64
00:04:58,100 --> 00:05:00,220
Segundo, todo lo que encuentran lo analizan

65
00:05:00,220 --> 00:05:02,259
y lo guardan en una biblioteca gigantesca.

66
00:05:02,560 --> 00:05:03,560
Eso es la indexación.

67
00:05:03,980 --> 00:05:05,180
Y tercero, y lo más importante,

68
00:05:05,579 --> 00:05:06,480
cuando alguien busca algo,

69
00:05:06,779 --> 00:05:09,360
su algoritmo decide qué páginas son las más relevantes

70
00:05:09,360 --> 00:05:10,100
y las ordena.

71
00:05:10,439 --> 00:05:12,180
Por eso no solo importa que Google te encuentre.

72
00:05:12,500 --> 00:05:14,060
Lo que importa es que te ponga el primero.

73
00:05:14,459 --> 00:05:16,720
Y ya para terminar, un punto que a veces se olvida.

74
00:05:17,079 --> 00:05:19,420
Hemos construido la casa, la hemos puesto en el mapa

75
00:05:19,420 --> 00:05:20,160
y ya está.

76
00:05:20,579 --> 00:05:20,899
Pues no.

77
00:05:21,339 --> 00:05:22,439
Igual que una casa de verdad,

78
00:05:22,439 --> 00:05:27,899
una web necesita mantenimiento. No se puede construir y abandonar a su suerte. Y mantenerla

79
00:05:27,899 --> 00:05:33,720
significa muchas cosas. Significa actualizar el contenido, que no se quede anticuado, reparar

80
00:05:33,720 --> 00:05:38,660
enlaces que se hayan roto, optimizar que cargue rápido, que nadie tiene paciencia. Y algo que

81
00:05:38,660 --> 00:05:44,379
hoy es vital, asegurarse de que se ve perfectamente en un móvil. Una web que no se cuida es como una

82
00:05:44,379 --> 00:05:48,839
tienda con el cartel de cerrado en la puerta. Al final, como hemos visto, crear una web es

83
00:05:48,839 --> 00:05:54,060
una mezcla de muchas cosas, de estructura, de diseño, de funcionalidad, pero lo más

84
00:05:54,060 --> 00:05:57,839
interesante de todo es que hoy en día las herramientas para hacerlo están al alcance

85
00:05:57,839 --> 00:06:02,420
de cualquiera. Cualquiera puede construir su propio rincón en Internet. La gran pregunta

86
00:06:02,420 --> 00:06:06,079
ahora es ¿qué se va a construir en ese rincón? ¿Qué historia se va a contar?