El diario de Pepe Molina (Caricatos)

• Webmaster Pepe Molina
• Su Caricatura.com
• facebook
• Google+
• twitter

• Caricaturas "San Jorge"
• The Irish Affair (Pub)
• Construcciones Costa del Sol
• Polígonos Costa del Sol
• Red Tape

• Javascript Códigos (por Tunait)
• Centell: Diseño Gráfico...
• Recursos CSS
• Utilidades para Webmasters
• Blog de Juaniquillo
• Kseso de CSS

• Desarrollo y Poesía
• Caricaturas "San Jorge"
• Fotografías de Sevilla, España
• Autos con arte
• Medina Colón ArtWork
• AlSaPa
• Juan Ruiz
• AJC Creaciones

• Foros del web
• Maestros del web
• HERA
• Validador de feeds
• Sitemaps
• ISCA
• AEC

• Más Benalmádena
• Animarte
• Los Pescadores Playa
• Gráfica creativa
• MiniGolf Happy Days

• Prociencia
• Universidad Autónoma de Barcelona
• Pekegifs
• Publica tus poemas
• Cherrylandia
• Granada Links
• Desenvolvimento web
• El blog del Vinagre Asesino
• Bahía Sin Fondo
• Las historias eulerianas
• webfly

Publicado el día 12 de julio de 2012
id=91; categorías: Vicisitudes de un Webmaster, Mamarrachadas, Programación

Cuando publicamos el apunte "Libro de visitas", ya habíamos previsto que nos visitarían los típicos aburridos con dedos flojos, y tendríamos que actuar editando o eliminando mensajes.

Y no han tardado mucho en escribirnos:

Ahora nos toca borrar ese comentario, por supuesto; pero tal como decía Jack el destripador, vayamos por partes. Teníamos una pequeña lista de mejoras:

• Mejorar la presentación de mensajes (por ejemplo la fecha).
• Un sistema para editar y/o borrar mensajes.
• Validación y seguridad.
• Paginación.

Para empezar, mejoraremos la...

Fecha

A partir de la fecha insertada desde nuestro sistema: "aaaa-mm-dd hh:mm:ss", hemos creado le función ponerFecha:

function ponerFecha($f)	{
	if ($f == "00000000000000")	{return "deconocida";}
	$mes = array(
	"01" => "enero",
	"02" => "febrero",
	"03" => "marzo",
	"04" => "abril",
	"05" => "mayo",
	"06" => "junio",
	"07" => "julio",
	"08" => "agosto",
	"09" => "septiembre",
	"10" => "octubre",
	"11" => "noviembre",
	"12" => "diciembre"
	);

	list($fecha, $hora) = explode(" ", $f);
	list($aaaa, $mm, $dd) = explode("-", $fecha);

	return "$dd de {$mes[$mm]} de $aaaa, a las $hora";
}

Con este cambio, vemos un mensaje de ejemplo con esta cabecera:

Seguramente el mensaje que nos ha servido de ejemplo lo borraremos.

Un sistema para editar y/o borrar mensajes

El segundo punto de nuestra lista de tareas es el que nos interesa en este apunte. Vamos a usar los datos de cada comentario en un formulario que añadiremos para su edición y que se podrá desplegar si fuese necesario.

Ya que nos hemos adentrado en las imágenes SVG, crearemos dos triángulitos para que pinchando en ellos se plieguen y desplieguen los datos editables:

<span style="float: right">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10px" height="10px" style="cursor: pointer" id="des_$id" onclick="desplegar(this)">
		<polygon fill="aqua" stroke="blue" points="0,0,10,0,5,10" />
	</svg>

	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10px" height="10px" style="cursor: pointer; display: none;" id="ple_$id" onclick="plegar(this)">
		<polygon fill="aqua" stroke="blue" points="0,10,10,10,5,0" />
	</svg>
</span>

Y las funciones plegar y desplegar simplemente hacen eso:

function desplegar(que)	{
	n = que.id.substr(4);
	document.getElementById("ple_" + n).style.display = "inline";
	que.style.display = "none";
	document.getElementById("form_" + n).style.display = "block";
}

function plegar(que)	{
	n = que.id.substr(4);
	document.getElementById("des_" + n).style.display = "inline";
	que.style.display = "none";
	document.getElementById("form_" + n).style.display = "none";
}

Nos queda añadir estas cosas en la página, y para ello debemos abrir la página con un parámetro: "?editar=si".

Códigos de colores

Para diferenciar las respuestas hemos añadido códigos de colores que aplicamos a los bordes de los mensajes. Hemos usado los siguientes valores:

• Azul (blue): El mensaje es correcto (visible)
• Negro (black): El mensaje queda inactivo (invisible)
• Rojo (red): El mensaje se ha borrado

Y en un futuro cercano, vamos a usar Ajax para la edición; y tal vez crearemos algún proceso que modifique varios mensajes a la vez.

Notas finales

Aunque hemos descrito todo el proceso e informado de la funcionalidad, solo en modo administrativo se pueden modificar los mensajes. También hemos creado una forma de mostrar los mensajes que se han desactivado: ?editar=todos, donde puede apreciarse el uso del código de colores antes mencionado.

Este apunte aún no tiene comentarios.

• Este diario: Extras
• Caricaturas en Córdoba
• Desafío javascript: 100!
• Mapa de España
• Clip-art: carpetas y ficheros
• Sistema de comentarios paso a paso: Validar con javascript
• javascript: rollover en mapas
• SVG: Mapa de España
• Mapa de España SVG II: Herramientas
• Fondos con SVG

• Caricaturas en Córdoba
• Mapa de España SVG II: Reflexiones
• Mapa de España SVG II: Herramientas
• Mapa de España SVG II: Vicisitudes
• SVG: Zoom en mapa de imagen
• SVG: Dibujando mapas
• Mapear una imagen paso a paso
• Mapas y formularios
• Asociación Española de Caricaturistas
• Clip-art: carpetas y ficheros

• Caricatos ⁽²⁰⁾
• Así se hizo ⁽⁴¹⁾
• Vicisitudes de un Webmaster ⁽¹³⁶⁾
• Mentes pensantes ⁽⁹⁾
• Eventos y efemérides ⁽⁹⁾
• Globalización ⁽⁶⁶⁾
• Mamarrachadas ⁽⁶⁾
• Artes y oficios ⁽¹²⁾
• Programación ⁽¹¹²⁾
• Caricaturas y caricaturistas ⁽¹⁵⁾
• Experiencias SEO ⁽¹¹⁾

• listado de caricaturas
• listado de imágenes
• listado de extras
• listado de categorías
• listado de etiquetas
• listado de postales
• grupos de apuntes
• buscador interno
• anuario 2010
• anuario 2011
• anuario 2012
• anuario 2013
• anuario 2014
• anuario 2015
• anuario 2016
• anuario 2017
• anuario 2018
• anuario 2019
• anuario 2020
• anuario 2021
• anuario 2022
• anuario 2023
• anuario 2024

• Arrays javascript
• Capturar áreas
• Colección de clipart
• Editor de textos
• Editor del diario
• Galeria de imágenes
• Generador html
• Imagenes
• Máquina de Turing
• Postales digitales
• Probador de scripts
• Recortes en imágenes
• Reloj analógico
• Sudo-Captcha
• Todo sobre los colores
• Libro de visitas

2017 (7)

• diciembre (2)
• abril (1)
• marzo (1)
• febrero (1)
• enero (2)

2016 (2)

• abril (1)
• marzo (1)

2015 (6)

• mayo (1)
• abril (1)
• marzo (2)
• febrero (1)
• enero (1)

2014 (12)

• diciembre (1)
• noviembre (1)
• julio (2)
• junio (1)
• mayo (1)
• abril (1)
• marzo (1)
• febrero (1)
• enero (3)

2013 (20)

• diciembre (2)
• noviembre (1)
• octubre (1)
• septiembre (1)
• agosto (1)
• junio (1)
• mayo (2)
• abril (2)
• marzo (1)
• febrero (3)
• enero (5)

2012 (45)

• diciembre (3)
• noviembre (6)
• octubre (2)
• septiembre (4)
• agosto (2)
• julio (2)
• junio (3)
• mayo (4)
• abril (3)
• marzo (6)
• febrero (5)
• enero (5)

2011 (62)

• diciembre (5)
• noviembre (9)
• octubre (6)
• septiembre (6)
• agosto (3)
• julio (2)
• junio (5)
• mayo (4)
• abril (2)
• marzo (5)
• febrero (7)
• enero (8)

2010 (1)

• diciembre (1)