1
00:00:03,950 --> 00:00:09,860
Este será el diseño que estaremos haciendo para el blog así que vamos a abrir lo que viene siendo anunció.

2
00:00:09,870 --> 00:00:17,140
Voy a copiar este template y voy a crear uno nuevo que voy a nombrar blog junto a HTML extremely y lo

3
00:00:17,140 --> 00:00:24,490
pegamos y el primer paso es que voy a quitar todo lo que esté dentro del texto que está aquí dentro

4
00:00:24,490 --> 00:00:31,570
del menú me lo voy a mantener y también esta imagen y corto SH1 me lo voy a llevar hacia adentro del

5
00:00:31,570 --> 00:00:37,300
Main en este caso va a estar dentro del Main porque no tenemos por ejemplo como en la imagen anterior

6
00:00:37,300 --> 00:00:41,890
una imagen que saliera totalmente del contenido en esta parte me lo traigo hacia dentro del Main de

7
00:00:41,890 --> 00:00:42,940
nueva cuenta.

8
00:00:43,210 --> 00:00:46,690
Entonces vamos a tener un contenedor una sección y el contenido centrado.

9
00:00:46,700 --> 00:00:53,350
Todo esto se mantiene la clase para la H1 fue muy €300 centrar el texto se mantiene también se escribe

10
00:00:53,680 --> 00:01:00,510
en blog que dice aquí quiere decir nuestro blog no debe decir casa no se qué.

11
00:01:01,070 --> 00:01:05,530
Entonces nuestro blog se va viendo bien y el siguiente paso es abrir el índex tenemos ya algunas entradas

12
00:01:05,530 --> 00:01:05,960
de blog.

13
00:01:05,960 --> 00:01:12,880
Si recuerdas dentro de los artículos entonces nada más podemos copiar estas dos entradas no los llevamos

14
00:01:12,880 --> 00:01:20,840
al blog aquí y los pegamos en esta parte entonces guardamos cambios abrimos nuestro proyecto y puedes

15
00:01:20,840 --> 00:01:24,130
ver que se posicionan correctamente y se ven bastante bien.

16
00:01:24,230 --> 00:01:29,720
No tenemos que hacer nada más de nueva cuenta por la forma en que estamos escribiendo nuestro CSS puedes

17
00:01:29,720 --> 00:01:37,850
ver que por ejemplo este contenido puede considerarse como un componente lo generamos desde aquí entradas

18
00:01:37,850 --> 00:01:38,580
blog.

19
00:01:38,930 --> 00:01:44,270
Por lo tanto tiene sus propios estilos y cuando lo llevas de un lugar hacia otro es mucho más fácil

20
00:01:44,690 --> 00:01:49,950
hacerlo portable es decir poderlo utilizar en diferentes secciones aquí lo hubiéramos puesto por ejemplo

21
00:01:49,950 --> 00:01:54,220
en una sección que diga inicio eso ya lo haría más complicado de reutilizar.

22
00:01:54,260 --> 00:02:00,250
Por lo tanto yo recomiendo que vayas creando o dividiendo tu contenido de esta forma por ejemplo de

23
00:02:00,250 --> 00:02:05,330
entrada blog y creas los estilos de este componente únicamente y de esa forma vas a poderlos copiar

24
00:02:05,330 --> 00:02:09,830
y pegar en diferentes páginas como en este caso que puedes ver que se ve bastante bien.

25
00:02:10,100 --> 00:02:17,210
Entonces nuestro diseño tiene cuatro entradas de blog a copiar lo que vienen siendo estas estos artículos

26
00:02:17,210 --> 00:02:23,140
al menos dos veces tenemos uno pegamos dos y vamos a ver un poco de scroll.

27
00:02:23,190 --> 00:02:29,970
Tenemos el blog 1 blog 2 blog 3 Aquí puedes ver que en las imágenes que esté dando tenemos del 1 al

28
00:02:29,970 --> 00:02:30,320
4.

29
00:02:30,320 --> 00:02:37,150
Entonces si pones un 5 pues no va a servir y vamos a colocar aquí el texto para la entrada del blog

30
00:02:37,160 --> 00:02:46,960
3 y creo que todos dicen lo mismo y todos dicen lo mismo pero bueno vamos a poner aquí los 4 y vamos

31
00:02:46,960 --> 00:02:54,760
a guardar cambios abrir el proyecto entonces tenemos diferentes imágenes en la casa esta segunda vamos

32
00:02:54,760 --> 00:03:06,150
a ponerla como construye una alberca en tu hogar obstruye una alberca en tu hogar y apaga la decoración

33
00:03:06,150 --> 00:03:13,200
de tu casa está bien y vamos a ponerlo como guía para la decoración de tu habitación.

34
00:03:14,820 --> 00:03:20,450
Esa habitación guardamos cambios abrimos nuestro proyecto y que tenemos diferentes entradas.

35
00:03:20,680 --> 00:03:26,510
Ahora de nueva cuenta cuando creas un blog usualmente bueno PHP Maisí hay muchos lenguajes de programación

36
00:03:26,520 --> 00:03:31,880
para mí el PHP es el que es más fácil de aprender para alguien que va empezando.

37
00:03:31,880 --> 00:03:33,350
Podrías hacerlo de esa forma.

38
00:03:33,440 --> 00:03:38,720
Otra opción que muchas personas incluso yo utilizo cuando un cliente me pide un blog es construirlo

39
00:03:38,720 --> 00:03:41,250
con WordPress te lo va a hacer mucho más sencillo.

40
00:03:41,250 --> 00:03:45,800
Y este video ha sido un poco corto por lo tanto vamos a crear de una vez la entrada del blog es decir

41
00:03:45,890 --> 00:03:53,030
cuando yo decaigan alguna de estos enlaces donde se abrirá el blog y vamos a ponerlo aquí por ejemplo

42
00:03:53,030 --> 00:03:59,210
en estos enlaces selecciono un enlace y mandeo controlde y vamos a enlazar la entrada a punto HTML de

43
00:03:59,210 --> 00:04:07,790
la misma forma el índex vamos a enlazar una entrada HTML entonces a ver por ejemplo aquí en el índex

44
00:04:08,000 --> 00:04:14,630
si haces una búsqueda por el signo de gato o numeral x aquí ver propiedad esto es de ver propiedad son

45
00:04:14,630 --> 00:04:25,650
los que nos llevan hacia anuncio punto HTML ese no lo habíamos agregado y estos dos de acá nos deben

46
00:04:25,740 --> 00:04:35,340
llevar lo que son las entradas los entradas de blog nos deben de llevar a entrada con HTML y el temple

47
00:04:35,360 --> 00:04:35,810
de entrada.

48
00:04:35,810 --> 00:04:41,570
Por ejemplo si habrá aquí mis diseños puedes ver que ya casi estamos por terminar este templetes muy

49
00:04:41,570 --> 00:04:45,700
similar al de al que creamos anteriormente de.

50
00:04:45,700 --> 00:04:53,920
Por lo tanto voy a copiar este y creamos entrada en tu HTML pegamos y vamos a ver un poco de scroll

51
00:04:54,310 --> 00:05:01,670
en la parte del Gdeim del encabezado aquí voy a poner o eliminar esta parte de aquí voy a poner consejos

52
00:05:02,240 --> 00:05:10,890
para tener una alberca en tu casa sin gastar demasiado y la imagen destacada va a ser imagen destacada

53
00:05:10,900 --> 00:05:20,140
2 está agregada en los materiales y aquí vamos a poner imagen principal y después vamos a colocar lo

54
00:05:20,140 --> 00:05:25,360
que viene siendo contenedor sección Contenido entrada y de una vez voy a colocar una clase llamada texto

55
00:05:25,360 --> 00:05:25,740
entrada.

56
00:05:25,750 --> 00:05:26,290
Por qué.

57
00:05:26,350 --> 00:05:31,720
Porque si recuerdas aquel blindex tenemos definido texto entrada entonces éste tiene algunos estilos

58
00:05:32,460 --> 00:05:41,200
que vamos a hacer que se pasen automáticamente hacia este templete que estamos creando entonces tenemos

59
00:05:42,350 --> 00:05:49,550
gran entrada texto entrada etcétera todo este resumen que está aquí lo vamos a eliminar y vamos a colocar

60
00:05:49,550 --> 00:05:55,070
en esa parte si vemos nuestro templete puedes ver qué dice aquí escrito él y quién lo escribió ese texto

61
00:05:55,070 --> 00:05:57,280
ya lo tenemos en esta parte.

62
00:05:57,410 --> 00:06:01,390
Aquí por ejemplo lo pegamos.

63
00:06:01,390 --> 00:06:05,230
Entonces tenemos nuestra entrada tenemos un poco de la se empezó a hacer un poco más grande para que

64
00:06:05,230 --> 00:06:13,210
se vea como una entrada de blog más real con un poquito más de contenido entonces algo así.

65
00:06:13,220 --> 00:06:18,940
Guardamos cambios y vamos a ver por ejemplo en esta entrada que nos lleva hacia la entrada de blog con

66
00:06:18,940 --> 00:06:24,220
la imagen bastante grande y lo que simula una entrada de blog que se ve bastante bien.

67
00:06:24,220 --> 00:06:30,010
Puedes ver que al ser el contenido centrado que creamos anteriormente esta clase de aquí se ve un poco

68
00:06:30,010 --> 00:06:34,480
más pequeño y existen muchos blogs como que el contenido lo central para que sea más sencillo de leer

69
00:06:34,790 --> 00:06:38,140
que parezca más como una hoja en lugar del otro que estaba muy ancho.

70
00:06:38,620 --> 00:06:42,640
Entonces se va viendo bastante bien me está gustando la verdad mucho espero estás aprendiendo mucho

71
00:06:42,990 --> 00:06:48,460
y lo último que nos falta es el contacto así que el contacto va a ser un poco más complicado porque

72
00:06:48,460 --> 00:06:56,600
puedes ver que tenemos un formulario bastante grande en un formulario bastante largo porque la idea

73
00:06:56,600 --> 00:07:02,780
es mostrarte todos los tipos de campos que hay en HTML así que los veremos paso a paso en el siguiente

74
00:07:02,800 --> 00:07:03,230
video.