Cรกdiz 27 de NOVIEMBRE de 2015
índice Introducción 3 El proyecto en su contexto 7 Hacia la escuela del futuro 9 Educar también es seducir 15 Un proyecto social 19 Aspectos técnicos 21 Aspectos funcionales 23 Aspectos estéticos 27 Aspectos económicos 33 Conclusiones 35 Bibliografía 36 Anexo desplegable: Mapa de Navegación Wireframes y pruebas de prototipado
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Este proyecto, como indiqué desde un principio, nace con la intención de formar parte de la decisión del Colegio Guadalete (El Puerto de Santa María) de ir integrando paulatinamente las nuevas tecnologías, y más concretamente la impementación en el aula del libro electrónico y/o pdf multimedia interactivo, entre sus metodologías docentes. Y como también mencioné al principio, vocacionalmente el proyecto tiende a servir de transición entre las técnicas, materiales y metodologías docentes tradicionales, y las nuevas tecnologías. Es decir, convertirse en el punto de partida de una nueva experiencia en cuanto a metodología y tecnología aplicada a la educación, y así implementar los resultados pedagógicos a través de las ventajas y nuevas funcionalidades que ofrecen las plataformas digitales. Debo reconocer que aunque la idea del proyecto me surge desde la convicción del gran aporte y avance que puede suponer la introducción de la era digital de una forma armónica y eficiente en el centro educativo y más concretamente el aula. Una vez fuí recopilando información, entendiendo las singularidades, ventajas y handicaps de los aspectos técnicos e infraestructurales y, ¿por qué no?, de la competencia en el sector, la idea a ido desarrollándose cada vez más en mi cabeza hacia la creación de una entidad o empresa que ofrezca unos servicios concretos basados en la personalización y customización de contenidos; y hacia la sinergía de las distintas disciplinas que pueden interrelacionarse en la labor educativa, para conseguir un servicio que realmente fuese atractivo para el cliente potencial y que además se diferenciase de la competencia. Respecto a esto último se podría decir que el proyecto pasa de ser una idea a desarrollar en la que aprender a salvar los hadicaps técnicos en cuanto a formatos, plataformas e infraestructuras económicas para poder llevarlo a cabo con eficiencia. A preocuparse más por crear un servicio que entienda las dificultades anteriores y que se involucre con el cliente para poder salvarlas de la manera más eficiente y productiva, dependiendo del contexto de cada cual y de sus necesidades concretas. Es decir, ofrecer un servicio basado en la colaboración entre ambas partes. Por un lado acercarse al aula, centro o ente educativo público o privado, o al particular y entender sus necesidades y sus limitaciones, asesorándoles así con respecto al mejor formato para su caso particular, para su presupuesto y para sus necesidades. Guiándoles además con respecto a las infraestructuras técnicas que necesitarían cubrir para llevar su caso concreto al éxito. Esto sería una primera fase del servicio, seguida de otra fase en la que una vez cerrados los puntos anteriores se pasaría a colaborar directamente con los responsables del centro educativo, del aula o del particular en concreto para la creación de los contenidos digitales y la interrelación entre ellos y los agentes que participan en el proceso educativo ( alumnos, profesores, pades...). En definitiva, dar el mejor apoyo tecnológico y de diseño a cada caso concreto.
3
Proyecto educapp
Alumno Juan Antonio Brenes Caro
Esta nueva metodología digital aplicada a las aulas o las creación de contenidos didácticos en general, quedamos en que se vertebraría básicamente sobre tres pilares: - Un libro digital interactivo: libro de texto tradicional traducido al entrono digital que haga al alumno interactuar con él, a involucrarse con el aprendizaje y que ayude a la comprensión de contenidos. - Un blog/web gestionado por el docente que sirva como punto de encuentro entre éste y los alumnos tanto para material didáctico complementario, noticias relacionadas, trabajos o pruebas específicos, coordinación de la asignatura, avisos... - Material de apoyo para la explicación y exposición en clase por parte del docente. Una vez asentado esto es importante que el sistema creado a partir de estos tres ejes básicos se interrelacionen y complementen entre sí de una manera lógica, fluída y eficiente. Para ello y desde el punto de vista más puramente del diseño, hay que dotar a dichos ejes básicos de unidad, continuidad y coherencia gráfica para que el alumnos se sienta en todo momento dentro de un mismo espacio educativo en la que las forma de asimilar la información y desenvolverse entre ella responda a unas mismas reglas semióticas, estructurales y pedagógicas. Otro objetivo importante a tratar desde el punto de vista del diseño y experiencia de usuario (UX) será el diseño de la información, su arquitectura y el enfoque gráfico-visual. De este modo y teniendo esto en cuenta, siempre que se pueda se intentará reforzar e implementar los contenidos desde el punto de vista gráfico y la interactividad con el alumno como vía de aprendizaje y refuerzo en la asimilación de contenidos. Todo esto se materializaría en el objetivo de facilitar la actividad docente, haciéndola más eficiente, dinámica y moderna. Y por otro lado, responder a las necesidades reales del alumno poniendo a su disposición recursos que le ayuden al estudio, implementen su curiosidad y motivación, y que le hagan involucrarse en su propio aprendizaje.
4
2º Gráfica Publicitaria 2014/2015
El
Pro-
yecto en su con-
texto
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Respecto al contexto actual de las nuevas tecnologías aplicadas a la educación podemos encotrar hoy día muchas fórmulas con plataformas diferentes y en distintos grados de desarrollo o integración. Podemos encontrar desde el clásico ya, libro electrónico en epub, a plataformas digitales virtuales como puede ser Moodle en la que se pueden consultar, interactuar y generar recursos didácticos. Bajo mi punto de vista casi la gran mayoría de estas plataformas suelen adolecer de una falta importante de diseño y de una adecuación real a cada caso concreto. Falta personalización y customización de dichos proyectos a unas necesidades concretas en un centro determinado. Es ahí donde creo que se encuentra el nicho de mercado por explotar, y la posibilidad real de implementar educativamente un proyecto de estas carácterísticas. En mi caso concreto se podría decir que he entendido el proyecto en clave de un contexto, unas necesidades y unas posibilidades específicas. Es por ello que decido elegir la tablet y más concretamente un iPad, el formato híbrido de libro digital insertado en una aplicación, y la generación de contenidos a partir del ya existente creado por el profesor de la asignatura con el fin principal de preparar a sus alumnos de la manera más eficiente para la prueba de acceso a la universidad (PAU). Por todo esto, el proyecto lo comienzo básicamente recopilando información e investigando lo máximo posible acerca de plataformas digitales, posibilidades y limitaciones técnicas, proyectos parecidos y la cuota de éxito conseguido. Además informarme sobre el nivel de implantación de nuevas tecnologías en las aulas y centros de estudio, y ver el termómetro de apuesta por dichas fórmulas y los handicap que se pueden encontrar en su implantación.
7
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Lo que parece claro es que ha cambiado radicalmente la forma en que los alumnos de hoy día se acercan a la información y el conocimiento. Lo digital es su mundo natural, en el que se mueven. ¿Debe cambiar, por tanto, la forma de enseñarles? Lo primero para contestar a esta pregunta y para valorar la viabilidad del proyecto era investigar sobre la aceptación de lo digital en las aulas y más concretamente de las tablets, iPads y formatos interactivos. Y con respecto a esto, para ser justos, y aunque en su mayoría pienso que la aceptación y satisfacción es mayor al rechazo, me gustaría exponer ambas posiciones porque de valorar ambos puntos de vista surge el desarrollo y la evolución en el proyecto como anteriormente he citado. Empezando por el rechazo, me centraré básicamente en la opinión expresada por Sharon Noguchi, escritora del The Mercury News. Noguchi en su artículo se pregunta: ¿Llegará un momento en el que los alumnos estudien en el aula sólo con un iPad?. Y asu vez se responde: Parece ser que no, por lo menos a corto plazo. Lo que plantea Noguchi básicamente es que aunque parece una opción muy atractiva hay toda una serie de inconvenientes que harán que esta visión no se haga realidad por lo menos en un breve período de tiempo. Las razones primeramente son la necesidad de una inversión enorme en unos tiempos que son más que ajustados. La necesidad de una preparación específica por parte de los docentes. Y la necesidad de comprar cada año el software (con esto último personalmente estoy totalmente en desacuerdo ya que puedes crear un modelo que sea parecido al mantenimiento de una web. Dependiendo del cliente y de las necesidades se pueden utilizar fórmulas de mercado distintas para amortizar el proyecto). Desde el punto de vista técnico también se encuentran otros artículos que abordan el tema resaltando los principales puntos a tener en cuenta, que enumeraré brevemente en la siguiente página.
9
Proyecto educapp
Alumno Juan Antonio Brenes Caro
1. Compartir tablets entre varios estudiantes
Las tablets están diseñados teniendo en mente un único usuario y por tanto plan tean ciertos retos cuando son compartidos entre varios estudiantes en diferentes clases, como ocurre con los netbooks o PCs de sobremesa.
2. Consumo de contenido digital versus creación del mismo
Las tablets desde sus inicios han sido orientados hacia el consumo de contenido digital más que a la creación del mismo.
3. Incompatibilidad de las tablets con aplicaciones de software del centro
Las tablets pueden presentar incompatibilidades con aplicaciones de software que ya se usan en el aula.
4. Limitaciones para transferir contenido digital de un tablet a otro
Incompatibildad entre formatos y/o dispositivos.
5. Falta de disponibilidad de libros de textos y ebooks académicos
Aunque las principales editoriales de libros de texto en España han ido lanzando libros y contenidos digitales, la oferta es todavía limitada y no está disponible para ser usada en tablets.
Imagínense ante esto entonces, el ofrecer un servicio y producto adaptado lo más posible a las necesidades concretas de cada caso, a las directrices didácticas y pedagógicas de un centro determinado, y a los contenidos y su estructuración según el criterio y asesoramiento del profesor/es que va a impartir la clase...
6. Dificultad para descubrir aplicaciones para la edad de nuestros alumnos Uno de los principales retos a los que los profesores se enfrentan a la hora de introducir la tablet en el aula, es la dificultad para descubrir ebooks y aplicaciones que concuerden con el curso que enseñamos o el nivel de dificultad que busca mos.
10
Con respecto a esto me remito al punto anterior. Es aquí donde reside el punto de partida para aprovechar el nicho de mercado que se crea.
2º Gráfica Publicitaria 2014/2015
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Siguiendo con Noguchi y con respecto a Apple y su fórmula, en su artículo se recalca la idea de que los usuarios terminaran optando por desvincularse de estas plataformas (Apple, iPad, iBooks...) para optar por un modelo de código abierto. bajo mi forma de verlo esto implementa mi idea de empresa y de servicio a prestar. Habrá quien quiera, pueda y decida apostar por un modelo técnológico exclusivo, privado y más caro y habrá otros que por necesidades necesiten algo más asequible económicamente o incluso desde el punto de vista del formato o dispositivo... de ahí de dar un servicio caso por caso para elegir que se adpata mejor a cada contexto educativo, social y económico. Pudiendo incluso ofertar desde un principio distintos paquetes predeterminados con cualidades distintas desde donde partir para customizar el servico según el caso y el cliente. Por último, el artículo hace hincapié en la aceptación por parte de los docentes y de la desconcentración que puede provocar el acceso a internet, redes sociales, etc a traves del dispositivo tablet o iPad. Yo pienso que para desconcentrarse siempre hay algo, siempre hay tentación, sea la red social, seal el compañero del al lado o sea que tengo el móvil escondido durante la clase. Lo importante será implementar el modelo para hacerlo lo más ameno y atractivo a ojos del alumno. Desde el otro punto de vista nos encontramos desde estudios por parte de empresas tecnológicas, a articulos generales de actualidad que tratan el tema, a la propia opinión del profesor junto con el que he trabajado y lo que me transmite con respecto a las primeras incursiones hechas en su centro educativo y las reacciones de los padres. Respecto a esto último lo resumiré en que básicamente lo que me dice es que los padres al principio en buena parte son reticentes e incluso algunos contrarios, pero que después de ver el desarrollo y el resultado (hasta ahora en niveles inferiores a los que se dirige este proyecto concreto) quedan encantados. En dichos artículos (como el que he citado anteriormente) o estudios se recalca la facilidad de uso de estos dispositivos, la ligereza para llevarlos en la mochila y sobre todo para captar la atención del alumno, que siente que aprende mientras juega. A los alumnos de todas las edades les encantan. Otros refieren que ya existen colegios en España que trabajan ya con tablets para aprender grafomotricidad, lectoescritura en inglés y español, matemáticas, plástica y música. Y que en el mundo de la educación cada vez más se debate sobre si invertir o no en estas tecnologías móviles. Es más, el artículo anteriorente mencionado con respecto a la enumeración de dificultades técnicas termina así:
11
Proyecto educapp
Alumno Juan Antonio Brenes Caro
“A pesar de las dificultades mencionadas, si los estudiantes desean tablets y e-readers, si estos dispositivos incrementan su entusiasmo por la lectura o si aplicaciones como “Los Elementos” transforman el estudio de la tabla periódica en una experiencia mucho más interesante y amena, los centros educativos no tendrán más remedio que buscar maneras para que los tablets formen parte del aprendizaje dentro del aula, incluso si por el momento implica haber de superar algunos inconvenientes.” Con respecto a las ventajas que supone este nuevo modelo educativo que se apoya en el entorno digital, TIC y de nuevas tecnologías no quiero extenderme mucho ya que me remito al díptico informativo y publicitario que incluyo como parte del proyecto. En él se explican desde las bondades de esta nueva forma de entender el proceso educativo a las neceidades técnicas y de infracestructura que serían necesarias para implantarlo (entendido siempre desde el caso concreto que supone este proyecto, ya que he dicho que la idea inicial de crear recursos digitales didácticos centrados básicamente en una app/libro digital puede verse modificada o adaptada según cada caso, pasando así de ofrecer un producto a ofecer un servicio más completo y sensible a las necesidades rales del gremio y de los agentes que participan de él). Aún así me gustaría reseñar algo importante desde mi punto de vista, y que refuerza la idea de que no podemos ir contra los tiempos, la sociedad cambia, nosotros cambiamos y por lo tanto tenemos que adaptarnos y adaptar todo a esa nueva realidad. Y la educación nopuede ser menos. “Los estudiantes de hoy -desde la guardería a la universidad- representan las primeras generaciones que han crecido con las nuevas tecnologías. Han pasado toda su vida rodeados de, y usando, ordenadores, videojuegos, reproductores digitales de música, videocámaras, móviles y todos los demás juguetes y herramientas de la era digital. [...] Como resultado de este entorno omnipresente y del enorme volumen de su interacción con él, los estudiantes de hoy piensan y procesan la información de manera fundamentalmente diferente a sus predecesores.” MARK PRENSKY, Nativos digitales, inmigrantes digitales.
12
2º Gráfica Publicitaria 2014/2015
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
En lo que sería el plano más puramente estético del proyecto es de resaltar el poco cuidado con el que se han llevado a cabo ideas similares o que apuestan por las TIC y el entorno digital para mejorar la educación. Si además se suman proyectos no del todo bien desarrollados desde el punto de vista del diseño y de la arquitectura de la información, el resultado termina siendo a mi parecer bastante desilusionante ya que las expectativas del alumno se convierten en decepción al encontrarse con algo nada atractivo que le seduzca a continuar, y que además resulta confuso en su manejo. Por lo tanto, dicho esto, el reto en este plano era el de encontrar una estética, un diseño gráfico, que a la vez que resultase atractivo para el usuario, respondiese también de manera eficaz a una usabilidad fácil, intuitiva y cómoda. El diseño de una arquitectura de información en la que el usuario tuviese un rápido acceso a distintos bloques de contenidos de manera casi instantánea, y la asimilación de estos de la forma más cómoda posible. Estos dos aspectos del desarrollo del proyecto los encaré por un lado, el estético, investigando e intentado traerme a la propia interfaz y su contenido referencias actuales que van desde las propias apps, la web, las revistas y magazines tanto físicos como digitales, las redes sociales ahora tan presentes en nuestro día a día; y todo ello sin perder de vista la idea de conservar el formato libro dentro de lo que me permitiese las propias necesidades del proyecto. Esto último además apoyándome en el estudio realizado por una estudiante de maestría para el proyecto de libros interactivos llevado a cabo por el Centre of Spoken Language Research de la Universidad de Colorado (apéndice de la memoria). En él, una de las recomendaciones dadas es la intentar mantener dentro de lo posible la estructura de los libros de texto físicos tradiconales. Una vez repasados los aspectos contextuales y condicionantes relacionados con el proyecto tocaba decidir sobre como armonizar todo eso con una estética actual y atractiva. Para ello lo primero era determinar la plataforma y el dispositivo a utilizar para tal fin. En este sentido y teniendo en cuenta las incompatibilidades antes mencionadas que se pueden llegar a dar entre softwares y hardwares, lo interesante era encontrar una fórmula que me permitiese trabajar para el ábanico más amplio posible de dispositivos tablet. Y sobre todo, porque al igual que en cualquier otra rama del diseño, se debe empezar a trabajar sabiendo para qué diseñamos y qué peculiaridades encontramos (tanto técnicas como puramente de diseño). Y como mi idea desde el principio eran los dispositivos tablets, la idea era encontrar una fórmula que me dejase trabajar desde el principio enfocado por lo menos a los dos principales sistemas operativos de dichos dispositivos: iOS y Android. Lo segundo, fue para mi modo de entender, determinar que formato quería darle al libro sobre todo (ya que los otros dos aspectos de proyecto venían más fácilmente definidos por sí mismos: blog y proyecciones). Para ello lo más lógico me pareció que era una aplicación, un app. ¿Y esto por qué? Bueno en primer lugar porque como he ido comentando antes,
15
Proyecto educapp
Alumno Juan Antonio Brenes Caro
la idea es la de dar un servico adaptadoa cada caso, pero en este que podía de principio elegir yo, lo lógico era encontrar dentro de mis posibilidades la fórmula más atractiva para presentar el proyecto. La app me pareció lo más idóneo por temas de actualidad y seguridad. Ya que si queremos que sea un proyecto rentable, hoy día habría que buscar la fórmula de evitar dentro de lo posible la piratería. En este sentido la app me da una serie de garantías mayores a otros formatos (pdf interactivo, e-pub, e-book..) en cuanto a seguridad, así como a control total sobre sus contenido (el tema de la maquetación tipográfica por ejemplo en e-pubs, donde son adaptables por el propio usuario... yo no quería eso, quería un control total en estos aspectos). Pero claro, decidido esto tenía que volver al punto primero para ver si podía hacer viable estas decisiones. Por un lado quería las tablets como dispositivos principales y por otro crear una app que a su vez contuviese un formato que se acerca más a un libro digital o aun cd-rom que a una aplicación misma. Acerca de esto investigué mucho, incluso seguía haciéndolo cuando ya había empezado a decidir ciertos aspectos formales del proyecto. Finalmente y con el proyecto avanzado dí con una solución que me pareció viable: una empresa llamada 480º Interactive. El servicio que ofrecen es la crear o convertir un documento inDesign en una app tanto para Android com para iOS, con distintos paquetes ofertados y la psibilidad de ir actualizando y manteniendo los contenidos de ésta. Por tanto, tenía por fin la fórmula de hacer viable mi idea de una forma económicamente factible. Ahora tocaba decidirse por una líneas estéticas y de diseño. Para esto hay que decir que el nuevo reto era diseñar según guias de estilo. Y es básicamente por los mayores condicionantes que presentaba Apple a la hora de aceptar una aplicación para poder incluirla en la app Store, que me decidí por el iPad y por iOS como principal referente en cuanto a la guía de estilo. Aún así debo decir que por la naturaleza del proyecto, y por las necesidades técnicas que podrían darse en fase de desarrollo, se puede decir que la app a crear es en muchos de sus aspectos lo que se llama una app híbrida. Híbrida en el sentido de que es posible la necesidad de articular una app en la que los contenidos esten alojados fuera de esta en una base de datos de un servidor; que estéticamente tiene como una primera parte de navegación (donde más responde a la guia de estilo iOS) que sería la de app pura, y una segunda que responde más a los propios contenidos y que funciona más parecido a un libro digital, una web, etc, que serían los propios contenidos de la asignatura. Todo esto lo menciono ya que la idea era también armonizar dentro de lo posible un diseño que teniendo identidad propia respondiese a las tendencia actuales en el diseño de apps y que técnicamente respondiese bien en ambos sitemas operativos en cuanto a los requisitos más puramente técnicos y formales que imponen.
16
2º Gráfica Publicitaria 2014/2015
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
En resumen la idea es crear una app que responda básicamente a la navegación general en cuanto a contenidos, y que aloje, según cada caso, unos contenidos diferentes, un libro diferente (en este caso biología de segundo de bachillerato). Centrándonos entonces en los aspectos puramente más estéticos puedo decir que las principales referencias han sido la guía de estilo de iOS, los propios libros de texto, las revistas digitales y magazines. Aspectos que iré desarrollando poco a poco a lo largo de esta memoria, con la incidencia de cada uno de ellos en los distintos aspectos del proyecto.
17
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
La idea de llevar a cabo este proyecto surge de la necesidad o voluntad de intentar tener en cuenta lo que se puede aportar desde el punto del diseño a la sociedad. Está claro que uno de los aspectos más importantes que definen a una comunidad es la educación. Ante esto mi idea era dentro de mis limitaciones poder llevar a cabo un proyecto que colaborase a construir una educación mejor, y la puesta a disposición de mejores herramientas para llevar esta a cabo. Creo que es por esto ,como explico antes junto a las dificultades ténicas, que el proyecto también evoluciona de una idea de producto concreto, a la creación de un servicio más global centrado en la personalización caso por caso. Esto además me supone una ampliación de los elementos a desarrollar, ya que para darle consistencia al concepto de servicio que quería prestar, estaría bien crear una marca que representase este servicio a prestar y sus valores. Por otro lado el proyecto, al ser concevido de esta manera consigue dejar abiertas muchas más puertas a la hora de poder desarrollar sus competencias y ámbitos por donde moverse. Es decir, el proyecto se abre a cualquier tipo de ente educativo e incluso se puede convertir en un proyecto que presentar a un ente público que quiera apostar por las nuevas tecnologías, por una educación de calidad y por una educación, incluso más barata, ya que podría ser una inversión bastante asequible para poder crear unos libros de texto que poner a disposición de la educación pública y así abaratar en mucho el desembolso que tienen que hacer muchas familias en material escolar, y en unos momentos de crisis en que se hace aún más difícil. Si nos vamos a lo puramente relacionado con el ciclo formativo, el proyecto se presenta como un desafío bastante amplio ya que toca muchas de las materias vistas a lo largo del curso com pueden ser composición, tipografía, manejo de programas, maquetación, publicidad... y como plus, me obliga a aprender y desarrollar otros aspectos que no se ha visto en el curso o al menos no en profundidad, como son el diseño web y de apps, la arquitectura de información, la experiencia de usuario...
19
ASPECTOS
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Como iba contando antes, debido a la naturaleza del proyecto y los numerosos aspectos técnicos que había que controlar y que antes de comenzar desconocía, me puse enseguida a indagar hasta dar con la mejor fórmula para sacarlo adelante. Además, me parecía fundamental conocer los límites técnicos en los que me iba a mover antes de empezar a diseñar. Lo primero tras elegir el soporte (iPad) así como la plataforma (una app) era encontrar la forma de llevar eso a cabo de la forma más asequible (económica y funcionalmente). Al no ser desarrollador tenía que encontra a uno que lo trabajase o otra forma de llevar esto a cabo. Como cuento antes, tras ahaber ya empezado un poco con el diseño, logré dar con 480ª Interactive. Con ellos necesitaría crear un archivo inDesign para luego convertirlo en una app. Respecto a la inversión me parecía más asequible que tener que pagar a un programador (esto se desarrolla más pormenorizadamente en los aspectos económicos de la memoria), y el formato inDesign me dejaba margen a crear plantillas de la propia app que luego puediese adaptar a un formato quizá distinto de la app atraves de 480º Interactive. Con esto me refiero a que si pretendo ir caso por caso y en alguno determinado no interesa o no hay presupuesto para ello, siempre tengo la opción de dejarlo en un pdf interactivo o en un simple pdf, por ejemplo. Otro aspecto importante desde el punto de vista técnico a la hora de diseñar ha sido la elección del iPad Retina, lo cual me ha obligado a diseñar y optimizar las imágenes a doble pixel de resolución, es decir a 1536x2048 px. Y para terminar en este apartado reseñar el hecho de que la idea, tal y como comenté en el anteproyecto, era acercaros lo máximo posible a la experiencia de lo que sería la propia aplicación terminada. Para ello opté por utilizar invision como la mejor forma de conseguirlo a través del prototipado. Esto también ha supuesto una gran influencia a la hora de trabajar los archivos, ya que en vez de montar el proyecto directamente sobre lo que sería el arte final necesario para entregar a 480º Interactive, se ha hecho siempre con el pensamiento de que pudiese pfuncionar en invision y en un iPad como si fuese casi que la aplicación ya terminada. Elijo esta fórmula respecto a lo que artes finales se refier eporque además me permitirá más adelante pornerlo a disposición del profesor y sobre todo de los alumnos para así conseguir un feedback de calida que me ayude a terminar de pulir el proyecto y corregir lo necesario. Esta opción además implica otro tipo de limitaciones ténicas como son por ejemplo las animaciones, las cuales tenía que crear en gif animado para que funcionasen en invision, y no directamente en video, flash o cualquier otro formato que sí podría ser incluido en la aplicación final.
21
ASPECTOS
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Una vez tomadas o cerradas las decisiones básicas, tocaba preocuparse de construir una disposición de la información, contenidos y navegación de la manera más eficiente posible. En este apartado del proyecto, por tanto, se trata de construir una buena arquitectura de información y una navegación rápida, fácil e intuitiva. Para esto empecé por estudiar bien los contenidos del libro, sus temas, apartados y subapartados, y los bloques de información. La app se ha construido básicamente sobre esta última idea. El fin era tener por un lado una navegación general y una segunda navegación propia de los contenidos y que estuvieran agrupados y conectados según ya no sólo el temario, sino según sus aparatados y los bloques de información conectados entre sí. Para esto se trabajan unos wireframes de la interfaz de la app y un mapa de navegación entre sus contenidos. Referente a la navegación la idea ha sido la de rápido acceso y la simplicidad: - El primer reto que me plantee desde el punto de vista técnico era el poder acceder desde cualquier parte del libro a cualquier otra en 3 taps y sin necesidad de incluir un buscador. - Tener en cuenta el uso del dispositivo y sus posibilidades de orientación. Lo que se traducía en trabajar la aplicación tanto en horizontal (más lógico para antender en case y tenerlo sobre la mesa), como en vertical (más cómo do para leer o estudiar solo o fuera del aula dodne no hay necesidad de atender a una explicación). -Intentar simplificar la aplicación al máximo. No incluir herramientas innecesarias y no dar excesivas opciones distintas de realizar la misma acción. - Iconos reconocibles por todos. Para qué cambiar el aspecto de los iconos si lo que intento es que a primera vista el usuario ya sea o al menos intuya para qué sireve cada icono. - Luego tener en cuenta aspctos importantísimos como la tipografía y la gran cantidad de tiempo que el usuario se va a pasar a lo largo de meses delante de estos contenidos, intentando lograr una lectura fácil, ágil, cómoda y que no le comiese la vista al alumno, ya que además una de las cosas que caracteriza al iPad es el gran contrasrte de su pantalla. - Luego técnicamente había que cumplir además de con los requisitos estético técnicos de la guía de estilo, con otros aspectos como la creación de “botones” con un mínimo de tamaño para poder ser bien utilizados/pulsados por el usuario.
23
Proyecto educapp
Alumno Juan Antonio Brenes Caro
NAVEGACIÓN PURA Y DURA Respecto a lo que a navegaión se refiere, primero era necesario crear una interfaz que cumpliese con los requisitos de la guía de estilo de iOS. Para ello la aplicación primeramente se serviría de la clásica barra de navegación en la parte superior de la pantalla donde se indica donde se encuentra el usuaro dentro del temario. Y donde encontramos dos accesos directos: a la izquierda para acceder al menú con todos los temas y el blog. Y a la derecha para volver al índice del tema correspondiente. Luego una segunda fase de la navegación se haría directamente a través de las páginas del libro, mediante botones o accesos a las distintas partes que conforman un mismo bloque temático o conceptual dentro de cad apartado del tema. Aquí de nuevo se cuida un tamañao mínimo de los botones para poder realizar el “tap” sin problemas, y además se intenta siempre ubidcar en los bordes de la pantalla para que no moleste la visión cruzando la mano sobre ésta. Por último, abajo encontrariamos la barra de herramientas, donde el usuario haría uso de las herramientas de notas, cuestionario y autoevaluación, situadas en la esquina inferior izquierda. Mientras que en la esquina inferior derecha se encuentra con el acceso directo a la sección del tema correspondiente del blo
24
2º Gráfica Publicitaria 2014/2015
66px
44px
ASPECTOS
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Pasada esta fase ya se entraría en establecer referencias visuales y conceptuales para la presentación de los contenidos. Las referencias: LA MARCA Lo primero para abordar el plano estético visual del proyecto era darle una envoltura, un concepto con unos valores determinados desde donde partir. Para ello lo más lógico era crear una marca. Sin profundizar demasiado en esto, pues el proyecto no se centra en branding, decir que para crear la imagen de marca se parte principalmentre del concepto del paso de lo físico a lo digital, del libro de papel a la tablet, de unos contenidos, digamos unilaterales, a la interactividad. De ahí que para el imagotipo se parta de un símbolo que referencia esa transición mediente la representación de la mitad izquierda de un libro, con líneas más rectas que se refuezan luego en la concepción tipográfica del logotipo. Y una parte derecha con líneas más suaves y redondeadas que referencian las formas de una tablet, un iPad como símbolo técnológico. Y una forma de “bocadillo” conversacional que representa la interactividad, todo esto reforzado de nuevo en el logotipo mediante el cambio de tipografía. Respecto a la tipografía utilizada en el logotipo decir, que la primera parte usa una tipografía de corte clásico (Tisa pro) y con serifa que nos recuerda al libro de toda la vida; y la segunda parte se usa otra tipo (FS Joey) más moderna, concevida ya para trabajar y funcionar en pantalla, sans serif, y de líneas más redondeadas que entroncan con la parte antes citada del símbolo del imagotipo. La primera además se usará para el texto del libro, y la segunda como tipografía corporativa. Respecto al naming no me pararé a explicar nada ya que creo que el juego de palabras es evidente y refuerza además perfectamente los servicios que ofrece la marca: educapp. LA NATURALEZA PREFIERE EL HEXÁGONO PARA DISEÑAR Para desarrollar el libro, en este caso de biología, me pareció interesante partir de algo. Ese algo me pareció apropiado que fuese el hexágono, ya que hay estudios que lo sitúan como una de las formas predominantes en la naturaleza: panal de abejas, la calzada de gigante en Irlanda del Norte, la unión entre pompas de jabón, copos de nieve, la referencia estructural de las ramas de muchos árboles a la hora de crecer...
27
Proyecto educapp
Alumno Juan Antonio Brenes Caro
ENSEÑAR MEDIANTE EL DISEÑO Como he ido comentando antes otro aspecto que me interesaba en la creación del libro, blog y proyecciones del profesor era ir creando códigos o patrones que ayudasen a asimilar, y estructurar los contenidos por parte del alumno. Y por otro lado, que ayudasen a interrelacionar los tres pilares del proyecto para crear un entorno único para el aprendizade del alumno. Para esto se ha partido, por supuesto, desde la navegación y arquitectura de la infromación mediante bloques temáticos y relacionados entre sí, dividiendo la navegación entre app y libro. Así como el uso de los colores. Esto para determinar cada tema, pero también para marcar la información dentro de cada tema que tuviese que ver con un mismo concepto. LIBRO, WEB o APP Otra descisión imprtante fue la de mantener el libro como idea básica para maquetar. Es cierto que una app puede ser tanto de aspecto, como seguro, por navegación a un libro tradicional, pero la idea era la de mantener la de uno y aprovechar la otra para lograr ese estado que comentaba al principio de la memoria de transición entre las tradicionales metodologías educativas y las nuevas digitales. Por todo esto se parte de la idea de libro, de página vertical para diseñar, y de prescindir siempre que fuese posible de scroll en las pantallas. Una de las decisiones continuas a la hora de ir desarrollando el tema de ejemplo era qué debe aparecer desde el principi y que se mantiene oculto hasta que se interaccione con él. Esto es más propio de una navegación web o app de un libro, pero la maquetación y las composiciones de hojas responde mucho más a la de un libro tradicional. Esto es porque en el estudio anteriormente mencionado de la Universidad de Colorado, una de las primeras recomendaciones que hace la especialista es la de intentar mantener dentro de lo posible los esquemas y composiciones de un libro tradicional (pág 24). LA TIPO Como indico antes, uno de los aspectos que creo que más había que cuidar del proyecto era la tipografía y su uso. Había que tener en cuenta el contraste de la pantalla del dispositivo; un tamaño de letra cómodo para leer, ya que se iban a pasar muchas horas delante de él; la longuitud de los párrafos para conseguir todo esto; cumpli los requisitos de la guía de estilo de iOs; la estética que le quisiéramos dar al libro ya que un gran grueso de ella iba a depender de la propia tipografía utilizada...
28
2º Gráfica Publicitaria 2014/2015
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Lo primero en este aspecto fue de nuevo investigar y estudiar sobre el tema, sobre todo teniendo en cuenta que iba a trabajar por primera vez en un proyecto que se desarrollaba en pantalla y no en papel, donde jugarían condicionantes distintos como a la distancia en que se leen los textos o la funcionalidad de unas u otras tipografías para pantalla... Así que además de buscar por la red, utilicé el proyecto de excusa para comprarme el libro de Ellen Lupton de Tipografía en Pantalla. Comparando y conformando información lo primero que decidí era el tamaño del cuerpo del texto, es decir del grueso de la información. Tanto en el libro, como en el estudio de la Universidad de Colorado se habla de 16 pt como el tamaño ideal de lectura y un interlineado de entre el 120% y el 140%, que ha sido el utilizado finalmente. Otro estudio tenido en cuenta para estas decisiones ha sido la “Cátedra de Tipografía II, Prof. Carlos Venancio, Facultad de Arquitectura, Diseño y Urbanismo, de la Universidad de Buenos Aires” sobre la legibilidad en pantalla. Respecto a la tipografía elegida como he dicho antes, la coas se vuelve a dividir entre lo puramente referido a la navegación para situar al usuario dentro de la app; y lo que al libro en sí y sus contenidos se refiere. Para la navegación, en la barra de navegación (valga la redundancia) y la de herramientas, se ha usado un tipo gratuita de palo seco, tanto en su versión light como la bold. Una tipografía limpia y contundente que entranca muy bien con el aspecto tecnológico del proyecto, y con la línea seguida en Apple para su identidad y aplicaciones con la Helvética Neue. La Nexa también ha sido utilizada dentro de lo que sería el libro para los conceptos de lectura puntual en los esquemas. Respecto al libro y el blog, en su mayoría se asientan sobre la familia tipográfica Tisa. Tipografía elegida mediante el estudio de varias tipografías que se hacen en el libro de Ellen Lupton donde se varolan aspectos tan importantes como la legibilidad, facilidad de lectura, versatibilidad, expresividad... Esta familia la presenta Ellen Lupton a través de un estudio realizado por el diseñador web y amante de la tipografía Christopher Clark, como una de las mejores y más regulares en todos sus aspectos. A mí además me parece adecuada, y me ayuda a darle al libro un aspecto más actual, más de magazine, de revista digital que ayude a que el alumno no se vuelva a encontrar con la misma estética de siempre y que le puede aburrir a priori.
29
Proyecto educapp
Alumno Juan Antonio Brenes Caro
La Tisa la define su autor, Miklavcic, como un intento de dar un nuevo enfoque al género de las egipcias, dotándola de remates redondeados y asimétricos (lo que a mí me da también un punto orgánico que viene muy bien a la asignatura de biología), y una modulación oblicua que la remite a la tradición caligráfica humanista. Gracias a sus trazos poco contrastados y su gran altura de x, la Tisa funciona bien en textos de tamaño pequeño, mientras que sus sorpendentes detalles le sirven para destacar también en titulares de gran tamaño. PÁRRAFOS En este apartado la idea de nuevo ha sido la de conseguir una lectura lo más cómoda y fácil posible. Esto como comentaba antes, se ha cuidado especialmente en el estado vertical del diseño, más propicio para la lectura. Mientras que en el estado horizontal se ha primado una composición lógica y cómoda para que el alumno trabaje en clase. Los párrafos se ha diseñado teniendo en cuenta principalmente su medida de ancho entre 45 y 75 caracteres recomendados por Ellen Lupton para una lectura fluida.
30
2º Gráfica Publicitaria 2014/2015
Tisa
abcdefghijklmnñ opqrstuvwxyz 1234567890
Nexa
abcdefghijklmnñ opqrstuvwxyz 1234567890
€
Económicos ASPECTOS
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Respecto a la parte económica del proyecto me gustaría recordar la idea de poder presentar el proyecto a un ente u organismo público al que seducir con la idea de proporcionar libros de texto en plataforma digital, acompañados por un proceso creativo de gestación en el que interviniesen los distintos agentes involucrados en la educación. Pero también mantener la idea de trabajar para cualquier particular, haciendo de cada caso, tanto público como privado, una fórmula personalizada con un presupuesto ajustado a los diferentes contextos. Frente a esto la idea es un poco acotar los principales gastos que genera crear estos recursos. Céntrandome en este caso concreto que aspira a una cota bastante alta en cuanto a inversión se refiere, los principales gastos serían estos: Tipografías (en este caso la Nexa sería gratuita); 480º Interactive para la creación de lo que es la aplicación; Horas de trabajo (Maquetación, ilustración, diseño...); Plantilla wordpress para el blog. Por otro lado, al ser una aplicación híbrida, en lo investigado sobre este tema, en general, tienden a considerar que desarrollar una app híbrida está en un rango de precios de entre el 65% y 80% del desarrollo de una aplicación nativa en Android y en iOS, dependiendo de las funcionalidades que se puedan desarrollar de manera híbrida (en HTML5) y cuáles haya que programar en nativo específicamente para cada sistema. En este aspecto y teniendo la opción de crearla a través de inDesign y DPS, para luego desarrollarla y publicarla a través del servicio de 480º Interactive, creo que el presupuesto baja bastante y me es un poco indiferente el hecho de que sea híbrida o no. 480º Interactive tiene varios paquetes de servicio, desde el básico de 299€ para publicar una aplicación; al de 199€/mes para tener un espacio ilimitado en el que subir y publicar todas las apps que queramos. Teniendo en consideración esto y haciendo un desglose aproximado, los gastos o la inversión necesaria para este caso concreto quedaría así: Publicación y desarrollo (480ª Interactive): 299€ Tipografía: Nexa gratis, y Tisa desde 539€ (paquete completo) a 236€ comprando sólo las fuentes utilizadas (regular, bold, italic y medium). Plantilla wordpress para el blog: 50-79€. Diseño (Maquetación, ilustraciones, infografías, fotos...) a 30€/hora. 150horas = 4500€ TOTAL: 5085€ - 5417€
33
Proyecto educapp
34
Alumno Juan Antonio Brenes Caro
2ยบ Grรกfica Publicitaria 2014/2015
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria 2014/2015
Conclusiones Para terminar la memoria me gustaría hecerlo con una serie de breves reflexiones. En primer lugar me gustaría reconocer el hecho de que aunque estoy muy satisfecho por el trabajo realizado, siempre le queda a uno la espinita de haber podido mejorar ciertas facetas, y sobre todo, el haber tenido algo más de tiempo para desarrollar ciertos aspectos del proyecto, que en esta fase, han quedado relegados a un segundo plano por cuestiones prácticas. Aspectos que habrían dado un proyecto más redondo en todas sus facetas, como son el sonido de la app; los aspectos gestuales a aprovechar de cada dispositivo (en este caso el iPad); las affordances o pistas para el usuario y el entendimiento del funcionamiento de la aplicación... En resumen, reconocer lo ambicioso del proyecto para el tiempo que tenía. Aún así la satisfacción es alta porque creo que es para sentirse orgulloso de haber presentado un proyecto, ante todo, sincero. Sincero porque no se limita a reproducir lo que ya ví un día en una conferencia, o lo que ví aquel día en clase, sino que este ha sido un proyecto que me ha obligado a seguir aprendiendo, investigando, estudiando, y probando distintas ramas del diseño que a lo mejor en clase no se han visto o podido tocar. Sincero también porque me ha supuesto un reto en muchos aspectos y no he ido a sentirme cómodo realizando algo que ya empiezo a dominar, como podría ser la creación de una marca, o la maquetación de un libro que ya tenía hecho desde hace tiempo... El proyecto se ha afrontado desde cero, y como algo serio, sintiéndolo como la mejor manera de seguir formándome... Y de ahí, la satisfacción. Tras esto, sólo me queda dejar constancia de mis ganas de seguir dándole forma y ver hasta donde me lleva esta odisea. Lo que es seguro es que por el camino seguiré aprendiendo muchísimo y poco a poco contribuirá a ser y sentirme, mejor diseñador. Solo me queda dar las gracias por lo que he aprendido y lo que he disfrutado durante el curso y durante el ciclo en general.
35
Proyecto educapp
Alumno Juan Antonio Brenes Caro
BIBLIOGRAFÍA Y REFERENCIAS PARA REALIZAR EL PROYECTO - Tipografía en pantalla. Ellen Lupton. GG. 2014. - Informe APEI sobe usabilidad por YUsef Hassan Montero y Sergio Ortega Santamaría. 2009. * - No me hagas pensar. Una aproximación a la usabilidad web. Steve Krug. 2006. * - Informe Samsung. Los padres ante la tecnología en la educación. * - Tipografía Digital. Eugenio Vega. 2012-2013. * - Estudio Univ.de Colorado sobre la creación de libros de texto digitales interactivos * WEB - Guía de estilo iOS - Guía de estilo Material Design - ¿Cuánto vale diseñar una app? http://graffica.info/cuanto-vale-disenar-una-app/?utm_content=bufferf58e1&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer.
- Aprende a diseñar una app. http://appdesignbook.com/es/contenidos/las-aplicaciones/
- 9 Dificultades importantes al adoptar los tablets en el aula. http://www.totemguard.com/aulatotem/2012/03/9-dificultades-importantes-al-adoptar-tablets-en-el-aula/
- Las 6 tendencias en diseño de apps 2015 http://www.appmachine.com/es/blog/los-seis-tendencias-en-el-diseno-de-apps-en-el-2015/
36
2º Gráfica Publicitaria 2014/2015
Proyecto educapp
Alumno Juan Antonio Brenes Caro
2º Gráfica Publicitaria
- Los problemas de los iPads en el aula: coste excesivo y desconcentración en los alumnos.
2014/2015
http://www.lecturalab.org/story/Los-problemas-de-los-iPads-en-el-aula-coste-excesivo-y-desconcentracin-enlos-alumnos_3003
- Consejos para diseñar iOS app. http://blog.aulaformativa.com/consejos-para-disenar-ios-app/
- Diseño y desarrollo de un proyecto móvil: metodología, técnicas y herramientas. http://www.accnera.com/2014/02/diseno-y-desarrollo-de-un-proyecto-movil-metodologia-tecnicas-y-herramientas/
- Diseño iOS: Prototipado e Inspiración para aplicaciones iOS. http://www.migueldiazrubio.com/2013/06/10/diseno-ios-prototipado-e-inspiracion-para-aplicaciones-ios/#
- Diseño iOS: Como diseñar tu app desde cero y recortes. http://www.migueldiazrubio.com/2013/08/07/diseno-ios-como-disenar-tu-app-desde-cero-y-recortes/#
- La legibilidad en pantalla. Estudio. http://www.sempatiza.es/blog/la-legibilidad-en-pantalla/
- 7 tips para que la tipografía se vea bien en cualquier pantalla. http://www.paredro.com/como-hacer-que-la-tipografia-se-vea-bien-en-cualquier-dispositivo/
- Recursos definitivos para diseñar apps móviles. http://www.40defiebre.com/recursos-diseno-aplicaciones-moviles/
37