http://www.jjpsoftware.tk/
(http://jjp.110mb.com/)
Tämä on minun ja parin kaverini (minä tosin tein lähes kaiken varsinaisen työn itse) nettisivu. Sivustolta voi ladata tekemiämme ohjelmia ja kommentoida niitä, lisäksi siellä on oma keskustelualue. Sisältöä on melko vähän, mutta lisään sitä sinne sitä mukaa, kun valmistuu, erityisesti sitten, jos/kun saan uuden Visual Basicin. ;)
Nyt kaipaisin palautetta erityisesti sivuston teknisestä toteutuksesta ja toimivuudesta. Jos haluatte nähdä lähdekoodin, voin lähettää niitä tänne.
Toteutuksesta ei oikein voi sanoa mitään. Näyttää parilta nettisivulta, jotka on upotettu muutamaan frameen, mikä taas ei ole oikein käytettävyyden kannalta hyvä asia. Varsinkin jos menen epähuomiossa avaamaan sivun täbiin, ei navigaatiota olekaan enää missään.
Ulkoasukin on suoraan vuodelta -92.
Lebe80 kirjoitti:
Näyttää parilta nettisivulta, jotka on upotettu muutamaan frameen, mikä taas ei ole oikein käytettävyyden kannalta hyvä asia. Varsinkin jos menen epähuomiossa avaamaan sivun täbiin, ei navigaatiota olekaan enää missään.
Totta, olisi varmaan parempi käyttää vaikka PHP:n includea tai SSI:tä. Vai mitä itse suosittelet? Ja "parista nettisivusta" sen verran, että sivustolta on pääasiassa tarkoitus ladata ohjelmia, eikä pitää sisällään paljon sivuja. Teen sinne luultavasti vielä artikkelienkirjoitusjärjestelmän.
Lebe80 kirjoitti:
Ulkoasukin on suoraan vuodelta -92.
Jep, aionkin parantaa sitä. ;) Mutta onko vaikkapa logo muuten hyvä teidän mielestänne?
Sanoisin nyt äkkiä vilkaistuani, että kannattaisi kuvata tarkemmin mitä pakettien sisällä on, kun niitä tarjoaa ladattaviksi. Liikaa tietoa ei helpolla tule tarjottua, ja se on pienempi paha kuin liian vähän tietoa.
Linkki sanoo: JuhoPelit 2007 (pelkät lähdekoodit)
Jotakuta voisi mm. kiinnostaa millä kielellä lähdekoodit ovat ja missä ympäristössä ohjelmia voi kääntää ja/tai suorittaa.
Kannattaa myös olla realistinen sen suhteen, ketä tarjotut ohjelmat oikeasti kiinnostavat. Tarkoitus ei ole lytätä, mutta ilman erityistä kuvausta siitä, miksi juuri nämä pelit voisivat kiinnostaa minua sivuutan ne heti. Ja niin tekee suurin osa sivun lukijoista, jolleivat ole lähisukulaisia tai parhaita kavereita. Ainoastaan selainpeliä jaksaa kokeilla ilman ennakkotietoja, koska se on sen yhden klikkauksen takana.
Sen sijaan lyhyt kuvaus pienestäkin peli-ideasta saattaisi saada satunnaisen lukijan kiinnostumaan, lukemaan koko jutun ja kokeilemaan ko. peliä. Korostan vielä: Sitä sivun oikeaa lukijaa kiinnostaa tietää ennen minkään lataamista mitä siellä paketissa oikeasti on, ja onko se latauksen vaivan arvoista! Ei siis mainospuhetta, vaan ihan faktat vain.
Kuvakaappaukset myös kertovat paljon (joku väittäisi että enemmän kuin tuhat sanaa), mitä ollaan lataamassa.
Kopeekka > Kiitos vinkistä, lisäsin muutaman rivin esittelyn itse paketista, sekä lyhyen kuvauksen jokaisesta pelistä. JuhoPelit 2007:stä on kyllä tulossa myös binaryt.
Lebe80 > Olet oikeassa (niin kuin yleensä). ;) LabyLandista olen itse asiassa ottanut kuvakaappauksia juuri sivustoa varten, mutta en ole uploadannut niitä sivustolle.
Pääseekö muut tonne? Mä en.
Joo, mulla oli tänään vähän ongelmia, koska FTP-yhteys ei toiminut. Ongelma korjaantuu varmasti tänään tai huomenna.
EDIT: Siis, etkö pääse koko sivustolle? o_O Mulla se toimii kyllä, mutta valikot ja keskustlu (?) eivät, juuri sen FTP-ongelman takia.
Nyt koko sivuston ulkoasu on uusiutunut. Kommentteja?
Älä käytä taulukkotaittoa, se on huono tapa. Etusivulla olevat linkitkin ovat ilmeisesti vanhentuneita.
Tuossa sivussa ei ole mitään niin ihmeellistä, että sitä erityisesti tarvitsisi kommentoida. Plussaa yksinkertaisuudesta.
Metabolix kirjoitti:
Älä käytä taulukkotaittoa, se on huono tapa.
Jep, mutta en keksinyt muutakaan. Jos tiedätte paremman tavan, niin kertokaa ihmeessä!
Metabolix kirjoitti:
Etusivulla olevat linkitkin ovat ilmeisesti vanhentuneita.
Hupsista, korjattu. :) Olin nimittäin muuttanut päätteet .html:stä .php:ksi.
Metabolix kirjoitti:
Tuossa sivussa ei ole mitään niin ihmeellistä, että sitä erityisesti tarvitsisi kommentoida.
Kommenttisivulla onkin tarkoitus kommentoida pääasiassa ohjelmia, joita sivustolta voi ladata. Kuten jo mainitsinkin, sinne tulee paljon uutta sisältöä, enimmäkseen kuitenkin pelejä.
Juhko kirjoitti:
Jos tiedätte paremman tavan, niin kertokaa ihmeessä!
Ootkos kuullut semmosesta otuksesta kuin CSS?
Sillä ei tietääkseni saa tuota hienoa (?) kehystä itse sivuosuuden ympärille. No joo, tajusin vasta nyt, että kaksi noista taulukoista oli 100% turhia, joten poistin ne.
Kehystä?
Kannattaa nyt edes katsoa mitä kaikkea CSS:llä saa aikaan. Ainakin overflowia käyttämällä saa kaikenlaista kivaa aikaan.
EDIT: .tk päätteinen osoite ei jostakin syystä päivittynyt vaikka käytinkin tuota CTRL + F5 yhdistelmää (poistaa välimuistin tiedostot ko. sivulta). Eli siis tuo kehys tuossa, css:llä saat paljon hienompaakin aikaan. Esim. sivuni http://bluefoxgames.org ja http://wowittaja.net. 0% taulukkotaittoa, 100% CSS:ää. Tokihan sitten tietty IE osaa olla tyhmä eikä osaa toistaa CSS:ää läheskään oikein, ei IE6 eikä IE7.
Sivuilla pitäisi käyttää niitä tageja, jotka kuvaavat todellista sisältöä. Esimerkiksi tekstinkappaleet kuuluvat p-tagin (paragraph) sisään ja listat asianmukaisiin listatageihin (ul jne.). Samasta syystä br-tagin käyttö tuolla tavalla kappalejakoa korvaamaan ei ole hyvä tapa. Tyylit pitää määritellä CSS:llä, font-tagi on vanhentunut.
Kokeilepa näin.
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<title>JJP</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
/* <![CDATA[ */
a.menu:link { color: #ff9; }
a.menu:active { color: #f9f; }
a.menu:visited { color: #ff9; }
a.menu:hover { color: #9ff; }
body {
color: white;
background-color: black;
}
h1 {
margin: 0;
}
#linkit, #linkit li {
list-style: none;
margin: 0;
padding: 0;
}
#linkit li {
padding-right: 1em;
display: inline;
}
#sisalto_ulko {
background-image: url('background.jpg');
color: black;
background-color: white;
border: 2px solid silver;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
padding: 2px;
margin-top: 1em;
}
#sisalto {
border: 1px solid black;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
padding: 0.5em;
}
#copyright {
color: #ff9;
}
/* ]]> */
</style>
</head>
<body>
<h1><img src="logo.jpg" alt="JJP" /></h1>
<ul id="linkit">
<li><a href="http://jjp.110mb.com/index.php" class="menu">Etusivu</a></li>
<li><a href="http://jjp.110mb.com/jujapax.php" class="menu">JuJaPaX</a></li>
<li><a href="http://jjp.110mb.com/juhopelit.php" class="menu">JuhoPelit</a></li>
<li><a href="http://jjp.110mb.com/keskustelu/" class="menu">Keskustelu</a></li>
<li><a href="http://jjp.110mb.com/kommentit.php" class="menu">Kommentit</a></li>
</ul>
<div id="sisalto_ulko">
<div id="sisalto">
<p>Tervetuloa JJP:n kotisivuille! JJP (ei rekisteröity) on perustettu
vuonna 2003 ja tekee enimmäkseen pieniä tai vähemmän pieniä
tietokoneohjelmia.</p>
<p>JJP:n tekeillä olevia tietokoneohjelmia ovat esimerkiksi nämä:</p>
<ul>
<li><a href="http://jjp.110mb.com/juhopelit.php">useita tietokonepelejä</a></li>
<li><a href="http://jjp.110mb.com/jujapax.php">JuJaPaX</a>, melko vähän tilaa vievä graafinen käyttöliittymä</li>
</ul>
<p>Lisäksi JJP ylläpitää mm. <a href="http://www.hulluaivo.tk/">Hulluaivon</a> internet-sivustoa.</p>
<p>Jotkut sivuston linkeistä saattavat olla toimimattomia.</p>
</div>
</div>
<p id="copyright">Copyright © Juho Alho 2009</p>
</body>
</html>No niin, muisti pätkii taas. ;) Olen kyllä kuullut (kauan sitten) tuosta tavasta tehdä varjostus - en ole koskaan kuitenkaan käyttänyt sitä - mutta en muistanut siitä yhtään mitään, kun tein sivustoani. Ja nyt en jaksa käsittää, miksi käytin <br><br>-yhdistelmää <p>-tagin sijasta.
Joka tapauksessa kiitos koodista, opin siitä paljon uutta. :)
Muuten, saako mitä tahansa fontteja käyttää vapaasti omilla sivuilla, vaikka ihan vaan font-family:ssä?
Juhko kirjoitti:
Muuten, saako mitä tahansa fontteja käyttää vapaasti omilla sivuilla, vaikka ihan vaan font-family:ssä?
Tietenkin. Font-familyssä kerrot selaimelle mitä fonttia haluaisit selaimen käyttävän renderöimiseen. Se on käyttäjän oma asia jos hänellä on luvattomia fontteja koneellaan.
Juhko kirjoitti:
Muuten, saako mitä tahansa fontteja käyttää vapaasti omilla sivuilla, vaikka ihan vaan font-family:ssä?
Ei saa. Comic Sans MS:n käytöstä rankaistaan.
Fonttien käytössä kannattaa muutenkin olla tarkkana, koska kaikkia fontteja ei välttämättä ole tuettuna käyttäjällä. Vähintääkin pitäisi aina määritellä varsinainen fontti ja muutama sans serif perheeseen kuuluva ns. default fontti.
Jos haluaa käyttää erikoisfontteja esimerkiksi otsikoissa niin kannattaa tutustua sIFR ja FLIR tekniikoihin.
Okei. Mä käytin sivustolla Copperplate Gothic Boldia, Futuraa ja Arial Blackia. Jos jotakin näistä ei olisi saanut käyttää / niitä ei ole useimmissa koneissa, niin on kiva, jos kerrotte. Haluaisin myös tietää, miten hyvin ne sopivat menuun, jossa niitä on käytetty.
Hmm, kaksi lihavaa fonttia ja yksi normaalipaksuinen (Futura). No, luulisin että yli puoella koneista ei ole mitään noista, vai oliko se Arial Black oletuksena kaikissa Windowseissa. Muita kuin Windows-käyttäjiä ajatellen voisit ehkä laittaa loppuun vielä helvetica, 'sans serif'
Haluatteko/jaksatteko vielä auttaa? Uudistin koko sivuston ulkoasun ja tein Lataukset-osion, sekä binäärit kaikista ladattavissa olevista ohjelmista. Kommentteja?
Jaa..
Et voi käyttää Microsoftin fonteja markkinointiin kapallisessa toiminnassa jos ei ole lisenssit maksettu niihin. Windowsan lisenssiin ne ei kuulu.
Jos toiminta on ei kaupallista niin tuskin asiasta kukaan rankaisee.
Pitäisi tarkistaa asiaa sillä nettisivuillahan ei kuitekaan kopioida fonteja mihinkään.
Luulisin että Arial on kaikissa koneissa.
Eikös mac-koneissa Arialin tilalla ole Helvetica?
Ei ole luvatonta pistää font-familyyn vaikka "jonkun superkallis ei vapaaseenkäyttöön -fontti". Silloin se näkyy sillä fontilla vain jos käyttäjällä on se fontti, ja silloin sinä et siitä ole vastuussa.
Perusfontteina ovat nyt Times New Roman, Times, Verdana, Arial, Helvetica ja Sans Serif. Sen luulisi riittävän, vai mitä? :)
Juu.. mutta jos teet sivuille Flash-härpäkän niin siinäpä et saa käyttää sisäänrakennetusti esim. waretetuja fonteja.
Sama jos teet esim PDF-dokumentin nettiin, niin älä ainakaan wareta sitä varten Adoben fonttipakkia, joka kai maksaa jonkun 10 tonnin.
Entäs MS Sans Serif? Saako sitä käyttää esim. kuvissa?
??? ??? ??? ??? ??? ??? etc. ;)
Suuttuisitteko (huom. konditionaali), jos vielä kerran pyytäisin kommentteja nykyisestä sivustosta?
Muista vielä validaattoria käyttää, ainakin yksi sulkeva </div> puuttuu säännöllisesti. Lisäksi tuolla on yhä asioita, joita ei pitäisi olla, esimerkiksi hirveä määrä :tä. Sitä ei kuulu käyttää asetteluun, siihen on aivan muut temput. Myös semantiikka on yhä hakusessa. Esimerkiksi valikon linkeille oikea rakenne on lista eikä div:
<ul id="navi"> <li><a href="index.php">Etusivu</a></li> <li><a href="outdex.php">Takasivu</a></li> </ul>
#navi {
list-style-type: none;
}
#navi li {
display: inline;
padding-left: 1em;
}Onko html-oppaassasi tahallaan tehtyjä virheitä, vai ovatko ne vahingossa lipsahtaneet? Esimerkiksi alt atribuutti ei suinkaan ole tarkoitettu esittämään kuvan otsikkoa, joka näytetään kun hiiri on kuvan päällä. Tätä toimintoa varten on olemassa title atribuutti.
Tekstiä ei ole tarkoitettu kirjoitettavaksi paljaaltaan, vaan niiden tulisi olla jonkin tagin esim. kappaleen p sisällä. Tyhjien tagien tulisi päättyä /> merkkiin. Esimerkiksi
<img src="kuva.jpg" alt="kuvaava nimi" title="kuvan otsikko" />
Teuro kirjoitti:
Tyhjien tagien tulisi päättyä /> merkkiin.
XHTML:ssä kyllä, mutta HTML:ssä ei. Validaattori antaa tuosta itse asiassa varoituksen.
funktio kirjoitti:
Teuro kirjoitti:
Tyhjien tagien tulisi päättyä /> merkkiin.
XHTML:ssä kyllä, mutta HTML:ssä ei. Validaattori antaa tuosta itse asiassa varoituksen.
jep tuo on ihan totta kyllä. Pyrin itse kirjoittelemaan xhtml:n mukaisia sivuja, joten tuli sitten kirjoitettua taas moinen virhe.
Jos puhut Hulluaivon HTML-koulusta, niin se on kirjoitettu vuonna 2006 ja on täysin paska.
Metabolix: Testasin tuota sinun systeemiäsi. Ei näy oikein, mikä vikana?
Juhko kirjoitti:
Jos puhut Hulluaivon HTML-koulusta, niin se on kirjoitettu vuonna 2006 ja on täysin paska.
Ehkä se pitäisi sitten poistaa sieltä tai korjata sen virheet?
Juhko kirjoitti:
Testasin tuota sinun systeemiäsi. Ei näy oikein, mikä vikana?
Olet varmaankin tehnyt jotain väärin tai sinulta puuttuu joitain olennaisia tyylejä. Esimerkiksi Ohjelmointiputkan linkkipalkki on toteutettu esittämälläni tavalla, voit ottaa siitä mallia. (Siinä on tosin IE 5.5:lle ja vanhemmille ylimääräinen korjaus, älä välitä siitä.)
Teuro: Korjasin pahimmat virheet. En kuitenkaan suosittele tuota opasta HTML:n opiskeluun. ;)
Metabolix: Selvä, kokeilen huomenna. (nukkumaan)
Noin, nyt toimii. :)
Juhko kirjoitti:
Teuro: Korjasin pahimmat virheet. En kuitenkaan suosittele tuota opasta HTML:n opiskeluun. ;)
Tuota älä ota itseesi, mutta teit itse asiassa lisää virheitä noilla "korjauksillasi". Otsikkotagi kirjoitetaan aina individuaaliksi elementiksi. img tagin kanssa sinulle tuli pieni lapsus. titletagi ei ole vaihtoehto kuvalle, vaan alt-tagi on sitä varten. titletagin sisältö tulee esille. kun hiiri on kuvan päällä.
Teuro kirjoitti:
Otsikkotagi kirjoitetaan aina individuaaliksi elementiksi.
Häh?
Teuro kirjoitti:
titletagi ei ole vaihtoehto kuvalle, vaan alt-tagi on sitä varten. titletagin sisältö tulee esille. kun hiiri on kuvan päällä.
hups
Juhko kirjoitti:
Teuro kirjoitti:
Otsikkotagi kirjoitetaan aina individuaaliksi elementiksi.
Häh?
Tuota se siis kirjoitetaan suoraan bodytagin alle, siis ilman esimerkiksi kappaletagia. Individual -> itsenäinen / yksilöllinen
Teuro kirjoitti:
titletagi ei ole vaihtoehto kuvalle, vaan alt-tagi on sitä varten. titletagin sisältö tulee esille. kun hiiri on kuvan päällä.
Tarkoitat varmasti title-parametria (ja alt-parametria), jotka ovat image-tagin parametreja. Title-tagi on se, mikä laitetaan head-elementin sisään (eli head aloitustagin ja head lopetustagin väliin).
Grez kirjoitti:
Teuro kirjoitti:
titletagi ei ole vaihtoehto kuvalle, vaan alt-tagi on sitä varten. titletagin sisältö tulee esille. kun hiiri on kuvan päällä.
Tarkoitat varmasti title-parametria (ja alt-parametria), jotka ovat image-tagin parametreja. Title-tagi on se, mikä laitetaan head-elementin sisään (eli head aloitustagin ja head lopetustagin väliin).
Juuri näin parametrit ei tagit. Kiitos tarkennuksestasi Grez.
Teuro kirjoitti:
se siis kirjoitetaan suoraan bodytagin alle
hups :)
Kyllähän mä tuon tiesin.
Voi että, fontti on kyllä nii tönkkö. :/
CSS filua vähä nykyaikasemmaks (sillee teinix "bling blingii") nii eiköhä lähe skulaa.
BTW. Sisältö ownt :D
Häh?
Menun ympärille ei pitäisi tarvita ollenkaan div-elementtiä, samaan ulkonäköön (ainakin tuossa tapauksessa) pääsee aivan hyvin pelkällä ul-elementillä, kun yhdistelee niiden CSS:t oikein.
Olet määritellyt paljon asioita pikseleinä. Itse pyrin aina välttämään pikselimittoja siellä, minne ne eivät erityisemmin kuulu. Oikeastaan ainoat järkevät paikat niille ovat minusta reunat (border) ja omia reunakuvia varten kehitellyt elementit. Fonttikoot määrittelen mieluiten ilmauksilla medium, small, large jne. tai prosentteina niin, että leipäteksti on 100%. Useimmat sivustot määrittelevät fontit paljon pienemmiksi. Aiemmalla koneellani, resoluutiollani ja käyttöetäisyydelläni en saanut tästä pienestä tekstistä yleensä selvää, ja suurin osa sivuista hajosi skaalauksesta totaalisesti. (Pari vuotta sitten useimmat selaimet eivät osanneet skaalata elementtejä, joiden koko oli määritelty pikseleinä. Nyt monet jo osaavat, mutta silti pikselimittojen tarpeeton käyttö ei minusta ole hyvä tapa.)
Noudatin Metabolixin antamia ohjeita ja pistin grafiikat kokonaan uusiksi. Kommentteja?
Tämähän on nyt jo vähän vanha threadi, mutta voisin sanoa että ohjelmointitaitoa sinulta kyllä löytyy ihan hyvin. Ulkoasun suunnittelussa voisit kylläkin vielä kehittyä, joskin tämä ulkoasu voittaa vanhemmat mennen tullen.
Todettakoon tähän nyt samalla, että ohjelmointitaustaisilla sivustontekijöillä on hyvin paljon taipumusta tehdä selkeästi erotellut "laatikkomaiset" ulkoasut. Vaatii aika paljon harjaantumista ja ajan kulumista, että siitä alkaa päästä irti. Tässä ongelmana on lähinnä tylsyys ja tietyn tason "virallisuus". Sama vaivaa sekä tuon sivuston uutta ulkoasua kuin myös esimerkiksi Putkaa ja Mureakuhaa. Toki yksi este toisenlaisiin ulkoasuihin on CSS:n rajallisuus: ilman kuvankäsittelytaitoja on vaikea lähteä rikkomaan laatikoita pelkän CSS:n voimin.
Jooo, voisin ehkä pyytää jotain toista jäsentä suunnittelemaan ulkoasun... Paitsi jos keksin itse jotain muuta kuin nuo laatikot.
Hyvä että viimeinkin saa perusteltua palautetta ulkoasusta. :)
Merri kirjoitti:
Todettakoon tähän nyt samalla, että ohjelmointitaustaisilla sivustontekijöillä on hyvin paljon taipumusta tehdä selkeästi erotellut "laatikkomaiset" ulkoasut. Vaatii aika paljon harjaantumista ja ajan kulumista, että siitä alkaa päästä irti. Tässä ongelmana on lähinnä tylsyys ja tietyn tason "virallisuus". Sama vaivaa sekä tuon sivuston uutta ulkoasua kuin myös esimerkiksi Putkaa ja Mureakuhaa. Toki yksi este toisenlaisiin ulkoasuihin on CSS:n rajallisuus: ilman kuvankäsittelytaitoja on vaikea lähteä rikkomaan laatikoita pelkän CSS:n voimin.
Tämä on varsin totta. Itsekkin pelkkää ohjelmointia harrastaneena vasta pari vuotta sitten siirryin myös itse ulkoasun suunitteluun. Hyvän aikaa sai aikaa käyttää ennenkuin pääsi eroon tästä ns. laatikko pohjaisesta suunittelusta.
Aihe on jo aika vanha, joten et voi enää vastata siihen.