Transcript HTML and CSS Playgrounds

Εργαστήριο 4
HTML και CSS Playgrounds
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Τι θα δούμε;
 Έλεγχος HTML/ CSS κώδικα μέσο online playgrounds.
 Εύρεση bugs μέσα από τον κώδικα.
 Εξερεύνηση του κώδικα ιστοσελίδων.
 Ανάλυση του DOM.
 Χρήση των Developer Tools των φυλλομετρητών.
 Εργαλεία ανάπτυξης (π.χ. Codepen.io, Firebug, Google
Chrome DevTools)
 Δημιουργία πρώτης σελίδας στο AWS.
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Παρουσίαση πηγαίου κώδικα ιστοσελίδων
Mozilla Firefox
Google Chrome
Page Source Code
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Eργαλεία εξερεύνησης του DOM [1/2]
 Add-ons είτε μέσα στον
φυλλομετρητή.
 Προσφέρουν πλούτο εργαλείων
ανάπτυξης
 Επεξεργαζονται, διορθώνουνι και
παρακολουθούν CSS, HTML και
JavaScript.
 Βοηθούν στο debugging.
 Τα πιο διάσημα είναι το Mozilla
Firefox Firebug και τα Google
Chrome DevTools.
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Εργαλεία εξερεύνησης του DOM [2/2]
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Εργαλεία ανάπτυξης HTML και CSS
Προσφέρουν εύκολη πρόσβαση και έτοιμο περιβάλλον για
front end web development. Τα πιο σημαντικά είναι:






Codepen.io
CSSDesk
JS Bin
JSFiddle
Dabblet
D3 Playground
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Codepen.io [1/6]
 Δημιουργήστε λογαριασμό.
 Δημιουργήστε καινούργιο codepen.
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Codepen.io [2/6]
 To codepen έρχεται με έτοιμα HTML, CSS και Javascript
panels. Μπορείτε να αφαιρέσετε το javascript κάνοντας
minimize JS Editor.
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Codepen.io [3/6]
 Γράφοντας απλά ένα Hello World, και χρωματίζοντας το
κόκκινο με CSS, το codepen θα το κάνει render αμέσως.
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Codepen.io [4/6]
 Κάντε το Export σε .zip μορφή.
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Codepen.io [5/6]
index.html: Το
default αρχείο
HTML που
εμφανίζεται σε ένα
web application
όταν ένας
χρήστης
επικαλείται την
εφαρμογή Web
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Codepen.io [6/6]
 Κάντε ένα καινούργιο repository «playground» στο Github
και ανεβάστε τον κώδικα σας.
 Στο AWS Instance σας με το LAMP εγκατεστημένο, κάντε
pull το repository μέσα στο /var/www/html/
 Μέσα στον φυλλομετρητή εκτελέστε <public
DNS>/playgrounds.
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Έλεγχος απόδοσης της σελίδας σας.
 Μπορεί να γίνει με διάφορα εργαλεία όπως GTMetrix
 Έλεγχος του Website’s Speed
 Έλεγχος Load του Site
Τρόποι για να κάνετε optimizations
 Optimize εικόνες
 Minify CSS και JS
 CDN Latency Reduction
 Caching
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Άσκηση: Traveler Times Newspaper [1/2]
Στόχος της άσκησης είναι η δημιουργία της πιο κάτω σελίδας:
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016
Άσκηση: Traveler Times Newspaper [2/2]
 Μέσω της επιθυμητής εμφάνισης να δημιουργήσετε το
HTML Structure της σελίδας.
 Με την εισαγωγή του CSS να την φέρεται στη ζωή.
 Θα χρησιμοποιήσουμε τα εξής html tags: p, em, h1, h2,
h3, br, img, ul, ol, li, a, q και τους ειδικούς χαρακτήρες €
και é.
 Όταν τελειώσετε ανεβάστε την επίσης στο AWS Instance.
Σελίδα βρίσκεται εδώ.
ΕΠΛ425 - Τεχνολογίες Διαδικτύου | Χειμερινό Εξάμηνο 2016