Latwa przesiadka z IE/OE na *birdy

[nikdo]

a nie powinno być przypadkiem

"Na podstawie artykułu Jamiego Zawinskiego:"

tak to zdecydowanie lepiej brzmi...

wadim

[Pitreck]

MSZ dziwna polska odmiania, jeszcze dziwniejszego zagranicznego nazwiska.
No ale niech sie ktos jeszcze wypowie....

[nikdo]

jakiego tam zagranicznego Zawiński to zagraniczne?

ale tak czy siak odmienia się np. George'a Busha i nikt przecież nie pisze o "przemówieniu George Bush"

a to "Bayesiański" to też mi jakoś kiepsko brzmi...

ale ogólnie tekst jest fajny i będzie przydatny

pozdraw,
wadim

[Pitreck]

OK, przekonales mnie. Poprawione

[Pitreck]

Poczesci natchniony wizyta Klapka i jego kursem CSS, poczesci z nudow i bezsennosci, urodzilem cos takiego.

Jest to tlumaczenie latwej przesiadki na Fb, tyle ze tym razem w xHTML + CSS. Wejdzcie, pobawcie sie, poprzelaczajcie style (przesiadka 2). Powiedzcie jaki uklad jest waszym zdaniem najlepszy.

---EDIT---
-Usunalem szare style, niepasowaly mi
-Dodalem separator miedzy tlumaczenie a creditsy, teraz chyba wyglada to lepiej (przesiadka2 i przesiadka_tb)
-Wrzucilem tez tlumaczenie przesiadki na Tb (2 style do wyboru).

PS. To moja pierwsza samodzielnie zrobiona strona w xHTML z CSSesem, w dodatku zrobiona w notatniku a nie zadnym edytorze WYSIWYG. Jeeee, musze to oblac

---EDIT 2---
URLe usuniete, tak samo jak pliki na serverze. Podmienilem nimi starsza wersje przesiadki.

[Taeril]

Zakładając, że ktoś to będzie przeglądać w IE....
Chyba IE źle wyświoetla kropkowane obramowania a napewno z jakimiś sobie nie radził...
IE chyba nie rozumie alternatywnych stylów - przydałby się zmyśłny Javascript do tego... http://www.alistapart.com/stories/alternate/ albo poszukaj stronki marcoosa, bo on to stosował

mi się tam podoba stronka i tylko może wywalilbym obramowanie obrazków (stylami) ale z drugiej strony sugeruje ono odsyłacz... W sumie stronka ładna i przejrzysta i wygodnie się czyta (jeszcze śpię to tylko tak okiem rzuciłem )
No i strona się waliduje ale style nie ( I/O Error: Invalid byte 1 of 1-byte UTF-8 sequence. )

hmm a może jeszcze rzucić linkiem do dodatków dla FB? choć to wykracza poza temat to mogłoby kogoś zainteresować, że może więcej i...

[Pitreck]

Zakładając, że ktoś to będzie przeglądać w IE....
Chyba IE źle wyświoetla kropkowane obramowania a napewno z jakimiś sobie nie radził...

To nie jest kwestia obramowania. On poprostu inaczej intepretuje wielkosc i polozenie takich (jakby to nazwac) pol, przez co gorny napis troche sie rozjezdza. Jeszcze sie tym pobawie, moze uda mi sie wsadzic jakis kod tylko dla IE.

IE chyba nie rozumie alternatywnych stylów - przydałby się zmyśłny Javascript do tego... http://www.alistapart.com/stories/alternate/ albo poszukaj stronki marcoosa, bo on to stosował

W finalnej wersji tych stron raczej nie bedzie wyboru arkusza stylow.
Wsadzilem to tylko po to by osoby interesujace sie tym watkiem mogly ocenic jaki uklad jest tu najlepszy (obrazki po lewo, czy posrodku, ...).

mi się tam podoba stronka i tylko może wywalilbym obramowanie obrazków (stylami) ale z drugiej strony sugeruje ono odsyłacz...

Nie mam pojecia jak to sie zrobilo. Ja samym obrazkom obramowania nie dawalem. Jeszcze za malo znam CSSa, ale poglowkuje nad tym.

No i strona się waliduje ale style nie ( I/O Error: Invalid byte 1 of 1-byte UTF-8 sequence. )

Sprawdzilem wszystkie style zanim opublikowalem tutaj linki, po przeczytaniu twojego posta sprawdzilem jeszcze raz. Efekt ten sam:

"No error or warning found
Congratulations!

This document validates as CSS!"

Mozesz powiedziec w jaki sposob zes tego errora dostal?

hmm a może jeszcze rzucić linkiem do dodatków dla FB? choć to wykracza poza temat to mogłoby kogoś zainteresować, że może więcej i...

Czy ja wiem. W oryginalnym texcie byla mowa o All In One Extension, ale to raczej pod katem przystosowania Fb by praca na nim przypominala obsluge IE. W teori osoba ktora tu trafi najpierw przyczyta "Dlatego warto sie przesiasc", gdzie dowie sie o dodatkach. Tutaj juz w sumie nie musi to byc poruszane.

[Olhado/256]

Wyglądają nieźle, szczególnie Przesiadka 2 na stylu Biały 2 ( ), ale pod IE trochę to źle wygląda (co chyba nikogo nie dziwi ), a mianowicie jest problem z pozycjonowaniem i rozmiarem tego diva z tytułem.

[Pitreck]

Czyli jednak skriny po srodku

[KLAPEK]

Aby nie było obramowania obrazków wpisz w CSS

Kod: Zaznacz cały

img { border: none; }


jeśli chcesz by jakiś fragment dotyczył tylko IE wpisz w kodzie strony

Kod: Zaznacz cały

<!--[if IE]>
<tu_tagi_dla_dziurawca>
<![endif]-->


Co do obramowania to IE 5 nie widzi kropek, daje po prostu linię, ale jak dobrze mi się wydaje to już IE6 widzi kropki

[Pitreck]

No prosze. Wystarczylo dac dla tytulu

Kod: Zaznacz cały

margin-top:

A dla reszty

Kod: Zaznacz cały

top:

A nie na odwrot, jak bylo poprzednio zeby Mozilla nie poczula zmiany a IE tak. Odrazu lepiej to wyglada

Aby nie było obramowania obrazków wpisz w CSS

Kod: Zaznacz cały

img { border: none; }


Dzieki mistrzu! Pliki na serverku zaktualizowane

jeśli chcesz by jakiś fragment dotyczył tylko IE wpisz w kodzie strony

Kod: Zaznacz cały

<!--[if IE]>
<tu_tagi_dla_dziurawca>
<![endif]-->


Dzieki, pocwicze z tym troche.

Co do obramowania to IE 5 nie widzi kropek, daje po prostu linię, ale jak dobrze mi się wydaje to już IE6 widzi kropki

Dobrze ci sie wydaje, IE 6.0 widzi kropki.

[Pitreck]

No i pobawilem sie troche z tym przepisem ktory zapodales. Przynajmniej teraz wiem skad sie wzial tez dziwny napis w lewym, gornym rogu na twojej stronie

Do pliku .html nie mam jak tego podpiac. Nic to nie zmieni bo tu wszystkie wymiary sa ustalone w CSSach.

Jesli masz jakis pomysl, jak to rozwiazac to jestem otwarty na propozycje. Jesli nie i tak problem udalo mi sie zalagodzic, by nie razil w oczy jak poprzednio.

Dzieki za wszystko.

[KLAPEK]

No i pobawilem sie troche z tym przepisem ktory zapodales. Przynajmniej teraz wiem skad sie wzial tez dziwny napis w lewym, gornym rogu na twojej stronie

A skąd się wziął i czy jeszcze jest ?
Bo byłem zaskoczony widząć go, całkowicie niezamierzone, bo na Mozilli i w IE go nie miałem.

[Pitreck]

A skąd się wziął i czy jeszcze jest ?
Bo byłem zaskoczony widząć go, całkowicie niezamierzone, bo na Mozilli i w IE go nie miałem.

To efekt zlego obsadzenia hacka dla IE. Niemoge sie teraz tego doszukac, niapamietam na jakiej to bylo podstronie...

[Pitreck]

OK. Nie bylo zbyt duzo krytycznych uwag pod katem nowych wersji stron, problem z ramka dla obrazkow zostal rozwiazany, a problem z wyswietlaniem strony pod IE zalagodzony.

Zostawilem mozliwosc wyboru stylu, tylko ze teraz sa dostepne 2(w obu stronach). Roznia sie one tylko polozeniem obrazkow, styl 1 to obrazki po lewej (domyslnie), a styl 2 to obrazki centralnie. Jesli wiecej osob stwierdzi ze styl 2 jest lepszy to jego ustawie jako domyslny.

Aha, wstawilem do CSSow

Kod: Zaznacz cały

padding-right: 10px;

czyli 10-cio pixelowy odstep textu od prawej krawedzi ramki. Strona troche sie teraz wydluzyla, ale moim zdaniem wyglada lepiej jak text nie jest tak blisko krawedzi.

[Domel]

Ja mam kilka uwag. Narazie tylko 3 (reszczta jak mi net zacznie dzialac).
1. Zrezygnuj z znacznikow typu b, big, small itp od tego sa style. Mam nadzieje ze wiesz jak to zrobic ale przypomnie ze znacznik span + CSS zalatwi sprawe szybko
2. Zmienianie stylu pierwszej litery nie robi sie tak jak jest u Ciebie. Do tego sluzy pseudoelement ::first-letter. Czyli sprawa ma sie tak znacznik p (lub inny blok) + CSS
3. Obrazki trzeba bardziej zoptymalizowac. Tutaj chyba nie musze pisac dlaczego ale dam czybki przyklad: strona ta ladowala sie u mnie 2 godz a mogla tylko godzine . Oczywiscie to ekstremalny przyklad, w normalnych warunkach bedzie to odbywac sie szybciej ale i tak stosunek wszytywania do tresci trzeba poprawic.

[Pitreck]

->Domel
1. Tak, wiem jak to zrobic. Zalatwione, ale jeszcze nie wrzucone na server.
2. Dzieki, niewiedzialem. Jeszcze 2 tygodnie temu xHTML znalem tylko z nazwy...

Mam tylko takie pytanko. W texcie uzylem kilku blokow p, a chce zeby z takim efektem zaczynal tylko pierwszy blok(czyli poczatek artykulu). Jest na to jakis sposob?

3. Miniaturki moge skompresowac do .jpg, ale wersje Full raczej w trosce o jakosc pozostana w .png. Chciaz jeszcze sie pobawie, moze uda mi sie to jakos w miare bezstratnie zkompresowac....

[Domel]

Jest na to jakis sposob?

Tak. Jesli chodzi o dokladnie takie rozwiazanie to: najlepszy jest indentyfikator czyli atrybut id i CSS (#) Ale jesli bedziesz chcial uzyc w kilku niejscach to wtedy potrzebne sa klasy (atrybut class).

3. Miniaturki moge skompresowac do .jpg, ale wersje Full raczej w trosce o jakosc pozostana w .png.

NIE, nie, nie! Nie o to mi chodzilo. Zoptymalizowac w ramach formatu png.

Chciaz jeszcze sie pobawie, moze uda mi sie to jakos w miare bezstratnie zkompresowac....

Jesli zalezy Ci jednak na konwersji do JEPG to polecam JNG (czyli taki miks PNG z JPEG) jednak nie do konca to jest dobre rozwiazanie tbo tylko Mozilla obsluguje ten format. Dlatego proponuje pozostanie przy PNG.

[Pitreck]

Tak. Jesli chodzi o dokladnie takie rozwiazanie to: najlepszy jest indentyfikator czyli atrybut id i CSS (#) Ale jesli bedziesz chcial uzyc w kilku niejscach to wtedy potrzebne sa klasy (atrybut class)..

Nadal nie wiem jak to przeniesc na realia tych stron.
Moze bys zajzal w zrodlo oraz CSS i cos wiecej mi podpowiedzial, lub podal gotowca?

Jesli chodzi o lepsza kompresje obrazkow. PSP to dosc toporne narzedzie, ale chyba udalo mi sie dojsc do kompromisu pomiedzy waga a jakoscia. Roznica w jakosci obrazu mala, choc zauwazalna. Za to waga prawie 1/3 tego co poprzednio.

[Domel]

Nadal nie wiem jak to przeniesc na realia tych stron.
Moze bys zajzal w zrodlo oraz CSS i cos wiecej mi podpowiedzial, lub podal gotowca?

w CSS:

Kod: Zaznacz cały

#pierwsza:first-letter {font-size: 120%; font-weight: bold}

Tak mnie wiecej wygladac moze CSS
Zamiast tego:

Kod: Zaznacz cały

<div class="mojstyl">
<p><big><big><b>F</b></big></big>irebird to

cos takiego:

Kod: Zaznacz cały

<div class="mojstyl">
<p id="pierwsza">Firebird to

Za to waga prawie 1/3 tego co poprzednio

Bardzo dobrze. Jesli bys sie troche jeszcze nudzil to mozesz popracowac nad zmiana liczby kolorow ale teraz jest juz dobrze.