aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Andrés Nieto

Palma de Mallorca, España

Menú

Buscador

Claves foráneas (foreign keys) con MySQL

30 Ago

aNieto2k hace 5205 días en: Asides, webdev

+ 2

Bibigeek publica un interesante y didáctico tutorial de como conseguir claves foraneas (foreign keys) con MySQL. Edito: Xisco añade un nuevo tutorial con el que conseguir foreign keys desde PHPMyAdmin.

Creando un querySelector() para IE tan rápido como el nativo

29 Ago

aNieto2k hace 5206 días en: General

+ 2

Via Ajaxian descubro una solución para disponer de una versión rápida (casi como la nativa ) de querySelector() en Internet Explorer 4+. Muy similar a la propuesta por Dean Edwards en 2006.

/*@cc_on
 if (!document.querySelector)
 document.querySelector = function(selector) { 

 // Añadimos un nuevo tag <style />
 var head = document.documentElement.firstChild;
 var styleTag = document.createElement("STYLE");
 head.appendChild(styleTag); 

 // Creamos un array global
 document.__qsResult = []; 

 // Añadimos los elementos seleccionados mediante un SECE
 document.__qsResult.styleTag.styleSheet.cssText = selector + "{qs: expression(this.__qs?0:(function(t){document.__qsResult.push(t);t.__qs=0;})(this));}";

 // Recargamos la página. Sin esto el SECE no se ejecutará.
 window.scrollBy(0, 0); 

 // Limpiamos el nuevo elemento y devolvemos los resultados.
 head.removeChild(styleTag);
 return document.__qsResult;
 }
@*/

La mágia del script, que nos permite implementar una versión del Selectors API, reside en los SECE (Single Execution CSS Expressions), pero ¿que son?

Single Execution CSS Expressions (SECEs)

En Internet Explorer (4.0+) tenemos una implementación que únicamente podremos usar en este navegador que nos permite ejecutar expression() en nuestros CSS.

 .post-body img { // Ejemplo Max-width para IE
   max-width:400px;
   width: expression(this.width > 400 ? 400: true);
 }

Ya lo llevamos usando mucho tiempo y lo hemos visto en varios ejemplos a lo largo de los últimos años.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Incluso nos permite cambiar (solo en IE) el color del fondo de un elemento cada hora par (8,10,…)

Pero unas mentes inquietas llegaron a sacarle más partido a esta curiosa implementación, haciendo que la capa de estética interactue directamente con la capa de funcionalidad.

<script>
function setOnetimeBgcolor(elem) {
  elem.style.backgroundColor = <some calculation>;
}
</script>
<style>
P {
  background-color: expression(setOnetimeBgcolor(this));
}
</style>

Esto me hace pensar en algo asi 😀

<style>
/* Enviamos a la versión IE */
html {
 background-color: expression(location.href = 'index_ie_version.html';);
}
</style>

Aunque hará que nuestro CSS no valide según los estándares de la W3C.

Problemas

El propio John Resig contesta al artículo de Ajaxian y expone los problemas que podríamos encontrarnos con este sistema.

Las expresiones CSS de IE son conocidas por su excesiva sobrecarga
No hay una forma clara de abordar la gestión de errores. ¿Que sucede si se usa un selector no soportado?

Browser Shooter, dispara navegadores con Javascript

29 Ago

aNieto2k hace 5206 días en: javascript, Programacion, webdev

+ 3

Browser Shooter es un juego desarrollado con Javascript que nos recuerda al famoso Puzzle Bobble adaptado a la guerra de navegadores web.

(Ver Imagen)

Mediante el uso de jQuery 1.3.2, y una buena cantidad de ficheros JS se controla la física de los rebotes, los movimientos del cañón y todos los efectos de juego. Podéis probarlo directamente aquí.

Internet Explorer 8 disponible en el Windows Server Update Services (WSUS)

29 Ago

aNieto2k hace 5206 días en: Asides

+ 4

Por fin, IEBlog anuncia que Internet Explorer 8 está disponible en el Windows Server Update Services (WSUS), o servicio de actualizaciones de los sistemas operativos Windows. Por el momento, Windows Vista, Windows Server 2003 y 2008 tienen disponibles todos los lenguajes para este navegador. Windows XP salió con una remesa de unos 20 idiomas disponibles (Español incluido) y el día 22 de Septiembre saldrán los restantes (Catalán incluido).

CKEditor, la reencarnación de FCKEditor

29 Ago

aNieto2k hace 5206 días en: Accesibilidad, javascript, Programacion, webdev

+ 33

Hasta el momento uno de los mejores editores WYSIWYG era sin dudas FCKEditor, aunque para mi gusto era un poco pesado pero eso si, muy completo. Ahora, tras 6 años desde tu aparición han decidido cambiarle el nombre y sobretodo la programación, consiguiendo un editor flexible, elegante, accesible y sobre todo Open Source.

(Ver Imagen)

CKEditor, ha sido desarrollado con la capacidad de no depender de ningún framework JS, por lo que podemos hacer uso de él desde cualquier aplicación web, sin preocuparnos del Javascript que tengamos en ella.

Instalación

La instalación es tan sencilla como casi todas las instalaciones de aplicaciones Javascript:

<head>
	...
	<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>

Una vez que incluimos la llamada al fichero JS que contiene el código necesario para convertir nuestro <textarea /> en un bonito editor.

<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>

Una vez definido el contenedor de nuestro editor, tendremos que indicar mediante Javascript que CKEditor haga uso de él.

<script type="text/javascript">
	window.onload = function()
	{
		CKEDITOR.replace( 'editor1' );
	};
</script>

Listo, si has seguido los pasos correctamente, ya deberías tener un bonito editor en lugar del soso <textarea />

Javascript API

Para los desarrolladores inquietos, nos han puesto a nuestra disposición una API en Javascript para extender funcionalidades e interactuar con el editor desde nuestros scripts.

Descargar y Demo

Puedes probarlo directamente desde la página oficial y descargarlo desde aqui.

Mejora la estética de tus Checkboxes con jQuery

27 Ago

aNieto2k hace 5208 días en: CSS, javascript, Programacion, webdev

+ 8

Me encuentro un completo tutorial con el que podremos reemplazar el aspecto de los elementos <input type="checkbox" /> por otro mucho más atractivo.

(Ver Imagen)

Básicamente se trata de un HTML adaptado a la nueva estética, CSS que le dá ese elegante aspecto y unas líneas de jQuery (aunque puede ser cualquier framework, o ninguno de ellos).

HTML

<form>
	<fieldset>
		<label for="choices">
			<ul>
				<li>
					<input name="jqdemo" value="value1" type="checkbox" />
					<p>Here is the first selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value2" type="checkbox" />
					<p>Here is the second selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value3" type="checkbox" />
					<p>Here is the third selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo"value="value4" type="checkbox" />
					<p>Here is the fourth selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
			</ul>
		</label>
		<div style="clear: both;"></div>
		<button type="submit" name="submitbutton" title="Submit the form" />Send it!
	</fieldset>
</form>

Javascript

// jQuery
$(document).ready(function() {
 $(".checklist .checkbox-select").click(
  function(event) {
   event.preventDefault();
   $(this).parent().addClass("selected");
   $(this).parent().find(":checkbox").attr("checked","checked");
  }
 );

 $(".checklist .checkbox-deselect").click(
  function(event) {
   event.preventDefault();
   $(this).parent().removeClass("selected");
   $(this).parent().find(":checkbox").removeAttr("checked");
  }
 );
});

// MooTools
// No lo he podido probar
window.addEvent('domready', function() { 

 $$(".checklist .checkbox-select").addEvent('click', function(event){
   event.preventDefault();
   this.getParent().addClass("selected");
   this.getParent().getElements(":checkbox").each(function(el){
    el.attr("checked","checked");
   });
  }
 );

 $$(".checklist .checkbox-deselect").addEvent('click', function(event){
   event.preventDefault();
   this.getParent().removeClass("selected");
   this.getParent().getElements(":checkbox").each(function(el){
    el.removeAttr("checked");
   });
 });
});

El CSS y los Sprites los teneis en esta página. Si quereis verlo funcionando podeis verlo directamente desde aquí.

Firefox 3.6, nuevas mejoras CSS y de velocidad

23 Ago

aNieto2k hace 5212 días en: estandares, web, webdev

+ 14

Arstechnica publica un artículo sobre la nueva versión de Firefox 3.6, concretamente la versión 3.6 Alpha 1, en la que nos encontramos nuevas mejoras CSS y unas mejoras en el rendimiento y la velocidad general.

Namoroka, nombre en clave del proyecto para esta nueva versión de Firefox y que como prioridad tiene la mejora de rendimiento del navegador sin olvidarse de seguir añadiendo nuevas mejoras y nuevas implementaciones de estándares que veremos en 2010.

Mejoras de rendimientos Javascript

Aunque aún es muy pronto para sacar conclusiones ya hay información sobre la mejora de un 15% en comparación con Firefox 3.5 en el motor Javascript TraceMonkey. Aunque no es suficiente para igualarse a Google Chrome es una buena noticia para los usuarios de Firefox.

Nuevas funcionalidades CSS

Por otro lado, se han añadido una gran cantidad de mejoras CSS entre las que nos encontramos una nueva funcionalidad que nos permite generar degradados lineares, y radiales, mediante el uso de la propiedad background del CSS. Una propuesta inicial de Webkit que este navegador ya soporta.

// linear
background-image: -moz-linear-gradient(left, right,
 from(red),
 color-stop(16%, orange),
 color-stop(32%, yellow),
 color-stop(48%, green),
 color-stop(64%, blue),
 color-stop(80%, indigo),
 to(violet));

// radial
background: -moz-radial-gradient(45px 45px, 15px, 55px 55px, 40px,
 from(aqua), to(rgba(0, 0, 255, 0)),
 color-stop(0.95, blue))
 no-repeat;

Compatibilidad

Para los demás navegadores, tenemos alternativas con las que montar estos degradados.

Internet Explorer 5.0+:filter: progid:DXImageTransform.Microsoft.Gradient()
Safari: -webkit-gradient(linear,…) | -webkit-gradient(radial,…)
Opera: (aún no hay nada)

11 consejos para proteger el panel de administración de tu WordPress

23 Ago

aNieto2k hace 5212 días en: Asides, hacks, plugins, Wordpress

+ 2

Hace unos días, en IncubaWeb hicieron una traducción de un artículo de WP-Beginner en el que nos muestran una serie de consejos para añadir un poco más de seguridad a nuestro WordPress. Son consejos muy sencillos que cualquiera puede implementar y disfrutar.

5 formas de usar Ajax con jQuery

18 Ago

aNieto2k hace 5217 días en: javascript, Programacion, webdev

+ 14

La gente de Nettuts publica un interesante artículo de como usar Ajax con jQuery. Concretamente las 5 formas con las que jQuery nos permite enviar peticiones asíncronas.

$.load()
$.get()
$.post()
$.getJSON()
$.getScript()

$.load()

Se trata de la función que más me gusta de jQuery ya que hace que una de las tareas más comunes de desarrollar con Ajax sea tan sencillo y claro como veremos en el ejemplo:

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Este ejemplo, traído de la página de documentación de jQuery, se encarga de lanzar una petición a la URL /Main_Page (usa URL Rewrite) y del HTML de respuesta cogemos los elementos #jq-p-Getting-Started li y lo insertamos dentro de #links.

Simplemente genial, cómodo y rápido.

$.get()

Se trata del función sencilla con la que podemos lanzar peticiones GET al servidor mediante Ajax.

$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

Mediante el paso de 3 opciones, de las cuales 2 son opciones ( condicionales mejor dicho) puedes lanzar la petición al fichero (1º) con los parámetros (2º) y tratar la respuesta mediante un callback (3º).

$.post()

Al igual que la anterior, esta función permite enviar peticiones POST mediante ajax.

$.post("test.php", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

Igual de fácil que en el caso anterior.

$.getJSON()

Aunque los anteriores tienen la posibilidad de especificar el tipo de retorno, la opción más cómoda es la de usar este método que permite obtener la respuesta JSON evaludada en la función callback.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

Teniendo en cuenta el navegador, se usará el objeto JSON nativo o se usará el sistema basado en eval().

$.getScript()

Aunque técnicamente no es una petición Ajax, se trata de una petición al servidor y por eso tiene cabida en el post.

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

Con este método podemos cargar asíncronamente un fichero Javascript y mediante el parámetro (2) callback podemos ejecutar código Javascript usando el que está en el fichero js que queremos cargar (1).

Domina los selectores CSS avanzados

17 Ago

aNieto2k hace 5218 días en: Asides, CSS, estandares, Programacion, web, webdev

+ 2

La gente de SmashingMagazine ha publicado un artículo en el que nos muestra las claves para dominar los sectores CSS. Partiendo desde la especificidad CSS hasta los nuevos selectores de CSS3, pasando por las pseudo-clases del lenguaje.Una buena recopilación de ideas generales que los que están empezando sus andanzas cos CSS podrán disfrutar.

↑ ← Anterior

aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Menú

Buscador

Felicidades

Contenido

Claves foráneas (foreign keys) con MySQL

Creando un querySelector() para IE tan rápido como el nativo

Single Execution CSS Expressions (SECEs)

Problemas

Browser Shooter, dispara navegadores con Javascript

Internet Explorer 8 disponible en el Windows Server Update Services (WSUS)

CKEditor, la reencarnación de FCKEditor

Instalación

Javascript API

Descargar y Demo

Mejora la estética de tus Checkboxes con jQuery

HTML

Javascript

Firefox 3.6, nuevas mejoras CSS y de velocidad

Mejoras de rendimientos Javascript

Nuevas funcionalidades CSS

Compatibilidad

11 consejos para proteger el panel de administración de tu WordPress

5 formas de usar Ajax con jQuery

$.load()

$.get()

$.post()

$.getJSON()

$.getScript()

Domina los selectores CSS avanzados

Información

Mi Flickr

Proyectos

Comentarios

Posts más relevantes

Créditos