Internet publishing Ing. Petr Zmostn, Ph.D. mstnost: A-72a tel.: - - PowerPoint PPT Presentation

Internet publishing

• Ing. Petr Zámostný, Ph.D.

místnost: A-72a tel.: 4222 e-mail: petr.zamostny@vscht.cz

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
• Comprehensibility
• Use of hypertext
• Readability
• Structure – is there clear hierarchy of presented information (chapters, lists, tables)?
• Language
• 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 Client HTTP request - URL 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:petr.zamostny@vscht.cz

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
• Each domain has own registrar that controls domain

names asignment

Řád domény

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

• Dynamic
• Database
• Documents are

generated dynamically

• Documents are created

specifically according to the user requirements

Static

• File system
• Permanent

documents

• Represent static non-

specific information

http://www.google.com/search?q=internet http://www.vscht.cz/informatika-chemie

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 time-

consuming than with the WYSIWYG editors, but it is not true for an experienced coder