Hola bienvenidos a una nueva clase.
Vamos a empezar a darle ritmo al avance en nuestro panel y yo estoy en principal ahora punto PHP y quiero
transformar este link que está en el aceite en algo que apunte a esto yo quiero tener en la barra un
link un botón que me permita apuntar a lo que yo le voy a llamar descubrir.
Le vamos a poder descubrir qué va a hacer descubrir va a ser por ejemplo cuando estamos en YouTube y
no estamos bloqueados con ninguna cuenta a donde no me está mostrando Misfit a la gente que sigo si
no me muestra de todo un poco vamos a hacer que aparezcan los vídeos de otros usuarios de manera aleatoria
para permitirme descubrir el contenido de mi agrado y digamos suscribirme ese contenido.
Entonces vamos de a poco creando los links que vamos a utilizar el primero y más lógico el que apunta
a esta zona la zona de descubrir como he decidido llamarla entonces.
Esto es muy simple venimos acá a buscar simplemente como en el código y ya les queda.
Yo he puesto estos carteles vamos a llamar que son comentarios bien delimitados con muchos asteriscos
para que sea fácil encontrar.
Miren que que practico que es una técnica que les recomiendo.
Ojo con los comentarios que no es lo mismo que en PHP en HTML vean que los comentarios se hacen de una
manera diferente.
El comentario se abre de esta manera como estoy marcando aca y se cierra de esta manera.
Ahora a donde les digo ojo con los comentarios no es por esto que se abren y se cierran de manera diferente.
Se acuerdan que en PHP lo hago con barra barra.
Es muy fácil.
La precaución que les tengo es que sean conscientes de que estos comentarios son visibles para el público
si el público hace click derecho a inspeccionar puede ver el código fuente y leer los comentarios.
Nos ha pasado más de una vez por ejemplo yo que tengo la suerte de trabajar con integrantes de mi familia
con mi hijo con mi señora programamos en PHP es normal que hagamos comentarios con lenguaje interno
que tenemos dentro de nuestro grupo y no nos preocupa porque el código php no lo lee nadie.
Obviamente los comentarios si es que los ponemos acá tienen que ser un poco más formales ya que pueden
ser leídos.
Bueno vamos justos de tanto deambular llegué acá al aceite o barra lateral.
Entonces cómo busco
el link el link que decía Dash Work es este de acá.
Entonces le vamos a poner descubrir y la diferencia aquí está el El HR-V a donde apunta vean que acá
están las etiquetas a y la que cierra entonces todo esto es el link el link está compuesto de.
Veamos por la palabra Sword por un icono.
Por todo este marco y todo explicable por qué todo explicable Miren por qué tanto el icono que está
acá que dice y y de clase tiene FA fashion Dashboard.
Bueno esta es la librería de iconos esa que les conté que es super popular y de esta manera se imprime
el icono esto es lo que hace la barra esta barra que se ve acá.
Miren ven que está como un poco más gris esta zona y también esta zona gris es clickea que es parte
del link.
Por qué.
Porque todo esto está dentro de etiquetas para que todo esto se haga Link.
Entonces cuando algo apunta a numeral en realidad es para que no tenga efecto apunta a sí mismo.
Si yo hubiera Clicker acá no pasa nada.
No está llevando a ningún lugar pero lo que tenemos que notar es que el link que está puesto acá es
de tipo desplegable.
Yo no quiero eso.
Entonces vamos a acomodarlo lo que voy a hacer es borrarle este Triz vivo que tiene acá para que no
se despligue más y esta lista que se ve acá estos huele estas etiquetas huele son para marcar el comienzo
y el fin de una lista de ítems y cada ítem de la lista lo voy a poner con las etiquetas lí abre y cierra
entonces esas lí lo que hacen es generarme cada uno de estos puntos que tengo adentro yo no quiero nada
de eso entonces vamos a proceder a eliminar todo eliminar acá esto que está aquí y vamos a ver cómo
reacciona ahora de todos modos noten cada ítem cada ítem del menú.
A su vez está metido dentro de etiquetas huele porque van a hacer también un listado en definitiva a
cada ítem del menú o sea cada ítem del menú es parte de un listado.
Entonces grabo quiero ver cómo está reaccionando de esto ahí veo bueno ahí está apunto a sí mismo por
eso no se notó ningún cambio
bien.
A ver vamos acá también quiero que desaparezca este símbolo cretina en el extremo entonces lo voy a
buscar y yo me doy cuenta de qué es esto de acá lo voy a eliminar.
Quiero hacer algo simple no tan cargado de cosas que se mueven ya que estamos.
Ponemos el link.
Esto tiene que apuntar a principal punto de HP listo ya grabé.
Vamos a ver ahí está como lo que haríamos.
Bueno yo ahora quiero generar otro link como éste más abajo que lo vamos a poner Configuración o Settings
esa donde vamos a tener las opciones de cargar la imagen del usuario o modificarla y a dónde vamos a
poder cambiar la contraseña y el mail bien entonces vamos a hacer eso aquí y cómo hago directamente
copio el link anterior lo pego y miren cómo queda.
Ahí tendrían que aparecer dos descubrir.
Bueno empecemos a analizar algo.
Ven que esta pequeña raya de color celeste en teoría me tiene que indicar si estoy en descubrir o en
Settings cuando yo haga click acá esta raza tiene que iluminarse abajo y dejar de iluminarse arriba.
Qué es lo que controla esta raya.
Es esto que vemos aquí.
Vieron que hice este Li parte de la librería que nos está brindando.
El panel es tan noble que nos permiten opciones como cómo estás.
Yo si le saco yo estoy acá le voy a sacar el Active.
No les dejo nada y mira ahí está bueno cambiemos el ícono y lo que dice lo que dice fácil porque vengo
acá y le vamos a poner dijimos Configuración Configuración perfecto no quedará muy largo.
Veamos.
Yo creo que no para nada pero si el ícono me gustaría que sean el engranaje les parece el engranaje
C se suele usar para eso o una llave vamos a poner el engranaje llave.
Me refiero a la llave tipo inglesa y de mecánico vamos a venir entonces quiero mostrar que es muy útil
tener el panel original a mano.
Entonces yo lo voy a buscar rápidamente.
Bueno aquí está agrandará.
Recuerden siempre todo lo que ven en esta pantalla está un poco aumentado por razones del video.
Yo le agrado siempre la letra porque ustedes pueden ver bien si no lo van a ver muy chico.
Vamos a UI elements y acá están los íconos ya me trae la versión de la librería que está incorporada
y todos los íconos disponibles.
Hay un montón.
Esta librería ha evolucionado muchísimo el día de la fecha y si ustedes entran Miren voy a poner a Wesson
Icons.
Bueno la verdad es que ahora está buenísima no se la pueden perder pero habría que actualizarla porque
la que nos trae es una versión vieja dado que los íconos que vamos a usar nosotros son simples.
Yo no lo había actualizado.
Si ustedes quieren pueden cambiar el link.
Esta librería recuérdense está importando en el jean.
Ahí van a encontrar el link bueno pueden descargar la nueva versión y actualizarla.
Vamos a seguir con la que tiene nomás.
Acá están los nuevos iconos incluso hay iconos de pago.
Pero miren hay marcas hay un montón de cosas que no había antes.
Está súper súper completa el panel nos trae dos tipos de iconos.
Font Wesson y los estos gráficos que son muy interesantes se quedan quedan bastante lindos cuando se
los utiliza.
Bueno veamos el engranaje creo que era cous cous.
Aquí está hay dos un engranaje único.
Eso me gusta.
Yo copio eso ya tengo copiado y me vuelvo al código y lo voy a poner aquí el primer PHA hay que dejarlo
sólo voy a cambiar el segundo.
Ven ahí estafa.
Hyon.
Cómo vamos a actualizar
y ahí está.
Como ven también sólo se está iluminando la raya de arriba y lo que vamos a hacer es en configuración
punto PHP.
Supongo que se va a llamar el archivo al que apunta este link.
Lo que vamos a hacer es como hoy tenemos que repetir también la barra lateral elige el content bueno
es lo que vamos a hacer es que cuando hagamos click ahí en el código en esta nueva página el Active
lo vamos a poner acá y acá nos vamos a poner nada.
Eso va a dar el efecto de que está cambiando.
Entonces ya mismo podemos hacer eso o ya mismo podríamos hacerlo pero yo quiero completar un poco esto
porque como va a ser una copia prácticamente lo único que cambia es el centro.
Bueno quiero dejar todo completo para que cuando copiemos para hacer las otras versiones de configuración
o algún otro link que necesitemos no tengamos que andar retocando nada.
Entonces vamos a tratar de determinar todo lo que podamos.
Principal punto PHP y después no nos dedicamos a hacer las otras versiones.
Igual sí que retocar algo no pasa nada.
También probamos con otro link que nos va a servir para ver el material o el contenido de los que estamos
siguiendo de aquellos creadores que estamos siguiendo.
Entonces para esto vamos a hacer lo siguiente Me olvidaba de algo este segundo link apunta a la configuración
punto PHP obvio todavía no lo hemos creado a ese archivo pero ya sabemos que se va a llamar así.
Vamos con un tercer Link que va a ser bueno.
éste lo dejo como configuración el tercero y modifico el segundo como nuevo.
Le vamos a poner por ahora
siguiendo.
Entonces al hacer click acá vamos a ver.
No es el material que a nosotros nos gusta a los creadores que estamos siguiendo.
A veces es un desafío encontrar el icono apropiado para cada cosa.
Bueno yo lo voy a poner donde se ven varios usuarios quizás no sé si es el más apropiado pero de momento
se me ocurre eso de cambiar acá y me estoy olvidando de cambiar el icono del primero el de descubrir
a ver a ver unas especies de larga vistas a ver
está la lupa o la lupa no quiero menos las revistas a ver vamos a buscar vino.
Ahí está verán que si existía esta
me vengo aquí y lo reemplazo en el primero.
Vamos a ver como va quedando esto y siguiendo apuntará siguiendo punto PHP le pongamos.
Si les parece
bueno miren qué buena forma que está tomando luce Linda no cambiemos el pie de página desparece ya me
está molestando eso de vamos al pie de página es fácil encontrarlo va a estar al final ahí está el pie
de página a la versión le vamos a poner 1 punto cero punto cero
el copyright le vamos a poner 2019
PHP tuve puntocom
y le vamos a poner X.P como sobreponerte somos y ópticos junto con todos los derechos reservados.
Qué importante esto.
A ver.
Bueno por poner algo a ver nos falta algo más.
Sí sí sí sí sí podríamos hacer algo aquí.
Bueno a ver se me ocurre reordenar el asunto sobre todo porque seguro que esto va a crecer más adelante
agregaremos clases de actualización y mejoraremos muchas cosas y de paso para aprovechar el panel y
practicar qué les parece si hacemos así acá en Main Navigation si quieren lo ponen después como en español
como ustedes quieran dejamos lo que serían las herramientas o las opciones inherentes a la plataforma
a navegar a buscar videos y acá ponemos algo como administración herramientas y vamos a poner configuración
acá abajo.
Así mira a ver a buscar y a esta configuración.
Este es el labels acá en laves ya esto lo voy a cambiar y le voy a poner herramientas
estos labels a ver cómo está puesto ese que dice importante lo voy a sacar y vamos a pegar este configuración
aquí abajo.
Y por último yo voy a poner un link más que va a ser importantísimo salir lo Gout vamos a cambiarle
el ícono me vuelven los iconos veamos Educ.ar Harrow en inglés que es Flecha porque sabía ver una flecha
que apuntaba para afuera o algo así.
Puede ser esta
también una puerta o la puerta me acabo de inventar.
Busco éxito no.
Bueno vamos con la flecha y si no después la cambiamos por otra cosa.
Bueno como verán ya puse la flecha y le he puesto un color personalizado.
Quería mostrarles que a los iconos también se les puede cambiar el color.
Bueno no me termina de convencer.
Cómo genera este color.
Bueno yo primero le quise poner rojo así pero salí demasiado claro demasiado fuerte.
Quería un color más oscuro entonces ya tenemos que apelar a un color Piquer.
Yo lo busqué por internet puse color Piquer y aparecen un montón a donde simplemente podés elegir un
color hilando súper fino.
Seleccionar el código de ese color y pegarlo.
Aquí está el que puse color y el código no me termina de convencer como queda.
La verdad es esa.
Pero era más que todo para mostrarles que se podía cambiar de color al ícono entonces ya tenemos un
menú o una opción para poder del gobierno.
Desde luego que tenemos que ahora fabricar todos estos menúes.
Bueno voy a cambiar ese Serch que dice ahí lo vamos a pasar a buscar en español cómo hago controlé F
Serch avistamos CERT.
Y dónde está Javer.
Busquemos ahí está Pleiss Holder le vamos a cambiar por buscar
perfecto.
No otro detalle yo creo que es lo último que vamos a tocar va a ser esta banderita la voy a cambiar
por una campana.
A ver vamos Flack banderas no me acuerdo.
Yo llegué a ese lugar de probar a ver eran
V.El.
Si me equivoco y busco el icono se me salió justo de memoria.
No estaba segura.
Bueno es más o menos lo que estábamos buscando.
No vamos a tocar mucho más.
Entonces como ya tengo definido esto sí ya me di cuenta que me olvidé de algo más pero entiéndalo lo
que voy a partir de ahora yo tengo que empezar a replicar esta página a duplicarla para hacer ya tengo
el principal bien hacer descubrir necesito hacer el siguiendo que en definitiva como tengo que repetir
esto tengo que repetir todo esto y tengo que repetir todo esto a mi me conviene a este descubri dejarlo
lo más completo posible porque si después se me ocurre una vez que terminé el terminé todo agregar a
k una opción más voy a tener que agregarla en todas las otras páginas también tiene lógica.
Bueno si me estaba olvidando de algo y es esto amigos míos tenemos todavía este espantoso logo por qué
lo digo espantoso no sé.
Pobre admin LTP cómo buscarlo donde lo tenía puesto que no me acuerdo.
Estoy buscando Demmin.
Bueno evidentemente está lleno de cosas que dicen admin voy a buscar mejor logo a ver no me Accorsi
como casta por eso no lo encontraba ahí estamos.
Bueno el logo está hecho de esta manera porque está hecho con letras y con estilos.
Yo me voy a ahorrar ahorrar todo esto lo borro.
Ya no va a salir más el logo de arriba de la barra y lo que vamos a hacer es abro aquí vamos a un curso
de HP tube voy a abrir el login y vamos a pedir prestado de acá.
Esto para qué escribir tanto.
A ver si con esto de casa me vuelvo aquí pego el logo el logo fijense que tiene un link yo el link le
vamos a poner principal punto PHP.
Por si alguien le hace click no creo que alguien le haga click y veamos cómo sale.
Me parece que volcarme grande.
Les dije.
Qué les dije Vamos a conciban este fin sería bastante bastante pequeño.
Vamos con 50 y no charlemos más.
A ver
buenos días vamos.
70
maistro puedo andar.
De todos modos yo haría otra versión para lo bueno voy a poner pie para hacer el vídeo para no aburrir.
Pero voy a hacer otra versión porque vale la pena pero por qué pasar el video si lo podemos poner rápido.
Bueno como ven ya tengo listo el logo.
Lo acabo de pegar a esta versión que le saqué la parte de abajo.
No va para esto.
Le puse PHP TV2 es un PNG.
No sé por qué no me agradó la extensión vamos a nombrarlo momento momento
a esta le voy a agregar el PNG png que no se grabó está entonces ahora va a ser tan fácil como minimizar
esto en el código cambiar acá el nombre desde donde estoy trayendo el logo HP TV 2 perfecto.
Veamos como quedó hoy.
Bueno me gustó un poco más.
Bueno ahora sí me animaría ahora sí que me animaría a hacer el resto de las páginas.
Y seguro que vamos a tener que modificar y retocar todas las que hagamos.
Ya estoy pensando en esto de las fotos del usuario pero bueno no pasa nada va a ser menos del trabajo
listo entonces ya tenemos el punto de partida más preparado y ya será cuestión de empezar con una de
estas opciones que eso será cuestión de la próxima clase.
Muchas gracias a.