Kódování z hlavicka.xf.cz/1.png do HTML

Mr.Dr = Vasek.H
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=24&topic=100996

Vskutku. Duplicitní vlákno, zamykám, smažu.
Zase odemykám.

Reaguji na Vaska.H:
Používej prosím jen jednu přezdívku a piš s diakritikou.

Stejně si myslím, že jsi to mohl dát do jednoho dotazu. je jasný, že když už se ti to povedlo rozřezat (povedlo?), budeš s tím chtít dělat něco dál.
Photoshop (ImageReady) ti to nařeže, ale když e na to dívám, možná budeš potřebovat pouze 6 obrázků. Teď nevím, jak je to s průhlednými obrázky na webu, takže kdyžtak poraďte někdo jiný - zatím tedy jen úvaha:

"MyBlog" - svislý obrázek s průhledností
"Domů", "O mě", "Články", "Ostatní", "Odkazy" - 5 tlačítek - to rozřezat zvládneš, určitě, "přinejhorším" si otevřeš "1.png" a uložíš ho jako "domu.png" resp. "domu.jpg", vybereš oblast "Domů", vytáhni si vodící linky a snaž se tomu dát přesné rozměry, minimálně ať jsou ta tlačítka pak stejně vysoká, nástrojem "Nástroj obdélníkový výběr (M)" ho obkresli a následuje "menu/obraz/oříznout". Zůstane před tebou na ploše červené "tlačítko" domů. Ulož (ideálně Ctrl+Alt+Shift+S - uložit pro web) a udělej to samé s ostatními.

Pak ti doporučuji udělat znovu text MyBlog a uložit to s průhledným pozadím. Proč? Protože ostatní věci už uděláš pomocí css. Tedy, promiň, budeš ještě potřebovat malinký obrázek pozadí, odhadem 4x4 pixely, ten ulož jako ".gif" a pojmenuj ho např. "bg.gif" nebo "pozadi.gif" nebo cokoliv. Ten pak použiješ v css souboru jako pozadí k prvku body, on se ti hezky rozkopíruje a to šrafování ti udělá.

Bílou barvu v "těle" pak jednoduše zapíšeš přes css.

Až to budeš mít hotové, nahraj to někam a poradím(e) ti jak dál. Pavel

pk11:
„Teď nevím, jak je to s průhlednými obrázky na webu, takže kdyžtak poraďte někdo jiný“
Úplně průhledné v pohodě, s částečnou průhledností (alfa kanál) čekáme až zmizí IE6.

Joker
Ok, díky, takže zbývá otázka - .gif nebo .png?

Vasek.H
- nevidíš, že je logo hnusně zubaté?
- u každého položky menu stačí jen 1px background opakující se po ose.

Vasek.H
„a mám tam spoustu chyb“
ano, máš pravdu.

Vše ce necpe do divů, blokový element (div) nepatří do řádkového (ve tvém případě odkaz), atd atd. Doporučuji nastudovat si základy HTML (jakpsatweb.cz).

Pozadí u odkazů jsem psal, že se může opakovat 1px obrázek, text na něm má být jako text, nikoliv na obrázku. Zkus si schválně vypnout obrázky, (ne)uvidíš sám.

Nemá cenu ti všechno vypisovat, raději si nejprve něco přečti, bude to pro tebe i nás lepší.

Díval jsem se na tvůj kód a zejména css soubor se mi moc nelíbí, bohužel nemám nyní tolik času, abych ti vysvětloval, v čem, podle mého názoru, děláš chyby, ale ukážu ti, jak bych to "řešil" já a ty porovnej oba kódy a pak se jednoduše můžeš (postupně) ptát na důvod rozdílů. Navíc ani já nejsem neomylný (k sažaljeniu) a musím se, někdy těžce, učit z chyb a třeba se něco nového naučím. například od panther, který pravdu má, omlouvám se, přemýšlel jsem "napůl" :-)
index.html
index.css
Zatím je tam pouhá "kostra", bude se to dnes "rodit"... :-)


nelíbí se ti (vám) to černé pozadí více?
zbývá ještě nastylovat horizontální odsazení textu, já musím běžet se psy, takže až se vrátím (:|)


panther... blokový element (div) nepatří do řádkového (ve tvém případě odkaz), atd atd....
ze řádkového elementu si můžeš udělat blokový, kdy se ti zamane
pokud vím, proti "pravidlům" - validita, slušná webařina - to není
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.numerouno.cz%2Fvasek-h%2F&charset=(detect+automatically)&doctype=Inline&group=0
použil jsem prvek <a> "zblokoval" jsem ho :-)
Mám tam jeden prohřešek proti SEO (černý text - byl jsem líný přemýšlet) a jeden nadbytečný <div id="obal">. Šetřím svým časem :-)

Vasek.H
„z-index: 1; co to přesně to způsobuje?“
z-index nastavuje, který ze dvou pozicovaných elementů bude výše, budou-li se překrývat.

pk11
„ze řádkového elementu si můžeš udělat blokový, kdy se ti zamane “
ano. Řádkový prvek se bude chovat jako blokový, nic to ovšem nemění na tom, že je řádkový a že blokový element v něm nemá co dělat.

panther ano, čekal jsem podobnou reakci. enchci startovat žádný "flame", ani tě nekritizuji, kritizuji pouze tvou argumentaci, konkrétně ....a že blokový element v něm nemá co dělat..... krása toho je právě v tom, že může. V tom je krása nových standardů, prostým jedním jediným zápisem mu dodáš novou vlastnost a - o nic jiného v tomto případě nejde - ušetříš kód! A když už je ejdnou blokový, můžeš do něj přeci "cpát" cokoliv, jako např.ten <span>, který má učinit, aby se "vlk nažral a koza zůstala celá". Tedy, text (SEO) tam je a je překrytý obrázkem. Poprvé jsem pracoval s průhledným obrázkem, proto jsem "zašvindloval" a udělal tomu (nyní už blokovému :-) ) prvku černý text. Čekám, jestli si Vašek neoblíbí černé pozadí, pak by mohl obrázek změnit na neprůhledný nebo na nějaký nápad či řešení někoho jiného...

Reaguji na pk11:
„konkrétně ‚....a že blokový element v něm nemá co dělat.....‘ krása toho je právě v tom, že může.“
Rozdělení na řádkové a blokové elementy v HTML 4 nelze ovlivnit kaskádovými styly. Můžeš ovlivnit zobrazení elementu, ale ne jeho účel v kontextu. Např. <table> je blokový, i když má výchozí „display: table“, a <ins> není řádkový, i když má výchozí „display: inline“.

„V tom je krása nových standardů“
Které jsou více jak deset let staré :-)

„Mám tam jeden prohřešek proti SEO (černý text - byl jsem líný přemýšlet)“
Proč je ta barva prohřeškem proti SEO? Nevidí snad vyhledávač v kódu stejný text, jako je na obrázku?

Nastavuješ obsahovým blokům výšku, což není dobrý nápad.

„blokový element v něm nemá co dělat“
V řádkovém elementu nemá blokový element co dělat, to platí pro HTML.
V CSS můžu řádkový element deklarovat jako blokový, ničemu to nevadí, CSS je prezentační vrstva.
Přiznávám, že dříve jsem to taky nechápal a ptal jsem se na tohle.

Dodatek: Koukám, že Chamurappi napsal v podstatě totéž jinými slovy.

Chamurapi a Bubáku:

"... HTML 4..." - doporučuji (už od rána) Václavovi XHTML Transitional viz Odkaz Nebo mi chcete říct, že XHTML už je 10 let staré?
Sémantika, ano, asi by bylo správnější něco jako <h1>...<h2>...<p>... ale tohle je trochu jiný případ. Prostě jsem použil prvek <a> protože na tom logu "zadavatel" chce mít odkaz, nastyloval jsem jej (resp.je - spolu s tím <span>) a webík je validní. OK - co se stane, pokud budou vypnuté styly, je otázka. Až budu mít pár minut zase "na hraní", pak to zkusím. Nyní jsou tam dva prvky, které se "narodily" řádkové a já jsem je "naučil" jak býti blokové. Řešení <div id="MyBlog><a href=".."> je možná, jakoby správnější, ale, pokud budeš chtít dosáhnout stejného efektu se skrýváním textu, a samozřejmě chceš kurzor ruky nad celým obrázkem, jak to jinak uděláš? Dostaneš se zase k <a> a <span> a budeš je chtít v bloku a napixel s obrázkem...
Barva textu. Když jsem udělal výše zmíněné s divem MyBlog, obrázek je průhledný, tedy mi pod ním prosvítal ten text - řešení jsou min.2: zakázat mu zobrazení (display: none;) a to by měl google stále minimálně prozkoumávat a možná penalizovat anebo to, co jsem učinil (color: black;), ale jaká je asi šance, že googlebot nepozná "rozdíl" mezi zápisy #000 pro prvek <body> a black?

Chamurapi:
Nastavuješ obsahovým blokům výšku, což není dobrý nápad.
Ano, prostě jsem to trošku ošidil, tobě patří dík že sis toho všiml :-)


pardon, ještě poznámka: Anebo se bavíme v rovině, co je "správňácké" a co je "správňáčtější". Pokuste se mi vysvětlit, kdy s tímto svým řešením narazím na kámen? Je někde výslovně specifikováno (W3C XHTML), že se to NESMÍ nebo alespoň NEDOPORUČUJE? Můj argument, ušetřil jsem pár znaků kódu, oproti pár znakům přidaným. Navíc .css soubory se častěji cachují, což u .html nemusí být chtěné. Děkuji, Pavel


Chamurapi
„V tom je krása nových standardů“
Které jsou více jak deset let staré :-)
ok, omlouvám se ano, zápis by mohl chytrému napověědt a hlupáka trknout :-)
nyní vím, že jsi zdroják viděl, pardon...

Reaguji na pk11:
„Nebo mi chcete říct, že XHTML už je 10 let staré?“
Chtěl jsem říct, že HTML a CSS jsou staré víc jak deset let.
Specifikace XHTML 1.0 oslaví desáté narozeniny za tři měsíce, ale to žádnou novinku ve stylování nepřineslo.

„doporučuji (už od rána) Václavovi XHTML Transitional“
Tam platí přesně totéž, XHTML 1 je odvozené od HTML 4, má jen jinou syntaxi. Tvůj kód stejně berou prohlížeče jako HTML. To navíc, co by z něj mělo dělat XHTML, vesele ignorují. Buď vítán v reálném světě.

„jaká je asi šance, že googlebot nepozná "rozdíl" mezi zápisy #000 pro prvek <body> a black?“
Googlebot obvykle nestahuje CSS, takže neuvidí, že člověk rozdíl neuvidí.
Nekalou praktikou je, pokud člověk (na obrázku) vidí něco jiného než robot (v kódu). Selský rozum mi našeptává, že by nemělo záležet na tom, jakou techniku překrytí textu obrázkem použiješ.

„Je někde výslovně specifikováno (W3C XHTML), že se to NESMÍ nebo alespoň NEDOPORUČUJE?“
Ne. Píše ti snad tady někdo, že se to nesmí nebo alespoň nedoporučuje? :-)

vypnout styly je otázka 3 vteřin :-) pro mě novinka, Mozzila "Zobrazit / Styl stránky / Bez stylu". Web je čitelný - nahoře
, pak menu a pak obsah. Tím, že je obrázek skrytý pomocí .css, nekazí tak "čistou" stránku bez stylů. Obrázky v textu se pak samozřejmě budou vkládat jako tagy <img /> a čtenář blogu je uvidí...


Prvek, o kterém se tu bavíme (<a id="MyBlog>) by se mohl udělat jako <h1>, mám osobně raději dávat <h1> jako nadpisy jednotlivých sekcí a/nebo jako nadpisy článků (SEO). Riskuji tím sice špatné pořadí nadpisů, v tomto případě nevím, rozhodně to není kdovíjak velký přestupek vůči sémantice resp.validitě webu.

Položka menu by z toho mohla být (a napozicovaná, ano), ale mě to tam právě kontextově tak trochu "vystupuje z řady" (a pak to logicky "vystupuje z řady" při vypnutých stylech...)


Chamurapi

Ne. Píše ti snad tady někdo, že se to nesmí nebo alespoň nedoporučuje? :-)
Ne. Píšou mi tady všichni (kecám, jenom ty a panther a možná Bubák), že se to NEmůže já se snažím oponovat se svým JOmůže :-) a předkládám své (proti)argumenty

Googlebot obvykle nestahuje CSS
Díky za optimismus :-) Žil jsem v tom, že stahuje a že, samozřejmě, porovnává. Pokud to nedělají, doporučil bych jim to dělat. Ale, co se týče vztahu ke Googlu, jsem trochu paranoidní. Podle mého i tvého názoru je OK, když obrázek a text spolu souvisí, to v "Božském Algoritmu" podle mě ještě neví. Pak: robot nabonzuje weby, u kterých barva textu odpovídá barvě pozadí. Někdo, živý, to prověří, ideálně člověk, mluvící "deklarovaným" jazykem (lang="cs"). Koukne na to, řekne, OK nebo KO. Kolik google indexuje denně nových, česky psaných webů a kolik na to má onen dotyčný času si netroufám odhadovat.

Specifikace XHTML 1.0 oslaví desáté narozeniny za tři měsíce, ale to žádnou novinku ve stylování nepřineslo.
Možná to teď nechápu úplně správně, podle mého názoru přineslo. Možnost "rozšíření schopností" prvků, konkrétně "naučit" řádkový prvek, aby se choval jako blokový, aniž bych za to dostal varování od validátoru, je přínos. Živím se, usuzuji že ty také, webařinou a občas moji klienti validitu vyžadují. A je dobré si ji dát do "desatera", tedy snažit se ji dosáhnout VŽDY.

sám na sebe
Možná to teď nechápu úplně správně, podle mého názoru přineslo.
Beru zpět, dělám tu ze sebe hlupáka :-) "Nasimuloval" jsem chybu - ponořil jsem <div> do <span> a Samozřejmě, že validátor na mě křičí : "Už se ti to na diskuse.jakpsatweb.cz nějakou chvilku pokoušejí vysvětlit, ty jelítko" :-)))

„Tím, že je obrázek skrytý pomocí .css, nekazí tak "čistou" stránku bez stylů.“
Při vypnutých obrázcích je stránka pokažená, návštěvník "vidí" černý text na černém pozadí. Přitom tuhle situaci jde jednoduše ošetřit:
- pro #MyBlog deklarovat třebas bílou barvu textu
- pro #MyBlog span deklarovat background: #000 url("./grafika/myblog.png")

„ to by měl google stále minimálně prozkoumávat a možná penalizovat“
Vyhledávače nekalé praktiky penalizují na základě udání. Nerozlišuje se, jaká technika byla použita.
Pokud je na obrázku stejný (některé vyhledávače dovolují i podobný) text, jako je na obrázku, nejde o nekalou praktiku a není důvod k penalizaci.

Bubák
Vyhledávače nekalé praktiky penalizují na základě udání.
Osobně to slovo nemám rád, ale je to jistě efektivní řešení. Počet "udání" bude určitě řádově nižší než počet zaindexovaných webů. Doufám jen, že tam nesedí nějaký "flákač" a skutečně to inteligentně posoudí. někde jsem četl, že komunikace se zaměstnanci Googlu je něco podobného jako např.komunikace s UPC (alespoň kdysi to bylo na pilulky), ale to je čistě má spekulace a berte ji jako "obhajobu mé paranoi" :-)) S googlem komunikuji pouzepřes jejich API (Anylytics, Adwords etc...)

Vašku, v rychlosti:

a) ten první <a> (Home) a ten <span> ? Možná tam být nemusí, u dalších položek už totiž není...
b) používej lepší sémantiku, pro menu tagy <ul> a pak <li><a>něco, pravděpodobně bez "spanu"</a></li> a nebo <menu> se stejným pokračováním

soubor "styly.css" : zdá se, že je menší, že? Podtrháváš H1 - doporučuji podtrhávat v textu pouze <a>text uvnitř tohoto tagu </a> a nic jiného...

otázka pro všechny: používám k .css deklaracím zkrácený zápis tedy:

oproti


Existují nějaké důvody pro dlouhý zápis? Tedy např. rychleší parsování...

Reaguji na pk11:
„Někdo, živý, to prověří, ideálně člověk, mluvící "deklarovaným" jazykem (lang="cs").“
Asi tam někdo živý, kdo textu porozumí, bude, ale neexistuje žádný důkaz, že by Google (nebo jiný prohlížeč) zohledňoval deklaraci jazyka. Používá heuristiku.

„Živím se, usuzuji že ty také, webařinou a občas moji klienti validitu vyžadují.“
Sice mě to neživí, ale ke mně vlastně také chodí hodně lidí, kteří validitu vyžadují.

„je dobré si ji dát do "desatera", tedy snažit se ji dosáhnout VŽDY“
Děkuji za radu, ale vím své a v desateru mám tucet zajímavějších cílů.

„Existují nějaké důvody pro dlouhý zápis?“
Ne. Ale dílčí vlastnosti se hodí, pokud chceš přebít část vlasností ze zkráceného zápisu a nenastavit při tom ty ostatní na výchozí hodnoty.


Reaguji na Vaska.H:
Proč „Home“? Jsi Čech? Jestli ne, proč máš většinu menu česky?

Chamurapi

Díky, nechci tě poučovat, vídám tu tvůj nick už dlouho a proto to ber(me) jako radu ostatním, méně zkušeným, než my dva dohromady :-)

Validace vaškova webu tvým sw - mimochodem gartuluji

Tvou kritiku W3C si velmi rád přečtu. Lépe pak (snad) pochopím, proč říkáš věci jako "Specifikace XHTML 1.0 .... žádnou novinku ve stylování nepřineslo."

"...dílčí vlastnosti se hodí, pokud chceš přebít část vlasností ze zkráceného zápisu a nenastavit při tom ty ostatní na výchozí hodnoty."
Rozhodně souhlasím a použil jsem to. Moje .css má 115B, [url= Vaškovo 2,4kB] Vaškovo 2,4kB[/url]

Chamurappi
nářez, budu to raději analyzovat někdy později.... :-)