Skvělá zpráva pro uživatele RapidWeaveru!

Jak mně sdělil Martin Lán, jinak provozovatel nejlepšího webu o RW u nás, po krátké komunikaci s lidmi od Realmac Software byla právě spuštěna sekce pro české a slovenské uživatele přímo v diskuzním fóru na stránkách zmíněných Realmac Software! Diskuzní fórum najdete na této adrese. Takže šup s linkem do bookmarků a doufám, že se to tam co nevidět pěkně rozjede a diskuze bude pro nás všechny přínosem. Martine, DÍKY!!!

realmac-software-cz-sk-forum

|

MacHeist s RapidWeaverem!!!

Pokud se náhodou poohlížíte po excelentním programu na tvorbu webových stránek pod Mac OS X a se systémem „přidělovaný“ iWeb vám z jakéhokoliv důvodu nevyhovuje, zbystřete pozornost. Tradiční balíček MacHeist, který čas od času nabízí za malý peníz sadu aplikací s razantně větší cenou, má nyní v nabídce v titulku zmíněný RapidWeaver (také tyhle stránky, které teď čtete, jsou v něm stvořeny).

Má to ale drobný zádrhel – RW je prozatím uzamčen a ke stažení bude až ve chvíli, kdy si celý bundle stáhne určitý počet lidí. Zatím se neví, jaký má tento počet být, takže buďte ve střehu, ať nepropásnete báječnou příležitost, která by vás pak vyšla na slabých dvacet emerických babek.

MacHeist_03-2010

Více na stránkách projektu MacHeist.

|

Tip pro RapidWeaver – video a animace

Na stránkách nejlepšího českého webu o Rapid Weaveru vyšly dva díly návodu (čtěte tadytady) pro ty z vás, kteří si neví rady se zakomponováním flashových animací a videí do stránek RW. Ještě jednou díky, Martine!

rw_cz_video_animace

|

Integrace free mp3 přehrávače do RapidWeaveru

K tomuto článku mě „navedl“ Walda Švábenský, kterého tímto zdravím. Jelikož jsme oba dost antitalenti na všelijaké ty html kódy, CSS styly a podobné webařské serepetičky, pracujeme s báječným Rapid Weaverem, kde člověk nemusí znát takřka nic :o) A vyměňovali jsme si tuhle nějaké poznatky... já Waldemarovi poradil s videem a obrázky á la lightbox a mediabox (čtěte zde) a on mě poslal odkaz na diskuzi a několik rad právě ohledně začlenění mp3 přehrávače. Pojďme si tedy projít návod pro laiky a začátečníky krok za krokem...

1) Přihlašte se pomocí vašeho FTP klienta na server, kde máte fyzicky umístěny svoje stránky a tam si v hlavním adresáři (tam, kde máte i spouštěcí soubor, který bude mít nejspíš název index.html) vytvořte složku s názvem plugins a v ní podsložku s názvem audio-player. Obě složky si samozřejmě můžete nazvat jak chcete, ale pro lepší orientaci budu používat tyto názvy.

rw-mp3flashplayer

2) Stáhněte si tuto zazipovanou složku.

3) Rozpakujte ji a oba soubory, které tam najdete nakopírujte na server do před chvílí vytvořené složky www.vasedomena.xy/plugins/audio-player. Rozzipovanou složku na vašem disku (a samozřejmě i původní *.zip) můžete smazat.

4) Stáhněte si tento zazipovaný texťák s kódy a rozbalte ho.

5) V dokumentu Rapid Weaveru si zobrazte paletu Page Inspector (Cmnd+Shift+I) a tam zvolte záložku Header a „podzáložku“ stejného jména. Sem pomocí Cmnd+C / Cmnd+V vložte zkopírovaný první kód ze staženého textového dokumentu. Paletu můžete zavřít.

rw-mp3flashplayer-02

6) Zkopírujte si z texťáku druhý kód a vložte ho přímo do textového pole stránky Blog v Rapid Weaveru.

rw-mp3flashplayer-01


7) Jděte opět na FTP server a založte si někde složku, kam budete umísťovat vaše mp3 soubory. Já ji udělal opět v hlavním adresáři a nazval (logicky) mp3. Nakopírujte si do ní zvolený mp3 soubor.

8) V kódu vloženém do stránky Blog vašeho RW dokumentu nyní přepište potřebná data dle následujícího příkladu na screenshotu. Vše samozřejmě s vašimi údaji (název vaší domény, vašich složek, vašeho mp3 souboru).

rw-mp3flashplayer-02

9) Pokud jste postupovali přesně podle návodu, po přepnutí do Preview módu uvidíte na vaší stránce následující flashový mp3 přehrávač. A jako odměnu za vaši šikovnost si teď poslechněte jednu z nejkrásnějších písniček, jakou znám...








Pozor na „chipmunk“ efekt!

Macromedia Flash Player má prý problémy s přehráváním souborů, které jsou kódovány v míře, jež není násobkem 11 025 kHz. Tento problém je někdy také nazýván jako chipmunk efekt a soubor je pak přehráván s dvojnásobnou rychlostí. Aby k tomu nedošlo, je třeba nastavit kódování mp3 na 11 025 kHz, 22 050 kHz a 44 100 kHz. Toho můžete docílit třeba přes iTunes nebo jiný konverzní program. Ale myslím, že si s tím nemusíte moc lámat hlavu, v praxi se s tím setkáte jen výjimečně.

Jinak výše popisovaný postup není jediným. Vše se dá řešit i přes Assets nebo pomocí pluginu Stacks apod., ale to už si kdyžtak pozjišťujte sami ;o)

Další informace o integraci flash audio playeru do RW, ale i do Wordpressu, Bloggeru atd. najdete mimo jiné na těchto stránkách:
Realmac Software forum - Audio Player
http://www.1pixelout.net/code/audio-player-wordpress-plugin/
http://www.macloo.com/examples/audio_player/

|

RapidWeaver 4.3

Jen pro jistotu, pokud to někdo nezaregistroval - venku je RW 4.3 plně kompatibilní s Mac OS X 10.6. Mě teda hodně potěšila položka Add Link na pravém kliku - je to blíž :o) Více třeba u Martina...

RW_4-3

|

PrettyPhoto

Martin Lán na svém famózním webu rapidweaver.cz upozorňuje na další šablonu pro plugin RapidAlbum s názvem PrettyPhoto. Krásný (jak říká Martin) klon lightboxu... uživatelé RW by neměli váhat. A je zdarma...
|

RapidCart – funkční e-shop v RapidWeaveru během chvilky

Na scéně doplňků do RapidWeaveru se objevil nový zajímavý hráč – RapidCart. Pomocí tohoto pluginu si vytvoříte pěkný a funkční e-shop opravdu během chvilky. Podporuje 18 měn včetně naší koruny, platbu PayPalem atd. Všechny podrobnosti o tomto softwaru už si zjistěte sami na stránkách produktu, který stojí € 18,95.

rapidcart

|

Accordion opět na scéně

Stejně jako sekce Odkazy, tak i stránka s informacemi o mé osobě a kontakty se dočkala nového kabátu. V hlavní roli opět plugin do RapidWeaveru – Accordion.

o-mne_kontakty

|

Odkazy zase v novém :o)

Je to sice úsměvné, ale během pár dní jsem podruhé předělal vizáž stránky s odkazy. Tak kdo má zájem omrknout, jak funguje plugin Accordion do RapidWeaveru od YourHead v praxi, může nahlédnout...

odkazy

PS: A přísahám, že toho předělávání na chvíli nechám :o)))

|

Výborná zpráva pro české uživatele RapidWeaveru!

Martin Lán dodržel slovo a dneškem počínaje opět frčí jeho projekt rapidweaver.cz. Tipy, triky, tutorialy, snippety, pluginy, odkazy atd. Díky, Martine!

rw_cz
|

SimpleViewer - tvorba vkusné flashové fotogalerie rychle a zdarma

SimpleViewer je poměrně známá a oblíbená flashová „aplikace“ pro tvorbu webových fotogalerií. Existuje v různých verzích a odnožích, pro různé systémy, jako serverová či desktopová aplikace, jako pluginy do různých programů atd. Na této stránce si můžete sami všechny možnosti prohlédnout. Také máte možnost si zakoupit verzi Pro za $45, výhody najdete zde.

My si ale dnes ukážeme, jak zprovoznit SimpleViewer v „zadarmové“ (a bohatě dostačující) verzi coby plugin do RapidWeaveru a také jako skript do Photoshopu. Obojí je jednoduché jak syn vesnického prosťáčka a televizní rosničky. Pojďme na to...

SimpleViewer jako plugin do RW


1) Stáhněte plugin odsud a na disku na něj (při spuštěném RapidWeaveru) poklepejte, aby se nainstaloval. Při tvorbě nové stránky ve vašem RW projektu pak vyberte tento plugin z nabídky.

sw1

sw2

2) Přetáhněte svoje fotky či obrázky do RapidWeaveru. Pokud chcete, můžete k jednotlivým fotkám přidat popisky, stačí dvojklik do políčka Caption u každého snímku.

sw3

sw4

3) V téhle fázi můžete vyzkoušet, zda SimpleViewer bude fungovat ve vámi zvoleném tématu. S mnohými si totiž nerozumí a je třeba volit co nejnovější témata RapidWeaveru, ideálně verzi 4.0.

sw6

sw7

4) Až zvolíte funkční téma, klikněte na tlačítko Setup vpravo dole a nastavte si parametry, jak potřebujete. Zkuste si měnit jednotlivé hodnoty a průběžně si klikem na Preview můžete kontrolovat, jak to vypadá. Všechny tři záložky jsou, myslím, jasné a k jednotlivým parametrům netřeba bližšího vysvětlování. Snad jen na záložce Navigation, položka Enable Right Click Open - když ji zatrhnete, může si potom potenciální návštěvník vaší fotogalerie kliknout na fotku v galerii pravým myšítkem a otevřít si tak fotku do „obyčejného, ne-flashového“ nového okna prohlížeče a odtud stáhnout.

sw5

sw8

5) Toť vše. Vyexportujte stránku na server a pošlete link kámošům :o)


SimpleViewer (a spol.) jako skripty do PS


1) Stáhněte skript pro vaši verzi Photoshopu (podporované jsou CS2, CS3 a CS4) a nainstalujte dle instrukcí... vše tady.

2) Restartujte Photoshop a zvolte Soubor > Skripty. Uvidíte tam celkem čtyři nové položky: AutoViewer, PostcardViewer, SimpleViewer a TiltViewer. Všechno to jsou skripty, kterým stačí ukázat zdrojovou složku s obrázky, cílovou složku pro vyexportovanou galerii, nastavit parametry a kliknout na Build web gallery.

  • SimpleViewer - udělá v podstatě to samé, co jsme si ukázali před chvílí v RapidWeaveru (Drobný tip – pokud vás rozčilují automaticky zobrazované názvy jednotlivých fotografií, zvolte barvu textu stejnou jako barvu pozadí a budou fuč :o)).
  • AutoViewer – vyexportuje jakési slideshow, které se dá ale klasicky zastavit a posouvat šipkami.
  • PostcardViewer - výsledná galerie vypadá jako vytištěné fotky poházené na stole a při kliku na některou z nich se přizoomuje, jako kdyby ji člověk vzal do ruky a strčil si ji pod nos :o)
  • TiltViewer - taková podivná pseudo3D úchylárna, která se těžko vysvětluje. Mrkněte se raději na ukázku a zkuste hýbat nad fotkami kurzorem či na nějakou kliknout :o)

sw9

3) Celou cílovou složku se všemi soubory opět nahrajte někam na vaše FTP apod. a odkaz na spouštěcí soubor index.html pošlete známým...

sw10
|

Tip pro RapidWeaver – zápis kódu

Sem tam se vám může stát, že budete chtít do běžného textu třeba na blogu vložit i html (apod.) kód, aby si jej vaši čtenáři mohli zkopírovat pomocí Cmnd/Ctrl+C. RW sice disponuje položkou Code, kterou najdete ve Format > HTML > Code, ale spoustě uživatelů (ne-li všem) to prostě nefunguje. Pokud kód označíte a aplikujete na něho zmíněný „styl“ Code, v Preview ani po exportu na web se na tom místě nic neobjeví.

Po chvilce pátrání jsem objevil příjemný freewarový plug-in High-Light s jehož pomocí je výše zmíněná „operace“ hračkou. Plug-in stáhněte třeba na plochu, spusťte RW a dvojklikem ho nainstalujte. Restartněte RW a High-Light najdete v nabídce Format.

rw_high-light1

Od nynějška můžete klidně publikovat kousky kódu mezi obyčejným textem, jako já třeba v tomto nedávném příspěvku (entita pro uvozovky).

rw_zapis_kodu

|

Nebojte se snippetů v RapidWeaveru...

Možná jste si ve vašem RW (v. 4) všimli v horní liště ikonky Snippets, ale nějak jste nepochopili k čemu to vlastně slouží nebo jste ještě neměli čas/chuť to prozkoumat. Není se čeho bát...

Slovem „snippets“ jsou označovány kousky html kódu, které se používají často a je tudíž výhodné mít je stále po ruce. Počkejte, neděste se... už vidím, jak se „křižujete“ a voláte, že s html nechcete nic mít, a že právě proto jste si pořídili RW. To je v pořádku, já nemám o kódování webů taky ani ponětí, ale to ještě neznamená, že aspoň malinko nemůžeme nabízenou možnost využít.

Co třeba když chcete na svém webu používat správné typografické uvozovky („ “), ale RW vám umožňuje pouze ty rovné, které u nás označují americké palce (")? Stačí se trošku porozhlédnout po webu (např. si dovolím doporučit známé stránky jakpsatweb.cz) a najít si tzv. html entitu, tzn. styl zápisu potřebného znaku, mezery atp. Když už jsme u našeho příkladu s uvozovkami, tak levé české se zapisují

„

a pravé jako

“

.

Teď si požadovanou entitu zkopírujte do schránky (Cmnd+C), přesuňte se do RapidWeaveru, klikem na ikonku (nebo stiskem Cmnd+5) vyvolejte plovoucí paletku Snippets a klikněte dole na plusko. Pojmenujte si nějak rozumně nový snippet,  vysypte ho do spodního políčka z clipboardu pomocí Cmnd+V a uložte. Hotovo!

Od nynějška stačí kdykoliv v budoucnu při psaní textu pouze chytnout potřebný snippet kurzorem a přetáhnout na patřičné místo v dokumentu RapidWeaveru. Nepochybuji o tom, že další, pro vás potřebné, útržky kódu si už najdete a „zprovozníte“ sami. Na závěr ještě drobná poznámka... některé snippety se nevkládají do textu v dokumentu, ale např. do paletky Media Inspector, jak to uvidíte na závěr následujícího „výukového“ videa, kdy půjde o zarovnání obrázku napravo. Klikněte na náhled...

RW_snippets_video

|

Tip pro RapidWeaver – automatické přizpůsobení obrázku

Následující postup funguje určitě v RW4, ve starších verzích to musíte omrknout sami ;o)

Pokud se vám nechce zdržovat zmenšováním obrázků vkládaných např. do jednotlivých příspěvků blogu, můžete říct RapidWeaveru, ať to dělá za vás. Nejprve si zjistěte šířku okna zvoleného tématu do kterého umísťujete texty, obrázky apod. Já to dělám jednoduše tak, že si udělám otisk patřičného výřezu obrazovky a pak se buď v Info nebo grafickém editoru podívám na šířku v pixelech. Možná to není ideální způsob, ale je můj, funguje a stačí mi :o)

Následně stačí vyvolat dialog předvoleb programu (RapidWeaver > Preferences), tam v sekci General zaškrtnout checkbox Automatically resize larger images a v okýnku pod tím zvolit zjištěnou šířku v pixelech. Od této chvíle můžete fláknout do stránky v RW jakkoliv velký obrázek a on se sám okamžitě zmenší na zvolenou velikost...


rw_automatically_resize

|

Maličkost v RapidWeaveru – Media Inspector

Udělal jsem teď takový drobný objev, o který se hned musím podělit :o) Jedná se o vyvolání plovoucí paletky Media Inspector. Toho můžete docílit buď klikem na její ikonu v horním menu baru RapidWeaveru, pomocí klávesové zkratky Cmnd+2... ANEBO... pozor, přichází můj „obrovský“ objev :o))) ... dvojklikem na obrázek! Což mimochodem považuji za nejrychlejší cestu...

rw-doubleclick-media-inspector

|

Flash Slideshow v RapidWeaveru

Dostal jsem dotaz, jak v RW udělat fotogalerii s Flash Slideshow tak, jak to mám já např. zde. Upřímně řečeno, nevidím na tom vůbec nic těžkého, ale když je zájem, tak si to ukážeme. A jelikož je to opravdu jednoduché, vezmeme to hopem ;o)

1) Přidejte do svého projektu v RW novou stránku, a to Photo Album.

rw-flash-slideshow1_thumb


2) Přetáhněte do něj svoje nachystané fotografie.

rw-flash-slideshow2_thumb


3) Klikněte na Page Info v pravém horním rohu a následně na ikonu Page.

rw-flash-slideshow3_thumb


4) Pohrajte si s nastavením dle libosti a svých požadavků. Pro inspiraci následují screenshoty s mými konkrétními nastaveními (kliknutím si jednotlivé náhledy zvětšíte).

rw-flash-slideshow4_thumb

rw-flash-slideshow5_thumb

rw-flash-slideshow6_thumb

rw-flash-slideshow7_thumb

rw-flash-slideshow8

|

Integrace Slimbox a Mediabox do Rapid Weaveru

Poprosil mě jeden člověk (ahoj Aleši :o), zda bych mu nenapsal návod na to, jak udělat v RapidWeaveru zobrazení obrázku nebo videa do takového toho „vyjížděcího flashového okna“ (bo jak se to ksakru jmenuje :o)), jak to můžete vidět, když si kliknete třeba na tuhle fotku:

Strom_thumb



Jelikož se okruh uživatelů RW u nás celkem rozšiřuje, řekl jsem si, proč to nehodit rovnou sem na web... třeba se to někomu šikne. Předem malé upozornění – na rovinu přiznávám, že tady těm věcem takřka vůbec nerozumím. Tvorba webů, jejich pozadí a zákoutí je pro mně španělská dědina (zaplaťsatan právě za RapidWeaver), tudíž můj návod bude značně laický. Stručně řečeno, ukážu vám přesně co dělat, kam kliknout, kde co napsat atp., ale neobjasním vám princip těchto vychytávek. Komu to stačí, nechť ráčí číst dál, komu ne, ať se obrátí na strejdu Googla :o)

1) Klikem na ikonu si stáhněte následující zazipovanou složku a rozbalte ji. Měli byste tam vidět dvě složky - slimboxmediabox.

Download_icon
Slimbox-Mediabox


2) Jděte do RapidWeaveru a vyberte si téma. Pro jistotu a možnost bezpečného návratu doporučuji si téma zduplikovat (klik pravým a Duplicate Theme) a pracovat na kopii. Klikněte na zvolené téma znovu pravým klikem a zvolte Reveal Theme Contents in Finder... otevře se vám okno Finderu se složkou Contents.

rw-sb-mb_01


3) V této složce si otevřete podsložku css a do ní nakopírujte stažené složky slimboxmediabox. Okno Finderu můžete zavřít.

rw-sb-mb_02


4) Stáhněte si následující texťák s kódem, rozbalte, otevřete, označte vše a pomocí Cmnd+C zkopírujte do schránky.

Download_icon
Javascript kód


5)
Vraťte se do RW a klikněte v pravém horním rohu na ikonu Page Info. Na vyskočivší kartě zvolte nahoře v hlavní nabídce Header a nyní i ve spodní menší nabídce také položku Header. Vložte zkopírovaný kód (Cmnd+V) do nachystaného pole Custom Header a zavřete okno Page Info. Nyní máme nachystáno vše „k provozu“ a hned to jdeme vyzkoušet.

rw-sb-mb_03


Jeden obrázek


  • Vezměte libovolný obrázek a nachystejte si ho ve dvou velikostech... menší pojmenujeme např. Obrazek1-thumb.jpg a větší Obrazek1-full.jpg.
  • Otevřete znovu kartu Page Info, znovu záložka Header, ale tentokrát jako dolní položku označte Assets.
  • Klikněte na Add Files..., najděte si soubor Obrazek1-full.jpg a přidejte ho.

rw-sb-mb_04

  • Zavřete okno a do RapidWeaveru vložte menší Obrazek1-thumb.jpg na to místo, kde ho chcete mít (např. do těla příspěvku na blogu apod.).
  • Označte si tento náhled a klikněte na ikonku Add link.
  • Rozklikněte roletku URL, zajeďte na položku Asset a najděte Obrazek1-full.jpg. Open in: nastavte na New Window a rozbalte si nabídku Custom Attributes.
  • Poklepejte na slovo external a přepište jej slovem lightbox. Dále můžete poklepat na pravou stranu vedle položky title a napsat název (popis) obrázku, který se bude ve finále ukazovat. Klikněte na Set Link.
rw-sb-mb_05
  • Zvolte Preview stránky a klikem na obrázek zkontrolujte, že vše funguje, jak má.


Sada obrázků


Pokud chcete více obrázků zobrazovat tak, aby se nemuselo vždy kliknout na jeden, pak ho zavřít, kliknout na další, znovu zavřít atp., ale budete chtít, aby se kliklo na jeden a pak už se posouvalo pomocí navigačních prvků nebo šipek, postupujte takřka totožně jako v předchozím návodu k jednomu obrázku až na jeden rozdíl. U všech obrázků jedné sady zvolte za položku rel opět slovo lightbox, ale za ně dejte pomlčku a připište nějaké další slovo, které bude pro všechny obrázky jedné sady stejné. Po rozkliknutí prvního obrázku sady by se pak po najetí kurzorem nad něj měly objevit po bocích navigační prvky (next a prev) a je možno se také mezi obrázky jedné sady pohybovat pomocí šipek na klávesnici.
Poznámka: Jako odkaz nemusíte mít jenom náhledy obrázků, ale samozřejmě třeba i slovo nebo jinou grafiku.

rw-sb-mb_07

rw-sb-mb_08

rw-sb-mb_09


Video


  • Video, které bude mít po kliku „vyjet“ do okna a přehrát se, si opět načtěte mezi Assets do RW.

rw-sb-mb_10

  • Zvolte si objekt, kterým budete na příslušné video odkazovat. Může to být např. slovo nebo otisk obrazovky s oknem videa (nebo cokoliv jiného :o)).
  • Označte tento objekt a klikněte na Add link.
  • Rozklikněte roletku URL, zajeďte na položku Asset a najděte patřičný video-soubor. Open in: nastavte na New Window a rozbalte si nabídku Custom Attributes.
  • Poklepejte na slovo external a přepište jej slovem mediabox. Pokud chcete zobrazovat video v jiné velikosti, než v jaké je originál, napište ještě za slovo mediabox následující sekvenci: [šířkavpixelech výškavpixelech], např. tedy takto: mediabox [800 600].
rw-sb-mb_11
  • Dále můžete poklepat na pravou stranu vedle položky title a napsat název (popis) videa, který se bude ve finále ukazovat. Klikněte na Set Link.
  • Zvolte Preview stránky a zkontrolujte, že vše funguje, jak má.


Stejným způsobem můžete nechat zobrazovat i video, umístěné někde na webu. Místo vybrání souboru z Assets při Add link vložte odkaz na video a dál už postupujte stejně...

rw-sb-mb_13

rw-sb-mb_14



Možná se vám celý tento návod zdá zdlouhavý a složitý, ale uvědomte si, že celou horní půlku uděláte vlastně jenom jednou a druhá půlka v praxi znamená přihození souboru do Assets a napsání pár slov do okna Add link... otázka pár vteřin. Tak hodně štěstí ;o)

|

Uživatelé RapidWeaveru...

...byli jste už u YourHead? Tyto známé tvůrce kvalitních pluginů registruji již delší dobu, ale nějak jsem na ně pozapomněl a dlouho u nich nebyl. Takže když jsem tam tuhle nakoukl, jen jsem mrkal. Osobně sice jejich pluginy (zatim!) pro svoje skromné účely a potřeby nevyužiji, nicméně odvádí určitě velmi dobrou práci. Není to zadarmo, ale myslím, že těch pár amerických šestáků si oprávněně zaslouží.

Co říkáte třeba na takový Stacks? Nebo Accordion či Carousel? A vůbec všechno :o) Tvorba krásných moderních webů je pak radost i pro člověka, který umí v HTML napsat akorát tak break a nerozdělitelnou mezeru (jako já :o)) A nakonec i web YourHead sám o sobě stojí za zhlédnutí... parádní práce!

yourhead

|