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

La Wikipedia lo define como: "JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,³ basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas⁴ aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) 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.

• 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.

• 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...). 

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.

• 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...).

• 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: Alterna 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. 

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. 

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 lugar realiza una copia de seguridad de 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 para salvaguardar 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: 

•  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, pulsa aquí.