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

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

Šaltinis

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

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:

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:

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

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

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.

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: