Consultoria y Formacion Adobe

-
Para todos aquellos que tuvieron problemas al intentar recargar la pagina al cerrar las ventanas generadas por estos pluggins de jQuery acá les dejo unos metodos que les podrian resultar útiles:

Para colorbox:

Código :

$(document).ready(function() {
   $().bind('cbox_closed',function() { 
      location.reload(true);
   });
}

Para nyroModal

Código :

//Esto recargará la pagina cada vez que se cierra cada nyroModal
$(function() {
  $.nyroModalSettings({
    endRemove: function() {
      window.location.reload();
    }
  });
});

//para permitir que solo algunas ventnas tengan este comportamiento
//realizamos lo siguiente:
$(function() {
  $('.myNyroModal').nyroModal({
    endRemove: function() {
      window.location.reload();
    }
  });
});
//En este caso cada ventana con atributo class="myNyroModal" recargará
//la pagina en cuestion

Espero les sirva, a mi me costó mucho tiempo dar con la solucion pero al fin la encontre y la queria compartir con ustedes.
Saludos a todos

Desde que el iPad fue anunciado, sin Flash, mucha gente ha estado especulando su caída. Se suma el experimento de Youtube con HTML 5 y el tag <video>. Tal fue el hype generado por la supuesta muerte, que dedicamos un capítulo de MejorandoLaWeb al tema.

El mundo de Flash está cambiando. La computación está cambiando. La web está cambiando. Pero Flash no morirá y si Adobe toma las decisiones correctas, incluso puede convertirse en el líder de campos que no esperamos. Este año será decidido todo.

Flash, HTML 5, Javascript y el video

HTML 5 tiene cosas impresionantes. Drag and Drop de archivos al navegador, animaciones vectoriales en SVG, un tag para embeber video, otro tag para audio, acceso a disco y geolocalización por múltiples métodos (GPS, IP, manual, etc). Esto ha dado pie a que muchos digan que "Flash es innecesario".

Molly Holzschlag es una de las personas que más sabe de estándares en el mundo y compiló una lista de capacidades de HTML 5 y los navegadores que las implementan. No es mala la implementación, pero usarla en producción es triste.

El video es un problema "emocional". Algunos quieren OGG como formato, otros H.264 y otros algo completamente diferente. Ahora mismo, el tag <video> tiene la misma versatilidad de las epocas del Real Player.

Cosas que hace Flash que no puede hacer HTML5 o JS ni hay planes para que pueda

• Streaming: UStream, Tinychat, Livestream, incluso Youtube live, inviables con "estándares".
• Animación vectorial compleja: SVG? CSS3? Jajajaja. Si tu crees que hacer animaciones con esas tecnologías es más fácil, igual que Flash y gasta menos CPU, no has comparado a nivel técnico. La realidad es que actualmente, sólo Flash lo permite como debe ser. El resto de animaciones en SVG, CSS3 o JS gastan demasiada CPU y no hay un software del nivel de Flash para crearlas.
• Edición y manipulación de audio: AS3 es capaz de mezclar audio en tiempo real. Nadie más puede hacerlo al nivel de AS3.
• Edición bit por bit de mapas de bits: Aviary, Picnik y Photoshop Online hechos en Flash y Flex lo demuestran. ¿En HTML5 o JS? Ninguno realmente usable.
• 100% de compatibilidad a través de todas las plataformas: Si dices que es posible escribir un sólo código HTML5/CSS/JS que funcione en todos los navegadores ahora mismo, no has hecho nada profesional. En SWF es normal

Flash no es sólo el player. Flash CS5 es un entorno integrado con la capacidad de diseñar, dibujar, animar, incluir video, audio, editar todos estos componentes, agregar interactividad y programación de alta complejidad, compilar para desktops, móviles o iPhones. Ninguna herramienta del lado "estándar abierto" ofrece ese nivel de integración ahora mismo. No Dreamweaver, no Visual Studio 2010, no Aptana, ni siquiera una combinación de varias.

Flash, teléfonos móviles, Apple

El mundo móvil es diferente. El iPhone cambió el mundo y estableció una fuerte tendencia a las tiendas de aplicaciones, la integración de HTML 5 actualizado en el teléfono e ignorar a Flash. Android y otros siguieron el mismo camino.

Este mes en el Mobile World Congress, Adobe presentará el Flash Player 10.1 para todos los teléfonos móviles (excepto iPhone), un compilador especial para crear apps de iPhone con SWF desde Flash CS5 y el secreto a gritos, una forma unificada de desarrollar apps "pseudo-nativas" para Android, WebOS, Blackberry y Symbian, con un mismo código.

Flash ya era usado por el 90% de la humanidad conectada antes de Youtube. Las animaciones y los juegos en linea lograron posicionar a Flash en el principio. No hay razón para pensar que no pasará a nivel móvil. Ninguna empresa tiene un entorno tan avanzado para el desarrollo de juegos móviles como Adobe con Flash. Y pasará en todas las plataformas de teléfonos actuales (En tu Nokia 1100 puede que no)

¿Y Flex? ¿Y Adobe AIR?

Flex es líder en desarrollo de RIAs. No se nota mucho su presencia en la web, pero está en muchas intranets y empresas. Aun no tengo claro si Flex Mobile hará un impacto tan fuerte como Flash/AIR Mobile, pero su presencia como la mejor y más veloz herramienta para aplicaciones web se mantendrá, a pesar de que HTML 5 y jQuery UI son amenazas muy reales y fuertes.

Adobe AIR tiene que evolucionar. El uso de archivos .air y "badge installers" es simplemente estúpido. No está mal que los ofrezcan, pero también incluyan la opción de crear instaladores por SO. Si el rumor de AIR Mobile es cierto y cometen una cagada como la de los .air, Flash no será el sueño que esperábamos. Esperemos que Adobe tome la decisión correcta.

Flash "estándar", Flash Open Source

Flash es estándar en el mismo sentido que los .doc y .docx lo son. Es una realidad. No es algo malo de por sí, pero muchos no se sienten cómodos. Flash tiene abiertas las especificaciones del formato SWF, pero prohíben crear "players" alternativos con esas specs ¿Por qué? Según ellos, para proteger la segmentación del mercado y mantener un sólo player. Yo solía creer en esto.

Ya no lo creo más. La pésima forma en la que Adobe ha manejado las plataformas móviles (i-Mode -> Flash Lite con AS0.5 -> muerte de Flash Lite -> vacío -> ¿10.1?) , sumado a la lección de Android que se puede tener una distro oficial open source sin perder el control me lo deja claro. Adobe debería, sin duda, liberar el código del Player y permitir que la comunidad "ayude". Si Adobe no puede implementar bien Flash en Linux y Mac, la comunidad sí podrá. ¿El miedo es que Microsoft los mate como mató a Java con una maquina virtual especial? Adobe ya está grande y debe poder superar esto. Con su penetración, pueden mantener el control de un player abierto.

Si no, quizás y el 2022, cuando HTML 5 será un estándar cerrado y aprobado, será realmente el declive de Flash.

Y aquí está la continuación del cuarto capítulo de "Así las armamos en español" mi videoserie sobre maquetación web. En esta parte veremos dos plugins de jquery que nos permitirán hacer cambios en las fuentes y darle funcionabilidad a nuestro slide.

Te recuerdo ver las primeras partes de esta serie Convertir PSD a XHTML/CSS parte 1, Convertir PSD a XHTML/CSS parte 2 , Convertir PSD a XHTML/CSS parte 3

Así las armamos en Español: Javascript

Podríamos decir que esta es ya la última parte de la maquetación de esta web, pero no, vamos a ver la sección de contáctanos con el objetivo de darle una mirada a las estructuras y estilizaciones de los formularios y veré como podemos sacarle el jugo a las otras secciones aprendiendo algún truco

Temas para Próximos Vídeos

• Jquery
• Wordpress
• Tips y algunas propiedades vistas mas a fondo de CSS
• Mas maquetaciones!!

No olviden que pueden dejarme sus comentarios por aqui en Cristalab o seguirme en twitter @raymicha muchas gracias a todos los que siguieron mis videos hasta ahora nos vemos pronto con nuevas cosas para aprender

Si aún no has descubierto la librería jQuery o aún no te crees su eslogan de "Write less, do more", éste es el momento: con ella vamos a aprender a crear un menú desplegable utilizando listas y muy pocas líneas de código. Para ello, sólo tienes que seguir estos pasos:

0. Descargar la librería

Si accedes a la página de jQuery, verás que a la derecha tienes un enlace para descargar la librería. Como no nos interesa (hoy) analizar su funcionamiento, lo mejor es que escojas la versión comprimida, que ocupa tan sólo 19 KB.

Por cierto, si no la has usado nunca, te recomiendo que te leas el Tutorial de jQuery aquí, en Cristalab.

1. Preparar el menú de navegación

Como, en estos tiempos que corren, nos interesa que la web sea lo más semántica posible, vamos a utilizar listas. Crea un nuevo documento HTML e introduce el siguiente código:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú desplegable con jQuery en 5 minutos</title>
</head>

<body>
<h1>Menú desplegable con jQuery en 5 minutos</h1>
<ul>
   <li><a href="#">Inicio</a>
      <ul>
         <li><a href="#">¿Qué es jQuery?</a></li>
         <li><a href="#">¿Por qué debería usarlo?</a></li>
         <li><a href="#">¿Por qué tengo que seguir poniendo elementos de lista?</a></li>
      </ul>
   </li>
   <li><a href="#">Ejemplos</a>
      <ul>
         <li><a href="#">Menú desplegable</a></li>
         <li><a href="#">Fade-in, fade-out</a></li>
      </ul>
   </li>
   <li><a href="#">Contacto</a></li>
</ul>
</body>
</html>

Lo cual producirá algo así.

Pero como esto es un pelín feo, vamos a darle un poco de estilo. Procurando que los enlaces principales aparezcan horizontalmente y sin entrar en detalles de CSS, el resultado sería algo así.

2. Esconder las listas secundarias

Añadiendo otra pequeña regla a nuestro estilo CSS, esconderemos las listas secundarias, de forma que sólo se vean, en principio, los enlaces primarios.

Código :

ul li ul {
   /* Resto de estilos... */
   display: none;
}

Quedando la cosa así.

Ahora estamos listos para empezar a escribir el JavaScript.

3. Escribir el código JavaScript

Empezamos, como siempre, con:

Código :

$(document).ready(function() {});

Y ahora, buscamos que, cuando el ratón pase por encima de cualquier elemento de lista que contenga, a su vez, otra lista, se muestre dicha lista secundaria. Haciendo uso de los magníficos selectores de jQuery y del evento "hover":

Código :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   // Muestra y oculta los menús
   $('ul li:has(ul)').hover(
      function(e)
      {
         $(this).find('ul').css({display: "block"});
      },
      function(e)
      {
         $(this).find('ul').css({display: "none"});
      }
   );
});
</script>

Explicamos lo que haya podido quedar un poco más dudoso:

• El selector es ‘ul li:has(ul)’; es decir: todos los elementos de lista (li) que tengan, a su vez, otra lista [li:has(ul)] y que, obviamente, se encuentren dentro de una lista principal [ul li:has(ul)].
• El evento "hover" requiere que se especifiquen dos funciones: una para cuando el ratón llega, y otra para cuando se va.
• "this" hace referencia al elemento de lista sobre el que ha pasado el ratón.
• find() sirve para lo que su propio nombre indica.

¡Y ya tenemos nuestro menú! Fácil, ¿verdad?

Apéndice: Efectos vistosos

jQuery también nos permite efectos como estos:

Efecto 1
Efecto 2

Como veis, con muy pocas líneas de código y muy poco tiempo hemos conseguido un efecto elegante que podremos usar en nuestros sitios web.

Espero que les haya gustado el tip, ¡un saludo!

Google Maps ha sido uno de los grandes inventos que se sacó Google de la manga. Normalmente para cargar Google Maps situamos una etiqueta <script> dentro de nuestra página con nuestra id del api de Google Maps. Luego modificamos la etiqueta <body> para que cuando se cargue el documento, ejecute una función para inicializar el mapa.

El problema que ya comenté en un post anterior (Cargar Google Analytics una vez se haya cargado la página), es que esto, en según que momentos, puede ralentizar de una forma muy grave nuestra página, o por ejemplo, el mapa lo tenemos en una pestaña que por defecto no es visible. Por ello, podemos obtar por una solución que incrementará sustancialmente la velocidad de carga de nuestra página y que se encargará de que, una vez se haya cargado la página, proceder a la descarga y la inicialización del nuestro Google Map.

Esta no es la única utilidad, también podríamos cargar nuestro Google Map a voluntad mediante la pulsación de cualquier elemento. Esto nos permitiría que en una página no cargásemos el Google Map hasta que el usuario decidiese utilizarlo, aliviando la carga de nuestra página.

Veamos un ejemplo práctico llamando a Google Maps una vez se ha terminado la carga de nuestra página:

• http://www.marcosdev.com/ejemplos/googlemaps_async/

Lo primero de todo, veamos la estructura de nuestros ficheros:

Por un lado tenemos un fichero html en el cual hay una capa que utilizaremos para insertar nuestro Google Maps y las llamadas a los ficheros googleMaps.js y jquery.js.

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
   <div id="mapa" style="width:300px;height: 300px">
      <p style="text-align:center"><strong>Cargando</strong></p>
   </div>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>

Cómo podemos ver, el div con id "mapa" tiene un texto interior que pone "Cargando". Esto es para que mientras se carga nuestro Google Maps el visitante pueda saber que el navegador está trabajando. Después del div, insertamos las dos llamadas a nuestros ficheros javascript. El primero es la librería jQuery que nos ayudará realizar la petición de carga del conjunto de ficheros necesarios para cargar Google Maps.

En el fichero googleMaps.js tenemos el código necesario para realizar la carga del mapa:

Código :

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapa"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
   }
};

$(document).ready(function(){
   var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
   $.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
});

Lo primero que vemos es una función llamada "cargarMapa" la cual será llamada una vez tengamos cargada la librería de Google Maps. Esta función únicamente se encarga de mostrar nuestro Google Maps en un determinado div (en nuestro caso el div llamado "mapa") y situarlo en una coordenada (new GLatLng(39.578678,2.646021)) con un determinado zoom (16).

La parte interesante viene justo después. Vemos el comienzo típico de cualquier fichero js que jQuery ( $(document).ready(function(){ ) y justo después dos líneas de código; la primera es una variable en la cual, por cuestiones de tener un código más legible, guardo la clave del api de Google Maps. Y en el segundo realizo la petición, que a simple vista, es la misma url que normalmente nos da google para poner en las etiquetas <script>. Pero si nos fijamos, existe dos diferencias. Justo al final de la línea vemos que hay dos parámetros de url nuevos: &asyn=2&callback=cargarMapa. El primero (async=2) permite llamar de forma asíncrona (cuando nosotros queramos y no siempre cuando se carga el documento al completo), y el segundo (callback=cargarMapa) es el parámetro que le dice a Google Maps que función debe ejecutar una vez tenga todo lo necesario cargado para ser ejecutado.

Ponerlo en práctica es tremendamente sencillo y podemos sacarle mucha utilidad al tema, como por ejemplo, la siguiente demostración dónde cargamos el mapa cuando alguien hace clic sobre un botón:

http://www.marcosdev.com/ejemplos/googlemaps_async/index2.html

La diferencia entre el primer ejemplo y este segundo, reside en que la capa "mapa" la tengo escondida y que en vez de cargar el mapa directamente, le agrego una funcionalidad al botón para que este lo carge cuando hagan clic sobre él, y además, haga visible la capa:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
   <div id="mapa" style="width:300px;height:300px;display:none;">
      <p style="text-align:center"><strong>Cargando</strong></p>
   </div>
   <input type="button" name="bCargar" id="bCargar" value="Cargar Mapa" />
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>

Código :

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapa"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
  }
};

$(document).ready(function(){

   //Agregamos evento click al botón
   $('#bCargar').click(function(){
      //Mostramos la capa mapa
      $('#mapa').show();
      var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
      $.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
   });
});

Espero que les sea útil

P.D.: Los estilos de la capa "mapa" están escritos utilizando el atributo style. Esto no es una buena práctica; hay que utilizar ficheros CSS de estilos. Lo he hecho así para hacerlo más visible para todos.

P.D2.: En el segundo ejemplo se podría insertar la capa "mapa" en tiempo real sin necesidad de que esté en el código, pero sería menos didácticos para aquellas personas que tengan un nivel bajo de Javascript.

En la noticia OMGWTFBBQ!? de la semana, Microsoft y Nokia han anunciado que incluirán a jQuery como parte de sus plataformas para desarrolladores. Específicamente, jQuery será parte del Visual Studio y del framework MVC para ASP.NET. jQuery también tendrá soporte de IntelliSense dentro del Visual Studio (ayudas visuales, tooltips con información de los métodos y sintaxis de jQuery, etc). En el lado de Nokia, esperan usarlo en todos sus sitios web, así como en su plataforma para creación de sitios web móviles en teléfonos Nokia.

Microsoft también creará widgets, componentes y elementos de interfaz de usuario como extensiones para jQuery. Tanto MS como Nokia prometen que no cambiarán el código de jQuery, respetarán su licencia de código abierto y colaborarán con el proyecto.

jQuery es, sin duda, uno de los mejores frameworks de Javascript y AJAX que existen. Aquí en Cristalab tenemos un tutorial de jQuery para novatos, además de artículos más avanzados. Igualmente, usamos jQuery en todos los desarrollos de los proyectos de la comunidad (incluyendo ClabEngines, el CMS de Cristalab).

Hay más información en el blog de jQuery, Scott Hanselman y Slashdot.

PD. Curioso que la gente de Microsoft use Firefox para mostrar ejemplos de aplicaciones wen en ASP.net y Javascript.