Añade tus propios componentes visuales a tu Sitio Web o Blog sin grandes conocimientos de Programación.

Muchos usuarios sin experiencia en programación de páginas web o ni tan siquiera en informática desean añadir a sus creaciones componentes visuales que le den a sus diseños el toque personal que están buscando.

Saben lo que quieren pero no saben hacerlo o no quieren gastar dinero en solicitarle a alguien que les haga el desarrollo.

Con JQuery y estas guías que voy a proporcionarte, tú mismo podrás hacer realidad aquello que deseabas poner en tu Blog o página web y nunca te atreviste. Utilizando la potencia de estas magníficas librerías y herramientas de código fuente para páginas web, vamos a crearnos toda clase de componentes que luego podamos aprovechar en su presentación.

Conceptos previos antes de comenzar a "tocar" código:

Antes de que empieces a pensar que "esto es difícil", si no tienes nada de experiencia en informática o programación de sitios web, este repaso de conceptos previos va a venirte estupendamente para entender qué es lo que intervniene en las páginas de tu sitio web. No es estrictamente necesario entender todo esto para utilizar "JQuery" pero ayuda enormemente comprender cómo funciona.

Nuestras páginas web, se trate de un Blog o se trate de un sitio web, siempre están diseñadas con un conjunto de componentes que le sirven al navegador para "dibujar" en pantalla la presentación de nuestros contenidos: el HTML, el Javascript y las CSS:

La Plantilla de Blogger, el XML y el HTML:

Es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas propias que al ser interpretadas por el servidor de Blogger conforman la presentación del blog. Al ser reutilizadas por todos los usuarios no podemos alterarlas sólo para nuestros intereses. Es por ello que cuando queremos "ir más allá" de lo que ofrecen a nivel básico, debemos reescribir algunos de los elementos que las componen. Entre esos elementos citados se encuentran las hojas de estilo, pilar básico del aspecto y formato de nuestras páginas en Blogger o en cualquier "publicación web".

Es decir, simplificando sin entrar en tecnicismos: la plantilla contiene el contenido del blog "resumido" en un lenguaje de etiquetas extendido (el XML) que luego, cuando se ejecuta en el ordenador de los usuarios, se interpreta en el lenguaje que sus navegadores entienden (el HTML).

JavaScript

La Wikipedia lo define como:"JavaScriptes unlenguaje de programación interpretado, dialecto del estándarECMAScript. Se define comoorientado a objetos,³basado en prototipos,imperativo, débilmente tipado y dinámico.
Se utiliza principalmente en su forma dellado del cliente (client-side), implementado como parte de unnavegador webpermitiendo mejoras en lainterfaz de usuarioypáginas webdinámicas⁴aunque existe una forma de JavaScript dellado del servidor(Server-side JavaScriptoSSJS). Su uso enaplicacionesexternas a laweb, por ejemplo en documentosPDF, aplicaciones de escritorio (mayoritariamentewidgets) es también significativo."

Simplificando técnicamente una vez más: es un lenguaje de programación que enriquece con funcionalidad a los componentes que componen nuestro Blog. Esta funcionalidad es muy variada, por ejemplos sencillos: con JavaScript se puede calcular el número de visitas, se pueden validar campos de un formulario para saber si tienen la longitud adecuada, podemos hacer que un botón una vez pulsado ejecute una determinada tarea... permite a nuestros componentes de la página seguir un guión, "programar" "qué van a hacer" cuando se les utilice.

Las hojas de estilo (.css)

Con Blogger (y con cualquier publicación web) las plantillas basan su presentación fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css:Hojas_de_estilo_en_cascada. Contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que integran dicha página.

Es decir, son archivos externos que le dicen a cada componente que utilizamos en nuestro Blog (cajas de texto, títulos, comentarios, etc...) qué formato deben tener para darle un "estilo", una presentación a nuestras páginas web. Establecen, por citar ejemplos simples que puedan comprenderse al instante, el espaciado entre caracteres, el margen entre un marco y el texto, el color que se va a utilizar en las letras...

JQuery:

Se trata de un conjunto de librerías de código Java Script, CSS y HTML que proporciona al usuario "ya hechos" el conjunto de componentes visuales que con más frecuencia éste tiende a utilizar en sus sitios web.

Ofrece una facilidad de uso tanto para el programador como para el usuario fuera de toda duda. Basta con "copiar y pegar" entendiendo un poco qué se está haciendo en cada sitio y obtendremos resultados realmente profesionales.

Aprendiendo a utilizar JQuery Paso a Paso:

1) Conéctate a su sitio web:http://jqueryui.com/demos/

Nos hemos conectado a la zona de demostraciones de JQuery. Desde este punto podemos aprender a utilizar todo lo que necesitamos para añadir componentes visuales a nuestro sitio web o Blog de manera sencilla.

2)Piensa el componente que vas crear:JQuery es una enorme "caja de herramientas" de la que iremos sacando todo aquello que necesitamos para conformar la presentación de nuestro sitio web.

En la parte izquierda tenemos el menú principal que se divide en "Interaction", "Widgets", "Effects" y "Utilities".
Siempre seguiremos desde arriba hasta abajo pasando por cada una de las funciones principales para crear el componente que deseamos.
Piensa en el componente que deseas añadir a tu Blog. Establece qué va a hacer cuando el usuario lo toque (interacciones), el aspecto que tendrá (Widget) y los efectos de los cuales quieres dotarle (que aparezca y desaparezca, que de desvanezca en forma de persiana, haciéndose pequeño, que aparezca desde la izquierda, desde la derecha, etc...).

3) "Interactions": Comenzamos siempre pensando en las interacciones que va a ofrecer el componente que deseamos insertar:

Imagina que deseas añadir una pequeña ventana (en adelante le llamaremos "Diálogo") en la que quieres mostrar un mensaje, o mostrar otra página HTML, o una foto, o las tres cosas a la vez...

la ventana o cualquier componente que quieras añadir, siempre tendrá un conjunto de opciones para interactuar con tu usuario:

Draggable:Conseguirás que la ventana o el componente añadido se pueda "arrastar" por la pantalla. Por ejemplo puedes hacer qu ela ventana que se abra no moleste al usuario que si no desea cerrarla, la pueda mover a un lado de su pantalla.
Droppable:Permitirás que se pueda introducir algo dentro de la ventana. El usuario podrá mover y arrastrar algo al inerior de la venta.
Resizable:Podrá aumentar o disminuir el tamaño de la venta que se abre.
Selectable:Podrá seleccionar la ventana con la que prefiere trabajar.
Sortable:Podrá ordenar qué elemento quiere ver primero y cuáles después.

Una ventana para un Blog con un mensaje de bienvenida, de cierre, de confirmación, etc... tendrá como interacciones "Draggable" para que pueda moverse, "Resizable" para que se pueda hacer más grande o más pequeña.

Esto mismo aplica a cualquier componente que JQuery pone a tu disposición y que iremos aprendiendo a lo largo de las próximas guías. Sólo tu creatividad y los objetivos que desees conseguir serán los límites para componer la página que necesitas.

4)"Widgets":Los componentes visuales que ofrecerás en tu página web o Blog. A lo largo de las próximas guías iremos repasando cada componente a utilizar. Aquí observarás que es tan sencillo como seleccionar el que más te interese y entrar en el detalle.

Accordion:te servirá para añadir un componente que se expaña y contraiga a modo de acordeón. Por ejemplo para un menú, para unas imágenes, para sugerencias que desees hacer (por ejemplo para recetas de cocina, pasos para realizar algo, menús superiores horizontales, etc...)

Autocomplete:te servirá para introducir una caja o cualquier componente donde quieras que el usuario escriba y éste le asista realizándole un "autocompletado" del texto que está rellennado(por ejemplo para poner "C/" antes de la dirección de una calle, poner Dº o Dª para un nombre, completar con las palabras que tú prefieras lo que escriba, etc...)

Button:no pueden faltar en un sitio web botones. Botones para lanzar una página, un formulario, con capacidad para cambiar de color cuando se pulan, realizar una animación, todo aquello que puedas necesitar para tu sitio web o blog.

Datepicker:seleccionar de un calendario una fecha. Muchas veces algo que resulta algo complicado de programar no lo introducimos para nuestros usuarios por falta de tiempo o por no saber cómo hacerlo. Este componente te vendrá fenomenal cuando desees que establezcan una fecha seleccionándola desde un calendario.

Dialog:se refiere a cualquier venta o cadro de diálogo que desees abrir en tu Blog o página web. Ventanas donde mostrar mensajes de aviso (con instrucciones para utilizar tu sitio web, advertencias como la ley de prevención de cookies, para confirmar un cierre del navegador, para llamar dentro de la ventana a otra página con un formulario de contacto, etc...).

Menu:un clásico organizativo en cualquier página web que se precie. Dará la opción de agrupar por categorías tus contenidos, de manera que el usuario pueda seleccionarlos con sencillez.

Progressbar:Poco utilizado en Blogs, puede ser muy útil en páginas web donde se realizan procesos que dejan en espera al usuario. La barra de progreso irá avanzando hasta que finalice la ejecución de la tarea que ha dejado en espera al usuario, de manera que éste pueda ver el avance en su ejecución

Slider:Si tienes un sitio web donde el usuario debe rellenar valores dentro de un rango determinado, puedes facilitárselo utilizando un deslizador. Según lo avance a izquiera (o arriba y abajo) podrá hacer que los números incrementen o disminuyan.

Spinner:amplía las posibilidades de una caja de texto donde poder añadir más de un valor en forma de lista.

Tabs:Presentar en un mismo espacio pero separado por distintas pestañas un conjunto de información te permitirá ofrecerla pormenorizadamente de una manera sencilla y útil para tus usuarios (para el historial o archivo de un Blog, noticias, contenidos varios, lo más visto, avisos, etc...).

Tooltip:El usuario muchas veces espera que al poner el ratón sobre un determinado componente, éste saque un pequeño "cartelito" con un abreve descripción de lo que hace el componente (muy útil para explicar para qué sirve una determinada caja de texto, qué ocurre al pulsar un botón, una descripción de una imagen, añadir el nombre del autor, etc...).

5) "Effects": Añade al componente que has creado los efectos visuales que lo dejen perfecto para tu Blog o página web:

Add Class:Añade más texto o haz que parezca que aumenta el componente sobre el que añadas este efecto.

Color Animation:Haz que cambie de color mientras se agranda o se empequeñece, dale un toque creatvio que quede alegre, elegante o sofisticado para tu sitio web o Blog.

Effect:Añade multitud de efectos a la creación. Que aparezca desde la izquierda, que se difumine, que aparezca desde la derecha, que se ilumine, que se remarque, etc...

Hide :Hazlo desaparecer. Ocúltalo para que el usuario disponga de él pero de una manera resumida o simplemente que no lo vea.

Remove Class:Quítale texto, hazlo más pequeño, dale el efecto de que disminuye su complejidad.

Show:Decide cómo quieres que se muestre el contenido. Cuándo quieres que sea visto y en qué forma prefieres que se visualice.

Switch Class:Alterna entre un aspecto y otro cuando el usuario interactúe con el componente.

Toggle: A lterna entre un aspecto y otro cuando el usuario interactúe con él.

Toggle Class: Activa o desactiva el aspecto del componente cuando el usuario trabaje con él.

6)"Utilities": Establece la posición por defecto donde quieres que aparezca el componente o haz que tenga la presentación que deseas.

7) Una vez establecidas las interacciones, el tipo de Widget a utilizar, los efectos que deseas que tenga y la posición donde quieres que salga ya sólo queda extraer el código:

7.1)Si es una página WEB o publicación estándar:

Siempre debes pulsar "View Source" para copiar y pegar el código fuente en tu página web.

Ejemplo con una pequeña ventana que sólo tiene la opción de cerrarse. El código que observas en la parte inferior ha sido extraído de jQuery, bastaría con copiar en el HEAD Los .js, scripts y .css que incorpora las librería de JQuery. En el BODY el componente que has creado.

Al darle a View Source, puedes observar que el "div id=dialog" mostrará en el cuerpo de tu página la ventana o cuadró de diálogo con el texto que aparece en el interior del "div".

Busca el enlace que te pongo en la imagen inferior para poder copiar y pegar el código fuente en tu web.

7.2) Si es un Blog de Blogger

En el componente que has ido diseñando en JQuery, localiza el enlace "View Source" que se encuentra en su parte inferior. De ahí extraerás el código copiando y pegando para luego utilizarlo en Blogger. Busca el enlace que te pongo en la imagen inferior para poder copiar y pegar el código fuente en tu Blog.

Código de View Source de JQuery para el /HEAD de tu Blog:

Ahora sólo queda insertar el código extraído de JQuery en tu Blog.Dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.

En primer lugarrealiza una copia de seguridadde tu sitio. Aunque es realmente sencillo lo que vamos a hacer, recomiendo que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error.No dejes de realizar esta guía paso a paso parasalvaguardar tu blog.

En Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y pulsa "Editar HTML". Localiza la etiqueta "/head" y justo debajo inserta los .js, .css y script de JQuery

El código que corresponde al HEAD:



link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /




script src="http://code.jquery.com/jquery-1.9.1.js"/script




script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/script




link rel="stylesheet" href="/resources/demos/style.css" /

Código de View Source de JQuery para el /BODY para EL GADGET JAVASCRIPT/HTML de tu Blog:

Para insetarlo en tu Blog,dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.

En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar el componente creado con JQuery.

Añade el código fuente que recuperaste de "View Source" desde JQuery.Sólo debes insertar la parte de código que en el "View source" de JQuery se encuentra en el interior del body.

Pulsa "Guardar Disposición" y ¡ya lo tienes!

Si quieres ver una pequeña demostración con un cuadro de diálogo (una ventana) en la que aparece un texto y a la cual le puedes aplicar distintos efectos en tiempo real con JQuery, pulsaaquí.

Nunca fue tan fácil añadir componentes visuales a tu sitio web o Blog. ¡Aprovecha la potencia de JQuery!, que lo disfrutes.