Eredmény: 1 - 9 (9) összesen

Téma: Weblap optimalizálása mobil eszközökre!

  1. #1
    Seo-Titán hunprobalazs logója
    Csatlakozott
    10-05-30
    Hely
    Sin City
    Hozzászólás
    2.145
    Begyűjtött 381 köszönetet
    270 hozzászólásával

    Alapbeállítás Weblap optimalizálása mobil eszközökre!

    Tisztelettel köszöntelek, üdvözöllek!

    Mostanában egyre többször találkozunk azzal a ténnyel, hogy egyesek a mobiltelefonjukról böngészik a netet! Nemrégiben, az egyik androidos konferencián is elhangzott, hogy belátható időn belül már 5X többen fognak netezni okos-telefonjukról, mint számítógépükről! Én ebben nem szeretnék állást foglalni, egy biztos, hogy egyre nagyobb jelentősége van!

    Mivel magyar oldalakon nem igen talál az ember ilyen jellegű leírást, gondoltam megörvendeztetem a fórumtagokat, akik weblapszerkesztéssel foglalkoznak és nem ismeri még ennek a módját, mit hogyan, remélem fogok tudni hasznos ötleteket adni a technikai megvalósításra, persze alap html, css... ismeretekre szükség van, mondhatni alapkövetelménye!

    Azoknak a kedvét sem szeretném elvenni, akinek nincs ilyen mobileszköze, jelenleg még az enyém sem alkalmas, de erre is van egy gyógymód, melyet mindjárt ismertetek!

    Először is kezdjük azzal, hogy el kell döntenie a weboldalnak, hogy ezt most honnan nézik (lebutítva PC vagy iphone), melyet egy egyszerűbb javascripttel tudunk véghez vinni:
    HTML kód:
    <script language="JavaScript">
          if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ) {
            window.location = "iphone.html";
          }
    </script>
    Persze ehhez engedélyezni kell az iphone-on a javascriptek használatát, meg nem is olyan szép megoldás, úgyhogy javasolnám a php kódot! Akinek ezt nem teszi lehetővé a szervere, nyilván marad a js.
    HTML kód:
    <?php
    if ( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') ) {
      header('Location: iphone.html');
    }
    ?>
    Mindezeket az index fájlon belül tesszük és mint látható, ha iphone-ról vagy ipod-ról érkezik a látogató, átirányítjuk az iphone.html fájlra, melyben mondjuk kiírjuk, hogy: Te mobilról böngészel! Aki jártas a programozásban, eddig nem tapasztalhatott új dolgot, ígérem ez a továbbiakban is így lesz!

    Akinek van ilyen eszköze, az máris ki is próbálhatja, akinek nincs, most az figyeljen! Ezt valahogy szimulálnunk kell. Hogy hogyan?
    Készítettem egy nem túl szép, de hatékony megoldást!
    HTML kód:
     <iframe id="belso" name="belso" src="about:blank" width="320" height="480" align="center" scrolling="no" frameborder="0" framespacing="0" border="0" marginheight="0" marginwidth="0"></iframe>
    
    <form name="urlap">
          <input name="hova" style="width:400px" value="http://localhost/iphone/index.html">
          <input type="button" value="ugrás" onClick="window.open(document.urlap.hova.value,'belso')">
     </form>
    Létrehozol mondjuk egy teszt könyvtárat, melyen belül egy fájlt, melybe ezen sorokat bemásolod! ha nagyon szépíteni akarod, akkor köré rakhatsz egy iphone képet, és ez az iframe lesz maga a képernyő! Egész egyszerűen tallózod a file-t és klikkelsz a futattásához!

    DE ez még így mindig nem elég, ezzel csak a képernyő méretét szabályoztuk! Le kell töltenünk a safari böngészőt, majd a preferencesen belül az advanced fülön be kell pipálni a: Show develop menu... Így bekapcsoljuk a fejlesztői menüt, ahol beállítjuk a böngésző típusát a USER AGENT alatt!

    Eleinte az iphone pici betükkel fogja megjeleníteni az oldalt! Ezt fel kell manuálisan nagyítani, ha olvashatóvá akarjuk tenni, tehát nem felhasználóbarát.
    Ezt úgy tudjuk beállítani, hogy a head-be beillesztünk 4 meta teg-et, melyek a következők:
    HTML kód:
    <meta name = "viewport" content = "width = device-width">
        <meta name = "viewport" content = "initial-scale = 1.0">
        <meta name = "viewport" content = "user-scalable = no">
        <meta name = "viewport" content = "maximum-scale = 1.0">
    Bár magukért beszélnek, de azért leírom mit miért:
    1: a készülék képernyőjének szélességéhez igazodik!
    2: nagyítás mértéke lebegőpontos számmal
    3: felhasználók nagyíthatják, átméretezhetik-e az oldalt (yes/no)
    4: Maximum mekkorára lehessen nagyítani (ennek csak a 3 pont yes értékénél van értelme)

    További lehetőségek:
    HTML kód:
    <meta name="apple-mobile-web-app-capable" content="yes">
    Ezen kis meta tag-el el tudjuk menteni oldalunkat, mint egy kis alkalmazás, melynek ikonjára kattintva bejön az oldal, de nem az iphone böngészőjéből indul el! Alapértelmezetten a <title></title> tag-ek közötti érték lesz a neve!
    Ekkor még csak egy alapértelmezett ikonja, van de ha sajátot szeretnénk csinálni, akkor:
    HTML kód:
    <link rel="apple-touch-icon-precomposed" href="icon.png">
    Ezzel tudjuk beállítani a saját ikont, mely a precomposed attribútum miatt nem fényes, ellenkező esetben, azaz ha fényeset szeretnénk, akkor csak simán: "apple-touch-icon" kell! Ami még fontos, hogy csak .png formátumú és 57X57-es méretű lehet!

    Ha lassan töltődik be az oldal, a várakozást kikerülve egy indító képernyőt is betehetünk ezen módszerrel (státus sor sem látszik):
    HTML kód:
    <!-- Induló képernyő (320x460 PNG) -->
        <link rel="apple-touch-startup-image" href="startup.png">
    Köszönöm a figyelmet, remélem érthető volt, egyenlőre ennyit terveztem, de ha van rá igény akkor még van pár dolog a tarsolyomban!
    Üdv.: B@l@'zs



  2. Az alábbi felhasználók hálásak a válaszért:

    Csurga (2013-02-25)

  3. #2
    Bölcs
    Csatlakozott
    08-01-02
    Hozzászólás
    1.271
    Begyűjtött 82 köszönetet
    53 hozzászólásával

    Alapbeállítás re: Weblap optimalizálása mobil eszközökre!

    Az okostelefon detektáláshoz inkább ezt ajánlom:
    http://detectmobilebrowser.com/

    A mobil változat elkészítésében pedig hasznos lehet a jquery:
    http://jquerymobile.com/



  4. #3
    Bölcs benedictus logója
    Csatlakozott
    10-04-23
    Hozzászólás
    1.578
    Begyűjtött 5 köszönetet
    5 hozzászólásával

    Alapbeállítás re: Weblap optimalizálása mobil eszközökre!

    Én utálom a mobil változatokat, szükségtelenül le van butítva állatába - nem érem el az összes funkciót - nem kapom a megszokott struktúrát.

    Az Opera mobil-böngészőjével teljesen jól lehet nézni nem mobil-nézetes oldalakat. Nyílván a mobil-világ is afelé fog fejlődni hogy alapból szép honlapnak jelenítse meg az átlag honlapot.


    Linkeld.be Linkmegosztó
    Indexeld.be - Linkgyűjtemény prémium funkciókkal!

  5. #4
    Seo-Titán hunprobalazs logója
    Csatlakozott
    10-05-30
    Hely
    Sin City
    Hozzászólás
    2.145
    Begyűjtött 381 köszönetet
    270 hozzászólásával

    Alapbeállítás re: Weblap optimalizálása mobil eszközökre!

    Pro és kontra!

    Őszintén szólva nekem nincs ilyen kütyüm, amivel nézegethetném a netet, max ha előfizetnék netre, de sosem éltem ezzel a szolgáltatással, de amit másoknál látok azt most leírom:
    Persze le van butítva a weblap, de sokkal kezesebb, mint ha önmagában nyílna meg. Egyrészt ha nincs erre optimalizálva, akkor sokkal nagyobb méretet kell betölteni, ami ebben az anyagias világban nem mind1, időben is több, meg átláthatatlanul összetett, sokat kell nagyítani és sorolhatnám.
    Majd biztos eljutunk arra a szintre, hogy ez is kiküszöbölhető lesz!

    Szóval birtokomban állt ilyen tudás, amit gondoltam megosztok, hátha valaki elveszik a net rengetegében és itt most tálcán megkapta az alapokat!
    Üdv.: B@l@'zs



  6. #5
    Mentor arth2o logója
    Csatlakozott
    10-03-11
    Hely
    Győr
    Hozzászólás
    408
    Begyűjtött 7 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Weblap optimalizálása mobil eszközökre!

    Van az operának egy mobil browser változata amit szinten minden platformra telepíthetsz. Azzal közel olyan képet fogsz kapni a weboldalról, mint amilyet mobilról fogsz látni:

    http://www.opera.com/developer/tools/

    Telepítsd fel és állítsd be a képernyő méretét. ..pedig ez lett volna a következő cikkem a mya5dothu-ra

    Jquery mobile-ról annyit, hogy nagyon bétás cucc én megcsináltam a rendszeremhez egy interface-t vele, de nem inden telón jó még.

    A http://www.jqtouch.com/ is egy elég jól használható mobil framework, amivel már stabilabb dolgokat lehet készíteni. jQtouch



  7. #6
    Törzsvendég
    Csatlakozott
    09-11-25
    Hely
    Biatorbágy
    Hozzászólás
    100
    Thanked 1 Time in 1 Post

    Alapbeállítás re: Weblap optimalizálása mobil eszközökre!

    Nekem azt mondja meg valaki, ha eltudja magyarázni, hogy miként csinálhatom meg azt, hogy ha beírom, hogy mobil.oldalam hu, akkor az oldalam mobil változata jöjjön be? Nekem van egy cms-em, ami azonosítja, ha mobilról jössz és más design jön be. De én nem szeretném, ha még egy helyre fel kellene tölteni az oldalt és egy új admint kapnék. Én azt szeretném, ha valahogy a domain átirányítást úgy lehetne megoldani ahogy kell. Mondjuk valami virtuális domain, vagy nem is tudom micsoda.

    Azt mondta nekem valaki, hogy az nem jó kereső szempontjából, ha ugyanarra a http request-re más tartalom jön be más eszközökről. (Legalábbis html terén más.) Vagy nincs igaza?



  8. #7
    Törzsvendég Dyra.. logója
    Csatlakozott
    11-09-03
    Hozzászólás
    101
    Begyűjtött 12 köszönetet
    5 hozzászólásával

    Alapbeállítás re: Weblap optimalizálása mobil eszközökre!

    Joomlában, Drupalban ezt multisittal tudod megoldani. A legegyszerűbb ha ugyanazon a szerveren csinálod meg egy aldomainra. Ahogy divatos pl "m.oldalam.hu" ami a multisiteből kifolyólag ugyanazt az adatbázist és fájlokat használja. Amire figyelni kell az a hivatkozások (nyilván a teljes hivatkozások fix helyre mutatnak) és hogy, a mobil oldalt megjelöld, a keresőknek, hogy ne huzzák be. Hiszen ez akár duplikációnak és számíthat. Bár szerintem a Google ezt már le tudja kezelni állítás nélkül is de a többi keresőben nem vagyok 100% biztos.

    megjegyzés: viszont amit én leszűrtem a mobil oldalakról az az, hogy még a mobil felhasználók sem használják szívesen (persze vannak oldalak ahol magam is használom tehát kivételek vannak bőséggel). És személy szerint azt gondolom, hogy az automatikus mobilcímre irányítás nem helyes. Ugyanis ha én példának okáért mobilon is a rendes url címet pötyögöm be akkor azt akarom látni. Erre egy tonna oldal rögtön dob a mobil nézetre. Nem csak én nem szeretem rögtönzött kutatásaim során kiderült nagyon sokan utálják hozzám hasonlóan ezt a fajta átírányítást.

    Ezért én a saját oldalaimon egy jó látható helyre kiraktam egy smink váltót (már ahol van mobil nézet) és ha a user mobil sminket akarja akkor egyszerűen cseréli a sminket. Így nem kell a multisite sem, hiszen a user dönt a smink felől az pedig cserélhető ily módon is.

    ui: kísérlet képen egy új oldalamat eleve úgy terveztem meg, hogy ne kelljen mobil smink de mégis jól mutasson mobilon. Sajnos ezt kivitelezni meglehetősen nehéz mert bár mobilon elmegy rendes oldalon elég gány. Azonban ez is egy irány lehet.


    Utoljára módosítva: Dyra.. által : 2012-04-29 08:12

  9. #8
    Új tag
    Csatlakozott
    08-03-26
    Hely
    Székesfehérvár
    Hozzászólás
    5
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Weblap optimalizálása mobil eszközökre!

    Sziasztok, nekem is most ajánlottak a figyelmembe egy lehetőséget, mellyel nagyon könnyen és gyorsan meg tudod csinálni azt, hogy mobilbarát legyen a honlapod: partner.sanbizz.com



  10. #9
    Képszerkesztő Csurga logója
    Csatlakozott
    10-10-17
    Hely
    Hmvhely
    Hozzászólás
    1.108
    Begyűjtött 323 köszönetet
    211 hozzászólásával

    Alapbeállítás re: Weblap optimalizálása mobil eszközökre!

    Szerény véleményem szerint a külön aldomain alól indítható mobil verziók kora lejárt (úgy 2-3 éve). Csinálják még, én is látom a mai napig sok oldalnál. Szerintem (ha nem óriási látogatottságú a site) felesleges pénzlehúzás. Manapság a kódba implementált responsive kialakítás bőven megteszi. Ráadásul jóval költséghatékonyabb, mint bármi más. Sokan nem is szeretik, hogy "máshogy néz ki" a lap a különböző mobil eszközökön, mint egy normál monitoron. Úgy vélem, hogy a responsivitás elengedhetetlen lett, és bizony a régebbi oldalak tulajainak hamarosan dönteni kell majd, merre fejlesztik oldalaikat.

    Tovább menve egyébként hamarosan eljön az appok kora is, amikor egy-egy látogatott lapnak már szinte kötelező lesz kedvezni látogatóiknak egy android, vagy mac applikációval a kényelmesség kedvéjért. Mindegyik megoldásnak vannak előnyei és hátrányai, szerintem az applikációké a jövő és persze az igényesen kidolgozott responsive layoutoké. Az érintőképernyőt sem szabad kihagyni a képletből és persze hamarosan az óriás felbontásokat sem.


    "Galaktikus logók, arculat, weboldalak a KKV-számára!"
    stargeckos.com

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •