Prvič smo praznovali predlani, drugič lani in tretjič letos. Želim vam vesel dan CSS nagcev (ali po angleško CSS Naked Day), več o tem zakaj in kako na zgornjih povezavah ali na Hadovem zapisu …
P.S.: Za tiste, ki vas moti tale “grozn dizajn”, jutri bo bolje, obljubimo 
Danes sem na Twitterju zasledil, da pri Happy Cog Studios redizajnirajo (preoblikujejo) spletno stran Mozilla.org in da so objavili proces preoblikovanja spletne strani na vpogled na strani RedesignMozilla.org! Odlična ideja, obiskovalci strani bomo seznanjeni z dogajanjem, seveda pa bomo lahko tudi komentirali razvoj preoblikovanja spletne strani. Bravo Happy Cog, bravo Mozilla!
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!
Nedavno splavljeni ŽVPL smo začeli risati že daljnega leta 2003, ko smo se prvič začeli pogovarjati o prenovi (zakaj je prenova trajala toliko časa je druga zgodba, ki pa naj ostane zavita v tančico mistike). Prvi je svoj predlog narisal Mare Vavpotič, ki je prvi predlog pokazal poleti 2003, zgledal pa je natančno takole.
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!
Spletni mojstri, nastopil je čas veselja! Fantje pri Unit Interactve so naredili super majhen, kompakten javascript fix za PNG transparenco v IE6 (eno rešitev sem že opisal), ki sliši na ime Unit PNG Fix.
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.
Naredi splet lepši in se pridruži akciji na SaveTheDevelopers.org, kjer trenutno poteka kampanja proti Internet Explorerju 6, edinem brskalniku na temni strani spleta. Kot pravijo sami:
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!!!
Tako kot lani, tudi letos praznujemo Dan CSS nagcev, ki letos začuda ni 5. aprila, ampak 9. aprila (hvala, Had).
Vesel CSS Naked Day vsem!
PNG je odličen format in normalni brskalniki (Mozilla Firefox, Opera, Flock) ga z lahkoto prikazujejo, vključno s transparencami, ki so mogoče celo najboljša stvar, ki se je zgodila spletnim grafičnim formatom.
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:
<div>, <h1>, ponavljanja po X oz Y osi hack v IE 6 ne podpira (na žalost)),… in vaš PNG bo deloval kot se šika. Tudi v IE6. Zagotovo.
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
Po SEO kvizu vam predstavljam še en zanimiv kviz, kjer boste osvežili oz. pretestirali svoje znanje HTML-ja (sicer 4.0, duh): Koliko HTML elemntov lahko poimenuješ v 5 minutah kviz
Sam sem poimenoval 42 elementov in ker je cifra res kul, tale test delim z vami!
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
Nate Koechley je na letošnji spletni konferenci @media 2007 govoril o tem kako pohitriti njegovo, tvojo, mojo spletno stran. Nate je predstavil 12 pravil za hitrejše spletne strani (na njegovem blogu boste našli zapis skupaj s .pdf in .ppt dokumentom iz konference, vendar je po konferenci dodal še dve pravili, tako da jih je zdaj 14).
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:
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åkon Wium Lie, oče CSS-ja se je ob 10. obletnici CSS-ja na A List Apart razpisal o tem kakšna je prihodnost CSS-jev, predvsem se je razhudil o pereči problematiki, ki spletne oblikovalce spremlja že od vsega začetka: zakaj v CSS-jih ne uporabljamo nesistemskih tipografij (fontov), kje in kako v zgodbo pride CSS, ali bodo spletni (TTF) fonti naslednja velika stvar v spletnem oblikovanju, kakšni so argumenti proti uporabi fontov (večinoma legalni, ker so vsi custom fonti intelektualna lastnina in so plačljivi) …
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.
Copyright © 2004–2009. All rights reserved.
RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.