Jump to content

Mana pirmā no-nulles-sāktā bloga tapšanas process


Artanis
 Share

Recommended Posts

Labsrīts visiem forumiešiem!

 

Tā nu laikam ir pienācis laiks, kad esmu sasparojies kautko lietderīgu pasākt pašizpausmē Web-dizaina ziņā, un par manu pirmo mocību objektu kļūs mana personīgā bloga projekts.

 

Protams, kā jau visas mākslinieciskās dvēseles, arī es visu sāku absolūti čerez žopu - t.i. - no sākuma domāju par vizuālo, un tikai pēc tam kad tas dabūts uz kājām, sāku lauzīt galvu par tehnisko pusi. Rezultāts, protams, attiecīgs - lapas pirmais makets ir smuks, bet sver tonnu, un kods ir zem katras kritikas.. :D

 

Tad nu ar dizaina lielajiem vilcieniem es apmēram galā tiku - sava ideja par dizainu (kas daļēji iegūta pateicoties Nettwerk'a skicei - paldies viņam ;)) apmēram tika izsapņota un uz ātru roku uzskicēta iekš Coreļ'a:

 

blog-coreli.jpg

 

Un tad arī milzu tempā (pa pusstundu or so) tika uzrasēts lapas karkass (DW + Notepad). Un te nu sākās baigā šmuce - lai panāktu visu to, ko biju iecerējis maketā, nācās visu lapu balstīt pilnībā uz *.png, kas uzreiz nāk komplektā ar divām milzu problēmām - izmēru (kas, protams, ir labojaams) un NESAVIETOJAMĪBU ar IE6 (Kas ir traģiski, lai neteiktu vairāk). Attiecīgi rezultāts iekš IE6 un FF redzams zemāk:

 

blogs-brovseros.jpg

 

 

Pirmais jaunuzceptais rezultāts - šeku'. (lūdzu jau laikus nešausmināties par nežēlīgo lapas elementu izmēru un to, ka fons nav gatavs Tile'oties - tādas tehniskās problēmas tiks risinātas pēcāk - tagad pats galvenais ir lai kodēšanā spēcīgie forumieši man iebaksta purniņā visas pieļautās kļūdas, līko kodu, etc.)

 

Tad nu sāksim ar to, ka labprāt uzklausīšu visu pamatoto kritiku par līko kodu, nepareizo pieeju, utml. Pēcāk jau sākšu uzdot papildus interesējošos jautājumus, un ceru ka būsiet tik iecietīgi, lai uz tiem visiem atbildētu.

 

Jau iepriekš liels paldies visiem, kas parakstīsies man palīdzēt šajā krustagājienā. :)

Link to comment
Share on other sites

Guest /Ivars/

Corel`ī uzceptais dizains man tīri smuki patīk. Un tā Mac bildīte fonā arī tīri smuki izskatās uz melnajiem logiem...

Labots - /Ivars/
Link to comment
Share on other sites

Guest painkiller

Ar Operu viss izskatās ļoti glīši, man patīk. Dizains labs, bet ļoti redzama līnija, kurā beidzas fona attēls un sākas no jauna (ja parullē uz leju).

Gaidām, kas tālāk. Es parakstos krusta gājienam.

Link to comment
Share on other sites

Paldies par atzinību sakarā ar dizainu - man pašam arī patīk. :smile2: Protams, kā jau minēju pirmajā rakstā, vēl joprojām nav nekas darīts sakarā ar Tile'oto fona attēlu - tas tiks labots.

 

Bet nu šobrīd es būtu nedaudz priecīgāks uzklausīt pamatotu kritiku par manis izvēlēto tabulu modelēšanas risinājumu. Lai uzskatāmāk ieskicētu header'a tapšanu, iemetu attēlu no iekš DW:

 

blogs-headeris.jpg

 

Jautājums - vai fiksēta platuma tabulas ar relatīvu novietojumu lapā ir labais sitls? :roll:

Link to comment
Share on other sites

Tabulas dizainā liecina parasti par totālu un pilnīgu labā stila neizpratni .. te pat runa vairs nav par trūkumu vai netrūkumu.

Link to comment
Share on other sites

Tātad ieteikumi, ko konstruktīvi mainīt saknē?

Link to comment
Share on other sites

He, skatos, ka top gaumīgs blogs. Ar IE7 viss izskatās korekti, tāpat kā uz FF.

 

Pats es ar lapām esmu minimāli ķiverējies, bet nu tagad es lasu viena dizainera grāmatu par CSS. Un nu padalīšos ar iegūtajām zināšanām:

 

Obligāti jādeklarē DOCTYPE. Sāc html ar šādu rindiņu:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
[url="http://www.w3.org/TR/html4/loose.dtd"]http://www.w3.org/TR/html4/loose.dtd[/url]>

 

Ja pārlūks neredz doctype, tas pieņem, ka lapa ir kodēta ļoti ilgi pirms web standarti tika ieviesti. Bez doctype daudzi pārlūki ieiet backward-compatibility režimā (ieskaitot IE6) un izturās tā, kā nekad nebūtu dzirdējuši par web standartiem vai DOM (Document object model).

 

Ak jā, un šajā dizainera rokasgrāmatā nekur neparādās tabulas. Viss tiek veidots ar div elementiem. <div> principā sadala lapu blokos, kurā pēctam var sviest visādu informāciju iekšā. Kādēļ viņš neizmanto tabulas, to gan nav rakstījis.

 

Edit: Pielaboju doctype kodu.

Link to comment
Share on other sites

Guest painkiller

Nepiekrītu kritikai par tabulām. Speciālistam tas var šķist prestiži vai neprestiži un gudri runāt var, bet lapas apmeklētājam ir viena alga, ar kādiem līdzekļiem viss panākts, jo šams nekad ir dzirdējis par CSS Layoutiem un sazin ko vēl. Turklāt (nav veikta tāda statistika) pieļauju, ka krietni vairāk kā puse visu tīkla web lapu darbojas tieši ar tabulu principu. Cita runa, vai tad lapa normāli attēlojas visos pārlūkos.

Link to comment
Share on other sites

Nepiekrītu kritikai par tabulām. Speciālistam tas var šķist prestiži vai neprestiži un gudri runāt var, bet lapas apmeklētājam ir viena alga, ar kādiem līdzekļiem viss panākts, jo šams nekad ir dzirdējis par CSS Layoutiem un sazin ko vēl. Turklāt (nav veikta tāda statistika) pieļauju, ka krietni vairāk kā puse visu tīkla web lapu darbojas tieši ar tabulu principu. Cita runa, vai tad lapa normāli attēlojas visos pārlūkos.

Var redzet ka cilvēkam SEO ir svešs termins.

 

 

 

Mainīt saknē .. emm .. XHTML 1.0 un div-layout. Cik tā bilde tev liela ? Vai lpa izskatīsies arī normāli uz 1900x1200 ? Varbūt labak atsakies no liela attēla fonā, jo tas ir diezgan smags pasākums.

Link to comment
Share on other sites

lapas apmeklētājam ir viena alga, ar kādiem līdzekļiem viss panākts

Nav gan. Viena lieta - koda apjoms, kas xhtml variantā būs daudzas reizes mazāks, rezultātā - lapa būs ātrdarbīgāka. Otra lieta - korekts xhtml attēlosies vienlīdz pareizi visos interneta pārlūkos.

 

pieļauju, ka krietni vairāk kā puse visu tīkla web lapu darbojas tieši ar tabulu principu.

Šis nav arguments.

 

Ko mainīt?

Pēc manām domām, jāmaina ir tikai divas lietas - dizains un kods...

 

Te var mēģināt atrast ko iedvesmojošu dizainam...

http://www.styleboost.com

 

Te kodam...

http://www.w3schools.com

Link to comment
Share on other sites

Nesagraujiet jel viņa sapni :D Fonu var noņemt arī tad, kad lapele gatava un kad cilvēki sūdzas, ka pa lēnu verās vaļā :D

 

 

 

Lai nu kā, grāmatā tomēr atradu šādas tādas 10 gadu pieredzējuša dizainera domas par teibliem.

 

 

Tables were also used in creative ways. Tables are an HTML element designed for laying out grids of data (like an Excel spreadsheet), but if you need to divide a page into say, a header, navigation, and content areas, then you might use a table to divide up the page[..]. Basicaally, it got to the point where table-based design was almost a standart in itself and was taught as good practice in untold numbers of Web books.

 

When it comes to (ab)using HTML, I know of what I speak; I did these things for years myself, along with the rest of the world's Web devlopers-there was no other way.

 

the content of the world's Web pages is crammed with markup that is only there to achieve the desired presentation on a small group of soon-to-be obsolete Web browsers; it provides no actual information at all. It's safe to say that most Web pages are over 60% presentational marku, and the result is that the actual content is almost impossible to extract for other uses.

 

[..]Today, with browsers and many other devices standardizing around XHTML and CSS, non-compliant Web sites are finding that it is difficult to deliver their existing content on these newer devices and browsers. Have you seen your home page on a handheld coputer lately?

 

 

 

 

Lai nu kā, atceramies, ka microsoft.com vēl pirms nedēļas bija vecā, visiem pierastā lapele. Viņš grāmatā parādīja kodu, kur 3 pogas ieliktas tabulās. Tas kods aizņem gandrīz visu grāmatas lapaspusi :D

 

Bet nu tagad es apskatījos jauno MS lapu. Es atradu tikai vienu table tagu :)

Labots - Jencha
Link to comment
Share on other sites

Taatad taa kaa virspuseejaa kaarta ir caurspiidiiga tad background var mainiit kaa veelas...

Jo caurspiidiigums buus neatkariigi no fona...

P.S. Man lapa aatri ielaadeejas nezinu, kaa jums.Un uz safari viss ir ok.

Labots - Nettwerk
Link to comment
Share on other sites

Tabulam nav ne vainas. Labak ir 5min izkartojumu ar tabulam izveidot, neka bakstities visu dienu pozicionejot DIVus un meklejot hackus prieks dazadajiem parlukiem. Ar tabulam ir grutak kaut ko saiaist deli.

Nu, OK, skatoties, kas par lapu, piemeram, blogu drosi vien ir pat labak ar diviem veidot, jo struktura ir primitiva. Bet, tiklidz sakas daudzas jo daudzas kolonnas utt, tad gan es dodu prieksroku tabulam.

Un tie, kas grib strideties, ka tabulas lenak ladejas, neka DIVi - gribu oponet, jo 100tiem rindu CSS fails, kas apraksta DIVus, ari tacu ir japarse. Ta ka tas pats vien ir. To it seviski var noverot uz FF un Operas ari laikam - sakuma izveido elementus, tad tos pozicione, sakarto utt. Vizuali varbut izskatas atrak, tas ari viss.

Link to comment
Share on other sites

Pirmkārt jau liels paldies visiem, kas līdz šim iesaistījušies (un vēl iesaistīsies) diskusijā.

 

Tātad uz doto momentu te ir panesusies mūžīgā dilemma - tabulas vai DIV'i. Es pamatā nesaprotu, kāda ir lielākā vaina tabulām? :roll: Kā redzat tās lapeles sourc'ē, tabulas aizņem daudz mazāk kā CSS'i, turklāt ja tām ir fiksēti izmēri, tad tās +/- korekti attēlosies vislielākajā vairumā brovseru.

 

Tiem, kas ieteica pilnībā izmainīt stilu un konceptu - laikam tomēr nē, jo pašreizējais variants mani vairāk kā apmierina - tad jau labāk meklēšu varaintus, kā pašreizējo dizainu pārnest uz DIV'iem, nekā attiekšos no koncepcijas.

 

Par fona attēlu - tikko atradu CSS skripta atribūtu, kas ļauj fonu strečot priekš brovsera loga - ideāli - par ar Tile nebūs jāķēpājas. :) Kamēr mēģinu šito iebakstīt, varbūt drīkst palūgt vēl kādu kritiku no jūsu puses?

Link to comment
Share on other sites

Joyride, css failu piestaista tikai vienreiz. Neatkarīgi vai tavam webam ir 1 lapele vai 100 lapeles.

 

Netiecies pēc tā, kas ir vieglāk, bet pēc tā, kas ir labāk. Redzi, uz IE6 kaučkas ar teibliem nav. Ir vērts pamēģināt divus.

Link to comment
Share on other sites

Val - tu tak esi zelts! Tagad gandŗīz viss bumbās - headeris nu ir ok, vienīgi bišku vēl jāpalūr, kas ar fonu darās. Bet nu vismaz iet uz labo pusi! :happy: Milzu paldies!

 

blogs-uz-ie.jpg

Link to comment
Share on other sites

Tiko apskatījos pašu blogu (pirms tam zīdu no pirksta a.k.a. bildēm)

Background vajag mainīt. Uz lielajām izšķirtspējām izskatās pēc katastrofas.

Varbūt vari pielabot tā, lai nevar pamanīt atkārtojuma vietas.

 

http://www.satzansatz.de/cssd/tmp/alphatransparency.html

 

 

Un , ja nekā savādāk nevar,

tad : » * html body {display: none;} ... I haven't figured out why some think this hack is discriminating
Labots - mefisto
Link to comment
Share on other sites

:)

Par fona attēlu - tikko atradu CSS skripta atribūtu, kas ļauj fonu strečot priekš brovsera loga - ideāli - par ar Tile nebūs jāķēpājas. :)
Tūlīt šito iebakstīšu un būs jānočeko.

 

EDIT: liels paldies par saiti - pašlaik lasos.

 

P.S. liels paldies visiem, kas palīdz ar izziņas materiālu - tieši tapēc boot's is the best.

Link to comment
Share on other sites

Joyride, css failu piestaista tikai vienreiz. Neatkarīgi vai tavam webam ir 1 lapele vai 100 lapeles.

 

Netiecies pēc tā, kas ir vieglāk, bet pēc tā, kas ir labāk. Redzi, uz IE6 kaučkas ar teibliem nav. Ir vērts pamēģināt divus.

 

Tu nesaprati. Es runaju par tabulu sazimesanas atrumu vs DIVu pozicionesanas atrumu.

 

Tabulam nav nekadas vainas, struktura ir vienakarsa saprotama: tabula->rinda->suna(s). Ar DIViem ir ta, ka tiem stilus pieskir ar class vai id atributiem. Un tad ir jaskatas aprakstosaja CSS faila, ko nu konkretais .productImg stils dara.

Un kamer nebus iznakusi CSS 3,4,5,6,7,8,9 vai hvz kada plasi atbalstita versija, kura satures sevi iespejas aprakstit kolonnalus (columnar) izkartojumus, tikmer es busu parliecinats tabulu lietotajs.

Es saubos, vai tu vispar vari ar DIViem salikt, teiksim, 4 kolonu izkartojumu, nemeklejot Google palidzibu. Vai man nav taisniba?

Ar tabulam tas ir iizii.

Nemaz negribas pieminet to DIV butibu, ka vini, lapai (precizak - parlukam) mainot izmerus, medz pariet nakosaja rinda, ja atrodas blakus. Tad atkal vajag kada cita DIV konteineri vinus likt un beigu beigas sanak tads iegultu DIVu biezoknis, ka tik turies.

Un uz IE6 viss ir bumbas ar teibliem, tur pie vainas ir fona bilde.

Es jau nesaku, ka DIVi nevar kalpot ka alternativa, ja cilveks mak izveidot jebkadas stukturas lapu ar DIViem, tad lai ta dara. Bet ne es, ne tu ta nemakam...

Link to comment
Share on other sites

Tas ka cilvēks neprot css/xhtml nav attasnojums lai lietotu tabulas.

 

Tabulās : kods izskatās drausmīgs un nav lasāms, mekētāji nespēj normāli indeksēt lapu, mobīlie nespēj atvērt lapu, lapas izmērs ir daaaudz lielāks, diezains ir ieaudzis layoutā, js/dom/ajax fīču pievienpšana ir mazihisma diskrētā forma.

 

Un jā .. es varu izveidot 4 kolonu layout ar DIV bez gūgle una ar jebkuru dinamisku, statisku kollonu kombināciju.

Labots - mefisto
Link to comment
Share on other sites

Artanis ceru ka nenjem ljaunaa ka es te sho to pamainu dizainā...Kraasa ir ielikta taada kas gadiijaas...Tur peleekaa vietaa vari likt kaut melnu...

Labots - Nettwerk
Link to comment
Share on other sites

q64silver: ko tu vari piesieties? Kaitina šādi piesienas visur ne pa tēmu. Tēma ir pavisam cita ja nepamanīji. Un ja ar nav licenzēts, kārsies? Ja ir?Izteiksi publisku atzinību? Varbūt kādu rakstiņu uzrakstīsi(publisku atzinību)?

Link to comment
Share on other sites

Nettwerk - man kautkā vairāk piedūra ideja par to iedziļināto malu augšējā bannerī, kurā izvietot saites. Bet tava ideja arī nav peļama. :)

 

Q64 - Corelim izmantoju korporatīvo darba licenci. Un, jā, man pašlaik plauktā stāv arī kvīts par 1277Ls šim produktam. Vai tas tev kautkā liek justies labāk un aktīvāk iesaistīties tēmas apspriešanā?..

 

Hmm - laikam jau sanāk, ka būs jāmēģina pārdzīt lapa uz DIV'iem. Ā, btw, ko tauta saka par Layer'iem (advantages/disadvantages)?.. :roll:

Link to comment
Share on other sites

Krutaaa man jau ļoti patiik .

Link to comment
Share on other sites

Guest BenZ

nu te lieta taada ka ie6 neatbalsta caurspiidiigu png. naaksies uztaisiit checku vai browseris nav IE tad ja ir lieto css (ar to ar var padariit caurspiidiigu bet to atkal firefox neatbalsta)

Link to comment
Share on other sites

nu te lieta taada ka ie6 neatbalsta caurspiidiigu png. naaksies uztaisiit checku vai browseris nav IE tad ja ir lieto css (ar to ar var padariit caurspiidiigu bet to atkal firefox neatbalsta)

Muļķības. Labots - mefisto
Link to comment
Share on other sites

Tas ka cilvēks neprot css/xhtml nav attasnojums lai lietotu tabulas.

 

Tabulās : kods izskatās drausmīgs un nav lasāms, mekētāji nespēj normāli indeksēt lapu, mobīlie nespēj atvērt lapu, lapas izmērs ir daaaudz lielāks, diezains ir ieaudzis layoutā, js/dom/ajax fīču pievienpšana ir mazihisma diskrētā forma.

 

Un jā .. es varu izveidot 4 kolonu layout ar DIV bez gūgle una ar jebkuru dinamisku, statisku kollonu kombināciju.

 

Es protu CSS un XHTML (vai, lepni jau skan), bet tapat lietoju tabulas. Sis piemers man aiznema minutes divas/tris uzrakstot ConTEXTaa un izlaizot caur Tidy. Uztaisi to ar DIViem, gribu redzet, cik atri tev tas izdosies.

Un kur tu redzi kaut ko nelasamu? Kas par mulkibam par indeksesanu? Mobilie visi tapat nespej korekti attelot XHTML sa vai ta.

P.S. malas ir 200px fikseta platuma, vidus ir staipigs.

Link to comment
Share on other sites

:-D

 

Par daudz mes pieversam uzmanibu tadiem niekiem. Galvenais, lai lapa izskatas korekti tajas parlukprogrammas, kuras lieto klienti.

Galvenais ir dizains, saturs un funkcionalitate.

Ari slavenais Lebedeva dizaina kantoris lieto izkartojumam tabulas, vai tapec vini klust nepopularaki?

 

P.S. Arča, tava lapa (parakstaa) diez ko labi neizskatas mana IE6...

post-66682-1176377536_thumb.jpg

Labots - Joyride
Link to comment
Share on other sites

Es protu CSS un XHTML (vai, lepni jau skan), bet tapat lietoju tabulas. Sis piemers man aiznema minutes divas/tris uzrakstot ConTEXTaa un izlaizot caur Tidy. Uztaisi to ar DIViem, gribu redzet, cik atri tev tas izdosies.

Un kur tu redzi kaut ko nelasamu? Kas par mulkibam par indeksesanu? Mobilie visi tapat nespej korekti attelot XHTML sa vai ta.

P.S. malas ir 200px fikseta platuma, vidus ir staipigs.

 

 

Sorry .. biju pusdienās: http://paste.php.lv/5444

Labots - mefisto
Link to comment
Share on other sites

Guest /Ivars/

Nezinu kapēc jūs te visi mainat to dizaina daļu, tās jaunās dizaina sadaļas man kaut kā vairāk nepatīk. Labāk atstāt tā orģinālu, bet koriģēt tehnisko bāzi.... tas tā mans subjektīvis viedoklis, bet nu gaumes vienmēr un visur atšķirsies, tāpēc teikšu tā, par gaumi nestrīdās...

Link to comment
Share on other sites

Galvenais, ka mefisto css daļa attiecās uz visām lapām, kuras ietver sevī ārēju css failu. Vienreiz uzraksti un vairāk nav ko rakstīt.

 

 

 

Problēma ir tā, ka html bij domāts, lai attēlotu kaut kādu informāciju lapā. Ienāca modē dizains, t.i kā saturu izmētāt pa lapu - risinājuma tam nebija un saturs tika sapārots ar layoutu. Tas ir nepārskatāms kods, kā arī ārkārtīgi grūti modificējams kods. (Iedomāsimies tagad katrai lapai pamainīt navigācijas(tabulas kolonnas) platumu :? )

 

 

 

Tādēļ arī ieviesa striktus standartus. Un striktus noteikumus. Atdalīt saturu no layouta. Proti, ar CSS veido layout, a HTMLā ietver tikai un vienīgi saturu. Es pats neesmu lapu taisītājs, taču es mācos un, proti, šādi argumenti man ir pietiekami, lai neķēpātos ar tabulām. Protams, pieradumam liels spēks, un nelieku es jau nevienam mainīt ierasto stilu (lai gan vajadzētu standartu vārdā :) ). Bet nu tā kā Artanis šīm lietām ķerās pirmo reizi klāt, tad būtu labāk mācīties strādāt uzreiz korekti. Redzi, validators nevalidē tavu lapu, jo viņam nepatīk tas, ka lapa tiek formatēta pie markup koda.

Link to comment
Share on other sites

Un luk DIVi smagi iesukaa. Psst... min-width

Ilgi pētīju, bet nekur tavā html kodā neredzēju, ka tu būtu norādījis min-width. Tātad tabula nedara to ko vajag.
Link to comment
Share on other sites

Izveido kontu, vai pieraksties esošajā, lai komentētu

Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas

Izveidot jaunu kontu

Piereģistrējies un izveido jaunu kontu, tas būs viegli!

Reģistrēt jaunu kontu

Pierakstīties

Jums jau ir konts? Pierakstieties tajā šeit!

Pierakstīties tagad!
 Share

×
×
  • Izveidot jaunu...