Δημιουργήστε sliding panel με social networks και mini portfolio + jQuery-Μέρος 1

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
13/06/2010 από
root

Καλησπέρα σας.Αλήθεια έχετε δει σε κάποια sites που στην κορυφή της σελίδας τους ή στο πλάι έχουν ένα κουμπί ή ένα εικονίδιο που μόλις το πατήσουμε εμφανίζεται ένα panel με διάφορες πληροφορίες;

Ε λοιπόν σε αυτό το premium βοήθημα θα δημιουργήσουμε ένα jQuery sliding panel το οποίο θα είναι κρυφό και εφόσον πατήσουμε σε ένα κουμπί θα εμφανίζεται.Όταν θα ξαναπατάμε το κουμπί θα εξαφανίζεται.Μέσα σε αυτό το panel θα τοποθετήσουμε περιεχόμενο το όπως το twitter του site μας ,τη fb σελίδα μας,φόρμα επικοινωνίας και επίσης θα τοποθετήσουμε και ένα mini portfolio.Αυτό το sliding panel θα είναι στην κορυφή της σελίδας μας και θα μπορούμε να το ανοιγοκλείνουμε.

To live demo υπάρχει στο τέλος του tutorial αυτού και μπορείτε να το βρείτε στα περιεχόμενα του tutorial.Το βάλαμε εκεί γιατί θέλουμε να μας ακολουθήσετε βήμα-βήμα και να το “δημιουργήσουμε” μαζί.Εάν πάντως είστε βιαστικοί μπορείτε να πάτε να το δείτε :-) .Στο πρώτο μέρος του tutorial αυτού θα φτιάξουμε τη δομή με html και css και στο δεύτερο θα φτιάξουμε τη λειτουργικότητα και ένα κομμάτι html-css λίγο ιδιαίτερο…. !!Αρκετά με τα εισαγωγικά.. Επειδή αυτό θα είναι μεγάλο tutorial οπλιστείτε με διάθεση και ξεκινάμε!!!

Πρώτες σκέψεις-Πρώτο σχέδιο

Λοιπόν κατ’αρχάς να δούμε λίγο τι ζητάμε.Θέλουμε ένα panel το οποίο θα περιέχει κάποιο περιεχόμενο και ακριβώς από κάτω του θα υπάρχει ένα κουμπί-μπορεί να είναι μία εικόνα- το οποίο θα το πατάμε και θα μπορούμε να το ανοίξουμε και να το κλείσουμε. Αυτά ουσιαστικά θέλουμε. Άρα λοιπόν ένα πρόχειρο σχέδιο θα μπορούσε να είναι το παρακάτω.

Όπως βλέπουμε έχει 2 περιοχές. Στη μία θα τοποθετήσουμε το περιεχόμενο μας και στην άλλη θα είναι το κουμπί που θα ελέγχουμε την εμφάνιση ή όχι του panel μας.

 

Δεύτερες σκέψεις-Αναλυτικό σχέδιο

Μάλιστα.Είδαμε παραπάνω πώς θα μοιάζει το sliding panel μας.Τι να τοποθετήσουμε μέσα όμως και πώς;Τι περιεχόμενο να χει; Ας κάνουμε μία δύο σκέψεις.Αυτό το panel θα βρίσκεται κλειστό στην κορυφή της σελίδας μας.Ο χρήστης το βλέπει και το πατάει.Τι θα θελε να δει?Θα μπορούσαμε να του δώσουμε κάποιες πληροφορίες για το site μας,θα μπορούσαμε επίσης να τοποθετήσουμε σημαντικές πληροφορίες όπως το rss feed μας,το twitter μας,το facebook μας,μία φόρμα επικοινωνίας..Επιπροσθέτως θα μπορούσαμε του δείξουμε και κάποια από τα έργα μας,σαν ένα μικρό portfolio.Και πώς μπορώ να το χωρέσω όλα αυτά εκεί; Μήπως να χρησιμοποιούσα κάποιο “κρυφό” χώρο μέσα στο πάνελ;;Ας τα βάλουμε όλα αυτά κάτω και ίσως να μπορούσαμε να σχεδιάσουμε ένα αναλυτικότερο σχέδιο από το προηγούμενο…

 

Τι θα χρειαστώ για την υλοποίηση και τελικό σχέδιο.

Αφού δημιούργησα το παραπάνω σχέδιο μπορώ να σκεφτώ και κάποια επιμέρους πράγματα.Για να φτιάξω το panel αυτό θα χρησιμοποιήσω html και css σίγουρα.Από κει και πέρα;;Είναι σίγουρο ότι θα χρειαστώ και jQuery διότι όπως είπαμε θα μπορώ να ανοιγοκλείνω το panel.Επίσης θα χρησιμοποιήσω jQuery στο σημείο 3 στην παραπάνω εικόνα όπου θα έχω το κρυφό χώρο,μία κρυμμένη div δηλαδή.Επιπροσθέτως θα χρησιμοποιήσω jQuery στο σημείο που θα έχω το portfolio.Όταν ο χρήστης πατάει πάνω σε μία φωτογραφία αυτή να ανοίγει με ιδιαίτερο τρόπο μέσα στο λεγόμενο “lightbox“.Αυτά γι αρχή.Ας δημιουργήσουμε πρώτα το sliding panel μας με html και CSS και εν συνεχεία του προσθέτουμε ότι λειτουργικότητα θέλουμε.Δείτε παρακάτω ένα τελικό σχέδιο που βοηθάει στην κατανόηση των βασικών divs και κλάσεων που θα χρησιμοποιήσουμε.

 

Τελικές σημειώσεις και ξεκίνημα της υλοποίησης.

Είμαστε έτοιμοι ουσιαστικά να αρχίσουμε.Θα ήθελα σε αυτό το σημείο να πω ότι το συγκεκριμένο tutorial θα μπορούσε να γίνει και με άλλους τρόπους.Απλά διαλέγουμε ένα και σας τον δείχνουμε με σκοπό να πειραματιστείτε και εσείς μετά.Επίσης θα χρησιμοποιήσουμε κάποια plugins της jQuery πχ για το “lightbox” και θα σας πούμε πώς τα ενσωματώνουμε στο site μας.Δεν θα μπούμε όμως σε περαιτέρω λεπτομέρειες, για παράδειγμα λεπτομερές configuration διότι θα χαθεί ο σκοπός του tutorial αυτού.Θα χρησιμοποιήσουμε και λίγο CSS3.Ας ξεκινήσουμε λοιπόν με τον html κώδικα αλλά και με CSS κώδικα για να δώσουμε από την αρχή το στυλ που θέλουμε.

 

Κώδικας html-CSS και εξηγήσεις.

Σε αυτό το κομμάτι θα κάνουμε το σκελετό του sliding panel και θα εφαρμόζουμε σιγά σιγά το css έτσι ώστε να δημιουργήσουμε την εμφάνιση που θέλουμε.Ας ξεκινήσουμε.Θα δημιουργήσουμε την div wrapper η οποία περικλείει τα πάντα.Μέσα σε αυτή θα τοποθετήσουμε τις εξής divs με:

1)id=”socializeContainer“:Αυτή η div ουσιαστικά περικλείει την περιοχή 1-περιεχόμενα panel- που είδαμε στην πρώτη φωτογραφία.

2.)id=”socializetitle“:Αυτή η div περιέχει τον τίτλο μας.

3.)id=”portfolioTitle“:Αυτή η div περιέχει τον τίτλο του portfolio μας.

Επίσης θα δημιουργήσουμε 4 divs για τα 4 social εικονίδια μας που θα έχουν μία κοινή κλάση όλα,αφού σε όλα θα εφαρμόζεται το ίδιο css στυλ.Η κοινή κλάση αυτή ονομάζεται “.socialIcons“.H κάθε μία div από αυτές θα έχει διαφορετικό id καθώς θα έχει διαφορετικό εικονίδιο σαν background.Tέλος θα δημιουργήσουμε 3 div με κοινή κλάση “.boxes” η οποία θα μας χρησιμεύσει στο να δώσουμε στυλ στις μικρογραφίες που θα έχουμε στο portfolio.Όσον αφορά την κρυφή div και την div με το κουμπί θα το κάνουμε λίγο αργότερα..
Ας δούμε λίγο κώδικα html και ένα στιγμιότυπο εφαρμόζοντας τα παραπάνω.

Δημιουργήστε ένα αρχείο html.Ονομάστε το “social.html”.Ανάμεσα στα body tags τοποθετούμε:

<!-- το wrapper περιλαμβάνει τα πάντα --><div id="wrapper">

<!--To container μας -->

<div id="socializeContainer">

<!--O titlos sto container --><div id="socializetitle">Socialize with us..Stay in touch!</div>

    <!--Ta eikonidia mas -->    Εδω μπαίνουν τα εικονίδια    <div class="socialIcons" id="rss" title="rssDiv"></div>

    <div class="socialIcons" id="facebook" title="facebookDiv"></div>    <div class="socialIcons" id="twitter" title="twitterDiv"></div>

    <div class="socialIcons" id="mail" title="mailDiv"></div>

    <!--O titlos sto portfolio -->        <div id="portfolioTitle">Mini-Folio! Take a look..</div>

   Εδώ μπαίνουν οι φωτό από το portfolio              <div class="boxes">Εδώ θα μπει η πρώτη μικρογραφία</div>              <div class="boxes">Εδώ θα μπει η δεύτερη μικρογραφία</div>              <div class="boxes">Εδώ θα μπει η τρίτη μικρογραφία</div>

<br />    </div></div>

Μερικές εξηγήσεις.

Βλέπετε πόσο απλός είναι ο κώδικας;Δεν κάναμε κάτι ιδιαίτερο.Το μόνο που κάναμε είναι να “μεταφράσουμε” αυτά που είπαμε παραπάνω.Στις γραμμές 13-16 βλέπετε τις 4 divs που έχουμε δημιουργήσει με σκοπό να τοποθετήσουμε ένα μικρό εικονίδιο μέσα σε αυτές.Όπως παρατηρείτε όλες έχουν μία κοινή κλάση,τη “.socialIcons” και 4 διαφορετικά ids(όλα τα html στοιχεία έχουν πάντα διαφορετικά ids).Επίσης στις γραμμές 21-23 παρατηρείτε τις τρεις div που δημιουργήσαμε και ουσιαστικά είναι οι div που θα μπουν οι μικρογραφίες.

Aς δούμε ένα στιγμιότυπο.

html without css

Όλα οκ!Ήρθε η ώρα να εφαρμόσουμε λίγο CSS ώστε να δείξει καλύτερα αυτό που φτιάξαμε.Δημιουργήστε ένα αρχείο css και ονομάστε το “styles.css”. Τοποθετήστε το μέσα στον ίδιο φάκελο που τοποθετήσατε το “social.html”. Ανάμεσα στα head tags της “social.html” τοποθετήστε το link

<link rel="stylesheet" href="styles.css"/>

Είμαστε έτοιμοι.Ξεκινάμε την εφαρμογή του CSS κώδικα.

 

Εφαρμογή CSS κώδικα

Εφαρμόζουμε στυλ στα παραπάνω,εξηγούμε και βλέπουμε ένα στιγμιότυπο.Σημαντική σημείωση!!Από τον παραπάνω κώδικα html αφαιρούμε τα “σχόλια” που έχουμε γράψει όπως για παράδειγμα στις γραμμές 16,24 κλπ: “Εδώ μπαίνουν τα εικονίδια”,”εδώ μπαίνει ο τίτλος” κλπ.

*{margin:0;padding:0;}

#wrapper {	width:264px;	margin: 0 auto;    top:0;    left:300px;    position:absolute;}

#socializeContainer{    height:auto;    z-index:200;    border:5px solid #585858;    overflow:hidden;    float:left;    width:254px;

}

#socializetitle{ width:100%; background-color: #E9E9E9; color: #3F3F3F; padding: 0; font-family:Kristen ITC; font-size:16px; text-align:center; border-bottom:3px solid gray; margin-bottom:2px;

}

.socialIcons{

    width:36px;    height:36px;    margin-top:5px;    margin-bottom:1px;    float:left;    margin-left:20px;    border:1px solid blue;}

#portfolioTitle{    margin-top:5px;    margin-bottom:3px;    width:100%;    font-family: Kristen ITC;    background: #E9E9E9;    color: #999999;    font-size:18px;    text-align: center;    float:left;}

Εξηγήσεις-Θα κάνουμε αρκετή ανάλυση στα πιο σημαντικά:

Γραμμή 1:Επειδή όλα τα html στοιχεία (πχ divs,paragraphs,images κλπ) έχουν προκαθορισμένα margins και paddings χρησιμοποιούμε το ‘*’ το οποίο ονομάζεται universal selector και αυτός “μηδενίζει” ουσιαστικά τα margins και τα paddings των στοιχείων.Με αυτό τον τρόπο κάνουμε reset στα margins και paddings των στοιχείων και εν συνεχεία μπορούμε να εφαρμόσουμε τα δικά μας paddings και margins.

Γραμμή 3:Εδώ δηλώνουμε κάποιους κανόνες CSS που θα εφαρμόσουμε στη wrapper div.Η wrapper div περιλαμβάνει και το panel και το κουμπί του.Με το “position:absolute;” δηλώνουμε ότι η τοποθέτηση του στοιχείου αυτού θα είναι “απόλυτη” δηλαδή θα την ορίσουμε εμείς χρησιμοποιώντας τις css properties “top”,”left”,”right” και “bottom”.Αυτός είναι και ο λόγος που τοποθετούμε την wrapper div top:0; και left:300px;.Δηλαδή θα απέχει 0px από την κορυφή της σελίδας και 300px από αριστερά.Εάν θέλετε να μάθετε περισσότερα για τo position:absolute δείτε εδώ.

Γραμμή 10:Εδώ ορίζουμε το CSS στυλ που θα εφαρμόσουμε στη div με id = “socializeContainer“.Είναι το container που περιέχει τα πάντα εκτός από το κουμπί του slider.Η ιδιότητα z-index:200 κάνει το εξής:Ορίζει ποιο html element είναι πάνω από ένα άλλο.Το html στοιχείο με το μεγαλύτερο z-index μπαίνει πάνω από τα υπόλοιπα.Αυτό το ορίζουμε εδώ γιατί θέλουμε όταν ανοίγει αυτό το panel να φαίνεται ότι βρίσκεται πάνω από οποιοδήποτε άλλο html στοιχείο της σελίδας.Για παράδειγμα από κάτω από το sliding panel μπορεί να υπάρχει μία div με navigation.Ρυθμίζοντας το z-index σε ένα αριθμό μεγάλο εξασφαλίζουμε ότι όταν ανοίξει το panel προς τα κάτω θα εμφανιστεί από πάνω από το navigation.Να το καλύπτει δηλαδή.
Σε αυτή τη div ρυθμίζουμε επίσης το border μας και το πλάτος της που είναι ουσιαστικά το πλάτος των περιεχομένων της.Το overflow:hidden δηλώνει πως εάν βάλουμε κάτι στη div “socializeContainer” το οποίο θα έχει μεγαλύτερο πλάτος από αυτή τότε ό,τι περισσεύει κόβεται.Το float-left:δηλώνει πώς η div αυτή είναι όσο πιο αριστερά γίνεται στο μέσα στο element που την περιέχει δηλαδή στο στη “wrapper div“.

Γραμμή 20:Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόσουμε στη div με id “socializetitle”.Είναι η div που θα περιέχει τον τίτλο μας και θα βρίσκεται πάνω – πάνω στo socializeContainer μας.Δεν υπάρχει κάτι σημαντικό να εξηγήσουμε εδώ.Το width: 100% μας δηλώνει ότι η div αυτή στο σημείο που βρίσκεται καταλαμβάνει το 100% του πλάτους του στοιχείου που την περιέχει-δηλαδή της div socializeContainer.

Γραμμή 33:Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόζονται σε όποιο στοιχείο έχει κλάση τη “.socialIcons“.Δηλώνουμε τα margins που θέλουμε , το float κλπ.Παρατηρείστε ότι δίνουμε ένα border:1px solid blue.Αυτό το κάνουμε διότι ναι μεν ορίζουμε την κλάση αλλά από την στιγμή που δεν έχουμε εικονίδια δεν θα δούμε κάτι εάν δούμε τη σελίδα μας σε ένα browser.Το border αυτό θα μας δείξει ουσιαστικά που θα βρίσκονται τα εικονίδια αυτά.Παρατηρήστε ότι ορίσαμε πλάτος και ύψος 32*32 pixels.Τέτοιο θα είναι το μέγεθος των εικονιδίων μας.

Γραμμή 44:Εδώ ορίζουμε το στυλ CSS που θα εφαρμόσουμε στη div η οποία θα περιέχει τον τίτλο που θα έχουμε στο mini portfolio μας.

Μετά από όλα αυτά ας δούμε ένα στιγμιότυπο
css structure

Τέλεια!Βλέπετε που θα τοποθετηθούν τα εικονίδια;;Λείπει κάτι όμως…..Κάτω από τον τίτλο του portfolio δεν υπάρχει μέρος που θα τοποθετηθούν οι μικρογραφίες μας.Θυμάστε που είπαμε ότι οι τρεις μικρογραφίες θα μπουν σε 3 divs που θα εφαρμόζεται σε αυτές μία κλάση -η “.boxes“.Ας τη φτιάξουμε λοιπόν τώρα!Στον παραπάνω css κώδικα προσθέστε

.boxes{    width:64px;    height:64px;    border:5px solid #dadada;    float:left;    margin-left: 5px;    margin-right: 5px;    margin-bottom:5px;    margin-top:6px;}

Εδώ προσθέσαμε και την κλάση “boxes”.Για να δούμε τώρα πως μοιάζει η εφαρμογή μας.

css structure

Τέλεια…Μήπως να κάνουμε και το socializeContainer μας να έχει στρογγυλεμένες άκρες; Θα το κάνουμε με CSS3!Προσθέστε μέσα στο CSS που καθορίζει την εμφάνιση της socializeContainer div τις εξής εντολές:

 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

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

css3 applied
Νομίζω ότι μία χαρά πάμε.Για να προσθέσουμε και εικονίδια τώρα και να δούμε πως θα μοιάζει τελικά.

 

Προσθήκη των εικονιδίων και μικρογραφιών στο sliding panel μας.

Τα εικονίδια που θα χρησιμοποιήσουμε τα κατεβάσαμε από τη σελίδα 108 high resolution dark social media icons.Στην συνέχεια διαλέξαμε ποια θέλαμε και τα επεξεργαστήκαμε για να έχουμε μέγεθος 32*32px.Κατεβάστε τα και εσείς.Τα τοποθετούμε σε ένα φάκελο με το όνομα “img” και ξεκινάμε….

Αυτά είναι τα εικονίδια που θα μπουν στα divs με class=”socialicons” και ανάλογα με το id της κάθε μίας div από αυτές θα τοποθετήσουμε το ανάλογο εικονίδιο σαν background.Στο αρχείο μας css προσθέτουμε τις εξής γραμμές αφού πρώτα διαγράψουμε το border που υπάρχει στη class “socialIcons”.Δεν το θέλουμε πλέον.

#rss{

    background:url(img/rss_small.png);}

#facebook{

    background:url(img/facebook_small.png);    }

#twitter{

    background:url(img/twitter_small.png);}

#mail{

    background:url(img/mail_small.png);}

Για να δούμε τώρα :

panel with social icons

Τέλεια…Ας τοποθετήσουμε και τις μικρογραφίες των φωτογραφιών.Εδώ θα λειτουργήσουμε ως εξής:Θα δημιουργήσουμε 6 εικόνες.Οι τρεις από αυτές θα είναι σε μέγεθος 64*64 (βλέπε class “boxes”).Οι άλλες τρεις θα έχουν ότι μέγεθος θέλουμε.Ουσιαστικά θα έχουμε 3 μικρογραφίες και 3 αντίστοιχες φωτογραφίες κανονικού μεγέθους.Όταν πατάμε σε μία μικρογραφία θα ανοίγει η αντίστοιχη “μεγάλη” φωτογραφία.Θα κάνουμε τις μικρογραφίες “links”, να πατιούνται δηλαδή.Αυτό το κάνουμε γιατί στο δεύτερο μέρος θα χρησιμοποιήσουμε και ένα jQuery plugin ,το lightbox που μιλήσαμε στην αρχή.
Στον html κώδικα που έχουμε θα κάνουμε το εξής:Θα προσθέσουμε σε κάθε μία div με class “boxes” μία μικρογραφία κάνοντας την link.Άρα στο σημείο εκείνος ο κώδικας html θα γίνει

<!--Prwto image sto portfolio apo aristera -->      <div class="boxes">

      <a href="img/large1.png" title="Tutorial created by akisplace.com"><img src="img/mini1.png"/></a>

      </div>

     <!--Deytero image sto portfolio apo aristera -->     <div class="boxes">

      <a href="img/large2.png" title="Tutorial created by akisplace.com"><img src="img/mini2.png"/></a>

      </div>

      <!--Trito image sto portfolio apo aristera -->      <div class="boxes">

      <a href="img/large3.png" title="Tutorial created by akisplace.com"><img src="img/mini3.png"/></a>

      </div>

Για να δούμε τώρα τη σελίδα μας….
css panel with thumbnails

Ποίο τέλεια δεν γίνεται …Να προσθέσουμε τώρα και το κουμπί του panel;;

 

Προσθήκη κουμπιού sliding panel

Το κουμπί αυτό θα είναι ένα image ουσιαστικά το οποίο θα τοποθετηθεί αμέσως μετά το κλείσιμο της socialContainer div και πριν το κλείσιμο της wrapper div..Η εικόνα αυτή θα βρίσκεται μέσα σε μία div με class = “handler”.Στον html κώδικα προσθέστε την εξής γραμμή στο σημείο που είπαμε παραπάνω..

<div class="handler"><img src="img/socialh2.png"/></div>

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

.handler{float:left;margin-left:30px;}

Με αυτό το CSS κώδικα κάνουμε τη φωτογραφία μας να πάει όσο πιο αριστερά γίνεται και εν συνεχεία της δίνουμε 30px περιθώριο από αριστερά σε σχέση με το wrapper.Αποτέλεσμα;Aς δούμε λίγο τη σελίδα μας τώρα…

css panel with thumbnails and sliding button

 

Επίλογος πρώτου μέρους και live demo..

Δείτε ένα live demo σχετικά με αυτό που θα φτιάξουμε στα δύο μέρη του tutorial αυτού!
Το πρώτο μέρος έφτασε στο τέλος του….Ήταν λίγο κουραστικό αλλά άξιζε τον κόπο.Στο επόμενο μέρος θα δούμε τη δημιουργία της κρυφής περιοχής καθώς και τη λειτουργικότητα της “εφαρμογής”¨με χρήση jQuery.Επίσης θα μπορέσετε να κατεβάσετε τα αρχεία που χρησιμοποιήθηκαν καθώς και τις πηγές μας.Σας ευχαριστούμε πολύ!! :-) :-)

Πηγή: akisplace.com








Hide ↑

extend your possibilities!! xtnd.it

Follow Web Design Forum on Twitter ,

Οδηγός επιβίωσης WordPress για αρχάριους

25 October 2012

                    Ξεκινήσετε το wordpress blog σας μέσα σε λίγα λεπτά!

Read more...

Διαγωνισμός: 5 πακέτα Web Hosting από την StigmaHost

16 October 2012

Με ενθουσιασμό σας ανακοινώνουμε ότι η StigmaHost σας προσφέρει την ευκαιρία[…]

Read more...

Ελληνική Σειρά Εκμάθησης JavaScript (Video Tutorials)

21 September 2012

Η Σειρά περιλαμβάνει τα εξής Μαθήματα:

JavaScript – 1 : Λίγα[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

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

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.