RNDr. Jn Lacko, PhD.

, is a graduate of the Comenius University in Bratislava, majoring in computer graphics, mathematics

and computer science. Currently he teaches at the faculty of
Informatics at the Pan-European University in Bratislava. He
specialises in computer graphics, visualization and cultural
heritage data presentation via various methods including web
presentation. Mr. Lacko is also the author or co-author of many
articles and conference papers. He was for several years organiser of the oldest
annual conference on computer graphics in the middle Europe named SCCG
Spring Conference on Computer Graphics.

ISBN 978-80-7478-632-7

9 788074 786327

WEB TECHNOLOGIES
AND DESIGN
WEB TECHNOLOGIES AND DESIGN

Dr. Eugen Ruick is an Assoc. Professor at the Faculty of Informatics of the Pan-European University in Bratislava and he has
been a dean of this faculty since 2012. His education includes
M.Sc. (1973) in Mathematics from Charles University, Prague,
Ph.D. (1978) from the Kiev State University in Applied Mathematics and Dr. Nat. Sci. (1978) in Geometry from Comenius
University, Bratislava. He is the author or co-author of 4 textbooks from Computer Graphics, articles and conference papers from mathematics, informatics and its applications. Besides that he has taught Medical Image
Techniques at the Slovak Technical University, Bratislava. He worked also at the
Ministry of Economy of the Slovak Republic on the implementation of systems
to support foreign trade. Among his research interest are: computer graphics,
geometrical modelling and project management.

JN LACKO, EUGEN RUICK

Nzov projektu:
MEDZINRODNOU SPOLUPRCOU KU KVALITE VZDELVANIA
PEV
Kd ITMS: NFP26140230012
dopytovo - orientovan projekt

Modern vzdelvanie pre vedomostn spolonos

Projekt je spolufinancovan zo zdrojov E

JN LACKO, EUGEN RUICK

Web technologies
and design

2014

Example of citation:
LACKO, Jn and Eugen RUICK. Web technologies and design. 1st ed. Prague:
Wolters Kluwer, 2014. ISBN 978-80-7478-632-7.
This publication has been published with the financial support of European Union
within Operational Programme Education as a result of the project under the name
Quality Education at the Pan-European University with International Cooperation.
This publication reflects the views only of the authors, and the European Union cannot
be held responsible for any use which may be made of the information contained therein.

Authors
RNDr. Jn Lacko, PhD.

Assoc. Prof. RNDr. Eugen Ruick, PhD.
Language Corrections SKRIVANEK SLOVENSKO, s.r.o.
Reviewers: Assoc. Prof. Martin perka, PhD.

RNDr. Dvid Bhal, PhD.
First edition

Copyright Pan-European University Slovakia, 2014

Copyright Jn Lacko, Eugen Ruick, 2014
ISBN 978-80-7478-632-7

Contents
List of Figures .............................................................................................. 6
List of Tables ................................................................................................. 6
1 Introduction......................................................................................... 7
2 From scratch to web design.......................................................... 8
2.1 Functional Design.................................................................................... 9
2.1.1 F-shape: Screen Rading.................................................................. 12
2.2 Navigation................................................................................................ 13
2.3 Graphic Design ....................................................................................... 16
2.3.1 Colours in Web Design.................................................................. 16
2.3.2 Responsive Web Design................................................................... 18
2.3.3 Colour Models for Web Design....................................................... 20
2.3.4 Image File Formats.......................................................................... 21
3 HTML template......................................................................................... 29
3.1 Why XHTML Syntax? ............................................................................ 33
3.2 HTML5................................................................................................... 38
4 Style sheet................................................................................................ 42
4.1 CSS3........................................................................................................ 48
5 Client side scripting .......................................................................... 53
5.1 JavaScript Libraries................................................................................... 55
5.1.1 jQuery............................................................................................ 56
5.2 Ajax.......................................................................................................... 59
6 Server side scripting .......................................................................... 61
6.1 PHP......................................................................................................... 62
6.1.1 Basic Syntax .................................................................................. 63
7 XML and transformations .............................................................. 68
7.1 XML........................................................................................................ 68
7.2 DTD and Schema.................................................................................... 71
7.3 XSLT........................................................................................................ 75
8 When HTML is not enough .............................................................. 79
8.1 XML applications....................................................................................... 79
8.1.1 MathML........................................................................................ 79
8.1.2 RSS................................................................................................ 82
8.2 Basic SEO Techniques.............................................................................. 83
BIBLIOGRAPHY .................................................................................................. 87
Index .................................................................................................................. 90

List of Figures
Figure 1 Wireframe of website layout sketched by hand......................................... 19
Figure 2 Wireframe model of index page................................................................ 19
Figure 3 Wireframe model of subpage.................................................................... 20
Figure 4 The RGB colour model mapped to a cube................................................ 21
Figure 5 Example of SVG images........................................................................... 25
Figure 6 Graphic design of testing index web page................................................. 26
Figure 7 Graphic design of testing subpage............................................................. 27
Figure 8 Slices Adobe Photoshop example........................................................... 28
Figure 9 Lorem ipsum text example........................................................................ 28
Figure 10 HTML template of index.html in Mozilla Firefox
without a Cascade style sheet............................................................................. 36
Figure 11 Box model.............................................................................................. 46
Figure 12 Implemented CSS into index.html template........................................... 48
Figure 13 Implemented CSS into subpage.............................................................. 49
Figure 14 Company subpage with hidden Contact part......................................... 57
Figure 15 Company subpage with displayed Contact part...................................... 57
Figure 16 Questionnaire design.............................................................................. 64
Figure 17 XML without XSLT and CSS rendered in the browser........................... 71
Figure 18 XSL template for Products page.............................................................. 78

List of Tables
Table 1 Raster image file format comparison.......................................................... 23
Table 2 CSS selector patterns................................................................................. 44

1 Introduction
Building a website is a complex process. It consist of web design, web development,
testing and user experience. In this book we would like to present the steps of the
process and technologies for building a simple website. We will talk about the web
design from the point of view of customers and web designers and later about the
process of web development including scripting on the browser and server sides.
Each part of the process is important in the whole lifecycle of a new website.
In this book we will briefly describe various technologies used in web development
like HTML, CSS, JavaScript, PHP, XML and also about their applications. This
book is not a course book for each technology, but is a simple overview book. Its
aim is to motivate the reader to study other interesting books from this domain.
The reader will find interesting information about the process of web development illustrated by an examples in this book. We use the fictional software company named myquotes in example. Through the reading following chapters of
this book you will see how we build a website for this company. We will start
with the web design process and will then continue with building static HTML
template, adding styles and some scripting, and last but not least we will add
some structural data using the XML and XSL transformation language. Each
part of the process is supported with some theory about the technologies.
If you are interested in web development please do not forget to visit the W3
Consortium website (http://www.w3.org) for detailed specification of various
markup languages and other technologies. A good starting point for learning
web technologies is the W3Schools website (http://www.w3schools.com) providing user friendly information, tests and examples.
We hope that this book will motivate you to learn about web technologies in
more detail and discover the magic of web design and web development.

BIBLIOGRAPHY
[1] Web design, [Online]. Available: http://en.wikipedia.org/wiki/Web_design.
[Accessed 21/04/2014].
[2] A. Beam, I screen, you screen, we all screen, 19/06/2009. [Online]. Available:
http://www.boston.com/ae/media/articles/2009/06/19/paper_vs_computer_
screen/. [Accessed 12/04/2014].
[3] J. Nielsen, F-Shaped Pattern For Reading Web Content, 17/04/2006. [Online].
Available: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/. [Accessed 21/04/2014].
[4] Eyetools, The Importance of the Golden Triangle, [Online]. Available: http://
www.mediative.com/research/golden-triangle. [Accessed 21/04/2014].
[5] E. Marcotte, Responsive Web Design, 25/05/2010. [Online]. Available: http://
alistapart.com/article/responsive-web-design. [Accessed 10/11/2013].
[6] Z. M. Gillenwater, Examples of flexible layouts with CSS3 media queries, in
Stunning CSS3, 2010, p. 320.
[7] JPEG Comittee. [Online]. Available: http://www.jpeg.org/. [Accessed 21/06/2013].
[8] W3 Consortium, Graphics Interchange Format, Version 87a, 13/10/2012.
[Online]. Available: http://www.w3.org/Graphics/GIF/spec-gif87.txt. [Accessed
03/05/2013].
[9] G. Roelofs, Portable Network Graphics, [Online]. Available: http://www.libpng.
org/pub/png/. [Accessed 03/05/2013].
[10] W3C SVG Working Group, Scalable vector graphics, [Online]. Available: http://
www.w3.org/Graphics/SVG/. [Accessed 03/05/2013].
[11] W3 Consortium, HTML & CSS, [Online]. Available: http://www.w3.org/standards/webdesign/htmlcss. [Accessed 19/06/2013].

88

BIBLIOGRAPHY

[12]
W3Schools, DTD, [Online]. Available: http://www.w3schools.com/DTD/.
[Accessed 19/06/2013].
[13] W3 Consortium, XHTML 1.1 - Module-based XHTML - Second Edition,
[Online]. Available: http://www.w3.org/TR/xhtml11/. [Accessed 14/07/2013].
[14] W3 Consortium, HTML 5, [Online]. Available: http://www.w3.org/TR/html5/.
[Accessed 03/08/2013].
[15] W3 Consortium, MathML, [Online]. Available: http://www.w3.org/Math/.
[Accessed 21/01/2014].
[16] W3 Consortium, Document Object Model, [Online]. Available: http://www.
w3.org/DOM/. [Accessed 12/03/2014].
[17] W3 Consortium, Overview of SGML Resources, [Online]. Available: http://
www.w3.org/MarkUp/SGML/. [Accessed 21/01/2014].
[18] W3Schools, JavaScript Tutorial, [Online]. Available: http://www.w3schools.
com/js/DEFAULT.asp. [Accessed 14/03/2014].
[19] W3Schools, CSS Selector Reference, [Online]. Available: http://www.w3schools.
com/cssref/css_selectors.asp. [Accessed 14/08/2013].
[20] W3 Consortium, Cascading Style Sheets (CSS) Snapshot 2010, [Online]. Available: http://www.w3.org/TR/CSS/. [Accessed 14/09/2013].
[21] Wikipedia, Client side scripting, [Online]. Available: http://en.wikipedia.org/
wiki/Client-side_scripting. [Accessed 14/06/2013].
[22] jQuery, jQuery, [Online]. Available: http://jquery.com/. [Accessed 16/02/2014].
[23] W3Schools, Ajax Tutorial, [Online]. Available: http://www.w3schools.com/ajax/
default.ASP. [Accessed 16/09/2013].
[24] J. J. Garret, Ajax: A New Approach to Web Applications, 18/02/2005. [Online].
Available: https://web.archive.org/web/20080702075113/http://www.adaptivepath.com/ideas/essays/archives/000385.php. [Accessed 21/08/2013].
[25] PHP.net, PHP.net, [Online]. Available: http://www.php.net/. [Accessed
14/09/2013].
[26] GNU Operating system, GNU GENERAL PUBLIC LICENSE, [Online].
Available: http://www.gnu.org/copyleft/gpl.html. [Accessed 24/10/2013].
[27] Wikipedia, Comparison of web application frameworks, [Online]. Available:
http://en.wikipedia.org/wiki/Php_framework#PHP. [Accessed 14/09/2013].
[28]
Wikipedia, Content management system, [Online]. Available: http://
en.wikipedia.org/wiki/Content_management_system. [Accessed 14/10/2013].

BIBLIOGRAPHY

89

[29] W3 Consortium, Extensible Markup Language (XML), [Online]. Available:

http://www.w3.org/XML/. [Accessed 21/10/2013].
[30] W3 Consortium, XML Schema, [Online]. Available: http://www.w3.org/XML/
Schema. [Accessed 21/10/2013].
[31] W3 Consortium, The Extensible Stylesheet Language Family (XSL), [Online].
Available: http://www.w3.org/Style/XSL/. [Accessed 21/10/2013].
[32] W3 Consortium, XQuery 1.0 and XPath 2.0 Data Model (XDM) (Second Edition), [Online]. Available: http://www.w3.org/TR/xpath-datamodel/. [Accessed
21/10/2013].
[33] W3Schools, RSS Tutorial, [Online]. Available: http://www.w3schools.com/RSS/
default.asp. [Accessed 02/11/2013].
[34] W3Schools, WEB - SEO, [Online]. Available: http://www.w3schools.com/website/web_search.asp. [Accessed 12/01/2014].
[35] P. Farka, Transcontrol Codes, Praha: Wolters Kluwer, 2014.
[36] J. Fogel, Operating Systems, Nitra: Forpress, 2014.
[37] E. Juriov, English for IT Students, Nitra: Forpress, 2014.
[38] J. Kultn, Introduction into Databases, Nitra: Forpress, 2014.
[39] J. Lacko and E. Ruick, Web Technologies and Design, Nitra: Forpress, 2014.
[40] T. Plenk, Computer Networks, Nitra: Forpress, 2014.
[41] F. Schindler, Data Structures and Algorithms, Praha: Wolters Kluwer, 2014.
[42] F. Schindler, Essentials of Programming, Nitra: Forpress, 2014.
[43] V. epa, Process Management and Modelling, Nitra: Forpress, 2014.
[44] M. perka and I. Lvovich, Introduction to Information Technology, Nitra: Forpress, 2014.
[45] M. perka, Graphical User Interface in Java, Praha: Wolters Kluwer, 2014.
[46] J. Voek, Principles of Development and Operation of Business Information Systems, Praha: Wolters Kluwer, 2014.
[47] I. ernkov, Business Information Systems, Nitra: Forpress, 2014.
[48] V. Palko, Discrete Mathematics, Nitra: Forpress, 2014.

INDEX
A

Ajax 56, 59
Attributes 33

Image file formats 21

JavaScript 54, 55, 59, 62

JPEG 22,23
jQuery 42, 56

Box model 45, 46

C
Colours 16, 20
CSS 18, 29, 42, 48, 56

D
Document Type Definitions 30
DOM 38, 39, 56, 59

E
Element 29, 34, 38, 44, 56, 69,
73, 80
Extensible Stylesheet Language Transformations 75

G
GIF 22, 23

H
HTML 7, 29, 33, 38, 42, 53, 60, 61,
68, 79
HTML5 38, 80

M
Markup language 7, 29, 39, 68, 71, 79
MathML 39, 79

N
Navigation 8, 13, 18

P
PHP 62
PNG 22, 23

R
Responsive web design 18
RGB colour model 20
RSS 68, 82

S
Scripting 7, 38, 53, 61
Search engine optimisation (SEO) 83
Selector 44, 48
SVG 22, 24, 38

JN LACKO, EUGEN RUICK

WEB TECHNOLOGIES
AND DESIGN

Editorial office

Wolters Kluwer s. r. o.
Mlynsk nivy 48, 821 09 Bratislava
Cover design by Christian
www.christianstudio.sk
Published by Wolters Kluwer, a. s.,
U Nkladovho ndra 6, 130 00 Prague 3,
Czech Republic,
in 2014 as its 1 809th publication.
First edition
92 pages. Format: A5. Impression: 200 copies.
Typography by Forma, s. r. o., Bratislava.
Printed by Tlaiare P+M, Slovakia.
www.wkcr.cz, e-mail: knihy@wkcr.cz
tel.: +420 246 040 405, +420 246 040 444, fax: +420 246 040 401
ISBN 978-80-7478-632-7