Data Driven Documents základní principy
|
|
|
- Stanislav Toman
- před 5 lety
- Počet zobrazení:
Transkript
1 Data Driven Documents základní principy 2015 Josef Pelikán, CGG MFF UK Praha D3intro 2015 Josef Pelikán, 1 / 44
2 DDD, D3 Data-driven documents moderní přístup k zobrazování dat na WWW data nejsou jen zobrazována (renderována) WWW stránkou, ale jsou přímo integrována do HTML objektů W3C DOM Document Object Model (w3c.org) HTML, XHTML, XML jsou hierarchické formáty HTML5 prohlížeče umožňují elegantně k jednotlivým uzlům přistupovat (např. přes JavaScript) D3intro 2015 Josef Pelikán, 2 / 44
3 Zobrazování grafiky v HTML5 SVG Scalable Vector Graphics také pod patronátem W3C grafické objekty (primitiva) rect, circle, line,.. Snadno přístupné parametry formou XML atributů <circle cx="250" cy="25" r="25"/> možnost použití CSS pro definici vzhledu (stylu) <circle cx="25" cy="25" r="22" class="pumpkin"/> D3intro 2015 Josef Pelikán, 3 / 44
4 Knihovna D3 (JavaScript) velmi populární JS knihovna transformace, ne nové reprezentace! dobře dokumentovaná a udržovaná (d3js.org) přístupy (standardy!) W3C DOM (Document Object Model) SVG grafika, CSS Data binding, Data joins W3C Selectors API estetika, interaktivita animace ( transitions ) D3intro 2015 Josef Pelikán, 4 / 44
5 Principy mapování dat na DOM elementy každý prvek visualizace odpovídá nějakámu DOM elementu dynamické úpravy WWW stránky dynamické visualizace (simulace, realtime) nebo interakce uživatele je třeba upravovat DOM též přidávat a ubírat elementy! Data-Driven Documents proto jméno D3 D3intro 2015 Josef Pelikán, 5 / 44
6 Standardy - HTML5 HTML5 mnoho zdrojů pro studium minimální platný HTML5 dokument <!DOCTYPE html><title/>x stručný HTML dokument <!DOCTYPE html> <html> <head> <meta charset= utf-8 > <title>simple valid HTML5 page</title> </head> <body> <p>paragraph..</p> </body> </html> D3intro 2015 Josef Pelikán, 6 / 44
7 Standardy - SVG Scalable Vector Graphics W3C standard stručná HTML5 stránka se SVG grafikou <!DOCTYPE html> <meta charset= utf-8 > <title>svg hello</title> <svg width= 800 height= 400 > <text y= 12 > Hello, world! </text> </svg> D3intro 2015 Josef Pelikán, 7 / 44
8 Standardy - CSS Cascading Style Sheets W3C standard (CSS 2.2) nepřidává obsah, pouze definuje styly zobrazení stručná HTML5 stránka s CSS stylem <!DOCTYPE html> <meta charset= utf-8 > <title>css hello</title> <style> body { background: steelblue; } </style> <body> Hello, world! </body> D3intro 2015 Josef Pelikán, 8 / 44
9 Standardy CSS selectors koncept hojně používaný v CSS W3C doporučení zobrazení [výraz, element] boolean příklady.shrek { color: green; } div#menubar { font-weight: bold; } a:visited { color: #F28000; } html:lang(de) {.. } tr:nth-child(odd) { /* every odd row of a table */ } body > p { /* p is immediate child of body */ } h1.opener + h2 { /* adjacent siblings */ } h1 ~ pre { /* general siblings */ } D3intro 2015 Josef Pelikán, 9 / 44
10 JavaScript skriptování na straně WWW prohlížeče ECMAScript je standardem příklad <!DOCTYPE html> <meta charset= utf-8 > <title>javascript hello</title> <body> <script> console.log( Hello, world! ); </script> </body> D3intro 2015 Josef Pelikán, 10 / 44
11 D3.js knihovna jádro knihovny v jediném.js souboru je potřeba stránku opatřit vlastním scriptem šablona stránky používající d3.js <!DOCTYPE html> <meta charset= utf-8 > <title>d3.js template</title> <style> /* my CSS */ </style> <body> <script src= ></script> <script> /* my JavaScript */ </script> </body> D3intro 2015 Josef Pelikán, 11 / 44
12 D3.js zdroje D3 API reference D3 WiKi D3 Google group D3 Stack Overflow D3intro 2015 Josef Pelikán, 12 / 44
13 Selectors API výběr ( selection ) viz jquery, CSS pole HTML uzlů bohatě vybavené funkce vybírající podle typu uzlu, atributů, id, name, class příklady: #foo foo.foo [foo=bar] foo bar foo.bar foo#bar // <any id="foo"> // <foo> // <any class="foo"> // <any foo="bar"> // <foo><bar></foo> // <foo class="bar"> // <foo id="bar"> D3intro 2015 Josef Pelikán, 13 / 44
14 Selectors API selektor podle W3C standardu: document.queryselectorall( #foo ) nejsou tam selekce, musí se iterovat přes výsledek d3.select( #foo ) vybírá jeden uzel (první, který splňuje dané podmínky) zachová globální selekci (selectall()) d3.selectall( #foo ) vybere všechny uzly podle dané podmínky D3intro 2015 Josef Pelikán, 14 / 44
15 Práce se selekcí selekce je pole snadno se mění hromadně vlastnosti všech prvků selekce // select all <circle> elements var circle = d3.selectall("circle"); // set some attributes and styles circle.attr("cy", 12); circle.attr("r", 24); circle.style("fill", "red"); D3intro 2015 Josef Pelikán, 15 / 44
16 Řetězení metod elegantnější a úspornější zápis // select all <circle> elements // and set some attributes and styles d3.selectall("circle").attr("cy", 12);.attr("r", 24);.style("fill", "red"); D3intro 2015 Josef Pelikán, 16 / 44
17 selection.append přidávání obsahu za vybrané elementy opět možnost hromadné operace // select the <body> element var body = d3.select("body"); // add an <h1> element var h1 = body.append("h1"); h1.text("hello!"); D3intro 2015 Josef Pelikán, 17 / 44
18 Hromadné příklady stejně jednoduchý zápis: // select all <section> elements var section = d3.selectall("section"); // add an <h1> element to each var h1 = section.append("h1"); h1.text("hello!"); komplikovanější příklad: var h1 = d3.selectall("section").style("background", "steelblue").append("h1").text("hello!"); D3intro 2015 Josef Pelikán, 18 / 44
19 Data Co když potřebuji přidávat mnoho elementů? lepší je na to jít přes data.. data jsou také pole stejně jako selekce // A bar chart, perhaps? var data1 = [1, 1, 2, 3, 5, 8]; // A scatterplot, perhaps? var data2 = [ {x: 10.0, y: 9.14}, {x: 8.0, y: 8.14}, {x: 13.0, y: 8.74}, {x: 9.0, y: 8.77}, {x: 11.0, y: 9.26} ]; D3intro 2015 Josef Pelikán, 19 / 44
20 Data binding datové pole: libovolné pole hodnot (čísel, JS objektů, dalších polí,...) přímo se dá v kódu psát v JSON formátu umí načítat velké množství formátů (JSON, CSV,..) plán: jeden prvek datového pole se přiřadí jednomu uzlu selekce elegantně ošetřen nedostatek nebo přebytek uzlů integrace dat do HTML ( data ) D3intro 2015 Josef Pelikán, 20 / 44
21 Data joins enter přidává nové elementy, když je jich málo (méně než prvků pole) exit ošetření opačné situace nejčastěji se přebytečné HTML elementy prostě odstraní.. update existující elementy se upraví podle nových přiřazených dat D3intro 2015 Josef Pelikán, 21 / 44
22 Příklad bodový graf datové položky obsahují souřadnice [x, y]: Var circles = svg.selectall("circle").data(data2); circles.enter().append("circle").attr("cx", x).attr("cy", y).attr("r", 2.5); Circles.attr("cx", x).attr("cy", y).attr("r", 5); // new data elements // updated (existing) elements D3intro 2015 Josef Pelikán, 22 / 44
23 Zkratka: enter + update append přidává existující položky k těm novým pokud se mají všechny (staré i nové) nastavit stejně, kód se zjednoduší svg.selectall("circle").data(data2).enter() // new data elements.append("circle") // existing+new elements.attr("cx", x).attr("cy", y).attr("r", 2.5); D3intro 2015 Josef Pelikán, 23 / 44
24 Data join pomocí klíče implicitně se operace join dělá přes index ve zvláštních případech (dynamická data) potřebujeme jiný klíč var data3 = [ { name: "Alice", x: 10.0, y: 9.14 }, { name: "Bob", x: 8.0, y: 8.14 }, { name: "Carol", x: 13.0, y: 8.74 }, { name: "Dave", x: 9.0, y: 8.77 }, { name: "Edith", x: 11.0, y: 9.26 } ]; D3intro 2015 Josef Pelikán, 24 / 44
25 Klíčová funkce rozšířená vatianta operace data(d,k) function key(d) { return d.name; } var circle = svg.selectall("circle").data(data, key).attr("cx", x).attr("cy", y).attr("r", 2.5); D3intro 2015 Josef Pelikán, 25 / 44
26 Datové soubory externí data: CSV, TSV, JSON,.. pohodlné načítání mnoha formátů často se musí konvertovat datum, někdy i čísla.. příklad s CSV formátem (stocks.csv): symbol,date,price S&P 500,Jan 2000, S&P 500,Feb 2000, S&P 500,Mar 2000, S&P 500,Apr 2000, S&P 500,May 2000, S&P 500,Jun 2000, S&P 500,Jul 2000, D3intro 2015 Josef Pelikán, 26 / 44
27 Připojování CSV dat je třeba převést řetězce na čísla a převést datumy var format = d3.time.format("%b %Y"); d3.csv("stocks.csv", function(stocks) { stocks.foreach(function(d) { d.price = +d.price; // coercion from string d.date = format.parse(d.date); // we need JS date here }); }); D3intro 2015 Josef Pelikán, 27 / 44
28 Připojování JSON dat pořád je potřeba převádět datumy var format = d3.time.format("%b %Y"); d3.json("stocks.json", function(stocks) { stocks.foreach(function(d) { d.date = format.parse(d.date); // we need JS date here }); }); D3intro 2015 Josef Pelikán, 28 / 44
29 Další operace s daty samotný JavaScript obsahuje mnoho užitečných metod pro práci s poli array.filter(), array.map(), array.sort(),.. další transformace dat v knihovně d3 d3.nest(), d3.keys(), d3.values(),.. D3intro 2015 Josef Pelikán, 29 / 44
30 Měřítka (Scales) převod souřadných systémů číslo číslo lineární měřítko, logaritmické, apod. mapování dat na atributy visualizace barva, tloušťka čáry,.... Scales D3intro 2015 Josef Pelikán, 30 / 44
31 Domain Range zobrazení z prostoru vstupních dat do prostoru visualizace lze napsat vlastní funkci: function x(d) { return d *42 + px ; } kvantitativní měřítka, např. lineární: var x = d3.scale.linear().domain([12, 24]).range([0, 720]); // x(16) == 240 D3intro 2015 Josef Pelikán, 31 / 44
32 Další kvantitativní měřítka d3.scale.log() d3.scale.sqrt() interpolátory např. interpolace barvy var x = d3.scale.linear().domain([12, 24]).range(["steelblue", "brown"]); alternativní interpolátory (HSL barva..).interpolate(d3.interpolatehsl); D3intro 2015 Josef Pelikán, 32 / 44
33 Po částech lineární převod definiční obor a obor hodnot mohou mít více uzlových bodů: var x = d3.scale.linear().domain([-10, 0, 100]).range(["red", "white", "green"]); x(-5); // #ff8080 x(50); // #80c080 D3intro 2015 Josef Pelikán, 33 / 44
34 Diskrétní měřítka je to vlastně pouhé diskrétní zobrazení: var x = d3.scale.ordinal().domain(["a", "B", "C", "D"]).range([0, 10, 20, 30]); x("b"); // 10 barevné palety: var x = d3.scale.category20().domain(["a", "B", "C", "D"]); x("b"); // #aec7e8 D3intro 2015 Josef Pelikán, 34 / 44
35 Barevné škály další pěkné sady barev: ColorBrewer D3intro 2015 Josef Pelikán, 35 / 44
36 Osy grafů pohodlné vykreslování os označování: čárky, popisky var yaxis = d3.svg.axis().scale(y).orient( left ); vykreslení v rámci selekce <g> svg.append( g ).attr( class, y axis ).call(yaxis); D3intro 2015 Josef Pelikán, 36 / 44
37 Čárky na osách (Ticks) kvantitativní měřítka obsahují mechanismy pro umisťování čárek můžeme požádat o množství čárek v rámci celé škály je to jen doporučení var x = d3.scale.linear().domain([12, 24]).range([0, 720]); x.ticks(5); // [12, 14, 16, 18, 20, 22, 24] D3intro 2015 Josef Pelikán, 37 / 44
38 Příklad rozvržení prostoru grafu souřadný systém: vlevo nahoře je počátek okraje (margins) se obvykle použijí pro dekorace (osy) var svg = d3.select("body").append("svg").attr("width", outerwidth).attr("height", outerheight); var g = svg.append("g").attr("transform", "translate(" + marginleft + "," + margintop + ")"); D3intro 2015 Josef Pelikán, 38 / 44
39 SVG tvary rect circle line text path! komplikovanější popis tvaru vlastní jazyk lomené čáry, splines,.. D3intro 2015 Josef Pelikán, 39 / 44
40 Generátory cest (Paths) d3.svg.line (lomená čára) var x = d3.scale.linear(), y = d3.scale.linear(); var line = d3.svg.line().x(function(d) { return x(d.x); }).y(function(d) { return y(d.y); }); připojení bez pomoci data-join: svg.append("path").datum(objects).attr("class", "line").attr("d", line); D3intro 2015 Josef Pelikán, 40 / 44
41 d3.svg.area např. pro plošné grafy funkcí (x, y 0,y 1 ) var x = d3.scale.linear(), y = d3.scale.linear(); var area = d3.svg.area().x(function(d) { return x(d.x); }).y0(height).y1(function(d) { return y(d.y); }); D3intro 2015 Josef Pelikán, 41 / 44
42 Interpolace čar lineární oblasti s teplejší barvou (žlutá, červená) schody před hodnotou za hodnotou spline basis cardinal monotone (nepřekmitává) D3intro 2015 Josef Pelikán, 42 / 44
43 d3.svg.arc pro koláčové grafy var samplearc = { "innerradius": 0, "outerradius": 360, "startangle": 0, "endangle": 1.2 }; // 12 o'clock // radians var arc = d3.svg.arc().innerradius(0).outerradius(360); var pie = d3.layout.pie(); // default pie layout var myarcs = pie(numbers); // data for d3.svg.arc D3intro 2015 Josef Pelikán, 43 / 44
44 Literatura d3.js homepage Scott Murray: Interactive Data Visualization for the Web, O'Reilly, free online (2015) M. Bostock's blog: D3intro 2015 Josef Pelikán, 44 / 44
Vektorový formát SVG
Vektorový formát SVG 2015-2016 Josef Pelikán, CGG MFF UK Praha http://cgg.mff.cuni.cz/~pepca/ pepca@cgg.mff.cuni.cz SVG 2016 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 1 / 17 Zobrazování grafiky v HTML5
(X)HTML, CSS a jquery
Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje
Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument
Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a
Kaskádové styly (CSS)
Kaskádové styly (CSS) Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar ČERBA Západočeská univerzita v Plzni Vznik dokumentu: 20.11.2007 Poslední aktualizace: 5.11.2009 Cascading Style Sheets
Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery
Grafika pro web Funkce grafiky na webu Primární grafická informace Fotografie Schémata Diagramy Loga Bannery Funkce grafiky na webu Sekundární grafická informace Dekorace Zvýraznění Šipky Oddělovače Funkce
+ knihovna funkcí usnadňujících práci v javascriptu
framework pro javascript jquery + knihovna funkcí usnadňujících práci v javascriptu Možnosti: o manipulace s prvky HTML o změna vlastností objektů o podpora události o práce s CSS, podpora selektorů o
Mgr. Vlastislav Kučera Struktura stránky, hlavička,
Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to
Část 1 Moderní JavaScript
Obsah Část 1 Moderní JavaScript Kapitola 1 Moderní programování v JavaScriptuh.................... 13 Objektově orientovaný JavaScript................................13 Testování zdrojového kódu......................................
M M S. Značkovací jazyky
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í
Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument
Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a podpory palivového
Vývoj Internetových Aplikací
2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info
V této příloze je podrobně popsána struktura XML dokumentu s mapou (viz kapitolu 5.3), příklad tohoto XML dokumentu je na přiloženém CD v souboru
Příloha 1: Struktura XML dokumentu V této příloze je podrobně popsána struktura XML dokumentu s mapou (viz kapitolu 5.3), příklad tohoto XML dokumentu je na přiloženém CD v souboru /mapa/map.xml. Obsah
Vývoj Internetových Aplikací
4 Vývoj Internetových Aplikací HTML5 Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky Co je HTML5? - HTML5 je směr, kam se ubírá web budoucnost webových aplikací a vývoje - HTML5 je multiplatformní - HTML5
Inovace výuky prostřednictvím šablon pro SŠ
Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748
HTML - Úvod. Zpracoval: Petr Lasák
HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají
Vývoj Internetových Aplikací
4 Vývoj Internetových Aplikací HTML5 Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky Co je HTML5? - HTML5 je směr, kam se ubírá web budoucnost webových aplikací a vývoje - HTML5 je multiplatformní - HTML5
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
CSS Kaskádové styly. formátování webových stránek
CSS Kaskádové styly formátování webových stránek Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení Význam tagy HTML významová vs. formátovací
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz
6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,
Úvod do počítačové grafiky
Úvod do počítačové grafiky elmag. záření s určitou vlnovou délkou dopadající na sítnici našeho oka vnímáme jako barvu v rámci viditelné části spektra je člověk schopen rozlišit přibližně 10 milionů barev
Mgr. Vlastislav Kučera lekce č. 2
Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se
13. Vytváření webových stránek
13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací
GIS Geografické informační systémy
GIS Geografické informační systémy Obsah přednášky Prostorové vektorové modely Špagetový model Topologický model Převody geometrií Vektorový model Reprezentuje reálný svět po jednotlivých složkách popisu
Úvod do Groovy pro Java experty
Úvod do Groovy pro Java experty Václav Pech Senior Software Developer JetBrains, Inc. Něco o mně Václav Pech Programátor Nadšenec do Groovy JetBrains Dodavatel Vašich oblíbených nástrojů IntelliJ IDEA,
NSWI096 - INTERNET JavaScript
NSWI096 - INTERNET JavaScript Mgr. Petr Lasák JAVASCRIPT JAK SE DNES POUŽÍVÁ Skriptovací (interpretovaný) jazyk Umožňuje interaktivitu Použití: Dialogy Kontrola dat ve formulářích Změny v (X)HTML dokumentu
MBI - technologická realizace modelu
MBI - technologická realizace modelu 22.1.2015 MBI, Management byznys informatiky Snímek 1 Agenda Technická realizace portálu MBI. Cíle a principy technického řešení. 1.Obsah portálu - objekty v hierarchiích,
GIS Geografické informační systémy
GIS Geografické informační systémy Obsah přednášky Prostorové vektorové modely Špagetový model Topologický model Převody geometrií Vektorový model Reprezentuje reálný svět po jednotlivých složkách popisu
Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita
Kartografická webová aplikace Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita Datum vzniku dokumentu: 3. 11. 2011 Datum poslední aktualizace: 10. 12. 2011 Cíl
Parsování HTML. Pro účely testování jsem vytvořil stránku parsovani.html. Zdrojový kód:
Parsování HTML představuje slangový výraz pro syntaktickou analýzu obsahu webové stránky. Lidově řečeno porcujeme zdrojový kód stránky a vyzobáváme potřebný obsah. Webovým vývojářům není neznámý pojem
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 13.5.2015 Webové technologie
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 13.5.2015 Webové technologie RIA, JSON, REST, AngularJS strana 2 RIA - rich internet application chová se podobně jako desktopová aplikace velké množství logiky
Základy CSS (3. přednáška)
Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze
Úvod do jazyka HTML (Hypertext Markup Language)
Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření
CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace
CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace
Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675
Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS
HTML Hypertext Markup Language
HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé
Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok: 2008-09
Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok: 2008-09 Studijní obor: Výpočetní technika a informatika Technologie SVG aktuální standard webové vektorové
Úvod do tvorby internetových aplikací
CVT6 01a Úvod do tvorby internetových aplikací Osnova předmětu (X)HTML a tvorba webu pomocí přímého zápisu kódu Tvorba web designu a skládání stránek z kousků Skriptovací jazyky na webu Návrh software
Moderní webové technologie. Jakub ŽÁK
Moderní webové technologie Jakub ŽÁK 05/2015 Abstrakt Práce pojednává o vybraných dostupných a rozšířených technických prostředcích využitelných pro tvorbu webových stránek splňujících požadavky současné
Platforma Java. Petr Krajča. Katedra informatiky Univerzita Palackého v Olomouci. Petr Krajča (UP) KMI/PJA: Seminář V. 27. říjen, / 15
Platforma Java Objektově relační mapování II Petr Krajča Katedra informatiky Univerzita Palackého v Olomouci Petr Krajča (UP) KMI/PJA: Seminář V. 27. říjen, 2016 1 / 15 Dotazování vyhledání objektu podle
TVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML
Dnešní téma. Oblasti standardizace v ICT. Oblasti standardizace v ICT. Oblasti standardizace v ICT
Dnešní téma Oblasti standardizace v ICT Případové studie standardizace v ICT: 1) Znakové sady 2) Jazyk 1. technická infrastruktura transfer a komunikace informací, přístup k informacím, sdílení zdrojů
Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování
Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie
KIV/PIA 2012 Ing. Jan Tichava
KIV/PIA 2012 Ing. Jan Tichava Opera Mini Zobrazených stránek za měsíc 90 G 80 G 70 G 60 G 50 G 40 G 30 G 20 G 10 G 0 G January 2011 May 2011 September 2011 January 2012 May 2012 September 2012 State of
Mgr. Vlastislav Kučera přednáška č. 2
Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS
Informatika pro moderní fyziky (10) složitější interaktivní dokument, získávání informací z webu
Informatika pro moderní fyziky (10) složitější interaktivní dokument, získávání informací z webu František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a podpory palivového cyklu akademický
Moderní techniky vývoje webových aplikací
ZVYŠOVÁNÍ ODBORNÝCH KOMPETENCÍ AKADEMICKÝCH PRACOVNÍKŮ OSTRAVSKÉ UNIVERZITY V OSTRAVĚ A SLEZSKÉ UNIVERZITY V OPAVĚ Moderní techniky vývoje webových aplikací Bogdan Walek ÚVOD DO PROBLEMATIKY V oblasti
Maturitní témata z předmětu PROGRAMOVÉ VYBAVENÍ pro šk. rok 2012/2013
Maturitní témata z předmětu PROGRAMOVÉ VYBAVENÍ pro šk. rok 2012/2013 1. Nástroje programu MS Word a) vysvětlete pojmy šablona, styl (druhy stylů) význam a užití, b) vysvětlete pojem oddíl (druhy oddílů),
Úvod do aplikací internetu a přehled možností při tvorbě webu
CVT6 01a Úvod do aplikací internetu a přehled možností při tvorbě webu Internet a www Internet? Služby www ftp e-mail telnet NetNews konference IM komunikace Chaty Remote Access P2P aplikace Online games
Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD
CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se
TRANSFORMACE OBJEKTOVÉ PETRIHO SÍTĚ Z JAZYKA OPNML DO GRAFU TRANSFORMATION OF OBJECT-ORIENTED PETRI NET FROM OPNML LANGUAGE TO GRAPH
TRANSFORMACE OBJEKTOVÉ PETRIHO SÍTĚ Z JAZYKA OPNML DO GRAFU TRANSFORMATION OF OBJECT-ORIENTED PETRI NET FROM OPNML LANGUAGE TO GRAPH Petr Jedlička Mendelova zemědělská a lesnická univerzita v Brně Provozně
CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
NSWI142 Webové aplikace Zkouškový test
NSWI142 Webové aplikace Zkouškový test Jméno: 24.12.2016 U každé otázky může být více správných odpovědí, ale také nemusí být správná žádná. Zaškrtávejte pouze odpovědi, které jsou zcela pravdivé. Z čistě
DATOVÉ FORMÁTY GRAFIKY, JEJICH SPECIFIKA A MOŽNOSTI VYUŽITÍ
DATOVÉ FORMÁTY GRAFIKY, JEJICH SPECIFIKA A MOŽNOSTI VYUŽITÍ UMT Tomáš Zajíc, David Svoboda Typy počítačové grafiky Rastrová Vektorová Rastrová grafika Pixely Rozlišení Barevná hloubka Monitor 72 PPI Tiskárna
Počítačová Podpora Studia. Přednáška 5 Úvod do html a některých souvisejících IT. Web jako platforma pro vývoj aplikací.
Přednáška 5 1. Stručný přehled vývoje html H T m l (HTML...XML... html5), (Web API, JSON, REST,AJAX) 2. Některé související IT IP adresa, doménová adresa, name servery JavaScritp, Jquery, Angular PHP vs
Tvorba webových stránek
Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech
APLIKACE XML PRO INTERNET
APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je
ZNAČKOVACÍ JAZYKY A JEJICH VYUŽÍVÁNÍ MARKUP LANGUAGE AND THEIR USE. Zdeněk Havlíček
ZNAČKOVACÍ JAZYKY A JEJICH VYUŽÍVÁNÍ MARKUP LANGUAGE AND THEIR USE Zdeněk Havlíček Anotace: Značkovací jazyk vkládá do textu dokumentu další informace o vlastním textu. Značkovací jazyky se využívají především
Grafika na webu. Lukáš Bařinka barinkl@fit.cvut.cz
4 TVEZE WXYHMNR LS TVSKVEQY -RJSVQEXMOE NI TSHTSVSZ RE TVSNIOXIQ RERGSZERÀQ ^ )ZVSTWO LS WSGM PR LS JSRHY E VS^TSÐXY LPEZR LS QÞWXE 4VEL] 4VELE )9 -RZIWXYNIQI HS ZE% FYHSYGRSWXM Web a MultiMédia Lukáš
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Skriptování dokumentu - DOM 2 BI-JSC Evropský
NSWI096 - INTERNET. Úvod do HTML
NSWI096 - INTERNET Úvod do HTML XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup
Formuláře. Internetové publikování. Formuláře - příklad
Formuláře Internetové publikování Formuláře - příklad 1 Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře
22. Tvorba webových stránek
22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči
PRG036 Technologie XML
PRG036 Technologie XML Přednáší: Irena Mlýnková (mlynkova@ksi.mff.cuni.cz) Martin Nečaský (necasky@ksi.mff.cuni.cz) LS 2010 Stránka přednášky: http://www.ksi.mff.cuni.cz/~mlynkova/prg036/ 1 Osnova předmětu
Pokročilé techniky tvorby sestav v Caché. ZENové Reporty
Pokročilé techniky tvorby sestav v Caché ZENové Reporty Úvodem Jednoduché sestavy Pokročilé sestavy Ladění Historie ZEN reporty sdílejí podobný princip definování obsahu jako ZENové stránky Byly uvedeny
GIS Geografické informační systémy
GIS Geografické informační systémy Obsah přednášky Prostorové vektorové modely Špagetový model Topologický model Vektorový model Reprezentuje reálný svět po jednotlivých složkách popisu geoprvků. Geometrická
Obsah. Předmluva 13. O autorovi 15. Poděkování 16. O odborných korektorech 17. Úvod 19
Předmluva 13 O autorovi 15 Poděkování 16 O odborných korektorech 17 Úvod 19 Co kniha popisuje 19 Co budete potřebovat 20 Komu je kniha určena 20 Styly 21 Zpětná vazba od čtenářů 22 Errata 22 KAPITOLA 1
Předmluva k druhému vydání 13. Úvod 17. ČÁST 2 Vytváření dokumentů XML 65
7 Stručný obsah Předmluva k druhému vydání 13 Úvod 17 ČÁST 1 Začínáme 27 Kapitola 1 Proč XML 29 Kapitola 2 Vytváření a zobrazení vašeho prvního dokumentu XML 45 ČÁST 2 Vytváření dokumentů XML 65 Kapitola
KAPITOLA 11. Kreslení v prohlížeči. Jazyk SVG
KAPITOLA 11 Kreslení v prohlížeči Možná budete chtít ve svých webových aplikacích dynamicky zobrazovat diagramy, grafy nebo jinou vizuální reprezentaci dat. Samozřejmě můžete data odeslat na server a nechat
Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9.
Jazyk XSL - rychlá transformace dokumentů 9. prosince 2010 Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí stylů Formátování dokumentu pomocí XSL FO Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí
2 PŘÍKLAD IMPORTU ZATÍŽENÍ Z XML
ROZHRANÍ ESA XML Ing. Richard Vondráček SCIA CZ, s. r. o., Thákurova 3, 160 00 Praha 6 www.scia.cz 1 OTEVŘENÝ FORMÁT Jednou z mnoha užitečných vlastností programu ESA PT je podpora otevřeného rozhraní
CSS styly. Cascading Style Sheets kaskádové styly
CSS styly Cascading Style Sheets kaskádové styly Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen
Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD
Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu
Mgr. Vlastislav Kučera přednáška č. 1
Mgr. Vlastislav Kučera přednáška č. 1 jazyk HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press,
Oracle XML DB. Tomáš Nykodým
Oracle XML DB Tomáš Nykodým xnykodym@fi.muni.cz Osnova Oracle XML DB Architektura Oracle XML DB Hlavní rysy Oracle XML DB Hlavní rysy Oracle XML DB - pokračování XMLType XML Repository Využívání databázových
První kapitola úvod do problematiky
První kapitola úvod do problematiky Co je to Flex Adobe Flex je ActionSript (AS) framework pro tvorbu Rich Internet Aplications (RIA), tedy knihovna AS tříd pro Flash. Flex používáme k vytvoření SWF souboru
Tvorba webových stránek
Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou
1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)
1. Struktura stránky, zásady při psaní kódu, MVC pattern Web pro kodéry (Petr Kosnar, ČVUT, Obsah } Terminologie } Prezentace x Obsah } Struktura kódu } Sémantika kódu } Struktura stránky } Šablony } Template
. Grafika a plovoucí prostředí. Zpracování textů na počítači. Ing. Pavel Haluza, Ph.D. ústav informatiky PEF MENDELU v Brně haluza@mendelu.
Grafika a plovoucí prostředí Zpracování textů na počítači Ing Pavel Haluza, PhD ústav informatiky PEF MENDELU v Brně haluza@mendelucz Kreslení vektorových obrazů Příklad \unitlength=1mm \begin{picture}(50,30)(10,20)
Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001
Nové přístupy tvorby web site Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001 Osnova Úvod Web site - jasný cíl Technologie - dynamický web Forma - vyšší interaktivita Obsah - stálá aktualizace
Začínáme s vývojem her a DOM
KAPITOLA 2 Začínáme s vývojem her a DOM V předchozí kapitole jsme získali představu o tom, co nás v této knize čeká a co se dozvíme. Počínaje touto kapitolou zahájíme naše seznamování s problematikou na
!!Via!AUREA,!s.r.o.!
ViaAUREA,s.r.o. Lidická48,60200Brno IČ:26257700 DIČ:CZ26257700 Posledníaktualizace:25.9.2015 tel.:+420511110431 ehmail:info@viaaurea.cz 1 SPECIFIKACE%HTML%KREATIVY%...%3 1.1 COJEHTMLBANNER...3 1.2 DEFINICEPROKLIKU...4
Tvorba stránek v HTML ve Wordu
Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o
Kreslíme do webu. Canvas
Kreslíme do webu Canvas Počítačová grafika Bitmapy vs Vektory Bitmapy: - obraz je složen z bodů (pixelů), které mají definované vlastnosti Vektory: - obraz je složen z grafických prvků (primitiv), které
Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML
jquery - úvod Zdroj: Jiří Zralý:
jquery - úvod Zdroj: Jiří Zralý: http://citron.blueboard.cz/clanek-331-jquery-pro-zacatecniky-zaklady.html 1 Úvod je to framework pro javascript Stáhnete si jeden.js soubor (to je ten framework, celé hezky
O CSS podrobněji. Box model Document flow Layout
O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html
Hierarchický model. 1995-2013 Josef Pelikán CGG MFF UK Praha. pepca@cgg.mff.cuni.cz http://cgg.mff.cuni.cz/~pepca/ 1 / 16
Hierarchický model 1995-2013 Josef Pelikán CGG MFF UK Praha pepca@cgg.mff.cuni.cz http://cgg.mff.cuni.cz/~pepca/ 1 / 16 Hierarchie v 3D modelování kompozice zdola-nahoru složitější objekty se sestavují
Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585
Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace
Formuláře. Internetové publikování
Formuláře Internetové publikování Formuláře - příklad Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře
Inovace výuky prostřednictvím šablon pro SŠ
Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748
12. Základy HTML a formuláře v HTML
12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura
Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,
Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení
Obsah. SEZNÁMENÍ S HRAMI V HTML5...19 Nové funkce HTML5... 20. Nové funkce CSS3... 23
ÚVOD.................................................13 Co v této knize najdete................................... 13 Co budete v této knize potřebovat.......................... 14 Pro koho je tato kniha
Child selektory. Adjacent sibling selektory. Pseudoelementy. Atributové selektory. Tabulky. Obtékané elementy. »!!!
CSS 3. část Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Vztahy mezi elementy Vztahy mezi elementy» Parent» An element A is called
Obsah. Stručná historie World Wide Webu 7
KAPITOLA I Web bez tajemství 1 Kde se vzal web a jeho stránky 2 Kouzlo jménem HTML 3 Jak stránky připravovat 5 Webová grafika 6 Web aktivní a interaktivní 6 Na straně serveru 6 Jak studovat tuto knihu
Metamorfóza obrázků Josef Pelikán CGG MFF UK Praha
Metamorfóza obrázků 1998-2011 Josef Pelikán CGG MFF UK Praha pepca@cgg.mff.cuni.cz http://cgg.mff.cuni.cz/~pepca/ Morphing 2011 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 1 / 21 Metamorfóza obrázků -
IV122 Matematika a programování Úvod kurzu. Radek Pelánek
IV122 Matematika a programování Úvod kurzu Radek Pelánek Cíle předmětu Lepší pochopení matematických pojmů a metod skrze praktické programování. Procvičení programátorských schopností; trénink přechodu