P.S.: Za tiste, ki vas moti tale “grozn dizajn”, jutri bo bolje, obljubimo

Spodaj trije osnovni koncepti, najprej prvi:

Nato drugi (meni najbolj všečen):

In še tretji, po mojem mnenju najbolj drzen koncept!

Meni se zdi, da so na dobri poti, še bolj pa mi je všeč, da bomo lahko spremljali napredek in proces prenove. Kako pa se vam zdi (prenova in spremljanje napredka)?

P.S.: Če ne poznate Happy Cog, fantje stojijo za legendarnim webdizajnerskim cajtngom A List Apart (in mnogi drugi projekti) njihova pa je tudi zadnja podoba popularnega WordPressa!

Ravno Mare je tako krivec za prenovljen ŽVPL-ov logotip, ki je namesto strešice dobil rdečo zvezdico.

Trajalo je nekaj mesecev preden so vrle glave takrat še produkcijske skupine Em3r10 (se pravi Gregor, Mare, Matko in jaz) ugotovile, da je treba nadaljevati z začetim procesom (pre)oblikovanja ŽVPL-a, kmalu je nastal naslednji predlog oblikovne predloge, izpeljan iz Maretove osnovne ideje (trije članki v vrsto).

Jeseni smo bili že skoraj zadovoljni! Vstopna stran je začela dobivati svoj (skoraj) končni izgled: tri izpostavljene novice, spodaj dogodki, pa vsepolno nekih vsebin iz raznih rubrik, a vendar smo hoteli imeti na vstopni strani še več vsebine. Nastalo je tole.

Opazili boste, da smo v prvi varianti zgornjih dveh verzij spremenili tri prve članke za enega večjega in štiri tekstovne, vendar smo idejo zavrgli, ker je (bila že takrat) frekvenca člankov cca 3/dan in bi bilo nesmiselno izpostavljati samo enega. Tako je ostalo vse do danes …

Tako, osnove so bile narejene, pljuniti bo treba v roke in začeti pripravljati HTML-je.

Spraševali smo se kaj narediti z izpisom članka in rubrik in za izpis članka uporabili nek poizkus prenove ŽVPL-a, ki je imel zadovoljiv layout članka samega, a oblikovno še ne dodelan. Skupek obeh mockupov je bi zadovoljivo dober (zgoraj).

Oktobra 2003 so bili prvi HTML-ji narejeni, prva stran, izpis članka (z več verzijami izpisa slik, komentarji, osebno izkaznico osebe v članku, … skratka vsem kar paše zraven). Zataknilo se pri izpisu slik, za kar nikakor nismo našli rešitve. Pa smo raje naredili še izpis dogodkov, obenem razširili kategorije in čakali boljše dni.

Boljši dnevi so prišli leta 2005, nekaj mesecev pred 2.velikim ŽVPL-ovim mrkom, ko je 1. neusojeni programer začel programirati novo vrezijo ŽVPL-a (brez imen, da ne bomo komu delali škode), a se na žalost prenova ni zgodila, saj nam je žveplenobna luknja odnesla 1. nesojenega programerja. Vmes smo ugotovili, da je XHTML boljši kot HTML 4 in da je breztabelno spletno oblikovanje boljše kot vsepolno tabel v dokumentih. Rečeno storjeno, kmalu smo HTML prešmelcali v XHTML in bili veseli, ker so bili dokumenti validni.

Decembra 2005 nam je odneslo tudi ŽVPL (po dveh hackerskih napadih je strežnik končno izdihnil press), nekaj mesecev kasneje pa nam je odneslo še programerja (usoda pač), Vmes smo še malo pošmelcali HTML-je ampak večjih vizualnih sprememb ni bilo.

Pa smo čakali. Prišlo je leto 2006 in z njim 2. nesojeni ŽVPL-ov programer, a je tudi njega vzelo morje. Vmes so zrasle resolucije monitorjev in minimum je postala resolucija 1024×768 (juhej) in treba je bilo razmišljati o realignu realigna, čeprav ŽVPL-a že dolgo ni bilo več. Volje pa tudi ne, saj še vedno nismo našli programerja …

V letu 2007 se je pojavil 3. nesojeni ŽVPL-ov programer in volja za nov realign na 960 pixlov, kar se je tudi zgodilo. No, zgodil se je realign grida, ŽVPL pa ne.

Prišlo je leto 2008, leto 10. obletnice ŽVPL-a in spet smo iskali programerja. In obvestilo, da bo ŽVPL POSH. Prišel je tudi 4. nesojeni ŽVPL-ov programer in rahlo “spimpan” ŽVPL. Končno smo pripravili izpis članka kot se šika in izpis velike fotke, na kar smo čakali kar nekaj časa.

Ker pa sovražimo IE6 (in nismo edini) smo se odločili, da se bomo malo pohecali s CSS-jem in naredili verzijo samo in izključno za IE6. Črno, s tako zabavno fleho, ki opozarja uporabnike, da deskajo z jajci.

Kar dobro je kazalo, Had je že celo napovedoval splavitev, kazalo je, da nam bo končno uspelo. No, pa vseeno nismo imeli sreče, malo po žuru ob 10. obletnici ŽVPL-a je Wuxscho-tu odletu disk in z njim že skoraj končan ŽVPL 3.0  (zato vsi developerji: “Backup early, backup often!”)

Po nekaj mesecih se je Vini odločil, da bo programiranje vzel v svoje roke in zgodba o splavitvi se je spet začela. Vsi sledilci ŽVPL-ovega Twitter kanala ste lahko videli nekaj predogledov prihajaočega ŽVPL-a. Dobili smo kar nekaj komentarjev na oblikovne felerje (predvsem barve povezav in barv oken v sidebaru in nekonsistentno širino in jih nekaj tudi upoštevali). ŽVPL je bil splavljen 31. decembra 2008 in je zgledal natančno takole.

To je zgobdba o procesu oblikovanja novega ŽVPL-a, ki pa vsekakor še ni končana. Ker vemo, da je oblikovanje proces in ker je obliko prilagajati funkciji ne obljubimo, da bo vedno tak, najbrž bo iz meseca v mesec lepši, upamo pa tudi boljši!

P.S.: O procesu nastajanja ŽVPL-a boste slišali na 100. Spletnih uricah. Respect!

Skript je zelo majhen, deluje na <img> objektih in na background-image atributih v CSS-ju, deluje samodejno brez definiranja klasov ali klicanja funkcij in je enostaven za prštimat’. Sliši se bombastično. Odlična novica, jeee!

Via WebAppers.

For the next few years we’ll probably need to continue supporting Internet Explorer 6, but that doesn’t mean we just have to wait for users to find something new. Our goal with this campaign is to rally the development community behind the goal of reducing the number of Internet Explorer 6 browsers in use by urging users to upgrade their browsers without hindering the user experience.

Je že res, da je toliko boljših brskalnikov kot IE6, da bo treba nujno podpret tole!!!

Vesel CSS Naked Day vsem!

Problematičen je “le” Internet Explorer 6, nezasluženo najbolje uporabljen brskalnik na “modri kugli” (po W3Counterju ima kar 43,33 % delež, po TheCounterju pa grozljivi 50 % delež), ki transparence zaradi (večini spletnih razvijalcev) neznanega razloga* ne prikazuje kot je potrebno.

In ker sem danes ponovno našel “transparency hack”, ki zagotovo deluje, ga delim z vami (prvič sem ga uporabil na Hudih bejbah).

Za uspešen izris PNG-ja v IE-ju potrebujete:

• poljubno PNG sliko (lahko je tudi transparentna), paziti morate le, da je PNG slika široka toliko kot element v katerem ga boste prikazovali (<div>, <h1>, ponavljanja po X oz Y osi hack v IE 6 ne podpira (na žalost)),
• ščepec CSS kode,
• dve žlici Vegete …

… in vaš PNG bo deloval kot se šika. Tudi v IE6. Zagotovo.

Primer

Na strani, ki jo pravkar berete imamo <h1> kot transparenten PNG, ki pa v IE6 do danes ni deloval:

Pobrskal sem po starih CSS dokumentih in v nekaj minutah apliciral “hack”, ki omogoči transparenco v I-fuckin’-E-ju 6, koda pa se glasi:

h1 {
background: transparent url(img/h1.png) no-repeat 0 0 !important;
filter:progid:DXimageTransform.Microsoft.AlphaImageLoader(src='http://www.em3r10.com/sites/all/themes/em3r10-rc3/img/h1.png',sizingMethod='crop');
margin: 0;
padding-left: 70px;
height: 136px;
text-indent: -9999px;
display: block;
overflow: hidden;
background: none;
}


Da vam bo hack deloval, pazite na naslednje haklce: prvi background je za normalne brskalnike, ki PNG znajo prikazati, tisti !important na koncu vrstice je nujen, da ga bodo taisti brskalniki prikazali, ker imamo v zadnji vrstici background: none, ki je tam samo zaradi klinčevega IE6, vendar bodo normalni brskalniki zaradi !important za tapravo vzeli prvo vrstico.

V drugi vrstici je neka čudna kobasa (v zgornji kodi je vrstica cela) filter:progid:DXimageTransform..., ki jo noben razvijalec pri zdravi pameti ne bi metal v svoj CSS (CSS ne bo več validen, če dodate to vrstico kode), ampak če bo IE6 prikazoval transparentne PNG-je se splača (lahko uporabite t.i. conditional commenting in za brskalnike starejše od IE6 uporabite posebno CSS datoteko).

Potrebno je dodati, da naj bo pot do PNG-ja v drugi vrstici absolutna, ker drugače hack ne bo deloval. To je to, žlico Vegete posujte po tipkovnici, če vam stvar ne bo delovala, a je verjetnost za to precej nizka.

Po apliciranju zgoraj opisanega CSS hacka se PNG lepo izpisuje tudi v IE-ju 6. Komentarji dobrodošli

Sam sem poimenoval 42 elementov in ker je cifra res kul, tale test delim z vami!

42

P.S.: Obstaja tudi Koliko CSS property-ev lahko našteješ v 7 minutah. Had, zdej ti pa ne bo dolgčas vsaj 12 minut

Bistvenega pomena je to, da spletni razvijalci uporabljamo čim manj HTTP zahtevkov (requestov), ker po merjenjih Yahoo!-evih inženirjev le ti najbolj upočasnjujejo čase nalaganja spletnih strani.

Po tem nasvetu je Nate končal predavanje, nas poslal domov in rekel, da če naredimo “samo” to, da HTTP requeste spravimo na minimum z:

• CCS škrati (beri CSS Sprites na ALA),
• kombiniranimi / združenimi JS in CSS datotekami,
• image mapami,

bodo naše strani 20-30% hitrejše.

Seveda se je predavanje nadaljevalo, tako da smo slišali še ostalih 11 pravil vmes pa je omenil, da bodo pri Yahoo!-ju razvili orodje za analiziranje spletnih strani, ki vam bo povedalo, kaj je z vašo stranjo narobe in kako bi jo lahko pohitrili.

Konec julija pa je Nate objavil zapis, da se je zgodilo: fantje pri Yahoo!-ju so za popularni Firefoxov dodatek Firebug razvili dodatek YSlow, čudovito orodje, ki vam pove, kaj je s hitrostjo vaše strani narobe in zakaj …

Predlagam, da si najprej preberete slajde Nate-ovega preavanja, si dol skotalikate YSlow, in ko boste že na Y! Developer Networku, še malo pobrskajte naokoli, se najde kakšna zanimiva reč za spletne mojstre.

Håkona sva poslušala na letošnji @mediji in že tam je govoril o zgornji problematiki, pa tudi o “multi-column layoutu”, oblikovanju za male ekrane (dlančniki, mobilci, …), CSS-ju za tisk in še čem.