Download presentation
Presentation is loading. Please wait.
Published byJack Bryan Modified over 9 years ago
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
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.