Fejlett Programozási Technikák 2.

Slides:



Advertisements
Hasonló előadás
HTML nyelv Hiper-Text Markup Language 1. óra.
Advertisements

HTML nyelv.
JQuery 8. előadás.
Weblap szerkesztés HTML oldal felépítése Nyitó tag Záró tag Nyitó tag Záró tag oldalfej tözs.
A webprogramozás alapjai B282
Programozás III STRING-XML.
Extensible Markup Language
2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML.
CSS médiatípusok - példák
Honlap készítés Érdekességek.
Stílus, mesteroldal, témák
Böngészők Internet Explorer Mozilla Firefox
Előadás vázlat Az XML története és alkalmazási területe
HTML nyelv.
STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}
HTML parancsok használata
Leírónyelvek: HTML és XHTML
© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben.
Hernyák Zoltán XML validálás.
Hernyák Zoltán XML és HTML.
WEBOLDALFEJLESZTÉS
Készítette: Nagy-Szakál Zoltán 2007.
XML alapok 2. XML hibaellenőrzés XML a böngészőkben XML parser
WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.
Közös kinézet Mester oldal, témák, skin-ek, css Webalkalkalmazás fejlesztése ASP.NET-ben Krizsán Zoltán.
Önleíró adatok: XML INFO ÉRA, Békéscsaba
HTML dokumentum felépítése
HTML oldal felépítése Készítette: Pataki Arnold
Webszerkesztés Stíluslapok (CSS).
SOAP alapismeretek A SOAP egy egyszerű XML alapú protokoll, ami lehetővé teszi, hogy az alkalmazások információt cseréljenek a HTTP-én keresztül. Forrás:
WEB Technológiák WEB-DB és XML ME Általános Informatikai Tsz. dr. Kovács László.
WEB Technológiák WEB-DB és XML ME Általános Informatikai Tsz. dr. Kovács László.
XML támogatás adatbázis-kezelő rendszerekben
PHP III. Fájlok, űrlapok.
CSS.
1.NET web szolgáltatások XSLT Bilicki Vilmos
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
XHTML – a tanultak összefoglalása
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
A <DIV> tag és formázás CSS-sel
CSS A CSS bemutatása.
HTML nyelv.
Weboldalak tervezése (X)HTML.
Hernyák Zoltán XSLT transzformációk.
Hyper Text Markup Language
Hyper Text Markup Language
Illés Zoltán ELTE Informatikai Kar
XML adatkezelés 1. témakör Az XML szabvány.
Java web programozás 11..
XML Mi az XML?  Extensible Markup Language  Kiterjeszthető jelölő nyelv  Adatok, adatstruktúrák leírására szolgál  A HTML és az SGML tapasztalataira.
Készítette: Turócziné Kiscsatári Nóra
Az NVU webszerkesztő program
Html nyelv (HyperText Markup Language)
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Java web programozás 2..
Fejlett Programozási Technikák 2.
A <DIV> tag és formázás CSS-sel
Informatikai rendszerek
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
Webprogramozó tanfolyam
Web Technológiák HTML 4.01 World Wide Web Consortium
HTML, XML szerkesztés Vezető: Majzik Zsuzsa
CSS Cascading Style Sheet HTML.
Fejlett Programozási Technikák 2.
Cascading Style Sheet.
JavaScript a böngészőben
Html parancsok.
Táblázatok A táblázat megadása a tag használatával lehetséges. A és tageken belül: a és tagek között adhatjuk meg a.
JavaScript a böngészőben
Előadás másolata:

Fejlett Programozási Technikák 2. 7/2

A mai előadás tartalma: CSS XML DTD XSLT WEBdav SyncML WAP WML

Problémák Tartalom, formázás egyveleg HTML formázó készlet szegényes HTML a dokumentum szerkezetét adja A böngészőre volt bízva a megjelenítés Netscape, IE, új elemek Egységes megoldás CSS

Előnyei Tartalom, formázás elkülönül Nyílt szabvány Sok böngésző támogatja Stílust definiál Megkönnyíti a munkát

Definiálható HTML elemen belül HTML dokumentum fejrészében Külső css fájlban Több külső css fájlban

Érvényesítési sorrend Böngésző alapértelmezett css Külső css Fejrész css Egyes elemekben definiált

A CSS bejegyzés felépítése Választó Tulajdonság Érték

Példa Body { color:yellow } p { font-family:”sans serif” } P text-align: center; color: black; font-family: arial h1, h2, h3, h4, h5, h6 { color: green}

Hivatkozások: Class p.jobb {text-align: right} p.kozep {text-align: center} … <p class=”jobb”>Ez a bekezdés jobbra lesz igazítva<p> <p class=”bal”>Ez a bekezdés jobbra lesz igazítva<p>

Hivatkozások: Általános .kozep {text-align: center} <input type=”text” class=”kozep”> <p class=”kozep”>Középre igazítva</p>

Hivatkozások: id #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } p#intro

Definiálás Külső oldal: Fejrészben: Az adott elemnél: <head> <link rel="stylesheet" type="text/css" href="mina.css" /> </head> Fejrészben: <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> Az adott elemnél: <p style="color: sienna; margin-left: 20px"> Ez egy bekezdés</p>

Formázási lehetőségek Háttér Szöveg Betű Keretvonal Margó Padding Listák

XML SGML (bonyolult) HTML Előre definiált elemkészlet Csak megjelenítés Hibakezelés (<li>, 30%)

XML nyelvcsalád XML Adatleíró nyelv XSL, XSLT Xpath XML Shema XQL …

XML Nincs nyelvtana Nincs elemkészlete Tetszőleges nyelvtan Tetszőleges elemkészlet Nagyon rugalmas

Példa <Feladat sorszam="14"> <vegrahajto>Kardos Katalin</vegrahajto> <megbizo>Nagy Emese</megbizo> <hatarido>2002.05.01</hatarido> </Feladat>

Szabályok Jelölőelemeket használ Minden kezdőelemhez tartozik záró Az elemek egymásba ágyazhatóak Nem metszhetik egymást az elem párok US-ASCII kódolás, ha nem azt jelezni kell Érzékeny a kis és nagy betűkre Nem kötelező de jó ha van hozzá DTD és azt betartja Jól formázott Érvényes

Szerkezet PI DTD Fejléc Törzs <?xml version="1.0"?> <!DOCTYPE Feladat SYSTEM "DTD\feladat.dtd"> <Feladat sorszam="14"> <vegrahajto>Kardos Katalin</vegrahajto> <megbizo>Nagy Emese</megbizo> <hatarido>2002.05.01</hatarido> </Feladat> DTD Fejléc Gyökér elem Törzs

Elemek <elem tulajdonság=”valami”> érték </elem> Nem célszerű tulajdonságot használni Nyitó elem Záró elem

Névtér URI xmlns <?xml version="1.0"?> <!DOCTYPE Feladat SYSTEM "DTD\feladat.dtd"> <Pelda1:Feladat xmlns:Pelda1="http://wilma.cab.u-szeged.hu :8080/cocoon/pelda1.xml"> <Pelda1:vegrahajto>Kardos Katalin</Pelda1:vegrahajto> <Pelda1:megbizo>Nagy Emese</Pelda1:megbizo> <Pelda1:hatarido>2002.05.01</Pelda1:hatarido> </Pelda1:Feladat>

DTD Öndokumentálás Nyeltan Elemkészlet Hibajavítás (B2B)

Példa <!ELEMENT Pelda1:Feladat (Pelda1:vegrehajto, Pelda1:megbizo, Pelda1:hatarido)> <!ELEMENT Pelda1:vegrehajto (#PCDATA)> <!ELEMENT Pelda1:megbizo (#PCDATA)> <!ELEMENT Pelda1:hatarido (#PCDATA)>

Ismétlődés operátorok Nincs Pontosan egyszer kell szerepelnie ? Egyszer vagy egyszer sem + Legalább egyszer * Akárhányszor (0 is) <!ELEMENT Pelda1:Feladat ((Pelda1:vegrehajto, Pelda1:hatarido))+, Pelda1:megbizo)>

Tulajdonságok <!ATTLIST feladat munkahely (irinyi|arpadter)> Módosító: #IMPLIED -- Nem feltétlenül szükséges. #REQUIRED -- Szükséges. #FIXED -- Kötelező a jelenléte és az értéke egyaránt. ”alapértelmezett érték”

XSLT

Felépítése XSLT egy XML dokumentum; melynek névtere (http://www.w3.org/TR/REC-xml-names) A legtöbb stíluslap önálló Gyökere <xsl:stylesheet> vagy <xsl:transform>

Példa <xsl:stylesheet xmlns:xsl="http://www.w3c.org/1999/XSL/Transform" xmlns:Pelda1="http://wilma.cab.u-szeged.hu:8080/ cocoon/xslp1.xml"> <xsl:template match="Pelda1:Feladat"> ez kerül az adott elem helyére </xsl:template> </xsl:stylesheet>

Eszközök IE 6.0 Cocoon Java Servlet XML formátum XSLT feldolgozó Utófeldolgozó HTML, XHTML, WML, PDF, XSL:FO

Példa(XML) <?xml version="1.0" encoding="ISO-8859-2"?> <oldal> <cim>Hello</cim> <tartalom> <para>Ez egy bekezdés</para> </tartalom> </oldal>

Példa(XSLT) <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="oldal"> <html> <head> <title><xsl:value-of select="cim" /></title> </head> <body> <xsl:apply-templates /> </body> </html> </xsl:template> </xsl:stylesheet>

For-each <?xml version="1.0" encoding="ISO-8859-2"?> <oldal> <munkatársak> <név> <vezetéknév>Nagy</vezetéknév> <keresztnév>Tamás</keresztnév> </név> <vezetéknév>Szép</vezetéknév> <keresztnév>Ilona</keresztnév> <vezetéknév>Kiss</vezetéknév> <keresztnév>Tihamér</keresztnév> </munkatársak> </oldal>

For-each <?xml version="1.0" encoding="ISO-8859-2"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="munkatársak"> <html> <head> </head> <body> <table border="1" cellspacing="0" cellpadding="8"> <tr> <td><b>Vezetéknév</b></td> <td><b>Keresztnév</b></td> </tr> <xsl:for-each select="név" > <td><xsl:value-of select="vezetéknév" /></td> <td><xsl:value-of select="keresztnév" /></td> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

Eredmény

Sorbarendezés <?xml version="1.0" encoding="ISO-8859-2"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="munkatársak"> <ul> <xsl:apply-templates select="név"> <xsl:sort select="vezetéknév"/> <xsl:sort select="keresztnév"/> </xsl:apply-templates> </ul> </xsl:template> <xsl:template match="név"> <li> <xsl:value-of select="vezetéknév"/> <xsl:text> </xsl:text> <xsl:value-of select="keresztnév"/> </li> </xsl:stylesheet>

Sorszámozás <?xml version="1.0" encoding="ISO-8859-2"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="munkatársak"> <xsl:for-each select="név"> <xsl:sort select="vezetéknév"/> <xsl:sort select="keresztnév"/> <p> <xsl:number value="position()" format="1. "/> <xsl:value-of select="."/> </p> </xsl:for-each> </xsl:template> </xsl:stylesheet>

if <?xml version="1.0" encoding="ISO-8859-2"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="oldal"> <table> <xsl:apply-templates/> </table> </xsl:template> <xsl:template match="név"> <tr> <td> <xsl:if test="keresztnév='Ilona'">---></xsl:if> </td> </tr> </xsl:stylesheet>

WEBdav Közös munka elősegítése Kompatíbilis a HTTP-vel Azonosítás Zárolás Tulajdonság kezelés Hierarchia kezelés Kompatíbilis a HTTP-vel

Metódusok PROPFIND -- lekérdezi az URI segítségével megcímezett erőforrás általunk megadott paramétereit. PROPPATCH -- manipulálja URI segítségével megcímezett erőforrás általunk megadott paramétereit. MKCOL -- segítségével tudunk új erőforrásokat, erőforráshalmazokat létrehozni GET, HEAD -- változatlan POST -- változatlan DELETE -- erőforrások, vagy erőforrások halmazának törlése, ha egyszerre többet szeretnénk törölni és egyet vagy többet nem tudunk törölni akkor egyet sem fog törölni. PUT -- erőforrásokat tölthetünk fel a szerverre, ha a megfelelő hierarchia már lére van hozva a MKCOL által COPY -- erőforrások, erőforráshalmazok másolását biztosítja beállítható mélységben MOVE -- hasonló mint a COPY csak törli az erőforrást LOCK – zárolás UNLOCK -- zárolás feloldása

Zárolás Shared Exclusive XML kód Paraméter továbbítás

Példa PROPPATCH /bar.html HTTP/1.1 Host: www.foo.com Content-Type: text/xml; charset="utf-8„ Content-Length: xxxx <?xml version="1.0" encoding="utf-8" ?> <D:propertyupdate xmlns:D="DAV:" xmlns:Z="http://www.w3.com/standards/z39.50/"> <D:set> <D:prop> <Z:authors> <Z:Author>Jim Whitehead</Z:Author> <Z:Author>Roy Fielding</Z:Author> </Z:authors> </D:prop> </D:set> <D:remove> <D:prop><Z:Copyright-Owner/></D:prop> </D:remove> </D:propertyupdate>

SyncML Tartalom szinkronizálás HTTP protokollra épül XML alapú Klines-szerver

Függvények <Add> adat hozzáadás <Alert> értesíti a célt <Atomic> együtt kell végrehajtani <Copy> adatok másolása <Delete> adat törlése <Exec> program futtatása <Get> adat letöltése <Map>két adatkészlet közötti kapcsolat frissítése <Put> felmásolás <Replace> felülírás <Search> keresés <Sequence> a programok sorban hajtódjonak végre <Sync> két adathalmazt szinkronizál