Σχόλια στο Top 10 κακών συνηθειών στη συγγραφή του markup http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/ Ένα blog όπου θα δημοσιεύω κατά καιρούς μικρά tips που ανακαλύπτω για το web design & development Tue, 25 Nov 2008 14:33:54 +0000 http://wordpress.com/ hourly 1 Από: gstoumpos http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-36 gstoumpos Tue, 22 Apr 2008 11:41:51 +0000 http://leaverou.wordpress.com/?p=18#comment-36 Με όλα αυτά που λέτε καταλαβαίνω ότι έχω πολύ δρόμο ακόμη για το ποιοτικό webdesign εμαθα κάποτε html και έχω μείνει πλέον πίσω Άντε ξανά διάβασμα! Με όλα αυτά που λέτε καταλαβαίνω ότι έχω πολύ δρόμο ακόμη για το ποιοτικό webdesign
εμαθα κάποτε html και έχω μείνει πλέον πίσω
Άντε ξανά διάβασμα!

]]> Από: leaverou http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-33 leaverou Tue, 15 Apr 2008 10:48:25 +0000 http://leaverou.wordpress.com/?p=18#comment-33 Ναι, το είχα βρει και αυτό... Ο κώδικας του όντως είναι σχετικά λίγος... Ωστόσο, η background image που απαιτείται είναι τεράστια σε σχέση με την αντίστοιχη table λύση (που απαιτεί 5 πολύ μικρές εικόνες), και σε περιορίζει (έστω και χαλαρά) στις διαστάσεις. Δηλαδή όταν το container ξεπεράσει περίπου το διπλάσιο του μήκους/πλάτους του background image, το layout θα "σπάσει"... Ναι, το είχα βρει και αυτό…
Ο κώδικας του όντως είναι σχετικά λίγος…
Ωστόσο, η background image που απαιτείται είναι τεράστια σε σχέση με την αντίστοιχη table λύση (που απαιτεί 5 πολύ μικρές εικόνες), και σε περιορίζει (έστω και χαλαρά) στις διαστάσεις. Δηλαδή όταν το container ξεπεράσει περίπου το διπλάσιο του μήκους/πλάτους του background image, το layout θα “σπάσει”…

]]> Από: e. http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-32 e. Tue, 15 Apr 2008 10:40:50 +0000 http://leaverou.wordpress.com/?p=18#comment-32 Νομίζω ότι αυτό που περιγράφεις υπάρχει εδώ: <a href="http://www.schillmania.com/projects/dialog2/" rel="nofollow">http://www.schillmania.com/projects/dialog2/</a> Είναι λίγο μπερδεμένο αλλά ελπίζω να βοηθήσει. Άλλες πηγές υπάρχουν συγκεντρωμένες εδώ: <a href="http://cssgallery.info/rounded-cornes-css/" rel="nofollow"> http://cssgallery.info/rounded-cornes-css/</a> Νομίζω ότι αυτό που περιγράφεις υπάρχει εδώ: http://www.schillmania.com/projects/dialog2/
Είναι λίγο μπερδεμένο αλλά ελπίζω να βοηθήσει.
Άλλες πηγές υπάρχουν συγκεντρωμένες εδώ: http://cssgallery.info/rounded-cornes-css/

]]> Από: leaverou http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-31 leaverou Tue, 15 Apr 2008 08:49:14 +0000 http://leaverou.wordpress.com/?p=18#comment-31 Ενδιαφέρον... Αν και δεν το χρειάζομαι ακόμα, απλά θυμάμαι ότι όταν το χρειάστηκα δεν είχα καταφέρει να βρω ή να σκεφτώ ούτε μία λύση σε CSS layout... Ενδιαφέρον…
Αν και δεν το χρειάζομαι ακόμα, απλά θυμάμαι ότι όταν το χρειάστηκα δεν είχα καταφέρει να βρω ή να σκεφτώ ούτε μία λύση σε CSS layout…

]]> Από: tsiloboy http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-30 tsiloboy Mon, 14 Apr 2008 19:55:41 +0000 http://leaverou.wordpress.com/?p=18#comment-30 Νομίζω την απάντηση σε αυτό που ρωτάς ("Πως κάνουμε χωρίς tables ένα κουτάκι με κείμενο χωρίς σταθερό πλάτος ή ύψος με στρογγυλεμένες γωνίες...") θα την έχω διαβάσει σε αυτό το βιβλίο <a href="http://www.friendsofed.com/book.html?isbn=9781590596142" rel="nofollow">CSS Mastery: Advanced Web Standards Solutions</a> Νομίζω την απάντηση σε αυτό που ρωτάς (“Πως κάνουμε χωρίς tables ένα κουτάκι με κείμενο χωρίς σταθερό πλάτος ή ύψος με στρογγυλεμένες γωνίες…”) θα την έχω διαβάσει σε αυτό το βιβλίο

CSS Mastery: Advanced Web Standards Solutions

]]> Από: leaverou http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-28 leaverou Mon, 14 Apr 2008 16:34:05 +0000 http://leaverou.wordpress.com/?p=18#comment-28 Κι εγώ πολύ πρόσφατα μετέβην (τη σκότωσα τη λέξη; Ξέρει κανείς ποιός είναι ο αόριστος του μεταβαίνω; ) σε CSS layout. Τις περισσότερες γνώσεις για αυτό τις είχα αποκτήσει σιγά σιγά καιρό πριν, αλλά επέμενα φανατικά σε tables επειδή με βόλευαν*. Τελικά αναγκάστηκα να κάνω ένα site εντελώς standards compliant, και από τότε κόλλησα με το CSS layout και το semantic markup για τα οποία με έπρηζαν τόσα χρόνια οι συνάδελφοι και τους αγνοούσα :P Το Dreamweaver όντως έχει βελτιωθεί πάρα πολύ σε επίπεδο κώδικα. Αν και ούτως ή άλλως, για πόσο καιρό θα δημιουργεί κάποιος σε design view? Μόλις μάθει πέντε πράγματα, θα αρχίσει να θέλει να έχει περισσότερο έλεγχο πάνω στη σελίδα. <strong>*Σπαζοκεφαλιά:</strong> Πως κάνουμε χωρίς tables ένα κουτάκι με κείμενο χωρίς σταθερό πλάτος ή ύψος με στρογγυλεμένες γωνίες, 90% διαφανές μονόχρωμο φόντο και από πίσω gradient? (με λιγότερο όγκο markup σε σχέση με αυτόν που θα χρειαζόταν αν γινόταν με tables and that includes javascript generated markup). Προσωπικά, δεν έχω βρει ακόμα κάποια λύση. Ακόμα και το facebook, το συγκεκριμένο πράγμα το έχει κάνει με tables εκεί που το χρειάστηκε (σε κάτι DHTML popups). Κι εγώ πολύ πρόσφατα μετέβην (τη σκότωσα τη λέξη; Ξέρει κανείς ποιός είναι ο αόριστος του μεταβαίνω; ) σε CSS layout. Τις περισσότερες γνώσεις για αυτό τις είχα αποκτήσει σιγά σιγά καιρό πριν, αλλά επέμενα φανατικά σε tables επειδή με βόλευαν*.

Τελικά αναγκάστηκα να κάνω ένα site εντελώς standards compliant, και από τότε κόλλησα με το CSS layout και το semantic markup για τα οποία με έπρηζαν τόσα χρόνια οι συνάδελφοι και τους αγνοούσα :P

Το Dreamweaver όντως έχει βελτιωθεί πάρα πολύ σε επίπεδο κώδικα. Αν και ούτως ή άλλως, για πόσο καιρό θα δημιουργεί κάποιος σε design view? Μόλις μάθει πέντε πράγματα, θα αρχίσει να θέλει να έχει περισσότερο έλεγχο πάνω στη σελίδα.

*Σπαζοκεφαλιά: Πως κάνουμε χωρίς tables ένα κουτάκι με κείμενο χωρίς σταθερό πλάτος ή ύψος με στρογγυλεμένες γωνίες, 90% διαφανές μονόχρωμο φόντο και από πίσω gradient? (με λιγότερο όγκο markup σε σχέση με αυτόν που θα χρειαζόταν αν γινόταν με tables and that includes javascript generated markup). Προσωπικά, δεν έχω βρει ακόμα κάποια λύση. Ακόμα και το facebook, το συγκεκριμένο πράγμα το έχει κάνει με tables εκεί που το χρειάστηκε (σε κάτι DHTML popups).

]]> Από: _hopelesscase_ http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-25 _hopelesscase_ Mon, 14 Apr 2008 16:05:21 +0000 http://leaverou.wordpress.com/?p=18#comment-25 Ωραία και χρήσιμα τα παραπάνω. Μέχρι πριν από 1 χρόνο ασχολούμουν με tables, στη συνέχεια έβγαλα τα μάτια μου στην οθόνη (δεν είχα κάποιον να μου τα δείξει με το νι + με το σίγμα) για να εμπεδώσω το tableless css layout και να είμαι σε θέση να φτιάχνω σελίδες σύμφωνες με τα στάνταρντ. Ωστόσο μέρος της ευθύνης φέρουν και παλιότερες εκδόσεις λογισμικού όπως το Dreamweaver που αφήνουν πολλά σκουπίδια στον κώδικα αν χρησιμοποιήσεις τους αυτοματισμούς του γραφικού περιβάλλοντος -προσωπικά γράφω κατευθείαν κώδικα, αλλά είναι σύνηθες για έναν webdesigner να μην κάνει το ίδιο. Το νεότερο DW έχω ακούσει ότι έχει βελτιωθεί κατά πολύ στον τομέα "σκουπίδια στον κώδικα", ισχύει? Ωραία και χρήσιμα τα παραπάνω. Μέχρι πριν από 1 χρόνο ασχολούμουν με tables, στη συνέχεια έβγαλα τα μάτια μου στην οθόνη (δεν είχα κάποιον να μου τα δείξει με το νι + με το σίγμα) για να εμπεδώσω το tableless css layout και να είμαι σε θέση να φτιάχνω σελίδες σύμφωνες με τα στάνταρντ.

Ωστόσο μέρος της ευθύνης φέρουν και παλιότερες εκδόσεις λογισμικού όπως το Dreamweaver που αφήνουν πολλά σκουπίδια στον κώδικα αν χρησιμοποιήσεις τους αυτοματισμούς του γραφικού περιβάλλοντος -προσωπικά γράφω κατευθείαν κώδικα, αλλά είναι σύνηθες για έναν webdesigner να μην κάνει το ίδιο.
Το νεότερο DW έχω ακούσει ότι έχει βελτιωθεί κατά πολύ στον τομέα “σκουπίδια στον κώδικα”, ισχύει?

]]> Από: leaverou http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-23 leaverou Fri, 11 Apr 2008 22:42:41 +0000 http://leaverou.wordpress.com/?p=18#comment-23 Τα deprecated tags & attributes συνήθως αφορούν το presentation, την εμφάνιση της ιστοσελίδας (σίγουρα θα έχεις ακούσει/διαβάσει την έκφραση "presentational tags"). Σήμερα, υπάρχει η τάση να διαχωρίζεται το markup από το presentation (με το δεύτερο να εκπληρώνεται μέσω του CSS). Αυτό έχει πολλαπλά οφέλη: 1. (και κυριότερο για μένα) Ενώ ο όγκος της σελίδας παραμένει ο ίδιος (σε ΚΒ), ένα μεγάλο τμήμα του μεταφέρεται στα CSS αρχεία, τα οποία περνάνε στην cache του browser, με αποτέλεσμα ο χρήστης να αντιλαμβάνεται πιο ελαφρύ το site. 2. Καλύτερο SEO (τα επιχειρήματα για αυτό διάφορα, το αποτέλεσμα διαπιστωμένο) 3. Καθαρότερος κώδικας 4. Ευκολότερες αλλαγές 5. Σιγουριά ότι το site θα φαίνεται σωστά και στις μελλοντικές εκδόσεις των browsers. Σίγουρα παίζουν ρόλο και οι αναβαθμίσεις των browsers, αλλά όχι με τον τρόπο που φαντάζεσαι. Απλά αν τα νέα features στο specification δεν γινόντουσαν implement από κανέναν browser, προφανώς οι web developers/designers (στην Ελλάδα και οι 2 γράφουν markup) δεν θα τα ακολουθούσαν. Δεν είμαι φανατική με τα web standards (μέχρι προσφάτως χρησιμοποιούσα tables για layout), αλλά αναγνωρίζω ότι έχουν αρκετά πλεονεκτήματα. Πάντως, το εν λόγω άρθρο δεν είχε διδακτικό χαρακτήρα (δλδ "κάντε αυτό"/"μην κάνετε εκείνο") αλλά ήταν απλά ένα ξέσπασμα δικό μου, με όσα εκνευρίζουν εμένα όταν τα βλέπω, μιας και εκείνη τη στιγμή είχα πέσει πάνω σε ένα δείγμα σελίδας που είχε τα περισσότερα εξ αυτών. Κάποιους άλλους τους ενοχλούν διαφορετικά πράγματα (πχ τo μη semantic markup). Κάποια από αυτά τα έχω κάνει κι εγώ στο παρελθόν πάντως (1,5,10). :) Τα deprecated tags & attributes συνήθως αφορούν το presentation, την εμφάνιση της ιστοσελίδας (σίγουρα θα έχεις ακούσει/διαβάσει την έκφραση “presentational tags”).
Σήμερα, υπάρχει η τάση να διαχωρίζεται το markup από το presentation (με το δεύτερο να εκπληρώνεται μέσω του CSS). Αυτό έχει πολλαπλά οφέλη:
1. (και κυριότερο για μένα) Ενώ ο όγκος της σελίδας παραμένει ο ίδιος (σε ΚΒ), ένα μεγάλο τμήμα του μεταφέρεται στα CSS αρχεία, τα οποία περνάνε στην cache του browser, με αποτέλεσμα ο χρήστης να αντιλαμβάνεται πιο ελαφρύ το site.
2. Καλύτερο SEO (τα επιχειρήματα για αυτό διάφορα, το αποτέλεσμα διαπιστωμένο)
3. Καθαρότερος κώδικας
4. Ευκολότερες αλλαγές
5. Σιγουριά ότι το site θα φαίνεται σωστά και στις μελλοντικές εκδόσεις των browsers.

Σίγουρα παίζουν ρόλο και οι αναβαθμίσεις των browsers, αλλά όχι με τον τρόπο που φαντάζεσαι. Απλά αν τα νέα features στο specification δεν γινόντουσαν implement από κανέναν browser, προφανώς οι web developers/designers (στην Ελλάδα και οι 2 γράφουν markup) δεν θα τα ακολουθούσαν.

Δεν είμαι φανατική με τα web standards (μέχρι προσφάτως χρησιμοποιούσα tables για layout), αλλά αναγνωρίζω ότι έχουν αρκετά πλεονεκτήματα.

Πάντως, το εν λόγω άρθρο δεν είχε διδακτικό χαρακτήρα (δλδ “κάντε αυτό”/”μην κάνετε εκείνο”) αλλά ήταν απλά ένα ξέσπασμα δικό μου, με όσα εκνευρίζουν εμένα όταν τα βλέπω, μιας και εκείνη τη στιγμή είχα πέσει πάνω σε ένα δείγμα σελίδας που είχε τα περισσότερα εξ αυτών. Κάποιους άλλους τους ενοχλούν διαφορετικά πράγματα (πχ τo μη semantic markup).
Κάποια από αυτά τα έχω κάνει κι εγώ στο παρελθόν πάντως (1,5,10). :)

]]> Από: gstoumpos http://leaverou.wordpress.com/2008/04/10/top-10-%ce%ba%ce%b1%ce%ba%cf%8e%ce%bd-%cf%83%cf%85%ce%bd%ce%b7%ce%b8%ce%b5%ce%b9%cf%8e%ce%bd-%cf%83%cf%84%ce%b7-%cf%83%cf%85%ce%b3%ce%b3%cf%81%ce%b1%cf%86%ce%ae-%cf%84%ce%bf%cf%85-markup/#comment-22 gstoumpos Fri, 11 Apr 2008 22:14:31 +0000 http://leaverou.wordpress.com/?p=18#comment-22 Πολύ καλός δεκάλογος κακών συνηθειών. Εγώ σαν αρχάριος έχω βοηθηθεί πάρα πολύ από τη μελέτη του w3schools.com Το ερώτημά μου είναι όμως ποιός ή ποιά αρχή ορίζει ποια είναι τα deprecated tags & attributes και ποιο το λάθος markup ώστε να δημιουργείται πρόβλημα με το W3C validity; Σαν αυτοδίδακτος σε HTML μέσω διάφορων tutorials χρησιμοποιώ πολλά τέτοια απαρχαιομένα tags τα οποία εμφανίζουν όμως σωστά αυτό που θέλω. Μήπως στην όλη αυτή ιστορία παίζουν ρόλο οι αναβαθμίσεις της κάθε γενιάς του εκάστοτε browser (π.χ. ωραίο το καινούργιο Photoshop CS αλλά κάνουμε τη δουλειά μας και με το απαρχαιομένο 6.0); Πολύ καλός δεκάλογος κακών συνηθειών.
Εγώ σαν αρχάριος έχω βοηθηθεί πάρα πολύ από τη μελέτη του w3schools.com
Το ερώτημά μου είναι όμως ποιός ή ποιά αρχή ορίζει ποια είναι τα deprecated tags & attributes και ποιο το λάθος markup ώστε να δημιουργείται πρόβλημα με το W3C validity;
Σαν αυτοδίδακτος σε HTML μέσω διάφορων tutorials χρησιμοποιώ πολλά τέτοια απαρχαιομένα tags τα οποία εμφανίζουν όμως σωστά αυτό που θέλω.
Μήπως στην όλη αυτή ιστορία παίζουν ρόλο οι αναβαθμίσεις της κάθε γενιάς του εκάστοτε browser (π.χ. ωραίο το καινούργιο Photoshop CS αλλά κάνουμε τη δουλειά μας και με το απαρχαιομένο 6.0);

]]>