Én így fejlesztek

Ma úgy gondoltam összedobok egy kis leírást azokról a progikról/oldalakról, amiket fontosnak tartok a webes fejlesztéseimhez. Szerencsére ez egy olyan munka, amit bárhonnan lehet végezni és még otthonról sem kell kimozdulni (de egy laptot + pendrive és máris új munkahely).  Persze ha neten kell dolgozni, jó ha a laptop mellé befigyel egy kis mobil internet vagy egy közeli WiFi HotSpot.

Ezt a bejegyzést főként a kezdőknek ajánlom, akik egy része engem is zaklat… Már nem kell tovább.

Néhány alap dolog, amit érdemes tudni:
A lehető legjobb módszer, ha a helyi számítógépünkön tárolunk mindent a fejlesztés alatt lévő weblappal kapcsolatban (fájlok + adatbázis). Azonban ez nem elég ahhoz, hogy teszteljük is, amit összehoztunk, ezért szükség van egy nagyon fontos programra/programcsomagra. Tegyük fel, hogy a leg általánosabb fejlesztői környezet pont megteszi nekünk, ezért szükségünk lesz a PHP + mySQL és az Apache szolgáltatásokra.
A PHP a fejlesztői nyelv maga, aminek legtöbb esetben HTML a kimenete, a mySQL az adatbázis kezelő szolgáltatás, az Apache pedig a webkiszolgáló.
Annak ellenére, hogy nem vagyunk rácsatlakozva a netre, szükség van az Apache-re is, hiszen ez végzi a HTTP lekérések teljesítését.

Ajánlott környezet: XAMPP 1.7.2
Az alkalmazás feltelepítés után a helyi gépünkön elérhetővé válik a PHP kódok futtatása és szerver imitálása. Ebben az esetben a 127.0.0.1 vag http://localhost oldalon keresztül érhetjük el (és php esetében futtathatjuk) a fájljainkat.
A fájlokat a XAMPP telepítési könyvtárának /htdocs/ almappájában találjuk (alapértelmezett esetben: c:/program files/XAMPP/htdocs) és ezeket a böngészőbe a 127.0.0.1 mögé beírva el tudjuk érni.

Példa: c:/program files/XAMPP/htdocs/alma.php fájl eléréséhez a 127.0.0.1/alma.php címet kell bírnunk a böngésző címsorába.
Ezt követően az Apache beindul, átadja az alma.php fájlt a PHP-nak ami lefuttatja a fájl kódját, ha a kód kéri, a mySQL is beszáll és az adatbázis kezelés is elérhetővé válik.

Maga a fejlesztés:
A fejlesztéshez főként egy PHP/HTML/JavaScript/CSS kód kiemelős alkalmazásra van szükségünk. Ez a része a feladatnak korántsem ilyen egyszerű, hiszen ez már nem a programokon múlik, hanem a szakmai tudáson. (Amire utánnaolvasással tudunk szert tenni.)

Ajánlott Programok fejlesztéshez (kezdőknek):
Frontpage (fizetős, magyar) – A Microsoft irodai csomagjának grafikus honlap kreáló progija.
Dreamweaver (fizető, próbaverzió, angol) – Az Adobe grafikus HTML szerkesztője.
NVU (ingyenes, magyar) – Kevésbé felhasználóbarát, grafikus HTML szerkesztő.

Ajánlott Program fejlesztéshez (haladóknak):
Notepad++ (ingyenes, magyar) – Népszerű szerkesztő, hiszen ingyenes, magyar és sok mindent tud.
phpDesigner 7 (fizetős, próbaverzió, magyar) –  Én ezt használom, profi progi, megéri a pénzét.

A kezdő és haladó progik közt annyi a különbség, hogy utóbbi főként a tudásra épít, míg az elsők a grafikus tervezésre, azaz programozási tudás nélkül és létrehozhatók weblapok.

Sose legyünk hetekig a szobánk rabjai, ha mégis, legalább másokkal is beszéljünk:
twitter.com – Micro Blog szolgáltatás. Sokak közt a Yamm.hu és a Turulcsirip.hu is erre épül, tehát ezek nem különálló Micro Blog szolgáltatások.
facebook.comKözösségi oldal, pontosan mint a magyar MyVip.hu és iWiW.hu is.
+MSN massenger & Skype – Azonnali üzenetváltó progik, jó dumálni ismerősökkel még ilyenkor is.
// a.) Ha nincsenek ismerőseink ezeken a hálózatokon, ideje szerezni párat.
// b.) Azért csak óvatosan ezekkel a cuccokal, mert könnyen elvonják a figyelmet.

Ügyeljünk a szórakozásra is, kell a móka és kacagás, hiszen a boldog ember dolgozik jól:
Youtube.com – Videók és jó kis zenék, ez fontos hely a kikapcsolódásra.
RSS olvasó – keressünk nekünk tetsző oldalakat, gyűjtsük be az RSS linkjeiket és olvasgassunk néha, ha már a régi oldalakon nem szörfözünk. (RSS olvasóval gyorsabb és több idő jut minden másra)
+Zene hallgatás – Személy szerint nagyon fontosnak tartom, hogy szóljon vmi jó kis zene fejlesztés közben, úgy nem ül az ember a kukaságban.

Ne fél segítséget kérni:
php.net – A PHP hivatalos oldala, felül lehet keresni bármilyen függvényre, nagyon hasznos oldal.
prog.hu – Nagyszerű közösség rengeteg segítőkész taggal, bármire válaszolnak.
google.com – Gondold végig mit keresel és nézz végig pár lapot, de csak okosan…

A google a barátod.

Cikk folytatása

Fugue Icons – Minőségi Ikonok

A minap dolgoztam egy új projektemen és szokás szerint feltúrtam a netet pár jó minőségű ikon után. Ha ikont keresek akkor mindig az IconFinder.net oldallal indítok mert több mint 125.000 ikonjuk van készleten ami a világon a legnagyobb ilyen téren.

Fugue Előnézet

Visszatérve a Fugue Ikon készlethez: A csomag teljesen ingyenesen hozzáférhető és kifejezetten 16×16-os méretű ikonokat tartalmaz (külön árnyékkal és nélkül).
Az ikonkészlet meglehetősen nagy 2430 darabból áll. Az ikonok egytől-egyik kifogástalan minőségűek és amellett, hogy ezt mind ingyen használhatjuk minden ikon PSD fájlját (amik mellesleg 32×32-es ikonokat tartalmaznak) is megkapjuk a letölthető csomagban.

A bejegyzést azért raktam ki, mert 2009 December 15-én kijött egy bővítése (2.4.4f). Fugu Icons 2.4.4f LETÖLTÉS INGYEN és ahogy sokan mondanák Download FREE.

Cikk folytatása

Highcharts – Interaktív Grafikonok

Amikor megláttam a Highcharts Javascript Könyvtár képeit, azt hittem egy újabb flash grafikon könyvtárral állok szemben. Gyorsan meg is néztem, mert elég jó minőségű és letisztult grafikát ad. Amikor megnyitottam, gyorsan jobbkattintottam, hogy van-e flash menü… és láss csodát, nem volt.

A Highcharts nagyon hasznos alkalmazás az adatok interaktív grafikus ábrázolásához, főleg azért meg elég neki a Javascript környezet + jQuery vagy MooTools . Ami a kompatibilitást illeti, kiválóan működik minden böngészőben, iPhone-on és még IE6-on is. Alapvetően Canavas és SVG-t használ a megjelenítéshez, ám az IE itt is kilóg a sorból a régebbi VML renderelésével.
A Highcharts támogatja a szokásos grafikon típusokat:  vonal grafikon (line chart), oszlop diagram, terület diagram, pont, lépcső, bar grafikon (bar chart), gyertya (vagy más néven japán gyertya) grafikon. (Ezeket persze még kombinálhatjuk is)

Aki igazán profi és plugint (flash vagy java) NEM igénylő grafikonokat akar az oldalára, annak ez a tökéletes alternatíva.

Highcharts Galéria

// Ha gyorsan ki szeretnéd próbálni a cuccot, akkor a Highcharts DEMO oldalán egyből megteheted.

Cikk folytatása

404? Hol?

Épp HTML5 ujdonságok után keresgéltem és valahogy szembe jött egy jó kis oldal. Az oldal célja röviden annyi, hogy szeretnének 5leteket adni 404-es hibaoldalak kivitelezéséhez.

Ami azt illeti, a BurninGames is fog kapni valami szép kis hibaoldalt:P illusztrációval meg minden. Még nem tudom pontosan mi lesz, de láttam pár nagyon nagy 5letet.

  • Egy könyv, ami a 404. oldalon van nyitva… arra az oldalra pedig oda van írva a rizsa, hogy “A lap nem található”.
  • Homer Simpson áll, mellete a tábla (tudjátok, minden Simpsons család elején Bart irogat a táblára). Szóval Homer nyomja a “D’oh!” szövegét:D Bart pedig felírja, hogy a lap nem található.
  • Fehér lap, felírva, hogy 404-es hiba alul pedig mintha ki lenne szakadva a monitor, látni a forráskódot.
  • Mint az amcsi filmekben, ott a tejesdoboz, rajta a kép, és mellé a szöveg, hogy sehol sem találni:D Hát ez valami nagyon nagy:D erre húz a szívem.
  • A Twitter hibaoldala sem semmi, a kis szaggatott madárka:) elég kreatív az is.
  • Nem utolsó sorban a “kézzel írott” írott dokumentumok sem rosszak.
  • Jó 5letnek tartom, hogy valami játék kerüljön a hibaoldalra:)

Egy kis kezdő löket:
http://www.backtoessentials.com/showcases/a-collection-of-404-error-pages/
http://www.smashingmagazine.com/2009/01/29/404-error-pages-one-more-time/

Cikk folytatása