Ένα από τα πολλά χαρακτηριστικά της HTML 5 και ίσως ένα από τα πιο ενδιαφέροντα για πολλούς, είναι πως δίνει την δυνατότητα εισαγωγής video στα website χωρίς την χρήση της τεχνολογίας Flash. Παρακάτω ακολουθεί μια λίστα με προτάσεις από HTML 5 video players που θεωρούνται από τις καλύτερες λύσεις που μπορούν να χρησιμοποιηθούν σε web έργα. Όλες τις λύσεις μπορείτε να τις κάνετε download από τα website links που σας παρέχουμε.

LeanBack Player

Προσφέρει υποστήριξη για υπότιτλους, αναπαραγωγή σε desktop browsers αλλά και σε mobile browsers. Σημαντικό είναι επίσης να σημειωθεί πως παρέχει υποστήριξη και για Internet Explorer 6, 7 και 8.
Περισσότερα μπορείτε να μάθετε στο http://dev.mennerich.name/showroom/html5_video/.

FryPlayer

Ένας OpenSource HTML 5 video player ο οποίος είναι εύκολος στην ρύθμιση μιας και έχει λίγες παραμετροποιήσεις.

Περισσότερα μπορείτε να μάθετε στο http://fryplayer.net/.

MediaElement Video Player

Ένας πολύ καλός HTML 5 video player ο οποίος υποστηρίζει iPad, iPod, iPhone , IE6, IE7, IE8, Firefox, Opera, Safari, Google Chrome και Android και διαθέτει υποστήριξη για Flash video σε περίπτωση που το περιβάλλον στο οποίο αναπαράγεται το video δεν υποστηρίζει HTML 5.

Περισσότερα μπορείτε να μάθετε στο http://mediaelementjs.com/.

VideoJS

Ίσως ο πιο διαδεδομένος video player αυτή την στιγμή. Υποστηρίζει iPad, iPod, iPhone, Firefox, Opera, Safari, Google Chrome και Android και προσφέρει υποστήριξη για Flash video σε περίπτωση που γίνεται χρήση κάποιου προγράμματος πλοήγησης (browser) που δεν υποστηρίζει HTML 5.

Περισσότερα μπορείτε να μάθετε στο http://videojs.com/.

Projekktor

Ένας HTML 5 video player ο οποίος τα καταφέρνει πολύ καλά σε πάρα πολλές πλατφόρμες. Συγκεκριμένα υποστηρίζει iPad, iPod, iPhone, IE6, IE7, IE8, Firefox, Opera, Safari, Chrome, και googleTV.

Περισσότερα μπορείτε να μάθετε στο http://www.projekktor.com/

SublimeVideo (6ο Player, προστέθηκε αργότερα)

Προτάθηκε από τον αναγνώστη μας @stelabouras και προστέθηκε στην λίστα στις 22/02/2011. Ευχαριστούμε Στέλιο!

Περισσότερα μπορείτε να μάθετε στο http://www.sublimevideo.net

Επίλογος

Η πρόοδος που σημειώνεται στον χώρο της αναπαραγωγής video με την τεχνολογία της HTML 5 είναι ραγδαία. Είναι σίγουρο πως στον επόμενο χρόνο, αν όχι στους επόμενους μήνες θα υπάρξουν σημαντικές εξελίξεις που μόνο θετικά θα μπορέσουν να επηρεάσουν το επάγγελμα του Web Designer / Developer.

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

Το screencast είναι η ψηφιακή εγγραφή των κινήσεων που γίνονται επί της οθόνης ενός ηλεκτρονικού υπολογιστή και πολλές φορές συνοδεύεται από εκφώνηση. Το screencast ονομάζεται από μερικούς και Video screen capture. Αν και στο παρελθόν τα αρχεία που δημιουργούνταν από ένα screencast ήταν μεγάλα σε μέγεθος και δύσκολα στην μεταφορά τους, τώρα χάρη στην τεχνολογία Adobe Flash οι δυνατότητες διαμοιρασμού τέτοιων αρχείων έχουν γίνει εύκολη υπόθεση.

Υπάρχουν πολλά προγράμματα για όλες τις γνωστές πλατφόρμες ( Windows, Mac OSX και Linux) που θα μπορούσατε να χρησιμοποιήσετε. Άλλα είναι δωρεάν και άλλα επί πληρωμή. Άλλα έρχονται με πολλές δυνατότητες και άλλα με τις βασικές.

Παρακάτω ακολουθεί μια λίστα με εφαρμογές που υπάρχουν σε κάθε πλατφόρμα:

Windows

1. Jing (http://www.jingproject.com/) Freeware
2. Wink (http://www.debugmode.com/wink/) Freeware
3. AviScreen (http://www.bobyte.com/) Freeware
4. CamStudio (http://camstudio.org/) Freeware
5. Adobe Captivate (http://www.adobe.com/products/captivate/) €850
6. AllCapture (http://www.allcapture.com/eng/index.php) €388
7. HyperCam (http://www.hyperionics.com/) $39.95

Mac OSX

1. Jing (http://www.jingproject.com/) Freeware
2. Backdrop (http://www.johnhaney.com/backdrop/) Freeware
3. Boinx Mouseposé (http://www.boinx.com/mousepose/) $16.95
4. OmniDazzle (http://www.omnigroup.com/applications/omnidazzle/) Freeware
5. Snapz Pro X (http://www.ambrosiasw.com/utilities/snapzprox/) $69
6. iShowU HD (http://shinywhitebox.com/) $29.95

Linux

1. recordMyDesktop (http://recordmydesktop.sourceforge.net/downloads.php) Freeware
2. Wink (http://www.debugmode.com/wink/) Freeware
3. Istanbul (http://live.gnome.org/Istanbul) Freeware
4. Xvidcap (http://xvidcap.sourceforge.net/) Freeware

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

Το Web Design Blog προτείνει μια on line λύση ή οποία ονομάζεται Screen Toaster. Το Screen Toaster είναι ένα website το οποίο βρίσκεται στη διεύθυνση http://www.screentoaster.com/ και λειτουργεί σαν ένα screencasting software. Το μόνο που έχετε να κάνετε είναι να γραφτείτε μέλος στο Screen Toaster και να αρχίσετε να γράφετε Screencasts εντελώς δωρεάν! Αν και βασίζεται στην τεχνολογία του browser σας για να λειτουργήσει, δεν περιορίζει τις δυνατότητες εγγραφής του μόνο σε αυτόν! Ελαχιστοποιώντας τον διαδικτυακό πλοηγό σας, μπορείτε να καταγράψετε οτιδήποτε γίνεται στην οθόνη του υπολογιστή σας!

Ας δούμε ποιες λειτουργίες προσφέρει αυτό το εντυπωσιακό webiste/εργαλείο:

1. Εγγραφή screencast με ή χωρίς ήχο
2. Εγγραφή screencast με ή χωρίς παράθυρο με video του δημιουργού του video
3. Δυνατότητα εγγραφής πλήρης οθόνης ή επιλεγμένου ορίου
4. Δυνατότητα αποθήκευσης video σαν .swf ή .mov
5. Δυνατότητα αποθήκευσης video
6. Δυνατότητα προσθήκης υποτίτλων
7. Δυνατότητα αφαίρεσης του ήχου, μετά το πέρας της εγγραφής
8. Δυνατότητα αφαίρεσης του συνοδευτικού video μετά το πέρας της εγγραφής
9. Δυνατότητα αλλαγής preview image για το video

Το Screen Toaster είναι ένα αξιόλογο website το οποίο μπορεί να αποτελέσει ένα σπουδαίο εργαλείο για τον ερασιτέχνη και τον επαγγελματία screencaster και αξίζει το δοκιμάσετε.

Ένα ενδιαφέρον και αρκετά υποσχόμενο δωρεάν online εργαλείο για να υπολογίζετε την «πραγματική» αξία ενός διαδικτυακού τόπου είναι το Stimator. Πληκτρολογήστε την ηλεκτρονική διεύθυνση που επιθυμείτε να αξιολογήσετε επενδυτικά και το Stimator θα αρχίσει να ελέγχει διάφορους παραμέτρους υπολογίζοντας την τελική αξία του website σε δολάρια. Η διαδικασία δεν έχει μεγάλη αναμονή αφού πραγματοποιείται σε real time (πραγματικό χρόνο), μέσα σε λίγα δευτερόλεπτα. Αξίζει να σημειωθεί πως ο τρόπος προβολής είναι εντυπωσιακός αφού η καταμέτρηση γίνεται με κινούμενη εναλλαγή αριθμών, οπτικά σαν counter.

Η αλήθεια είναι πως υπάρχουν αποκλίσεις στην έκδοση beta και τα αποτελέσματα δεν είναι ρεαλιστικά ειδικά σε localized websites, αλλά ευελπιστούμε πως στο μέλλον θα λειτουργεί καλύτερα με πιο σωστά αποτελέσματα. Τo Stimator όμως δεν παύει να είναι μια ενδιαφέρουσα εφαρμογή με το τρόπο που δουλεύει και το πώς προβάλλει τη διαδικασία υπολογισμού online. Αξίζει να του ρίξετε μια ματιά.

• Διαβάστε περισσότερα για το πως δουλεύει
• Επισκεφθείτε την ιστοσελίδα του Stimator

Όλοι γνωρίζουν το Firebug, το πιστό και καλό φίλο του σημερινού web designer/ developer. Έχει επισημανθεί στο WDB σε διάφορα άρθρα, η χρησιμότητα του, οι δυνατότητες που παρέχει και πόσο μπορεί να βοηθήσει τον σύγχρονο επαγγελματία να επιταχύνει την δουλεία του αναλύοντας και εξερευνώντας το διαδίκτυο.

Το μόνο μειονέκτημα σε εισαγωγικά βέβαια είναι πως λειτουργεί μόνο στο FireFox. Λάθος! Πλέον υπάρχει μια έκδοση, η λεγόμενη lite version η οποία μπορεί να χρησιμοποιηθεί σε οποιοδήποτε browser. Δυστυχώς υπάρχουν κάποιοι περιορισμοί στις επιλογές του και δεν είναι τόσο άνετο στη χρήση, αλλά εντέλει κάνει την δουλειά του

Υπάρχουν δύο τρόποι ενεργοποίησης:

1. Με χρήση bookmarklet
2. Περιλαμβάνοντας εξωτερικό js αρχείο.

Οδηγίες εγκατάστασης/ ενεργοποίηση

Με bookmarklet: σύρετε το κάτωθι σύνδεσμο στο toolbar του browser.

Firebug Lite

Με js αρχείο: προσθέστε το παρακάτω κώδικα στο πάνω μέρος του κώδικα

<script type=’text/javascript’
src=’http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’></script>

Εναλλακτική λύση που μπορείτε να χρησιμοποιήσετε επίσης είναι η εγκατάσταση IE Dev Toolbar, το οποίο είναι εξίσου καλό.

H έκδοση lite του Firebug υπάρχει διαθέσιμη εδώ και καιρό αλλά δεν έχει κυκλοφορήσει τόσο πολύ.

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

Το Web Design Blog σας παρουσιάζει τα πιο διαδεδομένα online Color schemes/ Palettes generators που μπορείτε να χρησιμοποιήσετε για να πετύχετε το τέλειο συνδυασμό χρωμάτων.

Not generators

Ένα πολύ έυχρηστο εργαλείο για τη δημιουργία συστημάτων πλοήγησης με τεχνολογία CSS είναι το IzzyMenu. Το IzzyMenu είναι μια WEB 2.0 εφαρμογή η οποία δίνει τη δυνατότητα στους εγγεγραμμένους χρήστες να δημιουργούν CSS Menus τα οποία έχουν επαγγελματική όψη.

Υπάρχει μια πληθώρα από WEB 2.0 στυλ από τα οποία μπορείτε να επιλέξετε όποιο εσείς θέλετε. Η βιβλιοθήκη με τα μενού ανανεώνεται συνεχώς από την ομάδα του IzzyMenu, δίνοντάς σας κάθε τόσο νέες επιλογές.

Επομένως, είτε είστε ένας έμπειρος Web Designer, είτε μόλις τώρα ξεκινάτε να ασχολείστε με τα CSS σίγουρα αξίζει τον κόπο να δείτε το IzzyMenu.

To Webdesignblog σας παρουσιάζει τους 10 καλύτερους Web Based RSS (Really Simple Syndication) Readers για να διαλέξετε:

1. Google Reader
   



2. Netvibes
   



3. Pageflakes
   



4. My Yahoo!
   



5. My Netscape
   



6. Rojo
   



7. Bloglines
   



8. NewsGator – The RSS Company
   



9. Welcome To MySyndicaat :: NewsMastering that Works!
   



10. Fwicki RSS Management
    

Με την χρήση όμορφων γραφικών μπορείτε να σχεδιάσετε websites τα οποία ξεχωρίζουν. Η εικαστική λεπτομέρεια δημιουργεί τις προϋποθέσεις ώστε η ιστοσελίδα σας να επιλεχθεί από τους υποψηφίους πελάτες σας και να γίνει πιο ανταγωνιστική. Σίγουρα μια επιτυχημένη ιστοσελίδα δεν οφείλεται μόνο στο ωραίο σχεδιαστικό (design) αλλά και σε άλλους σημαντικούς παράγοντες όπως εύχρηστο και λειτουργικό UID (User Interface Design).

Παρακάτω θα βρείτε ορισμένα χρήσιμα Web 2.0 online εργαλεία (generators) που μπορούν να σας βοηθήσουν να δώσετε στην ιστοσελίδας σας γραφιστική καλαισθησία και ξεχωριστό design.

Buttons (κουμπιά)

Δημιουργήστε πρωτότυπα και πολύχρωμα κουμπιά (buttons) για να εμπλουτίσετε την ιστοσελίδα σας.

• My Cool Button
• Buttonator
• ButtonGenerator

Backgrounds

Μέσα από μία πληθώρα επιλογών δημιουργήστε ένα ξεχωριστό φόντο στην ιστοσελίδας σας με την χρήση των νέων Web 2.0 trends όπως ρίγες, gradients, βούλες…

• Background Image Maker
• Stripe Designer
• Stripe Generator
• Tartan Maker

Favicon

Ενισχύστε την γραφιστική λεπτομέρεια στην ιστοσελίδα σας με τη χρήση Favicon.

• Favicon Generator
• Favicon.cc
• Favicon Editor

Gradients

Εκμεταλλευτείτε τα παρακάτω εργαλεία για να πειραματιστείτε και να δημιουργήσετε εύκολα και γρήγορα gradients (ντεγκραντέ)

• Gradient Maker
• Gradient Texture Generator
• Online Gradient Image Maker and Button Generator

Rounded Corners (Καμπυλωτές γωνίες)

Δημιουργήστε καμπυλωτές γωνίες με την χρήση CSS.

• RoundedCornr
• Cornershop

Logos (Λογότυπα)

Δημιουργήστε πρωτότυπα λογότυπα με την χρήση των παρακάτω online εργαλειών.

• Web 2.0 Logo Creator
• Logo Creator
• Logo Generator
• Web 2.0 Stylr

To Webdesignblog σας παρουσιάζει μία συλλογή από 9 Web Based Text Editors που μπορείτε να χρησιμοποιήσετε. Τα πιο διαδεδομένα είναι το FCKeditor και το TinyMCE αλλά εσείς μπορείτε να διαλέξετε όποιο ικανοποιεί τις ανάγκες σας για το εκάστοτε web project (διαδικτυακό έργο).

Για περισσότερες πληροφορίες για τα χαρακτηριστικά τους και πως λειτουργούν επισκεφτείτε τις παρακάτω ιστοσελίδες:

1. FCKeditor

2. TinyMCE

3. Damn Small Rich Text Editor

4. jWYSIWYG

5. NicEdit

6. Whizzywig

7. widgEditor

8. sLedit

9. Yahoo! UI Text Editor

Σε μελλοντικό άρθρο θα συγκρίνουμε το FCKeditor με το TinyMCE.

Υπάρχουν πολλά on line εργαλεία επεξεργασίας εικόνας. Μερικά από αυτά έχουν ομοιότητες μεταξύ τους, ενώ άλλα εκτελούν μοναδικές λειτουργίες.
Τα περισσότερα από τα εργαλεία που θα παρουσιαστούν στο σημερινό άρθρο, δεν περιορίζονται μόνο σε απλές λειτουργίες όπως resize (μεταβολή μεγέθους) και rotation (περιστροφή εικόνας). Μερικά από αυτά έχουν δυνατότητες που θα ζήλευαν ακόμα και desktop εφαρμογές.

Η παρακάτω λίστα αποτελείται από 27 διαφορετικές λύσεις. Δεν χρειάζεται να τις υιοθετήσετε όλες, ίσως 2-3 είναι αρκετές για να σας βοηθήσουν με τις καθημερινές σας εργασίες, αλλά αξίζει τον κόπο να τις εξετάσετε και να δείτε ποια ή ποιες από όλες ταιριάζουν περισσότερο με τις ανάγκες σας.

Adobe Photoshop Express

Ό,τι και να ειπωθεί για την προσφορά της Adobe στον χώρο των γραφικών σίγουρα δεν είναι ποτέ αρκετό. Η On Line έκδοση του Photoshop που δημοσίευσε προσφάτως είναι μια εφαρμογή πλούσια σε επιλογές και εργαλεία. Αξίζει τον κόπο να την δοκιμάσετε.

Picnik

Ενδιαφέρον εργαλείο με πολλά εφέ, καλλιτεχνικά και μη.

FotoFlexer

Εύχρηστο εργαλείο που σας δίνει την δυνατότητα να φορτώνετε φωτογραφικό υλικό απευθείας από τα on line photo album σας, όπως Flickr, MySpace, Picasa και Facebook.

Aviary

Ενδιαφέρουσα επιλογή που καλύπτει μια ευρεία γκάμα εργαλείων, τόσο για δημιουργία εικαστικών, επεξεργασία φωτογραφιών όσο και για 3D και video!

Splashup

Κάποτε ήταν γνωστό σαν Fauxto. Το SplashUp σας δίνει την δυνατότητα να φορτώνετε τις φωτογραφίες σας απευθείας από τα on line photo album σας και σας δίνει την δυνατότητα αποθήκευσης αρχείου. Το SplashUp παρέχει και δικό του file format.

72Photos

Δυνατότητες Crop (κοπής), Rotate (περιστροφής), Enchance (Βελτίωσης εικόνας) και προσθήκης εφέ. Όλες οι ενέργειες εφαρμόζονται με ένα κλικ.

Scrapblog

Συνδυάστε τις φωτογραφίες σας, τα video σας, την μουσική και τα κείμενά σας για να δημιουργήσετε εντυπωσιακά Multimedia Scrapbooks.

Pixelmator

Το Pixelmator υποστηρίζει πάνω από 100 διαφορετικούς τύπους αρχείων. Έτσι μπορείτε να ανοίξετε αρχεία όπως .psd, .tiff, .jpg, .png, .pdf, .eps και άλλα. Σε περίπτωση που θέλετε να σώσετε την δουλειά σας, μπορείτε να τη σώσετε σε οποιοδήποτε file format.

Sprout

Δημιουργήστε banner, videos, εικόνες, ημερολόγιο και πολλά άλλα!

Pixer.us

Προσφέρει βασικές λειτουργίες, όπως Resize (Προσαρμογή μεγέθους εικόνων), Crop (Κόψιμο φωτογραφιών), Rotate (Περιστροφή), φωτογραφικά φίλτρα και χρωματικές προσαρμογές.

Preloadr

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

FlauntR

Χιλιάδες φωτογραφικά εφέ! Εύκολο και γρήγορο στην χρήση.

Mixbook

Σας δίνει τη δυνατότητα να φορτώνετε τις φωτογραφίες σας απευθείας από τα on line photo album σας και παρέχει μεγάλη ευκολία στην δημιουργία φωτογραφικού βιβλίου.

rsizr

Ένα έξυπνο εργαλείο προσαρμογής μεγέθους φωτογραφιών.

SlideRocket

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

Snipshot

Δυνατότητα επεξεργασίας φωτογραφιών έως και 10MB. Παρέχει τις βασικές επιλογές επεξεργασίας εικόνων.

Pikifx

Αλλάξτε μέγεθος στις φωτογραφίες σας, προσθέστε εφέ, πλαίσια, κείμενα και άλλα.

Picture2Life

Επεξεργαστείτε και μοιραστείτε φωτογραφίες με τους φίλους σας.

Wiredness

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

Pic Resize

Δυνατότητες μαζικού Resize, μαζικού Crop, Blur και άλλων φωτογραφικών εφέ.

Pixenate

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

Pikipimp

Δυνατότητες προσθήκης διασκεδαστικών εφέ σε φωτογραφίες, όπως φούσκες διαλόγων, αστείων εφέ, κλπ.

LunaPic

Σχεδιαστικό on line εργαλείο που προσφέρει φωτογραφικά εφέ, animation και πολλά ακόμα.

Phixr

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

OnlinePhotoTool

Ένα On line εργαλείο που προσφέρει πλούσιες δυνατότητες επεξεργασίας φωτογραφίας και εικόνων, από προσαρμογές στο μέγεθος και προσθήκες πολλών εφέ, μέχρι και επεξεργασία curves και auto-curves.

Graphita

Διασκεδαστικό εργαλείο με δυνατότητες προσθήκης διασκεδαστικών εφέ με ιδιαίτερη ευκολία!

MyImager

Με περιορισμό τα 500KB, το MyImager, δίνει τη δυνατότητα προσαρμογής μεγέθους φωτογραφιών και προσθήκης εφέ.