[Evento] HTML Tour 2014

En Plain Concepts estamos que no paramos.

No ha terminado el Wave Tour y ya hemos empezado un año más el HTML Tour 2014

En las siete sesiones preparadas veremos cuáles son las ventajas de HTML 5, javascript y en petí comité veremos qué es lo que hemos estado haciendo en Plain Concepts, cómo hemos aprovechado las ventajas de esta tecnología y veremos el resultado de los proyectos reales que están en producción.

Sinceramente, alucino con las cosas que son capaces de hacer los compañeros, con los que he tenido el privilegio de trabajar.

Aquí tenéis la agenda. En Sevilla estarán el día 24 de Abril, podéis registraros aquí.

Y los fieras que nos darán las sesiones:

ALFREDO FERNÁNDEZ

Alfredo ha estado desarrollando durante unos 6 años, utilizando tecnologías Microsoft y en gran medida centrado en tecnologías web y patrones de desarrollo, está muy interesado en Asp.Net MVC y HTML5, pero también tiene una amplia experiencia en WPF. Es uno de los coordinadores de SecondNug, uno de los principales grupos de usuarios. NET de España y colabora con diversas iniciativas para crear eventos de alta calidad en todo el país.

DAVID GARCÍA

David García uno de los especialistas del equipo Web de Plain Concepts. Ha participado en proyectos como La Cura y el Training Center de la web de la película Prometheus (proyecto ganador de un FWA), proyecto para el cual creó, junto a otros compañeros, la librería WaveJS, la cual nos permite pintar 3D en canvas 2D.

LUIS MIGUEL JIMÉNEZ

Luis Miguel Jiménez lleva varios años trabajando como diseñador gráfico y gracias al avance de las tecnologías de desarrollo web (HTML5 y CSS3) su carrera da un giro hacia el diseño y la maquetación web donde descubre un nuevo mundo de posibilidades a las que poder aplicar los conocimientos en diseño.

MANUEL MARTÍNEZ

Manuel Martínez es un apasionado de las tecnologías web, empezó como desarrollador de PHP y actualmente pertenece al equipo web de Plain Concepts, donde trabaja habitualmente con ASP.NET MVC y JavaScript.

QUIQUE MARTÍNEZ

Quique Martínez actualmente trabaja en Plain Concepts como Senior Software Developer Engineer. Es un apasionado de la #ArquitecturaDeSoftware y del #CloudComputing, en concreto #WindowsAzure.En esta última ha sido nombrado #MicrosoftMVP y además pertenece a los #AzureInsiders.

Usar la API de SkyDrive para Javascript en una página local

Hola a todos, hoy voy a hablaros sobre las API Live que tiene disponible Microsoft y que podemos usar desde nuestras aplicaciones c#, JavaScript, Objective-C y Java, pero además, también está disponible una versión Rest para todo lo que no entre en estos lenguajes.

Vamos a centrarnos en la API para SkyDrive y sobre cómo podemos configurarla para usarla en una web que estemos desarrollando en una máquina local.

El único requisito que necesitamos es definirnos una aplicación en el “Live Connect Developer Center“. Es necesario crearnos una nueva App en la sección “My Apps” para obtener un client Id que vamos a necesitar para poder usar la API.

Si accedemos a la sección “SDK Interactivo” podemos irnos al primer ejemplo de la API de Sky Drive del  SDK Interactivo  y ver el código. El código que vamos a ver es código JavaScript, ya que no hay otra forma de verlo de manera interactiva en la web, pero en la documentación sí podemos ver cómo usarla desde C#, Objective-C, Rest y Java.

WL.init({ client_id: clientId, redirect_uri: redirectUri });

WL.login({ "scope": "wl.skydrive" }).then(
    function(response) {
        openFromSkyDrive();
    },
    function(response) {
        log("Failed to authenticate.");
    }
);

function openFromSkyDrive() {
    WL.fileDialog({
        mode: 'open',
        select: 'single'
    }).then(
        function(response) {
            log("The following file is being downloaded:");
            log("");

<pre><code>        var files = response.data.files;
        for (var i = 0; i &amp;lt; files.length; i++) {
            var file = files[i];
            log(file.name);
            WL.download({ &amp;quot;path&amp;quot;: file.id });
        }
    },
    function(errorResponse) {
        log(&amp;quot;WL.fileDialog errorResponse = &amp;quot; + JSON.stringify(errorResponse));
    }
);
</code></pre>

}

function log(message) {
    var child = document.createTextNode(message);
    var parent = document.getElementById('JsOutputDiv') || document.body;
    parent.appendChild(child);
    parent.appendChild(document.createElement(&quot;br&quot;));
}

Si ejecutamos este código se nos abrirá un selector de archivos que lo que nos va a permitir es seleccionar un archivo que tengamos en nuestro directorio de SkyDrive, logarnos si no lo estamos ya, y descargarlo. Este es sólo uno de los ejemplos que podemos probar, hay un montón en los que podemos ver cómo usarla para acceder al contenido, cómo recorrer los directorios, etc.

Sin embargo, y es el problema que quiero resolver y el motivo de este post, si usamos la librería JavaScript en una página web que estamos desarrollando, necesitamos hacer un “truco” para poder verlo funcionar en local.

Si os fijáis bien, en la primera línea de código:

WL.init({ client_id: clientId, redirect_uri: redirectUri });

Vemos, que primero tenemos que inicializar “algo” para poder usarla. Para configurarlo adecuadamente necesitaremos el “client id” que comentaba al principio del post y una “redirect_uri“. Pues bien, esa uri es un dominio al que se van a redireccionar las peticiones de la API, que necesitamos configurar en el panel de Live Connect:

Esa url debe ser de un dominio público y accesible por la api. Sin embargo, como estamos en desarrollo, nuestra web no está todavía disponible ni la tenemos desplegada en un servidor.

¿Qué podemos hacer?

La solución es bien sencilla, tan sólo tenemos que modificar nuestro etchosts para que el dominio que configuremos en el panel de control de Live Connect sea nuestra propia máquina. De esta manera la API funcionará perfectamente y podremos hacer nuestras pruebas en local antes de publicar nuestra aplicación en un servidor. Por ejemplo podemos definir en nuestro etc/host el dominio:  midominiodeprueba.com 127.0.0.1

Y en la página de configuración de la aplicación pondremos:

A partir de este momento ya podemos usar la API sin tener que estar publicando en un servidor nuestra aplicación y haciendo pruebas en él.

Una vez que tengamos nuestra web lista para desplegar, sólo hay que modificar esos valores para que todo vaya como la seda :).

Juan María Laó Ramos

Mejoras del editor de CSS en Visual Studio

Este es el séptimo de una serie de post sobre ASP.NET 4.5

<

div>

<

div>

Las próximas releases de .NET y Visual Studio incluyen un montón de nuevas características. Con ASP.NET 4.5 veremos mejoras realmente increíbles tanto en Web Forms como en MVC, así como en el núcleo de ASP.NET en el que se sustentan ambas tecnologías.

En el post de hoy veremos algunas de las mejoras que traerá Visual Studio que hacen del trabajo con CSS y CSS3 se más sencillo en proyectos ASP.NET

Nuevo sitio ASP.NET

Por fin han terminado la web de ASP.NET los chicos de Microsoft

La cuarta preview the IE10

Se ha publicado una nueva preview de IE10 para la Windows Developer Preview y se puede descargar aquí. Esta nueva preview de IE10 incluye un mayor soporte de las tecnologías de HTML5, permitiendo la creación de aplicaciones más ricas aún. La aceleración hardware en SVG, transformaciones CSS3 y animaciones ofrece un renderizado más rápido que en otros navegadores, podéis verlo en este video:

See some of the new HTML5 capabilities, performance improvements in IE10.

Con esta cuarta preview se puede empezar a trabajar con las últimas novedades de HTML5. Vamos a ver algunas de ellas.

Por dónde empezar con SVG III

Continuamos la serie sobre cómo trabajar con SVG. Si aún no lo habéis hecho aquí podéis leer la primera parte y aquí la segunda.

En el post de hoy veremos cómo hacer que las imágenes no se deformen, cómo trabajar con el DOM de la página y veremos algunas herramientas que nos pueden resultar útiles a la hora de trabajar con gráficos SVG.

Por dónde empezar con SVG II

Continuamos la serie sobre cómo trabajar con SVG. Si aún no lo habéis hecho aquí podéis leer la primera parte.

En el post de hoy veremos algunos errores que suelen ocurrir debido a las similitudes entre SVG y HTML, de manera que no perdamos mucho tiempo intentando averiguar qué es lo que está pasando.

Extensión de Visual Studio: Web Essentials de Mads Kristensen

Visual Studio 2010 es muy extensible y ha permitido a mucha gente del equipo a que prueben nuevas caracteríticas para del desarrollo web sin tener que recompilar Visual Studio. Una de esas extensiones es “Web Essentials” que ha hecho Mads Kristensen. Mads es el que se encarga de las herramientas de HTML5 y CSS3 en nuestro equipo.

Por dónde empezar con SVG

Este es el primer post de una serie sobre el formato SVG. En este post veremos cuales son las bondades de este formato. En próximos post veremos cómo usarlo en nuestras aplicaciones.

El formato SVG (Scalable Vector Graphics) para gráficos web ofrece la mejor calidad en un gran abanico de dispositivos, más aún que gráficos basados en bitmaps. Además, SVG ya soporta temas de accesibilidad lo que le convierte en la mejor opción para gráficos interactivos.

El uso de SVG continúa creciendo en la web. En la SVG Open 2011 se vieron muchos desarollos que estaban usando SVG en una gran variedad de aplicaciones reales. Estas aplicaciones iban desde gráficas con datos, dibujos técnicos, juegos, visualización de datos geográficos y un largo etcétera.

Aunque la especificación de SVG tiene ya casi una decada, no era posible usarlo directamente como un elemento en HTML hasta que ha aparecido HTML 5. Ha medida que los navegadores dan soporte a SVG como parte de HTML 5, la próxima generación de aplicacioens web podrán usarlo sin necesidad de ningún timpo de plugin. De hecho, la facilidad de integración de SVG  con HTML, CSS, el DOM y JavaScript lo convierte en la elección natural para crear experiencias interactivas adaptables. SVG ES la tecnología de gráficos vectoriales elegida para crear aplicaciones de estilo Metro para Windows 8 usando HTML.

A lo largo de una serie de post veremos algunas buenas prácticas a la hora de usar SVG en nuestros sitios con HTML 5 para asegurarnos del buen uso de esta tecnología.

Creación de páginas centradas en Texto en IE10

Internet Explorer 10 incluye dos nuevas características de CSS3 diseñadas para hacer más fácil a los programadores crear aplicaciones y páginas ricas centradas en texto. Las Regiones CSS3 ofrecen un mecanismo para trabajar con contenidos en varias áreas no contiguas. Además la Hyphenation CSS3 ofrece a los desarrolladores una forma fácil de separar el texto en sílabas en un amplio rango de lenguajes.

Vamos a ver qué nos ofrecen estas características de CSS3 en más detalle.