home *** CD-ROM | disk | FTP | other *** search
/ PC World 2004 April / PCWorld_2004-04_cd.bin / Novinky / Interval / clanek03.htm < prev    next >
Encoding:
Extensible Markup Language  |  2004-03-16  |  30.1 KB  |  250 lines

  1. <?xml version='1.0' encoding='windows-1250'?>
  2. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='cs' lang='cs'>
  4. <head>
  5. <meta http-equiv='Content-Type' content='text/html; charset=windows-1250' />
  6. <meta http-equiv='Content-language' content='cs' />
  7. <meta http-equiv='Cache-control' content='no-cache' />
  8. <meta http-equiv='Pragma' content='no-cache' />
  9. <meta http-equiv='Expires' content='0' />
  10. <meta name='robots' content='index, follow' />
  11. <meta name='googlebot' content='index, follow, noarchive' />
  12. <meta name='description' content='Interval.cz - Internetov² magazφn o webdesignu, v²voji webov²ch aplikacφ a e-komerci. VÜe podstatnΘ o technologiφch XHTML, HTML, CSS, DHTML, JavaScript, XML, .NET, ASP, PHP, Java, J2ME, SQL, WAP...' />
  13. <meta name='keywords' content='Interval' />
  14. <meta http-equiv='imagetoolbar' content='no' />
  15. <meta http-equiv='MSThemeCompatible' content='no' />
  16. <meta name='MSSmartTagsPreventParsing' content='true' />
  17. <meta name='ICBM' content='49.1915, 16.626' />
  18. <meta name='DC.Title' content='Interval.cz' />
  19. <meta name='DC.Identifier' content='http://interval.cz' />
  20. <meta name='DC.Language' content='cs' />
  21. <link rel='alternate' type='text/xml' title='RSS' href='http://interval.cz/__rss/rss.asp' />
  22. <link rel='shortcut icon' href='favicon.ico' />
  23. <link rel='first' href='http://interval.cz/clanek.asp?article=2561' />
  24. <link rel='prev' href='http://interval.cz/clanek.asp?article=2848' />
  25. <link rel='up' href='http://interval.cz/serial.asp?serial=27' />
  26. <link rel='home' href='http://interval.cz' />
  27. <link rel='search' href='http://interval.cz/search_ex.asp' />
  28. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/html4.css' />
  29. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/basic_all.css' />
  30. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/homepage_all.css' />
  31. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/articles_all.css' />
  32. <link rel='stylesheet' type='text/css' media='print' href='__services/styles/articles_print.css' />
  33. <title>Interval.cz - denn∞ o tvorb∞ webu a e-komerci</title>
  34. </head>
  35. <body class='interval interval-articles'>
  36. <div id='page-header'><div id='interval-logo'><h1 title='Interval.cz - denn∞ o tvorb∞ webu a e-komerci (logo & index link)'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz'>Interval.cz<span></span></a></h1></div><div id='advertising-page-header'></div><div class='page-maker'> </div></div>
  37. <div id='page-topmenu'><h2 class='textversion'>Navigace</h2><div id='page-mainmenu'><h3 class='textversion'>Hlavnφ menu</h3><ul><li class='first selected'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz'>Titulnφ strana</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=14'>Webdesign</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=15'>V²voj aplikacφ</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=18'>E-komerce</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=17'>Nßstroje</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=16'>Magazφn</a></li><li class='right selected'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.inshop.cz'>Knihkupectvφ</a></li><li class='right'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interforum.interval.cz'>Interforum</a></li></ul></div><div id='page-mainmenu-maker'> </div></div>
  38. <div id='page-body'><div id='page-left'><div id='article'>
  39.  
  40.  
  41.  
  42. <h2>Pr∙vodce SVG - aplikace pro export</h2>
  43. <p id='prepend'>V tomto Φlßnku se podφvßme blφ₧e na zoubky n∞kter²m grafick²m program∙m, schopn²m generovat SVG data, v po°adφ vφcemΘn∞ odpovφdajφcφm jejich schopnostem. P°edesφlßm, ₧e se budu soust°edit p°edevÜφm na schopnosti program∙ souvisejφcφ s SVG grafikou a s kvalitou exportu. Ostatnφch vlastnostφ se budu dot²kat pouze okrajov∞.</p>
  44.  
  45.  
  46. <h3>Adobe Illustrator 10</h3>
  47. <p>Musφm °φci, ₧e program je pro nßÜ ·kol velmi dob°e vybaven, je to doslova program Üit² na mφru SVG. V∞tÜina vlastnostφ d∙le₧it²ch pro SVG grafiku se ovlßdß na nßsledujφcφch Φty°ech paletßch Illustratoru. Na prvnφ palet∞ shora nßs bude zajφmat vytvß°enφ a testovßnφ hyperlink∙. DalÜφ ovlßdß pr∙hlednost a mo₧nost nastavit specißlnφ m≤dy grafickΘho prolφnßnφ objekt∙ (znßmΘ z Photoshopu a podporovanΘ Adobe SVG Viewer 3). Jedin²m omezenφm je nemo₧nost nastavit pr∙hlednost zvlßÜ¥ pro obrys a zvlßÜ¥ pro v²pl≥. JeÜt∞ nφ₧e je seznam knihovny symbol∙. AI umo₧≥uje velmi snadno, intuitivn∞ spravovat, p°idßvat, aplikovat nebo nahrazovat vφcenßsobn∞ pou₧itelnΘ definice symbol∙. VÜechny d∙le₧itΘ akce lze vyvolat na dolnφm okraji tohoto okΘnka. ╚tvrtß paleta "Vrstvy" v Illustratoru 10 krom∞ vrstev zobrazuje <strong>vÜechny</strong> grafickΘ elementy v danΘ kresb∞. Sm∞le to m∙₧eme p°irovnat k zobrazenφ objektovΘ struktury v nativnφch editorech SVG zmi≥ovan²ch v²Üe. M∙₧ete si zapnout i zobrazovßnφ grafickΘho nßhledu pro ka₧d² °ßdek na tΘto palet∞.</p>
  48.  
  49. <div class='image'><img src='podklady/hejral/750/ai7-palette.png' alt='ILLUSTRATOR umo₧≥uje nastavit v podstat∞ vÜechny mo₧nosti SVG' title='ILLUSTRATOR umo₧≥uje nastavit v podstat∞ vÜechny mo₧nosti SVG' /></div>
  50.  
  51. <p>Na palet∞ pr∙hlednosti m∙₧ete krom∞ klasickΘ, po celΘ ploÜe objektu konstantnφ transparentnosti, vyrobit i "alfa" masku pr∙hlednosti a ta se potΘ zobrazφ jako na obrßzku nφ₧e. (P°epφnaΦe na dolnφm okraji ignorujte, nebo¥ ty SVG neovlivnφ. VÜechny vlastnosti jsou velmi efektivn∞ p°evedeny i do v²slednΘho SVG s vyu₧itφm vÜech mo₧nostφ normy.)</p>
  52.  
  53. <div class='image'><img src='podklady/hejral/750/ai-mask.png' alt='Pr∙hlednost v AI' title='Pr∙hlednost v AI' /></div>
  54.  
  55. <h4>SVG filtry</h4>
  56. <p>AI 10 obsahuje obrovskΘ mno₧stvφ r∙zn²ch bitmapov²ch i vektorov²ch efekt∙ a filtr∙. P°i vytvß°enφ grafiky samoz°ejm∞ m∙₧eme pou₧φt jak²koli, ovÜem v∞tÜina z nich se p°i exportu do SVG vyrastruje jako bitmapov² obraz, co₧ je pro naÜe "internetovΘ" pou₧itφ siln∞ ne₧ßdoucφ.</p>
  57. <p>V roletovΘ nabφdce Illustratoru jsou dv∞ skupiny, "Filtr" a "Efekt". Prvn∞ jmenovanß skupina se odliÜuje tφm, ₧e dan² filtr se aplikuje na vektorovou kresbu ihned - dojde tφm k trvalΘ modifikaci p∙vodnφ kresby (rozrastrovßnφ, deformovßnφ, zv²Üenφ poΦtu vektorov²ch bod∙). Sßhneme tedy po druhΘ skupin∞, kde nalezneme podskupinu "SVG filtry" se spoustou p°eddefinovan²ch funkcφ. P°i aplikaci nebo modifikaci t∞chto filtr∙ se vßm otev°e specißlnφ okno, ve kterΘm m∙₧ete filtry dokonce detailn∞ upravovat. OvÜem pozor - pouze na ·rovni SVG k≤du. V²bornΘ ale je, ₧e okam₧it∞, bez zav°enφ okna editace m∙₧ete vid∞t v²sledek (nßhled) efektu.</p>
  58.  
  59. <h4>Interaktivita SVG</h4>
  60. <p>Tato specißln∞ pro SVG vyhrazenß paleta dovolφ <em>p°ipojit k exportovanΘmu SVG JavaScript programy</em>. Umo₧≥uje p°i°azovat grafick²m objekt∙m volßnφ skript∙ jako reakci na jednotlivΘ udßlosti u₧ivatelskΘho rozhranφ. P°φkazy v ukßzce - tak jak je vidφte na nßsledujφcφ palet∞ - zm∞nφ objektu, kter² bude v oblasti pod myÜφ (ukazatelem), barvu v²pln∞ na sv∞tle ₧lutou.</p>
  61.  
  62. <div class='image'><img src='podklady/hejral/750/ai11-script.png' alt='Vytvß°enφ interaktivity pomocφ JavaScript program∙' title='Vytvß°enφ interaktivity pomocφ JavaScript program∙' /></div>
  63.  
  64. <h4>Kvalita exportu</h4>
  65. <p>XML k≤d exportovan² ILLUSTRATORem je docela kvalitnφ a tΘm∞° v₧dy dostanete v SVG prohlφ₧eΦi stejn² v²sledek jako na pracovnφ ploÜe AI. Vadφ mi p°edevÜφm Üpatnß optimalizace textov²ch element∙ (nadm∞rnΘ opakovßnφ formßtovacφch atribut∙) a nevyu₧φvßnφ mo₧nostφ SVG formßtu p°i exportu textu umφst∞nΘho na k°ivce (namφsto vlo₧enφ specißlnφho SVG prvku je text rozkouskovßn na jednotlivß pφsmena).</p>
  66. <p>SVG norma obsahuje mo₧nost ulo₧it pφsma do specißlnφho souboru, kter² si SVG prohlφ₧eΦ na cφlovΘm poΦφtaΦi naΦte, aby byl zachovßn vzhled grafiky. Tady bohu₧el AI10 obsahuje chyby - p°i uklßdßnφ pφsem se zapnutou volbou "Pφsma/P°ipojit" se v mnoha p°φpadech ₧ßdnΘ pφsmo .CEF nevygeneruje. (Podle m²ch pokus∙ by d∙vodem mohla b²t kontrola autorsk²ch prßv pφsem a ILLUSTRATOR by m∞l na tuto skuteΦnost upozornit.) Exportnφ modul SVG v AI10 mß bohu₧el takΘ problΘmy s pou₧φvßnφm dalÜφch pφsmov²ch °ez∙ z jednΘ rodiny pφsem (jin²ch ne₧ "Regular" respektive "Normal"). U tΘto verze je jedin²m °eÜenφm dodateΦnß ·prava zdrojovΘho k≤du, novß verze AI CS, alias verze 11 z konce roku 2003, naneÜt∞stφ opravuje pouze posledn∞ uvedenou zßvadu.</p>
  67. <p>Nßsledujφcφ otisky ukazujφ doporuΦenΘ nastavenφ exportu. P°i problΘmech s pφsmy zkuste zapnout jejich vklßdßnφ.</p>
  68.  
  69. <div class='image'>
  70. <img src='podklady/hejral/750/ai1s-exp.png' alt='AI - Nastavenφ exportu SVG' title='AI - Nastavenφ exportu SVG' />
  71. <br /><span class='comment'>AI - Nastavenφ exportu SVG (<a href='podklady/hejral/750/ai1-exp.png'>plnß velikost, cca 20 kB</a>)</span>
  72. </div>
  73.  
  74. <p>Nφ₧e vidφte "DalÜφ volby" nastavenφ exportu. Nejzajφmav∞jÜφ pro nßs jsou "Vlastnosti CSS". Z d∙vodu p°ehlednosti a velikosti v²slednΘho k≤du doporuΦuji volbu "Elementy stylu", kterß vytvo°φ uvnit° SVG internφ tabulku styl∙. Adobe Systems ovÜem uvßdφ, ₧e tato volba zp∙sobφ pomalejÜφ vykreslovßnφ SVG v prohlφ₧eΦi. CSS tabulky takΘ nemusφ podporovat n∞kterΘ primitivn∞jÜφ prohlφ₧eΦe.</p>
  75.  
  76. <div class='image'>
  77. <img src='podklady/hejral/750/ai2s-exp.png' alt='AI - Nastavenφ exportu SVG - podrobnosti' title='AI - Nastavenφ exportu SVG - podrobnosti' />
  78. <br /><span class='comment'>AI - Nastavenφ exportu SVG - podrobnosti (<a href='podklady/hejral/750/ai2-exp.png'>plnß velikost, cca 20 kB</a>)</span>
  79. </div>
  80.  
  81. <h3>Corel Draw 11</h3>
  82. <p>Corel podporuje vÜechny obvyklΘ grafickΘ objekty, symboly, pr∙hlednosti a vytvß°enφ hyperlink∙. Text umφst∞n² na k°ivce stejn∞ jako Illustrator rozkouskuje na jednotlivΘ znaky. Pozitivn∞ se v poslednφ dob∞ projevuje fakt, ₧e tato firma se intenzivn∞ v∞nuje v²voji profesionßlnφch grafick²ch °eÜenφ zalo₧en²ch na SVG a v tΘto oblasti se tu za rok 2003 hodn∞ pokroΦilo.</p>
  83.  
  84. <div class='image'><img src='podklady/hejral/750/cdr2.png' alt='CDR11 - Object Properties' title='CDR11 - Object Properties' /></div>
  85.  
  86. <p>Na obrßzku vidφte paletu "Object Properties", kde lze vytvß°et hypervazby (nastavenφ v dolnφ polovin∞ palety mß v²znam pouze pro zobrazenφ aktivnφho objektu v prost°edφ CDR). Prßce s JavaScriptem ve verzi 11 nenφ podporovßna v∙bec. Nemß v∙bec ₧ßdnou implementaci SVG filtr∙. "M∞kkΘ" stφny vytvo°enΘ interaktivnφmi nßstroji Corelu jsou jako bitmapa p°ipojeny k v²slednΘmu exportovanΘmu souboru.</p>
  87.  
  88. <h4>Pr∙hlednost grafiky</h4>
  89. <p>Pr∙hlednost lze vytvo°it dv∞ma zp∙soby. Prvnφm je pou₧itφ efektu Transparency. (Corel tyto efekty naz²vß "Lens".) Zp∙sob je to velmi omezen², objekt toti₧ m∙₧e b²t pouze jednobarevn². Druhou cestou je pou₧itφ nßstroje "Interactive Transparency" (ikona skleniΦky se stφnem). Ten dokß₧e na libovoln² objekt aplikovat vÜechny mo₧nΘ zp∙soby pr∙hlednosti, poΦφnaje konstantnφ, p°es "dvoubodovou" (transparentnost definuje p°echod v alfa kanßlu) a konΦe pr∙hlednostφ definovanou bitmapov²m obrazem.</p>
  90. <p>Paleta "Object Manager" zhruba odpovφdß palet∞ vrstev z AI10. Vidφme na nφ zßkladnφ strukturu objekt∙ v dokumentu. Objekty samoz°ejm∞ takΘ lze p°ejmenovat - toto ruΦn∞ zadanΘ jmΘno se ve v²slednΘm SVG projevφ jako atribut "id" danΘho grafickΘho prvku:</p>
  91.  
  92. <div class='image'><img src='podklady/hejral/750/cdr3.png' alt='CDR11 - Object Manager' title='CDR11 - Object Manager' /></div>
  93.  
  94. <h4>Kvalita exportu</h4>
  95. <p>Vizußln∞ se jevφ vektorov² obraz v browseru v²born∞, soust°edφme-li ale pozornost na kvalitu v²stupnφho XML, tam je bohu₧el situace o poznßnφ horÜφ ne₧ u ILLUSTRATORu. Souvisφ to pravd∞podobn∞ s filozofiφ tisku, kterou pou₧φvajφ programßto°i CDR.</p>
  96. <p>Nßsledujφcφ kresba obsahuje nepr∙hledn² modr² troj·helnφk a kruh vypln∞n² p°echodem, kter² mß interaktivn∞ nastavenu prom∞nnou pr∙hlednost. Corel se zde chovß, jako kdyby nem∞l k dispozici pr∙hlednost SVG (vysv∞tluji si to tak, ₧e pßnovΘ prost∞ jako zßklad pou₧ili rutiny pro v²stup do PostScript Level 2, kter² jak znßmo pr∙hlednost neumφ).</p>
  97.  
  98. <div class='image'><img src='podklady/hejral/750/cdr-bad-exp.png' alt='CDR11 - chybn² export' title='CDR11 - chybn² export' /></div>
  99.  
  100. <p>Aby vykreslil Φßst ovlivn∞nou pr∙hlednostφ, ud∞lß CDR zhruba nßsledujφcφ: VypoΦφtß sßm barevnost vrchnφho objektu, jak by vypadala smφchßna s modrou podkladovΘho troj·helnφka p°i danΘ pr∙hlednosti. PotΘ duplikuje vrchnφ objekt (kruh), vyplnφ jej vypoΦφtanou smφÜenou barvou a o°φzne jej podle pr∙seΦφku obou objekt∙. V²sledkem je zb∞sil² k≤d, kter² obsahuje vÜechny objekty dvakrßt?! A aby toho nebylo mßlo - pokud jsme si n∞kter² objekt pojmenovali, abychom jφm mohli manipulovat pomocφ skriptu, ob∞ kopie budou mφt stejn² atribut "id", co₧ podle pravidel XML korektnφ urΦit∞ nenφ.</p>
  101. <p>Pφsma generuje Corel 11 efektivn∞ji, ale styly jako BOLD, ITALIC a podobn∞ op∞t nezvlßdß. Neumφ generovat soubory pφsem .CEF podle normy SVG - pouze vklßdat pφsmena (glyfy) do SVG souboru. P°esnost v tomto p°φpad∞ nastavte minimßln∞ na 1:100. Nelze zvolit k≤dovßnφ textu - p°i testovßnφ program p°esto ΦeÜtinu zvlßdl.</p>
  102.  
  103. <div class='image'>
  104. <img src='podklady/hejral/750/cdr4s.png' alt='CDR - Nastavenφ exportu SVG' title='CDR - Nastavenφ exportu SVG' />
  105. <br /><span class='comment'>CDR - Nastavenφ exportu SVG (<a href='podklady/hejral/750/cdr4.png'>plnß velikost, cca 15 kB</a>)</span>
  106. </div>
  107.  
  108. <h4>Aktualizace</h4>
  109. <p>Vzhledem k mΘmu zpo₧d∞nφ p°i p°φprav∞ textu se jeÜt∞ p°ed uve°ejn∞nφm Φlßnku objevily dv∞ aktualizace exportnφch filtr∙ Corelu. K v²znamnΘmu zlepÜenφ doÜlo v implementaci pr∙hlednostφ, kterß u₧ je koneΦn∞ podle definice SVG. Bohu₧el nejsou sprßvn∞ nastaveny pr∙hlednosti tah∙. A dalÜφ zßke°nß chybiΦka - stφn, kter² vidφte v nßsledujφcφ ukßzce, je stßle realizovßn jako p°ipojenß bitmapa a cesta k tomuto obrazu je navφc chybn∞ generovßna podle DOSovΘ konvence s obrßcen²m lomφtkem! Daleko lepÜφ a zcela bez v²hrad je nynφ export textov²ch element∙. A jako t°eÜniΦka navrch znateln∞ dosp∞lejÜφ verze 2.1 prohlφ₧eΦe CSV. Tak₧e, p°es vÜechny v²hrady, rozhodn∞ upgradujte!</p>
  110.  
  111. <div class='image'><img src='podklady/hejral/750/cor-export.png' alt='Vzhled testovacφ grafiky v SVG prohlφ₧eΦi' title='Vzhled testovacφ grafiky v SVG prohlφ₧eΦi' /></div>
  112.  
  113. <h3>OpenOffice</h3>
  114. <p>OpenOffice verze 1 p°edstavujφ kancelß°sk² balφk s mnoha propracovan²mi funkcemi, je₧ se m∙₧e sm∞le m∞°it s obdobn²m programov²m balφkem Microsoftu. Zatφmco MS v ΦerstvΘ verzi balφku Office takΘ zaΦal podporovat uklßdßnφ XML a SVG dat, OpenOffice jsou schopny exportu SVG ji₧ podstatn∞ delÜφ dobu.</p>
  115. <p>U aplikacφ, kterΘ XML pouze exportujφ a generujφ ze svΘho internφho (odliÜnΘho) formßtu hodn∞ zßle₧φ na tom, kolik ·silφ bylo v∞novßno implementaci specißlnφch prvk∙ jazyka do exportnφho algoritmu. Hned potΘ musφm jednφm dechem dodat, ₧e v p°φpad∞ OpenOffice byly podobn∞ jako v p°φpad∞ prvnφ verze CDR11 zcela opomenuty progresivnφ vlastnosti SVG, mezi kterΘ je nutno poΦφtat zejmΘna pr∙hlednosti a alfa maskovßnφ objekt∙.</p>
  116. <p>Schopnosti OpenOffice jsou opravdu obrovskΘ a mezi jin²m disponujφ mo₧nostφ mφt nezßvisle na sob∞ pr∙hlednΘ tahy a v²pln∞ (je mo₧nß i prom∞nnß pr∙hlednost pomocφ masky). NaneÜt∞stφ op∞t stejn∞ jako programßto°i prvnφch verzφ Corelu 11 i auto°i OpenOffice stßle jeÜt∞ v∞zφ v minulosti, kdy ₧ßdnΘ za°φzenφ a ₧ßdn² obrßzkov² formßt nezvlßdal pr∙hlednost vektorov²ch objekt∙ a lidΘ pracn∞ vym²Üleli postupy k jejφ simulaci. Formßtovßnφ textu trpφ podobn²m neduhem jako exportnφ modul ILLUSTRATORu, toti₧ zbyteΦn²m opakovßnφm mnoha atribut∙. Atraktivnφm dopl≥kem OpenOffice jsou 3D objekty - ty se ale dokonce ani neexportujφ jako k°ivky, p°evedou se na bitmapy!</p>
  117. <p>A tak, bohu₧el, jsou OpenOffice velk²m zklamßnφm dne, s takov²m stavem bychom se opravdu, ale opravdu necht∞li smφ°it.</p>
  118.  
  119. <h3>Karbon14</h3>
  120. <p>Schopn² vektorov² editor pat°φcφ do skupiny okolo KDE projektu. Mezi ne zcela b∞₧nΘ vlastnosti pat°φ nap°φklad schopnost vym∞≥ovat si data v profesionßlnφm formßtu Illustratoru nebo jako EPS, prßce s vrstvami, kvalitnφ implementace pr∙hlednostφ, text umφst∞n² na k°ivce nebo t°eba implementace n∞kter²ch vektorov²ch filtr∙.</p>
  121.  
  122. <div class='image'>
  123. <img src='podklady/hejral/750/karbon1s.png' alt='Karbon14 - pracovnφ plocha' title='Karbon14 - pracovnφ plocha' />
  124. <br /><span class='comment'>Karbon14 - pracovnφ plocha (<a href='podklady/hejral/750/karbon1.png'>plnß velikost, cca 45 kB</a>)</span>
  125. </div>
  126.  
  127. <p>Dßle je t°eba vysoce ocenit nap°φklad paletu "navigßtor" a vrstvy, kterß stejn∞ jako AI od verze 9 zobrazuje dokonce vÜechny objekty uvnit° kresby. V °eΦi SVG - vidφme v podstat∞ grafickΘ zobrazenφ struktury DOM. Najdou se i paletky pro grafickΘ zobrazenφ historie dokumentu, knihovny vzork∙, pop°φpad∞ klipart∙ (bohu₧el zatφm nefungujφ jako pravΘ symboly v SVG grafice).</p>
  128. <p>Musφm uznat, ₧e s nabφdkou modernφch funkcφ je na tom Karbon14 velmi dob°e - vzhledem ke svΘ praxi s Illustratorem odhaduji, ₧e inspirace p°ichßzφ prßv∞ odtud. I kdy₧ se jednß o v²vojovou verzi programu s oznaΦenφm verze 0.1, prßce s nφ je pom∞rn∞ p°φjemnß. Chybφ mi jen vφce nßstroj∙ pro editovßnφ (spojovßnφ a rozpojovßnφ) vektorov²ch cest, p°idßvßnφ a ubφrßnφ bod∙ a sluΦovßnφ ploch. Pro manipulaci s textem platφ totΘ₧, co nap°φklad pro Web Draw z p°edchozφho Φlßnku. Mo₧nost maskovßnφ neexistuje.</p>
  129. <p>Pro ·Φely testovßnφ jsem zkompiloval nejnov∞jÜφ betaverzi KOffice 1.3. Musφm °φci, ₧e exportovanΘ SVG soubory jsou velmi dob°e optimalizovanΘ a podporujφ vÜechny modernφ vymo₧enosti typu pr∙hlednost a podobn∞. I kdy₧ se betaverze chovala vcelku rozumn∞, nemohl jsem vyzkouÜet export textu, nebo¥ prßv∞ v tΘto oblasti se vyskytovalo nejvφce nevychytan²ch "bleÜek". Pokud mßm v∞ci shrnout, Karbon14 je hork² kandidßt na nejlepÜφ vektorov² editor pro Linux.</p>
  130.  
  131. <h3>Amaya</h3>
  132. <p>Amaya je nßstroj v prvnφ °ad∞ urΦen² pro demonstraci nov²ch standard∙ W3 Consortia a rozsahem funkcφ nebo komfortem rozhodn∞ nenadchne, ale pro prvnφ pokusy urΦit∞ postaΦφ. Vlastn∞ je to editor i prohlφ₧eΦ HTML, SVG a MathML a jako takov² umφ vytvß°et bu∩ samostatnΘ soubory SVG, nebo m∙₧ete SVG vklßdat p°φmo do HTML prostoru.</p>
  133.  
  134. <div class='image'>
  135. <img src='podklady/hejral/750/amaya81-s.png' alt='Amaya - pracovnφ plocha' title='Amaya - pracovnφ plocha' />
  136. <br /><span class='comment'>Amaya - pracovnφ plocha (<a href='podklady/hejral/750/amaya81.png'>plnß velikost, cca 15 kB</a>)</span>
  137. </div>
  138.  
  139. <p>Amaya mß samoz°ejm∞ stromovΘ zobrazenφ i editor zdrojovΘho k≤du. Amaya dovoluje vytvo°it jednoduchΘ deklarativnφ animace polohy a barvy objekt∙. K dispozici je paleta, kde mohou b²t umφst∞ny Φasto pou₧φvanΘ grafickΘ prvky. Po vlo₧enφ do dokumentu ale nejsou tyto prvky prav²mi symboly. Zato v prßci s textem p°ekonßvß i WebDraw nebo XStudio.</p>
  140. <p>V dob∞ vzniku tohoto Φlßnku byla aktußlnφ verze 8.1, kterou si nainstalujte rozhodn∞ ve verzi OpenGL - m∞la by podporovat zobrazovßnφ pr∙hlednosti a snad i animaΦnφ prvky.</p>
  141.  
  142. <h3>K2D, KSVG a Konqueror</h3>
  143. <p>Zajφmav² pokrok z hlediska SVG uΦinilo u₧ivatelskΘ prost°edφ KDE znßmΘ svou vysokou kvalitou. Jeho centrßlnφ souΦßstφ je prohlφ₧eΦ Konqueror, kter² se obdobn∞ jako ve Windows pou₧φvß jak pro prohlφ₧enφ soubor∙, tak Internetu. (Mimochodem Konqueror se stal zßkladem i pro nov² prohlφ₧eΦ Safari na Mac OS.) Pro nßs je ovÜem vrcholn∞ zajφmavΘ, ₧e <em>v ΦerstvΘ verzi KDE 3.2 se jeho nativnφ souΦßstφ stßvß implementace SVG standardu</em> - pojmenovanß v rßmci zvyklostφ tohoto projektu KSVG, jak jinak.</p>
  144.  
  145. <h4>K2D</h4>
  146. <p>Na KSVG je postaven nativnφ editor KDE 2D Workbench - K2D, kter² je ovÜem ve velmi ranΘ fßzi v²voje. Jen s velk²mi obtφ₧emi jsem zφskal zdrojov² balφk verze 0.1, kter² navφc obsahoval pßr chybiΦek brßnφcφch ·sp∞ÜnΘmu zkompilovßnφ. Po jejich odstran∞nφ jsem dostal v²sledky, kterΘ ukazujφ nßsledujφcφ snφmky.</p>
  147.  
  148. <div class='image'><img src='podklady/hejral/750/k3d2.png' alt='KDE 2D Workbench - K2D' title='KDE 2D Workbench - K2D' /></div>
  149.  
  150. <p>Prßce s K2D je pom∞rn∞ p°φjemnß, ale editor je skuteΦn∞ stßle na poΦßtku cesty. V souΦasnΘm stavu dovolφ vytvß°et vektorovΘ objekty, texty, potΘ je obarvit a dßl u₧ nic moc. Nefungujφ zatφm ani p°echody barev. M∙₧ete si povÜimnout, ₧e nastavovßnφ vÜech atribut∙ je velmi detailnφ a soust°ed∞no na jednΘ obrovskΘ palet∞ se zßlo₧kami. Pokud se poda°φ aplikaci vypiplat bude urΦit∞ zajφmavß pro autory SVG k≤du, ale pro b∞₧nΘ u₧ivatele asi trochu komplikovanß a matoucφ.</p>
  151.  
  152. <div class='image'>
  153. <img src='podklady/hejral/750/k2d1s.png' alt='K2D - centrßlnφ paleta' title='K2D - centrßlnφ paleta' />
  154. <br /><span class='comment'>K2D - centrßlnφ paleta (<a href='podklady/hejral/750/k2d1.png'>plnß velikost, cca 25 kB</a>)</span>
  155. </div>
  156.  
  157. <h4>Zobrazenφ SVG v prohlφ₧eΦi s pou₧itφm KSVG</h4>
  158. <p>Na tomto poli vykazuje mnou testovanß betaverze KDE 3.2 velmi hezk² pokrok a v∞°φm tomu, ₧e p°edstavuje v²znamn² posun v cest∞ k neomezenΘmu nasazenφ SVG v ka₧dodennφ praxi. Nßsledujφcφ otisk ukazuje n∞kolik stoprocentn∞ spln∞n²ch test∙ W3 konsorcia:</p>
  159.  
  160. <div class='image'>
  161. <img src='podklady/hejral/750/konq-text-path-s.png' alt='Konqueror - textov² test' title='Konqueror - textov² test' />
  162. <br /><span class='comment'>Konqueror - textov² test (<a href='podklady/hejral/750/konq-text-path.png'>plnß velikost, cca 30 kB</a>)</span>
  163. </div>
  164.  
  165. <p>Mohu prohlßsit, ₧e v podstat∞ vÜechny kresebnΘ prvky jsou funkΦnφ, vΦetn∞ t∞ch problematiΦt∞jÜφch, jako jsou masky nebo text umφst∞n² na k°ivce. Nejzßva₧n∞jÜφ nedostatek v tΘto oblasti p°edstavuje nefunkΦnost SVG pφsem (postup umo₧≥ujφcφ vlo₧it vektorovΘ fonty p°φmo do SVG grafiky). Pom∞rn∞ dob°e takΘ funguje programovateln² objektov² model DOM vΦetn∞ funkΦnosti udßlostφ, co₧ ji₧ v aktußlnφ verzi knihovny umo₧≥uje pomocφ JavaScriptu v urΦitΘ mφ°e grafiku rozh²bat - viz <a href='podklady/hejral/750/ksvg-clock.svg'>ukßzka pohybliv²ch analogov²ch hodin</a>.</p>
  166. <p>Bohu₧el zatφm v∙bec nejsou implementovßny bitmapovΘ SVG filtry. Na samΘm poΦßtku programßtorsk²ch pracφ jsou v tΘto betaverzi evidentn∞ animace - jeÜt∞ nefunkΦnφ, ale ji₧ ve v²rob∞ - co₧ je velmi dobrΘ.</p>
  167.  
  168. <h3>IMS Web Dwarf</h3>
  169. <p>Tento program je souΦßstφ v∞tÜφho sharewarovΘho IMS balφku k vizußlnφmu vytvß°enφ webov²ch strßnek HTML a obsahuje pom∞rn∞ sluÜnou podporu pro SVG. Zp∙sob kreslenφ, omezenΘ grafickΘ nßstroje a u₧ivatelsk² komfort mne p°i testovßnφ nijak nenadchly, ovÜem pro zaΦßtek m∙₧e Dwarf staΦit. Zmi≥uji se o n∞m p°edevÜφm proto, ₧e vyu₧φvß ji₧ d°φve zmi≥ovanΘho spoleΦnΘho prvku HTML a SVG (pota₧mo XML) - toti₧ shodn² objektov² model. Dφky analogickΘmu objektovΘmu modelu DOM umo₧≥uje vytvß°et nap°φklad jednoduchΘ animovanΘ strßnky kombinujφcφ HTML s SVG.</p>
  170.  
  171. <h3>Real Draw</h3>
  172. <p>Populßrnφ sharewarov² editor bitmapov²ch obrßzk∙, kter² umo₧≥uje snadno vytvß°et i pom∞rn∞ velmi pokroΦilΘ efekty. Podobn∞ jako profesionßlnφ Protoshop obsahuje i vektorovou kreslicφ Φßst. Real Draw umo₧≥uje exportovat kresbu do SVG, co₧ vypadß vzhledem k jeho schopnostem velmi lßkav∞. Verze aktußlnφ v dob∞ vzniku tohoto textu bohu₧el stßle jeÜt∞ obsahovala pom∞rn∞ mnoho chyb. Program p°evßdφ p°i exportu pφsma na k°ivky, ovÜem prßv∞ tato funkce obsahovala v testovanΘm programu zßsadnφ chybu, zp∙sobujφcφ totßlnφ "rozsypßnφ" obrysu znak∙.</p>
  173.  
  174. <div class='image'><img src='podklady/hejral/750/real.png' alt='Real Draw' title='Real Draw' /></div>
  175.  
  176. <p>Pokud by auto°i Real Draw p°idali krom∞ oprav jeÜt∞ aplikaci alespo≥ n∞kter²ch "prav²ch" SVG filtr∙, kterΘ efekt nevklßdajφ coby bitmapu do SVG souboru, ale generujφ jej a₧ v prohlφ₧eΦi, aby se zmenÜila velikost p°enßÜen²ch dat, byl by v²sledkem siln² nßstroj.</p>
  177.  
  178. <h3>Testy implementacφ SVG</h3>
  179. <p>A nakonec jeÜt∞ pro zajφmavost v²sledky <a href='podklady/hejral/750/svg_test_matrix.htm'>testovßnφ prohlφ₧eΦ∙</a>, provedenΘho organizacφ W3C (dokument nenφ ·pln∞ nejnov∞jÜφ, tak₧e n∞kterΘ novinky chybφ). Upozor≥uji zvlßÜt∞ na Bitflash, kter² se ji₧ doΦkal praktickΘho nasazenφ v mobilnφch za°φzenφch, o tom pßr slov n∞kdy p°φÜt∞. A informace, kterΘ prosakujφ o novΘ verzi Adobe SVG Vieweru, tvrdφ, ₧e se Φekß pouze na definitivnφ verzi normy SVG 1.2, aby prohlφ₧eΦ splnil vÜechny po₧adavky na sto procent...</p>
  180.  
  181.  
  182.  
  183. <div id='article-author'>
  184. <a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/autor.asp?author=187'>Hejral, Martin</a> (4. 2. 2004)
  185.  
  186. </div>
  187.  
  188.  
  189.  
  190. <div class='refer'><h3><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/serial.asp?serial=21' title='p°ehled Φlßnk∙ vΦetn∞ anotacφ'>Pr∙vodce SVG - Scalable Vector Graphics</a></h3><p>SVG je progresivnφ technologiφ, kterß umo₧≥uje v rßmci internetov²ch strßnek vyu₧φvat v²hod vektorovΘ grafiky. Seznamte se se stavem implementace, pou₧iteln²mi editory a dalÜφmi zajφmavostmi, jako je nap°φklad dynamickΘ skriuptovßnφ grafiky. Tato sΘrie Φlßnk∙ dosud nebyla ukonΦena!</p><ul><li><strong>Pr∙vodce SVG - aplikace pro export</strong> (prßv∞ Φtete)</li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/http://interval.cz/clanek.asp?article=2564'>Pr∙vodce SVG - grafickΘ editory</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/http://interval.cz/clanek.asp?article=2265'>Pr∙vodce SVG - SVG versus Flash</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/http://interval.cz/clanek.asp?article=2253'>Pr∙vodce SVG - hlßÜenφ o stavu v²voje</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/http://interval.cz/clanek.asp?article=2234'>Pr∙vodce SVG</a></li></ul></div>
  191.  
  192.  
  193.  
  194. </div></div>
  195. <div id='page-right'><h2 class='textversion'>Prav² sloupek</h2>
  196. <div id='search'><h3 class='textversion'>Vyhledßvßnφ</h3><form method='get' action='http://interval.cz/search.asp'><div><input type='text' name='hledej' class='text' /><input type='submit' class='submit' value='Najdi!' /></div></form><div><a href='http://interval.cz/search_ex.asp'>RozÜφ°enΘ vyhledßvßnφ</a></div></div>
  197.  
  198.  
  199.  
  200. <div class='page-right-box book'>
  201.     <h3>Kni₧nφ novinka</h3>
  202.     <div class='page-right-box-in'>
  203.         <div class='book-top'>
  204.             <h4><a href='http://interval.cz/__redirect/redirect.asp?what=interval_booknews&url=http://interval.inshop.cz/inshop/scripts/detail.asp?ItemID=240'>Praktick² JavaScript</a></h4>
  205.         </div>
  206.     </div>
  207.     <div class='image'>
  208.         <a href='http://interval.cz/__redirect/redirect.asp?what=interval_booknews&url=http://interval.inshop.cz/inshop/scripts/detail.asp?ItemID=240'><img src='podklady/knihy/image.jpg' alt='obßlka' title='obßlka' /></a>
  209.     </div>
  210.     <div class='book-bottom'>Cena: <span class='book-price-old'>200,00 KΦ</span> <span class='book-price-new'>180,00 KΦ</span></div>
  211. </div>
  212.  
  213.  
  214.  
  215. <div class='page-right-box reading'>
  216.     <h3>NejΦten∞jÜφ</h3>
  217.     <div class='page-right-box-in'>
  218.         <ul>
  219. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3176'>E-mailov² klient pre webmail v PHP - odosielanie, Φφtanie a s¥ahovanie</a></li>
  220. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3174'>Strßnkovßnφ v ovlßdacφm prvku DataGrid</a></li>
  221. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1312'>Statistika p°φstup∙ v PHP - vyhledßvacφ frßze</a></li>
  222. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3178'>Praktick² Javascript</a></li>
  223. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3175'>Java Servlets - generovanie grafiky</a></li>
  224.         </ul>
  225.     </div>
  226. </div>
  227.  
  228.  
  229.  
  230. <div class='page-right-box cauldron'>
  231.     <h3>Diskuznφ kotel</h3>
  232.     <div class='page-right-box-in'>
  233.         <ul>
  234. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3160' title='(126 komentß°∙)'>Tvorba layoutu webu - teoretick² ·vod</a></li>
  235. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3165' title='(34 komentß°∙)'>Nßh╛ady k obrßzkom generovanΘ v PHP</a></li>
  236. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3166' title='(25 komentß°∙)'>Maguma Studio - freeware editor PHP skriptov</a></li>
  237. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3156' title='(23 komentß°∙)'>Search Engine Visibility</a></li>
  238. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3137' title='(18 komentß°∙)'>ImplementaΦnφ chyby v prohlφ₧eΦφch II.</a></li>
  239.         </ul>
  240.     </div>
  241. </div>
  242.  
  243.  
  244.  
  245. <div class='page-right-box emailserv'><h3>Email servis</h3><div class='page-right-box-in'><form action='prihlaseni.asp' method='post'><div class='shell'><input class='text' type='text' name='adresa' /></div><div class='shell'><input class='radio' type='radio' value='1' name='co' checked='checked' />T²dennφ p°ehled Φlßnk∙</div><div class='shell'><input class='radio' type='radio' value='2' name='co' />HELP konference</div><div class='shell'><input class='submit' type='submit' value='P°ihlßsit' /></div></form></div></div>
  246. </div>
  247. <div class='page-maker'> </div><div class='page-maker-white'> </div></div>
  248. <div id='page-foot'><div id='page-foot-menu'><a href='http://interval.cz/reklama.asp'>Inzerce na Interval.cz</a> | <a href='http://interval.cz/redakce.asp'>Redakce Interval.cz</a> | <a href='http://interval.cz/autori.asp'>Hledßme novΘ autory</a></div><div id='issn'>ISSN 1212-8651</div><div id='page-foot-zoner'>© Zoner software, s.r.o., vÜechna prßva vyhrazena, tento server dodr₧uje <a href='http://interval.cz/privacy.asp'>prßvnφ p°edpisy</a>o ochran∞ osobnφch ·daj∙.</div></div>
  249. </body>
  250. </html>