Internet Applications Spring 2008. Review Last week –XML / RSS –PHP introduction –Exercises from last week –Unanswered questions

Internet Applications

Spring 2008

Review

• Last week– XML / RSS– PHP introduction– Exercises from last week– Unanswered questions

This week

• A word on our final projects

• http://www.techcrunch.com/2008/03/03/google-gears-goes-mobile/

• Tech-topic presentations – XSL / CSS

• Exercises– Focus on using XSL to transform data– CSS for layout

What is style?

• Languages/Standards– CSS– XSL

• Similarities / differences

• Uses

XML DC record<?xml version=“1.0” encoding=“UTF-8”?><!DOCTYPE qualifiedDublinCore PUBLIC '-//OCLC//DTD QDC v.1//EN'> <qualifiedDublinCore>

<Creator>Alliance of Baptists</Creator><Title>Alliance of Baptists Records, 1987 - 2001</Title><Source/><Language>en</Language><Coverage>2.1 linear feet</Coverage><Description>[Lots of text omitted]<Description><Rights>Collection is open.</Rights><Subject>Alliance of Baptists</Subject><Subject>Southern Baptist Alliance</Subject><Contributor/><Publisher>Z. Smith Reynolds Library, Wake Forest University</Publisher><Type>text/xml</Type><Relation>Alan P. Neely Papers, Z. Smith Reynolds Library, Relation><Identifier>http://zsr.wfu.edu/collections/digital/ead/allianceofbaptists.xml</Identifier>

</qualifiedDublinCore>

XML RSS Record

<?xml version="1.0"?> <rss version="2.0">

<channel> <title>Sample RSS File</title><link>http://urltofile.xml</link> <description>This is a sample</description> <language>en-us</language> <pubDate>Tue, 10 Jun 2003 04:00:00 GMT</pubDate> <item>…</item><item>…</item><item>…</item><item>…</item>

</channel>

</rss>

XSL Overview

• Extensible Stylesheet Language• Components

– Defined XML standard which is used in conjunction with a transformation engine to transform XML data

– Xquery/Xpath

• Capabilities, limitations– Document processing– Semi-functional programming language

XSL Introduction

• Styling– XSL - eXtensible Style Language

• Querying– XPath– XQuery– XPointer– XLink

• Good resources for reference– http://www.w3schools.com/xsl/default.asp– http://www.w3.org/Style/XSL/– http://www.w3schools.com/css/default.asp– http://www.csstutorial.net/

XSL Overview - 1

<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/><xsl:template match="/dc">

Processing Instructions</xsl:template>

</xsl:stylesheet>

Contents of <xsl:template...><html>

<head><title>Sample XSL transformation</title>

</head><body>

<xsl:for-each select="*">

<xsl:value-of select="name(.)"/><xsl:text>:</xsl:text>

<xsl:value-of select="./text()"/>

</xsl:for-each>

</body></html>

XSL – Sample Stylesheet<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/><xsl:template match="/dc">

<html><head>

<title>Sample XML File</title></head><body>

<xsl:for-each select="*"><xsl:value-of select="name(.)"/>: <xsl:text> </xsl:text><xsl:value-of select="./text()"/>

</xsl:for-each></body></html>

</xsl:template></xsl:stylesheet>

XSL PHP

• Data driven• <xsl:for-each/>• <xsl:choose/>• <xsl:variable/>

– Static, replaceable

• <xsl:include/>• No equivalent• No equivalent

• Process driven• Foreach($t as $p){}• Switch case;• Var $myvar=val

– Arrays, objects, updateable

• Require(‘’);• Array ();• Object->function();

XSL Features - 1

• Defining the ‘main’ processing template– <xsl:template match=“/”>

• Defining named Templates– <xsl:template name=“processme”/>

• Variables– <xsl:varaible select=“myvarvalue”/>

• Comments– <!– just Like HTML comments -->

XSL Features - 2

• Inserting data• <xsl:value-of select=“/Dublin/title”/>

• XPATH• Like directory structures /=root

– /Dublin/title = title field– /Dublin/title/@attrname= an element attribute

• . Is the current node– <xsl:for-each select=“.”/>

• // is a global search for an element– //title finds the title element anywhere in the document

• * is a wildcard• Built-In Functions

– Name(), Contains(), text(),

XSL Features - 3

• Control Structures– For Each

• <xsl:for-each select=“/date”></xsl:for-each>

– Choosing • <xsl:choose>

– <xsl:when select=“contains(/URL, “.edu”)>– </xsl:when>

• </xsl:choose>

– If• <xsl:if test=“./title != ‘’> </xsl:if>

XSL – Sample Stylesheet<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/rss"><html>

<body><xsl:for-each select="./channel/item">

<xsl:value-of select="title"/> </xsl:for-each>

</body></html>

</xsl:template></xsl:stylesheet>

XPath

• A DOM-style syntax that allows us to access elements in an XML file

• Examples– /dublinCore/title

– Access the title of a DC record

– /dulinCore/subject/@attribute– Access an attribute of the subject element

– /dublinCore/

Xpath (2)

• Xpath functions– Contains (//item/title, ‘England’)– substring-before(string1, string2), substring-

after(string1, string2)

• Xpath selectors– //elementname – finds an element anywhere in the

DOM– ./ - from the current context– / - from the root context– * - wildcard match

What is CSS?

• A styling language - http://www.csszengarden.com/

• Client side

• Cascading / inheritance– @import "subs.css";

CSS Syntax

Element {Attribute:value;

/*comment*/

}

.class { attribute:value; attribute:value;}

Ul.thumb li a {attrribute:value;}

CSS Selectors

• ul li {} – descendent li nodes of ul

• Ul, ol {} – both ul and ol elements

• a:hover {}– a pseudoclass

• .classname {}– all elements with class

• Div.classname {}– a div with a class

• #idname {}– the element with this id

• ul[attribute=“”] {}– ul with attribute

CSS Box Model

• All elements in CSS are rendered in a box:

Understanding size• Font Sizes

– em: the 'font-size' of the relevant font – ex: the 'x-height' of the relevant font – px: pixels, relative to the viewing device.

• Absolute Measurements– in: inches -- 1 inch is equal to 2.54 centimeters. – cm: centimeters – mm: millimeters – pt: points -- the points used by CSS2 are equal to 1/72th of an inch. – pc: picas -- 1 pica is equal to 12 points.

• Relative Measurements– Percentage values are always relative to another value

From: http://www.w3.org/TR/CSS2/fonts.html

Standards

• W3c - http://www.w3.org/Style/CSS/– CSS1 – Formatting– CSS2 – Positioning– CSS3 – Layout, Media, Interaction

• http://www.w3.org/Style/CSS/current-work#CSS3

• Browser compliance– http://www.webdevout.net/browser-support-css– http://www.webstandards.org/action/acid2/– http://www.webstandards.org/action/acid3/

Cascading• External stylesheets

– From within CSS @import(“style.css”);– From within HTML

• <LINK href=“style.css" rel="stylesheet" type="text/css“ media=“”>

• Start with minimal styles (mobile/print), add functionality as needed

• Use media selectors: • All – all media• Aural – sound• Handheld – mobile device• Print – for printing

– http://webdesign.about.com/cs/css/a/aa042103a.htm• Screen – computer screen• TV – for television

Class Exercises

• Exercise 1 - CSS Layout• Practice basic CSS layout for HTML

• Exercise 2 - External style sheets• Break apart exercise 3 from last week

• Exercise 3 - XSL Transformation• Create an XSL parser for PHP

• Exercise 4 - Photo album via RSS feed• Create a photo album using a Flickr feed, XSL

transformation to XHTML and CSS

Next week

• Spring Break

• Post-break– Technology Topics PHP/JavaScript– More programming– Ideas for final projects

Documents

Internet Applications Spring 2008. Review Last week –XML / RSS –PHP introduction –Exercises from last week –Unanswered questions