Lesson 3.docx

**LESSON 3** **FUNDAMENTALS** **OF WEB PAGE** **DEVELOPMENT**  ^Prepared\ By:\ Larra\ Mae\ Balisi^ 1 **OBJECTIVES** Determine the key concepts about the web Enumerate the general web page development guidelines List the basic HTML doc structure Prepared by: Larra Mae...

**LESSON 3** **FUNDAMENTALS** **OF WEB PAGE** **DEVELOPMENT**  ^Prepared\ By:\ Larra\ Mae\ Balisi^ 1 **OBJECTIVES** Determine the key concepts about the web Enumerate the general web page development guidelines List the basic HTML doc structure Prepared by: Larra Mae Balisi, CICS Faculty 2 **INTERNET** -a **worldwide collection** of **computer networks** -**connects** different individuals and organizations throughout the world for the **exchange of information** Prepared By: Larra Mae Balisi 3 **USES OF INTERNET** Communication Tool Source Of Information Job Searching Online-shopping Online-learning Prepared By: Larra Mae Balisi 4 **USES OF INTERNET** Online-business/E-commerce Online-library Online-interview Video Conferencing Voicing Ideas And Opinions Prepared By: Larra Mae Balisi 5 **USES OF INTERNET** Getting New Software Reading And Watching The Latest News Watching Movies Sharing Files, Musics, Videos, Programs, Pictures Social Networking Sites Prepared By: Larra Mae Balisi 6 **IS Categories** Communication Services Internet Services ~retrieval\ service\ Web\ Services~ World Wide Information Web Prepared By: Larra Mae Balisi 7 **COMMUNICATION SERVICES** Electronic Mail -- send e-message TelNet -- log on to a remote computer Newsgroup -- forum/discussions Internet Relay Chat (IRC) -- communicate in real time Prepared By: Larra Mae Balisi 8 **COMMUNICATION SERVICES** Mailing Lists -- organize group to share info Internet Telephony (VoIP) -- talk to any PC to receive call Instant Messaging -- real time chat Video Conferencing Prepared By: Larra Mae Balisi 9 **INFORMATION RETRIEVAL** File Transfer Protocol (FTP) -- enables to transfer files Archie Gopher Very Easy Rodent Oriented Netwide Index to Computer Achieved (VERONICA) Google Yahoo Prepared By: Larra Mae Balisi 10 **WEB SERVICES** -allow **exchange of information between applications** on the web -applications can easily **interact** with each other Prepared By: Larra Mae Balisi 11 **THE WORLD WIDE WEB (WWW)** -called as www (wawawa), W3 (W cube) or the Web -**collection of information** or files publicly available which reside on computers called **Web servers** and are **linked together** through the internet Prepared By: Larra Mae Balisi 12 **THE WEB** Key concepts Prepared By: Larra Mae Balisi 13 **THE WORLD WIDE WEB (WWW)** -designed by **Tim Berners Lee** in 1990s -called as www (wawawa), W3 (W cube) or the Web -**collection of information** or files publicly available which reside on computers called **Web servers** and are **linked together** through the internet Prepared By: Larra Mae Balisi 14 **HYPERTEXT MARK-UP** **LANGUAGE (HTML)** -the **markup language** used by **Tim Berners Lee** in **formatting and linking** the files found on the Web Prepared By: Larra Mae Balisi 15 **WEB BROWSER** \- Apple Safari \- Microsoft Internet Explorer \- Mozilla Firefox - Google Chrome - Konqueror \- OmniWeb - Opera \- Netscape Prepared By: Larra Mae Balisi 16 **WEBSITE** \- **collection** of **linked web pages** with a common topic or focus Prepared By: Larra Mae Balisi 17 **STATIC WEBSITES** aka **flat** or **stationary websites** loaded on the client's browser as exactly they are stored on the web server only used when the information is no more required to be modified Prepared By: Larra Mae Balisi 18 **DYNAMIC WEBSITES** shows **different information** at **different point** of time possible to **change** a portion of a web page **without loading** the entire web page Server-side dynamic web page and Client-side dynamic web page Prepared By: Larra Mae Balisi 19 **10 types of Diff Types of Websites** Business websites Brochure and Catalogue websites eCommerce Websites Non-profit websites Educational websites Business directory websites Portal websites Search engines Crowdfunding websites Portfolio websites / CV websites Prepared By: Larra Mae Balisi 20 **WEB PAGE** \- **every page** of information found in the Web Prepared By: Larra Mae Balisi 21 **HOMEPAGE** \- the very **first page** that appears upon opening your web browser Prepared By: Larra Mae Balisi 22 **UNIFORM RESOURCE LOCATOR (URL)** \- represents the **address** of a particular **website or web page** on the Web Prepared By: Larra Mae Balisi 23 **Example:** **http:// www.csu.edu** Parts: [Transfer protocol specification **(http://)**] [Type of site **(.edu)**] [Domain name **(csu.edu)**] [Website name **(www.csu.edu)**] Prepared By: Larra Mae Balisi 24 **UNIFORM RESOURCE LOCATOR (URL)** ⮚**Transfer protocol specification** - **set of rules** that the computer needs to **follow or use** to be able to **transfer files** from one computer to another computer on the internet ⮚**Website name** - is the **name** used to **identify** the website Prepared By: Larra Mae Balisi 25 **UNIFORM RESOURCE LOCATOR (URL)** ⮚**Type of site** - defines the **category** of the website such as **.com,.edu,.gov,.net,.org** ⮚**Domain name** - contains the **website name** and the **type of site** associated with a unique identification number on the internet Prepared By: Larra Mae Balisi 26 **WEB DESIGNING** Key concepts Prepared By: Larra Mae Balisi 27 **WEB DESIGNING** has direct link to visual aspect of a web site Prepared By: Larra Mae Balisi 28 **KEY POINTS: WEB DESIGNING** Details about information architecture Planned structure of site A site map of pages Prepared By: Larra Mae Balisi 29 **WIREFRAME** refers to a **visual guide** to appearance of web pages Prepared By: Larra Mae Balisi 30 **WEB PAGE** **ANATOMY** Prepared By: Larra Mae Balisi 31 **CONTAINING BLOCK** can be in the form of page's body tag, an all **containing** div tag Prepared By: Larra Mae Balisi 32 **LOGO** the **identity** of a website and is used across a company's various forms of marketing Prepared By: Larra Mae Balisi 33 **NAVIGATION** allows visitors to **flow** from one page to another without frustration Prepared By: Larra Mae Balisi 34 **CONTENT** refers to the **textual, aural, or visual content** published on a website Prepared By: Larra Mae Balisi 35 **FOOTER** an area located at the **bottom** of every page on a website, below the main body content Prepared By: Larra Mae Balisi 36 **WHITESPACE** also called as **negative space** and refers to any area of page that is not covered by type or illustrations Prepared By: Larra Mae Balisi 37 Prepared By: Larra Mae Balisi **WEB DESIGN MISTAKES** Website not working in any other browser other internet explorer Using cutting edge technology for no good reason Sound or video that starts automatically Hidden or disguised navigation 100% flash content Prepared By: Larra Mae Balisi 39 **GENERAL WEBPAGE** **DEVELOPMENT GUIDELINES** Steps for developing web page Prepared By: Larra Mae Balisi 40 **A. PURPOSE OF THE WEB** \- very **clear** about **goals and objectives** Prepared By: Larra Mae Balisi 41 **B. WEB PAGE PLANNING** **2 ways** \- Internal Planning \- External Planning Prepared By: Larra Mae Balisi 42 **INTERNAL PLANNING** \- regarding the **content** included in the web page **UI** Prepared By: Larra Mae Balisi 43 **EXTERNAL PLANNING** - **interaction** between the visitors **UX** Prepared By: Larra Mae Balisi 44 **C. DESIGNING** o **Components of Web Page:** \- Text \- Pictures \- Animated graphics \- Audio files \- Video files Prepared By: Larra Mae Balisi 45 **C. DESIGNING** o **Web Authoring Languages** \- HTML \- DHTML \- XHTML \- XML \- VRML \- SMIL o **Integration of CSS and JS** Prepared By: Larra Mae Balisi 46 **C. DESIGNING** o **Steps for Creating Web Page** 1. Use a text editor 2\. Prepare/digitize other individual components 3\. If the page requires more advanced features(Forms) Prepared By: Larra Mae Balisi 47 **C. DESIGNING** o **Steps for Creating Web Page** 4. Use a browser to view the page 5. Publish the page by putting all of its files(HTML files and graphic files) on a web server Prepared By: Larra Mae Balisi 48 **C. DESIGNING** o **Steps for Creating Web Page** 6. View in all platforms 7\. Publicize the page, get feedback, get new ideas and repeat the steps Prepared By: Larra Mae Balisi 49 Prepared By: Larra Mae Balisi 50