Faculty of Electrical Engineering

Web Development & Design

- Seminar paper -

Mentor: Milica Bogdanovic, MA

Student: Mladen Jotanovic, 1135/11

Banja Luka, February 2013

Contents
Introduction ................................................................................................................. 2 Historical Facts ........................................................................................................... 3 Structure of a web site ............................................................................................ 4 Creating appearance using Html and Css............................................................... 6 Domain and Hosting ............................................................................................... 8 HTML 5 ....................................................................................................................... 9 Joomla ................................................................................................................... 10 Basics of SEO and Graphic Design .......................................................................... 11 Search Engine Optimization.................................................................................. 11 Graphic design Adobe Photoshop & CorelDraw ........................................... 11 Online education - Scientific View ............................................................................ 12 Conclusion ................................................................................................................ 13 Literature .................................................................................................................. 14

Introduction
Web development is term for the work involved in developing web page for the Internet (World Wide Web) or an intranet (private network). Usually, under web development we consider two different areas: web design and web programming. Web design represent work on design and structure of a web page. It includes markup languages such as: HTML (Hypertext Markup Language) and CSS (Cascading Style Sheet). Often is used XML (Extensible Markup Language). Web programming is process of making web aplication. Web aplication is program that runs dynamic areas of web page, such as movement of object on page, login to page, logout, connect to database, display informations from database... Programming languages that we are using in web programming are: PHP (Hypertext Preprocessor), SQL (Structured Query Language) database language, ASP (Active Server Pages) Microsoft web language, Ajax (ASP and JavaScript), Flash... It is hard to say which programming language is best, cause every of them has its own advantage and its own purpose, but PHP and MySql are most widely used. We are using PHP and MySql together in common, to create dynamic page, as we are also using HTML and CSS together to create stylized web page. HTML's purpose is to hold information (text, images...) and create structure of a web page. CSS is language for styling. In CSS we can set colors, borders, backgrounds for different parts of site. That also can be done using HTML, but it is more complicated and not effective as CSS. When we want to store some data on web for longer period, we can use database. We can create database using MySql. MySql is open source relational database management system based on SQL. Functions for data managment are included in MySql and they can be used independently or through aplication. We can make aplication which can include operations with database that may consist of getting data, deleting, storing, etc. It is important to say something about CMS. CMS means Content Management System and it is modern model for object web programing. It is used to manage data online. First CMS is created to alow people who are not familiar with programing and design to make their own web page, blog or database. Today, many programmers using CMS to faciliate their work, cause all CMSs has included programming functions. The most known CMS today are Joomla, Wordpress and Drupal. Joomla runs over three milions web sites. Now, when we are informed about basic knowledge of web development, we can tell something about hystory of web development. 2

Historical Facts
HTML is proposed and prototyped by Tim Berners Lee in 1991. He described 18 elements that repersents relatively simple design of HTML. Eleven of these elements still exists in HTML 4. Latest version of HTML is HTML5. Style sheets have existed in one form or another since the beginnings of SGML (Standard Generalized Markup Language) in the 1980s. As HTML grew, it came to take a wider variety of stylistic capabilities to meet the demands of web developers. CSS originaly was published in 1998, but it's development took a long period since developing HTML. PHP was originally created by Rasmus Lerdorf in 1995. While PHP originally stood for Personal Home Page, it is now said to stand for PHP: Hypertext Preprocessor. ASP, also known as Classic ASP or ASP Classic, was Microsoft's first serverside script engine for dynamically generated web pages. It is initially released in 1996. as addon to some Microsoft products. Today, ASP is used in many web pages, especially when aplications reqires lot of user interactivity. SQL was initially developed at IBM by Donald D. Chamberlin and Raymond F. Boyce in the early 1970s. In the late 1970s, Relational Software, Inc. (now Oracle Corporation) saw the potential of the concepts described by Codd, Chamberlin, and Boyce and developed their own SQL-based RDBMS with goal of selling it to the U.S. Navy, Central Intelligence Agency, and other U.S. government agencies. In June 1979, Relational Software, Inc. introduced the first commercially available implementation of SQL, Oracle V2 (Version2) for VAX computers. The first content management system (CMS) was announced at the end of 1990s. This CMS was designed to simplify the complex task of writing numerous versions of code and to make the website development process more flexible. One of the most known CMS, Joomla was developed in 2005. from Mambo (simple CMS similar to Joomla). Since March 2012, Joomla has been downloaded over 30 million times. Wordpress was first released on May 27, 2003, by founders Matt Mullenweg and Mike Little. Since December 2011, version 3.0 had been downloaded over 65 million times.

Structure of a web site

Main structure of a web site consist of html tags enclosed inside angle bracket. Tags are instructions to web browser how to display a web page. Except some specific tags, most of them must have closing tag. For example, if we 'open' html document with <html>, we have to close it on the bottom of the page with </html>. Closing tags always have sign / before instruction. Instruction is text inside these < >. Web browser 'reads' these instructions and determinate how to represent content inside tags. Between tags we can put content. For example <div>This is some text...</div>. This will display clear text on web browser. But <a href=http://www.link.com> Some link</a> will display link to website quoted under these signs .... Html has it's own rules on how to put these tags. If we opened <body>, then <div>, we first have to close </div>, then </body>. Inside this tags we can put code for styling content, but usually it is done in css. For example, I am going to open web page with <html>, then put a header <head><title>Title</title></head>, then I am going to open body of web page with <body> and inside 'body' I will put content that will be displayed on browser <body bgcolor=#F0FF00>. <div><font color=#000000>Some text</font></div> <div><img src=images/image1.png width=600 height=400 /></div> </body> Here I used some styling options, like bgcolor=#F0FF00 that will make background yellow. Also, font color=000000 will make color of font black. In the image tag, after image adress there is width=600 height=400 that will make image sized 600 pixels wide and 400 pixels high. Here we can note that image tag does not have closing tag. It is important to web developer to make his code clean, so we always split html and style code. Style code is going in css page. This html and css code can be written in classic text editor like Notepad, or Notepad++. It must be saved as .html file. Css code can also be written in text editor and it must be saved sa .css file. Let's say something about using php, sql together with html and css in web site.

Html and css are providing visual appearance, but for other funcionalities, like site members option, database function, we need programming language. Here I will mention structure of web page with php and sql although it is very similar for other languages. In modern object web programming, we are using MVC Model View Controler. That is a software architecture pattern that separates representation of information from user's interaction with it. This is pretty complicated, so I am going to explain basics metods for use php with html, or rather inside html. Sql code can not be directly written inside .php file. We have to use php code that will hold sql commands. Php code goes into its own tags <?php ...some code... ?> Code written in php must be saved as .php, but some commands will work also if file is saved as .html. Everything inside php tags will be considered as php code and if developer wrote something that server can't reconize as php code, error message will be shown on browser output. This is not the case with html. If developer wrote something wrong inside html tag, it wil be displayed like text, tag, that wrong code and text between opening and closing tags. That happening because html is directly executed ('shown' is maybe better word) on browser, while php is executed by server as aplications, and results of aplication are displayed on browser. Php and html code can be written together in file. This is 'messy' programming but functionality is not reduced. For example, I will make file that on server should first connect to database, second show some text through php command, and then show text through Html command. <?php mysql_connect(localhost,db_user_name,password) or die(mysql_error()); mysql_select_db(database_name) or die(mysql_error()); ?> <html><head><title>Demo</title></head> <body> <?php echo(This is php text!); ?> <div><p>And this is html text!</p></div> </body></html> That is simple example which shows connection between php and html and one simple structure of a web page. 5

Creating appearance using Html and Css

Through this chapter I will make simple web page that consist of one Html page, and one css page. I will start with Html. I want to create a web page that will be divided into two parts. One will be header and another one will be body. I want header colored red, and body colored black. Web page should be centred and fixed width of 960px. Behind that fixed page, I will set background made of texture. I am opening code with standard html tags, but I will add line that determinate which char set is in use. That means that in html file is specified what kind of letters we can use. <!-- ... --> Theese tags are standard code for comment in html, I will use it through the code to explain what means exact command. <html><head><title>Content title</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <!--Here I am using universal char set utf-8 and with link rel=..: I have connected this html file with its css file style.css that is placed in folder css. --> <body> <!-- body is standard html tag and it represent whole site --> <div id=header> <img src=images/logo.png /> </div> <!-- Inside header part I placed logo sign, that can be found in fictive folder images. This part id=header determinates which kind of container it will be. Appearance of that container on page in browser will depend on css code that is assigned in .css file. Also I can place <header> </header> tags and describe it in css instead of id=header. This is not case with other containers. --> <div id=mainbody> <!-- similar, mainbody is container where main content goes. Its style is described in css file. -->

<div><p>Text....<p> Free text<br/> More text... </div></div></body></html> Apperance of mainbody is defined in css, also, I will define font settings for text between <p></p> tags. Whole text between theese tags will be placed in one row on browser (is there enough place). This tag <br/> transfers text in new row. If in css file for settings are not defined globaly, settings for <p></p> will not apply on text that is not placed inside theese tags. First closing div wil close classic div, and second closing div will close mainbody div. I am going to create style.css file, which will contain commands for browser on how to display containers which I placed in html. First, css doesn't have opening tags, it doesn't have tags at all. Css doesn't have classical command. It consist of informations, that browser reads. To call specified container, developer can put sign # and after it, put name that he has placed in html div's id. After name of container, there goes { } which is called block. Inside block developer can place code directions to browser. Body and p have not # (sharp) sign before 'body' or before 'p'. Also, some other directions can be placed in css file independently using . sign before name. Now, I will write css code for my html page which I made previosly. /* .... */ Theese signs stands for standard comment brackets for comment in css. In comments I will explain every block that I am going to write. body{ background: url(images/texture.png); } /* This code will place texture background from image texture.png that can be found in folder images. Size of picture must be small, not larger than 400x400px. Picture won't be streched, it will be continuously shown. Also we can put fixed sized picture, but that is bad, cause web page will be displayed on different sizes of monitors. */ #mainbody{ width: 960px; position: relative; background: #000000; } 7

/* This is for mainbody container. Width is fixed on 960px; Position will be centred. Relative means that mainbody will be in the middle of relative width of screen. Background color will be black. Code #000000 stands for black. These color codes are universal for the web. */ #header{ background: #FF0000; width: 960px; position: relative; height: 200px; } /* Header has same width and position, but fixed height, and red background color. #FF0000 stands for red color. */ p{ font-size: 14px; color: #FFFFFF; } /* Text inside <p> </p> wil be 14px sized and white. #FFFFFF is white color. */ This is it for this small page. All css code should be saved in style.css file. This website is now independent of php or sql, or some other programming language, but as needed developer can place code inside html page. In that case, that page should be saved as .php. File which contain html code can be saved with any name, with extension .html, but if we wont automatic opening on domain, we have to name it index.html.

Domain and Hosting

To make web page available on internet, we have to buy (or make own) hosting. Hosting is disk space on server. Server runs our web page. Domain name is web adress (www.our-adress.com) that is connected to our hosting service. When browser open web adress it access to our server space, determinate which file is default (if file is not specified in adress) and shows that file.

HTML 5
HTML5 is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support, but also enhance support for creating web applications that can interact with the user, his local data, and servers, more easily and effectively than was possible previously. As said by Smashing Magazine, Some have embraced it, some have discarded it as too far in the future, and some have abandoned a misused friend in favor of an old flame in preparation. Whatever side of the debate youre on, youve most likely heard all the blogging chatter surrounding the new hotness that is HTML5. Its everywhere, its coming, and you want to know everything you can before its old news, html5 came unexpectedly fast. Wiki sources explain to us why html5 is published: HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents. It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more operable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications. For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. In December 2011, research firm Strategy Analytics forecast sales of HTML5 compatible phones will top 1 billion in 2013. HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.

Joomla
Joomla is second most popular CMS platform. It is easy to configure and use. Joomla alows developer to easily make web site, sometimes without using knowledge on html, css and programing languages. To install Joomla, we need database and some host space (can be installed on localhost). Installation is simply. From official Joomla site we can download fresh installation and copy all files to our server. When we run domain associated to our server, browser will show Joomla installation page. In few simple steps, we connect Joomla with database and set basic information for our new site. After installation, developer must delete 'installation' folder, and then he can accsess to fresh installed web page. Adding /administrator to our main domain will open administration page of Joomla. There developer can login (with data that he has specified in installation) to administration. In the administration section developer can simply add new articles, new menu items and new contacts. Joomla is completly based on MVC pattern. It is simple to install addon to Joomla. Addons can be in the form of module, component, or plugin. Plugins are responsible for assisting in showing content. Modules ussualy have some specific role as assist for components or have their own function. Components are the most independent parts of Joomla. They usually have some big role in website. For example developer can install component for social network and adjust whole site to social networking. All of three versions of addons can be installed on same way, thorugh Joomla default installer. Developer simply open it, found package on his computer, and choose it. Then Joomla install it. Joomla addons can be found on Joomla official website. Making some of theese addons is far more difficult. It request advanced knowledge on web programming. Joomla has system for templates. Developer can modify site look through modifying template (also known as theme). Developer also can make his own template. That request advanced knowledge of html and css. Joomla can be used for amateur website development, or as proffesional tool. Other CMS platforms are similar. Most used CMS is Wordpress, then, after Joomla is Drupal, Textpattern... Worpress is most known as bloging platform.

10

Basics of SEO and Graphic Design

Search Engine Optimization
SEO is today one of most powerfull marketing tool. Part of SEO must be done in web site development, that is way is included in this essey. SEO can be divided into two parts on-site SEO, and off-site SEO. On-site seo is part which has to be done during website development. Google and other search engines determinating which site is best for its visitors and depending on its evaluation put web site on specified position in SERP (search engine result page). On-site seo consist of placing right text on right place, using right headings, using meta keywords (in site header) and series of other actions. Off-site is mostly creation of incoming links to our site, series of actions on social marketing and things like that. Best SEO tool is interesting content. When developer has good looking site with great content, every visitor will be back again. SEO is today profitable business.

Graphic design Adobe Photoshop & CorelDraw

Graphic design is closely related to web design. However theese are two different areas and web designer is not always graphic designer. Two powerfull tools for design are Adobe Photoshop and CorelDraw. Differences between them are essential. Adobe Photoshop uses Raster graphics that is a dot matrix data structure, while CorelDraw uses Vector graphic that is tool which use geometrical structures such as points, lines, curves, and shapes or polygons, which are all based on mathematical expressions. Graphics designer using Photoshop when they have to edit image, and CorelDraw when they have to make image from scratch.

11

Online education - Scientific View

One well known side of internet usage is online education. Online curse can be made on php, asp or other languages. Today it is great way for learning and in future it will be important part of every education organisation and education progress. As making online curses is based on internet programming, I will mention here one article from american National Center for Education Statistics (NCES), to show how online education is constantly increase and has more and more online education consumers.

According to the National Center for Education Statistics (NCES), the number of students enrolled in at least one distance education course increased significantly between 2002 and 2006, from 1.1 million to 12.2 million--and the growth spurt doesn't seem to be slowing down. In fact, the research firm Ambient Institute expects this figure to skyrocket to 22 million within the next five years. By 2014, Ambient predicts that the number of students taking all of their classes online will increase to 3.55 million, while the number of students taking all of their courses in on-campus classrooms will drop to 5.14 million. In addition to the increased acceptance of online education by students, administrators and employers, University of North Carolina professor Leonard Annetta attributes the growth of distance learning to the younger generations' reliance on technology. In his book, V-Learning: Distance Education in the 21st Century Through 3D Virtual Learning Environments, Annetta writes: "Generation G, the net generation, the millennials, however one might classify them, learn in fundamentally different ways than have students of the past. They have matured in a connected world where information is at their fingertips and entertainment and learning are beginning to become somewhat symbiotic. The growing use of Web 2.0 and social networking is changing how we must deliver instruction."

12

Conclusion
Trough this seminar paper the reader saw that web development consists of many different areas, such as web design, graphics design, marketing and programming. To be a web developer, beginer has to learn many techniqes, starting from these for web design and graphics desing (at least basics of Photoshop) and finishing with web programming and SEO tehcniques. Web development can be profitably interest, but for one man it is hard to be a great web developer because not all people are talented for every aspect of this job. The best way is a team work. Team that consists of experts from every of these areas, can become great web development company. Internet is expanding every day, so the need for web developers is rising and it always will.

13

Literature
1. Wikipedia - Html history (http://en.wikipedia.org/wiki/HTML#Version_history_of_the_standard) - Php history (http://en.wikipedia.org/wiki/PHP#History) - Css history (http://en.wikipedia.org/wiki/Cascading_Style_Sheets#History) - Html5 (http://en.wikipedia.org/wiki/HTML5) 2. Smashing Magazine (http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-theweb) 3. National Center for Education Statistics (NCES) website ( http://nces.ed.gov/ )

14