CodeMirror: consola Javascript para tus páginas web

ByLuis

CodeMirror es una librería realizada con MochiKit que nos permite incluir una consola de Javascript en nuestras aplicaciones web. Un ejemplo perfecto para el funcionamiento es el libro de Javascript online Eloquent Javascript, el cual muestra ejemplos javascript y usa la consola para poder ejecutarlos.

codemirror.png

Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.

Además es sencillo de utilizar:

var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});

CodeMirror

links for 2008-01-23

ByLuis

Mejorar la velocidad de nuestra web con PHP

ByLuis

A la hora de mejorar mejorar el rendimiento de nuestras páginas web podemos hacer cuatro cosas:

  • Realizar menos peticiones HTTP
  • Añadir una cabecera para que expire en el futuro
  • Comprimir mediante Gzip componentes de la página
  • Reducir el tamaño de los archivos Javascript, CSS y HTML

Todo esto se puede hacer con la librería que mostramos a continuación: reduce las peticiones porque junta los archivos CSS y Javascript, y reduce los CSS, HTML y Javascript eliminando espacios y cosas parecidas y luego cacheando.

Para ello solo habrá que añadir como mínimo 3 líneas:

require_once('class.compressor.php');
$compressor = new compressor('css,javascript,page');
// Y al final del script
$compressor->finish();

Improve website load time by 500% with 3 lines of code

Amy Editor: editor web de código

ByLuis

Amy Editor es un editor colaborativo vía web que permite modificar documentos o código de forma colaborativa. Funciona en cualquier navegador, pero ya dejan claro que solo dan soporte a Safari y navegadores basados en Gecko, y que ni quieren ayuda para IE u Opera, ni dan soporte oficial.
amy.png
Soporta varios lenguajes de programación (C, C++, C#, JavaScript, Ruby, PHP, Java y HTML), esquemas de colores, internacionalización, snippets, abre ficheros vía FTP, blogs, locales, WebDAV. Además resalta la sintaxis, tabulación específica para cada lenguaje, marcadores, deshacer/rehacer y mucho más.
Una herramienta bastante interesante para realizar proyectos de forma colaborativa.
Amy Editor
Gracias diarioTHC por el aviso.

|

micURL: servicio acortar URL de BlogsMedia

ByLuis

Se podría decir que micURL es otro servicio que acorta URLs, pero sería engañar. ¿Qué le hace diferente? pues que está hecho por mis amigos de Blogs Media. El resto es similar a los demás servicios, introduces url, te ofrece url acortada, accedes a esa url y te redirecciona a la página original. Además ofrece la posibilidad de copiar al portapapeles tanto para IE como para Firefox.
micurl.png
Entonces, si micURL no ofrece nada, ¿por qué hacerlo? La respuesta es sencilla, irá integrado en YouAre, lo cual demuestra la calidad de servicio que va a ofrecer YouAre.
Por cierto, hay muchos huevos de pascua entre las URLs, algunas bastante simpáticas.
micURL ( = micro URL)

Porcentaje de carga mediante CSS

ByLuis

Uno de los controles más usados en el desarrollo de animaciones Flash es el que muestra el porcentaje de carga de un elemento. Si queremos desarrollarlo mediante CSS nos puede venir muy bien este ejemplo.

porcentaje.png

Usando este código HTML:

<div id="box">
<div id="bar">50%</div>
</div>

y estos estilos:

#box{
width:250px;
border:1px solid #000;
height:17px;
}
#bar{
width:50%;
background:#000 /* u otro background */;
height:14px;
color:#fff;
text-align:right;
padding:3px 0px 0px 0px;
}

podemos obtener ejemplos de progreso. Eso sí, esto luego habrá que cambiarlo mediante Javascript para que sea dinámico.

CSS Percentage Bars

Vía / Posh CSS

links for 2008-01-21

ByLuis

links for 2008-01-19

ByLuis