Si usas Bootstrap en tus desarrollos, a veces tendrás la necesidad de abrir o cerrar una ventana modal desde una función de JavaScript y no haciendo clic en un elemento del DOM de la página, cómo por ejemplo desde el botón de cerrar [X] que hay en cada ventana modal.
Si tienes un modal definido así:
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">para abrirlo sería:
$('#exampleModal').modal({
show:true
});y para cerrarlo sería:
$('#exampleModal').modal('hide')Y si quereis abrir un modal desde otro modal, y que el nuevo modal quede por encima, hay que usar style=»z-index: numero;» en la declaración del modal.
Imaginar que tenemos dos modales:
<div class="modal fade"
id="md_Abajo"
role="dialog"
aria-labelledby="md_AbajoEtiq"
aria-hidden="true">
<div class="modal fade"
id="md_Arriba"
role="dialog"
aria-labelledby="md_ArribaEtiq"
aria-hidden="true">Pues para que los modales se apilen como se espera, debe ordenarlos en su marca de HTML de menor a mayor. Se pone en la declaración del modal lo siquiente: style=´z-index: numero;´ donde numero indica el orden de menor a mayor. Los numeros con z-index menores son los que quedan por debajo.
En nuestro ejemplo:
Modal que queda por abajo
<div class="modal fade"
id="md_Abajo"
role="dialog"
aria-labelledby="md_AbajoEtiq"
aria-hidden="true"
style="z-index: 1600">Modal que queda por encima:
<div class="modal fade"
id="md_Arriba"
role="dialog"
aria-labelledby="md_ArribaEtiq"
aria-hidden="true"
style="z-index: 1900">
Sé que puede parecer una tontería si ya sabeis cómo funciona, pero para los que nos iniciamos, nos viene bien siempre un poco de ayuda.
A veces, cuando desarrollo un nuevo proyecto, y sabemos que va a seguir creciendo con el tiempo, me encuentro con el problema que los archivos js y css, el navegador los «cachea» y no carga los nuevos que han sido modificados. Si el desarrollo lo fuera a usar únicamente yo, con hacer Ctrl-F5 en el navegador ya estoy obligando al navegador a «forzar» la carga desde el servidor, pero lo más normal es que este desarrollo lo use un cliente, y no estaría bien decirle que cada vez que entre en la web haga Ctrl-F5.
Cómo pasa siempre cuando hay dudas, lo mejor es acudir a los que saben. Puse esta pregunta en stackoverflow.com y enseguida me dieron varias respuestas. Ver hilo
De las opciones que me dieron, las que mas me gustaron fueron:
Añadir a la URL un timestamp o número random para forzar a que se considere una URL distinta y que el navegador crea que no la ha visitado antes. Por ejemplo: http://my-server/my-script.js?ts=123412341 o http://my-server/my-stylesheet.css?ts=54352435
Puedes modificar tu .htaccess para prevenir el caché.
De estas dos opciones, pues que cada uno eliga la que más le guste, le resulte fácil o accesible. Si puedes acceder a tu servidor, modifica el .htacces; si no puedes acceder a tu servidor, añade un timestamp a las url de tus ficheros js, css.
Si eliges la segunda opción, tienes que añadir en el .htaccess lo siguiente:
# DISABLE CACHING
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
#listado de extensión de ficheros que no queresmos que se cachée
<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|mp3|mp4|png|pdf|swf|txt)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
</IfModule>
</FilesMatch>Espero que os sirva
En alguna ocasión, nos hemos visto en la necesidad de tener select editables en nuestros formularios. Esto ocurre cuando queremos elegir una opción de una lista desplegables, pero también poder añadir un elemento nuevo a esta lista. He encontrado varias soluciones, pero la que más me gustó y la más sencilla de implementar es la que os comento. No es necesario añadir librería de javaScript. Únicamente unas lineas de CSS y de HTML.
El código CSS es el siguiente:
.select-editable {position:relative; background-color:white; border:solid grey 1px; width:120px; height:18px;}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0;}
.select-editable input {position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}Y el código HTML, donde se define el select (y lo necesario) es el siguiente:
<div class="select-editable">
<select onchange="this.nextElementSibling.value=this.value">
<option value=""></option>
<option value="115x175 mm">115x175 mm</option>
<option value="120x160 mm">120x160 mm</option>
<option value="120x287 mm">120x287 mm</option>
</select>
<input type="text" name="format" value=""/>
</div>Esta solución la encontré en StackOverflow, y podeís ver el funcionamiento en https://jsfiddle.net/nwH8A/
La lógica es sencilla. Básicamente lo que hace es, usando CSS, superponer el campo <input> encima del campo <select>, y con onchange=»this.nextElementSibling.value=this.value» hace que el valor del <select> cuando cambia (onchange) se guarde en el campo<input>. Y es el campo <input>, el que debéis de recoger en el POST, por que es donde va la información. En este caso se recogería con $_POST[«format»]
Yo lo único que hice es modificar un poco el CSS, para poder usarlo con Bootstrap. Este sería mi código CSS para que el <select> se vea con la apariencia que se muestra en Bootstrap.
.select-editable {position:relative}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; color: #555; width:99%; height: 34px; padding: 4px; margin:0; border: 1px solid #ccc; border-radius: 4px;}
.select-editable input {position:absolute; top:0px; left:0px; font-size:14px; color: #555; width:90%; height: 31px; padding: 4px; margin:0; border: none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}Hay más opciones y soluciones, pero muchas de ellas necesitan añadir ficheros js o css a nuestro proyecto, y esta me pareció muy sencilla
Tenía un problema y no tenía ni idea de como solucionarlo.
En mi instancia de WordPress tengo instalado el plugin Jetpack y configurado para que me publique en mis redes sociales (Twitter, Linkedin) las entradas que escribo en mi blog. Hasta aquí todo funciona correctamente. Cuando estoy escribiendo la entrada desde el panel de WordPress, aparece un botón que pone Publicar y luego información de las cuentas de redes sociales en las que se va a publicar la entrada.
El problema que me encontraba era que había creado unos Custom Post Types, y cuando voy a crear una nueva entrada para estos CustomPost Type, el botón de Divulgar estaba deshabilitado, con lo que todas las entradas que creaba para cada uno de los CPT’s no se publican en mis redes sociales.
Después de buscar información y no encontrar nada (puede ser que no supiera hacer la búsqueda correcta), decidí preguntar en el soporte de WordPress (https://es.wordpress.org/support/), y comenté mi problema.
En poco tiempo, no creo que fuera más de un par de horas, ya tenía la solución.
Tienes que activar la opción añadiendo un código en el archivo «functions.php» de tu tema o en tu plugin personalizado (que es donde yo recomiendo):
add_action('init', 'my_function');
function my_function() {
add_post_type_support( 'XX', 'publicize' );
}Sustituyendo XX por el nombre del CPT correspondiente. Si tenéis varios CPT’s, ponéis una linea add_post_type_support( ‘XX’, ‘publicize’ ); por cada uno de los CPT’s que tengáis.
Tambien podeis cambiar my_function por otro nombre que os guste más.
Muchas gracias a @almendron en WordPress.org por su ayuda y comentario. Con estas pocas lineas solucionó mi problema
Podéis ver el hilo de la conversación en: https://es.wordpress.org/support/topic/divulgar-en-redes-sociales-los-custom-post-type/
Además de mostraros como solucionar un problema, también quiero agradecer a la comunidad WordPress la labor que hace dando soporte a todos los usuarios de este CMS.
En algún momento nos hemos visto o nos veremos en la necesidad de realizar copias de seguridad de nuestras bases de datos de MySql que tenemos en nuestros servidores de producción.
Si tenéis instalado el phpMyAdmin, realizar copias de seguridad es muy sencillo: Vas a la opción de Exportar, y con dar al botón de Continuar, y ya tendrías una copia de la base de datos.
¡Fácil y sencillo para toda la familia!. Pero como todos sabemos, los informáticos somos muy vagos; y lo de tener que acordarnos de hacer la copia de seguridad, entrar en el phpMyAdmin….. ¡y esto para cada uno de nuestros servidores! no va con nosotros. ¡¡Nosotros automatizamos tareas!!. No por que seamos eficientes sino porque sólo queremos trabajar una vez.
Si tenemos instalado WordPress en nuestro servidor, podéis utilizar plugins para realizar las copias de seguridad. El plugin que yo uso es el UpdraftPlus. ¿Por qué? Porque cuando empece con el WordPress me pareció el más sencillo de usar. Y para lo que yo necesito me vale. Me realiza una copia de seguridad de la base de datos y de los ficheros en la nube, cuenta FTP,…. La configuración es muy sencilla. Yo lo guardo en DropBox, por que me resulto lo más sencillo.
Pero éste no es el caso que nos atañe: Necesitamos hacer una copia de seguridad automática de una base de datos de MySql, que está en un servidor externo, y en el que no hay instalado WordPress, Joomla, PrestaShop, Drupal …
Lo primero:
Una tarea automática que se ejecute cada cierto tiempo y nos haga la copia de seguridad de la base de datos MySql.
Yo utilizo ordenadores con sistemas Windows y Linux. Los Linux para los servidores, intranets…. y los Windows para el trabajo diario. Yo no soy anti-nada, y me manejo mejor para el trabajo diario con Windows que con Linux, principalmente por que todos mis clientes usan Windows.
Así que esta entrada se basará sobre hacer las copias de seguridad en un ordenador Windows, puesto que la copia de seguridad la realizo en los ordenadores de mis clientes. Para que ellos siempre dispongan de una copia de seguridad. Para los puristas del Linux, seguro que seréis capaces de trasladar estas explicaciones a vuestro entorno :-).
Seguimos…
Tenemos que tener instalado MySql en nuestro ordenador. Si ya tenéis instalado en vuestro ordenador XAMPP, WampServer, o alguna otra plataforma de desarrollo Web, seguramente ya tenéis instalado el MySql, por que estas plataformas te lo instalan. Generalmente también instalan el phpMyAdmin, que es una herramienta web para administrar base de datos MySql. Si escribís en el navegador http://localhost/phpmyadmin/ y os responde con una página, eso es que ya tenéis instalado phpMyAdmin, y por consiguiente, también está el servidor MySql.
Si no tenéis instalado el servidor MySql os dejo un enlace para que realizar la instalación https://comoinstalar.me/como-instalar-mysql-en-windows/ , o podéis buscar en Google, hay infinidad de tutoriales.
Yo tengo instalado la plataforma XAMPP, y al instalar el MySql por defecto lo hace en la carpeta C:\xampp\mysql (si has modificado la ruta en la instalación, debes de ir a la ruta que se indicó al instalar XAMPP). Si usas WampServer, el directorio por defecto es C:\wamp\bin\mysql\mysqlX.X.XX\
Ya tenemos instalado MySql en nuestro ordenador. Ahora usaremos el comando mysqldump para realizar la copia de seguridad
El comando mysqldump está incorporado al servidor MySQL y gracias a ella, podremos realizar copias de seguridad (backup) de nuestras bases de datos, Lo que la hace una herramienta básica para gestionar bases de datos. Este comando te permite conectarte a la base de datos, crear una copia de todas las tablas y guardar toda ls información en un archivo. Este comando genera un fichero de texto, con todas las sentencias necesarias para ralizar la copia de seguridad de la base de datos.
Sentencias CREATE, INSERT, ALTER TABLE….
El comando mysqldump tiene el siguiente formato:
mysqldump -h[HOST] -u[USER] -p[CONTRASEÑA] [BASE_DE_DATOS] > [NOMBRE_ARCHIVO].sql
Donde:
-h[HOST] = HOST(donde está la base de datos)
-u[USER] = usuario (de la base de datos)
-p[CONTRASEÑA] = contraseña (del usuario de la base de datos)
[BASE_DE_DATOS] = nombre de la base de datos
[NOMBRE_ARCHIVO] = nombre del archivo donde se va a realizar la copia de la base de datos.
Por ejemplo, para hacer una prueba sencilla: si el servidor donde está la base de datos es localhost, el usuario de base de datos es root, la contraseña del usuario es claveroot y la base de datos se llama mydatabase, y queremos que el fichero se llame dataBaseBackup.sql, la sentencia sería
mysqldump -hlocalhost -uroot -pclaveroot mydatabase > dataBaseBackup.sql
Al ejecutar este sentencia varias veces, lo que hace es escribir sobre el fichero ya creado. Si queremos tener copias de seguridad de cada día, lo mejor es que el fichero generado tenga en su nombre la fecha. Para ello la sentencia sería así
mysqldump -hlocalhost -uroot -pclaveroot mydatabase > dataBaseBackup_%Date:~6,4%%Date:~3,2%%Date:~0,2%.sql
Esta sentencia creará ficheros de este tipo: dataBaseBackup_20191013.sql
Cómo ves, incluye la fecha de creación en el nombre del fichero, lo que luego nos facilitará el trabajo.
Ya tenemos la sentencia. ¿como la ejecutamos?
Para ello, vamos a crearnos un fichero .bat(recordar que estamos en un entorno Windows).
En un directorio nos creamos un fichero de tipo texto, por ejemplo: backup-base-de-datos.bat. Lo editamos con un editor de textos que no inserte caracteres raros. Podemos usar el Notepad del propio Windows.
Escribimos lo siguiente en el fichero:
echo off
mysqldump -hlocalhost -uroot -pclaveroot mydatabase > dataBaseBackup_%Date:~6,4%%Date:~3,2%%Date:~0,2%.sql
exit
Ejecutamos el fichero haciendo click con el botón derecho y seleccionando la opción «Ejecutar como Administrador»
Cuando se ejecuta este fichero, abré una ventana de la Consola de Windows, el famoso cmd
la sentencia echo off, lo que hace es que no se muestre mensajes en esta ventana, y la sentencia exit cierra la ventana. Así la ejecución es casi invisible para el usuario.
Vale, ya habéis seguido mis instrucciones, ejecutáis el .bat y no funciona. Lo más seguro es que en este caso, el directorio donde se ha instalado Mysql no está definido como variable de entorno. Lo más sencillo es añadir el path en el fichero bat.
En mi caso, recordar que uso XAMPP, el fichero quedaría
echo off
C:\xampp\mysql\bin\mysqldump -hlocalhost -uroot -pclaveroot mydatabase > D:\RESPALDOS_MYSQL\dataBaseBackup_%Date:~6,4%%Date:~3,2%%Date:~0,2%.sql
exit
también he añadido el path donde quiero guardar el fichero. De este modo, indicamos donde está exactamente el comando mysqldump y donde queremos guardar el fichero
Si ejecutáis este .bat modificado, ya os tendría que funcionar. Recordad que debéis colocar vuestros directorios de instalación de MySql.
Ya tenemos el .bat que nos realiza la copia de seguridad. Vamos a crear una tarea en Windows para que ejecute el .bat automáticamente y asó poder olvidarnos de ello
1. Botón Inicio y buscamos tareas.
2. Clic en Programador de Tareas
3. En el Programador de tareas, «Crear tarea básica»
4. Damos un nombre y una descripción a la tarea que vamos a crear
5. Seleccionamos cuando queremos que se ejecute la tarea (Desencadenar tarea)
6. Elegimos la fecha de inicio y la hora que se ejecutara la tarea programada. Estas tareas son convenientes que se ejecuten en un horario que no «moleste». Cuando menos visitas haya en nuestra web.
7. Seleccionamos la acción que va a realizar la tarea. En nuestro caso Iniciar un programa
8. Indicar la ruta donde se encuentra nuestro fichero .bat
9. Ya lo último: una pantalla con un resumen de toda la configuración.
10. Nuestra tarea aparece en la Biblioteca del Programador de Tareas.
Y con esto, ya os podéis olvidar de hacer las copias de seguridad de vuestras bases de datos, ya que un ordenador se va a encargar de ello.
El miércoles 20 de junio tuve el honor de participar como ponente en un meetup de @MadridWordPress . Compartí escenario con Gonzalo Mata @gmdono que nos aclaró muchos temas sobre infraestructura necesaria para nuestros proyectos.
En mi charla expliqué como crear un plugin para personalizar ciertos aspectos de nuestra instalación del WordPress: desactivar/activar Gutemberg, personalizar la página de login de WordPress….
En los siguientes enlaces, podéis descargar los ejemplos de los plugins realizados:
Espero que los que fueran, aprovechasen algo de la charla y salieran aprendiendo algo nuevo. Y agradecer a @MadridWordPress la confianza que puso en mí para cerrar la temporada de meetups.
Cuando instalas el Windows 10, además de la movida de que te pide una cuenta de Microsoft para crear el usuario (lo más fácil que he encontrado para evitar esto, es instalar W10 sin tener conexión a Internet), cuando abres el Menú de Inicio aparecen un montón de aplicaciones, la mayoría de las cuales no las necesitas.
El trabajo para eliminarlas es bastante engorroso. Mientras buscaba información, encontré esta página que creo que es la que mejor lo explica: «Consigue un Windows 10 limpio eliminando bloatware y apps stock» de MuyComputer.
El jueves 28 de febrero dí mi primera charla en la meetup de @WPVillalba. Espero que no salieran desilusionados y pueda dar alguna más.
El tema era Cómo crear mi primer plugin en WordPress.
En la charla expliqué como crear 4 plugins:
En los siguientes enlaces, podéis descargar los ejemplos de los plugins realizados:
Espero que los que fueran, aprovechasen algo de la charla y salieran aprendiendo algo nuevo.
Explico la situación. Tengo un ordenador con Windows 7 y Office 2007. Alguna vez me he encontrado con que al hacer doble click en un documento word (excel…) se muestra una ventana como la siguiente:
y al hacer click sobre el botón de Sí, se nos abre el programa (el Word en este caso) pero no abre el documento. Además se nos muestra un mensaje de error:
Lo cual es bastante raro, por que no es un problema del fichero. Ya que si abro el Word, desde la opción de Abrir, selecciono el documento, lo abre sin problemas.
Investigando por Internet, parece que la solución es por un tema de compatibilidad. A veces hay que realizar una pequeña configuración. Para ello, debemos de ir a donde se encuentra el ejecutable del Word, en mi caso está en C:\Program Files\Microsoft Office\Office12.
Una vez allí, buscar el fichero WinWord.exe y hacer click en el con el botón derecho de nuestro ratón, se muestra el menú contextual. Aquí, en este menú, hacemos click en Propiedades
Una vez en la ventana de Propiedades, seleccionar la pestaña de Compatibilidad
En este ejemplo, pone en Modo de Compatibilidad: Windows XP (Service Pack 2).
Tenemos que elegir Windows 7 como modo de Compatibilidad.
De esta forma, es como he conseguido que funcione. A veces vuelve otra vez a desconfigurarse, y hay que configurar de nuevo. Sobre todo, si intenta abrir un documento de Word de una versión posterior. Por ahora es la única manera que he encontrado para solucionarlo.
También debería de funcionar en el caso del Excel y Powerpoint. Espero que os ayude si tenéis alguna vez este problema
