Dos nuevos prototipos de la REST API de WordPress aplicados al wp-admin

El equipo que trabaja en el núcleo de WordPress ha publicado este post en el que nos cuenta algunas de las aplicaciones prácticas que va a tener la REST API en nuestro querido wp-admin. Dice Ryan McCue.

 Aunque es posible desde el punto de vista técnico convertir las llamadas admin-ajax en llamadas de la REST API esta refactorización no tendría ningún beneficio directo para el usuario. Por eso hemos preferido concentrarnos en mejorar la experiencia de usuario con dos nuevos prototipos: Nuevas Tablas de Listados y Ajustes Instantáneos.

Por lo que he podido ver ambos prototipos están orientados a reducir el número de recargas de página cuando hacemos pequeños ajustes.

Nuevas Tablas de Listados

Las «Nuevas Tablas de Listados (New List Tables o NLT) es un prototipo basado en React para mejorar la gestión de contenidos en general y de listados en particular.

Por lo que se ve en la demo permitiría hacer ajustes en los listados (tanto en las vistas como en los contenidos) si necesidad de recargar.

 

Ajustes instantáneos

En el gif de ejemplo se ve cómo cambian los ajustes generales pero puede aplicarse a cualquier página  de ajustes o a los ajustes de un plugin.

 

Para usarlo en plugins:

add_action( 'rest_api_init', __NAMESPACE__ . '\\register_settings' );

function register_settings() {
	register_setting( 'optiongroup', 'my_custom_setting', array(
		'type'         => 'boolean',
		'show_in_rest' => true,
	));
}

Mi primer ticket en el núcleo de WordPress

«New Text Widget recognizes HTML but does not render it in the front end»

Resulta que el nuevo widget de texto «enriquecido» hace una cosa muy rara si le pegas código HTML en la pestaña de visual. Aparentemente te lo reconoce correctamente pero luego en el front end no lo renderiza sino que muestra el código HTML tal cual.

Es una tontería como un piano, pero me hace ilusión haberlo encontrado yo, porque es la primera vez que mando un bug report al núcleo de WordPress.

If you paste HTML code into the visual tab on the new text widget and press «save» it will automatically recognize it and render it properly inside the widget (including any inline CSS styles). The error comes when you go to the front end, where it will show the original HTML code instead of interpreting it.

Charla Meetup: Cómo administrar 100 instalaciones de WordPress y no morir en el intento

Disclaimer

  • Cuento mi experiencia: yo también he venido a aprender.
  • No he tenido mucho tiempo para prepararlo, la idea surgió el jueves pasado.
  • No tengo un perfil técnico, se admiten sugerencias y correcciones.

¡Qué felices éramos con las páginas estáticas!

Usar un CMS supone un precio alto.  ¿Qué «cuidados» necesita una instalación?

Actualización

  • Actualizar núcleo (menores, mayores, automáticas)
  • Actualizar plugins (y ojo con los plugins «abandonados» y eliminados del repo)
  • Resto de software a nivel de servidor (versión de PHP, etc)

Monitorización

  • Monitorizar uptime
  • Monitorizar modificación de archivos
  • Monitorizar logins
  • Velocidad y rendimiento (WPO)
  • Evolución posicionamiento SEO
  • Optimizar base de datos

Gestión

  • Añadir / Editar / Modificar contenidos
  • Añadir / Editar / Modificar usuarios
  • Moderar comentarios
  • Dar soporte a los editores

¿Cómo explicamos a los clientes esta necesidad?

Una web es un SERVICIO, no un PRODUCTO. Nunca está acabada, nunca deja de dar trabajo. Para nosotros nuestras webs somo como un hijo, nos cuesta mucho desentendernos de ella pero no podemos dar soporte indefinido gratis a todas.

Opciones:

  • Multisite > Todos los huevos en una sola cesta, plugins no compatibles
  • No ofrecerlo y vivir sólo de desarrollos > NO (al final toca ayudarles igual)
  • Intentar ofrecerlo dentro de un pack con el hosting > NO (titularidad , gestión emails)
  • Esperar a que tengan un problema y ofrecerlo entonces > NO (imagen, mayor costo)
  • Especificarlo como opción SIEMPRE al dar un presupuesto. Ofrecerlo gratis dos/tres meses con todos los proyectos y luego empezar a cobrarlo

¿Qué herramientas estábamos usando para no volvernos locos?

  • WordFence (Files, logins, actualizaciones)
  • UpdraftPlus (updates, external storage)
  • Uptime Robot

La verdad es que nos volvíamos locos igual.

Tiene que haber alguna opción centralizada

Comparativa detallada aquí

Más info en el podcast de Fernan.

Mi experiencia con ManageWP

3 meses de uso. 70+ webs. Pagando  opción de backups diarios en 6 webs.

Opciones gratis

  • 1 Backup mensual durante 90 días. Backups incrementales. Se puede elegir dónde US/EU.
  • Restauración automática de backups (aunque no de descarga)
  • Acceso directo a wp-admin
  • Actualización de plugins y temas
  • Instalación de plugins y Code Snippets
  • Gestión de usuarios / comentarios
  • Optimización base de datos
  • Análisis de seguridad y WPO (manual)
  • Modo mantenimiento

Opciones de pago

  • Backups diarios (2$/mes), cada 12h o en tiempo real. Se almacenan durante 90 días.
  • Migraciones (incluido en plan de backups de pago)
  • Análisis automático de seguridad, WPO y SEO (1$/mes cada uno)
  • Monitorizado de uptime (1$/mes)
  • Generación de informes automáticos  personalizables como este (1$/mes)
  • White-label del plugin «worker» (1$/mes)

Listado completo de características y documentación.

en WordPress.tv: https://wordpress.tv/2017/06/14/alvaro-gomez-como-administrar-100-instalaciones-de-wordpress-y-no-morir-en-el-intent

Gracias a Mauricio Gelves por grabar, editar y subir el video!

WooCommerce, formas de pago online y Bitcoin – Máster Anual de Dirección y Gestión de Comunicación, Marketing y Publicidad – IED

WooCommerce

  • Cuota de mercado, extensiones, adquisición por Automattic
  • Ajustes globales
  • Formas de pago
  • Gastos de envío
  • Cálculo y gestión de impuestos
  • Gestión de stock y notificaciones
  • Vales (Vouchers): Porcetaje, absoluto, caducidad, número de usos…
  • Productos: Funciona como post. Categorías
  • Atributos y Variaciones
  • Pedidos, status.
  • Novedades, cambios a WC3.1 (interface, taxonomías ocultas para rendimiento, capa para CRUD)
  • Plataformas de pago oficiales
  • Modo catálogo. Otros plugins aquí y aquí.
  • Personalización de plantillas mediante Hooks. (single, archive)

Formas de Pago

  • Analógicas: transferencia, contrareembolso (aún vigor según nicho)
  • Externo: Tarjeta de crédito (Operador TPV virtual, RedSys). PayPal.
  • Integrado: Paypal Express, Stripe.

Pros y Contras. Requisitos

  • PCI compliance
  • Cálculo: Porcentaje + cantidad fija por transacción.
  • ¿Costes fijos? Abaratamiento TPVs virtuales
  • Necesidad de SSL si es integrado
  • Los datos de pago los almacena la plataforma de pago, nunca nosotros.
  • Para pagos recurrentes se crea un token.

Comparativa (fuente)

Bitcoin

Planteado Satoshi Nakamoto en 2008 como alternativa a la banca tradicional. Implicaciones teóricas

  • Divisa criptográfica descentralizada.
  • Sin autoridad central, no se basa en la confianza.
  • No depende de ningún estado
  • No está sujeta a impuestos ni a decisiones políticas.

Blockchain: Cómo funciona

  • Todos los usuarios conocen todos los saldos y todas las operaciones (P2P)
  • Nuestro saldo viene derivado de la constancia de que operaciones previas
  • Wallet (Contraseña) > Algoritmo que asocia nuestro «usuario» un saldo.
  • El Wallet tiene una parte pública y una parte secreta.
  • Trap Door Algorithm > Se puede comprobar pero es imposible de revertir si no se conoce el secreto.

Blockchain: Actualización y Mining

  • El orden en que se «aprueban» las operaciones es vital
  • No se puede confiar en un timestamp: Hay que pasar una prueba para calcular el tiempo que lleva esperando.
  • Las operaciones pendientes espera en un pool, cuando se resuelve se añade al blockchain
  • Facilitar el tráfico resolviendo es premiado con la creación de Bitcoins. A largo plazo ya no se premiará y los procesadores de bloques cobrarán una comisión.

How Bitcoin Works (introduction)

Detalles técnicos

Trapdoor Function

Elliptic Curve Cryptography Overview

Herramientas Web – Máster Anual de Dirección y Gestión de Comunicación, Marketing y Publicidad – IED

Dominios y alojamientos. Opensource.

Dominios

  • Distinción entre hosting y dominio
  • Criterios para escoger un dominio: Corto, memorable, específico. (ver este videoejemplos aquí y aquí, y esta herramienta).
  • Distintos lista de TLD, domain hacks, uso de subdominios.
  • Configuración de DNS.
  • Configuración de registros y subdominios.
  • Configuración de emails.
  • Redirecciones si se hace un cambio de dominio.

Hosting

  • Criterios para escoger un proveedor de hosting (seguridad, velocidad, tecnologías, copias de seguridad, staging, control de versiones, soporte técnico, «extras»: CDNs, SSL)
  • Criterios para escoger un plan de hosting: compartido, virtual o dedicado (ancho de banda, concurrencia, escalabilidad, espacio en disco, ubicación)

Opensource

  • Tipos de licencias de Software: Propietario VS GPL
  • Origen del GPL (la impresora de Stallman) y 4 libertades
  • Herencia (viralidad) de la licencia GPL
  • Ventajas técnicas (Transparencia, seguridad, comunidad, disponibilidad de desarolladores)
  • Consideraciones éticas (libertad, propiedad de contenidos, neutralidad de la web)

Backend VS Frontend

  • Qué sucede en nuestro navegador, qué sucede en el servidor.
  • Consideraciones de optimización, escalado y velocidad en cada lado.
  • Consideraciones de seguridad (XSS, LFI, SQL inyection) y validación de datos.

Planificación y lanzamiento de un proyecto:

  • Escoger la tecnología y la plataforma adecuada. Elegir un hosting en consonancia.
  • Análisis previa del nicho de mercado y la competición (Google Trends)
  • Análisis de datos previos de tráfico si se trata de un rediseño
  • Establecer un público objetivo y definir palabras clave y objetivos de conversión
  • Herramientas de gestión de proyectos.
  • Prototipado frontend: Wireframes (herramientas)
  • Prototipado backend: Arquitectura de datos
  • Aplicación de imagen corporativa a Wireframes
  • Desarrollo frontend y backend: Control de versiones.
  • A/B testing con usuarios reales para detectar problemas en usabilidad y embudo de conversión
  • Despliegue en un servidor de producción y cambio de DNS o registros A si fuera necesario
  • Análisis de tráfico, conversión e iteraciones.

El frontend: XHTML, CSS, JS y FTP

  • Ver el código fuente de una página y usar el inspector de Chrome (previsualizador responsive). User Agent Switcher.
  • HTML: La base del internet. Semántica. Cheatcheet. ejemplo: DeathtoBullshit)
  • CSS: Separación de estilo y contenido. Cheatsheet de propiedades. Cheatsheet de selectores. (ejemplo CSS Zen Garden)
  • Javascript: Interacción y manipulación del DOM + AJAX
  • XML y Json: Archivos de datos
  • Novedades de HTML5: Video, audio, geolocalización, notificaciones push, validación de formularios, etiquetas semánticas.
  • Novedades de CSS3: Webfonts, animaciones & transiciones, mediaqueries, columnas, efectos 3D, Flex  & Grid layouts, selectores complejos. (Más detalles aquí y aquí)
  • Herramientas para demos en vivo: JsFiddle y CodePen
  • Transferencias de archivos a un servidor: FTP, SFTP, SSH. Filezilla.
  • Editores de código (IDEs): Sublime Text, PHP Storm, Text Wrangler, Coda, Dreamweaver.
  • Preprocesadores SASS.
  • Automatizaciones: GRUNT y GULP.
  • Herramientas online > www.codepen.io

HTML5/CSS3 en dispositivos móviles

  • Responsive VS Adaptative VS Liquid (ejemplo)
  • Detección de user agent (javascript) VS detección de viewport (mediaqueries)
  • Redirección a versiones móviles (en un subdominio).
  • Device-specific mediaqueries.
  • Uso de mediaqueries para impresión (visibilizar links)
  • Consideraciones de limitaciones de ancho de banda para fotos y videos.
  • Consideraciones de UI  en móviles> NO: Desplegables, Ventanas modales o efectos de Rollover. SI: Gestos táctiles, position:fixed, zonas accesibles (mediaqueries verticales).
  • Menú hamburguesa sí, menú hamburguesa no.
  • Simplificación del flujo de navegación para optimizar la conversión en móvil.
  • Aprovechamiento del hecho que es un teléfono (llamada directa o compartir por whatsapp)

Ejercicios con código

  • Introducción al inspector de Chrome y a CodePen.io
  • HTML tags, semántica, atributos, clases, IDs
  • CSS. Externo, VS <style> VS Inline. Selectores, Herencia, Especificidad. Imágenes, Box Model, Layouts.
  • JS: Interacción, manipulación del DOM. Interacción con APIs, Json, AJAX.
  • FTP: Programas y Configuración. SFTP, SSH.
  • PHP: Revisión de las plantillas php de un tema de WordPress.
  • MYSQL: Importación, serializado, MD5, PHPMyAdmin.

Lenguajes de Backend y CMSs

  • Páginas estáticas VS Páginas dinámicas
  • Lenguajes de servidor (.net, php, node, ruby)
  • Bases de datos. Modelado de datos. Coste y cacheado de consultas.
  • CMS – Self hosted opensource VS 3rd Party propietary platforms.
  • Cacheado, SSL, CDNs.
  • Seguridad. Up to date, monitorizado, backups.
  • Robots.txt (casa Real)

WordPress

  • Software libre (GPL) mantenido por una comunidad.
  • Versátil (CMS, ecommerce, CRM) & Estándar (PHP+MYSQL)
  • WordPress.org VS WordPress.com
  • WordPress trademark. Automattic (akismet, gravatar, jetpack).
  • Temas VS Plugins. Presentación VS funcionalidad (ejemplo CPTs)
  • Extensible (CPTs, Custom Taxonomies, Tax & Post meta, REST API)
  • Flexible: Child themes, hooks & pre_get_posts().

Sistemas de pago online

  • Bitcoin, TPV, Paypal, Stripe, cotrareembolso, transferencia.
  • Configuración y requerimientos técnicos.
  • Comisiones (para comprador y vendedor), porcentajes fijos + variables, devoluciones, disponibilidad.
  • Pagos recurrentes, notificaciones al usuario.

Métricas y control de tráfico.

  • Analytics
  • Google trends
  • Google search console

Seguir leyendo «Herramientas Web – Máster Anual de Dirección y Gestión de Comunicación, Marketing y Publicidad – IED»

Participo en el Meetup de WordPress Granada

He participado a través de www.appear.in en el Granada WordPress Meetup, invitado por Ángel Moreno y Fran Torres  para compartir mi experiencia en la organización de WordCamp Madrid 2017.

Mi experiencia como responsable de ponentes en la organización de WordCamp Madrid

Como miembro del equipo de organización de WordCamp Madrid me tocó organizar el audio/video (que fue como la seda gracias a la gen te de M4V  que podéis ver tanto en Youtube como en WordPress.tv) y las charlas de los ponentes.

En total hubo más de 70 propuestas de ponencias, lo cual fue tela para organizar. Acordamos que los propios organizadores también podían proponer una ponencia pero para evitar suspicacias hicimos un panel ciego (sin el nombre del ponente) en Trello organizando por temas y marcando simplemente si el ponente era de Madrid y si tenía experiencia previa. Se añadieron comentarios y se votaron las ponencias. La experiencia fue muy positiva aunque para futuras ediciones yo me plantearía:

  • Reconsiderar si los organizadores deben participar como ponentes. En WordCamps más pequeñas es un poco inevitable porque la comunidad de esas ciudades es más pequeña pero en un sitio como Madrid hay mucha gente y muchas voces que oír, si no al final siempre estamos los mismos sospechosos habituales.
  • Tener más ponencias en Inglés. Yo personalmente hubiera añadido más ponentes en inglés pero en el resto de organizadores había bastante reticencia. Creo que esto debería cambiar, tanto por experiencia personal de conocer miembros de la comunidad de otros países como por la posibilidad de traer a gente muy puntera. Si es necesario se puede buscar un intérprete y listo (de hecho yo mismo me ofrezco a hacerlo el año próximo).
  • Dar un plazo más corto para proponer/confirmar ponencias. El goteo de emails fue considerable y de hecho un ponente extranjero nos canceló su ponencia a última hora precisamente porque la había planteado muy al principio y luego cambió de planes (que no fue culpa de él, más bien al contrario).
  • Hacer un poco más de piña con los ponentes. Tanto es así que después de haber hablado con todos ellos por email, al final a algunos ni los llegué a saludar en persona :S Para el próximo año propondría crear un canal de slack para tenerlo un poco informados y conocerse un poco entre sí.

En conjunto fue una experiencia fantástica. ¡Nos vemos el año que viene!.

Imparto un curso de WordPress para el equipo docente de EASD Castelló

La EASD (Escola d’Art i Superior de Disseny de Castelló) imparte estudios de enseñanzas de artes plásticas y diseño. Me contactó uno de sus profesores para ver si les podía dar un pequeño taller de WordPress.

El objetivo del curso era poder montar un pequeño portfolio de trabajos tanto para los profesores como para que estos a su vez enseñaran a sus alumnos para hacerlo. Al tratarse de perfiles poco técnicos basamos el curso en WordPress.com y a modo de ejemplo yo monté mi propio blog donde fui añadiendo los contenidos del curso: https://eltallerde.wordpress.com/

Una de los ejemplos más bonitos de los alumnos es la página de Juan Pablo Ruiz. Ilustrador y uno de los profesores de la escuela. https://juansoloilustra.wordpress.com/

¿Cuánto vale hacer una página web?

«You don´t know anything about my project.»
«That makes two of us».

«Hacer una web» puede ser instalar una plantilla y subir cuatro textos y fotos, pero también puede implicar muchas otras tareas. Aquí una lista rápida y no exhaustiva de todo lo que puede incluirse en «hacer una web», así que cuidado con lo que acordáis con vuestros clientes y con vuestros proveedores.

  • Estrategia global de presencia en internet
  • Gestión de dominios, alojamiento y cuentas de correo
  • Creación de Imagen corporativa
  • Analíticas de información previa si es un rediseño
  • Análisis de Keywords y estrategia SEO
  • Arquitectura de la información, flujo y objetivos de conversión
  • Wireframing
  • Aplicación del imagen corporativa a los wireframes
  • Redacción de textos
  • Toma y retoque de fotografías
  • Desarrollo de backend
  • Desarrollo de frontend
  • Publicación de información
  • Migración y despliegue en el servidor y dominios de producción
  • Redirección de URLs antiguas a las nuevas si hay un cambio de dominio
  • Lanzamiento (publicitar, dar a conocer)
  • Creación y gestión de perfiles en redes sociales
  • Monitorizado de uptime, rendimiento, seguridad y SEO
  • Análisis e iteraciones de mejora