GreekTuts » Internet

Google Font API, Font Directory

Pantso — Fri, 21 May 2010 09:57:52 +0000

H Google πρόσφατα ανακοίνωσε το νέο Font API και το νέο Font Directory. Τι σημαίνει αυτό για εμάς; Πολλά ! Όλα τα εργαλεία για να προσθέσουμε custom fonts στις ιστοσελίδες μας, είναι πλέον μερικά κλίκ μακριά.

Πως χρησιμοποιώ το Font Directory και το Font API;

To μόνο που έχουμε να κάνουμε είναι να συμπεριλάβουμε σαν stylesheet το font από το Google Directory στο της σελίδας μας. Δείτε το παράδειγμα παρακάτω






untitled




Hello World

Τι κερδίζουμε χρησιμοποιόντας το Font API;

Ελατωμένη χρήση bandwidth (το βάρος το επωμίζεται η Google)
Ταχύτητα λόγω Caching (ίδια fonts που χρησιμοποιούνται σε ιστοσελίδες, αποθηκεύονται στους browser μας)
Γενικότερη ταχύτητα (Το Google’s CDN είναι γρηγορότερο από κάθε ιστοσελίδα)

Μπορείτε να βρείτε περισσότερες οδηγίες και την λίστα με τα διαθέσιμα fonts εδώ

Μαθήματα ECDL

Pantso — Fri, 14 May 2010 06:35:31 +0000

ECDL

Το ECDL είναι ένα παγκοσμίως αναγνωρισμένο Πρόγραμμα Πιστοποίησης, το οποίο ακολουθεί τις ίδιες προδιαγραφές και μεθοδολογία σε ολόκληρο τον κόσμο και πιστοποιεί γνώσεις Πληροφορικής και δεξιότητες στη χρήση Υπολογιστή, σε εισαγωγικό, βασικό, προχωρημένο και επαγγελματικό επίπεδο. Το Πρόγραμμα ECDL καλύπτει 146 χώρες, μέσα από ένα δίκτυο 17.000 Εξεταστικών Κέντρων σε όλο τον κόσμο.

ECDL Core

Μέσα από την σειρά βοηθημάτων που ξεκινάει τον Ιούνιο, θα μάθουμε όλα όσα χρειαζόμαστε για να περάσουμε τις Core εξετάσεις του ECDL. Αναλυτικότερα θα μάθουμε τα εξής :

Βασικές Έννοιες Πληροφορικής και Επικοινωνιών (ΤΠΕ)

Χρήση Υπολογιστή και Διαχείριση Αρχείων

Επεξεργασία Κειμένου

Υπολογιστικά Φύλλα

Χρήση Βάσεων Δεδομένων

Παρουσιάσεις

Πλοήγηση στον Ιστό και Επικοινωνία

ECDL Expert

Επίσης, για όλους τους σύνδρομητές μας, μετά την ολοκλήρωση των παραπάνω τομέων, θα προσφέρονται βίντεομαθήματα με όλα όσα χρειαζόμαστε για το επόμενο επίπεδο του ECDL το Expert. Αναλυτικότερα θα μάθουμε τα εξής :

Σχεδιασμός μέσω Η/Υ (ECDL CAD),

Επεξεργασία εικόνας (ECDL ImageMaker)

Σχεδιασμός και διαχείριση ιστοσελίδων (ECDL WebStarter)

EDIT: Λυπούμαστε αλλά λόγο έλειψης προσωπικού, τα βοηθήματα για το ECDL θα ξεκινήσουν τον Σεπτέμβριο.

Περισσότερα λοιπόν τον Σεπτέμβριο

CSS3 και HTML Στοιχεία

Pantso — Wed, 03 Mar 2010 09:39:16 +0000

HTML

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





CSS3 και HTML Στοιχεία - GreekTuts









Name




E-mail




Website







 Male

 Female



I have a bike:



I have a car:



I have an airplane:

Aφού λοιπόν έχουμε έτοιμη την σελίδα μας ας δούμε τι μπορούμε να κάνουμε σε ότι αφορά την εμφάνιση της.

CSS & CSS3

Αν παρατηρήσουμε στην γραμμή 7 έχουμε συνδέσει ένα αρχείο css. Αυτό το αρχείο θα δημιουργήσουμε και θα το ονομάσουμε style.css

Μέσα λοιπόν θα αρχίσουμε να διαμορφώνουμε την φόρμα μας. Έτσι γράφουμε

body { padding:50px 100px; font:13px/150% Verdana, Tahoma, sans-serif; }

Αυτό είναι για να δώσουμε μια συγκεκριμένη θέση στην φόρμα μας. Συνεχίζουμε προσθέτοντας όλα τα στοιχεία της φόρμας μας.

input, textarea {
}

textarea {
}

input:hover, textarea:hover,
input:focus, textarea:focus {
}

.form label {

}

.submit input {
}

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

input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
}

textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}

.form label {
margin-left: 10px;
color: #999999;
}

.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}

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

input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

.form label {
margin-left: 10px;
color: #999999;
}

.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
}

Με μια προεπισκόπηση θα δούμε ότι η φόρμα μας έχει γίνει αγνώριστη. Να σημειώσουμε ότι η επιλογή -moz- μιλάει στον firefox. Η αντίστοιχη για όλους τους άλλους browsers είναι -webkit- για τον safari και χρειαζόμαστε εικόνα για τον IE. Η εικόνα που χρησιμοποιούμε είναι στην συγκεκριμένη περίπτωση αυτή

CSS3 Gradients

Αναλυτικά με τα gradients η εντολή που δίνουμε είναι η εξής.

div {

background-color: #1a82f7; /* fallback color */

background-image: url(images/linear_bg_2.png); /* fallback image */

background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

}

Ας δούμε ένα παράδειγμα. Δημιουργούμε ένα νέο html αρχείο και γράφουμε






CSS3 Gradiet













CSS3 Gradient

Linear background


#linearBg {
height: 100px;
background-color: #1a82f7; /* fallback color */
background-image: url(images/linear_bg_2.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

Η εικόνα που θα χρησιμοποιήσουμε είναι αυτή.

Κάντε μια επισκόπηση και θα δείτε ένα απίθανο gradient φτιαγμένο με CSS.

HTML5 : Χρήσιμες Ιστοσελίδες

Pantso — Tue, 15 Dec 2009 11:03:14 +0000

HTML5 and The Future of the Web

Get Ready for HTML 5

CSS code structure for HTML 5: some useful guidelines

HTML 5 Tutorial – A Simple Web Page Layout

HTML5: The Basics (1 of 4)

A Preview of HTML 5

Steve Smith on HTML5 and CSS3

HTML5 Doctor

The Future of HTML 5

5 Exciting Things to Look Forward to in HTML 5

Yes, You Can Use HTML 5 Today!

HTML 5 Pocket Book

HTML 5 PDF Cheat Sheet

HTML 5 Visual Cheat Sheet by Woork

HTML5 Draft Standard

Πηγή άρθρου Line25.com

Μενού με CSS και jQuery

Pantso — Mon, 23 Nov 2009 10:20:13 +0000

Θα υποθέσουμε ότι έχουμε ήδη το αρχείο index.html έτοιμο, και αν δεν το έχουμε θα το δημιουργήσουμε.

Στην αρχή θα χρειαστεί να δημιουργήσουμε το μενού μας. Έτσι ανάμεσα στα tags της ιστοσελίδας μας θα προσθέσουμε τον κώδικα



Κεντρικη
Σχετικα
Υπηρεσιες
Φωτογραφιες
Πελατες
Επικοινωνια

Επίσης πρέπει να δημιουργήσουμε την εικόνα που θα χρησιμοποιηθεί για το animation στο μενού μας. Δημιουργούμε λοιπόν μια εικόνα 1×80, Φροντίζουμε να καλύψουμε τα πρώτα 40 pixels με ένα χρώμα και τα άλλα 40 pixels με άλλο χρώμα. Κάτι σαν την εικόνα που ακολουθεί.

Πλέον έχουμε το μενού μας σε μορφή unordered list και την εικόνα για το μενού μας. Τώρα θα μορφοποιήσουμε λίγο την εμφάνιση και θα προσθέσουμε την εικόνα παρασκηνίου του μενού. Δημιουργούμε το αρχείο style.css στο οποίο γράφουμε τον παρακάτω κώδικα. Έχουμε προσθέσει και κάποια σχόλια για καλύτερη κατανόηση του κώδικα.

ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;  /*--Σημαντικό - Απόκρύπτει την εικόνα μας πρίν το hover--*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span { /*--Tα  και  έχουν τις ίδιες ιδιότητες--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 19px;
line-height: 20px; /*--Κάθετη διαμόρφωση του κειμένου--*/
}
ul#topnav a{ /*--Το hover state του μενού μας--*/
color: #555;
background-position: left bottom;
}
ul#topnav span{ /*--Η αρχική κατάσταση του μενού μας--*/
background-position: left top;
}

.container {
height:330px;
left:50%;
margin:-140px 0 0 -450px;
overflow:hidden;
position:absolute;
top:50%;
width:978px;
}

Θα συνδέσουμε το αρχείο του στυλ με την ιστοσελίδα μας πρεοσθέτωντας τον παρακάτω κώδικα στο κομμάτι της σελίδας μας

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

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

Αυτό ήταν. Δείτε το αποτέλεσμα κάνοντας κλίκ στο παρακάτω κουμπί
Τα αρχεία του βοηθήματος είναι διαθέσιμα σε όλους τους συνδρομητές του GreekTuts.

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Αντικατάσταση Κειμένου με SVG Fonts

Pantso — Fri, 13 Nov 2009 10:43:18 +0000

Σχετικά

To Cufón είναι κάτι αντίστοιχο του sIFR, αλλά σίγουρα πιό εύκολο στην χρήση και γρήγορο στην ενσωμάτωση. Κάποια βασικά στοιχεία :

Δεν χρειάζονται plug-ins
Συμβατότητα – λειτουργεί με όλους τους γνωστούς browsers
Εύκολο στην χρήση
Γρήγορο ακόμα και για μεγάλο αριθμό κειμένου

Πώς Λειτουργέι

Το Cufón χωρίζεται σε δύο μέρη. Τον font generator, που μετατρέπει τα fonts σε κατάλληλη μορφή, και την βιβλιοθήκη μετατροπής που είναι γραμμένη σε JavaScript.

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

Βημα 1

Πρώτα από όλα πρέπει να κατεβάσουμε την βιβλιοθήκη μετατροπής. Αυτό το κάνουμε αν επισκεφτούμε το http://cufon.shoqolate.com/js/cufon-yui.js και κάνουμε File>Save As. Έχουμε λοιπόν πλέον το αρχείο cufon-yui.js στον υπολογιστή μας.

Μετά ακολουθώντας τον σύνδεσμο http://cufon.shoqolate.com/generate/ βρισκόμαστε στον font generator όπου επιλέγουμε το font που θέλουμε να μας αντικαταστήσει το κείμενο της ιστοσελίδας μας. Μην τρομάξετε από τις πολλές επιλογές.

Εδώ, επιλέγουμε το font που θέλουμε, κάνοντας browse από τον υπολογιστή μας. Έχουμε την δυνατότητα να επιλέξουμε γραμματοσειρές σε Normal, Bold, Italic, Bold Italic. Επιλέγουμε επίσης το “The EULAs of these fonts allow Web Embedding”. Από τα glyphs επιλέγουμε All και απο το Performance & Filesize επιλέγουμε “No thanks, use the font’s own value”. Αποδεχόμαστε την άδεια χρήσης και πατάμε το “Let’s Do This”

Κατεβάζουμε το αρχείο μας και το αποθηκεύουμε. Έχουμε πλέον και το αρχείο του font μας.

Βημα 2

Το μόνο που έχουμε να κάνουμε τώρα είναι να ενσωματώσουμε τα αρχεία μας στην ιστοσελίδα μας. Αυτό το κάνουμε προσθέτοντας τον εξής κώδικα στο head μέρος της ιστοσελίδας μας.

Στο συγκεκριμένο βοήθημα χρησιμοποιήσαμε το font Calibri. Έτσι το αρχείο μας ονομάζεται Calibri_700.font.js.

Τέλος για να δούμε κάποια αλλαγή χρειάζεται να προσθέσουμε στο head κομμάτι της σελίδας μας

Έτσι πλέον όλα τα H1 tags στην ιστοσελίδα μας θα αντικατασταθούν από τα SVG(Scalable Vector Graphics) Fonts που επιλέξαμε. Μπορούμε να παρατηρήσουμε ότι αν γράψουμε Cufon.replace(‘p’); αντί για Cufon.replace(‘h1′); όλες οι παράγραφοι στην σελίδα μας θα αντικατασταθούν. Μπορούμε επίσης να συμπεριλάβουμε και πολλά στοιχεία μαζί γράφοντας για παράδειγμα

Τελικό Αποτέλεσμα

Πριν την αντικατάσταση

Μετά την αντικατάσταση

Hint/Tip

Για να μπορέσετε να επιλέξετε τα fonts που θέλετε στον generator, θα πρέπει να κάνετε copy τα fonts απο τον φάκελο Fonts που βρίσκεται στο C:\Windows\Fonts κάπου εκτός από αυτόν τον φάκελο, γιατί λόγο ασφάλειας, δεν επιτρέπεται η επιλογή fonts κατευθείαν από τον φάκελο Fonts.

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Πέντε μηχανές αναζήτησης για προγραμματιστές

KrAp — Sun, 01 Nov 2009 22:15:22 +0000

Μα νόμιζα ότι οι προγραμματιστές είναι hackers;

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

Γιατί «για προγραμματιστές»; Το Google δεν κάνει;

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

Πλέον έχει γίνει της μόδας ο «ανοικτός κώδικας», κώδικας δηλαδή που μπορεί να επαναχρησιμοποιηθεί από τον οποιονδήποτε αρκεί να υπάρξει η κατάλληλη αναφορά στον αρχικό δημιουργό.
Προφανώς μπορεί να χρησιμοποιείται, χωρίς αναφορά, κώδικας που εκτελεί απλές δουλειές (όπως το να ανοίξεις ένα αρχείο .txt και να διαβάσεις το περιεχόμενο του) και μπορεί να βρεθεί σε forums. Είναι τετριμμένες διαδικασίες τα δικαιώματα των οποίων δεν ενδιαφέρουν κανέναν.

Στις παραπάνω περιπτώσεις το Google βοηθάει αλλά οι προγραμματιστές, όντας άνθρωποι, είναι από τη φύση τους άπληστοι. Τους ενδιαφέρει να πάρουν έτοιμα, όσα περισσότερα μπορούν, δηλαδή μεγάλα κομμάτια του τελικού συστήματος (ή και το ίδιο το σύστημα αν είναι εφικτό) τα οποία μετά θα τροποποιήσουν κατάλληλα ώστε να καλύψουν τις ανάγκες του πελάτη.

Δύο κιλά κώδικα παρακαλώ…

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

1. Krugle

Το Krugle (το όνομα του οποίου μπορείτε να φανταστείτε ποιανού παράφραση αποτελεί) επιτρέπει στους χρήστες του να αναζητήσουν μεμονωμένα κομμάτια κώδικα αλλά και ολόκληρα projects. Επιπλέον προσφέρει αρκετές επιλογές παραμετροποίησης όπως γλώσσα προγραμματισμού, αδειοδότηση, κλπ. Ένα ενδιαφέρον στοιχείο είναι ότι ο χρήστης μπορεί να εκτελέσει αναζήτηση στα σχόλια του κώδικα ή ακόμη και στην τεκμηρίωση (π.χ. Javadoc) εφόσον φυσικά ο αποθηκευμένος κώδικας το υποστηρίζει.

Επισκεφθείτε το Krugle εδώ

2. Koders

Το Koders αποτελεί ουσιαστικά έναν κλώνο του Krugle. Θεωρείται από πολλούς το καλύτερο site στην κατηγορία του. Προσφέρει πάνω κάτω τα χαρακτηριστικά που παρουσιάσαμε στην προηγούμενη παράγραφο επικεντρώνοντας όμως σε πληροφορίες που ενδιαφέρουν μικρές επιχειρήσεις ανάπτυξης λογισμικού και γενικά ανθρώπους που ασχολούνται επαγγελματικά με την επαναχρησιμοποίηση κώδικα. Σημαντικό πλεονέκτημά του είναι ότι δίνει στον χρήστη τη δυνατότητα να εκτελέσει μια αναζήτηση επιλέγοντας συγκεκριμένη άδεια για τον κώδικα που αναζητεί (π.χ. GPL, BSD, AFL, και πολλές άλλες).

Επισκεφθείτε το Koders εδώ

3. Google code search

Το Google Code Search αποτελεί την προσέγγιση της Google στο θέμα της αναζήτησης κώδικα. Η υπηρεσία αποτελεί μέλος του Google Labs και προσφέρει στον χρήστη τη δυνατότητα να χρησιμοποιήσει την παλιά καλή γνωστή μηχανή αναζήτησης στοχευμένη όμως αυτήν τη φορά σε κώδικα. Προσφέρει πλειάδα δυνατοτήτων αναζήτησης.

Επισκεφθείτε το Google Code εδώ

4. Open Source Search Engine

Λίγο διαφορετική πρόταση από τις προηγούμενες, η Open Source Search Engine επιτρέπει στον χρήστη να βρει Projects Ανοικτού Κώδικα που μοιάζουν με αυτό που θέλει να κάνει ώστε να μπορέσει στη συνέχεια να χρησιμοποιήσει τον κώδικά τους για λογαριασμό του. Δεν ψάχνει σε επίπεδο κλάσεων ή πακέτων απλά επιστρέφει το γονικό site των σχετικών projects που βρέθηκαν.

Επισκεφθείτε το Open Source Search Engine εδώ

5. Snipplr

Τελευταίο (αλλά όχι καταϊδρωμένο) σας προτείνουμε το Snipplr, μια υπηρεσία που φιλοξενεί κομμάτια κώδικα, ποικίλων γλωσσών προγραμματισμού, τάξης μεγέθους κλάσεως, τα οποία μπορούν να χρησιμοποιηθούν αυτούσια για απλές διαδικασίες (π.χ. ανάκτηση αρχείου σε php).

Επισκεφθείτε το Snipplr εδώ

Ελπίζουμε οι προτάσεις μας να σας φανούν χρήσιμες και να κάνουν τη δουλειά σας (ή το χόμπι σας) σαν προγραμματιστές ακόμη πιο ενδιαφέρον και δημιουργικό. Μέχρι την επόμενή μας συνάντηση…

Να είστε καλά και να φροντίζεται τον εαυτό σας.

Τα Καλύτερα Websites Στο Ελληνικό Διαδίκτυο

Pantso — Thu, 22 Oct 2009 08:21:27 +0000

www.xblog.gr

Όπως λέει και ο τίτλος, το xblog.gr είναι το #1 Ελληνικό blog ποικίλης ύλης. Ξεκίνησε τη λειτουργία του το καλοκαίρι του 2005, και μέχρι σήμερα φέρνει στον αναγνώστη όλα τα τεκτενόμενα στην Ελληνική και μη πραγματικότητα. Πίσω από την προσπάθεια αυτή βρίσκεται ο Γιάννης Καρακατσάνης, ο οποίος ξεκίνησε το xblog.gr όταν κατάλαβε την δύναμη του νέου αυτού μέσου και την αμεσότητά του με τον κόσμο. Έτσι, έχοντας δημοσιογραφικό background, έγραφε για ό,τι τον απασχολούσε από μία διαφορετική ματιά, από τα «κακώς κείμενα» μέχρι posts για την ψυχαγωγία της νεολαίας και άλλα θέματα που τον ενδιέφεραν και πίστευε ότι ενδιαφέρουν το κοινό του… Και είχε δίκιο, όπως αποδείχθηκε από την αποδοχή των αναγνωστών του.

www.gameworld.gr

Το GameWorld είναι ένα απο τα καλύτερα Ελληνικά ενημερωτικά site για video games. Με τον όρο “video games” εννοούμε όλα τα παιχνίδια που κυκλοφορούνε σε PC, κονσόλες (Playstation 3, Xbox 360, Wii), φορητές κονσόλες (PSP, DS) και άλλου είδους πλατφόρμες (όπως για παράδειγμα τα παιχνίδια στα κινητά τηλέφωνα). Το site αυτό ενημερώνει τους αναγνώστες του για τα νέα games που κυκλοφόρησαν στην αγορά αλλά και για όσα θα κυκλοφορήσουν, ώστε να έχετε μια πρώτη εικόνα για το αν θα πρέπει να αγοράσετε και να παίξετε τα παιχνίδια αυτά.

www.semifind.gr

Το Semifind ξεκίνησε την λειτουργία του τον Σεπτέμβριο του 2009 με σκοπό την παρουσίαση και προώθηση Σεμιναρίων και προγραμμάτων E-Learning που προσφέρονται στην Ελληνική αγορά και να καταστεί συνώνυμο της εύρεσης αυτών.Υπεύθυνοι της προσπάθειας αυτής είναι ο Βαδάσης Άγγελος, Χημικός Μηχανικός απόφοιτος του Πολυτεχνείου Α.Π.Θ και ο Πατούχας Λάμπρος, Οικονομολόγος Msc. απόφοιτος του Α.Π.Θ. Στόχος αποτελεί ο ενδιαφερόμενος να μπορεί με τα προσφερόμενα εργαλεία αναζήτησης που του προσφέρουμε να εντοπίσει σε ελάχιστο χρόνο το σεμινάριο που επιθυμεί αντλώντας πολύτιμες πληροφορίες όπως: Τίτλος σεμιναρίου, χρόνος και τόπος διεξαγωγής, περιεχόμενο, κόστος κ.α. προβαίνοντας στη βέλτιστη επιλογή.

Έχετε να μας προτείνετε την προσωπικη ιστοσελίδα σας ή κάποια ιστοσελίδα που επισκέφτεστε πολύ συχνά; Επικοινωνήστε μαζί μας στο contact@greektuts.net.

Ακολουθώντας το 960 Grid System

Pantso — Mon, 19 Oct 2009 07:59:00 +0000

Η Πρώτη Επαφή

Το 960 Grid System είναι δημιούργημα του Nathan Smith και είναι μια προσπάθεια καθιέρωσης ενός standard για τον σχεδιασμό ιστοσελίδων, χρησιμοποιώντας συγκεκριμένες διαστάσεις, και πιο συγκεκριμένα, ιστοσελίδες με πλάτος 960pixels. Αυτό το νούμερο δεν είναι τυχαίο, αφού ο αριθμός 960 διαιρείται με τους αριθμούς 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480, και άρα μας κάνει την ζωή πιο εύκολη όταν έχουμε να κάνουμε με σχεδιασμό ιστοσελίδων.

Υπάρχουν τρία διαφορετικά layouts. Ένα που χρησιμοποιεί 12 στήλες, ένα που χρησιμοποιεί 16 αλλά και ένα που χρησιμοποιεί 24 στήλες. Παρακάτω θα δούμε και τις διαφορές, αλλά και το πώς μπορούμε να τα χρησιμοποιήσουμε μαζί.

Διαστάσεις

Το layout που είναι βασισμένο στις 12 στήλες είναι χωρισμένο σε κομμάτια με πλάτος 60pixels. Το layout που είναι βασισμένο στις 16 στήλες είναι χωρισμένο σε κομμάτια με πλάτος 40pixels. Και τα δύο αυτά templates, έχουν στήλες με margin10 pixels σε κάθε πλευρά, όπου δημιουργούν συνολικό κενό 20 pixels ανάμεσα στις στήλες. Τέλος το layout που είναι βασισμένο στις 24 στήλες είναι χωρισμένο σε κομμάτια με πλάτος 60pixels ενώ το margin σε κάθε πλευρά είναι 30 pixels. Το τελευταίο χρησιμοποιείται περισσότερο για ιστοσελίδες που στοχεύουν τους χρήστες που επισκέπτονται την σελίδα μέσω κινητών συσκευών. Για καλύτερη κατανόηση ας κοιτάξουμε τις διαφορές στο παρακάτω γράφημα. (Η εικόνα είναι αρκετά μεγάλη σε ύψος οπότε μην πανικοβληθείτε).

Τα Styles του 960 Grid System

Ας δούμε το .css αρχείο για το template με τις 12 και τις 16 στήλες, για να καταλάβουμε καλύτερα τις ιδιότητες που μας προσφέρει το 960 Grid System


.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}
.container_12 .grid_3,.container_16 .grid_4{width:220px}
.container_12 .grid_6,.container_16 .grid_8{width:460px}
.container_12 .grid_9,.container_16 .grid_12{width:700px}
.container_12 .grid_12,.container_16 .grid_16{width:940px}
.alpha{margin-left:0}
.omega{margin-right:0}
.container_12 .grid_1{width:60px}
.container_12 .grid_2{width:140px}
.container_12 .grid_4{width:300px}
.container_12 .grid_5{width:380px}
.container_12 .grid_7{width:540px}
.container_12 .grid_8{width:620px}
.container_12 .grid_10{width:780px}
.container_12 .grid_11{width:860px}
.container_16 .grid_1{width:40px}
.container_16 .grid_2{width:100px}
.container_16 .grid_3{width:160px}
.container_16 .grid_5{width:280px}
.container_16 .grid_6{width:340px}
.container_16 .grid_7{width:400px}
.container_16 .grid_9{width:520px}
.container_16 .grid_10{width:580px}
.container_16 .grid_11{width:640px}
.container_16 .grid_13{width:760px}
.container_16 .grid_14{width:820px}
.container_16 .grid_15{width:880px}
.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}
.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}
.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}
.container_12 .prefix_1{padding-left:80px}
.container_12 .prefix_2{padding-left:160px}
.container_12 .prefix_4{padding-left:320px}
.container_12 .prefix_5{padding-left:400px}
.container_12 .prefix_7{padding-left:560px}
.container_12 .prefix_8{padding-left:640px}
.container_12 .prefix_10{padding-left:800px}
.container_12 .prefix_11{padding-left:880px}
.container_16 .prefix_1{padding-left:60px}
.container_16 .prefix_2{padding-left:120px}
.container_16 .prefix_3{padding-left:180px}
.container_16 .prefix_5{padding-left:300px}
.container_16 .prefix_6{padding-left:360px}
.container_16 .prefix_7{padding-left:420px}
.container_16 .prefix_9{padding-left:540px}
.container_16 .prefix_10{padding-left:600px}
.container_16 .prefix_11{padding-left:660px}
.container_16 .prefix_13{padding-left:780px}
.container_16 .prefix_14{padding-left:840px}
.container_16 .prefix_15{padding-left:900px}
.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}
.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}
.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}
.container_12 .suffix_1{padding-right:80px}
.container_12 .suffix_2{padding-right:160px}
.container_12 .suffix_4{padding-right:320px}
.container_12 .suffix_5{padding-right:400px}
.container_12 .suffix_7{padding-right:560px}
.container_12 .suffix_8{padding-right:640px}
.container_12 .suffix_10{padding-right:800px}
.container_12 .suffix_11{padding-right:880px}
.container_16 .suffix_1{padding-right:60px}
.container_16 .suffix_2{padding-right:120px}
.container_16 .suffix_3{padding-right:180px}
.container_16 .suffix_5{padding-right:300px}
.container_16 .suffix_6{padding-right:360px}
.container_16 .suffix_7{padding-right:420px}
.container_16 .suffix_9{padding-right:540px}
.container_16 .suffix_10{padding-right:600px}
.container_16 .suffix_11{padding-right:660px}
.container_16 .suffix_13{padding-right:780px}
.container_16 .suffix_14{padding-right:840px}
.container_16 .suffix_15{padding-right:900px}
.container_12 .push_3,.container_16 .push_4{left:240px}
.container_12 .push_6,.container_16 .push_8{left:480px}
.container_12 .push_9,.container_16 .push_12{left:720px}
.container_12 .push_1{left:80px}
.container_12 .push_2{left:160px}
.container_12 .push_4{left:320px}
.container_12 .push_5{left:400px}
.container_12 .push_7{left:560px}
.container_12 .push_8{left:640px}
.container_12 .push_10{left:800px}
.container_12 .push_11{left:880px}
.container_16 .push_1{left:60px}
.container_16 .push_2{left:120px}
.container_16 .push_3{left:180px}
.container_16 .push_5{left:300px}
.container_16 .push_6{left:360px}
.container_16 .push_7{left:420px}
.container_16 .push_9{left:540px}
.container_16 .push_10{left:600px}
.container_16 .push_11{left:660px}
.container_16 .push_13{left:780px}
.container_16 .push_14{left:840px}
.container_16 .push_15{left:900px}
.container_12 .pull_3,.container_16 .pull_4{left:-240px}
.container_12 .pull_6,.container_16 .pull_8{left:-480px}
.container_12 .pull_9,.container_16 .pull_12{left:-720px}
.container_12 .pull_1{left:-80px}
.container_12 .pull_2{left:-160px}
.container_12 .pull_4{left:-320px}
.container_12 .pull_5{left:-400px}
.container_12 .pull_7{left:-560px}
.container_12 .pull_8{left:-640px}
.container_12 .pull_10{left:-800px}
.container_12 .pull_11{left:-880px}
.container_16 .pull_1{left:-60px}
.container_16 .pull_2{left:-120px}
.container_16 .pull_3{left:-180px}
.container_16 .pull_5{left:-300px}
.container_16 .pull_6{left:-360px}
.container_16 .pull_7{left:-420px}
.container_16 .pull_9{left:-540px}
.container_16 .pull_10{left:-600px}
.container_16 .pull_11{left:-660px}
.container_16 .pull_13{left:-780px}
.container_16 .pull_14{left:-840px}
.container_16 .pull_15{left:-900px}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix{height:1%}

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

Ας δούμε τώρα το πώς χρησιμοποιούμε τα styles του συστήματος.

Στο container ορίζουμε το πλήθος στηλών που θέλουμε να έχουμε. Συνήθως ονομάζουμε τις κλάσεις μας grid_XX,όπου ΧΧ είναι το πλάτος της στήλης. Όταν μια κλάση έχει και υποκλάση, τότε η πρώτη υποκλάση πρέπει να περιέχει το class name:alpha ενώ η τελευταία το class name:omega.

Σημαντικά Στοιχεία Για Το 960 Grid System

Το νέο αυτό πρότυπο, έχει ήδη καθιερωθεί σε πολλές από τις εταιρίες σχεδιασμού ιστοσελίδων, ενώ είναι το standard πλαίσιο σχεδιασμού του Drupal.

Θέλω Περισσότερα

Περισσότερες πληροφορίες αλλά και τα αρχεία του συστήματος των 960 pixels μπορείτε να βρείτε στο http://960.gs/

Επίλογος

Το 960 Grid System είναι πολύ χρήσιμο και σίγουρα θα βοηθήσει οποιονδήποτε σχεδιάζει, ή αναπτύσει ιστοσελίδες. Για αυτόν τον λόγο, σε μελλοντικό βοήθημα θα δημιουργήσουμε μια ιστοσελίδα απο το μηδέν, βασισμένοι στο σύστημα των 960 pixels.

Screenr : Γρήγορη Δημιουργία Screencast

Pantso — Tue, 13 Oct 2009 14:28:24 +0000

Μέσω του λογαριασμού σας στο twitter, μπορείτε να καταγράψετε το δικό σας screencast, μόνο με την χρήση του φυλλομετρητή σας. Αυτόματα το screenr κάνει twitt το βίντεο σας, ή μπορείτε να επιλέξετε να το κάνετε μόνοι σας.

Πλεονεκτήματα

Είναι browser based, πράγμα που σημαίνει ότι δεν χρειάζεστε κανένα άλλο πρόγραμμα εκτός του αγαπημένου σας φυλλομετρητή.
Είναι cross platform, πράγμα που σημαίνει ότι μπορείτε να δημιουργήσετε screencasts για Mac και για Windows.
Παίζει παντού, πράγμα που σημαίνει ότι μπορείτε να δείτε τις εγγραφές σας είτε απο το PC σας είτε απο το iPhone σας
Είναι εντελώς δωρεάν , πράγμα που σημαίνει οτι μπορείτε να καταγράψετε όσα video ή screencasts θέλετε χωρίς να πληρώσετε ούτε 1 cent.

Δημιουργήστε το screencast σας σε 4 απλά βήματα.

Βήμα 1

Κάντε login με τα στοιχεία λογαριασμού σας απο το twitter.

Βήμα 2

Πατήστε το κουμπάκι “Record your screencast now!”

Βήμα 3

Επιλέξτε την περιοχή μαγνητοσκόπησης, και πατήστε το “Rec” (το μικρό κόκκινο κουμπάκι στα αριστερά)

Βήμα 4

Μόλις τελειώσετε πατήστε το πράσσινο κουμπάκι “Done”, και κάντε τις επιλογές για το βιντεό σας. Έτοιμο το screencast !!!

Δείγμα Αποτελέσματος

Κάντε και εσείς τα δικά σας screencasts στο http://screenr.com/

Καλές εγγραφές