Tutorials

Γιατί το SEO (Search Engine Optimization) είναι σημαντικό;

Αυτό είναι η διαδικασία διόρθωσης μιας ιστοσελίδας έτσι ώστε να βρίσκεται, να διαβάζεται και να καταχωρείται από τις μηχανές αναζήτησης με όσο το δυνατόν πιο αποτελεσματικό τρόπο, κάνοντας έτσι την ιστοσελίδα σας και το περιεχόμενό της ελκυστικό, σχετικό και ορατό στις μηχανές αναζήτησης και τους web searchers.

Γιατί είναι σημαντικό; Αναλογιστείτε πως θα ήταν αν κανένας δεν μπορούσε να βρει την διεύθυνση της επιχείρησής σας ή ακόμα και το τηλέφωνο. Πολλές εταιρείες δεν θα μπορούσαν να συνεχίσουν έτσι.

Το ίδιο μπορεί να συμβεί και με την ιστοσελίδα σας αν οι άνθρωποι δεν μπορούν να την εντοπίσουν εύκολα. Οι πολλές καταχωρήσεις, αν τελικά υπάρχουν, καθηστερούν. Έτσι οι πιθανοί πελάτες ούτε καν θα ξέρουν ότι βρίσκεστε εκεί.

‘Περίμενε’, θα μου πεις. ‘Έχω δημιουργήσει μια ιστοσελίδα και η διεύθυνσή της βρίσκεται σε όλες μας τις διαφημήσεις. Γιατί να μην μπορούν να την βρουν;’

Φυσικά, οι ήδη υπάρχοντες πελάτες ή αυτοί που ειναι εξοικιωμένοι με την εταιρεία σας, δεν θα έχουν καμία δυσκολία να βρουν την ιστοσελίδα σας. Αλλά αυτή μπορεί να μην είναι η πέριπτωση.

Μπορείς να εγγηυθείς ότι όλοι οι πιθανοί πελάτες έχουν δει κάποια διαφήμησή σας; Τι γίνεται με αυτούς που δεν διαβάζουν τα περιοδικά και τις εφημερίδες που έχετε επιλέξει να βάλετε τις διαφημήσεις σας;

Άκουσαν το σωστό ραδιοφωνικό σταθμό; Είδαν το σωστό τηλεοπτικό πρόγραμμα; Έλαβαν ένα απο τα χιλιάδες διαφημηστικά που στείλατε;

Λοιπόν, τι γίνεται με τις μηχανές αναζήτησης; Αυτοί οι άνθρωποι μπορουν απλά να εισάγουν μερικές λέξεις στη γραμμή αναζήτησης, να πατήσουν το κουμπί, και voila!! Υπάρχει ένας σύνδεσμος για την ιστοσελίδα σας. Δεν είναι υπέροχες οι μηχανές αναζήτησης;

Ναι, οι μηχανές αναζήτησης μπορούν να ειναι υπέροχες και το πιο πάνω σενάριο μπορεί να συμβεί, αλλά όχι χωρίς δουλειά. Εδώ έρχεται το SEO.

Η περίπτωση κατ' ουσίαν.

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

Βρέθηκαν πολλοί σύνδεσμοι, αλλά κανένας δεν φαινόταν να έχει κάποια σχέση με εστιατόρειο. Στις επιλογές αναζήτησης πρόσθεσα το όνομα της πόλης όπου βρίσκεται το εστιατόρειο. Εδώ υπήρχαν σύνδεσμοι που σχετίζονταν με το εστιατόρειο, αλλά όλοι φαίνονταν να είναι άρθρα εφημερίδων ή κριτικές και όχι της ίδιας της ιστοσελίδας του εστιατορείου. Τι ήταν λάθος; Άραγε όντως δεν έχουν ιστοσελιδα;

Ευτυχώς, ένα από τα άρθρα εφημερίδας ανέφερε την διεύθυνση της ιστοσελίδας. Είναι μια πολύ όμορφη ιστοσελίδα, ευχάριστη για τα μάτια και τ’αυτιά. Έχει δημιουργηθεί σαν Macromedia Flash παρουσίαση που βρίσκεται σε μία μόνο δικτιακή σελίδα. Γιατί είχα τόσο μεγάλο πρόβλημα να τη βρω; Πιστέβω ότι μπορεί να έχει να κάνει με το γεγονός ότι οι δημιουργοί της ιστοσελίδας δεν φαίνεται να καταλαβαίνουν το SEO.

Πως μία ιστοσελίδα μπαίνει στις λίστες των μηχανών αναζήτησης; Οι περισσότερες μηχανές αναζήτησης χρησιμοποιούν υπολογιστικά προγράμματα (σηνήθως αναφέρονται ως robots ή crawlers) για να ακολουθούν συνδέσμους από μία σελίδα σε μία άλλη και να ανευρίσκουν τα περιεχόμενα κάθε σελίδας. Τα περιεχόμενα καταχωρούνται και προστίθενται στη βάση δεδομένων των μηχανών αναζήτησης.

Πως δουλέβουν οι μηχανές αναζήτησης;

Πως καταχωρούνται οι σελίδες; Πως πραγματικά δουλεύουν τα search routines(διαδικασίες αναζήτησης); Μόνο οι χειριστές των μηχανών αναζήτησης ξέρουν σίγουρα και γενικά αυτή είναι μία πολύ καλά κρατημένη απόρρητη πληροφορία. Η διαδικασία συνεχώς βελτιώνεται, όπως σε όλα τα χρήσιμα προγράμματα υπολογιστών.

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

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

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

Όταν χρησιμοποιήτε διάφορες μηχανές αναζήτησης, μπορεί να έχετε παρατηρήσει ότι μερικά αποτελέσματα έχουν ελάχιστα, εαν όχι καθόλου, να κάνουν με αυτό που ψάχνατε. Μερικές από αυτές τις σελίδες μπορεί ακόμα και να σας παραπέμπουν όλες μαζί σε μία αλλη ιστοσελίδα. Οι ιδιοκτήτες αυτών των ιστοσελίδων έχουν ένα σκοπό: να σας φέρουν στην πόρτα (ώστε να σας μιλήσουν), ανεξάρτητα απο το τι ψέματα ή εξαπατήσεις έχουν χρισιμοποιήσει για να το κάνουν.

Τι δεν πρέπει να κάνετε.

Οι ακόλουθες SEO τεχνικές συχνά αποκαλούνται spamming και θα πρέπει να αποφέυγονται με κάθε κόστος:

* Αυτόματη δημιουργία διόδων σελίδων
* Καλυμένες και λανθασμένες παραπομπές
* Stuffing λέξεων κλειδιών
* Κρυμένα κείμενα ή κρυμένοι σύνδεσμοι
* Φόρτωμα σελίδων με άσχετες λέξεις
* Διπλασιασμένο περιεχόμενο σε πολλές σελίδες
* Αναρθογράφηση γνωστών ιστοσελίδων
* Ασυνδετότητα και συγγεντροτισμό συνδέσμων
* Άλλες μεθόδους που προσπαθούν να εξαπατήσουν τις μηχανές αναζήτησης


Αυτές και άλλες τεχνικές, ενώ μερικές φορές επιτυχημένα αυξάνουν την κίνηση στην ιστοσελίδα σας, σύντομα αποτυγχάνουν.

Φανταστέιτε να βάλετε ένα παρακαμτήριο σήμα στο δρόμο μπροστά από την εταιρεία σας, στέλνοντας την κίνηση στο χώρο στάθμευσής σας. Ναι, Ο χώρος σας είναι γεμάτος αλλά πόσοι από αυτούς τους ανθρώπους πραγματικά ήθελαν να είναι εκεί; Πόσοι από αυτούς θα θέλουν να ψωνίσουν εκεί μετά την μαρτυρία μιας τέτοιας εξαπάτησης; Πόσο καιρό θα χρειαστεί η τοπική αστυνομία να μετακινήσει το σήμα;

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

Πως κατατάσεστε;

Την επόμενη φορά που θα χρησιμοποιήσετε μία μηχανή αναζήτησης, ψάξτε για την δική σας ιστοσελίδα. Τι λέξεις πρέπει να ψάχει κάποιος που θα πρέπει να τον φέρουν στην δικιά σας ιστοσελίδα; Είναι η ιστοσελίδα σας στη λίστα αυτών των αποτελεσμάτων;

Το SEO ειναι το εργαλείο που μπορεί να διασφαλίσει ότι η ιστοσελίδα σας θα βρίσκεται οσο το δυνατόν πιο κοντά στην κορυφή των αποτελεσμάτων σχετικής αναζήτησης.

Χωρίς το SEO θα είναι σαν αυτοί οι πελάτες να περνάνε έξω από το μαγαζί σας χωρις να ξέρουν ότι βρίσκεστε εκεί. Είναι το SEO σημαντικό για εσάς; Μπορείτε να βασιστείτε σε αυτό.-

---
Ειδοποίηση: Αυτό το άρθρο έχει γραφτεί από τον Dan Johnson, Technical & Marketing Consultant στο Webnauts Net - Web Accessibility, SEO, & Usability Testing & Consulting και μπορεί να αναπαραχθεί σε ιστοσελίδα, CD-ROM, e- magazine, βιβλίο, περιοδικό κ।τ.λ εφόσον αναφέρεται το όνομα ολόκληρο και περιλαμβάνεται σύνδεσμος για αυτήν την σελίδα.

Απο : http://www.freestuff.gr/forums/viewtopic.php?t=24064&postorder=आस्क

All You Need for Cascading Stylesheets (CSS)

CSS Tutorials (all-in-one)
http://www.thefixor.com/code_css.php#tutor
Tutorials, Demos, and Hacks
http://nemesis1.f2o.org/links
Florida State University Webmaster - Curriculum Cascading Style Sheets (CSS 2.1) Reference
http://learningforlife.fsu.edu/webmaster/references/css/index.cfm

1. Rebuilding a Site With Standards
http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html

2. W3C Web Style Sheets CSS tips & tricks
http://www.w3.org/Style/Examples/007/

3. Tables or CSS? Choosing a layout http://www.saila.com/usage/layouts/cssvtables.shtml

4. Tableless Layout with CSS HowTo (W3C)
http://www.w3.org/2002/03/csslayout-howto.html.en

5. How to build a web site without tables
http://www.mako4css.com/Tutorial.htm

6. CSS Quick Reference
http://www.devguru.com/Technologies/css/quickref/css_index.html

7. CSS Bugs and Workarounds
http://css.nu/pointers/bugs.html

8. How to hide CSS from buggy browsers
http://w3development.de/css/hide_css_from_browsers/

9. Hiding CSS form Netscape 4+
http://www.v2studio.com/k/css/n4hide/

10. External link icons the CSS way:
http://www.kryogenix.org/days/173.html

11. CSS Top Menu Combination - Does not work in Internet Explorer 6.0. It does work in Mozilla 1.4., Opera 6.0., and Safari 1.0.
http://moronicbajebus.com/playground/cssplay/top-menu/

12. Hover Sidebar with CSS - It is known to work in Mozilla 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in Opera 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support :hover on anything but hyperlinks ().
http://moronicbajebus.com/playground/cssplay/hover-sidebar/

13. Erlarger Button Menu with CSS - Overlapping the other elements:
http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/ This does not work in Internet Explorer.

14. Reformat the tables with CSS - It works in Mozilla 1.4+ and Opera 7.0. It does not work in Windows Internet Explorer 6.
http://moronicbajebus.com/playground/cssplay/reformat-table/

15. Image replacement - no span with CSS - This works great in Windows Internet Explorer 6, Mozilla 1.4+, and Opera 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy...
http://moronicbajebus.com/playground/cssplay/image-replacement/ 16. Mark you jump - You need a browser that supports CSS3. This is where the time traveling comes in because as of today (2003/2/June) CSS3 is still in the draft stage; but you are in for some luck Mozilla 1.3 does support :target—those wacky Mozilla people.
http://moronicbajebus.com/playground/cssplay/markyourjump/

17. Horizontal Menu using CSS
http://moronicbajebus.com/playground/cssplay/hormenu/

18. Add banner positioning with CSS
http://www.peterbailey.net/test/banner.htm

19. Box Model Hack
http://www.tantek.com/CSS/Examples/boxmodelhack.html

20. Designing for two Style Sheets - This method is suitable for use when you have a site that is laid out using CSS positioning as opposed to tables, and where the content is likely to get displayed badly in older browsers. By carefully planning your layout you can create an alternate stylesheet that will display correctly in older browsers and still be able to do an advanced CSS layout for the rest.
http://www.edgeofmyseat.com/showarticle.do?AID=5

21. CSS-driven tabs
http://www.clagnut.com/writings/csstabs/

22. CSS: Mix and match Classes
http://catcode.com/csstips/classes.html

23. CSS: Graphic List Bullets
http://catcode.com/csstips/graphic_list.html

24. CSS: Centered Tables
http://catcode.com/csstips/center_table.html

25. CSS and Netscape 4.xx Issues - The market share of browsers that do not support any CSS is now below 0.5%. Therefore web developers have more freedom to actually separate content (HTML) and presentation (CSS). The biggest challenges that web developers face when implementing CSS is backwards compatibility and browser support.
http://www.mako4css.com/Issues.htm

26. Mark external links on your site (and others!)
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6

27. CSS Positioning Properties
http://www.miswebdesign.com/resources/articles/css-positioning-properties.html

28. CSS Menus - Uberlink CSS Rollovers:
http://www.projectseven.com/tutorials/css_menus/list_01/index.htm

29. CSS-TD CSS Table Design:
http://www.projectseven.com/tutorials/css_t/index.htm

30. Navigation Menu without Images:
http://www.bravenet.com/resources/tipsandtricks/showtip.php?view=160

31. Dynamic @import CSS files using PHP:
http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/

32. max-width in Internet Explorer:
http://www.svendtofte.com/code/max_width_in_ie/

33. The Basics of Positioning
http://www.communitymx.com/content/article.cfm?cid=3B56F

34. Creating radically different list options
http://css.maxdesign.com.au/listamatic/

35. CSS Rollover Tutorial
http://info.vilesilencer.com/main.php?rock=css_tute1.php

------- Tools and Utilities (please report broken links)

1. Build tableless (with CSS) pages with this free online tool:
http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml

2. User Style Sheet Wizzard
http://www.techdis.ac.uk/seven/wizards/user-style.html

3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables):
http://www.hisoftware.com/access/valueadd9.html

4. Style Master - CSS Web Page layout Editor for Windows and Macintosh:
http://www.westciv.com/style_master/

5. Layout-Matic - Generates CSS for formatting lists in a variety of forms:
http://www.inknoise.com/experimental/layoutomatic.php

The Advanced CSS Reference -
http://www.blooberry.com/indexdot/css/

Tabs using CSS -
http://www.brainjar.com/css/tabs/default.asp

How to Create a Photographic Gallery Using CSS -
http://www.webreference.com/programming/css_gallery/




Πηγή: http://www.freestuff.gr/forums/viewtopic.php?t=21390

25 Rounded Corners Techniques with CSS

Στρογγυλεμένες γωνίες είναι μία από τις πιο δημοφιλείς και πιό συχνά αναζητούμενες CSS τεχνικές . Στην πραγματικότητα, υπάρχουν πολλές μέθοδοι και τεχνικές για τη δημιουργία στρογγυλεμένης γωνίας με CSS. Μερικές είναι με χρήση απλής καθαρής CSS με τη χρήση 2 ή 4 εικόνων φόντου και με τη χρήση Javascript.

Στην παρακάτω ιστοσελίδα υπάρχουν 25 διαφορετικοί τρόποι.

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/