SlideShare a Scribd company logo
SMWCon Spring 2011, Arlington VA, USA
           April 29, 2011

        Jesse Wang | Ning Hu
What is Widget Editor
            –
™ Widget Editor is a part of the wiki infrastructure to
   make Semantic MediaWiki a social semantic web
   application development platform
™ To let people build web applications through
   metadata and GUI
   –  Lowering the bar for people to develop web
       applications
™ Still a very work-in-progress prototype (first alpha)
Agenda
                  –
Motivation

  Vision

    Live Demo

       Design

           Discussion, Q&A
Motivation
    –
Why we want to do this?
Usage of SMW
               –
™ Collaboration
™ Collecting structured data
™ Sharing information
™ Management of heterogeneous data
™ Simple workflow management
™ User-generated arbitrary queries
™ Data analysis and information discovery
Common Work Items
         –
™ Schema design
™ Extension choices
™ Forms
™ Template
™ Skins
™ Queries
Expert in Need
      –
Vision
        –
    It could be a lot easier…
Let’s start with some widgets…
Focus on Content
               –
™ Most users just like to build
   contents
   –  CMS: Drupal, WordPress, MW/
       SMW, …
   –  SNS: MySpace, Ning, WetPaint,
       LinkedIn, …
™ Frameworks allows people to
   focus on content or data
Data and Metadata
              –
™ Frameworks let users set “meta-data”
  –  So they can customize the content
™ Users contribute and customize
  –  via meta-data
     ™  including parameters
™ Users can build systems or content repository
  –  via meta-data (parameters)
Metadata as Glue
              –
™ Metadata to glue code and content
™ It brings power and flexibility in this paradigm:
   –  More metadata è Higher customizability
   –  More linkage èHigher flexibility
™ In Semantic MediaWiki
   –  Metadata = Special Wiki Data
     ™  Template, category, property, etc.
Metadata Programming
           –
™ Existing examples:
  –  “Allowed values” è Auto-completion in SF
  –  “has default form” è Map form to data (category)
™ We want to enhance the experience
  –  “has range” è auto-completion in Semantic Forms
  –  “has domain” è auto-construct form for the domain
  –  “has label/description” è metadata to use in forms
  –  “has style” è the visual part of customization
Object-Oriented
                –
™ OOAD is something quite old now
  –  Is OOAD in SMW application development?
™ Do we have tools to help user with OOAD?
™ Any Design Patterns to help?
™ Model-View-Controller (MVVM)
  –  Does the model get linked to view nicely?
Widget as Objects
                          –
™ Category and widget hierarchy
  –  Each category is a domain (class)
  –  Each category has a widget
  –  Widget reflects category hierarchy
  –  Animal è Person è Employee, Patient
™ Widget can embed other widgets
  –  Aggregation to make application construction easier
  –  Object “Person” contains object “Address” which has
      “State”, “City”, etc.
Widget as UI
                  –
™ Widget has a collection of fields
   –  Each field is linked to a property
   –  Each field gets metadata from associated property
      ™  Type (Date, Number, Widget, …)
      ™  Has domain and range…
™ Widget is also a user interface to edit and view wiki
   content
   –  Editing form can be automatically generated
Live Demo
      –
Among the first to see how it works
Demo Recap
                –
™ Widget Designer
  –  Data type (Number, File/Image, Page, …)
  –  Range (number range, enumeration, query)
  –  Live widget view
  –  Open architecture
  –  And more
™ Action Connector
  –  Action link between widget fields
™ Automatic Form Generation
WE Design
   –
  How we did it
SMW and OO
                –
™ Category è Class
™ Property è Attributes
™ Page in a category è Instance of a class
™ Data in a page è attribute values of an instance

™ Bringing OO into SMW is not too hard
SMW and MVC
              –
™ Model == category + property + template field?
™ View == template?
™ Controller == template + parser function?

™ More complicated and convolved …
™ We are not using *semantic* in SMW
WE Model
                         –
     Person                                     Sub Widget
Address        Name                                      Sup Widget
                                  Field    Field

   Employee            MW + SMW   Prop     Prop        Field       Field
    Company                                            Prop        Prop
                                     Template

                                     Sub Cate                Template
     Patient
     Disease
                                            Super Category
WE View
  –
WE Control
                  –
™ Field-Internal constraint defined in “Model”
   –  Property “Allows value”
   –  “#wfallowsvalue”
™ Field-External constraint defined by “Action
   Connector”
   –  Associate with parser function
WE Form
                     –
™ The editing view (input form) is automatically
   generated using the metadata
™ User can control:
   –  Label
   –  Table or Section (horizontal vs. vertical layout)
   –  Infobox (with header or not)
   –  Some styles
   –  Order (index)
   –  And more to be added
WE Act
                    –
™ Action Connector to dynamically modify the
   metadata
™ Upon changes in related field’s values
™ Provide richer interaction / transaction among the
   fields (properties)

™ All these are meta-data
Discussion
         –
It’s our first demo, we’ll have a lot to do
            We need your help.
WE Need Feedback
           –
™ “What if we build something that nobody uses?” J
™ Will it be useful?
™ If yes, are you willing to help?
  –  Help us with development
  –  Be our first customers
Thank You!
                  –
™ Questions, suggestions and comments?

More Related Content

PDF
Miha Lesjak Mobilizing The Web with Web Runtime
PDF
The Audio User Experience for Widgets
PPSX
Generating XML schemas from a Logical Data Model (EDW 2011)
PDF
Network Closets Project
PPTX
Portfolio Keep Cooler Black English
PPTX
Sixrules
PPTX
Facets of applied smw
PPTX
Semantic Wiki Page Maker
Miha Lesjak Mobilizing The Web with Web Runtime
The Audio User Experience for Widgets
Generating XML schemas from a Logical Data Model (EDW 2011)
Network Closets Project
Portfolio Keep Cooler Black English
Sixrules
Facets of applied smw
Semantic Wiki Page Maker

Viewers also liked (10)

PPTX
Building SMWCon Spring 2012 Site
PPTX
Microsoft Office Connector Update at SMWCon Spring 2011
PPTX
Chinese New Year
PPTX
Semantic Wiki: Social Semantic Web In Action:
PPS
Maravilloso!q!!
PPTX
Smwcon spring2011 tutorial applied semantic mediawiki
PPT
Aswc2009 Smw Tutorial Part 2 Froms Etc From Yaron
PPTX
Jist tutorial semantic wikis and applications
PPTX
Smart datamining semtechbiz 2013 report
PPTX
Social shopping with semantic power
Building SMWCon Spring 2012 Site
Microsoft Office Connector Update at SMWCon Spring 2011
Chinese New Year
Semantic Wiki: Social Semantic Web In Action:
Maravilloso!q!!
Smwcon spring2011 tutorial applied semantic mediawiki
Aswc2009 Smw Tutorial Part 2 Froms Etc From Yaron
Jist tutorial semantic wikis and applications
Smart datamining semtechbiz 2013 report
Social shopping with semantic power
Ad

Similar to Smwcon widget editor - first preview (20)

PPTX
SMWCon Spring 2012 SMW+ Team Dev Update
PDF
20121024 smw con_fall_michael_erdmann_agile_knowledge_management_with_smw+
PDF
Smw+tutorial berlin-fall-2011
PDF
The Expressive Power of UML-based Web Engineering (UWE)
PDF
A Controlled Natural Language Interface for Semantic MediaWiki
PDF
MOSKitt UIM (short description)
PDF
UML-Based Web Engineering
PDF
Model-Driven Software Development - Web Abstractions 1
PPT
Apresentacao sigdoc wiki_2010
PPT
Multilayered paper prototyping for user concept modeling
PDF
Aragon at al 2012
PDF
Implementing a Symfony Based CMS in a Publishing Company
PPTX
What I Learned at UX Cambridge 2013
PPTX
SMWCon 2012 Linked Data Visualizations
PPT
Searching Repositories of Web Application Models
PPTX
The Information Workbench - Linked Data and Semantic Wikis in the Enterprise
PDF
A Schema-Based Approach To Modeling And Querying WWW Data
KEY
Architectures for Inclusive Design
PDF
Wikidsmart PM: Requirements Management within Confluence, Integrated with JIRA
PPT
KnowIT, semantic informatics knowledge base
SMWCon Spring 2012 SMW+ Team Dev Update
20121024 smw con_fall_michael_erdmann_agile_knowledge_management_with_smw+
Smw+tutorial berlin-fall-2011
The Expressive Power of UML-based Web Engineering (UWE)
A Controlled Natural Language Interface for Semantic MediaWiki
MOSKitt UIM (short description)
UML-Based Web Engineering
Model-Driven Software Development - Web Abstractions 1
Apresentacao sigdoc wiki_2010
Multilayered paper prototyping for user concept modeling
Aragon at al 2012
Implementing a Symfony Based CMS in a Publishing Company
What I Learned at UX Cambridge 2013
SMWCon 2012 Linked Data Visualizations
Searching Repositories of Web Application Models
The Information Workbench - Linked Data and Semantic Wikis in the Enterprise
A Schema-Based Approach To Modeling And Querying WWW Data
Architectures for Inclusive Design
Wikidsmart PM: Requirements Management within Confluence, Integrated with JIRA
KnowIT, semantic informatics knowledge base
Ad

More from Jesse Wang (15)

PPTX
Agile lean workshop
PPTX
Big data analytic platform
PPSX
The Web of data and web data commons
PPSX
Hybrid system architecture overview
PPTX
Experiment on Knowledge Acquisition
PPTX
SemTech 2012 Talk semantify office
PPTX
SMWCon Spring 2012 Welcome Remarks
PPTX
Pre-SMWCon Spring 2012 meetup (short)
PPTX
Msra talk smw+apps
PPTX
Semantic Wikis - Social Semantic Web in Action
PPTX
Agile and effective project management of for-by wikis
PPTX
Aswc2009 Smw Tutorial Part 4 Wiki Tags
PPT
Aswc2009 Smw Tutorial Part 3 Halo Extension
PPTX
Aswc2009 Smw Tutorial Part 1 Intro And Examples
PPTX
Semantic Wiki: Social Semantic Web in Use
Agile lean workshop
Big data analytic platform
The Web of data and web data commons
Hybrid system architecture overview
Experiment on Knowledge Acquisition
SemTech 2012 Talk semantify office
SMWCon Spring 2012 Welcome Remarks
Pre-SMWCon Spring 2012 meetup (short)
Msra talk smw+apps
Semantic Wikis - Social Semantic Web in Action
Agile and effective project management of for-by wikis
Aswc2009 Smw Tutorial Part 4 Wiki Tags
Aswc2009 Smw Tutorial Part 3 Halo Extension
Aswc2009 Smw Tutorial Part 1 Intro And Examples
Semantic Wiki: Social Semantic Web in Use

Recently uploaded (20)

PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
Programs and apps: productivity, graphics, security and other tools
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
A comparative analysis of optical character recognition models for extracting...
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
sap open course for s4hana steps from ECC to s4
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Encapsulation theory and applications.pdf
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPTX
Big Data Technologies - Introduction.pptx
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
cuic standard and advanced reporting.pdf
PDF
Electronic commerce courselecture one. Pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
Spectroscopy.pptx food analysis technology
PDF
Review of recent advances in non-invasive hemoglobin estimation
20250228 LYD VKU AI Blended-Learning.pptx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Programs and apps: productivity, graphics, security and other tools
“AI and Expert System Decision Support & Business Intelligence Systems”
Encapsulation_ Review paper, used for researhc scholars
Mobile App Security Testing_ A Comprehensive Guide.pdf
A comparative analysis of optical character recognition models for extracting...
Diabetes mellitus diagnosis method based random forest with bat algorithm
sap open course for s4hana steps from ECC to s4
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Encapsulation theory and applications.pdf
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Big Data Technologies - Introduction.pptx
Spectral efficient network and resource selection model in 5G networks
cuic standard and advanced reporting.pdf
Electronic commerce courselecture one. Pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Spectroscopy.pptx food analysis technology
Review of recent advances in non-invasive hemoglobin estimation

Smwcon widget editor - first preview

  • 1. SMWCon Spring 2011, Arlington VA, USA April 29, 2011 Jesse Wang | Ning Hu
  • 2. What is Widget Editor – ™ Widget Editor is a part of the wiki infrastructure to make Semantic MediaWiki a social semantic web application development platform ™ To let people build web applications through metadata and GUI –  Lowering the bar for people to develop web applications ™ Still a very work-in-progress prototype (first alpha)
  • 3. Agenda – Motivation Vision Live Demo Design Discussion, Q&A
  • 4. Motivation – Why we want to do this?
  • 5. Usage of SMW – ™ Collaboration ™ Collecting structured data ™ Sharing information ™ Management of heterogeneous data ™ Simple workflow management ™ User-generated arbitrary queries ™ Data analysis and information discovery
  • 6. Common Work Items – ™ Schema design ™ Extension choices ™ Forms ™ Template ™ Skins ™ Queries
  • 7. Expert in Need –
  • 8. Vision – It could be a lot easier… Let’s start with some widgets…
  • 9. Focus on Content – ™ Most users just like to build contents –  CMS: Drupal, WordPress, MW/ SMW, … –  SNS: MySpace, Ning, WetPaint, LinkedIn, … ™ Frameworks allows people to focus on content or data
  • 10. Data and Metadata – ™ Frameworks let users set “meta-data” –  So they can customize the content ™ Users contribute and customize –  via meta-data ™  including parameters ™ Users can build systems or content repository –  via meta-data (parameters)
  • 11. Metadata as Glue – ™ Metadata to glue code and content ™ It brings power and flexibility in this paradigm: –  More metadata è Higher customizability –  More linkage èHigher flexibility ™ In Semantic MediaWiki –  Metadata = Special Wiki Data ™  Template, category, property, etc.
  • 12. Metadata Programming – ™ Existing examples: –  “Allowed values” è Auto-completion in SF –  “has default form” è Map form to data (category) ™ We want to enhance the experience –  “has range” è auto-completion in Semantic Forms –  “has domain” è auto-construct form for the domain –  “has label/description” è metadata to use in forms –  “has style” è the visual part of customization
  • 13. Object-Oriented – ™ OOAD is something quite old now –  Is OOAD in SMW application development? ™ Do we have tools to help user with OOAD? ™ Any Design Patterns to help? ™ Model-View-Controller (MVVM) –  Does the model get linked to view nicely?
  • 14. Widget as Objects – ™ Category and widget hierarchy –  Each category is a domain (class) –  Each category has a widget –  Widget reflects category hierarchy –  Animal è Person è Employee, Patient ™ Widget can embed other widgets –  Aggregation to make application construction easier –  Object “Person” contains object “Address” which has “State”, “City”, etc.
  • 15. Widget as UI – ™ Widget has a collection of fields –  Each field is linked to a property –  Each field gets metadata from associated property ™  Type (Date, Number, Widget, …) ™  Has domain and range… ™ Widget is also a user interface to edit and view wiki content –  Editing form can be automatically generated
  • 16. Live Demo – Among the first to see how it works
  • 17. Demo Recap – ™ Widget Designer –  Data type (Number, File/Image, Page, …) –  Range (number range, enumeration, query) –  Live widget view –  Open architecture –  And more ™ Action Connector –  Action link between widget fields ™ Automatic Form Generation
  • 18. WE Design – How we did it
  • 19. SMW and OO – ™ Category è Class ™ Property è Attributes ™ Page in a category è Instance of a class ™ Data in a page è attribute values of an instance ™ Bringing OO into SMW is not too hard
  • 20. SMW and MVC – ™ Model == category + property + template field? ™ View == template? ™ Controller == template + parser function? ™ More complicated and convolved … ™ We are not using *semantic* in SMW
  • 21. WE Model – Person Sub Widget Address Name Sup Widget Field Field Employee MW + SMW Prop Prop Field Field Company Prop Prop Template Sub Cate Template Patient Disease Super Category
  • 22. WE View –
  • 23. WE Control – ™ Field-Internal constraint defined in “Model” –  Property “Allows value” –  “#wfallowsvalue” ™ Field-External constraint defined by “Action Connector” –  Associate with parser function
  • 24. WE Form – ™ The editing view (input form) is automatically generated using the metadata ™ User can control: –  Label –  Table or Section (horizontal vs. vertical layout) –  Infobox (with header or not) –  Some styles –  Order (index) –  And more to be added
  • 25. WE Act – ™ Action Connector to dynamically modify the metadata ™ Upon changes in related field’s values ™ Provide richer interaction / transaction among the fields (properties) ™ All these are meta-data
  • 26. Discussion – It’s our first demo, we’ll have a lot to do We need your help.
  • 27. WE Need Feedback – ™ “What if we build something that nobody uses?” J ™ Will it be useful? ™ If yes, are you willing to help? –  Help us with development –  Be our first customers
  • 28. Thank You! – ™ Questions, suggestions and comments?