WebResponder információs füzetek III. levél szerkesztése 1.
2010.07.20. Balogh Attila http://webrepsonder.net
B EVEZETŐ – CSAK MERT IGEN KÉNYES TÉMA A hírlevél küldő rendszer felhasználó oldalán az egyik legfontosabb modul a levél szerkesztését biztosító blokk. Igazából belecsaphatnánk a közepébe – hogyan készítheted el professzionális leveleidet, azonban ez nem olyan egyszerű. Miért? Azért mert e-mailekről van szó. Mit számít ez? FONTOS, tartsd észben: az e-mailek szerkesztése nagyon-nagyon bonyolult és összetett feladat. Ez azonban ne rémisszen el, lehet ám egyszerűen is csinálni. Javaslom, hogy kezd a legegyszerűbb módszerek alkalmazásával és fokozatosan készíts szebbnél szebb leveleket.
AZ
EG YIK PROBLÉMA
Mi a probléma a levelek szerkesztésével? Magával a szerkesztéssel igazán sok gond nincs, azonban figyelned kell arra az apróságra, hogy az e-maileket nem feltétlen egy böngészőprogrammal olvasgatják, hanem mondjuk e-mail kliens programokkal. Ha ez kínai volt, itt egy kis magyarázat: A böngészőprogramok (Internet Explorer, Mozilla Firefox, Google Chrome, Opera – a teljesség igénye nélkül csupán a Windows rendszerek legnépszerűbb böngészőprogramjait soroltam) arra hivatottak, hogy a weblapokat megjelenítsék a számítógépeden. Más feladatuk lehet ez mellett, de ez az elsődleges funkciójuk, ezért találták ki őket, ezért fejlesztik őket. Érdekes, hogy egy-egy weboldal másképpen jelenik meg attól függően, hogy éppen milyen böngészőprogrammal nézzük. Ez azért van, mert a webes szabványokat itt-ott nem veszik figyelembe a böngészőprogramok fejlesztése során. Ha valaha foglalkoztál komolyabban weboldalak fejlesztésével, akkor nem kell neked bemutatnom azt a káoszt, ami ezen a területen jellemző. Manapság azért igyekeznek a szabványok követésére – de régebbi verziójú böngészők alá katasztrófa szabványos weboldalt készíteni úgy, hogy az a mai új böngészőkben is jól jelenjen meg. Nincs azonban lehetetlen, és ez igazán nem a te gondod. Miért írom le mégis neked?
Érzékeled ennek a veszélyét? Ha az így elkészített leveleidet egy webes alapú rendszerrel olvassák (gmail, freemail, citromail, stb…) – azaz olyan e-mail klienssel, ami egy böngészőprogramban eleve egy weboldalba ágyazott rendszerként funkcionál, jó eséllyel úgy kapják meg a leveleidet, ahogyan azokat te elküldted. Ha azonban egy igazi levelezőklienssel (Outlook, Outlook Express, Mozilla Thunderbird, Windows Mail, stb…), azaz olyan programmal olvassák a leveleidet, amelyek nem egy weboldalba ágyazva működnek, hanem a számítógépekre
Oldal:
Márpedig ha színes, képekkel tarkított ún. HTML tartalmú e-maileket készítesz, akkor lényegében nem csinálsz mást, csak speciális weboldalakat, melyeken a weboldalak megjelenítéséhez használt szabványokat alkalmazol.
2
Képzeld csak el – ha azoknál a programoknál gondot okoz a weboldalak megjelenítése, amiket eleve ezért fejlesztettek, akkor mekkora gondot okozhat egy olyan programnak a webes tartalom megjelenítése, amit nem is erre találtak ki!
telepített külön levelező programok, hát sok magától értetődő weboldal formázási lehetőséggel nem fognak tudni mit kezdeni. A megálmodott leveleid véletlenül sem úgy fognak kinézni ezeknél a programoknál, ahogy azt szeretnéd. Ez a téma pár száz oldalt kitöltene – folyamatosan fogsz kapni tippeket, ötleteket és tanácsokat, melyek segítségével a lehető legtöbb kliens programmal kompatibilis formátumú leveleket tudsz készíteni. Addig két tipp: 1 – ne használj színes, képekkel illusztrált leveleket (hát ez nem biztos, hogy elég kompromisszumos megoldásnak tűnik a számodra, ezért nézz rá a 2. pontra). 2 – használj sablonokat. Engedd meg, hogy a munka nehezét elvégezzük helyetted. Ha mindenáron színes leveleket akarsz küldeni, készítünk neked sablonokat – amikben csupán a szöveget kell kicserélned és már küldheted is. A sablonok használatát hamarosan megmutatom, de előbb még nézzük meg a többi fejtörést okozó pontot is.
A
MÁSIK PROBLÉMA
Még továbbra is a képeknél maradva: ha meg is oldottad a képek leveledbe történő beszerkesztését, akad itt egy kis gond a megjelenítésnél. A levelezőprogramok alap esetben nem töltik le a levelekhez kapcsolt képi illusztrációkat. A képek letöltéséhez mindig a felhasználó jóváhagyása szükséges. Amíg pedig nincs kép a leveledben, addig az nem fog sehogy sem mutatni, ha egyszer képek felhasználásával tervezted meg az arculatot. A legtöbb levelező szolgáltatás erre azt mondja – ez van, fogadd el. Pedig van megoldás a problémára, és amire létezik megoldás, azt nyugodtan ránk lehet bízni. A WebResponderbe feltöltött és beillesztett képeid mindig meg fognak jelenni a leveleidben.
A másik ok, amiért ezt a megoldást nem nagyon támogatják a WebResponderen kívül: a nagy képek drasztikusan lelassítják az e-mail küldés folyamatát. Készek
Oldal:
http://www.dreamstime.com/ http://www.shutterstock.com/ http://www.pixmac.hu/ http://www.freedigitalphotos.net/ http://www.sxc.hu/ http://www.free-stockphotos.com/ http://www.everystockphoto.com/ http://freerangestock.com/ http://www.public-domain-photos.com/
3
Máshol ez miért nincs így? Sok veszéllyel jár, mert a képek vírusokat hordozhatnak, amelyek rongálhatják rendszerünket, és ügyfeleid számítógépeit. A saját érdekedben légy körültekintő, amikor a leveleidhez gyűjtesz képeket. Tartsd tiszteletben a szerzői jogokat és hivatalos megosztó helyekről, gyűjteményekből szerezz képeket magadnak. Ha igazán profi leveleket szeretnél, érdemes befektetni az arculatba. Néhány oldal, ahol szerencsét próbálhatsz:
vagyunk a kompromisszumra – biztosítjuk a képek „beégetését” leveleidbe, azonban korlátozzuk a feltölthető képek méretét 1/2 MB-ban (500 KB).
A
HA R M A DI K P R OBLÉM A
A SPAM. Tudom, hogy nem spam a leveled – bízom benned, a szándékod tisztaságába. Az én leveleim sem spamek – mégsem jutnak el mindenhova. Az ingyenes e-mail szolgáltatók nagy része igen szigorú policy mellett működik – másképpen képtelenek kordában tartani azt a spam áradatot, amit pont a felhasználóiknak köszönhetnek. Sokan csak azért regisztrálnak ingyenes postafiókot maguknak, hogy legyen egy címük, amivel különböző kétes forrású weblapokon történő regisztrációknál használhatnak. Ez pedig őrületes nagy spam –áradatot zúdít a szolgáltatókra. Ez pedig visszaüt rád, ránk is, mikor ügyfeleinket próbáljuk elérni leveleinkkel. Egyszerűen spam gyanújával a) vagy spam mappába kerül a levél, b) vagy el sem érkezik a címzetthez A bajok nagy részét kiküszöbölheted, ha szabványos leveleket készítesz. Ehhez azonban ismerned kell a HTML nyelvet, vagy fel kell fogadj valakit, aki ismeri helyetted. Tudunk ennél azért barátságosabb megoldást is: használd sablonjainkat (ha még nem mondtam volna).
A LEVÉL SZERKESZTÉSE Elnézést a hosszabb bevezetőért – főleg ha már tisztában voltál mindezzel. Lássuk, hogyan készítheted el leveleidet! Kattints a Levelek menüpontra, majd az Új levél gombra (1. ábra).
Ha saját levelet készítesz, nagyon fontos, hogy először gépeld be a leveled szövegét – csak a már begépelt szöveget van módodban megformázni. A szövegszerkesztő legfőbb részeit a 2. ábra mutatja:
Oldal:
Az új levél szövegszerkesztőjénél alapvetően két lehetőséged van: vagy készítesz egy saját levelet, vagy felhasználod beépített sablonjainkat.
4
1. ÁBRA
2. ÁBRA
A szerkesztő legfelső része az eszköztár – itt kapnak helyet a formázáshoz használható eszközeid, apró ikonok formájában. Az eszköztár alatt a szövegterület – ide kell beírnod a leveled szövegét. FONTOS: 60 perces session idő van beállítva a szerveren. Ez azt jelenti, ha nincs aktivitás az oldalon, 60 perc után kijelentkeztet a rendszer. A leveled szövegét úgy írd meg, hogy a 60 percbe beleférj formázásokkal együtt. Ha sokat keresgéled a szavakat, érdemes a leveled szövegét egy jegyzettömbben elkészítned, vagy bármilyen más szövegszerkesztőben – és a kész szöveget egyszerre bemásolhatod. Így 59 és fél perced marad a formázásra. Miután a szöveged kész, a formázandó részeket ki kell jelölnöd – a legtöbben ezt úgy teszik, hogy az egerük bal gombját nyomva tartva „végigsöpörnek” azokon a szövegrészeken, amit kijelölnének. Ha egy szóra duplán rákattintasz, akkor az egész szót kijelölheted. A kijelölt szövegrészek inverzben (kék háttérrel, világos karakterszínnel) jelennek meg. Az inverzben lévő szövegrészre lesznek érvényesek azok a formázási és egyéb parancsok, amelyeket az eszköztár gombjaira kattintva adsz ki. Melyek lehetnek ezek a parancsok?
A Z ESZKÖZTÁR GOMBJAI Van néhány gomb, melyeket nem használhatsz, csak akkor, ha tényleg olyan szövegrészt jelöltél ki, amelyre érvényesíthető az adott parancs. Ezért ha a te szövegszerkesztődben ezek a gombok inaktívak (halványabban jelennek meg és nem reagálnak a kattintásra) ne aggódj, használatuk előtt ki kell jelölj valamit a szövegben, amire érvényesítheted a formázási parancsokat.
3. ÁBRA
Ne bonyolítsd túl – ne tegyél túl sok hivatkozást a leveledbe. Ha egy blogbejegyzésről értesítenéd a nagyközönséget, akkor annak a linkjét, ha egy weboldal
Oldal:
Az eszköztár első két gombjával kezelheted a linkeket. Az elsővel létrehozhatod a hiperhivatkozásokat, a másodikkal törölheted a meglévőket (3. ábra).
5
H IVATKOZÁSOK ( LINKEK )
megjelenéséről, akkor annak a linkjét, ha egy akcióról, akkor a részleteket tartalmazó oldal linkjét. A lényeg, hogy max. 3-5 linket helyezz el a leveledben, egyébként sok levelező rendszer spamnek fogja tekinteni a leveledet.
L I NK
ELHELY EZ ÉS E
Miután kijelölted azt a szövegrészt, amit hivatkozásként szeretnél használni, kattints a link létrehozás gombra – egy új ablak fog megjelenni, ahol a link tulajdonságait állíthatod be (4. ábra). Ne mélyedj nagyon bele, két lehetőség közül választhatsz: 1. 2.
egy létező webcímet szeretnél megadni a levélben egy fájl (pdf, word, vagy más szöveges / office dokumentum vagy tömörített állomány letöltését szeretnéd biztosítani a levél olvasóinak.
Ha egy létező webcímet linkelnél be a levélbe, azt a Link URL sorában lévő beviteli mezőbe kell beírnod, pl.: http://webresponder.net (4. ábra). A webcím beírása után érdemes a Cél beállítása, ez legyen „Megnyitás új ablakban (_blank)”. Ha webes levelezőben olvassák a leveledet és kattintanak a linkre, akkor az egy új böngészőablakban fog megjelenni – egyébként a levelező böngészőablakába töltené a hivatkozott weblapot, ami idegesítő lenne. Miután ezt a két dolgot beállítottad, kattints a Beszúr gombra - a hivatkozásod kész lett!
4. ÁBRA
Oldal:
6
A hivatkozás sikeres beszúrását a linkekre jellemző kék kiemeléssel és aláhúzással jelzi a rendszer (5. ábra).
5. ÁBRA
Ha egy fájl letöltését akarod biztosítani, akkor is a link beszúrása ikonra kell kattintanod, csak a felugró ablakban nem egy weblap címét kell megadnod, hanem kattints a beviteli mező melletti Böngészés gombra (6. ábra).
6. ÁBRA
A tallózásra – dokumentumok feltöltésére egy újabb ablakban van lehetőséged (7. ábra). Ha most használod először ezt a funkciót, akkor még nyilván nincs semmi, amit belinkelhetnék a leveledbe. Egy .htaccess állomány éktelenkedik csupán a tallózó ablakban. Ez egy rendszerállomány, ne töröld, és ne linkeld be sehova. Új állomány feltöltéséhez kattints a Feltöltés lapfülre!
7. ÁBRA
Oldal:
7
A feltöltés lapfülön lehetőséged van bármennyi állomány feltöltésére – egy 100MBos kvóta áll rendelkezésedre. Annyi megkötés van csupán, hogy egy fájl mérete sem haladhatja meg a 2MB-ot. A feltölteni kívánt fájl kiválasztáshoz kattints a Tallózás gombra (8. ábra).
8. ÁBRA
A tallózás gombra kattintás után saját számítógéped fájlböngészőjét használva kell kiválasztanod azt a fájlt, amit fel szeretnél tölteni a WebResponder szerverére.
A 9. ábra azt mutatja, hogy én két PDF állományt választottam ki – ezeket szeretném a leveleimbe belinkelni, ezeket szeretném feltölteni a szerverre. Miután te is kiválasztottad a feltöltendő állományokat, kattints a Feltöltés gombra!
9. ÁBRA
A feltöltés alatt várj türelmesen mindaddig, amíg zöld sávban nem tájékoztat a program a feltöltés sikerességéről. Ezt követően kattints a Tallózás lapfülre (10. ábra).
10. ÁBRA
Oldal:
8
A tallózás lapon már ott szerepel az előbb feltöltött két PDF állomány is (11. ábra).
11. ÁBRA
Bármelyikre rákattintva annak a hivatkozása bekerül a „Hivatkozás beszúrása / módosítása” nevű ablak Link URL mezőjébe (12. ábra). Kész vagy, kattints a Beszúr gombra, és a hivatkozásod bekerül a kijelölt szövegrészhez.
12. ÁBRA
K A R A KT ER EK
FOR M ÁZ Á S A
Az eszköztár további gombjai a kijelölt karakterek / szavak / nagyobb szövegrészek formázását teszik lehetővé. A 13. ábra ikonjai balról: 1. 2. 3. 4. 5. 6.
Vastag karakterek Dőlt karakterek Aláhúzott karakterek Áthúzott karakterek Karakter színének megadása Karakter kiemelésének megadása
13. ÁBRA
Ne feledd, ezek a formázások a kijelölt szövegrészeken érvényesülnek. Ha nem jelölsz ki előzőleg semmit, akkor túl látványos eredménye nem lesz, ha ezekre a gombokra kattintasz.
F ELS OR OLÁ S OK
ÉS BEKEZ DÉS EK
Az eszköztár újabb csoportja – balról jobbra haladva a 14. ábra alapján:
9
Egyszerű lista (felsorolás) Számozott lista (felsorolás) Bekezdés balra igazítása Bekezdés középre igazítása Bekezdés jobbra igazítása Bekezdés sorkizárt igazítása
14. ÁBRA
A felsorolás beállításához az egyes lista elemeket külön sorokba kell tenned (Enter leütésével) ahhoz, hogy a lista megfelelő legyen.
T OVÁ BBI
FOR M Á Z Á S I LEH ET ŐS ÉGEK
A 15. ábrán látható 3 legördülő lista funkciója: 1.
Előre formázott szövegegységek – itt a kijelölt szöveghez előre definiált formátumot rendelhetsz. Ilyen a szimpla bekezdés formátuma (Paragraph), a cím formátuma (Address), ami lényegében dőlt karakterekkel megformázott
Oldal:
1. 2. 3. 4. 5. 6.
2. 3.
szövegrészt jelent. A Preformatted formátum egységes széles karaktereket kölcsönöz a szövegednek, mintha azt írógéppel írták volna. A Heading formátumok pedig különböző szintű címsorok formázását teszik lehetővé. eading1 a legfelső, Heading6 a legalsó szint. A Font family legördülő listából a kijelölt szövegrészhez más karaktercsaládot rendelhetsz. A Font size opcióival pedig növelheted / csökkentheted a karakterek méretét.
15. ÁBRA
Egy kijelölt szövegrészhez egyszerre többféle formátumot is rendelhetsz – megváltoztatod a karakterek színét és méretét is mondjuk.
K ÉP EK
BEI LLES Z T ÉS E
Elég fontos része ez a levél szerkesztésének. A 16. ábra ikonjára kattintva szúrhatsz be képeket a leveledbe. A képek beszúrásának a folyamata megegyezik a linkek (hivatkozások) elkészítésének a folyamatával. Annyi különbség van csupán, hogy itt nem kell kijelölnöd semmit – hiszen egy képet illesztesz be a levél szövegei közzé.
16. ÁBRA
F OR R Á S -
ÉS ELŐNÉZ ET
A 17. ábrán két ikont látsz – az elsőre kattintva a leveled HTML forráskódját szerkesztheted. Nem javaslom, ha nem ismered a HTML nyelvet legalább középhaladó szinten. Ha hibás szintaktikát alkalmazol, akkor azt a rendszer egyszerűen törli a forrásból, kezdheted elölről az egészet.
17. ÁBRA
A második ikon az előnézet – ha rákattintasz, láthatod a leveledet abban a formában, ahogy az olvasóid is látni fogják (jó eséllyel).
Az eszköztár felső sorának utolsó ikonjára kattintva ( ) lehetőséged van előre elkészített levélsablonjainkat használni. Eben az esetben a leveled szövegét nem kell előre begépelned – azt a sablon kiválasztása után kell elhelyezned a leveled megfelelő részein. A sablon használata nem köti meg a kezed – bármelyik részét módosíthatod / cserélheted. A fő funkciója az, hogy egy kiindulópontot kapj a leveleid elkészítéséhez.
10
HA S Z NÁ LA T A
Oldal:
S A BLONOK
