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

1. DOMrDOMr

2. Cerin elețCerin eleț

4. UtilizareUtilizare

5. Interfa ă interactivățInterfa ă interactivăț

6. Apeluri RESTApeluri 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. ImplementareImplementare

8. LaravelLaravel
● La baza aplica ie stăț Laravel.
– Aplica ie web framework cu structura MVC, ceț
permite aplica iei noastre explorarea 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 apleuriș
Web cât i REST.ș

10. Interfa a interactivățInterfa a interactivăț
Un apel norma 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. RasterRaster
Starea curenta a arborelui se poate salva in
format PNG.

12. RasterRaster
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 RESTApeluri REST
Suita de tehnologii Graphviz
folosită pentru generarea de imagini pe partea de
server

14. Apeluri RESTApeluri 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 RESTApeluri REST
Suita de tehnologii Graphviz

16. Apeluri RESTApeluri REST
Suita de tehnologii Graphviz
Din care se genereaza mai apoi un arbore care
arata cam a a:ș

17. Apeluri RESTApeluri 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ț