Revisión de por que debería interesarme por WebMatrix

image

Hola, este es un post que quería escribir hace bastante tiempo, pero el ajetreo del día a día en estos últimos meses ha sido intenso. Pero bueno, quiero hablar un poco de WebMatrix y el por que deberíamos considerarlo como una herramienta seria al momento de desarrollar.

Veamos un poco las características de WebMatrix 2 que lo destacan y que hacen que sea más que solo un pequeño editor de código (como algunos piensan).

Totalmente Gratuito

Primero que nada WebMatrix es totalmente gratis, no tienes que pagar nada por él, tampoco debes pagar cuando liberas algo a producción, no hay versiones de prueba, ni límites en el periodo de uso o cualquier desembolso de tu parte. Lo puedes decargar desde www.asp.net/webmatrix con el universal installer, así de fácil.

Soporte HTML, CSS y Javascript

image

Mucho más que un simple editor de texto vas a tener una completo soporte de intellisense, outlining de código, validación de sintaxis, formateo del mismo. También tenemos un editor JavaScript con soporte para el autoformato e IntelliSense.

image

En el caso que quieras activar la autocompletación de código jquery puedes ver este post http://geeks.ms/blogs/gperez/archive/2011/11/11/tips-activar-autocompletaci-243-n-de-c-243-digo-jquery-en-webmatrix-beta-2.aspx

Además el editor CSS tiene mejores facilidades para su desarrollo,  por ejemplo tenemos la ayuda cuando vamos a seleccionar un color:

image

Puedes ver estos videos relacionados con estas características de WebMatrix

  • How to use the Color Picker in WebMatrix
  • How to use LESS CSS inside of WebMatrix
  • How to use the Sass editor inside of WebMatrix
  • Soporte para varios lenguajes

    Podemos seleccionar una amplia gama de lenguajes,  programas en PHP? Perfecto!, lo puedes utilizar , HTML? CSS? JavaScript, JSON, CoffeScript, tienes una completa lista para seleccionar.

    Un punto importante son las ASP.NET Web Pages, que no es lo mismo que las ASP.NET Web Forms, las primeras se desarrollan con una sintáxis llamada Razor, la cual es muy cómoda de utilizar, puedes ver más sobre razor en:
    http://www.asp.net/web-pages/overview/whats-new/top-features-in-web-pages-2

    image

    Por ejemplo, si necesitas utilizar PHP y piensa que ahora necesitas instalar Apache, el servidor IIS Express que viene con WebMatrix de puede ayudar, en la configuración del sitio puedes  seleccionar la opción “Habilitar PHP” y de inmediato, si no lo tienes ya instalado, WebMatrix va a instalar por ti PHP para IIS Express

    image

    Bases  de datos

    Sin duda, esto es algo que destaca a WebMatrix de otros “editores”, ya que WebMatrix tiene la capacidad de conectarse a SQL Server, MySQL y también agregar Bases de Datos SQL Server CE (Base de datos basada en archivos que no necesita un motor corriendo)

    image

    Obviamente luego tendrás que crear las tablas, y en este sentido WebMatrix nos provee de una interfaz limpia y simplificada para agregarlas junto a la definición de campos.

    image

    Puedes ver que también podemos crear consulta sobre los datos y tenemos la posibilidad de migrar desde SQL Server CE a SQL Server.

    image

    También tenemos Mejoras visuales en el manejador de datos, cuando copiamos los datos, quedan tabulados en el cortapapeles de manera de que al pegarlos en Excel, se respete la organización de los mismos (disculpen los datos, puse cualquier cosa )

    En Webmatrix, copiamos….

    image

    y Pegamos en Excel!

    image

     

    Informes de Rendimiento

    Una de las tareas importantes que tenemos hoy en día es de asegurarnos que nuestro sitio Web tenga una “Calidad” Aceptable , pero esta calidad se puede descomponer en varias ítems, como lo son optimización de tiempo de carga, mejoramiento de tags , meta y características de la página para los SEO, eliminar fallas como links rotos , etc.  WebMAtrix te provee una muy buena herramienta para automatizar en parte este análisis, y te sugiere posibles soluciones, puedes ir guardando estos informes, y exportarlos para enviárselo a tus clientes.

    image

    Extendiendo WebMatrix

    Una de las características interesantes de WebMatrix es la posibilidad de incorporar nuevas funcionalidades, y esto lo podemos hacer mediante la Galería de Extensiones, en donde vamos a tener variadas herramientas muy útiles en el desarrollo:

    image

    Hoy en día, como  ya lo sabrás si tu sitio no soporta una correcta visualización en dispositivos móviles, estás en problemas, cada vez son más los usuarios que tienen smartphones en los cuales navegan tanto o más tiempo que en un laptop. Entonces se hace necesario el testear las páginas en ambientes algo más parecidos al los reales. WebMatrix te permite instalar emuladores de IPad , IPhone y Windows Phone (bueno,los de IOS no son lo mismo que el emulador que viene en XCode, pero de todas maneras nos sirve).

    Para tener el Emulador de Windows Phone incorporado con Webmatrix debes tener el SDK De Windows Phone instalado que puedes descargar desde acá:
    https://dev.windowsphone.com/en-us/downloadsdk

    Y puedes ver además una excelente variación de Tema de Jquerymobile, para dar un aspecto METRO a tus web apps cuando se naveguen desde un Windows Phone, échale un vistazo acá:

    http://geeks.ms/blogs/gperez/archive/2012/05/16/listview-de-jquerymobile-metro-theme-con-webmatrix.aspx

    y por ejemplo si vamos a utilizar el emulador de IPhone, tenemos la opción de elegirlo dentro de la opción ejecutar de la barra de herramientas ( y de paso vemos que podemos ejecutar además nuestras páginas en los browsers que tengamos instalado)

    image

    Emulador IPhone Corriendo:

    image

    Otra herramienta útil es el minificador y optimizador de JavaScript ,CSS e imágenes:

    image

    Una vez instalado podemos seleccionar un archivo de javascript y seleccionar Minify, con esto automáticamente nuestro script será optimizado.

    image

    Verás que ahora hay dos archivos, el normal y el minificado Sonrisa

    image

    Y como puedes ver el nivel de compresión es más que aceptable.

    image

    Además puedo obtener el Base64 ,con la opción Copy DATA URI ,de la imagen o también optimizarla

    image

     

    Sitio a partir de Galería

    Si lo que necesitas es instalar un sitio administrable como WordPress, Umbraco o Joomla entre otros, WebMatrix te permite hacerlo fácilmente, resolviendo dependencias e integrando opciones al barra de menú según el CMS que  se instale , un buen ejemplo de esto es la integración que se logra con Umbraco.

    En el caso de WordPress , existe intellisense de las funciones propias de la API de WordPress Sonrisa

    image

    Por ejemplo si seleccionamos UMBRACO , vamos a tener que decidir si vamos a utilizar SQL Server CE o SQL Server, luego aceptamos el CLUF y listo!

    image

    En el Caso de WordPress que trabaja bajo MySQL y PHP, me va a pedir que instale las dependencias, la descarga e instalación la hace WebMatrix por mi Sonrisa

    image

    Publicar el sitio web

    Por último, cuando queremos publicar un sitio, tenemos distintas opciones, como importar el perfil de publicación (si es que ya tenemos uno)

    image

    Por otro lado podemos especificar la configuración, y podemos utilizar Web Deploy o FTP como protocolo:

    image

    Y si andamos buscando un Hosting, también nos va sugerir un listado de hosting con soporte para las ASP.NET Web Pages, puedes ver acá la lista que se despliega:

    http://www.microsoft.com/web/Hosting/Home?spotlight=true&notify=true&technology=ASPNET4.0%3bMSSQL%3b&appId=&language=es-ES

    Como ves, muchas razones para ocupar WebMatrix, en mi caso, ya es una herramienta fundamental de desarrollo Sonrisa

    Nos vemos!!
    @chalalo

    [Evento] Puerto Montt los pasajes,Nos vemos el Sur.

    Así es, estoy invitado a Inacap de Puerto Montt a dar las siguientes charlas en el ámbito de la semana de la Carrera de Ingeniería Informática.

    Fecha 5 de Noviembre

    14:00 Charla de Desarrollo para MVC y ASP.NET con NoSQL
    En esta sesión revisaremos técnicas y patrones para la creación de sitios Web dinámicos en ASP.NET, utilizando los modelos de WebForms y el nuevo framework MVC 4 en la construcción de aplicaciones que adoptan las mejores prácticas de la industria. Adicionalmente, mostraremos de que forma podemos incluir almacenamiento NoSQL -como MongoDB para dar aun más agilidad y performance  nuestras aplicaciones.

    15:45 Como iniciarme en el desarrollo para Apps Móviles,  Android, Windows Phone 7 e IPhone

    En esta charla veremos  las características fundamentales en el desarrollo para distintas plataformas móviles, revisaremos los requerimientos para comenzar a programar para Android, IPhone y Windows Phone y como subir las apps a los distintos markets.

    image

    Realmente estoy muy agradecido de la organización quien amablemente me invitó y espero que podamos conversar un buen rato sobre tecnología y desarrollo.

    Saludos!
    @chalalo

    [WP7] Algunas utilidades para el desarrollo de tus Apps

    Hola, últimamente he estado involucrado en desarrollos para IOS, Android y Windows Phone, y realmente esta última plataforma me sorprende por la facilidad que nos brinda a los desarrolladores para crear aplicaciones.  Quiero comentar algunas herramientas que me sirvieron mucho a la hora de desarrollar y mostrar la app.

    image

    Windows Phone 7 Emulator Skin Switcher

    Esto quizás no es muy importante, pero me gusta ver la app. tal cual quedaría en el dispositivo, para esto necesitaba cambiar el skin del emulador, y para eso nada mejor que Windows Phone 7 Emulator Skin Switcher,  bastante cool!

    image

    Por ejemplo, selecciono el Nokia Lumia 800 White y al momento de lanzar el emulador:

    image

    Silverlight Toolkit

    Es una excelente suite de controles, seguramente los controles por defecto no serán suficientes para ti, es por eso que puedes elegir de esta librería, liberada hace poco, la versión de septiembre 2012 viene con las siguientes novedades:

    • Nuevo Control CustomMessageBox
    • Nuevo control Rating
    • Nuevos efectos de transiciones
    • Mejoras en el uso de los templates
    • Mejor suporte Nuget
    • 24 Bugs arreglados

    Descárgalo desde acá http://silverlight.codeplex.com/releases/view/94435

    image

     

    Windows Phone Power Tools

    La aplicación que desarrollé utiliza el almacenamiento aislado del teléfono para guardar el cache de las noticias de la app, haciendo debug necesita acceder a ese almacenamiento entre otras cosas, como desinstalar la app del emulador, navegar entre los archivos etc. En android tenia la herramienta en el SDK, acá busqué y encontré esta excelente aplicación que solucionó el problema:image

    Agrego la tabla que nos permite ver las diferencias y ventajas de utilizar esta herramienta en comparación con lo que provee el SDK

    image

    Descárgalo de acá:
    http://wptools.codeplex.com/

    Siempre optimizar los PNG – PNGGaunlet

    image

    Siempre debemos optimizar las imágenes que agregamos como recurso dentro de nuestra app, si tenemos muchas imágenes el peso de app puede aumentar bastante, imagina 10 imágenes png a 400k, ya tenemos 4mb que puede ser excesivo. Esta aplicación es bastante buena, necesita el Fx4 y combina varias técnicas para la compresión de los png

    PNGGauntlet Screenshot

    Descárgala acá:
    http://pnggauntlet.com/

    Coding4Fun Windows Phone Toolkit

    Esta Suite de controles, nos permiten extender más las posibilidades de nuestras aplicaciones, indispensable si quieres utilizar un “DateTimePicker” o notificaciones entre otros, la lista de controles que existen es la siguiente:

    image

    Te dejo acá un link de blog de Javier Suarez mostrando la mayoría de los controles (incluye video)

    http://javiersuarezruiz.wordpress.com/2012/05/01/windows-phone-intro

    Iconos y recursos

    Hay una enorme cantidad de recursos sobre íconos e imágenes para windows phone, está página será de mucha ayuda al momento de buscar templates e íconos.

    http://www.windowsphonegeek.com/Resources/UX

    image

    Eso!, espero que te sirva!

    [Tips] CSS3–Cambiar el Color del texto seleccionado

    Hola, este es un tip bastante simple y que nos puede ayudar a mejorar el look de nuestras páginas, y es que CSS3 nos permite cambiar el color por defecto del texto seleccionado de una manera muy sencilla.

    Actualmente Firefox, Chrome, Opera, Safari y IE10 soportan esta funcionalidad, obviamente como sabemos , si la versión del browser no soporta esta característica, simplemente la ignora, la forma básica es la siguiente:

    <style type="text/css">
       
    ::selection {
     
            background:#00ff21;
              color:#990000;
         }
        ::-webkit-selection {
              background:#00ff21;
              color:#990000;
         }

         ::-moz-selection {

              background:#00ff21;

              color:#990000;

         }

    </style>

    image

    Como te puedes dar cuenta podemos cambiar el background y el color de la letra dentro del estilo.

    Sin embargo también podemos definir por selector el color que queremos al seleccionar un texto:

    <style type="text/css">
                p.verde::selection {
                    background:#3e9d16;
                    color:#fff;
                }
     
                p.verde::-moz-selection {
                    background:#c2660d;
                    color:#fff;
                }
                
                p.verde::-webkit-selection {
                    background:#3e9d16;
                    color:#fff;
                }
                
                p.negro::selection {
                    background:#000;
                    color:#fff;
                }
     
                p.negro::-moz-selection {
                    background:#000;
                    color:#fff;
                }
     
                p.negro::-webkit-selection {
                    background:#000;
                    color:#fff;
                }
       </style>

    <p class="verde">

        
    La primera parte se imprimió en Madrid, en casa de Juan de la Cuesta,

         a finales de 1604. 
    </p>

    <p class="negro">
       Salió a la venta en enero de 1605 con numerosas erratas, por culpa de la celeridad
    que imponía el contrato de edición.
     </p>

    image

    Como vez, mega fácil, así que necesitas personalizar hasta el texto seleccionado aplicando un color distinto al por defecto, ya sabes que existe un estilo para ello.

    Saludos!

    @chalalo.