Archivos de la categoría ‘Interfaces’

Expressive, el nuevo FreeHand

Expresive, nueva herramienta de diseño vectorial.

Por todos es sabido que el maravilloso FreeHand fue sepultado por Adobe al comprar la empresa Macromedia y reemplazado por Illustrator, que no está mal, pero ni comparación con lo poderoso, intuitivo y versátil que es FreeHand.

Hace algún tiempo escribí un post sobre Free FreeHand, una organización que pretendía comprar los derechos de esta estupenda herramienta de diseño vectorial a Adobe o exigirle mediante la justicia que iniciara nuevas actualizaciones al producto, acciones que no obtuvieron buenos resultados, por lo que esta organización decidió aliarse con la empresa alemana Quasado para desarrollar una nueva alternativa.

Esta alternativa se llama EXPRESSIVE y es un nuevo desarrollo desde cero basado en las características de nuestro querido FreeHand, aún está en una etapa muy temprana de desarrollo pero pretende llegar a ser la verdadera alternativa al difunto software.

Expressive contará con todas las características de FreeHand, por  lo que para los que utilizamos esta herramienta nos será muy fácil trabajar con ella y no requerirá un nuevo aprendizaje, en el sitio de Expressive dice que podremos desarrollar para web o impresos utilizando la interfaz y herramientas que ya conocemos, además de muchas otras mejoras que harán de esta la herramienta perfecta. Una de las caraterísticas más destacables es que Expressive será multiplataforma, es decir, estará disponible para Windows, MacOS y Linux.

Ahora sólo queda esperar a ver la primera beta y la versión final, aunque para los ansiosos, en el sitio podemos encontrar una serie de videos que muestran el avance del desarrollo y las primeras imágenes de lo que será Expressive.

Hoy quiero dar un ejemplo del uso de estas excelentes propiedades de css3.

Antes para poder hacer un diseño con un recuadro de bordes redondeados era un tremendo dolor de cabeza, usando imágenes para cada esquina o una imagen de fondo, cuando hacías una sección expansible empezaban los problemas, porque se desarmaba todo y peor si se te ocurría agregarle una sombra para “que se va más bonito”.
Hoy la solución definitiva viene de la mano de la propiedad border-radius de css3, es muy sencilla de usar y la voy a explicar a continuación.

Esta sentencia se aplica directamente a un div y es parte del conjunto de propiedades border para las capas, al igual que otras propiedades puede aplicarse completa a todo un div con una sola instrucción o afectar al div con valores distintos a cada esquina, ejemplo:

border-radius: 10px; hara que el div al que le aplicamos el estilo redondee sus esquinas con una curva de 10 píxeles.

border-radius: 10px 5px 10px 5px; dará como resultado un div con diferentes tipos de curvas en cada esquina, siguiendo esta lógica:

border-radius: 10px (esquina superior izquierda) 5px (esquina superior derecha) 10px (esquina inferior derecha) 5px (esquina inferior izquierda);

Un ejemplo sería lo siguiente:

Código html:
<div class=”borde”> Esta es una prueba de bordes redondos con css3</div>

Código css:
.borde{
   float: left;
    width: 400px;
    height: 240px;
    padding: 20px 10px 20px 40px;
    border: 1px solid #999999;
    background-color: #DAE6B1;
    color: #848582;
    border-radius: 15px;
}

Esto nos da como resultado un recuadro con los bordes redondeados a 20px.

Ejemplo de border-radius

Aplicando algunos estilos más y con un buen gusto para diseñar podemos lograr aplicaciones gráficas en nuestros sitios muy buenas, cómo por ejemplo un formulario con bordes redondos y sombra utilizando box-shadow.
El css base queda así:

border: solid 2px #999999;
border-radius: 15px 0px 15px 0px;
box-shadow: 2px 2px 5px #999999;
background: #DAE6B1;

Y el resultado final queda de la siguiente forma, el código lo pueden descargar desde aquí:

Formulario cssPor último decir que estas propiedades de css3 son soportadas por Firefox, Chrome, Safari y Opera, Internet Explorer no, la nueva versión creo que sí, no voy a explicar como realizar esto en Explorer, porque es perder el tiempo.

Hace algún tiempo ya existe la posibilidad de poder compartir en las redes sociales los documentos publicados en una biblioteca digital creada en Greenstone, el proceso de configuración es bastante simple y voy a explicarlo lo más claramente posible.

Desde la versión 2.84 de Greenstone está disponible la implementación de una nueva macro llamada Shareme _shareme_, la que nos permite tener la posibilidad de compartir nuestras publicaciones en las redes sociales más usadas como Facebook, Twitter y Google+; por ejemplo, y también la posibilidad de enviar el documento vía correo electrónicos si así lo queremos.

Para lograr esto los desarrolladores de Greenstone implementaron una nueva sección de código en el archivo de macro document.dm que contiene todo lo necesario para poder lograr nuestro objetivo.

Configurar formateo de Greenstone

Para poder implementar la macro _shareme_ debemos agregar al formateo de salida de Greenstone una pequeña y simple configuración: _shareme_(_1_,_2_), donde _shareme_ es la macro para compartir, _1_ es el título de la publicación y _2_ es el enlace que se compartirá, por ejemplo:

_shareme_([dc.Title],[srclink])

dc.Title indica el metadato que contiene el título del documento y srclink es el enlace a este documento, también se puede escribir de forma manual un enlace bien formado que comience con http://

Un código más o menos completo de un formateo sería así:

<td valign=\”top\”>[highlight]
{Or}{[dc.Title],[exp.Title],[ex.Title],Untitled}
[/highlight]{If}{[ex.Source],<br><i>([ex.Source])</i>}<br>
_shareme_([dc.Title],[srclink])</td>

Esto nos da como resultado:

shareme macros

Al hacer click sobre Share obtenemos más posibilidades de publicación.

shareme expandido 2

 

 

 

 

 

shareme expandido 2

También existe la macro _sharemesmall_ que sólo despliega el icono share y es configurable con los mismos parámetros.
Para las versiones de Greenstone anteriores a la 2.84 también existe la posibilidad de agregar esta funcionalidad, para esto es necesario agregar al final del archivo de macro document.dm el trozo de código correspondiente a la configuración de esta macro y luego formatear la salida de los documentos como ha sido explicado aquí; para obtener el código necesario puedes hacerlo desde este enlace.

Cada vez que estoy en un proyecto donde todo va bien siempre Internet Explorer tiene que hacer su intervención y echar a perder todo el esfuerzo.
En un proyecto uno de los requisitos pedidos por el cliente era que de fondo en cada página debía haber un fondo blanco con sombra conteniendo todos los elementos, hasta ahí todo bien, no hay problema.
Para hacer esto decidí utilizar un clase de CSS3, box-shadow, pensando que ya ha pasado tiempo y Microsoft debe haber actualizado su incompatibilidad con los estándares me encuentro con la sorpresa de que Internet Explorer 8 no soporta esta sentencia; aquí comenzó el calvario, en Firefox, Chrome, Opera y Safari todo anda bien, pero en IE no hay sombra en el fondo blanco.

La solución, utilizar un filtro microsoft (totalmente fuera de los estándares), para simular box-shadow.

Finalmente mi css quedó así:

.sombra{
width: 900px;
      box-shadow: 2px 2px 5px #999999;
      filter: progid:DXImageTransform.Microsoft.Shadow(color=’#999999′, Direction=135, Strength=2);
}

La verdad no queda igual, pero algo se asemeja; en cada proyecto Internet Explorer es un dolor de cabeza, no alinea bien, no soporta css como se debe, se desconfigura, etc.

Quiero hacer un llamado a los desarrolladores, “NO HAGAMOS MÁS COMPATIBILIDAD PARA ESTE NAVEGADOR”, agreguemos una validación en nuestros desarrollos, si es Internet Explorer, mostremos un mensaje, “Su navegador es incompatible obtenga otro“.
De esta manera forzaremos a la gente a dejar de usar ese engendro que se hace llamar navegador web, proclamo un boicot en contra de Microsoft y su Explorer.

Maqetta editor visual html 5
Creo que ya pasaron los tiempos en que poder diseñar y crear sitios en forma visual era propiedad de los usuarios de Windows o Mac, o que el diseño WYSIWYG, creaba sitios con código sucio y poco optimizado.
Todo esto llega a su fin con Maqetta, un editor 100% opensource, creado para generar sitios en HTML 5 y bajo estándares.
¿Cual es la gracia? Primero corre en Linux, luego se ejecuta en el navegador, es 100% visual utilizando drag and drop, puedes crear interfaces con Ajax y compatibles con todos los navegadores.

Interfaz de diseño Maqetta

Herramientas como ésta son las que me motivan a seguir adelante en el fascinante mundo del diseño web, es cierto que un experto debe comprender el código, pero cuando tienes 4 o 5 proyectos encima se hace muy necesario agilizar los procesos y estoy seguro que desde hoy Maqetta será un increíble aliado en mis tareas.

Para obtener Maqetta debes descargarlo desde su sitio http://maqetta.org/, al descargarlo debes descomprimir el archivo zip y ejecutar el script maqetta.local.unix.sh, luego desde el navegador llamas esta dirección local http://localhost:50000/maqetta/ y ya tienes Maqetta funcionando y lista para hacer lo que desees.

Al abrir el software tienes la posibilidad de revisar algunos proyectos de ejemplo y algo que siempre es muy útil, utilizar unos tutoriales que te explicarán las funciones de esta excelente herramienta.

Bueno, como siempre, prueba y disfruta.

Logo Pencil

Como experto en diseño de interfaces siempre estoy buscando herramientas que me permitan desarrollar un buen trabajo.
He probado varios software que me permiten diseñar interfaces, desde Visio a programas netamente de diseño gráfico, por cierto los mejores, porque puedo hacer lo que fluye en mi mente. Pero no había encontrado un software que me permitiera un buen diseño de interfaces para escritorio, no es lo mismo diseñar una interfaz web que la de un programa instalable en el sistema.

Aquí está la maravilla, se llama Pencil y lo mejor de todo, es software libre.
La gracia es que es un software bastante completo y funciona como un add-on de Firefox, por lo que es multiplataforma, osea lo puedes ocupar en Linux -genial!!-, Windows y Mac; donde sea que tengas instalado Firefox.

Interfaz de Pencil

Con Pencil podemos crear simples wireframes y también Mockups, sólo arrastrando y soltando, así de simple.
En cuanto al diseño para software tenemos herramientas que nos permiten el diseño para sistemas Windows, diseño en entorno Gtk, esto está muy bueno, porque hay poco de esto por ahí, una interfaz neutra para el diseño de escritorio y diseño con trazos de lápiz, muy útil para solo mostrar posiciones y realizar un diseño más entretenido.

Otra gracia de Pencil es que se puede instalar como una aplicación stand alone, sólo teniendo instalado xul-runner, y así hacerlo correr en el sistema operativo que desees.

Como siempre te invito a probarlo y estoy seguro, de que si eres un amante de las interfaces y el diseño, Pencil te va a gustar.

Sitio web de Pencil http://pencil.evolus.vn/