Archivo de la categoría: Javascript

“Pa que cojan tarea” los de Internet Explorer (o que tan malo es IE)

The Web Standards Project_1253692000779

Los estándares de la Web (y más web 2.0)

En la página de Web Standards encontrarán todo lo que quieran saber sobre lo que se considera “estandarizado” en la web; por parte de:

  • Navegación
  • Formatos soportados
  • Accesibilidad y soporte a páginas para usuarios con discapacidades
  • Reporte de Errores, fallas, vulnerabilidades
  • Soporte a multimedios y medios “estándares”
  • Lenguajes embebidos estándares

Y una serie adicional de cosas.-

Algo muy ACIDO de soportar …

ACID3 es una serie de pruebas que “general y frecuentemente” se le aplican a todos los navegadores web (incluyendo móviles, etc) para determinar su “nivel de soporte, estandarízación y compatibilidad” con estándares como:

  • Modelo DOM
  • HTML 4, XHTML 1.1 y HTML 5
  • ECMASCRIPT
  • Soporte a Embebidos (Flash, video, media, etc)
  • Soporte a todo tipo de selectores DOM via javascript
  • Gestión de mensajes HTTP
  • Renderizado del CSS
  • Otros formatos (SVG, RSS, Atom, etc)

La escala es del 1 al 100; un navegador 100/100 fue diseñado cumpliendo de antemano todos los estándares, algunos se desvían más que otros; pero, Y ¿Donde quedará Microsoft Internet Explorer en todo esto?

Home - Browserscope_1253691848402

Pues más aplazados y hasta sin derecho a reparación con un lindo 20% del score total. ¿seguirás usandolo?

Algunos dirán … ¿es que mi MS Internet Explorer versión XZ no pasa los tests e igualito yo navego?, ¿como es eso? …

Primeramente entendamos el proceso de ACID; verán como a Safari, Opera, Google Chrome y Firefox (los más compatibles entre sí y con los web standards de la w3c) poseen más “tests aplicados” que Internet Explorer; claro!, en su versión 3.5 Firefox “pregona” soportar 2097 “características probables” (entre ellas, SVG, CCS 3, HTML 5, XFORMS, Offline Storage, etc) y por ende se le aplican “más tests” y aún así logra pasar el 93% de lo que dice (hay un 7% de cosas que dice hacer, pero no las hace, o tal vez las haga via “extensiones”); En el caso de MS Explorer, está “tan atrás” (“como las bolas del gato” diría mi hermano) que solamente soporta un pequeño “subset” de características compatibles, pero aun de ese “pequeño set de cosas”; solamente funciona “como debería” el 20% de ellas; lo cual lo deja en los actuales momentos como “el peor navegador en la historia” para “disfrutar” de la navegación web …

Pero insisto … mi página se ve bien!, ¿no?

Claro, en ese caso ocurren dos cosas comunes; uno de los tests ACID comprende el “renderizado”; esto es, el proceso de interpretar el HTML + CSS + Javascript para poder “hacer funcionar la página web”; entre las cosas que IE no soporta están el paralelismo en la carga (FF soporta hasta 6 scripts compilados en paralelo y hasta 32 procesos de ejecución para renderizar una página) lo cual hará que tu página “se vea en IE” pero 6 veces más lento que el Firefox u Opera o Google Chrome.

La segunda cosa que ocurre es que la gente tiende a realizar “hacks” en su código CSS, HTML y Javascript para poder “funcionar dentro de Internet Explorer” (ya que aun mucha gente inconciente lo usa), lo cual ralentiza el proceso de diseño e implementación de la página web, con lo cual tu página cargará, pero a un costo de programación y un “overheat” de recursos mayor …

pero los tiempos cambian …

Y alguien dijo “No más!” …

Google Wave es una iniciativa de alta prioridad de la gente de Google para desarrollar una “aplicacion 2.0 + un protocolo de comunicación”; que gracias a las facilidades de HTML5, Xforms, offline Storage y una serie de nuevas tecnologías soportadas “unicamente por los navegadores de gente grande” (Opera, Safari, Google Chrome y Firefox) le permitirán al usuario tener toda una real experiencia integrando servicios, comunicaciones, redes sociales y además alrededor de una única e integrada interfaz.

Hace ya 5 años el diseñador de Google Maps, Lars Rassmusen (y actual líder de Google Wave) había logrado implementar Google Maps en Internet Explorer con algunos “simples hacks”; ahora la cosa no está fácil, Google Wave es “tan complejo”, que luego de miles de horas/hombre perdidas programando “hacks para Internet Explorer”; a la gente de Google les quedó más fácil plantarle la cara de frente a Microsoft y decir “no más!” (solo un grande como Google puede hacerle frente a los de Microsoft), no diseñaremos más aplicaciones para su “obsoleto y carente de sentido” Navegador; ahora, cada vez que un usuario de Internet Explorer accede a un proyecto nuevo de Google (como Wave), verán la siguiente pantalla:

Que los “invita” a instalar otros navegadores “más compatibles” o en su defecto, instalar “Google Frame” que es una “extensión” para MS Internet Explorer que simplemente “transformará” el navegador en un Google Chrome; ¿simpáticos los de Google no? …

Si aún quieres (y a pesar de los bajos score de ACID3, el pobre o casi pésimo performance en páginas web como Facebook, Tumblr, Google Maps, Google Apps, Gmail, la nula extensibilidad y en general lo horrible que es navegar ahí) seguir usando Internet Explorer, pues como dice Google “Adelante, pero vete lejos, aquí ya no verás nada” …

Jquery UI: usando draggables y droppables

En algún momento te haz preguntado; ¿Como obtengo el objeto, que estoy arrastrando con el ratón usando jquery.ui?; la pregunta es facil de responder y trataremos de explicar algunas cosas sobre draggables y dropables para entender mejor.

El concepto para comenzar a utilizar ui.draggables y ui.droppables es sencillo; simplemente creen un par de DIV (de ejemplo); cada uno con un nombre distinto (pueden, opcionalmente, agregarle el classname “draggable” o “droppable” para llegarle por selectores CSS como siempre se puede en jquery) y posicionenlos en cualquier area separada de pantalla (sea usando position: absolute o porque los han colocado dentro de tablas o celdas separadas).

Ahora viene la magia! detrás de jquery: para arrastrar simplemente declaren al DIV1 draggable:

$(“#dragged”).draggable();

Opcionalmente, pueden decirle al objeto draggable que genere un “clon”; esto es, que cuando se inicia el arrastre del objeto; no se arrastra al DIV1, sino a un “clon” del DIV1.

$(“#dragged”).draggable({
helper: ‘clone’
});

Posteriormente viene la declaración del DIV2, en este caso un contenedor de objetos “arrastrados” (droppable); igual que el anterior, podemos indicar que es droppable:

$(“#dropped”).droppable();

Claro, en este caso podemos contar con ciertas opciones para restringir o personalizar nuestro “droppable”:

accept: “.draggable”, : nos permite indicar que tipo de objeto (referencia a un id o selector) aceptará este droppable

activeClass: ‘droppable-active’, :cuando el droppable tenga dentro de si un “draggable”, cambiará su CSS a este estilo

hoverClass: ‘droppable-hover’, : cuando pasamos por encima (mouseover) el objeto draggable, esta será el estilo CSS aplicado

tolerance: ‘fit’ :tipo de tolerancia con los draggables, puede ser “fit”, si caen completo dentro del droppable, “intersect”, si los bordes del droppable y el draggable se intersectan.

Además, droppable posee una serie de “eventos” que pueden ser funciones callback que ocurren cuando un draggable los libera.

ejemplos:

drop: function(ev, ui) { //ocurre cuando el draggable cae dentro del droppable
},

activate: function(ev, ui) { //ocurre cuando el draggable se activa (comienza a ser arrastrado)
},

deactivate: function(ev, ui) { //ocurre cuando el draggable deja de ser arrastrado
},

como todo evento de droppable, posee 1 referencia implicita y dos parámetros; la referencia implicita es al objeto “this”; que se refiere al objeto droppable;

$(this).append(“”);

o sin necesidad de jquery: var iddrop = this.id;

y ev, que se refiere al gestor de eventos (al DOM Event de la página actual).

con EV podemos obtener ejemplo, las coordenadas de donde ha estado el draggable:

ev.ClientX / evClientY

ahora, quien es ui?, con ese nombre tan críptico, uno no sabe lo que es.

Pues bueno, siguiendo la regla de John Resig (primeras opciones, parámetros, segundas, propiedades, ultimas, callbacks); ese ui debe ser un objeto o una propiedad de droppable; en este caso, UI retorna una referencia al objeto arrastrado (es decir al draggable).

ej.

var id = ui.draggable.element.id;

o

$(ui.draggable.element).

Con lo cual podemos extraer toda la información que necesitemos del elemento que fue arrastrado.

El bloque de código que usé para pruebas fue el siguiente:


$(document).ready(function(){
$("#dragged").draggable({
helper: 'clone'
});
$("#dropped").droppable({
accept: ".draggable",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
//alert(ev.clientX);
$(this).append("<br>Dropped!");
},
deactivate: function(ev, ui) {
alert(ui.draggable.element.id);
$(this).append($(document.createElement('div')).text('deactivate'));
},
tolerance: 'fit'
});
});

Hijas del mismo padre? (o una crítica a las páginas del gobierno)

Alguien conoce algún bug de ASP que cause que la fecha se vea asi -> 30 de Enero de 107
Pensé que el caso del SENIAT era algo aislado, pero una gran cantidad de páginas web del estado poseen ese mismo "característico" error; o es un fallo común en ASP (que yo programando en ASP nunca lo tuve) o todas han sido creadas con el mismo CMS? …
Ya he visto varias (INE, vicepresidencia, minCI, etc) …

Todavia sigo intrigado como en algunos organismos (como PDVSA), te exigen trabajar con SL puro y plano (incluso como comenté a walter, no podemos usar postfix porque no es completamente GPL), pero la gran mayoria de los organismos públicos aun siguen en tecnologías propietarias como ASP, cuando de plano es el ejecutivo y no PDVSA, el que deberia velar más por el cumplimiento del decreto 3390…

Otra pregunta, por que sigue la página de nuestro presidente caida? … diganle si alguien lo conoce, que si quiere se la hago, sin costo, a mi, particularmente, me da una profunda PENA!, que el presidente que decretó el 3390, no solo no tenga una página digna, sino que NO TIENE PAGINA! …
http://www.venezuela.gob.ve/

Bueno, al menos gobiernoenlinea está en linux … pero y que hay de la vicepresidencia?
toolbar.netcraft.com/site_report
y el Ministerio de comunicación e Información?, alguien me puede explicar esto?:

CANTV Servicios, Venezuela Caracas 200.109.242.154 Linux Microsoft-IIS/6.0 29-Sep-2006

Como se puede correr linux con IIS 6.0? y además tener contenido con ASP? … que? … usando mod_asp acaso?

Tambien hay páginas como las del FONACIT, hecha en ASP con frontpage 3; DIOS!, quiero estrecharle la mano al valiente que hizo eso! …

En fin, yo de que me preocupo?, si hasta la pagina de la ley resorte y la de conatel están en ASP?, parece que en vez de disminuir, aumentan la cantidad de organismos que apuestan por el software propietario antes de aceptar el 3390.

Por cierto, me acuerdo cuando la página del despacho de la presidencia de la república tenia ciertas caracteristicas ajax (no refrescamiento); pero extrañamente sin usar el objeto xmlhttprequest … intrigado me dispuse a revisar … y pam …
codigo VB del lado del cliente para conectarse a la DB de la presidencia! … DIOS!, que genios!
algo del codigo:

	   set rsFilter = createobject("adodb.recordset")

rsFilter.Fields.Append "record_key",adInteger,4,adFldIsNullable
rsFilter.Fields.Append "id_noticia_web",adInteger,4,adFldIsNullable
rsFilter.Fields.Append "id_foto_det_web",adInteger,4,adFldIsNullable
rsFilter.Fields.Append "titulo_noticia",advarchar,500, adFldIsNullable
rsFilter.Fields.Append "resumen_noticia",advarchar,5000, adFldIsNullable
rsFilter.Fields.Append "desc_noticia",advarchar,8000, adFldIsNullable
rsFilter.Fields.Append "fec_noticia",advarchar,15, adFldIsNullable


rsFilter.Open
rsFilter.AddNew


rsFilter.Update

Es completamente EVIDENTE!, la página del presidente no está caida, simplemente que esta página solo corre en Internet Explorer …

Uff, que contento debe estar Bill Gates con este schema DTD en la parte superior de la pagina de la armada venezolana:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40"&gt;

JaJaJa … las comunidades Linux, que vamos a hacer al respecto?? …

Por cierto, alguien sabe que le paso a la página de los circulos bolivarianos?, eso es innavegable en cualquier navegador, da error de encoding en casi todos los navegadores, los menus no sirven en firefox ni en opera y en ie es bastante buggy …

jugando con javascript

bueno, tenia tiempo sin escribir tanto javascript desde la época en que perl estaba en pañales y las paginas web dinámicas eran cosa de hacer truquitos interesantes con el javascript; pasados los años y con AJAX por delante, podemos volver a esos “jueguitos” pues el ancho de banda y el consumo de recursos lo permite; en este caso, una modificación sustancial a una clase javascript que permite drag n’ drop y un poco de estilo CSS me permitieron crear una clase javascript (orientada a objetos) que me permite implementar el arrastre y colocar de una forma facil y rapida, un ejemplo aqui:
http://www.ajaxvenezuela.com/splib/js/window/window.htm
La ventana es un simple div, con algo de estilo CSS y una sombra leve de fondo, para lograr que la capa fuera arrastrable simplemente ejecuto el siguiente codigo javascript:
var drag = dragme(“handler1″, “window1″);
El primero es el ID del div que servira de handler (es decir, de control, en este caso, la ventana solo puede ser arrastrada por la barra de titulo, no por el cuerpo); el segundo es el ID del “cuerpo” de la ventana …
si queremos mover un objeto unico (como una imagen, que esta estatica) simplemente declaramos:
var drag1 = dragme(“imgsrc”);
fijense que la ventana está confinada al area de la pantalla y no se sale de los bordes (algo practico en sistemas basados en ventanas o dialogos) y el contenido (declarado por el ID window_content) puede ser cualquier cosa, incluso una estructura DOM completa que llegue via AJAX o un IFRAME con un target especifico.
si quieren la libreria pueden bajarla de:
http://www.ajaxvenezuela.com/splib/js/drag_drop.js, requiere ademas el archivo http://www.ajaxvenezuela.com/splib/js/fade.js (para hacer la transparencia que vemos si hacen click sobre ella) y http://www.ajaxvenezuela.com/splib/js/api.js; que son una serie de funciones utiles (como un get DOM object cross-browser) entre otras.
Como todo GPL, espero mantengas mis créditos y si consigues algun bug interesante hazmelo saber (no, aun no tengo un CVS para mis funciones javascript).

Y NO!!… no funciona en Internet Explorer y ni me preocupo porq no funcione, simplemente es una opcion de usar document.all en vez del  estandar dom getElementByID y de usar AttachEvent en vez de usar el estandar w3c AddEventListener, pero bueno, no tengo un equipo con windows en mi casa asi que ni me preocupo por si corre o no en Internet Explorer (espero algun interesado en hacerlo funcionar en IE lo haga y podemos compartir los cambios).

Ha sido probado en Camino (si, tengo un equipo con Tiger truqueado), Mozilla, epiphany, konqueror, opera y firefox 1.5 y 2, con excelentes resultados (aunque un fallo en opera no me permite hacer drag n’ drop de imagenes con position static, pero ya corregiré eso).
Otra clase interesante es fade, fade tiene 2 efectos, transparencia y degradado de color, en:
http://www.ajaxvenezuela.com/splib/prueba.htm
como en el caso anterior la programacion orientada a objetos permite una facil implementacion:
var f = new fade();
f.fade_element(‘p3′);
f.fade_element(‘p1′, ‘#FF0000′); //si quieres cambiar el color predeterminado de inicio
f.intermiddle = false; //desactivo el color intermedio
f.fade_element(‘cuerpo’, ‘#808080′);

en todo caso, se puede cambiar incluso el destino final del color y el color de segunda trancision.

para el caso de las transparencias contamos con 2 funciones:
set_opacity(‘fadein’, 30);
que cambia la opacidad de un elemento cualquiera, ha sido probado en todos (excepto como ya dije en el mal mentado browser) y funciona bastante bien.

tambien hay una funcion llamada:
f.fadein_element(‘fadein’);

que me permite realizar una transicion de transparente a opaco en una cantidad de tiempo (tambien configurable)
f.duration = 2000; //en milisegundos

Como ven; hay muchas cosas que pueden hacer con javascript actualmente (y que pueden usar de una manera facil) sin tener que recurrir a  Flash o a efectos privativos (como los filter de Internet Explorer) dandonos la posibilidad (sin incurrir en excesos de peso) de contar con una aplicación web más vistosa, animada y la la vez útil y ligera.

Espero disfruten las funciones, traeré más después  …

Recompilando PHP y usando JSON

Hace 2 dias recompilé PHP para activar un par de extensiones, entre ellas la tidy html (para limpieza de código html) y la JSON (javascript Serialize Object Notation) para intercambiar (mas que todo objetos) entre el cliente web y el servidor; sin embargo, para mi sorpresa hoy (mejor dicho, ayer a mediados de la tarde) han liberado PHP 5.2.0, que trae a tidy y a json incluidos *by default* con lo cual decidí hacer un upgrade a mi estación de trabajo (este servidor seguirá el ejemplo que el portatil dió en un par de días luego de las pruebas de rigor).

Lo que puedo asegurar luego de las pruebas es que tanto la ampliación de javascript para JSON como la extensión de PHP para JSON son la mar de sencillas de utilizar; en el primer caso con simplemente hacer var sjson = oExample.toJSONString(); entonces contamos con que cualquier string, objeto u array será convertido a la notación JSON:
ej javascript:

var oExample = new Object();
oExample.id = 10;
oExample.className = 20;
oExample.position = 30;
oExample.value = “Jesus”;
oExample.newValue = “Lara”;

es llevado a la forma:
{“id”:10,”className”:20,”position”:30,”value”:”Jesus”,”newValue”:”Lara”}

La cual puede ser enviada facilmente a través de AJAX usando POST.
Del lado del servidor, podemos contar con algo parecido y es que podemos tomar los datos recibidos y con $obj = json_decode($json); obtendremos un objeto con todas las mismas propiedades del objeto javascript, es decir $obj->value o $obj->className.

Pero eso no queda allí, si tomamos cualquier clase y creamos un objeto:

ej php:
class objeto {
public $id = 10;
public $className = 20;
public $position = 30;
public $value = ‘Jesus';
public $newValue = ‘Lara';
}
$obj = new objeto();

podemos entonces con $strjson = json_encode($obj); obtener la misma version serializada pero ahora para javascript de un objeto PHP, podemos serializar casi cualquier cosa, exceptuando recursos (como datastreams o conexiones a bases de datos), haciendolo mucho más flexible y potente que las soluciones ajax basadas en XML.

Por cierto, el unico punto en contra a JSON es que no es tan “Human readable” como XML, pero al final de cuentas, tanto JSON como XML son strings para alimentar aplicaciones AJAX y no van a ser vistos por ojos humanos, asi que que importa si el string de JSON es mas complejo (aunque mas compacto) que el XML si nunca lo vamos a ver de frente? …

por cierto, y para terminar, el objeto php serializado que hemos recibido lo podemos devolver a una forma javascript con la siguiente linea de codigo:

var oExample = a.parseJSON();
document.getElementById(“resultado”).innerHTML = oExample.value+’ ‘+oExample.newValue;

Con lo cual como observan, contamos con la flexibilidad de enviar objetos sumamente complejos y grandes cantidades de datos en un solo y unico string sin tener que estar haciendo parsing de una estructura xml (que de por si es bastante engorroso andar pensando en childNodes y getElementsByTagName cuando podemos tener todo en un objeto, DOM queda para otras situaciones).

Les contaré de mis progresos por esta via …

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 3.034 seguidores

%d personas les gusta esto: