TimeTimer Online. Visual Timer Online. Autore: Simone Raimondi Cominesi Matricola: Progetto: Programmazione web e mobile Maggio 2017

Transcript

1 TimeTimer Online Autore: Matricola: Progetto: Programmazione web e mobile Maggio 2017

2 INTRODUZIONE TimeTimerOnline è un applicazione web in grado di offrire un ottimo supporto a chiunque avesse problemi nella gestione del propio tempo, grazie ad un sistema cronometrato, questo visual timer, permette di partizionare il proprio tempo per gestirlo al meglio, in modo semplice e piacevole grazie anche ad un accostamento di colori studiati appositamente per far risaltare il soggetto senza stancare gli occhi. 1.1 DESTINATARI TimeTimerOnline è stata creata in particolare per aiutare tutte quelle persone con disturbi come l autismo, i quali hanno difficoltà nella gestione del tempo, per questo l utente non necessita di conoscenze particolari, basta infatti eseguire una registrazione oppure un accesso attraverso gli appositi form. L interfaccia è intuitiva e con colori studiati al fine di non creare confusione e per rendere un impatto visivo molto più pulito. L interfaccia è interamente in inglese per mirare ad un pubblico più vasto, tuttavia, grazie all utilizzo di icone risulta comprensibile da chiunque. Seguendo il modello di Marcia Bates possiamo affermare di trovarci nell area attiva e diretta ovvero di searching, infatti l utente richiede di poter utilizzare un timer che calcolerà il tempo in modo autonomo, dopo aver inserito una cifra riguardante i minuti, tuttavia viene anche restituito un risultato finale (anche sonoro) che avvisa l utente dell azione portata a termine. 1.2 MODELLO DI VALORE TimeTimerOnline si basa tutto su server, la sensibilità di calcolo è precisa al secondo, infatti inserendo un valore e fermando la cronometro, il database associato al sito calcolerà l inizio e la fine esatta salvando il tempo in una tupla, inoltre vengono salvati i log di sistema come IP e Device, oltre all username.

3 Tutte le azioni come Registrazione, Login e avvio timer vengono fatte in tempo reale attraverso interazioni con un server. La grafica ideata per questo Visual Timer rende l esperienza d uso piacevole ed accessibile da qualsiasi dispositivo remotamente da ovunque si abbia una connessione ad internet. La semplicità rende TimeTimerOnline a costo zero, infatti non necessita nessun acquisto a livello hardware ed è totalmente gratuito in tutte le sue funzioni. 1.3 ASPETTI TECNOLOGICI In questo progetto vengono usate diverse tecnologie e diversi linguaggi di programmazione. TECNOLOGIE: per il salvataggio dati di registrazione, il login e l interazione con il timer viene utilizzato un database MySQLi, inoltre vengono utilizzati PHP (server), HTML5, CSS3 e javascript (client). Tra i linguaggi precedentemente elencati si specifica l utilizzo di svg per la lavorazione del timer a video, bootstrap, jquery e ajax. Inoltre viene utilizzata un api per l invio del messaggio di posta.

4 INTERFACCE login: vengono richiesti username e password per poter accedere alle funzioni di TimeTimerOnline. Registrazione: consiste nell inserimento di username, mail(per eventuali aggiornamenti) e password. I dati vengono poi salvati su database attraverso opportuni controlli e la pass viene criptata.

5 applicazione: una volta eseguita la registrazione oppure l accesso si accede all applicazione vera e propria dove viene passato l username e viene richiesto l inserimento in minuti. Storia: qui viene riportata la storia del TimeTimer e quindi di un visual timer creato appositamente per ragazzi con autismo.

6 About me: pagina dello sviluppatore, utilizzata per mostrare widget Facebook e visualizzazione di un pdf embed con curriculum. Contact: pagina per invio di una mail allo sviluppatore. Utilizzo di PHPMailer per inviare una mail di contatto

7 ARCHITETTURA Diagramma dell ordine gerarchico delle risorse: index.php login.html (redirect) login.php signup.html timetimerstory.php about me.php contact.php logout.php register.php Descrizione risorse disponibili all utente L index.php contiene un reindirizzamento a login.html se l utente non ha già effettuato l accesso. Il login, come il register, necessita di parametri POST ed ha come scopo un accesso sicuro alla risorsa. Una volta eseguito l accesso (con passaggio tramite metodo session) l utente può avviare il timer index.php. Tutte le pagine necessitano di una variabile passata grazie ad un metodo SESSION al fine di permettere all utente di eseguire Logout da ovunque si trovi.

8 Struttura database MySQL Il Database è molto semplice, raccoglie alcune informazioni grazie alla quale l amministratore del sistema può contattare tramite mail gli utenti per eventuali aggiornamenti o avvisi. Inoltre raccoglie alcuni dati sull utilizzo del timer grazie alla quale può eventualmente capire su quale device viene utilizzato, da quale ip, le ore in cui viene usato e se viene usato correttamente. CODICE(esempi) HTML(l elemento SVG)

9 HTML

10 BOOTSTRAP

11 CSS

12 JAVASCRIPT

13 jquery Ajax

14 PHP CONCLUSIONI TimeTimerOnline vuole essere una rapida alternativa gratuita a molti dei timer visivi presenti sul mercato, grazie al sua facile ed intuitivo utilizzo permette di raggiungere lo scopo voluto con pochi semplici click. TimeTimerOnline non è invasivo, è adattabile ad ogni forma di dispositivo e usabile grazie anche alla colorazione e alla semplicità della sua forma. TimeTimerOnline ha lo scopo di aiutare bambini, ragazzi, adulti con particolari disturbi del neurosviluppo, nelle loro azioni quotidiane, migliorando così la giornata e la vita di molte persone nel mondo. Può essere usato anche da persone senza alcun tipo di disturbo al fine di dare un tempo alle più piccole azioni, che vanno dalle pause di lavoro, allo studio, al gioco. TimeTimerOnline inoltre può essere anche un buon punto di partenza per apprendere lo scorrimento del tempo ai bambini nelle scuole materne ed elementari. Sviluppato interamente da. vietata la copia o la vendita, per info: / sraimondicominesi1@gmail.com