Internet Applications

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>

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 PHP

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

Internet Applications