 Bueno, vamos con la siguiente charla, nos toca con Helmer. Perfecto, pues nada, como dice el título, más claro, agua. Nos va a enseñar a hacer temas con Fundation. Un aplauso, por favor, para Helmer. El aplauso, primero que todo darles gracias a todos ustedes por estar aquí, por elegir el track y aunque ya suene pesado, igual para ya amigas de día que llevamos más o menos, un aplauso a la organización, a los voluntarios porque hay muchísimo trabajo y la primera vez que yo veo una workante de Denver, cuando es mi segunda work, y es la primera charla que doy también, entonces así que, bueno, espero escucharme bien. Bueno, yo antes de empezar a meterme en el tema porque yo no quería dar una charla muy, digamos, técnica, sino como introductoria a lo que es Fundation. Yo, cuando me deseo a interesar por las páginas web, yo vengo de un entorno de diseño gráfico, de gráfica publicitaria y por allá en 2005, cuando me empecé a interesar por la web, que empecé a investigar, a aprender así como podía. Yo, lo que quería era básicamente aprender a controlar todo lo que yo tenía en esos archivos que veía por ahí, que me descargaba, y todo ese proyecto que tenía de HTML, de CSS, y que no entendía muy bien. Entonces, yo, conforme fui, fue pasando el tiempo, fue pasando los años, pues encontré y descubrí WordPress, una maravilla. Tenía mis propios proyectos en WordPress, mis blogs, empecé a hacer trabajo para unos clientes. Y bueno, es decir, es guay, pero yo quiero aprender un poco más lo de dentro y siempre no sabía por dónde empezar. Y entonces, en ese, llegó la época de los, como vamos a llamar, la Dividitis, como decía Mauricio, y bueno, con la Dividitis apareció la Frameworkitis, también como le ha llamado Mauricio, que ha dado una charla muy buena sobre flexible. Yo me encontré como un foundation en ese camino que todavía no termino de recorrer, que es el diseño del desarrollo web. Foundation es un framework, es un framework CSS, orientado a Responsive, aunque es un framework CSS, también tiene componentes de JavaScript para poder hacer interacciones o cosas que con CSS no se pueden hacer. Pero lo que más nos ayuda, lo que más nos ayuda a foundation es hacer ágiliz. Por ejemplo, tenemos que hacer un test de una página web o de una plantilla, pues con foundation en pocos minutos lo podemos tener. No lo tenemos que saber a fondos CSS, ni tenemos que saber a fondos JavaScript, incluso cuando tienen muy básicas, podemos tener una estructura de página web muy rápida. Alguien sabe que es un framework, tiene idea de lo que es un framework. Yo tampoco tengo muy claro exactamente la definición de framework, pero un framework es como una especie de herramientas que se integran en una sola y de funciones y de trabajo previo que ya se ha hecho para que luego nosotros no tengamos que hacerlo y así ahorrar tiempo. La parte CSS nos ayuda en ese aspecto. Como ya expliqué un poco antes, foundation se basa en la filosofía mobile first, que es que empezamos a diseñar desde pantallas pequeñas hacia pantallas grandes. Esto le gusta mucho Google, por ejemplo. Es responsive, obviamente, nos permite trabajar muy rápido, por ejemplo, no para hacer sitios en producción o página web ya que se vayan a lanzar, no solamente para presentarle, yo qué sé, al equipo de marketing, por ejemplo, una propuesta. Necesitamos una propuesta y antes podíamos hacer la Photoshop, por ejemplo, pues con foundation en realidad, cuando aprendemos a manejar un poco bien la herramienta, podemos hacerlo ya directamente en HTML y presentarles una propuesta funcional en un navegador. También nos permite tener buenas prácticas en la hora de trabajar con HTML y CSS. Y además, esto ya, en mi experiencia, lo que me ha permitido es aprender. Cuando yo empecé a trabajar con foundation, otros framework, como bootstrap, hoy vengo a romper una lanza por los framework, porque en la charla de ciudadano ve y de Juan José Llama, y de Mauricio, pues bueno, un poco, quedaron un poco atrás, porque a mí me permite aprender mucho, porque trabajando con foundation, me empecé a interesar más en la esencia de CSS y entender mejor lo que era CSS, aprender lo que son los preprocesadores en torno de JavaScript y que yo no vengo de un perfil técnico, me permitió entrar de una manera más fácil a entender todos esos conceptos y eso la igualdad. Entonces, me permitió aprender mucho esos conceptos y esos lenguajes. Al ser un framework de HTML, CSS y JavaScript, pues no estamos solos, porque hay una comunidad muy grande, no como la de WordPress, que está bien organizada y que se trabaja tan bien, pero sí que hay mucha gente, millones de personas que trabajan con estas tres tecnologías, entonces hay mucha información en internet. Entonces, no estamos solos, podemos tener de recursos, hasta herramientas de manera muy fácil. ¿Alguien conoce esta coverflow? Este sitio tan maravilloso que es como una red social, para diseñadores, desarrolladores donde se pueden resolver dudas y a más de uno le ha sacado algún apuro. En esta coverflow, y lo que estaba comentando antes de que HTML, CSS y JavaScript prácticamente en internet, no sé si esto, vemos que la tecnología que más usan los usuarios de esta coverflow, JavaScript, después HTML que no es un lenguaje de programación, es un lenguaje de marcado, de etiqueta, y luego CSS. Entonces, estas tres tecnologías según los usuarios de esa coverflow es lo que más manejan. Entonces, tenemos un gran abanico de posibilidades en cuanto a información que hay en internet. Pero bueno, vamos a lidiar, como integramos foundation o framework con WordPress. Es muy fácil. Lo integramos directamente en el teme o plantilla, en este caso de un teme con el que estemos trabajando, o el que estemos desarrollando. Yo he hecho un ejemplo de teme con foundation que lo subí al hijo, y lo pude dar a toquetear y ver más en detalle. He usado este teme de la web under scores que es un proyecto de automáticos y con muchos colaboradores. Es una plantilla que nos descargamos un teme con una estructura base de WordPress que podemos instalar en nuestro entorno de WordPress y es funcional. Claro, es un teme que en la misma web nos dice que es para testear, para explorar, para romperlo. Entonces, para aprender. En las prácticas descargamos foundation under scores desde la página web de foundation, cuando lo descargamos podemos descargarlo entero, completo con todas sus funcionalidades podemos descargarlo el esencial, que es lo mínimo viable para que funcione y podamos trabajar con él. Y también hay otra opción entonces aquí este apartado es muy importante personalmente para mí, porque puedes elegir con qué tipo de grid quieres trabajar con grid layout que es lo que explicó Mauricio antes o con flex o con flood porque por ejemplo alguien necesita instalarlo en una internet donde todos sus ordenadores usan internet proler 8 por ejemplo, entonces le puede venir bien que también se puede modificar las columnas del grid el Gutter, entonces podemos descargarlo de una manera más o menos personalizada si somos más técnicos podemos usar SAS y personalizarlo a nuestro gusto bien hay muchos perfiles técnicos de backend de desarrolladores que nos interesan mucho por la parte del diseño la parte visual, pero estos fenómenes pueden venir bien para hacer pruebas para poder maquetar algo de una manera rápida y que quede visualmente bien bueno, integramos la carpeta simplemente meter la carpeta que nos descarmamos de foundation en nuestro teme hay muchas maneras de hacerlo yo lo he hecho de esta manera metido directamente en la carpeta de foundation en la carpeta del teme que la instalamos en nuestro WordPress voy muy rápido la metemos allí y luego lo que nos queda es simplemente llamar los archivos de foundation para que esto ya cuando empecemos a maquetar esto funcione entonces podemos hacerlo de diferentes maneras encolarlo en el funcio PHP de nuestro tema tenemos que encolar el CSS siempre antes de la hoja de estilos principales de la plantilla es mejor que hacerlo antes luego el archivo JS el JavaScript y un archivo app de JavaScript por si alguien quiere añadir algo alguna función de JavaScript que necesita vale, y también es importante ese app JS porque tiene la función que hace iniciar foundation por si vamos a usar algún elemento de JavaScript porque sólo con el CSS ya tenemos gran parte de foundation funcionando y lo que nos queda es maquetar en la presentación original el gatito es el típico que hace así, pero bueno he tenido que sacar un PDF y bueno, ya se lo he imaginado yo digo explicar un poco lo que era el Grip CSS pero yo les voy a dejar detallar que si no vieron la charla de Mauricio la anterior también porque lo explicó de una manera magistral y de las dos formas como trabajamos con el Grip, hoy en día en maquetación web el Grip lo que nos permite organizar el contenido de una manera más sencilla, más cómoda en nuestros diseños con foundation simplemente lo que hacemos es que a las secciones, con un header, con un app simplemente en las clases le decimos cuántas columnas tiene que tener y sin tocar nada de CSS el ya no se organiza el contenido la documentación de foundation si queremos empezar a trabajar con foundation y queremos empezar a entenderlo y sacarle todo al máximo partido la documentación es súper completa una de las cosas que me gusta de foundation respecto a otros frameworks como bootstrap o siento que hay es la documentación porque está muy bien explicada con videos y con ejemplos muy prácticos entonces aunque no tengamos el perfil de desarrollador podemos entrar en la documentación y entenderlo muy fácil, está en inglés pero también se entiende aunque no sepamos inglés también se entiende muy fácil con los ejemplos que tiene cuando estaramos un descos en nuestro entorno de WordPress tenemos una web en el front de este estilo es como la que enseñó Mauricio antes que no tiene cargar los estilos del navegador o sea, ninguno cuando añadimos foundation solo con los archivos que hemos incluido en el functions y solo darle nombre a las clases que ya trae la plantilla el tema que nos hemos descargado desde WordPress, solo con darle clases a los elementos HTML ya podemos tener algo como esto por ejemplo en desktop, en escritorio en móvil o en una tablet entonces esto lo podemos hacer en 5 minutos lo que decía antes nos permite hacer unas pruebas muy rápidas y también lleva la producción si podemos lo que está explicando antes que simplemente se ponen los elementos HTML simplemente hay que saber cómo nombrar las clases y solo con nombrar las clases ya nuestro grid nuestro navegador organiza el grid de la manera que nosotros queremos una de las ventajas es que nosotros que podemos decir el foundation por defecto es responsive y nos organiza las columnas de manera de manera por defecto pero nosotros le podemos decir que cuando estamos en pantallas medianas que son esas las tablas le podemos decir que en vez de tener 9 columnas que tendrían las pantallas grandes como un ordenador normal o una televisión decimos que en tablas tenga 8 columnas y lo mismo pasa con nuestra área entonces solo con clases podemos decirle cómo queremos que nos muestra el contenido y también podemos hacer con clases que nos ponga el contenido en diferentes ordenes como lo que explicó Mumo Agricio antes que podemos tener una columna a un lado a este lado pero queremos que solo con CCS que nos la ponga al otro lado sin necesidad de hacer un absolute en CCS o usar margen extraños con clases CCS ¿Qué más podemos hacer a parte de definir un layo con foundation? para trabajar rápidamente podemos en las clases solo con nombrarla le podemos decir que muestre o oculten contenido dependiendo de dónde lo estamos viendo en este ejemplo que le decimos Schuch for Median este texto que está aquí solo lo va a mostrar en pantallas en tablets o en pantallas medianas en este ejemplo de aquí abajo por ejemplo, solo lo va a mostrar cuando tenemos la tablet o el móvil en horizontal si no está en horizontal este texto de aquí no lo va a mostrar entonces a la hora de maquetar y de hacer una prueba o incluso en producción nos puede venir muy bien para hacerlo de forma rápida sin necesidad de tocar una hoja de estilos porque ya la foundation lo hace por nosotros algo tan básico como para no crear estilos de botones foundation ya nos trae unos estilos predefinidos que los ponemos en una clase por ejemplo de enlace y ya no lo convirtimos en un botón esto es algo muy básico pero con foundation podemos hacer muchas cosas más podemos definir pop-ups tool tips y menus responsive en la documentación si no están interesados y la ven pueden ver todas las posibilidades que tienen entonces es si somos implementadores desarrolladores que nunca nos hemos puesto mucho con ccs o diseñadores y queremos dar el paso a entilar mejor cómo funciona ccs y javascript de personalmente pienso que es una buena introducción para aprender tener una base y entrar por allí a mi me sirvió mucho porque yo no sabía nada y gracias a foundation y a otros framework empecé a aprender más ccs y por qué no en algún momento hacernos nuestro propio framework con nuestras propias definiciones y tener una plantilla base de foundation perdón de WordPress con nuestro propio framework que podemos usar en nuestro trabajo, nuestra agencia para hacer sitios y también para hacer pruebas entonces es algo que hemos vendido a todos aquí, no aprender y si estamos interesados en ello no nos queda otra cosa que esa y de esta manera pienso que es sencillo alternativas, alguien se estará preguntando y solo hay foundation cuando está pustra también y en esta web de MSET de Juan Román que creo que de Tenerife pues tiene un creo que tres artículos donde que le llama alternativa es a pustra pero luego hay un montón de framework ccs que podemos ir probando y que se pueden acoplar de lo que nosotros estamos haciendo hay unos muy interesantes que son muy ligeros se me acabo el tiempo no? hay unos que son muy ligeros que podemos usarlos para Wwpo a mejorar el rendimiento de una aplicación que a lo mejor estemos desarrollando y que necesite más características de desarrollo muy rápidas pero que sea ligero pues ahí hay muchas alternativas de hecho he descubierto alguno con el que estoy trabajando ahora que lo estoy probando que no es propiamente un framework ccs pero sí que une algunos aspectos para ir terminando la diapositiva dejo un poco los recursos que he usado en ella las direcciones de donde se pueden descargar el github donde pueden descargar las pruebas que hice para esta presentación que al final no he tocado nada en vivo por tiempo entonces la pueden descargar y ver si están interesados ver cómo está todo integrado y cómo está funcionando alguna información sobre Grilla Reflex que aquí debería añadirle la charla de Mauricio porque está muy completa y bueno para quien tampoco sepa cómo incluirse el ccs en WordPress entonces para que tengo un poco más de información nada mi nombre es Helmer en la red social no le pueden encontrar como el Nercol y nada solo dame la gracias un aplauso para Helmer a ustedes de la organización por elegir la ponencia espero que les haya gustado ha estado genial yo creo que no soy programador ni enseñador que lo oigo muy bien preguntas por favor preguntas para Helmer qué tiendas has explicado te has explicado tan bien que a nadie le queda ninguna duda ninguna duda si hay alguna duda aquí tenemos una duda yo normalmente trabajo con Bustrap no tengo muy claro por qué pero su día comencé a usarlo y ya yo tampoco tengo muy claro por qué trabajo con Bustrap es un poco de la pregunta si voy un poco más atrás perdona si te interrumpió creo que una vez que estaba trabajando cuando recién salió Bustrap dije esto no me vale porque no tenía soporte para interrumpir y yo necesitaba en ese momento un soporte para interrumpir y Bustrap me lo daba creo que por eso fue que elegí Bustrap y ya me fui por allí obviamente ya ninguno tiene soporte para interrumpir pero en ese momento no sé si fue hace 6 años o 7 yo necesitaba soporte para el progredo 8 hoy en día ya el uso del progredo 8 es muy bajo así que eso da igual pero creo que fue por eso en poco la pregunta va en el sentido de si recomendarías si has probado varios framework y tal por un lado con cuál te quedarías que obviamente ya intuyo con cuál pero si recomendarías si estás acostumbrado a usar uno te irías a trabajar con otro o a lo mejor por una ráfana concreto si, con uno que he hecho me he creado uno yo uno propio que solo lo uso con lo básico que necesito sobre todo para manejar el grid pero hay uno que se llama Tywin y es lo que hace es que como fundación que ya no da una clase específica para hacer esto Tywin nos da clases específicas solo por ejemplo de un color entonces nosotros podemos unir las clases y hacer una clase entera dependiendo de lo que necesitamos es como que es un framework con el que construye otro framework no sé si me explico muy bien entonces no lo he tocado mucho pero si me descantaría por uno o dos sería por ese vale más preguntas bueno por supuesto por el interrofón gracias