El diario de Pepe Molina (Caricatos)

Bienvenidos a "El diario de Pepe Molina (Caricatos)". Nos encuentramos en la página 1 del listado de apuntes del sitio. También se puede ver el listado de los apuntes más leídos.

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

Imágenes embebidas

Publicado el día 09 de abril de 2013

Seguimos tratando sobre imágenes, pero en este caso sin necesidad de que existan físicamente, sino insertando directamente el contenido en una etiqueta html o svg.

.....

Sólo cuatro (4) líneas de código en el lenguaje php

.....

Y de esas pocas líneas, podemos omitir tres (3), ya que sabemos el valor correspondiente a la variable $mime.

.....

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

Recurso Postales Digitales

Publicado el día 25 de enero de 2013

Vamos a explicar cómo usar nuestro editor de postales digitales como recurso para ubicar imágenes en cualquier página web.

.....

Cuando terminemos con el editor, si queremos una copia de seguridad podemos enviar el trabajo a nuestro propio correo.

.....

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

Resolviendo sencillos sudokus

Publicado el día 18 de enero de 2013

Cuando publicamos el apunte SVG: crear sudokus, pensamos como podríamos resolverlo; pero debíamos dar unos pasos previos que nos servirán de introducción.

.....

La lógica que se nos ha ocurrido es la de buscar los posibles candidatos, detectando los números existentes en cada fila, columna y sector.

.....

Pero también hemos pensado en automatizar esa resolución, así que hemos creado un pequeño recuadro informativo

.....

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

Este diario: Agrupando apuntes

Publicado el día 27 de noviembre de 2012

Tenemos muchos apuntes que en realidad son parte de un tema común, así que hemos decidido crear un sistema para agruparlos.

.....

Se navega fácilmente con un menú que accede a los grupos; y en éstos tenemos enlaces a los apuntes, y al acabar cada apunte hay un par de botones "svg" que enlazan al tope de la página y al menú de grupos.

.....

Para terminar vamos a recordar que en la sección "Extras" del diario hemos añadido un enlace con la leyenda grupos de apuntes.

.....

Leer apunte completo...

Sistema de comentarios paso a paso: El listado

Publicado el día 20 de noviembre de 2012

De esta serie de apuntes sobre los sistemas de comentarios, aún nos queda mostrar los comentarios que han hecho los visitantes de nuestra página.

.....

Tan solo nos queda juntar los conocimientos de esta serie de apuntes y animarse a implementar nuestro propio sistema. Espero que sea de utilidad.

.....

Leer apunte completo...

Sencillo reloj analógico svg

Publicado el día 14 de noviembre de 2012

Si nos planteamos hacer el dibujo de un reloj analógico, sencillamente tenemos que hacer un círculo con doce (12) marcas indicando las horas y tres (3) líneas para las agujas.

.....

Lo único que hemos hecho con un lenguaje distinto al svg+xml es la ubicación inicial de las agujas

.....

En este caso la hora que mostramos es la del servidor donde está alojada la página, pero para otro apunte lo ajustaremos con la hora del navegador.

.....

Leer apunte completo...

Rotando imágenes con svg

Publicado el día 13 de noviembre de 2012

A veces queremos un efecto sencillo en alguna de las imágenes que ponemos en nuestras páginas y tenemos que depender de javascript, y en ocasiones con códigos realmente complejos.

.....

La primera de las imágenes se ha incrustado directamente en la página.

.....

Y esta última imagen se ha mostrado con la etiqueta "img", donde también utilizamos el atributo type, y como toda imagen tiene su atributo alt y como nos gusta hacer en este diario, también ponemos la etiqueta longdesc con la dirección de su descripción.

.....

Leer apunte completo...

Sistema de comentarios paso a paso: El formulario

Publicado el día 11 de noviembre de 2012

Seguimos con esta serie de apuntes para crear un sistema de comentarios, y si bien es muy sencilla la parte teórica para hacerlo, debemos considerar importantes cuestiones adicionales.

.....

De todos los campos de nuestra tabla, nos interesa el nombre y el comentario, y de ellos tan solo el comentario debería ser obligatorio (según nuestro criterio)

.....

Debemos evitar los formularios vacíos o con etiquetas html (posiblemente maliciosas). También deberíamos considerar el spam, y para ello se puede incluir un código de seguridad del tipo "captcha"

.....

Si todo ha ido bien, ya se pueden insertar los primeros comentarios. Ahora tenemos que pensar ¿cómo mostrarlos?...

.....

Leer apunte completo...