how to make a personnel web site
DESCRIPTION
How to make a personnel web site. Heungjo An. 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. Basic HTML. Part I. Trend of Web. Web 1.0. Web 2.0. - PowerPoint PPT PresentationTRANSCRIPT
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 3
Part I.
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 4
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 5
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 6
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 7
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/
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 8
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."
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 9
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 10
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 11
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 12
Web 2.0 : Example – Service
Google Web API
– http://code.google.com/more/#label=Featured&product=charts
– (http://code.google.com/apis/chart/ )
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 13
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/
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 14
Web 2.0 : Example – Community
Blog
: Web + Log
Google Blog
: https://www.blogger.com/start
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 15
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.
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 16
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 17
Part II.
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 18
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)
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 19
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/
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 20
1.Make a personnel web site in person : Set up an environment
Download WinSCP : go to http://winscp.net/
Run WinSCP to connect to my web server.
Make a connection information
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 21
1.Make a personnel web site in person : Set up an environment
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)
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 22
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 23
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.
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 24
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.
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 25
1.Make a personnel web site in person : (3) Make 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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 26
1.Make a personnel web site in person : (3) Make web pages
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.
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 27
1.Make a personnel web site in person : (4) Use services
Guestbook
: http://www.a-free-guestbook.com/
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 28
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
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 29
2.Build a personnel web site by using service (Google Blog)
Log in & start to create Blog
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 30
2.Build a personnel web site by using service (Google Blog)
Input Blog title, Blog URL
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 31
2.Build a personnel web site by using service (Google Blog)
Choose a Blog template
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 32
2.Build a personnel web site by using service (Google Blog)
Post Change UI setup
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 33
2.Build a personnel web site by using service (Google Blog)
Make a link to other content
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 34
Part III.Ref. http://www.w3schools.com/html/html_examples.asp
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 35
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 36
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>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 37
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 38
Basic HTML
Heading tags: <h1>, <h2>...
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>
</body>
</html>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 39
Basic HTML
Comments in the HTML source: <!-- ... -->
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_comment
<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 40
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 41
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 42
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 43
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 44
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 45
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 46
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>
Texas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems EngineeringTexas A&M, Industrial & Systems Engineering 47
Thank youContact :
Heungjo An