SlideShare a Scribd company logo
1 of 18
Download to read offline
POSHex


         Pasat C. Constantin Tiberiu
                        Master ISS
Index
Keywords
Introduction
System architecture
Demo
Keywords
CrossRider
Microformat
Microdata
RDFa
JQuery
Introduction
POSHex - Plain Old Semantic Html extension

POSHex is an extension available for
     ○ Mozilla
     ○ Chrome
     ○ IExplore
Detects semantic constructions (Microformat, Microdata
and RDFa) within Html pages and provide to user a friendly
user interface to read/save/validate those information in
different formats.
Introduction
POSHex - Plain Old Semantic Html extension

POSHex works on any major browsers as Bookmarklet
version.
Users must save few bookmarks (only one is required) that
can be found on page: http://bit.ly/posh-ex and then just
click on the bookmark on page they want to run extension.
System architecture - Framework
CrossRider

CrossRider is a cloud-based development framework that
provide developers a way to create cross-browser
extensions using JavaScript.

CrossRider provides an IDE that can be accessed through
any browser, but application can be created in any IDE and
then uploaded to CrossRider's website.
System architecture - Overview
System architecture - Implementation
This project is based on
    ○ Microformat Shiv - by Glenn Jones
    ○ Microdata.JS - by Philip Jägenstedt
    ○ Green Turtle - by Alex Milowski
    ○ JQuery & JQueryUI
Components created by me:
    ○ Microformat2 parser
    ○ Converter
    ○ *UI
System architecture - Implementation
Microformat Shiv

Is a cross-browser JavaScript Microformat parser.

Parses HTML pages and returns a JSON object containing
microformats(type, properties) found and few information
about parser version, etc.
System architecture - Implementation
Microdata.JS

jQuery plugin for Microdata providing an API similar to the
HTML5 Microdata DOM API.

Parses HTML pages and returns a JSON object containing
an array of microdata (type, properties) found.
System architecture - Implementation
Green Turtle

Green Turtle is an implementation of RDFa 1.1 for
browsers.

It returns an array of JSON objects representing the
subject.
Subject contains the URI (IRI) value and an array of
predicates.
A predicate contains URI(IRI) value and an array of objects
(which can be literals, resources, or blank nodes).
System architecture - Implementation
Microformat2 parser

This parser is based on pseudo-code presented on http:
//microformats.org/

It returns an array with microformats(type, properties)
found.
System architecture - Implementation
Converter

This class converts:
    ○ JSON obtained from Microformat Shiv, Microformat2
       Parser and Microdata.JS into CSV,RDF/XML,Turtle
    ○ JSON obtained from Green Turtle to CSV,
       RDF/XML, Turtle
System architecture - Implementation
*UI
   ○ MicroformatUI
   ○ RDFaUI
   ○ PoshexUI

Creates menu and dialogs for microformats/microdata
found.
System architecture - Implementation
*UI
   ○ MicroformatUI
   ○ RDFaUI
   ○ PoshexUI

Creates a dialog containing a table with triples found on
document.
System architecture - Implementation
*UI
   ○ MicroformatUI
   ○ RDFaUI
   ○ PoshexUI

Link all components together and also provide methods to
control the extension's toolbar:
      ○   Show/Hide
      ○   Reset position
      ○   Save position
      ○   Restore position (from cookies)
Thank you




            DEMO
Questions




            ?

More Related Content

Similar to POSHex presentation

Python And The MySQL X DevAPI - PyCaribbean 2019
Python And The MySQL X DevAPI - PyCaribbean 2019Python And The MySQL X DevAPI - PyCaribbean 2019
Python And The MySQL X DevAPI - PyCaribbean 2019Dave Stokes
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8David Chou
 
Open Middleware Technologies for Smart Robotics - a FIWARE Smart Fest present...
Open Middleware Technologies for Smart Robotics - a FIWARE Smart Fest present...Open Middleware Technologies for Smart Robotics - a FIWARE Smart Fest present...
Open Middleware Technologies for Smart Robotics - a FIWARE Smart Fest present...eProsima
 
XUL - Mozilla Application Framework
XUL - Mozilla Application FrameworkXUL - Mozilla Application Framework
XUL - Mozilla Application FrameworkUldis Bojars
 
FIWARE Wednesday Webinars - The Use of DDS Middleware in Robotics (Part 2)
FIWARE Wednesday Webinars - The Use of DDS Middleware in Robotics (Part 2)FIWARE Wednesday Webinars - The Use of DDS Middleware in Robotics (Part 2)
FIWARE Wednesday Webinars - The Use of DDS Middleware in Robotics (Part 2)FIWARE
 
How Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul IrishHow Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul IrishNagamurali Reddy
 
Link. apache wicket [santi caltabiano]
  Link. apache wicket [santi caltabiano]  Link. apache wicket [santi caltabiano]
Link. apache wicket [santi caltabiano]santi caltabiano
 
IE10 PP4 update for W3C HTML5 KIG
IE10 PP4 update for W3C HTML5 KIGIE10 PP4 update for W3C HTML5 KIG
IE10 PP4 update for W3C HTML5 KIGReagan Hwang
 
IPMI is dead, Long live Redfish
IPMI is dead, Long live RedfishIPMI is dead, Long live Redfish
IPMI is dead, Long live RedfishBruno Cornec
 
Microservice and Service Fabric talk
Microservice and Service Fabric talkMicroservice and Service Fabric talk
Microservice and Service Fabric talkDaniel Kreuzhofer
 
VRE Cancer Imaging BL RIC Workshop 22032011
VRE Cancer Imaging BL RIC Workshop 22032011VRE Cancer Imaging BL RIC Workshop 22032011
VRE Cancer Imaging BL RIC Workshop 22032011djmichael156
 
Tell Me Quality Documentation
Tell Me Quality DocumentationTell Me Quality Documentation
Tell Me Quality DocumentationMarco Berlot
 
Link. wicket [santi caltabiano].txt blocco note
  Link. wicket [santi caltabiano].txt   blocco note  Link. wicket [santi caltabiano].txt   blocco note
Link. wicket [santi caltabiano].txt blocco notesanti caltabiano
 
2013 lecture-01-introduction
2013 lecture-01-introduction2013 lecture-01-introduction
2013 lecture-01-introductionPharo
 
An Introduction to AtoM, Archivematica, and Artefactual Systems
An Introduction to AtoM, Archivematica, and Artefactual SystemsAn Introduction to AtoM, Archivematica, and Artefactual Systems
An Introduction to AtoM, Archivematica, and Artefactual SystemsArtefactual Systems - AtoM
 
Dog food conference creating modular webparts with require js in sharepoint
Dog food conference   creating modular webparts with require js in sharepointDog food conference   creating modular webparts with require js in sharepoint
Dog food conference creating modular webparts with require js in sharepointfahey252
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascriptwendy017
 
An isas presentation on .net framework 2.0 by vikash chandra das
An isas presentation on .net framework 2.0 by vikash chandra dasAn isas presentation on .net framework 2.0 by vikash chandra das
An isas presentation on .net framework 2.0 by vikash chandra dasVikash Chandra Das
 
Unesco Presentation
Unesco PresentationUnesco Presentation
Unesco PresentationUmesh
 

Similar to POSHex presentation (20)

Python And The MySQL X DevAPI - PyCaribbean 2019
Python And The MySQL X DevAPI - PyCaribbean 2019Python And The MySQL X DevAPI - PyCaribbean 2019
Python And The MySQL X DevAPI - PyCaribbean 2019
 
Wedi
WediWedi
Wedi
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8
 
Open Middleware Technologies for Smart Robotics - a FIWARE Smart Fest present...
Open Middleware Technologies for Smart Robotics - a FIWARE Smart Fest present...Open Middleware Technologies for Smart Robotics - a FIWARE Smart Fest present...
Open Middleware Technologies for Smart Robotics - a FIWARE Smart Fest present...
 
XUL - Mozilla Application Framework
XUL - Mozilla Application FrameworkXUL - Mozilla Application Framework
XUL - Mozilla Application Framework
 
FIWARE Wednesday Webinars - The Use of DDS Middleware in Robotics (Part 2)
FIWARE Wednesday Webinars - The Use of DDS Middleware in Robotics (Part 2)FIWARE Wednesday Webinars - The Use of DDS Middleware in Robotics (Part 2)
FIWARE Wednesday Webinars - The Use of DDS Middleware in Robotics (Part 2)
 
How Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul IrishHow Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul Irish
 
Link. apache wicket [santi caltabiano]
  Link. apache wicket [santi caltabiano]  Link. apache wicket [santi caltabiano]
Link. apache wicket [santi caltabiano]
 
IE10 PP4 update for W3C HTML5 KIG
IE10 PP4 update for W3C HTML5 KIGIE10 PP4 update for W3C HTML5 KIG
IE10 PP4 update for W3C HTML5 KIG
 
IPMI is dead, Long live Redfish
IPMI is dead, Long live RedfishIPMI is dead, Long live Redfish
IPMI is dead, Long live Redfish
 
Microservice and Service Fabric talk
Microservice and Service Fabric talkMicroservice and Service Fabric talk
Microservice and Service Fabric talk
 
VRE Cancer Imaging BL RIC Workshop 22032011
VRE Cancer Imaging BL RIC Workshop 22032011VRE Cancer Imaging BL RIC Workshop 22032011
VRE Cancer Imaging BL RIC Workshop 22032011
 
Tell Me Quality Documentation
Tell Me Quality DocumentationTell Me Quality Documentation
Tell Me Quality Documentation
 
Link. wicket [santi caltabiano].txt blocco note
  Link. wicket [santi caltabiano].txt   blocco note  Link. wicket [santi caltabiano].txt   blocco note
Link. wicket [santi caltabiano].txt blocco note
 
2013 lecture-01-introduction
2013 lecture-01-introduction2013 lecture-01-introduction
2013 lecture-01-introduction
 
An Introduction to AtoM, Archivematica, and Artefactual Systems
An Introduction to AtoM, Archivematica, and Artefactual SystemsAn Introduction to AtoM, Archivematica, and Artefactual Systems
An Introduction to AtoM, Archivematica, and Artefactual Systems
 
Dog food conference creating modular webparts with require js in sharepoint
Dog food conference   creating modular webparts with require js in sharepointDog food conference   creating modular webparts with require js in sharepoint
Dog food conference creating modular webparts with require js in sharepoint
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascript
 
An isas presentation on .net framework 2.0 by vikash chandra das
An isas presentation on .net framework 2.0 by vikash chandra dasAn isas presentation on .net framework 2.0 by vikash chandra das
An isas presentation on .net framework 2.0 by vikash chandra das
 
Unesco Presentation
Unesco PresentationUnesco Presentation
Unesco Presentation
 

POSHex presentation

  • 1. POSHex Pasat C. Constantin Tiberiu Master ISS
  • 4. Introduction POSHex - Plain Old Semantic Html extension POSHex is an extension available for ○ Mozilla ○ Chrome ○ IExplore Detects semantic constructions (Microformat, Microdata and RDFa) within Html pages and provide to user a friendly user interface to read/save/validate those information in different formats.
  • 5. Introduction POSHex - Plain Old Semantic Html extension POSHex works on any major browsers as Bookmarklet version. Users must save few bookmarks (only one is required) that can be found on page: http://bit.ly/posh-ex and then just click on the bookmark on page they want to run extension.
  • 6. System architecture - Framework CrossRider CrossRider is a cloud-based development framework that provide developers a way to create cross-browser extensions using JavaScript. CrossRider provides an IDE that can be accessed through any browser, but application can be created in any IDE and then uploaded to CrossRider's website.
  • 8. System architecture - Implementation This project is based on ○ Microformat Shiv - by Glenn Jones ○ Microdata.JS - by Philip Jägenstedt ○ Green Turtle - by Alex Milowski ○ JQuery & JQueryUI Components created by me: ○ Microformat2 parser ○ Converter ○ *UI
  • 9. System architecture - Implementation Microformat Shiv Is a cross-browser JavaScript Microformat parser. Parses HTML pages and returns a JSON object containing microformats(type, properties) found and few information about parser version, etc.
  • 10. System architecture - Implementation Microdata.JS jQuery plugin for Microdata providing an API similar to the HTML5 Microdata DOM API. Parses HTML pages and returns a JSON object containing an array of microdata (type, properties) found.
  • 11. System architecture - Implementation Green Turtle Green Turtle is an implementation of RDFa 1.1 for browsers. It returns an array of JSON objects representing the subject. Subject contains the URI (IRI) value and an array of predicates. A predicate contains URI(IRI) value and an array of objects (which can be literals, resources, or blank nodes).
  • 12. System architecture - Implementation Microformat2 parser This parser is based on pseudo-code presented on http: //microformats.org/ It returns an array with microformats(type, properties) found.
  • 13. System architecture - Implementation Converter This class converts: ○ JSON obtained from Microformat Shiv, Microformat2 Parser and Microdata.JS into CSV,RDF/XML,Turtle ○ JSON obtained from Green Turtle to CSV, RDF/XML, Turtle
  • 14. System architecture - Implementation *UI ○ MicroformatUI ○ RDFaUI ○ PoshexUI Creates menu and dialogs for microformats/microdata found.
  • 15. System architecture - Implementation *UI ○ MicroformatUI ○ RDFaUI ○ PoshexUI Creates a dialog containing a table with triples found on document.
  • 16. System architecture - Implementation *UI ○ MicroformatUI ○ RDFaUI ○ PoshexUI Link all components together and also provide methods to control the extension's toolbar: ○ Show/Hide ○ Reset position ○ Save position ○ Restore position (from cookies)
  • 17. Thank you DEMO