1 / 47

How to make a personnel web site

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.

Download Presentation

How to make a personnel web site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. How to make a personnel web site Heungjo An

  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. • Basic HTML

  3. Part I.

  4. Trend of Web Web 1.0 Web 2.0 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 1990 1992 1993 2000 2002 2004 2006 2007 Web 2.0 services Web 2.0 technology Web 2.0 concept by Tim O'Reilly

  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

  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

  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/

  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."

  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

  10. Web 2.0 : Example - Technology Web 1.0 Using Ajax request request (1) (1) Reponse Whole page (2) Reponse Only needed data (3) (2) (3) : Reload whole page : Replace some parts of web page - Web UI looks like a local application. - Reduce network traffic.

  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

  12. Web 2.0 : Example – Service • Google Web API • http://code.google.com/more/#label=Featured&product=charts • (http://code.google.com/apis/chart/ )

  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/

  14. Web 2.0 : Example – Community • Blog : Web + Log • Google Blog : https://www.blogger.com/start

  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.

  16. Why need knowledge for the web? Personnel Web Site Our Lives • - Use everyday • - Community in • virtual world. • Follow up trend • of the world. - Show yourself off to the companies, universities or others Business - Viewpoint of system engineer - Understand basic architecture of business process system. - Lots of business opportunities

  17. Part II.

  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)

  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/

  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

  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)

  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 Top Page Main Page Left Page

  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.

  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.

  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>

  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.

  27. 1.Make a personnel web site in person : (4) Use services • Guestbook : http://www.a-free-guestbook.com/

  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

  29. 2.Build a personnel web site by using service (Google Blog) • Log in & start to create Blog

  30. 2.Build a personnel web site by using service (Google Blog) • Input Blog title, Blog URL

  31. 2.Build a personnel web site by using service (Google Blog) • Choose a Blog template

  32. 2.Build a personnel web site by using service (Google Blog) Change UI setup Post

  33. 2.Build a personnel web site by using service (Google Blog) Make a link to other content

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

  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>

  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>

  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>

  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>

  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>

  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>

  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>

  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>

  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:someone@microsoft.com?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>

  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>

  45. Basic HTML • Simple tables : <table><tr><td>... • http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables <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> <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>

  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>

  47. Thank you Contact : Heungjo An csmodel@tamu.edu

More Related