Transcripciones
1. Introducción básica de CSS: Hola y bienvenidos al diseño web básico para creativos. En esta clase vamos a explorar hojas de estilo en cascada y cómo te ayudan a controlar los elementos de tu página web. Esta es una habilidad que necesitas tener si quieres tomar un archivo de diseño estático, como algo de Sketch, Photoshop o Illustrator y traducirlo a una página web en funcionamiento. Vamos a construir un sitio web para un festival de música falsa, y va a ser divertido. Lo seguiré moviendo bastante rápido para ti. Tengo un montón de diapositivas, ilustraciones, y código a lo largo de demos. Nosotros vamos a hacer esto, tú vas a hacer esto, abróchate. Vamos a rodar.
2. Rápido: Aquí vamos. Vamos a estar desarrollando tu sitio web a partir de una carpeta en tu escritorio. Por lo tanto, crea una carpeta en tu escritorio. Puedes llamarlo como quieras y esto va a contener todos los archivos del proyecto que usamos en este proyecto. Vas a necesitar un Editor de Texto. Te recomiendo usar Atom. Eso es lo que estaré usando en estas demos. Es gratis, funciona para Mac y Windows, es de código abierto. Si vas a Atom.io, puedes descargar este IDE, que es abreviatura de entorno de desarrollador interno, creo. De todos modos, ve a descargar este IDE. Es gratis, su editor de texto va a funcionar muy bien. Lo siguiente que tenemos que hacer es asegurarnos de que estés trabajando en el navegador Chrome, Google Chrome, estaré trabajando en ese navegador, y solo para asegurarnos de que no tengamos inconsistencias que sean bugs que aparecen porque diferentes navegadores a veces tratan el código de manera diferente, que es un tema para otro momento, pero hoy, simplemente mantenerlo consistente. Trabajemos todos en Google Chrome. Entonces descarga Atom, asegúrate de que tienes Google Chrome y luego puedes tener que descargar un archivo zip de mi sitio web, tiene todos los archivos de inicio y los archivos de proyecto terminados también si alguna vez quieres echar un vistazo adelante y ver cómo todo gira fuera o se refieran a ellos o cualquier otra cosa. Puedes encontrar un enlace para descargar esos archivos en la descripción del curso justo debajo aquí. Entonces descarga el archivo zip de mi sitio. Una vez que hayas hecho eso, copia el archivo de índice de los archivos de inicio que has descargado de mi sitio web en tu carpeta en tu escritorio. Ahí vas a copiar index dot html, luego ve al navegador Google Chrome y abre índice dot html. Se va a quedar terrible porque no tiene estilo. Lo que vamos a hacer es tomar este contenido HTML básico y agregarle CSS para que nuestra página web se vea como nuestra maqueta. Te veré en el siguiente video. Ve a descargar esas cosas y empezaremos.
3. Anatomía básica de CSS: Empecemos. En este video, te
voy a mostrar tres lugares diferentes que puedes poner estilos. Te voy a mostrar por qué vamos a elegir una hoja de estilo en cascada para nuestros estilos, y luego te mostraré en el código cómo funciona, y luego codificarás tu propia hoja de estilo que vamos a usar para la base del resto de la proyecto. Aquí vamos a la pizarra. Yo quiero contarles un poco chicos sobre especificidad y CSS. Hay diferentes lugares a los que puedes poner estilos y tu navegador los tratará de manera diferente también. Se pueden escribir estilos en línea, lo que significa, tan rápido real. Esta es una página HTML. Si no estás familiarizado con HTML, puedes tomar mi otro curso sobre HTML básico para creatividades. Voy a asumir que sabes escribir HTML. Aquí tenemos dos etiquetas div aquí, y cada una tiene un estilo escrito en línea justo en la etiqueta. También puedo poner estilos localmente aquí arriba en la sección principal de mi página HTML, y luego también puedo tener estilos remotos en una hoja de estilos en cascada, y así es como vamos a estar escribiendo nuestro sitio hoy. Tu navegador le dará un peso diferente a los estilos dependiendo de cómo los uses. Un estilo en línea va a ser el estilo más ponderado. Segundo va a ser un estilo local, y luego tercero va a ser algo en una hoja de estilo. Ya ves aquí tengo estos estilos es de color rojo. Estos divs van a tener texto rojo en ellos. Si tengo color azul aquí arriba en un estilo local y borro color rojo, ahora que el texto dentro de esos divs va a ser azul. Ya ves cómo la especificidad, el lugar que pongo el estilo va a afectar cómo se renderiza en el navegador. Esto es parte de la cascada, parte de las hojas de estilo en cascada, y hay un poco más en ello que te diré cuando nos pongamos realmente a escribir una hoja de estilo también. Pero eso es CSS y especificidad. Echemos un vistazo a cómo se juega esto en el código en el navegador. Tengo un similar, aquí está nuestro archivo HTML de inicio. Estoy en index.html. Esto es [inaudible] por aquí y este es Chrome por aquí, y quiero mostrarles este estilo en línea que he escrito estilo color igual al rojo. El color de primer plano, el color del texto es rojo por aquí. Si me deshago de ese estilo en línea y guardo la página, entonces ve a refrescar el navegador, que uso Command R. También puedes hacer clic en este pequeño icono de actualización, pero si usas Command R, lo refrescará rápidamente y es un cosa rápida fácil. Te diré un par de comandos de
teclado, atajos que he hecho, que uso justo cuando pasamos. El otro que voy a usar para ir de ida y vuelta entre diferentes aplicaciones es Command Tab, por lo que puedo Tab entre estos, si mantengo pulsada Shift, irá al revés. Esa es una forma práctica y rápida de cambiar entre aplicaciones. Volver a lo que estamos hablando. Me deshice del estilo que estaba en línea aquí que dicho color es igual al rojo, y aquí tengo color igual al azul en un estilo local, hasta la cabeza del documento, y cuando refresqué,
boom, todo se volvió azul. Vamos a configurar nuestra hoja de estilo en cascada. Esta va a ser la hoja de estilo remoto, y lo llamamos remoto sólo porque en realidad no está en este cuerpo de código aquí. Si haces clic con el botón derecho en 'Nueva carpeta' y lo llamas CSS, y luego dentro de eso, haz un nuevo archivo. Llamaremos a esto styles.css. Es importante poner la extensión that.css al final de la misma, y ahora, vamos a escribir muy rápido. Escribiré un estilo aquí en nuestra hoja de estilo. Voy a apuntar a ese mismo cuerpo de texto, y no te preocupes por escribir junto a mí. Entraré en un segundo sobre la anatomía de un estilo. Lo que acaba de echar un vistazo a esto realmente rápido. Color verde, guarde eso. Ahora, nuestra página de índice aún no sabe de la hoja de estilo, pesar de que está en el mismo directorio, necesitamos darle instrucciones específicas y decirle que use las hojas de estilo. Escribimos una etiqueta de enlace con un href y href es igual que un mapa a donde se encontrará este archivo, por lo que css/ styles.css, y luego
digamos al navegador para qué se utiliza este archivo, rel es igual a stylesheet. Entonces la etiqueta de enlace no tiene un más cercano, estás acostumbrado a ver esta sintaxis con elementos HTML, no la necesitas con una etiqueta de enlace. Ahora, vuelvo aquí y refresco la página y todo ese texto es verde. Echemos un vistazo a algo realmente rápido. ¿ Ves dónde se coloca este enlace? Es después de este estilo en línea. Te das cuenta de que si lo muevo aquí arriba y lo guardo, asegúrate de sangrar. Es azul. ¿Por qué es eso? Tenemos otra especificidad que estamos jugando aquí afuera. El navegador carga este archivo primero y lee de color verde. Entonces va aquí abajo y lee esto y es como,
oh, no, se supone que el color es azul, hazlo azul. Si elimino esto, lo
guardo , y refresco, verás que es verde. especificidad es importante y esta misma cosa se jugará dentro de tu hoja de estilo también,
así que cada vez que tenga un estilo duplicado, sea cual sea el estilo que se escribió en última instancia, va a tener preferencia. Ves ahí, se pone rojo. Eso es un poco sobre CSS y especificidad. Realmente rápido, una lección de anatomía estudiantil sobre un estilo. Había un par de componentes diferentes aquí a un estilo con el que necesitas estar familiarizado. Tienes el selector por aquí, tenemos la propiedad y luego el valor, así que verás este patrón repetido una y otra vez mientras escribes estilos. Son pares de valor clave. Este es un término que solo va a explicar en cualquier momento tienes una propiedad aquí y luego un valor para ella por allá. Al igual que el tamaño de fuente, 18 píxeles ,
color rojo, esa es la anatomía de un estilo. Tus selectores vienen en un par de variedades diferentes. Este es un elemento, una etiqueta de párrafo. Cualquier etiqueta de párrafo va a tener el color rojo y el tamaño de fuente de 18 píxeles. Tienes una clase que comienza con un punto, así que podríamos tener, como en el ejemplo anterior, alinear, esa era una clase, y tienes ID y ID está precedido por un hash, y sería algo así como, No lo sé, página de inicio. Después hay diferentes formas en que usas clases e identificadores, y selectores de elementos cuando estás construyendo tus estilos, y nos meteremos en eso en tan solo un momento. Ya sabes de especificidad. Ya has visto el funcionamiento interno de un estilo. Ya sabes lo que son los componentes. Ya sabes a dónde va. Empecemos a escribir algunos estilos para este sitio web. Ya veré en el siguiente video.
4. Conoce tus cajas: Bienvenido de nuevo. Como diseñador, probablemente
hayas preparado tus archivos en Photoshop,
Sketch, algún software de diseño estático como ese. Ahora, hay que convertirlo en un sitio web, y tener control sobre todos esos elementos. Es necesario saber cómo hacer que se comporten. Puede ser realmente confuso. Hay tantas etiquetas HTML diferentes, y todas se bajan a sólo dos categorías aunque. Tienes elementos en línea, y se van a alinear uno al lado del otro como texto. Tienes elementos a nivel de bloque. Se van a apilar uno encima del otro. Cada página web es una combinación de estas dos cosas. Existen en el eje x, y. Déjame mostrarte algunas diapositivas que he preparado sólo para ti que ilustran este concepto. Te voy a mostrar cómo puedes manipular los elementos básicos en una página HTML usando hojas de estilo en cascada. Aquí estamos. CSS Layout es fácil como XYZ. Con eso me refiero al eje x, al eje y, y al eje z. El eje x es horizontal y va de izquierda a derecha. El eje y es vertical y va de arriba a abajo, y el eje z, que hablaremos más adelante, es cómo los elementos se apilan uno encima del otro en capas. Lo que puedes ver por estas tres barras naranjas, ilustra que los elementos en línea quieren apilar uno al lado del otro, y seguirán apilándose uno al lado del otro hasta que lleguen al borde de su contenedor y tengan que envolver. Quiero presentarles un sitio web llamado CodePen. CodePen es un recurso increíble. Te permite probar ideas realmente rápidamente sin tener que configurar un sitio web completo. Puedes encontrar el enlace a este CodePen en los recursos PDF que se incluyen en los archivos descargados para esta clase. Vamos a echar un vistazo a un CodePen que ilustra este punto. Aquí tenemos un cuerpo sin estilo de HTML. Ahora, en CodePen, no necesito escribir la etiqueta HTML,
la etiqueta de cabeza, la etiqueta de cuerpo. Ellos se encargan de eso por ti. Esto hace que sea realmente rápido y fácil probar código y ver un resultado inmediato. Hagamos algo así como aplicar un estilo a la etiqueta del cuerpo. Todo lo que estoy haciendo es, estoy comentando este CSS. Cuando estás trabajando en una hoja de estilos, puedes pedirle que no lea código usando esta sintaxis aquí, que es una barra y luego una estrella, y luego una barra de estrellas para cerrar el comentario. A menudo, esto se usará para dejarte notas. Se puede decir algo así, esto comienza los estilos para la parte superior de la página. Esa es la forma en que puedes dejar notas para ti mismo, o para cualquier desarrollador que vaya a trabajar en este proyecto en el futuro. Comando de teclado realmente rápido te va a ahorrar algo de tiempo mientras estás siguiendo por aquí. Puede mantener presionado el comando shift y usar
las flechas derecha o izquierda para seleccionar una línea completa de texto, y luego puede usar la barra de comandos, esa es la que está debajo del signo de interrogación para activarlo y desactivarlo. Esto funciona en HTML2. Lo he usado aquí para permitirnos revelar
estilos uno a la vez sin tener que tomarnos el tiempo para escribirlos. Déjame aplicar una a la etiqueta del cuerpo. Ya puedes ver que tengo mi selector aquí. No hay punto ni hash frente a él. Esto va a buscar un elemento HTML. Vamos a encontrar la etiqueta de cuerpo y el tamaño de fuente aplicado equivale a 24 píxeles a ella. En cuanto decodifico eso, ves que todo este texto adopta ese estilo. Observa aquí cómo está todo escrito en cajas. Estos niveles de sangría muestran dónde comienza un nuevo cuadro. Aquí hay una caja para padres, y sostiene estas cuatro cajas infantiles. Todos estos son tramos. Los tramos son elementos en línea, por lo que se van a apilar uno al lado del otro, y vemos que esto sucede aquí. Imágenes, aquí hay una imagen, también un elemento en línea, y también se está poniendo justo en línea con todo lo demás. Ahora, hablemos de los elementos de bloque del eje y. Estas son etiquetas HTML como divs, párrafos, encabezados, pies de página, secciones, todas esas cosas. Ellos, por naturaleza, se apilan uno encima del otro y se expanden lo más ancho posible para adaptarse a su contenedor padre. Echemos un vistazo a cómo funcionan los elementos a nivel de bloque. Si quisiera que todo este texto se apilar en estrofas, como lo verías en un libro, podría volver atrás y cambiar todos estos tramos a un elemento de nivel de bloque como un div. Déjame probar eso realmente rápido. Ponemos un div aquí. Ves esa primera estrofa, en realidad devuelve y hace que el resto del tipo continúe debajo de ella, por lo que se está extendiendo para llenar el contenedor padre de ancho, y se está apilando encima del contenido que está debajo de él. Otra cosa que puedes hacer, es usar la propiedad display para controlar la forma en que se ven estos. Permítanme comentar este siguiente bit de CSS. Se va a aplicar la altura de 32 píxeles a una etiqueta span. Algo de los elementos en línea es que no pueden aceptar propiedades de
altura o anchura porque, por naturaleza, simplemente se alinean uno tras otro. No hay necesidad de que tengan altura y anchura. Si digo esto que se comporte como un elemento de nivel de bloque, de repente adoptan todas las propiedades de un elemento de nivel de bloque. Se apilarán uno encima del otro. Adoptan esta altura, que se puede ver. Si comento esto fuera, a ver cómo se encogen así. disminuye la altura de línea entre los elementos. Esta es una manera fácil de ilustrar la diferencia entre un elemento a nivel de bloque y un elemento en línea. Cuando estás haciendo diseño, es mucho más probable que utilices un div u otro elemento de nivel de bloque. Por ejemplo, apilarás cosas con elementos de
nivel de bloque y pondrás las cosas en línea con los elementos en línea. Pero esto te muestra cómo puedes usar la propiedad display para controlar su comportamiento. Los elementos en línea y en bloque se combinan para darnos los diseños que estamos familiarizados con ver en sitios web. Sabes un poco más sobre cómo los estilos afectan a los elementos HTML. Probablemente estés diciendo: “Mark, ¿cuándo vamos a escribir realmente algún código?” Bueno, vamos a escribir algunos realmente pronto sobre el proyecto, pero quiero asegurarme de que entiendas cómo funcionan estas cosas antes de sumergirnos. No quiero que tus estilos cuando los estás escribiendo se sientan como solo encantamientos mágicos que arrojas por ahí. Yo quiero que se sientan como comandos que tienes confianza en ejecutar. Vamos a hacer un poco más de una conferencia con algunas diapositivas, y luego llegaremos a escribir en un poco de código. Aguanta ahí. Te veré en el siguiente video.
5. Estrategia de diseño: Las páginas web son esencialmente cajas dentro de cajas. Algunos de ellos van de lado, algunos de ellos se apilan uno encima del otro, y se combinaron para formar patrones de diseño complejos. A los patrones complejos que forman, tus páginas web esencialmente, se les llama objetos de documento, y tienen lo que se llama un modelo de objetos de documento. Esa es esencialmente la relación de una caja a otra. ¿ Cuántas cajas hay dentro de la caja de padres? Si pudieras visualizar esos como un árbol jerárquico, empezando por la caja padre aquí, cajas
infantiles debajo que se dividen en otras casillas Little child. Ese es el modelo de objeto de documento. Es muy útil poder ver eso mientras estás desarrollando una página web para que
puedas tener una idea visual de cómo estos elementos están interactuando entre sí. Déjame presentarte a tu nuevo mejor amigo, el inspector. Si vas a una página web en Chrome y haces clic con el botón derecho, verás un menú que tiene inspeccionar en la parte inferior de la misma, toca inspeccionar. Se abrirá un pequeño panel que tiene todo tipo de información sobre cada uno de los elementos de tu página. Echemos un vistazo a algunas de nuestras cajas y empecemos a darles algunos de los estilos que nos van a ayudar a lograr. Mira que se ha establecido en las comps de diseño aquí, vamos a ir por este loco color magenta detrás del encabezado y tratamos de que se vea así. Entonces, empecemos aplicando ese color a nuestra barra de navegación. Si hacemos clic aquí arriba, podemos mirar alrededor en nuestro inspector y tener una muy buena idea de qué cajas componen esto. Tenemos una caja principal ahí, esa es la barra de navegación, se puede ver clase navbar. Vamos a usar eso como selector para apuntar a esa caja. Entonces dentro tiene contenedor 960. Eventualmente esto nos va a ayudar a hacer una bonita columna. Entonces dentro de eso, tenemos los nombres de las páginas para nuestra navegación. Entonces tenemos iconos de redes sociales, que no puedes ver porque ahora están blancos sobre blanco. Arreglemos eso. Vamos a escribir nuestro primer estilo para el sitio aquí, tengo estilos CSS abiertos en mis archivos de inicio. Voy a seguir construyendo sobre esto y vamos a apuntar a la clase de navbar diciendo. navbar. Le daremos un color de fondo de E03ED7. Voy a copiar pegar estas cosas y seguir adelante muy rápido en estos demos de código. Definitivamente detenga el video y tómese tiempo para ponerse al día. Yo sólo voy a tratar de hacerlas rápido para que no
desperdiciemos demasiado de tu tiempo viéndome teclear cosas. No te desanimes ni te ofenda si estoy volando por esto, solo dale “Pausa”. Si guardamos esto y regresamos al navegador, notamos que aquí tenemos un color magenta loco. Podemos ver nuestros iconos de redes sociales. Ahora mira a tu alrededor esta frontera aquí. Esto nos va a llevar a una discusión sobre el modelo de caja. Esta es una ilustración del modelo de caja aquí abajo que el inspector nos proporciona. Justo aquí en el núcleo, vemos las dimensiones de la propia caja del núcleo, y luego vemos estas tres propiedades diferentes de la caja. Tenemos relleno, borde, y margen,
y se ve aquí esta línea dura trazada cerca de que es el diferenciador. A pesar de que no tiene ancho real en la vida real. Eso está dentro y todo pasado que está afuera. Cualquier frontera que aplique se calcula como estar en el interior de esta dimensión. El relleno que aplica aplica al interior de esta dimensión. Cualquier margen que aplique aplica al exterior. Podemos ver que aquí hay algún margen aplicado, todo el camino. Lo que es, es un estilo de agente de usuario. Si miras esta zona gris aquí, es en cursiva, verás que hay un montón de elementos llamados y se llaman como bloque de display. Existen todo tipo de estilos de agente de usuario. Estos son estilos que dan forma con el navegador. Estos son los incumplimientos. Ahora no todos los navegadores implementa estos mismos. Algunos navegadores sienten que ocho píxeles es la cantidad justa de relleno alrededor de algo o margen. Otros navegadores podrían sentir que es 10. Algunos sienten que un tamaño de fuente es mejor que otro. Si estás construyendo un sitio web y tienes tus estilos escritos, y estás confiando en estilos predeterminados para ayudarte,
tienes que tener en cuenta todos estos navegadores diferentes o simplemente restablecer cada uno de ellos. Hace mucho tiempo en términos de web, gente comenzó a escribir hojas de estilo reset. Básicamente, toman cosas como etiquetas H1, margen
por defecto, relleno por defecto, altura de línea
por defecto, todas estas cosas diferentes, y las declararon expresamente para que la hoja de estilo del agente de usuario no esté influyendo en ellas. En tus archivos extras aquí arriba, verás que tengo un reset.css. Este es uno que acabo de agarrar de internet. Eric Meyers hizo uno muy popular. Se puede, en realidad hay un gran artículo sobre trucos de
CSS sobre la historia de la hoja de estilo reset, que es una gran lectura, si quieres alguna lectura de nuevo nivel. Vamos a pegar este reset en la parte superior de nuestra hoja de estilo aquí y guardarlo. Cuando vamos y refrescamos, ese margen se ha ido, y ahora empezamos a ver nuestros estilos. tanto que antes acabamos de ver los estilos grises del agente de usuario. Ahora decimos cuerpo H1, H2, bla bla bla. Todos han sido ajustados al margen 0, relleno 0. Tendremos que entrar y realmente especificar lo que queremos que sea margen y relleno en estos elementos. Pero lo que hemos hecho está asegurado que cada navegador los muestre de manera consistente. Lo siguiente aquí va a tratar de que parte de este contenido se comporte. Tenemos todo este texto haciendo lo que debe hacer es en textos de línea, simplemente llenando su contenedor. Todo está golpeado al lado izquierdo sin margen. Cosas que deberían estar al lado del otro se apilan uno encima del otro. Impongamos una columna sobre esto. Si miramos en el archivo de diseño, podemos ver este diseño, una columna que va todo el camino por toda la página y mantiene las cosas bonitas y ordenadas. Vamos a hacer que nuestra página web tenga ese mismo comportamiento escribiendo un estilo de columna maestra. Lo que he hecho aquí es hecho el contenedor llamado contenedor 960. Una vez que le aplicemos nuestros estilos, ayudará a
que cada una de estas secciones se centren y se conviertan en 960 píxeles de ancho. Añadamos esos estilos ahora mismo. Me gusta dejarme algunos comentarios solo para ayudarme a organizar mis hojas de estilo. Podemos usar slash star y star slash para comenzar y finalizar nuestros comentarios. Voy a decir, comienzan los estilos de sitio. Tenemos nuestra barra de navegación. Hagamos uno para el contenedor 960. Esta es la técnica de centrado automático del margen y es una de las técnicas más confiables para centrar e imagen en una página web. Lo que hace es echar un vistazo al ancho del objeto y luego
calcula automáticamente la cantidad de margen de cada lado que va a tomar para centrar este objeto. Por eso funciona tan bien. Hay una cosa que debes saber, y es que esto solo funciona en elementos a nivel de bloque. El motivo es, que los elementos en línea no pueden tener un ancho o alto aplicado a ellos porque su trabajo es simplemente
seguir y seguir y alinear hasta que voltearon su contenedor. Tenemos que usar un elemento de nivel de bloque, y en este caso estamos usando un div aquí mismo, clase div. haber establecido el ancho y el margen auto a
eso, golpeo “Guardar” en mi hoja de estilo, volver a la página web aquí y esto
va a encajar todo en una columna en el medio. Echa un vistazo a eso y se va a centrar en sí mismo. No importa lo grande o pequeño que haga esta ventana. Yo he rociado esa clase arriba y abajo por este sitio, cada vez que voy a una nueva sección, así que aquí en la sección de héroes, ahí está. Aquí en la sección line up ahí está. Esta es una gran estrategia para mantener una columna sólida y subrayar el poder de una hoja de estilo en cascada. puede ver cómo lo escribimos un solo lugar y se casca
sobre toda nuestra página en cualquier momento ese estilo es referenciado. Esta es una gran manera de sacar mucho apalancamiento de solo un poquito de código. Solo requiere un poco de planeación por anticipado. A medida que te acercas a construir un sitio web por tu cuenta. Entra en este lápiz CSS aquí, este es CodePen. Acude a este CodePen y juega. Tengo algunos estilos comprometidos que puedes descomentar y usar para ver cómo margin, auto y width combina un conjunto de cosas en la página. Puedes jugar con valores y ver qué pasa cuando cambias algunos de esos valores. O si cambias el margen o lo que quieras hacer, límpialo con él, romperlo,
y te das una idea de cómo funciona.
6. Diseño de flotar: Una de las primeras herramientas que
obtuvieron los desarrolladores web y diseñadores que les ayudaron a controlar el diseño de la página fue el flotador. Cuando aplique un flotador a un elemento, tomará el elemento todo el camino a la izquierda o todo el camino a la derecha. No obstante, los flotadores sacan el elemento del flujo normal del DOM. Son un poco peculiares. Si bien el contenido fluirá a su alrededor, no
son suficientes para mantener un contenedor abierto por su cuenta. Cuando flotas un elemento lo convierte en un elemento de nivel de bloque que se puede flotar a la izquierda o a la derecha. Flotar necesita estar encendido y apagado y tienes que
despejar tus flotadores para poder detener el comportamiento flotante. Es un poco raro. Pensarías que podrías simplemente poner algo a la izquierda o a la derecha y funcionaría. Pero realmente son un hackeo porque fueron la primera herramienta que tuvieron los diseñadores para mover contenido de izquierda a derecha. Rápidamente descubrieron cómo explotarlos para hacer diseños complejos, como un diseño de dos columnas que estamos acostumbrados a ver en la web hoy y que hemos visto en impresión desde hace cientos de años. Necesitas apagar tus flotadores limpiándolos. Si no las despejas, no se restablece el comportamiento flotante, ese comportamiento que los saca del flujo normal del DOM. Lo que puede pasar es que un contenedor colapsará detrás de los elementos flotantes. Si tienes una situación rara como esta en la que tienes algún contenido mostrando detrás de algo que flotabas, probablemente no haya sido despejado. Una de las formas más comunes de hacerlo es seleccionar un elemento que aparece en el orden natural del DOM que es, al final de la página, después de los elementos que se han flotado y despejar ambos flotadores. Simplemente puedes despejar ambos. Así es como lo aclaras. Haré un pequeño demo por eso. Aguanta un segundo. Otra forma de hacerlo es dar al contenedor padre de los flotadores desbordamiento oculto. Lo que esto hace es asegurarse de que ningún contenido colocado dentro de ningún elemento pueda desbordar sus límites. Al configurarlo para desbordar oculto, lo
haces autoconsciente de alguna manera y calcula el espacio que necesita para mostrar estos objetos flotantes y el resto del contenido dentro de sí mismo. Vayamos a un CodePen y veamos cómo funciona todo esto. Aquí está nuestro familiar viejo CodePen. Hagamos el último par de pedacitos de esto, y luego tengo otro para ti también. Aquí vamos. Tenemos todos los versos exhibidos como bloque, y tratemos de que la casa quede por encima del lado derecho. Vamos a decir flotar derecha para la ilustración y se puede ver que flota sobre la derecha mientras todo esto se queda a la izquierda. Es así como obtenemos diseños de 2 y 3 columnas para que funcionen en la web. Hay otras formas, pero esta es una de las más antiguas y más
utilizadas y francamente más complicadas de entender también. Yo quiero asegurarme de que consigues una muy buena manija en esto. Pasemos al segundo CodePen aquí. Aquí te dejamos un CodePen que puedes usar para jugar con diseño basado en
flotación y hacerte una idea al respecto. Tengo todo comentado ahora mismo. Tenemos nuestra habitual mancha de contenido sin estilo. Vamos a descomentar algunos de estos estilos y a ver qué conseguimos aquí. Estos son estilos de página básicos, agrego algo de relleno al encabezado y al pie de página, y al cuerpo. Ahora, ¿ven aquí estas comas? En cualquier momento que tengas estilos que se usan en más de un lugar, puedes ponerlos en una lista separada por comas. Por ejemplo, encabezado aquí se refiere al elemento de cabecera justo aquí, por lo que elemento HTML5. Footer es nuestro pie de página. Dot body va a ser, busca algo de la clase de cuerpo. Esta sección tiene la clase de cuerpo en ella. Ahí también se va a aplicar. Estoy aplicando 10 pixeles de relleno por todas partes y se puede ver aquí mismo, tengo un bonito borde que he creado alrededor de todo este contenido. Acabo de escribir una línea de código, así que si después estoy como, oh, realmente desearía que fuera de 8 píxeles. Lo escribo en un solo lugar y se aplica a todos esos diferentes elementos simultáneamente. Ese es otro ejemplo de la parte en cascada de las hojas de estilo en cascada. Es una herramienta muy poderosa. Aquí tenemos otra lista separada por comas. Este es el color de fondo para el encabezado y pie de página. Vea cómo eso se aplica a ambos. Vamos a ver aquí. Consigue algo de color de fondo ahí para el div. Se puede distinguir de las otras partes de esa composición. Hacer que la ilustración ajuste haciéndola con 100. Ahora, voy a establecer los anchos para las columnas aquí que están apiladas en este momento. Los divs, los elementos a nivel de bloque, quieren apilar y como no tienen nada más diciéndoles que hagan lo contrario, están haciendo su comportamiento natural de llenar su padre y apilar uno encima del otro. Hagámoslos 45 por ciento de ancho y veamos esto de nuevo. lista separada por comas lo aplica a ambas columnas. El que tiene la clase izquierda y el que tiene la clase derecha al mismo tiempo. Aplicaremos algún relleno a la derecha a la columna izquierda y algún relleno a la izquierda a la columna derecha. Eso nos va a dar una bonita canaleta entre los dos. Ahora aplicamos las carrozas. Hago flotar a la izquierda, flotar a la derecha. Estoy flotando por columna izquierda, izquierda, mi columna derecha derecha. Se puede ver que aquí tengo una bonita canaleta. Nota rápida aquí, acabo de pausar el video. ¿ Viste cómo este texto y la imagen estaban apilados aquí abajo? Tenía que hacer que este 44 y luego 45 de nuevo realmente rápido y arreglarlo un pequeño error de diseño. Si estás teniendo el mismo problema, solo haz eso y verás que se apilarán uno al lado del otro. Sólo un pequeño fallo. Vemos que esto se está superponiendo al pie de página. Vamos a probar la primera técnica la cual está aplicando claro tanto al pie de página. Vemos que el pie de página está aquí después de nuestros dos elementos flotantes y al decirle al navegador,
oye, una vez que llegues al pie de página, deja de hacer el comportamiento de despeje, lo hace. Todos estos se pueden apilar en columnas como tú quieres que lo hagan. Echemos un vistazo a la otra técnica que fue, a
ver nos la quitamos, se colapsan. Aplicar desbordamiento oculto al elemento cuerpo, que es el elemento Sección aquí que tiene todos estos otros elementos en él. Aplicaremos desbordamiento oculto a eso y boom, se vuelve autoconsciente, da cuenta de las carrozas y los elementos sin flotar y los muestra todos. Hay una tercera forma de que puedes despejar un flotador y esto se llama la técnica de flotación de fijación clara. Aprovecha elementos llamados pseudo elementos, que no nos vamos a meter realmente en el transcurso de este tutorial. Pero es una manera realmente genial de
despejar flotadores y se usa mucho en marcos receptivos y cosas por el estilo. Espero hacer una lección futura sobre diseño responsive y se incluirá ahí. A eso se refiere aquí mismo el CF. En realidad eso es, ahí vamos, en el comentario que, y eso funciona. Si lo deseas, puedes Google eso por tu cuenta y comprobarlo. Juega con este bolígrafo y echa un vistazo a cómo cambiar diferentes valores cambia este diseño y su comportamiento y luego vamos a aplicar lo que sabemos de flotadores ahora, al encabezado de nuestro proyecto. En nuestra hoja de estilo, empecemos a poner las clases en su lugar y los estilos en su lugar, que van a hacer que nuestra barra de navegación se vea como debería. Con estos iconos sociales sobre a la derecha y la navegación sobre a la izquierda. Aquí vamos. Lo primero que voy a hacer es agregar desbordamiento oculto al elemento contenedor 960. Lo que esto va a hacer es en cualquier momento que hagamos un diseño basado en flotador dentro de este contenedor, automáticamente va a despejarlo. Ni siquiera tenemos que
pensar en nada más que escribir nuestro flotador a la izquierda en nuestro flotador derecho. Lo haremos primero y luego déjame echar un vistazo a cuáles son nuestros nombres de contenedores aquí. Tenemos navbar aquí que vamos a
ir a la izquierda así que digamos, oh, tenemos navbar ahí. Perdón, no es navbar, ¿verdad? ¿ Qué es? Es, tenemos una llamada principal nav y otra llamada social. Eso es lo que busco. Vamos a decir principal nav se va a flotar a la izquierda y luego, como el único social va a ser flotar derecha. ¿ Ves como les estoy sangrando un poco? Golpeo Tab cada vez que divido estas llaves y
te ayuda a escanear el documento cuando estás buscando, sobre todo cuando se hace largo. Cuando buscas diferentes clases para volver atrás y editar y sobre todo en el HTML. Cada vez que entro en una caja nueva, estoy sangrando cosas para poder mirar un código de bloque como este y decir, oh, eso es una caja y tiene otra caja, eso es hermano y este es padre. Puedo contar todas estas cosas con sólo mirar qué tan lejos sangrada. Otra cosa es, ¿ves esa pequeña línea azul aquí? En Atom, cuando toco un elemento, me muestra dónde está la etiqueta de apertura o cierre correspondiente. Esas son algunas otras formas útiles de tener una representación visual para los cuadros abstractos que estás construyendo en código. Tenemos principal nav flotado a la izquierda y social flotó a la derecha. Tenemos desbordamiento oculto especificado, por lo que debería funcionar. Presto. Ahí vamos. Eso es a la derecha, esa es la izquierda. Ahora esto sigue pareciendo chatarra, pero vamos a hablar de texto de estilo muy pronto aquí. Una cosa que quiero que hagas, sal
a CodePen y acaba de golpear create and hit pen e intenta escribirte, un diseño basado en flotador muy simple. Voy a hacerlo muy rápido. Si quieres puedes saltar al final del video si estás como,
no, lo tengo, pero realmente rápido, hagámoslo. Vamos a tener un div con la clase de contenedor y luego voy a cerrar ese div, y luego tendré una columna. En esa columna de un div, a
eso se le va a dar una clase de izquierda, cierra ese div y luego tendremos un div con una clase de derecha, y luego vamos a Hola aquí y Mundo aquí. Ya ves que están apilados ahí mismo. Tratemos de conseguir que se alineen a la izquierda y a la derecha. Para el contenedor, digamos que el ancho es decir 500 píxeles, margen es Auto y quiero poner desbordamiento oculto ahí. Hagamos un color de fondo solo para que veamos cómo se ven las cajas. Déjame hacer rojo. Ahora el punto izquierdo se va a conseguir flotar izquierda y el punto a la derecha, es flotar a la derecha. Ahí están. Ahora ves que el rojo se ha alejado de nuestro contenedor principal de fondo. Eso es porque no está claro. Hagamos un desbordamiento oculto y vuelve. Hay un flotador de dos columnas realmente básico. Ni siquiera hemos puesto anchos aquí. Podríamos si quisiéramos, pero sólo quería que escribieras eso muy rápido. Tan solo para darte una mano en el ejercicio de diseño de dos columnas, realmente sencillo sin que yo haya escrito nada del código. Enhorabuena, porque esta es una convención de maquetación complicada y si dominas esto, podrás escribir tus propios diseños fácilmente y depurar cuando se van mal, lo cual es muy importante. Felicidades chicos. Pasemos al siguiente video. Vamos a empezar a hacer que esto parezca un sitio web real.
7. Fonts web: Está bien. Esto va a ser muy divertido y va a ser de alto impacto y rápido. Vamos a añadir algunas fuentes web. Ahora, en los viejos tiempos, realmente solo tenías un par de fuentes diferentes para elegir. Tenías que confiar en que las fuentes estuvieran presentes en la computadora de un usuario. Bueno ahora con fuentes web y Google y todos estos otros servicios alojándolos en CDN, puedes obtener fuentes realmente confiables, hermosas de forma gratuita o [inaudible] servicios de pago como Typekit y cosas así. Pero toneladas de formas de conseguir grandes fuentes en tu sitio. Vamos a ver un recurso gratuito, la biblioteca de fuentes de Google, y vamos a ponernos esos y conseguir que este sitio web se conforma un poco. Aquí vamos. Off to Google fuentes. Se trata de Google Fonts. Tenemos, solo probablemente cientos de fuentes para elegir aquí. Yo quiero correr por un par de cosas. Algunos términos, Serif, Sans Serif, Display, Escritura a mano, Monosespacio. Echemos un vistazo a cómo se ven estas fuentes. A fuente Serif, mira esta colitas, pequeñas piezas horizontales y todas estas, números
[inaudibles], muy pronunciada Serif. Este M, tiene esos pies pequeños que salen de arriba y abajo. Eso es lo que es un Serif. fuente Serif tiene estos piecillos encima. Sans Serif. Sans significa sin. Te darás cuenta de que estos son todos sin los piecillos. El tipo de pantalla suele ser tipo con mucha personalidad. Por lo general es inadecuado para copia
corporal donde hay que leer toneladas y toneladas y toneladas de ella. Puede ser difícil de leer pero suele tener mucha personalidad y es genial para un titular o algo así. Obviamente la escritura a mano va a ser, siento que esto está en la categoría más grande del tipo de pantalla. ¿ Personalidad? Sí. ¿Legibilidad? No tanto. Entonces Monospace es un muy, casi
parece un terminal de computadora. Ahí es donde están todas estas cosas. Utilizo Monosespacio y escritura a mano, apagada. Para este proyecto en particular, elegí un tipo Display y un tipo Sans Serif. El tipo Display era Bungee y el Sans Serif era Open Sans. Busquemos aquí Bungee. Aquí mismo. Si haces clic en este “BOTÓN MÁS”, lo agrega a una colección para ti aquí abajo. Vamos a sumar. Pongamos a Open Sans ahí también y te mostraré. Abre Sans, agrega eso. Es increíble lo fácil que Google hace esto. Todo lo que tienes que hacer, esto va a ser alojado en su CDN. Sí, hay diferentes formas en que puedes hospedarlos en tu propio servidor y tienes que usar una declaración de cara de fuente. No voy a meterme en eso en esta lección en particular. Hagámoslo de la manera fácil. Copias esto y lo pegas en el cabezal de tu archivo HTML. El motivo es que quieres cargar tus fuentes antes empezar a decirle a tu hoja de estilo qué hacer con ellas. Si tu hoja de estilo se carga antes de que lo hagan las fuentes, existe la posibilidad de que tu navegador no reconozca lo que está pasando. Básicamente estarías diciendo: “Oye, usa Bungee para todos estos titulares”. El navegador estaría diciendo: “Ni siquiera sé qué es Bungee. No he descargado nada que coincida con eso”. Vamos a cargar las fuentes primero aquí mismo. Ves que se cargan Bungee y Open Sans. Especificemos los pesos que queremos usar porque vienen con, aquí personalizarás, un montón de pesos diferentes. Puedes elegir, como 300 y audaz 700 para Open Sans y luego para Bungee, solo
estamos usando los 400 regulares, ese es el único tamaño que tiene. Vuelve a incrustar, copia eso. Se ve como los tamaños ahí dentro también. Ahora estamos listos para empezar a peinar cualquier texto que queramos. Al mirar nuestro archivo de diseño aquí, vemos que este encabezado tiene textos de Bungee,
su botón tiene textos de Bungee, esto es todo Bungee, Bungee por todas partes. Empecemos a escribir algunos estilos para estas cosas. Parece que tenemos la etiqueta H1, la etiqueta H2, todos esos van a ser Bungee. Nos dirigimos a nuestros estilos aquí y podemos escribir H1. Están todas estas propiedades diferentes que pertenecen bajo la declaración de la fuente. Empecemos con la familia de fuentes. Vamos a decir entre comillas, Bungee. Entonces esto va a ser una pila de fuentes. Una pila de fuentes es un orden de retroceso. Aquí diremos Sans Serif. Lo que esto significa es, si el navegador no puede encontrar Bungee, solo muestra lo que sea el predeterminado Sans Serif. Pongamos uno más y luego digamos, Helvética. Si no puedes encontrar Bungee, usa Helvetica, si no puedes encontrar a Helvetica, usa cualquier Sans Serif viejo. Podríamos decir que esto es cierto también para las etiquetas H2 y H3. Guarda eso y echemos un vistazo a nuestra página web aquí para ver qué obtenemos. Ahí se abre la hoja de estilo equivocada. Eso es lo que estamos haciendo mal. Estoy guardando estas hojas de estilo al final de cada lección para que tengas un registro de todo lo que se ha hecho para esa lección. Empecé con el de esta lección y comencé a escribir en el lugar equivocado. Aquí vamos, hagamos esto. H1, H2, H3, re hazlo y ahí ves tenemos Bungee apareciendo para todo nuestro texto. Vamos a tomar el enfoque opuesto para lo que voy a llamar la fuente del cuerpo. Usaremos Open Sans adjuntándolo a la etiqueta del cuerpo. Básicamente esto dice, hacer todas las fuentes Open Sans. Entonces regresaremos y cambiaremos muy específicamente los que queremos a Bungee. Aquí vamos. El motivo por el que esto está entre comillas es que tiene un espacio. Si no pongo esto entre comillas, entonces el navegador va a interpretar eso como dos fuentes separadas. Coma, ahora regresamos y echamos un vistazo. Deberíamos ver todo un montón de Open Sans, por defecto va para Times New Roman. Todo esto debería cambiar a un bonito, delgado Sans Serif. Ahí vamos. Tenemos lindos textos ahora. Echaremos un vistazo a los fondos en la siguiente lección y luego llegaremos al posicionamiento absoluto, que podamos terminar con esto. En la carpeta extras, en la carpeta de la lección siete, he agregado todos los estilos relacionados con el tipo a la hoja de estilo. Pasa y descomenta esos estilos relacionados de uno a la vez para ver cómo afectan a tu diseño. Entonces te veré en la siguiente lección.
8. Posicionamiento absoluto: El posicionamiento es uno de los aspectos más incomprendidos del diseño CSS, incluso los desarrolladores experimentados a veces no lo entienden del todo bien. Son cuatro los posicionamientos diferentes, y estas plazas ilustran las formas en que trabajan. Estático es el tipo de posicionamiento predeterminado y es lo que
esperarías es un elemento que ocupa un espacio en el DOM. El siguiente es relativo. posicionamiento relativo es único, el elemento en sí ocupa el mismo lugar en el DOM que tenía antes de aplicar el posicionamiento, pero aparecerá en algún otro lugar como un holograma, lo
ilustraré con el código demo en caso de que esto realmente no tenga tanto sentido. Después están los dos a los que llamo los fantasmas, posicionamiento
fijo y absoluto. Me refiero a ellos como fantasmas porque aunque los puedes ver, realmente no
tienen la capacidad de sacar nada del camino. Un poco como un flotador, pero incluso con menos presencia en el DOM, de hecho, se sacan enteramente del DOM cuando son invocados. El posicionamiento fijo se tira hacia arriba o hacia abajo de la vista-puerto, y solo hace referencia a la vista-puerto, la vista-puerto es tu ventana, la ventana de tu navegador. En cualquier momento que hayas visto un encabezado pegajoso cuando te
desplazas por un sitio web y el encabezado permanece en la parte superior, eso suele ser un posicionamiento fijo. Entonces finalmente llegamos al posicionamiento absoluto, que es el tipo que probablemente usarías más. Se extrae del flujo normal, y por su posición, como qué tan lejos en la x, qué tan abajo en la y, hace referencia al siguiente contenedor padre que tiene el posicionamiento especificado. Voy a hacer una ilustración aquí que, porque eso es difícil de entender, o al menos fue para mí. Si tengo este rectángulo azulado y el rectángulo naranja, y el rectángulo naranja no tiene algún posicionamiento especificado, va a ir al contenedor padre o al contenedor naranja buscando referencia de posicionamiento. Si ese contenedor no tiene referencia de posicionamiento, seguirá yendo todo el camino hasta que llegue al borde de la ventana del navegador. Lo que hay que hacer es en el contenedor padre del objeto para colocarse absolutamente, hay
que poner posición relativa. Tienes que usar absoluto y relativo en conjunto unos con otros, es una forma realmente rara de hacerlo, pero así es como es. No sé por qué tiene que ser tan complicado, pero sí sé controlarlo. Echemos un vistazo aquí a nuestro código. Entra a la carpeta de lecciones de posicionamiento absoluto y solo copia todo y pégalo en tu CSS, y luego revisaremos algunas de estas líneas comentadas de código. Ahora el primero al que vas a venir en realidad es este pariente de posición, deja eso solo por ahora mismo. Bajemos a esta línea moozedoo aquí. Cuando descomentemos esto, se va a aplicar un posicionamiento absoluto a ese pequeño personaje de aquí, este tipo. Ahí está, y su elemento va a empezar a buscar el DOM hasta que encuentre otro elemento que le haya aplicado posicionamiento, un elemento que es su padre. No hay otros elementos con eso especificado ahora mismo así que básicamente va a ir hasta la ventana del navegador, así que mira esto, ahí va. Está siguiendo estas direcciones, abajo cero izquierda tres si tic estas apagado, va, no tiene ningún posicionamiento en pliegue todos. Déjame mostrarte cómo se ve con la posición relativa, y apaga eso. Con posición relativa, aún ocupa un lugar en el DOM, pero si hago algo así como cambiar la distancia desde abajo, usemos un 100 pixels, verás un movimiento y pensarías que eso permitiría esto botón para pasar por encima porque está centrado. Pero no lo hace porque su elemento todavía existe en el DOM aquí mismo, sin embargo, sólo se está mostrando por aquí. Pero algo raro sobre el posicionamiento relativo, y no he encontrado un uso realmente grande para ello, honestamente, aparte de que se use como una clase de posicionamiento de contenedor padre para el posicionamiento absoluto, veamos cómo esos dos trabajan juntos. Aquí está con posicionamiento absoluto aplicado, si subimos al elemento que queremos que haga referencia, que en este caso es el héroe, y ponemos posición relativa en su habitación. Ahora busca todo el camino hasta que encuentra esto y luego de ahí dice bien, voy abajo cero, izquierda tres por ciento, así es como encontramos su posición. Podemos ir por aquí ahora, descomentar este texto de línea en el héroe contra héroe. Ahí vamos, y él irá a donde se supone que vaya. Espero que eso explique un poco el posicionamiento absoluto, te
voy a mostrar otro ejemplo aquí abajo también. Vamos a jugar con el posicionamiento fijo realmente rápido. Esto no forma parte del proyecto, pero podría ser algo divertido para que lo compruebes. Vamos a tomar nuestra barra de navegación aquí, vamos a hacer un encabezado pegajoso fuera de él. Haremos posición fija, recuerda posición fija solo funciona en la parte superior e inferior de la ventana del navegador, y solo puede hacer referencia a la ventana del navegador para el
posicionamiento para que no la utilices con posicionamiento relativo. lo viste desaparecido, tenemos que darle un índice z, así que tienes un índice x que es de izquierda a derecha, un índice y que es de arriba a abajo, un índice z sale a cero. Esto acaba de caer a la posición cero, y necesitamos moverlo a la posición de uno o más alto para que pueda estar por encima del resto del contenido, y entonces sólo tenemos que darle a esto el ancho del 100 por ciento para que llene ese respaldo, por lo que ahora tenemos un encabezado pegajoso. Algo que notan es que como esto se saca del DOM, no empuja esta imagen superior hacia abajo en absoluto así que si apago esto, por ejemplo, notarás que salta, y ahora está empujando esta imagen de héroe abajo así que eso es algo a considerar cuando lo estás colocando, vas a tener que permitir lo que sea esta distancia, pero de todos modos, ese es un experimento final ahí, puedes jugar con eso tú mismo. Lo que vamos a hacer es bajar aquí y usar algún posicionamiento absoluto para hacer que estas pequeñas tarjetas de banda se vean como el diseño, así. Tienen un rectángulo semitransparente con un poco de información en él. Empezaremos por descomentar la tarjeta de banda, veamos eso, nada realmente pasa, nada realmente debería, solo establece la altura, hace posición relativa, lo que nos pone para usar posicionamiento absoluto y le pone un margen. Hagamos la barra de título aquí, pero comentan el posicionamiento absoluto por ahora mismo. Ves que se renderiza aquí abajo, se supone que está arriba, vamos a usar un posicionamiento absoluto para ponerlo encima de esa imagen. Vamos a meter algunos de estos otros estilos aquí, barra de
título, nombre de banda, verás que hay un flotador, porque tenemos un título a la izquierda y una noche a la derecha, así que aquí está la noche, mira que está flotando a la derecha, por lo que eso debería ir a la derecha, y ahí va, ahora descomentemos posición absoluta y veamos qué pasa. Ahora todo ese contenido se puede sacar
del DOM y solapar sus vecinos aquí dentro de este div. Realmente rápido, sólo porque quiero conducir esta casa,
este bloque contenedor aquí se ha posicionado relativo, y luego cualquier cosa dentro de ella con una posición absoluta lo puede hacer referencia para posicionamiento, así que ya ves que hemos consiguió abajo cero justo ahí, y eso se está pegando al fondo justo ahí. Ahora vamos muy rápido a conseguir estos estilos y conseguir que floten hacia la derecha, todo
esto ya debería de ser bastante viejo escuchado. Voy a agregar algo de color de fondo a esas cosas, y vamos a darle estilo al encabezado, clave ahí. Ahora, aquí hay algo interesante en el encabezado o un pequeño truco que
usé, puse relleno todo el camino alrededor de ese encabezado, y está dentro de una caja que tiene relleno. Pero quería que el morado se estire hasta el final, así que lo que tenía que hacer era usar margen negativo. Echa un vistazo a este truco, en cualquier momento que lo necesites puedes usar un margen negativo, ¿ves este negativo 20 pixels? Vamos a poner eso a cero, y se puede ver el comportamiento por defecto, ver que tiene esa fea brecha. Al usar el margen negativo, puedo extenderlo sobre el margen. Eso es un poco contra-intuitivo, pero es un gran pequeño truco. Tenemos estas cajas, vamos a aplicar un ancho y un flotador para que
podamos conseguir que estas cosas se alineen de la manera que deberían. Un poco de estilo para el precio, estilo la descripción, ahí vamos, está empezando a lucir bien, y luego finalmente, tenemos todo este estilo contenedor. Estos son todos con estilo, volvamos aquí arriba y hagamos las carrozas entonces deberíamos tener nuestro diseño de página de inicio terminado. Luna. Podrías reproducir algo como esto, quiero decir, definitivamente cavar alrededor, jugar con esto, conocer cómo funciona, romperlo, arreglarlo, pero en base a lo que has aprendido en estas lecciones, podrías ejecutar este tipo de maquetación. A lo mejor no será rápido, indoloro y fácil pero definitivamente tienes las herramientas para hacerlo, y si lo haces un par de veces tendrá sentido. Ahora tomemos lo que tenemos aquí y lo reutilizemos y reciclemos para configurar rápidamente el resto de nuestras páginas.
9. Reciclar para la velocidad: Lo bueno del código es que una vez que lo has escrito, puedes reutilizarlo. Tenemos un par de elementos en esta página que repiten el encabezado, el pie de página, el fondo detrás de esta sección media. Copiemos esas cosas en nuestras próximas dos páginas para dar un salto en la creación. Open experience dot HTML desde los archivos de inicio, está vacío, pero lo que estamos haciendo aquí es agarrar las porciones reutilizables del sitio. Entonces agarramos el cabezal HTML tipo doc-doc-type, usamos las mismas cosas ahí, body class, home, vamos a cambiar a experiencia, pero todo desde, vamos a hacer el encabezado por ahora. Desde el tipo doc-todo el camino hasta el encabezado, copia eso y pégalo aquí, y ya sabes lo que mis ojos agarrarán el pie de página porque usamos eso. Entonces pongamos el HTML cercano y todo el camino hasta el pie de página, y podemos decir que hemos agarrado la cantidad correcta de código porque veamos cómo coinciden todos los corchetes, así que tenemos nuestras cajas alineadas justo. Ahora, cambiemos esto por experiencia. No sé si recuerdas o no, pero escribimos un par de estilos en nuestra hoja de estilo para que proporcione un héroe diferente para la página de experiencias hace experiencias y podemos hacer lo mismo por la ubicación. Todo el mismo código, sólo vamos a intercambiar la imagen de fondo. Entonces echemos un vistazo a lo que tenemos aquí. Voy a recargar eso a experimentar, tenemos nuestro encabezado, tenemos nuestro pie de página. Cambiemos esto para que indique que estamos en la página de experiencias. Aquí tengo esta clase activa. Activo es el que pone la línea debajo de la página en la que estamos, así que si cambio eso al enlace de experiencia, ahí tienes. Entonces ahora tenemos una manera de decir en qué página estamos. ¿ Qué otras cosas podemos pedir prestadas? Toda la sección de héroes es igual, así que tomemos prestado eso, tenemos héroe todo el camino a, ¿dónde se cierra? Ahí mismo, y sólo ve a meter eso. Ver todo se fila todavía para que sepamos que estamos en el nivel correcto de cajas. Entonces tenemos nuestros diferentes antecedentes y podemos simplemente intercambiar estas
cosas según sea necesario por la copia que sí necesitamos. Entonces, no necesitamos el logotipo de Moozedoo, deshaznos de eso, no
necesitamos este RHH, ya no
necesitamos conseguir el botón de boletos, y no necesitamos al pequeño personaje. Todo lo que necesitamos es ese titular. Para ver nuestra comp de diseño, podemos agarrar el titular de eso, ahí vamos. Entonces así como así, tenemos toda una configuración de página y entonces obviamente tenemos que hacer algo de contenido en el medio aquí, pero tomemos eso ya que nuestra otra página o página ubicación cuenta con los mismos tipos de diseño de página, podemos realmente rápidamente conseguir eso en línea para comprar copiando todo esto en nuestra página de ubicación. Todo lo que tenemos que hacer es cambiar esta clase activa a ubicación y cambiar esta clase corporal a ubicación, y ahí vamos. Por lo que realmente podemos duplicar rápidamente los diseños una vez que tengamos algo de esa copia descubierta. Hagamos la parte media de la experiencia, lo último que quería mostrarte es cómo puedes usar la galería de flotación secreta. Dirígete a la carpeta de la lección 10 extras, y tengo el contenido preparado para ambas páginas. Entonces vamos a echar un vistazo a la página de experiencias. Agarra todo de héroe, bueno solo agarra todo porque es solo todo el contenido principal, y lo pegaremos en nuestra página de experiencias. Vamos a ir sobre héroe, deberíamos sacar todo del héroe y del medio y todo. Parece que nuestro sangría se ha desmoronado un poco aquí, así que puedes empujar comando, corsé
rizado izquierdo y sangría 1, y puedes empujar comando corsé rizado en eso, en el otro sentido. Entonces también voy a sangrar esto hacia atrás, para que todo se alinee. Esto puede parecer ridículamente OCD, pero te digo que te ayudará en tu codificación darte cuenta de cuántas cajas hay en ti. Entonces guardo esto y le echo un vistazo al navegador, pero la página de experiencias, y tengo estas diferentes características aquí. Entonces en nuestro diseño, ven como mosaicos o son como un diseño de estilo galería, por
lo que podemos lograr fácilmente ese efecto usando floats, y a diferencia de nuestro flotador de dos columnas que teníamos antes, podemos ponerlos todos en flotar a la izquierda, y si son la mitad del ancho que su contenedor padre, solo se
apilarán todos. Pero te mostraré un selector CSS realmente ordenado para usar para ayudar con esto. Vamos a agarrar los estilos de esta carpeta de la lección 10, seleccionarlos todos, copiar, ir a nuestra hoja de estilos, que está aquí mismo. Pégalos, si descomentamos el texto pull, eso nos va a dar este texto aquí. No pasa mucho ahí, nada que no pudieras descifrar, solo algunos estilos de fuente regulares. Vamos a descomentar característica, eso va a empezar a prestar algo de estilo a esto. Echemos un vistazo a lo que agregamos, la característica que hemos agregado un ancho que permitió estos.
10. ¡Gracias!: Gracias por tomar mi clase de Skillshare. Espero que hayas sacado mucho de ello. Si tienes sugerencias, comentarios, crítica, por favor déjame un mensaje y me encantaría que me dejaras una nota positiva. Si tienes alguna idea para temas futuros, me encantaría escucharlas también. La mejor de las suertes, y te veré por ahí en Skillshare.
Marc Nischan, Artsy people can code!
