Esta semana os traigo un nuevo proyecto que vuelve a tener como protagonista a Fernando Rodrigo, esta vez junto a Laura Muñoz, su socia en este proyecto. Cocinar salud es una web para una comunidad de personas que quieran tener una relación especial con la comida y será el pilar fundamental de su nuevo proyecto conjunto.

Es una web basada en GeneratePress como casi todos mis proyectos últimamente, con un tema muy limpio y minimalista.

En este proyecto el contenido está centrado en el Blog y en un podcast, en el blog publican dos categorías de contenido, una consiste en recetas y en la otra categoría cuentan cómo se conocieron y cuál es su relación con la comida.

El podcast tiene una periodicidad semanal y lo hacen conjuntamente, un podcast que trata los temas con naturalidad y humor.

Hacen también alguna entrevista a profesionales que tienen relación con el mundo de la gastronomía, la nutrición y la psicología

El objetivo de este proyecto es poder ofrecer a su comunidad algo más que un mero recetario, la explicación del vínculo que hay entre la comida y la mente, mostrando que comprendiendo las razones es mucho más sencillo fijarse objetivos.

Ya os he hablado varias veces de Integromat para hacer las automatizaciones, en este caso, he creado un escenario que tienen 4 elementos:

El primer elemento es la aplicación que lee RSS, que está conectada con Anchor, a través de la URL del Feed y los credenciales necesarios para que esta aplicación pueda leer el feed y extraer los datos.

Después añado una conexión con Wordpress, introduciendo la URl del sitio de cocinar salud e introduciendo como credenciales el API KEy que me ha generado el plugin de integromat que he instalado en ese sitio wordpress

La acción a realizar en este caso cuando uso el NODO Wordpress en Integromat es Crear un post, esto me abre una ventana con una serie de campos a rellenar, como título del post, la descripción…

De qué tipo es el post que quiero crear, en este caso es tipo Podcast por que tengo instalado en el sitio web Seriously Simple Podcasting, un plugin que me crea este tipo de contenido y todo el metadata necesario para hacer un podcast en tu sitio web, aunque yo he preferido hacerlo en anchor, que es gratis mientras el podcast sea gratis.

Hay algún mentadata más que relleno como por ejemplo el autor, la categoría y lo más importante la URL del fichero de audio que contiene cada episodio

Después añado un nodo HTTP, al que le paso la URL de la imagen que tiene cada episodio como carátula y conectó este nodo HTTP a un nuevo nodo Wordpress en este caso, en vez de crear un post lo que le digo es que cree un nuevo Media, una nueva imagen, que va a coger de la URL de la imagen representativa del RSS del podcast.

Como estoy haciendo esto en el mismo escenario, Integromat me permite pasar datos de un nodo a otro, como por ejemplo el ID del Post que he creado con el primer nodo de Wordpress para que la imagen wordpress que acabo de crear se asocie como imagen destacada del post del tipo Podcast que va a crear este escenario.

Con esto cada vez que se ejecuta el escenario, mira a ver si hay algún episodio nuevo, si es así, crea un nuevo post tipo Podcast al que le agrega toda la información como título, descripción categoría autor, imagen destacada y fichero de audio.

Este escenario se ejecuta una vez a la semana poco después de que esté programada la publicación del episodio de Anchor.

Si os gusta la gastronomía y os interesa la salud, os recomiendo que echéis un ojo al sitio donde podéis encontrar y contactar a estos dos peculiares personajes que os harán pasar muy buenos ratos con su podcast.

Los campos personalizados son una función muy interesante  de WordPress que te permite añadir datos o información adicional a tus entradas y páginas de WordPress. Muchos plugins y temas de WordPress utilizan campos personalizados para almacenar datos importantes.

También puedes utilizar los campos personalizados para almacenar tus propios datos y luego utilizarlos en su sitio web.

En este episodio te hablaré de cómo utilizar los campos personalizados de WordPress y te daré algunos consejos y trucos

¿Qué son los campos personalizados de WordPress?

Los campos personalizados de WordPress son metadatos que se utilizan para añadir información adicional relacionada con una entrada o página que estás editando.

Por defecto, WordPress los guarda en dos áreas diferentes cuando escribes una nueva entrada, página o cualquier tipo de contenido.

La primera parte es el contenido en sí mismo de tus entradas.

La segunda parte es la información sobre ese contenido en particular.

Por ejemplo, el título, el autor, la fecha, la hora, etc.

Esta parte de información del post se llama metadatos.

WordPress añade automáticamente todos los metadatos necesarios a cada post o página que se crea.

También puedes crear y almacenar tus propios metadatos utilizando los campos personalizados.

Por defecto, la opción de campos personalizados está oculta en la pantalla de edición de la entrada.

Para verla, debes hacer clic en el menú de tres puntos situado en la esquina superior derecha de la pantalla y seleccionar "Opciones" en el menú.

Esto hará que aparezca una ventana emergente en la que deberás marcar la opción "Campos personalizados" en los Paneles avanzados.

Después de eso, haz clic en el botón 'habilitar y recargar' para recargar el editor de entradas.

Los campos personalizados se pueden utilizar para añadir cualquier información relacionada con la entrada, la página o cualquier tipo de contenido. Esta meta-información puede ser mostrada en tu tema.

Sin embargo, para hacer esto necesitarás editar los archivos del tema de WordPress.

Dicho esto, echemos un vistazo a cómo añadir y utilizar campos personalizados en WordPress.

En primer lugar, tienes que editar el post o la página donde quieres añadir el campo personalizado e ir a la caja de meta campos personalizados.

A continuación, debes proporcionar un nombre para tu campo personalizado y luego introducir su valor. Haz clic en el botón Añadir campo personalizado para guardarlo.

Puede editar este campo personalizado en cualquier momento y luego hacer clic en el botón de actualización para guardar los cambios. También puedes eliminarlo si lo necesitas.

Ahora puedes guardar tu entrada para almacenar la configuración de tu campo personalizado.

Después habría que editar el tema para que mostrase los campos personalizados.

Si tienes muchos campos personalizados y muchos usuarios escribiendo en tu web, lo mejor sería que hubiese una forma en que los usuarios

Esta tecnología permite que los navegadores carguen las vistas sin tener que volver a cargar todo.

Y también que se diseñen elementos como transiciones personalizadas entre partes de la aplicación.

Google explica que las single-page apps utilizan un patrón de arquitectura web, que se llama app shell model.

Donde las partes compartidas del Interface de usuario en el código, como menús, encabezados, pies de página y otros… se cargan cuando se carga inicialmente la app de una sola página.

Y las diferentes vistas se cargan de forma dinámica en este “cascarón”. Lo que reduce la cantidad de data que se tiene que enviar a la red.

Una SPA, por definición, es una aplicación que, para reducir los tiempos de carga e incrementar la experiencia de usuario, carga la aplicación en el navegador de los usuarios y realiza peticiones asíncronas a diferentes servicios para realizar la funcionalidad, obtener los contenidos, etc.

Es decir, el HTML de nuestra aplicación se genera en la parte cliente (navegador) usando intensivamente Javascript.

Por lo general, cuando Googlebot accede a una página, obtiene el html, localiza los enlaces que contiene, los visita y va indexando todos los recursos (textos, imágenes, documentos, etc) que va encontrando en todos ellos.

Si el bot accede a una SPA, no va a encontrar un HTML indexable, sino una “carcasa” vacía y, por tanto, el SEO de dicha aplicación va a verse perjudicado.

Además, nuestras aplicaciones actuales incluyen nuevas formas de mostrar la información que no son precisamente amigables para los bots de los buscadores.

Los “scrolls infinitos” que van cargando contenidos al usuario según va haciendo scroll vertical, el “lazy loading” de las imágenes o los contenidos de widgets de terceros (sobre todo de redes sociales) hacen que podamos perder SEO si no prestamos atención a su indexación.

Posible soluciones

Webflow es una herramienta NoCode para realizar páginas web de una forma muy visual, comparable con el Photoshop de las páginas web que tiene una paleta de componentes a la izquierda y una paleta de parámetros a la derecha cona los tamaños de pantalla arriba, es responsive y te permite definir y cambiar los valores de los parámetros para cada una de las pantallas.

Los componentes y los parametros estan muy bien organizados en estructuras desplegables

Elementos responsive como FlexBox o Gridbox

Webflow es realmente un CMS y no solo un maquetador de páginas

Podemos crear colecciones, que son un conjunto de campos que después se asocian a componentes visuales.

realmente lo que estamos creando en las colecciones, son colecciones de campos que nos permiten utilizar información variable (la que venga en cada campo) en elementos visuales que se repiten para mostrar colecciones, como por ejemplo colecciones de Post, categorías de producto.

Viene con plantillas de colecciones de campos, como puede ser Blog, Autores, Canciones, Recetas, Clientes, miembros de un equipo…

tiene implementando animaciones para determinadas acciones, por lo que las acciones de mouse over (pasar el ratón por encima de un botón o un elemento) se pueden anima

Podemos crear Symbols, que son componentes reutilizables para poder repetir a lo largo de varias páginas como puede ser la navegación, el footer y elementos que sea necesario tener repetidos.

Dispone de un árbol de objetos que hace muy sencillo seguir la estructura de la página de una forma jerárquica con ramas para mostrar objetos dentro de objetos

Dispone de biblioteca de medios para subir las imágenes que después vais a disponer en los elementos imagen de las páginas.

Seo

Metaetiquetas

Edición de etiquetas de imagens

Eschema

Control sobre la indexación de las páginas

Redireccionamiento 301

Exportación de código limpio y semántico. Para ello hay que usar buenos nombres de clases css

Precios

Starter - Free

Lite    24€ mes/mensual   - 16€  mes/anual

Pro 42€ mes/mensual  —35€ mes /anual

Hosting 16$ mensuales

Qué es HTML 5. El lenguaje que se utiliza en la World Wide Web, el ecosistema de páginas de Internet, es el HTML. Su nombre son las siglas de HyperText Markup Language, que significa literalmente Lenguaje de marcado de hipertexto. 

Es el estándar con el que están programadas todas las webs, y aunque algunas puedan tener elementos o fragmentos programados en otros lenguajes, siempre tienen que ser "encajados" en el total con este lenguaje.

Pero Internet evoluciona, y el contenido que se sube a las webs también cambia con los años, lo que quiere decir que estos lenguajes pueden quedar obsoletos y necesitan ser actualizados.

 En 1999 se lanzó el estándar HTML4, y como imaginas, las páginas web ahora no tienen nada que ver con lo que eran entonces en cuanto a sus contenidos, y por eso desde hace unos años se está implementando el nuevo estándar HTML5.

Por lo tanto, el HTML5 es la última versión del estándar HTML que se utiliza para crear las páginas web que estás visitando, e incorpora algunas novedades interesantes. 

Una de las novedades, es darle cobertura a la reproducción de contenido multimedia, de forma que ya no tengas que ir a recursos de terceros como el obsoleto Flash Player.

Qué cambia en HTML5

Este nuevo estándar no tiene una enorme cantidad de  novedades, pero las que tiene son revolucionarias. 

La más destacada es la posibilidad de añadir archivos multimedia a la web, como vídeos o audios, y que estos no tengas que instalarlos utilizando otros plug-ins. 

Todo está incluido dentro del código.

También se han añadido etiquetas que permiten crear animaciones en 2D, con una etiqueta de canvas y una API que permiten que puedas dibujar elementos en dos dimensiones y animarlos en la web. 

También se pueden añadir eventos para el teclado, ratón o mandos, que permiten poder utilizarlos para interactuar con una página.

Relacionado con lo anterior, también se pueden programar aplicaciones web en HTML5, lo que quiere decir que las páginas pueden ser apps, y no necesitarás instalar una app independiente en el PC o móvil, ya que podrás usarlo igual desde el navegador. 

También se pueden crear videojuegos con este método, lo que se complementa con poder utilizar teclado, ratón o mando.

También se han añadido opciones de geolocalización, de forma que una web puede detectar la ubicación de los usuarios que acceden a ella.

 Con ello, se pueden ofrecer opciones de idiomas dependiendo del país desde el que entras, o la posibilidad de enlazarse a la página específica de un país.

Por ejemplo, si entras en la web de una empresa internacional, puede enviarte a la versión de España de su web si detectas que entras desde aquí.

Toda esta funcionalidad hasta ahora se daba a través de Flash, de la compañía Macromedia que después fue comprado por Adobe. Flash en sí representaba un lenguaje de programación, llamado ActionScript y se evolucionó hasta poder hacer aplicaciones de escritorio en ese lenguaje.

Flash ha dejado de ser soportado y ha sido sustituido por HTML5 concretamente por Javascript, que a día de hoy también tiene la posibilidad de usar un entorno como Atom y hacer aplicaciones de escritorio que llevan por debajo el motor de chromium como navegador para ejecutar la aplicación.

Barkingtalk.com es una página web dedicada a las mascotas, en especial a los perros y en este episodio os hablo de las características particulares de esta web.

Conclusión

Con un poco de práctica se puede maquetar un diseños personalizado desde 0 usando un tema hijo vacío de generatePress o Astra de una forma sencilla

O incluso con el nuevo tema 2022 de WordPress y el edito de Gutenberg, podría hacerse también

Conversor de HTML a temas de WordPress: https://pinegrow.com/theme-converter-for-wordpress

En este episodio vamos a hablar de cómo funcionan los plugins o extensiones de wordpress. Un plugin de WordPress es un fragmento de código que se conecta a tu sitio web de WordPress. En pocas palabras, es una extensión a tu sitio que modifica y mejora las funciones principales de WordPress.

Ques e puede hacer con los plugins

Donde conseguir plurgins

Instalación

gratis o premium

Antes de instalar definir qué es lo que realmente quieres hacer con tu web

¿Afectan al rendimiento?

Plugins importantes o necesarios

Plugins de conexión con otras plataformas

Puedes programar tus propios plugins

El articulo de Javier Casares donde podéis ver los plugins para securizar vuestra web: https://www.wpsysadmin.com/blog/2022/02/27/plugins-basicos-seguridad-antispam/

Añade también este plugin, que me ha recomendado mi Amigo Jesús Yesares y que te cambia periódicamente las claves internas de WordPress, y es un puntito más de seguridad.

La mayor dificultad a la hora de hacer trabajos de desarrollo web o incluso asesoramiento o consultoría tecnológica es el entendimiento entre las partes. El lenguaje que permite al cliente expresar lo que quiere y que permite al implementador o diseñador en el caso de un sitio web comprender qué es lo que el cliente quiere.

Parece una tontería pero el uso no apropiado del lenguaje o el desconocimiento del lenguaje de la web, puede llevar a malentendidos o a alargar el tiempo y el trabajo necesario para llegar donde el cliente quiere estar.

Los problemas vienen derivados del mal uso de los términos en un entorno colonial, como referirnos a la página web cuando queremos realmente decir un Sitio Web o una Web.

Una Web es un conjunto de páginas html, por eso es conveniente hablar de Sitio Web o Web y no de paginas, por que a la hora de diseñar o hablar con el cliente vais a necesitar hablar de cada una de las páginas que componen la web

Las páginas se componen de secciones y dentro de estas secciones disponemos elementos.

Hay elementos comunes a todas las páginas, como la navegación, que comúnmente denominamos Menú, pero navegación primaria y secundaria sería más correcto, ya que si estamos haciendo un sitio web de restaurantes por ejemplo, podemos crear confusión entre el menú del sitio y el menú del restaurante cuando tengamos conversaciones sobre el sitio web.

Otro de los elementos comunes es La Cabecera o Header y el pie de página o Footer

En el caso de la cabecera de la página de inicio, que se conoce comúnmente como Inicio o Home y así es como aparece en la navegación principal.

La zona comprendida entre la navegación y la parte inferior de la página antes de que sean necesario desplazar la página, se llama Hero

El hecho de desplazarse verticalmente por la pagina, se conoce con el nombre de Scroll, que es el término inglés para el desplazamiento vertical

Por eso, la zona Hero, también se conoce como “Above the Scroll” o “Above the Fold” un término que viene de la prensa escrita, de los periódicos que se doblan para meter en los dispensadores o se apilan en los kioscos.

Después de esta zona Hero, irán apareciendo distintas secciones que podrán ser divididas a su vez en columnas en las que iremos poniendo bloques de contenido

Bloques de contenido como testimonios, tablas de precios, categorías de productos…

Recapitulando -> hemos visto que un sitio web se compone de páginas con secciones y elementos comunes como la navegación, compuesta a su vez de enlaces, enlaces que llevan a páginas o a secciones de páginas.

Se pueden definir etiquetas denominadas anclas en las secciones de un página para crear enlaces a esas anclas y que al pulsar la opción de la barra de navegación se haga scroll hasta esa parte de la página.

Enlaces que pueden llevar a páginas de Archivo, Archivo es la lista de elementos de contenido, como por ejemplo los artículos de un Blog, sería el Archivo de Post (que es como se conoce a los artículos de un blog).

El archivo de categorías es la lista de las distintas categorías de artículos o de productos o de otro tipo de contenido personalizado que quieras añadir a tu web.

Y básicamente eso es en lo que consiste un sitio web, Una serie de Páginas que empiezan en una Home o página de inicio, que tiene una navegación principal, que puede tener una navegación secundaria  o no.

Navegación que se convierte en el llamado menú de Hamburguesa cuando lo vemos en móvil. (Responsive)

Que tiene una zona Hero en la página principal y cabeceras y pies de página en el resto de páginas

Las páginas tienen dentro secciones y las secciones tienen dentro columnas y dentro de las columnas bloques.

Hay páginas especiales como las páginas de Archivo.

La tienda

El checkout

Qué es HTML 5. El lenguaje que se utiliza en la World Wide Web, el ecosistema de páginas de Internet, es el HTML. Su nombre son las siglas de HyperText Markup Language, que significa literalmente Lenguaje de marcado de hipertexto. Es el estándar con el que están programadas todas las webs, y aunque algunas puedan tener elementos o fragmentos programados en otros lenguajes, siempre tienen que ser "encajados" en el total con este lenguaje.

Pero Internet evoluciona, y el contenido que se sube a las webs también cambia con los años, lo que quiere decir que estos lenguajes pueden quedar obsoletos y necesitan ser actualizados.

En 1999 se lanzó el estándar HTML4, y como imaginas, las páginas web ahora no tienen nada que ver con lo que eran entonces en cuanto a sus contenidos, y por eso desde hace unos años se está implementando el nuevo estándar HTML5.

Por lo tanto, el HTML5 es la última versión del estándar HTML que se utiliza para crear las páginas web que estás visitando, e incorpora algunas novedades interesantes.

Una de las novedades, es darle cobertura a la reproducción de contenido multimedia, de forma que ya no tengas que ir a recursos de terceros como el obsoleto Flash Player.

Qué cambia en HTML5

Este nuevo estándar no tiene una enorme cantidad de  novedades, pero las que tiene son revolucionarias.

La más destacada es la posibilidad de añadir archivos multimedia a la web, como vídeos o audios, y que estos no tengas que instalarlos utilizando otros plug-ins.

Todo está incluido dentro del código.

También se han añadido etiquetas que permiten crear animaciones en 2D, con una etiqueta de canvas y una API que permiten que puedas dibujar elementos en dos dimensiones y animarlos en la web.

También se pueden añadir eventos para el teclado, ratón o mandos, que permiten poder utilizarlos para interactuar con una página.

Relacionado con lo anterior, también se pueden programar aplicaciones web en HTML5, lo que quiere decir que las páginas pueden ser apps, y no necesitarás instalar una app independiente en el PC o móvil, ya que podrás usarlo igual desde el navegador.

También se pueden crear videojuegos con este método, lo que se complementa con poder utilizar teclado, ratón o mando.

También se han añadido opciones de geolocalización, de forma que una web puede detectar la ubicación de los usuarios que acceden a ella.

Con ello, se pueden ofrecer opciones de idiomas dependiendo del país desde el que entras, o la posibilidad de enlazarse a la página específica de un país.

Por ejemplo, si entras en la web de una empresa internacional, puede enviarte a la versión de España de su web si detectas que entras desde aquí.

Toda esta funcionalidad hasta ahora se daba a través de Flash, de la compañía Macromedia que después fue comprado por Adobe. Flash en sí representaba un lenguaje de programación, llamado ActionScript y se evolucionó hasta poder hacer aplicaciones de escritorio en ese lenguaje.

Flash ha dejado de ser soportado y ha sido sustituido por HTML5 concretamente por Javascript, que a día de hoy también tiene la posibilidad de usar un entorno como Atom y hacer aplicaciones de escritorio que llevan por debajo el motor de chromium como navegador para ejecutar la aplicación.

Integromat es una potente plataforma de integración que te permite visualizar, diseñar y automatizar tu trabajo en minutos. Concéntrate en los fundamentos de tu negocio y deja que la automatización se encargue del resto.

Automatiza flujos de trabajo integrando unas aplicaciones con otras.

La gran ventaja de Integromat es que permite hacer todo esto de forma sencilla y sin necesidad de saber programar. Cuenta con integración con cientos de aplicaciones y servicios. Recoge y permite trabajar con las principales acciones que se llevan a cabo en estos programas.

Lo que hacemos para crear estas integraciones es unir las acciones típicas de cada aplicación pasando datos de una aplicación a otra a través del control de sus API’s.

Todo esto se hace a través de un editor visual muy sencillo que representa las aplicaciones como Bolas con el icono de la aplicación y líneas que conectan el flujo de trabajo entre una aplicación y otra.

Podemos por ejemplo hacer la automatización del envío automático de correos electrónicos personalizados a partir de los datos que se encuentran en una hoja de cálculo de Google. Estos correos se envían de forma automática cuando una nueva fila se añade en la hoja de cálculo.

No se trata solo de arrastrar y conectar bolitas, hay que configurar cada una de estas bolas con los datos de conexión a la aplicación.

en el ejemplo anterior ya que definir:

Realmente esto supone muchísimo ahorro de tiempo y te empodera en cuanto a conocimiento sin tener que programar nada

Estas automatizaciones se organizan en lo que Integromat llama escenarios.

No es la solución a todo, no automatiza todo ni merece la pena automatizar todo.

Hay que supervisar las tareas de forma periódica o configurar las notificaciones que te reportará cualquier tipo de error.

Precios

Gratis.

Básico 9$/mes

Standard 29$/Mes

Podeis encontrar el servicio en este enlace:  https://www.integromat.com/