Posts Tagged ‘css’

Teksto formatavimas nuolatinis interneto svetainių administatorių galvos skausmas. Nekalbėsiu apie teksto kėlimą iš Word’o, nes šios problemos kultūringo sprendimo nežinau.

Tačiau yra kita dažna problema – programuotojai sukuria puikius svetainės šablonus, tačiau pamiršta aprašyti per turinio valdymo sistemą įvedamo teksto stilius.

To pasekoje kyla tipinės problemos:

• Nėra tarpų tarp paragrafų
• Sąrašuose nesimato punkto ženklų
• Keleto lygių sąrašai neatvaizduojami teisingai
• Negražiai atvaizduojamos antraštės (h1, h2, h3…)
• Negražiai vaizduojamos nuorodos
• Lentelės rėmliai negražūs
• Lentelės yra be antraštės (th arba thead) stilių
• Lentelėje tekstas prilipęs prie celės, tai yra nepakankamos paraštės
• Nesimato viršutinių ir apatinių indeksų (subscript, superscript)
• Negražiai atvaizduojama horizontali linija, nėra tarpų prieš ją ir po jos
• Tekste talpinami paveikslėliai prilimpa prie teksto
• Paveikslėliai su nuorodomis įgyja mėlyną rėmelį

Pavyzdžiui čia turėtų būti sąrašas su apvaliais punkto ženklais, deja jų nėra:

Pakurinėjant vis naują svetainę dažniausiai tikrinimu peržiūrėdamas turinį, tačiau retai kuriame puslapyje yra visi minėti atvejai.

Tuo tikslu pasiruošiau html gabalą, kuriame yra kiekvieno atvejo pavyzdys, šį html galima kelti į TVS ir pažiūrėti kaip atrodo rezultatas. Jį galite atsisiųsti iš čią: html byla su įvairiais teksto formatavimo atvejais.

Gal žinote dar kokių tipinių atvejų, kada svetainėse tekstas įvestas svetainėje atrodo blogai dėl netinkamai aprašytų stilių?

p.s. teksto panašaus į tikrą galima prisigeneruoti čia http://lipsum.com/, tačiau geirausia tikrinti su realiais duomenimis.

Susidūręs su interneto svetainių kūrimu iš užsakovo pusės buvau kiek pasimetęs, nes daugelis dalykų kurie atrodė savaime suprantami jas kuriant, daugumai gamintojų pasirodo visiškai nežinomi.

Ta proga, susidariau nedidelį check-list’ą svarbiausių punktų į kuriuos turėtų atrkeipti dėmesį interneto svetainės užsakovas.

Tiesa daugelis gamintojų pradeda karčiai spjaudytis pateikus tokį sąrašą … :p

Jei turite ką pridėti, maloniai kviečiu pasireikšti komentaruose!

Kai kurie reikalavimai atrodo gan juokingi, tačiau patikėkite, toli gražu ne visiems jų įgyvendinimas atrodo reikalingas…

I togo – Didysis Dariaus reikalavimų interneto svetainei sąrašas:

1. Prisijungdamas prie interneto svetainės turinio valdymo sistemos (toliau TVS) , Administratorius turi būti identifikuojamas vartotojo vardo ir slaptažodžio pagalba.
2. TVS turi sudaryti galimybę redaguoti turinio blokus numatytose interneto svetainės vietose, neatliekant papildomų programavimo darbų.
3. TVS turi būti numatytos vietos, kuriose galima būtų patalpinti reikšminių žodžių sąrašus ( keywords) ir meta aprašymus ( description).
4. TVS pagalba turi būti galimybė administruoti interneto svetainės struktūrą, tai yra, kurti/trinti/pervadinti/redaguoti puslapius iš anksto parengtuose meniu blokuose.
   1. Redaguoti numatytus atributus. Pavyzdžiui straipsniui priskyrus autorių iš autorių bazės, turi būti galima jį pakeisti.
5. TVS turi veikti šiose naršyklėse:
   1. Internet Explorer 7
   2. Firefox 3
6. Interneto svetainės vizualinė dalis turi būti atskirta nuo programinio kodo. Rekomenduojama naudoti šablonų variklį SMARTY (http://www.smarty.net).
7. Interneto svetainės vartotojo sąsajos HTML šablonai privalo atitikti HTML ar xHTML standartą. Šis reikalavimas laikomas išpildytu, jei W3C Markup Validation Service (http://validator.w3.org) neranda klaidų (įspėjimų gali būti). Taip pat paliekamos šios išimtys:
   1. Vykdytojas neatsako už klaidas, kurios yra trečios šalies programinėje įrangoje (HTML redaktorius ir kitos).
   2. Vykdytojas neatsako už klaidas tais atvejais, jei toks HTML kodas vieninteliu atveju garantuoja vienodą vartotojo sąsajos vaizdą skirtingose naršyklėse.
8. Interneto svetainės išdėstymui nenaudoti lentelių (TABLE).
9. Interneto svetainės HTML šablonų kodas turi būti semantinis. Puslapių pavadinimams ir antraštėms rašyti naudojamos H1, H2, H3 ir pan. žymos.
10. Interneto svetainės išvaizdos aprašymui naudoti CSS.
11. Interneto svetainės vartotojo sąsajos stiliaus aprašai (CSS) turi atitikti W3C reikalavimus. Šis reikalavimas laikomas išpildytu, jei Validation Service (http://jigsaw.w3.org/css-validator) neranda klaidų (įspėjimų gali būti). Taip pat paliekamos šios išimtys:
    1. Vykdytojas neatsako už klaidas, kurios yra trečios šalies programinėje įrangoje (HTML redaktorius ir kitos).
    2. Vykdytojas neatsako už klaidas tais atvejais, jei toks CSS kodas vieninteliu atveju garantuoja vienodą vartotojo sąsajos vaizdą skirtingose naršyklėse.
12. CSS turi būti aprašomas atskiroje (-ose) byloje (-ose), o ne HTML kode.
13. Interneto svetainė turi būti vaizduojamas korektiškai šiose naršyklėse:
    1. Opera 9
    2. Mozilla Firefox 3
    3. Internet Explorer 6, 7 ir 8
    4. Safari 3.1.2
    5. Google Chrome
14. JavaScript turi būti naudojamas esant pagrįstam poreikiui. Rekomenduojama naudoti biblioteką jQuery (http://jquery.com).
15. Programinis kodas turi būti suderinamas su PHP5.2.x ar naujesne versija.
16. Duomenų saugojimui turi būti naudojama duomenų bazė MySql 4.1 ar naujesnė versija.
17. Jeigu Vykdytojo naudojama Adobe Flash technologija, turinys turi būti suderinamas su Adobe Flash Player 9 arba 8 versija.
18. Jeigu interneto svetainės vartotojo sąsajoje naudojamos technologijos reikalaujančios įskiepių, pavyzdžiui Adobe Flash ar Java, vartotojo kompiuteryje neesant reikiamo įskiepio turi būti parodomas pranešimas su aiškiais nurodymais, kokiu būdu galima įdiegti reikiamą įskiepį.
19. Navigacijai tinklalapyje ir meniu vaizdavimui naudoti tekstines nuorodas. Nenaudoti paveikslėlių, Adobe Flash ar kitų įskiepių. Apipavidalinimas gali būti vizualus, tačiau pati nuoroda turi būti tekstinė.
20. Paveikslėliams, talpinamiems per TVS, turintiems iš anksto numatytą paskirtį (knygos viršelis, prekės nuotrauka ar pan.), alt atributas turi būti sugeneruojamas automatiškai iš objekto, kuriam paveikslėlis priskiriamas duomenų. Tai yra, įkeliant pagrindinę autoriaus nuotrauką, alt atributas turi būti autoriaus vardas ir pavardė, įkeliant knygos viršelio nuotrauką, alt atributas turi būti knygos pavadinimas ir autorius. Paveikslėliams, kurių paskirtis iš anksto nenustatyta, turi būti galimybė nurodyti alt tekstą. Tai yra, paveikslėliams keliamiems į galeriją ar į wysiwyg redaktorių, alt tekstą gali įvesti administratorius, jis neturi būti generuojamas automatiškai.
21. Interneto svetainės vartotojo sąsajoje (front end) nenaudoti FRAME ir IFRAME technologijų. TVS aplinkoje šios technologijos gali būti naudojamos.
22. Interneto svetainės vartotojo sąsajos (front end), administruojamo teksto išvedimo stiliuose, turi būti numatytas žemiau išvardintų html elementų vaizdavimas:
    1. Antraščių (h1, h2, h3);
    2. Paragrafų (p);
    3. Bent dviejų lygių numeruojamų ir nenumeruojamų sąrašų (ul>li, ul>li>ul>li, ol>li);
    4. Paveikslėlių (img);
    5. Lentelių (table);
    6. Indeksai ir laipsniai (sub, sup);
    7. Nuoroda (a);
    8. Horizontali linija (hr).
23. Nuorodos į interneto svetainės puslapius turi būti prasmingo teksto, pavyzdžiui http://www.tuneliai.lt/apieknyga. Prasmingose nuorodose, gali būti perduodami papildomi GET parametrai, pavyzdžiui: http://gps-shop.lt/gps-navigacija/?lang=2.
24. Meniu valdymo modulis turi turėti galimybę nuorodą paruošti automatiškai.
25. Kiekvienam puslapiui turi būti suteikiamas prasmingas pavadinimas TITLE srityje, kuriame būtų matomas interneto svetainės pavadinimas ir einamojo puslapio pavadinimas. Jeigu tinklalapyje veikia TVS, prasmingas puslapio pavadinimas turi būti generuojamas automatiškai.
26. Turi būti įdiegtas Užsakovo pateiktas Google Analytics statistikos sekimo kodas.
27. Paieškos reikšminių žodžių perdavimas turi būti vykdomas GET metodu ir įdiegtas Google Analytics Search Track užsakovui pateikus visą reikiamą diegimui informaciją.
28. Jeigu į sistemą administratorius ar vartotojai gali įkelti paveikslėlius, įkeltas paveikslėlis turi būti sumažinamas iki reikiamo dydžio išlaikant proporcijas. Paveikslėlių mažinimas turi būti realizuotas pakeičiant fizinį paveikslėlio dydį (resample), o ne nurodant kitą dydį HTML žymoje.
29. Jeigu į tinklalapį įkeltas didelis paveikslėlis ir mažas paveikslėlis, vartotojo sąsajoje (front end), paspaudus ant mažo paveikslėlio, turi būti galimybė jį išdidinti Lytebox ar analogiškame komponente, nenaudojant iššokančių langų (pop-ups).
30. Informacija tinklalapyje turi būti koduojama UTF-8 koduote ir palaikyti įvairių kalbų simbolius. Pavyzdžiui lietuviškas raides bei kirilicą.
31. Jeigu interneto svetainėje yra RSS srautas, metaduomenyse turi būti įkelta Auto Discovery nuoroda RSS srauto prenumeratai.

Ms Word versija.

Noškė prieš 2 savaites paimta iš tele2 salono. Yra 2 metų garantija. Pilna komplektacija. Be defektų. Plėvelė nuo ekrano dar nenuplėštą :) Reiktų primokėti 200 Lt. Reikalavimai w960 – turi būti mažai naudotas arba nenaudotas. Su garantija. Be defektų. Pilna komplektacija.

Jei sudomino – rašykite komentaruose :)

Nusprendžiau susipažinti su Greasemonkey FF įskiepiu. Visai įdomus žaisliukas. Pasipraktikavimui nušvilpiau idėją iš vieno Lietuvos blogerio (nepamenu kurio, atsiprašau), kuris buvo pasidaręs JS bookmarkletą parodantį kiek puslapyje panaudota lentelių.

Ryšium su tuo, kad sergu, galva neveikia ir nieko normalaus dirbti negaliu, pasigaminau nedidelę konsolę, kuri parodo informaciją kiek puslapyje panaudota bilekokių tag’ų. Pavyzdžiui: “Depreciated” (font, table, center ir pan.), “Apreciated” (div, span ir pan.). Iš principo, skriptas lankstus, galima susidėlioti kokius nori tagus kokiomis nori grupėmis :)

O, kad būtų linksmiau, prikabinau w3 validatoriaus servisą parodantį ar puslapis validuojasi ar ne ir suskaičiuojantį paveikslėlius neturinčius alt atributo, arba su tuščiu alt’u.

Žodžiu Greasemonkey naudotojai galite atsisiųsti Puslapio Informacijos Konsolę iš čia.

Įsidiegus puslapių apačioje pamatysite nedidelį stačiakampį mygtuką su užrašu [p.i.c], paspaudus ant jo – atsidarys konsolė.

Žinomi bagai:

• Nežinau kaip izoliuoti konteinerį nuo puslapio CSS, tad kartais konsolė gali atrodyti keistai :)
• GM xmlhttp užklausos funkcija neleidžia callback funkcijai perduoti kintamųjų, todėl nežinau kaip iš jos pasiekti klasės kintamuosius nesikreipiant į klasę vardu…

Manau turėtų praversti, tik atsidarai svetainę ir matai kaip kokybiškai pagamintas frontendas :)

Ryšium su neišpasakytu lojalumu tele2, brangioji įgijo Sony Erricsson z550i. Šį žingsnį laikau neįtikėtina pergale, nes life-long nokia lover buvo perviliota į priešingą stovyklą. O dar didesne pergale laikau frazę, pamaloninusią mano ausis, po dienos pažinties su naujuoju žaislu: “Žinai, visai fainas telefonas” :) Iš tiesų fainas, kažkaip limpa rankos prie jo, patogus meniu, nestabdo, ekranas ryškus.

Ryšium su neišpasakytu lojalumu sau ;) įgijau mps-60 kalašas savąjam Sony Erricsson w800i. Nepaisant degtukų dėžutės dydžio – garsas skamba puikiai.

Žodžiu, nėra ko čia daug tuščiažodžiaut – telefonas su integruotu radijum ir mp3 yra gerai. Neturėti magės ir kalašų mašinoj, bet klausyti muzikos važiuojant yra gerai. O tai, kad dabar galime susirašinėti Gmail be kompiuterio – irgi visai neblogai :)

Beje, akmuo į Nokijos daržą – darbe turime apie 100 mobiliakų, kurių didžioji dalis yra minėtosios firmos produkcija… ir kas iš to, o gi tas, kad retas kuris dar nebuvo servise :[

Čia tas kitas, kurio nepavogė :D

Sony Erricsson w800i. Šiaip nieko aparac, tik niekaip nesuprantu ką galvojo konstruktoriai, kai dėjo 512 mb kortelę į mp3 telefoną kurio komunikavimo su kompiuteriu greitis 300 kbps :D Pažįstu vieną mazochistą, kuris 2 gb kortelę nusipirko…