You are on page 1of 12

RNDr. Ján 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 Ružický 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.

JÁN LACKO, EUGEN RUŽICKÝ

Názov projektu: MEDZINÁRODNOU SPOLUPRÁCOU KU KVALITE VZDELÁVANIA PEVŠ Kód ITMS: NFP26140230012 dopytovo .orientovaný projekt Moderné vzdelávanie pre vedomostnú spoločnosť Projekt je spolufinancovaný zo zdrojov EÚ .

EUGEN RUŽICKÝ Web technologies and design 2014 .JÁN LACKO.

s. 2014 ISBN 978-80-7478-632-7 . Prague: Wolters Kluwer. Prof. PhD. Prof. 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.Example of citation: LACKO. PhD. 2014. RNDr. Ján Lacko. ISBN 978-80-7478-632-7. 1st ed. RNDr.o. Ján and Eugen RUŽICKÝ. Martin Šperka. Assoc. Eugen Ružický. 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”. Authors RNDr.r. 2014 © Copyright Ján Lacko. PhD. Language Corrections SKRIVANEK SLOVENSKO. Eugen Ružický. Reviewers: Assoc. First edition © Copyright Pan-European University Slovakia. Web technologies and design. Dávid Běhal. PhD.

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

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

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

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

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

[35] P. [34] W3Schools. 2014. Praha: Wolters Kluwer.” [Online]. Operating Systems.org/TR/xpath-datamodel/. Nitra: Forpress. “WEB . English for IT Students. [42] F. Lvovich. [37] E.0 Data Model (XDM) (Second Edition). Nitra: Forpress. [45] M. Lacko and E.” [Online].” [Online]. [41] F.com/website/web_search. [48] V. [36] J. Computer Networks.” [Online]. [Accessed 02/11/2013]. [33] W3Schools. 2014. Černáková.” [Online]. Ružický. [Accessed 21/10/2013]. Jurišová. Introduction to Information Technology. Řepa. 2014. [44] M. 2014. [39] J. Nitra: Forpress. Nitra: Forpress.w3schools.SEO. Available: http://www. Principles of Development and Operation of Business Information Systems. 2014. Available: http://www. Nitra: Forpress. Šperka. Nitra: Forpress.org/XML/ Schema.asp. Business Information Systems. Transcontrol Codes. “XQuery 1.w3schools. “The Extensible Stylesheet Language Family (XSL). Available: http://www.com/RSS/ default. Nitra: Forpress. Essentials of Programming. [38] J. [Accessed 21/10/2013]. “XML Schema. [40] T. Praha: Wolters Kluwer. 2014.0 and XPath 2. Kultán. Nitra: Forpress. Available: http://www. 2014. Available: http://www. Graphical User Interface in Java. Discrete Mathematics.org/Style/XSL/. 2014. [46] J. [32] W3 Consortium.w3. Nitra: Forpress. Voříšek. 2014. Páleník. Fogel. Schindler. Available: http://www. [30] W3 Consortium. [Accessed 21/10/2013]. “RSS Tutorial. Šperka and I. Praha: Wolters Kluwer.org/XML/. [Accessed 21/10/2013]. Palko. Web Technologies and Design. Farkaš. [31] W3 Consortium. Data Structures and Algorithms. 2014. 2014. Process Management and Modelling. [43] V. “Extensible Markup Language (XML).w3. 2014. 2014. Schindler.w3. Introduction into Databases. . Nitra: Forpress.asp. Praha: Wolters Kluwer.w3.BIBLIOGRAPHY 89 [29] W3 Consortium. 2014. [47] I. [Accessed 12/01/2014].” [Online].

13.INDEX A I Ajax 56. 60. 38 . 29. 59. 68. 55. 80 J M Markup language 7. 56. 44. 56 Box model 45. 33. 61 Search engine optimisation (SEO) 83 Selector 44. 56. 73. 42. 39. 29. 82 S Scripting 7. 24. 62 JPEG 22. 29. 18 P PHP 62 PNG 22. 20 CSS 18. 38. 38.23 jQuery 42. 23 R Responsive web design 18 RGB colour model 20 RSS 68. 61. 34. 39. 42. 79 N Navigation 8. 71. 68. 59 Attributes 33 Image file formats 21 B JavaScript 54. 48. 46 C Colours 16. 79 MathML 39. 38. 53. 69. 59 E Element 29. 56 D Document Type Definitions 30 DOM 38. 53. 80 Extensible Stylesheet Language Transformations 75 G GIF 22. 23 H HTML 7. 79 HTML5 38. 48 SVG 22.

Czech Republic.cz tel.. s.JÁN LACKO. Mlynské nivy 48.. Bratislava. EUGEN RUŽICKÝ WEB TECHNOLOGIES AND DESIGN Editorial office Wolters Kluwer s. Slovakia. s. First edition 92 pages.sk Published by Wolters Kluwer. U Nákladového nádraží 6. Typography by Forma. r.christianstudio. Format: A5. www.cz. Printed by Tlačiareň P+M. e-mail: knihy@wkcr. fax: +420 246 040 401 ISBN 978-80-7478-632-7 . in 2014 as its 1 809th publication. Impression: 200 copies. 130 00 Prague 3.wkcr.: +420 246 040 405. r. a. o. 821 09 Bratislava Cover design by Christian www. o. +420 246 040 444.