PDA

Zobacz pełną wersję : Witryny z szablonami pozbawionymi tabel (opartymi na CSS, DIV)



Subey
19-12-2006, 11:45
Mam propozycje by w tym temacie wrzucac linki do stronek które sa oparte tylko na DIV i CSS bez żadnych tabel !!



Zasady:


Witryna działa na Joomla!/Mambo
Szablon nie używa tabel (żadnych, niedopuszczalne jest również modyfikowanie Joomla! polegające na wprowadzaniu dodatkowych tabel)
Witryna nie zawiera treści obscenicznych, rasistowskich ani obraźliwych
Zgłoszone witryny:

Josh
http://www.corradosc.com.pl/ XHTML 1.0 Transitional valid :: CSS validViking
http://demo.joomla.pl/ (http://demo.joomla.pl) http://www.pomoc.joomla.pl/ (http://www.pomoc.joomla.pl) XHTML 1.0 Transitional valid :: CSS valid
http://www.joomlademo.pl/ brak validacji (komponent SWmenuFree)
http://superfakty.pl/ valid (Mambo)
http://k2.com.pl XHTML 1.0 Transitional valid :: CSS valid
http://deski.org XHTML 1.0 Transitional valid :: CSS valid
http://www.silverlit.pl XHTML 1.0 Transitional valid :: CSS valid
http://hurlinghamgroup.com XHTML 1.0 Transitional valid :: CSS validŁukasz Macuga

http://e-infonet.eu/ XHTML 1.0 Transitional valid :: CSS valid

Viking
19-12-2006, 14:27
z archeo: http://www.joomla.pl/demo/ - najstarsza zrobona dla Joomla! templatka na samych divach
http://www.joomlademo.pl/ usunięto też część tabel z Joomla!
http://superfakty.pl/
...ale przecież nie bede wrzucał tu całego swojego porfolio ;)

josh
19-12-2006, 18:40
jeden taki przyklad to http://www.corradosc.com.pl/ szablon na divach :D validacje tez przechodzi http://validator.w3.org/check?uri=http://www.corradosc.com.pl/
i css tez http://jigsaw.w3.org/css-validator/validator?uri=http://www.corradosc.com.pl/

jacobs242
29-06-2007, 13:10
Wszystkie moje szablony :)
np. www.podkrzyżem.pl (www.xn--podkrzyem-hcc.pl) . Przechodzi walidację
:)

zwiastun
29-06-2007, 17:05
Oj, Jacobs, Jacobs! zajrzyj no w źródło. Od tabel aż się roi, pal licho te w mainbody, bo na to trzeba zmian w kodzie albo nieco innego wydania Joomla!, ale na tabele w modułach rozwiązanie Joomla! ma. Żaden moduł nie musi być w tabeli. To zależy właśnie od szablonu!

jacobs242
29-06-2007, 17:11
zwiastun, to jest jakiś sposób żeby joomla nie generowała tabeli?
Myślałem że chodzi o sam szablon, w takim razie

jeden taki przyklad to http://www.corradosc.com.pl/ szablon na divach
tu też są tabele

zwiastun
29-06-2007, 17:27
1. Niekiedy tabele są konieczne, np. wykaz artów w kategorii zawiera dane tabelaryczne, zatem OK, niech sobie będzie i w tabeli.
Ale
2. Treści artykułów, materiałów z większości komponentów tabelaryczne nie są. Jest taki projekt, co się accessibly zowie, w którym co się dało, to już wyeliminowano. Ale to może być kłopot, bo polska wersja nie została wydana.
3. W szablonie możesz ustawiać style modułów, jeśli ustawisz styl -1, -2, -3, to dostajesz kod wynikowy bez tabel (zajrzyj do tego arta: http://www.pomoc.joomla.pl/content/view/3/30/1/4/ )
I to jest pierwszy krok do ograniczenia ilości tabel.

jacobs242
29-06-2007, 17:37
aha, już rozumiem :) Dzięki zwiastun.

BTW. Mógłbyś zajrzeć do mojego innego tematu w administracja składnikami?

Jac
03-07-2007, 18:40
To ja też coś zgłoszę od siebie:
Strona Agencji Pracy Kaem Gastronomy
http://www.kaem-gastronomy.pl/ XHTML 1.0 Transitional valid :: CSS valid
Strona dopiero ruszyła i nie wykluczone drobne poprawki.
Na podstronach może być już różnie z walidacją kodu (komponenty na tabelach, itp.).
Poza tym właściciel witryny sam zarządza treścią, a sami wiecie, co wtedy może znaleźć się w kodzie.

Viking
20-08-2007, 05:48
@Jac:
Validator zgłasza błędy... Pamiętaj że zewnętrzny CSS możesz osadzić tylko wewnątrz head.
@jacobs:
nie mogę otworzyć strony

bumtu
03-09-2007, 13:54
Jeden przykład: www.zhdd.szczecin.pl (http://www.zhdd.szczecin.pl)

XHTML 1.0 Transitional: nie przechodzi sprawdzenia (na moje oko uwagi są do kodu generowanego przez dodatek MultiThumb),
CSS: valid.

Jac
03-09-2007, 18:50
Jeden przykład: www.zhdd.szczecin.pl (http://www.zhdd.szczecin.pl)

XHTML 1.0 Transitional: nie przechodzi sprawdzenia (na moje oko uwagi są do kodu generowanego przez dodatek MultiThumb),
CSS: valid.

Na moje oko masz w kodzie mnóstwo tabel.
Zainteresuj się projektem www.a8ejoomla.com. (http://www.a8ejoomla.com/)

bumtu
04-09-2007, 09:59
To oczywiście tabele związane z funkcją PHP mosMainBody().
Na moje oko, w kodzie większości prezentowanych tu stron są tabele związane z tą funkcją,
jak np. tabela contentpaneopen. Zdecydowałem się zapodać przykładzik, bo (1) struktura strony oparta jest na divach,
(2) moduły są też na divach, a nie w tabelach.

Chyba, że mówimy tylko o witrynach bez żadnego znacznika <table>, wtedy, ok, poddaję się...

Jac
04-09-2007, 15:36
Wszystko się zgadza. Standardowa Joomla daleka jest od ideału.
Dlatego podałem Tobie linka do projektu, który pozwala na wyeliminowanie również i tych tabel.

Łukasz Macuga
05-11-2007, 00:35
Chciałbym dołączyć moją skromną cegiełkę do szablonów pozbawionych (na ile się da) tabel. Moja strona firmowa - http://e-infonet.eu (http://e-infonet.eu/). Pełna walidacja, tabele zachowane jedynie w strukturze artykułów (contentpaneopen, itp.). Zresztą pracujemy i nad tym.

Pozdrawiam
Łukasz

zwiastun
05-11-2007, 02:08
Nad "tym" niekoniecznie trzeba pracować. Pooglądaj źródła na www.pomoc.joomla.pl albo www.demo.joomla.pl - tabele zostały jedynie tam, gdzie jest to uzasadnione!

Łukasz Macuga
05-11-2007, 09:58
Witam ponownie
Zauważyłem że każda prezentowana tu strona ma "te" tabelki ale zastanawiam się czy byłaby możliwa ich całkowita eliminacja. Przeglądam katalog components/com_content i w chyba spróbuję tam pogrzebać, najwyżej się strona rozsypie:)

kobylinski
05-11-2007, 11:31
Cała filozofia dzielenia na szpalty oparta jest na tabelkach. Tabele często są rozsypane jest to po całym pliku. Dodatkowo część elementów zdefiniowanych jest w joomla.php. Kod jest na prawde mało reformowalny ;). Mnie się marzy wszystko na patTemplate, ale tego nawet w 1.5 jeszcze nie widziałem. A szkoda.

Jac
05-11-2007, 21:02
Przykład bardzo prostej strony na Joomla (zero tabel): www.qbatura.info (http://www.qbatura.info/)

zwiastun
05-11-2007, 22:11
1. Zero tabel nie jest żadnym ideałem, do którego należy dążyć. Tabele są takim samym elementem dokumentów, także HTML, jak każdy inny. rzecz w tym, czy są stosowane zgodnie ze swoim przeznaczeniem. Jeśli prezentujemy dane tabelaryczne to naturalnym sposobem prezentacji jest tabela (z drobną uwagą - niektóre dane w dokumentach tekstowych można formatować tabulatorem bez korzystania z tabel, aktualnie w CSS2 możliwości takiej w zasadzie nie ma. w zasadzie, bo można skorzystać ze znacznika pre, ale to uciążliwe).

2. Problem z tabelami w Joomla polega na zastosowaniu ich do rozmieszczania treści (czyli formatowania układu):
a) w szablonach
b) w kodzie
W szablonach to dziś tylko kwestia umiejętności projektanta. CSS pozwala się obyć bez tabel użytych w nie swojej roli.
W kodzie - gorzej. Ale - takie rozwiązanie mamy zastosowane na witrynie pomocy i demo, można skorzystać ze zmodyfikowanego wydania Joomla - http://www.demo.joomla.pl/content/view/34/26/ - Accessible Joomla! - http://www.a8ejoomla.com, co już pokazywał tu Jac
Autorzy projektu dokonali licznych zmian w kodzie, eliminując tabele i javascript. Oczywiście, rozwiązanie nadal można doskonalić w szczegółach.

W przypadku modułów problem tabel został rozwiązany w Joomla! jeszcze zanim był Joomla. Wystarczy zastosować odpowiedni argument style w funkcji LoadModues w szablonie.

Kłopot sprawiaja rozliczne komponenty, gdzie nadal królują tabele, ale i to się zmienia.

Marzenia o patTemplate trzeba odłożyć, niestety lub stety ad acta. W Joomla 1.5 zachowano możliwość korzystania z patTemplate tylko ze względu na kompatybilność wstecz. CoreDev po głębszych analizach wycofało się z zamiaru oparcia modelowania szablonów za pomocą patTempate. Zastosowany w J! 1.5 wzorzec projektowy MVC (Model-Widok-Kontroler (sterownik) - jeśli będzie konsekwentnie stosowany w rozszerzeniach - wydziela kod warstwy widoku (a szerzej interfejsu użytkownika) do odrębnych skryptów, co da pełne podstawy do rzeczywiście elastycznego korzystania z html i css tudzież systemów szablonów.
3. Przykład jest bardzo dobry. Ale proszę go zastosować do rozbudowanej witryny. Na niewielkiej witrynie, jak przykładowa, osiągnięcie takiego efektu - przy wykorzystaniu projektu a8e to po prostu pikuś!

kobylinski
06-11-2007, 10:06
Accessible Joomla! - http://www.a8ejoomla.com, co już pokazywał tu Jac
Autorzy projektu dokonali licznych zmian w kodzie, eliminując tabele i javascript. Oczywiście, rozwiązanie nadal można doskonalić w szczegółach.




Marzenia o patTemplate trzeba odłożyć, niestety lub stety ad acta. W Joomla 1.5 zachowano możliwość korzystania z patTemplate tylko ze względu na kompatybilność wstecz. CoreDev po głębszych analizach wycofało się z zamiaru oparcia modelowania szablonów za pomocą patTempate. Zastosowany w J! 1.5 wzorzec projektowy MVC (Model-Widok-Kontroler (sterownik) - jeśli będzie konsekwentnie stosowany w rozszerzeniach - wydziela kod warstwy widoku (a szerzej interfejsu użytkownika) do odrębnych skryptów, co da pełne podstawy do rzeczywiście elastycznego korzystania z html i css tudzież systemów szablonów.
Dzięki za info.

Jac
06-11-2007, 12:02
3. Przykład jest bardzo dobry. Ale proszę go zastosować do rozbudowanej witryny. Na niewielkiej witrynie, jak przykładowa, osiągnięcie takiego efektu - przy wykorzystaniu projektu a8e to po prostu pikuś!

Zgadzam się ze wszystkim, co napisał Zwiastun.
Uważam jednak, że umiejętnie projektując i budując witrynę w połączeniu z projektem a8ejoomla można zdziałać naprawdę sporo. I może to być naprawdę duża witryna. Wszystko zależy od postawionego na starcie celu, wymagań jakie stoją przed projektem i umiejętności wykonawcy.
Na pewno warto zainteresować się projektem a8ejoomla.

kobylinski
06-11-2007, 12:51
Oczywiście nie zapominając o tym, że sensem projektowania tego typu witryn jest uniwersalność medium na którym strona jest odtwarzana. Tak to tylko IMO sztuka dla sztuki :P.

Łukasz Macuga
08-11-2007, 12:04
A propos stronki qbatura.info, mam wrażenie że efekt braku tabel w treści został osiągnięty wstawieniem artykułu w moduł (są rozszerzenia to umożliwiające). Świadczy o tym na moje oko ten fragment kodu:


div id="right">
<div class="moduletable-ofirmie">
<h3>O firmie</h3>
Pracownia Projektowa QBATURA istnieje
od 2006 roku...(tu dalsza cześć artu)
</div>
</div>
Może się mylę to proszę wtedy o poprawienie mnie. Jeśli jest
tak jak myślę to na dłuższą metę cięzko by z tego zrobić dużą,
rozbudowaną witrynę.

kobylinski
08-11-2007, 12:20
Zobacz jak jest na innych stronach. Kod bardziej przypomina normalny artykuł, (klasy: contentintro i contentfull).

Łukasz Macuga
08-11-2007, 12:53
Najlepiej jakby się sam autor site'u wypowiedział:) Ja w cssie nie widzę tych klas, wiec to pewnie przeróbka pliku content.php w takim razie.

Jac
08-11-2007, 13:33
Marek Kobyliński słusznie Cię naprowadził.
Artykuły są opisane klasami: contentitem, contentintro i contentfull.

Łukasz Macuga
08-11-2007, 13:59
Ok. Ale pliki z components/com_content/ też przerabiałeś? Ja w nie na razie nie ingerowałem ale się przymierzam. Przerobiłem za to modules/mod_mainmenu.php żeby nie robić menu za pomocą listy a zwykłych bloków.

Jac
08-11-2007, 14:59
Po co przerabiać coś, co już ktoś zrobił. Znowu się powtórzę: zainteresuj się projektem a8ejoomla (http://www.a8ejoomla.com/).

kobylinski
08-11-2007, 15:10
Ok. Ale pliki z components/com_content/ też przerabiałeś? Ja w nie na razie nie ingerowałem ale się przymierzam. Przerobiłem za to modules/mod_mainmenu.php żeby nie robić menu za pomocą listy a zwykłych bloków.

Moduł exmenu. Nie trzeba wiele przerabiać, poza tym można przygotować templatkę w patTemplate.

slodown
25-02-2009, 16:28
http://www.templatki-joomla.pl