CSE 203 Web Programming 1. Prepared by: Asst. Prof. Dr. Maryam Eskandari

Transcription

1 CSE 203 Web Programming 1 Prepared by: Asst. Prof. Dr. Maryam Eskandari

2 Outline Basic concepts related to design and implement a website. HTML/XHTML Dynamic HTML Cascading Style Sheets (CSS) Basic JavaScript Create websites

3 Objective of the course By the end of this lesson, you will be able to: Define the relationship between Web technology and design concepts. Identify the current direction and application of Web technology and design. Use your HTML skills to create a basic Web page. Use a website development software to create a Web page.

4 Textbook and Grading Policy Web Programming Step by Step, by Marty Stepp, Jessica Miller, and Victoria kirst. Attendance : 5% Lab : 10% Project and Assignments : 20% Midterm : 25% Final : 40%

5 What is Web Development? A process to create a new website or change one already in use website, e.g. adding a new section to a site. There are 8 steps in the development process. Planning: Decide why you want a website and what to create. Content: Create a list of the content you want. Design: Create a design for displaying the content. Construction: Write the code and load up your content. Test: Make sure everything works properly. Hosting: Choose a domain name & find a place to put your site on the internet. Publicity: Build traffic via publicity the site. Review: Review the site at intervals it to make sure it succeeds.

6 Basic elements before starting: Project objective: e.g. a new website/section of content/online application. Project team: i.e. a project leader/content producer/designer. Budget: Refer to The Website Manager s Handbook to plan project budgets. Timeframe: Refer to The Website Manager s Handbook e to plan project timeframes. Analysis of project risks, dependencies and assumptions: e.g. what could go wrong? A system for project management & communication: e.g. weekly meetings, , etc.

7 Website planning: A process for identifying the Business objectives and User Needs. This is the first step for building a successful website. Properties of a successful website: Earn income. Influence people. Create cost savings.

8 Setting Smart Goals: Basic concepts Specific: focus on a specific area of activity. Measurable: measure when it is achieved. Achievable: it should be achievable. Realistic: A target must also be realistic. Timely: it should be bound by a timeframe.

9 User Needs: Without doubt, the best way to establish the needs of a website audience is to get out and talk to them. Online survey. Focus group. Examine website feedback.

10 Website Content & Formats: Website content encompasses all the information and applications available on your website. Most widely used content formats on the web are: Plain text Video Audio Flash PDF Other

11 Website Design Process: Website Design is composed of several distinct disciplines. Information Architecture: organizing content on a website. Interaction Design: system for generating actions. Navigation Design: Interface Design: helping people move through a website. Information Design: effective presentation of content on a screen. Visual Design: is concerned with the graphical view of the website.

12 Website Construction: is a process for converting content and design into web code, usually HTML. A series of guidelines you need to follow: Browser compatibility. Screen resolution. Web accessibility. Other, e.g. coding languages, metadata, character sets, analytics, etc.

13 Browser Compatibility: A browser is the software used to display a website on your computer. Internet Explorer Netscape Firefox Opera Mozilla AOL Browser

14 Screen Resolution: Screen resolution defines the number of pixels that can be displayed on a computer monitor. Adoption rates vary, it means you cannot create your website for the largest possible size. If you do, many people will not be able to use your site properly. A good way to check what screen resolution people use for viewing your website is to analyse your website traffic analytics.

15 Web Accessibility: It is concerned with navigating, reading and understanding web content by users. In general, you should aim for clarity and simplicity in writing.

16 Website Testing: A process for evaluating the website to make sure if it is possible to meet the Goals that have been set for it. It encompasses many areas ranging from simple spell checking to a full security review.

17 Website Hosting: Refers to the service that allows a site to be stored on and accessed from the internet. There are two options in this regard: invest in a self-made orgnization or find an external host.

18 Website Publicity: It is used to promote your website. a short, easy to remember domain name. to inform customers about a website launch. write clear and concise content. etc.

19 Website Review: The purpose of a review is to establish if Website Goals are being achieved and, if not, what corrective action is needed.

20 The world wide web Invented around 1990 by Tim Berners-Lee. Designed to be easy to program, easy to use, share files/documents. client computer runs a browser (e.g. Internet Explorer) that requests information from a server. server computer runs a web server (e.g. Apache Web Server), listens for requests and sends back information. A web server delivers web pages.

21 The web programming elements HTML: Hyper-Text Markup Language. Provides formatting of text and graphics, as well as links between documents. CSS: Cascading Style Sheets. Provide more powerful and detailed control of style and formatting. JavaScript: a programming language for client-side scripting, to provide dynamically changing content. Java: a more powerful programming language for web applications on the client that can also run independently of the browser. Server-side scripting and programming (SHTML, ASP, PHP, CGI): These permit access to databases and other information located on the server.

22 The web programming elements Hypertext Transfer Protocol (HTTP) defines how user agents (e.g., browser) and web servers can communicate. HTML is sent or received over the network using HyperText Transfer Protocol (HTTP). HTTP is a request/response protocol between clients and servers