Interesante librería Javascript que nos permite mostrar en Canvas (HTML5) el contenido de un PDF. Puede venir muy bien para aplicaciones móviles, ya que en navegación en escritorio normalmente la gente tiene instalado un visor de PDFs.
Simple pdf.js page viewer
/ --
Vía / @badass_js
LiberÃa Javascript para crear un menú contextual cuando se pincha con el botón derecho del ratón, centrado en el contenido en el que se pulsa.
Entre las opciones que ofrece está:
VÃa / Ajaxian
En muchas aplicaciones web, la utilización de un campo fecha suele ser algo habitual. Es preferible que el usuario no tenga que escribir ninguna fecha, sino que esta se tenga que introducir mediante un control de tipo calendario, evitando asà que ocurran ciertos errores y facilitando la labor al usuario. Tened en cuenta que hay diversos formatos DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, …
Espero que esta lista de calendarios realizados mediante Javascript os pueda ser de utilidad:
Estoy colaborando junto a @jlantunez y @belelros en WebSlides, un proyecto open source que permite crear presentaciones usando un navegador web de forma increíble.
Para hacer las cosas bien, vamos a incluir pruebas de testing, y para ello he mirado cómo hacerlo con AVA y PhantomJS. El problema con el que me he encontrado ha sido que todo es asíncrono y a veces da un poco de problemas esperar a cargar la página para que AVA empiece a realizar las pruebas.
Además no es plan de cargar la página en cada una de las pruebas, por lo que cargo la página una vez y luego realizo las pruebas necesarias. Esto me obliga a que las pruebas sean secuenciales en vez de en paralelo, pero bueno, tampoco es mucho problema.
Como me he roto la cabeza intentado averiguar cómo hacer, ya que soy un tanto novato en esto, pongo el código para aquel que lo necesite, aunque bueno, en breve estará en GitHub:
// Cargo las librerías
let phantom = require("phantom");
import test from 'ava';
// Para almacenar lo que PhantomJS necesita
let ph_, page_, status_;
// Función que carga la página
const load = async () => {
await phantom.create().then(async ph => {
ph_ = ph;
return await ph_.createPage();
}).then(page => {
page_ = page;
return page_.open('http://webslides.tv/');
}).then(status => {
status_ = status;
return true;
}).catch(e => console.log(e));
}
// Tests
test.serial("Page loaded", async t => {
await load();
t.is(status_, 'success');
});
test.serial('#webslides exits', async t => {
await page_
.evaluate( () => document.querySelector('#webslides') != null )
.then( ws => { t.truthy(ws); } );
});
test.serial('WebSlides object exits', async t => {
await page_
.evaluate( () => window.ws != null )
.then( ws => { t.truthy(ws); } );
});
/**
* Last test
*/
test.serial('Closing', async t => {
await page_.close();
ph_.exit();
t.true(true);
});
UI.Layout es un plugin para jQuery que nos permite crear layouts en nuestras aplicaciones web, ya sean complejos o sencillos. Con este plugin podemos añadir toolbars, menús, paneles de ayuda, status bars, …
Entre sus características encontramos:
Vía / WebAppers
Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.
Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.
inlineEdit2 es un editor de contenidos inline realizado con Mootools.
Su uso es muy sencillo, tan solo es necesario añadir el siguiente código para poder utilizarlo:
$('element').inlineEdit();Lo más asombroso es su tamaño, 20k sin comprimir, y para los que estén deseando mirar su funcionamiento, aquà va el código:
var inlineEdit = new Class({
getOptions: function(){
return {
onComplete: function(el,oldContent,newContent){
},
type: 'input'
};
},
initialize: function(element,options){
this.setOptions(this.getOptions(), options);
if(!element.innerHTML.toLowerCase().match('<'+this.options.type)){
this.editting = element;
this.oldContent = element.innerHTML;
var content = this.oldContent.trim().replace(new RegExp("<br>", "gi"), "\n");
this.inputBox = new Element(this.options.type).setProperty('value',content).setStyles('margin:0;background:transparent;width:99.5%;font-size:100%;border:0;');
if(!this.inputBox.value){this.inputBox.setHTML(content)}
this.setAllStyles(element,this.inputBox);
this.editting.setHTML('');
this.inputBox.injectInside(this.editting);
(function(){this.inputBox.focus()}.bind(this)).delay(300);
this.inputBox.addEvent('change',this.onSave.bind(this));
this.inputBox.addEvent('blur',this.onSave.bind(this));
}
},
onSave: function(){
this.inputBox.removeEvents();
this.newContent = this.inputBox.value.trim().replace(new RegExp("\n", "gi"), "<br>");
this.editting.setHTML(this.newContent);
this.fireEvent('onComplete', [this.editting,this.oldContent,this.newContent]);
},
setAllStyles: function(prevel,el){
if(prevel.getStyle('font'))el.setStyle('font', prevel.getStyle('font'));
if(prevel.getStyle('font-family'))el.setStyle('font-family', prevel.getStyle('font-family'));
if(prevel.getStyle('font-weight'))el.setStyle('font-weight', prevel.getStyle('font-weight'));
if(prevel.getStyle('line-height'))el.setStyle('line-height', prevel.getStyle('line-height'));
if(prevel.getStyle('letter-spacing'))el.setStyle('letter-spacing', prevel.getStyle('letter-spacing'));
if(prevel.getStyle('color'))el.setStyle('color', prevel.getStyle('color'));
}
});
Element.extend({
inlineEdit: function(options) {
return new inlineEdit(this, options);
}
});
inlineEdit.implement(new Events);
inlineEdit.implement(new Options);Algo que nos puede ser útil en lugares como wikis o parecidos.
Comments are closed.
En opera el blog se ve espantoso…
Aunque en navegadores de equipos de sobremesa también funcionaria bien, nada mejor que tener una pagina autónoma que no dependa de muchas otras aplicaciones por parte del usuario para mostrar su contenido!