Įdomi dalis yra HTML formos. Buvau nustebęs kiek specifikacijoje daug visko numatyta, nekantraudamas laukiu, kada bus galima viską drąsiai imti ir naudoti.

Pristatau įdomų įrankį, leidžiantį vizualiai susipažinti su naujųjų HTML formų savybėmis ir esama realizacija naujausiose naršyklių versijose: The Current State of HTML Forms.

Projektuose esu naudojęs El.pašto įvedimo lauką <input type=”email” />, nuorodos įvedimo lauką <input type=”url”> ir paieškos frazės įvedimo lauką <input type=”search” />, bei atributą, skirtą įvedimo lauko prasmės paaiškinimui placeholder. Džiugu, kad šie elementai jau veikia naujausiose Firefox ir Chrome versijose. Senesnėse nemoderniose naršyklėse, naujų žymenų veikimą tenka imituoti, pasinaudojant kitomis priemonėmis: JavaScript, CSS gudrybėmis, dizaino elementais, tačiau, manau, kad verta naudoti kuo daugiau semantiškai prasmingo žymėjimo HTML kode.

Rekomenduoju visiems Web sąsajos kūrėjams susipažinti su standartais ir jų galimybėmis ir, jeigu tik yra sąlygos, imti juos naudoti savo projektuose.

Kokias naujas HTML (“HTML5″) žymas ir atributus naudojate Jūs? Laukiame komentarų, bei balso dešinėje esančioje apklausoje. Ačiū! :)

Nesenai atradau vieną visiems prieinamą šabloną HTML5 BoilerPlate: http://html5boilerplate.com/, kurį čia norėjau pristatyti. Šio šablono esmė, priversti senesnes naršykles palaikyti HTML5 žymas. Nors kol kas tai nėra itin reikalinga funkcija, šiame šablone yra daug įvairių dalykų, dėl kurių jį verta naudoti:

• Iš karto paruošta failų struktūra ir įtraukti reikalingi išoriniai skriptai, su “fallback’ais” į lokalius skriptus. (yra netgi Google Analytics :) )
• Optimizavimas mobiliesiems įrenginiams
• Senesnių naršyklių palaikymas ir visi reikalingi fixai (net IE6)
• .htaccess direktyvos (www peradresavimas, duomenų kompresija)
• Optimizuoti spausdinimo šablonai

Geriausias dalykas yra tai, jog iš šio šablono galima pasiimti tik funkcijas kurių reikia, bei papildyti savo paties naudojamą šabloną :)

Info ir paveikslėlis iš Engadget “Microsoft kicks off effort to rid the world of Internet Explorer 6“

1.  Pagrindinė savybė – wwf dokumento neįmanoma atspausdinti, o taip yra taupomas popierius ir saugomi medžiai.
2. PDF failo piktograma keičiama į žalią WWF medį.
3. Failo pabaigoje automatiškai sugeneruojamas paaiškinimas įvairiomis kalbomis, kas yra WWF (jį galima ir išimti)

Taip pat šio formato kūrėjai platina nemokamą įrankį, kur bet kokį spausdinamą dokumentą galima išsaugoti į WWF.

Taigi, turbūt įdomu, kuo šis formatas susijęs su front-end? Galiu atsakyti: man asmeniškai teko įgyvendinti daug projektų, kur įvairios ataskaitos, sąskaitos ir pan yra generuojamo PDF ar kokiu kitu formatu, kurį žmonės vėliau gali atsispausdinti. Taigi manau būtų puiki idėja suteikti vartotojams galimybę visus šiuos dokumentus generuoti būtent šiuo formatu (Tiesiog  šalia “Save as PDF” būtų ir “Save as WWF”).

Daugiau informacijos rasite čia: http://www.saveaswwf.com/en/what-is-it.html

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

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!

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

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.

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.