Szerző Téma: CMSMS honlap mobil verziója  (Megtekintve 5304 alkalommal)

Nem elérhető bojtia

  • Sr. Member
  • ****
  • Hozzászólások: 259
    • Kirándulababa
CMSMS honlap mobil verziója
« Dátum: 2012. Május 15. 14:03 »
Korábban máshol már szóba került, és szerintem elég fontos téma.
Hogyan készítsük el honlapunk mobil verzióját?
Gondolom, kell hozzá egy sablon, ami alkalmas mobilos megjelenítésre, és egy stíluslap. A honlapom oldalait ezekkel kell meghívnom. Vagyis kell egy aldomain?
Egyáltalán hogyan kezdek hozzá az egészhez?
Van valakinek tapasztalata a témában?

Nem elérhető efraim

  • Hero Member
  • *****
  • Hozzászólások: 859
  • közizgatási álomtitkár
    • efipage
Re:CMSMS honlap mobil verziója
« Válasz #1 Dátum: 2012. Május 15. 15:16 »
Nem hiszem, hogy aldomain kellene hozzá. Az megállapítható, hogy milyen böngészővel nézik az oldalt. Ha mobillal, akkor a mobilos template, ha más akkor a normál. Miután a mobilok kijelzői eltérő méretűek, a template-ban a méretezés csakis százalékosan értelmes.
Azért nézd meg ezt az oldalt is: http://www.klauskomenda.com/archives/2008/03/17/testing-on-mobile-devices-using-emulators/
« Utoljára szerkesztve: 2012. Május 15. 15:22 írta efraim »
Azért szőrös a szívem, hogy a szeretetet melegen tartsa

Nem elérhető Ian

  • Hero Member
  • *****
  • Hozzászólások: 766
  • Szőrmiszter :)
    • A Kos sziget Tanszék:)
Re:CMSMS honlap mobil verziója
« Válasz #2 Dátum: 2012. Május 16. 09:46 »
Idézet
Tény, hogy a telefonomon meg tudom nézni a "normál" oldalakat is, de az is tény, hogy egy 1024-re optimalizált oldalt állandóan scroll-ozni kell.
 Én azokat a tartalmakat szeretem ahol van mobil megjelenés. És főleg ilyen oldalakat látogatok. Sőt, egyre gyakrabban be sem kapcsolom a számítógépemet ha "csak" híreket olvasgatni akarok.
Nemrég beszélgettünk pont a felbontásról és ott abban maradtunk (ha jól emlékszem) hogy az 1024-s felbontásra szoktak már manapság optimalizálni. Ezek szerint minden weboldalhoz illene egy mobilra optimalizált verziót is készíteni? Ezt nem tudom hogy megy a gyakorlatban, de azt a statisztikánkban látom, hogy többen is mobilról nézik meg az oldalainkat.Van olyan teszt oldal (gondolom, hogy igen) ahol meg lehet nézni azt, hogy miként jelenik meg az adott oldal egy mobilon?

Nem elérhető silvertom

  • Hero Member
  • *****
  • Hozzászólások: 1 091
  • jó pap
    • weboldal készítés - weboldal karbantartás - seo - cms
Re:CMSMS honlap mobil verziója
« Válasz #3 Dátum: 2012. Május 16. 09:54 »
Nem volt még időm annyira kitesztelni a dolgot, amennyire szerettem volna. Egyenlőre csak gyűjtöm az infót...
Az első lényeg, kell egy script ami felismeri a böngészőt. Ebből is többféle van... A neten lehet találni.
Utána 2 féle megoldás van. Vagy "csak" a css-t cseréled le, ez nagyon könnyű a cmsms-ben egy smarty if-el.
Vagy csinálsz neki külön template-t.
Ez nem annyira egyértelmű dolog, mert a cmsms-ben alapból egy oldal egy template. Tehát kell egy template,
cserélgető modul. (régebben volt ilyen de elhalt.) Vagy "át kell verni a cmsms-t" és felülírni a template paraméter
az oldal betöltődése előtt.
Mindenképpen session-ban érdemes tárolni, hogy a látogató éppen mobil vagy nem, és biztosítani kell neki
a váltást is a két verzió között.
Itt tart nálam az elmélet, még nem raktam össze.
Hogy mondja doktor úr, elmehetek? NEM elmebeteg! - http://quadronet.hu - http://reszponziv-webdesign.hu

Nem elérhető bojtia

  • Sr. Member
  • ****
  • Hozzászólások: 259
    • Kirándulababa
Re:CMSMS honlap mobil verziója
« Válasz #4 Dátum: 2012. Május 16. 11:04 »
Elméletileg értem. Azért megcsinálni nem tudnám...
Várjuk a fejleményeket, ha már gyakorlati síkra jutott az ügy.

Én addig is ezt találtam:
http://www.i-do-this.com/blog/14/15/Make-your-CMSMS-website-Mobile-ready

Nem elérhető Doky

  • Full Member
  • ***
  • Hozzászólások: 141
Re:CMSMS honlap mobil verziója
« Válasz #5 Dátum: 2012. Május 16. 22:06 »
Elméletileg értem. Azért megcsinálni nem tudnám...
Várjuk a fejleményeket, ha már gyakorlati síkra jutott az ügy.

Én addig is ezt találtam:
http://www.i-do-this.com/blog/14/15/Make-your-CMSMS-website-Mobile-ready
Én ezt kipróbáltam, jól is nézett ki. DE! Utána semmilyen tartalmat nem tudtam felvinni. Teljes mértékben bezavarta az Admin felületet. Nem biztos, hogy ez másnál is ilyen lenne. Lehet, hogy sikerül jól megcsinálnia, de én inkább letettem róla...
Inkább én éljek, mint hogy más meghaljon!

Nem elérhető Doky

  • Full Member
  • ***
  • Hozzászólások: 141
Re:CMSMS honlap mobil verziója
« Válasz #6 Dátum: 2012. Július 18. 00:34 »
Sziasztok!
Találtam egy elég jó megoldást a mobil megjelenítésre:

http://designshack.net/articles/css-style-switcher/

Az eredmény látható a honlapomon: http://doky.weboldala.net

A menü felett lehet kiválasztani a "Mobil / látássérült nézet" opcióval.

Elvileg meg lehet vele oldani a szöveg méretezést is, de ahhoz ma már nem kezdek hozzá. Nekem kifejezetten tetszik, hogy nem magától vált át, hanem ki kell választani az opciót.
Inkább én éljek, mint hogy más meghaljon!

Nem elérhető silvertom

  • Hero Member
  • *****
  • Hozzászólások: 1 091
  • jó pap
    • weboldal készítés - weboldal karbantartás - seo - cms
Re:CMSMS honlap mobil verziója
« Válasz #7 Dátum: 2012. Július 18. 09:33 »
Ha jól értem akkor ez a css cserélő verzió.
Vagyis template-t nem cserélsz.

Nekem nem ismerte fel, hogy mobilról nézem.
Hogy mondja doktor úr, elmehetek? NEM elmebeteg! - http://quadronet.hu - http://reszponziv-webdesign.hu

Nem elérhető Doky

  • Full Member
  • ***
  • Hozzászólások: 141
Re:CMSMS honlap mobil verziója
« Válasz #8 Dátum: 2012. Július 18. 18:20 »
Nekem nem ismerte fel, hogy mobilról nézem.

Igen, mint írtam, nem felismeri a mobilt, hanem választható. Nekem így jobban tetszik, mert olyan formátumban nézhetem, ahogy szeretném.
Inkább én éljek, mint hogy más meghaljon!

Nem elérhető Razide

  • Full Member
  • ***
  • Hozzászólások: 116
    • Blogom
"When in doubt - fuck!"

Nem elérhető Doky

  • Full Member
  • ***
  • Hozzászólások: 141
Re:CMSMS honlap mobil verziója
« Válasz #10 Dátum: 2013. Február 06. 12:09 »
Sziasztok!
Találtam egy másik megoldást a fent említett problémára. Ez már felismeri a felbontást és ez alapján választja meg a megjelenítés módját.
A kód a következő:
Idézet
{literal}<script type="text/javascript">

function getcss(cssfile){

loadcss = document.createElement('link')

loadcss.setAttribute("rel", "stylesheet")

loadcss.setAttribute("type", "text/css")

loadcss.setAttribute("href", cssfile)

document.getElementsByTagName("head")[0].appendChild(loadcss)

}

if(screen.width <= '800')
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)

{

getcss('images/template/***/stylesheet_800.css')
// Defines the .css file you want to load for this range (800x600.css)

}



else if(screen.width > '800' && screen.width < '1280')
// This time we're targeting all resolutions between 800 and 1280 pixels wide

{

getcss('images/template/***/stylesheet.css')
//And we want to load the .css file named "1024x768.css"

}


else if(screen.width > '1024' && screen.width < '1600')
//Targeting screen resolutions between 1024 and 1600px wide

{

getcss('images/template/***/stylesheet.css')
//Load 1280x1024.css

}



else

{

getcss('stylesheet.css')
//This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css

}

</script>{/literal}
Ez csak a .css fájlokat cseréli, de már haladás...
Remélem jó lesz. Nekem működik!
Inkább én éljek, mint hogy más meghaljon!

Nem elérhető zoltan

  • Full Member
  • ***
  • Hozzászólások: 89
    • Royal Webdesign
Re:CMSMS honlap mobil verziója
« Válasz #11 Dátum: 2015. Február 01. 06:14 »
Szia!

Ha még aktuális a téma, akkor lentebb két megoldás:

1. megoldás
Ha ügyesen kódolsz CSS-ben, akkor szinte gyerekjáték egy responsive oldal felépítése. Javaslom, hogy a mobil, tablet, desktop megjelenéseket CSS-el írd le, egy sablonra. Ezt a CSS3 media query-vel tudod megoldani.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

2. megoldás
Illetve van egy másik megoldás is. Ez szerintem egyszerűbb lehet, mivel a logika már fel van építve, csak át kell bogarászni és meg kell érteni (bár én szeretem az 1. megoldást is alkalmazni). Ez nem más, mint a bootsrap. Itt oszlopokba rendezed az oldalad, melynek 1 egységnyi oszlopok összegéből összesen és mindig 12 egység oszlop szélesnek kell lennie (csak, hogy gyors megértsük). Itt az oszlopok a HTML kódban kapnak egy-egy osztályt, melyek jeölik az oszlop "egység-számát" és annak viselkedését. Nem bonyolult és a hivatalos oldalán pedig komplett dokumentációt találsz.

Itt az oszlopok alkalmazkodnak az aktuális eszköz megjelenési felültének méretéhez/felbontásához. Itt már nem kell a responsive oldalát megírni CSS-ben, csak a dokut kell tanumányozni.
http://getbootstrap.com/

3.megoldás
Fizetős sablon

4. megoldás
Webdesigner megkeresése

Ha egyedi oldalt szeretnél és magad kódolnád, úgy nem érdemes pluginokkal, generátorokkal bajlódni, mert nem lesz az a végeredmény, amit szeretnél.

Remélem, hasznos infók voltak!
Üdv,
Z.