| Autor | Zpráva | ||
|---|---|---|---|
| Mufna Profil |
#1 · Zasláno: 5. 12. 2008, 18:01:44 · Upravil/a: Mufna
Zdravím Vás. Když si z webu http://www.seznamzbozi.cz zkusim normálně (přes pravou myš) uložit pozadí, uloží se mi jeden png obrázek obsahující všechny grafické prvky na stránce. Rozumím docela dobře CSS, ale nechápu, jak bych z tohohle komplexního obrázku styloval pozadí, hover efekty apod. tak, aby se ty elementy vyskytovaly na těch místech webu, kde se v tomto případě vyskytují.
EDIT: No možná by to stylovat asi šlo, ale teda dost drsně, ta přesná pozice u backgroundu, kdo by se s tím měl počítat. EDIT 1: No vlastně asi nešlo, to by se to pohlo komplet (a to se na tom webu komplet nehejbe) |
||
| joe Profil |
#2 · Zasláno: 5. 12. 2008, 18:04:22
Zkus poslat odkaz přímo na obrázek, nevím kde ho mám teď hledat.
|
||
| Mufna Profil |
#3 · Zasláno: 5. 12. 2008, 18:06:46
joe
Nevím jak Ti poslat odkaz, prostě když na tom webu budeš, klikni třeba nahoře v šedý liště pravou myší a ulož pozadí. Jmenuje se to "sprite-index-ie.png" |
||
| joe Profil |
#4 · Zasláno: 5. 12. 2008, 18:10:30
Už jsem to uložil v IE.
„Rozumím docela dobře CSS, ale nechápu, jak bych z tohohle komplexního obrázku styloval pozadí“ Přes position u backgroundu. Je to celkem jednoduché a efektivní řešení, i když někdy trvá déle, než se to jak píšeš - spočítá. Výhoda je ta, že se ti to zobrazí téměř všechno najednou. Stejně to mají třeba i na digg.com ;) |
||
| Plaváček Profil |
#5 · Zasláno: 5. 12. 2008, 18:12:45 · Upravil/a: Plaváček
joe
„Výhoda je ta, že se ti to zobrazí téměř všechno najednou.“ Při nepříliš šikovném použití se ale projeví i nevýhody. To jsi zapomněl zmínit a uvedený web je toho zářným příkladem :) |
||
| joe Profil |
#6 · Zasláno: 5. 12. 2008, 18:18:05
Plaváček
Uvědomil jsem si to až po odeslání a byl jsem línej to znovu editovat, tak to napíšu :) Pravděpodobně narážíš na zvětšování písma. Mufna Jinak kdybys nad tímhle způsobem uvažoval někdy, musíš si uvědomit, aby při zvětšení písma se ti neopakovaly některé obrázky. Třeba na tom digg, tam jim to taky zrovna moc nevychází při největším písmu v IE :) |
||
| Mufna Profil |
#7 · Zasláno: 5. 12. 2008, 18:18:07
joe
Přes position u backgroundu. To teda ale bude docela krkolomný, ne ? Třeba co nechápu jsou ty vlajky umístěný nahoře (na webu jsou dole. Chápu jediné, že jeden jediný obrázek zrychlí načítání stránky. Je na to nějaký link s vysvětlením ? |
||
| DoubleThink Profil * |
#8 · Zasláno: 5. 12. 2008, 18:18:31
Vyplatí se to u webů s velkou až obrovskou návštěvností. Digg je dobrý příklad. Šetří se tak počet spojení se serverem.
|
||
| joe Profil |
#9 · Zasláno: 5. 12. 2008, 18:21:15
Mufna
Aby to bylo správně s vlaječkama, správně by měl být v odkazu ještě <span> s přesnými rozměry té vlajky a teprve do toho spanu dát na pozadí vlajku... Jinak vlajky jsou v obrázku úplně vpravo, stačí tedy s obrázkem "pohnout" vpravo a pak už jen posun po ose Y. |
||
| Plaváček Profil |
#10 · Zasláno: 5. 12. 2008, 18:22:54
Mufna
Ušetří se http požadavky a tedy komunikace se serverem. Ale vždy je něco za něco, sníží se tím použitelnost a především přístupnost webu, protože v tomto řešení se nepočítá s vypnutýmí obrázky (mám-li totiž obrázek na pozadí nějakého elementu a zvolenou barvu písma, je nutné nastavovat i barvu pozadí). Uznávám ale, že v určitých případech a pokud kodér ví, co dělá, může být uvedená metoda prospěšná. |
||
| Mufna Profil |
#11 · Zasláno: 5. 12. 2008, 18:23:07
Plaváček, joe
Jo, tý nemožnosti zvětšit písmo jsem si taky všimnul, to mi u takovéhoto, řekněme jinak dle mě dobře zpracovaného (soudím vizuálně + obsah), webu taky přijde jako prohřešek. |
||
| Plaváček Profil |
#12 · Zasláno: 5. 12. 2008, 18:27:53
Mufna
No, upřímně, mně to jako dobře vizuálně zpracovaný web nepřipadá a obsah jsem dopodrobna nezkoumal. Ale nejsme v sekci kritika webu a odpověď jsi dostal. Můžeš to tu zamknout. |
||
| Mufna Profil |
#13 · Zasláno: 5. 12. 2008, 18:28:56
Hm, myslím, že už to asi chápu. Nejdřív mi nebylo jasný, jak můžu na X místech jedný stránky pohnout s jedním obrázkem tak, aby se mi někde neobjevily ty části, který tam nechci.
|
||
| Mufna Profil |
#14 · Zasláno: 5. 12. 2008, 18:42:47
DoubleThink
Šetří se tak počet spojení se serverem. Můžeš mi říci jak ? Když bude obrázků více, vadí to ? Myslím to v situaci, kdy se ty obrázky budou opakovat i na podstránkách, tzn. zůstanou v keši prohlížeče a nic se už nemusí načítat znovu - myšleno grafické prvky, ne třeba fotky produktů |
||
| Plaváček Profil |
#15 · Zasláno: 5. 12. 2008, 18:47:59 · Upravil/a: Plaváček
Mufna
Při první návštěvě každého webové stránky se musí načíst komplet všechno. Jedná se tedy o prvotní minimalizaci opětovných dotazů na server. Při návštěvnosti v řádech milionů návštěvníků denně to už hraje velkou roli. Keš prohlížeče vstupuje do hry až poté a příliš velký spoleh na ní také není. Jenže to už je jiné téma. |
||
| Mufna Profil |
#16 · Zasláno: 5. 12. 2008, 18:48:10
Plaváček
Hm, při vypnutých obrázcích jde horní menu do kopru. To by ale možná stačilo jen podbarvit, ne ? |
||
| Plaváček Profil |
#17 · Zasláno: 5. 12. 2008, 18:50:01
Mufna
„Hm, při vypnutých obrázcích jde horní menu do kopru. To by ale možná stačilo jen podbarvit, ne ?“ Ano. |
||
| Filo Profil |
#18 · Zasláno: 5. 12. 2008, 19:15:33 · Upravil/a: Filo
s jedním obrázkem funguje i YouTube
|
||
| DoubleThink Profil * |
#19 · Zasláno: 5. 12. 2008, 19:39:53
„Můžeš mi říci jak ? Když bude obrázků více, vadí to ? Myslím to v situaci, kdy se ty obrázky budou opakovat i na podstránkách, tzn. zůstanou v keši prohlížeče a nic se už nemusí načítat znovu“
U malých položek (ikonky typicky) zvětšuje HTTP režie nároky na přenos o stovky procent. Keši se sice věřit celkem dá, ale standardně nastavené browsery ji taky nepoužívají úplně slepě - tj. dělají často revalidaci (dotazem If-None-Match nebo If-Modified-Since). U takto malých objektů je to prakticky totéž, jakoby si je načetly znovu a výkon serveru je spotřebován úplně stejně. U webu jako je YouTube může takováto (jednoduchá) optimalizace ušetřit značnou část výkonu. |
||
|
Časová prodleva: 15 let
|
|||
0