[Tutorial] Creación de lector de RSS de GeeksMS con jQueryMobile y PhoneGap

Hola que tal, vamos a comenzar revisando la primera parte del tutorial de la creación de un simple lector de RSS con JQueryMobile, JQuery y PhoneGap, también ocuparemos el emulador Ripple para Chrome que nos va servir para nuestros desarrollos de aplicaciones web móviles .

Para este lector utilicé la fuente  RSS de GeeksMS, y el plugin JGFeed para obtener estas fuentes vía jQuery.

Las Pantallas a utilizar (acá estoy utilizando un emulador de Android), serán Pantalla de Inicio, con menú inferior de Refrescar y Opciones. La Pantalla de opciones nos permitirá seleccionar el número de feeds a mostrar, el tiempo de actualización y si vamos a permitir que al momento de agitar el teléfono se realice una actualización.

Pantalla de Inicio

Pantalla de Configuración

image image

Para la creación, me acomoda bastante WebMatrix, aunque no vayamos a escribir código del lado del servidor, esta muy bueno para codificar, entonces manos a la obra, veamos como se crea este ejemplo.

Estructura del Proyecto

La estructura del ejemplo es bastante sencilla ya que la mayoría de los scripts los vamos a obtener desde CDN.

image

Estructura del la Pagina

JQueryMobile sigue una estructura de página que puedes revisar acá, en donde la pagina principal pude estar divida en varias subpáginas o data-role"=”page”, de modo que una sola página web puede contener a todo un sitio. Para mayor información puedes revisar la documentación de jquerymobile en lo que a la anatomía de las páginas respecta:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-anatomy.html

image

1º Parte de la Codificación , inclusión de Scripts

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

<script type="text/javascript" src="Scripts/jGFeed/jquery.jgfeed-min.js"></script>

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

La primera línea tiene que ver con la forma de desplegar la página web cuando se muestra en los navegadores web, (en el caso de no usar PhoneGap, podemos ver este proyecto como una pagina web y no como una app nativa). Luego incluimos los estilos y scripts necesarios para JQueryMobile, JGFeed y PhoneGap.

Como habíamos visto, la página está divida en secciones, que corresponden a los data-role=”page” , ahora veremos la estructura de la primera sección.

Sección de Página Principal

<div data-role="page" id="principal">

  <div data-role="header" data-position="fixed" >

    <h1>Geeks•ms RSS</h1>

  </div>

  <div data-role="content">

    <ul id="lista" data-role="listview"></ul>

  </div>

  <div data-role="footer" data-position="fixed">

    <div data-role="navbar"data-theme="c">

      <ul>

        <li><a href="#" id="refrescar" data-role="button"
              
data-icon="refresh" >Refrescar</a>

        </li>

        <li><a href="#configurar" data-transition="slide"
            
 data-role="button" data-icon="gear">Opciones</a
>
        </
li>

      </ul>

    </div>

  </div>

</div>

Veamos un poco la estructura, tenemos el header, en donde mostramos el título, luego, y lo importante, la lista no ordenada con el data-role=”listview”,  en esta lista vamos a agregar los ítems de lista que vamos a obtener desde el Feed de RSS de Geeks. Finalmente en el footer, vamos a tener el menú de navegación con las opciones de refrescar y opciones, estos botones van a tener iconos datos por el atributo data-icon, gráficamente vemos algo así:

image

Sección de la Página de Opciones

<div data-role="page" id="configurar">

  <div data-role="header"  >

    <h1>Opciones</h1>

  </div>

  <div data-role="fieldcontain">

    <label for="slider">Numero de Feeds a Mostrar</label>

    <br>

    <input type="range" name="cantidad"
          
id="cantidad" value="1" min="1" max="20" 
/>

    <br>

    <label for="slider">Tiempo de Actualización(min):</label>

    <br>

    <input type="range" name="tiempo"
          
id="tiempo" value="1" min="1" max="20" 
/>

    <p>

    <label for="slider">Refrescar al Agitar</label>

       <select name="shake" id="shake" data-role="slider">

             <option value="off">Off</option>

             <option value="on">On</option>

       </select>

    </p>

    <p>Aplicación de prueba desarrollada por Chalalo.
      No es una  aplicación oficial GeeksMS, si quieres modificarla,
      siéntete con toda la  libertad.
<br
>

    </p>

     <p><a href="#" id="volver" 
          
data-role="button" data-icon="back">Volver</a>
     </
p
>

  </div>

  <div data-role="footer" data-position="fixed">

    <h1>www.chalalo.cl</h1>

  </div>

</div>

Utilizamos dos controles type=”range” que básicamente corresponde al slider, y el render que hace este JQM es simplemente genial, como puedes ver en la imagen, además vamos a ocupar un objeto select al cual le vamos a agregar el atributo data-role=”slider” para que se vea como la imagen siguiente:

image

Codificación de la página principal

Revisemos parte por parte codificación y su esquema de funcionamiento es el siguiente:

image

Una vez que el documento esté listo (previamente a la inicialización de variables),, se establece mediante una el sertInterval la periodicidad con la cual vamos a cargar los feed desde la fuente, esto es, un ciclo cada cierta cantidad de segundos,  luego vamos a registrar un listener que gatille la función startWatch que va a monitorear si el acelerómetro del dispositivo se ha movido lo suficiente como para considerar es un “shake”, esto se consulta en la funcion onSuccess.

var cantidad=10;
var tiempoRefresco=15;
var watchID = null;

$(document).ready(function(e) {

    cargarFeeds(cantidad);

    document.addEventListener("deviceready",startWatch(), false);

       setInterval(function() {

           cargarFeeds(cantidad);

       }, tiempoRefresco * 60000)

Como puedes ver, al inicio se cargan las variables, en donde la cantidad de feeds por defecto es 10 y el tiempo de refresco es 15 minutos, además declaramos la variable watchID que nos va a servir para utilizar PhoneGap y el acelerómetro del dispositivo, luego llamamos a la función cargaFeeds, con el parámetro cantidad, también hacemos referencia a la variable tiempo de refresco y al listener que indica cuando el dispositivo está realmente listo para utilizar utilizar phonegap.

Ya que hablamos de PhoneGap veamos las funciones que involucran al SDK:

function startWatch() {

     var options = { frequency: 3000 };

     watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

 }

function stopWatch() {

     if (watchID) {

          navigator.accelerometer.clearWatch(watchID);

          watchID = null;

        }

    }

 

 

function onSuccess(acceleration) {

      var max = 1;

      if (Math.abs(acceleration.x) > max

                    || Math.abs(acceleration.y) > max

                    || Math.abs(acceleration.z) > max) {

          cargarFeeds(cantidad);

        }

    }

 

function onError() {

        alerta(‘Error al Agitar!’,‘GeeksMS’,‘Aceptar’);

    }

      

function alerta(mensaje,titulo,boton) {

        navigator.notification.alert(mensaje,titulo,boton);

    }

Veamos de que tratan las funciones,

  • startWatch: inicializa la detección de la aceleración del dispositivo según un intervalo de tiempo regular(300ms). cada vez que es detectada la aceleración ya sea en el eje Y,X o Z, se va a llamar a la función onSuccess para determinar la magnitud de dicha aceleración y si la vamos a considerar con la intensidad necesaria para hacer el refresco.
  • stopWatch: Si bien startWatch asignaba la referencia a la variable watchID, se puede utilizar clearWatch para limpiar esta referencia, esta funciona la vamos a utilizar cuando no está seteada la opción de refrescar al agitar en la pantalla de configuración.
  • onSucess:Recibe como argumento la aceleración, dentro se establece como máximo de nivel de aceleración el valor 1, esto tiene que ver con que tan sensible al agitar el dispositivo vamos a realmente determinar que se hizo un “shake”, a menor número, más sensible, si la aceleración de los ejex x o y o z es mayor a 1, entonces llamamos a la función cargaFeeds
  • onError: Si se produce un error, enviamos una alerta(alerta nativa del dispositivo)
  • alerta: utilizada para llamar al método alert de la clase notificación de PhoneGap.

Para  más información de uso de la clase accelerometer pincha :
 http://docs.phonegap.com/phonegap_accelerometer_accelerometer.md.html

Veamos ahora la clase cargarFeeds, que es la que se encarga de cargar desde la fuente RSS la cantidad especificada de post.

function cargarFeeds(cantidad){

try{

    $.mobile.loadingMessage = "Recuperando Feeds";

    $.mobile.showPageLoadingMsg();

    $.jGFeed(‘http://geeks.ms/blogs/MainFeed.aspx’,

          function(feeds){

            if(!feeds){

            $.mobile.hidePageLoadingMsg();

             alerta(‘Error , no se puede Obtener RSS!’,‘GeeksMS’,‘Aceptar’);

                 return false;

              }else{

                var lista = $(‘#lista’);

                lista.html("<li data-role=’list-divider’ data-theme=’a’>" +
            cantidad +
" Post, Actualización :" + getFechaHora() + "</li>"
);

                for(var i=0; i<feeds.entries.length; i++){

                    var entry = feeds.entries[i];

                    var html="<li>";

                    html+="<a href=’"+ entry.link + "’><h3>"+
                            entry.title +
"</h3>"
;

                    html+="<p><strong>"+ entry.author +
                          
"</strong> – "+entry.publishedDate +"</p>"
;

                    html+="</a></li>";

                    lista.append(html);

                    lista.listview("refresh");

                 }     

                           $.mobile.hidePageLoadingMsg();

              }}, cantidad);

              return true;

       }catch(err){

          alerta(‘Error , no se puede Obtener RSS!’,‘GeeksMS’,‘Aceptar’);

       }

 }

Esta función ,recibe la cantidad de post que vamos a obtener, y utiliza la librería jGFeed para la obtención de los feeds, puedes ver que utilizo :

$.mobile.loadingMessage = "Recuperando Feeds";
$.mobile.showPageLoadingMsg();

Para mostrar el mensaje de cargando…

.image

Luego obtengo la lista definida como:
    <ul id="lista" data-role="listview"></ul>

A continuación vamos agregando los feeds al elemento UL mediante HTML que contiene los tags <li> formado por los tags correspondientes y concatenando con el objeto entry que corresponde a una entrada RSS, es importante que vayamos refrescando el lista invocando:

list.listview(“refresh”)

Ya que de otra manera, no veríamos redenrizada la lista con los estilos que agrega jquerymobile. Personalmente no lo hice en un principio y la lista no se veía correctamente.

Sin list.listview(“refresh”) Triste

Con list.listview(“refresh”)  Sonrisa

image image

Las llamadas de los menú de navegación (Refrescar y Opciones) utilizan  las siguientes funciones:

$("#refrescar").click(function(e) {
    
cargarFeeds(cantidad);

});

$("#configurar").bind("pageshow", function() {

      $("#cantidad").val(cantidad).slider("refresh");

      $("#tiempo").val(tiempoRefresco).slider("refresh");

         var shake = $("#shake");

         if (watchID!=null){

            shake[0].selectedIndex = 1;

         }else{

           shake[0].selectedIndex =0;

         }

      shake.slider("refresh");

   });

           

En donde se hace al pinchar sobre el menú refrescar  vamos a llamar a la función cargarFeeds. A continuación tenemos el código que se va a ejecutar cuando pinchan sobre el menú opciones, recordemos que el menú opciones tiene un link a la sección de la pagina #configurar. Lo que se hace entonces, es unir mediante el método bind de jquery, el evento pageshow, de manera de ejecutar una función al momento de mostrar la sección de configuración en la pantalla, esta función a ejecutar setea los valores de los controles range y slider; utilizamos siempre al setear “refresh” para reflejar los cambios cuando se realiza en render.

Finalmente para esta página utilizo una función helper simplemente para obtener formateada la fecha de la ultima actualización.

function getFechaHora(fec){

       var fec=new Date;

       var dia=fec.getDate();

       var mes=fec.getMonth();

       var anio=fec.getFullYear();

       var horas = fec.getHours() ;

       var minutos = fec.getMinutes() ;

       var segundos = fec.getSeconds() ;

       if (dia<10) dia=‘0’+dia;

       if (mes<10) mes=‘0’+mes;

 

       if (horas <10) horas = "0" + horas;

       if (minutos <10) minutos = "0" + minutos;

       if (segundos <10) segundos = "0" + segundos;

 

   return anio+‘/’+mes+‘/’+dia+" "+horas+":"+minutos+":"+segundos;       

}

Codificación de la página de Opciones

$("#volver").click(function(e) {

    cantidad=$("#cantidad").val();

    tiempoRefresco = $("#tiempo").val();

    var shake = $("#shake");

    if (shake[0].selectedIndex == 0){

         stopWatch();

    }else{

       if (watchID == null){

              startWatch();

              }

        }

       cargarFeeds($("#cantidad").val()); 

       $.mobile.changePage("#principal", "slide", false, true);

     });

Este código, tal como se indica, se va a ejecutar cuando se hace click en el botón volver, seteando las variables globales como la cantidad de feed,el tiempo de refresco , y el seteo si vamos a permitir que se actualicen los feed agitando el teléfono, si es que el watchID está en nulo, ejecutamos la función startWatch,si no, quiere decir que la referencia watchID está activa y que siga su correcto funcionamiento.

image

Probando la Aplicación

Para probar la aplicación sin PhoneGap podemos hacer uso de cualquier navegador en su ultima versión (IE9 funciona correctamente), sin embargo, hay un plugin muy bueno para Chrome que sirve para probar aplicaciones web móviles según su respectiva plataforma, se llama Ripple y es de RIM, entre otras cosas, nos va a permitir simular tener la aplicación instalada con PhoneGap sobre un dispositivo, la geo localización y el agitar el teléfono. Instálalo desde: http://ripple.tinyhippos.com/

image

Si vemos la sección de la izquierda, podremos simular el efecto Shake y mover el teléfono en los ejes xyz.

Veamos un video mostrando el funcionamiento(el refresco pasa rápido, apenas se nota, pero lo hace).

Descarga el código de la aplicación desde acá:

Puedes ir al WebSite de PhoneGap para ver como configurar esta página para correrla como aplicación nativa de un dispositivo móvil.
http://www.phonegap.com/start

Espero que te sirva de guía Sonrisa
Saludos!!
Gonzalo

[Tips] JQuery & ASP.NET Utilizando HyperLinks y ShortCuts para navegar.

Este es un pequeño tip para navegar links de nuestro sitio mediante ShotCut del teclado, tenemos entonces el siguiente escenario:

image

Tres Hyperlinks (controles ASP.NET) y un Div a continuación de estos, la idea es que cuando presiones la tecla 1 se cargue en ese div la pagina1.aspx, lo mismo con la tecla 2 (pagina2.aspx) y la tecla 3 (pagina3.aspx). Obviamente esta carga de la página dentro del div debe ser asíncrona, y además se debe marcar con rojo el link que está activo.

El siguiente video indica a lo que se quiere llegar.

La Construcción – Código declarativo:

Para la construcción de los links y el div vamos a utilizar el siguiente código:

<asp:HyperLink ID="link1" runat="server" NavigateUrl="pagina1.aspx">
Pagina 1</asp:HyperLink><br />

<asp:HyperLink ID="link2" runat="server" NavigateUrl="pagina2.aspx">
Pagina 2</asp:HyperLink><br />

<
asp:HyperLink ID="link3" runat="server" NavigateUrl
="pagina3.aspx">
Pagina 3</asp:HyperLink><br />

<
div id
="contenedor">
</div>

La Construcción – Código jQuery:

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(document).keyup(function (e) {
                var key = (e.keyCode ? e.keyCode : e.charCode);
                switch (key) {
                    case 49:
                        cargaPagina($('#link1'));
                        break;
                    case 50:
                        cargaPagina($('#link2'));
                        break;
                    case 51:
                        cargaPagina($('#link3'));
                        break;
                    default: ;
                }
            });
            function cargaPagina(jPag) {
 
                $('a[id^="link"]').css("color", "black");
                $(jPag).css("color", "red");
                $("#contenedor").load($(jPag).attr("href"));
            }
        });
    </script>

Revisemos un poco el código, primero que nada, está la inclusión de la librería jQuery, luego atachamos al evento keyup del documento una función, es decir, cuando se presione una tecla mientras estoy en la página web, se va a ejecutar la función, capturamos el código de la tecla presionada, luego dependiendo de la tecla presionada, la cual determinadnos por su keycode, tecla 1->49, 2->50, 3->51, luego llamamos a la función cargaPagina con el parámetro de entrada de todo  el objeto HyperLink y no solo el la propiedad href, para poder acceder posteriormente a más de estas propiedades.

La función cargaPagina recibe el objeto jpag, que es la HyperLink propiamente tal, luego dejo en color negro todos los links que cumplan que su id comience con link, luego solo el hyperlink que se recibió por parámetro es seteado su color a rojo para finalizar cargando en el contendor lo que tiene en su atributo href ( que corresponde al navigateURL del control), entonces, cargamos en el contenedor en link final (pagina1.aspx, pagina2.aspx o pagina3.aspx)

Con estas pocas líneas de código puedes manejar el teclado como shortcuts en tus páginas, otorgando comodidad al usuario al momento de seleccionar opciones mediante el teclado numérico.

Espero que te sirva!, nos vemos!

Saludos,

G

DateBox, plugin para ingreso de fechas para jQueryMobile

Seguramente muchas veces hemos utilizado algún plugin de jquery ui como el control DatePicker para seleccionar una fecha, sin embargo este control no es adecuado para desplegarlo en un dispositivo móvil, por lo que debemos buscar otras alternativas, y es justamente en esta búsqueda, que me encontré con este excelente plugin para JQueryMobile, el control DateBox, puedes ver una excelente galería de demos y documentación en:

http://dev.jtsage.com/jQM-DateBox/

En mi caso, requiero el siguiente escenario, la selección de los fechas, la clásica fecha de inicio y fecha fin:

image

Como ya es común en mis post, estoy utilizando WebMatrix, que por su simpleza, limpieza de código y facilidad de uso.

Las librerías a incluir y la configuración del control:

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css” />

<link rel=”stylesheet” type=”text/css” href=”http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css” />
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.1.min.js”></script>

<script type=”text/javascript” src=”http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js”></script>

<script type=”text/javascript” src=”http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js”></script>

<script type=”text/javascript”>

$(function () {

   jQuery.extend(jQuery.mobile.datebox.prototype.options, {

      ‘dateFormat’: ‘dd/MM/YYYY’,

      ‘headerFormat’: ‘dd/MM/YYYY’,

      ‘setDateButtonLabel’: ‘Aceptar’,

      ‘fieldsOrder’: [“d”,“m”, “y”],

      ‘noButtonFocusMode’: ‘true’

        

   }); 

});

Los Script y CSS incluidos en orden son:

  • jquerymobile.min.css
  • jquery.mobile.datebox.min.css
  • jquery-1.6.1.min.js
  • jquery.mobile-1.0b1.min.js
  • jquery.mobile.datebox.min.js

Ya está disponible para la descarga la versión beta 2 de JQueryMobile, en mi caso había realizado el ejemplo con la beta1.
Existe una gran cantidad de características que podemos parametrizar de datebox, en este ejemplo las configuraciones más importante son dateformat, en donde especificamos el formato, el headerFormat, que es el preview de la fecha, setDateButton, que nos permite especificar el texto del botón y fieldsOrder, que nos va a permitir que la selección de el día , mes y año esté en el orden correcto de los botones (pruébalo sin esto y me entenderás)

Luego, los input text con el data-role que los implementará:

<label for=”fechaini”>Fecha Inicio</label>

<input type=”text” name=”fechaini” value=”” id=”fechaini”
 
data-role
=”datebox”>

Al momento de hacer click sobre el input text vamos a ver el siguiente popup:

image

Pero de todas formas podemos configurar este control para que tenga otra apariencia, como por ejemplo, la selección con un desplazamiento vertical o horizontal.imageimage

Puedes ver más detalle de las distintas configuraciones de este plugin en:
http://dev.jtsage.com/jQM-DateBox/

Espero que te sirva en tus desarrollos móviles.
Atte.
Gonzalo

Ajax Control Toolkit–Release de Julio con Nuevo Control Editor HTML

Fuente: http://stephenwalther.com/blog/archive/2011/08/01/ajax-control-toolkit-july-2011-release-and-the-new-html.aspx
Este articulo es una traducción y pequeña adaptación del articulo original  de phen  Walter.

Existe un nuevo release de Julio 2011 de la excelente Suite de Controles Ajax Control Toolkit, incluye una importante cantidad de Bugs Fixes y un completamente nuevo control extensor: un editor HTML. Podemos descargar este release visitando el sitio  en CodePlex de esta suite:

http://AjaxControlToolkit.CodePlex.com

Utilizando el nuevo control Editor HTML

Podemos usar este nuevo control, extendiendo un control TextBox estándar, este nuevo control soporta texto enriquecido como  negritas, cursivas, lista de viñetas, listas numeradas, distintas tipografías y diferentes colores de letra y de fondo

image

El siguiente código muestra como el codigo necesario par extender el control ASP.NET TextBox con el HtmlEditorExtender

<asp:ToolkitScriptManager ID=”ToolkitScriptManager1″ runat=”server”>

</asp:ToolkitScriptManager>

       

<asp:TextBox ID=”txtComments” TextMode=”MultiLine” 
    
Columns=”60″ Rows=”8″ runat=”server” 
/>

<asp:HtmlEditorExtender ID=”HtmlEditorExtender1″ 

   TargetControlID=”txtComments” runat=”server” />

 

Esta código tiene los siguientes tres controles:

  • ToolScriptManager –  Control encargado del render de todos los script requeridos por el Ajax Control Toolkit
  • TextBox – El control ASP.NET que será extendido para mostrar el editor.
  • HtmlEditorExtender – El control extensor que modifica la funcionalidad del textbox.

Liviano y Compatibilidad con HTML5

Este nuevo editor es compatible con todas las ultimas versiones de los browsers, esto es Firefox 5, Google Chrome 12, y Safari 5. Además el editor HTML es compatible con IE6 y versiones más recientes.

Este control es muy liviano, debido a que utiliza las ventajas del atributo HTML5 ContentEditable, con el cual no se necesita utilizar un iframe o soluciones complejas en el navegador. De hecho , nos podremos sorprender por la simpleza del código generado.

Barra de Botones personalizable

Dependiendo del tipo de aplicación que estamos construyendo, buscaremos mostrar diferentes botones en la barra del control HTML Editor Extender. Uno de los objetivos de diseño del control fue que el personalizar la barra de botones sea una tarea sencilla para los desarrolladores.

Imaginémonos, por ejemplo, que queremos usar el HTML Editor Extender para aceptar comentarios en un blog . En este caso , puede que deseemos restringir las posibilidades de formato solo a negrita y cursiva.

image

El siguiente código muestra como personalizar la barra de herramientas para obtener solo las opciones de negrita y cursiva:

 <asp:HtmlEditorExtender ID=”HtmlEditorExtender1″ 

      TargetControlID=”txtComments” runat=”server”>

            <Toolbar>

                <asp:Bold />

                <asp:Italic />

            </Toolbar>

</asp:HtmlEditorExtender>

En la página de Stephen Walther (Este artículo es una traducción y semi-adaptación al que el escribió), puedes ver una lista completa de los  “botones”  actualmente soportados:

  • Undo
  • Redo
  • Bold
  • Italic
  • Underline
  • StrikeThrough
  • Subscript
  • Superscript
  • JustifyLeft
  • JustifyCenter
  • JustifyRight
  • JustifyFull
  • InsertOrderedList
  • InsertUnorderedList
  • CreateLink
  • UnLink
  • RemoveFormat
  • SelectAll
  • UnSelect
  • Delete
  • Cut
  • Copy
  • Paste
  • BackgroundColorSelector
  • ForeColorSelector
  • FontNameSelector
  • FontSizeSelector
  • Indent
  • Outdent
  • InsertHorizontalRule
  • HorizontalSeparator

Compatibilidad con la Librería AntiXSS

Cuando se utiliza este control, es altamente recomendado que utilice junto a la librería AntiXSS. Está mas que claro que si dejamos enviar cualquier cosa a los usuarios de la pagina, podemos ser víctimas de ataques Cross-Site Scripting.

Cosas que faltan y que se vienen.(no todo es perfecto)
Se hecha de menos: Adjuntar imágenes, video, tener una vista de html, poder ingresar tablas.

Revisa más información de este control que de suma a los demás controles ya existentes del Ajax Control Toolkit en :
http://stephenwalther.com/blog/archive/2011/08/01/ajax-control-toolkit-july-2011-release-and-the-new-html.aspx

Saludos,
Gonzalo

Edge de Adobe, crea animaciones en HTML5 con CSS3

Hola, acabo de descargar esta herramienta, se llama Edge y la puedes descarga ya desde este link:

http://labs.adobe.com/technologies/edge/

Todavía está en una etapa temprana ,pero promete, es interesante el seteo de las propiedades y el timeline, generando todo el codigo que se necesita para la animación y transformaciones en dos archivos, uno js y otro css.

image

Al momento tiene la opción de agregar elementos de texto, cuadros y cuadros con bordes redondeados, luego al momento de generar la animación vamos a ver que la carpeta tiene la siguiente estructura:

image

El archivo CSS( prueba1_edge.css) tiene todas las transformaciones que ocurriendo en la animación, generando el código necesario para tener la compatibilidad con los distintos browser(que soporten mediante CSS  estas características, claro está).

Por ejemplo el cuadro que hice mediante Edge

#Cuadro {

    background-color: rgba(212,71,71,1.00);

    border-style: solid;

    width: 152px;

    height: 123px;

    border-color: rgba(0,0,0,1.00);

    border-width: 3px;

    -webkit-transform: translateX(-17px) translateY(6px);

    -moz-transform: translateX(-17px) translateY(6px);

    -ms-transform: translateX(-17px) translateY(6px);

    -o-transform: translateX(-17px) translateY(6px);

}

Puedes ver que tiene el soporte para los distintos browser.

En el archivo prueba1_edge.js, está todo el script que nos sirve para generar las animaciones, tambien dentro de la carpeta includes veremos librerías propias de Edge y jQuery, de hecho para inicializar las animaciones tenemos el siguiente código:

 

$(window).ready(function() {
     $.Edge.initialize(symbols);
});

 

jQuery, como siempre, presente Sonrisa

 

Hice una pequeña prueba, jugando, una animación sin sentido, pero corre bien en los distintos navegadores, también la probé recién en un LG Optimus One  y se ve sin problemas. Luego la pruebo en un IPad, pero dicen que corre perfecto.

 

La prueba esta acá:

http://www.travelco.cl/edge/prueba1.html

 

Así que a probar esta nueva herramienta , por lo que tengo entendido ,la beta es de hoy, no hay tiempo que perder!

 

Saludos!

Gonzalo

HTML- Introducción a WebWorkers

Los WebWorkers se definen como una API para correr scripts, básicamente JavaScript, los cuales pueden correr en un thread distinto al de la ejecución principal , por lo que corren en “background” permitiendo que el browser continúe su operación normal mientras dicho script se está ejecutando. La especificación de Web Workers está separada de la especificación de HTML5, sin embargo pueden ser utilizados con la este último.

Existen dos tipos de WebWorkes: workers dedicados (Dedicated Workers) y workes compartidos, (Shared workers)

Cuando un webworkes está en ejecución no tiene acceso al DOM (Document Object Model), por lo que la comunicación con el documento se hace mediante el paso  de mensajes.

Veamos un problemática, me gustó el ejemplo de la documentación oficial, sobre encontrar números primos entre dos números, así que es el mismo que voy a exponer acá:

 <script type="text/javascript">
        var count = 0;

        $("#btnAddOne").click(function () {

            count++;

            $("#countResult").val(count);

        });

 

        // Calcular el Valor Primo

        var n = 1;

        search: while (true) {

            n += 1;

            for (var i = 2; i <= Math.sqrt(n); i += 1)

                if (n % i == 0)

                    continue search;

            //Primero encontrado!

            $("#primeResult").text(n);

        }

 

    </script>

El script anterior hace una intensa búsqueda para buscar los números primos, y si, da resultado, pero la experiencia de usuario al ejecutar el script es mala, debido a que el browser parece dejar de responder mientras se esta ejecutando el script.

Uso de Web Workers

Para comenzar a utilizar web workers primero debemos instanciarlo, lo que hacemos con:

var worker = new Worker('CalculoPrimos.js');

Con esta línea instanciamos el webworkers indicando la ruta del script que va a tener el procesamiento que se va a ejecutar en otro Thread.

Para enviar un Mensaje hacia el Worker lo podemos hacer mediante el método:

worker.postMessage("Este es un Mensaje!");

Y muy parecido, cuando queremos pasar un mensaje desde el worker hacia la página que lo instanció (esto estaría dentro de un archivo JS).

postMessage(n);

Ahora como quedaría el código utilizando Web Workers

<body>
 
    <button id="btnAddOne">Add One</button>
    <output id="countResult"></output>
 
    <h1>Calculo de Primos:</h1>
    Latest Prime: <output id="primeResult"></output>
 
    <script src="../Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
 
        var count = 0;
        $("#btnAddOne").click(function () {
            count++;
            $("#countResult").val(count);
        });
 
        // Calculo de Primos
        var worker = new Worker('CalculoPrimos.js');
        worker.onmessage = function (event) {
            $("#primeResult").text(event.data);
        };
  </script>
 </body>
Y el archivo CalculoPrimos.js:
var n = 1;
search: while (true) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1)
        if (n % i == 0)
            continue search;
    // Primo encontrado!
    postMessage(n);
}
 

Como puedes ver, La pagina principal instancia el Worker, luego el listener worker.onmessage  se gatilla cuando el worker hace el postMessage, de esta manera se produce la comunicación entre los dos hilos de ejecución, pudiendo así el browser continuar con su ejecución normal y sin dejar bloqueada la pantalla del browser.

Para resumir, podemos decir que la ejecución “normal” tiene el siguiente esquema:

image

Y con Web Workers podemos cambiar esto y tener:

image

 

Soporte

Sin duda, una mejora al momento de correr nuestros script, pero ahora vamos al soporte, no todo es color de rosas.Podemos detectar si el browser soporta esta capacidad con:

  function detecta_worker() {

      return !!window.Worker;

  }

Esta documentado que los navegadores que soportan esta funcionalidad son:

  • Firefox
  • Chrome
  • Opera
  • Safari
  • IE9

IE9 no soporta esta funcionalidad.

Te recomiendo ver este excelente artículo sobre Web Workers de HTML5Rocks, está muy bueno para seguir investigando sobre está interesante característica:

http://www.html5rocks.com/en/tutorials/workers/basics/

Saludos!

Chalalo