Εισαγωγή Στη Γλώσσα Υπερκείμενου HTML 2

Εισαγωγή στη γλώσσα υπερκείμενου HTML

2

Client – Server μοντέλο στο Web (1)

Requests

ResponsesClient Server

• Client: Συνήθως ο web browser (IE, Mozilla Firefox κλπ)• Server: Ένας web server (Apache, IIS κλπ)

• Ο τρόπος επικοινωνίας μεταξύ client και server καθορίζεταιαπό το πρωτόκολλο HTTP (Hypertext Transfer Protocol)

3

Client – Server μοντέλο στο Web (2) – “3 TIER MODEL”

Client Server

Requests

Responses

Data

DataWarehouse

• Data Warehouse: Κάποιο DBMS (SQL, XML κλπ)• Ο server πριν απαντήσει, χρειάζεται να πάρει δεδομένα απότο DMBS, να τα επεξεργαστεί, τα μορφοποιεί κατάλληλα καιστέλνει στο client

ΑναπαράστασηΔεδομένων

Επεξεργασία Αποθήκευση

Εισαγωγικά – Βασικές έννοιες (1/2)

Η δομή του WWW αποτελείται από το υπερκείμενο, δηλαδή ένα αρχείο που, εκτός από απλό κείμενο, περιέχει υπερσυνδέσεις με τους οποίους μπορεί κανείς να μεταβεί ανάμεσα σε διάφορα άλλα έγγραφα.

Η HTML είναι μια απλή γλώσσα που χρησιμοποιείται για τη δημιουργία εγγράφων υπερκειμένου.

Εισαγωγικά – Βασικές έννοιες (1/2)

Αποτελείται από:ένα ορατό τμήμα κειμένου, το οποίο είναι συνήθως υπογραμμισμένο.

ένα μη ορατό μέρος το οποίο περιέχει πληροφορία για το πού (διεύθυνση, τμήμα κειμένου) θα βρεθεί ο πόρος πληροφορίας (δεδομένα, φωνή, video) που αντιστοιχεί στο υπογραμμισμένο κείμενο.

6

HTML

• HyperText Markup Language• Είναι η γλώσσα που καταλαβαίνουν οι

web browsers για την αναπαράσταση των δεδομένων• Βασικό χαρακτηριστικό: η διασύνδεση με αλλά HTML

έγγραφα

7

HTML

Κείμενο 1

Κείμενο 2 Κείμενο 3

Κείμενο 4 Κείμενο 5

Hyper Text Markup Language (HTML) Ιστορικά …

Ξεκίνησε το 1990 πρώτη τυποποίηση σαν SGML DTD το 1992 Επηρεάστηκε από γλώσσες παρουσίασης (postscript)

HTML v4.0 80 περίπου στοιχεία Υποστηρίζει τη χρήση φύλλων στυλ (Style Sheets) Πρακτικά δίνει τη δυνατότητα για ορισμό νέων στοιχείων

αφού εισάγει το γνώρισμα CLASS σε κάθε στοιχείο <author>

<name> Κώστας Αλεξίου </name>

<email> [email protected] </email>

</author>

SGML τεκμήριο

<DIV CLASS = author>

<DIV CLASS = name> Κώστας Αλεξίου </DIV>

<DIV CLASS = email> [email protected] </DIV>

</DIV>

HTML τεκμήριο

9

HTML – Σύνταξη

• Βασικό δομικό στοιχείο η ετικέτα (tag)• Κάθε διακριτικό της HTML περικλείεται σε <>• Τα περισσότερα διακριτικά οµαδοποιούνται σε ζεύγη. Το πρώτο

δείχνει την αρχή και το δεύτερο το τέλος επίδρασης του συγκεκριµένου διακριτικού.

• Πχ <HTML>…</HTML>, <IMG />

Σχόλια:

10

Tag Attributes

• Δίνουμε επιπλέον χαρακτηριστικά σε κάποιο tag.• Το γράφουμε μέσα στον ορισμό του tag• < … όνομα_attribute=“τιμή” …>• Πχ <BODY bgcolor="#FFFFFF" >…

Tags and Attributes

Tag (ετικέτα) Attribute (απόδοση χαρακτηριστικού στην ετικέτα)

Άννα Γεωργιάδου

Elements- Έννοιες

Περιέχουν Αρχή – Τέλος Ανοίγουν – Κλείνουν Μπορούν να ενσωματωθούν το ένα στο άλλο


Elements- Παράδειγμα

Κώδικας: Ο καιρός είναι

<b><i>καταπληκτικός</i></b>σήμερα

Εμφάνιση: Ο καιρός είναι καταπληκτικός σήμερα


Attributes

Τα attributes αποδίδουν χαρακτηριστικά στις ετικέτες, δηλαδή διαφοροποιούν ή επεκτείνουν την ετικέτα

Σύνταξη: <element attribute=“value”>Διαφοροποιημένο κείμενο</element>

Παράδειγμα: <font color=“red”>Κόκκινη γραμματοσειρά</font>


Βασικά τμήματα μιας HTML σελίδας

HTML

Λίστες(Αριθμημένες και μη)

Επικεφαλίδες

Παράγραφοι

Εικόνες

Συνδέσμους

Πίνακες

Φόρμες

16

Δομή σελίδας HTML

<HTML><HEAD>

<TITLE>Ο τίτλος του κειμένου</TITLE>

</HEAD><BODY>

Το κυρίως κείμενο</BODY>

</HTML>

Δομή/μορφοποίησητης HTML (1/8)

Ένα HTML έγγραφο αποτελείται από δυο βασικές ενότητες, τις HEAD και BODY, καθώς και κάποιες πληροφορίες για την έκδοση της HTML.

HeaderΟρίζεται από το <head> και περιγράφει το HTML

αρχείο <title>: το πιο συχνά χρησιμοποιούμενο και το πλέον

απαραίτητο <base>: ορίζει την κύρια τοποθεσία του αρχείου και

χρησιμεύει ως αναφορά για όλα τα pathnames και links

<link>: ορίζει τη σχέση του παρόντος αρχείου με ένα άλλο αρχείο

<meta>: παρέχει πληροφορίες για το αρχείο, όπως λέξεις-κλειδιά

<script>: προστίθεται αν θέλουμε να χρησιμοποιήσουμε JavaScript, VBScript

<style>: για ενσωμάτωση CSS (Cascading Style Sheets)

Body

Ορίζεται από την ετικέτα <body> και σχεδιάστηκε για να οριοθετεί το κυρίως σώμα του HTML αρχείου.

<body bgcolor=“color” text=“color” link=“color” vlink=“color” alink=“color”>

<body background=“background.gif”> <body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>


Δημιουργία επικεφαλίδων ενοτήτων: <hx χαρακτηριστικά>κείμενο</hx>x: Με τιμές από 1 έως 6. Με h1 δηλώνεται η σημαντικότερη/μεγαλύτερη επικεφαλίδα.

χαρακτηριστικά: Επιπλέον στοιχεία για την εμφάνιση.

κείμενο: Αυτό που φαίνεται στον browser.


Δημιουργία υπερσυνδέσμου: <a href=“Διεύθυνση”>κείμενο</a>Διεύθυνση (το κρυφό μέρος του

υπερσυνδέσμου):http://…. [χρήση: απόλυτη σύνδεση ιστοσελίδας]file:///C:/... [χρήση: απόλυτη σύνδεση αρχείου από τον σκληρό

δίσκο]../../... [χρήση: σχετική σύνδεση]

Περιεχόμενο: το φανερό μέρος του υπερσυνδέσμου.

22

Δομή/μορφοποίηση της HTML (4/8)Υπερσύνδεσμος – Το tag <a> (1)<A HREF=“adrress”>Κείμενο</Α>• adrress:

• Αναφορά σε αρχείο στο τοπικό σύστημα• Σχετικά: “./index.html”, “../pics/hello.html”• Απόλυτα: “/var/www/mysite/index.html”, “C:\program files\...” (BAD

PRACTICE)• URL

• “http://www.nurs.uoa.gr/”

23

Δομή/μορφοποίηση της HTML (5/8)Υπερσύνδεσμος – Το tag <a> (2)• Θέλω να πάω σε συγκεκριμένο σημείο μέσα στο

έγγραφο• Ονομάζω το σημείο

• <a name=“titles” >Titles</a>• Φτιάχνω το link προς το σημείο

• <a href=“#titles”>Πηγαίνετε στους Τίτλους</a>• <a href=“htpp://mysite.gr/conv.html#titles”>…

• Attribute target: το link θα ανοίξει σε νέο παράθυρο• <a … target="_blank" >

• Attribute target: το link θα ανοίξει στο ίδιο παράθυρο• <a … target="_self" >


Έντονο κείμενο: <b χαρακτηριστικά>κείμενο</b>

Πλάγιο κείμενο: <i χαρακτηριστικά>κείμενο</i>

Υπογραμμισμένο κείμενο: <u χαρακτηριστικά>κείμενο</u>

Δομή/μορφοποίηση της HTML (5/6)

Επισημάνσεις πάνω στα τρία παραπάνω είδη μορφοποίησης:

Ο κώδικας θα πρέπει να είναι συμμετρικός, δηλαδή κάθε σετ ετικετών να είναι τοποθετημένο μέσα στο επόμενο σετ ετικετών: <b><i><u>κείμενο</u></i></b>. Δεν έχει σημασία το ποιο σετ ετικετών βρίσκεται στο εξωτερικό των υπόλοιπων.


Παράγραφοι: <p χαρακτηριστικά>κείμενο</p>

Επισημάνσεις:Μια ετικέτα παραγράφου

ισοδυναμεί με δύο αλλαγές γραμμής.

Δεν έχει νόημα η σύνταξη <p>…<p>…</p>…</p> σε μια γραμμή.

Το </p> είναι προαιρετικό, αλλά συνίσταται η χρήση του.

27

Απλό Παράδειγμα

<HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-7“ /><TITLE>Παράδειγμα σελίδας HTML </TITLE>

</HEAD><BODY><H1>Πολύ Απλό Παράδειγμα</H1><P>1η Παράγραφος</P><P>2η Παράγραφος</P>

</BODY></HTML>

28

Τίτλοςσελίδας

Παρουσίαση

29

Tags Μορφοποίησης<h1>Επικεφαλίδα 1</h1>

<h2>Επικεφαλίδα 2</h2>





<b>Έντονα γράμματα</b>

<i>Πλάγια γράμματα</i><u>Υπογραμμισμένα γράμματα</u>

<br>Αλλαγή γραμμής

<p>Νέα Παράγραφος</p><center>Στοίχιση στο κέντρο της

σελίδας</center>

Σελίδα HTML (3)

Kώδικας σελίδας HTML (3)<html>

<head><title>Ο τίτλος της τρίτης HTML σελίδας</title>

</head><body><h2>Η τρίτη HTML σελίδα</h2><p><table border=0><tr><td>&nbsp</td></tr><tr><td><img src="/docs/tim.jpg" alt="Tim Berners-Lee"></td></tr><tr><td><font size=4>O Tim Berners-Lee, Εφευρέτης του Web και Διευθυντής του <a href="http://www.w3.org" target="new">World Wide Web Consortium</a></font></td></tr></table></body></html>

Λίστες σε HTML (1/2)

Δημιουργία αριθμημένης λίστας: <ol χαρακτηριστικά>κείμενο</οl>. Όπου κείμενο έχουμε: <li>στοιχείο λίστας</li>. Δημιουργία λίστας με κουκκίδες: <ul χαρακτηριστικά>κείμενο</ul>.

Όπου κείμενο έχουμε: <li>στοιχείο λίστας</li>.

Λίστες σε HTML (2/2) Επισημάνσεις:

Για την δημιουργία μιας λίστας χρησιμοποιούμε δύο ετικέτες.

(ol και li ή ul και li) Το </li> είναι προαιρετικό. Υπάρχει η δυνατότητα για λίστα

μέσα σε λίστα. Όποιο στοιχείο δεν έχει li δεν είναι

αριθμημένο/δεν έχει κουκκίδα.

34

Λίστες (example 1)

<ul> <li>item1</li> <li>item2</li></ul>

<ul type="circle"> <li>item1</li> <li>item2</li></ul>

<ul type="square"> <li>item1</li> <li>item2</li></ul>

35

Λίστες (example 2)<ol> <li>Λίστα με </li> <li>Αρίθμηση</li></ol>

<dl> <dt> Πρώτο θέµα <dd> Ορισµός 1ου θέµατος <dt> Δεύτερο θέµα <dd> Ορισµός 2ου θέµατος</dl>

Ασκηση (2)

Παράδειγμα κώδικα άσκηση (2)<html>

<head><title>Ο τίτλος της δεύτερης HTML σελίδας</title>

</head><body>

<center><h2>Η δεύτερη HTML σελίδα</h2><p>

</center><b><i>Παράδειγμα unordered list</i></b>

<ul><li>Δευτέρα</li><li>Τρίτη</li><li>Τετάρτη</li><li>Πέμπτη</li><li>Παρασκευή</li></ul>

<b><i>Παράδειγμα ordered list</i></b><ol><li>Γνωστική Ψυχολογία </li><li>Ψυχολογία του Κυβερνοχώρου</li><li>Κοινωνιολογία του Κυβερνοχώρου</li><li>Εισαγωγικά Θέματα WWW</li><li>Δυνητική Πραγματικότητα - Βασικές Αρχές</li></ol>

<b><i>Παράδειγμα definition list</i></b><p><dt>HTML

<dd>Hypertext Mark-up Language</dd></dt>

</body></html>

Χρώματα σε HTML (1/2) Σύνταξη: <body bgcolor=“τιμή

χρώματος”>τιμή χρώματος: υπάρχουν δύο τρόποι:

κατά όνομα - 136 χρώματα (τα ονόματα υπάρχουν στο http://www.molly.com/molly/webdesign/136_colors.html)

δεκαεξαδικό χρώμα: α) μετατρέποντας ένα RGB σε δεκαεξαδικό χρώμα ή β) χρησιμοποιώντας την παλέτα των 216 ασφαλών χρωμάτων (http://www.molly.com/molly/webdesign/colorchart.html)

http://www.molly.com/molly/webdesign/136_colors.html

http://www.molly.com/molly/webdesign/136_colors.html

Χρώματα σε HTML (2/2)

Προεπιλεγμένο χρώμα κειμένου: <body text =“τιμή χρώματος”>

Χρώμα για συγκεκριμένο τμήμα κειμένου: <font color=“τιμή χρώματος”>κείμενο</font>

40

Εικόνες

• Tag <img>• <IMG SRC=“διαδρομή_προς_την_εικόνα” HEIGHT=“100” WIDTH=“50” align=“left” alt=“text” />

Δείτε• http://www.w3schools.com/html/html_images.asp

Εικόνες σε HTML (1/5) Προσθήκη εικόνας σε μια σελίδα: <img

χαρακτηριστικά>. Όπου χαρακτηριστικά είναι: src=“διεύθυνση_εικόνας/όνομα_εικόνας”width=“πλάτος_εικόνας _σε pixels” height=“ύψος_εικόνας_σε pixels”alt=“περιγραφή_εικόνας”align=“τιμή_στοίχισης” [τιμές στοίχισης

είναι: left, right, center]

Εικόνες σε HTML (2/5) Επισημάνσεις:

Δεν υπάρχει </img>.Οι εικόνες πρέπει να είναι

βελτιστοποιημένες για χρήση στο Web έτσι ώστε να διασφαλίζεται η ομαλή και γρήγορη φόρτωσή τους στον browser.

Είναι πολύ σημαντικό να χρησιμοποιείτε το ακριβές πλάτος κι ύψος μιας εικόνας.

Εικόνες σε HTML (3/5) Εισαγωγή υπερσυνδέσμου σε εικόνα:

<a href=“διεύθυνση σελίδας”><img src χαρακτηριστικά></a>.

Όμως, πολλοί browsers, για να δείξουν ότι μια εικόνα έχει έναν υπερσυνδέσμο, βάζουν ένα περίγραμμα γύρω από την εικόνα. Αυτό μπορεί να βγει αν γραφτεί το border=“0” ανάμεσα στα άλλα χαρακτηριστικά της εικόνας.

Εικόνες σε HTML (4/5)Εισαγωγή εικόνας στο φόντο: <body background=“διεύθυνση_εικόνας/

όνομα_εικόνας”> Παράδειγμα εισαγωγής υπερσυνδέσμου εικόνας χωρίς περίγραμμα:

Εικόνες σε HTML (5/5) Παράδειγμα: Εισαγάγουμε μία εικόνα, με ύψος 3,5

εκ. και πλάτος 4,5 εκ. στοιχισμένη στο κέντρο χωρίς περίγραμμα. Ο κώδικας θα είναι ο έξης:

<a href=http://nurs.uos.gr>

<img src=“eifel_tower.jpg” width=“4,5” height=“3,5” align=“center” border=“0”>

</a>

46

Πίνακες

Πίνακας: <TABLE border=‘1’>

<TR> <!– νέα γραμμή --> <TD> Περιεχόμενα κελιού 1,1 </TD> <TD> Περιεχόμενα κελιού 1,2 </TD></TR> <!- κλείσιμο γραμμής -->

<TR> <TD> Περιεχόμενα κελιού 2,1 </TD> <TD> Περιεχόμενα κελιού 2,2 </TD></TR>

</TABLE>

Δείτεhttp://www.w3schools.com/html/html_tables.asp

http://www.w3schools.com/html/html_tables.asp

Πίνακες σε HTML (1/2)

Για να δημιουργηθεί ένας πίνακας, χρησιμοποιούνται τρεις ετικέτες:Δημιουργία πίνακα: <table

χαρακτηριστικά>κείμενο</table>

Καθορισμός μιας γραμμής: <tr χαρακτηριστικά>κείμενο</tr>

Καθορισμός μιας στήλης: <td χαρακτηριστικά>κείμενο</td>

Πίνακες σε HTML (2/2) Ένας πίνακας με μια γραμμή και μια

στήλη θα είχε τον έξης κώδικα: <table> <tr> <td></td> </tr> </table> Προσθήκη χρώματος στο φόντο του

κελιού: <td bgcolor=“τιμή χρώματος”></td>

HTML Table Παράδειγμα

This code: Will appear like this:

<TABLE><TR>

<TD>Name</TD><TD>Grade</TD>

</TR><TR>

<TD>Jane Smith</TD>

<TD>Senior</TD>

</TR></TABLE>

Name Grade

Jane Smith Senior

TR & TD Attributes

Align – left, right, or center Valign – vertical alignment – top, middle, or bottom BGCOLOR – background color Width – in pixels or percentage of total space available Height – in pixels or percentage of total space available Examples:<TR ALIGN=”center” VALIGN=”middle” BGCOLOR=”#336677” WIDTH=”50%”><TD ALIGN=”Left” VALIGN=”bottom” BGCOLOR=”#FFFFFF” WIDTH=”25%”>

51

Πίνακες<table width="100%" border="2" cellpadding="12" cellspacing="5" bordercolor="#ECE9D8"> <tr> <td rowspan="2">hello</td> <td width="20%"> </td> <td> </td> </tr> <tr> <td>hello</td> <td> </td> </tr> <tr> <td> </td> <td colspan="2">hello</td> </tr></table>

52

Άλλα στοιχεία της HTML • Οριζόντια γραμμή:

<hr>• Στοίχιση κειμένου:

<pre>Το κείμενο θα εμφανιστεί όπωςείναι στοιχισμένο.</pre>

• Ειδικοί χαρακτήρες: > > < < & & “ " (κενό)

53

Πλαίσια<FRAMESET COLS="*,*"> <FRAME SRC="Cell1.html" NAME="left"> <FRAME SRC="Cell2.html" NAME="right">

</FRAMESET><NOFRAMES><P>This web browser does not support frames.</P>

</NOFRAMES>

54

Παράδειγμα

55

Φόρμες

Χρησιμοποιούνται για την αποστολή πληροφορίας από το client προς τον server.

Tag <form> (και </form>) Attributes

Action: ορίζει σε ποια σελίδα θέλουμε να στείλουμε τα δεδομένα Method: ποια μέθοδο του πρωτοκόλλου HTTP θα χρησιμοποιήσουμε για

την αποστολή των δεδομένων - GET ή POST (θα αναλυθεί παρακάτω) <form action="myAction.php" method="get">

Μέσα στη φόρμα βάζουμε πεδία, όπως textboxes με το tag <input>

56

Στοιχεία φόρμας

input text password checkbox radio button submit reset

textarea select

multiple option

57

Φόρμες - Input text:

<input type=“text name=“myTextBox” value=“test text”>

password: <input type=“password” name=“myPasswd”>

checkbox: <input type=“checkbox” name=“myCheckBox” value=“yes”>

radio: <input type=“radio” name=“myRadio” value=“yes”><input type=“radio” name=“myRadio” value=“no”>

58

Φόρμες – Input (2) button:

<input type=“button” name=“MyButton” value=“click me”>

submit: <input type=“submit” name=“MySubmit” value=“submit”>

reset: <input type=“submit” name=“MyReset” value=“reset”>

59

Φόρμες – Άλλα στοιχεία textarea:

<textarea name=“myTextarea”>Αυτό είναι ένα πεδίο Textarea</textarea>

select: <select name=“mySelect”>

<option value=“1”>option 1</option><option value=“2”>option 2</option>

</select>

select (πολλαπλές τιμές): <select name=“myMultiSelect” multiple>

<option value=“1”>multiple option 1</option>

<option value=“2”>multiple option 2</option>

<option value=“3”>multiple option 3</option></select>

60

Παράδειγμα<form name="myForm" action="myAction.php" method="get"><br>Textbox:<input type="text" name="myTextBox" value="test text"><br>Password:<input type="password" name="myPasswd"><br><input type="checkbox" name="myCheckBox" value="yes" checked>Η τιμή θα γίνει

"yes".<br><input type="radio" name="myRadio" value="yes" checked>Επέλεξε yes<br><input type="radio" name="myRadio" value="no">Επέλεξε no<br><input type="button" name="MyButton" value="click me"><br><input type="submit" name="MySubmit" value="submit"><br><input type="submit" name="MyReset" value="reset"><br><textarea name="myTextarea">Αυτό είναι ένα πεδίο Textarea</textarea><br><select name="mySelect">

<option value="1">option 1</option><option value="2">option 2</option>

</select><br><select name="myMultiSelect" multiple>

<option value="1">multiple option 1</option><option value="2">multiple option 2</option><option value="3" selected>multiple option 3</option>

</select><br></form>

61

Παράδειγμα

62

HTTP GET/POST (1)

• Για κάθε πεδίο της φόρμας, ο browser στέλνει στο server ζεύγη της μορφής

• Όνομα_πεδίου=τιμή• Πχ αν έχω ένα textbox :<input type="text" name="myTextBox“ />, και βάλω την τιμή Hello

• myTextBox=Hello

63

HTTP GET/POST (2)

Ποια η διαφορά GET και POST ?• POST: τα δεδομένα στέλνονται μέσα στα ΗΤΤP

μηνύματα που στέλνει ο browser, δεν τα βλέπει ο χρήστης

• GET: τα δεδομένα προστίθενται στο url• http://www.di.uoa.gr/gr/anouncedept_detail.php?anno=1725

64

Μερικές οδηγίες Χρησιμοποιείτε το:

Edit (ή δεξί κλικ στη σελίδα) -> View Source

Στην html δεν γίνεται διάκριση πεζών και κεφαλαίων γραμμάτων μέσα στα tags. Δηλαδή τα:

<I>Πλάγια γράμματα</Ι>

<i>Πλάγια γράμματα</i>

είναι ισοδύναμα.

HTML5

Η Ιστορία της HTML

Η Ιστορία της HTML5

Η ανάπτυξη της ξεκίνησε το 2004 από μέλη της Apple, της Mozilla Foundation και της Opera software

Το 2008 κυκλοφόρησε η πρώτη έκδοση της με τους ειδικούς να λένε πως πρόκειται για μια εξελισσόμενη γλώσσα που μπορεί να μην ολοκληρωθεί ποτέ

Το 2011 πλέον το 34% των κορυφαίων ιστοσελίδων χρησιμοποιούν HTML5

Το ίδιο έτος η Adobe σταματάει τη δημιουργία του Flash για κινητά και επικεντρώνεται στην ανάπτυξη της HTML5

Σήμερα: Το μόνο αρνητικό που μπορεί να πει

κάποιος είναι η συμβατότητα της HTML5 ως καινούργια σχετικά γλώσσα

Όλες όμως οι μεγάλες μηχανές αναζήτησης (Chrome, Firefox, Internet Explorer, Safari, Opera) υποστηρίζουν τα νέα στοιχεία HTML5 και APIs, και να συνεχίζουν να προσθέτουν νέα HTML5 χαρακτηριστικά στις τελευταίες εκδόσεις τους.

Η ομάδα εργασίας HTML 5 περιλαμβάνει AOL, Apple, η Google, η IBM, η Microsoft, Mozilla, Nokia, Opera, και εκατοντάδες άλλους προμηθευτές.

Τι είναι η HTML5;

HTML5 είναι το τελευταίο πρότυπο για την HTML.

Η προηγούμενη έκδοση του HTML, HTML 4.01, ήρθε το 1999, και το Διαδίκτυο έχει αλλάξει σημαντικά από τότε.

Είναι ειδικά σχεδιασμένο για να προσφέρει πλούσιο περιεχόμενο χωρίς την ανάγκη για επιπλέον plugins.

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

HTML5 είναι επίσης cross-platform. Είναι σχεδιασμένη για να λειτουργεί αν χρησιμοποιείτε έναν υπολογιστή ή ένα Tablet, ένα Smartphone, ή Smart TV.

Γιατί αναπτύχτηκε η HTML5;

Νέες δυνατότητες θα πρέπει να βασίζονται σε HTML, CSS, DOM και JavaScript

Η ανάγκη για εξωτερικά plugins (όπως Flash) πρέπει να μειωθούν

Η αντιμετώπιση των λαθών θα πρέπει να είναι πιο εύκολη από ό, τι στις προηγούμενες εκδόσεις

HTML5 θα πρέπει να είναι ανεξάρτητη από τη συσκευή

Η διαδικασία της ανάπτυξης θα πρέπει να είναι ορατή στο κοινό

Τι είναι καινούργιο στηνΗΤML5; Νέα στοιχεία Νέα Χαρακτηριστικά Πλήρης υποστήριξη CSS3 Βίντεο και ήχος 2D/3D γραφικών Τοπική αποθήκευση Τοπική βάση δεδομένων

SQL Διαδικτυακές Εφαρμογές

HTML5 Canvas

Το στοιχείο <canvas> HTML5 χρησιμοποιείται για το σχεδιασμό των γραφικών, on the fly, μέσω scripting (συνήθως JavaScript).

Ο Canvas έχει διάφορες μεθόδους για την πορεία σχεδίασης, κουτιά, κύκλους, το κείμενο και την προσθήκη των εικόνων.

Υποστήριξη Browser

Internet Explorer 9 +, Firefox, Opera, Chrome και Safari υποστηρίζουν το <canvas> στοιχείο.

Σημείωση: Ο Internet Explorer 8 και παλαιότερες εκδόσεις, δεν υποστηρίζουν την <canvas> στοιχείο.

Δημιουργία καμβά

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;"> </canvas>

Δημιουργία μιας γραμμικής κλίσης

var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// Create gradientvar grd = ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80);

Τι είναι τόσο ιδιαίτερο σχετικά με τους HTML5 καμβάδες;

Μεγάλες δυνατότητες. Τις εποχές προ-καμβά οι προγραμματιστές ήταν περιορισμένοι σε ορθογώνια, text-rendering και εικόνες.

Διαφημίσεις banner. Δεδομένου ότι το Flash δεν είναι ευπρόσδεκτο πια, ο καμβάς μπορεί να αντικαταστήσει αυτή την τεχνολογία.

Οι βιβλιοθήκες καμβά μπορούν να κάνουν ευκολότερο για τους προγραμματιστές να δημιουργήσουν χρήσιμα πράγματα.

Emulators/Simulators. Και τα δύο μπορούν τώρα να εφαρμοστούν πλήρως σε JS.

Γραφικά απεικόνισης (Charts & Graphs). Είχαν εφαρμοστεί χρησιμοποιώντας Flash, SVG, και τις τεχνολογίες HTML / CSS. Αλλά με τον καμβά η κατάσταση άλλαξε, καθώς πλέον οι προγραμματιστές μπορούν να κάνουν ό, τι θέλουν με όποιον τρόπο μπορούν να σκεφτούν.

Ένας κλιμακούμενος τρόπος για να αποδίδεται η οπτικοποίηση δεδομένων.

Η δυνατότητα να κάνετε απίστευτα φόντα σελίδων με καμβά χωρίς να χρειάζεται να φορτώσετε μεγάλες εικόνες.

Η SVG στην HTML5

SVG σημαίνει Scalable Vector Graphics Η SVG χρησιμοποιείται για να ορίσει φορέα με

βάση τα γραφικά για το Web SVG ορίζει τα γραφικά σε μορφή XML Κάθε στοιχείο και κάθε χαρακτηριστικό σε αρχεία

SVG μπορεί να είναι κινουμένων σχεδίων Η SVG είναι ένα πρότυπο του W3C

Τα γραφικά SVG δεν χάνουν καμία ποιότητα αν κάνουμε zoom ή αλλάξουμε το μέγεθος

<!DOCTYPE html> <html> <body> <svg width="300" height="200"> <polygon points="100,10 40,180 190,60 10,60

160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-

rule:evenodd;" /> </svg> </body> </html>

Σύγκριση του καμβά και SVGCanvas SVG

Εξαρτώμενο από την ανάλυση Μη εξαρτώμενο από την ανάλυση

Χωρίς υποστήριξη χειρισμού συμβάντων

Υποστήριξη χειρισμού συμβάντων

Κακή απόδοση κειμένου Καταλληλότερο για εφαρμογές με μεγάλες περιοχές rendering(Google Maps)

Μπορείτε να αποθηκεύσετε την εικόνα που προκύπτει ως Png ή Jpg

Είναι αργό αν σε εφαρμογές με μικρές περιοχές rendering(δεν είναι κατάλληλο για cross-Platform εφαρμογές)

Κατάλληλη για γραφικά υψηλής έντασης παιχνίδια

Δεν είναι κατάλληλη για εφαρμογές παιχνιδιών

Τελικά…. Μοιάζει με την τεχνολογία του μέλλοντος, έτσι

δεν είναι; Τώρα ξέρετε ότι ο καμβάς HTML5 δεν είναι μόνο οπτικά ελκυστικό, αλλά και αποτελεσματικός για την περαιτέρω ανάπτυξη του όμορφου και φιλικό προς το χρήστη web που όλοι λαχταρούμε.

http://codepen.io/suffick/pen/KrAwx

Βιβλιογραφία

http://www.w3schools.com/html/ http://www.el.wikipedia.org/ http://www.pc-magazine.gr

http://www.w3schools.com/html/

http://www.el.wikipedia.org/

CSSCascading Style Sheets

CSS

Cascading Style Sheets Τα style καθορίζουν πως τα στοιχεία της HTML θα

παρουσιάζονται. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την

εμφάνιση / παρουσίαση της πληροφορίας αλλά μόνο για τη δομή.

Μόλις η HTML εμπλουτίστηκε με elements / attributes εμφάνισης η διαδικασία του προγραμματισμού έγινε αρκετά πολύπλοκή

Τα CSS λύνουν το πρόβλημα αυτό και επιταχύνουν / διευκολύνουν τον προγραμματισμό σελίδων.

2/3/2009 Δικτυακός Προγραμματισμός 87

Cascading Style Sheets (CSS)

1996 CCS1 , 1998 CCS2 , 2011 CSS3 (1999) Αρχείο κειμένου με οδηγίες (όχι υποχρεωτικές) Κάθε οδηγία (statement) περιλαμβάνει:

Επιλογέα (selector) : προσδιορίζει στοιχεία περιεχομένου Τμήμα δηλώσεων (declaration) : παράμετροι παρουσίασης

Η1 { font-size : 13pt }p {

font-size : 10pt ;text-align : justify ;

}blockquote { font-size : 90% }

89

Πλεονεκτήματα μορφοποίησης με CSS

Διαχωρίζει περιεχόμενο από παρουσίαση Απλούστευση, οικονομία, σαφήνεια και απόδοση σε σχεδίαση,

υλοποίηση, έλεγχο & συντήρηση περιεχομένου και στυλ Επαναχρησιμοποίηση, επεκτασιμότητα περιεχομένου και στυλ Μορφοποίηση πολλών ιστοσελίδων με ένα στυλ (π.χ.

μορφοποίηση όλων των σελίδων ενός ιστοτόπου με το ίδιο στυλ) Ευελιξία ως προς το μέσο αναπαράστασης

Επιλογείς CSS

Κατηγορίες επιλογέων: Τύπου (type) : αναφορά στις ετικέτες των στοιχείων Γνωρίσματος (attribute) : αναφορά στις τιμές των

γνωρισμάτων class και id

Περιεχομένου (contextual) : αναφορά στη θέση του στοιχείου στο περιεχόμενο

<p class=emph> Η πρώτη παράγραφος του κεφαλαίου. </p><p class=norm> Η δεύτερη παράγραφος του κεφαλαίου. </p>-----------------------------------------------------------------------.emph { font-weight : bold }

<p> Εξωτερική παράγραφος <p> Εσωτερική παράγραφος </p></p>------------------------------------------------------p p { font-color : red }

Δηλώσεις των CSS

Πως δηλώνονται τα CSS Inline styles

Σε κάθε στοιχείο του περιεχομένου

<H1 style=”font-size: 15pt ; font-weight: bold”> Τίτλος κεφαλαίου </H1>

Embedded style sheets Στην αρχή του αρχείου περιεχομένου

Linked style sheets Εξωτερικό αρχείο που συνδέεται με το αρχείο περιεχομένου

link rel=”stylesheet” type=”text/css” href=”style.css”/>

Σύνταξη CSS Η σύνταξη CSS αποτελείται από 3 τμήματα: selector, property και value:

selector {property:value} Ο selector είναι το element/tag που επιθυμούμε να ορίσουμε, το property

είναι η παράμετρος που θέλουμε να αλλάξουμε και τέλος, το value η τιμή της.

Παραδείγματα: body {background-color:black} p {font-family:"sans serif"}

"" εάν έχουμε περισσότερες λέξεις. p {text-align:center;color:red}

; εάν έχουμε περισσότερες παραμέτρους. h1,h2,h3,h4,h5,h6 {color:green}

ομαδοποίηση στοιχείων.


Εισαγωγή CSS στην HTML Υπάρχουν 3 τρόποι:

Εξωτερικό style sheet (χαμηλή προτεραιότητα) Χρήσιμα για πολλές σελίδες, έτσι αλλάζοντας το CSS αλλάζει ολόκληρο το web

site. Το CSS «φορτώνεται» με το <link> tag στο <head> της σελίδας

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"/></head>

Εσωτερικό style sheet - στο head (μεσαία προτεραιότητα)<head> <style type="text/css“> h1 {color:black} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style></head>

Inline style (υψηλή προτεραιότητα)<p style="color:black;margin-left:20px">This is a paragraph.</p>


Παράδειγμα<html>

<head><style type="text/css">

body { background-color:green; }

h1 {color:orange; text-align:center;}

p {color:blue;font-size:20px;}</style>

</head><body>

<h1>CSS example!</h1>

<p>This is a paragraph.</p></body>

</html>


Κατηγορίες Ιδιοτήτων CSS Background Border and outline Dimension Font List Margin Padding Positioning Table Text

Αναλυτικά εδώ: http://www.w3schools.com/css/css_reference_atoz.asp


http://www.w3schools.com/css/css_reference_atoz.asp

CSS Classes

Στα CSS μπορούμε να ορίζουμε classes Γενικά για όλο το HTML

CSS: .center {text-align:center}HTML:

<div class=“center”> …<p class=“center>…

Για συγκεκριμένα elements: CSS: p.under {text-decoration:underline}

p.center {text-align:center}HTML:

<p class=“center under”>…


CSS IDs

Μπορούμε να ορίσουμε styles για συγκεκριμένα elements με τη χρήση IDs τα οποία πρέπει να είναι μοναδικά σε ένα HTML.

Δεν επιτρέπεται σε περισσότερα από ένα html element να έχουν το ίδιο id.

Παράδειγμα: Το style: #para1 {text-align:center;color:red;} Εφαρμόζεται στο element: <p id=“para1”>…

Μπορούμε να συνδυάζουμε classes και IDs!


Ιεραρχία στα CSS

Μπορούμε να δημιουργήσουμε πιο πολύπλοκα CSS που να αναφέρονται σε συγκεκριμένα στοιχεία της σελίδας.

Παράδειγμα: .aclass h3 {…}

Aφορά όλα τα <h3> elements κάτω από element με class=“aclass”. table.aclass tr {magrin:20px;}

Aφορά όλα τα <tr> elements κάτω από element <table> με class=“aclass”.


Παράδειγμα<html><head><style type="text/css">p { color:blue; text-align:center; }.marked { background-color:blue; }.marked p { color:white; }</style></head><body><p>This is a blue, center-aligned

paragraph.</p><div class="marked"><p>This p element should not be blue.</p></div><p>p elements inside a "marked" classed

element keeps the alignment style, but has a different text color.</p>

</body></html>


Μονάδες στα CSS

Measurement Values (τα πιο σημαντικά)%px – pixelin – inchcm – centimeters mm – milimetersem – 1em ισοδυναμεί με ένα font size

Color Valuesόνομα : π.χ. white, blue, green κτλ.rgb(x,x,x) : π.χ. rgb(255,0,0)HEX : π.χ. #ff0000


To CSS Box Model Αν θεωρήσουμε κάθε

ένα html element σαν ένα κουτί (box) τότε στο css μπορούμε να ορίζουμε αντίστοιχα τις ακόλουθες παραμέτρους:

Margin : Η περιοχή γύρω από το border. Είναι διαφανή / transparent.

Border : Το πλαίσιο γύρω από το padding και το content.

Padding : Η περιοχή γύρω από το content. Έχει το χρώμα του background.

Content : Εδώ εμφανίζεται το κείμενο και οι εικόνες.


Παράδειγμα:width:250px;padding:10px;border:5px solid gray;margin:10px;

Total width= 300px!!

Ομαδοποίηση

Είναι δυνατόν να ορίσει κανείς κοινές ιδιότητες για μια ομάδα ετικετών. Π.χ:H1, H2, H3 {color: red;

font-family:sans-serif}

GroupingGrouping

Ο παραπάνω κανόνας επιβάλει ότι για τις ετικέτες <Η1>, <Η2> και <Η3> το χρώμα θα είναι κόκκινο και η γραμματοσειρά τύπου sans-serif.

Προσοχή στα κόμματα

Ψευδοκατηγορίες A:link {color: red} A:visited {color: green; font-size: 85% } A:hover {color: black} A:active { color: blue; font-size: 125% }Επηρεάζουν τους δεσμούς ως: Οι αχρησιμοποίητοι, κόκκινοι Οι κάτω από το ποντίκι, μαύροι Οι χρησιμοποιημένοι, πράσινοι, μεγέθους 85% Οι ενεργοί μπλε, μεγέθους 125%

Pseudo-classes

Pseudo-classes

Anchor pseudo-classes

Anchor pseudo-classes

Εξωτερικά CSSΟι δηλώσεις των CSS μπορεί να είναι αποθηκευμένες σε ένα αρχείο και να καλούνται από την HTML μέσω της ετικέτας <LINK>.

Έστω ότι το αρχείο: mystyles.css, περιέχει τις δηλώσεις:

body {color: #0000FF; font-family: arial;}

h1 {font-style: oblique; font-size: 32pt; color: red}p {font-family: serif; font-size: 24pt }

Εξωτερικά CSS: <link><html> <head><title> Εξωτερικά CSS </title><link href="mystyles.css"

type="text/css" rel="stylesheet">

</head><body> <h1> Relativity </h1><p> The principle of relativity is relative and cannot be made absolute </p> This is very interesting</body></html>

Καθορισμός του αρχείου

Τύπος αρχείου

Χρήση του αρχείου ως:

PHP

107

PHP• Hypertext Preprocessor (http://www.php.net)

• Γενικά, είναι μια scripting γλώσσα (μπορείτε να γράψετε php προγράμματα που εκτελούνται στο pc σας)

• Στην περίπτωση των web εφαρμογών εκτελείται στη μεριά του server

• Σκοπός, να παράγουμε με δυναμικό τρόπο τις HTML σελίδες (πχ, δείξε μου τι καιρό κάνει τώρα…)

• Δημιουργία εφαρμογών και δυνατότητα αλληλεπίδρασης μέσα από web interface

http://www.php.net/

PHP (Ι) Υπάρχουν 3 βασικές διάφορες μεταξύ μιας σελίδας

γραμμένης σε ΗΤΜL και μιας σελίδας γραμμένης σε ΡΗΡ.

Ποιο συγκεκριμένα:Τα ΡΗΡ scripts και πρέπει να αποθηκεύονται με την κατάληξη .ΡΗΡ

PHP (ΙΙ)2. Ο κώδικας ΡΗΡ

θα πρέπει να ξεκινάει με το "<?php" και να τελειώνει με το "?>" tag

Ο κώδικας ΡΗΡ ξεκινάει με το συγκεκριμένο tag. και τελειώνει με το συγκεκριμένο tag.

PHP (ΙΙΙ)3. Οι σελίδες πρέπει να εκτελoύνται σε Web Serνer με υποστήριξή της γλώσσας ΡΗΡ.

Να σημειωθεί ότι τις απλές σελίδες σε κωδικά ΗΤΜL μπορούμε να τις δούμε σε οποιονδήποτε υπολογιστή χωρίς απαραίτητα την ανάγκη για Web Server. Μπορούμε να τις δημιουργήσουμε με τα εργαλεία που κυκλοφορούν και ανά πάσα στιγμή να ελέγξουμε το αποτέλεσμα σε ένα παράθυρο του Web Browser. Σελίδες σε ΡΗΡ μπορούμε να γράψουμε ακόμα και στο απλό notepad των Windows.

Συνήθως χρησιμοποιούμε κάποιο περιβάλλον ανάπτυξής το οποίο μας βοηθάει να γράψουμε των κωδικά της ΡΗΡ πολύ ποιο εύκολα. Για να δούμε όμως το αποτέλεσμα θα πρέπει το script να το μεταφέρουμε σε web server που έχει υποστήριξή για εκτέλεση κώδικα ΡΗΡ. Είναι προφανές ότι η εγκατάσταση μιας πλατφόρμας που να μας διαθέτει τα εργαλεία που χρειαζόμαστε για ανάπτυξη εφαρμογής σε ΡΗΡ είναι αναγκαία. Μια τέτοια πλατφόρμα είναι το WAMP.

PHP (ΙV)

-Το ποιο απλό script που μπορούμε να γράψουμε σε ΡΗΡ κωδικά είναι το κλασσικό παράδειγμα που εμφανίσει το κείμενο 'Hello World' στο παράθυρο του web browser. Εκτελώντας το παρακάτω ΡΗΡ script στον web serνer, θα δούμε στην σελίδα του web browser το κείμενο 'Hello World'.

PHP (V)

Αυτό είναι το ποιο απλό script που μπορούμε να δημιουργήσουμε στην ΡΗΡ, στο συγκεκριμένο παράδειγμα, το script περιλαμβάνεται σε μια σελίδα ΗΤΜL. Αυτό είναι εμφανές από τα tags της ΗΤΜL που υπάρχουν στην αρχή και στο τέλος του script.

Αμέσως μετά τα tags της ΗΤML υπάρχουν τα tags τής ΡΗΡ. Με αυτόν τον τρόπο ο web serνer μπορεί να ξεχωρίσει ποιο τμήμα τής σελίδας είναι ο κώδικας που πρέπει να εκτελέσει

Παρά το γεγονός ότι η σελίδα περιέχει κωδικά ΗΤΜL μαζί με κωδικά ΡΗΡ θα πρέπει να αποθηκεύσουμε την σελίδα με επέκταση .php στον web serνer, αλλιώς το script δεν θα εκτελεστεί.

Αποθηκεύοντας το script στον κατάλογο WWW του web serνer με το όνομα index.php και ανοίγοντας το URL http://localhost/index.php θα δούμε στο παράθυρο του web browser το συγκεκριμένο αποτέλεσμα.

Αν δούμε τον ΗΤΜL κώδικα προέλευσης τής σελίδας θα παρατηρήσουμε ότι δεν υπάρχει καμία εντολή της ΡΗΡ.

Αυτό είναι λογικό καθώς ο κώδικας της ΡΗΡ έχει εκτελεστεί από τον web serνer και το αποτέλεσμα του είναι η φράση "Hello World".

PHP (VII)

Κοιτώντας αναλυτικότερα τον κωδικά της σελίδας διακρίνουμε τα εξής

Στην 1η γραμμή υπάρχει η δήλωση ότι το περιεχόμενο τής σελίδας είναι γραμμένο σε γλώσσα HTML.

Στην 2η καθώς και στην 4η γραμμή παρατηρούμε το tag που χρησιμοποιεί η ΡΗΡ για να οριοθετεί τον κώδικά της.

Η όλη λογική του script βρίσκεται στην 3η γραμμή στην οποία καλούμε την ΡΗΡ συνάρτηση print και της δίνουμε το κείμενο που καλούμε να εμφανίσει στην σελίδα του web browser. Στο τέλος κάθε γραμμής κωδικά υπάρχει πάντα το ελληνικό ερωτηματικό το οποίο υποδηλώνει το τέλος μιας εντολής.

116

PHP (Περιληπτικά)

Server

Requests

Responses

Data

DataWarehouse

1. O browser ζητά δεδομένα από το web server μέσω HTML forms

2. O web server εκτελεί το php κωδικα3. Ο web server ενδέχεται ζητήσει δεδομένα από κάποια

άλλη πηγή (3 tier)4. Τα αποτελέσματα μορφοποιούνται σε HTML στο χρόνο

εκτέλεσης και στέλνονται στο client

117

PHP (Λεπτομέρειες)

1. Ο web server έχει το κατάλληλο module για να εκτελέσει php κώδικα

2. Οι σελίδες έχουν κατάληξη .php3. Γράφω κώδικα php μέσα στην html

<?php//Κώδικας σε php?>ή φτιάχνω βιβλιοθήκες σε ξεχωριστό αρχείο και τις εισάγω στην σελίδα <? Php include ‘my_library.php'; ?>

118

PHP - Variables

• Οι μεταβλητές δεν έχουν αυστηρούς τύπους• Κάθε μεταβλητή ξεκινά με το χαρακτήρα $

• $myVar = “hello world!”;• Εκτύπωση μεταβλήτων

• echo $myVar;

119

PHP - Variables<?php

$bool = TRUE; // a boolean$str = "foo"; // a string$int = 12; // an integer

echo gettype($bool); // prints out "boolean"echo gettype($str); // prints out "string"

// If this is an integer, increment it by fourif (is_int($int)) { $int += 4;}

// If $bool is a string, print it out// (does not print out anything)if (is_string($bool)) { echo "String: $bool";}?>

120

Παράδειγμα<body><?php$myVar = “hello world!”;echo $myVar;

echo “<br><b>".$myVar."</b>";

?></body>

121

Arrays<?php

$arr = array("foo" => "bar", 12 => true);

echo $arr["foo"]; // barecho $arr[12]; // 1

$colors = array('red', 'blue', 'green', 'yellow');

foreach ($colors as $color) { echo "Do you like $color?\n";}

/* output:Do you like red?Do you like blue?Do you like green?Do you like yellow?*/?>

122

PHP – Δομές ελέγχου• Ifif ($a > $b) { print "a is bigger than b";} elseif ($a == $b) { print "a is equal to b";} else { print "a is smaller than b";}

• While$i = 1;while ($i <= 10): print $i; $i++;endwhile;

123

PHP - Functions

<?phpfunction square ($num){ return $num * $num;}echo square (4); // outputs '16'.?>

124

Διάβασμα μεταβλητών φόρμας

Μέθοδος GET: $_GET[“(όνομα μεταβλητής)”]

Μέθοδος POST: $_POST[“(όνομα μεταβλητής)”]

125

Παράδειγμα <form action="welcome.php" method="get">

Name: <input type="text" name="name">Age: <input type="text" name="age"><input type="submit">

</form>

Welcome <?php echo $_GET["name"]; ?><br>You are <?php echo $_GET["age"]; ?> years old!

Καταχώρηση Φόρμας

126

Προσπέλαση Αρχείων Άνοιγμα Αρχείου:

<?php $file=fopen("welcome.txt","r"); ?> Διάβασμα Αρχείου:

while(!feof($file)){

echo fgets($file). "<br>";}

Κλείσιμο Αρχείου: fclose($file);

127

Sessions

• Χρειάζεται να κρατάμε πληροφορία για το ιστορικό του client• Έχει κάνει login?• Με τι username?• Έχει προϊόντα στο καλάθι αγορών του?

• Ο web server διατηρεί για κάθε client (Ip address/agent) ένα ξεχωριστό session με κάποιο ID

• Μπορούμε να αποθηκεύουμε πληροφορία (μεταβλητές) στο session

• To πως δουλεύει κρύβεται από τον προγραμματιστή• Απλά το χρησιμοποιούμε

128

Sessions

1. Κάνουμε start το session (πχ κατά την είσοδο του χρήστη μετά το login) session_start();

2. Αποθηκεύουμε μια μεταβλητή $_SESSION['views']=1;

3. Ελέγχουμε αν υπάρχει μια μεταβλητή στο session if(isset($_SESSION['cart']))

4. Αφαίρεση μια μεταβλητής από το session unset($_SESSION['views']);

5. Κλείσιμο του session (πχ κατά το log out) session_destroy();

129

Χρήσιμοι Σύνδεσμοι http://www.w3schools.com/html/default.

asp

http://www.w3schools.com/js/default.asp

http://www.w3schools.com/php/default.asp

http://www.php.net/manual/en/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/js/default.asp



http://www.php.net/manual/en/

130

Εργαλεία

• bundle install, Apache, PHP etc• Appserv

• http://www.appservnetwork.com/index.php• WAMP

• http://www.wampserver.com/en/• XAMP

• http://www.apachefriends.org/en/xampp.html

• NVU (html editor)• http://nvudev.com/index.php

• PHP Text DB API • http://www.c-worker.ch/txtdbapi/index_eng.php

http://www.wampserver.com/en/

http://www.apachefriends.org/en/xampp.html

http://nvudev.com/index.php

Ιστόχωροι –Iστότοποι

Στατικές σελίδες (Ι)

Στατικές σελίδες (ΙΙ) Το περιεχόμενο και η παρουσίαση είναι στο

ίδιο αρχείο

Ιστοσελίδες με Cascading Style Sheet (CSS). Περιεχόμενο και παρουσίαση είναι χωρισμένα www.csszengarden.com

Στατικές σελίδες + CSS

Δυναμικές σελίδες (Ι)

Δυναμικές σελίδες (ΙΙ) Περιεχόμενο και παρουσίαση διαχωρίζονται

από την ιστοσελίδα. Οι ιστοσελίδες δημιουργούνται δυναμικά στον

web server όταν ζητηθούν από το χρήστη.

Λογισμικό για δυναμικές σελίδες

Στατικές vs δυναμικές σελίδες

Dynamic VS StaticWebsites

Ανάπτυξη δυναμικών σελίδων(τοπικά)

Ανάπτυξη δυναμικών σελίδων(τοπικά)

Local Web ServersΌνομα

Πακέτου

Λειτουργικό

Σύστημα

Ιστοθέση Τεκμηρίωση

WAMP UNIFORM SERVER

Windows http://www.wampserver.com/en/ http://www.uniformserver.com

http://www.wampserver.com/wamp5.chm http://www.uniformserver.com/doc/index.htm

MAMP Apple Mac

OSX

http://www.mamp.info/en/mamp.ht

ml

LAMP Linux Ανάλογα με την έκδοση Linux http://www.mamp.info/en/help.html

XAMPP Mac,

Windows, Linux, Solaris

http://apachefriends.org http://www.apachefriends.org/en/faq-

xampp.html




http://www.uniformserver.com/








http://www.wampserver.com/wamp5.chm





http://www.uniformserver.com/doc/index.htm












http://www.mamp.info/en/help.html







http://apachefriends.org/









http://www.apachefriends.org/en/faq-





Σύστημα Διαχείρισης Περιεχομένου

- CMS -

Τι είναι ένα Σύστημα Διαχείρισης Περιεχομένου(Content Management System CMS);

Δυναμικές ιστοσελίδες Ένα CMS διαχωρίζει πλήρως το περιεχόμενο των σελίδων

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

τόπο η ίδια εμφάνιση. Καθιστά επίσης την προσθήκη περιεχομένου εύκολη για

τους απλούς χρήστες.

Είναι τόσο χρήσιμο ένα CMS γι 'αυτό το κόλπο ;

Content Management Systems (CMS) Σύστημα διαχείρισης περιεχομένου - (Content Management System)

Λογισμικό το οποίο χρησιμοποιείται για την οργάνωση, ταξινόμηση και αρχειοθέτηση πληροφορίας

Χρησιμοποιούνται για τη δημιουργία της υποδομής πάνω στην οποία θα στηθεί ένας δυναμικός δικτυακός τόπος

Τι είναι ένα CMS (Ι) Είναι μια εφαρμογή λογισμικού υπολογιστή (computer s/w

application) που αποτελείται από ένα πλήθος εργαλείων με την οποία μπορεί κανείς να διαχειριστεί συγκεντρωμένες πληροφορίες ηλεκτρονικής μορφής στο Διαδίκτυο.

Επομένως, χρησιμοποιείται για την δημιουργία, τροποποίηση, διαχείριση και δημοσίευση περιεχομένου με συνεπή και οργανωμένο τρόπο:

Περιεχόμενο = αρχεία, ήχος, βίντεο, εικόνα, ηλεκτρονικά έγγραφα, ιστοπεριεχόμενο

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

Υποστηρίζει versioning Υποστηρίζει τη δημοσίευση περιεχομένου σε μια αποθήκη

(repository) και επιτρέπει αναζήτηση και ανάκτηση

Τι είναι ένα CMS (ΙΙ)

• Έχει σχεδιαστεί για να διευκολύνει και επιταχύνει τη δημοσίευση περιεχομένου στον Παγκόσμιο Ιστό από δημιουργούς περιεχομένου, χωρίς να προαπαιτεί εξειδικευμένες τεχνικές γνώσεις ή γνώσεις HTML Χρησιμοποιούνται για τη διαχείριση και έλεγχο μιας μεγάλης, δυναμικής

συλλογής web υλικού (HTML έγγραφα και οι αντίστοιχες εικόνες) Είναι συνήθως υλοποιημένα ως web εφαρμογές (δηλαδή η οργάνωση,

διαχείριση και παρουσίαση του περιεχομένου γίνεται μέσω από μια τυπική web διεπαφή)

CMS – Content Management SystemsΠροσφέρουν Ευκολία χρήσης χωρίς έλλειψη δυνατοτήτων Εύκολη και γρήγορη διαχείριση περιεχομένου Modular - Πληθώρα plugins που διευκολύνουν την παραμετροποίηση

και την εξειδίκευση Διαμόρφωση εμφάνισης μέσω ενιαίου template Browser-based , δεν χρειάζεται επιπλέον software Δυνατότητα απομακρυσμένης διαχείρησης

Δυνατότητα σε μεγάλο αριθμό ανθρώπων να συνεισφέρουν και να μοιραστούν αποθηκευμένα δεδομένα.

ελεγχόμενη πρόσβαση στα δεδομένα, βάσει των ρόλων των χρηστών (να προσδιοριστεί ποια πληροφορία μπορεί να προσπελάσει/ επεξεργαστεί/δημοσιεύσει ένας χρήστης ή μια ομάδα χρηστών)

Δημοφιλή Open Source CMS Joomla! http://www.joomla.com Drupal http://www.drupal.org Typo3 http://www.typo3.org Xoops http://www.xoops.org Wordpress (Blog και όχι CMS) http://www.wordpress.org Liferay Portal (Java) http://www.liferay.com/ Alfresco http://www.alfresco.com/ Plone http://plone.org/

http://www.joomla.com/

http://www.drupal.org/

http://www.typo3.org/

http://www.xoops.org/

http://www.wordpress.org/

http://www.liferay.com/

http://www.liferay.com/

http://www.alfresco.com/

http://www.alfresco.com/

http://plone.org/

http://plone.org/

Τέλος

Documents

Εισαγωγή Στη Γλώσσα Υπερκείμενου HTML 2