NEXTNET - Δωρεάν διαδικτυακές υπηρεσίες & πρωτοπορίες...

Πώς να κάνεις το site σου mobile friendly χωρίς κόπο...

Μια εύκολη μέθοδος για να κάνεις την ιστοσελίδα σου mobile friendly με μερικές απλές μετατροπές. 

"Κατέβασε" εντελώς δωρεάν 3 ηλεκτρονικά βιβλία (PDF ebooks)!

1.Δωρεάν στρατηγική κέρδους

2.Οδηγός για νέες ιστοσελίδες

3.Βγάλε λεφτά με το bitcoin

Απλά βάλε το email σου στη παρακάτω φόρμα και θα λάβεις άμεσα τα 3 ebooks!

Email:

Η διεύθυνση email σου είναι ασφαλής! Μάθε περισσότερα για τα 3 ebooks...

Η εποχή που οι χρήστες του internet χρησιμοποιούσαν αποκλειστικά επιτραπέζιους Η/Υ για να περιηγούνται στις διάφορες ιστοσελίδες έχει περάσει για τα καλά. Σήμερα, περισσότερο από το 1/3 των χρηστών χρησιμοποιούν τα κινητά τους τηλέφωνα (smart phones, tablets) για περιήγηση. Αυτό σημαίνει ότι οι ιδιοκτήτες ή διαχειριστές ιστοσελίδων (webmasters) πρέπει να προσαρμόζουν τη σχεδίαση των sites ώστε να υποστηρίζουν περιήγηση από τέτοιες mobile συσκευές.

Σε αυτό το άρθρο θα σου παρουσιάσω μια πολύ απλή μέθοδο για να κάνεις το site σου mobile friendly ώστε να προσφέρει μια ιδανική εμπειρία περιήγησης στον χρήστη. Για την υλοποίηση της μεθόδου απαιτούνται γενικές γνώσεις κατασκευής ιστοσελίδων (HTML και CSS). Δες και αυτό το άρθρο για μια μικρή εισαγωγή στη γλώσσα HTML και το άρθρο σύντομη εισαγωγή στα CSS.

Ποιό είναι το πρόβλημα ακριβώς;

Το πρόβλημα ξεκινάει από το μέγεθος της οθόνης. Στους επιτραπέζιους Η/Υ είναι μεγάλη ενώ στα κινητά μικρή. Αν προσπαθήσεις να περιηγηθείς σε μια ιστοσελίδα που δεν είναι mobile friendly θα διαπιστώσεις ότι η περιήγηση είναι ένας μπελάς λόγω της μικρής οθόνης του κινητού. Ωστόσο με μερικές απλές μετατροπές η μαγεία των CSS (Cascading Style Sheets) μπορει να προσαρμόσει το μέγεθος της σελίδας στο μέγεθος της οθόνης του κινητού. Η ιστοσελίδα nextnet.gr είναι mobile friendly και χρησιμοποιεί στη κατασκευή της τη μέθοδο που θα σου παρουσιάσω (δοκίμασε να μπεις από Η/Υ και από κινητό για να δεις τη διαφορά)...

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

1ο βήμα: Εισαγωγή της ετικέτας meta viewport

Η ετικέτα meta viewport λέει με λίγα λόγια στους περιηγητές (browsers) να προσαρμόσουν την εμφάνιση μιας ιστοσελίδας ανάλογα με την οθόνη της συσκευής. Η ετικέτα μπαίνει στον τομέα <head> </head> του κώδικα HTML της κάθε σελίδας που θέλουμε να γίνει mobile friendly στο site μας:

<head>
...
<meta name="viewport" content="width=device-width; initial-scale=1.0">
...
</head>

2o βήμα: Μετατροπή του αρχείου style.css

Στα αρχεία CSS (με κατάληξη .css) συμπεριλαμβάνονται όλες εκείνες οι παράμετροι που ορίζουν την εμφάνιση μιας ιστοσελίδας στους περιηγητές (browsers). Για την κατανόηση αυτού του βήματος απαιτούνται βασικές γνώσεις CSS (δες και αυτό το άρθρο-εισαγωγή στα CSS για αρχάριους). Με λίγα λόγια αυτό που θα κάνουμε είναι να πούμε στους browsers να χρησιμοποιούν διαφορετικά στυλ (ανάλογα με τη συσκευή που χρησιμοποιείται) για τη προβολή μιας ιστοσελίδας. Έτσι για παράδειγμα αν μια <div> </div> έχει μέγεθος 950 pixels, τότε με τη χρήση CSS θα πούμε στους browsers ότι θα διατηρεί αυτό το μέγεθος αν η συσκευή προβολής είναι επιτραπέζιος Η/Υ ΑΛΛΆ όταν είναι κινητό (π.χ. iPhone) θα μικραίνει στα 320 pixels, ενώ όταν πρόκειται για tablet (π.χ. iPad) θα γίνεται 760 pixels.

Γενικά θα ορίσουμε τρεις περιοχές στο αρχείο .css ώστε να ακολουθείται διαφορετικό στυλ ανάλογα με τη συσκευή προβολής. Μια περιοχή για τους επιτραπέζιους Η/Υ, μια περιοχή για τα tablets και μια περιοχή για τα smart phones. Για να το κάνουμε αυτό επεξεργαζόμαστε (ή αν δεν υπάρχει, δημιουργούμε) το αρχείο .css της ιστοσελίδας μας (απαιτεί βασικές γνώσεις HTML και CSS). Έπειτα μέσα στο αρχείο .css ορίζουμε τις τρεις περιοχές όπως προαναφέρθηκε...:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

/* Σε αυτό το τμήμα μπαίνουν τα στυλ για smart phones */
.mydiv {width:320px;}

}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

/* Σε αυτό το τμήμα μπαίνουν τα στυλ για tablets π.χ. iPads */
.mydiv {width:760px;}

}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {

/* Σε αυτό το τμήμα μπαίνουν τα στυλ για επιτραπέζιους Η/Υ και laptops */
.mydiv {width:950px;}
}

Όπως ειπώθηκε, σε κάθε τμήμα προσαρμόζουμε τα στυλ του site μας ανάλογα με το μέγεθος της οθόνης της συσκευής με την οποία προβάλλεται το site. Στο παράδειγμα μας προσαρμόζουμε το μεγεθος μιας <div class="mydiv"> </div> ανάλογα με τη συσκευή... Υπενθυμίζεται ότι τα κείμενα ανάμεσα στα /* και */ είναι περιγραφικά σχόλια ενώ ο κώδικας CSS μπαίνει ανάμεσα στις αγκύλες σε κάθε περιοχή { και }.

Αυτό ήταν! Με μερικές μόνο μετατροπές στο αρχείο .css μας μπορούμε χωρίς κόπο να μετατρέψουμε μια ιστοσελίδα σε mobile friendly. Τώρα μπορείς να ανεβάσεις το αρχείο .css στον server σου και να ελέγξεις αν όλα γίναν σωστά. Για να το κάνεις αυτό μπορείς να επισκεφτείς το site σου από κινητό ή tablet ή να κάνεις από Η/Υ μια αναζήτηση στο Google για "mobile phone simulator" ή "smartphone simulator" ή "test mobile website" ή κάτι σντίστοιχο. Φυσικά για την υλοποίηση της μεθόδου (όπως ειπώθηκε) απαιτείται ένα υπόβαθρο πάνω στη γλώσσα HTML και στα CSS (Cascading Style Sheets). Ελπίζω να βρήκες αυτό το άρθρο χρήσιμο. Αν δεν γνωρίζεις το παραμικρό από τη γλώσσα κατασκευής ιστοσελίδων HTML διάβασε αυτή τη μίνι εισαγωγή στη γλώσσα HTML. Επίσης δες και την εισαγωγή στα CSS για αρχάριους.

Αν βρήκες το άρθρο ενδιαφέρον κάνε εγγραφή στις ενημερώσεις από το nextnet.gr - Η εγγραφή είναι εντελώς δωρεάν και θα λάβεις 3 ηλεκτρονικά βιβλία PDF με την ολοκλήρωση της. Απλά βάλε το email σου στη παρακάτω φόρμα (μάθε περισσότερα):



Σου άρεσε το παραπάνω άρθρο; Μοιράσου το με τους φίλους σου...:


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

Απόκτησε το από την CreateSpace

Απόκτησε το από το Amazon

Δες το εσωτερικό του βιβλίου

Ταξίδι Χρωματισμού στο Ηλιακό μας Σύστημα
ΕγγραφήΔΩΡΕΆΝ εγγραφή στις ενημερώσεις NEXTNET
Για να μαθαίνεις μέσω e-mail τα νέα του nextnet.gr (π.χ. όταν δημοσιεύεται κάποιο άρθρο ή κάποια προσφορά) συμπλήρωσε το e-mail σου στη παρακάτω φόρμα. Η εγγραφή είναι 100% δωρεάν! Η διεύθυνση email σου είναι ασφαλής και δεν πρόκειται να πουληθεί ή ενοικιαστεί ή με οποιονδήποτε τρόπο φανερωθεί σε τρίτους. Με την ολοκλήρωση της εγγραφής θα λάβεις ως δώρο 3 χρήσιμα ηλεκτρονικά βιβλία (ebook) που μπορεί να αλλάξουν τη ζωή σου! Μάθε περισσότερα...

VCard
ΝΕΧΤΝΕΤ - Υπηρεσίες διαδικτύου
Κων/πόλεως 4 - Τ.Θ. 167, T.K. 53100 - Φλώρινα, Ελλάδα.
Τηλέφωνο: +30.2385037961
http://nextnet.gr
Δωρεάν

Μυστικά ομορφιάς και νεότητας για κάθε ηλικία

Ένα πολλά υποσχόμενο site με θέμα την νεότητα και την ομορφιά που ξεκίνησε κάπως δυναμικά αλλά τελικά δεν προχώρησε όπως θα έπρεπε. Βρίσκεται στην διεύθυνση omorfia.nextnet.gr και περιέχει μερικά άρθρα που θα μπορούσαν να ωφελήσουν μια γυναίκα σε θέματα ομορφιάς και νεότητας.

ΕΠΙΚΟΙΝΏΝΗΣΕ ΜΕ NEXTNET...
...για διαδικτυακά θέματα ή για να πεις τη γνώμη σου... ΚΑΝΕ ΚΛΙΚ ΕΔΩ.

Εφημερίδα ΗΧΩ Φλώρινας
Όλα τα νέα από τις περιοχές Φλώρινας, Αμυνταίου & Πρεσπών (και όχι μόνο)...
Εφημερίδα ηχώ Φλώρινας
Επισκέψου την ιστοσελίδα της εφημερίδας
Ηχώ Φλώρινας blog (2η έκδοση)
Ηχώ Φλώρινας blog (1η έκδοση)
Γινε συνδρομητής!
ΓΙΑ ΝΈΕΣ ΙΣΤΟΣΕΛΊΔΕΣ & BLOGS!
Μόλις έφτιαξες την καινούργια σου ιστοσελίδα ή blog και δεν ξέρεις πως να την κάνεις γνωστή στις μηχανές αναζήτησης όπως το Google κ.α.; Στον μίνι οδηγό που μπορείς να κατεβάσεις εντελώς δωρεάν θα βρεις συμβουλές βήμα προς βήμα για να... πάρει μπρος η ιστοσελίδα σου!

"Κατέβασε" δωρεάν τον χρήσιμο οδηγό PDF

Προώθηση στις μηχανές αναζήτησης...

Λέχοβο Φλώρινας

Το Λέχοβο είναι ένα μαρτυρικό χωριό της Ελλάδας με μεγάλη ιστορία και παράδοση. Μάθε τα πάντα για αυτή την μαγευτική γωνιά της της χώρας μας στη Φλώρινα, γνώρισε τους κατοίκους του χωριού, δες τις ασχολίες, τα εδέσματα τους και τους εορτασμούς που πραγματοποιούνται κάθε χρόνο στο Λέχοβο. Ένα site με πραγματικές φωτογραφίες και αληθινά κείμενα ...
Η επανάσταση του bitcoin είναι εδώ!
Το bitcoin είναι το πιο δημοφιλές ψηφιακό νόμισμα της εποχής μας. Επίσης αποτελεί ευκαιρία για να κερδίσεις χρήματα αφού η τιμή του αυξάνεται συνεχώς. Σου παρουσιάζω μια στρατηγική με την οποία μπορείς κι εσύ να αποκτήσεις (χωρίς εργασία) bitcoin τα οποία έπειτα μπορείς να μετατρέψεις σε ευρώ. Πάρε κι εσύ μέρος στην επανάσταση των ψηφιακών νομισμάτων!

"Κατέβασε" εντελώς δωρεάν τον PDF οδηγό.

Ψηφιακό νόμισμα bitcoin
Καλλιέργεια Λαχανικών Σε Κήπο
Ένα βιβλίο χρήσιμο καλοτυπωμένο, με εικόνες για όσους διαθέτουν κήπο. Το βιβλίο σε διδάσκει πώς να καλλιεργήσεις με επιτυχία 8 βασικά λαχανικά που εντάσσονται στη Μεσογειακή διατροφή: Ντομάτα, Πιπεριά, Αγγούρι, Μαρούλι, Κρεμμύδι, Λάχανο, Κολοκύθα, Καρότο. Απόκτησε το σήμερα στη χαμηλότερη δυνατή τιμή!

Δες το στην CreateSpace

Απόκτησε το από το Amazon

Δες το εσωτερικό του βιβλίου

Καλλιέργεια Λαχανικών σε Κήπο - Ελληνική έκδοση

Φασόλι Πρέσπας

Τα πιο νόστιμα φασόλια που υπάρχουν και παράγονται στον ευλογημένο τόπο των Πρεσπών. Γνωρίστε τον τοπικό παραγωγό, μάθετε για τη διαδικασία παραγωγής (βιολογικά φασόλια), δείτε συνταγές με φασόλια και παραγγείλτε τα όσπρια της αρεσκείας (μαζί με φακή και ρεβύθια). Όλα από τη Πρέσπα...
Δωρεάν στρατηγική κέρδους!
Βγάλε πολλά χρήματα ξεκινώντας με μηδενικό κεφάλαιο και χτίζοντας μια αυτοκρατορία μέσα από μια δωρεάν ιστοσελίδα/blog. Ένα πανέξυπνο και έγκυρο concept για όλους τους χρήστες του internet που θέλουν να ανεξαρτητοποιηθούν οικονομικά... μια για πάντα! Με χρήσιμες συμβουλές βήμα προς βήμα.

Κάνε κλικ εδώ για να κατεβάσεις τον PDF οδηγό.

Απόκτησε θησαυρό
Ζωγράφισε & Χρωμάτισε τους 12 Ολύμπιους Θεούς
Ένα μοναδικό βιβλίο, καλοτυπωμένο με χρήσιμες πληροφορίες για τους 12 Ολύμπιους θεούς και σελίδες για να ζωγραφίσεις και να χρωματίσεις τις φιγούρες τους... Αν εμπνέεσε από το δωδεκάθεο τότε πρέπει να το δεις. Από την Δήμητρα, την Αθηνά και την Αφροδίτη μέχρι τον Δία, τον Άρη και τον Ήφαιστο. Απόκτησε το σήμερα!

Δες το στη CreateSpace

Δες το στο Amazon

Δες το εσωτερικό του βιβλίου

Ζωγράφισε & Χρωμάτισε τους 12 Ολύμπιους Θεούς
Verify your site with eCert by nextnet.gr

Ηχωμαγειρέματα

Παραδοσιακές και όχι μόνο συνταγές μαγειρικής με αναλυτικές περιγραφές και φωτογραφίες. Η Αυγή και οι φίλοι/ες της ετοιμάζουν ένα σωρό τοπικά εδέσματα της Φλώρινας και άλλων περιοχών. Αν σε ενδιαφέρει η μαγειρική, η παράδοση ή ψάχνεις νέες ιδέες για συνταγές ρίξε μια ματιά σε αυτό το πλούσιο site...

ΕΠΣ Φλώρινας

Η επίσημη, καινούργια ιστοσελίδα της Ένωσης Ποδοσφαιρικών Σωματείων Φλώρινας (Ε.Π.Σ.Φ.). Μάθε όλα τα τελευταία νέα για τα τοπικά ποδοσφαιρικά πρωταθλήματα και το κύπελλο συλλόγων ερασιτεχνικού ποδοσφαίρου, δες της νέες δημοσιεύσεις της ΕΠΣ Φλώρινας ή κάνε εγγραφή για να ενημερώνεσαι στο email σου για όλα τα νέα της επίσημης ιστοσελίδας της ΕΠΣ Φλώρινας.
ok
3 ebooks εντελώς δωρεάν!

"Κατέβασε" εντελώς δωρεάν τα 3 ηλεκτρονικά μου βιβλία (PDF ebooks) με πληροφορίες και στρατηγικές που μπορεί να αυξήσουν το εισόδημα σου κατα πολύ, να κάνουν την ιστοσελίδα σου γνωστή στις μηχανές αναζήτησης όπως το Google, να σου δείξουν πως μπορείς να επωφεληθείς από την επανάσταση των ψηφιακών νομισμάτων... Μην χάνεις την ευκαιρία να αποκτήσεις αυτές τις πληροφορίες...

Πραγματοποίησε την 100% δωρεάν εγγραφή στις ενημερώσεις nextnet.gr και θα λάβεις άμεσα τους συνδέσμους (download links) και για τα 3 ηλεκτρονικά βιβλία μαζί! Απλά βάλε το email σου στη παρακάτω φόρμα...:

Email:

Το email σου είναι ασφαλές και δεν θα γνωστοποιηθεί ποτέ σε τρίτους. Για να μάθεις περισσότερα για τα 3 ebooks κάνε κλικ εδώ.



NEXTNET - Υπηρεσίες διαδικτύου

Δωρεάν διαδικτυακές υπηρεσίες και πρωτοπορίες
Λογότυπο nextnet.gr Κωσταντινουπόλεως 4, ΤΚ53100 Φλώρινα, Ελλάδα +30.2385037961 Δωρεάν
Βαθμολογία Επιχείρησης: 5 από 5 με 2 κριτικές |
nextnet.gr - Powered by NEXTNET - Επικοινωνία | RSS | Όροι χρήσης | Πολιτική απορρήτου
Τα περιεχόμενα της ιστοσελίδας μπορούν να αντιγραφούν και να χρησιμοποιηθούν ελεύθερα ή να αναδιανεμηθούν διαδικτυακά με τη προϋπόθεση ότι θα υπάρχει ενεργός σύνδεσμος (backlink) προς το nextnet.gr ως ανταπόδωση - NEXTNET - Δωρεάν υπηρεσίες διαδικτύου & πρωτοπορίες...