Tadpole - Web - Prahova - 2013 Nationala

Informatii generale

  • Categorie: Web
  • Judetul: Prahova

Descriere

Tadpole este o aplicatie ce apartine unei noi generatii de aplicatii web, genul de aplicatie care poate fi rulata pe orice dispozitiv mobil, cu sau fara internet, cu tastatura sau interfata touch : in esenta, o aplicatie de brainstorming.

Brainstorming-ul poate avea ca rezultat doua reprezentari grafice, ambele folosind aceleasi date : outline si mindmap. Mindmap-ul este reprezentarea grafica sub forma unui arbore informational (noduri ce contin informatii, legate intre ele prin legaturi sugestive) a datelor. Outline-ul este reprezentarea sub forma unei liste imbricate a acelor date. Mindmap-ul este cel mai util in momentul compunerii unui plan de afaceri, sau conceptelor din spatele unei aplicatii, sau a unei liste de cumparaturi. Outline-ul este cel mai util dupa crearea elementelor descrise mai devreme, atunci cand trebuie puse in aplicare. De asemenea, mindmap-ul face vederea de ansamblu a proiectului mai usoara, pe cand outline-ul este mai util cand este nevoie o privire mai amanuntita.

Inca ceva: modelul acesta de organizare a datelor pare cunoscuta de undeva? Tot astfel sunt dispusi neuronii in mintea umana, si tot la fel inregistreaza informatiile din mediul inconjurator. Impreuna, cele doua moduri de organizare a datelor fac posibila retinerea unei cantitati mult mai mare de informatii intr-un mod mult mai bine structurat decat notitele clasice, si, prin urmare, este foarte util in nenumarate domenii: educatie, afaceri, development, marketing, planning, etc. Nu cred sa existe domeniu in care brainstorming-ul (si reprezentarea datelor in cele doua moduri, mai important) nu ar aduce un beneficiu serios utilizatorului.

Aplicatia este compilata intr-un singur fisier javascript (+ anexele necesare pentru ChromeOS, FirefoxOS, si Metro in curand / favicon) ce poate fi folosit absolut oriunde, necesitand nici macar un server http clasic (aproape 100%, totul mai putin componentele ce necesita conexiune la internet). Tadpole este construit folosind cele mai noi tehnologii, de la HTML5 cu CSS3 (Eco si Stylus folosite pentru a genera aceste elemente), la WebSockets pentru transferul datelor (Socket.IO => pc2cs), la librarii moderne ce compun interfata cu utilizatorul (angular.js), la limbaje de programare performante ce se compileaza in JavaScript (LiveScript, Coffeescript), la fisiere de configuratie si traducere (JSON, YAML).

Tadpole este o aplicatie single-page, ce poate functiona complet offline, folosind IndexedDB ca si mediu de stocare al datelor (fallback la LocalStorage). Design-ul aplicatiei este complet responsive, ceea ce inseamna ca aplicatia va arata la fel de bine, si va fi la fel de usor de folosit atat pe o rezolutie de 1920x1080 cat si pe o rezolutie de 360x480. Pentru fiecare mediu de utilizare in parte exista moduri specializate de a folosi aplicatia, pe langa clasicele butoane: pentru interfetele touch avem gesturi de swipe (ce din pacate sunt cam inutile pe un Chrome Mobile din cauza faptului ca browserul foloseste aceleasi gesturi pentru navigarea intre tab-uri), pentru desktop-uri avem keyboard shortcuts, si folosirea inteligenta a mouse-ului. View-ul de mindmap este realizat folosind Canvas 2D, dar este planuit si un model de vizualizare in WebGL.

Partea cea mai interesanta a aplicatiei este reprezentata de sincronizarea live a datelor. Deoarece aplicatia este construita folosind Node.JS, este foarte usor sa legam clientii intre ei, si sa sincronizam datele in timp real. Caz concret: A este conectat la B; A modifica textul unui nod de la “CEVA” in “CEV” (apasa Backspace); in cel mai scurt timp posibil (datorita websocket-urilor), B va primi modificarea, si va vedea in timp real ce actiuni efectueaza cealalta persoana. Aceasta sincronizare se foloseste folosind un cod unic pe sesiune de client (chiar codul folosit de socket.io pentru a identifica socket-urile) pentru a mentine aceasta sincronizare anonima si lipsita de conturi. Pe viitor, aplicatia va incorpora si conturi de Google, Facebook, etc. pentru a crea o lista de “prieteni”, si a face totusi aceasta comunicare a codurilor mai usoara, precum si pentru a face posibila achizitionarea si folosirea unor in-game purchases (sincronizarea, precum si un modul de vizualizare bazat pe webgl, etc).

Tehnologii

Node.JS, LiveScript, CoffeeScript, Stylus, Less, Yaml, JavasScript, WebSockets, Angular.JS, Eco

Cerinte sistem

Orice sistem Desktop / Tableta / Smartphone cu un browser modern instalat (Chrome /Firefox / Opera Next up-to-date, Internet Explorer 10, Safari Mobile / Orice browser custom cu Webkit)
Orice device cu Firefox OS, Chrome OS
SmartTV (Testat pe un LG)

Realizatori

Marcu Sabin

  • Scoala: Colegiul National Nicolae Grigorescu
  • Clasa: XII
  • Judet: Prahova

Screenshots