Weblabor 2012 – mockup
azt kell mondjam, hogy a #weblabor egy tökéletes webes példa a »suszter cipőjére«
–@tikaszvince 2011.05.18.
A Weblabor hasábjain megjelenő írások hosszú ideje próbálják felhívni a figyelmet a modern, haladó technikákban rejlő lehetőségekre, a segítségükkel elkerülhető problémákra. Rendszeresen felhívjuk a figyelmet, hogy a weboldalainknak, webalkalmazásinknak szemantikusnak, hozzáférhetőnek és legfőkébb felhasználóbarátnak kell(lene) lenniük. Szajkózzuk a már-már elcsépelt írott és íratlan szabályokat, amiket mindennapi munkánk során egyébként szem előtt tartunk.
Tesszük mindezt egy olyan oldalon, ami webes ergonómiai tekintetben – finoman fogalmazva is – erős kihívásokkal küszködik.
Létrehoztam GitHubon egy repot, hogy elindítsak egy diskurzust, aminek célja a Weblabor felületének megújítása. Az elképzelés az, hogy dolgozzuk ki együtt a koncepciót, alkossuk meg együtt azt a környezetet, amivel a külső szemlélőknek bebizonyíthatjuk, hogy a hatékony kommunikációt mennyiben segíti elő egy jól kialakított környezet.
A repóba szándékosan nem egy Drupalt tettem, hanem egy HTML5 mockupot. A kapcsolt CSS segítségével egy szerintem használható layoutot alakítottam ki.
A jelenleg a 2 oldalsávban található dobozokat a lapok alján (footer) helyeztem el 3 oszlopba rendezve. Az első oszlopba tettem a könyv ajánlókat, és a blogmark listát. A másodikban került a két fórum blokk, és a címkefelhő (még nem felhő). A harmadikba kerültek a Weblabor közösségi dolgai.
A fejlécbe eget rengető változtatásokat nem tettem. Meghagytam a jelenleg is működő menüt. Egy (a jelen Weblaborhoz képest) újítást valósítottam meg: a fejlécben szereplő bejelentkezés linkre kattintva megjelenik a login form. Ezzel a megoldással, a sikeres bejelentkezés után visszakerülnénk az aktuális oldalra, és nem egy sokadik, eldugott oldalról kellene valahogy visszatalálni az eredeti kiinduló pontra.
A Twitter gombokat a cikk alól felhoztam a cikk meta részébe, és megírtam azt a nagyjából 3 sor JavaScript kódot, amivel az eredeti gombhoz hasonlóan egy új, kisebb ablakban jelenik meg a Twitter post űrlap.
A mockupban megtalálható néhány tipikus tartalom oldal, mint a cikk, blog bejegyzés, blogmark, fórum téma. Mindegyiken látszanak szálakba rendezett hozzászólások. Némelyiken kódok is látszanak. A hozzászólások elrendezésekor ismét a szerintem optimálisnak érzett formát választottam.
Az válasz írásához ismét csak írtam egy pici jQuery kódot, aminek hatására a válasz linkre kattintva a megválaszolni kívánt hozzászólás alatt jelenik meg a beküldő űrlap, nagyjából azonos mértékben behúzva, mint amennyire a beküldés után fog megjelenni.
Még szeretnék a fórum hozzászólások bal oldalára, a szerzőségi adatok alá, elhelyezni egy-egy értékelés blokkot, amivel a Stack Overflow-n vagy akár a Drupal.hu fórumon is naponta találkozunk. Ezzel az eszközzel a későbbi információ keresést gyorsíthatnánk meg, illetve megvalósítható lenne a sokak által hiányolt like vagy +1 funkció is.
Várom a további ötleteket, akár itt hozzászólásként, akár a push request formájában a WL2012 repóhoz.
■
+1
A napokban én is elkezdtem
Szóval ezzel a részével maximálisan egyetértek.
*a mockupot még nem néztem
Én nézném, de mielőtt még
---
Ami a stackoverflow jellegű fórumokat illeti: ismerve az idióta jogvédelmet... Nem áll védelem alatt az a fajta megjelenítés? (pontozás és hasonlók)
http://munka.tikasz.hu/wl2012/
1.)A fenti menüt vagy balra
A fenti menüt vagy balra igazítanám, vagy széthúznám... Ugye mindenki a bal oldalt nézi meg először, jobban kézre állna így... Az elrendezés egyébként jó, néztem alacsonyabb felbontásokon is, és úgy is használható. :-)
2.)
Esetleg lehetne több layout-ot is kitalálni, és lehetőséget adni a felhasználóknak, hogy válasszanak közülük. Én pl a könyvajánlós részt tenném jobb oldalra, mert az nekem kevésbé fontos, mint a fórum, de lehet, hogy másnak meg eltérőek az igényei...
3.)
Bejelentkezésnél mindenképp hiányolom a permanent cookie-t.
4.)
Bár ezzel nem biztos, hogy mindenki egyet ért, de én kitenném a navigációba, hogy milyen úton jutottam el az aktuális oldalra. Szóval mondjuk "Cikkek / Bevezetés a Sphinx keresőmotor használatába". Mondjuk általában ennyi szokott lenni a mélysége az oldalnak, de nálam már előfordult, hogy nem tudtam, hogy cikk vagy blogbejegyzés, amit nézek.
5.)
Én tennék bele olyan funkciót is, hogy a felhasználók szakmai blogjára lehessen szavazni, illetve ezek között valamilyen rangsort felállítani... Szerintem elég sokunknak van blogja, és én kíváncsi lennék, hogy kinek milyen ötletei megoldásai vannak, viszont nincs kedvem egyesével nézegetni az adatlapokat, és átnézni a blogokat, hogy melyiket éri meg elolvasni...
Így hirtelen most több dolog nem jut eszembe...
Re:
2) A változó layout ugye nem csak kliens oldali történet, hanem a CMS-nek is biztosítani kell valamilyen lehetőséget az egyedi layout kialakítására. Ha ki is alakítjuk ezt a lehetőséget, kérdés, hogy mennyit ront a drupal teljesítményén, mennyire tudunk gyorstárazni.
3) Ha azt szeretnéd, hogy ne léptessen ki, akkor szerintem ezt már a jelenlegi rendszer is megoldja. Ha jól tévedek, akkor momentán egy hét a session cookie lejárati ideje.
4) Ez a breadcrumb (drupal szakzsargonban: morzsamenü) számomra mindig is csak egy zabszem faktor volt, így inkább kihagytam. Ha egy tartalomhoz több útvonalon is el lehet jutni, akkor pedig baromira nem egyértelmű, hogy melyik útvonalat mutatjuk ott meg. De ha erre van igény, és egyértelmű elgondolás, akkor hajrá, tegyük bele.
5) Goto: 1. a Tag oldal még nincs "implementálva" a blogon.
5.b) Egyébként szerintem egy planet oldal lehet egy jó megoldás az ilyen jellegű információ agregációra: lásd: http://planet.ubuntu.hu/
Okés :-)
SO vs WL
Ez egy nagyon jó ötlet!
Demo
Ötletek
Amit még fölvetnék:
+1 -> a munka rovatot ne
Lehessen feliratkozni ("subscribe"), hogy ha valami érdekel, lehessen valahogy megjelölni, bukmarkolni, értesítsen az új bejegyzésekről, stb.
Egy korábbi felvetésemet
Az első egy apróság: a címlapon a cikkek aljára nagyon hiányzik szerintem egy Tovább link, mert nem egyértelmű, hogy van folytatása, néha a megjelenő egy-két bekezdés is elég kerek ahhoz, hogy azt higgyük, ennyi az egész.
A második már nagyobb falat: szerintem szükség lenne egy nagy, struktúrált link- és cikkgyűjteményre kezdőknek és haladóbbaknak, hogy legalább az alaptémákban (HTML, CSS, Javascript, PHP) el tudjanak indulni valahonnan. Ezeknek a gyűjteményeknek elég részletesnek kéne lenniük, hogy a lehető legtöbb kérdésre ott mindenki megtalálja a választ.
Emellé kéne még egy Best Practices, Hogyan Csináljuk rovat, ahol a leggyakrabban felmerülő problémákat a Weblabor szakemberei oldanák meg, letölthető forráskóddal. Itt lehetnének teljesen egyszerű példák (hogyan használjunk bizonyos HTML elemeket, CSS tippek-trükkök), vagy komplettebb megoldások (a legtöbb megjelent cikk ilyen).
Egy ilyen gyűjteménnyel
- csökkennének az olyan fórumkérdések, ahol a kérdezőnek láthatólag fogalma sincs arról, hogy miről szól ez az egész webes dolog, csak olvasott valahol egy felkapott témáról, és most ellenállhatatlan vágyat érez, hogy ő is beépítse, mert el lehetne irányítani ide
- könnyebben felismerhetőek lennének az összefüggések
- magasabb szintű szakmai viták alakulhatnának ki a Hogyan Csináljuk rovatban
- a Weblabor így lehetne a magyar webes szakma origója, ahol mindent könnyű megtalálni, azaz marketingszempontból is hasznos lenne
Ez persze sok munkával jár, de hosszú távon mindannyian nyernénk belőle.
Nagyon tetszik a mockup! Egy
Mivel ez a három a magamfajta hírfüggőknek igen fontos, nem szeretnék (sorstársaim gondolom szintén nem) mindig az oldal aljára gördíteni a "leg up-to-date"-ebb infókért :)
Ha nem vagyok egyedül a gondolattal, várom ide a +1-eket, hozzáfűzéseket.
Részemről -1 a „csak 1”-re.
Ha már korábban szóba került a Stack Overflow, náluk a Greasemonkey szkript írás is fel lett virágoztatva a Stack Apps segítségével. Kevésbé lényeges, de az ilyen megszervezése sem utolsó fogás, ha az ember közösséget akar csődíteni a weboldala köré. Az olyan logikus apróságok is segítenének, mint id-t adni „Belépve XXX néven.” hivatkozásnak, hogy a szkript egyszerűen megtudhassa ki van, ha van, bejelentkezve.
Illetve, az egész oldal
Legyen "élő" a weboldal, pl. jelenjen meg a legújabb csirip, és görgesse lejjebb a már meglévőket, miközben lapozom a főoldalt, stb.
A stackoverflow-n nagyon jól megfogták a szerkesztést: ha jön egy új válasz a problémára, miközben írod a sajátodat, értesít, felajánlja, hogy frissítsd az oldalt, és nem veszik el ettől az éppen begépelt tartalom, ütemesen menti a draftot, meg persze lehessen kézzel is. Lényeg, hogy az ergonómiát követendő példa szintre kellene hozni.
A másik pedig, hogy nem csak azt kellene megtervezni, hogy milyen legyen induláskor a weblabor2, hanem terv a jövőre nézve, hogyan lesz frissítve, bővítve, hogyan lehet majd új fejlesztéseket keresztülvinni, követni az aktuális technológiákat, stb.
Valóban, a figyelmeztetés
Viszont első körben már attól is tapsikolnék, ha
idézem magamat:
Ez azért készült, mert engem is nagyon zavar, hogy válasz írásakor csak azt a commentet látom amire írom a választ, de az előzményeket, és úgy általában a többi választ nem.
Ezt javascript nélkül is meg
Yepp, engem is zavar,
Imho lenyílós menü formájában
Én valami olyasmire gondoltam, hogy
és ha fölé húzod az egeret, akkor még legördül kb 10, ha meg új kerül a rendszerbe, akkor frissíti, és mondjuk zöldre vált a háttere...
Ehhez mit szólsz?
tartalom
Tök jó ha lesz új dizájn, szó se róla, de a twitter meg blogmarkokon kívül más olvasni való nem nagyon akad.
Írni kell
adjunk neki keretet
Ösztönzés képpen, lehetne csinálni valami
- "szedjük össze az embereket és kordináljuk ki mit tudna írni az oldalra",
- "cikkírókat toborzunk" esetleg
- "legjobb cikkírónak weblabor bögre"
- "cikkíróink" menüpont névvel, bemutatkozással, elérhetőségek (önéletrajz?), mert akár szakmai referencia is lehet
- "cikk beküldése" menüpont, ahol a moderátor moderálhatja, megjegyzést fűzhet hozzá
és hasonló ösztönző megoldásokkal, összefogva az embereket és gyomlálva a férgesét (fórumon felbukkan egy két érdekes "ember")
Mindenképp kell tartalom, de
Emellett szükség van felelős szerkesztőkre is, akiknek van ideje foglalkozni az oldallal, és nem az történik, mint Greg Yii könyvajánlójával, ami hosszú hetek után élesedett.
Továbbá ki kell dobni a google keresőjét, mert nem ér semmit, és kell egy sajátot gyártani, amivel pontosabb találati listákat lehet összeállítani.
Engem az zavar, hogy nagyon
Elkészítettem tiku munkája
+1 :-) A friss dolgoknak
A friss dolgoknak felül és bal oldalt kell lenniük, a kevésbé frisseknek meg jobb oldalt vagy alul. Az, hogy cross-browser valamennyire az oldal meg elég alapvető kérdés.
Gratula, ez jó lett!
1, Továbbgondolva a
2, a hozzászólásoknál legyen egy link arra a hozzászólásra, amelyikre ez válasz, mert sok hozzászólásnál nehéz visszakeresni az eredetit
3, hozzászólásoknál a válaszok behúzása jelenleg 25 pixel, ami hosszabb vita esetén soknak bizonyul, ki kéne próbálni 20-15-12 pixellel.
4, dátumokban jelenjen meg az év (ne csak a title attribútumban)
5, meglévő hozzászólás utólagos szerkesztése esetén IE alatt a textarea túl széles, így nehézkes a módosítás
6, lehessen a hozzászólás egy részét vagy egészét offtopicnak jelölni, amit más színnel jelenítene meg a rendszer (mint pl. a prohardver.hu fórumain)
6, lehessen a hozzászólás egy
Hát felteszem :-)
Légyszi szabo.b.gabor
Már fent vannak...
Ok, köszi az infót.
nagyon jó volna látni a
én első lépésként egy cikket várnék a weblabor mostani verziójának készítőitől, hogy anno mit miért csináltak (pl. miért drupal) és mi jött be a számításaikból, mi nem? miért? érdekelne, hogy mekkora az oldal látogatottsága? vannak-e problémák a kiszolgálással? mekkora forgalmat volna képes elvinni a mostani konfig gond nélkül?
felmerült-e valaha is, hogy adatbázismotort kellene cserélni az oldal alatt? esetleg meg lehetne nyitni a kódját az oldalnak, ha van értelme, ez talán nem is fontos. valahogy az oldal jelenlegi gyengeségeit, erősségeit kellene összegyűjteni, és ezeknek okait. egyéb követelményeket összegyűjteni.
aztán össze kellene gyűjteni az oldallal szemben támasztott funkcionális, tartalmi követelményeket. esetleg kidolgozni valami rendszert, ami alapján az oldal működése garantálható.
a baj az, hogy jól megcsinálni az oldalt rengeteg munka, aki ért hozzá, az nem szívesen dolgozik rengeteget ingyen, aki meg dolgozna sokat ingyen, nem biztos, hogy ért hozzá :)
jó lenne szétosztani a feladatokat apró részekre, csak igen sokfélék vagyunk, nem biztos hogy megtalálnánk a közös nevezőt.
érdekes lehetne akár a felmerülő problémákat témakörönként feldolgozni, mindenki küldhetne be megoldásokat, blog formájában, megnézni egymás munkáit, vitatkozni, összegyűjteni a jó ötleteket.
lehetne akár támogatót találni az egészhez, nem tudom. biztosan lenne sok lehetőség.
mindenesetre egy ilyesmi biztosan felkavarná a mostani weblabor állóvízét. mindig minden projekttel az a baj, hogy nincs rá idő. hát tessék itt van egy, amire van. minél tovább tart annál jobb :)
Jól látod a dolgokat, de
1, a weblabor jelenlegi vezetősége mennyire támogatja az ötletet?
2, amennyiben a válasz nem "teljes mellszélességgel", akkor milyen néven indulhat újra az oldal (és hol lesz hostolva)
3, kik azok, akik a felmerülő munkákban részt tudnának venni (okoskodni bárki tud, az könnyebb)?
Sztem igen
2. Fegyvert és paripát én adok. Nem mondom, hogy teljes fizetést tudnék adni egy fejlesztőnek erre a projektre, de ha valaki szívesen csinálja, akkor bónuszokkal meg tudom fejelni a dolgot. Ez lehet pénz, szakmai könyv, domain, tárhely, szolgáltatás, bármi. Nekem csak annyi kikötésem van a dologgal kapcsolatban, hogy usability, security és kódminőség szempontból legyen rendben a dolog, továbbá ne az legyen az kifogás, hogy azért nem működik jól "mert a Drupal/Joomla/akármi nem tudja", mert arra nem áldozok.
3. Tiku biztos, én is, szerintem ha van akarat és nincs csőlátás, akkor sok mindent el lehet érni. Schmidit rá lehet szerintem venni usability auditra, security auditra szintén van ismerősöm.
Miért éppen Drupal?
Weblabor váltás: miért éppen Drupal? (2004. Már. 18.)
Megújult a Weblabor, bővítettük szolgáltatásaink körét! (2005. Már. 8.)
Új motort és megjelenést kapott a Weblabor.hu (2008. Szep. 20.)
Régi szép idők :) De azért
Szerintem ez az ötletelés is
Ez egy online brain storming
Gyertek hackathonra!
Tag adatlap: