6
Sep
aNieto2k hace 2 días en: CSS, Programacion, estandares, javascript, webdev
:Select[ivizr] es una librería javascript que nos permite llevar las pseudo-clases y atributos de CSS3 a navegador que no los soportan como Internet Explorer.
Instalación
Pensado para funcionar con las principales librerías Javascript existentes, su uso es muy sencillo.
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
Una alternativa interesante para los que no estén satisfechos con ie-css3.js.
,
5
Sep
aNieto2k hace 3 días en: tweets
En mi twitter he publicado estos enlaces que creo os pueden interesar.
Saludos
,
30
Ago
aNieto2k hace 9 días en: Asides, PHP, Programacion, Wordpress
Uno de los principales problemas de WordPress es el consumo de memoria, este consumo no siempre puede reducirse y poco a poco (versión a versión) parece que la funcionalidad básica va consumiendo más memoria de nuestro sistema. Para intentar reservar más memoria disponible en nuestro sistema la gente de WeblogToolsCollection.com publica un artículo recopilatorio de soluciones al famoso “Fatal error: Allowed memory size of 33554432 bytes exhausted.”
,
30
Ago
aNieto2k hace 9 días en: Programacion, estandares, javascript, usabilidad, webdev
elRTE es un editor WYSIWYG open source desarrollado con jQuery UI que nos permite disponer de un editor enriquecido muy fácil de implementar en nuestros sitios web.
(Ver Imagen)
Características:
- Uso avanzado de estilos CSS
- Usado para identaciones
- Usado para controlar bordes
- En la mayoría de propiedades de los elementos usados.
- Ligero, rápifo y fácil de integrar
- Apariencia del interfaz configurable mediante CSS
- i18n. Fácilmente idiomatizable.
- Flexible para extender mediante plugins.
Existen muchos editores similares, y muchos respetan la accesibilidad web este es otro más a tener en cuenta.
,
29
Ago
aNieto2k hace 10 días en: tweets
En mi twitter he publicado estos enlaces que creo os pueden interesar.
Saludos
,
27
Ago
aNieto2k hace 12 días en: Programacion, javascript, webdev
Seanmonstar está desarrollando un framework basado en el modelo MVC llamado MonstarLab-MVC cuyo mayor atractivo es que está desarrollado en MooTools y pensado para crear aplicaciones ricas en el navegador del usuario.
Modelo
var Recipe = new Class({
Extends: Model.Ajax,
fields: {
id: Model.Fields.AutoField(),
title: Model.Fields.TextField({ length: 64, required: true}),
ingredients: Model.Fields.TextField()
}
});
Con el modelo podremos usar todos los tipos de almacenamiento disponibles (SQL, Ajax, XML, File, Storage,…)
Controlador
var RecipesController = new Class({
list: function(recipes) {
$(this).set('html', this.view({ recipes: recipes }));
}
events: {
load: function() {
Recipe.findAll(this.list.bind(this));
},
'click:relay(.recipe .delete)': function(e) {
e.preventDefault();
var recipeView = $(e.target).getParent('.recipe');
recipeView.model().destroy(function() {
recipeView.destroy();
});
}
}
});
El controlador se encargará de manejar los datos obtenidos desde el modelo.
Vista
<ul id="RecipesList">
<% recipes.each(function(r) { %>
<li class="recipe <%=r.identity()%>">
<h3><%=r.get(title)%></h3>
<%= view('recipes/ingredients', r.get('ingredients')); %>
<a href="#" class="delete">Delete</a>
</li>
<% }); %>
</ul>
La vista, muy similar a la de las páginas ASP nos permite separar las plantillas de la lógica de negocio.
Interesante proyecto al que seguir detenidamente
,
27
Ago
aNieto2k hace 12 días en: Programacion, estandares, javascript, web, webdev
gMail ha añadido la funcionalidad de permitir arrastrar ficheros de nuestras páginas web directamente al escritorio. Esta funcionalidad, inversa a la que hace unos meses publicaron y que puso en relieve el apoyo de Google al HTML5 y las nuevas funcionalidades javascript. La gente de CSS Ninja ha publicado un artículo explicando como conseguirlo nosotros mismos en nuestras páginas web.
HTML
<a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
application/octet-stream
:Eadui.ttf
:http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a>
Como vemos el elemento <a /> se encarga de informar de que el elemento es draggable y además informamos el atributo data- para informar los datos necesarios para la descarga.
Javascript
var files = document.getElementById("dragout"), fileDetail;
if(typeof file.dataset === "undefined") {
fileDetail = file.getAttribute("data-downloadurl");
} else {
fileDetail = file.dataset.downloadurl;
}
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetail);
},false);
Si el navegador soporta los atributos data- cogeremos los datos necesarios informados en el HTML anterior, para posteriormente añadirlo al evento dragstart y simular la descarga del fichero con los datos anteriores. Solo apto para navegadores adaptados a las nuevas funcionalidades HTML5. Fácil, simple y potente 
,
26
Ago
aNieto2k hace 13 días en: Programacion, Wordpress, webdev
Una de las características de WordPress desde casi sus comienzos es la capacidad de publicar artículos de forma remota. Inicialmente se introdujo la posibilidad de usar una dirección de correo a la que los artículos llegarían y automáticamente estos se publicarían.
Después, con la llegada del protocolo XML-RPC, se añadió la opción de recibir peticiones mediante él y extender así las opciones de los clientes externos para publicar remotamente. Ahora, unos años después, la API es bastante completa y nos permite generar un interfaz remoto, ya sea en nuestro escritorio (Windows/Linux/Mac) o incluso nuestro navegador, para administrar nuestro blog sin necesidad de acceder al panel administrador.
5ubliminal.com publica un pequeño artículo sobre las opciones más interesantes del API, que nos puede servir de guía si nos interesa esta funcionalidad o necesitamos extender la forma de acceder a nuestro blog.
,
26
Ago
aNieto2k hace 13 días en: Curiosidades, Programacion, estandares, javascript, web, webdev
El cambio de favicon de Google Calendar ha hecho que Danny Hope se pregunte si se podría hacer que el favicon mostrara la fecha actual en lugar del 31 que está mostrando ahora mismo.
Remy Sharp a modo de investigación personal se propuso conseguirlo, y tras unas cuantas pruebas logró generar un favicon dinámico usando <canvas /> y javascript para mostrar la fecha actual en lugar del estático 31.
(Ver Imagen)
Para ello, limpió el icono de Google dejando espacio para que los números cambien en función del día, unas pocas líneas de código y voala!
¿Como?
Como ya conocemos, la llamada para informar un favicon en cualquier página web:
<link id="favicon" rel="icon" type="image/png" href="ical-icon-complete.png" />
Marco en negrita el ID que ha indicado para localizar el elemento más fácilmente en el código Javascript.
(function () {
var canvas = document.createElement('canvas'),
ctx,
img = document.createElement('img'),
link = document.getElementById('favicon').cloneNode(true),
day = (new Date).getDate() + '';
if (canvas.getContext) {
canvas.height = canvas.width = 16; // set the size
ctx = canvas.getContext('2d');
img.onload = function () { // once the image has loaded
ctx.drawImage(this, 0, 0);
ctx.font = 'bold 10px "helvetica", sans-serif';
ctx.fillStyle = '#F0EEDD';
if (day.length == 1) day = '0' + day;
ctx.fillText(day, 2, 12);
link.href = canvas.toDataURL('image/png');
document.body.appendChild(link);
};
img.src = 'ical-icon.png';
}
})();
El código javascript, como podemos ver se encarga de generar un nuevo elemento <img /> en el que alojaremos la información creada con el elemento <canvas /> con el día incrustado dentro. Simplemente genial.
,
