Agile-Girls

Es curioso la de cosas que nos estamos perdiendo   Es por ello que quería compartir la posibilidad de tener múltiples backgrounds utilizando la propia etiqueta background-image. Lo cierto es que prácticamente todos los navegadores actuales lo soportan y creo que es una feature que deberíamos aprovechar. Veamos el ejemplo :

Lo único que estoy haciendo para poder trabajar con múltiples backgrounds es separar cada una de las imágenes con una coma y colocándolas en el orden que se deben superponer. En este caso, queremos que el personaje del Worms aparezca encima del paisaje de fondo, por lo que ocupará el primer lugar en la sucesión de imágenes. Por otro lado, podemos hacer uso de background-position para determinar la posición de cada una de las imágenes de la misma forma, separando por comas.

Por último, un punto a tener en cuenta es que si el valor de la propiedad es el mismo, no es necesario ponerlo explícitamente por cada una de las imágenes, sino que podemos indicar el valor solamente una vez y será aplicado a todo el conjunto, como ocurre en el caso de background-repeat.

Espero que sea de utilidad, a la par que interesante

¡Saludos!

Uno de los grandes dolores de cabeza a la hora de maquetar una aplicación son las diferentes resoluciones contra las que nos tenemos que enfrentar… Y realmente puede llegar a ser complicado, sobre todo porque la tendencia es tener aplicaciones que sean capaces de adaptarse tanto a un navegador como a los diferentes dispositivos como móviles, tables, etcétera. La solución: Responsive Web Design

Es por ello que, después de haber jugado bastante, una gran opción para controlar el diseño de nuestras aplicaciones se trata de CSS Media Queries, las cuales son expresiones que retornan true o false relacionadas con propiedades media del navegador que está solicitando la página.

¿Cómo lo utilizo?

El primer paso que debemos dar es determinar dónde queremos especificar la expresión. Existen varios sistemas para ello:

• Usando @media{ //Styles }: Indicamos la expresión que queremos evaluar y, si el resultado es true, se aplican los estilos que estén dentro del bloque media.
• Usando @import: Este caso es similar al anterior pero , en vez de utilizar un bloque con los estilos a aplicar, se indica el archivo css que se quiere importa en el caso de que la expresión resulte afirmativa.
• Indicando la expresión directamente en el link de importación del CSS.
• Utilizando código Javascript: Es posible pero, personalmente, no creo que sea la forma más eficiente. Basicamente porque el performance se puede llegar a ver afectado por ello… Pero es posible

Una vez que tenemos decidido dónde, vamos a determinar el qué. Normalmente, las expresiones están relacionadas con el ancho y el alto de un navegador ya que son los puntos de referencia que nos indican cual es nuestro espacio de trabajo. Por ejemplo:

@media screen and (max-width: 320px)
{
    body
    {
        font-family: Segoe UI, Arial, Verdana, sans-serif;
        font-size: 0.7em;
        padding: 5px;
        background-color: rgb(0  , 0  , 0  );
        color: #ccc;
    }
    article h2
    {
        font-size: 1.2em;
    }
    article h2:after
    {
        content: ' //Mobile - 320px';
    }

    section
    {
        padding: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        border: none;
        background-color: rgb(27, 117, 187);
    }
}

En este caso, he creado un bloque de código con una serie de estilos que solamente se aplicarán  si el navegador, ya sea dispositivo o no, tiene como tamaño máximo 320 píxeles (Como el Nokia Lumia 800 o el Samsung Galaxy SII).

El método más común es utilizar @media + la expresión + el bloque de código que nos gustaría aplicar en ese caso. Aún así, veamos las otras alternativas:

@Import

@import('mobile.css') screen and (max-width: 320px)

En el link de importación del CSS

<link href="styles.css" rel="stylesheet" type="text/css" media="screen and (max-width:320px)"/>

Utilizando codigo JavaScript

if ("styleMedia" in window && window.styleMedia.matchMedium("screen and (max-width:320px)")) {
            //Do stuff
}

A nivel de performance, la mejor solución es utilizar @media in line, dentro del CSS donde el código ya ha sido cargado y sólamente tiene que evaluar si lo utiliza o no (no tiene que comprobar si incluye un segundo archivo, no utiliza un lenguaje adicional como JavaScript, etcétera).

Por otro lado, otra cosa que os recomiendo es el uso de HTML Conditional Comments para evaluar qué navegador es el que el usuario está utilizando y, en función de ello, cargar un archivo u otro para que el diseño sea consistente con todos los navegadores:

<!--[if IE]>
	<link href="@Url.Content("/Content/IE.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
	<link href="@Url.Content("/Content/IE6.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
	<link href="@Url.Content("/Content/IE7.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
	<link href="@Url.Content("/Content/IE8.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 9]>
	<link href="@Url.Content("/Content/IE9.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gte IE 8]>
	<link href="@Url.Content("/Content/greaterTahnIE8.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
	<link href="@Url.Content("/Content/lowerThanIE9.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
	<link href="@Url.Content("/Content/lowerThanIE7.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 6]>
	<link href="@Url.Content("/Content/greaterThatIE6.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]>
	<link href="@Url.Content("/Content/notIE.css")" rel="stylesheet" type="text/css" />
<!-- <![endif]-->

Espero que sea de utilidad

¡Saludos!

Uno de los grandes dolores de cabeza a la hora de maquetar una aplicación son las diferentes resoluciones contra las que nos tenemos que enfrentar… Y realmente puede llegar a ser complicado, sobre todo porque la tendencia es tener aplicaciones que sean capaces de adaptarse tanto a un navegador como a los diferentes dispositivos como móviles, tables, etcétera. La solución: Responsive Web Design

Es por ello que, después de haber jugado bastante, una gran opción para controlar el diseño de nuestras aplicaciones se trata de CSS Media Queries, las cuales son expresiones que retornan true o false relacionadas con propiedades media del navegador que está solicitando la página.

¿Cómo lo utilizo?

El primer paso que debemos dar es determinar dónde queremos especificar la expresión. Existen varios sistemas para ello:

• Usando @media{ //Styles }: Indicamos la expresión que queremos evaluar y, si el resultado es true, se aplican los estilos que estén dentro del bloque media.
• Usando @import: Este caso es similar al anterior pero , en vez de utilizar un bloque con los estilos a aplicar, se indica el archivo css que se quiere importa en el caso de que la expresión resulte afirmativa.
• Indicando la expresión directamente en el link de importación del CSS.
• Utilizando código Javascript: Es posible pero, personalmente, no creo que sea la forma más eficiente. Basicamente porque el performance se puede llegar a ver afectado por ello… Pero es posible

Una vez que tenemos decidido dónde, vamos a determinar el qué. Normalmente, las expresiones están relacionadas con el ancho y el alto de un navegador ya que son los puntos de referencia que nos indican cual es nuestro espacio de trabajo. Por ejemplo:

@media screen and (max-width: 320px)
{
    body
    {
        font-family: Segoe UI, Arial, Verdana, sans-serif;
        font-size: 0.7em;
        padding: 5px;
        background-color: rgb(0  , 0  , 0  );
        color: #ccc;
    }
    article h2
    {
        font-size: 1.2em;
    }
    article h2:after
    {
        content: ' //Mobile - 320px';
    }

    section
    {
        padding: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        border: none;
        background-color: rgb(27, 117, 187);
    }
}

En este caso, he creado un bloque de código con una serie de estilos que solamente se aplicarán  si el navegador, ya sea dispositivo o no, tiene como tamaño máximo 320 píxeles (Como el Nokia Lumia 800 o el Samsung Galaxy SII).

El método más común es utilizar @media + la expresión + el bloque de código que nos gustaría aplicar en ese caso. Aún así, veamos las otras alternativas:

@Import

@import('mobile.css') screen and (max-width: 320px)

En el link de importación del CSS

<link href="styles.css" rel="stylesheet" type="text/css" media="screen and (max-width:320px)"/>

Utilizando codigo JavaScript

if ("styleMedia" in window && window.styleMedia.matchMedium("screen and (max-width:320px)")) {
            //Do stuff
}

A nivel de performance, la mejor solución es utilizar @media in line, dentro del CSS donde el código ya ha sido cargado y sólamente tiene que evaluar si lo utiliza o no (no tiene que comprobar si incluye un segundo archivo, no utiliza un lenguaje adicional como JavaScript, etcétera).

Por otro lado, otra cosa que os recomiendo es el uso de HTML Conditional Comments para evaluar qué navegador es el que el usuario está utilizando y, en función de ello, cargar un archivo u otro para que el diseño sea consistente con todos los navegadores:

<!--[if IE]>
	<link href="@Url.Content("/Content/IE.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
	<link href="@Url.Content("/Content/IE6.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
	<link href="@Url.Content("/Content/IE7.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
	<link href="@Url.Content("/Content/IE8.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 9]>
	<link href="@Url.Content("/Content/IE9.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gte IE 8]>
	<link href="@Url.Content("/Content/greaterTahnIE8.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
	<link href="@Url.Content("/Content/lowerThanIE9.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
	<link href="@Url.Content("/Content/lowerThanIE7.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 6]>
	<link href="@Url.Content("/Content/greaterThatIE6.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]>
	<link href="@Url.Content("/Content/notIE.css")" rel="stylesheet" type="text/css" />
<!-- <![endif]-->

Espero que sea de utilidad

¡Saludos!

En la reunión de este mes del GUG tuvimos la suerte de que Mario García (@marioggar) nos hiciera una pequeña presentación de Gradle y lo “enfrentara” en un combate contra Maven.

Empezamos con un breve repaso histórico a las herramientas de “build”.

Partimos en el año 2000 cuando fue lanzado Apache Ant, una herramienta donde prima la configuración sobre la convención, basado en xml y en general muy verbosa aunque también muy flexible pero sin gestión de dependencias.

A continuación llegamos a Maven, justo al contrario, un modelo de convención sobre configuración, también basado en xml aunque menos verboso y con el avance en la gestión de dependencias, aunque es menos flexible.

Y aterrizamos por fin en Gradle. Una herramienta de construcción de software que combina la flexibilidad de Ant con las convenciones de Maven. En ella podemos utilizar Groovy a través de un DSL y crear tareas sin descuidar la convención. El uso de Groovy nos permite reducir el número de líneas de código y además, al ser código, puedes hacer cosas como trazar, testear, etc.

Y una vez presentados a los contrincantes, pasamos al combate Maven vs Gradle:

Round 1: Xml vs código

Mientras Maven se basa en xml y siempre tienes que escribir una serie de etiquetas para realizar ciertas tareas, Gradle te permite hacer lo mismo pero con código.

Round 2: Convención sobre configuración.

Aunque ambos parten de convenciones, Gradle permite extender la convención con Ant, Groovy, tipos, orden por dependencia entre tareas(no dependiendo del ciclo de vida como en Maven).

Round 3: Ciclo de vida

El ciclo de vida de Maven tiene muchas etapas: validate, compile, test, package, integration-test, verify, install, deploy… mientras que el ciclo de vida de Gradle sólo tiene 3 fases: inicialización, configuración y ejecución.

Round 4: Scripting

Realizar scriping en maven es un infierno y si quieres utilizarlo acabas embebiendo código en el xml. Sin embargo, en Gradle, el propio script es código con lo que puedes importar plugins o clases de utilidad ya creadas.

Round 5: Dependencias

Maven es la referencia en la gestión/distribución de dependencias y por ello Gradle delega en Maven/Ivy para gestionarlas, aunque hay que tener cuidado porque cambia la nomenclatura de los ámbitos.

Round 6: Soporte IDE

Maven ha ido añadiendo soporte para entornos como Nerbeans, Eclipse e IntelliJ y Gradle, a pesar de su corta vida, tiene ya soporte para Netbeans (aunque limitado), para Eclipse (STS) y también para IntelliJ.

Round 7: Multiproyecto

Mientas que en Maven se declara un pom.xml padre con los hijos y se hereda tanto la configuración como las propiedades, en Gradle se separa la declaración de hijos de las configuraciones de herencia.

Viendo este enfrentamiento coincido con las conclusiones de Mario de que Gradle tiene grandes ventajas y creo que puede ser una herramienta muy potente y de la que se puede sacar mucho provecho, así que espero tener más tiempo para profundizar en ella y mientras tanto agradezco a Mario que se haya preparado esta estupenda introducción.

Gracias a @albertovilches podéis ver el vídeo entero de la charla en estos enlaces:

Filed under: eventos, grails Tagged: gradle, grails, groovy, Madrid GUG

Este fin de semana he tenido la oportunidad de asistir a Codemotion y el resultado sólo puedo definirlo como impresionante.

El sitio en el que se ha realizado, la Escuela Universitaria de Informática de la Universidad Politécnica de Madrid, creo que era bastante bueno porque aunque un poco alejado del centro tiene buena comunicación por metro, cercanías y bastante aparcamiento si vas en coche, algo importante si tienes previsto juntar a más de 1000 personas en un evento.

Aunque para algunas personas tener tanto donde elegir es un problema porque puedes perderte muchas cosas, a mí me parece un acierto que se propusieran tantos tracks (7 más un taller a algunas horas) porque así es más difícil que en algún momento no haya ninguna charla a la que te apetezca entrar. Yo organicé mi día intentando asistir a charlas enfocadas a HTML 5 y desarrollo para móviles ya que me gustaría meterme más a fondo con ello. Lástima que no todas las charlas se pudieran grabar y hubo alguna que me perdí porque el aforo del aula ya estaba sobrepasado con creces.

Me chocó un poco la forma un poco impersonal en que vi a gente tratar la oportunidad de hacer llegar tu currículum a las empresas patrocinadoras (Oracle, Microsoft, Medianet, Atlassian, Bq, VILT, Coritel, Extrema, IBM, Tuenti, Paradigma, Amazon, Telefónica y Mozilla) dejando únicamente una hoja de papel en una caja sin intercambiar ni una palabra con los representantes de las empresas que estaban allí.

En esta ocasión no voy a detallar las distintas charlas a las que asistí, quizás cuando tenga más tiempo y me ponga a llevarlas a la práctica voy creando entradas más cortas en las que entre más en materia, sólo quería resumir un poco mi experiencia y animar a quien se lo perdió a que vaya la próxima vez aunque esta sé de buena tinta de gente que hizo un gran esfuerzo por acudir, como la gente de la Universidad de Córdoba que salió de Córdoba a las 2:30h en autobús rumbo a Madrid y tras el evento vuelta a Córdoba, ¡eso sí que son ganas!

Filed under: eventos Tagged: codemotion

The miracle of your mind isn’t that you can see the world as it is. It’s that you can see the world as it isn’t.(Kathryn Schulz)

We know we make mistakes but not being wrong in current time. We live in individually way every situations of our life.

In the school they learnt that if you failed an exam you are lazy, stupid, not very clever. If you are in this team you won’t be success in your life.

Trusting you are always right that could be dangerous. You could think the others are wrong, or are idiots, or is a confederacy of dunces.

Our human nature doesn’t understand universal symbols around us. There are no errors. There are as many truths as there are people in the world.

Lo primero que pensamos si vemos esta imagen ¿Qué es?

Un Windows 7, bastante limpio la verdad Pues la verdad es que no Si bien no es una de las características que venga habilitada y configurada por defecto, podemos vestir nuestro Windows Server 2008 para conseguir una experiencia de usuario mucho más amistosa. Obviamente en una empresa donde lo importante es la rapidez del servidor, tener configurado e instalado lo mínimo necesario es la mejor opción, pero en otros casos donde necesitamos características de Windows Server 2008 (como Hyper-V) y no perder una buena experiencia de usuario podemos conseguirlo con los siguientes pasos:

Dentro de las features de Windows Server 2008 una de ellas corresponde a todo el tema de personalización y mejora del escritorio/interfaz llamada Desktop Experience. Para habilitarla, basta con acudir a Server Manager y en el apartado Features seleccionamos la opción Add Features para seleccionar la misma dentro del listado. Al seleccionar Desktop Experience nos informará de que además es necesario instalar Ink Support por lo que aceptaremos la instalación de la misma.

Pero esto no es todo, por defecto, aunque instalemos esta feature dentro de nuestro Windows Server 2008, permanecerán deshabilitadas, por lo que nos hará falta un paso adicional. En el apartado de Services buscamos el servicio llamado Themes, el cual no nos dejará arrancar de forma manual. Para poder habilitarlo, hacemos doble clic sobre el mismo y modificamos su método de arranque a Automatic para que se inice cuando arranquemos el sistema operativo.

Reiniciamos el sistema y a través del menú contextual del escritorio accedemos al apartado Personalize para seleccionar el tema Aero que aparece por defecto.

¡Listo! Ya tenemos la mejor apariencia de Windows 7 con toda la potencia de Windows Server 2008

Espero que haya sido de utlidad

¡Saludos!

Desde hace bastante tiempo, utilizo Skydrive para guardar documentos y poder editarlos desde cualquier parte. Cuando abres por ejemplo un documento Excel, Word, etcétera el mismo queda anclado en el menú de Inicio/Start como uno de los últimos archivos recientes que se han abierto dentro del equipo. Pero queremos llegar más allá Lo ideal sería poder mapear la carpeta de nuestro Skydrive de tal forma que siempre tengamos disponible el contenido a través del explorador de Windows. En este post vamos a ver los pasos necesarios para poder mapear los documentos almacenados dentro de Skydrive en Windows 7

Conocer nuestro cid

Lo primero que debemos averiguar para poder conectar con nuestro servicio de almacenamiento es localizar el identificador asociado a nuestra cuenta. Anteriormente podíamos visualizar el mismo en la URL del sitio de Skydrive una vez logados. Sin embargo, esta información ha desaparecido de dicha dirección y podemos localizarla de la siguiente forma:

1. Hacemos clic en uno de los archivos que tenemos dentro de nuestra cuenta y seleccionamos la opción compartir en el menú derecho.
   
2. Cuando hacemos clic en esta opción, aparecerá un pop up donde podemos seleccionar diferentes opciones como enviar por correo electrónico, compartir el archivo en alguna red social o bien obtener un vínculo. Seleccionamos este último y veremos la URL para poder acceder al mismo en modo lectura. Si nos fijamos bien, en la misma aparece el parámetro cid y un GUID asociado. Copiamos el mismo en el portapapeles y cerramos la ventana a través de la X superior.
   

Mapear Skydrive

Una vez que ya tenemos nuestro identificador, estamos listos para crear el mapeo. Para ello, accedemos a Mi PC/Computer y hacemos clic en Map network drive:

Los datos que debemos introducir en el cuadro de diálogo deben ser los siguientes:

En primer lugar debemos introducir la dirección de mapeo con la estructura siguiente:

\docs.live.net@SSLcid_GUID^2Documents

Una vez que hemos compuesto la dirección con nuestro cid, le indicamos que vamos a logarnos con unas credenciales distintas y, si queremos, podemos indicar además que se monte esta unidad al inicio de sesión de nuestro sistema.

Una vez pulsemos en el botón Finish, se pedirán las credenciales (Windows Live ID o cuenta passport) asociada a nuestra cuenta de Skydrive. Si queremos que la unidad se monte de manera automática indicaremos que las credenciales sean recordadas por nuestro equipo.

¡Listo! Todos nuestros documentos mapeados como una unidad más

¡Saludos!

Desde hace bastante tiempo, utilizo Skydrive para guardar documentos y poder editarlos desde cualquier parte. Cuando abres por ejemplo un documento Excel, Word, etcétera el mismo queda anclado en el menú de Inicio/Start como uno de los últimos archivos recientes que se han abierto dentro del equipo. Pero queremos llegar más allá Lo ideal sería poder mapear la carpeta de nuestro Skydrive de tal forma que siempre tengamos disponible el contenido a través del explorador de Windows. En este post vamos a ver los pasos necesarios para poder mapear los documentos almacenados dentro de Skydrive en Windows 7

Conocer nuestro cid

Lo primero que debemos averiguar para poder conectar con nuestro servicio de almacenamiento es localizar el identificador asociado a nuestra cuenta. Anteriormente podíamos visualizar el mismo en la URL del sitio de Skydrive una vez logados. Sin embargo, esta información ha desaparecido de dicha dirección y podemos localizarla de la siguiente forma:

1. Hacemos clic en uno de los archivos que tenemos dentro de nuestra cuenta y seleccionamos la opción compartir en el menú derecho.
   
2. Cuando hacemos clic en esta opción, aparecerá un pop up donde podemos seleccionar diferentes opciones como enviar por correo electrónico, compartir el archivo en alguna red social o bien obtener un vínculo. Seleccionamos este último y veremos la URL para poder acceder al mismo en modo lectura. Si nos fijamos bien, en la misma aparece el parámetro cid y un GUID asociado. Copiamos el mismo en el portapapeles y cerramos la ventana a través de la X superior.
   

Mapear Skydrive

Una vez que ya tenemos nuestro identificador, estamos listos para crear el mapeo. Para ello, accedemos a Mi PC/Computer y hacemos clic en Map network drive:

Los datos que debemos introducir en el cuadro de diálogo deben ser los siguientes:

En primer lugar debemos introducir la dirección de mapeo con la estructura siguiente:

\\docs.live.net@SSL\cid_GUID\^2Documents

Una vez que hemos compuesto la dirección con nuestro cid, le indicamos que vamos a logarnos con unas credenciales distintas y, si queremos, podemos indicar además que se monte esta unidad al inicio de sesión de nuestro sistema.

Una vez pulsemos en el botón Finish, se pedirán las credenciales (Windows Live ID o cuenta passport) asociada a nuestra cuenta de Skydrive. Si queremos que la unidad se monte de manera automática indicaremos que las credenciales sean recordadas por nuestro equipo.

¡Listo! Todos nuestros documentos mapeados como una unidad más

¡Saludos!

Para los que estamos acostumbrados a trabajar con la plataforma de Windows Azure, hace tiempo que se habilitó la posibilidad de añadir co-administradores para que varias personas puedan gestionar una misma suscripción.

El caso es que para Windows Azure Compute, Windows Azure Storage y SQL Azure estos co-administradores funcionan de maravilla… pero no ocurre lo mismo en el caso de los servicios de Windows Azure AppFabric. Si existen varios co-administradores dentro de la plataforma y uno de ellos crea algún servicio de AppFabric, cuando el resto de co-administradores necesiten gestionarlos es posible que aparezca el siguiente error:

El motivo es que para esta sección es necesario dar de alta los administradores en un apartado diferente que, por el momento, no es demasiado intuitivo ¡Veamos dónde se encuentra!

La forma más sencilla de acceder al apartado de gestión de administradores es a través de Access Control Service en el apartado Manage Access Control / Manage Cache /Manage Service Bus.

Dentro de este apartado, además de la configuración de Relaying party applications, Rule groups, etcétera tenemos una sección llamada Portal administrators donde podremos dar de alta las cuentas de Windows Live ID que queramos que tenga acceso a esta administración.

Si seleccionamos cada uno de los servicios, podremos hacer clic en dicha acción y agregar así los administradores para cada uno de ellos.

Espero que haya sido de utilidad

¡Feliz Lunes!