Onko kukaan törmännyt "valeselaimeen" eli vaikka jQuery UI -vimpaimeen, joka muistuttaisi selainta? Se olisi ikään kuin kuva selaimesta mutta dynaaminen sellainen. Ei haittaa, vaikka se ei esittäisikään mitään oikeaa selainta, kunhan sen tunnistaa selaimeksi.
Tässä pieni esimerkki, joka näyttää tältä:
<div class="browser ubuntu-firefox">
<div class="window-header">
<span class="title">Hello, world!</span>
<span class="tab-title">Hello World!</span>
<span class="favicon"></span>
<!--Tai <img class="favicon" src="img/favicon.png">-->
<span class="url">www.<span class="domain">hello-world.org</span>/index.html</span>
</div>
<div class="window-content">
<h1>Hello World!</h1>
</div>
</div>Oho, "Hello, World!" on näköjään vaikea kirjoittaa oikein. :)
No? Olen useamman kerran törmännyt tällaiseen eri nettisivuilla videona tai kuvana. Eikö kukaan ole koodannut jo vimpainta, täytyykö minun... :(
Et ole vieläkään oikein onnistunut kertomaan, että mitä tässä ajetaan takaa ja mikä olisi haluttu lopputulos. Esittelit meille avausviestissä selaimelta näyttävän nettisivun ja toisessa viestissä ihmettelet, että eikö kukaan ole koodannut sellaista. Otetaas uusiksi?
No jaa, yritän selittää vähän paremmin.
Elikäs, haluttu lopputulos olisi käyttöliittymäkomponentti, joka muistuttaa selainta mutta joka ei ole kuva eikä video. Siinä voisi olla skinejä, jolloin iLaitteilla voitaisiin näyttää iSkiniä ja vastaavasti muille muita tai mitä ikinä halutaankaan. Sillä voisi korvata kuvan ja/tai videopätkän joissakin tilanteissa. Sen hyödyt (tai joissakin tapauksissa haitat) videoon verrattuna ovat dynaamisuus, pienempi kaistan tarve, selaimen oman renderöintikoneen käyttäminen sekä interaktiivisuus.
Aion käyttää sitä esim. verkkopalvelun etusivulla esittelemässä palvelun toimintaa. Minä ainakin vierastan sitä, että kaikissa esittelyvideoissa käytetään Mäkkiä tai vanhaa IE:tä. Toisaalta joku toinen vierastaa jotain muuta. Mutta jos skini vaihdetaan selaimen ja käyttöjärjestelmän mukaan, voisi saada aikaan "Tämähän toimii minunkin selaimella"-tunteen.
En haluaisi keksiä pyörää kokonaan uudelleen, mikäli sellainen on jo olemassa.
En tiedä tälle GUI-palikalle nimeä, enkä löytänyt Googlaamallakaan mitään järkevää. Löysin kuitenkin pari esimerkkiä, jotka tekevät saman asian enemmän tai vähemmän haluamallani tavalla:
En edelleenkään ymmärrä, mikä on varsinainen ongelmasi. Siis haluatko komponentin, joka toimii kuin selain, vai komponentin, joka jotenkin maagisesti näyttää aina samalta kuin käytettävä selain?
Mietitään ensin ulkonäköä. Vaikka koodilla olisi täysi pääsy käyttäjän koneeseen, on epärealistista saada selvitettyä, miltä hänen selaimensa normaalisti näyttää (paitsi ehkä ottamalla kuvakaappaus). Lienee sanomattakin selvää, että JavaScript-koodilla ei ole mitään pääsyä käyttäjän koneeseen. Niinpä ulkonäköön ei ole mitään JS-ratkaisua (eikä käytännössä muutakaan ratkaisua). Vaikka löytäisitkin netistä joitain CSS-tyylejä, ne luultavasti kattaisivat vain hyvin pienen osan eri vaihtoehdoista – kärjistäen ehkä lähinnä IE:n Windowsissa oletusasetuksilla.
Toiminta on helpompi, mutta siinä on pari ongelmaa. Ensimmäinen ongelma on, että JS:n voimin tehdyllä valeselaimella ei pääse muille sivustoille. Kuvaamassasi käytössä tämä ei toki ehkä haittaa. Toinen ongelma on, että selaimessa näytettävät sivut saavat myös pääsivun CSS-tyylit ja JS-koodit – ja päinvastoin. Kuitenkin samalla sivustolla olevia, oikein suunniteltuja sivuja voi hyvinkin selailla; jQueryn kanssa HTML-runkosi alkaa toimia hyvin lyhyellä koodilla:
$(function() {
$(".window-header .url").keydown(function(e) {
if (e.keyCode == 0x0d) {
e.preventDefault();
$(".window-content").load($(this).text());
}
}).each(function() {
this.contentEditable = true;
});
});jukkah kirjoitti:
Aion käyttää sitä esim. verkkopalvelun etusivulla esittelemässä palvelun toimintaa. Minä ainakin vierastan sitä, että kaikissa esittelyvideoissa käytetään Mäkkiä tai vanhaa IE:tä.
Tähän on ainakin kaksi helppoa ratkaisua. Ensinnäkin voit tehdä videon, jossa ei näytetä ikkunan reunoja tai jossa reunat ovat omatekoiset. Eihän reunoilla ole mitään tekemistä palvelun toiminnan kanssa, ja jos joku on niin tyhmä, ettei osaa yhdistää videon sisältöä ja selainikkunan sisältöä, se on ihan oma häpeä. Toinen vaihtoehto on tehdä erillinen, koko ikkunan täyttävä JS-demo, jolloin reunat ovat automaattisesti oikeat.
Metabolix kirjoitti:
Vaikka koodilla olisi täysi pääsy käyttäjän koneeseen -- Niinpä ulkonäköön ei ole mitään JS-ratkaisua (eikä käytännössä muutakaan ratkaisua).
En ajatellut tunnistaa käyttäjän selaimen teemaa tms. hienouksia, vaan ihan yksinkertaisesti vain käyttöjärjestelmän ja selaimen. Sehän voidaan tunnistaa nykyään melko luotettavasti (olettaen, että FF-käyttäjä ei väitä olevansa IE-käyttäjä). Älä ajattele liian vaikeasti. :)
Metabolix kirjoitti:
JS:n voimin tehdyllä valeselaimella ei pääse muille sivustoille. Kuvaamassasi käytössä tämä ei toki ehkä haittaa. Toinen ongelma on, että selaimessa näytettävät sivut saavat myös pääsivun CSS-tyylit ja JS-koodit – ja päinvastoin. Kuitenkin samalla sivustolla olevia, oikein suunniteltuja sivuja voi hyvinkin selailla
Itse en tosiaan tarvitse sellaista, jolla pääsisi toiselle sivulle (puhumattakaan domainista). Vaikka siinä onkin url-kenttä, sen sisältö voisi tarvittaessa olla mitä vain.
Metabolix kirjoitti:
voit tehdä videon, jossa ei näytetä ikkunan reunoja tai jossa reunat ovat omatekoiset.
Tiedän, haluan nimen omaan videolle korvaajan. Omatekoiset reunukset aion myös tehdä (mikäli kelvollista widgettiä ei ole jo tehty). Omatekoinen skini tulisi tietenkin käyttöön asetuksella skin: "default" ja automaatti skin: "auto-detect". Esimerkiksi http://youtu.be/p3bgBafrZy4 on video, joka voisi löytyä esittelemänsä palvelun etusivulta, mikäli sellainen olisi erikseen. Videon voisi korvata kokonaan tarkoittamallani vekottimella.
Metabolix kirjoitti:
Eihän reunoilla ole mitään tekemistä palvelun toiminnan kanssa
Sillä voi olla kuitenkin vaikutusta uuden käyttäjän saamiseen. Mikäli reunukset on selvästi tunnistettavissa IE7:ksi (ja käyttäisin vaikkapa Chromea), saattaisin olettaa, että kyseessä on "Toimii vain IE:llä"-sovellus, josta seuraa Google.next().
Metabolix kirjoitti:
Toinen vaihtoehto on tehdä erillinen, koko ikkunan täyttävä JS-demo, jolloin reunat ovat automaattisesti oikeat.
Jos joutuisin viemään käyttäjän jollekin demo-sivulle, veisin hänet suoraan sovellukseen demo-tunnuksilla, mikäli palveluun pitää rekisteröityä. Eli tämä vaihtoehto on sinänsä vähemmän hyödyllinen.
Aihe on jo aika vanha, joten et voi enää vastata siihen.