Defensa proyecto fin de carrera

840 views
764 views

Published on

Diseño e implementación de una plataforma web en HTML5 para la elaboración de cuentos infantiles de manera colaborativa

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
840
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Defensa proyecto fin de carrera

    1. 1. DISEÑO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB EN HTML5 PARA LA CREACIÓN COLABORATIVA DE CUENTOS INFANTILES Borja Merino Zubeldia Cátedra Telefónica Deusto
    2. 2. ÍNDICE• Introducción al proyecto• Arquitectura del proyecto• Tecnologías utilizadas• Conclusiones• Lineas futuras
    3. 3. ¿QUÉ ES EXACTAMENTE?• Un lugar donde los niños pueden crear sus propios cuentos• Donde pueden compartir la imaginación de cada uno con el resto.• Una Web donde poder visualizar y reeditar cuentos.• Endefinitiva, una plataforma web donde cada niño podrá plasmar su imaginación tanto en sus creaciones, como en las que otros niños hayan creado.
    4. 4. ¿CÓMO SURGIÓ LA IDEA?• Lasnuevas tecnologías de la información y comunicación (TIC) como futuro estandarte en la educación.• Se busca dar un nuevo uso a las nuevas tecnologías dentro de la educación evitando continuar con los usos que ya tiene.• Sepersiguió la idea de buscar un nuevo enfoque a la creatividad de los niños, proporcionando una herramienta que contribuyera de manera diferente en esta labor.
    5. 5. ALTERNATIVAS EXISTENTES• Existen otras alternativas tales como: • TIKATOK • uTales • EnCuentos • entre otras tantas...
    6. 6. ¿QUÉ APORTA STORYKIDS?• Laidea no es competir con estas herramientas, sino aportar un granito de arena más al mundo educativo.• Da la tranquilidad al usuario de que todo el contenido que se proporciona y se genera en la plataforma, tiene una licencia libre atribución-compartición. • La licencia utilizada es: Attribution-ShareAlike 3.0 Unported (CC BY -SA 3.0)• Nuevas tecnologías en diseño web: HTML5 y CSS3
    7. 7. ARQUITECTURA DEL PROYECTO• El proyecto se ha llevado a cabo siguiendo el paradigma Cliente-Servidor.
    8. 8. CLIENTE• Tecnologías utilizadas • HTML5 • CSS3 • JavaScript • Uso del Framework JQuery• Navegador Web del usuario.
    9. 9. CLIENTE• Tecnologías utilizadas • HTML5 • CSS3 • JavaScript • Uso del Framework JQuery• Navegador Web del usuario.
    10. 10. DRAG & DROP RESIZE• Usode los paradigmas Drag & Drop y Resize (Escalado) de manera dinámica.• Se introducen de forma nativa en HTML5.• Drag & Drop consiste en arrastrar y soltar elementos de la web.• Resize (Escalado) permite redimensionar los elementos de la web.
    11. 11. DRAG & DROP RESIZE• Usode los paradigmas Drag & Drop y Resize (Escalado) de manera dinámica.• Se introducen de forma nativa en HTML5.• Drag & Drop consiste en arrastrar y soltar elementos de la web.• Resize (Escalado) permite redimensionar los elementos de la web.
    12. 12. DRAG & DROP RESIZE• Usode los paradigmas Drag & Drop y Resize (Escalado) de manera dinámica.• Se introducen de forma nativa en HTML5.• Drag & Drop consiste en arrastrar y soltar elementos de la web.• Resize (Escalado) permite redimensionar los elementos de la web.
    13. 13. SERVIDOR• Tecnologías utilizadas • Windows/Mac OSX/Linux • Apache • MySQL • PHP• Uso del framework Symfony
    14. 14. SERVIDOR• Tecnologías utilizadas • Windows/Mac OSX/Linux • Apache • MySQL • PHP• Uso del framework Symfony
    15. 15. SERVIDOR: MODEL-VIEW- CONTROLLER (MVC)• Modelo de gestión de información en capas. • Model: Modelo de datos utilizado (Gestión directa con la base de datos) • View: Modelo de vista de plantillas (Generación de plantillas dinámicas) • Controller: Modelo de control de información (Lógica de negocio).
    16. 16. FRAMEWORK SYMFONY• Framework MVC que utiliza PHP como lenguaje de programación.• Symfony estructura el proyecto como se puede apreciar en la imagen.
    17. 17. CAPA “MODEL”• Lascarpetas “data” y “lib/ model” son las encargadas de gestionar la base de datos.• Toda interacción por la base de datos pasará por alguna de las clases que hay en “lib/ model”.
    18. 18. CAPA “VIEW”• Lacapa “View” se implementa utilizando el modulo “story” con el que se gestiona todas las plantillas y acciones de la plataforma.• Estas plantillas se generan utilizando la información de la base de datos proporcionada por la capa “Controller”
    19. 19. CAPA “CONTROLLER”• Estaes la capa de mayor importancia en el proyecto ya que se encarga de pedir, obtener, y proporcionar la información necesaria.• Como se ve, en el proyecto esta capa se implementa en las carpetas “config” donde se establecen los parámetros oportunos
    20. 20. CONCLUSIONES• Todos los objetivos planteados de inicio se han ido cumpliendo a lo largo del proyecto.• Algunos han resultado ser más complicados de lo esperado.• El reto que ha representado este proyecto podemos decir que se ha superado.
    21. 21. LINEAS FUTURAS• Ampliación de la galería de escenarios y demás elementos.• Compatibilidad con más idiomas.

    ×