1
00:00:00,540 --> 00:00:05,730
Bien vamos a continuar con esta aplicación según hemos comentado vamos a empezar a utilizar vostra esto

2
00:00:05,730 --> 00:00:11,900
para mejorar la apariencia visual de nuestra aplicación así que para comenzar vamos al sitio de Bushra

3
00:00:15,170 --> 00:00:22,710
y es bastante sencillo de aplicarlo de todas maneras vamos a ir paso a paso y además vamos a dejar varios

4
00:00:22,710 --> 00:00:27,570
recursos para que en dado caso de que deseen profundizar en este framework puedan hacerlo sin ningún

5
00:00:27,570 --> 00:00:28,040
problema.

6
00:00:29,230 --> 00:00:36,120
Así que entramos en la página de Get vostra puntocom y damos clic sobre Guedes tarde en este momento

7
00:00:36,120 --> 00:00:38,640
tenemos la versión 4.3 punto 1.

8
00:00:38,640 --> 00:00:45,400
Sin embargo constantemente hay actualizaciones así que nos va a permitir crear aplicaciones responsive.

9
00:00:45,800 --> 00:00:52,020
Y como comenta enfocadas a crear aplicaciones que se vean bien desde cualquier dispositivo considerando

10
00:00:52,080 --> 00:00:57,180
en primer lugar los dispositivos móviles así que las aplicaciones web que desarrollemos con Vostro APP

11
00:00:57,420 --> 00:01:03,390
se van a ver perfectamente desde dispositivos móviles hasta dispositivos como tablets o desde una PC

12
00:01:03,720 --> 00:01:10,140
así que vamos a crear ese tipo de aplicaciones utilizando Bosworth e internamente utiliza HTML CSS y

13
00:01:10,140 --> 00:01:15,180
JavaScript y también tiene la ventaja de que muchos de los componentes que vamos a utilizar ya han sido

14
00:01:15,180 --> 00:01:17,880
diseñados y están perfectamente documentados.

15
00:01:17,880 --> 00:01:23,460
Esto viene dentro de la documentación tenemos también ejemplos temas y muchas cosas más para empezar

16
00:01:23,460 --> 00:01:30,170
a trabajar así que vamos a dar clic sobre qué es tablet y lo primero que se debe de hacer es utilizar

17
00:01:30,710 --> 00:01:37,340
el link para incluir los SS es de vostra pero nosotros también vamos a incluir JavaScript ya que también

18
00:01:37,340 --> 00:01:40,860
vamos a utilizar algunos componentes que van a utilizar estas librerías.

19
00:01:40,970 --> 00:01:46,290
Por lo tanto también se deben incluir las librerías de JavaScript incluyendo yhay Cuadri y también el

20
00:01:46,310 --> 00:01:51,800
framework de poppers que es otra librería de JavaScript para el manejo de mensajes de tipo Tulip y por

21
00:01:51,800 --> 00:01:57,890
lo tanto se debe de incluir esas tres líneas dentro de nuestro archivo HTML o en este caso dentro de

22
00:01:57,890 --> 00:01:58,550
JSP.

23
00:02:00,210 --> 00:02:05,970
Y también podemos observar en la documentación que nos agrega un HTML por default en dado caso de que

24
00:02:05,970 --> 00:02:10,050
lo deseemos utilizar así que vamos a utilizar HTML.

25
00:02:10,050 --> 00:02:17,790
Vamos a copiar los metas y el vostra CSS y lo vamos a agregar dentro de nuestro archivo jsp así que

26
00:02:17,790 --> 00:02:19,410
vamos a copiar estas líneas

27
00:02:22,320 --> 00:02:27,870
vamos a nuestro G.T vamos a quitar este meta y vamos a pegar las líneas que hemos copiado.

28
00:02:29,020 --> 00:02:39,700
Damos un formato y con esto ya estamos utilizando los estilos de Bostrom así que la configuración básica

29
00:02:39,700 --> 00:02:45,190
que necesitamos para comenzar a trabajar y ahora antes de cerrar el Bodin lo que vamos a hacer es agregar

30
00:02:45,190 --> 00:02:47,140
los archivos de JavaScript.

31
00:02:47,140 --> 00:02:53,830
Así que regresamos a esta página de Bostrom y en la parte inferior copiamos estos links en el orden

32
00:02:53,890 --> 00:03:01,150
en que están escritos así que copiamos estos tres links vamos a nuestro JSP y debemos de agregar antes

33
00:03:01,150 --> 00:03:03,460
de cerrar el body de nuestro JSP

34
00:03:06,800 --> 00:03:12,980
así que en la parte inferior pegamos estos tres scripts primeros de Yei keirin.

35
00:03:13,070 --> 00:03:21,230
Después poppers y finalmente Bootstrap damos un formato y esto es todo para comenzar a trabajar con

36
00:03:21,230 --> 00:03:22,090
vostra.

37
00:03:22,160 --> 00:03:25,830
Si desplegamos nuestra aplicación vamos a ver los cambios.

38
00:03:26,120 --> 00:03:35,580
Damos clic derecho Run y deberemos observar ahora una fuente distinta anteriormente podíamos visualizar

39
00:03:35,640 --> 00:03:36,360
esta fuente

40
00:03:39,090 --> 00:03:45,770
sin inspeccionamos este elemento se estaba aplicando la fuente de Times New Román.

41
00:03:45,790 --> 00:03:52,060
Esta era la fuente por default y ahora podemos observar que se está aplicando otro estilo y también

42
00:03:52,090 --> 00:03:55,660
otra fuente así que se inspeccionamos este elemento.

43
00:03:55,660 --> 00:03:57,250
Damos clic derecho a inspeccionar

44
00:04:01,520 --> 00:04:08,750
podemos observar que se está utilizando la fuente de Segob UI semi boldo así que solamente ese es el

45
00:04:08,750 --> 00:04:15,140
primer cambio que podemos observar pero con esto ya hemos configurado correctamente vostra sin embargo

46
00:04:15,140 --> 00:04:19,130
también vamos a utilizar algunos iconos dentro de nuestra aplicación.

47
00:04:19,370 --> 00:04:23,840
Por lo tanto también no solamente vamos a utilizar Bushra sino también vamos a utilizar una librería

48
00:04:24,020 --> 00:04:32,740
que se llama Font Olsson así que vamos a entrar a este link escribimos Font Olsson damos Enter.

49
00:04:32,840 --> 00:04:35,660
Entramos al primer link que nos muestra Olsson puntocom

50
00:04:39,360 --> 00:04:45,040
y básicamente de aquí lo que vamos a tomar son iconos tiene dos versiones una versión gratuita y una

51
00:04:45,040 --> 00:04:46,010
versión de paga.

52
00:04:46,150 --> 00:04:51,100
Nosotros vamos a utilizar la versión gratuita y el único detalle de utilizar esta librería es que ahora

53
00:04:51,100 --> 00:04:56,890
nos solicita registrarnos así que a diferencia de Bushra APP no nos va a dar un link directamente sino

54
00:04:56,890 --> 00:05:02,200
que ahora necesitamos registrarnos para que nos genere un link y poder utilizar los iconos de Photoshop

55
00:05:02,740 --> 00:05:07,570
así que dejamos de registrarnos vamos a dar clic sobre estar for free para utilizar la versión gratuita

56
00:05:10,130 --> 00:05:12,260
así que proporcionamos nuestro email.

57
00:05:12,320 --> 00:05:14,510
Debemos de tener ya una cuenta creada.

58
00:05:14,510 --> 00:05:16,550
De lo contrario deberíamos de crear una cuenta.

59
00:05:16,550 --> 00:05:23,340
Primero proporcionamos nuestro e-mail y damos clic sobre Kickoff en este caso yo ya tengo registrado

60
00:05:23,400 --> 00:05:26,440
el email pero en dado caso de que ustedes no tengan una cuenta.

61
00:05:26,580 --> 00:05:28,870
Entonces primero deben de crear esta cuenta.

62
00:05:28,890 --> 00:05:32,220
Posteriormente una vez que tengan la cuenta se registran

63
00:05:38,060 --> 00:05:43,440
y una vez que se registran al sitio entonces les va a aparecer esta página y podemos llevar en esta

64
00:05:43,440 --> 00:05:45,130
parte que se ha creado un primer kit.

65
00:05:45,960 --> 00:05:47,310
Damos clic sobre Manaus Asquith

66
00:05:51,010 --> 00:05:53,800
y nos arroja un identificador único.

67
00:05:53,800 --> 00:05:55,600
Damos clic sobre este identificador

68
00:05:58,680 --> 00:06:00,910
y Podemos el bar que nos genera un link.

69
00:06:00,960 --> 00:06:04,660
Ese es el link que debemos de utilizar dentro de nuestra aplicación web.

70
00:06:04,710 --> 00:06:08,430
Copiamos este código vamos a nuestra aplicación

71
00:06:15,300 --> 00:06:22,960
y después del CSS de mostrar agregamos el link que hemos copiado de Font oso en dado caso de que no

72
00:06:22,960 --> 00:06:26,030
puedan crear la cuenta pueden utilizar este mismo link.

73
00:06:26,080 --> 00:06:27,010
No hay ningún problema.

74
00:06:27,070 --> 00:06:30,610
Sin embargo este link va a estar haciendo referencia a mi cuenta personal.

75
00:06:30,610 --> 00:06:35,560
No hay ningún problema pueden utilizarlo pero de preferencia ustedes ya desean hacer modificaciones

76
00:06:35,590 --> 00:06:37,000
o tener actualizaciones.

77
00:06:37,000 --> 00:06:42,040
Entonces deberán de crear su propio link pero de momento para empezar a trabajar pueden utilizar este

78
00:06:42,040 --> 00:06:48,220
mismo link así que con esto ya tenemos todo para empezar a trabajar con vostra incluyendo los iconos

79
00:06:48,220 --> 00:06:49,440
de Photoshop.

80
00:06:49,600 --> 00:06:54,300
Vamos a detener hasta aquí este video y vamos a empezar a trabajar con vostra en la siguiente elección.

81
00:06:54,370 --> 00:06:56,410
Nos vemos en el siguiente video saludos.