Baobab: Documentación Carpeta T3

De Casiopea

Preliminar

De Palomas y Estorninos

Problema comunicacional. Desde el artículo De Palomas y Estorninos, Herbert Spencer

(...)

Capítulo I: Exploración

(antes: capítulo 1: campo de estudio)

Autopoiesis[1]

Se entiende por ‘poiesis’ a una acción o cosa que pasa de un estado inmaterial a uno material, de no ser a ser.

El hombre surge con el lenguaje. Desde el lenguaje el convivir. Crecemos en convivencia, en la vinculación honesta y sincera, de respeto por uno mismo y para con el otro.

La necesidad de relacionarse es natural, ya que somos seres ante todo emocionales, aunque esa sinceridad primera está dando paso a la racionalidad, la que es utilizada como escudo para justificar la emocionalidad. Principiamos inocentes con una ciega confianza, la cual se debilita con el paso del tiempo. Es en este instante cuando el deseo de control, de certidumbre, donde la mirada única y unipersonal da paso a la pérdida de la capacidad reflexiva y hace que todo gire en torno al ego.

Las relaciones humanas han de estar centradas en la co-participación, en la libertad expresiva de todos los integrantes; en la construcción conjunta y el crecimiento sincrónico de sus partes, en la coordinación del hacer para poder llegar así a edificar sistemas sociales -compuestos por una infinidad de interacciones entre personas- que son a su vez sistemas comunicacionales que los relacionan a su ambiente, que los invita a observar[2].

No debemos saber, debemos conocer: Saber implica certidumbre y ella niega la reflexión. El saber ancla, imposibilitando avanzar.

La construcción de esta comunidad co-participativa se hace desde el amor. Humberto Maturana señalo: “El amor es el dominio de las conductas relacionadas a través de las cuales el otro, la otra o uno mismo surge como legítimo otro en convivencia con uno”. Es entonces, vivir en un estado de mutuo respeto, sin competencia y sin manipulación. Vivir estando renaciendo cada vez, escuchando, aprendiendo y confiando del otro.

Ahora bien, viéndolo en términos macro, el individuo es aquella unidad discreta que compone la comunidad. Entenderemos por autopoiesis para éste caso específico, como la reproducción de esta unidad discreta un número infinito de veces. Es la replicación de los constituyentes de la colectividad. Replicación que considera un modo de ser y hacer. La persona es la estructura que sostiene la organización.

Estos modos de ser y hacer naturalmente que varían unos de otros, sin embargo, podemos decir que las comunidades se componen básicamente por cuatro premisas establecidas en base a la toma de decisiones[3]:

  • Miembros: Define si una persona pertenece o no a la organización
  • Programa: Una organización siempre debe tener objetivos delimitados.
  • Lugares y personal: Para la realización del programa se deben tener personas eficaces en posiciones específicas.
  • Decisiones: La función de una organización es hacer e implementar decisiones.

Tomar una decisión es una forma de comunicación. Limitan la contingencia[4] no determinando el futuro, pero que sí constituyen el presente [5] en el que habitamos.

Construir presencia y no imagen aparente. Abrir espacio a la colaboración, al escuchar y ver al otro.

  1. Las siguientes notas fueron tomadas a partir del programa La Belleza de Pensar, conducido por Cristián Warnken en el cual se invitó al Biólogo Humberto Maturana.
  2. Autopoietic Organization Theory: Drawing on Niklas Luhmann’s Social System Perspective. Tor Hernes. Copenhagen Business School Press, 2002. Página 23.
  3. Autopoietic Organization Theory: Drawing on Niklas Luhmann’s Social System Perspective. Tor Hernes. Copenhagen Business School Press, 2002. Página 25.
  4. Autopoietic Organization Theory: Drawing on Niklas Luhmann’s Social System Perspective. Tor Hernes. Copenhagen Business School Press, 2002. Página 27.
  5. Autopoietic Organization Theory: Drawing on Niklas Luhmann’s Social System Perspective. Tor Hernes. Copenhagen Business School Press, 2002. Página 244.

Construcción del Diálogo Común

Para que una organización pueda considerarse como tal, perdurando en el tiempo y donde los integrantes que la componen puedan vincularse es necesario tener un campo común de diálogo, dado por el lenguaje. Construir a partir de lo común, de la convención de signos y símbolos, es marcar el terreno para poder llegar a la convergencia y diseñar para un punto específico.

Observamos dos medios que debemos abordar para cumplir con nuestro objetivo:

  • La lengua: El lenguaje permite entendernos, a elaborar discursos o debatir ideas. La lengua da paso a la estructura: Fijar aquello mínimo que requerimos para comunicarnos, aunar esfuerzos en establecer parámetros básicos, todo ello enmarcado por un quehacer general. El diálogo brinda la posibilidad de llegar a acuerdos y poder constituir intereses comunes y específicos. Fundamos lo común, la común-unidad, la cual se ampara en valores y morales colectivas.[1]
  • El Diseño: Designar. El diseño elabora una síntesis de lo común y lo hace apropiable a todos. Debe facilitar las acciones, hacerlas ágiles y orgánicas, legibles.

El lenguaje se construye a partir de representaciones para luego pasar a un campo sensorial. Un traspaso de lo concreto a lo abstracto, de lo dibujado a lo dicho y de lo dicho a lo escrito. El diseñador debe llegar a lo mínimo.

Pictograma ideograma fonograma.png

De esta manera la lengua, el lenguaje y el diseño se relacionan tan estrechamente que construyen convencionalismos, acuerdos generales que no son puestos en duda y dan paso a la solidificación de un cúmulo de individuos en pos de objetivos y planteamientos que éstos se proponen.

  1. Strong Democracy: Participatory policits for a new age. Benjamin Barber. University of California Press, 2004, página 245.

Metodología de Diseño

Metodologia estorninos modelo-02.png

Para diseñar Baobab utilizamos el modelo del diseño centrado en las personas. Si queremos construir un lenguaje común, esta síntesis apropiable para toda una comunidad, es necesario que debamos conocer sus intereses, su manera de pensar, que añoran y desean. Sus sueños.

Para cumplir con ello debemos investigar, observar y comprender. Debemos jerarquizar, abrir un camino para lograr el objetivo que nos proponemos y por último construirlo.

Investigación con personas

Bajo el marco investigativo del proyecto, el trabajo de Liz Sanders (fundadora de Make Tools) es tomado como referencia. Éste modo de trabajo nos ayuda para poder diagnosticar problemas y diseñar herramientas y servicios que respondan a su solución.Como premisa tenemos que:

  • Todas las personas son creativas.
  • Todas las personas tienen sueños.

Las condiciones ideales para llevar a cabo estas jornadas se dan:

  • En un ambiente grato: un lugar amplio, sin ruidos distractores.
  • En grupos con pocos participantes (no más de cuatro por actividad) para poder guiarlos y hacerlos sentir a gusto.
  • Con un kit de trabajo de material didáctico.
  • Pauteando la jornada con actividades breves que requieran de poco tiempo para no dejar exhaustos a los participantes.

Dentro de la investigación se llevaron a cabo dos jornadas de Codiseño con alumnos de la escuela de arquitectura y diseño de la PUCV. La primera apuntó, a modo de diagnóstico, a la visión de los propios estudiantes frente al cuerpo de alumnos y la participación activa en la escuela.

Primera Jornada de Codiseño

El Martes 19 de Abril del 2011 se realiza la primera jornada de codiseño, la cual se divide en dos momentos: Inicialmente se comienza con una actividad general, donde se acuerda un cuestionamiento común, y la segunda que es conformada por tres grupos del Taller que abordan dimensiones distintas. Los hallazgos de la jornada fueron puntuales:

  1. Se identifica un Cuerpo de Gobierno distante a la mayoría de los Alumnos.
  2. La Escuela de Arquitectura y Diseño está desvinculada de la Universidad.
  3. En el alumnado existe una baja valorización de lo que es el bien común: no se esta dispuesto a sacrificar los intereses y quehaceres individuales en relación al cuerpo total de la escuela.
  4. No existe autogestión.
  5. Se quiere que sea un Cuerpo de Gobierno conocido que llegue y conozca a todos y que sea accesible al diálogo.
  6. Es urgente crear Comunidad.

Segunda Jornada de Codiseño

En septiembre del 2011, luego de las movilizaciones de los estudiantes en tiempos de Paro, se plantea proponer mejoras para la plataforma de gobierno estudiantil. Para ello, se realizan una segunda jornada de Codiseño el jueves 15 de septiembre y una tercera el lunes 26 de septiembre bajo la misma premisa que la actividad pasada. La jornada gira en torno a cuatro focos: Publicar, Participar, Deliberar y Gestionar. Cada jornada consta de dos actividades por tema que cada grupo guía y define. Entre los hallazgos más relevantes destacan:

  1. Estimular los intereses del lector en temas específicos ayuda a que estos se inserten más rápido y fácil en las personas.
  2. La lectura de la imagen reafirma lo nombrado en la publicación.
  3. Publicar debe permitir distintos formatos de salida para su difusión.
  4. La participación en la escuela va ligada a generar proyectos y entregar roles.
  5. La respuesta a problemáticas surgen de un fundamento común, generada por propuestas, argumentos y preguntas.
  6. Un planteamiento inicial sostiene y crea al proyecto.
  7. Es necesario nombrar elementos, tareas específicas, actores y ejecutores para la organización y puesta en marcha del proyecto.

Capítulo II: Prototipado

Interfaz Gráfica de Usuario

GUI (Graphical User Interface o Interfaz Gráfica de Usuario) trabaja con las emociones del usuario. Esta etapa es de suma relevancia porque en ella se produce el contacto entre el elemento diseñado y el individuo que lo acoge, cayendo en él los procesos anteriores que son sintetizados en un objeto gráfico.

[1]

Elementos experiencia usuario garret.png

Hablamos del GUI como un período fundamental en el proceso de diseño, en la cual se debe construir una compleja síntesis de información la cual es recibida por el usuario. de manera tal que este vaya obteniendo la información solicitada por niveles. Para ello, se desarrollan una serie de caminos de manera tal que el contenido se presente en los tiempos pertinentes y de la manera adecuada.

La correcta construcción del primer momento y de los consecutivos en el que el usuario se pone en contacto con la Plataforma son elocuentes. Nos referimos a un ‘look & feel’ (mirar y sentir) que marcarán el futuro del sitio. Un posible reingreso y consecuente participación o la decisión de no reingresar y desechar esta vía como válida como canal de participación. Se debe establecer por tanto, una comunicación entre quien ingresa al sitio y la plataforma misma.

Para llegar a elaborar una interfaz Gráfica de Usuario, necesitamos de un grado de abstracción mayor en procesos anteriores de diseño: Investigación, proposición y pruebas que traen como respuesta un ‘guión escrito’. Baobab es una plataforma compuesta por determinados tipos de publicación, que tienen objetivos diferentes cada una de ellas y desencadenarán acciones naturalmente distintas. No obstante, todas ellas tienen el mismo fin: Construir comunidad, permitir la expresión del ser.

Se ha de considerar a Baobab como un Framework, ya que tiene una estructura predeterminada, con partituras de interacción ya elaboradas, aunque es totalmente apropiable por cualquier comunidad con el fin que ella estime conveniente.

Construir por tanto un Framework requiere trabajar en un nivel de especificación cada vez mayor. Desde lo macro a lo micro. Desde definir los objetivos de la plataforma hasta el diseño visual. Un Framework es más que una paleta de estilos, más que la dirección de arte de un producto, es la versatilidad que puede adquirir sustentado por el argumento tras él.

Arquitectura de la Información

La arquitectura de la información es una disciplina que se enfoca en organizar la estructura de los contenidos mediante estrategias que manejan su fluidez, calidad y profundización. Esto permite construir y diseñar espacios de conversación e interacción con contenidos legibles, accesibles a las personas y organizados desde sus propios intereses y sueños.

Mapa de navegación

Para poder comprender la estructura del sitio se realiza el mapa de navegación, en donde se expresan las relaciones jerárquicas de las paginas y su secuencia.

Mapa navegacion baobab.png

Mapa de clases

El mapa de clases, en cambio, detalla el desglose total del sitio. Comprende el panorama completo y detallado de cada espacio, los contenidos, y su secuencia completa. Para llegar a proponer un mapa de clases es necesario comprender las redes que se van generando dentro de la estructura del sitio. Realizar un card sorting ayuda a la categorización de los contenidos y genera un buen mapa de clases.

Mapa clases baobab.png

Diseño de Interacción

Entendemos como Diseño de Interacción el comportamiento que se desarrolla entre usuario y plataforma, la relación y conversación existente entre ambos. Se trata de observar y analizar lo que requiere aquel individuo que lo utilizará, su proximidad, su simplicidad y por tanto la experiencia.

En Baobab el Diseño de Interacción consiste básicamente en definir tipos de publicaciones los cuales tienen ciertas leyes particulares (acciones), las que permiten que se guíe la conversación que el usuario publicó y se genere una solución, acuerdo o planificación por parte de quienes leyeron, comentaron y se hicieron parte de ella.

Tipos de Publicación

Proyecto

Un proyecto puede nacer de ideas ya planteadas en la plataforma, articulando las conversaciones que en ella se producen, así como también de motivaciones o intereses personales que vayan en pos de un beneficio para la comunidad.

Para hacer público un proyecto es esencial que éste cuente con una descripción o argumento claro y etapas definidas, de manera tal que otro usuario pueda unirse a él, para poder cumplir así con la realización de tareas específicas realizando acciones concretas tras la pantalla.

Debate

Toda comunidad tiene problemas y para solucionarlos requiere tomar una decisión establecida por el consenso colectivo.

Los debates por tanto, sirven de canal para generar discusiones que son resueltas por medio de votaciones, las cuales tienen un plazo límite, validando la opción votada por medio de los comentarios que se originen a partir de la publicación.

La transparencia es fundamental, por lo que todos los miembros de la comunidad podrán ver rápidamente los resultados.

Evento

El fin del Evento es dar a conocer un acontecimiento que sucederá en los próximos días, el cual tiene relación a los intereses de la organización. Para ello se podrá geolocalizar el punto donde se llevará a cabo dicho suceso de modo tal que sepas exactamente donde ocurrirá. Asimismo, el usuario podrá confirmar su participación en el evento, quedando expresado en el post del mismo.

Mercado

El objetivo de Baobab no es ser una Plataforma de compra y venta de artículos, pero si observamos que era importante brindarle al usuario el espacio para poder ofrecer y adquirir productos, de manera que el sitio es un vehículo para poder contactarse entre personas y que ellas puedan acordar las condiciones del cambio.

Idea

Una simple idea bien descrita tiene la fuerza necesaria para motivar a la comunidad. Los usuarios pueden tomar la esencia de la publicación y transformarla en un proyecto, debate o evento, la cual se ve concretizada en una acción real fuera de la pantalla.

Noticia

Una noticia es una publicación de carácter oficial del equipo administrador de la comunidad, por lo que sólo los usuarios con los privilegios correspondientes podrán realizar los posts, en los cuales se informa sobre algún hecho relevante y de interés general.


Acciones de la Plataforma

La Plataforma permite realizar acciones que llaman al Usuario a participar libremente. Existen dos niveles de acciones en el Sitio, aquellas que se consideran inofensivas y otras que requieren de un compromiso con lo colectivo. Estas acciones trascienden a la Plataforma en acciones ejecutadas presencialmente y al compartirlas en redes sociales.

Publicar Participar Deliberar Gestionar Trascendencia
Evento
  • Asistiré
  • Asistir al evento
Debate
  • Votar
  • Validar postura
  • Vincular discursos
  • Articular lo común
  • Construir discurso colectivo
  • Formalizar acuerdo
Proyecto
  • Unirse
  • Articular lo común
  • Vincular ideas
  • Planificar acción
  • Ejecutar tareas
Mercado
  • Recomendar
  • Comunicarse
  • Confirmar transacción
  • Realizar transacción
Idea
  • Comentar
  • Generar conversación
Noticia
  • Comentar
  • Informar a la comunidad

Partituras de Interacción

Las partituras de interacción construyen el guión de acciones que se ejecutan al momento en que el usuario y la plataforma se relacionan, especificando cada instancia en el transcurso de la navegación del sitio bajo tres horizontes:

Esquema partitura interaccion baobab.png

Login del usuario

Partitura login baobab 2.png

Compartir y Comentar

Partitura compartir comentar baobab 2.png

Unirse/Participar de un Proyecto/Evento

Partitura unirse participar baobab 2.png

Votar

Partitura votar baobab 2.png

Contactar

Partitura contactar baobab 2.png

Crear una nueva publicación

Partitura nueva publicacion baobab 2.png

Capítulo III: Construcción

Diseño de interfaz

Estructura en Mapa de divs

El mapa de divs es la estructura del sitio web. En base al lenguaje HTML (HyperText Markup Language, lenguaje de marcado de hipertexto) se establecen las capas que lo componen, de manera tal que una serie de velos superpuestos conforman la configuración y disposición de elementos.

Less (Sitio web de less)

LESS es el lenguaje dinámico de marcado que extiende la misma cascada de estilo y la dota de comportamientos dinámicos como el uso de variables, funciones, mixings y operaciones aritméticas. LESS no reemplaza a la hoja de cascada de estilo, el mismo resultado final ejecutado desde el javascript es un documento CSS que funciona en navegadores como Chrome, Safari y Firefox y en servidores con Node.js y Rhino.[1]

Es beneficioso entonces porque:

  • Permite el uso de variables.
  • Permite operar con funciones aritméticas.
  • Acelera y enriquece el lenguaje css.
  • Anida variables una dentro de otras.

Utilizamos LESS en Baobab para optimizar el trabajo y manejar las variables de color, tamaños tipográficos y otros valores. Para ello, a modo de ordenar el proceso de diseño, manejamos distintos archivos less que agrupan funciones y espacios determinados. Luego una hoja de estilo less importa todas las otras, para que finalmente el javascript que se ejecuta compile el archivo .less en una .css legible para los navegadores.

El archivo .less que importa los otros es el siguiente:

/* Baobab */

@import "reset.less";
@import "frameless.less";
@import "grilla.less";

@import "estructura.less";
@import "footer.less";

//Variables y mixings
@import "variables.less";
@import "mixins.less";

//Elementos y estructuras
@import "portada.less";
@import "masonry.less";
@import "articulos.less";
@import "comentarios.less";
@import "perfil.less";

@import "tipografia.less";
@import "formularios.less";
@import "botones.less";

Usar javascript no es el único modo, se puede usar LESS por medio de una aplicación que compile los estilos .less a .css. y luego utilizar sólo el archivo .css.

  1. Párrafo introductorio a LESS, Sitio Web de LESS

Variables

Las variables permiten definir previamente los valores que luego podrán ser utilizados en cualquier propiedad en la hoja de estilos. Su sintaxis es como sigue:

@variable: valor;
@font-size: 14px;

Las funciones de color son funciones pre-definidas de Less CSS que permiten alterar un color, para hacerlo más claro, oscuro, saturado, desaturado, cambiarle la tonalidad, etc. Son una gran herramienta para definir una paleta de colores sin estar buscando códigos de color. Las funciones de color son:

  • lighten aclara un color.
  • darken oscurece un color.
  • saturate satura un color (o "aumentarlo").
  • desaturate desatura un color ("reducir").
  • fadein resalta un color quitándole transparencia.
  • fadeout agrega transparencia al color.
  • fade cambia la transparencia a 50%.
  • spin cambia el tono de color(en grados; puede invertirse por el color opuesto de la paleta de colores).
  • mix para mezclar dos colores.

Su sintaxis es la siguiente:

@color:        #127EC1; //main color
@colorHover:   darken(@color, 15%);

Mixins

Llamamos mixins a las clases dinámicas que funcionan con un carácter de lenguaje de programación. Pueden ser llamadas desde otras clases y permiten parámetros que pueden ser modificados. También sirven para poder simplificar el lenguaje y no reiterar clases como "border-radius" que utilizan diferentes sintaxis para cada navegador. Como ejemplo tenemos:

.border-radius(@radius: 3px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.miElemento{
          background-color: @color;
          .border-radius;
}

Para los mixins, Utilizamos un archivo .less base desde css-tricks.com, que luego fuimos modificando a nuestras necesidades.

Estilos gráficos

Utilizamos variables base que definimos previamente para luego emplearlas en los otros archivos .less.

/* Variables.less for Baobab Theme */

//Main Color
@color:             #127EC1;
@colorHover:        darken(@color, 15%);
@hoverColor:        @colorHover;
@backgroundColor:   @grayLighter;

//Grays
@black:             rgba(0, 0, 0, 1);
@blackTransparent:  rgba(0,0,0,0.8);
@grayDark:          lighten(@black, 25%);
@darkGray:          @grayDark;
@gray:              lighten(@black, 50%);
@grayLight:         lighten(@black, 75%);
@lightGray:         @grayLight;
@grayLighter:       lighten(@black, 98%);
@lighterGray:       @grayLighter;
@white:             #fff;

//Colors for btn
@green:             #8EC236;
@greenDark:         #609d1e;
@greenDarkness:     #00845F;
@darkGreen:         @greenDark;

//Other colors
@borde:    	    fade(@gray, 30%);
@blue:              #34A5EC;
@blueDark:          darken(@blue, 15%);
@blueDarkness:      #3474BA;
@red:		    #D01B00;
@redDark:	    darken(@red, 15%);
@yellow:            #E4AC04;
@orange:            rgba(224, 117, 0, 1);
@pink:              rgba(231, 127, 204, .95);
@purple:            rgba(120, 80, 200, .95);
@rosado:            #E666BD;

//Fuentes
@special: 'Open Sans', sans-serif;

//Baseline grid
@basefontsize:      @font-size;
@basefont:          @basefontsize * 1em;
@em:		    @basefont;
@baseline:          @em * 1.81;
@small:             @font-size * 0.88;

// Proporciones tipográficas
@font-size:    	    14px;// tamaño base en pixeles
@cuerpo:	    @font-size;
@em: 		    @font-size * 1em;
@interlinea:        @em * 1.81;

//Grilla
@columnas:          24;
@columna: 	    2 * @cuerpo;
@interColumna: 	    1 * @cuerpo;
@anchoTotal:	    (@columnas * (@columna + @interColumna) - @interColumna);

//Anchos de columna

 @1cols: ( 1 * (@columna + @interColumna) - @interColumna); @1col: @1cols;
 @2cols: ( 2 * (@columna + @interColumna) - @interColumna);
 @3cols: ( 3 * (@columna + @interColumna) - @interColumna);
 @4cols: ( 4 * (@columna + @interColumna) - @interColumna);
 @5cols: ( 5 * (@columna + @interColumna) - @interColumna);
 @6cols: ( 6 * (@columna + @interColumna) - @interColumna);

//Ancho del bloque
@bloque: (@anchoTotal + 2 * @interColumna) / @columnas;

//Shadow
@shadow: 0 1px 1px rgba(0,0,0, .1);

//Animation
@transition: all 0.3s ease 0s; 

/*Header*/
@headerHeight: 100px;
@headerColor: @blackTransparent;
@movilHeight: 50px;

/*Artículos*/
@margin: @cuerpo*1.8;
@-margin: -26px 0 20px;
@titleSize: @cuerpo*1.8;
@paddingTop: @baseline*1.3;
@padding: @paddingTop @baseline @baseline;

/* Comentarios */
@commentWidth: 60%;
@commentPadding: 2%;
@commentFull: 100%;

A modo de catálogo presentamos los estilos gráficos utilizados a partir de etiquetas html5 para el tema Baobab.

> Documentado en Baobab: CSS

Evolución de pantallas

Realizados ya los estudios pertinentes y acordados los contenidos de la Plataforma, el Taller de Diseño Gráfico de cuarto año 2011 trabaja con Wireframes de Alta Intensidad, navegables y en formato .PNG (Taller Sitio 1, 2 y 3), los cuales sirven para efectuar pruebas con usuarios reales.

Luego de ello, y a partir de los paros que afectaron en el mismo año a gran cantidad de centros de educación a lo largo de Chile, en el ramo de Construcción el mismo Taller se replantea el trabajo hecho el trimestre anterior, realizando otros wireframes (Construcción Tema 1 y 2) con una estructura y contenido distinto al del anterior trimestre.

Finalmente, se muestran los wireframes que se diseñaron en Título (Título 1 y 2), en el mismo formato que los anteriores, para pasar ya luego a las tres últimas versiones construidas en HTML, CSS, JS y PHP: Estorninos 1 - 2 y Baobab Final.

Home

Perfil

Formulario

Los formularios para añadir publicaciones están pensados como campos obligatorios que deben ser llenados por el usuario para manejar, clasificar y mostrar de manera jerarquizada la información otorgada por él. Cada tipo de pubicacion tiene su formulario específico. Pensando en la interacción del usuario, para el formulario de eventos se añadieron mapas con geolocalización, donde éste puede especificar un punto escribiendo el lugar del evento, y/o moverlo dentro del mismo mapa.

Archive

Para los archivos de publicaciones, inicialmente se proponen dos páginas distintas. Estan muestran las últimas publicaciones añadidas, donde cada una contiene el título, la bajada (con límite de caracteres) y la imagen si la posee. Homologándola, se crea una nueva propuesta de bloques de publicación, lo que no otorga muy buenos resultados por ser una interfaz muy dura al hacer muy evidente esa caja de publicación en el contraste con el fondo. Se requiere pensar ese contenido como parte de la página, sin bordes, donde los bloques de texto formen la figura de su propio contenido. Aún así, pareciera dejar todo en una misma jerarquía, por lo que se propone una cabecera para cada página de archivo. Esta contiene la noticia destacada al ancho de la pantalla, y sobre ella al costado derecho un bloque que enuncia el tipo de publicación que se está visualizando (sea evento, debate, proyecto, etc) y define en una frase que permite realizar tal tipo de publicación, junto al botón de “Crear Publicación”.

Single

Las páginas de publicaciones han mantenido a lo largo de todas las propuestas el contenido mínimo necesario para poder publicar: Título y texto. Las imágenes son parte del post, pero no son necesarias para poder publicar.

Finalmente, la estructura de las publicaciones es la siguiente:

  • Una cabecera que contiene el Título de la Publicación, la fecha en la que se publicó, las categorías (etiquetas) junto con el nombre y avatar del autor que realizó la publicación.
  • Información relevante de cada publicación (fechas de eventos, lista de tareas, resultados de votaciones, etc).
  • Sección de interacción de la publicación, donde están los botones de “Unirse”, “Asistir” y “Votar”.
  • El contenido de cada publicación como párrafos de texto, acompañado de imagen si es que posee.
  • Íconos de redes sociales con la opción de compartir el artículo en twitter y facebook.
  • Caja de comentarios.

Última Versión

Singles

Formularios

Perfil

Login, Registro y Edición de Perfil

Para mejorar la usabilidad de la Plataforma, se opta por no utilizar los formularios de Registro, Login y Edición del Perfil de usuario que vienen por defecto en Wordpress.

Responsive Web Design

El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una función de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos "aceptar el flujo y reflujo de las cosas."[1]

El diseño de sitios web (y servicios web) está inscrito en lo transitorio. Parámetros y medidas estándar de resolución, las nuevas tecnologías, dispositivos y los gustos y preferencias de las mismas personas van cambiando mucho más rápido de lo que pensamos.

De acuerdo a un estudio de comScore, más de 100 millones de suscriptores móviles de Estados Unidos usa smartphones y cerca de 234 millones de estadounidenses utilizan diferentes dispositivos móviles.

En panorama en Chile también tiende a la preferencia y usabilidad de estos dispositivos: en el año 2009 se registró un total de 638.787 conexiones 3G, incrementando a 2.961.050 en el 2011 con un crecimiento exponencial de un 104,8% (desde junio de 2009).[2]

Como el uso de móviles ha incrementado (y tiende al aumento), las empresas se han visto en la necesidad de optimizar sus sitios web para sus visitantes. La pregunta es, entonces, ¿cómo podemos adaptarnos y adaptar nuestros diseños frente a estos cambios?

Definiciones

El término Diseño Responsivo o Responsive Web Design fue acuñado por Ethan Marcotte en un artículo de A List Apart.

Pensar en Diseño Responsivo permite adaptar el contenido y estructura de sitios web acuerdo a la resolución del dispositivo en que se está navegando (PC, móviles y tablets) a partir de la misma cascada de estilo. Contenidos flexibes, grillas fluidas y media queries permiten construir en un diseño limpio sitios que se adaptan al dispositivo. [3]

Con este modo de pensar el diseño, podemos mejorar la experiencia de usuario. Como ejemplo, cuando un sitio web creado sólo para pantallas de computador se reduce a ser visualizado en un móvil, se hace mucho más compleja la navegación. El constante gesto de acercar y alejar el zoom por parte del usuario hace mas lenta y tediosa la experiencia de navegar en el dispositivo. El diseño responsivo ajusta los elementos para facilitar la lectura y mejorar la experiencia de navegación al hacerla más agradable.

Construcción

¿Cómo optimizamos nuestros sitios web para distintas plataformas? Algunas prácticas que se realizan es crear múltiples sitios para cada tipo de dispositivo (PC, móviles y tablets). Esto significa tres sitios con contenidos aislados para cada uno, traduciéndose a más costos de mantenimiento, tiempo y actualizaciones, sin mencionar que habría que adecuar un cuarto sitio para algún nuevo dispositivo.

El Diseño Web Responsivo responde a esta problemática pensando el un sitio con una propia cascada de estilo.

Media queries especifican dentro de la CSS las definiciones y cambios que queremos realizar para nuestro sitio web y renderizarlo para cada tamaño de pantalla. Diseñamos, entonces, a medida de iPhone y teléfonos smarphone, para iPads y otros tablet. Tenemos el manejo para cada dispositivo y resolución.

/* para 480px o menos */
@media screen and (max-width: 480px) {

    #header {
        height: 78px;
	}

    #buscador {
	display: none; /*no muestra el buscador para móviles*/
	}

    .block{
	width: 90%;
	min-height: 0px;
	background: white;
	margin: 0 auto 20px;
	}
}

Cabe destacar que todos los navegadores de computadores como Safari 3+, Chrome, Firefox 3.5+ y Opera 7+ soportan las media queries, así también lo hacen navegadores mobile más recientes como Opera Mobile y WebKit mobile (versiones anteriores de esos navegadores no soportan media queries).

Ahora ¿cómo puedo saber cuántos usuarios acceden al sitio web mediante smartphones? Esto puede ser verificado usando Google Analytics obteniendo resultados en un historial de visitas y en tiempo real.

Referencias

  1. John Allsopp, "A Dao of Web Design"
  2. Subtel, Series conexiones internet móvil: Servicio Acceso a Internet: Total de Conexiones móviles 3G
  3. Ethan Marcotte, "Responsive Web Design"

Escala a distintas resoluciones de pantalla

Los elementos que componen la página web se adaptan y adecuan a la resolución del dispositivo en el que se está visualizando el sitio. Baobab está adaptado para computadores de escritorio, ipads, y dispositivos móviles.

Baobab responsive imac macbook ipad iphone.png

La grilla para los contenidos del inicio se muestran en 4 columnas, por defecto, cambiando a tres en resoluciones de 728px de ancho (ipad) y a una para verlas en móviles. En el proceso de diseño, para ir testeando y calibrando los elementos en la pantalla, ajustamos el tamaño de la ventana del navegador de acuerdo a las medidas estándar de los distintos dispositivos gracias a una herramienta en el sitio web resizemybrowser.com.

A continuación, screenshots de la pantalla de Inicio en los distintos dispositivos.

Wordpress

Wordpress es un popular software de código abierto que construye el soporte para la creación, administración y edición de contenidos tales como blogs o sitios webs.

Trabaja con PHP (Hypertext Pre-processor) donde el código escrito es ejecutado en el servidor, generando un HTML que es devuelto al usuario. Además del PHP, MySQL (Structured Query Language), es esencial para su funcionamiento, el cual permite gestionar su base de datos.

Entre las muchas razones de su éxito, unas de ellas es la cantidad de desarrolladores que generan Plugins (herramientas que extienden su funcionalidad), Temas (que modifica el diseño front) y la fácil gestión de contenidos así como también de usuarios con diferentes roles de participación dentro del sistema (administrador, editor, autor, colaborador o suscriptor).

Jerarquía

Wordpress trabaja con una serie de Plantillas desde el directorio del tema que se encuentra en uso, donde cada una de ellas “encajan como piezas de un puzzle, generando las páginas del sitio web” [1].

El contenido del sitio se genera entonces gracias a la Jerarquía de Plantillas [2]. De esta manera, Wordpress va preguntando a las Plantillas cuáles y qué partes va llamando, para así construir el HTML con el que el usuario finalmente interactúa.

Cada una de estas Plantillas están compuestas por llamados de PHP. Por ejemplo, se puede elaborar un header en un archivo totalmente independiente nombrado header.php y que es solicitado desde otras plantillas de la siguiente manera: <?php get_header(); ?>.

El archivo raíz de cada tema es el inicio, index.php. Si Wordpress no encuentra una Plantilla solicitada, éste la omite para pasar al siguiente en la jerarquía y así sucesivamente hasta llegar al archivo anteriormente nombrado.

Wordpress jerarquia plantillas.png

Boabab, siguiendo esta estructura jerárquica, trabaja con las siguientes Plantillas:

Plantilla Finalidad
index.php

Inicio del sitio

header.php

Encabezado del sitio

footer.php

Pie de página del sitio

archive.php

Página de Archivo de la publicación del tipo Noticias

archive-tipo_de_publicación.php

Página de Archivo de un tipo de publicación

single-post.php

Página que muestra la publicación del tipo Noticias

single-tipo_de_publicación.php

Página que muestra la publicación

plantilla-enviar-tipo_de_publicación.php

Formulario de envío de publicación

permanente.php

Páginas de contenido personalizado, generadas desde el panel de administración de Wordpress

functions.php

Funciones que permiten personalizar el Tema

comments.php

Exhibición de comentarios

category.php

Página de Categorías

author.php

Página de Autor

search.php

Página de Búsqueda

category.php

Página de Categorías

registro.php

Página para el registro de nuevos usuarios

iniciar-sesion.php

Página para el inicio de sesión

editar-perfil.php

Página para la edición del perfil del usuario

404.php

Página que se despliega al momento de ocurrir un error dentro del sitio

Multilenguaje

Cuando Baobab comenzó ya a tomar una forma definitiva, nos dimos cuenta que no podíamos limitar su implementación en comunidades que hablaran sólo el español. Es por eso que nos decidimos hacerla más universal y traducirla al Inglés.

El idioma que será mostrado en el navegador es señalado en el archivo "wp_config.php", en la raíz de Wordpress de la siguiente manera: define('WPLANG', 'es_ES'), para ser mostrado en español; define('WPLANG', 'en_EN'), en inglés, y así en más de 70 lenguas.

Para traducir el texto se debe crear una carpeta llamada "languages" dentro del Theme de Wordpress que está siendo desarrollado, en este caso "Baobab". Esta carpeta contiene los archivos .MO y .PO con las palabras y su correspondiente traducción. Así, Baobab cuenta con los archivos en_EN.po y en_EN.mo que son los que tienen desde el español al inglés.

Para los futuros usuarios que deseen seguir traduciendo Baobab a otros idiomas, sólo deben descargar el programa POEdit, tomar el archivo "messages.PO", que se encuentra en la misma carpeta, editarlo y generar la traducción. Por ejemplo, si se quiere traducir al Italiano, sólo se debe guardar como it_IT.po e it_IT.mo ó para el alemán de_DE.po y de_DE.mo, etcétera.

Existen básicamente dos funciones que son escritas en las plantillas del tema que contienen el texto que se quiere traducir: <?php _e("Texto a traducir", "Baobab")?> y <?php __("Texto a traducir", "Baobab")?>, donde "Baobab" es la carpeta que contiene el tema y por tanto posee la carpeta "languages". La diferencia entre _e() y __() es que la primera es un echo de un string, mientras que la segunda es utilizada para asignar un string a una variable.

Poedit baobab en EN.png

Construcción del Sitio Baobab

A modo de presentar el framework Baobab, se crea el Sitio Web. Este responde a la necesidad de mostrar de manera clara las premisas del proyecto, lo que lo fundamenta, cual es el problema actual y porqué Baobab es la idea que coincide con la solución a ese problema.

Para que el sitio web sea un canal de comunicación clara con los clientes que puedan utilizar el framework, también consta de una sección de Actualizaciones, Preguntas Frecuentes y un formulario de Contacto presente en todas las páginas, con el fin de crear feedback por parte tanto de clientes como de desarrolladores que deseen formar parte y contribuir en el proyecto Baobab.

El sitio web fue rediseñado a partir de una primera versión realizada en enero del 2012.

Mapa de divs

Ilustraciones

Se exhiben en el Inicio del sitio, por medio de javascript, una serie de dibujos para afirmar el texto, de manera tal que se ilustre el funcionamiento del Tema.

Se trabaja una propuesta para el logo del tema Baobab que viene del análisis de fotografías del árbol. Desde la observación en dibujos y notas, entendemos la figura del baobab desde las curvas del tronco y la ramificación.

Desarrollo icono baobab2.png

Después de abstraer la forma para llegar a una síntesis de la imagen, añadimos detalles en las ramificaciones necesarias para comprender la forma del árbol.

Logo Baobab propuesta final.png


Logo baobab.png

Capturas de Pantalla

Primera Versión

Segunda Versión

Carpeta

La documentación del Proyecto se encuentra en el Sitio de Proyectos de la Escuela de Arquitectura y Diseño[1]. Realizamos una versión navegable de los contenidos a partir de un ejemplo en Codrops[2] y una imprimible generada también desde un documento .html y .css.

Versión Web

Mapa de divs

Capturas de Pantalla

Tal como la Plataforma Baobab, esta carpeta cuenta con un diseño totalmente responsivo, pudiendo cualquier dispositivo con conexión a internet acceder a ella.



Versión Impresa

Elaboramos un segundo documento html, esta vez para la versión impresa de la Carpeta que documenta el Proyecto. Se utilizan tres hojas de estilos, dos de ellas específicas para generar el documento impreso:

  • style.css define atributos generales del documento web e impreso
  • reset.css reajusta los elementos y valores anteriores
  • stylePrint.css define propiedades para documento impreso

Su sintaxis en el documento html es de la siguiente manera:

<link rel="stylesheet" type="text/css" href="cssPrint/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="cssPrint/reset.css" media="print" />
<link rel="stylesheet" type="text/css" href="cssPrint/stylePrint.css" media="print" />

Para el media print, la hoja de estilos stylePrint.css define la propiedad @page, donde generamos el tamaño y los márgenes de cada página del documento.

@page{ 
    size: 18cm 24cm;
    border:0;
    margin: 1.8cm 1.8cm 1cm;
    }

Estructuramos el contenido de dos formas, para las páginas de la izquierda y de la derecha, como lo muestra el mapa de divs.

Mapadivs carpeta dp.png

Estos bloques ordenan los elementos de la página, de manera tal que existe para cada una un encabezado, el contenido, las notas a los costados y la paginación. El detalle en la hoja de estilos es la siguiente:

hgroup{
    height: 1.5cm;
    margin: 0;
    padding: 0;
    display:block;
    overflow: hidden;
    }

.max-right{
    height: 1.5cm;
    width: 2.6cm;
    float:right;
    padding:0;
    margin:0;
    overflow:hidden;
    }

.page{
    width: 14.4cm;
    height: 18cm;
    overflow: hidden;
    margin:0;
    padding:0;
    display:block;
    }

p.counter{
    color: rgb(56,179,242);
    color: device-cmyk(0.78, 0.3, 0.05, 0.0);
    font-family: museo_500regular;
    height: 0.4cm;
    margin: 0;
    padding: 1cm 0 0;
    overflow: hidden;
    page-break-after: always;
    }

p.counter.right{
    text-align: right;
    }

Las otras variables tipográficas y paleta de colores están especificadas en el mismo documento. Todos los valores de tipografía se utilizaron en pt.

Colofón

Baobab: Plataforma para el desarrollo de comunidades es el proyecto de titulación de los alumnos Jaime Pérez Moena y Joaquín Martel Pinochet. Para la programación de la Plataforma, cooperaron Rodrigo Moya (Ingeniero en Ejecución Informática, DuocUC), Miguel Díaz(Estudiante de Ingeniería Civil en Informática, Universidad Técnica Federico Santa María) y Felipe Lavín(Egresado de Psicología PUCV, Front y programación en AyerViernes y clerk.im).

La presente edición fue realizada en septiembre del 2012 en un documento html desde el editor coda para Mac OS X. Consta de seis ejemplares correspondiente al registro entre las fechas comprendidas entre Abril y Noviembre del 2011 en relación al Taller de Diseño Gráfico de Cuarto Año del 2011 y de Diciembre del 2011 a Septiembre del 2012 para el periodo de Titulación 1, 2 y 3.

Su formato es de 18x24cms., utilizando la impresora detallar acá la impresora. La familia tipográfica utilizada es la siguiente:

  • Museo 300, 30pt, color C:59 M:7, Y:0, K:0 para los Capítulos.
  • Museo 500, 14pt, color C:0 M:0 Y:0 K:100 para los Subcapítulos.
  • Museo 700, 11pt, color C:78 M:30 Y:5 K:0 para los Títulos de contenido.
  • Museo 300, 10pt, color C:78 M:30 Y:5 K:0 para los Subtítulos de contenido.
  • Helvetica Neue Light, 7.5pt, color C:0 M:0 Y:0 K:100 para los Párrafos.
  • Helvetica Neue Light Italic, 7pt, color C:0 M:0 Y:0 K:100 para las Notas al margen.
  • Monaco, 6pt, color C:0 M:0 Y:0 K:83 para los bloques de código.

Los ejemplares fueron impresos el insertar fecha acá en la Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso.