Přizpůsobte webovky všem typům zařízením-návod jak na to!

Diskuze o našem webu nebo fóru a možnostech jejich vylepšení
Odpovědět
Zpráva
Autor
Uživatelský avatar
sluplik
Příspěvky: 12
Registrován: 01 lis 2012, 20:12
Bydliště: Plzeň

Přizpůsobte webovky všem typům zařízením-návod jak na to!

#1 Příspěvek od sluplik » 20 bře 2013, 12:20

Velký problém těchto webovek je nepřizpůsobení obrazovky a tím donucení rolování všemi směry pro viditelnost prvků, které hledám. Proto jsem hledal způsob jak optimalizovat tyto stránky a nejjednodušším způsobem ( skoro bez práce ) uplatnit změny v praxi.

Veškerý trik pro přizpůsobení stránek různým zařízením ( jako je mobil, čtečka, PC, NTB, Tablet ... s různým rozlišením) je v CSS stylech.


Zde je ukázka webu v kterém jsou již uplatněny změny pro přizpůsobení zobrazování stránky :
http://css-tricks.com/examples/Resoluti ... le-one.php

stránku si zkuste libovolně zmenšit, či zvětšit a nebo ji otevřete jiným zařízením a zjistíte jak se přizpůsobuje ....
Tato stránka má tyto parametry:
nejmenší okno je nataveno na hodnoty: 700px a méně
prostřední okno je nastaveno na hodnoty: 701 - 900px
největší okno je nastaveno na hodnoty: větší než 901px

číselné hodnoty samozřejmě lze změnit dle vaší představy . Jsou jakýmsi ohraničením velikosti internetového prohlížeče a pokud se dostanou do předefinovaných hodnot uplatní změnu velikosti.

v praxi to vypadá ve zdrojovém kódu takto:

<head>
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
</head>


kde např. v prvním odkazovaném stylu s názvem narrow se řeší hlavně vycentrování stránky, dle hlavních hodnot ....
body { background: #333; }
#page-wrap { width: 548px; }
#page-wrap:after { content: "Narrow Layout"; }
#secondary-two { display: none; }


Zde jsou soubory ke stažení šablon ukázkové stránky, podle které se dají uplatnit změny pro webovky LinuxMintu : http://css-tricks.com/examples/Resoluti ... Layout.zip

a tu je zdroj z kterého jsem hlavně vycházel a je tu i mnoho užitečných triků jak posunout webovky do 21.století ...
http://css-tricks.com/resolution-specific-stylesheets/
Přílohy
ukázka_prizpusobeni_oken.jpg
Pokud budete soudit rybu podle její schopnosti šplhat na strom, tak bude celý život věřit tomu, že je hloupá. "Albert Einstein"

admin

Re: Přizpůsobte webovky všem typům zařízením-návod jak na to

#2 Příspěvek od admin » 20 bře 2013, 14:18

Hezký návrh, leč já to zase za "skoro bez práce" nevidím. Něco jiného je toto provádět na statickém webu a něco jiného v šabloně wordpressu. To bez práce prostě nebude a jedná se o dost velký zásah do kódu. Jinak moc webů z "21. století" jsem tedy ještě neviděl. Z těch co se týkají linuxových dister alespoň o žádném nevím. Roluje se téměř všude. Já osobně si na tuto úpravu netroufám. Je-li zde někdo kdo ano, nechť se ozve a můžete to vyzkoušet na testwebu.

ulo
Poradce Mintu
Příspěvky: 481
Registrován: 31 říj 2012, 16:08

Re: Přizpůsobte webovky všem typům zařízením-návod jak na to

#3 Příspěvek od ulo » 21 bře 2013, 09:13

satapouch píše: ... To bez práce prostě nebude a jedná se o dost velký zásah do kódu ... někdo ... se ozve a můžete to vyzkoušet na testwebu.
Souhlasím a z důvodu nedostatku času a lidských zdrojů na tuto rozsáhlejší úpravu - opět bychom to totiž dělali jen ve dvou lidech ve volném čase a jsme holt již pánové od rodin - navrhuji, aby případnému zájemci (popř. zájemcům) na dodělání mobilního obsahu, byl poskytnut obsah našeho css stylu, kde lze vyčíst potřebné jména tříd css a další údaje, které budou potřeba předělat. Zbytek, jako zakomponování nového stylu pro mobil do WP, bychom už udělali sami (popř. jak tu bylo již navrženo na testovacím webu by mohl klidně zájemce vše udělat sám). Díky za pochopení.
LinuxMint 17.3 KDE (64b) - AMD Athlon II X2 270, MB ASUS M5A78L LE, RAM 8 GB, ATI Radeon HD4350
LinuxMint 17.3 KDE (32b) - DELL Latitude D530

Odpovědět