Problemy z CSS-em i HTML-em

[dziadek3D]

Synek Torm.... był bardzo delikatny... to jest zgroza przez duże "G"...:))).... ale ja na szczęście jestem stary i głupi i moGę się mylić... ale nie w tym wypadku...!!!

[torm]

QbisieQ - zarówno asymetria jak i duże kontrasty jak najbardziej.. zwłaszcza w webdesignie są mile widziane... ale to tak jakbyś tłumaczył poziom hałasu w maluchu... tym, że mocny silnik zawsze jest głośny ;)

 

-- edit --

odnośnie kodu to wszystko Ci działa :)

Edytowane 14 Kwiecień 2012 przez torm

[QbisieQ]

Pojawił mi się kolejny drobny kłopot. Dopóki grafiki ze strony nie zostaną zcache'owane przez przeglądarkę, wczytanie ich zajmuje parę sekund. O ile z tłem czy menu nie stanowi to problemu to podświetlenia i aktywacje przycisków powinny się wyświetlać natychmiast. Zastanawiam się więc czy jest jakiś sposób na pre-cache'owanie wybranych elementów? Tj. wczytanie grafik zenim nastąpi żądanie ich wyświetlenia.Poszukałem chwilę w google ale nie znalazłem nic ciekawego.Jedyny sposób jaki przychodzi mi do głowy to wstawienie tych grafik gdzieś na stronie i ukrycie ich.Ale może znacie jakiś bardziej profesjonalny i elegancki sposób?

[torm]

http://www.staff.amu.edu.pl/~psi/informatyka/javascript/preload.html

http://www.pageresource.com/jscript/jpreload.htm

http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader

 

pierwsze trzy z google ;)

[QbisieQ]

Dzięki torm, widocznie pod złymi tagami szukałem :P Znalazłem tez nieco prostsze wersje skryptów preloadujących, ale nie wiem czemu nie działają. help!

W pliku html mam między znacznikami

i (w paru miejscach widziałem, że tu powinno się umieszczać skrypty a w innych źródłach podają że przed

[QbisieQ]

ok, widzę, że chyba jest jakiś problem ze ścieżką dostępu do skryptu, i być może do plików do których skrypt się odwołuje, tylko nie wiem czemu.

 

Dopisałem wypisywanie tekstu w skrypcie ale nic nie wypisało, poza tym dla sprawdzenia, w pliku .html wpisałem i również nie wczytało obrazka (na serwerze, u mnie wczytuje). Wczytuje tylko wtedy gdy obrazek jest w tym samym katalogu co plik i w ścieżce znajduje się tylko jego nazwa. Dodam, że używałem ścieżek względnych, więc chyba powinno działać? Nie mam pojęcia czemu tak się dzieje. Szczególnie, że arkusz css też znajduje się w innym folderze niż html i jakoś nie ma problemu z jego odczytaniem.

[FlooX]

omg, sprity robić a nie jakieś preloadowanie obrazków!

[torm]

FlooX a jaka jest różnica?

[FlooX]

hmm choćby taka, że obrazki nie są wczytywane javascriptem (czy tam preloadowane)

Jak sobie podejżysz w źródła większych zawodników jak facebook, google czy choćby nawet onet to wszyscy oni mają obrazki w sprite.

Korzyści z używania spritów to np. choćby brak problemu z hoverem na przycisku (jaki Ty masz), wczytywany jest jeden obrazek od strzału i cała strona jest już widoczna, bez późniejszego doczytywania. Mocno ograniczone są requesty do serwera! zamiast np 80 zapytań o obrazki leci raptem jeden! Przez co oczywiście zwiększa się szybkość wczytywania strony i jej 'wydajnosc' ;)

 

Są różnej maści programy, które ułatwiają tworzenie spritów (same Ci ułożą obrazki i podadzą koordynaty), ale można to zrobić nawet samemu w Photoshopie.

[QbisieQ]

Dzięki za komentarze, olałem te skrypty i zrobiłem sprite'y w PS-ie, działa wszystko teraz tak jak powinno :)

[QbisieQ]

Następny problem: jak zrobić przycisk, który nie będzie prostokątem ? Konkretnie chodzi mi o to, żeby np. okrągły czy trójkątny button nie podświetlał się od razu po najechaniu na prostokąt w który jest wpisany? Chociaż, właściwie okrągły, czy trójkątny itak nigdy nie jest bo grafika itak zawsze zawiera się w prostokącie, może mieć co najwyżej przezroczyste jakieś pixele, więc właściwie chodzi chyba o sposób nałożenia jakiejś maski ograniczającej.

[dziadek3D]

kiedy kolaudacja stronki....???...:))

[QbisieQ]

Niebawem. Kwestia tygodnia lub dwóch. Zależy od tego czy będę miał dużo do nauki na uczelni, bo w samej stronce zostało mało do zrobienia...i hope :)

[FlooX]

Następny problem: jak zrobić przycisk, który nie będzie prostokątem ? Konkretnie chodzi mi o to, żeby np. okrągły czy trójkątny button nie podświetlał się od razu po najechaniu na prostokąt w który jest wpisany? Chociaż, właściwie okrągły, czy trójkątny itak nigdy nie jest bo grafika itak zawsze zawiera się w prostokącie, może mieć co najwyżej przezroczyste jakieś pixele, więc właściwie chodzi chyba o sposób nałożenia jakiejś maski ograniczającej.

 

Nie da się.

Jedyny sposób to flash lub (chyba) html5 i canvasy - z tego drugiego nie miałem jeszcze przyjemności korzystać, ale generalnie służy to do rysowania elementów różnych kształtów więc obstawiam, że się da :)

 

Ewentualnie możesz pobawić się w zaokrąglane rogi

[torm]

jest jeszcze area map... :) ale do tego to Ci się przyda Fireworks... bo ręcznie taką mapę napisać... to można się skichać..:/

[QbisieQ]

Kolejny post i niestety nie jest to prezentacja stronki lecz kolejny problem. Co prawda pozostało mi już tylko wrzucić jeszcze parę obrazków i jakieś kosmetyczne zmiany ale zauważyłem, że strukturę galerii zorganizowałem beznadziejnie i z czasem będzie coraz gorzej :/ Chodzi o to, że każda strona galerii i każda powiekszona miniaturka to osobna strona html. Dodatkowo, wymyśliłem sobie, że najnowsze prace będą najpierw (najwyzej na pierwszej stronie) więc jeżeli chcę wrzucić jakąś nową pracę to muszę w tabeli i między stronami jeżeli jest ich więcej niż jedna, wszystkie inne przesuwać. Czyli aktualne rozwiązanie generuje mnóstwo bezmyślnego ctrl+c ctrl+v.

Na początku chciałem napisać zewnętrzny program, który zrobi to za mnie, ale perspektywa miliona plików średnio przypadła mi do gustu, więc ostatecznie chciałbym mieć jeden plik z galerią i jeden z podglądem na których byłyby osadzone skrypty podmieniające treść według potrzeb. Php czy java script ? Ponieważ php działa po stronie serwera, co daje pewność, że nie dojdzie do sytuacji w której klient nie zobaczy galerii bo nie ma odpowiedniego/aktualnego oprogramowania, wybrałbym ten język. Niestety w różnych kursach nie znalazłem informacji na temat obsługi zdarzeń typu kliknięcie myszą - co jest mi niezbędne :/.

 

Pytanie do Was: Czy php umożliwia obsługę zdarzeń, jeżeli tak to, który Wy byście język wybrali i dla czego + dla chętnych, inne pomysły zorganizowania galerii :)

[Inky]

Witaj,

Z tego co wcześniej przeczytałem, masz galerię osadzoną na tabeli? Jeśli nie zmieniłeś tego jeszcze, to wrócił bym jednak do kodu i naniósł poprawki. Otóż zaproponowałbym Ci przeniesienie "galerii" na listę. Zrobiłbym to tak:

• Nazwa Projektu

  data

  

  .

  .

  .

 

Używanie tabel do pozycjonowania elementów na stronie to "błędy" poprzedniej epoki. Dziś robimy to za pomocą css. Wystarczy wtedy zrobić tak

 

ul > li {

display: inline-block; /*dzieki temu elementy listy beda ukladac sie obok siebie*/

width: 200px; /*Zalezy jaki chcesz rozmiar*/

height: 200px;

}

 

Musisz tez dostosować elementy znajdujące się w znacznikach

aby nie były większe niż zdefiniowany przez Ciebie rozmiar lub nadać znacznikowi atrybut overflow: hidden.

 

To jest pierwsza część. I mogło by tak zostać gdybyś nie chciał tego sortować. Jednak zdecydowałeś się na sortowanie tego wg. daty, w związku z czym nie obejdzie się bez języka skryptowego. Metod na zrobienie tego znajdzie się kilka, ale ja mógłbym zaproponować Ci następujące rozwiązanie. Otóż pokusiłbym się o stworzenie pliku xml z wszystkimi Twoimi pracami. Zamieszczał byś tam np. link do obrazka, datę projektu itp. Dzięki temu plikowi nie potrzebował byś za każdym razem w ingerencję kodu html. Przyśpieszyło by też proces aktualizowania Twojego portfolio. Mając taki plik mógłbyś w php stworzyć prosty parser (przykładowy kod do przekopiowania podpowie Ci wujek Google.) i w sposób dynamiczny renderować rezultat. Należało by też dopisać jakąś funkcję sortującą. Ze względu, iż parser czyta plik xml od deski do deski, musiałbyś w jakiejś zmiennej magazynować rezultat, po czym go sortować. Trochę zabawy jest, ale czego się nie robi żeby później mieć spokój. Możesz również pominąć funkcję sortującą i ręcznie sortować wpisy w pliku. Ale wtedy mógłbyś ominąć zabawę w plik xml. Posortowane dane potem po prostu "renderujesz" do kodu html. Css'em pozycjonujesz i robisz to ślicznym.

 

Mam nadzieję że to co napisałem będzie pomocne, i dałeś to ogarnąć. To samo można by zrobić javascriptem, ale zawsze istnieje ryzyko że użytkownik będzie miał ją wyłączoną. Ale jest to znikomy procent.

 

Pozdrawiam :)

 

---

Moja Strona

Mój Blog

Edytowane 22 Maj 2012 przez Inky

[QbisieQ]

Dzięki za podpowiedź. W xml'a się jeszcze nie bawiłem, ale dzisiaj na szybko zapoznałem się z kursem online :) Po tym kursie za bardzo nie wiem jak połączyć xmla z html'em ? Pewnie do tego miałby mi posłużyć ten parser php (czytać z pliku xml i odpowiednio konwertować do html) ale właśnie dzisiaj odkryłem że serwer interii na którym mam stronę, nie obsługuje php :/

...więc chyba jednak zostaje mi zapoznać się bliżej z javascriptem

 

 

PS. Dla czego teraz tworzy się galerię na listach ? Są jakieś sensowne powody? Wydaje mi się, że tabela jest idealnie i naturalnie się do tego nadającą strukturą.

[olaf]

php działa po stronie serwera nie obsługuje zdarzen. Tak na przyszłość. Mozna to zrobic na dwa sposoby:

-klasycznie - przekazanie zmiennych w get, czyli po klinieciu odswierzasz strone z podaniem parametrow np. ?obrazek=starebaby.jpg i php odczytuje zmienną obrazek.

-nowoczesnie - za pomocą jquery. duzo wiecej roboty, bo trzeba znać składnie jquery i obsluzyc jak najwiecej zdarzen (errory itp) oraz wyswietlać loadery, by user wiedział co sie dzieje.

 

Przykłady prostych parserów js masz w sieci ale parsowanie xmla jsem troche zajmie. Jak nie masz obslugi php to nie bedzie też bazy wiec faktycznie wszystko musialbys trzymać w plikach. json czy xml parser będzie na pewno jako klasa dostępny gdzieś.

 

Listy są naturalniejsze dla wyszukiwarek. Lepiej indeksują treść.

[Inky]

Tabele są przeznaczone głównie do treści sticte tabelarycznych. Standardy W3C tak nakazują. Oczywiście można robić po swojemu, ale po co iść pod prąd?

 

Pozdrawiam

[QbisieQ]

Ok, dzięki za wyjaśnienia, ostatnie szlify i wrzucam stronę. Js-em zajmę się jak będę miał chwile, narazie nadciąga sesja :P

 

Jeszcze tylko jedno pytanie: Jeżeli chce mieć na swojej stronie linki do innych stron typu: max3d czy digart itp. i chciałbym umieścić u siebie logotyopy tych stron to muszę mieć jakieś pozwolenie ? Ktoś się orientuje jak to prawnie wygląda ?