Introducción a las bases de datos No Sql y sus ventajas

Saludos, les comparto la presentación de mi charla dictada en el BarCamp Medellín 2013.

Introducción a No sql from Tavo Alzate Sandoval

Jquery metro UI, Añadiendo interfaz estilo metro a tus aplicaciones web

En la mayoría de ocasiones cuando desarrollamos un sitio web, queremos que tenga una interfaz gráfica muy amigable y atractiva para el usuario y también nos preocupamos por que dicha interfaz sea liviana y no afecte el desempeño de nuestra aplicación, con la ultima tendencia de interfaz estilo metro vemos que los sitios web son muy atractivos visualmente y que además dicha interfaz es bastante liviana y permite una ágil navegación a través del sitio, por esto considero que es una gran alternativa a la hora de diseñar nuestro sitio web.

En este artículo vamos a ver como incorporar de una forma muy sencilla, interfaz estilo metro a nuestras aplicaciones web, utilizando librerías de Jquery para lograrlo.

comencemos por referenciar las librerías y estilos básicos de Jquery:

<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />

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

Ahora debemos descargar el tema que nos permitirá que se aplique el estilo metro a todos los widgest de Jquery que tengamos en nuestra página, en la siguiente url podemos generar nuestro tema http://jquit.com/builder, personalizando colores y demás y posteriormente descargar el archivo jquery-ui-1.8.16.custom.min.js que se encargará de aplicar el estilo metro a los widgest y una vez tengamos este archivo lo referenciamos en nuestra página:

<script type="text/javascript" src="Scripts/jquery-ui-1.8.16.custom.min.js"></script>

Con esto logramos que widgest como Accordion, Button, DatePicker, Dialog, Tabs y demás que estemos usando se vean automáticamente con la interfaz metro que queremos, veamos visualmente algunos ejemplos:

Para terminar nuestro ejemplo vamos a ver como crear un menú estilo metro de una manera muy sencilla, en la siguiente url encontramos el API que usaremos: http://jqmetro.codeplex.com/, describe como podemos implementar rápidamente un menú similar o mucho mejor que este:

Solo tenemos que referenciar los siguientes estilos y librería de jquery:

<link href="Styles/jq-metro.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="Scripts/jquery.metro-btn.js"></script>

Agregamos un div

<div id="metrobuttons" class="metro-panel">
</div>

Y agregamos botones con la siguiente instrucción:

$("#metrobuttons").AddMetroSimpleButton('bt1', 'metro-verde', 'Styles/Images/Acuerdos.png', 'Acuerdos', '#');

Con esto damos por terminado nuestro artículo de como incorporar interfaz estilo metro a nuestras aplicaciones web, espero les sea de gran utilidad, a continuación el link de descarga delos materiales de ejemplo.

https://www.dropbox.com/s/gqjvg767v8i4ybz/JqueyMetroUI.rar

Y también les comparto una buena herramienta muy útil para diseñar iconos con estilo metro:
http://www.syncfusion.com/downloads/metrostudio

Saludos.