Web Design Blog x2interactive. Ένα blog για το Internet και το Web Design » WEB DESIGN AND DEVELOPMENT

Αντανάκλαση με CSS σε Webkit

Σπύρος Παπασπυρόπουλος | Web Professional — Tue, 22 Jun 2010 14:51:08 +0000

Πρόσφατα το NETTUTS+ δημοσίευσε ένα ενδιαφέρον CSS Tip το οποίο αξίζει να αναφέρουμε στο Web Design Blog. Το Tip αυτό ονομάζεται Pure CSS Reflections και σας δίνει τη δυνατότητα να εισάγετε μια αντανάκλαση κάτω από τις εικόνες ή την εικόνα που επιθυμείτε στη σελίδα σας με CSS κώδικα μόνο, χωρίς την ανάγκη κάποιου προγράμματος επεξεργασίας εικόνας, όπως το Photoshop. Το συγκεκριμένο CSS tip δουλεύει μόνο σε Webkit supported browsers, δηλαδή τον Safari, Chrome, iPhone & iPad Safari και όλα τα προγράμματα πλοήγησης που υπάρχουν σε αυτή την λίστα.

Ο κώδικας CSS που απαιτείται για αυτή την ενέργεια είναι μικρός:

img {

-webkit-box-reflect: below 4px
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

}

Απλά εισάγετέ τον στο CSS αρχείο σας στο σημείο που επιθυμείτε και δείτε τα αποτελέσματα.

Ανάλυση του CSS

-webkit-box-reflect: below 4px

Με αυτή την εντολή λέμε στον webkit browser να δημιουργήσει μια αντανάκλαση του γραφικού μας. Η θέση της αντανάκλασης αυτής, θα είναι 4px κάτω από το γραφικό.

-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

Για να ελαττώσουμε τον χώρο στον οποίο εξαπλώνεται η αντανάκλαση, χρησιμοποιούμε την εντολή -webkit-gradient η οποία ουσιαστικά χρωματίζει με degrade ένα χώρο. Η σύνταξη του παραπάνω κώδικα καθοδηγεί το degrade που θέλουμε να φτιαχτεί, ορίζοντάς το σαν linear degrade, με κατεύθυνση από πάνω αριστερά προς τα κάτω αριστερά (δηλαδή ευθεία κάτω). Το χρώμα του θα αρχίζει αντίστοιχα από διάφανο και θα καταλήγει σε άσπρο που είναι και το χρώμα της σελίδας του παραδείγματος. Ουσιαστικά αυτή η εντολή λειτουργεί σαν μια μάσκα. Ο αριθμός 7 δηλώνει το ποσοστό της εικόνας που θέλουμε να φαίνεται στο degrade. Στην προκειμένη περίπτωση είναι 70%.

Σημείωση: Το γραφικό με το λογότυπο της x2interactive δεν χρησιμοποιεί αυτή την τεχνική, είναι καθαρά εικαστικό για το άρθρο αυτής της σελίδας.

No tag for this post.

Σχετικά άρθρα

Επαγγελματικές λύσεις με WordPress, χαμηλώστε το κόστος παραγωγής.

Γιάννης Ευσταθίου | Web Professional — Fri, 04 Jun 2010 23:34:22 +0000

Όταν το 2003 γράφτηκε η πρώτη γραμμή κώδικα του WordPress κανείς δεν φανταζόταν ότι θα έφτανε τόσο ψηλά, ανάμεσα σε custom cms και άλλα αντίστοιχα open source. Μέσα σε ένα χρονικό διάστημα μίας πενταετίας εξελίχτηκε σε μία επαγγελματική λύση που έχουν υιοθετήσει αρκετές εταιρίες του χώρου, bloggers, startups και ιδιώτες χρήστες. Η πρόοδος της τεχνολογικής πλατφόρμας του διαχειριστικού εργαλείου είναι αξιοσημείωτη με συνεχείς βελτιώσεις και την υποστήριξη μίας παγκόσμιας κοινότητας. Παράλληλα η μπροστινή όψη (client side) της εφαρμογής έχει καλυτερεύσει με γοργούς ρυθμούς δημιουργώντας μία νέα αγορά από επαγγελματικά themes που είναι σχεδιασμένα με τα τελευταία πρότυπα του διαδικτύου, από εικαστικής απόψεως και σε προγραμματιστικό επίπεδο (html, javascript, php etc).

Το WDB σας παραθέτει μία σύντομη λίστα από τα καλύτερα websites για να αγοράσετε επαγγελματικά themes βασισμένα σε διαφορετικό layout & UID. Καλύπτουν ανάγκες για απλές προσωπικές και εταιρικές προβολές, καθώς ηλεκτρονικά καταστήματα e-shop, online εφημερίδες και μαγκαζίνα. Χαμηλώστε το κόστος παραγωγής ενός διαδικτυακού έργου χρησιμοποιώντας προσεγμένη τυποποιημένη δουλεία από επαγγελματίες, δίδοντας όμως και τη δικιά σας εικαστική πινελιά στο τελικό αποτέλεσμα.

Καλοδεχούμενη είναι η προσθήκη του κάθε χρήστη στη παραπάνω λίστα.

Αναμένουμε να δούμε και τις αναβαθμίσεις του πολύ αναμενόμενου WP 3 και τις αρνητικές ή θετικές εξελίξεις στην αγορά των επαγγελματικών themes που ξεπερνά πολλά εκατομμύρια δολάρια παγκοσμίως. Συμπληρωματικά να επισημανθεί το σημερινό άρθρο δεν αποτελεί διαφήμιση του WordPress και των επαγγελματικών themes αλλά ένα εφόδιο στο σύγχρονο επαγγελματία να παρέχει πιο οικονομικές λύσεις στην σημερινή πιεσμένη αγορά. Σίγουρα υπάρχουν και άλλα αξιόλογα διαχειριστικά εργαλεία websites / CMS διαφορετικών προγραμματιστικών γλωσσών και προελεύσεων, που κάνουν τη δουλειά τους.

Λέξεις κλειδιά: Templates, web, Wordpress, Wordpress themes

Σχετικά άρθρα

300+ εμπνευσμένα websites & concepts για να εμπλουτίσετε τη δημιουργικότητα σας.

Γιάννης Ευσταθίου | Web Professional — Mon, 01 Mar 2010 11:46:02 +0000

Το Web Design Blog σας παρουσιάζει μία μεγάλη συλλογή από επιλεγμένα άρθρα που δημοσιευτήκαν μέσα στο Φεβρουάριο με πλούσια πηγή έμπνευσης και δημιουργικότητας. Προβάλλονται καλαίσθητα websites & concepts σχεδιασμένα με λεπτομέρεια και καλλιτεχνία από επαγγελματίες του διαδικτύου.

Η διαρκή αναζήτηση νέων εικόνων και οπτικών ερεθισμάτων είναι μία βασική ανάγκη στη καθημερινότητα του web designer. Οι διαφορετικές εικαστικές λύσεις και συνθέσεις που απαιτούνται σε κάθε περίπτωση αποτελούν το βασικό στοιχείο του κάθε σύγχρονου designer. Τίποτα δεν είναι αρκετό να καλύψει το κενό της φαντασίας ενός καλλιτέχνη, που καλείται να σχεδιάζει και να σκέφτεται νέες ιδέες με προσαρμοσμένα design σε καθημερινούς ρυθμούς. Μία τυχαία εικόνα που θα αποτυπωθεί στον ανθρώπινο νου “ξεφυλλίζοντας” διάφορα website showcases, μπορεί στο μέλλον να φέρει τη γέννηση ενός πετυχημένου design.

e-commerce

Ηλεκτρονικά καταστήματα / e-shops σχεδιασμένα με έντονο το καλλιτεχνικό στοιχείο και προσαρμοσμένα εικαστικά για διαφορετικές ομάδες χρηστών.

Ιllustrations

Προβάλλονται Ιστοσελίδες σχεδιασμένες με έντονο το στοιχείο των illustrations. Τα τελευταία web trends συγκαταλέγουν τα custom illustrations μέσα στη διαδικτυακή μόδα αφού το αποτέλεσμα είναι πάντα μοναδικό.

Flash

Περιλαμβάνει εντυπωσιακά flash websites, η κίνηση τα γραφικά δίνουν πάντα μία όμορφη online εμπειρία.

60 δημιουργικά flash websites που δεν πρέπει να χάσετε

404 error

Η λεπτομέρεια και η εικαστική παρέμβαση είναι πάντα επίκαιρη καθώς όλο και πληθαίνει η χρήση σελίδων 404 error pages.

Διάφορα

Συλλογή από Coming Soon websites
Όμορφη συλλογή από “υπό κατασκευή / σύντομα κοντά σας” websites που χαρίζουν υποσχόμενα designs
8 ενδιαφέροντα videos με οράματα – σενάρια για το μέλλον
Μία γεύση του μέλλοντος μέσα από το πρίσμα της τεχνολογίας και της επιστημονικής φαντασίας.
20 websites για να αντλήσουν έμπνευση οι γραφίστες

Πηγές 300+ συλλογής αλφαβητικά:

No tag for this post.

Σχετικά άρθρα

10+ WordPress Plugins για να βελτιώσετε το WP website σας!

Σπύρος Παπασπυρόπουλος | Web Professional — Fri, 04 Dec 2009 07:43:35 +0000

Όπως έχουμε αναφέρει και στο παρελθόν, το WP είναι μια εύχρηστη και ελαστική πλατφόρμα, η οποία προσφέρει πολλές δυνατότητες στους διαχειριστές της. Αυτό που την κάνει τόσο ενδιαφέρουσα είναι η ευκολία στο να προσθέτει κάποιος νέες λειτουργίες με την προσθήκη WordPress Plugins. Στο σημερινό άρθρο το WDB σας έχει ετοιμάσει μια λίστα με χρήσιμα plugins τα οποία ίσως σας φανούν χρήσιμα για το WordPress installation σας.

1. Drag To Share

Δώστε τη δυνατότητα στους χρήστες σας να μοιραστούν στα κοινωνικά δίκτυα μια σελίδα, κάνοντας drag μια εικόνα της σε οποιοδήποτε Social Networking site.
Download: http://wordpress.org/extend/plugins/drag-to-share/

2. TypeKit Plugin for WordPress

Προσθέστε fonts στο WordPress σας για να το ομορφύνετε με την χρήση της υπηρεσίας TypeKit.
Download: http://wordpress.org/extend/plugins/typekit/

3. Custom Coming Soon Page

Αν θέλετε να προετοιμάσετε το έδαφος ενός νέου WordPress site πριν αυτό βγεί στον αέρα, με αυτό το plugin έχετε την δυνατότητα να φτιάξετε μια “Coming Soon” σελίδα.
Download: http://wordpress.org/extend/plugins/custom-coming-soon-page/

4. Custom Class Selector

Δώστε ένα δικό σας στυλ στο περιεχόμενο των σελίδων σας με την χρήση αυτού του plugin.
Download: http://wordpress.org/extend/plugins/custom-class-selector/

5. Pretty Comments

Δώστε την δυνατότητα στους χρήστες σας να γράφουν όμορφα comments με τη χρήση του “Pretty Comments” plugin.
Download: http://wordpress.org/extend/plugins/pretty-comments/screenshots/

6. Custom Login Page

Αν βαρεθήκατε να βλέπετε συνέχεια την ίδια login σελίδα όταν κάνετε login εσείς ή οι χρήστες σας, τότε μπορείτε με τη δημιουργία του “Custom Login Page” να κάνετε ακριβώς αυτό.
Download: http://wordpress.org/extend/plugins/wp-custom-login-page/

7. Freebie Images: Free Stock Images Plugin

Αν δεν έχετε φωτογραφικό υλικό για τα post σας, μπορείτε εύκολα με την χρήση του “Freebie Images” να αποκτήσετε πρόσβαση σε πολλές φωτογραφίες, δωρεάν!
Download: http://wordpress.org/extend/plugins/freebie-images-free-stock-images-plugin/screenshots/

8. SecurePress Website Security Analyzer

Δώστε την ασφάλεια που χρειάζεστε στο WordPress website σας με την βοήθεια του πολύ χρήσιμου “SecurePress” plugin. Το plugin αυτό περιέχει μια σειρά από χρήσιμα εργαλεία τα οποία μπορεί να κάνουν την διαφορά την στιγμή που κάποιος επιτήδειος προσπαθήσει να σας κάνει ζημιά.
Download: http://wordpress.org/extend/plugins/securepress-plugin/

9. My WordPress Secure

Κρατήστε την έκδοση του WP σας κρυφή με αυτό το πολύ απλό αλλά έξυπνο plugin.
Download: http://wordpress.org/extend/plugins/my-wordpress-secure/

10. No IE6

Το Web Design Blog, έχει αναφέρει στο παρελθόν για το πώς να ενημερώνετε τους χρήστες των διαδικτυακών σας τόπων να χρησιμοποιούν την ξεπερασμένη έκδοση του Internet Explorer 6.0, δίνοντάς τους τη δυνατότητα να κάνουν αναβάθμιση. Το παρακάτω plugin, σας δίνει αυτή την δυνατότητα στα WordPress installations σας.
Download: http://wordpress.org/extend/plugins/reject-ie6/

11. Private Messages For WordPress

Σαν bonus, σας παρουσιάζουμε ένα plugin το οποίο δίνει τη δυνατότητα στους χρήστες σας να στέλνουν προσωπικά μηνύματα μεταξύ τους!
Download: http://wordpress.org/extend/plugins/private-messages-for-wordpress/screenshots/

Λέξεις κλειδιά: Wordpress, wordpress plugin

Σχετικά άρθρα

Πετύχετε καλύτερη συμπίεση γραφικών με Fireworks

Γιάννης Ευσταθίου | Web Professional — Thu, 26 Nov 2009 17:06:08 +0000

Οι περισσότεροι web designers χρησιμοποιούν το Photoshop για να σχεδιάζουν τα designs τους. Το Photoshop CS4 είναι το πιο διαδεδομένο πρόγραμμα στην αγορά που εστιάζει στη δημιουργία συνθέσεων και γραφικών με ποιοτικά φίλτρα και εκπληκτικά εργαλεία. Η χρήση του είναι πολύπλευρη εν σχέση με την ειδικότητα του designer και είναι σίγουρη επιλογή του ειδικού. Πρόσφατες δημοσιεύσεις δείχνουν όμως, πως οι χρήστες που σχεδιάζουν για το web με τη χρήση του Fireworks έχουν πληθύνει. Η νέα έκδοση Fireworks CS4 αποτελεί ένα ολοκληρωμένο εργαλείο που ειδικεύεται στο web με ενισχυμένες επιλογές που κερδίζει όλο και περισσότερους θαυμαστές.

Το βασικό πλεονέκτημα του Fireworks CS4 όπως δημοσιεύτηκε στο WebDesignerWall είναι η καλύτερη συμπίεση σε όλες τις διαφορετικές μορφές γραφικών / εικόνων όπως PNG, JPEG και GIF. Στα τεστ που κάνανε οι συνάδελφοι στο WebDesignerWall, τα γραφικά που δημιουργήθηκαν στο Fireworks ήταν μικρότερα σε βάρος των αντιστοίχων γραφικών που δημιουργήθηκαν στο Photoshop έχοντας ακριβώς τις ίδιες ρυθμίσεις. Στα παραδείγματα που προβάλλει το άρθρο, η διαφορά κυμαίνεται μεταξύ 4>8kb αφαιρώντας αρκετό όγκο δεδομένων από το συνολικό download μίας ιστοσελίδας. Σύμφωνα με αυτά τα αποτελέσματα, η λύση του Fireworks αποκτάει μεγάλο ενδιαφέρον καθώς τα websites που θα σχεδιάζετε θα είναι “ελαφρίοτερα” με μικρότερο χρόνο αποθήκευσης.

Από οικονομικής πλευράς το Fireworks υπερτερεί ως προς το Photoshop αφού είναι 400 δολάρια πιο φθηνό στην Αμερική και 500+ Ευρώ στην Ελλάδα. Όπως και να έχει το θέμα, το αποτέλεσμα είναι προβλέψιμο. Οι web designers θα χρησιμοποιήσουν το Fireworks όχι υποχρεωτικά για να αντικαταστήσουν το Photoshop αλλά σαν καλύτερη λύση για να σώζουν τα γραφικά τους στο web με καλύτερη συμπίεση.

Μπορείτε να αντλήσετε περισσότερες πληροφορίες για τα παράδειγμα σε αυτόν το σύνδεσμο.

Λέξεις κλειδιά: adobe, fireworks, image compression, Photoshop, web design

Σχετικά άρθρα

Article Directory WordPress Plugin

Σπύρος Παπασπυρόπουλος | Web Professional — Fri, 20 Nov 2009 14:05:23 +0000

Το WordPress σαν πλατφόρμα έχει εξελιχθεί σημαντικά, ιδιαίτερα τον τελευταίο χρόνο. Πλέον δεν θεωρείται σαν μια απλή πλατφόρμα για blogging, αλλά σαν ένα ολοκληρωμένο CMS (Content Management System), το οποίο μπορεί να προσφέρει παντός είδους λύσεις με την κατάλληλη παραμετροποίηση.

Στο σημερινό άρθρο, το Web Design Blog, παρουσιάζει το Article Directory WordPress Plugin, ένα plugin το οποίο μετατρέπει την αρχική σελίδα του WordPress site σας, ή οποιαδήποτε άλλη σε article directory. Το directory αυτό είναι εύκολα παραμετροποιήσιμο με CSS. Η εγκατάσταση του συγκεκριμένου plugin προσθέτει κάποιες επιπλέον λειτουργίες στη Write/Edit Post σελίδα του WordPress administration panel σας.

Βασικές ρυθμίσεις του Article Directory WordPress Plugin

Η ποσότητα των άρθρων σε κατηγορίες parent – child.
Περιγραφή της εκάστοτε κατηγορίας στον τίτλο του συνδέσμου.
Η εμφάνιση κενών κατηγοριών.
Χρήση ιεραρχίας για υποκατηγορίες
Εξαίρεση επιλεγμένων κατηγοριών.

Χαρακτηριστικά

Απλή και εύχρηστη σχεδίαση του CSS. Η δομή των κατηγοριών είναι η πολυεπίπεδη λίστα η οποία μπορεί να μεταβληθεί εύκολα με CSS.
Υποστήριξη WordPress 2.3 και άνω.
Η parent κατηγορία δείχνει την ποσότητα των άρθρων στις εκάστοτοτε υποκατηγορίες της, αλλά και συνολικά στην ίδια την κατηγορία.
Δυνατότητα εμφάνισης συγκεκριμένης ποσότητας child directories.
Δυνατότητα εμφάνισης κατηγοριών για συγκεκριμένη ποσότητα στηλών (columns).
Δυνατότητα απόκρυψης όλων των υποκατηγοριών
Δυνατότητα εξαίρεσης των child άρθρων από τις σελίδες αρχείου (archive) των parent σελίδων.
Δυνατότητα προσθήκης εικονιδίων στις parent κατηγορίες με την χρήση CSS.
Δυνατότητα αντιγραφής του πηγαίου κώδικα των άρθρων.

Νέες επιλογές στο administration

Δυνατότητα προειδοποίησης του συντάκτη, αν δεν έχει επιλέξει καμία κατηγορία για το άρθρο του, ή αν έχει επιλέξει περισσότερες από μία.
Δυνατότητα απόκρυψης περιττών πεδίων από το διαχειριστικό σε περίπτωση που δεν γράφει ο administrator κάποιο άρθρο. Τα μόνα πεδία που υπάρχουν στη σελίδα “Write / Edit Post” είναι ο χώρος για το κείμενο και ένα κουμπί για moderation από το διαχειριστή.
Δυνατότητα να καθορίσετε το ύψος του πεδίου “κατηγορίες” στη σελίδα “Write / Edit Post”.
Δυνατότητα προσθήκης των “Όρων δημοσίευσης άρθρου” στη σελίδα “Write / Edit Post”.

Πώς να εγκαταστήσετε το Article Directory WordPress Plugin:

Αντιγράψτε το φάκελο καταλόγου στον κατάλογο WordPress plugins (… \ wp-content \ plugins \).
Αντιγράψτε το categories.css αρχείο στον κατάλογο με το θέμα σας.
Ενεργοποιήστε το plugin μέσω του admin interface.
Προσθέστε τον ακόλουθο κώδικα στο index.php (ή σε οποιοδήποτε άλλο αρχείο):
Προσθέστε τον ακόλουθο κώδικα στο style.css:
@ εισαγωγής »categories.css ‘?

Για περισσότερες πληροφορίες, μπορείτε να μεταβείτε στη σελίδα http://articlesss.com/article-directory-wordpress-plugin/ του κατασκευαστή και για να δείτε το plugin αρκεί να κάνετε κλικ στο σύνδεσμο http://articlesss.com/.

Λέξεις κλειδιά: wordpress plugin, worpress

Σχετικά άρθρα

21 εργαλεία για σωστό Web Design Wireframing

Σπύρος Παπασπυρόπουλος | Web Professional — Tue, 03 Nov 2009 08:26:39 +0000

Σε προηγούμενο άρθρο, με τίτλο “Wireframes στο Web Design” είχε αναλυθεί η έννοια του WireFrame στο Web Design, και πώς μπορεί κάποιος να χρησιμοποιήσει αυτή την τεχνική για να κερδίσει χρόνο από τη γενική παραγωγική διαδικασία ενός Web έργου.
Στον επίλογο του άρθρου αυτού, αναφέραμε πως θα προταθούν μερικά εργαλεία σχεδιασμού Wireframes. Τα συγκεκριμένα εργαλεία στοχεύουν κατά βάση σε αυτό, αλλά μπορείτε να χρησιμοποιήσετε και άλλα που χρησιμοποιείτε καθημερινά στην παραγωγική σας διαδικασία, όπως π.χ. το PowerPoint.
Σήμερα λοιπόν σας παρουσιάζουμε 21 εργαλεία για WireFraming:

Axure RP Pro

Balsamiq Mockups

Denim

EightShapes Unify

FlairBuilder

ForeUI

Gliffy

Hot Gloo

iPlotz

iRise

Jumpchart

Justinmind Prototyper

Justproto

Microsoft Visio

MockupScreens

mxGraph

Omnigraffle

Pencil

Pidoco

ProtoShare

WireframeSketcher

Λέξεις κλειδιά: UID, web design, wireframes

Σχετικά άρθρα

Δωρεάν συλλογή jQuery που δεν πρέπει να χάσετε!

Γιάννης Ευσταθίου | Web Professional — Wed, 28 Oct 2009 21:30:55 +0000

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

Σήμερα το Web Design Blog παρουσιάζει μια δωρεάν συλλογή που δεν πρέπει να χάσει κανείς web designer/ developer και ονομάζεται jQuery Tools 1.12. Περιλαμβάνει όλα τα μοντέρνα εφέ και τα είδη διαδεδομένων τρόπων εμφάνισης περιεχομένου που εφαρμόζονται στα σύγχρονα websites και “ζυγίζει” μόνο 5.72Κ!

Πηγή πληροφορίας σημερινού άρθρου.

Λέξεις κλειδιά: jquery

Σχετικά άρθρα

Wireframes στο Web Design

Σπύρος Παπασπυρόπουλος | Web Professional — Mon, 26 Oct 2009 11:00:39 +0000

Ίσως έχετε ακούσει για τα Wireframes στο Web Design, ίσως και όχι. Το σίγουρο είναι πάντως πως όσο εξελίσσονται οι απαιτήσεις στο επάγγελμα του σχεδιαστή ιστοσελίδων, τόσο πολύ αυξάνονται και οι ανάγκες για τη χρήση των Wireframes. Στη συνέχεια του σημερινού άρθρου θα δούμε ακριβώς τι είναι αυτά τα Wireframes, τι μπορούν να προσφέρουν στην παραγωγική διαδικασία και πώς μπορείτε να φτιάχνετε εύκολα τα δικά σας.

Τι είναι τα Wireframes στο Web Design;

Wireframe στο Web Design είναι ο πρόχειρος σχεδιασμός μια ιστοσελίδας ο οποίος γίνεται πριν τον κανονικό της σχεδιασμό. Συνήθως γίνεται με πολύ απλά εργαλεία γιατί στόχος είναι η προβολή της λειτουργικότητας της σελίδας και όχι του εικαστικού της. Λόγω της απλότητάς τους και της έλλειψης εικαστικού, είναι συνήθως ασπρόμαυρα και έχουν μοναδικό στόχο να απεικονίσουν την τοποθέτηση των στοιχείων μιας σελίδας και τη λειτουργικότητα της. Στοιχεία όπως scrollers, κουμπιά, θέσεις εικόνων, θέσεις τίτλων, κ.α.

Τι κερδίζετε από την χρήση των Wireframes;

Βλέποντας πώς θα λειτουργήσει ένας διαδικτυακός τόπος, πριν αυτός σχεδιαστεί, σας βοηθάει πάρα πολύ στην κατανόηση του UID (User Interface Design) και δίνει την ευκαιρία στη δημιουργική ομάδα να προβλέψει τυχόν προβλήματα που ίσως προκύψουν στο μέλλον. Εκτός από την ίδια τη δημιουργική ομάδα, οι πελάτες σας μπορούν να φανταστούν τον διαδικτυακό τους τόπο σε ένα αρχικό στάδιο. Αυτό τους βοηθάει στο να καταλάβουν τι ακριβώς θα παραλάβουν και τους δίνει την ευκαιρία να κάνουν τις επεμβάσεις που θέλουν σε ένα σημείο που δεν επηρρεάζει την παραγωγική διαδικασία. Τα εμπόδια αντιμετωπίζονται σε αρχικό στάδιο και ο πελάτης νιώθει ότι έχει μεγαλύτερη συμμετοχή στην όλη διαδικασία.

Πως μπορείτε να φτιάξετε δικά σας Wireframes;

Ο πιο συνηθισμένος τρόπος κατασκευής Wireframes είναι με το χαρτί και το μολύβι. Πάρτε μια λευκή κόλλα χαρτί και το μολύβι σας και αρχίστε να σχεδιάζετε τις ιδέες σας. Η επαφή αυτή με το project σάς δίνει τη δυνατότητα να διευρύνετε τους ορίζοντές σας. Το χαρτί και το μολύβι σας δίνουν την δυνατότητα να δείτε σε εικόνα αυτό που φαντάζεστε πολύ γρήγορα! Αφού ολοκληρώσετε τις ιδέες σας, μπορείτε να τις σκανάρετε και να τις αποστείλετε στον πελάτη σας σαν εικόνες, ώστε να αρχίσει να αποκτάει και εκείνος μια καλύτερη ιδέα του τι σκοπεύετε να του ετοιμάσετε και να του δώσετε την ευκαιρία να επέμβει σε αυτό το αρχικό στάδιο.

Επίλογος

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

Λέξεις κλειδιά: UID, web design, wireframes

Σχετικά άρθρα

Τα 7 καλύτερα Hosted Web CMS

Σπύρος Παπασπυρόπουλος | Web Professional — Tue, 20 Oct 2009 14:28:24 +0000

Το Web Design Blog έχει αναφερθεί στο παρελθόν σε Web CMS. Στο άρθρο “14 εμπνευσμένα open source CMS (Content Management Systems)”, είχαν παρουσιαστεί ονομαστικά τα πιο γνωστά Open source διαχειριστικά εργαλεία. Στο σημερινό άρθρο, θα γίνει μια παρουσίαση των πιο γνωστών και εύχρηστων διαχειριστικών εργαλείων τα οποία έχουν σαν χαρακτηριστικό τους να είναι hosted λύσεις. Δεν θα εξεταστούν απαραίτητα δωρεάν εφαρμογές, αλλά οι πιο εύχρηστες από αυτές οι οποίες μπορούν να εξυπηρετήσουν τον μέσο Web Designer ο οποίος δεν γνωρίζει, ή δεν θέλει να γνωρίζει να γράφει κώδικα.

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

Τι είναι Web CMS;

Τα Web CMS (Content Management Systems) είναι εργαλεία διαχείρισης πληροφορίας/δεδομένων ενός ή περισσοτέρων διαδικτυακών τόπων, τα οποία δίνουν τη δυνατότητα στους διαχειριστές τους να προσθέτουν, να αφαιρούν, να μεταβάλλουν και να ταξινομούν την πληροφορία/περιεχόμενο τους.

Ο παραπάνω όρος θα μπορούσε να αναλυθεί περισσότερο, αλλά στο σημερινό άρθρο στόχος είναι η παρουσίαση των καλύτερων Hosted Web CMS.

Τι είναι Hosted Web CMS;

Hosted Web CMS είναι το Web CMS το οποίο δεν χρειάζεται εγκατάσταση στον διακομιστή του εκάστοτε Web Designer / Web Agency / Πελάτη, αλλά βρίσκεται προ-εγκατεστημένο σε έναν server ο οποίος ανήκει στην εταιρία ή τον επαγγελματία που έχει αναπτύξει το Web CMS.

Ποιους εξυπηρετεί μια τέτοια λύση;

Το Hosted Web CMS δίνει την δυνατότητα σε κάποιον Web Designer να μπορεί να επικεντρωθεί στα θέματα που τον/την ενδιαφέρουν περισσότερο, όπως το Design. Θέματα hosting, database setup, CMS setup κλπ, δεν απασχολούν τον επαγγελματία σχεδιαστή μιας και όλα αυτά τα θέματα είναι καλυμμένα από την εταιρία που προσφέρει το διαχειριστικό.
Επίσης, προσφέρει την δυνατότητα σε κάποιον που δεν γνωρίζει από Web Design να μπορέσει να χτίσει μια αξιοπρεπή διαδικτυακή παρουσία, χωρίς κόπο και ιδιαίτερο χρόνο.
Τέλος, βολεύει εκείνη την ομάδα των ανθρώπων που απλά θέλουν μια γρήγορη διαδικτυακή παρουσία, έτοιμη μέσα στην ημέρα, χωρίς πολλές απαιτήσεις. .

Τα καλύτερα Hosted Web CMS

Παρακάτω ακολουθεί μια λίστα με τα καλύτερα Hosted Web CMS. Κάθε λύση έχει τα υπέρ και τα κατά της. Στο τέλος όμως η απόφαση είναι δική σας μιας και τον κάθε έναν τον εξυπηρετεί κάτι διαφορετικό.

SquareSpace

Από τις πιο γνωστές Hosted Web CMS λύσεις που υπάρχουν αυτή την στιγμή στο διαδίκτυο. Πολλοί γνωστοί και ταλαντούχοι του διαδικτυακού κόσμου, χρησιμοποιούν αυτή την λύση, όπως ο Kevin Rose, ιδρυτής του πολύ γνωστού Digg.com. Το SquareSpace δεν απαιτεί ιδιαίτερες γνώσεις προγραμματισμού ενώ προσφέρει πολλές επιλογές σε όσους επιθυμούν να δημιουργήσουν μια ηλεκτρονική παρουσία η οποία δεν έχει να ζηλέψει τίποτα από τις custom CMS λύσεις, ή τις λύσεις OpenSource downloadable.

Link: www.squarespace.com
Κόστος: Από $8/μήνα

LightCMS

Όπως και οι ίδιοι λένε, είναι το Web CMS για τους Web Designers. Είναι τόσο εύκολο, χρηστικό και γεμάτο επιλογές που κατά τα λεγόμενά τους αποτελεί την κύρια επιλογή ελεύθερων επαγγελματιών του χώρου που θέλουν να προσφέρουν μια πολύ καλή CMS με τις υπηρεσίες τους. Το LightCMS προσφέρει επίσης και rebranding, δίνοντας έτσι την δυνατότητα στους Web Designers να προσφέρουν το διαχειριστικό σαν δική τους κατασκευή.

Link: www.speaklight.com
Κόστος: Αρχίζει από δωρεάν

WaterCMS

Το μεγάλο “αδερφάκι” του LightCMS. Το WaterCMS απευθύνεται περισσότερο σε επιχειρηματίες ή σε Web Designers που θέλουν να προσφέρουν λύσεις όπως εταιρικά προφίλ με πολλές δυνατότητες, ηλεκτρονικά καταστήματα, κ.α. Παρέχει μια σειρά από πολλές επιλογές ώστε να ικανοποιεί ακόμα και τους πιο απαιτητικούς χρήστες/πελάτες, από την αρχική κιόλας έκδοση η οποία είναι δωρεάν.

Link: www.embracewater.com
Κόστος: Αρχίζει από δωρεάν

CushyCMS

Μια λύση η οποία έχει αρχίσει και χρησιμοποιείται όλο και περισσότερο από Web Designers ανά τον κόσμο. Ο λόγος είναι η απλότητα και η ευχρηστία του συστήματος διαχείρισης περιεχομένου που προσφέρει. Το CushyCMS προσφέρεται δωρεάν και με την δυνατότητα επιπλέον υπηρεσιών επι πληρωμή. Μία από αυτές είναι και το rebranding ώστε να μπορούν οι επαγγελματίες του χώρου να το προωθούν σαν δική τους δημιουργία.

Link: www.cushycms.com
Κόστος: Αρχίζει από δωρεάν

TweakCMS

Μια αρκετά νέα λύση στον χώρο των Hosted Web CMS. Το ενδιαφέρον στο TweakCMS είναι το γεγονός ότι ενώ προσφέρεται σαν Hosted λύση, δίνει την δυνατότητα “χωρισμού” όπως το θέτουν και οι δημιουργοί του στον διαδικτυακό τόπο του διαχειριστικού. Από τις πιο δυνατές επιλογές που προσφέρει αυτό το Web CMS είναι η ελευθερία κινήσεων, ασχέτως περιβάλλοντος του διακομιστή (σε περίπτωση που αποφασίσετε να φύγετε από τους δικούς τους servers.) Το διαχειριστικό λειτουργεί τόσο σε .NET περιβάλλον όσο και σε LAMP server.

Link: www.tweakcms.com
Κόστος: Αρχίζει από δωρεάν

Business Catalyst

Ίσως η πιο καλή επιλογή από όλες, το Busienss Catalyst, το οποίο ανήκει πλέον στον όμιλο Adobe, προσφέρει λύσεις σε όλα τα επίπεδα μιας διαδικτυακής παρουσίας. Με στόχο το ROI (return of investment) και την επιχειρηματικότητα ενός διαδικτυακού τόπου, το Business Catalyst προσφέρει όλα τα εφόδια που θα χρειαστείτε για να δημιουργήσετε επαγγελματικές λύσεις οι οποίες θα φοράνε το δικό σας brand.

Link: www.businesscatalyst.com
Κόστος: Γνωστοποίηση κόστους κατόπιν αιτήματος

WordPress

Η γνωστή σε όλους blogging πλατφόρμα η οποία έχει κερδίσει την καρδιά χιλιάδων χρηστών ανά τον κόσμο, προσφέρεται και για εγκατάσταση στον διακομιστή σας αλλά και σε μορφή Hosting Web CMS. Την δεύτερη έκδοση (Hosting) μπορείτε να την βρείτε στο www.wordpress.com και αν ζητάτε και κάτι παραπάνω από τις δωρεάν επιλογές, μπορείτε να επενδύσετε στις επιπλέον υπηρεσίες που προσφέρει η πλατφόρμα στο http://en.wordpress.com/products/. Η φιλοξενούμενη έκδοση έχει κάποιους περιορισμούς που η downloadable δεν έχει.

Link: www.wordpress.com
Κόστος: Αρχίζει από δωρεάν

Επίλογος

Όλες οι παραπάνω λύσεις είναι πολύ καλές και προσφέρουν στους χρήστες τους πάρα πολλές δυνατότητες. Οι καλύτερες από αυτές είναι επί πληρωμή ή ζητάνε κάποιο χρηματικό αντίτιμο για υπηρεσίες υψηλότερης ποιότητας (Premium services). Δεν θα ήταν ενδιαφέρον όμως η εταιρία Google να εξαγόραζε μια από αυτές και σε αντίθεση με το Business Catalyst της Adobe να το παρέχει εντελώς δωρεάν στους χρήστες του διαδικτύου; Το μέλλον του χώρου θα χαρακτηριζόταν τουλάχιστον ενδιαφέρον.

Λέξεις κλειδιά: CMS, Hosted CMS, WebCMS