,

,

,
• ,
  ...
  
  clear: [left | right | both]
  
  line-height:, vertical-align: top, middle, bottom, ... 
  
  4. 11. 2009
  
  img { vertical-align: baseline; }
  
  Tomáš Obšívač
  
  4
  
  CSS Box model 
  
  margin, border, padding 
  
  
  
  width, height 
  
  
  
  margins collapsing IE bug: šířka/výška nejen velikost obsahu, ale navíc padding
  
  min-width, min-height  
  
  min-width až IE 7 std. mód min-height = height
  
  
  
  overflow: scroll
  
  
  
  http://www.w3.org/TR/CSS2/box.html
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  5
  
  CSS pozicování 
  
  position:static 
  
  
  
  position: relative  
  
  
  
  default hodnota „nikam prvek nešoupat“ posunutí z místa výskytu: top, left, bottom, right např.: .x { right: -20px; }
  
  position: absolute 
  
  vyjmutí z „toku dokumentu“ a posunutí jako výše vzhledem k předchozímu pozicovanému prvku
  
  
  
  position: fixed
  
  
  
  
  
  
  
  absolutně vzhledem k oknu prohlížeče
  
  z-index
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  6
  
  CSS příklad 
  
  Jednoduché i složitější všude na webu...  
  
  
  
  
  
  * { margin: 0; } #hlavicka #logo { position: absolute; top: 20px; left: 145px; } ul { list-style: none; … } ul li { padding-left: 10px; background: transparent url('../li.png') 0 .5em norepeat; }
  
  www.csszengarden.com
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  7
  
  XML – Extensible Markup Language 
  
  Obecný značkovací jazyk 
  
  
  
  Formát pro výměnu dat  
  
  
  
  Platformová nezávislost, Unicode Making humans edit XML is sadistic!
  
  Rozšiřitelný = definujete vlastní značky = aplikace  
  
  
  
  Popisuje pouze obsah dokumentu
  
  RSS, SVG, DocBook, Jabber, SOAP, OpenDocument, MathML Aplikace HTML v XML = XHTML
  
  data serialization – JSON, YAML
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  8
  
  XML příklad – elementy, atributy <predmety> FI MU <dekan>Jiří Zlatuška <predmet vypsan=“ano”> Operační systémy Jan Staudek <predmet vypsan=“ne” uspesnost=“15%”> Computer graphic Jiří Sochor <predmet vypsan=“ano” uspesnost=“10%”> Služby počítačových sítí Michal Brandejs Jan Kasprzak 4. 11. 2009
  
  Tomáš Obšívač
  
  9
  
  Technologie XML 
  
  DTD, XML Schema, Relax NG 
  
  Definice XML aplikace
  
  
  
  XLink, XPointer, XInclude, XPath, ...
  
  
  
  CSS, XSLT, XSL-FO 
  
  Zobrazení a transformace XML
  
  
  
  Namespace
  
  
  
  PB138 Moderní značkovací jazyky a jejich aplikace (jaro)
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  10
  
  Document Type Definition 
  
  Způsob, jak definovat vlastní aplikaci XML 
  
  
  
  Definice pravidel, které má dokument dodržet 
  
  
  
  modernější schema languages: XML Schema, Relax NG
  
  XML je validní, pokud splňuje deklarované DTD
  
  Vložení DTD do XML  externí subset
  
  
  
  interní subset ]>
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  11
  
  Elementy v DTD
  
  *
  
  0..n
  
  +
  
  1..n
  
  ?
  
  0..1
  
  (x|y|z) vs. (x, y, z) empty any
  
  1
  
  4. 11. 2009
  
  Prázdný Cokoliv Tomáš Obšívač
  
  12
  
  ELEMENT a ATTRIBUT v DTD
  predmety (fakulta, dekan, predmet*)> predmet (nazev, pedagog+, kredity)> nazev (#PCDATA)> pedagog (#PCDATA)>
  
   
  
  CDATA, NMTOKEN, NMTOKENS, ID, IDREF, IDREFS #REQUIRED, #IMPLIED
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  13
  
  CSS v XML 
  
  Definice vzhledu XML dokumentu
  
  
  
  Funguje obdobně jako CSS v HTML  
  
  
  
  HTML: XML:
  
  h1 {} predmety {}
  
  Přilinkujeme pomocí
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  14
  
  XSLT 
  
  Transformační jazyk 
  
  
  
  
  
  Styl (stylesheet) obsahuje šablony (templates), které se aplikují na uzly XML adresované XPath výrazem 
  
  
  
  /, /predmet/nazev, ., predmet@vypsan, {@kod}
  
  Značky     
  
  4. 11. 2009
  
  <xsl:template match="nazev|predagog|kredity"> <xsl:apply-templates select="predmet" /> <xsl:value-of select="name()"/> <xsl:for-each select=”...”> <xsl:element name=“h2“>
  
  Tomáš Obšívač
  
  15
  
  XSLT – příklad <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  
  <xsl:template match="/">

  Předmděty

  <xsl:apply-templates select="predmet"> <xsl:sort select="nazev" />

  <xsl:template match="predmet">

  <xsl:value-of select="nazev"/>, učí
  
  Předpokládejme jen 1 vyučujícího
  
  <xsl:value-of select="pedagog"/>

  
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  16
  
  Well-formed XML (XHTML) vs. valid 
  
  Nekřížíme značky: vs.
  
  
  
  Uzavítání všech tagů (i nepárových):
  ,
  
  
  
  Citlivé na velikost písmen:
  
  
  
  Hodnoty zapisujeme do uvozovek:
  
  
  
  Všechny atributy mají své hodnoty: noshade=“noshade”
  
  
  
  Ošetření speciálních znaků pomocí entit:  entity: & < Ÿ – 
  
  4. 11. 2009
  
  index.php?paramA=hodnota¶mB=hodnota Tomáš Obšívač
  
  17
  
  Document Object Model 
  
  Platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents. 
  
  Zpřístupnění obsahu, logické struktury a vzhledu XML, HTML, ...
  
  
  
  Nejenom z JavaScriptu
  
  
  
  Firebug (FF rozšíření)
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  18
  
  Strom uzlů

  • kino
  • hospoda
  • FI
  
  
  
  • 
    
    
  • 
    
    
  • 
    
    
  
  
  uzly = objekty
  
  kino
  
  
  
  atributy nejsou uzly v DOM, ale vlastnosti objektů
  
  
  
  Node → Element (DOM HTML Model) skola = document.getElementById("fi"); skola.firstChild.nodeName
  
  
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  hospoda
  
  
  
  FI
  
  19
  
  JavaScript 
  
  Objektově orientovaný skriptovací jazyk  
  
  funkcionální, dynamický, netypovaný prototypy 
  
  
  
  
  
  implementace ECMAScript standardu
  
  Interpretován prohlížečem (či jinou aplikací) 
  
  
  
  náhrada tříd – nejdřív praxe, pak teorie :-)
  
  Využívá DOM
  
  Omezení daná bezpečností 
  
  4. 11. 2009
  
  manipulace se soubory (cookies) Tomáš Obšívač
  
  20
  
  JavaScript umístíme… 
  
  Do hlavičky 
  
  
  
  Do těla 
  
    
  
  Definice funkcí, provádí se na zavolání Provádí se při zobrazování dokumentu
  
  Externí soubor Unobtrusive JavaScript   
  
  4. 11. 2009
  
  Oddělení funkcí (chování) od struktury/obsahu Graceful degradation – “nějak” fungovat I bez JS Postupy, jak řešit klasické problémy (např. nekompat. prohlížečů) Tomáš Obšívač
  
  21
  
  Řídící struktury 
  
  Má je každý programovací či skriptovací jazyk... 
  
  Proměnné, 
  
  
  
  Větvení, cykly, výjimky   
  
  
  
  
  
  4. 11. 2009
  
  prom = new Array("1. hodnota", "2. hodnota", ...); prom = ["1. hodn. ", "hodnota1", ...];
  
  prom["hi"] = "ahoj"
  
  Objekty / Funkce 
  
  
  
  if, switch for, while; break, continue try { ... } catch(err) { .. }
  
  Pole 
  
  
  
  var
  
  Date, String, Math, ...
  
  Komentáře 
  
  // komentář
  
  Tomáš Obšívač
  
  22
  
  Události         
  
  onabort onblur onclick onchange onerror onfocus onload onmouseOut onmouseOver
  
           
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  onreset onsubmit onunload onDblClick onMouseDown onMouseUp onMouseMove onKeyPress onKeyDown onKeyUp
  
  23
  
  JavaScript použití 
  
  Reakce na události – manipulace s dokumentem 
  
  
  
  Zápis a čtení HTML elementů 
  
  
  
  Příklad?
  
  Animace obrázků 
  
  
  
  Příklad?
  
  Validace formulářů 
  
  
  
  interaktivní úpravy HTML
  
  Příklad?
  
  ...
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  24
  
  Rich Internet Aplication 
  
  Rozšíření modelu klient-server o vrstvu běžící v uživatelově prohlížeči, kde vykresluje UI a asynchronně komunikuje se serverem.  
  
  
  
  Vylepšení UI – interaktivita, drag-and-drop, slider (šoupátko), …  např. knihovny script.aculo.us Rychlejší odezva webu (ukládání dat na pozadí, prefetching)
  
  Technologie 
  
  
  
  4. 11. 2009
  
  AJAX (Asynchronous JavaScript and XML)  XMLHTTPRequest – API pro http přenos (XML vs. „text“)  DOM scripting  CSS Flash, JavaApplet, SilverLight, ... Tomáš Obšívač
  
  25
  
  AJAX 
  
  Nevýhody 
  
  
  
  Známe z... 
  
  
  
  webmail, Google Cokoliv (Maps, Suggest), Flickr
  
  Další paradigmata  
  
  
  
  Přístupnost, tlačítko zpět, nároky na (DB) server
  
  Server Push (Webcast, princip Instant Messaging) Single Page Application
  
  Příklad: Amazon.com Diamond Search, netvibes.com
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  26
  
  Více informací 
  
  http://www.w3schools.com/  CSS, JS, XML
  
  
  
  http://www.zvon.org/  XML tutoriály
  
  
  
  http://interval.cz/serialy/kom pletni-pruvodce-xslt/  XSLT
  
  
  
  Google :-)
  
  4. 11. 2009
  
  Tomáš Obšívač
  
  27