Internet publishing

Ing. Petr Zámostný, Ph.D.místnost: A-72atel.: 4222e-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

Browser HTTP protocol

handling Content parsing,

displaying

Content storage Static Dynamic

Client

WWW server

HTTP request - URL

HTTP response - document

Uniform Resource Locator http://www.vscht.cz/seznam/SeznamVSCHT/index.html

HOW? WHERE? WHAT?http:// www.vscht.cz /seznam/

SeznamVSCHT/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 Static

File system Permanent

documents

Represent static non-specific information

Dynamic Database Documents are

generated dynamically

Documents are created specifically according to the user requirements

http://www.google.com/search?q=internethttp://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