Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

February 2012 - Artículos

Usando ASP.NET Web API con ASP.NET Web Forms

Revisando el siguiente articulo que hablaba sobre el uso de ASP.NET Web API y ASP.NET WebForms, me entusiasmé con escribir este articulo que prácticamente es la traducción de el articulo original.

Últimamente hemos visto varios artículos muy buenos sobre ASP.NET Web API con MVC 4, te recomiendo leerlos para que tengas una idea de lo cool de esto, con los siguientes artículos que están excelentes:

Sin embargo, también se pueden utilizar WebForms junto a esta nueva Web API, Si! WebForms, para que no se sientan abandonados los programadores que utilizan este método.

Para esto vamos a utilizar Visual Studio 2010 con la ASP.NET Web API Beta instalada, (Ojo que si tienes el Preview de VS11, vas a tener que desinstalarla)

Primero que nada, vamos a crear un Nuevo Sitio Web Vacío:

image

Luego vamos a agregar una ASP.NET Folder para la implementación. Acá vamos a agregar una carpeta App_Code :

image

Luego vamos a agregar un nuevo componente ,una clase Web API Controller en la carpeta App_Code, recuerda que el nombre de la clase debe terminar en Controller (y no Controller1 o cualquier otra cosa)

image

La nueva clase ValuesController nos muestra una muy básica implementación de Web API, con soporte para HTTP GET, POST, PUT y DELETE, es decir lo que llamamos verbos.

Nota, si estas con  C#, debes arreglar un bug en el namespace, el cual comienza con un punto.

image

Vamos a modificar el Controlador(que hereda de ApiController) cambiando el retorno del GetValues y GetValue, que nos presenta la plantilla y vamos a agregar una ruta en la tabla de rutas  para utilizarlas en el ruteo de mensajes de la Web API.

Vamos a agregar y abrir un Global.asax del proyecto, y hacemos las siguientes tareas:

  • Primero vamos a agregar System.Web.Routing y System.Web.Http para acceder a los namespace correspondientes.
  • Luego agregamos la entrada de la ruta en la tabla en el método Application_Start
  • Nuestro Global.asax se verá de la siguiente forma:

    image

    Ahora ya estamos listos con el demo, vamos a ejecutar la demo:

    image

    Mi sitio está corriendo en:

    http://localhost:53016/WebApiWebForms/

    No tenemos una página web por defecto, recuerda que estamos ocupando Web API, por lo que vamos a acceder al controlador:

    http://localhost:53016/WebApiWebForms/api/values

    Podemos ver que el response retorna application/json ,que IE nos pide guardar como un archivo, si abrimos este archivo vamos a ver:

    ["Chalalo","Gonzalo"]

    http://localhost:53016/WebApiWebForms/api/values/1

    Ahora el retorno, debido a que se accedió el controlador GetValue es:

    "Chalalo"

    Como ven bastante sencillo, y pueden utilizarlo sin problema desde un proyecto WebForm o de un proyecto MVC.

    Espero que les sirva!
    @chalalo

    Posted: 25/2/2012 0:44 por Gonzalo Perez | con 1 comment(s)
    Archivado en:
    [Tutorial] Uso jQuery Plugin TurnJS, a crear revistas virtuales!

    Hola, acabo de ver un excelente plugin llamado turn.js, que nos permite crear el clásico movimiento de transición de “dar vuelta la hoja” que vimos tantas veces con Flash en algunas publicaciones Online. La URL del website de esta maravilla es

    http://www.turnjs.com/

    y quería compartir un pequeño tutorial de como usarlo, nos podemos entusiasmar con crear una revista Guiño

    Dentro de las características con la que cuenta este plugin tenemos:

  • Usar Aceleración por Hardware
  • Funciona en Tablets y smartphones
  • Muy fácil de manipular
  • Liviano, solo pesa 6K

    Ve este video para ver el resultado final de este tutorial.

    Uso de TurnJS

    Voy a utilizar, como siempre, la herramienta favorita y recomendada para trabajar con HTML5 :WebMatrix, veamos la estructura del demo:

    image

    Veamos el código de demo.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Demo</title>
            <style type="text/css">

                #magazine{

                       width:1200px;

                       height:700px;

                }

                #magazine .turn-page{

                       width:600px;

                       height:700px;

                       background-color:#ccc;

                }

         

              .portada{

                   background-image: url("img/fondoPortada.png");

               }

           

               .contraPortada {

                   background-image: url("img/fondoContraPortada.png");

               }

               
              
    #titulo{

                      font-size: 34px;

                      margin: 180px 0px;

                      text-shadow: 2px 1px 1px white;

                      color:#4477b9;

                      font-family: Verdana;

                      text-align:center;

              }

           

              .interior{

                 background:top left url(img/textura.jpg);

              }

           

             .texto {

                 font-size: 24px;

                 margin: 30px 0px;

                 font-family: Verdana;

                 color:black;

              }

           

       </style>

       </head>

        <body>

            <div id='magazine'>

               <div class="portada">

                    <div id="titulo">Demo turn.js by @chalalo</div>

                </div>

                <div class="interior" >

                     <div class="texto">

                        Este es un texto de la pagina 2

                     </div>

                </div>

                <div class="interior">

                    <div id="foto">

                       <h1> Se busca:</h1>

                        <img src="img/yo2.png" alt="yo">

                    </div>

               </div>

               <div class="contraPortada">

                     <div id="titulo">
                       
    Fin de la Revisa :P
                   
    </div>
               </
    div
    >

            </div>

        </body>

    </html>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>

    <script src="js/turn.js"></script>

    <script>

        $(document).ready(function(){

            $('#magazine').turn();

        });

    </script>

    Por simplicidad del demo escribí los css en la misma página. Podemos ver en los estilos que tenemos portada, contraportada (que es la tapa de atrás de nuestra revista), vamos a agregar un fondo ( no soy diseñador, lo hice con el powerpoint), pero bueno, no se ve tan mal), y luego una textura de fondo para las páginas interiores.

    Puedes notar que los divs que entran dentro de “magazine” corresponden a las páginas propiamente tal, dentro de cada uno de estos divs, vas a colocar tu contenido, en mi caso solo definí 4 paginas, 1: portada, 2: pagina interior, 3: pagina interior 4: tapa posterior

    Luego debemos agregar la librería jQuery y finalmente, al div principal, que es el que contiene los “div páginas”, se aplicamos el plugin.

    Como referencia rápida:

    Constructor:

    $(‘selector’).turn([opciones]);

    Parámetros:

    • width:tipo numérico, por defecto es el ancho del objeto seleccionado como contenedor de paginas.
    • height:tipo numérico, por defecto es el alto del objeto seleccionado como contenedor de paginas.
    • page: tipo numérico, página por defecto, (1)
    • duration:tipo numérico, por defecto 600
    • acceleration:tipo boolean, por defecto está en true

    Puedes ver una completa guía de propiedades acá:
    https://github.com/blasten/turn.js/wiki/Reference

    Espero que te sirva
    @chalalo

  • PD: A mi no me funcionó el turn.min.js que está disponible para descarga, obtuve la librería que ocupa el WebSite del plugin y funcionó sin problemas.

    Grabación, Slides y material del WebCast “Desarrollo de aplicaciones con HTML5”

    Hola!, les dejo el material que utilicé con para el WebCast sobre htm5 de ayer, si bien estuvo murphy presente, vimos varios temas interesantes.

    Descarga el material:
    https://skydrive.live.com/redir.aspx?cid=053a660afa3473b3&resid=53A660AFA3473B3!1801&parid=53A660AFA3473B3!245&authkey=!AP5-9H1AWz_rZBc

    Puedes ver el video desde la misma URL en la que ingresaste para ver el webcast, es decir en:
    https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032503684&Culture=es-AR

    Links relacionados con el webcast de html5

    Saludos!
    @chalalo

    Posted: 16/2/2012 22:48 por Gonzalo Perez | con no comments
    Archivado en:
    [Tips] Ocupar CSS3 Font-Face con Webmatrix (IIS7 Express)

    Los browsers permiten el uso de una determinada lista de fuentes, las que deben estar instaladas en el cliente, cualquier otra fuente que estemos ocupando debería estar también instalada en el cliente, de otro modo, se reemplazará por la fuente por defecto. Muchas veces ocupamos imágenes como letras, pero esto es terrible para los contenidos.

    Existe una forma sencilla de poder utilizar cualquier fuente para nuestras páginas web, solo basta con que se referencie la ubicación del archivo de fuentes, un ejemplo puede ser:

    <style type="text/css">

           

           @font-face

           {

                font-family: 'chalalo';

                src: url('/Dearest-webfont.woff');

                font-weight: normal;

                font-style: normal;

           }

     

        

          .demo {

                font:20pt chalalo,sans-serif;

                color:blue;

                background-color:#ebdada;

            }

           

            </style>

    Definimos una clase con la fuente que especifica el tamaño y el nombre que definimos anteriormente en la declaración @font-face. Luego definimos un elemento con ese estilo:

    <body>

       <p class="demo">Esto se verá con una nueva letra</p>    

    </body>

    Y el resultado:

    image

    Cabe destacar que IE9 es totalmente compatible con los archivos de fuente woff, pero para asegurar compatibilidad con otros navegadores (y navegadores más antiguos)

    @font-face {

    font-family: 'chalalo';

    src: url('fuentes/Dearest-webfont.eot');

    src: url('fuentes/Dearest-webfont.eot?#iefix') format('embedded-opentype'),

    url('fuentes/Dearest-webfont.woff') format('woff'),

    url('fuentes/Dearest-webfont.ttf') format('truetype'),

    url('fuentes/Dearest-webfont.svg#DearestRegular') format('svg');

    font-weight: normal;

    font-style: normal;

    }

    Teniendo en la carpeta fuentes todos los archivos de fuentes soportados por los distintos navegadores:

    image

    Ahora, cuando lo probamos con Webmatrix utilizando IIS 7 Express es posible que veamos el siguiente error:

    image

    image

    Como vez un error 404 que no encuentra el archivo woff, sin embargo este SI SE ENCUENTRA EN LA RUTA!, entonces no se muestra correctamente la fuente (se reemplaza por la predeterminada)

    La solución es muy simple, y se debe a que no está definido el mimeType dentro del archivo de configuración de IIS7 Express, recordemos que existe una configuración por cada usuario, así que voy al archivo:

    C:\Users\<usuario>\Documents\IISExpress\config\applicationhost.config

    Y luego agregamos el mimeMap:

    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />

    Y Listo!, funciona Sonrisa.

    Bueno, eso no más, el tip para que no te rompas la cabeza buscando por que no funcionan lo woff cuando lo pruebas con Webmatrix.

    Saludos!
    @chalalo

    Posted: 15/2/2012 3:34 por Gonzalo Perez | con no comments
    Archivado en: ,,
    [Tips] ASP.NET 4.0 ValidateRequestMode y TinyMCE

    Hola que tal?, este es un tip corto, acerca de las validaciones sobre los campos de texto, específicamente este ejemplo va enfocado a las cajas que permiten el ingreso de HTML, por ejemplo:

    image

    En la descripción podríamos agregar un texto con HTML, en este ejemplo agregamos developer entre las etiquetas <strong>, al presionar Enviar ASP.NET detecta el posiblemente peligroso post y por seguridad nos envía la excepción:

    image

    Típicamente lo que hacemos es agregar en la directivas de página la opción:

    ValidateRequest="false"

    que básicamente deshabilita la validación del request, pero acá está el problema, y que pasa con nombre u otros campos que si necesitan validación?, con ValidateRequest=”false” estamos diciendo “no valides ningún dato de formulario en el post”, no muy bueno verdad?

    Ahora  bien, en ASP.NET 4 esto se resuelve de la siguiente manera:

    <asp:TextBox ID="txDescripcion" ValidateRequestMode="Disabled" runat="server" Height="104px" TextMode="MultiLine"  Width="224px"></asp:TextBox>

    Ahora solo en el campo que no queremos que exista una validación por un post sospechoso de XSS, agregaremos ValidateRequestMode="Disabled" y listo! , ahora podemos setear nuevamente el ValidateRequest en true o simplemente eliminar la opción ya que es true por default.

    Para hacerlo un poco más entretenido, podemos utilizar TinyMCE para agregar fácilmente un Editor Javascript WYSIWYG, para saber más sobre TinyMCE puedes ir a su website:

    http://www.tinymce.com/index.php

    La instalación en ASP.NET es muy sencilla, primero en el proyecto pinchas con botón derecho y vas a la opción de administrar los paquetes NuGet:

    image

    Luego elijes TinyMCE:

    image

    Vas a ver que en el archivo packages.config va a aparecer como instalado:

    <packages>

      <package id="TinyMCE" version="3.4.5" />

    </packages>

    Lo que hizo fue descargar el plugin en la carpeta Script:

    image

    Luego para incluirla solamente agregas los Script y en el evento Ready le asignas al textarea el plugin:

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

    <script src="Scripts/tinymce.3.4.5/tiny_mce.js" type="text/javascript"></script>

      <script type="text/javascript">

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

                tinymce.init({ mode:"textareas"});

            });

    </script>

    image

    Y listo!mucho mejor, como te dije puedes ir a la documentación de TinyMCE para ver las múltiples configuraciones que se pueden realizar con este excelente plugin

    Espero que te sea de utilidad,

    @chalalo

    Posted: 12/2/2012 6:12 por Gonzalo Perez | con no comments
    Archivado en:
    Invitación a Conferencia HTML5- 14 de Febrero

    Hola te quiero invitar a una conferencia que voy a dar sobre HTML5 Sonrisa, es el día de los enamorados de Corazón rojo HTML5

    HTML5 es la especificación más grande y poderosa HTML que ha producido la W3C. Sus raíces provienen de una propuesta para ampliar HTML4 para hacer más fácil para los desarrolladores Web crear aplicaciones Web. Con más navegadores que dan soporte a HTML5, ECMAScript 5 y otros estándares Web, los desarrolladores ahora tienen una plataforma Web fuerte que pueden utilizar para crear una nueva clase de aplicación que sea más potente e interactiva que nunca. ¿Qué hay en HTML5 que nos permite tomar nuestras aplicaciones al siguiente nivel?

    Regístrate!

    https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032503684&Culture=es-AR

    Fecha :
    Martes 14 de Febrero - 04:00 PM Colombia
    Martes 14 de Febrero -06:00 PM Chile

    Vamos a revisar varias demos y veremos como resolver algunos problemas de compatibilidad.

    Si tienes algunas dudas previas sobre HTML5, puedes participar enviándome un msg por twitter, de esa manera puedo contestarte en día del evento (o si quieres posteas acá la consulta).

    Nos vemos!!
    @chalalo

    Posted: 10/2/2012 5:39 por Gonzalo Perez | con no comments
    Archivado en: ,