Download Internet publishing

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