codinami.com
BUSCAR

Modificando SyntaxHighlighter para pasar el validador w3c

30 de Junio, 2008
posteado en: JavaScript, WordPress

Buscar un coloreador de código no fue tarea fácil para mi. En un principio implementé el iG:Syntax Hiliter, el mismo que utilizan en ajaxian.com. El problema de este plug-in es que transforma los estilos del código en el servidor y lo ensucia mucho, por lo tanto me tuve que pasar los estándares por la $&%$#….

Buena fue mi sorpresa cuando encontré a SyntaxHighlighter; tiene una buena presentación y colorea el código por javascript.

Me encontre el mismo problema con este plug-in…. mi pagina sigue sin pasar el validador. Me vi obligado a meter mano al código. Lo primero fue cambiar el modo en que selecciona las porciones de código. Por defecto es de la siguiente manera

<pre name="code" class="php">
.....codigo....
</pre>

El validador reclama que no existe el atributo name para la etiqueta PRE, por lo tanto fui al código, y localicé donde estaba el problema…. comenté una linea por allí… otra por allá… y ahora los PRE no requieren el atributo name.

<pre class="php">
.....código....
</pre>

Lo segundo que reclama el validador, es que el plug-in incluye los js de esta manera:

<javascript class=”javascript” src”….(ruta al js).js” />

¿Que demonios hace el atributo CLASS ahí?….en fin… ya está solucionado.

SyntaxHighlighter modificado: google-syntax-highlighter

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (Vota!)
Loading ... Loading ...
Sin Comentarios »

Editor de texto WYSIWYG… hazlo simple.

21 de Diciembre, 2007
posteado en: JavaScript, Recursos

nicedit1.png
Click para ir a su web

Adoro la simplicidad. Este editor nace como una alternativa ligera, a los ya sofisticados editores WYSIWYG tales como TinyMCE y FCKEditor. Además de su fácil implementación, tiene la ventaja de ser liviano (30kb de código comprimido y 3kb para las imágenes).

Tenemos varios textareas:

<textarea id="area1"></textarea>
<textarea id="area2"></textarea>
<textarea id="area3"></textarea>

Los transformamos todos:

bkLib.onDomLoaded(function() {
	nicEditors.allTextAreas;
}

O sólo uno:

bkLib.onDomLoaded(function() {
	new nicEditor().panelInstance('area1');
}

Eso a modo bastante básico, porque puedes especificar que botones colocar, donde están las imágenes, y puedes guardar con Ajax

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (5)
Loading ... Loading ...
2 Comentarios »

Pasar datos entre páginas con JavaScript

11 de Diciembre, 2007
posteado en: JavaScript

En el desarrollo de aplicaciones web, hay veces en que resulta práctico hacer cambios dinámicos en nuestro html, a partir de información incluida en la URL. Hace algún tiempo encontré por internet esta sencilla, pero elegante función en JavaScript que permite rescatar los parámetros de la URL sin necesitar código del lado servidor.

function gup( name ) {
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );
	if( results == null )
	return "";
	else
	return results[1];
}

Ocuparemos la función de la siguiente manera:
var otraVariable = gup(”nombreVariableEnLaUrl”);

Ejemplo
Supongamos que tenemos una url como esta: http://www.codinami.com?variale=hola&variable2=mundo

var v1 = gup("variable");
var v2 = gup("variable2");
alert(v1 + " " + v2 + "!");

Se mostrará un cuadro de alerta con el mensaje “hola mundo!”… muy original :P

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (3.5)
Loading ... Loading ...
2 Comentarios »
Sitio Admimistrado con WordPress