2009 Liepa

interneto projektų apžvalga, sprendimai, technologijos

Liepa, 2009

Adobe AIR pradžiamokslis

Autorius: Petras 2009 07 30, KetvirtadienisKategorijos: Technologijos, Vartotojo interfeisas

adobe_airŠ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:

mano_playeris

Ką atliekame prieš paleidžiant svetainę?

Autorius: frontend.lt 2009 07 15, TrečiadienisKategorijos: Frontend.lt, Projektų kūrimas

go-sign_1 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?