Jump to content
NiKR

Τι είναι ένα CSS Framework; Αναλυτικο Tutorial

Recommended Posts

NiKR

Τι είναι ένα framework;

Καταρχάς πρέπει να δούμε τι είναι ένα framework..Framework θα μπορούσαμε να πούμε ότι είναι ένας «σκελετός» για κάτι.Για παράδειγμα μπορούμε να αναφέρουμε το εξής:Έστω ότι κάποιος θέλει να δημιουργήσει με κώδικα C# (κώδικας που χρησιμοποιείται από την ASP.NET) μία εφαρμογή (application) για το ίντερνετ.Αυτό μπορεί να το κάνει γράφοντας κώδικα από την αρχή μέχρι το τέλος της εφαρμογής.Αυτό όμως έχει κάποια μειονεκτήματα.Είναι χρονοβόρο και επίσης όταν κάποιος δημιουργεί μία εφαρμογή φροντίζει ώστε ο κώδικας να είναι έτσι γραμμένος ώστε να μπορεί ένας άλλος προγραμματιστής να τον πάρει να τον αλλάξει να τον επεκτείνει χωρίς σημαντικές αλλαγές στο πρόγραμμα.Άρα λοιπόν ,ειδικά σε μεγαλύτερες εφαρμογές,οι προγραμματιστές χρησιμοποιούν κάποιο framework ,κάποιο σκελετό δηλαδή πάνω στον οποίο θα χτίσουν την εφαρμογή.Έτσι και πιο γρήγορα δημιουργούν την εφαρμογή και πιο ουσιαστικά και πιο ευέλικτα..(Θα μπορούσαμε να πούμε πολλά για τα applications και ποιες αρχές πρέπει να υπηρετούν αλλά αυτό θα γίνει σε άλλο άρθρο.)

Τι είναι ένα CSS framework;

Ένα CSS framework είναι ένας σκελετός που χρησιμοποιούμε και μας παρέχει συγκεκριμένους κανόνες για να γράφουμε CSS κώδικα.Κοινώς μπορούμε να χρησιμοποιήσουμε ένα τέτοιο framework σε μία ιστοσελίδα και να γράψουμε CSS ώστε να της δώσουμε στυλ και να της ρυθμίσουμε την εμφάνιση..Η μεγάλη διαφορά του απλού CSS κώδικα και του κώδικα που γράφουμε με τη χρήση ενός framework είναι ότι εάν χρησιμοποιήσουμε κάποιο framework υπάρχουν εντολές CSS οι οποίες εάν τις γράφαμε σε ένα απλό αρχείο CSS δεν θα έκαναν καμία διαφορά..Τα CSS frameworks λοιπόν είναι σχεδιασμένα έτσι ώστε με λιγότερο κώδικα να μπορούμε να έχουμε το ίδιο και καλύτερο αποτέλεσμα από ότι θα είχαμε με απλό CSS κώδικα..Επίσης ένα CSS framework έχει ένα τεράστιο πλεονέκτημα. Έχει αυτό που λέμε «cross browser compatibility».Δηλαδή αυτό που φτιάχνουμε εμφανίζεται ίδιο και στο IE και στον mozilla και στον Chrome κλπ.Αυτό είναι πολύ σημαντικό διότι οι browsers μεταξύ τους έχουν κάποιες διαφορές στον τρόπο που διαβάζουν και εμφανίζουν τα CSS.Και πρέπει πάντα να βλέπουμε αν υπάρχουν bugs και να τα διορθώνουμε ενώ συνήθως με ένα css framework δεν χρειάζεται να γίνεται αυτό..!

Τι χρειάζεται να ξέρω για να χρησιμοποιήσω ένα τέτοιο framework.Πώς το χρησιμοποιώ..;

Αυτή η ερώτηση θα μπορούσε να απαντηθεί μονολεκτικά.Η απάντηση είναι «CSS»..!Πρέπει να γνωρίζει κάποιος σχετικά καλά CSS ώστε να δημιουργήσει κάτι πολύπλοκο..Αλλά και μέτρια να γνωρίζει μπορεί να δημιουργήσει μία δομή ενός site μέσα σε λίγη ώρα!Η χρήση ενός css framework είναι συνήθως πολύ απλή.Δηλαδή κατεβάζουμε από το αντίστοιχο site το framework,το ενσωματώνουμε στο head της σελίδας μας και εν συνεχεία γράφουμε κώδικα-εντολές ανάλογα με το framework που χρησιμοποιούμε.Είναι λογικό όλα τα παραπάνω να σας φαίνονται δύσκολα και περίεργα.Στο επόμενο άρθρο θα χρησιμοποιήσουμε ένα framework και θα κατασκευάσουμε βήμα – βήμα μία απλή δομή ενός site..Ας δούμε 2 πολύ καλά CSS frameworks τώρα.

CSS frameworks

Υπάρχουν αρκετά CSS Frameworks στο ίντερνετ.Εμείς θα αναφερθούμε μόνο στα 2-3 καλύτερα.Το «καλύτερο» είναι βέβαια σχετικό..!

  • 960 Grid System CSS framework.Αυτό το CSS framework είναι από τα πιο γνωστά.Αυτό το framework ορίζει ένα «πλέγμα»-grid πάνω στο οποίο χτίζουμε την ιστοσελίδα μας.Αυτό το grid αποτελείται είτε από 12 είτε από 16 στήλες με αντίστοιχο πλάτος 60 και 40 px η κάθε μία στήλη..Οπότε κάθε html στοιχείο που δημιουργούμε πάνω στο grid έχει πλάτος υποπολλαπλάσιο του 960.
  • Blueprint CSS framework.Αυτό το framework είναι που θα χρησιμοποιήσουμε εμείς tutorial για να φτιάξουμε τη δομή της ιστοσελίδας μας.Αυτό το framework μας παρέχει πάρα πολλές ευκολίες και μπορούμε πολύ γρήγορα να δημιουργήσουμε μία δομή.Παρέχει και plugins για δημιουργία κουμπιών και ελέγχει και την εμφάνιση της γραμματοσειράς,της φόρμας επικοινωνίας κλπ/

 

Λίγα λόγια για το blueprint CSS framework.

Το συγκεκριμένο framework θα το βρείτε στη διεύθυνση http://blueprintcss.org.Ας δούμε λίγο την σελίδα αυτή.
Διαβάζουμε λοιπόν ότι αυτό το css framework μπορεί να μας παρέχει ένα πλέγμα-grid που ουσιαστικά εξυπηρετεί τη δημιουργία ακόμα και περίπλοκων design.Επίσης μας παρέχεται έτοιμο το λεγόμενο “CSS RESET” που ουσιαστικά κάνει reset στα διάφορα margins και paddings που έχουν τα html στοιχεία από μόνα τους.Αυτό είναι πάρα πολύ σημαντικό.Ο πιο απλός κανόνας που θα μπορούσαμε να γράψουμε ώστε να κάνουμε reset στα παραπάνω είναι o εξής:

*{
margin:0;
padding:0;
}

 

To reset CSS αρχείο που περιέχει το blueprint css framework είναι πολύ πιο εξειδικευμένο και πιάνει τα πάντα.

Διαβάζουμε επίσης ότι μας παρέχει κανόνες για typography,κοινώς για τις γραμματοσειρές και επίσης μας παρέχει έτοιμα css φορμών επικοινωνίας καθώς και ειδικά css σε περίπτωση που θέλει κάποιος να εκτυπώσει τη σελίδα μας….Κοινώς το συγκεκριμένο CSS framework μας παρέχει τα πάντα…Ας ξεκινήσουμε το πρακτικό μέρος και ας κατεβάσουμε το blueprint css

Κατεβάζοντας και εφαρμόζοντας το blueprint css framework.

To πρώτο πράγμα που θα κάνουμε είναι να κατεβάσουμε το CSS FRAMEWORK.Κατεβάστε το zip αρχείο που υπάρχει στη σελίδα που σας είπαμε παραπάνω.

Κατεβάστε το blueprintcss framework

Πατήστε πάνω στο “zip”.Αποθηκεύστε το αρχείο στο desktop σας και στην συνέχεια αποσυμπιέστε το στο desktop επίσης..Αυτό που θα πρέπει να βλέπετε στο desktop είναι ένας φάκελος όπως στην παρακάτω εικόνα.

blueprintcss στο desktop μας

blueprintcss στο desktop μας

Πριν κάνουμε οτιδήποτε με τον φάκελο αυτό ας επιστρέψουμε λίγο στη ιστοσελίδα του blueprint css.Στη δεξιά πλευρά βλέπουμε τα εξής links.

  • Ας τα δούμε λοιπόν ένα-ένα

     

  • Live Demos—>Στη συγκεκριμένη σελίδα υπάρχουν κάποια demos σχετικά με το blueprint css ,με την εφαρμογή του,με το grid κλπ.Επίσης μας δίνει links για να δούμε πώς θα είναι οι φόρμες μας με την εφαρμογή του blueprint css framework.
  • Blueprint WIKI—>Εδώ υπάρχει το ζουμί.Υπάρχει ένα απλό tutorial καθώς και άρθρα σχετικά με το framework αυτό.Επίσης υπάρχουν εργαλεία ,plugins ,η άδεια χρήσης κλπ.Αυτή την ενότητα θα την δούμε σε λίγο.
  • Bug Tracker—>Εδώ μπορείτε να δηλώσετε αν βρήκατε κάποιο λάθος στο framework αυτό και να δείτε και απαντήσεις σε άλλα bugs που τυχόν υπάρχουν!
  • Discussion Group—>Εδώ είναι το support.Η υποστήριξη.Μπορείτε να ρωτήσετε κάτι και οι άλλοι χρήστες μπορούν να απαντήσουν στην ερώτησή σας.

Αυτά είναι λίγο πολύ όλα όσα πρέπει να γνωρίζετε…Ας συνεχίσουμε..

Σχετικά με το grid που υπάρχει στο blueprint css.

Το βασικό ζήτημα είναι να κατανοήσουμε τι είναι “grid”.Αυτό μπορεί να γίνει ως εξής.Πατήστε στο link Live Demos και θα δείτε ότι μπροστά σας εμφανίζονται κάποια Links.Πατήστε στο link “Grid”..Θα δείτε ότι ανοίγει μία test σελίδα στην οποία υπάρχει ένα φόντο με μπλε γραμμές κάθετες και ανάμεσα σε αυτές λεπτές γραμμές λευκές. Αυτό είναι και το grid.

Απλή επεξήγηση στο grid

Διαβάζοντας λίγο το αρχείο “grid.css” που υπάρχει στα δεξιά του link “grid” που προαναφέραμε,βλέπουμε πάνω πάνω την εξής δήλωση:Το grid συνολικά έχει συνολικό μήκος 950px.Αποτελείται από 24 στήλες πλάτους 30px έκαστη οι οποίες έχουν μεταξύ τους 10px απόσταση.Εάν κάνουμε την αριθμητική πράξη βλέπουμε ότι :24*30=720px + 23*10=230px.Αν τα προσθέσουμε όντως έχουμε 950px.(Προφανώς οι λευκές στήλες είναι όσες και οι μπλε μείον μία αφού βρίσκονται ανάμεσα γι αυτό και πολλαπλασιάζουμε επί 23 τις λευκές.. ).Άρα λοιπόν κάθε τι που δημιουργούμε πάνω στο grid θα είναι θα είναι συγκεκριμένου μεγέθους και θα έχει σχέση με το grid αυτό καθεαυτό. Ότι δημιουργούμε στο grid θα είναι υποπολλαπλάσιο του 960px. Και με την βοήθεια του grid όλα μπαίνουν σε σωστή σειρά στην ιστοσελίδα μας.

ΑΡΑ ΤΟ GRID ΕΙΝΑΙ ΕΝΑΣ “ΜΠΟΥΣΟΥΛΑΣ” ΠΟΥ ΧΡΗΣΙΜΟΠΟΙΟΥΜΕ ΓΙΑ ΝΑ ΚΑΤΑΣΚΕΥΑΣΟΥΜΕ ΣΩΣΤΑ ΤΑ HTML ΣΤΟΙΧΕΙΑ ΜΑΣ ΚΑΙ ΝΑ ΤΑ ΤΟΠΟΘΕΤΗΣΟΥΜΕ ΣΩΣΤΑ…

Εφαρμογή του blueprint CSS στην ιστοσελίδα μας…

Αφού είδαμε λίγο το “grid” τώρα πλέον μπορούμε να κάνουμε μία εφαρμογή ,να δημιουργήσουμε μία ιστοσελίδα από το μηδέν η οποία θα περιέχει αυτό το framework.Για να το κάνουμε αυτό πρέπει να πάμε στην αρχική σελίδα,να πατήσουμε το link το οποίο έχει τίτλο Blueprint WIKI και αφού ανοίξει η σελίδα να πατήσουμε πάνω στο link “Tutorials” και εν συνέχεια στη νέα σελίδα που θα ανοίξει στο link “Quick Start Tutorial”..Εδώ είμαστε…Από κάτω από το “quick start tutorial” υπάρχουν και άλλα tutorials που αξίζει να διαβαστούν.Το πρώτο πράγμα που βλέπουμε είναι για την εγκατάσταση.Επειδή αυτό μπορεί να σας μπερδέψει ακολουθήστε ένα-ένα τα βήματα που σας προτείνω.

Blueprint file

  • Βήμα πρώτο:Δημιουργήστε ένα φάκελο στο desktop τον οποίο ονομάστε “theBlueprintSite”.
  • Βήμα δεύτερο:Ανοίξτε τον αγαπημένο σας html editor και δημιουργήστε ένα καινούργιο html αρχείο.Ονομάστε το “mysite.html”.Τοποθετήστε το αρχείο αυτό μέσα στο φάκελο “theBlueprintSite”.
  • Βήμα τρίτο:Στον παραπάνω φάκελο δημιουργήστε μέσα του ένα νέο φάκελο και ονομάστε τον “css”.Εκεί μέσα θα τοποθετήσετε αργότερα και το css της σελίδας σας αλλά και το blueprint css framework-κάποια αρχεία, θα το δούμε παρακάτω.
  • Βήμα τέταρτο:Ανοίξτε με διπλό κλικ τον φάκελο του blueprint css που αποσυμπιέσατε στην αρχή του tutorial αυτού.Κάντε ένα-δύο διπλά κλικ μέχρι να βρεθείτε στην παρακάτω εικόνα.
  • Τον βλέπετε τον φάκελο με το όνομα “blueprint”;Αντιγράψτε τον έτσι όπως είναι και τοποθετήστε τον μέσα στο φάκελο “css” που δημιουργήσαμε στο βήμα τρία!!!
  • Βήμα πέμπτο:Με τη βοήθεια του αγαπημένου σας html editor δημιουργήστε ένα αρχείο css-ονομάστε τον “styles.css” και τοποθετήστε το μέσα στο φάκελο «css» που αναφέραμε ποιο πάνω.Άρα ο φάκελος «css» που βρίσκεται μέσα στο φάκελο «theBlueprintSite» περιέχει τα εξής:
    css folder περιεχομενα

Εφαρμογή του CSS framework στη σελίδα μας.

Αφού κάναμε όλα τα παραπάνω,τώρα είμαστε έτοιμοι να εφαρμόσουμε το CSS framework στη σελίδα μας.Στη σελίδα με την εγκατάσταση βλέπουμε ποια αρχεία πρέπει να καλέσουμε στη σελίδα μας και μάλιστα στο head.Εμείς μετά τη δημιουργία και των παραπάνω φακέλων,θα κάνουμε δύο βήματα.

  • Βήμα πρώτο:Ανοίγουμε το αρχείο “mysite.html” στον editor της επιλογής μας.
  • Βήμα δεύτερο:Στο head της σελίδας μας γράφουμε τον παρακάτω κώδικα.
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"/>
    <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"/>
    <link rel="stylesheet" href="css/styles.css" type="text/css"/>

Απλές επεξηγήσεις:
Γραμμή 1:Είναι το css αρχείο που εφαρμόζεται στην ιστοσελίδα μας.
Γραμμή 2:Είναι το css αρχείο που χρησιμοποιείται όταν κάνουμε εκτύπωση τη σελίδα μας.
Γραμμή 3:Είναι το css αρχείο που διορθώνει τα bugs του internet explorer.
Γραμμή 4:Είναι το δικό μας css αρχείο.Εδώ θα χρησιμοποιήσουμε τις ειδικές εντολές οι οποίες ορίζονται μέσα στο αρχείο που καλούμε στη γραμμή 1.
Βασικά το framework το καλούμε στη γραμμή 1+2+3.Από κει και πέρα στη γραμμή 4 θα γράψουμε CSS κώδικα ο οποίος θα στηριχτεί σε ειδικές εντολές που ορίζονται μέσα στο framework και λίγες από αυτές βρίσκονται και στη σελίδα με το tutorial που είδαμε παραπάνω.

Ας δούμε τα πιο βασικά του blueprint CSS framework..

Στο web development υπάρχει μία div την οποία τη χρησιμοποιούμε για να τοποθετήσουμε μέσα σε αυτή την ιστοσελίδα.Την ονομάζαμε “wrapper” συνήθως. Εδώ,επειδή στα css αρχεία που φορτώσαμε στο head υπάρχει το grid,ορίζεται δηλαδή, γράφουμε το εξής ανάμεσα στα body tags της σελίδας:

<div class="container">
	Εδώ μέσα πλέον κατασκευάζω τη σελίδα μου.Η class="container" ουσιαστικά ορίζει το grid μας!!!Εάν δεν την γράψουμε τότε έχουμε πρόβλημα,διότι όλα παίζουν πάνω σε αυτό το Grid!!!!
</div>

Κάποιες βασικές εντολές CSS…

Για τη χρήση του framework αυτού έχουν οριστεί κάποιες συγκεκριμένες κλάσεις.Δηλαδή ας δούμε λίγο μέσα στην ιστοσελίδα

<div class="span-24 last">
//Εδώ δημιουργούμε μία div η οποία έχει πλάτος 24 μπλε στήλες!!!Εάν δείτε το grid και μετρήσετε 24 μπλε στήλες θα διαπιστώσετε ότι μιλάμε για όλο το GRID άρα 950px!!Οπότε αυτή η η div έχει πλάτος 950px.Η κλάση last δηλώνει ότι μετά αυτή την div δεν ακολουθεί άλλη ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ!!!!!
</div>

Η βασική φόρμουλα για να μην μπερδεύεστε με το πλάτος κάθε html στοιχείου είναι η εξής:

(Αριθμός span*40)-10.Δηλαδή παραπάνω έχουμε 24*40=960px από το οποίο αν αφαιρεθεί το 10px κάνει 950px που είναι το σύνολο του grid!Τόσο απλά..! Kάτι σημαντικό!!Σε κάθε γραμμή της σελίδας πρέπει να φροντίσουμε ώστε τα html στοιχεία που υπάρχουν ,εάν προσθέσουμε τα πλάτη τους να μας δίνουν 950px.Επίσης στο τελευταίο στοιχείο κάθε γραμμής πρέπει και οφείλουμε να τοποθετούμε και την κλάση “last” σε περίπτωση που το άθροισμα των πλατών δεν είναι 950px. Θα είναι το καλύτερο.

Κατασκευάζοντας τη σελίδα μας

Ανοίξτε τη σελίδα “mysite.html” στον αγαπημένο σας html editor καθώς και το αρχείο “styles.css”..
Ας κάνουμε το πρώτο βήμα!Ορίζουμε τη div με την κλάση “container”..Για να δούμε το βασικότερο κομμάτι κώδικα

<!--Αρχή grid-->
<div class="container">
<!--Εδώ μέσα θα κατασκευάσω τη σελίδα μου!-->
</div>
<!--Τέλος grid--

To CSS για την κλάση “container” δεν θα το γράψουμε γιατί ορίζεται από το framework και τα αρχεία που καλέσαμε!
Το επόμενο βήμα είναι να δημιουργήσουμε μία div με κλάση “clear” -αυτό κάνουμε για να “καθαρίσουμε” τα διάφορα floats που μπορεί να έχουν τα html στοιχεία που θα δημιουργήσουμε.Αυτό συνήθως το τοποθετούμε ακριβώς πριν το κλείσιμο του “container”..Στον παραπάνω κώδικα προσθέτουμε την κλάση ως εξής:

<!--Αρχή grid-->
<div class="container">
 
<!--Εδώ μέσα θα κατασκευάσω τη σελίδα μου!-->
<!--Eδώ είναι η div με την κλαση "clear"-->
<div class="clear"></div>
</div>
<!--Τέλος grid-->

 

 
 To css για την div με την κλάση “clear” είναι το εξής:

.clear{
    clear:both;
}

 

Προσοχή!!!Την κλάση αυτή τη τοποθετώ για λόγους προληπτικούς διότι τις περισσότερες φορές έχω floats html στοιχείων .Μετά από τα παραπάνω είμαστε έτοιμοι να δημιουργήσουμε header,navigation,content και footer!!

 

Δημιουργία header.

Θα δημιουργήσουμε ένα απλό header.Θα έχει πλάτος όσο το grid μας δηλαδή 950px.Και θα του δώσουμε ένα id ώστε να του πειράξουμε την εμφάνιση και όχι μόνο στο «styles.css».Μέσα στο div με class «container» γράφουμε:

<!-- HEADER-->
 
<div class="span24" id="header">
 <h1>Αυτό είναι το header μας!!</h1>
</div>
 
<!-- ΤΕΛΟΣ HEADER-->

το «styles.css» προσθέτουμε τον παρακάτω κώδικα:

#header{
    background-color:navy;/*Το χρώμα της div-το ναυτικό μπλε.*/
    height:100px;/*ύψος της div*/
    border-bottom:5px solid #00006A;/*5px border στο κάτω μέρος της div*/
    text-align:center;/*Ότι κείμενο γράφεται έχει τοποθετήσει στο κέντρο της header div!*/
   
}
#header h1{
     color:#ffffff;/*Χρώμα γραμματοσειράς επικεφαλίδας.*/
     line-height:100px; /* Με αυτό η επικεφαλίδα μας πάει στο μέσο ύψος της header div.*/
     font-family:'Trebuchet MS';
     font-size:48px;
}

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

To header της ιστοσελίδας μας

To header της ιστοσελίδας μας

 

Δημιουργία navigation menu.

Αφού τελειώσαμε το header ας φτιάξουμε ακριβώς από κάτω ένα navigation menu.Ένα navigation menu όπως γνωρίζετε είναι μία λίστα από links.Στον κώδικα της σελίδας μας, γράφουμε :

<!--Navigation-->
<ul class="span24 last" id="menu">
	<li><a href="#">Αρχική</a></li>
	<li><a href="#">Σχετικά..</a></li>
	<li><a href="#">To portfolio</a></li>
	<li><a href="#">Επικοινωνήστε</a></li>
	<li><a href="#">Αναζήτηση στο site μας..</a></li>
</ul>
<!--Τέλος navigation-->

To αντίστοιχο CSS θα είναι :

/*ΤΟ ΜΕΝΟΥ ΜΑΣ*/
#menu {
overflow:hidden;
padding: 5px 0 5px 0;
background:blue;
}

#menu li  {
float:left;
display: block;
line-height: 40px;
margin:0 5px 0 5px;
color:#fff;
}

#menu li a{
padding: 17px;	
color:#fff;
text-decoration: none;
}

/*Τα Links μας όταν κάνουμε hover*/
#menu li a:hover {
color: #ffffff; background: #9a9a9a;
}

 

Ας δούμε ένα στιγμιότυπο:
Το css μενού μας.

Δημιουργία mainContent div και 2 sidebar.

Ένα βασικό μέλημα μας είναι ότι πρέπει όλα τα html στοιχεία σε μία γραμμή να είναι σε μήκος 24 στήλες του grid…Άρα μπορώ να κάνω το εξής:Η δεξιά και η αριστερή sidebar να είναι 4 στήλες η κάθε μία και το κεντρικό περιεχόμενο να είναι 16 κοινώς 4+16+4=24 στήλες που είναι το grid για το οποίο μιλούσαμε.Ας ξεκινήσω με την αριστερή sidebar.

Η αριστερή sidebar.

O html κώδικας που θα χρησιμοποιήσουμε είναι ο εξής:

<!--αριστερή sidebar -->
<div class="span-4" id="leftSidebar">
Αριστερή sidebar..
</div>

Αυτός θα είναι ο κώδικας.Όπως βλέπουμε στη div αυτή δίνουμε την κλάση “span-4″ που δηλώνει 4 στήλες του grid δηλαδή 150px(βλέπε παραπάνω για επεξήγηση).Επίσης σε αυτή τη div δίνουμε ένα id,ώστε να μπορέσουμε μέσω των CSS να ελέγξουμε την εμφάνιση της.Ας δούμε λίγο το CSS που θα χρησιμοποιήσουμε για την div αυτή.

/*CSS για την αριστερή sidebar*/
 
#leftSidebar{
margin-top:5px;/*περιθώριο από πάνω,από τη navigation bar */
background: #E5E5E5; /*Το χρώμα του φόντου της sidebar*/
height:300px;/*Το ύψος της sidebar*/
overflow:hidden;/*Με αυτή την εντολή αν τοποθετήσουμε μέσα στη sidebar περιεχόμενο που θα είναι μεγαλύτερο από το μέγεθος της τότε το κόβει στα 300px..*/
}

Κεντρικό περιεχόμενο και δεξιά sidebar..

Ο κώδικας για το κεντρικό περιεχόμενο και τη δεξιά sidebar θα είναι πολύ απλός και θα είναι ο εξής:

<!--Βασικό περιεχόμενο-->
<div class="span-16" id="mainContent">
Βασικό περιεχόμενο!!!!
</div>  
 
<!--Δεξιά Sidebar -->
<div class="span-4 last" id="rightSidebar">
Δεξιά sidebar..
</div>
</p>

Στη συνέχεια θα γράψουμε το CSS για τα δύο αυτά html στοιχεία τα οποία έχουν ids «mainContent» το κυρίως περιεχόμενο και «rightSidebar» η δεξιά sidebar.Ας δούμε τον CSS κώδικα..

/*CSS για mainContent*/
#mainContent{
margin-top:5px;
margin-bottom:5px;/*Αυτό το περιθώριο θα είναι από οποιοδήποτε html στοιχείο υπάρχει από κάτω από το mainContent--κοινώς τα τρία κουτιά που θα φτιάξουμε μετά..*/
background: #C3C3C3;
height:300px;
overflow:hidden;
}

/*CSS για την αριστερή sidebar*/

#rightSidebar{
margin-top:5px;
background: #E5E5E5;
height:300px;
overflow:hidden;
}

 

Ας δούμε ένα στιγμιότυπο του site μας.
Το site μας σχεδόν έτοιμο.

Μερικά γρήγορα συμπεράσματα

Μετά τις παραπάνω απλές αλλά σημαντικές εξηγήσεις μπορούμε να συνεχίσουμε με τη δημιουργία των τριών κουτιών και του footer.

  • Το πρώτο πράγμα που θέλουμε να τονίσουμε είναι ότι όπως βλέπετε και ιδίοις όμμασι στη δεξιά sidebar η οποία είναι η τελευταία στη γραμμή έχουμε τοποθετήσει και την κλάση “last”.Αυτό είναι πολύ σημαντικό να το κάνουμε…!
    Βλέπουμε ότι μεταξύ των divs υπάρχει ένα κενό.Αυτό το κενό δημιουργείται λόγω του grid.Εάν δείτε το grid στην ιστοσελίδα του blueprint CSS framework θα διαπιστώσετε ότι μεταξύ των στηλών υπάρχουν 10px κενά..Άρα όταν τελειώνει το ένα html στοιχείο μετά ακολουθεί κενό 10px.
  • Παρατηρείστε το εξής και σκεφτείτε:Θα μπορούσαμε αντί για χρώμα φόντου να βάλουμε border γύρω από κάθε div.Εδώ όμως υπάρχει το εξής θέμα..To border προσθέτει pixels στο στοιχείο το οποίο το προσθέτουμε.Αν το κάνουμε υπάρχει πιθανότητα να σπάσουμε το grid και η δεξιά sidebar να πέσει από κάτω.Στην περίπτωσή μας που η γραμμή με τα τρία html στοιχεία είναι 24 στήλες ,δηλαδή 950px εάν βάλουμε 1px border για να περικυκλώσουμε την αριστερή div τότε η δεξιά sidebar θα πέσει από κάτω ..Αυτό διότι το συνολικό πλάτος των divs μαζί με τα κενά θα είναι 952px(αφού στην αριστερή sidebar το border θα προσθέσει 1px από δεξιά και 1px από αριστερά..) ενώ το grid έχει πλάτος 950px.Η λύση σε αυτές τις περιπτώσεις είναι κάπως πιο περίπλοκη και έχει να κάνει αποκλειστικά με την διαφοροποίηση του κώδικα css ώστε να μπορέσουμε να το φέρουμε εκεί που θέλουμε..

 

Δημιουργία των τριών κουτιών και footer με το blueprint CSS framework…

Με τον ίδιο τρόπο όπως και παραπάνω θα κάνουμε τα τρία κουτιά και εν συνεχεία το footer…Ας δούμε τον κώδικα για τα τρία κουτιά ο οποίος μοιάζει εκπληκτικά με τα προηγούμενα.

<!--Τρια κουτιά..-->
<div class="span-8" id="leftUnder">
Αριστερό κάτω κουτί..

</div>
<div class="span-8" id="middleUnder">
Μεσαίο κάτω κουτί..

</div>
<div class="span-8 last" id="rightUnder">
Δεξί κάτω κουτί..

</div>

 

Ας δούμε και το αντίστοιχο CSS.

/*CSS για leftUnder κουτί*/
#leftUnder{
background: #FED0CF;
height:100px;
overflow:hidden;

}

/*CSS για middleUnder κουτί*/
#middleUnder{
background: #FFE0C1;
height:100px;
overflow:hidden;

}

/*CSS για rightUnder κουτί*/
#rightUnder{
background: #FF7979;
height:100px;
overflow:hidden;

}

 

Είμαστε σχεδόν έτοιμοι. Ας προσθέσουμε και ένα footer

Δημιουργία footer.

<!--Footer-->
<div class="span-24" id="footer">
To footer μας!!!
</div>

Ας δούμε και το CSS μας:

/*CSS για footer*/
#footer{
    height:20px;
    background: #AEFFAE;
    margin-top:5px;
    overflow:hidden;
}

Ας δούμε ένα τελικό στιγμιότυπο:
Το site μας με το blueprint CSS

Share this post


Link to post
Share on other sites

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

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

Δημιουργία λογαριασμού

Κάντε μια δωρεάν εγγραφή στην κοινότητά μας. Η εγγραφές μας είναι εύκολες.!

Εγγραφή τώρα

Σύνδεση

Εάν έχετε ήδη λογαριασμό σε αυτό το Forum; Συνδεθείτε εδώ.

Συνδεθείτε τώρα

  • Μηνύματα

    • Anastasis
      You may have heard of a signal jammer before, usually referring to a device that blasts out a strong enough radio signal to drown out the reception of nearby devices like cell phones. Purpose-built jammer hardware is outright illegal in many countries, but Wi-Fi is vulnerable to several different jamming attacks that can be done with Kali Linux and a wireless network adapter. Traditional signal jamming has been a cat and mouse game of detecting and disabling signals an opponent is using to communicate. Cutting off a target's ability to communicate leaves them isolated and vulnerable, making jamming these signals a top priority in modern day electronic warfare. Countries today have developed capabilities to jam and spoof cell phones, GPS, Wi-Fi, and even satellite links. Different Types of Jamming There are two main types of jammers: elementary and advanced. Here, we'll be discussing elementary Wi-Fi jamming, focusing on unencrypted management frames. Elementary jammers can be broken into two main types: proactive and reactive. The first type, a proactive jammer, is one that continuously functions whether there is traffic on a network or not. We'll be using MDK3 as a deceptive jammer, which injects normal-seeming packets that have a malicious effect on the network. Image by Justin Meyers/Null Byte Jammers used in electronic warfare typically require equipment that overwhelms the signal of the target with radio energy, making it impossible to distinguish between the signal and the noise being introduced to the channel the target is using to communicate. This kind of jamming is popular because it works, but it also requires specialized equipment that is banned or heavily regulated in most countries. Another type of jamming attempts to send messages that force the target to be disconnected from the network they are connected to, rather than drowning out a target's signal by trying to overwhelm it. You might think this kind of attack might only work if you are connected to the network, but this is where WPA has a severe flaw. Because so-called management frames are not encrypted, it is possible to send disruptive messages from outside the network which causes people inside the network to be unable to connect. Deauthentication Packets The most common way this sort of attack is done is with deauthentication packets. These are a type of "management" frame responsible for disconnecting a device from an access point. Forging these packets is the key to hacking many Wi-Fi networks, as you can forcibly disconnect any client from the network at any time. The ease of which this can be done is somewhat frightening and is often done as part of gathering a WPA handshake for cracking. Aside from momentarily using this disconnection to harvest a handshake to crack, you can also just let those deauths keep coming, which has the effect of peppering the client with deauth packets seemingly from the network they are connected to. Because these frames aren't encrypted, many programs take advantage of management frames by forging them and sending them to either one or all devices on a network. Don't Miss: Disable Security Cams on Any Wireless Network with Aireplay-ng Programs like Aireplay-ng rely on deauthentication packets to execute denial of service attacks, and this kind of tactic is often a part of the first WPA brute-forcing a hacker will learn. Spamming a target with deauth packets is simple but effective, often producing near-immediate action on the mark. But many who use Aireplay-ng may not know that there is another kind of management frame that can be abused to take out clients on a WPA network. Dissasociation Packets Disassociation packets are another type of management frame that is used to disconnect a node (meaning any device like a laptop or cell phone) from a nearby access point. The difference between deauthentication and disassociation frames is primarily the way they are used. An AP looking to disconnect a rogue device would send a deauthentication packet to inform the device it has been disconnected from the network, whereas a disassociation packet is used to disconnect any nodes when the AP is powering down, rebooting, or leaving the area. Different networks may be equipped with different countermeasures, so deauthentication itself may not work. In fact, WPA3 protects against this attack, as do some types of WPA2. According to the Wi-Fi Alliance website: Because of this, deauthentication and disassociation attacks are just one of many which may be employed against a Wi-Fi network. While there are more advanced jamming attacks based on interrupting CTS (clear to send) or data packets, we'll save those attacks for another guide. For now, we'll start using a mix of deauthentication and disassociation to increase our chances of persistently taking out a network. MDK3 vs. Aireplay-ng To understand Aireplay-ng vs MDK3 as jamming tools, we should take a look at the help file for each tool. For Aireplay-ng, we see the following relevant information. Aireplay-ng 1.2 rc4 - (C) 2006-2015 Thomas d'Otreppe http://www.aircrack-ng.org usage: aireplay-ng <options> <replay interface> Filter options: -b bssid : MAC address, Access Point -d dmac : MAC address, Destination -s smac : MAC address, Source -m len : minimum packet length -n len : maximum packet length -u type : frame control, type field -v subt : frame control, subtype field -t tods : frame control, To DS bit -f fromds : frame control, From DS bit -w iswep : frame control, WEP bit -D : disable AP detection Attack modes (numbers can still be used): --deauth count : deauthenticate 1 or all stations (-0) --fakeauth delay : fake authentication with AP (-1) --interactive : interactive frame selection (-2) --arpreplay : standard ARP-request replay (-3) --chopchop : decrypt/chopchop WEP packet (-4) --fragment : generates valid keystream (-5) --caffe-latte : query a client for new IVs (-6) --cfrag : fragments against a client (-7) --migmode : attacks WPA migration mode (-8) --test : tests injection and quality (-9) --help : Displays this usage screen While the tools included are interesting, only --deauth is helpful in jamming a Wi-Fi connection. Based on these filter settings, we can use Aireplay-ng to attack specific nodes on specific APs. We can do so with a command like below. aireplay-ng -0 0 -a f2:9f:c2:34:55:69 -c a4:14:37:44:1f:ac wlan0mon This command uses the wlan0 interface in monitor mode to send an unlimited stream of deauths to the client at MAC address a4:14:37:44:1f:ac which is connected to the access point with a MAC address of f2:9f:c2:34:55:69. This attack is surgical and usually starts working immediately, but can fail or not be very effective on some networks. MDK3, by comparison, has less surgical filters listen in its help file. MDK 3.0 v6 - "Yeah, well, whatever" MDK is a proof-of-concept tool to exploit common IEEE 802.11 protocol weaknesses. MDK USAGE: mdk3 <interface> <test_mode> [test_options] TEST MODES: b - Beacon Flood Mode Sends beacon frames to show fake APs at clients. This can sometimes crash network scanners and even drivers! a - Authentication DoS mode Sends authentication frames to all APs found in range. Too many clients freeze or reset some APs. p - Basic probing and ESSID Bruteforce mode Probes AP and check for an answer, useful for checking if SSID has been correctly decloaked or if AP is in your adaptors sending range SSID Bruteforcing is also possible with this test mode. d - Deauthentication / Disassociation Amok Mode Kicks everybody found from AP m - Michael shutdown exploitation (TKIP) Cancels all traffic continuously x - 802.1X tests w - WIDS/WIPS Confusion Confuse/Abuse Intrusion Detection and Prevention Systems f - MAC filter bruteforce mode This test uses a list of known client MAC Adresses and tries to authenticate them to the given AP while dynamically changing its response timeout for best performance. It currently works only on APs who deny an open authentication request properly g - WPA Downgrade test deauthenticates Stations and APs sending WPA encrypted packets. With this test you can check if the sysadmin will try setting his network to WEP or disable encryption. With MDK3, we see a few attractive options. Option g will attempt to force a network administrator to disable or downgrade encryption by targeting any connection sending WPA encrypted packets with deauthentication attacks. Option b attempts a beacon flood attack, randomly creating fake APs in the area, and option a attempts to jam a network by sending too many authentication frames. Neither of these attacks works for jamming the network, so instead, the most useful attack is option d. The Deauthentication / Disassociation Amok Mode attack by default kicks everyone off of any nearby network, but with some filters, we can get it to behave more surgically. What You'll Need To get started, you'll need a fully updated copy of Kali Linux and a Kali-compatible wireless network adapter. If you need help choosing one, you can check out our guide below. To update your copy of Kali Linux, connect to the internet, open a terminal window, and run the commands below. apt update apt upgrade Step 1Install MDK3 Kali includes MDK3 by default, but if you don't have it installed, you can do so by typing the following. apt install mdk3 Once this is installed, you can type mdk3 --help to see the main options. Step 2Jam an Area Taking a look at the filter options for MDK3, we can type mdk3 --help d to get the help information for the deauthentication module specifically. Here we can see that it is different from the options for Aireplay-ng. Instead, we have the following options to craft our attack. -w flag for MAC addresses to ignore, or whitelist. -b flag for MAC addresses to attack, or blacklist. -s flag for the speed (packets per second) of the attack. -c flag for the channel to run the attack on. Based on these options, we'll need to, at the very minimum, have one piece of information to start jamming anything. First, we'll need to put our network adapter into monitor mode and supply the name of the adapter in monitor mode to the program so it can execute. To find this, we can type either ifconfig or the newer ip a in a terminal window to find the name of the network adapter. It should be something like "wlan0" or "wlan1." When you have the name of the device, you can put it into monitor mode with the following airmon-ng command, where wlan0 is the name of your network card. sudo airmon-ng start wlan0 Once you've done so, type ifconfig or ip a again to get the new name of the device. You can expect it to be something like "wlan0mon." When you have this information, you can run the script to deauthenticate everything nearby. This is noisy, not as effective as target jamming, and may require one card to work persistently. In my tests, one network card attacking everything nearby caused few noticeable disruptions, whereas three network cards attacking everything nearby caused noticeably annoying disconnections from the network. To execute the attack, type the following in a terminal window, with wlan0mon as the name of your adapter in monitor mode. mdk3 wlan0mon d Because this attack has to hop channels, it is likely to miss some APs and it may not be very fast. It's also very disruptive, as it can disconnect anything in range regardless of whether you have permission or if it's relevant to what you're doing. Step 3Jam a Channel A better option for jamming an area is to jam a channel. To know what channel to jam, we can use another tool called Airodump-ng to discover what channel our target is on. With our card in monitor mode as wlan0mon, we can type the following command to see information about all nearby wireless networks. airodump-ng wlan0mon This will display all nearby access points, along with information about them. Here we can see which channel the access point we are targeting is on, which will limit our effect to a single channel rather than marauding around attacking anything that moves. Once we know the channel the AP is on, we can press Ctrl-C to cancel the scan, and type the following into a terminal window, with the channel we're attacking being channel 6. mdk3 wlan0mon -c 6 Jamming a channel is very effective, but affects all APs and all devices operating on that channel. This can still be too noisy, so we'll need to refine this further to match the same targeting capabilities as Aireplay-ng. Step 4Whitelist & Blacklist Devices Once we have a specific channel to attack, we can be more precise by adding a blacklist or a whitelist. To do this, we'll re-run our Airmon-ng scan, and this time, we'll copy the MAC address of the device we wish to attack. I have tested doing this for both the address of the AP and the device you want to attack. Using the MAC address of the AP will attack everything on it, whereas adding the MAC address of the device will only attack it and nothing else on the network. To get this information, we can type the following to find the APs on the channel we were targeting before, in this case, channel 6. airodump-ng wlan0mon -c 6 By specifying the channel we found before, we should be able to cut down on the number of devices we see. To find devices connected to our target network, we can look at the bottom of the output and find devices which are listed as being associated with the MAC address matching our target network. Once we find a MAC address that is associated, we can target it easily. Copy the MAC address, and then open a new terminal window. Type nano black.txt and press Enter to open a text editor window. Now, paste the MAC address of the device you wish to jam, and press Ctrl-X to close the text editor. Now, we can run MDK3 against the target network by running the command below, with black.txt as the text file we just created containing the MAC addresses we wish to jam. mdk3 wlan0mon d -c 6 -b ~/black.txt Running this should very rapidly and persistently jam the device you indicated. In reverse, you can specify networks you want to leave alone the same way, and then run the command with the -w flag instead to attack everything else on the channel instead. Protected Management Frames & WPA3 While these attacks can be scary depending on what is being targeted like a home security camera, these risks can be mitigated by using Ethernet wherever possible and upgrading the WPA3 when devices supporting it becomes available. One of the core differences between WPA2 and WPA3 is that WPA3 doesn't allow these kinds of attacks by preventing the authentication or disassociation packets from being forged in the first place. Until then, you can use devices which support protected management frames, or if you suspect that you're being targeted with an attack like this, you can detect it using an intrusion detection system (IDS). Kismet can be used as an IDS to detect this sort of attack, as it will give you a warning on detecting dissasociation or deauthentication frames being sprayed across a network.
    • Anastasis
      Κάθε φορά που πειράζετε το μητρώο των Windows (Windows registry), καλό θα ήταν πριν αρχίσετε να δημιουργήσετε αντίγραφα ασφαλείας των κλειδιών του μητρώου που θέλετε να επεξεργαστείτε, σε περίπτωση που κάτι δεν πάει καλά. Σε αυτή την περίπτωση, ένα εφεδρικό backup θα σας βοηθήσει να επαναφέρετε το Windows registry στην κατάσταση που ήταν. Να αναφέρουμε ότι είναι πολύ εύκολο να δημιουργήσετε αντίγραφα ασφαλείας για μεμονωμένα κλειδιά. Παρακάτω θα δούμε τον τρόπο δημιουργίας αντιγράφων ασφαλείας και επαναφοράς των κλειδιών του Μητρώου.   Αρχικά ας δούμε πως μπορείτε να πάρετε ένα αντίγραφο ασφαλείας: Ανοίξτε το μητρώο των Windows. Στην αναζήτηση πληκτρολογήστε regedit και ανοίξτε το εικονίδιο που θα εμφανιστεί στα αποτελέσματα. Από εκεί μπορείτε να βρείτε το κλειδί που θέλετε να δημιουργήσετε αντίγραφο ασφαλείας. Κάντε δεξί κλικ και επιλέξτε ‘Εξαγωγή’. Αποθηκεύστε το κλειδί μητρώου. Αν το συγκεκριμένο κλειδί περιέχει και άλλα κλειδιά κάτω από αυτό, θα αποθηκεύσετε και αυτά. Επαναφορά κλειδιών μητρώου Υπάρχουν δύο τρόποι επαναφοράς ενός κλειδιού μητρώου. Ο πρώτος είναι από τον επεξεργαστή μητρώου των Windows. Αρχείο > Εισαγωγή και επιλέξτε το κλειδί μητρώου που θέλετε να επαναφέρετε.   Ο άλλος τρόπος είναι πιο απλός. Βρείτε το κλειδί στον φάκελο που το αποθηκεύσατε, κάντε δεξί κλικ και επιλέξτε “Συγχώνευση” ή Merge όπως βλέπετε παρακάτω. Θα εμφανιστεί μια προειδοποίηση. Αποδεχτείτε τη και το κλειδί θα προστεθεί χωρίς να χρειαστεί να ανοίξετε τον επεξεργαστή μητρώου. Για να κάνετε όλα τα παραπάνω θα χρειαστείτε δικαιώματα διαχειριστή. Θα πρέπει να αναφέρουμε ότι αν σκοπεύετε να δημιουργήσετε αντίγραφα ασφαλείας από πολλά κλειδιά του μητρώου, καλό θα ήταν να τα κρατήσετε οργανωμένα, κάτι που θα σας διευκολύνει πολύ μετά όταν θέλετε να κάνετε το restore.   Read more...
    • Anastasis
      Μπορώ να φτιάξω δικούς μου υπότιτλους (Subtitles); Ένα αρχείο υποτίτλων λειτουργεί σε κάθε player που το υποστηρίζει. Οι υπότιτλοι δεν είναι δύσκολο να βρεθούν για ταινίες ή τηλεοπτικές σειρές. Σε περίπτωση που αγοράσετε ένα Blu-ray ή ένα DVD, συνήθως περιέχει και τους υπότιτλους. Αν όμως δημιουργείτε δικά σας βίντεο, μπορεί να χρειαστεί να δημιουργήσετε τους δικούς σας.
        Παρακάτω θα δούμε πως μπορείτε να το κάνετε.
      Για να δημιουργήσετε τα δικά σας Subtitles, πρέπει πρώτα να έχετε το περιεχόμενο του βίντεο που θέλετε να τα προσθέσετε. Δείτε το βίντεο και κρατήστε σημειώσεις για τους υπότιτλους που θέλετε να προσθέσετε, ή απλά χρησιμοποιήστε κάποιο λογισμικό. Εάν δεν μπορείτε να βρείτε κάποιο λογισμικό δωρεάν, μπορείτε να χρησιμοποιήσετε τη λειτουργία υπαγόρευσης στο τηλέφωνό σας. Τόσο το iOS όσο και το Android διαθέτουν εξαιρετικές λειτουργίες υπαγόρευσης. Μόλις έχετε το κείμενο που σας ενδιαφέρει να προσθέσετε, θα χρειαστείτε μια εφαρμογή για να δημιουργήσετε τους υπότιτλους. Μια απλή, δωρεάν επιλογή είναι κάποιος επεξεργαστής κειμένου όπως το Notepad. Συνιστούμε την open source εφαρμογή Notepad++
      Ανοίξτε το σημειωματάριο. Γενικά:
      Θα πρέπει να καθορίσετε το χρώμα του κειμένου στην οθόνη.
      Κάθε γραμμή που θα προσθέτετε στα Subtitles που δημιουργείτε θα πρέπει να περιέχει δύο πράγματα, τον αριθμό σειράς και το πόσο θα πρέπει να παραμένει ορατή στην οθόνη.
      Μπορείτε, επίσης, να χρησιμοποιήσετε (προαιρετικά) HTML tags όπως τα και για να γράψετε κείμενο με italics.   Στο παρακάτω παράδειγμα, το ‘1’ είναι η σειρά. Είναι η πρώτη γραμμή που θα εμφανιστεί όταν αρχίσουν να εμφανίζονται οι υπότιτλοι. 1 00:00:26,484 --> 00:00:27,360 Έτσι μπράβο. Ο χρόνος εμφανίζεται στην επόμενη γραμμή, δηλαδή οι αριθμοί. 00:00:26,484 –> 00:00:27,360. Οι αριθμοί αποφασίζουν πότε θα εμφανιστεί η γραμμή 1 και πότε θα εξαφανιστεί.
      Η σύνταξη των υποτίτλων είναι.
      [Αριθμός Σειράς][Χρόνος εμφάνισης του υπότιτλου]->[Χρόνος που εξαφανίζεται ο υπότιτλος] [Υπότιτλος] Πως γράφουμε τους αριθμούς που εμφανίζονται στον χρόνο. Για την σύνταξη της ώρας χρησιμοποιήστε την παρακάτω φόρμα: [ώρες]:[λεπτά]:[δευτερόλεπτα],[χιλιοστά του δευτερολέπτου] Παράδειγμα:   30 00:05:14,647 --> 00:05:15,481 Αυτό ήταv. Ακολουθήστε την διαδικασία για να περάσετε όλο το κείμενο. Αν θέλετε να προσθέσετε χρώμα στο κείμενο χρησιμοποιήστε HTML tags. Για παράδειγμα ο παραπάνω υπότιτλος μπορεί να γίνει:
      Επιλέξτε το χρώμα που σας ενδιαφέρει από εδώ.   Αν θέλετε να προσθέσετε πλάγια γραφή στο κείμενο χρησιμοποιήστε και πάλι HTML tags. Για παράδειγμα ο παραπάνω υπότιτλος μπορεί να γίνει: Μαζί χρώμα με πλάγια γραφή: Περισσότερα HTML tags Μόλις τελειώσετε με τους υπότιτλους μπορείτε να αποθηκεύσετε το αρχείο με την επέκταση SRT. Και πάλι, μπορείτε να το κάνετε αυτό με οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου. Το Notepad++ περιέχει επιλογή αποθήκευσης σαν .srt.   https://iguru.gr/2018/07/19/subtitles-creation/  
    • Anastasis
      Στο παρελθόν, οι ερευνητές ασφαλείας αντιμετώπισαν περιπτώσεις όπου περιβόητοι χάκερς ήταν σε θέση να χρησιμοποιήσουν τα δεδομένα EXIF των εικόνων για να κρύψουν κακόβουλο κώδικα. Αυτή η τεχνική εξακολουθεί να χρησιμοποιείται ευρέως για να μολύνει τους χρήστες web με malware. Προχωρώντας ένα βήμα παραπέρα, διαπιστώθηκε ότι οι χάκερς έχουν βρει έναν τρόπο να μοιράζονται κακόβουλα προγράμματα μέσω αξιόπιστων servers της Google, όπως αυτά του googleusercontent. Σε αντίθεση με το κακόβουλο λογισμικό που είναι αποθηκευμένο σε αρχεία κειμένου, είναι πολύ πιο δύσκολο να εντοπιστούν κακόβουλα payloads σε εικόνες. Επιπλέον, είναι ακόμη πιο δύσκολο να γίνει αναφορά του malware που βρίσκεται στο googleusercontent.com στη Google.   Για όσους δεν το γνωρίζουν, το googleusercontent είναι ο τομέας της Google για την προβολή περιεχομένου που παρέχεται από τον χρήστη, χωρίς να επηρεάζεται η ασφάλεια των σελίδων της Google. Σύμφωνα με μια αναφορά του Sucuri, ο ακόλουθος κώδικας εντοπίστηκε σε ένα script που εξάγει τον κωδικό ασφαλείας PayPal:   Το script διαβάζει τα δεδομένα EXIF από μια εικόνα του googleusercontent, η οποία κατά πάσα πιθανότητα μεταφορτώθηκε από κάποιον σε λογαριασμό Google+ ή Blogger. Όταν η ενότητα UserComment των δεδομένων EXIF αποκωδικοποιήθηκε, αποδείχθηκε ότι είναι ένα script που έχει τη δυνατότητα να ανεβάσει web shell και αυθαίρετα αρχεία. Αυτό υποδεικνύει μια μεγαλύτερη απειλή, καθώς δεν υπάρχει κανένας τρόπος να εντοπιστεί το malware μέχρι να ελεγχθούν τα μεταδεδομένα των εικόνων και να αποκωδικοποιηθούν. Ακόμη και μετά την επισήμανση του κακόβουλου λογισμικού, δεν μπορεί κανείς να γνωρίζει την πραγματική πηγή της εικόνας.   Read more...  
    • Anastasis
      Τα smartphones, παρόλο που μας προσφέρουν πολλά, είναι πολύ ευαίσθητα και η καθημερινή χρήση τους μπορεί εύκολα να οδηγήσει σε μια ραγισμένη οθόνη. Μια έρευνα που διεξήχθη από την Motorola κατέληξε στο συμπέρασμα ότι τουλάχιστον το 50% των χρηστών smartphone έχουν βρεθεί με ραγισμένη οθόνη στο κινητό τους, έστω μία φορά στη ζωή τους. Όμως τώρα ίσως υπάρχει μια λύση για αυτό! Το πρόσφατα ανακοινωθέν Corning Gorilla Glass 6, υπόσχεται να μειώσει δραματικά τον κίνδυνο ραγίσματος ή θρυμματισμού της οθόνης σας. Σε ένα σημαντικό event, η Corning διαβεβαίωσε ότι το νέο Gorilla Glass 6 θα μπορούσε να επιβιώσει από έως και 15 διαδοχικές πτώσεις από ύψος 1 m ή λιγότερο. Σύμφωνα με την εταιρεία, το Corning Gorilla Glass 6 είναι “δύο φορές καλύτερο από το Gorilla Glass 5” και αποκαλείται ως “το πιο σκληρό γυαλί κάλυψης που διατίθεται για συσκευές κινητών τηλεφώνων”. Σχεδόν όλες οι flagship συσκευές, συμπεριλαμβανομένων των iPhone και Samsung μεσαίας και υψηλής απόδοσης, χρησιμοποιούν το Corning Gorilla Glass. Αλλά κάθε φορά, αυτές οι εταιρείες αποτυγχάνουν να δώσουν μια ελπιδοφόρα οθόνη για τις υψηλές τιμές τους. Κι αν δεν ραγίσει, η πρώτη πτώση από την τσέπη σίγουρα αποδυναμώνει την οθόνη με ορατές γρατσουνιές πάνω της. Ωστόσο, η Corning πιστεύει ότι το νέο προϊόν δεν θα παρουσιάσει καμία ρωγμή ούτε μετά από επαναλαμβανόμενες πτώσεις.   Θα ήταν ενδιαφέρον να δούμε πώς το νέο Gorilla Glass θα λειτουργήσει στα bezel-less τηλέφωνα. Γιατί σε αυτή την περίπτωση, η σύγκρουση γίνεται πρώτα με το γυαλί σε μια οθόνη edge to edge, σε αντίθεση με το παρελθόν όπου το πλαίσιο ήταν το πρώτο που ερχόταν σε επαφή με το έδαφος. Όσον αφορά την αντοχή στις γρατσουνιές, η εταιρεία είπε ότι το γυαλί θα προσφέρει την ίδια αντοχή σε γρατζουνιές όπως το προηγούμενο Gorilla Glass 5, αλλά θα είχε καλύτερη απόδοση.   Read more...
×