Activador funciones Javascript III- interruptor on/off par / impar

(de la entrada Activador funciones Javascript)

Es por esto que necesitamos un elemento activador que indique a la función cómo debe comportarse. Como hemos comentado, se trata de un botón on/off, esto es, debe tener dos «posiciones». Así, el trigger se va a construir en torno a una variable que se mueva entre dos únicos valores. Vamos paso a paso.

Recordemos nuestro html:

La solución par o impar, si bien algo más compleja, es muy similar a la solución usando la variable booleana. El código completo en este caso sería algo así:

var n=0;
function despliega(){

n=n+1;
var pi=n%2;
if(pi==1){
document.getElementById(‘dos’).style.display=»block»;
}
else{
document.getElementById(‘dos’).style.display=»none»;
}

}

Como podemos ver, la diferencia está en este trozo de código que vamos a explicar a continuación:

n=n+1;

Con esta línea, creamos la variable n y definimos un contador del número de clicks que se hayan hecho en el elemento de activación (div1).

var pi=n%2;

Ahora, declaramos una variable pi que sea igual al resto (%) resultante de dividir n entre dos. Ya que la división de cualquier número entero dividido entre dos tiene como resto 0 (todos los pares) o 1 (todos los impares), conseguimos, al igual que en el caso del booleano, que la variable pi tenga solamente dos posibles resultados y podamos usar una estructura if-else para nuestros fines.

De este modo ya disponemos de un interruptor y de una alternativa. Espero que estos dos recursos os sean de utilidad.

Activador funciones Javascript II- interruptor on/off verdadero / falso

(de la entrada Activador funciones Javascript)

Es por esto que necesitamos un elemento activador que indique a la función cómo debe comportarse. Como hemos comentado, se trata de  un botón on/off, esto es, debe tener dos «posiciones». Así, el trigger se va a construir en torno a una variable que se mueva entre dos únicos valores. Vamos paso a paso.

Recordemos nuestro código:

Primero, vamos a declarar una variable booleana, la cual sólo puede tomar dos valores, verdadero o falso. Como punto de partida, al declarar la variable le asignamos el valor verdadero:

 

1 – var n=true;

 

Ahora, vamos a crear la función a la que va a llamar el evento onclick que habremos situado en el div1:

 

2 – function despliega(){

 

La idea del activador es que cada posición corresponda con una función. En nuestro caso tendremos dos valores posibles de la variable, true/false, y dos posiciones posibles del div2, none/block. Así, necesitamos que, cuando la variable sea verdadera, el div2 se muestre, y que cuando sea falsa, el div 2 se oculte. Es decir:

 

4 – if(n==false){
5 – document.getElementById(‘dos’).style.display=»block»;

6 – }

7 – if(n==true){
8 – document.getElementById(‘dos’).style.display=»none»;
9 – }

 

Esto hará que el resultado de la función sea lo que queremos. Sólo nos queda cambiar el valor de la variable a su opuesto mediante la siguiente línea que introducimos en lo que sería la línea número 3 –

 

n=!n;

 

Con esto, conseguimos, cada vez que hagamos click en el div1, llamar a la función. Esta lo primero que hará será cambiar el valor de n a su opuesto. Como fuera de la función hemos asignado el valor original como true (que corresponde a display:none en el div2), cambiará a false, con lo que la propiedad display del div2 se cambiará a none según queríamos.

Si ahora hacemos click de nuevo en el div 1, la función cambiará el valor de n a su opuesto, es decir, de false a true,con lo que el div volverá a desaparecer al volver a tener display:none.

Ya tenemos de manera fácil y sencilla un elemento disparador listo para usar en nuestras páginas web.

Como bola extra, podemos ver también otra alternativa basada en enteros pares o impares.

Activador funciones Javascript – interruptor on/off

En esta entrada vamos a aprender un poco de Javascript haciendo un trigger, esto es, un pequeño script cuya función sea activar o desactivar un grupo de funciones más complejas. Es decir, crearemos un interruptor de on/off para una aplicación.

Vamos a ver a un caso práctico que podemos aplicar a un menú desplegable. Tenemos dos elementos (divs) y queremos mostrar y ocultar uno de ellos solamente haciendo click en el otro. Un click muestra y el siguiente click esconde. En este caso, el evento onClick no nos sería de utilidad, ya que la función siempre se ejecutaría del mismo modo. Digamos que tenemos este html:

Y este CSS:

Para mostrar y ocultar el div dos, la función  onClick=»despliega()», a la que llamamos desde el div uno podría ser algo así:

 

function despliega(){document.getElementById(‘dos’).style.display=»block»;}

 

pero después no podríamos ocultarla. Podríamos pensar escribirla de este modo:

 

function despliega(){

document.getElementById(‘dos’).style.display=»block»;

document.getElementById(‘dos’).style.display=»none»;
}

 

Pero la primera línea mostraría el elemento y la segunda lo volvería a ocultar, con lo que nunca llegaríamos a verlo. Es por esto que necesitamos un elemento activador que indique a la función cómo debe comportarse. Como hemos comentado se trata de  un botón on/off, esto es, debe tener dos «posiciones». Así, el trigger se va a construir en torno a una variable que se mueva entre dos únicos valores. Vamos a ver dos modos de hacerlo con dos tipos distintos de variable:

Modo 1 – Booleano Verdadero / Falso

Modo 2 – Número Par / Impar

Insertar imágenes en WordPress en 5 pasos

Añadir imágenes en un blog de WordPress es muy sencillo. Vamos a describir el proceso en unos sencillos pasos.

1- Para insertar cualquier imagen en nuestro blog debemos haberla subido previamente a WordPress. Para ello, debemos acceder al menú MEDIOS, el cual al desplegarse nos deja ver dos opciones, BIBLIOTECA y AÑADIR NUEVO. AÑADIR NUEVO es realmente un acceso directo, ya que también está presente accediendo a BIBLIOTECA, desde donde podemos gestionar las imágenes que ya hayamos subido.

2- Al pulsar en AÑADIR NUEVO, nos aparecerá el gestor de subida de archivos. Podemos explorar y buscar el archivo que queramos subir o directamente arrastrarlo a la página.

3- Es importante, una vez hayamos subido el archivo, que accedamos a EDITAR, cosa que podemos hacer inmediatamente después de subirlo o en cualquier momento desde la biblioteca multimedia. Editando podemos rellenar unos campos según vemos en la siguiente imagen:

• Título: te cogerá el del archivo. De cara al SEO (hablaremos del SEO en otra entrada, MUY básicamente se trata de optimizar nuestro posicionamiento web), es importante que la imagen lleve un título descriptivo y no el que por defecto nos de la cámara de fotos. Si ya lo hemos modificado antes de subirlo, no tendremos que cambiar nada.
• Leyenda: es el “Pie de foto”. No siempre queda bien (según el diseño). Prueba a meterlo y si no te gusta como queda, vuelve a meter la imagen sin la leyenda.
• Texto alternativo: es muy importante para temas de accesibilidad y posicionamiento. Responde a la pregunta “cómo le explicarías esta imagen a un ciego en pocas palabras” . Por ejemplo poniendo “Playa de cádiz”. Parecido al título pero pudiendo poner espacios, acentos y lo que quieras.
• Descripción: parecido a lo anterior pero con una descripción más larga.
• Alineación: lo normal es que no haga falta poner ninguna a no ser que quieras la imagen centrada o a la derecha.
• Enlazado a: ¿qué pasa cuando haces click en la imagen? Puede enlazar a una web (URL personalizada), abrir la imagen sola en una pestaña nueva (archivo multimedia), abrir la imagen dentro de la estética de la propia web (página de adjuntos) o directamente no ir a ningún sitio y no ser un enlace (ninguna).
• Tamaño: con qué tamaño quieres insertar la imagen. Aquí no lo puedes personalizar sino que tienes el tamaño real de la imagen y un par de tipo miniaturas que se define en las opciones de WordPress.

No son necesarios ninguno de estos campos pero sí recomendable, especialmente el de Texto Alternativo. Respecto a Alineación, enlazado a y tamaño va al gusto de cada uno. Experimenta con distintas configuraciones y en caso de duda pide ayuda a quien haya diseñado tu web.

4- Cuando estemos en una entrada, ya sea escribiendo una nueva o editando, si pulsamos en MULTIMEDIA, accederemos a la biblioteca de imágenes. Si hacemos click en la imagen deseada, la insertaremos directamente en el punto donde esté situado nuestro cursor.

5- Si no nos gusta cómo nos ha quedado, tan sólo tenemos que hacer click en la imagen, eliminarla pulsando en nuestro teclado BORRAR O SUPRIMIR e insertarla de nuevo. Debemos asegurarnos de que el cursor esté en el lugar exacto donde queramos insertar la imagen. Teniendo la imagen seleccionada, podemos también editarla según hemos visto en el punto 3.

Y ya tenemos las herramientas para hacer un sitio interesante, compuesto de texto e imágenes. Ya depende de nuestra imaginación dónde llegaremos con él. ¡A practicar!

Publicando nuestra primera entrada en un blog de WordPress

Hoy, si no lo hemos hecho ya, vamos a crear la primera entrada de nuestro blog. Para ello, en el menú de la barra lateral de nuestro escritorio iremos a ENTRADAS y lo desplegaremos:

 

La opción que necesitamos es AÑADIR NUEVA, pero comentemos el resto muy brevemente.

– Todas las entradas: veremos un listado de todas las entradas que componen nuestro blog. Desde ahí, podremos hacer algunos cambios de organización de las entradas, así como seleccionar una de ellas para su edición.

– Categorías: podremos gestionar las categorías que hemos creado para cada entrada. Podremos editarlas, crear, borrar o reordenarlas jerárquicamente. Las etiquetas son la manera de ordenar las entradas de nuestro blog y podemos crear todas las que queramos. A cada entrada que hagamos asignaremos una o más categorías. Por ejemplo, si nuestro blog trata de arte, podremos crear una categoría para pintura, otra para escultura, etc… De este modo, nuestros lectores podrán buscar las entradas de su interés de manera más eficiente.

– Etiquetas: Igual que el menú CATEGORÍAS, pero para las etiquetas. Las etiquetas no organizan las entradas, si no que asignan palabras clave a cada entrada. Por ejemplo, y siguiendo el símil artístico anterior, clasificaremos una entrada que hable de una exposición de pintura contemporánea en la categoría creada que corresponda (en este caso, «pintura») y le asignaremos cuales etiquetas consideremos sean apropiadas que estén relacionadas con el contenido, por ejemplo, «pintura contemporánea», «exposición», «retrospectiva», etc. Es decir, las etiquetas no organizan, se limitan a ayudar en las búsquedas de nuestros lectores (lo que no carece de importancia).

– Copiar un artículo: nos permite utilizar una entrada ya creada como plantilla para crear una nueva, modificando lo que deseemos, por supuesto.

En añadir nueva podremos ver la interfaz de entrada de nuevos posts:

Interfaz «Añadir nueva entrada».

En el primer cuadro de texto introducimos el título de la nueva entrada y en el segundo insertamos el texto de contenido como si se tratase de un editor de texto cualquiera. Como podemos ver, disponemos de una completa barra de herramientas a tal fin en la parte superior. Incluso, si tenemos algún conocimiento de programación, podremos introducir código html directamente para insertar, por ejemplo, una tabla.

Ya podemos dar rienda suelta a nuestra creatividad.

MENU PUBLICAR

En la parte superior derecha podemos ver el submenú PUBLICAR.  Podemos pulsar publicar en cualquier momento. Mientras no salgamos de esta página, aunque ya esté publicada en internet, podremos modificar sin tener que entrar en edición. No obstante, tenemos la posibilidad de ver una vista previa por si queremos revisarla antes de publicarla realmente para comprobar los errores que podamos haber cometido. También podemos guardar un borrador por si no hemos podido concluirla y debemos dejar de trabajar, para poder retomarlo en cualquier otro momento. Podemos hacer que la entrada sea visible o privada y, claro está, podemos moverla a la papelera en el caso de que no nos sintamos nada satisfechos con lo hayamos escrito.

MENU FORMATO

Como indicamos en el primer tutorial, WordPress dispone de formatos predefinidos para distintos tipos de entrada. Podemos usar el más adecuado al tipo que estemos creando. Podemos experimentar y probar si lo deseamos.

 

En el próximo post, veremos cómo introducir imágenes en nuestro blog. Mientras tanto,

¡A bloguear!