Tutorial Rápido–Promocionar tus Sitios que utilizan IE9

Si quieres extender tu sitio para IE9, debes promocionarlo, es decir indicarle al usuario que tiene la posibilidad de , por ejemplo, anclar el sitio en la barra de tareas. También es importante eliminar esta indicación si es que el sitio se encuentra “anclado”.

Para promocionar mi sitio, voy a utilizar la siguiente imagen:

image

Ahora bien, esta imagen se mostrará en la esquina superior izquierda , y deberá desaparecer cuando el sitio ya está anclado.

La imagen va a estar en un Div:

<div id="mensajePromo">
        <img alt="" src="anclar.png" />
</
div
>

image

La función para revisar si el sitio está anclando la ejecutamos en el onLoad:

 

window.onload = function () {

try {

      if (window.external.msIsSiteMode()) {

        document.getElementById("mensajePromo").style.visibility = "hidden";

      } else {

       document.getElementById("mensajePromo").style.visibility = "visible";

     }

  }catch (ex) {  
    
return;
  }
}

Es decir, acá se muestra o se oculta el div, algo bastante sencillo de acuerdo a si window.external.msIsSiteMode nos devuelve true.

Un código bastante sencillo para promocionar nuestros sitios Sonrisa con IE9.. Ojo que no significa que la página va a funcionar únicamente para IE9, si no que va a aprovechar ventajas de IE9.

Saludos,
Gonzalol

Tutorial–Creación de mi Primer PlugIn para JQuery

Hola, bueno para algunos esta es una tarea rutinaria, hablo de la creación de Plugins para JQuery. Esta oportunidad quiero compartir mi experiencia en la creación de un plugin bastante sencillo, el cual solo va a indicar cuando una palabra es palíndromo o no.

De donde aprendí (y te los recomiendo como lectura, para saber de lo que estamos hablando)

  • Mi Plugin

    Funcionamiento
    Como ya había comentado, va a revisar si una palabra es palíndromo, en el caso que lo sea, quiero que la caja de texto tenga fondo verde y que un pequeño mensaje aparezca bajo la misma, como ves en la figura. En el caso que no sea Palíndromo, además del mensaje, que el fondo sea amarillo.

    image

    Código

    Como puedes ver en los tutoriales que compartí anteriormente, vamos a ver que los Plugins tienen una estructura básica, y que podemos extender de dos tipos de Objetos:

    • jQuery: que maneja la lógica interna de la librería,
    • jQuery.fn: que maneja interacciones con los elementos visuales.

    En mi caso, voy a extender jQuery.fn, para analizar y modificar los elementos del DOM. Voy a tratar de explicar los puntos importantes de este código.

    • Se extiende el objeto jQuery.
    • Creamos el extensor “palíndromo”, que va a ejecutar una función con el parametro de entrada “DIV”
    • Como se explica en los tutoriales , se recorre cada uno de los elementos con this.each que coincidan con el selector que se extiende con el plugin. Si bien el selector puede obtener una lista de objetos, dentro del this.each, se va manejando un solo elemento de la colección.
    • Dentro del ciclo, se utiliza $this.blur, para que cuando se saque el foco del objeto, se analice si es palíndromo.
    • El contador lo utilizo para generar un nuevo div con id único, combinando el nombre del div como parámetro de entrada más el prefijo msg, de esa manera, al div de parámetro de entrada le podemos agregar otro div con un id único, y podremos tener múltiples instancias del plugin en la página.

    (function($){
        $.fn.extend({
            palindrome:function(div){
                var cont=0;
                this.each(function(){
                  var $this =$(this);
                  cont++;
                  $this.blur(function(){
                    var finaldiv = “#”+div;
                    var msg =“msg” + div + cont;
                    var msg1 =“#” + msg;

                    if ($.trim($this.val()).length>0){

                     var cadena =$this.val().toLowerCase();

                     var palabraArreglo = cadena.split(“”);

                     var palabraArregloInvertido = cadena.split(“”).reverse();

                     var iguales=true;

                     for (i in palabraArreglo){

                       if (palabraArreglo[i]!=palabraArregloInvertido[i]){

                           iguales=false;

                           break;

                           }

                        }

                        $(finaldiv).append(“<div id='” + msg + “‘></div>”);
                     if (iguales==true){

                        $this.css(“background-color”,“lightgreen”);

                        $(msg1).html(“<strong>Palindrome</strong>”)
                               .css(‘font-size’,‘x-small’);
       

                     }else{

                        $this.css(“background-color”,“yellow”);

                        $(msg1).html(“<strong>No es Palindrome</strong>”)
                               .css(‘font-size’,‘x-small’);

                        }

                   }else{

                    $(msg1).remove();

                    $this.css(“background-color”,“white”);

                }

                       });

                  });

            }       

        }); 

    })(jQuery);

    Vemos que agregamos al nuestro div, otro div, al cual le asignamos el id compuesto, y luego según el resultado de el cálculo de palíndromo,  cambiamos el color de fondo y seteamos el mensaje, en el caso de que la caja de texto esté vacía, borramos el mensaje (div) y volvemos con el fondo blanco a la caja de texto.

    Una vez terminado el plugin , lo guarde con el nombre (que es una convención), jquery.palindrome.js

    Entonces, ahora el código de la página que hace uso del Plugin:

    Primero que nada hacemos referencia a los script, siempre primero a la librería jquery y luego a nuestro plugin:

    <script type=”text/javascript” src=”jquery-1.4.4.min.js”></script>

    <script type=”text/javascript” src=”jquery.palindrome.js”></script>

     

    Luego  vamos hacer uso del plugin, a cada caja de texto la extendemos con nuestro plugin, y le pasamos como parámetro el Id del DIV, para lograr el efecto deseado.

     

    <script type=”text/javascript”>

       $(document).ready(function(){

               $(“#palabra”).palindrome(“seccion”);

               $(“#palabra2”).palindrome(“seccion2”);

       });

    </script>

    <div id=”seccion”><input id=”palabra” type=”text”/></div>

    <div id=”seccion2″><input id=”palabra2″ type=”text”/></div>

     

    Ves, no es difícil para nada, a si que a animarse a crear plugins Sonrisa

    Descarga el Demo y el Plugin acá

    image

    Espero que te sirva, es básico, pero por algo se inicia!
    Saludos,
    Gonzalo

    Tutorial Rápido, Utilizar Overlays Icons en tu página con IE9

    Hoy vamos ver como agregar rápidamente Overlays Icons en nuestro sitio web, para eso, como siempre vamos paso a paso.

    image

    Paso 1: Los Iconos:

    Elegí estos íconos para el ejemplo para mostrar los posibles estados por ej. del resultado de un proceso en una página de mi WebSite.

    image

    Paso 2: El Código:

    El código es bastante sencillo y se va a llamar desde los linkls “Error”, “Warning” y “Ok” , obviamente esta función puede ser llamada por el resultado de algún proceso utilizando ajax. Más información acerca de la API la puedes encontrar en:

    http://msdn.microsoft.com/en-us/library/ff976316(VS.85).aspx

    function IconOverlay(icono,tooltip) {

       try {

         if (window.external.msIsSiteMode()) {

           window.external.msSiteModeClearIconOverlay();

           window.external.msSiteModeSetIconOverlay(‘icons/’ + icono + ‘.ico’,  
           tooltip);

         }

       } catch (ex) {

           alert(“Debes tener IE9 Instalado”);

         }

     }

    Como vez, revisamos si el sitio esta anclado , luego limpiamos los íconos, para así setear el ícono y el Tooltip asociado. La llamada la hacemos en el HTML

    <a onclick=”IconOverlay(‘Error’,’Error en la Aplicación’);”
      
    href=”#”>ERROR</a><br
    />

    <a onclick=”IconOverlay(‘Warn’,’Alerta en la Aplicación’);”
       href=”#”>WARNING</a><br
    />
    <a onclick=”IconOverlay(‘Ok’,’Todo OK’);” href=”#”>OK</a>

     

    Y eso es todo amigos!, con esto ya puedes indicarle al usuario una mediante una señal sobre el estado de algún proceso sin que el usuario tenga que restaurar o maximizar la página.

     

    Si estás interesado en tumbnails icos, puedes ver este artículo que hice:

    http://geeks.ms/blogs/gperez/archive/2010/11/16/tutorial-r-225-pido-crea-tus-propios-thumbnails-icons-en-ie9.aspx

     

    Espero que te sirva!
    Saludos,

    Tutorial Rápido, Crea tus propios Thumbnails Icons en IE9

    No sé si el título esta correcto, debió ser “Crear tus Thumbnails Icons para la barra de tareas que sean manejados desde JavasScript e IE9”.
    En este ejemplo vamos a ver como setear estos íconos.desde nuestra página web.

    image

    Figura1 1

    Paso 1: Los Iconos

    image

    Con estos tres íconos vamos a trabajar, como lo indica la figura 1

    Paso 2: El Código:

    Para setear los botones, vamos a preguntar al momento de la carga de la página, primero es necesario consultar si es que estamos navegando la página con IE9, por un Bug en la API, debemos utilizar try catch.
    Agregamos el manejador de eventos, para indicar que cada vez que se haga click en el botón, vamos a llamar a la funciona manejadorBotones, pasando el botón como argumento. En cada botón vamos a setear el ícono y el tooltip que va a tener en la barra.

    window.onload = function () {
    try {
    if (window.external.msIsSiteMode()) { 
      document.addEventListener(‘msthumbnailclick’, manejadorBotones, false);
      btn1 = window.external.msSiteModeAddThumbBarButton(‘barra/OFFLINE.ico’,
                ‘OFFLINE’);
      btn2 = window.external.msSiteModeAddThumbBarButton(‘barra/ONLINEBUSY.ico’,
                ‘ONLINEBUSY’);
      btn3 = window.external.msSiteModeAddThumbBarButton(‘barra/ONLINE.ico’,
                 ‘ONLINE’
    );
      window.external.msSiteModeShowThumbBar();
                       }
    } catch (ex) {
      
       alert("Debes tener IE9 Instalado");
        }
    }

    El manejador de botones, checkea cual fue el botón que fue presionado y vamos a mostrar en un div, un mensaje para que el usuario pueda ver el resultado de la acción. En nuestro caso es algo simple, pero podría ser una llamada Ajax, etc.

    function manejadorBotones(btn) { 
       
    if (btn.buttonID == btn1) {
              mensaje(‘LA APLICACION PASA A ESTADO <b>OFFLINE</b>’);
        }else if (btn.buttonID == btn2) {
              mensaje(‘LA APLICACION PASA A ESTADO <b>ONLINE BUSY</b>’);
        }else if (btn.buttonID == btn3) {
             mensaje(‘LA APLICACION PASA A ESTADO <b>ONLINE ONLINE</b>’);
        }
    }

     

    function mensaje(msg) {

        document.getElementById("msgBarra").innerHTML = msg;

      }

    Paso 4: Anclar la aplicación a la nuestra Barra de Tareas:

    image

    Y ahora, al momento de posicionar el mouse sobre la página anclada:

    image

    Vemos en el cuadro, los botones y vamos a poder realizar acciones a la página desde nuestro Windows 7!

    Es solo una casualidad que por limitación se puedan agrega 7 iconos como máximo y los íconos deben tener un tamaño de 16x16px.

    Bueno, espero que te sirva esta info Sonrisa
    Saludos,
    Gonzalo

    [WebCast]Conozca las ventajas de la integración de Internet Explorer 9 con Windows 7

    image Hola!, te invito (ojalá asistas) a un WebCast sobre la integración de IE9 con Windows 7.

    Internet Explorer 9 representa un gran avance en la integración del Browser con el Sistema Operativo Windows 7, en esta sesión revisaremos las funcionalidades de Jump List, Overlay Icos, Thumbnail Buttons. 

    Además, veremos la nueva plataforma IE9 developer, que nos permitirá medir aún más los aspectos del rendimiento de sitios en la web que en las versiones anteriores del Internet Explorer.

    Ahora, para el registro, solo tienes que ir a :
    https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032464581&EventCategory=4&culture=en-US&CountryCode=US

    Vamos a ver todo esto con el código correspondiente , mucha demo Sonrisa

    Saludos,
    Gonzalo

    WebMatrix Beta 3 Liberado! ( y también un ebook!)

    Como ya algunos conocen WebMatrix, de hecho me correspondió hablar sobre esta herramienta para el pasado TechDay Chile Sonrisa.  He posteado algunos ejemplos utilizando WebMatrix :

    Ahora está libre para descarga la versión Beta 3 del producto, puedes descargarla directamente en el Microsoft Web Site. Esta nueva versión hay nuevas funcionalidades (algunas que estaban anteriormente deshabilitadas)

    image

    Te recomiendo ver está pagina http://blogs.msdn.com/b/webplatform/archive/2010/11/09/webmatrix-beta-3-now-available.aspx en donde hay respuestas para las siguientes preguntas, y que es posible que se nos vengan a la mente:

    • ¿Viene WebMatrix a competir con Visual Studio?
    • ¿Cuándo debe un desarrollador utilizar Visual Studio, y cuando WebMatrix?
    • Microsoft quiere competir con WebMatrix directamente con PHP?
    • ¿Puede WebMatrix trabajar directamente con Nuget (formalmente NuPack)?
    • Hay un montón de tecnologías en WebMatrix. ¿Cules debo usar?
    • ¿Funciona WebMatrix con HTML 5?
    • ¿Funciona WebMatrix con tecnologías Microsoft, además de tecnologías de código abierto?
    • Es compatible WebMatrix con desarrollo para la nubes? Si es así, ¿cómo?

    En esta página encontraras también un libro online y gratuito sobre la programación con Razor:
    Free ebook on ASP.NET Web Pages and ‘Razor’

    Microsoft JQuery Templates, ejemplo práctico

    Ahora que Microsoft JQuery Templates ya es un plugin oficial de JQuery, voy a mostrar un ejemplo sencillo, sobre como ocuparlo.  Este Plugin entrega una facilidad increíble que va a estar incluido en JQuery 1.5.

    Mira este artículo para estar más informado:

    http://stephenwalther.com/blog/archive/2010/10/04/microsoft-templates-included-in-jquery-1-5.aspx

    Entonces , veamos el ejemplo, la idea es generar asíncronamente las siguiente tablas:

     image

    Para esto vamos a ir por parte, primero

    La creación de la base de datos

    Vamos a tener la siguiente definición de tabla:

    image

    Los datos en la tabla son los siguientes:

    image

    Con el correspondiente Contexto en Linq:

    image

    Creación del Servicio Web

    Ya hemos creado este tipo de servicios web, vamos a devoler un objeto JSON, para esto vamos  a crear primero el WebService:

      <WebMethod()> _

        Public Function GetCarreras() As List(Of Carrera)

            Dim contexto As New ModeloDataContext

            Dim lista = From p In contexto.Carreras Order By p.Nombre Ascending

            Return lista.ToList

        End Function

    Llamada al servicio: Pagina demo.htm

    La llamada a este  servicio web, la vamos a hacer mediante JQuery, para esto, utilizamos el código que ya nos es familiar en el cual hacemos:

    1. Llamada a la librería jQuery
    2. Llamada a libería JQuery Templates
    3. Llamada a WebService GetCarreras
    4. Adjuntar mediante la plantilla carTemplate, la colección que retornó el WS (carreras) a el div carreraList

    <script type="text/javascript"

    src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

    <script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script
    >

     

    <script type="text/javascript">

           $(document).ready(function() {

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

               $.ajax({

                 type: "POST",

                 url: "WSMobile.asmx/GetCarreras",

                 data: "{}",

                 contentType: "application/json; charset=utf-8",

                 dataType: "json",

                 success: function (response) {

                   var carreras= response.d;

                   $("#carTemplate").tmpl(carreras).appendTo("#carrerasList");

                 }, 

                   failure: function (msg) {

                       alert(msg);

                   }

     

               });

            });

           });

        

    </script>

    El Div carrerasList no es más que un div normal de la siguiente manera:

    <div id="carrerasList"></div> 

    La plantilla carTemplates, corresponde a el Dom que hará de sección repetitiva por cuantas objetos carrera se obtengan de la colección carreras. Esta plantilla debe estar dentro del tag <script id="carTemplate" type="text/x-jquery-tmpl">

    Plantilla completa

      <script id="carTemplate" type="text/x-jquery-tmpl">

         <table style="width:38%;" border="1px">

            <tr BgColor="#CCFFCC">

                <td style="width:25%;">Carrera</td>

                <td style="width:25%;">Nombre</td>

                <td style="width:25%;">Semestres</td>

                <td style="width:25%;">Foto</td>

            </tr>

            <tr>

                <td>${IdCarrera}</td>

                <td>${Nombre}</td>

     

                <td BgColor="{{if (Semestres >8)}}

                                 #BBCCAA

                            {{else}}

                                  #00EE11

                            {{/if}}">

                ${Semestres}</td>

                <td><img src="img/${Foto}" /></td>

            </tr>

         </table>

         <p>

       </script>

    La forma de la tabla sería:

    image

    Como puedes ver tengo una tabla con cierto formato dentro de la plantilla, esta tabla se repetirá tantas veces como carreras existan en la BD. Es una muy sencilla forma de Iterar y generar DOM Dinámico.

    También incluí los una sentencia IF que es soportada por las plantillas, como puedes ver, realiza el cambio de fondo de la celda en donde está el semestre, si es que la carrera dura más de 8 semestres.

     

    Así de fácil, espero que te sirva:
    Gonzalo

    JQueryMobile & WebMatrix– Formularios para Ingreso de Datos

    Hola, en este post vamos a continuar trabajando sobre el ejemplo de JQueryMobile, para revisar más sobre JQueryMobile, puedes ver:

    http://geeks.ms/blogs/gperez/archive/2010/10/18/jquery-mobile-1-0-alpha-release.aspx

    Y el tutorial en donde veníamos haciendo el ejemplo:
    http://geeks.ms/blogs/gperez/archive/2010/10/22/tutorial-creando-una-app-con-jquery-mobile-webmatrix-y-razor.aspx

    Ahora vamos a realizar la inserción de datos mediante formularios bajo JM. El Resultado final que buscamos en la aplicación es el siguiente:

    image image image

    JQueryMobile nos ofrece en esta versión beta un conjunto de “controles” o mejor dicho, “estilos automáticos de controles” , podemos ver una descripción de estos en la siguiente página:
    http://jquerymobile.com/demos/1.0a1/#docs/forms/index.html

    En nuestro caso los elementos que utilizaremos son:

    image

    Tal como dice la documentación hay controles, como el Slider que en realidad es un elemento Select, lo mismo que en la selección de la facultad.

    Esta página de ingreso la vamos a llamar de la página de carreras agregando un botón en el footer, otra de las características de JQueryMobile, como vemos en la siguiente figura:

    image

    Esto se logra modificando el Footer:

    <div data-role="footer" class="ui-bar" data-theme="b" >

      <h4>www.chalalo.cl </h4>

    <a href="AddCarrera.cshtml" data-role="button" data-icon="plus">Agregar</a>

    </div>

    Ahora veamos el código de la página del Ingreso de Carreras:

    <!DOCTYPE html>

    <html>

       <head>

       <meta charset="utf-8">

       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

       <title>www.chalalo.cl</title>

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

       <link rel="apple-touch-icon" href="img/condor.jpg" />

       <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

       <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

    </head>

    <body>

     <div data-role="page"  data-theme="b">

     <div data-role="header" data-theme="b">

           <h1>Ingresar</h1>

    </div>

       <div data-role="content" >

        <form id="formulario" method="POST" action="validar.cshtml">

       

        <div data-role="fieldcontain">

            <label for="nombre">Nombre:</label>

            <input type="text" name="nombre" id="nombre" value=""  />

           

        

            <select name="selfacultad" id="selfacultad">

               <option value="0">Seleccione Facultad</option>  

            @{    var mibase =Database.Open("DemoBase");

                  var facultades = mibase.Query("SELECT Id,Nombre FROM
                                                Facultades"
    );

            }

     

            @foreach (var facultad in facultades){

                <option value="@facultad.Id">@facultad.Nombre</option>

            }

            </select>

       

            <label for="semestres"Semestres:</label>

            <input type="range" name="semestres" 
             
    id="semestres" value="0" min="1" max="8"  />

       

            <label for="descripcion">Descripcion:</label>

            <textarea cols="40" rows="8"
                  name="descripcion" id="descripcion"></textarea
    >

            

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

                 <option value="0">Inactivo</option>

                 <option value="1">Activo</option>

            </select>

            <input type="submit" value="Guardar Carrera" >  

        </div>   

      </form>

    </div>

       <div data-role="footer" class="ui-bar" data-theme="b" >

                <h4>www.chalalo.cl </h4>

       </div>

     </div>

     </div>

    </body>

    </html>

    Esta página tiene un formulario que su acción es la página validar.cshtml, en donde vamos a validar los datos y si todo esta bien (con una paupérrima validación), vamos a grabar los datos en la base, mostrando los posibles mensajes:

    imageimage

    El código asociado a la página

    @{   var mibase =Database.Open("DemoBase");

          bool ok=false;

        if (IsPost) { 

            var nombre = Request["nombre"];

            var semestres = Request["semestres"]; 

            var descripcion =Request["descripcion"];

            var facultad  = Request["selfacultad"]; 

            var activacion = Request["activacion"]; 

            if (nombre.IsEmpty()||semestres=="0"||descripcion.IsEmpty()
               ||facultad==
    "0"
    ){

                ok=false;

            } else{

                var SqlInsertar = "INSERT INTO carreras (Nombre, 
           Semestres,Descripcion, IdFacultad,Estado) VALUES (@0, @1,@2,@3,@4)"
    ; 

           mibase.Execute(SqlInsertar, nombre, semestres, descripcion,
                          facultad,activacion);
     

                ok=true;  

            }

        }

      

    }

    <!DOCTYPE html>

    <html>

       <head>

       <meta charset="utf-8">

       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

       <title>www.chalalo.cl</title>

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

       <link rel="apple-touch-icon" href="img/condor.jpg" />

       <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

       <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

    </head>

    <body>

      

     <div data-role="page"  data-theme="b" >

     <div data-role="header" data-theme="b">

           <h1>Listado Carreras</h1>

    </div>

       <div data-role="content" >

           @if (ok) {

              <h2>Registro Almacenado</h2>     

               <a href="inicio.cshtml" data-role="button">Aceptar</a>

           }else{

                <h2>Error</h2>

                <h3>Debe ingresar todos los Datos</h3>

               <a href="AddCarrera.cshtml" data-role="button">
                 
    Volver a Ingresar Carrera
              
    </a
    >

           }

       

       </div>

       <div data-role="footer" class="ui-bar" data-theme="b" >

           <h4>www.chalalo.cl </h4>

       </div>

     </div>

    </body>

    </html>

    En este caso, recibimos los parámetros de la página anterior y según el resultado de la validación vamos a mostrar el mensaje de inserción o fallo.

    Veamos el video entonces del resultado (pronto subo uno desde un fono).

    Descarga la aplicación desde acá:

    image