1 00:00:00,390 --> 00:00:05,930 Vamos a escribir el código para la notificación se iba a crear una nueva función aquí abajo. 2 00:00:07,030 --> 00:00:13,780 Notificación en pantalla y voy a poner la función 3 00:00:16,530 --> 00:00:20,330 mostrar notificación. 4 00:00:20,530 --> 00:00:21,190 De esta forma. 5 00:00:21,190 --> 00:00:27,670 De momento y aquí voy a escribir un poco de scripting porque voy a generar el elemento dinámicamente 6 00:00:28,300 --> 00:00:36,030 moscones notificación va a ser igual a document punto criadita Element y vamos a generar una Heydi un 7 00:00:36,190 --> 00:00:45,130 perdón al vuelo por así decirlo y después una notificación punto text contén y va a decir igual. 8 00:00:45,150 --> 00:00:51,300 Vamos a poner un mensaje que diga hubo un error de momento lo voy a dejar hacer y los tenemos haciendo 9 00:00:51,300 --> 00:00:58,150 más inteligente por así decirlo y después vamos a seleccionar lo que viene siendo el formulario. 10 00:00:58,240 --> 00:01:02,750 En realidad no importa tanto el elemento porque es una notificación que puedes ver que está volando 11 00:01:02,750 --> 00:01:08,830 aquí arriba son las notificaciones de arriba hay muchos plugins para este tipo de notificaciones pero 12 00:01:09,430 --> 00:01:14,770 es algo muy sencillo de agregar no le veo mucho sentido cargar una gran cantidad de librerías para algo 13 00:01:14,770 --> 00:01:23,190 tan simple ponemos formulario y lo primero que va a hacer es copiar este es el formulario si recuerdas 14 00:01:23,210 --> 00:01:31,110 este contiene lo que viene siendo el Fórum y tiene Leidi no va a copiar formulario de contactos y va 15 00:01:31,110 --> 00:01:40,260 a poner punto insert CIFOR y éste toma dos parámetros toma primero el del formulario que está seleccionando 16 00:01:40,620 --> 00:01:45,180 toma lo que vas a insertar y segundo dónde se va a insertar. 17 00:01:45,270 --> 00:01:50,760 En este caso va a ser leyendo de nueva cuenta como va a estar flotando en realidad no importa mucho 18 00:01:50,760 --> 00:01:59,550 dónde lo coloques va a poner aquí insert pifiar vamos a insertar la notificación antes de docking en 19 00:01:59,550 --> 00:02:07,950 el punto de selector para que se vea mejor voy a colapsar esto y aquí ponemos form y luego leyendo entonces 20 00:02:08,330 --> 00:02:11,000 esta notificación se va a mostrar en lugar de esto. 21 00:02:11,000 --> 00:02:15,750 Por lo tanto lo vamos a poner aquí mostrar notificación y como es una función lo coloco de esta forma. 22 00:02:16,560 --> 00:02:23,630 Guardamos cambios cuando esté todo vacío se muestra la notificación se recargamos todo vació añadir 23 00:02:23,930 --> 00:02:30,260 y vemos que hubo un error puedes ver que se inserta antes del leyen para eso fue el valor de referencia 24 00:02:30,260 --> 00:02:32,290 que le hemos dado insert before. 25 00:02:32,450 --> 00:02:34,910 Le decimos qué y dónde. 26 00:02:34,940 --> 00:02:41,570 Antes del leyen del formulario específico que es como funciona esta parte puedes ver que tenemos un 27 00:02:41,570 --> 00:02:46,310 dividí si hubo un error en la notificación se queda ahí se queda todo el día. 28 00:02:46,420 --> 00:02:52,300 Nada va a hacer que desaparezca pero podemos hacerla desaparecer con con JavaScript. 29 00:02:52,460 --> 00:03:03,260 Después vamos aquí a manejar ocultar y mostrar la notificación se aquí septima out se taimados es una 30 00:03:03,260 --> 00:03:11,540 función que va esperar cierto tiempo ejecutar un código pero nada más 100 que cienes una décima parte 31 00:03:11,540 --> 00:03:19,220 de un segundo y que tenemos notificación punto clave lista esto va a agregarle una clase similar a la 32 00:03:19,220 --> 00:03:25,610 clase de Kairi pero esta es la forma hacerlo compró JavaScript sin frameworks Add y ponemos visible 33 00:03:26,980 --> 00:03:34,860 entonces se le va agregar una clase que va a decir visible y después podemos poner Z y Matt Meowth 34 00:03:37,650 --> 00:03:39,840 y después de tres segundos lo vamos a quitar. 35 00:03:39,850 --> 00:03:44,910 Entonces pongo aquí Time Out notificación punto Classe. 36 00:03:45,290 --> 00:03:54,450 Punto remó y ponemos visible entonces si hay un error en el código se muestra la notificación. 37 00:03:54,470 --> 00:04:01,460 La creamos creamos usamos JavaScript para crear un elemento nuevo en el html le damos un error lo insertamos 38 00:04:01,460 --> 00:04:09,290 justo antes del leyen esperamos una décima parte de segundo para agregarle esta clase que es nada prácticamente 39 00:04:09,290 --> 00:04:10,230 imperceptible. 40 00:04:10,670 --> 00:04:13,680 Y después de tres segundos se le remueve esa clase. 41 00:04:14,150 --> 00:04:22,520 Recargamos limpia caché como si fuera control férreo control F5 para que aparezca correctamente cargue 42 00:04:22,520 --> 00:04:25,580 la última copia del CSS y aquí vamos a dar. 43 00:04:25,640 --> 00:04:33,610 Añadir que viene un error después de que aquí dice clase hubo un error pues el que si lo doy nuevamente 44 00:04:33,610 --> 00:04:38,700 aparece visible visible 3 segundos y quita esa clase. 45 00:04:38,950 --> 00:04:45,970 Podemos utilizar ese esas clases para mostrar o ocultar lo que viene siendo este elemento el que aquí 46 00:04:45,970 --> 00:04:51,970 dice hubo un error dos veces tenemos que quitarla de alguna forma y la mejor forma es hacerlo con CSS 47 00:04:52,940 --> 00:04:58,780 no tanto como la mejor pero podemos agregarle una pequeña transición algo que no puedes hacer de otra 48 00:04:58,780 --> 00:05:02,970 forma entonces vamos a ponerle aquí está el Pontus CSS hasta abajo. 49 00:05:04,310 --> 00:05:06,610 Crear un comentario que llegan notificaciones 50 00:05:11,740 --> 00:05:22,250 y vamos a poder aquí nada más visible punto visible iba a tener uno pase de uno pero algo muy importante 51 00:05:22,250 --> 00:05:30,630 es que de momento nada más tenemos este vacío no tiene nada voy a ir a la J.V donde creo mi elemento 52 00:05:30,630 --> 00:05:31,760 lo voy a generar. 53 00:05:31,770 --> 00:05:38,570 Voy a dar una nueva clase y nada más le pones notificación punto Class lista junto a AP y les das un 54 00:05:38,580 --> 00:05:46,590 nombre y eso ya lo va a generar un nuevo elemento con la clase y después con el contenido que se genera 55 00:05:46,710 --> 00:05:50,730 se le agrega una clase y luego el contenido es bastante fácil. 56 00:05:50,730 --> 00:05:57,900 Una vez que te acostumbras a destapar esta clase de scripting JS JavaScript es mucho mejor hacerlo de 57 00:05:57,900 --> 00:05:59,820 esta forma. 58 00:05:59,850 --> 00:06:05,170 Aquí está el punto CSS y voy a escribir también el que viene siendo la notificación. 59 00:06:05,400 --> 00:06:10,650 Puedes ver que esa notificación está como flotante si doy click aquí vemos que queda aquí a este lado. 60 00:06:10,650 --> 00:06:19,800 Eso se logra con un pocillo fixed fijo arriba y luego le das coordenadas top es decir hasta arriba a 61 00:06:19,800 --> 00:06:24,330 qué distancia a un Reem que no quede tan pegado a la orilla y right. 62 00:06:24,330 --> 00:06:32,010 También un Reem le damos un poco de Padín un Reem y tres es decir uno arriba y tres a los lados para 63 00:06:32,010 --> 00:06:37,910 que quede más ancho la notificación y luego uno Pacini de cero. 64 00:06:38,130 --> 00:06:43,500 Entonces se crea la notificación va a tener una pausa de cero cuando tenga la clase de visible que es 65 00:06:43,500 --> 00:06:50,850 inmediatamente que se crea una décima parte de segundo agrega visible es decir pasa de visible cero 66 00:06:50,910 --> 00:06:54,630 a 1 se muestra tres segundos después se oculta. 67 00:06:55,320 --> 00:07:00,870 Entonces guardamos cambios abrimos el proyecto nuevamente como si fuera Quattrocchi Ferre para limpiar 68 00:07:00,870 --> 00:07:08,100 caché damos clic en Añadir vemos que aparece aquí hubo un error tienen notificación visible y luego 69 00:07:08,100 --> 00:07:14,460 se quita de esta parte la clase de notificación se mantiene y puedes ver que incluso se asco ver aquí 70 00:07:14,460 --> 00:07:18,260 la notificación está arriba solamente que tiene una pausa de cero. 71 00:07:18,420 --> 00:07:22,130 Si lo volvemos a agregar vemos que aparece visible que visible tiene uno. 72 00:07:22,180 --> 00:07:25,460 Por eso se muestra y se oculta y se ve bastante bien. 73 00:07:25,930 --> 00:07:31,710 Pero puedes ver que tengo ahora dos notificaciones en mi Dom eso no es bueno no es como que vaya afectar 74 00:07:31,710 --> 00:07:37,800 mucho ese HTML que está ahí no es como que va a ser muy lenta mi aplicación tan poquito código HTML 75 00:07:38,250 --> 00:07:45,630 pero si comienzas o comienzas a generar mucho contenido y no desaparece totalmente el Dom es muy probable 76 00:07:45,630 --> 00:07:52,680 que si suman poco más de memoria a las horas de estar utilizando esta aplicación con muchas notificaciones 77 00:07:52,680 --> 00:08:00,010 de esta forma puede ser que se comience a alentar la aplicación para eso podemos utilizar notificación 78 00:08:00,020 --> 00:08:07,110 punto remoto y hacemos que JavaScript elimine totalmente ese elemento una vez que ya no lo ocupamos. 79 00:08:07,170 --> 00:08:13,000 Recargamos nuevamente y voy a colocarme aquí sobre el leyéndose que es donde se inserta. 80 00:08:13,440 --> 00:08:20,160 Añadir vemos que aparece notificación y visible y una vez que desaparece se va totalmente del DOM y 81 00:08:20,160 --> 00:08:24,870 ahí es donde entra algo que se conoce como Garbage Collection es decir que JavaScript se encargue de 82 00:08:24,870 --> 00:08:29,940 eliminar algo y no consuma más memoria en la computadora. 83 00:08:30,080 --> 00:08:35,850 Ahora cuando tengo esto de mostrar notificación de momento nada más tengo mostrará notificación y tiene 84 00:08:35,850 --> 00:08:37,320 esta parte. 85 00:08:37,320 --> 00:08:42,780 Si vemos el proyecto final aquí se agregó por ejemplo 1 2 y 3 lo voy a añadir tengo contacto creado 86 00:08:42,780 --> 00:08:43,900 exitosamente. 87 00:08:43,930 --> 00:08:51,160 Es decir utilizo la misma notificación para mostrar algo correcto o incorrecto entonces tenemos que 88 00:08:51,160 --> 00:08:57,700 hacer un poco más inteligente nuestra función primero aquí donde tenemos este error voy a pasarle un 89 00:08:57,700 --> 00:09:08,920 parámetro mejor dicho dos y vamos a poner un comentario que diga dos parámetros texto y clase. 90 00:09:09,400 --> 00:09:15,490 Entonces vamos a ponerle aquí dos parámetros un texto que diga por ejemplo se hace clic en Añadir todos 91 00:09:15,490 --> 00:09:26,340 los campos son obligatorios para todos los campos son obligatorios y eso se pasa si aquí se estaba tomar 92 00:09:26,340 --> 00:09:33,210 un parámetro de un mensaje y ese mensaje pasa a ser parte del texto contener todos podemos eliminar 93 00:09:33,210 --> 00:09:44,610 este aquí y ponemos mensaje y una clase entonces Koma y agregamos error entonces podemos utilizarla 94 00:09:44,800 --> 00:09:51,480 en muchos lugares porque por ejemplo cuando sea exitoso Podemos con éxito eliminar esto y quería aquí 95 00:09:52,800 --> 00:09:58,890 contacto creado correctamente o contacto editado correctamente etc.. 96 00:09:58,960 --> 00:10:06,350 Esto nos va a dar mucha flexibilidad a hacerlo de esta forma le puede pasar error aquí pongo Comas error 97 00:10:07,470 --> 00:10:13,220 aquí donde tengo las clases voy a agregar ese error mejor dicho esa clase que no sabemos si va a ser 98 00:10:13,220 --> 00:10:19,130 éxito o error en este caso es error pero puede ser cualquier cosa y por eso nos permite hacerlo más 99 00:10:19,130 --> 00:10:20,300 dinámico X clase. 100 00:10:21,790 --> 00:10:26,670 Va a tomar una clase como parámetro que puede ser error o puede ser correcto y se va a agregar aquí 101 00:10:26,710 --> 00:10:33,390 haciendo nuestra nuestra notificacion un poco más versátil en ese aspecto y que iba a poner una coma. 102 00:10:33,380 --> 00:10:40,060 También porque voy a agregar la clase de sombra que agrega una pequeña sombra y un borde Radius se va 103 00:10:40,060 --> 00:10:44,550 abriendo bastante bien al está el portugués entonces tenemos que agregar a esas clases no es como que 104 00:10:44,550 --> 00:10:54,120 vayan a aparecer automáticamente colores de la notificación tenemos un correcto este 1 lo hemos utilizado 105 00:10:54,150 --> 00:11:00,800 y ponemos un error entonces si quieres agregar más clases las tendrás que agregar aquí y pasarlas como 106 00:11:00,800 --> 00:11:08,840 parámetro en las notificaciones digamos un color amarillo para algún posible error o algo similar entonces 107 00:11:08,840 --> 00:11:16,340 van a ser más fijos estos porque no pienso cambiarlos color verde y azul correcto volverme a poner RGB 108 00:11:17,130 --> 00:11:26,470 179 coma 241 Koma y 117 son colores que obtuve por parte de Crom developer tools. 109 00:11:26,480 --> 00:11:32,690 De esta forma podríamos usar el hexadecimal o HCl no hay ningún problema y el color del texto va a ser 110 00:11:32,690 --> 00:11:46,670 Grin en el error vamos a poner una copia de este y aquí va a cambiar los valores 2 3 8 1 4 8 1 6 6 eso 111 00:11:46,670 --> 00:11:52,790 nos va a dar un color más rosa que es el color de fondo y el color del texto se va a poner como RGB 112 00:11:54,250 --> 00:12:04,990 y aquí va a poner 163 Zero y 33 un color más oscuro entonces vamos a recargar esto ya debe de funcionar 113 00:12:04,990 --> 00:12:06,250 correctamente. 114 00:12:06,550 --> 00:12:13,210 Recargamos di clic en Añadir y vemos todos los campos son obligatorios tres segundos y el elemento desaparece 115 00:12:13,210 --> 00:12:15,960 totalmente del DOM. 116 00:12:15,960 --> 00:12:20,110 Ahora aquí puedes ver que debía añadir y aparece y desaparece muy repentinamente. 117 00:12:20,170 --> 00:12:24,100 Podríamos utilizar una transición o pacis y te permite utilizar transiciones. 118 00:12:24,280 --> 00:12:29,690 Si lo hubiéramos utilizado como Display con display no te lo va a permitir o pasitas. 119 00:12:29,770 --> 00:12:36,440 Si te permite crear transiciones transición capacity .5 segundos. 120 00:12:36,770 --> 00:12:45,170 Y puedes utilizar cualquier valor aquí recargamos añadir todos los campos son obligatorios y puedes 121 00:12:45,170 --> 00:12:50,390 ver que aquí está la parte de la animación entra bien pero cuando se va se quita muy repentinamente 122 00:12:50,390 --> 00:12:57,130 y esto es por lo que viene siendo este remó podríamos esperarlo también otro septima out 123 00:13:04,710 --> 00:13:12,000 si recuerdas estos son los arroyos rescribir Fonso no escribes nada más el paréntesis si está como Flecha 124 00:13:13,160 --> 00:13:18,620 y ahí sí podríamos lo dejamos después bueno como nuestra animación toma medio segundo pues también le 125 00:13:18,630 --> 00:13:27,110 ponemos 500px a medio segundo recargamos añadir aparece el error pasan los 3 segundos se quita y después 126 00:13:27,110 --> 00:13:35,050 desaparece totalmente del DOM si lo revisamos aquí puedes ver que no hay nada en el Dom se ha ido totalmente. 127 00:13:35,060 --> 00:13:40,640 Puedes utilizar JavaScript para la parte interactiva de tu aplicación no es lo recomendado De hecho 128 00:13:40,640 --> 00:13:47,350 no es que tenga algo de malo entonces ya tenemos esta parte lista ya valida correctamente si vemos nuestro 129 00:13:47,350 --> 00:13:52,960 código estamos validando ya esta parte pero qué pasa cuando el usuario llena los campos correctamente. 130 00:13:52,960 --> 00:13:59,010 Aquí es donde vamos a comenzar a hacer nuestros peticiones nuestros llamados Ayax y toda esa parte. 131 00:13:59,030 --> 00:14:01,240 Así que comenzaremos con eso en el próximo video.