CSS3 - Άρθρα

WebSockets, αμφίδρομη και ασύγχρονη επικοινωνία

2010-04-07T05:30:21+00:00

Το ‘web browsing’ είναι γενικά μια απλή διαδικασία: οι χρήστες κάνουν κλικ στους συνδέσμους μιας σελίδας και οδηγούνται μέσω αυτών σε άλλες. Η λειτουργία αυτή, αν και βασική, δεν δίνει από μόνη της την δυνατότητα στους χρήστες να ζητήσουν ή να ενημερώσουν στοιχεία χωρίς να αλλάξουν σελίδα. Για να ξεπεραστεί αυτή η αδυναμία, αναπτύχθηκαν τεχνικές όπως το AJAX, που ουσιαστικά προσφέρουν ένα στρώμα ασύγχρονης επικοινωνίας πάνω στην ήδη υπάρχουσα τεχνολογία. Μέσω ασύγχρονων κλήσεων λοιπόν, ο browser του χρήστη μπορεί να επικοινωνήσει με το website και να λάβει μια απάντηση χωρίς να χρειαστεί να αλλάξει σελίδα.

File API, μια λύση σε ένα όχι και τόσο απλό πρόβλημα

2010-01-13T05:15:29+00:00

File uploaders. Εργαλεία που έχουν γίνει αναπόσπαστο κομμάτι κάθε web service στην εποχή μας, αλλά και ένας μόνιμος πονοκέφαλος για τους developers.

Όσο απλή και να φαίνεται η διαδικασία μαζικού upload 20 φωτογραφιών στο Flickr, τα πράγματα στον κώδικα δεν είναι πάντα τόσο εύκολα. Έτσι λοιπόν στις μέρες μας για να μπορέσει κάποιος να υλοποιήσει μια σωστή διαδικασία μαζικού upload, θα πρέπει να χρησιμοποιήσει την τεχνολογία Flash της Adobe, λόγω έλλειψης της δυνατότητας μαζικής και ασύγχρονης αποστολής αρχείων στον server από τους browsers που κυκλοφορούν.

Κατασκευάζοντας ένα mobile site με το Mobify

2009-12-16T07:01:06+00:00

Όσο περνάει ο καιρός οι επισκέπτες που θα μπαίνουν στις ιστοσελίδες μας από κινητές συσκευές θα αυξάνονται. Δραματικά. Η Ζαχαρένια έκανε την αρχή γράφοντας πως θα ήταν τα πράγματα αν το design γινόταν σε iPhone. Να το δούμε λίγο καλύτερα αυτό;

Το Mobify είναι μια υπηρεσία που αναλαμβάνει να μετατρέψει ένα site σε mobile site. Ένα mobile website δεν είναι το ίδιο με ένα “κανονικό” - υπάρχουν πολλές διαφορές που πρέπει να ληφθούν υπόψη. Το Mobify κάνει τη ζωή μας πιο εύκολη στο θέμα.

H HTML5 είναι εδώ (μέρος 2ο) : Canvas

2009-12-16T07:00:41+00:00

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

Σε αυτό το δεύτερο μέρος θα ασχοληθούμε ίσως με το πιο δυνατό χαρακτηριστικό που μας προσφέρει η HTML5, το canvas element και το API του.

Η συνέντευξη (μέρος 2)

2009-12-02T08:47:33+00:00

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

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

Πάμε παρακάτω. Ο κατάλληλος υποψήφιος δεν μπορεί παρά να αξιολογηθεί βάσει κάποιων κριτηρίων. Ποια είναι τα σημαντικότερα;

Developer Tools, το απαραίτητο εργαλείο

2009-11-18T07:23:27+00:00

Inspect element. Όσοι από εσάς έχετε ασχοληθεί έστω και λίγο με web design ή/και web development, οι δύο αυτές λέξεις θα σας φανούν γνώριμες. Ο τρόπος με τον οποίο μπορεί πλέον ο οποιοσδήποτε να ερευνήσει τον κώδικα μιας σελίδας με δύο κλικ ίσως να φαίνεται αυτονόητος για πολλούς, τα πράγματα όμως δεν ήταν πάντα έτσι.

Μέχρι πρόσφατα, η διαδικασία αποσφαλμάτωσης των σελίδων ήταν αρκετά επίπονη, αφού τόσο για το markup (HTML) όσο και για την Javascript οι developers/designers θα έπρεπε είτε να μάθουν καλά ένα εξωτερικό εργαλείο και να κάνουν την δουλεία τους εκεί, όπως το Dreamweaver, ή να χρησιμοποιούν κάποιο από τα πολλά extensions του Firefox με τις χιλιάδες επιλογές και τα submenus.

Ο πόλεμος των impressions, τα banners κι εμείς

2009-11-18T07:23:03+00:00

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

Δεν θα ακολουθήσω την τακτική “banners suck”. Έχω πλέον καταλάβει ότι τα flame wars μεταξύ designers / developers και marketers δεν έχουν κανένα νόημα. Η τωρινή κατάσταση στο ελληνικό Web αφήνει λίγα περιθώρια βελτίωσης του ισχύοντος banner fest (αν και είμαι αισιόδοξη). Αναρωτιέμαι όμως, σαν απλός χρήστης, αν τα αποτελέσματα μιας τέτοιας μορφής διαφήμισης είναι τόσο θετικά που δικαιολογούν τη λατρεία των διαφημιστών (και διαφημιζομένων, για να μην είμαι μονόπλευρη).

Ρωτώ τους διαφημιστές φίλους μου, τί “πουλάνε” τελικά; Impressions; Clicks; Πώς αποδεικνύεις την αποτελεσματικότητα μιας καμπάνιας; Πώς αντιλαμβάνεσαι την αποδοχή της διαφήμισης από τον κόσμο; Από ένα Ermis Award και δυο-τρία features σε διαφημιστικά blogs του εξωτερικού; Από τις αυξημένες πωλήσεις του προϊόντος; Είμαι πραγματικά περίεργη.

Η έρευνα του CSS3.gr και οι τυχεροί της κλήρωσης

2009-11-04T07:01:14+00:00

Πριν από ένα μήνα σας ζητήσαμε να συμμετάσχετε στη έρευνα του site σχετικά με το πόσο καλή παρέα σας κρατάει.

Αν το Web Design γινόταν σε iPhone…

2009-11-04T07:00:43+00:00

Designing the iPhone app, August 2008 - by last.fm

Πρόσφατα, μου δόθηκε η ευκαιρία μέσω της δουλειάς μου να δουλέψω λίγο με CSS3 και όλα αυτά τα γυαλιστερά νέα πραγματάκια που προσφέρει το Webkit για να σχεδιάσω ειδικές εκδόσεις κάποιων από τις υπηρεσίες μας για το iPhone.

Ήταν μια αξέχαστη εμπειρία. Σας μιλάω με κάθε ειλικρίνεια. Μια από τις δυο-τρεις εμπειρίες που είχα στην καριέρα μου μέχρι τώρα όπου σταμάτησα, κοίταξα την οθόνη και είπα whoah.

Με έβαλε σε σκέψεις η όλη εμπειρία - τελικά, πώς θα ήταν ο (μικρο)κόσμος του web design αν ασχολούμασταν μόνο με ανάπτυξη websites για πλοήγηση σε iPhone;

H HTML5 είναι εδώ (μέρος 1ο) : SVG

2009-11-04T07:00:38+00:00

Όλο και περισσότερος κόσμος αρχίζει και ασχολείται με την HTML5, τις νέες δυνατότητες που προσφέρει, καθώς και τις λύσεις που θα δώσει - μαζί με τo CSS3 - στα καθημερινά προβλήματα και περιορισμούς που αντιμετωπίζουν οι web desiners/developers ανά την υφήλιο. Οι περισσότεροι ρίχνουν μια γρήγορη ματιά στα νέα tags έτσι ώστε να ξέρουν τι τους περιμένει, ενώ συνήθως δεν εμβαθύνουν στις νέες παράπλευρες τεχνολογίες και API τα οποία δίνουν απίστευτες δυνατότητες στην νέα markup.

H καινούργια έκδοση της HTML έχει φτιαχτεί έτσι ώστε να βοηθήσει τους developers να χτίσουν καλύτερες και πιο δομημένες web εφαρμογές και όχι μόνο έγγραφα (documents), ενώ η δύναμη της πηγάζει κυρίως από τις προσθήκες API και τεχνολογιών που προσφέρουν ελευθερία και έλεγχο στους developers, και όχι τόσο από τα νέα tags, τα οποία είναι και το ευκολότερο μέρος εκμάθησης της νέας markup.

Στην σειρά άρθρων που θα ακολουθήσει λοιπόν, θα προσπαθήσω να παρουσιάσω τις πιο ενδιαφέρουσες νέες δυνατότητες και τεχνολογίες που εμφανίζονται στην HTML5. Όσοι θέλετε να δείτε πως δουλεύουν τα νέα tags/attributes, καλύτερα να ρίξετε μια ματιά σε άλλα άρθρα, γιατί δυστυχώς δεν έχω σκοπό να ασχοληθώ πολύ με αυτά (ίσως σε κάποιο μελλοντικό άρθρο). Αντιθέτως στην σειρά άρθρων που ακολουθεί θα παρουσιάσω τεχνολογίες και APIs που ξεχωρίζουν στην HTML5 και που με έχουν εντυπωσιάσει.