Web Design and Web Design and UI TechnologiesUI Technologies

Track OverviewTrack Overview

Track CurriculumTrack Curriculum

3

HTML BasicsHTML Basics

1.1. Web Design Concepts and ToolsWeb Design Concepts and Tools

2.2. Introduction to HTMLIntroduction to HTML

3.3. HTML TablesHTML Tables

4.4. HTML FormsHTML Forms

5.5. Semantic HTMLSemantic HTML

3 4

CSS StylingCSS Styling

1.1. CSS BasicsCSS Basics

2.2. CSS PresentationCSS Presentation

3.3. CSS PositioningCSS Positioning

4.4. CSS 3 CSS 3

4

5

JavaScript BasicsJavaScript Basics

1.1. Intro to JavaScript developmentIntro to JavaScript development

2.2. Data Types and VariablesData Types and Variables

3.3. Operators and ExpressionOperators and Expressionss

4.4. Conditional StatementsConditional Statements

5 6

Advanced JavaScriptAdvanced JavaScript

1.1. LoopsLoops

2.2. ArraysArrays

3.3. FunctionsFunctions

4.4. Using ObjectsUsing Objects

5.5. DOM ManipulationDOM Manipulation

6.6. JavaScript OOPJavaScript OOP

7.7. JavaScript EventsJavaScript Events

8.8. JavaScript APIsJavaScript APIs

6

7

JavaScript Libraries and UIJavaScript Libraries and UI

1.1. JavaScript LibrariesJavaScript Libraries

2.2. jQueryjQuery

3.3. Asynchronous JavaScript and XMLAsynchronous JavaScript and XML

4.4. Web Services and RESTWeb Services and REST

5.5. Consuming Consuming RESTfulRESTful web servicesweb services

6.6. Working with External JavaScript APIsWorking with External JavaScript APIs

7.7. JavaScript UI FrameworksJavaScript UI Frameworks

7 8

Why HTML, CSS and JS?Why HTML, CSS and JS?

�� HTML, CSS and JS HTML, CSS and JS –– standard for webstandard for web--based based

UIUI

�� WebWeb--based applications are extremely popularbased applications are extremely popular

�� Run on anything with a browserRun on anything with a browser

�� Windows 8 devices can run HTML, CSS and JS Windows 8 devices can run HTML, CSS and JS

nativelynatively

�� HTML and CSS HTML and CSS –– evolving standardsevolving standards

�� JavaScriptJavaScript

�� HighHigh--level scripting language, fast to write, level scripting language, fast to write,

objectobject--oriented, runs on client, lots of APIsoriented, runs on client, lots of APIs 8

Recommended BooksRecommended Books

10

Recommended BooksRecommended Books

�� ““Designing with Web StandardsDesigning with Web Standards””, , Jeffrey Jeffrey ZeldmanZeldman, New Riders Press, 2005, , New Riders Press, 2005, ISBN 9780321616951ISBN 9780321616951

�� ""HTML & XHTML: The Definitive Guide, HTML & XHTML: The Definitive Guide, Sixth EditionSixth Edition", Chuck ", Chuck MuscianoMusciano, , Bill Kennedy, O'Reilly, 2006, ISBN Bill Kennedy, O'Reilly, 2006, ISBN 97805965273279780596527327

�� ""CSS: The Definitive Guide, Third EditionCSS: The Definitive Guide, Third Edition", ", Eric Meyer, O'Reilly, 2006, ISBN Eric Meyer, O'Reilly, 2006, ISBN 97805965273349780596527334

�� ““PPK on JavaScriptPPK on JavaScript””, , Peter PaulPeter Paul--Koch, New Riders Press, 2006, Koch, New Riders Press, 2006, ISBN 9780321423306ISBN 9780321423306

10

11

Web Technologies BasicsWeb Technologies BasicsConceptsConcepts

12

Table of ContentsTable of Contents

�� Web Sites and Web ApplicationsWeb Sites and Web Applications

�� Web 1.0, 2.0, 3.0Web 1.0, 2.0, 3.0

�� Web BrowsersWeb Browsers

�� Hardware ServersHardware Servers

�� Web ServersWeb Servers

�� ClientClient--Server ArchitectureServer Architecture

�� 33--Tier / MultiTier / Multi--Tier ArchitecturesTier Architectures

�� ServiceService--Oriented Architecture (SOA)Oriented Architecture (SOA)

12

13

Web Sites and Web Sites and Web ApplicationsWeb Applications

13 14

Web PageWeb Page

�� DocumentDocument or information resource that is or information resource that is

suitable for the World Wide Websuitable for the World Wide Web

�� Can be accessed through a web browser and Can be accessed through a web browser and

displayed on a monitor or mobile devicedisplayed on a monitor or mobile device

�� This information is usually in HTML or XHTML This information is usually in HTML or XHTML

format, and may provide navigation to other format, and may provide navigation to other

web pages via hypertext linksweb pages via hypertext links

�� Web pages frequently refer to other resources Web pages frequently refer to other resources

such as style sheets (CSS), scripts (JavaScript) such as style sheets (CSS), scripts (JavaScript)

and images into their final presentationand images into their final presentation14

15

Web SiteWeb Site

�� Collection of related web pages Collection of related web pages containing containing

web resources (web pages, images, videos, web resources (web pages, images, videos,

CSS files, JS files or other digital assets)CSS files, JS files or other digital assets)

�� Common navigation between web pagesCommon navigation between web pages

�� A website is hosted on at least one web serverA website is hosted on at least one web server

�� Accessible via a network (such as the Internet)Accessible via a network (such as the Internet)

�� All publicly accessible websites collectively All publicly accessible websites collectively

constitute the World Wide Webconstitute the World Wide Web

15 16

Web ApplicationWeb Application

�� Next level web sitesNext level web sites

�� High interactivityHigh interactivity

�� High accessibility (Cloud)High accessibility (Cloud)

�� AJAX, AJAX, SilverlightSilverlight, Flash, Flex, etc., Flash, Flex, etc.

�� Applications are usually broken into logical Applications are usually broken into logical

chunks called "tiers", where every tier is chunks called "tiers", where every tier is

assigned a roleassigned a role

�� DesktopDesktop--like application in the web browserlike application in the web browser

�� Web applications on desktop (Windows 8)Web applications on desktop (Windows 8)16

17

Web 1.0, 2.0, 3.0Web 1.0, 2.0, 3.0

17 18

Web 1.0Web 1.0

�� Old media modelOld media model

�� It all started with a simple ideaIt all started with a simple idea

�� Just put content in the webJust put content in the web

�� Low content varietyLow content variety

�� Limited contentLimited content

�� Limited creativityLimited creativity

�� Limited businessLimited business

�� 10 000 editors serve 500 000 10 000 editors serve 500 000 000000 internet usersinternet users

19

Web 1.0Web 1.0

19 20

Web 2.0Web 2.0

20

21

Web 2.0Web 2.0

�� UserUser--generated contentgenerated content

�� New platforms allow users to generate content New platforms allow users to generate content

themselves (YouTube, Wiki, themselves (YouTube, Wiki, FacebookFacebook, Blogs), Blogs)

�� Everyone can publish!Everyone can publish!

�� Web 2.0 can be described in 3 parts:Web 2.0 can be described in 3 parts:

�� Rich Internet application (RIA)Rich Internet application (RIA)

�� WebWeb--oriented architecture (WOA)oriented architecture (WOA)

�� Feeds, RSS, Web Services, etc.Feeds, RSS, Web Services, etc.

�� Social WebSocial Web21 22

Web 2.0Web 2.0

22

23

Web 3.0Web 3.0

23 24

Web 3.0Web 3.0

�� Web 3.0 is where the Web 3.0 is where the computer is generating computer is generating

new informationnew information, rather than humans, rather than humans

�� All the new web 3.0 concepts can be divided All the new web 3.0 concepts can be divided

into 4 parts:into 4 parts:

�� Semantic webSemantic web

�� Artificial intelligenceArtificial intelligence

�� PersonalizationPersonalization

�� MobilityMobility

25

Web 3.0Web 3.0

�� Semantic WebSemantic Web

�� Changing the web into a language that can be Changing the web into a language that can be

read and categorized by the computers rather read and categorized by the computers rather

than humansthan humans

�� Makes search engines smarterMakes search engines smarter

�� Enables digital collection of allEnables digital collection of all

your images, blog post,your images, blog post,

videos, etc.videos, etc.

�� Disadvantage:Disadvantage:

it is hard to be implementedit is hard to be implemented25 26

Web 3.0Web 3.0

�� Artificial IntelligenceArtificial Intelligence

�� Extracting meaning from the way people Extracting meaning from the way people

interact with the webinteract with the web

�� Examples: Google suggest, Google translateExamples: Google suggest, Google translate

�� PersonalizationPersonalization

�� Contextualizing the web based on the people Contextualizing the web based on the people

using itusing it

�� Different content for different usersDifferent content for different users

26

27

Web 3.0Web 3.0�� MobilityMobility

�� EverythingEverything

�� Web sitesWeb sites

�� InformationInformation

�� ServicesServices

�� EverywhereEverywhere

�� You only need yourYou only need your

phone or tabletphone or tablet

�� All the timeAll the time

27 28

Web Browsers andWeb Browsers andLayout EnginesLayout Engines

28

29

Web BrowsersWeb Browsers

�� Program designed to enable users to access, Program designed to enable users to access,

retrieve and view documents retrieve and view documents and other and other

resources from the Webresources from the Web

�� Main responsibilities:Main responsibilities:

�� Bring information resources to the user (issuing Bring information resources to the user (issuing

requests to the web server and handling any requests to the web server and handling any

results generated by the request)results generated by the request)

�� Presenting web content (render HTML, CSS, JS)Presenting web content (render HTML, CSS, JS)

�� Capable of executing applications within the Capable of executing applications within the

same context as the document on view (Flash)same context as the document on view (Flash)29 30

Layout EnginesLayout Engines�� Software component that Software component that displays the displays the

formatted contentformatted content on the screen combining:on the screen combining:

�� Marked up content (such as HTML, XML, image Marked up content (such as HTML, XML, image

files, etc.)files, etc.)

�� Formatting information (such as CSS, XSL, etc.)Formatting information (such as CSS, XSL, etc.)

�� It "paints" on the content area of a window, It "paints" on the content area of a window,

which is displayed on a monitor or a printerwhich is displayed on a monitor or a printer

�� Typically embedded in web browsers, eTypically embedded in web browsers, e--mail mail

clients, onclients, on--line help systems or other line help systems or other

applications that require the displaying (and applications that require the displaying (and

editing) of web contentediting) of web content30

31

Layout EnginesLayout Enginesand Web Browsersand Web Browsers

�� TridentTrident--basedbased

�� Internet Explorer, Netscape, Internet Explorer, Netscape, MaxthonMaxthon, etc., etc.

�� GeckoGecko--basedbased

�� Firefox, Netscape, Firefox, Netscape, SeaMonkeySeaMonkey, etc., etc.

�� WebKitWebKit--basedbased

�� Chrome, Safari, Chrome, Safari, MaxthonMaxthon, etc., etc.

�� PrestoPresto--basedbased

�� OperaOpera

31 32

User Agent StringsUser Agent Strings

�� Identify web browsers and their versionIdentify web browsers and their version

�� Can have some additional information like layout Can have some additional information like layout engine, user's operating system, etc.engine, user's operating system, etc.

�� Example:Example:

�� Web browser: Firefox 7.0.1Web browser: Firefox 7.0.1

�� Rendering (layout) engine: Gecko/20100101Rendering (layout) engine: Gecko/20100101

�� Operating system: 64Operating system: 64--bit Windows 7bit Windows 7

�� WOW64 = WindowsWOW64 = Windows--OnOn--Windows 64Windows 64--bitbit

�� Windows NT 6.1 = Windows 7Windows NT 6.1 = Windows 7

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1)

Gecko/20100101 Firefox/7.0.1Gecko/20100101 Firefox/7.0.1

32

33

Hardware ServersHardware Servers

33 34

Hardware ServersHardware Servers

�� Physical computer Physical computer (a hardware system) (a hardware system)

dedicated to running one or more such servicesdedicated to running one or more such services

�� Servers are placed in collocation centersServers are placed in collocation centers

�� The server may be:The server may be:

�� Database serverDatabase server

�� File serverFile server

�� Mail serverMail server

�� Print serverPrint server

�� VPS serversVPS servers

35

Web ServersWeb ServersApache, IIS, Apache, IIS, nginxnginx, , lighttpdlighttpd, etc., etc.

35 36

What Do the Web Servers Do?What Do the Web Servers Do?

�� All physical servers have hardwareAll physical servers have hardware

�� The hardware is controlled by the operating The hardware is controlled by the operating

systemsystem

�� Web servers Web servers are software products that use are software products that use

the operating system to the operating system to handle web requestshandle web requests

�� Web servers Web servers serve Web contentserve Web content

�� These requests are redirected to other These requests are redirected to other

software products (ASP.NET, PHP, etc.), software products (ASP.NET, PHP, etc.),

depending on the web server settingsdepending on the web server settings

36