Buayacorp

¿Qué es HTML5 y por qué debería importarme?

braulio — Thu, 10 Jun 2010 15:11:22 +0000

Excelente infografía que nos dice qué es HTML5 y porque nos debería importar. En inglés

Apple nos muestra HTML5 y los web standards, pero sin respetar los standards.

braulio — Sat, 05 Jun 2010 17:37:39 +0000

El día de ayer Apple nos presentó HTML5 and the web standards, un lugar donde podemos ver ejemplos de lo que se puede hacer combinando HTML5, CSS3 y Javascript. Como introducción nos dicen:

...Éstos web standards son abiertos, confiables, altamente seguros y eficientes. Permiten a los diseñadores y desarrolladores crear gráficos avanzados, tipografía, animación y transiciones. Los standards no son add-ons en la web. Son la web. Y puedes empezar a usarlos ahora mismo.

Entre los ejemplos que ofrecen está la capacidad de insertar video, tipografía, transiciones, audio, etc.

Obviamente se nota muy inspiradora la cita, sin embargo notamos que al querer entrar a ver los ejemplos obtenemos una gran advertencia:

Si quieres tener una experiencia con este demo, simplemente ¡bájate el Safari!. Se supone que si es una demostración de web standards, pues debería poder ingresar tranquílamente con cualquier navegador moderno.

Con este tipo de actitudes Apple cada vez se está conviertiéndose en el Microsoft de hace unos años, obligándonos en cierta forma a usar software que no queremos o a comprar productos (sino fíjense los lindas fotos del iPhone, iPad y demás íes) que no necesitamos.

Veamos que reacciones tendremos en estos días.

amelie() un “diabólico” script para deshacerse de IE6

braulio — Fri, 04 Jun 2010 19:55:43 +0000

Internet Explorer 6 ya nos tiene locos a todos, personalmente hay veces que tengo que hacer doble trabajo para que algo se vea en todos los navegadores e IE6.

Ahora que la misma gente de Microsoft está planeando destruir Internet Explorer 6, hay algunos otros que están ayudando en esta labor o al menos intentándolo.

Aprovechando el filtro MotionBlur que funciona en IE6 y usando este script se logra una extraña experiencia al navegar con IE6:

JAVASCRIPT:

 
if(document.all && !window.XMLHttpRequest){
var x = 1,when=0,str,dir,fil;
function amelie(){
  if(x == 2){ x = 0; }
  if(x == 0){
    str = 0; dir = 0;
    when = Math.floor( Math.random() * 10000 ) + 2000;
    setTimeout( 'amelie()', when );
  } else {
    str = Math.floor( Math.random() * 2 ) + 2;
    dir = Math.floor( Math.random() * 360 );
    setTimeout( 'amelie()', 500 );
  }
  var fil = "progid:DXImageTransform.Microsoft.MotionBlur(strength="+ 
            str + ",direction=" + dir + ",enabled='true')";
  document.body.style.filter = fil;
  x++;
}
setTimeout('amelie()',1000);
}

Podemos ver el funcionamiento en el siguiente video:

Según el autor del script, el diabólico plan que se tiene es:

Usar amelie() en nuestros sitios.
Fingir confusión y negar cualquier problema cuando las personas empiezen a quejarse y decir que nuestro código es correcto.
Consultar a los expertos acerca de la “fatiga de software”. Este falso concepto debe indicar que el software, como cualquier otra máquina, se deteriora con el tiempo y empieza a comportarse de manera extraña (generalmente todos se creen esto).
Correr el rumor de que la “fatiga de software” de IE6 no funciona bien con las tarjetas de video y que esto podría ser la razón del error.
Consultar a otros expertos y vincular los dolores de cabeza generados por el trabajo de oficina con la mala visión.
Por lo tanto, culpamos a IE6 de los problemas de salud y seguridad de las empresas logrando que todas las empresas actúen inmediatamente.

Enlaces

The Amelie approach to the IE6 problem.

Vía Ajaxian

Reiniciar auto_increment cada año en MySQL

braulio — Fri, 28 May 2010 12:14:51 +0000

Alguna vez vamos a necesitar reiniciar el contador del auto_increment cada año. Por ejemplo si tenemos una tabla recibos quisieramos que el número de recibo empieze desde 1 el año siguiente.

Para esto hay un pequeño artificio en MySQL que nos puede ayudar:

SQL:

 
CREATE TABLE `recibos` (
  `anio` year(4) NOT NULL,
  `ID` int(5) NOT NULL AUTO_INCREMENT,
  PRIMARY KEY  (`anio`,`ID`)
) ENGINE=MyISAM;

El truco está en que el campo primario debe ser la composición de dos campos; donde la columna con AUTO_INCREMENT es la segunda columna del índice.

SQL:

 
/* Ingresamos datos */
INSERT INTO `recibos` (`anio`) VALUES ('2010'), ('2010'), ('2010'), ('2011'), ('2011');
 
/* Mostramos los datos */
SELECT * FROM `recibos`;

El resultado sería:

CODE:

 
+------+----+
| anio | ID |
+------+----+
| 2010 |  1 |
| 2010 |  2 |
| 2010 |  3 |
| 2011 |  1 |
| 2011 |  2 |
+------+----+

La limitación es que este tipo artificio sólo funciona en tablas del tipo MyISAM.

Un tema de Wordpress 3D con CSS 3

braulio — Sun, 23 May 2010 19:22:58 +0000

No muy práctico, pero funciona. Un tema de Wordpress en 3D con CSS3.

30 años de Pacman con Google

braulio — Fri, 21 May 2010 21:34:56 +0000

¿Quién no ha jugado Pacman? Si quieres recordar Google te ayuda –> Insert Coin .

Usando Google Font Api y Google Font Directory

braulio — Fri, 21 May 2010 14:17:56 +0000

Google acaba de anunciar la creación de un directorio de Fuentes Open Source que se pueden utilizar en nuestros sitios mediante una API.

Bajo el lema “Haciendo hermosa la web” podemos por ahora usar una lista de 18 fuentes con sus respectivas variantes.

¿Cómo usarlo?

El ejemplo que nos dejan es muy sencillo. Primero agregamos esta línea entre las etiquetas :

HTML:

  rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" />

Y luego para que se vea en nuestra página agregamos el siguiente código CSS:

CSS:

		body {
			font-family: 'Josefin Sans Std Light', arial, serif;
			font-size: 48px;
		}

Donde el valor del parámetro family en el atributo href es la fuente que queremos usar. En el ejemplo escogí la fuente Josefin+Sans+Std+Light ya que es la fuente más parecida al logo de Buayacorp .

El resultado con alguito de color:

Y añadiendo alguito de código:

CSS:

		body {
			font-family: 'Josefin Sans Std Light', arial, serif;
			font-size: 48px;
			text-shadow: 2px 2px 4px #aaa;
			letter-spacing: -5px;
			background: #4b4b4b;
		}

Ver el ejemplo >

¿Cómo funciona?

Básicamente lo que hace es usar la regla @font-face de CSS3. Revisando un poco el código veremos que estas fuentes funcionarán sólamente en en modo “screen” y no en impresión.

CSS:

@media screen {
@font-face {
  font-family: 'Josefin Sans Std Light';
  font-style: normal;
  font-weight: normal;
  src: local('Josefin Sans Std Light'), url('http://themes.googleusercontent.com/font?kit=doRWK9Qks0OQGenH-kW8nsnX9wMe89zs2uzox0MWMfk') format('truetype');
}
}

Vemos que tampoco funcionarán en navegadores antiguos.

Esperemos que con este tipo de ayudas, no se cometa el error del pasado de abusar como se hacía con la etiqueta .

Es cierto que se podría lograr maravillas usando esta regla, sin embargo no se debe abusar de su uso.

Enlaces

Ejemplos y Demos de HTML5

braulio — Thu, 20 May 2010 22:35:50 +0000

Si quieres saber más sobre HTML5, te presentamos un interesante sitio en el que nos muestran ejemplos y demostraciones de esta nueva versión de HTML

Ejemplos y Demos de HTML5 tiene los ejemplos básicos del uso de HTML5 y los soportes de los navegadores más conocidos. Entre ellos Internet Explorer, Mozilla Firefox, Safari, Opera y Google Chrome.

Sólo como ejemplo muestro un bloque del cual podemos editar el texto, mostrado en ContentEditable:

HTML:

 
id="editable" contenteditable="true">
  ¡Este texto se puede editar!
  ¿Por qué no lo intentas? Un párrafo cualquiera
  
    el primer ítem
    el segundo
    y el tercero
  
</section>

Al añadir el atributo contenteditable="true" hacemos que ese bloque se pueda editar, como si estaríamos usando TinyMCE o FCKEditor. El código anterior funciona en todos los navegadores modernos.

Puedes ver el demo.

Reconozco que es el primer ejemplo de HTML5 que hago en mi vida, así que si me sirvió también te puede servir a tí .

Enlaces

HTML5 Demos and Examples

Plugins de Desarrollo Web para Varios Navegadores

braulio — Wed, 28 Apr 2010 18:11:13 +0000

Una interesante lista de plugins para desarrollo web en los principales navegadores.

Web Developer Toolbar para Chrome

braulio — Wed, 24 Mar 2010 04:58:05 +0000

Para los webmasters, acaba de salir la versión para Google Chrome de la poderosa herramienta Web Developer de Chris Pederick.