HTML5
Semantic HTML5 με σωστή ιεραρχία headings, landmarks και accessible markup.
01 / PROJECT BRIEF
Τι είναι αυτό το project;
Οι Ορίζοντες Παπουτσή δημιουργούν μια νέα διαδικτυακή παρουσία και αναζητούν εθελοντή προγραμματιστή για την υλοποίησή της σε HTML, CSS και JavaScript.
Ο στόχος: να δημιουργηθεί ένα σύγχρονο, γρήγορο, προσβάσιμο και responsive website που παρουσιάζει με καθαρό τρόπο το έργο του Ορίζοντες Παπουτσή και τις πληροφορίες που χρειάζεται ο επισκέπτης.
Σημαντικό: Δεν χρειάζεται να αποφασίσεις μόνος σου όλο το περιεχόμενο ή την ταυτότητα του έργου. Ο developer αναλαμβάνει την τεχνική υλοποίηση και συνεργάζεται με τους υπεύθυνους για το περιεχόμενο, τις εικόνες και τις τελικές αποφάσεις.
02 / GOAL
Τι πρέπει να πετύχουμε;
Το website πρέπει να λειτουργεί ως η επίσημη ψηφιακή παρουσία των Οριζόντων Παπουτσή και να δίνει στον επισκέπτη γρήγορα τις βασικές πληροφορίες.
- ✓ Να εξηγεί ξεκάθαρα ποιοι είναι οι Ορίζοντες Παπουτσή.
- ✓ Να παρουσιάζει το έργο και τη δράση του οργανισμού.
- ✓ Να είναι εύκολο να βρει κάποιος πληροφορίες επικοινωνίας.
- ✓ Να λειτουργεί άψογα σε κινητό, tablet και desktop.
- ✓ Να φορτώνει γρήγορα ακόμη και σε αργές συνδέσεις.
- ✓ Να είναι προσβάσιμο σε όσο το δυνατόν περισσότερους χρήστες.
- ✓ Να μπορεί να συντηρηθεί εύκολα από άλλον developer.
03 / REQUIREMENTS
Τεχνικές απαιτήσεις.
Η πρώτη έκδοση πρέπει να παραμείνει απλή. Δεν υπάρχει ανάγκη για framework ή σύνθετο build system.
CSS3
Modern CSS, responsive layouts, variables, animations και media queries.
Vanilla JavaScript
JavaScript χωρίς framework όπου δεν υπάρχει πραγματική ανάγκη για framework.
Single-file deployment
Η βασική landing page πρέπει να μπορεί να λειτουργεί από ένα μόνο index.html.
Responsive
Mobile-first συμπεριφορά και σωστή εμφάνιση σε όλες τις βασικές διαστάσεις οθόνης.
Performance
Ελάχιστες εξαρτήσεις, βελτιστοποιημένες εικόνες και όσο το δυνατόν μικρότερο payload.
04 / CONTENT
Τι περιεχόμενο θα χρειαστεί;
Το τελικό περιεχόμενο θα δοθεί/επιβεβαιωθεί από τους υπεύθυνους του οργανισμού. Ο developer δεν πρέπει να επινοήσει πληροφορίες που αφορούν τον οργανισμό.
| Section | Περιεχόμενο | Κατάσταση |
|---|---|---|
| Hero | Τίτλος, σύντομη περιγραφή, CTA | Να οριστεί |
| About | Ποιοι είναι οι Ορίζοντες Παπουτσή | Να δοθεί |
| Mission | Στόχος / όραμα / δράση | Να δοθεί |
| Projects | Δράσεις ή έργα | Να δοθεί |
| Gallery | Φωτογραφίες, εφόσον απαιτούνται | Να αποφασιστεί |
| Contact | Email / social / άλλοι τρόποι επικοινωνίας | Να δοθεί |
Κανόνας: Όταν λείπει μια πληροφορία, χρησιμοποίησε placeholder και σημείωσέ την ως TODO. Μην δημιουργείς fake information.
05 / DESIGN
Design guidelines.
Η αισθητική πρέπει να είναι σύγχρονη, καθαρή και φιλική, χωρίς να επισκιάζει το περιεχόμενο και την ταυτότητα του οργανισμού.
Typography
Χρησιμοποίησε ευανάγνωστη sans-serif γραμματοσειρά με ξεκάθαρη ιεραρχία τίτλων και κειμένου.
Color
Τα χρώματα πρέπει να προέρχονται από την οπτική ταυτότητα των Οριζόντων Παπουτσή ή να εγκριθούν από τους υπεύθυνους.
Layout
Άφθονο whitespace, ξεκάθαρα sections και περιεχόμενο που μπορεί να σαρωθεί εύκολα.
Animation
Διακριτικά animations μόνο όταν βελτιώνουν την εμπειρία. Όχι animation για χάρη του animation.
Μην κλειδώσεις το design πριν επιβεβαιωθεί. Αν δεν υπάρχει εγκεκριμένο design, δημιούργησε πρώτα ένα απλό prototype και ζήτησε feedback.
06 / STRUCTURE
Προτεινόμενη δομή.
Το project πρέπει να παραμείνει εύκολο στην κατανόηση και στη συντήρηση.
project/
├──
index.html
# βασικό αρχείο
├──
assets/
│ ├──
images/
│ ├──
icons/
│ └──
fonts/
└──
README.md
# οδηγίες project
Single-file requirement: Όπου είναι πρακτικό, το HTML, CSS και JavaScript της landing page πρέπει να βρίσκονται μέσα στο index.html. Εξωτερικά assets επιτρέπονται μόνο όταν υπάρχει λόγος.
index.html
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Ορίζοντες Παπουτσή</title>
<style>
/* CSS */
</style>
</head>
<body>
<!-- Website content -->
<script>
/* JavaScript */
</script>
</body>
</html>
07 / TECHNICAL
Technical checklist.
Accessibility
Semantic elements, labels, alt text, keyboard navigation, visible focus states και επαρκές color contrast.
SEO
Unique title, meta description, semantic headings, canonical URL όπου απαιτείται και σωστό social sharing metadata.
Images
Web-optimized formats, σωστές διαστάσεις, lazy loading όπου χρειάζεται και descriptive alt text.
JavaScript
Να μην εξαρτάται η βασική πληροφορία της σελίδας από JavaScript.
Browser support
Έλεγχος σε σύγχρονες εκδόσεις Chrome, Firefox, Safari και Edge.
Security
Καμία αποθήκευση secrets μέσα στο frontend. Όχι API keys ή credentials στο repository.
08 / WORKFLOW
Πώς ξεκινάς;
Αν είσαι ο εθελοντής developer, αυτή είναι η προτεινόμενη σειρά εργασίας.
01
Διάβασε ολόκληρο το brief
Μην ξεκινήσεις coding πριν κατανοήσεις τον στόχο και τις απαιτήσεις.
02
Επιβεβαίωσε το περιεχόμενο
Συγκέντρωσε τα κείμενα, λογότυπα, εικόνες, links και στοιχεία επικοινωνίας.
03
Σχεδίασε το βασικό layout
Πριν από το τελικό CSS, συμφώνησε τη δομή της σελίδας.
04
Υλοποίησε το HTML
Ξεκίνα από semantic markup και σωστή πληροφοριακή ιεραρχία.
05
Πρόσθεσε CSS
Mobile-first responsive design, typography, colors και components.
06
Πρόσθεσε JavaScript
Μόνο για interactions που πραγματικά χρειάζονται.
07
Test
Desktop, mobile, accessibility, links, images, performance και διαφορετικούς browsers.
08
Review & deploy
Παρουσίασε την τελική έκδοση για έγκριση πριν γίνει production.
09 / TESTING
Πριν πεις «έτοιμο».
Το website δεν θεωρείται ολοκληρωμένο επειδή «φαίνεται σωστό» στον υπολογιστή του developer.
- ✓ Έλεγχος σε mobile viewport.
- ✓ Έλεγχος σε tablet viewport.
- ✓ Έλεγχος σε desktop.
- ✓ Όλα τα links λειτουργούν.
- ✓ Όλες οι εικόνες εμφανίζονται σωστά.
- ✓ Δεν υπάρχουν console errors.
- ✓ Το keyboard navigation λειτουργεί.
- ✓ Τα focus states είναι ορατά.
- ✓ Το website λειτουργεί χωρίς JavaScript όπου είναι δυνατό.
- ✓ Δεν υπάρχουν secrets ή credentials στον κώδικα.
10 / DEFINITION OF DONE
Πότε θεωρείται ολοκληρωμένο;
✓ Definition of Done
- ✓ Το περιεχόμενο έχει εγκριθεί.
- ✓ Το design έχει εγκριθεί.
- ✓ Η σελίδα είναι responsive.
- ✓ Η HTML είναι semantic και valid.
- ✓ Δεν υπάρχουν εμφανή accessibility προβλήματα.
- ✓ Δεν υπάρχουν console errors.
- ✓ Όλα τα CTA και links λειτουργούν.
- ✓ Το website έχει ελεγχθεί σε mobile και desktop.
- ✓ Τα assets είναι βελτιστοποιημένα.
- ✓ Το repository περιέχει καθαρές οδηγίες.
- ✓ Η τελική έκδοση έχει εγκριθεί από τους υπεύθυνους.
11 / GIT
Κανόνες συνεργασίας.
Αν το project χρησιμοποιεί GitHub, κράτησε το workflow απλό ώστε να μπορούν να συνεργαστούν και άλλοι εθελοντές.
suggested workflow
# 1. Clone
git clone <repository>
# 2. Δημιούργησε branch
git checkout -b feature/hero-section
# 3. Κάνε τις αλλαγές
# 4. Test
# 5. Commit
git commit -m "feat: add hero section"
# 6. Push
git push origin feature/hero-section
# 7. Pull Request
# Περιέγραψε τι άλλαξες και γιατί.Μικρά commits, καθαρά branches, ξεκάθαρα pull requests. Στόχος είναι ο επόμενος εθελοντής να μπορεί να καταλάβει τι έγινε χωρίς να χρειάζεται να ρωτήσει τον προηγούμενο.
12 / CONTACT
Έτοιμος να ξεκινήσεις;
Πριν ξεκινήσεις την υλοποίηση, επικοινώνησε με τους υπεύθυνους των Οριζόντων Παπουτσή ώστε να επιβεβαιωθούν το περιεχόμενο, το design, το repository και ο τρόπος συνεργασίας.