Ενημερώσεις

Blank Templates για "καθαρό" Ξεκίνημα: Το Απόλυτο Post

Ένα από τα βασικότερα πράγματα που πρέπει να προσέξουμε όταν ξεκινάμε να σχεδιάζουμε μια σελίδα είναι ο σκελετός μας. Πολλές φορές συναντάμε σελίδες οι οποίες είναι βασισμένες σε ένα έτοιμο theme (skin, templates, frameworks ή όπως αλλιώς τα λέει ο καθένας) το οποίο στη συνέχεια έχει τροποποιηθεί. Αυτή η τακτική δεν είναι πολύ καλή. Οι λόγοι είναι πολλοί...

Προσωπικά βρίσκω πολύ δύσκολο να δουλεύω κώδικα το οποίο έχει χτίσει κάποιος με τη δική του λογική. Γιατί μετά θα πρέπει να τον ακολουθήσω, ώστε να υπάρχει μια κοινή γραμμή. Αυτό όμως με περιορίζει και μου κοστίζει χρόνο, οπότε προτιμώ να ξεκινάω από το μηδέν, και αν όχι από το μηδέν, τουλάχιστον από ένα blank theme το οποίο μου προσφέρει τα βασικά για να ξεκινήσω (theme php files, reset rules κτλ.)

Ένας άλλο λόγος για τον οποίο θεωρώ κακό να βασιζόμαστε σε έτοιμα theme είναι ότι υπάρχουν μεγάλες πιθανότητες να είναι κακογραμμένα. Και πιστέψτε με οι πιθανότητες είναι εναντίον του καλού κώδικα. Παρακάτω λοιπόν έχω μαζέψει μια συλλογή με blank themes για διάφορα CMS αλλά και απλή HTML.

Κενά Themes για Wordpress

Starkers

Πρόκειται για ένα σχεδόν εντελώς κενό Theme. Διαθέτει μόνο CSS Reset Rule, φακέλους για την οργάνωση των CSS και JS αρχείων και τα βασικά PHP αρχεία που πρέπει να διαθέτει ένα Wordpress Theme.

Starter Theme

Σε αυτό το Theme θα βρείτε μόνο τα PHP αρχεία με τα βασικά Loop και Template Tags. Το CSS είναι άδειο.

Whiteboard

Στο ίδιο στυλ με τα παραπάνω και αυτό, προσφέρει τα βασικά και ένα Reset Rule.

Naked

To Naked ξεκινάει με μόνο τα βασικά PHP αρχεία αλλά διαθέτει και ένα πολύ βασικό design με δύο στήλες.

Sandbox

Το Sandbox περιέχει κάποιο στοιχειώδες Design. Είναι φτιαγμένο έτσι ώστε να μπορεί κάποιος να το επεξεργαστεί πειράζοντας μόνο το CSS. Περιέχει στο Functions.php και κάποιες επιπλέον δυνατότητες. Δείτε το Demo. Στο demo μπορείτε να δοκιμάσετε και μερικά άλλα πολύ ωραία minimal themes που προσφέρει το plaintext.org.

Wordpress Theme Generator

Δημιουργείστε το δικό σας Wordpress Themes επιλέγοντας τα χαρακτηριστικά που θέλετε να έχει.

Zen: Κενό Theme για Drupal

Το Zen είναι ότι πρέπει για να ξεκινήσει κάποιος να σχεδιάζει το πολύπλοκο Drupal. Μην κάνετε το λάθος να πάτε να κάνετε κάτι πάνω στο Bluemarine. Το Zen είναι ένας πολύ καλός σκελετός που μπορεί να επεξεργαστεί και μόνο από το CSS.

Κενό Theme για Joomla

Το Blank skeleton template παρέχει ένα βασικό design έτσι ώστε να δένει με τη λογική του Joomla και να μπορείτε μετά μόνο με CSS να το ντύσετε με χρώμα και ότι άλλο θέλετε.

Κενά Themes για bbPress

Στο bbpressraw.com θα βρείτε μια σειρά από κενά templates, για το αγαπημένο forum bbPress, σε πολλά διαφορετικά Layout.

Κενά HTML/CSS Templates

Code-Sucks CSS Layouts

Δύο μεγάλες συλλογές. Μία με Fixed Width Layouts και μία με την τεχνική Faux Columns.

Dynamic Drive CSS Layouts

Μεγάλη συλλογή από layouts αλλά λίγο... παλιάς τεχνολογίας.

Layout Gala

40 CSS-based layouts με fixed and fluid πλάτη.

CSS Boxes

Πολλές φορές μπορεί να θέλετε κουτάκια σε διάφορες διατάξεις αλλά όχι ολόκληρο template σελίδας.

CSS Creator

Διαλέγετε πως θέλετε να είναι το layout και όλα τα άλλα τα αναλαμβάνει ο Generator.

5 Δεκ 08 - 6:27 // Bookmark and Share
Εικόνα: lexx
Αλέξανδρος Λίγγρης
Ο Lexx είναι web guy, με διάφορες ικανότητες, κουσούρια και φιλοδοξίες. περισσότερα »

Διαβάστηκαν περισσότερο σήμερα

21 Σχόλια

Εικόνα: Ανώνυμος

Πω! πω! Βασιλική γνώμη! Χα! χα! Καλά, έχεις στήσει κανονική παράσταση με κορώνες, καπέλα κλπ...
Λοιπόν, λες και είχα παραγγείλει αυτό το ποστ! Εχω ξεκινήσει ένα σεμινάριο για κατασκευή ιστοσελίδας και μου ήρθαν κουτί αυτά που προτείνεις... Το wordpress generator το έχω δοκιμάσει παλαιότερα. Οταν και εφόσον θα νιώθω έτοιμη θα δοκιμάσω το CSS creator, αν και ακόμα νιώθω σχεδόν απόλυτα τυφλή..., αλλά πού θα πάει κάτι θα καταφέρω στο τέλος με το ψάξε - ψάξε και με το να σε διαβάζω τακτικά... Μας είπαν και για το zengarden εκεί που συζητούσαμε για CSS. Χμ! νιώθω να έχω βασιλική διάθεση που μόλις έχω αρχίσει να οσμίζομαι στο ελάχιστο κάποια πράγματα...

Παρ, 2008-12-05 06:45
Εικόνα: Ανώνυμος

Την όλη βασιλική έμπνευση τη συζητούσαμε με τον συνεργάτη Βαγγέλη. Είμαστε και οι δύο πολύ ταπεινά παιδιά.

Χαίρομαι πάρα πολύ που συνέπεσε το άρθρο με τα σεμινάρια σου. Ελπίζω να σε βοηθήσει. Το Zen Garden είναι πολύ ενδιαφέρον και κλασικό CSS Project. Αν δεν κάνω λάθος είναι demonsration μόνο. Έχω καιρό να μπω.

Παρ, 2008-12-05 06:51
Εικόνα: Ανώνυμος

Cool post :)

Το Zan Garden έχει και κάποια files για κατέβασμα, και μαζί με το ebook ή βιβλίο "The zen of css design" ή κάπως έτσι , είναι φοβερός συνδιασμός για εκμάθηση των βασικών.
Περιέχει τα βασικά όχι μόνο για το CSS tableless design, αλλά και τα βασικά για το web design γενικότερα.
Είναι ότι πρέπει πιστεύω για κάποιον που ξεκινάει τώρα.

Παρ, 2008-12-05 08:51
Εικόνα: Ανώνυμος

Δυστηχώς έχεις απόλυτο δίκιο και συνήθως τα μικρά χρονικά περιθώρια μας κάνουν να πέρνουμε λάθος αποφάσεις. Όταν ξεκίνησα το blog μου είχα μόνο μία μέρα (συμπεριλλαμβανομένων και των πρώτων άρθρων που έπρεπε να μπούν) και έτσι είπα αντί να κάνω απο την αρχή το design, να αγόραζα ένα καλό premium theme και να παίξω πάνω εκεί. Υπέθεσα πως ένα "premium" theme θα είχε και premium κώδικα, κάτι το οποίο δυστηχώς δέν ισχύει μια και που οι περισσοτεροι designers είναι καλοί μεν στο mockup, αλλα ο κώδικας είναι κάτι που απλώς έχουν μια μικρή εμπειρία .

Anyway για να μήν γίνομαι κουραστικός, το συμπέρασμα είναι οτι αξίζει να χάνεις χρόνο για να έχεις ένα πιό επαγγελματικό αποτέλεσμα. Ακόμα και αν την ποιότητα του κώδικά σου την αντιλλαμβάνεσαι μόνο εσύ - γιατί κατα 99% ο επισκέπτης δέν την αντιλλαμβάνεται έτσι και αλλιώς - αξιζει γιατι κάνει την ζωή σου πιό εύκολη.

Παρ, 2008-12-05 09:32
Εικόνα: Ανώνυμος

Νίκο θα συμφωνήσω μαζί σου. Πιστεύω ότι όταν είσαι επαγγελματίας θα είναι καλό να ξεκινάς από την αρχή. Τώρα αν είσαι χομπίστας δεν ίσως να είναι καλό να χαζεύεις και κώδικες άλλον. Τώρα στην περίπτωση σου πιστεύω ότι καλά έκανες εφόσον δεν είχες χρόνο. Λογικά όταν έχεις θα το κάνεις your way :)

Παρ, 2008-12-05 12:00
Εικόνα: Ανώνυμος

Χαμπάρι δεν είχα πάρει περι "blank" templates. Εϊναι μια τακτική που ακολουθώ και σε sites πελατών, δλδ να γράφω copy markup και μετα να την μορφοποιώ αλλά δεν ήξερα οτι μπορεί να υπάρχει theme για κάτι τέτοιο. Έξυπνο.

Πολύ καλή συλλογή Αλέξανδρε. Well done!

Παρ, 2008-12-05 18:00
Εικόνα: Ανώνυμος

Θησαυρός !! Ενα πολύ καλό tutorial για επαγγελματίες και χομπίστες του είδους. Εγώ ανήκω στην δεύτερη κατηγορία και ήδη γέμισα με bookmarks μετά από αυτό το άρθρο. Ευχαριστώ πολύ για την οικονομία χρόνου μια και το αρχικό ψάξιμο το κάνατε εσείς και πλέον έχω βρεί τι θα κάνω τα απογεύματα των γιορτών στο σπίτι ....

Παρ, 2008-12-05 18:52
Εικόνα: Ανώνυμος

Αυτό το post είναι ότι ακριβώς αυτό που έψαχνα προχθές που ξεκίνησα ένα νέο project για έναν πελάτη, ευχαριστώ πολύ. Keep up the good work!

Παρ, 2008-12-05 19:03
Εικόνα: Ανώνυμος

Χαίρομαι πολύ guys που το βρήκατε χρήσιμο! Ήθελα κι εγώ να τα μαζέψω κάπου όλα μαζί. :)

Παρ, 2008-12-05 23:39
Εικόνα: Ανώνυμος

Συγχαρητήρια για την πολύ καλή δουλεία! Είχα μαζέψει τις ίδιες "πηγές" με σένα περίπου (βσκ, μόνο όσα αφορούν το wp), κανά μήνα πριν, και ομολογώ πως ήταν μια αρκετά επίπονη διαδικασία! Οπότε, και πάλι συγχαρητήρια!!

Πάντως τλκ, προτίμησα το "Naked" και έχω ήδη ξεκινήσει τη... μορφοποίησή του!

Καλή συνέχεια!...

Σάβ, 2008-12-06 01:45
Εικόνα: Ανώνυμος

Η συγκέντρωση των link δεν ήταν τόσο επίπονη διαδικασία, η δοκιμή τους ήταν. Το site σου γίνεται πολύ όμορφο, το έφτιαξες μόνος σου; Να σε ετοιμάζω για τη δεύτερη λίστα;

Σάβ, 2008-12-06 02:25
Εικόνα: Ανώνυμος

Ώπα!! Περίμενε! Το blog το έχω ντύσει με αγοραστό template! Οπότε δεν θα ήταν και πολύ δίκαιο! :P

Το theme που ετοιμάζω, είναι... "κρυφό" ακόμη! :P

Πάντως με τιμά και μόνο που το αναφέρεις! Αυτό πάντως το έχω "ντύσει" μόνος μου! Χωρίς όμως να βασιστώ σε κάποιο blank, απλά τροποποίησα κατάλληλα ένα έτοιμο.

Σάβ, 2008-12-06 02:30
Εικόνα: Ανώνυμος

Μου αρέσει που είσαι δίκαιος. Γι αυτό σε ρώτησα. Μόνο original βάζουμε, οπότε αναμένω το νέο (το κρυφό) που ετοιμάζεις :)

Σάβ, 2008-12-06 02:32
Εικόνα: Ανώνυμος

Ε εντάξει, είπαμε! Καλή η τιμή αλλά το σωστό να λέγεται! Anyway, κι εγω αναμένω το κρυφό που ετοιμάζω! :P

Σάβ, 2008-12-06 02:40
Εικόνα: Ανώνυμος

Ωραια θεματα παιδια. Καθως τρεχουν απειρα ετοιμα σετακια Css, πολυ χρησιμη προταση. Πιο "ελαφρια" γλωσσα σχεδιασμου/μορφοποιησης και με απεριοστες δυνατοτητες αλλαγων κλπ.. εκει ειναι αλωστε και η δυναμη της.

Ειχα σεταρει πριν 4-5 χρονια ενα σαιτ (Css/tableless) με τα Zen Garden Css..

Δεν θελω να προσθεσω τιποτα, για να μην το φορτώσω.. χαχαα..!

http://homepages.pathfinder.gr/eassyrider/

Σάβ, 2008-12-06 11:06
Εικόνα: Ανώνυμος

Thanks γι'άυτό το άρθρο... υπερβολικά χρήσιμο :)

Κυρ, 2008-12-07 10:05
Εικόνα: Ανώνυμος

Ωραία συλλογή.
Διόρθωσε το link για το Code-Sucks CSS Layouts γιατί τώρα βγάζει στο Dynamic Drive

Τετ, 2008-12-10 05:35
Εικόνα: Ανώνυμος

Ευχαριστώ! (Το διόρθωσα)

Τετ, 2008-12-10 05:38
Εικόνα: Ανώνυμος

Έχεις απόλυτα δίκιο για τα templates. Επειδή δουλεύω αρκετά συχνά με αυτά, επιβεβαιώνω ότι ΚΑΙ κακογραμμένα είναι ΚΑΙ το να μπεις στη λογική τους, στη καλύτερη περίπτωση θα χάσεις όσο χρόνο θα έχανες να τα φτιάξεις από την αρχή. Επιπλέον είναι προχειρογραμμένα και συχνά ανακαλύπτω σπατάλες σε resources ή σε καθαρό στήσιμο, προκειμένου να τα συντάξουν γρήγορα (μη ξεχνάμε ότι κάνουν παραγωγή).

Θέλω μόνο να επισημάνω μία διαφορά:
Θα ΑΝΤΙπρότεινα να δουλέψει template, σε κάποιον που θέλει να φτιάξει μία ιστοσελίδα για τον εαυτό του ή που έχει πολύ καλή εμπειρία και ικανότητες να ΜΠΕΙ στο μυαλό του πελάτη του.
Σε κάθε άλλη περίπτωση, όταν δουλεύεις με πελάτες και καλώς ή κακώς εκείνοι θα αποφασίσουν τι είναι καλό και τι είναι κακό, έχει μεγάλα προνόμια να μπορεί μόνος του να επιλέξει το template που τον εκφράζει. Κλείνονται πολύ πιο γρήγορα οι συμφωνίες και γλιτώνεις πολύ χρόνο από ότι να ανακαλύψεις τι μπορεί να έχει στο μυαλό του.
Παράλληλα οι πελάτες μου νιώθουν μεγαλύτερη ασφάλεια αφού γνωρίζουν σε μεγάλο βαθμό που πρόκειται να πάει το πράγμα όταν ολοκληρώσεις.

Αν και τους αφήνω περιθώρια επιλογής, συνήθως εκεί μου καταλήγουν και μοιάζει αυτό να τους βολεύει. Από την άλλη, κακά τα ψέματα, εγώ δεν πιστεύω για τον εαυτό μου ότι μπορώ να τους ετοιμάσω κάτι τόσο εντυπωσιακό και τόσο γραφιστικά άρτιο, όσο ένα template. Οπότε ίσως κάπου ενδόμυχα κι εμένα να με βολεύει.

Κυρ, 2008-12-14 11:57
Εικόνα: Ανώνυμος

"ΑΝΤΙπρότεινα"... (τι ωραία που τα γράφω...)
Εννοώ ΔΕΝ θα πρότεινα, το αντίθετο δηλαδή.

Κυρ, 2008-12-14 17:48
Εικόνα: Ανώνυμος

Γενικά, το να δώσεις στο πελάτη μια σειρά από σελίδες να δει, ή να σου πει αυτός σελίδες που του αρέσουν βοηθάει πάρα πολύ στο να μπεις στο μυαλό του.

Δευ, 2008-12-15 00:43

Πες μας την βασιλική σου γνώμη

Το περιεχόμενο αυτού του πεδίου παραμένει ιδιωτικό και δε θα εμφανίζεται δημόσια. If you have a Gravatar account, used to display your avatar.
  • Διευθύνσεις ιστού και e-mail μετατρέπονται αυτόματα σε παραπομπές.
  • Επιτρεπόμενες ετικέτες HTML: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <p> <img> <code> <blockquote>
  • Αυτόματες αλλαγές γραμμών και παραγράφων.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <css>, <drupal5>, <drupal6>, <html>, <java>, <javascript>, <php>, <python>, <robots>, <ruby>, <sql>, <xml>. The supported tag styles are: <foo>, [foo].

Περισσότερες πληροφορίες για τις επιλογές μορφοποίησης

© 2006-2010 Webz.gr | Designed by Alexander Lingris
Feedback