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[1]
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
- Links de Interés
- 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.
- Grillas
Afinar tema
- Jerarquías tipográficas
- Jerarquías visuales
- Header
- Evidenciar jerarquías en capas de contenidos agrupados
- Régimen de portada
Modificaciones en los Tipos de Publicación
- Evento: Invita a la Comunidad a un acontecimiento.
- Mercado: Genera Transacciones.
- 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.
- Noticia: Discurso de carácter informativo. Es la divulgación de un hecho.
- 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.
- Idea: Revelación de una propuesta y el modo en que ésta puede ser ejecutada.
Implementación y funcionamiento (1)
- Debates
Implementar votacionesVoto anónimoy verificable- Implementar fecha límite para votar (Inhabilitar las votaciones a partir de la fecha escogida por el usuario).
- Proyectos
Estado del Proyecto (En curso ó Finalizado)Unirse al proyectoMostrar participantes
- Mercado
- Condición: Vendo/Compro/Transacción Finalizada. Ésta última condición, al ser activada por el usuario, elimina el apartado "Contacto".
- Evento
Implementar botón "asistiré"Mostrar quienes participarán del evento- Implementar Georeferencia
- Perfil
Permitir que cada usuario pueda poner su foto de perfil directamenteRelleno o edición de datos públicos (Perfil de Wordpress)Carrera (Arquitectura, Diseño de Objetos, Diseño Gráfico, Diseño).
- 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)
- 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.
- 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.
Enlazar al permalink del post, el .block en hover.Añadir un ícono de Feeds para los tipos de publicación. (Suscripción en Archives).Añadir un cuadro de sugerencias por el usuario a un costado del sitio. Éste debe enlazar a la página "Sugerencias".Botones de los formularios, a la derecha.Edición de los posts sólo por el propio autor.
Implementación y funcionamiento (3)
- Investigación
- Leer Coordination of Work: Towards a Typology
Subir sitio a Google Code, GitHub, Versions ó Source Tree; Un gestor de versiones.- Añadir Less.
- CSS
Corrección de sidebarModificar 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.
Altura mínima de Figcaption (Hover).Título del último post en portada -> Mejorar interletraje.Enlaces y colores¿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ó.
- Dropdown falla en version iPad.
- "
Amarrar" visualmente la última publicación y la explicación del tipo de publicación. Diseñar Perfil de Usuario.
- Configuración
- 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
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
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
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
- 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.
- 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.
- XLS-FO y procesadores PDF
- Antenna House (de pago).
- Css Page Tutorial en PDF.
- Ejemplos.
- Prince (de pago).
- Repositorio en github de Xhtml2pdf (open source).
- Notas del procesador de PDF xhtml2pdf, Elanor McKesson.
- Antenna House (de pago).
- Ayudas
Soporte de browser
- 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
- Diálogo común
- Modelos de gobernabilidad en la escuela
- 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:
- Acciones de la plataforma (Modelo Visual de cómo funciona el sitio web)
- Tipos de publicación
- Partituras de interacción
- Proyecto consta de (Index de Baobab en proyectos.ead.pucv.cl)
- Tema de Wordpress
- Sitio Web
- Carpeta navegable
- Carpeta html IMPRESA
- Video
Viernes 28 Septiembre
- Lámina 1
- Modelos de gobierno estudiantil
- Modelo de palomas y estorninos(seleccionar fragmento)
- Diálogo Común
- Gui (no texto, sino el modelo)
- Desarrollo incremental iterativo (Falta el mono. El texto está ready)
- Lámina 2 y 3
- Modelo Visual GIGANTE (y texto)
- 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:
- tipos de Publicación
- Mercado, Proyecto, Evento, Debate, Idea, Noticia
- formas de comunicación
- Acciones en la plataforma: Publicar, Participar, Deliberar, gestionar
- discusión, planificación, información, transacción, acuerdo
- publicación
- etiquetas, imagen, listas, texto, post, fechas
- 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
- 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