A ‘(X)HTML’ kategória arhívuma
Analóg óra készítése Photoshop és Flash segítségével, SWFObject rész
Írta: Tas | 2011. július 02. | kategóriák: (X)HTML, JavaScript | Nincs megjegyzésAz előző részekben létrehoztunk egy analóg órát Photoshop segítségével, a mutatókat „elindítottuk” ActionScript-el. A mostani részben Javascript kódot használva beágyazzuk a HTML kódba.
III. rész SWFObject
Az SWFObject – mostantól csak so – egy nyílt forrású Javascript könyvtár, amit a Flash tartalmak gyors és egyszerű beágyazására használhatsz a weblapodon. Nem kell az <object> vagy az <embed> tag-ekkel bajlódni – ez utóbbi nem is standard! A böngészők közti különbségről nem is beszélve, ezért hát elég macerás olyan kódot írni, ami a főbb böngészőkben megfelelően működik. Hogy ezzel ne kelljen szórakozni, segítségül hívjuk a so objektumot. A so csak egy pár sor adatot kér, a többit majd ő intézi (böngésző és Flash player detektálás stb.).
Elolvasom a teljes bejegyzést »
Űrlapok készítése és formázása: CSS és jQuery trükkök
Írta: Tupacko | 2010. augusztus 21. | kategóriák: (X)HTML, CSS, JavaScript, Speciális | 10 megjegyzésSokaknak a mai napig gondot vagy fejtörést okoz az (X)HTML űrlapok készítése. Régen táblázatokkal volt megoldva a formázás, természetesen ez nem helyes szemantikailag. Ha kinézetre nem is feltétlenül változtak a régebbi form-ok, jópár éve már az úgynevezett float-olt technikát használják. Az egyik legnagyobb előnye, hogy az űrlap kódja logikailag is helyes lesz, így az oldalunk elérhetőbb lesz a fogyatékos internetezők számára is (például a látássérülteknek, akik képernyő felolvasót használnak). Ez a leírás megmutatja, hogyan lehet egyszerű és mégis helyes form-okat készíteni, illetve néhány hasznos trükkre is felhívja a figyelmet, ami nem feltétlen a fogyatékos felhasználókat célozza meg, de az átlagfelhasználó életét nagyban megkönnyítheti, felgyorsíthatja annak munkáját.
Elolvasom a teljes bejegyzést »
Firebug: Firefox, Internet Explorer és társai
Írta: Tupacko | 2010. március 06. | kategóriák: (X)HTML, CSS, Design, JavaScript, Letöltések | 4 megjegyzésMinden webfejlesztő rémálma, tisztelet a kivételnek, hogy az elkészült weboldalt Internet Explorer összeférhetővé tegye. Bár a Microsoft webböngészőjének újabb változatai már eléggé standard követőek és szépen jelenítik meg a weboldalak túlnyomó többségét, mégis szükség van a weboldalak trükkös kódokkal való teleszúrkálására, mivel sokan használnak régebbi böngészőket.
Elolvasom a teljes bejegyzést »
10 hasznos dolog weboldal fejlesztőknek
Írta: Tupacko | 2009. október 21. | kategóriák: (X)HTML, CSS, Speciális, Web | 9 megjegyzésÖsszegyűjtöttem néhány eszközt, ami szükséges lehet, de minden esetre megkönnyíti a weboldal fejlesztők és weboldal tulajdonosok dolgát. Röviden szó lesz böngésző független designolástól, logógeneráláson keresztül a legtöbb fejfájást okozó dolgokról.
Fájlok feltöltése PHP használatával
Írta: lowert | 2009. július 14. | kategóriák: (X)HTML, Alapok, PHP | 84 megjegyzésA leírásban azt fogom bemutatni, hogy hogyan lehet elkészíteni egy egyszerű képfeltöltő rendszert PHP-ban. Először is, készítsük el az alábbi mappastruktúrát:
az “upload_files” mappa fogja tárolni a feltöltő rendszert, kód szempontjából mindegy, hogy mi a neve. Elolvasom a teljes bejegyzést »
Az “uploads” mappa ad helyet a feltöltött fájljainknak, az “upload.php” pedig a rendszer motorjaként szolgál.
Internet Explorer height probléma
Írta: Tupacko | 2009. június 08. | kategóriák: (X)HTML, CSS, Design | 3 megjegyzésBizonyára már többen is belefutottak abba a problémába, hogy míg a legtöbb böngésző helyesen kezeli azt a megszorítást miszerint egy elem magassága nulla, addig az Internet Explorer különféle bajokat okoz. Hol is vehetjük hasznát egy nulla magasságú elemnek? Például van, hogy több float-olt elemet el szeretnénk választani az oldal egy lebegés mentes részétől: a tartalom és az oldalléc lebeg és elszeretnénk választani a lábléctől.
Egy elméleti megoldás az elválasztási problémára, hogy készítünk egy CSS osztályt, ami magassága nulla és clear: both tulajdonsággal bír. A gond az, hogy bár a Firefox és az IE 8 helyesen kezel minden esetet, ahol a height paramétert valamiféleképpen lenulláztuk, az IE 6 és IE 7 különbözően viselkednek.
Elolvasom a teljes bejegyzést »
Accessibility és SEO: alternatív szövegek
Írta: Hutchington | 2008. december 01. | kategóriák: (X)HTML, CSS, SEO, Web | 5 megjegyzésA probléma
Egy weboldal grafikai tervezésénél, ha a SEO és Accessibility szempotokat is figyelembe veszünk, nem használunk olyan szöveges elemeket, melyeket majd képként kell megjelentíteni. Nem használunk például élsimítást a szöveghez, hogy az a valóságban is szövegként (pl: <h1>Lorem Ipsum</h1>) jelenhessen meg.
Ez azért fontos, ha a keresők ráfutnak az oldalra, akkor a hasonló elemeket valóban szövegnek ismerje fel, mert ugye ha az egy kép (főleg alternatív szöveg hiányában), akkor nem “látja”. Mitöbb a látássérülteknek készült olvasóprogramok sem tudják megfelelően kezelni, magyarán nem tudja felolvasni a látássérült ember számára.
Ám nem mindíg tudjuk elkerülni ezek használatát, például egy a fejlécben levő logó esetében.
Elolvasom a teljes bejegyzést »
CSS: menü villogás kivédése
Írta: Hutchington | 2008. november 23. | kategóriák: (X)HTML, CSS, Design, Web | 10 megjegyzésA probléma
Legtöbb esetben a sitebuilderek a menügombokat úgy oldják meg, hogy a gomb minden állapota egy külön kép. A probléma az, hogy például egy a:hover vagy a:active állapotváltozásnál, ha a felhasználó a gomb fölé viszi az egeret, eltünik a háttere amíg a hover állapothoz kapcsolódó képet le nem tölti.
[A régi szép időkben, amikor az ilyen egyszerű menüket JavaScript-el csinálták, volt egy opció erre amit preload image-nek hívtak, ám a jelen megoldás egyszerűbb, és szemantikailag, illetve SEO szempontjából is helyes kódot kapunk.]
Elemek újraméretezés az ablakméret változásakor
Írta: Tupacko | 2008. május 04. | kategóriák: (X)HTML, CSS, JavaScript, Web | 13 megjegyzésBiztos vagyok benne, hogy már többetek fejében megfordult a gondolat, hogy bizonyos elemeknek új méretet kellene adni az ablak újraméretezése esetén. Nem nagy szó, CSS. Igen ám, de mi van abban az esetben, hogyha egyes elemek, mint például egy űrlap elemei dinamikusan fix egy százalékban kifejezett értékből kivont képpontokban meghatározott mérték szélességű.
Példa
Az oldal dinamikusan váltja a szélességét az ablakmérettől függően. Ráadásként, az oldal tartalmi része dinamikus szélességű, míg az oldaléc fix értékkel rendelkezik. A tartalmi részben van egy űrlap, ami dinamikusan kell változtassa a méretét a tartalmi rész szélességétől függően.
Elolvasom a teljes bejegyzést »
Darabolás mentes hivatkozás képeken
Írta: Tupacko | 2008. május 03. | kategóriák: (X)HTML, Alapok, CSS, Design | 2 megjegyzésEz egy rövid példa arra, hogy miként lehet egy háttérképre, például a fejléc hátterére, linket tenni, pl. a logóra. Természetesen ebből az következik, hogy nem szükséges a kép felvágása, csupán XHTML és CSS segítségével kivitelezhető. A megoldás egyaránt valid és cross-browser.
1. lépés
Helyezzünk egy linket a kérdéses helyre. Én a fejlécben szeretnék egy kattintható felületet a logónak, ami visszamutat a főoldalra.
1 2 3 | <div id="header"> <a href="index.html" title="" id="logoLink"> </a> </div> |