DOMr

General presentation of a web application that lets you explore the DOM tree of HTML and XML files.

Transcript

1. DOMr DOMr
2. Cerin ele ț Cerin ele ț
3. Explorarea arborelui DOM al fi ierelor HTML/XML ș atât interactiv cât i prin intermediul unui API de ș tip REST.
4. Utilizare Utilizare
5. Interfa ă interactivă ț Interfa ă interactivă ț
6. Apeluri REST Apeluri REST get_image/{FORMAT}/{URL} – {FORMAT} poate fi oricare dintre PNG, JPG, SVG – {URL} este o aresa a unui document HTML/XML i se ș folose te "_" în loc de "." ș – URL-ul trebuie sa fie encodat – Examplu 1: get_image/png/google_ro – Examplu 2: get_image/svg/w3schools_com%252Fxml %252Fnote_xml
7. Implementare Implementare
8. Laravel Laravel • La baza aplica iei stă ț Laravel. – Aplica ie web framework cu structura MVC, ce ț permite explorarea aplica iei noastre prin ț intermediul unor rute flexibile de tip REST. – O ruta simpla arata cam a a: ș
9. Acela i tip de ruta este folosit atât pentru apeluri ș Web cât i REST. ș
10. Interfa a interactivă ț Interfa a interactivă ț Un apel normal către /dom/{site} redirec ionează utilizatorul catre o pagină cu ț framework-ul javascript d3 care face un apel asincron către frameworkul PHP pentru o reprezentare JSON a arborelui DOM, transformându-l mai apoi într-un SVG interactiv.
11. Raster Raster Starea curenta a arborelui se poate salva in format PNG.
12. Raster Raster Pa i intermediari: ș – parsarea textului imaginii vectoriale in javascript – randarea rezultatului într-un Canvas – conversia lui într-o imagine folosind librăria Canvas2image
13. Apeluri REST Apeluri REST Suita de tehnologii Graphviz folosită pentru generarea de imagini pe partea de server
14. Apeluri REST Apeluri REST Suita de tehnologii Graphviz Când o cerere de tip GET ajunge la server, HTML-ul/XML-ul paginii este parsat cu libraria Simple HTML DOM i se generează o descriere a ș arborelui in limbajul dot.
15. Apeluri REST Apeluri REST Suita de tehnologii Graphviz
16. Apeluri REST Apeluri REST Suita de tehnologii Graphviz Din care se genereaza mai apoi un arbore care arata cam a a: ș
17. Apeluri REST Apeluri REST Suita de tehnologii Graphviz
18. Arborii ob inu i în urma apelurilor REST ț ț eviden iaza nodurile ce con in ț ț microdate HTML5 .
19. O reprezentare în ansamblu a aplica iei: ț
21. Componen a echipei: ț – Claudiu-George Unguru – Paul Pan iru ț