WooCommerce y formas de pago online

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

Alvaro Gómez Velasco – MrFoxtalbot –

Estudio fotografía en el WAES de Londres y en 2002 empiezo a trabajar como fotógrafo y retocador. En 2006 llego a Madrid y hasta 2009 trabajo como director de arte y animador flash para varias agencias de publicidad (RNL, Shackelton, Wunderman, BBDO). Desde 2010 dirijo mi propio estudio de desarrollo web especializado en WordPress, donde coordino un equipo de freelances especialistas en distintos campos: SEO/SEM, UX/UI, Branding, ilustración producción de audio/video, desarrolladores front y back, sysadmins. Soy parte del equipo organizador del MeetUp de WordPress Madrid así como del evento WordCamp Madrid 2017.

https://mrfoxtalbot.wordpress.com
https://profiles.wordpress.org/mrfoxtalbot
flickr.com/photos/mrfoxtalbot

Entrevista.

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
  • 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 > http://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

Leer más “Herramientas Web – Máster Anual de Dirección y Gestión de Comunicación, Marketing y Publicidad – IED”

Acceso al gestor y primeros pasos en WordPress.com

Existen tres maneras distintas de editar/modificar tu página en WordPress.com. Desde cada uno de ellos se pueden hacer cosas distintas y cada una tiene sus ventajas e inconvenientes:

  1. El editor por defecto (llamado Calypso)
  2. El editor “clásico” (llamado wp-admin)
  3. El personalizador (en inglés “customizer”)

El editor por defecto: Calypso

Es el que os va a mostrar WordPress.como cuando creéis vuestra web. Es el más sencillo de utilizar y el más rápido a la hora de escribir y publicar contenidos.

También es el que os mostrará si pincháis “editar” cuando estéis visitando una entrada en vuestra web (con sesión iniciada, se entiende).

Para mis gusto personal este editor es un tanto incompleto y por eso prefiero usar el clásico.

El editor clásico “wp-admin”

Este editor es el “clásico” y es el que os encontraréis si más adelante trabajáis con una instalación propia (self-hosted o WordPress.org). Por este motivo yo recomiendo usarlo siempre, en lugar de Calypso. Para acceder a él antes había un botón directo, pero recientemente lo quitaron :

A día de hoy la única manera es escribir, detrás de la dirección de vuestra web “wp-admin”, de esta manera:

vuestraweb.wordpress.com/wp-admin

Una vez accedáis tendría que mostrarlos algo así:

El Personalizador

Se utiliza principalmente para cambiar el diseño de la página (colores, tipografías, logos e imágenes de cabecera), aunque también es posible gestionar desde él los menús y los widgets. Se puede acceder a él desde Apariencia > Personalizador (en el WP-Admin) o desde el botón de “Personalizar” que se muestra abajo a la derecha cuando visitamos nuestra página.

Cómo crear un menú en WordPress.com

Los menús nos permiten organizar la información de nuestra web y facilitan la navegación. Un menú puede tener enlaces a páginas, a entradas, a categorías o a una URL arbitraria (externa o interna) que nosotros asignemos.

Podemos crearlo yendo a Apariencia > Menús.

Los pasos serían

  1. Creamos un nuevo menú
  2. Añadimos los elementos
  3. Asignamos la localización donde queremos que se muestre ese menú.

El tercer paso es muy importante porque si no asignamos el menú a ninguna zona no se nos mostrará. Si nuestra web no tiene asignado un menú a la zona de menú principal en ella se mostrarán todas las páginas que tengamos creadas. Esto es una herencia de cómo funcionaba WordPress antes de la inclusión (en la versión 3.0) del sistema actual de gestión de menús. Si tenemos dudas sobre las zonas disponibles en nuestro tema y qué menú está asignado a cada una lo podemos revisar desde la pestaña de “Gestionar Lugares”.

También es posible crear y gestionar los menús desde el personalizador:

Para poder añadir un elemento al menú necesitaremos haberlo creado previamente, aunque en las últimas versiones de WordPress (desde la 4.7) es posible crearlo directamente desde el personalizador.

En algunos temas existe una zona de menú llamada “Menú Social” que nos permite añadir los links a nuestros perfiles en redes sociales convirtiendo el enlace en el icono de esa red social. Simplemente tenemos que añadir el link y automáticamente lo detecta:

Pinchando y arrastrando podemos reorganizar los menús. También es posible cambiar la etiqueta de navegación de los menús, de tal manera que no coincida exactamente con el nombre de la página, post o categoría a la que enlaza. En caso de hacer esto hay que recordar que ese nombre ya no cambiará de manera automáticamente al editar el original.

El número de menús disponibles y su localización depende del tema que estemos usando. Es importante recordar que siempre que cambiemos de tema tendremos que re-asignar cada menú a las zonas que nos ofrezca ese tema.

Cómo mostrar código en WordPress.com

WordPress.com no nos permite añadir nuestro popio código php o javascript pero si mostrarlo, si por ejemplo escribimos una entrada que hable un tema relacionado con programación. Para ello podemos usar el shortcode [ code ] tal y como se explica aquí.

[ code language=”css” ]
a {color:red;}
[ /code ]

El resultado sería algo así:

a {color:red;}

El parámetro “language” es importante si queremos que nos muestre el “sintax highlight” correcto. Tenemos además otra serie de parámetros que podemos añadir al shortcode:

  • autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
  • collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts. Defaults to false.
  • firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
  • gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
  • highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19”.
  • htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.
  • light (true/false) — If true, the gutter (line numbering) and margin (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.
  • padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
  • title (string) — Set a label for your code block. Can be useful when combined with the collapse parameter.

Este shortcode está disponible como plugin si queréis usarlo en vuestra propia instalación.

Cómo Incrustar contenidos externos (“Embeds”)

Para añadir un contenido externo todo lo que tenemos que hacer es copiar la dirección de ese contenido y pegarlo en la entrada. Aquí podéis ver una lista de todos los elementos que se pueden incrustar de esta manera, entre ellos:

  • Youtube
  • Twitter
  • Facebook
  • Google Calendar
  • Google Forms
  • Issuu
  • Soundcloud
  • Flickr
  • Instagram
  • Pinterest

El caso de los mapas es ligeramente más complicado, aquí os pongo un video de cómo conseguir el enlace correcto:

Resultado:

Visibilidad de los Widgets

Cada tema especifica una serie de zonas donde podemos colocar nuestros widgets. Si añadimos varios widgets en una misma zona se pondrán normalmente uno encima del otro. Lo que resulta interesante, y nos da mucha más libertad, es la opción de mostrar u ocultar ciertos widgets según una serie de criterios (Si es la página de inicio, la página de listado de entradas, si estamos en un listado por autor, por fecha o por categoría, si es una entrada individual, etc).

Captura-de-pantalla-2017-04-10-a-las-14.11.12Captura-de-pantalla-2017-04-10-a-las-14.11.20Captura-de-pantalla-2017-04-10-a-las-14.11.29

Mostrar listados de posts, paginas y porfolios con shortcodes

Si queremos mostrar las entradas en una página, en un post o en un widget lo podemos hacer usando un shortcode. El uso básico es [ display-posts ] pero podemos darle muchos parámetros:

  • author
  • category
  • date_format (date_format=”F j, Y”)
  • id (id=”9, 10″)
  • image_size (image_size=”thumbnail”)
  • include_content (include_content=”true”)
  • include_date (include_date=”true”)
  • include_excerpt (include_excerpt=”true”)
  • offset (offset=”3″)
  • order (order=”ASC”)
  • orderby (orderby=”title”) (más aquí https://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters)
  • portfolio_type (para mostrar porfolios)
  • post_parent order
  • post_status (post_status=”publish, future”)
  • posts_per_page
  • tag
  • wrapper (ol, ul, div)

Ejemplo  [ display-posts orderby=”title” order=”ASC” posts_per_page =”6″image_size=”small” ]

Más información aquí.

Mostrar Posts del Tipo Porfolio y Testimonio

Para ello primero hemos de activarlos:

WordPress.com Shortocodes list posts loop

Es muy similar a [ display-posts ] (y de hecho podemos usar el otro directamente añadiendo “portfolio_type” o “testimonial_type”) pero nos ofrece la opción de especificar el número de columnas: [ portfolio columns=”1″ ].

Más información aquí y aquí.

Mostrar páginas

Existe además un shortcode para mostrar nuestras páginas por ejemplo

  • [ list-pages ] Muestra todas las páginas
  • [ sibling-pages ] Muestra las páginas que están al mismo nivel que la actual
  • [ child-pages ] Muestra las páginas que están por debajo de la página actual

Este shortcode acepta los siguientes parámetros:

  • sort_column
  • sort_order
  • exclude_tree
  • include
  • depth
  • child_of
  • show_date
  • date_format:
  • title_li
  • link_before
  • link_after
  • authors
  • offset
  • post_status

Más información aquí.

Nota importante

Por cuestiones de rendimiento el resultado de estos shortcodes no se genera cada vez que se carga la página, sino que se cachea y se renueva cada cierto tiempo. De manera que si habéis hecho un cambio y no se muestra no os preocupéis, es cuestión de esperar un poco.