iWebillä tehtyjä webbisivuja

[Jamac]

Täytyy vielä hehkuttaa katsokaas näitä "kahta" sivua (linkit alla), ne on todellakin sama xhtml sivu!!! Kertakaikkinen esimerkki siitä miten "nettisivu (html-koodi) ja ulkoasu voidaan erottaa toisistaan.

Perusideahan on se, että kaikki asia sivulla merkataan sivulla omaksi lohkoksi, laatikoksi, eli box: box-model:n mukaan. Sitten CSS-tyylien kanssa annetaan noille lohkoille visuaalinen muoto, järjestetään lohkot selaimen ikkunaan haluttuun järjestykseen ja asemaan. Kiinteäksi tai liikkuvaksi, läpinkyväksi tai transparentiksi. Asia numero kaksi on se, että tällöin kun sisältö on ulkoasusta vapaa, niin itse sisältö eli sivun esittämä asia voidaan järjestää html-koodiin niin sanotusti tärkeysjärjestyksessä. Vaikka linkit ensimmäiseksi (ulkoasussa ne voi olla missä vain ruudulla), sitten pääasia (hakukoneet tykkää kun asiat on mahdollisimman alussa koodia), sitten krääsä mainokset ja muut vitsit ja tärpit koodin loppuun.

Esimerkki 1 ja SAMASTA sivusta Esimerkki 2

Aika hienoa vai mitä!

[Shark]

Nohnii. Ja takaisin asiaan...

Eli oma iWeb-tekeleeni.
www.kolumbus.fi/william.shark/

Täytyy kyllä sanoa, että hieman pitäisi saada lisää muokattavuutta noihin templaatteihin tai yleensä ominaisuuksiin.

[kallekilponen]

Kysymys Kallelle,

miten teit tuon sivujesi kielivalinnan? Siis teitkö sen "helposti" iWorkissä, vai jossain toisessa editorissa kuten esim dreamweaverissä?

Terv. Ramses

Helposti ja helposti...[:^)]...mutta iWebillä kumminkin.

[Ossi]

Saako tuota kummallista valokuvien heijastusefektiä pois?

[AppleFarmer]

Ottaa silmät käteen hän.

Tuolla aikaisemmin jo vastasin toiselle kysyjälle, että kyllä saa.

[JuhaM]

Mites nää kaikki yyber mäkki sivut aukee mielettömän hitaasti, ei kovin vakuuttavaa. Ainakin tällä puuceella, macilla en ole kokeillut.

[nasu]

iWebin tarpeellisuuteen en ota kantaa, mutta kuten tämän lukeneena http://whatdoiknow.org/archives/002582.shtml voi todeta, että se on ihan se ja sama onko se koodi validia vai ei, jos se on semanttisesti ja struktuaalisesti merkitty aivan päin mäntyä. Validi koodi ei ole yhtä kuin hyvä ja toimiva sivusto. Ylempänä linkattu CSS Zen Garden on tosiaan hyvä esimerkki oikeasti viisaasta koodista, ja nätistä ulkoasusta.

Ja mitä sivujen latausaikoihin tulee, niin ei yhtään ihme jos kestää kun png vie 200-500 k, kun sama kuva jpgnä veisi murto osan.

[Ossi]

Ottaa silmät käteen hän.

Tuolla aikaisemmin jo vastasin toiselle kysyjälle, että kyllä saa.

Siellä puhutaan varjostusefektistä (mikä se on?) Minä kysyin heijastusefektistä.

[kallekilponen]

Ottaa silmät käteen hän.

Tuolla aikaisemmin jo vastasin toiselle kysyjälle, että kyllä saa.

Siellä puhutaan varjostusefektistä (mikä se on?) Minä kysyin heijastusefektistä.

No sanotaan nyt niin että kaikki ymmärtävät. Kaikkia efektejä voi halutessaan säädellä ja kytkeä päälle/pois.

[Josku]

Validi koodi ei ole yhtä kuin hyvä ja toimiva sivusto. Ylempänä linkattu CSS Zen Garden on tosiaan hyvä esimerkki oikeasti viisaasta koodista, ja nätistä ulkoasusta.

CSS Zen Gardenin koodia ei voi sanoa hyvällä tahdollakaan viisaaksi. Koska kyseessä on "showcase", niin suunnittelijoille on annettu luokkien ja tunnisteselektorien avulla mahdollisimman suuri valinnanvapaus. Yksikään leiska ei taida käyttää kaikkea merkkausta hyväkseen.

[Matti]

Ottaa silmät käteen hän.

Tuolla aikaisemmin jo vastasin toiselle kysyjälle, että kyllä saa.

Siellä puhutaan varjostusefektistä (mikä se on?) Minä kysyin heijastusefektistä.

No sanotaan nyt niin että kaikki ymmärtävät. Kaikkia efektejä voi halutessaan säädellä ja kytkeä päälle/pois.

Mutta saako .Mac sivuilla julkastuilta kuvaesityksiltä ne heijastukset pois? Ja jos, niin saisko tänne kuvauksen.

[freemem]

Mites nää kaikki yyber mäkki sivut aukee mielettömän hitaasti, ei kovin vakuuttavaa. Ainakin tällä puuceella, macilla en ole kokeillut.

Johtuu 4 asiasta

- Palvelimen nopeus/hitaus
- Palvelimen yhteyden nopeus/hitaus
- Lukijan yhteyden nopeus/hitaus
- Sivuille liitettyjen kuvien koko, kuvat ovat oletuksena png formaatissa, erittäin hyvälaatuista vähän pakattua tavaraa

Pienentämällä kuvia, huonontamalla kuvanlaatua tai käyttämällä pakkausta (huonontaa kuvaa ja pienentää kuvien kokoa) saadaan nopeampia sivuja, ainahan se on kompromissi kuinka hyvää ja isoa kuvaa laitetaan sivuille. yyber mäkki sivut eivät käytä mitään ihme siirtotekniikkaa eli sama se millä ne sivut teet jos ne kuvat on isoja ne on hitaampia kuin pienet kuvat.

[nasu]

CSS Zen Gardenin koodia ei voi sanoa hyvällä tahdollakaan viisaaksi. Koska kyseessä on "showcase", niin suunnittelijoille on annettu luokkien ja tunnisteselektorien avulla mahdollisimman suuri valinnanvapaus. Yksikään leiska ei taida käyttää kaikkea merkkausta hyväkseen.

Joo, tuo on kyllä täysin totta. Löytäähän sieltä koodista disclaimeri, joka toetaa kuten sinä että koodi olisi siistimpää jos valinnanvapaus ei olisi niin suurta. Olisi varmaan pitänyt pastea joku tuoreempi hässäkkä, kuten esimerkiksi http://alistapart.com/

[JuhaM]

Johtuu 4 asiasta

- Palvelimen nopeus/hitaus
- Palvelimen yhteyden nopeus/hitaus
- Lukijan yhteyden nopeus/hitaus
- Sivuille liitettyjen kuvien koko, kuvat ovat oletuksena png formaatissa, erittäin hyvälaatuista vähän pakattua tavaraa

Pienentämällä kuvia, huonontamalla kuvanlaatua tai käyttämällä pakkausta (huonontaa kuvaa ja pienentää kuvien kokoa) saadaan nopeampia sivuja, ainahan se on kompromissi kuinka hyvää ja isoa kuvaa laitetaan sivuille. yyber mäkki sivut eivät käytä mitään ihme siirtotekniikkaa eli sama se millä ne sivut teet jos ne kuvat on isoja ne on hitaampia kuin pienet kuvat.

Kaikki muut sivut aukeavat nopeasti
Tekeekö se siis ihan kaikki kuvat oletuksena png:ksi?

[MacAntti]

Toi png-ratkaisu on vähän kummallinen, vaikka formaatin edut ovatkin melkoiset jpg:hen nähden. Olisi hyvä, jos tallennusmuodon voisi valita.

Mikä ihmeen yyber-mac? Viittaako se maccien ylivoimaisuuteen...

[JuhaM]

Toi png-ratkaisu on vähän kummallinen, vaikka formaatin edut ovatkin melkoiset jpg:hen nähden. Olisi hyvä, jos tallennusmuodon voisi valita.

Mikä ihmeen yyber-mac? Viittaako se maccien ylivoimaisuuteen...

Se viittaa siihen että kun kehutaan että mäkit on niin ylivoimaisia kaikessa ja kaikki sen ohjelmistot kuten iweb Ei minulla kuitenkaan ole mitään mäkkejä vastaan juuri ostin itsekin sellaisen ja aion ostaa toisenkin

Mitkähän mahtavat olla ne png:n melkoiset edut jpg:hen nähden? Png on gif:n kilpailija eikä pärjää jpg:lle mitenkään, nehän ovat ihan eri käyttötarkoituksiin.

[MacAntti]

Se viittaa siihen että kun kehutaan että mäkit on niin ylivoimaisia kaikessa ja kaikki sen ohjelmistot kuten iweb Ei minulla kuitenkaan ole mitään mäkkejä vastaan juuri ostin itsekin sellaisen ja aion ostaa toisenkin

Mitkähän mahtavat olla ne png:n melkoiset edut jpg:hen nähden? Png on gif:n kilpailija eikä pärjää jpg:lle mitenkään, nehän ovat ihan eri käyttötarkoituksiin.

No joo, mutta hintaansa nähden (teoriassa ilmainen) ihan mukava pikku-työkalu lyhytikäisten webbi-sivujen tekemiseen. Eipä sillä mitään laajoja kokonaisuuksia tehdä, mutta tuollaiseen "kuvat nettiin ja sassiin" -hommaan se on erinomainen (kunhan sitä kuvamuotoa pystyisi vaihtamaan..., mutta täähän on vasta eka versio).

Alfa-kanavan tuki ja häviötön pakkaus ovat ainakin mun mielestä hienoja juttuja png:ssä.

[Jamac]

Png on gif:n kilpailija

Voisi sanoa että sohvaperuna kilpailee 800 metrin maailmanmestarijuoksijaa vastaan.. Eli ei kilpaile, vaikka käyttöalue on kyllä abaut sama. png vaan hakkaa gif:n vasemmanjalan pikkuvarpaalla. Ainut syy miksi gif on vielä markkinoilla on se, että Internet Explorerin nykyiset versiot ei käytännössä tue png-kuvaa, tai oikeastaan sen ehdotonta etua, eli kunnollista läpinäkyvyyttä. Kyllä olisi www-sivuja helppo ja hieno tehdä jos kunnollinen läpinäkyvyys toimisi (eli ei gif:n tyyliin rotansyömiä "syväysreunoja").

[masa]

Nyt kun olette jo saaneet aikaiseksi sivuja niin voisitteko tietäväiset julkituoda omia ehdotuksia- kommentteja mahdollisista ongelmista, tietäisi välttyä samoilta kun tässä aloin juuri harjoittelemaan sivujen väsäilyä.. ehkäpä jopa uuden ketjun muodossa, tämä kun sortui heti offtopicciin.. [H]

edit: typoja

[Shark]

Tietäväisestä en nyt menis puhumaan, mutta sanonpa silti mielipiteeni.

Itse olen onneton-web-sisällön-tuottaja-tapaus ja voin sanoa, että iWeb:hän on todella helppo tapa saada jotain esitettävää tuonne verkkoon, mutta jopa meille amatööreille, jotka vasta ensimmäistä kertaa tutustuu koko aiheeseen voisi tarjota pikkuisen enemmän personointimahdollisuuksia. Ihan vaikka vaan jos nuo templatet poikkeisi toisistaan muutenkin kuin värinsä puolesta.

Noh, luulisi olevan seuraavan (niin monta kuin niitä jo onkin) päivityksen yhteydessä muutama kummenen uutta pohjaa.

Ja se mua vaivaa kun sitä ylänavigointihässäkkää ei taida saada poies. Tai järjesteltyä edes niitä kohteita haluamallaan tavalla muuttamatta sitä etusivua. Vai onko mulla jäänyt jotain huomaamatta?

[TheKraken]

Ja se mua vaivaa kun sitä ylänavigointihässäkkää ei taida saada poies. Tai järjesteltyä edes niitä kohteita haluamallaan tavalla muuttamatta sitä etusivua. Vai onko mulla jäänyt jotain huomaamatta?

Kyllä sen muistaakseni pois saa. Ja järjestyksen saa muutettua, kun säätää sitä vasemmalla näkyvää ennytmuistaminkänimistä-listan järjestystä.

Yläpalkin linkit on siis sen mukaan järjestyksessä missä ne sivut on listassa ylhäältä alaspäin.

[Shark]

Katsopa pikkuisen tarkemmin aikaisempaa lausettani:

Tai järjesteltyä edes niitä kohteita haluamallaan tavalla muuttamatta sitä etusivua.

Eli muuttamatta etusivua. Tarkoittaen, että se etusivu on aina se listan ensimmäinen sivu.

Olishan se ihan kiva juttu jos vaikka ne navigoinnit etusivua lukuunottamatta yhdelle riville ja se etusivu vaikka siihen alle yksin.

[Grugi]

Noniin iLife paketti tuli ja sivut on laitettu joten tässä linkin tynkää.

Tästä sivuille

[Muffe]

Täälläkin tuli tehtyä sivut.

poistettu vanha linkki


EDIT: Sivun liikennöintiraja näköjään ylittynyt muutamassa päivässä. Koitan vaihtaa palvelinta tämän päivän aikana.

EDIT2: Uusi osoite www.turhuus.olen.in

[Bwoy]

Ja se mua vaivaa kun sitä ylänavigointihässäkkää ei taida saada poies. Tai järjesteltyä edes niitä kohteita haluamallaan tavalla muuttamatta sitä etusivua. Vai onko mulla jäänyt jotain huomaamatta?

Kyllä sen muistaakseni pois saa. Ja järjestyksen saa muutettua, kun säätää sitä vasemmalla näkyvää ennytmuistaminkänimistä-listan järjestystä.

Yläpalkin linkit on siis sen mukaan järjestyksessä missä ne sivut on listassa ylhäältä alaspäin.

Itseäni kiinnostaisi sen navigointipalkin fontin ja ulkoasun muuttaminen manuaalisesti..mahtaakohan onnistua?