Manual de utilizare

Manualul de utilizare este disponibil aici.

Despre aplicație

Aplicația noastră a fost creată ca parte a unui proiect școlar.
Scopul ei este de a prezenta teoria grafurilor într-un mod interactiv și modern.

Arhitectura aplicației:

Aplicația a fost creată folosind tehnologii web, cu scopul de a putea rula atât pe dispozitive desktop cât și pe mobile. Interfața a fost realizată în HTML5 și CSS3, iar funcționalitatea este asigurată prin JavaScript (versiunea ES2019).
Este accesibil prin domain-ul graphviser.tools cu ajutorul serviciilor Netlify, care preiau sursele de pe GitHub și le transmit la o varietate de CDN-uri din lume. Mai mult despre cum funcționează aici.

Cerințe de sistem:

Pentru folosirea aplicației noastre este necesar un dispozitiv cu acces la internet și un browser web care suportă ES2019. În zilele noastre majoritatea browserelor web suportă această versiune de JavaScript.
Tabel de compatibilitate:

Unica cerință hardware este ca dispozitivul să poată rula un browser web cu versiunea minimă afișată în tabel.

Implementarea aplicației:

Documentația codului este disponibil aici.
Aplicația se bazează pe trei framework-uri principale:

1. jQuery: folosit la crearea animațiilor, la navigare și la manipularea elementelor din Document Object Model (DOM).
2. jsPlumb Community Edition: folosit la vizualizarea grafurilor, având ca funcționalitate conectarea vizuală a elementelor și stocarea informațiilor despre aceste conexiuni.
3. Bootstrap: folosit la crearea interfeței responsive a aplicației și a paginii cu materiale educative.

Este alcătuit din două părți esențiale:

1. Interfața editorului:

Conține clasele necesare pentru manipularea și gestionarea elementelor din DOM.

VisualNode: gestionează reprezentarea vizuală a grafurilor

1. Conține toate funcțiile de bază pentru editarea grafurilor (adăugare/ștergere de noduri și muchii, setarea costurilor, schimbarea modului de editare).
2. Toate funcțiile necesare pentru animare (inițializare, pornire, oprire, pas înainte și înapoi).
3. Event listeners pentru modificarea grafurilor.

TableHandler: gestionează reprezentarea în tabeluri a grafurilor

• Conține funcțiile necesare pentru gestionarea în timp real (adăugare/ștergere rânduri și coloane, actualizarea celulelor).

MenuHandler: gestionează meniul

• Se ocupă de funcționarea meniului și inițializarea grafului la pornirea aplicației sau la schimbarea tipului grafului.

Motion Controls: gestionează suprafața de lucru

• Se ocupă de acțiunile pan și zoom (mișcare, micșorare/mărire) a suprafeței de lucru.

2. Gestionarea memoriei:

GenericGraph:

1. Conține toate reprezentările grafurilor în memorie.
2. Se ocupă de operațiile de editare.
3. Rulează algoritmii.
4. Interacționează cu TableHandler pentru actualizarea tabelelor.

Reprezentare schematică:

Testarea aplicației:

Aplicația a fost testată în mod continuu în timpul dezvoltării atât de către realizatori cât și de către colegii de clasă respectiv de profesorul de la clasă.

Version Control:

Dezvoltarea aplicației a fost realizată prin ajutorul servicilor GitHub, care ne-au permis să lucrăm mai mulți în paralel. Codul este accesibil pe pagina de GitHub graph-theory-visualization.

Securitatea aplicației:

Aplicația este securizată printr-o conexiune SSL (Secure Sockets Layer), iar certificatul nostru de SSL este emis de Let’s Encrypt Authority X3.

Interfață și design:

Interfața este una modernă, ușor de folosit, la care s-a luat în considerare grupul țintă (elevi/studenți).

Butoanele conțin iconuri care sunt percepute ușor de utilizatori și care oferă un aspect lizibil interfeței.

Pentru accesibilitate, fiecare buton afișează funcția sa atâta timp, cât cursorul este ținut peste el.

Meniurile laterale sunt concepute astfel încât utilizatorul să le poate deschide sau închide și redimensiona, după preferință.

Spațiul de lucru se poate micșora, mări și muta, oferind un spațiu flexibil pentru crearea grafurilor.

Fiecare card din meniu conține un link spre secțiunea respectivă din pagina cu materialul educativ.

Aplicația respectiv pagina cu materialul educativ au un design responsive, astfel asigurând compatibilitatea cu dispozitivele mobile și desktop.

Pagina cu materialul educativ conține și quiz-uri, care au rolul de a ajuta utilizatorul să-și verifice cunoștințele.

Caracteristici inovative:

1. Interfață prietenoasă.
2. Asigură posibilitatea desenării grafurilor și de animare a algoritmilor.
3. Animația se realizează în pași, utilizatorul le poate urmări atât în meniul din dreapta cât și pe graful desenat.
4. Reprezentările grafurilor sunt realizate în timp real.
5. Suportă toate tipurile de grafuri.
6. Oferă informații ușor accesibile despre grafuri și algoritmi.
7. Asigură posibilitatea de testare a cunoștințelor, oferă feedback despre rezultatul obținut.

Resurse:

Clic pentru a extinde

jsPlumb Community Edition:

1. jsPlumb Community Edition Documentation
2. Snap to Grid in jsplumb
3. Unable to create straight line connection in JSPlumb
4. Iterate through endpoints of div in jsPlumb

Bootstrap:

1. Introduction · Bootstrap v4.5
2. Grid system · Bootstrap v4.5
3. Tables · Bootstrap v4.5
4. Images · Bootstrap v4.5
5. Buttons · Bootstrap v4.5
6. Modal · Bootstrap v4.5
7. Tooltips · Bootstrap v4.5
8. Figures · Bootstrap v4.5
9. Navbar · Bootstrap v4.5
10. 30 Most Amazing Free Bootstrap Sidebar Templates 2020

Fontawesome:

1. Font Awesome 6
2. Is it possible to color the fontawesome icon colors?
3. Rotating Icons

Prism.js:

1. Prism.js
2. Prism.js - Usage
3. Prism.js - Test Drive
4. Unescaped markup ▲ Prism plugins
5. Prism.js
6. Line Numbers ▲ Prism plugins
7. Copy to Clipboard ▲ Prism plugins

Particles.js:

• Dynamic Point Mesh Animation with HTML5 Canvas

jquery.inputfit.js:

• vxsx/jquery.inputfit.js: Fit value in input

jquery-resizable.js:

• RickStrahl/jquery-resizable: A small jQuery plug-in to make DOM components resizable

jquery.i18n:

• jQuery based internationalization library

jQuery:

1. jQuery API Documentation
2. Does jQuery have a handleout for .delegate('hover')?
3. How can I deselect text using Javascript or jQuery?
4. Disable/enable an input with jQuery?
5. How to call a function after a fadeOut() on many elements
6. How to add DATA-(something) attribute to .class element with jQuery
7. Jquery .on('scroll') not firing the event while scrolling
8. How do I pass the this context into an event handler?
9. jquery stop child triggering parent event
10. Get the size of the screen, current web page and browser window
11. Mouse drag to scroll content

JavaScript:

1. Listening for variable changes in JavaScript
2. Javascript scrollintoview smooth scroll and offset
3. How to overload constructors in JavaScript ECMA6?
4. Deleting Objects in JavaScript
5. Maximum size of an Array in Javascript
6. Do the keys of javascript associative arrays need to be strings, or can they be any object?
7. Integer division with remainder in JavaScript?

Khan Academy:

1. What is jQuery? (video) | Welcome to jQuery

2. Get ready to learn jQuery (article)

3. Getting Started With jQuery

4. Finding elements with jQuery | DOM access with jQuery

5. Debugging webpages with the browser console (video)

6. Getting info on elements with jQuery | DOM access with jQuery

7. Modifying elements with jQuery | DOM modification with jQuery

8. Creating elements with jQuery | DOM modification with jQuery

Educative.io:

1. JavaScript in Practice: Getting Started - Learn Interactively
2. JavaScript In Practice: ES6 And Beyond - Learn Interactively

Alte resurse:

1. https://www.pbinfo.ro/
2. https://profs.info.uaic.ro/~vcosmin/pagini/resurse_pregatire/resurse/graf_definitii.pdf
3. https://www.tutorialspoint.com/graph_theory/graph_theory_traversability.htm
4. Manual de Informatică, pentru clasa a XI-a informatică intensiv (editura Abel, 2006, autori Ignát Judit Anna, Incze Katalin, Jakab Irma Tünde)
5. Bazele informaticii Grafuri și elemente de combinatorică (editura Petrion, 1995, autori Cornelia Ivasc, Mona Pruna)