first commit

2019-04-08 21:32:21 -05:00
commit 333dfd6f52
187 changed files with 76759 additions and 0 deletions
--- a/content/wp-content/uploads/article/subtitles/2019/03/0003-sintaxis-html5-es.vtt
+++ b/content/wp-content/uploads/article/subtitles/2019/03/0003-sintaxis-html5-es.vtt
@@ -0,0 +1,590 @@
+WEBVTT
+
+1
+00:00:05.580 --> 00:00:06.880
+En el vídeo anterior
+
+2
+00:00:07.660 --> 00:00:08.820
+logramos entender
+
+3
+00:00:08.940 --> 00:00:14.880
+como funcionan la etiquetas de HTML5, las etiquetas obsoletas, las nuevas etiquetas
+
+4
+00:00:16.500 --> 00:00:18.380
+y ahora pues vamos a
+
+5
+00:00:18.380 --> 00:00:20.380
+escribir el código
+
+6
+00:00:21.120 --> 00:00:22.700
+para poder generar
+
+7
+00:00:22.820 --> 00:00:24.060
+cualquier página web
+
+8
+00:00:25.400 --> 00:00:27.780
+vamos abrir el editor de código
+
+9
+00:00:27.780 --> 00:00:29.780
+voy a...
+
+10
+00:00:30.080 --> 00:00:32.620
+colocar aquí el localhost
+
+11
+00:00:33.420 --> 00:00:37.840
+localhost
+
+12
+00:00:43.280 --> 00:00:46.100
+y voy a entrar dentro del directorio course
+
+13
+00:00:46.560 --> 00:00:51.540
+todavía no hay nada, porque todavía no he escrito nada
+
+14
+00:00:52.700 --> 00:00:54.300
+vamos a ir...
+
+15
+00:00:54.300 --> 00:00:58.600
+al editor de código, yo utilizaré Emacs
+
+16
+00:01:01.300 --> 00:01:02.480
+ahí está
+
+17
+00:01:05.520 --> 00:01:08.500
+voy a borrar, esta parte
+
+18
+00:01:10.280 --> 00:01:15.820
+voy a minimizar también esto, ahí está!, voy a agrandar el texto
+
+19
+00:01:16.980 --> 00:01:18.120
+ahí está
+
+20
+00:01:20.980 --> 00:01:24.860
+bien primero podríamos...
+
+21
+00:01:27.460 --> 00:01:30.400
+escribir la etiqueta <!doctype>
+
+22
+00:01:32.840 --> 00:01:36.340
+ahora también se acostumbra también a escribir en minúscula
+
+23
+00:01:40.320 --> 00:01:41.860
+que sería de esa forma
+
+24
+00:01:42.340 --> 00:01:45.740
+<!doctype html> etiqueta <html>
+
+25
+00:01:46.540 --> 00:01:49.360
+y etiqueta </html> que cierra
+
+26
+00:01:49.360 --> 00:01:51.360
+de esta forma
+
+27
+00:01:52.500 --> 00:01:53.340
+como véis
+
+28
+00:01:54.020 --> 00:01:56.380
+Emacs no me ha coloreado
+
+29
+00:01:56.560 --> 00:02:00.460
+No me ha coloreado la parte de la sintaxis
+
+30
+00:02:00.460 --> 00:02:02.460
+eso es porque estoy en mode-lisp
+
+31
+00:02:03.240 --> 00:02:05.180
+los que usáis Emacs ya me entenderéis
+
+32
+00:02:05.860 --> 00:02:08.940
+Si utilizáis otro editor pues automaticamente
+
+33
+00:02:10.320 --> 00:02:13.080
+les va a detectar la sintaxis
+
+34
+00:02:13.360 --> 00:02:14.800
+voy a utilizar el web-mode
+
+35
+00:02:15.720 --> 00:02:17.760
+y aquí como podéis observar
+
+36
+00:02:17.760 --> 00:02:19.760
+tenemos
+
+37
+00:02:20.560 --> 00:02:22.100
+ya la estructura básica
+
+38
+00:02:22.780 --> 00:02:24.740
+<!doctype html>
+
+39
+00:02:25.060 --> 00:02:27.880
+etiqueta <html>
+
+40
+00:02:27.880 --> 00:02:29.880
+siempre tiene que llevar
+
+41
+00:02:30.040 --> 00:02:36.680
+un atributo que es el artributo lenguaje, y dentro pues colocar
+
+42
+00:02:36.920 --> 00:02:40.300
+el idioma, en esta caso Español-España (es-es)
+
+43
+00:02:40.680 --> 00:02:43.800
+también podría ser inglés: en
+
+44
+00:02:44.860 --> 00:02:47.200
+podría ser portugués: pt_BR
+
+45
+00:02:48.780 --> 00:02:51.440
+cualquier tipo de idioma: zxy
+
+46
+00:02:53.220 --> 00:02:59.060
+En este caso voy a poner español-españa, y dentro de la etiqueta <html>
+
+47
+00:02:59.780 --> 00:03:03.640
+siempre va un <head>
+
+48
+00:03:04.460 --> 00:03:07.840
+un <head> que abre un </head> que cierra
+
+49
+00:03:09.500 --> 00:03:17.480
+aquí van todas las etiquetas que describen a la página, el título, los metadata, todo eso va ahí
+
+50
+00:03:17.780 --> 00:03:20.980
+y luego tenemos la etiqueta
+
+51
+00:03:21.540 --> 00:03:23.580
+<body>
+
+52
+00:03:25.760 --> 00:03:28.420
+que también tiene su contraparte
+
+53
+00:03:30.160 --> 00:03:34.320
+¿qué va dentro de la etiqueta <head>?
+
+54
+00:03:35.660 --> 00:03:37.300
+ahí vamos a colocar
+
+55
+00:03:38.160 --> 00:03:43.820
+toda la información, el titulo, la información, toda esa información se va a colocar allí
+
+56
+00:03:44.460 --> 00:03:46.740
+y aquí en la etiqueta <body>
+
+57
+00:03:46.840 --> 00:03:50.120
+se va a colocar la información
+
+58
+00:03:50.120 --> 00:03:52.120
+que se le va a mostrar al usuario
+
+59
+00:03:52.120 --> 00:03:54.120
+por ejemplo
+
+60
+00:03:54.500 --> 00:03:57.140
+vamos a regresar a conocimientos libres
+
+61
+00:03:59.280 --> 00:04:00.720
+ah... vamos a ver...
+
+62
+00:04:01.280 --> 00:04:02.940
+la parte interna
+
+63
+00:04:02.940 --> 00:04:04.940
+aquí lo tenemos
+
+64
+00:04:05.020 --> 00:04:07.620
+en body, en <body>
+
+65
+00:04:08.100 --> 00:04:12.040
+tenemos que colocar todo lo que se le va a mostrar al usuario
+
+66
+00:04:12.280 --> 00:04:15.200
+la cabecera, el área de navegación
+
+67
+00:04:15.920 --> 00:04:19.220
+parte de los artículos, la figuritas
+
+68
+00:04:19.500 --> 00:04:27.140
+toda esa información, va dentro de la etiqueta <body>, todo va dentro de la etiqueta <body>
+
+69
+00:04:27.300 --> 00:04:31.480
+todo esto que véis aquí esta dentro de la etiqueta <body>
+
+70
+00:04:31.660 --> 00:04:41.040
+lo que esta dentro de la etiqueta <head>, es esta parte, lo que se encuentra arriba, donde dice conocimientos libres y hay un logito
+
+71
+00:04:41.760 --> 00:04:47.200
+eso va dentro de la etiqueta <head>, ahí va
+
+72
+00:04:48.400 --> 00:04:55.300
+no confundáis <head> con esta otra etiqueta que es <header>
+
+73
+00:04:59.520 --> 00:05:02.700
+son palabras similares pero diferentes
+
+74
+00:05:04.840 --> 00:05:06.780
+pueden ser dos
+
+75
+00:05:06.780 --> 00:05:08.780
+pueden haber dos etiquetas <header>
+
+76
+00:05:09.080 --> 00:05:13.980
+he visto sitios donde tienen más de un cabecera
+
+77
+00:05:15.820 --> 00:05:22.420
+bien primero vamos a completar la parte del <head>
+
+78
+00:05:22.600 --> 00:05:25.480
+en donde esta la información, esto vamos a ponerlo debajo
+
+79
+00:05:25.480 --> 00:05:27.480
+y aquí vamos a colocar
+
+80
+00:05:27.800 --> 00:05:29.780
+al igual como
+
+81
+00:05:29.780 --> 00:05:31.780
+aquí en conocimientos libres
+
+82
+00:05:31.980 --> 00:05:36.480
+vamos a poner una etiqueta bastante sencilla que...
+
+83
+00:05:37.300 --> 00:05:42.700
+...que es la etiqueta <title> vamos a colocar allí la etiqueta <title>
+
+84
+00:05:44.540 --> 00:05:48.600
+ahí esta la etiquet <title>!, dentro de la etiqueta <title>
+
+85
+00:05:48.600 --> 00:05:50.320
+vamos a...
+
+86
+00:05:50.320 --> 00:05:52.320
+poner el título
+
+87
+00:05:52.620 --> 00:06:03.040
+En este caso vamos a poner aquí: mi primera web en HTML5
+
+88
+00:06:03.040 --> 00:06:05.040
+correcto!
+
+89
+00:06:06.700 --> 00:06:09.440
+bien, aún...
+
+90
+00:06:09.720 --> 00:06:12.840
+parece algo simple esto
+
+91
+00:06:12.840 --> 00:06:15.320
+vamos a guardarlo para ver si funciona.
+
+92
+00:06:15.320 --> 00:06:17.320
+voy a guardarlo
+
+93
+00:06:18.420 --> 00:06:27.720
+aquí, ya es cuestión de qué editor utilizáis yo aquí utilizó Emacs, simplemente hice C-x C-s
+
+94
+00:06:28.140 --> 00:06:31.000
+y ahora voy a guardarlo dentro del directorio "srv"
+
+95
+00:06:31.000 --> 00:06:33.000
+.../http/...
+
+96
+00:06:33.480 --> 00:06:38.180
+y voy a entrar a course, y lo voy a guardar con el nombre
+
+97
+00:06:39.240 --> 00:06:41.300
+para esta parte
+
+98
+00:06:41.740 --> 00:06:43.920
+de manera predeterminada
+
+99
+00:06:44.120 --> 00:06:47.840
+el nombre que va llevar el archivo HTML
+
+100
+00:06:47.840 --> 00:06:50.960
+por defecto debería de ser index
+
+101
+00:06:50.960 --> 00:06:55.400
+debería ser index.html
+
+102
+00:06:56.460 --> 00:06:58.000
+¿por qué index?
+
+103
+00:06:58.260 --> 00:06:59.260
+porque...
+
+104
+00:06:59.260 --> 00:07:00.720
+este nombre
+
+105
+00:07:00.720 --> 00:07:02.220
+el nombre index
+
+106
+00:07:02.220 --> 00:07:05.340
+es el que los servidores web
+
+107
+00:07:06.020 --> 00:07:09.340
+como por ejemplo: el apache, el nginx
+
+108
+00:07:09.560 --> 00:07:12.160
+va a buscar en cada directorio
+
+109
+00:07:12.400 --> 00:07:18.180
+sino encuentra el archivo llamado index.html o index.php
+
+110
+00:07:19.100 --> 00:07:20.600
+sino los encuentra
+
+111
+00:07:21.300 --> 00:07:23.880
+pues lo que va hacer es...
+
+112
+00:07:24.240 --> 00:07:27.980
+mostrar la jerarquía de los archivos que están dentro
+
+113
+00:07:28.600 --> 00:07:31.400
+por ejemplo vamos a colocar ahora.
+
+114
+00:07:33.220 --> 00:07:35.660
+vamos hacer esto
+
+115
+00:07:35.660 --> 00:07:37.660
+demo.html
+
+116
+00:07:37.660 --> 00:07:39.660
+supongamos que es así
+
+117
+00:07:40.720 --> 00:07:44.720
+que no le pusimos index y le pusimos demo.html
+
+118
+00:07:46.520 --> 00:07:49.440
+aparentemente no pasó nada, simplemente se guardó
+
+119
+00:07:50.100 --> 00:07:52.260
+y ahora vamos a ir al navegador
+
+120
+00:07:53.440 --> 00:07:54.740
+al localhost
+
+121
+00:07:54.740 --> 00:07:56.440
+actualizamos
+
+122
+00:07:56.440 --> 00:08:00.000
+y vemos el archivo demo.html
+
+123
+00:08:00.000 --> 00:08:01.280
+vamos a
+
+124
+00:08:01.280 --> 00:08:02.540
+colocar ahí
+
+125
+00:08:02.540 --> 00:08:04.540
+no se ve nada
+
+126
+00:08:04.540 --> 00:08:08.160
+porque no hemos escrito nada en el <body>, solamente en el <head>
+
+127
+00:08:08.160 --> 00:08:10.160
+y si os fijáis
+
+128
+00:08:23.140 --> 00:08:25.320
+en esta parte
+
+129
+00:08:25.320 --> 00:08:30.780
+pueden ver que dice «Mi primera web en HTML5» es bastante genial esto
+
+130
+00:08:30.780 --> 00:08:32.780
+ahora
+
+131
+00:08:34.420 --> 00:08:44.100
+para que veáis ese problema, hemos tenido que entrar dentro del archivo demo.html, no se ha mostrado automáticamente
+
+132
+00:08:44.400 --> 00:08:46.540
+es decir no hemos recargado esto
+
+133
+00:08:47.520 --> 00:08:53.900
+aparecido automáticamente la página, sino que hemos tenido que entrar dentro del archivo demo.html
+
+134
+00:08:54.780 --> 00:09:00.200
+que pasaría si a este archivo demo.html le cambio de nombre
+
+135
+00:09:01.760 --> 00:09:02.920
+por ejemplo
+
+136
+00:09:04.220 --> 00:09:06.900
+ahora ya no se va llamar así, sino se va a llamar
+
+137
+00:09:10.580 --> 00:09:13.180
+se va a llamar ahora pues...
+
+138
+00:09:14.220 --> 00:09:17.080
+index.html ¿cómo hago eso?
+
+139
+00:09:17.300 --> 00:09:18.460
+muy sencillo
+
+140
+00:09:18.900 --> 00:09:20.400
+yo por acá tengo
+
+141
+00:09:20.840 --> 00:09:22.660
+el directorio de course
+
+142
+00:09:22.980 --> 00:09:23.880
+aquí está!
+
+143
+00:09:24.460 --> 00:09:26.680
+he voy a cambiarle de nombre
+
+144
+00:09:26.680 --> 00:09:29.180
+a index.html
+
+145
+00:09:30.260 --> 00:09:33.520
+y automáticamente al actualizar me va ha cargar
+
+146
+00:09:33.880 --> 00:09:37.800
+me va ha cargar el archivo index.html
+
+147
+00:09:40.040 --> 00:09:44.180
+bien!, nos vemos en el siguiente vídeo para continuar avanzando
+