Blog personal de IT, viajes y otros hobbies

Etiqueta: PHP

Patrones con expresiones regulares en php y WordPress

Expresiones Regulares en PHP – La Guía definitiva

Tal como lo indica el título del artículo estamos buscando patrones pero de caracteres y dentro de un texto o cadena (string). Para ello usamos las expresiones regulares, tecnología presente en varios lenguajes de programación (PHP, Javascript, Phyton, Perl) que mediante una concatenación estructurada de caracteres nos permite moldear una fórmula o patrón para aplicar a un texto determinado y encontrar así las secuencias.

Cada vez que tengo que trabajar con ellos me veo con sentimientos encontrados. Por un parte  sufro un poco ya que su sintaxis es muy compleja y difícil de memorizar, pero por otra parte me maravillo por todo lo que podemos hacer con un par de líneas de código.

Por ejemplo: Muchas plataformas no permiten que los usuarios envíen sus direcciones de correo electrónico en los mensajes que intercambian. Para ello cada mensaje pasa por un filtro de expresiones regulares. Aplicando el regexp (acrónimo de Regular Expressions) /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}\b/ podemos detectar estos caracteres tal como lo muestra la siguiente imagen:

ejemplo de expresiones regulares
Ejemplo visual que iremos viendo a lo largo del artículo

Sintaxis

A modo de ejemplo, y para que luego lo podamos utilizar en nuestro WordPress, vamos a utilizar la nomenclatura y funciones propias de PHP. Verán en cada sintaxis, en la última columna, un enlace a la web regex101 donde podrán testear los ejemplos en vivo.

Caracteres

RegexpDescripciónResultadoregex101
.Cualquier caracterTengo 36 años y mido 1,80m de altura.🔗
\sCualquier caracter de espacio en blancoTengo 36 años y mido 1,80m de altura.🔗
\SCualquier caracter que NO sea un espacio en blancoTengo 36 años y mido 1,80m de altura.🔗
\dCualquier caracter que sea un dígito entre 0 y 9Tengo 36 años y mido 1,80m de altura.🔗
\DCualquier caracter que NO sea un dígito entre 0 y 9Tengo 36 años y mido 1,80m de altura.🔗
\wCualquier caracter que sea una letraTengo 36 años y mido 1,80m de altura.🔗
\WCualquier caracter que NO sea una letraTengo 36 años y mido 1,80m de altura.🔗

Cuantificadores

RegexpDescripciónEjemploExplicaciónValores válidosregex101
*Cero o más/v\d(\.\d)*/g– Una «v»
– un dígito
– Cero o más de (
– un «.»
– un dígito
)
WordPress v4.8.
WordPress v4.8.3.
WordPress 4.8 ❌
🔗
?Uno o ninguno/Star Wars\s?\d?/g– Las palabras «Star Wars»
– Uno o ningún espacio
– Uno o ningún dígito
La película Star Wars
La película Star Wars 4
La película Star Wars 5
La película StarWars ❌
🔗
+ Uno o más/v\d[.]\d+/g– Una «v»
– un dígito
– un «.»
– Uno o más dígitos
WordPress v4.8.
WordPress v5.10.
WordPress v5 ❌
🔗
 {n}Exactamente n veces/w{3}/g– Exactamente tres letras «w»www.maugelves.com
www.ayudawp.com
desarrollowp.com ❌
🔗
{n,m}Entre n y m veces/\d{3,5}/g– Entre 3 y 5 dígitosPeugeot 306
Año 2017
20000 leguas de viaje submarino
12 monos ❌
🔗
{n,}n o más veces/\d{3,}/g – Mínimo 3 dígitosPeugeot 306
Año 2017
20000 leguas de viaje submarino
1000000 de años luz
12 monos ❌
 🔗

Lógica

Sí, también se pueden agregar cierta lógica dentro de la misma expresión. Echa un ojo a los siguientes ejemplo:

RegexpDescripciónEjemploExplicaciónValores válidosregex101
|Operador OR (ó)/Batman|Superman/g– La palabra «Batman» ó «Superman»Batman
Superman
Robin ❌
🔗
( … )Agrupador
Este grupo puede luego ser reutilizado.
/Mar(cos|tín)/g– Los caracteres «Mar» seguidos de
– «cos» ó «tín»
Marcos
Martín
Mauricio ❌
🔗
(?(1)yes|no)Condicional
Si el grupo 1 entonces «yes»
Sino «no»
/(Esta condición)?(?(1) es verdadera| es falsa)/g – Uno o ninguna aparición de los caracteres «Esta condición»
– Si existe concatena la búsqueda de los caracteres «es verdadera»
– Caso contrario concatena la búsqueda de los caracteres «es falsa»
Esta condición es verdadera
Esta otra es falsa
Aquí no se debe seleccionar nada ❌
🔗
(?=…)Futuro positivo (Positive Lookahead)

 

Solo encuentra patrones si existe una condición futura.

/para(?=psicología|normal)/g – Seleccionará los caracteres «para» solo si:
– los siguientes caracteres son «psicología» ó «normal»
La parapsicología.
Fenómeno paranormal.
El parapente. ❌
 🔗
(?!…)Futuro negativo (Negative Lookahead)

 

Solo encuentra patrones si no existe una condición futura.

/para(?!psicología|normal)/gSelecciona los caracteres «para» solo si:
– los siguientes caracteres no son «psicología» ó «normal»
El parapente
El paraíso fiscal
Fenómeno paranormal ❌
🔗
 (?<=…)Pasado positivo (Positive Lookbehind)

 

Solo encuentra patrones si existe una condición pasada.

/(?<=solu|informa)ción/gSelecciona los caracteres «ción» solo si:
– los caracteres anteriores son «solu» ó «informa»
Tengo la solución,
con la información
de la ecuación. ❌
🔗
(?<!…)Pasado negativo (Negative Lookbehind)

 

Solo encuentra patrones si no existe una condición pasada.

/(?<!informa)ción/gSelecciona los caracteres «ción» solo si:
– los caracteres anteriores no son «informa»
La desilución
y manipulación
de la información
🔗

Clases de caracteres

Limita los caracteres que estás buscando con las siguientes sintaxis:

RegexpDescripciónEjemploExplicaciónValores válidosregex101
[…]Delimitador de caracteres/[aeiouáéíóú]/g– Encuentra cualquiera de los caracteres especificados.murclago
aburriendo
bcdfghjklm ❌
🔗
[^…]
 Excepción de caracteres /[^aeiouáéíóú]/g– Encuentra todos los caracteres excepto los especificados.murclago
aburriendo
bcdfghjklm
🔗
[[:alnum:]]
Letras y dígitos/[[:alnum:]]/g– Encuentra todas letras y números comprendidos entre [A-Za-z0-9]¡¡¡Texto, 12345!!!🔗
[[:lower:]]
Caracteres en minúsculas /[[:lower:]]/g– Encuentra todos los caracteres en minúsculasabcDEF🔗
[[:upper:]]
 Caracteres en mayúsculas /[[:upper:]]/g – Encuentra todos los caracteres en mayúsculas abcDEF 🔗

Anclas

Las anclas sirven para indicar en qué parte del texto queremos aplicar el patrón de búsqueda. Veamos a continuación las sintaxis más utilizadas:

RegexpDescripciónEjemploExplicaciónValores válidosregex101
^Busca el patrón de caracteres al comienzo de la cadena o al comienzo de cada línea, según el modificador global.

 

Recuerda que cuando se encuentra entre llaves significa lo contrario: [^entre llaves]

Sin modificador multilínea
/^\w+/gCon modificador multilínea
/^\w+/gm
– Busca el patrón al comienzo del texto.Sin modificador multilínea:
Soy un texto multilínea
sin el modificador global «m»Con modificador multilínea:
Soy un texto multilínea
con el modificador global «m»
🔗
 $Busca el patrón de caracteres al final de la cadena o al final de cada línea, según el modificador global.Sin modificador multilínea
/\w+$/gCon modificador multilínea/Unicode
/\w+$/gum
 – Buscal el patrón al final del texto.Este es el fin
de la historia
🔗
/ABusca el patrón de caracteres siempre al comienzo del texto. No se ve afectado por el modificador global «m»./\A\w+/gm– A pesar de indicar el modificador «m» solo devolverá el conjunto de letras al principio del texto.Solo afecta al comienzo
aún con el modificador multilínea
🔗
/ZBusca el patrón de caracteres siempre al final del texto. No se ve afectado por el modificador global «m». /\w+\Z/gm– A pesar de indicar el modificador «m» solo devolverá el conjunto de letras al final del texto.Siempre seleccionaré
la última palabra
 🔗

Modificadores globales

Como verán en los ejemplos anteriores, todas las expresiones regulares las hemos encerrado con barras y una letra g al final (/…/g). Esta sintaxis permite que podamos englobar la expresión y modificarla con distintos valores que veremos a continuación:

ModificadorDescripciónEjemploExplicaciónValores válidosregex101
/…/gGlobal: busca todas las posibles coincidencias en el texto (no se detiene ante el primer hallazgo)./(je|jé)/g– Encuentra todos los caracteres «je» o «jé» en la cadena.Asere, ja deje tejebe tude jebere
Sebiunouba majabi an de bugui an de buididipí
Asere, ja deje tejebe tude je.
🔗
/…/mMultilínea: busca el patrón en cada línea del texto./Fin de la cita.$/gm– Encuentra la frase exacta «Fin de la cita.» al final de cada línea.Yo presido. Fin de la cita.
Y lo digo. Fin de la cita.
🔗
/…/iInsensitivo: busca el patrón en minúsculas o mayúsculas./a/gi– Encuentra la letra «a» sea minúscula o mayúscula.A de accesibilidad🔗
/…/u Unicode: busca el patrón incluyendo caracteres de UTF-16./voc\w/gu – Encuentra la frase «voc» seguida de cualquier caracter comprendido en  UTF-16.Assim você me mata 🔗

Funciones PHP

Una vez que tengamos el patrón de caracteres a buscar, podremos especificar una serie de funciones de PHP:

preg_replace:

Esta función de PHP busca un patrón de caracteres en un texto y lo reemplaza por otro que le especifiquemos.

<?php
/** 
* Mensaje que quiere evadir la política
* de comisiones de la plataforma.
*/
$mensaje = "Hola Juan: mi nombre es Mauricio y te dejo mi email para que 
			contactemos fuera de esta aplicación que cobra comisiones muy caras, 
			toma nota: mg@maugelves.com. Un saludo, Mauricio.";
/**
* Pero aquí viene la función justiciera.
* 
* En PHP existe una función mejor para validar emails, pero 
* usaremos funciones de expresiones regulares con 
* fines didácticos.
* http://php.net/manual/en/filter.filters.php
*/
// Patrón para encontrar direcciones de email
$patron = "/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}\b/";
// Reemplazo cualquier email por el texto "correo eliminado"
$mensaje = preg_replace( $patron, "(correo eliminado)", $mensaje );
echo $mensaje;
/*
* Esto devuelve:
*
* Hola Juan: mi nombre es Mauricio y te dejo mi email para que 
* contactemos fuera de esta aplicación que cobra comisiones muy caras, 
* toma nota: (correo eliminado). Un saludo, Mauricio.
*
*/

preg_split:

Función ideal si queremos dividir un texto en un array por un patrón de texto. Veamos el siguiente ejemplo donde separamos un texto por espacios o comas.

<?php
/** 
* Fragmento del Quijote de la Mancha
*/
$texto = 	"Y, viéndole don Quijote de aquella manera, con muestras de tanta 
			tristeza, le dijo: Sábete, Sancho, que no es un hombre más que 
			otro si no hace más que otro.";
// Patrón para encontrar espacios y comas (,).
$patron = "/[\s,]+/";
// Guardo en un array todas las palabras separadas por comas o espacios.
$array = preg_split( $patron, $texto );
var_dump( $array );
/*
* Esto devuelve:
*
* array(30) { [0]=> string(1) "Y" [1]=> string(9) "viéndole" [2]=> string(3) "don" 
* [3]=> string(7) "Quijote" [4]=> string(2) "de" [5]=> string(7) "aquella" 
* [6]=> string(6) "manera" [7]=> string(3) "con" [8]=> string(8) "muestras" 
* [9]=> string(2) "de" [10]=> string(5) "tanta" [11]=> string(8) "tristeza" 
* [12]=> string(2) "le" [13]=> string(5) "dijo:" [14]=> string(7) "Sábete" 
* [15]=> string(6) "Sancho" [16]=> string(3) "que" [17]=> string(2) "no" 
* [18]=> string(2) "es" [19]=> string(2) "un" [20]=> string(6) "hombre" 
* [21]=> string(4) "más" [22]=> string(3) "que" [23]=> string(4) "otro" 
* [24]=> string(2) "si" [25]=> string(2) "no" [26]=> string(4) "hace" 
* [27]=> string(4) "más" [28]=> string(3) "que" [29]=> string(5) "otro." }
*
*/

preg_match:

Esta es tal vez la función más simple ya que devuelve un 1 si encuentra al menos un patrón de caracteres y un 0 en caso negativo o error. Vamos a definir un patrón para detectar si alguien escribe mal la palabra WordPress en un texto cualquiera (recuerden que lleva la letra W y P en mayúsculas).

<php
/** 
* Un fragmento de texto con la palabra WordPress mal escrita
*/
$texto = 	"Hola, tengo un problema con mi página web. Está hecha
			en wordpress y quería que alguien me eche una mano.
			¿Qué debo hacer?"; // Parece gracioso pero suelo recibir emails de este tipo.
// Patrón para encontrar WordPress mal escritos.
$patron = "/(wordpress|wordPress)+/";
// Guardo en un array todas las palabras separadas por comas o espacios.
$hay_error = preg_match( $patron, $texto );
var_dump( $hay_error );
/*
* Esto devuelve:
*
* int(1)
*
*/

¿Cómo usarlo en WordPress? Plugin Moderdonizer

Moderdonizer WordPress Plugin

Luego de la chapa que solté con tanto tecnicismo es hora de ver cómo podemos implementar estas expresiones regulares en WordPress. Solo cambiará el entorno ya que seguiremos utilizando las mismas funciones nativas de PHP.

Voy a detallar un ejemplo con una linda locura que se nos ocurrió junto a Álvaro Gómez (AKA @Mrfoxtalbot).

Ambos somos fieles seguidores del programa de radio «La vida moderna«, una show humorístico donde a lo largo del tiempo han desarrollado un lenguaje propio. Por ejemplo, en lugar de decir «comedia» dicen «commedia» para identificar el tipo de humor que ellos realizan (que a veces roza límites muy arriesgados) y también reemplazan las terminaciones «ción/sión» por «ció/sió», haciedo alusión (y un poco de burla) al idioma catalán.

Con el juego de palabras se nos ocurrió que podíamos hacer un plugin (el cual está en fase de aprobación 😝) y subirlo al repositorio. La finalidad del mismo es simplemente reemplazar el título y contenido de cualquier entrada o página con las palabras típicas del programa. Para ello debíamos definir en primer lugar las reglas gramaticales, dos de ellas resultaron simples pero la doble «m» tenía un poco más de chicha: Este es el detalle de cada regla:

  1. Reemplazar palabras que acaben en «ción» por «ció» cuando después venga un espacio, punto, coma, interrogación o exclamación.
  2. Reemplazar palabras que acaben en «sión» por «sió» cuando después venga un espacio, punto, coma, interrogación o exclamación.
  3. Reemplazar la letra «m» por doble «mm» cuando la consonante se encuentre entre vocales.

Con las reglas definidas me puse manos a la obra y luego de varias correcciones di con las expresiones regulares correctas. Las mismas las utilizo con la función preg_replace() de PHP cuando se ejecutan los filtros the_content y the_title.

El plugin, que de momento pueden encontrar en mi repositorio de Github, luce más o menos así:

<?php
/**
 * Esta función reemplaza el contenido Godo con palabras de la República Dictatorial de Moderdonia.
 * Estas son las reglas que se aplican:
 *
 * @author  Mauricio Gelves
 * @params  $content    string  El contenido del post
 * @returns             string  El contenido del post con las nuevas palabras moderdonizadas.
 */
function fn_modernonize( $content ) {
	// Regla 1: "ción" por "ció" (ver comentarios en función)
	$content = preg_replace('/ción(?=[ .!,?])/', 'ció', $content );
	// Regla 2: "sión" por "sió" (ver comentarios en función)
	$content = preg_replace('/sión(?=[ .!,?])/', 'sió', $content );
	// Regla 3: "m" por "mm" (ver comentarios en función)
	$content = preg_replace('/(?<=[aeiouáéíóú])m(?=[aeiouáéíóú])/', 'mm', $content );
	return $content;
}

Conclusión

No me sorprenderé ni me avergonzaré cuando vuelva a mi propio artículo para saber cómo funcionan las expresiones regulares. Espero que vosotros también la dejéis apuntada como favorita para consultar en cualquier momento. Lo que sí puedo contarles es que escribiendo este artículo, que llevó muchas horas de desarrollo, me ha hecho conocer mucho más esta potente tecnología y sentirme más seguro de cara a futuras implementaciones. Es lo bueno de tener un blog.

Modificar columnas en wordpress con admin columns

¿Cómo personalizar las columnas de tus listados de WordPress?

Título, fecha de publicación, nombre del autor, etiquetas son algunas de las columnas que vienen por defecto en el listado de las entradas, páginas o Custom Post Types, pero ¿Cómo podemos personalizar estas columnas para agregar o reordenar la información que realmente necesitamos?

personalizar columnas en wordpress
Columnas por defecto en el listado de entradas de WordPress.

Video Tutorial

Usando el plugin «Admin Columns»

En primer lugar vamos a personalizar las columnas de los listados utilizando el plugin «Admin Columns«. Este plugin nos permite incluir campos personalizados, imágenes destacadas, taxonomías personalizadas, cantidad de palabras, tiempo estimado de lectura, etc.

admin columns plugin wordpress

Una vez instalado y activado el plugin podemos acceder al panel de configuración del plugin en: Ajustes » Admin Columns.

¿Cómo agregar una nueva columna?

  1. En primer lugar seleccionamos el Custom Post Type del listado que queremos modificar (marcado con el número 1). Una vez seleccionado el CPT clickeamos en el boton «+ Adicionar Columna» (punto número 2).
    admin columns wordpress plugin nueva columna
  2. Tipo de columna: En la nueva columna debemos desplegar el campo «Tipo» para seleccionar entre todos los tipos de columnas disponibles. En la documentación del plugin puedes ver en detalle qué tipo de información muestra cada tipo de columna.
    admin columns wordpress-plugin-seleccionar tipo de columna
  3. Configuración: Según el tipo de columna que selecciones tendrás distintos campos de configuración que ajustar.
admin columns wordpress plugin configuracion de columna
Si elegimos el tipo de columna «Imagen Destacada» vemos que podemos configurar el tamaño de la imagen a mostrar en el listado.

Orden de las columnas:

Podemos reordenar las columnas simplemente arrastrándolas hasta su nueva posición.

Resultado final:

Luego de configurar y guardar los campos con el botón «Actualizar» vamos a ver como luce nuestro nuevo listado de entradas.

admin columns wordpress plugin listado final

Tipos de columnas:

El plugin nos permite seleccionar entre 90 tipos distintos de columnas. Menciono alguno de ellos para puedan hacerse una idea del potencial que tiene:

NombreDescripciónConfiguraciónEjemplo
Acciones:Muestra los enlaces para editar, ver o borrar el post. 
admin columns wordpress plugin columna acciones
Alias:Muestra el slug del post. 
admin columns wordpress plugin columna alias
Cantidad de comentarios:Muestra el número y el link para administrar todos los comentarios del post.Estado del comentario: Se pueden filtrar según su estado (aprobado, pendiente, spam ,etc).
admin columns wordpress plugin columna cometarios
Content:Muestra parte del contenido del post.Tamaño de extracto: Nos permite seleccionar la cantidad de palabras a mostrar.
admin columns wordpress plugin columna contenido
Conteo de palabras:Muestra la cantidad de palabras que conforman nuestro post. 
admin columns wordpress plugin columna conteo de palabras
Estimated Reading Time:Muestra el tiempo que nos llevaría leer el artículo.Words per minute: Podemos especificar qué cantidad de palabras podemos leer en un minuto para hacer el cálculo.
admin columns wordpress plugin columna tiempo de lectura
Featured image:Muestra la imagen destacada del artículo.Tamaño de vista previa: Se puede especificar el tamaño con el que se muestra la imagen destacada en la columna (miniatura, medio, largo, completo o personalizado). 
admin columns wordpress plugin columna imagen destacada

Personalizando columnas por código

Los pasos para personalizar por código son los siguientes:

  1. Definir el nombre y el título de las cabeceras.
  2. Recorrer la definición anterior e ir completando con código cada columna.

Definición de nuevas columnas

Para definir las nuevas columnas utilizaremos el filtro manage_{$post_type}_posts_columns donde debemos reemplazar la variable {$post_type} por el nombre correspondiente al listado de nuestro Custom Post Type.

<?php
//Create new columns for the bonos Custom Post Type
function set_movies_posts_columns( $defaults ) {
    $defaults = array();
    $defaults['title']          = __('Nombre'); // Cambio el nombre de la columna Título
    $defaults['genero']       	= __('Género');
    $defaults['duration']       = __('Duración');
    $defaults['director']       = __('Director');
    return $defaults;
}
add_filter('manage_movies_posts_columns', 'set_movies_posts_columns');

En el ejemplo anterior estamos asignando 4 columnas (nombre, género, duración y director) a un Custom Post Type llamado «Movies». Ahora debemos indicar por código qué valor tendrá cada columna.

¿Cómo agregar el valor a cada columna?

Para ello utilizaremos una acción llamada manage_{$post_type}_posts_custom_column donde nuevamente reemplazaremos la variable con el nombre de nuestro Custom Post Type.

<?php
function fill_movies_posts_columns( $column_name, $post_id ) {
    
    // Obtenemos todos los valores Post Meta de cada película
    $movie_meta = get_post_meta($post_id);
    
    // Recorremos cada columna y asignamos un valor.
    switch( $column_name ):
        case 'genero':
            echo $movie_meta['movies_genero'][0];
            break;
        case 'duration':
            echo sprintf("%s minutos", $movie_meta['movies_duration'][0]);
            break;
        case 'director':
            echo sprintf("<a href='%s' target='_blank'>%s</a>", $movie_meta['movies_director_link'][0], $movie_meta['movies_director'][0]);
            break;
    endswitch;
    
}
add_action( 'manage_movies_posts_custom_column', 'fill_movies_posts_columns', 10, 2 );

En el código anterior recorremos fila por fila de nuestro listado y columna por columna para ir completando sus valores. Aquí pongo un simple ejemplo de campos personalizados del artículo pero podría reemplazarse por cualquier código PHP.

Personalizar columnas de WordPress con código
Así se ven las nuevas columnas generadas por código.
perfiles desarrollo web

Perfiles informáticos del desarrollo web

El desarrollo de una página web profesional involucra un conjunto de profesionales de distintos perfiles que van desde la captura de requerimientos hasta la puesta en marcha en un servidor de producción: Project Managers, diseñadores UX, diseñadores gráficos, maquetadores, desarrolladores, testers y SysAdminers. Hay un mundo de conocimientos detrás de cada perfil como así también de distintas son las herramientas que utilizan a diario para llevar su trabajo adelante. Vamos a conocer algunos detalles de cada uno de ellos para saber un poco más sobre su día a día, cuáles son sus responsabilidades dentro de un proyecto, las herramientas que utilizan y cómo hacen para mantenerse al día con las últimas tecnologías.


Diseñadores UX

Los diseñadores UX se encargan de que el usuario de una web o aplicación tenga una buena interacción con el producto o servicio mejorando su usabilidad y accesibilidad. Para cumplir con este objetivo analizan los distintos dispositivos donde se visualizará la web y diseñan posibles wireframes que luego utilizará el diseñador gráfico.

Es muy importante que tengan conocimientos varios sobre tecnologías de internet: CMS’s, frameworks, redes sociales, animaciones CSS o limitaciones de navegadores/dispositivos. Cuanto más recursos conozcan más herramientas tendrán para diseñar la posible usabilidad de una web o aplicación.

wireframe user experience
Wireframes que realizan los diseñadores UX

Herramientas


Diseñadores Gráficos

Es el encargado de diseñar la imagen general del proyecto (logotipo, web, email templates) utilizando los wireframes que generan los UX Designers, imágenes, tipografías y una paleta de colores que se ajusten al Look & Feel del cliente. En algunas ocasiones el diseñador gráfico hace también el trabajo de UX.

En los últimos años se ha visto un gran avance en las aplicaciones que utilizan los diseñadores para realizar su trabajo. Después de mucho tiempo de Photoshop o Illustrator han aparecido al mercado aplicaciones como Sketch (creo que fue una de las primeras que revolucionó el mercado), Zeplin o Framer que permite a los profesionales tocar algo de código para expandir sus diseños.

disenadores graficos escritorio
Los diseñadores tienen que adaptarse rápidamente a las nuevas herramientas que marcan tendencia en el mercado web.

Herramientas


Maquetador de HTML5/CSS3

El maquetador es el encargado de convertir a HTML5, CSS3 y Javascript los mockups proporcionados por el diseñador gráfico. Es algo así como el Dr. Frankestein que da vida a lo que hasta entonces era una simple imagen estática. No es el responsable de la programación de la web, solo aplica la estructura básica (HTML, microformatos), la hoja de estilo y alguna que otra interacción con Javascript. Luego el programador cogerá este material para aplicar el código que completará la funcionalidad de la web.

Lenguajes

  • HTML5
  • CSS3: Es ideal conocer preprocesadores como LESSSASS o PostCSS (aunque este último no sea un preprocesador cumple con la misma funcionalidad).
  • Javascript: Se puede aprender alguna librería como jQuery (una de las más utilizadas en el desarrollo web).

Herramientas

Profesional Web – Darío Balbontín


Desarrollador Web

El desarrollador se encarga de aplicar el código de programación de servidor (PHP, Javascrtip, JAVA, .Net u otro lenguaje) y de Frontend (Javascript) para que la web cumpla con las funcionalidades de negocio: envíos de emails, gestión de pedidos, procesamiento de datos, consultas a base de datos, registros de usuarios, etc etc etc.

Si hablamos de un desarrollo de WordPress también se pueden incluir las tareas de instalación, creación o modificación de temas o plugins.

Este perfil debe trabajar en conjunto con el analista (persona que se encargó de desarrollar el alcance del proyecto), el maquetador y el tester. En algunas ocasiones el desarrollador web se encarga de todos estos perfiles a la vez (como es mi caso).

Un desarrollador web debe tener un amplio conocimiento de lenguajes y herramientas de desarrollo:

Lenguajes

  • Lenguajes de programación de servidor: PHP, .Net, JAVA, NodeJS
  • Frontend: HTML5, CSS3 y Javascript.

Herramientas

Profesional Web – Pablo López


Desarrollador SEO

El desarrollador SEO se encarga de desarrollar o corregir el HTML para aplicar estrategias o trucos que mejoren el posicionamiento de la web en los buscadores como Google, Yahoo o Bing.

Herramientas

Profesional Web – Rafa Ramos


Project Manager

El Project Manager cumple un poco el rol de orquestador dentro del desarrollo de cualquier proyecto. Es el encargado de mantener las comunicaciones con el cliente y con el equipo técnico. Para ello debe tener buenas habilidades de comunicación, hacer un buen seguimiento de las distintas actividades y sobretodo prever posibles problemas para que el proyecto pueda seguir adelante sin retrasos en la planificación.

Herramientas

Profesional – Javier Hernáiz


Conclusión

Como habréis visto hay muchos perfiles y roles detrás del desarrollo de una página web, de hecho faltan algunos que iré completando a medida que realice las distintas entrevistas. Si trabajamos en una empresa podemos especializarnos en uno de estos perfiles y si somos freelance tendremos que aprender, gestionar o delegar ciertas tareas. Supongo que habéis visto las imágenes de aquí abajo, representan típicos problemas cuando hay falta o mala comunicación entre los miembros del equipo de desarrollo. Y tú ¿Con qué herramientas trabajas? ¿Te especializas en alguna de ellas o eres un desarrollador «todo terreno»?

mensajes personalizados en wordpress

Cambiar los mensajes de actualización de tus Custom Post Types

En algunas ocasiones es necesario modificar los mensajes que despliega WordPress por defecto al publicar o editar tus Custom Post Types: tal vez porque quieras ocultarlos ya que tus CPT’s no deban ir a una página en particular y evitar así un innecesario 404 o bien para ajustar las notificaciones a las necesidades de tu proyecto.

En lugar de mostrar estos típicos mensajes:

mensaje de entrada publicada por defecto

Podríamos tener mensajes más divertidos como:

mensajes de actualizacion personalizado

¿Qué filtro usamos?

Para poder implementar estos mensajes personalizados utilizaremos el filtro post_updated_messages. Pega el siguiente código en tu functions.php y modifica los mensajes que creas necesario.

<?php
/**
 * Mensajes personalizados para Custom Post Types
 *
 * @param   array $messages Mensajes por defecto.
 * @return  array 			Devuelve un array con los nuevos mensajes
 */
function updated_messages_cb( $messages ) {
    $messages['custom-post-type-name'] = array(
		0  => '', // Unused. Messages start at index 1.
		1 => __( 'Post updated.' ) . $view_post_link_html,
		2 => __( 'Custom field updated.' ),
		3 => __( 'Custom field deleted.' ),
		4 => __( 'Post updated.' ),
		/* translators: %s: date and time of the revision */
		5 => isset( $_GET['revision']) ? sprintf( __( 'Post restored to revision from %s.' ), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
		6 => __( 'Post published.' ) . $view_post_link_html,
		7 => __( 'Post saved.' ),
		8 => __( 'Post submitted.' ) . $preview_post_link_html,
		9 => sprintf( __( 'Post scheduled for: %s.' ), '<strong>' . $scheduled_date . '</strong>' ) . $scheduled_post_link_html,
		10 => __( 'Post draft updated.' ) . $preview_post_link_html,
    );
    return $messages;
}
add_filter( 'post_updated_messages', 'updated_messages_cb' );

Vamos a analizar el código:

  • Línea 10: Deberemos reemplazar el valor "custom-post-type-name" por el nombre del Custom Post Type que vayas a utilizar.
  • De la línea 11 a la 22: Aquí tenemos todas las acciones que puede recibir un Post o Custom Post Type. Modificaremos el texto por aquel que se ajuste a las necesidades del proyecto. Las variables $view_post_link_html y $preview_post_link_html contienen los enlace para ver la plantilla single.php del Custom Post Type. En caso de que no necesitemos este enlace podemos borrar la variable sin problemas.

Foto: Patrick Denker

Dependencias de plugins y opciones

En muchas ocasiones necesitamos desarrollar un plugin o un tema que necesita de las funcionalidades de otros tantos plugins. Tal vez para compartir los artículos en redes sociales, para generar un listado de posts relacionados o un plugin para crear nuevos campos personalizados. Pero, ¿Cómo podemos entregar nuestro desarrollo sin preocuparnos por si el usuario tiene instalado o no estas «dependencias«? Para ello les voy a mostrar cómo funciona la librería PHP «TGM Plugin Activation«.

TGM Plugin Activation PHP Library

Esta librería PHP, preparada y pensada para WordPress, nos permite definir dependencias al tema o plugin que estemos creando. Se pueden especificar 2 tipos de dependencias:

  1. Dependencias de plugins: Un array con los plugins que nuestro plugin o tema necesita para ejecutarse correctamente, indicando si son requeridos o aconsejables (entre otras tantas opciones).
  2. Dependencias de configuraciones: En muchas ocasiones nuestro desarrollo dependerá de valores guardados en la tabla de opciones de WordPress. Esta librería se encarga de crear estas variables y asignarle un valor por defecto para que nuestro desarrollo funcione sin problemas.

Hecha la introducción vamos a meter mano en el código:


Instalación

Para instalar el TGM Plugin Activation es necesario descargarse la librería de su página oficial y guardarla en alguna parte dentro de la estructura de nuestro desarrollo. Normalmente suelo guardar las librerías dentro de una carpeta llamada «includes».

Una vez descagada la librería debemos llamar a su fichero principal class-tgm-plugin-activation.php desde nuestro functions.php.

<?php
// Call the library to manage dependencies
include __DIR__ . "/includes/TGM-Plugin-Activation-2.6.1/class-tgm-plugin-activation.php";

Este clase define un hook llamado tgmpa_register al que tendremos que llamar para verificar las dependencias de nuestro desarrollo.
En esta función asignaremos 2 arrays, uno para la definir los plugins y otro para las configuraciones (este último es opcional) que luego pasaremos como parámetros a la función tgmpa.

<?php
function register_required_plugins() {
    // Variables
    $plugins  = array(
        // Mi plugin o tema necesita del plugin WP REST API para funcionar correctamente
        array(
            'name'               => 'WP REST API',  // El nombre del plugin.
            'slug'               => 'rest-api',     // El "slug" del plugin (normalmente el nombre de la carpeta).
            'required'           => true            // Si es falso, el plugin es "recomendado" en lugar de "requerido".
        )
    );

    // Mi plugin o tema necesita de las siguientes opciones en base de datos
    $config   = array(
        'id'           => 'maugelves',                 
        'default_path' => 'https://maugelves.com',                      
        'menu'         => 'maugelves-dependency-plugins' 
    );
    
    // LLamar a la función de la librería
    // que se encargará de las dependencias.
    tgmpa( $plugins, $config );

}
add_action( 'tgmpa_register', 'register_required_plugins' );

El plugin en acción

Cuando activemos nuestro tema o plugin en WordPress y nos falte alguna/s de las dependencias definidas en la clase recibiremos un lindo mensaje en el header de nuestro administrador.

Plugins requeridos

De esta manera el usuario está informado sobre la necesidad de tener instalado un conjunto de plugins para el correcto funcionamiento de la web. La clase dispone de otras opciones que nos permiten especificar versiones, url’s de descarga, forzar la activación o desactivación.

Estas y más opciones pueden encontrarla en la sección Configuration de su web.

Por cierto ¿algún voluntario para traducir el plugin?

Foto: https://www.flickr.com/photos/joelogon/5112896429/

Funciona con WordPress & Tema de Anders Norén