00:00:00
buen día en esta ocasión voy a hablar
00:00:02
acerca de maquetación básica con ccs y
00:00:05
html primero entendamos Que es la
00:00:07
maquetación web Bueno este va a ser
00:00:09
simplemente la administración que vamos
00:00:10
a llevar de los elementos en nuestra
00:00:12
página web esta Por lo general se
00:00:14
realiza sobre elementos de bloque o se
00:00:17
etiquetas dip y bueno también Existen
00:00:20
los párrafos Pero bueno principalmente
00:00:22
vamos a ocupar aquí etiquetas
00:00:24
di est estos elementos de bloque tienen
00:00:28
Bueno por lo general van a ocupar todo
00:00:30
el ancho de la página o del elemento que
00:00:32
los contiene H cualquier elemento html
00:00:35
va a contener dos atributos básicos que
00:00:38
van a ser el ancho y el alto estas
00:00:40
medidas se van a expresar de Tres formas
00:00:42
distintas que son tamaños absolutos como
00:00:44
píxeles centímetros o porcentajes y
00:00:47
tamaños relativos de fuente además de
00:00:50
valor por defecto que es
00:00:53
automático Aquí vemos en este esquema
00:00:56
las propiedades que ya Acabo de
00:00:58
mencionar o sea ancho y alto de un
00:01:00
bloque de de de un elemento de bloque y
00:01:03
las las partes que lo conforman a la
00:01:05
parte de arriba del elemento bloque se
00:01:06
le llama top a la de la derecha se le
00:01:09
llama right a la izquierda left y a la
00:01:11
de abajo
00:01:14
bottom otra cosa que hay que entender
00:01:16
antes de empezar a maquetar nuestra
00:01:17
página es el posicionamiento
00:01:20
flotante esta definición nos dice que
00:01:22
cuando una caja se va a posicionar con
00:01:24
el modelo de posicionamiento flotante
00:01:26
automáticamente est cas se pasa de ser
00:01:28
una simple caja
00:01:30
bloque para hacer un bloque flotante o
00:01:32
caja flotante esto significa que se va a
00:01:35
desplazar a la zona que sea más a la
00:01:37
izquierda o más a la derecha de la
00:01:40
posición en la que se encontraba
00:01:41
originalmente como ejemplo vemos estas
00:01:44
tres cajas colocadas por bueno las de la
00:01:47
izquierda con un flujo posicionamiento
00:01:50
normal de comoo se verían en una página
00:01:52
web en estas páginas los elementos se
00:01:56
posicionan uno debajo del otro pero
00:01:59
bueno aplicamos posicionamiento flotante
00:02:01
como en el lado derecho a la caja uno
00:02:04
esta la vamos a posicionar flotant Dee
00:02:06
hacia la derecha lo que pasará Es que la
00:02:09
caja uno se mueve hacia la derecha y la
00:02:11
caja dos automáticamente ocupa el
00:02:13
espacio que dejó vacío la caja uno la
00:02:16
caja 3es se queda bajo estas dos otro
00:02:18
ejemplo digamos que la caja dos ahora la
00:02:20
movemos con posicionamiento flotante
00:02:21
hacia la izquierda la caja un se va a
00:02:24
quedar en su posición original la caja
00:02:25
dos va salir prácticamente de escena o
00:02:27
va a salir prácticamente de pantalla
00:02:30
porque se va a posicionar en un lado
00:02:31
donde no es visible y la caja 3 se queda
00:02:34
bajo la caja
00:02:37
uno ahora veamos x y pasa Qué pasa si
00:02:40
posicionamos los tres elementos flotant
00:02:42
hacia la izquierda Pues bueno se van a
00:02:45
Pilar horizontalmente O sea la caja uno
00:02:47
hacia la izquierda la caja dos hacia la
00:02:49
izquierda y la caja tres hacia la
00:02:54
izquierda qué vamos a usar para
00:02:56
posicionar los elementos bueno además de
00:02:58
haber entendido bien el posicionamiento
00:02:59
flotante vamos a utilizar bloques de
00:03:02
código como ya lo dije en este caso di y
00:03:05
la propiedad css que va a ser la de flot
00:03:08
en esta tabla vemos lo que se puede
00:03:10
hacer con esta propiedad su
00:03:11
configuración Por decirlo así no los
00:03:13
valores como que pueden ser izquierda
00:03:15
derecha ninguno a que puede ser
00:03:17
aplicable a todos los elementos valor
00:03:20
inicial tiene y su breve
00:03:24
descripción otra cosa que debemos de
00:03:26
poder hacer al posicionar elementos va a
00:03:28
ser a que ciertos bloques flotantes eh
00:03:34
No se junten con otros bloques esto lo
00:03:36
logramos por medio de la propiedad Clear
00:03:38
va a permitir modificar por
00:03:40
comportamiento por defecto del
00:03:42
posicionamiento
00:03:43
flotante esta propiedad va indicar de
00:03:46
qué lado debe mostrarse la página sin
00:03:48
elementos flotando ya sea a su izquierda
00:03:51
derecha o ambos lados aquí está la tabla
00:03:54
que muestra Qué cosas posibles se puedan
00:03:56
hacer con esta
00:03:58
propiedad vemos entonces un ejemplo
00:04:02
donde posicionamos una imagen con
00:04:04
posicionamiento flotante a la izquierda
00:04:07
esta y el espacio de la caja dos ya que
00:04:10
bueno la caja dos permite que se
00:04:12
posicionen elementos a ese lado pero si
00:04:15
aplicamos la propiedad Clear
00:04:17
automáticamente la caja dos ya no va a
00:04:19
permitir que se posicionen cosas
00:04:21
flotantes o bloques flotantes hacia su
00:04:23
izquierda Entonces esta Va a dejarla con
00:04:26
espacio libre más adelante veremos para
00:04:29
que nos sirve este con más detalle esta
00:04:31
propiedad
00:04:33
Clear ahora cómo vamos a comenzar a
00:04:36
maquetar nuestra página web lo primero
00:04:39
que debemos de pensar es en la
00:04:40
estructura básica de la página como ya
00:04:42
lo dije esto se va a maquetar con
00:04:44
elementos de bloque cada uno va a
00:04:46
representar una sección o parte de la
00:04:48
página el primero por ejemplo representa
00:04:51
la cabecera el segundo una barra de
00:04:52
navegación A lo mejor en donde puedes
00:04:54
poner este botones para visualizar las
00:04:57
distintas secciones de tu página el de
00:04:59
la derecha un menú de izquierda el de la
00:05:01
perdón el izquierda un menú de izquierda
00:05:04
el de la derecha un menú de derecha y el
00:05:06
del centro va a ser donde vamos a cargar
00:05:07
el contenido cada di tiene un ID propio
00:05:11
el cual va a hacer este alusión al uso
00:05:15
que le vamos a dar y también Bueno no es
00:05:19
obligatorio pero yo aquí puse también
00:05:22
qué posicionamiento flotante le vamos a
00:05:23
dar a cada uno para visualizando Cómo se
00:05:26
van a ir apilando todos los dips y bueno
00:05:30
una vez que tienes la estructura básica
00:05:31
de tu página procedes Entonces ahora sí
00:05:34
a llenarla de contenido como quieras a
00:05:36
visualizarla más creativamente o se hace
00:05:39
así
00:05:41
Ajá como convertimos una vez que
00:05:43
tengamos la idea Clara este esta
00:05:45
estructura que teníamos la convertimos
00:05:47
ya en una página un poco más cotidiana
00:05:50
como la veríamos no y pues ya nuestras
00:05:53
ideas empiezan a tomar forma Entonces es
00:05:56
muy importante que tú primero pases esta
00:05:58
fase de anális
00:06:00
para poder empezar a codificar y bueno
00:06:02
casi para todo lo que vayas a programar
00:06:04
es de esta manera primero piensa lo que
00:06:06
vas a hacer y después ya pasas a
00:06:09
codificarlo entonces bueno yo paso a la
00:06:12
siguiente etapa que va a ser el ejemplo
00:06:14
de aplicación para este
00:06:22
video Bueno entonces comienzo con mi
00:06:26
ejemplo de aplicación y lo primero que
00:06:28
voy a hacer como casi May de los videos
00:06:30
es crear un proyecto nuevo para este
00:06:32
ejemplo bueno no vamos a necesitar más
00:06:34
que un proyecto html javascript aunque
00:06:37
también apli el
00:06:39
php voy a poner ejemplo
00:06:44
maquetación básica
00:06:47
ok No Air nada de aquí damos
00:06:52
[Música]
00:06:54
Finish y bueno vamos a trabajar bajo la
00:06:57
primera página que nos cre este Bueno lo
00:07:00
voy a borrar para que se vea todo el
00:07:02
proceso completo Aunque lo puedes ocupar
00:07:03
Si gustas entonces Bueno lo que habamos
00:07:06
acordado hace un rato es que ya teníamos
00:07:08
nuestra estructura básica o se hace esta
00:07:10
vamos a comenzar desde aquí ahora lo que
00:07:13
vamos a hacer es colocar todos nuestros
00:07:14
dips uno bajo otro vamos a comenzar con
00:07:17
primero el
00:07:20
[Música]
00:07:21
header y le vamos ID como lo
00:07:26
acordamos vamos a seguir con que va a
00:07:29
ser nuestra barra de navegación o
00:07:32
bar aj aquí dejamos algo de espacio
00:07:42
dip Okay después seguimos con los que
00:07:45
van a ser nuestro menú contenido y menú
00:07:48
de la
00:07:58
derecha
00:08:16
okay Bueno nota una cosa muy importante
00:08:19
los estamos colocando en el orden en el
00:08:20
que van apareciendo de izquierda a
00:08:23
derecha por ejemplo el la cabecera no
00:08:27
tiene nada al lado por lo tanto lo
00:08:29
colocamos tal cual Ajá que es este
00:08:32
primero de aquí el segundo va a ser la
00:08:34
barra de navegación simplemente va a ir
00:08:36
abajo del
00:08:39
este de la
00:08:41
cabecera se quedaría de este
00:08:44
lado Ajá y vamos después a poner el menú
00:08:47
de la izquierda y de aquí de izquierda a
00:08:49
derecha primero el menú de la izquierda
00:08:50
después el de contenido que es este y
00:08:54
después al menú de la
00:08:56
derecha que viene siendo
00:09:01
este ya solamente restaría el pie de
00:09:03
página o
00:09:11
foter Okay y bueno de esta manera ya por
00:09:13
medio de dips tenemos el estructura
00:09:15
básica vamos a visualizar cómo se ve en
00:09:17
pantalla Aquí le voy a
00:09:19
poner
00:09:21
título de la página porque aquí va ir
00:09:25
nuestra cabecera o título Aquí vamos a
00:09:27
poner barra de
00:09:31
navegación Okay menú de la
00:09:36
izquierda
00:09:41
contenido menú de la
00:09:45
derecha y pie de
00:09:48
página Okay esto lo puse porque Bueno si
00:09:51
tú mostraras en tu navegador los dip sin
00:09:54
nada dentro de ellos no se vería nada en
00:09:57
cambio Si pones algo dentro de ellos Sí
00:09:59
se ve el contenido o se logra notar la
00:10:01
diferencia entre uno y
00:10:03
otro y bueno vemos esto Ahora sí ya en
00:10:06
la página
00:10:08
web vamos a elegir voy a elegir Chrome
00:10:11
como navegador y vamos a correr este
00:10:16
proyecto y como vemos ahorita aparece
00:10:19
simple texto uno arriba de otro pero
00:10:21
también se cumple lo que dije en la
00:10:22
teoría cada di se va posicionando uno
00:10:24
debajo de otro hasta que lleguemos al
00:10:26
último vamos a lograr hacer los cambios
00:10:28
por medio de eh yo voy a incluir css de
00:10:32
dos formas en este ejemplo voy a
00:10:34
comenzar con la primera que es en el
00:10:36
mismo
00:10:38
documento entonces comenzamos con
00:10:40
nuestras etiquetas básicas para agregar
00:10:44
ccs y bueno empezamos con las distintas
00:10:47
reglas que vamos a ocupar qué selector
00:10:49
Sería para este ejemplo el de ID en css
00:10:52
este selector es un gato vamos a
00:10:55
intentar hacer que estos dips Tengan
00:10:57
algo de color para diferenciar uno de ot
00:10:59
otro vamos a empezar con la
00:11:03
cabecera y vamos a poner un color de
00:11:08
fondo vamos a nuestro selector de
00:11:10
colores digamos que este está bien
00:11:14
Ajá Okay y bueno esta sis se repite para
00:11:18
para los demás elementos solo cambiaría
00:11:20
el color voy a copiar y pegar para hac
00:11:24
para este evitar tomar tanto tiempo deja
00:11:26
recuerdo qué color tiene este
00:11:29
este
00:11:32
di ser
00:11:36
[Música]
00:11:38
azul Bueno sería el
00:11:43
mismo vamos con el siguiente que va a
00:11:46
ser nuestra barra de navegación no
00:11:48
perdón nuestro menú de la izquierda este
00:11:51
color va a tener
00:11:53
[Aplausos]
00:11:56
morado selector de colores Buscamos un
00:11:59
morado parecido y lo ponemos tal cual y
00:12:04
vamos entonces con el de contenido que
00:12:06
va a ser
00:12:08
verde nada más cambiaría el elemento el
00:12:12
ID del elemento al que hace referencia
00:12:14
el
00:12:15
selector y va a ser
00:12:19
verde creo que está bien okay finalmente
00:12:24
nuestro menú de la derecha que va a ser
00:12:25
un azul un poco más claro que el del
00:12:28
fondo
00:12:36
parece que este está bien y finalmente
00:12:40
nuestra no no
00:12:46
cre sería más bien este y finalmente
00:12:50
nuestro pie de página el
00:12:53
cual va a tener el azul que hab
00:12:56
seleccionado hace un ratoo un poco más
00:12:58
fuer
00:12:59
sería este Okay entonces salvemos Y vos
00:13:03
cómo se ve en la página
00:13:05
Ahora hasta aquí ya tenemos todos
00:13:08
nuestros dips este necesarios para
00:13:11
comenzar a maquetar pero faltaría ahora
00:13:15
eh Bueno a posicionarlos flotant mede y
00:13:19
aplicar la propiedad Clear voy a cambiar
00:13:22
antes las letras de los primeros dos
00:13:24
dips de color para que se noten un
00:13:26
poquito más color
00:13:39
se un poquito más la diferencia entre
00:13:40
cada y para que nos va a servir el
00:13:42
primero va a ser el título de página
00:13:44
entonces habos acordado
00:13:47
que vamos a ponerle posicionamiento
00:13:49
flotante
00:13:53
ninguno a lo mejor no es tan necesario
00:13:56
escribir la propiedad Porque ya está por
00:13:57
defecto Pero yo lo voy a poner con fines
00:14:00
de que esto quede claro no y que se vea
00:14:03
que se supone que hace hasta aquí No
00:14:06
cambiado nada qué sigue la barra de
00:14:09
navegación también va a tener
00:14:10
posicionamiento flotante No
00:14:12
ninguno y aquí ya se empezar a notar la
00:14:15
diferencia el menú de la izquierda va a
00:14:16
tener posicionamiento flotante
00:14:20
left
00:14:23
left y vos qué
00:14:26
pasó yaos que la barra esto que estoy
00:14:30
seleccionando ya se está posicionando
00:14:31
más hacia acá y deja contenido libre
00:14:34
para el de contenido vamos hacia dónde
00:14:37
tiene que estar el L contenido
00:14:38
posicionado hacia la izquierda ya que va
00:14:40
a estar
00:14:41
apá horizontalmente
00:14:44
Ajá también el menú de la derecha y
00:14:48
veamos qué
00:14:50
pasa y bueno tod es posicionó hacia la
00:14:53
izquierda inclusive el pie de página
00:14:55
pero nosotros lo que queremos hacer es
00:14:56
que este pie de
00:14:57
página eso lo logramos con la propiedad
00:15:00
Clear vamos de nuevo al proyecto Pero
00:15:03
bueno antes vamos a poner la
00:15:04
posicionamiento flotante de este
00:15:06
elemento para convertirlo en una caja
00:15:09
flotante y la propiedad Clear que vamos
00:15:13
a aplicar va a ser aquella que tenga o
00:15:17
que no permita posicionarse flotant ni
00:15:20
izquierda ni derecha va ser la valor si
00:15:23
huera puesto left solamente no
00:15:26
permitiría cosas hacia su izquierda si
00:15:28
hubiera puesto right hubiera sido a la
00:15:31
derecha pero yo pongo Bot para que en
00:15:34
ambos lados la caja ocupe todo el
00:15:36
espacio vamos entonces de nuevo a
00:15:38
nuestra página como verás ya está
00:15:41
posicionada hacia abajo dej acerco un
00:15:44
poco más para que se vea la diferencia
00:15:47
Okay pero tenemos otro problema este
00:15:49
espacio quedó en blanco quedó vacío cómo
00:15:52
vamos a arreglar eso Bueno podemos
00:15:53
modificar una opción más bien dicho
00:15:55
sería Modificar el ancho de nuestros
00:15:57
zips si si recuerdas habíamos dicho que
00:15:59
cada bloque tiene cierto porcentaje que
00:16:02
puede ocupar de espacio cuál sería el
00:16:04
que debemos de modificar de espacio el
00:16:06
contenido no porque a lo mejor los menús
00:16:08
no son tan tan propensos a ocupar tanto
00:16:11
espacio entonces es para esto yo voy a
00:16:14
facilitar un poco las cosas ocupando
00:16:16
valores en porcentajes como ya había
00:16:19
dicho el atributo ancho y largo se puede
00:16:22
medir en porcentajes que es un valor
00:16:24
absoluto en centímetros en píxeles y
00:16:28
tambén puede ser automático Bueno vamos
00:16:31
a a modificar su ancho del di de
00:16:34
contenido y vamos a este dip y
00:16:37
simplemente modificamos nuestra reglas
00:16:38
css con esta propiedad y digamos que a
00:16:42
lo mejor al dip de contenido le voy a
00:16:44
dar
00:16:45
el digamos no sé
00:16:48
eh 70 por de la página digo para probar
00:16:52
algo o sea el 70 del ancho del donde lo
00:16:55
estoy visualizando Mira ya más o menos
00:16:58
se va acomodando esto Vamos a darle el
00:16:59
75
00:17:01
por.
00:17:05
okay Bueno hasta aquí dejamos esto en 75
00:17:09
por utilizemos un poco las matemáticas
00:17:12
si este diup el 75 por de la página
00:17:15
cuánto nos sobra nos sobraría a ver
00:17:21
Parece ser que son
00:17:22
25% no vamos a reducir un poco más este
00:17:25
para que seamos tengamos medidas un
00:17:27
poquito más exactas Okay tenemos 70 que
00:17:30
va a ocupar este nos sobrarían un 30%
00:17:34
que debemos de dividir entre el menú de
00:17:36
la izquierda y el menú de la derecha
00:17:38
para que no quede un espacio feo así Ajá
00:17:42
tenemos un 30% disponible para ambos
00:17:46
vamos a ser equitativos pongámosle a
00:17:49
este di que ocupe un 25% de la página y
00:17:54
al de la derecha también perdón 25% 15
00:17:58
porque tenemos 30 y lo vamos a dividir
00:18:01
entre
00:18:02
dos puntos 15% Okay veamos nuestros
00:18:07
cambios en el navegador y mira ya se
00:18:09
posicionó correctamente esto ya tenemos
00:18:14
algo por lo menos en estructura similar
00:18:16
a lo que teníamos pensado
00:18:19
hacer
00:18:21
Okay y bueno vos
00:18:25
Entonces cómo posicionar las el
00:18:28
contenido que tengamos en cada uno al
00:18:30
centro est sería con otra propiedad que
00:18:32
es esta de
00:18:35
aquí OK Por ejemplo la de la barra de
00:18:39
navegación vamos a a la barra de
00:18:41
navegación y a la cabecera para ver qué
00:18:45
pasa inmediatamente todo lo que tenemos
00:18:47
se posiciona al centro Así que si vas a
00:18:49
colocar una imagen esta se Cent si vas a
00:18:51
colocar botones se Cent V aplicar el
00:18:54
contenido también para ver que esto se
00:18:56
vea un poquito más lógico
00:19:02
Okay automáticamente lo que tengas en el
00:19:04
contenido se
00:19:05
centra y bueno a continuación voy a
00:19:08
agregar un poco más de cosas para que
00:19:10
bueno podamos asimilar esto lo más
00:19:12
posible al dibujo que
00:19:16
teníamos bueno tener la página de esta
00:19:19
forma ya habado todos los pasos que en
00:19:23
el video pero me ahorita la libertad
00:19:27
deios del código para que ahora la
00:19:30
página se va todavía más
00:19:33
parecida a lo que pretendíamos hacer que
00:19:35
es parte
00:19:37
Aquí esta página de así Ahora se ve
00:19:41
así
00:19:42
okay Bueno hicimos algunos pequeños
00:19:45
cambios al código para que se lo más
00:19:48
parecido posible esto tod algunas cosas
00:19:51
más Pero bueno mencionando lo que se
00:19:53
hizo fue lo
00:19:55
siguiente primero que nada
00:19:59
a cada uno de nuestros este menús y
00:20:03
contenido y el menú derecho le pu
00:20:06
agregamos estas líneas de código Que
00:20:08
bueno lo que hacen pues
00:20:10
simplemente hacen que todo el espacio
00:20:13
que quedaba aquí abajo o sea esto se ha
00:20:16
ocupado independientemente del tamaño
00:20:20
de la información en el de
00:20:24
contenido que también le aplicamos la
00:20:26
misma técnica
00:20:29
por si acaso crecía más este a lo largo
00:20:31
hacia abajo y el menú de la derecha que
00:20:35
también igual le aplicamos la misma
00:20:38
técnica para que ocupe todo este
00:20:41
espacio te fijas sol ocupa este espacio
00:20:44
esto de aquí y Bueno pues otra cosa que
00:20:48
hicimos fue que dentro del estilo esta
00:20:52
imagen no importa que
00:20:55
tanto la página la imagen jamás va a
00:20:57
cambiar de tamaño
00:21:00
Esto se logra poniendo est regla en que
00:21:04
siempre el ancho y el alto van a ser de
00:21:07
100% de la
00:21:11
página y bueno otra cosa anar es que el
00:21:15
fondo del cuerpo de la página es blanco
00:21:18
pero más parecido a lo que pretendíamos
00:21:21
es un fondo azul como lo vimos acá fondo
00:21:27
azul
00:21:29
y buenoo lo lamos simplemente pemos este
00:21:32
estilo background color la otra cosa que
00:21:36
realizamos fue que el de página lo
00:21:40
dejamos fuera de todos los antes estaba
00:21:43
este contenido en el
00:21:45
principal es este ah no ahora esta parte
00:21:50
esto con el objetivo de que ya no ocup
00:21:53
espacio dos de Aquí estos
00:21:56
tres espacio abo Porque mira lo que pasa
00:21:58
si lo pongo dentro con los otros más
00:22:00
dentro de nuestro
00:22:05
contenedor Okay loamos dentro del
00:22:08
principal mir esto ocupa espacio de más
00:22:12
en
00:22:14
cambio volvamos todo como estaba ahorita
00:22:17
lo dejamos aparte de página y
00:22:19
actualizamos y mira ya tiene su propio
00:22:22
espacio y Bueno nada más faltaría poner
00:22:25
estas letras en
00:22:26
blanco simplemente con una propiedad
00:22:31
color
00:22:33
White que en espa blanco y Bueno mira ya
00:22:38
está lo más parecido a como lo queríamos
00:22:42
Ver faltaran algunos detalles para poder
00:22:46
terminar
00:22:48
nuestro nuestra implementación de la de
00:22:51
la maquetación web pero bueno entonces
00:22:54
resumiendo lo que lo que realizamos para
00:22:58
quar este webs o hacer lo más parecido
00:23:02
posible a nuestro diseño tenemos que
00:23:04
hacer esto analizar las cosas Un diseño
00:23:06
inicial en el cual este visualices cómo
00:23:10
se va a mostrar tu página
00:23:13
a tengas esa idea de cómo se va a ver lo
00:23:16
segundo es
00:23:18
que comprendamos el uso de las
00:23:21
propiedades ccs la primera es la de FL
00:23:26
la cual va organizar izquierda o derecha
00:23:30
y la de la cual va a evitar
00:23:33
que algunos elementos se posicion
00:23:36
elementos flotantes se posicionen a la
00:23:38
derecha la izquierda obligando al
00:23:40
elemento que se le
00:23:42
aplica posicionarse abajo de los demás y
00:23:46
bueno otra cosa que tenemos que
00:23:47
comprender es el uso de los etiqueta la
00:23:50
cual dividir nuestra página en distintas
00:23:53
secciones Bueno entonces con eso
00:23:55
finalizo el video de
00:23:58
este con html y css nos
00:24:02
vemos
