Web Site Design and Development

Web Site Design and Development CS 0134 Fall 2018 Tues and Thurs 1:00 – 2:15PM By the end of this course you will be able to ● Design a static website from scratch ● Use HTML5 and CSS3 to build the site you designed ● Use JavaScript to give your users a rich user experience ● Understand the importance of and design for accessibility 2 Course website ● pitt.edu/~ach54/teaching/cs0134-219 3 Who am I ● My name is Adam Hobaugh ● I am a Part-time Instructor for Computer Science and member of the Technical Staf for the School of Computing and Information. ● I have a BS in Computer Science ● I have been writing web sites since 1999. ● I am getting married on Sept 15th. You will have a substitute on the 18th and you will have the entire class on the 20th to work on an exercise. 4 How you can get a hold of me ● Email - [email protected] ● Ofce - 6211 Sennott Square ● Ofce Hours – Wednesday – 1:00pm to 2:00pm – Friday – 11:00am to 12:00pm – Available by appointment if needed ● Mailbox is in the 6th foor mailroom 5 Questions? 6 The Internet Figure from the book 7 Inside the cloud Figure from the book 8 What is a web server ● A server is a computer that runs software that takes a request and serves a response to that request. ● A web server is a piece of software that takes an HTTP request and returns an HTTP response. ● HTTP stands for Hypertext Transfer Protocol 9 Static Web Page ● A static web page is one where the content is an HTML fle stored on the server and passed as is in the HTTP response. Figure from the book 10 Dynamic Web Page ● A dynamic web page is one where the HTML is generated by an application and the result is passed along in the HTTP response. Figure from the book 11 Common Web Browsers ● Mozilla Firefox ● Google Chrome ● Microsoft Edge ● Microsoft Internet Explorer ● Apple Safari ● Opera 12 Common server-side scripting languages ● PHP ● Python ● Java ● Perl ● Ruby 13 Questions? 14 What is HTML? ● HTML stands for Hypertext Markup Language. ● HTML is used to describe the structure of a web page. ● HTML is made up of a tree of HTML elements. ● HTML elements can describe text, images, etc. ● It used to include information about how to format the web page but this has been removed in favor of CSS. 15 Example HTML Markup <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> </body> </html> 16 Rendered HTML 17 What is CSS? ● CSS stands for Cascading Style Sheet ● CSS is used to describe how a web page should be formatted ● A CSS fle is made up of a series of rules ● Each rule contains a selector that tells the browser what html elements the rule applies to as well as a set of declarations. ● It is best practice to keep your HTML markup in one fle and your CSS rules in another and link them together. 18 CSS Link & Markup <link rel="stylesheet" href="style.css"> h1 { color: blue; text-decoration: underline; } 19 CSS Added to HTML Example 20 Example HTML markup with CSS link <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> </body> </html> 21 Web Standards ● There are two groups that govern HTML. Each have their own specifcation. – World Wide Web Consortium (W3C) – Web Hypertext Application Technology Working Group (WHATWG) ● CSS is governed by the W3C. 22 JavaScript ● JavaScript is a programming language that was designed to run in your web browser. ● JavaScript has grown to do most everything you would want to do on a computer. ● In this course, we will use JavaScript to validate forms as well as manipulate images. 23 Questions? 24 Tools of a Web Developer ● Text Editor – Visual Studio Code – Atom – Brackets – See book for more examples 25 Tools of a Web Developer ● FTP (File Transfer Protocol) Client – Filezilla – WinSCP – Fetch – See book for more examples 26 Tools of a Web Developer ● IDE (Integrated Development Environment) – Adobe Dreamweaver CC – WebStorm – Eclipse – See book for more examples 27 Questions? 28 How to View a Web page ● Once you upload the web page, you will want to look at it, to do this, you will use a URL. ● A URL is a Universal Resource Locator http://pitt.edu/~ach54/teaching/index.html 29 Anatomy of a URL http://pitt.edu/~ach54/teaching/index.html ● http:// is the protocol section of the URL. ● The protocol section tells the browser what protocol to use when talking to the server. ● If you omit the protocol section within a web browser, it will default to http:// 30 Anatomy of a URL http://pitt.edu/~ach54/teaching/index.html ● pitt.edu is the domain name. ● The domain name is the server where the resource we want can be found. ● If you omit the domain name, your browser may assume that the frst thing after the protocol is the domain name or send what you entered to a search engine. 31 Anatomy of a URL http://pitt.edu/~ach54/teaching/index.html ● ~ach54/teaching is the path ● This is the path to the fle we are looking for on the server. ● If you omit the path, the server will try to fnd your requested fle at the root of your website. 32 Anatomy of a URL http://pitt.edu/~ach54/teaching/index.html ● index.html is the flename ● This is the actual html fle we want to view. ● If you omit the flename, the default flename for the web server be used. This is typically index.html or index.htm. 33 Questions? 34 How to View a Web Page’s Source ● One of the best things you can do as you work through this course is to look at the HTML and CSS for other web pages. ● This will let you see how other people have written their web pages. ● Use caution though, with JavaScript, not everything you see on the page will be in the HTML and CSS source. 35 View full source in Firefox and Chrome ● HTML – Right click on the page you want to view – Select “View Page Source” ● CSS – Bring up the HTML source – Click on the link to the CSS source fle ● Remember, the css link element looks like <link rel=”stylesheet” href=”somefleecss”> 36 View particular element of a web page ● Right click on element you want to look at ● Select either “Inspect”(Chrome) or “Inspect Element”(Firefox) ● This brings up the Developer Tools and will let you look at the HTML for that element as well as the CSS rules applied to it. 37 Lets try 38 Five critical web development issues * ● Users and Usability ● Cross-browser compatibility ● User accessibility ● Search engine optimization (SEO) ● Responsive web design * This is the last section of Chapter 1, please read for more detail and examples. 39.

Web Site Design and Development

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support