El diario de Pepe Molina (Caricatos)

La accesibilidad en las páginas web son en muchos casos una asignatura pendiente pero nosotros intentaremos respetar. Cosas tan simples como desactivar los scripts (javascript) hacen que muchas páginas sean totalmente inaccesibles, y por eso hemos desarrollado este diario de manera que no sea distinto su funcionamiento con o sin esa característica.

Otra forma de ayudar a obtener páginas más accesibles es utilizar los elementos html adecuados. Mucho se ha hablado entre creadores de páginas web del uso o no de tablas para maquetación de las mismas, y creo que todos hemos llegado a la conclusión de que deben usarse para presentar datos con estructura tabular. Esas sencilleces mejoran mucho la accesibilidad de las páginas.

Mapear una imagen paso a paso

Publicado el día 07 de enero de 2017

Después de crear la página para "Capturar áreas en imágenes", pensaba que no tardarían en mejorar el sistema

.....

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

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

Este diario: Listado de Archivos

Publicado el día 14 de mayo de 2014

Entre los recuadros que encontramos a los lados del diario, a la derecha y hacia el final de la página encontramos este listado

.....

En los primeros párrafos hemos indicado que el listado estaba comprimido, pero de manera visual, ya que realmente lo que hemos hecho es expandir el mismo...

.....

La mencionada "accesibilidad" podemos distinguirla porque los elementos desplegables son a la vez enlaces que funcionan como tal en navegadores con javascript desactivado.

.....

Leer apunte completo...

Iconos

Publicado el día 21 de marzo de 2014

Hace algunos años hemos empezado un proyecto para crear los iconos que necesitemos en nuestras páginas a partir de cualquier imagen o recorte de ellas.

.....

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

Sistema de comentarios paso a paso: Seguridad

Publicado el día 29 de septiembre de 2013

Debemos tener una lucha encarnizada contra el spam...

.....

Los códigos "captcha" por mucho tiempo han sido los más usado para evitar los mensajes "basura", consistente en una imagen que representa la clave que se debe introducir en un control del formulario, y de coincidir, realizar la transacción.

.....

Estamos trabajando en un nuevo sistema que en breve presentaremos, pero a pesar de que en principio pueda parecer eficaz, debemos seguir pensando que "los malos" pueden encontrar alguna vulnerabilidad. Por lo pronto seguiremos dejando los comentarios ocultos, mostrándolos tras una sesión administrativa de los mismos.

.....

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

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

SVG: Mapas con coordenadas relativas

Publicado el día 02 de septiembre de 2012

En un tema de los foros del web: Mapa de imagenes con coordenadas relativas, la única respuesta hasta ahora ha sido la mía recomendando el uso de imágenes svg.

.....

Para justificar mi recomendación me propuse hacer un ejemplo, pero para no saturar de "Mapas de España" este diario he decidido usar otro viejo ejemplo: "Rollover en mapa: Creando recortes circulares".

.....

Para poder comparar los resultados, a continuación mostramos el mismo "mapa" sin reducir.

.....

Y si revisamos los códigos, la única deferencia entre ambos mapas se encuentra en los atributos width y height de las etiquetas svg.

.....

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

Top 10 con Ajax (paginación)

Publicado el día 27 de mayo de 2012

Últimamente hemos modificado la página para mostrar los apuntes creados cada mes en la sección archivos, por lo que la sección "Últimos apuntes" tiene ahora poco sentido mantenerla. Por otro lado, en otro apunte hemos mostrado los 10 apuntes más leídos del diario, y hemos pensado que es lo que podría sustituir la sección antes mencionada.

.....

Otra modificación que hemos realizado es obtener el resumen al igual que hemos hecho con el apunte anterior. Tan solo falta saber cuántas páginas habrá, o aún mejor, cuántos apuntes... ¡Ya tenemos dos motivos para realizar consultas "Ajax"!

.....

Después de obtener ese dato (el número de apuntes) obtenemos la primera de las páginas y concluímos con los ajustes finales.

.....

Tan solo nos queda revisar detalles secundarios pero no menos importantes como las actualizaciones en los elementos que indican dónde estamos, ya sea enfatizando el vínculo actual (en nuestro caso hemos incrementado el tamaño de la letra/número), o actualizando ese valor en la zona informativa.

.....

Leer apunte completo...

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

Publicado el día 21 de abril de 2012

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

.....

Para lograr este objetivo, hemos tenido que seguir unos sencillos pasos que comentaremos a continuación.

.....

En primer lugar hemos tenido que conseguir un perfecto aislamiento de los elementos que necesitaremos que podríamos etiquetar como módulo de valoración y módulo de comentario.

.....

Luego, para crear las funciones de inicio, las agrupamos en una función "iniciar_todo()", y más adelante:

.....

poner_evento(window, "load", iniciar_todo);

.....

Leer apunte completo...

La estética del sitemap

Publicado el día 26 de marzo de 2012

Las páginas web que pretenden tener un buen posicionamiento en los buscadores deben acompañarse de un sitemap.

.....

Aunque se puedan considerar sinónimos, debemos diferenciar el "mapa del sitio" (a nuestra derecha) del sitemap que se acostumbra a crear para ayudar a los buscadores a recoger la información de nuestro sitio.

.....

Evidentemente nuestra hoja xsl tiene también una hoja css asociada (vaya la redundancia)...

.....

Leer apunte completo...

Experiencia SEO: empezando

Publicado el día 18 de marzo de 2012

Desde que iniciamos el proyecto de reforma de esta página nos hemos preocupado de que mejore su posicionamiento en los buscadores.

.....

Leer apunte completo...

La última caricatura

Publicado el día 10 de marzo de 2012

La última modificación que hemos realizado en el diario es un recuadro para mostrar y enlazar la última caricatura que subamos a nuestra tabla de imágenes.

.....

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