Entonces materiales del curso vas a encontrar esta carpeta llamada responsivo Walt Disney dentro tiene
tres carpetas.
Vamos a arrastrarla hacia Visual Studio Kop y si recuerdas en el capítulo anterior instalamos la observes
lo que voy a hacer aquí es abrir el que viene siendo cero uno básico y voy a dar botón derecho voy a
abrirlo con la Observer y tenemos algo como esto parece ser que tenemos una entrada del blog tenemos
una imagen bastante grande y un texto si vemos ese HTML es bastante bastante sencillo de hecho ya tenemos
por ejemplo ha agregado normadas tengo agregado una fuente de Google Fonts y también una hoja de estilos
que está quiense CSS un poco de scroll.
Tenemos un ãrtico para una entrada de blog un encabezado que describe esta entrada de blog una imagen
y de ahí más algunos párrafos es bastante sencillo el HTML.
Entonces vamos a ver cómo escribir un poco de código con MIDI Aquaris y cómo es esa sintaxis.
Primero este sitio web puedes ver que es bastante grande el texto se ve como una página de esas que
había en los noventas y yo todavía no nacía pero me han contado que eran más o menos como de este tipo.
Ahora veamos un poco la sintaxis de los medios si algo más pequeño este sitio usualmente es así como
lo vas a probar haciendo más pequeño un navegador.
Otra opción es por ejemplo abrir lo que viene siendo Crom developer tools y tienes este teléfono aquí.
Este segundo icono puedes dar click aquí y eso si das click en este panel puedes elegir diferentes teléfonos
y diferentes tablets para probar cómo se vería el sitio web en esos dispositivos.
Es decir no tienes que comprar 20 o 30 teléfonos para probarlo.
Puedes utilizar los emuladores que vienen en Crom.
Por lo tanto puedes ver que aquí me hizo falta elegir digamos un iPhone 6 selecciona iPhone 6 puedes
ver que así se vería en un iPhone 6 se ve bastante bastante mal.
Este proyecto se puede hacer responsive sin necesidad de un acuerdo.
Voy a mostrarte lo que se conoce o se podría decir que es como una receta de cocina.
Es decir voy a escribir un poco de código aquí primero vamos a abrir nuestro índex pensar que tenemos
un artículo lo que voy a hacer es crear un contenedor que a poner por ejemplo el contenedor iba a ser
un nivel más genérico es un Dib está bien para un contenedor no necesitamos agregar una etiqueta HTML
5 para ello incluso podría ir a quienes te ãrtico pero lo voy a dejar en un contenedor aparte y este
va a rodear todo.
Entonces asegúrate que genere Estudi antes de este artículo y también el cierre después del articulara
cuando comienzas a agregar muchas etiquetas tienes que comenzar a alinear tu código porque de otra forma
se ve un poco extraño una forma en la que puedes evitarte estar formateando tu código y alineándose
así instalando una extensión digamos aquí vamos a buscar una que diga formatearlo pero es muy bueno
pero es un poco más avanzado voy a utilizar este que dice JSE CSS y HTML para instalar entonces una
vez que instalamos éste quiero mostrarte cómo lo vas a utilizar te va a servir muchísimo en tu carrera
como programador si por ejemplo yo aquí le voy a dar deshacer y guardo cambios puedes ver cómo automáticamente
el código se alinea.
Si yo agrego aquí por ejemplo un Moine digamos lo va a colocar aquí Mayne y rodeó todo lo que viene
siendo este y guardó cambios.
Nota cómo se alinea entonces.
Es una excelente extensión que recomiendo que la tengas instalada siempre.
Ahora ya tenemos nuestro contenedor y quiero mostrarte como hacer responsivo este sitio sin haber escrito
en media Cuadri.
Vamos a saber lo que viene siendo el CSS en la hoja de estilos en la carpeta de scroll y aquí vamos
a seleccionar ese contenedor una forma en la que lo puedes hacer porque puedes notar que por ejemplo
el contenido se pega hacia la izquierda incluso si lo quitas de aquí puedes ver que se pega tanto a
la izquierda como a la derecha usualmente los sitios web la mayoría están centrados en la forma en que
vas a centrar colocando width de digamos 1200 píxeles o como vimos anteriormente 120 Raheem que es exactamente
lo mismo.
Bojar con 1200 píxeles es lo mismo no tienes que preocuparte si en aquel ejemplo usamos REMS píxeles
se pueden utilizar intercambiar de forma intercambiable si guardo cambios puedes ver que ahora queda
delineado del lado izquierdo.
Esto sí se ve más allá de los noventas pero si lo quieres centrar tienes que colocar margen cero auto.
Ese margen cero autos es lo que va a ser qué hace exactamente este margen cero auto.
Bueno básicamente en lugar de tener margin digamos top como cero margin right como auto es decir que
define este ancho automáticamente margin bottom cero y margin Leff auto todo lo puedes colocar en una
sola línea de esta forma.
De nueva cuenta esta parte de aquí margin de aquí será igual que también cero auto es decir cero auto
cero auto.
Si tienes menos de 20 años es más complicado porque probablemente nunca has visto uno pero si has visto
un reloj de manecillas igual cuando visitas a tus abuelos puedes ver si tienen alguno el primer número
del margen.
Es como si fueran las dos es decir hacer la parte de arriba es el margen de arriba auto sería como el
de las tres es decir el lado de la derecha Marinho a la derecha en cero vendría siendo como las seis
es decir el Marien hacia abajo y éste vendría siendo el margen de la izquierda.
Como repetimos estos dos valores de esta forma podemos también eliminar a esta forma y tenemos un margen
cero auto que básicamente es aplicarle arriba y abajo cero izquierda y derecha auto y esto es una forma
en la que vamos a centrar nuestro contenedor.
Ahora si lo vemos de nueva cuenta se centra bien se ve bien pero si lo a inspeccionar de nueva cuenta
lo hará con uno de estos dispositivos se ve mejor pero las letras son bastante pequeñas puedes ver que
le dimos un ancho de 1200 píxeles eso es lo que hace es bueno forzar esta parte de aquí a que sean 1200
píxeles lo puedes cambiar por max width y eso va a hacerlo un poco mejor un poco más responsa.
De hecho puedes ver qué bueno hace como que se vuelve a colocar del lado izquierdo.
Eso más que nada pasa por esta imagen.
El siguiente código Response todas las imágenes de todos tus proyectos web.
Por eso dije que era como una receta de cocina Max with 100 por ciento y guardamos cambios y puedes
ver que ahora sí ya se ve bastante bien.
Ahora si este proyecto ya responsa vino tuvimos que escribir ningùn media Cuadri.
Si lo hago más grande aquí lo quito a vista.
Puedes ver que se ve bastante bien y si vamos haciéndolo más pequeño aquí va a ir fluyendo correctamente
y se va a adaptar correctamente.
Gracias a estos dos buenos 12 lectores que tenemos aquí pero en algunos casos no es tan sencillo hacerlo
responsive no es como que nada más con esto en algunos casos si vas a requerir lo que son medias QWERTY
así que en el siguiente vamos a ver una pequeña introducción a los cuales sobretodos la sintaxis que
la primera vez puede llegar a ser un poco complicada así que veamos.
A partir del siguiente video.