1 / 19

INFSCI 1052

INFSCI 1052. First Web Page on Pitt Servers Windows Machines. Download Software. Follow Pitt CSSD instructions to download Putty and WinScp for Windows machines: http:// technology.pitt.edu/Documents/network/unix-timesharing/Secure_UNIX_Windows_FINAL.pdf

marja
Download Presentation

INFSCI 1052

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. INFSCI 1052 First Web Page on Pitt Servers Windows Machines

  2. Download Software • Follow Pitt CSSD instructions to download Putty and WinScp for Windows machines: http://technology.pitt.edu/Documents/network/unix-timesharing/Secure_UNIX_Windows_FINAL.pdf • Download the Getting Started document from CSSD about HTML • http://technology.pitt.edu/Documents/network/web-sites/html_inst.pdf • Download the basic unix commands document from CSSD • http://technology.pitt.edu/Documents/misc/unix_commands.pdf • Also, there are two links on the syllabus that give advice for creating Pitt websites using MACS

  3. Steps to Connect to Pitt Server and Create Directories • Connect to Pitt Servers (unixs.cis.pitt.edu) using Putty or FTP client • Use sftp port=22 your username/psword are from your authorization account – call 412-624-help if problem • Unix is case sensitive!!!!! • Change to the public directory • cd public • Once in the public directory make a new directory called html • mkdir html • Look at files in a directory by typing ls • Create a directory called 1052 • mkdir 1052 • Create your homework file and label it index.html and put it in the 1052 directory

  4. Security Permissions Unix • Each file and directory have read, write, and execute permissions • You can right click on folder(directory) or file and set the permissions via FTP program • Or you can set permissions via Putty using the chmod command • Welcome to binary numbers • chmodnnn filename • Check permission with ls-l command • Ex chmod 755 filename – owner has rwx and everyone else rx • Be careful not to give write permissions to others.

  5. Security Permissions Unix • Permissions on directories are a little different from those on files. 'read' allows the contents of a directory to be listed, 'write' means that you can add or delete files in the directory, and 'execute' allows direct access to files in the directory (if you already know their names). On most directories read and execute bits tend to go together ie typically directories will either have both bits set or neither set. • From http://drupal.org/node/34023

  6. Viewing Your Web Page • After you have created an html and named it index.html and moved it to your 1052 directory and set the appropriate permissions 755 ( read, write, execute for you and read, execute for everyone else) • Open your browser and type in the address bar: • www.pitt.edu/~username/1052 • The browser will automatically look for index.html file and load it

  7. Your first page • Start with a template: • Recommend XHTML 1.0 Strict for this class for first two weeks– Later we will move over to HTML 5 • W3C recommended templates: • http://www.w3.org/QA/2002/04/valid-dtd-list.html • Doctypes tell browsers how to interpret the document • Doctypes help validators know which rules to use to evaluate your page • Don’t use Framesets in this class

  8. Ex From W3C for XHTML 1.0 • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <Your page title</title> • <meta http-equiv="content-type" • content="text/html;charset=utf-8" /> • </head> • <body> • <p>… Your HTML content here …</p> • </body> • </html>

  9. Coding Environment • Text Editor – Notepad, Notepad++, Netbeans, TextWrangler or your choice • Dreamweaver, Photoshop and Adobe Products • Great Deal at CSSD while a student • Firefox and add-ons – REQUIRED! • Firefox http://www.mozilla.com/en-US/firefox/personal.html • Firebug http://getfirebug.com/ • FireFTPhttp://fireftp.mozdev.org/ Optional • SourceCharthttps://addons.mozilla.org/en-US/firefox/addon/655/ Optional • Web Developer https://addons.mozilla.org/en-US/firefox/addon/60/

  10. Homeworks • All homeworks will be posted on your webpage for the class at www.pitt.edu/~username/1052 • Create a file called index.html and place it in this directory • All homeworks are due in one week at the start of the class. • Your homework page should be: • Neat • Well organized • Easily understood • Have your NAME • All homeworks will reference the homework number and possibly title.

  11. HTML/CSS Validators • Run your code through the W3C validator. • Pay attention to the errors but, it is not necessary to correct all of them • Be sensible: if your page has over 100 errors then it is not a good page • If your page has six errors and you know why they are occurring then it may be acceptable • http://validator.w3.org/

  12. Web Standards Coding • Benefits of Web Standards Coding • Variety of user agents • Same marked up content can be read by browser, smartphones, screen readers etc. • Performance • File size is smaller – exclude presentational mark-up • Cross Browser Compatibility • Separation of Content and Presentation From Stylin’ with CSS by Charles Wyke-Smith Second Edition

  13. Web Standards Coding • Benefits of Web Standards Coding (cont) • Build more fluid pages • Easier to change number of list items etc. • Validation tools • Use HTML, CSS, XHTML validators • Streamline production • Allow teams of people to work on project • Each team member knows rules for content and design • Accessibility

  14. Standards Organizations • List of Standards Organizations • http://www.webstandards.org/learn/external/orgs/ • The Web Standards Project • http://www.webstandards.org/learn/articles • Founded in 1998, The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. We work with browser companies, authoring tool makers, and our peers to deliver the true power of standards to this medium.

  15. Standards Organizations • W3C - http://www.webstandards.org/learn/faq/#p21 • The World Wide Web Consortium (W3C) is an international industry consortium dedicated to “leading the Web to its full potential“. It’s led by Tim Berners-Lee, the inventor of the Web. Founded in 1994, the W3C has more than 450 member organizations – including Microsoft, America Online (parent company of Netscape Communications), Apple Inc., Adobe, Sun Microsystems, and a variety of other hardware and software manufacturers, content providers, academic institutions, and telecommunications companies. The Consortium is hosted by three research institutions – MIT in the US, INRIA in Europe, and Keio University in Japan.

  16. Standards Organizations • What are the W3C Standards related to web design ? -- HTML 5 - – HyperText Markup Language • HTML 4.01 – HyperText Markup Language • XML 1.0 – Extensible Markup Language • XHTML 1.0, 1.1, and Modularization • CSS – Cascading Style Sheets • DOM 1 – Document Object Model Level 1 • W3C HTML Working Group • http://www.w3.org/html/wg/ • HTML 5 • http://dev.w3.org/html5/spec/Overview.html

  17. Standards Organizations • The European Computer Manufacturers Association (ECMA) is an organization officially founded in 1961 in order to meet the need for standardizing computer operational formats, including programming languages and input/output codes. • ECMAScript (standardized JavaScript)

  18. HTML Tutorials • History of HTML • http://www.w3.org/People/Raggett/book4/ch02.html • http://www.yourhtmlsource.com/starthere/historyofhtml.html • HTML Tutorial • http://htmldog.com/guides/htmlbeginner/ • HTML Templates • http://www.webmonkey.com/templates/ -document structure • http://www.webstandards.org/learn/reference/templates/ - doctypes • HTML 5 Overview • http://www.webmonkey.com/tutorial/Building_Web_Pages_With_HTML_5 • http://www.alistapart.com/articles/previewofhtml5 • HTML Simulator • Use HTML simulator to see implementation: • http://www.practiceboard.com/

  19. Resources • Comprehensive List of resources • http://www.alvit.de/handbook/ • Massive list of web development tools • Cheat sheets are particularly helpful • http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

More Related