frontend.lt » Tinklalapių kūrimas

Pirmas žvilgsnis į Google Wave

Petras — Mon, 30 Nov 2009 06:30:06 +0000

Neseniai Dr. Wave’as suteikė mums galimybę prieiti prie ilgai laukto Google Wave, taigi trumpai papasakosiu apie pirma šio stebuklo įspūdį.
Pradžiai turiu pastebėjimą, jog Wave atidarytas ant FireFox naršyklės, naudoja trečdalį mano PC resursų, todėl vienintelis būdas, kuriuo įmanoma normaliai dirbti su Wave, yra naudotis Chrome.
Taip pat, jei norėsite naudotis pilnu Wave funkcionalumu, taip pat teks Naudotis tuo pačiu Chrome, arba įsidiegti Google Gears.

Apie patį funkcionalumą, nepasakosiu, nes jį galite pasižiūrėti šioje prezentacijoje.

Galiu pradėti nuo poros įdomių sprendimų:

Visi wave aplinkos blokai yra dinaminiai (Keičiamo dydžio, minimizuojami ir pan. ) Įdomus sprendimas, kad kai blokas yra minimizuojamas, jis pakliūna į įrankių juostą, panašiai, kaip ir Langų mechanizmas operacinėse sistemose. Tą naujove turbūt pavadinti yra sunku, tačiau web srityje šį sprendimą matau pirmą kartą.
Darbas su failais, įgyvendintas labai kruopščiai – failą iš savo kompiuterio galiu įmesti tiesiai į naršyklę ir jis iš karto bus nusiųstas į Wave ir tuo pat metu suspaustas į ZIP archyvą.

Kaip jau minėjau visas kitas naujoves galite pažiūrėti Google pateiktoje prezentacijoje.

Kadangi google, skelbiasi, jog wave yra visai naujos kartos komunikacijos ir bendradarbiavimo platforma, teko ją išbandyti su kolegomis. Deja, kol kas funkcionalumu nusivylėme, dėl keleto priežasčių:

Jeigu bendraujame realiu laiku, wave’as turėtų atstoti Chat’ą, tačiau iki to yra toli gražu: visa bendradarbiavimo sistema veikia nepakankamai greitai ir trūkčioja, net ant greito interneto.
Norint išsiųsti atsakymą į kolegos postą, turiu su pele paspausti ant po tuo postu esančios, plonos linijos ir neturiu galimybės tai padaryti, naudodamasis vien klaviatūra, todėl dažai sukurdavau įvairių pokalbio šakų to visai nenorėdamas.
Labiausiai naudojamos funkcijos, tokios kaip “Reply to this message”, “Edit”, “Delete” yra paslepiamos iššokančiame meniu. Jų daug labiau norėtųsi piktogramų pavidalu, funkcinėje juostoje arba prie paties posto.
Nėra collapse/expand funkcijų, kurios tikrai pagerintų pokalbio skaitomumą.
Keblus sprendimas padarytas su blokų slinkties juostomis (ScrollBar’ais) – jie padaryti dvigubi ir labai blaško dėmesį.
Dar pastebėjau, jog registruodamasis Wave gauni pašto adresą su @googlewave.com galūnę, tačiau jokio pašto į ją siųsti negalimą. Šiuo klausimu, viltingai žvelgiu į ateitį ir tikiuosi, kad toks funkcionalumas bus įvykdytas.

Taigi, apibendrintai galiu pareikšti, jog Google wave yra kur tobulėti, kadangi, juo kaip komunikavimo įrankiu, kol kas efektyviai naudotis tikrai neišeitų. Kadangi aptariau tik “preview” versiją, tikiuosi, kad ateityje šis įrankis tikrai patobulės ir jam šiai versijai skiriu 4,5/10 įvertinimą.

Krovimo paveikslėliai

Petras — Tue, 01 Sep 2009 09:56:51 +0000

Šiuo metu, nemažai tinklapių yra įgyvendintas dinaminis tinklapio užkrovimas, pvz.: Neperkraunant puslapio, galima naršyti po prekių katalogus. Paprastai toks funkcionalumas vartotojui yra daug patogesnis, nei viso puslapio perkrovinėjimas, tačiau jeigu tokiu būdu reikia užkrauti didelį kiekį informacijos ir serveris veikia lėtai, vartotojas gali būti suklaidintas ir nueiti į kitą puslapį. Kad to išvengti, patariame naudoti krovimosi paveikslėlius “Preloader’ius”, kurie yra rodomi vartotojui, kol yra kraunamas turinys. Pvz.:

Tokius dailius paveikslėlius galite pasidaryti patys, su preloaders.net sistemėle. Joje lengvai susikursite norimą paveikslėlį, nurodydami jo išvaizdą, spalvą, dydį, bei animacijos greitį. Taip pat visi šioje sistemoje sukuriami paveikslėliai gali būti su permatomu fonu, todėl tiks bet kokiame tinklapio dizaine.

Kokias naršykles turi palaikyti visi tinklapiai (Naršyklių klasifikacija)

Petras — Tue, 18 Aug 2009 09:58:49 +0000

Kai sukuriame tinklapį, visada privalome jį pratestuoti su įvairiomis interneto naršyklėmis. Dauguma iš mūsų peržiūri gautą rezultatą tik su naujausia FireFox versija ir Su Internet Explorer 6. Dažniausiai to pakanka, tačiau pasitaiko kokių nors klaidų, kurios galimos ir kitose naršyklėse, nors ir FF ir IE6 viskas būna gerai.

Šiam tikslui Yahoo yra apibrėžusi interneto naršyklių palaikymo klasifikaciją, apie kurią trumpai papasakosiu.

Iš viso yra 3 naršyklių palaikymo klasės (lygiai):

C klasė – žemo lygio ir kokybės palaikymas. Iš esmės tai tik gryno HTML kodo pateikiamas naršyklei, be stilių ar JavaScript įgyvendintų funkcijų. Realizuojant šis klasės palaikymo lygį dažnai pasitaiko įvairių defektų.

X klasė - tai absoliučiai visų naršyklių palaikymas. Realizuojant tokį palaikymo lygmenį yra palaikomos retos arba sustabdyto palaikymo ir vystymo naršyklės – tai reiškia kad tinklapis yra atvaizduojamas teisingai net ir ant pačių rečiausių naršyklių. Toks palaikymas yra įgyvendinamas labai retai, nes dažniausiai neįmanoma nuspėti visų egzistuojančių naršyklių niuansų.

A klasė – Pati svarbiausia klasė, nes tai palaikymo lygmuo skirtas pačioms populiariausioms naršyklėms. Šis lygmuo, pagal Yahoo statistiką yra įgyvendintas 96% tinklapių. Būtent šio lygmens mes ir rekomenduojame laikytis.

Kad būtų lengviau “sugaudyti” kokias naršykles privalo palaikyti A-klasės palaikymas, čia pateikta naršyklių matrica, kuri parodo visas A klasės naršykles:

Failų dalinimosi sistema: DropBox

Petras — Wed, 12 Aug 2009 10:04:35 +0000

Turbūt sutiksite, kad kartas nuo karto mums visiems tenka dalintis dideliais failais su draugais, todėl naudojame įvairias jų dalinimo paslaugas (failai.in, Rapid share, etc.) Deja visos šios paslaugos nėra pakankamai patogios, o už pilną funkcionalumą dažniausiai dar reikia primokėti, todėl nusprendžiau papasakoti apie DropBox projektą.

DropBox - tai internetinė failų talpykla, kuri savo patogumu pranoksta visas kitas panašaus pobūdžio paslaugas. Didžiausias privalumas yra tai, kad nereikia sukėlinėti failų per naršyklę – tiesiog užtenka atsisiųsti DropBox programėlę, kuri jūsų kompiuteryje sukuria katalogą, į kurį įdedant failus, jie iškarto patalpinami internete.

Dar keli šios sistemos privalumai:

Galimybė prieiti prie savo failų iš bet kurio kompiuterio.
Galima turėti įvairaus privatumo lygmens katalogus: Viešą, Beveik viešą (pvz.: pasidalinimui nuotraukomis su draugais) ir visiškai privatų.
Darbas su direktorijomis.
Mini versijų valdymo sistemėlė, kurios pagalba galima valdyti failų revizijas.
Patogus darbas su nuotraukomis
Saugumas – Prisijungimui naudojamas HTTPS protokolas.
2 GB nemokamos vietos serveryje
… ir galų galiausiai labai patogi vartotojo sąsaja – puikus pavyzdys, kaip reikia kurti tokio pobūdžio projektus.

Taigi visko tikrai nepapasakosiu, o tiesiog parekomenduosiu šią sistemėlę išbandyti patiems :)

Taip pat būtų įdomu sužinoti jūsų nuomone, taigi nepatingėkit pakomentuoti.

Sprendimas kuris gelbsti: Firebug Lite

Petras — Tue, 04 Aug 2009 11:27:02 +0000

Turbūt nei vienas tinklapių kūrėjas neapsieitų be Galingiausio FireFox priedo – FireBug, kuris yra pripažintas pačiu naudingiausiu įskiepiu. Gaila, tačiau FireBug kol kas galima įsidiegti tik į FireFox, o kitų naršyklių Web-developer įrankiai negali jam prilygti. Tam, kad situacija būtų nors kiek geresnė FireBug Kūrėjai sukūrė pilnai JavaScript’u parašyta FireBug Lite versiją, kurią galima įsidėti į bet kokį tinklapį ir matyti visose naršyklėse (Juk JS palaiko visos naršyklės)

Paprasčiausias būdas naudotis šiuo įrankiu yra įsikelti jo kodo nuorodą į savo Bookmark’us – Tiesiog nutempkite FireBug Lite tinklapyje pateiktą nuorodą į savo BookMarko juostą ir turėsite nuorodą, kurią paspaudus FireBug Lite atsidarys bet kuriame tinklapyje.
Gaila tačiau ši FireBug’o versija dar negali redaguoti tinklapio turinio, bet manau pradžia jau padaryta :)
Taip atrodo FireBug Lite:

Ką atliekame prieš paleidžiant svetainę?

frontend.lt — Wed, 15 Jul 2009 10:07:02 +0000

Kai baigiama kurti internetinė svetainė, prieš paleidžiant, reikia ją patikrinti. Frontend.lt kolektyvas nusprendė pradėti straipsnių ciklą “Ką atliekame prieš paleidžiant svetainę”. Šis straipsnis yra pirmas ir apžvelgia pačius elementariausius dalykus, į kuriuos reikia atkreipti dėmesį prieš sukeliant svetainę į serverį ir parodant ją galutiniam vartotojui, arba projekto užsakovui.

Vartotojo interfeisas

Lankytojai į svetainę ateina naudodamiesi įvairiomis www naršyklėmis. Ne visos jos buvo kurtos laikantis standartų (ankstesnės Internet Explorer versijos), ne visos gali juos palaikyti (pvz. per maži įrenginio, kuriame veikia naršyklė, skaičiavimo pajėgumai). Visų naršyklių ir įrenginių, bei operacinių sistemų variacijų išbandyti neįmanoma, o greičiausiai ir nereikia – juk neįmanoma prisitaikyti prie visų. Mes rekomenduojame naujai paleidžiamą svetainę patikrinti su populiariausiomis naršyklėmis :

Naujausia Gecko varikliu paremtos naršyklės versija (Firefox)
Naujausia WebKit naršyklė (Google Chrome, Apple Safari)
Populiariausios Microsoft Internet Explorer versijos (straipsnio rašymo metu 6.0 – 8.0)
Naujausia Opera versija

Frontend rekomendacija: svetainę kurti, peržiūrint ją su Firefox, o su IE ją pratestuoti paskutiniame žingsnyje. Taip bus sutaupoma daug laiko nes naudojant Firefox naršyklės priedais, tokiais kaip Firebug, galima keisti išvaizdą, pačioje naršyklės aplinkoje.

Patikrinti, kaip svetainė atrodo su skirtingomis vaizduoklio ekrano rezoliucijomis.
Žvilgtelėti, kaip svetainė atrodo su mobilia naršykle – vis daugiau lankytojų naudoja mobilius įrenginius.
Pabandykite, kaip svetainė veikia išjungus JavaScript, Sausainėlius (Cookies), CSS. Ar įmanoma surasti pagrindinę informaciją, naviguoti svetainėje?
Svetainė turi galimybę siųsti elektroninius laiškus? Būtinai patikrinkite, kaip laiškai atrodo su populiariausiomis elektroninio pašto sistemomis:
- Microsoft Outlook
- Mozilla Thunderbird
- Google Gmail
- Yahoo Mail
- Hotmail

Patikrinkite tokių interfeiso dalių, kaip turinio filtrai, puslapiavimo elementai, formos ir kiti funkciniai komponentai veikimą.

Svetainės turinys

Ar svetainės tekstai yra gramatiškai taisyklingi? Pasinaudokite klaidų taisytojais!
Ar neliko testinių “Lorem ipsum” puslapių arba straipsnių?
Ar paveikslėliai yra optimizuoti internetui, t.y. ne per dideli?
Ar paveikslėliai turi alt atributus, aiškiai apibūdinančius, kas pavaizduota?
Patikrinkite nuorodas į dokumentus.

Patogumas vartotojui

Sukurkite galimybe vartotojui bendrauti su svetainės kūrėju. Taip bus pranešamos klaidos, siunčiami pasiūlymai.
Niekada neleiskite, kad elektroninio pašto adresas svetainėje būtų paprastu tekstu. Frontend rekomendacija: mailto nuorodą iškviesti JavaScript pagalba.
Patikrinkite, ar paspaudus ant logotipo pateksite į pradinį puslapį.

Veikimas, greitis

Testuokite svetainę su YSlow arba Page Speed. Jeigu rezultatai netenkina, pasinaudokite pateikiamais patarimais.

Technologijos

Ar HTML ir CSS kodas atitinka standartus? Pasinaudokite validatoriais!
Ar naudojate reset CSS?
Ar neįmanoma perkelti CSS kodo į atskiras bylas, kad kraudamiesi puslapiai gauti tik tą CSS dalį, kurios reikia jiems atvaizduoti.
Ar negalima perkelti JavaScript kodo į atskiras bylas?
Ar JavaScript elementai yra kiek įmanoma žemiau svetainės kode?
Jeigu svetainėje yra naudojamos technologijos, reikalaujančios įdiegti papildomas bibliotekas, pvz: Adobe Flash, Sun Java, Adobe Air, Microsoft Silverlight, ar yra pateikiamos aiškios instrukcijos, kaip atsisiųsti ir įdiegti jas savo sistemoje?

Klaidų apdorojimas

Ar svetainės klaidų išvedimas yra išjungtas vartotojui? Eiliniam vartotojui tikrai neįdomu, ar įvyko 500 klaida, ar nerasta funkcija, ar bloga SQL sintaksė. Jam greičiausiai įdomus tik pats klaidos faktas.
Ar svetainės klaidos yra registruojamos? Rekomenduojama rašyti klaidas į bylą.
Ar kritinės svetainės klaidos yra nedelsiant siunčiamos kūrėjui?

Saugumas

Ar visi iš vartotojo atėję duomenys yra išvalomi prie naudojant juos (pvz, rašant į duomenų bazę)?
Ar slaptažodžiai nėra saugomi paprastu tekstu?
Ar tinkamu dažnumu daromos svetainės atsarginės kopijos? Ar veikia atstatymas iš atsarginės kopijos?
Ar įvedimo laukai yra apsaugoti nuo spam robotų?

SEO

Patikrinkite, ar svetainės adresai yra draugiški SEO atžvilgiu (Nenaudojami dinaminiai adresai)
Patikrinkite, ar visi puslapiai turi prasmingas antraštes (title).
Pasižiūrėkite, ar nėra nuorodų, sakančių “spausk čia” ir panašiai. Jei taip, pasistenkite jas optimizuoti įdedant reikšmingesnius pavadinimus su raktažodžiais.
Ar turite XML žemėlapį? Ar jis “paduotas” paieškos sistemoms?
Ar integravote statistikos sistemą? Pavyzdžiui, Google Analytics?
Ar naudojate robots.txt? Jis tikrai veikia taip, kaip turėtų?
Ar svetainės išdėstymas nėra paremtas lentelės elementu?
Ar sesija, vartotojų prisijungimas arba registracija, javascript arba flash technologijomis paremta navigacija neužkerta kelio paieškos robotams aptikti naudingą turinį?
Naudojate nukreipimus (redirect)? Ar žinote skirtumą tarp 301 ir 302 nukreipimų?
Ar neliko svetainėje neveikiančių nuorodų? Ar yra priemonės stebinčios ir pranešančios apie neveikiančias nuorodas?
Ar nuorodos svetainėje yra tekstinės? T.y. ar navigacija svetainėje nėra pagrįsta paveikslėliais, arba Adobe Flash technologija?
Ar nenaudojami frame ir iframe elementai?