1
00:00:00,520 --> 00:00:04,850
En esto íbamos a comenzar con la parte inferior pues el que tiene un color diferente tiene sombreado

2
00:00:04,850 --> 00:00:07,630
también y tiene las esquinas redondeadas.

3
00:00:07,650 --> 00:00:12,810
Estaremos reutilizando buena parte de algunas clases que ya hemos comenzado a crear lo primero es que

4
00:00:12,810 --> 00:00:19,160
Barry índex apuntó PHP y después fuera de este DIV que tiene el contenedor amarillo.

5
00:00:19,260 --> 00:00:25,930
Voy a crear uno nuevo y quiero poner background blanco punto contenedor para utilizar el contenedor

6
00:00:26,290 --> 00:00:33,730
sombra y aquí voy a crear una nueva clase eccema contactos tienen muchas clases después voy a crear

7
00:00:33,730 --> 00:00:43,190
un DIV que voy a decir contenedor contactos y un H2 que va a decir contactos si guardamos cambios y

8
00:00:43,190 --> 00:00:49,940
recargamos el proyecto pues el que tenemos algo así aplica la sombra y contacto se centra se va viendo

9
00:00:51,140 --> 00:00:57,240
muy bien todavía me falta mucho por agregar el siguiente paso es que tenemos que tener este input este

10
00:00:57,280 --> 00:01:02,050
impulso que va a hacer es filtrar los resultados y por ejemplo pongo el que muestra un contacto pero

11
00:01:02,060 --> 00:01:12,530
si pongo algo que no existe nos ayuda a buscar vamos a hacerlo imput Taipe Tex.

12
00:01:12,530 --> 00:01:21,670
Ahí vi buscar estaremos creando toda esa funcionalidad con JavaScript y una clase Class buscador y también

13
00:01:21,670 --> 00:01:32,920
va a tener sombra y un play joder Wolder y aquí lo voy a colapsar esta parte que va a ser buscar contactos

14
00:01:35,090 --> 00:01:41,930
y cerramos el tiempo guardamos cambios nuevamente recargamos aparece aquí va a requerir más CSS pero

15
00:01:41,930 --> 00:01:44,210
de momento se va viendo de esta forma.

16
00:01:44,210 --> 00:01:53,250
Después puede ver que aquí tenemos un contactos que va a colocar un párrafo que va a decir Class total

17
00:01:54,090 --> 00:02:01,170
contactos y una Span y en un momento digamos que vamos a poner así como dos contactos tener un poco

18
00:02:01,170 --> 00:02:09,720
de texto aquí este número sin por JavaScript es dos contactos de esta forma que de esta forma y el siguiente

19
00:02:09,720 --> 00:02:12,180
paso es crear lo que viene siendo la tabla.

20
00:02:12,180 --> 00:02:19,070
Primero voy a crear un contenedor de la tabla y después una tabla.

21
00:02:19,160 --> 00:02:25,580
Las tablas se siguen utilizando hoy en día más que nada para proyectos como este tipo con información

22
00:02:25,580 --> 00:02:30,740
de esta forma ya no se utilizan para lo que es el Layo del sitio web como anteriormente pero para este

23
00:02:30,740 --> 00:02:32,570
tipo de proyectos siguen siendo útiles.

24
00:02:33,890 --> 00:02:39,120
Heydi porque aquí estaré seleccionando este con JavaScript de nueva cuenta con JavaScript puedes seleccionar

25
00:02:39,120 --> 00:02:39,930
clases o Eirís.

26
00:02:39,930 --> 00:02:41,020
No hay problema.

27
00:02:41,310 --> 00:02:44,890
Me gusta más seleccionar por medio de una preferencia personal.

28
00:02:45,960 --> 00:02:46,780
Trebol get.

29
00:02:46,790 --> 00:02:48,580
Vamos a colocarlo aquí opinante.

30
00:02:48,620 --> 00:02:57,590
R Te h con el nombre tenemos varios campos aquí que tenemos nombre empresa teléfono y las acciones eliminar

31
00:02:57,590 --> 00:03:05,260
o borrar registros copiar este y vamos a colocar el primero.

32
00:03:05,330 --> 00:03:08,640
Empresa y después.

33
00:03:08,640 --> 00:03:16,550
Teléfono y finalmente las acciones que van a hacer los botones después adquiere el Taiwo va.

34
00:03:16,550 --> 00:03:28,730
Colocar el trebol body the body cerráramos The Body y colocar los elementos primero un T.R por cuatro.

35
00:03:28,750 --> 00:03:33,040
También tenemos esa funcionalidad y crear aquí algunos textos nada más.

36
00:03:33,040 --> 00:03:43,850
Por ejemplo colocar mi nombre puedes colocar el tuyo Barjuan de la empresa enemies pero no me demanden

37
00:03:44,570 --> 00:03:46,610
y teléfono cualquier número está bien.

38
00:03:46,820 --> 00:03:48,500
Y quién el último puede darle espacio.

39
00:03:48,510 --> 00:03:51,750
Porque vamos a agregar unos botones de fondo Olsson.

40
00:03:51,980 --> 00:03:56,120
Ahora cuando doy clic en Editar aquí me lleva a otra página aquí voy a realizar las ediciones de este

41
00:03:56,120 --> 00:04:06,220
contacto en específico entonces va a ser un inquer un enlace y de momento le vamos a dejar vacío dentro

42
00:04:06,220 --> 00:04:07,370
del enlace.

43
00:04:07,480 --> 00:04:12,530
Utilizando un icono de Font o entonces abrimos el sitio web de Font.

44
00:04:12,580 --> 00:04:18,430
Por cierto yo nada más copié la versión de fondo un cambio en la página a cada rato e incluso ayer entré

45
00:04:18,430 --> 00:04:25,460
y la página era diferente a la que está ahorita pero bueno aquí donde dice Houthi ñuls vas a encontrar

46
00:04:25,550 --> 00:04:27,450
el enlace que tienes que copiar.

47
00:04:27,470 --> 00:04:38,260
Solamente con que ese estilo colocas Together es suficiente seguridad a guardar cambios y vamos a agregar

48
00:04:38,260 --> 00:04:39,560
el icono.

49
00:04:39,700 --> 00:04:46,030
Si das click aquí en icons puedes buscar los iconos ya tengo un icono que quiero utilizar se llama Pen

50
00:04:47,460 --> 00:04:54,050
yo Escuer sería esta pluma que está aquí pero si le das a buscar por ejemplo édith te van a salir una

51
00:04:54,050 --> 00:04:58,750
gran cantidad de distintos iconos que puedes utilizar para la parte de edición.

52
00:04:58,760 --> 00:05:07,320
A mi me gustó mucho este lo voy a copiar además das click aquí y te copia el HTML y lo pegas aquí guardamos

53
00:05:07,320 --> 00:05:11,870
cambios abrimos el proyecto y vemos que aparece un pequeño lápiz de faltas CSS.

54
00:05:11,880 --> 00:05:18,260
Obviamente lo veremos en el próximo video pero queda de esta forma y el otro va a ser un botón.

55
00:05:18,320 --> 00:05:30,710
Aquí tenemos una HR-V este va a ser un botón Taipe botón y cierro el botón y su texto va a decir bueno

56
00:05:30,710 --> 00:05:38,190
va a ser también un icono de clic en icons y equipo ponerle como búsqueda uno que se llama traje tras

57
00:05:38,270 --> 00:05:47,530
Alt cualquiera de los dos el que más te guste está bien creo que ya utilicé si esta de aquí hecho creo

58
00:05:47,530 --> 00:05:54,180
que este es el que está gratis el otro es de otra versión de Photoshop este si se paga esto es otra

59
00:05:54,180 --> 00:05:54,690
versión

60
00:05:58,530 --> 00:06:06,980
si es el mismo nadamas con otro código que se dice fácil dice Faur esperábamos cambios recargamos y

61
00:06:06,980 --> 00:06:13,150
aparece lo que es el icono tenemos el icono de editar y el icono de el bote de basura a falta escribir

62
00:06:13,160 --> 00:06:24,700
el CSS lo veremos más adelante quiero agregar un par de clases Class veten borrar y BDN los extremos

63
00:06:24,760 --> 00:06:33,190
agregando un poco más adelante quiero poner un data ahí a ponerle que data y estos son atributos personalizados

64
00:06:33,190 --> 00:06:35,310
que tú puedes crear.

65
00:06:35,320 --> 00:06:40,810
También es de las nuevas características de HTML y puedes crear tus propios atributos estos atributos

66
00:06:40,810 --> 00:06:46,990
como Tag Class son atributos que HTML ya tiene son estándares pero tú también puedes crear los tuyos

67
00:06:47,410 --> 00:06:53,560
solamente agrega data guión y puedes darle un nombre y el valor que tú desees desde la misma forma que

68
00:06:53,560 --> 00:07:01,940
agregamos estas clases de veten borrar y Bestene a quién vamos a colocar class o apegar y solamente

69
00:07:01,940 --> 00:07:08,340
que qué iba a decir botón Editar estaremos creando una clase para los botones MTN editar o borrar tendrán

70
00:07:08,340 --> 00:07:13,470
sus propios estilos porque cada botones de distinto color entonces sólo veremos un poco más adelante

71
00:07:14,870 --> 00:07:19,830
entonces tenemos ya como quien dice la base de los contactos.

72
00:07:19,850 --> 00:07:26,410
Voy a crear una copia de este TR copiarlo y al menos colocar unos dos más haremos dinámico un poco más

73
00:07:26,410 --> 00:07:28,420
adelante ya que agregamos PHP.

74
00:07:28,420 --> 00:07:33,520
La idea es tener como tres contactos para que se vea un poco mejor y en el próximo video estaremos escribiendo

75
00:07:33,520 --> 00:07:34,890
el CSS de esta parte.