1. Internet Applications Spring 2008

2. Review Last week –XML / RSS –PHP introduction –Exercises from last week –Unanswered questions

3. This week A word on our final projects http://www.techcrunch.com/2008/03/03/ google-gears-goes-mobile/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

4. What is style? Languages/Standards –CSS –XSL Similarities / differences Uses

5. XML DC record Alliance of Baptists Alliance of Baptists Records, 1987 - 2001 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> http://zsr.wfu.edu/collections/digital/ead/allianceofbaptists.xml

6. XML RSS Record Sample RSS File http://urltofile.xml This is a sample en-us Tue, 10 Jun 2003 04:00:00 GMT …

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

8. XSL Introduction Styling –XSL - eXtensible Style Language Querying –XPath –XQuery –XPointer –XLink Good resources for reference –http://www.w3schools.com/xsl/default.asphttp://www.w3schools.com/xsl/default.asp –http://www.w3.org/Style/XSL/http://www.w3.org/Style/XSL/ –http://www.w3schools.com/css/default.asphttp://www.w3schools.com/css/default.asp –http://www.csstutorial.net/http://www.csstutorial.net/

9. XSL Overview - 1 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Trans form"> Processing Instructions

10. Contents of Sample XSL transformation :

11. XSL – Sample Stylesheet <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> Sample XML File :

12. 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();

13. XSL Features - 1 Defining the ‘main’ processing template – Defining named Templates – Variables – Comments –

14. XSL Features - 2 Inserting data XPATH Like directory structures /=root –/Dublin/title = title field –/Dublin/title/@attrname= 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(),

15. XSL Features - 3 Control Structures –For Each –Choosing – –If

16. XSL – Sample Stylesheet

17. 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/

18. 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

19. What is CSS? A styling language - http://www.csszengarden.com/ http://www.csszengarden.com/ Client side Cascading / inheritance –@import "subs.css";

20. CSS Syntax Element { Attribute:value; /*comment*/ }.class { attribute:value; attribute:value;} Ul.thumb li a {attrribute:value;}

21. 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

22. CSS Box Model All elements in CSS are rendered in a box:

23. 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: http://www.w3.org/TR/CSS2/fonts.html

24. Standards W3c - http://www.w3.org/Style/CSS/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-csshttp://www.webdevout.net/browser-support-css –http://www.webstandards.org/action/acid2/http://www.webstandards.org/action/acid2/ –http://www.webstandards.org/action/acid3/http://www.webstandards.org/action/acid3/

25. Cascading External stylesheets –From within CSS @import(“style.css”); –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 –http://webdesign.about.com/cs/css/a/aa042103a.htmhttp://webdesign.about.com/cs/css/a/aa042103a.htm Screen – computer screen TV – for television

26. 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

27. Next week Spring Break Post-break –Technology Topics PHP/JavaScript –More programming –Ideas for final projects