1 00:00:12,270 --> 00:00:14,460 Hola bienvenidos a una nueva clase. 2 00:00:14,880 --> 00:00:23,150 Como verán estoy en la página principal de admin LT e la pagina de este panel y yo lo voy a bajar. 3 00:00:23,210 --> 00:00:26,790 No no se esfuercen ahora en hacer esto no es necesario. 4 00:00:26,790 --> 00:00:28,330 Ya les cuento por qué. 5 00:00:28,410 --> 00:00:30,910 Bueno yo voy a bajar acá si 6 00:00:34,440 --> 00:00:42,240 mientras se baja yo voy a venir acá y vamos a crear una nueva carpeta que le vamos a poner ni un folder 7 00:00:43,990 --> 00:00:49,920 PHP Tubau. 8 00:00:50,110 --> 00:00:51,420 Creo que ya la tenía creada. 9 00:00:51,410 --> 00:00:59,090 Mira si esto de haber sido una prueba que hice así que lo voy a borrar. 10 00:01:00,820 --> 00:01:06,240 Si lo quiero borrar a mí no me permite hoy lo borramos. 11 00:01:06,260 --> 00:01:12,220 Estoy desde acá si me va a permitir borrar esto es una particular particularidad de Mac 12 00:01:16,920 --> 00:01:18,630 eliminar a la papelera. 13 00:01:18,630 --> 00:01:19,920 Listo. 14 00:01:19,930 --> 00:01:24,770 Bueno ya lo descomprimido y esta carpeta admin. 15 00:01:25,620 --> 00:01:26,430 Yo la voy a abrir. 16 00:01:26,430 --> 00:01:28,480 Miren todos los archivos que hay. 17 00:01:28,770 --> 00:01:29,610 No se asusten. 18 00:01:30,500 --> 00:01:37,500 Hay muchos que no los vamos a usar por no decir la inmensa mayoría pero yo voy a copiar todo esto. 19 00:01:37,700 --> 00:01:39,510 Copio lo podría arrastrar también. 20 00:01:39,890 --> 00:01:44,340 No lo voy a pegar dentro de la carpeta PHP Tube. 21 00:01:44,470 --> 00:01:46,070 Ahí está esta copiando. 22 00:01:46,130 --> 00:01:51,740 Mientras se termina de copiar ya me vengo el código y voy a ver que van a ir apareciendo los archivos 23 00:01:51,740 --> 00:01:52,130 acá. 24 00:01:52,130 --> 00:02:01,510 Miren cómo la carpeta PHP tubes se llenó con todo el proyecto del panel admin Lt. 25 00:02:01,770 --> 00:02:03,230 Esto no puedo cerrar. 26 00:02:03,790 --> 00:02:08,020 Entonces probemos si funciona el panel que nos aparece. 27 00:02:08,020 --> 00:02:13,660 Local Jost vamos a entrar a ver qué pasa en las mejores familias. 28 00:02:13,660 --> 00:02:21,890 Me había olvidado de iniciar esto esto esto no necesito arrancar un momento y ahora sí ya está funcionando 29 00:02:21,920 --> 00:02:30,460 entonces curso de HPV y miren en cuanto entra se ve que tiene un index debeser Index puntuó HTML. 30 00:02:30,590 --> 00:02:35,620 Ya estoy viendo el panel y lo puedo probar como lo veíamos en la demo recién. 31 00:02:36,380 --> 00:02:39,860 Pero ahora lo tenemos en nuestro propio servidor local. 32 00:02:39,860 --> 00:02:41,230 Buenísimo. 33 00:02:41,420 --> 00:02:47,220 Ahora vamos a investigar un poco qué hay detrás de este semejante panel. 34 00:02:47,340 --> 00:02:57,140 Bueno como primera medida veo que tengo dos archivos índex e indexados esto a qué se debe. 35 00:02:57,470 --> 00:03:02,170 Esto se debe a que nos proponen dos versiones del dashboard Dashboard. 36 00:03:02,180 --> 00:03:07,860 Se les suele llamar a no sé si escucharon recién un ruido que hizo la computadora un sonido es porque 37 00:03:07,910 --> 00:03:13,910 recién ahora se terminan de copiar todos los archivos tienen muchos archivos esto no salía el icónico 38 00:03:13,910 --> 00:03:18,650 este de acá y es porque todavía no se había pegado a la librería. 39 00:03:18,650 --> 00:03:25,340 Yo me apuré en entrar ahora sí se está viendo completo y bueno retomemos por qué tenía dos índex porque 40 00:03:25,340 --> 00:03:32,750 uno pertenece a una propuesta de panel principal y otro pertenece a otra propuesta. 41 00:03:32,750 --> 00:03:37,730 La verdad que a mí no me interesa mucho esto porque nosotros lo que vamos a hacer es arrancar desde 42 00:03:37,730 --> 00:03:44,480 un panel pelado sin nada completamente vacío o prácticamente vacío. 43 00:03:44,480 --> 00:03:50,510 No quiero tener nada en el centro a lo sumo algún elemento voy a dejar por acá que esté seguro que lo 44 00:03:50,510 --> 00:03:56,930 voy a usar y sobre todo que me quede como ejemplo por si quiero repetir y a lo sumo dejaré un ítem en 45 00:03:56,930 --> 00:04:03,380 esta barra de la izquierda uno de estos ítem para después copiar y pegar y repetir las diferentes opciones 46 00:04:03,980 --> 00:04:09,900 de nuestro menú lateral izquierdo nosotros vamos a trabajar con esto pelado. 47 00:04:11,020 --> 00:04:13,590 Pero el problema es el siguiente. 48 00:04:13,780 --> 00:04:19,510 Yo sé que ustedes están empezando y no solamente empezando con PHP y la mayoría de ustedes está empezando 49 00:04:19,510 --> 00:04:23,560 con HTML también y con Java también con JavaScript. 50 00:04:23,650 --> 00:04:31,730 Sé que es un desafío entonces voy a explorar ahora el índex que vendría a ser la primera versión del 51 00:04:31,730 --> 00:04:37,880 panel y si no también podríamos ver el índex dos son muy parecidos así que tomemos el 1. 52 00:04:38,230 --> 00:04:46,410 Bueno vean que en primer lugar ahora hay un montón de estos Link en el jeep se acuerdan el esqueleto. 53 00:04:46,550 --> 00:04:49,670 Se acuerdan cuando poníamos y aparecía vacío el esqueleto. 54 00:04:49,670 --> 00:04:53,020 Miren lo voy a repetir acá HTML Enter. 55 00:04:53,030 --> 00:04:57,380 Miren qué vacío que está el Geb se abre acá y se cierra acá abajo. 56 00:04:57,380 --> 00:05:03,340 Acá poníamos el título que quiero que aparezca en la pestaña el charged. 57 00:05:03,440 --> 00:05:08,240 Bueno miren el tamaño de este Geb que se abre acá arriba y termina acá abajo y es como que tiene un 58 00:05:08,240 --> 00:05:10,580 poco más de contenido bueno. 59 00:05:10,670 --> 00:05:18,980 La mayor parte de estos son inclusiones o referencias de distintas librerías porque el panel más allá 60 00:05:18,980 --> 00:05:26,720 de que es HTML el que hizo este panel tampoco es Dios tampoco es un genio que programo y esto me da 61 00:05:26,720 --> 00:05:27,830 la razón a mí. 62 00:05:28,040 --> 00:05:33,560 Yo sé que del otro lado hay un montón de gente muchas personas que piensan distinto y eso es lo bueno 63 00:05:33,860 --> 00:05:40,820 que tengamos diferentes opiniones pero yo quiero también defender mi postura creo que acá es un ejemplo 64 00:05:40,820 --> 00:05:41,950 clásico. 65 00:05:41,990 --> 00:05:47,540 Bueno esta gente que es súper profesional y la gente que hizo el panel de ese medio rojizo por detrás 66 00:05:47,540 --> 00:05:50,470 ni les cuento ni les cuenta lo profesional que es. 67 00:05:50,540 --> 00:05:56,780 Sin embargo esa gente que se piensan que programaron hasta hoy dos grafitos porque esto es una librería 68 00:05:56,840 --> 00:06:01,400 extraordinaria para manejar gráficos solamente esto es todo un desafío. 69 00:06:01,430 --> 00:06:08,510 Es que piensan que realmente la persona que desarrolló esto honestamente las personas. 70 00:06:08,570 --> 00:06:10,880 Yo no creo que uno solo hizo todo esto. 71 00:06:10,880 --> 00:06:16,150 Las personas que desarrollaron esto se sentaron a desarrollar también esta librería de gráficos. 72 00:06:16,160 --> 00:06:23,820 Miren esto es una librería o un plugin llámenlo como quieran de mapas así como los tiene Google. 73 00:06:23,930 --> 00:06:28,740 Miren que bueno para mostrar por ejemplo haber usuarios conectados en tiempo real en el mundo. 74 00:06:28,940 --> 00:06:30,390 Qué impresionante. 75 00:06:30,410 --> 00:06:37,990 Bueno obviamente esta gente desarrolló el panel pero también se valieron de recursos desarrollados por 76 00:06:37,990 --> 00:06:43,390 otros fueron y compraron los derechos para usar esto o si son de derecho libre lo usaron 5 sin pagar 77 00:06:43,390 --> 00:06:45,050 nada y punto. 78 00:06:45,180 --> 00:06:52,510 Así con muchas cosas de las que hay acá entonces entonces esa es la explicación de por qué hay tantos 79 00:06:52,510 --> 00:06:54,680 de estos links íconos. 80 00:06:54,700 --> 00:07:00,730 Ellos diseñaron cada Incognito que aparece no utilizan esta librería que es Font agua Epsom que era 81 00:07:00,730 --> 00:07:02,680 una librería de iconos súper conocida. 82 00:07:02,680 --> 00:07:06,160 Los usamos todos los programadores pero lo hizo otro. 83 00:07:06,580 --> 00:07:13,720 Entonces si a ellos no les da vergüenza si ellos no se sienten menos programadores por recurrir a las 84 00:07:13,720 --> 00:07:20,110 herramientas de terceros por lo menos a mí tampoco me siento menos programador ni soy menos profesional 85 00:07:20,320 --> 00:07:27,070 porque cuando me contratan para hacer un panel de éstos recurro a algo hecho obvio obvio que es así 86 00:07:27,490 --> 00:07:32,410 porque cuando se trata de trabajo también se trata de dinero se trata de ganar la mayor cantidad de 87 00:07:32,410 --> 00:07:35,200 dinero con la menor cantidad de trabajo. 88 00:07:35,200 --> 00:07:37,360 Entonces qué tiene de malo entonces. 89 00:07:37,390 --> 00:07:40,180 Bueno no me quiero del tema pero algunos temas me tocan de cerca. 90 00:07:42,030 --> 00:07:48,650 Se incluyen también APIs de por ejemplo cajas Google supongo debe ser para las letras. 91 00:07:48,870 --> 00:07:54,570 Me estoy trayendo letras de Google así que esto ya es bastante más complejo. 92 00:07:54,840 --> 00:07:55,550 El jet. 93 00:07:55,920 --> 00:08:02,210 Bueno yo les puedo decir que cuando vaciamos todo nuestro panel esto lo vamos a dejar de momento a todos 94 00:08:02,210 --> 00:08:02,760 los. 95 00:08:02,760 --> 00:08:08,730 Los links estas inclusiones en todas las librerías porque todavía no sabemos si vamos a usar por ejemplo 96 00:08:08,760 --> 00:08:15,090 a Permira este este Morris en una librería de gráficos de estos gráficos de estadísticas. 97 00:08:15,370 --> 00:08:21,120 Yo la sacaría pero no mejor la voy a dejar porque no estoy seguro si usar o no gráficos de Morris. 98 00:08:21,110 --> 00:08:24,420 Yo dejo todo en cuanto a estas inclusiones. 99 00:08:24,540 --> 00:08:33,720 Ahora bien terminé el GED y empieza a partir de donde dice esta clase de Rapper empiezan las diferentes 100 00:08:33,780 --> 00:08:35,540 partes del panel. 101 00:08:35,670 --> 00:08:36,910 Presten atención. 102 00:08:36,960 --> 00:08:42,870 Esto tiene que ser así lo captan a la primera porque es súper importante. 103 00:08:42,870 --> 00:08:50,120 Se acuerdan que yo les dije que estos paneles básicamente están compuestos por tres o cuatro partes 104 00:08:51,140 --> 00:08:56,370 el Geer que es esta barra de acá arriba el aceite que es una barra lateral. 105 00:08:56,370 --> 00:08:58,290 Algunos tienen una barra lateral a la derecha. 106 00:08:58,290 --> 00:09:01,950 Creo que este sí a ver si acá tiene una barra en la derecha. 107 00:09:01,950 --> 00:09:03,380 Qué versatil está. 108 00:09:03,780 --> 00:09:06,620 Y también tienen un futur o un pie de página. 109 00:09:07,410 --> 00:09:15,510 Bueno gracias gracias a que esto está bien desarrollado y basado en vostra es que adentro del código 110 00:09:15,570 --> 00:09:23,280 nos vamos a encontrar muy definido dónde empieza el Jer dónde termina donde empieza el les solemos llamar 111 00:09:23,280 --> 00:09:31,170 content a esta parte al cuadrado este que se encuentra en el centro porque es el contenido en definitiva 112 00:09:31,170 --> 00:09:38,540 en este tipo de paneles es lo que cambia todo lo demás casi siempre se mantiene igual salvo raras excepciones 113 00:09:40,410 --> 00:09:48,080 entonces como el panel que estamos viendo ahora está lleno de opciones está lleno pero por qué es una 114 00:09:48,080 --> 00:09:57,370 paleta es una paleta de muestra es que me voy a encontrar con un código abrumador masivo que la verdad 115 00:09:57,490 --> 00:10:04,390 hasta que vos no te acostumbras a manejar estos paneles cuesta gracias a Dios con Atom o estas herramientas 116 00:10:04,690 --> 00:10:08,330 nos ayuda a identificar dónde abre y dónde cierra la etiqueta entonces. 117 00:10:08,470 --> 00:10:13,530 Bueno el GDR empieza acá arriba y termina por acá abajo por acá abajo. 118 00:10:13,550 --> 00:10:17,410 Ahí de hecho miren que a veces es útil utilizar esta herramienta. 119 00:10:17,470 --> 00:10:18,480 Puedo minimizar. 120 00:10:18,790 --> 00:10:27,240 Entonces yo acabo de minimizar esto minimice Orjeda ahí tengo metido todo el género de hecho lo borro 121 00:10:27,240 --> 00:10:35,310 todo era muy a grabar en la web estoy Index 2 por eso nunca estoy en el 1. 122 00:10:35,310 --> 00:10:39,740 Miren le desaparecio la franja de arriba miren qué fácil es modificar esto. 123 00:10:40,080 --> 00:10:45,160 Bueno por qué el Jer acá adentro está lleno de opciones. 124 00:10:45,160 --> 00:10:54,290 Bueno son todas estas opciones muy actualizara no grabar el momento ahí grabo vuelvo era el Jaider si 125 00:10:54,290 --> 00:10:59,810 tiene opciones porque tiene este botoncito para abrir y cerrar la barra lateral. 126 00:10:59,810 --> 00:11:08,230 Acá miren todo lo que es bueno todo esto ocupa código y son todos estos detalles muchas veces los paneles 127 00:11:08,650 --> 00:11:15,460 ya suelen traer dentro de sus carpetas a ver si lo encuentro fácil acá si no no se preocupen se lo cuento. 128 00:11:15,460 --> 00:11:19,290 Hace mucho que no trabajo con LTE de manera profesional. 129 00:11:19,330 --> 00:11:25,560 He empezado a trabajar con paneles de pago y los he empezado a conocer en profundidad a esos paneles. 130 00:11:25,560 --> 00:11:29,410 Yo me inicié con este panel en su momento lo dominaba a pleno. 131 00:11:29,410 --> 00:11:36,760 Bueno ahora debo reconocer que ya hay algunas cosas que no recuerdo de manera tan fresca pero a ver 132 00:11:36,760 --> 00:11:39,440 a ver acá están las páginas. 133 00:11:39,570 --> 00:11:43,950 Ya después lo buscamos pero no importa porque tiene un problema lo que les digamos lo que les quiero 134 00:11:43,950 --> 00:11:44,770 mostrar. 135 00:11:45,030 --> 00:11:54,210 Yo les quería contar que estos paneles suelen venir ya con cada una de las partes Gelder Asai content 136 00:11:54,750 --> 00:12:02,310 vacías listas para ser rellenadas o sea prácticamente tengo unas cuantas etiquetas la etiqueta que abre 137 00:12:02,310 --> 00:12:05,960 y cierra alguna etiqueta dentro y pocas cosas más. 138 00:12:05,970 --> 00:12:10,260 Entonces yo tengo todo el panel vacío es súper útil. 139 00:12:10,260 --> 00:12:11,140 La verdad es que sí. 140 00:12:11,250 --> 00:12:18,540 El problema de eso es que ya está demasiado vacío y cuando quiera poner elementos no es cuestión de 141 00:12:18,540 --> 00:12:21,390 copiar y pegar así como venga. 142 00:12:21,390 --> 00:12:22,890 Hay ciertas maneras. 143 00:12:22,890 --> 00:12:30,810 Por eso les decía que lo bueno o por ahí lo que yo suelo hacer es tomarme el trabajo de meterme en esa 144 00:12:30,810 --> 00:12:36,030 jungla de código e ir borrando de a uno sin romper que es romper algo. 145 00:12:36,030 --> 00:12:44,090 Por ejemplo no importa ya vamos a ir aprendiendo que son etiquetas para qué se usan de usándolas practicándose 146 00:12:44,100 --> 00:12:48,420 te vas dando cuenta que quiere decir un huele que todavía todavía no hemos visto. 147 00:12:48,420 --> 00:12:54,120 Pero si yo te puedo decir que aunque no sepas para qué sirve una etiqueta huele que abre por acá arriba 148 00:12:54,120 --> 00:12:57,000 y cierra acá abajo. 149 00:12:57,000 --> 00:13:02,610 Yo ni sé que hay acá adentro no sé para qué sirve en este momento o no lo hemos enseñado pero eso sí 150 00:13:02,610 --> 00:13:06,720 lo que sé es que si a esto lo borro por ejemplo así completo 151 00:13:09,380 --> 00:13:14,530 y borro además o borro de menos estoy rompiendo el HTML porque por cada etiqueta que abre tiene que 152 00:13:14,530 --> 00:13:15,360 haber una que cierra. 153 00:13:15,730 --> 00:13:22,140 Entonces si yo empecé a borrar desde el muelle que abre tengo que borrar hasta el muelle que cierra. 154 00:13:22,210 --> 00:13:27,060 Entonces yo lo que hago es tomarme el trabajo de ir borrando elemento por elemento. 155 00:13:27,070 --> 00:13:33,830 Yo tengo práctica me animo a borrar a muchos elementos sin romper nada y dejo uno o dos por ejemplo 156 00:13:33,830 --> 00:13:39,280 a carrera me gusta dejarme el sobrecito con la función de despliegue pero no vacío todo lo que hay adentro. 157 00:13:39,850 --> 00:13:46,030 Pero si le dejo la función de desplegar entonces si necesitamos más de esto sí necesito Campanita banderita 158 00:13:46,030 --> 00:13:47,020 lo que me haga falta. 159 00:13:47,020 --> 00:13:49,840 Simplemente copio el sobre y le voy cambiando el ícono. 160 00:13:50,260 --> 00:13:57,250 Entonces dejo un ejemplo dos ejemplos en dos ejemplos en cada barra o en cada zona para inspirarme y 161 00:13:57,250 --> 00:13:58,210 poder copiar. 162 00:13:58,210 --> 00:14:05,740 Obvio es un trabajo importante con mi hijo Benjamín trabajamos muchísimo con estos paneles nos encantan. 163 00:14:05,770 --> 00:14:11,870 Siempre estamos contando los días para empezar a trabajar y les llamamos ya tenemos una jerga y les 164 00:14:11,890 --> 00:14:14,290 decimos cortar el panel. 165 00:14:14,290 --> 00:14:21,790 A veces me dice papá lo cortas o lo corto yo cortar el panel les llamamos a eso a meternos con una motosierra 166 00:14:22,030 --> 00:14:29,710 y empezar a desguazar a deportarlo como si fuéramos un carnicero separando la raíz para dejarlo listo 167 00:14:29,710 --> 00:14:31,180 para empezar a trabajar. 168 00:14:31,250 --> 00:14:36,970 Entonces quédense tranquilos que ese trabajo lo hemos visto por acá. 169 00:14:36,970 --> 00:14:42,100 Ese trabajo lo voy a hacer yo voy a dejar un panel medianamente vacío limpio por eso no les recomiendo 170 00:14:42,100 --> 00:14:46,710 que se bajen esto ahora y vamos a trabajar sobre esa versión en la próxima clase. 171 00:14:46,720 --> 00:14:53,690 Ya les dejo el link para que se bajen el panel despistado vamos a decirlo de una manera más criolla. 172 00:14:53,690 --> 00:14:58,120 Bueno un poco más de la presentación de lo que vamos a trabajar con este panel. 173 00:14:58,450 --> 00:14:59,350 Gracias por la compañía. 174 00:14:59,350 --> 00:15:00,490 Nos vemos en la siguiente.