[#EVENT] Event materials: building HTML5 apps in AZURE with VS Lightswitch

image

Hello

2 days ago, thanks to the friends of MSDN Latam, I was lucky enough to give a webcast: How to build HTML5 applications with Visual Studio Lightswitch . Lightswitch product has matured enough and in the version included in VS2013 is really very good.

In the talk I showed how to create an application based on a DDD approach (Data Drive Design Smile with tongue out). Is very important to remember that LS applications are created always from data models. Then I showed how in 5 minutes we can publish the application and its database on AZURE. And 10 minutes later we had an HTML5 app, with a responsive design available in the cloud to be accessed from any device.

The presentation that I used for the webcast are as follows:

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#EVENT] Materiales del Evento: construyendo aplicaciones HTML5 en AZURE con VS Lightswitch

image

Hola,

hace 2 días, gracias a los amigos de MSDN Latam, tuve la suerte de dar un webcast sobre como construir aplicaciones de negocio con Visual Studio Lightswitch. Lightswitch como producto ha madurado bastante y en la versión incluida en VS2013 es realmente muy bueno.

En la charla mostré como crear una aplicación con DDD (Data Drive Design Smile with tongue out). Es importante recordar que las aplicaciones LS se crean a partir de modelos de datos. Luego mostré como en 5 minutos podemos publicar la aplicación y su BD en AZURE. Y 10 minutos después teníamos una aplicación HTML5, con un diseño responsivo disponible en la nube para ser accedida desde cualquier dispositivo.

La presentación que usé en el webcast es la siguiente:

Saludos @ Home

El Bruno

image image image Google

[#CSS] HowTo: Create a WebFont package

Hello!

While the ability to define fonts (fonts) external CSS is from several versions ago, it seems that with CSS3 has been really fashion. The issue is, as with almost everything related to HTML5 and CSS3, in which different there are types of sources and each browser implements which comes out of the tip of the nose. Thus, if we want to do something that is actually multi browser, because we have to implement several different formats for a type of font (font type).

For example, Web Fonts (WOOF) have a license that is structured for use online and in addition there are several services that allow host such sources, for example www.fontsquirrel.com and www.google.com/ fonts.

What usually happens is that if you find a font type that is not in this format, so the best thing you can do is create a package with almost all types of supplies needed to run your source in almost all browsers.

As for that here is an example step by step.

1. For this example, I have chosen the source Acknowledgement from fontsquirrel.

image

2. When I get into the detail of this font, I can see in your licensing model that it does not allow download in other formats (in addition to issues of distribution, use, etc.).

image

3. So I download the OTF, and unzip it. I see that in the ZIP I have an OTF file that you need for the creation of a package of webfonts.

4. From the main menu of FontSquirrel , there is access to “WEBFRONT GENERATOR”. Once inside the same I can add the OTF file that I downloaded in the previous steps.

image

By the way, this is a free service, you should think about donating something… Although it is €1. I do it.

5. The button “DOWNLOAD YOUR KIT” Download us a zip where you will find the different types of formats that we want for this font type and some examples in the html file.

image

6 Ready! We already have our CSS code to download this font in WebFont format

   1: @font-face{ 
   2:     font-family: 'MyWebFont';
   3:     src: url('WebFont.eot');
   4:     src: url('WebFont.eot?#iefix') format('embedded-opentype'),
   5:          url('WebFont.woff') format('woff'),
   6:          url('WebFont.ttf') format('truetype'),
   7:          url('WebFont.svg#webfont') format('svg');
   8: }

Download: www.fontsquirrel.com

Greetings @ Home

El Bruno

imageimageimageGoogle

[#CSS] HowTo: Crear un package WebFont

Hola!

si bien la capacidad de definir fuentes (fonts) externas en CSS está desde hace varias versiones, parece que con CSS3 se ha puesto realmente de moda. El tema está, como con casi todo lo relacionado a HTML5 y CSS3, en que hay diferntes tipos de fuentes y cada navegador implementa la que le sale de la punta de la nariz. De esta forma, si queremos hacer algo que sea realmente multibrowser, pues tenemos que implementar varios formatos diferentes para un tipo de fuente (font type).

Por ejemplo, Web Fonts (WOOF) tiene un modelo de licencia que está estructurado para el uso online y además hay varios servicios que permiten hostear este tipo de fuentes, por ejemplo www.fontsquirrel.com y www.google.com/fonts.

Lo que suele suceder es que si encuentras un font type que no esté en este formato, pues lo mejor que puedes hacer es crear un paquete con casi todos los tipos de fuentes necesarios para que tu fuente funcione en casi todos los navegadores.

Pues para eso veamos un ejemplo paso a paso.

1. Para este ejemplo, he elegido la fuente Acknowledgement desde fontsquirrel.

image

2. Cuando accedo al detalle de esta font, puedo ver en su modelo de licencia que la misma no permite descargala en otros formatos (Además de las cuestiones de distribución, uso, etc).

image

3. Asi que descargo el OTF y lo descomprimo. Veo que dentro del ZIP tengo un archivo OTF que es el que necesito para la creación de un paquete de webfonts.

4. En el menú principal de FontSquirrel hay un acceso a “WEBFRONT GENERATOR”. Una vez dentro del mismo puedo agregar el archivo OTF que he descargado en los pasos anteriores.

image

Por cierto, este es un servicio gratuito, deberías pensar en donar algo … aunque sea €1. Yo lo hago.

5. El botón “DOWNLOAD YOUR KIT” nos descarga un zip donde encontraremos los diferentes tipos de formatos que queremos para este font type y algunos ejemplos de uso en el archivo html.

image

6. Listo !!! ya tenemos nuestro código CSS para poder descargar esta font en formato WebFont

   1: @font-face{ 

   2:     font-family: 'MyWebFont';

   3:     src: url('WebFont.eot');

   4:     src: url('WebFont.eot?#iefix') format('embedded-opentype'),

   5:          url('WebFont.woff') format('woff'),

   6:          url('WebFont.ttf') format('truetype'),

   7:          url('WebFont.svg#webfont') format('svg');

   8: }

Download: www.fontsquirrel.com

Saludos @ Home

El Bruno

image image image Google