Προγραμματισμός Διαδικτυακών εφαρμογών

Expand – Collapse

  • Διαδικτυακές εφαρμογές

    • Client – Server αρχιτεκτονική

      • Μεταξύ δύο υπολογιστών Α και Β, ο Α θεωρείται ο πελάτης και ο Β θεωρείται ο εξυπηρετητής.
        • Τεχνολογίες που χρησιμοποιούνται
          • html
          • javascript
          • php
          • Έτοιμες λύσεις
            • Content Management Systems

              Connector

            • WordPress
              • Δωρέαν εφαρμογή
              • Τεχνολογίες
                • html
                • javascript
                • php
                • mysql
        • Σχήμα
      • Πρωτόκολλο
        • το πρωτόκολλο HTTP
      • Πελάτης
        • Δημιουργεί μια αίτηση
        • Χρησιμοποιεί διεπαφή για να δημιουργήσει την αίτηση
          • Σελίδα html που περιέχει φόρμα
      • Εξυπηρετητής
        • Απαντά στις αιτήσεις των πελατών
        • Δεν χρειάζεται διεπαφή
        • Απαντά με σελίδες html

    • Σχεδίαση Διαδικτυακής εφαρμογής

      • Σχεδίαση αρχιτεκτονικής
      • Σχεδίαση του γραφικού περιβάλλοντος
      • Σχεδίαση των μονάδων του συστήματος
      • Σχεδίαση δεδομένων που απαιτούνται

    • Αισθητική σχεδίαση εφαρμογής

      Κανόνες NIelsen

        1. Αντιστοιχία του συστήματος και του πραγματικού κόμου
        2. Ορατή η κατάσταση του συστήματος
        3. Έλεγχος και ελευθερία του χρήστη
        4. Συμμόρφωση με πρότυπα
        5. Πρόληψη σφαλμάτων
        6. Αναγνώριση αντί της ενθύμισης
        7. Μνιμαλιστική σχεδίαση
        8. Αναφορά σφαλμάτων

    • HTML

      • Εργαλεία
        • Editor για δημιουργία html
        • Mozilla firefox ή google chrome για εμφάνιση
        • Web server για εξυπηρετητή
        • Ftp client για μεταφορά αρχείων στον εξυπηρετητή
      • Σύνθεση HTML σελίδας
        • Οι εντολές είναι σε ζεύγη
        • Οι εντολές γράφονται μέσα σε < και >
          • Πχ <html>
        • Το δεύτερο κομμάτι της εντολής γράφεται μπροστά με το χαρακτήρα /
          • Π.χ </html>
        • Κάθε σελίδα ξεκινά με και τελειώνει με την εντολή <html>
          • Δηλαδή <html> </htmll>
        • Μέσα στις εντολές μπορούμε να προσθέσουμε περισσότερες πληροφορίες
          • ΓΙα εμφάνιση ελληνικών
            • lang=”el” μέσα στην εντολή <html>
            • Για html 5
              • <meta charset=”UTF-8″>
            • Αποθήκευση του αρχείου html σε μορφή UTF-8
      • Βασικές ετικέτες
        • Αρχή και τέλος
          • _ <html> … </html>
          • Περιέχει την κεφαλή και το σώμα της σελίδας
        • Κεφαλή σελίδας
          • _ <head> …. </head>
          • Περιέχει τον τίτλο της σελίδας
          • Περιέχει κώδικα σε javascript της σελίδας
        • Τίτλος
          • Π.χ. <title> τίτλος </title>
        • Σώμα κειμένου
          • —> <body> κέιμενο </body>
        • Σύνδεσμοι
          • Π.χ <a href=”https://www.w3schools.com/html/”>
            Visit our HTML tutorial
            </a>
        • Εικόνα
          • Π.χ <img src=”pic_mountain.jpg” >
          • στο src μπορεί να προστεθεί εικόνα με http link
        • Λίστα
          • Χωρίς αρίθμηση
            • Π.χ <ul> </ul>
            • Για κάθε στοιχείο της λίστας:
              <li> …. </li>
          • Με αρίθμηση
            • Π.χ <ol> </ol>
        • Πίνακες
          • Αρχή και τέλος: <table> … </table>
          • Γραμμή με <tr> …. </tr>
          • Κελί πίνακα με <td> … </td>
        • Φόρμες
          • _ <form action=”link ιστοσελίδας που καλούμε”> …. </form>
          • Η νέα σελίδα καλείται με το πάτημα του κουμπιού της φόρμας
          • _ <input type=”submit” value=”Submit”>

          • Αντικείμενα Διεπαφών

            • Κουμπιά εντολών
              • button
                • <button
                  type=”button” onclick=”alert(‘HELLO’)”> patise me
                  </button>
            • Πλαίσια κειμένου
              • text input
                • <input type=”text” name=”onoma” >
            • Κουμπιά επιλογών
              • <input type=”checkbox” name= “epilogi1″ value=”timi1” > diploma aytokinitou
            • Ράδιο-κουμπιά εντολών
              • radio button
                • <input type=”radio” name=”s” value=”male” checked> Andras
                  <input type=”radio” name=”s” value=”female” checked> Gynaika
            • Λίστα επιλογών
              • select
                • <select>
                  <option value=”1″ > ena</option>
                  <option value=”2″ > dyo </option>
                  </select>
            • Περιοχή κειμένου
              • textarea
                • <textarea name=”hello” rows=”10″ cols=”30″>
                  this is a text message
                  </textarea>
            • Πλαίσια
              • fieldset
            • Λίστες δεδομένων
              • datalist