El diario de Pepe Molina (Caricatos)

Lo más importante de Internet son las páginas web, y estas páginas están basadas en etiquetas, aunque el concepto es más amplio. La presentación de nuestras etiquetas se conoce como nube, donde las más referenciadas se muestran en mayor tamaño, y las que se asocian al apunte que se lee lleva otro color.

Mapa de España SVG II: Vicisitudes

Publicado el día 29 de marzo de 2017

Teníamos pendiente actualizar el mapa de España por varios motivos y nos hemos puesto en ello.

.....

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

Postales en SVG

Publicado el día 18 de febrero de 2015

Tenemos nuestras postales digitales también en formato svg

.....

Leer apunte completo...

Fondos con SVG

Publicado el día 28 de diciembre de 2014

Las imágenes SVG también pueden servirnos para personalizar los fondos de nuestras páginas, o de algunos de sus elementos.

.....

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

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

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

¡Feliz Navidad 2013!

Publicado el día 21 de diciembre de 2013

Un fuerte abrazo a los seguidores de esta humilde página web.

.....

.....

Si pinchamos sobre la miniatura que acompaña a estos párrafos podemos descargarla

.....

Leer apunte completo...

SVG: Recorridos circulares

Publicado el día 01 de diciembre de 2013

Juguemos a encontrar diferencias entre las dos imágenes que vemos junto a este párrafo... Ambas tienen el mismo color, el mismo borde y la misma forma.

.....

La intención de usar dos arcos para crear un círculo, en nuestro caso es para adaptar un texto a esos arcos.

.....

También podemos valernos de uno solo de los arcos mencionados para alinear un texto a la línea base de un semicírculo.

.....

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

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

SVG animado: algunos ejemplos sencillos

Publicado el día 15 de febrero de 2013

Hemos hecho un par de animaciones rotando nuestro logo y las manecillas de un reloj analógico.

.....

Ya habíamos usado animateTransform en nuestras anteriores animaciones y eran del tipo "rotate" (rotación); en este caso hemos usado translate (traslado), y su uso es similar, así que no nos detendremos en explicarlo.

.....

El otro recorrido "path" es diagonal

.....

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

Uso de estrellas svg: Alertas

Publicado el día 08 de enero de 2013

Existen muchos posibles usos para dibujos con forma de estrella; tal vez uno de los más comunes son los sistema de evaluación muy usados en blogs o páginas parecidas (como este diario)

.....

Para darle algo de dinamismo le hemos añadido un efecto de rotación a las puntas de la estrella con una duración de cinco (5) segundos por cada giro.

.....

Leer apunte completo...

SVG: crear sudokus

Publicado el día 01 de enero de 2013

Simplemente haremos un recuadro con nueve (9) filas y nueve (9) columnas, resaltando recuadros agrupados en tres (3) filas y tres (3) columnas.

.....

Para conseguir entonces distintos sudokus, vamos a facilitar un formulario con la inicialización del mismo como parámetro

.....

Como podemos ver, con este apunte solo generamos el recuadro con sus casillas y los valores que nosotros pongamos. Investigaremos en su resolución.

.....

Leer apunte completo...

Generando estrellas svg

Publicado el día 25 de diciembre de 2012

Después de crear estrellas de cinco puntas, nos faltaría hacerlas con distintas características, variando el número de puntas u otras variantes.

.....

no solo ha cambiado el número de puntas de la estrella, sino que las puntas son de diferentes tamaños.

.....

Podemos obtener efectos muy curiosos con un número elevado de puntas, aunque tal vez no sea de utilidad.

.....

Leer apunte completo...

Reloj analógico configurable svg

Publicado el día 15 de diciembre de 2012

Después de comprobar con qué facilidad se puede dibujar un sencillo reloj analógico decidimos poderlo configurar; y a la vez compartirlo.

.....

Ya que estamos tratando la configuración de nuestro reloj, nos pondremos "manos a la obra"; pero aclarando que se trata de cosas básicas como los colores de sus componentes o la hora de inicio de su funcionamiento.

.....

Si se prueba la opción donde se abre una nueva ventana, el reloj se adaptará a las dimensiones de ésta, debido a que la declaración de las dimensiones en la etiqueta svg es de 100%.

.....

Leer apunte completo...

Mapas interactivos svg

Publicado el día 04 de diciembre de 2012

Volvemos a la temática sobre imágenes svg para mostrar otro mapa pero con nuevas características, como la redimensión (la "S" en Svg corresponde a "eScalable").

.....

También vemos que podemos variar los colores, resaltando si fuera necesario zonas concretas, y sin usar el lenguaje de programación habitual

.....

Para facilitar la creación de mapas para otros objetivos, hemos generado unos ficheros que esperamos sean de utilidad

.....

Leer apunte completo...