CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Σχόλια από τον χώρο του Web Design, Web Development.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από chchrist » 09 Φεβ 2006 02:15

Ωραίο το παράδειγμα αλλά και αυτό σε είναι σχεδιασμένο με css και όλα τα objects που φορτώνει..Οπότε αν το
Asynchronous JavaScript And XML είναι το μέλλον και σχεδιάζεται με tableless css τότε και το tableless css είναι το μέλλον και θα ισχύει όσο ισχύει και το παραπάνω.
Άλλωστε δεν χρειάζεται να μαλώνουμε για κάτι που έχει ήδη επίκρατήσει όπως μπορούμε να δούμε απο πολλούς γνωστούς ιστοχώρους που αλλάζουν σε tabless design.
Αλλά και πάλι αν σε κάποια χρόνια βγει κάποια καινούργια τεχνολογία που θα είναι αποδεδειγμένα καλύτερη και με περισσότερα πλεονεκτήματα απο το css θα πρέπει να την ακολουθήσουμε για δικό μας πρώτα όφελος. Άλλωστε νομίζω αυτή είναι η μαγεία αυτού του επαγγέλματος οτι ποτέ δεν μένει στάσιμο, οτι πάντα κάτι μαθαίνεις και εξελίζεσε μαζί του.

ΥΓ : Αυτό το <center></center> στο source του site βγάζει μάτι ρε fafos...

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από skeftomilos » 09 Φεβ 2006 07:49

cordis έγραψε:εγώ θέλω να το δω τελείως πρακτικά το πράγμα γιατί δεν είμαι designer. Το freestuff είναι μεν με tables, αλλά είναι full CSS. Αν πω ότι κάθομαι 3-4 μήνες και σκοτώνομαι να το κάνω tabless χωρίς να αλλάξω κάτι στο layout, έτσι όπως είναι τώρα. Εκτός από το "τρέντι", όπως λέει ο cdhyper, του πράγματος θα κερδίσω σε bandwidth τίποτα;
Η μέγιστη δυνατή εξοικονόμηση σε bandwidth που είναι σήμερα θεωρητικά εφικτή για δυναμικά sites με βάση την υπάρχουσα τεχνολογία, είναι μάλλον το client-side rendering με JavaScript. Η ιδέα είναι να περιοριστεί η μετακίνηση των bytes από τον server στον browser σε ουσιώδη δεδομένα. Για παράδειγμα εδώ στο FreeStuff τα καθαρά δεδομένα είναι το περιεχόμενο των posts, τα στοιχεία των μελών, ο τίτλος του θέματος, και μερικές ακόμα λεπτομέρειες. Στην ουσία πρόκειται για τα δεδομένα που βρίσκονται στη database του Forum, τα οποία συναρμολογούνται με βάση μια PHP template και το αποτέλεσμα στέλνεται στον browser. Αν η template αλλάξει σε tableless layout το output θα είναι μικρότερο σε μέγεθος αλλά θα εξακολουθήσει να περιέχει μη-δεδομένα (markup, στατικό περιεχόμενο). Επομένως η λογική σκέψη που έρχεται στο νου είναι να μεταφερθεί η διαδικασία της συναρμολόγησης από των server στον browser. Θα χρειαστεί μία client-side template rendering engine, και μία αρκετά καλή, ελαφριά και γρήγορη είναι οι JavaScript Templates.

Το καλό η κακό με αυτή την προσέγγιση είναι ότι η δομή του markup χάνει σε μεγάλο βαθμό τη σπουδαιότητά της. Ακόμα και το πιο φρικαλέο tag soup spaghetti monster που αντίκρισε ποτέ ανθρώπου μάτι θα έχει παρόμοιους χρόνους φόρτωσης και εμφάνισης με το πιο τέλεια φινιρισμένο, λιτό και απέριττο CSS κομψοτέχνημα. Και στις δύο περιπτώσεις τα δεδομένα που στέλνει ο server είναι τα ίδια, ενώ η client-side συναρμολόγηση σπάνια θα διαρκέσει περισσότερο από μισό δευτερόλεπτο.

Το παράδειγμά σου Fafos αν κατάλαβα καλά στηρίζεται σε μια παρόμοια ιδέα, αλλά δε βασίζεται σε templates (correct me).

Πάντως το FreeStuff όπως είναι σήμερα παραμένει ένα από τα πιο γρήγορα forums, οπότε υποθέτω ότι και η κατανάλωση bandwidth πρέπει να είναι κοντά στο miminum. Το gzip να είναι καλά! :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από ThyClub » 09 Φεβ 2006 08:43

skeftomilos

Το ξέρεις οτι κάθε φορά που γράφεις εδώ μαθαίνω κάτι νέο; :P :P

Αλήθεια τώρα αυτό πώς ακριβώς δουλεύει; Δέν πρέπει ο κάθε επισκέπτης να έχει και το template κατεβασμένο;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από dimsis » 09 Φεβ 2006 10:22

ThyClub δεν εννοώ ακριβώς αυτό όταν λέω tiled background. Δες εδώ: http://www.freestuff.gr/forums/viewtopic.php?t=20340
π.χ. δες στο http://www.orestiada.gr/ την δεξιά στήλη που έχει ως φόντο την εικόνα rightcolbg tiled και ασφαλώς την έχω βάλει με: <td valign="top" class="RightColumn"> όπου στο class RightColumn υπάρχει στο css: background : #F8F8F4 url(rightcolbg.gif);
Αυτό ρωτούσα/ρωτάω πως μπορεί να γίνει εξίσου εύκολα με CSS.

skeftomilos Εικόνα

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από ThyClub » 09 Φεβ 2006 10:52

@dimsis

Νομίζω οτι υπάρχει τρόπος και με css με την ιδιότητα display: table; αλλά δεν είμαι σίγουρος. Το απόγευμα που θα ξυπνήσω θα προσπαθήσω να κάνω μια δοκιμή. Τώρα νιώθω τα μάτια μου να μην είναι και τόσο υπάκουα :-?

Άντε καληνύχτα σας :D :D :D :D

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από dimsis » 09 Φεβ 2006 10:52

[offtopic] fafos άλλο trend και ο όρος Ajax. Παλιές τεχνικές με καινούργιο όνομα. Αλλά πραγματικά με σωστή υλοποίηση μπορεί να δώσει αέρα desktop εφαρμογής σε μια web app.

Ήδη υπάρχουν resource /articles / link / tutorial sites για Ajax:
http://www.ajaxian.com
http://ajaxpatterns.org/
http://www.ajaxmatters.com/
http://www.everythingajax.com/
http://www.ajaxinfo.com/
http://www.ajaxgoals.com/
http://www.ajaxfreaks.com/

και πολλά άλλα... πραγματικά χαμός...

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από cordis » 09 Φεβ 2006 12:33

το AJAX ναι είναι κάτι που έχει σίγουρα μέλλον είτε είναι κάτι παλιό με νέο όνομα είτε κάτι νέο. Θέλω να μαζέψω μερικά στοιχεία πρώτα και ίσως να ανοίξω και μια περιοχή για αυτό. Αυτό που λέει ο skeftomilos θα μπορούσε να περιλαμβάνετε μέσα στην οικογένεια του AJAX, αφού αυτός είναι ο σκοπός του, να μεταφέρει πράγματα από τον server στον client και να ενημερώνει συγκεκριμένα στοιχεία της σελίδας χωρίς να χρειάζεται να φορτώσει ολόκληρη.
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από cherouvim » 09 Φεβ 2006 12:43

Endiaferousa i tehniki afti Skeftomile.
Mia pio sympagis methodologia einai i metatropi enos XML based document se HTML ston client me ti hrisi XSLT.

Etsi mporoume na stiloume sto client to

Κώδικας: Επιλογή όλων

<?xml version="1.0" encoding="ISO-8859-7"?>
<thread>
  <post>
    <title>CSS or not?</title>
    <author>cordis</author>
    <date>2006.02.09</date>
    <text>bla bla</text>
  </post>
  <post>
    <title>re&#58; CSS or not?</title>
    <author>cherouvim</author>
    <date>2006.02.09</date>
    <text>foo bar</text>
  </post>
...
</thread>
Kai mazi me to XSLT sto client side na tiliksei ta dedomena me to markup pou thes.

To provlima kai stis 2 periptoseis (js, client-side-xslt) einai oti den sou egyatai kaneis oti tha dei o hristis to apotelesma tou rendering.

To JS mporei na einai apenergopoihmeno, kai client-side xslt den ypostirizoun oloi oi browsers.

To JS mporei na yperexei apo apopsi bandwidth logo tou oti anti gia XML mporeis an thes na stileis alla pragmata opos JSON, serialized objects ktl. To xml apo mono tou exei kapio overhead logo tagnames alla kai pali me to gzip ta pragmata veltionontai.

Opos kai naxei ola afta einai poly makria akoma, ypo ti proypothesi oti theloume sigouri emfanisi tou periehomenou ston hristi.

Me ajax to provlima lynete mono me mia Graceful degradation prosegisi opou an to JS einai apenergopoihmeno ta user requests metafrazontai se kanonika http server request/response pairs.

Άβαταρ μέλους
ForzaInter
Δημοσιεύσεις: 340
Εγγραφή: 22 Οκτ 2005 22:37
Τοποθεσία: Διπλανό δωμάτιο

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από ForzaInter » 09 Φεβ 2006 12:55

O κλασικός έλληνας...Πετάει έναν όρο χωρίς να ξέρει τι σημαίνει ΠΡΑΓΜΑΤΙΚΑ. Επειδή έτυχε σε αυτό το εξάμηνο να διδάχτηκα Design for All στη Σχολή, παραθέτω τον ορισμό του όρου accessible, δηλαδή προσβάσιμος. Ένα προσβάσιμο web site:
1. Φορτώνει γρήγορα.
2. Είναι viewable και λειτουργεί καλά σε διαφορετικούς browsers, οθόνες διαφορετικού μεγέθους και βάθους χρώματος, και σε διαφορετικά λειτουργικά συστήματα.
3. Είναι εύχρηστο για ανθρώπους με αναπηρίες.
4. Γίνεται κατανοητό από ανθρώπους με διαφορετικό επίπεδο μόρφωσης για κάποιο θέμα και τεχνική ειδίκευση και από ανθρώπους διαφορετικής κουλτούρας.


Επίσης, τρόποι για να κάνεις προσβάσιμο το site σου:
http://diveintoaccessibility.org/
I told you we would make it to the sunshine one day...you just got there a little quicker

Εικόνα

Άβαταρ μέλους
3dotsgr
Δημοσιεύσεις: 106
Εγγραφή: 20 Ιαν 2005 19:12
Τοποθεσία: Κομοτηνή
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από 3dotsgr » 09 Φεβ 2006 14:02

για να έρθω σε αυτό που ενδιαφέρει τον διαχειριστή, Cordis μάλλον θα πρέπει να σκεφτείς το imageless και όχι το tableless, για να δεις μια σημαντική διαφορά στο bandwidth. :) Άν τα images είναι αυτά που καταναλώνουν το περισσότερο bandwidth σε μια τυπική ιστοσελίδα, τότε μάλλον θα πρέπει να κινηθούμε προς αυτή την κατευθυνση και να τα ελαττώσουμε. Άν θυμάμαι καλά σε ένα αρθρο που είχα διαβάσει έλεγε ότι το 55% οφείλεται στα images, ένα 25% στο περιεχόμενο, ένα 5% σε Javascript, ένα 5% σε CSS ( για styling fonts, style tags μόνο κτλ. ) , ένα 5% σε άλλα html tags όπως meta, body κτλ. και ένα 5% σε html Table tags. Οπότε αν προσπαθήσουμε να μειώσουμε αυτό το 5% και να αντικαταστήσουμε αυτά τα table tags με divs, definition terms, definition lists κτλ. δεν θα κάνει και τόσο μεγάλη διαφορά. Δεν θέλω να είμαι απόλυτος, δεν ξέρω αν όντως έτσι είναι τα πράγματα, ίσως το άρθρο που διάβασα να είναι λάθος :-)
You take the blue pill and the story ends. You wake in your bed and believe whatever you want to believe. You take the red pill and you stay in Wonderland and I show you how deep the rabbit-hole goes. Remember.. all I am offering is the truth, nothing more.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από ThyClub » 09 Φεβ 2006 19:14

Επανέρχομαι σε αυτό που έλεγα για το ποστ του dimsis. Παραθέτω μια προσπάθεια που ήταν απόλυτα επιτυχής στον FF αλλά με ΙΕ ακόμη τραβάω τα μαλιά μου. :evil:

Ο κώδικας είναι:

HTML

Κώδικας: Επιλογή όλων

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="wrap">
<div id="header">Header Header Header Header Header Header Header Header Header Header </div>
<div id="left">
<p>Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </p>
<p>Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </p>
<p>Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </p>
<p>Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </p>
<p>Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </p>
<p>Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </p>
<p>Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </p>
<p>Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </p>
</div>
<div id="right">
<p>Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </p>
</div>

<div id="center">
<p>
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 

Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... 
</p>
<p>
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 

Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... Sample text... 
Sample text... Sample text... Sample text... Sample text... Sample text... 
</p>

</div>
<div id="footer">Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer </div>
</div>



</body>

</html>
και CSS

Κώδικας: Επιλογή όλων

#wrap&#123;
	background-color&#58; silver;
&#125;

#header&#123;
	
	background-color&#58; red;
	width&#58;100%;
	height&#58;20px;
&#125;

#left&#123;

	background-color&#58; yellow;
	float&#58;left;
	width&#58;200px;
	margin-top&#58;20px;
	height&#58;99%;
	vertical-align&#58;top;
	margin-bottom&#58;2px;
&#125;

#right&#123;
	background-color&#58; yellow;
	float&#58;right;
	width&#58;200px;
	margin-top&#58;20px;
	height&#58;99%;
	vertical-align&#58;top;
	margin-bottom&#58;2px;
&#125;

#center&#123;
	background-color&#58; blue;
	margin-right&#58;200px;
	margin-left&#58;200px;
	margin-top&#58;20px;
	float&#58;justify;
&#125;

#footer&#123;
	display&#58;table;
	background-color&#58; magenta;
	clear&#58;both;
	width&#58;100%;
&#125;
Παρακάτω και μια screen με FF
Συνημμένα
heigh.jpg
Όλα καλά με FF αλλά με ΙΕ...

Άβαταρ μέλους
3dotsgr
Δημοσιεύσεις: 106
Εγγραφή: 20 Ιαν 2005 19:12
Τοποθεσία: Κομοτηνή
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από 3dotsgr » 09 Φεβ 2006 19:30

:D τον Lorem Ipsum Generator για την παραγωγή Filling text δεν τον έχεις υπόψην σου :P

float : justify; ?

νόμιζα ήταν left, right ή none τα possible values.... :)
You take the blue pill and the story ends. You wake in your bed and believe whatever you want to believe. You take the red pill and you stay in Wonderland and I show you how deep the rabbit-hole goes. Remember.. all I am offering is the truth, nothing more.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από ThyClub » 09 Φεβ 2006 19:45

Stam :P

Lorem ipsum generator? Nop. Gimme a link please
:P
Όσο αφορά το justify απλά πειραματιζόμουν για τον ΙΕ (ΠΟΤΕ ΔΕΝ ΞΕΡΕΙΣ ΜΕ ΤΟ ΔΙΑΟΛΕΜΕΝΟ) και έμεινε :wink:

Όποιος μπορεί και θέλει να help για να γίνει ίδιο και στον ΙΕ ας το κάνει.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από fafos » 09 Φεβ 2006 19:59

To AJAX einai h arxh mias neas proseggishs tou web afou oi apaithseis ton idiokthton kai ton xrhston auksanoun mera me thn hmera..
To AJAX den eksartatai oute apo ta css oute apo ta tables... se ligo kairo tha yparxoun ennalaktikes lyseis poly poio filikes ston developer..

Otan apanthsa se auto to thema hthela na sas epishmano oti otan ston kosmo tou web ginontai fovera pragmata eseis mallonete gia ta tables kai ta css pou yparxoun apo thn genesi tou web..
Otan tha malonete gia ton AJAX (h otidhpote neo tha yparxei se liga xronia) oi alloi tha exoun katarghsei to protokolo http :D

Afhste tis kokoromaxies kai afieroste ligo xrono sta nea pragmata pou erxontai... giati opos panta tha meinoume 10 xronia piso apo tous allous..

Gia osous endiaferontai: http://ajaxblog.com/

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από dimsis » 09 Φεβ 2006 20:10

Thanx ThyClub, αλλά καλύτερα πόσταρε στο άλλο thread http://www.freestuff.gr/forums/viewtopic.php?t=20340 που είχα ανοίξει γιατί εδώ βγαίνουμε offtopic. Όπως είχα γράψει, βρήκα σε μερικά sites κάποια παραδείγματα:
http://www.communitymx.com/content/arti ... &cid=AFC58
(δεν δείχνει σωστά σε IE το φόντο της αριστερής στήλης)

http://www.ilovejackdaniels.com/faux2.html
(επίσης ότι να'ναι)
... γενικώς ζόρι η δουλειά.

Lipsum Generator:
http://www.lipsum.com/

Απάντηση

Επιστροφή στο “Web Usability & Accessibility”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης