Így készül a Weblabor.hu
Ahogy a megújuló Weblabor mozaikdarabjai egyre inkább egésszé állnak össze, úgy szeretnénk olvasóinkat is bevonni a történésekbe. Éppen ezért ismét útjára indítjuk werkszájtunkat az igy.keszul.a.weblabor.hu címen, ahol időről időre a fejlesztői ágból kiemelünk egyes elemeket, hogy amolyan előzetesként közzétegyük, a visszajelzéseket pedig becsatolhassuk a folyamatba.
Elsőként új, reszponzív dizájnunkat szeretnénk megosztani, mely a fenti címen már megtekinthető. A teljes egészében az új oldalhoz készült dizájn megőrzi a meglévő látványvilágot, azonban törekszik arra, hogy szebb, áttekinthetőbb, olvashatóbb legyen. Emellett reszponzív, így végre kisebb képernyővel rendelkező eszközökön is, bárhonnan, bármikor olvasható lesz a Weblabor.
Ismét van külön a nyomtatáshoz fenntartott stíluslapunk is, amit az évek folyamán valahol elhagytunk.
Jelenlegi rendszerünkkel szemben különös figyelmet fordítunk a minifikálásra, tömörítésre és gyorsítótárazásra, illetve hogy minden oldalon csak olyan elemeket kérjünk le, amelyeket valóban használunk is, ezzel is hozzájárulva a lehető leggyorsabb navigációhoz és legkisebb adatforgalomhoz.
Természetesen továbbra is törekszünk arra, hogy JavaScript, képek és stílusok nélkül is jól használható maradjon webhelyünk.
Első előzetesünk február 13-án éjfélig lesz elérhető, kérjük, hogy próbáljátok ki minél több eszközön, minél több böngészőben, észrevételeiteket pedig írjátok meg nekünk, hogy az esetleges hibákat javíthassuk!
■
Design
Nem veszem, azért van
A menu azert nehezkes, mert
Nekem egyebkent 1 merettel nagyobb betu, es egy lehellettel sotetebb jonne be a tartalomban. Amoleden nincs a szurkenek meg mind az otven arnyalata (ergo ami nalad jo, itt vilagosabbnak hat, mert a kornyezet feherje nem olyan feher), ellenben nem is barnulok ugy le, mint az ips-tol.
A menu azert nehezkes, mert
Itt mobilról beszélünk, gondolom. Lehet, hogy kellene kapjon a fejléc egy
position: fixed
-et?Az oldalról behúzhatóra gondolsz? Miért tartod rosszabbnak a dropdownt?
A szövegszín most #111, mit találnál jónak?
A fixed jó lenne, de csak
Az oldalról behúzósnak benne van a nevében: hamburger lenyomása nélkül is behúzhatod a menüt a képernyő oldalirányú végigsimításával. Dropdown minimum egy klikk valahol. Ez személyes preferencia csak.
A menü kinyitása után mobil vissza gombja nem csukja be a menüt, azaz a menügomb nem generál oldal aktivitást, ez is hiba sztem.
A #111 jó, akkor a betű kicsi, vagy eleve túl vékony fajta.
Amúgy persze, mobil megjelenésről beszélek, a desktop szörfözésre eleve visszaszorulóban.
A szövegszín most #111, mit
#000
Rohadt idegesítő, mikor fehéren elkezdenek szürke betűkkel írni.
Nekem
Nekem az egesz olyal
Amiket írsz, azok inkább információs architektúra kérdései, mintsem látványvilágé.
Ha ez így lenne, nem ez volna a legforgalmasabb része az oldalnak, de egyetértek azzal, hogy rossz a formátum, meg is fog változni.
Én is ilyesmire gondoltam.
Munka
Teljes mértékben egyetértünk.
Mobilról nézve nem látok
Nem biztos, hogy jól értelek,
Ez nekem kínai. Megszoktam,
Ellenpéldának ott a blog.hu vagy a google.com. Ezeknél alapállapotban a mobil változat jelenik meg a telefonomon, míg ha desktopot kérek, akkor a desktop változat.
Itt ráadásul az külön fura, hogy ha álló formátumban nézem, akkor van menü, ha fekvőben, akkor nincs.
Ez nekem kínai. Húzd
Húzd folyamatosan össze egy asztali böngészőben az ablakot, és megérted.
El is kellene térjen. Ha van elég hely, akkor a jelenlegihez hasonló horizontális navigációt és oldalsávot kell láss, míg kisebb képernyőn egy lenyíló navigációt és a tartalom utáni ajánlót. Nálad nem így van?
Nem tudom, hogy technikailag mit jelent az, ha bizonyos nézetet kérsz a böngészőtől.
Hogy-hogy nincs? Éppen állóban várható, hogy biztosan összecsukódik a navigáció, hisz nem férne ki vízszintesen.
Ha tudsz adni képet, az segít.
Épp azt írtam: csak álló
Képet egyelőre nem tudok mellékelni. Itt gyakorlatilag ugyanazt látom a menüt leszámítva, mindegy honnan, miből nézem.
Indexnél, origonál már van eltérés: mobil nézetben általában van egy m. a domain név előtt, míg desktopnál www. vagy semmi. A megjelenésben meg olyan eltérés van, hogy a desktop változat több hasábos, a mobilban egyetlen oszlop, kevesebb témával. Na az indexnél ezt a mobil megjelenést nem tudom kiiktatni. És látszólag itt sincs változás, de a tényleges hatás csak akkor derül ki, ha valami tartalom is lesz az új oldalon.
Épp azt írtam: csak álló
És mi történik vele fekvő formátumban?
Nincs ilyen: ugyanazt a HTML-t kapod, bármilyen eszközről is nézed, csak a stílusok mások a képernyőméret függvényében.
Fekvő formában nézve elég
Valahogy mindig arra számítok, mióta valakivel (talán épp itt) beszéltünk róla, hogy miért is kell mobilra optimalizálni(*), hogy ha mobilról nézek egy oldalt, akkor más megjelenése lesz, mint egy nagyobb gépről.
* pl. tapiképernyőn kicsit nehezebb navigálni, mint egérrel, mert ujjal kitapogatni nem lehet olyan precízen.
638 pixeltől felfele jelenik
De tényleg próbáld ki, hogy folyamatosan összehúzod a böngészőablakot, és akkor látni fogod a töréspontokat.
Mobilos nézet
Egérrel alig lehet becélozni, nemhogy ujjal.
Ugyanez érvényes a lenyíló menüre, az egyes menülemeket magasabbra venném és nemcsak a szövegre kattintással működhetne, hanem az adott menüelem egész szélességben működhetne a kattintás.
Oké, simán lehet, hogy nem
megerősítem
Itt pedig túl nagy a két kép. ..
Bővebben holnap.
Szerk
Kellene Láblécbe top link.
Comments: figyelj majd, hogy túl sok bal margin ne legyen, Kb max 50%. Ha mélyebb a fa, inkább szöveges thread jelenjen meg, mint túl keskeny box.
Lehet választani a nézetek között? Ne maradjon ki.
Mobilra felesleges hely pazarlás a fejléc kép. Pl Legyen rajta a menü.
Egyelőre ennyi.
Ja, alapjában tök jó.
Kellene Láblécbe top
Akkor már jobb fixszé tenni a navigációt, nem?
Ez minden nézetben rendezve lesz végre.
Nem, miért akarnál választani? Ugyanazt a tartalmat látod minden eszközön, csak a képernyőmérettől függő elrendezésben.
17 pixel? :)
félig
Nézetek között szeretek én választani. Nem baj ha link, de menjen. De hadd döntsem el én, ha akarom.
Nekem biztos, hogy többnek tűnt 17 pixelnél. :) Mindjárt rá nézek még.
Comments: big like.
Szerk
Biztos több, mint 17. Főleg fekve. :)
Nézetek között szeretek én
De ennek nincs semmi értelme. Miért akarod, hogy lelógjon a képernyődről az oldal? Ez olyan, mintha azt akarnád, hogy a tenyérni mobilképernyőn ugyanott legyenek a sortörések, mint az asztalin. Le lehet fejleszteni, de minek :)
Én az illusztráción látható elrendezésről beszélek. Az oldal tetején a fejlécből szabadon hagyott sáv pontosan 17 pixel.
Ami az eggyel nagyobb elrendezést illeti: ha több mint 638 pixel széles a kijelződ, akkor legyen 148 pixeled a fejlécre :)
fizikai méret, látás
A 638 px nem mindegy, hogy 4 cm vagy 12...
És lehet jobb vagy rosszabb szemem.
És lehet, hogy pusztán jobban tudom használni a "mini" menüt.
És még lehet kismillió oka, ami miatt indokolt a kézi váltás.
17 px: ez is felesleges.
Ok, maradjunk az iillusztráción.
Azt a telót fektetés, szélesebb lesz 638, de a magasság kisebb!
Ebből a kisebb magasságból veszel el sokkal többet. Ez nem jó.
+1
fasza
Amúgy menühöz hamburger lehet tényleg jobb lenne, vagy a Materiál UI-os balról újjal húzható menü (lásd MateiralizeCSS).
Üdv... iM
Kösz :) A hamburger alatt is
win phone 8.1
win phone 8.1 alatt a
Kösz, hogy megnézted!
Egy részem egyetért veled, egy másik viszont azt mondja, hogy egy amúgy is nagy átalakítás után egy ismerős látványvilág kapaszkodó a felhasználónak.
Egyelőre erre lehet építkezni, de ha később valaki előáll egy meggyőző látvánnyal, akkor semmi akadálya a váltásnak.
Apróság, de számomra zavaró:
Ezt látom:
Ennek nincs köze a JS-hez, az
Valami köze mégis kell, hogy
Vagy elnézel valamit, vagy
display: none
-t rendel hozzá vagy vesz el a navigációtól.Egyik sem. A noscript plugin
Hogy miért, azt nem tudom.
Utánanéztem, nem a
@font-face
) tiltja. A beállítások közt tudod őket külön engedélyezni.Hogy te miket találsz...
(na jó, sejtem: rosszindulatú kódot mintha a fontok közé is be lehetne csempészni, ahogy pl. képekbe is)
A TrueType betűtípusokat egy
EM :)
ahogy Pepita is írta, a felbontás már nem hordoz információt, az hogy az ájfónon megy, csak az alapértelmezett zoom-nak köszönhető, amit az ios rárak.
próbálj meg abból kiindulni, hogy egy kényelmesen olvasható bekezdés mondjuk ~35em széles, vagy akármennyi. ha van 70em-nyi hely akkor legyen desktop, a mobil nézet meg full széles de nagyjából 35em-re van belőve a betűméret.
ha em-mel csinálod meg az oldalt, akkor jöhet 8K monitor is, annyi történik, hogy a body-n felrakod 40px-re a font-size értékét és ennyi.
persze sajnos azt hiszem, hogy a media-query furán viselkedik em-ekkel, de nem biztos (mintha nem venné figyelembe a body-n beállított értéket, hanem a rendszer által beállítottat használja)
amúgy mókás nézni, ahogy állítja az ember a body-n a font-size értékét és nő, csökken minden arányosan.
szánj rá egy kis időt szerintem, akár csak kipróbálni.
nézet váltót én is raknék amúgy, bármennyire is hülyén hangzik. és lehet, hogy az alapértelmezetten megjelenő nézet típusát (ha nincs cookie-ban meg sehol) az alapján határoznám meg, hogy álló vagy fekvő módban nézik az oldalt.
mobil nézetben az a 'v' az kicsi, a header legyen akkora mint a vizuálisan megjelenő rész, és a kattintható részek töltsék ki függőlegesen teljesen és legalább legyenek olyan szélesek, mint magasak.
3 éve készítettem egy
Közben megnéztem tableten is,
Az em alapú media queryket én
A menü és a lábléc linkek (betű)méretét kicsit talán nagyobbra venném, bár elég okosnak tűnnek a touch alapú eszközök, hogy kitalálják, hova is akart bökni az ember (így például a menü lenyitása szerintem nem okoz gondot).
Egyébként nekem tetszik, az pedig különösen, hogy hű a megszokott kinézethez.
engem az erdekelne hogy miert
Cikk
Hadjáratom a margin ellen
A "tablet nézetben" a tartalmat két oldalról 4 pixel fehér "margin" veszi körül. Ezen a méreten ki szokás küldeni a tartalmat teljes szélességre; én kivenném a következő szabályt:
A fenti csak egyetlen példa a (jelenlegi) oldal redundáns térközeire. Ezeket a korszerüsítés jegyében eliminálnám az oldal minden nézetéből - csak fölöslegesen bonyolítják a látványt.
Persze ésszel, az adott eseteket megvizsgálva, de úgy érzem a különböző margin-padding párosok 90%át el lehetne hagyni a jelenlegi dizájnból. Jó példának ott a theverge.com vagy a gog.com - ott felfedezhető irányelv, hogy a tartalmi doboz sajátja a padding (vagy margin), nem pedig a konténer teszi rá mindenre.
A képes tartalom általában kiér a dobozok széléig, a szöveges tartalom pedig magának állítja a megfelelő térközt. A dobozok között nincs inherens térköz, legfeljebb 1 pixel border ahol szükséges.
Kérdések
Amikor nagyjából tíz éve lecseréltük a korábban használatos táblázatos modellt a div plusz css kombinációra, sorra jelentek meg a cikkek, hogy az osztályainkat szemantikusan nevezzük el, azaz ne egy jellemző alapján, hanem a szerepe alapján válasszuk meg, hogyan fogjuk hívni. Tehát nem
<div class="piros">
, hanem<div class="kiemelt">
. Ezt azzal indokolták, hogy így, ha későbbiekben dizájnváltás lesz, akkor elég lesz a stílusdefiníciókat átírni.Ezzel szemben a gyakorlatban dizájnváltás esetén az oldal struktúráját, valamint ezzel együtt a HTML kódot is le szokták cserélni. Az is jellemző, hogy egy dizájn általában nem szokott olyan szinten változni, hogy ami két évig piros volt, azt hirtelen átszínezik barnára.
Első kérdés: A fentiek alapján van-e értelme arra különösebb energiát áldozni, hogy css osztályainkat hogyan nevezzük el, ha következő dizájnváltáskor úgyis dobjuk az egészet?
Ádám, korábban kifejtetted, hogy a stílusdefiníciókat nem szereted konkrét elemekhez kötni, hanem osztályokat használsz. A mostani kódban például ez van
<main class="main">
, azaz így elég a classnevet átmásolni bármilyen elemre, és pont ugyanúgy fog kinézni.Második kérdés: Egységen belüli egyedi elemek (main, fejléc, lábléc stb.) esetében miért használsz osztályneveket?
Joel on Software-nek van egy nagyon jó írása arról, hogy milyen hibákat nem szabad fejlesztőként elkövetni. Röviden arról szól, hogy a legrosszabb, amit tehetünk, hogy újraírunk egy kódot teljesen, mert ezzel sokat vesztünk: időt, új bugok jelennek meg és így tovább. Fontos tétele, hogy egyszerűbb kódot írni, mint a régit megérteni.
Ezt az egészet azért hozom fel, mert az új weblabornak adatbázis és működés tekintetében a régi kiterjesztésének kéne lennie (például azért, hogy át tudd importálni az adatokat különösebb erőfeszítés nélkül). Ha ez így van, akkor ...
Harmadik kérdés: miért kezdtél új fejlesztésbe?
Írod, hogy a dizájn marad hasonló (legalábbis első körben). Ha ez így van, akkor ...
Negyedik kérdés: miért írsz teljesen új HTML-t? Nem lenne elég a meglévő stílusdefiníciókat átírni/kiegészíteni, hogy reszponzív legyen az oldal?
A fentiek alapján nekem úgy tűnik, rengeteg felesleges időt öltél bele a projektbe, de legalábbis nem látom, hogy miben fog ez megtérülni. Már csak azért sem, mert öt-tíz év múlva valószínűleg megint egy új HTML/CSS fog készülni az újratervezéskor.
egy érdekes cikk
http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
A kapcsolat alaphelyzetbe állt
http://igy.keszul.a.weblabor.hu/
"Első előzetesünk február
igaz,
Az még messze lesz. :)
Le maradtál
Évszám meg volt jelölve? :D
@
jahj..
Fejlődés
Eltelt két hónap azóta, hogy egy statikus, reszponziv html elkészült, kikerült, majd lekerült a webről. Ez bizonyította, hogy a fejlesztés halad.
Bennem pusztán az a kérdés merült fel, hogy mi olyan extra funkciója van jelenleg a weblabornak, amit egy wordpressel, egy 40$ -os magazin sablonnal, és egy ember egy havi munkájával nem lehetne létrehozni.
A tartalom migrálása nagy feladat, de ennyi idő alatt annak is el kellett volna már készülnie.
Amit én látok a weblaborból:
- Cikkek - Wordpress támogatja.
- Blogmarkok - Egyedi wp plugint kellene hozzá irni / keresni
- Fórum - bbpress. Amilyen ütemben a fórum pörög bőven elbirja
- Munka és állás - Vannak wp pluginok erre a célra.
- Könyvajánló - sima cikkek, esetleg egyedi post tipus.
A kérdések ezzel kapcsolatban
- Milyen alapokon folyik a fejlesztés? framework, cms?
- Mikor várható bármilyen információ a fejlesztés jelenlegi állapotáról?
- Ki végzi a fejlesztést, és hetente kb mennyi időt tud rászánni?
- Hol érhető el az új weblabor funkcionális specifikációja?
A Wordpress egy költséghatékony kulimász
Persze mindenhez lehet plugint találni, de nem garantált, hogy ezek pontosan olyanok, amik kellenek. Akkor meg bele kell nyúlni (itt ugrik az update lehetősége), ami önmagában is borzalmas élmény azoknak, akik egy rendezett, jól dokumentált, neadjisten PSR-2 szabványhoz igazított kódokhoz szoktak.
Wordpress Biztonság
Nem mindegyik lesz természetesen ingyenes, de szerintem egy 5-10$/euro -s plugint meg kell venni, ha több napi fejlesztést spórolsz meg vele.
Ha ezen múllik a dolog vállalom, hogy a legdrágább plugint mint szponzor megfinanszirozom.
https://wordpress.org/plugins/cms2cms-automated-drupal-to-wp-migration/ pl itt van a konverziós script. Ezzel rögtön megoldódna a jelenlegi tartalom migrációs probléma.
De legalább látnánk, hogy a site mozdul valamerre, nem pedig csendben tart az enyészet felé.
+1
Nagy project
Van benne legjobb esetben is 5 fajta tartalom plussz a commentek, ráadásul ha több tucat nagy hirportálnak (napi 100-200 post, pár százezer látogató) megfelel, akkor szerintem a weblabor alatt is müködni fog.
Ráadásul ez erősen szakmai sznobizmus,
Tudod, ha azon vitatkoznánk, hogy wordpress mint platform akadályozza-e a weblabor fejlődését, vagy a jelenlegi állapotok, akkor én inkább a jelenlegi állapotokra szavazok.
Biztonság tekintetében, meg egy ősrégi agyonpatkolt Drupal, ismeretlen pluginekkel, vagy egy új wordpress 3-4 nagyobb pluginnel akkor inkább az utóbbi.
szerintem
Új tartalom
Nem csak neked.
Hogy érdemes-e fejleszteni,
A weblabort nyilvánvalóan a tartalom hajtja. Mert mi lesz akkor, ha lecseréli Ádám HTML 5-re a kódot? Nyilván páran el fognak egy hatalmasat élvezni, amikor meglátják az új tag-eket – no, és akkor mi lesz utána? Nagyobb öröm lesz nézegetni, hogy nem érkeznek be újabb írások?
A weblabor vérfrissítése – látszólag legalábbis – menedzsmentkérdés. Lehet itt új drupál, új HTML kód, de ha nincs új tartalom, akkor csak elvesztegetett Ádám egy csomó időt az életéből, de nem léptünk előre egy centit sem. Max. egy mobil css-t érdemes csinálni.
+1
Irnek
Be lehetne vezetni egy olyat,
Nem az ötletekben van a
Van olyan
A nagy projektet a
Van bármi garancia arra, hogy
Mert
Drupal talán kevésbé
Biztos van olyan rendszer is,
észrevételeiteket pedig
Én észrevettem, hogy azóta semmi nem történt.
Most komolyan, miért nem lehet a közösség kezébe adni az oldal fejlesztését, ha a jelenlegi üzemeltetői konkrétan már semmit nem hajlandóak tenni vele? (ne áltassuk tovább magunkat, van ígérgetés, persze, de történt azóta bármi is?)
Vagy legalább átadni olyannak aki foglalkozna vele?
Menü
Összeségében nekem mint felhasználónak nincsenek problémáim az oldallal, ami van az meg semmiség, legalább is nem bosszant annyira hogy kiakadjak rajta. Mostanában az embereknek mindenben olyan nagy igénye van (nem csak a weboldalak tekintetében), ami követhetetlen és nem lehet mindenkinek megfelelni. Mondjuk a zöld csíkos design helyére lehetne valami modernebb, de igazából engem az se zavar ha ez marad meg :)