Bien vamos a continuar con esta aplicación según hemos comentado vamos a empezar a utilizar vostra esto
para mejorar la apariencia visual de nuestra aplicación así que para comenzar vamos al sitio de Bushra
y es bastante sencillo de aplicarlo de todas maneras vamos a ir paso a paso y además vamos a dejar varios
recursos para que en dado caso de que deseen profundizar en este framework puedan hacerlo sin ningún
problema.
Así que entramos en la página de Get vostra puntocom y damos clic sobre Guedes tarde en este momento
tenemos la versión 4.3 punto 1.
Sin embargo constantemente hay actualizaciones así que nos va a permitir crear aplicaciones responsive.
Y como comenta enfocadas a crear aplicaciones que se vean bien desde cualquier dispositivo considerando
en primer lugar los dispositivos móviles así que las aplicaciones web que desarrollemos con Vostro APP
se van a ver perfectamente desde dispositivos móviles hasta dispositivos como tablets o desde una PC
así que vamos a crear ese tipo de aplicaciones utilizando Bosworth e internamente utiliza HTML CSS y
JavaScript y también tiene la ventaja de que muchos de los componentes que vamos a utilizar ya han sido
diseñados y están perfectamente documentados.
Esto viene dentro de la documentación tenemos también ejemplos temas y muchas cosas más para empezar
a trabajar así que vamos a dar clic sobre qué es tablet y lo primero que se debe de hacer es utilizar
el link para incluir los SS es de vostra pero nosotros también vamos a incluir JavaScript ya que también
vamos a utilizar algunos componentes que van a utilizar estas librerías.
Por lo tanto también se deben incluir las librerías de JavaScript incluyendo yhay Cuadri y también el
framework de poppers que es otra librería de JavaScript para el manejo de mensajes de tipo Tulip y por
lo tanto se debe de incluir esas tres líneas dentro de nuestro archivo HTML o en este caso dentro de
JSP.
Y también podemos observar en la documentación que nos agrega un HTML por default en dado caso de que
lo deseemos utilizar así que vamos a utilizar HTML.
Vamos a copiar los metas y el vostra CSS y lo vamos a agregar dentro de nuestro archivo jsp así que
vamos a copiar estas líneas
vamos a nuestro G.T vamos a quitar este meta y vamos a pegar las líneas que hemos copiado.
Damos un formato y con esto ya estamos utilizando los estilos de Bostrom así que la configuración básica
que necesitamos para comenzar a trabajar y ahora antes de cerrar el Bodin lo que vamos a hacer es agregar
los archivos de JavaScript.
Así que regresamos a esta página de Bostrom y en la parte inferior copiamos estos links en el orden
en que están escritos así que copiamos estos tres links vamos a nuestro JSP y debemos de agregar antes
de cerrar el body de nuestro JSP
así que en la parte inferior pegamos estos tres scripts primeros de Yei keirin.
Después poppers y finalmente Bootstrap damos un formato y esto es todo para comenzar a trabajar con
vostra.
Si desplegamos nuestra aplicación vamos a ver los cambios.
Damos clic derecho Run y deberemos observar ahora una fuente distinta anteriormente podíamos visualizar
esta fuente
sin inspeccionamos este elemento se estaba aplicando la fuente de Times New Román.
Esta era la fuente por default y ahora podemos observar que se está aplicando otro estilo y también
otra fuente así que se inspeccionamos este elemento.
Damos clic derecho a inspeccionar
podemos observar que se está utilizando la fuente de Segob UI semi boldo así que solamente ese es el
primer cambio que podemos observar pero con esto ya hemos configurado correctamente vostra sin embargo
también vamos a utilizar algunos iconos dentro de nuestra aplicación.
Por lo tanto también no solamente vamos a utilizar Bushra sino también vamos a utilizar una librería
que se llama Font Olsson así que vamos a entrar a este link escribimos Font Olsson damos Enter.
Entramos al primer link que nos muestra Olsson puntocom
y básicamente de aquí lo que vamos a tomar son iconos tiene dos versiones una versión gratuita y una
versión de paga.
Nosotros vamos a utilizar la versión gratuita y el único detalle de utilizar esta librería es que ahora
nos solicita registrarnos así que a diferencia de Bushra APP no nos va a dar un link directamente sino
que ahora necesitamos registrarnos para que nos genere un link y poder utilizar los iconos de Photoshop
así que dejamos de registrarnos vamos a dar clic sobre estar for free para utilizar la versión gratuita
así que proporcionamos nuestro email.
Debemos de tener ya una cuenta creada.
De lo contrario deberíamos de crear una cuenta.
Primero proporcionamos nuestro e-mail y damos clic sobre Kickoff en este caso yo ya tengo registrado
el email pero en dado caso de que ustedes no tengan una cuenta.
Entonces primero deben de crear esta cuenta.
Posteriormente una vez que tengan la cuenta se registran
y una vez que se registran al sitio entonces les va a aparecer esta página y podemos llevar en esta
parte que se ha creado un primer kit.
Damos clic sobre Manaus Asquith
y nos arroja un identificador único.
Damos clic sobre este identificador
y Podemos el bar que nos genera un link.
Ese es el link que debemos de utilizar dentro de nuestra aplicación web.
Copiamos este código vamos a nuestra aplicación
y después del CSS de mostrar agregamos el link que hemos copiado de Font oso en dado caso de que no
puedan crear la cuenta pueden utilizar este mismo link.
No hay ningún problema.
Sin embargo este link va a estar haciendo referencia a mi cuenta personal.
No hay ningún problema pueden utilizarlo pero de preferencia ustedes ya desean hacer modificaciones
o tener actualizaciones.
Entonces deberán de crear su propio link pero de momento para empezar a trabajar pueden utilizar este
mismo link así que con esto ya tenemos todo para empezar a trabajar con vostra incluyendo los iconos
de Photoshop.
Vamos a detener hasta aquí este video y vamos a empezar a trabajar con vostra en la siguiente elección.
Nos vemos en el siguiente video saludos.