Timber by EMSIEN-3 LTD
Wordpress

0 552

Una WordCamp no termina hasta que escribes sobre ella en tu web”. Si os suena la frase es por que habéis asistido a una WordCamp recientemente (yo llevo ya unas cuantas). Los organizadores nos recuerdan con esta frase que escribir nuestra experiencia asistiendo al acontecimiento es realmente útil para que otros puedan también conocerlo y de esta manera acudir en futuras ediciones.

Por este motivo, acá os cuento mi experiencia en la pasada WordCamp Cantabria dos mil quince, acontecimiento al que ya os comenté que asistiría en una entrada precedente. He organizado este artículo de forma cronológica a fin de que sea más fácil de entender. Espero que lo disfrutes

Llegada a Santander – Viernes 6 de Noviembre

Como la mayoría de asistentes / ponentes que viajábamos desde Barcelona, el viernes empezó la WordCamp para mi dirigiéndome al aeropuerto de Barna para coger el vuelo que nos llevaría a Santander. Allá me hallé con algunas caras conocidas, como Joan Artés y Pancho P. (ambos WProfesionales), Emili Castells (que ha escrito en WPrincipiante anteriormente) o Marcelo Tena.

En poco menos de una hora de vuelo nos plantamos en el Aeropuerto de Santander. Y algo más tarde ya estábamos en los pertinentes hoteles. Como es frecuente, se festejó una cena de ponentes y pude asistir. Allí nos encontramos todos y cada uno de los ponentes y pudimos gozar de la compañía, además de una buena comida (sí, no se come mal en Cantabria).

Al terminar la cena volví al hotel. En mi caso, solo tuve que cruzar la calle, un acierto por parte de la organización que eligió un restaurant muy cerca de los hoteles dónde la mayoría nos alojábamos.

Ponencias – Sábado siete de Noviembre

Aunque el acontecimiento en si empezaba a las 9h del sábado, me acerqué al circuito del Palacio de la M. anticipadamente. Y valió mucho la pena, puesto que pude darme una vuelta por los interiores del palacio y ver las diferentes estancias que estaban abiertas sin prácticamente absolutamente nadie. Sólo con ver las fotos ya puedes entender que se trata de un lugar especial.

Palacio de la Magdalena
Palacio de la M.. Hacer una WordCamp en un sitio dónde puedes localizar salas como esta es increíble.

Entrando ya en materia, el día tuvo ni más ni menos que dieciocho ponencias, en 2 tracks diferentes (9 en una sala y 9 en otra), cada una de ellas de cuarenta y cinco minutos (treinta de ponencia y 15 de preguntas).

Más allá de los temas tratados, que ciertos pueden interesar más que otros (los tienes acá en el Programa), me quedo con 2 cosas. La primera fue la asistencia. Lograr que en Santander se acerquen a un evento WordPress casi doscientos personas, muchos de ellos de fuera de Cantabria, es claramente un éxito. Y aquí la organización, una vez más, es la que se merece todo el mérito.

Como ponente, la segunda cosa que me llamó la atención fue la alta participación de los asistentes (que se terminaría de confirmar en el Contributor Day, como voy a explicar más adelante). Cuando haces una charla de 45 minutos donde quince son de preguntas, te arriesgas a que absolutamente nadie se atreva a consultar y quede el habitual silencio incómodo al final. Mas no pasó, puesto que tanto en mi caso como en el de los demás compañeros fuimos fusilados a preguntas, algo que siempre se agradece.

En mi caso específico, hablé de la API REST de WordPress. Una funcionalidad que propón muchos cambios futuros en WordPress y que pronto vamos a poder tener en el core. Hice un repaso a conceptos técnicos para intentar que nadie se perdiese en la explicación, además de revisar la evolución histórica y lo que está por venir. Y si, asimismo hice dos demos (aunque admito que el fantasma del palacio no estuvo de mi lado y tuve algún problemilla haciendo peticiones a la API que no funcionaron , si bien tocaba ser valiente y hacer una demo en vivo en una WordCamp ).

La parte de la que estoy más contento, personalmente, fue la sorpresa final dónde enseñé que la presentación la había hecho íntegramente con WordPress (utilizando el tema Picard modificado). Lo acepto, fue algo muy geek, pero tenía que hacerlo para enseñar que con la REST API se pueden hacer cosas muy chulas. ¿No sabías que puedes hacer una presentación sin PowerPoint ni nada, sólo con WordPress? Mírate mis transparencias acá.

A nivel organizativo, todo estuvo perfecto. Los tiempos se mantuvieron a rajatabla. Y poder salir y entrar de una sala a otra para ver la presentación que más interesante te parecía en cada momento sin tener que entregar mil vueltas es de agradecer.

Ponencia de Dani Reguera en WordCamp Cantabria
Ponencia de Dani Reguera en WordCamp Cantabria. Fue la última y ya veis que la sala estaba llena.

Sólo hubo algún que otro pequeño detalle a corregir, como la calidad de la WiFi o el espacio para comer, que se quedó algo pequeño. Mas vaya, que para ser la primera WordCamp que organizaban, les doy un diez.

Contributor Day – Domingo ocho de Noviembre

Además del día de ponencias, como ya es frecuente tuvimos el día de contribuir. Se repartió en 2 salas, una con las mesas para crear los grupos de trabajo y otra para desconferencias (que ahora te explicaré lo que son, por si acaso no lo sabes).

En la sala de los conjuntos de trabajo, podías decidir en qué querías contribuir y unirte al conjunto en cuestión. Aparte de los grupos de trabajo frecuentes para traducciones, encontramos un conjunto de emprendimiento en WordPress donde R. y M. de Blogalízate, junto a todo aquel que estaba interesado en el tema, podía discutir la forma de montar un negocio en WordPress. Por otra parte, Rocío Valdivia e Ibon Azkoitia estuvieron en una mesa sobre Comunidad WordPress, donde explicaban cómo montar una comunidad local y daban consejos a este respecto. En mi caso, estuve por la mañana en una mesa con otros desarrolladores, como I. Cruz y Emili Castells.

Equipo de voluntarios de la WordCamp Cantabria 2015.
Equipo de voluntarios de la WordCamp Cantabria 2015.

En cuanto a las desconferencias, son charlas improvisadas que cualquiera puede dar. Lo bueno de la WordCamp Cantabria es que cualquier asistente podía plantear un tema a tratar por él mismo y el resto teníamos la ocasión de votar aquellos que más nos interesaban. No lo había visto en otras WordCamps pasadas, y espero que de ahora en adelante otras WordCamps se suban al carro.

Aquí otra vez me sorprendió la participación, en tanto que hubo muchísimas propuestas y al final el hecho de votar tuvo sentido, puesto que no hubiese dado tiempo de hacerlas todas y cada una y solamente se escogieron las más votadas.

Post WordCamp

Otro motivo más para asistir a una WordCamp es el poder visitar la urbe, o comunidad autónoma en un caso así, donde tiene lugar. Cantabria vale mucho la pena, y si además conoces a Darío y es él quien te la enseña, todavía más.

Así como resumen, si vas a Cantabria no dejes de visitar:

Y piérdete por algún pueblo oculto. Te lo vas a pasar bien.

Resumen Final

Me alegra poder haber compartido unos días con la comunidad WordPressera de Cantabria, y haber aprendido un poquito de ellos. Que sea la primera de muchas buenas WordCamps por venir.

Recuerda que asistir o bien organizar una WordCamp es una forma más de las muchas en las que puedes colaborar para fomentar el uso de WordPress. Si tenías dudas de lo que te marchas a hallar yendo, espero habértelas solucionado un tanto. Y recuerda acercarte a tu comunidad local, que seguro que existe alguna cerca que hace eventos periódicos y estará deseando de tenerte con ellos. WordPress es Comunidad, que no se os olvide.

0 527

Supongamos que ha llegado el instante en que necesitas crear una nueva web o bien volver a diseñar la presente. Eso siempre y en toda circunstancia es una buenísima señal, pues estás a puntito de empezar un fantástico nuevo proyecto, ¿no? No obstante, diseñar adecuadamente una web no es sencillo. ¿Por dónde comienzas?

Si buscas por Internet, hallarás muchísimas preguntas que deberías iniciar a elaborarte, como por ejemplo:

  • ¿Cuál es el propósito de mi web? ¿La usaré como herramienta de márketing? ¿Se empleará como fuente de información? ¿A quién va dirigida? ¿Mis clientes del servicio actuales, potenciales clientes del servicio, empleados u otras personas?
  • ¿Quién tendrá la última palabra sobre el aspecto y funcionamiento de la misma? ¿Me gustaría que fuera muy impactante visualmente? ¿Cómo se marchan tomar las decisiones durante el desarrollo?
  • ¿Quién va a pagarlo y de qué presupuesto hablamos?
  • ¿Contendrá algún género de publicidad?
  • ¿Quién se encargará de actualizar el contenido y con qué frecuencia? ¿Va a haber una sección de noticias? ¿Y de acontecimientos? ¿La información publicada será permanente o tendrá fecha de caducidad?
  • ¿Qué experiencia tengo o bien tiene mi equipo en creación, desarrollo y mantenimiento de webs?

Está claro que todas y cada una son importantísimas. Y, en verdad, probablemente podríamos hallar muchas más… mas buscar preguntas y responderlas de cualquier forma no parece la mejor forma de definir qué queremos hacer.

En la entrada de hoy te voy a explicar de qué forma redactar una petición de propuesta (Request For Proposal, RFP en inglés) de la creación o rediseño de tu web, la cual te ayudará a organizar y planificar el trabajo, independientemente de que vayas a crear tú mismo tu propia web o bien vayas a externalizar su desarrollo.

La petición de propuesta de creación o bien rediseño de una web no es más que una descripción de la página web que se quiere crear. Por este motivo, insisto, si bien vayas tú mismo a crearte tu página web, de la misma manera que no comienzas a construir una casa sin haber hecho los planos, no empieces a incorporar una web sin haber definido primero tus requisitos. 

¿Cómo debe ser esta descripción? Ahora tienes nuestra propuesta informal y no completa que pretende ser orientativa y pragmática y, espero te pueda ser de ayuda.

Estructura y contenido de la solicitud de propuesta

Introducción de una Solicitud

  1. Introducción – Breve descripción de tu proyecto: esta sección, además de los datos básicos de la empresa y de contacto, debe incluir toda aquella información precisa para que una agencia pueda decidir si el proyecto merece la pena, si pueden hacerse cargo de él y, por lo tanto, si deben leer el resto del documento o bien, al contrario, lo pueden desechar de forma directa. Básicamente debería incluir:
    • el logo de la compañía,
    • el nombre de la empresa,
    • el nombre de la persona de contacto,
    • la data,
    • el título del proyecto,
    • un párrafo describiendo el proyecto, y
    • un índice del resto del documento.
  2. Ámbito del proyecto: esta sección tiene que describir con más detalle qué servicios se quieren contratar. Por supuesto, en dependencia de los servicios que se quieran, el resto del documento tendrá que estar acorde con lo que solicite. Cuando charlamos de la creación de una web podemos estar considerando:
    • Solicitud de los servicios:
      • Gestión del proyecto
      • Estrategia de contenidos
      • Redacción
      • Ilustración
      • Diseño de la información
      • Diseño visual
      • Optimización del SEO
      • Codificación front-end (HTML/CSS, animaciones)
      • Codificación back-end (integración con Content Management System, APIs de terceros)
      • Desarrollo de un software o bien aplicación a medida
      • Optimización en dispositivos móviles
      • Testeo y garantía de calidad
      • Búsqueda de publicidad pagada
      • Formación
      • Analítica web
      • Soporte y mantenimiento
    • Requisitos han de incluirse en la respuesta. Si detallas una lista clara de los puntos que quieres que especifiquen y concreten te facilitará la comparación entre opciones alternativas.
    • Fechas límite. Cuál es la fecha límite de entrega de respuesta, cuándo les notificarás de qué agencia ha sido escogida e inclusive en qué momento esperas que se lance la página web.
  3. Breve descripción de tu empresa: un par de parágrafos habrían de ser más que suficientes (no se trata de explicar toda la historia de tu empresa) para explicar quiénes sois y qué servicios ofrecéis. Podría incluir los siguientes puntos:
    • cuándo se fundó,
    • una descripción rápida de la empresa en 5 o bien 10 palabras (por servirnos de un ejemplo, joven, emprendedora, basada en tecnología, etc.)
    • los productos o servicios que ofrecéis,
    • el tamaño de la compañía, incluyendo, por servirnos de un ejemplo el número de empleados y la facturación anual, y
    • si sois una compañía internacional, multi-idioma, en qué países trabajáis, cuántos y qué idiomas usáis en vuestro día tras día.Audiencia - cita de Walt Disney
  4. Tu audiencia: en esta sección describes quién va a ser la audiencia de tu web. Esta información es (o bien debería ser) crítica para los diseñadores y desarrolladores de webs, ya que el tipo de audiencia determina tanto la estética como cada entre las funcionalidades de la página web. Procura que los siguientes aspectos sobre tu audiencia queden claros:
    • ¿Cuál es tu publico objetivo de la nueva? Deberías señalar si es distinto al de tu antigua o actual web y también indicar información demográfica de tu público: niños, adultos, clase asociado-económica, nivel de ingresos y/o estudios, localización, etc.
    • ¿Cómo accederá tu audiencia a tu página web? PC, móvil, tablets…
    • ¿Con qué frecuencia accederán?
    • ¿Cuáles son sus principales intereses y por qué van a visitar tu web?
  5. Objetivos de tu nueva web: esta sección identifica el principal objetivo de tu página web y todos los otros objetivos secundarios y terciarios (o bien microobjetivos). Una web con el objetivo de acrecentar el número de clientes del servicio potenciales (leads) va a ser y funcionará de forma diferente a una cuyo primordial objetivo es instruir a inversores. Debería incluir:
    • Objetivo principal de la web (ver ciertos ejemplos más adelante)
    • Objetivos secundarios de la web
    • Indicar si la nueva web es para lanzar un nuevo producto o bien cambio de nueva imagen corporativa
    • Si incluirá propaganda de terceros
    • Alguna métrica cuantitativa, si la conoces, que te ayude a saber el logro de tus objetivos
    • En caso de tienda, es importante indicar los modelos de pago aceptados
  6. Requisitos funcionales tu nueva web: esta sección debería incluir todas las funcionalidades imprescindibles en tu nueva web. Cuantos más detalles, más simple va a ser que te den un presupuesto detallado. Esta sección es distinta de la de los objetivos y la forma más fácil de describirla es mediante una propuesta de un mapa del lugar, si es posible. A continuación, puedes ir detallando cada apartado.4 pasos para seleccionar tu tema de WordPress
  7. Requisitos de diseño y aspecto de tu nueva web: qué aspectos de diseño quieres que se tengan presente. Las agencias de diseño son las que más te pueden aconsejar en este aspecto, mas está bien conocer cuales son las tendencias de diseño y tus temas preferidos. De nuevo, cuanta más información puedas dar sobre tus preferencias y gustos, mejor. Para esto recomendados:
    • Proveer ejemplos de folletos, logotipos de la empresa y/o vídeos, que faciliten la creación o actualización de la identidad corporativa.
    • Listar ciertos ejemplos de webs que cumplan tus esperanzas de diseño, navegación, y/o interacción con el usuario.
  8. Requisitos técnicos de tu nueva web: este es un aspecto amplísimo, pero por lo menos deberías cubrir los siguientes puntos:
    • si ya se tiene el dominio,
    • si se necesita un hosting,
    • si hablamos de una web intranet/extranet o bien internet,
    • si debería amoldarse particularmente a navegadores de solo texto o bien de audio o bien a lectores braille o para personas con necesidades singulares,
    • si tu nueva web es un y también-commerce on-line, qué crecimiento de productos o bien referencias a corto y largo plazo esperas, puesto que esta información va a ser clave en el momento de decidir qué plataforma precisas en tu página web.
  9. Lista de deseos de tu nueva web: esta sección describe las funcionalidades, aspectos de diseño o técnicos opcionales que te gustaría que incluyera tu web, mas que dependerán del costo y tiempo de entrega. Hacer esta lista separada de los requisitos precedentes obligará a la agencia darte una información más detallada de los costes y tiempos de entrega.
  10. Web actual o bien antigua: si la nueva web va a ser el rediseño de una web que ya tienes, o bien aun si tienes otras webs corporativas, merece la pena explicar honestamente qué cosas no te están marchando o bien te gustaría cambiar o prosperar de tu web actual. Cuanto más específico mejor. Y no te preocupes, que no te van a juzgar sobre tu web actual.
    • Indica qué inconvenientes has detectado con tu página web actual
    • Indica qué contenido debe migrarse a la nueva web
  11. Presupuesto: en esta sección deberías acotar cual es tu presupuesto incluyendo detalles sobre los pagos. El presupuesto asimismo debería incluirse ya en la introducción. Tranquilo, más adelante te cuento por qué razón ser directo acá es útil

Cómo escribir la parte más complicada de la petición de la propuesta

Ahora que ya tienes clara la estructura del documento, es hora de empezar a redactar tu propuesta. Por supuesto, el nivel de detalle al que debes llegar depende de ti, mas cuanto más claro quede lo que realmente deseas, mejor.

Establecer los objetivos de tu nueva web

Es importante contestar a las próximas preguntas: ¿como es la cosa más esencial que quieres que haga tu página web? ¿educar y también informar a clientes potenciales?, ¿vender productos?, ¿generar contactos a tu equipo de venta?, ¿proveer información y ser una fuente de referencia en tu industria? Es muy posible que no tengas un único objetivo, mas asegúrate de establecer prioridades. Escoge primero el que es más esencial y después, agrega el resto como secundarios, si es el caso.

Ejemplos

  • Nuestro objetivo prioritario es generar listas de contactos interesados en nuestros productos a fin de que contacte nuestro departamento de venta. Nuestros objetivo secundario es informar y educar a los potenciales clientes sobre nuestros servicios y proveerles de información de utilidad.
  • Nuestro objetivo prioritario es establecer una imagen de verosimilitud a nuestros potenciales inversores. Nuestro objetivo secundario es facilitarles la manera de contactar con nosotros a través de la página web o bien mediante perfiles en social media.

Honesto - cita John Lennon

Sé sincero sobre tu página web actual

Si tienes una web que necesitas volver a diseñar, evalúala de forma precisa y a conciencia. Decir sólo que quieres progresar tu web, no es suficiente. Debes especificar por qué no está funcionando. ¿Halla la gente fácilmente la información que está buscando? ¿Estás obteniendo el tráfico y la conversión deseada en tu página web? La estética debería mejorarse, mas absolutamente nadie en tu empresa sabe de qué manera. ¿Estás suficientemente contento con el contenido? ¿Has tenido alguna protesta sobre la web alguna vez? Aprovecha esta ocasión para reflexionar sobre todas y cada una aquellas cosas que te gustaría mudar.

Ejemplos

  • El diseño de la web es acorde con la imagen de la empresa, mas no cumple ciertos de las tendencias más actuales de diseño.
  • El contenido no es el que verdaderamente le resulta interesante a nuestra audiencia.
  • Hay algunas páginas a las que jamás se accede.
  • Tenemos más de un idioma y no hay congruencia entre los contenidos que hay en distintas lenguas.
  • Los clientes del servicio se quejan de algún error cuando completan los pedidos. Esto nos ha provocado la perdida de algún cliente.

Define la funcionalidad primordial y anota peculiaridades opcionales

La distinción entre funcionalidades principales (las que para ti son críticas y obligatorias) y otras opcionales (que dependen del presupuesto) es muy importante. Esto evitará muchas confusiones sobre presupuestos y fechas de entrega.

Ejemplos

  • Es básico que, desde cualquier dispositivo, se puedan localizar todas y cada una nuestras tiendas físicas y los servicios que se ofrecen en ellas. Opcionalmente, sería ideal que se tuviese un mapa interactivo con iconos personalizados y toda esa información.
  • Necesitamos un blog en nuestra página web para compartir novedades con nuestros lectores. Opcional: nos agradaría disponer de un centro de recursos que incluyera una biblioteca de vídeos y con una funcionalidad de busca avanzada.

Sé claro y trasparente

No marees la perdiz. Todos somos siendo conscientes de que conseguir que un negocio funcione no es sencillo y los recursos de los que disponemos son limitados. Por eso mismo no hagas perder el tiempo a tus posibles proveedores. Cuanto más claro seas, más empatía lograrás y más simple será que logres tus objetivos.

Ejemplos

  • Sabemos que nuestra web no marcha. Mas sabemos exactamente los objetivos que queremos lograr en nuestra nueva web y estamos invirtiendo en delimitar el perfil de nuestra audiencia y clientes del servicio.
  • En estos momentos no tenemos presupuesto para un completo rediseño de la página web y nuestra marca. De momento, precisamos un diseño sencillo que nos deje publicar mucho contenido. Aguardamos poder hacer el rediseño completo de nuestra imagen corporativa más adelante.

Comparte el presupuesto de tu proyecto

Sí, deberías incluir tu presupuesto en tu solicitud. Primero, ahorrarás tiempo y trabajo a todo aquel que no esté presto a realizarte una web por tu presupuesto. Mas lo que es más importante es que para cada funcionalidad, la agencia ya estudiará la manera de incorporarla con el presupuesto establecido. No tiene mucho sentido que una agencia te dé un presupuesto que incluya todo cuanto quieres si no vas a poder asumirlo. Si eres sincero con tu presupuesto, la compañía procurará reducir costes para ajustarse a tus necesidades o te van a explicar por qué no se puede lograr lo que pides por esa cantidad. ¡La no-transparencia se termina pagando caro!

Pero ¿qué coste tiene el diseño de una web?. En la entrada Entonces… qué coste tiene una web, de Joan Boluda, podrás ver algunos precios orientativos.

Finalmente

Recuerda solicitar una propuesta de diseño web no es exactamente lo mismo que pedir un presupuesto de diseño de web. Si lo único que buscas es el precio más asequible y no quien te ofrezca el diseño de la mejor web, te recomiendo que no hagas perder el tiempo a las agencias.

Fotografías de Death to the Stock Photo (licencia)

0 471

Una de las funcionalidades de WordPress que cuando descubres y te acostumbras a utilizar te termina resultando imprescindible son los campos adaptados o custom fields. En este artículo repasaremos qué son y de qué manera podemos sacarle el mejor partido en nuestra web.

¿Qué son los campos personalizados?

Como su nombre indica, son campos de entrada de contenido personalizados, que podemos añadir al editor de nuestras páginas o entradas para poder introducir información de forma diferenciada.

WordPress por defecto ya soporta los campos personalizados. Seguro que los has visto en tus páginas o bien entradas:

ACF-campos-personalizados
Muchas veces, el tema o plantilla que empleamos trae estos campos predefinidos para precisar variables de estilo o bien funcionalidad.

El inconveniente es que la usabilidad de estos campos de WordPress es verdaderamente mala y trabajar con ellos puede llegar a ser muy incómodo y difícil. Por eso en este artículo vamos a usar un plugin gratis que nos va a facilitar mucho esta tarea: Advanced Custom Files.

ACF-AdvancedCustomFields

ACF nos deja crear y editar campos personalizados para nuestra página web de una forma muy visual e intuitiva.

¿Por qué deseamos utilizar campos personalizados?

Imagínate que quieres incorporar en tu web un directorio de empresas, de libros, cursos, profesionales, un portfolio, una lista de colaboradores, etc. Lo que sea se parezca a un listado de entradas que tengan un diseño homogéneo, con unos campos comunes en cada uno de ellos.

Está claro que podemos emplear una página estándar y también ir poniendo un factor debajo de otro, intentando que queden todas y cada una iguales. Pero conforme vayas añadiendo, la página será cada vez más y más extensa, poco práctica de visualizar. El usuario no podrá realizar búsquedas por campos concretos, no podrás ordenarlos de manera automática ni filtrarlos.

También podemos hacerlo con entradas, una para cada elemento, añadiéndolas todas a una categoría específica y así pudiendo filtrarlas y mostrarlas en una página distinguida del resto. Podrás emplear el editor visual para maquetarlo, procurando que queden todas y cada una lo más iguales posibles, pero tampoco podrás filtrar por los campos internos que precises ni realizar búsquedas avanzadas.

Si eres desarrollador y preparas una web para un cliente, todavía se acentuará más el inconveniente. ¿Cómo explicarle de qué forma debe hacer para introducir un nuevo elemento y que quede igual que el resto?

Los campos adaptados resuelven este inconveniente pudiendo crear la estructura de los posts o entradas que necesitas creando un campo para cada uno de ellos de esos datos que serán comunes en todos los elementos y que querremos recuperar para buscas o filtros.

Por ejemplo, en el caso de un directorio de cursos, necesitaremos campos para:

  • Título del curso
  • Descripción
  • Academia o formador del curso
  • Fechas
  • Tipo de curso (on-line / presencial)
  • Precio
  • Enlace para más información
  • etc.

¿Por qué razón no usar un tema que ya traiga esos campos adaptados?

Existen muchos temas o bien plantillas de WordPress concretos para un género de web que ya vienen con géneros de blog post predefinidos para, por ejemplo, portfolio, cartera de servicios, testimonios, etc. Aunque visualmente son muy atractivos y pueden parecer la mejor opción, no es lo más recomendado.

Los temas deberían limitarse a añadir diseño a nuestro WordPress, estilos como tipografía, colores, maquetación de posts, de layouts de páginas, sidebars, etcétera y deben dejar las funcionalidades para plugins, de forma que sea independiente una cosa de la otra, por el hecho de que en el caso contrario nos veremos atados a ese tema, y si en algún instante lo decidimos cambiar, perderemos toda la información que hayamos añadido en esos géneros de blog post y campos del tema.

¿Cómo crear campos adaptados?

Una vez instalado el plugin Advanced Custom Fields, vamos a tener en el menú la opción para crear los campos adaptados sencillamente.

Lo primero va a ser crear un grupo de campos personalizados. Podemos tener los grupos que queramos y detallar en que tipo de posts los desearemos usar. De esta forma podemos usar diferentes tipos de campos personalizados separados y agrupados para diferentes categorías o etiquetas.

ACF-FieldGroups

Podremos apuntar que ese conjunto de campos se aplique a un género de post, a una categoría, a páginas, a una categoría de página concretamente, asociarlo a una etiqueta, etc.

Las otras opciones que tenemos para el conjunto de campos es:

  • Orden: si tenemos múltiples grupos podemos elegir en que orden deben aparecer.
  • Posición: Si queremos que aparezcan tras el título, tras el editor visual o bien en la barra lateral.
  • Estilo: Si se mostrará los campos de este conjunto agrupados en una metabox (la típica caja del editor de WordPress que muestra campos dentro de ella y se puede disminuir al mínimo o desplegar) o no.
  • Ocultar: Qué campos de los que vienen por defecto con WordPress queremos que no se muestren en ese género de blog post o entradas.

Una vez establecidas las características genéricas del grupo, podemos iniciar a agregar cada entre los campos que contendrá

ACF nos pedirá los datos para cada uno de ellos de ellos: etiqueta, título, el género de campo, si es obligatorio o no, las instrucciones para rellenarlo, etcétera Dependiendo del género de campo que escojamos nos solicitará una información o bien otra.

ACF-campos

Además de los modelos más comunes, como texto, numérico, checkbox, e-mail o password, también podemos elegir algunos más avanzados, para anexar ficheros o bien imágenes, editor visual (wysiwyg), selector de data o de color. Otros tipos de campo singulares serían los de estructura, para agrupar campos en pestañitas o incluso de relación, para vincular el campo con otro artículo, una taxonomía, un enlace de página o un usuario.

Otra de las opciones que nos deja es mostrar el campo condicionalmente, esto es, que se muestre o no en función del valor de otro campo.

ACF-condicional

Por ejemplo, en el caso del directorio de cursos que veíamos, ¿qué tipo campos podríamos crear?

  • Título del curso -> podríamos utilizar de forma directa el título del artículo o bien crear uno personalizado de texto.
  • Descripción -> campo wysiwyg para poder darle algo de formato a la descripción.
  • Academia o bien formador del curso : podríamos crear un checkbox para distinguir si es una academia o bien un formador y otro campo de texto para el nombre.
  • Fechas : 2 campos de selector de data, uno para la inicial y otro para la fecha de finalización
  • Tipo de curso (en línea / presencial): en un caso así podríamos crear un select con opciones múltiples, por si acaso el curso se da tanto presencial como online
  • Precio : campo numérico
  • Enlace para más información: campo de url

Podríamos ademas añadir un campo condicional para en caso de que el curso fuera presencial nos mostrara un campo adicional para la dirección del centro donde se da, un campo de imagen para añadir el logo del centro, o bien un banner del curso, etc.

Determinando separadamente cada uno de estos campos nos dejará en la web, con algo de programación a la medida, crear filtros a fin de que el usuario pueda buscar el género de curso que más le resulta interesante.

Como podéis ver, las posibilidades para crear un gestor avanzado de contenidos son enormes merced a todas las opciones que tenemos al crear los campos adaptados.

¿De qué manera mostrar los campos adaptados en nuestra web?

Una vez creados los campos, lo interesante es poder introducirlos en nuestra página de manera que podamos darles un estilo determinado y que siempre y en todo momento se muestren de la misma manera.

La forma más fácil, mas asimismo menos práctica, es hacerlo a través de shortcodes dentro del editor visual de la entrada. Introduciendo el código [acf field=”nombre_campo”] se mostrará en nuestra página web el valor de ese campo concretamente.

ACF-shortcode

Pero si lo que buscamos con estos campos es poder maquetar y entregar un estilo concreto para mostrarlos, la opción de los shortcodes no nos servirá.

La segunda forma, es modificar el tema correspondiente introduciendo los campos y el html que queramos para poder personalizarlo. Para esto, deberemos editar el archivo de página (generalmente page.php, pero va a depender de tu tema) o de entradas (single.php o content.php, también en función del tema) y incorporar donde deseemos que se muestre el valor del campo el código correspondiente:

Es bien difícil generalizar, en tanto que cada theme o bien plantilla puede tener ficheros propios y especiales, con lo que deberemos buscar aquel fichero donde se muestre el contenido del post o bien consultar con sus desarrolladores a fin de que nos señalen cómo hacerlo.

Otra opción, muy recomendada, es combinar los campos adaptados con Custom Artículo Types, géneros de artículo personalizados donde podremos reunir todos esos campos que hemos creado.

Conclusión

Ya sea porque eres desarrollador y deseas facilitar la entrada de datos a tus clientes o pues estás desarrollando tu web y deseas ir un paso más allá en lo que se refiere a la organización de los datos y su forma de mostrarlos, los campos adaptados te pueden ser realmente útiles, y el complemento Advanced Custom Files te puede facilitar mucho el trabajo para llevar tu WordPress un paso más allá, personalizando cualquier plantilla que emplees, sin necesidad de que incorpore los modelos de entradas o bien campos que necesitas.

0 484

Si te consideras un social influencer, el día de hoy traemos algo que te gustará. Los amigos de treinta y tres Themes han desarrollado un tema para WordPress que integra en tu lista de entradas todas aquellas publicaciones de tus redes sociales.

Si te chifla subir imágenes a Instagram, eres un adicto a Twitter y Facebook, o te chifla pasar el rato en Pinterest, y por si fuera poco tienes un blog donde escribes entradas habitualmente, seguramente te habrás preguntado alguna vez si existe la manera de juntar todos tus contenidos en un único sitio. Hasta el momento, tenías la opción de agregar widgets en tu WordPress con las últimas publicaciones de tus redes sociales, mas si deseas una integración más bestia, LongSocial es tu opción.

Tus entradas junto a tweets, posts de Facebook, imágenes de Instagram...
Tus entradas al lado de tweets, posts de Facebook, imágenes de Instagram…

LongSocial es un tema responsive para WordPress que te deja configurar tus cuentas en redes sociales e integrar tus publicaciones sociales de manera directa en la lista de entradas de tu weblog. De este modo, todos tus visitantes ven en un único lugar tus tweets, tus publicaciones de Facebook, tus pines de Pinterest y tus imágenes de Instagram en el mismo feed que tus entradas de WordPress. Puedes ver las diferentes demos del tema en Demo 1, Demo dos y Demo 3.

Y todo esto manteniendo exactamente el mismo diseño que las entradas, de manera que la integración visual es perfecta, al contrario de lo que pasaba si instalabas widgets para enseñar tus contenidos sociales.

Para configurar nuestras cuentas sociales sólo has de ir al Personalizador de WordPress (el conocido Customizer). Esto es, en el menú Apariencia, elige el submenú Social Feeds. Aquí tienes las opciones para agregar tus cuentas de Fb, Twitter, Pinterest, Instagram o bien Vimeo.

Customizer Social Feeds
Customizer Social Feeds

Para cada cuenta social podemos señalar además de esto cuántas entradas queremos que aparezcan junto a las entradas propias de WordPress, para de esta manera lograr una página primordial equilibrada y variada.

Configurar la cuenta de Twitter es muy sencillo.
Configurar la cuenta de Twitter es sencillísimo.

Además, si incluso no tienes una web en WordPress no te preocupes. Al adquirir LongSocial puedes instalarlo directamente en OCTI.io, una plataforma web que te edifica de manera automática tu página web en WordPress con el tema que desees (en nuestro caso LongSocial) con un solo clic. Sin complicaciones, y además te carga el contenido por defecto a fin de que tengas la instalación igual a las demos que has podido ver ya antes sin que debas hacer nada.

OCTI.io
OCTI.io nos crea una web en WordPress con un solo clic, con el tema que hayamos seleccionado, y con el contenido ya listo.

El servicio también incluye copias de seguridad y la posibilidad de hacer una copia de tu web completa (staging área) para trabajar en ella sin afectar a la página web que tienes en vivo. Una vez hechos los cambios que quieras en tu copia, los puedes pasar a producción sencillamente. Vamos, que OCTI.io te integra hosting, tema y nombre de dominio, a fin de que cualquiera sin conocimientos técnicos pueda lanzar su página web con un par de clicks.

Pantalla de gestión de OCTI.io
Pantalla de gestión de OCTI.io

Gracias a Pancho P., entre los miembros de treinta y tres Themes y últimamente entrevistado como WProfesional del Mes, puedes conseguir LongSocial por solo quince€ utilizando el cupón longsocial-wprincipiante-offer. El cupón es válido para las diez primeras ventas y hasta el treinta de Diciembre 2015, de este modo que date prisa y aprovecha esta oportunidad.

0 480

¿Debes crear una nueva web?, ¿necesitas volver a diseñar la que tienes? o bien sencillamente, ¿te gustaría mudar el menú de navegación?

En cualquiera de los casos, el diseño de un buen menú de navegación es crucial para lograr una web atrayente y optimizada para la conversión (que tus clientes del servicio hagan aquellas acciones en tu web que tu deseas).

De hecho, en un estudio de Forrester (http://www.usability.gov/) concluyeron que:

  • el cincuenta por ciento de las ventas potenciales se pierden debido a que el visitante de una web no encuentra la información que busca,
  • el 40 por cien de los visitantes a una web nunca vuelve si su primera experiencia ha sido negativa.

Por lo tanto, el tener un menú de navegación efectivo es importante para garantizar la usabilidad y el éxito en el diseño de tu web. Una buena navegación habría de ser intuitiva, fácil de usar y, más importante todavía, debería ayudar a tus visitantes a que hallen el contenido que buscan de forma rápida y fácil. Para asegurar que un menú marcha, la forma más segura es crear tests A/B de menús. Con Nelio A/B Testing es muy simple tal como puedes ver en el vídeo (el vídeo es en inglés mas puedes elegir subtítulos en castellano).

Si tenemos en consideración que cada vez más y más los que te visitan acceden desde móviles, un reto importante del diseño y desarrollo de webs responsive (acomodables) es crear un menú de navegación que funcione para cualquier género de dispositivo. Y es por este motivo que cada vez encontramos más webs que están optando por menús mucho menos dominantes visualmente.

Dmitry Molchanov, en veintidos Principles Of Good Website Navigation and Usability describe las características que hay que tomar en consideración al diseñar los menús para lograr una buena navegación en una web.

  1. Perceptible: los elementos (o bien opciones) del menú tienen que estar visualmente separados y simples de hallar.
  2. Simple: no te compliques la vida con ellos ni pretendas hacer nada excepcional.
  3. Consistente: emplear exactamente el mismo modelo de navegación en todas y cada una de las páginas.
  4. Familiar: evita tipos de navegación ignotos. Si tus visitantes ya están familiarizados, más de manera fácil lo hallarán todo.
  5. Claro: haz que cada elemento de menú te lleve precisamente donde indica que te llevará.
  6. Descriptivo: evita utilizar nombres genéricos que sirven para cualquier web como Servicios” o bien Productos”. Seguro que puedes ir más al grano. Como es natural, no reinventes lo que ya sirve para todos.
  7. Conciso: incorporar links a partir de una navegación vertical de tu página principal es considerablemente más conciso que muchos submenus al comienzo.
  8. Interactivo: para cualquier interacción que realice el usuario, asegúrate de que se le da alguna indicación o bien respuesta que facilita la siguiente acción que debería realizar.
  9. Ordenado: en un menú horizontal, pon los elementos más esenciales en los extremos y los menos importantes en el medio. La posición estándar de Contacto” es a la derecha.

    Los psicólogos le llaman
    Los psicólogos le llaman efecto de posición serial”, y se basa en los principios de primacia y recencia (novedad)

  10. Con estilo: cada vez más, la tendencia es ser minimalista y muchos diseñadores optan por facilitar la navegación a la mínima expresión.
  11. Estructurado: la navegación es una parte de la arquitectura de tu página web, debería planearse.
  12. Accesible: la mayoría de los CSS de menús son técnicamente accesibles, mas cerciórate de que la navegación funciona bien para:
    • todos los navegadores, incluyendo antiguos,
    • dispositivos móviles,
    • navegadores con Javascript deshabilitado,
    • dispositivos sin ratón,
    • usuarios con contrariedades en lectura de textos.
  13. Enlazado: cerciórate de que todos y cada uno de los elementos de menús tienen un link al que se puede hacer un click.
  14. Silenciado: ni se te ocurra ponerle sonido toda vez que alguien hace un click a un elemento de menú.
  15. Poco profundo: no desbordes con información. Cualquier página de tu página web debería ser alcanzable con máximo tres clicks.
  16. Visual: ayuda a tus visitantes con elementos visuales simples de interpretar (emplea los estándares).
  17. Adaptable: obviamente, tu menú debe ser acomodable (adaptable) a todo género de dispositivos.
  18. Continuado: un menú desplegable se ha de ver continuo y sin cortes.
  19. Animado: los efectos de transición logran un efecto considerablemente más agradable y llamativo en cualquier web.
  20. Fijo: el menú debería aparecer en un lugar fijo y no desaparecer al hacer scroll.
  21. Escalable: cerciórate de que es fácil hacer cambios y incorporar elementos al menú cuando sea necesario.
  22. Testeado: prueba el menú con gente habituada a internet mas que no sean especialistas en diseño. Te puedes llevar sorpresas al ver cómo navegan.

Estos principios te pueden asistir a tener unos menús bien diseñados y, personalmente opino que es bueno tenerlos en cuenta. Mas lo cierto es que puedes localizar muchas webs que no los prosiguen y obtienen unos resultados increíbles. Si bien eso sí, probablemente los han creado grandes diseñadores.

A continuación una muestra de menús de WordPress variados que espero te puedan servir de inspiración para el tuyo.

Los ejemplos de menús que muestro ahora han sido seleccionados de las próximas entradas:

Eso sí, me he asegurado de que todos y cada uno de los ejemplos son de webs en WordPress.

El orden por el que se muestran es alfabético. Y un detalle importante: en algunos, la captura de pantalla del menú puede parecer muy normal, pero lo he seleccionado no tanto por el estilo del menú, sino más bien por el efecto de navegación que tiene. Y claro, eso en una atrapa de la página no se puede ver. Por ende, te invito a que hagas click en los backlinks de cada una para que visites sus webs y puedes gozar de los efectos que logran.

And Culture menu screen shot
Captura de pantalla del menú de And Culture
Awesem menu screenshot
Captura de pantalla del menú de Awesem
Bengtsson&Bengtsson menu screenshot
Captura de pantalla del menú de Bengtsson&Bengtsson
Big Eye Agency menu screenshot
Captura de pantalla del menú de Big Eye Agency
Coulee Creative menu screenshot
Captura de pantalla del menú de Coulee Creative
Curt's Special Recipe menu screenshot
Captura de pantalla del menú de Curt’s Special Recipe
Galpin Induestries menu screenshot
Captura de pantalla del menú de Galpin Induestries
Grain&Mortar menu screenshot
Captura de pantalla del menú de Grain&Mortar
Info grafix lab menu screenshot
Captura de pantalla del menú Infografixlab
The Japan Times menu screenshot
Captura de pantalla del menú de The Japan Times
John Sardine menu screenshot
Captura de pantalla del menú de John Sardine
Long Story Short menu screenshot
Captura de pantalla del menú de Long Story Short menu screenshot
LBVD menu screenshot
Captura de pantalla del menú de LBVD
Made by Vadim menu screenshot
Captura de pantalla del menú de Made by Vadim
Marketplace menu screenshot
Captura de pantalla del menú de Marketplace
Marketing Week menu screenshot
Captura de pantalla del menú de Marketing Week
Matter of Form menu screenshot
Captura de pantalla del menú de Matter of Form
nGen Works menu screenshot
Captura de pantalla del menú de nGen Works
Paid to Exists menu screenshot
Captura de pantalla del menú de Paid to Exists
piano menu screenshot
Captura de pantalla del menú de piano
Proweb design menu screenshot
Captura de pantalla del menú de Proweb Design
Racket menu screenshot
Captura de pantalla del menú de Racket
Rokivo menu screenshot
Captura de pantalla del menú de Rokivo
Rudalov menu screenshot
Captura de pantalla del menú Rudalov
Sparked menu screenshot
Captura de pantalla del menú de Sparked
Standford Arts menu screenshot
Captura de pantalla del menú de Standford Arts
StudioPress menu screenshot
Captura de pantalla del menú de StudioPress
ThemeTrust menu screenshot
Captura de pantalla del menú de ThemeTrust
Uber menu screenshot
Captura de pantalla del menú de Uber
Web Design Ledger menu screenshot
Captura de pantalla del menú de Web Design Ledger
wedge&lever menu screenshot
Captura de pantalla del menú de wedge&lever
WPEngine menu screenshot
Captura de pantalla del menú de WPEngine
Zinio menu screenshot
Captura de pantalla del menú de Zinio

Y si aun necesitas más inspiración, te invito a que eches una ojeada a un buen artículo de Web Design Tunes que describe con detalle 35 Premium Web Navigation Menus.

Ahora ya no tienes excusa para no tener un enorme menú en tu página web. Mas sobre todo recuerda, no te olvides de testearlos con tus visitantes y crear alteraciones de menú con Nelio A/B Testing :-)

Imagen destacada: menú que presento Pop-Up Restaurante en el 3D PrintShow.

0 424

En este artículo veremos de qué manera podemos usar WordPress para crear aplicaciones web. Crearemos una aplicación que consiste en una encuesta con una pregunta y 2 respuestas para escoger.

Aquí podeis ver la aplicación:
http://wp.dinamiko.com/demos/encuesta

La aplicación la encapsulamos en un complemento, así la vamos a poder volver a usar en otros proyectos. Si os interesa descargaros el código, he preparado un proyecto en Github.

Es aconsejable planear la aplicación ya antes de iniciar a picar código, acá teneis los layouts front-end y backend de la aplicación.

Front-end
layout_frontend

Backend
layout_backend

A continuación vamos a ir comentando las partes que componen la aplicación:

  1. Modelo de datos
  2. Backend
  3. Front-end
  4. Ajax
  5. Validación de datos
  6. Crear registro en la base de datos
  7. Mostrar los datos en el front-end

1. Modelo de datos

Antes que nada es esencial examinar los datos de la aplicación, qué se va a guardar en la base de datos y cómo vamos a usar esos datos.

Dependiendo de los datos y funcionalidad de la aplicación veremos si podemos emplear funcionalidad nativa de WordPress, por ejemplo: custom artículo types, users…

En nuestro caso vamos a usar la próxima funcionalidad de WordPress:

El modelo de datos de nuestra aplicación:

  • id mediumint(9)
  • time datetime
  • respuesta VARCHAR(treinta)
  • email VARCHAR(cien)

Una vez tenemos definido el modelo de datos de la aplicación, vamos a crear una tabla en la base de datos de WordPress.

Información detallada aquí

Los 3 pasos básicos para crear una tabla en la base de datos son:

  1. Escribir la función que crea la tabla.
  2. Llamar a esta función cuando se activa el plugin.
  3. Crear una función de actualización para poder alterar la tabla en futuras versiones del plugin.

La función que crea la tabla en la base de datos:

Al activarse el complemento llamamos a la función que crea la tabla utilizando register_activation_hook:

La función que verifica si ha cambiado la base de datos:

Todas las incesantes (ENCUESTA_VERSION, ENCUESTA_BBDD_VERSION, …) las definimos en el fichero encuesta/encuesta.php.

Con esto ya tenemos incorporado que cuando se active el complemento nos cree la tabla en la de datos.

estructura_tabla

2. Backend

Vamos a crear la interfaz del administrador de la aplicación, para ello haremos empleo de 2 archivos: encuesta-table.php y class-encuesta-list-table.php

encuesta-table.php crea el menu en el adminstrador y carga la clase Encuesta_List_Table que crea la interface extendiendo la clase WP_List_Table.

Las 2 funciones esenciales en la clase Encuesta_List_Table son get_columns() donde definimos qué columnas mostrar y display_rows() que imprime las columnas.

Para verlo en funcionamiento podemos crear ciertos registros manualmente en la base de datos:
registros_list_table

3. Frontend

Para imprimir la aplicación en el tema vamos a emplear el shortcode [encuesta].

Este shortcode se imprime utilizando la clase Encuesta_Template_Loader, de esta manera es posible modificar la plantilla copiándola en la raíz en el tema en un directorio llamado encuesta por si queremos alterarla y que no afecte a futuras actualizaciones del plugin.

Aquí vemos la función que crea el shortocode [encuesta]

La plantilla con el formulario (templates/encuesta.php)

Para la validación front-end empleamos la librería jqueryvalidation.org, en nuestro caso necesitamos validar que tanto la respuesta como el correo electrónico no estén vacios y que el email sea válido.

Código validación frontend:

4. Ajax

Ya tenemos hecha la validación frontend, lo próximo que vamos a hacer es comunicar el formulario con el servidor, enviándole los valores de los campos del formulario, en este caso, los valores de la respuesta y el correo electrónico.

Para hacer toda la comunicación vamos a utilizar Ajax, lo primero que haremos es crear la variable ajaxurl (includes/encuesta-functions.php) que se marcha a imprimir en la cabecera:

Creamos la función que va a recibir los datos del formulario utilizando wp_ajax_(action):

Aquí la función que envía los datos y recibe la respuesta del servidor:

Si ahora enviamos el formulario, recibimos la respuesta del servidor:
envio_datos_formulario_ajax

5. Validación de datos

Para validar los datos de la aplicación, lo primero que vamos a hacer es agregar un wp_nonce_field al final del formulario.

Este nonce lo empleamos para validar que ciertamente los datos del formulario vienen de nuesto sitios y no de cualquier otro lugar.

Aquí vemos añadido el campo wp_nonce_field:

Añadimos la lógica en la función encuesta_ajax() para contrastar el nonce:

Añadimos validación longitud strings y si correo electrónico es válido:

6. Registro en la base de datos

Antes de crear el registro en la base de datos vamos a sanear los datos que recibimos del formulario utilizando las funciones sanitize_text_field y sanitize_email.

Una vez saneados los datos ya podemos crear el registro utilizando $ wpdb->insert.

Aquí vemos la función completa:

7. Enseñar los datos en el front-end

encuesta_resultados

Creamos el shortcode [encuesta-resultados] para enseñar el total de registros y el total de cada una de las respuestas.

Para obtener los datos vamos a crear dos funciones (includes/encuesta-functions.php):

encuesta_get_registros() que devuelve el total de registros de la tabla:

encuesta_get_registros_respuesta( dólares americanos respuesta ) que devuelve el total de registros del valor que le pasamos al factor dólares americanos respuesta:

Aquí vemos la plantilla que imprime los desenlaces (templates/encuesta-resultados.php):

Bien amigos, con esto concluimos el tutorial, espero que os haya gustado :)

0 432

Continuamos en El WProfesional del Mes entrevistando a profesionales de WordPress que trabajan a diario con nuestro gestor de contenidos preferido. Y este mes de Diciembre (la última del año) le toca el turno a Ibon Azkoitia (entre los nominados de Joan Artés). Aquí tenéis nuestras preguntas y las respuestas de Ibon.

Explícanos un poco tu bio y a qué te dedicas profesionalmente. Haznos un poco de spam. Para los que no te conozcan, coméntanos cuál es tu relación con la comunidad WordPress. ¿De qué manera participas y qué opinas de ella?

¡Hola a todos! Soy Ibon Azkoitia y eminentemente me dedico al diseño y desarrollo de páginas web, especializado en WordPress, bajo el mantón de Kreatidos que fundé en 2013.

En cuanto a la comunidad de WordPress… mi primer evento fue en el WPDay la capital española en Marzo de dos mil catorce. Realmente fue solo el año pasado mas siento que he aprendido mucho y conocido grandes personas en este poco tiempo.

Me encantó la experiencia, el poder aprender, conocer gente del campo y encima fueron unos grandes anfitriones. Fue tanto lo que me agradó, que decidí (con apoyo de la gente en Slack) lanzarme a la aventura de organizar WPBilbao.

He volcado prácticamente toda mi participación de la comunidad en WPBilbao. Decidí organizar 3 Meetups por mes (General, Desarrollo, Negocio) con la idea de que sea cual sea el perfil de la gente (blogger, usuario de WP en el trabajo, desarrollador, diseñador, etcétera), tenga un lugar en este planeta de WordPress. Creo importante no solo el aprender de ponencias, sino asimismo el networking y aprendizaje colectivo.

También intento que la gente participe. Para la elección del logotipo de WPBilbao, por poner un ejemplo, se efectuó un concurso”. Hay gente que graba las ponencias, otros realizan resúmenes de exactamente las mismas o bien traducen al Euskera.

¿Cómo empezaste en WordPress y exactamente en qué instante decidiste emplearlo profesionalmente?

Pues es una muy buena pregunta, puesto que es un tanto especial. Mi vida estaba enfocada en el planeta del motor, vivía en Barcelona tras efectuar un máster de mecánico de competición.

Pero al no haber trabajo, regresé a Bilbao a unas clases remuneradas en el campo de la automoción. Realicé las prácticas en un taller donde, por la crisis, no había mucho trabajo. Con lo que me dediqué a llevarles las Redes Sociales y me lancé a hacerles una página en código HTML.

Era mi primera web para un cliente”, lo poco que sabía de HTML y CSS lo aprendí en casa por iniciativa propia. Recuerdo estar ajustando la ventana poniendo las media query de CSS a mano… jejeje bendito novato :)

Resulta que un familiar del dueño del taller lo vio y me pidió una para él, puesto que la que tenía no le agradaba. Vi que era un WordPress… ¿¿Qué es eso?? y comencé a informarme… y hasta el momento, que prosigo informándome.

¿Cómo haces para estar siempre y en todo momento informado de las últimas novedades sobre WordPress? ¿Qué recursos usas y a quién lees/sigues?

A través de RSS a través de Feedly, no podría vivir sin esta aplicación (o bien semejante). Lo tengo dividido en varios apartados, WordPress Internacional, WordPress España y después una sección para Freelance con los que conseguir consejos y guías para poder dedicarme a esto de WordPress.

También cuento con listas en mi Twitter donde clasifico las cuentas que me resultan de interés. Podéis echarle un ojo por si os sirve.

Y después, como no… Slack. Estar ahí te permite leer y acudir a reuniones” de diferentes equipos y ver de qué forma avanzan y proseguir las novedades.

¿Cuál es el trabajo, desarrollo o bien contribución que hayas hecho con WordPress del que te sientes más orgulloso?

Voy a unir los aspectos de desarrollo y contribución y diría que la página web de WPBilbao. Ahora estamos trabajando en la opción de que cada miembro cuente con un perfil en el sitio web. Acá podrán tener su bio junto con sus trabajos realizados.

También intentaremos que la sección de Aportaciones y Cuentas sea algo más automatizado y transparente (poder adjuntar ficheros, etcétera).

Creo que va a ser un desarrollo/contribución muy enriquecedor tanto para la gente que se anime a desarrollarlo como a los que quieran hacer uso del mismo.

No siempre y en todo momento es posible alcanzar la gloria. Confiésanos algún epic fail” que hayas sufrido relacionado con WordPress.

Los epic fail” en Bilbao no ocurren… Mas hay uno que creo que es bastante común en los inicios: lanzar una web a producción. Todo está perfecto, archivos en su lugar, base de datos preparada, wp-config.php con los datos del alojamiento y… ¡no funciona!

Vueltas y vueltas hasta que te das cuenta de que en la Base de Datos los valores de siteurl y home tienen un bonito inicio de http://localhost .

Desde entonces desarrollo con Virtual Host, esto te deja poder hacer empleo del dominio de forma directa en tu localhost. Es cierto que en ocasiones te mosquea por que no sabes si estás toqueteando” la web de producción o bien la de local.

TIP: con MAMP Pro se puede configurar una conexión HTTPS en tu computador, lo que viene genial para hacer pruebas con Stripe por ejemplo.

¿Diseñas tus propios temas o bien prefieres utilizar temas de terceros? Si los creas tú, ¿cuál es tu tema base o bien framework de creación de temas preferido? Si empleas temas de terceros, ¿dónde y de qué manera los adquieres?

Siempre tenemos que tomar en consideración el proyecto y presupuesto. Para temas de terceros hay muy buena opciones: ThemeForest, Elegant Themes, My Themes Shop (y estoy seguro que tiendas más pequeñas tienen temas de enorme calidad), y de casa tenemos por ejemplo a Silo Creativo.

El problema de los temas premium es que cada uno de ellos funciona de una manera, y en muchas ocasiones esto en lugar de apresurar el trabajo lo retrasa, por no saber como marchan algunas características especiales de los temas.

Respecto a crearlos nosotros, hacemos uso de Genesis Framework de StudioPress. Cuentan con un gran soporte y documentación, y un canal de Slack con ochocientos cuarenta personas en estos instantes. También tienen child themes ya creados que al ser de Genesis todos marchan igual”, y si deseas añadir/quitar algo hace que sea muy sencillo.

Dinos qué complementos son indispensables para ti y cuáles no aconsejarías jamás.

Pues afirmaré ciertos que creo no se han comentado en otras entrevistas y que para mi son muy útiles:

  • Duplicate Post : te permite clonar páginas, entradas, elegir qué datos duplicar… un ahorro de tiempo importante en muchas ocasiones.
  • Advanced Custom Fields : muchas opciones, muy buena documentación, y ya la opción Pro con el Repeater Field y Flexible Content es una maravilla.
  • Gravity Forms : muy sencillo de utilizar con muchas opciones, mas además de esto cuenta con añadidos para conectar a Paypal, Stripe, Mailchimp, Cupones, múltiples CRM, Slack, Dropbox y mucho más.
  • Admin Menu Editor : ordenar el menú a tu gusto (o bien necesidades del cliente del servicio a fin de que no se pierda) arrastrando y soltando, crear espacios, sub-elementos, etc.

Si tuvieses que crear un plugin que no existe o bien que alguna vez precisaste pero no encontraste, ¿qué complemento sería?

Al final es lo de siempre: necesitas una funcionalidad y encuentras varios complementos, todos tienen cosas buenas pero flojean en otras… y entonces te gustaría que todos esos se fusionasen en uno con todo lo que necesitas

No se me ocurre ninguna característica en especial, pero seguro que a los lectores se les ocurran muchas cosas que estaré encantado de ver y probar.

Libre vs Sin costo. ¿Piensas que es posible ganarse la vida con WordPress? ¿Quedan ocasiones de mercado?

Siempre hay oportunidades de mercado, lo importante es que a alguien se le ocurra esa ocasión. Las ocasiones aparecen de las necesidades, ya sean propias o bien de un usuario.

Habrá veces que veamos un patrón de necesidades” y con un complemento en el repositorio por poner un ejemplo sirva. Mas otras veces quizá sea ese negocio que buscábamos, quizá hemos encontrado algo en lo que hay una gran demanda y podemos sacar provecho.

¿Qué consejos darías a un WPrincipiante que desee comenzar con WordPress pero no sabe a dónde asistir ni por dónde iniciar? ¿Algún recurso a aconsejar?

Pues le recomendaría que no dejase de aprender, hay una gran cantidad de weblogs, tutoriales, cursos, etc. sobre todos y cada uno de los temas posibles, incluso buenísimos y gratuitos.

Pero al unísono le aconsejo que busque alguna comunidad de WP cercana y se presente. Ya he puesto mi ejemplo del WPDay la capital de España, creo que fue mi mejor elección acudir a este acontecimiento.

Si con lo que sea no tenéis una comunidad cercana, entrad sin temor al Slack de WPEspaña y preguntar a los que ya organizan una y… ¡Lanzaros a organizar! No hace falta más que ganas de organizar, aprender y conocer gente, con disposición y ganas se pueden hacer muchas cosas.

Y por lo demás… ya lo afirmó Darío Balbontín: lee, escribe, prueba y rompe.

Me gustaría dejaros una lista (sin orden específico) de páginas donde podréis aprender (algunas de pago), no solo de WP, sino más bien asimismo de programación, administración de proyectos, etc.:

¿Cómo ves el futuro de WordPress en 2-tres años? ¿Qué retos van a deber enfrentar los profesionales de WordPress?

Pues retos no sé… pero que viene un gran cambio” sí que lo creo. Me da la sensación de que la REST API va a generar una revolución” en de qué manera se harán las cosas y va a abrir nuevos abanicos de ocasiones.  Creo que la gente que tenga algo de visión, que aprenda bien el uso de la REST API y a de qué forma sacarle provecho, tendrá una gran oportunidad en un mercado que está por comenzar.

Jack Lenox (Automattic) tiene una presentación sobre un tema efectuado con JavaScript y la REST API. Debo confesar que empecé a hacer pruebas entre dos blogs en local y logré enviar un artículo de uno a otro. Después vi esta presentación de Jack y… me da la sensación de que me queda MUCHO por aprender de JavaScript y REST API.

De hecho voy a ir a un evento que se celebra en la ciudad de Londres en Enero sobre REST API, si algún lector va a ir… ¡allí nos veremos!

Si pudieras cambiar una cosa el día de hoy sobre WordPress, ¿cuál sería? ¿Qué crees que le falta a WordPress?

Pues no se me ocurre qué le puede faltar que no se haya dicho ya (Multilenguaje, documentación más afable que el Codex para no técnicos…).

Pero quizás mirando el tema como organizador de Meetups: en la preparación para ser Meetup Oficial coincidimos en exactamente el mismo Hangout con personas de Inglaterra, Grecia, Turquía, USA y Bilbao (sí, Bilbao en lista de países ) y, honestamente, fue una gran experiencia poder escuchar a otra gente y ver de qué forma organizaban las meetups.  Sería genial contar con Hangouts de esta clase, quizás una vez por mes con gente diferente cada vez ¿alguien se imagina cómo organizan las cosas en Japón, Indonesia, Nepal, Korea, Rusia?

Si tuvieses que entrevistar a un desarrollador WordPress para un trabajo, ¿cuál es la primera pregunta que le harías y por qué? ¿Qué perfiles te interesan?

¿Nombre?” Jeje. Pues creo que lo importante, para mí, son las ganas de trabajar y aprender. Me gusta la gente echada hacia adelante, que desee aprender y probar cosas nuevas. Si un trabajador de este ámbito pierde el interés por las nuevas cosas, mal tema.

Debemos ser curiosos siempre y cuando podamos. Tenemos la suerte de contar con herramientas (MAMP, Vagrant, Docker, VM, etcétera que nos dejan probar, probar, probar y probar. Si a esto le añadimos cursos, vídeos, foros, grupos y demás fuentes de información gratuita que hay en internet… ¡vamos a ser imparables!

Por poner un ejemplo, esta semana me ha dado por jugar con los S3 de Amazon para hacer que las imágenes de mi blog se sirvan desde su servidor. Es la primera vez que lo intento/hago, y tengo cosas que progresar. Y creo que este tipo de locuras” (sí en servidor de producción lo hice, valiente de mí) y ganas de saber es lo que pediría.

¿Me he dejado algo? Esta es tu oportunidad para añadir algo que desees que la gente sepa sobre ti y no te hemos preguntado.

Me parece que no te has dejado nada y que bastante lectura hemos dado ya a los lectores

Por último, ¿a qué 3 WProfesionales te agradaría que entrevistáramos acá y por qué?

Lucy Tomas: entre su gran trabajo organizando WPValencia y ahora que trabaja en 10up seguro que tiene mucho para contarnos.

Rocio Valdivia: con todo lo que se mueve, hace y enseña sería perfecto poder escucharla/leerla.

Roberto y M. de Blogalízate: una familia que vive de WordPress, con experiencia y una enorme pareja de quien aprender.

Gracias de nuevo a Ibon por haber admitido nuestra propuesta y atreverse a participar en El WProfesional del Mes. Y a todos y cada uno de los que nos seguís y nos animáis a proseguir con las entrevistas.

Imagen destacada de WPDay Euskadi.

0 325

Hace ya mucho tiempo que WordPress ha dejado de ser una pequeña plataforma de blogging para transformarse en el mayor sistema de administración de contenidos de la página web. Millones de webs están basadas en WordPress y su dominio en Internet es, a día de hoy, aplastante. La versatilidad y robustez de WordPress son 2 de los atributos que lo hacen ideal para prácticamente cualquier clase de proyecto (y ojo con todas y cada una de las novedades que están por venir, como la ya conocidísima API REST).

Ante estos números y perspectivas, no es de extrañar que haya tantísima gente interesada en ganarse la vida con él. Prácticamente cualquier perfil profesional tiene cabida en el planeta WordPress: bloggers, editores, diseñadores gráficos, programadores, freelancers, empresas de hosting… ¡todo el mundo es bienvenido!

Si también quieres hacerte un hueco en el ecosistema de WordPress y tu perfil es técnico (es decir, te resulta interesante aportar tu granito de arena a través de, primordialmente, complementos y temas), estás de suerte. En esta entrada te voy a resumir las herramientas indispensables que vas a precisar en tu día a día. ¿Comenzamos?

#1. El entorno

Lo primero que vas a precisar para poder desarrollar en WordPress es… ¡WordPress! Esto era obvio, ¿no? Para ello, tendrás que instalar la versión estable de WordPress (o bien alguna nightly build de desarrollo, según lo que quieras hacer) en un servidor y comenzar a trabajar en él. Esencialmente, tienes tres opciones para ello:

  1. Contratar un proveedor de hosting.
  2. Instalar WordPress en tu propio computador.
  3. Instalar WordPress en una máquina virtual.

La primera solución es, seguramente, la más fácil. Contratando un distribuidor de hosting que ofrezca WordPress te va a dar (probablemente) todo lo que necesitas para comenzar a desarrollar y no vas a tener ningún problema”: un servidor, una instalación de WordPress, una base de datos, acceso desde cualquier lugar (que para algo está en la nube”), etc.

Por desgracia, siento decirte que lo de no tener problemas” no es enteramente cierto. Cuando te pongas con el desarrollo de tus proyectos estarás de manera continua editando, añadiendo y suprimiendo los diferentes ficheros que los componen, y si tu instalación WordPress es recóndita te vas a ver obligado a acompasar por FTP tu copia local (donde trabajas) con la copia del servidor (donde haces las pruebas y verificas que todo funcione como es debido). Total, que lo que en un comienzo nos ahorraba algo de trabajo, al final se transforma en una pequeña pesadilla.

Desechada, puesto que, la primera opción, es hora de centrarnos en la segunda: tener WordPress corriendo en tu propio ordenador. En WPrincipiante ya hemos hablado sobre de qué manera instalar WordPress desde cero y, si bien es cierto que su instalación no es muy difícil, a mí me parece bastante aburrida y desganada. Hay un montón de cosas que tienes que hacer: instalar un servidor web, instalar un servidor de base de datos, instalar PHP, configurar los dos servidores, instalar WordPress encima de ellos con las credenciales que tocan… Vamos, que te tocará buscar y también instalar los conocidos LAMP (para Linux), MAMP (para Apple) o bien WAMP (para Windows) y cruzar los dedos a fin de que no haya problemas con la instalación o con las actualizaciones que lleguen.

¿Qué nos queda? Pues, efectivamente, la última alternativa que te he planteado: instalar WordPress en una máquina virtual. No te voy a mentir, esta solución asimismo lleva un cierto trabajo, mas en mi entender es la mejor de todas. Para esto, lo único que deberás hacer es instalar y configurar la máquina virtual Varying Vagrant Vagrants (VVV). Esta máquina virtual se apoya en la tecnología Vagrant (cuyo objetivo es ofrecer una forma de empaquetar y repartir ambientes virtuales que sean fáciles de configurar y portar, los que se ejecutan encima de sistemas de virtualización como VirtualBox o bien VMWare) para ofrecer un entorno de desarrollo orientado a WordPress.

Después de instalar e iniciar VVV, vas a tener un WordPress con perfección configurado y operativo sobre el que fundamentar tus desarrollos. Sencillamente accede a http://local.wordpress.dev y… ¡manos a la obra!

Esta solución tiene 3 grandes ventajas:

  1. Trabajas en local. No perderás el tiempo subiendo y bajando archivos de tu ordenador al servidor recóndito donde se ejecuta WordPress.
  2. No llenas tu ordenador de basura. Es fácil que cada vez que instalas una actualización de MySQL o bien PHP, las cosas dejen de marchar o bien que tu computador comience a llenarse con las distintas versiones de todo tu software. Si todo el software preciso para hacer marchar WordPress lo tienes en la máquina virtual, cuando te canses de él, borras la máquina y tu PC queda como nuevo.
  3. Te ahorras el problema de en mi ordenador funciona”. Si trabajas en equipo y todos utilizáis exactamente la misma máquina virtual, no hay duda de que lo que te funcione a ti les funcionará a tus compañeros y viceversa. ¿Por qué razón? Porque todos estáis utilizando exactamente la misma configuración: exactamente el mismo servidor web, exactamente la misma versión de PHP, exactamente la misma versión de WordPress… ¡Es excelente!

#2. Sistema de control de versiones

La segunda herramienta que vas a precisar sí o bien sí en tus labores como desarrollador es un sistema de control de versiones. Los dos sistemas más conocidos para llevar el control de versiones de tu código fuente son SVN y Git. El primero lleva ya bastantes años con nosotros y, en verdad, es el que utiliza el directorio de plugins y temas de WordPress.org. El segundo nació en dos mil cinco con la meta de transformarse en el sistema de control de versiones sobre el que desarrollar Linux, y desde ese momento ha ganado mucha popularidad. En verdad, actualmente Github es una de las plataformas más usadas para desarrollar y compartir proyectos de software libre y, como su nombre señala, emplea Git.

En esencia, los cuatro conceptos básicos que hay cerca de este tipo de herramientas son:

  • Seguridad. El hecho de poder subir nuestro código a un repositorio externo (como los que ofrecen Github o bien Bitbucket) nos resguarda de todo género de desastres. Si le pasara cualquier cosa a nuestro computador, el código estaría a salvo en ese servidor externo y podríamos recuperarlo en cualquier instante.
  • Mantener un registro de cambios. Conforme nuestro proyecto avanza, este va evolucionando y cambiando. Una gran ventaja de los sistemas de control de versiones es que nos da información sobre los cambios concretos que se han hecho sobre cualquier archivo. En otras palabras, vamos a poder ver sencillamente qué líneas se han añadido, cuáles se han eliminado y cuáles se han modificado.
  • Desarrollo distribuido. Otra ventaja de estas herramientas es la posibilidad de trabajar en equipo, permitiendo que múltiples personas contribuyan sobre un mismo repositorio. Seguramente, cada desarrollador de tu equipo va a trabajar en implementar una nueva funcionalidad o corregir un cierto bug, mas al final todo ese trabajo sumará al total del proyecto.
  • Fusión de versiones automática. ¿Te preocupa tener más de una persona tocando” el mismo código? Es normal que te preocupe, en tanto que no es bien difícil imaginar una situación en la que 2 personas han editado exactamente el mismo fichero y, al final, el trabajo de uno pisa” el trabajo del otro. Por fortuna, esto es algo que asimismo está contemplado en Git y SVN, y en la mayor parte de los casos las propias herramientas se ocuparán de solventar de manera automática el inconveniente.

En una entrada precedente expliqué de qué forma podíamos utilizar Git para administrar las copias de seguridad de nuestro WordPress. Si bien es verdad que el objetivo que pretendíamos conseguir era diferente (no es exactamente lo mismo producir copias de seguridad que controlar nuestro código fuente), la esencia es la misma: controlar las diferencias de una versión a otra, tener nuestro trabajo a salvo y poder recuperar/revisar archivos del pasado. Si te la perdiste, te recomiendo que le eches un vistazo, porque vas a poder ver con un tanto más de detalle los conceptos que acabo de mentar.

#3. Editores

Y llegamos al siguiente punto interesante de nuestra lista de hoy: los editores de código. Existen muchos editores y entornos de desarrollo integrados (IDE, por sus iniciales en inglés) con los que programar nuestros complementos y temas. En este punto poco te puedo ayudar, pues la elección de un editor o bien otro depende, en gran medida, de las preferencias de cada uno de ellos. Mas apacible, que no te voy a dejar solo en esta decisión.

Empecemos por ver algunas de las cosas que hay que tener en consideración en el momento de elegir un editor:

  • Soporte básico para PHP, JavaScript y CSS – Sintaxis y autocompletado. Si vas a desarrollar proyectos en WordPress, van a ser proyectos web. Conque es esencial que te familiarices con estas 3 tecnologías y que tu editor te asista con ellos. ¿De qué manera? Pues, básicamente, con el resaltado de sintaxis (palabras clave en un color, variables en otro, cadenas de texto en otro…) y con funciones de autocompletado (para que no te fatigues escribiendo).
  • Soporte avanzado para esos lenguajes. Tanto JavaScript como PHP son lenguajes interpretados (no necesitan ser compilados), con lo cual trabajar con ellos es muy ágil. No obstante, la primordial contraparte que tiene eso es que suele ser más difícil encontrar errores, pues desaparecen los errores que se advierten en tiempo de colección. Afortudamente, hoy día existen herramientas que analizan el código mientras que lo escribes y advierten muchos de estos errores:
    • PHP Lint. Puedes ejecutar PHP en modo lint (php -l), el cual se encargará de validar la sintaxis de tu archivo sin llegar a ejecutarlo.
    • PHP Code Sniffer. Dado un cierto estándar de programación, esta utilidad comprueba hasta qué punto el código fuente que escribes se ajusta a él. De esta manera, por servirnos de un ejemplo, si en WordPress se recomienda que los paréntesis de un if estén separados por espacios, algo como if( dólares americanos var) fallaría, pues no hay ni un solo espacio.
    • PHP Mess Detector. Otra herramienta de mis favoritas. Define un conjunto de reglas auxiliares (y complementarias) a las de Code Sniffer y te informa si tu código no las prosigue. Con esta herramienta, puedes advertir posibles bugs, identificar qué unas partes de tu código son demasiado complejas o descubrir partes sin usar.
  • Funcionalidades extra. Poder editar más de un archivo al unísono, saltar de la invocación de una función al archivo donde se define, poder refactorizar el código de manera rápida, definición y empleo de snippets de código para ahorrarnos repeticiones… Todas y cada una estas pequeñas cosas que utilizamos a diario pueden (y deberían) formar parte del editor que escojas. Si bien la curva de aprendizaje inicial pueda resultar un poco más dura, con el tiempo merecerá la pena.

¿Y qué editores incluyen este tipo de funcionalidades? Pues el abanico es bastante amplio y, como te decía, es algo que depende de cada uno… conque solamente voy a mencionar un par:

  • PhpStorm. Una auténtica pasada. En un caso así, se trata de un entorno de desarrollo integrado que incluye todas las funcionalidades que te he explicado y más. Debo reconocer que no lo he usado demasiado, mas lo poco que he utilizado me ha encantado. Por si fuera poco, es capaz de detectar cuando trabajas en un proyecto WordPress y adaptarse a las necesidades específicas de la plataforma.
  • Sublime. Un editor de texto muy elegante y eficiente. Sin barras de herramientas ni diálogos de configuración, invita a ser utilizado desde el primer instante. Cuando empiezas, es poco más que el típico Bloc de notas de un Windows, pero conforme tus necesidades aumentan, podrás llenarlo con plugins, trucos de autocompletado, atajos de teclado… un lujo para los techies modernos, aunque me quedo con el veterano vim.

#4. Recursos de desarrollo

WordPress tiene una comunidad de desarrolladores enorme detrás y eso se hace en especial plausible cuando uno empieza con sus desarrollos. En seguida te percatarás de que existen un montón de recursos orientados a ayudarte. Aquí tienes algunos ejemplos:

  1. Plugin Boilerplate. En WPrincipiante te contamos las nociones básicas que precisas tener para la creación de plugins. Entre las cosas que vimos fue este proyecto, que pretende servir como esqueleto sobre el que montar tu propio trabajo. Imprescindible echarle un vistazo (o, si lo prefieres, utiliza la modificación en la que estoy trabajando ).
  2. Less, Sass y CSSnext. ¿De qué manera puedes escribir mejores hojas de estilo? Simple, ayudándote de (alguna de) estas extensiones para edificar tus ficheros CSS. Las dos primeras herramientas son preprocesadores que, cada uno de ellos con su propia sintaxis, te permitirán acotar variables, anidar reglas, operaciones, manipular colores, etc. CSSnext es parecido, mas en lugar de montarse su sintaxis usa construcciones del (próximo) estándar CSS, de tal manera que no debes aprender un lenguaje nuevo”, sino más bien utilizar la próxima versión del que ya conoces”. En todo caso, herramientas todas ellas muy aconsejables.
  3. PhpMyAdmin. Es inevitable: cuando te pones a manipular WordPress, en seguida descubrirás que tienes que preguntar de qué manera están las cosas en la base de datos. Preguntas como ¿Se ha guardado bien este valor?” o ¿De qué forma me cargo esta alternativa y vuelvo a comenzar?” tienen su respuesta en la base de datos, así que ten algún programa a mano para acceder a ella y manipularla.
  4. WP-Pretty Debug. Cuando empiezan a salir inconvenientes con el código, es esencial hallar rápidamente que pasa. Y lo normal es ayudarse de pequeños chivatos en el código (a través de llamadas como var_dump). Por desgracia, estas llamadas, al renderizarse en el HTML de tu web, no son demasiado inteligibles. Con esta herramienta conseguirás hacerlo. Consejo PRO. Si utilizas VVV puedes entrar en la máquina virtual (con el comando vagrant ssh) y activar un debug bonito (xdebug_on)
  5. Plugins de Debug. Ciertos plugins de WordPress que deberías tener instalados y (cuando los necesites) activados son:
    1. Debug Bar Esta barra agrega información muy útil en tu escritorio, como por ejemplo el uso de cache, el total de queries, el tiempo de ejecución o la memoria utilizada.
    2. Theme Check Si te dedicas a la creación de temas, úsalo para verificar la calidad de tu trabajo. El equipo de revisión de temas de WordPress.org lo emplean para validar o bien rechazar un tema, con lo que tenlo cerca.
    3. P3 (Complemento Performance Profiler) Otro plugin que te ayuda a examinar el rendimiento de los plugins que tienes en tu WordPress y ver el impacto que tienen. Complicado pero muy potente.
    4. User Switching Te deja saltar de un usuario a otro sin tener que estar introduciendo usuarios y claves de acceso continuamente. Realmente útil si estás desarrollando una extensión cuyas funcionalidades dependen del rol del usuario.
    5. Simply Show IDs Si ya antes te decía que es bastante frecuente consultar la base de datos, considera que lo normal es hacerlo mediante los identificadores (el ID de una entrada, de una página, de un comentario…). Esta extensión hace explícitos todos esos identificadores, ahorrándote unos segundos de tu tiempo.
  6. Extensiones del navegador. Asimismo puedes instalar algunas extensiones en tu navegador que complementen la información que tienes de los plugins de debug:
    1. Herramientas de Desarrollador de Mozilla Firefox y Chrome Los 2 navegadores web principales disponen de un conjunto de herramientas de desarrollador para, por poner un ejemplo, editar el HTML y las hojas de estilo CSS de un sitios cualquiera o ejecutar sentencias JavaScript.
    2. MeasureIt . Una fácil y potente herramienta que te ayuda a medir la distancia que existe entre diferentes elementos en tu web. Indudablemente, un enorme aliado para cualquier diseñador de temas o responsable de la experiencia de usuario.
    3. WordPress Admin Bar Control . Si la barra de administración de WordPress te molesta mientras trabajas en alguna funcionalidad del front-end, instala esta extensión y vas a poder ocultarla cuando quieras.
    4. WPSniffer . Detecta el tema activo en la instalación de WordPress actual y el hosting que está utilizando. En especial interesante cuando, navegando por la web, hallas una página que te agrada y deseas saber qué tema emplea.

#5. Control de Calidad y Testing

Finalmente, me gustaría llenar la lista de hoy con algo que, por desgracia, casi absolutamente nadie incluye en sus desarrollos: el control de calidad y tests automatizados. La calidad de tu trabajo es vital si no quieres tirar por los suelos tu reputación. Y es que no hay nada peor que subir una nueva versión de tu plugin o bien tema al repositorio de WordPress y que sean tus usuarios quienes descubran que no funciona.

El ciclo de desarrollo de software es más o menos así:

  1. Tienes un conjunto de requisitos/funcionalidades que hay que incorporar.
  2. Escribes un poco de código para solventar una de esas funcionalidades.
  3. Lo pruebas.
  4. Si falla, procuras corregirlo y repites el paso 3.
  5. Cuando ya marcha, iteras sobre los pasos dos, 3 y cuatro hasta que tengas listos todos los requisitos.
  6. Pruebas que todo funcione como es debido y que no se haya roto nada.
  7. Subes el plugin a WordPress.org
  8. Y… ¿bug?

Es evidente que conforme tus proyectos van creciendo en tamaño y dificultad, es más y más fácil que un pequeño cambio en el código acabe rompiendo algo de forma inopinada. Y tener que comprobar manualmente que todas y cada una de las opciones de tu plugin continúan funcionando correctamente es imposible. ¿De qué forma puedes hacerlo mejor? ¡Con tests automáticos!

Un test automático es un pequeño código que comprueba que una cierta parte de tu programa funciona como se espera sin que tú debas hacer nada. Si generas suficientes tests como para contrastar todo tu plugin, vas a tener las espaldas bien cubiertas. Los tests suelen tener tres fases:

  1. Configuración. Preparas el entorno para que el estado inicial siempre y en todo momento sea exactamente el mismo (por poner un ejemplo, cargar una imitación de la base de datos donde solo hay una entrada en WordPress con un cierto título y un cierto ID).
  2. Actuar. Efectúas ciertas acciones para alterar el estado inicial (añadir una entrada, cambiar el título de otra, suprimir un comentario… lo que sea).
  3. Comprobar. Por último, verificas que el desenlace de las acciones efectuadas se corresponde con el resultado que aguardabas. De esta forma, por poner un ejemplo, si partías de un estado en que había una única entrada en tu weblog y la has borrado, el estado final debería ser que no existe ninguna entrada.

Para poder efectuar tests automáticos te invito a una herramienta llamada Codeception. Codeception es un framework PHP de testing que te permite crear y ejecutar un montón de tests de diferente tipo. Si quieres saber más sobre esta herramienta y cómo emplearla en WordPress, estate atento por el hecho de que pronto vamos a escribir una entrada sobre ella.

En definitiva…

El mundo del desarrollo WordPress es amplísimo. Existen multitud de herramientas y recursos que nos ayudarán y, al final, cada uno tiene que descubrir cuáles encajan mejor con su forma de trabajar. El día de hoy hemos visto varios ejemplos que, espero, te asistan en tu vida profesional. Y si ya eres un desarrollador experimentado de WordPress, dinos: ¿qué herramientas utilizas ? ¿Nos hemos olvidado de alguna esencial?

Imagen destacada de Moyan Brenn.

0 286

Si eres un ávido lector de contenidos en Internet, estoy convencido de que habrás visto que últimamente en muchas páginas te muestran estimaciones del tiempo que vas a precisar para leer sus artículos. Si esto te parece interesante y te gustaría añadirlo en tu web, estás de suerte en tanto que te explicaré cómo mostrar el tiempo de lectura de tus entradas en WordPress.

De media podemos leer de 200 a trescientos palabras por minuto

Lo primero que vamos a precisar para poder medir el tiempo que nuestros visitantes van a precisar para leer nuestras entradas es una métrica simple: el PPM, o cuántas palabras (de media) es capaz de leer en un minuto un adulto. Y la respuesta la podemos localizar directamente en la Wikipedia:

Adultos educados pueden leer a una velocidad de cerca de doscientos-trescientos ppm, a lo mucho cuatrocientos ppm para una buena comprensión. Investigadores han demostrado que una velocidad de 600 ppm puede lograr un entendimiento del 70 por cien , y un cincuenta por ciento de entendimiento a dos mil ppm.

Con esta métrica y con el recuento del número de palabras que tiene una entrada concretamente podremos conocer, mediante una simple división (y sin ser maestros de las matemáticas), una estimación del tiempo de lectura de nuestras entradas.

Por ejemplo, si escogemos una velocidad de 250 PPM y nuestra entrada tiene unas 1.500 palabras, estimamos que un adulto medio tardará 6 minutos en leerla (1.500 palabras dividido por 250 PPM).

Este mismo cálculo es el que utilizan las webs que muestran la estimación del tiempo de lectura. Si aguardabas algo más espectacular que una simple división, siento decepcionarte

El tiempo de lectura de tus entradas en WordPress

Para poder enseñar esta información en tus entradas en WordPress tenemos varias opciones. La más sencilla es directamente ir en pos de un complemento que nos sirva. Para ahorrarte trabajo he mirado los que puedes localizar en el directorio de WordPress. Estos son los desenlaces del análisis de los tres complementos más usados en el momento de redactar esta entrada:

Cualquiera de estos complementos te va a servir, en tanto que su funcionamiento es prácticamente idéntico. Y si quieres aprender de qué forma desarrollar complementos con WordPress, son un buen ejemplo con el que comenzar a estudiar, ya que el código que incluyen es muy fácil de entender y cortísimo. Ideal para WPrincipiantes.

Y si lo que quieres es directamente meterlo en tu tema sin usar complementos, puedes emplear la función que te dejo a continuación:

No tengas temor de probarla y meterla en tu tema. La función sencillamente consigue el contenido de una entrada, cuenta cuantas palabras hay y divide por el PPM que hayas indicado. A partir de ahí, edifica una frase con los minutos y segundos que va a tardar el visitante medio en leer la entrada.

Mostrar la estimación puede ser un arma de doble filo

Aunque puede parecer bien interesante ver el tiempo que tardarás en leer la entrada, es posible que aquellos más vagos/ocupados del lugar piensen que dedicar esos minutos a leerla no merezca la pena, prefiriendo ocuparse con otras labores y sin leer tu texto.

Por un lado, mostrar esta información puede proporcionar para atraer más lectores y aumentar el tiempo que pasan en tu página. Pero por otro, puede tener el efecto contrario. Lo mejor, como siempre y en toda circunstancia, es que lo pruebes. Si logras mejorar los resultados actuales, eso que has ganado. Y si, al contrario, pierdes lectores, solo debes quitarlo de tu web y quizá explicar tu experiencia para que todos aprendamos

Imagen señalada de zoutedrop.

0 421

Hace unos días asistí a entre las meetups que organiza la comunidad WordPress de Barcelona y hablamos de un tema muy interesante: de qué forma hacer dinero con tu WordPress. Ángel Ayach compartió su experiencia a la hora de explotar comercialmente una web como ActualApp y cubrió algunas de las opciones que tenemos a nuestro alcance para esto. Indudablemente, un tema que merece ser repasado en WPrincipiante, ¿no crees?

Está claro que conseguir dinero no es fácil. Si lo fuera, todo el planeta sería rico, ¿no? Mas eso no desea decir que sea imposible. Si tienes un weblog personal o bien algún género de web, o te estás proponiendo iniciar uno, te gustará saber que puedes sacarle desempeño fácilmente”. Pero, ¿de qué forma lo hacemos?

Monetizar una web cualquiera consiste en, esencialmente, lograr monetizar su tráfico. En la entrada de el día de hoy te voy a explicar ciertas opciones que tienes para hacerlo. Como de lo que acá se trata es de explotar comercialmente tu tráfico, no cabe duda de que cuánto mayor sea este, mayor serán tus ingresos. Conque el primer problema que deberás afrontar es acrecentar el número de visitantes que llegan a tu página web. Para esto, vas a deber trabajar el posicionamiento SEO de tu web y optimar tu sitio para aquellas palabras clave que son relevantes en tu nicho. Asimismo vas a deber generar contenido de calidad y continuar un buen planteamiento de marketing digital, compartiendo todo lo que hagas por las redes sociales y promocionándolo de diferentes formas. Cuanto mayor tráfico logres, más posibilidades de aumentar tus ingresos tendrás.

Todo este trabajo previo” te llevará bastante tiempo: son cuestiones que hay que trabajar día a día y, habitualmente, sus efectos no serán visibles hasta pasado un cierto tiempo. Mas tranquilo, no es preciso aguardar a tener muchos visitantes para que tu página web empiece a entregar sus frutos. ¡Veamos cómo!

#1. Google AdSense y otras redes de publicidad

Una red de publicidad online es una empresa que pone en contacto a anunciantes con webs que desean alojar anuncios. En otras palabras, simplemente tienes que delimitar qué áreas de tu página web pueden alojar anuncios y la red de publicidad se encargará de rellenarlas. Las redes de publicidad actúan como mediadores entre el anunciante y tú: son quienes deciden qué anuncios se marchan a mostrar en su página web, quienes se hacen cargo de cobrar a los anunciantes y, si hay suerte, quienes se ocuparán de pagarte a ti por los anuncios que aparezcan en tu web.

Primeros céntimos. Imagen de Pictures of Money
Primeros céntimos. Imagen de Pictures of Money.

¿Cuánto vas a ganar? Puesto que, por desgracia, no lo puedes saber de antemano. Por norma general estas plataformas pagan por click, no por anuncio mostrado. O sea, toda vez que uno de tus visitantes pulse en el backlink del anuncio, tú vas a recibir algo.

Este tipo de publicidad es excelente para webs que acaban de iniciar o con poco tráfico. Si decides iniciar por aquí (y Á. lo aconsejaba en su charla), lo más probable es que te metas en Google AdSense. Probablemente Google AdSense sea la plataforma de publicidad más conocida. Además de todas y cada una de las garantías que supone tener detrás a un gigante como Google gestionando tu publicidad, una de las cosas que a mí más me agradan de Google AdSense es el hecho de que su publicidad es contextual. Esto es, los anuncios que meterán en tu página web están relacionados con la temática de tu web. De este modo logramos 2 cosas: por una parte, los anuncios no desentonan y, por otro lado, es más probable que los visitantes hagan click en ella, puesto que lo que se publicita es de su interés. Y ya sabes: cuantos más clicks, más dinero para ti.

En su charla, Ángel repasó Google AdSense a fondo. En concreto, explicó lo simple que era configurarlo y enlazarlo a tu cuenta de Analytics. El día de hoy no vamos a entrar en detalle sobre de qué manera hacerlo, mas, vaya, incorporar AdSense a tu web pasa por, esencialmente, crear una cuenta en el servicio, esperar a que la aprueben y añadir el código de publicidad en tu página web. Si te resulta interesante, puedes echar un vistazo al siguiente vídeo (así como a esta lista de reproducción relacionada) para aprender un poco más sobre la plataforma:

El consejo más esencial que dio Ángel, y que suscribo completamente, es que te asegures de revisar y cumplir con sus políticas de uso. Ciertos ejemplos de estas políticas son:

  • Clics e impresiones inválidas. No pinches tus backlinks ni busques métodos a fin de que se haga de forma automática.
  • Fomentar clics. No intentes engañar al sistema pidiéndoles a tus usuarios que pinchen en los links. Las visitas deben ser lícitas”.
  • Guías de contenido. No muestres anuncios en páginas cuyo contenido sea para adultos, violento o bien que promueva la intolerancia racial.

Si no cumples con alguna de estas políticas, podrían suspenderte la cuenta. Mejor que no te expongas, por el hecho de que podrías quedar fuera del programa de AdSense para siempre… ¿y qué interés puedes tener en perder una fuente de ingresos?

#2. Links de Afiliado

Dentro de los programas de afiliados, anunciantes como, por ejemplo, Amazon, usan identificadores de afiliado para registrar el origen del tráfico que reciben en su web. Esto, que puede parecer un tanto complicado de comprender, se traduce en lo siguiente: si te suscribes a un programa de afiliados te darán un identificador único. Toda vez que promociones productos de ese anunciante, utilizas tu identificador y, de esta manera, el anunciante va a saber que esa persona que ha comprado algo se la mandaste . Cada vez que uno de los visitantes que envíes a la web del anunciante compre algo, te llevarás un porcentaje de esa venta.

Comparado con las redes de publicidad, los enlaces de afiliado ofrecen mucho más control sobre qué se promociona en tu web y de qué manera, puesto que, a fin de cuentas, eres quien decide cuándo agrega el enlace a la página web del anunciante. Por poner un ejemplo, puedes meter los links en el propio cuerpo de tus entradas, o puedes emplear una imagen en un widget que tengas en la barra lateral de tu blog y hacerla clicable con ese link.

Finalmente, hay otra diferencia importante entre ambas soluciones. Aunque en las redes de publicidad te llevas algún céntimo cuando el usuario hace clic en un enlace, los enlaces de referido te darán tu comisión cuando se produzca una venta. Como te puedes imaginar, es más fácil que un usuario pinche en un backlink a que acabe verdaderamente comprando algo, pero los beneficios de pinchar un link son considerablemente más pequeños, generalmente, que el porcentaje que te llevas de una venta. Fuere como fuere, los dos métodos se complementan de forma perfecta bien, con lo que no renuncies a ninguno

#3. Publicidad Directa

A medida que tu weblog va ganando popularidad comienzan a pasar cosas entretenidas. De repente, descubrirás que hay gente del campo que te contacta porque desea promocionar su trabajo en tu web. Y esto es ya otro nivel, ¿eh? Si lo administras bien, podrás garantizar una entrada de dinero continua y, probablemente, mayor que la que están produciendo las dos soluciones que acabamos de ver.

Publicidad en Times Square. ¡Casi nada! Imagen de Andy
Publicidad en Times Square. ¡Prácticamente nada! Imagen de Andy.

No obstante, lograr este género de publicidad es más complicado. Por un lado, partimos de la base que la gente te va a contactar, cosa que ya de por sí es bien difícil. Por otro lado, aunque decidas tomar cartas en el tema y seas mismo el que les procures, vas a deber convencerles de que tu página web es buen lugar donde anunciarse. ¿Qué quiere decir eso? Pues, básicamente, deberás mostrarles información sobre los visitantes únicos que tienes por mes (para garantizarles” una cierta visibilidad a sus anuncios) o bien, si tienes la suerte de que ya ha habido otras empresas que se han anunciado, mostrarles los ratios de conversión que han tenido campañas anteriores.

Complicado, lo sé, mas no imposible

#4. Contenido Para Miembros

Otra opción que puedes proponerte una vez has logrado una masa de lectores leal es cobrarles por acceder a tu contenido. Esta alternativa no agrada a todos y cada uno de los editores, mas está a la orden del día (piensa en los medios de prensa tradicionales). En lo que se refiere a los lectores, si verdaderamente les gusta lo que escribes y les aporta algún género de valor, no tengo ninguna duda de que desearán pagar. Sin embargo, siempre habrá alguna oveja negra que se vaya pues no desea pagar las nuevas tasas.

En cualquier caso, si optas por esta solución en algún momento, la flexibilidad que tienes sobre qué cobras y qué ofreces sin coste y en qué momento lo haces es muy grande. Por ejemplo, puedes decidir que tu contenido más nuevo es siempre gratis y que lo que cuesta pasta es acceder a la hemeroteca. O bien del revés, pasado un cierto tiempo, todo el contenido es sin coste, pero la novedad se paga.

#5. Otras Opciones

Finalmente, hay otros canales que debes explorar y explotar, puesto que pueden generar ingresos extra. Por poner un ejemplo, puedes crear un canal de YouTube donde compartas vídeos que traten temas similares a los que se discuten en tu weblog y meter publicidad allá. Si bien puede parecer trabajo extra que no aporta demasiado, me agrada verlo de este modo: preparo un vídeo en YouTube y, ahora, una entrada donde pongo por escrito lo que se discute en el vídeo, así como el link al vídeo en cuestión. ¡De esta forma explotas una misma nueva desde diferentes plataformas!

Otra opción es meter anuncios o enlaces de referido en tus newsletter. Normalmente, los usuarios prestan más atención a una boletín de noticias a la que se han subscrito que a una web en la que sencillamente están cotilleando, con lo que meter allá publicidad inteligente (procura no caer en el spam) puede ser muy efectivo.

¡Mas es que las opciones no terminan ahí! Si consigues establecerte como un experto en tu área, puedes hacer cosas como entregar charlas y conferencias, montar webinars o incluso escribir algún e-book 

Resumiendo

He comenzado diciendo que ganar pasta no es fácil. Probablemente, hubiese sido más atinado decir que ganar mucha pasta no es fácil porque, sé sincero, ¿te semeja difícil sacar algo de tu web? Ahora ya conoces diferentes fórmulas para monetizar tu web y, lo mejor de todo, funcionan para todo tipo de tráfico: desde webs pequeñas y poco visitadas hasta sitios referentes en el sector.

Espero que la entrada de hoy te haya gustado. Y si te animas a incorporar alguna de estas opciones en tu página web, no olvides compartir tu experiencia con el resto WPrincipiantes :-)

Imagen destacada de Images Money.

ARTÍCULOS ALEATORIOS

0 584
Éste tutorial está indicado para los que están empezando en éste mundo y no tienen clarísimo por dónde empezar. Para sacarle mayor provecho al tutorial...