Blog personal de IT, viajes y otros hobbies

Etiqueta: programación

Crear bloques de gutenberg con ACF

Crear bloques de Gutenberg con ACF

Seamos sinceros, Gutenberg ha venido para resolver muchos problemas técnicos y modernizar la forma en la que creamos contenido, pero para los desarrolladores ha sido un baldazo de agua fría por la cantidad de nuevas tecnologías que debíamos incorporar a nuestro ya sobrecargado kit de lenguajes de programación.

Pero que no cunda el pánico porque Elliot Condon y su equipo de desarrollo de ACF (Advanced Custom Fields) han implementado una nueva funcionalidad en su plugin que nos permite asignar un conjunto de campos a los nuevísimos bloques de Gutenberg.

Básicamente estos son los pasos que vamos a seguir para crear bloques personalizados de Gutenberg con ACF:

  • Registrar el bloque de Gutenberg
  • Crear los campos personalizados con el plugin ACF
  • Exportar los campos a JSON y PHP (opcional)
  • Crear el mockup del bloque (HTML y CSS)
  • Encolar los estilos en el administrador de WordPress

⚠️Disclaimer: Para seguir estos pasos vamos a necesitar descargar la versión ACF PRO 5.8.0 del plugin de pago de ACF. Tengo ya dos webs en producción y la versión Beta funciona de maravillas.


Bloque a desarrollar

A modo de ejemplo vamos a desarrollar un bloque que nos permita crear un conjunto de charlas, con sus respectivos ponentes, títulos, descripciones, etc. Más o menos algo así (no me critiquéis el diseño que como podéis ver soy pésimo):

Diseño bloque personalizado de Gutenberg con ACF
Diseño del bloque personalizado de Gutenberg con ACF

Primer paso: registrar el bloque de Gutenberg

En primer lugar tendremos que registrar el bloque de Gutenberg con los parámetros tal como lo haríamos con un bloque nativo. Para más opciones se puede consultar los pasos del Handbook.

<?php
/**
 * Registramos el bloque de Gutenberg para las charlas.
 */
function wcz_create_talk_gb_block() {
		// register a testimonial block
		acf_register_block( [
			'name'				=> 'talk',
			'title'				=> __( 'Talk', DOMAIN_NAME ),
			'description'		=> __('Block with basic info of the talk.', DOMAIN_NAME),
			'render_callback'	=> 'talk_block_render_callback',
			'mode'				=> 'auto',
			'icon'				=> 'image-filter',
			'keywords'			=> [ 'talk', 'quote' ],
			'enqueue_style'		=> get_template_directory_uri() . 'blocks/testimonial/testimonial.css',
		] );
}
add_action('acf/init', 'wcz_create_talk_gb_block');

Vamos a registrar el bloque utilizando la función acf_register_block() cuando se ejecuta el hook propio del plugin ACF llamado acf/init. Estos son los parámetros más importantes:

  • name: el bloque necesita un nombre sin mayúscula, acentos o caracteres especiales.
  • title: asignaremos un título que mostrará en el selector de bloques.
  • render_callback: nombre de la función que se encargará de renderizar el HTML.
  • icon: podemos elegir un icono del propio Dashicon de WordPress o bien pegar el código de un fichero svg.
  • mode: Con la opción auto el bloque se renderiza automáticamente cada vez que pierde el foco.
  • keywords: palabras claves para el filtro en el selector de bloques.
  • enqueue_style: podemos encolar un CSS con los estilos específicos para el bloque.

Crear campos personalizados en ACF

Una vez que tenemos el bloque de Gutenberg creado es hora de armar la estructura de datos. Para ellos vamos a crear un grupo de campos personalizados como siempre lo hemos hecho con ACF.

campos personalizados acf para bloque de gutenberg

Vamos a utilizar el campo «Title» para el encabezado de la sección y luego tenemos un campo «Repeater» que tiene otro conjunto de campo personalizados para cada «Ponencia»:

detalles de campo repeater acf para bloque gutenberg
  • Speaker avatar: campo para dar de alta la imagen del ponente.
  • Speaker name: campo de texto para el nombre del ponente.
  • Talk title: campo de texto para el título de la ponencia.
  • Talk description: campo textarea para la descripción de la ponencia.
  • Twitter account: campo de texto para el nombre de usuario de Twitter del ponente.

👉🏻Prestad atención a la estructura de nombres que asigno tanto al repetidor como a los campos hijos. De esta manera tenemos una nomenclatura simple y clara que agradeceremos cuando tengamos que implementar el frontend.


Una vez que tenemos todos los campos solo nos resta definir dónde queremos que se muestren dentro de todo el ecosistema de WordPress. Para ello elegiremos desde la sección «Ubicación» el tipo «Bloque» y luego seleccionamos el bloque «Talk» que hemos creado en el punto anterior.

Exportar los campos a JSON y PHP

Este es un paso opcional ya que no afecta al desarrollo como tal del bloque, pero lo aconsejo ya que nos permite:

  • tener la estructura de los campos en control de versiones (como GIT o BitBucket).
  • evitar consultas extras a base de datos.
  • facilitar el desarrollo web entre un equipo de programadores.

Para exportar los campos debemos seguis los siguientes pasos:

  1. Ir al menu Campos Personalizados » Herramientas
  2. Marcar el checkbox del campo que queremos exportar
  3. Hacer click en «Export File» (que nos descargará un fichero .json)
  4. Hacer click en «Generate PHP«. Nos redireccionará a una nueva página con el código PHP.
  5. El código PHP debemos incluirlo en alguna carpeta de nuestro proyecto y llamarlo desde el tema o plugin que estemos desarrolando.
  6. El fichero .json también debemos incluirlo en alguna carpeta del proyecto para posibles cambios a futuro.

Crear el mockup para el bloque (HTML & CSS)

Con el bloque y el conjunto de campos personalizados creados es hora de que pasemos al Frontend para «pintar» toda esta solución.

Solo debemos crear el HTML y el CSS en conjunto con las funciones habituales de ACF para mostrar los campos (get_field, the_field, get_sub_field, the_sub_field, etc).

Resumo parte del HTML para que el ejemplo no se haga muy engorroso, aunque sigue siendo igual de válido para explicar la idea:

<?php
/**
* Esta es la función que renderiza el bloque.
* Es la misma que declaramos cuando registramos el bloque de Gutenberg
* en el primer paso.
*/
function talks_block_render_callback( $block ) {
	// Recorrro en bucle todas las charlas dadas de alta en el backend.
	while ( have_rows('wcz_gb_talks') ) : the_row(); ?>
		<div class="talk">
			<div class="talk__meta">
				<h3 class="talk__h"><?php the_sub_field( 'wcz_gb_talk_title' ); ?></h3>
				<p class="talk__b"><?php the_sub_field( 'wcz_gb_talk_description' ); ?></p>
				<div class="talk__speaker">
					<p class="talk__speaker__h">Speaker:</p> <span><?php the_sub_field( 'wcz_gb_talk_speaker' ); ?></span><br>
				</div>
			</div><!-- END .talk__meta -->
		</div><!-- END .talk -->
	<?php endwhile; ?>
}

Resultado final

Si todo ha salido bien tendremos un nuevo bloque de Gutenberg en el editor al cual podemos asignar valores con campos personalizados y con estructura y estilos propios ¿Ha sido fácil, no?


Bola extra

Si lo prefieres puedes ver el vídeo con mi ponencia en la WordCamp Zaragoza 2019 donde explico el mismo proceso detallado en el artículo.

¿Cómo testear el tiempo de carga con distintas antenas de móviles?

Un factor muy importante a tener en cuenta cuando maquetamos una página web es optimizar el contenido de imágenes y javascripts para que el tiempo de carga sea el mínimo. El error más común es que demos por sentado que nuestra web siempre será visitada con WiFi o bien con una conexión 4G, pero no siempre es así. De hecho en estos momentos estoy escribiendo este post desde Mendoza, Argentina y las redes más comunes son Edge, GPRS y 3G, el 4G es todavía un cuento de Julio Verne en estas latitudes. Entonces ¿Cómo podemos testear nuestro desarrollo en las distintas antenas de móviles?

Chrome DevTools es tu amigo

Para poder realizar las pruebas vamos a utilizar una opción algo escondida en el navegador de Chrome llamada «Throttle« (velocidad o regulador de transferencia de datos). Una vez abierto las Herramientas de Desarrollo (DevTools) de Chrome debemos acceder al menú «Network».

testear velocidad de carga con distintas antenas network

Una vez en que estemos en «Network» veremos que en el submenú de la sección hay un selector con un valor por defecto «No throttling» (sin restricción de transferencia de datos). Si lo desplegamos encontraremos una gran variedad de conexiones de antenas móviles:

testear velocidad de carga-con-distintas antenas velocidades

Tenemos en este listado una gran variedad de conexiónes preconfiguradas. Si tomamos por ejemplo la red «Regular 4G (20ms, 4.0Mb/s, 3.0Mb/s)» entre paréntesis encontramos los siguientes valores:

  • 20 ms ➡ Corresponde al tiempo de latencia de la conexión (el tiempo que tarda en transmitirse un paquete dentro de la red).
  • 4.0 Mb/s ➡ Corresponde a la velocidad de transferencia de datos de descarga (download).
  • 3.0 Mb/s ➡ Corresponde a la velocidad de transferencia de datos de carga (upload).

Crear tus propias conexiones

Si por algún motivo no encuentras una configuración específica puedes darla de alta pinchando en la opción «Custom » Add«. Se desplegará un formulario donde podrás cargar los datos antes explicados.

aunque también podemos generar nuestras propias especificaciones.

Un punto importante

Una vez que hayas terminado de realizar las pruebas, no te olvides de volver a setear la opción «No throttling» para restablecer la transferencia de datos habitual.

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.
como crear taxonomias en wordpress

¿Cómo crear taxonomías en WordPress?

Cuando hablamos de taxonomías todo las personas recuerdan fácilmente las que WordPress instala por defecto para sus entradas: categorías y etiquetas. Pero también tenemos la posibilidad de crear nuestras propias taxonomías mediante código o plugins para relacionarlas con los Custom Post Types de nuestros proyectos.

¿Que significa el término taxonomía?

Os voy a contar un secreto. Yo creía que las taxonomías eran algo propio de la informática. De hecho escuché de ellas por primera vez a través de WordPress, pero en realidad es un término asociado a la biología para clasificar los reinos animales, vegetales y minerales . Este término nació con el biólogo sueco Carl Linnaeus, a quienes llaman «El padre de la taxonomía moderna».

La taxonomía es la clasificación u ordenación en grupos de cosas que tienen características comunes. En WordPress utilizamos las taxonomías para agrupar y ordenar Post o Custom Post Types.

Por ejemplo: Si tenemos un Custom Post Type «Libros» podríamos tener una taxonomía asociada con los siguiente valores: drama, novela, ficción, terror, etc. De esta manera podemos agrupar u ordenar distintos libros bajo una misma taxonomía «Género».

Sobre este tema di mi primera charla en la WordCamp Bilbao 2016:

Ahora que ya tenemos una primera noción sobre las taxonomías vamos a ver cómo podemos crearlas. Describiré un primer ejemplo utilizando el plugin Custom Post Type UI para aquellas personas que no quieran meterse en líos de código de programación. Y en segundo lugar crearemos la taxonomía según los lineamientos del Codex de WordPress.


Video Tutorial


Crear taxonomías con un plugin

Para crear una taxonomía utilizaremos el plugin Custom Post Type UI el cual debemos tener instalado y activado en nuestro WordPress. Luego haremos click en el menú CPT UI » Add/Edit Taxonomies.

custom post type ui crear taxonomia
Formulario para crear una taxonomía usando el plugin «Custom Post Type UI».

Vamos a ver en detalle cada campo de este formulario:

CampoFunción
Taxonomy Slug
(obligatorio)
 El nombre clave que le vamos a dar a la taxonomía. Solo se aceptan caracteres alfanuméricos latinos en minúsculas, los espacios tienen que ser reemplazados por guiones o guiones bajos.
Plural Label
(obligatorio)
Nombre en plural que se utilizará en el menú de WordPress.
Singular Label
(obligatorio)
Nombre en singular que se utilizará en distintos links y páginas del administrador de WordPress.
Attach to Post Type
(obligatorio)
Este campo nos permite asociar la taxonomía a un tipo de Post. En el imagen vemos un Custom Post Type «Coches» que hemos creado en el artículo «Crea tus Custom Post Types sin programar«.
Al menos debemos indicar un tipo de post.

Al igual que en la creación de Custom Post Types podemos detallar las traducciones de las etiquetas que se mostrarán en el administrador de WordPress completando el segundo bloque de campos llamado «Additional Labels»:

custom post type ui traducciones taxonomia
Formulario para la traducción de etiquetas del plugin «Custom Post Type UI».

Veamos la descripción de algunos de los campos:

CampoFunción
Menu NameNombre para el menú del administrador de WordPress.
All ItemsTexto para el enlace de «todos los ítems» presente en el submenú de la taxonomía.
Add NewTexto para agregar una nueva taxonomía.
Add New ItemTexto utilizado en la esquina superior izquierda en el formulario de alta de la taxonomía.
Edit ItemTexto utilizado en la esquina superior izquierda en el formulario de edición de la taxonomía.
Search ItemTexto utilizado en el botón de búsqueda en la página de listado de taxonomías.

Una vez que aceptamos estos cambios podemos ver que al dar de alta o editar un Post (al que hemos asociado la taxonomía) aparecerá un nuevo menú para registrar las taxonomías.

formulario alta taxonomia no jerarquica
Formulario de taxonomías no jerárquicas.
custom post type ui taxonomias configuraciones

El formulario como pueden ver es idéntico al utilizado para las «etiquetas» en las entradas. Esto se debe a que hemos creado una taxonomía «no jerárquica«. Si necesitamos que la taxonomía se comporte como las «categorías» de las entradas debemos modificar la opción «Hierarchical» a true en la tercer sección de campos llamada «Settings«.


Creando taxonomías por programación

Para crear una taxonomía por programación deberás agregar el siguiente código en tu fichero functions.php de tu tema o bien en el fichero principal del plugin.

<php
// Función para crear una taxonomía
function crear_taxonomia_jerarquica() {
    // Definimos un array para las traducciones de la taxonomía
    $etiquetas = array(
        'name' => __( 'Géneros' ),
        'singular_name' => __( 'Género' ),
        'search_items' =>  __( 'Buscar géneros' ),
        'all_items' => __( 'Todos los géneros' ),
        'parent_item' => __( 'Género padre' ),
        'parent_item_colon' => __( 'Género padre:' ),
        'edit_item' => __( 'Editar género' ), 
        'update_item' => __( 'Actualizar género' ),
        'add_new_item' => __( 'Agregar un nuevo género' ),
        'menu_name' => __( 'Géneros' ),
    ); 	

    // Función WordPress para registrar la taxonomía
    register_taxonomy(
        'generos',
        array('post'), // Tipos de Post a los que asociaremos la taxonomía
        array(
            'hierarchical' => true, // True para taxonomías del tipo "Categoría" y false para el tipo "Etiquetas"
            'labels' => $etiquetas, // La variable con las traducciones de las etiquetas
            'show_ui' => true,
            'show_admin_column' => true,
            'query_var' => true,
            'rewrite' => array( 'slug' => 'genero' ),
        )
    );
}
add_action( 'init', 'crear_taxonomia_jerarquica', 0 );

Podemos encontrar más detalles sobre la configuración de los parámetros de la función register_taxonomy() en el Codex de WordPress.


Mostrar los términos de taxonomías de un Post

Una vez que hayamos asignado algunos términos a un post podremos mostrarlos en el Frontend utilizando el siguiente código dentro del loop y en algunas de las distintas plantillas que conforman nuestro tema (index.php, single.php, archive.php, etc).

<php
/*
    Parámetros:
    $id => ID del post. 
    $taxonomy => nombre de la taxonomía que queremos mostrar.
    $before (opcional) => Texto para mostrar antes de los términos.
    $separator (opcional) => Texto que utilizaremos para separar los términos
    $after (opcional) => Texto para mostrar después de los términos.
*/
the_terms($post->ID, 'generos', '',',');

Conclusión

Hay pilares importantes para dominar la estructura de información de cualquier WordPress y las taxonomías es una de ellas (junto con los Custom Post Types y los campos personalizados). Analiza en detalle tu proyecto web y crea las taxonomías jerárquicas o no jerárquicas que creas convenientes para sacar el mayor provecho al CMS.

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»?

etiquetas condicionales wordpress

WordPress y sus etiquetas condicionales

En algunas ocasiones nos veremos programando funcionalidades que deben ser incluidas en las plantillas solo cuando se cumple una condición WordPress en particular. Por ejemplo: un fichero Javascript con controles para un formulario de contacto debe cargarse solamente cuando la página actual sea «Contacto». Para ello WordPress tiene una serie de etiquetas condicionales que podemos utilizar en nuestros temas o plugins. Veremos a continuación algunos ejemplos con su descripción y ejemplos de uso.

is_admin()

Esta función o etiqueta condicional será verdadera cuando estemos en cualquier sección del administrador de WordPress.  Ejemplo de uso:

<?php
function site_scripts() {
	// Encolar mifichero.js solo si estamos en el Frontend.
	if( !is_admin() ) {
		wp_enqueue_script('mificherojs', get_bloginfo('template_url') . '/js/mifichero.js',array(),false,true);
	}
}
add_action( 'wp_enqueue_scripts', 'site_scripts' );
?>

is_single()

Será verdadero cuando se muestre un post en particular (a excepción de attachments o page post type).

<?php
function site_scripts() {
	// Encolar mifichero.js solo si estamos mostrando un single específico
	if( is_single() ) { // Se ejecutará cuando la página actual sea cualquier Single
		wp_enqueue_script('mificherojs', get_bloginfo('template_url') . '/js/mifichero.js',array(),false,true);
	}
	
	// O también
	if (is_single('10')) {
		// Cuando el post 10 se esté mostrando con la plantilla Single
	}
	if (is_single('hola-mundo')) {
		// Cuando el post con slug 'hola-mundo' se esté mostrando con la plantilla Single
	}
	if (is_single( array('hola-mundo', '10') ) ) {
		// Cuando el post con slug 'hola-mundo' o ID '10' se esté mostrando con la plantilla Single
	}
}
add_action( 'wp_enqueue_scripts', 'site_scripts' );
?>

is_post_type_archive()

Este condicional puede sernos útil cuando tenemos uno o más Custom Post Type y mostramos el listado de posts con la plantilla genérica archive.php. Ejemplo: Si estoy mostrando el listado de posts del Custom Post Type «Coches» agregar una clase para modificar el color de fondo.

<?php
    
get_header();
if (have_posts()): ?>
    <ul>
    <?php
    while(have_posts()): the_post();
        /* 
         * Si el post actual es del Custom Post Type "Coche" agrego una clase para diferenciar
         * el color de fondo.
        */
        $claseFondoRojo = (is_post_type_archive('coche'))?'backred':'';
        
        // también pueden especificarse más de un Custom Post Type con un parámetro de array.
        $claseFondoRojo = (is_post_type_archive( array( 'coche', 'moto' ) ) )?'backred':'';
        
        ?>
        <li class="<?php echo $claseFondoRojo; ?>"><?php the_title(); ?></li>
    <?php endwhile; ?>
    </ul>
<?php
endif;
get_footer();

is_page()

Al igual que el condicional anterior podremos usar esta función para aplicar un código en alguna página en particular cuando utilicemos la plantilla genérica page.php o bien para agregar funcionalidad desde nuestro functions.php.

<?php
function site_scripts() {
	// Encolar mifichero.js solo si estamos mostrando una página
	if( is_page() ) { // Se ejecutará cuando el frontend muestre cualquier página
		wp_enqueue_script('mificherojs', get_bloginfo('template_url') . '/js/mifichero.js',array(),false,true);
	}
	// O también
	if (is_page(10)) {
		// Cuando se muestre la página con ID 10 
	}
	if (is_page('contacto')) {
		// Cuando se muestre la página con slug 'hola-mundo'
	}
	if (is_page( array('contacto', 'quienes-somos', 10) ) ) {
		// Cuando se muestre la página con slug 'contacto' o 'quienes-somos'
		// o su ID es igual a 10.
	}
}
add_action( 'wp_enqueue_scripts', 'site_scripts' );

?>

Conclusión

Como podrán observar el comportamiento de todas las etiquetas condicionales es similiar: una simple función que devuelve un valor true o false con los que podremos controlar el flujo del código de nuestros temas o plugins. Estos son solos algunos ejemplos de las muchas etiquetas condicionales que WordPress tiene en su Core. Podrán encontrar más información de todas ellas en el Codex de WordPress.

Funciona con WordPress & Tema de Anders Norén