Las nuevas variables de CSS, las Custom Properties

Tenemos un tema en wordpress atractivo y con muchas prestaciones, pero ¿qué pasa si necesito poner el color de mi marca? ¡El menú ya podría ser un poco menos hortera! ¿Cómo hago para que esa ventana no quede centrada? ¿Por qué ese texto no empieza junto con la foto? Estas y muchas preguntas empezarán a tener respuesta en la 6ª MeetUp de WordPress Compostela.

Iván Barcia, diseñador y desarrollador web nos hablará de las nuevas variables nativas en CSS, las Custom Properties. Nos explicará su origen, sintaxis, limitaciones y el soporte de los navegadores. Con múltiples ejemplos y demostraciones.

De una manera sencilla veremos de qué modo a la estructura del html de nuestro sitio se le añaden las instrucciones que determinan su diseño. Selectores, propiedades y valores, corchetes… colores, tamaños y posiciones… toda una paleta con la que hacer de cada sitio un lugar diferenciado y que responde a las necesidades de comunicación.

Aprender este básico es de rigor, porque aunque se pueda llegar a hacer complejo, todo camino comienza con tener las bases claras. Para ello invitamos a nuestra sexta meetUp:

@WPCompostela | Custom Properties, las variables de CSS

¡Antes del verano!

Al final, como en cada edición de @wpcompostela, nuestros patrocinadores Dinahosting, auspician un networking. El lugar acostumbrado para las cinco primeras meetUps fue  DoutroXeito Coworking, pero en esta ocasión, aprovechando el ambiente veraniego la hacemos en modo más relajado y de verano. El café O Zuleiro, muy cerca del local de Dinahosting  en Santiago de Compostela, recibirá el encuentro,  (Rúa das Salvadas, 49 el jueves 19 de julio; a las 19h).

Será una excusa para reunirnos los miembros de las diferentes meetUps de Galicia y compartir experiencias de los distintos encuentros que se llevaron a cabo durante el curso.

Iván Barcia: “no avanzamos sin hacer destrozos al código”

En una charla informal EnMateria, como coorganizadores del evento, conversamos con Iván Barcia quien nos aporta sus respuestas a unas pocas preguntas básicas para entrar…en materia.

-En una plantilla wordpress, ¿hasta dónde es posible llegar con los cambios de estilo?

-Con los estilos CSS podemos cambiar totalmente cómo se ve nuestro tema de WP o nuestra web. Hoy en día nos ofrece una potencia y versatilidad enormes, que si le sumamos el buen soporte que tienen los navegadores más importantes, tenemos en el CSS una herramienta muchísimo más potente que hace unos años. Hoy podemos hacer de forma nativa con CSS muchas cosas que hasta hace nada necesitaban programación con JavaScript.

-¿Qué relación hay entre hojas de estilo y el tema hijo?

-Cuando creamos un tema hijo en WordPress debemos indicarlo en la hoja de estilo ‘style.css’. No es imprescindible que tenga ningún otro archivo PHP ni nada, el CSS es el único imprescindible. Por otra parte, cuando creamos un tema hijo suele ser porque queremos hacer algunos cambios visuales en el tema padre, y todo eso lo haremos con CSS. A veces también necesitamos realizar pequeños cambios de PHP, pero si no son cambios muy grandes es común que nos sea suficiente con añadir algún código en el archivo ‘functions.php’, así que, como dije, cuando creamos un tema hijo es probable que con escribir CSS nos sea más que suficiente para todos los cambios visuales que queremos hacer.

-¿Qué tipos de destrozos podemos cometer  tocando los estilos de un tema wordpress?

-Pues la verdad es que bastantes si lo hacemos a lo loco. En el HTML solo tenemos el contenido. Todo el aspecto visual lo establecemos con CSS: Cómo y dónde se vé cada elemento, el tamaño de los textos, que la web sea responsive, etc. Eso sí, los destrozos pueden ser muy visuales, pero no suelen ser demasiado graves. De todas formas, no hay mejor forma de aprender bien CSS que leyendo y tocando (y destrozando) código.

MeetUp @WPCompostela | Custom Properties, las variables de CSS

Rúa das Salvadas, 49;  19 de julio, a las 19h

No soy capaz de dejar el diseño en segundo plano

yo_E

 

“Se puede hacer más complicada o menos complicada, más sencilla, la web; pero es cierto que la realidad real y la virtual ya no van paralelas. Yo tengo amigos en las redes sociales que me gustaría conocer en persona en algún momento, “en vivo y en directo”, son parte de mi realidad- Pero es importante la presencia virtual, sobretodo si tienes un negocio. Es imprescindible, si tienes un negocio o una empresa tu presencia en la web”, es Emma Marqués Solla, diseñadora web de Enmateria y quien está detrás de ese mundo de ventanas que se despliegan, botones que parecen hacer magia y parejas que saltan desde la felicidad de un tiempo en blanco y negro.

tonisalgado
www.tonisalgado.com

La sencillez manda.
“Es importante que el usuario no se pierda, saber qué servicios ofrece la web, que sepa a donde ir, ¿qué me estás vendiendo?, ¿qué me puedes ofrecer?, yo te puedo ofrecer la consultoría tal, “ah vale yo quería esto, ok”. Que te expliquen exactamente en 4 frases que te están ofreciendo, ¡exactamente!, que no tenga que dar 20 mil vueltas por la web para saber que venden, que cuando yo meta en Google quiero un pisapapeles y salte tu página y diga: “vendo pisapapeles”.

(Habla rápido, sin parar con las palabras como metralletas)

Pero a veces las web tienen que ofrecer gamas de productos, y es inevitable que sean complejas, preguntamos.
– Evidentemente, depende del producto que vendas, si vendes una revista de artículos, o de novela negra, o de cine, el diseño te invita a conocer lo que hay dentro: el contenido. Hay que hacerlo atractivo para que la gente “se enganche”. Si yo quiero vender flexos debería poner fotografías exactas de cada tipo de flexos para que el usuario diga: “pues no sabía que existía ese tipo de flexos”. Nuestro trabajo es que luzca fácil.

Herramientas que se hacen propias
enMateria ha iniciado desde hace poco un camino, el de compartir con diseñadores webs un proceso de profundización en la herramienta del wordpress, a través de la MeetUp de Wordpres Compostela @WPCompostela

 ¿Qué representa para ti el wordpress como herramienta?
– Es un CMS que utiliza un software libre desarrollado de forma colaborativa, un desarrollador puede aportar a la plataforma. Facilita a mucha otra gente,  poder hacer una web en condiciones. También puedes crear temas, hacer un tema hijo de una plantilla que te permite un trabajo más personalizado, eso te da la posibilidad de cambiar una plantilla por completo y de proteger el diseño de tu página, porque una mañana podrías amanecer con una buena sorpresa si un cambio en el tema te lo trastorna todo.

yoredacto
yoteloredacto.com

 ¿Por qué ese estilo personal que tienes tu de incorporar referencias culturales en tus diseños?
– Simplemente es un rollo de personalizar, de hacelo tuyo, “la marca de la casa” de hacerlo un poco distinto que no sea todo igual, de que no sea la misma foto que siempre ve todo el mundo, evitar que sea tan reconocible. Se trata de darle algo que atrape,  son horas de trabajo pero tienes que buscar la foto y el mensaje que encajen, buscar tipos de letras diferentes y adecuadas…  algo que transmita y que no sea siempre lo mismo.
En su conocimiento de la materia, Emma además, más allá de ceñirse a diseños preestablecidos,  controla el lenguaje html, las hojas de estilo, el retoque fotográfico y la tipografía entre otras muchas destrezas.

Cuando piensas en webs  ¿piensas en?
– Cuando tienes algo que buscar, tanto servicios como compras, recurres invariablemente a internet. Las webs deben tener interfaces usables, con formas directas de llegar a la información, donde puedas acceder rápidamente a satisfacer tu necesidad. Eso sí, hay webs que son “feas” y venden, a mí me gusta que “el escaparate” sea precioso. Para mí (pero es una opinión personal) es tan importante el contenido como el diseño, no soy capaz de dejar el diseño en segundo plano.