1
00:00:00,390 --> 00:00:03,570
Estaremos construyendo también este proyecto en este curso.

2
00:00:03,690 --> 00:00:05,280
Es una agenda de contactos.

3
00:00:05,340 --> 00:00:08,950
Como desarrollador web es muy probable que te pidan proyectos de este tipo.

4
00:00:09,010 --> 00:00:16,320
Es algo que se conoce como un crowd Croods es un acrónimo de crear leer actualizar y eliminar registros

5
00:00:16,380 --> 00:00:17,060
en inglés.

6
00:00:17,550 --> 00:00:19,720
Veamos cómo funciona este proyecto.

7
00:00:19,730 --> 00:00:24,030
Puede ser que tenemos un formulario diseñado un contacto todos los campos son obligatorios si presionas

8
00:00:24,030 --> 00:00:26,520
nada más añadir te aparece esta notificación.

9
00:00:26,580 --> 00:00:28,280
Todos los campos son obligatorios.

10
00:00:28,280 --> 00:00:32,970
Una notificación flotante aparece y después desaparece.

11
00:00:32,970 --> 00:00:39,990
Aquí por ejemplo puedes colocar un nombre colocar el mío una empresa y cualquier número está bien si

12
00:00:39,990 --> 00:00:43,900
damos clic en Añadir tenemos algo puedes ver que aparece esta notificación.

13
00:00:43,920 --> 00:00:49,970
Contacto creado correctamente y desaparece y así como el formulario también se reinicia.

14
00:00:50,010 --> 00:00:51,660
Este proyecto será hecho con Ayax.

15
00:00:51,660 --> 00:00:56,300
Por lo tanto no hay necesidad de recargar la página con dar scroll hacia abajo.

16
00:00:56,340 --> 00:00:59,120
Aquí aparece el nuevo contacto que acabamos de crear.

17
00:00:59,940 --> 00:01:04,160
Aquí estamos mostrando los contactos también mostraremos cómo crear este buscador.

18
00:01:04,160 --> 00:01:09,820
Por ejemplo si tienes muchos contactos muchos proveedores tal vez comienzas a realizar una búsqueda.

19
00:01:09,830 --> 00:01:12,020
Puedes realizar este filtrado.

20
00:01:12,140 --> 00:01:20,060
Como cuando elimino todo aparece ocho contactos pero cuando comienzo a filtrar aparece y este número

21
00:01:20,060 --> 00:01:25,370
se actualiza automáticamente de la misma forma y volver hacia arriba y recargo.

22
00:01:25,480 --> 00:01:32,630
Puedes ver que tengo ocho ocho contactos y si agrego aquí por ejemplo otro contacto a la hora de escribir

23
00:01:32,630 --> 00:01:35,190
añadir este número se actualiza.

24
00:01:35,270 --> 00:01:41,270
Todo esto es gracias a JavaScript y a Ayax que son tecnologías que te van a permitir aplicaciones web

25
00:01:41,270 --> 00:01:43,210
más interactivas.

26
00:01:43,250 --> 00:01:45,260
También podemos editar los registros.

27
00:01:45,260 --> 00:01:51,320
Digamos que esta persona queremos cambiar su nombre damos clic aquí nos lleva al formulario para editarlo.

28
00:01:51,440 --> 00:01:56,840
Si no quieres realizar ningún cambio nada más presionas volver y te lleva nuevamente el listado o puedes

29
00:01:56,840 --> 00:02:01,350
cambiar el nombre o poner mi nombre.

30
00:02:01,350 --> 00:02:03,680
Nuevamente doy clic en Guardar.

31
00:02:03,790 --> 00:02:06,460
Vemos que hice contacto editado correctamente.

32
00:02:06,570 --> 00:02:13,170
Después de un momento nos lleva automáticamente a la página principal y el contacto ha sido actualizado.

33
00:02:13,170 --> 00:02:18,960
Entonces ya vimos cómo crear la operación de crear registros listar los actualizarlos pero también si

34
00:02:18,960 --> 00:02:23,720
quieres eliminar un registro de digamos que quieres eliminar este das click aquí te pregunta si quieres

35
00:02:23,720 --> 00:02:24,320
ser liminar.

36
00:02:24,480 --> 00:02:30,660
Presionas ok y vemos que se ha desaparecido de esta parte y se contacta eliminado con una notificación

37
00:02:31,340 --> 00:02:34,390
y puede ser que ya nada más tenemos ocho contactos.

38
00:02:34,470 --> 00:02:40,200
Las herramientas que estaremos utilizando para este proyecto toda la parte visual está hecha con HTML5

39
00:02:40,200 --> 00:02:41,590
y CSS3.

40
00:02:41,610 --> 00:02:45,210
Estaremos utilizando Flex Box y CSS Grid.

41
00:02:45,270 --> 00:02:48,690
Todo esto será responsivo si lo haces más pequeño puedes ver que se ve bastante bien.

42
00:02:49,750 --> 00:02:56,540
Y vamos a hacerlo más grande la parte de inserción de los datos se realiza con PHP se almacenan en una

43
00:02:56,540 --> 00:03:03,770
base de datos Maykel y la parte interactiva y de agregar por ejemplo nuevo contacto y que se cargue

44
00:03:03,770 --> 00:03:10,880
sin necesidad de cargar la página es con JavaScript y con Ayax tecnologías lo bastante robustas y estables

45
00:03:11,240 --> 00:03:13,560
para crear cualquier tipo de aplicación web.