web design and ui technologies - ucg.ac.me · your images, blog post, videos, etc. disadvantage: it...
TRANSCRIPT
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