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 google-gears-goes-mobile/ 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 Alliance of Baptists Alliance of Baptists Records, en 2.1 linear feet [Lots of text omitted] Collection is open. Alliance of Baptists Southern Baptist Alliance Z. Smith Reynolds Library, Wake Forest University text/xml Alan P. Neely Papers, Z. Smith Reynolds Library, Relation>

XML RSS Record Sample RSS File This is a sample en-us Tue, 10 Jun :00:00 GMT …

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 – – – –

XSL Overview - 1 <xsl:stylesheet version="1.0" xmlns:xsl=" form"> Processing Instructions

Contents of Sample XSL transformation :

XSL – Sample Stylesheet <xsl:stylesheet version="1.0" xmlns:xsl=" Sample XML File :

XSL PHP Data driven –Static, replaceable 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 – Defining named Templates – Variables – Comments –

XSL Features - 2 Inserting data XPATH Like directory structures /=root –/Dublin/title = title field an element attribute. Is the current node – // 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 –Choosing – –If

XSL – Sample 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 –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 Client side Cascading / inheritance "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'font-size' –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:

Standards W3c - –CSS1 – Formatting –CSS2 – Positioning –CSS3 – Layout, Media, Interaction Browser compliance – – –

Cascading External stylesheets –From within –From within HTML Start with minimal styles (mobile/print), add functionality as needed Use media selectors: All – all media Aural – sound Handheld – mobile device Print – for printing – 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