Kdenlive es la aplicación con la que edito todos mis vídeos de Youtube desde que en Febrero de 2018 me pasé completamente a GNU/Linux.

No soy ningún experto en edición de vídeo, ni siquiera aficionado, pero creo que con lo aprendido hasta ahora puedo facilitarle el camino a alguien que necesite, como yo, editar vídeos sencillos, añadir audios, crear transiciones, cortar silencios, pegar pistas, exportar en un formato adecuado, etc.

Es el tutorial que yo hubiese querido tener cuando empecé a «cacharrear» con el editor y que me llevó a consultar en numerosos blogs y videotutoriales para cada herramienta o efecto que necesitaba aplicar.

Artículo disponible en vídeo

Cómo conseguir Kdenlive

Kdenlive es multiplataforma, tienes instaladores tanto para GNU/Linux, Windows o Mac OS. Aunque en este artículo nos centraremos en las versiones para GNU/Linux.

La mejor forma de tener Kdenlive es usar una distribucion GNU/Linux con entorno de escritorio KDE Plasma, pues este integra todas las librerías necesarias para hacer funcionar las versiones más recientes del editor.

También es conveniente que la distribución no sea muy conservadora (como Debian), ya que Kdenlive tuvo una importante actualización a partir de la versión 19 (en el momento de escribir este artículo está en su versión 20.04), mejorando considerablemente la experiencia con la línea de tiempo y la estabilidad general de la aplicación. Algunas distros como Debian 10 KDE o Kubuntu 18.04 aún conservan en sus repositorios la versión anterior.

Si no usas Plasma, la mejor recomendación es que instales Kdenlive desde;

• Snap para Ubuntu y derivadas.
• Flatpak o AppImage para cualquier otra distro.

Descargar Kdenlive desde su web oficial como APPImage

Descargar Kdenlive desde FlatHub como Flatpak

Interfaz de Kdenlive

Podemos dividir la interfaz de Kdenlive en 5 grupos principales:

• Recursos del proyecto: Vídeos, audios e imágenes que compondrán el montaje.
• Efectos activos: Efectos aplicados a las pistas. Desde aquí se pueden configurar sus parámetros.
• Librería de efectos: Efectos disponibles tanto de imagen como de audio.
• Previsualización: Podemos ver en tiempo real los cambios aplicados antes de renderizar el vídeo final.
• Línea de tiempo: Donde añadimos las pistas de vídeo y audio, aplicamos los efectos, cortamos, pegamos, etc.

Lo primero al empezar un nuevo proyecto

La ventana de diálogo al crear un nuevo proyecto nos preguntará la resolución y tasa de FPS (fotogramas por segundo) que vamos a necesitar. También nos permite definir el número de pistas de video y de audio con los que se iniciará el proyecto.

Lo ideal es escoger la misma resolución y tasa de fotogramas que la fuente de vídeo original. Si la fuente original tiene una resolución de 1280×720 y hacemos el proyecto a 1920×1080, seguramente la imagen acabe pixelada o borrosa. Del mismo modo, si la fuente original está grabada a 24 FPS y configuramos el proyecto a 60 FPS, el resultado final se seguirá viendo a 24 FPS.

Añadir recursos al proyecto

Ahora que ya hemos definido la configuración inicial vamos a añadir los fragmentos de vídeo, audio e imágenes que formarán el montaje final.

Para este proyecto he añadido dos clips de vídeo y dos clips de audio, que son los audios originales de los clips de vídeo pero procesados por separado con Audacity para mejorar la ecualización y ganancia.

Entonces el objetivo es, silenciar el audio incrustado en el vídeo y sustituirlo por el audio procesado.

Para ello arrastramos el primer clip de vídeo hacia una de las pistas de vídeo:

Automáticamente se rellena una de las pistas de audio, debido al audio que ya hay incrustado en el clip de vídeo. Así que prodecemos a silenciarlo.

Ahora arrastramos el clip de audio procesado a la siguiente pista de audio:

Edición de pistas

Una de las tareas más comunes a la hora de editar un vídeo es la de eliminar silencios o fragmentos que han quedado mal. Para ello vamos a estar haciendo un uso frecuente de la herramienta de Corte así que mejor nos vamos quedando con su atajo de teclado (X):

Vamos a localizar fragmentos de silencio, son fácil de detectar si nos fijamos en la onda de la pista de audio. Para ayudarnos podemos hacer zoom en la línea de tiempo con el deslizador o pulsando Ctrl + rueda del ratón.

A la hora de hacer un corte en una pista, debemos tener en cuenta que estamos trabajando con 2 pistas independientes (vídeo y audio) y si aplicamos el recorte solamente a la pista de video, el audio se desincronizará.

En estos casos lo ideal es agrupar ambas pistas para que el corte se aplique a las dos a la vez en el mismo fotograma y tiempo. Para ello vamos a hacer uso de la herramienta de Selección (S), pinchamos en la pista de vídeo, mantenemos pulsada la tecla SHIFT y pinchamos en la pista de audio para seleccionar ambas:

Con las pistas seleccionadas, hacemos Clic Derecho – Agrupar Clips o el atajo de teclado Ctrl + G. Ahora el corte que apliquemos en el clip de vídeo, cortará también en el clip de audio.

Vamos a posicionarnos en el silencio y hacemos un corte al principio y otro corte al final.

Ahora podemos eliminar el trozo seleccionado con Clic Derecho – Borrar elemento seleccionado, o simplemente pulsando la tecla Supr (¿a que los atajos de teclado son más rápidos y cómodos?)

Ahora podemos arrastrar la pista derecha y unirla con la izquierda para que no se note el corte.

Transiciones entre pistas

Cuando tenemos varios clips de vídeo para el montaje final, una práctica habitual es la de hacer transiciones entre clips.

Primero añadimos el segundo clip a la pista de video a continuación del que ya hemos editado:

Y lo arrastramos para unirlo:

Para realizar la transición, vamos a aplicar un efecto de fundido tanto al final del clip anterior, como al principio del nuevo clip.

Buscamos en la zona de efectos: Fundido saliente:

Y lo arrastramos en el final del clip anterior:

Si seleccionamos la pista en la que hemos aplicado el efecto, veremos sus propiedades en la zona de efectos activos (recordar que en esta zona aparecen todos los efectos aplicados al clip seleccionado):

Por defecto, el fundido saliente tiene una duración de 3 segundos, vamos a reducirlo a 1 segundo para que la transición sea más rápida.

Ahora vamos a localizar el efecto Fundido entrante y lo arrastramos al inicio del nuevo clip:

Al igual que con el fundido saliente, vamos a reducir su duración a 1 segundo:

Y ya tenemos terminada la transición:

Añadir música de fondo

Si queremos añadir una música de fondo para amenizar el vídeo, podemos añadir una nueva pista de audio. Para ello vamos al Menú – Línea de Tiempo – Pistas – Insertar Pista.

O también podemos posicionarnos sobre una pista existente y Clic Derecho – Insertar Pista.

Seleccionamos pista de audio y la posicionamos a continuación.

Agregamos el audio musical a los recursos del proyecto y lo arrastramos a su nueva pista:

Cuando tenemos varias pistas de audio, seguramente necesitemos ajustar los volúmenes para que la pista de música no destaque sobre la pista de voz. Para ello podemos lanzar el panel mezclador.

Ajustar volúmenes de pistas

Para lanzar el panel mezclador, nos dirigimos al Menú – Ver – Mezclador de Audio:

En él veremos las 4 pistas principales de audio:

• La primera que está silenciada (audio del vídeo original).
• La segunda con el audio procesado.
• La tercera con la música de fondo.
• La cuarta que es la pista maestra y afecta a todas.

Podemos jugar con los deslizadores, bajando o subiendo el volumen de cada pista hasta dejarlo como deseamos (sin pasarse con los volúmenes altos para evitar distorsiones).

Exportar el resultado final

Una vez que hemos terminado de editar las pistas, llega el momento de exportar el trabajo final. Para ello vamos a darle al botón rojo Procesar, donde nos va a pedir:

• Ruta de la exportación.
• Formato de vídeo final.

A mí me gusta el formato WebM, es un formato de vídeo líbre y está pensado sobre todo para el vídeo streaming (es un buen formato para Youtube, Vimeo y generalmente cualquier plataforma de video-streaming). Pero si lo necesitas, también puedes exportar en formato MP4 o MPEG.

Llegados a este punto tendremos dos opciones: Procesar a un archivo directamente o generar un script.

Si solo tenemos que exportar un único video (proyecto), podemos procesar a un archivo directamente. Normalmente el tiempo de exportado (renderizado) dependerá de la duración del proyecto, de los efectos aplicados y de la conversión o reescalado (si tiene que procesar la resolución de la fuente original a una nueva) y por supuesto, de la capacidad de tu CPU.

Para el tipo de vídeos que yo suelo montar, el tiempo de renderizado suele ser de un 80-90% de la duración del proyecto final, porque no suelo usar muchos efectos ni reescalados. Pero hay proyectos que pueden tardar incluso un 200% o 300% de la duración del proyecto.

¿Y para qué sirve lo de Generar Script?

Esto es un «puntazo» en Kdenlive. Imagina que tienes que editar 10 vídeos independientes y renderizarlos uno a uno. Teniendo en cuenta que el renderizado merma considerablemente los recursos de la máquina, estarás perdiendo un tiempo precioso en realizar otras tareas.

¿Pero y si pudieras editar los vídeos y renderizarlos todos de una vez? Podrías escoger un momento del día en el que no estés usando el equipo para hacer este trabajo.

En este caso, en lugar de procesar a un archivo, genera un script el cual se quedará en Kdenlive esperando a que lo actives.

Ahora podrías abrir el siguiente proyecto a renderizar y generar un nuevo script, el cual se añadirá a la cola:

Cuando tengas todos los scripts generados, puedes iniciarlos de uno en uno, los cuales se irán yendo a la Cola de Tareas:

Y lo mejor es que en la Cola de Tareas puedes marcar que se apague el equipo cuando termine de renderizar el último vídeo:

Bien, con esta pequeña guía y un poco de tu parte para seguir explorando y probando, creo que puedes hacerte rápidamente con este excelente editor de vídeo.

Me reservo para un siguiente artículo, cómo generar fácilmente pases de diapositivas partiendo de un directorio de imágenes, y además aplicar interesantes efectos de paneo y zoom, de forma muy sencilla.

Un saludo y nos vemos en el siguiente post

Ahora lo que nos falta es crear la página archivo (archive page) para listar nuestro custom post, a modo de listado de entradas de WordPress.

Para ello, al igual que hicimos con el template para el custom post (single-vehiculos.php), necesitamos crear un nuevo archivo (page.php) al que llamaremos por ejemplo page-todos-los-vehiculos.php y guardaremos en el directorio principal del tema activo.

page.php es el archivo que contiene la estructura básica para una página interna de WordPress y al igual que hicimos con single.php, vamos a aprovechar el codigo escrito para copiarlo en nuestro archivo page-todos-los-vehiculos.php y eliminaremos lo que no necesitamos, dejando únicamente el inicio y final del loop.

Dentro del loop vamos a crear la consulta que buscará todas entradas de tipo vehículo.

La esctructura de la consulta se define:

$args = array(
    'post_type' => 'vehiculos',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'DESC'
);
$consulta_vehiculos = new WP_Query($args);

Primero declaramos una variable $args (argumentos) de tipo array donde pasamos los argumentos de la consulta. Los argumentos más básicos que vamos a definir son: el tipo de post al que hacemos referencia (vehículos), el número de resultados por página (-1 devuelve todos los resultados), el orden (por fecha) y el recorrido del orden (ascendente ASC o descendente DESC).

Existen muchos otros argumentos que ponemos incorporar a la consulta para complicarla todo lo que deseemos, pero de momento vamos a empezar por lo más básico.

Despues generamos una nueva consulta new WP_Query() pasándole los argumentos definidos anteriormente: new WP_Query($args).

A continuación vamos a mostrar los datos recogidos en la consulta creando nuestro propio loop. La síntaxis sería la siguiente:

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
   //Código
endwhile; wp_reset_postdata();

La forma de declarar nuestro loop personalizado es muy similar al que toma WordPress para el loop principal, con la diferencia de que especificamos la variable donde tenemos nuestra consulta:

while($consulta_vehiculos->have_posts())
$consulta_vehiculos->the_post()

Lo que se traduciría en lenguaje comprensible como: «Mientras existan posts de vehículos, muestrame el post de vehículo«.

El final del loop finaliza con endwhile;

Además, para los loops personalizados añadimos la función wp_reset_postdata() para «limpiar» los datos de la consulta una vez mostrados y que no interfieran con otros loops que podamos definir en otras partes.

Para asociar este nuevo archivo con una página interna de WordPress que podamos, por ejemplo añadir al menú principal, crearemos una nueva página y utilizaremos como slug (enlace permanente) el nombre que le hayamos dado al archivo del listado, es decir si hemos llamado al archivo page-todos-los-vehiculos.php utilizaremos como slug en la nueva página «todos-los-vehiculos«.

Como siempre, actualizamos los enlaces permanentes de WordPress en Ajustes – Enlaces Permanentes – Guardar Cambios y en este momento quedará asociado el nuevo archivo page-todos-los-vehiculos.php con la página interna de WordPress Vehículos.

Para probar nuestra nueva página, vamos a incluir en loop una llamada a la función the_title(), que deberá devolvernos todos los títulos de los post de tipo vehículo que haya en la base de datos:

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
    the_title();
endwhile; wp_reset_postdata();

Si visualizamos la página Vehículos, veremos que mostrará el título del post que hay actualmente creado de tipo vehículo:

Vamos a añadir algunos vehículos más para poder jugar con los listados de resultados:

Para la página de archivo de vehículos, tomaremos algunos datos para generar el listado, a parte del título, tomaremos la imagen destacada y una parte del contenido. Para ello, en lugar de llamar a la función the_content(), llamaremos a la función the_excerpt(), que toma solamente una parte del contenido.

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
    the_post_thumbnail();
    the_title('<h2>','</h2>');
    the_excerpt();
endwhile; wp_reset_postdata();

Obtendríamos como resultado:

Por supuesto ya dependería de nosotros darle un poco de formato CSS, metiendo cada apartado en su correspondiente DIV, ajustando el tamaño de las miniaturas, etc. Detalles de diseño que no vamos a ver en este artículo, pues se extendería demasiado y el objetivo principal es el de generar el listado de entradas.

En siguientes artículos veremos cómo paginar este listado, para cuando tengamos un número importante de entradas.

Nos vemos en el siguiente post!

¿Para qué sirve un campo personalizado?

Por defecto, en una entrada o página de WordPress tenemos dos campos principales para agregar información, el campo de título y el editor donde se redacta el contenido principal. Pero adicionalmente podemos agregar otro tipo de campos para mostrar en secciones especificas de nuestra plantilla o simplemente como información que solo veremos desde el modo de edición.

Por ejemplo, podríamos crear un campo para poner el precio de un vehículo y llamar a ese dato en una ubicación especifica de nuestra plantilla. O podríamos crear un campo personalizado no visible al público, pero que guarde información importante sobre el vehículo, como información del anterior propietario, historial de revisiones etc.

Advanced Custom Field

WordPress tiene su propio sistema de creación de campos personalizados, pero es algo confuso y poco intuitivo, por lo que muchos desarrolladores optamos por utilizar el plugin Advanced Custom Field, que permite crear campos personalizados de múltiples tipos y llamarlos con sencillas funciones.

Una vez instalado, Advanced Custom Field organiza los campos en grupos, por si necesitas crear diferentes campos para varios custom posts o páginas concretas, así que lo primero que haremos será crear un Nuevo Grupo de Campos:

Lo primero será darle un título al nuevo Grupo de Campos, por ejemplo «Detalles Vehículos».

Antes de añadir los campos, vamos a ver algunos ajustes importantes del nuevo grupo de campos, para empezar su ubicación.

Ubicación del grupo de campos

Lo que nos interesa es que este grupo de campos aparezca en el modo de edición de Vehículos, siendo irrelevante que aparezca en otros modos de edición como Entradas o Páginas.

Así que definiremos la ubicación en los Post Type que sean igual a Vehículo:

Ajustes del grupo de campos

En el apartado de Ajustes definiremos el estilo del grupo de campos, lo recomendable es utilizar el estilo Estándar (WP metabox) que permite la funcionalidad de arrastarlo y soltarlo en la posición que deseemos. Y hablando de posiciones, la siguiente opción nos permite ubicarlo en la zona de central del modo edición (antes o después del contenido) o en el sidebar (lateral).

Agregando campos

Ahora vamos a agregar los campos que necesitemos:

Vamos a agregar un campo para el precio:

Los parámetros más importantes son la Etiqueta (texto que se mostrará en la página de edición), el Nombre del campo (identificador único sin espacios ni caracateres especiales) y opcionalmente, un campo para las intrucciones. Por ejemplo, para el campo Precio vamos a insertar un campo de tipo numérico, puede que un futuro nos interese ordenar los resultados de una búsqueda de vehículos por su precio y si lo especificamos como una cadena de caracteres (con puntuaciones, símbolos de moneda…), el sistema no sabría ordenarlo correctamente, por lo que solo se introducirán números sin puntuaciones ni signos.

Vamos a añadir un par de campos más, uno para la matrícula (de tipo texto) y otro para observaciones internas (de tipo área de texto):

Una vez definidos todos los campos, publicamos:

Publicar el primer Vehículo

Ya estamos listos para publicar un nuevo vehículo. Como en toda entrada pondremos un título y un texto descriptivo y seleccionaremos su/s taxonomía/s, en este caso «Automóvil»:

En la taxonomía de Extras rellenaremos algunas como: Aire Acondicionado, Dirección Asistida, ABS, etc. Y en nuestros nuevos campos personalizados rellenaremos el precio, la matrícula y las observaciones internas.

Ahora que ya tenemos nuestro nuevo contenido publicado es el momento de crear un Template para mostrarlo en pantalla, pero eso lo veremos en el próximo post

Las taxonomías sirven para categorizar, organizar y filtrar nuestros contenidos de una forma mucho más concisa que utilizando el simple cajetín de categorías que WordPress incorpora por defecto. De hecho, tanto las categorías como las etiquetas de WordPress son en sí taxonomías. Veremos más adelante por qué.

Continuando con el ejemplo del concesionario de vehículos, supongamos que necesitamos catalogar estos vehículos de diferentes formas. Por ejemplo, podríamos categorizarlos por tipo de vehículo: coche, camión, motocicleta…, pero también podríamos necesitar categorizarlo por el tipo de motor: diesel, gasolina, eléctrico…, por el número de puertas: 3, 4, 5…, por la marca, color, etc.

En este caso, la categoría por defecto se nos quedaría corta, de ahí que necesitemos extender el número de «categorías» para definir correctamente el vehículo. Esa es la función principal de las taxonomías.

Además, gracias a las taxonomías, podremos construir consultas personalizadas para mostrar únicamente las entradas que tengan marcadas esas taxonomías.

Para declarar una taxonomía, utilizaremos como siempre, el archivo de funciones del tema activo (functions.php) o nuestro propio plugin de funciones. Podemos declarar todas las taxonomías que necesitemos utilizando la misma función.

Declara una taxonomía

function mis_taxonomias(){
    //Tipo de Vehículo
    $labels = array(
     'name' => _x('Tipo de Vehículo', 'taxonomy general name', 'twentysixteen'),
     'singular_name' => _x('Tipo de Vehículo', 'taxonomy_general_name', 'twentysixteen'),
     'search_items' => __('Buscar Tipo de Vehículo', 'twentysixteen'),
     'all_items' => __('Todos los Tipos de Vehículos', 'twentysixteen'),
     'parent_item' => __('Padre Tipo de Vehículo', 'twentysixteen'),
     'parent_item_colon' => __('Padre Tipo de Vehículo', 'twentysixteen'),
     'edit_item' => __('Editar Tipo de Vehículo', 'twentysixteen'),
     'update_item' => __('Actualizar Tipo de Vehículo', 'twentysixteen'),
     'add_new_item' => __('Añadir Nuevo Vehículo', 'twentysixteen'),
     'new_item_name' => __('Nuevo Tipo de Vehículo', 'twentysixteen'),
     'menu_name' => __('Tipo de Vehículo', 'twentysixteen'),
    );
    $args = array(
     'hierarchical'  => true,
     'labels'  => $labels,
     'show_ui'  => true,
     'show_admin_column'     => true,
     'query_var'  => true,
     'rewrite'  => array('slug' => 'tipo_de_vehiculo'),
    );
    register_taxonomy('tipo-vehiculo', array('vehiculos'), $args);
}
add_action('init','mis_taxonomias');

La función register_taxonomy() es la encargada de declarar nuestras taxonomías personalizadas.

La declaración es bastante similar a declarar un nuevo custom post. Por un lado recibe las etiquetas (labels) para los textos que se mostrará en el panel de WordPress, y por otro los argumentos (args) que definen las caracteríticas y el comportamiento.

Los argumentos más interesantes son:

• hierarchical: su estado puede ser true o false. Si es true, la taxonomía mostrará los elementos a modo de listado para seleccionarlos tal y como se hace con las Categorías de WordPress. Si está en false, la taxonoḿia se verá como un campo de texto, donde insertaremos manualmente el nombre de los elementos de la taxonomía (como las Etiquetas de WordPress).
• rewrite: Donde especificaremos el slug de la taxonomía, que nos permitirá usar en un nuevo template para obtener un listado de las entradas que incluyan dicha taxonomía.

Una vez declarada, esta taxonomía se incluirá directamente como submenú dentro del menú de Vehículos (nuestro custom posts):

Accediendo a la taxonomía podremos añadir elementos:

Una vez creados los elementos de la taxomía, si añadimos un nuevo vehículo veremos el cajetín de la taxonomía, con su listado de elementos a modo de nueva categoría.

Aprovechando la misma funcion (mis_taxonomias()), vamos a añadir una nueva categoría pero de un estilo más «flexible», donde vamos a especificar los «extras» del vehículo: aire acondicionado, pintura metalizada, dirección asistida, navegador…). Para ello crearemos una taxonomía al estilo de Etiquetas de WordPress.

//Extras del Vehículo
    $labels = array(
     'name' => _x('Extras', 'taxonomy general name', 'twentysixteen'),
     'singular_name' => _x('Extras', 'taxonomy_general_name', 'twentysixteen'),
     'search_items' => __('Buscar Extras', 'twentysixteen'),
     'all_items' => __('Todos los Extras', 'twentysixteen'),
     'parent_item' => __('Padre Extras', 'twentysixteen'),
     'parent_item_colon' => __('Padre Extras', 'twentysixteen'),
     'edit_item' => __('Editar Extras', 'twentysixteen'),
     'update_item' => __('Actualizar Extras', 'twentysixteen'),
     'add_new_item' => __('Añadir Extras', 'twentysixteen'),
     'new_item_name' => __('Nuevo Extras', 'twentysixteen'),
     'menu_name' => __('Extras', 'twentysixteen'),
    );
    $args = array(
     'hierarchical'  => false,
     'labels'  => $labels,
     'show_ui'          => true,
     'show_admin_column'     => true,
     'query_var'  => true,
     'rewrite'  => array('slug' => 'extras'),
    );
    register_taxonomy('extras', array('vehiculos'), $args);

Para conseguir el aspecto de taxonomía a modo de etiquetas, solo tenemos que definir el parámetro ‘hierarchical’ en false.

Ahora que sabemos cómo declarar nuevas taxonomías, crearemos algunas más que usaremos para hacer pruebas.

En el siguiente post veremos cómo crear campos personalizados internos para nuestro custom post, como por ejemplo, un campo para el precio, otro para el año de fabricación, el kilometraje (si el vehículo es usado), etc.

Imaginemos que estamos desarrollando la web de un concesionario de vehículos y queremos publicarlos de forma que cada vehículo se trate como una entrada individual, y así poder categorizarlos, añadirles etiquetas, realizar búsquedas, etc.

Los custom post pueden ser declarados en el archivo de funciones del tema activo (functions.php) o en nuestro propio plugin de funciones.

Declarar un custom post

La estructura básica para añadir el nuevo custom post sería:

<?php
//Custom Post Vehículos
function post_Vehiculos(){
 $labels = array(
 'name'               => _x('Vehículos', 'twentysixteen'),
 'singular_name'      => _x('Vehículo', 'post type singular name', 'twentysixteen'),
 'menu_name'          => _x('Vehículos', 'admin menu', 'gestiona-inmobiliaria'),
 'name_admin_bar'     => _x('Vehículos', 'add new on admin bar', 'twentysixteen'),
 'add_new'            => _x('Añadir Vehículo', 'book', 'twentysixteen'),
 'add_new_item'       => __('Añadir Nuevo Vehículo', 'twentysixteen'),
 'new_item'           => __('Nuevos Vehículos', 'twentysixteen'),
 'edit_item'          => __('Editar Vehículo', 'twentysixteen'),
 'view_item'          => __('Ver Vehículo', 'twentysixteen'),
 'all_items'          => __('Todos los Vehículos', 'twentysixteen'),
 'search_items'       => __('Buscar Vehículos', 'twentysixteen'),
 'parent_item_colon'  => __('Parent Vehículos:', 'twentysixteen'),
 'not_found'          => __('No se han encontrado Vehículos', 'twentysixteen'),
 'not_found_in_trash' => __('No se han encontrado Vehículos en la papelera', 'twentysixteen')
 );
 $args = array(
     'labels'             => $labels,
     'description'        => __('Description.', 'twentysixteen'),
     'public'             => true,
     'publicly_queryable' => true,
     'show_ui'            => true,
     'show_in_menu'       => true,
     'query_var'          => true,
     'rewrite'            => array('slug' => 'vehiculos'),
     'capability_type'    => 'post',
     'has_archive'        => true,
     'hierarchical'       => false,
     'menu_position'      => 6,
     'supports'           => array('title', 'editor', 'author', 'thumbnail'),
 );
 register_post_type('vehiculos', $args);
}
add_action('init', 'post_Vehiculos');
?>

La función contiene 2 elementos principales, las etiquetas ($labels) y los argumentos ($args).

Las etiquetas hacen referencia a los textos que muestra WordPress acerca del custom post, tales como el nombre en singular, en plural, cómo se muestra en el menú, el texto para añadir uno nuevo, para editarlo, etc.

Los argumentos tratan cómo se comportará el custom post, algunos parámetros interesantes son:

• rewrite: el slug que generará nuestro custom post, ejemplo: www.tudominio.com/vehiculos/url_del_post. Es importante escoger uno apropiado de cara al SEO.
• capability_type: especifica si el custom post se va a comportar como una página interna (para información fija) o como un post (entrada). Normalmente pondremos tipo post.
• has_archive: define si el custom post va a tener su propio archivo-listado de posts.
• menu_position: Controla en qué posición del menú aparecerá el nuevo custom post, por ejemplo, antes o después de las Entradas normales. Podemos jugar con el número hasta dejarlo donde queremos.
• supports: Define los elementos que podremos utilizar dentro del custom post, por ejemplo un campo para el título, el editor de WordPress, el autor y la imagen destacada (thumbnail).

Una vez declarado estará disponible en nuestro menú:

Si añadimos un nuevo vehículo, veremos una pantalla de edición muy similar a las entradas, con su campo para el título, el editor de WordPress, la selección del autor y la imagen destacada:

Sin embargo esto podríamos enriquecerlo mucho más, añadiendo categorías, taxonomías y campos personalizados que desatarán realmente todo el potencial de los custom post y que harán que podamos realizar prácticamente cualquier tipo de web.

Veremos cómo integrarlos en siguientes posts.

Lo primero, por supuesto es contar con una cuenta de PayPal, así que si no dispones de ella, ábrela en pocos minutos.

Botón de donaciones PayPal con Plugin

Una vez creada nuestra cuenta en PayPal, la forma más cómoda y rápida de crear nuestro botón de donaciones es através de un plugin, en concreto usaremos PayPal Donations, un plugin gratuito y de código abierto.

Una vez instalado y activado, nos dirigimos al menú – Ajustes – PayPal Donations:

1. Configurar la cuenta

Insertamos nuestra dirección de correo de PayPal y seleccionamos la moneda en la que queremos recibir los pagos:

2. Ajustes opcionales

En nuestra cuenta de Paypal es posible crear plantillas de página de pago adaptadas según el tipo de pago que se vaya a realizar, por ejemplo puedes personalizar una página para pagos de tipo ventas, de tipo suscripción o de tipo donaciones. Si la hemos definido podemos especificarla en el campo «Estilo de página«, si no se especifica, se utilizará la página de pago por defecto.

En la página de retorno redigiremos a nuestro usuario a una URL concreta, por ejemplo, una página de agradecimiento.

3. Por defecto

Podemos fijar una cantidad por defecto para el donativo. Si lo dejamos en blanco, será el usuario el que tenga que introducir la cantidad a donar:

Motivo de la donación: Es un texto opcional que aparecerá en la página de pago de Paypal, así como la Referencia, otro campo opcional.

4. Botón de donación

En este apartado seleccionaremos el estilo para nuestro botón, permitiéndonos poder utilizar nuestro propio diseño especificando la URL de la ubicación de la imagen. Asímismo seleccionamos el idioma por defecto y guardamos los cambios.

5. Ajustes avanzados

Algunos ajustes extras que nos ofrece el plugin se centran en la activación o desactivación de estadísticas, estilos CSS del botón, abrir la página de pago en PayPal en una nueva pestaña (para no perder el foco de nuestro sitio web), idiomas, etc. Si no estás seguro de lo que haces, mi recomendación es que lo dejes como está por defecto.

Otra opción interesante es activar el modo Sandbox de PayPal. Para ello necesitas crear una cuenta sandbox en http://developer.paypal.com. Sandbox es una especie de web clon de PayPal para pruebas. En ella, podrás crear cuentas de administrador y de cliente para probar el sistema de pagos en tu sitio web con compras ficticias.

Terminados de configurar los ajustes, podrás llamar a tu botón de donativos en cualquier parte de tu web utilizando el shortcode:

[paypal-donation]

Así mismo disponemos de un widget listo para arrastrar y soltar el cualquier sidebar (lateral, header o footer…)

Botón de donaciones PayPal sin Plugin

La alternativa a usar un plugin es crear nuestro propio botón de Donaciones desde el panel administrador de PayPal y obtener un código HTML que necesitamos pegar en nuestro sitio.

Debido a los cambios que pueda realizar PayPal en su panel de control, es posible que encuentres diferencias entre las capturas del artículo y el estado actual del panel de PayPal.

Para crear un botón de donaciones en PayPal tenemos que acceder al menú «Herramientas – Todas las Herramientas» y localizar el apartado Botones de PayPal.

En el menú derecho seleccionamos Crear nuevo botón

Seleccionamos tipo de botón: Donativos

En el primer paso seleccionamos país, idioma y aspecto del botón:

En el siguiente paso podemos especificar nuestro logotipo para la página de pago, nuestro nombre, un texto opcional para la causa de la donación y si queremos seleccionar uno de los programas con los que PayPal colabora para donaciones. De no ser el caso, indicaremos que no.

En el siguiente paso especificamos la moneda por defecto (EUR), y seleccionaremos si queremos fijar un importe fijo para el donativo o que sea el usuario quien lo especifique. También podemos ofrecerle al usuario la posibilidad de convertirlo en un donativo periódico, que se efectúe mensualmente.

Opciones finales

Las últimas opciones de configuarción se dividen en 4 apartados.

En primer lugar podemos especificar si queremos obtener las direcciones de correo electrónico de los donantes y si queremos permitir a los donantes enviar una nota junto al donativo.

El siguiente apartado hace referencia a las URLs de redirección, una para cuando se completa correctamente un donativo y otra para cuando se produce un error en el mismo.

En esta opción decidiremos si PayPal nos reconocerá por nuestra dirección de correo electrónico de PayPal o por nuestro ID de vendedor. PayPal recomienda utilizar el ID de vendedor, de esta forma nuestra dirección de e-mail no quedará expuesta a posibles bots de SPAM.

Recordemos que a la hora de configurar el plugin PayPal Donations, tuvimos que especificar la dirección de correo de nuestra cuenta de PayPal (no el ID), por lo que crear el botón de donativos de esta forma es una ventaja (a parte de óptimo).

La última opción está destinada a usuarios avanzados o desarrolladores. En resumen, sirve para enviar ciertas variables a un script de nuestro sitio web que procese la información de pago de PayPal, por si el desarrollador quiere hacer alguna función o tarea cada vez que se reciba un pago en el sitio web.

Para terminar, pulsamos el botón Finalizar y obtener código:

Para pegar este código HTML, solo tenemos que irnos a cualquier página o entrada y poner el editor de WordPress en modo HTML:

Si estamos usando el nuevo editor Gutemberg, solo tenemos que añadir un bloque de HTML Personalizado y pegar el código:

O si queremos añadirlo como un widget, usaremos el Widget de HTML Personalizado:

Y eso es todo. ya no hay excusa para no integrar nuestro propio botón de donaciones en nuestro sitio web

Cuántas veces hemos generado formularios con campos selects interminables (por ejemplo un listado de clientes, de países, de productos…). Navegar a través de un select de varios cientos de elementos es algo tedioso que seguramente tu cliente o empresa te pedirá solucionar.

Lo más óptimo sería ofrecer un campo de búsqueda dentro del propio select aprovechando jQuery y algo de CSS, lo que nos tocaría unas cuantas horas de investigar y programar.

Afortunadamente existe Select2, una librería pensada precisamente para esto, insertar un campo de búsqueda dentro del campo select que deseemos y que además sea sencillo de implementar.

Instalación de select2

Para empezar vamos a llamar a los dos archivos (css y js) necesarios para ejecutar el script y que tendrán que llamarse dentro del <head></head> de nuestra página.


<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Para WordPress tendremos que integrarlos a través de una función que podemos llamar en nuestro archivo de funciones (functions.php):

function buscador_en_select(){
    wp_enqueue_style('estilos-select', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css', array(),'1.0');
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('script-select', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js', array('jquery'), '1.0');
    wp_enqueue_script('mi-script', get_template_directory_uri().'/js/mi-script.js', array('script-select'),'1.0');
}
add_action('wp_enqueue_scripts', 'buscador_en_select');

Como véis, hemos llamado también a jQuery, por si no está ya implementado en el tema y además hemos llamado a mi-script, que es un archivo que crearemos y subiremos al directorio del tema activo en la carpeta js (la crearemos si no existe).

Mi Script

Para integrar select2 crearemos un pequeño script en un archivo al que llamaremos mi-script.js y que guardaremos en la ruta /wp-content/themes/tema-activo/js/mi-script.js.

En él insertaremos el siguiente código:

jQuery(document).ready(function($){
    $(document).ready(function() {
        $('.mi-selector').select2();
    });
});

La línea $(‘mi-selector’).select2() indica que a todos los select que especifiquemos con la clase ‘mi-selector’, se les aplicará la funcionalidad de integrar un buscador.

Por ejemplo:

<select class='mi-selector' name='marcas'>
    <option value=''>Seleccionar una marca</option>
    <option value='audi'>Audi</option>
    <option value='bmw'>BMW</option>
    <option value='citroen'>Citroen</option>
    <option value='fiat'>Fiat</option>
    <option value='ford'>Ford</option>
    <option value='honda'>Honda</option>
    <option value='hyundai'>Hyundai</option>
    <option value='kia'>Kia</option>
    <option value='mazda'>Mazda</option>
</select>

Se vería así:

También funciona perfecto con campos de selección múltiple, solo tenemos que especificarlo en el select, nombrándolo con corchetes (array) y especificando:

multiple="multiple"

<select class='mi-selector' name='marcas[]' multiple='multiple'>

Quedando así:

Como véis, muy sencillo de implementar y muy práctico. Seguro que nos sacará de más de un apuro.

Si te ha gustado, compártelo para que más gente pueda aprovecharlo. Nos vemos en el siguiente post

Uno de los problemas que me he encontrado recientemente con Manjaro Linux es la instalación de Dropbox. Al parecer, el paquete de Dropbox disponible en los respositorios o paquetería AUR no está soportado actualmente y lanza un error durante la instalación.

La otra opción es descargar Dropbox desde su web oficial, compilarlo manualmente o hacer una instalación por línea de comandos.

Esta última opción es la que te recomiendo.

Descargar Dropbox mediante línea de comandos

Antes de decirte el código que debes pegar en tu terminal para descargar Dropbox mediante línea de comandos, te voy a instar a acudir a la página de descarga de Dropbox:

Fíjate hacia la parte final donde encontrarás las líneas para la descarga. Escoge la versión de 64 bits (si estás usando Manjaro Linux actualizado no existirá ya versión de 32 bits).

cd ~ && wget -O - "https://www.dropbox.com/download?plat=lnx.x86_64" | tar xzf -

Pégala en tu terminal y espera a que se instale.

Una vez instalada ya puedes ejectutar DropBox con el comando:

~/.dropbox-dist/dropboxd

El problema es que si cierras la ventana del terminal, también se cerrará Dropbox, por lo que te recomiendo que lo añadas como una aplicación a ejecutar al inicio del sistema.

Iniciar Dropbox automáticamente al inicio de sesión

Sea cual sea el entorno de escritorio que estés utilizando, tendrás una opción para ver las aplicaciones que se ejecutan al inicio del sistema. En el caso de XFCE, busca «Sesión e inicio«:

Dirígete a la pestaña de Autoarranque de aplicaciones y pulsa en añadir:

Pon un nombre a la aplicación y una descripción (opcional) y en el campo «Orden» haz clic en el icono de flecha:

En tu directorio /home/tu_usuario/ localiza el directorio .dropbox-dist (este es un directorio oculto, asegúrate de que se muestran haciendo clic derecho y marcando «mostrar archivos ocultos».

Localiza el archivo dropboxd, pues es la aplicación que necesitas ejecutar para abrir Dropbox cada vez que inicies sesión en tu PC.

Una vez añadida, asegúrate de que aparece en la lista de autoarranque de aplicaciones y ya no te tendrás que preocupar más de iniciar Dropbox de forma manual.

Espero que te haya sido útil este artículo y disfruta de tu nube

Un aliciente para conseguir más ventas en nuestra tienda online es la de ofrecer promociones o descuentos a partir de una cantidad mínima de pedido. Unos de los recursos más utilizados es ofrecer el envío gratuito.

Siendo conscientes de que a WooCommerce le queda un largo camino para convertirse en un estándar como plataforma de E-Commerce, debido precisamente a sus muchas carencias y limitaciones en su base, podemos ofrecer esta alternativa de envío gratuito no sin algún que otro «extraño» que como veremos en este artículo podremos solucionar aplicando un pequeño «parche».

Añadiendo el método de envío gratuito

Desde el «limitado» configurador de envíos de WooCommerce, supongamos que tenemos un coste fijo de 4.5€ por envío, pero queremos que cuando el carrito llegue o supere los 50€, el envío salga gratis.

Para ellos nos dirigiremos a la sección de Envío dentro de WooCommerce:

En el que podemos ver que para la zona España existe un método de envío configurado consistente en un precio fijo, sea cual sea el importe de carrito.

Vamos a añadir un nuevo método de envío para la zona de España, haciendo clic en el enlace España, y el botón Añadir método de Envío:

En la ventana modal que se abrirá seleccionamos de la lista: Envío gratuito y lo añadimos como método de envío:

Ahora editamos el nuevo método de envío, pasando el ratón por encima, aparecerá el enlace Editar:

En esta pantalla podemos seleccionar el nombre que aparecerá como Envío en el carrito de compra (por defecto Envío gratuito), y seleccionaremos la condición requerida para que el método de envío se active.

En este caso seleccionaremos «Una cantidad mínima de pedido», y en el siguiente campo el importe mínimo (50€).

Guardamos los cambios y añadimos unos cuantos artículos al carrito para ver el resultado.

Podemos fijarnos que el método de Envío gratuito aparece al cumplirse la condición de que el carrito supere los 50€, pero esta no es una «solución natural», ya que obligas al cliente a elegir el método de envío gratuito, cosa que no tiene sentido, pues ningún cliente querría seleccionar pagar por el envío. Es más, si el cliente se equivoca y elige pagar, para después descubrir que le podría haber salido gratis, seguramente recibamos una reclamación, y no queremos eso.

Lo ideal sería, que superados los 50€ en el carrito, se activase automáticamente el envío gratuito y no apareciera ninguna opción más.

Añadiendo la función al archivo de funciones del tema activo

Eso han debido pensar los desarrolladores de WooCommerce, ya que ellos mismos han lanzado una función para este problema, que de momento, en la versión 3.5.3, no está integrada en el núcleo.

En la siguiente página de la documentación oficial de WooCommerce, podréis encontrar la función según vuestra versión:

URL documentación: https://docs.woocommerce.com/document/hide-other-shipping-methods-when-free-shipping-is-available/

Para versiones de WooCommerce 3.0 en adelante, hay que incluir este código en el archivo de funciones de vuestro tema activo, o en vuestro plugin de funciones personales si lo tenéis habilitado:

/**
 * Hide shipping rates when free shipping is available.
 * Updated to support WooCommerce 2.6 Shipping Zones.
 *
 * @param array $rates Array of rates found for the package.
 * @return array
 */
function my_hide_shipping_when_free_is_available( $rates ) {
 $free = array();
 foreach ( $rates as $rate_id => $rate ) {
 if ( 'free_shipping' === $rate->method_id ) {
 $free[ $rate_id ] = $rate;
 break;
 }
 }
 return ! empty( $free ) ? $free : $rates;
}
add_filter( 'woocommerce_package_rates', 'my_hide_shipping_when_free_is_available', 100 );

Y este para versiones de WooCommerce hasta la 2.5:

/**
 * woocommerce_package_rates is a 2.1+ hook
 */
add_filter( 'woocommerce_package_rates', 'hide_shipping_when_free_is_available', 10, 2 );
 
/**
 * Hide shipping rates when free shipping is available
 *
 * @param array $rates Array of rates found for the package
 * @param array $package The package array/object being shipped
 * @return array of modified rates
 */
function hide_shipping_when_free_is_available( $rates, $package ) {
  
  // Only modify rates if free_shipping is present
   if ( isset( $rates['free_shipping'] ) ) {
   
   // To unset a single rate/method, do the following. This example unsets flat_rate shipping
   unset( $rates['flat_rate'] );
   
   // To unset all methods except for free_shipping, do the following
   $free_shipping          = $rates['free_shipping'];
   $rates                  = array();
   $rates['free_shipping'] = $free_shipping;
 }
 
 return $rates;
}

En nuestro ejemplo vamos a ir a Apariencia – Editor y seleccionamos nuestro tema activo. Localizamos el archivo de funciones (functions.php) y pegamos el código al final del archivo.

Muy importante: Siempre que hagamos cambios en archivos internos del tema, hacer una copia de seguridad del archivo.

Actualizamos y antes de probar la nueva función, vaciamos la caché de WooCommerce en:

WooCommerce – Estado – Pestaña Herramientas – Borrar datos temporales

Ahora sí, nos dirigimos nuevamente al carrito y actualizamos:

/**
 * Hide shipping rates when free shipping is available, but keep "Local pickup" 
 * Updated to support WooCommerce 2.6 Shipping Zones
 */

function hide_shipping_when_free_is_available( $rates, $package ) {
	$new_rates = array();
	foreach ( $rates as $rate_id => $rate ) {
		// Only modify rates if free_shipping is present.
		if ( 'free_shipping' === $rate->method_id ) {
			$new_rates[ $rate_id ] = $rate;
			break;
		}
	}

	if ( ! empty( $new_rates ) ) {
		//Save local pickup if it's present.
		foreach ( $rates as $rate_id => $rate ) {
			if ('local_pickup' === $rate->method_id ) {
				$new_rates[ $rate_id ] = $rate;
				break;
			}
		}
		return $new_rates;
	}

	return $rates;
}

add_filter( 'woocommerce_package_rates', 'hide_shipping_when_free_is_available', 10, 2 );

Veremos cómo ahora, el envío gratuito es activado automáticamente si el importe del carrito es igual o supera los 50€, no mostrando ni permitiendo seleccionar otro método.

Espero que este tipo de «parches» y complementos se vayan incorporando o afinando en el núcleo de WooCommerce en el futuro, si queremos tener una plataforma completa de e-commerce, más que un añadido de WordPress para vender productos. Seguro que poco a poco lo vamos consiguiendo…

Si te ha gustado el artículo, no olvides compartirlo en tus redes o guardarlo en tus favoritos para futuras consultas.

Nos vemos en el siguiente post!

Si has desarrollado una página web responsive (que se adapta correctamente a dispositivos móviles), puedes aprovecharla para crear una Aplicación Android que cargue tu sitio web y contar con otro medio de difusión más para tu proyecto.

Aunque las Aplicaciones Web no aprovechan las capacidades de un smartphone o tablet del mismo modo que una APP nativa, pueden ser útiles para lanzar una versión APP móvil de tu tienda online, o catálogo de productos para enseñar a tus clientes, o  un sistema de reservas para tu restaurante o para alquilar tus inmuebles. Hay múltiples sectores en los que sería aprovechable, y al usar un recurso que ya tienes creado (tu web) supone un ahorro importante al no tener que realizar un desarrollo desde cero para la APP.

Para crear tu Web APP necesitarás instalar el kit de desarrollo para aplicaciones Android Studio de Google.

Puedes descargarlo para tu sistema operativo desde la web: https://developer.android.com/studio/?hl=es-419

Desde sistemas GNU/Linux, es muy problable que lo encuentres en los repositorios de tu distribución o como paquete snap.

Una vez instalado, antes de crear la aplicación, vamos a descargar algunos SDK sobre los que trabajar. Para ello hacemos clic en el botón Configure -> SDK Manager:

A continuación seleccionamos los SDKs que nos interese para nuestras aplicaciones. Algunas funciones o métodos pueden variar según lanzan nuevas versiones de Android, por ello,  para desarrollar nuestra APP podemos elegir algunos SDKs sobre los que implementarla. Para nuestro WebView, vamos a partir desde Android 4.4 KitKat, que funcionará según Android Studio, en el 95% de los dispositivos Android de hoy en día.

Yo por ejemplo, tengo descargados los SDK de KitKat (4.4 API 19), Lollipop (5.1 API 22), Nougat (7.1.1 API 25) y Pie (9.0 API 28) que viene por defecto.

Una vez descargados creamos un nuevo proyecto:

Primero nos pedirá dar un nombre a la aplicación:

A continuación debemos seleccionar la API que se considera mínima para hacer funcionar la aplicación. Lo recomandable, para llegar al mayor número de dispositivos posibles, es seleccionar una API baja, si nuestra APP no va tener métodos o funcionalidades que solo se encuentran en APIs recientes.

Para nuestro WebView vamos a partir de la API 19, correspondiente a la versión Android 4.4 KitKat, que según Android Studio, funcionará en más del 95% de los dispositivos Android de hoy en día.

En la siguiente pantalla vamos a seleccionar una Actividad Vacía (Empty Activity). Las actividades son como las pantallas de la aplicación (o las páginas de una web). En nuestra aplicación solo vamos a tener una Actividad con el componente WebView que cargará nuestro sitio web:

Damos un nombre a nuestra actividad, por ejemplo, Principal:

Finalizamos y esperamos unos segundos a que se cargue toda la interfaz. Es posible que durante la carga aparezcan algunos mensajes de error. No te preocupes, desaparecerán cuando se haya cargado todo el entorno de desarrollo.

La interfaz principal nos muestra dos archivos principales, el layout activity_principal.xml y la clase Principal.java. Sin pretender hacer un manual de Android Studio o de desarrollo de aplicaciones móviles, resumidamente podríamos decir que el Layout (XML) es donde se crean los elementos de la interfaz de la aplicación (textos, imágenes, botones…), y las Clases (java) donde se programa la funcionalidad de esos elementos.

Para añadir nuestro WebView, abrimos la pestaña activity_principal.xml y desde la Paleta de Elementos, arrastramos un Widget de WebView hacia la interfaz de la aplicación:

En las propiedades de WebView (a la derecha), damos un identificador (ID), por ejemplo visorWeb (si vas a utilizar el código de este ejemplo para tu aplicación, utiliza también el mismo identificador):

Ahora vamos ajustar el ancho y alto del WebView para que ocupe el máximo de la pantalla del dispositivo en el que se visualice. Para ello hay que definir el layout_width y el layout_height en «fill_parent«:

Ahora pasamos a la pestaña Principal.java.

Añadimos la siguiente línea para crear el componente WebView:

WebView miVisorWeb

Si el WebView se marca en color rojo, significa que hay que importar sus métodos y propiedades a la clase actual. Si pasas el ratón por encima del componente, Android Studio te sugerirá que lo importes pulsando Alt + Intro:

Al importar, se añadirá automáticamente la línea import android.webkit.WebView;

Ahora definimos la URL de nuestro sitio web que se cargará en el WebView:

String url = "https://danisanchez.net/";

Y dentro de la función onCreateBundle, añadimos las siguientes líneas:

miVisorWeb = (WebView) findViewById(R.id.visorWeb);
final WebSettings ajustesVisorWeb = miVisorWeb.getSettings();
ajustesVisorWeb.setJavaScriptEnabled(true);
miVisorWeb.loadUrl(url);

miVisorWeb = (WebView) findViewById(R.id.visorWeb) enlaza el componente WebView con el Widget de WebView que añadimos a la interfaz anteriormente a través de su identificador (ID)

Además, habilitaremos el JavaScript para que los elementos JavaScript funcionen correctamente desde la APP.

Y finalmente llamamos a cargar la url que definimos anteriormente: miVisorWeb.loadUrl(url);

Quedando el código de Principal.java de esta forma:

package net.gestionatuweb.miwebapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class Principal extends AppCompatActivity {
    WebView miVisorWeb;
    String url = "https://danisanchez.net/";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_principal);
        miVisorWeb = (WebView) findViewById(R.id.visorWeb);
        final WebSettings ajustesVisorWeb = miVisorWeb.getSettings();
        ajustesVisorWeb.setJavaScriptEnabled(true);
        miVisorWeb.loadUrl(url);
    }

A continuación tenemos que dar a nuestra aplicación permisos para acceder a Internet, de lo contrario no podrá cargar nuestro sitio web.

Para ello tenemos que abrir el archivo Manifest que se encuentra en el árbol de archivos de nuestro proyecto app -> manifests -> AndroidManifest.xml y añadimos la siguiente línea:

<uses-permission android:name="android.permission.INTERNET"/>

Para probar nuestra APP, podemos ir al menú RUN – ‘Run app’.

Hay dos métodos para probar nuestra aplicación. La primera es utilizar un dispositivo Android real, por ejemplo tu smartphone o tablet. Para que este sea reconocido por Android Studio, tendrás que conectarlo por usb al PC y tener en tu smartphone o tablet el modo de Depuración USB Habilitada. Si todo está bien será reconocido en la siguiente pantalla en Connected Devides:

O podemos crear un dispositivo virtual haciendo clic en Create New Virtual Device.

Android Studio nos propone una serie de dispositivos ya preconfigurados, solo tenemos que seleccionar uno de ellos y esperar a que se descargue y configure el nuevo dispositivo:

Ahora abrimos nuestro nuevo dispositivo y comprobamos que la web cargue correctamente:

Nos encontramos con el problema de que el botón «Atrás» de nuestro dispositivo, cierra la aplicación en lugar de volver a una página anterior de nuestro sitio web. Esto ocurre porque el botón «Atrás», no detecta que se esté navegando a través de una página web, si no que intenta ir a una actividad anterior de nuestra aplicación y como solamente tenemos una actividad creada, el siguiente paso hacía atrás consiste en cerrarla.

Para controlar esto podemos añadir el siguiente código dentro del archivo Principal.java:

//Impedir que el botón Atrás cierre la aplicación
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        WebView miVisorWeb;
        miVisorWeb = (WebView) findViewById(R.id.visorWeb);
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (miVisorWeb.canGoBack()) {
                        miVisorWeb.goBack();
                    } else {
                        finish();
                    }
                    return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

Os dejo el código completo del archivo Principal.java por si queréis copiarlo íntegro para vuestras pruebas:

package net.gestionatuweb.miwebapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class Principal extends AppCompatActivity {
    WebView miVisorWeb;
    String url = "https://danisanchez.net/";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_principal);
        miVisorWeb = (WebView) findViewById(R.id.visorWeb);
        final WebSettings ajustesVisorWeb = miVisorWeb.getSettings();
        ajustesVisorWeb.setJavaScriptEnabled(true);
        miVisorWeb.loadUrl(url);
    }
    //Impedir que el botón Atrás cierre la aplicación
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        WebView miVisorWeb;
        miVisorWeb = (WebView) findViewById(R.id.visorWeb);
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (miVisorWeb.canGoBack()) {
                        miVisorWeb.goBack();
                    } else {
                        finish();
                    }
                    return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }
}

Ya solo nos queda definir un icono a nuestra APP y generar el .apk final para poder instalarlo en cualquier dispositivo Android o subirlo a la Play Store.

Para generar el icono de nuestra aplicación, crearemos una nueva Image Asset, posicionándonos sobre el directorio mipmap del proyecto, botón derecho y New Image Asset.

Veremos la pantalla del icono por defecto en todas sus versiones. Para agilizar el trabajo, podemos simplemente reemplazar la imagen por defecto por la imagen que hayamos preparado para nuestro icono en el campo Path:

Localizamos la nueva imagen en nuestro PC:

Podemos usar la barra resize para encajar nuestro nuevo icono en todas las variantes:

En la pestaña Background Layer podemos ajustar el fondo. Para el ejemplo usaremos el color blanco.

Ya solamente queda generar la APK.

Para ello tenemos dos opciones, generar una APK sencilla lista para instalar en cualquier dispositivo manualmente, o crear una APK firmada para el caso en que queramos publicarla en Google Play.

• Generar la APK simple: Nos dirimos al menú Build – Build Bundle(s) / APK/s) – Buid APK(s):

Una vez construida la APK aparecerá el mensaje donde podremos localizarla haciendo clic en «locate», pero si el mensaje desaparece, la APK generalmente se guardará en la ruta de tu proyecto: TuAplicacion / app / build / outputs / apk / debug

• Generar la APK firmada: Nos dirigimos al menú Build – Generate Signed Bundle or APK y escogemos la opción Android App Bundle.

Ahora nos pedirá que seleccionemos un certificado o firma digital para la aplicación:

Si es la primera vez que hacemos este paso en Android Studio, tendremos que crear una firma digital para nuestra aplicación. Esta firma nos reconoce a nosotros como autores legítimos de la aplicación y es necesaria para poder publicar en Google Play:

Rellenamos los datos para el certificado y finalizamos.

Podríamos extendernos mucho más sobre el tema, pero creo que lo esencial está explicado y es suficiente para empezar (y llevamos casi 1500 palabras de artículo!).