El diario de Pepe Molina (Caricatos)

Esta Categoría está reservada para mostrar paso a paso el desarrollo de páginas como ésta, o tal vez algún efecto. Algunos desasrrollos merecerán de más de un apunte (sirva de ejemplo este mismo diario).

Seguramente coincidan muchos apuntes de esta categoría con otras similares como "Visicitudes de un webmaster".

Clip-art: carpetas y ficheros

Publicado el día 11 de mayo de 2015

Hemos creado recientemente una "Colección de clip-art". Ahora explicaremos como la hemos gestionado.

.....

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

Postal navideña 2013 paso a paso

Publicado el día 12 de enero de 2014

Nuestro último apunte tenía la intención de felicitar a nuestros visitantes por estas entrañables fechas utilizando una de nuestras postales.

.....

Seguidamente insertamos del listado de aves el pajarraco negro que acompaña a la escena. Tras unos pocoa ajustes más, nos hemos enviado la postal a nuestro propio correo con motivo de tener el código que genera nuestro sistema en nuestro gestor de correos.

.....

Con la postal en formato svg mostrada en el navegador tenemos que guardar su código en un fichero con extensión svg

.....

Leer apunte completo...

Migración Sudo-Captcha: sucaricatura.com

Publicado el día 04 de noviembre de 2013

Estabamos recibiendo constantes ataques de spammers

.....

La migración se ha planeado intentando que pueda ser reversible y/o modificable.

.....

Aparte de las tareas indicadas fueron necesarios otros retoques debido a estar la página hecha en dos idiomas.

.....

El sistema que usamos habitualmente (y aconsejamos) consiste en tener un arreglo (array) de mensajes de error en un principio en blanco, y por cada error detectado insertar en ese arreglo el mensaje correspondiente.

.....

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

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

Este diario: sitemap.xsl

Publicado el día 26 de octubre de 2012

Hemos visto como generamos nuestro sitemap.xml, ahora toca hablar de como lo mostramos: sitemap.xsl

.....

Ya habíamos mostrado códigos "xsl", que puede considerarse como una mezcla de html y xml; como todo código html puede tener estilos y scripts, y como todo xml debe estar bien formado.

.....

Luego, al cargarse la página, recorremos todos los enlaces para discriminar los enlaces en sí, de las imágenes; que a la vez incrementan sendos contadores ("_paginas" e "_imagenes") que nos servirán para mostrar datos estadísticos básicos

.....

Como consecuencia de la elaboración de nuestro sitemap y su hoja xsl asociada, hemos notado que podemos mejorar algunos aspectos de nuestro sistema.

.....

Leer apunte completo...

Este diario: sitemap.xml

Publicado el día 17 de octubre de 2012

Hemos tenido un pequeño problema con la generación de nuestro "sitemap.xml" debido a que ha crecido bastante el contenido de esta página, por lo que hemos decidido revisarlo minuciosamente.

.....

La referencia de imágenes en el sitemap puede hacerse simplemente con su URL (ubicación), o adjuntando más información como un título o una descripción:

.....

//$item es el objeto con los datos de una entrada del sitemap
//$item["images"] es el array de imágenes asociado al "$item"
while (count($item["images"]) > 0)	{
	$imagenes = array_pop($item["images"]);
	$lista .= "\n\t<image:image>";
	foreach($imagenes as $itemImage => $itemsito)
		$lista .= "\n\t\t<image:$itemImage><![CDATA[".$itemsito."]]></image:$itemImage>";
	$lista .= "\n\t</image:image>";
}

.....

Omitiremos explicar las tres últimas líneas del código ya que solo sirven para obtener los datos de las secciones "archivos", pero puede notarse que se van generando elementos del array "$listados" con los datos que usaremos en cada etiqueta "url" de nuestro sitemap.

.....

Tenemos más para contar, pero lo dejaremos para más adelante...

.....

Leer apunte completo...

Sistema de comentarios paso a paso: Los datos

Publicado el día 13 de septiembre de 2012

Los sistemas de comentarios tendrán siempre aparte del comentario en sí, otros datos básicos como el autor del mismo y la fecha de publicación.

.....

Hasta ahora los datos mencionados los podemos considerar básicos, aunque podríamos añadir unos pocos con miras a mejorar la gestión administrativa del sistema (que no deberíamos descuidar).

.....

También podemos añadir nuestro toque con otros datos a incluir, como página web, procedencia, edad, sexo, etc., pero en esta serie de apuntes poco trataremos esos datos que podrían considerarse superfluos para el sistema.

.....

Leer apunte completo...

Sistema de comentarios paso a paso: Introducción

Publicado el día 07 de septiembre de 2012

En varias ocasiones me han pedido el código de alguno de mis sistemas de comentarios, pero esos códigos están algo "ajados" por las distintas modificaciones que hemos realizado, así que me pareció buena idea empezar desde cero.

.....

A modo de introducción listaremos las páginas donde se trata este tema para que sean lecturas previas o introductorias.

.....

Ponga comentarios en su web

Poner comentarios en una página, puede parecer algo complejo, pero si pensamos que el código para insertar esos comentarios podemos usarlo en todas las páginas que deseemos simplemente añadiendo un par de líneas en el final de nuestra página php, ese trabajo será compensado. (Esta página es de otro dominio).

Este diario: Los comentarios

Como todo blog, tenemos un espacio para dejar comentarios en los apuntes.

Este diario: Mejoras en los comentarios

Sabíamos que tarde o temprano nos visitarían los spamers (léase "mamarrachos") introduciendo basura en nuestro sistema de comentarios, así que nos hemos visto obligados a retocarlo.

Este diario: BBCodes en comentarios

Los comentarios a los apuntes eran demasiado básicos así que hemos decidido enriquecerlos algo con unas pocas variantes.

Este diario: Comentarios y seguridad

No creía que pudieran usar una página mía para enviar mensajes "basura" de forma masiva, y aunque también se puede considerar un halago el hecho de que nos considerasen (aunque para tan despreciable motivo), nos obliga a revisar nuestro sistema de seguridad.

Este diario: Más comentarios

Hemos diseñado nuestro sistema de comentarios solo para los apuntes, y ahora lo hemos retocado para que también puedan comentarse los demás elementos.

Comentarios y evaluación en otras páginas del dominio

Hemos integrado algunas de las antiguas páginas de este dominio, y ahora también podemos comentarlas y evaluarlas.

.....

Vamos a plantear un sistema de comentarios muy básico pero también muy fácil de ampliar.

.....

Leer apunte completo...

SVG: Mapa de España

Publicado el día 01 de julio de 2012

A partir de las coordenadas que ya hemos obtenido de las provincias de España, trataremos de generar el mapa de España en formato svg.

.....

Hemos copiado del apunte :"Mapa de España", el array de las áreas de provincias que puede verse en su sección script: script.mapa_hispano, y luego hemos creado los polígonos con un sencillo bucle:

.....

for (i in areas) {
	area = "<a xlink:href='http://es.wikipedia.org/wiki/" + i + "' xlink:title='" + i + "'>";
	area += "\\n\\t<polygon fill='#00FF00' points='" + areas[i].coors + "'>";
	area += "\\n\\t\\t<set attributeName='fill' from='#00FF00' to='#FF0000' begin='mouseover' end='mouseout'/>";
	area += "\\n\\t\\t<set attributeName='stroke' from='#00FF00' to='#000000' begin='mouseover' end='mouseout'/>";
	area += "\\n\\t</polygon>\\n</a>\\n";
	tag("textarea_mapa").value += area;
}

.....

También es de destacar la forma de enlazar de cada área.

.....

Leer apunte completo...

Este diario: Top 10

Publicado el día 19 de junio de 2012

Como habíamos adelantado, hemos reemplazado la sección "Últimos apuntes" por otra que llamamos "Top 10" (los 10 apuntes más leídos).

.....

La petición Ajax es exactamente igual (se puede comprobar forzando el enlace, tal vez en una nueva ventana o pestaña), enlazando a la misma página con los mismos parámetros, pero mostrando los resultados con otro formato. Por ejemplo, la descripción o definición se asigna al atributo title de cada enlace.

.....

Quiero destacar que esas peticiones no son redundantes, ya que por cada petición se crea una lista nueva, ocultando la anterior para tan solo modificar los estilos de visualización si necesitamos volverlas a mostrar. Sabiendo que será la primera página la única visible y existente, inicializamos una variable con ese dato:

.....

ultimo_tope = "1";
var lista_tope = {};
lista_tope[ultimo_tope] = {"visible": true};

.....

Para luego considerar esa existencia a la hora de paginar.

.....

Leer apunte completo...

Este diario: Gestión de imágenes

Publicado el día 25 de febrero de 2012

Nos gustaría ver en las búsquedas de imágenes de los más importantes buscadores las que estamos insertando en nuestros apuntes, y por ello nos hemos decidido a realizar unas pocas modificaciones en nuestro sistema

.....

Leer apunte completo...

Este diario: Sindición extra

Publicado el día 12 de enero de 2012

Cuando hemos tratado el "resumen del año 2011" mostramos unos nuevos extras que implementamos recientemente, y ahora que empiezan a ser considerables, nos ha parecido buena idea mejorar el rincón dedicado a los extras que tenemos en la página.

.....

Leer apunte completo...

Este diario: resumen del año 2011

Publicado el día 05 de enero de 2012

Este año que acaba de terminar hemos publicado algo más de una cincuentena de apuntes de diversa índole, pero también hemos modificado algunos aspectos de la misma, tanto estéticos como de funcionalidad.

.....

Leer apunte completo...

Este diario: Más comentarios

Publicado el día 17 de octubre de 2011

Hemos diseñado nuestro sistema de comentarios solo para los apuntes, y ahora lo hemos retocado para que también puedan comentarse los demás elementos.

.....

Leer apunte completo...

Este diario: Valorar contenido

Publicado el día 09 de octubre de 2011

Se puede notar en esta página una pequeña modificación junto a la zona de comentarios; se trata de otra zona pero en este caso reservada a evaluar los contenidos.

.....

Leer apunte completo...

Este diario: Comentarios y seguridad

Publicado el día 18 de septiembre de 2011

No creía que pudieran usar una página mía para enviar mensajes "basura" de forma masiva, y aunque también se puede considerar un halago el hecho de que nos considerasen (aunque para tan despreciable motivo), nos obliga a revisar nuestro sistema de seguridad.

.....

Leer apunte completo...

Este diario: BBCodes en comentarios

Publicado el día 11 de septiembre de 2011

Los comentarios a los apuntes eran demasiado básicos así que hemos decidido enriquecerlos algo con unas pocas variantes

.....

Leer apunte completo...