Weblog

DHTML está de moda

2005-01-17 19:30:58

Año nuevo, vida nueva. Año nuevo, moda nueva. Así que estamos muy contentos de recibir 2005 con noticias de este tipo. Parece que por fin hay gente que apuesta en serio por DHTML para solucionar problemas de navegación o usabilidad, o simplemente creando aplicaciones dinámicas que usan esta tecnología en lugar del omnipresente Flash. Vamos a ver unos cuantos ejemplos.

Ah, y antes de irme, solamente decir que este año sí que van a fructificar proyectos relacionados con DHTML a nivel local (algo se cuece desde hace un tiempo con Pedro y otros bloggers cercanos) e internacional (13thparallel cambia de formato, el Dojo Toolkit, etc). Otro día seguimos.

Programas gratuitos de uso diario

2004-12-22 08:26:52

Últimamente se ha hablado mucho del lanzamiento definitivo de la primera versión terminada de Mozilla Firefox. Sin duda es un buen programa y sobretodo una excelente alternativa a Internet Explorer. Además de la seguridad que ofrece, su navegación por pestañas y su rapidez, lo que a mi entender lo hace tan atractivo (más que Opera, la otra gran alternativa) es la gran cantidad de extensiones que tenemos a nuestra disposición, que nos permiten configurar no solo la apariencia sino también las funciones de nuestro navegador. Yo por ejemplo uso las siguientes:

Asimismo, otra gran noticia ha sido el lanzamiento de la primera versión terminada de Mozilla Thunderbird, un excelente gestor de correo electrónico. También dispone de numerosas extensiones, pero en este caso yo lo uso tal cual viene de fábrica.

Para finalizar, recomendar de nuevo el uso de un buen programa antivirus como es el AVG de Grisoft, que además es gratuito. En esta nueva versión (AVG 7.0 Free) hay una utilidad para asociar el antivirus al gestor de correos, con la novedad de que funciona incluso si usamos el Thunderbird. Pefecto.

Actualización de FLACCESS

2004-12-09 10:15:38

Acabo de lanzar la versión 1.3, que incluye algunos cambios respecto a la explicación original de cómo usar el script, parámetros, etc (ya han sido actualizados también ahí):

Bájate el último archivo comprimido con ejemplos para verlo funcionando.

¡Quiero mi ventana, joder! (o como destruir los target _blank)

2004-12-09 04:38:02

Siempre he pensado que el usuario debe poder elegir dónde quiere cargar un nuevo documento desde un enlace. Yo defiendo que como desarrollador puedes usar una cookie y ofrecer esa posibilidad si el usuario quiere, pero solamente si quiere (podeis ver el formulario de preferencias al fondo de la página). Mucha otra gente opina que lo mejor es no dejarles pensar y abrirlo todo en una ventana nueva. Odio esos casos. ¿Qué pasa si a mi no me da la gana irme de mi ventana? Oye, que si me gusta tu web ya volveré, tranquilo... Pues no, se empeñan en usar el target _blank. Bueno, pues todo esto se ha terminado. Adiós a los malditos target _blank. Si quereis saber cómo, seguid leyendo...

Seguir leyendo noticia

Artículo sobre DHTML no intrusivo

2004-12-01 17:43:40

Acaba de salir del horno un interesante artículo en diseñorama sobre DHTML y cómo programar páginas web manteniendo la accesibilidad, lo que últimamente se denomina DHTML no intrusivo. Ah, si, se me olvidaba, escrito por el menda, si tienen algún comentario se agradecerá la crítica constructiva, tanto si quieren dejarlo allí como aquí.Poco a poco iré añadiendo más ejemplos por aquí, si el tiempo lo permite.

Cómo añadir números de linea a los bloques de código

2004-11-29 19:56:46

Acabo de descubrir cómo añadir números de linea a los bloques de código que están dentro de texto preformateado. Se trata de usar una función javascript que recoge todos los elementos pre, y llama a una expresión regular que devuelve el número de lineas en ese bloque. Entonces, usando innerHTML simplemente añadimos una capa div que contiene los números de linea y se le da estilo usando CSS. El javascript, que forma parte de un espacio propio (un objeto literal para encapsular sus funciones) sería algo del estilo:


// adds line numbers to code sections:
numberCodeTags : function(){
	var PRE = document.getElementsByTagName('pre'); 
	var nl = /\n+/mg;
	for (var i = 0; i < PRE.length; i++) {
		var t = PRE[i].innerHTML;
//mozilla/ff cannot select all lines of a code element 
//that is inside a pre element:
		if(document.addEventListener && !window.opera) {
			Extras.getCodeText(PRE[i]);
		}
			
//will only work in mozilla+op (IE replaces \n by a space so its useless):
		var NL = Extras.getMatchArray(t,nl);
		if(NL) {
		var numeros = "";
		for (var lineas = 1; lineas < NL; lineas++) 
		numeros += lineas +"\n";
		PRE[i].innerHTML += "<div class='lines'>"+numeros+"</div>";
		}
	}
},
	
// matches a regexp to a string, returns array
getMatchArray : function(myString,myRegExp){
	return myString.match(myRegExp).length;
},

// FF  hack to make easier select all lines of a 
//code element that is inside a pre element:
getCodeText : function(obj){
	var color = CSS.getStyle(obj.firstChild,"color");
	var bgcolor = CSS.getStyle(obj.firstChild,"backgroundColor");
	if(bgcolor=="transparent") bgcolor="white";
	obj.onmouseover = function(){
		obj.firstChild.style.color = bgcolor;
		obj.firstChild.style.backgroundColor = color;
	}
	obj.onmouseout = function(){
		obj.firstChild.style.color = color;
		obj.firstChild.style.backgroundColor = bgcolor;
	}
},

El CSS podría ser algo parecido a estas lineas:


pre	{
	position:		relative;
	color: 			#913117;
	padding: 		0px 1em 0px 1em;
	margin: 		0px;
	font-family:		Courier, monospace; 
	font-size:		1em;
	}
code	{
	font-variant: 		normal;
	color: #913117;
	}
pre code	{
	position:		relative;
	top:			0px;
	left:			1.2em;
	font-variant: 		normal;
	color: 			#913117;
	padding: 		0px;
	margin: 		0px;
		}
pre .lines	{
	position:		absolute;
	top:			1em;
	left:			0px;
	width:			1.2em;
	padding: 		0px;
	margin: 		0px 1.2em 0px 0px;
  	background: 		#913117;
	color: 			white;
	}

La técnica parece funcionar solamente en Mozilla y Opera. IE reemplazaba los saltos de linea por espacios así que lo he ignorado. Los demás navegadores degradan tranquilamente.

Como ya han comentado, en Mozilla hay un fallo que no permite la selección de bloques de código que están dentro de bloques de texto preformateado. He intentado añadir un fondo de color (solamente para Mozilla) al pasar el ratón por encima, porque así parece un poco más fácil de ver cómo poder seleccionar. Aparentemente, si empezamos la selección en el espacio que hay entre el texto preformateado y el bloque de código (el espacio en blanco entre los números y el código), se deja seleccionar.

Algunas etiquetas permitidas en los comentarios

2004-11-18 07:25:07

Ayer por la noche pude acabar una modificación en el sistema de gestión de contenidos de este weblog, con la inestimable ayuda de Dan para solucionar una expresión regular. Gracias a eso, ahora los comentarios admiten las siguientes etiquetas: p, a, em, strong, pre, code.

Recomiendo que useis la etiqueta de párrafo para abrir y cerrar un bloque de párrafo, el texto quedará mejor. Si quereis añadir código en linea (dentro de un párrafo) simplemente usad la etiqueta code, el script se encargará de las entidades. Si por lo contrario quereis el código en un bloque aparte, que respete los saltos de línea, etc, podeis usar <pre><code>tu código</ code></pre> pero fuera de un párrafo (pre actua como bloque). Cualquier otra código o etiqueta que no esté dentro de code será destruida.

Bookmarklet para aumentar el tamaño de tus ... textarea

2004-11-17 07:40:47

Acabo de hacer un pequeño script que aumenta el tamaño de todos los textarea de una página (incluyendo las páginas interiores de un frame) hasta los 450px de ancho y 250px de alto. Podeis guardarlo como favoritos y usarlo en vuestros gestores de contenidos o en esa típica página que te deja solamente 100 píxeles de ancho para escribir un mensaje. Para ejecutarlo aquí mismo, seguid este enlace. A mi me vendrá de perlas para escribir modificaciones en el phpMyAdmin. Como siempre, si te gusta el script, puedes encontrar más en la sección utilidades.

Presentación de FLACCESS: flash manteniendo la accesibilidad

2004-11-10 13:23:36

Detección de flash: métodos anteriores

He intentado descubrir un método que detecte en el servidor la versión instalada del plugin en el navegador, pero a pesar de que a macromedia no le costaría nada añadir la versión a la variable devuelta por el HTTP_ACCEPT, se empeña en obligarnos a usar lenguajes de cliente para detectarlo. Si tuviesemos esa opción podríamos gestionar el contenido alternativo desde el mismo servidor o añadir el método del flash satay sin temor alguno. El problema principal de esa técnica es que nevegadores con plugins antiguos no cargan el flash ni dejan ver el texto alternativo, y en menor medida, que no hace streaming, aunque para eso podemos usar una película lanzadera, como en mi anterior artículo. Además, algunos lectores me han comentado que el método de añadir flash con lanzadera no es suficientemente flexible (por ejemplo no permite pasar variables al flash) y casca en algunos navegadores (como mi Opera 7.23). Por esa razón he intentado un camino distinto.

Concepto

La idea es básicamente similar al concepto del sIFR: tener el contenio alternativo en algún elemento html, luego tener un script que detecte la versión del plugin en el navegador y si es la necesaria entonces sustituir el contenido alternativo por el objeto flash. La ventaja de este método, es que a diferencia de el 99% de los métodos habituales, si el navegador no tiene javascript o no puede cargar el objeto flash, el contenido alternativo sigue estando en el html, por lo cual la accesibilidad es alta. En cambio, en los otros métodos, el javascript se encarga de escribir en el documento el objeto flash y el contenido alternativo, que evidentemente resulta inaccesible en caso de no tener javascript activado. Así pues manos a la obra...

Seguir leyendo noticia

Añadiendo Flash de manera accesible

2004-10-25 12:00:00

Método obsoleto en detrimento de este otro. Lo dejo aquí para mantener un archivo de cómo ha ido el tema.

El por qué

Hace poco estaba haciendo una web que tenía que ser accesible, pero que a la vez tenía un menú en flash. Como yo el flash nunca lo he usado hasta ahora empecé a investigar un poco y descubrí que casi todo el mundo pasa de dar contenidos alternativos al flash y lo peor de todo, inserta sus películas dentro de etiquetas object usando javascript para detectar la versión del plugin. Eso representa un grave problema de accesibilidad, puesto que los usuarios que no tengan javascript activado no podrán insertar la película y además no podrán leer el contenido alternativo (si lo hay).

Seguir leyendo noticia

Barra de progreso en ... PHP

2004-10-21 09:03:56

Situación

Tengo que hacer una importación masiva de datos de Excel a MySQL. Todo muy bien, excepto por dos detalles: debo usar un set_time_limit(600); para sobrepasar el tiempo máximo de ejecución del servidor (ningún problema) y durante todo el proceso los echo que están dentro del bucle interminable no salen por pantalla. Eso ya me preocupa más porque el usuario que haga la importación puede pensar que el proceso se ha quedado congelado en algún punto. Así que me pongo a buscar...

Avances

Parece ser que php trae unas funciones que liberan el contenido de los buffers por pantalla. Se trata de flush() y ob_flush(). Sinceramente no entiendo muy bien la diferencia entre ambos, pero por lo visto en los comentarios del manual es mejor usarlos conjuntamente para asegurarse que el contenido actual de la página de muestra en el navegador. Probamos en cada etapa del bucle y bingo! La cosa funciona! Así que me pongo a pensar si será posible hacer una barra de progreso en PHP... Y lo es! No me lo puedo creer. Claro que bajo ciertas condiciones, pero el efecto es una gozada. Veamos...

Seguir leyendo noticia

¿Alguien tiene los artículos de mysql-hispano?

2004-10-20 09:03:48

Parece ser que mysql-hispano ha muerto. La verdad es que es una pena porque los artículos tenían mucho nivel. Y cosas que pasan, leyes de Murphy o lo que quieras, no hace ni una semana que comentaba en este post sobre los que me parecían más interesantes y ahora ya no están... Casi siempre suelo guardarme una copia local de los artículos que puedo necesitar en un futuro, por si las moscas. Curioso, esta vez no lo he hecho.

Así que apelo al compañerismo y las copias de seguridad ajenas... Ya se que es muy ruin, pero si alguien tiene alguno de esos artículos mencionados en el otro post, ¿me puede enviar un email y ya apañaremos el intercambio? (la cesión más bien...). Muchas gracias por adelantado.

Como bien nos informa mur0 en los comentarios, parece que los chicos de mysql-hispano cedieron algunos artículos a la gente de programacion.com. Reproducimos aquí los que se recuperan de la lista del post anterior: Principios de diseño de bases de datos y Transacciones en MySQL. Perdemos los de Tipos de datos en MySQL, Integridad referencial en MySQL e Índices y optimización de consultas. Ya revisando esa sección he encontrado uno también muy interesante: Lo nuevo de MySQL 4.0, traducido por mysql-hispano de un artículo del mismísimo Jeremy Zawodny

Apaño de scroller dhtml de Aaron Boodman (ypSimpleScroll)

2004-10-15 14:17:08

Os presento un apaño que hice para la web de mtv españa durante el mes de mayo de 2004. Necesitábamos un scroller dhtml que funcionase con flechas, con soltar y arrastrar, y además fuese compatible con el explorer de mac. No había manera de encontrar uno que cumpliese todos los requisitos, así que pillé el ypSimpleScroll de Aaron Boodman y lo modifiqué mezclándolo con su script de soltar y arrastrar.

El script degrada perfectamente en (casi) todos los navegadores, aunque por lo visto en Opera casca y no degrada bien porque aplica el script a medias. No me he entretenido en buscar el fallo, si alguien tiene tiempo puede enviarme un email. Os dejo con un ejemplo del script usando texto de mi página de utilidades.

Seguir leyendo noticia

Tutoriales de MySQL y de diseño y normalizacion de bases de datos, Recuperación de Información...

2004-10-14 08:57:12

Una de enlaces interesantes. Últimamente me estoy empapando de teoría para una aplicación relativamente potente, para la cual he tenido que meterme con las transacciones y por tanto a leer teoría. Os dejo unas joyitas:

Como veis la mayoría son de un mismo sitio, pero creo que vale la pena fusilarlos tan exageradamente, son excelentes. El último ya lo había enlazado hace tiempo y no tiene mucha relación con el diseño de bases de datos ni con MySQL específicamente, pero he decidido enlazarlo también aquí para tenerlo más a mano, el concepto me parece una obra de arte.

Libros de programación gratis (II)

2004-10-07 04:40:46

Acabo de descubrir esta pequeña maravilla: Practical PHP Programming, un libro de PHP online gratuito. Que no os tire para atrás que sea gratuito, el nivel es muy bueno y tiene trucos muy bien explicados.

Cambia las preferencias

Cambia las preferencias

Licencia

Creative Commons 2001-2004. Sergi Meseguer

Sindicación RSS

rss (1, 2 ), xhtml, css, taw