first commit

content/wp-content/uploads/article/subtitles/2019/03/introduccion-es.vtt

@@ -0,0 +1,606 @@
+WEBVTT
+
+1
+00:00:00.880 --> 00:00:05.040
+Hola que tal bienvenidos aquí a Cybersy, a Conocimientos Libres
+
+2
+00:00:06.080 --> 00:00:07.040
+Vamos a iniciar
+
+3
+00:00:07.040 --> 00:00:07.980
+con el
+
+4
+00:00:07.980 --> 00:00:10.840
+pequeño curso de HTML
+
+5
+00:00:10.840 --> 00:00:13.300
+vamos a ver los fundamentos de HTML
+
+6
+00:00:15.280 --> 00:00:18.580
+HTML5 es un lenguaje
+
+7
+00:00:18.580 --> 00:00:20.580
+de Marcado
+
+8
+00:00:20.580 --> 00:00:21.780
+que permite
+
+9
+00:00:21.780 --> 00:00:24.040
+estructurar la página web
+
+10
+00:00:25.320 --> 00:00:26.620
+de manera sencilla
+
+11
+00:00:27.580 --> 00:00:29.500
+para poder así luego
+
+12
+00:00:30.520 --> 00:00:31.500
+mantener
+
+13
+00:00:32.460 --> 00:00:34.840
+un posicionamiento adecuado
+
+14
+00:00:35.720 --> 00:00:38.300
+sobre la página web
+
+15
+00:00:39.060 --> 00:00:41.000
+ya se para temas de SEO
+
+16
+00:00:42.420 --> 00:00:43.040
+para...
+
+17
+00:00:45.140 --> 00:00:46.360
+Entregar
+
+18
+00:00:46.360 --> 00:00:49.160
+una buena información al usuario
+
+19
+00:00:49.160 --> 00:00:50.460
+cuando visite
+
+20
+00:00:50.460 --> 00:00:52.460
+cualquier sitio web
+
+21
+00:00:53.100 --> 00:00:55.920
+la versión actual de HTML es:
+
+22
+00:00:55.920 --> 00:00:57.920
+5.2
+
+23
+00:01:00.200 --> 00:01:03.240
+que tiene que ver con HTML
+
+24
+00:01:03.240 --> 00:01:05.240
+viene de las siglas en inglés
+
+25
+00:01:05.680 --> 00:01:08.160
+HyperText Markup Lenguage = HTML
+
+26
+00:01:08.880 --> 00:01:11.880
+Lenguaje de Marcado de HyperTexto
+
+27
+00:01:12.060 --> 00:01:13.480
+¿qué quiere decir esto?, pues...
+
+28
+00:01:13.480 --> 00:01:15.480
+que es un lenguaje de marcado
+
+29
+00:01:15.480 --> 00:01:17.300
+no es un lenguaje de programación
+
+30
+00:01:17.360 --> 00:01:18.780
+es un lenguaje de marcado
+
+31
+00:01:21.540 --> 00:01:24.860
+¿qué tiene la versión 5?
+
+32
+00:01:25.080 --> 00:01:27.760
+nos dice que debemos de...
+
+33
+00:01:29.020 --> 00:01:30.820
+utilizar etiquetas
+
+34
+00:01:31.500 --> 00:01:32.740
+etiquetas
+
+35
+00:01:34.000 --> 00:01:35.440
+semánticas
+
+36
+00:01:35.820 --> 00:01:40.440
+que le den sentido a la información que se publica dentro de la web
+
+37
+00:01:44.920 --> 00:01:45.860
+primero
+
+38
+00:01:46.400 --> 00:01:50.100
+por ejemplo tenemos aquí cargada la página de conocimientos Libres
+
+39
+00:01:51.160 --> 00:01:53.700
+vamos a ver su código fuente
+
+40
+00:01:54.440 --> 00:01:57.020
+que este caso sería el HTML
+
+41
+00:01:57.740 --> 00:01:59.560
+para que apareza todo eso
+
+42
+00:01:59.760 --> 00:02:00.700
+vamos a ver...
+
+43
+00:02:01.180 --> 00:02:02.620
+su código fuente
+
+44
+00:02:03.720 --> 00:02:06.320
+simplemente bastaría con dar click derecho
+
+45
+00:02:07.960 --> 00:02:11.720
+ver código fuente, en este caso está en inglés dice: view page source
+
+46
+00:02:19.120 --> 00:02:20.520
+si observáis bien
+
+47
+00:02:21.800 --> 00:02:24.200
+podéis ver que para poder declarar
+
+48
+00:02:24.200 --> 00:02:25.780
+un archivo...
+
+49
+00:02:25.780 --> 00:02:27.780
+HTML, un documento HTML
+
+50
+00:02:27.780 --> 00:02:32.000
+la primera etiqueta obligatoria es ponerle el tipo de documento
+
+51
+00:02:32.000 --> 00:02:34.000
+HTML
+
+52
+00:02:36.320 --> 00:02:38.240
+luego vemos...
+
+53
+00:02:39.520 --> 00:02:42.080
+a esto se le llama etiqueta
+
+54
+00:02:43.900 --> 00:02:46.600
+hay etiquetas que se cierran solas
+
+55
+00:02:47.080 --> 00:02:48.760
+como las etiquetas <meta>
+
+56
+00:02:49.220 --> 00:02:50.640
+es decir
+
+57
+00:02:51.900 --> 00:02:53.920
+se puede escribir en una sola línea
+
+58
+00:02:54.780 --> 00:02:57.000
+por ejemplo aquí etiqueta <meta>
+
+59
+00:02:57.720 --> 00:03:00.240
+y aquí tiene una pequeña barra que indica
+
+60
+00:03:00.400 --> 00:03:02.700
+que esta etiquete se cierra
+
+61
+00:03:02.840 --> 00:03:05.200
+en la misma etiqueta
+
+62
+00:03:08.180 --> 00:03:09.760
+aquí
+
+63
+00:03:11.540 --> 00:03:12.660
+la barra
+
+64
+00:03:13.580 --> 00:03:14.780
+que puedes observar ahí
+
+65
+00:03:17.660 --> 00:03:20.820
+si trabajarmos con XML es obligatoria
+
+66
+00:03:21.520 --> 00:03:22.500
+pero
+
+67
+00:03:22.500 --> 00:03:25.660
+cuando estamos trabajando con HTML5
+
+68
+00:03:25.940 --> 00:03:27.200
+esa barra
+
+69
+00:03:27.440 --> 00:03:32.040
+podría haberla obviado
+
+70
+00:03:32.040 --> 00:03:34.040
+y no pasaría nada
+
+71
+00:03:38.400 --> 00:03:40.040
+si deseáis podéis colocarla
+
+72
+00:03:40.360 --> 00:03:43.520
+lo recomendable es colocarla aquí yo no lo he puesto
+
+73
+00:03:43.680 --> 00:03:47.240
+pero como os dije no es necesario colocarla
+
+74
+00:03:47.640 --> 00:03:50.220
+hay algunos desarrolladores que no la colocan
+
+75
+00:03:50.220 --> 00:03:52.220
+para ahorrar bits
+
+76
+00:03:52.900 --> 00:03:54.160
+al momento de escribir
+
+77
+00:03:55.180 --> 00:03:57.400
+luego tenemos las etiquetas...
+
+78
+00:03:57.680 --> 00:04:00.360
+que tienen su contraparte
+
+79
+00:04:00.540 --> 00:04:01.520
+es decir
+
+80
+00:04:01.920 --> 00:04:04.000
+la etiqute <title>
+
+81
+00:04:04.480 --> 00:04:06.680
+como podéis observar ahí en la pantalla
+
+82
+00:04:06.680 --> 00:04:10.220
+tiene su contraparte, su etiqueta contraparte
+
+83
+00:04:10.220 --> 00:04:12.220
+donde esa etiqueta
+
+84
+00:04:12.820 --> 00:04:15.060
+tiene una barra
+
+85
+00:04:15.060 --> 00:04:17.060
+tiene un slash: /
+
+86
+00:04:17.060 --> 00:04:20.320
+donde indica pues que la etiqueta termina allí
+
+87
+00:04:21.160 --> 00:04:25.300
+en este caso tenemos el título que sería Conocimientos Libres
+
+88
+00:04:26.400 --> 00:04:28.220
+ahí lo puedéis observar
+
+89
+00:04:28.620 --> 00:04:32.200
+luego ya tenemos un sin número de etiquetas y propiedades
+
+90
+00:04:37.200 --> 00:04:39.020
+aquí hay bastante código
+
+91
+00:04:39.020 --> 00:04:42.380
+como puedes observar todo este código es para que...
+
+92
+00:04:42.380 --> 00:04:45.740
+pueda pintarse toda la página web
+
+93
+00:04:46.320 --> 00:04:48.320
+ya para que pueda estructurase
+
+94
+00:04:48.320 --> 00:04:50.320
+la parte del diseño
+
+95
+00:04:50.500 --> 00:04:52.900
+ya se encarga de eso...
+
+96
+00:04:52.900 --> 00:04:54.680
+HTML
+
+97
+00:04:54.680 --> 00:04:57.140
+junto a CSS
+
+98
+00:04:59.020 --> 00:05:03.160
+las imágenes son guardadas dentro de etiquetas también
+
+99
+00:05:10.820 --> 00:05:12.780
+por ejemplo, si queremos
+
+100
+00:05:14.240 --> 00:05:15.860
+saber dónde esta
+
+101
+00:05:16.140 --> 00:05:17.680
+esta imagen
+
+102
+00:05:18.180 --> 00:05:19.960
+nos vamos al código fuente
+
+103
+00:05:20.920 --> 00:05:23.140
+vamos a la parte que dice
+
+104
+00:05:25.480 --> 00:05:26.980
+contenido de la página
+
+105
+00:05:27.940 --> 00:05:29.540
+y como podéis observar
+
+106
+00:05:29.660 --> 00:05:33.560
+aquí hay una etiqueta llamada figura o <figure>
+
+107
+00:05:35.140 --> 00:05:39.160
+que también tiene su contraparte aquí puedéis observar
+
+108
+00:05:41.260 --> 00:05:43.360
+esta etiqueta tiene propiedades
+
+109
+00:05:45.020 --> 00:05:49.380
+lo que más se maneja dentro de las etiquetas son las clases y los id's
+
+110
+00:05:50.040 --> 00:05:51.560
+mayormente es eso
+
+111
+00:05:55.000 --> 00:05:59.160
+donde agregamos atributos en la etiqueta <link>
+
+112
+00:06:00.580 --> 00:06:03.420
+donde agregamos el atributo "rel", "href"
+
+113
+00:06:03.420 --> 00:06:05.420
+de lenguaje
+
+114
+00:06:06.040 --> 00:06:10.000
+en la mayoría de etiquetas siempre utilizamos las clases
+
+115
+00:06:10.000 --> 00:06:12.000
+que es para trabajar con CSS
+
+116
+00:06:12.760 --> 00:06:14.220
+mediante las clases
+
+117
+00:06:14.400 --> 00:06:17.380
+nosotros agregamos el tipo
+
+118
+00:06:17.680 --> 00:06:22.120
+de diseño que se va mostrar en la etiqueta, cómo se va a mostrar
+
+119
+00:06:22.460 --> 00:06:24.560
+he las dimensiones que va a tener
+
+120
+00:06:25.240 --> 00:06:27.960
+las cosas con respecto al diseño
+
+121
+00:06:30.060 --> 00:06:31.580
+he la etiqueta <img>
+
+122
+00:06:31.760 --> 00:06:35.520
+tiene un atributo que se llama "SRC"
+
+123
+00:06:36.620 --> 00:06:38.340
+allí puedes observar
+
+124
+00:06:42.880 --> 00:06:46.640
+y tiene un enlace hacia la imagen, si yo pico aquí
+
+125
+00:06:46.640 --> 00:06:48.640
+me va a mostrar la imagen
+
+126
+00:06:49.720 --> 00:06:51.660
+y alternativamente
+
+127
+00:06:52.340 --> 00:06:53.240
+tiene
+
+128
+00:06:53.400 --> 00:06:56.780
+un atributo "alt" que todas las imágenes deben de tener
+
+129
+00:06:56.780 --> 00:06:57.580
+que es
+
+130
+00:06:58.560 --> 00:07:01.220
+su texto alternativo
+
+131
+00:07:02.900 --> 00:07:05.280
+es impresindible
+
+132
+00:07:05.280 --> 00:07:07.280
+para una imagen
+
+133
+00:07:07.280 --> 00:07:08.440
+¿por qué?
+
+134
+00:07:08.860 --> 00:07:13.280
+porque cuando la imagen por ejemplo desaparece del servidor
+
+135
+00:07:16.280 --> 00:07:20.060
+en vez de que no se muestre la imagen
+
+136
+00:07:20.220 --> 00:07:23.960
+cuando la imagen no existe muestra...
+
+137
+00:07:24.520 --> 00:07:31.460
+un ícono roto indicando que la imagen no está disponible
+
+138
+00:07:33.060 --> 00:07:40.160
+entonces al colocarle el "alt" el texto alternativo en vez de mostrarse ese ícono
+
+139
+00:07:40.940 --> 00:07:47.880
+roto, se reemplaza por el texto que se agregó en el atributo "alt"
+
+140
+00:07:51.560 --> 00:07:57.620
+bien, qué voy a utilizar aquí para escribir código
+
+141
+00:07:58.540 --> 00:08:03.920
+ya para escribir el código HTML la parte de etiqueta
+
+142
+00:08:05.100 --> 00:08:13.400
+voy a utilizar EMACS podéis utilizar cualquier otro editor de código
+
+143
+00:08:15.060 --> 00:08:20.060
+ya es cuestión de preferencias podéis utilizar geany
+
+144
+00:08:20.540 --> 00:08:26.380
+cualquier tipo editor de código que os parezca bien nano, no sé quizás VIM
+
+145
+00:08:29.200 --> 00:08:34.640
+para la parte de práctica vamos a ir bastante a fondo, cómo funciona esto
+
+146
+00:08:35.060 --> 00:08:39.320
+solamente este video es una pequeña introducción, es un pequeño paso
+
+147
+00:08:39.620 --> 00:08:46.820
+recapitulando HTML no es un lengiuaje de programación es un lenguaje de marcado de etiquetas
+
+148
+00:08:47.400 --> 00:08:52.020
+que permite pues posicionar la página web si esta bien escrito
+
+149
+00:08:53.680 --> 00:09:00.760
+y a lo último pues de este curso veremos cómo validar HTML, sin embargo vamos hacerlo también
+
+150
+00:09:01.380 --> 00:09:09.840
+cada vez de escribarmos algo al finalizar lo validaremos para comprobar si hemos escrito correctamente las etiquetas
+
+151
+00:09:10.320 --> 00:09:13.300
+bien! nos vemos en el siguiente vídeo
+