ShadowD
3.12.2011, 17:26:41
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
Korab
3.12.2011, 17:48:59
O co chodzi? Strona jest zupełnie goła pod IE, Operą, Chromem.
ShadowD
3.12.2011, 18:00:18
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?
vokiel
3.12.2011, 18:04:25
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
3.12.2011, 18:05:59
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
3.12.2011, 18:23:41
u mnie caly czas jest to samo z localhostem.
ShadowD
3.12.2011, 18:31:31
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
3.12.2011, 18:45:33
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
3.12.2011, 18:56:18
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
3.12.2011, 19:01:20
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
3.12.2011, 19:55:02
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
3.12.2011, 19:56:35
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
3.12.2011, 20:16:07
@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. :-)
lobopol
4.12.2011, 11:08:03
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.htmlw desktop i box robi to overflow:auto
Box najaktywniejsi użytkownicy również ma swoje problemy z dłuższymi tekstami
Cytat(ShadowD @ 3.12.2011, 20:16:07 )

@!*! 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:
<header>
<nav>
menu
</nav>
</header>
<article>
<nav>
menu
</nav>
</article>
I tak będzie wyglądać inaczej, bo w css zrobisz:
header nav {color:red}
article nav {color:green}
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
4.12.2011, 15:43:36
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
6.12.2011, 18:28:57
@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.
lobopol
6.12.2011, 18:42:42
Css się nie wczytują, duplikujesz id (i nie powinno się ich raczej robić numerycznych)
ShadowD
6.12.2011, 18:57:00
Css już naprawiony, jak zwykle przeniesienie z locaalhost bez zmiany base, co do id mam jeden art w pętli, nie chciało mi się kombinować w przyszłości id będzie id konkretnego artykułu i będzie miało postać "art-14", mam zamiar używać sporo ajax, więc jakiś namiar na artykuł muszę niestety posiadać, nie mniej jednak na pewno nie będą się powtarzać, a samo id będzie zaczynać się od tekstu na samym końcu zawierając nr., chyba że jest jakiś lepszy sposób, ale -data-xyz nie koniecznie działa poprawnie z tego co wiem.
zegarek84
6.12.2011, 19:30:15
kiedy faktycznie wszystkie linki nawet chmura tagów to hash "#" ;] (sprawdziłem nawet w kodzie jeśli czasem miałbyś błędnie obrobić dokument skryptem js)
ShadowD
6.12.2011, 19:35:53
Strona nie ma jeszcze żadnego silnika, jest sam lay i kod pod ocenę, czyli to co będzie widoczne dla userów, więc spokojnie rozumiem, że te problemy z base skłaniają Was do takich przemyśleń.
Wywal te divy

Kod
<!--[if IE]><script type="text/javascript">'article aside section header nav footer'.replace(/\w+/g,function(e){document.createElement(e)});</script><![endif]-->
To kod, "dodający" znaczniki html5 w starczych IE.
Jak chcesz przetestować wygląd w różnych przeglądarkach to polecam browserlab.adobe.com, nie ma opery, ale ją możesz mieć na dysku.
Co do kodu, no prawie dobrze

pozbądź się divów, bo są zbędne, tak samo jak niektóre przypisanie ID, czy CLASS dla elementów. Odwołaj się do nich bezpośrednio w CSS, skoro w article, masz header, a w nim h2, to po co h2 dajesz klasę?
article header h2{color:red}
I już.
Tak samo z section. Za dużo ich. Section jest w zasadzie tylko po to, aby się nie gubić w wypadku większej ilości tego samego kodu. Nie jest on zamiennikiem, dla div.
Twoją stronę widziałbym tak:
<header> logo itp</header>
<aside>
<nav>menu po lewej</nav>
</aside>
<section>
<article>
<nav>nawigaja do artu</nav>
</article>
</section>
<aside> menu po prawej</aside>
<footer>stopka</footer>
Oczywiście to kwestia podejścia, jednak nie ma potrzeby w upychaniu wszytkiego tymi znacznikami.
ShadowD
7.12.2011, 13:17:54
Mam wywalić wszystkie div? To też chyba złe podejście, wrappery muszą zostać, wyśrodkowują całość i jakoś ogarniają. :-) Taka saa sytuacja jest z menu po prawej grupują pola.
Jeśli chodzi zaś o klasy, to masz rację czasem za często z nich korzystam, a przykład z hx jest idealny - to poprawię, co do div nie wiem jak miało by to funkcjonować..
Ale co one Ci wyśrodkowują? Bo za bardzo nie wiem co masz na myśli. Nie musisz, możesz je wywalić. Mi akurat nie bardzo pasuje używanie div tam gdzie nie są potrzebne, a w html5 prawie wcale, ale to Twój kod

EDIT:
A już chyba rozumiem, te grupowanie to chodzi Ci o boxy "najaktywniejsi użytkownicy" i "polecamy" ? To umieść właśnie to w <aside> jako grupę, a nie każdy box z osobna jako <aside>. Pogrupowanie zrób w <ul>, lub <dl>
lukesh
11.12.2011, 00:55:07
Dlaczego menu jest na środku strony a u góry jest wielka przestrzeń?
http://imageshack.us/photo/my-images/580/tpl.png/
ShadowD
11.12.2011, 11:05:08
Masz wyłączone reklamy jakimś blockiem, dodałem je w celu sprawdzenia jak wyglądają gdziekolwiek (dot. innego projektu) i podczas update plików zostały też wciągnięte, tymczasowo skasowane.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę
kliknij tutaj.