300 likes | 613 Views
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
E N D
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
Browser HTTP protocol handling Content parsing, displaying Content storage Static Dynamic World-Wide Web WWW server HTTP request - URL Client HTTP response - document
Uniform Resource Locator • http://www.vscht.cz/seznam/SeznamVSCHT/index.html
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 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
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
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
Browser manages transfers and interprets the content Common browsers Microsoft Internet Explorer Opera Mozilla Firefox Safari … Browser
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
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