Strona bloga cmsss.pl Opcje

[ShadowD]

Miałem już kiedyś podejście do bloga, różni się jednak od tego co miało być, a co jest w chwili obecnej. Jako że mam spore plany i na reszcie czas dla siebie postanowiłem więc je powoli realizować, na razie plany zostaną tajemnicą, a templatka idzie do oceny. :-)

Kilka zmian w kodzie się jeszcze pojawi, bo wiem, że idealny nie jest w większości więc chodzi o sam wygląd strony. Mam monitor lcd i strasznie obawiam się o jasność innych monitorów, różnica między szarościami jest znikła i może zaniknąć w całości - liczę tutaj na opinie. Kolorystyka miała być szaro szara z zółtą wstawką (tak jak kiedyś na logo, jeśli ktoś pamięta to wie o czym mówię), jednak postanowiłem dorzucić trochę ciemnego, potem okazało się że zółty ładnie wygląda na szarym, ale sam w sobie zlewał się z tłem. Na końcu czerwień przykryła żółć i zmiana z mojej strony jak najbardziej na plus, wygląda ładnie na ciemnym i jasnym tle.

Zmiany miały na celu uprzyjemnić pobyt, kierowałem się nieco serwisami społecznościowymi - one chyba każdemu pasują i są nie jako wyznacznikami jak powinna wyglądać strona na którą chcemy zaprosić gościa i trochę go pomęczyć nudnym tekstem.

Link: cmsss.pl*

*Całość testowana pod chrome i ff

Ten post edytował ShadowD 3.12.2011, 17:28:58

[Korab]

O co chodzi? Strona jest zupełnie goła pod IE, Operą, Chromem.

[ShadowD]

Może trafiłeś na jakiś update plików? :/ Nawet jeśli to strona nie powinna być zupełnie goła, a zaledwie mogło zabraknąć jednego pliku - chyba, że miałeś na prawdę spore szczęście.

Nie wiem za bardzo jak się ustosunkować do tego o czym piszesz, u mnie zarówno ff jak i chrome widzi "http://cmsss.pl" || "http://www.cmsss.pl" jako normalną stronę, możesz podać jakieś dodatkowe informacje lub sprawdzić ponownie? Może ktoś inny jest wstanie potwierdzić takie zachowanie?

Ten post edytował ShadowD 3.12.2011, 18:00:54

[vokiel]

Każdy link prowadzi do http://localhost/#, css'a w ogóle nie ma, sam html. Może dlatego, że css też jest zaciągany z http://localhost/css/default.css? U Ciebie pewnie się pojawia, ale u każdej innej osoby localhost to co innego ;-)

[ShadowD]

Heh, base był ustawiony na localhost dzięki vokiel, nie zwróciłem uwagi u mnie tak jak piszesz wszystko śmigało poprawni. :-)

Błąd poprawiony, zapraszam do oceny i przepraszam za błąd!

[jacobson]

u mnie caly czas jest to samo z localhostem.

[ShadowD]

No to przynajmniej wątek nie jest pusty, zaczynam nienawidzić ftp, powinni wymyślić coś do synchronizacji w tle. :-)

Sprawdziłem, już jest na 100% oki. :-)

[jacobson]

bardzo mi sie podoba naglowek i logo (ten napis tylko jest ledwo widoczny "Z technologia w przyszlosc". Poza tym ciekawi mnie czemu tyle plikow css.

[ShadowD]

Wersja przedpremierowa, ogólny system ma się składać z modułów takich jak news'y itd. niepotrzebne pliki nie będą wczytywane, a potrzebne scalane w kilka, użytkowane zawsze, często użytkowane i już dalej luźne modły które są na prawdę jakimś ewenementem przy użyciu. :-) Jeśli chodzi o napis, pomyślę nad jego powiększeniem.

Cieszę się, że podoba Ci się top, a jak z resztą?

[jacobson]

jak sie tak mocniej przyjzec menu to jak jest uruchomiona jedna zakladka i nacisnie sie na inna to poprzednia sie odsuwa i w momencie odsuwania nie ma prawego bordera - pojawia sie dopiero kiedy pole dojezdza do swojej pozycji. to taka malutka "uwaga". A cala reszta - fajnie, czytelnie. Chetnie poczekam na dzialajaca wersje z postami.

[!*!]

Dość przejrzyście, dobre logo, choć mogłoby być większe, sloganu pod nim nie widzę. Dobre menu nawigacyjne, to jakaś wtyczka do jQ? Własna?
Przyczepiłbym się jedynie do tego iż nie jest to na html5, czego efektem jest masa zbędnych divów

[ShadowD]

Menu pisałem sam, jest że tak powiem cofnięte w rozwoju by nie dodawać kilku zbędnych bajerów które teraz są nie potrzebne - a i całość ma jeden dość poważny błąd, nie mam czasu nad nim się rozczulać więc dodałem tylko część kodu by całość prezentowała jak będzie miało to działać w przyszłości.

Hmm, ostatnio jak interesowałem się html5 nie koniecznie był kompatybilny, nie celuję co prawda w target osób nie korzystających z nowych przeglądarek, więc przemyślę przejście na html'a, może coś się zmieniło od moich podbojów. ;-) Polecasz w każdym bądź razie próbę z html5, może oddzielna wersja czy mogę ponieść się i całość stworzyć na nim?

[vokiel]

Zostający nagłówek robi trochę dziwne wrażenie. Poza tym bardzo schludnie, fajny pomysł w wcięciami przy datach i menu, menu ciekawie animowane.
Btw. Skoro jest stała szerokość strony, to dobrze jakbyś coś zrobił z tekstami, które się nie mieszczą w wierszu. Teraz gdzieś znikają ucięte w kontenerze. Może zawijanie wierszy, albo ucięcie z (...) na końcu?

[!*!]

Przejdź na html5 spokojnie. Poza tym to od zawsze jest kompatybilne, z wyjątkiem znaczników obsługujących media i tym że dla IE>8 trzeba dodać linijkę kodu JS aby były obsługiwane

[ShadowD]

@vokiel dzięki za słowa pochwały, całość to czysty html, a tytuły ukryłem w ten sposób specjalnie, myślę nad dodaniem czegoś nad tymi elementami - taki grawient przejścia z napisu do zwykłego tła. A to wszystko dlatego, że strona nie będzie mieć co prawda dowolnej szerokości, a w zamian trzy etapową i jeśli się uda postaram się w js ucinać tekst i dodawać wielokropek - nie wiem tylko jak rozwiązać sprawę sprawdzania szerokości, ilość znaków niestety jest czasem mylna i szkoda mi obcinać specjalnie za dużo, ale dzięki za poradę zastanowię się nad tym.

Wyjaśniając ogólnie szerokość będzie ustawiana js'em, standardowo będzie taka jak w tej chwili i jeśli będzie to możliwe będziecie się powiększać o 200 lub 400px, nie koniecznie przepadam za stronami "za szerokimi" w których czytanie tekstu odbywa się poprzez latanie oczami z lewa na prawo, szczególnie przy większych monitorach, takie rozwiązanie wydaje mi się lepsze od zajmowania max miejsca.

Pytaniem jest jeszcze czy wielokropek jest lepszy od grawientu czy dokładnie na odwrót, ta druga opcja jest znacznie łatwiejsza do wykonania i nie potrzeba mieszać w to js.
Ps. Jak na tego typu ukrywanie treści reaguje google? Sami korzystają z tej opcji na youtube.

@!*! Przekonałeś mnie, zabieram się za poznawanie tej technologij i mam nadzieje, że jest tak samo skuteczna jak xhtml 1.0 strict, jedynie na nim strony wyglądaj prawie że identycznie w różnych przeglądarkach, nie dokładając mi pracy.

Edit:
Czytając o html5 w sumie dochodzę do wniosku, że jedyne plusy to sprecyzowane znaczniki takie jak nav zamiast div o takim samym id, niestety to jedyna zaleta tego odłamu, reszta albo jest nie kompatybilna, albo tworzy jakieś dziwne malunki - więc zmienię tylko to co działa w 100%, w przyszłości pomyślę nad formami i innymi. :-)

Ten post edytował ShadowD 3.12.2011, 21:34:42

[lobopol]

Design bardzo mi się podoba, kod html przejrzysty, ale kilka uwag mam
-przydałyby się sprity przy tych ikonach fb/twittera/itd
-nie podoba mi się to rozbicie na 11 plików css (jestem fanatykiem ilości requestów )
-efekt menu jest troszkę niedopracowany, po kliknięciu po skończonej animacji mamy taki mini przeskok na poprzednim aktywnym linku (dodawanie bordera z boku)
-Tytuł posta przy zbyt długim tekście wchodzi pod datę, wysokość tej h2 jest zbędna jak i white-space: nowrap; w linku w środku (popatrz na pierwszy tytuł)
-w ie7 masz do poprawki tylko boks created (zamiast text-align:right daj float:right i powinno być ok) oczywiście jeżeli chcesz aby działało w ie7
-dodaj sticky footer bo przy braku treści lub wyższej rozdzielczości stopka się odrywa od spodu strony (, a nie jest to ładny efekt)
-przy mniejszej rozdzielczości (konkretnie wysokości) menu i top raczej bez fixed powinny być.
-strona nieco szwankuje przy mniejszej szerokości, suwak mamy dopiero poniżej szerokości około 830px (i nie łapie prawego boksa) a po przesunięciu mamy nieprzyjemny efekt http://zapodaj.net/f03f52e73151.png.html
w desktop i box robi to overflow:auto

Box najaktywniejsi użytkownicy również ma swoje problemy z dłuższymi tekstami

Ten post edytował lobopol 4.12.2011, 11:09:53

[!*!]

@!*! Przekonałeś mnie, zabieram się za poznawanie tej technologij i mam nadzieje, że jest tak samo skuteczna jak xhtml 1.0 strict, jedynie na nim strony wyglądaj prawie że identycznie w różnych przeglądarkach, nie dokładając mi pracy.

Edit:
Czytając o html5 w sumie dochodzę do wniosku, że jedyne plusy to sprecyzowane znaczniki takie jak nav zamiast div o takim samym id, niestety to jedyna zaleta tego odłamu, reszta albo jest nie kompatybilna, albo tworzy jakieś dziwne malunki - więc zmienię tylko to co działa w 100%, w przyszłości pomyślę nad formami i innymi. :-)

Dla każdego elementu html5 dodajesz w css "display:block" i działa. Wspomniałem już o tym, elementy/tagi takie jak <audio> <video> i wszytko co nimi zarządza leżą po całości, ale to i tak nie ma znaczenia, bo jeśli już robisz jakiś odtwarzacz to robisz go w JS.

Te sprecyzowane znaczniki właśnie są po to aby wyeliminować typowe nadawanie ID dla elementu, bo i tak manipulujesz nimi z poziomu css... dlatego kod:

[HTML] pobierz, plaintext 
<header>
 <nav>
  menu
 </nav>
</header>
 
<article>
 <nav> 
  menu
</nav>
</article>
[HTML] pobierz, plaintext 

I tak będzie wyglądać inaczej, bo w css zrobisz:

[CSS] pobierz, plaintext 
header nav {color:red}
article nav {color:green}
[CSS] pobierz, plaintext 

A jak już masz więcej takich elementów, to zawsze możesz opakować to w znacznik <section> i odwołać się do niego poprzez liczbę jaką występuje, lub po staremu nadać mu ID

[Korab]

Pewnie tak jak pisałeś trafiłem na jakiś update plików. Teraz dla odmiany nie działają linki w menu po lewej i nie działają linki-nagłówki przy postach (chyba że to jeszcze niezaimplementowane).

[ShadowD]

@lobopol i @Korab mam wrażenie, że nie czytacie poprzednich postów, szczególnie Pan @lobopol.

Większość tego co wymieniłeś była już opisana, nie mniej jednak dzięki za zebranie wszystkiego w jednym miejscu, pozwolę sobie zaznaczyć jeszcze raz, całość jest w wysokim stadium alfa, czyli mówić jeszcze nie umie jest trochę brudne i nie umyte. Po polsku pisząc całość nie jest gotowa, a że twórczy w ps'ei nie jestem tz. denerwuje mnie brak moich umiejętności dotyczących zarządzaniem warstw i przesuwaniem wszystkiego, postanowiłem tworzyć lay już w html, kod jak się okazuje będzie, a nawet jest już przepisywany na czysto w html5 do czego tutaj zostałem przekonany.

Napiszę jak skończę przepisywać i oskrybuję menu.

NOWY:

Całość w wolnych chwilach przepisałem na na czysto z użycie html5, jako że jest to dla mnie nowość mam kilka problemów z użyciem w poprawnych miejscach nowych tagów, przyjąłem konwencję "gdzie blok prezentuje wartość dla usera i wyraźnie rozgranicza elementy używam section, a gdzie bloki to kwestia estetyczna lub grupuje mniej ważne elementy to div". Nie wiem czy poprawnie jeszcze biję się sam z sobą co do header i footer, są bardzo nie jasne jak chodzi o dokumentację, nie koniecznie widzi mi się takie ich ułożenie.

Usunąłem kilka mniejszych błędów, takich jak menu itd., w najbliższym czasie dodam position:fixed (chwilowo na off) od wielkości przeglądarki jak chodzi o header i zawsze jednak z ograniczeniem dla menu.

Link: http://cmsss.pl

*Działa jak zwykle na pewno pod ff i chrome, wolę nawet nie wiedzieć co robi z tej strony ie, brak js przerabiającego znaczniki. ;-) Oczywiście mnogość plików js i css będzie inna, tak mi się łatwiej pracuje.

Ps. Graniczna wartość fixed to 600px wysokości pola dla strony.

Ten post edytował ShadowD 6.12.2011, 18:41:20

[lobopol]

Css się nie wczytują, duplikujesz id (i nie powinno się ich raczej robić numerycznych)