Bevezető gondolatok. Tartalomjegyzék. Kellemes olvasást kívánunk!

Átírás

1

2 Bevezető gondolatok A tavasz elérkeztével megérkezett a második szám is. Kaptunk visszajelzéseket, hogy sokaknak tetszett a Kow-val készült interjú, ezért ezt az interjúztatást nem is kívánjuk megszakítani. E hónapban szintén a terítékre kerül a Flash, most egy olyan cikket állítotottunk össze, amely a sitebuildhez is kötődik, de mégis Flash. :) Kellemes olvasást kívánunk! Tartalomjegyzék 2-5. oldal - SIFR - Egyedi betűtípus weboldalunkon 6-8. oldal - Sitebuilder interjú - Harder oldal - jquery qtip 1. oldal

3 SIFR - Egyedi betűtípus weboldalunkon Geri Cufon cikkére ( reagálnék ezen írásomban. A SIFR (Scalable Inman Flash Replacement) flash és javascript segítségével a kívánt szövegrészleteket (leggyakrabban a címeket) cseréli le nem websafe betűtípusokra. Igaz ugyan, hogy nagyon sok szövegre nem szabad alkalmazni egy oldalon belül, mert jelentősen lelassítja a betöltést, de ugyan ez igaz a Cufon-ra is. A megoldás operációs rendszer és böngészőfüggetlen ezen kívül a Firefox AdBlock, valamint FlashBlock kiegészítőjével is jól megfér. Tipográfia tuning Hogyan is kezdjünk hozzá? Az alábbi oldalon töltsük le a Sifr 3 nekünk tetsző verzióját: (hozzáteszem 2008 vége óta nem jött ki új verzió), vagy pedig honlapunkról a legújabbat ( uploads/downloads/2010/04/sifr3-r436.zip). Tartalmaz egy CSS, Demo, Flash és egy js mappát. A demo-t nem tudjuk megnézni offline, csak ha feltöltjük egy webszerverre, vagy egy helyi php futtató környezetet használunk (MAMP, XAMP, WAMP, stb.). Ez a Flash biztonsági tiltásai miatt van. A betűtípus módosításához egyszerűen csak a Flash mappában található sifr.fla-t kell elindítanunk. Elegendő hozzá csupán az Adobe Flash 8 is. Én Adobe Flash CS4-el mutatom be a továbbiakat. Megnyitás után a Stage-n lévő Movie Clipünkre kattintsunk duplán, ezzel elérhető lesz számunkra az a szövegbevitel mező, ami tulajdonképpen az egész rendszer lelke. A jobb oldali panelen menjünk a Character Embedding pontra. Itt módosíthatjuk azt, hogy mely karakterkészletek kerüljenek beágyazásra. Alapértelmezés szerint az Uppercase, Lowecase, Numerals és a Punctuation van bejelölve. Ha kicsit magyarosabb szövegre szeretnénk Sifr-t használni, akkor be kell ágyaznunk az ékezetes betűket is. Az alábbi kép szemlélteti, hogy miket célszerű még pluszban hozzáadni. 2. oldal

4 Azonban ha kicsit próbálgatni szeretnénk az Options.as-ben lévő lehetőségeket, akkor az alábbi lista nyújthat egy kis segítséget: domains(array): A tömb tartalmazza azokat a domain neveket, amelyeken a sifr lerenderelheti a szöveget. Hotlinking elleni védelemre lehet használni. Használd a * szimbólumot, hogy az összes domainnek engedélyezd a megjelenítést. Használhatsz wild cardot is, hogy az aldomaineket is engedélyezd, külön-külön kell őket megadni. Ezek után a Character Embedding Menüpont felett a Family melletti legördülő listából választhatjuk ki azt a betűtípust, amelyet a weboldalunkon is viszont szeretnénk látni. Pédául: sifr.domains = [ *.example, example. com ] [ *example.com, example.com ];. defaultkerning(boolean) Engedélyezve van-e a Betűköz, ami kliens oldalról felülírható. defaultsharpness(number) Alapértelmezett élesség, ami kliens oldalról felülírható. defaultthickness(number) Alapértelmezett vastagság, ami kliens oldalról felülírható. defaultopacity(number) Alapértelmezett átlátszóság, ami kliens oldalról felülírható. A Flashes részével nincs is más dolgunk, nyugodtan lefordíthatjuk az elkészült fájlt. defaultblendmode (Number) Alapértelmezett érték, amely kliens oldalról felülírható. enforcedgridfittype (String) Felülírja a rács illeszkedési típusát a kliens oldalon. preserveantialias (Boolean) Ha az értéke igaz, akkor a sifr nem írja felül az antialiasing-ot a Flash IDE-ben miközben exportál. A vastagság és az élesség szintén nem oldal

5 lesznek hatással. conditionalantialias (Boolean) Ha az értéke true, akkor a sifr letiltja az antialiasing -ot, ha a betű mérete nagyobb, mint 48. Ez a beállítás független a preserveantialias -tól. antialiastype (String) Megadja az anti aliasing típusát. Alapértelmezett az Advanced. filters (Array) Flash szűrők adhatóak a tömbhöz, és ez hatással lesz a szövegmezőre. CSS adható meg a Flash mozin belül, a sifr. styles.parsecss() segítségével, ami a CSS kódot tartalmazza az argumentumában. A HTML oldal beállítása Ahhoz, hogy végre látható eredményt produkáljon a sifr, a következő sorokat kell beilleszteni az oldalunk <head></head> része közé: Az első részt gondolom nem kell magyarázni, egyszerűen betöltjük a sifr-t az oldalba, valamint implementáljuk az alap css fájlt. <script src= sifr.js type= text/javascript ></ script> Megmondjuk a scriptnek, hogy hol találja a betűtípus swf-ünket. <script type= text/javascript >// <![CDATA[ var site_title = { src: betűtípus.swf }; Aktiváljuk a site_title parancsot, ez a név tetszőleges lehet. A selector: segítségével adhatjuk meg melyik html elemet szeretnénk, hogy lecseréljen. Ez lehet akár class név is. wmode: -al állítjuk be, hogy a flash háttere átlátszó legyen, valamint a css: segítségével tudjuk formázni az egyedi szövegünket (szín, méret, igazítás, stb.). Ha szükséges, akkor a hover-nek is tudunk külön színt adni (itt van külön a kódrészlet hozzá: a:hover : { color : #4F4F4F }). sifr.replace(site_title, { selector: h1, wmode: transparent, css: [.sifr-root{color:#ffffff; font-size:50px;} ] }); // ]]></script> CSS styling Abban az esetben, ha valamilyen oknál fogva nem jelenik meg a sifr szövegünk (nincs flash telepítve, vagy a javascript megjelenítés ki van kapcsolva), akkor az alapértelmezett betűtípussal fog megjelenni a HTML anyagunk. Ennek a stílusát a sifr.css -ben módosíthatjuk..sifr-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } Az alapértelmezett megjelenést el kell tüntetnünk ahhoz, hogy csupán csak a flash szöveg érvényesüljön. sifr.activate(site_title); 4. oldal

6 .sifr-alternate { display:block; height:0; left:0; overflow:hidden; position:absolute; top:0; width:0; } Megjegyzem, hogy az egész sifr.css fájlt ágyazzuk be, ugyanis a két kódrészleten kívül még van 1-2, ami szintén fontos a jó működéshez. Kísérletezzünk ezek tulajdonságaival vele bátran! Írta: Opauszki Tibor 5. oldal

7 Sitebuilder interjú - Harder Ígéretünkhöz híven ma Harderrel beszélgetünk, aki a tutorial.hu oldalalapító tulajdonosa. Természetesen magáról a lapról is tettünk fel kérdéseket, azonban ez elhanyagolható lett volna, hiszen nem sok kérdés van, amire ott nem található válasz. - Mióta foglalkozol weboldalkészítéssel? - Hobbi szinten kb. 12 évvel ezelőtt kezdtem el foglalkozni vele, hivatásszerűen nagyjából 5. éve élek meg belőle. - Akkoriban milyen gépekkel dolgoztál? - Emlékeim szerint egy 200Mhz-es Cyrix processzoros, 64MB ram-os, 14 colos monitorral szerelt gép volt az első, amivel honlapot készítettem. - Szerinted akkoriban, vagy most a nagyobb kihívás weboldalakat alkotni? - Most sokkal nagyobb kihívásnak tartom, egyrészt többet és jobbat igényelnek a megrendelők, másrészt a megoldásokat tekintve sokkal több lehetőség között kell megtalálni az éppen megfelelőt. - Az első oldalad óta nagyjából mennyi weboldalt kódoltál készre az alapoktól? - Pontos számot nem tudnék mondani, de 200 felett van ma már. - A tutorial.hu-n sok nyílt forrású tartalomkezelőhöz is található segédlet. Így felmerül a kérdés, hogy használsz-e open source CMS-t? - Igen, jelenleg a Wordpress a favorit ilyen téren nálam, de korábban használtam Joomla-t és Drupal-t is. Oka a rengeteg plugin, hatalmas közösség és hogy a többi rendszerhez képest még egy viszonylag rugalmas, könnyen alakítható és könnyen kezelhető CMS-nek tartom. A kezdőknek kezdésképpen mindenképp azt javasolnám, hogy kicsit olvasgassák át a magyar közösség fórumát, keressenek az interneten Wordpress-vel kapcsolatos leírásokat, ahol bemutatják a benne rejlő képességeket (hisz messze többre használható már, mint blogolásra) és utána döntsenek, hogy milyen plugineket, skineket, megoldásokat fognak használni. Itt megjegyezném, hogy a saját fejlesztésű és a nyílt forrású vonal is jó az összes előnyével és hátrányával együtt. Egyik sem tökéletes megoldás. Megfelelő mérlegelés után mindig az adott feladathoz kell kiválasztani az ideális eszközt. - Neked mi a mérce, ha a kód kinézetéről van szó? - Az alap, hogy legyen normálisan tördelt és tiszta a kód. Szeretem, ha nincs tele hack-ekkel a böngészők miatt. Egyébként meg elég rugalmasan állok e témához, rengeteget dolgoztam csapatban (más-más csapatban is) és megszoktam, hogy a különböző kollegák kicsit eltérő stílusban kódolnak. 6. oldal

8 - Mennyi időbe telik neked átlagosan lekódolni egy oldalt? - Ez nagyon változó, hisz nem mindegy, milyen oldalról beszélünk. A feladat bonyolultságától függően ez egy pár órás munkától kezdve akár 2-3 heti kódolásig is tarthat. Nem mernék ennél szűkebb intervallumot mondani ennyi infó birtokában. - Van olyan ismertetőjeled a kódban, amire ha ránéz egy hozzá értő, akkor rögtön tudja, hogy te írtad? - Nem igazán használok ilyen ismertetőjelet, legfeljebb elvétve a CSS-ben helyezem el comment formájában, hogy én csináltam. - Save IE, or don t save IE? Azaz Firefox, vagy Explorer, esetleg egy harmadik? - 99%-ban Firefox-t használok, a maradék 1% eloszlik az IE6-8, Safari, Opera, Chrome között, mikor tesztelek. - Frusztrál téged, hogy több böngészőre is kell optimalizálni? - Nem szeretem, de már megszoktam és nem hiszem, hogy a jövőben ez sokat változna. A kódot úgy írom, hogy eleve kizárom a bug-ok legtöbbjét. Sokat nem idegesítem magam miatta, nagyon ritka hogy 1-1 böngésző hiba miatt ideges legyek. Akkor is csak azért, mert általában szorít a határidő. Az IE6 kihullását viszont már várom. - Külön grafikussal dolgozol, vagy saját magad készíted a design tervet és a grafikákat is? - Legtöbb esetben én csinálom a grafikát is. - Mik az előnyei annak, hogy nem alkalmazol külső grafikust? - Olcsóbb és élvezem is, ráadásul már tervezés során tudom, hogy mely részt miként fogom felépíteni, mi szükséges ahhoz, hogy egy a látogatók számára is barátságos, könnyen használható honlap készüljön, ami még a keresőoptimalizálás kapcsán fellépő elvárásoknak is megfelel. - Te külsős grafikussal is dolgozol együtt. Miként látod, jól működtök együtt? - A külső grafikus esetemben lehetnek munkahelyi kollégák, akikkel mindig jól együtt tudtam dolgozni. Más esetben olyan sitebuild munkára kérnek fel, ahol a grafika már adott, ilyenkor a kapott PSD-ből dolgozom, nem szokott problémát okozni, a grafikussal nagyon ritkán kerülök közvetlen kapcsolatba. Ha esetleg szükséges valamiféle módosítás, akkor a megrendelővel történő egyeztetés után legtöbbször én csinálom meg. - Tudnál javaslatokat adni, akik szintén grafikusokkal dolgoznak, hogy miként rázódhatnak jobban össze? - Első és legfontosabb: beszéljenek egymással. Mondják el, hogy esetleg a másik megoldása miatt neki milyen problémái lehetnek. A sitebuilder is tehet javaslatot, hogy pár részletnél mire érdemes figyelni, mi szolgálja a honlap és a megrendelő érdekeit (ez lehet egy akár ismételhető képrészlet, ami miatt jelentősen kevesebb a képletöltés és gyorsul az oldal). Sokat segít, ha mind a grafikusnak, mind pedig a sitebuildernek van némi rálátása a másik területére. - Véleményed szerint milyen egészségi veszélyei vannak ennek a munkának? Gondolok itt az ergonómiai hiányosságokból adódó problémákra. - Egyrészt mozgásszervi problémák jutnak eszembe, pl. nekem is gyakran fáj a kezem a rengeteg gépeléstől. Van ismerős, aki hátproblémával küzd, talán ez az, ami még gyakrabban előfordul oldal

9 A másik általános veszély szerintem az elhízás, nagyon könnyen elszalad az emberrel a ló, hisz napi 8-12 órát ül gép előtt, sokan éjszaka is aktívak és nagyon oda kellene figyelni az étkezésekre. - Milyen munkakörnyezetben dolgozol? - Itthon egy külön szoba van, amit a munkához rendeztem be, két hatalmas asztallal, nagy monitorral, gyors géppel stb erre szükség is van, hisz általában akkor vagyok a gép előtt, amikor a családom már alszik, nem szeretném őket zavarni. A munkahelyemen egy nagyon kellemes zöldövezeti részen, 4 másik kollégámmal dolgozok egy szobában, aminek jelenleg a legnagyobb előnyét a lég kondiban látjuk. :) Egyébként meg rendelkezésre áll minden szükséges eszköz, ami kellhet a munkához. - Milyen online területen kutatgatnál, melyik webes fejlesztési területbe ásnád be magad alaposan, ha hirtelen tartósan megnőne a szabadidőd és alig 1-2 órát kellene munkával töltened egy nap? - Nagyon sok szabadidővel leginkább az alábbi területek érdekelnének: (online) marketing, kézi rajzolás és a 3D modellezés. jobbára fórumokon írogattam és az idő teltével elkezdem gyűjteni a visszatérő kérdésekre adott válaszokat, majd ezeket később honlap formájában kezdem el publikálni. Így indult az oldal, nonprofit formáját azóta is őrzi. Ma már sajnos jóval kevesebb szabadidőm jut rá, sok segítséget jelent azoknak a szerkesztőknek és látogatóknak a munkája, akik önzetlenül küldenek be leírásokat és segítenek másoknak a kérdések megválaszolásában. Ezúton is köszönöm nekik mindazt, amit a lapért tettek. - Interjúnk végén lehetőséget adunk a megkérdezetteknek, hogy bemutathassák szolgáltatásaikat 1-2 mondatban. - Jelenleg nincs olyan lap, ahol a szolgáltatásaimat reklámoznám, az ügyfelek legtöbbször ajánlás után találnak meg holnapkészítéssel kapcsolatban, amiből tervezést, a grafikai tervezést, a sitebuildet és időnként a keresőoptimalizálást illetve a tanácsadást szoktam én csinálni. A programozási feladatokat mindig profi programozó végzi el. A következő hónapban egy olyan személyiséget kérdezünk, akit sok SEO-val foglalkozó ismer. Többet nem is mondok róla, mert a végén kiderül, hogy ki ő. - Tegyél fel egy kérdést az utánad következőnek. - Hogy és hol látod magad mondjuk 30 év múlva, mivel fogsz foglalkozni? - Sokan tudják rólad, hogy a tutorial.hu oldal üzemeltetője vagy. Mesélnél egy kicsit az oldalról azok számára, akik esetleg még nem ismernék? - A tutorial.hu-t évekkel ezelőtt kezdtem el csinálni hobbiból, hogy segítséget tudjak nyújtani azoknak a fiataloknak, akik most ismerkednek a grafika, a holnapkészítés területével. Az elején oldal

10 jquery qtip A qtip egy Jquery-ben íródott tooltip script, amellyel lehetőségünk van a képekhez, linkekhez tartozó tooltip-jeink szebb külsőben való megjelentetésére. Ezen kívül még számos más dologra jó, hiszen lehetőségünk van vele linkek, youtube videók megnyitására is. Tekintsd meg az általam összerakott bemutató oldalt ( uploads/qtip/). Rengeteg helyet takaríthatunk meg a használatával, gondoljunk bele, hogy akár a keresőt, vagy a feliratkozó formunkat is tálalhatjuk ebben a formában. Vágjunk bele A scriptet Craig Thompson írja, és fejleszti, ebből fakadóan nem sűrűn jönnek ki hozzá a frissítések. Az 1.3-as, vagy a fölötti verziójú jquery könyvtárat ajánlja hozzá a jelentős gyorsaságnövekedés miatt, azonban az fölötti verziókkal is működik. Telepítése A folyamata viszonylag egyszerűnek mondható, először is meg kell hívnunk a <head> tag-ben a jquery javascript fájlját. <script src= /projects/qtip/js/jquery min. js type= text/javascript ></script> Az oldal ajánlása alapján az include-okat célszerű a tartalom után, a </body> lezáró tag előtt megejteni. Én a jquery meghívást mégis a head tagbe tettem, viszont a qtip fájl behívást mindenképpen a body tag végén kell megtenni. Ha nem így csináljuk, akkor nem fog működni a script. <script src= /projects/qtip/js/jquery.qtip min.js type= text/javascript ></script> A linkek title tagjainak qtip-ben való megjelentetéséhez használjuk a következő kódot, ezt szintén tegyük a dokumentumunk végére: <script class= example type= text/javascript >// <![CDATA[ // A tooltipek létrehozása a dokumentum betöltésekor $(document).ready(function() { // A content attribútum nélkül a könyvtár alapértelmezés szerint minden elem title attribútumát használja. $( #content a[href][title] ).qtip({ content: { text: false // Használja minden elem title attribútumát (true esetén lesz bekapc solva) }, style: red // Adjunk neki design-t. }); // Megjegyzés: Kihagyhatod az összes beállítást és egyszerűen kicserélheted az alap tooltipeket a qtip-re (vedd ki a kommentezést): 9. oldal

11 // $( #content a[href] ).qtip(); }); // ]]></script> Styling Alapértelmezés szerint 6-féle design közül választhatunk (Cream, Dark, Green, Light, Red, Blue), de természetesen saját magunk is készíthetünk egyedi kinézetet. Ha azt szeretnénk, hogy minden egyes tooltip a saját egyedi kinézetünket használja, akkor szükségünk lesz globális stílusutasítások használatára. Ha csak egy adott fajta tooltip-re szeretnénk használni, akkor azt elég csupán az adott tooltip javascript-jében a style résznél megtenni. Globális stílus létrehozása kommentárral együtt: $.fn.qtip.styles.mystyle = { // Adjunk nevet a sítlusnak width: 200, //szélesség background: #A2D959, //háttérszín color: black, //betűszín textalign: center, //tartalom igazítása border: { //keret width: 7, //szélesség radius: 5, //sarkok lekerekítésének mértéke color: #A2D959 //keret színe }, tip: bottomleft, //pozíció name: dark // Inherit the rest of the attributes from the preset dark style } A Support A használata során én csupán egyetlen negatívummal találkoztam, ez pedig az erősen hiányos dokumentáció. Igaz, hogy a bemutató oldalak segítségével működésre tudjuk bírni, de ha valami olyan igény merül fel, aminek megoldása nem lenne olyan bonyolult, de magunktól nem tudjuk ezt megvalósítani, akkor nagyon jó segítség lenne. Nekem a youtube videó ablaknál lett volna szükségem egy Bezár gombra, de abban a formában nem jött össze, ahogy azt akartam. Úgy sikerült áthidalnom, hogy a videót nem közvetlenül ágyaztam be, hanem közvetetten egy html oldalba ágyaztam, és azt nyitottam meg a tooltip pluginnal. Van egy támogatói fóruma, ahol kérdezhetünk bátran, viszont nem tudom, hogy milyen gyorsan érkezik rá válasz. Összegzés Összességében nagyon jól használható script a qtip, aki tooltip plugint keres annak nyugodt szívvel ajánlhatom. Ha kedvet kaptál a kipróbálásához, akkor itt le tudod tölteni a szükséges fájlokat hozzá a demo oldalammal együtt. uploads/downloads/2010/04/qtip_demo.zip 10. oldal