Web Development
Μερικά εργαλεία για να μην ξανά-ανακαλύψετε τον τροχό…
30 Δεκεμβρίου 2009 | 
Author Μερικές φορές, κυρίως όταν κάνουμε τα πρώτα μας βήματα σε ένα τομέα, είναι χρήσιμο να χρησιμοποιήσουμε μόνο τα πιο βασικά εργαλεία έτσι ώστε να μάθουμε πραγματικά αυτό που μας ενδιαφέρει. Για παράδειγμα αν θέλουμε να μάθουμε html τότε θα χρησιμοποιήσουμε έναν απλό κειμενογράφο και όχι το dreamweaver.
Τι γίνεται όμως όταν θέλουμε να προχωρήσουμε ένα project γρήγορα και δεν έχουμε το χρόνο να ασχοληθούμε με πράγματα που δεν ξέρουμε καλά ή που δεν έχουμε το χρόνο να ασχοληθούμε από το μηδέν; Τότε είναι που πρέπει να ασχοληθούμε με τα frameworks. Low-level εργαλεία που χωρίς να είναι ιδιαίτερα περιοριστικά μας επιτρέπουν να κάνουμε πράγματα εύκολα και γρήγορα και πολλές φορές σωστότερα απ’ ότι θα τα καταφέρναμε χωρίς τη βοήθειά τους. Σε αυτό το άρθρο θα δούμε εν συντομία ένα framework (library αν θέλουμε να είμαστε ακριβής) για javascript και ένα για css που προσωπικά μου έχουν «λύσει τα χέρια»… Συνέχεια »
Posted in Javascript, Web Development | 
Tags: 960, blueprint, css, framework, Javascript, jQuery, scaffold | 
No Comments »
fishmemory.net – ToDo lists on steroids
Μετά από αρκετούς μήνες brainstorming και coding είμαι στην ευχάριστη θέση να σας παρουσιάσω το νέο μου website. Λέγεται fishmemory.net και απευθύνεται σε όσους έχουν μνήμη χρυσόψαρου, σαν και τη δική μου δηλαδή. Είναι ένας εύκολος τρόπος να σημειώνεις πράγματα που δεν θες να ξεχάσεις, όχι όμως σε πολλά και διάσπαρτα χαρτιά που χάνονται/σκίζονται/λερώνονται κ.τ.λ. αλλά στο διαδίκτυο και να έχεις πρόσβαση απ’ όπου και να ‘σαι αρκεί να υπάρχει internet. Μπορείτε να προσθέσετε υπενθυμίσεις με email για να μην ξεχάσετε κάτι σημαντικό, να εκυπώσετε ή να κάνετε export τη λίστα σας σε .csv (excel), να κάνετε αντίγραφα των λιστών σας…
Τα χαρακτηριστικα όμως δεν σταματούν εκεί. Το fishmemory.net δεν φτιάχτηκε μόνο για προσωπικές λίστες αλλά και ως ένα εργαλείο για να μοιράζεσαι οτιδήποτε μπορεί να γραφτεί υπό τη μορφή λίστας. Για παράδειγμα θα μπορούσε κάποιος να μοιραστεί μία συνταγή μαγειρικής, ή ένα step-by-step οδηγό για το πως να κατεβάζετε torrents. H πρώτη δημόσια λίστα που έφτιαξα ήταν τα features του fishmemory.net.
Βέβαια η έκδοση είναι ακόμα πολύ πρώιμη και μερικά από τα παραπάνω χαρακτηριστικά δεν είναι ακόμη ολοκληρωμένα. Όμως η εγγραφή έχει μόνο 3 πεδία προς συμπλήρωση και θα χαιρόμουνα αν γραφόσασταν για ένα test-drive και μου λέγατε τη γνώμη σας. Προς το πρόν είναι μόνο στα αγγλικά αλλά σε λίγο καιρό θα προστεθούν κι άλλες γλώσσες με πρώτη και καλύτερη τα ελληνικά φυσικά.
artisteer: Βγάλτε τον web designer από μέσα σας…
To artisteer μου το σύστησε πρόσφατα ένας φίλος (χίλια ευχαριστώ bill 
). Πρόκειται για μία εφαρμογή που μετατρέπει οποιονδήποτε με γούστο και αισθητική σε web designer. Υπερβολικό; Ίσως, αλλά για διαβάστε λίγο ακόμα…
Στο, ας πούμε dummy mode, απλά πατάτε ένα κουμπί και η εφαρμογή σας εμφανίζει κάθε φορά και ένα διαφορετικό template μέσα από μία ψευδο-τυχαία διαδικασία. Διαλέγει ας πούμε μία predefined χρωματική παλέτα, layout, blocks, γραφικά, εικόνες, εφφέ κ.τ.λ. Το αποτέλεσμα τις περισσότερες φορές είναι εντυπωσιακό και δείχνει σα να το έχει δημιουργήσει κάποιος επαγγελματίας. Όμως αν σταματούσε εκεί δεν θα ήμουν τόσο ενθουσιασμένος. Συνέχεια »
Δοκιμάζοντας το website μας σε διάφορους browsers
Όλοι όσοι ασχολούνται με το web development γνωρίζουν πόσο σημαντικό είναι να δοκιμάσουμε ότι το website που φτιάξαμε δουλεύει και εμφανίζεται όπως πρέπει στους σημαντικότερους browser. Αυτοί στους οποίους πρέπει οπωσδήποτε να το δοκιμάσουμε είναι ο IE (6 και 7) και ο firefox, ενώ καλό είναι να μην αγνοήσουμε και τους Opera, Safari και Chrome. Το καλό αν δουλεύουμε σε windows είναι ότι μπορούμε να εγκαταστήσουμε όλους τους παραπάνω και να δούμε από πρώτο χέρι αν κάτι πάει στραβά. Συνέχεια »
Νέο website: Τα πρώτα βήματα…
ftp, domain, bandwidth, server, hosting, DNS, IP και πλήθος άλλων ακρωνυμίων τα οποία χρειάζεται κάποιος να "αντιμετωπίσει" όταν αποφασίζει να φτιάξει το δικό του website.
Ας ξεκινήσουμε λέγοντας δύο λόγια για το ποιες είναι οι απαραίτητες ενέργειες για την δημιουργία ένος νέου website από κάποιον που δεν έχει προηγούμενη εμπειρία.
Πρώτα απ' όλα θα χρειαστείτε ένα domain για το site σας. Δηλαδή με απλά λόγια ένα όνομα που όταν κάποιος το "φωνάζει" (γράφει στον πλοηγητή του) να έχει πρόσβαση στο site σας. To domain name είναι της μορφής mysite.gr… Συνέχεια »
Λογότυπα, εικονίδια και favicons για το website σας
Σε αυτό το σύντομο άρθρο θα δούμε πως μπορείτε να βρείτε εικονίδια για να εμπλουτίσετε τις σελίδες σας ή να ανανεώσετε τον υπολογιστή σας.
Στο iconfinder.net μπορείτε να δώσετε τα keywords που θέλετε και αυτό θα σας επιστρέψει τα αποτελέσματα. Δεν έχει τεράστια ποικιλία όμως τα περισσότερα εικονίδια είναι πολύ καλής ποιότητας (και από αισθητικής άποψης) και με διάφανο bg για να τα προσαρμόσετε εύκολα στις ανάγκες σας. Στη δεξιά εικόνα παρουσιάζονται τα αποτελέσματα για την αναζήτηση «linux».
Στο famfamfam θα βρείτε μία σειρά από πάρα πολλά (πάνω από 1000) μικρά εικονίδια για να χρησιμοποιήσετε στη σελίδα σας.
Για favicons υπάρχουν δύο πολύ καλά websites… Συνέχεια »
Ξεκινώντας ένα website χωρίς γνώσεις προγραμματισμού
Πολλοί είναι αυτοί που θέλουν να φτιάξουν ένα website. Αρκετοί από αυτούς δεν γνωρίζουν ότι μπορούν να το φτιάξουν σχετικά εύκολα, χωρίς να ξέρουν html, php κ.τ.λ. Οι μόνες απαραίτητες γνώσεις για να ξεκινήσετε το δικό σας website είναι …
1) Καλή γνώση του internet, ως χρήστης. Για παράδειγμα μπορείτε να συμπληρώσετε φόρμες, να πάρετε και να στείλετε emails, να συμμετέχετε σε forums κ.λ.π.
2) Ικανοποιητικό χειρισμό προγραμμάτων windows. Περισσότερο για προγράμματα που θα σας χρειαστούν όπως email και ftp clients.
Και από κει και πέρα τί, θα αναρωτιέστε. Εδώ έρχονται να δώσουν τη λύση έτοιμες web εφαρμογές τις οποίες μπορείτε να εγκαταστήσετε μόνοι σας και στη συνέχεια να τις παραμετροποιήσετε και να προσθέσετε περιεχόμενο. Το ευχάριστο της υπόθεσης είναι ότι οι περισσότερες από αυτές τις εφαρμογές είναι ανοιχτού κώδικα και παρέχονται δωρεάν. Δεν είναι μάλιστα λίγες οι φορές που οι free εφαρμογές ξεπερνούν σε χαρακτηριστικά και λειτουργικότητα τις εμπορικές λύσεις!
Εδώ θα παραθέσω μία λίστα με εφαρμογές ανάλογα με το τί είναι αυτό που θέλετε να κάνετε καθώς και έναν μίνι οδηγό εγκατάστασης… Συνέχεια »
Προσθήκη λεζάντας ή επικεφαλίδας σε πίνακα
Για να προσθέσουμε μία λεζάντα σε έναν πίνακα θα μπορούσαμε να βάλουμε ένα νέο tr και ένα td με το κατάληλλο colspan και align=center. Πιό εύκολη λύση όμως είναι να προσθέσουμε κάπου μέσα στον πίνακα την ετικέτα caption.
Για παράδειγμα… Συνέχεια »
Επιλογή τυχαίας εγγραφής από πίνακα
Για να επιλέξουμε μία τυχαία εγγραφή από έναν πίνακα στη MysSQL μπορούμε να χρησιμοποιήσουμε τον παρακάτω κώδικα:
SELECT * FROM tablename WHERE condition ORDER BY RAND() LIMIT 0, 1
Σημειώστε ότι μπoρούμε να έχουμε και κάποια συνθήκη και η τυχαιότητα να λειτουργήσει για τις εγγραφές που επιστρέφονται από αυτή. Για παράδειγμα θα μπορούσαμε να επιλέξουμε 3 τυχαίες φωτογραφίες που έχουν όμως μέσο όρο πάνω από 8.5. Σε αυτή την περίπτωση θα βάζαμε σαν συνθήκη rating>=8.5
SELECT * FROM photos WHERE rating>=8.5 ORDER BY RAND() LIMIT 0, 3
(Φόρμα) method=GET και action URL conflict
Μάλλον δε βγαίνει και πολύ άκρη από τον τίτλο ε; Για συνεχίστε να διαβάζετε …
Θέλουμε να κάνουμε submit μία φόρμα με τη μέθοδο GET και το action είναι ένα url της μορφής : http://www.domain.gr/index.php?page=tricks . Το πρόβλημα είναι ότι η φόρμα θα αγνοήσει το page=tricks και θα το αντικαταστήσει με τα πεδία της φόρμας.
Η λύση σε αυτό το πρόβλημα είναι έξυπνη και απλή. Για να παρακάμψουμε αυτή την αδυναμία βάζουμε μέσα στη φόρμα ένα κρυφό πεδίο (hidden field) με όνομα page και value tricks. Έτσι όταν η φόρμα γίνεται submit μπαίνει και αυτό το πεδίο στο url. Π.χ.
<input name="page" value="tricks" type="hidden" />Επιστροφή μοναδικών τιμών πεδίου, επιλέγοντας ταυτόχρονα και άλλα πεδία
Για να επιλέξουμε μόνο τις μοναδικές τιμές ενός πεδίου από έναν πίνακα χρησιμοποιούμε ένα query της μορφής :
SELECT DISTINCT field1 FROM tablename WHERE condition
Όμως αν θέλουμε να επιλέξουμε τις μοναδικές τιμές του field1 αλλά και άλλα πεδία εκτός από το field1 αρχίζουν τα προβλήματα. Για παράδειγμα αν χρησιμοποιήσουμε το query :
SELECT DISTINCT field1, field2, field3 FROM tablename WHERE condition
Τότε θα μας επιστραφούν όλες οι εγγραφές που ο συνδυασμός των field1, field2 και field3 είναι μοναδικός. Δηλαδή το πιθανότερο, όλες οι εγγραφές! Αντ’ αυτού πρέπει να χρησιμοποιήσουμε το query :
SELECT field1, field2, field3 FROM tablename WHERE condition GROUP BY field1
Rollover εικόνα αντί για κουμπί submit σε φόρμα
Θέλετε να χρησιμοποιήσετε εικόνα αντί για submit κουμπί σε φόρμα και εκτός αυτού θέλετε η εικόνα να αλλάζει όταν ο δείκτης του ποντικιού περνάει από πάνω της (rollover);
Χρησιμοποιείστε τον ακόλουθο κώδικα…
<input src="image.gif" value="submit" type="image" onmouseover="javascript:this.src='image-rollover.gif';" onmouseout="javascript:this.src='image.gif';" />
750 | Unique Visitors |
