1
00:00:00,390 --> 00:00:05,960
Bienvenidos a algunos de nosotros, video, obtuvimos la configuración de la aplicación de blog creada en nuestro modelo de blog y agregamos la

2
00:00:06,210 --> 00:00:07,540
plantilla de índice en este video.

3
00:00:07,560 --> 00:00:10,070
En realidad, no agregaremos nuevas rutas por el momento.

4
00:00:10,090 --> 00:00:13,590
Esto será muy rápido, pero queremos agregar nuestro encabezado y pie de página Parshall's.

5
00:00:13,680 --> 00:00:16,030
Y luego quiero incluir UI semántica también.

6
00:00:16,040 --> 00:00:18,980
Y finalmente, agregaremos una barra de navegación realmente simple en la parte superior.

7
00:00:19,380 --> 00:00:23,990
Así que empecemos, queremos crear nuestro encabezado y pie de página que Ejay como archivos.

8
00:00:24,660 --> 00:00:26,810
Y eso debería estar adentro si se visualizan los directorios.

9
00:00:26,820 --> 00:00:34,200
Así que haremos un directorio de make use slash Las vistas táctiles de Parshall cortan la barra de Parshall Hetter que nos usa y

10
00:00:34,200 --> 00:00:40,990
luego tocan las vistas para cortar el pie de página E. J. Estupendo.

11
00:00:41,430 --> 00:00:42,060
Ahora vamos a abrirlos.

12
00:00:42,060 --> 00:00:45,990
Comencemos con encabezado.

13
00:00:46,290 --> 00:00:47,960
Y por qué el esqueleto básico no era tan HD como un título de cabeza de metal.

14
00:00:48,570 --> 00:00:54,990
Lo llamaremos aplicación de blog y luego necesitamos nuestro cuerpo así y lo trasladaremos al pie

15
00:00:55,470 --> 00:01:02,540
de página para que podamos cortarlo de vez en cuando solo para que sepamos que está funcionando.

16
00:01:02,790 --> 00:01:07,010
vemos que en cada página sabrá que lo hicimos correctamente.

17
00:01:07,140 --> 00:01:14,310
Agreguemos solo un párrafo en la parte superior que dice desde el archivo de encabezado y si

18
00:01:14,310 --> 00:01:16,710
Ahora vamos a abrir el pie de página pegar esto y podemos hacer lo

19
00:01:16,710 --> 00:01:18,060
mismo desde el ahorro de pie de página.

20
00:01:22,980 --> 00:01:30,110
Ahora tenemos que vincular esto y hagámoslo en nuestro índice para comenzar.

21
00:01:30,450 --> 00:01:33,890
Entonces, en la parte superior necesitamos tener nuestra inclusión y nuestra ruta es que estamos en lugar de utilizarla en el archivo de índice.

22
00:01:34,140 --> 00:01:42,360
Así que solo queremos un punto de corte en el encabezado de barra de Parshall.

23
00:01:42,780 --> 00:01:47,780
Y luego, lo mismo aquí abajo, el ataque de Parshall.

24
00:01:48,240 --> 00:01:53,280
Vamos a probarlo, no hay problema hasta ahora y nos sale del archivo de encabezado desde el pie o cinco.

25
00:01:53,700 --> 00:02:02,130
Estupendo.

26
00:02:02,430 --> 00:02:02,990
Ahora agreguemos en la UI semántica.

27
00:02:03,180 --> 00:02:05,530
Así que tengo este sitio web de IU semántica semántica abierta Dasch you dot com.

28
00:02:05,880 --> 00:02:10,590
Y al igual que el arranque, podemos descargar los archivos o podemos incluir un CDN semántico de CDN.

29
00:02:10,620 --> 00:02:18,080
Simplemente haga clic en este primer ejemplo y verá que

30
00:02:18,530 --> 00:02:23,790
hay muchos archivos diferentes que podemos elegir.

31
00:02:23,790 --> 00:02:24,630
de arranque, si lo

32
00:02:24,810 --> 00:02:30,120
que quieres es una sección o solo quieres los formularios, puedes tomar esa barra de componentes de componente único que nos forma.

33
00:02:30,300 --> 00:02:37,200
Y eso es porque la manera en que se organiza la interfaz de usuario semántica de la forma en que está diseñada es que, a diferencia de la rutina

34
00:02:37,560 --> 00:02:39,000
SS Así que no necesitas todo, lo

35
00:02:39,000 --> 00:02:43,770
que es una de las críticas de bootstrap es que si solo quieres una pieza pequeña, tienes que llevar toda la biblioteca.

36
00:02:43,770 --> 00:02:46,510
Pero queremos toda la biblioteca.

37
00:02:46,770 --> 00:02:48,420
Entonces, si te desplazas

38
00:02:48,420 --> 00:02:55,920
hacia abajo en todos estos modismos, quieres uno que diga semántica, CDN, que si solo haces una búsqueda o

39
00:02:55,920 --> 00:03:04,190
semántica, reevalúa cuál está justo aquí, es difícil de encontrar si no sabes o estás buscando, pero solo haz una búsqueda.

40
00:03:04,190 --> 00:03:05,920
En realidad, no tome una versión fied en minutos para hacer las cosas más rápido.

41
00:03:06,000 --> 00:03:09,320
Entonces, es semántico que los hombres vean evaluar y

42
00:03:09,360 --> 00:03:16,950
copiamos que Erl pasó y lo vamos a poner arriba en nuestro archivo de cabecera dentro de la cabeza.

43
00:03:17,340 --> 00:03:20,040
Es una etiqueta de longitud.

44
00:03:20,490 --> 00:03:22,300
Y queremos que sea un enlace y, a continuación, ref igual que allí.

45
00:03:22,950 --> 00:03:29,030
Sí Sí.

46
00:03:29,120 --> 00:03:30,260
Y también deberíamos agregar que en el estilo de hoja de estilo rel es igual a la barra de texto.

47
00:03:30,420 --> 00:03:34,900
C Ss Así que ahora guardamos y reiniciamos el servidor nuevamente.

48
00:03:34,940 --> 00:03:40,500
igual que cuando instalamos por primera vez la fuente, la fuente cambia un poco.

49
00:03:41,640 --> 00:03:47,160
Eche un vistazo a nuestra página de inicio y verá algunos pequeños cambios al

50
00:03:47,250 --> 00:03:49,070
DE ACUERDO.

51
00:03:49,560 --> 00:03:49,830
Eso

52
00:03:49,830 --> 00:03:57,720
significa que lo tenemos funcionando, deshagamos nuestros párrafos en el encabezado y el pie de página y, en su lugar, agreguemos una barra de navegación simple en la cola.

53
00:03:57,870 --> 00:04:01,180
Ahora, por supuesto, se llaman menús.

54
00:04:01,230 --> 00:04:03,740
Si vamos aquí, haga clic en

55
00:04:03,990 --> 00:04:12,810
el menú de todos los componentes y queremos encontrar el menú que se encuentra debajo del menú de la colección.

56
00:04:12,810 --> 00:04:16,170
Puede ver que hay bastantes tipos diferentes de menús.

57
00:04:16,170 --> 00:04:18,630
Hay un menú que es lo que ves aquí.

58
00:04:18,860 --> 00:04:22,190
Hay un menú de Poynting, hay una maginación vertical de texto tabular.

59
00:04:22,500 --> 00:04:32,090
Y hay bastantes más todo lo que necesitamos, sin embargo, es hacer que la

60
00:04:32,470 --> 00:04:40,450
parte superior de nuestro cuerpo sea un div y logremos esto correctamente.

61
00:04:40,590 --> 00:04:43,170
Kate hace clases iguales a ti.

62
00:04:43,170 --> 00:04:46,340
Lo arreglé y haremos un menú invertido que simplemente cambia el color al igual que en bootstrapped.

63
00:04:46,340 --> 00:04:52,170
Podrías decir en verso y luego dentro de allí necesitamos otro div.

64
00:04:52,170 --> 00:04:57,410
Y este tendrá una clase igual a tu contenedor que es como un contenedor bootstrapped.

65
00:04:58,020 --> 00:05:03,830
Y luego, en lugar de allí, tendré otro div y este tendrá una clase igual al elemento de Hetter.

66
00:05:04,260 --> 00:05:10,030
Y esto es como la marca de barra de navegación en bootstrap.

67
00:05:10,320 --> 00:05:13,550
Así que todo lo que queremos es blog de niños o lo que sea que queremos que se llame nuestra aplicación.

68
00:05:13,560 --> 00:05:18,920
Y luego agregaremos una etiqueta de anclaje para la página de inicio y la

69
00:05:19,050 --> 00:05:28,830
llamaremos "home" y agregaremos en clase el mismo elemento y luego haremos lo mismo, excepto que en lugar de ir a "barrer" lo haremos ir

70
00:05:28,860 --> 00:05:37,140
a los registros de barra de barras nueva que todavía no existe y se abrirá en Nueva publicación o Nuevo blog.

71
00:05:37,140 --> 00:05:45,350
Ese será el texto que vemos.

72
00:05:45,410 --> 00:05:47,470
OK para que no esté arreglado el menú invertido.

73
00:05:48,350 --> 00:05:51,760
Un contenedor en lugar de eso.

74
00:05:51,900 --> 00:05:53,460
Y luego, dentro del contenedor, deberíamos tener todo este pequeño error de mi parte.

75
00:05:53,670 --> 00:06:00,010
Entonces queremos que eso esté allí también.

76
00:06:00,060 --> 00:06:02,670
Está todo en el contenedor.

77
00:06:03,360 --> 00:06:04,850
Y luego tenemos nuestro encabezado y luego tenemos dos elementos anclados en Tex.

78
00:06:05,160 --> 00:06:10,250
Echemos un vistazo a eso ahora.

79
00:06:10,260 --> 00:06:12,200
Y obtenemos nuestra simple barra de matemática.

80
00:06:13,500 --> 00:06:15,200
Sí, tenemos un problema aquí con un poco de espacio.

81
00:06:15,520 --> 00:06:17,720
Lo solucionaremos en solo un momento, pero ahora tenemos un lugar donde funciona bien.

82
00:06:17,730 --> 00:06:21,450
Agreguemos un ícono simple que en semántica se le acaba de llamar iconos.

83
00:06:21,660 --> 00:06:27,450
Hay un montón de ellos en el que utilicé.

84
00:06:28,070 --> 00:06:30,690
Se llama Código.

85
00:06:30,720 --> 00:06:32,960
Intenta encontrarlo aquí y simplemente haz una búsqueda.

86
00:06:33,120 --> 00:06:35,500
Ahí está.

87
00:06:35,550 --> 00:06:36,310
Pero siéntase libre de elegir su propio comentario si le gusta.

88
00:06:36,480 --> 00:06:39,760
La idea era que era un blog basado en código, pero podría haber algo más.

89
00:06:39,810 --> 00:06:43,560
También me gusta la idea.

90
00:06:43,560 --> 00:06:44,900
De todos modos, hay un montón de ellos.

91
00:06:44,920 --> 00:06:46,190
Lo que es bueno es que también tienen un grupo de iconos para las empresas que es útil.

92
00:06:46,350 --> 00:06:51,980
En el fondo creo que los tienen y vamos a toneladas de diferentes marcas

93
00:06:52,020 --> 00:06:56,610
y compañías comunes a las que se habría vinculado en su aplicación.

94
00:06:56,610 --> 00:06:59,100
DE ACUERDO.

95
00:06:59,430 --> 00:07:00,070
Así que es un nombre de código para el ícono y lo voy a agregar aquí, junto al encabezado del blog.

96
00:07:00,300 --> 00:07:07,160
Así que aquí tenía su artículo y todo lo que necesitamos es una etiqueta de ojo.

97
00:07:07,470 --> 00:07:11,190
Y necesita tener una clase de código y un ícono.

98
00:07:11,670 --> 00:07:17,400
Tan simple como el nombre del icono y

99
00:07:17,400 --> 00:07:26,040
luego el ícono de clase, guarde la actualización y tenemos un pequeño código.

100
00:07:26,040 --> 00:07:26,290
Voy para allá.

101
00:07:26,280 --> 00:07:27,340
Hagamos un pequeño cambio para que este icono sea un poco más grande.

102
00:07:27,660 --> 00:07:31,830
Para hacer eso, podríamos simplemente escribir una etiqueta

103
00:07:31,860 --> 00:07:38,730
de estilo aquí, pero en lugar de hacerlo, usemos el directorio público que configuramos.

104
00:07:38,730 --> 00:07:40,630
Todavía tenemos que hacer el directorio.

105
00:07:40,680 --> 00:07:41,930
Pero establecemos el hecho de que se está sirviendo.

106
00:07:41,940 --> 00:07:44,570
Así que haremos slash de hojas de estilo y lo llamaremos apt C Ss aún no existe.

107
00:07:44,700 --> 00:07:51,340
Entonces, debemos hacer un directorio público y luego crear hojas de estilo

108
00:07:51,690 --> 00:08:03,330
de barra diagonales públicas y finalmente tocar las hojas de estilo de barra diagonal Dotsie SS, que también queremos abrir para que

109
00:08:03,330 --> 00:08:11,490
las hojas de estilo públicas Aptos, la ficha SS complete definitivamente sea su amigo allí.

110
00:08:11,730 --> 00:08:16,710
Y para hacer todos los iconos un poco más grandes.

111
00:08:16,740 --> 00:08:19,990
específico, configuraremos los BEEM IEM de tamaño de

112
00:08:20,400 --> 00:08:26,370
fuente igual al doble del tamaño del contenedor o el tamaño doble del guardado primario.

113
00:08:26,370 --> 00:08:35,940
Bueno, en realidad, en lugar de todos los íconos y iconos stewe que tienen esa clase de ícono solo para ser un poco más

114
00:08:36,600 --> 00:08:39,250
Bien, ahora comenzamos la copia de seguridad del servidor y actualizamos la página.

115
00:08:39,560 --> 00:08:45,180
Deberíamos ver que el ícono aumenta, que es solo una cuestión de preferencia personal.

116
00:08:45,180 --> 00:08:49,530
Pero creo que se ve un poco mejor cuando es más grande.

117
00:08:49,530 --> 00:08:52,340
DE ACUERDO.

118
00:08:52,710 --> 00:08:52,940
Ahora que lo hemos hecho, hemos terminado con todo lo que teníamos que hacer en este video.

119
00:08:52,950 --> 00:08:56,850
nuestro propio archivo CSSA personalizado a pesar de que es solo una línea

120
00:08:56,850 --> 00:09:03,210
ahora podemos agregar fácilmente CSSA personalizado a cada archivo en cada plantilla y quería mostrarle cómo podemos incluir UI semántica.

121
00:09:03,300 --> 00:09:09,810
Así que solo quería configurar la barra de navegación agregada en los archivos de encabezado de pie de página agregar en

122
00:09:10,500 --> 00:09:13,580
De acuerdo, tomaremos el siguiente video con nuevo y crearemos para que podamos crear nuevos blogs.

123
00:09:13,860 --> 00:09:19,420