Technologijos

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ų:

1. 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ą.
2. 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ą.

Kasdien tenka perskaityti ne vieną straipsnį, susijusį su vartotojo sąsajos kūrimu, bei programavimu. Ieškant naudingos informacijos, užtinkam tikrų perliukų, taigi, tęsdamas tradiciją, dalinuosi su skaitytojais, vėliausiai atrastomis įdomiomis nuorodomis. Šį kartą nuorodų nebus taip daug, o jos išskirtinai apie JavaScript ir jQuery:

JavaScript Regex generatorius – pagelbės kuriant reguliariąsias išraiškas, pavyzdžiui skirtas formų generavimui.

Top 20 jQuery Tips and trics, 8 awesome jQuery tips ir 7 tips for better jQuery code – išrenku pačius įdomiausius ir naudingiausius patarimus:

1. jQuery data() metodas, skirtas duomenims bet kokiam DOM elementui priskirti;
2. live()  - būdas priskirti įvykių apdorojimui skirtas funkcijas net prieš DOM elementų sukūrimą;
3. $(‘a[rel=external]‘).attr(‘target’,‘_blank’) – taip geriausia apdoroti naujame lange atidaromas nuorodas išlaikant dokumentą validžiu;
4. if ($(”element selector”).length) {..} – būdas patikrinti, ar elementas egzistuoja. Nors šitaip tikrindavau jau seniai, tačiau dabar galutinai buvo patvirtinta, kad šis būdas geriausias;
5. O taip pat prie šio sąrašo labai tinka frontend.lt prašytas būdas geriau užkrauti JavaScript  - naudoti Google Ajax API.

Šiam kartui tiek, geros savaitės pradžios!

Šiek tiek nukrypsiu nuo Web temos ir parodysiu, kaip dalį interneto atnešti į jūsų darbalaukį. :) Viskas prasidėjo nuo to, kad jau kurį laiką naudojuosi labai šaunia paslauga playlist.com, kurios pagalba galiu turėti internete savo Playlist’ą (liet. grojaraštį) ir klausytis savo mėgiamos muzikos, prie bet kurio kompiuterio. Tačiau ilgainiui iškilo problema, kad klausytis muziką per naršyklę kai yra atidaryta 50 įvairių puslapių yra tikra kankynė, taigi nusprendžiau pasidaryti sau Darbastalio programą su Adobe AIR. :)

Čia pateiksiu trumpą pamokėlę, kaip greitai susikurti savo mini programėlę su AIR’u:

1. Pradžiai jums prireiks parsisiųsti paties AIR varikliuką ir AIR SDK, kuriuos galite parsisiųsti paspaudę ant šių nuorodų:
   Adobe AIR
   AIR SDK
2. Pasidarome index.html failiuką, kuris atvaizduoja tai, ką atvaizduos mūsų programa. Maniškis atrodo taip:
1.        
2. <html xmlns="http://www.w3.org/1999/xhtml">
3.         <head>
4.                 <title>Petras player</title>
5.         </head>
6.         <body>
7.                 <div>
8.                         Mano playlis.com grotuvo embed kodas
9.                 </div>
10.         </body>
11. </html>
12.  
3. Pasiruošiame programos deskriptorių: app.xml failiuką, kuriame nusistato visi programos kompiliavimo parametrai. Šio failiuko turinys turi atrodyti taip:
1.  
2. <application xmlns="http://ns.adobe.com/air/application/1.0">
3.   <id>com.example.appname</id>
4.   <version>1.0</version>
5.   <filename>Petras Player</filename>
6.   <initialwindow>
7.     <content>index.html</content>
8.     <visible>true</visible>
9.     <width>435</width>
10.     <height>400</height>
11.         <maximizable>false</maximizable>
12.         <resizable>false</resizable>
13.         <systemchrome>none</systemchrome>
14.   </initialwindow>
15. </application>
16.  
4. Kad būtų patogiau testuoti programą, pasidarome šią failų/direktorijų struktūrą:
   */programa/source/index.html
   */programa/app.xml
   */programa/build
   */AdobeAIRSDK/ (Čia nukopijuojame visą AIR SDK archyvo turinį) Rekomenduoju įsirašyti direktoriją */AdobeAIRSDK/bin/ į savo Windows aplinkos sisteminius kelius (Environmenth paths), tada rašant komandas, nebereikės vargti su pilnais šio SDK failų keliais.
5. Testuojame :) Pasileidžiame windows shell’ą (komandinę eilutę)
   Einame į */programa/source direktoriją ir įvedame komandą: “adl source/app.xml”
   Maniškė programa puikiai pasileido, o kaip gi jūsų? :)
6. Kai pilnai sukuriame programą belieka ją “subuildinti”, tačiau visos AIR programos reikalauja skaitmeninio sertifikato. Jam sukurti galima panaudoti AIR SDK, toje pačioje eilutėje įrašant:
   “adt -certificate -cn SelfSign -ou Dev -o “Pavyzdinis sertifikatas” -c US 2048-RSA ../sertifikatas.pfx slaptazodis”
   Kai įvykdome šią komandą, direktorijoje */programa/ turėjo susikurti sertifikatas.pfx failas, kurį panaudosime programos sukūrimui (Nepamirškite slaptažodžio ;) )
7. Paskutinis žingsnis: programos build’inimas. Komandinėje eilutėje įrašome šią komandą: “adt -package -storetype pkcs12 -keystore ../sertifikatas.pfx ../build/Mano_programa.air app.xml index.html”
   Įvykdžius šią komandą gauname gražų Mano_programa.air instaliacinį failą, kurį jau galime duoti išbandyti draugams :)

Štai ką gauname, kai pasileidžia ši programa:

Gana retai kas užsimano, kad puslapyje atvaizduojamas kursorius būtų koks nors įmantresnis, bet būna visko.  Nieko tokio, kai tai tik kitokia rodyklė, kurią galima pasirinkti iš jau leistinų, tačiau kai prireikia kažko visiškai unikalaus, tenka gerokai paplušėti, kad viskas atrodytų gerai.

Pagal viską CSS parametras cursor turi nemažai numatytų reikšmių, kurios palaikomos pagrindinėse naršyklėse. Aprašomas ir parametras url(), kuriame nurodžius jūsų pasirinktą paveikslėlį, jis bus atvaizduotas vietoj kursoriaus.

Nors ir skelbiama, kad IE6+ puikiai atvaizduoja kursoriaus paveikslėlį jei jis .cur formato, man to pamatyti nepavyko. Bandant su FF, G Chrome bei Safari atvaizduojama tvarkingai. Išbandžius FF neprieštaravo net jei buvo naudojami .gif paveikslėliai. Verta paminėti, kad nenurodžius alternatyvaus kursoriaus po kablelio, nei vienoje naršyklėje nieko nepamatysite, taigi rekomenduotinas toks formatas:

cursor: url(cursor.cur), default;

Vietoj default gali būti pointer, text, help ir kiti numatyti kursoriai.

Apie objektinį programavimą turbūt teko girdėti kiekvienam IT srityje besimokančiam ar dirbančiam. Sunku ir įsivaizduoti kaip seniau buvo galima dirbti be to. Tačiau objekto sąvoka HTML bei CSS srityje – naujas dalykas.

Tokios idėjos esmė CSS selektorių hierarchija. Kuriamos kuo bendresnės klasės, kurios tarsi išplečiamos pagal poreikį (sakau “tarsi”, nes css neturi tokio dalyko kaip extends). Taip susikūrę kelias pagrindines klases blokams, sritims ir kitiems dažnai pasikartojantiems ir mažai besiskiriantiems elementams, juo vėliau patiksliname pagal poreikį pridėdami konkretesnes klases. Pavyzdžiui turime bendrą klasę block, kurią prireikus dekoruojame ir pritaikome pridėję klasę side_block.

Objektinio mąstymo CSS/HTML srityje  pradžia  galime laikyti CSS framework’us – CSS klasių bibliotekas leidžiančias greitai ir struktūriškai kurti svetainės išdėstymą.

Kokia iš to nauda? Ogi tokia, kad prireikus kažkokį elementą panaudoti dar kartą nereikės jam rašyti naujų stilių grandinės, užteks atkartoti HTML kodą ir priskirti tą pačią klasę. Verta paminėti, kad tokiu būdu projektuojant CSS žymiai patogiau ankstesniuose projektuose sukurtas klases panaudoti naujuose, nes jos išdėstytos objektiškai ir nėra priklausomos nuo tėvinių elementų.

Susidomėjusiems įdėja siūlau pažiūrėti video prezentaciją apie OOCSS. Ji ilgoka (~45 min), bet įdomi.

Ilgą laiką įdomesnės nuorodos buvo žymimos įvairiose sistemose: uždedant žvaigždelę arba paspaudžiant mygtuką “Share” Google Reader kliente, įkeliant žymę į Deliciuos sistemą, išsaugant žymę naršyklės nuorodų saugykloje. Laikas bėga, nuorodos sensta, o jomis naudojuosi (beveik) aš vienas. Nesąžininga. Taisau klaidą ir dalinuosi geriausias (mano subjektyvia nuomone) nuorodas, kurios gali būti naudingos frontend.lt skaitytojui:

SEO

„Google“ paieškos sistemos optimizavimo pradedančiųjų vadovas – sukurtas naudoti kompanijos Google viduje, tačiau vėliau nuspręsta, jog ten surašytos mintys bus aktualios visiems. Rekomenduojame.

List of Best and Worst practices for designing a high traffic website – sąrašas svetainės savybių, įvertintų balais, pagal tai, kiek tai yra (ne)naudinga kuriant puslapio įvaizdį paieškos robotams (Google, Yahoo!, Microsoft).

HTML

10 HTML Tag Crimes You Really Shouldn’t Commit – pateikiama 10 dažniausiai pasitaikančių nusikaltimų HTML kalbai. Turėtų kas nors bausti nusikaltėlius!

10 HTML Tags that are Overlooked but Should be Used – iš div elemento, CSS pagalba sugebame padaryti bet ką, tačiau galbūt neverta išradinėti dviračio, o imti jau pagamintas žymes ir naudoti savo kode?

CSS

WordPress

Neseniai teko daryti mini-tyrimą apie online forumų sistemas, taigi nusprendžiau glaustai pasidalinti surinktomis žiniomis. Manau, kad dauguma, kas skaito šį blogą, žino, kas yra Internetinis forumas, jei ne, siūlau paskaityti šį Wikipedia straipsnį.


Visų pirmiausia, verta paminėti forumų tipus. Jie yra 2:

• Flat: Forumas, kuriame komentarai paprasti rašomi vienas po kitu – panašiai, kaip kokioje žinučių lentoje (message board)

• Threaded: Forumas, kuriame kiekvienas komentaras yra atsakymas į kitą postą (Populiarus sprendimas, techninės pagalbos forumuose, kur daug žmonių atsako į vieną klausimą.) Toks tipas labai primena susirašinėjimą el paštu, kai tenka daug kartų naudoti “Reply” funkciją viename laiške.

Gera žinia, kad dauguma forumų sistemų paprastai palaiko abu šiuos tipus.

Šiuo metu, yra sukurta visokio sudėtingumo forumų sistemų, įvairiomis programavimo kalbomis (php, python, ruby…), tačiau čia paminėsiu tik tas kurios yra sukurtos php platformai. Čia išrinkau pačių populiariausių sistemų penketuką:

• phpBB (Pati populiariausia sistemą, pasižyminti labai gausiu funkcionalumu. Tinka dauguma projektų ir yra atviro kodo. Specializuotuose forumuose ši sistema minima, kaip pati geriausia.)
• vbulletin (Labai populiari ir gerai įvertinta sistema. Praktiškai lygi (gali net geresnė) nei phpBB. Vienintelė blogybė, kad sistema yra mokama (Licencijos kaina: 100$ terminuotam laikotarpiui, 180$ – neterminuotam))
• simple machines forum (SMF) (Labai populiarus forumas. Užima 3 vietą po phpBB ir vbulletin. Labai daug kur minimas, ir naudojamas. Yra atviro kodo.)
• Phorum (Taip pat įdomus sprendimas, gan paprastas naudoti ir neperkrautas. Turi visas reikiamas funkcijas ir daugiau, bei yra atviro kodo.)
• invision power board (Sistema tikrai patenka į populiariausių penketuką (4-5 vietą – panašiai, kaip ir Phorum). Sistema yra mokama, tačiau labiau orientuotą į verslo klientus (yra du atskiri paketai, po 150$ standartinis ir 300$ verslui), todėl nelabai populiari, tačiau keliuose forumuose radau pareiškimus, kad tai pati geriausia tokio tipo sistema.)

Kalbant apie forumų sistemų  funkcionalumą, tai jų funkcijos praktiškai standartinės. Išrinkau kelias, į kurias reikėtų atkreipti dėmesį, renkantis sistemą:

1. WYSIWYG redaktorius (What You See Is What You Get), kuris suteikia galimybę, į forumo komentarus rašyti formatuotą tekstą.
2. Failų pridėjimas prie komentarų
3. Automatinio citavimo funkcija (Quatation)
4. Vartotojų skaidymas į grupes, vertinimas
5. Detalaus vartotojo profilio sukūrimas
6. Komentarai RSS/Atom formatu
7. Įvairios apsaugos priemonės (Juodieji sąrašai, IP adreso blokavimas, etc.)

Pabaigai, noriu paminėti, kad internete gamina rasti forumų palyginimų tinklapius, kuriais naudojantis, galima išsirinkti vieną sistemą, kuri labiausiai atitinka jūsų poreikius:

• http://www.forummatrix.org/
• http://www.forum-software.org/

Lentelėmis formuojamo dizaino laikai pamažu praeina. Dabar struktūra dažniausiai formuojama div elementų pagalba. Juos karts nuo karto tenka pastumti ar į vieną ar į kitą pusę, o tam naudojamos css reikšmės float: left; ar float: right;. Tokiose situacijose dažniausiai ir prireikia clearfix.

Kai vaikiniams elementams yra priskirti float: left; ar float: right; atributai, o tėvinis elementas neturi fiksuoto aukščio, nutinka taip, kad tėvinis elementas vaizduojamas tarsi tuščias, arba tik teksto eilutės aukščio.

Mums norėtųsi, kad tėvinis elementas būtų bent jau tokio aukščio kaip vaikiniai elementai. Štai šią problemą ir išsprendžia clearfix metodas. Jis realizuojamas css faile aprašant klasę, kuri po to priskiriama tėviniam elementui.

Čia aprašyta daugiau klasių su skirtingomis pradžiomis todėl, kad skirtingos naršyklės kai kuriuos atributus supranta skirtingai.

Priskyrus šią klasę aukščio problema bus sutvarkyta ir tėvinis elementas atrodys taip kaip ir norėjome.

Jeigu tenka atlikti interneto projektų analizę, ar kitokį darbą, kuriam atlikti reikia prisiregistruoti prie daugelio tinklapių ar internetinių sistemų, paprastai tenka užpildyti galybę registracijos formų, o tai iš tiesų varginantis procesas.
Kai registruojuosi naujame tinklapyje, kai kuriuose iš jų registracijos formą galiu užpildyti daug greičiau,  jei visiems formos laukams yra priskirti logiški vardai – tada pati naršyklė man pasiūlo užpildyti lauką tokia pačia reikšme, kurią buvau kažkada įvedęs kitoje formoje.

Tai yra labai patogu, jei tenka rankomis pildyti daug panašių formų. Deja ne visuose tinklapiuose tai yra įmanoma, nes ne visur tiems laukams yra priskirti korektiški name atributai ir todėl AutoFill funkcija neveikia.

Viskas ką tokiu atveju reikia padaryti, tai kiekvienam laukui priskirti vardą, kuris atitinką lauko pavadinimą, anglų kalboje.
Pvz.: laukams “Vardas”, “Pavardė” ir “El. paštas” turėtų būti suteikiami tokie vardai:

Karts nuo karto puslapyje tenka panaudoti sąrašą su keliomis pasirinkimo galimybėmis. Tam geriausiai tinka <input type=”checkbox” /><label>Pasirinkimas</label> html elementų derinys. Naudojant juos dažniausiai užmirštama, kad nerašant jokio JS galima juos apjungti taip, kad checkbox elementas pasižymėtų ne tik paspaudus ant jo, bet ir ant jam priskirto label elemento. Tai padaroma labai paprastai, o toks pakeitimas itin supaprastina vartotojo darbą išrenkant norimą elementą.

Taip veikia checkbox nepriskirtas label elementui:

O taip checkbox elementas priskirtas label:

Toks priskyrimas padaromas labai paprastai, tereikia kiekvienam iš šių elementų priskirti po vieną atributą. Input (type=”checkbox”) elementui atributas id=”elmento_id”, o label elementui atributas for=”elemento_id”.