1
00:00:08,700 --> 00:00:11,270
Hola bienvenidos a una nueva clase.

2
00:00:11,300 --> 00:00:18,040
Bueno acá me agarra justo trabajando un poquito con Photoshop y estoy haciendo el logo para nuestra

3
00:00:18,040 --> 00:00:25,200
nueva aplicación nuestra nueva aplicación web que ya deja de ser algo simple sin complejidad.

4
00:00:25,330 --> 00:00:29,080
Vamos a encarar la etapa que tanto estuvimos esperando.

5
00:00:29,080 --> 00:00:31,320
Vamos a desarrollar PHP TV.

6
00:00:31,420 --> 00:00:38,550
Si vamos a hacer una especie de gemelo de la plataforma que tanto consumimos que tanto consumo y que

7
00:00:38,560 --> 00:00:45,250
también disfruto creando contenido yo creo que contenido ahí y la verdad que me apasiona.

8
00:00:45,280 --> 00:00:51,310
Entonces se me ocurrió que podíamos inspirarnos en YouTube para desarrollar algo parecido pero vamos

9
00:00:51,310 --> 00:00:59,260
a ser inteligentes vamos a tratar de no hacerlo tan complejo pero sí trayendo las funcionalidades a

10
00:00:59,260 --> 00:01:02,200
cosas que nos interesen aprender.

11
00:01:02,200 --> 00:01:08,020
Bueno en realidad es una aplicación que van a desarrollar ustedes y si me permiten yo simplemente voy

12
00:01:08,020 --> 00:01:16,510
a participar un poco bueno antes de cerrar esta ventana me quiero ir dejándoles el consejo de que aprendan

13
00:01:16,510 --> 00:01:23,320
aunque sea un poquitito de Photoshop nunca viene mal para esta tarea es muy útil para cuando necesitamos

14
00:01:23,560 --> 00:01:26,440
sacarle el fondo de una imagen del fondo blanco.

15
00:01:26,440 --> 00:01:34,640
Cuando queremos retocar algún logo que estamos reciclando de otra web hace falta aunque sea lo básico.

16
00:01:34,670 --> 00:01:36,560
Bueno ahora sí.

17
00:01:36,580 --> 00:01:41,680
Dicho esto vamos a pasar al tema de nuestro interés a lo que vinimos.

18
00:01:41,680 --> 00:01:54,090
Entonces YouTube tremenda plataforma y si se dan cuenta YouTube no deja de ser una red social.

19
00:01:54,130 --> 00:01:54,860
A dónde.

20
00:01:54,860 --> 00:02:03,470
En un video determinado se lo puedo abrir o es un video muy actual por lo visto y vamos a poder dejar

21
00:02:03,470 --> 00:02:12,830
mensajes vamos a poder seguir a cierto creador de contenido así que nos invita a desarrollar diferentes

22
00:02:12,830 --> 00:02:19,760
funciones que nos van a ser de mucha utilidad para manejar bases de datos y después para aplicarlas

23
00:02:19,940 --> 00:02:23,120
a proyectos que a lo mejor no tienen nada que ver con las redes sociales.

24
00:02:23,420 --> 00:02:30,740
Pero vamos a sacar cuentas de visita vamos a sacar cuentas de comentarios así que es bastante versátil.

25
00:02:30,740 --> 00:02:39,890
El ejemplo bueno como era de esperarse nos vamos a valer de plantillas desarrollar todo el CCCB una

26
00:02:39,890 --> 00:02:47,070
plataforma de este nivel nos llevaría un curso varios cursos y estamos acá para otra cosa.

27
00:02:47,330 --> 00:02:54,230
Entonces de hecho si a mí me encanta me encargara a alguien hacer algo similar no dudaría en contratar

28
00:02:54,230 --> 00:02:58,020
diseñadores o comprar una extraordinaria plantilla.

29
00:02:58,050 --> 00:03:05,840
Bueno lo que vemos acá son típicas plantillas que llamamos paneles o paneles de administración son muy

30
00:03:05,840 --> 00:03:11,920
usadas por ejemplo en paneles de administración de servidores Jostein cuando se contratan hosting.

31
00:03:11,970 --> 00:03:18,500
Yo accedo a un panel como éste para ver mis dominios para ver mis páginas web cómo están funcionando.

32
00:03:18,500 --> 00:03:25,640
Bueno esto que vemos acá es una plantilla para hacer una plantilla o un modelo prefabricado vamos a

33
00:03:25,640 --> 00:03:33,170
decir que no es más que una colección inmensa de gráficos botones opciones cajas.

34
00:03:33,270 --> 00:03:35,310
Está basado en vostra.

35
00:03:35,330 --> 00:03:42,230
Ya se dan cuenta Miren ven que están divididos acá en columnas tengo uno dos tres cuatro columnas y

36
00:03:42,230 --> 00:03:49,160
miren cómo es totalmente responsivo miren como cuando lo Hachiko cómo se van acomodando acá estas cuatro

37
00:03:49,160 --> 00:03:49,730
columnas.

38
00:03:49,730 --> 00:03:53,330
Ahora se pusieron de otra manera y si lo ven angosto más todavía.

39
00:03:53,340 --> 00:03:56,210
Miren ya queda apto para un teléfono.

40
00:03:56,210 --> 00:04:03,000
Bueno este es típico de vostra porque esta plantilla este modelo pre hecho está basado en vostra.

41
00:04:03,290 --> 00:04:10,730
Desde luego que acá hay un ejemplo bastante cargado de cosas innecesarias porque de eso se trata ofrecerme

42
00:04:10,730 --> 00:04:18,110
una paleta de herramientas que a mi me permita decir bueno para mi aplicación Yo necesito ver estos

43
00:04:18,110 --> 00:04:25,790
cuadraditos acá arriba quiero poner un gráfico acá y yo voy surtiendo Home eligiendo cada elemento para

44
00:04:26,090 --> 00:04:28,280
conformar mi panel.

45
00:04:28,280 --> 00:04:29,570
Yo podría no sé.

46
00:04:29,870 --> 00:04:36,740
No es lo que vamos a hacer pero mira yo digo a ver esta caja aunque acá me la muestran para mostrar

47
00:04:36,740 --> 00:04:37,780
fotos de usuarios.

48
00:04:38,070 --> 00:04:44,090
Uy qué linda esta caja para usarla para poner el video supongamos yo puedo reciclar a gusto todo lo

49
00:04:44,090 --> 00:04:51,710
que acá miren los tipos de tabla si navegamos en esta plantilla que se las presento como un modelo vamos

50
00:04:51,770 --> 00:04:59,840
a utilizar esta plantilla porque es gratuita se llama admin Ltd. es muy conocida hay muchísimos paneles

51
00:05:00,230 --> 00:05:09,140
ya sea contables redes sociales y un montón de herramientas online que hoy día funcionan con este panel

52
00:05:09,520 --> 00:05:11,200
que cada uno lo adaptó a su necesidad.

53
00:05:13,240 --> 00:05:17,770
Si ven acá en la barra lateral izquierda trae un sinfín de elementos.

54
00:05:17,770 --> 00:05:23,680
Por ejemplo no quiero hacerlo cargar cargoso este video con una descripción que ustedes van a poder

55
00:05:23,680 --> 00:05:24,090
explorar.

56
00:05:24,100 --> 00:05:27,420
Pero miren tengo acá la opción de gráficos.

57
00:05:27,460 --> 00:05:35,170
Entonces puedo empezar a explorar Miren veces qué calidad de gráficos para mostrar los datos estadísticos

58
00:05:35,170 --> 00:05:36,820
que necesitemos.

59
00:05:36,820 --> 00:05:41,500
Incluso hay varios tipos de gráficos varios autores de librerías.

60
00:05:41,510 --> 00:05:46,300
Esta es otra librería América interesante un gráfico en tiempo real para los que estamos en el mundo

61
00:05:46,300 --> 00:05:47,500
del té.

62
00:05:47,500 --> 00:05:53,560
Esto es como la harina para el panadero los que hacemos té o el Internet de las cosas.

63
00:05:53,560 --> 00:06:01,640
Estamos muy acostumbrados a tener que representar gráficamente un montón de datos estadísticos que qué

64
00:06:01,930 --> 00:06:06,170
más gráficos de torta de círculo.

65
00:06:06,290 --> 00:06:08,900
Muy interesante a ver qué más tenemos por acá.

66
00:06:08,900 --> 00:06:17,300
No quiero colores barras barras de progreso todo lo que se necesita en un panel para una aplicación

67
00:06:17,300 --> 00:06:17,790
web.

68
00:06:17,930 --> 00:06:22,370
Botones para ser dulce no miren todo lo que hay.

69
00:06:23,300 --> 00:06:31,790
Sliders miren qué bueno estos los electrónicos decimos potenciómetros pero son sliders o potenciómetro

70
00:06:31,790 --> 00:06:34,230
deslizable como las consolas de audio.

71
00:06:34,250 --> 00:06:40,610
Bueno miren para tener que supongamos en nuestra aplicación el usuario tiene que ser un número y en

72
00:06:40,610 --> 00:06:45,270
vez de hacer un casillero y que lo escribo con teclado que puede ser incómodo.

73
00:06:45,320 --> 00:06:53,210
Miren esto lo usen en una época que desarrollamos un producto que se llama ener bits que es un producto

74
00:06:53,210 --> 00:06:59,570
de Internet de las cosas para el Control de Energía el usuario podía saltear con este mismo deslizable

75
00:06:59,750 --> 00:07:06,170
o con uno muy parecido podía ser TIAR cuánto era el máximo de su factura que quería pagar a fin de mes

76
00:07:06,170 --> 00:07:08,320
de su factura de electricidad.

77
00:07:08,320 --> 00:07:12,290
Y supongamos cuánto era el mínimo entonces.

78
00:07:12,320 --> 00:07:20,570
Bueno el sistema trataba de optimizar el consumo en este sector o se lo puede usar para un termostato

79
00:07:20,750 --> 00:07:26,950
por ejemplo bueno la temperatura mínima de la casa quiero que sea ésta y la máxima esta entonces oscila

80
00:07:26,960 --> 00:07:28,100
dentro de este gráfico.

81
00:07:28,220 --> 00:07:37,900
Son ejemplos que se me ocurra bueno miren los formularios miren un formulario para cada caso.

82
00:07:37,900 --> 00:07:44,730
Ya tenemos hecho esto y a la hora de usarlo es tan fácil como decir Bueno quiero insertar esta caja.

83
00:07:44,750 --> 00:07:46,960
Bueno click derecho a inspeccionar.

84
00:07:48,190 --> 00:07:54,620
Empiezo a moverme un poco para ver ver vamos a bajar acá abajo y ahí está.

85
00:07:54,630 --> 00:08:00,160
Este es el formulario se desacomoda todo porque se angosto y se está viendo como si estuviera bien en

86
00:08:00,160 --> 00:08:01,030
un teléfono.

87
00:08:01,030 --> 00:08:04,150
Ahora si bien le hice click derecho y yo me voy moviendo.

88
00:08:04,180 --> 00:08:06,670
Miren a la derecha la flecha de mi manos.

89
00:08:06,710 --> 00:08:11,010
Cómo puedo ir seleccionando todo el formulario que quiero.

90
00:08:11,260 --> 00:08:12,420
Eso ya es mucho.

91
00:08:12,420 --> 00:08:15,690
Ahí estoy seleccionando toda la columna no solo la caja.

92
00:08:15,690 --> 00:08:19,330
Ahí hago click click común acá.

93
00:08:19,620 --> 00:08:20,790
Click derecho ahora.

94
00:08:20,870 --> 00:08:26,000
EDIT as HTML y miren acá me aparece todo ese código.

95
00:08:26,400 --> 00:08:32,010
Entonces es tan fácil como copiar este trozo y pegarlo en el desarrollo que estemos planteando en ese

96
00:08:32,010 --> 00:08:39,400
momento y ya tenemos este modelo por supuesto le corregiremos los casilleros los labels las etiquetas.

97
00:08:39,400 --> 00:08:43,690
Bueno virtualizada acá qué otras cosas las tablas.

98
00:08:43,690 --> 00:08:51,070
Bueno utilizo una librería como un plugin que se llama data tables que me permite hacer maravillas como

99
00:08:51,070 --> 00:08:51,880
éstas.

100
00:08:51,880 --> 00:08:58,580
Poder buscar dentro de los resultados estoy buscando en el casillero de la derecha y agrandar así sea

101
00:08:58,600 --> 00:09:00,030
de mejor acá.

102
00:09:00,070 --> 00:09:08,200
En este caso yo estoy buscando ideas como poder buscando sobre columnas puedo ordenar algo totalmente

103
00:09:08,200 --> 00:09:09,200
profesional.

104
00:09:09,230 --> 00:09:15,490
Ya estamos hablando de Ligas Mayores y nosotros nos vamos a poder centrar en lo que importa en lo que

105
00:09:15,490 --> 00:09:25,490
pasa por detrás en nuestro desarrollo en PHP buana disfruten recorriendo todas las opciones miren qué

106
00:09:25,490 --> 00:09:27,400
lindo el calendario.

107
00:09:27,560 --> 00:09:32,030
Si tuviéramos que hacer un gestor de correos ya está hecho.

108
00:09:32,030 --> 00:09:38,480
Para qué trabajar y renegar a lo sumo modificar algunas cosas menores y algo muy interesante es que

109
00:09:38,470 --> 00:09:46,670
ya nos trae un montón de páginas especiales como por ejemplo la de Lovin miren que prolijidad seriedad

110
00:09:46,670 --> 00:09:53,770
qué bueno que está y desde luego la de registrar también para registrar un nuevo usuario trae la página

111
00:09:53,770 --> 00:09:58,310
de error 404 para que la personalizamos no nos podemos quejar.

112
00:09:58,320 --> 00:10:05,570
Bueno insisto esto es un panel no sé si genérico pero de los gratuitos uno de los más populares.

113
00:10:05,620 --> 00:10:12,200
Lo bueno es que cuando aprendes a dominarlo miren a Carrió la fotito del usuario con desplegables puedo

114
00:10:12,200 --> 00:10:20,440
abrir y cerrar la barra cuando aprendés cómo funciona este panel me refiero en su código cómo está ordenado

115
00:10:20,440 --> 00:10:22,840
en secciones que no es para nada difícil.

116
00:10:22,840 --> 00:10:29,140
En definitiva estos paneles están divididos en una barra superior que viene a ser un.

117
00:10:29,170 --> 00:10:36,580
Se lo conoce como jer una barra a la izquierda que la conocemos como aceite y un content o contenido

118
00:10:36,610 --> 00:10:38,360
que viene a ser toda la parte central.

119
00:10:38,380 --> 00:10:45,250
En definitiva no importa en qué opción yo esté todo lo que veo en el borde es lo mismo lo que cambia

120
00:10:45,340 --> 00:10:46,110
es el centro.

121
00:10:46,120 --> 00:10:53,970
Dicho sea de paso estoy viendo todos los iconos disponibles de la librería PHA icons que es súper popular

122
00:10:55,880 --> 00:11:02,300
y bueno me encantaría que arranquemos por esta opción porque una vez que dominen este panel hay cientos

123
00:11:02,300 --> 00:11:05,210
de paneles gratuitos y cientos de paneles de pago.

124
00:11:05,410 --> 00:11:13,730
Y para que vean que qué potentes esto que potentes mira en este panel que es de pago pero no lo podemos

125
00:11:13,730 --> 00:11:19,760
usar acá porque estaría yo sólo tengo este panel pero si sólo publicarã para que trabajemos con esto

126
00:11:19,760 --> 00:11:26,270
estaría violando las normas que establecen que esto es privaban para un uso comercial.

127
00:11:26,270 --> 00:11:32,870
Yo lo tengo que pagar y sólo lo puedo usar para lo que lo pagué para la licencia que pagué en ese momento.

128
00:11:33,320 --> 00:11:36,940
Pero no es para nada caro no son para lo que son.

129
00:11:36,950 --> 00:11:39,650
Yo les aseguro que no es para nada caro.

130
00:11:39,650 --> 00:11:49,700
Y bueno miren el aspecto profesional está basado el ejemplo en algo más económico en bitcoins en training

131
00:11:49,880 --> 00:11:55,450
está orientado a eso el ejemplo pero no lo puedo usar para lo que quiera hay distintas variantes del

132
00:11:55,450 --> 00:12:00,520
panel Miren que esta vez les quiero mostrar un par de pantallas más.

133
00:12:00,680 --> 00:12:07,220
Va a quedar el link también de este panel para que lo vean y yo a donde he comprado muchos paneles.

134
00:12:07,220 --> 00:12:11,720
Yo no tengo ninguna relación ni con esta gente ni con la que voy a nombrar ahora es simplemente un consejo

135
00:12:11,720 --> 00:12:13,690
de corazón de mi experiencia.

136
00:12:13,690 --> 00:12:18,520
He comprado muchos paneles a buen precio suscribiendo me adelanto element.

137
00:12:18,750 --> 00:12:21,240
Ahí que 16 dólares por mes.

138
00:12:21,290 --> 00:12:27,140
No tenés una cuota de permanencia si querés estar un solo mes y ahí te descargas un montón de paneles

139
00:12:27,140 --> 00:12:31,120
de pago lamentablemente es que estamos viendo no está bien.

140
00:12:31,950 --> 00:12:38,180
A ver vienen los formularios cómo se ven distintos tipos de formularios y tiene varias versiones.

141
00:12:38,270 --> 00:12:40,000
Yo le puedo cambiar fácilmente el fondo.

142
00:12:40,000 --> 00:12:45,770
Miren que bueno la verdad es que yo estoy encantado con este panel y todavía no he hecho ningún proyecto

143
00:12:46,250 --> 00:12:47,310
comercial.

144
00:12:47,800 --> 00:12:52,520
En mi trabajo con este panel y no veo las horas que me sale un trabajo para poderlo poner en práctica

145
00:12:52,520 --> 00:12:53,980
porque estoy muy encantado.

146
00:12:54,500 --> 00:12:59,930
Bueno así que con esto damos cierre a la presentación de esta nueva etapa.

147
00:13:01,620 --> 00:13:07,970
Vamos en la próxima clase a ver un poco de qué se trata el código HTML.

148
00:13:07,970 --> 00:13:12,450
Acá hay puro HTML de momento y algo de JavaScript de estos paneles.

149
00:13:12,670 --> 00:13:14,350
Y bueno a empezar a bailar.

150
00:13:14,350 --> 00:13:17,440
A eso vinimos un gran abrazo gracias por la compañía.

151
00:13:17,440 --> 00:13:18,380
Nos vemos en la proxima.