html

Kaip žinia, dirbama prie naujos HTML kalbos specifikacijos. Anksčiau ji buvo vadinta HTML 5, dabar atsisakyta skaičiuko ir liko vien HTML.

Į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ū! :)

Programuojant web HTML šablonus, prieš pradedant dažniausiai tenka atlikti nuobodų ir mechaninį darbą – pasiruošti šablonų išdėstymą,  įtraukti skriptus, sudėlioti “fix’us”, bei daug kitų dalykų, kurie paprastai pasikartoja visuose projektuose. Turbūt nesuklysiu pasakydamas, jog dauguma web programuotojų turi pasiruošę vienokius ar kitokius bazinius šablonus, kuriuos naudoja.

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ą :)

Štai kaip jausmus išreiškia HTML ir CSS specialistai:

Et, kad visi taip sugebėtų :) Gero penktadienio, gero savaitgalio! Iliustracija rasta:

Šaltinis

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:

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:

Daugumą klasikinių interneto svetainių galima išskirti į dvi grupes pagal jų atvaizdavimo principą. Svetainė centruojama naršyklės lange arba ji yra prisiglaudusi prie kairiojo krašto. Žinoma, atsiranda ir kūrybingesnių žmonių sugalvojančių įmantrių atvaizdavimo būdų, bet dažniausiai naudojamas centruoto puslapio variantas.

Nusprendžiau trumpai ir aiškiai aprašyti kaip centruojama svetainė interneto naršyklėje. Viso labo tai kelios CSS kodo eilutės, tačiau net ir tokie dalykai kai kuriems žmonėms praverčia.

Norint svetainę centruoti, turime žinoti jos plotį. Vienintelis dalykas, kurio reikia iš HTML pusės, tai apsirašyti šakninį svetainės elementą, pavadinkime jį pvz.: site. Dabar CSS faile aprašome stilių site ir body žymoms.

Po Rimanto komentaro, išsiaiškinom, kad tai gali būti atlikta su dar mažiau kodo. O tam kad IE6 rodytų teisingai tiesiog turi būti nurodytas DOCTYPE. Nemanau, kad dabar yra svetainių, kuriose jis būtų praleistas. Liko tik dvi eilutės CSS.

Su paaiškinimu:

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

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

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: