 Unis a licención historia hace mucho tiempo. Llegado a más de 20, o sector 2006 se ha dedicado, casi in exclusiva, ao interno web, trajando e formándose desde entonces en AI, accesibilidad, tus habilidad, tecnologías de front-end, web-press e gestión de proyectos. Después da dos anos como freelance, desde junio 2017, Unis está trajando en Artesans, o magnífico equipo de golpes de Mitsis Consulting, unis se dedica ao desarrollo de front-end e ao desarrollo de temas e plávisas na vida. Le gustan múchios os estándares, os estándares, o Código Lúmpico e pensámonos os usuarios de backend tan olvidados a menudo. Unas pláusas para a novia. Buenos días a todos, muchas gracias por venir. Disculparme la voz porque estoy un pouco encostipada, no tengo mucha voz e a veces tengo bastante tos, desculpame. Oye venido a hablaros de esto, de SaaS, de Google, sobre todo de como, un pouco, a idea es que hablemos de como hacer má suficiente o nosso trabajo quando desarrollamos un tema nuevo, un proyecto nuevo a medida. La idea es que, quando tenemos que hacer proyectos nuevos que nos dan un diseño a medida, portanto vamos a hacer un tema a medida para ese proyecto. La idea es que podamos hacerlo de la forma má rápida e má suficiente e sobre todo tratar de non repetirnos en esas tareas que se hacen muchas veces e podernos centrar más en el trabajo creativo, en el sentido de poder trabajar como va a ser la web e como va a se organizarse, etc. En la automatización de tareas, lo que haces es cumplir un pouco con ese topic del dry, Don Rappin Yourself, nos automatizamos nas tareas, como por ejemplo a compilación de propereciosas de CSS, de ahí, se trabajamos con SaaS, nos ayudará mucho en este sentido de poner a propereciosas CSS e aún son necesarios, unificación de fixeros, CSS JavaScript, detección de errores, compresión de imágenes, etc. La idea es un pouco todas esas tareas que al final do proyecto quando vamos a hacer el deploy del proyecto nos ayudará a realizarlas. Otra tarea es que durante el desarrollo, outra idea es hacernos má suficientes. Se trabajamos con Google e con browser sync, vamos a poder hacer aquello que estamos haciendo algo, tenemos que ir al navegador, control f5, vamos a recargar la página, con browser sync nos la recarga el automáticamente cada vez que salvamos un cambio en nuestro código de modo que es mucho más fácil estar trabajando. E se además estamos probando cosas en diferentes dispositivos o diferentes navegadores, navegamos por uno, nos navega por todos e nos los recarga a todos, de manera que también es una tarea que se nos la hace mucho más llevadera e más fácil e nos ahorra tiempo, que al final do algo también se trata de eso. O entorno, unha cosa antes de nada, qual es o que vosotros utilizáis ás habitualmente? Bien. Qual es o que vosotros utilizáis de actualmente Google, Google, Webpack o algo similar? Vale. Bueno, miren, fantástico. La idea es que los que todavía no lo utilizáis con esta charla, mi idea es que os animéis a hacerlo, porque os va a ayudar mucho en esa tarea de desarrollo del tema. Bueno, ya sabes, necesitamos un entorno de desarrollo local que puede ser cualquiera destos, lo podemos cada uno utiliza el que es mejor le vaya, yo actualmente trabaja bastante con ManPro e actualmente me he pasado a local by Flywall, que realmente es fantástico. E realmente es de fronten, también hay un montón, también se trata de que cada uno utilice las que mejor le vaya. Hoy en día, quizás a nivel de automatización de tareas el que realmente está más, lo último es utilizar Webpack. Yo todavía no me he metido con Webpack, pero ahí vamos a ir seguramente pronto. Pero en momento con Google podemos hacer muchísimo más cosas, muchísimo más cosas igualmente e dos má forma un pouco má sencilla que con Webpack. Bueno, preprofesadores, el que quera es, les, ad, styles, lo que sea. Si os fijáis, se no utilizáis una herramienta como a Google, Google o Webpack, vais a necesitar un micolkit, un coala, este tipo que es el que os compile el SAS. Pero en cambios utilizáis Google, pues ya no necesitáis esa outra capa. Bueno, framework, lo mismo de CSS en los que queráis. E como os decía, pues bueno, un momento de trabajo, utilizamos un trabajo, es MAMPRO, pasamos menos a local, y luego pues 9, NPM, Google, PSAS. Pero bueno, eso ya os digo que cada uno lo que más le convenga, le guste. Bueno, outra cosa que hacemos, cuando empezamos un nuevo tema, no empezamos de 0, 0, 0, sino que cogemos un estápter 100, vale? Hay varios, en otros tiempos, yo he puesto porque para mí es un histórico Bones, utilicé mucho tiempo Bones, era un tema muy bueno en su momento, ya está descontinuada, pero bueno, actualmente estamos utilizando el trabajo bastante Sage, en versión 8, ahora estamos estudando la versión 9, pero pasa que ya es muy elaborada. Hoy os voy a hablar de, voy a utilizar un discourse, porque es un tema mucho más sencillo, un estápter mucho más simple, y entonces vamos a hablar haciendo esto con un discourse, vale? Pero la idea es que, lo que dáis, vale? Vale, entonces, como se empieza? La primera vez, vamos a tener que hacer más cosas, e o importante de éstos, que luego, las siguientes veces, en los siguientes proyectos, como ya tendiremos un abaje, simplemente copiamos un abaje, ya temos mucho trabajo hecho. Entonces, lo primero que hay que hacer, pues, evidentemente, vamos a tener que tener instalado 9, instalar NPM e instalar group, e hay que perderle un pouco de miedo al terminal, vale? A trabajar con una línea de comandos, vale? Da un pouco de aprensión al principio, pero val da pena. Bueno, instalar NPM, pues, primero vamos a ver se instalamos, pues es mantido, pues, actualizamos, ponemos a última, e instalamos group a nivel global, vale? Con o NPM global, e ya lo tenemos en la máquina. Luego, yo lo que haría es, en este caso, en el flujo que he montado, es unirme en este caso a Underscore, e me he creado el tema ahí, vale? Me he creado el tema, non lo he sacrificado, que sabéis que podeis sacrificarlo. Non lo he sacrificado porque non me gusta como organizar, lo dividido tanto en tantos ficheritos que, bueno, non me gusta, entonces, e así, también vemos como hacerlo nosotros con cualquier outro tema, vale? E, nada, luego, pues, ya vamos a nosa instalación de Wolpes e o instalamos, tendremos un, ya sabes, con Underscore, pues, tenemos esto, es lo que vemos una vez instalador el tema. Vale, pues, vamos a ver como inicializamos nuestro proyecto, pues, nos ponemos dentro de la carpeta del tema, donde tenemos nuestro tema e inicializamos o proyecto. Eso quiere decir que vamos a crear una carpeta, perdón, habría que crear la carpeta del tema que queremos hacer, no? Nos ponemos ahí e, con NPMM, creamos o primer fichero, o Packard Johnson, que es donde basta todas as instrucciones de las dependencias que vamos a necesitar, todos os plugins, digamos, que vamos a necesitar para hacer las tareas. E, luego, también, tenemos que instalar Wood, eu se puesto con a versión 391, porque, con a versión 4, a mí me está dando problemas e, portanto, os lo voy a explicar con a 391. Vale? La 4 que incorpora se dien mejoras, pero, luego, con Boussourcing, tiene ogunos problemillas, portanto, os expligone a esta versión que funciona correctamente. E, luego, que os inicializamos Git, eso sempre, que os tenho en el repositorio ahí. Non voy a hablar de eso, pero, por supuesto, hay que hacerlo. Vale? Entonces, tenemos un uso primer Packard Johnson. Fijaros que al instalar Wood, como una dependencia de desarrollo, nos lo apuesto en the dependences group, y ya tenemos ahí el, el, el, la primera línea de dependencia que tenemos. Vale? Vamos a crear un fichero Woodfy, la continuación, primero que hacemos, es asignar recurrir el Wood, vale? Y creamos unha tarea default y la llamamos con, con, creamos esta función defaultas que ha xe un, en este momento, un console lock. Eso es por si, lo pedéis a xer seguindo paso a paso, entonces, ireis viendo, luego en casa, como, al llamar ahora Wood, pues, ya nos ejecutaria este comando en la consola. Vale? Importante, no ignore, no olvidarmos de poner no de modules. Quando instalamos quando ahora instalamos los, los, los, los módulos, genera una carpeta que es no de modules, que ahí están todas las plugins que vamos utilizar. Pesa muchísimo. Importantísimo, no olvidar si de poner un langit ignore, porque xe no, cuando hagamos un push nos van subir todo eso arriba, que no necesitamos para nada, porque xe no instal, el busca los plugins y los instala cada vez. Portanto, no es necesaria. Y, bueno, y aquí yo supuesto la carpeta disk porque es la de distribución, ahora veremos como es y hay que, esa también, hay que sacarla porque no la necesitamos en el repositorio. Bueno, si hacemos la primera ejecución de work, lo llamos desde, desde la línea de comandos e nos ejecutará, mira, vale, está, empezando la axlón, nos pone el texto y termina. Ya está, e sabemos que nos está funcionando. Vale, luego como sacificamos el tema, vale? Eu, no, ahí eu voy hablar bastante de como organizar todo esto, e eso é bastante a gusto de cada uno. Eu os explico como a mí me da bien la organización. Entonces, eu creo unha sempre una carpeta sets e, dentro de esa, vale? Está la de sas, creamos la carpeta de sas e, luego o sea, creamos la carpeta de sas e la de sas. O sas é onde va estar o fichero sas e o sas é onde vamos a tenermos os ficheros de sas. Vale? Eu, en este caso, como ya hemos estamos con el fichero de, de, de underscore copiamos, no, nos copiamos o, el style ccs que nos viene con underscore, su contenido nos copiamos en main scs que será o fichero principal de sas, vale? Que será el que va a ser as importaciones de todos os ficheros de sas que hai. Entonces, en ese fichero tiene que estar la cadecera de sas porque es la que vamos estar reproduciendo, vale? E, luego, vamos a ver sas, web sas, web auto prefixer e web surf maps, vale? Sas, evidentemente é o que nos ayudará con la compilación de sas. Auto prefixer é o que nos pone prefijos de denaigadores e son necesarios ou no, dependiendo, también, de unas configuraciones que le demos e surf maps nos crean esos ficheros que indican que van bien sotó pa' los dos avalladores de saber dónde están e o que nos damos as inspección de una web nos indica en dónde está un determinado instrucción en que fichero está. E, mira, está la mía. E, bueno, veis ahora como o como o package ya tiene 4 líneas más de los elementos que acabamos de instalarle, vale? Que hacemos ahora? Pues modificamos o fichero Google File vamos a meterle las primeras instrucciones que queremos que nos haga para manipular os estilos de la web, vale? Que é s'oponer os auto prefixos, a crear os surf maps e enviar o fichero de destino a la carpeta Asset.css que é de dónde lo vamos a buscar. Volver en tu correo, porque sinon no me dará tiempo. E, bueno, se ira ahora lanzada a tarea Google Styles ya nos generaria o fichero main.css que seria o fichero principal, vale? Outra cosa que entonces hay que hacer é se ira fusions PHP e incluirle o queue do main.css que é o fichero css que vamos a utilizar, vale? Bueno, se hacemos cualquier, a partir de este momento cualquier cambio en el main.css genera este outro código em css vale? Poso un ejemplo para que se vea, vale? Vale. É uma cosa que é que haces. Uma cosa que eu, quando hago autometecincin metereis é tratar de separar o que hacemos as tareas de desarrollo e de producción. Quando queremos automatizar a tarea nos interesa que não necessitamos que nos minimicen, nos compilen nos comprima aí não se dê cosas que não necessitamos que nos las haga. Por tantos as tareas solo las meteremos en producción e para desarrollaxemos solo las que realmente nos agilizan o trabajo e ya está, vale? Então é bom, aqui se explica como inicializar RousorSync que é o que nos permitirá e navegar que se actualice o web constantemente vale? E aqui um pouco estaría as tareas de desarrollo da parte de estilos, vale? Não temos, pues, todo o que queremos que nos haga a nivel de estilos a nivel de desarrollo, vale? E creamos na tarea Watch, onde llamamos a los diferentes, basicamente ao lado de estilos e ao lado RousorSync, momento con eso e para a produção o que já hacemos é se crea un directo iodis e aí metemos las imagenes minificadas se concatena e minimiza JavaScript se concatena e minimiza logicamente todo o que é o CSS e os susmax e, então, ao final, creamos outra tarea que é la de deploy que estamos metiendo todas que son solo de producción vale? Que las haremos quando vayamos a hacer o deploy de producción organización del tema é eu creo que é importante e reconozco que esta é un pouco especial de organizarlo mas se agora vemos o tema tal como lo tendíamos neste momento, veréis que a parte de ficheros típicos de work, funcions tal, index e todo temos o Google File o Package e logo temos a carpeta de no-demogules por aí metida agora vou explicar como eu o organizo de maneira que no-demogules quede fuera totalmente do que é o tema, en si mesmo o tema, pero sí a carpeta que vamos a trabajar e também os ficheros e o Package o que hago é crear uma carpeta de resus dentro do tema e aí é onde pongo todo o continuo original do tema, o que nós venimos un underscore, aí va todo e se queda fuera Google File, Package e no-demogules e então organizamos un pouco na carpeta Asset meter la carpeta de imágenes da JavaScript da JS como queráis demar, la metemos aí e então é que modificar funcions porque evidentemente vamos a tener LED que decidir que hemos cambiado las rutas e atentro de sas vuesta organización dividir sas en las carpetas que queráis e hacer os impostos que queráis e criamos una carpeta list que será a outra que estará no mismo nivel ficharos como queda temos o tema, temos una carpeta list a carpeta de no-demogules que se hace unha tarea, pero ya no vamos a utilizar para outras cosas e o resus está inicialmente todo esto o que hago después para hacer esos movimientos de carpetas de manera que al final me queda en resus una carpeta Asset con CSS e los ficheros de CSS que vamos a llamar do funcions e en JS todos los ficheros de JavaScript que necesitemos e em sas estarán todos os elementos sas e vamos a desestais o que nos haya compilado lo creará en la carpeta css lo que venga de sas lo meterá en css e tras build producción e se se llamamos a build plot no salgo al deploy no os creará esa carpeta list directamente en la raíz que tiene aí los assets que realmente vamos a hacer el deploy para producción no se se entiende mucho pero la idea es tenerlo todo como monurna enjado e separado unas cosas de las otras me conozco que hay gente que no le importa tenerlo aí todo junto e non es un problema pero es una manera que me gusta que estes todo como bastante más separado em funcions evidentemente vamos a tener que hacer ahí porque claro como vamos estar llamando unos ficheros ou otros en función del entorno en el que estemos lo que hago es crear una constante global para decidir en que entorno estoy e en función del entorno en el que estoy que en este caso le hemos llamado a un grande no, se detecto en que entorno estoy e en función del entorno voy a hacer que se llamen unos ficheros ou otros en cada caso no se entiende aquí vos he puesto un ejemplo todas as manés he creado un repon en Guizhard e podéis ver aí todos los ficheros pero un pouco la idea se está de que detectamos según en que entorno estamos e asignamos a la variabila en valor e entonces a partir de ahí asignamos o definimos os en quins os asignamos en cada caso e aquí pues estoy en local pues sí que hago un en Q de de diferentes ficheros que no están todavía concatenados e minimizados e nada en cambio cuando estoy en producción só lo llamo al main min porque es el único que voy a utilizar un poco la idea se está evidentemente aquí también lo que hablaba antes pues también que funcione de la necesidad que tengamos de llamar uns scripts uotos puede que no tengamos que minimizarlos e portanto haya que meterlos a parte eso, hay que tenerlo en cuenta e se queremos hacer que solo uns scripts nos os cargue na determinada página no os vamos a poder concatenar en un único fichero e habría que tenerlo en cuenta e a partir de aquí también fijaros que he creado un variable que es la AssetDiv que depende que nos indica onde tiene que ir a buscar los ficheros porque como he creado esa carpeta resus dentro del tema que no podemos utilizar o getTemplade, director e uri porque nos mandaria a raíz e no nos encontraría entonces he creado esta variable e qualquiera Asset utilizo esa variable e enza constante e já tengo a ruta correcta a todos os ficheros bueno, a tener en cuenta que no, a final era máis rápido e acaso terminó só na tener en cuenta que a nivel de BOOP está salido la BOSN4 que tiene varias cosas nuevas e que es máis en teoría es máis fácil serializar e al poner como os ficheros que quere que se ejecuten en serio e os que quere que se ejecuten en paralelo pero ya os digo que me ha dado problemas e de momento lo tengo ahí aparcado hasta que consiga que se solucione e esto que acabamos casi todos un Webpack máis tarde o máis temprano que pasa que es máis complejo de configurar e realmente traen máis trabajos un pouco máis complejo pero bueno, habrá que tenerlo en cuenta e nada, aquí en Github o se puesto está ahí la URL está ahí el repositorio está todo o que os enseñado e podemos ver un... espera está fijaos todos os ficheros aquí o Google, o Package e tal se cogeis esto e os metéis como un tema e cambiáis el nombre del tema o le cambiáis el nombre del text domain e pero ya simplemente haci un Ntm install e como en el Package e os plugins que necesitas pues ya el ya los instalará ya creará la carta que tenes non amudules e entonces a partir de ahí ya podéis prácticamente empezar a trabajar e aquí un resusis pues está e aquí pues está es el underscore que os he dicho antes con estas adaptaciones que le he hecho e aqui en realidad igual a una versión sin el underscore e tenemos lo que más os interés es el Functions que es donde están las funciones estas de las variables e luego ya más que nada pues ya la organización de ficheros pues como como la veáis he hecho esta organización pero bueno la podés organizar como queráis de acuerdo pues nada molendo aquí pues muchas gracias yo creo que sí además de hacer charlas comparte todo esto en Github se merece dobra aplauso muy buena charla nada bueno ahora sí tenis preguntas levanta la mano por favor venga venga no me seáis pregonzosos alguna pregunta tiene que haber tenemos bastante rato senó tende que pasar yo el micro me tomaras las confianzas podo ver todo esto parándote gracias por la charla no se nos podíais dar algún sitio donde ir a buscar información no donde informarnos más ampliar documentación para convenciarse en todos estes no hay un sitio pero ya no hay un sitio que te lo explique todo a la vez entonces hay que meterse en Google para ver como funciona en cada web de cada sistema y ver como aprender un poco se aprende eso a base de buscar información dentro de cada sitio e ir probándolo yo os he puesto a un ejemplo evidentemente hay mochas más tareas que se pueden hacer o que incluso que se pueden hacer de outra manera eso ya una vez uno se mete con Google las pode organizar e las pode crear en cintas maneras pero no hay un sitio específico que yo sepa hola tenho una pregunta cuando haces el deploy todo el contenido se va a la carpetadist todo el contenido no el contenido generado para subirlo a producción entonces mi pregunta es como se tenho varios clientes que utilizan el mismo tema que hemos generado como se actualizan porque se utilizamos o git e tenemos o proyecto que con la carpetadist dentro hay alguna manera de actualizarlo yo no os he comentado pero hoy por ejemplo en la chat anterior Dario hablaba de un pouco de eso de que se poda tomar dos hardware de hit hub también e tal no te he comentado también con nuestro compañero con Xavi hablamos de que con Composer se poden hacer actualizaciones deployos a todos pensar que esto un poco es un tema que no es un la idea no es que sea un tema framework es un tema child pero sí que es verda que si tienes varios clientes podías ser intersente se haces algún cambio a hacerlo en todos decía para que fuese automatizado si tú haces una modificación e generas una nueva versión de este tema el cliente para poder actualizar fácilmente se tiene que ir copiando la carpeta se podría automatizar o cliente se poden tener hit hub hit hub o date e coso similar es así yo no he hecho nunca es un starter team generamente es un starter team que te da te do con dando son herramientas para que empieces cada vez un starter team nuevo se modificas esas herramientas para que la próxima vez sea má suficiente te iría bien modificarlo pero es todo para que empieces un proyecto nuevo un concepto diferente un pouco acorde o que tú preguntabas depende un pouco de como tú lo quieras enfocar porque se ella ha comentado que este entorno lo montas para cada proyecto para cada cliente tú podrías hacer todo esto que he comentado a ella además hay una manera de decirla WordPress que en vez de buscar as actualizaciones en el repo oficial busque en tu propio github cada vez que haces un deploy o todo lo que has hecho e haces un push en tu repo oficial le podrías decir que buscaras actualizaciones allí entonces esa web se buscaría esa actualización cames e utilicías de manéa generalista para crear como unha espécie de master theme en el que luego le haces modificaciones para en necesidades el cliente primero tendías que tener muy bien controlado porque ninguna web es igual entonces tendías que mirar que parte es la más generalista o la más general a todas e esas cosas específicas para clientes intentar modularizarlas e que siempre el master se actualice e luego la parte de cada cliente se actualice son independiente de esto puedes hacer por ramas, non sé, hay mil maneras má o menos te respondido náis máis preguntas eu vengo de magento de diseño, de maquetación e sí que he trabajado con Google entiendo que la instalación realmente es non mo lo mismo simplemente independientemente da cms la instalación sí, sí, esto lo podías aplicar a lo que tú quieras a lo que quieras a parte de archivos no porque tendrás outra a tu Google podías utilizar para cualquier proyecto lo que haces automatizarte tareas que tú haces habitualmente e aquí lo he adaptado además a WordPress porque lo utilizamos mucho en WordPress tenemos que tocamos en Functions tocamos máis cosas e tú estás haciendo un proyecto de HTML, CSS e JavaScript únicamente sin ningún cms pues esto te da a verterlas, aí o que pasa en ese caso por ejemplo, eu le ponía otros plugins que me permitirían por ejemplo partir la HTML en partes e así utilizaré o Sol on Header e todo eso en otro cms, pues lo mismo e le meterías a lo mejor otros plugins que te harán otras cosas para ayudarte en ese cms en concreto hola amigunas, unha bona pra charla te que irá preguntar has mencionado que con Google 4 has encontrado un problema podías hablarmos un pouco o que tipo de problema estás encontrado para se lo tengamos a implementar má, es una tontería o único que no he conseguido lo he implementado todo bien e tal pero cuando ya lo tienes todo en marcha e estás haciendo una modificación en tu código no me carga o único que non me hace bien es cargarme bien es cargarme, recargarme la página, o se salgo con browser sin hay algun problema e con browser sin e no me recarga la página que está trabajando é solo eso, é solo eso o demas funciona bien e da menta e os utilices o Google series e o Google Pavel e es máis claro se tu quieres pero eso me ha conseguido con incinción e por eso non lo he querido meter que lo había pensado en de hecho, está un pouco el código preparado para Google 4 pero al final dije má, lo quito porque es que normalmente non conseguí que me recargaran en las páginas Estas vegas de nas a verlas porque se lo botenfentas tú con ellos e dices tú pero o que está pasando e se le pasamos a gente da por al menos te quedas máis tranquilo pues sí, pues eso un aplauso a Valenoria