1 / 30

Internet publishing

This course covers the basics of web design, HTML, CSS, JavaScript, graphics, usability, and legal aspects of internet publishing.

dbrad
Download Presentation

Internet publishing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet publishing Ing. Petr Zámostný, Ph.D.místnost: A-72atel.: 4222e-mail: petr.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). • 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/).

  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. Browser HTTP protocol handling Content parsing, displaying Content storage Static Dynamic World-Wide Web WWW server HTTP request - URL Client HTTP response - document

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

  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

  12. Scheme 2/2 • Scheme isimportant • 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/ • Browserscomplete missing scheme, so that it works in most cases

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

  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

  15. 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 Content http://www.google.com/search?q=internet http://www.vscht.cz/informatika-chemie

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

  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) <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>

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

  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

  24. FrontPage

  25. Notepad

  26. HomeSite

  27. Readable HTML code

  28. „Lessreadable“ 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

More Related