Terve kaikille,
Uudet kotisivuni eivät ole valmiit, eikä niitä ole optimoitu mobiili-versioita varten (vielä). Ottaisin kuitenkin erittäin mielelläni palautetta vastaan, mm. suorituskyky, selkeys, mikä pielessä? jne. jne. jotta voisin sivustoa parantaa.
Huom! Kyseessä pieni ilmoitusluontoinen sivusto itsestäni.
---
Hyviä asioita:
+ Olen tehnyt sivuston kokonaan itse, jotta ymmärrän joka kohdan
+ Hyödynsin pohjana Foundation Frameworkkia
+ Huomioin suorituskyvyn
Huonoa:
- URL-rakenne
- Kuvien skaalautuvuus ja toimivuus
- Vähän sisältöä
---
Minusta sivut ovat hienot, ainakin hienommat kuin edelliset sivusi. Kivoja animaatiota. Sivut myös vaikuttavat ammattitaitoisesta, tosin en sitten tiedä koodipuolesta, onko siellä jotain virheitä.
Kuten sanoit, sivut ovat aika tyhjät. Mielestäni sivun värimaailma on hyvä, mutta kun esimerkiksi laittaa iPadin homescreeniin pikakuvan, niin mielestä taustalla oleva valkoinen väri on liian sinertävä, tai sitten se vain johtuu iOS 7:män läpinäkyvyydestä, jolloin se homescreeniin lisäys-popupin taustakuva on punainen.
Tuossa etusivulla olevassa punaisessa kometta-avaruusjutussa on kait paddingia, koska esim. iPhonella kun komeetat pyörii, ne häipyy jo ennen aikojaan.
Myös iPadilla jos menee sivuille, hieno koodianimaatio jämähtää uudelleenlatauksesta huolimatta. En tiedä johtuuko se iOS:ksen Safarista, sillä iPadilla toisella selaimella animaatio toimii.
Kuvat:
Koodi jämähtää (iPad): http://fpaste.dy.fi/W1z
Padding etusivulla: http://fpaste.dy.fi/XjJ
http://s28.postimg.org/tmphw628r/late.png
Kusahtiko toi jotenkin? Eikö jo nyt pitäisi tukea isoja resoja?
Miksi pikkuinen avaruusalus on 1940 pikseliä leveässä kuvatiedostossa?
Okei, paljon bugeja juuri noiden isojen kuvien kanssa ja animaatioiden...
Kuten sanoin, Mobiili-versioita ei ole vielä tehty! Eli ne tulevat myöhemmin, sivusto on keskeneräinen. Kiitos kuitenkin palautteesta. Joudun varmaan miettimään tuota kuva juttua.
Metabolix kirjoitti:
Miksi pikkuinen avaruusalus on 1940 pikseliä leveässä kuvatiedostossa?
..juu eli teen tällaiselle alueelle: 1940x1540px (970x770px <- "retina"). Opettelin vasta tänään tuota animaatiota ja tarkoitus on seuraava:
1. Avaruusalus ja Asteroidit lentävät hitaammin koko alueen ympäri
2. Toinen alus, joka muistuttaa Millenium Falconia lentää koko alueen ympäri hieman nopeammin, ja menee asteroidejen välistä.. Täytyy tutkia tulevaisuudessa miten nuo saa tehtyä ihan pikku png-kuvilla, mutta huomaatte varmaan että kuvat ovat kaikki super kevyitä.
---
Tosiaan iPad versiota eikä iPhone versiota ei ole vielä olemassa, eli jokseenkin näin: 320px - 768px
Okei, mutta suurkiitos kaikille, mietin paremmalla taajuudella teidän postauksia. Tämä testaaminen on ongelma. Oma resoluutioni on 2880px leveä ja sille olen tämän nyky version suunnitellut. Toisaalta en osaa tarkkaan sanoa miten Foundation vaikuttaa skaalaukseen. Mutta esim. CV-sivu pitäisi toimia kaikilla ok, mutta nuo kaksi suurta kuva pinta-alaa ongelmakohtia:
- GRID
- Source-Code
kiitän!
Lisäys:
Macro kirjoitti:
Kusahtiko toi jotenkin? Eikö jo nyt pitäisi tukea isoja resoja?
Okei, pari huomautusta alkuun...
a.) En ole ammattilainen vaan harrastelija
b.) Tablet & Mobiili -versioita ei ole vielä tehty eikä testattu
c.) Muutin nyt punaisen GRID -alueen erilaiseksi
Mielestäni animaatio ei ole yhtä sulavaa, mutta käytin kuvan kohdalla mm. atribuuttia 'cover'. En pysty testaamaan kunnolla, mutta Firefoxsissa on tällainen 1980px leveä tila jota käytin.
Näin jälkeenpäin olisi voinut aloittaa Mobile First ideologialla, mutta toivon että kesään mennessä iPhone/iPad versiot, touch kuvineen ovat valmiit, kiitos jälleen tuesta ja kaikesta avusta. Varsinkin kuvat olivat hyviä hahmottamiseen.
Lisäys:
Vielä sen verran että tapahtuuko kellään niin että nuo CSS3 animaatiot kuormittaisivat tietokoneen näytönohjainta, eli tietsa kuumenisi? Olen jostain lukenut että CSS3 animaatiot jotenkin tuettaisiin/ kiihdytettäisiin selaimissa?
Näin ollen saattaisi olla eroja kuinka kevyt animaatio on koneelle:
- Chrome
- Safari
- IE
- FF
- Opera
..........Muuten tuo 'cover' arvo tekee sen ettei kuva ole enään niin "retina" .. toisaalta voisi miettiä taustakuvaa leveimmän resoluution mukaan, tyyliin 1920px on -> 3840px eli tekisi jopa noin leveitä kuvia.
Tuo GRID-kuva on ostettu, mutta koska rahaa on rajallisesti niin en hankkinut kalleinta versiota, nyt harmittaa sillä kuva tosiaan voisi olla lähes 4000 pikseliä leveä ja muutenkin korkeampi. Mutta tähän loppuun lyhyesti se että olen siitä (ylpeä) ja tyytyväinen että koska sivut ovat omaa käsialaa niin niitä fiksaamalla voi kehittyä ..
tavallaan olen itse mokannut ja nyt voin sitten yrittää korjata ja parantaa sivustoa.
Mä en käsitä miten tuo sivu on tehty potentiaalisia asiakkaita varten. Se mitä edelleen sivusi vaativat pyörivien avaruusalusten sijaan, on lista sivuista (mieluiten esim. kuvakaappauksin ja linkein), joita olet tehnyt. Näistä näkisi mitä todella ihan oikeasti olet tehnyt.
Ei yrityksiä kiinnosta tippaakaan, onko henkilökohtaisen sivusi kuvat retinatasoa, ne haluaa tietää millaisia muita työkeissejä olet tehnyt.
Etusivulta oli vaikea päästä itse sisältöön:
Etusivulla, jonne jouduin koko ajan, sana "idearikas" ärsytti, sillä siitä tuli mieleen vain huonosti käännetty ruotsalainen lainasana.
Noh, lopulta pääsin pois etusivulta, jolla ei ollut oikeastaan mitään sisältöä.
Portfolio-linkkiä klikattuani säikähdin, että jouduin jollekin aivan eri sivustolle, sillä huomioni kiinnittyi välittömästi aivan erilaiseen "paristo.fi"-logoon. Esittelykarusellissa pyörivät kuvat näyttivät aluksi olevan sivun ainoa sisältö, vaikka ne olivatkin vain kuvitusta. Huomasin vasta viimeisenä asiana koko sivulla olleen otsikon "Asiakastyö", mikä hämmennytti lisää hetken kuluttua. Luin nimittäin seuraavaksi pikaisesti CV:täsi, joka oli ihan OK, mutta muistin, että löysin juuri jostain linkin Asiakastyö-sivulle, mutta varsinainen Portfolio olisi jäänyt jotenkin väliin. Koetin klikata valikosta takaisin Portfolion ensimmäiselle sivulle, mutta päädyinkin taas samalle Asiakastyö-sivulle. Tajusin vasta tuolloin, että linkki ja otsikko eivät täsmänneet.
Siinäpä joitain huomioita käytettävyydestä menemättä kummemmin tekniseen toteutukseen.
Lisäys: Oho! Huomasin vasta nyt viestin alkuperäisen lähettämisen jälkeen, että tuota ensimmäistä sivua voi myös rullata alemmas ja siellä ON jotain sisältöä. En olisi nähnyt tuota lainkaan, jos en olisi tämän viestiketjun vuoksi tutustunut sivuun tarkemmin. Yläosan animaatio taitaa olla aivan liian suuri...
Täytyy myös tunnustaa että meni kauan ennekuin ymmärsin että etusivulla ilmeisesti tavoiteltiin jonkinlaista Parallax Scrolling ominaisuutta, ja että sivua voi kelata alaspäin. Luulin jopa hetken aikaa että sivuilla on jokin bugi tai sivut on pahasti kesken kun alareunasta pilkotti "<!-- /Yläosa -->" teksti ja se näytti jonkinlaiselta footerilta. Myöskin ainakin itseä tuollaiset kiertävät ja liikkuvat jutut lähinnä häiritsee sivuilla.
Samoin kuin Cornix kirjoitti, niin portfolia-linnkiä painettuani luulin että siirryin toisille sivuille. Eli sivut voisi olla vähän enemmään yhteneväiset.
Tuntuu myös että jotkut asiat yritetään sanoa liian hienosti, esim:
"Olen tehnyt kotisivuni oppilaitosten edustajia varten" -> "Kotisivuni on koulun harjoitustyö"
Lebe80 kirjoitti:
Ei yrityksiä kiinnosta tippaakaan, onko henkilökohtaisen sivusi kuvat retinatasoa, ne haluaa tietää millaisia muita työkeissejä olet tehnyt.
..Olet varmasti oikeassa, mutta myös kotisivut toimivat näyttönä omasta osaamisesta.
Paljon tuli jälleen ehdotuksia mikä voisi olla toisin. Sivusto ei varmaankan toimi yhtä hyvin kaikilla. Laitoin nyt nuolen, jonka pitäisi auttaa siinä että etusivulla tosiaan on tarkoitus skrollata alas... Navigaatioon laitoin nyt 'etusivu' ..juu tutkin nuo teidän kirjoitukset.
En tullut ajatelleeksi että myös tuo slider ongelma.
Ja "web harrastaja", taitaa olla yhdyssana, samoin kuin web-palvelu tai IT-ala.
late kirjoitti:
– – Kuten sanoin, Mobiili-versioita ei ole vielä tehty! – –
Jos ajattelet vastata tuohon koodibugiin iPadilla, niin sanon, että huono vastaus.
Testasin tänään juuri sun sivuja Safarilla Macillani ja tälläistä tuli.
Olet lisännyt hienosti tohon ton nuolen, joka osoittaa, että alhaalla on jotain. Jos sitä klikkaamalla voisi sivun kohta muuttua siihen alemmas? Tarkoitan esimerkiksi tätä: http://boy-coy.com/#home -> klikkaa "about" -> scrollautuu sivua alas päin. Tälläinen effekti voisi tapahtua nuolta klikkaamalla.
PS. Tohon mobiilisivujuttuun, ettei ole valmis, niin mitä siinä ei ole valmiina? Mielestäni sivut ovat hienot, kunhan paddingin saa pois animaatiosta ja koodibugi safarilla pois. Ja miksi olet esimerkiksi aloittanut jotain iOS 5-tyylittelyä, jos kuitenkin sinulla on mobiiliversio erikseen (tai olen näin ymmärtänyt). Sivu skaalautuu näytön mukaan, ei tässä mitään mobiiliversiota tartte.
Nyt kun muutit sen kuvaviritelmän etusivulla, niin sivut ovat oikein hyvät. En ymmärrä miksi siitä valitetaan, ettei ole tajuttu sivulla olevan enemmän sisältöä... jos seuraa miten nämä kehittyvät, niin huomaa, että aika isoja elementtejä tykätään törkätä jokaikiseen paikkaan ja paljon on tyhjää tilaa. Esimerkiksi nyt vaikka käyttöjärjestelmäpuolelta Windows 8.
Etusivun nuolesta joku taisikin jo sanoa, että se voisi olla linkki. Vierität sitten sivua vaikka jQueryllä alaspäin sinne vaalealle osalla asti. Kuvasikin voisi olla linkki vaikka CV-sivulle.
Portfolioon kaipaisin vähän enemmän sisältöä, nyt pyörittelet siinä karusellissä vaan yhden projektin kuvia (näyttää muuten hyvältä!). Ei niiden tarvitse olla mitään asiakastöitä, voit laittaa omia projektejasikin sinne.
CV näyttää hyvältä ja kivasti myös skaalautuu pienemmille ruuduille. Ehkä en itse laittaisi ajokorttiluokkaa sinne.
Macro kirjoitti:
Nyt kun muutit sen kuvaviritelmän etusivulla, niin sivut ovat oikein hyvät. En ymmärrä miksi siitä valitetaan, ettei ole tajuttu sivulla olevan enemmän sisältöä...
Voisiko kuule olla ihan aiheellista, jos sivu on niin sekava, ettei käyttäjä löydä sisältöä? Minä en tajunnut, että etusivulla oli sisältöä, vaikka luin siitä ensin tästä ketjusta. Toinen mitä en ensin tajunnut, oli että missä navigaatio on. Kokeilin myös klikkailla tuota punaista härpäkettä ja keskellä olevaa profiilikuvaa. Siinä vaiheessa silmäni olivat jo niin tottuneet voimakkaisiin väreihin (punainen ja musta), etten kiinnittänyt mitään huomiota tuohon aivan sivun ylälaidassa olevaan navigaatioon.
(vaalean)sininen voisi olla ehkä parempi kuin tuo kirkas punainen.
Pienennät sitä mustaa aluetta, niin paranee puhelimella katottaessa, muut sivut toimii puhelimella.
The Alchemist kirjoitti:
Toinen mitä en ensin tajunnut, oli että missä navigaatio on.
Aika monella sivulla navigaatio on yläreunassa...
Macro kirjoitti:
The Alchemist kirjoitti:
Toinen mitä en ensin tajunnut, oli että missä navigaatio on.
Aika monella sivulla navigaatio on yläreunassa...
Voi ollakin, mutta silti tuolla asettelulla ja värimaailmalla sitä ei suoraan sanoen huomannut aluksi lainkaan. Olisin olettanut navigaation olevan logon vieressä, koska oikealle sijoitettuna väliin jäi niin paljon tyhjää tilaa, että vasemmalta mielenkiintoisen logon löydyttyä ei enää muuta navigointiin viittaavaa nähnyt. Länsimaissa luetaan vasemmalta oikealle, ja rivin sisältö tuntui loppuvan logoon.
Yleensä netissä ihmiset (siis tavikset ja web-kehittäjätkin) sohivat ensimmäisiä vastaantulevia senhetkistä tavoitetta edistäviä linkkejä.
Suosittelen lukemaan kirjan Steve Krug – Don't Make Me Think – A Common Sense Approach to Web Usability, jos käytettävyys kiinnostaa. Kirjastoissakin olen teosta nähnyt, ja se on nopealukuinen ja selkeä.
macro kirjoitti:
Portfolioon kaipaisin vähän enemmän sisältöä, nyt pyörittelet siinä karusellissä vaan yhden projektin kuvia (näyttää muuten hyvältä!). Ei niiden tarvitse olla mitään asiakastöitä, voit laittaa omia projektejasikin sinne.
Hmm.. yritin nyt hieman selventää tekstiä ja kuvia. Juu.. kiitos suuresta palaute määrästä. Voi olla että ihmiset hahmottavat hieman eri tavalla asioita. Elikkä.. tuo suuri punainen alue ja suuri musta alue voivat lähinnä ärsyttää. Niissä oli kuitenkin ideakin taustalla:
Avaruus/Grid -kuva:
Animaatio, "luovuus", innostava, jopa hieman ärsyttävä väri, mutta ei missään nimessä tylsä väri. Oma kuva + slogan.
Lähde-koodi kuva:
Pieni näyttökuva omasta tyylistä koodata ja kommentoida, sekä mielenkiintoinen katsaus pinnan alle. Eli millaisista merkeistä muodostuu sivuston rakenne. No joo...
---
Tällä hetkellä Mobiili/Tablet -versiot on jätetty möhemmäksi, sillä haluaisin testata niitä paremmin:
- iPhone 5c
- iPad Air
...on totta että nyt sivut toimivat ihan ok, tai eivät ollenkaan esim. tablet tai puhelin, mutta tämä on Foundationin ansioita ja parin media-queryn, jotka lisäsin ihan vain testitarkoituksessa. Tuosta CV:stä poistin ajokortti kohdan, joku taisi sen mainitakkin. Portfoliossa on vain 1 laajempi työ, jonka olen aikoinaan tehnyt ja jota sittä kehitän ja ylläpidän. Se on pohja seuraavalle 3-4 vuodelle eli toivon että laitan joskus sinne pikku prototyyppejä ja mini-projekteja.
Yhteystiedot löytyvät, kuva ja cv sekä some-profiilit, joten tästä on hyvä jatkaa Mobiili-maailman kunhan taidot paranevat. Kiitän!
Joo, mut toi "lähdekoodi"-osio on täysin turha, varsinkaan kun siinä ei ole mitään sisältöä.
Keksi siihen esim. joku teksti, jossa kerrot semantiikasta yms., jos kerran sen haluat tuohon asettaa. Muutenkin, se on hieman väärässä paikassa.
Ja jotenkin typerästi sivusto on nyt one-page-site yhdistettynä alasivuilla, jotka eivät taas ole tätä yhden pitkän sivun teemaa, joka tekee koko ideasta täysin typerän.
Eli yritä nyt sitten tehdä yksi pitkä sivu, jossa on myös portfolio-osio ja cv mukana, tai tee sitten monta eri sivua.
Myös ammattitaitoiseen osaamiseen vaikuttaa viimeistely: Omakuvasta klikkaamalla hypätään akkuriin #down, joka taas on terminä täysin typerä. Oikeampi olisi #bottom ja lähes täysin oikea vastaus olisi esim. #tietoa-minusta
Lebe80 kirjoitti:
Ja jotenkin typerästi sivusto on nyt one-page-site yhdistettynä alasivuilla, jotka eivät taas ole tätä yhden pitkän sivun teemaa, joka tekee koko ideasta täysin typerän.
One Page Site - oli joskus muodissa, mutta sitä ei ole niin helppo laajentaa. Itse en pidä ideasta että yhtä sivua skrollataan pitkään alaspäin.
Lebe80 kirjoitti:
Myös ammattitaitoiseen osaamiseen vaikuttaa viimeistely: Omakuvasta klikkaamalla hypätään akkuriin #down, joka taas on terminä täysin typerä. Oikeampi olisi #bottom ja lähes täysin oikea vastaus olisi esim. #tietoa-minusta
Nyt: #about-me, kiitän!
late kirjoitti:
Lebe80 kirjoitti:
Ja jotenkin typerästi sivusto on nyt one-page-site yhdistettynä alasivuilla, jotka eivät taas ole tätä yhden pitkän sivun teemaa, joka tekee koko ideasta täysin typerän.
One Page Site - oli joskus muodissa, mutta sitä ei ole niin helppo laajentaa. Itse en pidä ideasta että yhtä sivua skrollataan pitkään alaspäin.
No ei ole varmaan Wordpressillä, mutta muilla alustoilla voi olla hyvinkin helppoa esim. Concrete5:llä.
Alaspäin skrollatessa kannattaa tehdä ylänavi sellaiseksi, että se vastaa sivun sisältöä, jolloin voi nopeasti hypätä vaikkapa pitkän sivun Portfolio-osioon yms.
Omakuvassa edelleen #down..
Oma mielipiteeni on, että punaisen alueen ("intro") korkeutta pienemmäksi ja musta alue kokonaan pois kun tällä hetkellä se on turhaa hifistelyä ilman tarkoitusta. Jos on oltava jotain tuon tyyppistä niin pistä vaikka harmaan alueen taustaksi tuo lähdekoodi-kuva samalla ominaisuudella.
Muuten sivusto on hyvä varsinkin kun portfolioon tulee enemmän täytettä aikanaan.
CV on selkeästi muotoiltuna.
Sivun yläosassa pyörii hauskasti näitä planeettoja, avaruusaluksia ja asteroideja, mutta nuolta painaessa se töksähtää aika ikävästi alaspäin. Voisit ehkä siihenkin jonkun nopeahkon skrollauksen kehittää.
http://stackoverflow.com/questions/6677035/
Mitä puhelinsivuun tulee... Skrollaussysteemi ei toimi puhelimella. Voisit kenties piilottaa koko koodinäkymän ja vähän kaventaa punaista osiota pystysuunnassa. Nyt myös mustan koodinäkymän ja Tietoa minusta -kappaleen väliin jää kolmasosa näytöllinen tyhjää.
t0ll0 kirjoitti:
Omakuvassa edelleen #down..
Suurkiitos! Olin huolimaton.
t0ll0 kirjoitti:
Oma mielipiteeni on, että punaisen alueen ("intro") korkeutta pienemmäksi ja musta alue kokonaan pois kun tällä hetkellä se on turhaa hifistelyä ilman tarkoitusta.
Hmm.. kokemus riippuu luultavasti paljon omasta koneesta/selaimesta. Itselläni MBP + Safari, jolloin punainen alue on 1 ruutu, musta alue ruutu 2 ja alempi osa ruutu 3. Muutenkin on hauskaa/hienoa että osa on tykännyt ja osa kammoksunut ulkoasua ja varsinkin noita suuria kuva hirviöitä. Tavallaan yritän hakea vähän muista web-sivustoista poikkeavaa tyyliä. Punainen on todella räikeä ja ärsyttävä... toisaalta aika pirteä ja jännittävä. Kokeilin aluksi harmaata ja sinistä, joita täälläkin on ehdotettu. Ne olivat selkeämpiä, mutta myös "tylsempiä". Kiitän kuitenki suuresti ja nöyrästi kaikista mielipiteistä! Olen yllättynyt että niin moni on kommentoinut rakentavasti.
Yllätyin toki siitä että eräs käyttäjä ei löytänyt päänavigaatiota, koska punainen sokaisi näkökentän tai vastaavaa, mutta toisaalta, rauhallisempi väri olisi estänyt tämän. Mutta kuten sanottu harmaa on insinöörien väri ja jos he saisivat päättää olisi WEB täysin harmaa. Esim. putkassa ei ole värejä, jonka vuoksi se on niin selkeä, mutta myös ulkoasu päivitystä vailla. Esim. ylä kuvake voisi olla värikäs ja innostava. Jopa animoitu, mutta silloin animaatio voisi olla lähempänä tulikärpästen rauhallista leijailua kuin selkeää liikettä.
Toisaalta tällaiseen tarkoitukseen esim. bloggailu, putka on täydellinen. Ja yllättävän toimiva eri näytöillä ja laitteilla.
late kirjoitti:
Hmm.. kokemus riippuu luultavasti paljon omasta koneesta/selaimesta. Itselläni MBP + Safari, jolloin punainen alue on 1 ruutu, musta alue ruutu 2 ja alempi osa ruutu 3. Muutenkin on hauskaa/hienoa että osa on tykännyt ja osa kammoksunut ulkoasua ja varsinkin noita suuria kuva hirviöitä. Tavallaan yritän hakea vähän muista web-sivustoista poikkeavaa tyyliä. Punainen on todella räikeä ja ärsyttävä... toisaalta aika pirteä ja jännittävä. Kokeilin aluksi harmaata ja sinistä, joita täälläkin on ehdotettu. Ne olivat selkeämpiä, mutta myös "tylsempiä". Kiitän kuitenki suuresti ja nöyrästi kaikista mielipiteistä! Olen yllättynyt että niin moni on kommentoinut rakentavasti.
Omalla ruudulla musta osuus mahtuu kerralla punaisen kanssa näkyviin. Jos pidään maksimoituna selainta, niin ehkä musta osuus on vähän tyhjä. Koodia voisi näkyä enemmän alta.
http://www.goodwp.com/images/201210/goodwp.
Älä turhaan lähde muuttamaan punaista miksikään muuksi. Ei se niin sokaiseva voi olla, onhan liikenteessäkin punaisia autoja, punaisia talojakin on. Ja jestas, jollain voi olla punainen paitakin!
Macro kirjoitti:
...Nyt myös mustan koodinäkymän ja Tietoa minusta -kappaleen väliin jää kolmasosa näytöllinen tyhjää.
Olet oikeassa kaikessa mitä sanot, mutta tosiaankin olen tarkoituksella siirtänyt myöhempään vaiheeseen Mobiili & Tablet -alustat. Nyt sivusto toimii ok tai ei ollenkaan, kuten iPad+Safari. Eli haluaisin keksiä jonkun järkevän oikeaoppisen tavan suurempien kuvien ja animaation näyttämiseen, jotta kuvat ja animaatio olisi "HD" tasoa ja responsiivisia.
MUTTA!
Sillä tavoin että kännykkään ei ladattaisi samaa kuvaa. Tabletti menköön samalla kuvalla, tabletti pysty suunnassa sen sijaan on jo liian kapea, kännyköistä puhumattakaan. Joka tapauksessa olen miettinyt olisiko nyt viisainta opetella rauhassa hieman JavaScriptiä, lähinnä jQuery ja sitten yrittää tehdä skrollaus ja ehkä jokin muu vastaava juttu.
Tuon mustan lähdekoodi osion kohdalle voisi tehdä sliderin jossa olisi eri kohtia lähdekoodista eli siinä olisi jokin toiminnallisuus. Toisaalta olen 100% varma että täällä on jokin muukin henkilö joka ymmärtää sen miksi lähdekoodi kuva on ns. takana ja attachment 'fixed' .. taidetta!
late kirjoitti:
Macro kirjoitti:
...Nyt myös mustan koodinäkymän ja Tietoa minusta -kappaleen väliin jää kolmasosa näytöllinen tyhjää.
Olet oikeassa kaikessa mitä sanot, mutta tosiaankin olen tarkoituksella siirtänyt myöhempään vaiheeseen Mobiili & Tablet -alustat. Nyt sivusto toimii ok tai ei ollenkaan, kuten iPad+Safari. Eli haluaisin keksiä jonkun järkevän oikeaoppisen tavan suurempien kuvien ja animaation näyttämiseen, jotta kuvat ja animaatio olisi "HD" tasoa ja responsiivisia.
Eikös Foundationissa ole luokka .img-responsive?
Varmaan netti on pullollaan koodinpätkiä, jotka tukevat pienten kuvien näyttämisen mobiililaitteilla ja isojen kuvien lataamisen vain suurilla ruuduilla. Voisit vaikka oletusarvoisesti laittaa img-tagin src-attribuuttiin jonkun pienen 1x1 pikselin kokoisen kuvan ja data-attribuutilla vaikka data-small="kuva_pieni.png" ja data-big="kuva_iso.png", jonka jälkeen voit jQueryllä vaihtaa kuvan jonkun haluamasi tekijän perusteella. Nyt tietenkin joku sanoo, että ei käytä Javascriptiä tms.. sitten on kyllä oma vika, jos ei voi pikkuhiljaa siirtyä nykyaikaan.
Toinen vaihtoehto olisi käyttää SVG-kuvia. Varmistuksena yhteensopivuudesta voisit myös näillä data-attribuuteilla tarjota png-muotoisen kuvan, jos selain ei SVG:tä tue. Tietenkään SVG ei sovi kaikille kuville, mutta voisihan esimerkiksi tuo punaisen osion tausta olla sellainen. Silloin se venyisi kyllä, mutta eihän sillä niin väliä ole, kun eivät asteroidit ja avaruusalukset nytkään kierrä ratoja pitkin?
Minusta sivusi on rauhaton en osaa miksi, mutta tyylillisesti se ei ole yhtenäinen. Sivun vierittäminen ja esiinliukuva musta koodilohko, jossa on sivun lähdekoodia ei ole kovin miellyttävä, koska haluaisin nähdä sen joko kokonaan tai en ollenkaan. Yläosassa oleva punainen osio (planeetat ja muut) lähinnä ärsyttävät, koska sivusta on hankala hahmotta osioita, kun siellä on sinne kuulumatonta liikettä.
portfolio-sivulla tulee mieleen, että siirryin väärälle sivulle, koska tyyli vaihtuu liiaksi. Yritä vaikka vähän yhtenäistää tyyliä ja hiukan karsia värejä. En siis ole itse graafikko ja en osaa auttaa miten sivua voisi parantaa, mutta jotenkin vain lähinnä ärsyttää.
Macro kirjoitti:
Omalla ruudulla musta osuus mahtuu kerralla punaisen kanssa näkyviin. Jos pidään maksimoituna selainta, niin ehkä musta osuus on vähän tyhjä. Koodia voisi näkyä enemmän alta.
Okei, hyvää tietoa kaikki. Otin tuon kuvan talteen (1920 × 1080) -> "Retina" -> (3840 x 2160 px) .. eli saa nähdä tässä web-maailmassa miten tuollaisia HD-kuvia voi tehdä tarkoiksi, kevyiksi ja responsiivisiksi. Joka tapauksessa joudun jättämään kiireen vuoksi sivuston parantamista myöhemmäksi, mutta täältä ketjusta tulen näitä juttuja tulevaisuudessa tutkimaan ja parantamaan, kuten tähänkin saakka.
Teuro kirjoitti:
portfolio-sivulla tulee mieleen, että siirryin väärälle sivulle, koska tyyli vaihtuu liiaksi. Yritä vaikka vähän yhtenäistää tyyliä ja hiukan karsia värejä.
Itse ehkä pitäisin tämän punaisen header-osion kaikilla muillakin sivuilla, mutta kutistaisin sen korkeutta kolmasoaan.
Valittuja poimintoja:
- "(vaalean)sininen voisi olla ehkä parempi kuin tuo kirkas punainen."
- "Suosittelen lukemaan kirjan Steve Krug – Don't Make Me Think – A Common Sense Approach to Web Usability, jos käytettävyys kiinnostaa."
- "toi "lähdekoodi"-osio on täysin turha, varsinkaan kun siinä ei ole mitään sisältöä."
- "jotenkin typerästi sivusto on nyt one-page-site yhdistettynä alasivuilla, jotka eivät taas ole tätä yhden pitkän sivun teemaa, joka tekee koko ideasta täysin typerän."
- "punaisen alueen ("intro") korkeutta pienemmäksi ja musta alue kokonaan pois"
- "Minusta sivusi on rauhaton en osaa miksi, mutta tyylillisesti se ei ole yhtenäinen."
- "(planeetat ja muut) lähinnä ärsyttävät, koska sivusta on hankala hahmotta osioita, kun siellä on sinne kuulumatonta liikettä."
- "portfolio-sivulla tulee mieleen, että siirryin väärälle sivulle, koska tyyli vaihtuu liiaksi."
- "en osaa auttaa miten sivua voisi parantaa, mutta jotenkin vain lähinnä ärsyttää."
...täytyy vielä testauttaa vaatimaton sivustoni muillakin kuin pojilla, jotka ohjelmoivat, ehkäpä tytöillä, jotka eivät ohjelmoi. ;)
Lisäys:
Tuossa harmaa / punainen -versiot:
Korjaa ny oikeasti tuo yhdyssanavirhe tuosta sloganista...
Värien käyttö ei häiritse minua, mutta en pidä täysin turhasta "introsta" ja sen jo aiemmassa postissa mainitusta yhdyssanavirheestä.
Minusta sivulla pitäisi heti näkyä alaosa, joka on tyylikkään näköinen ja kertoo kaiken tarvittavan.
Mobiilikäyttäjille sivu on kamala, koska siinä on javascriptiä ja isoja kuvia. Ne pidentävät latausaikoja ja hidastavat sivun selaamista.
Googleen kun kirjoittaa: webharrastaja niin ehdottaa: web harrastaja .. onko sellaista sanaa olemassa kuin: web-harrastaja?
Olen aina ollut surkea suomenkielessä, enkä osaa sanoa mikä näistä on 100% oikea:
- web harrastaja
- webharrastaja
- web-harrastaja
Lisäys: musiikkiharrastaja -> webharrastaja
Lisäys: Web-kehittäjäkin on usein kirjoitettu eri tavoin, mikä tosin huono asia.
Niin mikä tuon--> yläosa :n tarkoitus on?
Joonazan kirjoitti:
Mobiilikäyttäjille sivu on kamala, koska siinä on javascriptiä ja isoja kuvia. Ne pidentävät latausaikoja ja hidastavat sivun selaamista.
..no sanon sitten sadannen kerran että mobiili-sivusto ei ole valmis, toisaalta sivusto on livenä, joten sen pitäisi olla. Tuo punainen on nyt vain intro, sellainen tavallaan yksi tyylisuuntaus jollaisia näkee silloin tällöin. Pidän grafiikasta ja taiteesta.
Joonazan kirjoitti:
Mobiilikäyttäjille sivu on kamala, koska siinä on javascriptiä ja isoja kuvia. Ne pidentävät latausaikoja ja hidastavat sivun selaamista.
Macro kirjoitti:
Nyt tietenkin joku sanoo, että ei käytä Javascriptiä tms.. sitten on kyllä oma vika, jos ei voi pikkuhiljaa siirtyä nykyaikaan.
=)
Oskuz kirjoitti:
Niin mikä tuon--> yläosa :n tarkoitus on?
Laptop/Desktop -versioissa ainakin pitäisi näkyä näin:
Lähdekoodi-kuva
Onko sulla late jokin zoomaus selaimessa päällä kun screenshoteissa on kaikki noin järkky isoa?
t0ll0 kirjoitti:
Onko sulla late jokin zoomaus selaimessa päällä kun screenshoteissa on kaikki noin järkky isoa?
Hmm.. Zoomaus on normaali: omppu+0
On toki mahdollista että se kun teen MBP Retina koneella sivustoa, niin se jotenkin eri? Eli oma resoluutioni on 1440 x 900 px, pikselitiheys: yli 300. Eli vaikea sanoa mistä kyse. Olen nyt sitä mieltä että vaihdan tuon punaisen värin joksikin lempeän vaaleaksi koska se järkyttänyt niin monia. Hassua on että osalla sivusto ei nähtävästi näy ollenkaan mukavasti. Esim. nuo 3 screenshottia, jotka laitoin, ovat työpöytäni normaali näkymiä.
Eiköhän se sitten johdu tuosta pienestä resoluutiosta.. Luulin että käytät natiiviresoa kun nuo screenshotitkin on 2880x1600 kokoisia.
Juu.. nuo screenshotit ovat kuvan kaappauksia MacBook Pro Retina 15,7" 2880 x nyt en tarkkaan muista mitä, mutta yritän tehdä kuvat aina kaksikertaa suuremmiksi ja sitten skaalaan 50% 50%.
Toki tuo Grid-kuva on vain 2500px leveä ja käytän siinä arvoa 'cover' jolloin se voi näyttää ties miltä eri näytöillä. No joka tapauksessa tämä kuvan asia on minulle edelleen kaikista suurin kysymysmerkki web-kehittämisessä, palataan!
Älä vaihda sitä punasta.
Puhelimella kun olen vain katsellut niin siinä mustalla alueella ei näy mitään muuta kuin tuo:
lainaus:
/yläosa-->
Ja tääkin vain vaaka tasossa.
late kirjoitti:
Olen aina ollut surkea suomenkielessä, enkä osaa sanoa mikä näistä on 100% oikea:
- web harrastaja
- webharrastaja
- web-harrastaja
Koska web on vierasperäinen sana, se yhdistetään yhdyssanoihin usein yhdysmerkin välityksellä. Muoto ”web-harrastaja” on siis varmasti oikein.
Esimerkiksi sana ”rock-musiikki” voidaan kirjoittaa muodossa ”rockmusiikki”, sillä sana rock katsotaan tarpeeksi vakiintuneeksi.
En tiedä, koskeeko sama myös web-sanaa. Jos ei vielä, niin ainakin tulevaisuudessa.
Ensimmäinen vaihtoehto on virheellinen, sillä web-harrastaja on joka tapauksessa yhdyssana.
Oskuz kirjoitti:
Älä vaihda sitä punasta.
Puhelimella kun olen vain katsellut niin siinä mustalla alueella ei näy mitään muuta kuin tuo:lainaus:
/yläosa-->
Ja tääkin vain vaaka tasossa.
Okei palautan alkp. punaisen ja korjaan tuon sanan, mutta jo lähes 100nen kerran, en ole vielä optimoinut Mobiili / Tablet -versioita. Eli varmaankin sitten muutan tuon taustakuvan kokonaan paljon pienemmäksi. Media Query hoitaa sen ettei suuri kuva lataannu Mobiilissa, myös Tablet pystysuunnassa tarvitsee luultavasti oman kuvan.
Tuon mustan kuvan kohdalla sama juttu. Ylempää tästä keskustelusta löytyy linkki -> Lähdekoodi-kuva.
Lisäys:
Noniin.. palautin sivuston sille tasolle mitä se oli tänään 18:00 (kiitos Time Capsule). Eli jos nyt sopii niin palaan tuon Mobile / Tablet -versioiden optimointiin esim. viikonloppuna.
Joudun miettimään useita asioita jatkossa:
- Suuret kuvat (pun./mus.) -> pinemmiksi (2-3 versiota)
- Punainen pikku-nuoli ja scrollaus efekti (JavaScript)
..noh ..toki monta muuta asiaa, mutta tuo kuva saa nyt ja jatkossa olla punainen koska lukuisat harmaat/ siniset versiot eivät olleet lainkaan yhtä jännittäviä. Nyt siis tällä erää, suurkiitos kaikille suuresta avusta!! Sivusto on parempi kuin ennen LIVEä, ja ehkä kesään mennessä ihan ok myös muillakin alustoilla, kuten iPad + Safari.
..Luulen että siellä kyse CSS3-animaatiosta ja siitä että Safari vaatii jonkin oman Prefixin, joka olisi kyllä outoa, ehkä -webkit vaatii, no joo, testaus on suuri haaste omalla kohdalla.
Tulee väistämättä sellainen kuva että tekstien kirjoittaja olisi lapsi ja/tai kehitysvammainen.
Lisäksi olet onnistumaan tyrimään noinkin yksinkertaisen sivun outline:
Untitled Section
Untitled Section
Lauri Hasko, luova ja idearikas web-harrastaja,joka haluaa kehittyä alan ammattilaiseksi.
Nuoli
Untitled Section
© 2009-14 Lauri Hasko / Internet-palveluntarjoaja Zoner Oy
Untitled Section
Voitko selittää tuon rakenteen ja mistä se tulee?
<header>
<nav>
<section class="intro">
<div class="bg-img">
<div role="main">
<article>
<section>
<section>
<section>
<section>
<footer>Lisäys:
Tuossa niille, jotka pitävät vaaleista sävyistä ja selkeydestä:
Vaalea-kuva
Saa nähdä osaanko tehdä mitään vaihtoehtoista ulkoasua tuohon punaiseen verrattuna. En valitettavasti ole mikään graafikko. Mutta se on totta että punainen on hieman rauhaton pitemmällä aika välillä ja animaatio "tavallaan turha" .. mutta .. tämä nyt on tällainen henk. koht. viritelmä muutenkin.
Late outlinen mukaan käytät liikaa <section>-tageja, sielläkin missä pitäisi käyttää <div>jä.
fergusq kirjoitti:
Late outlinen mukaan käytät liikaa <section>-tageja, sielläkin missä pitäisi käyttää <div>jä.
Okei, kiitos! Mikä tämä outline oikein on?
Eikö tuo kuulu siihen kategoriaan mitä olet opiskellut viimeiset 5 vuotta... Eli ihan alkeita.
makumaku kirjoitti:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/
Sections_and_Outlines_of_an_HTML5_document
Okei, tutkin illalla. Kiitoksia jälleen.. nimimerkille 'geijo' sellaisia terveisiä että mikä on jälleen ongelmasi? Ei yhtään positiivista postausta. Olen lukenut jonkin verran semanttisuudesta, mutta outline oli uusi asia, pahoittelut.
late kirjoitti:
nimimerkille 'geijo' sellaisia terveisiä että mikä on jälleen ongelmasi?.
Nimimerkkini kirjoitetaan q - kirjaimella (kuu) ja lausutaan - keijo. Eikä mulla mitään ongelmaa ole.
..No oli miten oli, mutta tapasi kommentoida välillä on todella töykeä. Etkö ole huomannut.. nyt tutkin linkin.
Lisäys:
Miten tällainen koodin pätkä pitäisi tehdä oikeaoppisesti?
<!-- Intro -->
<section class="intro">
<!-- Kehikko -->
<div class="bg-img-wrap">
<!-- Avaruus-kuva & animaatiot -->
<figure>
<img class="image-1" src="images/bg-asteroids.png" alt="Asteroidit" width="970" height="770">
<img class="image-2" src="images/bg-saturnus.png" alt="Saturnus" width="150" height="150">
<img class="image-3" src="images/bg-earth.png" alt="Maa" width="150" height="150">
<img class="image-4" src="images/bg-planet-x.png" alt="Planeetta X" width="150" height="150">
</figure>
<!-- Profiilikuva & nuoli-ikoni -->
<a href="#about-me">
<div class="profile-img"></div>
<div class="arrow-icon"></div>
</a>
<!-- Slogan -->
<h1>Lauri Hasko, luova ja idearikas web-harrastaja,<br>joka haluaa kehittyä alan ammattilaiseksi.</h1>
</div><!-- /.bg-img-wrap -->
</section><!-- /Intro -->
<section>
<div>
<figure></figure>
<h1></h1>
</div>
</section>Muutin koodia, mutta täytyy sanoa että Foundationin "sisään" ei ole täysin simppeliä tehdä super semanttista rakennetta. Luulisin...
Minä en laittaisi nuolta ja tekstiä h1-tagin sisään.
late kirjoitti:
nimimerkille 'geijo' sellaisia terveisiä että mikä on jälleen ongelmasi? Ei yhtään positiivista postausta.
Tarviiko palautteessa aina olla jotain positiivista?
Jos haluat palautetta, niin yleensä se on negatiivista.
Tällä alalla positiivista on se, jos mistään ei valiteta.
edit:
Ja edelleen tuo sun "lähdekoodiosiosi" on täysin turha, ja liikkumattoman taustan vuoksi moni voi jopa keskeyttää selailun tuohon kohtaan, kun luulee, ettei sivusto jatku pidemmälle. Henk. koht. tykkäsin punaisesta teemasta enemmän, nyt kaikki tuo on todella tasapaksua.
Lisäksi suomeksi kirjoitetulla sivustolla #about-me on täysin väärä termi, vaan mainitsemani #tietoa-minusta sopii paljon paremmin.
Tässä sitä taas ollaan, ensin 90% valittaa punaisesta todella traagiseen sävyyn. Teen harmaan ja kas kummaa. Itse pidin punaista jännittävänä.
late kirjoitti:
Tässä sitä taas ollaan, ensin 90% valittaa punaisesta todella traagiseen sävyyn. Teen harmaan ja kas kummaa. Itse pidin punaista jännittävänä.
Niin no... tykkääjät eivät kerro sitä.
Lebe80 kirjoitti:
Tällä alalla positiivista on se, jos (mistään) ei valiteta.
edit:
Teet kuitenkin tietääkseni omaa sivua, joten tee siitä itsesi näköinen. Kritiikistä kannattaa silti ottaa oppia, vaikkei jokaista osiota kannatakaan muiden mieleiseksi tehdä. Silti validit pointit kannattaa ottaa huomioon.
Punainen oli ihan hyvä idea, mutta alueen koko ja toiminnallisuus oli väärässä paikassa ja ihan väärän kokoinen. Lähdekoodi tulee hauskasti esiin alta, mutta minua asiassa häiritsee se, että sitä ei pääse näkemään kokonaan. Navigointipalkki on sivun yläreunassa ja oikeassa reunassa parin otsikon kokoinen. Sen löytäminen ei ole helppoa, joten mieleen tuli että sivu olisi paketoitu yhdelle sivulle.
Näin ei ollutkaan, joten selaajana turhauduin nopeasti, kun tietoa ei löytynyt. Tulevana asiakkaanasi lähtisin pois välittömästi sivuiltasi, koska tietoa ei löydy heti.
Kokeilepa sivustoasi poistamalla käytöstä vain tyylit. Onko sivu edelleen käytettävä? Hieman hassusti sivustoasi pystyy selaamaan paremmin, kun poistaa käytöstä javascriptin, kuvat ja tyylit.
Minusta se on pikemminkin hyvä asia, että käytettävyys säilyy vaikka tyylit ja js:t ottaa pois. Silloin rakenne on ainakin jossain mielessä kunnossa vaikka semantiikassa olisikin parannettavaa.
The Alchemist: Tässä tapauksessa käytettävyys paranee, kun tyylit, javascriptin ja kuvat poistaa. Mutta hassusti jos poistaa vain tyylit vastassa on vain valkoinen tausta, jossa on päänavigaation kolme linkkiä kaikki sisältö on sivun alareunassa.
Teuro kirjoitti:
Punainen oli ihan hyvä idea, mutta alueen koko ja toiminnallisuus oli väärässä paikassa ja ihan väärän kokoinen. Lähdekoodi tulee hauskasti esiin alta, mutta minua asiassa häiritsee se, että sitä ei pääse näkemään kokonaan. Navigointipalkki on sivun yläreunassa ja oikeassa reunassa parin otsikon kokoinen. Sen löytäminen ei ole helppoa, joten mieleen tuli että sivu olisi paketoitu yhdelle sivulle.
Kiitos tästä analyysistä, olet varmasti oikeassa ja muutenkin teillä kaikilla tuntuu olevan laajempi käsitys webistä ja käytettävyydestä.
En kuitenkaan ymmärrä miten nykyinen layout muutetaan käytettävyydeltä täydelliseksi. Eli punainen alue on tarkoituksella suuri, koko ruudun kokoinen, myös musta alue sama juttu, lähdekoodin ei ole tarkoitus näkyä kokonaan. Se on vain välähdys sivuston taakse.
Se että ylänavigaatiota ei huomaa on minulle suurin mysteeri. Onko teillä selain täynnä tavaraa sivuston yläosassa, tarkoitan omia erilaisia työkalupalkkeja päällekkäin jne. Noh.. voi olla että jätän sivuston toistaiseksi näin ja alan hitaasti kehittämään ihan alusta sivustoa, sivustoja, prototyyppejä ja projekteja .. vähän kerralla.
.. mikäli ketään voi vähempää kiinnostaa niin aloitin tänään (15.1.2014) Haaga-Heliassa tietojenkäsittelyn koulutusohjelman. Tarkoitus on laittaa omia mini harjoituksia ja protoja sitten aikanaan liveksi omalle saitille... en tiedä onko tämä hyvä idea, mutta ainakin olisi helppo pitää kirjaa/ logia omista töistä, joita toivottavasti kertyy paljon.
.. erittäin off-topiccina vielä se että kammoksun ajatusta että 1.vuoden suurin haaste ei suinkaan ole ohjelmointi, web-kehitys tai kumiperunat, vaan PAKKO PAKKO PAKKO Ruotsi. Huoh.. muinaisjäänne. En osaa sanaakaan ruotsia, voisin mielummin opetella Saksan, Venäjän tai Espanjan perusteet tyhjästä. Okei!.. mutta tämä tältä erää ja vielä kerran erittäin suuri kiitos Ohjelmointiputkan ylläpitäjille sekä foorumisteille, ilman putkaa jälleen kerran .. jäisin paljosta paitsi. Palautteen avulla tiedän missä vika. Vaikkakin tuo graafinen nyky-ilme jakaa putkan kuin päiväntasaaja tai jotenkin näin.
Det är ju synd.. Ja kan faktist 100% svenska. Tår.
Onneksi on Google Kääntäjä:
"Se on sääli .. Kyllä sinua faktist 100% ruotsia. Repiä."
faktiskt = todella
..miksi tarvitsemme ruotsinkieltä kun voimme ymmärtää toisiamme Googlen ja tekstikenttien avulla.
late kirjoitti:
Kiitos tästä analyysistä, olet varmasti oikeassa ja muutenkin teillä kaikilla tuntuu olevan laajempi käsitys webistä ja käytettävyydestä.
En kuitenkaan ymmärrä miten nykyinen layout muutetaan käytettävyydeltä täydelliseksi. Eli punainen alue on tarkoituksella suuri, koko ruudun kokoinen, myös musta alue sama juttu, lähdekoodin ei ole tarkoitus näkyä kokonaan. Se on vain välähdys sivuston taakse.
Alla olevan listan avulla voit arvioida onko sivustosi käytettävä ja esteetön. Erilaiset tekniikat eivät saisi olla itse tarkoitus. Nimittäin katsopa itse kriittisin silmin tuota etusivuasi. Löydätkö hakemasi nopeasti ja helposti?
Okei, kiitos linkeistä, tutkitaan!
Hienoa, että olet koulussa, late!
Macro kirjoitti:
Varmaan netti on pullollaan koodinpätkiä, jotka tukevat pienten kuvien näyttämisen mobiililaitteilla ja isojen kuvien lataamisen vain suurilla ruuduilla. Voisit vaikka oletusarvoisesti laittaa img-tagin src-attribuuttiin jonkun pienen 1x1 pikselin kokoisen kuvan ja data-attribuutilla vaikka data-small="kuva_pieni.png" ja data-big="kuva_iso.png", jonka jälkeen voit jQueryllä vaihtaa kuvan jonkun haluamasi tekijän perusteella. Nyt tietenkin joku sanoo, että ei käytä Javascriptiä tms.. sitten on kyllä oma vika, jos ei voi pikkuhiljaa siirtyä nykyaikaan.
Nyt kun vähän tarkemmin itsekkin aloin Foundationia tutkia, kun alotin omien nettisivujen luomisen, niin huomasin, että Foundation hoitaakin tämänkin itse.
vesikuusi kirjoitti:
Hienoa, että olet koulussa, late!
Kiitän! Tasosta sen sijaan en tiedä.. voi olla että eka vuosi on tosi perusjuttuja, mutta toivottavasti pääsisi mahdollisimman nopeasti tekemään haastavampia projekteja.
---
Foundation tekee paljon kehittäjän puolesta. Esimerkiksi kotisivuillani oleva Slider on naurettavan pieni ja simppeli pala koodia. Jos slideria haluaisi muokata, niin sekin olisi todella nopeaa ja helppoa SASS-muuttijien avulla, jotka löytyvät kaikki samasta tiedostosta vieri vierin kommentoituna.
Hei taas,
Vaatimaton sivustoni on nyt jossain 3.1-versiossa, eli haluaisin kysyä seuraavaa. Miten saisin semanttisesti lisättyä <h1> Otsikkoon, toiminnon joka vierittäisi sivua alaspäin kun käyttäjä klikkaa pääotsikkoa.
Tästä oli aikaisemmin puhetta, mutta haluaisin säilyttää jotenkin tuon semanntisuuden eli ei ainakaan <a> tageja <h1> otsikon ympärille. Toinen parannusehdotus olisi tuo navigaatio eli osaisi laittaa vaikkapa alleviivauksen sen otsikon alle missä sivulla juurikin ollaan. Eli ehkä tämä pitäisi sitoa jotenkin tuohon sivuston URLiin.
Kolmas parannusehdotus olisi sitten tuo URL rakenne, eli mielummin:
laurihasko.com -> kuin -> laurihasko.com/index.php
- - -
Kiitän kaikista vinkeistä ja virheraporteista. Nyt sivusto pitäisi toimia ihan ok myös Mobile, Tablet -laitteilla. Testilaitteina toiminut:
- MacBook Pro "Retina"
- iPhone 5C
Eikö se ole aika semanttista, että linkki merkataan a-elementillä?
Tai jos tarkoitit sitä, että lohkotason h1 ei voi olla tekstitason a-elementin sisällä, niin silloinhan merkataan toki <h1><a href="#jossain">otsikko</a></h1>
late: tarkkaile jQueryllä missä kohtaa sivua mennään, niin voit valita alleviivauksia tms. tyylivaihdoksia otsikoihisi...
Nyt toimii puhelimella (Win 7.8), mutta onhan tuota karsittu. Ulkonäkö on aika tasapaksu harmaa vaikka lh-logo tuokin pikkuista piristystä.
Pöh, punainen hävis!
Okei, jQuerya sitten kevääseen saakka, kiitän. Juu ei minusta kyllä Designeria tule sillä tiedostan itsekkin että sivusto on nyt melko selkeä, mutta samalla tylsä.
Luen parhaillani kirjaa: "Dont Make Me Think" 2013-versio, iBooks. Olin jostain lukevani että on hyvä suunnitella selkeää ja johdonmukaista erinomaisella navigaatiolla jne. mutta TYLSÄ ei saa missään nimessä olla. Muutenkin värioppi on haastavaa, punaista pitäisi jonkun koulukunnan mukaan välttää viimeiseen saakka, eli käyttää hyvin minimaalisesti.
Mutta parempi pitää mielessä että simppelin sivuston tarkoitus on antaa nopeasti kaikki riittävä info itsestäni vaikkapa nyt työnantajalle joka miettii kannattaako tuota riekaletta ottaa harjoitteluun jne. Kiitän kuitenkin jälleen kaikista kommenteista. Harrastajasta kehittäjäksi on pitkä matka...
Sen sijaan, että lukisit aihealueen kirjoja, voisit vaikka tutkia internetistä muiden sivuja.
Tuolta pääset alkuun:
http://www.thefwa.com/site/
Tässä hyvä esimerkki samankaltaisesta sivustosta kuin omastasi, toteutustapa vain täysin eri:
http://www.rleonardi.com/interactive-resume/
Kiitän, tutkitaan. Itseasiassa tuohon alempaan olenkin törmännyt aikaisemmin, mutta tuollaisen tekijä työllistyykin 24 tunnissa. Kova näyte osaamisesta.
Tuo R. Leonardin "resume" on vallan hyvä esimerkki siitä, miten saa asiat tehtyä hankaliksi ja osoitettua, ettei ymmärrä mitään käytettävyydestä. Onhan se kiva lelu, mutta jos tuollainen olisi ainoa mistä tiedot saisi (tiedän, hänellä on "tylsäkin" sivu), menisi saman tien roskikseen hakemus.
Eipä tuota nyt olekaan lähdemateriaaliksi tarkoitettu vaan se on juuri sellainen käytännön prototyyppi, jolla niitä työpaikkoja voi saada. Jos joku rekryäjä sattuu tuon sivun näkemään, niin "R. Leonard" saattaa hyvinkin saada spontaanisti työtarjousta sähköpostiin. Kyllähän mullekin tulee satunnaisesti postia vain sen takia, että Github-profiilini on sattunut jonkun hemmon silmään. (Eikä siellä edes ole mitään erikoista.)
feenix: veikkaan että sai nopeasti työn silti, oli se käytettävyydeltään paljon paskempi kuin esim. Laten sivut.
No työpaikan sillä voi saada jo ihan siksi, että "hei nykyään pitää tehdä tällasii hienoja systeemejä ja ikuisii skrollauksii ja ties mitä, etipäs joku tekemään niin ollaan nykyaikaisia!"
(Ja kyllä, tuo oli kannanotto nykypäivän veppivääntäjiin, joille tärkeintä on hipsteröinti eikä käytettävyys, toimivuus ja tarkoituksenmukaisuus.)
Ja toki työpaikkatarjouksia tulee ihan vain olemalla näkyvillä jossain, ei siinä ole mitään ihmeellistä :)
Ajattelin postata tästä uuden topiicin, mutta menköön näin. Kysymys: "Onko OK että ei tee enään sivustoa IE6 ja IE7 -selaimille!?" Laitan mallikuvaksi omat kotisivuni kyseisillä roskaselaimilla:
IE 6 on julkastu vuonna 2001 ja IE 7 2006. Ei niin vanhoja selaimia edes tarvitse ajateltavan tukea.
Selaimen julkaisuvuosi itsessään ei ole mitenkään oleellinen. Jos 0 % kävijöistä käyttää 2 vuotta vanhaa Chromea, sitä on turha tukea. Jos 30 % kävijöistä käyttää 8 vuotta vanhaa IE:tä, sen tukeminen voi olla järkevää.
Eri selainversioiden tukemisen kannattavuus on hyvin tilannekohtaista. Sekä selainten käyttäjäjakauma että tarvittava työmäärä vaihtelevat todella paljon eri sivustojen välillä. Tässä tapauksessa kyseessä on hyvin yksinkertainen sivusto, joten siitä pitäisi saada tehtyä vähintään lukukelpoinen IE 7:lla minimaalisella työllä.
Kun tehdään tietoinen päätös, että IE 6 ja IE 7 eivät ole tuettuja, niiden käyttäjille voi vaikka näyttää ilmoituksen.
jlaire kirjoitti:
Kun tehdään tietoinen päätös, että IE 6 ja IE 7 eivät ole tuettuja, niiden käyttäjille voi vaikka näyttää ilmoituksen.
Miksi? Mielestäni kaikki IE 6-8 käyttäjät voitaisiin ohjata päivittämään selain, tietokone jne. siis jos kyse henk. koht. käytöstä. Ymmärrän jonkun työpaikan kankean meiningin, jossa esim. ikivanhat koneet, selaimet ja ohjelmat.
Asiakas on aina oikeassa. Harva asia on ärsyttävämpää kuin nähdä nettisivulla kehotus vaihtaa johonkin toiseen selaimeen.
jlaire kirjoitti:
Jos 30 % kävijöistä käyttää 8 vuotta vanhaa IE:tä, sen tukeminen voi olla järkevää.
Tuskin kuitenkaan minkään sivuston kävijöistä 30 % käyttää IE 7:aa.. nykyaikaisten sivustojen suunnittelu on aika hankalaa, jos pitää yrittää tehdä niistä toimivat jollakin esihistoriallisella selaimella.
late kirjoitti:
jlaire kirjoitti:
Kun tehdään tietoinen päätös, että IE 6 ja IE 7 eivät ole tuettuja, niiden käyttäjille voi vaikka näyttää ilmoituksen.
Miksi? Mielestäni kaikki IE 6-8 käyttäjät voitaisiin ohjata päivittämään selain, tietokone jne. siis jos kyse henk. koht. käytöstä.
Jos sivusto näkyy huonosti tai ei toimi ollenkaan, on hyvin turhauttavaa jos en tiedä pitääkö minun vaihtaa selainta vai onko sivusto vain tehty paskasti. Esimerkiksi Silverlightin puuttumisesta saa yleensä selkeän ilmoituksen eikä tyhjää ruutua.
Ehdottamani ilmoitus voi olla esimerkiksi näkyvä banneri, jossa sanotaan ettei sivusto välttämättä näy oikein ja kehotetaan päivittämään selain. Eli juuri niin kuin itsekin ehdotit.
Macro kirjoitti:
Tuskin kuitenkaan minkään sivuston kävijöistä 30 % käyttää IE 7:aa.. nykyaikaisten sivustojen suunnittelu on aika hankalaa, jos pitää yrittää tehdä niistä toimivat jollakin esihistoriallisella selaimella.
Kyllä IE 7:n osuus on edelleen hyvin huomattava joillain sivustoilla. Onnistuit kuitenkin missaamaan pointtini täysin.
jlaire kirjoitti:
Ehdottamani ilmoitus voi olla esimerkiksi näkyvä banneri, jossa sanotaan ettei sivusto välttämättä näy oikein ja kehotetaan päivittämään selain. Eli juuri niin kuin itsekin ehdotit.
Selvennän sen verran, että ilmoitukseni johtaa suoraan huitsin nevadaan. Jos tavallinen peruskäyttäjä surffailee huonolla koneella IE 6-8 kera niin en halua että sellaiset edes näkevät sivustoani.
Jos kyse asiakkaasta / yrityksestä niin tilanne eri. Ylipäätään en halua tukea mitenkään vanhoja koneita, selaimia ja niitä jotka eivät halua käyttää JavaScriptiä. Ei fiksua, mutta niin mieltä rahoittavaa touhua.
Sullahan on hieno web-ammattilaisen asenne. 5/5
Macro kirjoitti:
nykyaikaisten sivustojen suunnittelu on aika hankalaa, jos pitää yrittää tehdä niistä toimivat jollakin esihistoriallisella selaimella.
Järkevästi tehty sivusto – varsinkin sellainen, joka ei sisällä toimintaa vaan tietoa – toimii yleensä myös ”esihistoriallisilla” selaimilla, kun vain poistetaan kaikki CSS ja JS. Koska IE on ainoa selain, jonka vanhoja versioita yhä käytetään merkittävästi, tilanne ratkeaa todella helposti IE:n ehdollisilla kommenteilla.
Late, miksi haluat olla tuollainen ällöttävä elitisti? Luuletko tosissasi olevasi jotenkin parempi kuin muut koska sinulla on macbook? Häpeän sen firman puolesta, joka sinut ottaa joskus mahdollisesti töihin.
tmub kirjoitti:
Late, miksi haluat olla tuollainen ällöttävä elitisti? Luuletko tosissasi olevasi jotenkin parempi kuin muut koska sinulla on macbook? Häpeän sen firman puolesta, joka sinut ottaa joskus mahdollisesti töihin.
..No kuinka paljon maksaa hyvä kone, jossa on uusi selain? IE tässä on ongelma ei Apple.
late kirjoitti:
..No kuinka paljon maksaa hyvä kone, jossa on uusi selain? IE tässä on ongelma ei Apple.
Uuden päivitetyn selaimen voi tietääkseni ladata internetin kautta. Ostatko aina uuden tietokoneen, kun selaimen versio ei ole uusin mahdollinen?
PS. Sivusi näyttävät aika hyvältä.
tmub kirjoitti:
PS. Sivusi näyttävät aika hyvältä.
Kiitän, mutta tuskin tarkoitat IE 6-8 versioita... Yleisemmin halusin nostaa sitä esiin, että Developerin kannalta testaaminen on nykyään melko vaativaa hommaa. Esimerkiksi tekemäni asiakastyö ei näy oikein Samsung Galaxy S II -puhelimella, mutta muilla Samsung puhelimilla ihan normaalisti.
Itselläni ei ole mitään taivaan tietoa siitä mistä tämä voisi johtua. Browserstackin avulla voin testata noin 300 selainta, laitteitakin on useita, mutta esim. Windows Phone puuttuu kokonaan. Tästä kaikesta päättelin että itse haluan panostaa vain uusimpiin selaimiin ja laitteisiin. Jos homma toimii vanhemmilla niin hyvä, mutta ainakaan IE 6,7 -versioita en halua enää tukea.
Hyvä että IE 9,10,11 ainakin kehittyneempiä. IE 8 -versio on mysteeri.
Tee vielä yläpalkin linkeistä blokit, niin ei tarvitse osua juuri linkkiin. Niin kuin esimerkiksi Foundationin sivulla.
Jos käytät Foundationin omia valikkopalikoita, niin tapahtuu automaattisesti.
Macro kirjoitti:
Tee vielä yläpalkin linkeistä blokit, niin ei tarvitse osua juuri linkkiin.
Muutin hieman css-tiedostoa, kiitos hyvästä huomiosta. Sitä on tullut aika sokeaksi omalle luomukselle.
late kirjoitti:
Macro kirjoitti:
Tee vielä yläpalkin linkeistä blokit, niin ei tarvitse osua juuri linkkiin.
Muutin hieman css-tiedostoa, kiitos hyvästä huomiosta. Sitä on tullut aika sokeaksi omalle luomukselle.
Ei se kyllä vielä toimi niin :/
Macro kirjoitti:
Ei se kyllä vielä toimi niin :/
Hmm.. voiko kyse olla välimuistista tai jotain. Eli nyt <a> tageilla paddinkia jne.
Väliaikatiedote:
- Laitoin sivulle hieman turhan raskaan kuvan 500kt. Tulevaisuudessa saatan tehdä kuvasta toisen version älypuhelimia varten. Nyt jos sivusto latautuu hitaasti, niin silloin kuva on liian raskas.
No nyt toimi paremmin. Nähtävästi kuvakin päivittyi. Lisää vielä sama logolle (joka ei muuten sovi siniseen taustaan).
Kuvasta saat muuten paljon pienemmän. Rajaa se niin, että kuvasta tulee jatkuva, kun niitä lisää vierekkäin. Ota myös siitä palasta tuo hohto pois, ja lisää se CSS:llä gradienttejä käyttämällä.
Eipä tuo kuva hirveästi hidastuta puhelimella selausta.
Oskuz kirjoitti:
Eipä tuo kuva hirveästi hidastuta puhelimella selausta.
Jeps, on ne yhteyden sen verran nopeita nykyään, että kyllä sivut latautuu ihan reippaasti.
Tein kuitenkin Latelle esimerkin, jos haluaa tehdä pienen jatkuvan kuvan ja käyttää CSS-gradienttejä tuohon hohtoon.
Kiitos taas, juu paljon hyviä vinkkejä jne. Luulen kuitenkin niin että etsin kuvan joka sopii aiheeseen ICT. Eli kun new comer tulee saitille ekan kerran hän tajuaa että kyse it-tyypistä ja vastaavista asioista.
Sininen taustakuva on ihan hieno, mutta ei kerro riittävästi (oma mielipide).
Noniin, nyt olen onnistunut tuhlaamaan vektorigrafiikkaan lähes 100 €. Uusi ulkoasu voi joidenkin mielestä olla synkkä ja sekava, mutta yritän yhdistää nämä asiat 'intro' -kohdassa yhteen:
- Web-harrastaja
- Luova
- Idearikas
- Ei tylsä
- Mielenkiintoinen, mutta selkeä
- Ei liian raskas (kuva) -> suorituskyky
..voi olla että tulevaisuudessa voisin tehdä uuden kuvan alle 768px näyttöjä varten.
Minä se vaan en lämpene tuolle Simpsons-tyyliselle hahmolle. Se myös näyttää siltä, ettei sillä ole silmiä ollenkaan, mikä on aikas häiritsevää.
Juu.. minulla oli sellainen idea että kun vie hiiren hahmon päälle, niin hahmo tavallaan kurkkaisi koneen takaa ja painuisi takaisin alas. Mutta tällaisen tekeminen on minulle liian hankalaa ja toisaalta...
Nyt menen toistaiseksi tällä linjalla.
late kirjoitti:
Mutta tällaisen tekeminen on minulle liian hankalaa
$("#kuva").mouseover(function() {
$(this).attr("src", "kurkistuskuvan osoite");
});
$("#kuva").mouseout(function() {
$(this).attr("src", "oletuskuvan osoite");
});Hmm.. mutta entä animaatio? Miten saada sulava liike, joka tapauksessa pitää tehdä 2 kuvaa. Olen nyt laittanut lähes 100 € vektorikuviin, en ole vielä halunnut opetella tekemään omia.
Kiitän kuitenkin jälleen suuresta avusta. Voi olla että vielä joskus animoin noita hahmojani.
No samoilla tavoilla, mutta muutat vaikka elementin top-positiota tweenaten?
Vaatii myöskin vain yhden rivin koodia molempiin eventteihin.
edit:
Luulisi, että sen verran kuin sinäkin olet näitä tehnyt, tietäisit tämmöset perusasiat!
Lebe80 kirjoitti:
Luulisi, että sen verran kuin sinäkin olet näitä tehnyt, tietäisit tämmöset perusasiat!
Mikä nyt on tällä kertaa perusasia? En saanut ohjeistasi mitään selvää.
late kirjoitti:
Lebe80 kirjoitti:
Luulisi, että sen verran kuin sinäkin olet näitä tehnyt, tietäisit tämmöset perusasiat!
Mikä nyt on tällä kertaa perusasia? En saanut ohjeistasi mitään selvää.
No perusasia on se elementin top-position vaihtaminen!
Aihe on jo aika vanha, joten et voi enää vastata siihen.