Andra P žurnāls

Starp citu, W3C jau kādu brīdi piedāvā validēšanas rīku arī priekš HTML 5. Tiesa gan - eksperimentālā statusā. Bet, protams, kā tad savādāk, jo pats HTML 5 standarts arī vēl ir tikai izstrādes procesā.

Starpcitu, iepriekšējā rakstā pieminētajā Scott Klarr blogā ir vēl gūzma ar špikeru (cheat sheats) kompilācijām:

• HTML un XHTML špikeri
• Špikeri par dažādām tēmām
• Javascript/Ajax špikeri
• CSS špikeri

Vēl noderīgāk. :)

Papildinājums: un tur ir vēl!

Nevienam nav noslēpums, ka HTML formās var definēt elementus, kas strādās kā masīvs. Piemēram:

<form method="post" action="">
  <input type="text" name="persons[firstnames][]" value ="Liene" />
  <input type="text" name="persons[lastnames][]" value ="Kārkliņa" />
  <input type="text" name="persons[firstnames][]" value ="Kārlis" />
  <input type="text" name="persons[lastnames][]" value ="Kalniņš" />
  <input type="text" name="persons[firstnames][]" value ="Pēteris" />
  <input type="text" name="persons[lastnames][]" value ="Muciņš" />
  <input type="submit" />
</form>

Šī forma pēc nosūtīšanas tiks pārvērsta šādā masīvā:

Array
(
    [persons] => Array
        (
            [firstnames] => Array
                (
                    [0] => Liene
                    [1] => Kārlis
                    [2] => Pēteris
                )

            [lastnames] => Array
                (
                    [0] => Kārkliņa
                    [1] => Kalniņš
                    [2] => Muciņš
                )

        )

)

Bet vai jūs zinājāt, ka tāpat var padot masīvus iekš URL ? Nu, droši vien, ka zinājāt, jo tas ir diezgan loģiski, bet es kaut kā pats nebiju iedomājies, kas tas arī strādā. :)

http://example.com/index.php?persons[firstnames][]=Liene&persons[lastnames][]=Kārkliņa&persons[firstnames][]=Kārlis&persons[lastnames][]=Kalniņš&persons[firstnames][]=Pēteris&persons[lastnames][]=Muciņš

Vispār jau pamatu pamatos POST’ojot datus, forma tiek serializēta tieši tādā pašā veidā kā nosūtot datus caur URL (GET metode), tā kā tas pats jau vien ir.

Te viens cilvēks izdomājis vienkāršu, bet efektīvu veidu, kā panākt sprite efektu ar bildi, kas iekļauta ar <img> tagu, nevis kā parasti - kā kāda elementa background-image (Google: css sprites). Noteikti ir vērts paskatīties.

Slinkākajiem no jums, iesaitēšu pa taisno example lapu. ;)

Labā ziņa ir tā, ka metode strādā normāli uz visiem populārākajiem pārlūkiem, ieskaitot pat IE5.5.

Ja jau patiešām tiecamies uz vizuālā formatējuma atdalīšanu no dokumenta satura, tad elementu dalīšana block un inline elementos jau fundamentāli ir nepareiza. :) Varbūt teiksiet - tas jau nenosaka elementa vizuālo izskatu, bet gan kā tam uzvesties (mijiedarbība ar pārējiem elementiem). Tiesa, bet tas vai tad arī nekonfliktē ar uzvedības atdalīšanu no dokumenta satura ? :)

Tas tā - muļķīgas pārdomas par muļķīgu tēmu.

Es pilnīgi apkritu, lasot šo humoristisko rakstu (protams, attiecīgai auditorijai), kur pasmej par laiku pirms kādiem pieciem vai vairāk gadiem, kad lapas izkārtojumam izmantoja tabulas, un atstarpes starp elementiem veidoja ar speciālu mazu attēliņu ar nu jau par klasiku kļuvušu nosaukumu spacer.gif.

Ā, un jā - es apkritu, kad izlasīju, ka pat eksistē (eksistēja) tāds elements kā <spacer>. Lai gan W3C lapā neko par to neatradu, tomēr dažās vietās par to informāciju atrast var - piemēram šeit.

Cik labi gan, ka man tas viss ir gājis secen. :)

Diezgan bieži nākas sastapties ar formām, kas automātiski nosūtas, ja tajā tiek veiktas izmaiņas. Tās parasti nav formas tradicionālā izpratnē, bet gan navigācijas elementi, kas izmanto formas elementus, visbiežāk <select> elementu.

Piemēram, gmetrix.lv navigācija:

Ko mēs redzam ? Viss it kā ir kārtībā ? Navigēt varam. Izvēlamies, ko gribam apskatīt un lapa pati aizlec, kur vajag. Šāds navigācijas veids tiek panākts, ņemot talkā Javascript. Pavisam vienkāršs piemērs būtu:

<form id="nav" action="" method="get">
  <select name="page" onchange="document.getElementById('nav').submit();">
    <option value="1">Pirmā lapa</option>
    <option value="2">Otrā lapa</option>
    <option value="3">Trešā lapa</option>
  </select>
</form>

(Vienkāršības labad izmantoju inline notikumu reģistrāciju).

Bet kas notiek, ja atslēdzam JS ? Protams - nekas. Lietotājs paliek ieslēgts pirmajā lapā. Un ļoti daudzas lapas pieļauj šo kļūdu. Tas viss būtu saprotams, ja risinājums šai problēmai būtu sarežģīts un laikietilpīgs, bet tā nav. Risinājums ir pavisam vienkāršs, ņemot talkā <noscript> tagu:

<form id="nav" action="" method="get">
  <select name="page" onchange="document.getElementById('nav').submit();">
    <option value="1">Pirmā lapa</option>
    <option value="2">Otrā lapa</option>
    <option value="3">Trešā lapa</option>
  </select>
  <noscript>
    <input type="submit" />
  </noscript>
</form>

Vienīgais vajadzētu piedomāt pie dizaina - vai tas netiks salauzts, ja blakus navigācijas elementiem parādīsies vēl viens elements.

Peter-Paul Koch savā QuirksMode blogā raksta, ka ir atjauninājis informāciju savā W3C DOM Compatibility Core tabulā. Šobrīd šajā lapā, kurā tiek salīdzinātas pārlūku JS DOM implementācijas, ir ietverti IE5.5-7, Firefox 2, Safari 3 (Win), Opera 9.5b pārlūki, kā arī Linux specifiskais pārlūks Konqueror 3.5.7. Jaunajā versijā vairs neatradīsiet IE5 un IE Mac.

Bez Core tabulas vēl ir pieejama informācija par CSS, HTML, Events un Range DOM funkciju un metožu pieejamību dažādos pārlūkos.

QuirksMode jau izsenis izstrādātājiem ir zināms kā resurs, kur vispirms ir jāvēršas pēc palīdzības, ja saskaramies ar pārlūku nesaderībām Javascript implementācijās.

Visiem ir zināms, kas ir anchor saites un kā tās parasti izmanto. Ja nu tomēr ne, tad anchor (jeb latviski enkurs) ir atzīmēta vieta HTML dokumentā (parasti <a name="nosaukums"></a>), kura kalpo kā grāmatzīme. Tas nozīmē, ka ja mums būs saite ar beigās pieliktu #nosaukums uz šo HTML dokumentu, tad nospiežot uz šīs saites, netikai tiks atvērta pati lapa, bet dokuments tiks paskrūlēts līdz noteiktajai vietai, kur atrodas anchor <a name="nosaukums"></a> elements.

Ok, tajā visā nav nekā īpaši interesanta un tas viss ir zināms. Bet domāju, daudzi nezin, ka ir iespējams anchor saitēs neizmantot ierasto <a name="nosaukums"></a>. Lūk, izgriezums no W3C HTML specifikācijas:

Destination anchors in HTML documents may be specified either by the A element (naming it with the name attribute), or by any other element (naming with the id attribute).

Tas nozīmē, ka nav viscaur dokumentā jādefinē tukši <a> elementi ar name atribūtiem. Pietiks tikai saitēs norādīt uz eksistējošu elementa ID un pārlūks zinās, ko darīt. Un strādās tas uz visiem modernajiem un netik modernajiem pārlūkiem.

Ne ne - es neatbalstu dažādu lapu versiju servēšanu dažādiem pārlūkiem, tikai tāpēc, ka griezējam ir rokas par īsu, lai izveidotu HTML/CSS dizainu, kas daudz maz normāli strādātu uz visiem modernajiem pārlūkiem. Bet šī pieeja, ko uzgāju Digg.com, ir interesanta. Tā nav precīza un izmantot to praksē arī būtu problemātiski, bet demonstrācija ir interesanta: tiek izmantots tikai viens <img> tags ar vairākiem src atribūtiem. Uzreiz jau skaidrs, ka atkal tiek izmantotas pārlūku pārsēšanas/renderēšanas kļūdas, lai panāktu šo.

Koda skrīnšots no autora lapas (nejautājiet kāpēc Perl):

Man nostrādāja pareizi gan uz FF2, gan IE6, gan Operas 9. Izmēģiniet paši!