jQuery

Datatables: listando y filtrando tablas de datos con JavaScript

2019-02-11 - Categorías: General / JavaScript
Datatables simple, cargando desde HTML los datos
Proyecto de pruebas en el que se listan sitios web bajo estudio SEO.

Ya estoy de nuevo por aquí compartiendo una verdadera joya del software, el Datatables. Esta es una herramienta para desarrollo frontend, que mediante JavaScript, crea unas tablas de datos muy profesionales para tus proyectos en muy poco tiempo. Se trata de un plugin de jQuery, que le da vitaminas a la presentación de datos en el navegador del cliente.

JavaScript actúa en la parte de frontend, es decir, tenemos que enviarle al navegador el HTML, CSS y JavaScript con el Datatable configurado. Entonces, en el navegador del cliente, mediante JavaScript, se regenerará el contenido web de la tabla para hacer los listados, ordenados y filtrados de la tabla de datos.

Continuar leyendo..

Popup de Mailchimp para WordPress

2018-08-27 - Categorías: Magento / Prestashop / Symfony / WordPress
Popup de Mailchimp de jnjsite.com

He tenido problemas para poner un popup de Mailchimp en esta web. Así que aquí estoy compartiendo la solución. He tratado de usar la utilidad que viene en el panel de control de Mailchimp. Pero todo apunta a que tengo algún conflicto entre los Javascripts de Mailchimp, los Javascripts de mi plantilla, algún plugin de cacheado o del minificado del código fuente. En fin, que no funcionaba y he terminado antes haciendo el popup artesanal que se puede ver en la barra lateral derecha de la web.

Si has tenido el mismo problema, aquí dejo mi solución, que espero que funcione en el 100% de las webs. Simplemente necesitas tener instalado en la web jQuery, el resto viene todo en el código de abajo. Se puede copiar y pegar en el widget de WordPress donde lo quieras y adaptarlo para tu web.

Continuar leyendo..

Instalar Bower en Ubuntu

2014-11-02 - Categorías: General

¡Buenos días!

Estoy escribiendo poco últimamente sobre programación. No me he olvidado del blog, es que gracias a Dios estoy teniendo menos tiempo. No está la cosa para echar cohetes acá en Spain pero voy a intentar apretar y no abandonar en las buenas costumbres, como por ejemplo, escribir en un blog 😉

Para instalar Bower tuve que navegar para encontrar dispersa alguna información, así que aquí les dejo todo junto en un post.

Qué es

Bower es una excelente herramienta para automatizar la gestión de tus librerías. Está creada para gestionar los fuentes de la parte front-end. Es decir, Bower nos descarga y actualiza las librerías de entorno cliente: CSS, HTML y Javascript que necesitemos. Puede ser por ejemplo las librerías de Bootstrap o jQuery.

Instalar

Necesitaremos tener instalado:

  • Git
  • npm
  • nodejs

La web oficial es: http://bower.io/

Los comandos para instalar son los siguientes:

$ sudo apt-get update
$ sudo apt-get install git
$ sudo apt-get install npm
$ sudo apt-get install nodejs
$ sudo npm install -g bower

Llegados a éste punto si ejecutamos ‘bower update’ nos saldrá un error porque no encuentra ‘node’. Ésto pasa porque el ejecutable en Ubuntu no es node es nodejs y no lo encuentra. Así que creamos un enlace simbólico y asunto solucionado.

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

Ejecutar

Ya teniendolo instalado nos falta una configuración sencilla en dos ficheros. Primero un bower.json donde elegimos qué librerías necesitamos:

{
«name»: «Nombre del proyecto»,
«version»: «1.0.0»,
«dependencies»: {
«jquery»: «latest»,
«jquery-ui»: «latest»,
«bootstrap» : «latest»,
«font-awesome»: «latest»
}
}

Si ponemos en la versión de cada dependencia latest siempre nos descargará o actualizará a la última versión de la librería. Segundo para configurar en qué directorio queremos todo podemos crear un fichero .bowerrc

{
«directory»: «lib»,
«json»: «bower.json»,
«searchpath»: [
«https://bower.herokuapp.com»
]
}

Ahora todas las librerías las tendremos bajo el directorio /lib cuando ejecutemos lo siguiente:

$ bower update

Para terminar de incluir todas éstas librerías en un fichero HTML y usarlas podemos poner un HEAD parecido al siguiente:

<head>
<title>Título de la web</title>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» href=»lib/bootstrap/dist/css/bootstrap.min.css» type=»text/css»>
<link rel=»stylesheet» href=»lib/font-awesome/css/font-awesome.min.css» type=»text/css»>
<script src=»lib/jquery/dist/jquery.min.js»></script>
<script src=»lib/jquery-ui/jquery-ui.min.js»></script>
<script src=»lib/bootstrap/dist/js/bootstrap.min.js»></script>
<script src=»main.js»></script>
<link rel=»stylesheet» href=»estilo.css» type=»text/css»>
</head>

Ya podemos empezar a maquetar y programar usando jQuery, jQuery-UI, Bootstrap y las Fuentes Asombrosas. No hemos tenido que ir web a web descargando todas las librerías una a una. Además si ahora ejecutas en cualquier momento ‘bower update’ se te actualizarán las librerías a la última versión.

Si has llegado hasta aquí espero que te estén sirviendo de ayuda.

Un saludo 🙂

© 2024 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.