2009. április 26., vasárnap

"Az igényeim telefonja" visszatekintés

Most olvastam vissza egy 2006-os írásomat egy korábbi blogomban az UnderConstruction-ön. A címe: "Az igényeim telefonja". Nézzük mit akartam akkoriban:
  • A kijelzője legyen nagy, és nagyfelbontású, lehetőleg szélesvásznú (pl. 640×360);
  • Touchscreen(?), bár nem tudom mennyire lehetne szerencsés ez egy telefonnál;
  • Bluetooth és WLAN;
  • Normális, szabványos böngésző Flash, JavaScript, CSS (és AJAX) támogatással;
  • A kamerája tegye elérhetővé, hogy videohívásokat is tudjak lebonyolítani;
  • Ebből következően legyen 3G kompatibilis;
  • Skype támogatás a WLAN-on keresztül, ha elérhető a hálózat;
  • Lehetőleg az OS ne Symbian legyen, bár nem tudom mi nyújthat még ekkora fokú bővíthetőséget;
  • Office-dokumentum és PDF kezelő alkalmazás, lehetőleg írásra/olvasásra is;
  • POP3 E-mail kliens, ami működik is(!);
  • Minimalista megjelenés, nem kellenek vibráló LEDek, meg futófény és rajzolni sem szeretnék a fénnyel.
És most végigolvasva a listát, majd' teljesült a kívánságom. Már több, mint egy éve használom az első generációs iPhone-t, ami teljesíti a kívánságaimat! Ami érdekes, hogy az idő igazolta, hogy igenis használható a touchscreen. Az office dokumentumok módosítása pedig azóta mégsem hiányzik a videótelefonálással egyetemben.

2009. április 23., csütörtök

step-by-step

Avagy, ha arra vetemedünk, hogyan is fogjunk hozzá a tanulásnak.

Webszerkesztő / sitebuilder:

  1. Legyünk képesek a Photoshop használatára, legalább alapszinten.
  2. Tanuljunk meg angolul, ugyanis minden(!), amire szükségünk lesz, angolul írják — maximum lefordították már magyarra / németre, de az soha sem pontos;
  3. A web elengedhetetlen nyelve a HTML, ezért olvassuk át tüzetesen a w3c HTML referenciáját;
  4. Mivel szemantikus és táblázatmentes oldalt akarsz csinálni, nem törődve az elavult technológiákkal, ezért szükséged van a Cascading Style Sheets alapos megismerésére;
  5. Ezután, elképzelhető, hogy ki kell egészítened a készítendő oldaladat diszkrét JavaScript-tel (más néven ECMAScript), így annak sem árt, ha tudod, hol van a referenciája. Illetve, hogy hol vannak az MSIE specifikus dolgok leírva;
  6. Fontos továbbá a DOM és az AJAX ismerete is, a jelenlegi tendenciát figyelembe véve, így ezek ismerése is hasznos lehet a további munkáid során.

Webfejlesztő:

  1. Tanuljunk meg angolul, ugyanis minden(!), amire szükségünk lesz, angolul írják — maximum lefordították már magyarra / németre, de az soha sem pontos;
  2. A web elengedhetetlen nyelve a HTML, ezért olvassuk át tüzetesen a w3c HTML referenciáját;
  3. Nem árt, ha tudod, hol van a referenciája a JavaScript-nek (más néven ECMAScript). Illetve, hogy hol vannak az MSIE specifikus dolgok leírva;
  4. Fontos továbbá a DOM és az AJAX ismerete is, a jelenlegi tendenciát figyelembe véve, így ezek ismerése is hasznos lehet a további munkáid során;
  5. Ezekután jöhet az, amit tulajdonképpen tanulni is akartál, magának a programozási nyelvnek a megtanulása. Az mindegy, hogy Perl, PHP, Python, Ruby vagy ASP.
  6. Kifelejtettem egy fontos dolgot, most pótlom. Tehát a komplexebb rendszerek kialakításához, ami kicsivel több már, mint egy “Hello World!” progi, általában szükséged van valami adatbázis használatára is. Ez többféle lehet, sokan használják a MySQL. Kisebb feladatokra ott van az SQLite, de ha jót, gyorsat, okosat akar az ember, akkor érdemes komolyabb adatbáziskezelőt használni, mint például postgreSQL.

Továbbá fontos lehet még pl. XML, XSL és XSLT vagy SOAP ismerete is és még sorolhatnánk, de azok már mind-mind feladatfüggő tudások, melyeket — persze feladattól függetlenül is, csupán kedvtelésből –, akkor kell csak megtanulnunk, ha szükségünk lesz rájuk.
És egy fontos dolgot ne feledj, mielőtt bármilyen kérdést is felteszel levelezőlistán, fórumon, chaten, bárhol, a manuálokban mindig minden benne van, csak a megfelelő helyen kell keresned. Gondold végig mit akarsz csinálni. Például mivel dolgozol — string, array, stb. –, és akkor a manuálnak egyből a megfelelő részén tudod keresni a megoldást. Ha netán nem lenne meg, vagy valami hibaüzenetet kapsz, hibajelenséget tapasztalsz, keress rá google.com-on, biztos, hogy az első pár találatban, de az első két oldalon ott lesz a megoldás a találatok között. Nem te vagy az első, aki belefutott ezekbe a problémákba, hiszen most kezdted az egészet. Nem fogod feltalálni a spanyolviaszt, még ha úgy gondolod is.

A listákról, fórumokról, csatornákról

Igen, akik segítenek, le fognak szólni, mert olyat kérdezel, amit te magad is megtalálhattál volna. Akik ott vannak, nem az a dolguk, hogy válaszoljanak. Ők egy közösség része, akik segítenek, ha úgy ítélik meg, érdemes az illetőn segíteni és látszik rajta a tanulásvágy!

Remélem tanulsz ebből is!

2009. április 16., csütörtök

Képes inline gombok létrehozása sprite-tal CSS-ből

Gondoltam megosztom veletek, hogyan is szenvedtem végig, mire végre minden böngészőben ugyanúgy nézett ki.

Adott ez a HTML kód:

<a href="#">gomb</a>

CSS:

a {
    display: inline-block;

Sprite pozicionalasa a gombunknak.
    background: url(mysprite.gif) no-repeat 0 0;

A majdan kilogo szoveg elrejtese
    overflow: hidden;

A gomb mereteinek megadasa
    width: 16px;
    height: 16px;

Kitoljuk a szoveget a gombon kivulre
    text-indent: 16px !important;

Az elozo sorban levo !important azert kellett, hogy a "modern" bongeszok figyelmen kivul hagyjak a kovetkezo sort!
Internet Explorer 6 es 7 alatt is ha text-indent-et adunk egy inline-block elemnek, akkor azt margokent alkalmazza azt.
    text-indent: 0;

Firefox 2 nem ismerte meg az inline-block tipust.
    display: -moz-inline-box;

Firefox 3 alatt az 1px-es font meretet nem jelenitette meg, ha be volt kapcsolva, hogy minimum mekkora legyen a megjelenitheto betumeret. Emiatt megjelenhetett egy 1px magas "csik", ami a szoveg volt. Ez a betumeret eleg ahhoz, hogy a szoveg kicsusszon a kerning miatt.
    font-size: 100px;

Internet Explorer figyelmen kivul hagyja a height+overflow tulajdonsagokat, ha nagyobb a font meret a height-nel, es szethuzza a font meret megjelenitesehez szukseges meretre az elemet.
    line-height: 1px;

Amennyiben ez nincs megadva, Internet Explorer alatt osszevissza jelennek meg az elemek.
    vertical-align: top;

A tobb szavas szovegek becsuszhattak a megjelenitesbe Firefox 3 alatt.
    white-space: nowrap;
}