Skvělá zpráva pro uživatele RapidWeaveru!
MacHeist s RapidWeaverem!!!
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.
Více na stránkách
projektu MacHeist.
Tip pro RapidWeaver – video a animace
Integrace free mp3 přehrávače do RapidWeaveru
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.
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.
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.
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).
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
PrettyPhoto
RapidCart – funkční e-shop v RapidWeaveru během chvilky
Accordion opět na scéně
Odkazy zase v novém :o)
Výborná zpráva pro české uživatele RapidWeaveru!
SimpleViewer - tvorba vkusné flashové fotogalerie rychle a zdarma
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.
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.
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.
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.
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)
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...
Tip pro RapidWeaver – zápis kódu
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.
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).
Nebojte se snippetů v RapidWeaveru...
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...
Tip pro RapidWeaver – automatické přizpůsobení obrázku
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...
Maličkost v RapidWeaveru – Media Inspector
Flash Slideshow v RapidWeaveru
1) Přidejte do svého projektu v RW novou stránku, a to Photo Album.
2) Přetáhněte do něj svoje
nachystané fotografie.
3) Klikněte na Page
Info v pravém horním rohu
a následně na ikonu Page.
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).
Integrace Slimbox a Mediabox do Rapid Weaveru
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 -
slimbox
a 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.
3) V této složce si otevřete
podsložku css a do ní
nakopírujte stažené složky
slimbox
a mediabox. Okno Finderu můžete
zavřít.
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.
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.
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.
- 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.
- 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.
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.
- 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].
- 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ě...
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...
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!











