Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
-
10. července 2024
-
5. září 2024
Matrixmedia - Obsluha a tisk na velkoformátových digitálních tiskárnách
-
15. července 2024
-
9. srpna 2024
skenerista, osvitář
Adobe Illustrator CS5 HTML5 Pack: moderní webdesign přímo v Illustratoru?
17. září 2010, 00.00 | O něco lepší schopnosti tvorby webových stránek nově nabízí Adobe Illustrator CS5 prostřednictvím doplňku HTML5 Pack. Podobně jako v Adobe Dreamweaveru CS5 můžete nyní v Illustratoru CS5 například vytvářet ze zvolených objektů kreslící plochy pro webovou stránku, používat speciální přepínače u objektů a exportovat některé jejich základní vlastnosti uvnitř kaskádových stylů.
Nový přírůstek do rodiny vývojářských nástrojů přesněji řečeno doplňků pro aplikace aktuální sady Creative Suite 5 uvolnila společnost Adobe Systems na svém developerském webu Adobe Labs. Jedná se o rozšíření Adobe Illustrator CS5 HTML5 Pack, které doplňuje Illustratoru CS5 o základní podporu HTML5 a CSS3 a současně navýší exportní schopnosti Illustratoru (pro s HTML5 úzce svázaný) formátu SVG.
Nejedná se zatím o klasický zásuvný modul instalovaný přes Extension Manager, nýbrž o archiv s různými částmi Adobe Illustratoru CS5 s manuální instalací, kde soubory v archivu Adobe Illustrator CS5 HTML5 Pack jednoduše zkopírujete (přepíšete přitom i některé původní soubory) do příslušných lokací v archivu obsažených adresářů. Doplněk vyžaduje nový Illustratoru v aktuální verzi 15.0.1, takže před rozbalování archivu nezapomeňte provést spustit update (pokud se vám nespouští sám) Illustratoru či balíku CS5.
Canvas neboli kreslicí plochy
Současná verze doplňku Adobe Illustrator CS5 HTML5 Pack rozšiřuje Illustrator CS5 o možnost tvorby kreslicích ploch respektive pláten, která lze v HTML5 definovat značkou canvas. Každý běžný objekt grafického dokumentu Illustratoru tedy můžete v menu Objekt označit jako vrstvu kreslicí plochy (canvas element), uvnitř které pak lze v HTML5 kreslit javascriptem prakticky cokoliv.
Adobe Illustrator CS5 HTML5 Pack - objekty v ilustracích lze definovat jako kreslicí plochy (Canvas) pro HTML 5
Definování značek canvas pro HTML5 přímo v Illustratoru je zatím na úplném počátku schopností exportu vektorové grafiky pro jednotlivá kreslicí plátna, která tak mohou mít při použití vektorové SVG grafiky různá rozlišení a lze je tedy teoreticky možné zobrazit například i na mobilních zařízeních s různými velikosti a rozlišením displejů, to vše při zachování shodného obsahu i jeho formátování.
Značky canvas pro kreslicí plochy/plátna by mělo být v budoucnu možné dále použít třeba jako základ na tvorbu různých widgetů (obsahujících opět vektorovou grafiku) pro webové aplikace nezávislé (zatím opět víceméně teoreticky) na cílovém rozlišení obrazovky.
Adobe Illustrator CS5 HTML5 Pack - objekty kreslicích ploch (HTML 5 Canvas) se v paletě vrstev automaticky označí obecným grafickým symbolem HTML tagu
Adobe Illustrator CS5 HTML5 Pack - podrobné volby u stávajícího exportu vektorové SVG grafiky včetně specifikací vlastností kaskádových stylů
Vlastnosti objektů a kaskádové styly
Některé důležité vlastnosti každého objektu můžete v příslušné paletě Vzhled v rámci tzv. parametrizace SVG grafiky označit novým přepínačem Toggle Variability, který přidá objektu označení (X) a zpřístupní export kaskádových stylů s informacemi právě o použitých vlastnostech daného objektu. Grafiku pak můžete v Illustratoru CS5 uložit ve formátu SVG se zvolením vlastností chování kaskádových stylů.
Nezávisle na sobě můžete dále exportovat jednotlivá kreslicí plátna samotného Adobe Illustratoru (opět jako SVG grafiku) a vzorové kousky kaskádových stylů s určeným typem média pro jejich následné slepení a použití na webu či spíše uvnitř obsahu webových stránek.
Momentálně lze v rámci CSS z Illustratoru CS5 exportovat například vlastnosti výplní a průhlednosti objektů (Fill Color, Fill Opacity, Stroke Color, Stroke Opacity, Stroke Width a Object Opacity), další vlastnosti budou zřejmě zařazeny v budoucích verzích Adobe Illustrator CS5 HTML5 Pack i v závislosti na finálních specifikacích CSS3 a HTML5. Exportovat lze i CSS pro textové objekty respektive jejich styly.
Adobe Illustrator CS5 HTML5 Pack - export specifikovaných kaskádových stylů z kontextového menu palety Vzhled
Adobe Illustrator CS5 HTML5 Pack - nové dialogové okno s předvolbami pro export kaskádových stylů
Adobe Illustrator CS5 HTML5 Pack - export kaskádových stylů najdeme nově i v paletě textových stylů
Technologické demo
Jako ukázka technologií využívajících některé z možností HTML5 a CSS3 je Adobe Illustrator CS5 HTML5 Pack určitě zajímavý, musím však zdůraznit, že se jedná o první veřejnou testovací verzi doplňku. Odpovídá tomu proto celková funkčnost jednotlivých modulů zejména pro generování CSS atp., jejichž odladění a dokončení do opravdu použitelného stavu bude záviset hlavně na celkovém postupu vývoje HTML5 a CSS3.
Tématické zařazení:
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
29. listopadu 2013
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
5. srpna 2024
Bubnový scanner na 4000dpi optické rozlišení + PC + software
-
8. září 2024
-
22. září 2024