M M S. Značkovací jazyky

Podobné dokumenty
Vektorový formát SVG

KAPITOLA 11. Kreslení v prohlížeči. Jazyk SVG

Scalable Vector Graphics (SVG)

MULTIMEDIÁLNÍ A HYPERMEDIÁLNÍ SYSTÉMY

Kaskádové styly (CSS)

Multimédia a Web 4IZ228 tvorba webových stránek a aplikací

HTML Hypertext Markup Language

CSS V DIGITÁLNÍ KARTOGRAFII

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery

Grafika na webu. Lukáš Bařinka

MULTIMEDIÁLNÍ A HYPERMEDIÁLNÍ SYSTÉMY. 12) Vektorový obraz

Základy graky. Jan Hamá ek. 13. zá í 2016

ZNAČKOVACÍ JAZYKY A JEJICH VYUŽÍVÁNÍ MARKUP LANGUAGE AND THEIR USE. Zdeněk Havlíček

Vývoj Internetových Aplikací

Technologie SVG aktuální standard webové vektorové grafiky

á ý á á ú ú ř ý ý ů ě ů ř á á á á ě ě š ř ů á ě ě ě ů ř š ý š ě ů ž ář ř ř š ý ář á ě ř á ý ě ů á á á ě á ž ě ě ů ě ý ě ř ě šť Č ý á á ř á ě á ř ý ý á

: ;

Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok:

TRANSFORMACE OBJEKTOVÉ PETRIHO SÍTĚ Z JAZYKA OPNML DO GRAFU TRANSFORMATION OF OBJECT-ORIENTED PETRI NET FROM OPNML LANGUAGE TO GRAPH

Vývoj Internetových Aplikací

IVT. Grafické formáty. 8. ročník

ů ř Ž ý ý ř ď ř

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Žú é ú é é ů é Ž Ž ř Č é Ž ř é Ž ž ř é ú é é é Ž é ú ř ó é Č ú ú ř ú úř ř Ž ú ř ř ř Ú é é ú ú ů é ú Č ř ř ř ů

VYŠŠÍ ODBORNÁ ŠKOLA A STŘEDNÍ ŠKOLA, s.r.o. České Budějovice Pražská 3 ABSOLVENTSKÁ PRÁCE Tereza Fuková

MASARYKOVA UNIVERZITA V BRNĚ

Ě Ž

Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita

ň ú Ú ů é é ň ů ž ů ů ů ů é é é é ú ň é ú ú ů é é ů ů Č é ň ú ú ů é é ů Ť ň é ů ů ú ň é ú ť ť é é é ů é é ů é é ť ň ú ú ů é é ů ů ú é ů é ů é ů ť ů ú

Í ž ž Ž ž Ž Ž ž Š ď Ž Í ť ž Í Ž Ž Ž Í Ý Š Í Š ž Ž Š ž ž ť Ž Š

š Ž ř Ž Ž Ž ý ů ř ý úř ř ý š Ž šž ž úř ř ý š ů ů ř Ž úř ú ů ů úř ř Ž ř š ý úř ř ř ý ří ž ř Ž ř Š ý ýš ý Í ř úř ř ý ú ú ý š Ž ř Í ř ž ř ů Ž ý ý ý ý

ď é Í Í é é é Ž é Ž é Ž é Ž É é é

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Vývoj Internetových Aplikací

Č Ž ú ú ú Š ú Š ú ú ó ú Č ú ú ú Č Ů ú ň ú ú Ě ú ú

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Woody a Steina Vasulkovi

ž ř ř ý Ž š ý š š Ž ř š š š ř š ý š ý Ž ů Ž ž š ý Ž Č š ý š Ů Ů ř ř š š ř ý ý ž ý Ž šť š ý ý ý ý ů ůž ý ý ř ý ý ž ý Ž ý ú š ý Ž Í ů ý ů ů ů ú ý ů ř ý

Alena Malovaná, MAL305

Virtuální zákaznické centrum

Č Ý Ý Ě Ď Ý ÉŘ Á ó ě ě ě ě ě Á ě ě ě ě ě ě ě ě

F a k u l t a m a n a g e m e n t u v J i n d ř i c h o v ě H r a d c i K a t e d r a m a n a g e m e n t u i n f o r m a c í V y p r a c o v a l a :

Í ž Í Ý Ž Ž Č Ú Í Í Í Ž Ž Ď Ž Ť ž Ť

Základy XML struktura dokumentu (včetně testových otázek)

ř ý ý ř ě Úř ř ř š ú ř ý ěř Ú Č ě Í ú ř ú ý ů ě ě Í ř ě š ú ř ú ř Í ř ě ě Č ó Ž ě ýš ě š Č

Technologie SVG a HTML5 objekt Canvas jako perspektivní metody vkládání dynamické grafiky do www stránek SVG technology and HTML5 Canvas object as

Možnosti interaktivní prezentace prostorových modelů na internetu

Základy HTML (2. přednáška)

IV122 Matematika a programování Úvod kurzu. Radek Pelánek

ň č ů ý ů ů ů ý ť č č ý č č ý ý ý č ú ý ů ť č č Ú ů Ý ů ů ú ý ů ů úč Ú č ů ů úč ý ů ů č ů úč Í ů Í Í ý č úč ů č ň ú ú ů ú č ů č ň ú ú ů ú ú ý ů ň ý ú

V B r n ě, 2 4. b ř e z n a

Lehký úvod do XML v kartografii

Č ů ť ú ů ť ť ú ů ů ť ť ň ů Ť ť ů ó Č ú ť ů ů ů ú ó ó ť ů ů ú ú ú Á ú ť ť ó ň ů ů ň ť Ů Ů ť ň ů ů

Předmluva k druhému vydání 13. Úvod 17. ČÁST 2 Vytváření dokumentů XML 65

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

HTML - Úvod. Zpracoval: Petr Lasák

Ž Ý Ř Ě Ž ď ď Ž

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

š ř ž ů ř š ů ř Ž ř é Č ř ř ú Č ř ř ř é Č ř é ý é ýš ú Ť ý Í Ž Ž ú ú ň é ř Ž ř ů Ž ú ř Ž Ž ř ů ú ú Ž Ž ů ř é Č é é ž š é é ž š ř ř ř

Kreslíme do webu. Canvas

ě ě é ň é ř ř ě ř é ě ě č ě úč ě é č č ě č é ě é čů ř ů č é ě ž ř ú ř ř č ř ě ě ř é Š ř é ř ě ř ř ú č ě ř é Š ř ě ř ř é č ě é é ž é Č é č é é ř ě žň ě

Ř Í Ě ŘÍ Í Ě É Ř Ť ž é ě ž ě Í é ě ž ú ě ě ě é é é ž é ě é é Ú ě é ú ě ž ě ě é ú ě ú ž é ž Ž é Ž Ž ť ž ú é ě Ž ě ž Ť ž ě ž ž ě ě é ě é Ž é ě é é ě é é

Python XML a Web 1 PGS

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Ý é ě é é Ý é Ú é é Ý Š ě é Č ě Ý ě ž é é é Í é Č Š Ž é ž é ž é é ě é é ž é ě Ž é é é é ě Á ÁŘ

Ý Á Š Ť ě ř ě ě ě ř ě ř ř ě ě ř ě ů ř ř ě ž ř ě Í ě ě ě ě ů ě ě ř ů ěž ř ě ů ř ě ů ž ě ň ú ú ů ž ů Ř ř ž ů ě ř ř ěř ů ěř ů ů ů ě ů ě ů ž ě ř ř ě ř ě ě

Inovace bakalářského studijního oboru Aplikovaná chemie

Michal Krátký. Tvorba informačních systémů, 2008/2009. Katedra informatiky VŠB Technická univerzita Ostrava. Tvorba informačních systémů

Tvorba informačních systémů

Ú é š é é š ú ů š Í Ú ú éú ú ú ú ú é é

ě

13. Vytváření webových stránek

Tvorba webových stránek

Interaktivní model laboratoře RDC

Reprodukce obrazových předloh

ť Ž ž ž ž ž ž ť ž ť É Ě ž ž ť ž ž ž ž ť ž ž ž

Ú é ů é Ú é Ž é é é ě Ú ž é ě ž Ž ě é ě ě ě ě é ě Ú ě ž é ě ě Ž ě ě ě Š ě ó ě ě Í é Ž é Ž Ž ě ě ě ě ě Š ůž ě ěž Ž Ž ě Ž Ž Ž ě ň ň ě ó é Ž ě

Analýza dat a modelování. Speciální struktury

Jihočeská univerzita v Českých Budějovicích. Možnosti využití SVG ve webovém designu Possibilities of using SVG in web design

Univerzita Karlova v Praze Právnická fakulta DIPLOMOVÁ PRÁCE Filip Kračman

Rastrová grafika. Grafický objekt je zaznamenán jednotlivými souřadnicemi bodů v mřížce. pixel ( picture element ) s definovanou barvou

ZÁPADOČESKÁ UNIVERZITA V PLZNI

ď š š š š ň ť Í Í š Í š š Č ť š š š ň š Ů š š šť š š

V H L U B O K É N A D V L T A V O U J A N H E N D R Y C H

ž ř ž é ň ž šš ř ň ř ř č é é ř é ž é ř šř š š ř ř č é š é é ř é č č é ř é č é ř

ě ě é é Ú Ů ě ů ě ú Í Č ě ú é ň é Ú ě Ý é ů ě ě ě š ú ě ě š ů Ú ÚČ ě ň ú ž ú š ě é Ž é ÚČ é é é Š ě Ž ÚČ ň ÚČ ó ú ú ú Ž ú Č Ž Ů ú š ě Ý ě ě ž ú ě é š

E M B L E M A T I C K É M Y S T É R I U M Z A H R A D Y

í Š ó č É Í é á ď Ď é Š Á ó ó É Ó

Obrázky (reprezentace, generování, úpravy) IB111 Úvod do programování skrze Python

Úvod do aplikací internetu a přehled možností při tvorbě webu

Srovnání programů pro editaci 2D grafiky

ř ř ř Č Ů ř úř ů ú ů ř ž úř ž ř š ř Č Ý řž š ů ů ů ú ý ýš ř ž ý ý ý ž ž ú ů ř ř ú ů ýš ů ý ž š ň ú š

ě ě ě ě š Ť ě š Ť š ň ě ě ž ě ě Ť ě ě ě ě ě Ť š ž ě ě ě Ť Ť š Í ěž ž ě ěž Á Ě Ě Á Ě É ě ě ě š Ž Ú ž ě ě š ě Ť š Ť ě Š Ť š Š Í ě š Ť ž ě š ě Ť

Č š ř ř ř ř š ř Č Ř ň ž ř ř ý ř ř ž š ž š ř ň ý ř ú ý ř š ř ů ý ú š ž ž ř ř ř ž Ž š ř š Ž ř ž š š

Inovace výuky prostřednictvím šablon pro SŠ

ť ě Ť ř ť ý ů ý ř ř ě ě ř ě ž ů ě ě ě ý ú ň š Č ř ě ř ž ě Ř š ů ž ů ř ž ČÍ š Š ě ž ř ž ř ý ř ě ř ř Ů ě š ž ř Č ů ě ř ř ž ý ř š ý ě ů ě ě š ř ě ř ž ě ý

RDF serializace Turtle

Další XML technologie

Zadání soutěžních úloh

Í ž Ž Ž Č Í Ú Í Ž Ž Í ť Í Í Ž Ť

Transkript:

M M S Značkovací jazyky

H i s t o r i e SGML HTML XML VRML TIFF...

S o u č a s n o s t XML Schémata -> Mnoho nových jazyk ů, formátů

B u d o u c n o s t Kdo ví

Z n a č k y R ů zný charakter Ohraničující Uvozující Speciální znaky Escape sekvence

V ý h o d y Čitelné člov ě kem i strojem (až na výjimky nap ř. TIFF) Snadná modifikace souborů Stejný jazyk pro popis dat i algoritm ů (chování)

X M L Z n a č k y / 1 Prvky, Elementy, Tagy <NazevZnacky> Obsah značky </NazevZnacky>

X M L Z n a č k y / 2 <NazevZnacky/>

X M L Z n a č k y / 3 <NazevZnacky NazevAtributu= Hodnota atributu /> <NazevZnacky NazevAtributu= Hodnota atributu >Obsah značky</nazevznacky>

Z n a č k o v a c í j a z y k y Scalable Vector Graphics (SVG)

S V G Ú č e l Jazyk pro 2D vektorovou grafiku Založen na jazyce XML W3C recommendation Určen zejména pro oblast WWW Nachází uplatnění i v digitální kartografii

S V G Č á s t i Grafické objekty Symboly Efekty s rastrovým obrazem Fonty Animace

S V G V y k r e s l o v á n í Shapes, text fill, stroke solid color, gradients, patterns Raster Filtrace Maskování clip, opacity

S V G S t r u k t u r a Element svg Element g Elementy rect, path,... Element image Dědičnost...

S V G S t r u k t u r a Element switch External resources Element g Elementy rect, path,... Element image Dědičnost...

S V G S o u ř a d n i c e width, height viewbox (<min x>, <min y>, <width>, <height>) preserveaspectratio <svg width="453px" height="300px" viewbox="-5616 0 11039 11029"

S V G P r o s t o r o v é r e f e r e n č n í s y s t é m y Interoperabilita Element metadata reference na dokument well known identifier úplně v dokumentu

S V G P r o s t o r o v é r e f e r e n č n í s y s t é m y <metadata> <rdf:rdf xmlns:rdf = "http://www.w3.org/1999/02/22-rdfsyntax-ns#" xmlns:crs = "http://www.ogc.org/crs" xmlns:svg="http://wwww.w3.org/2000/svg"> <rdf:description> <crs:coordinatereferencesystem svg:transform="rotate(-90)" rdf:resource=""http://www.example.org/sr s/epsg.xml#4326"/> </rdf:description> </rdf:rdf> </metadata>

S V G P r o s t o r o v é r e f e r e n č n í s y s t é m y <metadata> <rdf:...> <rdf:description> <crs:coordinatereferencesystem svg:transform="rotate(-90) scale(100, 100)"> <crs:identifier> <crs:code>4326</crs:code> <crs:codespace>epsg</crs:codespace> <crs:edition>5.2</crs:edition> </crs:identifier> </crs:coordinatereferencesystem> </rdf:description> </rdf:rdf> </metadata>

S V G P a t h s Cesty mohou být vyplněny Polylinie, Eliptická, Beziérova,... Zápis pomocí předpisu Prvky obecného předpisu move to (M), line to (L), close (z) <path d="m 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" strokewidth="3" />

S V G Z á k l a d n í t v a r y rect, circle, ellipse, line, polyline, polygon

S V G O d k a z y Xlink <a xlink:href="http://www.w3.org"> <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" /> </a>

S V G S k r i p t o v á n í Xlink <script type="text/ecmascript"> <![CDATA[ function circle_click(evt) { var circle = evt.target; var currentradius = circle.getattribute("r"); if (currentradius == 100) circle.setattribute("r", currentradius*2); else circle.setattribute("r", currentradius*0.5); } ]]> </script>

S V G A n i m a c e Elementy DOM SMIL

S V G A n i m a c e Pohyb Barva Transform

S V G P o d p o r a Mozilla Firefox SMIL interpret Inkscape Corel Draw Adobe Ilustrator

Z n a č k o v a c í j a z y k y VML (Vector Markup Language)

V M L Ú č e l Stejný jako SVG Microsoft Nebyl nikdy standardizován IE

V M L U k á z k a <html xmlns:v="urn:schemas-microsoftcom:vml"> <style>v\:* {behavior:url(#default#vml);}</style> <v:rect style="width:100px; height:20px" fillcolor="#b3c4fd"></v:rect> <v:rect style="width:100px; height:20px" fillcolor="#b3c4fd"> <v:textbox><small><center> Obdélník </center></small></v:textbox> </v:rect>

Z n a č k o v a c í j a z y k y SMIL (Synchronised Multimedia Integration Language)

S M I L S t r u k t u r a layout region, root layout par seq par text, img, audio, video, ref, animation

S M I L U k á z k a <smil> <head> <layout> <root-layout height="350" width="600" background-color="#ffffcc" title="smil version 1.0 Introduction"/> <region id="text_0" width="600" height="350" top="0" left="0" z- index="2" /> </layout> </head>

S M I L U k á z k a <body> <par> <seq> <text src="smil2.rt" region="text_0" begin="2.00s" /> <par> <text src="xml2.rt" region="text_0" /> <seq> <audio src="label2.rm" begin="11.00s" end="16.56s" /> </seq> </par>...

S M I L A n i m a c e <rect...> <animate attributename="width" from="10px" to="100px" begin="0s" dur="10s" /> <animate attributename="height" from="100px" to="10px" begin="0s" dur="10s" /> </rect>

S M I L K o n t r o l a o b s a h u switch

S M I L O d k a z y a, area

S M I L O d k a z y <smil xmlns="http://www.w3.org/2001/smil20/lan guage"> <head> <layout> <region id="source" height="%50"/> <region id="destination" top ="%50"/> </layout></head> <body> <a href="embeddedsmil.smil" target="destination" accesskey="a"> <img region="source" src="source.jpg" dur="indefinite"/> </a> </body> </smil>

S M I L S y n c h r o n i z a c e Elementy par seq <par begin="-10s" dur="20s"> <img id="slide1" src="slide1.jpg" dur="3s" /> <img id="slide2" src="slide2.jpg" begin="slide1.end+3s" dur="10s" /> <img id="note1" src="note1.jpg" begin="slide1.beginevent" dur="20s" /> </par>

S M I L T r a n s i t i o n Přechody mezi prvky nebo scénami

Z n a č k o v a c í j a z y k y VRML (Virtual Reality Modeling Language), X3D

V R M L U k á z k a #VRML V2.0 utf8 Transform { children Shape { appearance Appearance { material Material { diffusecolor 0 1 0 } } geometry Cylinder { height 0.1 radius 0.5 } } }

X 3 D U k á z k a <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN" "http://www.web3d.org/specifications/x3d -3.0.dtd"> <X3D profile="immersive" version="2.0"> <Scene> <Transform> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Cylinder height="0.1" radius="0.5"/> </Shape> </Transform>

P o u ž i t é z d r o j e http://www.w3.org http://www.web3d.org http://www.carto.net