Lecture 01

Internet and Web Applications

Web

● The world wide web is a system of hypertext documents that are viewable
by a web browser.
● Hypertext documents: documents with internal cross-references to other
documents.
● Runs as service/application on top of the internet protocols.
● Originally based on three fundamental mechanisms.
o Application protocol (Hypertext Transfer Protocol)
o Document description format (hypertext markup language)
o Document addressing mechanism (uniform resource identifiers)

‫ن‬
‫بيشتغل‬browser ‫ المربوطة ونقدر نشوفها من الـ‬hypertext ‫ هو مجموعه من صفحات‬web‫عرفي ايه هو ال ـ‬ ‫طبعا كلنا‬
‫ر‬
.‫كتطبيق باستخدام بروتوكوالت االنتنت‬
.‫ متوصله ببعض داخليا‬documents ‫ ه‬hypertext documents‫ال ـ‬

Web 2.0

● Used for describing modern forms of applications and services that are
accessible by the web browser such as wikis and weblogs.
● These applications often have a high social component and appealing user
interfaces in common and are based on enhanced interaction models and
new document representations discussed in this lecture.

‫التطبيقات عندها مكونات اجتماعيه كتت ر ن‬Facebook ‫زي الـ‬web 2.0 ‫معظم المواقع ه نتيجة‬
‫بتود تفاعل‬
.‫المستخدم‬

1 Minders’22 AC
Web 3.0

● Web 3.0 or the semantic web is a vision of semantically interconnected

data in the web.

● While Web 2.0 has been a technological evolution, web 3.0 is a conceptual
evolution of the web based on the enhanced technological environment.

● Focus is not set to documents but to data thus becoming linked data.

● Important formats RDF, RDFS, OWL and Microformats.

.‫ بياخود البيانات ويعالجها لتناسب احتياجات المستخدم من غت ما يعمل حاجه‬web 3.0 ‫الـ‬
‫لألنتنت بتحويل ر‬
‫الت ن‬
‫كت للبيانات لمحاوله معرفه احتياجات المستخدم من غت الطلب الرصي ــح زي‬ ‫هو تطور مفاهيم ر‬
‫االعالنات المستهدفة ر‬
.Facebook‫واقتاحات عىل الـ‬

Xml

● The extensible markup language is a general-purpose meta-language for

representation, exchange, and processing of data.
● Basis for many Web related formats.

.‫ بتسعدنا عىل تمثيل و تبادل البيانات بسهوله إلنها لغة عامه‬XML‫ببساطه الـ‬

2 Minders’22 AC
Xml terminology

● Xml documents are organized in a simple tree structure with documents’

elements as nodes.
● Every node might have content and parameters.
● An element’s content is one of
o Empty content (no value)
o Simple content (text values)
o Element content (further “tags”)
o Mixed content (simple and element content)

.‫ المحتوى و المعطيات ممكن يكونوا ليهم قيم‬Tree nodes‫ منظم العنارص عىل شكل‬XML‫الـ‬

Xml syntax
● Main important syntactical rules for XML data are
o Non-empty elements need to have a start tag and an end tag
(<x>content</x>).
o If an element is empty, it can directly be delimited to (</x>).
o Exactly one root element exists.
o All attribute values are quoted (single or double quotes).
o Nested tags do not overlap (<x><y></x></y>) is not allowed.
o XML is case sensitive (<X></x>) is incorrect.
o The XML tags, tag content etc. must comply to the given charset
(default: UTF-8).

● Syntactically correct XML documents are called well-formed.

.‫ من حيث قيمة الخانة متنصصه‬HTML‫ شبه الـ‬XML‫قواعد الـ‬

3 Minders’22 AC
 ‫يبق فيه ر‬
.‫اكت من عنرص جزري واحد‬ ‫مينفعش ر‬

Xml namespaces
● Different contributors might use the same element names to refer to
different things.
● If such elements are mixed in one file name conflict will occur.
● Import namespaces and bind it to a prefix to use it.

● Name conflicts are solved by XML namespaces which are used to qualify
elements and attributes by unique identifiers.
● Typically, standardized XML dialects a namespace that is imported by all
documents using the dialect.
● A prefix can be associated with one namespace that is attached to all
elements that belong to this name space
namespaces‫ فالـ‬,‫أكت من واحد بيكتب نف نفس الملف ممكن يكونوا سموا نفس األسماء للمتغتات‬
‫لو فيه ر‬
.‫بتسعدنا نتجنب المشاكل المتوقعة بسبب حاجه زي كده‬

Xml Validity

● A valid XML document is related to further information describing

and data types used therein.
● Two type definition languages are often used.
1. Document type definition (DTD)
▪ Defines a list of legal elements.
▪ Referenced from or embedded in related XML
document.

4 Minders’22 AC
 ▪ Main shortcoming:
● Capabilities are limited (limited possibilities for
type definition).

2. XML schema
● XML dialect that enables definition of various data types.
● Defines two categories of types.
o Simple types (such as stings, integer).
o Complex types (such as sequences of other types).

.‫ بتستعمل لتحديد نوع الملف و العنارص المستخدمة فيه‬type definition‫الـ‬

XHTML
● One wide-spread application of XML is the XHTML.
● its language constructs and thus its expressive power was deduced from
html.
● high degree of standardization and stricter syntax leads to further
unification of browser engines.
● Use of XML for hypertext documents makes processing by regular xml tools
possible.
● Extensible by further XML languages such as MATHML for embedding
mathematic expressions.

‫ واستعمالها بيخلينا نقدر نستعمل ادوات‬،‫ باتباع بعض القواعد و القيود لتوحيد اللغة‬HTML ‫ ه طريقه لكتابه‬XHMTL‫الـ‬
.XML

5 Minders’22 AC
DOM VS SAX

● They are used to parse XML.

● It checks for proper format of the XML document and may also validate the
XML documents.
DOM SAX

Document object Model. Simple API for XML.

Tree based API. Event Driven API.

Tree based parsing method. Event driven parsing method.

Useful for smaller applications. Useful for large xml document.

Traversing can be done in any Traversing is done top to bottom

direction. approach.

It requires more memory. It requires less memory.

Ease of navigation. Backward navigation isn’t possible

as it sequentially processes the
document.

.‫ و بتقوم بالتأكد من نص الملف و تحقق من صحته‬XML‫بيسعدونا فالتعامل مع الـ‬

Selected alternatives to XML:

● JSON (JavaScript object notation).
● YAML (not a markup language).
o Compact text-based and human readable format.
o Superset of JSON.
o Offers lists, associative arrays, and scalars for structuring data.
o Enables cross-references between nodes.
o Hierarchies are realized by indentation.

XML.‫ده بدائل للـ‬

‫ن‬.‫ تسلسالت واضحة بسبب ترتيب هيكىل معي‬, JSON ‫ انها سهله نف الكتابة وممكن تكتب فيها‬YAML‫متة الـ‬
‫ن‬

6 Minders’22 AC
Overview of interaction on the web
● The web is based on a classical client-server architecture.
● Client fetches documents form the server using the hypertext transfer
protocol (HTTP).
● Documents may have different types of content (text, images, ...).
● Content of one document may consist of different sections interpreted by
the client.

‫ ن‬WEB‫الـ‬
‫مبن عىل عالقة ن‬
.‫بي العميل و الستفر‬
.http‫العميل يستدع الملفات من خالل الـ‬
.‫متجمة من خالل جانب العميل‬‫محتوى الملفات يكون من أقسام مختلفة ر‬

Content type

● To find an appropriate interpreter program for received content on the

client side the content’s meta information specifies a content type
(sometimes referred to as “MediaType” or “MIME type”).
● Format:
o Content-type”:” type “/” subtype
o Examples:
▪ Content-Type: application/xml (for general XML content)
▪ Content-Type: mpeg/xml (for MPEG encoded content)
▪ Content-Type: image/jpeg (for JPEG encoded content)
● Client manages data structure that maps known content types to
responsible applications.
● after the client has received a document, it analyses the document’s
content type information.
● If the client isn’t responsible for the type of content, it looks up an
appropriate application and initiates handling of the document by this
application.

. ‫عشان العميل يقدر يستعمل البيانات الزم يعرف نوع البيانات من خالل معلومات عامة تخص الملفات‬
‫لما البيانات بتوصل جانب العميل بيقوم بتحليل و تحديد نوع البيانات و لو العميل مش مسؤول عن نوع البيانات‬
. ‫بيتم البحث عن التطبيق مخصص لها‬.

7 Minders’22 AC
JavaScript

● is an object based wide-spread script language often used for client-side

execution.
● May be embedded into (X)HTML documents or linked from them.
● After the web browser has identified code segments it forwards them for
execution to the JavaScript engine.
● The result of execution might influence the original document’s content or
force an additional reaction.
● Import security concept is the sandbox principle which permits script logic
that is running inside the JavaScript engine access only to objects inside the
browser per default.
● Is often used in combination with DOM leading to a dynamically changeable
structure of an XHTML.

‫ او نف ملف أخر مربوط به لما‬HTML ‫ه لغة بتستعمل نف جانب العميل وممكن أن تكون مكتوبه نف نفس ملف الـ‬
.Engine‫ بيوصل للمقاطع الخاصة به يتم تنفيذها من خالل الـ‬browser‫الـ‬
‫ن‬ ‫ ر‬Sandbox Principle‫من اهم نظم الحماية ه الـ‬
‫الن تقوم بمنع أي تالعب ف ملفات الجهاز و السماح فقط باستخدام‬
.Browser‫موارد الـ‬

CSS

● Cascading style sheet language is a client-side language for defining layout

for markup language elements.
● Simplifies uniform design and its maintenance of web pages.
● CSS description may be directly embedded into HTML file or linked from it.
● If style definitions are given as external file, the layout of all associated
(X)HTML pages can be changed by editing the single file.
● The CSS file contains a number of selectors whose properties are defined.
● These selectors refer to elements of (X)HTML files.
.‫او نف ملف أخر مربوط به‬HTML ‫ه لغة بتستعمل نف جانب العميل وممكن أن تكون مكتوبه نف نفس ملف الـ‬
.‫تقوم بتسهيل تصميم المواقع وصيانته‬
.‫ بتغت محتوى الملف‬CSS‫ المربوطة بملف الـ‬HTML‫من السهل تغت تصميم صفحات الـ‬
.‫) كل واحد منهم له خصائص معينه‬HTML ‫ (عنارص‬Selectors ‫تحتوي عىل‬

8 Minders’22 AC