ugrás a tartalomhoz

Weboldal véleményezés

Ozirisz · 2014. Júl. 31. (Cs), 07.15
Üdv Mindenkinek!

Hobbi szinten készítettem egy weboldalt, és fejlesztgetem, bár még messze nem tökéletes.
Maga a weboldal egy szerepjátékos fórum közösségének készült, amelynek én is tagja vagyok, és az ottani dolgokkal foglalkozik (felszerelések listája, karakterlapok készítése, nyersanyagok nyílvántartása, mesélőknek sorrend és dobások kiszámítása, ...).
Fő szempont volt a kompatibilitás (pl. IE6-on is használható, igaz kicsit szétcsúszik a teteje) és a viszonylag kis adatforgalom (nem mindenkinek van gyors netkapcsolata, és nem vagyok híve a többmegás csicsáknak amit elég sok helyen látni).
Letiltott JS-el is használható marad, igaz akkor pl. a sorok elrejtése/megjelenítése nem megy kattra, meg 1-2 színezés (input értéke negatív érték esetén nem lesz piros), de a funkcióját ellátja.
Az alapértelmezett stílus az abszolút leegyszerűstett, a SAO stílus pedig a fanok miatt készült, igaz ez JS nélkül nem megy, és ezért nem is alapértelmezett.

Az oldal: http://users.atw.hu/ozirisz/sao/
Szeretnék róla véleményt kérni, észrevételeket, építő kritikát, hogy mi jó/mi nem jó, mit lenne érdemes máshogy csinálni, mi elavult, stb.
Első komolyabb weboldal, amit összehoztam, és kíváncsi lennék a profik véleményére is, illetve arra, hogy mik a hibáim ilyen téren, mik azok a módszerek, amiktől meg kell szabadulnom
Előre is köszönöm a válaszokat!

EDIT: teszt felhasználó: user: "weblabor", pass: "weblabor" idézőjelek nélkül
 
1

A google-ben tárolt változat

H.Z. · 2014. Júl. 31. (Cs), 08.59
A google-ben tárolt változat az internet őskorát idézi. (értsd: a design szvsz borzasztó lehet)
2

A HTML rendben volna, csak az

kuka · 2014. Júl. 31. (Cs), 11.02
A HTML rendben volna, csak az URL-ekben szereplő & jeleket kellene a HTML-ben &-ként írni.

A PHP valószínűleg rejt még pár elnézett apróságot:
  • Meglátogatom http://users.atw.hu/ozirisz/sao/hpcsik.php
  • Nem töltök ki semmit.
  • Megnyomom a „Kész” gombot.
  • Warning: Division by zero in /sao/functions_img.php on line 59

    Warning: Division by zero in /sao/functions_img.php on line 60

A formatervezés… Hát én sem vagyok az ikonocskák/ábrácskák/csicsácskák halmozásának a híve, de ez így nekem is kissé sivár.
3

Az a

kuka · 2014. Júl. 31. (Cs), 14.05
Az a Vendégkönyv/Javaslatok/Hibajelentés hármas kissé összemosódik. Miután beküldesz egy üzenetet (vagy nem is küldesz, csak megnyomod a Küldés gombot), utána az üzenetlista már mindhárom kategória üzeneteit tartalmazza, szűrés nélkül.

A három pont … karaktert (és biztos másat is) … karakter entitásként látod viszont.

Az idézőjel " és felső vessző ' karaktereket árnyékolva látod viszont.

Amikor a Weblaboron említeni akarod az elkövetett teszt üzeneteidet, hasznos volna valami lehetőség az egyes üzenetekre való külön hivatkozásra.
4

Bár (nekem) az oldal kinézete

tóthika · 2014. Júl. 31. (Cs), 19.48
Bár (nekem) az oldal kinézete kicsit jobban tetszik, mint bármilyen más oldal villogó-mozgó cucca, átkapcsoltam egy másik kinézetre, és... Hát, nem nagyon nyerte el a tetszésemet.
Vendégkönyv: Kíváncsiságból rákattintottam a 'Küldés' gombra, tesztelte ám a nép a jeleket: ' ". Ezeket, ha pl. adatbázisba rakod, először ki kell szűrnöd, bár ahogy látom, HTMl-ben tárolod, de ez nem biztos
Rosszul látom, vagy tényleg a Vendégkönyvre irányít át az elküldés után a Javaslatok és a Hibajelentés?
5

Köszönöm hogy ránéztétek és

Ozirisz · 2014. Júl. 31. (Cs), 22.03
Köszönöm hogy ránéztétek és teszteltétek az oldalt!

A Vendégkönyv/Javaslatok/Hibajelentés rész nem a legkidolgozottabb, az tény és való.
A kavarodást javítottam (post elküldésekor már nem volt meg a paraméter, hogy melyik oldalt kell listázni, egy input type="hidden" megoldotta.
A megjelenítés kavarodását pedig a htmlspecialchars okozhatja valószínűleg, lehet írok rá saját függvényt ami csak a "kacsacsőröket" cserélgeti át entitásokra (jó öreg regexpek). Az idézőjelekkel kapcsolatban valószínűleg a magic quotes tehet, de a php beállítások felett nincs befolyásom, ha valami jó elgondolás eszembejut, megoldom. A postok "linkelhetősége" jó ötlet, napokban megoldom. Ezzel a részével nem sokat foglalkoztam, és nem is volt annyira lényeges szerepe eddig, a felhasználóimtól chatboxon általában előbb értesültem a hibákról, valamint inkább a karakterlappal és könyveléssel kapcsolatos részeket fejlesztgettem inkább, azokra nagyobb volt a "kereslet" :)

tóthika: melyik kinézetre kapcsoltál, ami nem nyerte el a tetszésed?

kuka: hol találtál át nem kódolt &-jelet (hirtelen amennyire átfutottam csak a konyveles.php-ban találtam egy helyen, máshol ahol beugrott hogy több paramétert adtam át ott át volt alakítva)
6

A kavarodást javítottam (post

kuka · 2014. Aug. 1. (P), 10.08
A kavarodást javítottam (post elküldésekor már nem volt meg a paraméter, hogy melyik oldalt kell listázni, egy input type="hidden" megoldotta.
Igen, de ha az üzenet beküldése után a látogató el szeretné küldeni a hivatkozást valakinek, esetleg fel szeretné venni a könyvjelzői közé, akkor a címsorban látható URL később, a hidden mező hiányában már nem ugyanoda fog vezetni. (Kivéve a Vendégkönyvet, mert az az alapértelmezett.) Inkább a GET paramétert add tovább.

Még egy apróság, hogy a küldés után a dokumentum újratöltése (F5/Ctrl-R/akármi) az üzenet újraküldésével jár. Ez ellen legegyszerűbben úgy szoktak védekezni, hogy a beérkező üzenet feldolgozása után átirányítod a böngészőt ugyanarra címre. Így a látogató ugyanazt a tartalmat kapja, de nem POST, hanem GET metódussal lekérve, így a későbbi újratöltések már járnak az űrlap újraküldésével.

A megjelenítés kavarodását pedig a htmlspecialchars okozhatja valószínűleg, lehet írok rá saját függvényt ami csak a "kacsacsőröket" cserélgeti át entitásokra
Valószínű, de nem egyedül, hanem veled együttműködve. Azaz az htmlspecialchars() szerintem jól teszi a dolgát, csak te véletlenül arra kérted, hogy kétszer tegye. Feltételezem, hogy az új üzenet beérkezésekor is és az üzenetek listázásakor is ráuszítod a htmlspecialchars()-t az adatokra. Új üzenet beérkezésekor nem kell. Akkor a mentésre készíted elő az adatokat, tipikusan SQL számára árnyékolod a különleges jelentésű karaktereket.

Az idézőjelekkel kapcsolatban valószínűleg a magic quotes tehet, de a php beállítások felett nincs befolyásom, ha valami jó elgondolás eszembejut, megoldom.
Nem kell olyan nagyon gondolkozni, a PHP dokumentáció Disabling Magic Quotes lapja tartalmaz egy futásideji megoldást is.

hol találtál át nem kódolt &-jelet
Nyitó lap, 46. sor:
az ilyenekre gondoltam --------------,
                                     V
<li><a href="./osszesites.php?tipus=1&PHPSESSID=d69e0f83eab94292e8fde2071025f663" class="unop" title="Fegyverek listája">Fegyverek</a></li>
12

Re: Kinézet

tóthika · 2014. Aug. 14. (Cs), 21.38
Számomra már a kezdőlap is elfogadható lenne. SAO stílusban pedig inkább zavaróbb olvasni, minthogy dizájnt kölcsönözne az oldalnak (persze ez erősen egyénfüggő és lehetőleg megbántás-mentes :))
7

Szia! Szerintem ügyes kis

spapp · 2014. Aug. 1. (P), 10.18
Szia!

Szerintem ügyes kis weblap. Bár a design nekem is fura, de mindenkinek más tetszik.

Hogy ügyelsz arra, hogy a lap js nélkül is működőképes legyen az dicséretes.
Ezt hívják diszkrét javascript-nek. Nálam pl. alapból le van tiltva a js. De ha úgy döntöttél, hogy ez fontos, akkor az működjön rendesen! Az hogy a menü nem jelenik meg az szerintem súlyos hiba!

Az is problémás, hogyha valamihez kell a js, akkor az csak akkor legyen megjelenítve, ha van js. Ilyen az óra is. Ott van de nem megy. Csak feleslegesen birizgálja a felhasználó gondolatát és nem érti, hogy mi nem jó. Vagy éppen azt gondolja, hogy nem jól lett megcsinálva a lap...

Szerintem nem kellene inline js-t használni. Ha a js betöltődik, akkor úgyis megold mindent, ha pedig tiltott, akkor meg minek. Ez egy idejét múlt módszer. Főleg akkor, ha a diszkrét js mellett döntöttél. S ekkor már érdemesebb a js-t a body végén a </body> elé tenni.

A js kódokat is érdemes rendben tartani. Pl: A nem szükséges részek ne kerüljenek ki. Ilyen pl. a megjegyzés és az olyan függvény aminek az egész body-ja megjegyzésben van (heightUpdate). Érdemes a függvényeknek beszédes nevet adni. Nem baj ha hosszú.

Nekem nem tetszik az sem, hogy magyar változó, függvény és id neveket használsz. A programozásban de facto szabály az angol elnevezés. Az hogy kevered a nyelveket, és ezt egy néven belül is (changeKonyvelesInfo)...

Mindezekkel együtt az kell mondjam, hogy ügyes munka.
8

A diszkrét javascript

Ozirisz · 2014. Aug. 1. (P), 23.29
A diszkrét javascript kifejezést szándékosan nem említettem, mert attól még igen-igen messze vagyok, de a végső cél az az lenne. A "klasszikus" menünek kell működnie js nélkül is, az csupán egy lista linkekből, és az az alapértelmezett. A "SAO stílusú" menüket viszont js nélkül nem tudtam megoldani (lehet hogy tényleg nem lehet, de lehet csak én tudok hozzá túl keveset), de az nem alapértelmezett, a felhasználónak kell beállítania, ha használni szeretné (és ott ahol beállítható, fel van hívva rá a figyelme, hogy js kell és kompatibilitási gondok lehetnek). Jelen tudásom szerint ennyit tudtam tenni az ügy érdekében.
Az óra lehet zavaró, azt egész egyszerűen tudom javítani, hogy alapértelmezetten nem 00:00:00 lesz hanem üres tagek, amit ha van js elér, ha nincs akkor pedig üres marad.
Az inline js függvényhívások nagy része php-ből jön (pl. cikluson belül hozzárakja amihez kell), de amit tudok igyekszem kiváltani classolással és onLoad-al betöltött függvénnyel elvégeztetni az onClick/onKeyUp/... eseményeket rátetetni a megfelelő elemre.
Egyrészükkel az a probléma merült fel bennem, hogy ha pl. nem saját magára kellene hatással lennie, hanem egy másik elemre (pl. egyik tr-en van egy ikon amire kattintva a következő tr-t jeleníti meg vagy rejti el, vagy pl. amikor a buttonra kattintva az előtte levő input/textarea tartalmát kellene kijelölni), és azzal egyelőre még meg vagyok lőve.
Persze jQuery és társai könnyen megoldanák, de kerülném a js keretrendszerek használatát, mert előbb szerintem célszerűbb lenne a javascriptet megtanulnom.
A kódok/fv-ek elnevezésére a jövőben figyelni fogok, sőt már mostanában is úgy vagyok, hogy a következő weboldalnál sokmindent máshogy csinálnék eleve (függvényalapú programozás helyett objektumorientált programozás, mysql_ függvények használata helyett PDO, ...)
JS kódok rendbentartása jó ötlet, csökkenti az adatforgalmat is ha nincs benne minden "macskaalom", és tervben is van ha már egy hosszabbtávon változatlan változat lesz (még van hogy 1-2 naponta valamit módosítok rajt). A kommentek kikerülése annyira ezesetben nem aggaszt, nem hadititkok, a php ha látható lenne az jobban zavarna, de az meg szerveroldalon fut (hacsak nem jár úgy az ember mint hajdanán sokan egy másik ingyenes tárhelynél ahol egyik napról a másikra lelőtték a php-t, és mindenki a másik config.php-jére volt kiváncsi XD)
A design terén is van még mit fejleszteni, bár designnel túl sokat nem foglalkoztam, inkább a szerveroldali működéssel foglalkoztam, megjelenítésnél pedig valami egyszerű de átlátható felületet csináltam hozzá.

kuka: a könyvjelzőzhetőség miatt a GET tényleg jobb ötlet, átírom GET-re azt a paramétert. A htmlspecialchars()-os dolgot hétvégén orvoslom, a magic quotessel kapcsolatos kód viszont jóval egyszerűbb, mint amire számítottam, köszönet érte :)
Azt viszont nem értem, hogy kerül a link végére magától a session id, amennyire meg tudtam figyelni, csak az oldal első megnyitásakor látszik, utána már nem fűzi hozzá (nyilván amikor új munkamenetet indul a számunkra)

Van még az oldalon mit csiszolni, és még fogom is, azonban tanulásra, gyakorlásra és időtöltésre ideális. A legelső változat okt-nov fele még frames volt és font/center/b/... tagekkel volt tömve, amit tanulás, olvasgatás után kb. dec-jan fele sikerült magam mögött hagynom, de még rengeteg új dolgot kell megtanulnom ezen a területen.
A tanácsokat köszönöm szépen, és megfogadom őket :)
9

A legelső változat okt-nov

hb · 2014. Aug. 2. (Szo), 09.45
A legelső változat okt-nov fele még frames volt és font/center/b/... tagekkel volt tömve, amit tanulás, olvasgatás után kb. dec-jan fele sikerült magam mögött hagynom


Honnan szerzed az olvasnivalot, milyen konyveket olvasgatsz? Pontosabban mikori dolgokat? Mert a frame es inline tag megoldasok alapjan vagy 10-15 eves.
10

Ami az olvasnivalót illeti, a

Ozirisz · 2014. Aug. 2. (Szo), 13.32
Ami az olvasnivalót illeti, a legtöbbet Nagy Gusztáv - Web programozás c. könyvéből tanultam, valamint a Weblaboros cikkeket/fórumtémákat nézegetem, esetleg konkrét dologra rákeresve gugli.
A frame és társai még a "sötét mélység"-ből jött elő. kb. 2005-06 körül foglalkoztam kicsit weboldalkészítéssel (szám-tech szakkör szinten), és az akkori dolgok ugrottak be először. Azóta viszont tisztában lettem vele, hogy a frame és társai rég elavultak.
11

Ez egy jó kis

spapp · 2014. Aug. 4. (H), 08.42
Ez egy jó kis tananyag:
http://euedge.com/training