Una aplicación de lista de tareas simple que toma las tareas enviadas por el usuario en un formulario y las guarda en una base de datos MySQL. Las tareas también se recuperan de la base de datos y se muestran en la página web con un botón de eliminación al lado de cada tarea. Cuando se hace clic en el botón Eliminar, la tarea se elimina de la base de datos.
Eso es lo que construiremos en este tutorial.
Como de costumbre, creemos nuestra base de datos. Crea una base de datos llamada todo y en él, crea una tabla llamada Tareas. La tabla de tareas tiene solo dos campos, a saber:
- id – int (10)
- tarea – varchar (255)
Ahora crea dos archivos:
Ábrelos en un editor de texto y pega el siguiente código dentro del archivo index.php:
<!DOCTYPE html>
<html>
<head>
<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
<div class="heading">
<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
</div>
<form method="post" action="index.php" class="input_form">
<input type="text" name="task" class="task_input">
<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
</form>
</body>
</html>
Si ve su página ahora en el navegador, se verá así:
Agreguemos el estilo. Directamente debajo de la etiqueta
, agregue esta línea para cargar el archivo de hoja de estilo:</p>
<pre><code class="language-php"><link rel="stylesheet" type="text/css" href="style.css"></code></pre>
<p>Abra el archivo style.css que habíamos creado anteriormente y pegue este código de estilo en él:</p>
<pre><code class="language-css">.heading{
width: 50%;
margin: 30px auto;
text-align: center;
color: #6B8E23;
background: #FFF8DC;
border: 2px solid #6B8E23;
border-radius: 20px;
}
form {
width: 50%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: #FFF8DC;
border: 1px solid #6B8E23;
}
form p {
color: red;
margin: 0px;
}
.task_input {
width: 75%;
height: 15px;
padding: 10px;
border: 2px solid #6B8E23;
}
.add_btn {
height: 39px;
background: #FFF8DC;
color: #6B8E23;
border: 2px solid #6B8E23;
border-radius: 5px;
padding: 5px 20px;
}
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th {
font-size: 19px;
color: #6B8E23;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #E9E9E9;
}
.task {
text-align: left;
}
.delete{
text-align: center;
}
.delete a{
color: white;
background: #a52a2a;
padding: 1px 6px;
border-radius: 3px;
text-decoration: none;
}
</code></pre>
<p><!-- codewithawa.com_300x250: Begin --></p>
<p> <!-- codewithawa.com_300x250 End --></p>
</p>
<p>Si actualizamos nuestro navegador ahora, obtenemos esto:</p>
<p><img width="720" height="203" decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20720%20203'%3E%3C/svg%3E" style="height:24%; width:100%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_730_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png"/><noscript><img width="720" height="203" decoding="async" alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_730_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png" style="height:24%; width:100%"/></noscript></p>
<p>Ahora escribimos el código para guardar la tarea enviada en la base de datos. </p>
<p>En la parte superior del archivo index.php, antes de la primera línea, agregue este código:</p>
<pre><code class="language-php"><?php
// initialize errors variable
$errors = "";
// connect to database
$db = mysqli_connect("localhost", "root", "", "todo");
// insert a quote if submit button is clicked
if (isset($_POST['submit'])) {
if (empty($_POST['task'])) {
$errors = "You must fill in the task";
}else{
$task = $_POST['task'];
$sql = "INSERT INTO tasks (task) VALUES ('$task')";
mysqli_query($db, $sql);
header('location: index.php');
}
}
// ...</code></pre>
<p>Lo que hace esto es que, si el usuario hace clic en el botón enviar, la tarea se guarda en la base de datos. Sin embargo, si no se completó ninguna tarea en el formulario, el valor de la variable $ errores se establece en <em>‘debe completar la tarea’. </em>Pero eso no se muestra. Vamos a mostrarlo.</p>
<p>Peguemos este código dentro del formulario. Directamente debajo de la etiqueta </p>
<form>. Como esto:</p>
<pre><code class="language-php"><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre>
<p><span id="ezoic-pub-ad-placeholder-113" class="ezoic-adpicker-ad"/><span class="ezoic-ad banner-1 banner-1113 adtester-container adtester-container-113" data-ez-name="codewithawa_com-banner-1"><span id="div-gpt-ad-codewithawa_com-banner-1-0" ezaw="300" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;min-height:250px;min-width:300px;" class="ezoic-ad"/></span>Si intentamos enviar el formulario con un valor vacío, obtenemos esto:</p>
<p><img width="693" height="194" decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20693%20194'%3E%3C/svg%3E" style="height:25%; width:100%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_794_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png"/><noscript><img width="693" height="194" decoding="async" alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_794_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png" style="height:25%; width:100%"/></noscript></p>
<p><!-- codewithawa.com_300x250: Begin --></p>
<p> <!-- codewithawa.com_300x250 End --></p>
<p>Hasta ahora, nuestra aplicación guarda tareas en la base de datos, pero no las muestra.</p>
<p>Lo que tenemos que hacer es recuperarlos de la base de datos y luego mostrarlos. </p>
<p>Abra el archivo index.php y pegue este código inmediatamente después de la etiqueta </p></form>
<p> de cierre del formulario:</p>
<pre><code class="language-php">//...
// </form>
<table>
<thead>
<tr>
<th>N</th>
<th>Tasks</th>
<th style="width: 60px;">Action</th>
</tr>
</thead>
<tbody>
<?php
// select all tasks if page is visited or refreshed
$tasks = mysqli_query($db, "SELECT * FROM tasks");
$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
<tr>
<td> <?php echo $i; ?> </td>
<td class="task"> <?php echo $row['task']; ?> </td>
<td class="delete">
<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a>
</td>
</tr>
<?php $i++; } ?>
</tbody>
</table></code></pre>
<p>Si ingresamos una tarea en el formulario y presionamos el botón de enviar, obtenemos esto:</p>
<p><img width="692" height="177" decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20692%20177'%3E%3C/svg%3E" style="height:24%; width:100%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_482_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png"/><noscript><img width="692" height="177" decoding="async" alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_482_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png" style="height:24%; width:100%"/></noscript></p>
<p>¡Bien! </p>
<p>Hagamos que nuestro botón de borrar funcione. En la parte superior de la página, después del bloque if que guarda la tarea en la base de datos, agregue este código:</p>
<pre><code class="language-php">
// delete task
if (isset($_GET['del_task'])) {
$id = $_GET['del_task'];
mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
header('location: index.php');
}
?></code></pre>
<p>Eso es todo. Si hacemos clic en el pequeño botón ‘x’ ahora contra una tarea, esa tarea se elimina de la base de datos.</p>
<h3>Conclusión</h3>
<p>Espero que esto te ayude. Una característica que le recomiendo que agregue a esta aplicación solo para ejercitar aún más sus habilidades es agregar la función de edición donde una publicación se puede actualizar incluso después de haber sido creada. Sugerencia: siga mi tutorial sobre CRUD: cree, edite, actualice y elimine publicaciones con la base de datos MySQL</p>
<p>Gracias: D</p>
<p>Awa Melvine</p>
<h3> </h3>
</p></div>
<p><script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=187693445124711";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></p>
<div class="kk-star-ratings
kksr-valign-bottom kksr-align-center "
data-payload="{"align":"center","id":"1133","slug":"default","valign":"bottom","reference":"auto","count":"666","readonly":"","score":"4.6","best":"5","gap":"4","greet":"Valora este artculo post","legend":"4.6\/5 - (666 votos)","size":"24","width":"126.8","_legend":"{score}\/{best} - ({count} {votes})"}">
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
<div class="kksr-star" data-star="2" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
<div class="kksr-star" data-star="3" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
<div class="kksr-star" data-star="4" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
<div class="kksr-star" data-star="5" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
</div>
<div class="kksr-stars-active" style="width: 126.8px;">
<div class="kksr-star" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
<div class="kksr-star" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
<div class="kksr-star" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
<div class="kksr-star" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
<div class="kksr-star" style="padding-right: 4px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</div>
</div>
</div>
<div class="kksr-legend">
4.6/5 - (666 votos) </div>
</div>
</div>
<footer class="entry-meta">
<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
<path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0 1 43.592 27.907l12.349 26.791A16 16 0 0 0 228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" fill-rule="nonzero"/>
</svg></span><span class="screen-reader-text">Categorías </span><a href="https://2xsoftware.es/category/tutoriales/" rel="category tag">Tutoriales</a></span> <nav id="nav-below" class="post-navigation">
<span class="screen-reader-text">Navegación de entradas</span>
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
<path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero"/>
</svg></span><span class="prev" title="Anterior"><a href="https://2xsoftware.es/2021/12/16/registro-de-usuario-y-verificacion-de-correo-electronico-php-y-mysql/" rel="prev">Registro de usuario y verificación de correo electrónico PHP y MySQL</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
<path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero"/>
</svg></span><span class="next" title="Siguiente"><a href="https://2xsoftware.es/2021/12/16/como-crear-un-blog-en-php-y-una-base-de-datos-mysql-db-design/" rel="next">Cómo crear un blog en PHP y una base de datos MySQL – DB Design</a></span></div> </nav>
</footer>
</div>
</article>
<div class="comments-area">
<div id="comments">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Deja un comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2021/12/16/aplicacion-de-lista-de-tareas-con-php-y-base-de-datos-mysql/#respond" style="display:none;">Cancelar la respuesta</a></small></h3><form action="https://2xsoftware.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-form-comment"><label for="comment" class="screen-reader-text">Comentario</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" required></textarea></p><label for="author" class="screen-reader-text">Nombre</label><input placeholder="Nombre *" id="author" name="author" type="text" value="" size="30" />
<label for="email" class="screen-reader-text">Correo electrónico</label><input placeholder="Correo electrónico *" id="email" name="email" type="email" value="" size="30" />
<label for="url" class="screen-reader-text">Web</label><input placeholder="Web" id="url" name="url" type="url" value="" size="30" />
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Guarda mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Publicar comentario" /> <input type='hidden' name='comment_post_ID' value='1133' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form> </div><!-- #respond -->
</div><!-- #comments -->
</div>
</main>
</div>
<div id="right-sidebar" class="widget-area sidebar is-right-sidebar" itemtype="https://schema.org/WPSideBar" itemscope>
<div class="inside-right-sidebar">
<aside id="recent-posts-2" class="widget inner-padding widget_recent_entries">
<h2 class="widget-title">Entradas recientes</h2>
<ul>
<li>
<a href="https://2xsoftware.es/2023/03/20/revision-de-synology-ds1520-plus-los-numeros-pares-son-cosa-del-pasado/">Revisión de Synology DS1520 Plus: los números pares son cosa del pasado</a>
<span class="post-date">marzo 20, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/19/la-nueva-actualizacion-para-los-autos-tesla-activa-la-camara-interior-para-monitorear-a-los-conductores-durante-el-modo-autopilot/">La nueva actualización para los autos Tesla activa la cámara interior para monitorear a los conductores durante el modo Autopilot</a>
<span class="post-date">marzo 19, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/19/xiaomi-ha-equipado-9-jardines-de-infancia-en-bucarest-con-purificadores-de-aire/">Xiaomi ha equipado 9 jardines de infancia en Bucarest con purificadores de aire</a>
<span class="post-date">marzo 19, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/18/microsoft-podria-anunciar-una-nueva-adquisicion-en-el-e3-2021/">Microsoft podría anunciar una nueva adquisición en el E3 2021</a>
<span class="post-date">marzo 18, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/18/la-serie-insignia-raptor-lake-de-intel-tendra-24-nucleos/">La serie insignia Raptor Lake de Intel tendrá 24 núcleos</a>
<span class="post-date">marzo 18, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/17/los-precios-de-las-tarjetas-de-video-estan-comenzando-a-caer-y-las-existencias-parecen-estar-recuperandose/">Los precios de las tarjetas de video están comenzando a caer y las existencias parecen estar recuperándose</a>
<span class="post-date">marzo 17, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/17/logitech-g-y-mclaren-racing-anuncian-mclaren-g-racing-2021-con-una-carrera-de-celebridades/">Logitech G y McLaren Racing anuncian McLaren G Racing 2021, con una carrera de celebridades</a>
<span class="post-date">marzo 17, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/16/un-estudio-muestra-que-los-dispositivos-amazon-echo-no-eliminan-datos-personales-incluso-despues-de-un-restablecimiento-de-fabrica/">Un estudio muestra que los dispositivos Amazon Echo no eliminan datos personales incluso después de un restablecimiento de fábrica</a>
<span class="post-date">marzo 16, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/16/el-iphone-13-tendra-una-funcion-always-on-display-similar-al-apple-watch/">El iPhone 13 tendrá una función Always-On Display similar al Apple Watch</a>
<span class="post-date">marzo 16, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/15/amazon-esta-considerando-desarrollar-un-kindle-plegable/">Amazon está considerando desarrollar un Kindle plegable</a>
<span class="post-date">marzo 15, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/15/amd-radeon-rx-6600-xt-es-perfecta-para-jugar-con-resolucion-fullhd/">AMD Radeon RX 6600 XT es perfecta para jugar con resolución FullHD</a>
<span class="post-date">marzo 15, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/14/epilogo-microsoft-tech-day-2021/">Epílogo Microsoft Tech Day 2021</a>
<span class="post-date">marzo 14, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/14/diablo-4-y-el-dilema-del-realismo/">Diablo 4 y el dilema del realismo</a>
<span class="post-date">marzo 14, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/13/el-ipad-pro-2022-podria-equiparse-con-un-procesador-de-3nm-producido-por-tsmc/">El iPad Pro 2022 podría equiparse con un procesador de 3nm producido por TSMC</a>
<span class="post-date">marzo 13, 2023</span>
</li>
<li>
<a href="https://2xsoftware.es/2023/03/13/los-jefes-de-codemasters-dimiten-despues-de-que-ea-compra-un-estudio-britanico/">Los jefes de Codemasters dimiten después de que EA compra un estudio británico</a>
<span class="post-date">marzo 13, 2023</span>
</li>
</ul>
</aside> </div>
</div>
</div>
</div>
<div class="site-footer">
<footer class="site-info" itemtype="https://schema.org/WPFooter" itemscope>
<div class="inside-site-info grid-container">
<div class="copyright-bar">
©2xsoftware 2023 </div>
</div>
</footer>
</div>
<script src='https://2xsoftware.es/wp-content/plugins/gp-premium/menu-plus/functions/js/sticky.min.js?ver=1.12.2' id='generate-sticky-js'></script>
<script id='kk-star-ratings-js-extra'>
var kk_star_ratings = {"action":"kk-star-ratings","endpoint":"https:\/\/2xsoftware.es\/wp-admin\/admin-ajax.php","nonce":"e1854b020e"};
</script>
<script src='https://2xsoftware.es/wp-content/plugins/kk-star-ratings/src/core/public/js/kk-star-ratings.min.js?ver=5.3.0' id='kk-star-ratings-js'></script>
<script src='https://2xsoftware.es/wp-content/plugins/interlinks-manager/public/assets/js/track-internal-links.js?ver=1.25' id='daim-track-internal-links-js'></script>
<script id='rocket-browser-checker-js-after'>
"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();
</script>
<script id='rocket-preload-links-js-extra'>
var RocketPreloadLinksConfig = {"excludeUris":"\/(.+\/)?feed\/?.+\/?|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/wp-admin\/|\/logout\/|\/wp-login.php","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|php|pdf|html|htm","siteUrl":"https:\/\/2xsoftware.es","onHoverDelay":"100","rateThrottle":"3"};
</script>
<script id='rocket-preload-links-js-after'>
(function() {
"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();
}());
</script>
<!--[if lte IE 11]>
<script src='https://2xsoftware.es/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.0.3' id='generate-classlist-js'></script>
<![endif]-->
<script id='generate-main-js-extra'>
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Abrir el submen\u00fa","closeSubMenuLabel":"Cerrar el submen\u00fa"};
</script>
<script src='https://2xsoftware.es/wp-content/themes/generatepress/assets/js/main.min.js?ver=3.0.3' id='generate-main-js'></script>
<script src='https://2xsoftware.es/wp-includes/js/comment-reply.min.js?ver=6.1.1' id='comment-reply-js'></script>
<script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://2xsoftware.es/wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script>
<script>"use strict";var wprRemoveCPCSS=function wprRemoveCPCSS(){var elem;document.querySelector('link[data-rocket-async="style"][rel="preload"]')?setTimeout(wprRemoveCPCSS,200):(elem=document.getElementById("rocket-critical-css"))&&"remove"in elem&&elem.remove()};window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><noscript><link rel='stylesheet' id='wp-block-library-css' href='https://2xsoftware.es/wp-includes/css/dist/block-library/style.min.css?ver=6.1.1' media='all' /><link rel='stylesheet' id='classic-theme-styles-css' href='https://2xsoftware.es/wp-includes/css/classic-themes.min.css?ver=1' media='all' /><link rel='stylesheet' id='kk-star-ratings-css' href='https://2xsoftware.es/wp-content/plugins/kk-star-ratings/src/core/public/css/kk-star-ratings.min.css?ver=5.3.0' media='all' /><link data-minify="1" rel='stylesheet' id='wp_automatic_gallery_style-css' href='https://2xsoftware.es/wp-content/cache/min/1/wp-content/plugins/wp-automatic/css/wp-automatic-6304316820f9e5c9d76d1559fbd3b54c.css' media='all' /><link rel='stylesheet' id='generate-comments-css' href='https://2xsoftware.es/wp-content/themes/generatepress/assets/css/components/comments.min.css?ver=3.0.3' media='all' /><link rel='stylesheet' id='generate-style-css' href='https://2xsoftware.es/wp-content/themes/generatepress/assets/css/main.min.css?ver=3.0.3' media='all' /><link rel='stylesheet' id='generate-blog-css' href='https://2xsoftware.es/wp-content/plugins/gp-premium/blog/functions/css/style.min.css?ver=1.12.2' media='all' /><link rel='stylesheet' id='generate-navigation-branding-css' href='https://2xsoftware.es/wp-content/plugins/gp-premium/menu-plus/functions/css/navigation-branding-flex.min.css?ver=1.12.2' media='all' /></noscript></body>
</html>
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me --> 