Ετικέτα: CSS

Δημοσιεύτηκε στισ

Μετατρέψτε το παρακάτω σε σελίδα βιβλίου

exerciseΛήψη

Βασικές Έννοιες 1

1. Βασικές έννοιες

1.1 Πληροφορική ή Επιστήμη Υπολογιστών;

Ο όρος «πληροφορική» προέρχεται από τη λέξη πληροφορία. Εμφανίστηκε τη δεκαετία του 1960 στη Γαλλία (Informatique) και τη Γερμανία (Informatik). Από την ετυμολογία της λέξης προκύπτει ο ορισμός:

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

H Πληροφορική είναι άρρηκτα συνδεδεμένη με τη μηχανή που λέγεται ηλεκτρονικός υπολογιστής. Γι’ αυτό και στον Αγγλόφωνο χώρο, έχει επικρατήσει η ονομασία Επιστήμη Υπολογιστών (Computer Science). Στη νέα επιστήμη όσο σημαντικός είναι ο υπολογιστής (computer), άλλο τόσο σημαντικές είναι οι διαδικασίες υπολογισμού (computing) που μπορεί να κάνει.

Επιστήμη Υπολογιστών είναι η επιστήμη που ασχολείται με τους υπολογιστές και τους υπολογισμούς.

Για μας, στο εξής, Πληροφορική και Επιστήμη Υπολογιστών αναφέρονται στην ίδια επιστήμη. Θεμελιώδεις έννοιες στην Επιστήμη των Υπολογιστών είναι:

• η ίδια η μηχανή, ο υπολογιστής και

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

Ιστορικοί σταθμοί της Επιστήμης Υπολογιστών

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

100 π.Χ. Μηχανισμός των Αντικυθήρων, μηχανικός υπολογιστής και όργανο αστρονομικών παρατηρήσεων

820 μ.Χ. Ο al-Khwarizmi, Πέρσης μαθηματικός και αστρονόμος γράφει βιβλίο για τους αλγόριθμους

1822 Ο Charles Babbage σχεδιάζει την Αναλυτική Μηχανή του, την πρώτη μηχανή με αποθηκευμένα προγράμματα.

1940 Ο John von Neumann θέτει τις θεμελιώδεις αρχές σχεδίασης των σύγχρονων ΗΥ, γνωστές ως “αρχιτεκτονική von Neumann”, στο Πανεπιστήμιο του Πρίνστον.

1944 Ο Aiken κατασκευάζει τον Mark I. Χρόνος για πρόσθεση: 1/3 s., για πολλαπλασιασμό: 6 s

1946 Οι Eckert και Maughly κατασκευάζουν τον ENIAC, τον πρώτο ηλεκτρονικό υπολογιστή με 18000 λυχνίες. Χρόνος για πολλαπλασιασμό: 6 ms

1949 Ο Wilkes κατασκευάζει τον EDSAC, τον πρώτο ψηφιακό υπολογιστή γενικής χρήσης με αποθηκευμένο πρόγραμμα (υπολογιστής τύπου von Neumann)

1969 Γέννηση του διαδικτύου με τη δημιουργία του δικτύου ARPANET

1991 Δημιουργία του Παγκόσμιου Ιστού (WWW) στο CERN

Η παραπάνω ιστορική αναδρομή εμφανίζει κυρίως τεχνολογικά επιτεύγματα και όχι επιστημονικά. Μήπως, λοιπόν, η Πληροφορική είναι απλώς η τεχνολογία των υπολογιστών και δεν είναι επιστήμη;

Η απάν

11

Δημοσιεύτηκε στισ

Μικρές ασκήσεις CSS

Οι παρακάτω ασκήσεις είναι φτιαγμένες πάνω στο Θέμα Twenty Seventeen του WordPress, το οποίο θα πρέπει να ενεργοποιήσετε πριν ξεκινήσετε. Για να γράψετε κώδικα CSS, θα επιλέξετε το μενού Προσαρμογή στον Πίνακα Ελέγχου.

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

Με τις υγείες σας
Με τις υγείες σας!
  1. Μορφοποίηση του τίτλου
    • Μεγαλώστε τον τίτλο του ιστοτόπου σας στα 80px.
    • Προσθέστε σκιά στον τίτλο.
    • Δυσκολία: Για αρχάριους
  2. Μέγεθος του Λογότυπου
    • Στην Προσαρμογή >> Ταυτότητα ιστοτόπου επιλέξτε μια εικόνα για λογότυπο
    • Μεγαλώστε την εικόνα ώστε να εμφανίζεται διπλάσια από την προεπιλεγμένη.
    • Δυσκολία: Επιλογέας και κατάλληλοι κανόνες
  3. Φόντο με κλιμακούμενο χρώμα (gradient)
    • Αν δεν έχετε Κεντρικό Μενού, δημιουργήστε ένα.
    • Αλλάξτε το χρώμα φόντου του μενού σε κλιμακούμενο (gradient) χρώμα.
    • Δυσκολία: Κανόνες
  4. Πλαίσιο στις πλαϊνές μικροεφαρμογές
    • Αν δεν έχετε κάποια μικροεφαρμογή στην πλαϊνή στήλη, προσθέστε μια.
    • Βάλτε πλαίσιο με κουκίδες στην κάθε μικροεφαρμογή.
    • Αφήστε τα κατάλληλα περιθώρια, ώστε να απομακρύνετε το πλαίσιο από το κείμενο που περιέχει και τα γειτονικά του στοιχεία.
    • Δυσκολία: Χαμηλή
  5. Χρώμα στους τίτλους των μικροεφαρμογών
    • Ορίστε πορτοκαλί χρώμα για το φόντο του κάθε τίτλου μικροεφαρμογής.
    • Δυσκολία: Για αρχάριους
  6. Σκουρόχρωμη λειτουργία στο υποσέλιδο
    • Βάλτε σκουρόχρωμο φόντο και ανοιχτόχρωμα γράμματα σε όλο το υποσέλιδο.
    • Δυσκολία: Για αρχάριους
  7. Απόκρυψη στοιχείου
    • Στο τέλος της σελίδας γράφει “Με την υποστήριξη του WordPress”. Κρύψτε αυτό το στοιχείο.
    • Πειραματιστείτε με τους κανόνες display και visibility και βρείτε τη διαφορά.
    • Δυσκολία: Για αρχάριους
  8. Περιστροφή και μετακίνηση του υπότιτλου
    • Μετακινήστε τον Υπότιτλο του ιστοτόπου σας στη δεξιά άκρη της σελίδας και περιστρέψτε τον κατά 90°.
    • Δυσκολία: Κανόνες τοποθέτησης στοιχείου
  9. Χρώμα ενεργού Μενού
    • Το μενού της σελίδας όπου βρισκόμαστε θα πρέπει να έχει χρώμα royalblue.
    • Δυσκολία: Επιλογέας
  10. Μεγέθυνση εικόνας κάτω από το ποντίκι
    • Ρυθμίστε τις εικόνες που περιέχονται στα άρθρα να κάνουν εφέ μεγέθυνσης καθώς περνάει το ποντίκι από πάνω τους.
    • Δημιουργήστε εφέ αργής μετάβασης του ζουμ.
    • Δυσκολία: Μεγάλη
Δημοσιεύτηκε στισ

Ακορντεόν

Για να δουλέψει ο κώδικας για το εφέ που βλέπετε παραπάνω, χρειάζεται η παρακάτω δομή στην HTML:

<div id="accordion">

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

</div>

Η εξωτερική περιοχή <div id=”accordion”> ορίζει και ονοματίζει την περιοχή του εφέ. Για κάθε εικόνα χρειάζεται ένα στοιχείο <div>, το οποίο περιέχει άλλο ένα <div>, που περιέχει την εικόνα <img>.

Ο κώδικας CSS που δημιουργεί το εφέ είναι ο ακόλουθος:

/* χρήση των κανόνων διάταξης flex */
#accordion {
  display:flex;
  justify-content:space-between;
}

/* αρχική κατάσταση των στοιχείων */
#accordion > div {
  width:25%;
  transition:width 1s;
  overflow:hidden;
  display:flex;
  margin:0 1px;
}
#accordion > div > div {
  height: 100%;
  top:0%;
  transition:height 1s, top 1s;
  display:flex;
  position:relative;
  right:-50%;
}
#accordion img {
  left:-50%;
  position:relative;
  max-width: unset;
}

/* εφέ μεγέθυνσης της περιοχής κάτω από το ποντίκι */
#accordion > div:hover {
  width:75%;
  transition:width 1s;
}
#accordion > div > div:hover {
  height: 104%;
  top:-2%;
  transition:height 1s, top 1s;
}
Δημοσιεύτηκε στισ

Άσκηση στην CSS

  1. Μπείτε στη σελίδα http://www.cssdesk.com/ ή https://codepen.io/pen/
  2. Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα HTML
  3. Γράψτε τους κατάλληλους κανόνες CSS και τροποποιήστε τον κωδικά HTML προσθέτοντας τα χαρακτηριστικά id και class όπου χρειάζεται ώστε να έχετε το αποτέλεσμα που βλέπετε σε αυτό το pdf.
<body>

<h1>Lorem Ipsum</h1>

<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>

<h4>"Δεν υπάρχει κανείς που να αγαπάει τον ίδιο τον πόνο, να τον αναζητά και να θέλει να τον νιώθει, επειδή απλά είναι πόνος..."</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi mauris, vulputate eget vehicula at, mollis et ipsum. Praesent quis tempor enim. Nam vel lorem at nisl lacinia mollis id at orci. Vivamus at ligula at eros ultricies tincidunt ac quis nibh. Morbi condimentum tempus metus, eget facilisis massa pharetra nec. Etiam tristique elit non dui lobortis tincidunt. Proin ipsum nisi, finibus condimentum enim in, varius suscipit eros. Suspendisse scelerisque tempor purus, consectetur laoreet lorem rutrum nec. Praesent a ante sit amet dolor vulputate bibendum ut sit amet massa. Aenean aliquet neque id risus lobortis, eu mollis justo egestas. Maecenas quis augue pharetra, auctor odio nec, iaculis lectus.</p>

<p>Integer ac ex ut orci facilisis iaculis. Suspendisse euismod, dolor sed consectetur pharetra, ante magna hendrerit ipsum, quis semper urna velit et risus. Vivamus nec turpis nec sem commodo porta. Fusce accumsan nisi lacus, in vulputate diam rutrum sed. Pellentesque sodales diam nulla. Nunc at quam et metus mattis sagittis. Etiam nec ultricies magna, in gravida risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

<h4>Pic1</h4>
<img src="http://www.prepressure.com/images/lorem-ipsum-cartoon-entities-r-us.png">

<p> In hac habitasse platea dictumst. Maecenas vel mi non dui pulvinar cursus. Maecenas eros ipsum, ullamcorper sit amet elementum non, vulputate auctor lectus. Nulla vel eros ac dolor rhoncus viverra vitae eget orci. Ut felis lacus, mattis molestie elit ut, scelerisque bibendum libero. Nulla nunc eros, congue ac nisi quis, euismod varius nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

<p> Cras sed consequat sem, quis ornare risus. Donec condimentum id justo ac pulvinar. Aliquam pellentesque a urna ut faucibus. Curabitur sollicitudin scelerisque egestas. Duis eu justo vitae eros elementum euismod. Nam eu gravida erat. Pellentesque ultricies vitae turpis mollis placerat. Nam vel semper magna. Pellentesque ligula tellus, egestas in purus non, lacinia pellentesque odio. Nullam commodo tincidunt erat ut consectetur. Nulla facilisi. Nulla nec vestibulum lectus. Vestibulum nec vehicula sapien, sit amet interdum risus. Vestibulum venenatis accumsan metus consequat finibus.</p>

<p>Donec blandit ullamcorper malesuada. Duis bibendum tempor risus, ac congue tellus. Aenean in posuere erat, eu sodales sem. Vivamus ornare, orci et mollis consequat, libero elit porttitor nunc, lobortis vulputate ante elit vitae turpis. Sed gravida est ac sapien auctor, at sollicitudin diam egestas. Etiam sit amet velit dolor. Donec a eros dictum, scelerisque metus non, sodales nibh. Aenean et rutrum ligula. Integer et lacus pretium, convallis urna non, viverra dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi lobortis dolor leo, eleifend feugiat nibh placerat non. Nam ligula diam, venenatis at feugiat eget, auctor ac odio. Cras ut tristique nibh, nec rutrum neque. Nunc lorem enim, ultrices eget nisl pharetra, ornare hendrerit lacus. Maecenas volutpat tincidunt purus, vitae sagittis arcu maximus in.</p>

<div>
<ul>
<li>Sed ut metus mollis, efficitur ante quis, commodo lectus.
<li> Integer ut risus a ipsum fermentum rhoncus.
<li>In porttitor ante nec dui interdum, vel faucibus nulla finibus.
<li>Nullam venenatis dui vitae massa euismod dapibus.
</ul>Vivamus ac sem eget nibh tempus ornare ut nec mauris.
</div>

<p> Αυτός είναι ένας απλός <a href="https://el.lipsum.com/">σύνδεσμος</a>, ενώ αυτός ένας άλλος <a href="https://el.lipsum.com/">σύνδεσμος</a> </p>

</body>