Chapter 2 - Web Design Tools

Chapter 2 - Web Design Tools
Publishing on the World Wide Web Chapter 2 - Web Design Tools

Web Design Tools Web technology is constantly changing.
A new browser feature or a wireless handheld device seemingly revolutionizes the way the world accesses the Internet. As soon as these new technologies surface, some Web designers charge ahead to implement these latest advances at their sites.

Web Design Tools As a Web designer, you should ask the following questions: Does the new technology meet currently accepted standards for Web development and design? What specifically can the new technology do to further the purpose of my Web sites? How will implementation of the new technology affect Web site’s visual appeal, accessibility and usability? What impact will adding this technology have on security and other Web site elements? What are the direct and indirect costs of implementing the new technology? How soon will I see a return on investing in this new technology?

1. Markup Languages A markup language is a coding system that uses tags to provide instructions about the appearance, structure, and formatting of a document. The markup languages used to create Web pages are: HTML XML XHTML WML DHTML

1. Markup Languages – cont.
1.1 HTML The Hypertext Markup language (HTML) is a markup language used to create Web pages. A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content

HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname> HTML tags normally come in pairs like <p> and </p> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a slash before the tag name

Example of HTML document <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

Outcome on your web browser

Example explained The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes paragraph

1.2 XML XML stands for EXtensible Markup Language. XML is a markup language much like HTML. XML was designed to describe data, not to display data. XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive

XML and HTML were designed with different goals: XML was designed to describe data, with focus on what data is HTML was designed to display data, with focus on how data looks

The following example is a note to Wani, from Lebai, stored as XML: <note> <to>Wani</to> <from>Lebai</from> <heading>Peringatan</heading> <body>Hang bawak bas elok-elok wani</body> </note>

The example note is quite self descriptive. It has sender and receiver information, it also has a heading and a message body. But still, this XML document does not DO anything. It is just information wrapped in tags. Someone must write a piece of software to send, receive or display it.

1.3 XHTML XHTML stands for EXtensible HyperText Markup Language. XHTML is almost identical to HTML. XHTML is stricter than HTML. XHTML is HTML defined as an XML application. XHTML is supported by all major browsers.

Why XHTML? Many pages on the internet contain "bad" HTML. This HTML code works fine in most browsers (even if it does not follow the HTML rules): <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body> Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret "bad" markup. XHTML can overcome this problem by following the strict HTML rules.

1.4 WML Stand for Wireless Markup Language (WML). WML is an XML language used to specify content and user interface for Wireless Application Protocol (WAP) devices like PDA and Mobile Phones.

1.5 DHTML Dynamic Hyper Text Markup Language (DHTML) is a combination of Web development technologies used to create dynamically changing websites. Web pages may include animation, dynamic menus and text effects. The technologies used include a combination of HTML and JavaScript/ VBScript/ CSS

Designed to enhance a Web user’s experience, DHTML includes the following features: Dynamic content, which allows the user to dynamically change Web page content. Dynamic positioning of Web page elements. Dynamic style, which allows the user to change the Web page’s color, font, size or content.

2. Cascading Style Sheet CSS stands for Cascading Style Sheets.
Styles define how to display HTML elements. Styles were added to HTML to solve a problem. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files (.css)

2. Cascading Style Sheet p {color:red; text-align:center;} CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces: p {color:red; text-align:center;}

3. Scripting Languages Scripting languages used to write short programs, called scripts, that execute in real time at the server or in the Web browser when a Web page is downloaded. Scripts are used to make Web pages dynamic and interactive by adding such features as multimedia, animation and form or by connecting web pages to underlying database. 3 types of scripting languages JavaScript ASP (Active Server Pages) PHP (Hypertext Preprocessor) MySql

3. Scripting Languages 3.1 JavaScript
JavaScript is a scripting language designed primarily for adding interactivity to Web pages and creating Web applications.

3. Scripting Languages Example of JavaScript <html> <body>
<h1>What Can JavaScript Do?</h1> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'"> Click Me!</button> </body> </html>

3. Scripting Languages Result of the example Before After

3. Scripting Languages 3.2 ASP ASP stands for Active Server Pages
ASP is a Microsoft Technology ASP is a program that runs inside IIS IIS stands for Internet Information Services IIS comes as a free component with Windows 2000, Vista, 7 and 8. Internet Information Server (IIS) is a group of Internet servers from Microsoft that can be installed with its Windows operating systems.

3. Scripting Languages What is an ASP File?
An ASP file is just the same as an HTML file. An ASP file can contain text, HTML, XML, and scripts. Scripts in an ASP file are executed on the server. An ASP file has the file extension ".asp"

3. Scripting Languages What can ASP do for you?
Dynamically edit, change, or add any content of a Web page. Respond to user queries or data submitted from HTML forms. Access any data or databases and return the results to a browser.

3. Scripting Languages 3.3 PHP
PHP is an acronym for "PHP: Hypertext Preprocessor" PHP is a widely-used, open source scripting language PHP scripts are executed on the server PHP is free to download and use

3. Scripting Languages What is a PHP File?
PHP files can contain text, HTML, CSS, JavaScript, and PHP code PHP code are executed on the server, and the result is returned to the browser as plain HTML PHP files have extension ".php"

3. Scripting Languages What Can PHP Do?
PHP can generate dynamic page content PHP can create, open, read, write, delete, and close files on the server PHP can collect form data PHP can send and receive cookies PHP can add, delete, modify data in your database PHP can be used to control user-access

3. Scripting Languages 3.4 MySql
MySQL is a database system used on the web MySQL is a database system that runs on a server MySQL is ideal for both small and large applications MySQL is very fast, reliable, and easy to use MySQL uses standard SQL MySQL compiles on a number of platforms MySQL is free to download and use MySQL is developed, distributed, and supported by Oracle Corporation MySQL is named after co-founder Monty Widenius's daughter: My PHP combined with MySQL are cross-platform

4. Text and HTML Editors You can create a simple Web page by typing HTML tags and related text into a document created in a plain text editor, such as Notepad. A text editor is software used to create plain (ASCII) text files. Some Web designers or programmers prefer to use an HTML editor to create Web pages. An HTML editor is a text editor enhanced with special features that are used to more easily insert HTML tags and their attributes. Example HTML-Kit, CoffeeCup, BBEdit, and NoteTab.

Text editor enable you to view and edit the code.
4. Text and HTML Editors Text Editor Text editor enable you to view and edit the code.

4. Text and HTML Editors HTML Editor
HTML editors have tools to assist you in editing and entering HTML code

5. WYSIWYG Editor Many Web designers use WYSIWYG Editor, such as Adobe Dreamweaver, InnovaStudio, Ephox EditLive! and Microsoft Expression Web to create Web site. WYSIWYG stands for “what you see is what you get”. Inserting and formatting text and inserting images or links in Web page using a WYSIWYG editor is similar to creating a document in a word processor, such as Microsoft Word.

5. WYSIWYG Editor Additionally, using a WYSIWYG editor to create Web pages eliminates the need to learn a markup language, which can involve complex coding procedures. Because the WYSIWYG editor automatically generates the underlying markup language tags as you insert and format text, images and links. Most WYSIWYG editors also allow you to view and manipulate the underlying HTML code, if desired.

5. WYSIWYG Editor Additional benefits of suing WYSIWYG editors include the capability to create Web pages rapidly and the opportunity to become familiar with HTML at a pace you choose.

5. WYSIWYG Editor Adobe Dreamweaver

6. Web Templates and Other Design Technologies.
With little or no knowledge of HTML or other Web design tools, users can quickly create a Web site using Web Template or a Content Management System. A Web template is a predesigned model Web page that you can customize for fast Web site creation or updating. Example of Web template: DreamTemplate TemplateWorld TemplateMonster Yahoo! Small Business

Yahoo! Small Business

DreamTemplate

A content management system (CMS) is a software system that provides authoring and administrative tools that enable the management of Web content development, including authoring, reviewing, editing and publishing. Many content management systems offer a Web-based GUI, enabling publishers to access the CMS online using only a Web browser.

A major advantage of using a CMS is that it requires almost no technical skill or knowledge to manage. Example of an award-winning content management system (CMS) is Joomla.

Example of Web page using Joomla

Chapter 2 - Web Design Tools

Similar presentations

Presentation on theme: "Chapter 2 - Web Design Tools"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Chapter 2 - Web Design Tools

Similar presentations

Presentation on theme: "Chapter 2 - Web Design Tools"— Presentation transcript:

Similar presentations

About project

Feedback