czekam
Re: czekam
Galeria jest bardzo nieoptymalnie zaprojektowana co jest bezpośrednim powodem opisywanego przez Ciebie problemu objawiającego się niektórym użytkownikom (z wolniejszym łączem / słabszym komputerem) w postaci spowolnień i zacięć.
Umieściłeś dużą ilość zdjęć wysokiej rozdzielczości na jednej stronie które muszą zostać pobrane zanim strona zostanie wyświetlona. Przy słabszym łączu to może potrwać dość długo.
Dodatkowo już po pobraniu - zdjęcia te są przeskalowywane na komputerze klienta do rozmiaru miniaturek gdzie biorąc pod uwagę ilość zdjęć i ich duży rozmiar może być dla słabszych komputerów "wyzwaniem" w rezultacie powodując dodatkowe przycięcia i powodować chwilowe braki odpowiedzi przeglądarki.
Rozwiązaniem tego może być zoptymalizowanie galerii w następujący sposób :
Na serwerze umieszczasz 2 foldery ze zdjęciami, gdzie w jednym znajdują się miniaturki zdjęć a w drugim te same zdjęcia ale w normalnym formacie.
Na stronie wyświetlasz miniaturki pobierając je z folderu z miniaturkami. (dzięki czemu strona ładuje się szybciej, mniej obciąża łącze i komputer klienta)
Klient klikając na miniaturkę z galerii może obejrzeć zdjęcie w naturalnych rozmiarach które pobierane jest dopiero w chwili kliknięcia na miniaturce. (co ponownie odciąża wszystko ponieważ klient pobiera i przetwarza tylko to zdjęcie które chce obejrzeć)
Dodatkowo dobrze jest pomyśleć o formacie obrazków z kompresją np. jpg, png, gif co jeszcze bardziej zminimalizuje ilość przesyłanych danych.
Efekt ten można uzyskać na wiele sposobów z czego jeden z prostszych to np.
Umieściłeś dużą ilość zdjęć wysokiej rozdzielczości na jednej stronie które muszą zostać pobrane zanim strona zostanie wyświetlona. Przy słabszym łączu to może potrwać dość długo.
Dodatkowo już po pobraniu - zdjęcia te są przeskalowywane na komputerze klienta do rozmiaru miniaturek gdzie biorąc pod uwagę ilość zdjęć i ich duży rozmiar może być dla słabszych komputerów "wyzwaniem" w rezultacie powodując dodatkowe przycięcia i powodować chwilowe braki odpowiedzi przeglądarki.
Rozwiązaniem tego może być zoptymalizowanie galerii w następujący sposób :
Na serwerze umieszczasz 2 foldery ze zdjęciami, gdzie w jednym znajdują się miniaturki zdjęć a w drugim te same zdjęcia ale w normalnym formacie.
Na stronie wyświetlasz miniaturki pobierając je z folderu z miniaturkami. (dzięki czemu strona ładuje się szybciej, mniej obciąża łącze i komputer klienta)
Klient klikając na miniaturkę z galerii może obejrzeć zdjęcie w naturalnych rozmiarach które pobierane jest dopiero w chwili kliknięcia na miniaturce. (co ponownie odciąża wszystko ponieważ klient pobiera i przetwarza tylko to zdjęcie które chce obejrzeć)
Dodatkowo dobrze jest pomyśleć o formacie obrazków z kompresją np. jpg, png, gif co jeszcze bardziej zminimalizuje ilość przesyłanych danych.
Efekt ten można uzyskać na wiele sposobów z czego jeden z prostszych to np.
Kod: Zaznacz cały
<a href="obrazki/obrazek1.jpg" target="_blank">
<img src="miniaturki/obrazek1.jpg">
</a> {$signature}
Re: czekam
dziękuję za odpowiedź ale mam jeszcze prośbę. rozumiem o co chodzi ale nie mam pojęcia jak to zrobić. jakaś bardziej szczegółowa instrukcja albo odnośnik. Proszę
Re: czekam
1. Na FTP znajduje się folder zdjęcia.
Należy pobrać całą jego zawartość na swój komputer i przeskalować zdjęcia (bez zmiany ich nazw) do rozmiarów szerokość 200px wysokość 230px (polecam program infranview który może zrobić to przysłowiowym jednym klikiem - (Menu edit -> batch conversion) )
2. Stworzyć na FTP folder zdjęcia_mini
3. Wgrać przeskalowane zdjęcia do nowo stworzonego folderu na FTP
4. W pliku zdjecia.html znajdującym się na FTP znajduje się wiele linii odnoszących się do obrazków, wyglądają one tak (każda linia odnosi się do jednego obrazka)
Należy zmodfikować wszystkie te linie aby wyglądały według schematu
Innymi słowy do każdej takiej linii należy dodać linię poprzedzającą wyglądającą tak
Oraz linię kończącą wyglądającą tak
Pamiętając o tym aby wpisać poprawny parametr w części href który jest inny dla każdego obrazka.
Dla przykładu jeśli w oryginale było
to w linii poprzedzającej w parametrze href wpisujemy to samo ALE z dodatkiem _mini a więc
Edycji pliku zdjecia.html dokonujemy odpowiednim edytorem stron internetowych lub w przypadku braku edytora np. programem notepad plus plus (Nie należy edytować plików stron internetowych programami typu notatnik, word itp ponieważ może spowodować to ich uszkodzenie)
Przed wprowadzeniem jakichkolwiek zmian w kodzie strony należy bezwzględnie wykonać kopię strony aby możliwe było przywrócenie jej do stanu z przed zmian w wypadku wystąpienia niespodziewanych komplikacji.
Jeżeli nie czuje się pan na siłach dokonać tych zmian samodzielnie być może w kręgu pańskich znajomych znajdzie się ktoś kto posiada odpowiednie umiejętności i odpowiednią ilość wolnego czasu aby to wykonać.
Względnie może pan poszukać kogoś kto wykona to za drobną opłatą. (Jeśli reflektuje pan abym to wykonał, zapraszam na PM)
Należy pobrać całą jego zawartość na swój komputer i przeskalować zdjęcia (bez zmiany ich nazw) do rozmiarów szerokość 200px wysokość 230px (polecam program infranview który może zrobić to przysłowiowym jednym klikiem - (Menu edit -> batch conversion) )
2. Stworzyć na FTP folder zdjęcia_mini
3. Wgrać przeskalowane zdjęcia do nowo stworzonego folderu na FTP
4. W pliku zdjecia.html znajdującym się na FTP znajduje się wiele linii odnoszących się do obrazków, wyglądają one tak (każda linia odnosi się do jednego obrazka)
Kod: Zaznacz cały
<img src="zdjęcia/kula.jpg" alt="balkon" width="200" height="230"/>Kod: Zaznacz cały
<a href="zdjęcia_mini/kula.jpg" target="_blank">
<img src="zdjęcia/kula.jpg" alt="balkon" width="200" height="230"/>
</a>Kod: Zaznacz cały
<a href="zdjęcia_mini/kula.jpg" target="_blank">Kod: Zaznacz cały
</a>Dla przykładu jeśli w oryginale było
Kod: Zaznacz cały
<img src="zdjęcia/kula.jpg" alt="balkon" width="200" height="230"/>Kod: Zaznacz cały
<a href="zdjęcia_mini/kula.jpg" target="_blank">Przed wprowadzeniem jakichkolwiek zmian w kodzie strony należy bezwzględnie wykonać kopię strony aby możliwe było przywrócenie jej do stanu z przed zmian w wypadku wystąpienia niespodziewanych komplikacji.
Jeżeli nie czuje się pan na siłach dokonać tych zmian samodzielnie być może w kręgu pańskich znajomych znajdzie się ktoś kto posiada odpowiednie umiejętności i odpowiednią ilość wolnego czasu aby to wykonać.
Względnie może pan poszukać kogoś kto wykona to za drobną opłatą. (Jeśli reflektuje pan abym to wykonał, zapraszam na PM)
{$signature}
Re: czekam
chciałam spróbować sama
mam jeszcze jedno pytanko czemu pomniejszone zdjęcia wyglądają jak negatywy
---- EDIT ----
dobra głupie pytanie, nawet dałam rady ale chętnie posłucham jeszcze jakiejś rady na razie dziękuje za dotychczasowe
mam jeszcze jedno pytanko czemu pomniejszone zdjęcia wyglądają jak negatywy
---- EDIT ----
dobra głupie pytanie, nawet dałam rady ale chętnie posłucham jeszcze jakiejś rady na razie dziękuje za dotychczasowe
Re: czekam
Bardzo ładnie, widzę. Znacznie lepiej się teraz strona ładuje. 
we wszystkich plikach ta linia zawiera błąd (nieprawidłowe zagnieżdżenie tagów)poprawnie powinno być
w pliku zdjecia.html z koleibrakuje spacji pomiędzy align a width
w pliku oferta.html brakuje tagu "</ul>"powinno być
w pliku adres.html występuje samotny tag zamykający "</p>" należałoby by go usunąć
Wszystkie te powyższe przykłady pokazują że stosowanie "wcięć" w kodzie nie jest po prostu tylko dobrym nawykiem ale wprost czymś wymaganym, ułatwiającym czytelność, przejrzystość kodu i zapobiegającym popełnianiu tego typu błędów, dlatego gorąco zachęcam do stosowania wcięć w kodzie co nie jest "dodatkową stratą czasu" ale oszczędzaniem czasu który byłby potrzebny do analizy, wprowadzania zmian czy wprost znalezienia błędów w kodzie.
Dla przykładu, coś takiego nie ułatwia analizy, zmusza do niepotrzebnego wysiłku który można by spożytkować inaczej, wydłuża czas potrzebny na zrozumienie kodu i ułatwia ewentualne popełnianie błędów. (innymi słowy, to się po prostu nieprzyjemnie czyta)
Dokładnie to samo z wcięciami, wygląda nie tylko znacznie przejrzyściej ale skraca czas potrzebny na analizę i wydatnie zapobiega ewentualnym błędom które widać "jak na dłoni". Dzięki temu tracimy mniej czasu na analizę a poświęcamy więcej na tworzenie.
No i na koniec jeśli miałbym coś jeszcze zasugerować, to wykupienie w CBA jakiegoś planu VIP albo PRO na swoim koncie
co poza oczywistymi atutami, dodatkowo spowodowałoby zdjęcie reklam - przekładając się na bardziej profesjonalny wygląd strony i dodatkowe przyspieszenie ładowania się strony z powodu braku dodatkowego kodu reklam.
W takim razie...chrom-mar pisze:chętnie posłucham jeszcze jakiejś rady na razie dziękuje za dotychczasowe
we wszystkich plikach ta linia zawiera błąd (nieprawidłowe zagnieżdżenie tagów)
Kod: Zaznacz cały
<i><font size="7" face="Verdana" color="teal"><p>CHROM-MAR</i></font></p></center> Kod: Zaznacz cały
<p><font size="7" face="Verdana" color="teal"><i>CHROM-MAR</i></font></p></center> Kod: Zaznacz cały
<td align="center"width="25%" height="100%"> Kod: Zaznacz cały
<td align="center" width="25%" height="100%"> Kod: Zaznacz cały
<li> inne</li></font> Kod: Zaznacz cały
<li> inne</li></ul></font> Wszystkie te powyższe przykłady pokazują że stosowanie "wcięć" w kodzie nie jest po prostu tylko dobrym nawykiem ale wprost czymś wymaganym, ułatwiającym czytelność, przejrzystość kodu i zapobiegającym popełnianiu tego typu błędów, dlatego gorąco zachęcam do stosowania wcięć w kodzie co nie jest "dodatkową stratą czasu" ale oszczędzaniem czasu który byłby potrzebny do analizy, wprowadzania zmian czy wprost znalezienia błędów w kodzie.
Dla przykładu, coś takiego nie ułatwia analizy, zmusza do niepotrzebnego wysiłku który można by spożytkować inaczej, wydłuża czas potrzebny na zrozumienie kodu i ułatwia ewentualne popełnianie błędów. (innymi słowy, to się po prostu nieprzyjemnie czyta)
Kod: Zaznacz cały
<table width="100%" cellspacing="5" cellpadding="5">
<tr bgcolor="green" valign="middle" aling="left" colspan="3"><td align="center" valign="middle" width="25%" height="100%">
<a href="index.html"><font size="5">O Firmie</font></a></td>
<td align="center" width="25%" height="100%"><a href="oferta.html"><font size="5">Oferta</font></a></td>
<td align="center" width="25%" height="100%"><a href="zdjecia.html"><font size="5">Galeria</font></a></td>
<td align="center" width="25%" height="100%"><a href="adres.html"><font size="5">Kontakt</font></a></td></tr>
</table> Kod: Zaznacz cały
<table width="100%" cellspacing="5" cellpadding="5">
<tr bgcolor="green" valign="middle" aling="left" colspan="3">
<td align="center" valign="middle" width="25%" height="100%">
<a href="index.html">
<font size="5">
O Firmie
</font>
</a>
</td>
<td align="center" width="25%" height="100%">
<a href="oferta.html">
<font size="5">
Oferta
</font>
</a>
</td>
<td align="center" width="25%" height="100%">
<a href="zdjecia.html">
<font size="5">
Galeria
</font>
</a>
</td>
<td align="center" width="25%" height="100%">
<a href="adres.html">
<font size="5">
Kontakt
</font>
</a>
</td>
</tr>
</table> co poza oczywistymi atutami, dodatkowo spowodowałoby zdjęcie reklam - przekładając się na bardziej profesjonalny wygląd strony i dodatkowe przyspieszenie ładowania się strony z powodu braku dodatkowego kodu reklam.
{$signature}
Re: czekam
dziękuje jeszcze raz za pomoc
jeszcze raz za pomoc