El diario de Pepe Molina (Caricatos)

El lenguaje javascript suele ejecutarse en los navegadores. Se caracteriza por ser interpretado sobre todo en páginas web. También hay posibilidades de uso del lado del servidor; tema que tal vez no lleguemos a tratar.

Entre sus posibles usos destacamos las validaciones de formularios para evitar enviar datos a los servidores sin estar correctamente introducidos como campos vacíos o mal escritos.

Otro de los más importantes usos es la implementación de efectos visuales como transiciones de imágenes, cambio de énfasis y colores en textos, y muchas cosas más.

Mapa de España SVG II: Reflexiones

Publicado el día 07 de diciembre de 2017

Después de usar las "herramientas" del apunte anterior, vamos a hacer algunas valoraciones.

.....

Leer apunte completo...

Mapa de España SVG II: Herramientas

Publicado el día 12 de abril de 2017

Hemos retocado nuestra herramienta para nuestras nuevas pretenciones.

.....

Leer apunte completo...

SVG: Zoom en mapa de imagen

Publicado el día 03 de febrero de 2017

Hacer zoom en una imagen SVG es más fácil de lo que se puede pensar. Recomendamos para obtener el mapa nuestra aplicación "Capturar áreas en imágenes".

.....

Leer apunte completo...

SVG: Dibujando mapas

Publicado el día 24 de enero de 2017

mapear una imagen ahora es fácil y preciso

.....

Leer apunte completo...

Mapas y formularios

Publicado el día 09 de abril de 2016

A veces hay problemas de sencilla solución pero encontramos referencias demasiado complejas.

.....

Leer apunte completo...

Recordatorios

Publicado el día 12 de enero de 2015

Muchas veces entramos en páginas que nos pide un nombre de usuario y una contraseña, para tener acceso a elementos personales

.....

Leer apunte completo...

Etiquetando mapa SVG

Publicado el día 19 de noviembre de 2014

El resultado, aunque parece bastante bueno, nos ha movido a estudiar más a fondo el mapa escogido.

.....

Leer apunte completo...

Ajax para copiar ficheros

Publicado el día 12 de julio de 2014

Hemos visto como subir archivos con Ajax, donde contábamos de un formulario y un control para seleccionar ficheros, pero cómo lo haríamos sin esa selección...

.....

Leer apunte completo...

Subir archivos con Ajax

Publicado el día 01 de julio de 2014

Hasta hace poco, la forma de subir archivos era a través del envío de un formulario, y se podía "simular" el uso de la tecnología "Ajax" dirigiendo el resultado a un iframe

.....

Con el nivel 2 del objeto XMLHttpRequest y los objetos FormData se puede lograr subir ficheros sin tener que pulsar el botón destinado al envío de un formulario

.....

Usando el evento de cambio de estado de un control file vamos a subir el fichero que elijamos

.....

function tag(id) {return document.getElementById(id);};
function subir_con_Ajax()	{
	fd = new FormData(tag("formulario"));
	Ajax = new XMLHttpRequest();
	Ajax.open("POST", tag("formulario").action, true);
	Ajax.onreadystatechange = function() {
		if	(Ajax.readyState == 4 && Ajax.status == 200) {
			alert(Ajax.responseText);
		}
	}
	Ajax.send(fd);
}

.....

Leer apunte completo...

SVG vs. Ajax

Publicado el día 01 de junio de 2014

Después de añadir a nuestro Mapa de España las ciudades autónomas de Ceuta y Melilla hemos hecho algunas reflexiones

.....

Intentaremos saber si nuestro navegador permite el formato svg simplemente cargando la imagen que vamos a usar

.....

en un futuro apunte trataremos de estudiar más a fondo

.....

Leer apunte completo...

Lightbox sin librerías

Publicado el día 28 de abril de 2014

En muchas páginas encontramos este efecto que oscurece la pantalla del navegador y presenta algún contenido en primer plano, destacándolo.

.....

Viendo el comportamiento de estas ventanas "tipo lightbox" podemos deducir que existe un elemento que cubre toda la pantalla y va incrementando su opacidad

.....

Leer apunte completo...

Ceuta y Melilla

Publicado el día 11 de febrero de 2014

Vamos a editar África para conseguir la ubicación de Ceuta y de Melilla en nuestro "Mapa de España".

.....

Considerando que el polígono del mapa con las coordenadas que queremos tiene como identificador el valor "africa" (id="africa"), hemos usado el siguiente código:

.....

puntos_africa = [];
function inicio_CyM()	{
	_puntos_africa = document.getElementById("africa").getAttributeNS(null, "points");
	_los_puntos = _puntos_africa.split(",");
	while(_los_puntos.length > 1)	{
		_x = _los_puntos.shift();
		_y = _los_puntos.shift();
		_x_y = {"x": _x, "y": _y};
		puntos_africa.push(_x_y);
	}
};

.....

Uno de los controles más importantes será el que nos permita ampliar nuestra imagen. La idea es usar códigos sencillos y eficaces.

.....

Leer apunte completo...

Sudokus de colores

Publicado el día 05 de junio de 2013

¡Lo que faltaba...! Sudokus de colores...

.....

Si asociamos a cada número de un sudoku un color cualquiera, todos distintos; podríamos omitir mostrar esos números, pero mostraríamos un sudoku; tan solo tenemos que saber cuales son los emparejamientos número <=> color.

.....

• rojo (red) <=> 1
• azul (blue) <=> 2
• verde (green) <=> 3
• amarillo (yellow) <=> 4
• celeste-agua (aqua) <=> 5
• lima (lime) <=> 6
• rosa (pink) <=> 7
• naranja (darkorange) <=> 8
• magenta (magenta) <=> 9

.....

Para adaptar este sistema de colores, hemos tenido que retocar un poco algunos códigos; para muestra mostraremos como ha quedado la función para mostrar el sudoku de colores:

.....

var paleta = ["red", "blue", "green", "yellow", "aqua", "lime", "pink", "darkorange", "magenta"];
function entrar_sudoku(cadena) {
	casillas = cadena.split("");
	for (i = 0; i < 9; i++)	for (j = 0; j < 9; j++)	{
		n = casillas.shift();
		poner = ("123456789".indexOf(n));
		if (poner == -1)
			tag("casilla_" + i + "_" + j).style.fill =
				(((parseInt(i / 3) + parseInt(j / 3)) % 2) == 0) ? "white":"#abcabc"
		else
			tag("casilla_" + i + "_" + j).style.fill = paleta[poner];
	}
}

.....

Leer apunte completo...

1001 sudokus

Publicado el día 28 de mayo de 2013

Empezamos con un sencillo ejemplo cuya miniatura hemos adjuntado a este párrafo de muy fácil resolución, y hemos terminado con una extensa lista de diferentes dificultades; pero hubiéramos podido obtener una lista mucho más amplia basándonos en ese primer ejemplo y simples modificaciones que iremos explicando.

.....

Hemos visto que podemos referir o definir a un sudoku con una lista de 81 números, donde el 0 se corresponde con la casilla vacía, y con cualquier lenguaje de programación es muy sencillo invertir esa lista...

.....

String.prototype.inverso = function()	{
	return this.split("").reverse().join("");
}
sudoku = "014500032369001004000000010007604090690087020020300000100800070000000008802400603";
ukodus = sudoku.inverso();
// ukodus = "306004208800000000070008001000003020020780096090406700010000000400100963230005410"

.....

Si a cada una de esas listas menores se aplica el método "inverso()" que hemos definido al principio del apunte, obtendremos el efecto reflejo horizontal.

.....

Si a la matriz traspuesta le aplicamos el reflejo horizontal, el efecto resultante es el de rotación de 90º.

.....

Nos quedan muchas combinaciones más que justifican el título de este apunte.

.....

Leer apunte completo...

Resolver sudokus

Publicado el día 01 de mayo de 2013

Para poder resolver sudokus sencillos hemos buscado los números candidatos, discriminando los existentes en el recuadro (grupo de casillas adyacentes mostradas del mismo color), fila y columna de la casilla en cuestión.

.....

Hemos resuelto ese inconveniente dándole interactividad a nuestro sudoku, permitiendo modificar su valor pinchando sobre la casilla que quisiéramos modificar. Podemos verlo en este otro apunte: SVG interactivo: sudokus.

.....

Si introducimos algún número repetido, podemos creer que estamos resolviendo bien nuestro sudoku, así que aún nos falta implementar si el estado actual de un sudoku es correcto. Para ello tenemos que poder detectar números repetidos en filas, columnas y recuadros (3 filas x 3 columnas).

.....

Leer apunte completo...

Polígonos: svg vs. canvas

Publicado el día 01 de abril de 2013

Vamos a empezar con la imagen que vemos a nuestra derecha, que ya nos ha servido en el apunte: SVG: Preliminares para iniciar una serie de apuntes sobre este formato vectorial.

.....

Hay diversas formas para saber si una imagen tiene colores planos

.....

Ya con nuestra imagen mostrada en nuestra aplicación tan solo tenemos que pinchar en la forma que deseemos capturar para que obtengamos el resultado esperado.

.....

Leer apunte completo...

Sistema de comentarios paso a paso: Validar con javascript

Publicado el día 04 de marzo de 2013

Podemos mejorar nuestros formularios evitando que se envíen cuando no se han completado correctamente

.....

Siempre que pensamos en programar con javascript debemos considerar que nuestros visitantes pueden desactivarlo, no por ello haya que descartarse.

.....

Para terminar pondremos el típico código de seguridad para evitar el odioso spam

.....

Leer apunte completo...

SVG interactivo: sudokus

Publicado el día 09 de febrero de 2013

Veremos como podemos resolver un sudoku introduciendo los números por teclado.

.....

Hemos asignado un identificador "id" a cada casilla de forma que la primera tiene id="casilla_0_0" y la última : id="casilla_8_8"

.....

Leer apunte completo...

SVG: creación dinámica

Publicado el día 01 de febrero de 2013

Volviendo a las imágenes SVG, vamos a crear nuestro mapa de forma dinámica.

.....

... y veremos aparecer pausadamente y de forma caótica todas las provincias españolas.

.....

Al tratarse de un fichero svg, a la vez es un fichero xml, que nos vale para obtener datos con la tecnología Ajax.

.....

Leer apunte completo...

SVG: más que mapas

Publicado el día 23 de enero de 2013

Hemos usado el formato svg para crear mapas interactivos muy sencillos; ahora iremos ampliando las posibilidades de este formato.

.....

El efecto en la provincia de Málaga, no solo cambia el color de la provincia, también muestra un icono previamente ocultado con estilos. De la misma manera podríamos tener escondidos otros elementos salpicados por el resto del mapa.

.....

Por último, crearemos dinámicamente una provincia -Gerona-, y la enlazaremos al apunte sobre el Congreso que aconteció el año 2011.

.....

Leer apunte completo...