Embed Size (px)
Citation preview
ANALYSIS AND WEB DESIGN
JUST AN INTRODUCTION
Welcome Dear Students!
The building blocks of the web: HTML and CSS Client Scripting - JavaScript and the
DOM Server Scripting - ASP, PHP XML and SQL
WWW - The World Wide Web
WWW is most often called the Web. The Web is a network of computers
all over the world. The computers on the Web
communicate using standard languages.
The World Wide Web Consortium (W3C) makes the Web standards.
What is the WWW?
WWW stands for the World Wide Web The World Wide Web is most often
called the Web The Web is a network of computers all
over the world All the computers in the Web
can communicate with each other All the computers use
a communication standard called HTTP
How Does the WWW Work?
Information is stored in documents called Web pages
Web pages are files stored on computers called Web servers
Computers reading the Web pages are called Web clients
Web clients view the pages with a program called a Web browser
Popular browsers are Internet Explorer, Chrome, and Firefox
How Does the Browser Fetch the Pages?
A browser fetches a Web page from a server by a request
A request is a standard HTTP request containing a page address
A page address looks like: http://www.someone.com/page.htm
How Does the Browser Display the Pages?
All Web pages contain instructions on how to be displayed
The browser displays the page by reading these instructions
The most common display instructions are called HTML tags
The HTML tag for a paragraph looks like this: <p>
A paragraph in HTML is defined like this: <p>This is a paragraph.</p>
Who is Making the Web Standards?
The Web standards are not made up by Google or Microsoft
The rule-making body of the Web is the W3C
W3C stands for the World Wide Web Consortium
W3C puts together specifications for Web standards
The most essential Web standards are HTML, CSS and XML
HTML - Hyper Text Markup Language
HTML is the primary language for building/creating web pages.
HTML is an easy-to-learn markup language.
HTML uses markup tags inside angle brackets, like <p>, to define the elements of a web page:
HTML uses start tags and end tags to markup web page elements: In the example above, the <p> tag marks the start of a paragraph, and </p> marks the end of the paragraph.
By using simple HTML tags, web designers can add headers, paragraphs, text, tables, images, lists, programming code, etc, to a web page (HTML document).
Web browsers (IE, Firefox, Chrome, etc) read HTML documents, interpret the HTML tags, and display the proper output (without displaying the HTML tags):
Try this one!
<html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
According to the HTML standard, HTML should be used to define the content of web pages.
To define the visual style (color, size, appearance, layout, etc), CSS (Cascading Style Sheets) should be used
CSS - Cascading Style Sheets
CSS defines HOW HTML elements are to be displayed.
CSS describes the visual style (appearance, layout, color, fonts) of HTML elements.
CSS was designed to separate document layout from document content (which greatly improved HTML flexibility and reduced HTML complexity).
CSS is easy to learn. You can use HTML element names as selectors, and list the style properties inside curly brackets:
CSS saves a lot of work! The CSS definitions are normally stored in
external files. This enables a web developer to change the appearance and layout of every page in a web site, just by editing one single file!
If you have ever tried to change the style of all elements in all your HTML pages, you understand how you can save a lot of work by storing the style definitions in an external file.
Let’s give it a try!<!DOCTYPE html><html><head><style>body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}
Continuation…p{font-family:"Times New Roman";font-size:20px;}</style></head>
<body>
<h1>CSS example!</h1><p>This is a paragraph.</p>
</body></html>
Try to use this for the color #000000rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #00FFFF rgb(0,255,255) #FFFF00 rgb(255,255,0) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255)
Color Values
CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).
Hex values are written as 3 double digit numbers, starting with a # sign.
JavaScript - Client-side Scripting
JavaScript is THE scripting language of the Web.
JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more.
JavaScript is easy to learn.
What is JavaScript?
JavaScript is a scripting language A scripting language is a lightweight
programming language A JavaScript consists of lines of executable
computer code A JavaScript is usually embedded directly
into HTML pages JavaScript was designed to add interactivity
to HTML pages JavaScript is free. Everyone can use
JavaScript without a license
Client-side Scripting
JavaScript is about "programming" the behavior of a browser. This is called client-side scripting (or browser scripting).
Server-side scripting is about "programming" the behavior of the server (see the Web ASP/PHP chapter).
What can a JavaScript Do?
JavaScript gives HTML designers a programming tool - JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
What can a JavaScript Do?
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and load another page specifically designed for that browser
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer
JavaScript can read/write/modify HTML elements - A JavaScript can read and change the content of an HTML element
JavaScript uses the HTML DOM to access the elements of a web page
TRY!
<!DOCTYPE html><html><head><script>function displayDate(){document.getElementById("demo").innerHTML=Date();}</script></head><body>
<h1>My First JavaScript</h1><p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body></html>
What is the HTML DOM?(Document Object Model)
The HTML DOM defines a standard way for accessing and manipulating HTML documents.
The DOM presents an HTML document as a tree-structure:
HTML DOM Tree Example
XML - EXtensible Markup Language XML is a cross-platform, software and hardware
independent tool for storing and transmitting information.
XML Document Example
<?xml version="1.0"?><note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body></note>
What is XML?
XML stands for EXtensible Markup Language
XML is a markup language much like HTML
XML was designed to carry and store data, not to display data
XML tags are not predefined. You must define your own tags
XML is designed to be self-descriptive
XML is a W3C Recommendation
XML Doesn't DO Anything
XML was not designed to DO anything. XML was created to structure, store and carry information.
The XML document example in the previous slide is a note, to Tove from Jani, written in XML. The note has a heading and a message body. It also has to and from information. But still, this XML document does not DO anything. It is just pure information wrapped in XML tags. Someone must write a piece of software to send, receive or display it:
MESSAGE
To: ToveFrom: Jani
Don't forget me this weekend!
XML Tags are NOT Predefined XML tags are not predefined. You must "invent"
your own tags. The tags used to mark up HTML documents are
predefined, the author of HTML documents can only use tags that are defined in the HTML standard (like <p>, <h1>, etc.).
XML allows the author to define his/her own tags and his/her own document structure.
The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are "invented" by the author of the XML document.
Server-side Scripting Primer ASP and PHP - Server-side Scripting
An HTML file can contain HTML tags, text and scripts.
Server-side scripting is about "programming" the behavior of the server. This is called server-side scripting or server scripting.
Client-side scripting is about "programming" the behavior of the browser.
Normally, when a browser requests an HTML file, the server returns the file. However, if the file contains a server-side script, the script is executed on the server before the file is returned to the browser as plain HTML.
What can Server Scripts Do? Dynamically edit, change or add any content to a Web
page Respond to user queries or data submitted from HTML
forms Access any data or databases and return the result to a
browser Customize a Web page to make it more useful for
individual users Provide security since your server code cannot be
viewed from a browser
Important: Because the scripts are executed on the server, the browser that displays the file does not need to support scripting at all!
SQL - Structured Query Language SQL is the standard language for
accessing and manipulating databases.
Common database management systems are: MySQL, SQL Server, Access, Oracle, Sybase, and DB2
Knowledge of SQL is invaluable for anyone who wants to store or retrieve data from a database.
What is SQL?
SQL stands for Structured Query Language SQL allows you to access a database SQL is an ANSI standard computer language SQL can execute queries against a database SQL can retrieve data from a database SQL can insert new records in a database SQL can delete records from a database SQL can update records in a database SQL is easy to learn
SQL Database Tables A database usually contains one or more
tables. Each table is identified by a name (e.g. "Customers" or "Orders"). Tables contain records (rows) with data.
Below is an example of a table called "Persons":
The table contains three records (one for each person) and four columns (LastName, FirstName, Address, and City).
LastName FirstName Address City
Mallo Geraldine St. Jude Lucena City
Ogana Michelle Iyam Lucena City
Cea Roselyn Site Lucena City
SQL Queries With SQL, we can query a database
and have a result set returned.
A query like this:SELECT LastName FROM Persons
Gives a result set like this:LastName
Mallo
Ogana
Cea
Web Design
Designing a web site needs careful thinking and planning.
The most important thing is to KNOW YOUR AUDIENCE.
Users are Scanners
A typical visitor will NOT read the entire content of your Web page!
No matter how much useful information you put into a Web page, a visitor will only spend a few seconds scanning it before he/she decide whether to leave or to stay.
Be sure to make your point in the very first sentence of the page! After that, try to keep the user occupied with short paragraphs, and new headers down the page.
Less is More
Keep the paragraphs as short as possible.
Keep the pages as short as possible. Keep the chapters as short as
possible. Use a lot of space! Pages overloaded
with text will kill your audience. If you have a lot to say, break your
information into smaller chunks and place it on different pages!
Navigation
Create a consistent navigation structure that is used by all the pages in your Web site.
Don't use hyperlinks inside each paragraph, to send visitors to every page of your Web. This will destroy the feeling of a consistent navigation structure.
If you must use hyperlinks, add them to the bottom of a paragraph, or to the menu.
Download Speed
Sometimes developers are not aware of the fact that some pages take a long time to download.
Most visitors will leave a Web page that takes more than 7 seconds to download.
Test your web pages over a low-speed modem connection. If your pages take a long time to download, consider removing graphic or multimedia content.
Let your Audience Speak!
Feedback is a very good thing! Your visitors are your "customers".
Often they will give you some valuable hints about what you could have done better.
Provide a simple way to reach you, and you will get a lot of input from people with different skills and knowledge.
Visitor's Monitor
Not everyone on the internet has the same monitor as you.
If you design a Web site to be displayed on a monitor with a high resolution, visitors with lower resolution monitors (like 800x600) might have problems reading your pages.
Make sure you test your Web site on different monitors.
What Browsers Do They Use? Don't forget to test your Web site on
different browsers. The most popular browsers today are
Internet Explorer, Firefox and Google Chrome.
One wise thing to do when designing Web pages is to use correct HTML. Correct coding will help the browsers to display your pages correctly.
What Plug-Ins Do They Have? Sound, video clips, or other
multimedia content might require the use of separate programs (plug-ins).
Be sure that your visitors have access to the software needed to view them.
What About Disabilities?
Some people have viewing or hearing disabilities.
They might try to read your pages with Braille or speech-based browsers. Always add text alternatives for images and graphic elements.
The Semantic Web
The word semantic stands for the meaning of.
The semantic of something is the meaning of something.
The Semantic Web = a Web with a meaning.
What is the Semantic Web? The Semantic Web is a web that is able to describe things
in a way that computers can understand. The Beatles was a popular band from Liverpool. John Lennon was a member of the Beatles. "Hey Jude" was recorded by the Beatles.
Sentences like the ones above can be understood by people. But how can they be understood by computers?
Statements are built with syntax rules. The syntax of a language defines the rules for building the language statements. But how can syntax become semantic?
This is what the Semantic Web is all about. Describing things in a way that computers applications can understand it.
The Semantic Web is not about links between web pages.
The Semantic Web describes the relationships between things (like A is a part of B and Y is a member of Z) and the properties of things (like size, weight, age, and price)
"If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database“
-Tim Berners-Lee, Weaving the Web, 1999
The Resource Description Framework The RDF (Resource Description
Framework) is a language for describing information and resources on the web.
Putting information into RDF files, makes it possible for computer programs ("web spiders") to search, discover, pick up, collect, analyze and process information from the web.
The Semantic Web uses RDF to describe web resources.
How can it be used?
If information about music, cars, tickets, etc. were stored in RDF files, intelligent web applications could collect information from many different sources, combine information, and present it to users in a meaningful way.
Information like this: Car prices from different resellers Information about medicines Plane schedules Spare parts for the industry Information about books (price, pages, editor, year) Dates of events Computer updates
Can it be understood?
The Semantic Web is not a very fast growing technology.
One of the reasons for that is the learning curve. RDF was developed by people with academic background in logic and artificial intelligence. For traditional developers it is not very easy to understand.
One fast growing language for building semantic web applications is RSS.
Buying and selling used cars Suppose a semantic web system was built
to administer the selling and buying of used cars over the Internet.
The system would contain two main applications: One for people who wanted to buy a car One for people who wanted to put up a car for
sale Let's call the Internet applications for IBA
(I Buy Application), and ISA (I Sell Application).
IBA - The I Buy Application People who want to buy a car could use an IBA
application much like this:
In a "real live" application you would be asked to identify yourself the first time you used it. Your ID would be stored in an RDF file. Your ID would identify you as a person with name, address, email, and ID number.
When you submitted the query, the application would return a list of cars for sale, and the list could be drilled down and sorted by year, price, location and availability. This information would be returned from a web spider continuously searching the web for RDF files.
ISA - The I Sell Application People who want to sell a car could use an ISA
application much like this:
When you submitted the form, the application would ask you for more information and store your ID and the information in an RDF file made available to the web.
The RDF file would contain information like:
Your ID: Name, address, email, ID number.Your selling item: type, model, picture, price, description.
Behind the scenes
Behind the scenes, the "ISA" application creates an RDF file with a lot of RDF pointers.
It creates an RDF pointer to a file with information about you, an RDF pointer to information about Volvo and Volvo models, an RDF pointer to Volvo dealers and resellers, about parts, about prices, and much more.
An RDF pointer is a pointer (actually an URL) to information about things (like a knowledge database).
The beauty about this is that you don't have to describe yourself, or the car model. The RDF application will sort it out for you.
Will it ever work?
Chaos? Standards? What do we need? What are we waiting for?
A standard by W3C, by Microsoft, by Google?
RDF is data about data - or metadata. Often RDF files describe other RDF files. Will it ever be possible to link all these RDF files together and build a semantic web?
No one knows, but someone will try.
Will it work all by itself? Semantic web will work all by itself. It will need some help to become
a reality. It is not very likely that you will be able to sell your car just by
putting your RDF file on the Internet. The "ISA" and "IBA" applications above will have to be developed by
someone. Someone will have to build a search engine database for all the items, and someone will have to develop a standard for it.
It might be eBay, it might be Microsoft, it might be Google, or someone else. But someone will.
Soon we will see marketplaces based on RDF. And one day you will be able to collect information about almost everything on the web in a standardized RDF format.
It might not be free. You might have to pay for the information, or at least for selling your products.
Publishing information about things on the Internet will be much easier than before. Maybe the RSS language will be the solution to some of the problems.
Semantic Web Agents The semantic web will not be searchable in free
text. To search (or access) the semantic web, we will need some software to help us.
To use the semantic web, we will need "Semantic Web Agents" or "Semantic Web Services". These "Agents" or "Services" will help us to find what we are looking for on the semantic web.
On the semantic web, we might want to look for information about: The cheapest airline tickets Styling that would fit my car Books, DVDs, and CDs Weather forecasts Time schedules and calendar events Stock prices and exchange rates
