Download Slide 1

Internet publishing
Ing. Petr Zámostný, Ph.D.
místnost: A-72a
tel.: 4222
e-mail: [email protected]
Syllabus

1. Introduction – web servers and web browsers

2. HTML – basic page structure

3. HTML – basic constructions, data transfers via FTP

4. HTML - forms

5. CSS

6. CSS vs. HTML comparison

7. JavaScript - basics

8. Graphical data and multimedia - formats (GIF, PNG, JPEG), usage

9. Usability - homepage

10. Usability - navigation, search, JavaScript

11. Usability – web design for handicapped users (lowered sight or movement capabilities, older persons, etc.)

12. Anonymity of internet users, personal data protection, spam

13. Legal and moral aspects - quotation, referring, responsibility for published content

14. Presentation of created projects
http://www.vscht.cz/informatika-chemie
What is needed to pass the exam
 Project – make your own website
 Evaluation of third-party website
 Choose preffered form
 One-page written text
 5-10 min presentation
Project

Compulsory requirements








Structured document
At least 3 separate documents
XHTML or HTML 4.01 standards
Valid documents (http://validator.w3.org).
Use external CSS.
Use some graphics in separate folder.
Make it available at http://web.vscht.cz/…
Recommended features


Minimize XHTML attributes formatting, use CSS instead.
Follow recommendations for making the pages accessible by
handicapped users (http://www.w3.org/WAI/quicktips/).
Website evaluation



Technical quality
Navigation – placement, usability, logic, ...
Content, information value





Language




Comprehensibility
Use of hypertext
Readability
Structure – is there clear hierarchy of presented information (chapters, lists, tables)?
Grammar
Composition
Objectivity
Graphics, design:





Font size
Colors, contrast, readability
Design quality
Impact of screen resolution, page weight
Impression (subjective)
Information sources
 Information systém on ICT
 http://student.vscht.cz
 Materials for seminars
 http://www.vscht.cz/kot/cz/studijni-materialy.html
 Webdesign
 Jakob Nielsen: Web design
 WWW standards
 http://www.w3.org/
History of WWW
 1950 – Douglas Engelbert – interlinked
documents
 1980 – Ted Nelson – „Xanadu“ project
 1989 – CERN - Tim Berners-Lee
 Software for developing hypertext
documents
 Term „World-Wide Web“
 Internet infrastructure
 HTML, HTTP, URL technologies
WWW – key principles
 File (document) transfer, HTTP
protocol
 Global document address - URL
 Hypertext, HTML
World-Wide Web
WWW server
HTTP request - URL
Client
HTTP response - document
 Browser
 HTTP protocol
handling
 Content parsing,
displaying
 Content storage
 Static
 Dynamic
Uniform Resource Locator
 http://www.vscht.cz/seznam/SeznamVSCHT/index.html
HOW?
WHERE?
WHAT?
http://
www.vscht.cz
/seznam/SeznamV
SCHT/index.html
Communication
scheme
Source, server
Identification within
the scope of source
Scheme 1/2
 http://
 http://www.vscht.cz/kot/cz/index.html
 HyperText Transfer protocol
 ftp://
 ftp://ftp.vscht.cz/pub/antivir/Blaster/FixBlast.exe
 File Transfer Protocol
 file:///
 file:///c|/windows/win.ini
 Local file
 mailto:
 mailto:[email protected]
Scheme 2/2
 Scheme is important
 ftp://ftp.vscht.cz/pub/antivir/Blaster/FixBlast.exe
 http://ftp.vscht.cz/pub/antivir/Blaster/FixBlast.exe
 http://ifis.vscht.cz/
 https://ifis.vscht.cz/
 Browsers complete missing scheme, so that it
works in most cases
Server
 IP address
 http://147.33.2.8/
 Domain name
 http://3rdlevel.2ndlevel.1stlevel
 http://www.vscht.cz
 http://student.vscht.cz
Řád domény
 Each domain has own registrar that controls domain
names asignment
Location (path)
 Corresponds to the real or the virtual
location of the document in the server file
system
 Paths are case-sensitive
 http://www.vscht.cz/homepage
 http://www.vscht.Cz/homepage
 http://www.vscht.cz/Homepage
Content
 Static
 File system
 Permanent
documents
 Represent static nonspecific information
http://www.vscht.cz/informatika-chemie
 Dynamic


Database
Documents are
generated dynamically

Documents are created
specifically according to
the user requirements
http://www.google.com/search?q=internet
Browser
 Browser manages transfers and interprets the content
 Common browsers





Microsoft Internet Explorer
Opera
Mozilla Firefox
Safari
…
Webpage
 Webpage – document (file) containing text
data and formatting instructions
 The formatting instructions are interpreted
by the browser
 Standards – a way to ensure the browsers
will understand the formatting instructions
 W3C – World Wide Web Consortium
 http://www.w3.org/
What does make a webpage?
 HyperText Markup Language – HTML
 Text
 Tags
 Formatting instructions
 Information about the document structure
 References to other data (binary)
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
HTML versions and development
 Markup language SGML

Standard Generalized Markup Language ISO 8879:1986
 2.0 – the first standardized version
 3.0 – unimplemented design
 Specifications were too difficult for browser
developers
 3.2 – Standardized as subset of 3.0 design + selected
browser-specific features that were already
implemented by browser developers
 4.0, 4.01 – final version
 Cascading style sheets (CSS) used for formatting
Recent web problems
 Mixing content and format in HTML
 Poor documents structure
 Difficult search for specific
information
 Potential remedy = XML
XML
 eXtensible Markup Language
 SGML „light“
 Can be used as standard to define other
languages based on XML
 Can create content oriented structure
 More strict syntax than SGML
 = much easier implementation
XHTML
 eXtensible HyperText Markup Language
 HTML 4.01 restandardized to follow XML
rules
 Meets XML standard specifications
 But does not require full XML support by the
browser
 More strict
Web pages development/coding
 Text processors
 Notepad, PSPad
 HTML editors
 HomeSite
 WYSIWYG editors
 FrontPage
FrontPage
Notepad
HomeSite
Readable HTML code
„Less readable“ HTML code
Editors comparison
 WYSIWYG
 Relatively easy operation
 „Precise“ control of appearance, but poor
platform independence
 Problems with standard compatibility
 Document is not created transparently – code
cannot be fully controlled
 Documents contain editor-specific markup
Editors comparison
 Text and HTML editors
 Require active knowledge of standards
 Full control over the code
 Page development may seem more timeconsuming than with the WYSIWYG editors, but
it is not true for an experienced coder