informs seminar texas a&m spring 2008 how to make a personnel web site heungjo an

Informs Seminar Texas A&M

Spring 2008

How to make a personnel web site

Heungjo An

Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 2

Content

Part I.

Trend of Web

Web 2.0

Part II.

Make a personnel web site in person (people.tamu.edu)

Build a personnel web site by using services (Google Blog)

Part III.

1. Basic HTML


Part I.


Trend of Web

1990 1992 1993 2000 2002 2006 2007

Origin of www at European Centre for particle physics

www opened to the public

Web browsers shown up

Peak of dot-com business

dot-com collapse

Web 2.0 concept by Tim O'Reilly

2004

Web 2.0 technology

Web 2.0 services

Web 1.0 Web 2.0


Trend of Web

HTML (Static)

DHTML (Dynamic)

: HTML + JavaScript + CSS

CGI (Common Gateway Interface)

: C, Perl, PHP, ASP, JSP

Applet, ActiveX

J2EE (Java2 Enterprise Edition)

: for enterprise level

.net (ASP,C#)

XML, Web Service


Example

HTML

: http://informs-sc.tamu.edu/test/HTML.html

DHTML

: http://informs-sc.tamu.edu/test/DHTML.html

CGI (ASP)

: http://informs-sc.tamu.edu/test/calendar.asp


Example

Applet

: http://informs-sc.tamu.edu/members_list.asp

J2EE

: Enterprise level system (ERP, ...).

http://java.sun.com/

.net

: Enterprise level system (ERP, ...).

http://www.asp.net/


Web 2.0 : What is web 2.0 ?

The second Internet revolution, driving Web architecture

Tim O'Reilly, the founder and CEO of O'Reilly Media, Inc

"Web 2.0 is the business revolution in the computer industry caused by the move to the Internet as platform, and an attempt to understand the rules for success on that new platform."

Dario de Judicibus, IBM social-networking analyst

"Web 2.0 is a knowledge-oriented environment where human interactions generate content that is published, managed and used through network applications in a service-oriented architecture."


Web 2.0 : Web 2.0 Aspects and Anchor Points

Web Technology – Principles: Globally linked, decentralized, network-

centric, extensible and open

– Aspects: Architecture, platforms

Web Community– Principles: Participation, collaboration, social,

transparent

– Aspects: People, interaction, data

Web Business– Principles: Long-tail economics, continuous

innovation, collaborative offerings, open business

models

– Aspects: "Ecosystem“, process, value models

Ref. David Cearley, Gartner ITXPO 2006


Web 2.0 : Example - Technology

(1)

request

(2)

(3)

Reponse

Whole page

Web 1.0 Using Ajax

(1)

request

Reponse

Only needed data(2)(3)

: Replace some parts of web page

- Web UI looks like a local application.

- Reduce network traffic.

: Reload whole page


Web 2.0 : Example - Technology

Key Technology in Ajax

XMLHttpRequest (New added Object)

: is API that can be used by JavaScript, and other web browser scripting languages to transfer XML and other text data between a web page's Client-Side and Server-Side.

+ XHTML + DOM + CSS

Googlemap

: http://maps.google.com

: http://maps.google.com/help/maps/mymaps/create.html


Web 2.0 : Example – Service

Google Web API

– http://code.google.com/more/#label=Featured&product=charts

– (http://code.google.com/apis/chart/ )


Web 2.0 : Example – Community

Wiki is software that allows users to create, edit, and link web pages easily

Wikipedia : the free encyclopedia that anyone can edit.

: http://www.wikipedia.org/


Web 2.0 : Example – Community

Blog

: Web + Log

Google Blog

: https://www.blogger.com/start


Web 2.0 : Example – Business

The Long Tail business model

Amazon.com

Ebay

Focus on long tail part

- Not major items

- Small customers

- Online markets can show all items list without holding all products.

- Customer’s reviews are new contents.


Why need knowledge for the web?

Our Lives

Business

Personnel Web Site

- Use everyday- Community in virtual world.-Follow up trend of the world.

- Show yourself off to the companies, universities or others

- Viewpoint of system engineer- Understand basic architecture of business process system.- Lots of business opportunities


Part II.


1.Make a personnel web site in person

Steps Set up an environment

– Activate your webspace on people.tamu.edu

– Install WinSCP to transfer files

Make a web site

– Plan overall web site architecture

– Prepare contents

– Make web pages

– If needed, use some IT service, (e.g. web board)


1.Make a personnel web site in person : Set up an environment

Go to http://people.tamu.edu/

If needed, activate your NetID.

Activate a web page on this server : Go to https://oalinfo.tamu.edu/account/



Download WinSCP : go to http://winscp.net/

Run WinSCP to connect to my web server.

Make a connection information



public_html is your web root. Index.html is the default main page Make a new directory on the local com. for your web site. e.g. C:\...\MyWeb Download index.html file to local drive, edit it and upload again.

(Select files, then press F5 key)


1.Make a personnel web site in person : (1) Plan overall web site architecture

What contents?

How many pages?

Design

Need a special web application? (guestbook, calendar, ....)

Main Page

Top Page

Main PageLeft

Page

Top Page


1.Make a personnel web site in person : (2) Prepare contents

Main Page

Curriculum Vitae

Materials that are related with your interesting areas.

(papers, articles, programs, related links and so on,)

Images

Web Font

Find service providers who provide a web application that you want.


1.Make a personnel web site in person : (3) Make web pages

Find a proper web page maker

– Text Editor : notepad

– Visual Studio

– MS-Word or PowerPoint

– Dreamweaver

– Search “web page maker” on Google.

If needed, find some good sample web pages.



Practice with a text editor. (Notepad, Visual Studio, ...)

– Make a test1.html as followings.

– Then, upload it to my web space.

<html>

<head>

<title>Test</title>

</head>

<body>

Welcome to my web site.

</body>

</html>



Practice with a MS Word or PowerPoint.

– Make a test2.html as followings in the Office program.

– Use “save as webpage”

– Then, upload it to my web space.

Welcome to my web site.


1.Make a personnel web site in person : (4) Use services

Guestbook

: http://www.a-free-guestbook.com/


2.Build a personnel web site by using service (Google Blog)

Use the Blog service based on web 2.0.

Easy and powerful

Google Blog : https://www.blogger.com/start



Log in & start to create Blog



Input Blog title, Blog URL



Choose a Blog template



Post Change UI setup



Make a link to other content


Part III.Ref. http://www.w3schools.com/html/html_examples.asp


Basic HTML

A very simple HTML document : <body>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

<html>

<body>

The content of the body element is displayed in your browser.

</body>

</html>


Basic HTML

How text inside paragraphs is displayed : <p>

http://http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1

<html>

<body>

<p>This is a paragraph.</p>



<p>Paragraph elements are defined by the p tag.</p>

</body>

</html>


Basic HTML

The use of line breaks : <br>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs

<html>

<body>

<p>

To break<br>lines<br>in a<br>paragraph,<br>use the br tag.

</p>

</body>

</html>


Basic HTML

Heading tags: <h1>, <h2>...

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers

<html>

<body>

<h1>This is heading 1</h1>






<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>

</body>

</html>

Basic HTML

Comments in the HTML source: 

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_comment

<html>

<body>



<p>This is a regular paragraph</p>

</body>

</html>


Basic HTML

Add a background color: <body bgcolor="yellow">

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgcol

<html>

<body bgcolor="yellow">

<h2>Look: Colored Background!</h2>

</body>

</html>


Basic HTML

Text Formating : < b> <strong> <big> <em> <i>...

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formattingch

<html><body><b>This text is bold</b><br>

<strong>This text is strong</strong><br><big>This text is big</big><br><em>This text is emphasized</em>

<br>

<i>This text is italic</i>

<br>

<small>This text is small</small>

<br>

This text contains<sub>subscript</sub>

<br>

This text contains<sup>superscript</sup>

</body></html>


Basic HTML

How to create hyperlinks : <a href=“...”>...</a>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links

<html><body>

<p><a href="lastpage.htm">This text</a> is a link to a page on this Web site.</p>

<p><a href="http://www.microsoft.com/">This text</a> is a link to a page on the World Wide Web.</p>

</body></html>


Basic HTML

How to link to a mail message : <a href=“mailto:.....> </a>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_mailto

<html>

<body>

<p>

This is a mail link:

<a href="mailto:[email protected]?subject=Hello%20again">

Send Mail</a>

</p>

<p>

<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.

</p>

</body>

</html>


Basic HTML

How to mix a frameset in rows and columns : <frameset ...>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_mix

<html>

<frameset rows="50%,50%">

<frame src="frame_a.htm">

<frameset cols="25%,75%">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</frameset>

</html>


Basic HTML

Simple tables : <table><tr><td>...

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

<html>

<body>

<p>

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

</p>

<h4>One column:</h4>

<table border="1">

<tr>

<td>100</td>

</tr>

</table>

<h4>One row and three columns:</h4><table border="1"><tr> <td>100</td> <td>200</td> <td>300</td></tr></table>

<h4>Two rows and three columns:</h4><table border="1"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table>

</body></html>


Basic HTML

Unordered and Ordered List

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists<html>

<body>

<h4>An Unordered List:</h4>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

<html>

<body>

<h4>An Ordered List:</h4>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>


Thank youContact :

Heungjo An

[email protected]

informs seminar texas a&m spring 2008 how to make a personnel web site heungjo an

Documents

trend of web web

technology web

page web

services web

web service slide

parts of web page web

public web browsers

industrial systems engineering