Transcripciones
1. Introducción: Squarespace es una plataforma fácil de usar para construir sitios web hermosos, generalmente dirigida a aquellos que no tienen habilidades de codificación. Pero, ¿y si puedes tener control total sobre tu página web? ¿ Y si pudieras editar o crear tu propia plantilla de Squarespace? Hola, soy Christopher Dodd y soy un maestro superior aquí en SkillShare.com cubriendo temas como desarrollo web y freelancing online. En esta clase, vamos a aprender a usar algo llamado el modo desarrollador en Squarespace. Se trata de una característica en Squarespace que nos permite descargar nuestro código de plantilla y realizar actualizaciones más precisas a nuestro sitio web, además de agregar características que podrían no existir ya en nuestra plantilla. El resultado es la misma gran experiencia de usuario de construir cualquier sitio de Squarespace. Es justo ahora tienes control total sobre la plantilla. En esta clase, vamos a empezar con una plantilla básica enable mode developer, y empezar a construir nuestro sitio web utilizando tanto la interfaz admin como los lenguajes que conforman la plantilla Squarespace, incluyendo HTML, CSS, JavaScript, y el propio Jason de Squarespace. Lenguaje T. Al final de la clase, comprenderás la estructura de la plantilla, así
como la mayoría de las características disponibles para personalizar mediante el uso de código. Por lo que yo sé, no hay curso como éste. Me emociona que te unas a mí por dentro.
2. Herramientas y conocimientos necesarios: Antes de empezar con esta clase, quería cubrir algunos de los conocimientos o herramientas requeridos que vas a necesitar para seguir realmente la clase. Por supuesto, esto es más una clase intermedia por lo que
asume que ya tienes algunas habilidades de desarrollador web de front-end. Tengo una lista de algunas cosas aquí en mi computadora, incluyendo la línea de comandos, el uso de DevTools en Google Chrome, o cualquier navegador que te guste usar. Necesitas conocer algo de CSS, y vamos a hablar versiones
locales y en vivo de un sitio web para que eso sea algo que debes saber también. Git básico y por supuesto, JSON. Yo sólo quería abordar estas cosas por anticipado en esta lección. Si conoces todas estas cosas, no te
preocupes por esta lección, solo salte,
pero para aquellos de ustedes que un poco más del lado principiante, solo
quería tapar estas porque te van a
tropezar en la clase si no tienes idea de cuáles son estos. En primer lugar, línea de comandos, una herramienta muy esencial para toda la programación. Por ejemplo, uso iTerm para mi aplicación de terminal, pero en Mac el estándar que viene con cada computadora es Terminal. Aquí, puedes ver que es solo un poco de una aplicación donde puedes escribir comandos en,
como una línea básica, como una línea básica, cambiar a la carpeta de códigos, enumerar la carpeta de códigos, borrar. Deberías saber un poco de la línea de comandos, pero si sigues los comandos exactamente como digo en el video, no
deberías llegar a muchos problemas, aunque seas nuevo en escribir comandos en línea de comandos. Como dije, el que voy a usar en esta clase es iTerm. Es una especial en la que tengo ciertas características configuradas como por ejemplo, no
tengo que escribir cd cuando quiero cambiar a un directorio. Si quería hacer lo que hice antes, solo
puedo escribir código, y si no hay comando, entenderá que estoy tratando de cambiar directorios. En Windows, el programa probablemente se vaya a llamar Sídney. Estoy bastante seguro de que esa es la herramienta de línea de comandos estándar que viene con Windows. Solo para estar al tanto, vamos a estar usando línea de comando, pero no vamos a ser pesados en la línea de comando, así que no tienes que ser un experto en ello. Otra cosa con la que necesito que estés familiarizado es Chrome DevTools o cualquier software que utilices. El navegador que me gusta usar es Google Chrome, pero es posible que te guste usar Firefox o Safari. El DevTools para mí, puedo abrir presionando el comando de opción “I” en mi Mac, y conseguirás este panel por aquí que tiene Elementos y Consola. Esta de aquí, Console es la que vamos a estar viendo en esta clase como dice aquí, JS Console. Lo que vamos a estar haciendo es que vamos a estar haciendo lo que se llama un console.log, que toma datos y básicamente los genera en esta Consola aquí. Lo que vamos a hacer es tomar Objetos, ponerlos en esta Consola, y luego vamos a navegar por ellos. Si nunca lo habías visto antes, esa parte de la clase podría ser un poco desconocida para ti. Pero de nuevo, esta es una habilidad que debes tener como desarrollador web front-end usando la Consola. De hecho, si quieres una clase puramente en DevTools, avísame pero debería ser bastante fácil de seguir junto con no obstante. CSS, voy a escribir algo de CSS, pero esta no es una clase CSS. No quiero que veas algo de CSS y luego te abrumes por ello. Si no entiendes CSS, recomiendo encarecidamente que aprendas CSS. Tengo clases ya aquí en Skillshare que puedes tomar. Pero si no lo entiendes y no te interesa aprenderlo,
obviamente, no te preocupes por ello. No es esencial para esta clase, pero como desarrollador web front-end construyendo plantillas Squarespace o cualquier cosa en el front-end, definitivamente
querrás saber cómo usar CSS. Como mencioné aquí, se discutirá Less, pero no es un conocimiento requerido. Como lo sabremos más adelante en esta clase, estaremos usando Less archivos que solo puedes intercambiarlos con CSS. Menos es el precompilador CSS. No necesariamente necesitas saber qué es eso, pero solo debes saber que cuando vee.menos en el nombre del archivo, significa que puedes escribir un código CSS en él, o puedes escribir un código Less, que es ligeramente diferente a CSS. Pero no te preocupes si no sabes nada de Less o de su homólogo Sass, que tengo una clase aquí en Skillshare también, no
necesitas saber ningún Menos para sacar el beneficio de esta clase. Cuando vee.menos, sólo think.CSS si no estás familiarizado con Menos en absoluto. Otra cosa de la que hablo consistentemente a lo largo de la clase que podría confundirte es que hablo de la versión local del sitio web. Cuando descargamos nuestro código y ejecutamos un servidor en nuestra propia computadora con el fin de ejecutar el código, eso es lo que se llama ejecutar algo localmente. Localmente solo significa en tu computadora. largo de la clase, lo que estaremos haciendo es editar código en nuestra propia computadora y eso cambiará la versión o cambiará lo que aparece en la pantalla localmente por lo que en nuestra propia computadora. Pero para que eso vaya realmente a la página web, vamos a tener que empujar esos cambios, que te mostraré más adelante en la clase. Yo sólo quería mencionar eso brevemente porque si me oyes decir localmente, versión
local, sitio web local, eso es lo que quiero decir, quiero decir, el sitio web que estamos ejecutando en nuestra propia computadora. No va a ser lo mismo que la página web en la propia Squarespace. También necesito que entiendas Git básico, Git muy básico. Git es un sistema de control de versiones. Es el sistema de control de versiones más popular, una habilidad muy importante para tener como desarrollador. Es importante conocer a Git para esta clase porque lo estaremos usando para actualizar la versión en vivo. Estaremos haciendo cambios locales y luego lo estaremos empujando al sitio en vivo de Squarespace. Estaremos haciendo eso a través de básicamente sólo tres comandos. En realidad, creo que hay un total de cuatro comandos que estamos usando para Git en toda la clase. No mucho, pero de nuevo, cuando veas a Git y no has tenido experiencia alguna con él antes, no
quiero que te asustes. Sólo estamos usando cuatro comandos. Uno para descargar el código Git a tu propia computadora, y luego uno para agregar el código a tu Commit, luego para comprometer el código, y luego para empujar el código. Es muy básico. Simplemente no te asustes si no estás familiarizado con Git. Nuevamente, un montón de recursos en línea si quieres aprender Git. Entonces lo último es JSON. JSON es sólo un formato de estructura de datos simple. Si entramos en nuestro navegador ahora mismo y buscamos JSON, fue para JSONLint. Es sinónimo de notación de objetos JavaScript. Se trata de un formato ligero para almacenar y transportar datos. Una vez que te metes la cabeza alrededor, es muy sencillo. Definitivamente recomiendo si no tienes idea de lo que
es JSON hacer algo de investigación al respecto primero pero básicamente, solo
tienes estos pares clave-valor. En este caso, el valor es en realidad una matriz y luego dentro de esa matriz, tienes múltiples objetos con dos pares clave-valor diferentes. Eso es un poco más complejo, pero aquí verás este ejemplo aquí mismo es un ejemplo típico. Tienes la clave que es el nombre y el valor que es John. La única habilidad que realmente necesitas con JSON en esta clase es saber navegar a través de un objeto JSON. Por ejemplo, si quisiera sacar a John de esta estructura de datos aquí mismo, tendría que encontrar el primer elemento de la matriz, los empleados y luego agarrar el primer nombre de ese elemento en la matriz. Nuevamente, esto no es algo complejo, pero si te pones al día con la parte JSON de esta clase, definitivamente recomiendo hacer una pausa e ir investigando un poco sobre JSON porque básicamente, JSON está en el corazón de plantillas Squarespace. No es algo que sea particularmente complicado, pero al mismo tiempo, te
va a tropezar si no tienes idea de lo que está pasando con el JSON. Esa es una buena recomendación para todas estas cosas. Si alguna de estas cosas de las que no tienes ni idea, definitivamente haz alguna investigación. Yo recomendaría incluso antes de llegar a ese punto en la clase. Yo sólo quería cubrir este conocimiento requerido porque hay algunas preguntas que surgen en las clases a veces. Quedarme atascado en cosas pequeñas que realmente no he considerado para un usuario principiante, esto es más una clase intermedia así que ten eso en cuenta. Estas son algunas de las cosas, además
de lo que vamos a aprender en la clase de hoy, con las
que necesitarás tener alguna familiaridad. Yo sólo quería poner este video aquí. Obviamente, herramientas requeridas, al igual que cualquier otra de mis clases de desarrollo web, necesitarás un navegador web así que para mí es Google Chrome. Podrías usar Firefox o Safari y luego un editor de código. Como puedes ver aquí, me gusta usar Atom cuando estoy trabajando con solo archivos individuales. Eso es A-T-O-M. Cuando estoy trabajando con proyectos completos, me gusta usar VS Code ahora, que es la abreviatura de Visual Studio Code. Obviamente, vas a necesitar un programa de línea de comandos, pero eso viene de serie con cualquier computadora. Vamos a instalar algún otro software en la clase, por lo que no necesitas necesariamente tener eso todavía. Vamos a pasar por qué paquetes necesitas instalar en esta clase a medida que avanzamos. Pero eso es todo, chicos. Solo quería asegurarme de que estés al tanto de estas cosas que realmente necesitas saber. Asegúrate de tener un editor de códigos y un navegador web como siempre. Eso es todo. Te veré en el siguiente video.
3. Qué es una plantilla de Squarespace: Antes de empezar a editar y crear nuestra plantilla de Squarespace, tenemos que tener claro qué es una plantilla en realidad. Si ingresamos a la página web de squarespace.com y hacemos clic en el ítem de menú para plantillas, podemos ver un portafolio de las diferentes plantillas que están disponibles por defecto en Squarespace. Tienen éstas las que son las más populares y luego también las tienes organizadas por categoría. Estas son las que quizá quieras usar si tuvieras un sitio web de portafolio de fotografía o tal vez has creado un sitio web completo solo para tu boda. Estas plantillas probablemente van a ser las que quieres mirar primero. Pero claro, no importa. Puedes usar la plantilla que quieras en Squarespace. El genial de estas plantillas sin embargo, es que funcionan en cualquier sitio de Squarespace. La arquitectura back-end y todas las páginas y fotos que has agregado aún deberían funcionar en todas estas plantillas. Básicamente es solo personalizar el diseño, la
presentación, y el estilo de tu sitio web. Para demostrar esto, lo que creo que es mejor es mostrarte uno de mis sitios web y ver qué pasa cuando cambiamos la plantilla. Como actualmente estoy conectado, puedo ir por aquí y dar clic en “Panel de cuenta”. Aquí verás mi lista de sitios web. Este es el que vamos a estar construyendo en esta clase,
este es otro proyecto que tengo, y la razón por la que están sentados aquí es porque son sitios de prueba con modo
desarrollador encendido y una de las características de modo desarrollador es que el juicio nunca expira. Puedes tenerlos en modo desarrollador el tiempo que quieras hasta que estés listo para publicar, y luego puedes ir a un plan. Pero aquí abajo hay un sitio web que actualmente está en vivo y tengo un plan en. Es mi página web de portafolio de fotografía y videografía. Si hago clic en “Editar sitio”, me llevará al administrador de Squarespace para este sitio web. Ahora bien, si no estás familiarizado con este administrador, entraremos en lo básico en una futura lección, pero para este video, lo que quiero mostrarte es la plantilla. Echemos un vistazo rápido a mi página web. Puedo hacer clic en los elementos del menú aquí o entrar en el directorio de páginas, y se puede ver aquí en “Navegación secundaria”,
tengo “Eventos”, y aquí hay una galería de videos incrustados. Estos son enlaces de Vimeo de algunos de los eventos que he filmado. Si volvemos aquí, tengo algunos videos en el nicho de moda que filmé, y se puede ver el diseño de todas estas páginas, es lo mismo. Es solo una galería de videos, y si voy a la página de “Fotos”, es solo una galería de fotos diferentes. Puedo subirlos aquí en mi administrador y
aparecen en la página en función de qué plantilla estoy usando. Vamos hacia atrás aquí, vamos a ir “Inicio”, haga clic en “Diseño”, haga clic en “Plantilla”, y se puede ver que estamos ejecutando la plantilla jasper, esa es nuestra plantilla en vivo. Pero lo que podemos hacer es cambiar plantillas en cualquier momento y también
podemos instalar una plantilla sin tener que cambiar de inmediato. En realidad podemos previsualizar. Voy a dar clic en “Instalar nueva plantilla”, y como dice aquí, instalar una plantilla no afectará a tu sitio web en vivo. Lo que voy a hacer es elegir una plantilla que creo que también funcionará bien con una página web como la mía de fotografía y portafolio de videografía. Aquí mismo voy a hacer clic en “Vista previa Avenida”, y eso en realidad sólo te muestra una vista previa más grande, realidad
no previsualiza en tu tienda. Lo que vamos a tener que hacer es hacer clic en “Empezar con este diseño”, y se va a instalar esa plantilla en nuestra página web. Aquí lo tenemos, podemos desinstalarlo o podemos hacer click para previsualizar. Voy a previsualizar, y ahora, lo que verás es que ahora nuestro sitio web se cargará en esta plantilla. Ahora, el tema con mi página web, creo, fue que tenía toda la navegación dentro de una navegación secundaria. Porque esto está usando la navegación primaria, se inserta su propio nav, pero si volvemos a “Inicio
”, y luego volvemos a “Páginas”, y nos desplazamos más allá de esta navegación superior aquí, podemos ver todas las páginas que existen en mi página web en este momento. Puedo ir a esa página de “Eventos” que miramos antes, y se puede ver todo el mismo contenido ahí dentro, todos iguales Vimeo incrusta, pero en lugar de presentarla como una cuadrícula, lo que ha hecho esta plantilla lo ha presentado como un presentación de diapositivas. Ahora, tenemos que dar click a través de esta presentación de diapositivas y así es como se reproduce un video. Entonces con la página de fotografía, si voy a mi página de “Fotos”, puedes ver las fotos también se muestran en una presentación de diapositivas. El punto que estoy haciendo aquí es que todo el contenido sigue ahí y todavía podemos ver el contenido, pero la diferencia es que el look y la presentación es diferente. Para todas las galerías, tenemos esta presentación de diapositivas en lugar de lo que teníamos antes, que era una cuadrícula. Obviamente hay fuentes que son diferentes, ahí está el título de mi sitio web que se posiciona de manera diferente, pero eso está todo determinado como acabamos de discutir por la plantilla. Por eso, debido a que la plantilla está efectivamente solo tomando cualquier contenido que tengas en tu sitio web, no
es cambiar el contenido ni eliminar nada, podemos cambiar nuestra plantilla tanto como sea posible, tanto
como nosotros quieren y podemos cambiar fácilmente de nuevo. Ahora, tengo mi antigua página web de vuelta. En realidad nunca lo perdí. Voy a dar clic en “Desinstalar” porque estoy contento con este tema o con esta plantilla. Eso fue demoler una plantilla cambiada en un sitio real en vivo, pero lo que vamos a hacer para esta clase es que vamos a empezar con una plantilla base. El modo en que podemos hacerlo es yendo a base-template.squarespace.com, así que es base dash template dot squarespace dot com, y puedes ver esta plantilla base. Aquí abajo, puedes hacer clic en “Crear un sitio como este”, que voy a hacer, y lo que eso va a hacer es crear una puerta de nuevos desarrollos o una nueva puerta de pruebas para ti, que puedes convertir rápidamente en una tienda de desarrollo habilitando el modo desarrollador. Nos meteremos en eso en un video posterior, pero quería empezar esta plantilla porque este va a ser el punto de partida sobre el que seguiremos construyendo sobre la clase, y también es el que te sugiero que empieces como bueno si estás aprendiendo a construir tu propia plantilla porque tiene muchas de las cosas básicas que necesitas que realmente no quieres codificar desde cero, pero al mismo tiempo no es altamente opinionada en el sentido de que no es altamente estilizada y no tiene mucho por dentro, así que no hay mucho que debas descomponer para obtener el resultado que quieres. En el siguiente video, vamos a aprender a usar el admin aquí. Vamos a crear algún contenido y después de eso, vamos a cavar en cómo editar realmente el código de plantilla.
4. Conceptos básicos de Squarespace: Por lo que ahora mismo tenemos nuestro nuevo sitio web ejecutando la plantilla base. Antes de ir realmente a editar esta plantilla, es importante que todos tengamos una comprensión de cómo funciona Squarespace en realidad desde el administrador, usuarios, respectivo. La mayoría de los usos de Squarespace, la gran mayoría de ellos solo editarán su sitio web desde este admin. Entonces es importante que entendamos lo que realmente estamos haciendo aquí. Para aquellos de ustedes que tienen experiencia con Squarespace y han manejado un sitio web de Squarespace durante un tiempo o han construído su propio sitio web de Squarespace utilizando esta interfaz. Entonces tal vez esta es una lección que puedes saltarte, pero para el resto de nosotros, en realidad
quiero mostrarte cómo puedes controlar el contenido y el diseño de tu sitio web solo usando el admin. Entonces pasaremos a cómo editar realmente la plantilla con código. El administrador que estás viendo aquí mismo es el único control que tienes sobre back-end de
tu sitio web y forma la estructura del contenido de tu sitio web. Conocer estas cosas es muy importante antes de editar cualquier código. Lo primero que quiero hacer es dirigirme a las páginas y eliminar este contenido demo. Por lo que esta página, este blog. Ahora con el contenido demo eliminado, podemos crear nuestras propias páginas. Si queremos que la página no sea enlazada en la navegación, podemos dar click aquí. O si queremos que aparezca automáticamente en la navegación del sitio, podemos hacer clic en este ícono aquí. Voy a hacer clic en este ícono y tenemos nuestras opciones aquí. En esta sección de diseño, podemos crear una página con un diseño predefinido. Aquí en esta sección de colecciones, podemos agregar lo que se llama una colección en Squarespace. Una colección es básicamente algo así como un blog, una galería, una colección de productos es básicamente una lista de algo. Entonces cuando hacemos clic en él, deberíamos ver un listado. Entonces dentro de una colección tienes varios artículos. El ejemplo perfecto, por supuesto, es un blog, al que llegaremos en un segundo. A blog, puedes dar click en el blog y verás una lista de todas las entradas del blog. Pero entonces también puedes hacer clic en la entrada individual del blog y leerlos. Pero ese es un ejemplo perfecto de una colección. Se trata básicamente de una lista de contenidos con página aparente y páginas infantiles. El otro contenido que podemos agregar aquí es una portada que hasta donde yo sé, es una página que cubre toda tu pantalla y tiene uno o dos enlaces. Por lo que hace clic en el enlace y luego te llevan a una determinada página en el resto de la página web. La otra opción aquí es abrir un enlace externo. Lo que voy a hacer es crear una página sobre. Por lo que voy a dar clic aquí para el sobre layout. Tenemos tres diseños diferentes entre los que podemos elegir. Sólo voy a dar clic a la versión de banner. Cuando abra esta casilla aquí, voy a llamar a la página Sobre Nosotros. Después de que lo nombremos
así, va a aparecer aquí. También puedes ver que aparece en nuestra navegación por el sitio. Aquí es donde se puede editar el contenido de la página web. Si paso el cursor sobre el contenido de la página, puedes ver que aparecen los contenidos de la página y hay dos opciones, Editar o Configuración. Si golpeo Ajustes, obtengo un rango de ajustes diferentes para cambiar aquí. Pero si hago clic en Editar, entonces tengo acceso a este constructor de páginas que viene en Squarespace. Entonces aquí tengo un bloque de texto. Puedo editar la colocación del título. Si bajo a este bloque de imagen aquí, puedo agregar una imagen desde mi escritorio o puedo hacer clic en editar y puedo hacer clic aquí para buscar una imagen. Esta es una característica genial de Squarespace es que busca automáticamente en splash, que es una página web donde puedes encontrar fotos de stock gratis. Digamos que quiero usar esto. Haga clic en Agregar al sitio. Se procesa y se redimensiona. Ahí lo tenemos. Voy a dar clic en Aplicar. A lo mejor escribiré un pie de foto. Chica haciendo abdominales. Yo sólo voy a dejar el contenido aquí porque es irrelevante. Aquí puedes editar la página como quieras. Aquí puedes hacer clic en estos pequeños iconos y puedes agregar diferentes bloques que están disponibles en el constructor de páginas de Squarespace. Es importante señalar aquí que esto no es personalizable. Estos bloques vienen en Squarespace y hasta donde yo sé, aquí no
podemos sumar nuestros propios bloques. Eso está bien, aquí hay un montón de opciones. Como lo sabrás pronto con la plantilla, en realidad
somos capaces de personalizar bastante con código. Por lo que no se preocupe ahí. Si hago clic en guardar. Ahora esta página está guardada. Si vuelvo a la página de bienvenida, se
puede ver, como dije, es en esta navegación del sitio aquí. Siguiente Quiero mostrarte una colección. Por lo que mencionamos blog antes. Si hago click en Nuevo Blog, solo
voy a llamar a esto el Blog. Si entro aquí por el Blog, realidad
puedo agregar en una nueva entrada de blog. Me va a pedir que entre aquí un título de post y una descripción. Sólo voy a copiar y pegar algún contenido, algún contenido muy básico. Ahí vamos. Puedo agregar etiquetas y categorías igual que lo harías en cualquier plataforma de blogging que vaya a poner en casa. Simplemente los separas por una coma y automáticamente los separará. Bloquear. Voy a escoger una categoría de ejercicio. Enfriar. Entonces en este momento esta publicación está en modo borrador, pero puedo golpear guardar y publicar. Ahora puedes ver que está en esta lista aquí. Entonces si lo pongo a un borrador. Aquí puedo ver todos mis trabajos de borrador. También puedo programarlos o ponerlos en revisión, pero básicamente aquí en la página del blog o déjame solo revisar dos veces, estoy en la página del blog. Si golpeo la página del blog aquí, verás que obtengo una lista de entradas de blog abreviadas que es sólo una por el momento. Si en realidad hago clic en la entrada del blog, puedes ver que es lo mismo, pero eso es porque solo tengo uno de ellos. Vamos a crear en realidad una segunda entrada de blog para que pueda probar lo que estoy diciendo aquí. Llamemos a éste, nuevo sólo estoy inventando cosas aquí. No tome demasiado nota del contenido real de estas páginas. Ir a crear estas categorías como Nutrición, hit Guardar y Publicar. Hit Done. Ahora puedes ver esta es la entrada del blog para las mejores cosas para comer para mantenerse saludable. Si vuelvo al blog, puedes ver que tenemos los dos posts aquí, así que es como un listado. Esto debería traer a casa la idea de una colección. Con una colección, tienes una colección de post individual,
imágenes, videos, en este caso, entradas de blog. Si vas a la colección, puedes ver la lista y luego puedes hacer click en los ítems individuales. Este concepto es muy importante de entender porque en realidad podemos editar el código para la lista y editar el código para los ítems usando el modo desarrollador Squarespace. Por último, quiero mostrarles una opción de la categoría final, que es la otra categoría. Sólo voy a añadir un enlace externo. Para que puedas agregar un enlace a algo que no está en tu página web. Voy a poner en y enlaces para decir, encuéntranos en Google. Si entro aquí, gimnasio local, y hagamos que eso se abra en una ventana nueva. Voy a pegarle ahorrar en eso. Ya verás que tenemos este icono de enlace externo. Podemos reorganizar los enlaces en nuestra navegación. Podemos mover la página Acerca para no enlazar sección y por lo tanto no aparece en ninguna navegación. Pero básicamente tenemos los tres tipos principales aquí que están disponibles para nosotros en este momento en nuestra plantilla, que son estas páginas dinámicas básicas con el constructor de páginas, la colección, digamos en este caso un blog y un enlace externo. Obviamente también nos dieron una portada. Pero puedes jugar con eso si quieres. Algo que me olvidé de hacer en realidad es entrar en nuestra sección de diseño y actualizar el título de la página web. Entonces en lugar de Tu Título de Sitio, lo
voy a llamar Tu Gimnasio Local. El tagline ven a visitarnos. No es realmente relevante. Pero ahora se va a actualizar dondequiera que jalemos en el título del sitio, se va a tirar en tu gimnasio local. Enfriar. Por lo que hay más características y nos meteremos en ello a medida que construimos nuestra plantilla aquí. Pero estos son los conceptos centrales. Básicamente estás creando páginas en esta parte de página aquí. Puedes optar por poner eso en una navegación o ponerlo en la sección de no enlace. En realidad podemos construir algunas opciones aquí. Podemos crear nuestras propias colecciones. Podemos crear también páginas estáticas, que les mostraré cómo hacerlo. En realidad podemos tener lo que se llama carpetas e índices, que nos permiten anidar en la navegación. Todo eso viene en esta clase, pero estos son los fundamentos de Squarespace. realidad no hay mucho más en cuanto a la estructura. Simplemente estás construyendo diferentes páginas y colecciones. Tu plantilla determinará cómo
se ve eso cuando realmente la veas en tu sitio web. Está bien, genial. Entonces en el siguiente video, en realidad vamos a
empezar con la edición de nuestra plantilla y vamos a habilitar el modo desarrollador. Entonces te veré en ese video.
5. Cómo editar tu plantilla de Squarespace: En esta lección, por fin vamos a introducir este modo de desarrollador de Squarespace, y hablar de las dos formas en que puedes actualizar tu plantilla. Quiero que te dirijas a la sección de ajustes aquí y bajes a Avanzado, y luego vayas al desarrollador a modo. Si hacemos clic en este toggle aquí mismo, se
enfrentará a una advertencia y luego hacemos clic en Continuar y de repente estará habilitando nuestro modo desarrollador. Si nos desplazamos hacia abajo hasta detalles de conectividad, podemos ver todos los detalles que necesitamos para poder conectarnos a nuestra página web de Squarespace, y en realidad editar la plantilla. Tienes el nombre de usuario y contraseña que es igual a tu cuenta de Squarespace, nombre de usuario y contraseña, por lo que no hay nueva información allí. Pero aquí tenemos el nombre de host SFTP y el puerto y tenemos un repositorio Git. El nombre de host SFTP, por lo que yo sé, siempre
va a ser dev.squarespace.com. El puerto creo que tampoco cambia realmente y la dirección del repositorio de Git, es esta va a ser la dirección de desarrollo de tu tienda con template.git al final. Esto está sujeto a cambios, pero ahora mismo, así funciona. Como puedes ver aquí, esta es la dirección de desarrollo de mi tienda y el repositorio de Git solo se está configurando como una plantilla.git en eso. Ahora, la forma en que lo vamos a hacer en esta clase y la forma en que recomiendo es usar Git. El motivo es porque eres capaz de
descargar el código localmente y editarlo en tu propio equipo. Puedes hacerlo con SFTP, que veremos en tan solo un segundo. Pero entonces estás editando archivos individuales y esperando que se suban. tanto que con Git, puedes ejecutar un servidor local, realizar cambios, ejecutarlo en el servidor local, y cuando estés listo, puedes enviar esos cambios a tu sitio web de Squarespace. Push es un poco de terminología de Git. No estoy seguro de si estás familiarizado con Git, pero es una habilidad muy importante para aprender si estás haciendo desarrollo Web. Entonces ojalá sepas todo sobre Git. Si no, estaremos cubriendo algún Git básico. No va a ser demasiado difícil. Pero antes de entrar a Git, lo que quiero mostrarles es SFTP, y esto nos permite editar los archivos directamente en la página web. SFTP significa protocolo seguro de transferencia de archivos. Puede que estés familiarizado con FTP si has editado otro sitio web antes, he editado mi sitio web de WordPress conectándome vía FTP, y eso me permite editar las plantillas directamente. Es un concepto similar. Lo que vamos a necesitar hacer es instalar un cliente FTP. El que tengo instalado es Cyberduck, pero hay otros que puedes usar, como FileZilla, probablemente haya todo un montón de ellos por ahí. Pero para esta clase, lo que voy a usar es Cyberduck. Si quieres seguir exactamente cómo lo estoy haciendo, puedes descargar Cyberduck también. Es completamente gratis. Déjame simplemente buscarlo para ti ahora Cyberduck, realmente debería aparecer como la primera opción. Ahí vas. El primero cuando lo busques en Google, Muy bien. Ya lo tengo instalado, así que lo que voy a hacer es abrir Cyberduck, y abramos un nuevo navegador. Voy a dar clic en “Abrir conexión”. Aquí arriba queremos cambiar el protocolo de transferencia de archivos a protocolo seguro de transferencia de archivos o protocolo de transferencia de archivos SSH. Para el servidor, necesitamos poner en el nombre del host. Es dev.squarespace.com y el Puerto es lo que está escrito aquí, 2030. Entonces para el nombre de usuario, lo dice ahí ya, es solo tu nombre de usuario de Squarespace, que va a ser una dirección de correo electrónico muy probablemente y luego para la contraseña, me he guardado en mi manejo de contraseñas, pegado en ahí. Y vamos a golpear, no voy a añadir un llavero y vamos a darle a “Conectar”. Podría llegar a algunos errores como huella dactilar desconocida. No necesariamente errores, sino más advertencias. Simplemente puedes hacer clic en permitir. Ahora mismo está tratando de iniciar sesión. Se ha conectado con éxito. Aquí puedes ver que está conectado a mi servidor de Squarespace. Ahora, como puedes ver aquí, aquí hay una colección de tres carpetas diferentes, porque estoy ejecutando tres sitios web ahora en modo desarrollador, tengo las carpetas para cada una de ellas. Echemos un vistazo a qué más es. Es dahlia-lime-sh9g, que es este primero de aquí. Voy a hacer doble clic para centrarme en eso. Se puede ver esto aquí mismo es nuestra plantilla. Ahora con el fin de demostrar la edición de tu plantilla usando SFTP, lo que voy a hacer es hacer un simple cambio que va a agregar una característica que
vamos a usar en la clase hoy y que es permitir fotos. Para permitir fotos, voy a abrir aquí la carpeta de colecciones. Lo que necesito hacer es crear un nuevo archivo llamado folders.conf y subirlo a esta colección aquí mismo. Si fuera a editar un archivo existente, lo que puedo hacer es simplemente hacer clic derecho en el archivo y editar con lo que sea mi editor de código favorito. Me gusta usar Atom para editar archivos individuales y decir por ejemplo, quería hacer una edición a esto, podría hacer que mi edición golpeara “Guardar” y automáticamente se subirá al servidor aquí mismo. Muy cool. Pero porque estamos creando un nuevo archivo lo que voy a hacer es abrir de nuevo Atom. Vamos a crear este Folders.config. Ahora no espero que sepas cómo hacer esto, así que busquemos realmente y encontremos las instrucciones en la documentación de squarespace. SquaresPacefoldres.conf, ojalá eso funcione. Si hacemos clic en este primer enlace aquí, puedes ver aquí configuración de carpetas para agregar carpetas en tu sitio, crear un archivo folders.com en tu carpeta de colecciones. A continuación se encuentran los ajustes estándar para un archivo folder.com. Fácil. Voy a agarrar esto, voy a pegar esto en nuestro archivo sin título ahora mismo. No quiero que se llame mi carpeta. Yo sólo voy a llamarlo carpeta y voy a golpear “Guardar”. Puedes guardar esto en cualquier lugar. Simplemente lo voy a guardar en mi escritorio. Por supuesto que necesita llamarse folders.conf. Golpea “Guardar” en eso. Ahora voy a abrir una ventana del navegador o una ventana del Finder más bien, navega al escritorio donde pongo ese archivo Folders.config, pasa a Cyberduck y arrastra esto. Ahora puedes ver que está subiendo. Me está dando una advertencia sobre la huella dactilar desconocida. Voy a dar click permitir y no hay un gran riesgo ahí. Ahora está subido. Para ver si eso realmente está funcionando ahora, voy a volver a mi sitio de Squarespace. En realidad, necesitas actualizar la página para asegurarte de que está tirando de los últimos cambios. Ahora cuando entre en páginas y haga clic en este plus aquí, verán que la carpeta ha aparecido abajo aquí. Al agregar este archivo folders.com a nuestra carpeta de colecciones, en realidad
he actualizado mi administrador dentro de la nueva opción. Eso es lo que quise decir antes con lo que dije sobre agregar características a tu plantilla por el uso de código. Al agregar este archivo com, en realidad
estamos agregando una nueva característica a nuestro administrador. Ya puedo hacer click en “Carpeta”. Lo que esto me permite hacer, esto no va a ser un cambio permanente, pero puedo anidar las cosas. Tengo Nueva Carpeta. Desafortunadamente, nuestra plantilla actualmente no admite menús desplegables, pero como puedes ver aquí, al
menos en el admin está anidada y veremos cómo funciona eso en tan solo un segundo. Pero ese es un ejemplo perfecto de agregar algo a nuestra página web de Squarespace usando SFTP. Va a suceder al instante porque este es el código real, que se está ejecutando en este momento en nuestra plantilla. Pero por genial
que sea esto, en realidad no te recomiendo usar SFTP cuando estás haciendo muchos cambios en tu sitio web, lo que recomiendo en su lugar es usar Git. Voy a cerrar Cyberduck. Volvamos a la configuración, el modo desarrollador avanzado. Lo que vamos a hacer es clonar este repositorio. Ahora desafortunadamente esto no va a ser una clase todo sobre Git. Entonces voy a asumir que tienes conocimiento de Git o asumir que si no entiendes algo que estás viendo aquí, que lo buscarás y entenderás lo que significa porque es conocimiento asumido que sabes, un poco de un Git o que todavía puedes seguir a lo largo incluso sin saber exactamente cuáles son todos los comandos fuera dentro de Git. Pero básicamente, el concepto aquí es que vamos a clonar este repositorio en nuestra computadora. Eso significa que solo estamos tomando el código en este repositorio y copiándolo a nuestra computadora. Voy a copiar esa dirección. Lo que voy a hacer es abrir mi aplicación terminal. Abre tu aplicación de línea de comandos favorita. Yo uso IterM. El app por defecto en un Mac es Terminal, y la app en una computadora con Windows, creo que se llama Sínodo de comandos. Pero Git debería funcionar exactamente igual. Lo que voy a hacer es que voy a entrar en mi directorio de códigos. Aquí solo puedes ejecutarlo en tu escritorio si lo deseas. Depende de ti. Pero para mí, voy a entrar a mi carpeta de códigos personales, actual, y
en realidad voy a echar un vistazo ahí. Ya tengo un archivo llamado plantilla. Entonces solo necesito entrar rápidamente a mi carpeta de códigos y cambiar el nombre de eso. Esto probablemente no te afecte, solo voy a llamar a esa plantilla 1, porque cuando clones, va a ser plantilla fría como está escrito aquí. Está bien, así puede aclarar eso ahora. Lo que voy a hacer es ejecutar el clon de Git. Git clone, pegue esa dirección y luego presione “Enter”. Ahora se va a decir clonación en plantilla. Es importante chicos que esto no va a funcionar a menos que tengas instalado Git. Así que asegúrate de ir a la página web de Git. Si no lo tienes ya e
instálalo, debería ser bastante sencillo. De todos modos, de vuelta a la lección ahora mismo nos va a pedir el nombre de usuario y contraseña, y eso es igual a nuestro nombre de usuario y contraseña de Squarespace. Eso es fácil. Basta con utilizar el mismo proceso que antes. Ahora va a pedir la contraseña. Tengo aquí arriba, mi gestión de contraseñas golpeó “Enter”. Si no se niega el acceso, realidad
lo va a descargar. Lo que va a pasar es que en realidad podemos cambiar al directorio de plantillas ahora. Ahora lo que voy a hacer es abrir mi editor de código favorito, que ha cambiado ahora uso código VS. Voy a dejar la terminal. Abrir código VS. No tienes que usar exactamente los mismos editores de código yo, ese código VS es bastante bueno. Se abrió un proyecto anterior mío, pero lo que quiero hacer es hacer click open. En realidad está cargando la plantilla porque tiene el mismo nombre que el que estaba cargando antes. Pero solo para estar seguro de que quieres dar click en “Plantilla”. Ahora tienes el código de plantilla sentado localmente en tu computadora. Puedes editar esto tanto como quieras pero los cambios no van a ir en vivo a tu sitio web todavía. Tengo la sensación ahora mismo de que este video se está haciendo un poco largo. Para la siguiente parte donde instalamos el servidor en vivo de Squarespace y empezamos a ejecutarlo, voy a separar eso hasta en el siguiente video. En el siguiente video, realidad
vamos a ejecutar un servidor local, lo que nos permite ejecutar una gran cantidad de las partes de nuestro sitio de Squarespace localmente. Todavía se va a conectar con los servidores de Squarespace para traer los datos. Pero en realidad podemos ejecutar qué código tenemos aquí en un servidor local. Eso va a estar en el siguiente video. Te veré en esa.
6. Servidor en directo de Squarespace: En el último video, descargamos nuestra plantilla de Squarespace a nuestra propia computadora, y eso nos permite abrirla en un editor de código de nuestra elección y cavar en las carpetas, click en varios archivos y editarlos. Yo estoy por supuesto, usando Visual Studio Code, pero puedes usar cualquier software de codificación o editor de codificación que te guste usar. Hay un consejo que te daré es que independientemente del editor de código que estés usando, debes habilitar una extensión que permita formatear este código aquí mismo, que es JSON-T. Aprenderemos más sobre JSON-T más adelante en esta clase. Pero si estás usando VS Code, la extensión que estoy usando se llama JSon-template por stormwarning. Sin esto, el resaltado de la sintaxis de JSON-T no estará sucediendo. Seguirá funcionando, pero solo será más difícil trabajar con él porque no tendrás esta bonita codificación de colores sucediendo. El flujo de trabajo para editar tu plantilla es que vas a hacer tus cambios aquí localmente como se conoce. Entonces vas a tener que comprometer ese código y luego empujarlo al sitio web real de Squarespace. En ese punto, el código que tienes aquí será el mismo que el que tienes en tu página web de Squarespace. Ahora si no estuviéramos ejecutando un servidor local y tuviéramos que comprometernos y empujar código usando git cada vez quisiéramos ver un cambio en nuestra página web que
crecería bastante fastidioso y bien podríamos usar solo SFTP, que vimos en la última lección. Lo que propongo en cambio es que utilicemos un servidor local y uno nos lo proporciona Squarespace llamado Squarespace Live Server. Un gran descargo de responsabilidad antes de entrar en Squarespace Live Server, no
es tan bien mantenido por Squarespace. Te voy a mostrar un correo en un segundo donde instalé Squarespace Live Server. No funcionó y en realidad me puse en contacto con el soporte y admitieron que hay un área específica que tuve que volver a instalar que no estaba instalada correctamente por defecto. Acepta aquí que puede haber problemas con ejecutar Squarespace Live Server, y eso depende de Squarespace si quieren publicar la versión más correcta y actualizada en GitHub y en su propia página web. Pero lo que voy a decir es que si tienes algún problema aquí con Squarespace Live Server, definitivamente
me pondría en contacto con el soporte de Squarespace primero antes de sumergirme en los comentarios. A menos que sea algo específico que he hecho que te estés preguntando. Pero de lo contrario, si Squarespace Live Server cambia en el futuro, lo
cual es probable que haga, y está recibiendo un error que no ves en esta clase, entonces probablemente sea mejor que vayas y preguntes a Squarespace, ¿qué pasa? Al igual que lo que hice. Está bien, así que con eso fuera del camino, necesitamos asegurarnos de que tenemos algo llamado npm instalado. Voy a abrir una ventana de navegador y voy a teclear npm. Npm es sinónimo de administrador de paquetes Node. Se trata de una pieza de software que nos permite básicamente instalar paquetes. No necesariamente necesitas saber todo sobre qué es un paquete, pero necesitas tener instalado npm para poder ejecutar Squarespace Live Server. Ya tengo npm instalado y si no lo hace, seguro que es bastante sencillo de hacer. Pasemos a la documentación. Seguro que si entras en empezar, no el sitio web más fácil de usar, pero si vamos a Google, instalamos npm, entonces puedes ver, conseguir npm es la dirección que estás buscando, está bien. Puedes descargar Node.js y luego npm y
puedes seguir todas estas instrucciones para asegurarte de que npm esté instalado. Ya tengo npm instalado, como dije. Ahora mismo lo que voy a hacer es abrir una terminal porque ya tengo abierto mi editor de códigos. Voy a abrir la terminal dentro de mi editor de código y de esta manera ya está configurada en el directorio correcto. Ahora voy a ejecutar el comando para instalar el Squarespace Live Server que es npm install -g @squarespace /server. Ahora, ¿cómo sé que este es el mando correcto? Bueno, esto lo obtuve de la documentación oficial de Squarespace. Esto está sujeto a cambios. Te recomiendo que si te pierdes en este punto, dirígete a developers.squarespace y la página en este momento es local-development y como puedes ver aquí por instalar el servidor dev, este es el comando. Vamos a golpear eso. Ya lo tengo instalado. Pero esto es lo que debes hacer si no lo tienes instalado ya. Necesitamos aceptar las condiciones de uso del desarrollador. Ya he leído este documento, así que voy a golpear Enter y luego golpear Sí. Va a tomar un poco de tiempo instalar y empaquetar JRE compatible. No necesitas saber qué significa eso. Solo se está tomando algún tiempo para instalarlo. Solo necesito ser paciente y una vez que esté instalado, esperemos
que funcione. Ahí lo tienes. Ahora la razón por la que digo que va a funcionar ojalá es que lo ejecuté antes y no funcionó y en realidad tuve que contactar con el apoyo de Squarespace. Simplemente te mostraré el correo ahora. Si entro en este correo electrónico de soporte, verás que hubo un problema y el equipo de ingeniería tuvo que aplicar una corrección al código del servidor de desarrollo local. Me acaban de pedir que vuelva a ejecutar la instalación con la última versión. El motivo por el que les muestro
esto es, esto está sujeto a cambios y esto está sujeto a cómo Squarespace quiere mantener el proyecto. En caso de tener algún problema, es posible que deba ponerse en contacto con el soporte técnico. encontré bastante receptivos. Fueron capaces de ayudarme y obviamente arreglaron el tema con bastante rapidez. Si recibes algún error después de esto, definitivamente te recomendamos contactar con el soporte de Squarespace. Muy bien, con eso fuera del camino, en realidad
podemos empezar a ejecutar nuestro servidor de Squarespace. El modo en que hacemos eso es tecleamos SquaresPace-server. Después ponemos la dirección de nuestro sitio después de eso. Actualmente lo tengo cerrado. Pero si vuelvo a account.squarespace.com, encuentra ese sitio web, se puede ver que esa es la dirección del sitio web. Voy a copiar eso,
pon eso justo después del servidor de Squarespace y después quieres usar la bandera - -auth, y eso te va a detener de obtener errores de permiso denegado. Está bien, así que dale a eso. Ahora para ti, podría volver a pedirte tu nombre de usuario y contraseña, en cuyo caso solo ingresa. Pero para mí, ya estoy conectado y lo que dice es que está escuchando en el puerto 9,000. Lo que eso significa es que podemos ir a nuestro navegador, abrir una nueva pestaña o ventana y ejecutar localhost: 9000. Es solo localhost: seguido del número de puerto, que suele ser de 9 mil. Ahora, cuando inicias por primera vez, Squarespace Live Server suele tardar un poco de tiempo en ponerse en marcha. De nuevo, tenemos que ser un poco pacientes aquí. Ya verás después de un periodo que ahora estamos ejecutando nuestra página web, pero en nuestra propia computadora, que es bastante guay. Si hago click en Blog, verás que tenemos la página del blog y luego podemos dar click en las entradas individuales del blog, click en la página Acerca de nosotros. El vínculo externo debería funcionar. Tenemos el sitio web justo aquí en nuestra computadora. Ahora es importante señalar aquí que si quieres hacer algún cambio en tu administrador, definitivamente
vas a necesitar empujar tu código. Este servidor en vivo se va a actualizar
tan pronto como editemos cualquier código de esta carpeta aquí mismo. Como puedes ver, está accediendo a todos los archivos. Si cambiáramos algo
, aparecería enseguida. Pero si queremos cambiar algo en nuestro admin. Aquí mismo, por ejemplo donde agregamos la capacidad de tener carpetas, vamos a tener que empujar ese código. Está bien. Ya veremos cómo funciona eso en un video posterior. Pero por ahora, tienes tu Squarespace Live Server funcionando y puedes hacer cambios al código de plantilla que en su mayor parte, se
verá afectado instantáneamente en este local, lo siento, en esta versión local. De nuevo, como dije, si quieres que vaya a esta versión que está en el sitio web real de Squarespace, vas a necesitar empujar, a que nos meteremos más tarde. Pero si por ejemplo, quisiera cambiar el lugar aquí donde es el título por algo completamente diferente. Entraremos en donde todo se sienta en tan solo un segundo. Pero por ejemplo aquí donde está el título del sitio, si cambio eso por solo Título del sitio, golpeo Guardar en eso, y luego refresco mi sitio web por aquí, puedes verlo se actualiza instantáneamente. Pero aquí arriba en el servidor real de Squarespace, no
has cambiado nada hasta que empujas ese código, lo que significa que lo subes a Squarespace. Está bien, entonces voy a cambiar eso de nuevo al campo dinámico. Eso va a ser todo para esta lección. En la siguiente lección, realidad
vamos a hablar de los principales conceptos del desarrollo de plantillas porque necesitamos
entender conceptualmente cómo funciona todo antes de que realmente
puedas cavar ahí y editar código. Espero con ansias esa. Te veré en el siguiente video.
7. Estructura de la plantilla y capa de datos en JSON: En este video, vamos a hablar de la estructura de plantillas, y si tenemos tiempo, hablaremos del otro concepto, que necesitamos entender para el desarrollo de plantillas, incluyendo, hija
Jason, y Jason T. En este momento, Tengo mi sitio web o mi plantilla funcionando en localhost: 9000 con el comando que vimos antes, squarespace-server, seguido de tu dirección de sitio web, luego dash, dash auth. En otro navegador tengo este diagrama. Lo que estás viendo aquí es un diagrama conceptual que he preparado que explica, cómo está todo configurada la plantilla. Entonces sin más preámbulos, voy a saltar directamente. Entonces en la parte superior, tienes tu plantilla, cual está configurada por el archivo template.conf. Entonces si volvemos a nuestra carpeta aquí, podemos ver este archivo aquí, template.conf es un archivo de configuración que se sienta en el corazón de tu plantilla. Da el nombre a la plantilla, proporciona al autor, y podemos definir diseños, navegaciones, y también las hojas de estilo con el fin de que queremos tenerlas cargadas. Si volvemos al diagrama, se
puede ver que este archivo template.conf es donde se definen los diseños y las navegaciones. Entonces si vuelvo al código, puedes ver que aquí tenemos un objeto para diseños, y tenemos un objeto o, una matriz con
un objeto dentro para las navegaciones. Si vuelvo aquí a los diseños, verás que los diseños enlazan directamente a las regiones. Entonces aquí en diseños, tenemos un diseño predeterminado que encontrar. Simplemente se llama default, y las regiones que está usando es solo una y es el archivo site.region. Entonces en un sitio web básico, solo
hay un archivo site.region, y ese es el layout. Básicamente, hay una relación uno a uno entre esto y el diseño. Pero como verás en un video posterior, podemos separar nuestros archivos de región y crear un layout que tenga múltiples archivos de región combinados, y eso tendrá mucho más sentido una vez que nos metamos en él en un
video posterior.El otro es esta matriz de navegaciones. Como puedes ver en nuestra página web, tenemos este bloque de navegación aquí mismo, cual podemos ver en nuestro código como la navegación del sitio con el nombre dentro del código de navegación del sitio. En realidad podemos agregar navegaciones a nuestra plantilla agregando a esta matriz aquí mismo. Entonces podríamos querer abrir esto, y lanzar otra navegación para, no
sé, navegación secundaria, tal vez. Ahí vas. Realmente no vamos a hacer eso en esta clase, así que voy a quitar eso. Pero teóricamente, podemos tener tantas navegaciones, como queramos no estoy seguro si hay límite para ellas, pero definitivamente podemos tener más de una. Lo mismo con los diseños, podemos crear tantos diseños como queramos, y podemos combinar archivos de región para crear esos diseños. Por lo que volviendo al diagrama para esta estructura, se
puede ver aquí que las regiones conforman los diseños, y un bloque está directamente vinculado a una navegación. Entonces si volvemos a nuestro código aquí, dentro de esta carpeta de bloques, podemos ver este sitio-navigation.block. Esto es lo que determina el código para la navegación de nuestro sitio. Entonces esto de aquí está determinando esto aquí mismo, estos elementos de navegación y cómo funcionan, se define aquí mismo. El que en realidad está vinculando la navegación, entraremos en detalles más adelante en esta clase. Pero en realidad podemos vincular la navegación usando el nombre del nav tal como está configurado en el archivo template.conf mediante el uso de esta etiqueta de navegación squarespace. Entonces cuando usamos esta etiqueta, traemos ese bloque específico. Como mencioné chicos, vamos a ver esto en la práctica muy pronto. Pero así como una visión general conceptual de alto nivel, estamos hablando de cómo toda la estructura funciona en conjunto para producir la plantilla.La otra cosa que he escrito aquí es que los bloques también pueden ser parciales también, y los parciales son solo fragmentos de código reutilizable. Si alguna vez te encuentras escribiendo el mismo código, e incluyéndolo en varias partes de tu plantilla, entonces vas a querer usar un bloque, escribe el código una vez dentro de ese bloque, y luego solo haz una referencia a ese bloque para traer ese código en todas partes que lo necesites. Para mí personalmente, no he encontrado muchas situaciones en las que necesito usar un parcial, así que no sé si hay un ejemplo específicamente en esta clase, pero proporcionaré un enlace a la documentación sobre cómo usarlo. En realidad es bastante simple. Entonces como pueden ver, los bloques están llevando a regiones, porque como les mostré antes, tenemos que traer el bloque a nuestro archivo de región de alguna manera, y con la navegación, es así. Con parciales, es una etiqueta diferente. Pero esencialmente siempre estamos usando el archivo de región o tal vez el archivo de lista o elemento, que veremos en tan solo un segundo, los
estamos usando para traer estos bloques. Por lo que los bloques por sí mismos no aparecerán en ninguna parte, necesitan estar en un archivo de región, o en un elemento de colección o archivo de lista. Volviendo al diagrama, puedes ver las regiones aquí enlazan a esta nube, que es squarespace.main-content. El motivo por el que se trata de una nube es porque no es un archivo en particular, es solo un atributo en el objeto squarespace, que veremos en tan solo un segundo que muestra el contenido de la página. Entonces si entramos en nuestro archivo de sitio.region, y busco squarespace.main-content, que es justo aquí, puede ver que aquí es donde se cargará el contenido principal de la página. Ahora mucha del tiempo ese contenido principal como aquí escrito, está determinado por el contenido de una página de squarespace regular. O como dice en el código aquí, es el contenido CMS. Entonces como vimos antes cuando estábamos usando el constructor de páginas para construir, digamos por ejemplo la página sobre y agregamos bloques, y usamos la interfaz para cambiar esta imagen, todo esto aquí mismo, es el contenido principal que está viniendo. Entonces como puedes ver, no importa en qué página
estemos, seguimos recibiendo todo el otro código que lo rodea. Pero el código dentro de squarespace.main-content es el contenido de la página que está cambiando. Nuevamente vamos a ver todo esto en la práctica, muy pronto pero sólo una comprensión conceptual de alto nivel, tal vez
tengas que volver al diagrama conforme vas a lo largo de esta clase, y eso es genial, pero esta es la teoría global detrás de la plantilla. Si has creado una página normal de Squarespace, así, y has puesto contenido de página usando el admin, entonces el contenido de squarespace.main solo será ese contenido. Pero si has configurado lo que se llama página estática, que es una página que escribimos nosotros mismos en la plantilla, entonces ese contenido aparecerá en este objeto, squarespace.main content. Si estamos viendo una colección en particular, lo que veremos es o bien contenido predeterminado del sistema que viene de Squarespace. O si hemos definido el código de colección nosotros mismos en nuestra plantilla, entonces el contenido squarespace.main mostrará el archivo de lista. Ejemplo perfecto, aquí mismo, tenemos una colección definida, que es el blog. Cuando estamos en la página de listado del blog, este es el código que aparece. Si vamos a nuestra página web y hacemos clic en este enlace para el blog, esta página de aquí mismo, está determinada por el código en este archivo. Por supuesto, este código viene a través Squarespace.contenido principal y luego tiene todo el otro código a su alrededor. Sólo para que esos chicos extra claros, voy a inspeccionar esto en el navegador, y mostrarles que tenemos este contenedor aquí, contenedor contenido, en nuestra región del sitio. Ahí se puede ver, y todo dentro de eso, es el código del archivo blog.list. Pasando por aquí a blog.list, puedes ver id del artículo Ahí tienes. Tiene todos los artículos en este bucle de ítem, para los
que puedes ver el comentario ahí mismo. El siguiente nivel abajo es el ítem. Recuerda hablamos de cómo una colección es una lista de ítems, y puedes echar un vistazo a la lista completa de ítem individual, mientras que el archivo de ítem es el código que conforma la página de elementos individuales. Si entramos en nuestro código aquí y miramos blog.item, este será el código que se cargue en el contenido squarespace.main, si estamos en un elemento individual. Al hacer clic en cinco ejercicios en casa que hacer, este código aquí mismo dentro de esta particular etiqueta principal, va a ser cualquier código que configuremos aquí. Esa es la estructura de plantillas justo ahí, en realidad
es bastante simple una vez que te pones la cabeza alrededor de ella. Obviamente, ahora mismo, esto es sólo conceptual y una vez que realmente empieces a hacer esto, vas a solidificar este conocimiento conceptual. Solo creé este diagrama después de pasar y hacer algún desarrollo de plantillas. Toma algún tiempo tener este concepto cementado en tu mente, así que no te preocupes, si todo esto es un poco vago por el momento, nos meteremos en cada uno de estos diferentes archivos de esta clase hoy. Pero el segundo concepto del que necesitamos hablar es el JSON DataLayer y JSON-T. A riesgo de que esta lección vaya un poco demasiado larga, voy a hablar de JSON-T, que es el lenguaje de plantillas de Squarespace. Ahora, en cada página de tu sitio web de Squarespace, hay un DataLayer JSON que existe. JSON es solo una forma sencilla de representar una estructura de datos, no
necesitas tener demasiado miedo de lo que es JSON, si ya no estás familiarizado con ello. Pero en cualquier página de nuestro sitio web, lo que podemos hacer es agregar un signo de interrogación, y luego escribir format=JSon-pretty, y veremos esa página en forma JSON. Entonces cómo funciona JSON es, solo
hay un objeto padre, y luego entramos y cavamos en estos objetos hijos. Entonces dentro de ellos tenemos diferentes atributos y más objetos anidados, matrices, todo tipo de cosas. Aquí mismo están todos los datos de que disponemos en esa página en particular. En cada página, lo que encontrarás es que tenemos un objeto de sitio web, por lo que podemos acceder al título del sitio de nuestro sitio web desde cualquier página. Podemos acceder a cosas como, el eslogan del sitio, podemos acceder a diferentes partes de la configuración de nuestro sitio web. Podemos ver la cuenta que actualmente está ingresada. El dato de la página individual está en este objeto de colección. Sé que es un poco confuso,
dado que esta página de inicio que estamos viendo no es en realidad una colección en sí, pero cada página, los datos de esa página específica en Squarespace están contenidos en este objeto de colección. Como puede ver, el título de este objeto de colección es Welcome, que es nuestra página de bienvenida. Puedes ver si tiene alguna etiqueta o categoría en esta página. El nombre de la región que estamos usando, que creo es el diseño, la etiqueta de tipo, todo tipo de datos relacionados con esta página específica. Ahora, como veremos más adelante, también
hay un dato que se vuelve disponible dentro del contexto de un bloque y que nos permite sacar elementos de nuestra navegación. Pero por ahora, este es el concepto principal, es que, tenemos esta capa de datos sentada en cada página, no importa a qué página vayamos en nuestro sitio web. A lo mejor voy a la página del blog, verás así es como se ve en el front end, pero detrás de cada página de tu sitio web de Squarespace, hay datos de JSON que se relacionan con esa página. Muchos de estos objetos van a tener la misma información que lo hacen en cualquier página como tu sitio web, eso no va a cambiar. Pero entonces el objeto de colección aquí mismo es lo que va a cambiar, dependiendo de en qué página estés. Tenemos el título, tenemos la cantidad de artículos dentro de esta colección, y como puedes ver, todas las etiquetas que hemos agregado están en esta matriz aquí y todas las categorías dentro del blog se enumeran aquí, en este array. De lo que estoy sacando aquí es que, todos los datos que quieres mostrar dinámicamente en tu página, provienen de esta capa de datos JSON. Como puedes ver aquí, en realidad tenemos los elementos individuales para el blog. El modo en que realmente tomamos los datos de esta capa JSON, y lo representamos en la página, es a través de JSON-T. Voy a abrir un nuevo navegador aquí,
load, developers.squarespace.com, head to template docs. Como puedes ver aquí, bajo este menú, tenemos un conjunto completo de instrucciones sobre el lenguaje de plantillas. Habla de lo que es JSON-T y habla de unos pedacitos de terminología. Creo que quizá ya hemos cubierto mucho en esta lección. Voy a romper esto en otra lección. Hablemos de JSON-T con más detalle en el siguiente video.
8. Descripción de JSON-T: En el último video aprendimos sobre la estructura de plantillas, e introdujimos la capa de datos JSON. El modo en que realmente traemos esos datos JSON a la página es a través de JSON-T. Yo quería separar este concepto en otra lección, porque me di cuenta de que hay un poco que pasar por aquí. Aquí hay mucha documentación en la página web de Squarespace, pero admito incluso para mí me tomó un poco de tiempo y práctica para ponerme la cabeza completamente en torno a este lenguaje básico. Pero después de usarlo en la práctica y entender cómo funciona, me he dado cuenta de que es bastante simple y espero que
esta lección te haga un poco más fácil de entender para ti también. JSON-T es un poderoso lenguaje de plantillas diseñado para ser emparejado con un conjunto de datos JSON. Esa es la frase clave aquí mismo, está diseñada para emparejarse con un conjunto de datos JSON. Recuerda en el último video vimos cómo cualquier página se convierte un conjunto de datos JSON cuando pones formato de signo de interrogación es igual a JSon-pretty. De hecho, los datos siempre están ahí sentados en esa página independientemente de si ponemos eso en nuestro navegador o no, eso es solo para ver los datos en un formato agradable. Pero si vamos en cualquier página y nosotros, esta es una buena zona a la que enfrentarnos. En ocasiones obtendrás un error de servidor interno 500, solo
necesitas reiniciar el servidor y luego debería funcionar de nuevo. Frustrante, pero parece ser lo único que lo arregla en esta etapa. Ahora está diciendo escuchando en puerto 9,000 lo voy a refrescar. Ahora que tenemos de nuevo nuestro sitio web, lo que voy a hacer es poner la capa de datos JSON de cualquier página en nuestra consola JavaScript usando el código que se proporciona aquí. Podemos ir a ver datos JSON, y podemos lanzar esto en cualquier lugar dentro de un archivo en particular y llegaremos a consola log el objeto para el alcance actual en nuestra consola JavaScript. Eso ya veremos en tan solo un segundo. Si queremos que suceda en cada página, podemos ponerlo en nuestro archivo site.region, pero por supuesto eso significa que el archivo site.region va a ser el contexto. Sólo mostrará lo que está en alcance para este sitio.region. Eso podría no tener mucho sentido. Pero veremos en tan solo un segundo cómo funciona esto. Lo voy a poner justo aquí después de la etiqueta del cuerpo, pega guardar en eso. Vamos a refrescar la página y abrimos nuestra consola, y puedes ver aquí tenemos un objeto. Es el mismo objeto que miramos antes cuando escribimos en formato es igual a JSon-pretty, pero ahora en realidad podemos ver la página y también podemos ver el objeto. Como se puede ver aquí, está
tirando de los elementos de esta matriz de artículos. Aquí te dejamos toda la información que está usando, y estamos tirando de eso usando JSON-T. Te recomiendo cuando estés escribiendo JSON-T, para abrir el objeto perfectamente en tu consola así, y luego puedes empezar a navegar por el objeto para determinar cómo vas a tirar
realmente el atributo específico que quieres fuera de este objeto. El principal concepto a entender con JSON-T, si volvemos a la documentación es que si tenemos un objeto en JSON que tiene baz hola y
escribimos baz, vamos a saludar. Si ponemos la llave en nuestro documento, vamos a obtener el valor. Esto es lo que se llama un par de valor clave en JSON. Echemos un vistazo a nuestra página aquí y veamos un ejemplo. Como puedes ver aquí tenemos la etiqueta de cuerpo de apertura, y dentro del ID estamos dando salida al ID de página en el objeto Squarespace. Echemos un vistazo a cómo eso corresponde a nuestro objeto aquí mismo. Si miro el objeto, desplácese hacia abajo, se
puede ver que hay un objeto Squarespace. Si abro ese objeto de espacio cuadrado, puedo ver el ID de página. Esto de aquí está haciendo referencia a este valor aquí mismo, y si realmente buscamos e inspeccionamos nuestro código HTML en este momento, se
puede ver que ese es el valor real que va en el campo ID. A un nivel muy básico, podemos comenzar en la parte superior del objeto, y luego podemos apuntar a cualquier objeto dentro este objeto y luego usando el.notación podemos ir más profundo. Podemos tomar el objeto Squarespace y luego entrar a la página ID. Nuevamente, puedes ver aquí estamos tomando clases de página del objeto squarespace. Por lo que escuarespace las clases de página, ahí tienes. También podemos usar lo que se llama etiqueta de sección. Lo que nos permite hacer una etiqueta de sección es acercar un área particular de nuestro conjunto de datos JSON. Aquí puedes ver en lugar de solo tener sitio web, hemos iniciado la etiqueta con una.section, y también tenemos que tener una.end para significar el final de este bloque de código. Lo que esto representa aquí es el objeto que vamos a estar acercando. Entonces tenemos sitio web de sección, si volvemos a nuestro conjunto de datos, recuerda que vimos antes el objeto del sitio web aquí, así que aquí está sitio web. Lo que básicamente estamos haciendo es acercarnos a este objeto en particular, y luego el símbolo 'at' que no hemos visto aquí, pero vimos aquí arriba se va a poner a sitio web porque estamos en ese ámbito. Si queremos tomar un atributo particular de ese objeto, realidad ya no
tenemos que escribir título
del sitio web.site porque ya estamos en el ámbito de un sitio web. Entonces podemos simplemente hacer referencia a cualquier clave dentro de ese objeto sin tener que escribir el padre. Simplemente nos ahorra un poco de reescritura. Aquí se puede ver dentro del objeto del sitio web, estamos buscando título del sitio, desplácese hacia abajo, ahí se puede ver título del sitio. También podemos simplemente eliminar esta sección por completo y en lugar de tener código de sección, podemos hacer lo que dije antes. En realidad podemos sólo por el título específico del sitio aquí, podemos simplemente poner website.site title. Eso debería funcionar igual de bien, cosa que sí. Voy a cambiar a eso atrás. Eso debería explicar los apartados. Volvamos aquí y veamos una sección repetida. Si tenemos una clave con un valor que es una matriz, entonces podemos básicamente recorrer todos los elementos y el alcance a ese elemento en particular usando punto sección repetida y luego el nombre del objeto. Como mencioné antes, esto en símbolo hace referencia al ámbito en objeto. Veamos eso en acción aquí mismo yendo a nuestro bloque de navegación. Porque la navegación no es una página en sí misma, vamos a tener que tomar este código, dirigirnos a la navegación del sitio, y una vez que esté en esta sección repetida, aquí mismo estamos tomando los elementos de navegación y estamos sacando datos de cada elemento individual. Si yo fuera a hacer un registro de consola aquí, ahora vamos a ver los datos de cada elemento individual. Vamos a refrescarnos por aquí. Como puedes ver, tenemos cuatro elementos de menú, y por lo tanto, tenemos cuatro objetos que aparecen. Todos estos objetos deberían ser bastante similares porque todos son enlaces. Como puedes ver dentro, tenemos atributos como, es el enlace activo, es una carpeta, y tenemos el objeto de colección, lo que nos da toda la información como este es en realidad un enlace de carpeta. Voy a ir a la segunda. Aquí puedes ver este es el enlace al blog. Tenemos el título del enlace y luego lo más importante, en realidad
tenemos la URL al blog, y eso es lo que necesitamos para crear un enlace. Regresando a aquí, se
puede ver desde dentro de este ítem, estamos alcanzando el alcance de la colección y estamos tomando la URL completa y el título de navegación. Nuevamente, estamos recorriendo y sacando todos estos objetos como puedes ver, y para cualquier objeto dado en este bucle, vamos a entrar en colección, estamos acercando a ese contexto, y estamos tomando la navegación título y la URL completa como se puede ver aquí mismo. Aquí también estamos acercando a otra parte del contexto JSON, estamos acercando al enlace externo. Si abrimos el objeto final, se
puede ver que en lugar de un objeto de colección, tiene enlace externo. Entonces estamos sacando de eso el título y la URL como puedes ver aquí, URL y título. Es importante señalar aquí también que la sección etiquetada aquí nos
permite comprobar la existencia de ese objeto. Aquí puedes ver esto es esencialmente decir, si hay un objeto de colección, saca la URL completa y el título de navegación de él y ponlo en esta estructura HTML. Si no hay un enlace externo, toma esa información y pon eso en un enlace mucho igual. Como se puede ver aquí, este es un ejemplo perfecto. En realidad no es usar los datos de nueva ventana porque la nueva ventana es simplemente verdadera o falsa, aquí mismo. Pero básicamente es decir si la nueva ventana es verdadera, entonces abriremos un enlace en una nueva pestaña usando target es igual a subrayado en blanco. Sección nos permite acercar un contexto particular con el objeto JSON, pero también nos permite comprobar si existe un atributo o un objeto dentro de ese ámbito. Como se puede ver aquí, este es otro ejemplo. Si activo es cierto, entonces vamos a poner esta clase en este elemento de lista. Entiendo que esto podría ser un poco pesado para tener la cabeza al principio,
pero a medida que te mueves y en realidad comienzas a usar esto, empiezas a darte cuenta de que este lenguaje JSON-T no es realmente tan complejo. Esto en realidad es del 80% al 90% de todo el idioma. Es solo acercar las intersecciones y tirar de datos del objeto JSON de esta manera. Si volvemos a la documentación, hay algunas otras cosas que tener en cuenta. Si hacemos click en directivas, puedes ver que tenemos la sección, sección repetida. También podemos crear un o que es como otro. Podemos comprobar la existencia del artículo. Si existe, tenemos esto, pero si no, tendremos esta presentación. También puedes tener alternos con los que es bastante cool. A medida que estás buceando por algo, podemos agregar algo al final de cada línea. Entonces también podemos crear nuestras propias variables. Si quisiéramos facilitarnos la vida, podemos asignar ciertos atributos a una variable personalizada y utilizarlos. Honestamente, en realidad no estoy usando mucho esta característica porque los datos están todos ahí. No hay muchas opciones para manipular variables de todos modos en JSON-T, pero esa también es una opción ahí mismo. También podemos agregar comentarios, pero eso no es particularmente importante. El principal otros conceptos a entender es éste, predicados. Estos predicados básicamente, no necesariamente objetos dentro de tu contexto JSON, sino directivas especiales que Squarespace proporciona para comprobar la existencia de cosas. Uno común y uno que veremos en esta clase es el predicado de carpeta. Eso básicamente prueba si el elemento de navegación es una carpeta. En la situación aquí, donde tenemos este primer enlace como carpeta, queremos tratarlo de manera diferente. Perdón, necesito dar click en este de aquí. Queremos tratar este de manera diferente a los otros enlaces porque es una carpeta, no
está enlazando a una página. predicados nos permiten comprobar si el contexto en el que estamos buscando cumple con ciertos criterios, y lo veremos en tan solo un segundo. También tenemos esta cosa llamada Formatter JSON-T, y ya lo hemos visto ahora con tomar el objeto y convertirlo en algo que es bonito JSON. Si elimino esto, me pregunto si mi navegador seguirá mostrando el objeto muy bien. Si actualizamos la página aquí, verás que mi navegador aún reconoce eso como JSON y lo formatea de una manera agradable. Pero si solo llevamos el objeto aquí y no usamos un formato en absoluto, verás aquí que simplemente no exporta en absoluto. Estamos tomando los datos del objeto y necesitamos formatearlos
en un formato JSON legible por humanos para que lo veamos. Ese es un ejemplo de formateador. No hay demasiados ejemplos. No creo que eso vaya a pasar en esta clase. Pero cuando lo veas, tal vez estés editando una plantilla existente y
ves que hay este símbolo de pipa y luego una palabra clave después de ella. Observe que en realidad está tomando lo que hay la izquierda de la tubería y formateándolo de alguna manera. Por ejemplo, en realidad, este ejemplo probablemente existe en nuestra base de código. Si entramos en un elemento de blog, puedes ver aquí tenemos el agregado en objeto y estamos formateando eso de una manera particular, aquí
mismo usando esta fecha formateador JSON-T. Son útiles. Dicho eso, no
hay demasiados de ellos. Simplemente dirígete a la documentación para ver las disponibles y si lo ves en tu código aquí mismo, hay una pipa y un guión. ¿Qué significa esto? Simplemente dirígete directamente a la documentación y búscala. Como subconjunto de formato ya que también tienes ayudantes, que son igual que los formateadores, pero la principal diferencia que verás es que cada uno de estos ayudantes es una tubería y una palabra clave después del símbolo at. Está tomando un objeto completamente destacado y básicamente está tirando nueva información que podría no existir ya en el objeto. Por ejemplo, no tenemos una imagen necesariamente todavía, no creo. A lo mejor en la página sobre nosotros. Esa imagen se genera dinámicamente, no
vamos a poder demostrar eso en este momento. Pero esencialmente, verás en un video posterior usaremos image dash meta y traeremos la información de mezcla sobre una imagen usando este ayudante JSON-T. Eso lo verás en un video posterior. Los ayudantes también están con la pipa y una palabra clave, esta es otra página para buscar si estás tratando de
averiguar qué es algo cuando ves este tipo de sintaxis. El último, las variables del sistema. Esto es algo que se sienta en tu capa de datos JSON. Ya lo hemos visto todo antes cuando entramos a nuestra consola. Cuál es uno de ellos, encabezados de Squarespace. Si nos desplazamos hacia abajo, podemos ver que hay un objeto para los encabezados de Squarespace, y contiene un montón de código diferente que viene de nuestro back end y entra en nuestra sección de cabeza de nuestra plantilla. Si entramos en nuestro sitio dot region file, puedes ver que solo estamos dando salida a ese objeto directo a nuestra sección de cabecera aquí. Mucho contenido ahí. Eso no es absolutamente todo dentro de JSON-T, estoy seguro. Pero esos son los conceptos principales y como dije, todo está aquí en la documentación. Yo sólo pensé que hablaría un poco de ello
también porque me llevó algún tiempo ponerme la cabeza alrededor de él. Pero ahora que lo he usado en la práctica, me he dado cuenta de que es bastante simple y empezarás a entender que al final no hay mucho. Dependiendo de cuánta práctica te darás con la codificación de plantillas JSON, empezarás a solidificar este conocimiento en tu cabeza y empezará a ser mucho más sencillo. Tengo la sensación de que este video es lo suficientemente largo, así que vamos a seguir adelante y en realidad finalmente editar nuestra plantilla. Sé que hay mucha teoría antes de que llegáramos realmente a este punto, pero ahora realmente vamos a entrar ahí,
hacer cambios en nuestra plantilla y mostrarte todas las características del Modo Desarrollador. Estoy emocionado por finalmente sumergirme y hacer algunas ediciones. Te veré en el siguiente video.
9. Diseños y regiones: Después de un poco de teoría y un poco de configuración, ahora en realidad
es el momento de empezar a editar nuestra plantilla. Tiempos emocionantes chicos, me alegro de finalmente meterme en ello. Pero claro, la teoría también es importante,
así que no saltes eso. Pero ahora en realidad podemos crear algunas ediciones a nuestro sitio web dado que tenemos ese conocimiento teórico. Una de las primeras cosas, quiero hacer es actualizar el diseño. Como puedes ver aquí, no
me gusta mucho cómo todo está solo sentado a la izquierda de la página. Me gustan más las cosas centradas, y también para la página de inicio que vamos a crear en un segundo, me gustaría que todo ancho. En muchos sitios web, probablemente hayas visto el contenido de como una entrada de blog o una página en particular se sentará dentro de un poquito de contenedor aquí, no
va de ancho completo, eso hace que sea un poco más fácil de leer, pero en la página de inicio, a menudo
verás secciones de ancho completo. Eso es lo que vamos a crear en este video. Lo primero que vamos a hacer es dirigirnos a nuestro código, asegurarnos de que estamos ejecutando nuestro servidor local. Lo que voy a hacer es dirigirme al directorio de estilos. Vamos a hablar de cómo CSS se compila más sobre menos, y cómo todo se empaqueta juntos en tu plantilla más adelante en esta clase. Pero por ahora lo que quiero hacer es simplemente golpear en “base.Menos”, y encontrar la regla de estilo para el contenedor. Está justo aquí en el site-container, como puedes ver, tenemos un ancho máximo y sin márgenes automáticos. Eso es lo primero que voy a cambiar. Voy a cambiar el max-width a 1,140 porque me gusta más ese número, quitar el relleno y darle un margen izquierdo y derecho de orden. Vamos a pegarle ahorrar en eso. Cuando refresquemos la página, verás que nuestro contenido ahora es más ancho y se sienta en el medio, sin importar el tamaño de la pantalla, siempre y cuando esté por encima de los 1140. Si bajamos a aquí, podemos ver que por debajo de 1140 no hay márgenes a ninguno de los dos lados, así que eso es otra cosa que tendremos que arreglar. Voy a bajar aquí, y dentro de menos realmente podemos ir dentro del código para contenedor del sitio y poner nuestra consulta de medios aquí. Media max-width 1140 pixels. Vamos a tener el margin-derecho, 20 píxeles y el margin-izquierdo 20 píxeles. El orden de esos no importa. Volviendo a nuestra página aquí, y si meto esto, verás una vez que llegue a 1140 píxeles del ancho de la ventana, obtendrás un margen fijo de 20 píxeles a cada lado. Ahí vas. Enfriar. Ese es un ejemplo de un cambio CSS que podemos hacer a nuestra plantilla aquí. Pero lo que quiero hacer es realmente crear un diseño alternativo. El motivo por el que quiero hacer eso es que voy a crear una página de inicio que permita secciones de ancho completo. Esta imagen al estar en el medio, tendrá de ancho completo y tendrá como texto sobre la parte superior. Antes de que realmente creemos ese layout, lo que voy a hacer es realmente crear la página en nuestro sitio web de Squarespace. Voy a pasar por la dirección de mi SquarespaceWebsite/config. Dirígete a las páginas y aquí para la página de bienvenida, solo
podemos editar esto directamente. Podemos entrar aquí y editar el contenido de la página. Ahora mismo tenemos este diseño de tres columnas con esta imagen aleatoria arriba arriba, voy a eliminar todo el contenido. Esto es solo contenido demo de todos modos, y pongamos en realidad algún contenido que sea más relevante para este sitio web falso. O bien podemos hacer clic en este símbolo más aquí, voy a dar clic en estas pestañas porque aún no hay contenido. Voy a hacer clic en el plus, y voy a insertar lo que se llama póster. Un póster es solo una imagen de fondo con texto en la parte superior. Voy a buscar una imagen para un gimnasio. Solo seleccionemos este. Voy a escribir aquí un título, “Tu Gimnasio Amistoso de Vecindario”, y luego el subtítulo aquí, “Ven a saludar”. Para fastidiar un poco más esta página. Lo que voy a hacer es insertar un poco de un video primario. Esta vez en realidad voy a hacer clic en esta pestaña aquí, y, voy a buscar video, que está ahí debajo de básico, y, voy a insertar un video que preparé antes para este gimnasio falso. Originalmente llamé al gimnasio, Mochila Gym. Este es mi tonto video promocional que creé. Pero como puedes ver, es otra pieza de contenido que podemos agregar, al igual que podemos agregar tantas cosas diferentes como una cita, un botón, un inserto de audio, todo tipo de cosas. Slideshow, todo tipo de cosas que está disponible aquí dentro de Squarespace. Para nuestra página de inicio, solo lo voy a dejar en eso. Voy a dar click en “Guardar”. Esa es ahora nuestra página de inicio. Entonces si vamos a nuestra versión local, y quitamos la escoria al final y solo vamos a localhost: 9000. Desafortunadamente, el contenido aún no ha llegado, en situaciones como esta, lo que me gusta hacer es reiniciar el servidor. Esto debería cargar los cambios más recientes de nuestra página web de Squarespace. Nuevamente va a tomar un tiempo para cargar. Dejemos que se cargue y echemos un vistazo una vez que esté terminado. Como puedes ver aquí, tenemos tu amigable gimnasio de vecindario, Ven a saludar, y tenemos nuestro increíble pequeño video promocional aquí. Apenas gente al azar ejerciendo usando material de archivo de stock. todos modos, así que se obtiene el punto. Tenemos el cartel y el video aquí mismo, pero el tema con esto es que queremos que sea de ancho completo. Ahora la razón por la que no es de ancho completo es porque tenemos el contenido en este sitio-contenedor. Si miro el código, muchas cosas aquí, pero aquí en este div, tenemos sight-container. Hay dos cosas que vamos a tener que hacer aquí. Vamos a tener que mover este div a cada uno de los encabezados, la sección principal, y al pie de página; porque aún queremos que el encabezado y el pie de página estén en el contenedor. Pero queremos que el contenido de solo la página de inicio y cualquier otra página que establecimos a este diseño específico sea de ancho completo. El primer cambio es que vamos a volver a posicionar el div para site-container, y antes de hacerlo,
lo que voy a hacer es dividir nuestro archivo site.region en tres partes diferentes. El encabezado, el pie de página, y la sección media, que puede seguir siendo el nombre site.region. Te mostraré cómo podemos hacer esto ahora mismo. Voy a llevar todo por encima de este punto de inyección de contenido CMS. Copia eso en mi portapapeles, crea un nuevo archivo de región llamado header.region. Pega eso ahí dentro, y luego saquemos todo después de esta etiqueta principal, que representa nuestro pie de página. Asegúrese de que eso está guardado en el portapapeles, y luego, footer.region. Dulce. El anidamiento es bueno ahí y en el interior.región, solo
queremos limpiar el anidamiento y poquito aquí. Tenemos que actualizar nuestro diseño ahora para decirle a Squarespace que queremos cargar en orden el encabezado, el sitio, y el pie de página. En nuestro archivo template.com, lo que vamos a hacer es agregar encabezado y pie de página a nuestra matriz de archivos de región aquí. Básicamente, lo que hemos hecho, esto va a producir exactamente el mismo resultado, pero esto va a dividir nuestro archivo de región en tres secciones diferentes, porque quizá queramos que esta sección media sea diferente en otras páginas, pero queremos que el pie de página y el encabezado permanezcan igual. También hace que sea un poco más fácil de editar. Si quiero editar algo en mi encabezado, sé que
tengo que ir a header.region y si quiero editar algo en mi pie de página, puedo ir a footer.region por lo que algunos beneficios para hacer esto. Volvamos a nuestra página web y actualicemos y probemos que no hay ningún problema. Ahí vas. Todavía tenemos el encabezado, el pie de página, que es solo este texto y tenemos el contenido en el medio, así que sigue funcionando. Pero ahora lo que podemos hacer, es que podemos crear otro layout en nuestra template.conf. Voy a copiar este objeto y luego actualizar algunas cosas. Este en lugar de predeterminado, voy a llamar a ancho completo y el título que aparecerá en el squarespace admin será de ancho completo. En lugar de sitio en el medio, voy a crear otro archivo de región llamado full width.region. Full-width.region va a tener básicamente el mismo contenido que site.region, pero la diferencia es que no vamos a usar el contenedor del sitio dentro. Te mostraré cómo se ve eso en tan solo un segundo. Refrescando nuevamente la página, no debe
haber diferencia hasta que empecemos a hacer estas ediciones a la posición del desarrollo. Pero como te mostré antes, contenedor del
sitio encapsula
el encabezado, el contenido, y el pie de página así que vamos a necesitar reestructurar esto. Encabezándome a nuestro archivo de encabezado aquí mismo, voy a quitar esta etiqueta de apertura y luego entrando en el footer.region, voy a eliminar esta etiqueta div aquí. Ahora bien, si actualizamos la página, todo va a ser de ancho completo. Ahí vas. Como mencioné, lo que queremos hacer es tener este encabezado y pie de página en el contenedor para la página de inicio, pero el contenido de la página de inicio sea de ancho completo. Lo que vamos a hacer es volver a agregar en el contenedor del sitio, pero dentro del pie de página y dentro del encabezado. Aquí mismo, ya estamos dentro del archivo de pie de página así que empecemos aquí. Voy a envolver el contenido
del pie de página en el sitio container div y luego para el encabezado, voy a hacer lo mismo. Mover al encabezado aquí, va a agregar en este div para contenedor de sitio. Pulsa Guardar en eso, vuelve aquí, refresca la página y verás que ahora esta sección media es de ancho completo, pero el encabezado y el pie de página todavía están en ese contenedor. El problema con esto, sin embargo, es que cada página de nuestro sitio web ahora va a ser de ancho completo, como se puede ver. Todavía queremos que las otras páginas de nuestro sitio web estén dentro del contenedor, es solo que queremos que la página de inicio sea de ancho completo. Lo que tenemos que hacer es, agregar el contenedor del sitio a nuestro sitio.region aquí. Eso arreglará ese tema. Ahora, en cada página que utilice el diseño que aquí definimos de forma predeterminada, usará encabezado, costado y pie de página. el fin de conseguir lo mejor de ambos mundos en el sentido que queremos que muestre
el layout alternativo en nuestra página de inicio. Queremos ancho completo, pero en las otras páginas queremos solo un diseño predeterminado. Vamos a tener que empujar los cambios, que pasen al squarespace admin y luego podamos realmente seleccionar nuestro nuevo layout, dentro del squarespace admin. Vamos a echar un vistazo a nuestros diseños aquí. Me he dado cuenta de que en realidad necesitamos cambiar la sección media a ancho completo. De esa manera se va a tirar en esta región aquí, que no tiene el div con la clase de contenedor de sitio. La diferencia entre los dos diseños, esto y esto es prácticamente lo mismo a excepción de este sitio contenedor div, ¿de acuerdo? Cualquier página que utilice el ancho completo del diseño, va a usar estas regiones, y cualquier página que utilice el diseño predeterminado va a usar estas regiones. Como ya he mencionado anteriormente, para poder ver realmente este layout alternativo en admin y seleccionarlo, vamos a tener que empujar estos cambios a nuestra página web de Squarespace. Lo que voy a hacer, es abrir una nueva terminal aquí. Lo que vamos a tener que hacer primero, es usar la palabra clave get ad with a dot, y eso sumará todos los cambios que hemos hecho hasta ahora en nuestro commit. Entonces, voy a hacer un commit, usando dash m, puedo escribir un mensaje. El mensaje va a ser, agregue un diseño de ancho completo. Ahora lo hemos comprometido con git, podemos escribir git push y va a empujar ese cambio a la página web de Squarespace. Ahí se puede ver, está actualizado y ahora, podemos bajar nuestra página web de Squarespace. Como puedes ver, se produce un efecto un poco funky, y eso es porque dejamos en esa consola log en nuestra región de punto de cabecera. Hacer un registro de consola para que pueda ver capa de datos
adyacente es útil cuando está haciendo desarrollo. Pero por alguna razón cuando lo empujas a tu página web de Squarespace, termina rompiendo el admin, y así conseguirás este extraño efecto. Lo que voy a hacer es simplemente quitarlo por ahora. De esa manera no tenemos la página web de aspecto funky. Tendré que volver a agregar ese cambio a mi commit, hacer otro commit, diciendo remove console log, y luego empujar eso de nuevo. Una vez que eso sea empujado, podemos refrescar nuestra página por aquí, y todo debería estar bien. Ahora lo que deberíamos tener en nuestro admin Squarespace, es el otro layout registrado. A ver si este es el caso. Al entrar en nuestra página de bienvenida aquí y hacer clic en el icono del engranaje. Quiero que hagas click en avanzado, y aquí puedes ver una nueva opción apareciendo para el diseño de página. Creo que si no hay opción para
cambiarlo, no aparece en absoluto. Pero debido a que hemos agregado ancho completo, ahora
podemos cambiar el diseño de predeterminado a ancho completo, en esta página. Vamos a golpear save, y ya verás que ahora tenemos una sección de ancho completo. Eso se debe a que tenemos este diseño alternativo definido aquí llamado ancho completo, que utiliza un archivo de región diferente en el medio entre encabezado y pie de página. Eso es lo que te da la sección completa de látigo. Si bien en estas otras páginas que todavía están usando el diseño predeterminado, aún
tienen el contenedor. Para recapitular, lo que hemos hecho es que nos hemos separado en nuestro archivo de región en tres partes diferentes, el encabezado, la sección media, y el pie de página, y eso nos ha permitido mantener el encabezado y el pie de página son los mismos para otros diseños. Todavía podemos usar ese código, pero luego para la sección media, podemos intercambiar ese archivo de región punto del sitio por otra
cosa como este archivo de región de puntos de ancho completo. También actualizamos un poco de CSS. Ahora estamos listos para mirar la siguiente parte del diagrama. Si hago click sobre aquí es navegación. En la siguiente lección, veremos los bloques y cómo podemos actualizar los bloques para actualizar nuestra navegación.
10. Navegación y bloques: En la lección anterior, creamos algunos nuevos archivos de región, y lo hicimos con el fin de configurar nuevos diseños en nuestro archivo de plantilla dot conf. En esta lección, vamos a hablar de las navegaciones y cómo podemos representar en las navegaciones usando bloques. Si me dirijo a mi código y vamos al único archivo de bloque en bloques, este es el archivo de bloque para la navegación. Volvamos al diagrama y hablemos de cómo este bloque es realmente traído a nuestra región. En nuestro archivo de plantilla dot conf, tenemos nuestros diseños como vimos en la última lección, pero también tenemos una matriz de navegaciones. Muchas veces solo hay una navegación, pero aquí podemos crear múltiples navegaciones. Quiero llamar su atención sobre este par de valores clave aquí mismo. Este es el nombre que vamos a hacer referencia en nuestro código. Como verás en el diagrama, las navegaciones están configuradas en tu fichero de plantilla dot conf, pero el código para esas navegaciones existe en bloques que van a lugares como regiones. Veamos eso en efecto ahora. Si voy a mi región de cabecera, que es donde está la navegación, veremos esta etiqueta especial proporcionada por squarespace. Squarespace colon navigation trae en una navegación que hemos definido en nuestra plantilla dot conf. Recuerda dije que tomaras nota de este nombre aquí mismo, SiteAV. Aquí en nuestro ID de navegación en esta etiqueta está ese nombre exacto. Estamos diciendo aquí en esta etiqueta que queremos utilizar esta navegación en particular que hemos configurado en nuestra plantilla dot conf. El siguiente atributo es la plantilla igual. Aquí es donde definimos el bloque que va a contener esa navegación del sitio. Aquí podemos ver navegación del guión del sitio. No necesitamos poner el bloque de puntos al final, se
puede ver que este mapea perfectamente al sitio dash navigation block punto aquí mismo. Dondequiera que pongamos esta etiqueta estamos registrando esa navegación que configuramos en plantilla dot conf y le estamos diciendo que use el código en este bloque. Aquí mismo, se renderizará el código que coloquemos dentro de aquí. El otro punto a tener en cuenta de la navegación es que nos dará acceso a una matriz de artículos. Dentro de cualquier bloque de navegación tendremos una matriz de elementos. De hecho, sólo probemos eso ahora mismo. Voy a mover esto por encima de nuestra sección repetida para que podamos ver cuál es el contexto JSON dentro de este bloque de navegación. Si actualizo la página por aquí, es posible que necesitemos reiniciar el servidor. He tenido esto sentado inactivo por un tiempo, así que solo necesitamos reiniciar ejecutando el servidor squarespace, seguido de la dirección, seguido de la auth dash. Ya deberías estar familiarizado con eso. Está escuchando en el puerto 9,000 vamos a refrescar la página y esperar. No sé si va a tardar tanto en tu extremo, pero para mí toma como 30 segundos para que se cargue todo el asunto, así que no es un paquete muy eficiente en este momento, pero ojalá mejore. Después de lo que se sintió como una eternidad ahora está apareciendo. Si me dirijo a mi “Consola” aquí podemos ver este objeto aquí. En este objeto veremos una matriz de elementos y en esta matriz de ítems, objetos de
colección que tienen nuestra navegación. Dentro de nuestro elemento de navegación, si miramos el contexto JSON dentro de eso, tenemos acceso a una matriz de elementos. Si acabamos de dar salida a esto fuera de la navegación, entonces no tendremos acceso a esa matriz de navegación. Volvamos a poner eso donde estaba antes. Ahora vamos a tener que consolar los logs. Refresca la página por aquí. Como puedes ver, tenemos dos objetos. El primero, si miramos por dentro, no tiene artículos. Este es el que está viniendo desde la región de punto del sitio o región de punto de cabeza más bien. Pero éste viene de nuestra navegación. Aquí puedes ver que tenemos artículos. Eso es importante tener en cuenta. No verás los ítems si miras el contexto JSON en el archivo de región. Pero si se profundiza en la navegación, se crea esa matriz de elementos. Eso es muy importante porque ahora vamos a recorrer en ciclo esos ítems y producir un elemento de lista para cada uno de esos ítems. Te explicamos un poco sobre el JSON-T que está pasando aquí en la lección sobre JSON-T, así que deberías tener una comprensión bastante buena de cuáles son
estos y de dónde vienen, de esa lección. Pero hay un cambio que realmente necesitamos hacer aquí, y es que nuestra plantilla actualmente no soporta carpetas. Recuerda agregamos las carpetas dot conf archivo aquí mismo a nuestra carpeta de colecciones. Eso nos permitió crear una carpeta en el admin. Pero nuestra plantilla no tiene la capacidad de
tener un menú desplegable cuando pasamos el cursor sobre la carpeta, que es probablemente lo que esperarías de tu navegación. Primero lo primero, construyamos nuestra carpeta. Voy a dar click en esta “Nueva Carpeta” y quiero cambiarla a, hagamos una carpeta llena de los diferentes “Tipos de Clase”. Voy a actualizar el título de la página, título navegación, y babosa. Golpea “Guardar” en eso. Ahora lo que podemos hacer es crear páginas dentro de esta carpeta, así que voy a crear una página y la llamaremos HIIT for High Intensity Training. Ahora puedes ver que hemos creado esta página de HIIT. Lo que quiero hacer antes de ir más allá es dar clic a este icono aquí para abrir la carpeta. Entonces lo que puedo hacer es arrastrar esta página dentro de esa carpeta. Ahora como dije antes, realidad no
admitimos los menús desplegables cuando pasamos el cursor sobre las carpetas aún en nuestra plantilla. Pero aquí dentro puedes ver claramente que estamos anidando esa página dentro de esta carpeta. Para esta página de HIIT, lo que voy a hacer es poner en un título, Entrenamiento por Intervalo de
Alta Intensidad, también
conocido como HIIT. Ahí vamos. Voy a cambiar eso a un Rumbo 1. Entonces abajo aquí, porque realmente no importa para el propósito de esta clase, vamos a encontrar un generador Lorem ipsum. Esto es bueno para poner en contenido de párrafo falso solo para ver cómo se vería. Básicamente contenido ficticio. Ahora tenemos una página para Entrenamiento por Intervalo de Alta Intensidad. Lo que voy a hacer para construir esta carpeta es duplicar esta página. Volveré un segundo atrás. En realidad puede hacer clic en este engranaje, desplazarse hacia abajo en “General”, y luego hacer clic en “Duplicar página”. Confirma que quiero hacer eso. Voy a llamar a éste “Pilates”. Pongamos eso debajo de HIIT y por supuesto vamos a tener que cambiar. Toda la URL se cambia a “Pilates”, así que eso está bien, pero tenemos que cambiar el título aquí. Pilates. “Guardar” eso, y luego una página más duplicada. Vamos a llamarlo CrossFit como la última clase. Arrastre ese de no vinculado a la foto y luego, una vez que lleguemos a esa página porque está duplicada, solo
necesitamos actualizar esto a CrossFit. Hit Save en eso. Ahora, tenemos una carpeta para tipos de clases con tres páginas diferentes que describen varios tipos de clases. En este momento, nuestra navegación aquí arriba no reconoce y muestra páginas que están dentro de una carpeta porque recuerden, agregamos la capacidad de tener carpetas en esta plantilla después de que empezamos con ella. Esta plantilla por defecto no tiene menús desplegables, pero podemos fácilmente que en ahora usando JSON-T. Si voy al código, vamos a aclarar todo esto. Simplemente puedes empezar desde donde necesitamos empezar, y podemos entrar en el archivo site-navigation.block. Por cada artículo, lo que queremos hacer es comprobar si se trata de una colección, estamos comprobando si se trata de un enlace externo, pero no estamos revisando si es una foto. Por encima del enlace de colección, lo que voy a hacer es poner en un creo que lo llaman predicado en JSON-T, pero hay un predicado especial que te mostré antes, que comprueba si algo es una carpeta. Entonces, vamos a poner el final, vamos a traer eso y sólo te voy a mostrar si volvemos a la documentación, podemos ver todos los predicados aquí, y si busco carpeta, lo
verás solo prueba si una navegación elemento es una carpeta porque necesitamos tratar un elemento de menú de carpeta de manera diferente. Volver a nuestra página. Si es un elemento de menú de carpeta, lo que quiero hacer es poner en un enlace que en este momento, no irá a ninguna parte. Simplemente no pongamos un href, pero quiero poner una etiqueta con el título de navegación. Este va a ser el nombre de la carpeta básicamente. Entonces, lo que quiero poner es una lista desordenada de todos los elementos de menú dentro de esa carpeta. El modo de hacerlo es si realmente miramos el código, así que pasemos a nuestra versión local donde tenemos todos los console.logs. Echemos un vistazo. En nuestra matriz de elementos, en el primer elemento dentro del objeto de colección, y podemos ver esta es la carpeta, y si nos desplazamos hacia abajo, actualmente, no hay subelementos de menú, por lo que solo necesitamos actualizar la página aquí. Aquí vamos. Tenemos la colección, que es el título de navegación para la carpeta, pero luego, también
tenemos elementos dentro de este ítem, y ahí es donde podemos recorrer y sacar las diferentes páginas dentro de esa carpeta. veo que he cometido un poco de error aquí y necesito poner en colección delante de aquí porque no hemos acercado a ese contexto como lo hemos hecho aquí abajo. Lo que voy a hacer aquí es iniciar otra sección repetida. So.Artículos de sección repetidos, al igual que hemos hecho aquí arriba, pero ahora estamos dentro de uno de estos elementos, y hay una matriz de elementos anidados. Lo que voy a hacer es lo mismo que hemos estado haciendo aquí. Si se trata de una colección, en primer lugar, queremos poner en un elemento de lista independientemente del tipo de enlace que sea. Lo pondré en el elemento de lista. Si hay una colección presente, que básicamente significa cualquier página de tu sitio de Squarespace aparte de un enlace externo, como aquí abajo, vamos a crear una sub-lista debajo. Voy a pegarle a Save en eso. Veamos qué sucede cuando ejecutamos esto en nuestro servidor local. Ya verás que ahora se acerca el código que hemos escrito en nuestra navegación. Tenemos este tipo de clases. Se trata de una etiqueta de enlace sin href porque no enlaza a ninguna parte, y dentro, tenemos otra lista desordenada con todos los enlaces a las páginas dentro de esa carpeta. Tenemos un pequeño problema aquí porque tenemos otro enlace de colección aquí para los tipos de clase. Desafortunadamente, aunque sea una carpeta, aparece como una colección. Para arreglar eso, todo lo que necesitamos hacer es tomar todo ese código y asegurarnos de que sea uno u otro. Si es una carpeta, la vamos a tratar de esa manera, pero si no es una carpeta, tratamos la colección de esta manera, y eso debería detener el elemento de menú duplicado. Al actualizar la página por aquí, ahora
puedes ver que tenemos tipos de clases listados aquí arriba con una lista desordenada para los diferentes tipos de clases dentro de nuestra carpeta. Podemos hacer click sobre ellos porque hemos configurado la URL y puedes leer sobre todos los diferentes tipos de clases. Ahora, obviamente, necesitamos hacer algunos cambios en CSS aquí porque esto no se ve tan genial. Lo que queremos hacer es entrar aquí y asegurarnos de que esto no se muestre por defecto y luego, cuando pasemos el cursor sobre los tipos de clase, aparecerá. Eso es todo lo de CSS justo ahí. Ahora lo voy a lanzar rápidamente juntos, pero el principio principal aquí es que somos capaces de
acceder a los subítems dentro de este ítem del menú. Vamos a arreglar un poco esto entrando en base.menos. Vamos a estar dentro de nuestro elemento de navegación del sitio. Si nunca has usado menos antes, es igual que Sass o cualquier otro compilador de CSS. Tengo una clase aquí de haberes compartir sobre Sass si quieres saber más al respecto. Pero básicamente, si nunca lo habías visto antes, realidad
somos capaces de anidar. Podemos apuntar a las etiquetas A dentro del elemento de navegación del
sitio lanzando el conjunto de reglas dentro de este otro conjunto de reglas. Dado que sé hacer esto, lo escribiría aquí, pero para aquellos de ustedes que no saben menos o Sass pero que sólo conocen CSS, lo
voy a escribir afuera aquí. Básicamente, lo que estamos tratando de hacer es apuntar al elemento de navegación del sitio y al ul dentro de él si queremos mostrar ninguno. A menos que, por supuesto, el elemento de navegación del sitio se esté colocando sobre, entonces, cualquier uls anidados debería mostrarse. Hit Save en eso. Eso ahora nos dará la capacidad de que aparezcan en el hover. Obviamente, el posicionamiento ya está apagado, así que rápidamente arreglaré eso. Veamos cómo funciona eso. Solo necesitas darle un color de fondo. Digamos “Blanco”. Ahora bien, no es el menú con mejor aspecto, pero al menos tenemos nuestros elementos dentro nuestra carpeta aparecen cuando pasamos el cursor sobre ese elemento de carpeta. Es más una experiencia de usuario que esperaríamos de una plantilla, pero esta no es una clase CSS, por lo que no nos pondremos demasiado al día con cómo se ve. Pero como puedes ver en esta lección,
somos capaces de actualizar nuestra navegación del sitio aquí utilizando nuestros conocimientos de JSON-T y nuestro conocimiento de cómo buscar datos JSON. Perdón, está justo aquí, en nuestra pestaña de consola. Aquí están todos los elementos, y este es el proceso que tomarías independientemente de si se trata de un bloque, o de una lista, o de un elemento, mirarías la capa de datos JSON, verás a qué estás intentando acceder verás a qué estás intentando acceder
y escribe JSON-T en base a eso. Antes de pasar a la siguiente lección, lo que quiero hacer es transformar esta carpeta en lo que se llama un “índice”. Un “índice” nos permite acceder a los datos de estas páginas secundarias en una página separada que representa todos los elementos dentro de esta carpeta. Por lo que es similar a una colección. Se trata básicamente de una colección de páginas más que de publicaciones, imágenes o videos. Seguro que empezará a tener un poco más de sentido vez que realmente empecemos a implementarlo. Si miramos por aquí, podemos ver claramente que es una carpeta dada este ícono y también cuando hacemos clic en él, realmente no pasa nada. Si hacemos click en otra página y luego hacemos clic en la carpeta, realidad no
es una página. En realidad no podemos ver una página para esta carpeta. Entonces el beneficio de hacer un “índice” es que esto puede ser una página así como una colección de diferentes páginas aquí. Tengo que tener cuidado usando la palabra “Colección” porque técnicamente en términos de terminología Squarespace, no
es una colección, pero básicamente un “índice” es como una carpeta que también es una página. Podemos aprender más sobre los índices yendo nuevamente a la documentación, y aquí hay un elemento de menú para “Carpetas e Índices”. Recuerda que utilizamos las instrucciones aquí para habilitar carpetas dentro de nuestra plantilla de Squarespace. Pero si nos desplazamos hacia abajo, en realidad podemos crear un índice. Como dice aquí un índice es una carpeta con una página principal que permite a
los desarrolladores agregar datos de las colecciones y páginas contenidas dentro de ella. Para crear un índice vamos a hacer lo que aquí dice. Agrega un archivo “index.conf” a nuestra carpeta de colecciones. Vamos a utilizar estos ajustes estándar. Vamos a entrar en la carpeta de colecciones, hacer clic en “Nuevo archivo”, llamarlo archivo “index.conf”, pegar eso en, y no quiero que se llame “Mi índice” solo “índice” está bien. No quiero que diga agregar colección. Voy a decir “agregar página” y vamos a permitir que acepte páginas, no galerías. Por supuesto, si quisieras crear múltiples índices que fueran índices de galerías, entonces dejarías eso ahí dentro. Si querías índices de blogs, entonces podrías poner “blog” aquí. Pero para nosotros solo estamos anidando páginas. Vamos a despejar eso por ahora. Voy a golpear “Guardar” en eso, y luego la otra parte es que necesitamos hacer una plantilla de página de índice. Hacemos eso creando un archivo “index.list”, y lo agregamos también a nuestra carpeta de colecciones. Vamos a las colecciones. Nuevo archivo, “index.list”. Para ahorrar tiempo aquí, voy a copiar y pegar algún código en, pero es código muy básico. Te explicaré rápidamente qué hace esto. Dónde el registro de consola, cuál es el contexto JSON dentro de este archivo de lista. Entonces lo que estamos haciendo es buscar el objeto de colección, que recuerden, contiene toda la información para esta página en particular. Estamos buscando las colecciones anidadas dentro de eso y haciendo una lista de todas esas colecciones. Como veremos en breve, este código JSON-T coincide con lo que tenemos en nuestros contextos JSON. Lo que voy a hacer es que creo que podríamos tener que empujar esto al servidor. Permítanme ir a la dirección del índice. Sí, así que sólo redirige a “HIIT”. Lo que vamos a tener que hacer es empujar estos cambios a Squarespace. Voy a abrir esta otra terminal aquí donde hago mi “git” agregar todo, comprometerse con el mensaje, “Transformar carpeta en índice”. Entonces vamos a empujar eso. Ahora, cuando pasemos a nuestra página web en nuestro admin Squarespace, eso podemos hacer click aquí y obtenemos una nueva opción aquí, que es índice. En realidad no podemos transformar esta carpeta en un índice per se, pero lo que podemos hacer es crear un índice y luego moverlos al nuevo índice. Va a eliminar esta carpeta ahora para los tipos de clase. Como puedes ver en esta nueva página de índice, que debo renombrar de inmediato a “
Tipos de clase ” y pulsar “Guardar” en eso. Ahora puedes ver que este índice, que se parece mucho a una carpeta, es una página en sí misma. Entonces dentro de este índice, estamos dando vueltas y dando salida a todas las páginas dentro de esta página de índice. Podemos dar click en “Pilates” y se abrirá la página de “Pilates”. Si miramos el objeto JSON. si subimos hasta aquí, vaya a la dirección para los tipos de clase. Podemos ver en el segundo objeto aquí, tenemos un objeto de colección, y dentro del objeto de colección, tenemos una lista de colecciones o una matriz de colecciones. Y luego dentro de eso, tenemos las páginas individuales con el título de la página y la URL completa. Esto coincide con el código que hemos escrito aquí. Estamos dentro del objeto, nos dirigimos a la colección. Entonces dentro de la colección vamos a recorrer objeto de
esta colección y eso es exactamente lo que está pasando aquí. Otra cosa que tenemos que hacer antes de terminar esto es dirigirnos a la navegación de nuestro sitio, y como este elemento de navegación es una página en sí mismo, ahora
podemos agregar una ruta URL a esto. Voy a escribir “colección.URL completa.” Golpea “Guardar” en eso. “ Refrescar” por aquí. Ahora, en realidad podemos hacer clic en este elemento del menú “Tipos de clase” y irá a la página “Tipos de clase”. Ya estábamos en él, pero pasemos a otra página. Haga clic atrás en “Tipos de clases” y ahora podemos
acceder a esa página de índice y a todas las páginas que se encuentran dentro de ella. Ahí lo tienen chicos, hemos actualizado nuestro archivo de bloque para la navegación de nuestro sitio, pero como vimos en el diagrama, bloques también pueden ser parciales. No tengo un ejemplo específico que me venga a la mente de un parcial que usarías. Pero si volvemos a entrar en la documentación de Squarespace, en realidad
podemos buscar parciales. Aquí, debajo de los archivos de plantilla podemos aprender sobre los parciales de plantilla. Aquí puedes leer sobre cómo podemos crear un archivo de bloque y luego usar esta sintaxis para llevar ese archivo de bloque donde queramos dentro de nuestra plantilla de Squarespace, y ese código saldrá a través del lugar donde coloquemos este código. Aquí puedes leer para arriba por qué debemos usar parciales. Tiene un ejemplo en sí aquí. Este ejemplo en particular no fue particularmente relevante para nuestros propósitos. Pero si alguna vez te encuentras repitiendo, a menudo, definitivamente mira en usar parciales. Te ahorrará tiempo y hará que tu código sea más organizado. Eso cubre casi todo lo que podemos hacer con bloques. Como dije, principalmente se usa para la navegación, pero también puede ser parcial. En el siguiente video, vamos a hablar más de lo que está pasando aquí abajo.
11. Crear una colección de eventos: En las lecciones anteriores de esta clase, aquí
hablamos de lo más alto de esta estructura. Hablamos de Layouts y Navigation-s que están configurados en tu archivo template.com, y esos están determinados por el código en tus regiones y bloques. Ahora hablaremos del contenido principal. Por supuesto, las regiones determinan el diseño general que estás viendo en una página en particular. Bloques principalmente para determinar la navegación que se
sentarán probablemente en una región de cabecera como tenemos en nuestra plantilla. Pero ahora es momento de hablar de lo que se muestra dentro de este Squarespace.Contenido principal. Ahora en la mayoría de las situaciones diría que este contenido solo
va a ser el contenido que configuraste en tu admin de Squarespace. Si hago clic sobre nuestra otra ventana aquí y miramos la página Acerca de Nosotros, por ejemplo, el contenido que configuramos en este cuadro de contenido de página, usando los bloques disponibles dentro de Squarespace es nuestro contenido Squarespace.main. Esto es cuando estamos viendo una página. Pero si estamos viendo una colección, el código que pasa en SquaresPace.mainContent está determinado por un archivo de lista. Eso no siempre es cierto porque podemos tener colecciones del sistema, que les mostraremos en esta lección. Pero si tenemos un archivo de lista establecido aquí, entonces el código en este archivo de lista será lo que pase de SquaresPace.mainContent. También tenemos páginas estáticas, que cubriremos en la siguiente lección. Pero en esta lección, quiero hablar de colecciones. Las colecciones están conformadas por la página de lista y las páginas de artículos individuales. Ahora como mencioné antes, hay una serie de colecciones del sistema que vienen con Squarespace automáticamente. Lo que voy a hacer es dirigirme a la documentación, desplácese hacia abajo y haga clic en colecciones. Aquí puedes ver una sección sobre colecciones del sistema. Como puedes leer, Squarespace crea y mantiene varios tipos de colección en el sistema que puedes usar en tu sitio sin necesidad de ningún archivo en tu plantilla. Vamos a probar eso ahora mismo. Permitamos que todas estas colecciones del sistema vengan a través de nuestra plantilla. Voy a copiar ese objeto, entra en nuestra template.comfile. Después de la navegación, voy a poner colecciones del sistema. Ahora deberíamos esperar ver una vez que empujamos esto a nuestra página web de Squarespace, la capacidad de agregar álbumes, blogs, eventos, galerías, y productos, sin tener que escribir nada de ese código en nuestra carpeta de colecciones. Permítanme simplemente agregar que comprometan eso con el mensaje de agregar colecciones del sistema. Entonces vamos a empujar eso para que podamos ver el cambio en nuestra página web de Squarespace. Ve a la página web de Squarespace, ahora. Refresca la página. Si entramos en páginas y hacemos clic en esto, ahora
podemos agregar galerías, productos, blogs, eventos, álbumes, y luego un índice que creamos antes. En esta lección, lo que vamos a hacer es crear una colección de eventos primero usando colecciones del sistema, y luego lo vamos a hacer a medida. El motivo por el que vamos a hacer una costumbre, aunque las colecciones del sistema puedan ser suficientes, es para que podamos aprender a crear colecciones
personalizadas si queremos hacer algo personalizado en el futuro. Entonces tal vez no es una colección de eventos a la que queremos diferente aquí, pero tal vez queremos agregar en algo como proyectos o un portafolio si quisiéramos
crear nuestra propia colección personalizada más adelante entonces las habilidades que aprendimos en esta lección nos ayudará a hacerlo. Pero para esta lección, voy a usar el ejemplo de los acontecimientos. Vamos a crear en realidad una colección de eventos en este momento usando colecciones del sistema. Aquí, lo hemos hecho, acabamos de crear una colección de eventos y ahora podemos crear eventos. Digamos Saturday Boot Camp, libre al público. Está bien, voy a golpear guardar y publicar, y como pueden ver, se
parece mucho a una entrada de blog, pero es un poco diferente en cómo se presenta. Como puedes ver aquí, la fecha y la hora es muy prominente, y luego tienes este botón para volver a todos los eventos con este bonito tipo de etiqueta de calendario aquí. Funciona mucho como un blog. Pero en lugar de publicaciones de blog, tienes eventos. Está bien, así que ahora voy a quitar eso. Eliminemos todas nuestras colecciones de sistemas y agreguemos nuestra propia implementación personalizada de esa lista. Está bien, así que voy a entrar en código de Visual Studio. Quitemos las colecciones del sistema. Empujemos ese cambio. Voy a ejecutar git, add, git commits,
eliminar colecciones del sistema, empujar esos cambios a nuestro sitio web y vamos a confirmar que los eventos ya se han ido. Después de cargar la página, ahora
podemos ver que no tenemos esas colecciones disponibles para nosotros. Está bien, genial. Ahora lo vamos a codificar nosotros mismos. Para eso, entremos a la documentación de Squarespace y desplázate hacia abajo en esta página en colecciones para ver cómo crear colecciones personalizadas. Se puede ver necesitamos el nombre de la colección.comf como archivo, y también necesitamos uno de los siguientes. Necesitamos un archivo de lista de puntos o un archivo de elemento punto, pero muchas veces tendremos ambos. De acuerdo, así que aquí puedes ver las opciones de configuración. Voy a copiar y pegar esto. Dirígete a nuestro código, crea una nueva colección con el título de Events.comf. Voy a pegar ese objeto [inaudible] en. Ahora no dejemos esto como es porque esto no tiene sentido. Es sólo una copia de una configuración para un blog. Vamos a sustituir blog por eventos. El orden, si echamos un vistazo atrás a las opciones disponibles, cronológicas, usuario, ordenables o calendario, porque estamos ejecutando eventos, cambiémoslo a calendario. Se arreglará en términos de tiempo para el texto de adición aquí mismo. Estos son básicamente los textos de directiva que se va a
pasar en el admin por agregar un nuevo, cualquiera que sea el ítem. En el ejemplo para el blog, si entramos en el blog y pasamos por aquí, puedes verlo dice Add Post para nosotros, queremos como decir add event. Así que agrega evento aquí abajo para tipos de excepción. puede ver que actualmente está configurado en texto. Que es una de las tres opciones disponibles. Aquí dice, en realidad hay más que sólo tres. Entonces si volvemos a nuestro calendario o a nuestro archivo thence.comf, en realidad
podemos cambiar este texto a un evento. Un evento es uno de los tipos aceptados que podemos usar. Ahora hay algunas otras cosas que quiero hacer aquí. Tan solo para que esto sea mucho más bonito, va a aparecer con un ícono de blog por defecto. Entonces voy a cambiar el icono al icono del calendario y eso es todo chicos. Muy bien, entonces porque ya no tenemos colecciones
del sistema definidas en nuestro archivo template.comf. Definitivamente vamos a tener que crear un archivo de lista aquí. Por lo que Eventos. Lista, y aquí dentro, necesitamos poner en la presentación de nuestros eventos. Antes de hacer eso, sin embargo, voy a empujar estos dos archivos a nuestra página web en vivo de Squarespace. Entonces voy a git add git commit y decir add events collection, luego git push. Veamos qué cambios le hace a nuestro administrador. Recuerda, eliminamos las colecciones del sistema por lo que no deberíamos poder agregar una colección de eventos en este momento hasta que actualicemos la página mostrando esos cambios. Ahora cuando golpeamos este plus, deberíamos ver eventos y está mostrando el bonito ícono aquí porque pusimos el ícono a calendario en nuestro comfile. Si hacemos clic en este botón, ahora
podemos crear una página de eventos. Podemos hacer clic en este ícono aquí para agregar un nuevo evento. Añadamos de nuevo ese evento. Sábado Boot Camp. Me di cuenta de que el último estaba fijado a un lunes. Entonces eso no es muy apropiado, ¿verdad? Libre al público. Pongámoslo a un sábado en el futuro. No voy arriba con lorem ipsum por ahora, tal vez sólo diga lorem ipsum. Guardemos y publiquemos. Ahora si entramos en ese evento, podemos ver que hay una página de ítem que se genera automáticamente para nosotros. Pero si vamos hacia atrás y damos clic en la página de lista, se
puede ver que no hay contenido porque está usando L.ListFile aquí mismo, que está en blanco. empecemos a construir este archivo de lista. Ahora voy a cambiar a local-host porque lo que quiero hacer es ejecutar un registro de consola para que podamos ver la capa de datos json y averiguar qué atributos queremos quitar la capa de datos json y poner en nuestra página. De nuevo, tengo esta era HTTP, lo que significa que necesito reiniciar mi servidor. Por lo que volveré a mi primera pestaña de terminal, control C en un Mac para terminar el proceso actualmente en ejecución. Entonces ejecutemos el servidor Squarespace con la bandera de off. Nos volveremos a escuchar en el puerto 9,000. Voy a facturar con ustedes una vez que esto termine de cargar. Muy bien, así que ahora podemos ver nuestra Página de Eventos, que está completamente vacía porque tenemos un events.listfile en blanco. A pesar de que hay un evento en nuestra colección de eventos, no aparecerá hasta que escribamos algún json T para tomar la lista de eventos y salidas parte de ese contenido en la pantalla. Como siempre, lo que voy a hacer es poner la capa de datos json en este contexto json en particular. Entonces podemos empezar a navegar por el objeto y averiguar el json T que necesitamos escribir. Volviendo a esa página después de lanzar el script para el registro de consola del contexto json. Ya puedes ver en nuestra consola tenemos un objeto secundario. Voy a dar click en eso. Dentro del objeto de colección, verás que tenemos toda la información para la colección, que por supuesto es eventos de código. Si nos desplazamos hacia abajo, deberíamos intentar encontrar la lista de eventos,
que, como se puede ver aquí, dividen en dos matrices. Una matriz para próximos eventos, matriz
M1 para eventos pasados. No tenemos eventos pasados, así que eso está vacío. Pero sí tenemos un evento próximo. Si miramos por dentro, podemos ver el Saturday Boot Camp justo aquí en contexto contiguo. Está bien, así que como puedes ver, aquí
tenemos un atributo de título, y también tenemos un atributo de cuerpo con todo un montón de HTML. Este atributo de cuerpo viene de cuando escribimos o editamos un evento en particular. Aquí mismo, podemos poner algún texto, pero también podemos poner en bloques de otro contenido rico también. Por lo que todo el HTML que representa eso, saldrá a través de este atributo de cuerpo justo aquí. Usemos los de nuestro archivo aquí. Entonces navegando hacia arriba, vamos a tener que recorrer la próxima matriz, y luego para cada elemento, vamos a tirar del título y el cuerpo. Hagámoslo ahora mismo. Voy a iniciar una sección repetida para la matriz. El array se llama próximo. Asegúrate de cerrar esa cuadra. Entonces dentro, voy a crear un div con la clase de evento. Dentro de cada evento, voy a configurar un h2 y el h2 va a sostener el título de cada uno de esos ítems dentro de la próxima matriz. Va a dar salida al cuerpo justo debajo. No voy a envolver eso en ningún HTML porque ya tiene mucho HTML que viene con él. Refrescando la página por aquí. Deberíamos empezar a ver venir nuestro título y cuerpo. Ellos te van. Sábado Bootcamp, libre al público y el contenido corporal ahí. Ahora por supuesto, porque este es un evento, vamos a querer mostrar la hora y fecha reales de este evento. De lo contrario, la gente no sabe cuándo está aparte de aquí mismo, sábado Bootcamp. Lo que vamos a hacer es traer esos datos a continuación. Si vuelvo a bajar al objeto y navegamos a próximo, entramos en ese objeto en particular, podemos desplazarnos hacia abajo. Incluso tiene información como la ubicación, con la longitud y latitud. Eso es bastante guay. Pero lo que buscamos es la fecha de inicio y fecha de fin. Esto es sólo un código de dígitos que la computadora puede leer, pero obviamente no es muy legible para nosotros. Lo que vamos a hacer es traer eso y luego formatearlo. Voy a tomar la fecha de inicio y ponerla debajo aquí, en este em elementos. Entonces voy a buscar el formateador apropiado. Esta es nuestra oportunidad de utilizar Formatters JSON-T. Voy a entrar en la documentación de Squarespace, dirigirme a la sección de Formatters JSON-T, y luego aquí abajo voy a mirar los Formatters de fecha y hora. Queremos formatear una fecha utilizando este formato de fecha YUI. Solo voy a copiar el ejemplo aquí mismo y ponerlo después de la fecha de inicio. Vamos a darle a “Save” en eso. Vamos a refrescarnos por aquí. Ahí lo tienes. Tenemos la fecha del evento, pero quizá también queramos tener la hora del evento y no solo la hora del evento, sino la hora de inicio y finalización. Para eso, usamos los mismos objetos que fecha de inicio y fecha de finalización, pero simplemente accedemos a diferentes partes de esa fecha-hora. Te mostraré lo que quiero decir con eso en tan solo un segundo. Vamos a crear otra etiqueta em que esté separada por una etiqueta de ruptura. Dentro voy a volver a poner fecha de inicio. En lugar de ese formato de fecha en particular, voy a ir por aquí, click en este enlace, que nos va a llevar a la lista de todos los diferentes códigos que podemos poner para dar formato a nuestra fecha/hora. Voy a desplazarme hacia abajo a esto aquí mismo y copiar este código aquí mismo, y pegar eso aquí. Entonces voy a agarrar el objeto de fecha final. Sólo copiaré y pegaré esto. Cambia eso a fecha de finalización con el mismo formato. Vamos a darle a “Save” en eso. Volvamos a nuestra página y actualicemos. Ahí se puede ver el evento es de 3:00 - 4:00 PM. En realidad no necesitamos los segundos ahí, así que voy a eliminar eso de la cadena de formato. Cabeza hacia atrás. Ahora, se puede ver el sábado Bootcamp, libre al público el sábado. Se va a iniciar a las 3:00 PM y terminar a las 4:00 PM. Esa es más o menos nuestra página de lista hecha, pero tal vez queremos crear una página para cada evento individual. Para eso, necesitamos crear un archivo.item. Antes de hacer eso, sin embargo, quiero enlazar todos los títulos dentro nuestro listado para dirigirme a ese elemento individual en click. Hagámoslo ahora mismo. Voy a envolver el título en una etiqueta y el atributo que buscamos,
como siempre, es FullUrl. Le pegaré a “Save” en eso. Refresca por aquí. Ahora, se puede ver que el título está vinculado al evento individual. Si hago click en eso, verás que hay un error. Eso se debe a que en realidad aún no hemos creado esa página. Vamos a volver aquí. Vamos a crear events.item. Para events.item para mantenerlo sencillo, voy a copiar este código aquí mismo. Lo que vamos a necesitar hacer es averiguar qué objeto acercar para obtener todos estos atributos. Esto no va a funcionar todavía pero lo que voy a hacer es, vamos a,
como siempre, el registro de consola de la capa de datos JSON para que podamos ver en qué objeto necesitamos acercar. Voy a refrescarme aquí y volver a hacer clic en ese título. Ahora, puedes ver que ya no tenemos ese error. Eso se debe a que tenemos nuestro archivo.item. Aquí abajo, se puede ver que tenemos un objeto secundario otra vez, y este es el objeto que viene a través del archivo events.item. Echemos un vistazo ahí dentro. Se puede hacer click en el objeto de colección. Pero el objeto de colección en realidad representa la colección padre. Aquí, en este artículo objeto es el evento real en sí. Ese es el objeto al que queremos acercar con nuestro JSON-T. Solo necesitamos envolver todo esto en algún código JSON-T. Vamos a acercar el elemento usando nuestra etiqueta de sección. Va a arreglar la anidación ahí. Vamos a refrescar la página por aquí. Ya verás que tenemos exactamente la misma información. Debido a que ya estamos en la página, podemos eliminar el enlace aquí porque sólo se está vinculando a sí mismo actualmente. Pero claro que lo mantendremos en la lista por aquí. Refresca por aquí. Como pueden ver nuestra página de eventos individuales es ligeramente diferente, si solo hago clic en este enlace, a nuestra página de Eventos porque falta el enlace. Pero claro que no es particularmente evidente la diferencia entre los dos porque ambos están mostrando el mismo contenido. Lo que voy a hacer es agregar otro evento y podemos ver con
certeza que esta página está mostrando una lista de todos los eventos. Voy a entrar aquí, crear un evento para un próximo miércoles, que va a ser un seminario de yoga organizado por Mary. El contenido va a ser, “Mary te va a contar todo sobre el yoga”. Suena encantador. Está bien. Golpea “Guardar” y publica sobre eso. Si vamos por aquí, probablemente no aparezca porque tendremos que refrescar el servidor. Desafortunadamente, vamos a tener que bajar aquí, “Control C”, refrescar el servidor, y entonces deberíamos empezar a ver los últimos cambios que vienen a través de nuestra versión local. Ahí vas. Está escuchando en el puerto 9,000. Voy a facturar con ustedes una vez que esto termine de cargarse. Una vez que la página termine de cargarse, puedes ver que de hecho, nuestra página Eventos es un listado y tenemos todos los eventos dentro de nuestra colección de eventos listados aquí. Si hago click en uno, verás que vamos a la página Item para ese evento. Solo mostrará la información para ese artículo o para ese evento. Si volvemos al Bootcamp del sábado, se
puede ver que está haciendo el mismo comportamiento. Como se puede ver, ese es un ejemplo de una colección. Sé que se veía mejor usando las colecciones del sistema. A veces, si no quieres personalizar el look de la colección del sistema, no tienes que hacerlo. Pero si quisieras presentar esto de una manera diferente, obtén control total sobre la página de Listing y la página de Item, entonces así es como lo harías. Lo haces entrando en tu código, entrando en tu carpeta de colecciones, creando un archivo events.conf un archivo events.list y un archivo events.item. Por supuesto, la palabra de eventos aquí es intercambiable con cualquier tipo de colección que estés haciendo. Pero como todo eso está bien, podemos quitar esos registros de consola ahora porque podrían causar problemas en nuestra página web de Squarespace, la versión en vivo. Vamos en realidad a entrar aquí, git add, git commit y git push para que podamos empujar ese cambio a nuestro sitio web en vivo de Squarespace. Podemos poner aquí “Añadir lista de eventos y archivos de ítem”. Vamos a git empujar eso. Iremos a nuestra página web de Squarespace en el admin. Como puedes ver, ahora tenemos el formato que configuramos en nuestra lista y archivo de ítem. Voy a mover eventos, más allá del blog. Ahí lo tienes. Contamos con nuestra propia colección personalizada. Tenemos control total sobre cómo se presenta en la página. Ahora, es hora de mirar la última parte del diagrama, que son páginas estáticas. Te veré en ese video.
12. Agregar una página estática: En esta lección, vamos a cubrir la estructura de plantillas de Squarespace mirando páginas estáticas. Las páginas estáticas son bastante simples, es solo una página codificada, en nuestro administrador de Squarespace, si creamos una página normal aquí mismo, dejémosla como nueva página. Puedo hacer clic aquí y tienes este cuadro arriba para el contenido de la página, tienes configuración y tienes edición. Ahora tengo acceso al editor de páginas y puedo agregar bloques de contenido de página. Tenemos una página estática, no tienes acceso a este editor de contenido de página. En cambio lo que tienes es solo una página sin opciones de personalización y todo el código que vaya en esa página se almacenará en un pagefile de puntos. Ahora fuera de mi cabeza, no
puedo pensar en muchos ejemplos en los que quisieras usar una página estática lugar de usar una página normal porque incluso en la página normal puedes insertar HTML personalizado, pero tal vez haya un situación en la que solo quieres escribir la página en código, no
quieres tener que usar el administrador de Squarespace para hacerlo o quieres restringir a los usuarios admin la edición de una página, entonces la página estática va a ser la opción para ti. Lo que voy a hacer en esta lección es crear una página estática con un calendario incrustado y podemos ver cómo funciona la página estática, déjame entrar en código de Visual Studio o cualquier editor de código que estés usando y aquí tenemos que crear un nuevo directorio llamado páginas, voy a hacer eso ahora mismo, nuevas páginas de Carpeta. Ahora dentro de este directorio de páginas, vamos a crear un nuevo archivo y nuestra página estática va a ser el horario de clases. Asegúrate de poner la página de puntos al final, y para acompañar nuestra página, lo que vamos a tener que hacer es configurar otro archivo con timetable.page.conf. En este archivo com, es muy sencillo, sólo vamos a poner en dos pares de valor clave. El primero es título, así que voy a llamar a este Horario, y el segundo va a ser una descripción, voy a poner un calendario de todas nuestras clases, cool. Ahora el administrador de Squarespace sabrá cómo llamar a la página y también brindará una descripción a Squarespace. Aquí en nuestro archivo de página de punto de Horario, voy a poner en un h1 con título de punto de colección. Recuerda para la mayoría de las páginas de Squarespace la información de la página se almacena en el objeto de colección, después de que hayamos hecho este encabezado queremos que esta página aparezca como una opción en nuestro admin de Squarespace. Para eso ya sabes lo que tenemos que hacer, realidad
tenemos que empujar estos cambios a Squarespace, aquí abajo, voy a conseguir add para agregar esos cambios al commit, git commit, agregar una página estática para el horario. Entonces git push, y después de que el push esté completo, podemos subir aquí a nuestro admin Squarespace, refrescar. Una vez que la página haya terminado de recargar, podemos mirar hacia abajo en nuestra sección no vinculada y veremos esta página aquí llamada Horario, si hago clic en eso, puedes ver acabamos de obtener el nombre de la página que es Horario. Sabemos que esta es una página estática porque el número uno podemos ver el ícono es una caja punteada, y también cuando hacemos click en esta página estática, no abre un panel para que creemos ninguna edición porque es un completamente página estática. Pasemos esto a la navegación aquí, lo
voy a poner después de eventos y ahora lo que podemos hacer es escribir cualquier código que queramos dentro, no
hay nada realmente elegante pasando con el administrador de Squarespace, sólo
vamos a escribir una página como lo haríamos normalmente, como ejemplo de lo que podemos poner en esta página, voy a poner un incrustado de calendario con este horario para las clases. Esto ha venido directamente de Google Calendar, si quieres crear un calendario de Google incrustar, definitivamente busca eso, si golpeo guardar en eso, refresca nuestra página, no en nuestro sitio web publicado, sino localmente. Puedo hacer click en horario y
se puede ver que tenemos el horario para mochilas fitness, que era el nombre original del gimnasio que viene aquí. Obviamente si queremos que este cambio se ponga en vivo en nuestra página web
solo necesitamos empujar ese código cada vez que hacemos cambios, no viene del admin de Squarespace por lo que no se insertará en nuestra página web de Squarespace hasta que empujemos ese código live, hagámoslo ahora mismo, git add, git commit con el mensaje de agregar contenido a la página de calendario y luego git push. Ahora si volvemos a nuestra página web en vivo, deberíamos ver el mismo cambio, y ahí lo tienes. Tenemos el título de colección o el título de la página que se encuentra en el objeto de colección y tenemos este incrustado de calendario, no importa dónde pinchemos,
si volvemos a ella,en si volvemos a ella, cualquier momento hacemos clic en eso en el admin, no aparecen opciones para que
lo editemos porque es una página completamente estática tenemos contenido
codificado duro que viene directamente de este archivo de página de puntos. Eso es básicamente chicos, no mucho a páginas estáticas, es básicamente lo que quieras poner aquí puedes y no hay operación especial, no
es una colección, no es una página con un editor para que pongas, contenido bloquea en, es sólo una página muy básica, codificada. No se me ocurren muchas instancias en las que te gustaría crear una página estática pero si fueras a crear algo que fuera muy intensivo en código y no
requiriera nada de Squarespace es admin, entonces yo creo que tendría mucho sentido, pero para la mayoría de los usuarios, podemos insertar este embed igual de bien usando una página normal dentro de Squarespace. Al entrar en el contenido de la página editar y podemos insertar, estoy seguro, nuestro código HTML de hierro o incrustar. En esta instancia, no se requiere exactamente para que nosotros incrustar un Google Calendar, pero quería mostrarte cómo crear una página estática para que sepas cómo hacerlo y que cubre este diagrama aquí mismo. Como has visto podemos mapear esta representación visual a nuestra estructura de carpetas aquí, bloques, colecciones, páginas, y regiones aquí abajo. Por supuesto, aquí también tienes guiones y estilos, y eso es lo que vamos a cubrir en el próximo video.
13. Javascript, CSS y Less: En esta lección, vamos a hablar de guiones y estilos. Para empezar, voy a cerrar todos mis editores abiertos, y luego vamos a entrar en nuestra carpeta de estilos y mirar CSS y menos para empezar. Ahora menos es un pre-compilador de CSS. Si busco menos en Google y miramos el sitio web que es lesscss.org. Desplázate hacia abajo y podemos ver que menos es un retroceso compatible con la extensión de lenguaje para CSS. Ahora, como menciona, es compatible al revés. No quiero que te asustes si no sabes menos escribir CSS en estos archivos. Como se puede ver aquí, hay algo de anidación. Ahí está el uso del ampersand, que es menos sintaxis, pero aquí se puede ver igual de bien este código funcionó que es CSS puro. Es compatible con versiones anteriores. Simplemente puedes poner en CSS directamente en tus archivos Less y aún así ejecutará ese CSS, pero si sabes cómo aprovechar menos, y definitivamente te recomiendo que investigues cómo usar menos o Sass. Sass es otra, básicamente lo mismo significa Sintácticamente Awesome Style Sheets, por lo que es algo similar a menos y de hecho, mucha de esta sintaxis es la misma, como el anidamiento y los ampersands. Definitivamente recomendaría aprender Sass o Less, y son casi idénticos. Solo hay algunas diferencias, pero no tienes que saber menos para escribir código en estos archivos y no tienes que saber menos para poder hacer desarrollo de plantillas, pero muy recomendable y está ahí en caso de que quieras usarlo. Estamos en archivo template.com. Aquí podemos ver base.menos en nuestra matriz de hojas de estilo. Estos están tirando directamente de la carpeta de estilos, y así que si quisiéramos incluir más hojas de estilo, podríamos simplemente crear un nuevo archivo Less dentro de esta carpeta Styles. En primer lugar, antes de que hagamos eso, entrando en cabeza en base.menos y veamos algo que podamos sacar de esto y ponerlo en su propia sección. Como puedes ver aquí, tenemos una sección para la página de inicio, que básicamente está vacía, pero sí tenemos una sección aquí para lista de blogs. Esto podría ser un buen candidato por colocarlo en un archivo diferente. Si entramos aquí y creamos un blog.less, pegamos eso en y golpeamos guardar. Ahora tenemos el código para blog en base.less, y mientras el orden sea correcto, podríamos entrar aquí en template.com y luego agregar eso después de base.less. Después de base.menos, vamos a cargar en blog.menos. A modo de mejor ejemplo, realmente
movamos algo que sea obvio, tal vez nuestro encabezado y navegación. Voy a llevarme todo desde el encabezado del sitio justo aquí, todo el camino hasta aquí. Voy a cortar eso así que está en mi portapapeles, entra aquí y haz un archivo header.less. Voy a poner todo el código de cabecera ahí y entre mi base y mi archivo Less, voy a poner en header.menos para que ese código siga incluido en mi plantilla. Si voy aquí a mi versión local y ejecuto la página, tienes un error interno del servidor, así que vamos a tener que hacer esa cosa otra vez donde cancelemos el proceso actualmente en ejecución usando el control C en un Mac y volver a ejecutar nuestro servidor. Después de que nuestro servidor vuelva a ejecutarse, y
actualizamos la página, deberíamos empezar a ver que no hay cambios. Como puedes ver, después de volver a cargar la página, podemos ver que nuestro encabezado es exactamente el mismo, y si entramos e
inspeccionamos, aún podemos ver estilos aplicando al encabezado lateral. Al hacer clic en esto, se puede ver aquí que viene a través de un archivo CSS compilado llamado Site.css. Todo esto está sucediendo en el back-end para nosotros sin tener que hacer nada más que
configurar la lista de hojas de estilo en nuestra matriz de hojas de estilo aquí mismo, y asegúrese de que eso es mapear correctamente a los archivos dentro de nuestra carpeta de estilos. Squarespace es impresionante en el sentido de que tomará todo esto, lo compilará y lo pondrá en un solo archivo que cargaremos en nuestro proyecto. Por supuesto que no tenemos que romper nuestros archivos menos y CSS, pero sí podemos si queremos, y el beneficio de separarlos es organizar nuestro código beta. Si tenemos mucho CSS y Menos podemos ir a los diferentes archivos y encontrar el código para cabecera, encontrar el código para blog y conocer los estilos base aquí. Ahora pasando a los scripts, si quisiéramos ejecutar nuestro propio JavaScript, lo que podríamos hacer es crear un nuevo archivo aquí o aquí mismo, podríamos simplemente usar site.js, pero vamos a crear un nuevo archivo y llamémoslo custom.js. En este custom.js, voy a hacer el buen viejo Hola Alerta Mundial sólo para demostrar que está funcionando. Guardemos eso, actualicemos la página y deberíamos esperar que la alerta aún no funcione porque todavía no la hemos traído a nuestro código. Voy a volver a entrar en la documentación squarespace y te mostraré cómo podemos traer algún JavaScript personalizado a nuestra plantilla. Solo necesito ir a developers.squarespace.com, plantillas docs, y aquí abajo puedes ver un enlace para JavaScript personalizado. Aquí puedes ver podemos cargar en JavaScript personalizado usando el cargador de scripts. Si solo copio y pego uno de ellos, y digamos que queremos ejecutarlo sólo en la página del horario. Bueno, sólo incluiríamos ese código solo en la página del horario. Tan solo hay que cambiar este nombre de archivo a personalizado para que coincida con el nuevo archivo JavaScript que hemos creado en la carpeta Scripts, y ahora cuando cargemos la página de horarios, deberíamos empezar a ver la alerta que avanza. Ahí lo tienes. Nuestro anfitrión local 9 mil dice hola mundo, podemos dar click OK y el resto de la página se carga. Ahí lo tienes. Ahora estamos ejecutando ese js personalizado en esa página en particular, y esto es realmente útil porque si queremos
ir a otra página y no queremos que ese código se ejecute, eso es fácil de hacer. Podemos hacerlo para que ese archivo JavaScript solo cargue donde lo incluimos en la plantilla y todo se embala bien en el back-end a través de Squarespace. No tenemos que preocuparnos de que todos estos archivos JavaScript floten por ahí. Squarespace lo compilará y gestionará los activos por nosotros. Ahí lo tienen, chicos. Acabamos de incluir nuestro propio CSS y nuestros propios archivos JavaScript en nuestra plantilla. Muy sencillo de hacer una vez que sepas traerlo,
en el caso de CSS, todo lo que tienes que hacer es agregar el archivo y luego añadirlo a la matriz de hojas de estilo. En el caso de JavaScript, todo lo que tienes que hacer es agregar ese archivo JavaScript y luego usar la etiqueta que acabamos de ver aquí para traer ese script a la parte de esa plantilla que queramos. Cosas muy sencillas. En la siguiente lección, lo que vamos a cubrir son algunas de las otras características de las plantillas
de Squarespace que son interesantes, entre ellas bloques abiertos, consultas personalizadas, anotaciones de
plantillas y retoques. Espero verlos en el siguiente video.
14. Abrir campos de bloque, consultas personalizadas, anotaciones de plantillas y modificaciones: Chicos, así que en esta lección vamos a cubrir algunas de las otras características de las plantillas de Squarespace que creo son particularmente interesantes y útiles. Abren bloques, consultas personalizadas, anotaciones de
plantillas y ajustes. Sé que suena mucho, pero cada uno de son bastante básicos por lo que no debería tardar demasiado en pasar por los cuatro. Para empezar, lo que voy a hacer es deshacerme de este JavaScript que creamos en la última lección. Realmente no necesitamos un archivo JavaScript que mucho infierno de mundo. Yo sólo voy a quitar esa. Podemos mantener en realidad menos archivos rotos o podemos volver a cómo eran antes, a ti. Pero para mí, sólo voy a dejarlo como está y
echemos un vistazo a la primera de estas características de las que quiero hablar en esta lección, que es bloques abiertos. Nos vamos a referir a la documentación en esta lección. Volvamos a la documentación que se encuentra en developers.squarespace.com. Después haces clic en este ítem de menú para Plantillas Docs. Si nos desplazamos hacia abajo, podemos ver el Campo de Bloque Abierto. Voy a dar click en eso y aquí puedes leer sobre lo que es un Campo Abierto. Los campos de bloques abiertos son áreas abiertas en una plantilla, proporcionadas por un desarrollador en el que un usuario puede agregar cualquier bloque del sistema y usar el mismo sistema de diseño LayoutenGine, basado en cuadrículas que se utiliza en páginas y entradas de blog. Los campos de bloque abierto son ideales para pies de página del sitio y barras de blog. Creo que esa es una descripción bastante buena, pero con el fin de entender completamente lo que está pasando aquí, solo
agarremos el código y lo arrojemos a nuestra plantilla y veamos qué pasa, ¿de acuerdo? En realidad lo voy a tirar en la página de plantillas aquí. Esa va a ser la más fácil de ver para nosotros y porque esto va a afectar al admin de Squarespace, voy a tener que empujar este código. Voy a decir git add, git commit. Recuerda que nos revolcamos alrededor de unos archivos menos, así que pondré eso en el mensaje de commit también, rompí algunos archivos menos y agregé un campo de bloque abierto. Se va a empujar eso. Ahora cargemos nuestra página web de Squarespace. Vamos a asegurarnos de que estamos en la página de horarios y vamos desplazarnos hacia abajo debajo de este calendario incrustado. De lo que quiero que veas cuando pasemos por aquí, dice Región #blockField1 y tiene un botón Editar. Este es un Campo Abierto y lo que nos permite hacer es hacer clic en Editar y obtenemos la misma interfaz de usuario que obtenemos por crear una página pero podemos insertar bloques de contenido donde siempre queramos, siempre y cuando hayamos definido un Open Block Fields. Puedo entrar aquí y podemos incrustar un video. En cambio, voy a poner un poco de cuadrícula. Puedo subir algunas imágenes que tengo listas para ir. Olvidé optimizar estas imágenes para la web, así que probablemente tarden un poco de tiempo en subir. Vamos a avanzar rápidamente a través de eso. Ahí lo tienen, chicos, acabo de agregar un Bloque de Contenido de Cuadrícula a este Campo de Bloque Abierto. Puedo agregar cualquier número de bloques aquí,
igual que lo haría en una página de Squarespace, puedo golpear Save en eso y ahora eso es parte de mi página. Muy cool, como se menciona en la documentación, podemos ponerlo en nuestro pie de página. También es bueno poner en una barra lateral, si quisieras agregar una barra lateral a tu sitio web, así podríamos tener una sección por aquí y podríamos permitir que el usuario admin entre aquí y agregue diferentes bloques. Característica muy cool de Squarespace aquí mismo. Este BlockedField1 mapea directamente a lo que hemos escrito aquí. No he cambiado el nombre porque esto es sólo por un ejemplo, pero queremos darle un buen nombre a eso. A lo mejor diríamos página de horario abajo o simplemente etiquetar eso un poco más bonito. Pero eso esencialmente es un Campo de Bloque Abierto. Pasando a la siguiente función, quiero mostrarte lo que es una consulta personalizada. consultas personalizadas nos permiten tomar datos de otras partes de la plantilla y traerlos a donde queramos. Si me desplazo aquí abajo y hago clic en “Custom Query Tag” en esta etiquetas de Squarespace, puedes ver que podemos, por ejemplo, estar en cualquier página de plantilla de Squarespace y traer entradas de blog de un blog en particular. Permítanme utilizar la página Eventos como ejemplo. Tenemos nuestra Página de Eventos por aquí. De hecho, llevemos esos eventos a nuestra página de horarios. Volviendo a aquí, pongamos otro h2 y podemos decir Próximos Eventos. Debajo de ella vamos a poner una etiqueta de consulta. Voy a copiar y pegar este código de ejemplo aquí mismo. Dentro voy a seleccionar la colección a través de su ID. De acuerdo, entonces, ¿de dónde sacamos esta identificación? Bueno, dejemos eso por ahora y pasemos a nuestra colección de eventos. Entraremos en events.list, y vamos a añadir de nuevo esa etiqueta de script,
que nos permite registrar en consola el contexto JSON. Vamos a guardar eso y luego vamos a dirigirnos a nuestra Página de Eventos en nuestra versión local. Abramos nuestras herramientas de desarrollador, dirígete a la Consola. Voy a abrir el segundo objeto. Entonces voy a entrar en esta colección objetos aquí y buscar U-R-L-I-D. No esta ID con un extraño conjunto de personajes sino urlid. Debe ser lo mismo que la babosa. Slug, es decir, la parte después de la barra aquí en la URL. Voy a tomar el urlid, todo lo que tengo que hacer es copiar esto, que son eventos y ya podemos deshacernos de esta etiqueta de guión. Vuelve a nuestro archivo timetable.page y luego sabemos apuntar a la colección de eventos. Entonces vamos a sacar esta sección repetida y vamos a reemplazarla por el código en events.list. Sección repetida próxima, va a tomar eso. Básicamente lo que esta etiqueta está haciendo es crear exactamente el mismo contexto que aquí. Podemos simplemente copiar y pegar el código de palabra por palabra. Apenas arreglando la anidación ahí, guarde la página. Volvamos ahora al navegador y pinchemos en el enlace Horario. Ahora si me desplaza hacia abajo, tenemos la grilla que vino
del Campo de Bloque Abierto y tenemos aquí abajo Próximos Eventos. Desafortunadamente, esto no está apareciendo así que lo que vamos a hacer es asegurarnos de que el contexto correcto esté llegando. Parece que hemos cometido probablemente un error menor aquí. Pero por supuesto siempre podemos usar Console log para averiguar qué está pasando con JSON Data Layer. Y si alguna vez hay algún problema como este, suele ser porque no estamos apuntando a los objetos correctos en el contexto JSON. Actualizando la página y voy a abrir mi Consola de Desarrollador al mismo tiempo. Ir a entrar en el segundo objeto aquí y se puede ver aquí que la matriz que estamos buscando es de hecho artículos no próximos. El contexto no es exactamente el mismo que por aquí en el sentido de que no tenemos una matriz próxima solo tenemos todos los eventos como ítems en nuestra matriz de ítems. De acuerdo, así que eso es todo lo que necesitamos para arreglar aquí es en lugar de artículos de sección, próximos de sección. Creo que ahora podemos deshacernos de nuestro registro de consola, bastante confianza esto va a funcionar. Entonces podemos volver aquí, refrescar la página. Cierra esto y puedes ver que hemos traído
datos de nuestra colección de eventos a esta página estática, y lo podemos hacer en cualquier página que queramos. Consultas personalizadas, esto es lo que hacen. Traen datos de otras partes de nuestra plantilla de Squarespace y nos permiten trabajar con ese contexto JSON. A continuación vamos a hablar de las anotaciones de plantillas, que no deberían tardar demasiado. Las anotaciones de plantilla son bastante simples. Si vuelvo a mi admin de Squarespace y paso el cursor sobre el título del sitio, puedes ver esta caja apareciendo por aquí. Si hago clic en Editar, lo que pasa es que me saca de la sección de páginas del admin y a la sección de diseño, justo donde puedo actualizar el título del sitio. puede pensar en ello como un atajo para editar partes de su contenido, y el título del sitio es un gran ejemplo de algo que existe en múltiples áreas de su sitio web, pero que se edita en un solo lugar en el admin. Este es un ejemplo perfecto. Déjame mostrarte cómo se ve eso dentro del código. Si entramos en nuestro archivo header.region y buscamos el título del sitio, puedes ver aquí que tenemos este atributo aquí de data-content-field es igual a título del sitio. Si realmente fuera a quitarme esto y empujar ese cambio a nuestro sitio web de Squarespace, git add, git commit, así que hemos hecho dos cambios aquí. Agrega consulta personalizada, elimina la anotación de plantilla para el título del sitio, y luego empuja eso para que el cambio vaya a afectar a nuestro sitio web en vivo. Entonces vuelvo a nuestro administrador. cuenta que cuando la página se actualiza y yo paso el cursor sobre mi título, esa casilla no aparece. No quiere decir que no pueda editar el título del sitio, siempre
puedo entrar aquí e ir a aquí para cambiar mi título del sitio. Puedo llamarlo el nombre que tenía en mente, Backyard Gym, y si le doy “Guardar”, actualizará ese título todavía, pero ese atajo para llegar a esa parte en tu admin ya se ha ido. Entonces no recomiendo hacer eso. Es mejor mantener ahí esas anotaciones. Pero si quieres aprender qué otras anotaciones puedes usar en tu plantilla, de nuevo, documentación de
Squarespace, y aquí abajo bajo avanzado, puedes mirar las anotaciones de plantilla. Aquí puedes ver título del sitio, contenido
principal, navegación, cuentas conectadas, título. Estos son todos ejemplos de anotaciones de plantillas. Estos deberían venir todos por defecto en plantillas con todas las funciones. Pero si estás desarrollando tu propia plantilla, esto es algo importante a considerar, que deberías tener estas anotaciones de plantilla enlazadas en tus elementos. Por último, la última característica es un retoque CSS. Voy a bajar aquí y justo debajo de Anotaciones de plantilla es Editor de estilos. Ahora bien, esto es un poco más complejo y no vamos a estar entrando al detalle en todas las posibilidades dentro de esta lección, pero quería mostrarles que tenemos lo que se llama el editor de estilos en Squarespace, y en realidad podemos agregar lo que se llama retoques a nuestros archivos LESS, y eso nos permitirá agregar en la opción de cambiar algunos de los estilos que hemos configurado en nuestros archivos LESS a nuestro administrador de Squarespace. En primer lugar, vamos a entrar en nuestro admin de Squarespace. Entrémonos en el diseño y vayamos a estilos de sitio. Aquí puedes ver cuándo se carga para este póster de bloque de imagen. Si fuera a ir a otra página, bueno, no me deja ir en otra página, pero básicamente, estos son los únicos retoques que tenemos a nuestra disposición. Podemos entrar aquí y cambiar el color del texto aquí a verde. Pero básicamente los otros estilos dentro de nuestra plantilla no se pueden cambiar. No estoy listo para comprometerme con este color verde así que voy a presionar esta pequeña x para cancelar fuera de eso. En cambio, voy a agregar un retoque a uno de nuestros archivos LESS para que realmente
podamos controlar ese estilo dentro del editor de estilos. Volvamos a la documentación aquí y podemos ver la sintaxis. Uno de los que me gustan aquí es este ancho de página, así que voy a copiar
aquí la definición de variable así como estos comentarios anteriores, voy a copiar eso. Vamos a base.menos y pongámoslo aquí mismo. Como puedes ver, el tweak, la parte que hace de esto un retoque, realidad solo
es un comentario MENOS, este guión, guión hace de esto un comentario por lo que técnicamente no se ejecuta en tu CSS, pero Squarespace interpretará esto como un retocar y lo agregará al editor del sitio. Aquí puedes ver que acabamos de obtener la palabra clave retocar con dos puntos después de ella, y luego tenemos un objeto con unos pares de valor clave. Tenemos valor de tipo, título, ancho de
página, y un valor mínimo y máximo. Lo que voy a hacer es permitir que el usuario admin cambie el ancho de nuestro contenedor de página. Voy a entrar aquí, establecer esto en un valor predeterminado de lo que tenemos aquí abajo, que es 1,140, y luego vamos a reemplazar el valor codificado aquí abajo por la variable. Esta es alguna sintaxis LESS, pero básicamente el símbolo at representa una variable, por lo que sea que sea esto se insertará aquí mismo. Pero claro que tenemos nuestro retoque arriba, así que eso nos permite editarlo y voy a establecer el mínimo a, digamos, 900 y el máximo debe fijarse en 2,000. Se trata de números arbitrarios. Aquí puedes poner lo que quieras. Voy a darle a esto un nombre más descriptivo del ancho del contenedor de página. Voy a darle a “Save” en eso, y claro, porque estamos creando un retoque, que es algo que queremos aparecer en nuestro admin, vamos a tener que empujar este cambio a nuestra página web en vivo también. Voy a entrar aquí, otra vez, ya
deberías estar muy familiarizado con esto, lo
hice numerosas veces en esta clase. Git add, git commit, agrega nuestro primer retoque, ahí vamos,
git push, y después de eso se empuja, actualicemos nuestro editor de estilos aquí. Aquí puedes ver bajo tamaño y valores, tenemos ancho de contenedor de página. No sé si podemos navegar a otra página aquí mientras estamos en editor de estilo. Pero déjame sólo tomar la dirección del sitio web y abrirlo en una nueva pestaña. Déjame arrastrarlo hasta aquí. Vamos a otra página que en realidad tiene el contenedor del sitio, cualquier otra página que no sea la página de inicio. Hagamos clic en el contenedor, inspeccionarlo, y como puedes ver, el ancho del contenedor es de 1140. Está aquí arriba. Una vez que muevo mi cursor ahí arriba, ya no lo puedes ver, pero deberías poder ver que el área azul es de 1140 píxeles. Entrémonos a nuestro editor de estilos y constreñamos eso a 1000 píxeles. Se puede ver aquí ya está afectando el encabezado. Podemos ver esto funcionando en vivo. Voy a pegarle a “Save” en eso. Vamos a refrescar esta página del blog, y ya puedes ver, si volvemos a mirar ese contenedor del sitio, está constricto al ancho de 1000. Lo que acabamos de hacer es que hemos configurado un valor predeterminado para el contenedor de páginas abajo en nuestro archivo LESS, pero entonces también hemos agregado un retoque aquí que permite al usuario admin entrar y editar ese valor. Esta es otra característica realmente genial de las plantillas de Squarespace. Podemos ir a través de nuestros archivos CSS o LESS y agregar estos ajustes para permitir al usuario administrador más control sobre el estilo de su plantilla. Retoques como estos permiten al usuario administrador más control sobre el sitio web sin tener que cavar en el código de plantilla. Encontrarás que en muchas plantillas con todas las funciones, hay muchos retoques disponibles y el usuario administrador tiene mucho control sobre cómo se ve y se siente su plantilla. Pero para nuestros propósitos con esta plantilla de espacio, en realidad aún no
tenemos ningún retoque, así que si estuviéramos desarrollando una plantilla desde cero, tendríamos que construir en todos los retoques nosotros mismos. En la siguiente lección, en realidad vamos a ver una de estas plantillas con todas las funciones, y veremos ejemplos en vivo de retoques. Pero ahora que sabes crear tus propios retoques, ahora
puedes modificar esas plantillas para eliminar retoques o agregar tus propios retoques encima de los retoques que ya están disponibles, y eso te permitirá construir una plantilla más completa que te permite cambiar las cosas sin tener que cavar en el código a la larga. Eso cubre todas las principales características de las que quería hablar en la clase de hoy. Pero en la siguiente lección extra, lo que vamos a hacer es mirar una plantilla más compleja. Vamos a ver probablemente un punto de partida más realista, algo en lo que ya has estado trabajando, una plantilla que has seleccionado de la página web de Squarespace, y ahora quieres hacer algunos cambios. Bueno, vamos a echar un vistazo a un ejemplo de eso en la siguiente lección. Entonces terminaremos. Hablaremos del proyecto de clase y los pondré en camino. Casi al final aquí chicos. Te agradezco por mirar hasta este punto, y te veré en el siguiente video.
15. Extra: editar una plantilla más compleja: En esta clase hemos utilizado esta plantilla base de Squarespace. He usado esta plantilla base porque creo que es un buen punto de partida para aprender el desarrollo de
plantillas y además recomendaría usarlo para desarrollar tus propias plantillas personalizadas. Yo sí sospecho, sin embargo, que la mayoría de las veces estarás queriendo editar una plantilla existente. Probablemente uno de los que vienen con Squarespace para empezar. Por eso en esta lección extra, vamos a ver cómo personalizar una plantilla existente. Sólo un descargo de responsabilidad aquí chicos, esto va a estar un poco fuera del puño porque no
he planeado con demasiada anticipación lo que vamos a hacer, pero por eso es un poco de video extra. Vamos a elegir una plantilla y luego vamos a llegar a una edición y ejecutarla y se puede ver un pequeño recapitulación de nuestro flujo de trabajo. Esto formará un poco de introducción sobre cómo editar las plantillas más complejas que podrías estar ejecutando en tu sitio de Squarespace. Para empezar, vamos a squarespace.com/templates, que podemos encontrar simplemente yendo a squarespace.com y dando click en Plantillas. Aquí, puedes ver la lista de todos estos diseños. Ahora, una advertencia antes de saltar directamente es que algunas de estas están construidas con una versión más reciente de Squarespace y no puedes usar el modo desarrollador en algunos de ellos. Por lo que sólo otra renuncia aquí que algunos de estos, no se
puede utilizar el modo desarrollador con. Pero si nos desplazamos hasta la parte inferior, puedes ver que estas plantillas están en la última versión de Squarespace, buscando plantillas de una versión anterior. Voy a dar click en este. Aquí, podremos buscar una plantilla en particular. Voy a ir con la plantilla que actualmente estoy ejecutando en mi página web en vivo, que se llama Jasper. Buscaré a Jasper, y cuando lo encuentre, daré clic en Empezar con Jasper. Así como así, tenemos un nuevo sitio web de Squarespace con un poco de contenido demo. Como puedes ver, se parece mucho a mi sitio web en vivo que te mostré antes, mi portafolio de fotografía y videografía, pero solo con contenido demo. Primero lo primero, vayamos a Configuración, pasemos al modo Desarrollador avanzado y activemos el modo desarrollador haciendo clic en este toggle, haciendo clic en Continuar, y en breve, tendremos el modo desarrollador habilitado y nosotros tendrá toda nuestra información aquí mismo. Voy a abrir mi aplicación de terminal favorita, que para mí es iTerm, para ti en un Mac, probablemente sea Terminal y en Windows, Command Prompt. Esta vez voy a hacer las cosas un poco más fáciles para mí y voy
a poner la carpeta de plantillas en mi escritorio. Voy a usar la palabra clave cd seguida de escritorio, y ahora estoy en escritorio. Lo que puedo hacer es ejecutar git clone, copiar la dirección git justo aquí, pegarla aquí, y ahora clonará ese repositorio en mi escritorio. Voy a necesitar autenticarme aquí. Voy a necesitar poner en mi nombre de usuario. Es un poco difícil de leer cuando va por encima de una línea. Ahí vamos. El password está en mi app de gestión de contraseñas. Voy a cerrar iTerm ahora y abrimos esa carpeta recién creada en VS Code o cualquier editor de codificación que te guste usar. Hagamos clic aquí para Abrir carpeta. En mi escritorio puedes ver aquí que hay una carpeta de plantillas. Voy a dar clic en abrir en eso y cerrar la pantalla de bienvenida. Ahora, podemos ir por nuestra estructura de plantillas y hablar un poco sobre lo que está pasando aquí. El primer carpeta es una carpeta de activos. Si estás familiarizado con el desarrollo web, debes saber que los activos incorporan cosas como CSS, JavaScript, imágenes e iconos. Aquí, puedes ver tenemos un Sprite SVG que tiene todos los diferentes iconos que utilizamos dentro de esta plantilla. Podemos poner en nuestros propios iconos e imágenes que se utilizan dentro de la plantilla aquí mismo en activos. Aquí, dentro de bloques podemos ver una serie de bloques. Esta plantilla en realidad utiliza muchos bloques sobre múltiples archivos de región, e incorpora un montón de bloques de navegación diferentes y también parciales, cuales no hemos visto un ejemplo de la vida real antes. Pero como se puede ver aquí, este cart.block claramente no es un elemento de navegación, por lo que esto tendría que ser parcial. Aquí está bastante claro que esto es para traer nuestro carrito cuando estamos habilitando el comercio electrónico. No estamos cubriendo el comercio electrónico en esta clase, pero veremos que se traen algunos parciales en tan solo un segundo. Si entramos en colecciones, tenemos archivos conf para nuestros principales tipos de colecciones, álbum, blog, eventos, productos, proyectos. También tenemos un archivo folders.conf para que podamos tener carpetas en esta plantilla y el archivo index.conf para definir un índice y luego un archivo.list para el índice para determinar la presentación de ese índice y un archivo.list para la presentación de una lista de proyectos. Después moviéndonos, tenemos una carpeta de scripts. En la carpeta de scripts tenemos site-bundle.js, que es un gigantesco archivo JavaScript de JavaScript minificado. No espero que puedas decodificar esto. Si sí quieres hacer cambios de JavaScript a una plantilla que ya tiene un archivo así, te
recomiendo crear un nuevo archivo JavaScript y luego llevar eso de la manera que ya lo hemos hecho en esta clase. Strings, no hemos visto antes, pero este es obviamente un lugar para almacenar datos json. No voy a gastar tiempo en eso. En estilos tenemos todos nuestros archivos menos y CSS. Al bajar podemos ver que solo hay un
archivo de sitio.region o solo hay un archivo de región y se llama sitio.region, e incorpora muchos de estos bloques. Como se puede ver aquí, este es nuestro primer ejemplo en el mundo de un parcial. Podemos ver desde esta sintaxis aquí seguido del nombre del bloque. Básicamente estamos tomando el código de responsive-nav.block, que está justo aquí, y colocándolo justo aquí. Entonces solo un archivo de región y eso obviamente significa que solo tenemos un diseño. Si entro a mi archivo template.conf, puedes ver que es el caso. Tenemos solo un layout en nuestro objeto layouts y
es el layout por defecto usando sólo la única región que tenemos. Si miramos las navegaciones, sin embargo, esto es un poco diferente a lo que teníamos en nuestra plantilla. Sólo teníamos una navegación, mientras que esta plantilla tiene dos. Tiene una navegación secundaria, y luego tenemos esta matriz de hojas de estilo que enumera las hojas de estilo que queremos traer a nuestra plantilla, incluyendo el orden en el que queremos que entren en nuestra plantilla. Aquí, tenemos una matriz de SystemCollections. Como hemos visto anteriormente en la clase, SystemCollections nos permite aprovechar
estos tipos de colecciones sin tener que escribir una.list o.item page para ellos. Aquí abajo se puede ver una nueva matriz llamada SystemPartials. Esto es igual que parciales, pero no los definimos nosotros mismos. Dentro de Squarespace, tenemos este parcial aquí que Squarespace nos brinda, y es un conjunto de botones de compartir. Entonces esa es una pequeña visión general de nuestra plantilla. Lo que voy a hacer a continuación es realmente ejecutar esta plantilla localmente. Tenemos que entrar aquí, ejecutar squarespace-server, seguido de nuestra dirección de sitio web. Vamos a ver nuestro sitio web por separado fuera del admin también. Pondré eso en su propia pestaña, y luego me aseguraré de copiar eso, ponerlo aquí abajo, y luego ejecutarlo en nuestro comando de servidor Squarespace, asegurándome de poner el —auth al final. Golpeé Enter en eso. Después de un rato, debería estar escuchando en port9000. Abrimos una nueva pestaña, ejecuten localhost: 9000, y te atraparé en unos segundos cuando esto finalmente termine de cargarse. Aquí, puedes ver nuestra página web en todo su esplendor, básicamente
es solo un título de sitio en este momento. Todavía no tenemos ninguna navegación porque desafortunadamente, si volvemos a nuestro administrador, puedes ver que una vez que activamos el modo desarrollador, Squarespace realmente arrancó todo el contenido demo, y así ahora tenemos que crear nuestro propio contenido. Muy triste. Pero bueno, en un ejemplo de la vida real, no
estarías usando contenido demo de todos modos. Déjame volver a traer algo de contenido demo. Haré el mismo ejemplo que en nuestros principales proyectos, que estaba en Acerca de la página, haga clic en Editar, y sólo voy a buscar una imagen. Realmente no importa cuál sea la imagen. Vamos con este precioso manojo de árboles junto a un lago, parece. Simplemente va a procesar y redimensionar eso y luego haremos clic en Aplicar. Después de hacer clic en Aplicar, podemos desplazarnos hacia abajo y ver que ya hay algún contenido de positor ahí, así que voy a guardar eso. Como puedes ver, tenemos nuestra primera página y automáticamente se suma aquí porque está en nuestra navegación principal. Si lo muevo a navegación secundaria, creo que seguirá apareciendo y probablemente no sea obvia la diferencia hasta que agregues elementos de navegación a ambas navegaciones. Ahora, sé por experiencia que esta plantilla ya se ve bastante bonita. Realmente no puedo pensar en demasiadas cosas que querrías cambiar en esta plantilla, pero hay infinitas cosas que obviamente podrías hacer con cualquier plantilla. Una de las cosas que he notado es que no hay mucho de pie de página. Algo que sé de esta plantilla es que hay un elemento de pie de página en la parte inferior, pero no está habilitado. Si voy a Inicio, si voy a Diseño, entonces voy a Estilos del Sitio, puedo encontrar todos mis ajustes para esta plantilla. Esto fue algo de lo que hablamos brevemente, pero no creamos muchos ajustes porque realmente no
había tantos estilos CSS dentro de nuestra plantilla para empezar. Pero como se puede ver aquí bajo sitio:pie de página, podemos hacer clic en esta casilla de verificación para mostrar el pie de página del sitio global. Si no tenemos esa casilla de verificación mostrada, el pie de página del sitio estará configurado para mostrar ninguno y en realidad no lo vamos a ver. Voy a pegarle ahorrar en eso. Volviendo a nuestra página web en vivo de Squarespace fuera de nuestro administrador, me voy a desplazar hacia abajo y como pueden ver, todavía no
hay nada en nuestro pie de página. Si inspecciono la página sin embargo, deberíamos empezar a ver que ahí hay un elemento de pie de página. Como puedes ver, pie de página, ID, pie de página y luego dentro tenemos todo un montón de código y en el div más anidado, realidad no
hay contenido. Entonces echemos un vistazo a nuestro código de plantilla y veamos de dónde sale eso. Por lo que voy a ir al sitio.region y buscar pie de página con la etiqueta de apertura. Aquí puedes ver dónde está definido nuestro pie de página. Como puedes ver aquí, tenemos un campo abierto de Squarespace, así que obviamente en realidad no hemos puesto ninguno de nuestros bloques finales así que no va a haber nada que aparezca. Intentemos hacer eso ahora mismo. Volvamos a aquí y se puede ver cuando pase el cursor sobre esta zona de pie de página, se
puede ver esta palabra pie de página subir y se puede ver este botón para editar. Ahora, puedo agregar bloques a mi pie de página. Ahora eso está todo bien y bien, esa es una característica ya en la plantilla. Pero lo que quiero hacer en esta lección es realmente hacer un cambio de código a la plantilla porque de eso se trata esta clase. Todo se trata del modo desarrollador. Si solo pudieras hacerlo dentro de tu administrador de Squarespace, entonces ¿por qué necesitarías código? Bueno, en esta instancia, digamos sólo que queríamos tener una navegación en nuestro pie de página. Creo que eso es bastante común en muchos sitios web,
tener una navegación de encabezado y un pie de página en navegación. Entonces en lugar de tener este campo de bloque abierto, lo que voy a hacer, volver aquí, bajemos aquí, quitemos este campo de bloque y lo reemplacemos por una etiqueta de navegación Squarespace. Debido a que ya tenemos dos configuraciones de navegación en nuestra plantilla de Squarespace, como puedes ver esta navegación secundaria, voy a ahorrar un poco de tiempo aquí y simplemente re-propósito la navegación secundaria en lugar de crear un nuevo pie de página navegación. A lo que me refiero con repropósito es que lo voy a hacer para que la navegación secundaria aparezca en el pie de página en lugar de en el encabezado también. Entonces, lo primero es lo primero, necesitamos encontrar ese código en el encabezado, eliminarlo, y moverlo hasta aquí. Entonces si me desplazo hacia arriba, nuestro contenido de encabezado está en este archivo header.block. Pasaré a nuestra carpeta de bloques, entraré al archivo header.block y como puedes ver aquí, tenemos nuestra etiqueta de navegación Squarespace para el nav principal, y luego justo debajo, el nav secundario. Entonces voy a tomar la etiqueta más su elemento padre que está envolviendo alrededor con el comando X, se copia a mi portapapeles. Entonces ahorraré en esa página, regresaré a aquí y lo pongamos en nuestro pie de página en su lugar. Hit save en eso. Ahora, vamos a crear en realidad un elemento secundario de navegación, digamos contáctanos página, solo contáctanos. Está bien, así que eso está en la navegación secundaria ahora y como puedes ver, solo
se sienta justo al lado de la navegación principal en nuestra página web actualmente en vivo. Pero por supuesto, hemos hecho cambios de código localmente y eso debería estar apareciendo en nuestra versión local. Entonces volvamos a ejecutar localhost 9,000 y veamos qué pasa. Como pueden ver, tenemos nuestra página sobre aquí arriba en nuestra navegación primaria pero si nos desplazamos hacia abajo, deberíamos ver un pie de página con navegación para la navegación secundaria. Actualmente no vemos eso, así que vamos a la página sobre. Hace que sea un poco más obvio y aquí se puede ver el enlace de contacto con nosotros está por abajo. A lo mejor estaba ahí en la página de inicio. Parece que la página de inicio es un caso especial pero no obstante, si estamos en la página sobre, se
puede ver el enlace de contacto con nosotros está aquí abajo y por supuesto podemos intercambiar estos alrededor, podemos movernos contactarnos y a punto de las posiciones opuestas . Entonces cuando volvemos a ejecutar nuestra versión local, puede ver sobre está ahora abajo en nuestra navegación de pie de página y contactarnos está aquí arriba en nuestra navegación de encabezado. Entonces ese es un pequeño cambio en una plantilla más completamente destacada en esta lección. Esencialmente, podíamos hacer cualquier cosa que quisiéramos desde este punto. Las posibilidades son infinitas y desafortunadamente, no
puedo cubrir cada cambio posible que alguna vez puedas imaginar con tu plantilla de Squarespace. Se me ocurrió poner una navegación del sitio o un pie de página en la navegación ahí justo en el acto. Sé que eso no necesariamente va a ser el cambio que te
gustaría hacer a tu sitio web de Squarespace pero por supuesto, siéntete libre de dejar un comentario en el cuadro de discusión de abajo. Podemos ayudarnos unos a otros para crear lo que queramos en nuestra plantilla de Squarespace. A lo mejor queremos cambiar el diseño general, a lo
mejor queremos incorporar una barra lateral, a lo
mejor queremos incorporar algún otro marco de JavaScript que ejecuta casi una aplicación dentro de nuestra plantilla. Casi cualquier cosa es posible, al
menos en la parte delantera. Definitivamente, toma lo que has aprendido en esta clase, aplícalo a crear algo personalizado para ti o hacer esos cambios tu plantilla de Squarespace y entiende que si
hay algo que no sabes hacer o puedes no piezas las dos juntas, siempre
puedes dejar un comentario en el cuadro de discusión de abajo. Me interesa ver qué quieres cambiar en tu plantilla de Squarespace y haré todo lo posible para apuntarte en la dirección correcta. Entonces sí, ojalá esto te diera un poco más de exposición a otras plantillas y puedas ver que independientemente de qué plantilla estemos editando, dondequiera que sea la plantilla base o esta plantilla Jasper, es el mismo proceso y el mismas mecánicas que están trabajando detrás de bambalinas. Entonces gracias por ver. Voy a terminar la clase en el siguiente video y puedes empezar en tu proyecto de clase si aún no lo has hecho. Entonces espero con ansias verte y desconectarte, así que te veré en el próximo video. Oigan chicos, olvidé mencionar una cosa antes de pasar a la siguiente lección. Si quisieras hacer estos cambios en vivo en tu sitio web, por supuesto,
ejecutarías git add y luego git comprometería esos cambios. Así que digamos pasar a la navegación secundaria y luego git push. Por lo que ese cambio ahora va a estar en vivo en tu sitio web en lugar de simplemente ejecutarse localmente. De acuerdo chicos, pensé que solo tiraría eso ahí porque me acabo de
dar cuenta de que en realidad no empujamos eso a nuestra página web en vivo. Vamos a volver a comprobar eso ahora mismo. Sí, así que como puedes ver, esa navegación ahora está separada en nuestro encabezado y nuestro pie de página. Entonces eso es todo. Te veré en el siguiente video.
16. Outro: En esta clase, cubrimos todas las cosas principales que puedes hacer dentro de una plantilla de Squarespace. Al abrir la plantilla, hemos podido editar todo el front-end, insertar HTML, CSS, y JavaScript donde queramos. También hemos aprendido sobre la capa de datos JSON y qué datos podemos traer desde el back end usando JSON-T. Para tus proyectos de clase, te animo a crear tu propia plantilla. ¿ Te gustaría que hubiera una barra lateral en tu página de blog? A lo mejor quieres crear un diseño de navegación de varias columnas en tu pie de página. Ahora, armado con tu conocimiento de las plantillas de Squarespace, la elección es tuya. Asegúrate de publicar lo que creas en la sección de proyectos de la clase. Si necesita alguna ayuda u orientación, deje sus comentarios en la sección de comentarios o en la sección de discusión a continuación. Gracias, como siempre, por ver, y espero volver a verte en algunas de mis otras clases.
Christopher Dodd, Web Developer / Educator
