Timber by EMSIEN-3 LTD
Authors Posts by Juan D.

Juan D.

83 POSTS 0 COMMENTS

0 573

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 523

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 544

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 533

¿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 458

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 546

 

Hace ya un par de semanas desde el momento en que Microsoft lanzó el aguardado Windows Server 2012 y por acá incluso ya vimos ciertas novedades de este nuevo sistema operativo para servidores. Ahora poco a poco más empresas de hosting están empezado a adoptarlo, y una de estas es HostGee, una división de Gulf InfoNet Est.

Los nuevos planes que ha lanzado HostGee se enfocan en servidores VPS con sistema operativo Windows Server 2012, desarrollados en la existente plataforma Hyper-V Server 2008 R2 de Microsoft.

El director de la oficina de marketing de HostGee dijo que nuestros clientes siempre y en todo momento están en pos de las mejores y más recientes soluciones para sus VPS. Al ofrece WS 2012 tan poco tiempo una vez que sea lanzado, le ofrecemos a los clientes del servicio una buena opción alternativa frente a lo que ofrece la competencia para que puedan tomar total ventaja de lo que ofrece esta nueva plataforma”.

Más información | The Alojamiento web News

Otros artículos interesantes:

0 477

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 369

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 335

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 474

Ya está cerca la posibilidad de emplear font-display en nuestra declaración de @font-face. Chrome Canary ya lo incluye por lo que en escaso tiempo lo vamos a tener disponible en Google Chrome.

Utilidad de font-display

Como sabéis, cuando usamos una fuente mediante @font-face el navegador no nos enseña nada hasta que la fuente está disponible (comportamiento por defecto en Chrome, Mozilla Firefox y Safari). Esto hace que a veces veamos un molesto hueco blanco durante unas décimas de segundo ya antes de enseñar el texto.

Con font-display vamos a poder tener otras opciones alternativas disponibles, como por servirnos de un ejemplo mostrar los textos en una fuente opción alternativa mientras se carga la fuente definitiva.

Podéis ver la especificación completa aquí: http://tabatkins.github.io/specs/css-font-display/.

Utilizando font-display

Ahora que sabemos por qué razón será tan útil font-display veamos de qué manera se marcha a usar:

Como veis en el ejemplo font-display acepta un valor, en este caso auto. A continuación os detallo cada opción y para qué exactamente sirve:

  • auto: Si ponemos auto” dejamos que sea el navegador el que escoja la estrategia a proseguir. Muchos navegadores usarán la opción de bloquear, que es la que nos ofrece block” (más adelante).
  • block: El navegador dibuja un texto invisible” en primer lugar hasta que carga la fuente.
  • swap: El navegador dibuja el texto de manera inmediata con una fuente por defecto si el font face no se ha cargado y la reemplaza tan pronto como se haya cargado.
  • fallback: El texto se muestra primero con una fuente por defecto y se cambia tan pronto como la fuente definitiva se ha cargado. No obstante, si pasa un buen tiempo y aún no se ha cargado, deja definitivamente la fuente por defecto.
  • optional: La fuente se emplea si está ya descargada y libre. Si no fuera de esta manera se usará la fuente por defecto de manera definitiva. La fuente se va a poder descargar por detrás para que esté libre en futuras cargas de la página, pero si el navegador detecta que el usuario tiene un ancho de banda limitado podrá seleccionar no descargarla.

Importante: Todo esto puede cambiar antes que aparezca de forma terminante en todos y cada uno de los navegadores. Voy a ir añadiendo acá los cambios.

ARTÍCULOS ALEATORIOS

0 651
É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...