Webaholic

Net + Tech

Net + Tech

Az ingyenes hazugság

2016. október 26. - sajt

Ma megvettem a Photoshop-ot. Sőt, már ott tartok, hogy MINDEN program a gépemen legális.

Volt amikor mindent loptam. (Persze a gépen kívűl). Loptam a Windowst, loptam az Office-t, mindent. Még a vírusírtót is.

Aztán jött az Ubuntu talán 2005? Legyen minden ingyen. És ott minden ingyen volt. Aki pénzt kért, az el lett küldve... Így aztán én is gyakorlatilag ingyen dolgoztam. Ehhez jött hozzá, hogy mindent magam javítottam. Szerintem az időm 1/3-a azzal ment el, hogy helyre tegyem a dolgokat.

Aztán egyszer csak beleszerettem a Mac-be. Mint minden, ez is érzelmi döntés.

Ma már a Photoshop 3000 Ft/hó. (Régen azt hiszem fél milla volt). Azt hiszem rájöttek, hogy olcsóbb megvenni, mint leszedni, feltörni, stb.

És én is rájöttem, hogy egyszerűbb pénzt keresni, és abból megvenni a dolgokat, mint lopni, és nem pénzt keresni.

Mondjuk az atom elég jó és ingyenes :)

 

 

 

Hogyan keres pénzt az interneten?

Affiliate program

Egy nagy bölcsességgel fogom kezdeni: Mindenki abból él, hogy elad valamit. Szóval mindenki ügynök, kufár, eladó, boltos, árus, szatócs, kereskedő, kalmár, értékesítő, kofa, kupec, üzletkötő. Aki napi 8 órában dolgozik, hogy eladja magát, a munkáját a munkaadójának. Ezért kell fel reggel hatkor, ezért fürdik reggel, ezért öltözik szépen. Ezért van a megint hétfő és a végre péntek. Mert ha nem sikerül az eladás, legközelebb nem lesz rendelés (kirúgják). Az álláskeresésről ne is beszéljünk, olyankor mindenki emberkereskedő. Próbálja eladni magát.

Szóval tudom, hogy sokan utálják az eladás szót, de ez különbözteti meg a szegényeket és a gazdagokat. A gazdagok szeretnek eladni, a szegények pedig nem tudnak. Maradjunk abban, hogy az eladás képessége a mai társadalomban az egyik legfontosabb képesség.

A kérdés ezek után, hogy hogyan kell eladni? Nagyon egyszerű. Az emberek szeretnek vásárolni, viszont utálják, ha eladnak nekik valamit, ha valamit rájuk tukmálnak.

Ehhez képest, sokan akik az eladásról hallanak és olyan helyzetbe kerülnek, hogy értékesíteniük el kell valamit, rögtön úgy kezdenek viselkedni a leendő vevővel, ahogy ők soha nem szeretnék, ha velük viselkednének.

Szóval mit kell akkor csinálni? Olyan dolgot kell árulni, amit te is szívesen megvennél, vagy esetleg meg is vettél már. Amit esetleg régóta használsz, meg vagy vele elégedve. Ezeket az ember szívesen ajánlja másoknak és az ajánlás az, amivel a legjobban el lehet adni. 

Egyébként a normális MLM hálózatoknak is hasonló a koncepciója. Kipróbálod, ha megvagy vele elégedve, ajánlod tovább. Az MLM hálózatoknak van egy olyan előnyük, hogy akik vásároltak rajtad keresztűl, szintén továbbajánlhatják a dolgot, ami után Te jutalékot kapsz.

Viszont az affilite programoknak a legnagyobb hibájuk, hogy nem MLM rendszerben működnek. De először is, mi az az affiliate? A affiliate azt jelenti, hogy egy adott webáruházba rajtad keresztűl jut el a vevő és vásárol, akkor Te az után jutalékot kapsz. 

A rajtad keresztűl azt jelenti, a webáruház ad neked egy linket, amit te tovább küldhetsz. Ebben a linkben szerepel a te egyedi azonosítod, ami alapján a webáruház tudja majd,hogy rajtad keresztűl jött a forgalom. Persze itt nem csak webáruházról lehet szó, hanem bármilyen szolgáltatásról is akár.

Például, ha a jobb oszlop tetején van egy link, ami a Shoprenter-re mutat. Ha rákattintasz, és utána úgy döntesz, hogy megvásárolod valamelyik csomagjukat, akkor abból én jutalékot fogok kapni. Őket egyébként ingyen is ajánlanám, mert nagyon profin megoldották a webshophoz tartozó marketinges dolgokat is, ráadásul az egész úgy van kialakítva, hogy szinte minden igényt kielégít. Én mivel eredetileg programozó vagyok, azt gondoltam, hogy egy webáruház akkor van kész, ha le van programozva. Rá kellett jönnöm, hogy a program csak kb. az 1/9-ed része az egésznek. Viszont a legtovább a weboldal programozása tart, és amíg az nincs kész, addig nem lehet vásárolni. Nekem volt egy ügyfelem, aki azt mondta, hogy ennyi idő alatt, amíg megcsináltuk a webáruházat mér megnyitott volna egy új boltot és be is rendezte volna.

Ezek után jó ötlet, hogy ha találsz valami érdekeset és meg akarod osztani, előbb megnézed, hogy van-e hozzá affiliate link. Mert, ha van, akkor úgy osztod meg. Ha az ismerősödnek ez megtetszik és vásárol, Te is kapsz belőle jutalékot. Ha azt mondod, hogy ez téged nem érdekel, akkor egyrészt nem tartanál itt, másrészt pedig így eladtál valamit és azért jár neked a jutalék. Gondolom karácsonykor sem adod vissza a prémiumot.

Viszont mi a trükk? Annyi csak, hogy mindenütt van egy kifizetési limit.Ezt általában nem lehet elérni egy ajánlásból. Gondolhatunk ilyenkor a gonosz kapitalista multikra, hogy ellopják a pénzünket (amit az előbb még el sem akartunk kérni), viszont nem ez áll a háttérben, hiszen nekik az az érdekük, hogy minél több megrendelőt hozzunk, és egy jó cég kinyalja a seggét maximálisan segíti az értékesítőit, hiszen ők hozzák a profitot. Ráadásul egy affiliate jutalék kifizetése jóval kevesebb szokott lenni, mint amennyiért egy adwords kampányban érnek el egy vásárlót.

Szóval azért van a kifizetési limit, mert ezeknek a boltoknak mindig van egy pénz-visszafizetési garanciájuk. Tegyük fel, hogy ajánlasz valakit, aki vásárol. A vásárlás után te megkapod a jutalékodat. Aki vásárolt, az pedig visszakéri a pénzét. Így a cég pénzt bukott. Ezt pedig egy vállalkozás nem engedheti meg magának, mert ha nem védi meg a pénzét, akkor tönkre fog menni.

Én sem olyan régen találtam meg ezt az a lehetőséget, de azóta mindenütt folyamatosan keresem. Ha van ilyen, akkor megszerzem a affiliate linkjét. A jobb site-ok akár fél évig is emlékeznek, hogy én küldtem a jelentkezőt, és utána is  jóvá írják a jutalékot. Persze nagy hátránya, hogy nem látod, hogy ki vásárolt rajtad keresztűl, de ezek azt szeretnék, ha mindenki, aki segít nekik eladni a pénzéhez jusson, mert az affiliate programosok a legolcsóbb.

Ja, és akitől tanultam mindezt: http://1ev.hu/l/?l=XgF7nx Ő Müller Péter. Ő kizárólag internetes vállalkozásokkal foglalkozik és már elérte az anyagi függetlenséget. Az anyagi függetlenség azt jelenti, hogy tudod mennyi pénzre van szükséged havonta, és ezt az összeget passzív jövedelmekből tudod előteremteni.

Remélem minden témát érintettem, jó éjszakát!

 

 

Keresés parancssorban - ack

Régebben amikor egy adott stringre akartam keresni több file-ban, akkor a grep-et használtam. Így:

grep -sir 'amit keresek' *

A grep-et már 1973 óta lehet használni, annak, akinek Unix-a, Linux-a, vagy valami BSD alapú rendszere van, mint amilyen az OSX is. Viszont a file-okban keresés egy olyan gyakran használt dolog manapság, hogy páran úgy döntöttek, hogy egy kicsit megújítják a dolgot, így született az ack. Miért jobb ez mint a gerp?

  • Gyorsabb
  • Az ack Perl-ben íródott, így fut mindenütt, ahol a Perl. (A grep ugye C-ben)
  • Alapból nem foglalkozik a VCS (berziókezelő) könyvtárakkal, mint pld. .git, .cvs stb
  • Nem foglalkozik a backup file-okkal és a bináris file-okkal
  • Egyszerűen lehet szűkíteni a keresés körét file-típusokra. (ack --perl pattern csak a Perl fileokra fog keresni.) Az ack --help-types kiírja az összes lehetőséget, illetve ha kell, mi is tudunk létrehozni ilyeneket.
  • Tud csinálni egy file-listát adott típusú file-okból ack -f --ruby > all-ruby-files>
  • A találatokat kiszínezi. ack_screenshot1.png
  • Lehet használni Perl reguláris kifejezéseket --cc után. ack --cc '#include\s+<(.*)>' --output '$1' -h
  • Nagy előnye, hogy kevesebbet kell gépelni hozzá.

Szóval jó kis cucc, érdemes telepíteni és használni!

 

Milyen egy sikeres weboldal?

Több mint hat éve készítettem egy weboldalt egy nőgyógyásznak. Ez már több, mint 6 éve történt. (onnan tudom, hogy 6 éve költöztünk a mostani lakásunkba, ezt pedig még a régi lakásban csináltam). Már nem is én hostolom az oldalt, az utolsó frissítés pedig 2010-es. Akik áttették az oldalt, nem nagyon foglalkoztak vele és az is igaz, hogy a doktor úrnak ma már csak hobbi a szakmája, egészen másból és. Így a weboldal megmaradt olyannak, mint ahogy eredetileg megcsináltam. Az összes szöveg, a google analitycs (ezzel lehet mérni egy weboldal látogatottságát) kódok, illetve a kapcsolat oldalnál betettem a saját e-mail címemet is.

Nos, azóta folyamatosan kapom az e-maileket. Naponta írnak (elsősorban) nők arról, hogy milyen problémáik vannak. Mivel ez egy nőgyógyász oldala, ezért ilyen jellegű kérdéseket tesznek fel. 

Nagyon érdekes, hogy egy ilyen személyes témáról írnak egy vadidegennek. Ráadásul névvel e-mail címmel.

Szóval, ha ez az oldal szerintem elég sikeres, mivel napi egy konverziója van még úgy is, hogy semmi változtatás nem volt rajta. Ráadásul egy olyan szegmensben, ahol talán elég nagy a konkurencia.

Talán ekkoriban történt, hogy egy gyógyszerforgalmazó cégnek csináltam weboldalt és az egyik forgalmazott termékük nevére a Google-ban előrébb voltak, mint a termék gyártója. Azt kérték, hogy kerüljenek hátrébb...

Mondjuk én már akkor is azt mondtam, hogy a tartalom (és Dave Gahan) a király. 

 

 

Nem tudsz idegen nyelveket? Nem baj.

google-translate-logo.pngMa kijött a Google Translate 3.10-es verziója mobilra. Ami két dolgot tud. Egyrészt be tudja szkennelni a szöveget és azt lefordítja.

De ami ennél sokkal durvább, hogy a beszédet is lefordítja. Igen. Mondasz neki valamit magyarul és visszamondja angolul. Mondanak neked valamit angolul és azt kimondja magyarul.

Tesztelve. Működik!

Már 5 éve

- Drága bírónő! Nem sok az az 5 év?
- Mondom kötél!

Szóval lassan most 5 éve írtam ide az utolsó bejegyzést. Azért jutott újra eszembe, mert véletlenűl az adwords helyett az adsense-t néztem meg, ami rögtön jelezte, hogy kerestem 19 859 forintot, mégpedig ezzel a bloggal. 20 ezertől fizetnek, úgyhogy ha erre jársz kattints a releváns hírdetésekre!

Ahogy nézegetem a bejegyzéseket,azon gondolkodom, hogy mennyit változott a világ.

Alapvetően nem használok könyvjelzőket. Mindenre a google-t használom, bár néha azért pár dolgot beteszek a könyvjelzők közé, aztán késöbb rácsodálkozom, hogy mi is ez? Újra elkezdetm használni a del.icio.us-t, majd meglátjuk milyen sikerrel.

Nem használok már régóta Firefox-ot. Már nem is emlékszem, hogy miért volt a váltás, de szép fokozatosan átszoktam a Chrome-ra, mint oly sokan. 

A színeket már az inspectorból nézem ki, illetve van a chrome-nak is egy web developer nevű modulja.

Azt hiszem a két CSS leírás még ma is megállja a helyét, bár a CSS rengeteget változott. Manapság sokkal jobb dolgokat lehet csinálni CSS3-al, olyan dolgokat, amihez régebben javascript meg mindenféle hack-elés kellett. Érdekes olvasni a leírásokban, hogy nem támogatják az IE8-at. Én még az IE6-al küzdöttem sokat. Az IE7 megváltás volt. 

Mi változott?

Szerintem az egyik legfontosabb változás a mobiltelefonok és táblagépek bejövetele és az ehhez kapcsolódó reszponzív (responsive) design. Ehhez kapcsolódik a Bootstrap illetve a Foundation. és persze érintőképernyős mobilok elterjedése. Régebben azt néztük, hogy 14"-os monitorra kell-e még optimalizálni az oldalt, most meg már...

Én sem linuxot használok már localhost-on, hanem OSX-t, eenkívűl még két iPad is bekerült a háztartásba, a TV viszont kikerül.

Izgalmask ezek a Javascript motorok, mostanában az AngularJS-t nézegetem, erről nemsokára lesz egy post is.

Mostanában mindenki Wordpress-t használ, így én is csináltam pár oldalt vele. Az elején egyszerűen lehet vele dolgozni, de aztán az admin felület úgy néz ki, mint egy reklám újság. Pont ma szoltak, hogy feltörték az egyik Wordpress-es site-ot, pedig elég friss volt.

Jön A Drupal 8. Ami már csak a nevében emlékeztet az előző drupalokra, viszont zseniális lesz. A Symfony-ra épűl, ami egy MVC keretrendszer. A symfony-t régebben használtam, nagyon tetszett is, csak ugye abban mindent le kellett programozni. A drupal ezzel szemben sok mindent alapból megad (felhasználó kezelés, jogosultság kezelés stb.) Ráadásul most már a nézetek is benne lesznek az alaprendszerben. Szerintem nem nagyon lehet majd jó ideig felülmulni.

És még én is nagyon sok mindenben változtam. De erről majd késöbb.

Retró javascript

Kijött Péterfy Bori 2. lemezének második videoklipje (az első a Téged nem  volt) a Bűvös vadász. Már az egész klip olyan, mintha anyám VHS kamerájával vették volna fel, amit erősít is a stáblista után lévő rész, viszont ami miatt nekünk is érdekes lehet, az az, hogy csináltak hozzá egy weboldalt (nézd új ablakban - jobb gomb új ablak) amin valódi ezredfordulós javascriptek vannak. Lehet nosztalgiázni!

A CSS tökéletes elsajátítása: a kezdetek

A CSS vált a weboldalak építésének szabványává a mai web-iparban. Akármilyen jó fejlesztő vagy dizájner vagy pontosan ismerned kell. CSS a híd a fejlesztők és a dizájnerek között és minden webbel foglalkozónak ismernie kell valamennyire. Ha úgy gondolod, hogy CSS-el kellene foglalkoznod, akkor itt az ideje, hogy fogd a kedvenc szövegszerkesztődet és kövesd az alábbi leírást, ahol áttekintjük a CSS leggyakoribb és legpraktikusabb használatát.

Áttekintés: Miről lesz ma szó?

Először is arról fogunk beszélni, amit a CSS alapjainak hívhatunk. A CSS azon tulajdonságairól és lehetőségeiről, amelyek a leggyakrabban használunk weboldalak építése közben.

  1. Eltartás vs. Margó
  2. Körbeúsztatások
  3. Középre igazítás
  4. Rendezett és rendezetlen listák
  5. Címsorok formázása
  6. Túlcsordulás
  7. Pozicionálás

Amikor már kényelmesen tudjuk használni az alapokat, bemutatok pár trükköt, hogy hogyan építsünk CSS alapú weboldalakat egy rajz alapján és hogyan tegyük még jobbá.

  1. Háttérképek
  2. Képek javítása
  3. XHTML PSD-ből

1. Eltartás vs. Margó

A legtöbb kezdő összekeveri az eltartást (padding) a margókkal (margin) és hibásan használja őket. Az olyan gyakorlat, mint a height (magasság) használata a margó vagy az eltartás helyett szintén egy gyakori hiba. Az eltartás és a margó megértése az alapja a CSS használatának.

Mi az az eltartás és a margó?

Az eltartás az elemen belüli, míg a margó az elemen kívüli térköz.

A különbség rögtön érthetővé válik, ha teszel egy hátteret és egy keretet (border) egy elemnek. Az eltartással szemben a margó nem lesz része sem a háttérnek, sem a keretnek, mivel ez az elemen kívüli térközt jelenti.

Nézzük ezt szemléletesebben:

 

A margó és az eltartás értékeit az óramutató járásával megegyezően adjuk meg, a tetejétől kezdve.

Gyakorlati példa: Itt van egy <h2> címsor két bekezdés között. Ahogy látszik a margó fehér térközt csinál a bekezdések között, az eltartás pedig (ahol a szürke háttérszín látható) levegőssé teszi a helyet.

A margó és az eltartás értékei

A fenti példában a címsor eltartás és margó értékei a következők lehetnek:margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

A kód további optimalizálásához használhatjuk a "gyorsírás" (shorthand) technikát, ami megszünteti az ismétlődő kódrészeket. A gyorsírás technika alkalmazásával a kód ilyenné karcsúsodik:

margin: 15px 0; /*--fent és lent = 15px | jobb és bal = 0 --*/
padding: 15px; /*--fent, jobb oldalt, lent és bal oldalt = 15px --*/

Ime a teljes CSS ehhez a címsorhoz:h2 {
  background: #f0f0f0;
  border: 1px solid #ddd;
  margin: 15px 0;
  padding: 15px;
}

Gyors tipp

Tartsd észben, hogy az eltartás értéke hozzáadódik az elem teljes szélességéhez. Például ha van egy elemed, ami 100 pixel széles és a jobb és a bal eltartásnak megadsz 10-10 pixelt, akkor végül 120 pixel széles lesz.

100px (tartalom) + 10px (bal eltartás) + 10px (jobb eltartás)= 120px (az elem teljes szélessége)

A margó, bármennyire is tartozik hozzá a dobozhoz, nem befolyásolja az elemet. Ez a tipp különösen hasznos, amikor oszlopokat rakunk egy sorba egy elrendezésen (layout).

További források:

2. Körbeúsztatások (floats)

A körbeúsztatás szintén egy alapvető elem CSS-alapú weboldalak építésénél. Használható képek helyzetének meghatározására és elrendezések illetve oszlopok építésére. Ha emlékszel hogyan helyeztél el elemeket jobbra és balra HTML-el, rájössz, hogy a körbeúsztatások is hasonlóan működnek.

Ahogyan a HTML Dog is írja, a float tulajdonság “leírja, hogy egy fix szélességű doboz körbeúsztathathatja, eltolhatja jobbra vagy balra, azt a tartalmat ami körbeveszi őt.”

A float: left érték az elemet balra igazítja  és használható szilárd tárolókén elrendezések és oszlopok készítéséhez. Nézzünk egy gyakran alkalmazott lehetőséget a float: left használatára:

A float: right érték jobbra igazítja az elemet körülötte lévő elemeket pedig balra folyatja.

Gyors tipp: Mivel a blokk elemek elfoglalják a szülő elem szélességét 100%-ban, egy elem jobbra folyatása az elemet a következő sorba teszi. Ez szintén vonatkozik az utána lévő egyszerű szövegre is, mivel a körbefolyatott elem nem tudja bepréselni magát ugyanabba a sorba.

Kétféleképen lehet ezt kijavítani:

  1. Megfordítjuk az elemek sorrendjét így a körbefolyatott elem lesz elől és a szomszédai utána.
  2. Megadunk egy pontos szélesség értéket a szomszédos elemeknek így a két elem szélességének összege ugyanannyi vagy kevesebb lesz, mint a szülő elem szélessége.

Az Internet Explorer 6 (IE6) ismert arról, hogy megduplázza a körbefuttatott elemek margóját. Így, ha eredetileg 5-pixelt adtál meg margónak az 10 pixel lesz IE6 alatt.

Egy egyszerű trükk ennek a megoldására: adjunk display: inline -t a körbefolyatott elemnek:.floated_element {
  float: left;
  width: 200px;
  margin: 5px;
  display: inline; /*--IE6 javítás--*/
}

További források:

3. Középre igazítás

Régen vége már azoknak a napoknak amikor a <center> HTML-elemet használtuk. Nézzük a különféle lehetőségeket egy elem középre igazításához.

Vízszintes igazítás

Vízszintesen középre igazítani a text-align tulajdonsággal lehet. Ez nagyon egyszerű, de tartsd észben, hogy szövegközi elemeket (inline elements) csak akkor tudsz középre igazítani, ha megadod a display: block -ot is. Ez megadja a böngészőnek azokat a határvonalakat, amihez képest a középre igazítást el kell végeznie.

.center {
text-align: center;
display: block; /*--Csak szövegközi elemeknél--*/
}

A nem szöveges elemek vízszintes igazításához a margin tulajdonságot kell használni.

A W3C azt modnja, “Ha mind a margin-left és margin-right auto, akkor a kiszámított értékük egyenlő. Ez vizszintesen középre igazítja az elemet, figyelembe véve a befoglaló elem határait.”

A vízszintes középreigazítás megvalósítható, ha a bal és jobb margót auto-ra állítjuk.

Ez az ideális megoldás a nem szöveges elemek igazításához, például képekhez és elrendezésekhez. Azonban, ha egy olyan elemet akarunk középre igazítani, aminek nincs megadva a szélessége, akkor ez nem fog működni.

Egy elrendezés középre igazítása:.layout_container {
  margin: 0 auto;
  width: 960px;
}

Kép középre igazítása (mivel a képnek van egy szélessége, itt nem kell megadni):

img.center {
margin: 0 auto;
display: block; /*--mivel az IMG egy szovegközi elem--*/
}

Függőleges igazítás

Szöveg-alapú elemeket függőlegesen igazítani a line-heighttulajdonsággal lehet, ami beállítja a függőleges térközt a szövegek alapvonalai között. Ez tökéletes függőleges igazításhoz a címsorokhoz és egyéb szöveg alapú elemekhez. Egyszerűen állítsd be az elem line-height tulajdonságát.

 

h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}

A nem szöveges lemek függőleges igazitásához abszolút pozicionálást kell használni.

A trükkje ennek a technikának az, hogy pontosan be kell állítani a szélességét és a magasságát a középre igazítandó elemnek.

A position: absolute tulajdonsággal, az elemet az eredeti pozíciójáhaz képest lehet elmozgatni (0,0: a bal felső sarok). Az alábbi képen a piros pont mutatja az elem eredeti 0,0 koordinátáit, mielött a negtív margót alkalmaztuk volna rá.

Negatív felső és bal margóval pontosan tudjuk igazítani az elemet mind függőlegesen mind vízszintesen.

Íme a teljes CSS a függőleges és vízszintes igazításhoz:

.vertical {
width: 600px; /*--Szélesség beállítása--*/
height: 300px; /*--Magasság beállítása--*/
position: absolute; /*--Abszolút pozicionálás--*/
top: 50%; /*--Felső koordináta 50%--*/
left: 50%; /*--Bal koordináta 50%--*/
margin: -150px 0 0 -300px; /*--A felső és a bal margó negatívra állítása--*/ }

Kapcsolódó cikkek:

4. Rendezett és rendezetlen listák

A rendezett lista, <ol>, elemei számokkal vannak jelölve.

A rendezettlen lista, <ul>, elemei pedig golyókkal.

Alapvetően mindkét fajta lista stílusa egyszerű, de a CSS-nek köszönhetően egyszerűen testreszabhatóak.

A kód szemantikusan tartásához a listák csak rendezett tartalmak leírásához használahtóak. Azonban kiterjeszthetőek többszintű oszlopokká és navigációs menükké.

Rendezettlen listák testreszabása

Az egyszerű golyók unalmasak és nem hívják fel eléggé a figyelmet a bennük lévő tartalomra.  Egy egyszerű és hatékony technikával javíthatunk ezen: tüntessük el a golyókat, és alkalmazzunk háttérképeket a lista összes elemére.

Ime a CSS a testreszabott golyókhoz:ul.product_checklist {
  list-style: none; /*--Golyók eltüntetése--*/
  margin: 0;
  padding: 0;
}
ul.product_checklist li {
  padding: 5px 5px 5px 25px; /*--Eltartás az összes elemhez--*/
  margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*--Golyó ikon háttérképként--*/
}

 

Lista elemekhez kapcsolódó cikkek:

Rendezettlen listák használata navigációhoz

A legtöbb CSS alpú navigációs menü mostanában lista. Íme egy rövid összefoglalás, hogy hogyan tudunk egy egyszerű listából vízszintes menüt készíteni.

HTML: kezdjük egy egyszerű rendezetlen listával, ahol a lista minden eleme egy hivatkozás.

<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS: eltüntetjük az alap golyókat (ahogyan az elöbb is csináltuk) a list-style: none megadásával. Ezután az összes elemet balra úsztatjuk, amivel a menünk vízszintes lesz.

ul#topnav {
list-style: none;
float: left;
width: 960px;
margin: 0; padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ddd;
}
ul#topnav li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
ul#topnav li a:hover {
background: #fff;
}

További cikkek:

5. Címsorok formázása

A cím HTML elemek (Hx) fontosak a keresőoptimalizáláshoz, de a szokásos címsorok elég hülyén néznek ki. Miért nem fűszerezzük meg őket CSS-el, hogy mindenki élvezhesse áldásos hatásait?

Miután elkészítettük a címsorok stílusát, beletehetünk néhány sorközi elemet, hogy azokat máshogyan formázzuk.

A HTML így néz ki:<h1><span>CSS</span> Back to Basics <small>Tips, Tricks, & Practical Uses of CSS</small></h1>

A CSS meg így:h1 {
  font: normal 5.2em Georgia, "Times New Roman", Times, serif;
  margin: 0 0 20px;
  padding: 10px 0;
  font-weight: normal;
  text-align: center;
  text-shadow: 1px 1px 1px #ccc; /*--IE nem ismeri--*/
}
h1 span {
  color: #cc0000;
  font-weight: bold;
}
h1 small {
  font-size: 0.35em;
  text-transform: uppercase;
  color: #999;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: none;
  display: block; /*a small elemet tartsuk ugyanabban a sorban */
}

További tipográfiával kapcsolatos cikkek:

6. Túlcsordulás

Az overflow tulajdonság sokféleképen használható és az egyik leghatásosabb fegyver a CSS arzenálban.

Mi az a túlcsordulás?

Ahogy W3Schools.com írja, "az overflow tulajdonság írja le, hogy mi történjen, ha a tartalom túlcsordúl az őt tartalmazó dobozon".

Vessünk egy pillantást az alábbi ábrára, hogy lássuk hogyan is működik ez a gyakorlatban.

Vizuálisan az overflow: auto úgy néz ki, mint egy iframe, de sokkal használhatóbb és keresőbarát. Automatikusan ad egy csúszkát (vízszintest, függőlegest vagy mindkettőt) amikor az elem tartalma túlcsordúl az elem határvonalán.

Az overflow: scroll hasonlóan működik, de ez mindenképen hozzáadja a csúszkákat, függetlenül attól, hogy az elem tartalma túlcsordúl-e vagy sem.

Végűl az overflow: hidden elmaszkolja (eltünteti) a túlcsorduló részeket.

Gyors tipp: volt már olyan szülő elemed amelyik nem teljesen vette körbe a gyermek elemeket? Ki tudod javítani ezt, ha a szülőelemet körbefolyatod.

Bizonyos esetekben előfordul, hogy a jobb vagy bal körbefolyatás nem működik. Például ha középre akarunk igazítani egy befoglaló elemet, vagy nem akarjuk megadni a pontos szélességét. Ezekben az esetekben használható az overflow: hidden a szülő befoglaló elemnél, hogy a szülő elem teljesen körbevegye az ő gyermekeit.

További cikkek:

7. Pozicionálás

A pozicionálás (relatív, abszolút és fix) az egyik legerősebb CSS eszköz. Ez megengedi az elemek pozicionálását meghatározott koordináták szerint megadva a dizájner szabadságát ahhoz, hogy úgy nézzen ki minden, mintha most vettük volna ki a dobozból.

Három alap dolgot kell megtenni pozicionáláskor:

  1. Koordináták beállítása (x és y koordináta beállítása).
  2. Szituációnak megfelelő érték: relative, absolute, fixed vagy static.
  3. z-index értékének beállítása: rétegek esetén (opcionális).

A position: relative értékkel az elem a természetes helyéhez képest pozicionálódik. Például, ha egy relatívan pozicionált elem egy kép bal oldalán van a bal és a fenti koordináták 10px-re állításával, 10px-el lejjebb és 10px-el jobbra lesz az eredeti poziciójátol.

A relatív pozicionálást gyakran használják arra, hogy definiáljanak egy új kezdőpontot (az x és y koordinátákat) az abszolút pozicionált gyermek elemekhez. Alapesetben az alappozíció a böngésző megjelenítő részének a bal felső (0,0) sarka. Amikor egy elem szülőjének relatív pozíciót adunk, onnantól kezdve ez az elem a szülő eleméhez képest lesz abszolút pozicionálva, nem a böngésző ablakhoz.

Azok az elemek, amelyek position: absolute -al vannak pozícionálva az x és y koordináták használatával, bárhova elhelyezhetők. Alapértelmezetten a böngésző megjelenítő részének a bal felső (0,0) sarkától számolódnak. Ezek az elemek nem foglalkoznak a természetes körbefolyatással és nem érintettek a környező elemek által és viszont.

Az position: fixed kezdőpontja ugyanúgy a böngésző bal felső sarka, azzal a kölünbséggel, hogy az így pozicionált elemek akkor is a helyükön maradnak, ha a felhasználó a csúszkát fel-le húzza.

A z-index tulajdonság az elemnek a veremben elfoglalt helyét határozza meg. Magassabb értéknél az elem is feljebb kerűl. Gondolj a z-index-re mint rétegezésre. Nézd meg a következő képet, hogy jobban megértsd:

További cikkek:

Ízesítsük meg a CSS-t

Most, hogy megértettük a CSS alapjait, itt az ideje, hogy egy szinttel feljebb lépjünk a játékban, ízesítsük meg a CSS-ünket! Az alábbiakban pár technikát mutatok be a képek és elrendezések tisztitására és javítására. További feladat lesz, hogy egy rajz alapján elkészítsük a teljesen CSS alapú weboldalunkat.

8. Háttérképek

A háttérképek nagyon kézre állnak a vizuális efektusokhoz. Akár ismétlődő háttérképpel töltünk ki egy nagyobb területet, vagy stílusos ikonokat adunk a navigációhoz, az oldalunk megtelik élettel.

Megjegyzem, hogy az általános nyomtatóbeállítások esetén a háttérképek nem lesznek kinyomtatva. Amikor nyomtatható oldalakat készítünk mindig tartsuk észben, hogy mely elemekhez használunk háttérképet és mikor használunk kép elemeket (<img>).

Nagy hátterek használata

Ahogy a monitorok mérete egyre nagyobb lett, úgy lettek a nagy háttérképek egyre népszerűbbek. Nézzd meg Nick La részletes leírását a WebDesigner Wall-nál, hogy hogyan valósította meg ezt az efektust:

Szintén olvasd el ezt a cikket a Webdesigner Depot-on: “Do’s and Don’ts of Large Website Backgrounds.” 

Szöveg lecserélés

Talán tudod, hogy nem az összes böngésző támogatja a saját fontok beillesztését egy weboldalba. Viszont rengeteg módon lecserélhetőek a szövegek képekkel. Egy nagyon egyszerű technika a text-indent használata.

A leginkább elterjedt a címsorok lecserélése. Ez a technika lecseréli a strukturált szöveget egy képpel:h1 {
  background: url(home_h1.gif) no-repeat;
  text-indent: -99999px;
}

Néha szükséges beállítani a szélesség és magasság értékeket is (szövegközi elemeknél ne feledjük a display: block használatát!).replacethis {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
width: 100%;
height: 60px;
display: block; /*--Csak szövegközi elemeknél--*/
}

További cikkek a szöveg lecserélés témkörében:

CSS manók (sprites)

CSS Sprites egy olyan technika amelynél az elemek hátterét pozicionálással állítják be, és az összes háttérképhez ugyanazt a képet használják (a sok különféle háttérképet összerakják egy nagy kép-file-ba).

A CSS manókat leggyakrabban navigációs menüknél használják, így egy képen lehet ugyanannak az ikonnak az aktív és a hover (amikor a mutató az elem felett van) állapota.

Miért használunk CSS manókat? A CSS manók lecsökkentik a letöltési időt és a HTTP kéréseket.

Cikkek a CSS manókról:

9. Képek javítása

Képeket stilizálhatunk CSS-el különböző módokon. és néhány dizájner rengeteg erőfeszítést tesz azért, hogy nagyon stílusos kép sablonokat hozzon létre.

Egy egyszerű trükk a dupla-keret technika, ami nem igényel semmilyen hozzáadott képet, tisztán CSS.

A HTML így néz ki:<img class="double_border" src="sample.jpg" alt="" />

A CSS pedig így:img.double_border {
border: 1px solid #bbb;
padding: 5px; /*A belső keret mérete*/
background: #ddd; /*A belső keret szine*/
}

Nick La-nak a WebDesigner Wall-nál van egy nagyszerű leírása okos ötletekkel képek javításához. Nézzd meg!

10. XHTML PSD-ből

Most, hogy megtanultuk a CSS alapjait, eljött az ideje, hogy kipróbáljuk a tudásunkat és egy rajz alapján elkészítsük a tiszta CSS alapú weboldalunkat. Az alábbiakban található néhány válogatott leírás a témában.:

Konklúzió

A fejlesztést szilárd alapokra kell helyezni, ahol kritikus a CSS mesteri szintű használata. Amilyen gyorsan a webes technikák fejlődnek, nincs jobb időpont mint a most megismerni a legutolsó webes szabványokat és trendeket.

Remélem a fent leírt technikák jó alapokat adnak ahhoz, hogy mindentudó CSS ninja legyél. Sok szerencsét, maradj éhes a tudásra, és tanulj!

(A fordítás Soh Tanaka: Mastering CSS Coding: Getting Started című munkája alapján készült. Remélem a fordítás téged is hozzásegít ahhoz, hogy ne csak jó dizájner, hanem igazi webdizájner legyél!)

JQuery és Prototype egyszerre

Mostanában a Drupal mellett bizonyos projectekhez Symfony-t is használok. (Meg Java-t is, de ezt most hagyjuk.) A Symfony egy elég jó keretrendszer, egyrészt nagyon jó a dokumentációja, több könyv is van hozzá, amelyek ingyenesen letölthetőek, másrészt, mikor először olvastam őket, folyamatosan bólogattam, hogy ezt, vagy azt én is így oldanám meg. Viszont nagy hibája, hogy prototype-ot használ, amit viszont én annyira nem szeretek, de ezt tudjuk be annak, hogy amikor elkezdték fejleszteni a jQuery még eléggé gyerekcipőben járt.

Ha prototype-ot és jQuery-t akarunk együtt használni, akkor a probléma abból adódhat, hogy mindkét keretrendszer használja a $ jelet. A $ egy rövidítés a jQuery szóra. Szerencsére a jQuery ad egy lehetőséget arra, hogy ezt megváltoztassuk.

var $j = jQuery.noConflict(); Ezek után pedig mindenütt, ahol eddig $-t használtunk, cseréljük ki $j-re, és minden szépen működni fog. $('p').hide('slow'); helyett: $j('p').hide('slow'); Azonban vigyázzunk az automatikus cseréléssel, hiszen például reguláris kifejezésekben is szerepelhet a $. Vannak más lehetőségek is.


6 egyszerű dolog a hatékonyabb munkavégzéshez szabadúszóknak

A legjobb a szabadúszásban az, hogy úgy osztod be az idődet ahogy Te akarod és a szabályokat is Te határozod meg. És ez a legrosszabb is benne. Egy normális munkahelyi környezet és struktúra nélkül sok szabadúszó rácsodálkozik arra, hogy elment az egész nap és nem csinált szinte semmit. Az egész napot hasznosan eltölteni nagyon nehéz dolog. Hogy ez ne így legyen bemutatunk néhány egyszerű dolgot a hatékonyság növeléséhez.

Készíts ütemtervet

Határozd meg a munkaidőt

A munkaidő meghatározásával nagyobb lesz a felelősséged és jobban fogod értékelni az idődet, ezáltal kevésbé fogod elpocsékolni. Készíts egy letisztult munkarendet és szigorúan tartsd is magad hozzá. Ha például elhatározod, hogy minden nap reggel 8 órakor kezded a munkát, akkor kelj fel, zuhanyozz le, öltözz fel és láss neki pont 8 órakor. Ha pizsamában dolgozol otthon, akkor nem lesz olyan a lelkiállapotod ami hatékony munkát eredményez. Fogadd meg ezt a tanácsot, és meg fogsz lepődni, hogy a hatékonyságod milyen hamar meg fog nőni.

Tarts szünetet

Kísérletek bizonyítják, hogy azok az emberek, akik rövid szüneteket tartanak munka közben több dolgot tudnak megcsinálni. Egy pár perces munkaszünet után felfrissülve láthatsz neki a következő feladatnak. Sétálj egyet, kapj be egy szendvicset vagy biciklizz egyet a boltba. Tervezz be fél- vagy egy óra ebédszünetet minden nap, mindig ugyanabban az időpontban. Az ebédidő elhagyásával ugyan több időd lesz dolgozni, de üres gyomorral kevésbé tudsz koncentrálni. Fél órás fókuszált munka sokkal termelékenyebb mint egy órás frusztrált.

Készíts tervet

Határozz meg célokat

Célok nélkül az életünket igen hamar céltalannak fogjuk érezni. (Gondoltad volna?) A rövid távú célok a helyes úton tartanak ahhoz amit hosszú távon elképzeltünk. Határozz meg rövid- közép- és hosszú távú célokat. Például: mit akarsz befejezni ezen a héten, ebben a hónapban vagy ebben az évben. A hosszú távú célok segítenek tisztán meghatározni a rövid távú célokat. Szánj időt arra, hogy megtervezed miket akarsz elérni és írd is le.

Készíts teendő (to-do) listákat

Használd fel a heti cél-listádat, hogy elkészítsd a napi teendő listát. Használhatsz bármilyen típusú teendő listát, akár egy asztali, akár egy webes alkalmazást, vagy egyszerűen írd le egy papírra a jó öreg ceruzával. Mindegy melyiket használod, a tervezés segít, hogy a fontos dolgokra fókuszálj. A nap végén készítsd el a következő napi teendő listádat és másnap a szerint cselekedj.

Bontsd szét a nagyobb feladatokat kezelhető részekre

Amikor elkészíted a teendő listádat, ne írj olyanokat, hogy „Elkészíteni a hatékonysági cikket” vagy „Elkészíteni a logót”. Legyél sokkal specifikusabb úgy, mint „anyaggyűjtés a hatékonysági cikkhez” vagy „finomítani a logó koncepcióját”. A minél jobb részletezéssel sokkal jobban tudsz a fókuszálni és hatékonyabban tudsz dolgozni.

Kövesd nyomon az idődet

Számos jó idő-követő (time-tracking) alkalmazás létezik, ami segít követni az időd használatát. Nagyon fontos tudni azt, hogy bölcsen használöod az idődet. Jegyezd fel, hogy mennyi ideig tart elkészíteni egy-egy feladatot. Meg fogsz lepődni, hogy mennyi időt pocsékolsz el egy nap. Ha tudod, hogy egy feladat megoldása mennyi ideig tart segít abban, hogy jobban tudd megtervezni a napodat, ezáltal még jobban növelni a hatékonyságot.

Értékeld a teljesítményedet

A nap végén nézz vissza, mennyire jól mérted fel az az napra felállított célokat. Elkészítetted azt, amit mára terveztél? Ha nem, miért? A teljesítmény kiértékelése egy kritikus lépés a hatékonyságod növeléséhez. Határozz meg reális, de érdekes, kihívást jelentő célokat. Őszintén bíráld a teljesítményedet, hogy megállapítsd mi a lehetőség a fejlődésre.

Fókuszálj!

Egy időben egy feladat

A „Multi-tasking” (többfeladatosság) egy számítógépes kifejezés amit a köznyelv is átvett. Ezért sokan gondolják úgy manapság, hogy több dolgot eltudnak elvégezni „Multi-tasking”. Csakhogy ez nem igaz. Valójában egy feladattal foglalkozni teljes figyelemmel sokkal jobb, mint két feladatot csinálni kevesebb odafigyeléssel. A fókuszt megosztani több feladat között rosszabb minőséghez és sokkal rosszabb hatékonysághoz vezet. Egyszerre csak egy dolgot csinálj és meglátod a hatékonyságod javulni fog akárcsak az elvégzett munka minősége.

Szűkítsd le az időt amit böngészésre fordítasz

Határozz meg időt böngészésre, de csak a munkáddal kapcsolatosan használd. Használj RSS olvasót kedvenc weboldalaid és blogjaid új írásainak olvasásához. Ez sokkal hatékonyabb, mint naponta többször visszatérni, hogy megnézd írtak-e valami újat. Ha már használsz RSS olvasót, érdemes eltölteni egy kis időt a ritkán olvasott feed-ek törlésével. Ezenkívül rendezd a feed-eket mappákba, hogy ne olvass munka közben olyanokat, amik nem a munkához kapcsolódnak.

Csökkentsd a zavaró tényezőket

Határozz meg bizonyos időszakokat az e-mailek olvasására és a közösségi oldalakra. Elég az, hogy nyitva legyen az e-mail és twitter kliensed ahhoz, hogy folyamatosan elvonja a figyelmedet. Döntsd el, hogy mennyi időt szentelsz nekik. Például úgy dönthetsz úgy, hogy naponta kétszer olvasol e-maileket és válaszolsz rájuk. Az olyan feladatokat, mint ezek, legjobb egyszerre nagy tételben intézni. Mit gondolsz, melyik tart tovább, elolvasni és válaszolni 30 e-mailre folyamatosan egész nap, vagy elintézni az egészet egy szuszra.

Legyél szervezett

Egyesítsd az e-mailjeidet

Sokan használunk több e-mail címet. Miért nem olvassuk az összes e-mailünket egy helyen? Ha nem csak egy e-mail címed van regisztrálj a Gmail-en. Ez egy ingyenes és messze a legjobb webes e-mail kliens. Miután beállítottad, le tudod tölteni az e-mailjeidet az összes címedről egy helyre. Ezen kívül be tudsz állítani szűrőket az e-mailek szervezéséhez, hogy mindegyik gyorsan a helyére kerüljön. Ezek után az összes e-mailedet kezelheted egy kényelmes helyen.

Használj címkéket az e-mailek szervezéséhez

A Gmailnél címkék vannak mappák helyett. A címkék úgy viselkednek mint a mappák, kivéve, hogy egy e-mailhez több címkét is rendelhetünk, ahelyett, hogy csak egy darab mappa mélyén tárolnánk őket. Nevezd el a címkéket (vagy a mappákat, ha nem használnál Gmail-t) olyan nevekkel, mint például: „Sürgős” vagy „Ellenőrizni” az üzenetek priorizálásához, nevezd el őket például „Számla Infó” vagy „Weboldal ügyfél” hogy a levelek kapcsolódjanak az egyes feladatokhoz, ügyfelekhez.

Frissítsd az összes közösségi hozzáférésedet egyszerre

Az internet nagyszerű dolog új ügyfelek megtalálására, az iparági trendek megismerésére és tartani a kapcsolatot a kollégákkal. Legtöbbünknek van hozzáférése számos közösségi weboldalhoz, mint a Twitter, Facebook vagy a Flickr. Az adatokat frissen tartani az mindegyiken nagy kihívást jelent, talán nem kell mondanom, hogy rengeteg időt elvesz. Ahelyett, hogy egyenként látogatod ezeket az oldalakat, miért nem frissíted őket egy helyen? Egy közösségi aggregátorral tartani tudod a kapcsolatot valamint frissítheted az összes hozzáférésedet egy helyen, egy időben.

Rendezd be az irodádat megfelelően

Tiszteld az irodádat

Tartsd az irodát tisztán és rendben. Csak a fontos dolgokat tartsd az asztalon: számítógép, telefon, nyomtató stb. Egy zsúfolt íróasztal negatívan befolyásolja a hangulatodat, ami befolyásolja a munkádat. A rendetlenség visszafogja a hatékonyságot. Szánj időt arra, hogy minden dolog, amire szükséged van legyen kéznél. A munkaeszközök keresése, séta a nyomtatóhoz és az egyéb apró tevékenységek nagyon elpocsékolják az időt.

Helyezd kényelembe magad

Tedd a munkahelyed kellemessé azzal, hogy kinyitod az ablakot amikor jó az idő, vagy azzal, hogy a kedvenc zenéidet hallgatod. Az a hely ahol dolgozol nem lehet egy sötét lyuk ahol rabszolgának érzed magad egész nap. Érezd jól magad ahol vagy. Fektess be egy ergonomikus székbe, billentyűzetbe, egérbe. A hátfájástól vagy kéztőcsatorna szindrómától (az mi?) nem leszel hatékonyabb. Nézz utána az ergonómiai cikkeknek, hogy megtanuld hogyan legyen az irodád komfortosabb és egészségesebb.

Légy mobil

Az egyik legjobb dolog a szabadúszásban, hogy nem kell elmenned minden nap ugyanarra helyre. Ha úgy érzed, hogy megakadtál, változtass a dolgokon úgy, hogy elmész a közeli kávéházba, könyvesboltba vagy akár a parkba. A környezet megváltoztatása segít megvilágítani a dolgokat és a legtöbb város már rendelkezik ingyenes Wifi hozzáféréssel (valahol külföldön). Csak csapd a hónod alá a laptopot és indulj.

Kérj segítséget

Add ki

Fontold meg egy asszisztens alkalmazását. Több dolgot tudsz elvégezni, ha nem kell olyan dolgokkal foglalkozni mint az iktatás, baktatás, számlázás, hanem azzal foglalkozol amihez a legjobban értesz. Add át a könyvelést egy profinak. Egy könyvelő ezt tökéletesen megcsinálja, és egyel kevesebb dologgal kell foglalkozni.

Tanulj a többi szabadúszótól

Látogasd gyakran a szabadúszó fórumokat és lépj kapcsolatba a kollégákkal. Sok tudást és új ötleteket osztanak meg ezeken a fórumokon minden nap. Megtanulhatsz olyan dolgokat, mint hogy hogyan bánj az ügyfeleiddel vagy melyik a legjobb számlázóprogram. Legyél tag, és arasd le a gyümölcsét az olyan szabadúszók kollektív tudásának mint amilyen te is vagy.

További források

Ne állj meg itt. Nézd meg ezeket a nagyszerű forrásokat amik a termelékenységről szólnak.

Szabadúszóvá válás

Egy nagyszerű blog szabadúszóknak.

Minden a szabadúszásról

Szabadúszóknak szóló munkák, cikkek és egyebek.

Szabadúszó mappa

Több szerző által jegyzett blog segítendő a vállalkozókat és a szabadúszókat.

A Szerzőről

Tim Mercer lelkes fotós, dizájner, művész és blogger. Blogja a digitális művész eszköztára olyan ingyenes forrásokat ad a digitális művészek és dizájnerek kezébe, mint tutoriálok, interjúk művészekkel és dizájnerekkel, inspiráció és sok más.

A fordítás az alábbi mű alapján készült: 6 Simple Ways For Freelancers To Increase Productivity Várom a fordítással kapcsolatos visszajelzéseket is, mivel ez az első fordításom középiskola óta (ott meg nem ment valami jól.)

Egyébként azt gondolom, hogy ez a cikk nem csak szabadúszóknak készült. Ma Magyarországon elég sok munkahelyen is szabadon engedik a dolgozókat. Az ilyen helyeken is nagyon közös érdek a hatékonyság.

Drupal Atrium

Azt gondolom, hogy a Drupal nem csak egy egyszerű CMS rendszer, hanem egy fejlesztői platform. Sok-sok olyan modul van, amely más esetben önálló szoftverként is megállná a helyét, de így, modulként egy nagyobb rendszer része lesz, amely egyszerűen beilleszthető. Példának itt van az Ubercart modul-csoport amely egy webáruházat valósít meg, igen színvonalasan.

Aki drupal alatt fejleszt annak kb. annyi a dolga, hogy megkeresi a megfelelő modulokat, beállítgatja. Esetleg, ha az adott problémához nem létezik modul, ír hozzá egyet. Megcsinálja a sminket, hogy szép legyen (ne látsszon rajta, hogy drupal-lal készült) és kész is.

Viszont ez így elég bonyolult, ráadásul a web tipikus problémák gyülekezete, ezért kitalálták a telepítési profilokat. Ezek már önálló szoftverek drupal alapokon, tipikus problémákra.

És akkor itt van ez az OpenAtrium, ami egy csoportmunka-támogató telepítési profil. Szép is, okos is, érdemes megnézni.

NetBeans 6.7

A mai napon kijött (egyik) kedvenc szövegszerkesztőm fejlesztési környezetem a NetBeans IDE 6.7-es verziója.

PHP fejlesztőknek talán a PHPUnit támogatás, (legalább elkezdünk teszteket is írni) illetve az SQL kód kiegészítés lehet érdekes. (Az igazán nagy fejlesztések a 6.5-ös verzióhoz kapcsolódnak.) Ezenkívül a bejelentésben hallottam először a Selenium-ról, amitől tényleg leesett az állam. Erről nemsokára egy külön írás formájában tudósítok, de addig is nézzétek meg.

Egyébként azért a kedvencem a Netbeans, mert nagyon gyorsan hadra fogható IDE. Ha csak a PHP-s verziót használjuk, az 26 mega (kitömörítve kb. 100). Van hozzá egy halom plugin (pld. UML). Van benne adatbázis kliens, kódkiegészítés, ráadásul az egész projectben lévő függvényneveket, osztályneveket, konstansokat is ki tudja egészíteni illetve megjeleníteni a dokumentációjukat.

Gyorsteszt

Edgár ötlete alapján összehasonlítottam a gépeken futó böngészőket. A linkeken a részletes eredmények láthatóak.

87.58 runs/s Firefox 3.5b4

14.80 runs/s Opera 9.64

98.71 runs/s Safari 4 Public beta 528.17 

25.53 runs/s  Firefox 3.10

253.93 runs/s  Chrome 2.0

Ezek alapján az új firefox több mint 3 és félszer gyorsabb, mint a 3-as, viszont a safari is gyorsabb valamelyest, viszont a Chrome mindenkit magasan ver.

 

 

Kierjesztések frissítése - frissítve

Vigyázat! Az alábbiakkal veszélyes vizekre evezünk!!!

Nem bírtam már kivárni míg megjelenik a stabíl 3.5-ös verzió, ezért telepítettem a 3.5 beta4-et. Viszont egy-egy verzióváltásnál egy időre mindig le kell mondanunk kedvenc kiterjesztéseinkről. Vagy mégsem?

Azt, hogy egy firefox extension kompatibilis-e az adott firefox verzióval, az extension könyvtárában lévő install.rdf file egy része írja le. Ez a file
windows alatt a %APPDATA%\Mozilla\Firefox\Profiles\
linux alatt a ~/.mozilla/firefox/profiles/ könyvtárban van egy mczgb7up.default-hoz hasonlító nevű könyvtár ebben is egy extensions nevű, itt laknak a kiterjesztések. Máshol is lehetnek, de amiket mi telepítettünk fel, azok itt vannak. Mielőtt bármit csinálunk, még az új verzió installálása előtt érdemes lementeni valahova ezt a könyvtárat.

Az ebben lévő könyvtárnevek nem sokat árulnak el a bennük levő kiterjesztésről, ezért sokat segít, ha feltesszük az Extension Manager Extension-t. Ez nem tud egyebet, mint hogy megmondja egy kiterjesztésnek az ID-ját, ami megegyezik a könyvtár nevével. 

Az install.rdf file-ban az a rész amely megmondja, hogy melyik verzióval kompatibilis valahogy így néz ki:<em:targetApplication>
   <Description>
     <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
     <em:maxVersion>3.0.*</em:maxVersion>
     <em:minVersion>1.0</em:minVersion>
   </Description>
</em:targetApplication

Ebben ami érdekes az

<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

sor. Ez azt mutatja, hogy firefox kiterjesztésről van szó. (Egy kiterjesztés több programmal is együtt dolgozhat, ezért lehet több ilyen targetApplication-unk egy file-ban.) Gondolom mindenki kitalálta, hogy a

<em:maxVersion>3.0.*</em:maxVersion>

sor mondja meg a kiterjesztést. Most már csak annyi a dolgunk, hogy a 3.0.*-ot kicseréljük mondjuk 3.5-re és már működik is az adott kiterjesztés, miután újraindítottuk a firefoxot. Mivel itt a verziókkal kavarás volt, lehet, hogy a 3.1 is működik, a 3.6a1pre pedig biztosan.

Előfordulhat, hogy egy olyan kiterjesztésre van szükségünk, ami nincs az adott verzióhoz. Ilyenkor mentsük le, nevezzük át .zip-re, bánjunk vele úgy és miután átírtuk az install.rdf-et nevezzük vissza és telepítsük.

Az új firebug elég nehézkesen működik legjobb, ha bekapcsoljuk az Off for all web pages opciót, és csak akkor kapcsoljuk be, ha tényleg szükség van rá.

FRISSÍTÉS

Ahogy nézem az új firefox valahogy cache-eli a kiterjesztések adatait. Erre azt a megoldást találtam, hogy azokat a könyvtárakat, amiket nem sikerült frissíteni, lemásoljuk valahová, majd az Eszközök/kiegészítők részben töröljük. Az újraindítás után lépjünk ki a firefox-ból, másoljuk vissza a kiegészítéseket és indítsuk el a firefox-ot.

Tree style tabs

A tab-ok kezelése sok megnyitott weboldalnál egy idő után már elég nehézkes. Az acrobat Google reader idejében már percenként nyitunk meg oldalakat. Úgy csinálom, hogy az érdekesebb cikkeket megnyitom, és olvasom tovább a readert. Ráadásul a google keresések és találatok is új tabban (van erre valami magyar szó?) jelennek meg, így igen gyorsan tele leszek fülekkel. (Egy idő után tényleg több fülem lesz mint fogam.) Nos, erre a problémára is régóta keresem a megoldást, és jelenleg a legjobbnak a Tree style tabs nevű tűnik.

Egyrészt, mint a neve is mutatja, az egymáshoz tartozó oldalakat fa struktúrában mutatja, így jól látszanak az összetartozó weboldalak. Ráadásul ha egy másik ágat választunk ki, akkor a többi összecsukódik. Lehetőség van a fülek pozicionálására, illetve elrejtésére.

Persze, ha valakinek van valami jobb megoldása a tabokra, kíváncsian várom, viszont, ha elborítanak a tabok, mindenképpen javaslom kipróbálásra.

A szín és a méret

Nagy nehezen sikerült beizzítani ezt a feedburner cuccot, sajnos nem olyan kezesbárány, mint az elöbb említett AddThis. Először a számlálós fajtáját akartam feltenni, de nagyon használhatatlan volt, a színeken meg az animáláson kívül semmit sem lehetett rajta testre szabni. Közben szükségem lett volna egyik kedvenc firefox kiegészítőmre a ColorPicker ColorZilla-ra. Ezzel a kis kiterjesztéssel az oldalon lévő színek kódjára lehet rájönni. Installálás után a bal alsó sarokba kerül, bal gombbal rákattintva (vagy a shift+esc billentyűkombinációt használva) egy kis keresztet kapunk, amivel kiválaszthatjuk az adott elem színét. Nem csak a weboldalon, hanem az egész böngészőablakon működik. Jobb gombbal kattintva pedig kiválaszthatjuk a színt a nekünk tetsző formátumban, amit rögtön a vágólapra is másol. Ezenkívül tudjuk vele az oldalt nagyítani, a színeket analizálni, és van benne még egy színválasztó is.

Egy másik kiegészítő a MeasureIt. amellyel az oldalon lévő méreteket tudunk méricskélni. Ez csak azért került ide, mert ezt a két modult mindig eggyütt szoktam feltelepíteni.

Megosztás

Az előző digg-es bejegyzés után nekiálltam további gombokat rakosgatni ide a jobb oldalra, de a második után eszembe jutott, hogy biztos van egy olyan szolgáltatás vagy script-gyűjtemény ami képes erre. Természetes van, nem is akármilyen az AddThis.com. Pont azt tudja, amire szükségem van és amivel többet tud, - mint kiderült arra is szükségem van. Itt a kód, ami az oldalban is szerepel, hogy ne kelljen a forrást túrni.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_delicious" title="del.icio.us"></a>
<a class="addthis_button_twitter" title="Twitter"></a>
<a class="addthis_button_tumblr" title="Tumblr"></a>
<a class="addthis_button_facebook" title="Facebook"></a>
<a class="addthis_button_google" title="Google"></a>
<a class="addthis_button_netvibes" title="Netvibes"></a>
<br />
<a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button_compact">Máshova</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_email" title="Küldés e-mailben"></a>
<a class="addthis_button_favorites" title="Könyvjelzőbe"></a>
<a class="addthis_button_print" title="Papírra"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=IDEJONEGYKOD"></script>
<!-- AddThis Button END -->
A dolog nagyon egyszerű, bővebb infók az oldalon. További elérhető szolgáltatások pedig itt. Ha esetleg kérdés merülne fel tegyétek fel nyugodtan.

ps1.: Közben a <code> elem stílusát módosítani kellet, mert elég randa volt ebben a sablonban.

ps2.: Közben be is regisztráltam az oldalra, így már mérni is tudom, hogy hányan bookmárkolták az oldalt. A kódban lévő IDEJONEGYKOD helyére kell beírni a felhasználó-nevet.

 

Könyvjelzők kezelése

Könyvjelzők kezeléséhez és a del.icio.us-t használom. Sokáig kerestem egy jól használható könyvjelzős kiterjesztést firefoxhoz, amit végül ugyanezen az oldalon találtam meg.

Miután feltettük, ugyanúgy bookmarkolhatunk bármit, mint eddig (a kis csillag bejelölésével az url-ben, vagy a ctrl+d megnyomásával), csak ezekután a könyvjelzőnket elmenti a del.icio.us-ra is. A felbukkanó ablakban megadhatunk címet (title) egy rövid leírást (notes), taggelhetjük (megadhatunk hozzá kulcsszavakat), illetve beállíthatjuk, hogy mások is láthassák-e (do not share - nem osztom meg).

Ezzel a rövid bejegyzéssel egy sorozatot elindítok el, ahol röviden azáltalam használt firefox kiterjesztésekről írok. Ezen az oldalon pedig összegyüjtöm őket.

Első

Már több mint 11 éve blogolok (bár régen nem így hívták) saját szerveren, saját domain alatt. Most ért be nálam a gondolat, hogy belépjek a cloud-ba, használjam a web2-t immáron blogolásra.

Amikor először lett saját domainem (1998 körül), azért állítottam be egy szervert egy webhosting cégnél, mert a tárhelyen amit adtak nem engedtek php-t futtatni. Akkoriban csak ilyen freeweb szolgáltatók voltak ftp eléréssel, statikus HTML tartalommal. Dinamikus weboldalakat még a fizetős tárhelyeken sem engedtek.

Tovább
süti beállítások módosítása