toy

burnwholeInternet and Web Development

Feb 5, 2013 (4 years and 6 months ago)

156 views

3 major web
related efforts

MVC, Web X.0,

and the Semantic Web

Overview of MVC


Is the approach used by most web development frameworks


Can be used to build desktop or web apps

MVC: mapping vs. wrapping


Traditional: mapping


Programmer must explicitly turn object manipulation into SQL
that manipulates tuples in tables


Programmer must think in terms of deconstructing objects
from application and reconstructing objects from database


Ruby on Rails: wrapping


The framework lets the programmer think in terms of “active
records”, and the framework automatically makes the relational
database look like objects in the MVC framework


Are active records really object
-
like?


Methods of objects end up packed into attribute values sometimes

Web X.0


Managing media like photos, voice, music, video, animations


Making web applications less passive and more organized
around the activities that a user wants to perform

XML and the Semantic Web


Goal is to automate searching the web


XML is not a language, it is a language paradigm


Two components


Basic XML


very simple


Create new elements and attributes


Refer to namespaces


Database extensions


very complicated


Xpath


Xquery


XML Schema


New data types


New type constructors


Still strictly hierarchical

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

7

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

8

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

9

XML stands for…


XML stands for
eXtensible

Markup Language, the extensible
part is the key to its power.


XML is used in circumstances where a declarative language
would be a great benefit


Examples


Windows Presentation Foundation: UI controls


Silverlight: webpage controls


Adobe Flash Builder (Flex): webpage controls


SMIL multimedia


MATH ML for equations

HTML and Tags


Markup Languages.



"
Markup" refers to the process of embedding commands in data. HTML is a markup
language. When a browser fetches a web page from a web server, it processes the text
-
based HTML "markups" that appear in the page in order to present the page to us.



HTML: a Markup Language.



Importantly, HTML is focused on the visual appearance of information. It controls the
layout of web pages, including "controls" such as menus and buttons. It also allows us to
link pages together. One of the biggest jobs of HTML is to tell the browser how to layout
pieces of text, such as the descriptions of books sold by Amazon.



HMTL has a fixed set of legal tags. Here is a sample HTML file:


HTML, continued


<html>
-


<body>


<h1> This is a heading </hl>


</body>


</html>



Notice that every tag comes in pairs, one with
with

a "<>" and
the other with </>.



The
important point, though is that these tags
-

html, body, and h1
-

are HTML specific tags, and we cannot invent our own.




The Bottom Line: Semantics


This is why it is such a critical part of Semantic Web
technology: we can use it to capture the meaning (or
“Semantics”) of data so it can be processed automatically


But HTML only specifies the way a page is displayed, not
what it is about


SMIL: an XML language

First, let's start with the core of a SMIL program
:

<
smil
>

<head>

<layout
>

... here is where we put commands that control the visual layout of the
page we are constructing with SMIL
...

</layout>

</head>

<body
>

...
this is where we put the core of our SMIL program, the part that
specifies the multimedia presentation that is to appear in the page
...

</body
>

</
smil
>




<
smil

xmlns:qt
="http://www.apple.com/quicktime

/resources/
smilextensions
"
qt:autoplay
="true"
qt:time
-
slider
="true">

<head>

<meta name="title" content="Buzz's Video"/>

<layout>

<root
-
layout background
-
color="white" width="320" height="290"/>

<region id="
videoregion
" top="0" left="0" width="320"
height="290"/>

</layout>

</head>

<body>

<
seq
>

<video
src
="

https://vimeo.com/45369956
"
region="
videoregion
"/>

<video
src
="

https://vimeo.com/45338068
"
region="
videoregion
"/>

</
seq
>

</body>

</
smil
>

<
smil

xmlns
="http://www.w3.org/2000/SMIL20/CR/Language">


<head>


<layout>


<region id="rect3" top="110px" left="0px"


height="20px" width="240px"
backgroundColor
="red"/>


</layout>


</head>


<body>


<par
dur
="10s">


<animate
targetElement
="rect3"


attributeName
="width"


from="240"


to="356"


dur
="5s" />


</par>


</body>

</
smil
>

SMIL example that runs…

MathML
: an XML language

=

2 2 2
a b c
 
MXML: an XML language

<?xml version="1.0" encoding="utf
-
8"?>

<
s:Application

xmlns:fx
="http://ns.adobe.com/
mxml
/2009"


xmlns:s
="library://ns.adobe.com/flex/spark"


xmlns:mx
="library://ns.adobe.com/flex/mx"
minWidth
="955"
minHeight
="600">

<
fx:Declarations
>

<!
--

Place non
-
visual elements (e.g., services, value objects) here
--
>

</
fx:Declarations
>

<
mx:DateChooser

x="527" y="142"/>

</
s:Application
>


Creates…

XAML: an XML language

Is written as…

<
UserControl


xmlns
="http://schemas.microsoft.com/
winfx
/2006/
xaml
/presentation"


xmlns:x
="http://schemas.microsoft.com/
winfx
/2006/
xaml
"


xmlns:sdk
="http://schemas.microsoft.com/
winfx
/2006/
xaml
/presentation/
sdk
"


x:Class="SilverlightApplication1.MainPage"


Width="640" Height="480">



<Grid x:Name="LayoutRoot" Background="White">



<
sdk:Calendar

Margin="220,102,244,116"/>


</Grid>

</
UserControl
>

Adding schemas


Initially


DTDs


Later


XML schema


Save schema fragments and import them


Non
-
string data types


Keys and FKs


Type constructors


Primitive


integer, float,
boolean
, date, ID


Simple


list, union


Complex


groups of elements


Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

25

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

26

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

27

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

28

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

29

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

30

Namespace references

<item
xmlns

= “http://www.acmeinc.com/
jp#supplies



xmlns
:toy

= “http://www.acmeinc.com/
jp#toys
”>


<name>backpack</name>


<feature>


<
toy
:item
><
toy
:name
>
cyberpet
</
toy
:name
></
toy
:item
>


</feature>


</item>

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

32

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

33

MPEG
-
2

MPEG
-
2

is a standard for "the generic coding of moving
pictures and associated audio information
".


It
describes a
combination of

lossy

video compression

and
lossy

audio data
compression

methods which permit storage and transmission of
movies using currently available storage media and transmission
bandwidth
.


The primary application targeted during the MPEG
-
2
definition process was the all
-
digital transmission of broadcast
TV quality video at coded

bitrates

between 4 and 9 Mbit/sec.

Copyright © 2006 Pearson
Addison
-
Wesley. All rights
reserved.

15

35

XPATH


for searching XML schemas
hierarchically


An
XPath

expression takes a document tree as input and
returns a multi
-
set of nodes of the tree


Expressions that
start

with
/

are
absolute path expressions


Expression
/



returns root node of
XPath

tree



/
Students
/
Student



returns all
Student
-
elements that are
children of
Students

elements, which in turn must be children
of the root



/
Student



returns empty set (no such children at root

XPATH continued


Current

(or
context

node)


exists during the evaluation of
XPath

expressions (and in other XML query languages)



.



denotes the current node;
..



denotes the parent



foo/bar



returns all
bar
-
elements that are children of
foo

nodes, which
in turn are children of the current node



.
/foo/bar



same



..
/
abc
/
cde



all
cde

e
-
children of
abc

e
-
children of the
parent

of the
current node


Expressions that don’t start with
/

are
relative

(to the
current node)


Attributes, text, …


/Students/Student/
@
StudentId



returns all
StudentId

a
-
children of
Student
, which are e
-
children of
Students
, which are
children of the root


/Students/Student/Name/Last/
text(

)



returns all t
-
children of
Last e
-
children of …


/
comment( )



returns

comment nodes under root


XPath

provides means to select other document components as
well


XPointer


XPointer

= URL +
XPath

XQuery


General structure:

FOR
variable declarations

WHERE
condition

RETURN
document


Example:


(:
students who took
MAT123 :)

FOR $t IN doc(“http://xyz.edu/transcript.xml”)//Transcript

WHERE $t/
CrsTaken
/@
CrsCode

= “MAT123”

RETURN $t/Student


Result:


<Student
StudId
=“111111111” Name=“John Doe” />


<Student
StudId
=“123454321” Name=“Joe Blow” />


An example

FOR
$c

IN distinct
-
values(doc(“transcript.xml”)//
CrsTaken
)

RETURN



<
ClassRoster

CrsCode

= {
$c
/@
CrsCode
} Semester =
{
$c
/@Semester}>


{



FOR
$t

IN doc(“transcript.xml”)//Transcript



WHERE
$t
/
CrsTaken
/[@
CrsCode

=
$c
/@
CrsCode

and





@Semester =
$c
/@Semester]



RETURN
$t
/Student





ORDER BY
$t
/Student/@
StudId


}


</
ClassRoster
>


ORDER BY
$c
/@
CrsCode