Como instalar plugins jQuery en PaginaWebGratis


¿Cómo utilizar librerías en paginawebgratis.es?

Utilizando Dropbox como hosting


Supongamos que queremos utilizar el plugin (librería), emoji.js para insertar en nuestra web esos emoticones que tanto se están usando actualmente {heart}, pero nos encontramos con una serie de instrucciones, que quizás nunca habíamos hecho. Normalmente hay que descargar el plugin (librería) y luego subir los archivos en un host y finalmente colgar los links en nuestra web. ¿Como lo hacemos?, vamos por ello.

Crea una cuenta en Dropbox

Es un servicio para almacenar archivos en la nube que posiblemente ya conoces y podemos utilizarlo como hosting de nuestros archivos de una forma mas segura que la de un hosting gratuito como el tipico 000webhost. Abre tu cuenta en Dropbox

Descarga la librería de jQuery

Para la ejecución de éstos archivos siempre es necesario jQuery, la biblioteca de Javascript. La web de descarga es ésta. Sube el archivo descargado a dropbox.

Descarga la librería bxslider

Existen muchos plugins, y todos varían en la cantidad de archivos que necesiten para ejecutarse. Para la explicación básica y breve utilizaremos el plugin para un slider ofrecido por Steven Wanderski con la intensión que comprendas el proceso para instalar la mayoría de los plugins jQuery. Puedes descargar el plugin desde su web ó directamente haciendo clic aquí

Descomprime los archivos en una carpeta

Siempre es imprescindible revisar los archivos de la librería, sobretodo los archivos elementales. Se recomienda chequear siempre los estilos CSS ya que tienen rutas locales las cual deberemos reemplazar por urls en la nube.

Sube a Dropbox las imágenes del plugin [Carpeta "images"]

Abre el archivo CSS: jquery.bxslider

Una vez dentro de ese código CSS se debe revisar las direcciones url de las imágenes usadas por el plugin, es decir, las dos imágenes que se subieron a Dropbox. Deberás reemplazar ésas direcciones por su url compartida de Dropbox. Recomiendo usar CSS Beautify para ordenar el código y así encontrar las direcciones más fáciles.



Como se puede apreciar en la captura, la primera ruta, representa la imagen "bx_loader.gif". Allí colocaremos la url de Dropbox, por ejemplo: (https://www.dropbox.com/s/rrlonz3ds77awk7/bx_loader.gif?dl=0). El mismo procedimiento será para las siguientes URL que representan "controls.png" la cual debemos reemplazar cuatro veces con su url. Una vez reemplazadas las direcciones por las nuestras, subimos los archivos css y javascript a Dropbox



Importar archivos a la web

Ahora tenemos realizado el 80% del proceso, procedemos a importar los códigos de dropbox para colocarlos en las textareas editoras de paginawebgratis. Fíjate cómo son las lineas de código HTML que debemos usar para importar los códigos:

<!--El jQuery debe ser cabecilla-->
<script src="https://www.dropbox.com/s/selx0tpncdrc75y/jquery-3.2.1.min.js?dl=0"></script>
<!--Luego el jQuery de bxslider--> 
<script src="https://www.dropbox.com/s/2oulxdsiqq73xfn/jquery.bxslider.js?dl=0"></script>
<!--y el css-->  
<link rel="stylesheet" href="https://www.dropbox.com/s/9976m75sutznsf0/jquery.bxslider.css?dl=0"> 

Lo que se hizo fue colocar las direcciones URL de cada uno de los archivos elementales del plugin (jQuery base, jQuery del plugin y el CSS del plugin)

Ahora debemos colocar esas lineas de código en el extra "Contenido de tu head" y guardamos.

Publicar el plugin en la página web

Para llegar al 100% de éste proceso obviamente hay que terminar de armar el rompecabezas haciendo la llamada jQuery y colocando la estructura HTML de bxslider. Esto lo conseguimos en la misma web de la librería. Para ejecutar el efecto slider, vamos a Diseño → Mostrar


Posted by Gabriel Navarro | Tutorial | Imágenes, cortesía de: Gabriel Navarro


comments powered by Disqus