Τελευταίες Αναρτήσεις »

Η εφαρμογή για αποστολή αρχείων με drag and drop που περιγράφω εδώ αναβαθμίστηκε και απέκτησε το δικό της site. Η ιστοσελίδα είναι στα αγγλικά. Το πρόγραμμα πλέον αναγνωρίζει τα αρχεία με το ίδιο όνομα και δίνει στο χρήστη τη δυνατότητα να αντικαταστήσει το παλιό αρχείο με το νέο.

Περισσότερα στη νέα διεύθυνση http://dragdropupload.sourceforge.net/.

Μπορείτε να κατεβάσετε την τελευταία έκδοση εδώ https://sourceforge.net/projects/dragdropupload/

Ο firefox από την έκδοση 3.6 και μετά υποστηρίζει το νέο File API της javascript το οποίο επιτρέπει την μεταφορά και απόθεση αρχείων απευθείας στο παράθυρο του φυλλομετρητή για μεταφόρτωση στο server. Αυτό επιτρέπει την εύκολη και γρήγορη μεταφορά πολλών αρχείων. Το API είναι της javascript και εκτός απροόπτου θα υποστηριχθεί και από τους υπόλοιπους browsers πολύ σύντομα.

Υπάρχουν ήδη κάποιες μέθοδοι μεταφοράς και απόθεσης αρχείων στο παράθυρο του φυλλομετρητή αλλά όλες προαπαιτούν τη χρήση κάποιου πρόσθετου που πρέπει ο χρήστης να εγκαταστήσει, όπως το image uploader tool ActiveX της Microsoft, το Google Gears ή το Drag and drop plugin του firefox.

Υπάρχουν διάφορα παραδείγματα ανά το internet αυτής της εφαρμογής όπως αυτό

http://demos.hacks.mozilla.org/openweb/uploadingFiles/

αυτό

http://yehudab.com/apps/drag-n-drop/demo.html

και αυτό

http://www.thecssninja.com/demo/drag-drop_upload/v2/

Κανένα από αυτά δεν είναι όμως ολοκληρωμένα και το πιο βασικό κανένα από αυτά δεν δίνει παράδειγμα του κώδικα που τρέχει στον server για να δεχτεί το αρχείο. Σε όλα τα παραδείγματα φαίνεται πως το server-side script είναι ένα τυπικό αρχείο uploader σε php ή perl κάτι που όμως δεν ισχύει, γιατί η μέθοδος του drag and drop στέλνει το αρχείο με streaming στο server, και όχι γεμίζοντας το array $_FILES όπως συνήθως.

Τη λύση βρήκα εδώ

http://lenss.nl/2010/01/drag-drop-uploads-with-xmlhttprequest2-and-php/

όπου υπάρχει άλλο ένα παράδειγμα τέτοιου προγράμματος.

 

Ήθελα όμως μια εφαρμογή που να συνδυάζει όλα τα πλεονεκτήματα αυτών των λύσεων καθώς και κάτι παραπάνω:

  1. Μπάρα προόδου
  2. Μικρογραφίες και εικονίδια των αρχείων που ανεβαίνουν
  3. Δυνατότα διαγραφής μεμονωμένου αρχείου

Έτσι παίρνοντας τα καλύτερα στοιχεία έφτιαξα τη δικιά μου εφαρμογή upload

Μπορείτε να τη δείτε live εδώ

http://qwazix.outofbounds.gr/dragdrop/ (μην ανησυχείτε δεν μαζεύω τα αρχεία σας. Στην πραγματικότητα στο demo δεν γίνονται ποτέ upload)

και να την κατεβάσετε από εδώ

http://qwazix.outofbounds.gr/programs/dragdropupload.zip

Στο αρχείο path.php ορίζεται που θα ανεβαίνουν τα αρχεία. Προτείνεται να ανεβάζετε στον προσωρινό φάκελο temp και να μεταφέρετε τα αρχεία μετά εκεί που θέλετε. Στην παρούσα υλοποίηση τα αρχεία με ίδιο όνομα αντικαθίστανται χωρίς προειδοποίηση.

Το αρχείο stub.txt υπάρχει στο φάκελο temp μόνο για λόγους συμπίεσης. Μπορείτε να το σβήσετε.

Έχω συνήθως μαζί μου ένα φλασάκι – κιτ πρώτων βοηθειών για υπολογιστές

Μεταξύ άλλων περιέχει τα εξής:
– Ccleaner
– Wise Cleaner
– AVG free AntiVirus
– TightVNC
– MagicDisc
– PartitionRecovery Enterprise
– NTFS Undelete
– Clamwin AntiVirus

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

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

Κατεβάστε το lock.vbs βάλτε το στο φλασάκι και κάντε το διπλό κλικ. Υπομονή, κάνει λίγη ώρα ανάλογα με τον κενό χώρο που έχετε στο φλασάκι. Για να ξεκλειδώσετε το φλασάκι απλά σβήστε το IamDummy

ΠΡΟΣΟΧΗ! Μην το κάνετε αυτό στο δίσκο με τα windows το πιθανότερο είναι να υπάρξουν ανεπιθύμητες συνέπειες.

Κατεβάστε το από εδώ

wallpapers out of bounds

Κάντε τον υπολογιστή σας να βγαίνει έξω από τα όρια με wallpapers out of bounds, θα τα βρείτε εδώ: http://outofbounds.gr/blog/?page_id=46

Η υποστήριξη πολλών φυλλομετρητών έχει γίνει πλέον πονοκέφαλος για τους web developers. Ευτυχώς το μαύρο πρόβατο της συμβατότητας Microsoft Internet Explorer έχει βελτιωθεί σημαντικά στην τελευταία έκδοση, και η MS υπόσχεται ακόμα καλύτερη συμβατότητα με τα πρότυπα του W3C – του αρμόδιου οργάνου για την προτυποποίηση στο Internet – στην επερχόμενη έκδοση 9.

Kαθώς ο Internet Explorer 7 έχει ακόμα σημαντικό αριθμό χρηστών και σημαντική διαφορά στη συμπεριφορά από τους υπόλοιπους, είναι φρόνιμο μία καλή σελίδα να τον υποστηρίζει.

O Internet Explorer 8 στο IE8 Standards Mode συμπεριφέρεται πλέον πολύ κοντά στα πρότυπα του W3C και σπάνια χρειάζεται ειδική μεταχείριση

Ο firefox στη Ελλάδα είναι ο πιο διαδεδομένος browser και σαφώς πρέπει οι σελίδες να λειτουργούν σωστά σ’αυτόν.

Ο Google chrome αν και ανερχόμενος δεν έχει ακόμα την βάση χρηστών που θα τον κάνει να απειλήσει τους ΙΕ και FF, ενώ ο safari περιορίζεται σχεδόν αποκλειστικά στους χρήστες Mac που είναι ένα μικρό ποσοστό των συνολικών χρηστών υπολογιστών. Οι δύο αυτοί browsers χρησιμοποιούν την μηχανή απεικόνισης WebKit, και έχουν πολύ παρόμοια συμπεριφορά με τον Firefox.

Ο Opera, ένας από τους παλαιότερους browsers που κυκλοφορούν (έχει ήδη φθάσει την έκδοση 10) έχει ακόμα μικρότερη βάση χρηστών παρά το γεγονός ότι συγκεντρώνει δεκάδες δυνατότητες που οι υπόλοιποι φυλλομετρητές δεν έχουν, και παρά τις φήμες ήταν αυτός που δημιούργησε τα tabs και άλλα πολύ συνηθισμένα features.

Ο IE6 είναι πλέον πολύ παλιός, και δεν υποστηρίζεται πια ούτε από τους κολοσσούς Google και Microsoft.

Μια καλή λύση για να υποστηρίζετε τη συντριπτική πλειοψηφία των χρηστών, είναι να δημιουργήσετε το site εξ’ αρχής, σε δύο εκδόσεις, μία για ΙΕ6 και μία firefox. Η έκδοση για ΙΕ6 θα παίζει χωρίς προβλήματα σε ΙΕ7 και εκτός εξαιρετικών περιπτώσεων η έκδοση για firefox θα λειτουργεί σε όλους τους υπόλοιπους browsers. Το αρνητικό στην περίπτωση αυτή είναι πως για να λειτουργήσει στο site σε ΙΕ7 θα πρέπει να του δώσετε την εντολή να λειτουργήσει σε IE7 quirks mode που προσομoιώνει τη λειτουργία του ΙΕ6 χάνοντας έτσι την δυνατότητα χρήσης νέων τεχνολογιών που πρωτοεμφανίστηκαν στον IE7 και μπορούν να δώσουν μια πιο σύγχρονη όψη στη σελίδα σας.

Εμείς στην outofbounds συστήνουμε τους χρήστες με ΙΕ6 να αναβαθμίσουν (η αναβάθμιση είναι δωρεάν από τη Microsoft, ή να χρησιμοποιήσουν κάποιον από τους άλλους φυλλομετρητές – είναι όλοι δωρεάν) και δεν υποστηρίζουμε το φυλλομετρητή αυτόν, ώστε να μπορούμε να δώσουμε βάση στην καλύτερη λειτουργία και οπτική των σελίδων σε σύγχρονους browsers.

php/css

Ο php είναι ένας προεπεξεργαστής. Προετοιμάζει τις σελίδες, δημιουργεί δυναμικά τo περιεχόμενό τους από τη μεριά του διακομιστή, και τις σερβίρει έτοιμες στον φυλλομετρητή του χρήστη. Συνήθως η php προετοιμάζει html. Όταν ο χρήστης ζητήσει ένα αρχείο php, προλαβαίνει ο προεπεξεργαστής, το εκτελεί, και το αποτέλεσμα σερβίρεται ως html στον φυλλομετρητή.

Όμως ο php δεν έχει κανένα περιορισμό όσον αφορά το τι είδους έγγραφο θα παράξει. Έτσι μπορεί εκτός από html να παράξει και άλλου είδους αρχεία, όπως css. Αυτό μας δίνει τη δυνατότητα να δημιουργήσουμε δυναμικά css που να αλλάζουν ανάλογα με τα στοιχεία που έχουμε, όπως για παράδειγμα το είδος του φυλλομετρητή που έχει ο χρήστης.

Θα χρειαστούμε το παρακάτω script που ανιχνεύει τον φυλλομετρητή, μπορείτε να το κατεβάσετε δωρεάν από εδώ

http://TechPatterns.com/downloads/php_browser_detection.php

Κατόπιν πρέπει να δημιουργήσουμε ένα αρχείο με κατάληξη .php (ωστε να γνωρίζει ο προεπεξεργαστής ότι πρέπει να το αναλάβει), και να δηλώσουμε πως το αποτέλεσμα είναι css και όχι html. Αυτό γίνεται με την εντολή

header(«Content-Type: text/css»);

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

include(‘browser_detection.php’);

για τις ανάγκες του παραδείγματος θα δημιουργήσουμε 2 περιπτώσεις:

  1. Internet Explorer 7 και παλαιότερα
  2. Όλοι οι υπόλοιποι browsers

Αυτή η επιλογή αν και απλή λειτουργεί αρκετά καλά. Περισσότερες πληροφορίες για την υποστήριξη των browsers σε επόμενο post.

Με τις παρακάτω γραμμές δημιουργούμε μία boolean μεταβλητή που είναι true όταν ο φυλλομετρητής είναι IE7 (ή μικρότερο)

$a_browser_data = browser_detection(‘full’);
$ie7=false;
if (( $a_browser_data[0] == ‘ie’)&&( $a_browser_data[1] < 8 )) $ie7=true;

Παρατηρήστε ότι γράφουμε “<8”. Αυτό γίνεται έτσι ώστε οποιαδήποτε ενδιάμεση έκδοση πχ 7.1 να αντιμετωπίζεται ως ΙΕ7

Στη συνέχεια συντάσσουμε το stylesheet όπως θα συντάσσαμε ένα απλό .css με τη διαφορά πως όταν θέλουμε μια ιδιότητα να διαφέρει από φυλλομετρητή σε φυλλομετρητή θα την ελέγξουμε με μια συνθήκη if

if (!$ie7) echo («color: black;»); else echo («color: blue;»);

εννοείται πως όλες τις εντολές του προεπεξεργαστή πρέπει να έχουμε φρονίσει να τις περικλείσουμε στο directive του προεπεξεργαστή

<?php
//εντολές προεπεξεργαστή php
?>

Το τελικό αρχείο μας θα μοιάζει κάπως έτσι:

<?php
header(«Content-Type: text/css»);
include(‘browser_detection.php’);
$a_browser_data = browser_detection(‘full’);
$ie7=false;
if (( $a_browser_data[0] == ‘ie’)&&( $a_browser_data[1] < 8 ))
$ie7=true;
?>

body{
if (!$ie7) echo («color: black;»); else echo («color: blue;»);
}

Το συγκεκριμένο αρχείο θα εμφανίζει το κείμενο μαύρο σε ΙΕ7 και μπλε σε κάθε άλλη περίπτωση

βαβέλ

Η απότομη ανάπτυξη του ίντερνετ ίσως να είναι τελικά και η καταδίκη του. Λόγω του ότι η κάθε εταιρία θέλει να προλάβει τον ανταγωνισμό και να καθιερωθεί το δικό της σύστημα για κάθε νέα τεχνολογία, οι φορείς πιστοποίησης ακολουθούν αντί να προηγούνται των τεχνολογιών. Το αποτέλεσμα? πολλαπλή δουλειά και μεγάλη ασυμβατότητα σε κάθε ηλεκτρονική δραστηριότητα. Msn, skype, AIM, Yahoo IM, AOL Messenger, Google Talk, Jabber, SIP όλα εξυπηρετούν τον ίδιο σκοπό με διαφορετικά όμως πρωτόκολλα. Emule, limewire, bearshare, bitTorrent κλπ αντίστοιχα. Θα μπορούσα να συνεχίσω επί ώρες να παραθέτω τεχνολογίες και υπηρεσίες που αλληλο καλύπτονται χωρίς δυνατότητα συνεργασίας. Σιγά σιγά οι εταιρίες ανακαλύπτουν πως όλο αυτό το σύστημα περιορισμών που είχαν αρχικά επιβάλει για να κρατήσουν τους πελάτες στο μαντρί προκαλεί απλά σύγχιση και στο τέλος μεγαλύτερη ταλαιπωρία και αρχίζουν να προσαρμόζονται. Παράδειγμα αποτελεί η προτυποποίηση των συνδέσεων των κινητών τηλεφώνων που σιγά σιγά βαδίζουν προς την υιοθέτηση κοινού φορτιστή, και κοινού ακουστικού. Άλλο παράδειγμα αποτελεί η κοινή λειτουργία MSN Messenger και Yahoo messenger. Και πάλι όμως καθώς υπάρχει έλλειψη ισχυρής αρχής προτυποποίησης (που οφείλεται εν μέρει και στις πρακτικές ορισμένων εταιριών που υπονομεύουν τις προσπάθειες προτυποποίησης) ακόμα και οι μορφές που φαίνεται να έχουν επικρατήσει στη συνείδηση των e-πολιτών ώς πρότυπες δέχονται επιθέσεις από τους ισχυρούς αυτού του κλάδου που προσπαθούν επιτυχώς ή ανεπιτυχώς να εισβάλουν με ένα μερίδιο αγοράς αδιαφορώντας για την βαβέλ που θα προκαλέσουν.
Το πόσο δύσκολο είνα να διαφύγουμε και να κάνουμε την ηλεκτρονική ζωή μας λίγο πιο εύκολη γίνεται προφανές όταν εξετάσουμε τις περιπτώσεις όπου προιόντα με αλληλεπικαλυπτόμενες δυνατότητες συνυπάρχουν στην ίδια εταιρία, και η ορμή τους (η βάση χρηστών δηλαδή που έχουν και οι οποίοι δεν θέλουν να μεταπηδήσουν σε άλλο προιόν) αναγκάζει τις εταιρίες αυτές να τα εξελίσσουν ταυτόχρονα. Δυο γνωστές περιπτώσεις (Adobe Flash – Adobe Director και Autodesk Maya – Autodesk 3d studio MAX) προέκυψαν από εξαγορές άλλων εταιριών που δραστηριοποιούνταν στον ίδιο κλάδο, όμως δείχνει πως ακόμα και όταν υπάρχει θέληση η ενοποίηση και απλοποίηση των τεχνολογιών είναι ένα δύσκολο εγχείρημα.

Powered by outofbounds.gr and qwazix.