Module-1-Week-2.pptx.pdf

KOLEHIYO NG LUNGSOD NG DASMARIÑAS BRGY. BUROL MAIN, CITY OF DASMARIÑAS, CAVITE, PHILIPPINES 4114 REGGIE MAR B. DE CASTRO Faculty Name  BSCS Bachelors degree MIT Masters degree Knowledgeable in Programming Python Java C and C++ Visual Basic Game development (using Game Ma...

KOLEHIYO NG LUNGSOD NG DASMARIÑAS BRGY. BUROL MAIN, CITY OF DASMARIÑAS, CAVITE, PHILIPPINES 4114 REGGIE MAR B. DE CASTRO Faculty Name  BSCS Bachelors degree MIT Masters degree Knowledgeable in Programming Python Java C and C++ Visual Basic Game development (using Game Maker) Web development Do and Donts Phone Cheating late and 3 consecutive absent What is the main concern of being a programmer? Logical Thinking Example: can the student, solve a mathematical equation like: 1+1 =? What about? 205*107=? Any student can calculate and answer a mathematical equation, in less 2 seconds! What about? 99*25=?  WEB SYSTEMS AND TECHNOLOGIES Module Objectives Define what web systems are and their fundamental components. Recognize the various types of web systems and their purposes. Describe different web system architectures (e.g., client-server, three-tier). Understand how these architectures impact web development and user experience. Module Objectives Trace the historical development of web technologies from static HTML pages to modern dynamic web applications. Understand the roles of various stakeholders (developers, designers, project managers) in the web development process. Discuss the terminologies commonly used in the web technology. Identify the user level of a system Discuss the initial preparation of the software applications to be used in this subject.  MODULE 1 (Week 2) Introduction to Web Systems Overview of Web Systems Web systems are designed to facilitate the creation and management of web applications, providing a platform for users to interact with services and content online. They typically include both server-side and client-side components, making it possible to deliver a seamless user experience. Components of Web Systems Web Browsers - Software used by end-users to access and interact with web applications (e.g., Chrome, Firefox, Safari). Web Servers - Hardware or software that serves web pages to users’ browsers upon request (e.g., Apache, Nginx). Databases - Systems that store and manage data for web applications (e.g., MySQL, PostgreSQL). Application Logic - The code that processes user requests and interacts with the database to deliver content (e.g., PHP, ASP). Web Systems Architecture 1. Client-Server Model Client: Initiates requests for resources, such as web pages or data, from the server. It processes and displays this content to the user. Server: Hosts the web application and responds to client requests. It may handle data storage, application logic, and communication with databases. Communication Protocols: Primarily uses HTTP or HTTPS for data transfer between the client and server, ensuring secure and efficient communication. Web Systems Architecture 2. Three-Tier Architecture Presentation Layer (UI) - The front-end part of the application that users interact with. This layer is responsible for displaying content and providing a user-friendly interface. Application Layer (Business Logic) - Handles the core functionality and processes user inputs. It implements the rules and logic required for the application to function. Data Layer (Database) - Manages data storage, retrieval, and manipulation. This layer interacts with the application layer to provide and store data. Web Systems Architecture 3. Microservices Architecture Service Decomposition - Divides the application into small, self-contained services that perform specific tasks. Each microservice operates independently but communicates with others through APIs. Benefits - Enhances scalability and flexibility, allows for independent development and deployment, and improves fault isolation. Challenges - Can introduce complexity in managing and orchestrating multiple services. Evolution of Web Technologies Early Web (Web 1.0) Static Content: Web pages were static, meaning the content was fixed and did not change dynamically based on user interaction. HTML: The primary technology used for creating web pages, limited to text and basic formatting. Evolution of Web Technologies Dynamic Web (Web 2.0) Interactivity: Introduced interactive features like AJAX (Asynchronous JavaScript and XML) for updating parts of a page without a full reload. JavaScript: Enabled dynamic content and enhanced user interactions. Frameworks and libraries like jQuery emerged to simplify JavaScript coding. Server-Side Scripting: Languages like PHP, Python, and Ruby allowed for dynamic content generation based on user input or other factors. Evolution of Web Technologies Modern Web (Web 3.0) Personalization: Uses AI and machine learning to provide tailored content and experiences based on user behavior and preferences. PWAs: Progressive Web Apps offer a native app-like experience with offline capabilities and fast load times. Evolution of Web Technologies Modern Web (Web 3.0) Blockchain: Provides decentralized and secure data storage solutions. Semantic Web: Enhances web data by structuring it in a way that machines can understand, improving search and data integration. Fundamentals of Web Technology Terms URL (Uniform Resource Locator) - The address used to access a resource on the web. - Identifies the location of a resource. - https://www.example.com/page Domain Name - The address where Internet users can access your website. - Human-readable addresses for websites. - example.com Fundamentals of Web Technology Terms Web Browser - Software used to access the web. - Retrieves and displays web content. - Chrome, Firefox, Safari. Web Server - A computer system that hosts websites - Serves web pages to users - Apache, Nginx Fundamentals of Web Technology Terms IP Address - A unique string of numbers that identifies each computer using the Internet Protocol to communicate over a network. - Identifies devices on a network. - 192.168.1.1 DNS (Domain Name System) - The system that translates domain names to IP addresses. - Makes it easier to access websites using human-readable names. - Converting example.com to 192.168.1.1 Fundamentals of Web Technology Terms Front-End - The part of a website that users interact with. - Manages the user interface and user experience. - HTML, CSS, JavaScript. Back-End - The server side of a website. - Manages the database, server, and application logic. - Databases, server-side languages like Node.js, Python, PHP Fundamentals of Web Technology Terms Full-Stack - Refers to both the front-end and back-end parts of a web application. - Manages both client and server side of applications. API (Application Programming Interface) - A set of functions and protocols for building and integrating application software. - Allows different software systems to communicate. - REST APIs, Web APIs Fundamentals of Web Technology Terms Database - An organized collection of data. - Stores, retrieves, and manages data. - MySQL, MongoDB, Firebase Responsive Design - An approach to web design that makes web pages render well on a variety of devices and window or screen sizes. - Using media queries in CSS.  MODULE 1 (Week 2) User Level of a Web System User Level of a Web System 1. Users - Typically these are the end-users of your system. This includes buyers, students, people, residents, etc. a. Regular users - They are the ones who can see the static content of your website. These users are not logged in to the system. Hence, some features or pages cannot be seen. b. Registered users - These are the users who signed up and created an account on your website. They are the ones capable of viewing some pages of your website. User Level of a Web System 2. Admin These are the main owners of the system who do not have the technical skills or knowledge about it. These are the "main clients" which the developers are dealing with or cater to get their services. Examples are business owners, department heads, etc. 3. Super Admin These users have the technical knowledge and can maintain the system (or website) once the end output has been delivered to the "main client". Commonly, in an organization, these are the IT departments since they are the ones who have the technical knowledge and can maintain the system if ever problems or issues arise. Types of Web Application Content 1. Static Content - Content that does not change dynamically and remains the same until it is manually updated. - HTML pages, images, text files, fixed articles, and documentation. 2. Dynamic Content - Content that changes based on user interactions, data, or other factors. - User profiles, personalized recommendations, real-time updates, and dashboards.  MODULE 1 (Week 2) Software Applications to Prepare for this Subject Software Applications for Web Development 1. Browser (Google Chrome, Firefox, Edge, etc.) 2. Text Editor (Notepad, Notepad++, Visual Studio Code) 3. Localhost (XAMPP)  MODULE 1 (Week 2) Any questions? Be ready for our Week 3 topics