Transcripciones
1. Una introducción al curso: bienvenidos a este curso sobre la construcción de sitios web modernos usando Drew Pilate y Bootstrap para En el
camino, nos sumergiremos en los pols de Drew, tipo de
contenido, sistema, vista, sistema, Block Sistema, y tanto más entrarán en el código y comenzarán a tema viales ramitas. Veremos CSS y lo empataremos todo junto con el inspector Web de Google Chrome. Pero primero, déjame presentarme y contarte un poco sobre mis antecedentes. Mi nombre es un nueve, y seré su instructor a lo largo de este curso. Si no puedes decirlo por la foto. Soy desarrolladora y diseñadora. También me considero un aprendiz de toda la vida, y siento que el aprendizaje permanente es una habilidad que todo el mundo que entra en el campo del diseño y el desarrollo debe poseer. Tengo licenciaturas en ciencias en Web y medios interactivos, lo que básicamente significa que hice mi licenciatura en diseño, desarrollo y mercadotecnia para la Web. Antes de empezar a dar clases en línea, tenía una carrera de cinco años en droop, allow y superior. A lo largo de mi tiempo en educación superior, me involucré en más de 50 proyectos de diseño y desarrollo web de alto impacto y tuve un
breve periodo en la escuela de posgrado donde estudiaba para obtener una maestría en educación. Afortunadamente, no
llegué a terminar eso. No obstante, aún
tengo las habilidades, y siento que mis licenciaturas también se licencian. Aziz, mi experiencia investigando y trabajando y la educación superior me hace calificar de manera única para enseñar desarrollo web en línea. Sin más preámbulos, Sumémonos y empecemos.
2. Recursos del proyecto: antes de empezar a aprender sobre Drew pool y Bootstrap para Yo sí quería mostrarte dónde puedes descargar los archivos del curso para completar este video. Siri's Así que si estás en esta página de aprendizaje aquí y vas hasta el fondo, asegúrate de que estás en proyectos y recurso es, y verás un archivo zip del sitio llamado Elaine's. Dentro de ese archivo zip estará literalmente todo el contenido y todo lo que necesites. Teoh completar este curso un paso opcional, y otra cosa que puede necesitar que no es contenido es un host Web. Por lo que en realidad tengo un video de compartir habilidad sobre cómo configurar hosting y un entorno de desarrollador con sitio terreno. Entonces si vas a compartir habilidad y escribir en por qué deberías usar Rupel una introducción, encontrarás este video aquí. Y así sólo quería traer esto a su atención. En caso de que no tengas un host Web, estás empezando por completo desde cero. Esto va en detalle sobre cómo construí el entorno de desarrolladores que estoy usando para construir este sitio web que vamos a pasar en este curso, y hay enlaces prácticamente en todas partes para llegar a citar terreno. Muy bien, Gracias. Y te veo en el siguiente video.
3. Crear nuestro entorno de desarrollo: Hola. Bienvenido de nuevo en este video. Vamos a repasar los pasos que necesitarás dar para configurar tu
entorno de desarrollo . Hay muchas formas de configurar un entorno de desarrollo, y voy a repasar algunas de ellas que recomiendo en este video. También te mostraré mi entorno de desarrollo para este curso. Eres bienvenido a seguirlo, pero ciertamente no tienes que hacerlo. Esto es sólo una especie de, um, para asegurarse de que hay algo ahí. Este no es un curso sobre desarrollo local o configuración en un entorno de desarrollo. Se trata de un curso sobre piscina Drew. Pero sí quería asegurarme de que te di algo. En primer lugar necesitarás un editor de texto o un entorno de desarrollo independiente I. D E. Mi recomendado I D E. Y el que voy a estar usando este curso es código de estudio visual o código V s. Lo siguiente que necesitarás es una terminal o una línea de comando. Ahí hay una línea de comando. Se llama Terminal On Mac. Eso viene estándar, Y si tus propias ventanas también tendrás línea de comandos, Sin embargo, esta es una mejor opción. En mi opinión, esto es hiper, y ,
um, viene con muchas opciones para hacer de esta terminal lo que quieras que sea. Lo mismo es cierto para el código de estudio visual, por lo que podrías optar por ponerte hiper. Hay otras opciones, como yo término que son geniales, pero esta es la que uso. Y la siguiente herramienta que necesitarás es la parte de este video que más varía. Y esto es algo para hacer tu local o tu desarrollo en. Entonces obviamente vas a estar escribiendo código en esto. Por mucho de lo que caiga Eliza, gran parte de lo que estaremos haciendo es a través de una interfaz web. Entonces para mí, lo que uso es sitio terreno y sitio. Ground tiene un instalador de un clic que viene con un dominio de puesta en escena o un euro de puesta en escena. Tengo todo un curso sobre cómo configurar esto. Por aquí, es cuota de habilidad. Ah, es el número tres. Esto va a pasar. Um, Lo que no queremos que esto vaya sobre cómo instalar usando share de habilidad. Disculpe? Cómo Esto va a ir sobre cómo dio instaló Rupel usando terrenos del sitio y también hay un video aquí configurándose para el éxito. Eso repasa más de estas opciones, Así que sí, definitivamente considera revisar eso. Si no quieres ir con sitio terreno, eso está totalmente bien. Tienes un montón de opciones que todas tocan rápidamente aquí si quieres ir por una
ruta diferente . Um, aquí, voy a estar seguro. Teoh, agrega esto en la descripción. Este es un artículo de Low Baht, poco sobre el cual es una tienda de billar realmente una clase A Drew. Hacen mucho buen trabajo, y esta es una ronda bastante completa de todas las diferentes formas en que puedes usar a las personas
dibujadas localmente de forma gratuita en tu máquina. Por lo que recomiendo encarecidamente revisar esto. He usado muchas de las opciones aquí. Mucho de estos aire, opciones
más avanzadas. Este es un curso sobre cómo conseguir que alguien esté listo para usar Rupel. Pero esto está aquí. Entonces lo tienes en caso de que no quieras pagar. Creo que es como con mi enlace. Creo que son como 3 dólares al mes. Um, vale totalmente la pena, porque eventualmente tendrás a Teoh anfitrión de tu sitio de todos modos, y el ciclón lo hace muy fácil Pero si de verdad no quieres deshacerte de ningún dinero, lo entiendo totalmente. Y hay toneladas de opciones, ¿verdad? Así que echa un vistazo a este artículo de Lobato y luego también echa un vistazo al escritorio de Acquia Dev, que es una solución increíblemente popular dentro de la comunidad dribble para el desarrollo local . Yo no uso esto. Es solo en mi organización anterior donde aprendí a usar a la gente de Drew. Como que tuve que aprender de la manera difícil con esto. Um, definitivamente usaba muchas máquinas virtuales, pero también tenía un servicio interno que tipo de hizo qué sitio a tierra donde tenía,
como una, um, um, chica de puesta en
escena en un servidor que poseía y administraba. Entonces yo simplemente No es porque no me guste el escritorio de Acquia Dev. Yo solo que nunca había usado simplemente no tenía que usarlo. Entonces esto es muy popular de descargar, y estoy seguro de que hay mucha documentación realmente buena aquí para empezar. Si quieres ir a esta ruta una vez tengas instalado el código s, necesitarás que Teoh configure una extensión. Entonces si bajas, podrías estar aquí. Si baja al icono de extensiones y escribe Sftp. Ya la puedes ver. Ya lo tengo. ¿ Quieres seguir adelante e instalar que has hecho eso? Querrás Teoh hacer comando shift P y teclea sftp config y pondrás tus efs Disculpe y pondrás tu información FTP en este archivo de configuración. No lo voy a abrir porque sí muestra tu información en texto plano. Y eso simplemente no sería seguro para mí hacer eso. Entonces, sí, así definitivamente querrás a Teoh. Asegúrese de golpear comando shift tipo P en sftp config. Configura tus credenciales sftp y luego lo que podrás hacer en realidad también se usa sftp. Muestra el servidor de desarrollo que estás usando. Ya que estoy usando sitio ground, tengo mi sftp configurado para que sea así Está golpeando el directorio droop will en mi sitio ground server Y lo que eso nos permite hacer es descargar cualquier archivo de tema que pudiéramos necesitar. Edítelo y luego cuando golpeemos, guárdelo realmente lo sube. Vale, Una vez que descargues todo el software requerido y te pongas esa configuración, siéntete libre de pasar al siguiente video y voy a ver su
4. Instalación de los temas Bootstrap 4 y Adminimal: todos los derechos. Bienvenido de nuevo en este video vamos a instalar el tema bootstrap four también
instalará el tema add minimal admin, y voy a repasar lo que eso significa. Pero primero, vamos a seguir adelante y establecer la configuración básica del sitio parte de la información básica. Así que ahora mismo, si estás siguiendo de mi curso anterior sobre cuota de habilidad, um, puse esto solo a alguna información de prueba. Entonces cambiemos esto. Vamos a estar construyendo una panadería vegana llamada Elaine. Entonces si solo hacemos clic en configuración y bajamos a sitios básicos, ist settings bajo sistema, cambiemos el nombre del sitio, también de Elaine y hará que el eslogan sea el mejor alimento vegano. Obviamente configura tu correo electrónico y sigamos adelante y guardemos la configuración. De acuerdo, entonces si volvemos al sitio, se
puede ver que tenemos el nombre y el eslogan establecidos. Genial. A continuación, echemos un vistazo al tema de administración. Por lo que en Drew pull, tienes dos temas. Tienes un tema de sitio, que es lo que ves aquí mismo. Este es Bartek. Bartek es el tema predeterminado que los barcos retiraron a la gente, y también tienes un tema de administración. Entonces si fuéramos a seguir adelante y hacer clic en contenido. Se puede ver esta ventana aquí. Este back end es el tema de la administración. Este es el tema de administrador predeterminado que los barcos se retiraron, pally. Entonces si fuéramos a navegar para extender la configuración todas estas ventanas o parte del
tema de administración Bueno, creo que esto es agradable, pero prefiero algo un poco más moderno. Entonces vamos a instalar en mi lo que es, en mi opinión, el mejor tema de administración disponible en triple. Y eso es agregar mínimo. Entonces lo traeré aquí para que lo veas que se encuentra en Project Slash agregar
tema mínimo . Se puede ver en la página del proyecto que esto se comercializa como un tema moderno, y definitivamente puedo dar fe de ello. He usado mucho este tema en este video. Nos vamos Teoh, usa el método sencillo para instalar un tema. No obstante, en el siguiente video, repasaré instalando módulos, los cuales proporcionarán más de una opción para instalar. Ya que acabamos de empezar aquí, esto tiene sentido que instalemos este tipo de la forma básica, así que vamos a seguir adelante y hacer eso. Entonces en el anuncio Página temática Minimal. Si paseas hasta la parte inferior de la página donde dice descargas, verás un número de lanzamiento. Esto cambia en función de las actualizaciones de seguridad Andrew People. Pero básicamente, por ahora mismo, lo que necesitamos es solo la más actual, y tienes dos opciones de descargar el archivo temático. Te vendría bien un alquitrán o podrías salir con la cremallera. En realidad no vamos a descargar físicamente nada de esto a nuestra máquina. En cambio, lo que vamos a hacer es correcto. Haga clic en guitarra y vaya hacia abajo Teoh Copy Link dirección. Y luego, después de que hayas hecho eso, saltaremos para caer todo en el menú de apariencia. Se pueden ver todos los temas instalados que tenemos en este momento. El tema de la administración es siete, que es el tema predeterminado. Sigamos adelante y cambiemos que Teoh tenía mínimo. Así que vamos a hacer clic en este botón instalar nuevo tema, y en lugar de subir de carga, vamos a instalar desde tu URL. Entonces recuerda, copiamos esa dirección de enlace y vamos a acelerar eso y vamos a hacer clic en instalar. Fácil Hecho. Muy bien, así que vamos a las páginas de administración, y nuestro trabajo aquí aún no está hecho. Se puede ver que seguimos en el tema predeterminado. Así que vamos a hacer click en apariencia, y lo que vamos a hacer ahora es encontrar al mínimo bajo la opción de temas desinstalados y hacer clic en instalar. Enfriar. Se puede ver que eso se ha hecho aquí con este call out window. Por lo que con él instalado, aún no
terminamos. Tenemos una cosa más a Dio. No lo vamos a establecer como predeterminado porque eso establecería el tema del sitio, la página principal y todas las demás páginas del sitio para agregar mínimo. Lo que en cambio queremos es solo asegurarnos de que esto esté en las ventanas de administración. Entonces vamos a bajar el tema de la administración Teoh aquí en la parte inferior y vamos a dar click. Agregar mínimo. También asegúrese de haber utilizado el tema de administración al editar, contactar o crear comprobaciones de contenido. Guardemos esa configuración, y si todo va bien, deberías ver una ventana de administración mucho mejorada. Así que vamos a dar un poco por aquí. Excelente. Creo que esto se ve más bonito que el predeterminado, así que sigamos adelante y pinchemos en la configuración de agregar mínimos. Y solo para traer esto a su atención, no
estaremos cambiando nada de esto pero definitivamente
hay Ah, definitivamente hay muchas opciones aquí. Entonces con el conjunto de temas admin minimal ad, sigamos adelante e instalemos Bootstrapped four para que podamos hacer que esto se vea un poco más moderno. Entonces vamos a ir a regatear trabajo hija y voy a bajar esto de nuevo para que puedas ver el proyecto
URL slash bootstrapped cuatro estaban usando este tema del proyecto. He tenido éxito con él en este curso, así que estoy feliz de recomendarlo. Hay una serie de bootstrap cuatro opciones y bootstrap tres opciones dentro del ecosistema
ALS droop una que he usado antes y definitivamente puedo recomendar es Barrio. Esto es muy bueno si te interesa,
um, um, entrar en SAS, que es un lenguaje de compilación front-end para CSS. Desafortunadamente, eso es un poco demasiado avanzado para este curso. No obstante, este curso podría ser un bonito escalón hacia algo como Barrio. Y en realidad, si quisieras entrar en SAS después de usar después de pasar por este curso, este tema de cuatro bootstrapped tiene una opción para compilar SAS justo desde la interfaz de usuario, lo cual es realmente agradable porque no necesitas tener un terminal para eso así, Sí. Si te perdí en
eso, está bien. Um, si no lo eres, si eres nuevo en el lado técnico de la web, está bien. Um, pero sólo para que lo sepas, esa es una opción aquí. Muy bien, entonces vamos Teoh, usa el mismo método que usamos para instalar el tema add minimal. Y sí quiero traer esto a su atención. Um, este es un proyecto que no está cubierto por la política de seguridad de dribble. No obstante, mi regla general con esto es como las descargas de Maney tiene en este caso, hay más de 5000 descargas y ¿cuántos sitios lo están usando? Casi 750. Entonces para mí, ya basta. He usado módulos que tienen mucho menos, um, sitios y uso sin ningún problema. Otra cosa a mirar son los temas aquí, um, y cómo va eso. Si el tema o módulo tiene una especie de comunidad activa aquí en la sección de temas, generalmente
me siento cómodo usándolo. Esta es también una ventana muy útil. caso de encontrarse en una situación pegajosa donde no esté seguro de lo que está sucediendo en el sitio, siempre
puede ir al tablero de temas para cualquier tema o cualquier módulo y hacer una pregunta. De acuerdo, así que con todo eso, bajemos. Teoh las descargas y hace clic derecho en el Archivo Tar, Haga clic en Copiar dirección de enlace y volver a caliente a la piscina Drew. Se puede ver que todavía tenemos este tema bárdico, y en un minuto vamos a cambiar eso. Droop a bootstrap para Disculpe Me. Así que hagamos click en apariencia y ahora lo que haremos es hacer clic en instalar nuevo tema y
elijamos instalar de Ural de nuevo. Vamos a pegar y golpear Instalar. Muy bien, Muy bonito. Eso se hizo para volver a las páginas de administración y a la página de inicio. Y una vez más nuestro trabajo no está hecho. Todavía estamos en el tema principal aquí, así que volvamos a la aparición y esta vez qué vamos a dio. A diferencia del tema mínimo del anuncio, podemos hacer clic en instalar y establecer como predeterminado, por lo que esto no sólo instalará el tema, sino que también eliminará a Bartek como predeterminado y hará que bootstrapped sea el predeterminado. Está bien, entonces si todo salió bien, podemos ir a la página de inicio y ya tendremos un sitio web muy mejorado y haremos una cosa más Antes de concluir este video, prefiero una barra de gallo más ligera. Entonces con este tema, hay una manera realmente fácil de hacer eso. ¿ A qué se hace clic en apariencia y entra en la opción de configuración, Al
igual que el tema de administración mínima de ed? Hay una tonelada de diferentes opciones disponibles en este tema bootstrap four. Por ahora solo bajaremos a atrapar nuestras opciones. Y cambiemos bajo nab nuestro tema. Cambiemos esa luz del dedo del pie. Y vamos a cambiar el nab nuestro fondo a la luz también y golpear guardar configuración. Y si volvemos a la página principal, se
puede ver que ese cambio se ha hecho. Y prefiero a eso creo que eso se ve bien. Por lo que espero te haya encontrado esto claro y conciso y útil. Si es así, definitivamente te veré en el siguiente video donde aprenderemos algunos métodos para instalar módulos. Nos vemos entonces
5. Instalación de módulos: Hola a todos. Bienvenido de nuevo en este video, vamos a cubrir el sistema de módulos en Drew. Tire para nuestra página web. Sólo necesitamos unos pocos módulos. No obstante, cubriré los dos métodos estándar para instalar módulos dentro de Drew Pilate. Entonces si íbamos a ir a Google y teclear a personas Drew ocho módulos, obtendrás ah, número de enlaces que apuntan a Drew sacó orig. Definitivamente recomiendo Si tienes curiosidad por profundizar en cómo funcionan los módulos echando un vistazo a estos enlaces aquí, puedes ver que hay una guía de instalación. Voy a simplificar el sistema de módulos para que podamos empezar de inmediato. Los módulos realmente están, para mí, estrechamente asociados con la tienda APS IOS de Apple. Entonces ya has escuchado la frase. Ahí hay una app para eso. Bueno, Andrew pool, hay una frase dentro de la comunidad. Ahí hay un módulo para eso, y ahí es cierto. No lo sé. Creo que 400,000 módulos um, podemos checar aquí. El módulo proyecta fuera. Disculpe, 44 mil modelos. Um, eso todavía son bastantes, pero en realidad, en el núcleo del sistema de módulos Droop ALS, hay dos piezas. Uno. Hay módulos de núcleo Así Drew Paul Core. Podemos mirar a Drew Paul Core es el código que descargas cuando decides construir una caída, un proyecto para que puedas ver justo aquí estamos en 8.8 punto dos. Y si lees al respecto, hay miembros de la comunidad dentro de la organización droop alot que mantenían activamente a Drew Paul Core. Está bien, así que hay algunas piezas de núcleo para caer a Aled que debes tener para hacer que el sistema funcione, y eso es simplemente lo que es un módulo central. Entonces ese es el número uno. Número dos. El otro pedazo del sistema de módulos Droop ALS es contribuir módulos o módulos contribuidos, y simplemente lo que eso es un miembro de la comunidad que quien no es parte de la
organización Droop ALS dibujó pull dot org escribe una pieza de código que extiende el pool de dibujó. Eso es un simple a zit ISS tan parecido con la tienda iOS App de Apple, son desarrolladores. Utkan desarrolla una aplicación IOS. Hay desarrolladores caídos, y cualquiera puede hacer esto porque encaja una plataforma de código abierto, y no cuesta más de 100 dólares unirse al programa. Cualquier persona con habilidades de codificación puede aprender cómo se trata de un módulo de caída de coda. Muchos de los módulos aportados se han convertido en puntales en el ecosistema de voluntad de caída. Una, por ejemplo, aquí está C herramientas de Merlín de Caos. Es una especie de leyenda. Este módulo de C Tools es una dependencia para probablemente miles de módulos, por lo que eso es una especie de visión general de los dos tipos diferentes de módulos. Otra cosa, en caso de que seas completamente nuevo, es que no tienes que descargar módulos core. Yo sólo quisiera tener claro eso si no estuviera en la primera parte. Entonces si descargas Rupel, descargas los módulos core. Lo que sí tienes que descargar son los módulos de aporte, cualquier módulo que necesites para extender la funcionalidad típica del dribble. Entonces si volvemos a nuestro sitio aquí, vamos a echar un vistazo a este panel de módulos y comenzar a personalizar su sitio en un grado
superior. Por lo que en este momento, bajo la opción de menú extender, se pueden
ver todos los módulos centrales que están instalados y habilitados a la vez. Si está habilitado, tiene un cheque azul. Si está instalado pero no está habilitado, aparecerá, pero no habrá, no
se revisará. Entonces este es realmente el motor que está haciendo que tu sitio de pulso de Drew funcione tanto como
instalamos los temas admin y bootstrap. Podemos instalar módulos de manera similar,
Así que echemos un vistazo a esta barra de administración aquí, ¿
verdad? Nos familiarizamos un poco con eso en el último video, pero noté que cuando hago clic en estructura, hay un montón de opciones bajo estructura. Derecha y con el tiempo, si me estoy metiendo en modo desarrollador, estoy dando clic a través de estos menús constantemente teniendo que hacer clic en estructura y luego hacer clic en tipos de
contenido y luego hacer clic en agregar tipo de contenido que se va a poner un poco arduo eventualmente. Afortunadamente, hay un módulo para eso. Se cuenta con un modelo que facilita este proceso. Entonces por aquí, Drew Bill. Tenemos dribble dot org slash project slash admin barra de herramientas aquí mismo, y vamos a empezar con el método básico de instalación que siento que la mayoría de la gente usa cuando empiezan a dribble. Pero lamento no haber explicado que lo que hace la barra de herramientas de administración es exponer todas estas
opciones de las que acabamos de hablar en un menú de desplazamiento. Entonces en lugar de tener que hacer click click click. Puedo pasar el cursor sobre la estructura, cursor sobre los tipos de contenido y luego hacer clic en agregar en lugar de tener que ir estructura. Tipos de contenido agregan tipo de contenido con la barra de herramientas de administración muere es expone que por lo
que solo hay que hacer clic una vez, por lo que es un enorme ahorro de tiempo. Por lo que para en esta página se puede ver hay una serie de formas de instalar el módulo instalado igual que cualquier otro módulo. Y vamos a repasar este método después de que te muestro el básico, porque creo que es importante como ver a ambos lados. Entonces, igual que instalamos los temas admin y bootstrap, vamos a usar un tar aquí para instalar este módulo. Eso es correcto. Haga clic y copia dirección del enlace, arriba atrás sobre la piscina Drew y haga clic, extender y luego presione Instalar nuevo módulo y pegar. En ese enlace, acabamos de copiar. Todo va bien. Se va a instalar de nuevo a las páginas de administración, y hay una cosa más que tenemos que hacer aquí, y es que podríamos escribirlo, o simplemente podríamos buscarlo. Tenemos que revisar para instalar, por lo que también querrás estas herramientas extra. Y una vez que tengas esos revisados todos para ir al fondo y dar clic en instalar. Está bien, Perfecto. Y como podemos ver aquí, se han habilitado
dos módulos. Y si pasamos por encima de la estructura, podemos ver que acabamos de reducir tres clics a uno. Entonces eso es bastante poderoso. Entonces eso fue genial. Esa es una forma fácil de instalar un módulo. No obstante, hay un problema. Hay un problema al hacer eso, y esa es esta idea de dependencias. Es posible que me hayas escuchado hablar de eso hace un segundo, por lo que la dependencia es simplemente una pieza de código que se requiere para que se ejecute otra pieza de código . Por lo que otro módulo de aporte que necesitará aquí es el módulo de auto PATH. Entonces lo que hace Path Auto es que toma un token en este caso, el título y cualquier parámetro que configure y reemplaza este tipo de cadena críptica, este alias críptico. Entonces Path Auto es simplemente alias para tu mundo, bien, Es una de esas cosas en las que realmente no necesitamos gastar mucho tiempo. Una vez que lo configuras, está hecho. Pero puedes ver aquí Drew Pilate requisitos. Por lo que para el trabajo Path Auto dedo del pie. Es necesario tener token y ver las herramientas instaladas. Entonces, ¿qué pasa si bajamos y usamos nuestro método? Vamos a copiar dirección de enlace. Volver a droop hará clic en instalar nuevo módulo acelerado, pero sólo lo copiamos. Hit Install Muy cool back. Las páginas de administración de Teoh se extienden y encontremos que no estará bajo el núcleo. Encontremos camino Auto Cool. Bueno, no
podemos usarlo. No podemos No podemos comprobarlo en verdad? Es porque cuando instalamos el módulo usando ese método básico, literalmente solo instaló Path auto. No instaló las otras dependencias. Recuerda, C Tools y token, como descubrimos en esta página, se requieren sus dependencias. Por lo que el camino alrededor de esto es instalar módulos usando compositor compositor es un
gestor de paquetes PHP . No necesitas conocer,
realmente, realmente, la teoría detrás del compositor que no sea una pieza de software que se ejecuta en tu servidor que te permite salir e instalar otros paquetes o módulos. Por lo que para poder usar compositor y con el fin de instalar módulos desde la línea de comandos, necesitarás ya sea tu entorno de desarrollo local configurado o necesitarás un servidor en el que ssh. Este no es un curso en la línea de comando. Tampoco es un curso sobre entornos de desarrollo, Pero sí quiero brindarles Away. Teoh, entra a tu servidor usando la línea de comandos si estás usando sitio web ground u otro servicio de
hosting compartido . Por lo que con sitio terreno, hay una sección de desarrollador en la sección Herramientas del sitio. Con el fin de llegar al servidor que eres Drew pulsate ha alojado en. Tendrás que configurar las claves ssh. Y para poder hacer eso, tendrás que subir a la ventanilla de tu terminal. Por lo que en un video anterior, recomendé hiper terminal, que es lo que ven aquí. Por lo que para generar tu clave ssh, tienes que teclear. Tienes que ejecutar un comando, y eso es sólo algo que tienes que hacer una vez. Entonces si hacemos cat ssh, d subrayado R s a dot pub. Puedes pausar el video y copiar que si estás siguiendo por aquí, no
voy a golpear enter porque esto es una cosa de seguridad. Pero básicamente, si pulsas enter, obtendrás esta cadena grande, que es una clave, y darás el nombre a la clave. Por lo que en importación, tú voy a trabajar en un I, Mac. Entonces yo nombraría a este Mac, y entonces ¿qué se genera aquí? Se copiará eso, todo
el asunto y el ritmo aquí y haga clic en importar. Así es como es el paso uno. Por lo que primero hay que establecer las claves ssh. Si estás usando este método después de haber importado tu sitio ssh keys ground te dará tus credenciales ssh y no puedes ver estas aquí. Pero esta es la información que necesitas para ingresar a tu servidor. Entonces sé que eso fue mucho Algunos de ustedes pude haber perdido. Siéntase libre de omitir esta parte del video si ya tiene configurada su línea de comandos o si simplemente no le interesa este método. Entonces con tus claves ssh agregadas y tus credenciales ssh configuradas en orden, Teoh, entra a tu servidor o a tu caja. ¡ Lo que tendrás que hacer es ejecutar este comando Ssh! Nombre de usuario en nombre de host Dash P, que significa puerto y luego eres un número de puerto. Enfriar. Entonces ahora que estamos dentro, podemos revisar los archivos y todo lo que hay en el servidor. Por lo que un comando que sólo tendrás que aprender es LS Dash L. A, que enumera todo en tu servidor. El otro es CD, lo que significa cambiar directorio. Entonces voy a entrar en donde el sitio web está realmente alojado en el servidor y sigamos adelante aquí html público perfecto. Y aquí está la caída se colocará una vez que estemos en el directorio dribble. Sé que fue un largo proceso para llegar aquí, podemos iniciar Teoh, instalar estos módulos. Entonces lo que compositor proporcionará que el otro método no lo hizo es que no solo instalará el módulo que estás buscando instalar, sino que también saldrá y encontrará cada dependencia que se requiera e instalará eso también. Entonces para ilustrar lo útil que es eso. Si volviéramos a este ejemplo de auto camino, lo que tendríamos que hacer es recordar que hicimos clic derecho en tar copy link address e
instalarlo de esa manera. ¿ Verdad? Entonces lo que tendríamos que hacer es entonces ir a token, click
derecho a la guitarra alta, copiar esa dirección de enlace e instalar, y tendríamos que volver entonces tendríamos que encontrar herramientas C click derecho copia tar, dirección de
enlace e instalar. Pero con compositor, lo que simplemente literalmente dio es escribir este comando. Entonces esta, um, sección del euro es cómo se accede al módulo. Por lo que cada módulo de aporte se ubicará en slash proyecto slash sea cual sea el nombre. Está bien. Entonces voy a copiar Path auto aquí y hot back sobre el tipo de terminal en compositor requieren dibujados gente slash cualquiera que sea ese nombre y pegue Enter. Tomará un segundo, sobre todo si estás en hosting compartido. Y se puede ver lo que hacen los compositores es salir a dribble dot org Es conseguir las dependencias. Es asegurarse de que todo en los servidores. Correcto. Y luego eventualmente irá a descargar el abrigo para que puedas ver, aparecer descargado, token y ver herramientas. Perfecto. Y cuando eso haya dejado de correr, deberíamos poder volver a subir a caer. Todos van a nuestra sección de módulos, extienden Ah, recargar. Y si vamos por Teoh path auto, Ahí está. A ver, ahora podemos comprobarlo. Entonces si solo revisáramos eso y hacemos clic en instalar, lo que creo que pasa es droop Will dice, Hey, debes en talk C herramientas y token. ¿ Te gustaría que hiciéramos eso por ti? Por supuesto. Gracias. Y ahí se puede ver que se han habilitado tres módulos. Entonces hay caos. Herramientas instaladas y habilitadas. Muy bien, entonces así es como instalamos los módulos. Lo que tenemos que hacer a continuación es solo para este tutorial. Asegúrate de tener instalados los otros dos módulos que necesitamos. No necesitamos un pueblo de módulos, lo cual es genial. Entonces te voy a mostrar otro truco del oficio, y esa es una forma de encadenar instalar módulos. Entonces si lo hacemos compositor requerimos veraz el nombre de este siguiente módulo que necesitamos, que es justo así que pasa a ser bootstraps, célula de cuidado
simple. Y entonces podemos encadenar eso para que instalemos sin importar cuántos módulos necesitemos a la vez. Entonces, esencialmente, lo que estamos haciendo aquí es decir Ok, sabemos qué módulos necesitamos para este proyecto. Vamos a instalarlo ahora mismo. Sal del camino, y entonces ya no tendremos que hacer eso. ¿ Verdad? Por lo que vamos a instalar este sencillo carrusel, que estará en otro video, y también vamos a instalar un filtro de módulos, que nos permite obtener un resumen de nuestros módulos un poco mejor. Entonces hagámoslo bien. Y lo que pasa es que se puede ver aquí se va a salir y buscar ambos de estos módulos y hacer exactamente el mismo proceso que acabamos de pasar. Insultará todas las dependencias requeridas para este bootstrap, sencillo carrusel así como este filtro de módulo. Y si volvemos aquí, refresca. Comprobemos filtro de módulo. Y vamos a revisar también. Uh, vamos a escribir en bootstrap cuidado simple, así que asegúrate de que esté comprobado e instalar escuela. No tenían dependencias. Y ahora se puede ver aquí. Hemos limpiado esta ventana de módulo con el módulo de filtro de módulos, y esto simplemente nos ayuda a organizarnos mejor. Entonces si estamos buscando un módulo que tengamos, pero digamos que no queremos más, simplemente
podemos empezar a filtrar eso hacia abajo. Muy bien, muchas gracias por quedarse conmigo durante este video. Es sólo una de esas cosas arriba en droop. Todo lo que tenemos que configurar una vez y luego estamos bien, así que espero que tengan una mejor comprensión de cómo funciona el sistema de módulos y espero que entiendan los dos métodos que he proporcionado para la instalación. Gracias. Y te veré en el siguiente video.
6. Construir las páginas de contenido de contenido: con la parte más complicada de este curso fuera del camino, ahora por fin
podemos empezar a construir la cafetería Vegan de Elaine. En este video, repasaremos brevemente cuál es el sistema de tipos de contenido en Drew pool, y usaremos el tipo de contenido de página para construir las cuatro páginas básicas. Entonces pasemos a la barra de administración y pasemos el rato sobre el contenido. Se puede ver que en droop permitir. Tienes una opción aquí para agregar dos tipos diferentes de contenido. Un artículo y una página básica. Ambas opciones son tipos de contenido. Los tipos de constantes se pueden encontrar bien bajo los tipos de contenido de estructura. Vamos a dar click en eso. Aquí puedes ver una descripción para ambos tipos de contenido que se retiró el envío. Gente que puedes ver aquí, dice
que se usan páginas básicas para contenido de Sadiq, como una página sobre Estados Unidos, y un artículo sería usado para algo así como una página de noticias o un comunicado de prensa. Por ahora, sólo
vamos a Teoh hacer contenido desde el tipo básico de contenido de página. No obstante, habrá otro video en este curso donde realmente creamos un tipo de contenido personalizado. Entonces si solo hacemos clic en el botón de contenido, obtienes una visión general de todo el contenido que hay en la página web. Ya que no tenemos ningún contenido, esto obviamente no es contenido disponible, Así que sigamos adelante y creemos nuestra primera página básica. Podemos hacer eso de un par de maneras, pero una de las cuales es yendo a la página de contenido real en la que estamos haciendo clic en este botón de agregar contenido. Otra forma es utilizar la barra de administración, que estaban familiarizados En este punto, prefiero hacerlo de esta manera para repasar contenido, cursor, agregar contenido y página básica. A partir de aquí, se
nos presentan dos campos que podemos utilizar para construir páginas Web básicas. Se trata de páginas estáticas, significa que lo único que está contenido dentro de la página es texto o imágenes, incluso video, cualquier cosa que pudiera estar incrustada en una página Web básica. Entonces hagamos que la primera página se contacte con nosotros, y en realidad vamos a dejar el cuerpo de la página en blanco por ahora mismo. Perfecto. Entonces una cosa que si estás siguiendo, puede que
te hayas dado cuenta, es que esta página de contacto US se encuentra en el nodo barra barra barra barra barra uno. Bueno, lo que queremos dio para motores de búsqueda para S CEO es que esto sea contactarnos así. Entonces en este momento dice una página no encontrada porque no hemos configurado path auto, No
hemos configurado alias ahora. Path Auto, si recuerdas del último video, es un módulo que instalamos. Entonces sigamos adelante y configuremos eso antes de empezar a hacer el resto de estas páginas básicas. Entonces bajo configuración, bajemos a la búsqueda y metadatos y luego seleccionemos alias u R L de aquí. Pasemos al enlace del menú de patrones, y definamos un patrón que queremos que sigan todas nuestras páginas básicas. Entonces lo haremos. Agregar ruta Auto patrón y para el tipo de patrón seleccionará el contenido. Y para este campo, vamos a navegar. Los tokens disponibles iban a hacer uso del sistema de tokens Droop ALS, lo que nos permite hacer nuestro sitio un poco más dinámico. Entonces, bajo tokens disponibles, vamos a Node, luego aquí abajo, sólo
tenemos que configurar esto una vez, por cierto, lo que puede que no sea
tan complicado como parece Bajo aquí. Seleccionemos título de nodo Y lo que es esto si recuerdas de cuando hicimos esa
página de contacto , había un título de página. Bueno, cuando agregas contenido usando cualquier tipo de contenido, esa pieza de contenido que acabas de crear se llama nota. Entonces lo que esto está diciendo es para el nodo actual, que, si estamos usando el mismo ejemplo, sería la página de contacto. Esa sería la nota. El título para ese nodo sería contactarnos. Esperanza eso tiene sentido. Y eso es realmente todo lo que necesitamos. Entonces lo que estamos diciendo aquí es en lugar de hacer el camino el número de barra inclinada del nodo euro b , hagamos de la B oral el título. De acuerdo, entonces vamos a seleccionar página básica y vamos a nombrar la página. Perfecto. De acuerdo, Ahora, si vuelves al contenido y echa un vistazo a este contáctanos, verás aquí arriba que este alias aún no se ha cambiado. Entonces lo que tendrá que hacer es volver al contenido, seleccionar esto de la tabla y bajo acciones. Vamos a actualizar tu alias URL y aplicado a los elementos seleccionados. Está bien. Y se puede ver aquí un alias se ha aplicado. Bajen a contactarnos y no está ahí. Entonces lo que necesitamos dio es vaciar el efectivo. Entonces ahora si volvemos al contenido y luego seleccionamos contáctanos, puedes ver que ese alias el euro ahora está configurado para ser el título de la página. Perfecto. Entonces sigamos adelante y construyamos la página sobre nosotros. Entonces vayamos al contenido. Agregar contenido. Página básica, y haremos el título de esta página sobre. Y si miras las notas del show, tengo una carpeta ZIP que tiene todo el contenido del sitio web de prueba. Si quieres seguir pieza por pieza, así que solo voy a seguir adelante y pegar y el contenido k genial. Dejemos eso fuera y aquí vamos por las páginas allá. Todo bien ahora ¿y si quisiéramos añadir una imagen a esta página? Adelante y en ello y sólo haremos un salto de línea ahí. Y en este editor de pelucas de Wiz e, tenemos una opción para agregar una imagen. Entonces vamos a hacer clic en eso, y desde aquí podemos elegir un archivo de nuestra máquina local y hagamos que el todo texto de la gente comiendo en la mesa del comedor y guardemos eso perfecto. Entonces ahora lo que podemos hacer aquí es hacer doble clic en esto una vez más y ajustarlo Así fue es una línea a la derecha. Perfecto. Y vamos a guardar esto y ver cómo se ve bien eso. Y déjenme añadirla esta una vez más. Tengo que juguetear con ello. Lo siento. Bueno, déjame ponerlo junto a eso. Y ahí vamos. OK, ahora veamos si eso se ve un poco mejor. Eso va a funcionar. No es una obra para ahora mismo. De acuerdo, así que ahí está la página sobre. Por lo que hemos hecho la página de contacto. Ya hemos hecho la página sobre. Ahora vamos a crear el menú. Entonces una vez más, contenido página básica y llamemos a este menú. Y realmente lo que una vez aquí es crear una tabla de elementos de menú, pero realmente no hay una opción para nosotros. Teoh crea aquí una tabla, así que lo que podemos hacer es bajar a este formato de texto, seleccionar opción, y vamos a hacer clic en eso y seleccionar HTML completo. Lo que eso va a hacer es abrir aquí algunas opciones adicionales para que las utilicemos y una de las cuales simplemente resulta ser esta mesa. Entonces, antes de crear la tabla, agreguemos algunos encabezamientos. Cuál es el tipo de comida para el primer rubro. Y vamos a destacar eso y que sea un H dos. Puedes seleccionar formatos de esta opción dentro de la peluca sibilante. Está bien, y vamos a dar otro descanso y vamos a teclear bebidas. Selecciona eso y haz que sea una edad para perfeccionar. Ahora, en medio de la comida y las bebidas. Hagamos la tabla, así que asegúrate de que tu cursor esté entre cada encabezado y selecciona la opción de tabla. Estaremos haciendo una tabla de cinco filas con encabezados de tres columnas en la primera fila. Vamos a noquear el tamaño de la frontera, y vamos a quitar el ancho y vamos a hacer la comida sumaria y golpear OK, ahora vamos a bajarlo. Uno más debajo de las bebidas y hagamos exactamente lo mismo. Hagamos cinco filas, tres columnas, encabezados en la primera fila y derriquemos el tamaño del borde hacia abajo, no el látigo hacia abajo. Y hagamos este resumen bebidas. Y así tengo todo el contenido que necesitarás para llenar estas tablas en las
notas del show . Vamos en realidad a pasar por los encabezados Primero hará artículo, descripción y costo para los encabezados. Y luego lo repetiremos aquí abajo, descripción
del artículo y costo. Y sigamos adelante y hagamos uno juntos. Hagamos silla de avena Chai durante la noche. Quién quiere algo compartir avena y vamos a hacer vamos a hacer la descripción sólo va a ritmo que en. Y el costo es de $5 fuera comida Oh, comida. Ah, atrevimos esto con fines de estilismo y vamos a cursiva eso y ya terminamos. De acuerdo, así que voy a seguir adelante y llenar el resto de estos usando el contenido proporcionado, y luego me uniré a ustedes de nuevo, y haré lo mismo por las bebidas. Está bien, tengo todo el contenido agregado, y solo por ejemplo, copiamos la mesa de alimentos abajo debajo de las bebidas solo con fines estilísticos. Entonces, vamos a ahorrar esto y ¿qué pasa? Nuestra mesa realmente no se parece a una mesa. Aquí no hay estilo disponible, y definitivamente no quisiéramos que esto representara nuestro menú si estuviéramos construyendo un
sitio moderno para alguien. Bueno, la razón por la que esto es así es porque tenemos Bootstrapped four instalado como nuestro tema, pero no hemos agregado ninguna clase bootstrap clases CSS para que esto parezca bootstrap para que se vea mejor. Entonces vamos a seguir adelante y pasar por cómo podemos hacer eso. Así que vamos a ir a Google aquí y teclear bootstrap para y se te presentará esta página de
introducción. Por lo que bootstrap es uno de mis favoritos, si no mi frontal y frameworks favoritos. Hace que esta tarea de construir un sitio web moderno sea mucho más fácil. Y la buena noticia es que no tenemos que hacer nada de este material introductorio porque
ya está instalado desde que instalamos nuestro bootstrap four theme. Entonces lo que podemos dio es bajar al contenido. Echemos un vistazo a las opciones de las mesas, y puedes ver aquí de inmediato. Um, hay algunos ejemplos de cómo tablas en bootstrap para nuestro estilo Bueno, parece que todo lo que necesitamos hacer es agregar la tabla de clases. Si queremos que Teoh limpie nuestra mesa. Entonces vamos a copiar literalmente que este es el primer ejemplo. Y no sólo te muestran cómo es el ejemplo, sino que te proporcionan el código en bruto que hay debajo. Entonces si solo copiamos esa clase de mesa y volvemos a casa de Elaine. Vamos a dar click en ello. Y lo que vamos a hacer aquí es ensuciarse un poco las manos. Mira bajo el capó y haz clic en fuente. Este es el HTML que se representa en tu contenido a medida que lo construyes dentro. Este era el bloque de pelucas. Entonces lo que podemos hacer aquí es sólo ver esta tabla etiqueta html y literalmente antes de lo que podemos hacer es justo justo antes del signo mayor que. Podemos simplemente pegar en esa clase que copiamos y vamos a desplazarnos hacia abajo por este código hasta que encontremos la otra opción. Y también peguemos mesa ahí mientras estamos aquí. Hagamos las bebidas sumarias y solo desmarquemos fuente Perfecta. Ahora lo que podemos hacer es bajar y golpear guardar, y ahí vamos. Se puede ver que ahora tenemos una mesa real, pero hay una cosa más que me gustaría hacer. Me gustaría agregar un borde aquí para sólo una especie de ayuda separar visualmente el menú. Así que volvamos sobre Teoh Bootstrap, y sólo vamos a desplazarnos hacia abajo. Podrías lograrlo. Ah, el tema oscuro, si quieres y vamos a desplazarnos hacia abajo hasta que encontremos mesas. Fila de mesa, Lo siento, su frontera. Está bien. Y aquí está la opción para mesa bordeado. Seleccionemos eso y volvamos a Andrew de Elaine. Gente golpea, edita y bajo fuente. Tomemos mesa Borde que acabamos de copiar y pegarla en la clase. Por lo que sólo vamos a abordar una clase extra en esta declaración aquí. Y entonces vamos a guardarlo. Y ahí vamos, bien, Y hay una página más que vamos a construir para este video. Vamos a seguir adelante y construir la página de recetas para que sigamos adelante una vez más bajo contenido, agregar contenido y página básica. Serás un experto en esto cuando hayamos terminado. Solo hagamos el título de estas recetas, y en realidad vamos a dejar esto en blanco por ahora mismo, y vamos a llenar esta página de recetas y hacerla dinámica en otro video. Por lo que concluye este video sobre hacer las páginas de contenido básico. En el siguiente video, vamos a repasar la estructura del menú y dibujamos a la gente. Vamos a sumar todas estas páginas que acabamos de hacer al menú, y vamos a noquear esta opción de búsqueda porque no la necesitamos para este proyecto.
7. Crear el menú de navegación y el significado de los bloqueos: Hola a todos. Bienvenido de nuevo en este video, vamos a construir sobre el trabajo que hicimos en el video anterior cuando compilamos nuestras páginas estáticas del sitio. Ahora vamos a agregar esas páginas al sistema de menú ALS Droop y empezar a construir aquí la
navegación real . Entonces, Andrew Pool, tenemos algunas opciones para configurar nuestros menús. Podemos, en realidad, sólo desde cualquier lugar del sitio donde hay el menú, realidad
podemos simplemente hacer click en el menú. Están usando esta pequeña punta de herramienta de lápiz. Pero para los propósitos de este video, creo,
Bueno, Bueno, en realidad, sólo baja a la opción de menús. Entonces si pasas el cursor sobre la estructura y
haces clic en los menús aquí, verás una lista de todos los menús del sitio, y eso incluye también los menús administrativos. Entonces aquí arriba y aquí. Por lo que no sólo y el menú de la cuenta de usuario. Entonces en droop will, no sólo puedes personalizar el menú frontal el menú
con el que tus usuarios interactuarán , sino que también puedes crear aquí una experiencia de administración personalizada editando los menús de administración . Pero para este video, nos vamos a apegar a la navegación principal y Como puedes ver aquí en esta descripción,
este es el enlace de la sección del sitio. Entonces sigamos adelante y pinchemos en el menú. Y esto es exactamente lo que deberíamos esperar ver. Solo hay un enlace de menú, y si solo abrimos una nueva pestaña aquí y echamos un vistazo a esta página principal, puedes ver que tenemos este HomeLink. Entonces ahora sigamos adelante y sumamos todos los enlaces que hemos hecho hasta ahora. El primer enlace que agregará es este enlace de menú y para el Campo de Enlace. que ya hemos creado las páginas, debilita literalmente, solo busca el menú y selecciónalo. Y digamos eso fuera. Vayamos a Navegación Principal otra vez y está en otro enlace. Esta vez añadiremos recetas y la encontraremos en la lista. Guárdalo. Repita el proceso. Y, como en otro enlace, el tiempo hará para guardarlo y luego en él menú y un enlace más. Es contacto y seguro. Muy bien, Y vamos a asegurarnos de que todo esto esté situado correctamente. A mí me gustaría que el menú a casa venga primero, seguido de las recetas de menú sobre y contacto que vamos para que puedas ver cómo hice eso Ahí. Es sólo una simple gota de dragón. Entonces vamos a guardar ese orden de enlace. Echa un vistazo a la página principal y mira lo que hemos hecho aquí. Está bien, genial. Entonces eso ya se ve mejor, y se puede ver se puede dar clic a través de las páginas y se ve bastante bien hasta ahora. Por lo que esos fueron los únicos enlaces que sostendrá la navegación principal para este proyecto. No obstante, lo que repasaremos a continuación es el sistema Drew Pols Block. Entonces para este sitio, no
es necesario tener aquí esta búsqueda y las opciones de mi cuenta. Entonces vamos a ver cómo podemos deshacernos de esto en problemas. El principal caso de uso para bloques serían elementos de sitio reutilizables. Entonces, por ejemplo, este bloque de búsqueda aquí podríamos tomar esto y duplicarlo y ponerlo en el Pie de página. Y ese es realmente tipo de propósito de los bloques. Echemos un vistazo a las opciones de bloque reales bajo estructura, así que bajo estructura, solo pasa el cursor al diseño de bloques y haz clic en eso aquí podemos por primera vez en este curso, ver la característica de la región. La gente de Andrew va a repasar eso más cuando empecemos a tema de la página web, pero básicamente este tema se rompe en diferentes regiones donde podemos colocar bloques. Podemos ver aquí en la región de navegación adicional que el menú de la cuenta de usuario así como el formulario de búsqueda se colocan en esa región. Entonces como no queremos los de la navegación, simplemente lo
vamos a deshabilitar. Entonces si vamos por aquí al lado para configurar, haga clic en la flecha y seleccione esta capaz, puede ver que se han actualizado los ajustes de bloque y vamos a bajar el
menú de cuenta de usuario de Teoh también y deshabilitar ese Perfecto. Ahora vamos a guardarlo y vámonos a casa. Y ahora se ha ido. Ahora, en otro video, alinearemos este menú a la derecha para que no tengamos tanto espacio en blanco aquí. Pero por ahora mismo, creo que esto es exactamente lo que necesitamos. Hay un bloque más que vamos a desactivar, sin embargo, para este curso, no
queremos las migas de pan, así que sigamos adelante y desactivamos eso también. Bajo diseño de bloques, bajemos a pan rallado aquí y deshabilitemos Perfect. De acuerdo, eso concluye este video introductorio en el sistema de menús y bloques y Rupel. Te veremos en el siguiente video, donde empezaremos a escribir algún código CSS y construir el tipo de logotipo de Elaine.
8. CSS, logotipo, tipografía: Hola a todos. Bienvenido a este video. Estoy muy emocionado de meterme en este. Estaremos haciendo mi parte favorita de diseñar para la Web, y eso es tipografía. Por lo que en este video estaremos agregando nuestras dos tipografías de Google. Las fuentes entrarán en el archivo CSS y establecerán la tipografía de línea base para el sitio, y les mostraré cómo agregar el logotipo que se proporcionó en los archivos del curso. Entonces entrémonos en ello. Está bien. Así que vamos a ir a Google aquí y escribir las fuentes de Google. Por lo que Google ha hecho un increíble trabajo de llevar la tipografía a la Web. Este servicio es completamente gratuito y ofrece una serie de opciones para incluir fuentes modernas en un sitio web. Las dos fuentes que estarán utilizando para este curso son las mejores no s y Monta Sarit. Entonces vamos a llegar mes a Sarah estará usando esto como nuestra principal nuestra tipografía de línea base para el sitio, y se puede ver que es una fuente realmente bonita sans serif. Entonces para hacer esto, pasemos a la parte superior derecha de esta página y simplemente seleccionamos Seleccionar esta fuente y puedes ver aquí abajo se ha añadido. Y volvamos a las fuentes de Google y añadamos nuestro Bevis. No, como de nuevo, una fuente San Serif realmente bonita estará usando esto para el tipo de logotipo. Entonces vamos a seleccionar este. Y ahora puedes ver aquí tenemos ambas fuentes seleccionadas y Google te da dos opciones para importar las fuentes. Bastante cool. Nosotros sí, sin embargo, tenemos una cosa más a Dio. Seleccionemos personalizar. Y para Monta Sarah
, vamos a hacer semi audaz y audaz. Esto afectará el tiempo de carga de tu sitio porque solo estamos agregando unas cuantas opciones aquí. Y debido a que nuestro sitio es relativamente pequeño, lo hará. No se debe interponer en el camino de nosotros agregando estas dos fuentes Perfecta. Entonces volvamos a y mal aquí. Y dejemos esto aquí por ahora y pasemos al código V s. Entonces en un video anterior, bien te mostró cómo descargar el código V s. Entonces si estás siguiendo, adelante y salta al código V s y usando la extensión sftp para el código Bs, nos bloquearemos en el servidor. Ya configuré mis credenciales y bajemos a los temas. Puedes teclear esto o bajar en temas selectos. Y vamos a Bootstrap. ¿ De acuerdo? Y ahora estamos en el tema bootstrap. Y para este curso, simplemente
trabajaremos dentro del archivo CSS de estilo dot, que se encuentra si volvemos dentro del directorio Temas, se encuentra en el directorio CSS bajo Styled at CSS. Ahora, la
mejor práctica sería romper el trabajo que estamos haciendo aquí en su
archivo CSS separado . Pero sólo estaremos haciendo algunos cambios en el C S s. así que para los efectos de este curso, es completamente fino trabajo del dedo del pie dentro de este estilo predeterminado ese archivo CSS. Entonces volvamos a Google. Y el primer paso que habrá que hacer para importar estas nuevas familias de fuentes es seleccionar realmente en la importación. Y puedes ignorar las etiquetas de estilo aquí y simplemente copiar todo debajo de las
etiquetas de estilo o dentro de las etiquetas de estilo. Entonces vamos a copiar eso y volvamos al código de estudio visual, hagamos algunos saltos de línea aquí y en la parte superior antes de la ruta. Vamos a asegurarnos de que estamos importando nuestras nuevas fuentes de ghoul te pegas guardar. Y si has configurado el código V s con la extensión sftp, tendrás subida en guardar. Entonces si nota en la esquina inferior izquierda aquí si golpeo Save, eso en realidad es subir archivos al servidor. Entonces es bastante potente, bien, y podemos probar que nuestra importación está funcionando. Si nos desplazamos hacia abajo y ajustamos los encabezados a sus nuevos estilos, vamos a hacer todos los encabezamientos Monta Sterett. Pero los atreviremos, y pondremos todos los estilos de párrafo a Montazeri también. Pero no los vamos a mantener atrevidos. Y así les mostraré cómo vamos a hacer esto. Entonces volvamos a Google y encontremos aquí nuestra declaración de familia de fuentes. Y vamos a copiar el Monta Sarah. Es uno. Perdón si no digo eso derecho de ir a una nueva línea y simplemente pegar eso ahora. Ya que también estamos haciendo encabezamientos, sumemos peso frontal y hazlo 600 y vamos a ahorrar eso. Se debe subir. Hace calor volver aquí y refrescar Bueno, nada ha cambiado, y la razón de Eso es porque en Drew Pool, cuando hacemos cambios al estilo que CSS o a un archivo de plantilla, tenemos que vaciar el dinero en efectivo. Por lo que la forma más fácil de hacer esto si no estás trabajando desde la línea de comandos, es simplemente pasar el cursor sobre la caída. Se icono y haga clic en vaciar todas las capturas. Entonces si todo va bien, nuestro rumbo debería fijarse dos meses. Sarah. Ahí vamos. Muy bien. Por lo que funcionó nuestra importación. Y si saltamos un poco a un lado, se
puede ver que estos también han cambiado. Y lo que haremos a continuación también es establecer todo el estilo de fuente del sitio. Dos. Monta Sarah. Es así que subamos. Pero desplácese un poco hacia arriba. Empezamos con H uno. Desplazemos hacia arriba y vayamos al cuerpo la declaración del cuerpo aquí. Y en realidad sólo hagamos una nueva línea. Y peguemos en ese aire monstruo. Su declaración una vez más. Golpea a guardar, y luego volvamos a vaciar el efectivo. Perfecto. Por lo que ahora puedes ver estos menús se han actualizado y creo que la tipografía ya se ve mejor, y me di cuenta en esta página que los alimentos y las bebidas no se doblan a 600 pies. Espera. Yo sólo podría decir aquí que esto no es lo que seleccionamos por aquí y las fuentes de Google de nosotros, ¿sabes? Mira la página de Monta. Sara, Podemos ver que A un 600. Disculpe. A 600 es en realidad mucha frontera de lo que es esto. De acuerdo, Entonces si volvamos al código V s Y si te acuerdas, pongo los encabezados. ¿ Dónde estamos? Escuchar los encabezados a fuente Espere 600. Pero si inspecciono este elemento aquí, se
puede ver que nuestra declaración de peso de fuente 600 está siendo anulada en realidad por una declaración que se hizo más adelante en el archivo CSS. Entonces, por ejemplo, si simplemente desmarcáramos esta fuente Esperar, podemos ver eso. Ahora estamos en 600. Entonces sigamos adelante y limpiemos eso Un oleaje. Hace calor volver a pasar al código V s. Y lo que en realidad voy a dio ya he copiado que es buscar pesos de fuente. 500. Y sigamos adelante y comentemos eso fuera. Eso se puede hacer en una Mac usando código V s. Asegúrate de que estás en el al final de la línea y hacer comando hacia adelante slash y eso lo
comentará. Guardemos eso. Volver al sitio. Y si todo funciona, esto aún debe ser audaz. Id perfecto. Entonces vamos a hacer,
ah, ah, actualización
del sitio. Y ahora nuestros encabezamientos son Bolden. Entonces eso es genial. De acuerdo, entonces hemos dado el primer paso hacia la limpieza de la tipografía de nuestro sitio. Hemos establecido los estilos de línea base usando nuestra hoja de estilos CSS. Ahora empecemos a construir este tipo de logotipo. De acuerdo, Así que primero, vamos a quitar el icono de bootstrap. Para ello, vamos a ir bajo apariencia y hacer clic en apariencia. Bajemos a la crema bootstrap y seleccionemos ajustes debajo de la configuración. Desmarquemos usar logo suministrado por tema, y subamos la imagen del logo que se incluyó en los archivos del sitio con este curso. Y vamos. Una vez que hemos agregado, Vamos a bajar y hacer clic en guardar configuración y vamos a vaciar el efectivo para buenas medidas. Perfecto. Ahora volvamos a casa y podemos ver que nuestro logo ha sido cambiado. Pero es demasiado grande. Muy bien,
entonces, ¿cómo podemos arreglar eso? Bueno, una cosa que yo Dio es mucho diseñar dentro del navegador. Llevo mucho tiempo escribiendo CSS, así que esto me viene natural. Pero es una habilidad que cualquiera puede aprender, y es una habilidad que es increíblemente poderosa Si te estás metiendo en un diseño Web,
especialmente el diseño Web basado en Drew Peled, porque la marca de front-end dentro de Drew pool está tan agrupada honestamente, tan a menudo hay que cavar realmente desde la ventana Inspect. Entonces, solo averigüemos cómo solucionar esto. Vamos a la derecha, haga clic en Inspeccionar, y aquí tenemos nuestras herramientas de Dev. Nos familiarizamos un poco con eso hace un minuto, y podemos ver aquí que en realidad lo ha bajado y normalmente no lo hace. Pero pongámoslo aquí abajo para que podamos ver que el tamaño de la imagen está establecido en 100% pero
en realidad nos gustaría que eso fuera más pequeño. Entonces hagamos que el ancho 35 pixels y eso se vea bastante bien, ¿
verdad? Eso es lo que queremos que suceda. Entonces les mostraré cómo podemos agregar rápidamente eso a nuestro estilo, ese CSS Copiemos esta declaración dentro de las Herramientas de desarrollo, y es copiar eso y saltar al código V S. Ahora lo que vamos a hacer aquí es desplazarnos hasta la parte inferior, y comenzaremos a construir nuestros estilos de sitio personalizados. Entonces, solo hagamos esto llamado estilos personalizados y solo para peinar dentro del
documento real . Hagámoslo así. Si alguien más se hace cargo del sitio, sabe a dónde acudir. Por lo que estos son estilos personalizados. Y vamos a ritmo que en soporte de corchete rizado abierto y cerrar soporte rizado. Y lo que vamos a dio es establecer el ancho en 35 píxeles, al igual que hicimos dentro de las herramientas de desarrollador. Y lo que también me gustaría hacer es agregar una sección dentro de nuestro documento aquí que se llama Logo, porque estaremos haciendo algunos cambios adicionales. Entonces ahora sabemos dónde está el logo, y solo hagamos unos descansos, guardemos eso y saltemos de nuevo al cromo, vaciemos el dinero en efectivo. Perfecto. Entonces ahora se puede ver si éramos logo fresco se ha actualizado, y eso se ve mucho mejor ahora si nos quedamos aquí en las Herramientas de Dev, sí
queremos que Teoh arregle esta tipografía aquí, y queremos hacer queremos convertir esto en un tipo de logotipo, Entonces hagámoslo primero comenzando en las herramientas de desarrollador. Y vamos a quedarnos donde estamos Aquí. Haga clic en el nombre del sitio de clase span. Aquí es donde se está poniendo todo para que pudiéramos hacer el estilo de los elementos aquí. O simplemente podríamos golpear la opción más para agregar una nueva regla. Y se puede ver que se agrega cromo. Nuestra declaración para nosotros. Por lo que esto es span la etiqueta HTML Span y la clase CSS que se ha aplicado Nombre del sitio. Eso se puede ver aquí. Cambiemos esto para que en realidad volvamos a las fuentes y cajas de Google. ¿ Cómo agregamos esta familia Bevis Nu EZ Font? Vamos a copiar. Eso estuvo caliente de vuelta por aquí y pega eso en Así puedes ver que se ve realmente genial. Bevis New s es una gran tipografía para tipos de logotipos, pero en realidad es un poco demasiado pequeño. Aún así, siento que me gustaría Teoh arriba eso un poco, Así que empecemos a empezar algo de estilo aquí en el navegador. Entonces voy a hacer este tamaño de fuente a Ram. Lo mejor es usar Ram, y luego creo que me gusta ese tamaño, pero en realidad no es centrar verticalmente. Entonces vamos a hacer en realidad sólo margen superior. Hagamos dos píxeles solo para ver cómo es eso. Y en realidad voy a resaltar los dos que hay si puedes ver eso abajo en las herramientas de profundidad y usar la flecha arriba para ajustar. Y en realidad eso me gusta más, creo que cinco, tal vez cuatro Margen top cuatro. Vamos a ver, aquí este es el matiz de qué desarrollo Hagámoslo realmente para y pongamos el color para preservar su cero creo que ya está pero bien, en realidad
podemos simplemente sacar eso. Sí, eso se ve bien. Me siento especialmente una vez que tomamos esto y nos movemos a la derecha. De acuerdo, eso va a funcionar. Hagamos eso. Entonces voy a copiar vía esto. En realidad, lo que podemos hacer es simplemente copiar toda esta declaración. Está caliente volver a pasar al código V s y bajo nuestra sección de logotipos, vamos a ritmo que en condole Come que ahorre. Y eso ha subido. Volvamos a cromo Lavar el dinero en efectivo. Todo va bien. Eso debería ser bueno. Está bien, genial. Por lo que concluye este video. Hemos hecho un excelente trabajo al crear nuestro logotipo aquí, y también hemos establecido algunos estilos de línea base que se ven mucho mejor. En mi opinión. En el siguiente video, comenzaremos a temática estas páginas. Por lo que estas páginas de contenido comenzarán a mirar eso e ir un poco más profundo bajo el capó de nuestro sitio web. Eso ya lo veré.
9. Temía el tipo de contenido de la página: Bienvenido de nuevo en este video, comenzaremos a construir el archivo de plantilla de la ramita de punto html de la página. También limpiaremos esta navegación para que los enlaces estén alineados al lado derecho de la navegación. Empecemos. Por lo que partiendo hasta ahora, creo que estas páginas aire vienen bastante bien. Pero si lo acabáramos aquí mismo, probablemente no lo suficiente para estar atrayendo a los clientes ficticios de Teoh Elaine aquí. Entonces lo que planeo hacer al respecto es agregar una opción para que el editor del sitio agregue un banner un un banner de
imagen en este sitio sin tener que entrar en el código. ¿ Verdad? Entonces digamos hipotéticamente que Elaine, propietaria de la panadería, le paga a Michael para que actualice el contenido del sitio. Bueno, quisiéramos que Michael tuviera la capacidad de sólo subir la foto Teoh cada página sin tener que codificar, así que te mostraré cómo hacerlo. El modo en que esto se hace es editando el tipo de constante de página. Aprendimos un poco sobre los tipos de contenido en un video anterior, y aprendimos un poco sobre el tipo de contenido de página, pero vamos a bajar, tipos de contenido de
Teoh, página
básica, y vamos a dar click en eso. Por lo que dentro de esta ventana tenemos opciones que podemos establecer para cada página. Y también hay una opción de campos aquí. En este momento, puedes ver en nuestra página tipo de contenido. Solo tenemos un campo de cuerpo, que es lo que hemos estado usando para configurar para pegar en el contenido de cada página. Bueno, sigamos adelante y agreguemos un campo adicional a esta página. Tipos de contenido Así seleccionaremos, agregaremos campo y debajo agregaremos un nuevo campo. Bajaremos Teoh Image y solo llamemos a esta imagen de banner y golpeemos, guardaremos y continuemos desde aquí. Vamos a asegurarnos de que esto está configurado en una configuración de campo guardar y vamos a bajar. Esto es correcto. queremos asegurarnos de que habilitar en todo campo y hacer que todo el campo requerido sean comprobaciones de accesibilidad. Entonces, vamos a dar click. Guarda la configuración perfecta y vamos a ir a administrar la visualización del formulario. Se puede ver que aquí tenemos una serie de cosas. Tenemos el título en la parte superior y la mejor manera que me gusta el show de Teoh. Esto es simplemente agregando una pieza de contenido aquí, Así que abramos esto en una nueva pestaña y veamos lo que sucede cuando hacemos ah página básica para que veas que tenemos un título de cuerpo. Se puede ver nuestra nueva imagen de banner El campo está aquí abajo, pero en realidad quisiéramos que esta imagen de banner se colocara encima del cuerpo para una mejor
experiencia de usuario a la derecha. También tenemos algunas opciones, algunas opciones de sitio. Podríamos hacer un alias de URL personalizado si no quisiéramos usar el que se genera. Y si tuvieras múltiples autores, podrías comprobar en qué autor eres. Entonces volvamos a la página en la que estábamos antes en esta visualización de forma gestionar y se puede ver el título aquí está en la parte superior derecha títulos aquí arriba y tenemos el cuerpo. Aquí está el cuerpo y nuestra imagen de bandera. Estas otras opciones son lo que se ve a la derecha. Y entonces lo que me gusta a Dio es poner cuerpo bajo título. Pero en este caso, pongamos imagen de banner entre título en cuerpo, y me gusta asegurarme de que estas son la última opción seleccionada causa típicamente, no
estarás cambiando estos no siempre el caso, pero ahí está. Entonces una vez que tengamos nuestras opciones
arreglemos, vamos a guardarlo. Y ahora, si volvemos atrás y hacemos contenido, agregamos contenido, página
básica, se
puede ver que esto se ha colocado entre título en cuerpo Perfecto. Muy bien, así que volvamos a casa y vamos a seleccionar menú y voy a seguir adelante y en ello. Aquí puedes ver que la imagen de banner es ahora una opción en nuestras páginas anteriores también. Seguiré adelante y agregaré la imagen de banner que se incluye en los archivos del sitio y me aseguraré que estás poniendo todo el texto para la accesibilidad. Perfecto, ya
sabes, y guárdalo. Y puedes ver aquí que aunque sí establecimos el campo dentro del en su opción para estar por encima del cuerpo por debajo del título, la pantalla sigue estando por debajo del cuerpo. Entonces volvamos a nuestras opciones de tipo de contenido y vamos a seleccionar la página básica um, bajo pantalla. Seleccionemos administrar display, y lo que podemos hacer es en realidad colocar eso por encima del cuerpo y ocultemos el bien de LaBella's , perfecto. Ahora volvamos, abre una nueva pestaña y echa un vistazo al menú que acabamos de ponerlo fresco. Eso es lindo. Pero lo que realmente me gustaría dio es tener esto antes con Así que ahora mismo, estamos trabajando dentro de los confines del contenedor bootstrap. Como puedes ver, todo está alineado dentro de esta ventana de contenedor aquí y una línea al centro de la página. Y eso queremos. Pero para que se vea realmente moderno, queremos que un elemento esté lleno. Eso lo has visto en otras webs y lo puedes ver aquí, ¿
verdad? Este es un lleno con porción del sitio, pero todo el contenido está dentro del contenedor. Bueno, lo que podemos hacer es ir al archivo de plantilla de la ramita de puntos de página html y actualizar eso. Entonces pasemos al código V s. Por lo que estamos en el directorio droop will para llegar a los archivos de plantilla. Vamos a los temas y vamos a bootstrap y luego debajo cuando estés en el
tema bootstrap , lo que querrás hacer es ir a las plantillas y la página así como las plantillas HTML se encuentran bajo diseño, y nosotros seguirá adelante y seleccione la página html. ¿ Ahora qué? Te van a saludar con, inmediato es un montón de común que fuera. Ayude a su texto. Esto es muy útil. Si estás buscando Teoh, sumérgete más profundamente en el desarrollo del triple tema y sigamos desplazándonos un poco por aquí. Entonces justo al bate, no
voy a explicar todo línea por línea. Pero esto es bueno saber lo que estás viendo aquí son variables ramitas. El desarrollador de este tema bootstrapped four ha decidido hacer un uso bastante pesado del sistema
variable ramitas , pero en este punto probablemente te estés preguntando qué es la ramita. Así que echemos un vistazo a Google y solo escribamos ramita HTML. Por lo que twig es un motor de ing plantilla para el lenguaje de programación PHP. Lo que esto hace es que simplifica mucho como bootstrap, igual que s CSS o sass. Simplifica la forma en que eres capaz de construir plantillas dinámicas en PHP para que puedas hacer muchas más cosas con mucho menos código. Tag es un tema extenso, y recomiendo encarecidamente echar un vistazo a algunos videos ya sea en share de habilidad o YouTube. Si te gustaría profundizar en este tema, pero por ahora, volvamos al código V s. Entonces ahora que tenemos un poco de comprensión de lo que es la ramita. Podemos ver que aquí hay alguna variable establecida. Pero si seguimos bajando, te presentará una plantilla o un marco de lo que
es cada tipo de contenido de página individual . Al hacer clic en contenido, agregue página de contenido. Entonces cada vez que haces eso, esto es representativo del código en una sola página y solo para ir un poco más allá, podemos ver aquí. Empecemos a ver esto. Entonces hay cabecera ¿verdad? Tenemos esta etiqueta de cabecera. Y aquí está nuestra primera una región que se ha definido dentro de ramita. Se trata de una región Andrew people page header dot. Pero puedes ver aquí tenemos esta barra de naff. Entonces volvamos a Google y Chrome y puedes ver justo aquí está esta navegación. Y si fuéramos a seguir adelante e inspeccionar este elemento, se
puede ver que tenemos una etiqueta de encabezado con la clase de nab nuestro expandir Large. Correcto. Entonces volvemos a pasar a V s etiqueta de encabezado de código con la clase ahora barra expandir grande. Por lo que la esperanza que tenga sentido anidada bajo el encabezado es esta etiqueta knave con un número de clases y se puede ver aquí tenemos esta etiqueta de knave anidada en este momento. Tengo en un video anterior, y al inicio de este video, les
dije que estaríamos alineando esta parte de la navegación a la derecha. Entonces veamos cómo podemos hacer eso aquí en código V s. Bajemos un poco y hallemos ahora, bar nav, cambiemos este M R Auto a B M L auto. Esa es sólo una clase bootstrap que mágicamente hace que esto funcione bien. Esa es la forma en que lo miro, al
menos. Entonces volvamos a Google chrome y volvamos el dinero en efectivo y todo salió bien que debería estar alineado a la derecha. Perfecto. Está bien. Creo que eso ya se ve mejor, pero sigamos con nuestro trabajo aquí de establecer el banner de página. De acuerdo, entonces lo que tendremos que hacer aquí es que primero echemos un vistazo a la estructura real de la página. Demos click derecho Inspeccionar Una vez más nuestro viejo amigo aquí Dev Window. Para que veas que tenemos este encabezado. Y en esta cabecera tenemos. Si nos fijamos en lo que se destaca arriba en la pantalla, obviamente
tenemos todos los componentes de navegación y dentro de la etiqueta de knave real, tenemos la derecha de navegación para que podamos seguir bajando. Y así es como se estructura eso. Y si seguimos desplazándonos hacia abajo, podemos ver que la etiqueta principal contiene todo en la página menos el pie de página, que está en su propio ataque de pie. Por lo que nuestro objetivo es sacar esta imagen de la sección principal y ponerla entre cabecera y made. Ahora bien, lo que podríamos hacer es definir una región. Pero en realidad lo haremos más adelante si volvemos al código S. Entonces, en realidad sólo vamos. Teoh, revisa este encabezado aquí. Pero tu cursor entre ahí asegúrate de que estás al final de la declaración de encabezado y tecleemos en sección. Vamos a usar una etiqueta de sección para esto. Vamos a darle una clase de banner de página. Y antes de renderizar la imagen de fondo, lo que me gustaría hacer es tener el título de la página colocado delante de la imagen para un bonito efecto visual. Entonces vamos a hacer en H uno aquí. Y vamos a tabular que vamos a darle a esto una clase de encabezado de página y vamos a renderizar el
título de la página . Entonces lo que tenemos que hacer es tomar. Lo que buscamos hacer es tomar este el título de la página. En este caso, es Menu, y queremos que se coloque eso. A ver si puedo hacer esto. Sí, colocada justo en medio de esta imagen, y nos gustaría que esta imagen fuera una imagen de fondo. Entonces empecemos primero poniendo el título en Drew Pilate con el fin de renderizar el título vamos a decir nodo, porque estamos tema ing una página de nodo aquí página punto h t no una ramita, y vamos a hacer que no sea etiqueta de punto, que es justo lo que sucede en Drew Pilate usando ramitas. Así es como obtienes el título. Y así si decimos eso fuera y luego saltamos al cromo y le echamos el efectivo, bueno, deberías ver es sí. Eso es exactamente lo que yo esperaría. Se ven dos títulos porque no sólo es el título original que ponemos en su renderizado, sino que también hemos agregado esta etiqueta de nodo. Entonces, ¿cómo nos deshacemos de éste? Bueno, volvamos de nuevo. Y como me estoy desplazando por aquí, no
veo nada. Bueno, eso se debe a que este título de página es en realidad parte del sistema de bloques por defecto. Andrew Plato. Es una cuadra para que podamos ver eso a Europa y ver Título de la página. Entonces, lo que haremos en realidad es simplemente seguir adelante y desactivar esto. Entonces vamos por debajo de estructura y diseño de bloques. Estamos un poco familiarizados con esto en este punto y aquí bajo título de página, simplemente haga clic en desactivar gran éxito guardar bloques y enrasar para una buena medida. Y luego volvamos a casa y echemos un vistazo al menú. Perfecto. Entonces eso es ahora exactamente lo que esperamos ver. Ahora se elimina un título y ese título predeterminado. Muy bien, sigamos construyendo esta página. Entonces lo que queremos dio es renderizar el camino a la imagen justo en esta etiqueta de sección. Esta definitivamente es probablemente la más compleja, la porción más complicada del video, y es solo porque queríamos lucir bien y queríamos ser dinámicos, así que déjame solo mostrarte el proceso de pensamiento detrás de esto, y creo que eso aclarará algunas cosas. Empecemos por primero solo renderizar para la ruta de la imagen en una P etiquetada de esa manera, sabemos que lo tenemos. Por lo que saltar de nuevo sobre el dedo del pie dibujó a Lo que buscamos hacer es si inspecciono este elemento. Lo que estamos buscando a Dio es como dije, consigue esta ruta real aquí en el archivo de plantilla. Entonces primero, vamos a ir bajo estructura, tipos de
contenido, página
básica y vamos a administrar los campos. Se puede ver que aquí hay un nombre de máquina. Subrayado de campo Imagen de subrayado de Banner. Esto sería lo que parece en la base de datos, por ejemplo. Lo más probable es que así para el tema ing. Esto viene muy bien cuando necesitas hacer referencia a artículos. De acuerdo, así que vamos a copiar eso y vamos por aquí y pegarlo sólo para que lo tengamos, Entonces vamos a administrar la pantalla y en realidad vamos a desactivar esta imagen y golpear. Guardar razón siendo es que no queremos tener este mismo escenario donde teníamos
títulos de cinta duplicados que no queremos tener imágenes duplicadas por lo que realmente desactivaremos eso, y luego volvamos al código V. S. Aquí tenemos nuestro nombre de máquina, y lo que deberíamos poder hacer es corchetes dobles. Tomemos esta imagen de banner de campo, córtala y péguela justo entre ahí. ¿ De acuerdo? Y entonces vamos a hacer un espacio aquí y hacer subrayado de archivo. Eres todo esto es una función auxiliar proporcionada por dribble. Y entonces vamos a cerrar eso, ¿de acuerdo? Y entonces ahora mismo, estamos simplemente No estamos especificando que esto sea un nodo. Por lo que solo necesitamos hacer ninguna imagen de subrayado de banner de guión bajo de campo de punto, y luego tenemos que cerrarla con el archivo de punto de entidad. Tú eres I. Y si esto funciona ah, somos camino a nuestra imagen. Debería estar aquí. Sí, ahí está. Perfecto. Entonces si fuera a copiar eso y luego ir a él, se puede ver que ahí es donde las imágenes reales se enfrían en el servidor. Ahora, aquí es donde se pone un poco complicado. Aquí vamos a hacer un estilo CSS en línea, y en realidad vamos a simplemente renderizar la imagen en línea para cada página. No podemos hacer esto en CSS porque Twig no se extiende a ese lenguaje por lo que
no habría manera de que pudiéramos hacer esta dinámica. Y en realidad solo voy a pegar en algún código CSS que sé que funciona. Entonces si quieres pausar el video y copiar esto en tu fichero de plantilla, te
garantizo que funciona. Pero básicamente lo que estamos haciendo aquí es hacer uso de la
característica de ingrediente lineal de tres años CSS para hacer un efecto visual realmente agradable y transparente. Pero hay una pieza más. Por lo que una vez que tengas esto agregado en tu archivo de plantilla, te darás cuenta. Este año Earl Declaración aquí en CSS pondríamos comenzaríamos a hacer, como imágenes del sitio, camino a la imagen, derecha. Pero de nuevo, ya que queremos que esto sea dinámico, en realidad
vamos a tomar esta cuerda que ponemos y hey, pisó justo dentro. De acuerdo, vamos a ahorrar eso y luego vamos a tirar el efectivo. Impresionante para que veas que la imagen está ahí, así que hemos logrado nuestro objetivo en ese sentido, pero queremos limpiar un poco este menú, así que volvamos con nuestro viejo compinche aquí, el Inspector de Paloma. Y digamos sólo que quiero que este sea Tex Align Center y hagamos el Color blanco. Y luego queremos un poco de relleno, um, para espaciar esto fuera de él. Bajemos eso y no necesitamos relleno, realmente a la izquierda del escritor. Hagamos sólo una habitación para eso. Esto es CSS taquigrafía. Entonces este cuatro es de arriba y abajo, y luego éste es de derecha e izquierda. Entonces vamos así. Siento que seis podrían ser mejores. Eso es lo que queremos que sea nuestro código para el título. Ya tenemos una clase CSS definida para esto. Entonces, ¿qué es en realidad solo copiar este código que hicimos en el navegador? Y volvamos a nuestro estilo ese archivo CSS smika New Line break aquí y llamemos a esta página estilos consistencia. Entonces tengo a la gente y vamos a hacer eso Cool. Y luego el que es doble cheque. Hicimos este encabezado de página de clase, así que llamemos a H un encabezado de página de un punto. Llamémoslo que los corchetes rizados pasaron en el código. Arregla esto y vamos a guardarlo. Tirar el efectivo y aquí estamos. Eso es bastante impresionante, ¿verdad? Entonces ahora qué podemos hacer si nos tomamos algún tiempo aquí,
Teoh, Teoh, Haga clic a través. Podemos ver que esto ya se ve mucho más moderno y honestamente, general mejor. Lo que podemos hacer es comenzar realmente Teoh, agregar las imágenes de banner de la receta y las imágenes de banner para las otras páginas. Entonces voy a seguir adelante y hacer eso y luego unirme a ustedes de nuevo. Genial. Y me he tomado el tiempo aquí para añadir las imágenes. Entonces esto se ve realmente bien hasta ahora. De acuerdo, eso concluye este video. Te veo en la siguiente donde empezaremos a construir las recetas contenido tipo C entonces.
10. Construir el tipo de contenido de las recetas: Hola a todos. Bienvenido de nuevo en este video vamos a crear un contenido personalizado. Tengo recetas. Hasta el momento, hemos estado trabajando con solo un tipo de contenido y ese es el tipo de contenido básico de página que puedes ver aquí mismo. Y como saben, hemos utilizado que Teoh crear thes páginas. Por lo que ahora vamos a construir a partir de nuestro conocimiento del tipo básico de contenido de página y finalmente construir el nuestro propio. Entonces aquí es donde se pone realmente divertido, en mi opinión. Entonces si pasamos a Google y sabes por este punto que me gusta hacer esto
proporcionarte algo de info y tipo en los tipos de contenido de Drew pally, das click en este 1er 1 habrá alguna información que te podría resultar útil si
quieres para profundizar en el tema. Casi todos los temas en Drew pool son extensos, así que solo pude cubrir tanto, pero es algo largo. Y lo más corto de esto es que los tipos de contenido constan de dos elementos una configuración base, que es con lo que te saludan en la primera página y luego los campos. Por lo que vamos a repasar los dos. De acuerdo, entonces para crear nuestro primer tipo de contenido. Esperemos sobre la estructura. Los tipos de contenido tenían tipo de contenido y esta primera página fueron recibidos con. ¿ Es la configuración base como acabamos de leer en el artículo? Entonces aquí es donde estableces algunos comportamientos por defecto. Entonces para este, pongámosle el nombre recetas. Esto será a lo que se refiere cuando vayas al contenido, agregues contenido por lo que podremos agregar un tipo de receta, y vamos a mantener esta en blanco por ahora mismo. Bajo opciones de publicación, vamos a desmarcar promocionado a primera página y mantendremos crear Revisión fue desmarcar mostrar autor y fecha info, y no necesitamos hacer nada aquí en la configuración del menú. Vamos a guardarlo. Genial. Por lo que ahora se nos presenta la opción de campos. Por lo que de forma predeterminada, cualquier nuevo tipo de contenido que hagas tendrá un campo de cuerpo. Si recuerdas de nuestro video anterior, agregamos un campo a la página básica aquí, que era esta imagen de banner, y puedes ver que el campo del cuerpo es este era el título del bloque de peluca desde la línea base. La configuración también es un campo, pero es por defecto. El único campo que se requiere para estar en un tipo de contenido, razón por la
cual no se presenta en esta visualización de campos de gestión. Entonces lo que estaremos haciendo es crear algo similar a las todas las recetas. Receta Page está dentro de nuestro sitio Drew pull, y todo el contenido de prueba se ha tomado de este sitio web de todas las recetas. Para que veas hay un título que en droop sería un campo y bajando. Tenemos una opción de ingredientes, que creo que es realmente agradable, una dirección, sección, algo de nutrición, fax y, por
supuesto, algunos otros campos aquí. Entonces veamos cómo podemos construir algo similar a esto en Drew pool. Volvamos a nuestro sitio y dejaremos el campo de cuerpos en su gran. Entonces el primer campo que vamos a hacer es el campo de direcciones, que en realidad sólo va a ser un bloque de texto formateado. Se llama en direcciones, y dejemos eso a uno aquí y mantengamos todo igual. Eso se ve bien. En realidad sí, mantengamos esa configuración segura y perfecta. De acuerdo, ahora se crea
nuestro campo. A continuación, hagamos un campo de ingredientes, y la idea aquí es volvamos a volver a este sitio web de todas las recetas es dedo del pie tener una lista de ingredientes, así que me gustaría tener, como, el capacidad de agregar múltiples líneas simples. Veamos cómo podemos hacer eso en Drew Pool. Entonces por aquí, vamos a agregar nuevo campo y hacer plano de texto, y llamaremos a esto ingredientes. Y la clave de éste es asegurarse de que el número permitido de valores se establezca en ilimitado. Se guardó la configuración de campo. Todo lo demás se ve justo aquí así que en realidad podemos arrastrar y soltar los de. Eso es exactamente lo que queremos. Y vamos a guardar eso. Perfecto. De acuerdo, y necesitamos agregar un campo de texto más aquí. Hagamos un campo de texto de fax de nutrición. Entonces hagamos de esto un texto formateado largo y llamémoslo datos nutricionales, y limitaremos ese dedo del pie uno K genial que se ve, escribe Guardar la configuración impresionante. Y lo que me gustaría dio es proporcionar una foto así como un enlace a la receta original. Ya que estoy tomando este contenido, me gustaría poder dar atribución al creador aquí a allrecetas. Entonces veamos cómo podemos hacer eso. Entonces es agregar campo y verás bajo general, hay una opción de campo de enlace. Se llama esta receta original, y vamos a limitar ese dedo del pie. Y para esto, vamos a seleccionar realmente enlaces externos solo guarda ajustes. Ahora hay un último campo que vamos a adherir, y es que me gustaría llevar una de estas fotos a nuestro contenido. Entonces vamos a agregar Campo en realidad ya estaban familiarizados con el tipo de campo de imagen. Entonces hagámoslo otra vez. Escribirlo en foto que se vea bien. Y mientras estos aire se activen, vamos a tocar ajustes seguros. Está bien, genial. Entonces hagámoslo contenido. Agrega recetas de contenido y solo echemos un vistazo a cómo ha resultado esto para que veas
que tenemos nuestro título, nuestras direcciones corporales, ingredientes y tantos ingredientes como necesitemos. Datos nutricionales, la receta original y la foto. Entonces hagamos una de estas juntas y solo un recordatorio este contenido está disponible en los archivos del curso. Entonces hagamos desayuno de fresa Robo, Avena, batido de
desayuno. Haremos este saludable y sabroso batido de avena de fresa dentro de opción Teoh agregar proteína para que esto pueda considerarse como la descripción. Y luego vamos a g o Teoh direcciones. Y voy a copiar esto porque nadie quiere verme tipear. Y está bien, vamos a coger eso. Y luego hagamos los ingredientes aquí. Entonces la opción en múltiples campos es realmente agradable y atrajo a la gente, creo que sí. Podemos simplemente seguir agregando estos y luego eventualmente podremos Teoh, ya
sabes, reorganizar el orden que es súper útil, y déjame llenar estos y luego estaré de vuelta en un segundo. OK, tengo todos los ingredientes agregados aquí, y también voy a ir adelante y llenar el fax de nutrición. Perfecciona la receta original. Por lo que realmente pondremos en el Ural a esto todas las recetas aquí y luego pasaremos eso y
haremos que el texto del enlace receta original, que es lo que verá el usuario. Entonces así será el texto y eso se vinculará. Teoh este euro Y por último, vamos a añadir la foto Genial. Y no olvides que todo eres texto perfecto. Y una vez que tengas agregado todo este contenido, sigamos adelante y publicarlo. Enfriar. De acuerdo, eso no se ve mal. Hay algún trabajo de limpieza que tendrá que hacer aquí, pero creo que se hace el trabajo por ahora mismo. Algo que notarás es que cuando creas una nueva receta, este viejo patrón de nodo sigue siendo usado. Entonces vayamos a Path Auto y vayamos por debajo y arreglemos eso. Entonces búsqueda de configuración y metadatos, alias
Ural Pasemos a patrones y agreguemos Path Auto Pattern. Entonces vamos a llamar a este contenido y vamos a hacer esto para que por cada receta nos gustaría
que estuviera en la receta de barra corta el título. Entonces si debilitar navegar estos disponibles no hay tokens de nuevo, vamos a echar un vistazo a esto y vamos a encontrar esto sin título. Entonces esto es decir eso. Y tenemos que revisar esto. Por supuesto, esta es la etiqueta de recetas que recetas y hagamos perfecto el patrón de recetas llamado máquina perfecto . Y así lo que esto está diciendo es que cada uno de los tipos de contenido de la receta cont nodo que agregamos se
ubicará en la receta slash slash slash el título de la receta. Entonces si decimos eso fuera y luego vamos al contenido, seleccionemos la película de desayuno de harina de avena de fresa y bajo acción, actualizaremos la URL Alias lavará el dinero en efectivo. Y si todo ha ido bien, esto ahora debería ubicarse en la receta Fresa. Se desayunará película Niza. Ya sabes que eso se ha hecho. A mí me gusta que la etiqueta de direcciones esté ahí. También me gusta que los ingredientes es su fax de nutrición. No me gusta que la receta original tenga etiqueta y la foto, así que vamos a deshacernos de eso. Podemos hacer eso bajo estructura, contenido, tipos, recetas y luego administrar display. Entonces bajo foto, vamos debajo de la columna de etiqueta. Escondamos eso. También es ocultar recetas originales, y creo que quiero las direcciones de abajo ingredientes. Entonces vamos a subir eso y eso va a funcionar. Creo que eso va a funcionar. Sí. De acuerdo, vamos a guardar eso. Y luego vayamos al contenido. Echemos un vistazo a nuestra película de las altas comidas de fresa. Está bien, eso funciona. A mí me gusta. Entonces qué podrías hacer ahora Si eres como yo en un poco obsesivo con el espaciado, podrías tema de la nota de recetas inspeccionando esto, y luego puedes tema esto con solo CSS. Si te gustaría ir al cuerpo y luego si ves aquí, tenemos recetas de tipo nodo de página, podrías crear una declaración CSS que sea puntos de cuerpo, tipo de nodo de
página. Y entonces se podría decir, Muy bien, cada etiqueta de campo hizo etiqueta outfield. En realidad queremos que eso tenga un margen. Fondo de tres habitaciones, tal vez. Ah, claro, porque es subrayado. Subrayar. Correcto. Y para que puedas Entonces empieza Teoh, limpia el CSS aquí. Entonces, en realidad hagamos eso mientras estamos aquí. Um, vamos a hacer un margen. Arriba de un carnero, ¿verdad? Cero fondo. Hagámoslo dos y luego a la izquierda. Cero. Y es un poco espacioso,diría
yo, diría
yo, pero lo que es en realidad se podría hacer esto todo el día. Honestamente, ¿
Y qué hacer? 0.5 habitacion. De acuerdo, así que creo que ya se ve mejor y qué podríamos hacer en lugar de hacer este margen de almohadilla , podríamos hacer relleno y luego bordear sobre, um, un pico sólido y entonces ya sabes a qué me refiero? Entonces podrías hacer algo así como relleno top. Mantengamos ese fondo. Hagámoslo 0.5 y luego hagamos el margen inferior una habitación y podríamos hacer eso. Siento que eso se ve bien. Sí, hagámoslo. Nada como diseñar en el navegador. Entonces, copiemos aquí toda esta declaración. Entonces por si acaso te perdí, lo que estamos diciendo está en la etiqueta de cuerpo, que está representada en cada página HTML, siempre
hay una etiqueta de cuerpo. Si la etiqueta body tiene una clase de página no tipo recetas, que solo estarán ahí si estás en la página del nodo de recetas, entonces vamos a encontrar la etiqueta de campo y darnos un poco de estilo. Eso es lo que estamos haciendo. Entonces vamos a copiar eso. Volvamos al código V S y estilos mal pagados. Hagamos recetas, estilos, hombres. Entonces vamos con eso. Y vamos a cerrar eso. Perfecto. Vamos a guardar Subido en el servidor. Vuelve a caer ALS y el hombre, eso ya se ve mejor, me siento y vamos a tirar el efectivo. Muy bien, Impresionante en grande. De acuerdo, eso concluye este video. Hemos realizado con éxito un tipo de contenido de receta. Lo que voy a hacer es seguir adelante y agregar el resto de las recetas que se incluyen en los archivos del sitio y luego me uniré a ustedes de nuevo para el siguiente video donde nos sumergimos en el sistema de vistas de Drew Pal, que es genial. Por lo que voy a ver que
11. Utilizar vistas drupales para crear una lista de recetas: Bienvenido de nuevo con nuestras recetas tipo de contenido hecho. Ahora vamos a ver cómo podemos hacer una lista usando el sistema Views de Drew Pal de cada receta que hemos creado hasta ahora tenemos cuatro recetas que hicimos a partir del tipo de
contenido de recetas . Entonces echemos un vistazo a las vistas. Entonces, como siempre, vamos a saltar a Google. Ya que estamos introduciendo un nuevo tema, tecleemos personas dibujadas ocho visitas y hagamos click en el primer enlace. Si estás interesado en aprender más sobre las vistas, puedes consultar este enlace aquí y en su núcleo. Qué vistas te permite dio es recuperar dinámicamente contenido de la base de datos. Entonces lo que está pasando cuando estamos creando recetas a partir de las recetas Tipo de contenido está en nuestra base de datos. Hay un spot para cada uno de estos campos. De acuerdo, entonces hay un lugar para la nutrición, fax para fotos para direcciones, y esos puntos están todos empatados. Teoh una categoría de recetas generales o una mesa. Por lo que para cada entrada. Entonces cada vez que agregamos una receta, entra en la tabla de recetas, y hay un lugar en la base de datos para cada uno de estos campos. Bien con vistas. Lo que podemos dio es que podemos decir Quiero buscar todos los títulos Digamos de recetas. Entonces quiero buscar avena durante la noche, gofres
veganos, crepes veganos, avena de
fresa, batido de
desayuno y solo quiero tomar el título y tal vez algunos otros de esos campos que acabamos de ver. Ya sabes, tal vez tomemos
el título, la imagen y la descripción, que es lo que vamos a terminar haciendo, y hagamos una lista de ellos, ¿
verdad? Entonces eso es lo que las vistas te permiten hacer sin tener que programar. Y eso es como que la parte clave es Drew Polis proporcionando una herramienta increíblemente poderosa dentro de una interfaz, una interfaz de usuario para que puedas saltarte tener que saber programar? De verdad. Y así para ti, realmente, todo lo que tienes que aprender es cómo usar las vistas. Entonces espero que ese tipo de tenga sentido. Es un tema grande, grande. Echemos un vistazo a la página de recetas, y entonces lo que vamos a hacer es crear un bloque de vista y colocarlo en esta página. Entonces empecemos a hacer eso. Entonces bajo estructura, pasemos el cursor hacia abajo a las vistas y agreguemos nueva vista. Vamos a nombrar esta lista de recetas de vista, y bajo la configuración de vista, nos aseguraremos de que el contenido esté comprobado. Y vamos a asegurarnos de que estamos recibiendo todo el contenido de las recetas. No buscaremos páginas ni artículos. Tan perfecto. Entonces esto le va a decir a la vista qué tipo de contenido buscar dedo del pie y te darás cuenta. Aquí. Esto se puede usar para muchas cosas para usuarios,
bloques, archivos, archivos, taxonomía y aún más a medida que se empieza a descargar módulos adicionales. Y lo último es, vamos a saltar crear una página porque ya tenemos una página hecha para recetas. Entonces vamos a añadir un bloque, y vamos a hacer de esto una lista de campos sin formar, enmarañados, y eso es realmente importante. Así que asegúrate de tener campos revisados, y luego hagamos ese cero. O simplemente hagamos que esa manta debería ser la misma si vas a cero o parpadeas. Pero una vez que tengas todo eso, vamos a guardar y en ello, ¿de acuerdo? Y si lo sigues aquí, ahora
verás en la parte inferior de la página una lista de todas nuestras recetas. Eso es realmente genial. Muy bien, entonces lo que estamos tratando de hacer aquí es crear una especie de lista de vista previa de visualización para que el usuario pueda hacer clic en una receta. Están interesados y buscan y obtienen más detalles. Entonces para hacer eso,
permítanme en realidad simplemente volver a repasar a la receta que ya hemos creado. Entonces echemos un vistazo a la avena tímida durante la noche, y creo que lo que dio es que nos llevaremos el título. El cuerpo. Nos saltaremos las indicaciones se saltará los ingredientes nutrición, fax y la foto. De acuerdo, tomaremos esos campos y los pondremos todos juntos para que salgan a una
lista bonita . Muy bien, Entonces, como dije, aquí tenemos campos bien, Y luego dentro de esta ventana de administración de vistas, tenemos una opción para agregar Campos. Curso. Ya tenemos nuestro título aquí, así que empecemos sumando nuestro primer campo. Entonces echemos un vistazo a la foto. Vamos a revisar foto y también vamos a conseguir el, um, cuerpo, que es como la descripción en horas. Y luego busquemos también el fax de nutrición. Enfriar y vamos a sumar y configurar campos para que puedas verlo pasará por cada uno que hemos comprobado aquí. Por lo que estamos viendo el campo de cuerpo y solo mantendremos todo por defecto por ahora mismo. Datos nutricionales, mismo trato y para la imagen. Hagamos que ese medio y hit aplique. Eso debería funcionar bien, para que si nos desplazamos aquí abajo parezca que hay un problema con mis imágenes. Por alguna razón, me aseguraré de revisar eso. Pero se puede ver que los gofres veganos es correcto ahí. Entonces tenemos nuestro título. Tenemos una descripción y un dato nutricional, y se ve bastante bien. Entonces el último paso aquí es asegurarnos de que lo guardemos y bien, bien. Eso fue sólo debió haber sido un error. Todas las fotos estaban de vuelta aquí y cool. Eso ya se ve mejor. Tenemos una lista de nuestras recetas que luego podríamos utilizar en toda la página web. Lo último que haremos en este video es añadirlo a la página de recetas. Entonces aquí lo que vamos a hacer es tomar esa opinión de que acabamos de hacerlo y colocarlo justo en el cuerpo. Entonces para hacer eso, volveremos a nuestra ventana de diseños de bloques, y esto es familiar. Creo que sí Abajo aquí en Maine contenido porque ahí es donde queremos colocar nuestro. Si bloqueas en la página de recetas, haremos clic en
Colocar, Bloquear y porque cuando configuramos nuestra vista, optamos por hacer un bloque en contraposición a una página. Si tecleamos lista de recetas que aparecerá aquí en esta ventana de motel como opción. Entonces vamos a seleccionar un bloque de lugar y vamos a desmarcar el título de visualización y luego vamos
a guardar eso . Y asegurémonos de hacer clic en guardar bloques en la parte inferior. Entonces ahora si vamos a recetas, puedes ver que tenemos una lista dinámica de recetas de nuestra base de datos. Y solo para mostrarte si íbamos y añadimos una receta de prueba que aparecería. Entonces nos saltaremos ese fax de nutrición, y no tengo una foto para éste, sino solo para mostrarte aquí y luego pasamos a recetas, ¿
verdad? Perfecto. Se puede ver que eso ahora se ha agregado a nuestra lista. Entonces esto es dinámico. Ahora volvamos atrás y solo eliminemos esa pieza de contenido de prueba antes de nunca. Aún así Genial. De acuerdo, ahora hay un problema si vamos a alrededor tenemos nuestra lista de recetas. Si vamos a contactar, tenemos una lista de recetas. Todas las páginas ahora tienen derecho esta lista, que no es lo que queremos en este caso. Entonces, ¿cómo arreglamos esto? Bueno, si vamos Teoh, podríamos ir al diseño de bloques o podríamos ir a este ícono de lápiz y seleccionar Configurar Bloque. Creo que va a hacer eso. Y ahora bajo esta sección de visibilidad, bajemos a las páginas y digamos que vamos a mostrar este bloque para una página listada así que sólo nos aseguraremos de que las recetas estén en la ventana de la página listada. Y lo que puedes hacer es, um, separar los thes por un salto de línea. Entonces si quisiera asegurarme de que esto fuera en recetas y contacto, podría hacer eso. Pero sólo vamos a mantener esto en la página de recetas. Entonces con eso actualizado vamos a golpear Guardar y ahora puedes ver que se ha quedado en la página de recetas y vamos a ver si también está en los menús. Se ha ido, así que eso es bastante sencillo, pero poderoso. Y esto es sólo una especie de darle una idea de cómo se puede utilizar han utilizado para hacer un sitio web
dinámico y moderno. Está bien, así que eso concluirá este video en el siguiente video. Lo que vamos a hacer es trabajar en limpiar esto para que se vea más moderno y
parezca bootstrap. Te veré en el siguiente video.
12. Hacer la lista de exhibición de las recetas: Bienvenido de nuevo en este video, vamos a transformar esta lista de vistas que hicimos para que quepa en uno de los componentes
bootstrapped fours. Está bien, así que vamos a limpiar cómo se ve esto. Entonces para empezar, pasemos a Bootstrap. Aquí estamos en el sitio web bootstrap en la introducción. Y vamos a bajar a los componentes y lo que es objeto medio fino. Entonces lo que vamos a hacer es convertir nuestra lista de vistas en uno de los
componentes de objetos multimedia bootstraps . Entonces estaremos usando este código aquí mismo a esta alineación. Uno. Creo que esto se ve bien, ¿verdad? Entonces estaremos moviendo la imagen hacia la izquierda y limpiando un poco la descripción . Como siempre, con bootstrap, tenemos código de ejemplo debajo del ejemplo. Muy bien, así que vamos a copiar esto para ahora mismo y volver a las recetas y vamos a editar vista desde este ícono de lápiz aquí mismo. Por lo que ahora estamos de vuelta en la ventana de administración U views. Entonces para hacer esto, vamos a hacer uso del campo de texto personalizado, por lo que deberíamos poder escribir texto personalizado y vamos a agregar y configurar campos y lo que esto nos permite hacer uso del sistema de tokens Droop ALS. Nos familiarizamos un poco con los tokens cuando estábamos configurando nuestros caminos de auto caminos. Pero de nuevo, lo que esto va a hacer es buscar es realmente hacer que esta lista sea dinámica y buscar estos campos, que están representados por tokens de la base de datos. Correcto. Entonces peguemos en nuestro HTML que copiamos de Bootstrap, y voy a hacer esto más grande. Y solo aplicemos eso para ver qué pasa. Está bien, Así que como puedes ver para cada uno y vamos a guardarlo aún mejor para que podamos ver cómo se ve
esto. que puedas ver para cada uno tenemos ese código HTML que pegamos a través del
campo de texto personalizado . Bueno, el truco aquí es ocultar todos nuestros campos y representar estos campos usando
tokens de los pols dibujados en el texto personalizado. Entonces hagámoslo ahora, así editaremos, veremos y empecemos ocultando cada campo. Por lo tanto, excluyamos esto de la pantalla y golpeamos aplicar. Bajemos y hagámoslo también para el campo del cuerpo. El fax de nutrición excluirá eso y la foto. Entonces lo que nos queda es sólo el HTML en el que lo pegamos desde Bootstrap. Ahora vamos a entrar en este campo de texto personalizado y comencemos Teoh, reemplace el texto estático por tokens. Nos saltaremos la etiqueta de imagen por ahora mismo porque eso va a requerir algo extra. Pero la más fácil para Dio es comenzar aquí es ir bajo cuerpo de medios y vamos donde dice Top alineados medios, Vamos a encontrar bajo patrones de reemplazo. Copiémoslo, titulo y peguémoslo en. Está bien. Y solo para mostrarte esta línea por línea ahora puedes ver en lugar de ese título estático tenemos el título real de la receta. Sigamos haciendo esto, y volveré a hacer esta ventana más grande. De acuerdo, para esta etiqueta de párrafo, vamos a eliminar todo el texto y vamos justo mientras estemos aquí abajo. Además, borra todo esto Texas Bueno, nos quedan dos etiquetas de párrafo para este abajo en patrones de reemplazo, vamos a agarrar el cuerpo. Y para el último, tomemos el fax de nutrición Cool y vamos a golpear. Aplicar para ver cómo se ve eso. Muy bien, Genial. Ahora vamos a atacar esta imagen. Si miramos el campo de la foto, esto se está renderizando en realidad como una etiqueta de imagen. Está bien, así que no queremos que esto que copiamos de Bootstrapped sea una imagen. En cambio, en realidad
vamos a hacer de esta imagen un div, y vamos a mantener la clase igual Align Self start M R tres. De acuerdo, podemos quitar el texto todo porque eso se representa una vez más en el campo. Y vamos a asegurarnos de que estamos cerrando este div antes de ir más allá y lo que vamos a poner aquí es el campo fotográfico real. Por lo que no pudimos envolver una imagen dentro de una imagen. Simplemente no funcionaría. Entonces por eso tuvimos que hacer de eso un div. De acuerdo, entonces vamos a aplicar eso. Y como puedes ver aquí, eso se ve bien. Ahora vamos a guardar esto y a ver qué obtenemos en la página. Impresionante. Por lo que hemos hecho con éxito eso y esto se ve realmente bien. Por ahora, hay algún trabajo de limpieza de CSS que vamos a hacer aquí. Pero solo para demostrar, se
puede ver que este es un sitio web móvil totalmente funcional, gracias a bootstrap. Por lo que una vez más vamos a Teoh estilo esto en el navegador y luego traerlo a nuestras hojas de
estilo CSS . Así que vamos a hacer click derecho Inspeccionar y voy a bajar esto de nuevo. Teoh la bandeja ahí y echemos un vistazo a nuestra marca para arriba. Entonces lo que terminaremos haciendo es crear una declaración desde los puntos de vista. Entonces si acabas de ver que le pegué a un signo más ahí en el Inspector y tenemos y tenemos esta enorme lista de clases, que no es lo que
queremos, vamos a empezar a blanquear eso para que los estilos que hacemos solo afecten esto vista particular. Está bien, así que ahora mismo nos queda con clases de vista vista recetas lista vista I D Listas de recetas y el bloque I d. De acuerdo, pero en realidad podemos bajar esto aún más. Podemos quitar esos vasos, y solo podemos decir div dot view list recetas. Y entonces podemos empezar a atajar las clases a esa declaración. Entonces digamos que dentro de las recetas div dot listan todos los ibs inmediatos div. Queremos ese dedo del pie. Ten un margen, fondo de una habitación y un digamos relleno inferior de una habitación también para empezar a
espaciarla y haremos nuestro truco aquí de nuevo. Entonces con todo eso, podemos hacer una frontera una púa sólida. Pero en realidad, vamos a hacer borde fondo un pixel sólido de E. Eso se ve realmente bonito, en mi opinión. Entonces eso se ve bien. Si sólo bajamos eso, eso ya está empezando. Se ven espaciados y mejor. Y creo que lo que también hará aquí es simplemente hacer el título. Um, este nuestro sitio verde el verde que hemos estado usando para el sitio. Entonces si seleccionamos ese título y luego volvamos a hacer nuestra lista de recetas, um, div dot view y digamos cada cinco
a.Porque hay un enlace incrustado dentro de esta etiqueta de encabezado. De acuerdo, entonces hagamos ese color. No Alice Blue, pero qué es Solo usa eso y luego consigue este toggle de color. Um, y vamos a seleccionar uno de estos colores aquí. Eso no es todo. Um, Bueno, en realidad, selecciónela de esto. No puedo. Creo que eso se ve mucho mejor, creo, pero podemos hacerlo un poco más oscuro. Probablemente. Sí. Ahí vamos. Entonces puedes copiar eso para tu proyecto también a E ocho c 60 k Y con estos estilos, solo
copiemos este 1er 1 aquí que acabamos de hacer o el 2do 1 que acabamos de hacer. Y vamos a saltar al código V S. Y se llama a éste, um, recetas vista lista estilos. Y empecemos a repartirlo. Volvamos aquí y encontremos a nuestra clase de medios. Y vamos a copiar esa declaración que hicimos aquí en el navegador, dijo. En Hit Save it subirá una vez más. Voy a cerrar eso y a tirar el efectivo. Y si todo va bien, nuestras actualizaciones deben hacerse perfectas. Está bien. Por lo que hemos transformado con éxito un droop Alvaro, usted lista en un objeto multimedia bootstrap usando sólo la interfaz, y esto está empezando a verse bien. Muy bien, ya lo veré en el siguiente video
13. Crear la página de inicio: Está bien. Bienvenido de nuevo en este video, por fin
vamos a llegar a esta página principal. Limpiaremos este material extra que actualmente se encuentra en la página principal. Y el plan aquí es crear una presentación de diapositivas usando carrusel bootstraps, y también agregará un bloque en la parte inferior con algo de información extra. Entonces vamos a meternos en ello. Por lo que pudo haber notado que este banner verde se repite en toda la página web. Si recuerdas, esto es algo que agregamos en la plantilla de página. Eres capaz de tema de esta portada usando una página de TPL específica. Entonces si recuerdas si fuéramos a volver al código de estudio visual aquí, usamos esta página dot html dot twig. Bueno, si querías Teoh tema fuera esta página principal, podrías dio ir a Google y teclear man dribble. Yo como de plantillas de página. Tweet. Hagamos plantillas de ramitas. Y déjame ver aquí en este triple intercambio. Así es como dirías tema a la página de inicio para que pudieras copiar eso. Tráelo aquí a ramita y agrega eso a tus archivos de plantilla. No obstante, para nosotros, nuestro puente casero no es realmente complejo. Y fuera de esto, realmente no
hay diferencias estructurales. Por lo que te mostraré un truco rápido para poder quitar este Onley para la página de inicio. De esa manera podríamos quedarnos dentro de nuestra plantilla de ramita de punto html punto de página. Entonces Muy bien, así que para deshacernos de esto, vamos a inspeccionar el elemento y se puede ver que le dimos una sección una clase de
banner de página . Entonces lo que vamos a hacer aquí como hicimos en un video anterior, vamos a seleccionar el elemento corporal y vamos a Teoh. Ve que esta portada de camino es una clase disponible sobre el ataque corporal. Vamos a copiar eso y vamos a crear una nueva declaración de cuerpo con esa portada de camino. Entonces eso es decir sólo la primera página. Sólo vamos a hacer esto a primera plana. Y entonces hagamos sección el banner de la página de puntos. Y con eso hecho, hagámoslo mostrar ninguno. Está bien, así que eso eliminará el banner de página solo para la página de inicio. Perfecto. Entonces vamos a volver y asegurarnos de que copiamos eso a la declaración que hicimos Vamos a
pasar al código V. S en nuestro estilo punto CSS. Y hagamos una nueva sección aquí para la portada Silas. Y vamos a ritmo eso en Guárdalo. Vuelve a la piscina Drew y asegúrate de que estamos lavando al cajero. ¡ Impresionante! Entonces eso se ha ido. Y ahora se puede ver que las otras páginas aún tienen sus pancartas. Enfriar. Entonces vamos a pasar a Bootstrap y veamos el componente celular de cuidado, Te
damos un ejemplo aquí con controles, y esto es realmente lo que queremos para nuestro sitio. Queremos poder tener un editor de contenido agregar en una imagen y tener que ser un
carrusel bootstrap . Ahora, cuando instalamos en todos nuestros módulos de vuelta en uno de los primeros videos de este curso , uno de los módulos que instalamos fue este bootstrap, sencillo carrusel, y encontré esto. Hace un trabajo realmente sencillo de habilitar este castillo bootstrap que acabamos de ver en la interfaz Drew pull, así que solo asegúrate de que lo hagas, hecho tienes eso instalado. Si lo haces, será bajo estructura y en la parte inferior, artículos de carrusel
simples. Entonces vayamos ahí abajo y seleccionemos eso y qué hay en un elemento. Voy a elegir uno de los archivos de nuestro sitio del curso. Y con eso subido, vamos a hacer esto llamado Amazing Drinks y lo copio y lo pongo en la imagen Alz. Hagamos también el enlace de la imagen y el título de subtítulos Amazing Drinks también. Vamos a poner thestreet, Atis toe activo y el peso a tres porque queríamos estar en la parte superior. Sigamos agregando estos aquí. Simplemente haremos esto juntos. Encontraremos la siguiente foto y hagamos esto llamado café premium y espresso. También vamos a copiar eso en cada uno, y vamos a hacer este cuatro. Los artículos más pesados se hunden hasta el fondo, y yo en realidad sólo Oops, necesitamos también hacer activo este estatus. Y también acabo de notar que agregué aquí la foto equivocada. Entonces déjame decirte, en realidad
tienes que eliminar esto usando este módulo. Entonces yo borro eso. Está bien, Y vamos a añadir la última imagen. Llamaremos a este café vegano mejor calificado fresco y solo repita este proceso, hazlo activo, y vamos a hacer eso cinco. Por lo que se hunde todo el camino hasta el fondo. Entonces es el último. Genial. De acuerdo, ahora hay otra cosa que tenemos que hacer antes de añadirla a la página principal. Sí tenemos que entrar aquí y ajustar la configuración. Entonces si pasamos a Bootstrap y luego echamos un vistazo a esta célula de cuidado, págala una vez más. Desplazemos todo el camino hasta la parte inferior de la pantalla y echemos un vistazo a las opciones. Muy bien, entonces lo que ha hecho el desarrollador de este módulo es tomar estas opciones de intervalo así como algunas de estas otras opciones aquí. Y trajo eso a este módulo para que veas que tenemos este 500. En realidad vamos a hacer el intervalo aquí. 500 o discúlpame, 5000. Mi, sí lo
queremos. Teoh ciclo continuo, y vamos a hacer Paul's on hover mostrar los indicadores que controla en. Solo asegurémonos de que los activos estén incluidos bajo el tipo de imagen bootstrap. Hagamos fluido de imagen, y el estilo de imagen será la imagen original. Entonces vamos a guardar eso perfecto. Y para colocarlo en la página de inicio, vamos al diseño de bloques y vamos a colocarlo en la principal. Ah, ahí
no. Vamos a colocarlo en la sección de contenido principal y verás aquí el 1er 1, en realidad. ¿ Esto es bootstraps? Bloque celular de cuidado simple. Es lugar que en. Muy bien, debajo de las páginas. Nosotros vamos a hacer frente. Vamos a hacer esta exhibición sólo en la portada Terreno. Guardemos ese bloque y vamos a guardar los bloques una vez más. Vete a casa y veamos qué pasó aquí. De acuerdo, un par de cosas. Una, aún
tenemos este contenido, y te mostraré cómo deshacerte de eso. Pero primero realmente queremos esto. Esto se ve bien. De acuerdo, así que hicimos un gran trabajo de agregar nuestro slider aquí, pero en realidad queremos que esto esté lleno. Queremos que esto sea para que abarque todo el ancho de la pantalla exactamente como lo hicieron nuestras imágenes de banner . Entonces para hacer eso, vamos a construir una región en sorteo alberca. Entonces pasemos al código V s. Y vamos a enumerar nuestro y vamos a enumerar el directorio del sitio desde el servidor. Entonces déjame meterme en eso ahora mismo. Estamos en el nivel superior, así que vamos a los temas. Aquí es donde hemos estado trabajando Bootstrap y dentro de las botas principales reupped para
directorio temático . Bajemos y busquemos Bootstrap para info dot de amel. Y si solo haces un espacio ahí y luego con la extensión sftp, entonces
puedes ir a listar carpeta activa y luego estás de vuelta donde empezamos ahí. Por lo que en este archivo se pudieron establecer algunos de los ajustes de línea de base para cualquier tema en el que se estuviera trabajando con Lesión Bull. Así que volvamos por encima de Teoh la interfaz Drew pull y veamos el diseño de bloques y aquí
puedes ver que tenemos una serie de regiones que están disponibles para colocar contenido en. De acuerdo, entonces lo que vamos a hacer es hacer que uno de estos sea nuestro yo y añadirlo a este tema para que
podamos colocar la presentación de diapositivas en la región justo por encima del contenido. Llamemos a esto resaltado y la siguiente línea aquí esto es lo que nos referiremos a esta región como en la plantilla resaltada. Pero en la interfaz, esta siguiente línea es lo que ve el usuario. Entonces vamos a llamar a ese grito porque eso es realmente lo que estamos haciendo es un llamado y vamos a ahorrar eso. Y luego pasemos a la página dot html dot ramita Y lo que vamos a hacer aquí es encontrar ese banner de sección que hicimos éste y vamos a hacer algo de lógica condicional aquí para empezar. Entonces vamos Teoh, abre un bloque de ramitas aquí y vamos a asegurarnos de que cerramos eso. Es así como abrimos eso. Digamos, si es frentes de subrayado, que es una función auxiliar en la piscina Drew. Acabemos de cerrar el bloque de ramitas aquí. Bueno, lo
tenemos y digamos,
y si es así, estamos terminando nuestra declaración si, ¿de acuerdo? ¿ Y en qué está Taibe? Y llamemos a esta página punto resaltado. Muy bien, así es como declaramos una región en un archivo de plantilla dentro de dribble. Entonces, vamos a guardar eso. Volvamos a Drew Paul y volvamos. El efectivo está bien, y si todo funcionó correctamente, deberíamos tener esta región call out ahora disponible, y coloquemos nuestras bootstraps Celular de cuidado simple justo en ese llamado. Y llamemos a este frente una vez más. Guarda el bloque y me acabo de dar cuenta de que eso significa que ahora tenemos dos. Entonces tomemos este entonces agregamos previamente, y solo eliminemos ese perfecto y vamos a guardarlo. Vamos a revisar la página principal, y eso ya se ve mejor. Hay algo de limpieza que necesitamos hacer aquí. Vamos a configurar el bloque. No queremos esto, así que simplemente lo haremos en realidad. No, vamos a quedarnos con eso. Desmarcaremos el título de visualización y guardaremos el bloque. Genial! Está bien. Y ahora limpiemos un poco el C s s aquí, como lo hemos estado haciendo. Por lo que queremos que este epígrafe esté alineado verticalmente en medio del carrusel. Así que vamos a hacer clic derecho inspeccionar café premium y espresso Y luego subamos uno a este título de
Div Carousel y volveré. Entonces eso estuvo en esto y se puede ver aquí Ese título de carrusel ya tiene algunos estilos asociados con él, y es una especie de estar posicionado aquí con, um posicionamiento absoluto usando esta declaración CSS. Entonces lo que haremos es simplemente ajustar esto para que haya primero de fondos de negro. De esa manera lo podemos ver, y también creo que se ve realmente bonito ahí y también añadirá aquí una declaración superior. Y llamemos a esto como 50%. Y como se puede ver, esto ahora es un onky. ¿ Cómo arreglamos eso? Bueno, tenemos que establecer una altura específica para poder arreglarlo. Así que hagamos la altura 75 píxeles y volvamos a nuestra hoja de estilos CSS y añadamos estos estilos que acabamos de hacer para el título del carrusel. Y digamos eso fuera. Vuelve atrás, descarga el efectivo y refresca. Está bien, creo que eso se ve bastante bien, ¿de acuerdo? Y lo último que hará en este video es agregar un jumbotron bootstrap al fondo de la página principal sobre el sitio web bootstrap bajo componentes. Encontremos a Jumbotron, y esto se ve muy bien, así que creo que copiaremos ese código. Volvamos a caer todos, y la forma en que vamos a hacer que esto suceda es agregando un bloque. Entonces vamos al diseño de bloques de estructura, agregamos bloque personalizado y solo llamemos a este contacto jumbotron, y entonces lo que vamos a hacer es hacer que el formato de texto esté lleno. HTML. Haremos clic en el botón fuente y pegaremos eso en. Está bien, Así que llamémoslo los Lanes. Comienza Cafe Cage Cafe, y simplemente pondremos parte de la información de la dirección falsa aquí. Mantengamos ahí mismo esa RRHH. Esta regla horizontal que se ve bien. Y luego vamos a poner en la fecha y horarios que están abiertos. Entonces hagámoslo. Y entonces creo que lo que haremos aquí es vincularlo menú Teoh. De acuerdo, vamos a ver aquí que funciona y vamos a entrar en la fuente real para cambiar esta información. Entonces en lugar de aprender más, llamémoslo, echa un vistazo al menú, Vale ,
y ,
um, digamos eso fuera. Impresionante. No mostraremos el título. Escojamos páginas y luego vamos a ir al frente por ahora y entonces
realmente podemos poner esto bien en la región de call out justo desde aquí, Así que vamos a guardar eso. Asegúrate de que esté bajo el bootstrap simple care cellblock y luego ve a la parte inferior hit save blocks y volvamos al sitio. Eso se ve bien, pero creo que podemos darle estilo a esto un poco. Encontremos el bloque real I d Así bloquear contacto Jumbotron es lo que buscamos ahí. Añadamos un plus. Y afortunadamente, tienen div con idea de bloqueo de contacto. Jumbotron ya seleccionado. Con eso, hagamos centro de líneas textiles. De acuerdo, entonces lo vamos a centrar. Creo que eso se ve muy bien. Y luego agreguemos un poco de relleno. Um, vamos a hacer un relleno de Vamos a hacer un relleno de a ram. Eso se ve mucho mejor. Impresionante. Muy bien, entonces tomemos aquí la declaración de estilo y luego copiemos eso. Tíralo a nuestro archivo CSS, guárdalo. Despeja la caché. Perfecto. Está bien. Y en realidad hay otra cosa que queremos dio,
um, um, nuestras páginas de contactos la única página que está en blanco. Entonces vamos a añadir un Jumbotron aquí abajo también,
así que volveremos a casa. Seleccionaremos en ella de este Jumbotron que hicimos. Vamos a ir bajo fuente aquí en seleccionar todo copia, volver atrás y luego en la página de contacto, vamos a editar. Y antes de seleccionar fuente, vamos al HTML completo y peguemos eso en. De hecho tomaremos 1 800 calle impresionante y haremos que el título noqueará este enlace y luego haremos un nuevo salto de línea y diremos Llámanos al 111222333 Y vamos a ahorrar eso. Impresionante. A mí me gusta decir increíble mucho, como todos pueden decir. Entonces vamos yo preferiría que este sea texto alineado, centro. Pero en lugar de hacer una declaración de estilo, en realidad sólo
editará esto desde dentro de la peluca Wiz E. Entonces vamos a la fuente A partir de entonces el Jumbotron Div, hagamos estilo igual al texto alineado. Um, centro. Perfecto. Entonces eso debería arreglar eso. Y eso ya se ve mejor. De acuerdo, muchas
gracias por ver este video, y te veré en el siguiente.
14. ¡Gracias!: Hola a todos. Enhorabuena por terminar este video. Siri y yo solo quiero agradecer personalmente a todos y cada uno de ustedes por tomarse el tiempo para aprender conmigo. De verdad espero que hayas podido, Teoh, encontrar útil la información de este curso. Ciertamente me divertí mucho haciéndolo. Y por favor, si hay algo que no tiene sentido para ti, siéntete libre de iniciar una conversación aquí, y haré todo lo posible para volver a ti lo antes posible. Ahora que has completado este curso, tienes una plantilla de sitio web moderna lista que puedes usar para personalizar a tus necesidades. Hay muchas características que se pueden agregar a este sitio web que hemos creado para que sea aún más moderno y más dinámico. Si has visto este video todo el camino y te interesa que yo cree un video sobre tema avanzado ing donde realmente creamos una página de plantilla de nodo personalizado y profundizamos un poco más en cómo podemos construir este sitio web, por favor avísame si hay suficiente interés trabajaré en construir ese curso otra vez. Muchas gracias por aprender conmigo. Y espero verte en otra de mis series de entrenamiento. Cuídate
Zane Sensenig, Creative Entrepreneur
