Discusión:Baobab: Plataforma para el desarrollo de comunidades

Lista de mejoras para el Sitio:

Presentación

The Goldilocks Approach

El término proviene del enfoque el cual, frente a la presencia de tres opciones, la opción 1 abarca más de lo necesario, la opción 2 es la medida adecuada y la tercera es insuficiente y hace que la opción 2 parezca más deseable. Trata del equilibrio y la medida necesaria del modo que se presentan las cosas. En este caso, las tres opciones se ajustan a las medidas de resolución.

El enfoque actual del Diseño Web Responsivo esta aun basado a la medida de algunos dispositivos móviles, y como resultado de esto, lo más probable es que quede obsoleto

Lo que se propone es crear un diseño adaptable universal que es independiente de los tamaños y resoluciones estándares de los dispositivos actuales.

Bigger, smaller, or just right

Dejando fuera los dispositivos, el espacio que puede ser visualizado es "grande", "pequeño" o simplemente "adecuado".

• Múltiples columnas (too big)
• Columnas estrechas (too small)
• A una columna (just right)

Descarga

• Jquery
• CSS
• Index con estructura básica HTML
• Demo con la documentación del artículo original

Este es el paquete zip que descarga desde la url

Referencias

Ems, Max-Width, Media Queries and Pattern Translations Artículo

Sitios Web de Referencia

1. Links de Interés
   • Jerarquías de páginas de Wordpress.
   • Etiquetas html5 W3schools.
   • Colección de Sitios Web usando media queries.
   • Sitio Web Ethan Marcotte.
2. Artículos
   • Traducción del Artículo Responsive Web Design de A List Apart.
   • Responsive Design in 3 Steps artículo de web designer wall.
   • How Responsive Design Affects Online Businesses.
3. Grillas
   • The Goldilocks Approach
   • Golden Grid System
   • Gridpak

Afinar tema

1. Jerarquías tipográficas
2. Jerarquías visuales
   • Header
   • Evidenciar jerarquías en capas de contenidos agrupados
   • Régimen de portada

Modificaciones en los Tipos de Publicación

1. Evento: Invita a la Comunidad a un acontecimiento.
2. Mercado: Genera Transacciones.
3. Debate: Genera conversaciones desde diversos puntos de vista. En él se valida la postura del usuario mediante la votación, y que es visible a toda la comunidad.
4. Noticia: Discurso de carácter informativo. Es la divulgación de un hecho.
5. Proyecto: Ayuda a organizar o ejecutar una idea en acciones concretas. Se añade Estado del proyecto, el cual deja de manifiesto si se encuentra En curso ó Finalizado.
6. Idea: Revelación de una propuesta y el modo en que ésta puede ser ejecutada.

Implementación y funcionamiento (1)

1. Debates
   • Implementar votaciones
   • Voto anónimo y verificable
   • Implementar fecha límite para votar (Inhabilitar las votaciones a partir de la fecha escogida por el usuario).
2. Proyectos
   • Estado del Proyecto (En curso ó Finalizado)
   • Unirse al proyecto
   • Mostrar participantes
3. Mercado
   • Condición: Vendo/Compro/Transacción Finalizada. Ésta última condición, al ser activada por el usuario, elimina el apartado "Contacto".
4. Evento
   • Implementar botón "asistiré"
   • Mostrar quienes participarán del evento
   • Implementar Georeferencia
5. Perfil
   • Permitir que cada usuario pueda poner su foto de perfil directamente
   • Relleno o edición de datos públicos (Perfil de Wordpress)
   • Carrera (Arquitectura, Diseño de Objetos, Diseño Gráfico, Diseño).
6. Lista en Singles Pages
   • En un post determinado, el sidebar debe mostrar Posts (de cualquier tipo de publicación) relacionados semánticamente.

Implementación y funcionamiento (2)

1. Portada:
   • Cambiar texto introductorio a cada tipo de post por un párrafo corto. ¿En bold?
   • Botón de Crear-Algo más grande.
   • Afinar Ilustraciones. ¿Grabados?
   • Analizar geometría de portada. ¿3 a 1?, ¿2 a 2?, etc.
2. Estado de los Debates: Usuario logueado/no-logueado y visión del estado de las votaciones. SÓLO FALTA EL USUARIO NO-LOGUEADO Y COMO VE EL ESTADO DE UN DEBATE SIN VOTOS AÚN.
3. Enlazar al permalink del post, el .block en hover.
4. Añadir un ícono de Feeds para los tipos de publicación. (Suscripción en Archives).
5. Añadir un cuadro de sugerencias por el usuario a un costado del sitio. Éste debe enlazar a la página "Sugerencias".
6. Botones de los formularios, a la derecha.
7. Edición de los posts sólo por el propio autor.

Implementación y funcionamiento (3)

1. Investigación
   1. Leer Coordination of Work: Towards a Typology
   2. Subir sitio a Google Code, GitHub, Versions ó Source Tree; Un gestor de versiones.
   3. Añadir Less.
2. CSS
   1. Corrección de sidebar
      • Modificar tipografías
      • ¿Sirve la analogía a la pizarra, o optamos por otra variable? Creo (Joaquín lo dice) que ahora está muy alejada al actual aspecto gráfico del sitio.
   2. Altura mínima de Figcaption (Hover).
   3. Título del último post en portada -> Mejorar interletraje.
   4. Enlaces y colores
   5. ¿Rojo, azul? (este azul #127ec1 fue escogido)
      • En las páginas de archivo, en último post tiene el título en rojo. Los blocks no. Posibilidad de colocarlos del mismo color y analizar. Nota: Se probó y no convenció.
   6. Dropdown falla en version iPad.
   7. "Amarrar" visualmente la última publicación y la explicación del tipo de publicación.
   8. Diseñar Perfil de Usuario.
3. Configuración
   1. Valores Parametrizables
   • ¿Cómo se vería, en caso de que un posible usuario pudiese subir un logo para el header, o imágenes para los tipos de publicación, en el panel de administración? (Pantallazos). NOTA: Es personalizable desde el panel de administración, el logo y el fondo del sitio. Las imágenes de los tipos de publicación tienen su imagen por defecto en el tema.

Notas

El pueblo de estorninos

Vuelo de estorninos.

el pueblo de palomas de Rimbaud que cantaba Godo, y lo cantaba como el pueblo de estorninos que vuelan en zig-zag. Que cada cual no se aísle, que comience a cobrar el hábito de no aislarse, para que después cuando deje la Escuela, no sea un aislado sino que uno que siempre esté en una situación de pueblo de palomas, de pueblo de estorninos. Taller de Amereida, Clase 11, Trimestre II, 2004

Otras Referencias

• How Responsive Design Affects Online Businesses

Propuesta de Logotipo

Baobab

Estorninos

Cambios tipo de publicación: Noticias

• Pasa a tomar los posts creados desde el panel de administración de wordpress.
• Al no ser ya un custom-post, los archivos single-noticia.php, plantilla-envia-noticia.php y "archive-noticia.php" no existen.

• El archive.php y single.php deben leer automaticamente los posts de "noticias"

Documentación de últimos cambios

• Tema
  • Sólo tema (no plugin)
  • No se crean tablas
  • Logueo por front
  • Creación de usuario por el front
  • Avatar activado
  • Editor de Perfil
• .less
  • Bloques de publicaciones
  • Portadas

Tema Baobab

Creación de Usuario

Interfaz para registrarse en un Sitio con el tema Baobab

El registro de Usuario se reduce a llenar cuatro campos obligatorios. Nombre y Apellido registran el nombre del usuario que sera visible para la comunidad; correo electrónico para acceder al sitio y entregar notificaciones al usuario; contraseña escogida por el propio usuario al crear su cuenta.

Logueo

Interfaz de inicio de Sesión en un Sitio con el tema Baobab

Los datos requeridos para iniciar sesión en un sitio web con el tema Baobab son sólo dos: el correo electrónico registrado, y la contraseña para acceder.

Editor de Perfil

Editar Perfil

Previo a los cambios, la acción de editar los datos personales se debía realizar dentro del panel de administración de Wordpress. Encontrarse con dos interfaces distintas (la propuesta en el Sitio Web y la del Panel de Administración por defecto de wordpress) afectaba la propia experiencia del usuario. Decidimos cambiar y adecuar el tema de manera tal que esta acción se realice en la misma interfaz del sitio web, con editar-perfil.php.

Los datos como nombre, apellido o redactar una pequeña biografía para darse a conocer se muestra en el mismo Perfil como texto. Ahora, si el usuario desea añadir información de otras redes y contacto como su sitio web, perfil de facebook o twitter, debe llenar los campos en los que aparecen los íconos. Estos se mostraran en el Perfil con el ícono correspondiente sólo si el usuario ha rellenado esos campos. Los datos pueden ser cambiados en cualquier momento que el usuario lo requiera.

Avatar

Subiendo avatar desde el Perfil de Usuario

El avatar de usuario puede cambiarse desde el Perfil de Usuario, sin necesidad de acceder al editor de perfil. La imagen escogida se recorta y genera automáticamente el avatar.

Falta: Activar imagen de avatar por defecto

Less

• ¿Qué es?
• Notación
• Archivos

Bloques de Publicación

Baobab muestra el contenido total de las publicaciones en bloques dinámicos que adaptan su ubicación según el tamaño de pantalla en la que se esta visualizando. Cada bloque contiene:

• El tipo de publicación con su respectivo ícono
• El titulo de la publicación
• Información relevante:
  • Proyecto: estado del proyecto
  • Debate: fecha de término del debate
  • Evento: fecha del evento.
  • Mercado: condición(compra o venta) y precio
  • Noticias e Ideas no tienen información adicional relevante
• Fecha de cuando fue publicada
• Autor de la publicación

Portada

Utilizando el recurso de filtros con css, decidimos implementar la noticia destacada de cada espacio como una Portada animada.

El contenedor de 100% de ancho muestra la Portada con la imagen de la publicación utilizada como fondo del div dentro de la propiedad background-image. El contenedor completo esta en un estado inicial con el filtro en escala de gris activado y al pasar el cursor sobre ella, se desactiva en una transición de 1 segundo. Cuidando el contraste entre la tipografía y la imagen de fondo, se mantiene una trama negra transparente de manera que el texto siga siendo visible.

En el caso de que la publicación destacada no tenga imagen, se añade una clase al div que añade un color de fondo(para no interfir con la función anterior de utilizar la propiedad background-image).

<?php if ( has_post_thumbnail() ) {// check if the post has a Post Thumbnail assigned to it.
	}else{
		echo'<script>
		$("div").addClass(function(index, currentClass) {
		var addedClass;
		if ( currentClass === "top-news" ) {
			addedClass = "noImage";
			}
		return addedClass;
		});
		</script>';
		} 
	?>

Portada: estado inicial


Portada: hover

Construcción de Carpeta en html5

Links de Referencia

1. Visualización de libros con HTML5
   • Updates HTML5.
   • "20 things I learned about browsers and the web", libro ilustrado usando HTML5.
   • Artículo de caso de estudio por HTML5 ROCKS sobre el libro ilustrado.
   • Tutorial Moleskine notebook con jquery.
   • Plugin jquery para mostrar el contenido web en un layout adaptado para ser visualizado como libro.
2. Imprimiendo libros con HTML5
   • Building Books with CSS3, Artículo de "A List Apart".
   • CSS3 Module: Paged Media, W3C.
   • CSS Generated Content for Paged Media Module, W3C.
3. XLS-FO y procesadores PDF
   • Antenna House (de pago).
     1. Css Page Tutorial en PDF.
     2. Ejemplos.
   • Prince (de pago).
   • Repositorio en github de Xhtml2pdf (open source).
     1. Notas del procesador de PDF xhtml2pdf, Elanor McKesson.
4. Ayudas
   • Imprimir otra ventana

Soporte de browser

1. Printing (fuente)
   • @page
   • page
   • size
   • marks
   • margin, margin-top, margin-left, margin-bottom, margin-right
   • page-break-before
   • page-break-after
   • page-break-inside
   • orphans
   • widows

Lámina

Por un lado, tenemos el relato del video, el discurso documentado del Proyecto en la carpeta. La lámina debe contarlo al ser expuesta.

• Baobab quiere ser un canal donde convergen las conversaciones y toma de decisiones de una comunidad (y queda registro de ello)

Contenido

• intro
  1. Diálogo común
  2. Modelos de gobernabilidad en la escuela
  3. Modelo de Palomas y Estorninos
• Less
  • Variables
  • Mixins
  • Estilos gráficos (la economía del lenguaje)
• Responsive
  • Introducción
  • Definiciones
  • Construcción
  • Escala a distintas resoluciones (imagen)
• Wordpress
  • Esquema de jerarquías(similar a un mapa de navegación)
  • Multilenguaje

• GUI (modelo Garret)
• Esquema de capas de una página web como unidad (fundamento*, estructura, código, estilos gráficos, pantalla)

• Mapa de Navegación
• Evolución de pantallas (4)(sólo las de título)(interfaces anteriores a la que aparece en el imac)
  • Index
  • Single
  • Archive

• La lámina que va junto a los imac contiene:
  1. Acciones de la plataforma (Modelo Visual de cómo funciona el sitio web)
  2. Tipos de publicación
  3. Partituras de interacción

• Proyecto consta de (Index de Baobab en proyectos.ead.pucv.cl)
  1. Tema de Wordpress
  2. Sitio Web
  3. Carpeta navegable
  4. Carpeta html IMPRESA
  5. Video

Viernes 28 Septiembre

1. Lámina 1
   • Modelos de gobierno estudiantil
   • Modelo de palomas y estorninos(seleccionar fragmento)
   • Diálogo Común
     • Porqué hacer un patrón replicable
   • Gui (no texto, sino el modelo)
   • Desarrollo incremental iterativo (Falta el mono. El texto está ready)
2. Lámina 2 y 3
   • Modelo Visual GIGANTE (y texto)
3. Lámina 4
   • Google Charts (Listo...o eso creo)
   • Google Maps (Listo...o eso creo)
   • Less
     • Variables
     • Mixins
     • Estilos gráficos (la economía del lenguaje)
   • Responsive
     • Introducción
     • Definiciones
     • Construcción
     • Escala a distintas resoluciones (imagen)
   • Wordpress
     • Esquema de jerarquías(similar a un mapa de navegación)
     • Multilenguaje

Modelo Visual

Palabras Clave:

1. tipos de Publicación
   • Mercado, Proyecto, Evento, Debate, Idea, Noticia
2. formas de comunicación
   • Acciones en la plataforma: Publicar, Participar, Deliberar, gestionar
   • discusión, planificación, información, transacción, acuerdo
3. publicación
   • etiquetas, imagen, listas, texto, post, fechas
4. comunidades
   • ideas, lenguaje, convivencia, vínculo, relación, co-participación, libertades, palabra, acción, crecimiento, intereses, espacio, generación, temas sociales, interacción, wordpress, opinión, solución, computador, internet, redes, cuenta, usuario, botón de acción, descripción, opciones, facebook, twitter, tablets, móvil, pc, resultados, validar postura, comentarios, registro, pares, etapas, estados, compromiso, acuerdo
5. conceptos
   • respeto, convivencia, emoción, confianza, control, reflexión, sistema, miembros, programa, lugar, personal, decisión, organización, objetivos, sueños, promesas, eficacia, signo, símbolo, generalidad, especificidad, lenguaje, lengua, habla, estructura, síntesis, ágil, orgánico, legible, convención, investigación, observación, comprensión

To do

• Conseguir 2 amarras (seguros de bicicleta) para imac
• Comprar 2 mouse compatibles con imac