1 / 27

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

rusk
Download Presentation

Internet Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/ • 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 <?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>

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

  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.asp • http://www.w3.org/Style/XSL/ • http://www.w3schools.com/css/default.asp • http://www.csstutorial.net/

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

  10. Contents of <xsl:template...> <html> <head> <title>Sample XSL transformation</title> </head> <body> <xsl:for-each select="*"> <p> <b> <xsl:value-of select="name(.)"/> <xsl:text>:</xsl:text> </b> <xsl:value-of select="./text()"/> </p> </xsl:for-each> </body> </html>

  11. 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="*"> <p><b><xsl:value-of select="name(.)"/>: </b><xsl:text> </xsl:text><xsl:value-of select="./text()"/></p> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>

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

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

  14. 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(),

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

  16. 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"/><br/> </xsl:for-each> </body> </html> </xsl:template> </xsl: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/ • 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 • 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/ • 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/

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

  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

More Related