1. Internet publishing Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222 e-mail: petr.zamostny@vscht.czpetr.zamostny@vscht.cz

2. 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

3. 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

4. Project  Compulsory requirements Structured document At least 3 separate documents XHTML or HTML 4.01 standards Valid documents (http://validator.w3.org).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/).http://www.w3.org/WAI/quicktips/

5. 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)

6. 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/

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

8. WWW – key principles  File (document) transfer, HTTP protocol  Global document address - URL  Hypertext, HTML

9. World-Wide Web  Browser HTTP protocol handling Content parsing, displaying  Content storage Static Dynamic Client WWW server HTTP request - URL HTTP response - document

10. Uniform Resource Locator  http://www.vscht.cz/seznam/SeznamVSCHT/index.html http://www.vscht.cz/seznam/SeznamVSCHT/index.html HOW?WHERE?WHAT? http://www.vscht.cz/seznam/SeznamV SCHT/index.html Communication scheme Source, serverIdentification within the scope of source

11. 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 mailto:petr.zamostny@vscht.cz

12. 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://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

13. Server  IP address http://147.33.2.8/  Domain name http://3 rd level.2 nd level.1 st level http://www.vscht.cz http://student.vscht.cz Each domain has own registrar that controls domain names asignment Řád domény

14. 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 http://www.vscht.Cz/homepage  http://www.vscht.cz/Homepage http://www.vscht.cz/Homepage

15. 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=internet http://www.vscht.cz/informatika-chemie

16. Browser  Browser manages transfers and interprets the content  Common browsers Microsoft Internet Explorer Opera Mozilla Firefox Safari …

17. 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/

18. What does make a webpage?  HyperText Markup Language – HTML Text Tags  Formatting instructions  Information about the document structure References to other data (binary) Title of page This is my first homepage. This text is bold

19. HTML versions and development Markup language SGML  Standard Generalized Markup Language ISO 8879:1986 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

20. Recent web problems  Mixing content and format in HTML  Poor documents structure  Difficult search for specific information  Potential remedy = XML

21. 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

22. 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

23. Web pages development/coding  Text processors Notepad, PSPad  HTML editors HomeSite  WYSIWYG editors FrontPage

25. Notepad

26. HomeSite

27. Readable HTML code

28. „Less readable“ HTML code

29. 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

30. 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