En esto íbamos a comenzar con la parte inferior pues el que tiene un color diferente tiene sombreado
también y tiene las esquinas redondeadas.
Estaremos reutilizando buena parte de algunas clases que ya hemos comenzado a crear lo primero es que
Barry índex apuntó PHP y después fuera de este DIV que tiene el contenedor amarillo.
Voy a crear uno nuevo y quiero poner background blanco punto contenedor para utilizar el contenedor
sombra y aquí voy a crear una nueva clase eccema contactos tienen muchas clases después voy a crear
un DIV que voy a decir contenedor contactos y un H2 que va a decir contactos si guardamos cambios y
recargamos el proyecto pues el que tenemos algo así aplica la sombra y contacto se centra se va viendo
muy bien todavía me falta mucho por agregar el siguiente paso es que tenemos que tener este input este
impulso que va a hacer es filtrar los resultados y por ejemplo pongo el que muestra un contacto pero
si pongo algo que no existe nos ayuda a buscar vamos a hacerlo imput Taipe Tex.
Ahí vi buscar estaremos creando toda esa funcionalidad con JavaScript y una clase Class buscador y también
va a tener sombra y un play joder Wolder y aquí lo voy a colapsar esta parte que va a ser buscar contactos
y cerramos el tiempo guardamos cambios nuevamente recargamos aparece aquí va a requerir más CSS pero
de momento se va viendo de esta forma.
Después puede ver que aquí tenemos un contactos que va a colocar un párrafo que va a decir Class total
contactos y una Span y en un momento digamos que vamos a poner así como dos contactos tener un poco
de texto aquí este número sin por JavaScript es dos contactos de esta forma que de esta forma y el siguiente
paso es crear lo que viene siendo la tabla.
Primero voy a crear un contenedor de la tabla y después una tabla.
Las tablas se siguen utilizando hoy en día más que nada para proyectos como este tipo con información
de esta forma ya no se utilizan para lo que es el Layo del sitio web como anteriormente pero para este
tipo de proyectos siguen siendo útiles.
Heydi porque aquí estaré seleccionando este con JavaScript de nueva cuenta con JavaScript puedes seleccionar
clases o Eirís.
No hay problema.
Me gusta más seleccionar por medio de una preferencia personal.
Trebol get.
Vamos a colocarlo aquí opinante.
R Te h con el nombre tenemos varios campos aquí que tenemos nombre empresa teléfono y las acciones eliminar
o borrar registros copiar este y vamos a colocar el primero.
Empresa y después.
Teléfono y finalmente las acciones que van a hacer los botones después adquiere el Taiwo va.
Colocar el trebol body the body cerráramos The Body y colocar los elementos primero un T.R por cuatro.
También tenemos esa funcionalidad y crear aquí algunos textos nada más.
Por ejemplo colocar mi nombre puedes colocar el tuyo Barjuan de la empresa enemies pero no me demanden
y teléfono cualquier número está bien.
Y quién el último puede darle espacio.
Porque vamos a agregar unos botones de fondo Olsson.
Ahora cuando doy clic en Editar aquí me lleva a otra página aquí voy a realizar las ediciones de este
contacto en específico entonces va a ser un inquer un enlace y de momento le vamos a dejar vacío dentro
del enlace.
Utilizando un icono de Font o entonces abrimos el sitio web de Font.
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é
y la página era diferente a la que está ahorita pero bueno aquí donde dice Houthi ñuls vas a encontrar
el enlace que tienes que copiar.
Solamente con que ese estilo colocas Together es suficiente seguridad a guardar cambios y vamos a agregar
el icono.
Si das click aquí en icons puedes buscar los iconos ya tengo un icono que quiero utilizar se llama Pen
yo Escuer sería esta pluma que está aquí pero si le das a buscar por ejemplo édith te van a salir una
gran cantidad de distintos iconos que puedes utilizar para la parte de edición.
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
cambios abrimos el proyecto y vemos que aparece un pequeño lápiz de faltas CSS.
Obviamente lo veremos en el próximo video pero queda de esta forma y el otro va a ser un botón.
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
va a ser también un icono de clic en icons y equipo ponerle como búsqueda uno que se llama traje tras
Alt cualquiera de los dos el que más te guste está bien creo que ya utilicé si esta de aquí hecho creo
que este es el que está gratis el otro es de otra versión de Photoshop este si se paga esto es otra
versión
si es el mismo nadamas con otro código que se dice fácil dice Faur esperábamos cambios recargamos y
aparece lo que es el icono tenemos el icono de editar y el icono de el bote de basura a falta escribir
el CSS lo veremos más adelante quiero agregar un par de clases Class veten borrar y BDN los extremos
agregando un poco más adelante quiero poner un data ahí a ponerle que data y estos son atributos personalizados
que tú puedes crear.
También es de las nuevas características de HTML y puedes crear tus propios atributos estos atributos
como Tag Class son atributos que HTML ya tiene son estándares pero tú también puedes crear los tuyos
solamente agrega data guión y puedes darle un nombre y el valor que tú desees desde la misma forma que
agregamos estas clases de veten borrar y Bestene a quién vamos a colocar class o apegar y solamente
que qué iba a decir botón Editar estaremos creando una clase para los botones MTN editar o borrar tendrán
sus propios estilos porque cada botones de distinto color entonces sólo veremos un poco más adelante
entonces tenemos ya como quien dice la base de los contactos.
Voy a crear una copia de este TR copiarlo y al menos colocar unos dos más haremos dinámico un poco más
adelante ya que agregamos PHP.
La idea es tener como tres contactos para que se vea un poco mejor y en el próximo video estaremos escribiendo
el CSS de esta parte.