17
jun
aNieto2k hace 955 días en: javascript, Programacion, webdev
Alfredo Artiles vuelve a regalarnos una nueva herramienta para MooTools que nos permite controlar el scroll que hacemos accionando un evento a medida que lo estamos haciendo, e24ScrollEvents.
(Ver Imagen)
Muy similar al desarrollado por David Walsh (ScrollSpy) que vimos hace unos días, pero enfocado para ser más fácil de usar y de implementar en nuestras aplicaciones. Para ello, usa un sistema basado en eventos asociados a elementos, de este modo los elementos podrán tener los eventos “visible” y “hidden” que serán lanzados a medida que vamos haciendo scroll y el elemento esté “visible” o “hidden” (oculto).
Ejemplo
// Definimos el monitor del scroll
new e24ScrollEvents({
container: window,
mode: 'vertical',
elements: ['el1', 'el2'] // Elementos relacionados al scroll.
});
// Eventos que serán accionados en el scroll
var el1 = $('el1');
el1.addEvents({
'visible': function() {
el1.setStyle('border', '4px solid #000');
},
'hidden': function() {
el1.setStyle('border', 'none');
}
});
// Eventos que serán accionados en el scroll
var el2 = $('el2');
el2.addEvents({
'visible': function() {
el2.setStyle('border', '4px solid #000');
},
'hidden': function() {
el2.setStyle('border', 'none');
}
});
Demo y Descargar
Puedes echarle un vistazo a las dos demos que Alfredo nos ha dejado y descargar código directamente desde su página.
17
jun
aNieto2k hace 955 días en: webdev
Hoy, por fin, podemos disfrutar de la RC1 de Firefox 3.5. Sin duda un paso más hacia una versión estable que nos actualize desde la 3.0.11 diréctamente a la 3.5.
En esta nueva versión, además de encontrarnosla en más de 70 lenguajes podemos encontrarnos:
- Private Browsing Mode: Por fín la navegación privada estará disponible y funcionando perfectamente.
- Mejoras en el rendimiento de TraceMonkey: El nuevo motor Javascript ha sido mejorado sustancialmente.
- Geolocation: Posibilidad de geolocalizar el navegador (estandar incluido en HTML5).
- JSON nativo: Ya será posible trabajar con JSON nativamente.
- DOM Workers: Herramienta que nos permite llamar a funciones que se ejecutarán en segundo plano.
- Optimizaciones en Gecko: El motor encargado de renderizar el contenido HTML de Firefox ha sufrido cambios para ser más rápido y consistente.
- Soporte multimedia HTML5: Se incluye el tag
<video />, <audio />, al igual que algunas mejoras CSS3 como las fuentes descargables.
- Selectors API: Selección de elementos mediante nomenclatura CSS3.
- HTML storage: El Google Gears nativo establecido en el HTML5.
[Descargar]
17
jun
aNieto2k hace 955 días en: estandares, javascript, Programacion, web, webdev
Doodle.js es una librería que nos permite trabajar fácilmente con el elemento <canvas /> y todo lo que ello conlleva. Con una estética similar a jQuery, dibujar sobre el lienzo que es <canvas /> es tan sencillo como esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- CANVAS PARA IE -->
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
<!-- SCRIPT DOODLE -->
<script src="./doodle-0.1.js" type="text/javascript"></script>
<!-- JAVASCRIPT -->
<script type="text/javascript">
function init() {
(function(oo) {
oo.canvas('#my_canvas');
var box = oo.rect({x:25, y:25,width:50, height:50, fill:"#ff0000"});
box.draw(); //draw a red box with initial parameters
box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
box.modify({fill:'purple'}).rotate(-45).draw();
box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();
})($doodle);
};
</script>
</head>
<body onload="javascript:init();">
<!-- ELEMENTO CONTENEDOR CANVAS -->
<canvas id="my_canvas" width="600" height="400">
<p>Error: El elemento canvas no está disponible para este navegador.</p>
</canvas>
</body>
</html>
Ejemplos
No os perdais algunos de los ejemplos disponibles en la página de la librería:
16
jun
aNieto2k hace 956 días en: Actualidad, de la red, webdev
Opera viene pegando fuerte, y con Opera Unite ha pegado más fuerte todavía.
Opera Unite pretender ser un servidor web integrado en tu navegador. Que de una forma sencilla y cómoda podemor activar en nuestro navegador y que proporciona la capacidad de compartir ficheros, imagenes, incluso música desde nuestro navegador en local con el resto del mundo. Todo ello con una dirección web similar a esta:
http://work.anieto2k.operaunite.com/photo_sharing
(Ver Imagen)
Sin duda, esto compite con la idea de Google de centralizar todo el contenido de Internet en sus servidores y apuesta por una Internet distribuida en la que todos aportamos un poquito. Como dice Antonio, muy a la filosfía del P2P, que siempre me ha encantado.
Como todo servidor web requiere estar abierto para funcionar, por lo que si queremos dejar de compartir nuestro contenido bastaría con cerrar el navegador o cerrar el servicio directamente desde la opción pertinente.
Sin duda, tendremos que estar atentos a estas herramientas que pueden ser la primera piedra de algo muy gordo.
16
jun
aNieto2k hace 956 días en: javascript, Programacion, webdev, Wordpress
Creo que acabo de descubrir un bug, para mi un problemón, en WordPress 2.8. Se trata de la insercción de código mediante copia/pega en el editor visual de WordPress (TinyMCE).
Según las pruebas que he realizado, me he encontrado con que al intentar copiar este código:
<div class="cube">
<div class="face top">
</div>
<div class="face left">
</div>
<div class="face right">
</div>
</div>
Directamente desde UltraEdit (es el que uso en Windows, aunque supongo que usando TextMate o cualquier otro ocurrirá lo mismo). Obtengo este resultado:
<div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
Creo que he encontrado el problema en el fichero wp-includes/js/tinymce/wp-tinymce.js, sobre la línea 14-15. Pero aún no he tenido tiempo de solventarlo. Esta tarde le echaré un vistazo. ¿A alguien más le pasa?
Solución temporal
Por el momento he visto que podemos solucionarlo editando el fichero en cuestión (wp-includes/js/tinymce/wp-tinymce.js)
Buscamosen la línea 14-15 este código:
...if(c.getParam("paste_auto_cleanup_on_paste",true))...
Y reemplazamos el valor true por false para evitar que nos limpie estos parámetros.
...if(c.getParam("paste_auto_cleanup_on_paste",false))...
Esto puede deshabilitar todos los filtros aplicados al pegado de código y quizás con contenido de documentos Word sea necesario, lo mejor es hacer pruebas antes de dejarlo funcionando definitivamente.
16
jun
aNieto2k hace 956 días en: Actualidad, CSS, de la red, estandares, Programacion, web, webdev
Firefox 3.5 nos delitará con la posibilidad de realizar tranformaciones 3D nativamente. Esta propiedad del CSS nos permitirá, entre otras cosas, dar efecto de profundidad a los elementos de nuestra web mediante transformaciones de inclinación y tamaño realizado con unas pocas líneas de código.
(Ver Imagen)
Código
// HTML
<div class="cube">
<div class="face top">
</div>
<div class="face left">
</div>
<div class="face right">
</div>
</div>
// CSS
.cube {
position: absolute;
}
.face {
position: absolute;
width: 200px;
height: 200px;
}
// Tranformaciones 3D
.top {
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
-moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.right {
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}
Por el momento, deberemos usarla con prefijo (-moz), ya que aún no está estandarizado por la W3C. Por el momento tenemos que conformarnos con la beta 4, pero en poco más de un mes tendremos versión definitiva.
15
jun
aNieto2k hace 957 días en: estandares, javascript, Programacion, web, webdev
Mucho se está hablando últimamente de HTML5 y las mejoras multimedia que incorpora a los nuevos navegadores. El nuevo tag <video /> harás las delicias de más de uno y otros estarán pensando en si este nuevo estandar ofrecerá la misma cálidad que los formatos existentes. De ahí que via hacks.mozilla.org descubra una comparativa [Traducción parcial] de el nuevo formato Ogg Theora+Vorbis(MP3), un estandar abierto y disponible para todo aquel que quiera ayudar al proyecto con nuevas implementaciones y que rivaliza con el formato HD de Youtube que hasta el momento está usando una compresión H264.
Para desmentir alguna falsas ideas que algunos tienen sobre los estándares abiertos:
Si [youtube] fuera a cambiar a theora y mantener apenas la calidad actual que posee, tomaría casi todo el ancho de banda de Internet.
Realizan una serie de pruebas con los dos formatos y demuestran que:
- Theora+Vorbis es sustancialmente mejor que el de YouTube a 327 kbit/seg.
- Vorbis es mucho mejor que el mp3.
Estas nuevas funcionalidades vienen para quedarse, y lo vamos a notar, eso está claro 
13
jun
aNieto2k hace 959 días en: Asides, estandares, javascript, Programacion, web, webdev
Interesante artículo de Andrés Fernández en el que nos muestra la forma de optimizar y disfrutar de gradientes mediante Javascript. Para ello hace uso de <canvas />, un elemento bastante bien adoptado por todos los navegadores modernos y fácil de parchear para Internet Explorer. Áltamente recomendable. Gracias Jose Antonio.
13
jun
aNieto2k hace 959 días en: Asides, javascript, Programacion, webdev
JetPack se ha actualizado a su versión 0.2. Una versión cargada de nuevas funcionalidades como sliders, jetpack.future y almacenamiento permanente. Nuevas mejoras para que nos sea más fácil generar nuestros plugins.[Descargar]
13
jun
aNieto2k hace 959 días en: webdev
El hacer pruebas de versiones Beta, por norma general solo debe ser tenido en cuenta como pruebas de por donde van los tiros, pero en esta comparativa entre Google Chrome y Firefox 3.5 sobre un Acer Aspire One dejan muy claro que Google Chrome está imparable y que ningún nuevo navegador lo puede hacer frente actualmente.
Estas pruebas, realizadas con el benchmark Futuremark Peacekeeper, y los resultados hablan por si solos.
Está claro que el navegador de Google tiene muchas papeletas para convertirse en el rival directo de Internet Explorer en poco tiempo. Además de disponer de la mejor empresa detrás para promoverlo y hacerlo llegar a todos los hogares.
