Eliminar el engaño de IndieWeb en el sitio de WordPress trucos CSS

Sí, IndieWeb es confuso.

De hecho, David había ayudado a alguien a configurar su sitio de WordPress con las capacidades de IndieWeb. Este hombre también estaba luchando por entender cómo encajaban las diferentes partes. Así que David ya tenía esto en mente cuando Miriam y yo escribimos.

"IndieWeb" es un término nuevo para muchas personas y aquí hay mucha confusión. ¿Es esto un marco? ¿Filosofía? ¿Un conjunto de normas? Dependiendo de quién sea, las expectativas cambian tanto como tú pareces ser parte de ellas.

Eso es un poco todo lo anterior. Y esto hay que reforzarlo un poco. No hay nada fundamentalmente confuso sobre IndieWeb en sí mismo una vez que lo miras a través de estos diferentes lentes. Después de leer la publicación de David, me doy cuenta de que IndieWeb es más un conjunto de protocolos. Similar a trabajar con datos estructurados u OpenGraph en marcado. No hay nada que instalar por sí mismos, pero hay estándares sobre cómo integrarlos en su trabajo.

Tu identidad potencia IndieWeb. En otras palabras, su sitio lo identifica y puede usarse para hacer muchas cosas, como:

• Notificar a otros sitios compatibles con IndieWeb cuando se mencionen
• Recibe notificaciones de otros sitios de IndieWeb cuando te mencionen
• Extraiga información de referencia y formato de visualización
• Verifique su identidad con su propio sitio web (botón de inicio de sesión de Google pero vinculado a su sitio)
•  Entre otras cosas.

Si eso suena como pingbacks, bien y bien, pero mucho más fuerte y más mantenido.

Es diferente (y quizás más fácil) implementar funciones de IndieWeb en WordPress que en un sitio estático.

La gran diferencia es que WordPress proporciona muchos de los requisitos necesarios para hacer cosas desde IndieWeb. Me gusta como lo explica David:

Implementar IndieWeb en WordPress es una [series] de bloques de construcción que puede elegir usar o no, lo que lo hace excelente, pero a veces confuso. WordPress tiene una filosofía de soluciones, no de opciones. Pero IndieWeb tiene que ver con las opciones... para crear funciones que sean adecuadas para usted.

Estos componentes básicos son complementos que instala para agregar protocolos y tecnologías de IndieWeb a WordPress. Es genial que sean fácilmente accesibles porque requiere mucho trabajo. Sin embargo, al ejecutar un sitio estático, usted está obligado a establecer la mayor parte usted mismo.

La publicación de David está 100% enfocada en implementar WordPress. Su millaje puede variar, pero seguramente obtendrá una mejor idea de qué protocolos están disponibles y cómo combinarlos después de leer su publicación, y con suerte esta también.

El plugin IndieWeb WordPress te identifica.

Pensé que hizo tantas cosas detrás de escena, pero es mucho más simple que eso:

El complemento maneja la autoidentificación de la forma en que IndieWeb lo ve. Ofrece una plantilla de tarjeta h y un widget. H-Card es un marcador para marcar información sobre una persona o lugar. Así que este es un artículo que muchas personas eligen poner en su sitio de todos modos.

Entonces, es realmente posible obtener lo mismo al etiquetar correctamente un tema de WordPress. La conveniencia aquí es que obtiene una pequeña plantilla útil que está marcada para admitir h-card formato abierto y un widget para colocarlo en el área del tema del gadget.

Aquí hay un ejemplo súper detallado de h-card marcado extraído de documentación para microformatos2:

<div class="h-card">
  <img class="u-photo" alt="photo of Mitchell"
       src="https://webfwd.org/content/about-experts/300.mitchellbaker/mentor_mbaker.jpg"/>
  <a class="p-name u-url"
     href="http://blog.lizardwrangler.com/" 
    >Mitchell Baker</a>
 (<a class="u-url" 
     href="https://twitter.com/MitchellBaker"
    >@MitchellBaker</a>)
  <span class="p-org">Mozilla Foundation</span>
  <p class="p-note">
    Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities.
  </p>
  <span class="p-category">Strategy</span>
  <span class="p-category">Leadership</span>
</div>

¿Ves estos nombres de clase? Clases como .h-card, u-photo, p-nameetc. todos proporcionan un significado contextual a la identidad de una persona, que luego analizan como JSON:

{
  "items": [{ 
    "type": ["h-card"],
    "properties": {
      "photo": ["https://webfwd.org/content/about-experts/300.mitchellbaker/mentor_mbaker.jpg"],
      "name": ["Mitchell Baker"],
      "url": [
        "http://blog.lizardwrangler.com/",
        "https://twitter.com/MitchellBaker"
      ],
      "org": ["Mozilla Foundation"],
      "note": ["Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities."],
      "category": [
        "Strategy",
        "Leadership"
      ]
    }
  }]
}

El complemento no realiza el envío, la recepción ni el análisis. En cambio, proporciona un sitio de WordPress con una forma de verificar su identidad en el etiquetado.

No todos los temas de WordPress admiten microformats

Si te rascaste la cabeza la primera vez que viste Microformats, como hice yo, David lo define bien:

[…] Microformatos... una forma de marcar HTML que permite identificar elementos. Esta es una de varias formas de hacerlo, pero es muy simple y legible, por lo que es popular en la comunidad IndieWeb.

El problema, como continúa David, es que muchos temas no están marcados de forma compatible con microformats, que es lo que Complemento de microformatos2 Sin embargo, David se apresura a gritar que el complemento es extremadamente limitado en la forma en que logra esto, y recomienda marcar el tema a mano en su lugar.

Según David, es probable que la próxima versión principal del complemento Webmention incluya formas más inteligentes de encontrar contenido e imágenes que pueda usar y formatearlos para admitir Microformats2.

Las menciones web envían y reciben notificaciones.

De acuerdo, entonces, si se identificó a través de su sitio para ser reconocible y su sitio está marcado para h-card soporte usando Microformatos2. ¡Excelente! Aún necesita algo en el medio, trabajando como un operador que envía y recibe notificaciones. En otras palabras, cuando otro sitio te menciona, llamado Webmention, el sitio que te menciona necesita una forma de seguir enviándote esa mención, y tu sitio necesita una forma de aceptarla (o viceversa).

Esto es lo que Complemento de mención web es para. Esta es probablemente la fuente de la mayor parte de mi confusión en IndieWeb. Pensé que estaba formateando datos y necesitaba un servicio adicional para enviar y recibir. ¡No! De hecho, envía y recibe los datos en lugar de crear la mención. Volviendo a David:

Cuando se creó, el complemento solo se ocupaba de recibir y enviar menciones web, pero no procesaba la visualización en ninguna medida. Semantic Linkbacks, un complemento separado, manejó esto no solo para menciones web, sino también para protocolos de pingback y trackback más antiguos.

Entonces, el complemento Webmention transmite notificaciones. Mientras tanto, otro complemento llamado Semantic Linkbacks es el que procesa los datos. ¿Y qué diablos son los Linkbacks Semánticos?

Los enlaces semánticos extraen y procesan datos.

Conexiones semánticas es otro complemento que maneja otra parte del proceso. No hay manera de que pueda explicarlo mejor de lo que ya lo hace David:

Semantic Linkbacks toma la mención web, que es una notificación de que otro sitio se ha vinculado a algo en su sitio, recupera el otro sitio e intenta mostrar la información. La forma en que se hace esto puede variar desde solo una imagen de perfil (si puedo encontrar una) hasta interpretarla como un comentario completo.

Lo hace con la ayuda de microformatos.

Esperaba que el complemento principal de IndieWeb ya hiciera esto, ya que maneja otras etiquetas. Pero solo proporciona la plantilla y el gadget para obtener su identidad en su sitio. Después de que el complemento Semantic Linkbacks recupera una mención web entrante, recoge los datos, los formatea y luego intenta mostrarlos.

Parece que el complemento se fusionará con (o será reemplazado por) una próxima versión del complemento Webmention:

Dado que muchas personas son reacias o se sienten incómodas a la hora de cambiar de tema, la nueva versión de Webmentions incluirá varias formas alternativas diferentes de tratar de encontrar una imagen o un resumen para mostrar... desde OpenGraph (que Facebook y Twitter usan para mostrar las URL proporcionadas) hasta encuentre la versión de la API REST de WordPress en una página y utilícela para obtener el nombre del autor y la imagen de perfil. Ninguno de ellos proporcionará tanto contexto como los microformatos, pero la experiencia seguirá siendo algo que valga la pena instalar.

Esto es ciertamente bueno, ya que se conecta a la API REST de WordPress para la respuesta JSON y la formatea para su visualización.

Brid.gy es un servicio que ayuda a mostrar interacciones.

Mencionar la web puede ser una interacción, digamos que a alguien le gusta tu publicación de Twitter o la retuitea.

Distinguir los Me gusta de volver a publicar de comentar todo lo que debe suceder, y deberá implementar la API de Twitter (o lo que sea) para dibujar esas distinciones.

¡Esto es algo que ciertamente puedes hacer! Pero si prefiere jugar y jugar, un miembro de la comunidad IndieWeb ha creado un servicio llamado Brid.gy. Creas una cuenta, conectas tu sitio y das permisos a la aplicación de servicio... ¡y listo!

Lo que ha hecho Brid.gy es esencialmente implementar API para Twitter, Facebook, Instagram y otros, de modo que cuando encuentra una publicación en estos servicios que interactúa con su publicación sindicada, Webmention se envía a su sitio y pasa por el proceso de publicación. en su propio sitio.

¡Hay mucho más!

Golpes rápidos:

• IndieAuth: Este es un protocolo basado en OAuth 2. el complemento establece un punto final en la API REST de WordPress que se puede usar para verificar su identidad a través de su propio sitio alojado, esencialmente su propio inicio de sesión de Google, pero sin configurar ese punto final usted mismo o tener que depender de una API alojada por separado.
• Micropub: Para aquellos que usan WordPress pero prefieren un editor diferente, pueden instalar Complemento de micropub. Este agrega un punto final que le permite publicar contenido en su sitio y, con la ayuda de un editor compatible con Micropub, crear elementos en un feed de Microformats2, lo que le brinda muchas más opciones para escribir contenido fuera del editor de bloques de WordPress.
• Ubicación sencilla: David escribió este complemento y yo estaba súper impresionado cuando me lo mostró. La idea es recuperar datos de su ubicación actual que se pueden usar para cualquier cosa, desde mostrar la hora en que escribió una publicación hasta crear un archivo completo de publicaciones de mapas incrustadas según la ubicación de la publicación. Honestamente, me gustaría ver algo similar horneado directamente en WordPress.

La corriente actualizada

Traté de hacer una ilustración que describa las diferentes partes de mi última publicación, pero intentemos nuevamente con una comprensión actualizada de lo que está sucediendo:

¿Todo esto tiene sentido?

Felicitaciones a David por darse la vuelta y tomarse el tiempo para mostrarme cómo es la implementación de IndieWeb en WordPress. No puedo decir que entiendo completamente todos los matices, pero al menos siento que tengo una comprensión decente de las partes (filosofía, protocolos y tecnología) que se necesitan para que esto suceda.

¡Me gustaría entregártelo a ti! ¿Te ayuda esto a aclararte las cosas? ¿Hay algo que te cuesta entender? ¿Crees que puedes configurar un sitio de WordPress con características de IndieWeb ahora? ¡Vamos a llevarlo a los comentarios!